diff --git a/assets/styles/layout.scss b/assets/styles/layout.scss
index 9c4228b..19f5e1b 100644
--- a/assets/styles/layout.scss
+++ b/assets/styles/layout.scss
@@ -1,16 +1,3 @@
-body {
-  // fill screen
-  margin: 0;
-  min-height: 100vh;
-  overflow-x: clip;
-
-  // center everything
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
 .row { display: flex; flex-direction: row; }
 .col { display: flex; flex-direction: column; }
 .wrap { display: flex; flex-wrap: wrap; }
diff --git a/assets/styles/structure.scss b/assets/styles/structure.scss
new file mode 100644
index 0000000..6f79590
--- /dev/null
+++ b/assets/styles/structure.scss
@@ -0,0 +1,29 @@
+body { margin: 0 }
+
+// by default keep page at the top of the screen
+:root { --header-height: 0px }
+// offset page giving room for header when it's present
+:root:has(header + #page) { --header-height: 3rem }
+
+#page {
+  position: fixed;
+  top: var(--header-height);
+  width: 100vw;
+  max-width: 100vw;
+  // fill vertically exactly to remaining screen size (since we
+  --root-size: calc(100vh - var(--header-height));
+  max-height: var(--root-size);
+  min-height: var(--root-size);
+  // center contents
+  display: flex;
+  flex-direction: column;
+  & > * { align-self: center; margin: auto; }
+}
+
+// only show scrollbar when needed & make header hide stuff under it
+body { overflow-y: overlay; }
+#page {
+  overflow: scroll;
+  overflow-x: hidden;
+  overflow-y: overlay;
+}
diff --git a/components/Header.vue b/components/Header.vue
new file mode 100644
index 0000000..8115c84
--- /dev/null
+++ b/components/Header.vue
@@ -0,0 +1,49 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <header class="col">
+    <nav class="row gap2 spaceBetween alignCenter">
+      <NuxtLink to="/" class="home interactive" aria-label="home">
+        <img class="pfp" src="/assets/pfp.svg">
+      </NuxtLink>
+
+      <Links />
+    </nav>
+  </header>
+</template>
+
+<style lang="scss">
+header {
+  position: fixed; top: 0;
+  left: 0; right: 0;
+
+  nav {
+    height: var(--header-height);
+    max-width: 50rem;
+    width: calc(100vw - 2rem);
+  }
+
+  a.home {
+    height: 100%;
+    aspect-ratio: 1;
+    padding: 0.25rem;
+    border-radius: unset;
+  }
+  .pfp { height: 100%; }
+
+  // mobile responsiveness
+  .links {
+    // first hide labels
+    @media (max-width: 35rem) {
+      span { display: none; }
+    }
+    // then hide blog/email and reduce the gap between links
+    @media (max-width: 20rem) {
+      .blog, .email { display: none; }
+      gap: 0.25rem;
+    }
+  }
+}
+</style>
diff --git a/components/Links.vue b/components/Links.vue
new file mode 100644
index 0000000..dc11388
--- /dev/null
+++ b/components/Links.vue
@@ -0,0 +1,60 @@
+<template>
+  <ul class="links wrap gap4 centerChildren">
+    <li class="interactive email">
+      <NuxtLink to="mailto:fseusb@gmail.com" aria-label="email">
+        <Icon name="ri:mail-fill" />
+        <span>Email</span>
+      </NuxtLink>
+    </li>
+    <li class="interactive github">
+      <NuxtLink to="https://github.com/CodeF53" aria-label="github">
+        <Icon name="ph:github-logo-fill" />
+        <span>Github</span>
+      </NuxtLink>
+    </li>
+    <li class="interactive blog">
+      <NuxtLink to="https://dev.to/f53" aria-label="blog">
+        <Icon name="ri:article-fill" />
+        <span>Blog</span>
+      </NuxtLink>
+    </li>
+    <li class="interactive portfolio">
+      <NuxtLink to="/portfolio" aria-label="portfolio">
+        <Icon name="ri:file-list-fill" />
+        <span>Portfolio</span>
+      </NuxtLink>
+    </li>
+    <!-- <li class="interactive linkedin">
+      <NuxtLink to="https://www.linkedin.com/in/chase-welsh/" aria-label="linkedin">
+        <Icon name="mdi:linkedin" />
+        <span>LinkedIn</span>
+      </NuxtLink>
+    </li> -->
+  </ul>
+</template>
+
+<style lang="scss">
+.links {
+  list-style-type: none;
+  padding: 0;
+
+  li {
+    background-color: var(--accent-light);
+    &, > * { color: var(--accent-dark); }
+    font-weight: bold;
+
+    a {
+      display: flex;
+      gap: .25rem;
+      justify-content: center;
+      align-items: center;
+      text-decoration: none;
+
+      > svg {
+        height: 1.25rem;
+        width: 1.25rem;
+      }
+    }
+  }
+}
+</style>
diff --git a/layouts/default.vue b/layouts/default.vue
index ba4672f..86c45f6 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,3 +1,7 @@
 <template>
-  <slot />
+  <Header />
+
+  <div id="page">
+    <slot />
+  </div>
 </template>
diff --git a/layouts/home.vue b/layouts/home.vue
new file mode 100644
index 0000000..dbe1b75
--- /dev/null
+++ b/layouts/home.vue
@@ -0,0 +1,5 @@
+<template>
+  <div id="page">
+    <slot />
+  </div>
+</template>
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8fdfb2f..cec4685 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -4,9 +4,12 @@ export default defineNuxtConfig({
   typescript: { strict: true, typeCheck: true, shim: false },
   modules: ['nuxt-lodash', 'nuxt-icon', '@nuxt/content'],
 
-  css: ['~/assets/styles/layout.scss', '~/assets/styles/misc.scss', '~/assets/styles/font.scss', '~/assets/styles/components.scss'],
+  css: ['~/assets/styles/layout.scss', '~/assets/styles/misc.scss', '~/assets/styles/font.scss', '~/assets/styles/components.scss', '~/assets/styles/structure.scss'],
 
   app: {
+    // no useless root nuxt div
+    rootTag: 'body',
+
     head: {
       htmlAttrs: { lang: 'en' },
       title: 'F53',
diff --git a/pages/index.vue b/pages/index.vue
index c605fcc..468a6a9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,3 +1,7 @@
+<script setup lang="ts">
+definePageMeta({ layout: 'home' })
+</script>
+
 <template>
   <div id="home" class="row centerChildren">
     <img class="pfp" src="/assets/pfp.svg">
@@ -11,38 +15,7 @@
         Fluent in React, Vue, Ruby on Rails, Java, and Python.
       </p>
 
-      <ul class="links wrap gap4 centerChildren">
-        <li class="interactive">
-          <NuxtLink to="mailto:fseusb@gmail.com" aria-label="email">
-            <Icon name="ri:mail-fill" />
-            <span>Email</span>
-          </NuxtLink>
-        </li>
-        <li class="interactive">
-          <NuxtLink to="https://github.com/CodeF53" aria-label="github">
-            <Icon name="ph:github-logo-fill" />
-            <span>Github</span>
-          </NuxtLink>
-        </li>
-        <li class="interactive">
-          <NuxtLink to="https://dev.to/f53" aria-label="blog">
-            <Icon name="ri:article-fill" />
-            <span>Blog</span>
-          </NuxtLink>
-        </li>
-        <li class="interactive">
-          <NuxtLink to="/portfolio" aria-label="portfolio">
-            <Icon name="ri:file-list-fill" />
-            <span>Portfolio</span>
-          </NuxtLink>
-        </li>
-        <!-- <li class="interactive">
-          <NuxtLink to="https://dev.to/f53" aria-label="blog">
-            <Icon name="mdi:linkedin" />
-            <span>LinkedIn</span>
-          </NuxtLink>
-        </li> -->
-      </ul>
+      <Links />
     </main>
   </div>
   <div>
@@ -51,7 +24,6 @@
       <li>background: move render to worker thread</li>
       <li>portfolio sorting, filtering</li>
       <li>self-host blogs</li>
-      <li>layout for non-homepage pages</li>
       <li>duplicate site, but with real name and picture</li>
     </ul>
   </div>
@@ -77,30 +49,6 @@
     max-width: var(--content-width);
   }
 
-  .links {
-    list-style-type: none;
-    padding: 0;
-
-    li {
-      background-color: var(--accent-light);
-      &, > * { color: var(--accent-dark); }
-      font-weight: bold;
-
-      a {
-        display: flex;
-        gap: .25rem;
-        justify-content: center;
-        align-items: center;
-        text-decoration: none;
-
-        > svg {
-          height: 1.25rem;
-          width: 1.25rem;
-        }
-      }
-    }
-  }
-
   h1 { color: var(--accent-light); }
 }
 </style>