diff --git a/src/components/settings/DeleteAccountDialog/index.ts b/src/components/settings/DeleteAccountDialog/index.ts
deleted file mode 100644
index f41637a9..00000000
--- a/src/components/settings/DeleteAccountDialog/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./DeleteAccountDialog";
diff --git a/src/components/settings/DeleteAccountDialog/DeleteAccountDialog.tsx b/src/components/settings/DeleteAccountSetting/DeleteAccountSetting.tsx
similarity index 56%
rename from src/components/settings/DeleteAccountDialog/DeleteAccountDialog.tsx
rename to src/components/settings/DeleteAccountSetting/DeleteAccountSetting.tsx
index dccb4ab9..f0cd613c 100644
--- a/src/components/settings/DeleteAccountDialog/DeleteAccountDialog.tsx
+++ b/src/components/settings/DeleteAccountSetting/DeleteAccountSetting.tsx
@@ -1,20 +1,24 @@
 import { Button, Modal, 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 DeleteAccountDialogProps = {
+type DeleteAccountModalProps = {
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   onSubmit: () => void;
 };
 
-export const DeleteAccountDialog = ({
+const DeleteAccountModal = ({
   isOpen,
   onOpenChange,
   onSubmit,
-}: DeleteAccountDialogProps) => {
+}: DeleteAccountModalProps) => {
   const { signOut } = useAuthActions();
+
   const clearLocalStorage = () => {
     localStorage.removeItem("theme");
   };
@@ -40,3 +44,24 @@ export const DeleteAccountDialog = ({
     </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 00000000..e32a0ef1
--- /dev/null
+++ b/src/components/settings/DeleteAccountSetting/index.ts
@@ -0,0 +1 @@
+export * from "./DeleteAccountSetting";
diff --git a/src/components/settings/EditBirthplaceDialog/index.ts b/src/components/settings/EditBirthplaceDialog/index.ts
deleted file mode 100644
index 5985a93d..00000000
--- a/src/components/settings/EditBirthplaceDialog/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./EditBirthplaceDialog";
diff --git a/src/components/settings/EditBirthplaceDialog/EditBirthplaceDialog.tsx b/src/components/settings/EditBirthplaceSetting/EditBirthplaceSetting.tsx
similarity index 59%
rename from src/components/settings/EditBirthplaceDialog/EditBirthplaceDialog.tsx
rename to src/components/settings/EditBirthplaceSetting/EditBirthplaceSetting.tsx
index 05db219e..6399d05c 100644
--- a/src/components/settings/EditBirthplaceDialog/EditBirthplaceDialog.tsx
+++ b/src/components/settings/EditBirthplaceSetting/EditBirthplaceSetting.tsx
@@ -1,22 +1,25 @@
 import { Button, Form, Modal, 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 EditBirthplaceDialogProps = {
+type EditBirthplaceModalProps = {
   defaultBirthplace: Jurisdiction;
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   onSubmit: () => void;
 };
 
-export const EditBirthplaceDialog = ({
+const EditBirthplaceModal = ({
   defaultBirthplace,
   isOpen,
   onOpenChange,
   onSubmit,
-}: EditBirthplaceDialogProps) => {
+}: EditBirthplaceModalProps) => {
   const updateBirthplace = useMutation(api.users.setBirthplace);
   const [birthplace, setBirthplace] = useState(defaultBirthplace);
 
@@ -55,3 +58,30 @@ export const EditBirthplaceDialog = ({
     </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 00000000..84c173f1
--- /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 00000000..3d5f0e3e
--- /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 00000000..9daf4da7
--- /dev/null
+++ b/src/components/settings/EditMinorSetting/index.ts
@@ -0,0 +1 @@
+export * from "./EditMinorSetting";
diff --git a/src/components/settings/EditNameDialog/index.ts b/src/components/settings/EditNameDialog/index.ts
deleted file mode 100644
index 52a6f42b..00000000
--- a/src/components/settings/EditNameDialog/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./EditNameDialog";
diff --git a/src/components/settings/EditNameDialog/EditNameDialog.tsx b/src/components/settings/EditNameSetting/EditNameSetting.tsx
similarity index 55%
rename from src/components/settings/EditNameDialog/EditNameDialog.tsx
rename to src/components/settings/EditNameSetting/EditNameSetting.tsx
index 3d26e6fc..18296e60 100644
--- a/src/components/settings/EditNameDialog/EditNameDialog.tsx
+++ b/src/components/settings/EditNameSetting/EditNameSetting.tsx
@@ -1,21 +1,24 @@
 import { Button, Form, Modal, 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 EditNameDialogProps = {
+type EditNameModalProps = {
   defaultName: string;
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   onSubmit: () => void;
 };
 
-export const EditNameDialog = ({
+const EditNameModal = ({
   defaultName,
   isOpen,
   onOpenChange,
   onSubmit,
-}: EditNameDialogProps) => {
+}: EditNameModalProps) => {
   const updateName = useMutation(api.users.setName);
   const [name, setName] = useState(defaultName);
 
@@ -42,3 +45,28 @@ export const EditNameDialog = ({
     </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 00000000..90caf838
--- /dev/null
+++ b/src/components/settings/EditNameSetting/index.ts
@@ -0,0 +1 @@
+export * from "./EditNameSetting";
diff --git a/src/components/settings/EditResidenceDialog/index.ts b/src/components/settings/EditResidenceDialog/index.ts
deleted file mode 100644
index 8a760d1e..00000000
--- a/src/components/settings/EditResidenceDialog/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./EditResidenceDialog";
diff --git a/src/components/settings/EditResidenceDialog/EditResidenceDialog.tsx b/src/components/settings/EditResidenceSetting/EditResidenceSetting.tsx
similarity index 54%
rename from src/components/settings/EditResidenceDialog/EditResidenceDialog.tsx
rename to src/components/settings/EditResidenceSetting/EditResidenceSetting.tsx
index 4675ab9a..d87302ae 100644
--- a/src/components/settings/EditResidenceDialog/EditResidenceDialog.tsx
+++ b/src/components/settings/EditResidenceSetting/EditResidenceSetting.tsx
@@ -1,22 +1,32 @@
-import { Button, Form, Modal, Select, SelectItem } from "@/components/common";
+import {
+  Button,
+  Form,
+  Modal,
+  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 EditResidenceDialogProps = {
+type EditResidenceModalProps = {
   defaultResidence: Jurisdiction;
   isOpen: boolean;
   onOpenChange: (isOpen: boolean) => void;
   onSubmit: () => void;
 };
 
-export const EditResidenceDialog = ({
+const EditResidenceModal = ({
   defaultResidence,
   isOpen,
   onOpenChange,
   onSubmit,
-}: EditResidenceDialogProps) => {
+}: EditResidenceModalProps) => {
   const updateResidence = useMutation(api.users.setResidence);
   const [residence, setResidence] = useState(defaultResidence);
 
@@ -28,8 +38,8 @@ export const EditResidenceDialog = ({
 
   return (
     <Modal isOpen={isOpen} onOpenChange={onOpenChange}>
+      <ModalHeader title="Edit residence" />
       <Form onSubmit={handleSubmit} className="w-full">
-        Edit residence
         <Select
           aria-label="Residence"
           name="residence"
@@ -55,3 +65,30 @@ export const EditResidenceDialog = ({
     </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 00000000..0e859fa2
--- /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 00000000..2d7b17af
--- /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 00000000..2cd9e6ab
--- /dev/null
+++ b/src/components/settings/EditThemeSetting/index.ts
@@ -0,0 +1 @@
+export * from "./EditThemeSetting";
diff --git a/src/components/settings/index.ts b/src/components/settings/index.ts
index 87051bd1..5b7239d8 100644
--- a/src/components/settings/index.ts
+++ b/src/components/settings/index.ts
@@ -1,6 +1,8 @@
-export * from "./DeleteAccountDialog";
-export * from "./EditBirthplaceDialog";
-export * from "./EditNameDialog";
-export * from "./EditResidenceDialog";
+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 73809bf4..ff7d3f2d 100644
--- a/src/routes/_authenticated/settings/account.tsx
+++ b/src/routes/_authenticated/settings/account.tsx
@@ -1,25 +1,16 @@
 import { PageHeader } from "@/components/app";
 import {
-  Button,
-  Switch,
-  ToggleButton,
-  ToggleButtonGroup,
-} from "@/components/common";
-import {
-  DeleteAccountDialog,
-  EditBirthplaceDialog,
-  EditNameDialog,
-  EditResidenceDialog,
+  DeleteAccountSetting,
+  EditBirthplaceSetting,
+  EditMinorSetting,
+  EditNameSetting,
+  EditResidenceSetting,
+  EditThemeSetting,
   SettingsGroup,
-  SettingsItem,
 } from "@/components/settings";
-import { useTheme } from "@/utils/useTheme";
 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 { useQuery } from "convex/react";
 
 export const Route = createFileRoute("/_authenticated/settings/account")({
   component: SettingsAccountRoute,
@@ -27,14 +18,6 @@ export const Route = createFileRoute("/_authenticated/settings/account")({
 
 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 (
     <>
@@ -46,104 +29,16 @@ function SettingsAccountRoute() {
       ) : (
         <>
           <SettingsGroup 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>
+            <EditNameSetting user={user} />
+            <EditMinorSetting user={user} />
+            <EditResidenceSetting user={user} />
+            <EditBirthplaceSetting user={user} />
           </SettingsGroup>
           <SettingsGroup 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>
+            <EditThemeSetting />
           </SettingsGroup>
           <SettingsGroup 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>
+            <DeleteAccountSetting />
           </SettingsGroup>
         </>
       )}