diff --git a/plugins/radiant-lyrics-luna/src/index.ts b/plugins/radiant-lyrics-luna/src/index.ts
index 949cc30..63fda73 100644
--- a/plugins/radiant-lyrics-luna/src/index.ts
+++ b/plugins/radiant-lyrics-luna/src/index.ts
@@ -39,14 +39,18 @@ const updateButtonStates = function(): void {
     }
     if (unhideButton) {
         unhideButton.style.display = (settings.hideUIEnabled && isHidden) ? 'flex' : 'none';
+        // Remove the immediate hide class when button should be visible
+        if (settings.hideUIEnabled && isHidden) {
+            unhideButton.classList.remove('hide-immediately');
+        }
     }
 };
 
 // Function to update styles when settings change
 const updateRadiantLyricsStyles = function(): void {
     if (isHidden) {
-        // Apply all clean view styles
-        lyricsStyleTag.css = separatedLyrics;
+        // Apply only base styles (button hiding), NOT separated lyrics styles
+        // to avoid affecting lyrics scrolling behavior
         baseStyleTag.css = baseStyles;
         
         // Apply player bar styles based on setting
@@ -57,9 +61,9 @@ const updateRadiantLyricsStyles = function(): void {
         }
     }
 
-    // Update lyrics glow based on setting
+    // Update lyrics glow based on setting (only if UI is not hidden to avoid interference)
     const lyricsContainer = document.querySelector('[class^="_lyricsContainer"]');
-    if (lyricsContainer) {
+    if (lyricsContainer && !isHidden) {
         if (settings.lyricsGlowEnabled) {
             lyricsContainer.classList.remove('lyrics-glow-disabled');
             lyricsGlowStyleTag.css = lyricsGlow;
@@ -189,19 +193,51 @@ const updateRadiantLyricsNowPlayingBackground = function(): void {
 (window as any).updateRadiantLyricsNowPlayingBackground = updateRadiantLyricsNowPlayingBackground;
 
 const toggleRadiantLyrics = function(): void {
-    // Toggle the state first
-    isHidden = !isHidden;
+    const nowPlayingContainer = document.querySelector('[class*="_nowPlayingContainer"]') as HTMLElement;
     
     if (isHidden) {
+        // We're currently hidden, so we're about to show UI
+        // Add a class to immediately hide the unhide button with CSS
+        const unhideButton = document.querySelector('.unhide-ui-button') as HTMLElement;
+        if (unhideButton) {
+            unhideButton.classList.add('hide-immediately');
+        }
+        
+        // Toggle the state
+        isHidden = !isHidden;
+        
+        // Don't remove StyleTags completely, just remove the class to show elements again
+        if (nowPlayingContainer) {
+            nowPlayingContainer.classList.remove('radiant-lyrics-ui-hidden');
+        }
+        document.body.classList.remove('radiant-lyrics-ui-hidden');
+        // Remove styles after animation completes
+        setTimeout(() => {
+            if (!isHidden) {
+                lyricsStyleTag.remove();
+                baseStyleTag.remove();
+                playerBarStyleTag.remove();
+            }
+        }, 500); // Wait for fade animation to complete
+        
+        // Update button states normally
+        updateButtonStates();
+    } else {
+        // We're currently visible, so we're about to hide UI
+        // Toggle the state first
+        isHidden = !isHidden;
+        
         // Apply clean view styles
         updateRadiantLyricsStyles();
-    } else {
-        // Remove all clean view styles
-        lyricsStyleTag.remove();
-        baseStyleTag.remove();
-        playerBarStyleTag.remove();
+        // Add a class to the container to trigger CSS animations
+        if (nowPlayingContainer) {
+            nowPlayingContainer.classList.add('radiant-lyrics-ui-hidden');
+        }
+        document.body.classList.add('radiant-lyrics-ui-hidden');
+        
+        // Update button states immediately for hiding
+        updateButtonStates();
     }
-    updateButtonStates();
 };
 
 const createHideUIButton = function(): void {
@@ -293,8 +329,8 @@ const createUnhideUIButton = function(): void {
         // Style for top-right positioning within the Now Playing container (with safe margin)
         unhideUIButton.style.cssText = `
             position: absolute;
-            top: 20px;
-            right: 80px;
+            top: 10px;
+            right: 10px;
             background-color: rgba(255, 255, 255, 0.2);
             color: white;
             border: 1px solid rgba(255, 255, 255, 0.3);
diff --git a/plugins/radiant-lyrics-luna/src/player-bar-hidden.css b/plugins/radiant-lyrics-luna/src/player-bar-hidden.css
index 553a6f4..53fbb24 100644
--- a/plugins/radiant-lyrics-luna/src/player-bar-hidden.css
+++ b/plugins/radiant-lyrics-luna/src/player-bar-hidden.css
@@ -1,16 +1,15 @@
-/* Hide player bar when setting is disabled, but show on hover */
-[data-test="footer-player"] {
+/* Hide player bar when setting is disabled, but show on hover - only when UI is hidden */
+.radiant-lyrics-ui-hidden [data-test="footer-player"] {
     opacity: 0 !important;
-    transition: opacity 0.3s ease-in-out !important;
-    pointer-events: auto !important;
+    transition: opacity 0.5s ease-in-out !important;
 }
 
-[data-test="footer-player"]:hover {
+.radiant-lyrics-ui-hidden [data-test="footer-player"]:hover {
     opacity: 1 !important;
 }
 
-/* Also show player bar when hovering over the bottom area */
-body:has([data-test="footer-player"]:hover) [data-test="footer-player"],
-body [data-test="footer-player"]:hover {
+/* Also show player bar when hovering over the bottom area - only when UI is hidden */
+.radiant-lyrics-ui-hidden:has([data-test="footer-player"]:hover) [data-test="footer-player"],
+.radiant-lyrics-ui-hidden [data-test="footer-player"]:hover {
     opacity: 1 !important;
 } 
\ No newline at end of file
diff --git a/plugins/radiant-lyrics-luna/src/separated-lyrics.css b/plugins/radiant-lyrics-luna/src/separated-lyrics.css
index e61dc80..159ca7e 100644
--- a/plugins/radiant-lyrics-luna/src/separated-lyrics.css
+++ b/plugins/radiant-lyrics-luna/src/separated-lyrics.css
@@ -23,39 +23,28 @@
     src: url("https://excel.lexploits.top/extra/tidal/LyricsBold.woff2") format("woff2");
 }
 
-/* Tab and container visibility */
-[class*="tabItems"] {
+/* Tab and container visibility - only when UI is hidden */
+.radiant-lyrics-ui-hidden [class*="tabItems"] {
     opacity: 0 !important;
-    transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.4s ease-in-out;
 }
 
-[class*="_imageContainer"] {
-    margin-top: 40px !important;
-}
+/* Remove image container positioning - let it stay where it is */
 
-[class*="_tabItems"]:hover {
+.radiant-lyrics-ui-hidden [class*="_tabItems"]:hover {
     opacity: 1 !important;
 }
 
-[data-test="header-container"] {
-    opacity: 0;
-    margin: -40px;
+.radiant-lyrics-ui-hidden [data-test="header-container"] {
+    opacity: 0 !important;
+    transition: opacity 0.4s ease-in-out;
 }
 
-/* Hide bottom gradient */
-[class^="_bottomGradient"] {
-    visibility: hidden;
-}
+/* Keep bottom gradient visible - may be needed for lyrics scrolling */
 
-/* Credits button positioning */
-[aria-label="Show credits"] {
-    top: calc(var(--headerHeight) + 80px);
-}
+/* Remove credits button repositioning - let it stay where it is */
 
-/* Hide lyrics provider */
-[class^="_lyricsProvider"] {
-    visibility: hidden;
-}
+/* Keep lyrics provider visible - don't hide with UI */
 
 /* Sync button margin */
 [class^="_syncButton"] {
diff --git a/plugins/radiant-lyrics-luna/src/styles.css b/plugins/radiant-lyrics-luna/src/styles.css
index e7a2fa9..876b480 100644
--- a/plugins/radiant-lyrics-luna/src/styles.css
+++ b/plugins/radiant-lyrics-luna/src/styles.css
@@ -1,19 +1,28 @@
-[class*="tabItems"] {
+/* Only apply styles when UI is hidden */
+.radiant-lyrics-ui-hidden [class*="tabItems"] {
     opacity: 0 !important;
-    transition: opacity 0.3s ease-in-out;
+    transition: opacity 0.4s ease-in-out;
 }
 
-[class*="_imageContainer"] {
-    margin-top: 40px !important;
+/* Default state - visible */
+[class*="tabItems"] {
+    transition: opacity 0.4s ease-in-out;
 }
 
-[class*="_tabItems"]:hover {
+/* Remove image container positioning - let it stay where it is */
+
+.radiant-lyrics-ui-hidden [class*="_tabItems"]:hover {
     opacity: 1 !important;
 }
 
+.radiant-lyrics-ui-hidden [data-test="header-container"] {
+    opacity: 0 !important;
+    transition: opacity 0.4s ease-in-out;
+}
+
+/* Default state for header */
 [data-test="header-container"] {
-    opacity: 0;
-    margin: -40px;
+    transition: opacity 0.4s ease-in-out;
 }
 
 /* Only prevent specific text elements in player bar from being affected by margin adjustments */
@@ -25,64 +34,113 @@
     transform: none !important;
 }
 
-[class*="_nowPlayingContainer"] {
-    padding-left: 6%;
-    padding-top: 20px !important;
-}
+/* Remove all layout-changing rules - only fade buttons, keep everything else in place */
 
-/* Move main content areas up */
-[class*="_trackTitleContainer"],
-[class*="_artistContainer"],
-[class*="_albumContainer"] {
-    margin-top: -20px !important;
-}
-
-/* Move CoverArt and lyrics content up */
-[class*="_lyricsContainer"],
-[class*="_mediaContainer"] {
-    margin-top: -30px !important;
-}
-
-/* Move play queue content up to fill button space */
-[class*="_playQueueContainer"],
-[class*="_queueContainer"],
-[data-test="play-queue"],
-#playQueueSidebar {
-    margin-top: -40px !important;
-    padding-top: 10px !important;
-}
-
-/* Move play queue list content up - more aggressive */
-[class*="_playQueueList"],
-[class*="_queueList"],
-[class*="_trackList"] {
-    margin-top: -60px !important;
-    padding-top: 0px !important;
-}
-
-/* Target specific play queue elements more aggressively */
-#playQueueSidebar > div,
-#playQueueSidebar > div > div {
-    margin-top: -40px !important;
-    padding-top: 0px !important;
-}
-
-/* Override any existing padding in queue content area */
-[class*="_queueContent"],
-[class*="_playQueueContent"] {
-    margin-top: -50px !important;
-    padding-top: 20px !important;
+/* Immediate hide class for unhide button */
+.hide-immediately {
+    opacity: 0 !important;
+    visibility: hidden !important;
+    pointer-events: none !important;
+    transition: none !important;
 }
 
 [class^="_bar"] {
     background-color: transparent;
 }
 
-[class^="_bar"]>* {
-    opacity: 0;
+.radiant-lyrics-ui-hidden [class^="_bar"]>* {
+    opacity: 0 !important;
+    transition: opacity 0.4s ease-in-out;
 }
 
-/* Hide bottom left controls completely - no hover reveal */
+/* Show bar elements on hover */
+.radiant-lyrics-ui-hidden [class^="_bar"]:hover>*,
+.radiant-lyrics-ui-hidden [class^="_bar"]>*:hover {
+    opacity: 1 !important;
+}
+
+/* Default state for bar elements */
+[class^="_bar"]>* {
+    transition: opacity 0.4s ease-in-out;
+}
+
+/* Hide bottom left controls with smooth fade animation - keep space to prevent UI shifting */
+/* But exclude heart buttons in player bar */
+.radiant-lyrics-ui-hidden [data-test="add-to-playlist"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [data-test="remove-from-playlist"]:not([data-test="footer-player"] *), 
+.radiant-lyrics-ui-hidden [data-test="like-toggle"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [data-test="dislike-toggle"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [data-test="favorite-toggle"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [data-test="heart-button"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [data-test="playlist-add"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [class*="_trackActions"],
+.radiant-lyrics-ui-hidden [class*="_bottomLeftControls"],
+.radiant-lyrics-ui-hidden [class*="_actionButtons"],
+.radiant-lyrics-ui-hidden [class*="_favoriteButton"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [class*="_addToPlaylist"],
+.radiant-lyrics-ui-hidden [class*="_lowerLeft"],
+.radiant-lyrics-ui-hidden [class*="_bottomActions"],
+.radiant-lyrics-ui-hidden [class*="_mediaControls"] > div:first-child,
+.radiant-lyrics-ui-hidden button[title*="Add to"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[title*="Remove from"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[title*="Like"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[title*="Favorite"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[title*="Heart"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[aria-label*="Add to"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[aria-label*="Remove from"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[aria-label*="Like"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[aria-label*="Favorite"]:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[aria-label*="Heart"]:not([data-test="footer-player"] *),
+/* Target buttons in bottom left area specifically */
+.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] button[class*="_button"]:not(.unhide-ui-button),
+.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] [class*="_iconButton"]:not(.unhide-ui-button),
+/* Additional catch-all for bottom left area buttons */
+.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div > div:first-child button:not(.unhide-ui-button),
+.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div:first-child button:not(.unhide-ui-button) {
+    opacity: 0 !important;
+    transition: opacity 0.5s ease-in-out !important;
+}
+
+/* Show buttons on hover for accessibility */
+.radiant-lyrics-ui-hidden [data-test="add-to-playlist"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [data-test="remove-from-playlist"]:hover:not([data-test="footer-player"] *), 
+.radiant-lyrics-ui-hidden [data-test="like-toggle"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [data-test="dislike-toggle"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [data-test="favorite-toggle"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [data-test="heart-button"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [data-test="playlist-add"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [class*="_trackActions"]:hover,
+.radiant-lyrics-ui-hidden [class*="_bottomLeftControls"]:hover,
+.radiant-lyrics-ui-hidden [class*="_actionButtons"]:hover,
+.radiant-lyrics-ui-hidden [class*="_favoriteButton"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden [class*="_addToPlaylist"]:hover,
+.radiant-lyrics-ui-hidden [class*="_lowerLeft"]:hover,
+.radiant-lyrics-ui-hidden [class*="_bottomActions"]:hover,
+.radiant-lyrics-ui-hidden [class*="_mediaControls"] > div:first-child:hover,
+.radiant-lyrics-ui-hidden button[title*="Add to"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[title*="Remove from"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[title*="Like"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[title*="Favorite"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[title*="Heart"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[aria-label*="Add to"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[aria-label*="Remove from"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[aria-label*="Like"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[aria-label*="Favorite"]:hover:not([data-test="footer-player"] *),
+.radiant-lyrics-ui-hidden button[aria-label*="Heart"]:hover:not([data-test="footer-player"] *),
+/* Show buttons on hover in bottom left area */
+.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] button[class*="_button"]:hover:not(.unhide-ui-button),
+.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] [class*="_iconButton"]:hover:not(.unhide-ui-button),
+.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div > div:first-child button:hover:not(.unhide-ui-button),
+.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"] > div:first-child button:hover:not(.unhide-ui-button),
+/* Show buttons when hovering over their parent containers */
+.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]:hover button[class*="_button"]:not(.unhide-ui-button),
+.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]:hover [class*="_iconButton"]:not(.unhide-ui-button),
+.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]:hover > div > div:first-child button:not(.unhide-ui-button),
+.radiant-lyrics-ui-hidden [class*="_nowPlayingContainer"]:hover > div:first-child button:not(.unhide-ui-button) {
+    opacity: 1 !important;
+}
+
+/* Default state for control buttons */
 [data-test="add-to-playlist"],
 [data-test="remove-from-playlist"], 
 [data-test="like-toggle"],
@@ -108,13 +166,11 @@ button[aria-label*="Remove from"],
 button[aria-label*="Like"],
 button[aria-label*="Favorite"],
 button[aria-label*="Heart"],
-/* Target buttons in bottom left area specifically */
 [class*="_nowPlayingContainer"] button[class*="_button"]:not(.unhide-ui-button),
 [class*="_nowPlayingContainer"] [class*="_iconButton"]:not(.unhide-ui-button),
-/* Additional catch-all for bottom left area buttons */
 [class*="_nowPlayingContainer"] > div > div:first-child button:not(.unhide-ui-button),
 [class*="_nowPlayingContainer"] > div:first-child button:not(.unhide-ui-button) {
-    display: none !important;
+    transition: opacity 0.5s ease-in-out;
 }
 
 /* Keep the Unhide button always visible with special styling */