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

src/App.tsx

@@ -1,6 +1,5 @@
 import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
 import Layout from './components/Layout/Layout';
-import Navigation from './components/Navigation/Navigation';
 import { Search, Queue, History, Favorites, NewSongs, Artists, Singers, SongLists } from './features';
 import TopPlayed from './features/TopPlayed/Top100';
 import { FirebaseProvider } from './firebase/FirebaseProvider';
@@ -14,7 +13,6 @@ function App() {
         <Router>
           <AuthInitializer>
             <Layout>
-              <Navigation />
               <Routes>
                 <Route path="/" element={<Navigate to="/queue" replace />} />
                 <Route path="/search" element={<Search />} />

src/components/Layout/Layout.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { IonApp, IonHeader, IonToolbar, IonTitle, IonContent, IonFooter, IonChip } from '@ionic/react';
+import { IonApp, IonHeader, IonToolbar, IonTitle, IonContent, IonChip, IonMenuButton } from '@ionic/react';
 import { selectCurrentSinger, selectIsAdmin, selectControllerName } from '../../redux/authSlice';
 import { logout } from '../../redux/authSlice';
 import { ActionButton } from '../common';
+import Navigation from '../Navigation/Navigation';
 import type { LayoutProps } from '../../types';
 
 const Layout: React.FC<LayoutProps> = ({ children }) => {
@@ -11,6 +12,18 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
   const isAdmin = useSelector(selectIsAdmin);
   const controllerName = useSelector(selectControllerName);
   const dispatch = useDispatch();
+  const [isLargeScreen, setIsLargeScreen] = useState(false);
+
+  // Check screen size for responsive layout
+  useEffect(() => {
+    const checkScreenSize = () => {
+      setIsLargeScreen(window.innerWidth >= 768);
+    };
+
+    checkScreenSize();
+    window.addEventListener('resize', checkScreenSize);
+    return () => window.removeEventListener('resize', checkScreenSize);
+  }, []);
 
   const handleLogout = () => {
     dispatch(logout());
@@ -20,8 +33,23 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
 
   return (
     <IonApp>
-      <IonHeader>
+      {/* Navigation - rendered outside header for proper positioning */}
+      <Navigation />
+      
+      {/* Main content wrapper */}
+      <div style={{ 
+        position: 'fixed',
+        left: isLargeScreen ? '256px' : '0',
+        top: 0,
+        right: 0,
+        bottom: 0,
+        zIndex: 1
+      }}>
+        <IonHeader style={{ position: 'relative', zIndex: 2 }}>
           <IonToolbar>
+            {/* Only show hamburger button on mobile */}
+            {!isLargeScreen && <IonMenuButton slot="start" />}
+            
             <IonTitle>
               <div className="flex items-center">
                 <span>🎤 Karaoke App</span>
@@ -56,17 +84,19 @@ const Layout: React.FC<LayoutProps> = ({ children }) => {
           </IonToolbar>
         </IonHeader>
 
-      <IonContent>
+        <IonContent 
+          id="main-content" 
+          className={isLargeScreen ? "ion-padding" : ""}
+          style={{
+            position: 'relative',
+            zIndex: 1,
+            height: 'calc(100vh - 56px)', // Subtract header height
+            overflow: 'hidden' // Prevent main content from scrolling
+          }}
+        >
           {children}
         </IonContent>
-
-      <IonFooter>
-        <IonToolbar>
-          <div className="text-center text-sm text-gray-500">
-            <p>🎵 Powered by Firebase Realtime Database</p>
       </div>
-        </IonToolbar>
-      </IonFooter>
     </IonApp>
   );
 };

src/components/Navigation/Navigation.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
-import { IonTabs, IonTabBar, IonTabButton, IonLabel, IonIcon } from '@ionic/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 { useLocation, useNavigate } from 'react-router-dom';
 
 const Navigation: React.FC = () => {
   const location = useLocation();
   const navigate = useNavigate();
+  const [isLargeScreen, setIsLargeScreen] = useState(false);
 
   const navItems = [
     { path: '/queue', label: 'Queue', icon: list },
@@ -19,62 +20,126 @@ const Navigation: React.FC = () => {
     { path: '/singers', label: 'Singers', icon: people },
   ];
 
-  // For mobile, show bottom tabs with main features
+  // Check screen size for responsive menu behavior
-  const mobileNavItems = [
+  useEffect(() => {
-    { path: '/queue', label: 'Queue', icon: list },
+    const checkScreenSize = () => {
-    { path: '/search', label: 'Search', icon: search },
+      const large = window.innerWidth >= 768;
-    { path: '/favorites', label: 'Favorites', icon: heart },
+      console.log('Screen width:', window.innerWidth, 'Is large screen:', large);
-    { path: '/history', label: 'History', icon: time },
+      setIsLargeScreen(large);
-  ];
+    };
 
-  // Check if we're on mobile (you can adjust this breakpoint)
+    checkScreenSize();
-  const isMobile = window.innerWidth < 768;
+    window.addEventListener('resize', checkScreenSize);
+    return () => window.removeEventListener('resize', checkScreenSize);
+  }, []);
 
-  const currentItems = isMobile ? mobileNavItems : navItems;
+  const handleNavigation = (path: string) => {
-
+    navigate(path);
-  return (
+    // Close menu on mobile after navigation
-    <>
+    if (!isLargeScreen) {
-      {isMobile ? (
+      const menu = document.querySelector('ion-menu');
-        <IonTabs>
+      if (menu) {
-          <IonTabBar slot="bottom">
+        menu.close();
-            {currentItems.map((item) => (
-              <IonTabButton
-                key={item.path}
-                tab={item.path}
-                selected={location.pathname === item.path}
-                onClick={() => navigate(item.path)}
-              >
-                <IonIcon icon={item.icon} />
-                <IonLabel>{item.label}</IonLabel>
-              </IonTabButton>
-            ))}
-          </IonTabBar>
-        </IonTabs>
-      ) : (
-        <nav className="bg-white border-b border-gray-200">
-          <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-            <div className="flex space-x-8">
-              {currentItems.map((item) => (
-                <button
-                  key={item.path}
-                  onClick={() => navigate(item.path)}
-                  className={`
-                    flex items-center px-3 py-4 text-sm font-medium border-b-2 transition-colors
-                    ${location.pathname === item.path
-                      ? 'border-blue-500 text-blue-600'
-                      : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
       }
-                  `}
+    }
+  };
+
+  // For large screens, render a fixed sidebar instead of a menu
+  if (isLargeScreen) {
+    console.log('Rendering large screen sidebar');
+    return (
+      <div 
+        style={{
+          position: 'fixed',
+          left: 0,
+          top: 0,
+          height: '100vh',
+          width: '256px',
+          backgroundColor: 'white',
+          boxShadow: '2px 0 8px rgba(0,0,0,0.1)',
+          zIndex: 1000,
+          borderRight: '1px solid #e5e7eb',
+          overflowY: 'auto'
+        }}
       >
-                  <IonIcon icon={item.icon} className="mr-2" />
+        <div style={{ padding: '16px', borderBottom: '1px solid #e5e7eb', backgroundColor: '#f9fafb' }}>
-                  {item.label}
+          <h2 style={{ fontSize: '18px', fontWeight: '600', color: '#1f2937', margin: 0 }}>Karaoke</h2>
-                </button>
+          <p style={{ fontSize: '14px', color: '#6b7280', margin: '4px 0 0 0' }}>Singer: Matt</p>
+        </div>
+        <nav style={{ marginTop: '16px' }}>
+          {navItems.map((item) => (
+            <div
+              key={item.path}
+              onClick={() => handleNavigation(item.path)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '12px 16px',
+                cursor: 'pointer',
+                backgroundColor: location.pathname === item.path ? '#dbeafe' : 'transparent',
+                color: location.pathname === item.path ? '#2563eb' : '#374151',
+                borderRight: location.pathname === item.path ? '2px solid #2563eb' : 'none',
+                transition: 'background-color 0.2s, color 0.2s'
+              }}
+              onMouseEnter={(e) => {
+                if (location.pathname !== item.path) {
+                  e.currentTarget.style.backgroundColor = '#f3f4f6';
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (location.pathname !== item.path) {
+                  e.currentTarget.style.backgroundColor = 'transparent';
+                }
+              }}
+            >
+              <IonIcon 
+                icon={item.icon} 
+                style={{ 
+                  marginRight: '12px',
+                  fontSize: '20px'
+                }} 
+              />
+              <span style={{ fontWeight: '500' }}>{item.label}</span>
+            </div>
           ))}
-            </div>
-          </div>
         </nav>
-      )}
+      </div>
-    </>
+    );
+  }
+
+  // For mobile screens, use the Ionic menu
+  console.log('Rendering mobile menu');
+  return (
+    <IonMenu 
+      contentId="main-content" 
+      type="overlay"
+      side="start"
+      swipeGesture={true}
+      style={{
+        '--width': '250px'
+      } as React.CSSProperties}
+    >
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>Menu</IonTitle>
+        </IonToolbar>
+      </IonHeader>
+      <IonContent>
+        <IonList>
+          {navItems.map((item) => (
+            <IonItem
+              key={item.path}
+              button
+              onClick={() => handleNavigation(item.path)}
+              className={location.pathname === item.path ? 'ion-activated' : ''}
+            >
+              <IonIcon icon={item.icon} slot="start" />
+              <IonLabel>{item.label}</IonLabel>
+            </IonItem>
+          ))}
+        </IonList>
+      </IonContent>
+    </IonMenu>
   );
 };
 

src/features/Artists/Artists.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { ActionButton } from '../../components/common';
+import { IonSearchbar, IonList, IonItem, IonLabel, IonModal, IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonIcon, IonChip } from '@ionic/react';
+import { close, add, heart, heartOutline } from 'ionicons/icons';
 import { useArtists } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectSongs } from '../../redux';
@@ -72,20 +73,13 @@ const Artists: React.FC = () => {
         <h1 className="text-2xl font-bold text-gray-900 mb-4">Artists</h1>
         
         {/* Search Input */}
-        <div className="relative">
+        <IonSearchbar
-          <input
-            type="text"
           placeholder="Search artists..."
           value={searchTerm}
-            onChange={(e) => handleSearchChange(e.target.value)}
+          onIonInput={(e) => handleSearchChange(e.detail.value || '')}
-            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          debounce={300}
+          showClearButton="focus"
         />
-          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-            <svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-          </div>
-        </div>
 
         {/* Debug info */}
         <div className="mt-2 text-sm text-gray-500">
@@ -120,27 +114,21 @@ const Artists: React.FC = () => {
             </p>
           </div>
         ) : (
-          <div className="divide-y divide-gray-200">
+          <IonList>
             {artists.map((artist) => (
-              <div key={artist} className="flex items-center justify-between p-4 hover:bg-gray-50">
+              <IonItem key={artist} button onClick={() => handleArtistClick(artist)}>
-                <div className="flex-1">
+                <IonLabel>
                   <h3 className="text-sm font-medium text-gray-900">
                     {artist}
                   </h3>
                   <p className="text-sm text-gray-500">
                     {getSongCountByArtist(artist)} song{getSongCountByArtist(artist) !== 1 ? 's' : ''}
                   </p>
-                </div>
+                </IonLabel>
-                <div className="flex-shrink-0 ml-4">
+                <IonChip slot="end" color="primary">
-                  <ActionButton
-                    onClick={() => handleArtistClick(artist)}
-                    variant="primary"
-                    size="sm"
-                  >
                   View Songs
-                  </ActionButton>
+                </IonChip>
-                </div>
+              </IonItem>
-              </div>
             ))}
             
             {/* Infinite scroll trigger */}
@@ -158,66 +146,54 @@ const Artists: React.FC = () => {
                 </div>
               </div>
             )}
-          </div>
+          </IonList>
         )}
       </div>
 
       {/* Artist Songs Modal */}
-      {selectedArtist && (
+      <IonModal isOpen={!!selectedArtist} onDidDismiss={handleCloseArtistSongs}>
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999]" style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}>
+        <IonHeader>
-          <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[80vh] overflow-hidden" style={{ backgroundColor: 'white', zIndex: 10000 }}>
+          <IonToolbar>
-            <div className="p-6 border-b border-gray-200">
+            <IonTitle>Songs by {selectedArtist}</IonTitle>
-              <div className="flex items-center justify-between">
+            <IonButton slot="end" fill="clear" onClick={handleCloseArtistSongs}>
-                <h2 className="text-xl font-bold text-gray-900">
+              <IonIcon icon={close} />
-                  Songs by {selectedArtist}
+            </IonButton>
-                </h2>
+          </IonToolbar>
-                <ActionButton
+        </IonHeader>
-                  onClick={handleCloseArtistSongs}
-                  variant="secondary"
-                  size="sm"
-                >
-                  Close
-                </ActionButton>
-              </div>
-            </div>
         
-            <div className="overflow-y-auto max-h-[60vh]">
+        <IonContent>
-              <div className="divide-y divide-gray-200">
+          <IonList>
             {selectedArtistSongs.map((song) => (
-                  <div key={song.key} className="p-4">
+              <IonItem key={song.key}>
-                    <div className="flex items-center justify-between">
+                <IonLabel>
-                      <div className="flex-1">
                   <h3 className="text-sm font-medium text-gray-900">
                     {song.title}
                   </h3>
                   <p className="text-sm text-gray-500">
                     {song.artist}
                   </p>
-                      </div>
+                </IonLabel>
-                      <div className="flex-shrink-0 ml-4 flex items-center space-x-2">
+                <div slot="end" className="flex gap-2">
-                        <ActionButton
+                  <IonButton
+                    fill="clear"
+                    size="small"
                     onClick={() => handleAddToQueue(song)}
-                          variant="primary"
-                          size="sm"
                   >
-                          Add to Queue
+                    <IonIcon icon={add} slot="icon-only" />
-                        </ActionButton>
+                  </IonButton>
-                        <ActionButton
+                  <IonButton
+                    fill="clear"
+                    size="small"
                     onClick={() => handleToggleFavorite(song)}
-                          variant="secondary"
-                          size="sm"
                   >
-                          {song.favorite ? 'Remove from Favorites' : 'Add to Favorites'}
+                    <IonIcon icon={song.favorite ? heart : heartOutline} slot="icon-only" />
-                        </ActionButton>
+                  </IonButton>
-                      </div>
-                    </div>
                 </div>
+              </IonItem>
             ))}
-              </div>
+          </IonList>
-            </div>
+        </IonContent>
-          </div>
+      </IonModal>
-        </div>
-      )}
     </div>
   );
 };

src/features/Favorites/Favorites.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IonHeader, IonToolbar, IonTitle, IonChip } from '@ionic/react';
 import { InfiniteScrollList } from '../../components/common';
 import { useFavorites } from '../../hooks';
 import { useAppSelector } from '../../redux';
@@ -21,6 +22,19 @@ const Favorites: React.FC = () => {
   console.log('Favorites component - favorites items:', favoritesItems);
 
   return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>
+            Favorites
+            <IonChip color="primary" className="ml-2">
+              {favoritesItems.length}
+            </IonChip>
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <div style={{ height: '100%', overflowY: 'auto' }}>
         <InfiniteScrollList
           items={favoritesItems}
           isLoading={favoritesCount === 0}
@@ -29,14 +43,16 @@ const Favorites: React.FC = () => {
           onAddToQueue={handleAddToQueue}
           onToggleFavorite={handleToggleFavorite}
           context="favorites"
-      title="Favorites"
+          title=""
-      subtitle={`${favoritesItems.length} song${favoritesItems.length !== 1 ? 's' : ''} in favorites`}
+          subtitle=""
           emptyTitle="No favorites yet"
           emptyMessage="Add songs to your favorites to see them here"
           loadingTitle="Loading favorites..."
           loadingMessage="Please wait while favorites data is being loaded"
           debugInfo={`Favorites items loaded: ${favoritesCount}`}
         />
+      </div>
+    </>
   );
 };
 

src/features/History/History.tsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { IonHeader, IonToolbar, IonTitle, IonChip, IonIcon } from '@ionic/react';
+import { time } from 'ionicons/icons';
 import { InfiniteScrollList } from '../../components/common';
 import { useHistory } from '../../hooks';
 import { useAppSelector } from '../../redux';
@@ -26,15 +28,29 @@ const History: React.FC = () => {
   const renderExtraContent = (item: Song) => {
     if (item.date) {
       return (
-        <div className="flex-shrink-0 px-4 py-2 text-sm text-gray-500">
+        <IonChip color="medium" className="ml-2">
+          <IonIcon icon={time} />
           {formatDate(item.date)}
-        </div>
+        </IonChip>
       );
     }
     return null;
   };
 
   return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>
+            Recently Played
+            <IonChip color="primary" className="ml-2">
+              {historyItems.length}
+            </IonChip>
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <div style={{ height: '100%', overflowY: 'auto' }}>
         <InfiniteScrollList
           items={historyItems}
           isLoading={historyCount === 0}
@@ -43,8 +59,8 @@ const History: React.FC = () => {
           onAddToQueue={handleAddToQueue}
           onToggleFavorite={handleToggleFavorite}
           context="history"
-      title="Recently Played"
+          title=""
-      subtitle={`${historyItems.length} song${historyItems.length !== 1 ? 's' : ''} in history`}
+          subtitle=""
           emptyTitle="No history yet"
           emptyMessage="Songs will appear here after they've been played"
           loadingTitle="Loading history..."
@@ -52,6 +68,8 @@ const History: React.FC = () => {
           debugInfo={`History items loaded: ${historyCount}`}
           renderExtraContent={renderExtraContent}
         />
+      </div>
+    </>
   );
 };
 

src/features/NewSongs/NewSongs.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IonHeader, IonToolbar, IonTitle, IonChip } from '@ionic/react';
 import { InfiniteScrollList } from '../../components/common';
 import { useNewSongs } from '../../hooks';
 import { useAppSelector } from '../../redux';
@@ -17,10 +18,23 @@ const NewSongs: React.FC = () => {
   const newSongsCount = Object.keys(newSongs).length;
 
   // Debug logging
-  console.log('NewSongs component - newSongs count:', newSongsCount);
+  console.log('NewSongs component - new songs count:', newSongsCount);
-  console.log('NewSongs component - newSongs items:', newSongsItems);
+  console.log('NewSongs component - new songs items:', newSongsItems);
 
   return (
+    <>
+      <IonHeader>
+        <IonToolbar>
+          <IonTitle>
+            New Songs
+            <IonChip color="primary" className="ml-2">
+              {newSongsItems.length}
+            </IonChip>
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <div style={{ height: '100%', overflowY: 'auto' }}>
         <InfiniteScrollList
           items={newSongsItems}
           isLoading={newSongsCount === 0}
@@ -29,14 +43,16 @@ const NewSongs: React.FC = () => {
           onAddToQueue={handleAddToQueue}
           onToggleFavorite={handleToggleFavorite}
           context="search"
-      title="New Songs"
+          title=""
-      subtitle={`${newSongsItems.length} new song${newSongsItems.length !== 1 ? 's' : ''} added recently`}
+          subtitle=""
           emptyTitle="No new songs"
-      emptyMessage="New songs will appear here when they're added to the catalog"
+          emptyMessage="Check back later for new additions"
           loadingTitle="Loading new songs..."
           loadingMessage="Please wait while new songs data is being loaded"
-      debugInfo={`New songs items loaded: ${newSongsCount}`}
+          debugInfo={`New songs loaded: ${newSongsCount}`}
         />
+      </div>
+    </>
   );
 };
 

src/features/Search/Search.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { IonSearchbar } from '@ionic/react';
 import { InfiniteScrollList } from '../../components/common';
 import { useSearch } from '../../hooks';
 import { useAppSelector } from '../../redux';
@@ -39,20 +40,13 @@ const Search: React.FC = () => {
         <h1 className="text-2xl font-bold text-gray-900 mb-4">Search Songs</h1>
         
         {/* Search Input */}
-        <div className="relative">
+        <IonSearchbar
-          <input
-            type="text"
           placeholder="Search by title or artist..."
           value={searchTerm}
-            onChange={(e) => handleSearchChange(e.target.value)}
+          onIonInput={(e) => handleSearchChange(e.detail.value || '')}
-            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+          debounce={300}
+          showClearButton="focus"
         />
-          <div className="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
-            <svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-            </svg>
-          </div>
-        </div>
 
         {/* Debug info */}
         <div className="mt-2 text-sm text-gray-500">

src/features/Singers/Singers.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { ActionButton, EmptyState } from '../../components/common';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonItemSliding, IonItemOptions, IonItemOption, IonIcon, IonChip } from '@ionic/react';
+import { people, trash, time } from 'ionicons/icons';
+import { EmptyState } from '../../components/common';
 import { useSingers } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectSingers } from '../../redux';
@@ -20,18 +22,28 @@ const Singers: React.FC = () => {
   console.log('Singers component - singers:', singers);
 
   return (
-    <div className="max-w-4xl mx-auto p-6">
+    <>
-      <div className="mb-6">
+      <IonHeader>
-        <h1 className="text-2xl font-bold text-gray-900 mb-2">Singers</h1>
+        <IonToolbar>
-        <p className="text-sm text-gray-600">
+          <IonTitle>
+            Singers
+            <IonChip color="primary" className="ml-2">
+              {singers.length}
+            </IonChip>
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent>
+        <div className="p-4">
+          <p className="text-sm text-gray-600 mb-4">
             {singers.length} singer{singers.length !== 1 ? 's' : ''} in the party
           </p>
           
           {/* Debug info */}
-        <div className="mt-2 text-sm text-gray-500">
+          <div className="mb-4 text-sm text-gray-500">
             Singers loaded: {singersCount}
           </div>
-      </div>
 
           {/* Singers List */}
           <div className="bg-white rounded-lg shadow">
@@ -56,37 +68,43 @@ const Singers: React.FC = () => {
                 }
               />
             ) : (
-          <div className="divide-y divide-gray-200">
+              <IonList>
                 {singers.map((singer) => (
-              <div key={singer.key} className="flex items-center justify-between p-4">
+                  <IonItemSliding key={singer.key}>
-                {/* Singer Info */}
+                    <IonItem>
-                <div className="flex-1">
+                      <IonIcon icon={people} slot="start" color="primary" />
+                      <IonLabel>
                         <h3 className="text-sm font-medium text-gray-900">
                           {singer.name}
                         </h3>
-                  <p className="text-sm text-gray-500">
+                        <div className="flex items-center mt-1">
-                    Last login: {formatDate(singer.lastLogin)}
+                          <IonChip color="medium">
-                  </p>
+                            <IonIcon icon={time} />
+                            {formatDate(singer.lastLogin)}
+                          </IonChip>
                         </div>
+                      </IonLabel>
+                    </IonItem>
 
-                {/* Admin Controls */}
+                    {/* Swipe to Remove (Admin Only) */}
                     {isAdmin && (
-                  <div className="flex-shrink-0 ml-4">
+                      <IonItemOptions side="end">
-                    <ActionButton
+                        <IonItemOption 
+                          color="danger" 
                           onClick={() => handleRemoveSinger(singer)}
-                      variant="danger"
-                      size="sm"
                         >
-                      Remove
+                          <IonIcon icon={trash} slot="icon-only" />
-                    </ActionButton>
+                        </IonItemOption>
-                  </div>
+                      </IonItemOptions>
                     )}
-              </div>
+                  </IonItemSliding>
                 ))}
-          </div>
+              </IonList>
             )}
           </div>
         </div>
+      </IonContent>
+    </>
   );
 };
 

src/features/SongLists/SongLists.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { ActionButton, SongItem } from '../../components/common';
+import { IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonLabel, IonModal, IonButton, IonIcon, IonChip, IonAccordion, IonAccordionGroup } from '@ionic/react';
+import { close, documentText, add, heart, heartOutline } from 'ionicons/icons';
 import { useSongLists } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectSongList } from '../../redux';
@@ -47,7 +48,6 @@ const SongLists: React.FC = () => {
     return () => observer.disconnect();
   }, [loadMore, hasMore, songListCount]);
   const [selectedSongList, setSelectedSongList] = useState<string | null>(null);
-  const [expandedSongs, setExpandedSongs] = useState<Set<string>>(new Set());
 
   // Debug logging - only log when data changes
   useEffect(() => {
@@ -64,16 +64,6 @@ const SongLists: React.FC = () => {
     setSelectedSongList(null);
   };
 
-  const handleToggleExpanded = (songKey: string) => {
-    const newExpanded = new Set(expandedSongs);
-    if (newExpanded.has(songKey)) {
-      newExpanded.delete(songKey);
-    } else {
-      newExpanded.add(songKey);
-    }
-    setExpandedSongs(newExpanded);
-  };
-
   const finalSelectedList = selectedSongList
     ? allSongLists.find(list => list.key === selectedSongList)
     : null;
@@ -93,18 +83,28 @@ const SongLists: React.FC = () => {
   }, [selectedSongList, finalSelectedList, songLists.length]);
 
   return (
-    <div className="max-w-4xl mx-auto p-6">
+    <>
-      <div className="mb-6">
+      <IonHeader>
-        <h1 className="text-2xl font-bold text-gray-900 mb-2">Song Lists</h1>
+        <IonToolbar>
-        <p className="text-sm text-gray-600">
+          <IonTitle>
+            Song Lists
+            <IonChip color="primary" className="ml-2">
+              {songLists.length}
+            </IonChip>
+          </IonTitle>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent>
+        <div className="p-4">
+          <p className="text-sm text-gray-600 mb-4">
             {songLists.length} song list{songLists.length !== 1 ? 's' : ''} available
           </p>
           
           {/* Debug info */}
-        <div className="mt-2 text-sm text-gray-500">
+          <div className="mb-4 text-sm text-gray-500">
             Song lists loaded: {songListCount}
           </div>
-      </div>
 
           {/* Song Lists */}
           <div className="bg-white rounded-lg shadow">
@@ -129,27 +129,22 @@ const SongLists: React.FC = () => {
                 <p className="text-sm text-gray-500">Song lists will appear here when they're available</p>
               </div>
             ) : (
-          <div className="divide-y divide-gray-200">
+              <IonList>
                 {songLists.map((songList) => (
-              <div key={songList.key} className="flex items-center justify-between p-4 hover:bg-gray-50">
+                  <IonItem key={songList.key} button onClick={() => handleSongListClick(songList.key!)}>
-                <div className="flex-1">
+                    <IonIcon icon={documentText} slot="start" color="primary" />
+                    <IonLabel>
                       <h3 className="text-sm font-medium text-gray-900">
                         {songList.title}
                       </h3>
                       <p className="text-sm text-gray-500">
                         {songList.songs.length} song{songList.songs.length !== 1 ? 's' : ''}
                       </p>
-                </div>
+                    </IonLabel>
-                <div className="flex-shrink-0 ml-4">
+                    <IonChip slot="end" color="primary">
-                  <ActionButton
-                    onClick={() => handleSongListClick(songList.key!)}
-                    variant="primary"
-                    size="sm"
-                  >
                       View Songs
-                  </ActionButton>
+                    </IonChip>
-                </div>
+                  </IonItem>
-              </div>
                 ))}
                 
                 {/* Infinite scroll trigger */}
@@ -167,41 +162,33 @@ const SongLists: React.FC = () => {
                     </div>
                   </div>
                 )}
-          </div>
+              </IonList>
             )}
           </div>
+        </div>
+      </IonContent>
 
       {/* Song List Modal */}
-      {finalSelectedList && (
+      <IonModal isOpen={!!finalSelectedList} onDidDismiss={handleCloseSongList}>
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[9999]" style={{ position: 'fixed', top: 0, left: 0, right: 0, bottom: 0 }}>
+        <IonHeader>
-          <div className="bg-white rounded-lg shadow-xl max-w-4xl w-full mx-4 max-h-[80vh] overflow-hidden" style={{ backgroundColor: 'white', zIndex: 10000 }}>
+          <IonToolbar>
-            <div className="p-6 border-b border-gray-200">
+            <IonTitle>{finalSelectedList?.title}</IonTitle>
-              <div className="flex items-center justify-between">
+            <IonButton slot="end" fill="clear" onClick={handleCloseSongList}>
-                <h2 className="text-xl font-bold text-gray-900">
+              <IonIcon icon={close} />
-                  {finalSelectedList.title}
+            </IonButton>
-                </h2>
+          </IonToolbar>
-                <ActionButton
+        </IonHeader>
-                  onClick={handleCloseSongList}
-                  variant="secondary"
-                  size="sm"
-                >
-                  Close
-                </ActionButton>
-              </div>
-            </div>
         
-            <div className="overflow-y-auto max-h-[60vh]">
+        <IonContent>
-              <div className="divide-y divide-gray-200">
+          <IonAccordionGroup>
-                {finalSelectedList.songs.map((songListSong: SongListSong, idx) => {
+            {finalSelectedList?.songs.map((songListSong: SongListSong, idx) => {
               const availableSongs = checkSongAvailability(songListSong);
-                  const isExpanded = expandedSongs.has(songListSong.key!);
               const isAvailable = availableSongs.length > 0;
 
               return (
-                    <div key={songListSong.key || `${songListSong.title}-${songListSong.position}-${idx}`}>
+                <IonAccordion key={songListSong.key || `${songListSong.title}-${songListSong.position}-${idx}`} value={songListSong.key}>
-                      {/* Song List Song Row */}
+                  <IonItem slot="header" className={!isAvailable ? 'opacity-50' : ''}>
-                      <div className={`flex items-center justify-between p-4 ${!isAvailable ? 'opacity-50' : ''}`}>
+                    <IonLabel>
-                        <div className="flex-1">
                       <h3 className="text-sm font-medium text-gray-900">
                         {songListSong.title}
                       </h3>
@@ -213,44 +200,59 @@ const SongLists: React.FC = () => {
                           Not available in catalog
                         </p>
                       )}
-                        </div>
+                    </IonLabel>
-                        <div className="flex-shrink-0 ml-4 flex items-center space-x-2">
                     {isAvailable && (
-                            <ActionButton
+                      <IonChip slot="end" color="success">
-                              onClick={() => handleToggleExpanded(songListSong.key!)}
+                        {availableSongs.length} version{availableSongs.length !== 1 ? 's' : ''}
-                              variant="secondary"
+                      </IonChip>
-                              size="sm"
-                            >
-                              {isExpanded ? 'Hide' : 'Show'} ({availableSongs.length})
-                            </ActionButton>
                     )}
-                        </div>
+                  </IonItem>
-                      </div>
 
-                      {/* Available Songs (when expanded) */}
+                  <div slot="content">
-                      {isExpanded && isAvailable && (
+                    {isAvailable ? (
-                        <div className="bg-gray-50 border-t border-gray-200">
+                      <IonList>
                         {availableSongs.map((song: Song, sidx) => (
-                            <div key={song.key || `${song.title}-${song.artist}-${sidx}`} className="p-4 border-b border-gray-200 last:border-b-0">
+                          <IonItem key={song.key || `${song.title}-${song.artist}-${sidx}`}>
-                              <SongItem
+                            <IonLabel>
-                                song={song}
+                              <h3 className="text-sm font-medium text-gray-900">
-                                context="search"
+                                {song.title}
-                                onAddToQueue={() => handleAddToQueue(song)}
+                              </h3>
-                                onToggleFavorite={() => handleToggleFavorite(song)}
+                              <p className="text-sm text-gray-500">
-                              />
+                                {song.artist}
+                              </p>
+                            </IonLabel>
+                            <div slot="end" className="flex gap-2">
+                              <IonButton
+                                fill="clear"
+                                size="small"
+                                onClick={() => handleAddToQueue(song)}
+                              >
+                                <IonIcon icon={add} slot="icon-only" />
+                              </IonButton>
+                              <IonButton
+                                fill="clear"
+                                size="small"
+                                onClick={() => handleToggleFavorite(song)}
+                              >
+                                <IonIcon icon={song.favorite ? heart : heartOutline} slot="icon-only" />
+                              </IonButton>
                             </div>
+                          </IonItem>
                         ))}
+                      </IonList>
+                    ) : (
+                      <div className="p-4 text-center text-gray-500">
+                        No matching songs found in catalog
                       </div>
                     )}
                   </div>
+                </IonAccordion>
               );
             })}
-              </div>
+          </IonAccordionGroup>
-            </div>
+        </IonContent>
-          </div>
+      </IonModal>
-        </div>
+    </>
-      )}
-    </div>
   );
 };
 

src/features/TopPlayed/Top100.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
+import { IonHeader, IonToolbar, IonTitle, IonChip, IonIcon } from '@ionic/react';
 import { InfiniteScrollList } from '../../components/common';
 import { useTopPlayed } from '../../hooks';
 import { useAppSelector } from '../../redux';
 import { selectTopPlayed } from '../../redux';
-import type { TopPlayed, Song } from '../../types';
 
-const Top100: React.FC = () => {
+const TopPlayed: React.FC = () => {
   const {
     topPlayedItems,
     hasMore,
@@ -18,79 +18,52 @@ const Top100: React.FC = () => {
   const topPlayedCount = Object.keys(topPlayed).length;
 
   // Debug logging
-  console.log('TopPlayed component - topPlayed count:', topPlayedCount);
+  console.log('TopPlayed component - top played count:', topPlayedCount);
-  console.log('TopPlayed component - topPlayed items:', topPlayedItems);
+  console.log('TopPlayed component - top played items:', topPlayedItems);
 
-  // Convert TopPlayed items to Song format for the InfiniteScrollList
+  const renderExtraContent = (item: any, index: number) => (
-  const songItems = topPlayedItems.map((item: TopPlayed) => ({
+    <div className="flex items-center space-x-2 px-4 py-2">
-    ...item,
+      <div className="flex items-center text-sm text-gray-500">
-    path: '', // TopPlayed doesn't have path
+        <IonIcon icon="trophy" className="mr-1" />
-    disabled: false,
+        <span>#{index + 1}</span>
-    favorite: false,
+      </div>
-  }));
+    </div>
+  );
 
-  // Render extra content for top played items (rank and play count)
-  const renderExtraContent = (item: Song, index: number) => {
   return (
     <>
-        {/* Rank */}
+      <IonHeader>
-        <div className="flex-shrink-0 w-12 h-12 flex items-center justify-center">
+        <IonToolbar>
-          <div className={`
+          <IonTitle>
-            w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold
+            Top 100 Played
-            ${index === 0 ? 'bg-yellow-100 text-yellow-800' : ''}
+            <IonChip color="primary" className="ml-2">
-            ${index === 1 ? 'bg-gray-100 text-gray-800' : ''}
+              {topPlayedItems.length}
-            ${index === 2 ? 'bg-orange-100 text-orange-800' : ''}
+            </IonChip>
-            ${index > 2 ? 'bg-gray-50 text-gray-600' : ''}
+          </IonTitle>
-          `}>
+        </IonToolbar>
-            {index + 1}
+      </IonHeader>
-          </div>
-        </div>
 
-        {/* Play Count */}
+      <div style={{ height: '100%', overflowY: 'auto' }}>
-        <div className="flex-shrink-0 px-4 py-2 text-sm text-gray-600">
+        <InfiniteScrollList
-          <div className="font-medium">{item.count}</div>
+          items={topPlayedItems}
-          <div className="text-xs text-gray-400">
+          isLoading={topPlayedCount === 0}
-            play{item.count !== 1 ? 's' : ''}
+          hasMore={hasMore}
-          </div>
+          onLoadMore={loadMore}
+          onAddToQueue={handleAddToQueue}
+          onToggleFavorite={handleToggleFavorite}
+          context="topPlayed"
+          title=""
+          subtitle=""
+          emptyTitle="No top played songs"
+          emptyMessage="Play some songs to see the top played list"
+          loadingTitle="Loading top played songs..."
+          loadingMessage="Please wait while top played data is being loaded"
+          debugInfo={`Top played items loaded: ${topPlayedCount}`}
+          renderExtraContent={renderExtraContent}
+        />
       </div>
     </>
   );
 };
 
-  // Wrapper functions to handle type conversion
+export default TopPlayed; 
-  const handleAddToQueueWrapper = (song: Song) => {
-    const topPlayedItem = topPlayedItems.find(item => item.key === song.key);
-    if (topPlayedItem) {
-      handleAddToQueue(topPlayedItem);
-    }
-  };
-
-  const handleToggleFavoriteWrapper = (song: Song) => {
-    const topPlayedItem = topPlayedItems.find(item => item.key === song.key);
-    if (topPlayedItem) {
-      handleToggleFavorite(topPlayedItem);
-    }
-  };
-
-  return (
-    <InfiniteScrollList
-      items={songItems}
-      isLoading={topPlayedCount === 0}
-      hasMore={hasMore}
-      onLoadMore={loadMore}
-      onAddToQueue={handleAddToQueueWrapper}
-      onToggleFavorite={handleToggleFavoriteWrapper}
-      context="topPlayed"
-      title="Most Played"
-      subtitle={`Top ${topPlayedItems.length} song${topPlayedItems.length !== 1 ? 's' : ''} by play count`}
-      emptyTitle="No play data yet"
-      emptyMessage="Song play counts will appear here after songs have been played"
-      loadingTitle="Loading top played..."
-      loadingMessage="Please wait while top played data is being loaded"
-      debugInfo={`Top played items loaded: ${topPlayedCount}`}
-      renderExtraContent={renderExtraContent}
-    />
-  );
-};
-
-export default Top100; 

src/index.css

@@ -15,3 +15,21 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+/* Ensure menu button is visible */
+ion-menu-button {
+  --color: var(--ion-color-primary);
+  --padding-start: 8px;
+  --padding-end: 8px;
+}
+
+/* Menu item styling */
+ion-item.ion-activated {
+  --background: var(--ion-color-primary);
+  --color: var(--ion-color-primary-contrast);
+}
+
+/* Ensure mobile menu appears above other content */
+ion-menu {
+  --z-index: 1000;
+}