diff --git a/app/components/settings/event-logs/EventLogsTab.tsx b/app/components/settings/event-logs/EventLogsTab.tsx
index b513d811..ce713565 100644
--- a/app/components/settings/event-logs/EventLogsTab.tsx
+++ b/app/components/settings/event-logs/EventLogsTab.tsx
@@ -5,6 +5,7 @@ import { logStore, type LogEntry } from '~/lib/stores/logs';
 import { useStore } from '@nanostores/react';
 import { classNames } from '~/utils/classNames';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { settingsStyles } from '~/components/settings/settings.styles';
 
 interface SelectOption {
   value: string;
@@ -241,16 +242,18 @@ export function EventLogsTab() {
           </div>
         </div>
         <div className="flex items-center gap-4">
-          <motion.button
+          <button
             onClick={handleRefresh}
-            className="p-2 rounded-lg text-purple-600 dark:text-purple-400 hover:bg-purple-50 dark:hover:bg-purple-900/20 transition-all duration-200"
-            whileHover={{ scale: 1.05 }}
-            whileTap={{ scale: 0.95 }}
-            animate={isRefreshing ? { rotate: 360 } : {}}
-            transition={isRefreshing ? { duration: 1, repeat: Infinity, ease: 'linear' } : {}}
+            className={classNames(
+              settingsStyles.button.base,
+              settingsStyles.button.secondary,
+              'hover:bg-purple-500/10 hover:text-purple-500',
+              'dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20 dark:text-bolt-elements-textPrimary dark:hover:text-purple-500',
+            )}
           >
-            <div className="i-ph:arrows-clockwise text-xl" />
-          </motion.button>
+            <div className="i-ph:arrows-clockwise text-lg" />
+            {isRefreshing ? 'Refreshing...' : 'Refresh Logs'}
+          </button>
         </div>
       </div>
 
diff --git a/app/components/settings/profile/ProfileTab.tsx b/app/components/settings/profile/ProfileTab.tsx
index c6bae8cb..60ea8645 100644
--- a/app/components/settings/profile/ProfileTab.tsx
+++ b/app/components/settings/profile/ProfileTab.tsx
@@ -4,6 +4,7 @@ import { toast } from 'react-toastify';
 import { classNames } from '~/utils/classNames';
 import type { UserProfile } from '~/components/settings/settings.types';
 import { motion } from 'framer-motion';
+import { settingsStyles } from '~/components/settings/settings.styles';
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
 const ALLOWED_FILE_TYPES = ['image/jpeg', 'image/png', 'image/gif'];
@@ -92,6 +93,15 @@ export default function ProfileTab() {
       };
 
       localStorage.setItem('bolt_user_profile', JSON.stringify(updatedProfile));
+
+      // Dispatch a storage event to notify other components
+      window.dispatchEvent(
+        new StorageEvent('storage', {
+          key: 'bolt_user_profile',
+          newValue: JSON.stringify(updatedProfile),
+        }),
+      );
+
       toast.success('Profile settings saved successfully');
     } catch (error) {
       console.error('Error saving profile:', error);
@@ -234,18 +244,13 @@ export default function ProfileTab() {
       </motion.div>
 
       {/* Save Button */}
-      <motion.div
-        className="flex justify-end mt-6"
-        initial={{ opacity: 0, y: 20 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.2 }}
-      >
+      <div className="flex justify-end mt-6">
         <button
           onClick={handleSave}
           disabled={isLoading}
           className={classNames(
-            'px-4 py-2 rounded-lg text-sm flex items-center gap-2',
-            'bg-purple-500 text-white',
+            settingsStyles.button.base,
+            settingsStyles.button.primary,
             'hover:bg-purple-600',
             'disabled:opacity-50 disabled:cursor-not-allowed',
           )}
@@ -262,7 +267,7 @@ export default function ProfileTab() {
             </>
           )}
         </button>
-      </motion.div>
+      </div>
     </div>
   );
 }
diff --git a/app/components/settings/settings/SettingsTab.tsx b/app/components/settings/settings/SettingsTab.tsx
index 726081e8..a8111431 100644
--- a/app/components/settings/settings/SettingsTab.tsx
+++ b/app/components/settings/settings/SettingsTab.tsx
@@ -5,6 +5,7 @@ import { classNames } from '~/utils/classNames';
 import { Switch } from '~/components/ui/Switch';
 import { themeStore, kTheme } from '~/lib/stores/theme';
 import type { UserProfile } from '~/components/settings/settings.types';
+import { settingsStyles } from '~/components/settings/settings.styles';
 
 export default function SettingsTab() {
   const [currentTimezone, setCurrentTimezone] = useState('');
@@ -88,10 +89,11 @@ export default function SettingsTab() {
                 key={theme}
                 onClick={() => setSettings((prev) => ({ ...prev, theme }))}
                 className={classNames(
-                  'px-3 py-1.5 rounded-lg text-sm flex items-center gap-2 transition-colors',
+                  settingsStyles.button.base,
+                  settings.theme === theme ? settingsStyles.button.primary : settingsStyles.button.secondary,
                   settings.theme === theme
-                    ? 'bg-purple-500 text-white hover:bg-purple-600'
-                    : 'bg-[#F5F5F5] dark:bg-[#1A1A1A] text-bolt-elements-textSecondary hover:bg-[#E5E5E5] dark:hover:bg-[#252525] hover:text-bolt-elements-textPrimary',
+                    ? 'dark:bg-purple-500 dark:text-white dark:hover:bg-purple-600 dark:hover:text-white'
+                    : 'hover:bg-purple-500/10 hover:text-purple-500 dark:bg-[#1A1A1A] dark:hover:bg-purple-500/20 dark:text-bolt-elements-textPrimary dark:hover:text-purple-500',
                 )}
               >
                 <div
@@ -119,7 +121,7 @@ export default function SettingsTab() {
             onChange={(e) => setSettings((prev) => ({ ...prev, language: e.target.value }))}
             className={classNames(
               'w-full px-3 py-2 rounded-lg text-sm',
-              'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
               'border border-[#E5E5E5] dark:border-[#1A1A1A]',
               'text-bolt-elements-textPrimary',
               'focus:outline-none focus:ring-2 focus:ring-purple-500/30',
@@ -199,7 +201,7 @@ export default function SettingsTab() {
             onChange={(e) => setSettings((prev) => ({ ...prev, timezone: e.target.value }))}
             className={classNames(
               'w-full px-3 py-2 rounded-lg text-sm',
-              'bg-[#F5F5F5] dark:bg-[#1A1A1A]',
+              'bg-[#FAFAFA] dark:bg-[#0A0A0A]',
               'border border-[#E5E5E5] dark:border-[#1A1A1A]',
               'text-bolt-elements-textPrimary',
               'focus:outline-none focus:ring-2 focus:ring-purple-500/30',