diff --git a/templates/_partials/footer.twig b/templates/_partials/footer.twig
index 6db58ed..829c7cd 100644
--- a/templates/_partials/footer.twig
+++ b/templates/_partials/footer.twig
@@ -16,6 +16,8 @@
             name: 'logo-mark',
             size: 'lg',
           }) }}
+
+          <span class="sr-only">{{ currentSite.name }} - Home</span>
         </a>
       </div>
 
diff --git a/templates/_partials/header.twig b/templates/_partials/header.twig
index a9ca191..f1545d1 100644
--- a/templates/_partials/header.twig
+++ b/templates/_partials/header.twig
@@ -17,35 +17,11 @@
   'border-b border-neutral-200 bg-neutral-100',
   'mdd:sticky mdd:top-0 mdd:z-50 mdd:bg-white mdd:shadow-md',
 ) }}">
-  <div class="container flex items-center justify-between">
+  {{ include('_partials/nav-desktop.twig', {
+    nodes: primaryNavigation,
+  }) }}
 
-    {# The logo changes when you open the mobile nav. Just because it's rad. #}
-    <a
-      href="{{ url('/') }}"
-      class="relative z-10 transition-colors duration-700 text-neutral-500"
-      :class="swapColor && '!text-amber-600'"
-      x-data="{
-        swapColor: false,
-      }"
-      @nav-mobile-toggle.window="swapColor = $event.detail.isOpen"
-    >
-      {{ icon({
-        name: 'logo-primary',
-        size: 'none',
-        class: 'w-[186px] h-32',
-      }) }}
-
-      <span class="sr-only">{{ currentSite.name }} - Home</span>
-    </a>
-
-    {{ include('_partials/nav-desktop.twig', {
-      class: 'hidden md:block',
-      nodes: primaryNavigation,
-    }) }}
-
-    {{ include('_partials/nav-mobile.twig', {
-      class: 'md:hidden',
-      nodes: primaryNavigation,
-    }) }}
-  </div>
+  {{ include('_partials/nav-mobile.twig', {
+    nodes: primaryNavigation,
+  }) }}
 </header>
diff --git a/templates/_partials/nav-desktop.twig b/templates/_partials/nav-desktop.twig
index 3308dd3..cb12f77 100644
--- a/templates/_partials/nav-desktop.twig
+++ b/templates/_partials/nav-desktop.twig
@@ -1,9 +1,5 @@
 {% from "_macros/icon.twig" import icon %}
 
-
-{# @var string|null class #}
-{% set class = class ?? null %}
-
 {# @var \Illuminate\Support\Collection<verbb\navigation\elements\Node> nodes #}
 {% set nodes = nodes ?? collect([]) %}
 
@@ -38,92 +34,106 @@
 {% endmacro %}
 
 <nav
-    class="{{ class }}"
-    x-data="nav"
-    @keyup.escape.window="popStack(1)"
-    @keydown.tab="handleTab($refs.subnav)"
+  class="container flex flex-wrap items-center justify-between mdd:hidden"
+  aria-label="Site Navigation"
+  x-data="nav"
+  @keyup.escape.window="popStack(1)"
+  @keydown.tab="handleTab($refs.subnav)"
+>
+  <a
+    href="{{ url('/') }}"
+    class="text-neutral-500"
   >
-    <ul class="inline-flex gap-8" @click.outside="resetStack()">
-      <!-- Creating a scope for refs -->
-      {% for node in nodes %}
-        {% set children = node.children.collect() %}
-        {% set hasChildren = children.count() %}
-        {% set reverseNavAnchoring = totalNodes - loop.index0 <= 2 %}
+    {{ icon({
+      name: 'logo-primary',
+      size: 'none',
+      class: 'w-[186px] h-32',
+    }) }}
+
+    <span class="sr-only">{{ currentSite.name }} - Home</span>
+  </a>
+
+  <ul class="inline-flex flex-wrap gap-8" @click.outside="resetStack()">
+    <!-- Creating a scope for refs -->
+    {% for node in nodes %}
+      {% set children = node.children.collect() %}
+      {% set hasChildren = children.count() %}
+      {% set reverseNavAnchoring = totalNodes - loop.index0 <= 2 %}
 
-        <li class="relative" x-data x-id="['subnav']">
-          {{ _self.navIem({
-            node,
-            hasChildren,
-          }) }}
+      <li class="relative" x-data x-id="['subnav']">
+        {{ _self.navIem({
+          node,
+          hasChildren,
+        }) }}
 
-          {% if hasChildren %}
-            <ul
-              class="{{ cx('absolute top-full bg-neutral-200 text-nowrap w-[200px] border border-neutral-300', {
-                'left-0': not reverseNavAnchoring,
-                'right-0': reverseNavAnchoring,
-              }) }}"
-              :id="$id('subnav')"
-              x-cloak
-              x-ref="subnav"
-              x-show="isInStack($refs.subnav)"
-              x-transition
-              data-level="{{ node.level }}"
-            >
+        {% if hasChildren %}
+          <ul
+            class="{{ cx('absolute top-full bg-neutral-200 text-nowrap w-[200px] border border-neutral-300', {
+              'left-0': not reverseNavAnchoring,
+              'right-0': reverseNavAnchoring,
+            }) }}"
+            :id="$id('subnav')"
+            x-cloak
+            x-ref="subnav"
+            x-show="isInStack($refs.subnav)"
+            x-transition
+            data-level="{{ node.level }}"
+          >
 
-              {#
-              If the root node has a url, render it as a link since the top level element is a <button>
-              Use the passive node type to prevent this behavior
-              #}
-              {% if node.url %}
-                <li>
-                  {{ _self.navIem({
-                    node: node,
-                    hasChildren: false,
-                    verticalPaddingClass: 'py-8',
-                  }) }}
-                </li>
-              {% endif %}
+            {#
+            If the root node has a url, render it as a link since the top level element is a <button>
+            Use the passive node type to prevent this behavior
+            #}
+            {% if node.url %}
+              <li>
+                {{ _self.navIem({
+                  node: node,
+                  hasChildren: false,
+                  verticalPaddingClass: 'py-8',
+                }) }}
+              </li>
+            {% endif %}
 
-              {% for child in children %}
-                {% set grandchildren = child.children.collect() %}
-                <li class="relative" x-data x-id="['subnav']">
+            {% for child in children %}
+              {% set grandchildren = child.children.collect() %}
+              <li class="relative" x-data x-id="['subnav']">
 
-                  {{ _self.navIem({
-                    node: child,
-                    hasChildren: grandchildren.count(),
-                    iconTransitionClass: 'transition-transform -rotate-90 group-aria-expanded:translate-x-4',
-                    verticalPaddingClass: 'py-8',
-                  }) }}
+                {{ _self.navIem({
+                  node: child,
+                  hasChildren: grandchildren.count(),
+                  iconTransitionClass: 'transition-transform -rotate-90 group-aria-expanded:translate-x-4',
+                  verticalPaddingClass: 'py-8',
+                }) }}
 
-                  {% if grandchildren.count() %}
-                    <ul
-                      class="{{ cx('absolute -top-1 bg-neutral-500 border border-neutral-600 text-nowrap p-3', {
-                        'left-full': not reverseNavAnchoring,
-                        'right-full': reverseNavAnchoring,
-                      }) }}"
-                      :id="$id('subnav')"
-                      x-cloak
-                      x-ref="subnav"
-                      x-show="isInStack($refs.subnav)"
-                      x-transition
-                      data-level="{{ child.level }}"
-                    >
-                      {% for grandchild in grandchildren %}
-                        <li>
-                          {{ _self.navIem({
-                            node: grandchild,
-                            textClass: 'text-neutral-100',
-                            verticalPaddingClass: 'py-8',
-                          }) }}
-                        </li>
-                      {% endfor %}
-                    </ul>
-                  {% endif %}
-                </li>
-              {% endfor %}
-            </ul>
-          {% endif %}
-        </li>
-      {% endfor %}
-    </ul>
-  </nav>
+                {% if grandchildren.count() %}
+                  <ul
+                    class="{{ cx('absolute -top-1 bg-neutral-500 border border-neutral-600 text-nowrap p-3', {
+                      'left-full': not reverseNavAnchoring,
+                      'right-full': reverseNavAnchoring,
+                    }) }}"
+                    :id="$id('subnav')"
+                    x-cloak
+                    x-ref="subnav"
+                    x-show="isInStack($refs.subnav)"
+                    x-transition
+                    data-level="{{ child.level }}"
+                  >
+                    {% for grandchild in grandchildren %}
+                      <li>
+                        {{ _self.navIem({
+                          node: grandchild,
+                          textClass: 'text-neutral-100',
+                          verticalPaddingClass: 'py-8',
+                        }) }}
+                      </li>
+                    {% endfor %}
+                  </ul>
+                {% endif %}
+              </li>
+            {% endfor %}
+          </ul>
+        {% endif %}
+      </li>
+    {% endfor %}
+  </ul>
+</nav>
diff --git a/templates/_partials/nav-mobile.twig b/templates/_partials/nav-mobile.twig
index 347c96a..175a3a6 100644
--- a/templates/_partials/nav-mobile.twig
+++ b/templates/_partials/nav-mobile.twig
@@ -1,9 +1,5 @@
 {% from "_macros/icon.twig" import icon %}
 
-
-{# @var string|null class #}
-{% set class = class ?? null %}
-
 {# @var \Illuminate\Support\Collection<verbb\navigation\elements\Node> nodes #}
 {% set nodes = nodes ?? collect([]) %}
 
@@ -34,7 +30,8 @@
 {% endmacro %}
 
 <nav
-  class="{{ class }}"
+  aria-label="Site Navigation"
+  class="md:hidden"
   :style="isOpen ? 'display: block' : ''" {# Keeps the mobile nav open even if the breakpoint changes #}
   x-id="['nav-mobile']"
   x-data="{
@@ -42,44 +39,70 @@
     toggle() {
       $nextTick(() => {
         this.isOpen = !this.isOpen;
-        // Emit an event that our header logo can listen for to change color
-        $dispatch('nav-mobile-toggle', { isOpen: this.isOpen })
       });
     },
   }"
   x-trap.noscroll.inert="isOpen"
   @keyup.escape.window="isOpen && toggle()"
 >
-  <button
-    class="flex py-16 px-8 -mr-8 group relative z-10"
-    @click="toggle()"
-    :aria-expanded="isOpen"
-    :aria-controls="$id('nav-mobile')"
+
+  {# Logo and nav toggle button lockup #}
+  <div
+    class="container flex items-center justify-between transition-colors duration-300"
+    :class="isOpen && '!bg-neutral-800'"
   >
-    <div class="flex flex-col justify-between group w-24 h-[18px]">
-      <span class="h-2 rounded-full bg-gray-600 transition-all duration-300 ease-in-out group-aria-expanded:bg-white group-aria-expanded:rotate-45 group-aria-expanded:translate-y-[8px]"></span>
-      <span class="h-2 rounded-full bg-gray-600 transition-all duration-300 ease-in-out group-aria-expanded:bg-white group-aria-expanded:opacity-0"></span>
-      <span class="h-2 rounded-full bg-gray-600 transition-all duration-300 ease-in-out group-aria-expanded:bg-white group-aria-expanded:-rotate-45 group-aria-expanded:-translate-y-[8px]"></span>
-    </div>
-    <span class="sr-only">Open Menu</span>
-  </button>
+    {# The logo changes when you open the mobile nav. Just because it's rad. #}
+    <a
+      href="{{ url('/') }}"
+      class="relative z-10 transition-colors duration-700 text-neutral-500"
+      :class="isOpen && '!text-amber-600'"
+    >
+      {{ icon({
+        name: 'logo-primary',
+        size: 'none',
+        class: 'w-[186px] h-32',
+      }) }}
+
+      <span class="sr-only">{{ currentSite.name }} - Home</span>
+    </a>
+
+    <button
+      class="flex py-16 px-8 -mr-8 group relative z-10"
+      @click="toggle()"
+      :aria-expanded="isOpen"
+      :aria-controls="$id('nav-mobile')"
+    >
+      <div class="flex flex-col justify-between group w-24 h-[18px]">
+        <span class="h-2 rounded-full bg-neutral-600 transition-all duration-300 ease-in-out group-aria-expanded:bg-white group-aria-expanded:rotate-45 group-aria-expanded:translate-y-[8px]"></span>
+        <span class="h-2 rounded-full bg-neutral-600 transition-all duration-300 ease-in-out group-aria-expanded:bg-white group-aria-expanded:opacity-0"></span>
+        <span class="h-2 rounded-full bg-neutral-600 transition-all duration-300 ease-in-out group-aria-expanded:bg-white group-aria-expanded:-rotate-45 group-aria-expanded:-translate-y-[8px]"></span>
+      </div>
+      <span class="sr-only">Open Menu</span>
+    </button>
+  </div>
 
+  {# Nav Links #}
   <div
     :id="$id('nav-mobile')"
     x-cloak
     x-show="isOpen"
-    class="fixed top-0 left-0 w-full h-full bg-neutral-700"
+    class="absolute top-full left-0 w-full bottom-[calc(-100vh+100%)] bg-neutral-700 overflow-y-scroll -z-10"
     x-data="nav"
     @keyup.escape="handleEscape"
-    x-transition:enter="transition ease-out duration-300"
-    x-transition:enter-start="opacity-0 -translate-y-32"
-    x-transition:enter-end="opacity-100 translate-y-0"
-    x-transition:leave="transition ease-in duration-300"
-    x-transition:leave-start="opacity-100 translate-y-0"
-    x-transition:leave-end="opacity-0 -translate-y-32"
+    x-transition.opacity.duration.300ms
   >
 
-    <ul class="flex flex-col py-64" @click.outside="resetStack()">
+    <ul
+      x-show="isOpen"
+      class="flex flex-col py-32"
+      x-transition:enter="transition ease-out duration-300"
+      x-transition:enter-start="-translate-y-32"
+      x-transition:enter-end="translate-y-0"
+      x-transition:leave="transition ease-in duration-300"
+      x-transition:leave-start="translate-y-0"
+      x-transition:leave-end="-translate-y-32"
+      @click.outside="resetStack()"
+    >
       <!-- Creating a scope for refs -->
       {% for node in nodes %}
         {% set children = node.children.collect() %}