From 457eb550e42576d575fd2ff1d9635cd0980ee240 Mon Sep 17 00:00:00 2001
From: Evan Reichard <evan@reichard.io>
Date: Fri, 3 Jul 2026 19:46:28 -0400
Subject: [PATCH] cleanup 6

---
 frontend/src/auth/AuthContext.tsx             |  40 +--
 frontend/src/components/HamburgerMenu.tsx     | 132 ++++----
 frontend/src/hooks/useAuthForm.ts             |   3 +-
 frontend/src/pages/ActivityPage.tsx           |   3 +-
 frontend/src/pages/AdminImportPage.tsx        |   3 +-
 frontend/src/pages/AdminImportResultsPage.tsx |   3 +-
 frontend/src/pages/AdminLogsPage.tsx          |   3 +-
 frontend/src/pages/AdminUsersPage.tsx         | 195 +++++++-----
 frontend/src/pages/DocumentPage.tsx           |   7 +-
 frontend/src/pages/DocumentsPage.tsx          |  84 +++--
 frontend/src/pages/HomePage.tsx               |   3 +-
 frontend/src/pages/ProgressPage.tsx           |   3 +-
 frontend/src/pages/ReaderPage.tsx             |   7 +-
 frontend/src/pages/SearchPage.tsx             |   3 +-
 frontend/src/pages/SettingsPage.tsx           | 301 ++++++++++--------
 frontend/src/utils/apiResponses.ts            |  21 ++
 16 files changed, 446 insertions(+), 365 deletions(-)
 create mode 100644 frontend/src/utils/apiResponses.ts

diff --git a/frontend/src/auth/AuthContext.tsx b/frontend/src/auth/AuthContext.tsx
index 34d4bce..065b4b2 100644
--- a/frontend/src/auth/AuthContext.tsx
+++ b/frontend/src/auth/AuthContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
+import { createContext, useContext, ReactNode, useCallback, useMemo } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import {
@@ -10,7 +10,6 @@ import {
 } from '../generated/anthoLumeAPIV1';
 import {
   type AuthState,
-  getAuthenticatedAuthState,
   getUnauthenticatedAuthState,
   resolveAuthStateFromMe,
   authUserFromMutation,
@@ -25,15 +24,9 @@ interface AuthContextType extends AuthState {
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
 
-const initialAuthState: AuthState = {
-  isAuthenticated: false,
-  user: null,
-  isCheckingAuth: true,
-};
+const unauthenticatedState = getUnauthenticatedAuthState();
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const [authState, setAuthState] = useState<AuthState>(initialAuthState);
-
   const loginMutation = useLogin();
   const registerMutation = useRegister();
   const logoutMutation = useLogout();
@@ -43,16 +36,16 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
 
-  useEffect(() => {
-    setAuthState(prev =>
+  const authState = useMemo(
+    () =>
       resolveAuthStateFromMe({
         meData,
         meError,
         meLoading,
-        previousState: prev,
-      })
-    );
-  }, [meData, meError, meLoading]);
+        previousState: unauthenticatedState,
+      }),
+    [meData, meError, meLoading]
+  );
 
   const login = useCallback(
     async (username: string, password: string) => {
@@ -66,16 +59,14 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
         const user = authUserFromMutation(response);
         if (!user) {
-          setAuthState(getUnauthenticatedAuthState());
           throw new Error(getResponseError(response) ?? 'Login failed');
         }
 
-        setAuthState(getAuthenticatedAuthState(user));
-
+        queryClient.setQueryData(getGetMeQueryKey(), response);
         await queryClient.invalidateQueries({ queryKey: getGetMeQueryKey() });
         navigate('/');
       } catch (error) {
-        setAuthState(getUnauthenticatedAuthState());
+        queryClient.setQueryData(getGetMeQueryKey(), undefined);
         throw error instanceof Error ? error : new Error('Login failed');
       }
     },
@@ -94,16 +85,14 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
         const user = authUserFromMutation(response);
         if (!user) {
-          setAuthState(getUnauthenticatedAuthState());
           throw new Error(getResponseError(response) ?? 'Registration failed');
         }
 
-        setAuthState(getAuthenticatedAuthState(user));
-
+        queryClient.setQueryData(getGetMeQueryKey(), response);
         await queryClient.invalidateQueries({ queryKey: getGetMeQueryKey() });
         navigate('/');
       } catch (error) {
-        setAuthState(getUnauthenticatedAuthState());
+        queryClient.setQueryData(getGetMeQueryKey(), undefined);
         throw error instanceof Error ? error : new Error('Registration failed');
       }
     },
@@ -112,9 +101,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   const logout = useCallback(() => {
     logoutMutation.mutate(undefined, {
-      onSuccess: async () => {
-        setAuthState(getUnauthenticatedAuthState());
-        queryClient.removeQueries({ queryKey: getGetMeQueryKey() });
+      onSettled: () => {
+        queryClient.clear();
         navigate('/login');
       },
     });
diff --git a/frontend/src/components/HamburgerMenu.tsx b/frontend/src/components/HamburgerMenu.tsx
index 6c2a12f..6a3c2cd 100644
--- a/frontend/src/components/HamburgerMenu.tsx
+++ b/frontend/src/components/HamburgerMenu.tsx
@@ -4,11 +4,38 @@ import { SettingsIcon, GitIcon } from '../icons';
 import { useAuth } from '../auth/AuthContext';
 import { useGetInfo } from '../generated/anthoLumeAPIV1';
 import { navItems, adminNavItems } from './navigation';
+import { dataForStatus } from '../utils/apiResponses';
+import { cn } from '../utils/cn';
 
 function hasPrefix(path: string, prefix: string): boolean {
   return path.startsWith(prefix);
 }
 
+function NavToggleIcon({ isOpen }: { isOpen: boolean }) {
+  return (
+    <span className="relative block size-7" aria-hidden="true">
+      <span
+        className={cn(
+          'absolute left-0 top-1 h-0.5 w-7 bg-content transition-transform duration-200',
+          isOpen && 'translate-y-2 rotate-45'
+        )}
+      />
+      <span
+        className={cn(
+          'absolute left-0 top-3 h-0.5 w-7 bg-content transition-opacity duration-200',
+          isOpen && 'opacity-0'
+        )}
+      />
+      <span
+        className={cn(
+          'absolute left-0 top-5 h-0.5 w-7 bg-content transition-transform duration-200',
+          isOpen && '-translate-y-2 -rotate-45'
+        )}
+      />
+    </span>
+  );
+}
+
 export default function HamburgerMenu() {
   const location = useLocation();
   const { user } = useAuth();
@@ -20,82 +47,47 @@ export default function HamburgerMenu() {
       staleTime: Infinity,
     },
   });
-  const version =
-    infoData && 'data' in infoData && infoData.data && 'version' in infoData.data
-      ? infoData.data.version
-      : 'v1.0.0';
+  const version = dataForStatus(infoData, 200)?.version ?? 'v1.0.0';
+  const closeMenu = () => setIsOpen(false);
 
   return (
     <div className="relative z-40 ml-6 flex flex-col">
-      <input
-        type="checkbox"
-        className="absolute -top-2 z-50 flex size-7 cursor-pointer opacity-0 lg:hidden"
-        id="mobile-nav-checkbox"
-        checked={isOpen}
-        onChange={e => setIsOpen(e.target.checked)}
-      />
-
-      <span
-        className="z-40 mt-0.5 h-0.5 w-7 bg-content transition-opacity duration-500 lg:hidden"
-        style={{
-          transformOrigin: '5px 0px',
-          transition:
-            'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
-          transform: isOpen ? 'rotate(45deg) translate(2px, -2px)' : 'none',
-        }}
-      />
-      <span
-        className="z-40 mt-1 h-0.5 w-7 bg-content transition-opacity duration-500 lg:hidden"
-        style={{
-          transformOrigin: '0% 100%',
-          transition:
-            'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
-          opacity: isOpen ? 0 : 1,
-          transform: isOpen ? 'rotate(0deg) scale(0.2, 0.2)' : 'none',
-        }}
-      />
-      <span
-        className="z-40 mt-1 h-0.5 w-7 bg-content transition-opacity duration-500 lg:hidden"
-        style={{
-          transformOrigin: '0% 0%',
-          transition:
-            'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
-          transform: isOpen ? 'rotate(-45deg) translate(0, 6px)' : 'none',
-        }}
-      />
+      <button
+        type="button"
+        className="relative z-50 flex size-8 items-center justify-center lg:hidden"
+        aria-label="Toggle navigation"
+        aria-expanded={isOpen}
+        aria-controls="mobile-navigation"
+        onClick={() => setIsOpen(open => !open)}
+      >
+        <NavToggleIcon isOpen={isOpen} />
+      </button>
 
       <div
-        id="menu"
-        className="fixed -ml-6 h-full w-56 bg-surface shadow-lg lg:w-48"
-        style={{
-          top: 0,
-          paddingTop: 'env(safe-area-inset-top)',
-          transformOrigin: '0% 0%',
-          transform: isOpen ? 'none' : 'translate(-100%, 0)',
-          transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1)',
-        }}
+        id="mobile-navigation"
+        className={cn(
+          'fixed -ml-6 h-full w-56 bg-surface shadow-lg transition-transform duration-200 lg:w-48 lg:translate-x-0',
+          isOpen ? 'translate-x-0' : '-translate-x-full'
+        )}
+        style={{ top: 0, paddingTop: 'env(safe-area-inset-top)' }}
       >
-        <style>{`
-          @media (min-width: 1024px) {
-            #menu {
-              transform: none !important;
-            }
-          }
-        `}</style>
         <div className="flex h-16 justify-end lg:justify-around">
-          <p className="my-auto pr-8 text-right text-xl font-bold text-content lg:pr-0">AnthoLume</p>
+          <p className="my-auto pr-8 text-right text-xl font-bold text-content lg:pr-0">
+            AnthoLume
+          </p>
         </div>
         <nav>
           {navItems.map(item => (
             <Link
               key={item.path}
               to={item.path}
-              onClick={() => setIsOpen(false)}
-              className={`my-2 flex w-full items-center justify-start border-l-4 p-2 pl-6 transition-colors duration-200 ${
+              onClick={closeMenu}
+              className={cn(
+                'my-2 flex w-full items-center justify-start border-l-4 p-2 pl-6 transition-colors duration-200',
                 location.pathname === item.path
                   ? 'border-primary-500 text-content'
                   : 'border-transparent text-content-subtle hover:text-content'
-              }`}
+              )}
             >
               <item.icon size={20} />
               <span className="mx-4 text-sm font-normal">{item.label}</span>
@@ -104,20 +96,22 @@ export default function HamburgerMenu() {
 
           {isAdmin && (
             <div
-              className={`my-2 flex flex-col gap-4 border-l-4 p-2 pl-6 transition-colors duration-200 ${
+              className={cn(
+                'my-2 flex flex-col gap-4 border-l-4 p-2 pl-6 transition-colors duration-200',
                 hasPrefix(location.pathname, '/admin')
                   ? 'border-primary-500 text-content'
                   : 'border-transparent text-content-subtle'
-              }`}
+              )}
             >
               <Link
                 to="/admin"
-                onClick={() => setIsOpen(false)}
-                className={`flex w-full justify-start ${
+                onClick={closeMenu}
+                className={cn(
+                  'flex w-full justify-start',
                   location.pathname === '/admin' && !hasPrefix(location.pathname, '/admin/')
                     ? 'text-content'
                     : 'text-content-subtle hover:text-content'
-                }`}
+                )}
               >
                 <SettingsIcon size={20} />
                 <span className="mx-4 text-sm font-normal">Admin</span>
@@ -129,13 +123,13 @@ export default function HamburgerMenu() {
                     <Link
                       key={item.path}
                       to={item.path}
-                      onClick={() => setIsOpen(false)}
-                      className={`flex w-full justify-start ${
+                      onClick={closeMenu}
+                      className={cn(
+                        'flex w-full justify-start pl-7',
                         location.pathname === item.path
                           ? 'text-content'
                           : 'text-content-subtle hover:text-content'
-                      }`}
-                      style={{ paddingLeft: '1.75em' }}
+                      )}
                     >
                       <span className="mx-4 text-sm font-normal">{item.label}</span>
                     </Link>
diff --git a/frontend/src/hooks/useAuthForm.ts b/frontend/src/hooks/useAuthForm.ts
index af8eeb5..84e7a0c 100644
--- a/frontend/src/hooks/useAuthForm.ts
+++ b/frontend/src/hooks/useAuthForm.ts
@@ -3,6 +3,7 @@ import { useGetInfo } from '../generated/anthoLumeAPIV1';
 import { useAuth } from '../auth/AuthContext';
 import { useToasts } from '../components/ToastContext';
 import { getErrorMessage } from '../utils/errors';
+import { dataForStatus } from '../utils/apiResponses';
 
 export interface UseAuthFormResult {
   username: string;
@@ -28,7 +29,7 @@ export function useAuthForm(mode: 'login' | 'register'): UseAuthFormResult {
   const { data: infoData, isLoading: isLoadingInfo } = useGetInfo({
     query: { staleTime: Infinity },
   });
-  const registrationEnabled = infoData?.status === 200 ? infoData.data.registration_enabled : false;
+  const registrationEnabled = dataForStatus(infoData, 200)?.registration_enabled ?? false;
 
   const submit = useCallback(
     async (e: SyntheticEvent<HTMLFormElement>) => {
diff --git a/frontend/src/pages/ActivityPage.tsx b/frontend/src/pages/ActivityPage.tsx
index 08dfc49..9040efd 100644
--- a/frontend/src/pages/ActivityPage.tsx
+++ b/frontend/src/pages/ActivityPage.tsx
@@ -5,6 +5,7 @@ import type { Activity } from '../generated/model';
 import { Pagination } from '../components';
 import { Table, type Column } from '../components/Table';
 import { formatDuration } from '../utils/formatters';
+import { dataForStatus } from '../utils/apiResponses';
 
 const ACTIVITY_PAGE_SIZE = 25;
 
@@ -24,7 +25,7 @@ export default function ActivityPage() {
     page,
     limit,
   });
-  const response = data?.status === 200 ? data.data : undefined;
+  const response = dataForStatus(data, 200);
   const activities = response?.activities ?? [];
 
   const columns: Column<Activity>[] = [
diff --git a/frontend/src/pages/AdminImportPage.tsx b/frontend/src/pages/AdminImportPage.tsx
index 1bc9963..75dbf4d 100644
--- a/frontend/src/pages/AdminImportPage.tsx
+++ b/frontend/src/pages/AdminImportPage.tsx
@@ -6,6 +6,7 @@ import type { DirectoryItem } from '../generated/model';
 import { Button } from '../components/Button';
 import { FolderOpenIcon } from '../icons';
 import { useMutationWithToast } from '../hooks/useMutationWithToast';
+import { dataForStatus } from '../utils/apiResponses';
 
 export default function AdminImportPage() {
   const [currentPath, setCurrentPath] = useState<string>('');
@@ -20,7 +21,7 @@ export default function AdminImportPage() {
 
   const postImport = usePostImport();
 
-  const directoryResponse = directoryData?.status === 200 ? directoryData.data : null;
+  const directoryResponse = dataForStatus(directoryData, 200);
   const directories = directoryResponse?.items ?? [];
   const currentPathDisplay = directoryResponse?.current_path ?? currentPath ?? '/data';
 
diff --git a/frontend/src/pages/AdminImportResultsPage.tsx b/frontend/src/pages/AdminImportResultsPage.tsx
index cb41e78..5734f2e 100644
--- a/frontend/src/pages/AdminImportResultsPage.tsx
+++ b/frontend/src/pages/AdminImportResultsPage.tsx
@@ -2,10 +2,11 @@ import { useGetImportResults } from '../generated/anthoLumeAPIV1';
 import { Table, type Column } from '../components';
 import type { ImportResult } from '../generated/model';
 import { Link } from 'react-router-dom';
+import { dataForStatus } from '../utils/apiResponses';
 
 export default function AdminImportResultsPage() {
   const { data: resultsData, isLoading } = useGetImportResults();
-  const results = resultsData?.status === 200 ? (resultsData.data.results ?? []) : [];
+  const results = dataForStatus(resultsData, 200)?.results ?? [];
 
   const columns: Column<ImportResult>[] = [
     {
diff --git a/frontend/src/pages/AdminLogsPage.tsx b/frontend/src/pages/AdminLogsPage.tsx
index d6b887c..84868a2 100644
--- a/frontend/src/pages/AdminLogsPage.tsx
+++ b/frontend/src/pages/AdminLogsPage.tsx
@@ -3,13 +3,14 @@ import { useGetLogs } from '../generated/anthoLumeAPIV1';
 import { Button, LoadingState, TextInput, IconInput } from '../components';
 import { useDebouncedState } from '../hooks/useDebouncedState';
 import { Search2Icon } from '../icons';
+import { dataForStatus } from '../utils/apiResponses';
 
 export default function AdminLogsPage() {
   const [filter, setFilter, activeFilter, flushFilter] = useDebouncedState('', 300);
 
   const { data: logsData, isLoading } = useGetLogs(activeFilter ? { filter: activeFilter } : {});
 
-  const logs = logsData?.status === 200 ? (logsData.data.logs ?? []) : [];
+  const logs = dataForStatus(logsData, 200)?.logs ?? [];
 
   const handleFilterSubmit = (e: SyntheticEvent) => {
     e.preventDefault();
diff --git a/frontend/src/pages/AdminUsersPage.tsx b/frontend/src/pages/AdminUsersPage.tsx
index 21d11e5..65aa74c 100644
--- a/frontend/src/pages/AdminUsersPage.tsx
+++ b/frontend/src/pages/AdminUsersPage.tsx
@@ -7,6 +7,105 @@ import type { User } from '../generated/model';
 import { AddIcon, DeleteIcon } from '../icons';
 import { useMutationWithToast } from '../hooks/useMutationWithToast';
 import { useToasts } from '../components/ToastContext';
+import { dataForStatus } from '../utils/apiResponses';
+
+interface AddUserFormProps {
+  onCreate: (_username: string, _password: string, _isAdmin: boolean) => void;
+}
+
+function AddUserForm({ onCreate }: AddUserFormProps) {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [isAdmin, setIsAdmin] = useState(false);
+
+  const handleSubmit = (e: SyntheticEvent) => {
+    e.preventDefault();
+    onCreate(username, password, isAdmin);
+  };
+
+  return (
+    <div className="absolute left-10 top-10 rounded bg-surface-strong p-3 shadow-lg transition-all duration-200">
+      <form onSubmit={handleSubmit} className="flex flex-col gap-2 text-sm text-content">
+        <TextInput
+          type="text"
+          value={username}
+          onChange={e => setUsername(e.target.value)}
+          placeholder="Username"
+          className="p-2"
+        />
+        <TextInput
+          type="password"
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+          placeholder="Password"
+          className="p-2"
+        />
+        <div className="flex items-center gap-2">
+          <input
+            type="checkbox"
+            id="new_is_admin"
+            checked={isAdmin}
+            onChange={e => setIsAdmin(e.target.checked)}
+          />
+          <label htmlFor="new_is_admin">Admin</label>
+        </div>
+        <Button type="submit">Create</Button>
+      </form>
+    </div>
+  );
+}
+
+interface ResetPasswordDialogProps {
+  userId: string;
+  onClose: () => void;
+  onSave: (_userId: string, _password: string) => void;
+}
+
+function ResetPasswordDialog({ userId, onClose, onSave }: ResetPasswordDialogProps) {
+  const [password, setPassword] = useState('');
+
+  return (
+    <div
+      className="fixed inset-0 z-40 flex items-center justify-center bg-black/50"
+      onClick={onClose}
+    >
+      <form
+        className="w-80 rounded bg-surface p-4 shadow-lg"
+        onClick={e => e.stopPropagation()}
+        onSubmit={e => {
+          e.preventDefault();
+          if (!password) return;
+          onSave(userId, password);
+          onClose();
+        }}
+      >
+        <p className="mb-3 text-content">Reset password for {userId}</p>
+        <TextInput
+          type="password"
+          value={password}
+          onChange={e => setPassword(e.target.value)}
+          placeholder="New password"
+          autoFocus
+        />
+        <div className="mt-3 flex justify-end gap-2">
+          <Button type="button" variant="secondary" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button type="submit" disabled={!password}>
+            Save
+          </Button>
+        </div>
+      </form>
+    </div>
+  );
+}
+
+const permissionButtonClass = (active: boolean) =>
+  `rounded-md px-2 py-1 ${
+    active
+      ? 'cursor-default bg-content text-content-inverse'
+      : 'cursor-pointer bg-surface-strong text-content'
+  }`;
 
 export default function AdminUsersPage() {
   const { data: usersData, isLoading, refetch } = useGetUsers({});
@@ -15,17 +114,12 @@ export default function AdminUsersPage() {
   const { showError } = useToasts();
 
   const [showAddForm, setShowAddForm] = useState(false);
-  const [newUsername, setNewUsername] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [newIsAdmin, setNewIsAdmin] = useState(false);
   const [resetUserId, setResetUserId] = useState<string | null>(null);
-  const [resetPassword, setResetPassword] = useState('');
 
-  const users = usersData?.status === 200 ? (usersData.data.users ?? []) : [];
+  const users = dataForStatus(usersData, 200)?.users ?? [];
 
-  const handleCreateUser = (e: SyntheticEvent) => {
-    e.preventDefault();
-    if (!newUsername || !newPassword) {
+  const handleCreateUser = (username: string, password: string, isAdmin: boolean) => {
+    if (!username || !password) {
       showError('Please enter username and password');
       return;
     }
@@ -34,9 +128,9 @@ export default function AdminUsersPage() {
       {
         data: {
           operation: 'CREATE',
-          user: newUsername,
-          password: newPassword,
-          is_admin: newIsAdmin,
+          user: username,
+          password,
+          is_admin: isAdmin,
         },
       },
       toastMutationOptions({
@@ -44,9 +138,6 @@ export default function AdminUsersPage() {
         error: 'Failed to create user',
         onSuccess: () => {
           setShowAddForm(false);
-          setNewUsername('');
-          setNewPassword('');
-          setNewIsAdmin(false);
           refetch();
         },
       })
@@ -94,13 +185,6 @@ export default function AdminUsersPage() {
     );
   };
 
-  const permissionButtonClass = (active: boolean) =>
-    `rounded-md px-2 py-1 ${
-      active
-        ? 'cursor-default bg-content text-content-inverse'
-        : 'cursor-pointer bg-surface-strong text-content'
-    }`;
-
   const userColumns: Column<User>[] = [
     {
       id: 'actions',
@@ -124,7 +208,6 @@ export default function AdminUsersPage() {
         <Button
           onClick={() => {
             setResetUserId(user.id);
-            setResetPassword('');
           }}
           className="px-2 py-1"
         >
@@ -164,72 +247,16 @@ export default function AdminUsersPage() {
 
   return (
     <div className="relative h-full overflow-x-auto">
-      {showAddForm && (
-        <div className="absolute left-10 top-10 rounded bg-surface-strong p-3 shadow-lg transition-all duration-200">
-          <form onSubmit={handleCreateUser} className="flex flex-col gap-2 text-sm text-content">
-            <TextInput
-              type="text"
-              value={newUsername}
-              onChange={e => setNewUsername(e.target.value)}
-              placeholder="Username"
-              className="p-2"
-            />
-            <TextInput
-              type="password"
-              value={newPassword}
-              onChange={e => setNewPassword(e.target.value)}
-              placeholder="Password"
-              className="p-2"
-            />
-            <div className="flex items-center gap-2">
-              <input
-                type="checkbox"
-                id="new_is_admin"
-                checked={newIsAdmin}
-                onChange={e => setNewIsAdmin(e.target.checked)}
-              />
-              <label htmlFor="new_is_admin">Admin</label>
-            </div>
-            <Button type="submit">Create</Button>
-          </form>
-        </div>
-      )}
+      {showAddForm && <AddUserForm onCreate={handleCreateUser} />}
 
       <Table columns={userColumns} data={users} rowKey="id" />
 
       {resetUserId && (
-        <div
-          className="fixed inset-0 z-40 flex items-center justify-center bg-black/50"
-          onClick={() => setResetUserId(null)}
-        >
-          <form
-            className="w-80 rounded bg-surface p-4 shadow-lg"
-            onClick={e => e.stopPropagation()}
-            onSubmit={e => {
-              e.preventDefault();
-              if (!resetPassword) return;
-              handleUpdatePassword(resetUserId, resetPassword);
-              setResetUserId(null);
-            }}
-          >
-            <p className="mb-3 text-content">Reset password for {resetUserId}</p>
-            <TextInput
-              type="password"
-              value={resetPassword}
-              onChange={e => setResetPassword(e.target.value)}
-              placeholder="New password"
-              autoFocus
-            />
-            <div className="mt-3 flex justify-end gap-2">
-              <Button type="button" variant="secondary" onClick={() => setResetUserId(null)}>
-                Cancel
-              </Button>
-              <Button type="submit" disabled={!resetPassword}>
-                Save
-              </Button>
-            </div>
-          </form>
-        </div>
+        <ResetPasswordDialog
+          userId={resetUserId}
+          onClose={() => setResetUserId(null)}
+          onSave={handleUpdatePassword}
+        />
       )}
     </div>
   );
diff --git a/frontend/src/pages/DocumentPage.tsx b/frontend/src/pages/DocumentPage.tsx
index 55f927e..f1a83fc 100644
--- a/frontend/src/pages/DocumentPage.tsx
+++ b/frontend/src/pages/DocumentPage.tsx
@@ -8,6 +8,7 @@ import {
 } from '../generated/anthoLumeAPIV1';
 import type { EditDocumentBody } from '../generated/model';
 import { formatDuration } from '../utils/formatters';
+import { dataForStatus } from '../utils/apiResponses';
 import { useToastMutation } from '../hooks/useMutationWithToast';
 import { ActivityIcon, DownloadIcon, EditIcon, InfoIcon, CloseIcon, CheckIcon } from '../icons';
 import { Field, FieldLabel, FieldValue, FieldActions, LoadingState } from '../components';
@@ -121,12 +122,12 @@ export default function DocumentPage() {
     return <LoadingState />;
   }
 
-  if (!docData || docData.status !== 200) {
+  const document = dataForStatus(docData, 200)?.document;
+
+  if (!document) {
     return <div className="text-content-muted">Document not found</div>;
   }
 
-  const document = docData.data.document;
-
   const percentage = document.percentage ?? 0;
   const secondsPerPercent = document.seconds_per_percent || 0;
   const totalTimeLeftSeconds = Math.round((100 - percentage) * secondsPerPercent);
diff --git a/frontend/src/pages/DocumentsPage.tsx b/frontend/src/pages/DocumentsPage.tsx
index 39c70c0..6c49e2a 100644
--- a/frontend/src/pages/DocumentsPage.tsx
+++ b/frontend/src/pages/DocumentsPage.tsx
@@ -10,6 +10,7 @@ import { formatDuration } from '../utils/formatters';
 import { cn } from '../utils/cn';
 import { useDebouncedState } from '../hooks/useDebouncedState';
 import { useLocalSetting, type DocumentsViewMode } from '../utils/localSettings';
+import { dataForStatus } from '../utils/apiResponses';
 
 const DOCUMENTS_PAGE_SIZE = 9;
 
@@ -21,14 +22,16 @@ interface DocumentItemProps {
 function DocumentItem({ doc, layout }: DocumentItemProps) {
   const percentage = doc.percentage || 0;
   const totalTimeSeconds = doc.total_time_seconds || 0;
+  const documentPath = `/documents/${doc.id}`;
+  const title = doc.title || 'Unknown';
 
-  const icons = (
-    <div className="flex shrink-0 items-center justify-end gap-4 text-content-muted pointer-events-auto">
-      <Link to={`/activity?document=${doc.id}`}>
+  const actions = (
+    <div className="flex shrink-0 items-center justify-end gap-4 text-content-muted">
+      <Link to={`/activity?document=${doc.id}`} aria-label={`View activity for ${title}`}>
         <ActivityIcon size={20} />
       </Link>
       {doc.filepath ? (
-        <a href={`/api/v1/documents/${doc.id}/file`}>
+        <a href={`/api/v1/documents/${doc.id}/file`} aria-label={`Download ${title}`}>
           <DownloadIcon size={20} />
         </a>
       ) : (
@@ -38,63 +41,54 @@ function DocumentItem({ doc, layout }: DocumentItemProps) {
   );
 
   const fields = [
-    { label: 'Title', value: doc.title || 'Unknown' },
+    { label: 'Title', value: title, link: true },
     { label: 'Author', value: doc.author || 'Unknown' },
     { label: 'Progress', value: `${percentage}%` },
     { label: 'Time Read', value: formatDuration(totalTimeSeconds) },
   ];
 
+  const fieldList = (
+    <div
+      className={cn('grid flex-1 grid-cols-1 gap-3 text-sm', layout === 'list' && 'md:grid-cols-4')}
+    >
+      {fields.map(field => (
+        <div key={field.label}>
+          <p className="text-content-subtle">{field.label}</p>
+          {field.link ? (
+            <Link to={documentPath} className="font-medium hover:underline">
+              {field.value}
+            </Link>
+          ) : (
+            <p className="font-medium">{field.value}</p>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+
   if (layout === 'grid') {
     return (
-      <div className="relative flex size-full gap-4 rounded bg-surface p-4 shadow-lg transition-colors hover:bg-surface-muted">
-        {/* Stretched Link - Covers the whole card; display content is pointer-events-none so clicks fall through to navigate. */}
-        <Link
-          to={`/documents/${doc.id}`}
-          aria-label={`Open ${doc.title || 'document'}`}
-          className="absolute inset-0"
-        />
-        <div className="pointer-events-none my-auto h-48 min-w-fit">
+      <div className="flex size-full gap-4 rounded bg-surface p-4 text-content shadow-lg transition-colors hover:bg-surface-muted">
+        <Link to={documentPath} className="my-auto h-48 min-w-fit" aria-label={`Open ${title}`}>
           <img
             className="h-full rounded object-cover"
             src={`/api/v1/documents/${doc.id}/cover`}
-            alt={doc.title}
+            alt={title}
           />
-        </div>
-        <div className="pointer-events-none flex w-full flex-col justify-around text-sm text-content">
-          {fields.map(f => (
-            <div key={f.label} className="inline-flex shrink-0 items-center">
-              <div>
-                <p className="text-content-subtle">{f.label}</p>
-                <p className="font-medium">{f.value}</p>
-              </div>
-            </div>
-          ))}
-        </div>
-        <div className="absolute bottom-4 right-4 flex flex-col gap-2 text-content-muted">
-          {icons}
+        </Link>
+        <div className="flex w-full flex-col justify-between gap-4">
+          {fieldList}
+          {actions}
         </div>
       </div>
     );
   }
 
   return (
-    <div className="relative block rounded bg-surface p-4 text-content shadow-lg transition-colors hover:bg-surface-muted">
-      {/* Stretched Link - Covers the whole card; display content is pointer-events-none so clicks fall through to navigate. */}
-      <Link
-        to={`/documents/${doc.id}`}
-        aria-label={`Open ${doc.title || 'document'}`}
-        className="absolute inset-0"
-      />
-      <div className="pointer-events-none flex flex-col gap-4 sm:flex-row sm:items-center">
-        <div className="grid flex-1 grid-cols-1 gap-3 text-sm md:grid-cols-4">
-          {fields.map(f => (
-            <div key={f.label}>
-              <p className="text-content-subtle">{f.label}</p>
-              <p className="font-medium">{f.value}</p>
-            </div>
-          ))}
-        </div>
-        {icons}
+    <div className="rounded bg-surface p-4 text-content shadow-lg transition-colors hover:bg-surface-muted">
+      <div className="flex flex-col gap-4 sm:flex-row sm:items-center">
+        {fieldList}
+        {actions}
       </div>
     </div>
   );
@@ -126,7 +120,7 @@ export default function DocumentsPage() {
 
   const { data, isLoading, refetch } = useGetDocuments({ page, limit, search: debouncedSearch });
   const createMutation = useCreateDocument();
-  const documentsResponse = data?.status === 200 ? data.data : undefined;
+  const documentsResponse = dataForStatus(data, 200);
   const docs = documentsResponse?.documents;
   const previousPage = documentsResponse?.previous_page;
   const nextPage = documentsResponse?.next_page;
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 5fbb0c7..96386f5 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -5,6 +5,7 @@ import { useGetHome } from '../generated/anthoLumeAPIV1';
 import type { LeaderboardData, LeaderboardEntry, UserStreak } from '../generated/model';
 import ReadingHistoryGraph from '../components/ReadingHistoryGraph';
 import { formatNumber, formatDuration } from '../utils/formatters';
+import { dataForStatus } from '../utils/apiResponses';
 
 interface InfoCardProps {
   title: string;
@@ -166,7 +167,7 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
 export default function HomePage() {
   const { data: homeData, isLoading: homeLoading } = useGetHome();
 
-  const homeResponse = homeData?.status === 200 ? homeData.data : null;
+  const homeResponse = dataForStatus(homeData, 200);
   const dbInfo = homeResponse?.database_info;
   const streaks = homeResponse?.streaks?.streaks;
   const graphData = homeResponse?.graph_data?.graph_data;
diff --git a/frontend/src/pages/ProgressPage.tsx b/frontend/src/pages/ProgressPage.tsx
index a1a9d92..d827463 100644
--- a/frontend/src/pages/ProgressPage.tsx
+++ b/frontend/src/pages/ProgressPage.tsx
@@ -4,6 +4,7 @@ import { useGetProgressList } from '../generated/anthoLumeAPIV1';
 import type { Progress } from '../generated/model';
 import { Pagination } from '../components';
 import { Table, type Column } from '../components/Table';
+import { dataForStatus } from '../utils/apiResponses';
 
 const PROGRESS_PAGE_SIZE = 15;
 
@@ -11,7 +12,7 @@ export default function ProgressPage() {
   const [page, setPage] = useState(1);
   const limit = PROGRESS_PAGE_SIZE;
   const { data, isLoading } = useGetProgressList({ page, limit });
-  const response = data?.status === 200 ? data.data : undefined;
+  const response = dataForStatus(data, 200);
   const progress = response?.progress ?? [];
 
   const columns: Column<Progress>[] = [
diff --git a/frontend/src/pages/ReaderPage.tsx b/frontend/src/pages/ReaderPage.tsx
index 4c02852..2e9dd61 100644
--- a/frontend/src/pages/ReaderPage.tsx
+++ b/frontend/src/pages/ReaderPage.tsx
@@ -13,6 +13,7 @@ import {
   useLocalSetting,
 } from '../utils/localSettings';
 import { useEpubReader } from '../hooks/useEpubReader';
+import { dataForStatus } from '../utils/apiResponses';
 
 const READER_SEGMENT_BUTTON = 'rounded border px-2 py-1.5 text-xs sm:text-sm';
 const READER_SEGMENT_ACTIVE = 'border-primary-500 bg-primary-500/10 text-content';
@@ -39,8 +40,8 @@ export default function ReaderPage() {
       enabled: Boolean(id),
     },
   });
-  const document = documentResponse?.status === 200 ? documentResponse.data.document : null;
-  const progress = progressResponse?.status === 200 ? progressResponse.data.progress : undefined;
+  const document = dataForStatus(documentResponse, 200)?.document;
+  const progress = dataForStatus(progressResponse, 200)?.progress;
 
   const deviceId = defaultDeviceId;
   const deviceName = defaultDeviceName;
@@ -108,7 +109,7 @@ export default function ReaderPage() {
     return <LoadingState className="min-h-screen bg-canvas" message="Loading reader..." />;
   }
 
-  if (!id || !document || documentResponse?.status !== 200) {
+  if (!id || !document) {
     return <div className="p-6 text-content-muted">Document not found</div>;
   }
 
diff --git a/frontend/src/pages/SearchPage.tsx b/frontend/src/pages/SearchPage.tsx
index 330046d..e2be8e6 100644
--- a/frontend/src/pages/SearchPage.tsx
+++ b/frontend/src/pages/SearchPage.tsx
@@ -6,6 +6,7 @@ import { Button, Table, type Column, TextInput, IconInput } from '../components'
 import { inputClassName } from '../components/TextInput';
 import { useDebouncedState } from '../hooks/useDebouncedState';
 import { Search2Icon, BookIcon } from '../icons';
+import { dataForStatus } from '../utils/apiResponses';
 
 const searchColumns: Column<SearchItem>[] = [
   {
@@ -92,7 +93,7 @@ export default function SearchPage() {
       },
     }
   );
-  const results = data?.status === 200 ? (data.data.results ?? []) : [];
+  const results = dataForStatus(data, 200)?.results ?? [];
 
   const handleSubmit = (e: SyntheticEvent<HTMLFormElement>) => {
     e.preventDefault();
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
index 956e929..7718acf 100644
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -2,12 +2,13 @@ import { useState, useEffect, SyntheticEvent } from 'react';
 import { Button, LoadingState, Table, type Column, TextInput, IconInput } from '../components';
 import { inputClassName } from '../components/TextInput';
 import { useGetSettings, useUpdateSettings } from '../generated/anthoLumeAPIV1';
-import type { Device } from '../generated/model';
+import type { Device, SettingsResponse } from '../generated/model';
 import { UserIcon, PasswordIcon, ClockIcon } from '../icons';
 import { useToasts } from '../components/ToastContext';
-import { useMutationWithToast } from '../hooks/useMutationWithToast';
+import { useMutationWithToast, useToastMutation } from '../hooks/useMutationWithToast';
 import { useTheme } from '../theme/ThemeProvider';
 import type { ThemeMode } from '../utils/localSettings';
+import { dataForStatus } from '../utils/apiResponses';
 
 const formatDeviceDate = (value?: string) => (value ? new Date(value).toLocaleString() : 'N/A');
 
@@ -32,16 +33,171 @@ const themeModes: Array<{ value: ThemeMode; label: string; description: string }
   { value: 'system', label: 'System', description: 'Follow your device preference.' },
 ];
 
+function ProfileCard({ settings }: { settings?: SettingsResponse }) {
+  return (
+    <div>
+      <div className="flex flex-col items-center rounded bg-surface p-4 text-content-muted shadow-lg md:w-60 lg:w-80">
+        <UserIcon size={60} />
+        <p className="text-lg text-content">{settings?.user.username || 'N/A'}</p>
+      </div>
+    </div>
+  );
+}
+
+function PasswordSection({
+  onSubmit,
+}: {
+  onSubmit: (password: string, next: string) => Promise<boolean>;
+}) {
+  const [password, setPassword] = useState('');
+  const [newPassword, setNewPassword] = useState('');
+
+  const handleSubmit = async (e: SyntheticEvent) => {
+    e.preventDefault();
+    if (await onSubmit(password, newPassword)) {
+      setPassword('');
+      setNewPassword('');
+    }
+  };
+
+  return (
+    <div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
+      <p className="mb-2 text-lg font-semibold text-content">Change Password</p>
+      <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleSubmit}>
+        <div className="flex grow flex-col">
+          <IconInput icon={<PasswordIcon size={15} />}>
+            <TextInput
+              type="password"
+              value={password}
+              onChange={e => setPassword(e.target.value)}
+              placeholder="Password"
+            />
+          </IconInput>
+        </div>
+        <div className="flex grow flex-col">
+          <IconInput icon={<PasswordIcon size={15} />}>
+            <TextInput
+              type="password"
+              value={newPassword}
+              onChange={e => setNewPassword(e.target.value)}
+              placeholder="New Password"
+            />
+          </IconInput>
+        </div>
+        <Button variant="secondary" type="submit" className="w-full lg:w-60">
+          Submit
+        </Button>
+      </form>
+    </div>
+  );
+}
+
+function AppearanceSection() {
+  const { themeMode, resolvedThemeMode, setThemeMode } = useTheme();
+
+  return (
+    <div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <p className="mb-1 text-lg font-semibold text-content">Appearance</p>
+          <p>
+            Active mode: <span className="font-medium text-content">{resolvedThemeMode}</span>
+          </p>
+        </div>
+      </div>
+      <div className="grid gap-3 md:grid-cols-3">
+        {themeModes.map(mode => {
+          const isSelected = themeMode === mode.value;
+
+          return (
+            <button
+              key={mode.value}
+              type="button"
+              onClick={() => setThemeMode(mode.value)}
+              className={`rounded border p-4 text-left transition-colors ${
+                isSelected
+                  ? 'border-primary-500 bg-primary-50 text-content dark:bg-primary-100/20'
+                  : 'border-border bg-surface-muted text-content-muted hover:border-primary-300 hover:bg-surface'
+              }`}
+            >
+              <div className="mb-3 flex items-center justify-between">
+                <span className="text-base font-semibold text-content">{mode.label}</span>
+                <span
+                  className={`inline-flex size-4 rounded-full border ${
+                    isSelected ? 'border-primary-500 bg-primary-500' : 'border-border-strong'
+                  }`}
+                />
+              </div>
+              <p className="text-sm">{mode.description}</p>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function TimezoneSection({
+  timezone,
+  onChange,
+  onSubmit,
+}: {
+  timezone: string;
+  onChange: (timezone: string) => void;
+  onSubmit: () => void;
+}) {
+  const handleSubmit = (e: SyntheticEvent) => {
+    e.preventDefault();
+    onSubmit();
+  };
+
+  return (
+    <div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
+      <p className="mb-2 text-lg font-semibold text-content">Change Timezone</p>
+      <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleSubmit}>
+        <IconInput className="grow" icon={<ClockIcon size={15} />}>
+          <select
+            value={timezone || 'UTC'}
+            onChange={e => onChange(e.target.value)}
+            className={inputClassName}
+          >
+            <option value="UTC">UTC</option>
+            <option value="America/New_York">America/New_York</option>
+            <option value="America/Chicago">America/Chicago</option>
+            <option value="America/Denver">America/Denver</option>
+            <option value="America/Los_Angeles">America/Los_Angeles</option>
+            <option value="Europe/London">Europe/London</option>
+            <option value="Europe/Paris">Europe/Paris</option>
+            <option value="Asia/Tokyo">Asia/Tokyo</option>
+            <option value="Asia/Shanghai">Asia/Shanghai</option>
+            <option value="Australia/Sydney">Australia/Sydney</option>
+          </select>
+        </IconInput>
+        <Button variant="secondary" type="submit" className="w-full lg:w-60">
+          Submit
+        </Button>
+      </form>
+    </div>
+  );
+}
+
+function DevicesSection({ devices }: { devices: Device[] }) {
+  return (
+    <div className="flex grow flex-col rounded bg-surface p-4 text-content-muted shadow-lg">
+      <p className="text-lg font-semibold text-content">Devices</p>
+      <Table columns={deviceColumns} data={devices} rowKey="id" />
+    </div>
+  );
+}
+
 export default function SettingsPage() {
   const { data, isLoading } = useGetSettings();
   const updateSettings = useUpdateSettings();
-  const settingsData = data?.status === 200 ? data.data : null;
+  const settingsData = dataForStatus(data, 200);
   const { showError } = useToasts();
   const toastMutationOptions = useMutationWithToast();
-  const { themeMode, resolvedThemeMode, setThemeMode } = useTheme();
+  const runWithToast = useToastMutation();
 
-  const [password, setPassword] = useState('');
-  const [newPassword, setNewPassword] = useState('');
   const [timezone, setTimezone] = useState('UTC');
 
   useEffect(() => {
@@ -50,30 +206,22 @@ export default function SettingsPage() {
     }
   }, [settingsData]);
 
-  const handlePasswordSubmit = (e: SyntheticEvent) => {
-    e.preventDefault();
-
+  const updatePassword = async (password: string, newPassword: string) => {
     if (!password || !newPassword) {
       showError('Please enter both current and new password');
-      return;
+      return false;
     }
 
-    updateSettings.mutate(
-      { data: { password, new_password: newPassword } },
-      toastMutationOptions({
+    return runWithToast(
+      () => updateSettings.mutateAsync({ data: { password, new_password: newPassword } }),
+      {
         success: 'Password updated successfully',
         error: 'Failed to update password',
-        onSuccess: () => {
-          setPassword('');
-          setNewPassword('');
-        },
-      })
+      }
     );
   };
 
-  const handleTimezoneSubmit = (e: SyntheticEvent) => {
-    e.preventDefault();
-
+  const updateTimezone = () => {
     updateSettings.mutate(
       { data: { timezone } },
       toastMutationOptions({
@@ -89,113 +237,12 @@ export default function SettingsPage() {
 
   return (
     <div className="flex w-full flex-col gap-4 md:flex-row">
-      <div>
-        <div className="flex flex-col items-center rounded bg-surface p-4 text-content-muted shadow-lg md:w-60 lg:w-80">
-          <UserIcon size={60} />
-          <p className="text-lg text-content">{settingsData?.user.username || 'N/A'}</p>
-        </div>
-      </div>
-
+      <ProfileCard settings={settingsData} />
       <div className="flex grow flex-col gap-4">
-        <div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
-          <p className="mb-2 text-lg font-semibold text-content">Change Password</p>
-          <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handlePasswordSubmit}>
-            <div className="flex grow flex-col">
-              <IconInput icon={<PasswordIcon size={15} />}>
-                <TextInput
-                  type="password"
-                  value={password}
-                  onChange={e => setPassword(e.target.value)}
-                  placeholder="Password"
-                />
-              </IconInput>
-            </div>
-            <div className="flex grow flex-col">
-              <IconInput icon={<PasswordIcon size={15} />}>
-                <TextInput
-                  type="password"
-                  value={newPassword}
-                  onChange={e => setNewPassword(e.target.value)}
-                  placeholder="New Password"
-                />
-              </IconInput>
-            </div>
-            <Button variant="secondary" type="submit" className="w-full lg:w-60">
-              Submit
-            </Button>
-          </form>
-        </div>
-
-        <div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
-          <div className="flex items-center justify-between gap-4">
-            <div>
-              <p className="mb-1 text-lg font-semibold text-content">Appearance</p>
-              <p>
-                Active mode: <span className="font-medium text-content">{resolvedThemeMode}</span>
-              </p>
-            </div>
-          </div>
-          <div className="grid gap-3 md:grid-cols-3">
-            {themeModes.map(mode => {
-              const isSelected = themeMode === mode.value;
-
-              return (
-                <button
-                  key={mode.value}
-                  type="button"
-                  onClick={() => setThemeMode(mode.value)}
-                  className={`rounded border p-4 text-left transition-colors ${
-                    isSelected
-                      ? 'border-primary-500 bg-primary-50 text-content dark:bg-primary-100/20'
-                      : 'border-border bg-surface-muted text-content-muted hover:border-primary-300 hover:bg-surface'
-                  }`}
-                >
-                  <div className="mb-3 flex items-center justify-between">
-                    <span className="text-base font-semibold text-content">{mode.label}</span>
-                    <span
-                      className={`inline-flex size-4 rounded-full border ${
-                        isSelected ? 'border-primary-500 bg-primary-500' : 'border-border-strong'
-                      }`}
-                    />
-                  </div>
-                  <p className="text-sm">{mode.description}</p>
-                </button>
-              );
-            })}
-          </div>
-        </div>
-
-        <div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
-          <p className="mb-2 text-lg font-semibold text-content">Change Timezone</p>
-          <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleTimezoneSubmit}>
-            <IconInput className="grow" icon={<ClockIcon size={15} />}>
-              <select
-                value={timezone || 'UTC'}
-                onChange={e => setTimezone(e.target.value)}
-                className={inputClassName}
-              >
-                <option value="UTC">UTC</option>
-                <option value="America/New_York">America/New_York</option>
-                <option value="America/Chicago">America/Chicago</option>
-                <option value="America/Denver">America/Denver</option>
-                <option value="America/Los_Angeles">America/Los_Angeles</option>
-                <option value="Europe/London">Europe/London</option>
-                <option value="Europe/Paris">Europe/Paris</option>
-                <option value="Asia/Tokyo">Asia/Tokyo</option>
-                <option value="Asia/Shanghai">Asia/Shanghai</option>
-                <option value="Australia/Sydney">Australia/Sydney</option>
-              </select>
-            </IconInput>
-            <Button variant="secondary" type="submit" className="w-full lg:w-60">
-              Submit
-            </Button>
-          </form>
-        </div>
-
-        <div className="flex grow flex-col rounded bg-surface p-4 text-content-muted shadow-lg">
-          <p className="text-lg font-semibold text-content">Devices</p>
-          <Table columns={deviceColumns} data={settingsData?.devices ?? []} rowKey="id" />
-        </div>
+        <PasswordSection onSubmit={updatePassword} />
+        <AppearanceSection />
+        <TimezoneSection timezone={timezone} onChange={setTimezone} onSubmit={updateTimezone} />
+        <DevicesSection devices={settingsData?.devices ?? []} />
       </div>
     </div>
   );
diff --git a/frontend/src/utils/apiResponses.ts b/frontend/src/utils/apiResponses.ts
new file mode 100644
index 0000000..e8b1be9
--- /dev/null
+++ b/frontend/src/utils/apiResponses.ts
@@ -0,0 +1,21 @@
+type ApiResponse = {
+  status: number;
+  data: unknown;
+};
+
+export function dataForStatus<TResponse extends ApiResponse, TStatus extends TResponse['status']>(
+  response: TResponse | undefined,
+  status: TStatus
+): Extract<TResponse, { status: TStatus }>['data'] | undefined {
+  return response?.status === status
+    ? (response.data as Extract<TResponse, { status: TStatus }>['data'])
+    : undefined;
+}
+
+export function dataForSuccess<TResponse extends ApiResponse>(
+  response: TResponse | undefined
+): Extract<TResponse, { status: 200 | 201 | 202 | 204 }>['data'] | undefined {
+  return response && response.status >= 200 && response.status < 300
+    ? (response.data as Extract<TResponse, { status: 200 | 201 | 202 | 204 }>['data'])
+    : undefined;
+}