diff --git a/packages/shell/src/renderer/settings/sync-section.css b/packages/shell/src/renderer/settings/sync-section.css
index cb61172..a82f074 100644
--- a/packages/shell/src/renderer/settings/sync-section.css
+++ b/packages/shell/src/renderer/settings/sync-section.css
@@ -80,14 +80,18 @@
 	align-self: flex-start;
 }
 
+/* Fixed-width host for the shared `<TextField>` face; the box (border / padding
+ * / surface / height) comes from `.bs-input`, so this only sets the width and
+ * keeps the digits right-aligned. */
 .sync-section__number {
 	width: 5rem;
-	padding: var(--space-1) var(--space-2);
-	border: 1px solid var(--color-border-subtle);
-	border-radius: var(--radius-sm);
-	background: var(--color-surface-default);
-	color: var(--color-text-primary);
-	font-size: var(--text-size-sm);
+}
+
+.sync-section__number .text-field {
+	width: 100%;
+}
+
+.sync-section__number .text-field__input {
 	text-align: right;
 }
 
diff --git a/packages/shell/src/renderer/settings/sync-section.tsx b/packages/shell/src/renderer/settings/sync-section.tsx
index 872a72e..4f332b0 100644
--- a/packages/shell/src/renderer/settings/sync-section.tsx
+++ b/packages/shell/src/renderer/settings/sync-section.tsx
@@ -16,6 +16,7 @@ import { useSyncStatus } from "../dashboard/use-sync-status";
 import { SyncState } from "../dashboard/use-sync-status";
 import { t } from "../i18n/t";
 import { Button, ButtonSize, ButtonVariant } from "../ui/button";
+import { TextField, TextFieldSize } from "../ui/text-field";
 import "./sync-section.css";
 
 export function SyncSection() {
@@ -201,18 +202,18 @@ function SelectiveSyncPolicyControl() {
 			{policy.mode === SelectiveSyncMode.PinnedPlusRecent && (
 				<div className="sync-section__row">
 					<span className="sync-section__label">{t("shell.settings.sync.policy.recentDays.label")}</span>
-					<input
-						type="number"
-						min={1}
-						max={3650}
-						className="sync-section__number"
-						value={policy.recentDays}
-						aria-label={t("shell.settings.sync.policy.recentDays.label")}
-						data-testid="selective-sync-recent-days"
-						onChange={(e) =>
-							apply({ ...policy, recentDays: Number(e.currentTarget.value) || policy.recentDays })
-						}
-					/>
+					<div className="sync-section__number">
+						<TextField
+							type="number"
+							size={TextFieldSize.Sm}
+							min={1}
+							max={3650}
+							value={String(policy.recentDays)}
+							aria-label={t("shell.settings.sync.policy.recentDays.label")}
+							data-testid="selective-sync-recent-days"
+							onChange={(next) => apply({ ...policy, recentDays: Number(next) || policy.recentDays })}
+						/>
+					</div>
 				</div>
 			)}
 		</div>
diff --git a/tools/control-faces-baseline.json b/tools/control-faces-baseline.json
index 7d6d8d4..566b147 100644
--- a/tools/control-faces-baseline.json
+++ b/tools/control-faces-baseline.json
@@ -8,7 +8,6 @@
     "packages/shell/src/renderer/settings/data-section.tsx",
     "packages/shell/src/renderer/settings/mcp-panel.tsx",
     "packages/shell/src/renderer/settings/notifications-section.tsx",
-    "packages/shell/src/renderer/settings/sync-section.tsx",
     "packages/shell/src/renderer/welcome/welcome.tsx"
   ]
 }