diff --git a/app/static/app.css b/app/static/app.css
index 3683068..95b2f06 100644
--- a/app/static/app.css
+++ b/app/static/app.css
@@ -68,8 +68,8 @@ a:hover {
 
 .main {
   margin-left: var(--rail-closed);
+  padding: calc(var(--topbar-height) + 1.25rem) 1.25rem 1.25rem 1.25rem;
   min-height: 100vh;
-  padding: 1.25rem;
   transition: margin-left 0.18s ease;
 }
 
@@ -173,13 +173,6 @@ a:hover {
   justify-content: center;
 }
 
-.topbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  gap: 1rem;
-  margin-bottom: 1rem;
-}
 
 .page-title {
   margin: 0;
@@ -575,3 +568,1098 @@ pre.codeblock {
   color: var(--text-muted);
   font-size: 0.9rem;
 }
+
+/* GLOBAL TOP BAR */
+.global-topbar {
+    width: 100%;
+    min-height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #06153d;
+    color: #f8fafc;
+    border-radius: 12px;
+    padding: 0.75rem 1rem;
+    margin: 0 0 1rem 0;
+    box-sizing: border-box;
+}
+
+.global-topbar-left {
+    flex: 1 1 auto;
+}
+
+.global-topbar-right {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 0.65rem;
+    flex-wrap: nowrap;
+}
+
+.global-topbar-user {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    line-height: 1.1;
+}
+
+.global-topbar-name {
+    font-weight: 700;
+    font-size: 0.95rem;
+    color: #f8fafc;
+}
+
+.global-topbar-username {
+    font-size: 0.8rem;
+    color: #cbd5e1;
+}
+
+.global-topbar-logout {
+    height: 34px;
+    padding: 0 0.75rem;
+    border-radius: 10px;
+    white-space: nowrap;
+}
+
+@media (max-width: 700px) {
+    .global-topbar {
+        min-height: 48px;
+        padding: 0.6rem 0.75rem;
+    }
+
+    .global-topbar-right {
+        gap: 0.5rem;
+    }
+
+    .global-topbar-name {
+        font-size: 0.88rem;
+    }
+
+    .global-topbar-username {
+        font-size: 0.75rem;
+    }
+
+    .global-topbar-logout {
+        height: 32px;
+        padding: 0 0.6rem;
+    }
+}
+
+
+/* CONNECT SIDEBAR + HEADER */
+.app-shell {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+}
+
+.sidebar {
+    border-top-left-radius: 12px;
+}
+
+.global-topbar {
+    border-top-right-radius: 12px;
+    border-top-left-radius: 0;
+    margin: 0;
+}
+
+/* inline brand */
+.brand-inline {
+    font-weight: 700;
+    font-size: 1rem;
+}
+
+
+/* MAKE HEADER PART OF FRAME */
+.main {
+    display: flex;
+    flex-direction: column;
+}
+
+.global-topbar {
+    margin: 0;
+    border-radius: 0 12px 0 0;
+}
+
+/* remove extra top spacing from pages */
+.main > *:first-child:not(.global-topbar) {
+    margin-top: 1rem;
+}
+
+/* APP FRAME */
+.app-shell {
+    display: grid;
+    grid-template-columns: 190px 1fr;
+    min-height: 100vh;
+}
+
+.sidebar {
+    background: #06153d;
+    color: #f8fafc;
+    border-radius: 0 !important;
+    margin: 0 !important;
+    min-height: 100vh;
+}
+
+.main {
+    padding: 0 !important;
+    margin: 0 !important;
+    display: flex;
+    flex-direction: column;
+}
+
+.main-content {
+    padding: 1rem;
+}
+
+.global-topbar {
+    height: 52px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #06153d;
+    color: #f8fafc;
+    border-radius: 0 !important;
+    margin: 0 !important;
+    padding: 0 1rem;
+    box-sizing: border-box;
+    border-left: 1px solid rgba(255,255,255,0.08);
+}
+
+.global-topbar-left,
+.global-topbar-right {
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+}
+
+.global-topbar-right {
+    margin-left: auto;
+}
+
+.global-topbar-user {
+    text-align: right;
+    line-height: 1.1;
+}
+
+.global-topbar-name {
+    font-weight: 700;
+    font-size: 0.9rem;
+    color: #f8fafc;
+}
+
+.global-topbar-username {
+    font-size: 0.75rem;
+    color: #cbd5e1;
+}
+
+.global-topbar-logout {
+    height: 30px;
+    padding: 0 0.6rem;
+    border-radius: 8px;
+}
+
+.sidebar-top {
+    min-height: 52px;
+    display: flex;
+    align-items: center;
+    padding: 0 0.75rem;
+    box-sizing: border-box;
+    border-bottom: 1px solid rgba(255,255,255,0.08);
+}
+
+.brand {
+    font-weight: 700;
+    font-size: 0.95rem;
+}
+
+
+.page-header {
+  margin-bottom: 1rem;
+}
+
+.page-title {
+  margin: 0;
+  font-size: 1.7rem;
+}
+
+.page-subtitle {
+  margin: 0.25rem 0 0 0;
+  color: var(--text-muted);
+  font-size: 0.95rem;
+}
+
+:root {
+  --topbar-height: 72px;
+}
+
+.global-topbar {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: var(--rail-closed);
+  height: var(--topbar-height);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0 1.25rem;
+  background: var(--panel);
+  border-bottom: 1px solid var(--border);
+  z-index: 90;
+  transition: left 0.18s ease;
+}
+
+.app-shell.nav-open .global-topbar {
+  left: var(--rail-open);
+}
+
+.global-topbar-left {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.global-app-title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: var(--text);
+  white-space: nowrap;
+}
+
+.global-topbar-right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.global-topbar-user {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  line-height: 1.2;
+}
+
+.global-topbar-name {
+  font-weight: 600;
+  color: var(--text);
+}
+
+.global-topbar-username {
+  font-size: 0.88rem;
+  color: var(--text-muted);
+}
+
+.global-topbar-logout {
+  appearance: none;
+  border: 1px solid var(--border);
+  background: var(--panel);
+  color: var(--text);
+  border-radius: 10px;
+  padding: 0.55rem 0.9rem;
+  cursor: pointer;
+  font: inherit;
+}
+
+.global-topbar-logout:hover {
+  background: #f3f4f6;
+}
+
+.main {
+  margin-left: var(--rail-closed);
+  min-height: 100vh;
+  padding: calc(var(--topbar-height) + 1.25rem) 1.25rem 1.25rem 1.25rem;
+  transition: margin-left 0.18s ease;
+}
+
+.app-shell.nav-open .main {
+  margin-left: var(--rail-open);
+}
+
+.main-content {
+  padding-top: 0;
+}
+
+.page-header {
+  margin-bottom: 1rem;
+}
+
+/* ==== final shell override ==== */
+:root {
+  --topbar-height: 72px;
+}
+
+.sidebar {
+  position: fixed !important;
+  inset: 0 auto 0 0 !important;
+  width: var(--rail-closed) !important;
+  z-index: 100 !important;
+}
+
+.app-shell.nav-open .sidebar {
+  width: var(--rail-open) !important;
+}
+
+.global-topbar {
+  position: fixed !important;
+  top: 0 !important;
+  right: 0 !important;
+  left: var(--rail-closed) !important;
+  height: var(--topbar-height) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  gap: 1rem !important;
+  padding: 0 1.25rem !important;
+  background: var(--panel) !important;
+  border-bottom: 1px solid var(--border) !important;
+  z-index: 90 !important;
+  transition: left 0.18s ease !important;
+}
+
+.app-shell.nav-open .global-topbar {
+  left: var(--rail-open) !important;
+}
+
+.main {
+  margin-left: var(--rail-closed) !important;
+  min-height: 100vh !important;
+  padding: calc(var(--topbar-height) + 1.25rem) 1.25rem 1.25rem 1.25rem !important;
+  transition: margin-left 0.18s ease !important;
+}
+
+.app-shell.nav-open .main {
+  margin-left: var(--rail-open) !important;
+}
+
+.main-content {
+  padding-top: 0 !important;
+}
+
+.page-header {
+  display: block !important;
+  margin-bottom: 1rem !important;
+}
+
+.global-topbar-left {
+  display: flex !important;
+  align-items: center !important;
+  min-width: 0 !important;
+}
+
+.global-app-title {
+  font-size: 1.05rem !important;
+  font-weight: 700 !important;
+  color: var(--text) !important;
+  white-space: nowrap !important;
+}
+
+.global-topbar-right {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+  gap: 0.75rem !important;
+  flex-wrap: wrap !important;
+}
+
+.global-topbar-user {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: flex-end !important;
+  line-height: 1.2 !important;
+}
+
+.global-topbar-name {
+  font-weight: 600 !important;
+}
+
+.global-topbar-username {
+  font-size: 0.88rem !important;
+  color: var(--text-muted) !important;
+}
+
+.global-topbar-logout {
+  border: 1px solid var(--border) !important;
+  background: var(--panel) !important;
+  color: var(--text) !important;
+  border-radius: 10px !important;
+  padding: 0.55rem 0.9rem !important;
+}
+
+.global-topbar-logout:hover {
+  background: #f3f4f6 !important;
+}
+/* ==== end final shell override ==== */
+
+/* ===== shell final enforced layout ===== */
+body {
+  background: var(--bg);
+}
+
+.app-shell {
+  min-height: 100vh;
+}
+
+.sidebar {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  bottom: 0 !important;
+  width: var(--rail-closed) !important;
+  z-index: 1000 !important;
+}
+
+.app-shell.nav-open .sidebar {
+  width: var(--rail-open) !important;
+}
+
+.global-topbar {
+  position: fixed !important;
+  top: 0 !important;
+  left: var(--rail-closed) !important;
+  right: 0 !important;
+  height: 72px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  padding: 0 1.25rem !important;
+  background: var(--panel) !important;
+  border-bottom: 1px solid var(--border) !important;
+  z-index: 900 !important;
+}
+
+.app-shell.nav-open .global-topbar {
+  left: var(--rail-open) !important;
+}
+
+.main {
+  margin-left: var(--rail-closed) !important;
+  min-height: 100vh !important;
+  padding: 96px 1.25rem 1.25rem 1.25rem !important;
+  background: var(--bg) !important;
+}
+
+.app-shell.nav-open .main {
+  margin-left: var(--rail-open) !important;
+}
+
+.main-content {
+  padding-top: 0 !important;
+}
+
+.page-header {
+  margin-bottom: 1rem !important;
+}
+
+.page-title {
+  margin: 0 !important;
+  font-size: 1.7rem !important;
+}
+
+.page-subtitle {
+  margin: 0.25rem 0 0 0 !important;
+  color: var(--text-muted) !important;
+  font-size: 0.95rem !important;
+}
+/* ===== end shell final enforced layout ===== */
+
+/* ===== clean final shell layout ===== */
+:root {
+  --topbar-height: 72px;
+}
+
+body {
+  background: var(--bg);
+}
+
+.app-shell {
+  min-height: 100vh;
+}
+
+/* left rail */
+.sidebar {
+  position: fixed !important;
+  top: 0 !important;
+  left: 0 !important;
+  bottom: 0 !important;
+  width: var(--rail-closed) !important;
+  background: #08142f !important;
+  color: #e5e7eb !important;
+  z-index: 1000 !important;
+  overflow-x: hidden !important;
+  overflow-y: auto !important;
+  padding: 0.75rem 0.45rem 1rem 0.45rem !important;
+}
+
+.app-shell.nav-open .sidebar {
+  width: var(--rail-open) !important;
+}
+
+/* top bar */
+.global-topbar {
+  position: fixed !important;
+  top: 0 !important;
+  left: var(--rail-closed) !important;
+  right: 0 !important;
+  min-height: var(--topbar-height) !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: space-between !important;
+  gap: 1rem !important;
+  padding: 0.75rem 1rem !important;
+  background: #ffffff !important;
+  border-bottom: 1px solid var(--border) !important;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
+  z-index: 900 !important;
+}
+
+.app-shell.nav-open .global-topbar {
+  left: var(--rail-open) !important;
+}
+
+/* content region */
+.main {
+  margin-left: var(--rail-closed) !important;
+  min-height: 100vh !important;
+  padding: calc(var(--topbar-height) + 1.25rem) 1rem 1rem 1rem !important;
+  background: var(--bg) !important;
+}
+
+.app-shell.nav-open .main {
+  margin-left: var(--rail-open) !important;
+}
+
+.main-content {
+  padding-top: 0 !important;
+}
+
+/* top bar content */
+.global-topbar-left {
+  display: flex !important;
+  align-items: center !important;
+  min-width: 0 !important;
+}
+
+.global-app-title {
+  font-size: 1rem !important;
+  font-weight: 700 !important;
+  color: var(--text) !important;
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
+.global-topbar-right {
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-end !important;
+  gap: 0.6rem !important;
+  flex-wrap: nowrap !important;
+  min-width: 0 !important;
+}
+
+.global-topbar-user {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: flex-end !important;
+  line-height: 1.15 !important;
+}
+
+.global-topbar-name {
+  font-weight: 600 !important;
+  color: var(--text) !important;
+  font-size: 0.95rem !important;
+}
+
+.global-topbar-username {
+  color: var(--text-muted) !important;
+  font-size: 0.8rem !important;
+}
+
+.global-topbar-logout {
+  appearance: none !important;
+  border: 1px solid var(--border) !important;
+  background: var(--panel) !important;
+  color: var(--text) !important;
+  border-radius: 10px !important;
+  padding: 0.5rem 0.85rem !important;
+  cursor: pointer !important;
+  font: inherit !important;
+}
+
+.global-topbar-logout:hover {
+  background: #f3f4f6 !important;
+}
+
+/* page header under global top bar */
+.page-header {
+  margin-bottom: 1rem !important;
+}
+
+.page-title {
+  margin: 0 !important;
+  font-size: 1.7rem !important;
+  line-height: 1.1 !important;
+}
+
+.page-subtitle {
+  margin: 0.3rem 0 0 0 !important;
+  color: var(--text-muted) !important;
+  font-size: 0.95rem !important;
+  line-height: 1.35 !important;
+}
+
+/* sidebar label behavior */
+.brand,
+.sidebar-section-title,
+.nav-link-text {
+  display: none !important;
+}
+
+.app-shell.nav-open .brand,
+.app-shell.nav-open .sidebar-section-title,
+.app-shell.nav-open .nav-link-text {
+  display: initial !important;
+}
+
+.app-shell:not(.nav-open) .nav-link {
+  justify-content: center !important;
+}
+
+/* mobile */
+@media (max-width: 700px) {
+  .global-topbar {
+    padding: 0.65rem 0.75rem !important;
+  }
+
+  .global-app-title {
+    font-size: 0.92rem !important;
+    max-width: 120px !important;
+  }
+
+  .global-topbar-user {
+    display: none !important;
+  }
+
+  .badge.reviewed {
+    display: none !important;
+  }
+
+  .global-topbar-logout {
+    padding: 0.42rem 0.7rem !important;
+    font-size: 0.88rem !important;
+  }
+
+  .main {
+    padding: calc(var(--topbar-height) + 1rem) 0.75rem 0.75rem 0.75rem !important;
+  }
+
+  .page-title {
+    font-size: 1.25rem !important;
+  }
+
+  .page-subtitle {
+    font-size: 0.88rem !important;
+  }
+}
+/* ===== end clean final shell layout ===== */
+
+
+/* ===== width + blue topbar fix ===== */
+.global-topbar {
+  background: #0b3b91 !important;
+  color: #ffffff !important;
+  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
+}
+
+.global-app-title,
+.global-topbar-name,
+.global-topbar-username {
+  color: #ffffff !important;
+}
+
+.global-topbar-logout {
+  background: rgba(255,255,255,0.12) !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255,255,255,0.18) !important;
+}
+
+.global-topbar-logout:hover {
+  background: rgba(255,255,255,0.18) !important;
+}
+
+/* force the main region to use full width */
+.main,
+.main-content,
+.page-header,
+.card,
+.table-wrap,
+.right-pane-tabs,
+.tab-panel,
+form,
+.form-grid,
+.form-field,
+input,
+textarea,
+select {
+  max-width: none !important;
+}
+
+.main {
+  width: auto !important;
+}
+
+.main-content {
+  width: 100% !important;
+}
+
+.card,
+.tab-panel,
+.table-wrap,
+form {
+  width: 100% !important;
+}
+
+.tab-panel {
+  display: block !important;
+}
+
+/* prevent tiny wrapped buttons/labels */
+.button-row {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 0.65rem !important;
+}
+
+.button-link,
+button,
+.tab-button {
+  white-space: nowrap !important;
+}
+
+/* forms should fill horizontally */
+.form-grid {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
+  gap: 1rem !important;
+  width: 100% !important;
+}
+
+.form-field.full {
+  grid-column: 1 / -1 !important;
+}
+
+input,
+textarea,
+select {
+  width: 100% !important;
+}
+
+/* tables should occupy full width */
+table {
+  width: 100% !important;
+}
+
+/* document page tabs/buttons */
+.right-pane-tabs {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 0.65rem !important;
+  margin-bottom: 1rem !important;
+}
+/* ===== end width + blue topbar fix ===== */
+
+/* ===== top bar color sync ===== */
+.global-topbar {
+  background: #08142f !important;
+  color: #ffffff !important;
+  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
+}
+
+.global-topbar-name,
+.global-topbar-username {
+  color: #ffffff !important;
+}
+
+.global-topbar-logout {
+  background: rgba(255,255,255,0.10) !important;
+  color: #ffffff !important;
+  border: 1px solid rgba(255,255,255,0.16) !important;
+}
+
+.global-topbar-logout:hover {
+  background: rgba(255,255,255,0.16) !important;
+}
+
+.global-topbar-left {
+  flex: 1 1 auto !important;
+}
+
+.global-topbar-right {
+  flex: 0 0 auto !important;
+}
+/* ===== end top bar color sync ===== */
+
+/* ===== documents/page width fix ===== */
+
+/* top bar: same color as side pane, no title text needed there */
+.global-topbar {
+  background: #08142f !important;
+  color: #fff !important;
+  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
+}
+
+.global-topbar-left {
+  display: none !important;
+}
+
+.global-topbar-name,
+.global-topbar-username {
+  color: #fff !important;
+}
+
+.global-topbar-logout {
+  background: rgba(255,255,255,0.10) !important;
+  color: #fff !important;
+  border: 1px solid rgba(255,255,255,0.14) !important;
+}
+
+/* restore sidebar branding */
+.sidebar .brand {
+  display: block !important;
+}
+
+/* main region must consume available width */
+.main {
+  margin-left: var(--rail-closed) !important;
+  width: calc(100vw - var(--rail-closed)) !important;
+  max-width: none !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+
+.app-shell.nav-open .main {
+  margin-left: var(--rail-open) !important;
+  width: calc(100vw - var(--rail-open)) !important;
+}
+
+.main-content {
+  display: block !important;
+  width: 100% !important;
+  max-width: none !important;
+  min-width: 0 !important;
+}
+
+/* all normal content containers should stretch */
+.page-header,
+.card,
+.table-wrap,
+form,
+.form-grid,
+.form-field,
+.button-row,
+.right-pane-tabs,
+.tab-panel {
+  width: 100% !important;
+  max-width: none !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+
+/* cards should stack normally */
+.card {
+  display: block !important;
+}
+
+/* tab strip */
+.right-pane-tabs {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 0.65rem !important;
+  margin-bottom: 1rem !important;
+}
+
+/* IMPORTANT: only active tab panel should show */
+.tab-panel {
+  display: none !important;
+}
+
+.tab-panel.active {
+  display: block !important;
+}
+
+/* forms */
+.form-grid {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
+  gap: 1rem !important;
+}
+
+.form-field.full {
+  grid-column: 1 / -1 !important;
+}
+
+input,
+textarea,
+select {
+  display: block !important;
+  width: 100% !important;
+  max-width: none !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+
+/* buttons should not collapse into vertical word wrapping */
+.button-link,
+button,
+.tab-button {
+  white-space: nowrap !important;
+}
+
+/* text should wrap normally, not per-character */
+.page-title,
+.page-subtitle,
+.card-title,
+label,
+p,
+td,
+th,
+a,
+span,
+div {
+  word-break: normal !important;
+  overflow-wrap: break-word !important;
+}
+
+/* tables */
+table {
+  width: 100% !important;
+}
+
+/* mobile */
+@media (max-width: 700px) {
+  .main {
+    width: calc(100vw - var(--rail-closed)) !important;
+    padding: 96px 0.75rem 0.75rem 0.75rem !important;
+  }
+
+  .app-shell.nav-open .main {
+    width: calc(100vw - var(--rail-open)) !important;
+  }
+}
+
+/* ===== end documents/page width fix ===== */
+
+/* ===== topbar locked-right behavior ===== */
+.global-topbar {
+  left: 0 !important;
+  right: 0 !important;
+  padding-left: 56px !important; /* leave room for collapsed rail + toggle */
+  justify-content: flex-end !important;
+}
+
+.app-shell.nav-open .global-topbar {
+  left: 0 !important;
+  right: 0 !important;
+}
+
+.global-topbar-left {
+  display: none !important;
+}
+
+.global-topbar-right {
+  margin-left: auto !important;
+  padding-right: 0.25rem !important;
+  justify-content: flex-end !important;
+  max-width: calc(100vw - 70px) !important;
+  overflow: hidden !important;
+}
+
+.global-topbar-user {
+  min-width: 0 !important;
+}
+
+.global-topbar-name,
+.global-topbar-username {
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  text-overflow: ellipsis !important;
+}
+
+/* sidebar should sit above the top bar when opened */
+.sidebar {
+  z-index: 1000 !important;
+}
+
+.global-topbar {
+  z-index: 900 !important;
+}
+
+/* keep main sizing tied to rail, not top bar */
+.main {
+  width: calc(100vw - var(--rail-closed)) !important;
+}
+
+.app-shell.nav-open .main {
+  width: calc(100vw - var(--rail-open)) !important;
+}
+
+/* mobile trim */
+@media (max-width: 700px) {
+  .global-topbar {
+    padding-left: 52px !important;
+    padding-right: 0.4rem !important;
+  }
+
+  .global-topbar-right {
+    max-width: calc(100vw - 60px) !important;
+    gap: 0.4rem !important;
+  }
+
+  .global-topbar-name {
+    font-size: 0.9rem !important;
+  }
+
+  .global-topbar-username {
+    font-size: 0.75rem !important;
+  }
+}
+/* ===== end topbar locked-right behavior ===== */
+
+/* ===== topbar username visibility fix ===== */
+.global-topbar {
+  left: 0 !important;
+  right: 0 !important;
+  padding-left: 0.5rem !important;
+  padding-right: 0.75rem !important;
+  justify-content: flex-end !important;
+}
+
+.global-topbar-right {
+  margin-left: auto !important;
+  max-width: calc(100vw - 3.5rem) !important;
+  overflow: visible !important;
+}
+
+.global-topbar-user {
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: flex-end !important;
+  white-space: nowrap !important;
+}
+
+.global-topbar-name,
+.global-topbar-username {
+  white-space: nowrap !important;
+  overflow: visible !important;
+  text-overflow: clip !important;
+}
+
+@media (max-width: 700px) {
+  .global-topbar-username {
+    display: none !important;
+  }
+}
+/* ===== end topbar username visibility fix ===== */
diff --git a/app/templates/auth/login.html b/app/templates/auth/login.html
new file mode 100644
index 0000000..581fe33
--- /dev/null
+++ b/app/templates/auth/login.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Login</title>
+    <link rel="stylesheet" href="/static/app.css">
+</head>
+<body>
+    <main class="main" style="max-width:520px; margin:3rem auto; padding:2rem 1rem;">
+        <div class="card">
+            <h1 class="page-title">Login</h1>
+            <p class="page-subtitle">Sign in to Document Processor.</p>
+
+            {% if error %}
+            <div class="error-box">{{ error }}</div>
+            {% endif %}
+
+            <form method="post" action="/login">
+                <div class="form-grid">
+                    <div class="form-field full">
+                        <label for="username">Username or email</label>
+                        <input id="username" type="text" name="username" required>
+                    </div>
+
+                    <div class="form-field full">
+                        <label for="password">Password</label>
+                        <input id="password" type="password" name="password" required>
+                    </div>
+                </div>
+
+                <div class="button-row" style="margin-top:1rem;">
+                    <button class="primary" type="submit">Login</button>
+                </div>
+            </form>
+        </div>
+    </main>
+</body>
+</html>
diff --git a/app/templates/base.html b/app/templates/base.html
new file mode 100644
index 0000000..45370b1
--- /dev/null
+++ b/app/templates/base.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>{% block title %}Document Processor{% endblock %}</title>
+    <link rel="stylesheet" href="/static/app.css?v=12">
+</head>
+<body>
+    <div class="app-shell">
+        {% include "partials/sidebar.html" %}
+        {% include "partials/header.html" %}
+
+        <main class="main">
+            <div class="main-content">
+                {% block content %}{% endblock %}
+            </div>
+        </main>
+    </div>
+
+    <script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const menuToggle = document.getElementById("menu-toggle");
+        const appShell = document.querySelector(".app-shell");
+        if (!menuToggle || !appShell) return;
+
+        const toggleNav = () => appShell.classList.toggle("nav-open");
+
+        menuToggle.addEventListener("click", toggleNav);
+        menuToggle.addEventListener("keydown", (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                toggleNav();
+            }
+        });
+    });
+    </script>
+</body>
+</html>
diff --git a/app/templates/dashboard.html b/app/templates/dashboard.html
index 3874cf4..b8222e2 100644
--- a/app/templates/dashboard.html
+++ b/app/templates/dashboard.html
@@ -1,55 +1,10 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Dashboard</title>
-    <link rel="stylesheet" href="/static/app.css">
-    <style>
-        .stats-grid {
-            display: grid;
-            grid-template-columns: repeat(3, minmax(0, 1fr));
-            gap: 0.85rem;
-        }
+{% extends "base.html" %}
 
-        .stat-card {
-            border: 1px solid #d7dce5;
-            border-radius: 14px;
-            padding: 0.85rem 1rem;
-            background: #f8fafc;
-        }
+{% block title %}Dashboard{% endblock %}
 
-        .stat-label {
-            font-size: 0.78rem;
-            color: #6b7280;
-            margin-bottom: 0.35rem;
-        }
+{% block content %}
 
-        .stat-value {
-            font-size: 1.35rem;
-            font-weight: 700;
-            color: #111827;
-            line-height: 1.1;
-        }
-
-        .compact-button-row {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 0.75rem;
-        }
-
-        @media (max-width: 900px) {
-            .stats-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-    </style>
-</head>
-<body>
-<div class="app-shell" id="app-shell">
-    {% include "partials/sidebar.html" %}
-
-    <main class="main">
-        <div class="topbar">
+        <div class="page-header">
             <div>
                 <h1 class="page-title">Dashboard</h1>
                 <p class="page-subtitle">Overview of document processing, extraction coverage, and line item review status.</p>
@@ -57,71 +12,36 @@
         </div>
 
         <div class="card">
-            <div class="compact-button-row">
+            <div class="button-row">
                 <a class="button-link primary" href="/documents/">Open documents</a>
                 <a class="button-link" href="/queue/">Open queue</a>
                 <a class="button-link" href="/line-items/">Open line items</a>
+                <a class="button-link" href="/line-items/summary">Open summary</a>
                 <a class="button-link" href="/ingest/">Open ingest</a>
             </div>
         </div>
 
         <div class="card">
             <h2 class="card-title">Document overview</h2>
-            <div class="stats-grid">
-                <div class="stat-card">
-                    <div class="stat-label">Total documents</div>
-                    <div class="stat-value">{{ total_documents }}</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Active documents</div>
-                    <div class="stat-value">{{ active_documents }}</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Reviewed documents</div>
-                    <div class="stat-value">{{ reviewed_documents }}</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Pending OCR/review</div>
-                    <div class="stat-value">{{ pending_review_documents }}</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Extracted field rows</div>
-                    <div class="stat-value">{{ extracted_documents }}</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Trashed documents</div>
-                    <div class="stat-value">{{ trashed_documents }}</div>
-                </div>
+            <div class="meta-grid">
+                <div class="meta-item"><span class="meta-label">Total documents</span>{{ total_documents }}</div>
+                <div class="meta-item"><span class="meta-label">Active documents</span>{{ active_documents }}</div>
+                <div class="meta-item"><span class="meta-label">Reviewed documents</span>{{ reviewed_documents }}</div>
+                <div class="meta-item"><span class="meta-label">Pending OCR/review</span>{{ pending_review_documents }}</div>
+                <div class="meta-item"><span class="meta-label">Extracted field rows</span>{{ extracted_documents }}</div>
+                <div class="meta-item"><span class="meta-label">Trashed documents</span>{{ trashed_documents }}</div>
             </div>
         </div>
 
         <div class="card">
             <h2 class="card-title">Line item overview</h2>
-            <div class="stats-grid">
-                <div class="stat-card">
-                    <div class="stat-label">Total line items</div>
-                    <div class="stat-value">{{ total_line_items }}</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Cocktail items</div>
-                    <div class="stat-value">{{ cocktail_count }}</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Rated cocktails</div>
-                    <div class="stat-value">{{ rated_cocktails }}</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Pending cocktail ratings</div>
-                    <div class="stat-value">{{ pending_cocktail_reviews }}</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Cocktails marked N/A</div>
-                    <div class="stat-value">{{ na_cocktails }}</div>
-                </div>
-                <div class="stat-card">
-                    <div class="stat-label">Average cocktail rating</div>
-                    <div class="stat-value">{{ avg_cocktail_rating or "—" }}</div>
-                </div>
+            <div class="meta-grid">
+                <div class="meta-item"><span class="meta-label">Total line items</span>{{ total_line_items }}</div>
+                <div class="meta-item"><span class="meta-label">Cocktail items</span>{{ cocktail_count }}</div>
+                <div class="meta-item"><span class="meta-label">Rated cocktails</span>{{ rated_cocktails }}</div>
+                <div class="meta-item"><span class="meta-label">Pending cocktail ratings</span>{{ pending_cocktail_reviews }}</div>
+                <div class="meta-item"><span class="meta-label">Cocktails marked N/A</span>{{ na_cocktails }}</div>
+                <div class="meta-item"><span class="meta-label">Average cocktail rating</span>{{ avg_cocktail_rating or "—" }}</div>
             </div>
         </div>
 
@@ -134,7 +54,7 @@
                             <tr>
                                 <th>Document</th>
                                 <th>Type</th>
-                                <th>Review Status</th>
+                                <th>Review status</th>
                                 <th>Updated</th>
                             </tr>
                         </thead>
@@ -143,11 +63,7 @@
                             <tr>
                                 <td><a href="/documents/{{ doc.document_id }}">{{ doc.document_id }}</a></td>
                                 <td>{{ doc.document_type }}</td>
-                                <td>
-                                    <span class="badge {% if doc.review_status == 'reviewed' %}reviewed{% else %}pending{% endif %}">
-                                        {{ doc.review_status }}
-                                    </span>
-                                </td>
+                                <td><span class="badge {% if doc.review_status == 'reviewed' %}reviewed{% else %}pending{% endif %}">{{ doc.review_status }}</span></td>
                                 <td>{{ doc.updated_at }}</td>
                             </tr>
                             {% endfor %}
@@ -155,7 +71,7 @@
                     </table>
                 </div>
             {% else %}
-                <p class="empty-state">No recent documents found.</p>
+                <p class="empty-state">No documents found.</p>
             {% endif %}
         </div>
 
@@ -172,6 +88,7 @@
                                 <th>Category</th>
                                 <th>Total</th>
                                 <th>Rating</th>
+                                <th>Status</th>
                                 <th>Document</th>
                             </tr>
                         </thead>
@@ -183,15 +100,8 @@
                                 <td>{{ row.description }}</td>
                                 <td>{{ row.category }}</td>
                                 <td>{{ row.line_total }}</td>
-                                <td>
-                                    {% if row.quality_rating %}
-                                        {{ row.quality_rating }}
-                                    {% elif row.quality_status == "na" %}
-                                        N/A
-                                    {% else %}
-                                        —
-                                    {% endif %}
-                                </td>
+                                <td>{{ row.quality_rating }}</td>
+                                <td>{{ row.quality_status }}</td>
                                 <td><a href="/documents/{{ row.document_id }}?tab=extracted-fields">{{ row.document_id }}</a></td>
                             </tr>
                             {% endfor %}
@@ -199,28 +109,8 @@
                     </table>
                 </div>
             {% else %}
-                <p class="empty-state">No recent line items found.</p>
+                <p class="empty-state">No line items found.</p>
             {% endif %}
         </div>
-    </main>
-</div>
-
-<script>
-(function () {
-    const appShell = document.getElementById("app-shell");
-    const menuToggle = document.getElementById("menu-toggle");
-    if (appShell && menuToggle) {
-        menuToggle.addEventListener("click", function () {
-            appShell.classList.toggle("nav-open");
-        });
-        menuToggle.addEventListener("keydown", function (e) {
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                appShell.classList.toggle("nav-open");
-            }
-        });
-    }
-})();
-</script>
-</body>
-</html>
+    
+{% endblock %}
diff --git a/app/templates/documents/list.html b/app/templates/documents/list.html
index 04b9e93..b9994d0 100644
--- a/app/templates/documents/list.html
+++ b/app/templates/documents/list.html
@@ -1,22 +1,12 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Documents</title>
-    <link rel="stylesheet" href="/static/app.css">
-</head>
-<body>
-<div class="app-shell" id="app-shell">
-    {% include "partials/sidebar.html" %}
+{% extends "base.html" %}
+{% block title %}Documents{% endblock %}
 
-    <main class="main">
-        <div class="topbar">
-            <div>
+{% block content %}
+<div class="page-header">
                 <h1 class="page-title">Documents</h1>
                 <p class="page-subtitle">Browse all documents or refine with advanced search.</p>
             </div>
-        </div>
-<div style="display:flex; gap:0.6rem; flex-wrap:wrap; margin:0.75rem 0;">
+<div class="button-row" style="margin:0.75rem 0;">
     <a class="button-link" href="/documents/export/training.jsonl">Export document training</a>
     <a class="button-link" href="/documents/export/training.jsonl?type=line_items">Export line item training</a>
 </div>
@@ -119,48 +109,5 @@
                 <p class="empty-state">No documents matched the current search.</p>
             {% endif %}
         </div>
-    </main>
-</div>
 
-<script>
-(function () {
-    const appShell = document.getElementById("app-shell");
-    const menuToggle = document.getElementById("menu-toggle");
-    if (appShell && menuToggle) {
-        menuToggle.addEventListener("click", function () {
-            appShell.classList.toggle("nav-open");
-        });
-        menuToggle.addEventListener("keydown", function (e) {
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                appShell.classList.toggle("nav-open");
-            }
-        });
-    }
-
-    const tabButtons = document.querySelectorAll("[data-tab]");
-    const tabPanels = document.querySelectorAll("[data-panel]");
-
-    function activateTab(target) {
-        tabButtons.forEach(function (b) {
-            b.classList.toggle("active", b.getAttribute("data-tab") === target);
-        });
-        tabPanels.forEach(function (p) {
-            p.classList.toggle("active", p.getAttribute("data-panel") === target);
-        });
-    }
-
-    tabButtons.forEach(function (btn) {
-        btn.addEventListener("click", function () {
-            const target = btn.getAttribute("data-tab");
-            activateTab(target);
-
-            const url = new URL(window.location.href);
-            url.searchParams.set("tab", target);
-            window.history.replaceState({}, "", url.toString());
-        });
-    });
-})();
-</script>
-</body>
-</html>
+{% endblock %}
diff --git a/app/templates/ingest/index.html b/app/templates/ingest/index.html
index 9bbf5fe..cab3855 100644
--- a/app/templates/ingest/index.html
+++ b/app/templates/ingest/index.html
@@ -1,21 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Ingest</title>
-    <link rel="stylesheet" href="/static/app.css">
-</head>
-<body>
-<div class="app-shell" id="app-shell">
-    {% include "partials/sidebar.html" %}
+{% extends "base.html" %}
+{% block title %}Ingest{% endblock %}
 
-    <main class="main">
-        <div class="topbar">
-            <div>
+{% block content %}
+<div class="page-header">
                 <h1 class="page-title">Ingest</h1>
                 <p class="page-subtitle">Upload files, ingest from server-side paths, or use the current default ingest root.</p>
             </div>
-        </div>
 
         <div class="card">
             <h2 class="card-title">Default ingest root</h2>
@@ -158,24 +148,5 @@
                 </div>
             </form>
         </div>
-    </main>
-</div>
 
-<script>
-(function () {
-    const appShell = document.getElementById("app-shell");
-    const menuToggle = document.getElementById("menu-toggle");
-    if (!appShell || !menuToggle) return;
-    menuToggle.addEventListener("click", function () {
-        appShell.classList.toggle("nav-open");
-    });
-    menuToggle.addEventListener("keydown", function (e) {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            appShell.classList.toggle("nav-open");
-        }
-    });
-})();
-</script>
-</body>
-</html>
+{% endblock %}
diff --git a/app/templates/ingest/result.html b/app/templates/ingest/result.html
index 3158dd4..42d6113 100644
--- a/app/templates/ingest/result.html
+++ b/app/templates/ingest/result.html
@@ -1,36 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Ingest Result</title>
-    <link rel="stylesheet" href="/static/app.css">
-</head>
-<body>
-<div class="app-shell" id="app-shell">
-    <aside class="sidebar">
-        <div class="sidebar-top">
-            <div class="sidebar-toggle" id="menu-toggle" aria-label="Toggle navigation" role="button" tabindex="0">
-                <span></span><span></span><span></span>
-            </div>
-            <div class="brand">Document Processor</div>
-        </div>
+{% extends "base.html" %}
+{% block title %}Ingest Result{% endblock %}
 
-        <div class="sidebar-section-title">Workspace</div>
-        <nav class="nav-list">
-            <a class="nav-link" href="/documents/" title="Documents"><span class="nav-link-short">D</span><span class="nav-link-text">Documents</span></a>
-            <a class="nav-link" href="/queue/" title="Review Queue"><span class="nav-link-short">Q</span><span class="nav-link-text">Review Queue</span></a>
-            <a class="nav-link" href="/trash/" title="Trash"><span class="nav-link-short">T</span><span class="nav-link-text">Trash</span></a>
-            <a class="nav-link active" href="/ingest/" title="Ingest"><span class="nav-link-short">I</span><span class="nav-link-text">Ingest</span></a>
-        </nav>
-    </aside>
-
-    <main class="main">
-        <div class="topbar">
-            <div>
+{% block content %}
+<div class="page-header">
                 <h1 class="page-title">Ingest Result</h1>
                 <p class="page-subtitle">{{ message }}</p>
             </div>
-        </div>
 
         <div class="card">
             <div class="button-row">
@@ -75,24 +50,5 @@
             </ul>
         </div>
         {% endif %}
-    </main>
-</div>
 
-<script>
-(function () {
-    const appShell = document.getElementById("app-shell");
-    const menuToggle = document.getElementById("menu-toggle");
-    if (!appShell || !menuToggle) return;
-    menuToggle.addEventListener("click", function () {
-        appShell.classList.toggle("nav-open");
-    });
-    menuToggle.addEventListener("keydown", function (e) {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            appShell.classList.toggle("nav-open");
-        }
-    });
-})();
-</script>
-</body>
-</html>
+{% endblock %}
diff --git a/app/templates/line_items/list.html b/app/templates/line_items/list.html
index 18064a1..9b5ce38 100644
--- a/app/templates/line_items/list.html
+++ b/app/templates/line_items/list.html
@@ -1,21 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Line Items</title>
-    <link rel="stylesheet" href="/static/app.css">
-</head>
-<body>
-<div class="app-shell" id="app-shell">
-    {% include "partials/sidebar.html" %}
+{% extends "base.html" %}
+{% block title %}Line Items{% endblock %}
 
-    <main class="main">
-        <div class="topbar">
-            <div>
+{% block content %}
+<div class="page-header">
                 <h1 class="page-title">Line Items</h1>
                 <p class="page-subtitle">Analyze extracted purchase lines, prices, and ratings</p>
             </div>
-        </div>
 
         <div class="card">
             <div class="right-pane-tabs">
@@ -284,63 +274,5 @@
                 {% endif %}
             </div>
         </div>
-    </main>
-</div>
 
-<script>
-(function () {
-    const appShell = document.getElementById("app-shell");
-    const menuToggle = document.getElementById("menu-toggle");
-    if (appShell && menuToggle) {
-        menuToggle.addEventListener("click", function () {
-            appShell.classList.toggle("nav-open");
-        });
-        menuToggle.addEventListener("keydown", function (e) {
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                appShell.classList.toggle("nav-open");
-            }
-        });
-    }
-
-    const tabButtons = document.querySelectorAll("[data-tab]");
-    const tabPanels = document.querySelectorAll("[data-panel]");
-
-    function toggleReviewNA(el) {
-        const form = el.closest("form");
-        if (!form) return;
-        const disabled = el.checked;
-        form.querySelectorAll('input[type="text"], textarea').forEach(function (field) {
-            if (field.name === "quality_rating" || field.name === "quality_note") {
-                field.disabled = disabled;
-            }
-        });
-    }
-
-    document.querySelectorAll('input[name="is_na"]').forEach(function (el) {
-        if (el.checked) toggleReviewNA(el);
-    });
-
-    function activateTab(target) {
-        tabButtons.forEach(function (b) {
-            b.classList.toggle("active", b.getAttribute("data-tab") === target);
-        });
-        tabPanels.forEach(function (p) {
-            p.classList.toggle("active", p.getAttribute("data-panel") === target);
-        });
-    }
-
-    tabButtons.forEach(function (btn) {
-        btn.addEventListener("click", function () {
-            const target = btn.getAttribute("data-tab");
-            activateTab(target);
-
-            const url = new URL(window.location.href);
-            url.searchParams.set("tab", target);
-            window.history.replaceState({}, "", url.toString());
-        });
-    });
-})();
-</script>
-</body>
-</html>
+{% endblock %}
diff --git a/app/templates/line_items/queue.html b/app/templates/line_items/queue.html
index 2b22a18..45880f5 100644
--- a/app/templates/line_items/queue.html
+++ b/app/templates/line_items/queue.html
@@ -1,21 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Quality Review Queue</title>
-    <link rel="stylesheet" href="/static/app.css">
-</head>
-<body>
-<div class="app-shell" id="app-shell">
-    {% include "partials/sidebar.html" %}
+{% extends "base.html" %}
+{% block title %}Quality Review Queue{% endblock %}
 
-    <main class="main">
-        <div class="topbar">
-            <div>
+{% block content %}
+<div class="page-header">
                 <h1 class="page-title">Quality Review Queue</h1>
                 <p class="page-subtitle">Cocktails waiting for a rating or an N/A mark</p>
             </div>
-        </div>
 
         <div class="card">
             {% if next_row %}
@@ -77,25 +67,5 @@
                 <p class="empty-state">Nothing is waiting in the quality review queue.</p>
             {% endif %}
         </div>
-    </main>
-</div>
 
-<script>
-(function () {
-    const appShell = document.getElementById("app-shell");
-    const menuToggle = document.getElementById("menu-toggle");
-    if (appShell && menuToggle) {
-        menuToggle.addEventListener("click", function () {
-            appShell.classList.toggle("nav-open");
-        });
-        menuToggle.addEventListener("keydown", function (e) {
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                appShell.classList.toggle("nav-open");
-            }
-        });
-    }
-})();
-</script>
-</body>
-</html>
+{% endblock %}
diff --git a/app/templates/line_items/summary.html b/app/templates/line_items/summary.html
index 8a6f855..d64f33a 100644
--- a/app/templates/line_items/summary.html
+++ b/app/templates/line_items/summary.html
@@ -1,21 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Line Item Summary</title>
-    <link rel="stylesheet" href="/static/app.css">
-</head>
-<body>
-<div class="app-shell" id="app-shell">
-    {% include "partials/sidebar.html" %}
+{% extends "base.html" %}
+{% block title %}Line Item Summary{% endblock %}
 
-    <main class="main">
-        <div class="topbar">
-            <div>
+{% block content %}
+<div class="page-header">
                 <h1 class="page-title">Line Item Summary</h1>
                 <p class="page-subtitle">Aggregate prices and ratings across extracted line items</p>
             </div>
-        </div>
 
         <div class="card">
             <form method="get" action="/line-items/summary">
@@ -69,25 +59,5 @@
                 <p class="empty-state">No summary rows found for the current search.</p>
             {% endif %}
         </div>
-    </main>
-</div>
 
-<script>
-(function () {
-    const appShell = document.getElementById("app-shell");
-    const menuToggle = document.getElementById("menu-toggle");
-    if (appShell && menuToggle) {
-        menuToggle.addEventListener("click", function () {
-            appShell.classList.toggle("nav-open");
-        });
-        menuToggle.addEventListener("keydown", function (e) {
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                appShell.classList.toggle("nav-open");
-            }
-        });
-    }
-})();
-</script>
-</body>
-</html>
+{% endblock %}
diff --git a/app/templates/partials/header.html b/app/templates/partials/header.html
new file mode 100644
index 0000000..9d34027
--- /dev/null
+++ b/app/templates/partials/header.html
@@ -0,0 +1,21 @@
+{% set user = request.state.current_user if request is defined and request.state.current_user is defined else None %}
+<header class="global-topbar">
+    <div class="global-topbar-left"></div>
+
+    <div class="global-topbar-right">
+        {% if user %}
+        <div class="global-topbar-user">
+            <div class="global-topbar-name">{{ user.display_name }}</div>
+            <div class="global-topbar-username">@{{ user.username }}</div>
+        </div>
+
+        {% if user.is_admin %}
+        <span class="badge reviewed">admin</span>
+        {% endif %}
+
+        <form method="post" action="/logout" style="margin:0;">
+            <button type="submit" class="global-topbar-logout">Logout</button>
+        </form>
+        {% endif %}
+    </div>
+</header>
diff --git a/app/templates/partials/sidebar.html b/app/templates/partials/sidebar.html
index 60af95e..bb38d78 100644
--- a/app/templates/partials/sidebar.html
+++ b/app/templates/partials/sidebar.html
@@ -4,15 +4,28 @@
             <span></span><span></span><span></span>
         </div>
         <div class="brand">Document Processor</div>
+        
     </div>
 
     <div class="sidebar-section-title">Workspace</div>
     <nav class="nav-list">
-        <a class="nav-link {% if active_page == 'dashboard' %}active{% endif %}" href="/" title="Dashboard"><span class="nav-link-short">H</span><span class="nav-link-text">Dashboard</span></a>
-        <a class="nav-link {% if active_page == 'documents' %}active{% endif %}" href="/documents/" title="Documents"><span class="nav-link-short">D</span><span class="nav-link-text">Documents</span></a>
-        <a class="nav-link {% if active_page == 'line_items' %}active{% endif %}" href="/line-items/" title="Line Items"><span class="nav-link-short">L</span><span class="nav-link-text">Line Items</span></a>
-        <a class="nav-link {% if active_page == 'queue' %}active{% endif %}" href="/queue/" title="Review Queue"><span class="nav-link-short">Q</span><span class="nav-link-text">Review Queue</span></a>
-        <a class="nav-link {% if active_page == 'trash' %}active{% endif %}" href="/trash/" title="Trash"><span class="nav-link-short">T</span><span class="nav-link-text">Trash</span></a>
-        <a class="nav-link {% if active_page == 'ingest' %}active{% endif %}" href="/ingest/" title="Ingest"><span class="nav-link-short">I</span><span class="nav-link-text">Ingest</span></a>
+        <a class="nav-link {% if active_page == 'dashboard' %}active{% endif %}" href="/" title="Dashboard">
+            <span class="nav-link-short">H</span><span class="nav-link-text">Dashboard</span>
+        </a>
+        <a class="nav-link {% if active_page == 'documents' %}active{% endif %}" href="/documents/" title="Documents">
+            <span class="nav-link-short">D</span><span class="nav-link-text">Documents</span>
+        </a>
+        <a class="nav-link {% if active_page == 'line_items' %}active{% endif %}" href="/line-items/" title="Line Items">
+            <span class="nav-link-short">L</span><span class="nav-link-text">Line Items</span>
+        </a>
+        <a class="nav-link {% if active_page == 'queue' %}active{% endif %}" href="/queue/" title="Review Queue">
+            <span class="nav-link-short">Q</span><span class="nav-link-text">Review Queue</span>
+        </a>
+        <a class="nav-link {% if active_page == 'trash' %}active{% endif %}" href="/trash/" title="Trash">
+            <span class="nav-link-short">T</span><span class="nav-link-text">Trash</span>
+        </a>
+        <a class="nav-link {% if active_page == 'ingest' %}active{% endif %}" href="/ingest/" title="Ingest">
+            <span class="nav-link-short">I</span><span class="nav-link-text">Ingest</span>
+        </a>
     </nav>
 </aside>
diff --git a/app/templates/presets/index.html b/app/templates/presets/index.html
index 47344c1..97cc411 100644
--- a/app/templates/presets/index.html
+++ b/app/templates/presets/index.html
@@ -1,21 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Presets</title>
-    <link rel="stylesheet" href="/static/app.css">
-</head>
-<body>
-<div class="app-shell" id="app-shell">
-    {% include "partials/sidebar.html" %}
+{% extends "base.html" %}
+{% block title %}Presets{% endblock %}
 
-    <main class="main">
-        <div class="topbar">
-            <div>
+{% block content %}
+<div class="page-header">
                 <h1 class="page-title">Presets</h1>
                 <p class="page-subtitle">Create reusable defaults for additional fields.</p>
             </div>
-        </div>
 
         <div class="card">
             <h2 class="card-title">{% if editing %}Edit preset{% else %}Create preset{% endif %}</h2>
@@ -125,25 +115,5 @@
                 <p class="empty-state">No presets yet.</p>
             {% endif %}
         </div>
-    </main>
-</div>
 
-<script>
-(function () {
-    const appShell = document.getElementById("app-shell");
-    const menuToggle = document.getElementById("menu-toggle");
-    if (appShell && menuToggle) {
-        menuToggle.addEventListener("click", function () {
-            appShell.classList.toggle("nav-open");
-        });
-        menuToggle.addEventListener("keydown", function (e) {
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
-                appShell.classList.toggle("nav-open");
-            }
-        });
-    }
-})();
-</script>
-</body>
-</html>
+{% endblock %}
diff --git a/app/templates/queue/index.html b/app/templates/queue/index.html
index f4f923e..83b68be 100644
--- a/app/templates/queue/index.html
+++ b/app/templates/queue/index.html
@@ -1,21 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Review Queue</title>
-    <link rel="stylesheet" href="/static/app.css">
-</head>
-<body>
-<div class="app-shell" id="app-shell">
-    {% include "partials/sidebar.html" %}
+{% extends "base.html" %}
+{% block title %}Review Queue{% endblock %}
 
-    <main class="main">
-        <div class="topbar">
-            <div>
+{% block content %}
+<div class="page-header">
                 <h1 class="page-title">Review Queue</h1>
                 <p class="page-subtitle">Work through OCR review, field extraction, quality review, and recent activity.</p>
             </div>
-        </div>
 
         
 
@@ -151,24 +141,5 @@
                 {% endif %}
             </div>
         </div>
-    </main>
-</div>
 
-<script>
-(function () {
-    const appShell = document.getElementById("app-shell");
-    const menuToggle = document.getElementById("menu-toggle");
-    if (!appShell || !menuToggle) return;
-    menuToggle.addEventListener("click", function () {
-        appShell.classList.toggle("nav-open");
-    });
-    menuToggle.addEventListener("keydown", function (e) {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            appShell.classList.toggle("nav-open");
-        }
-    });
-})();
-</script>
-</body>
-</html>
+{% endblock %}
diff --git a/app/templates/trash/index.html b/app/templates/trash/index.html
index 57652d9..f4a7137 100644
--- a/app/templates/trash/index.html
+++ b/app/templates/trash/index.html
@@ -1,21 +1,11 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <title>Trash</title>
-    <link rel="stylesheet" href="/static/app.css">
-</head>
-<body>
-<div class="app-shell" id="app-shell">
-    {% include "partials/sidebar.html" %}
+{% extends "base.html" %}
+{% block title %}Trash{% endblock %}
 
-    <main class="main">
-        <div class="topbar">
-            <div>
+{% block content %}
+<div class="page-header">
                 <h1 class="page-title">Trash</h1>
                 <p class="page-subtitle">Soft-deleted documents can be restored or removed permanently.</p>
             </div>
-        </div>
 
         <div class="card">
             {% if documents %}
@@ -58,24 +48,5 @@
                 <p class="empty-state">Trash is empty.</p>
             {% endif %}
         </div>
-    </main>
-</div>
 
-<script>
-(function () {
-    const appShell = document.getElementById("app-shell");
-    const menuToggle = document.getElementById("menu-toggle");
-    if (!appShell || !menuToggle) return;
-    menuToggle.addEventListener("click", function () {
-        appShell.classList.toggle("nav-open");
-    });
-    menuToggle.addEventListener("keydown", function (e) {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            appShell.classList.toggle("nav-open");
-        }
-    });
-})();
-</script>
-</body>
-</html>
+{% endblock %}