diff --git a/src/components/ClientLayout.tsx b/src/components/ClientLayout.tsx
index 7b98b65..72a3522 100644
--- a/src/components/ClientLayout.tsx
+++ b/src/components/ClientLayout.tsx
@@ -10,7 +10,7 @@ export default function ClientLayout({
   children: React.ReactNode;
 }) {
   return (
-    <ThemeProvider attribute="class" defaultTheme="dark">
+    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
       <AuthProvider>
         {children}
         <Toaster
diff --git a/src/components/SettingsPage.tsx b/src/components/SettingsPage.tsx
index 155a5e4..675cddf 100644
--- a/src/components/SettingsPage.tsx
+++ b/src/components/SettingsPage.tsx
@@ -14,8 +14,8 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
   const [showConfirm, setShowConfirm] = useState(false);
 
   return (
-    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 pt-20 px-4 pb-8">
-      <div className="max-w-2xl mx-auto">
+    <div className="min-h-screen bg-gradient-to-b from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 p-4 pb-32 pt-8">
+      <div className="max-w-md mx-auto">
         {/* Header */}
         <div className="text-center mb-8">
           <h1 className="text-4xl font-bold text-slate-900 dark:text-white mb-2">
@@ -27,7 +27,7 @@ export default function SettingsPage({ userEmail }: SettingsPageProps) {
         </div>
 
         {/* Settings Card */}
-        <div className="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 space-y-6">
+        <div className="bg-white dark:bg-slate-800 rounded-lg shadow-sm p-4 space-y-6">
           {/* Account Section */}
           <div className="border-b border-slate-200 dark:border-slate-700 pb-6">
             <h2 className="text-lg font-semibold text-slate-900 dark:text-white mb-4">