diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index dbe4701368..1705dc2b76 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -367,7 +367,7 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .note-split.with-hue,
 .quick-edit-dialog-wrapper.with-hue,
 .nested-note-list-item.with-hue,
-.note-book-card .note-book-header.with-hue {
+.note-book-card.with-hue .note-book-header {
     --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%);
@@ -377,3 +377,8 @@ body .todo-list input[type="checkbox"]:not(:checked):before {
 .quick-edit-dialog-wrapper.with-hue *::selection {
     --selection-background-color: hsl(var(--custom-color-hue), 49.2%, 35%);
 }
+
+.note-book-card.with-hue {
+    --card-background-color: hsl(var(--custom-color-hue), 6%, 21%);
+    --card-background-hover-color: hsl(var(--custom-color-hue), 8%, 25%);
+}
\ 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 3cbf47a8e9..fe604906dc 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -337,7 +337,7 @@
 .note-split.with-hue,
 .quick-edit-dialog-wrapper.with-hue,
 .nested-note-list-item.with-hue,
-.note-book-card .note-book-header.with-hue {
+.note-book-card.with-hue .note-book-header {
     --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%);
@@ -347,3 +347,8 @@
 .quick-edit-dialog-wrapper.with-hue *::selection {
     --selection-background-color: hsl(var(--custom-color-hue), 60%, 90%);
 }
+
+.note-book-card.with-hue {
+    --card-background-color: hsl(var(--custom-color-hue), 21%, 94%);
+    --card-background-hover-color: hsl(var(--custom-color-hue), 21%, 87%);
+}
\ No newline at end of file
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index 9f7075df3b..4afc4e1e02 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -44,7 +44,7 @@
 }
 
 .nested-note-list-item.use-note-color,
-.note-book-header.use-note-color {
+.note-book-card.use-note-color .note-book-header {
     span.tn-icon + span,
     .tn-icon,
     .rendered-note-attributes {
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index fc32be9957..6ede859681 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
@@ -160,14 +160,14 @@ function GridNoteCard(props: GridNoteCardProps) {
     const notePath = getNotePath(props.parentNote, props.note);
 
     return (
-        <CardFrame className={clsx("note-book-card", "no-tooltip-preview", "block-link", {
+        <CardFrame className={clsx("note-book-card", "no-tooltip-preview", "block-link", props.note.getColorClass(), {
                 "archived": props.note.isArchived
              })}
              data-href={`#${notePath}`}
              data-note-id={props.note.noteId}
              onClick={(e) => link.goToLink(e)}
         >
-            <h5 className={clsx("note-book-header", props.note.getColorClass())}>
+            <h5 className={clsx("note-book-header")}>
                 <Icon className="note-icon" icon={props.note.getIcon()} />
                 <NoteLink className="note-book-title"
                           notePath={notePath}