diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
index 1515812..f6bd051 100644
--- a/.firebase/hosting.ZGlzdA.cache
+++ b/.firebase/hosting.ZGlzdA.cache
@@ -1,11 +1,11 @@
 vite.svg,499162500000,699a02e0e68a579f687d364bbbe7633161244f35af068220aee37b1b33dfb3c7
-index.html,1752951605613,3b193e76d96e2e703454d5fc53b1954151ddd57f6538ba62fdcbece720b6dd61
-assets/swipe-back-DMtim9hn.js,1752951605613,71353f9332d9e973fac6d43a2f028817d120295deff524e1e1807fa8d2049477
-assets/status-tap-WuGNn0YA.js,1752951605613,777d7cabd00c9519602ec5e3dcb2bd757a370a43ffd52d7d51ce4a886195ed29
-assets/md.transition-ClxjfWXF.js,1752951605613,a739784f987dc1fb17597abc73ca83ee9116ae3e6aab9893539370da414efbe2
-assets/input-shims-BPveaFSt.js,1752951605613,d3a570cd052e230f87c5c0902f68af08eb6c5920b8bf896d70101bccc4abccbb
-assets/ios.transition-BENZxPNL.js,1752951605613,bf5fb0825a54f61164be113cf6d3f33be57615cddc76b75742cc28385d6332f8
-assets/index7-1SPNlktY.js,1752951605613,238893fbf39dbf781502b1829d7e0d77baa505b5d0f918e73bb94e1dccee0fcc
-assets/focus-visible-supuXXMI.js,1752951605613,df9266429356671847fa2c8123e1564bae645f75df3094f0055c365fa2beae28
-assets/index-DPys672b.css,1752951605613,c9c7d948a7ceefaff59d2530320f6139094e045985c18a068675d4fb76a70b7f
-assets/index-CtEACmTC.js,1752951605614,3ccf47f5377df1aa3ec9069325bb5eddaf8eda45bbda0bf692f67a946f3a4489
+index.html,1753035405872,3c6158b71f45d6e999fa49b429eac62310b4fbbc3a5d610313ab240eb484f92a
+assets/swipe-back-CGSdR0aI.js,1753035405872,517c817b67e87bb2d8be7273e40d76dc6046afddee62757c5a30ecaa4dc6e985
+assets/status-tap-CLf1Wfnc.js,1753035405872,74cfde934919ae1a235d219096b646fec1fc240688d58b039cecd11f6fe9de97
+assets/md.transition-BcHE0Hfy.js,1753035405872,957736badb3da354a52c022261dbce86539188b7de89f5b9761e478aa79b1512
+assets/input-shims-DNsJ2SsM.js,1753035405872,0c88fd6b629bc2dc618613c3b0dea275eebe9ff9a54f0e550519b71e2f87e889
+assets/index7-CvVnXkg4.js,1753035405872,bc175c80e2f773729b6b034071fad7830f0cde004d184285cd8c29722271b66f
+assets/ios.transition-C4vHCq5E.js,1753035405872,614a85d6eb6c5f73c8024c65bab5e008c271a6e77817519d0035cadc2652e8f5
+assets/focus-visible-supuXXMI.js,1753035405872,df9266429356671847fa2c8123e1564bae645f75df3094f0055c365fa2beae28
+assets/index-CzY-nILz.css,1753035405872,c68362f490f176fbe950e6cc313da199ed6e08c67058d82b833a2026a0be75c9
+assets/index-BijPmtNu.js,1753035405873,9729127c742119efd72ff5f7f4628f939053ad2f25abe6b78e74801e8e599326
diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
index 907be27..c6a07ad 100644
--- a/src/components/Navigation/Navigation.tsx
+++ b/src/components/Navigation/Navigation.tsx
@@ -98,9 +98,9 @@ const Navigation: React.FC = () => {
                 alignItems: 'center',
                 padding: '12px 16px',
                 cursor: 'pointer',
-                backgroundColor: location.pathname === item.path ? 'var(--ion-color-primary-tint)' : 'transparent',
-                color: location.pathname === item.path ? 'var(--ion-color-primary)' : 'var(--ion-text-color)',
-                borderRight: location.pathname === item.path ? '2px solid var(--ion-color-primary)' : 'none',
+                backgroundColor: location.pathname === item.path ? 'var(--ion-color-primary)' : 'transparent',
+                color: location.pathname === item.path ? 'white' : 'var(--ion-text-color)',
+                borderRight: location.pathname === item.path ? '2px solid var(--ion-color-primary-shade)' : 'none',
                 transition: 'background-color 0.2s, color 0.2s'
               }}
               onMouseEnter={(e) => {
@@ -175,8 +175,24 @@ const Navigation: React.FC = () => {
               button
               onClick={() => handleNavigation(item.path)}
               className={location.pathname === item.path ? 'ion-activated' : ''}
+              style={{
+                '--color': location.pathname === item.path ? 'white' : 'var(--ion-text-color)',
+                '--color-activated': 'white',
+                '--color-focused': 'white',
+                '--color-hover': location.pathname === item.path ? 'white' : 'var(--ion-color-primary)',
+                '--background': location.pathname === item.path ? 'var(--ion-color-primary)' : 'transparent',
+                '--background-activated': 'var(--ion-color-primary-shade)',
+                '--background-focused': 'var(--ion-color-primary-shade)',
+                '--background-hover': location.pathname === item.path ? 'var(--ion-color-primary-shade)' : 'var(--ion-color-light)'
+              } as React.CSSProperties}
             >
-              <IonIcon icon={item.icon} slot="start" />
+              <IonIcon 
+                icon={item.icon} 
+                slot="start" 
+                style={{
+                  color: location.pathname === item.path ? 'white' : 'var(--ion-text-color)'
+                }}
+              />
               <IonLabel>{item.label}</IonLabel>
             </IonItem>
           ))}
diff --git a/src/features/Queue/Queue.tsx b/src/features/Queue/Queue.tsx
index bdec8f8..7072b89 100644
--- a/src/features/Queue/Queue.tsx
+++ b/src/features/Queue/Queue.tsx
@@ -1,10 +1,10 @@
 import React, { useState, useEffect } from 'react';
 import { IonItem, IonLabel, IonItemSliding, IonItemOptions, IonItemOption, IonButton, IonIcon, IonReorderGroup, IonReorder } from '@ionic/react';
-import { trash, reorderThreeOutline, reorderTwoOutline } from 'ionicons/icons';
+import { trash, reorderThreeOutline, reorderTwoOutline, list } from 'ionicons/icons';
 import { useQueue } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectQueueLength, selectPlayerStateMemoized, selectIsAdmin, selectControllerName } from '../../redux';
-import { ActionButton, NumberDisplay } from '../../components/common';
+import { ActionButton, NumberDisplay, EmptyState } from '../../components/common';
 import { SongInfoDisplay } from '../../components/common/SongItem';
 import { queueService } from '../../firebase/services';
 import { debugLog } from '../../utils/logger';
@@ -219,6 +219,17 @@ const Queue: React.FC = () => {
     );
   };
 
+  // Show empty state if no items in queue
+  if (queueItems.length === 0) {
+    return (
+      <EmptyState
+        title="Queue is Empty"
+        message="No songs are currently in the queue. Add some songs to get started!"
+        icon={<IonIcon icon={list} size="large" />}
+      />
+    );
+  }
+
   return (
     <>
       <div className="ion-padding ion-text-end">