diff --git a/src/screens/ConsoleLayout.tsx b/src/screens/ConsoleLayout.tsx
index bb1ed28..ffa3d79 100644
--- a/src/screens/ConsoleLayout.tsx
+++ b/src/screens/ConsoleLayout.tsx
@@ -66,16 +66,16 @@ export function ConsoleLayout() {
                 <>
                   <span
                     className={cn(
-                      'flex items-center justify-center h-7 w-14 rounded-pill transition-colors duration-150',
-                      isActive ? 'bg-sunrise-100 text-sunrise-600' : 'text-faint',
+                      'flex items-center justify-center h-7 w-14 rounded-pill transition-colors duration-150 bottom-nav-icon',
+                      isActive ? 'active' : 'text-faint',
                     )}
                   >
                     <Icon size={20} />
                   </span>
                   <span
                     className={cn(
-                      'text-2xs leading-none transition-colors duration-150',
-                      isActive ? 'font-semibold text-sunrise-600' : 'font-medium text-faint',
+                      'text-2xs leading-none transition-colors duration-150 bottom-nav-text',
+                      isActive ? 'font-semibold active' : 'font-medium text-faint',
                     )}
                   >
                     {t.label}
diff --git a/src/screens/screen.css b/src/screens/screen.css
index 12a32fd..19a0507 100644
--- a/src/screens/screen.css
+++ b/src/screens/screen.css
@@ -17,4 +17,18 @@
 .sidebar-item.active {
     color: var(--nav-item-active);
     background: var(--nav-item-active-bg);
+}
+
+.bottom-nav-icon,
+.bottom-nav-text {
+    color: var(--text-faint); /* fallback */
+}
+
+.bottom-nav-icon.active {
+    color: var(--nav-item-active);
+    background: var(--nav-item-active-bg);
+}
+
+.bottom-nav-text.active {
+    color: var(--nav-item-active);
 }
\ No newline at end of file