diff --git a/app/album/[id]/page.tsx b/app/album/[id]/page.tsx
index c0b7cf8..ea79894 100644
--- a/app/album/[id]/page.tsx
+++ b/app/album/[id]/page.tsx
@@ -10,7 +10,6 @@ import Link from 'next/link';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext'
 import Loading from "@/app/components/loading";
 import { Separator } from '@/components/ui/separator';
-import { ScrollArea } from '@/components/ui/scroll-area';
 import { getNavidromeAPI } from '@/lib/navidrome';
 import { useFavoriteAlbums } from '@/hooks/use-favorite-albums';
 import { useIsMobile } from '@/hooks/use-mobile';
@@ -121,10 +120,19 @@ export default function AlbumPage() {
     const seconds = duration % 60;
     return `${minutes}:${seconds.toString().padStart(2, '0')}`;
   };
-  // Get cover art URL with proper fallback
-  const coverArtUrl = album.coverArt && api
-    ? api.getCoverArtUrl(album.coverArt, 1200)
-    : '/default-user.jpg';
+
+  // Dynamic cover art URLs based on image size
+  const getMobileCoverArtUrl = () => {
+    return album.coverArt && api
+      ? api.getCoverArtUrl(album.coverArt, 280)
+      : '/default-user.jpg';
+  };
+
+  const getDesktopCoverArtUrl = () => {
+    return album.coverArt && api
+      ? api.getCoverArtUrl(album.coverArt, 300)
+      : '/default-user.jpg';
+  };
 
   return (
     <>
@@ -136,7 +144,7 @@ export default function AlbumPage() {
             {/* Album Cover - Centered */}
             <div className="flex justify-center">
               <Image 
-                src={coverArtUrl} 
+                src={getMobileCoverArtUrl()} 
                 alt={album.name} 
                 width={280} 
                 height={280}
@@ -180,7 +188,7 @@ export default function AlbumPage() {
           /* Desktop Layout */
           <div className="flex items-start gap-6">
             <Image 
-              src={coverArtUrl} 
+              src={getDesktopCoverArtUrl()} 
               alt={album.name} 
               width={300} 
               height={300}
@@ -209,70 +217,68 @@ export default function AlbumPage() {
         <div className="space-y-4">
           <Separator />
           
-          <ScrollArea className="h-[calc(100vh-500px)]">
-            {tracklist.length === 0 ? (
-              <div className="text-center py-12">
-                <p className="text-muted-foreground">No tracks available.</p>
-              </div>
-            ) : (
-              <div className="space-y-1">
-                {tracklist.map((song, index) => (
-                  <div
-                    key={song.id}
-                    className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors`}
-                    onClick={() => handlePlayClick(song)}
-                  >
-                    {/* Track Number / Play Indicator */}
-                    <div className="w-8 text-center text-sm text-muted-foreground mr-3">
-                        <>
-                          <span className="group-hover:hidden">{song.track || index + 1}</span>
-                          <Play className="w-4 h-4 mx-auto hidden group-hover:block" />
-                        </>
-                    </div>
+          {tracklist.length === 0 ? (
+            <div className="text-center py-12">
+              <p className="text-muted-foreground">No tracks available.</p>
+            </div>
+          ) : (
+            <div className="space-y-1 pb-32">
+              {tracklist.map((song, index) => (
+                <div
+                  key={song.id}
+                  className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors`}
+                  onClick={() => handlePlayClick(song)}
+                >
+                  {/* Track Number / Play Indicator */}
+                  <div className="w-8 text-center text-sm text-muted-foreground mr-3">
+                      <>
+                        <span className="group-hover:hidden">{song.track || index + 1}</span>
+                        <Play className="w-4 h-4 mx-auto hidden group-hover:block" />
+                      </>
+                  </div>
 
-                    {/* Song Info */}
-                    <div className="flex-1 min-w-0 mr-4">
-                      <div className="flex items-center gap-2 mb-1">
-                        <p className={`font-semibold truncate ${
-                          isCurrentlyPlaying(song) ? 'text-primary' : ''
-                        }`}>
-                          {song.title}
-                        </p>
+                  {/* Song Info */}
+                  <div className="flex-1 min-w-0 mr-4">
+                    <div className="flex items-center gap-2 mb-1">
+                      <p className={`font-semibold truncate ${
+                        isCurrentlyPlaying(song) ? 'text-primary' : ''
+                      }`}>
+                        {song.title}
+                      </p>
+                    </div>
+                    <div className="flex items-center text-sm text-muted-foreground">
+                      <div className="flex items-center gap-1">
+                        <span className="truncate">{song.artist}</span>
                       </div>
-                      <div className="flex items-center text-sm text-muted-foreground">
-                        <div className="flex items-center gap-1">
-                          <span className="truncate">{song.artist}</span>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Duration */}
-                    <div className="flex items-center text-sm text-muted-foreground mr-4">
-                      {formatDuration(song.duration)}
-                    </div>
-
-                    {/* Actions */}
-                    <div className="flex items-center space-x-2 group-hover:opacity-100 transition-opacity">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleSongStar(song);
-                        }}
-                        className="h-8 w-8 p-0"
-                      >
-                        <Heart 
-                          className={`w-4 h-4 ${starredSongs.has(song.id) ? 'text-primary' : 'text-gray-500'}`}
-                          fill={starredSongs.has(song.id) ? 'var(--primary)' : 'none'}
-                        />
-                      </Button>
                     </div>
                   </div>
-                ))}
-              </div>
-            )}
-          </ScrollArea>
+
+                  {/* Duration */}
+                  <div className="flex items-center text-sm text-muted-foreground mr-4">
+                    {formatDuration(song.duration)}
+                  </div>
+
+                  {/* Actions */}
+                  <div className="flex items-center space-x-2 group-hover:opacity-100 transition-opacity">
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleSongStar(song);
+                      }}
+                      className="h-8 w-8 p-0"
+                    >
+                      <Heart 
+                        className={`w-4 h-4 ${starredSongs.has(song.id) ? 'text-primary' : 'text-gray-500'}`}
+                        fill={starredSongs.has(song.id) ? 'var(--primary)' : 'none'}
+                      />
+                    </Button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/app/components/AudioPlayerContext.tsx b/app/components/AudioPlayerContext.tsx
index 7c45e9b..d4e10e6 100644
--- a/app/components/AudioPlayerContext.tsx
+++ b/app/components/AudioPlayerContext.tsx
@@ -105,7 +105,7 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 512) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
diff --git a/app/components/FullScreenPlayer.tsx b/app/components/FullScreenPlayer.tsx
index 4bb780f..fa09ded 100644
--- a/app/components/FullScreenPlayer.tsx
+++ b/app/components/FullScreenPlayer.tsx
@@ -394,13 +394,13 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
 
                     {/* Track Info - Left Aligned and Heart on Same Line */}
                     <div className="w-full mb-6 shrink-0">
-                      <div className="flex items-center justify-between mb-2">
+                      <div className="flex items-center justify-between mb-0">
                         <h1 className="text-2xl font-bold text-foreground line-clamp-1 flex-1 text-left">
                           {currentTrack.name}
                         </h1>
                         <button
                           onClick={toggleCurrentTrackStar}
-                          className="p-2 hover:bg-gray-700/50 rounded-full transition-colors ml-3"
+                          className="p-2 hover:bg-gray-700/50 rounded-full transition-colors ml-3 pb-0"
                           title={currentTrack?.starred ? 'Remove from favorites' : 'Add to favorites'}
                         >
                           <Heart 
diff --git a/app/components/album-artwork.tsx b/app/components/album-artwork.tsx
index 3b87564..7673ce2 100644
--- a/app/components/album-artwork.tsx
+++ b/app/components/album-artwork.tsx
@@ -47,11 +47,14 @@ export function AlbumArtwork({
   const { addAlbumToQueue, playTrack, addToQueue } = useAudioPlayer();
   const { playlists, starItem, unstarItem } = useNavidrome();
   
-  // Memoize cover art URL to prevent recalculation on every render
+  // Memoize cover art URL with dynamic sizing
   const coverArtUrl = useMemo(() => {
     if (!api || !album.coverArt) return '/default-user.jpg';
-    return api.getCoverArtUrl(album.coverArt, 1200);
-  }, [api, album.coverArt]);
+    
+    // Use width prop or default size for optimization
+    const imageSize = width || height || 300;
+    return api.getCoverArtUrl(album.coverArt, imageSize);
+  }, [api, album.coverArt, width, height]);
 
   // Use callback to prevent function recreation on every render
   const handleImageLoad = useCallback(() => {
diff --git a/app/components/menu.tsx b/app/components/menu.tsx
index d237b4c..55ff638 100644
--- a/app/components/menu.tsx
+++ b/app/components/menu.tsx
@@ -158,9 +158,9 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
       <div className="flex items-center justify-between w-full">
         {/* Mobile Top Bar - Simplified since navigation is now at bottom */}
         {isMobile ? (
-          <div className="flex items-center justify-center w-full p-2">
-            <h1 className="font-bold text-lg">mice</h1>
-          </div>
+// hey bear!
+// nothing
+            null
         ) : (
           /* Desktop Navigation */
           <Menubar
diff --git a/app/library/songs/page.tsx b/app/library/songs/page.tsx
index b8ddac1..abdcd73 100644
--- a/app/library/songs/page.tsx
+++ b/app/library/songs/page.tsx
@@ -101,7 +101,7 @@ export default function SongsPage() {
 
     setFilteredSongs(filtered);
   }, [songs, searchQuery, sortBy, sortDirection]);
-  const handlePlaySong = (song: Song) => {
+    const handlePlayClick = (song: Song) => {
     if (!api) {
       console.error('Navidrome API not available');
       return;
@@ -114,7 +114,7 @@ export default function SongsPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -135,7 +135,7 @@ export default function SongsPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -222,7 +222,7 @@ export default function SongsPage() {
                   className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors ${
                     isCurrentlyPlaying(song) ? 'bg-accent/50 border-l-4 border-primary' : ''
                   }`}
-                  onClick={() => handlePlaySong(song)}
+                  onClick={() => handlePlayClick(song)}
                 >
                   {/* Track Number / Play Indicator */}
                   <div className="w-8 text-center text-sm text-muted-foreground mr-3">
@@ -240,7 +240,7 @@ export default function SongsPage() {
 
                   {/* Album Art */}
                   <div className="w-12 h-12 mr-4 shrink-0">                    <Image
-                      src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 300) : '/default-user.jpg'}
+                      src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 48) : '/default-user.jpg'}
                       alt={song.album}
                       width={48}
                       height={48}
diff --git a/app/playlist/[id]/page.tsx b/app/playlist/[id]/page.tsx
index a9772fe..291702f 100644
--- a/app/playlist/[id]/page.tsx
+++ b/app/playlist/[id]/page.tsx
@@ -57,7 +57,7 @@ export default function PlaylistPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -77,7 +77,7 @@ export default function PlaylistPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -98,7 +98,7 @@ export default function PlaylistPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 1200) : undefined,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -140,7 +140,7 @@ export default function PlaylistPage() {
   }
   // Get playlist cover art URL with fallback
   const playlistCoverUrl = playlist.coverArt && api
-    ? api.getCoverArtUrl(playlist.coverArt, 1200)
+    ? api.getCoverArtUrl(playlist.coverArt, 300)
     : '/default-user.jpg';
 
   return (
@@ -209,7 +209,7 @@ export default function PlaylistPage() {
 
                     {/* Album Art */}
                     <div className="w-12 h-12 mr-4 shrink-0">                      <Image
-                        src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 300) : '/default-user.jpg'}
+                        src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 48) : '/default-user.jpg'}
                         alt={song.album}
                         width={48}
                         height={48}