diff --git a/app/index.html b/app/index.html
index 2678445..8808ea8 100644
--- a/app/index.html
+++ b/app/index.html
@@ -49,7 +49,7 @@
     </script>
 </head>
 
-<body class="bg-white h-screen text-black opacity-0 transition ease-in duration-700 mx-auto w-11/12 xl:w-3/4">
+<body class="bg-white h-screen text-black opacity-0 transition ease-in duration-700 mx-auto w-full sm:w-11/12 xl:w-3/4">
     <!-- Navbar -->
     <header class="flex w-full overflow-hidden pt-16 pb-12">
         <!-- Navbar -->
@@ -93,7 +93,7 @@
         </nav>
     </header>
     <!-- Content -->
-    <div id="gallery" class="grid grid-cols-2 lg:grid-cols-3 gap-x-5">
+    <div id="gallery" class="grid grid-cols-2 lg:grid-cols-3 space-x-2 sm:space-x-5">
     </div>
 
     <!-- Footer -->
diff --git a/app/scripts/distribute_images.js b/app/scripts/distribute_images.js
index 6da5f2c..4dcd0a8 100644
--- a/app/scripts/distribute_images.js
+++ b/app/scripts/distribute_images.js
@@ -38,7 +38,7 @@ function distributeImages() {
     const columns = [];
     for (let i = 0; i < columnCount; i++) {
         const column = document.createElement('div');
-        column.classList.add("flex", "flex-col", "gap-y-5");
+        column.classList.add("flex", "flex-col", "gap-y-2", "sm:gap-y-5");
         columns.push(column);
         gallery.appendChild(column);
     }
