diff --git a/apps/mobile/src/components/ListRow.tsx b/apps/mobile/src/components/ListRow.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..eeacede11f92e5f4d3fdb8336b9ef4711178571b
--- /dev/null
+++ b/apps/mobile/src/components/ListRow.tsx
@@ -0,0 +1,36 @@
+import { Platform } from "react-native";
+
+import { useResolveClassNames } from "uniwind";
+import { SymbolView } from "./AppSymbol";
+import { ListRowLayout, type ListRowContentProps } from "./ListRowLayout";
+import { RowPressable } from "./RowPressable";
+
+/** A navigation row owns its look; callers supply content and destination behavior. */
+export function ListRow(props: ListRowContentProps & { readonly onPress: () => void }) {
+  const rippleStyle = useResolveClassNames("bg-subtle-strong");
+  return (
+    <RowPressable
+      accessibilityRole="button"
+      accessibilityLabel={[props.label, props.description, props.detail].filter(Boolean).join(", ")}
+      accessibilityState={{ disabled: Boolean(props.disabled) }}
+      disabled={props.disabled}
+      onPress={props.onPress}
+      android_ripple={{ color: rippleStyle.backgroundColor }}
+      unstable_pressDelay={Platform.OS === "android" ? 50 : undefined}
+      className="bg-grouped-card"
+    >
+      <ListRowLayout
+        {...props}
+        accessory={
+          <SymbolView
+            name="chevron.right"
+            size={16}
+            tintColorClassName="accent-chevron"
+            type="monochrome"
+            weight="semibold"
+          />
+        }
+      />
+    </RowPressable>
+  );
+}
diff --git a/apps/mobile/src/components/ListRowLayout.tsx b/apps/mobile/src/components/ListRowLayout.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..96138fdbb8a009b9c3a49a483298a2b7a975b8ba
--- /dev/null
+++ b/apps/mobile/src/components/ListRowLayout.tsx
@@ -0,0 +1,68 @@
+import type { ReactNode } from "react";
+import { Platform, useWindowDimensions, View } from "react-native";
+
+import { cn } from "../lib/cn";
+import { AppText } from "./AppText";
+import { SymbolView, type AppSymbolName } from "./AppSymbol";
+
+export interface ListRowContentProps {
+  readonly icon?: AppSymbolName;
+  readonly label: string;
+  readonly description?: string;
+  readonly detail?: string;
+  readonly disabled?: boolean;
+}
+
+/** Shared row geometry; controls own their behavior and accessibility. */
+export function ListRowLayout({
+  icon,
+  label,
+  description,
+  detail,
+  disabled,
+  accessory,
+}: ListRowContentProps & { readonly accessory?: ReactNode }) {
+  const { fontScale } = useWindowDimensions();
+  // Leave the label room to wrap at accessibility text sizes.
+  const stackDetail = fontScale >= 1.5;
+  return (
+    <View
+      className={cn(
+        "min-h-14 flex-row items-center gap-3 px-4 py-3",
+        description && "min-h-18",
+        disabled && "opacity-45",
+      )}
+    >
+      {icon ? (
+        <View className="size-6 items-center justify-center">
+          <SymbolView
+            name={icon}
+            size={Platform.OS === "android" ? 24 : 22}
+            tintColorClassName="accent-icon"
+            type="monochrome"
+            weight="regular"
+          />
+        </View>
+      ) : null}
+      <View className="min-w-0 flex-1 gap-1">
+        <AppText className="text-base text-foreground">{label}</AppText>
+        {description ? (
+          <AppText className="text-sm text-foreground-muted">{description}</AppText>
+        ) : null}
+        {detail && stackDetail ? (
+          <AppText className="text-sm text-foreground-muted">{detail}</AppText>
+        ) : null}
+      </View>
+      {detail && !stackDetail ? (
+        <AppText
+          className="max-w-[40%] shrink text-right text-sm text-foreground-muted"
+          numberOfLines={1}
+          ellipsizeMode="middle"
+        >
+          {detail}
+        </AppText>
+      ) : null}
+      {accessory}
+    </View>
+  );
+}
diff --git a/apps/mobile/src/components/ListSection.tsx b/apps/mobile/src/components/ListSection.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..99e07d05e9bb7365883c7352c7f1263b20b4690e
--- /dev/null
+++ b/apps/mobile/src/components/ListSection.tsx
@@ -0,0 +1,46 @@
+import type { ReactNode } from "react";
+import { Platform, View } from "react-native";
+
+import { AppText as Text } from "./AppText";
+
+export function ListSection(props: {
+  readonly title?: string;
+  readonly titleIcon?: ReactNode;
+  readonly trailing?: ReactNode;
+  readonly children: ReactNode;
+  readonly footer?: string;
+}) {
+  return (
+    <View className="gap-2">
+      {props.title ? (
+        <View className="flex-row items-center justify-between gap-3">
+          <View
+            className={
+              Platform.OS === "android"
+                ? "min-w-0 flex-1 flex-row items-center gap-2 px-4"
+                : "min-w-0 flex-1 flex-row items-center gap-2 px-2"
+            }
+          >
+            {props.titleIcon}
+            <Text className="shrink text-sm font-t3-medium text-foreground-muted">
+              {props.title}
+            </Text>
+          </View>
+          {props.trailing}
+        </View>
+      ) : null}
+      <View
+        className={
+          Platform.OS === "android"
+            ? "overflow-hidden rounded-[28px] bg-grouped-card"
+            : "overflow-hidden rounded-[24px] border-continuous bg-grouped-card"
+        }
+      >
+        {props.children}
+      </View>
+      {props.footer ? (
+        <Text className="px-4 text-sm text-foreground-muted">{props.footer}</Text>
+      ) : null}
+    </View>
+  );
+}
diff --git a/apps/mobile/src/features/settings/components/SettingsRow.tsx b/apps/mobile/src/features/settings/components/SettingsRow.tsx
index 53bf1b55b452c49c1280bd1aba144ccaaf11e185..457107ec113b02683a232329afc076527bcc3c17 100644
--- a/apps/mobile/src/features/settings/components/SettingsRow.tsx
+++ b/apps/mobile/src/features/settings/components/SettingsRow.tsx
@@ -1,18 +1,13 @@
-import { MaterialListRow } from "../../../components/MaterialListRow";
 import { useNavigation } from "@react-navigation/native";
 import type { ComponentProps } from "react";
-import { Platform, Pressable, View } from "react-native";
+import { Platform } from "react-native";
 
-import { SymbolView } from "../../../components/AppSymbol";
-import { AppText as Text } from "../../../components/AppText";
+import { ListRow } from "../../../components/ListRow";
 import type { SettingsLegalDocumentTarget, SettingsSheetTarget } from "./settings-sheet-targets";
-import { cn } from "../../../lib/cn";
-
-type SymbolName = ComponentProps<typeof SymbolView>["name"];
 
 export function SettingsRow(props: {
   readonly disabled?: boolean;
-  readonly icon: SymbolName;
+  readonly icon: ComponentProps<typeof ListRow>["icon"];
   readonly label: string;
   readonly value?: string;
   readonly valuePosition?: "below" | "trailing";
@@ -21,119 +16,28 @@ export function SettingsRow(props: {
   readonly onPress?: () => void;
 }) {
   const navigation = useNavigation();
-  if (Platform.OS === "android") {
-    return (
-      <MaterialListRow
-        className="bg-grouped-card"
-        title={props.label}
-        subtitle={props.valuePosition === "trailing" ? undefined : props.value}
-        accessibilityLabel={[props.label, props.value].filter(Boolean).join(", ")}
-        trailing={
-          props.valuePosition === "trailing" && props.value ? (
-            <View className="flex-row items-center gap-3">
-              <Text className="text-sm text-foreground-muted">{props.value}</Text>
-              <SymbolView name="chevron.right" size={16} tintColorClassName="accent-chevron" />
-            </View>
-          ) : undefined
-        }
-        disabled={props.disabled}
-        leading={
-          <SymbolView
-            name={props.icon}
-            size={24}
-            tintColorClassName="accent-icon"
-            type="monochrome"
-            weight="regular"
-          />
-        }
-        onPress={() => {
-          if (props.target)
-            navigation.navigate("SettingsSheet", {
-              screen: "SettingsContent",
-              params: { screen: props.target },
-            });
-          else if (props.fullScreenTarget) navigation.navigate(props.fullScreenTarget);
-          else props.onPress?.();
-        }}
-      />
-    );
-  }
-  const content = (
-    <View className={cn("flex-row items-center gap-4 p-4", props.disabled && "opacity-[0.45]")}>
-      <SymbolView
-        name={props.icon}
-        size={22}
-        tintColorClassName="accent-icon"
-        type="monochrome"
-        weight="regular"
-      />
-      <>
-        <Text className="shrink-0 text-lg text-foreground" numberOfLines={1}>
-          {props.label}
-        </Text>
-        <View className="min-w-0 flex-1 items-end">
-          {props.value ? (
-            <Text
-              className="max-w-[180px] text-right text-base text-foreground-muted"
-              ellipsizeMode="middle"
-              numberOfLines={1}
-            >
-              {props.value}
-            </Text>
-          ) : null}
-        </View>
-      </>
-      <SymbolView
-        name="chevron.right"
-        size={16}
-        tintColorClassName="accent-chevron"
-        type="monochrome"
-        weight="semibold"
-      />
-    </View>
-  );
-
-  const target = props.target;
-  if (target) {
-    return (
-      <Pressable
-        accessibilityLabel={props.label}
-        accessibilityRole="button"
-        disabled={props.disabled}
-        onPress={() =>
-          navigation.navigate("SettingsSheet", {
-            screen: "SettingsContent",
-            params: { screen: target },
-          })
-        }
-      >
-        {content}
-      </Pressable>
-    );
-  }
-
-  const fullScreenTarget = props.fullScreenTarget;
-  if (fullScreenTarget) {
-    return (
-      <Pressable
-        accessibilityLabel={props.label}
-        accessibilityRole="button"
-        disabled={props.disabled}
-        onPress={() => navigation.navigate(fullScreenTarget)}
-      >
-        {content}
-      </Pressable>
-    );
-  }
-
+  const valueBelow =
+    props.valuePosition === "below" ||
+    (props.valuePosition === undefined && Platform.OS === "android");
   return (
-    <Pressable
-      accessibilityLabel={props.label}
-      accessibilityRole="button"
+    <ListRow
+      icon={props.icon}
+      label={props.label}
+      description={valueBelow ? props.value : undefined}
+      detail={valueBelow ? undefined : props.value}
       disabled={props.disabled}
-      onPress={props.onPress}
-    >
-      {content}
-    </Pressable>
+      onPress={() => {
+        if (props.target) {
+          navigation.navigate("SettingsSheet", {
+            screen: "SettingsContent",
+            params: { screen: props.target },
+          });
+        } else if (props.fullScreenTarget) {
+          navigation.navigate(props.fullScreenTarget);
+        } else {
+          props.onPress?.();
+        }
+      }}
+    />
   );
 }
diff --git a/apps/mobile/src/features/settings/components/SettingsSection.tsx b/apps/mobile/src/features/settings/components/SettingsSection.tsx
index 68cf53f07788cb630e8c61703e4d649a85e87026..91d1f0138d43545da40368f6b03c731869591190 100644
--- a/apps/mobile/src/features/settings/components/SettingsSection.tsx
+++ b/apps/mobile/src/features/settings/components/SettingsSection.tsx
@@ -1,48 +1 @@
-import type { ReactNode } from "react";
-import { Platform, View } from "react-native";
-
-import { AppText as Text } from "../../../components/AppText";
-
-export function SettingsSection(props: {
-  readonly title?: string;
-  readonly titleIcon?: ReactNode;
-  readonly trailing?: ReactNode;
-  readonly children: ReactNode;
-}) {
-  return (
-    <View className="gap-2">
-      {props.title ? (
-        <View className="flex-row items-center justify-between gap-3">
-          <View
-            className={
-              Platform.OS === "android"
-                ? "min-w-0 flex-1 flex-row items-center gap-2 px-4"
-                : "min-w-0 flex-1 flex-row items-center gap-2 px-2"
-            }
-          >
-            {props.titleIcon}
-            <Text
-              className={
-                Platform.OS === "android"
-                  ? "shrink text-sm font-t3-medium text-primary-text"
-                  : "shrink text-sm font-t3-medium text-foreground-muted"
-              }
-            >
-              {props.title}
-            </Text>
-          </View>
-          {props.trailing}
-        </View>
-      ) : null}
-      <View
-        className={
-          Platform.OS === "android"
-            ? "overflow-hidden rounded-[28px] bg-grouped-card"
-            : "overflow-hidden rounded-[24px] border-continuous bg-grouped-card"
-        }
-      >
-        {props.children}
-      </View>
-    </View>
-  );
-}
+export { ListSection as SettingsSection } from "../../../components/ListSection";