From 08038b066f7d26bb820a4a2ebc6f473a25eefe3f Mon Sep 17 00:00:00 2001
From: nickviljoen <nick.viljoen@brandtech.plus>
Date: Sun, 17 May 2026 10:12:18 +0200
Subject: [PATCH] Rebrand UI to OLIVER template: Montserrat, yellow accents,
 sticky nav, tab fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Swap the muddy #f3ae3e palette for the real OLIVER brand pulled from the master
PPT template: yellow #FFCB05 + near-black #1A1A1A + off-white #F6F7F7, Montserrat
font. White-first page with a brand-yellow highlight rectangle behind page titles,
stat tiles with yellow left-strip, and a short yellow accent line under each
card section title — picks up the template's "01" chapter-marker rhythm.

Fixes two production bugs along the way:
- Nav stays pinned at top while page scrolls. The conflicting
  `.navbar { position: relative !important }` rule was removed from nav.html
  so the `position: fixed` from style.css can take effect.
- Clicking admin tabs no longer scrolls the page. Converted
  `<a href="#users">` to `<button data-bs-target="#users">` (Bootstrap 5's
  recommended pattern), so the anchor jump can't happen.

Other refinements: table padding loosened, `transform: scale` row hover
removed (jittery on dense rows), modal headers switched to near-black,
Chart.js palette aligned with brand tokens.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 static/style.css                | 679 +++++++++++++++++++++-----------
 templates/admin/dashboard.html  | 259 ++++++------
 templates/agent_management.html |  16 +-
 templates/agent_register.html   |  20 +-
 templates/base.html             |   2 +-
 templates/index.html            |  22 +-
 templates/login.html            |   6 +-
 templates/nav.html              |  58 ++-
 templates/profile.html          |  16 +-
 templates/register.html         |   6 +-
 templates/search.html           |   2 +-
 templates/user_management.html  |   4 +-
 12 files changed, 656 insertions(+), 434 deletions(-)

diff --git a/static/style.css b/static/style.css
index 5362b04..1844ff5 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,19 +1,30 @@
 :root {
-  --primary-color: #f3ae3e;
-  --secondary-color: #f3ae3e;
-  --accent-color: #f3ae3e;
-  --text-dark: #2d3748;
-  --text-light: #718096;
-  --bg-light: #f7fafc;
-  --bg-white: #ffffff;
-  --border-color: #e2e8f0;
-  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-  
-  /* Microsoft Brand Colors */
-  --ms-blue: #f3ae3e;
-  --ms-blue-dark: #f3ae3e;
-  --ms-gray: #5e5e5e;
+  /* OLIVER brand palette (from Master PPT Template) */
+  --brand-yellow:       #FFCB05;
+  --brand-yellow-soft:  #FFF5C4;
+  --brand-orange:       #FF5C00;
+  --brand-dark:         #1A1A1A;
+  --brand-grey:         #626262;
+  --brand-grey-light:   #DEE2E5;
+  --brand-off-white:    #F6F7F7;
+
+  /* Semantic aliases (kept so legacy var refs still resolve) */
+  --primary-color:   var(--brand-yellow);
+  --secondary-color: var(--brand-yellow);
+  --accent-color:    var(--brand-orange);
+  --text-dark:       var(--brand-dark);
+  --text-light:      var(--brand-grey);
+  --bg-light:        var(--brand-off-white);
+  --bg-white:        #FFFFFF;
+  --border-color:    var(--brand-grey-light);
+
+  --shadow:    0 4px 12px rgba(26, 26, 26, 0.06);
+  --shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.08);
+
+  /* Legacy compat — Microsoft button now uses brand orange */
+  --ms-blue:      var(--brand-orange);
+  --ms-blue-dark: #D94E00;
+  --ms-gray:      var(--brand-grey);
 }
 
 * {
@@ -25,323 +36,450 @@
 body {
   margin: 0;
   padding: 0;
-  /* Reserve space for the fixed navbar below so page content isn't hidden under it. */
+  /* Reserve space below the fixed navbar. */
   padding-top: 64px;
   color: var(--text-dark);
-  font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  line-height: 1.6;
+  font-family: 'Montserrat', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  font-weight: 400;
+  line-height: 1.55;
   min-height: 100vh;
-  background: transparent !important;
-}
-
-/* Orange brand backdrop. Painted on a fixed pseudo-element behind everything so
-   no child element (e.g. .container's white bg) can cover it. Always visible
-   around the centred white card regardless of viewport size or scroll. */
-body::before {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+  background-color: var(--brand-off-white);
 }
 
 .container {
   max-width: 1200px;
-  /* Always leave at least ~1rem of body gradient visible on each side, so the
-     orange frame doesn't disappear when the viewport is narrower than 1200px. */
   width: calc(100% - 2rem);
   margin: 2rem auto;
   padding: 2rem;
   background-color: var(--bg-white);
-  border-radius: 20px;
-  box-shadow: var(--shadow-lg);
-  backdrop-filter: blur(10px);
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  box-shadow: var(--shadow);
+  border: 1px solid var(--border-color);
 }
 
+/* ------------------------- Navbar ------------------------- */
 .navbar {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1100;
-  background: rgba(255, 255, 255, 0.95) !important;
-  backdrop-filter: blur(10px);
+  background: #FFFFFF !important;
   border-bottom: 1px solid var(--border-color);
-  box-shadow: var(--shadow);
+  box-shadow: 0 1px 0 rgba(26, 26, 26, 0.04);
+  min-height: 64px;
 }
 
 .navbar-brand {
-  font-weight: 700;
-  font-size: 1.5rem;
-  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 800;
+  font-size: 1.25rem;
+  letter-spacing: 0.02em;
+  color: var(--brand-dark) !important;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0;
+}
+
+.navbar-brand .brand-mark {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  background: var(--brand-yellow);
+  margin-right: 0.25rem;
 }
 
 .nav-link {
+  font-family: 'Montserrat', sans-serif;
   font-weight: 500;
-  transition: all 0.3s ease;
-  border-radius: 8px;
+  font-size: 0.9rem;
+  color: var(--brand-dark) !important;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  border-radius: 0;
   margin: 0 4px;
-  padding: 8px 16px !important;
+  padding: 8px 12px !important;
+  border-bottom: 2px solid transparent;
 }
 
 .nav-link:hover {
-  background-color: var(--bg-light);
-  transform: translateY(-1px);
+  color: var(--brand-dark) !important;
+  border-bottom-color: var(--brand-yellow);
+  background-color: transparent;
 }
 
 .nav-link.active {
-  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-  color: white !important;
+  background: transparent !important;
+  color: var(--brand-dark) !important;
+  border-bottom: 2px solid var(--brand-yellow);
 }
 
+/* ------------------------- Headings & page title ------------------------- */
+h1, h2, h3, h4, h5, h6 {
+  font-family: 'Montserrat', sans-serif;
+  color: var(--brand-dark);
+  font-weight: 700;
+  margin-bottom: 1rem;
+  letter-spacing: -0.005em;
+}
+
+h1 { font-size: 2.5rem; font-weight: 800; }
+h2 { font-size: 2rem;   font-weight: 800; }
+h3 { font-size: 1.5rem; }
+h4 { font-size: 1.25rem; }
+
+/* Yellow-highlight page title — signature OLIVER template motif. */
+.page-title {
+  display: inline-block;
+  position: relative;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 800;
+  font-size: 2rem;
+  line-height: 1.15;
+  color: var(--brand-dark);
+  padding: 0.15rem 0.6rem;
+  background: linear-gradient(
+    to top,
+    var(--brand-yellow) 0,
+    var(--brand-yellow) 70%,
+    transparent 70%,
+    transparent 100%
+  );
+  margin-bottom: 0.5rem;
+}
+
+.page-subtitle {
+  color: var(--brand-grey);
+  font-size: 0.95rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0;
+}
+
+/* ------------------------- Tables ------------------------- */
 .table {
   border-radius: 12px;
   overflow: hidden;
   box-shadow: var(--shadow);
   border: none;
-  margin-top: 2rem;
+  margin-top: 1.5rem;
+  background: #FFFFFF;
 }
 
 .table thead th {
-  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-  color: white;
+  background: var(--brand-dark);
+  color: #FFFFFF;
+  font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   border: none;
-  padding: 1rem;
-  font-size: 0.9rem;
+  padding: 1rem 1.25rem;
+  font-size: 0.75rem;
   text-transform: uppercase;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.08em;
 }
 
 .table tbody tr {
-  transition: all 0.3s ease;
+  transition: background-color 0.15s ease;
   border: none;
 }
 
 .table tbody tr:hover {
-  background-color: var(--bg-light);
-  transform: scale(1.01);
+  background-color: var(--brand-off-white);
 }
 
 .table tbody td {
-  padding: 1rem;
+  padding: 1.1rem 1.25rem;
   border-color: var(--border-color);
   vertical-align: middle;
+  font-size: 0.92rem;
 }
 
+/* ------------------------- Buttons ------------------------- */
 .btn {
-  border-radius: 8px;
-  font-weight: 500;
-  padding: 8px 20px;
-  transition: all 0.3s ease;
-  border: none;
-  text-transform: uppercase;
+  font-family: 'Montserrat', sans-serif;
+  border-radius: 6px;
+  font-weight: 600;
+  padding: 8px 18px;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
+  border: 1px solid transparent;
+  text-transform: none;
   font-size: 0.85rem;
-  letter-spacing: 0.5px;
+  letter-spacing: 0.01em;
 }
 
 .btn-primary {
-  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-  border: none;
+  background: var(--brand-yellow);
+  color: var(--brand-dark);
+  border-color: var(--brand-yellow);
 }
 
 .btn-primary:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow);
+  background: #F2BE00;
+  border-color: #F2BE00;
+  color: var(--brand-dark);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(255, 203, 5, 0.35);
+}
+
+.btn-primary:focus,
+.btn-primary:active {
+  background: #F2BE00 !important;
+  border-color: #F2BE00 !important;
+  color: var(--brand-dark) !important;
+  box-shadow: 0 0 0 3px rgba(255, 203, 5, 0.25) !important;
+}
+
+.btn-outline-primary {
+  background: transparent;
+  color: var(--brand-dark);
+  border: 1px solid var(--brand-dark);
+}
+
+.btn-outline-primary:hover {
+  background: var(--brand-yellow);
+  color: var(--brand-dark);
+  border-color: var(--brand-yellow);
 }
 
 .btn-warning {
-  background: linear-gradient(135deg, #ffecd2, #fcb69f);
-  border: none;
-  color: var(--text-dark);
+  background: var(--brand-yellow);
+  border-color: var(--brand-yellow);
+  color: var(--brand-dark);
 }
 
 .btn-warning:hover {
-  transform: translateY(-2px);
+  background: #F2BE00;
+  border-color: #F2BE00;
+  color: var(--brand-dark);
+  transform: translateY(-1px);
   box-shadow: var(--shadow);
-  color: var(--text-dark);
 }
 
 .btn-danger {
-  background: linear-gradient(135deg, #ff9a9e, #fecfef);
-  border: none;
-  color: var(--text-dark);
+  background: var(--brand-orange);
+  border-color: var(--brand-orange);
+  color: #FFFFFF;
 }
 
 .btn-danger:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow);
-  color: var(--text-dark);
+  background: #D94E00;
+  border-color: #D94E00;
+  color: #FFFFFF;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(255, 92, 0, 0.3);
+}
+
+.btn-outline-danger {
+  background: transparent;
+  color: var(--brand-orange);
+  border: 1px solid var(--brand-orange);
+}
+
+.btn-outline-danger:hover {
+  background: var(--brand-orange);
+  color: #FFFFFF;
+  border-color: var(--brand-orange);
+}
+
+.btn-success {
+  background: #1F9D55;
+  border-color: #1F9D55;
+  color: #FFFFFF;
+}
+
+.btn-success:hover {
+  background: #198044;
+  border-color: #198044;
+  color: #FFFFFF;
+  transform: translateY(-1px);
 }
 
 .btn-sm {
   padding: 6px 12px;
+  font-size: 0.78rem;
   margin: 0 2px;
 }
 
-.form-control {
-  border-radius: 8px;
-  border: 2px solid var(--border-color);
-  padding: 12px;
-  transition: all 0.3s ease;
-  font-size: 1rem;
+/* ------------------------- Forms ------------------------- */
+.form-control,
+.form-select {
+  font-family: 'Montserrat', sans-serif;
+  border-radius: 6px;
+  border: 1px solid var(--border-color);
+  padding: 10px 12px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  font-size: 0.95rem;
+  color: var(--brand-dark);
+  background-color: #FFFFFF;
 }
 
-.form-control:focus {
-  border-color: var(--primary-color);
-  box-shadow: 0 0 0 3px rgba(243, 174, 62, 0.1);
+.form-control:focus,
+.form-select:focus {
+  border-color: var(--brand-dark);
+  box-shadow: 0 0 0 3px rgba(255, 203, 5, 0.25);
+  outline: none;
 }
 
 .form-label {
+  font-family: 'Montserrat', sans-serif;
   font-weight: 600;
-  color: var(--text-dark);
-  margin-bottom: 8px;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  color: var(--text-dark);
-  font-weight: 700;
-  margin-bottom: 1rem;
-}
-
-h2 {
-  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: white;
-  background-clip: text;
-  font-size: 2.5rem;
-  text-align: center;
-  margin-bottom: 2rem;
-}
-
-.alert {
-  border-radius: 12px;
-  border: none;
-  padding: 1rem;
-  margin-bottom: 1.5rem;
+  font-size: 0.85rem;
+  color: var(--brand-dark);
+  margin-bottom: 0.4rem;
+  letter-spacing: 0.01em;
 }
 
+/* ------------------------- Cards ------------------------- */
 .card {
-  border-radius: 16px;
-  border: none;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
   box-shadow: var(--shadow);
-  transition: all 0.3s ease;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  background: #FFFFFF;
 }
 
 .card:hover {
-  transform: translateY(-4px);
+  transform: translateY(-2px);
   box-shadow: var(--shadow-lg);
 }
 
-.badge {
-  border-radius: 20px;
-  padding: 6px 12px;
-  font-weight: 500;
-  font-size: 0.75rem;
+/* Yellow leading icon on card section titles (h5 / h6 inside .card-header).
+   Excludes modal headers (which are black with white text) and admin tabs. */
+.card-header:not(.card-header-tabs):not(.modal-header) h5 > i.fas:first-child,
+.card-header:not(.card-header-tabs):not(.modal-header) h6 > i.fas:first-child,
+.card-header h5 > i.fas:first-child,
+.card-header h6 > i.fas:first-child {
+  color: var(--brand-yellow);
+  filter: drop-shadow(0 1px 0 rgba(26, 26, 26, 0.06));
 }
 
-.text-muted {
-  color: var(--text-light) !important;
+/* Modal headers keep white icons (dark background). */
+.modal-header h5 > i.fas:first-child,
+.modal-header h6 > i.fas:first-child {
+  color: #FFFFFF;
+  filter: none;
 }
 
-@media (max-width: 768px) {
-  .container {
-    margin: 1rem;
-    padding: 1rem;
-    border-radius: 16px;
-  }
-  
-  h2 {
-    font-size: 2rem;
-  }
-  
-  .table-responsive {
-    border-radius: 12px;
-  }
+/* Short yellow accent line under card section titles —
+   tiny rhythm element pulled from the template's "01" chapter marker. */
+.card-header h5,
+.card-header h6 {
+  position: relative;
+  padding-bottom: 0.45rem;
 }
 
-/* Microsoft Authentication Branding */
-.btn-microsoft {
-  background-color: var(--ms-blue);
-  border-color: var(--ms-blue);
-  color: white;
-  font-weight: 500;
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  transition: all 0.3s ease;
+.card-header h5::after,
+.card-header h6::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 28px;
+  height: 3px;
+  background: var(--brand-yellow);
+  border-radius: 2px;
+}
+
+/* The accent line doesn't belong on modal headers, the tab-bar header,
+   or any header that is itself a tab-strip. */
+.modal-header h5::after,
+.modal-header h6::after,
+.card-header.bg-white > .nav-tabs ~ h6::after,
+.card-header h5.modal-title::after,
+.card-header h6.modal-title::after {
+  display: none;
+}
+
+/* ------------------------- Stat tile (template-inspired) -------------------------
+   White card with a thick yellow strip on the left, big near-black number,
+   uppercase mid-grey label. Replaces the old orange gradient stat-card. */
+.stat-tile {
+  position: relative;
+  background: #FFFFFF;
+  border-radius: 10px;
+  padding: 1.1rem 1.1rem 1.1rem 1.6rem;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow);
   display: flex;
   align-items: center;
-  justify-content: center;
+  gap: 0.85rem;
+  min-height: 96px;
+  overflow: hidden;
 }
 
-.btn-microsoft:hover {
-  background-color: var(--ms-blue-dark);
-  border-color: var(--ms-blue-dark);
-  color: white;
-  transform: translateY(-1px);
-  box-shadow: 0 4px 8px rgba(243, 174, 62, 0.3);
-}
-
-.btn-microsoft:focus {
-  background-color: var(--ms-blue-dark);
-  border-color: var(--ms-blue-dark);
-  color: white;
-  box-shadow: 0 0 0 3px rgba(243, 174, 62, 0.2);
-}
-
-.btn-microsoft:active {
-  background-color: var(--ms-blue-dark);
-  border-color: var(--ms-blue-dark);
-  color: white;
-  transform: translateY(0);
-}
-
-/* Microsoft Login Divider */
-.auth-divider {
-  position: relative;
-  text-align: center;
-  margin: 1.5rem 0;
-}
-
-.auth-divider::before {
-  content: '';
+.stat-tile::before {
+  content: "";
   position: absolute;
-  top: 50%;
+  top: 0;
   left: 0;
-  right: 0;
-  height: 1px;
-  background-color: var(--border-color);
+  bottom: 0;
+  width: 8px;
+  background: var(--brand-yellow);
 }
 
-.auth-divider-text {
-  background-color: white;
-  padding: 0 1rem;
-  color: var(--text-light);
-  font-size: 0.9rem;
-  position: relative;
-  z-index: 1;
+.stat-tile .stat-tile-icon {
+  font-size: 1.6rem;
+  color: var(--brand-yellow);
+  flex-shrink: 0;
+  filter: drop-shadow(0 1px 0 rgba(26, 26, 26, 0.06));
 }
 
-/* Admin/Local Auth Section Styling */
-.local-auth-section {
-  border-top: 1px solid var(--border-color);
-  padding-top: 1.5rem;
-  margin-top: 1.5rem;
+.stat-tile .stat-tile-value {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 1.6rem;
+  font-weight: 800;
+  color: var(--brand-dark);
+  line-height: 1.1;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
-.local-auth-section .form-label {
-  color: var(--ms-gray);
+.stat-tile .stat-tile-label {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--brand-grey);
+  margin: 0;
+  line-height: 1.2;
 }
 
-.local-auth-section .btn-primary {
-  background: linear-gradient(135deg, var(--ms-gray), #4a4a4a);
-  border-color: var(--ms-gray);
+/* ------------------------- Badges ------------------------- */
+.badge {
+  font-family: 'Montserrat', sans-serif;
+  border-radius: 4px;
+  padding: 5px 10px;
+  font-weight: 600;
+  font-size: 0.7rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
 
-/* Modal Centering and Positioning Fixes */
+.bg-warning { background-color: var(--brand-yellow) !important; color: var(--brand-dark) !important; }
+.bg-primary { background-color: var(--brand-dark) !important; color: #FFFFFF !important; }
+.bg-danger  { background-color: var(--brand-orange) !important; color: #FFFFFF !important; }
+
+.text-muted {
+  color: var(--brand-grey) !important;
+}
+
+/* ------------------------- Alerts ------------------------- */
+.alert {
+  border-radius: 8px;
+  border: 1px solid var(--border-color);
+  padding: 0.9rem 1rem;
+  margin-bottom: 1.25rem;
+  font-size: 0.92rem;
+}
+
+.alert-danger  { background: #FEEFE5; border-color: #FFCAA8; color: #8A2E00; }
+.alert-success { background: #E8F5EE; border-color: #B7DDC5; color: #155724; }
+.alert-warning { background: var(--brand-yellow-soft); border-color: var(--brand-yellow); color: var(--brand-dark); }
+.alert-info    { background: #EEF6FB; border-color: #C9E1ED; color: #0C4A6E; }
+
+/* ------------------------- Modals ------------------------- */
 .modal {
   padding: 0 !important;
 }
@@ -361,28 +499,30 @@ h2 {
 }
 
 .modal-content {
-  border-radius: 16px;
-  border: none;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
   box-shadow: var(--shadow-lg);
   width: 100%;
   position: relative;
 }
 
 .modal-header {
-  border-radius: 16px 16px 0 0;
-  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-  color: white;
+  border-radius: 12px 12px 0 0;
+  background: var(--brand-dark);
+  color: #FFFFFF;
   border-bottom: none;
-  padding: 1.25rem 1.5rem;
+  padding: 1.1rem 1.5rem;
 }
 
 .modal-title {
-  font-weight: 600;
-  font-size: 1.25rem;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
+  font-size: 1.1rem;
+  color: #FFFFFF;
 }
 
 .modal-header .btn-close {
-  filter: invert(1);
+  filter: invert(1) grayscale(100%) brightness(200%);
   opacity: 0.8;
 }
 
@@ -398,52 +538,133 @@ h2 {
 
 .modal-footer {
   border-top: 1px solid var(--border-color);
-  border-radius: 0 0 16px 16px;
+  border-radius: 0 0 12px 12px;
   padding: 1rem 1.5rem;
 }
 
-/* Ensure modals are centered on smaller screens */
 @media (max-width: 768px) {
   .modal-dialog {
     margin: 1rem;
     max-width: calc(100% - 2rem);
     min-height: calc(100vh - 2rem);
   }
-  
+
   .modal-body {
     max-height: 60vh;
     padding: 1rem;
   }
+
+  .container {
+    margin: 1rem auto;
+    padding: 1rem;
+    border-radius: 12px;
+  }
+
+  .page-title { font-size: 1.5rem; }
+
+  .table-responsive { border-radius: 12px; }
 }
 
-/* Ensure modal backdrop doesn't interfere */
 .modal-backdrop {
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(26, 26, 26, 0.5);
 }
 
-/* Fix page title readability */
-.container h2 {
-  -webkit-text-fill-color: var(--text-dark);
-  color: var(--text-dark);
+/* ------------------------- Microsoft / SSO button ------------------------- */
+.btn-microsoft {
+  background-color: var(--brand-orange);
+  border-color: var(--brand-orange);
+  color: #FFFFFF;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 600;
+  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-/* Star rating styles */
+.btn-microsoft:hover {
+  background-color: var(--ms-blue-dark);
+  border-color: var(--ms-blue-dark);
+  color: #FFFFFF;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(255, 92, 0, 0.3);
+}
+
+.btn-microsoft:focus,
+.btn-microsoft:active {
+  background-color: var(--ms-blue-dark) !important;
+  border-color: var(--ms-blue-dark) !important;
+  color: #FFFFFF !important;
+  box-shadow: 0 0 0 3px rgba(255, 92, 0, 0.25) !important;
+  transform: translateY(0);
+}
+
+/* Auth-page divider ("or") */
+.auth-divider {
+  position: relative;
+  text-align: center;
+  margin: 1.5rem 0;
+}
+
+.auth-divider::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  right: 0;
+  height: 1px;
+  background-color: var(--border-color);
+}
+
+.auth-divider-text {
+  background-color: #FFFFFF;
+  padding: 0 1rem;
+  color: var(--brand-grey);
+  font-size: 0.85rem;
+  position: relative;
+  z-index: 1;
+}
+
+.local-auth-section {
+  border-top: 1px solid var(--border-color);
+  padding-top: 1.5rem;
+  margin-top: 1.5rem;
+}
+
+.local-auth-section .form-label {
+  color: var(--brand-grey);
+}
+
+.local-auth-section .btn-primary {
+  background: var(--brand-dark);
+  border-color: var(--brand-dark);
+  color: #FFFFFF;
+}
+
+.local-auth-section .btn-primary:hover {
+  background: #000000;
+  border-color: #000000;
+  color: #FFFFFF;
+}
+
+/* ------------------------- Star rating ------------------------- */
 .star-interactive, .star-clickable {
   cursor: pointer;
   font-size: 1.3rem;
-  transition: color 0.2s, transform 0.2s;
-  color: #dee2e6;
+  transition: color 0.15s, transform 0.15s;
+  color: var(--border-color);
 }
 
 .star-interactive:hover, .star-clickable:hover {
-  transform: scale(1.2);
+  transform: scale(1.15);
 }
 
 .star-rating-edit {
   padding: 8px 0;
 }
 
-/* Discipline badge */
+/* Discipline badge — kept distinct */
 .bg-purple {
   background-color: #6f42c1 !important;
-}   
\ No newline at end of file
+  color: #FFFFFF !important;
+}
diff --git a/templates/admin/dashboard.html b/templates/admin/dashboard.html
index 2346208..1b29b4f 100644
--- a/templates/admin/dashboard.html
+++ b/templates/admin/dashboard.html
@@ -9,8 +9,8 @@
     <div class="col-12">
       <div class="d-flex justify-content-between align-items-center">
         <div>
-          <h2><i class="fas fa-users-cog me-3"></i>Admin Dashboard</h2>
-          <p class="text-muted mb-0">Manage users and AI agents across the system</p>
+          <h2 class="page-title">Admin Dashboard</h2>
+          <p class="page-subtitle">Manage users and AI agents across the system</p>
         </div>
         <div class="d-flex gap-2">
           <button class="btn btn-outline-primary" id="refreshBtn">
@@ -73,56 +73,56 @@
   <!-- Statistics Cards -->
   <div class="row mb-4 align-items-stretch">
     <div class="col-lg-2 col-md-4 mb-3 d-flex">
-      <div class="stat-card w-100">
-        <div class="stat-icon"><i class="fas fa-users"></i></div>
-        <div class="stat-info">
-          <h3 id="totalUsers">0</h3>
-          <p>Total Users</p>
+      <div class="stat-tile w-100">
+        <div class="stat-tile-icon"><i class="fas fa-users"></i></div>
+        <div>
+          <h3 id="totalUsers" class="stat-tile-value">0</h3>
+          <p class="stat-tile-label">Total Users</p>
         </div>
       </div>
     </div>
     <div class="col-lg-2 col-md-4 mb-3 d-flex">
-      <div class="stat-card agent-card w-100">
-        <div class="stat-icon"><i class="fas fa-robot"></i></div>
-        <div class="stat-info">
-          <h3 id="totalAgents">0</h3>
-          <p>Total Agents</p>
+      <div class="stat-tile w-100">
+        <div class="stat-tile-icon"><i class="fas fa-robot"></i></div>
+        <div>
+          <h3 id="totalAgents" class="stat-tile-value">0</h3>
+          <p class="stat-tile-label">Total Agents</p>
         </div>
       </div>
     </div>
     <div class="col-lg-2 col-md-4 mb-3 d-flex">
-      <div class="stat-card w-100">
-        <div class="stat-icon"><i class="fas fa-envelope"></i></div>
-        <div class="stat-info">
-          <h3 id="totalMessages">0</h3>
-          <p>Total Messages</p>
+      <div class="stat-tile w-100">
+        <div class="stat-tile-icon"><i class="fas fa-envelope"></i></div>
+        <div>
+          <h3 id="totalMessages" class="stat-tile-value">0</h3>
+          <p class="stat-tile-label">Total Messages</p>
         </div>
       </div>
     </div>
     <div class="col-lg-2 col-md-4 mb-3 d-flex">
-      <div class="stat-card w-100">
-        <div class="stat-icon"><i class="fas fa-coins"></i></div>
-        <div class="stat-info">
-          <h3 id="totalTokens">0</h3>
-          <p>Total Tokens</p>
+      <div class="stat-tile w-100">
+        <div class="stat-tile-icon"><i class="fas fa-coins"></i></div>
+        <div>
+          <h3 id="totalTokens" class="stat-tile-value">0</h3>
+          <p class="stat-tile-label">Total Tokens</p>
         </div>
       </div>
     </div>
     <div class="col-lg-2 col-md-4 mb-3 d-flex">
-      <div class="stat-card w-100">
-        <div class="stat-icon"><i class="fas fa-comments"></i></div>
-        <div class="stat-info">
-          <h3 id="totalConversations">0</h3>
-          <p>Conversations</p>
+      <div class="stat-tile w-100">
+        <div class="stat-tile-icon"><i class="fas fa-comments"></i></div>
+        <div>
+          <h3 id="totalConversations" class="stat-tile-value">0</h3>
+          <p class="stat-tile-label">Conversations</p>
         </div>
       </div>
     </div>
     <div class="col-lg-2 col-md-4 mb-3 d-flex">
-      <div class="stat-card w-100">
-        <div class="stat-icon"><i class="fas fa-user-friends"></i></div>
-        <div class="stat-info">
-          <h3 id="totalUniqueUsers">0</h3>
-          <p>Agent-User Sessions</p>
+      <div class="stat-tile w-100">
+        <div class="stat-tile-icon"><i class="fas fa-user-friends"></i></div>
+        <div>
+          <h3 id="totalUniqueUsers" class="stat-tile-value">0</h3>
+          <p class="stat-tile-label">Agent-User Sessions</p>
         </div>
       </div>
     </div>
@@ -133,33 +133,43 @@
     <div class="col-12">
       <div class="card shadow-sm border-0">
         <div class="card-header bg-white">
-          <ul class="nav nav-tabs card-header-tabs" id="adminTabs">
-            <li class="nav-item">
-              <a class="nav-link active" id="analytics-tab" data-bs-toggle="tab" href="#analytics">
+          <ul class="nav nav-tabs card-header-tabs" id="adminTabs" role="tablist">
+            <li class="nav-item" role="presentation">
+              <button class="nav-link active" id="analytics-tab" type="button"
+                      data-bs-toggle="tab" data-bs-target="#analytics"
+                      role="tab" aria-controls="analytics" aria-selected="true">
                 <i class="fas fa-chart-line me-2"></i>Analytics
-              </a>
+              </button>
             </li>
-            <li class="nav-item">
-              <a class="nav-link" id="users-tab" data-bs-toggle="tab" href="#users">
+            <li class="nav-item" role="presentation">
+              <button class="nav-link" id="users-tab" type="button"
+                      data-bs-toggle="tab" data-bs-target="#users"
+                      role="tab" aria-controls="users" aria-selected="false">
                 <i class="fas fa-users me-2"></i>Users Management
-              </a>
+              </button>
             </li>
-            <li class="nav-item">
-              <a class="nav-link" id="agents-tab" data-bs-toggle="tab" href="#agents">
+            <li class="nav-item" role="presentation">
+              <button class="nav-link" id="agents-tab" type="button"
+                      data-bs-toggle="tab" data-bs-target="#agents"
+                      role="tab" aria-controls="agents" aria-selected="false">
                 <i class="fas fa-robot me-2"></i>Agents Management
-              </a>
+              </button>
             </li>
-            <li class="nav-item">
-              <a class="nav-link" id="verification-tab" data-bs-toggle="tab" href="#verification">
+            <li class="nav-item" role="presentation">
+              <button class="nav-link" id="verification-tab" type="button"
+                      data-bs-toggle="tab" data-bs-target="#verification"
+                      role="tab" aria-controls="verification" aria-selected="false">
                 <i class="fas fa-check-circle me-2"></i>Verification
                 <span class="badge bg-warning ms-1" id="verificationPendingBadge" style="display:none;">0</span>
-              </a>
+              </button>
             </li>
-            <li class="nav-item">
-              <a class="nav-link" id="audit-tab" data-bs-toggle="tab" href="#audit">
+            <li class="nav-item" role="presentation">
+              <button class="nav-link" id="audit-tab" type="button"
+                      data-bs-toggle="tab" data-bs-target="#audit"
+                      role="tab" aria-controls="audit" aria-selected="false">
                 <i class="fas fa-shield-alt me-2"></i>Prompt Audit
                 <span class="badge bg-danger ms-1" id="auditFlaggedBadge" style="display:none;">0</span>
-              </a>
+              </button>
             </li>
           </ul>
         </div>
@@ -1040,75 +1050,18 @@
 </div>
 
 <style>
-.stat-card {
-  background: linear-gradient(135deg, #f3ae3e 0%, #f3ae3e 100%);
-  border-radius: 16px;
-  padding: 1.25rem;
-  color: white;
-  display: flex;
-  align-items: center;
-  min-height: 90px;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-}
-
-.admin-card {
-  background: linear-gradient(135deg, #f3ae3e 0%, #f3ae3e 100%);
-}
-
-.agent-card {
-  background: linear-gradient(135deg, #f3ae3e 0%, #f3ae3e 100%);
-}
-
-.active-card {
-  background: linear-gradient(135deg, #f3ae3e 0%, #f3ae3e 100%);
-}
-
-.stat-icon {
-  font-size: 2rem;
-  margin-right: 0.75rem;
-  opacity: 0.8;
-  flex-shrink: 0;
-}
-
-.stat-info {
-  min-width: 0;
-}
-
-.stat-info h3 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 700;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.stat-info p {
-  margin: 0;
-  opacity: 0.9;
-  font-size: 0.75rem;
-  white-space: normal;
-  line-height: 1.2;
-}
-
 .user-avatar-sm {
   width: 32px;
   height: 32px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #f3ae3e 0%, #f3ae3e 100%);
-  color: white;
+  border-radius: 4px;
+  background: var(--brand-yellow);
+  color: var(--brand-dark);
   display: flex;
   align-items: center;
   justify-content: center;
+  font-family: 'Montserrat', sans-serif;
   font-size: 0.8rem;
-  font-weight: 600;
-}
-
-.table th {
-  border-top: none;
-  font-weight: 600;
-  color: #2d3748;
-  background-color: #f7fafc;
+  font-weight: 700;
 }
 
 /* Column width adjustments for better visibility - Override Bootstrap with higher specificity */
@@ -1191,31 +1144,54 @@
 }
 
 .table-hover tbody tr:hover {
-  background-color: rgba(243, 174, 62, 0.05);
+  background-color: var(--brand-off-white);
 }
 
 .card {
-  border-radius: 16px;
-  border: none;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  box-shadow: var(--shadow);
 }
 
 .card-header {
-  background: rgba(243, 174, 62, 0.05);
-  border-bottom: 1px solid #e2e8f0;
-  border-radius: 16px 16px 0 0 !important;
+  background: #FFFFFF;
+  border-bottom: 1px solid var(--border-color);
+  border-radius: 12px 12px 0 0 !important;
+  padding: 0;
+}
+
+.card-header-tabs {
+  margin: 0 !important;
+}
+
+.nav-tabs {
+  border-bottom: none;
+  padding: 0 0.5rem;
 }
 
 .nav-tabs .nav-link {
+  background: transparent;
   border: none;
-  color: #64748b;
-  padding: 12px 20px;
+  color: var(--brand-grey);
+  padding: 14px 18px;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 600;
+  font-size: 0.85rem;
+  letter-spacing: 0.02em;
+  border-bottom: 3px solid transparent;
+  border-radius: 0;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+
+.nav-tabs .nav-link:hover {
+  color: var(--brand-dark);
+  border-bottom-color: var(--brand-yellow-soft);
 }
 
 .nav-tabs .nav-link.active {
   background-color: transparent;
-  border-bottom: 2px solid #f3ae3e;
-  color: #f3ae3e;
+  border-bottom: 3px solid var(--brand-yellow);
+  color: var(--brand-dark);
 }
 
 .status-Active { background-color: #d4edda; color: #155724; }
@@ -1241,33 +1217,30 @@
 .rank-badge {
   width: 26px;
   height: 26px;
-  border-radius: 50%;
+  border-radius: 4px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  font-family: 'Montserrat', sans-serif;
   font-weight: 700;
   font-size: 0.75rem;
-  color: #fff;
-  background: linear-gradient(135deg, #f3ae3e 0%, #e8983e 100%);
+  color: var(--brand-dark);
+  background: var(--brand-yellow);
 }
 
 @media (max-width: 768px) {
-  .stat-card {
-    text-align: center;
+  .stat-tile {
     flex-direction: column;
+    text-align: center;
+    padding: 0.9rem 0.9rem 0.9rem 1.2rem;
   }
 
-  .stat-icon {
-    margin-right: 0;
-    margin-bottom: 0.5rem;
+  .stat-tile .stat-tile-icon {
+    margin-bottom: 0.35rem;
   }
 
-  .stat-info h3 {
-    font-size: 1.2rem;
-  }
-
-  .stat-info p {
-    font-size: 0.75rem;
+  .stat-tile .stat-tile-value {
+    font-size: 1.25rem;
   }
 
   .table-responsive {
@@ -2142,7 +2115,7 @@ const STATUS_COLORS = {
 };
 
 const DISCIPLINE_COLORS = [
-  '#f3ae3e', '#4e79a7', '#59a14f', '#e15759', '#76b7b2', '#edc949', '#af7aa1'
+  '#FFCB05', '#1A1A1A', '#FF5C00', '#4e79a7', '#59a14f', '#af7aa1', '#76b7b2'
 ];
 
 async function loadAnalytics() {
@@ -2201,8 +2174,8 @@ function renderUsageTimeline(timeline) {
   const datasets = [{
     label: 'Messages',
     data: messages,
-    borderColor: '#4e79a7',
-    backgroundColor: 'rgba(78,121,167,0.1)',
+    borderColor: '#1A1A1A',
+    backgroundColor: 'rgba(26,26,26,0.08)',
     fill: true,
     tension: 0.3,
     yAxisID: 'y'
@@ -2217,8 +2190,8 @@ function renderUsageTimeline(timeline) {
     datasets.push({
       label: 'Tokens',
       data: tokens,
-      borderColor: '#f3ae3e',
-      backgroundColor: 'rgba(243,174,62,0.1)',
+      borderColor: '#FFCB05',
+      backgroundColor: 'rgba(255,203,5,0.18)',
       fill: true,
       tension: 0.3,
       yAxisID: 'y1'
@@ -2256,7 +2229,7 @@ function renderTokenBreakdown(prompt, completion) {
     type: 'doughnut',
     data: {
       labels: ['Prompt (Input)', 'Completion (Output)'],
-      datasets: [{ data: [prompt, completion], backgroundColor: ['#4e79a7', '#f3ae3e'] }]
+      datasets: [{ data: [prompt, completion], backgroundColor: ['#1A1A1A', '#FFCB05'] }]
     },
     options: {
       responsive: true,
@@ -2346,8 +2319,8 @@ function renderRatingDistribution(ratingData) {
       datasets: [{
         label: 'Agents',
         data: values,
-        backgroundColor: '#f3ae3e',
-        borderRadius: 6
+        backgroundColor: '#FFCB05',
+        borderRadius: 4
       }]
     },
     options: {
diff --git a/templates/agent_management.html b/templates/agent_management.html
index ff22f50..f852cb1 100644
--- a/templates/agent_management.html
+++ b/templates/agent_management.html
@@ -8,7 +8,7 @@
     <div class="col-12">
       <div class="d-flex justify-content-between align-items-center mb-4">
         <div>
-          <h2><i class="fas {{ 'fa-globe' if current_view == 'all' else 'fa-robot' }} me-3"></i>{{ page_title }}</h2>
+          <h2 class="page-title">{{ page_title }}</h2>
           <p class="text-muted mb-0">{{ page_description }}</p>
         </div>
         <div class="d-flex gap-2">
@@ -557,24 +557,26 @@
 .agent-icon {
   width: 50px;
   height: 50px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, #f3ae3e 0%, #f3ae3e 100%);
+  border-radius: 6px;
+  background: var(--brand-yellow);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
+  color: var(--brand-dark);
   font-size: 1.5rem;
 }
 
 .agent-avatar {
   width: 35px;
   height: 35px;
-  border-radius: 8px;
-  background: linear-gradient(135deg, #f3ae3e 0%, #f3ae3e 100%);
+  border-radius: 4px;
+  background: var(--brand-yellow);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
+  color: var(--brand-dark);
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 700;
   font-size: 1rem;
 }
 
diff --git a/templates/agent_register.html b/templates/agent_register.html
index 3075e4d..8783fa5 100644
--- a/templates/agent_register.html
+++ b/templates/agent_register.html
@@ -13,13 +13,13 @@
 {% block style %}
 <style>
   :root {
-    --reg-primary:      #f3ae3e;
-    --reg-primary-dark: #d4922a;
-    --reg-primary-light:#fff8ec;
-    --reg-text-dark:    #1e293b;
-    --reg-text-muted:   #64748b;
-    --reg-border:       #e2e8f0;
-    --reg-bg-light:     #f8fafc;
+    --reg-primary:      #FFCB05;
+    --reg-primary-dark: #F2BE00;
+    --reg-primary-light:#FFF5C4;
+    --reg-text-dark:    #1A1A1A;
+    --reg-text-muted:   #626262;
+    --reg-border:       #DEE2E5;
+    --reg-bg-light:     #F6F7F7;
   }
 
   .reg-page { padding: 2rem 0 4rem; }
@@ -28,10 +28,10 @@
     box-shadow: 0 20px 60px rgba(0,0,0,.15);
   }
   .reg-page .agent-icon {
-    width: 80px; height: 80px; border-radius: 50%; background: var(--reg-primary);
+    width: 80px; height: 80px; border-radius: 8px; background: var(--reg-primary);
     display: flex; align-items: center; justify-content: center;
-    margin: 0 auto; font-size: 2rem; color: white;
-    box-shadow: 0 8px 20px rgba(243,174,62,.4);
+    margin: 0 auto; font-size: 2rem; color: var(--reg-text-dark);
+    box-shadow: 0 8px 20px rgba(255,203,5,.3);
   }
 
   .reg-page .section-header {
diff --git a/templates/base.html b/templates/base.html
index 3b55be6..b828cc5 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -11,7 +11,7 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     
     <!-- Google Fonts -->
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     
     <!-- Font Awesome -->
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
diff --git a/templates/index.html b/templates/index.html
index d796a7c..1f01a1f 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -66,16 +66,24 @@
 
 .welcome-section {
   padding: 4rem 2rem;
-  border-radius: 20px;
-  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
-  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 12px;
+  background: var(--brand-off-white);
+  border: 1px solid var(--border-color);
 }
 
 .display-4 {
-  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
+  display: inline-block;
+  font-family: 'Montserrat', sans-serif;
+  font-weight: 800;
+  color: var(--brand-dark);
+  padding: 0.15rem 0.6rem;
+  background: linear-gradient(
+    to top,
+    var(--brand-yellow) 0,
+    var(--brand-yellow) 70%,
+    transparent 70%,
+    transparent 100%
+  );
 }
 </style>
 {% endblock %}
diff --git a/templates/login.html b/templates/login.html
index 0d7aadc..69c7b0d 100644
--- a/templates/login.html
+++ b/templates/login.html
@@ -112,14 +112,14 @@
 .login-icon {
   width: 80px;
   height: 80px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  border-radius: 8px;
+  background: var(--brand-yellow);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   font-size: 2rem;
-  color: white;
+  color: var(--brand-dark);
 }
 
 .password-input-group {
diff --git a/templates/nav.html b/templates/nav.html
index fc42cde..c8bfd95 100644
--- a/templates/nav.html
+++ b/templates/nav.html
@@ -1,7 +1,7 @@
-<nav class="navbar navbar-expand-lg" style="z-index: 1100;">
+<nav class="navbar navbar-expand-lg">
   <div class="container-fluid">
     <a class="navbar-brand d-flex align-items-center" href="{{ base_path }}/">
-      <i class="fas fa-users-cog me-2"></i>
+      <span class="brand-mark" aria-hidden="true"></span>
       <span>AgentHub</span>
     </a>
 
@@ -110,20 +110,22 @@
 
 <style>
   .user-avatar {
-    width: 28px;
-    height: 28px;
-    border-radius: 50%;
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+    width: 30px;
+    height: 30px;
+    border-radius: 4px;
+    background: var(--brand-yellow);
     display: flex;
     align-items: center;
     justify-content: center;
-    color: white;
-    font-size: 0.75rem;
+    color: var(--brand-dark);
+    font-family: 'Montserrat', sans-serif;
+    font-size: 0.8rem;
+    font-weight: 700;
   }
 
   .dropdown-menu {
-    border-radius: 12px;
-    border: none;
+    border-radius: 8px;
+    border: 1px solid var(--border-color);
     box-shadow: var(--shadow-lg);
     padding: 0.5rem 0;
     margin-top: 0.5rem;
@@ -133,14 +135,35 @@
 
   .dropdown-item {
     padding: 0.5rem 1rem;
-    transition: all 0.3s ease;
-    border-radius: 8px;
-    margin: 0 0.5rem;
+    transition: background-color 0.15s ease;
+    border-radius: 4px;
+    margin: 0 0.4rem;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 0.9rem;
+    color: var(--brand-dark);
   }
 
   .dropdown-item:hover {
-    background-color: var(--bg-light);
-    transform: translateX(4px);
+    background-color: var(--brand-yellow-soft);
+    color: var(--brand-dark);
+  }
+
+  .dropdown-item.text-danger {
+    color: var(--brand-orange) !important;
+  }
+
+  .dropdown-item.text-danger:hover {
+    background-color: #FEEFE5;
+    color: var(--brand-orange) !important;
+  }
+
+  .dropdown-header {
+    font-family: 'Montserrat', sans-serif;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--brand-grey);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
   }
 
   .navbar-toggler {
@@ -152,11 +175,6 @@
     box-shadow: none;
   }
 
-  .navbar {
-    position: relative;
-    z-index: 1100 !important;
-  }
-
   .nav-item.dropdown {
     position: relative;
     z-index: 1100;
diff --git a/templates/profile.html b/templates/profile.html
index cef5f19..4b048d8 100644
--- a/templates/profile.html
+++ b/templates/profile.html
@@ -8,8 +8,8 @@
     <div class="col-12">
       <div class="d-flex justify-content-between align-items-center mb-4">
         <div>
-          <h2><i class="fas fa-user me-3"></i>My Profile</h2>
-          <p class="text-muted mb-0">Manage your account information and activity</p>
+          <h2 class="page-title">My Profile</h2>
+          <p class="page-subtitle">Manage your account information and activity</p>
         </div>
       </div>
     </div>
@@ -199,16 +199,16 @@
 .profile-avatar {
   width: 80px;
   height: 80px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  border-radius: 8px;
+  background: var(--brand-yellow);
   display: flex;
   align-items: center;
   justify-content: center;
-  color: white;
+  color: var(--brand-dark);
+  font-family: 'Montserrat', sans-serif;
   font-size: 2rem;
-  font-weight: bold;
-  margin: 0 auto;
-  margin-bottom: 1rem;
+  font-weight: 800;
+  margin: 0 auto 1rem;
 }
 
 .info-item {
diff --git a/templates/register.html b/templates/register.html
index c830b44..fedc685 100644
--- a/templates/register.html
+++ b/templates/register.html
@@ -138,14 +138,14 @@
 .register-icon {
   width: 80px;
   height: 80px;
-  border-radius: 50%;
-  background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+  border-radius: 8px;
+  background: var(--brand-yellow);
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto;
   font-size: 2rem;
-  color: white;
+  color: var(--brand-dark);
 }
 
 .password-input-group {
diff --git a/templates/search.html b/templates/search.html
index 32ac28c..206014b 100644
--- a/templates/search.html
+++ b/templates/search.html
@@ -130,7 +130,7 @@
 
 <style>
 .border-left-primary {
-  border-left: 4px solid #f3ae3e !important;
+  border-left: 4px solid var(--brand-yellow) !important;
 }
 
 .badge-status-active {
diff --git a/templates/user_management.html b/templates/user_management.html
index ae65b28..c7380b0 100644
--- a/templates/user_management.html
+++ b/templates/user_management.html
@@ -8,8 +8,8 @@
     <div class="col-12">
       <div class="d-flex justify-content-between align-items-center mb-4">
         <div>
-          <h2><i class="fas fa-user-cog me-3"></i>Agent Management</h2>
-          <p class="text-muted mb-0">Manage your account settings and profile</p>
+          <h2 class="page-title">Agent Management</h2>
+          <p class="page-subtitle">Manage your account settings and profile</p>
         </div>
         <div>
           <a href="{{ base_path }}/dashboard" class="btn btn-outline-secondary">