diff --git a/src/static/tailwind.css b/src/static/tailwind.css
index 2b38757..ce6c1d9 100644
--- a/src/static/tailwind.css
+++ b/src/static/tailwind.css
@@ -584,8 +584,8 @@
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
   }
   .contents {
     display: contents;
diff --git a/src/templates/index.tsx b/src/templates/index.tsx
index e068b29..9984b14 100644
--- a/src/templates/index.tsx
+++ b/src/templates/index.tsx
@@ -7,7 +7,7 @@ export default function IndexPage() {
       <p className="text-4xl bg-orange-800/50 rounded-sm p-4">Images</p>
       <div
         id="index_images"
-        className="mt-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-4"
+        className="mt-2 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
       >
         {[...Array(7).keys()].map((idx) => {
           return <Placeholder key={`placeholder__image-${idx}`} isMobileHidden={idx > 4} />;