Improve the frontend and repository layer

frontend/src/components/layout/Header/Header.tsx

@@ -7,7 +7,7 @@ import { useTheme } from '../../../contexts/ThemeContext';
 import { useNotifications } from '../../../hooks/useNotifications';
 import { useHasAccess } from '../../../hooks/useAccessControl';
 import { Button } from '../../ui';
-import { Badge } from '../../ui';
+import { CountBadge } from '../../ui';
 import { TenantSwitcher } from '../../ui/TenantSwitcher';
 import { ThemeToggle } from '../../ui/ThemeToggle';
 import { NotificationPanel } from '../../ui/NotificationPanel/NotificationPanel';
@@ -258,13 +258,13 @@ export const Header = forwardRef<HeaderRef, HeaderProps>(({
                   unreadCount > 0 && "text-[var(--color-warning)]"
                 )} />
                 {unreadCount > 0 && (
-                  <Badge
+                  <CountBadge
+                    count={unreadCount}
+                    max={99}
                     variant="error"
                     size="sm"
-                    className="absolute -top-1 -right-1 min-w-[18px] h-[18px] text-xs flex items-center justify-center"
-                  >
-                    {unreadCount > 99 ? '99+' : unreadCount}
-                  </Badge>
+                    overlay
+                  />
                 )}
               </Button>