Signed-off-by: Matt Bruce <mbrucedogs@gmail.com>

src/components/Navigation/Navigation.tsx

@@ -128,7 +128,7 @@ const Navigation: React.FC = () => {
         
         {/* Player Controls */}
         <div style={{ marginTop: 'auto', padding: '16px' }}>
-          <PlayerControls />
+          <PlayerControls variant="dark" />
         </div>
       </div>
     );
@@ -184,7 +184,7 @@ const Navigation: React.FC = () => {
         
         {/* Player Controls for Mobile */}
         <div style={{ padding: '16px' }}>
-          <PlayerControls />
+          <PlayerControls variant="dark" />
         </div>
       </IonContent>
     </IonMenu>

src/components/common/PlayerControls.tsx

@@ -1,19 +1,20 @@
 import React from 'react';
 import { IonCard, IonCardContent, IonChip, IonIcon } from '@ionic/react';
-import { play, pause, stop } from 'ionicons/icons';
+import { play, pause, stop, settingsOutline, pauseOutline, playOutline, stopOutline } from 'ionicons/icons';
-import { useAppSelector } from '../../redux';
-import { selectIsAdmin, selectPlayerState, selectQueueLength, selectControllerName } from '../../redux';
-import { playerService } from '../../firebase/services';
-import { PlayerState } from '../../types';
 import ActionButton from './ActionButton';
-import { useToast } from '../../hooks/useToast';
+import { useAppSelector } from '../../redux';
+import { selectPlayerState, selectIsAdmin, selectQueueLength, selectControllerName } from '../../redux';
+import { playerService } from '../../firebase/services';
 import { debugLog } from '../../utils/logger';
+import { useToast } from '../../hooks/useToast';
+import { PlayerState } from '../../types';
 
 interface PlayerControlsProps {
   className?: string;
+  variant?: 'light' | 'dark';
 }
 
-const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '' }) => {
+const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '', variant = 'light' }) => {
   const isAdmin = useAppSelector(selectIsAdmin);
   const playerState = useAppSelector(selectPlayerState);
   const queueLength = useAppSelector(selectQueueLength);
@@ -83,6 +84,96 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '' }) => {
     }
   };
 
+  const getStatusText = () => {
+    switch (currentState) {
+      case PlayerState.playing:
+        return 'Currently Playing';
+      case PlayerState.paused:
+        return 'Currently Paused';
+      default:
+        return 'Currently Stopped';
+    }
+  };
+
+  // Dark mode variant
+  if (variant === 'dark') {
+    return (
+      <div className={`bg-black text-white ${className}`}>       
+        {/* Status Text */}
+        <div 
+          className="flex items-center"
+          style={{ padding: '12px 0px' }}
+        >
+          <span style={{ 
+            fontWeight: '600', 
+            fontSize: '16px',
+          }}>
+            {getStatusText()}
+          </span>
+        </div>
+        
+        {/* Control Buttons */}
+        {currentState === PlayerState.playing ? (
+          <div 
+            className="flex items-center cursor-pointer hover:bg-gray-800"
+            style={{ padding: '12px 0px' }}
+            onClick={handlePause}
+          >
+            <IonIcon 
+              icon={pauseOutline} 
+              style={{ 
+                marginRight: '12px',
+                fontSize: '20px'
+              }} 
+            />
+            <span style={{ fontWeight: '500' }}>Pause</span>
+          </div>
+        ) : (
+          <div 
+            className="flex items-center cursor-pointer hover:bg-gray-800"
+            style={{ padding: '12px 0px' }}
+            onClick={handlePlay}
+          >
+            <IonIcon 
+              icon={playOutline} 
+              style={{ 
+                marginRight: '12px',
+                fontSize: '20px'
+              }} 
+            />
+            <span style={{ fontWeight: '500' }}>Play</span>
+          </div>
+        )}
+        
+        {currentState !== PlayerState.stopped && (
+          <div 
+            className="flex items-center cursor-pointer hover:bg-gray-800"
+            style={{ padding: '12px 0px' }}
+            onClick={handleStop}
+          >
+            <IonIcon 
+              icon={stopOutline} 
+              style={{ 
+                marginRight: '12px',
+                fontSize: '20px'
+              }} 
+            />
+            <span style={{ fontWeight: '500' }}>Stop</span>
+          </div>
+        )}
+        
+        {!hasSongsInQueue && (
+          <div style={{ 
+            padding: '12px 0px',
+            marginLeft: '32px' // Align with text after icon
+          }} className="text-xs text-gray-400">
+            Add songs to queue to enable playback controls
+          </div>
+        )}
+      </div>
+    );
+  }
+
   return (
     <IonCard className={className}>
       <IonCardContent>