diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index 574476806..ff1482399 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -329,4 +329,5 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .note-split.with-hue {
     --note-icon-custom-background-color: hsl(var(--custom-color-hue), 15.8%, 30.9%);
     --note-icon-custom-color: hsl(var(--custom-color-hue), 100%, 76.5%);
+    --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 28.3%, 36.7%);
 }
\ No newline at end of file
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index 30396e854..1d819576a 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -304,5 +304,5 @@
     */
     --note-icon-custom-background-color: hsl(var(--custom-color-hue), 44.5%, 43.1%);
     --note-icon-custom-color: hsl(var(--custom-color-hue), 91.3%, 91%);
-
+    --note-icon-hover-custom-background-color: hsl(var(--custom-color-hue), 55.1%, 50.2%);
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/note_icon.css b/apps/client/src/widgets/note_icon.css
index 7bcb794a4..80e0732f9 100644
--- a/apps/client/src/widgets/note_icon.css
+++ b/apps/client/src/widgets/note_icon.css
@@ -107,7 +107,7 @@ body.experimental-feature-new-layout {
         }
 
         &:hover:not(.bx-empty:disabled)::after {
-            background: var(--note-icon-button-hover-background-color);
+            background: var(--note-icon-hover-custom-background-color, --note-icon-button-hover-background-color);
             transition: background 200ms ease-out;
         }
     }