diff --git a/apps/client/src/stylesheets/theme-next/shell.css b/apps/client/src/stylesheets/theme-next/shell.css
index 5b11839e5..cd8574866 100644
--- a/apps/client/src/stylesheets/theme-next/shell.css
+++ b/apps/client/src/stylesheets/theme-next/shell.css
@@ -1145,12 +1145,18 @@ body.mobile .note-title {
 
 /* The "Change note icon" button */
 
-.note-icon-widget .note-icon {
+:root .note-icon-widget button.note-icon,
+:root .note-icon-widget button.note-icon:hover {
     border: none;
     border-radius: 8px;
 }
 
-.note-icon-widget .note-icon:hover {
+/* Dropdown open */
+:root .note-icon-widget button.note-icon.show {
+    background: var(--ck-editor-toolbar-dropdown-button-open-background);
+}
+
+:root .note-icon-widget button.note-icon:not(:disabled):hover {
     background: var(--icon-button-hover-background);
     color: var(--icon-button-hover-color);
 }