diff --git a/bun.lockb b/bun.lockb
index 7324a7b..8f1bb0a 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/md/learn/flow-control/blocks.md b/md/learn/flow-control/blocks.md
new file mode 100644
index 0000000..8037ecd
--- /dev/null
+++ b/md/learn/flow-control/blocks.md
@@ -0,0 +1,4 @@
+# Blocks
+
+Blocks :D
+
diff --git a/static/index.html b/static/index.html
index 556f0a9..aa302dd 100644
--- a/static/index.html
+++ b/static/index.html
@@ -15,28 +15,41 @@
     <link
         href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800;900&family=Fira+Code&display=swap"
         rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
 </head>
 
 <body class="bg-c-bg text-c-text">
     <nav class="sticky top-0 h-12 border-b border-[rgba(150,150,150,0.25)] bg-c-nav-bg backdrop-blur-md z-20">
         <div class="container mx-auto h-full w-full flex items-center">
-            <a href="/" class="font-display font-bold text-2xl">
+            <a href="/" class="inline-block px-4 font-display font-black text-2xl hover:underline">
                 <span class="text-[#F5A9B8]">t</span><span>h</span><span class="text-[#5BCEFA]">p</span>
             </a>
-        </div>
+            <a href="/learn/" class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline">
+                Learn
+            </a>
+            <a href="/how-to/" class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline">
+                How to guides
+            </a>
+            <a href="/reference/" class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline">
+                Language reference
+            </a>
+            <a href="/api/" class="hidden lg:inline-block px-4 font-display font-bold-text-xl hover:underline">
+                Stdlib API
+            </a>
+      </div>
     </nav>
 
-    <div class="container mx-auto py-16 grid grid-cols-[auto_32rem] gap-4 px-10">
-        <div class="pl-10 table">
+    <div class="container mx-auto lg:py-16 py-2 lg:grid 2xl:grid-cols-[auto_32rem] lg:grid-cols-[auto_36rem] gap-4 lg:px-10 px-2">
+        <div class="lg:pl-10 table">
             <div class="table-cell align-middle">
-                <h1 class="font-display font-bold text-c-text-2 text-5xl leading-tight">
+                <h1 class="font-display font-bold text-c-text-2 lg:text-5xl text-3xl lg:text-left text-center leading-tight">
                     A modern, type safe,
-                    <br>
+                    <br class="hidden lg:inline-block">
                     secure language
-                    <br>
+                    <br class="hidden lg:inline-block">
                     compiled to PHP
                 </h1>
-                <p class="font-display text-c-text text-xl pt-6 pr-12">
+                <p class="font-display text-c-text text-xl pt-6 lg:pr-12">
                     Inspired by Rust, Zig and Swift, THP has a modern syntax, semantics,
                     type system and stdlib.
                 </p>
@@ -57,8 +70,8 @@
             </div>
         </div>
 
-        <div class="bg-[var(--code-theme-bg-color)] p-6 rounded-lg relative">
-            <span class="absolute inline-block h-[35rem] w-[35rem] -z-10 top-1/2 left-1/2 rounded-full
+        <div class="bg-[var(--code-theme-bg-color)] lg:p-6 p-2 rounded-lg relative">
+            <span class="absolute lg:inline-block hidden h-[35rem] w-[35rem] -z-10 top-1/2 left-1/2 rounded-full
                     transform -translate-x-1/2 -translate-y-1/2" style="background-image: conic-gradient(from 180deg at 50% 50%,#5BCEFA 0deg,#a853ba 180deg,#F5A9B8 1turn);
                     filter: blur(75px); opacity: 0.75;">
             </span>
@@ -106,4 +119,4 @@ print(
     </script>
 </body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/static/template.html b/static/template.html
index 308b585..dbf8043 100644
--- a/static/template.html
+++ b/static/template.html
@@ -27,22 +27,20 @@
         </div>
     </nav>
 
-    <div class="grid grid-cols-[14rem_auto_12rem] container mx-auto">
-        <div class="pt-12 h-screen sticky top-0">
-            <nav id="sidebar" class="py-4 pr-2 overflow-x-scroll"
-                style="height: calc(100vh - 3rem);"
+    <div class="lg:grid lg:grid-cols-[14rem_auto_12rem] container mx-auto">
+        <div class="pt-12 lg:h-screen lg:sticky top-0">
+            <nav id="sidebar" class="py-4 pr-2 overflow-x-scroll lg:h-[calc(100vh-3rem)]"
             >
                 {{pages}}
-
             </nav>
         </div>
 
-        <main class="py-[3.5rem] pl-12 pr-4 markdown min-w-0">
+        <main class="lg:py-[3.5rem] lg:pl-12 lg:pr-4 markdown min-w-0">
             {{markdown}}
         </main>
 
-        <div class="pt-12 max-h-screen overflow-x-scroll sticky top-0">
-            <nav class="rounded-md mt-10">
+        <div class="lg:pt-12 pt-4 max-h-screen overflow-x-scroll sticky top-0">
+            <nav class="rounded-md lg:mt-10">
                 <h2 class="font-display font-medium pb-2 text-c-text-2">On this page</h2>
 
                 {{sidebar}}
@@ -96,4 +94,4 @@
         }
     </script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/tailwind.css b/tailwind.css
index 0ec07a9..fc18947 100644
--- a/tailwind.css
+++ b/tailwind.css
@@ -33,9 +33,14 @@
 }
 
 html {
-    font-size: 17px;
+    font-size: 16px;
 }
 
+@media screen and (min-width: 1600px) {
+    html {
+        font-size: 17px;
+    }
+}
 body {
     font-family: Inter, 'Fira Sans', Inter, sans-serif;
 }
