diff --git a/packages/frontend/src/components/PlaylistManager.tsx b/packages/frontend/src/components/PlaylistManager.tsx
index 9d56de5..599ab82 100644
--- a/packages/frontend/src/components/PlaylistManager.tsx
+++ b/packages/frontend/src/components/PlaylistManager.tsx
@@ -78,7 +78,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
   allFolders,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
-  const indent = level * 10;
+  const indent = level * 16; // Increased indentation for better visibility
 
   if (node.type === 'folder') {
     return (
@@ -89,7 +89,9 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
             {...getButtonStyles(false)}
             onClick={() => setIsOpen(!isOpen)}
             ml={indent}
+            pl={level > 0 ? 6 : 4} // Add extra padding for nested items
             justifyContent="flex-start"
+            position="relative"
             leftIcon={
               <Box position="relative" display="flex" alignItems="center">
                 <ChevronRightIcon
@@ -102,17 +104,29 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
               </Box>
             }
           >
-                <Icon 
-                  viewBox="0 0 24 24"
-                  color="blue.300"
-                  ml={1}
-                  mr={2}
-                >
-                  <path
-                    fill="currentColor"
-                    d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"
-                  />
-                </Icon>
+            {level > 0 && (
+              <Box
+                position="absolute"
+                left="8px"
+                top="50%"
+                transform="translateY(-50%)"
+                width="2px"
+                height="12px"
+                bg="gray.500"
+                borderRadius="1px"
+              />
+            )}
+            <Icon 
+              viewBox="0 0 24 24"
+              color="blue.300"
+              ml={1}
+              mr={2}
+            >
+              <path
+                fill="currentColor"
+                d="M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z"
+              />
+            </Icon>
             {node.name}
           </Button>
         </Flex>
@@ -143,10 +157,24 @@ const PlaylistItem: React.FC<PlaylistItemProps> = ({
         {...getButtonStyles(selectedItem === node.name)}
         onClick={() => onPlaylistSelect(node.name)}
         ml={indent}
+        pl={level > 0 ? 6 : 4} // Add extra padding for nested items
         borderRightRadius={0}
         borderRight="1px solid"
         borderRightColor="whiteAlpha.200"
+        position="relative"
       >
+        {level > 0 && (
+          <Box
+            position="absolute"
+            left="8px"
+            top="50%"
+            transform="translateY(-50%)"
+            width="2px"
+            height="12px"
+            bg="gray.500"
+            borderRadius="1px"
+          />
+        )}
         {node.name}
       </Button>
       <Menu>
diff --git a/packages/frontend/src/hooks/usePaginatedSongs.ts b/packages/frontend/src/hooks/usePaginatedSongs.ts
index 36cbeab..7a291bc 100644
--- a/packages/frontend/src/hooks/usePaginatedSongs.ts
+++ b/packages/frontend/src/hooks/usePaginatedSongs.ts
@@ -34,10 +34,11 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
   }, []);
 
   // Load songs for a specific page
-  const loadPage = useCallback(async (page: number, search: string = searchQuery, targetPlaylist?: string) => {
+  const loadPage = useCallback(async (page: number, search?: string, targetPlaylist?: string) => {
     if (loadingRef.current) return;
     
-    const playlistToUse = targetPlaylist || playlistName;
+    const searchToUse = search ?? searchQuery;
+    const playlistToUse = targetPlaylist ?? playlistName;
     
     // Cleanup previous request
     cleanup();
@@ -54,10 +55,10 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
       
       if (playlistToUse && playlistToUse !== 'All Songs') {
         // Load songs for specific playlist
-        response = await api.getPlaylistSongsPaginated(playlistToUse, page, pageSize, search);
+        response = await api.getPlaylistSongsPaginated(playlistToUse, page, pageSize, searchToUse);
       } else {
         // Load all songs
-        response = await api.getSongsPaginated(page, pageSize, search);
+        response = await api.getSongsPaginated(page, pageSize, searchToUse);
       }
       
       // Check if request was aborted
@@ -88,7 +89,7 @@ export const usePaginatedSongs = (options: UsePaginatedSongsOptions = {}) => {
         setIsInitialLoad(false);
       }
     }
-  }, [pageSize, searchQuery, playlistName, cleanup]);
+  }, [pageSize, cleanup]); // Remove searchQuery and playlistName from dependencies
 
   // Load next page (for infinite scroll)
   const loadNextPage = useCallback(() => {