diff --git a/src/components/common/Modal/Modal.tsx b/src/components/common/Modal/Modal.tsx
index 0cac8cf..adce0d9 100644
--- a/src/components/common/Modal/Modal.tsx
+++ b/src/components/common/Modal/Modal.tsx
@@ -20,7 +20,7 @@ const overlayStyles = tv({
 });
 
 const modalStyles = tv({
-  base: "p-5 w-full max-w-md max-h-full rounded-2xl bg-gray-subtle forced-colors:bg-[Canvas] flex flex-col items-start gap-4 shadow-2xl bg-clip-padding border border-gray-dim",
+  base: "p-5 w-[400px] max-w-full max-h-full rounded-2xl bg-gray-subtle forced-colors:bg-[Canvas] flex flex-col items-start gap-4 shadow-2xl bg-clip-padding border border-gray-dim",
   variants: {
     isEntering: {
       true: "animate-in zoom-in-105 ease-out duration-2",
@@ -58,3 +58,11 @@ export function ModalHeader({ title, children }: ModalHeaderProps) {
     </header>
   );
 }
+
+export function ModalFooter({ children }: { children: React.ReactNode }) {
+  return (
+    <footer className="flex w-full justify-end items-center gap-2">
+      {children}
+    </footer>
+  );
+}
diff --git a/src/components/quests/EditQuestCostsModal/EditQuestCostsModal.tsx b/src/components/quests/EditQuestCostsModal/EditQuestCostsModal.tsx
index 2683178..d2371a9 100644
--- a/src/components/quests/EditQuestCostsModal/EditQuestCostsModal.tsx
+++ b/src/components/quests/EditQuestCostsModal/EditQuestCostsModal.tsx
@@ -30,7 +30,7 @@ const CostInput = memo(function CostInput({
     <div className="flex items-start gap-2">
       <NumberField
         aria-label="Cost"
-        className="w-28"
+        className="w-24"
         prefix="$"
         value={cost.cost}
         onChange={(value) =>
diff --git a/src/components/quests/EditQuestTimeRequiredModal/EditQuestTimeRequiredModal.tsx b/src/components/quests/EditQuestTimeRequiredModal/EditQuestTimeRequiredModal.tsx
index 2d1515d..bf9a15f 100644
--- a/src/components/quests/EditQuestTimeRequiredModal/EditQuestTimeRequiredModal.tsx
+++ b/src/components/quests/EditQuestTimeRequiredModal/EditQuestTimeRequiredModal.tsx
@@ -39,7 +39,7 @@ const TimeRequiredInput = memo(function TimeRequiredInput({
       <div className="flex items-end gap-2">
         <NumberField
           label="Est. min time"
-          className="w-28"
+          className="w-24"
           value={timeRequired?.min}
           maxValue={Math.max(timeRequired.max, 60)}
           onChange={(value) =>
@@ -51,7 +51,7 @@ const TimeRequiredInput = memo(function TimeRequiredInput({
         />
         <NumberField
           label="Est. max time"
-          className="w-28"
+          className="w-24"
           value={timeRequired.max}
           minValue={Math.min(timeRequired.min, 1)}
           onChange={(value) =>
@@ -63,7 +63,7 @@ const TimeRequiredInput = memo(function TimeRequiredInput({
         />
         <Select
           label="Unit"
-          className="w-40"
+          className="flex-1"
           selectedKey={timeRequired.unit}
           onSelectionChange={(key) =>
             onChange({
diff --git a/src/components/settings/DeleteAccountSetting/DeleteAccountSetting.tsx b/src/components/settings/DeleteAccountSetting/DeleteAccountSetting.tsx
new file mode 100644
index 0000000..ec3a62c
--- /dev/null
+++ b/src/components/settings/DeleteAccountSetting/DeleteAccountSetting.tsx
@@ -0,0 +1,67 @@
+import { Button, Modal, ModalFooter, ModalHeader } from "@/components/common";
+import { SettingsItem } from "@/components/settings";
+import { useAuthActions } from "@convex-dev/auth/react";
+import { api } from "@convex/_generated/api";
+import { useMutation } from "convex/react";
+import { Trash } from "lucide-react";
+import { useState } from "react";
+
+type DeleteAccountModalProps = {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onSubmit: () => void;
+};
+
+const DeleteAccountModal = ({
+  isOpen,
+  onOpenChange,
+  onSubmit,
+}: DeleteAccountModalProps) => {
+  const { signOut } = useAuthActions();
+
+  const clearLocalStorage = () => {
+    localStorage.removeItem("theme");
+  };
+  const deleteAccount = useMutation(api.users.deleteCurrentUser);
+
+  const handleSubmit = () => {
+    clearLocalStorage();
+    deleteAccount();
+    signOut();
+    onSubmit();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalHeader title="Delete account?" />
+      <p>This will permanently erase your account and all data.</p>
+      <ModalFooter>
+        <Button onPress={() => onOpenChange(false)}>Cancel</Button>
+        <Button variant="destructive" onPress={handleSubmit}>
+          Delete
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+};
+
+export const DeleteAccountSetting = () => {
+  const [isDeleteAccountModalOpen, setIsDeleteAccountModalOpen] =
+    useState(false);
+
+  return (
+    <SettingsItem
+      label="Delete account"
+      description="Permanently delete your Namesake account and data."
+    >
+      <Button onPress={() => setIsDeleteAccountModalOpen(true)} icon={Trash}>
+        Delete account
+      </Button>
+      <DeleteAccountModal
+        isOpen={isDeleteAccountModalOpen}
+        onOpenChange={setIsDeleteAccountModalOpen}
+        onSubmit={() => setIsDeleteAccountModalOpen(false)}
+      />
+    </SettingsItem>
+  );
+};
diff --git a/src/components/settings/DeleteAccountSetting/index.ts b/src/components/settings/DeleteAccountSetting/index.ts
new file mode 100644
index 0000000..e32a0ef
--- /dev/null
+++ b/src/components/settings/DeleteAccountSetting/index.ts
@@ -0,0 +1 @@
+export * from "./DeleteAccountSetting";
diff --git a/src/components/settings/EditBirthplaceSetting/EditBirthplaceSetting.tsx b/src/components/settings/EditBirthplaceSetting/EditBirthplaceSetting.tsx
new file mode 100644
index 0000000..713dd52
--- /dev/null
+++ b/src/components/settings/EditBirthplaceSetting/EditBirthplaceSetting.tsx
@@ -0,0 +1,96 @@
+import {
+  Button,
+  Form,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  Select,
+  SelectItem,
+} from "@/components/common";
+import { api } from "@convex/_generated/api";
+import type { Doc } from "@convex/_generated/dataModel";
+import { JURISDICTIONS, type Jurisdiction } from "@convex/constants";
+import { useMutation } from "convex/react";
+import { Pencil } from "lucide-react";
+import { useState } from "react";
+import { SettingsItem } from "../SettingsItem";
+
+type EditBirthplaceModalProps = {
+  defaultBirthplace: Jurisdiction;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onSubmit: () => void;
+};
+
+const EditBirthplaceModal = ({
+  defaultBirthplace,
+  isOpen,
+  onOpenChange,
+  onSubmit,
+}: EditBirthplaceModalProps) => {
+  const updateBirthplace = useMutation(api.users.setBirthplace);
+  const [birthplace, setBirthplace] = useState(defaultBirthplace);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    updateBirthplace({ birthplace });
+    onSubmit();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalHeader title="Edit birthplace" />
+      <Form onSubmit={handleSubmit} className="w-full">
+        <Select
+          aria-label="Birthplace"
+          name="birthplace"
+          selectedKey={birthplace}
+          onSelectionChange={(key) => setBirthplace(key as Jurisdiction)}
+          placeholder="Select state"
+          className="w-full"
+        >
+          {Object.entries(JURISDICTIONS).map(([value, label]) => (
+            <SelectItem key={value} id={value}>
+              {label}
+            </SelectItem>
+          ))}
+        </Select>
+        <ModalFooter>
+          <Button variant="secondary" onPress={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button type="submit" variant="primary">
+            Save
+          </Button>
+        </ModalFooter>
+      </Form>
+    </Modal>
+  );
+};
+
+type EditBirthplaceSettingProps = {
+  user: Doc<"users">;
+};
+
+export const EditBirthplaceSetting = ({ user }: EditBirthplaceSettingProps) => {
+  const [isBirthplaceModalOpen, setIsBirthplaceModalOpen] = useState(false);
+
+  return (
+    <SettingsItem
+      label="Birthplace"
+      description="Where were you born? This location is used to select the forms for your birth certificate."
+    >
+      <Button icon={Pencil} onPress={() => setIsBirthplaceModalOpen(true)}>
+        {user?.birthplace
+          ? JURISDICTIONS[user.birthplace as Jurisdiction]
+          : "Set birthplace"}
+      </Button>
+      <EditBirthplaceModal
+        isOpen={isBirthplaceModalOpen}
+        onOpenChange={setIsBirthplaceModalOpen}
+        defaultBirthplace={user.birthplace as Jurisdiction}
+        onSubmit={() => setIsBirthplaceModalOpen(false)}
+      />
+    </SettingsItem>
+  );
+};
diff --git a/src/components/settings/EditBirthplaceSetting/index.ts b/src/components/settings/EditBirthplaceSetting/index.ts
new file mode 100644
index 0000000..84c173f
--- /dev/null
+++ b/src/components/settings/EditBirthplaceSetting/index.ts
@@ -0,0 +1 @@
+export * from "./EditBirthplaceSetting";
diff --git a/src/components/settings/EditMinorSetting/EditMinorSetting.tsx b/src/components/settings/EditMinorSetting/EditMinorSetting.tsx
new file mode 100644
index 0000000..3d5f0e3
--- /dev/null
+++ b/src/components/settings/EditMinorSetting/EditMinorSetting.tsx
@@ -0,0 +1,28 @@
+import { Switch } from "@/components/common";
+import { SettingsItem } from "@/components/settings";
+import { api } from "@convex/_generated/api";
+import type { Doc } from "@convex/_generated/dataModel";
+import { useMutation } from "convex/react";
+
+type EditMinorSettingProps = {
+  user: Doc<"users">;
+};
+
+export const EditMinorSetting = ({ user }: EditMinorSettingProps) => {
+  const updateIsMinor = useMutation(api.users.setCurrentUserIsMinor);
+
+  return (
+    <SettingsItem
+      label="Under 18"
+      description="Are you under 18 years old or applying on behalf of someone who is?"
+    >
+      <Switch
+        name="isMinor"
+        isSelected={user.isMinor ?? false}
+        onChange={() => updateIsMinor({ isMinor: !user.isMinor })}
+      >
+        <span className="sr-only">Is minor</span>
+      </Switch>
+    </SettingsItem>
+  );
+};
diff --git a/src/components/settings/EditMinorSetting/index.ts b/src/components/settings/EditMinorSetting/index.ts
new file mode 100644
index 0000000..9daf4da
--- /dev/null
+++ b/src/components/settings/EditMinorSetting/index.ts
@@ -0,0 +1 @@
+export * from "./EditMinorSetting";
diff --git a/src/components/settings/EditNameSetting/EditNameSetting.tsx b/src/components/settings/EditNameSetting/EditNameSetting.tsx
new file mode 100644
index 0000000..c73642c
--- /dev/null
+++ b/src/components/settings/EditNameSetting/EditNameSetting.tsx
@@ -0,0 +1,85 @@
+import {
+  Button,
+  Form,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  TextField,
+} from "@/components/common";
+import { api } from "@convex/_generated/api";
+import type { Doc } from "@convex/_generated/dataModel";
+import { useMutation } from "convex/react";
+import { Pencil } from "lucide-react";
+import { useState } from "react";
+import { SettingsItem } from "../SettingsItem";
+
+type EditNameModalProps = {
+  defaultName: string;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onSubmit: () => void;
+};
+
+const EditNameModal = ({
+  defaultName,
+  isOpen,
+  onOpenChange,
+  onSubmit,
+}: EditNameModalProps) => {
+  const updateName = useMutation(api.users.setName);
+  const [name, setName] = useState(defaultName);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    updateName({ name });
+    onSubmit();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalHeader title="Edit name" />
+      <Form onSubmit={handleSubmit} className="w-full">
+        <TextField
+          name="name"
+          label="Name"
+          value={name}
+          onChange={setName}
+          className="w-full"
+        />
+        <ModalFooter>
+          <Button variant="secondary" onPress={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button type="submit" variant="primary">
+            Save
+          </Button>
+        </ModalFooter>
+      </Form>
+    </Modal>
+  );
+};
+
+type EditNameSettingProps = {
+  user: Doc<"users">;
+};
+
+export const EditNameSetting = ({ user }: EditNameSettingProps) => {
+  const [isNameModalOpen, setIsNameModalOpen] = useState(false);
+
+  return (
+    <SettingsItem
+      label="Name"
+      description="How should Namesake refer to you? This can be different from your legal name."
+    >
+      <Button icon={Pencil} onPress={() => setIsNameModalOpen(true)}>
+        {user?.name ?? "Set name"}
+      </Button>
+      <EditNameModal
+        isOpen={isNameModalOpen}
+        onOpenChange={setIsNameModalOpen}
+        defaultName={user.name ?? ""}
+        onSubmit={() => setIsNameModalOpen(false)}
+      />
+    </SettingsItem>
+  );
+};
diff --git a/src/components/settings/EditNameSetting/index.ts b/src/components/settings/EditNameSetting/index.ts
new file mode 100644
index 0000000..90caf83
--- /dev/null
+++ b/src/components/settings/EditNameSetting/index.ts
@@ -0,0 +1 @@
+export * from "./EditNameSetting";
diff --git a/src/components/settings/EditResidenceSetting/EditResidenceSetting.tsx b/src/components/settings/EditResidenceSetting/EditResidenceSetting.tsx
new file mode 100644
index 0000000..b4c9bcf
--- /dev/null
+++ b/src/components/settings/EditResidenceSetting/EditResidenceSetting.tsx
@@ -0,0 +1,96 @@
+import {
+  Button,
+  Form,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  Select,
+  SelectItem,
+} from "@/components/common";
+import { SettingsItem } from "@/components/settings";
+import { api } from "@convex/_generated/api";
+import type { Doc } from "@convex/_generated/dataModel";
+import { JURISDICTIONS, type Jurisdiction } from "@convex/constants";
+import { useMutation } from "convex/react";
+import { Pencil } from "lucide-react";
+import { useState } from "react";
+
+type EditResidenceModalProps = {
+  defaultResidence: Jurisdiction;
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onSubmit: () => void;
+};
+
+const EditResidenceModal = ({
+  defaultResidence,
+  isOpen,
+  onOpenChange,
+  onSubmit,
+}: EditResidenceModalProps) => {
+  const updateResidence = useMutation(api.users.setResidence);
+  const [residence, setResidence] = useState(defaultResidence);
+
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    updateResidence({ residence });
+    onSubmit();
+  };
+
+  return (
+    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalHeader title="Edit residence" />
+      <Form onSubmit={handleSubmit} className="w-full">
+        <Select
+          aria-label="Residence"
+          name="residence"
+          selectedKey={residence}
+          onSelectionChange={(key) => setResidence(key as Jurisdiction)}
+          placeholder="Select state"
+          className="w-full"
+        >
+          {Object.entries(JURISDICTIONS).map(([value, label]) => (
+            <SelectItem key={value} id={value}>
+              {label}
+            </SelectItem>
+          ))}
+        </Select>
+        <ModalFooter>
+          <Button variant="secondary" onPress={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button type="submit" variant="primary">
+            Save
+          </Button>
+        </ModalFooter>
+      </Form>
+    </Modal>
+  );
+};
+
+type EditResidenceSettingProps = {
+  user: Doc<"users">;
+};
+
+export const EditResidenceSetting = ({ user }: EditResidenceSettingProps) => {
+  const [isResidenceModalOpen, setIsResidenceModalOpen] = useState(false);
+
+  return (
+    <SettingsItem
+      label="Residence"
+      description="Where do you live? This location is used to select the forms for your court order and state ID."
+    >
+      <Button icon={Pencil} onPress={() => setIsResidenceModalOpen(true)}>
+        {user?.residence
+          ? JURISDICTIONS[user.residence as Jurisdiction]
+          : "Set residence"}
+      </Button>
+      <EditResidenceModal
+        isOpen={isResidenceModalOpen}
+        onOpenChange={setIsResidenceModalOpen}
+        defaultResidence={user.residence as Jurisdiction}
+        onSubmit={() => setIsResidenceModalOpen(false)}
+      />
+    </SettingsItem>
+  );
+};
diff --git a/src/components/settings/EditResidenceSetting/index.ts b/src/components/settings/EditResidenceSetting/index.ts
new file mode 100644
index 0000000..0e859fa
--- /dev/null
+++ b/src/components/settings/EditResidenceSetting/index.ts
@@ -0,0 +1 @@
+export * from "./EditResidenceSetting";
diff --git a/src/components/settings/EditThemeSetting/EditThemeSetting.tsx b/src/components/settings/EditThemeSetting/EditThemeSetting.tsx
new file mode 100644
index 0000000..2d7b17a
--- /dev/null
+++ b/src/components/settings/EditThemeSetting/EditThemeSetting.tsx
@@ -0,0 +1,25 @@
+import { ToggleButton, ToggleButtonGroup } from "@/components/common";
+import { useTheme } from "@/utils/useTheme";
+import { THEMES } from "@convex/constants";
+import { SettingsItem } from "../SettingsItem";
+
+export const EditThemeSetting = () => {
+  const { themeSelection, setTheme } = useTheme();
+
+  return (
+    <SettingsItem label="Theme" description="Adjust your display.">
+      <ToggleButtonGroup
+        selectionMode="single"
+        disallowEmptySelection
+        selectedKeys={themeSelection}
+        onSelectionChange={setTheme}
+      >
+        {Object.entries(THEMES).map(([theme, details]) => (
+          <ToggleButton key={theme} id={theme}>
+            {details.label}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+    </SettingsItem>
+  );
+};
diff --git a/src/components/settings/EditThemeSetting/index.ts b/src/components/settings/EditThemeSetting/index.ts
new file mode 100644
index 0000000..2cd9e6a
--- /dev/null
+++ b/src/components/settings/EditThemeSetting/index.ts
@@ -0,0 +1 @@
+export * from "./EditThemeSetting";
diff --git a/src/components/settings/SettingsGroup/SettingsGroup.tsx b/src/components/settings/SettingsGroup/SettingsGroup.tsx
new file mode 100644
index 0000000..9ac8d5a
--- /dev/null
+++ b/src/components/settings/SettingsGroup/SettingsGroup.tsx
@@ -0,0 +1,16 @@
+import { Card } from "@/components/common";
+import { Heading } from "react-aria-components";
+
+type SettingsGroupProps = {
+  title: string;
+  children: React.ReactNode;
+};
+
+export const SettingsGroup = ({ title, children }: SettingsGroupProps) => (
+  <section className="flex flex-col gap-4 mb-8 last-of-type:mb-0">
+    <Heading className="text-lg font-medium">{title}</Heading>
+    <Card className="flex flex-col p-0 divide-y divide-gray-dim">
+      {children}
+    </Card>
+  </section>
+);
diff --git a/src/components/settings/SettingsGroup/index.ts b/src/components/settings/SettingsGroup/index.ts
new file mode 100644
index 0000000..e5ade9c
--- /dev/null
+++ b/src/components/settings/SettingsGroup/index.ts
@@ -0,0 +1 @@
+export * from "./SettingsGroup";
diff --git a/src/components/settings/SettingsItem/SettingsItem.tsx b/src/components/settings/SettingsItem/SettingsItem.tsx
new file mode 100644
index 0000000..821a269
--- /dev/null
+++ b/src/components/settings/SettingsItem/SettingsItem.tsx
@@ -0,0 +1,25 @@
+import { Heading } from "react-aria-components";
+
+type SettingsItemProps = {
+  label: string;
+  description?: string;
+  children: React.ReactNode;
+};
+
+export const SettingsItem = ({
+  label,
+  description,
+  children,
+}: SettingsItemProps) => (
+  <div className="flex justify-between items-center gap-8 p-4">
+    <div className="self-start">
+      <Heading className="text-base -mt-px">{label}</Heading>
+      {description && (
+        <p className="text-xs text-gray-dim text-balance mt-0.5">
+          {description}
+        </p>
+      )}
+    </div>
+    <div>{children}</div>
+  </div>
+);
diff --git a/src/components/settings/SettingsItem/index.ts b/src/components/settings/SettingsItem/index.ts
new file mode 100644
index 0000000..d356523
--- /dev/null
+++ b/src/components/settings/SettingsItem/index.ts
@@ -0,0 +1 @@
+export * from "./SettingsItem";
diff --git a/src/components/settings/index.ts b/src/components/settings/index.ts
new file mode 100644
index 0000000..5b7239d
--- /dev/null
+++ b/src/components/settings/index.ts
@@ -0,0 +1,8 @@
+export * from "./DeleteAccountSetting";
+export * from "./EditBirthplaceSetting";
+export * from "./EditNameSetting";
+export * from "./EditMinorSetting";
+export * from "./EditResidenceSetting";
+export * from "./EditThemeSetting";
+export * from "./SettingsGroup";
+export * from "./SettingsItem";
diff --git a/src/routes/_authenticated/settings/account.tsx b/src/routes/_authenticated/settings/account.tsx
index 10d38ef..ff7d3f2 100644
--- a/src/routes/_authenticated/settings/account.tsx
+++ b/src/routes/_authenticated/settings/account.tsx
@@ -1,251 +1,23 @@
 import { PageHeader } from "@/components/app";
 import {
-  Button,
-  Card,
-  Form,
-  Modal,
-  Select,
-  SelectItem,
-  Switch,
-  TextField,
-  ToggleButton,
-  ToggleButtonGroup,
-} from "@/components/common";
-import { useTheme } from "@/utils/useTheme";
-import { useAuthActions } from "@convex-dev/auth/react";
+  DeleteAccountSetting,
+  EditBirthplaceSetting,
+  EditMinorSetting,
+  EditNameSetting,
+  EditResidenceSetting,
+  EditThemeSetting,
+  SettingsGroup,
+} from "@/components/settings";
 import { api } from "@convex/_generated/api";
-import { JURISDICTIONS, type Jurisdiction, THEMES } from "@convex/constants";
 import { createFileRoute } from "@tanstack/react-router";
-import { useMutation, useQuery } from "convex/react";
-import { Pencil, Trash } from "lucide-react";
-import { useState } from "react";
-import { Header } from "react-aria-components";
+import { useQuery } from "convex/react";
 
 export const Route = createFileRoute("/_authenticated/settings/account")({
   component: SettingsAccountRoute,
 });
 
-const SettingsSection = ({
-  title,
-  children,
-}: {
-  title: string;
-  children: React.ReactNode;
-}) => (
-  <section className="flex flex-col gap-4 mb-8 last-of-type:mb-0">
-    <h2 className="text-lg font-medium">{title}</h2>
-    <Card className="flex flex-col p-0 divide-y divide-gray-dim">
-      {children}
-    </Card>
-  </section>
-);
-
-const SettingsItem = ({
-  label,
-  description,
-  children,
-}: {
-  label: string;
-  description?: string;
-  children: React.ReactNode;
-}) => (
-  <div className="flex justify-between items-center gap-8 p-4">
-    <div className="self-start">
-      <h3 className="text-base -mt-px">{label}</h3>
-      {description && (
-        <p className="text-xs text-gray-dim text-balance mt-0.5">
-          {description}
-        </p>
-      )}
-    </div>
-    <div>{children}</div>
-  </div>
-);
-
-const EditNameDialog = ({
-  defaultName,
-  isOpen,
-  onOpenChange,
-  onSubmit,
-}: {
-  defaultName: string;
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  onSubmit: () => void;
-}) => {
-  const updateName = useMutation(api.users.setName);
-  const [name, setName] = useState(defaultName);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    updateName({ name });
-    onSubmit();
-  };
-
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-      <Form onSubmit={handleSubmit} className="w-full">
-        Edit name
-        <TextField name="name" label="Name" value={name} onChange={setName} />
-        <div className="flex justify-end gap-2">
-          <Button variant="secondary" onPress={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button type="submit" variant="primary">
-            Save
-          </Button>
-        </div>
-      </Form>
-    </Modal>
-  );
-};
-
-const EditResidenceDialog = ({
-  defaultResidence,
-  isOpen,
-  onOpenChange,
-  onSubmit,
-}: {
-  defaultResidence: Jurisdiction;
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  onSubmit: () => void;
-}) => {
-  const updateResidence = useMutation(api.users.setResidence);
-  const [residence, setResidence] = useState(defaultResidence);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    updateResidence({ residence });
-    onSubmit();
-  };
-
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-      <Form onSubmit={handleSubmit} className="w-full">
-        Edit residence
-        <Select
-          aria-label="Residence"
-          name="residence"
-          selectedKey={residence}
-          onSelectionChange={(key) => setResidence(key as Jurisdiction)}
-          placeholder="Select state"
-        >
-          {Object.entries(JURISDICTIONS).map(([value, label]) => (
-            <SelectItem key={value} id={value}>
-              {label}
-            </SelectItem>
-          ))}
-        </Select>
-        <div className="flex justify-end gap-2">
-          <Button variant="secondary" onPress={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button type="submit" variant="primary">
-            Save
-          </Button>
-        </div>
-      </Form>
-    </Modal>
-  );
-};
-
-const EditBirthplaceDialog = ({
-  defaultBirthplace,
-  isOpen,
-  onOpenChange,
-  onSubmit,
-}: {
-  defaultBirthplace: Jurisdiction;
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  onSubmit: () => void;
-}) => {
-  const updateBirthplace = useMutation(api.users.setBirthplace);
-  const [birthplace, setBirthplace] = useState(defaultBirthplace);
-
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    updateBirthplace({ birthplace });
-    onSubmit();
-  };
-
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-      <Form onSubmit={handleSubmit} className="w-full">
-        Edit birthplace
-        <Select
-          aria-label="Birthplace"
-          name="birthplace"
-          selectedKey={birthplace}
-          onSelectionChange={(key) => setBirthplace(key as Jurisdiction)}
-          placeholder="Select state"
-        >
-          {Object.entries(JURISDICTIONS).map(([value, label]) => (
-            <SelectItem key={value} id={value}>
-              {label}
-            </SelectItem>
-          ))}
-        </Select>
-        <div className="flex justify-end gap-2">
-          <Button variant="secondary" onPress={() => onOpenChange(false)}>
-            Cancel
-          </Button>
-          <Button type="submit" variant="primary">
-            Save
-          </Button>
-        </div>
-      </Form>
-    </Modal>
-  );
-};
-
-const DeleteAccountDialog = ({
-  isOpen,
-  onOpenChange,
-  onSubmit,
-}: {
-  isOpen: boolean;
-  onOpenChange: (isOpen: boolean) => void;
-  onSubmit: () => void;
-}) => {
-  const { signOut } = useAuthActions();
-  const clearLocalStorage = () => {
-    localStorage.removeItem("theme");
-  };
-  const deleteAccount = useMutation(api.users.deleteCurrentUser);
-
-  const handleSubmit = () => {
-    clearLocalStorage();
-    deleteAccount();
-    signOut();
-    onSubmit();
-  };
-
-  return (
-    <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
-      <Header>Delete account?</Header>
-      <p>This will permanently erase your account and all data.</p>
-      <div className="flex justify-end w-full gap-2">
-        <Button onPress={() => onOpenChange(false)}>Cancel</Button>
-        <Button variant="destructive" onPress={handleSubmit}>
-          Delete
-        </Button>
-      </div>
-    </Modal>
-  );
-};
-
 function SettingsAccountRoute() {
   const user = useQuery(api.users.getCurrentUser);
-  const { themeSelection, setTheme } = useTheme();
-
-  const [isNameDialogOpen, setIsNameDialogOpen] = useState(false);
-  const [isDeleteAccountDialogOpen, setIsDeleteAccountDialogOpen] =
-    useState(false);
-  const [isResidenceDialogOpen, setIsResidenceDialogOpen] = useState(false);
-  const [isBirthplaceDialogOpen, setIsBirthplaceDialogOpen] = useState(false);
-  const updateIsMinor = useMutation(api.users.setCurrentUserIsMinor);
 
   return (
     <>
@@ -256,106 +28,18 @@ function SettingsAccountRoute() {
         "User not found, please reload"
       ) : (
         <>
-          <SettingsSection title="Personal Information">
-            <SettingsItem
-              label="Name"
-              description="How should Namesake refer to you? This can be different from your legal name."
-            >
-              <Button icon={Pencil} onPress={() => setIsNameDialogOpen(true)}>
-                {user?.name ?? "Set name"}
-              </Button>
-              <EditNameDialog
-                isOpen={isNameDialogOpen}
-                onOpenChange={setIsNameDialogOpen}
-                defaultName={user.name ?? ""}
-                onSubmit={() => setIsNameDialogOpen(false)}
-              />
-            </SettingsItem>
-            <SettingsItem
-              label="Under 18"
-              description="Are you under 18 years old or applying on behalf of someone who is?"
-            >
-              <Switch
-                name="isMinor"
-                isSelected={user.isMinor ?? false}
-                onChange={() => updateIsMinor({ isMinor: !user.isMinor })}
-              >
-                <span className="sr-only">Is minor</span>
-              </Switch>
-            </SettingsItem>
-            <SettingsItem
-              label="Residence"
-              description="Where do you live? This location is used to select the forms for your court order and state ID."
-            >
-              <Button
-                icon={Pencil}
-                onPress={() => setIsResidenceDialogOpen(true)}
-              >
-                {user?.residence
-                  ? JURISDICTIONS[user.residence as Jurisdiction]
-                  : "Set residence"}
-              </Button>
-              <EditResidenceDialog
-                isOpen={isResidenceDialogOpen}
-                onOpenChange={setIsResidenceDialogOpen}
-                defaultResidence={user.residence as Jurisdiction}
-                onSubmit={() => setIsResidenceDialogOpen(false)}
-              />
-            </SettingsItem>
-            <SettingsItem
-              label="Birthplace"
-              description="Where were you born? This location is used to select the forms for your birth certificate."
-            >
-              <Button
-                icon={Pencil}
-                onPress={() => setIsBirthplaceDialogOpen(true)}
-              >
-                {user?.birthplace
-                  ? JURISDICTIONS[user.birthplace as Jurisdiction]
-                  : "Set birthplace"}
-              </Button>
-              <EditBirthplaceDialog
-                isOpen={isBirthplaceDialogOpen}
-                onOpenChange={setIsBirthplaceDialogOpen}
-                defaultBirthplace={user.birthplace as Jurisdiction}
-                onSubmit={() => setIsBirthplaceDialogOpen(false)}
-              />
-            </SettingsItem>
-          </SettingsSection>
-          <SettingsSection title="Appearance">
-            <SettingsItem label="Theme" description="Adjust your display.">
-              <ToggleButtonGroup
-                selectionMode="single"
-                disallowEmptySelection
-                selectedKeys={themeSelection}
-                onSelectionChange={setTheme}
-              >
-                {Object.entries(THEMES).map(([theme, details]) => (
-                  <ToggleButton key={theme} id={theme}>
-                    {details.label}
-                  </ToggleButton>
-                ))}
-              </ToggleButtonGroup>
-            </SettingsItem>
-          </SettingsSection>
-          <SettingsSection title="Danger Zone">
-            <SettingsItem
-              label="Delete account"
-              description="Permanently delete your Namesake account and data."
-            >
-              <Button
-                onPress={() => setIsDeleteAccountDialogOpen(true)}
-                icon={Trash}
-              >
-                Delete account
-              </Button>
-              <DeleteAccountDialog
-                isOpen={isDeleteAccountDialogOpen}
-                onOpenChange={setIsDeleteAccountDialogOpen}
-                onSubmit={() => setIsDeleteAccountDialogOpen(false)}
-              />
-            </SettingsItem>
-          </SettingsSection>
+          <SettingsGroup title="Personal Information">
+            <EditNameSetting user={user} />
+            <EditMinorSetting user={user} />
+            <EditResidenceSetting user={user} />
+            <EditBirthplaceSetting user={user} />
+          </SettingsGroup>
+          <SettingsGroup title="Appearance">
+            <EditThemeSetting />
+          </SettingsGroup>
+          <SettingsGroup title="Danger Zone">
+            <DeleteAccountSetting />
+          </SettingsGroup>
         </>
       )}
     </>