diff --git a/src/components/Dashboard/context/NotificationContext.jsx b/src/components/Dashboard/context/NotificationContext.jsx
index 4449c5c..7fff887 100644
--- a/src/components/Dashboard/context/NotificationContext.jsx
+++ b/src/components/Dashboard/context/NotificationContext.jsx
@@ -146,7 +146,7 @@ const NotificationProvider = ({ children }) => {
     }
     const unregister = registerNotificationListener(handleNotification)
     return unregister
-  }, [authenticated, registerNotificationListener, api])
+  }, [authenticated, registerNotificationListener, api, deleteNotification])
 
   return (
     <NotificationContext.Provider
diff --git a/src/components/Dashboard/context/ThemeContext.jsx b/src/components/Dashboard/context/ThemeContext.jsx
index ab6cdf5..10932f1 100644
--- a/src/components/Dashboard/context/ThemeContext.jsx
+++ b/src/components/Dashboard/context/ThemeContext.jsx
@@ -4,6 +4,20 @@ import PropTypes from 'prop-types'
 
 const ThemeContext = createContext()
 
+const COLORS = {
+  colorPrimary: '#0091FF',
+  colorSuccess: '#30D158',
+  colorWarning: '#FF9230',
+  colorError: '#FF4245',
+  colorInfo: '#0A84FF',
+  colorLink: '#5AC8F5',
+  colorCyan: '#5AC8F5',
+  colorPink: '#FF69B4',
+  colorPurple: '#800080',
+  colorMagenta: '#FF00FF',
+  colorVolcano: '#FF4500'
+}
+
 export const ThemeProvider = ({ children }) => {
   const [isSystem, setIsSystem] = useState(() => {
     const savedSystem = sessionStorage.getItem('isSystem')
@@ -82,45 +96,31 @@ export const ThemeProvider = ({ children }) => {
     return isCompact ? [theme.compactAlgorithm, baseAlgorithm] : [baseAlgorithm]
   }
 
-  const colors = {
-    colorPrimary: '#0091FF',
-    colorSuccess: '#30D158',
-    colorWarning: '#FF9230',
-    colorError: '#FF4245',
-    colorInfo: '#0A84FF',
-    colorLink: '#5AC8F5',
-    colorCyan: '#5AC8F5',
-    colorPink: '#FF69B4',
-    colorPurple: '#800080',
-    colorMagenta: '#FF00FF',
-    colorVolcano: '#FF4500'
-  }
-
   const getColors = () => {
-    return colors
+    return COLORS
   }
 
   // Set CSS custom properties for theme colors
   useEffect(() => {
     const root = document.documentElement
-    root.style.setProperty('--color-primary', colors.colorPrimary)
-    root.style.setProperty('--color-success', colors.colorSuccess)
-    root.style.setProperty('--color-warning', colors.colorWarning)
-    root.style.setProperty('--color-error', colors.colorError)
-    root.style.setProperty('--color-info', colors.colorInfo)
-    root.style.setProperty('--color-link', colors.colorLink)
-    root.style.setProperty('--color-cyan', colors.colorCyan)
-    root.style.setProperty('--color-pink', colors.colorPink)
-    root.style.setProperty('--color-purple', colors.colorPurple)
-    root.style.setProperty('--color-magenta', colors.colorMagenta)
-    root.style.setProperty('--color-volcano', colors.colorVolcano)
+    root.style.setProperty('--color-primary', COLORS.colorPrimary)
+    root.style.setProperty('--color-success', COLORS.colorSuccess)
+    root.style.setProperty('--color-warning', COLORS.colorWarning)
+    root.style.setProperty('--color-error', COLORS.colorError)
+    root.style.setProperty('--color-info', COLORS.colorInfo)
+    root.style.setProperty('--color-link', COLORS.colorLink)
+    root.style.setProperty('--color-cyan', COLORS.colorCyan)
+    root.style.setProperty('--color-pink', COLORS.colorPink)
+    root.style.setProperty('--color-purple', COLORS.colorPurple)
+    root.style.setProperty('--color-magenta', COLORS.colorMagenta)
+    root.style.setProperty('--color-volcano', COLORS.colorVolcano)
     root.style.setProperty('--layout-header-bg', isDarkMode ? '#141414' : '#ffffff')
   }, [isDarkMode])
 
   const themeConfig = {
     algorithm: getThemeAlgorithm(),
     token: {
-      ...colors,
+      ...COLORS,
       borderRadius: '12px'
     },
     components: {