diff --git a/packages/frontend/src/components/PlaylistManager.tsx b/packages/frontend/src/components/PlaylistManager.tsx
index 9a79d32..859c3bb 100644
--- a/packages/frontend/src/components/PlaylistManager.tsx
+++ b/packages/frontend/src/components/PlaylistManager.tsx
@@ -164,8 +164,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
               }
               setIsDragOver(false);
             }}
-            borderColor={isDragOver ? 'blue.400' : undefined}
-            borderWidth={isDragOver ? '1px' : undefined}
+            boxShadow={isDragOver ? 'inset 0 0 0 1px var(--chakra-colors-blue-400)' : 'none'}
           >
             {level > 0 && (
               <Box
@@ -225,6 +224,9 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
         borderRight="1px solid"
         borderRightColor="whiteAlpha.200"
         position="relative"
+        border="1px solid"
+        borderColor={selectedItem === node.name ? 'blue.800' : 'transparent'}
+        _hover={{ ...(selectedItem === node.name ? {} : { borderColor: 'whiteAlpha.300' }) }}
         onDragOver={(e) => {
           e.preventDefault();
           const types = Array.from((e.dataTransfer.types || []) as any);
@@ -248,8 +250,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
           }
           setIsDragOver(false);
         }}
-        borderColor={isDragOver ? 'blue.400' : (selectedItem === node.name ? 'blue.700' : 'transparent')}
-        borderWidth={isDragOver || selectedItem === node.name ? '1px' : undefined}
+        boxShadow={isDragOver ? 'inset 0 0 0 1px var(--chakra-colors-blue-400)' : 'none'}
       >
         {level > 0 && (
           <Box