diff --git a/_includes/components/nav-primary.webc b/_includes/components/nav-primary.webc
index c0e4cb7..39e814f 100644
--- a/_includes/components/nav-primary.webc
+++ b/_includes/components/nav-primary.webc
@@ -1,6 +1,8 @@
 <nav id="primary">
   <nav-link link="/" data-name="<~"><~</nav-link>
-  <nav-link webc:for="c in categories" :category="c" :data-name="c"></nav-link>
+  <div class="pagelinks">
+    <nav-link webc:for="c in categories" :category="c" :data-name="c"></nav-link>
+  </div>
 
   <button class="audioToggle"></button>
 </nav>
@@ -24,12 +26,30 @@
 <script src="nav-primary.js" type="module"></script>
 
 <style webc:scoped>
+/* => HOST */
+:host {
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  gap: 1em 0.25em;
+  margin-block: 0.5em 0.5em;
+  margin-inline: var(--page-margin-inline);
+}
+
 /* => CONTAINER */
 nav {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
+  font-size: 1.5em;
+}
+
+nav-link[data-name="<~"] {
+  grid-column: 1 / span 1
+}
+
+.pagelinks {
   display: flex;
   gap: 0.25em;
-  margin: 1em var(--page-margin-inline) 0.5em;
-  font-size: 1.5em;
 }
 
 /* => AUDIO TOGGLE */
@@ -57,7 +77,9 @@ nav {
 /* => SUb NAV */
 #sub {
   display: grid;
-  grid-template: 1fr / 1fr;
+  grid-template: subgrid / 1fr;
+  grid-column: 2 / -1;
+  margin: 0;
 }
 
 #sub > ul {