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

@@ -1,9 +1,10 @@
 /**
  * @ai-summary Email notification toggle component
- * @ai-context Mobile-first responsive toggle switch for email notifications
+ * @ai-context Uses MUI Switch to match SettingsPage pill-style toggles
  */
 
 import React from 'react';
+import { Box, Switch, Typography } from '@mui/material';
 
 interface EmailNotificationToggleProps {
   enabled: boolean;
@@ -19,32 +20,16 @@ export const EmailNotificationToggle: React.FC<EmailNotificationToggleProps> = (
   className = '',
 }) => {
   return (
-    <div className={`flex items-center justify-between gap-3 ${className}`}>
+    <Box className={className} sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
-      <label className="text-sm font-medium text-slate-700 dark:text-slate-300">
+      <Typography variant="body2" fontWeight={500} color="text.secondary">
         {label}
-      </label>
+      </Typography>
-      <button
+      <Switch
-        type="button"
+        checked={enabled}
-        role="switch"
+        onChange={(e) => onChange(e.target.checked)}
-        aria-checked={enabled}
+        color="primary"
-        aria-label={label}
+        inputProps={{ 'aria-label': label }}
-        onClick={() => onChange(!enabled)}
+      />
-        className={`
+    </Box>
-          relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full
-          border-2 border-transparent transition-colors duration-200 ease-in-out
-          focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
-          ${enabled ? 'bg-primary-600' : 'bg-slate-300 dark:bg-slate-600'}
-        `}
-        style={{ minWidth: '44px', minHeight: '44px', padding: '9px 0' }}
-      >
-        <span
-          className={`
-            pointer-events-none inline-block h-5 w-5 transform rounded-full
-            bg-white shadow ring-0 transition duration-200 ease-in-out
-            ${enabled ? 'translate-x-5' : 'translate-x-0'}
-          `}
-        />
-      </button>
-    </div>
   );
 };