diff --git a/server/templates/base.html b/server/templates/base.html
index 74f702a..633b9a1 100644
--- a/server/templates/base.html
+++ b/server/templates/base.html
@@ -84,7 +84,7 @@
         <nav class="topbar navbar navbar-light bg-white shadow-sm">
             <div class="container-fluid px-3 gap-2">
                 <a class="navbar-brand d-flex d-md-none align-items-center gap-2 text-decoration-none" href="{{ url_for('portal_index') }}">
-                    <span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#1c1c1e;">YARIS-OBD</span>
+                    <span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#fff;">YARIS-OBD</span>
                     <span class="badge bg-warning text-dark ms-1" style="font-size:.6rem;">Remote</span>
                 </a>
                 <div class="d-flex align-items-center gap-2">
diff --git a/static/yaris.css b/static/yaris.css
index 3da1eee..74f4132 100644
--- a/static/yaris.css
+++ b/static/yaris.css
@@ -190,10 +190,10 @@ body {
     left: 0;
     right: 0;
     height: 3.75rem;
-    background: #fff;
-    border-top: 1px solid rgba(0,0,0,.1);
+    background: var(--sidebar-bg);
+    border-top: 1px solid rgba(255,255,255,.1);
     z-index: 1040;
-    box-shadow: 0 -2px 8px rgba(0,0,0,.08);
+    box-shadow: 0 -2px 8px rgba(0,0,0,.3);
 }
 
 .mobile-nav-item {
@@ -203,7 +203,7 @@ body {
     align-items: center;
     justify-content: center;
     gap: .2rem;
-    color: #6c757d;
+    color: rgba(255,255,255,.55);
     text-decoration: none;
     font-size: .6rem;
     font-weight: 500;
@@ -218,17 +218,39 @@ body {
 }
 
 .mobile-nav-item.active {
-    color: var(--primary);
+    color: #fff;
 }
 
 .mobile-nav-item:hover {
-    color: var(--primary);
+    color: rgba(255,255,255,.85);
 }
 
+/* Mobile: dark topbar (no sidebar on mobile, so topbar acts as the header) */
 @media (max-width: 767.98px) {
     #content-wrapper {
         margin-left: 0 !important;
     }
+    .topbar {
+        background: var(--sidebar-bg) !important;
+        border-bottom: 1px solid rgba(255,255,255,.1);
+        color: #fff;
+    }
+    .topbar .navbar-brand,
+    .topbar .text-muted,
+    .topbar .btn-outline-secondary {
+        color: rgba(255,255,255,.85) !important;
+        border-color: rgba(255,255,255,.25);
+    }
+    .topbar .btn-outline-secondary:hover {
+        background: rgba(255,255,255,.1);
+        color: #fff !important;
+    }
+    .topbar .fa-bell { color: rgba(255,255,255,.7) !important; }
+    .topbar .form-select-sm {
+        background-color: rgba(255,255,255,.1);
+        border-color: rgba(255,255,255,.2);
+        color: #fff;
+    }
     .main-content {
         padding-bottom: 7rem;
     }
diff --git a/templates/base.html b/templates/base.html
index 7f577ac..c588a80 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -67,7 +67,7 @@
             <div class="container-fluid px-3 gap-2">
                 {# Mobile: logo on left #}
                 <a class="navbar-brand d-flex d-md-none align-items-center gap-2 text-decoration-none" href="{{ url_for('index') }}">
-                    <span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#1c1c1e;">YARIS-OBD</span>
+                    <span style="font-family:'Racing Sans One','Arial Black',sans-serif;font-size:1.3rem;font-style:italic;color:#fff;">YARIS-OBD</span>
                 </a>
                 <div class="ms-auto d-flex align-items-center gap-2">
                     <div class="dropdown">