frontend/src/features/notifications/components/NotificationBell.tsx

@@ -130,8 +130,12 @@ export const NotificationBell: React.FC = () => {
             <CircularProgress size={24} />
           </Box>
         ) : notifications.length === 0 ? (
-          <Box sx={{ p: 3, textAlign: 'center' }}>
-            <Typography color="text.secondary">No notifications</Typography>
+          <Box sx={{ p: 4, textAlign: 'center' }}>
+            <NotificationsIcon sx={{ fontSize: 40, color: 'text.disabled', mb: 1 }} />
+            <Typography color="text.secondary" fontWeight={500}>No notifications</Typography>
+            <Typography variant="caption" color="text.disabled">
+              You're all caught up
+            </Typography>
           </Box>
         ) : (
           <List sx={{ py: 0, maxHeight: 360, overflow: 'auto' }}>