diff --git a/frontend/src/components/settings/SettingsPage.tsx b/frontend/src/components/settings/SettingsPage.tsx
index 6cd8a46..917ef01 100644
--- a/frontend/src/components/settings/SettingsPage.tsx
+++ b/frontend/src/components/settings/SettingsPage.tsx
@@ -20,7 +20,7 @@ export default function SettingsPage() {
   const { settings, updateSettings, changePin, isUpdating, isChangingPin } = useSettings();
   const [selectedColor, setSelectedColor] = useState(settings?.accent_color || 'cyan');
   const [upcomingDays, setUpcomingDays] = useState(settings?.upcoming_days || 7);
-  const [preferredName, setPreferredName] = useState(settings?.preferred_name || '');
+  const [preferredName, setPreferredName] = useState(settings?.preferred_name ?? '');
   const [pinForm, setPinForm] = useState({
     oldPin: '',
     newPin: '',
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index f130874..4a6c6d8 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -2,7 +2,7 @@ export interface Settings {
   id: number;
   accent_color: string;
   upcoming_days: number;
-  preferred_name?: string;
+  preferred_name?: string | null;
   created_at: string;
   updated_at: string;
 }