diff --git a/src/components/settings/pages/security-settings-content.tsx b/src/components/settings/pages/security-settings-content.tsx
index 05718669..f0d63fda 100644
--- a/src/components/settings/pages/security-settings-content.tsx
+++ b/src/components/settings/pages/security-settings-content.tsx
@@ -1,3 +1,188 @@
+import React, { useState } from 'react';
+import { createAuthClient } from 'better-auth/client';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { AlertCircle, LogOut, Shield, Lock } from 'lucide-react';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { forceLogout } from "@/lib/auth/logout";
+
+
 export function SecuritySettingsContent() {
-  return <>Security coming soon...</>;
-}
+  const [currentPassword, setCurrentPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
+  
+  const authClient = createAuthClient()
+
+  const handleLogout = async () => {
+      await forceLogout();
+    };
+
+  const handleRevokeAllSessions = async () => {
+    try {
+      setLoading(true);
+      await authClient.revokeOtherSessions();
+      setMessage({ type: 'success', text: 'All other sessions have been revoked' });
+    } catch (error) {
+      setMessage({ type: 'error', text: 'Failed to revoke sessions. Please try again.' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleChangePassword = async () => {
+    setMessage(null);
+
+    if (newPassword !== confirmPassword) {
+      setMessage({ type: 'error', text: 'New passwords do not match' });
+      return;
+    }
+
+    if (newPassword.length < 8) {
+      setMessage({ type: 'error', text: 'Password must be at least 8 characters long' });
+      return;
+    }
+
+    try {
+      setLoading(true);
+      await authClient.changePassword({
+        currentPassword,
+        newPassword,
+        revokeOtherSessions: false,
+      });
+      setMessage({ type: 'success', text: 'Password changed successfully' });
+      setCurrentPassword('');
+      setNewPassword('');
+      setConfirmPassword('');
+    } catch (error) {
+      setMessage({ type: 'error', text: 'Failed to change password. Please check your current password.' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="space-y-6 max-h-[calc(100vh-200px)] overflow-y-auto px-1">
+      <div>
+        <h3 className="text-lg font-medium">Security</h3>
+        <p className="text-sm text-muted-foreground">
+          Manage your account security and sessions
+        </p>
+      </div>
+      <Separator />
+
+      {message && (
+        <Alert variant={message.type === 'error' ? 'destructive' : 'default'}>
+          <AlertCircle className="h-4 w-4" />
+          <AlertDescription>{message.text}</AlertDescription>
+        </Alert>
+      )}
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Lock className="h-5 w-5" />
+            Change Password
+          </CardTitle>
+          <CardDescription>
+            Update your password to keep your account secure
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="current-password">Current Password</Label>
+              <Input
+                id="current-password"
+                type="password"
+                value={currentPassword}
+                onChange={(e) => setCurrentPassword(e.target.value)}
+                disabled={loading}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="new-password">New Password</Label>
+              <Input
+                id="new-password"
+                type="password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                disabled={loading}
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="confirm-password">Confirm New Password</Label>
+              <Input
+                id="confirm-password"
+                type="password"
+                value={confirmPassword}
+                onChange={(e) => setConfirmPassword(e.target.value)}
+                disabled={loading}
+              />
+            </div>
+            <Button onClick={handleChangePassword} disabled={loading}>
+              {loading ? 'Updating...' : 'Update Password'}
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Shield className="h-5 w-5" />
+            Session Management
+          </CardTitle>
+          <CardDescription>
+            Manage your active sessions across all devices
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <div className="flex items-center justify-between">
+            <div className="space-y-0.5">
+              <p className="text-sm font-medium">Logout from all devices</p>
+              <p className="text-sm text-muted-foreground">
+                End all sessions except the current one
+              </p>
+            </div>
+            <Button
+              variant="outline"
+              onClick={handleRevokeAllSessions}
+              disabled={loading}
+            >
+              Revoke All Sessions
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <LogOut className="h-5 w-5" />
+            Logout
+          </CardTitle>
+          <CardDescription>
+            Sign out of your account on this device
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button
+            variant="destructive"
+            onClick={handleLogout}
+            disabled={loading}
+            className="w-full sm:w-auto"
+          >
+            <LogOut className="mr-2 h-4 w-4" />
+            Logout
+          </Button>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/components/settings/settings-dialog.tsx b/src/components/settings/settings-dialog.tsx
index 6c4a9e03..c1715091 100644
--- a/src/components/settings/settings-dialog.tsx
+++ b/src/components/settings/settings-dialog.tsx
@@ -56,7 +56,7 @@ export const SettingsDialog = NiceModal.create(() => {
     <Dialog open={modal.visible} onOpenChange={modal.hide}>
       <DialogContent
         hideCloseButton
-        className="sm:max-w-[min(calc(100vw-2rem),_42rem)] md:h-[60vh] h-[85vh] p-0 gap-0 border overflow-hidden"
+        className="sm:max-w-[min(calc(100vw-2rem),_42rem)] md:h-[60vh] h-[85vh] p-0 gap-0 border overflow-y-auto"
       >
         <Tabs
           defaultValue="profile"