diff --git a/apps/web/components/settings/account.tsx b/apps/web/components/settings/account.tsx
index b8b51e1e..2d39fcf4 100644
--- a/apps/web/components/settings/account.tsx
+++ b/apps/web/components/settings/account.tsx
@@ -13,6 +13,8 @@ import {
 	DialogClose,
 } from "@ui/components/dialog"
 import { authClient } from "@lib/auth"
+import { toast } from "sonner"
+import { useRouter } from "next/navigation"
 import { Popover, PopoverContent, PopoverTrigger } from "@ui/components/popover"
 import { useCustomer } from "autumn-js/react"
 import {
@@ -89,7 +91,9 @@ function PlanFeatureRow({
 export default function Account() {
 	const { user, org, setActiveOrg } = useAuth()
 	const autumn = useCustomer()
+	const router = useRouter()
 	const [isUpgrading, setIsUpgrading] = useState(false)
+	const [isDeleting, setIsDeleting] = useState(false)
 	const [deleteConfirmText, setDeleteConfirmText] = useState("")
 	const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false)
 	const [switchingOrgId, setSwitchingOrgId] = useState<string | null>(null)
@@ -142,12 +146,26 @@ export default function Account() {
 		}
 	}
 
-	const handleDeleteAccount = () => {
+	const handleDeleteAccount = async () => {
 		if (deleteConfirmText !== "DELETE") return
-		// TODO: Implement account deletion API call
-		console.log("Delete account requested")
-		setIsDeleteDialogOpen(false)
-		setDeleteConfirmText("")
+		setIsDeleting(true)
+
+		try {
+			const { error } = await authClient.deleteUser()
+
+			if (error) {
+				throw error
+			}
+
+			toast.success("Account deleted successfully")
+			router.push("/")
+		} catch (error) {
+			console.error("Failed to delete account:", error)
+			toast.error("Failed to delete account", {
+				description: error instanceof Error ? error.message : "Unknown error",
+			})
+			setIsDeleting(false)
+		}
 	}
 
 	const isDeleteEnabled = deleteConfirmText === "DELETE"
@@ -809,6 +827,7 @@ export default function Account() {
 											>
 												<input
 													type="text"
+													disabled={isDeleting}
 													value={deleteConfirmText}
 													onChange={(e) => setDeleteConfirmText(e.target.value)}
 													placeholder="DELETE"
@@ -842,19 +861,23 @@ export default function Account() {
 										<button
 											type="button"
 											onClick={handleDeleteAccount}
-											disabled={!isDeleteEnabled}
+											disabled={!isDeleteEnabled || isDeleting}
 											className={cn(
 												"relative flex items-center gap-1.5 pl-4 pr-[18px] py-2 rounded-full",
 												"bg-[#290F0A] text-[#C73B1B]",
 												"font-normal text-[14px] tracking-[-0.14px]",
 												"cursor-pointer transition-opacity",
 												"disabled:opacity-40 disabled:cursor-not-allowed",
-												isDeleteEnabled && "hover:opacity-90",
+												isDeleteEnabled && !isDeleting && "hover:opacity-90",
 												dmSans125ClassName(),
 											)}
 										>
-											<Trash2 className="size-[18px]" />
-											<span>Delete</span>
+											{isDeleting ? (
+												<LoaderIcon className="size-[18px] animate-spin" />
+											) : (
+												<Trash2 className="size-[18px]" />
+											)}
+											<span>{isDeleting ? "Deleting..." : "Delete"}</span>
 											<div className="absolute inset-0 pointer-events-none rounded-[inherit] shadow-[inset_1.5px_1.5px_4.5px_rgba(0,0,0,0.4)]" />
 										</button>
 									</div>