diff --git a/resources/colors.less b/resources/colors.less
index 8ecb6f0..2452233 100644
--- a/resources/colors.less
+++ b/resources/colors.less
@@ -1,4 +1,6 @@
 :root {
+  --black: oklch(0 0 0);
+  --white: oklch(1 0 0);
   --blue-1: oklch(0.96 0.02 270);
   --blue-2: oklch(0.92 0.04 270);
   --blue-3: oklch(0.79 0.11 270);
diff --git a/resources/layout-mouse.less b/resources/layout-mouse.less
index 5b96668..2b43c18 100644
--- a/resources/layout-mouse.less
+++ b/resources/layout-mouse.less
@@ -1,10 +1,10 @@
 :root {
-    --sidebar-width: calc(4.2em + 9vw);
+    --sidebar-width: calc(10.2em + calc(.3vw * 9) + var(--space));
 }
 
 #grid {
     display: grid;
-    grid-template-columns: var(--sidebar-width) auto var(--sidebar-width);
+    grid-template-columns: 10.2em calc(.3vw * 9) 1fr auto var(--sidebar-width);
     grid-template-rows:
         [topstart] auto
         [title] auto
@@ -16,23 +16,39 @@
     height: 100%;
     max-width: calc(1200px + var(--sidebar-width) + var(--sidebar-width));
     margin: auto;
-    padding-left: calc(var(--space) * 2);
-    padding-right: calc(var(--space) * 2);
+    padding: calc(var(--space) * 2);
 }
 
 #page {
-    margin-top: calc(var(--space) * 6);
+    margin-top: calc(0.3vw * 9);
+    grid-column: 3 / 5;
+    grid-row: title / bottomstart ;
+    display: grid;
+    grid-template-rows: subgrid;
+    grid-template-columns: subgrid;
 }
 
 #topbar {
     column-gap: var(--space);
-    grid-column: 2;
-    grid-row: topstart ;
-    grid-template-columns: 1fr 4fr 1fr;
+    grid-column: 1 / 6;
+    grid-row: topstart / bottomstart;
+    grid-template-columns: subgrid;
+    grid-template-rows: subgrid;
+}
+
+#top-logo {
+    grid-row: 1;
 }
 
 #nav-search, #nav-search-bar {
+    grid-column: 3 / 4;
     width: 100%;
+    position: relative;
+}
+
+#user-menu {
+    margin-left: calc(var(--space) * 3);
+    grid-column: 4 / 5;
 }
 
 #versions {
@@ -45,12 +61,11 @@
     display: flex;
     flex-direction: column;
     gap: calc(var(--space) * 2);
-    width: calc(var(--space) * 18);
+    width: 100%;
 }
 
 .nav-menu {
-    border-radius: var(--space);
-    margin-right: var(--space);
+    border-radius: calc(var(--space) / 2);
 }
 
 .nav-show {
@@ -72,8 +87,13 @@
 }
 
 .site-links > a:not(.nav-backtotop):hover::before, #nav-toc > .site-links > li:hover::before {
-    content: '☞';
-    color: var(--gold-1);
+    background-image: url(/resources/assets/cursor-test.svg);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center;
+    display: block;
+    content: '';
+    width: 1em;
 }
 
 .page-link-list {
@@ -82,33 +102,47 @@
     gap: calc(var(--space) / 2);
 }
 
-#sidebar-page-mouse {
-    grid-column: 3;
-    grid-row: pagebody / -1;
-    display: flex;
-    flex-direction: column;
-    gap: calc(var(--space) * 2);
+#user-menu-list {
+    right: 0;
 }
 
-#sidebar-page-touch {
+.sidebar-page-mouse {
+    grid-column: 5;
+    grid-row: topstart;
+}
+
+#page-menu {
+    position: relative;
+    min-height: 100%;
+    width: 100%;
+}
+
+#page-menu-button {
+    height: 100%;
+
+    text-align: left;
+}
+
+#page-menu > * {
+    padding-left: var(--space);
+}
+
+.sidebar-page-touch {
     display: none;
 }
 
-#page {
-    grid-column: 2;
-    grid-row: title / bottomstart ;
-    display: grid;
-    grid-template-rows: subgrid;
-    grid-template-columns: subgrid;
+#page-menu-list {
+    flex-direction: column;
+    gap: calc(var(--space) * 4);
 }
 
 #titleblock {
-    grid-column: 1;
+    grid-column: 1 / 3;
     grid-row: title;
 }
 
 #mw-content-text {
-    grid-column: 1;
+    grid-column: 1 / 3;
     grid-row: pagebody / bottomstart;
 }
 
@@ -123,7 +157,7 @@
 }
 
 #bottombar {
-    grid-column: 2 / 3;
+    grid-column: 3 / 4;
     grid-row: bottomstart;
     bottom: 0;
     height: 6em;
diff --git a/resources/layout-touch.less b/resources/layout-touch.less
index 50ff456..41f4730 100644
--- a/resources/layout-touch.less
+++ b/resources/layout-touch.less
@@ -1,13 +1,12 @@
 :root {
-    --touch-whitespace: calc(18vw - 132px);
+    --touch-whitespace: 1.2vw;
 }
 
 #grid {
     display: grid;
     grid-template-columns: 1fr;
     grid-template-rows: auto;
-    padding-left: var(--touch-whitespace);
-    padding-right: var(--touch-whitespace);
+    padding: var(--space);
 }
 
 p {
@@ -28,22 +27,30 @@ p {
 }
 
 #topbar {
+    grid-column: 1;
     grid-row: 1;
-    grid-template-columns: 1fr 1fr;
-    margin-left: var(--space);
-    margin-right: var(--space);
+    column-gap: var(--space);
+    grid-template-columns: auto minmax(min-content, 1fr) min-content;
+    grid-template-rows: 3.6em 3.6em;
+    row-gap: var(--space);
 }
 
 #top-logo {
     grid-column: 1;
+    grid-row: 1;
+    align-items: flex-start;
 }
 
-#user-menu {
-    grid-column: 2;
+#top-logo a {
+    top: var(--space);
+    left: 50%;
+    transform: translate(-50%);
 }
 
 #nav-search {
-    grid-column: 1 / 3;
+    position: sticky;
+    top: var(--space);
+    grid-column: 1 / 4;
     grid-row: 2;
     width: 100%;
 }
@@ -67,7 +74,6 @@ p {
     z-index: 1;
     gap: var(--space);
     justify-content: center;
-    overflow-x: scroll;
     overflow-y: hidden;
     padding-top: 1em;
     margin-top: -1em;
@@ -87,45 +93,46 @@ p {
     height: calc(var(--space) * 3);
 }
 
-#sidebar-page-touch {
-    width: 100%;
-    height: fit-content;
-    display: grid;
-    grid-template-columns: 50% 50%;
-    margin-bottom: calc(var(--space) * 3);
-    justify-items: center;
-}
-
-#sidebar-page-mouse {
+.sidebar-page-mouse {
     display: none;
 }
 
-.sidebar-page-menu {
-    text-align: center;
+.sidebar-page-touch {
+    grid-row: 1;
+    grid-column: 3;
 }
 
-#page-main {
-    grid-row: 2;
-    grid-column: 1 / 3;
+#user-menu {
+    margin-left: auto;
 }
 
-#page-main .page-link-list {
-    display: flex;
-    gap: var(--space);
+#page-menu {
+    width: fit-content;
+    position: relative;
 }
 
-#page-main .page-link-list li {
-    text-align: center;
+#page-menu-button {
+    height: 100%;
+    width: 100%;
 }
 
-.page-view-details .page-link-list {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+#user-menu-list {
+    right: 0;
+}
+
+#page-menu-list {
+    grid-row: unset;
+    right: 0;
+    margin-top: var(--space);
+    gap: calc(var(--space) * 3);
+    padding: var(--space);
+    background-color: var(--gold-2);
+    box-shadow: 0 0 2px 1px var(--gold-7), inset 0 0 6px 3px var(--gold-1);
+    z-index: 1;
 }
 
 .site-links {
-    border-top: 1px solid white;
+    border-top: 1px solid var(--gold-1);
     padding-top: calc(var(--space));
     margin-left: var(--space);
     margin-right: var(--space);
@@ -138,10 +145,6 @@ p {
     text-align: center;
 }
 
-.page-link-list {
-    font-size: .9em;
-}
-
 details.page-links {
     display: flex;
     flex-direction: column;
@@ -149,6 +152,7 @@ details.page-links {
 }
 
 #page {
+    grid-column: 1;
     grid-row: 3 / 5;
     display: grid;
     grid-template-rows: subgrid;
@@ -172,18 +176,5 @@ details.page-links {
     .pi-title:first-child {
         display: none;
     }
-    #titleblock {
-        display: flex;
-        flex-direction: column-reverse;
-        align-items: center;
-        margin-left: var(--space);
-        margin-right: var(--space);
-    }
-    #sidebar-nav {
-        justify-content: space-around;
-    }
-    .sidebar-page-menu {
-    width: max-content;
-    flex-wrap: wrap;
-}
+
 }
\ No newline at end of file
diff --git a/resources/navmenu.less b/resources/navmenu.less
index dc477af..6e279a1 100644
--- a/resources/navmenu.less
+++ b/resources/navmenu.less
@@ -12,7 +12,7 @@
 }
 
 .site-links > a, #nav-toc > .site-links, .nav-show {
-    text-shadow: 0 0 2px black;
+    text-shadow: 0 0 2px var(--black);
     font-weight: bold;
     font-size: .9em;
     font-family: 'Libre Caslon', serif;
diff --git a/resources/skin.less b/resources/skin.less
index d92227e..63fb8b1 100644
--- a/resources/skin.less
+++ b/resources/skin.less
@@ -22,6 +22,7 @@
 
 body {
     margin: 0;
+    background-image: linear-gradient(100deg, var(--blue-1), var(--white) 20%, var(--white)70%, var(--blue-1))
 }
 
 :root {
@@ -36,6 +37,16 @@ fieldset {
     margin-top: calc(var(--space) * 3);
 }
 
+#title-views {
+    display: flex;
+    gap: var(--space);
+    align-items: center;
+}
+
+#site-icon {
+    position: absolute;
+}
+
 #page a:link {
     color: var(--blue-6);
 }
@@ -68,6 +79,7 @@ fieldset {
 
 #firstHeading, .mw-heading h2 {
     font-family: 'Libre Caslon', serif;
+    text-wrap: balance;
 }
 
 .mw-heading {
@@ -85,18 +97,43 @@ p {
 }
 
 #titleblock {
-    border-bottom: 3px solid black;
-    margin-bottom: calc(var(--space) * 2);
-    display: flex;  
+    border-bottom: 3px solid var(--black);
+    // margin-bottom: calc(var(--space) * 2);
+    display: flex;
+    align-items: end;
     justify-content: space-between;
 }
 
+#pagetitle {
+    display: flex;
+    // align-items: center;
+}
+
+#title-views {
+    margin-left: auto;
+    margin-bottom: calc(var(--space) / 2);
+}
+
 #versions {
     display: flex;
     flex-wrap: wrap;
     gap: var(--space);
+    margin-left: 2vw;
 }
 
 #t-print, #t-upload {
     display: none;
-}
\ No newline at end of file
+}
+
+
+//     border-style: solid;
+//     border-image: linear-gradient(150deg, var(--blue-5), white 30%) 1;
+//     background-image: linear-gradient(150deg, var(--blue-5) 0%, var(--blue-3) 6%, var(--blue-2) 12%, white 30%)
+// }
+
+
+// #page-menu:focus-within {
+//     border-style: solid;
+//     border-image: linear-gradient(102deg, var(--blue-5),white 30%) 1;
+//     background-image: linear-gradient(102deg, var(--blue-5) 0%, var(--blue-3) 6%, var(--blue-2) 12%, white 30%)
+// }
diff --git a/resources/topbar.less b/resources/topbar.less
index bb05bec..27ae46f 100644
--- a/resources/topbar.less
+++ b/resources/topbar.less
@@ -1,16 +1,11 @@
 #topbar {
     display: grid;
-    padding-top: var(--space);
-    row-gap: var(--space);
 }
 
 #top-logo {
-    display: flex;
-    align-items: center;
-}
-
-#top-logo a {
-    width: fit-content;
+    height: fit-content;
+    align-self: center;
+    width: 100%;
 }
 
 #top-logo img{
@@ -32,62 +27,83 @@
 }
 
 #nav-search {
-    position: relative;
-    height: fit-content;
+    height: 100%;
     justify-self: center;
 }
 
 #nav-search-bar {
-    border-radius: var(--space);
-    background-color: var(--blue-1);
-    box-shadow: 0 0 2px 1px var(--gold-7);
-    border-bottom: 3px solid var(--blue-7);
+    border-radius: calc(var(--space) / 2);
+    background-image: linear-gradient(10deg, var(--blue-1), var(--blue-1) 40%, var(--gold-1));
+    // background-color: var(--blue-2);
+    background-color: var(--white);
+    border: 1px solid var(--black);
+    border-bottom: 3px solid var(--black);
     font-size: calc(var(--space) *2);
     padding: var(--space);
+    height: 100%;
 }
 
 #nav-search-bar:focus {
     outline: 3px solid var(--blue-7);
     box-shadow: inset 0 0 3px 3px var(--blue-3);
-    background-color: white;
+    background-color: var(--white);
     border-bottom: 3px inset var(--blue-7);
 }
 
-#nav-search-label {
-    position: absolute;
-    left: var(--space);
-    top: 50%;
-    transform: translate(0, -50%);
-    opacity: 0.6;
-    font-size: 1.2em;
-}
-
-#user-menu-button {
-    font-size: 1em;
+#nav-search form {
     height: 100%;
-    background-color: var(--blue-4);
-    box-shadow: 0 0 1px 1px var(--gold-3), inset 0 0 6px 2px var(--blue-3);
-    border: 1px outset var(--gold-1);
-    border-radius: var(--space);
-    color: white;
 }
 
-#user-menu-list {
-    display: none;
-    flex-direction: column;
-    align-items: flex-end;
-    position: absolute;
-    right: 0;
-    background: white;
-    padding: 0;
+#user-menu-button, #page-menu-button {
+    border-bottom: 3px solid var(--gold-6);
+    border-width: 0 0 3px 0;
+}
+
+#user-menu-button, #user-menu-list, #page-menu-button, #page-menu-list {
+    width: fit-content;
+    font-size: 1em;
+    overflow: clip;
+    text-overflow: ellipsis;
+    padding: var(--space);
+    background-color: var(--gold-2);
+    // border-radius: calc(var(--space) / 2 );
+    // box-shadow: inset 0 0 3px 3px var(--gold-1);
+    color: var(--gold-7);
 }
 
 #user-menu {
-    gap: var(--space);
-    justify-self: right;
     position: relative;
 }
 
-#user-menu:focus-within #user-menu-list {
+#user-menu-button {
+    height: 100%;
+}
+
+#page-menu-list, #user-menu-list {
+    position: absolute;
+    margin-top: calc(var(--space) / 2);
+    display: none;
+    z-index: 1;
+    border-top: 3px solid var(--gold-6);
+    border-width: 3px 0 0 0;
+}
+
+#page-actions, #page-views, #user-links {
+    display: flex; 
+    flex-direction: column;
+    width: max-content;
+    gap: var(--space);
+}
+
+#user-menu:focus-within #user-menu-button, #page-menu:focus-within #page-menu-button {
+    background-color: var(--gold-3);
+    box-shadow: inset 0 0 3px 3px var(--gold-4);
+}
+
+#user-menu:focus-within #user-menu-list, #page-menu:focus-within #page-menu-list {
     display: flex;
+}
+
+.page-link-list > .mw-list-item a {
+    color: var(--blue-7);
 }
\ No newline at end of file
diff --git a/templates/sidebar-page.mustache b/templates/sidebar-page.mustache
index bf82b7e..76c5c00 100644
--- a/templates/sidebar-page.mustache
+++ b/templates/sidebar-page.mustache
@@ -1,49 +1,29 @@
-<div id="page-main" class="sidebar-page-menu">
-    <ul class="page-link-list">
+<button id="page-menu-button">Page Options</button>
+<div id="page-menu-list">
+    <ul id="page-views" class="page-link-list">
         {{#data-portlets}}
-            {{{data-views.array-items.0.html-item}}}
-            {{{data-views.array-items.1.html-item}}}
-            {{#data-associated-pages}}
-                {{{html-items}}}
-            {{/data-associated-pages}}
             {{#data-views}}
                 {{#array-items.2}}
                     {{{html-item}}}
                 {{/array-items.2}}
             {{/data-views}}
         {{/data-portlets}}
-    </ul>
-</div>
-<div id="page-views" class="sidebar-page-menu">
-    <details name="page-menu" class="page-view-details">
-        <summary class="page-menu-heading">
-            Page Views
-        </summary>
-        <ul class="page-link-list">
         {{#data-portlets-sidebar}}
             {{#array-portlets-rest.1}}
                 {{{html-items}}}
             {{/array-portlets-rest.1}}
         {{/data-portlets-sidebar}}
-        </ul>
-    </details>
-</div>
-<div id="page-actions" class="sidebar-page-menu">
-    <details name="page-menu" class="page-view-details">
-        <summary class="page-menu-heading">
-            Page Actions
-        </summary>
-        <ul class="page-link-list">
+    </ul>
+    <ul id="page-actions" class="page-link-list">
         {{#data-portlets}}
             {{#data-actions}}
                 {{{html-items}}}
             {{/data-actions}}
         {{/data-portlets}}
-            <li id="page-action-print" class="mw-list-item">
-                <a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p">
-                    Print
-                </a>
-            </li>
-        </ul>
-    </details>
+        <li id="page-action-print" class="mw-list-item">
+            <a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p">
+                Print
+            </a>
+        </li>
+    </ul>
 </div>
\ No newline at end of file
diff --git a/templates/skin.mustache b/templates/skin.mustache
index b2a6a00..1c7069f 100644
--- a/templates/skin.mustache
+++ b/templates/skin.mustache
@@ -6,18 +6,20 @@
         <div id="top-logo">
             <a href="https://phialfantasy.wiki">
                 {{#data-logos}}
-                    <img src="{{{icon}}}" />
+                    <img id="site-icon" src="{{{icon}}}" />
+                    <img id="site-wordmark" src="{{{wordmark.src}}}" />
                 {{/data-logos}}
             </a>
         </div>
-            <div id="nav-search">
-                {{#data-search-box}}
-                    <form action="{{{form-action}}}">
-                        <input id="nav-search-bar" {{{html-input-attributes}}}>
-                        <input value="🔍" {{{html-button-go-attributes}}}>
-                    </form>
-                {{/data-search-box}}
-            </div>
+
+        <div id="nav-search">
+            {{#data-search-box}}
+                <form action="{{{form-action}}}">
+                    <input id="nav-search-bar" {{{html-input-attributes}}}>
+                    <input value="🔍" {{{html-button-go-attributes}}}>
+                </form>
+            {{/data-search-box}}
+        </div>
         <div id="user-menu">
             {{#data-portlets}}
                 {{#data-user-menu}}
@@ -27,18 +29,56 @@
                         </button>
                     {{/array-items.0.array-links.0}}
                     <div id="user-menu-list">
-                        {{{html-items}}}
-                        <a href="/index.php/Special:Upload">
-                            Upload a File
-                        </a>
+                        <ul id="user-links" class="page-link-list">
+                            {{{html-items}}}
+                            <li id="pt-print" class="mw-list-item">
+                                <a href="/index.php/Special:Upload">
+                                    Upload a File
+                                </a>
+                            </li>
+                        </ul>
                     </div>
                 {{/data-user-menu}}
             {{/data-portlets}}
         </div>
+        <div id="page-menu" class="sidebar-page-mouse">
+            {{>sidebar-page}}
+        </div>
+        <div id="page-menu" class="sidebar-page-touch">
+            <button id="page-menu-button">Page Options</button>
+            <div id="page-menu-list">
+                <ul id="page-actions" class="page-link-list">
+                    {{#data-portlets}}
+                        {{#data-actions}}
+                            {{{html-items}}}
+                        {{/data-actions}}
+                    {{/data-portlets}}
+                    <li id="page-action-print" class="mw-list-item">
+                        <a href="javascript:print();" rel="alternate" title="Printable version of this page [p]" accesskey="p">
+                            Print
+                        </a>
+                    </li>
+                </ul>
+                <ul id="page-views" class="page-link-list">
+                    {{#data-portlets}}
+                        {{#data-views}}
+                            {{#array-items.2}}
+                                {{{html-item}}}
+                            {{/array-items.2}}
+                        {{/data-views}}
+                    {{/data-portlets}}
+                    {{#data-portlets-sidebar}}
+                        {{#array-portlets-rest.1}}
+                            {{{html-items}}}
+                        {{/array-portlets-rest.1}}
+                    {{/data-portlets-sidebar}}
+                </ul>
+            </div>
+        </div>
     </header>
 
     <div id="sidebar-nav">
-
+      
         <nav id="nav-main" class="nav-menu">
             <button class="nav-show">
                 Wiki Pages
@@ -110,27 +150,32 @@
 
     </div>
 
-    <div id="sidebar-page-mouse">{{>sidebar-page}}</div>
-    <div id="sidebar-page-touch">
-        <button class="page-show">Editor Pages</button>
-        {{>sidebar-page}}</div>
-
     <main id="page">
         <div id="titleblock">
             <div id="pagetitle">
                 <div id="titlebg"></div>
                 {{{html-title-heading}}}
+                <div id="versions">
+                    {{#array-indicators}}
+                        <a href="?{{{id}}}">
+                            <div id="{{{id}}}">{{{html}}}</div>
+                        </a>
+                    {{/array-indicators}}
+                </div>
             </div>
-            <div id="versions">
-                {{#array-indicators}}
-                    <a href="?{{{id}}}">
-                        <div id="{{{id}}}">{{{html}}}</div>
-                    </a>
-                {{/array-indicators}}
-            </div>
+
+            <ul id="title-views">
+                {{#data-portlets}}
+                    {{#data-associated-pages}}
+                        {{{html-items}}}
+                    {{/data-associated-pages}}
+                    {{{data-views.array-items.0.html-item}}}
+                    {{{data-views.array-items.1.html-item}}}
+                {{/data-portlets}}
+            </ul>
         </div>
 
-        {{{html-body-content}}}
+            {{{html-body-content}}}
 
     </main>