update setup wizard colors (they still ugly)

src/components/SetupWizard.tsx

···
 
 export default function SetupWizard({ isOpen, onClose, onComplete, currentSettings }: SetupWizardProps) {
   const [wizardStep, setWizardStep] = useState(0);
-  const [selectedPlatform, setSelectedPlatform] = useState<string | null>(null);
+  const [selectedPlatforms, setSelectedPlatforms] = useState<Set<string>>(new Set());
   const [platformDestinations, setPlatformDestinations] = useState<PlatformDestinations>(
     currentSettings.platformDestinations
   );
···
     onClose();
   };
 
+  const togglePlatform = (platformKey: string) => {
+    const newSelected = new Set(selectedPlatforms);
+    if (newSelected.has(platformKey)) {
+      newSelected.delete(platformKey);
+    } else {
+      newSelected.add(platformKey);
+    }
+    setSelectedPlatforms(newSelected);
+  };
+
+  // Get platforms to show on destinations page (only selected ones)
+  const platformsToShow = selectedPlatforms.size > 0 
+    ? Object.entries(PLATFORMS).filter(([key]) => selectedPlatforms.has(key))
+    : Object.entries(PLATFORMS);
+
   return (
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
-      <div className="bg-white dark:bg-gray-800 rounded-2xl max-w-2xl w-full shadow-2xl max-h-[90vh] overflow-y-auto">
+      <div className="bg-white dark:bg-gray-800 rounded-2xl max-w-2xl w-full shadow-2xl max-h-[90vh] flex flex-col">
         {/* Header */}
-        <div className="p-6 border-b border-gray-200 dark:border-gray-700 sticky top-0 bg-white dark:bg-gray-800 z-10">
+        <div className="p-6 border-b border-gray-200 dark:border-gray-700 flex-shrink-0">
           <div className="flex items-center justify-between mb-4">
             <div className="flex items-center space-x-3">
-              <div className="w-10 h-10 bg-gradient-to-br from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
+              <div className="w-10 h-10 bg-gradient-to-br from-firefly-amber via-firefly-orange to-firefly-pink rounded-xl flex items-center justify-center shadow-md">
                 <Heart className="w-5 h-5 text-white" />
               </div>
               <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Setup Assistant</h2>
···
               <div key={idx} className="flex-1">
                 <div
                   className={`h-2 rounded-full transition-all ${
-                    idx <= wizardStep ? 'bg-gradient-to-r from-blue-500 to-purple-600' : 'bg-gray-200 dark:bg-gray-700'
+                    idx <= wizardStep ? 'bg-gradient-to-r from-firefly-cyan via-firefly-orange to-firefly-pink' : 'bg-gray-200 dark:bg-gray-700'
                   }`}
                 />
               </div>
···
           </div>
         </div>
 
-        {/* Content */}
-        <div className="p-6 min-h-[300px]">
+        {/* Content - Scrollable */}
+        <div className="p-6 overflow-y-auto flex-1">
           {wizardStep === 0 && (
             <div className="text-center space-y-4">
               <div className="text-6xl mb-4">👋</div>
···
             <div className="space-y-4">
               <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100">Which platforms will you import from?</h3>
               <p className="text-sm text-gray-600 dark:text-gray-400">
-                Select the platforms you follow people on. We'll help you find them on the ATmosphere.
+                Select one or more platforms you follow people on. We'll help you find them on the ATmosphere.
               </p>
               <div className="grid grid-cols-3 gap-3 mt-4">
                 {Object.entries(PLATFORMS).map(([key, p]) => {
                   const Icon = p.icon;
+                  const isSelected = selectedPlatforms.has(key);
                   return (
                     <button
                       key={key}
-                      onClick={() => setSelectedPlatform(key)}
-                      className={`p-4 rounded-xl border-2 transition-all ${
-                        selectedPlatform === key
-                          ? 'border-blue-500 bg-blue-50 dark:bg-blue-900/20'
-                          : 'border-gray-200 dark:border-gray-700 hover:border-blue-300'
+                      onClick={() => togglePlatform(key)}
+                      className={`p-4 rounded-xl border-2 transition-all relative ${
+                        isSelected
+                          ? 'border-firefly-orange bg-firefly-orange/10 dark:bg-firefly-orange/20'
+                          : 'border-gray-200 dark:border-gray-700 hover:border-firefly-cyan'
                       }`}
                     >
+                      {isSelected && (
+                        <div className="absolute -top-2 -right-2 w-6 h-6 bg-firefly-orange rounded-full flex items-center justify-center">
+                          <Check className="w-4 h-4 text-white" />
+                        </div>
+                      )}
                       <Icon className="w-8 h-8 mx-auto mb-2 text-gray-700 dark:text-gray-300" />
                       <div className="text-sm font-medium text-gray-900 dark:text-gray-100">{p.name}</div>
                     </button>
                   );
                 })}
               </div>
+              {selectedPlatforms.size > 0 && (
+                <div className="mt-4 p-3 bg-firefly-amber/10 dark:bg-firefly-amber/20 rounded-lg border border-firefly-amber/30">
+                  <p className="text-sm text-gray-700 dark:text-gray-300">
+                    ✨ {selectedPlatforms.size} platform{selectedPlatforms.size !== 1 ? 's' : ''} selected
+                  </p>
+                </div>
+              )}
             </div>
           )}
 
···
                 Choose which ATmosphere app to use for each platform. You can change this later.
               </p>
               <div className="space-y-3 mt-4">
-                {Object.entries(PLATFORMS).map(([key, p]) => {
+                {platformsToShow.map(([key, p]) => {
                   const Icon = p.icon;
                   return (
                     <div key={key} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900 rounded-xl">
···
           )}
 
           {wizardStep === 3 && (
-            <div className="space-y-6">
+            <div className="space-y-4">
               <div>
                 <h3 className="text-xl font-bold text-gray-900 dark:text-gray-100 mb-2">Privacy & Automation</h3>
                 <p className="text-sm text-gray-600 dark:text-gray-400">Control how your data is used.</p>
               </div>
 
-              <div className="space-y-4">
-                <div className="p-4 bg-blue-50 dark:bg-blue-900/20 rounded-xl">
+              <div className="space-y-3">
+                <div className="p-4 bg-firefly-cyan/10 dark:bg-firefly-cyan/20 rounded-xl border border-firefly-cyan/30">
                   <div className="flex items-start space-x-3">
                     <input
                       type="checkbox"
···
                   </div>
                 </div>
 
-                <div className="p-4 bg-purple-50 dark:bg-purple-900/20 rounded-xl">
+                <div className="p-4 bg-firefly-pink/10 dark:bg-firefly-pink/20 rounded-xl border border-firefly-pink/30">
                   <div className="flex items-start space-x-3">
                     <input
                       type="checkbox"
···
               <p className="text-gray-600 dark:text-gray-400 max-w-md mx-auto">
                 Your preferences have been saved. You can change them anytime in Settings.
               </p>
-              <div className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-xl p-4 mt-4">
+              <div className="bg-gradient-to-r from-firefly-cyan/20 via-firefly-orange/20 to-firefly-pink/20 dark:from-firefly-cyan/10 dark:via-firefly-orange/10 dark:to-firefly-pink/10 rounded-xl p-4 mt-4 border border-firefly-orange/30">
                 <h4 className="font-semibold text-gray-900 dark:text-gray-100 mb-2">Quick Summary:</h4>
                 <ul className="text-sm text-gray-600 dark:text-gray-400 space-y-1 text-left max-w-sm mx-auto">
                   <li className="flex items-center space-x-2">
-                    <Check className="w-4 h-4 text-green-500" />
+                    <Check className="w-4 h-4 text-firefly-orange" />
                     <span>Data saving: {saveData ? 'Enabled' : 'Disabled'}</span>
                   </li>
                   <li className="flex items-center space-x-2">
-                    <Check className="w-4 h-4 text-green-500" />
+                    <Check className="w-4 h-4 text-firefly-orange" />
                     <span>Automation: {enableAutomation ? 'Enabled' : 'Disabled'}</span>
                   </li>
                   <li className="flex items-center space-x-2">
-                    <Check className="w-4 h-4 text-green-500" />
+                    <Check className="w-4 h-4 text-firefly-orange" />
+                    <span>Platforms: {selectedPlatforms.size > 0 ? selectedPlatforms.size : 'All'} selected</span>
+                  </li>
+                  <li className="flex items-center space-x-2">
+                    <Check className="w-4 h-4 text-firefly-orange" />
                     <span>Ready to upload your first file!</span>
                   </li>
                 </ul>
···
         </div>
 
         {/* Footer */}
-        <div className="p-6 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between sticky bottom-0 bg-white dark:bg-gray-800">
+        <div className="p-6 border-t border-gray-200 dark:border-gray-700 flex items-center justify-between flex-shrink-0">
           <button
             onClick={() => wizardStep > 0 && setWizardStep(wizardStep - 1)}
             disabled={wizardStep === 0}
-            className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-30 disabled:cursor-not-allowed"
+            className="px-4 py-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
           >
             Back
           </button>
···
                 handleComplete();
               }
             }}
-            className="px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-600 text-white rounded-lg font-medium hover:from-blue-600 hover:to-purple-700 transition-all flex items-center space-x-2"
+            className="px-6 py-2 bg-gradient-to-r from-firefly-amber via-firefly-orange to-firefly-pink text-white rounded-lg font-medium hover:shadow-lg transition-all flex items-center space-x-2"
           >
             <span>{wizardStep === wizardSteps.length - 1 ? 'Get Started' : 'Next'}</span>
             {wizardStep < wizardSteps.length - 1 && <ChevronRight className="w-4 h-4" />}

src/pages/Home.tsx

···
 import { ATPROTO_APPS } from "../constants/atprotoApps";
 import type { Upload as UploadType } from "../types";
 import type { UserSettings } from "../types/settings";
+import SettingsPage from "./Settings";
 
 interface atprotoSession {
   did: string;
···
   ];
 
   return (
-    // Updated background from changes.js
     <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
       <SetupWizard
         isOpen={showWizard}
···
 
       {/* Header */}
       <div className="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
-        {/* Updated AppHeader props from changes.js */}
         <AppHeader 
           session={session} 
           onLogout={onLogout} 
···
 
       {/* Tab Content */}
       <div className="max-w-6xl mx-auto px-4 py-8">
-        {/* Upload Tab */}
         {activeTab === 'upload' && (
           <div className="space-y-6">
-            {/* Setup Assistant  */}
+            {/* Setup Assistant Banner - Only show if wizard not completed */}
             {!userSettings.wizardCompleted && (
-              <div className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-2xl p-6 text-white">
+              <div className="bg-firefly-banner dark:bg-firefly-banner-dark rounded-2xl p-6 text-white">
                 <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4">
                   <div className="flex-1">
                     <h2 className="text-2xl font-bold mb-2">Need help getting started?</h2>
···
                   </div>
                   <button
                     onClick={() => setShowWizard(true)}
-                    className="bg-white text-blue-600 px-6 py-3 rounded-xl font-semibold hover:bg-blue-50 transition-all flex items-center space-x-2 whitespace-nowrap"
+                    className="bg-white text-slate-900 px-6 py-3 rounded-xl font-semibold hover:bg-slate-100 transition-all flex items-center space-x-2 whitespace-nowrap shadow-lg"
                   >
                     <span>Start Setup</span>
                     <ChevronRight className="w-4 h-4" />
···
             )}
 
             {/* Upload Section */}
-            <div className="bg-white/95 dark:bg-slate-800/95 backdrop-blur-xl rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
-              <div className="flex items-center space-x-3 mb-4">
-                <div 
-                  className={`w-12 h-12 bg-gradient-to-br from-firefly-amber to-firefly-orange rounded-xl flex items-center justify-center shadow-md ${
-                    reducedMotion ? '' : 'animate-glow-pulse'
-                  }`}
-                >
-                  <Upload className="w-6 h-6 text-slate-900" />
+            <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
+              <div className="flex items-center justify-between mb-4">
+                <div className="flex items-center space-x-3">
+                  <div className="w-12 h-12 bg-gradient-to-br from-firefly-amber via-firefly-orange to-firefly-pink rounded-xl flex items-center justify-center shadow-md">
+                    <Upload className="w-6 h-6 text-white" />
+                  </div>
+                  <div>
+                    <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">
+                      Upload Following Data
+                    </h2>
+                    <p className="text-sm text-gray-600 dark:text-gray-400">
+                      Find your people on the ATmosphere
+                    </p>
+                  </div>
                 </div>
-                <div>
-                  <h2 className="text-xl font-bold text-slate-900 dark:text-slate-100">
-                    Light Up Your Network
-                  </h2>
-                  <p className="text-sm text-slate-700 dark:text-slate-300">
-                    Upload your data to find your fireflies
-                  </p>
-                </div>
+                {userSettings.wizardCompleted && (
+                  <button
+                    onClick={() => setShowWizard(true)}
+                    className="text-sm text-firefly-orange hover:text-firefly-pink font-medium transition-colors flex items-center space-x-1"
+                  >
+                    <Settings className="w-4 h-4" />
+                    <span>Reconfigure</span>
+                  </button>
+                )}
               </div>
               
-              <p className="text-slate-700 dark:text-slate-300 mb-6">
-                Click a platform below to upload your exported data and discover matches in the ATmosphere
-              </p>
-      
               <PlatformSelector onPlatformSelect={handlePlatformSelect} />
               
               <input
···
           </div>
         )}
 
-        {/* Settings Tab - Placeholder */}
+        {/* Settings Tab */}
         {activeTab === 'settings' && (
-          <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
-            <div className="flex items-center space-x-3 mb-6">
-              <Settings className="w-6 h-6 text-gray-600 dark:text-gray-400" />
-              <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">Settings</h2>
-            </div>
-            <p className="text-gray-600 dark:text-gray-400">Settings page coming soon...</p>
-          </div>
+          <SettingsPage
+            userSettings={userSettings}
+            onSettingsUpdate={onSettingsUpdate}
+            onOpenWizard={() => setShowWizard(true)}
+          />
         )}
 
         {/* Guides Tab - Placeholder */}

src/pages/Settings.tsx

···
+import { Settings as SettingsIcon, Sparkles, Shield, Bell, Trash2, Download, ChevronRight } from "lucide-react";
+import { PLATFORMS } from "../constants/platforms";
+import { ATPROTO_APPS } from "../constants/atprotoApps";
+import type { UserSettings, PlatformDestinations } from "../types/settings";
+
+interface SettingsPageProps {
+  userSettings: UserSettings;
+  onSettingsUpdate: (settings: Partial<UserSettings>) => void;
+  onOpenWizard: () => void;
+}
+
+export default function SettingsPage({ userSettings, onSettingsUpdate, onOpenWizard }: SettingsPageProps) {
+  const handleDestinationChange = (platform: string, destination: string) => {
+    onSettingsUpdate({
+      platformDestinations: {
+        ...userSettings.platformDestinations,
+        [platform]: destination,
+      },
+    });
+  };
+
+  const handleExportSettings = () => {
+    const dataStr = JSON.stringify(userSettings, null, 2);
+    const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
+    const exportFileDefaultName = 'atlast-settings.json';
+    
+    const linkElement = document.createElement('a');
+    linkElement.setAttribute('href', dataUri);
+    linkElement.setAttribute('download', exportFileDefaultName);
+    linkElement.click();
+  };
+
+  const handleResetSettings = () => {
+    if (confirm('Are you sure you want to reset all settings to defaults? This cannot be undone.')) {
+      // Import DEFAULT_SETTINGS
+      const { DEFAULT_SETTINGS } = require('../types/settings');
+      onSettingsUpdate({
+        ...DEFAULT_SETTINGS,
+        wizardCompleted: true, // Keep wizard completed
+      });
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Setup Wizard Card */}
+      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
+        <div className="flex items-center space-x-3 mb-4">
+          <div className="w-12 h-12 bg-gradient-to-br from-firefly-amber via-firefly-orange to-firefly-pink rounded-xl flex items-center justify-center shadow-md">
+            <Sparkles className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">Setup Assistant</h2>
+            <p className="text-sm text-gray-600 dark:text-gray-400">Quick configuration wizard</p>
+          </div>
+        </div>
+        
+        <button
+          onClick={onOpenWizard}
+          className="w-full p-4 bg-gradient-to-r from-firefly-amber/10 via-firefly-orange/10 to-firefly-pink/10 border-2 border-firefly-orange/30 rounded-xl hover:border-firefly-orange hover:shadow-md transition-all text-left"
+        >
+          <div className="flex items-center justify-between">
+            <div>
+              <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Run Setup Wizard</h3>
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                Configure platform destinations, privacy, and automation settings
+              </p>
+            </div>
+            <ChevronRight className="w-5 h-5 text-firefly-orange flex-shrink-0" />
+          </div>
+        </button>
+      </div>
+
+      {/* Platform Destinations */}
+      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
+        <div className="flex items-center space-x-3 mb-4">
+          <div className="w-12 h-12 bg-gradient-to-br from-firefly-cyan to-firefly-pink rounded-xl flex items-center justify-center shadow-md">
+            <SettingsIcon className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">Match Destinations</h2>
+            <p className="text-sm text-gray-600 dark:text-gray-400">Where matches should go for each platform</p>
+          </div>
+        </div>
+        
+        <div className="space-y-3">
+          {Object.entries(PLATFORMS).map(([key, p]) => {
+            const Icon = p.icon;
+            const currentDestination = userSettings.platformDestinations[key as keyof PlatformDestinations];
+            const destinationApp = ATPROTO_APPS[currentDestination];
+            
+            return (
+              <div key={key} className="flex items-center justify-between p-4 bg-gray-50 dark:bg-gray-900 rounded-xl hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
+                <div className="flex items-center space-x-3 flex-1">
+                  <Icon className="w-6 h-6 text-gray-700 dark:text-gray-300 flex-shrink-0" />
+                  <div className="flex-1 min-w-0">
+                    <div className="font-medium text-gray-900 dark:text-gray-100">{p.name}</div>
+                    <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                      Currently: {destinationApp?.icon} {destinationApp?.name}
+                    </div>
+                  </div>
+                </div>
+                <select
+                  value={currentDestination}
+                  onChange={(e) => handleDestinationChange(key, e.target.value)}
+                  className="px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-gray-100 hover:border-firefly-orange focus:outline-none focus:ring-2 focus:ring-firefly-orange transition-colors"
+                >
+                  {Object.values(ATPROTO_APPS).map((app) => (
+                    <option key={app.id} value={app.id}>
+                      {app.icon} {app.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            );
+          })}
+        </div>
+        
+        <div className="mt-4 p-3 bg-firefly-amber/10 dark:bg-firefly-amber/20 rounded-lg border border-firefly-amber/30">
+          <p className="text-sm text-gray-700 dark:text-gray-300">
+            💡 <strong>Tip:</strong> Choose different apps for different platforms based on content type. 
+            For example, send TikTok matches to Spark for video content.
+          </p>
+        </div>
+      </div>
+
+      {/* Privacy & Data */}
+      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
+        <div className="flex items-center space-x-3 mb-4">
+          <div className="w-12 h-12 bg-gradient-to-br from-firefly-cyan to-firefly-orange rounded-xl flex items-center justify-center shadow-md">
+            <Shield className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">Privacy & Data</h2>
+            <p className="text-sm text-gray-600 dark:text-gray-400">Control how your data is stored</p>
+          </div>
+        </div>
+        
+        <div className="space-y-3">
+          <div className="p-4 bg-firefly-cyan/10 dark:bg-firefly-cyan/20 rounded-xl border border-firefly-cyan/30">
+            <div className="flex items-start justify-between">
+              <div className="flex-1">
+                <div className="font-medium text-gray-900 dark:text-gray-100 mb-1">Save my data</div>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Store your following lists for periodic re-checking and new match notifications
+                </p>
+              </div>
+              <label className="relative inline-flex items-center cursor-pointer ml-4">
+                <input 
+                  type="checkbox" 
+                  checked={userSettings.saveData}
+                  onChange={(e) => onSettingsUpdate({ saveData: e.target.checked })}
+                  className="sr-only peer" 
+                />
+                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-firefly-orange/30 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-firefly-orange"></div>
+              </label>
+            </div>
+          </div>
+
+          {!userSettings.saveData && (
+            <div className="p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg border border-yellow-200 dark:border-yellow-800">
+              <p className="text-sm text-yellow-800 dark:text-yellow-200">
+                ⚠️ <strong>Note:</strong> Disabling data storage will prevent periodic checks and automation features.
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Automation */}
+      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
+        <div className="flex items-center space-x-3 mb-4">
+          <div className="w-12 h-12 bg-gradient-to-br from-firefly-pink to-firefly-orange rounded-xl flex items-center justify-center shadow-md">
+            <Bell className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">Automation</h2>
+            <p className="text-sm text-gray-600 dark:text-gray-400">Automated checks and notifications</p>
+          </div>
+        </div>
+        
+        <div className="space-y-3">
+          <div className="p-4 bg-firefly-pink/10 dark:bg-firefly-pink/20 rounded-xl border border-firefly-pink/30">
+            <div className="flex items-start justify-between">
+              <div className="flex-1">
+                <div className="font-medium text-gray-900 dark:text-gray-100 mb-1">Notify about new matches</div>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Get DMs when people you follow join the ATmosphere
+                </p>
+              </div>
+              <label className="relative inline-flex items-center cursor-pointer ml-4">
+                <input 
+                  type="checkbox" 
+                  checked={userSettings.enableAutomation}
+                  onChange={(e) => onSettingsUpdate({ enableAutomation: e.target.checked })}
+                  className="sr-only peer"
+                  disabled={!userSettings.saveData}
+                />
+                <div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-firefly-pink/30 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-firefly-pink peer-disabled:opacity-50 peer-disabled:cursor-not-allowed"></div>
+              </label>
+            </div>
+            
+            {userSettings.enableAutomation && (
+              <div className="mt-4 pt-4 border-t border-firefly-pink/20">
+                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                  Check frequency
+                </label>
+                <select
+                  value={userSettings.automationFrequency}
+                  onChange={(e) => onSettingsUpdate({ automationFrequency: e.target.value as 'weekly' | 'monthly' | 'quarterly' })}
+                  className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm text-gray-900 dark:text-gray-100 hover:border-firefly-pink focus:outline-none focus:ring-2 focus:ring-firefly-pink"
+                >
+                  <option value="daily">Weekly - Check every week for new matches</option>
+                  <option value="weekly">Monthly - Check once per month</option>
+                  <option value="monthly">Quarterly - Check once per quarter</option>
+                </select>
+              </div>
+            )}
+          </div>
+
+          {!userSettings.saveData && (
+            <div className="p-3 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700">
+              <p className="text-sm text-gray-600 dark:text-gray-400">
+                💡 Enable "Save my data" to use automation features
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* Data Management */}
+      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 border-2 border-slate-200 dark:border-slate-700">
+        <div className="flex items-center space-x-3 mb-4">
+          <div className="w-12 h-12 bg-gradient-to-br from-gray-400 to-gray-600 rounded-xl flex items-center justify-center shadow-md">
+            <Download className="w-6 h-6 text-white" />
+          </div>
+          <div>
+            <h2 className="text-xl font-bold text-gray-900 dark:text-gray-100">Data Management</h2>
+            <p className="text-sm text-gray-600 dark:text-gray-400">Export or reset your settings</p>
+          </div>
+        </div>
+        
+        <div className="space-y-3">
+          <button
+            onClick={handleExportSettings}
+            className="w-full p-4 bg-gray-50 dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 hover:border-firefly-cyan hover:bg-gray-100 dark:hover:bg-gray-800 transition-all text-left"
+          >
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-1">Export Settings</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400">
+                  Download your settings as a JSON file
+                </p>
+              </div>
+              <Download className="w-5 h-5 text-gray-400 flex-shrink-0" />
+            </div>
+          </button>
+
+          <button
+            onClick={handleResetSettings}
+            className="w-full p-4 bg-red-50 dark:bg-red-900/20 rounded-xl border border-red-200 dark:border-red-800 hover:border-red-400 hover:bg-red-100 dark:hover:bg-red-900/30 transition-all text-left"
+          >
+            <div className="flex items-center justify-between">
+              <div>
+                <h3 className="font-semibold text-red-700 dark:text-red-400 mb-1">Reset All Settings</h3>
+                <p className="text-sm text-red-600 dark:text-red-300">
+                  Restore all settings to default values
+                </p>
+              </div>
+              <Trash2 className="w-5 h-5 text-red-400 flex-shrink-0" />
+            </div>
+          </button>
+        </div>
+      </div>
+
+      {/* Current Configuration Summary */}
+      <div className="bg-gradient-to-r from-firefly-cyan/10 via-firefly-orange/10 to-firefly-pink/10 dark:from-firefly-cyan/5 dark:via-firefly-orange/5 dark:to-firefly-pink/5 rounded-2xl p-6 border-2 border-firefly-orange/30">
+        <h3 className="font-semibold text-gray-900 dark:text-gray-100 mb-3">Current Configuration</h3>
+        <div className="grid md:grid-cols-3 gap-4 text-sm">
+          <div>
+            <div className="text-gray-600 dark:text-gray-400 mb-1">Data Storage</div>
+            <div className="font-medium text-gray-900 dark:text-gray-100">
+              {userSettings.saveData ? '✅ Enabled' : '❌ Disabled'}
+            </div>
+          </div>
+          <div>
+            <div className="text-gray-600 dark:text-gray-400 mb-1">Automation</div>
+            <div className="font-medium text-gray-900 dark:text-gray-100">
+              {userSettings.enableAutomation ? `✅ ${userSettings.automationFrequency}` : '❌ Disabled'}
+            </div>
+          </div>
+          <div>
+            <div className="text-gray-600 dark:text-gray-400 mb-1">Wizard</div>
+            <div className="font-medium text-gray-900 dark:text-gray-100">
+              {userSettings.wizardCompleted ? '✅ Completed' : '⏳ Pending'}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}