diff --git a/apps/client/src/stylesheets/theme-next-dark.css b/apps/client/src/stylesheets/theme-next-dark.css
index 94f6254d25..dbe4701368 100644
--- a/apps/client/src/stylesheets/theme-next-dark.css
+++ b/apps/client/src/stylesheets/theme-next-dark.css
@@ -315,7 +315,7 @@
 
 #left-pane .fancytree-node.tinted,
 .nested-note-list-item.use-note-color,
-.note-book-card.use-note-color {
+.note-book-card .note-book-header.use-note-color {
     --custom-color: var(--dark-theme-custom-color);
 
     /* The background color of the active item in the note tree.
@@ -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.with-hue {
+.note-book-card .note-book-header.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%);
diff --git a/apps/client/src/stylesheets/theme-next-light.css b/apps/client/src/stylesheets/theme-next-light.css
index a4d3eced8a..3cbf47a8e9 100644
--- a/apps/client/src/stylesheets/theme-next-light.css
+++ b/apps/client/src/stylesheets/theme-next-light.css
@@ -309,7 +309,7 @@
 
 #left-pane .fancytree-node.tinted,
 .nested-note-list-item.use-note-color,
-.note-book-card.use-note-color {
+.note-book-card .note-book-header.use-note-color {
     --custom-color: var(--light-theme-custom-color);
 
     /* The background color of the active item in the note tree.
@@ -337,7 +337,7 @@
 .note-split.with-hue,
 .quick-edit-dialog-wrapper.with-hue,
 .nested-note-list-item.with-hue,
-.note-book-card.with-hue {
+.note-book-card .note-book-header.with-hue {
     --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%);
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.css b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
index c39b5a049c..f7ada94514 100644
--- a/apps/client/src/widgets/collections/legacy/ListOrGridView.css
+++ b/apps/client/src/widgets/collections/legacy/ListOrGridView.css
@@ -21,6 +21,7 @@
 
     .tn-icon {
         font-size: 1.2em;
+        margin-inline-end: 8px;
     }
 
     .note-book-title {
@@ -36,8 +37,8 @@
     }
 }
 
-.note-book-card.use-note-color,
-.note-book-card.use-note-color {
+.note-book-card-note-color,
+.note-book-header.use-note-color {
     span.tn-icon + span,
     .tn-icon,
     .rendered-note-attributes {
@@ -155,7 +156,6 @@
     }
 
     .tn-icon {
-        margin-inline-end: 8px;
         color: var(--note-list-view-icon-color);
     }
 
diff --git a/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx b/apps/client/src/widgets/collections/legacy/ListOrGridView.tsx
index a6fd7f0797..54ee065fd3 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 (
-        <div className={clsx("note-book-card", "no-tooltip-preview", "block-link", props.note.getColorClass(), {
+        <div className={clsx("note-book-card", "no-tooltip-preview", "block-link", {
                 "archived": props.note.isArchived
              })}
              data-href={`#${notePath}`}
              data-note-id={props.note.noteId}
              onClick={(e) => link.goToLink(e)}
         >
-            <h5 className="note-book-header">
+            <h5 className={clsx("note-book-header", props.note.getColorClass())}>
                 <Icon className="note-icon" icon={props.note.getIcon()} />
                 <NoteLink className="note-book-title"
                           notePath={notePath}