diff --git a/resources/assets/Codex_icon_search.svg b/resources/assets/Codex_icon_search.svg
new file mode 100755
index 0000000..259a57b
--- /dev/null
+++ b/resources/assets/Codex_icon_search.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+	<title>
+		search
+	</title>
+	<path fill="currentColor" d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/>
+</svg>
diff --git a/resources/main.js b/resources/main.js
index 4230a94..82c8e57 100644
--- a/resources/main.js
+++ b/resources/main.js
@@ -7,11 +7,13 @@ mw.loader.using( [
 
         // This gets the user's current username, and puts it the user menu button.
         const username = mw.user.getName();
-        const button = document.getElementById('site-header-user').children[0];
-        if (username) {
-            button.textContent = username;
-        } else {
-            button.textContent = mw.message( 'login' ).text();
+        const buttons = document.getElementsByClassName('site-header-user');
+        for (const button of buttons) {
+            if (username) {
+                button.firstElementChild.textContent = username;
+            } else {
+                button.firstElementChild.textContent = mw.message( 'login' ).text();
+            }
         }
 
         // This replaces the text of the print link with the current 'print' system message.
diff --git a/resources/parts/dropmenu.less b/resources/parts/dropmenu.less
index c9e095e..84dce74 100644
--- a/resources/parts/dropmenu.less
+++ b/resources/parts/dropmenu.less
@@ -5,20 +5,21 @@
     border-top: 2px solid var(--blue-3);
 }
 
-#site-header-user button, #site-header-user-links, #page-header-options-links, #site-footer {
+.site-header-user button, #site-header-user-links, #page-header-options-links, #site-footer {
     background-image: linear-gradient(120deg, var(--blue-2), var(--blue-3));
 }
 
 #site-header-user-links, #page-header-options-links {
     display: none;
     position: absolute;
-    margin-top: var(--space);
+    margin-top: calc(var(--space) / 2);
     box-shadow: 0 0 3px 1px var(--blue-7);
     z-index: 12;
     right: 0;
+    border: 2px solid var(--blue-3);
 }
 
-#site-header-user:focus-within #site-header-user-links, #page-header-options:focus-within #page-header-options-links {
+.site-header-user:focus-within #site-header-user-links, #page-header-options:focus-within #page-header-options-links {
     display: flex;
 }
 
@@ -32,4 +33,5 @@
 
 .drop-link-list a {
     color: var(--blue-7);
+    text-shadow: 0 0 3px var(--blue-1);
 }
\ No newline at end of file
diff --git a/resources/parts/page-header.less b/resources/parts/page-header.less
index 89e7d45..79ceb4a 100644
--- a/resources/parts/page-header.less
+++ b/resources/parts/page-header.less
@@ -27,6 +27,12 @@
     position: relative;
 }
 
+#page-header-options:focus-within button{
+    color: var(--blue-5);
+    position: relative;
+    text-decoration: none;
+}
+
 #page-header-options button {
     text-decoration: underline;
 }
@@ -61,7 +67,11 @@
 }
 
 @media (min-width: 1081px) {
-
+    #site-header-container {
+        grid-column: pagestart;
+        display: flex;
+        gap: var(--space);
+    }
 }
 
 @media (max-width: 1080px) {
@@ -74,6 +84,11 @@
         margin-right: var(--space);
     }
 
+    #site-header-container {
+        grid-row: 2;
+        grid-column: 1 / 3;
+    }
+
 }
 
 @media (max-width: 720px) {
diff --git a/resources/parts/site-header.less b/resources/parts/site-header.less
index 062a715..466cc41 100644
--- a/resources/parts/site-header.less
+++ b/resources/parts/site-header.less
@@ -6,6 +6,7 @@
     display: flex;
     height: 100%;
     max-width: 12em;
+    margin: auto;
 }
 
 #site-header-wordmark {
@@ -19,10 +20,20 @@
     right: var(--space);
     top: 50%;
     transform: translate(0, -50%);
+    border-left: 1px solid var(--blue-1);
     background: none;
-    border-left: 1px solid var(--white);
     cursor: pointer;
     padding: var(--space);
+    width: calc(var(--space) * 4);
+    z-index: 6;
+}
+
+#site-header-search-icon {
+    grid-row: pagestart;
+    position: absolute;
+    top: calc(var(--space) * 1.5);
+    right: var(--space);
+    color: var(--white);
 }
 
 #site-header-search-bar {
@@ -34,7 +45,7 @@
 }
 
 #site-header-search-bar::placeholder {
-    color: white;
+    color: var(--blue-1);
     font-weight: bold;
     font-family: 'Libre Caslon';
 }
@@ -60,12 +71,12 @@
     box-shadow: inset 0 0 6px 1px var(--blue-5);
 }
 
-#site-header-user {
+.site-header-user {
     position: relative;
     margin-left: auto;
 }
 
-#site-header-user button {
+.site-header-user button {
     display: block;
     height: calc(100% - 3px);
     text-wrap: nowrap;
@@ -74,11 +85,11 @@
     border-bottom: 3px solid var(--black);
 }
 
-#site-header-user button:hover {
+.site-header-user button:hover {
     box-shadow: inset 0 0 3px 3px var(--blue-5);
 }
 
-#site-header-user:focus-within button {
+.site-header-user:focus-within button {
     background-image: none;
     background-color: var(--blue-4);
     box-shadow: 0 0 2px .5px var(--blue-7);
@@ -91,7 +102,7 @@
 @media (min-width: 1081px) {
 
     #site-header {
-        grid-column: navstart / -1;
+        grid-column: navstart / -3;
         grid-row: topstart;
         grid-template-columns: subgrid;
         grid-template-rows: subgrid;
@@ -114,14 +125,12 @@
     }
 
     #site-header-search, #site-header-search-bar {
-        grid-column: pagestart / menustart;
+        grid-column: pagestart / menugap;
         width: 100%;
         position: relative;
-        overflow: visible;
     }
 
-    #site-header-user {
-        // margin-left: calc(var(--space) * 3);
+    .site-header-user {
         grid-column: menustart / pageend;
     }
 
diff --git a/resources/parts/site-nav.less b/resources/parts/site-nav.less
index f66d795..2a9e6ba 100644
--- a/resources/parts/site-nav.less
+++ b/resources/parts/site-nav.less
@@ -35,7 +35,6 @@
 .mw-list-item {
     display: flex;
     gap: calc(var(--space));
-    overflow: clip;
 }
 
 #site-lastedit.layout-mouse {
@@ -73,7 +72,7 @@
         display: none;
     }
 
-    .site-nav-menu-links > li:not(#site-nav-toc-title):hover::before {
+    .site-nav-menu-links > li:not(#site-nav-toc-title):hover::before, .site-nav-menu-links > li:not(#site-nav-toc-title):has(a:focus)::before {
         background-image: url(assets/cursor-right.svg);
         background-size: contain;
         background-repeat: no-repeat;
diff --git a/resources/skin.less b/resources/skin.less
index 54f4fd3..bc02c4a 100644
--- a/resources/skin.less
+++ b/resources/skin.less
@@ -16,21 +16,27 @@
     src: url('assets/fonts/LibreCaslonText-Regular.ttf');
 }
 
+
 #grid {
     margin-bottom: 0;
     min-height: 100vh;
 }
 
 @media (min-width: 1081px) {
+
+    .layout-touch {
+        display: none;
+    }
+
     #grid {
         display: grid;
         grid-template-columns:
-            [navstart] var(--sidebar-width)
-            // [navspacer] var(--navspace-width)
-            [pagestart] 1fr 
-            [menustart] min-content
-            [pageend] calc(var(--sidebar-width))
-            // [userend]
+            [startgap] minmax(var(--space), 1.5fr)
+            [navstart] 12em
+            [navgap] minmax(var(--space), .5fr)
+            [pagestart] minmax(auto, 78em)
+            [pageend] 12em
+            [endgap] minmax(var(--space), 2fr)
         ;
         grid-template-rows:
             [topstart] 3.6em
@@ -40,16 +46,17 @@
             [pagebody] 1fr
             [bottomstart] auto
         ;
-        column-gap: 1vw;
         height: 100%;
-        max-width: calc(1200px + var(--sidebar-width) + var(--sidebar-width));
-        margin: auto;
-        padding-left: var(--space);
-        padding-right: var(--space);
+        flex-shrink: 1
     }
 }
 
 @media (max-width: 1080px) {
+
+    .layout-mouse {
+        display: none;
+    }
+
     #grid {
         display: grid;
         grid-template-columns: 1fr;
@@ -72,7 +79,7 @@
 
 :root {
     --sidebar-width: 12em;
-    --navspace-width: 1em;
+    --gap-width: clamp(1em, 6vw, 12em);
     --space: .6em;
     --pi-width: 24em;
 }
@@ -104,7 +111,11 @@ fieldset {
     display: none;
 }
 
-// #site-header-user button, #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
+*:focus {
+    z-index: 60;
+}
+
+// .site-header-user button, #site-header-user-links, #page-menu-button, #page-menu-list, #page-header-options-links {
 //     font-size: 1em;
 //     overflow: clip;
 //     text-overflow: ellipsis;
diff --git a/templates/site-header.mustache b/templates/site-header.mustache
index 349ed7f..ae6685d 100644
--- a/templates/site-header.mustache
+++ b/templates/site-header.mustache
@@ -10,16 +10,24 @@
         </a>
     </div>
 
-    <div id="site-header-search">
-        {{#data-search-box}}
-            <form action="{{{form-action}}}">
-                <input id="site-header-search-bar" {{{html-input-attributes}}}>
-                <input value="🔍" {{{html-button-go-attributes}}}>
-            </form>
-        {{/data-search-box}}
-    </div>
+    <div id="site-header-container">
 
-        <div id="site-header-user">
+        <div id="site-header-search">
+            {{#data-search-box}}
+                <form action="{{{form-action}}}">
+                    <input id="site-header-search-bar" {{{html-input-attributes}}}>
+                    <input value="" {{{html-button-go-attributes}}}>
+                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" id="site-header-search-icon">
+                        <title>
+                            Search
+                        </title>
+                        <path fill="currentColor" d="M12.2 13.6a7 7 0 1 1 1.4-1.4l5.4 5.4-1.4 1.4zM3 8a5 5 0 1 0 10 0A5 5 0 0 0 3 8"/>
+                    </svg>
+                </form>
+            {{/data-search-box}}
+        </div>
+
+        <div class="site-header-user layout-mouse">
             <button>User</button> {{! This button's content is a fallback, replaced with the user's username via Javascript. }}
             <div id="site-header-user-links">
                 <ul class="drop-link-list">
@@ -30,4 +38,17 @@
             </div>
         </div>
 
+    </div>
+
+    <div class="site-header-user layout-touch">
+        <button>User</button> {{! This button's content is a fallback, replaced with the user's username via Javascript. }}
+        <div id="site-header-user-links">
+            <ul class="drop-link-list">
+                {{#data-portlets.data-user-menu}}
+                    {{{html-items}}}      
+                {{/data-portlets.data-user-menu}}
+            </ul>
+        </div>
+    </div>
+
 </header>
\ No newline at end of file