diff --git a/doc-generator/static/favicon-16x16.png b/doc-generator/static/favicon-16x16.png
new file mode 100644
index 0000000..50d7694
Binary files /dev/null and b/doc-generator/static/favicon-16x16.png differ
diff --git a/doc-generator/static/favicon-32x32.png b/doc-generator/static/favicon-32x32.png
new file mode 100644
index 0000000..cd05249
Binary files /dev/null and b/doc-generator/static/favicon-32x32.png differ
diff --git a/doc-generator/static/favicon.ico b/doc-generator/static/favicon.ico
new file mode 100644
index 0000000..9254f2f
Binary files /dev/null and b/doc-generator/static/favicon.ico differ
diff --git a/doc-generator/static/index.html b/doc-generator/static/index.html
index 991fce9..5a65391 100644
--- a/doc-generator/static/index.html
+++ b/doc-generator/static/index.html
@@ -14,13 +14,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
-    <style>
-        #transition {
-            width: 100%;
-            height: 2vh;
-            background-color: var(--js-color);
-        }
-    </style>
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 </head>
 <body>
     <!--
@@ -29,50 +24,66 @@
     </div>
     -->
 
-    <div id="greeter" style="background-color: black; color: var(--js-color); min-height: 100vh;">
-
-        <h2 class="text-6xl px-4 py-6 font-bold leading-snug">
-            Typed.
-            <br>
-            Expressive.
-            <br>
-            Consistent.
-            <br>
-            Friendly.
-        </h2>
-
-        <p class="p-4" style="color: #ffdf90;">
-            Misti is <i>yet another</i> programming language that compiles to <b>JavaScript</b>.
-        </p>
-
-        <!-- Demo code -->
-
-        <div class="px-4 py-4">
-            <a class="inline-block py-4 px-12 my-1 border-2 border-c5-primary 
-            bg-js-color
-            text-dark-color
-            rounded-xl cursor-pointer select-none font-medium shadow-md hover:shadow-2xl"
-                href="/en/docs/latest/"
+    <div class="grid" style="grid-template-columns: 12rem calc(100vw - 12rem);">
+        <div class="text-sm p-4 h-screen py-8 sticky top-0 overflow-y-scroll overflow-x-hidden border-r border-border-color">
+            <a
+                href="/" 
+                class="inline-block border border-transparent 
+                hover:border-c2-primary hover:text-c2-primary transition-colors rounded-md"
             >
-                Get started
-            </a>
-
-            <br>
-
-            <a class="inline-block py-4 px-12 my-1 border-2 border-c2-primary 
-            bg-c2-primary-container hover:bg-c2-primary
-            text-c2-on-primary-container hover:text-c2-on-primary
-            rounded-xl cursor-pointer select-none transition-colors"
-                href="/en/api/latest/"
-            >
-                API
+                <svg style="width: 100%" viewBox="0 0 10240 10240">
+                    <g id="l4bTekyh7yd5nSqF0diaM2" fill="var(--c2-primary)" style="transform: none;">
+                        <g style="transform: none;">
+                            <path id="pEcfct8KT" d="M10103 9031 c-296 -154 -525 -301 -823 -526 -522 -397 -1153 -1070 -1467 -1565 -232 -367 -424 -755 -643 -1300 -193 -481 -298 -764 -440 -1182 l-98 -287 -147 302 c-143 293 -302 581 -548 992 -66 110 -156 272 -200 360 -44 88 -101 192 -127 230 -26 39 -57 90 -69 113 -55 109 -182 189 -314 199 -100 8 -171 -14 -272 -82 -83 -57 -118 -90 -225 -215 -35 -41 -85 -97 -111 -125 -139 -149 -331 -451 -594 -940 -21 -38 -55 -99 -75 -135 -21 -36 -55 -103 -77 -150 -22 -47 -51 -110 -65 -140 l-26 -55 -38 85 c-20 47 -84 177 -142 290 -57 113 -132 268 -167 346 -35 77 -169 352 -298 610 -364 727 -529 1000 -781 1289 -169 194 -438 463 -544 545 -117 90 -121 92 -217 157 -225 150 -441 285 -595 370 -408 227 -532 286 -775 373 -104 38 -198 71 -208 75 -16 7 -17 -15 -15 -411 l3 -418 48 -18 c61 -23 227 -103 337 -163 47 -26 119 -65 160 -87 128 -69 209 -117 395 -236 304 -195 395 -264 560 -429 284 -282 429 -469 612 -788 92 -160 509 -990 613 -1220 38 -84 104 -219 147 -301 215 -412 352 -790 413 -1144 31 -182 77 -357 104 -405 35 -58 117 -132 184 -163 50 -24 70 -27 157 -27 88 0 107 3 158 27 73 34 160 116 192 182 14 28 32 85 40 126 47 247 387 1087 555 1375 9 17 31 55 47 85 147 272 323 573 371 635 l18 23 69 -117 c38 -64 101 -170 141 -236 354 -595 583 -1059 774 -1570 135 -360 215 -532 327 -702 96 -145 263 -210 436 -169 117 28 194 76 252 161 57 83 66 122 75 317 13 274 19 302 166 828 167 599 604 1736 859 2234 264 517 484 816 945 1290 314 322 641 591 983 807 l97 61 0 444 c0 244 -1 444 -2 444 -2 0 -62 -31 -135 -69z">
+                            </path>
+                        </g>
+                    </g>
+                </svg>
+    
+                <p class="font-extrabold text-6xl text-center">Misti</p>
             </a>
         </div>
-
+        <div class="px-8 max-w-screen-lg">
+            <h2 class="text-6xl px-4 py-6 font-bold leading-snug">
+                Typed.
+                <br>
+                Expressive.
+                <br>
+                Consistent.
+                <br>
+                Friendly.
+            </h2>
+    
+            <p class="p-4" style="color: #ffdf90;">
+                Misti is <i>yet another</i> programming language that compiles to <b>JavaScript</b>.
+            </p>
+    
+            <!-- Demo code -->
+    
+            <div class="px-4 py-4">
+                <a class="inline-block py-4 px-12 my-1 border-2 border-c5-primary 
+                bg-js-color
+                text-dark-color
+                rounded-xl cursor-pointer select-none font-medium shadow-md hover:shadow-2xl"
+                    href="/en/docs/latest/"
+                >
+                    Get started
+                </a>
+    
+                <br>
+    
+                <a class="inline-block py-4 px-12 my-1 border-2 border-c2-primary 
+                bg-c2-primary-container hover:bg-c2-primary
+                text-c2-on-primary-container hover:text-c2-on-primary
+                rounded-xl cursor-pointer select-none transition-colors"
+                    href="/en/stdlib/latest/"
+                >
+                    StdLib
+                </a>
+            </div>
+        </div>
     </div>
 
-    <div id="transition"></div>
-
     <script>
         // Inter - Google fonts - load here as to not interrupt the page
         const linkEl = document.createElement("link");
diff --git a/doc-generator/static/logo.svg b/doc-generator/static/logo.svg
new file mode 100644
index 0000000..086e5ce
--- /dev/null
+++ b/doc-generator/static/logo.svg
@@ -0,0 +1,8 @@
+<svg class="img-fluid" id="outputsvg" xmlns="http://www.w3.org/2000/svg" style="transform: matrix(1.3, 0, 0, 1.3, 0, 0); transform-origin: 50% 50% 0px; cursor: move; max-height: none; transition: none 0s ease 0s;" width="1024" height="1024" viewBox="0 0 10240 10240">
+    <g id="l4bTekyh7yd5nSqF0diaM2" fill="var(--c2)" style="transform: none;">
+        <g style="transform: none;">
+            <path id="pEcfct8KT" d="M10103 9031 c-296 -154 -525 -301 -823 -526 -522 -397 -1153 -1070 -1467 -1565 -232 -367 -424 -755 -643 -1300 -193 -481 -298 -764 -440 -1182 l-98 -287 -147 302 c-143 293 -302 581 -548 992 -66 110 -156 272 -200 360 -44 88 -101 192 -127 230 -26 39 -57 90 -69 113 -55 109 -182 189 -314 199 -100 8 -171 -14 -272 -82 -83 -57 -118 -90 -225 -215 -35 -41 -85 -97 -111 -125 -139 -149 -331 -451 -594 -940 -21 -38 -55 -99 -75 -135 -21 -36 -55 -103 -77 -150 -22 -47 -51 -110 -65 -140 l-26 -55 -38 85 c-20 47 -84 177 -142 290 -57 113 -132 268 -167 346 -35 77 -169 352 -298 610 -364 727 -529 1000 -781 1289 -169 194 -438 463 -544 545 -117 90 -121 92 -217 157 -225 150 -441 285 -595 370 -408 227 -532 286 -775 373 -104 38 -198 71 -208 75 -16 7 -17 -15 -15 -411 l3 -418 48 -18 c61 -23 227 -103 337 -163 47 -26 119 -65 160 -87 128 -69 209 -117 395 -236 304 -195 395 -264 560 -429 284 -282 429 -469 612 -788 92 -160 509 -990 613 -1220 38 -84 104 -219 147 -301 215 -412 352 -790 413 -1144 31 -182 77 -357 104 -405 35 -58 117 -132 184 -163 50 -24 70 -27 157 -27 88 0 107 3 158 27 73 34 160 116 192 182 14 28 32 85 40 126 47 247 387 1087 555 1375 9 17 31 55 47 85 147 272 323 573 371 635 l18 23 69 -117 c38 -64 101 -170 141 -236 354 -595 583 -1059 774 -1570 135 -360 215 -532 327 -702 96 -145 263 -210 436 -169 117 28 194 76 252 161 57 83 66 122 75 317 13 274 19 302 166 828 167 599 604 1736 859 2234 264 517 484 816 945 1290 314 322 641 591 983 807 l97 61 0 444 c0 244 -1 444 -2 444 -2 0 -62 -31 -135 -69z">
+            </path>
+        </g>
+    </g>
+</svg>
diff --git a/doc-generator/static/misti_logo.png b/doc-generator/static/misti_logo.png
new file mode 100644
index 0000000..af99aa2
Binary files /dev/null and b/doc-generator/static/misti_logo.png differ
diff --git a/doc-generator/static/template.html b/doc-generator/static/template.html
index 2d839b4..221b671 100644
--- a/doc-generator/static/template.html
+++ b/doc-generator/static/template.html
@@ -14,12 +14,31 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
 </head>
 <body>
 
     <div class="grid" style="grid-template-columns: 12rem 12rem calc(100vw - 24rem);">
-        <div class="text-sm p-4 h-screen py-12 sticky top-0 overflow-y-scroll overflow-x-hidden border-r border-border-color">
-            <p class="font-extrabold text-5xl text-center">Misti</p>
+        <div class="text-sm p-4 h-screen py-8 sticky top-0 overflow-y-scroll overflow-x-hidden border-r border-border-color">
+            <a
+                href="/" 
+                class="inline-block border border-transparent 
+                hover:border-c2-primary hover:text-c2-primary transition-colors rounded-md"
+            >
+                <svg style="width: 100%" viewBox="0 0 10240 10240">
+                    <g id="l4bTekyh7yd5nSqF0diaM2" fill="var(--c2-primary)" style="transform: none;">
+                        <g style="transform: none;">
+                            <path id="pEcfct8KT" d="M10103 9031 c-296 -154 -525 -301 -823 -526 -522 -397 -1153 -1070 -1467 -1565 -232 -367 -424 -755 -643 -1300 -193 -481 -298 -764 -440 -1182 l-98 -287 -147 302 c-143 293 -302 581 -548 992 -66 110 -156 272 -200 360 -44 88 -101 192 -127 230 -26 39 -57 90 -69 113 -55 109 -182 189 -314 199 -100 8 -171 -14 -272 -82 -83 -57 -118 -90 -225 -215 -35 -41 -85 -97 -111 -125 -139 -149 -331 -451 -594 -940 -21 -38 -55 -99 -75 -135 -21 -36 -55 -103 -77 -150 -22 -47 -51 -110 -65 -140 l-26 -55 -38 85 c-20 47 -84 177 -142 290 -57 113 -132 268 -167 346 -35 77 -169 352 -298 610 -364 727 -529 1000 -781 1289 -169 194 -438 463 -544 545 -117 90 -121 92 -217 157 -225 150 -441 285 -595 370 -408 227 -532 286 -775 373 -104 38 -198 71 -208 75 -16 7 -17 -15 -15 -411 l3 -418 48 -18 c61 -23 227 -103 337 -163 47 -26 119 -65 160 -87 128 -69 209 -117 395 -236 304 -195 395 -264 560 -429 284 -282 429 -469 612 -788 92 -160 509 -990 613 -1220 38 -84 104 -219 147 -301 215 -412 352 -790 413 -1144 31 -182 77 -357 104 -405 35 -58 117 -132 184 -163 50 -24 70 -27 157 -27 88 0 107 3 158 27 73 34 160 116 192 182 14 28 32 85 40 126 47 247 387 1087 555 1375 9 17 31 55 47 85 147 272 323 573 371 635 l18 23 69 -117 c38 -64 101 -170 141 -236 354 -595 583 -1059 774 -1570 135 -360 215 -532 327 -702 96 -145 263 -210 436 -169 117 28 194 76 252 161 57 83 66 122 75 317 13 274 19 302 166 828 167 599 604 1736 859 2234 264 517 484 816 945 1290 314 322 641 591 983 807 l97 61 0 444 c0 244 -1 444 -2 444 -2 0 -62 -31 -135 -69z">
+                            </path>
+                        </g>
+                    </g>
+                </svg>
+    
+                <p class="font-extrabold text-6xl text-center">Misti</p>
+            </a>
+
             {{pages}}
         </div>
         <div class="text-sm p-4 h-screen py-12 sticky top-0 overflow-y-scroll overflow-x-hidden border-r border-border-color">
