diff --git a/src/assets/photos/21.jpg b/src/assets/photos/21.jpg
new file mode 100644
index 0000000..ed096e8
Binary files /dev/null and b/src/assets/photos/21.jpg differ
diff --git a/src/assets/photos/22.jpg b/src/assets/photos/22.jpg
new file mode 100644
index 0000000..5a747bc
Binary files /dev/null and b/src/assets/photos/22.jpg differ
diff --git a/src/pages/photography/[photo].astro b/src/pages/photography/[photo].astro
index 3db8678..35287a7 100644
--- a/src/pages/photography/[photo].astro
+++ b/src/pages/photography/[photo].astro
@@ -22,7 +22,7 @@ const { photo } = Astro.props;
 
 <RootLayout title="Photo" hideScrollbar themeColor="#111827">
   <div
-    class="cursor-pointer bg-gray-900 w-full h-screen flex justify-center"
+    class="cursor-pointer bg-gray-900 w-full h-[100svh] fixed flex justify-center"
     onclick="
     history.back()
     "
diff --git a/src/pages/photography/index.astro b/src/pages/photography/index.astro
index 6df0863..aedd06f 100644
--- a/src/pages/photography/index.astro
+++ b/src/pages/photography/index.astro
@@ -39,12 +39,14 @@ export const getFileNameFromPath = (path: string) => {
     </TextContentLayout>
   </ContainerLayout>
 
-  <section class="px-4 mb-2 columns-2 gap-4 md:columns-3 lg:columns-4">
+  <section
+    class="px-3 mb-2 columns-2 gap-3 sm:px-4 sm:gap-4 md:columns-3 lg:columns-4"
+  >
     {
       photos.sort(sortFiles).map((photo) => (
         <a
           href={`/photography/${getFileNameFromPath(photo.default.src)}`}
-          class="flex w-full py-2 duration-100 hover:-translate-y-1 rounded-lg"
+          class="flex w-full py-1.5 duration-100 hover:-translate-y-1 rounded-lg sm:py-2"
         >
           <div class="bg-gray-200 rounded">
             <Image