diff --git a/web/app.config.ts b/web/app.config.ts
index 789ffe1c7..4b223de73 100644
--- a/web/app.config.ts
+++ b/web/app.config.ts
@@ -1,3 +1,11 @@
+// Objective: avoid hard-coded custom colors wherever possible, letting our theme system manage
+// styling consistently. During the migration from the legacy WebGUI, some components still depend
+// on specific colors to maintain visual continuity. This config file centralizes all temporary
+// overrides required for that transition.
+//
+// Pending migration cleanup:
+// - Notifications/Sidebar.vue → notification bell has temporary custom hover color to match legacy styles.
+
 export default {
   ui: {
     colors: {
diff --git a/web/src/components/Notifications/Sidebar.vue b/web/src/components/Notifications/Sidebar.vue
index 57693f790..542881e53 100644
--- a/web/src/components/Notifications/Sidebar.vue
+++ b/web/src/components/Notifications/Sidebar.vue
@@ -160,7 +160,7 @@ const tabs = computed(() => [
     <UButton
       variant="ghost"
       color="neutral"
-      class="text-inverted hover:text-current"
+      class="text-inverted hover:bg-[color-mix(in_oklab,hsl(var(--accent))_20%,transparent)]"
       @click="
         () => {
           isOpen = true;