diff --git a/admin-spa/src/components/nav/SubmenuBar.tsx b/admin-spa/src/components/nav/SubmenuBar.tsx
index afbe4be..cc41394 100644
--- a/admin-spa/src/components/nav/SubmenuBar.tsx
+++ b/admin-spa/src/components/nav/SubmenuBar.tsx
@@ -22,8 +22,8 @@ export default function SubmenuBar({ items = [], fullscreen = false, headerVisib
         <div className="flex gap-2 overflow-x-auto no-scrollbar">
           {items.map((it) => {
             const key = `${it.label}-${it.path || it.href}`;
-            // Fix: Always use exact match to prevent first submenu from being always active
-            const isActive = !!it.path && pathname === it.path;
+            // Check if current path starts with the submenu path (for sub-pages like /settings/notifications/staff)
+            const isActive = !!it.path && (pathname === it.path || pathname.startsWith(it.path + '/'));
             const cls = [
               'ui-ctrl inline-flex items-center gap-2 rounded-md px-2.5 py-1.5 border text-sm whitespace-nowrap',
               'focus:outline-none focus:ring-0 focus:shadow-none',
diff --git a/admin-spa/src/routes/Settings/Notifications/Customer/Events.tsx b/admin-spa/src/routes/Settings/Notifications/Customer/Events.tsx
index 1130bcd..63c82dc 100644
--- a/admin-spa/src/routes/Settings/Notifications/Customer/Events.tsx
+++ b/admin-spa/src/routes/Settings/Notifications/Customer/Events.tsx
@@ -119,30 +119,32 @@ export default function CustomerEvents() {
                   </div>
                 </div>
 
-                <div className="space-y-2 pl-4">
+                <div className="space-y-3">
                   {enabledChannels.map((channel: NotificationChannel) => {
                     const channelSettings = event.channels[channel.id];
                     const isEnabled = channelSettings?.enabled || false;
                     const recipient = channelSettings?.recipient || 'customer';
 
                     return (
-                      <div key={channel.id} className="flex items-center justify-between py-2">
+                      <div key={channel.id} className="flex items-center justify-between p-3 rounded-lg border bg-card">
                         <div className="flex items-center gap-3">
-                          <div className={isEnabled ? 'text-green-600' : 'text-muted-foreground'}>
+                          <div className={`p-2 rounded-lg ${isEnabled ? 'bg-green-500/20 text-green-600' : 'bg-muted text-muted-foreground'}`}>
                             {getChannelIcon(channel.id)}
                           </div>
                           <div>
                             <div className="flex items-center gap-2">
                               <span className="text-sm font-medium">{channel.label}</span>
                               {channel.builtin && (
-                                <Badge variant="outline" className="text-xs">
+                                <Badge variant="secondary" className="text-xs">
                                   {__('Built-in')}
                                 </Badge>
                               )}
                             </div>
-                            <div className="text-xs text-muted-foreground">
-                              {__('Recipient')}: {recipient}
-                            </div>
+                            {isEnabled && (
+                              <span className="text-xs text-muted-foreground">
+                                {__('Send to')}: {recipient === 'admin' ? __('Admin') : recipient === 'customer' ? __('Customer') : __('Both')}
+                              </span>
+                            )}
                           </div>
                         </div>
                         <Switch