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

src/components/Navigation/Navigation.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonIcon } from '@ionic/react';
-import { list, search, heart, add, mic, documentText, time, trophy, people } from 'ionicons/icons';
+import { timeOutline, settingsOutline, listOutline, musicalNotesOutline, peopleOutline, peopleCircleOutline, heartOutline, searchOutline, starOutline } from 'ionicons/icons';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { PlayerControls } from '../common';
 
 const Navigation: React.FC = () => {
   const location = useLocation();
@@ -9,15 +10,16 @@ const Navigation: React.FC = () => {
   const [isLargeScreen, setIsLargeScreen] = useState(false);
 
   const navItems = [
-    { path: '/queue', label: 'Queue', icon: list },
+    { path: '/search', label: 'Search', icon: searchOutline },
-    { path: '/search', label: 'Search', icon: search },
+    { path: '/queue', label: 'Queue', icon: musicalNotesOutline },
-    { path: '/favorites', label: 'Favorites', icon: heart },
+    { path: '/singers', label: 'Singers', icon: peopleCircleOutline },
-    { path: '/new-songs', label: 'New Songs', icon: add },
+    { path: '/artists', label: 'Artists', icon: peopleOutline },
-    { path: '/artists', label: 'Artists', icon: mic },
+    { path: '/top-played', label: 'Top 100 Played', icon: starOutline },
-    { path: '/song-lists', label: 'Song Lists', icon: documentText },
+    { path: '/favorites', label: 'Favorites', icon: heartOutline },
-    { path: '/history', label: 'History', icon: time },
+    { path: '/history', label: 'History', icon: timeOutline },
-    { path: '/top-played', label: 'Top 100', icon: trophy },
+    { path: '/new-songs', label: 'New Songs', icon: listOutline },
-    { path: '/singers', label: 'Singers', icon: people },
+    { path: '/song-lists', label: 'Song Lists', icon: listOutline },
+    { path: '/settings', label: 'Settings', icon: settingsOutline },
   ];
 
   // Check screen size for responsive menu behavior
@@ -103,6 +105,11 @@ const Navigation: React.FC = () => {
             </div>
           ))}
         </nav>
+        
+        {/* Player Controls */}
+        <div style={{ marginTop: 'auto', padding: '16px' }}>
+          <PlayerControls variant="dark" />
+        </div>
       </div>
     );
   }
@@ -138,6 +145,11 @@ const Navigation: React.FC = () => {
             </IonItem>
           ))}
         </IonList>
+        
+        {/* Player Controls for Mobile */}
+        <div style={{ padding: '16px' }}>
+          <PlayerControls variant="dark" />
+        </div>
       </IonContent>
     </IonMenu>
   );

src/components/common/PlayerControls.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IonCard, IonCardContent, IonChip, IonIcon } from '@ionic/react';
-import { play, pause, stop } from 'ionicons/icons';
+import { playOutline, pauseOutline, stopOutline, play, pause, stop } from 'ionicons/icons';
 import ActionButton from './ActionButton';
 import { useAppSelector } from '../../redux';
 import { selectPlayerState, selectIsAdmin, selectQueue } from '../../redux';
@@ -11,9 +11,10 @@ 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 playerState = useAppSelector(selectPlayerState);
   const isAdmin = useAppSelector(selectIsAdmin);
   const controllerName = useAppSelector(selectControllerName);
@@ -83,6 +84,88 @@ 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 style={{ padding: '0px 0px' }}>
+          <h3 className="text-lg font-bold">{getStatusText()}</h3>
+        </div>
+        
+        {/* Control Buttons */}
+        <div>
+          {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: '24px'
+                }} 
+              />
+              <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: '24px'
+                }} 
+              />
+              <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: '24px'
+                }} 
+              />
+              <span style={{ fontWeight: '500' }}>Stop</span>
+            </div>
+          )}
+        </div>
+        
+        {!hasSongsInQueue && (
+          <div style={{ padding: '12px 0px' }} className="text-xs text-gray-400">
+            Add songs to queue to enable playback controls
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  // Light mode variant (original)
   return (
     <IonCard className={className}>
       <IonCardContent>
@@ -100,20 +183,18 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '' }) => {
             <ActionButton
               onClick={handlePause}
               variant="primary"
-              size="lg"
+              size="sm"
             >
-              <IonIcon icon={pause} slot="start" />
+              <IonIcon icon={pause} slot="icon-only" />
-              Pause
             </ActionButton>
           ) : (
             <ActionButton
               onClick={handlePlay}
               variant="primary"
-              size="lg"
+              size="sm"
               disabled={!hasSongsInQueue}
             >
-              <IonIcon icon={play} slot="start" />
+              <IonIcon icon={play} slot="icon-only" />
-              Play
             </ActionButton>
           )}
           
@@ -123,8 +204,7 @@ const PlayerControls: React.FC<PlayerControlsProps> = ({ className = '' }) => {
               variant="danger"
               size="sm"
             >
-              <IonIcon icon={stop} slot="start" />
+              <IonIcon icon={stop} slot="icon-only" />
-              Stop
             </ActionButton>
           )}
         </div>

src/features/Queue/Queue.tsx

@@ -108,12 +108,14 @@ const Queue: React.FC = () => {
         subtitle={`${queueStats.totalSongs} song${queueStats.totalSongs !== 1 ? 's' : ''} in queue`}
       />
 
-      <div className="max-w-4xl mx-auto p-6">
+      {/* Player Controls - Only visible to admin users */}
-        {/* Player Controls - Only visible to admin users */}
+      <div className="max-w-4xl mx-auto p-6 mb-6">
-        <div className="mb-6">
+        <div style={{ paddingLeft: '16px' }}>
-          <PlayerControls />
+          <PlayerControls variant="dark" />
         </div>
+      </div>
 
+      <div className="max-w-4xl mx-auto p-6">
         {/* Queue List */}
         <InfiniteScrollList<QueueItem>
           items={queueItems}