diff --git a/src/components/Header.astro b/src/components/Header.astro
index e93e3c3..31f670a 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -24,16 +24,16 @@ const base = import.meta.env.BASE_URL;
     <li><a href="#">CV</a></li>
   </ul>
 
-  <div class="flex flex-col gap-2">
-    <div class="flex flex-row gap-4 items-center h-[110px]">
+  <div class="flex flex-col gap-4">
+    <div class="flex flex-row gap-2 items-center md:h-20 h-16">
       <a href={base} class="no-underline text-inherit"
-        ><h1 class="font-mono text-[3.815rem] pb-2">log101</h1></a
+        ><h1 class="font-mono md:text-6xl text-5xl -ml-[0.27rem]">Log101</h1></a
       >
       <div id="board" class="board"></div>
     </div>
     <div>
       <ul
-        class="flex flex-row items-center justify-between list-none p-0 gap-3 nav-links"
+        class="flex md:flex-row flex-col md:items-center justify-between list-none p-0 gap-3 nav-links"
       >
         <li>
           <a href={`${base}/category/fikir`}>Fikir</a>
@@ -48,15 +48,21 @@ const base = import.meta.env.BASE_URL;
           <a href={`${base}/category/ansiklopedi`}>Ansiklopedi</a>
         </li>
       </ul>
-      <hr class="mb-0" />
+      <hr class="mb-0 mt-2" />
     </div>
   </div>
 </div>
 
 <script>
   import ConwaySimulator from "../scripts/conway-simulator";
+  let cols = 24;
+  let pixelSize = 6;
+  if (screen.availWidth > 768) {
+    cols = 46;
+    pixelSize = 10;
+  }
 
-  let gol = new ConwaySimulator(8, 46, 10, 250);
+  let gol = new ConwaySimulator(8, cols, pixelSize, 250);
   document.getElementById("board")?.append(gol.canvas);
   gol.start();
 </script>
diff --git a/src/components/Post.astro b/src/components/Post.astro
index fc2ca98..3dc7651 100644
--- a/src/components/Post.astro
+++ b/src/components/Post.astro
@@ -117,7 +117,7 @@ const { Content } = await post.render();
   }
   {
     fullText && (
-      <div class="post-body">
+      <div class="text-lg">
         <Content />
       </div>
     )
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 3675c41..dd22a67 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -18,7 +18,9 @@ import "../styles/main.css";
     <title>{title}</title>
   </head>
   <body class="flex justify-center font-sans">
-    <div class="max-w-[750px] flex flex-col gap-8 my-6">
+    <div
+      class="md:max-w-[750px] w-full flex flex-col gap-8 md:gap-6 my-6 md:mx-0 mx-4 overflow-hidden"
+    >
       <slot />
     </div>
   </body>
diff --git a/src/styles/main.css b/src/styles/main.css
index 6aaf3ea..7ecf89c 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -2,15 +2,11 @@
 @tailwind utilities;
 
 :root {
-  --h1-desktop: 3.815rem;
-  --h2-desktop: 3.052rem;
-  --h3-desktop: 2.441rem;
-  --h4-desktop: 1.953rem;
-  --h5-desktop: 1.563rem;
-  --h6-desktop: 1.25rem;
-  --small-desktop: 0.8rem;
-  font-size: 20px;
   font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
+  font-size: 18px;
+  @media (min-width: 768px) {
+    font-size: 20px;
+  }
   background-color: #f5fffa;
 }
 
@@ -20,6 +16,6 @@
 
 @layer components {
   .posts {
-    @apply flex flex-col gap-10;
+    @apply flex flex-col gap-10 md:gap-8;
   }
 }
