diff --git a/apps/web/src/routes/_view/app/-account-access.tsx b/apps/web/src/routes/_view/app/-account-access.tsx
new file mode 100644
index 0000000000..86a4ea1658
--- /dev/null
+++ b/apps/web/src/routes/_view/app/-account-access.tsx
@@ -0,0 +1,143 @@
+import { useMutation } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@hypr/ui/components/ui/accordion";
+
+import { signOutFn } from "@/functions/auth";
+import { deleteAccount } from "@/functions/billing";
+
+export function AccountAccessSection() {
+  const navigate = useNavigate();
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
+
+  const signOut = useMutation({
+    mutationFn: async () => {
+      const res = await signOutFn();
+      if (res.success) {
+        return true;
+      }
+
+      throw new Error(res.message);
+    },
+    onSuccess: () => {
+      navigate({ to: "/" });
+    },
+    onError: (error) => {
+      console.error(error);
+      navigate({ to: "/" });
+    },
+  });
+
+  const deleteAccountMutation = useMutation({
+    mutationFn: () => deleteAccount(),
+    onSuccess: () => {
+      navigate({ to: "/" });
+    },
+  });
+
+  return (
+    <div className="rounded-xs border border-neutral-100">
+      <div className="p-4">
+        <h3 className="mb-2 font-serif text-lg font-semibold">Access</h3>
+        <p className="text-sm text-neutral-600">
+          Session controls and destructive account actions
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-4 border-t border-neutral-100 p-4 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <div className="text-sm font-medium text-neutral-900">Sign out</div>
+          <p className="text-sm text-neutral-600">
+            End your current session on this device
+          </p>
+        </div>
+
+        <button
+          onClick={() => signOut.mutate()}
+          disabled={signOut.isPending}
+          className="flex h-8 cursor-pointer items-center justify-center rounded-full border border-neutral-300 bg-linear-to-b from-white to-stone-50 px-4 text-sm text-neutral-700 shadow-xs transition-all hover:scale-[102%] hover:shadow-md active:scale-[98%] disabled:opacity-50 disabled:hover:scale-100"
+        >
+          {signOut.isPending ? "Signing out..." : "Sign out"}
+        </button>
+      </div>
+
+      <div className="border-t border-neutral-100 px-4">
+        <Accordion
+          type="single"
+          collapsible
+          onValueChange={(value) => {
+            if (!value) {
+              setShowDeleteConfirm(false);
+              deleteAccountMutation.reset();
+            }
+          }}
+        >
+          <AccordionItem value="delete-account" className="border-none">
+            <AccordionTrigger className="py-4 text-sm font-medium text-red-700 hover:text-red-800 hover:no-underline">
+              Delete account
+            </AccordionTrigger>
+            <AccordionContent className="pb-4">
+              <div className="rounded-md border border-red-200 bg-red-50 p-4">
+                <p className="text-sm text-red-900">
+                  Char is a local-first app. Your notes, transcripts, and
+                  meeting data stay on your device. Deleting your account only
+                  removes cloud-stored data.
+                </p>
+
+                {showDeleteConfirm ? (
+                  <div className="mt-4 space-y-3">
+                    <p className="text-sm text-red-800">
+                      This permanently deletes your account and cloud data.
+                    </p>
+
+                    {deleteAccountMutation.isError && (
+                      <p className="text-sm text-red-600">
+                        {deleteAccountMutation.error?.message ||
+                          "Failed to delete account"}
+                      </p>
+                    )}
+
+                    <div className="flex flex-wrap gap-2">
+                      <button
+                        onClick={() => deleteAccountMutation.mutate()}
+                        disabled={deleteAccountMutation.isPending}
+                        className="flex h-8 items-center rounded-full bg-red-600 px-4 text-sm text-white shadow-md transition-all hover:scale-[102%] hover:shadow-lg active:scale-[98%] disabled:opacity-50 disabled:hover:scale-100"
+                      >
+                        {deleteAccountMutation.isPending
+                          ? "Deleting..."
+                          : "Yes, delete my account"}
+                      </button>
+                      <button
+                        onClick={() => {
+                          setShowDeleteConfirm(false);
+                          deleteAccountMutation.reset();
+                        }}
+                        disabled={deleteAccountMutation.isPending}
+                        className="flex h-8 items-center rounded-full border border-red-200 bg-white px-4 text-sm text-red-700 transition-all hover:border-red-300 hover:text-red-800 disabled:opacity-50"
+                      >
+                        Cancel
+                      </button>
+                    </div>
+                  </div>
+                ) : (
+                  <button
+                    onClick={() => setShowDeleteConfirm(true)}
+                    className="mt-4 flex h-8 cursor-pointer items-center rounded-full border border-red-200 bg-white px-4 text-sm text-red-700 transition-all hover:border-red-300 hover:text-red-800"
+                  >
+                    Continue
+                  </button>
+                )}
+              </div>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/routes/_view/app/-account-delete.tsx b/apps/web/src/routes/_view/app/-account-delete.tsx
deleted file mode 100644
index e886dd2244..0000000000
--- a/apps/web/src/routes/_view/app/-account-delete.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { useNavigate } from "@tanstack/react-router";
-import { useState } from "react";
-
-import { deleteAccount } from "@/functions/billing";
-
-export function DeleteAccountSection() {
-  const navigate = useNavigate();
-  const [showConfirm, setShowConfirm] = useState(false);
-
-  const deleteAccountMutation = useMutation({
-    mutationFn: () => deleteAccount(),
-    onSuccess: () => {
-      navigate({ to: "/" });
-    },
-  });
-
-  return (
-    <div className="rounded-xs border border-neutral-100">
-      <div className="p-4">
-        <h3 className="mb-2 font-serif text-lg font-semibold">
-          Delete Account
-        </h3>
-        <p className="text-sm text-neutral-600">
-          Char is a local-first app — your notes, transcripts, and meeting data
-          are stored locally on your device and will not be affected by account
-          deletion. Deleting your account only removes your cloud-stored data.
-        </p>
-      </div>
-
-      <div className="border-t border-neutral-100 p-4">
-        {showConfirm ? (
-          <div className="rounded-md border border-red-200 bg-red-50 p-4">
-            <p className="mb-3 text-sm text-red-800">
-              Are you sure? This will permanently delete your account and all
-              cloud-stored data. Your local data will not be affected.
-            </p>
-            {deleteAccountMutation.isError && (
-              <p className="mb-3 text-sm text-red-600">
-                {deleteAccountMutation.error?.message ||
-                  "Failed to delete account"}
-              </p>
-            )}
-            <div className="flex gap-2">
-              <button
-                onClick={() => deleteAccountMutation.mutate()}
-                disabled={deleteAccountMutation.isPending}
-                className="flex h-8 items-center rounded-full bg-red-600 px-4 text-sm text-white shadow-md transition-all hover:scale-[102%] hover:shadow-lg active:scale-[98%] disabled:opacity-50 disabled:hover:scale-100"
-              >
-                {deleteAccountMutation.isPending
-                  ? "Deleting..."
-                  : "Yes, Delete My Account"}
-              </button>
-              <button
-                onClick={() => setShowConfirm(false)}
-                disabled={deleteAccountMutation.isPending}
-                className="flex h-8 items-center rounded-full border border-neutral-300 bg-linear-to-b from-white to-stone-50 px-4 text-sm text-neutral-700 shadow-xs transition-all hover:scale-[102%] hover:shadow-md active:scale-[98%] disabled:opacity-50"
-              >
-                Cancel
-              </button>
-            </div>
-          </div>
-        ) : (
-          <button
-            onClick={() => setShowConfirm(true)}
-            className="flex h-8 cursor-pointer items-center rounded-full border border-red-200 px-4 text-sm text-red-600 transition-all hover:border-red-300 hover:text-red-700"
-          >
-            Delete Account
-          </button>
-        )}
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/routes/_view/app/-account-sign-out.tsx b/apps/web/src/routes/_view/app/-account-sign-out.tsx
deleted file mode 100644
index 860445b7e1..0000000000
--- a/apps/web/src/routes/_view/app/-account-sign-out.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { useMutation } from "@tanstack/react-query";
-import { useNavigate } from "@tanstack/react-router";
-
-import { signOutFn } from "@/functions/auth";
-
-export function SignOutSection() {
-  const navigate = useNavigate();
-
-  const signOut = useMutation({
-    mutationFn: async () => {
-      const res = await signOutFn();
-      if (res.success) {
-        return true;
-      }
-
-      throw new Error(res.message);
-    },
-    onSuccess: () => {
-      navigate({ to: "/" });
-    },
-    onError: (error) => {
-      console.error(error);
-      navigate({ to: "/" });
-    },
-  });
-
-  return (
-    <div className="rounded-xs border border-neutral-100">
-      <div className="p-4">
-        <h3 className="mb-2 font-serif text-lg font-semibold">Sign Out</h3>
-        <p className="text-sm text-neutral-600">End your current session</p>
-      </div>
-
-      <div className="border-t border-neutral-100 p-4">
-        <button
-          onClick={() => signOut.mutate()}
-          disabled={signOut.isPending}
-          className="flex h-8 cursor-pointer items-center rounded-full border border-red-200 px-4 text-sm text-red-600 transition-all hover:border-red-300 hover:text-red-700 disabled:opacity-50 disabled:hover:border-red-200"
-        >
-          {signOut.isPending ? "Signing out..." : "Sign out"}
-        </button>
-      </div>
-    </div>
-  );
-}
diff --git a/apps/web/src/routes/_view/app/account.tsx b/apps/web/src/routes/_view/app/account.tsx
index e1ddeab466..f6dba122f9 100644
--- a/apps/web/src/routes/_view/app/account.tsx
+++ b/apps/web/src/routes/_view/app/account.tsx
@@ -4,11 +4,10 @@ import { z } from "zod";
 
 import { desktopSchemeSchema } from "@/functions/desktop-flow";
 
-import { DeleteAccountSection } from "./-account-delete";
+import { AccountAccessSection } from "./-account-access";
 import { IntegrationsSettingsCard } from "./-account-integrations";
 import { ProfileInfoSection } from "./-account-profile-info";
 import { AccountSettingsCard } from "./-account-settings";
-import { SignOutSection } from "./-account-sign-out";
 
 const validateSearch = z
   .object({
@@ -43,16 +42,48 @@ function Component() {
           </h1>
         </div>
 
-        <div className="mx-auto mt-8 flex max-w-4xl flex-col gap-6 px-4 pb-20">
-          <ProfileInfoSection email={user?.email} />
+        <div className="mx-auto mt-8 flex max-w-4xl flex-col gap-10 px-4 pb-20">
+          <section className="space-y-4">
+            <div className="space-y-2 px-1">
+              <p className="text-xs font-medium tracking-[0.18em] text-neutral-400 uppercase">
+                Account
+              </p>
+              <div>
+                <h2 className="font-serif text-2xl font-medium text-stone-950">
+                  Profile, billing, and connected services
+                </h2>
+                <p className="text-sm text-neutral-600">
+                  Update the essentials without burying routine settings behind
+                  destructive actions.
+                </p>
+              </div>
+            </div>
 
-          <AccountSettingsCard />
+            <div className="space-y-6">
+              <ProfileInfoSection email={user?.email} />
+              <AccountSettingsCard />
+              <IntegrationsSettingsCard />
+            </div>
+          </section>
 
-          <IntegrationsSettingsCard />
+          <section className="space-y-4">
+            <div className="space-y-2 px-1">
+              <p className="text-xs font-medium tracking-[0.18em] text-neutral-400 uppercase">
+                Access
+              </p>
+              <div>
+                <h2 className="font-serif text-2xl font-medium text-stone-950">
+                  Session controls
+                </h2>
+                <p className="text-sm text-neutral-600">
+                  Sign out quickly, while keeping account deletion tucked behind
+                  an extra deliberate step.
+                </p>
+              </div>
+            </div>
 
-          <DeleteAccountSection />
-
-          <SignOutSection />
+            <AccountAccessSection />
+          </section>
         </div>
       </div>
     </div>