diff --git a/dribbblish.js b/dribbblish.js
index fce4934..401ec36 100644
--- a/dribbblish.js
+++ b/dribbblish.js
@@ -329,13 +329,16 @@ DribbblishShared.config.register({
     name: "Round Sidebar Icons",
     description: "If the Sidebar Icons should be round instead of square",
     defaultValue: false,
-    onChange: (val) => {
-        if (val) {
-            document.documentElement.style.setProperty("--sidebar-icons-border-radius", "50%");
-        } else {
-            document.documentElement.style.setProperty("--sidebar-icons-border-radius", "var(--image-radius)");
-        }
-    }
+    onChange: (val) => document.documentElement.style.setProperty("--sidebar-icons-border-radius", val ? "50%" : "var(--image-radius)")
+});
+
+DribbblishShared.config.register({
+    type: "checkbox",
+    key: "sidebarHoverAnimation",
+    name: "Sidebar Hover Animation",
+    description: "If the Sidebar Icons should have an animated background on hover",
+    defaultValue: true,
+    onChange: (val) => document.documentElement.style.setProperty("--sidebar-icons-hover-animation", val ? "1" : "0")
 });
 
 DribbblishShared.config.register({
@@ -365,9 +368,7 @@ DribbblishShared.config.register({
             }
         `);
     },
-    onChange: (val) => {
-        document.body.setAttribute("hide-ads", val ? "" : null);
-    }
+    onChange: (val) => document.body.setAttribute("hide-ads", val ? "" : null)
 });
 
 waitForElement(["#main"], () => {
diff --git a/user.css b/user.css
index 0ee9b0a..15293d5 100644
--- a/user.css
+++ b/user.css
@@ -439,6 +439,7 @@ html {
 .main-rootlist-rootlistItemLink:visited,
 .main-rootlist-rootlistContent span,
 .main-navBar-entryPoints span {
+    z-index: 999;
     color: var(--spice-sidebar-text)
 }
 
@@ -1113,18 +1114,30 @@ span.main-userWidget-displayName,
     position: relative;
 }
 
+.main-navBar-navBarItem::before,
+.main-rootlist-rootlistItem::before,
+.main-rootlist-rootlistItemLinkActive::before,
+.main-collectionLinkButton-collectionLinkButton::before,
+.main-collectionLinkButton-selected::before,
+.main-createPlaylistButton-button::before {
+    content: "";
+    position: absolute;
+    width: 100%;
+    inset: 0px;
+    left: -200%;
+    background-color: rgba(var(--spice-rgb-main), 0.4);
+    border-radius: var(--image-radius);
+    pointer-events: none;
+    transition: left calc(var(--sidebar-icons-hover-animation) * 0.2s) ease;
+}
+
 .main-navBar-navBarItem:hover::before,
 .main-rootlist-rootlistItem:hover::before,
 .main-rootlist-rootlistItemLinkActive::before,
 .main-collectionLinkButton-collectionLinkButton:hover::before,
 .main-collectionLinkButton-selected::before,
 .main-createPlaylistButton-button:hover::before {
-    content: "";
-    position: absolute;
-    inset: 0px;
-    background-color: rgba(var(--spice-rgb-main), 0.4);
-    border-radius: var(--image-radius);
-    pointer-events: none;
+    left: 0px;
 }
 
 .main-rootlist-rootlist .main-navBar-navBarItem:hover::before {