diff --git a/index.html b/index.html
index 2b43be3..a38d208 100644
--- a/index.html
+++ b/index.html
@@ -9,8 +9,8 @@
 </head>
 
 <body>
-    <header class="shadow-lg pt-4 pb-6 sticky top-0 left-0">
-        <div class="flex flex-row gap-2 items-center container max-w-[1440px] justify-between">
+    <header class="shadow-lg pt-4 pb-6 sticky top-0 left-0 bg-slate-50">
+        <div class="flex flex-row gap-2 items-center container max-w-[1440px] justify-between px-4">
             <div><img src="/public/images/logo-light.svg" alt="wah.su" /></div>
             <div>
                 <a href="https://status.wah.su" class="flex flex-row items-center gap-2" target="_blank">
@@ -36,7 +36,7 @@
         </div>
     </header>
 
-    <div class="container max-w-[1440px] mt-14 text-center">
+    <div class="container max-w-[1440px] mt-14 text-center px-4">
         <h1 class="font-bold text-8xl text-gray-800">Welcome to wah.su!</h1>
         <!--noformat-->
         <p class="max-w-[840px] mx-auto mt-6 text-gray-700 text-left whitespace-pre">
@@ -49,9 +49,9 @@
         <!--noformat-->
     </div>
 
-    <div class="container max-w-[1440px] mt-14">
+    <div class="container max-w-[1440px] mt-14 px-4 py-4">
         <h1 class="font-bold text-4xl mb-4 text-gray-800">Currently hosting</h1>
-        <div class="flex flex-row gap-2" id="services">
+        <div class="flex flex-row gap-2 flex-wrap" id="services">
         </div>
     </div>
 
diff --git a/public/js/cards.js b/public/js/cards.js
index 5ca397a..bec49d3 100644
--- a/public/js/cards.js
+++ b/public/js/cards.js
@@ -40,13 +40,13 @@ window.onload = function () {
                   </h5>
                   <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">${cards[index].description}
                   </p>
-                  <div class="flex gap-1">
+                  <div class="flex gap-1 items-center justify-center flex-wrap lg:flex-nowrap lg:justify-start">
                       <a href="${cards[index].about}" target="_blank"
-                          class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
+                          class="w-full inline-flex justify-center items-center py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700">
                           Read more
                       </a>
                       <a href="${cards[index].url}"
-                          class="inline-flex justify-center items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
+                          class="w-full inline-flex justify-center items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">
                           open
                           <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true"
                               xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
diff --git a/public/output.css b/public/output.css
index de37571..4b1a3c7 100644
--- a/public/output.css
+++ b/public/output.css
@@ -1250,6 +1250,22 @@ input:checked + .toggle-bg {
   width: 100%;
 }
 
+.w-auto {
+  width: auto;
+}
+
+.w-\[25\%\] {
+  width: 25%;
+}
+
+.w-\[50\%\] {
+  width: 50%;
+}
+
+.w-\[100\%\] {
+  width: 100%;
+}
+
 .max-w-\[1440px\] {
   max-width: 1440px;
 }
@@ -1336,6 +1352,10 @@ input:checked + .toggle-bg {
   flex-direction: row;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .items-start {
   align-items: flex-start;
 }
@@ -1500,6 +1520,16 @@ input:checked + .toggle-bg {
   background-color: rgb(227 160 8 / var(--tw-bg-opacity));
 }
 
+.bg-slate-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(226 232 240 / var(--tw-bg-opacity));
+}
+
+.bg-slate-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+}
+
 .object-cover {
   -o-object-fit: cover;
      object-fit: cover;
@@ -1550,6 +1580,16 @@ input:checked + .toggle-bg {
   padding-bottom: 0.75rem;
 }
 
+.px-4 {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.py-4 {
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+}
+
 .pb-6 {
   padding-bottom: 1.5rem;
 }
@@ -1902,6 +1942,44 @@ input:checked + .toggle-bg {
   --tw-ring-color: rgb(55 65 81 / var(--tw-ring-opacity));
 }
 
+@media (min-width: 768px) {
+  .md\:w-auto {
+    width: auto;
+  }
+
+  .md\:flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .md\:justify-start {
+    justify-content: flex-start;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:w-auto {
+    width: auto;
+  }
+
+  .lg\:flex-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  .lg\:justify-start {
+    justify-content: flex-start;
+  }
+}
+
+@media (min-width: 1280px) {
+  .xl\:w-auto {
+    width: auto;
+  }
+
+  .xl\:flex-nowrap {
+    flex-wrap: nowrap;
+  }
+}
+
 .rtl\:rotate-180:where([dir="rtl"], [dir="rtl"] *) {
   --tw-rotate: 180deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
