diff --git a/src/databrowser.html b/src/databrowser.html
index 716cfd79..949de74a 100644
--- a/src/databrowser.html
+++ b/src/databrowser.html
@@ -7,6 +7,29 @@
     <script>
       document.addEventListener('DOMContentLoaded', function() {
         panes.runDataBrowser()
+
+        var header = document.getElementById('mainSolidUiHeader')
+        if (!header) return
+
+        var syncHeaderHeight = function () {
+          var height = header.getBoundingClientRect().height
+          if (height > 0) {
+            var rootFontSize = parseFloat(
+              getComputedStyle(document.documentElement).fontSize
+            )
+            document.documentElement.style.setProperty(
+              '--app-header-height',
+              (height / rootFontSize) + 'rem'
+            )
+          }
+        }
+
+        syncHeaderHeight()
+        if ('ResizeObserver' in window) {
+          new ResizeObserver(syncHeaderHeight).observe(header)
+        } else {
+          window.addEventListener('resize', syncHeaderHeight)
+        }
       })
     </script>
   </head>
@@ -31,13 +54,13 @@
     -->
 
     <!-- Main content area — single visible region at a time -->
-    <main id="MainContent" role="main" tabindex="-1" aria-live="polite">
+    <div class="app-main" tabindex="-1" aria-live="polite">
       <div class="app-shell">
         <aside id="NavMenu" class="app-nav" aria-label="Application menu" hidden>
           <div id="NavMenuContent" class="menu-content"></div>
         </aside>
 
-        <div class="app-view">
+        <main id="MainContent" class="app-view">
           <!--
             Outline view: the primary RDF-subject browser.
             JS appends property-table <div>s (not <tr>s) here.
@@ -66,11 +89,11 @@
           >
           <!-- globalAppTabs appends tab widget here -->
           </section>
-        </div> <!-- .app-view -->
+        </main> <!-- .app-view -->
       </div> <!-- .app-shell -->
 
       <div id="MenuOverlay" class="menu-overlay" hidden aria-hidden="true"></div>
-    </main>
+    </div>
 
     <!-- Footer — populated by solid-ui initFooter() -->
     <footer id="PageFooter" role="contentinfo">
diff --git a/src/index.ts b/src/index.ts
index 3505746f..5ce2d05d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -67,11 +67,14 @@ global.panes.runDataBrowser = function (uri?:string|$rdf.NamedNode|null) {
 
   // Authenticate the user
   SolidLogic.authn.checkUser()
-    .then(() => panes.initMainPage(SolidLogic.solidLogicSingleton.store, uri))
+    .then(() => panes.initMainPage(
+      SolidLogic.solidLogicSingleton.store,
+      uri,
+      buildRenderEnvironment()
+    ))
     .then(() => {
-      // Inject render environment into pane context after outliner exists
+      // Re-sync in case layout/theme changed between snapshot and outliner init
       syncEnvironmentToContext('initMainPage')
-      
     })
     .catch(() => undefined)
 
diff --git a/src/styles/mash-utilities.css b/src/styles/mash-utilities.css
index 33e621f2..abeffb06 100644
--- a/src/styles/mash-utilities.css
+++ b/src/styles/mash-utilities.css
@@ -595,7 +595,7 @@
   border-radius: var(--border-radius-base, 0.3125rem);
   border: 1px solid var(--gray-400, #99A1AF);
   background: var(--white, #FFF);
-  color: var(--gray-900, #101828);
+  color: var(--color-text-subheading, var(--gray-900, #101828));
   font-size: var(--font-size-sm, 0.875rem);
   font-weight: var(--font-weight-medium, 500);
   padding: var(--spacing-2xs, 0.625rem);
@@ -614,7 +614,7 @@
 }
 
 .label {
-  color: var(--gray-600, #4A5565);
+  color: var(--color-text-secondary, #4A5565);
   font-size: var(--font-size-sm, 0.875rem);
   font-weight: var(--font-weight-regular, 400);
 }
diff --git a/src/styles/mash.css b/src/styles/mash.css
index e89ed35c..cb32d375 100644
--- a/src/styles/mash.css
+++ b/src/styles/mash.css
@@ -6,10 +6,10 @@
 @import url("./mash-utilities.css");
 
 :root {
-  --app-header-height: 3.8rem;
+  --app-header-height: 3.75rem;
 }
 
-html, body {
+html {
   margin: 0;
   padding: 0;
   font-family: var(--font-family-base);
@@ -20,9 +20,24 @@ html, body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-rendering: optimizeLegibility;
+  min-height: auto;
+  min-width: 375px;
+}
+
+body {
+  margin: 0;
+  padding-top: 0;
   display: flex;
   flex-direction: column;
-  min-height: 100dvh;        /* dvh = dynamic viewport for mobile chrome */
+  height: 100dvh;
+  min-height: auto;
+  min-width: 375px;
+  overflow: hidden;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  background: inherit;
+  color: inherit;
 }
 
 #PageHeader,
@@ -46,6 +61,7 @@ html, body {
   -webkit-overflow-scrolling: touch;   /* smooth iOS scroll */
   container-type: inline-size;          /* enable @container queries */
   display: flex;
+  flex-direction: column;
 }
 
 #PageFooter {
@@ -54,12 +70,21 @@ html, body {
 
 
 /* ── New responsive app nav layout ── */
+.app-main {
+  position: static;
+  display: flex;
+  flex: 1 1 auto;       /* let the wrapper grow inside body's flex column */
+  min-height: 0;
+  margin-top: var(--app-header-height);
+  height: calc(100dvh - var(--app-header-height));
+  top: auto;
+}
+
 .app-shell {
   display: flex;
-  flex: 1;          /* expand to fill #MainContent (display:flex row container) */
+  flex: 1;          /* expand to fill .app-main */
   min-width: 0;     /* prevent overflow in flex context */
-  min-height: calc(100vh - var(--app-header-height) - 2.5rem); /* header + footer space */
-  margin-top: var(--app-header-height);
+  min-height: 0;    /* allow children to shrink correctly */
 }
 
 .app-nav {
@@ -75,7 +100,7 @@ html, body {
 
 .app-view {
   flex: 1;
-  padding: 1rem;
+  padding: 0 1rem 1rem;  /* no top padding — sit flush under fixed header */
   min-width: 0;
 }
 
@@ -109,7 +134,7 @@ html, body {
   }
 
   .app-view {
-    padding: 1rem 0.75rem;
+    padding: 0 0.75rem 1rem;
   }
 
   #MenuToggleBtn {
@@ -707,114 +732,11 @@ div.exceptionPane pre {
   background-color: var(--color-cv-pane-bg);
 }
 
-/******************* Data Content Pane *****************/
-
-div.dataContentPane {
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  padding: 0.5em; /* color: #404; */
-  margin-top: 0.5em;
-  margin-bottom: 0.5em;
-}
-
-.nestedFormula {
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  padding: 0.5em;
-  border-radius: 0.5em;
-}
-
-div.dataContentPane td {
-  padding-left: 0.2em;
-  padding-top: 0.1em;
-  padding-right: 0.2em;
-  padding-bottom: 0.05em;
-  /*	        vertical-align: middle; /*@@ Lalana's request*/
-  vertical-align: top; /*@@ Tims's request*/
-  /* With middel, you can't tell what is with what */
-  /* background-color: white; */
-}
-
-div.dataContentPane tr {
-  margin-bottom: 0.6em;
-  padding-top: 1em;
-  padding-bottom: 1em;
-}
-
-.dataContentPane a {
-  color: var(--color-text-link);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:link {
-  color: var(--color-text-link);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:visited {
-  color: var(--color-text-link-visited);
-  text-decoration: none;
-  font-weight: bold;
-}
-.dataContentPane a:hover {
-  color: var(--color-text-link-hover);
-  text-decoration: underline;
-  font-weight: bold;
-}
-.dataContentPane a:active {
-  color: var(--color-text-link-active);
-  text-decoration: none;
-}
-
-.dataContentPane.embeddedText {
-  white-space: pre-wrap;
-}
-
-/* div.dataContentPane a { text-decoration: none; color: #006} /* Only very slightly blue */
-div.dataContentPane td.pred {
-  min-width: 12em;
-} /* Keep aligned with others better */
-div.dataContentPane td.pred a {
-  color: var(--color-text-muted);
-} /* Greyish as form field names have less info value */
-
-/* .collectionAsTables  {border-right: green 1px; margin: 0.2em;} */
-
-div.n3Pane {
-  padding: 1em;
-  border-top: solid 1px var(--color-data-pane-border-top);
-  border-left: solid 1px var(--color-data-pane-border-top);
-  border-bottom: solid 1px var(--color-data-pane-border-side);
-  border-right: solid 1px var(--color-data-pane-border-side);
-  color: var(--color-text-blue);
-}
-
 .imageView {
   border: 1em var(--color-background);
   margin: 1em;
 }
 
-.n3Pane pre {
-  font-size: 120%;
-}
-
-.RDFXMLPane pre {
-  font-size: 120%;
-}
-
-div.RDFXMLPane {
-  padding: 1em;
-  border-top: solid 2px var(--color-data-pane-border-top);
-  border-left: solid 2px var(--color-data-pane-border-top);
-  border-bottom: solid 2px var(--color-data-pane-border-side);
-  border-right: solid 2px var(--color-data-pane-border-side);
-  color: var(--color-text-brown);
-}
-
 /* Generic things useful anywhere */
 
 img.hideTillHover {
@@ -1233,6 +1155,8 @@ td.undetermined table {
   margin: 0.2em;
 }
 
+/* The following two classes were used for defaultPane
+I'm not sure if they are used anywhere else so i'm not deleting. */
 div.bottom-border {
   border: 0.2em solid transparent;
   width: 100%;
@@ -1607,10 +1531,6 @@ th {
   padding: var(--spacing-sm);
 }
 
-td {
-  padding: var(--spacing-sm);
-}
-
 /* Focus trap for modals */
 .focus-trap {
   position: fixed;
@@ -1747,11 +1667,11 @@ label:focus-visible {
 }
 
 html[data-layout="mobile"] #PageBody {
-  min-height: var(--app-height, 100dvh);
+  min-height: auto;
 }
 
 html[data-layout="mobile"] #MainContent {
-  overscroll-behavior-x: contain;
+  overscroll-behavior: x contain;
 }
 
 /* END of Generated by AI */
\ No newline at end of file
diff --git a/src/styles/themes/dark.css b/src/styles/themes/dark.css
index edd0cf95..a8f444b4 100644
--- a/src/styles/themes/dark.css
+++ b/src/styles/themes/dark.css
@@ -7,8 +7,19 @@ html[data-theme="dark"] {
   /* Background and Text */
   --color-background: #1e1e1e;
   --color-text: #e0e0e0;
-  --color-text-secondary: #999;
+  --color-text-secondary: var(--gray-400, #99A1AF);
+  --color-text-subheading: var(--gray-100, #F3F4F6);
+  --color-text-detail: var(--gray-300, #D1D5DC);
+  --color-text-empty-state: var(--gray-200, #E5E7EB);
+  --color-icon-muted: var(--gray-400, #99A1AF); 
+  --color-text-overlay: var(--gray-100, #F3F4F6);
+  --color-text-accent-subtle: var(--gray-100, #F3F4F6);
+  --color-text-strong: var(--gray-100, #F3F4F6);
+  --color-text-strong-secondary: var(--gray-200, #E5E7EB);
   --color-text-light: #555;
+  --color-text-ui: var(--gray-800, #1E2939);
+  --color-text-control: var(--gray-100, #F3F4F6);
+  --color-text-primary: var(--gray-300, #D1D5DC);
   --color-text-link: #66b3ff;
   --color-text-link-visited: #66b3ff;
   --color-text-link-hover: #66b3ff;
@@ -19,6 +30,36 @@ html[data-theme="dark"] {
   --color-text-blue: #7cb9ff;
   --color-text-brown: #c4a660;
   
+   /* Button colors */
+  --color-surface-action: var(--color-primary, #B388FF);
+  --color-surface-action-hover: #c39cff;
+  --color-surface-accent-subtle: var(--grey-purple-900, #332746);
+  --color-surface-accent-subtle-hover: var(--grey-purple-700, #5e546d);
+  --color-surface-overlay: var(--gray-800, #1E2939);
+  --color-surface-overlay-header: var(--gray-900, #101828);
+  --color-surface-tertiary: var(--gray-800, #1E2939);
+  --color-surface-tertiary-hover: var(--gray-900, #101828);
+  --color-surface-chip: var(--color-card-bg, #2a2a2a);
+  --color-surface-framed-content: var(--color-card-bg, #2a2a2a);
+  --color-surface-placeholder: var(--gray-700, #364153);
+  --color-surface-subtle: rgba(255, 255, 255, 0.08);
+  --color-text-on-action: var(--gray-900, #101828);
+  --color-border-muted: var(--color-border-light, #666);
+  --color-border-action: var(--color-primary, #B388FF);
+  --color-focus-ring: var(--color-primary, #B388FF);
+  --color-focus-gap: var(--gray-900, #101828);
+  --dialog-cancel-button-background: transparent;
+  --dialog-cancel-button-text: var(--gray-100, #F3F4F6);
+  --dialog-cancel-button-border: var(--color-border-light, #666);
+  --dialog-cancel-button-hover-background: var(--color-primary, #B388FF);
+  --dialog-cancel-button-hover-text: var(--color-text-on-action, #1e1e1e);
+  --dialog-cancel-button-hover-border: var(--color-primary, #B388FF);
+
+  /* Error dialog box colors */
+  --dialog-error-background: rgba(176, 0, 32, 0.18);
+  --dialog-error-border: rgba(255, 118, 154, 0.5);
+  --dialog-error-text: #ffbbcd;
+  
   /* Header */
   --color-header-row-bg: var(--grey-purple-900, #332746);
   --color-header-text: var(--white, #fff);
@@ -33,10 +74,14 @@ html[data-theme="dark"] {
   /* Borders */
   --color-border: #444;
   --color-border-dark: #555;
-  --color-border-darker: #333;
+  --color-border-darker: var(--gray-800, #1E2939);
   --color-border-light: #666;
+  --color-border-lighter: var(--gray-700, #364153);
+  --color-border-subtle: var(--gray-700, #364153);
   --color-border-pale: #555;
   --color-border-accent: #9999dd;
+  --color-border-button: var(--gray-700, #364153);
+  --color-border-button-hover: var(--gray-600, #4A5565);
   
   /* Status Colors */
   --color-selected-bg: #4a6e3a;
@@ -186,6 +231,7 @@ html[data-theme="dark"] {
   --box-shadow-sm: 0 1px 4px rgba(0,0,0,0.2);
   --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.3);
   --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.35);
+  --box-shadow-focus-accessible: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
   --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.3);
   --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.5);
   --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.4);
diff --git a/src/styles/themes/light.css b/src/styles/themes/light.css
index 020234b9..d627e4a5 100644
--- a/src/styles/themes/light.css
+++ b/src/styles/themes/light.css
@@ -52,19 +52,56 @@
   --black: #000;  /* Used for: text heading */
   --white: #FFF;
 
+
+  /* Button colors */
+  --color-surface-action: var(--color-primary, #7C4DFF);
+  --color-surface-action-hover: #6d3cf2;
+  --color-surface-accent-subtle: var(--lavender-300, #e6dcff);
+  --color-surface-accent-subtle-hover: var(--lavender-200, #E4DBFE);
+  --color-surface-overlay: var(--white, #FFF);
+  --color-surface-overlay-header: var(--slate-50, #F8FAFC);
+  --color-surface-tertiary: var(--gray-50, #F9FAFB);
+  --color-surface-tertiary-hover: var(--gray-100, #F3F4F6);
+  --color-surface-chip: var(--gray-100, #F3F4F6);
+  --color-surface-framed-content: var(--color-surface-tertiary-hover, var(--gray-100, #F3F4F6));
+  --color-surface-subtle: rgba(15, 23, 43, 0.04);
+  --color-text-on-action: var(--white, #FFF);
+  --color-border-muted: var(--gray-300, #D1D5DC);
+  --color-border-action: var(--color-primary, #7C4DFF);
+  --color-focus-ring: var(--color-primary, #7C4DFF);
+  --color-focus-gap: var(--white, #FFF);
+  --dialog-cancel-button-background: transparent;
+  --dialog-cancel-button-text: var(--gray-800, #1E2939);
+  --dialog-cancel-button-border: var(--gray-300, #D1D5DC);
+  --dialog-cancel-button-hover-background: var(--blue-900, #083575);
+  --dialog-cancel-button-hover-text: var(--white, #FFF);
+  --dialog-cancel-button-hover-border: var(--blue-900, #083575);
+ 
+  /* Error dialog box colors */
+  --dialog-error-background: var(--pink-500, #ffdde6);
+  --dialog-error-border: var(--pink-700, #ff98b3);
+  --dialog-error-text: var(--red-600, #B00020);
+  
   /* Background and Text */
   --color-background-old: #FFFFFF; /* White */
   --color-background: #F8F9FB; /* Light grey for overall background */
   --color-background-row-default: white;
   --color-background-row-alternate: #f0f0f0;
   --color-text: #1A1A1A; /* Used in login button */
+  --color-text-ui: var(--gray-100, #F3F4F6);
   --color-text-primary: var(--gray-700, #364153); /* new design */
+  --color-text-control: var(--slate-700, #314158);
   --color-text-secondary-old: #666;
   --color-text-secondary: var(--gray-600, #4A5565);
   --color-text-heading: var(--black, #000000); /* New design uses pure black for headings */
   --color-text-subheading: var(--gray-900, #101828); /* new design */
+  --color-text-overlay: var(--gray-800, #1E2939);
+  --color-text-accent-subtle: var(--color-text-control, var(--slate-700, #314158));
   --color-text-strong: var(--slate-900, #0F172B); /* new design */
   --color-text-strong-secondary: var(--slate-800, #1D293D); /* new design */
+  --color-text-detail: var(--slate-500, #62748E);
+  --color-text-empty-state: var(--gray-400, #99A1AF);
+  --color-icon-muted: var(--slate-400, #90A1B9);
   --color-text-light: #aaa;
   --color-text-link: #3B5998;
   --color-text-link-visited: #3B5998;
@@ -93,16 +130,19 @@
   --color-border-dark: #777;
   --color-border-darker: var(--gray-600, #4A5565); /* old #444 */
   --color-border-light: #aaa;
+  --color-border-subtle: var(--gray-100, #F3F4F6);
   --color-border-pale: #eee;
   --color-border-accent: #88c;
+  --color-border-button: var(--gray-300, #D1D5DC);
+  --color-border-button-hover: var(--gray-400, #99A1AF);
   
   /* Status Colors */
-  --color-selected-bg: #8F3;
-  --color-warning: red;
+  --color-selected-bg: var(--lavender-300, #e6dcff);
+  --color-warning: var(--red-600, #B00020);
   --color-success-bg: #dfd;
   --color-success-border: green;
   --color-failure-bg: white;
-  --color-failure-border: red;
+  --color-failure-border: var(--red-600, #B00020);
   
   /* Info and Alert Colors */
   --color-info-bg: #ccccff;
@@ -279,6 +319,7 @@
   --box-shadow-sm: 0 1px 4px rgba(124,77,255,0.12); /* Used in login button */
   --box-shadow-active: 0 1px 2px rgba(124, 77, 255, 0.2);
   --box-shadow-focus: 0 0 0 5px rgba(124, 77, 255, 0.25);
+  --box-shadow-focus-accessible: 0 0 0 var(--focus-ring-width) var(--color-background), 0 0 0 calc(var(--focus-ring-width) + var(--focus-indicator-width)) var(--color-primary-alpha);
   --box-shadow-hover: 0 2px 4px rgba(124, 77, 255, 0.2);
   --box-shadow-modal: 0 2px 10px rgba(0, 0, 0, 0.3);
   --box-shadow-overlay: 0 4px 24px rgba(0, 0, 0, 0.2);
diff --git a/static/browse-test.html b/static/browse-test.html
index c5559972..d45cd98d 100644
--- a/static/browse-test.html
+++ b/static/browse-test.html
@@ -117,7 +117,7 @@
     As user <span id="webId">&lt;public user></span> 
     <span id="loginButtonArea"></span>
   </div>
-  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
+  <main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
 
     <table
           id="OutlineView"
diff --git a/static/browse.html b/static/browse.html
index eaf4f292..a07ecb32 100644
--- a/static/browse.html
+++ b/static/browse.html
@@ -117,7 +117,7 @@
     As user <span id="webId">&lt;public user></span> 
     <span id="loginButtonArea"></span>
   </div>
-  <main id="MainContent" role="main" tabindex="-1" aria-live="polite" class="browser-main">
+  <main id="MainContent" tabindex="-1" aria-live="polite" class="browser-main">
 
     <table
           id="OutlineView"
diff --git a/webpack.config.mjs b/webpack.config.mjs
index 22b32469..a0de7e6d 100644
--- a/webpack.config.mjs
+++ b/webpack.config.mjs
@@ -25,7 +25,7 @@ const workspaceAliases = {
   'solid-panes$': path.resolve('../solid-panes/src/index.ts'),
   'solid-ui$': path.resolve('../solid-ui/src/index.ts'),
   'UI$': path.resolve('../solid-ui/src/index.ts'),
-  'solid-ui/components/header$': path.resolve('../solid-ui/src/v2/components/header/index.ts'),
+  'solid-ui/components/header$': path.resolve('../solid-ui/src/v2/components/layout/header/index.ts'),
 }
 
 function getResolutionMode (env = {}) {
@@ -186,7 +186,7 @@ export default (env, args) => {
 
   // For dev server or watch mode, return only unminified config (preserves console.log)
   if (process.env.WEBPACK_SERVE || args.mode === 'development' || isWatchMode) {
-    return {
+    const developmentBundle = {
       ...common,
       mode: 'development',
       output: {
@@ -199,6 +199,19 @@ export default (env, args) => {
         minimize: false
       }
     }
+
+    // Keep both bundle names in sync during watch/dev runs because downstream
+    // servers and templates may reference either path.
+    return [
+      developmentBundle,
+      {
+        ...developmentBundle,
+        output: {
+          ...developmentBundle.output,
+          filename: 'mashlib.min.js'
+        }
+      }
+    ]
   }
 
   // UMD Minified, everything bundled