diff --git a/docs/header.html b/docs/header.html
index 20a3b1e..2af9505 100644
--- a/docs/header.html
+++ b/docs/header.html
@@ -1,182 +1,148 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8">
+    <meta charset="UTF-8" />
     <title>Puffing Up Reinforcement Learning</title>
     <style>
-        :root {
-            --header-height: 160px;
-        }
-
-        body {
-            margin: 0;
-            padding: 0;
-            font-family: system-ui, -apple-system, sans-serif;
-        }
-
         .site-header {
-            background: var(--bg-color);
-            padding: 1rem 0;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-            height: var(--header-height);
-        }
-
-        .header-content {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 0 2rem;
-            height: 100%;
-        }
+            display: flex;
+            max-width: var(--content-max-width);
+            margin-inline: auto;
+            box-sizing: border-box;
 
-        .header-main {
-            display: grid;
-            grid-template-columns: 2fr 1fr;
-            height: 100%;
-            gap: 2rem;
-        }
+            background-color: var(--foreground);
+            > * {
+                height: var(--header-height);
+            }
 
-        .left-content {
-            display: flex;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            gap: 1rem;
-            height: 100%;
+            @media (width < 62rem) {
+                flex-direction: column;
+                > :not(.title) {
+                    padding-inline: var(--content-padding);
+                }
+                > .title > a {
+                    padding-inline: var(--content-padding);
+                }
+            }
+            @media (width >= 62rem) {
+                position: sticky;
+                top: 0;
+                z-index: 10;
+
+                > .title > a {
+                    padding-inline-start: var(--content-padding);
+                }
+                > :last-child {
+                    padding-inline-end: var(--content-padding);
+                }
+            }
         }
 
-        .logo {
-            font-size: 2rem;
-            font-weight: bold;
-            color: var(--text-color);
-            text-decoration: none;
+        .title {
+            display: grid;
+            font-size: inherit;
+            font-weight: inherit;
+            color: inherit;
+            margin: 0;
+            flex-grow: 1;
+            a {
+                display: flex;
+                gap: 0.5rem;
+                padding-right: 0.5rem;
+                align-items: center;
+            }
+            a:not(:hover) {
+                color: inherit;
+            }
+            video {
+                height: 2rem;
+            }
+            .text {
+                font-weight: bold;
+            }
+            .spacer {
+                flex-grow: 1;
+            }
         }
 
         .nav-links {
             display: flex;
-            gap: 2rem;
-            align-items: center;
-        }
-
-        .nav-links a {
-            color: var(--text-color);
-            text-decoration: none;
-            font-size: 1.1rem;
-            transition: color 0.2s;
-        }
-
-        .nav-links a:hover {
-            color: var(--highlight);
+            a {
+                display: flex;
+                align-items: center;
+                text-decoration: none;
+                padding: 0 0.5rem;
+            }
+            a:not(:hover) {
+                color: inherit;
+            }
         }
 
         .social-links {
             display: flex;
-            gap: 1rem;
-            align-items: center;
-        }
-
-        .social-links img {
-            height: 20px;
-        }
-
-        .header-video {
-            height: 100%;
-            width: 100%;
-            position: relative;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .header-video video {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-
-        /* Banner video below header */
-        .banner-video {
-            width: 100%;
-            height: 400px;
-            overflow: hidden;
-            border-radius: 8px;
-            margin-top: 2rem;
-        }
-
-        .banner-video video {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .header-main {
-                grid-template-columns: 1fr;
-                gap: 1rem;
-            }
-
-            .nav-links {
-                flex-wrap: wrap;
-                gap: 1rem;
+            a {
+                display: flex;
+                align-items: center;
+                padding: 0 0.5rem;
+                &:last-child {
+                    padding-right: 0;
+                }
             }
-
-            .header-video {
-                display: none; /* Hide puffer on mobile */
+            img {
+                height: 20px;
             }
-        .discord-button {
-            display: flex;
-            align-items: center;
-            background-color: #5865F2;
-            color: white;
-            padding: 10px 20px;
-            border-radius: 8px;
-            text-decoration: none;
-            font-family: Arial, sans-serif;
-            font-size: 16px;
-            transition: background-color 0.2s;
-        }
-        .discord-button:hover {
-            background-color: #4752C4;
-        }
-        .discord-button img {
-            width: 24px;
-            height: 24px;
-            margin-right: 8px;
-        }
         }
     </style>
 </head>
 <body>
     <header class="site-header">
-        <div class="header-content">
-            <div class="header-main">
-                <div class="left-content">
-                    <a href="/" class="logo">Puffing Up Reinforcement Learning</a>
-                    <div class="social-links">
-                        <a href="https://github.com/pufferai/pufferlib" target="_blank" rel="noopener noreferrer">
-                            <img src="https://img.shields.io/github/stars/pufferai/pufferlib?labelColor=999999&color=66dcdc&cacheSeconds=100000" alt="GitHub Stars">
-                        </a>
-                        <a href="https://discord.gg/puffer" target="_blank" rel="noopener noreferrer">
-                            <img alt="Discord" src="https://img.shields.io/discord/1019421966429593712?label=Discord&color=5865F2">
-                        </a>
-                        <a href="https://twitter.com/jsuarez5341" target="_blank" rel="noopener noreferrer">
-                            <img src="https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social&label=Follow%20@jsuarez5341" alt="Twitter Follow">
-                        </a>
-                    </div>
-                    <nav class="nav-links">
-                        <a href="index.html">Home</a>
-                        <a href="ocean.html">Ocean</a>
-                        <a href="docs.html">Docs</a>
-                        <a href="blog.html">Blog</a>
-                    </nav>
-                </div>
-                <div class="header-video">
-                    <video autoplay playsinline muted loop>
-                        <source src="assets/banner.mp4" type="video/mp4">
-                        <source src="assets/banner.webm" type="video/webm">
-                    </video>
-                </div>
-            </div>
+        <h1 class="title">
+            <a href="/">
+                <video autoplay playsinline muted loop>
+                    <source src="assets/banner.mp4" type="video/mp4" />
+                    <source src="assets/banner.webm" type="video/webm" />
+                </video>
+                <span class="text">Puffing Up Reinforcement Learning</span>
+                <div class="spacer"></div>
+                Home
+            </a>
+        </h1>
+        <nav class="nav-links">
+            <a href="ocean.html">Ocean</a>
+            <a href="docs.html">Docs</a>
+            <a href="blog.html">Blog</a>
+        </nav>
+        <div class="social-links">
+            <a
+                href="https://github.com/pufferai/pufferlib"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <img
+                    src="https://img.shields.io/github/stars/pufferai/pufferlib?labelColor=999999&color=66dcdc&cacheSeconds=100000"
+                    alt="GitHub Stars"
+                />
+            </a>
+            <a
+                href="https://discord.gg/puffer"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <img
+                    alt="Discord"
+                    src="https://img.shields.io/discord/1019421966429593712?label=Discord&color=5865F2"
+                />
+            </a>
+            <a
+                href="https://twitter.com/jsuarez5341"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <img
+                    src="https://img.shields.io/twitter/url/https/twitter.com/cloudposse.svg?style=social&label=Follow%20@jsuarez5341"
+                    alt="Twitter Follow"
+                />
+            </a>
         </div>
     </header>
 </body>
diff --git a/docs/styles.css b/docs/styles.css
index 0c63d56..874b2ab 100644
--- a/docs/styles.css
+++ b/docs/styles.css
@@ -5,13 +5,13 @@
     --text: #f1f1f1;
     --content-max-width: 1280px;
     --content-padding: 40px;
-    --header-height: 180px;
+    --header-height: 4rem;
 }
 
 body {
     margin: 0;
     padding: 0;
-    font-family: Helvetica, Arial, sans-serif;
+    font-family: system-ui, -apple-system, sans-serif;
     background: var(--foreground);
     color: var(--text);
     min-height: 100vh;
