diff --git a/client/src/app/providers/AppProviders.tsx b/client/src/app/providers/AppProviders.tsx
index 344264a..293f057 100644
--- a/client/src/app/providers/AppProviders.tsx
+++ b/client/src/app/providers/AppProviders.tsx
@@ -1,6 +1,6 @@
 import { type PropsWithChildren, useMemo } from 'react'
 import CssBaseline from '@mui/material/CssBaseline'
-import { ThemeProvider, createTheme } from '@mui/material/styles'
+import { alpha, ThemeProvider, createTheme } from '@mui/material/styles'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ThemeControllerProvider, useThemeController } from '@/app/providers/theme-controller'
 import { SseProvider } from './SseProvider'
@@ -223,89 +223,89 @@ function AppThemeInner({ children }: PropsWithChildren) {
                   marginLeft: 8,
                 },
               },
-              colorSuccess: {
-                bgcolor: isDark ? 'rgba(102,187,106,0.08)' : '#EDF3EC',
-                borderColor: isDark ? 'rgba(102,187,106,0.2)' : '#C5DFC2',
-                color: isDark ? '#A5D6A7' : '#346538',
-                '& .MuiAlert-icon': {
-                  color: isDark ? '#A5D6A7' : '#346538',
-                },
-                '&.MuiAlert-outlined': {
-                  bgcolor: 'transparent',
-                  borderColor: isDark ? 'rgba(102,187,106,0.3)' : '#C5DFC2',
-                  color: isDark ? '#A5D6A7' : '#346538',
-                  '& .MuiAlert-icon': {
-                    color: isDark ? '#A5D6A7' : '#346538',
+              colorSuccess: ({ theme }) => {
+                const isDark = theme.palette.mode === 'dark'
+                const p = theme.palette.success
+                return {
+                  bgcolor: isDark ? alpha(p.light, 0.08) : alpha(p.main, 0.08),
+                  borderColor: isDark ? alpha(p.light, 0.2) : alpha(p.main, 0.2),
+                  color: isDark ? p.light : p.dark,
+                  '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
+                  '&.MuiAlert-outlined': {
+                    bgcolor: 'transparent',
+                    borderColor: isDark ? alpha(p.light, 0.3) : alpha(p.main, 0.3),
+                    color: isDark ? p.light : p.dark,
+                    '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
                   },
-                },
-                '&.MuiAlert-filled': {
-                  bgcolor: isDark ? 'rgba(102,187,106,0.15)' : '#346538',
-                  borderColor: 'transparent',
-                  color: isDark ? '#E8F5E9' : '#FFFFFF',
-                },
+                  '&.MuiAlert-filled': {
+                    bgcolor: isDark ? alpha(p.light, 0.15) : p.dark,
+                    borderColor: 'transparent',
+                    color: isDark ? alpha(p.light, 0.9) : '#FFFFFF',
+                  },
+                }
               },
-              colorError: {
-                bgcolor: isDark ? 'rgba(239,83,80,0.08)' : '#FDEBEC',
-                borderColor: isDark ? 'rgba(239,83,80,0.2)' : '#F5C6C7',
-                color: isDark ? '#EF9A9A' : '#9F2F2D',
-                '& .MuiAlert-icon': {
-                  color: isDark ? '#EF9A9A' : '#9F2F2D',
-                },
-                '&.MuiAlert-outlined': {
-                  bgcolor: 'transparent',
-                  borderColor: isDark ? 'rgba(239,83,80,0.3)' : '#F5C6C7',
-                  color: isDark ? '#EF9A9A' : '#9F2F2D',
-                  '& .MuiAlert-icon': {
-                    color: isDark ? '#EF9A9A' : '#9F2F2D',
+              colorError: ({ theme }) => {
+                const isDark = theme.palette.mode === 'dark'
+                const p = theme.palette.error
+                return {
+                  bgcolor: isDark ? alpha(p.light, 0.08) : alpha(p.main, 0.08),
+                  borderColor: isDark ? alpha(p.light, 0.2) : alpha(p.main, 0.2),
+                  color: isDark ? p.light : p.dark,
+                  '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
+                  '&.MuiAlert-outlined': {
+                    bgcolor: 'transparent',
+                    borderColor: isDark ? alpha(p.light, 0.3) : alpha(p.main, 0.3),
+                    color: isDark ? p.light : p.dark,
+                    '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
                   },
-                },
-                '&.MuiAlert-filled': {
-                  bgcolor: isDark ? 'rgba(239,83,80,0.15)' : '#9F2F2D',
-                  borderColor: 'transparent',
-                  color: isDark ? '#FFEBEE' : '#FFFFFF',
-                },
+                  '&.MuiAlert-filled': {
+                    bgcolor: isDark ? alpha(p.light, 0.15) : p.dark,
+                    borderColor: 'transparent',
+                    color: isDark ? alpha(p.light, 0.9) : '#FFFFFF',
+                  },
+                }
               },
-              colorWarning: {
-                bgcolor: isDark ? 'rgba(255,183,77,0.08)' : '#FBF3DB',
-                borderColor: isDark ? 'rgba(255,183,77,0.2)' : '#F0DCA0',
-                color: isDark ? '#FFD54F' : '#956400',
-                '& .MuiAlert-icon': {
-                  color: isDark ? '#FFD54F' : '#956400',
-                },
-                '&.MuiAlert-outlined': {
-                  bgcolor: 'transparent',
-                  borderColor: isDark ? 'rgba(255,183,77,0.3)' : '#F0DCA0',
-                  color: isDark ? '#FFD54F' : '#956400',
-                  '& .MuiAlert-icon': {
-                    color: isDark ? '#FFD54F' : '#956400',
+              colorWarning: ({ theme }) => {
+                const isDark = theme.palette.mode === 'dark'
+                const p = theme.palette.warning
+                return {
+                  bgcolor: isDark ? alpha(p.light, 0.08) : alpha(p.main, 0.08),
+                  borderColor: isDark ? alpha(p.light, 0.2) : alpha(p.main, 0.2),
+                  color: isDark ? p.light : p.dark,
+                  '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
+                  '&.MuiAlert-outlined': {
+                    bgcolor: 'transparent',
+                    borderColor: isDark ? alpha(p.light, 0.3) : alpha(p.main, 0.3),
+                    color: isDark ? p.light : p.dark,
+                    '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
                   },
-                },
-                '&.MuiAlert-filled': {
-                  bgcolor: isDark ? 'rgba(255,183,77,0.15)' : '#956400',
-                  borderColor: 'transparent',
-                  color: isDark ? '#FFF8E1' : '#FFFFFF',
-                },
+                  '&.MuiAlert-filled': {
+                    bgcolor: isDark ? alpha(p.light, 0.15) : p.dark,
+                    borderColor: 'transparent',
+                    color: isDark ? alpha(p.light, 0.9) : '#FFFFFF',
+                  },
+                }
               },
-              colorInfo: {
-                bgcolor: isDark ? 'rgba(121,134,203,0.08)' : '#E1F3FE',
-                borderColor: isDark ? 'rgba(121,134,203,0.2)' : '#B8D8F0',
-                color: isDark ? '#9FA8DA' : '#1F6C9F',
-                '& .MuiAlert-icon': {
-                  color: isDark ? '#9FA8DA' : '#1F6C9F',
-                },
-                '&.MuiAlert-outlined': {
-                  bgcolor: 'transparent',
-                  borderColor: isDark ? 'rgba(121,134,203,0.3)' : '#B8D8F0',
-                  color: isDark ? '#9FA8DA' : '#1F6C9F',
-                  '& .MuiAlert-icon': {
-                    color: isDark ? '#9FA8DA' : '#1F6C9F',
+              colorInfo: ({ theme }) => {
+                const isDark = theme.palette.mode === 'dark'
+                const p = theme.palette.info
+                return {
+                  bgcolor: isDark ? alpha(p.light, 0.08) : alpha(p.main, 0.08),
+                  borderColor: isDark ? alpha(p.light, 0.2) : alpha(p.main, 0.2),
+                  color: isDark ? p.light : p.dark,
+                  '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
+                  '&.MuiAlert-outlined': {
+                    bgcolor: 'transparent',
+                    borderColor: isDark ? alpha(p.light, 0.3) : alpha(p.main, 0.3),
+                    color: isDark ? p.light : p.dark,
+                    '& .MuiAlert-icon': { color: isDark ? p.light : p.dark },
                   },
-                },
-                '&.MuiAlert-filled': {
-                  bgcolor: isDark ? 'rgba(121,134,203,0.15)' : '#1F6C9F',
-                  borderColor: 'transparent',
-                  color: isDark ? '#E8EAF6' : '#FFFFFF',
-                },
+                  '&.MuiAlert-filled': {
+                    bgcolor: isDark ? alpha(p.light, 0.15) : p.dark,
+                    borderColor: 'transparent',
+                    color: isDark ? alpha(p.light, 0.9) : '#FFFFFF',
+                  },
+                }
               },
             },
           },
diff --git a/client/src/shared/ui/NotificationStack/NotificationStack.tsx b/client/src/shared/ui/NotificationStack/NotificationStack.tsx
index 7ab3c73..bd1fef7 100644
--- a/client/src/shared/ui/NotificationStack/NotificationStack.tsx
+++ b/client/src/shared/ui/NotificationStack/NotificationStack.tsx
@@ -13,15 +13,16 @@ export function NotificationStack() {
 
   return (
     <Stack
-      spacing={1}
+      spacing={1.5}
       sx={{
         position: 'fixed',
-        bottom: 80,
+        bottom: 88,
         left: '50%',
         transform: 'translateX(-50%)',
         zIndex: 2000,
         width: 'auto',
-        maxWidth: 400,
+        minWidth: 360,
+        maxWidth: 440,
       }}
     >
       {notifications.map((n) => (
@@ -31,41 +32,36 @@ export function NotificationStack() {
           autoHideDuration={n.autoHideDuration}
           onClose={() => dismissNotification(n.id)}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
-          sx={{
-            '& .MuiSnackbarContent-root': {
-              borderRadius: 12,
-              border: '1px solid',
-              borderColor: 'rgba(0,0,0,0.06)',
-              bgcolor: 'background.paper',
-              boxShadow: '0 4px 20px rgba(0,0,0,0.08)',
-            },
-          }}
+          sx={{ position: 'static' }}
         >
           <Alert
             severity={n.type}
             variant="standard"
             onClose={() => dismissNotification(n.id)}
             sx={{
-              bgcolor: 'transparent',
-              border: 'none',
-              boxShadow: 'none',
-              p: 1.5,
+              width: '100%',
+              px: 2,
+              py: 1.5,
               alignItems: 'center',
               '& .MuiAlert-icon': {
-                padding: 0,
+                py: 0.5,
                 mr: 1.5,
                 display: 'flex',
                 alignItems: 'center',
               },
               '& .MuiAlert-message': {
-                padding: 0,
+                py: 0.5,
                 fontSize: '0.875rem',
                 fontWeight: 600,
+                lineHeight: 1.5,
               },
               '& .MuiAlert-action': {
-                padding: 0,
-                mr: 0,
-                ml: 1,
+                py: 0.5,
+                pr: 0,
+                ml: 1.5,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 0.5,
               },
             }}
             action={
@@ -79,11 +75,12 @@ export function NotificationStack() {
                       navigate(n.actionPath!)
                     }}
                     sx={{
-                      fontWeight: 600,
+                      fontWeight: 700,
                       fontSize: '0.8125rem',
                       px: 1.5,
                       py: 0.5,
                       borderRadius: 8,
+                      whiteSpace: 'nowrap',
                       color: 'success.main',
                       '&:hover': {
                         bgcolor: 'action.hover',
diff --git a/server/prisma/prisma/dev.db b/server/prisma/prisma/dev.db
index 1ef69fb..4c1a5c9 100644
Binary files a/server/prisma/prisma/dev.db and b/server/prisma/prisma/dev.db differ