diff --git a/next.config.js b/next.config.js
index 9ad8806..ac74d31 100644
--- a/next.config.js
+++ b/next.config.js
@@ -5,14 +5,6 @@ const nextConfig = {
   images: {
     imageSizes: [300, 600, 1200],
     remotePatterns: [
-      {
-        protocol: 'https',
-        hostname: `${
-          process.env.AWS_BUCKET || 'me-blog'
-        }.s3.ap-southeast-1.wasabisys.com`,
-        port: '',
-        pathname: '/**',
-      },
       {
         protocol: 'https',
         hostname: 'cdn.dumpsayamrat.com',
diff --git a/src/app/(public)/gallery/grid/page.tsx b/src/app/(public)/gallery/grid/page.tsx
index 65880b9..4a4bd3a 100644
--- a/src/app/(public)/gallery/grid/page.tsx
+++ b/src/app/(public)/gallery/grid/page.tsx
@@ -13,16 +13,16 @@ export const revalidate = 'force-cache'
 export default async function Gallery() {
   const photos = await getCachedPhotoList()
   return (
-    <div className="grid grid-cols-1 lg:grid-cols-12 gap-1 mx-auto max-w-9xl">
-      <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-1 col-span-9">
+    <div className="grid gap-1">
+      <div className="grid grid-cols-2md:grid-cols-3 lg:grid-cols-4 gap-1">
         {photos.map(photo =>
-          photo && photo.presignedURL ? (
+          photo && photo.url ? (
             <div
               className="relative overflow-hidden shadow-md animate-fade-in"
               key={photo.id}
             >
               <Image
-                src={photo.presignedURL}
+                src={photo.url}
                 alt={photo.title}
                 width={SMALL_PHOTO_SIZE}
                 height={SMALL_PHOTO_SIZE / photo.aspectRatio}
diff --git a/src/app/(public)/gallery/layout.tsx b/src/app/(public)/gallery/layout.tsx
index 46fe2b0..4be9ae5 100644
--- a/src/app/(public)/gallery/layout.tsx
+++ b/src/app/(public)/gallery/layout.tsx
@@ -1,7 +1,14 @@
+import PhotoLayoutSwitcher from '@/components/PhotoLayoutSwitcher'
+
 export default function GalleryLayout({
   children,
 }: {
   children: React.ReactNode
 }) {
-  return <article className="md:mx-4">{children}</article>
+  return (
+    <article className="md:mx-3 max-w-8xl">
+      <PhotoLayoutSwitcher />
+      <div>{children}</div>
+    </article>
+  )
 }
diff --git a/src/app/(public)/gallery/page.tsx b/src/app/(public)/gallery/page.tsx
index 1209752..da01811 100644
--- a/src/app/(public)/gallery/page.tsx
+++ b/src/app/(public)/gallery/page.tsx
@@ -15,25 +15,26 @@ export const revalidate = 'force-cache'
 export default async function Gallery() {
   const photos = await getCachedPhotoList()
   return (
-    <div className="grid grid-cols-1 gap-1">
+    <div className="grid gap-1">
       {photos.map(photo =>
         photo && photo.url ? (
           <div
             key={photo.id}
-            className="grid grid-cols-1 md:grid-cols-12 gap-x-4"
+            className="grid gap-x-4 grid-cols-1 md:grid-cols-2"
           >
-            <div className="relative overflow-hidden flex items-center col-span-1 md:col-span-9 animate-fade-in">
+            <div className="relative overflow-hidden flex items-center animate-fade-in m-w-[1200px]">
               <Image
-                src={`/photo?key=${photo.url}`}
+                src={photo.url}
                 alt={photo.title}
                 width={LARGE_PHOTO_SIZE}
                 height={LARGE_PHOTO_SIZE / photo.aspectRatio}
                 blurDataURL={photo.blur}
                 placeholder="blur"
                 quality={100}
+                style={{width: LARGE_PHOTO_SIZE, height: 'auto'}}
               />
             </div>
-            <div className="sticky top-4 self-start col-span-1 md:col-span-3 animate-fade-in-left prose lg:prose-xl dark:prose-invert">
+            <div className="sticky top-4 self-start animate-fade-in-left prose lg:prose-xl dark:prose-invert">
               <h3 className="text-xl font-bold mb-2 uppercase">
                 {photo.title}
               </h3>
diff --git a/src/components/PhotoLayoutSwitcher.tsx b/src/components/PhotoLayoutSwitcher.tsx
new file mode 100644
index 0000000..d710fb3
--- /dev/null
+++ b/src/components/PhotoLayoutSwitcher.tsx
@@ -0,0 +1,72 @@
+'use client'
+import clsx from 'clsx'
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+
+const FullFrameIcon = () => (
+  <svg
+    width="28"
+    height="24"
+    viewBox="0 0 28 24"
+    fill="none"
+    stroke="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Full Frame</title>
+    <rect
+      x="5.625"
+      y="6.625"
+      width="16.75"
+      height="10.75"
+      rx="1"
+      strokeWidth="1.25"
+    />
+    <line x1="5" y1="3.875" x2="23" y2="3.875" strokeWidth="1.25" />
+    <line x1="23" y1="20.125" x2="5" y2="20.125" strokeWidth="1.25" />
+  </svg>
+)
+
+const GridIcon = () => (
+  <svg
+    width="28"
+    height="24"
+    viewBox="0 0 28 24"
+    fill="none"
+    stroke="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <title>Grid</title>
+    <rect
+      x="5.625"
+      y="6.625"
+      width="16.75"
+      height="10.75"
+      rx="1"
+      strokeWidth="1.25"
+    />
+    <line x1="11.375" y1="7" x2="11.375" y2="18" strokeWidth="1.25" />
+    <line x1="16.875" y1="7" x2="16.875" y2="18" strokeWidth="1.25" />
+    <line x1="5" y1="12.0417" x2="22.3333" y2="12.0417" strokeWidth="1.25" />
+  </svg>
+)
+
+const PhotoLayoutSwitcher = () => {
+  const pathname = usePathname()
+  const gridPage = pathname.includes('/grid');
+  return (
+    <div className="flex justify-center gap-1 mb-4 prose dark:prose-invert mx-auto">
+      <Link href="/gallery" className={clsx({
+        'text-stone-700': gridPage
+      })}>
+        <FullFrameIcon />
+      </Link>
+      <Link href="/gallery/grid" className={clsx({
+        'text-stone-700': !gridPage
+      })}>
+        <GridIcon />
+      </Link>
+    </div>
+  )
+}
+
+export default PhotoLayoutSwitcher;
diff --git a/src/constants.ts b/src/constants.ts
index 3821c01..b1f50ed 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -12,6 +12,6 @@ export const BLOB_PHOTO_PREFIX = 'photos'
 
 export const LARGE_PHOTO_SIZE = 1200
 
-export const SMALL_PHOTO_SIZE = 300
+export const SMALL_PHOTO_SIZE = 600
 
 export const MEMO_CACHE_TIME = 12 * 60 * 60 * 1000 // 12 hours
diff --git a/src/services/photo.ts b/src/services/photo.ts
index e461991..9e1abb0 100644
--- a/src/services/photo.ts
+++ b/src/services/photo.ts
@@ -7,6 +7,7 @@ import { kv } from '@vercel/kv'
 import { cache } from 'react'
 import MemoryCache from '@/memory-cache'
 import { CACHE_GET_PRESIGNED_KEY, MEMO_CACHE_TIME } from '@/constants'
+import { generateCdnUrl } from '@/utils/photo'
 
 const memoCache = MemoryCache.getInstance()
 
@@ -46,12 +47,9 @@ export const getPhotoList = async () => {
     )
   )
   photos = photos.sort((a, b) => (b?.createdAt ?? 0) - (a?.createdAt ?? 0))
-  const urls = await Promise.all(
-    photos.map(photo => (photo?.url ? getPresignedURL(photo?.url) : ''))
-  )
-  return photos.map((photo, index) => ({
+  return photos.map((photo) => ({
     ...(photo as Photo),
-    presignedURL: urls[index],
+    url: photo?.url ? generateCdnUrl(photo.url) : '',
   }))
 }
 
diff --git a/src/utils/photo.ts b/src/utils/photo.ts
index c863126..2df2846 100644
--- a/src/utils/photo.ts
+++ b/src/utils/photo.ts
@@ -21,3 +21,5 @@ export const convertFormDataToPhoto = (data: PhotoFormData): Photo => {
     takenAt: new Date(data.takenAt).valueOf(),
   }
 }
+
+export const generateCdnUrl = (path: string) => `${process.env.NEXT_PUBLIC_CDN}/${path}`