diff --git a/astro/src/layouts/Layout.astro b/astro/src/layouts/Layout.astro
index bc17d78..0d7ec3a 100644
--- a/astro/src/layouts/Layout.astro
+++ b/astro/src/layouts/Layout.astro
@@ -14,7 +14,7 @@ const { title } = Astro.props;
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <title>{title}</title>
   </head>
-  <body class="font-plex bg-gray max-w-7xl mx-auto py-8 text-gray-200">
+  <body class="font-plex bg-gray max-w-7xl mx-auto py-8 text-gray-200 px-6">
     <slot />
   </body>
 </html>
diff --git a/astro/src/pages/index.astro b/astro/src/pages/index.astro
index 71fcab4..af7e00c 100644
--- a/astro/src/pages/index.astro
+++ b/astro/src/pages/index.astro
@@ -21,7 +21,7 @@ const posts = await getPosts();
       your website.
     </p>
     <h2 class="mt-6">Posts</h2>
-    <div class="grid grid-cols-3 mt-3">
+    <div class="flex gap-4 mt-3 flex-wrap">
       {
         posts.length > 0 ? (
           posts.reverse().map((post) => (
