diff --git a/frontend/src/auth/ProtectedRoute.tsx b/frontend/src/auth/ProtectedRoute.tsx
index d6be74d..cf3db8a 100644
--- a/frontend/src/auth/ProtectedRoute.tsx
+++ b/frontend/src/auth/ProtectedRoute.tsx
@@ -9,13 +9,11 @@ export function ProtectedRoute({ children }: ProtectedRouteProps) {
   const { isAuthenticated, isCheckingAuth } = useAuth();
   const location = useLocation();
 
-  // Show loading while checking authentication status
   if (isCheckingAuth) {
-    return <div className="text-gray-500 dark:text-white">Loading...</div>;
+    return <div className="text-content-muted">Loading...</div>;
   }
 
   if (!isAuthenticated) {
-    // Redirect to login with the current location saved
     return <Navigate to="/login" state={{ from: location }} replace />;
   }
 
diff --git a/frontend/src/components/Field.tsx b/frontend/src/components/Field.tsx
index ba34381..589d81a 100644
--- a/frontend/src/components/Field.tsx
+++ b/frontend/src/components/Field.tsx
@@ -9,7 +9,7 @@ interface FieldProps {
 export function Field({ label, children, isEditing: _isEditing = false }: FieldProps) {
   return (
     <div className="relative rounded">
-      <div className="relative inline-flex gap-2 text-gray-500">{label}</div>
+      <div className="relative inline-flex gap-2 text-content-muted">{label}</div>
       {children}
     </div>
   );
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index d93cc49..c4b8eca 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -90,7 +90,7 @@ export default function Layout() {
 
           {isUserDropdownOpen && (
             <div className="absolute right-4 top-16 z-20 pt-4 transition duration-200">
-              <div className="w-64 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-black/5 dark:shadow-gray-800">
+              <div className="w-64 origin-top-right rounded-md bg-surface shadow-lg ring-1 ring-border/30">
                 <div
                   className="border-b border-border px-4 py-3"
                   role="group"
diff --git a/frontend/src/components/ReadingHistoryGraph.tsx b/frontend/src/components/ReadingHistoryGraph.tsx
index 9274f21..fa91f50 100644
--- a/frontend/src/components/ReadingHistoryGraph.tsx
+++ b/frontend/src/components/ReadingHistoryGraph.tsx
@@ -124,10 +124,7 @@ export function getSVGGraphData(
     const itemY = svgHeight - itemSize;
     const lineX = (idx + 1) * blockOffset;
 
-    linePoints.push({
-      x: lineX,
-      y: itemY,
-    });
+    linePoints.push({ x: lineX, y: itemY });
 
     if (lineX > maxBX) {
       maxBX = lineX;
@@ -164,8 +161,8 @@ export default function ReadingHistoryGraph({ data }: ReadingHistoryGraphProps)
 
   if (!data || data.length < 2) {
     return (
-      <div className="relative flex h-24 items-center justify-center bg-gray-100 dark:bg-gray-600">
-        <p className="text-gray-400 dark:text-gray-300">No data available</p>
+      <div className="relative flex h-24 items-center justify-center bg-surface-muted">
+        <p className="text-content-subtle">No data available</p>
       </div>
     );
   }
@@ -175,8 +172,8 @@ export default function ReadingHistoryGraph({ data }: ReadingHistoryGraphProps)
   return (
     <div className="relative">
       <svg viewBox={`26 0 755 ${svgHeight}`} preserveAspectRatio="none" width="100%" height="6em">
-        <path fill="#316BBE" fillOpacity="0.5" stroke="none" d={`${BezierPath} ${BezierFill}`} />
-        <path fill="none" stroke="#316BBE" d={BezierPath} />
+        <path fill="rgb(var(--secondary-600))" fillOpacity="0.5" stroke="none" d={`${BezierPath} ${BezierFill}`} />
+        <path fill="none" stroke="rgb(var(--secondary-600))" d={BezierPath} />
       </svg>
       <div
         className="absolute top-0 flex size-full"
@@ -196,11 +193,10 @@ export default function ReadingHistoryGraph({ data }: ReadingHistoryGraphProps)
             }}
           >
             <div
-              className="pointer-events-none absolute top-3 flex flex-col items-center rounded p-2 text-xs dark:text-white"
+              className="pointer-events-none absolute top-3 flex flex-col items-center rounded bg-surface/80 p-2 text-xs text-content"
               style={{
                 transform: 'translateX(-50%)',
                 left: '50%',
-                backgroundColor: 'rgba(128, 128, 128, 0.2)',
               }}
             >
               <span>{formatDate(point.date)}</span>
diff --git a/frontend/src/components/Skeleton.tsx b/frontend/src/components/Skeleton.tsx
index 06a3ed0..72c25aa 100644
--- a/frontend/src/components/Skeleton.tsx
+++ b/frontend/src/components/Skeleton.tsx
@@ -15,7 +15,7 @@ export function Skeleton({
   height,
   animation = 'pulse',
 }: SkeletonProps) {
-  const baseClasses = 'bg-gray-200 dark:bg-gray-600';
+  const baseClasses = 'bg-surface-strong';
 
   const variantClasses = {
     default: 'rounded',
@@ -184,7 +184,7 @@ export function PageLoader({ message = 'Loading...', className = '' }: PageLoade
   return (
     <div className={cn('flex min-h-[400px] flex-col items-center justify-center gap-4', className)}>
       <div className="relative">
-        <div className="size-12 animate-spin rounded-full border-4 border-gray-200 border-t-secondary-500 dark:border-gray-600" />
+        <div className="size-12 animate-spin rounded-full border-4 border-surface-strong border-t-secondary-500" />
       </div>
       <p className="text-sm font-medium text-content-muted">{message}</p>
     </div>
@@ -206,7 +206,7 @@ export function InlineLoader({ size = 'md', className = '' }: InlineLoaderProps)
   return (
     <div className={cn('flex items-center justify-center', className)}>
       <div
-        className={`${sizeMap[size]} animate-spin rounded-full border-gray-200 border-t-secondary-500 dark:border-gray-600`}
+        className={`${sizeMap[size]} animate-spin rounded-full border-surface-strong border-t-secondary-500`}
       />
     </div>
   );
diff --git a/frontend/src/pages/ActivityPage.tsx b/frontend/src/pages/ActivityPage.tsx
index e86341f..0699d04 100644
--- a/frontend/src/pages/ActivityPage.tsx
+++ b/frontend/src/pages/ActivityPage.tsx
@@ -13,10 +13,7 @@ export default function ActivityPage() {
       key: 'document_id' as const,
       header: 'Document',
       render: (_value, row) => (
-        <Link
-          to={`/documents/${row.document_id}`}
-          className="text-blue-600 hover:underline dark:text-blue-400"
-        >
+        <Link to={`/documents/${row.document_id}`} className="text-secondary-600 hover:underline">
           {row.author || 'Unknown'} - {row.title || 'Unknown'}
         </Link>
       ),
@@ -29,9 +26,7 @@ export default function ActivityPage() {
     {
       key: 'duration' as const,
       header: 'Duration',
-      render: value => {
-        return formatDuration(typeof value === 'number' ? value : 0);
-      },
+      render: value => formatDuration(typeof value === 'number' ? value : 0),
     },
     {
       key: 'end_percentage' as const,
diff --git a/frontend/src/pages/AdminImportPage.tsx b/frontend/src/pages/AdminImportPage.tsx
index 02abdc0..0427568 100644
--- a/frontend/src/pages/AdminImportPage.tsx
+++ b/frontend/src/pages/AdminImportPage.tsx
@@ -48,7 +48,6 @@ export default function AdminImportPage() {
       {
         onSuccess: _response => {
           showInfo('Import completed successfully');
-          // Redirect to import results page after a short delay
           setTimeout(() => {
             window.location.href = '/admin/import-results';
           }, 1500);
@@ -65,22 +64,22 @@ export default function AdminImportPage() {
   };
 
   if (isLoading && !currentPath) {
-    return <div className="text-gray-500 dark:text-white">Loading...</div>;
+    return <div className="text-content-muted">Loading...</div>;
   }
 
   if (selectedDirectory) {
     return (
       <div className="overflow-x-auto">
         <div className="inline-block min-w-full overflow-hidden rounded shadow">
-          <div className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-            <p className="text-lg font-semibold text-gray-500">Selected Import Directory</p>
+          <div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
+            <p className="text-lg font-semibold text-content">Selected Import Directory</p>
             <form className="flex flex-col gap-4" onSubmit={handleImport}>
               <div className="flex w-full justify-between gap-4">
-                <div className="flex items-center gap-4">
+                <div className="flex items-center gap-4 text-content">
                   <FolderOpenIcon size={20} />
                   <p className="break-all text-lg font-medium">{selectedDirectory}</p>
                 </div>
-                <div className="mr-4 flex flex-col justify-around gap-2">
+                <div className="mr-4 flex flex-col justify-around gap-2 text-content">
                   <div className="inline-flex items-center gap-2">
                     <input
                       type="radio"
@@ -124,20 +123,20 @@ export default function AdminImportPage() {
   return (
     <div className="overflow-x-auto">
       <div className="inline-block min-w-full overflow-hidden rounded shadow">
-        <table className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700">
-          <thead className="text-gray-800 dark:text-gray-400">
+        <table className="min-w-full bg-surface text-sm leading-normal text-content">
+          <thead className="text-content-muted">
             <tr>
-              <th className="w-12 border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800"></th>
-              <th className="break-all border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800">
+              <th className="w-12 border-b border-border p-3 text-left font-normal"></th>
+              <th className="break-all border-b border-border p-3 text-left font-normal">
                 {currentPath}
               </th>
             </tr>
           </thead>
-          <tbody className="text-black dark:text-white">
+          <tbody>
             {currentPath !== '/' && (
               <tr>
-                <td className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400"></td>
-                <td className="border-b border-gray-200 p-3">
+                <td className="border-b border-border p-3 text-content-muted"></td>
+                <td className="border-b border-border p-3">
                   <button onClick={handleNavigateUp}>
                     <p>../</p>
                   </button>
@@ -153,12 +152,12 @@ export default function AdminImportPage() {
             ) : (
               directories.map((item: DirectoryItem) => (
                 <tr key={item.name}>
-                  <td className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400">
+                  <td className="border-b border-border p-3 text-content-muted">
                     <button onClick={() => item.name && handleSelectDirectory(item.name)}>
                       <FolderOpenIcon size={20} />
                     </button>
                   </td>
-                  <td className="border-b border-gray-200 p-3">
+                  <td className="border-b border-border p-3">
                     <button onClick={() => item.name && handleSelectDirectory(item.name)}>
                       <p>{item.name ?? ''}</p>
                     </button>
diff --git a/frontend/src/pages/AdminImportResultsPage.tsx b/frontend/src/pages/AdminImportResultsPage.tsx
index 034883c..43e27ce 100644
--- a/frontend/src/pages/AdminImportResultsPage.tsx
+++ b/frontend/src/pages/AdminImportResultsPage.tsx
@@ -8,27 +8,27 @@ export default function AdminImportResultsPage() {
     resultsData?.status === 200 ? (resultsData.data as ImportResultsResponse).results || [] : [];
 
   if (isLoading) {
-    return <div className="text-gray-500 dark:text-white">Loading...</div>;
+    return <div className="text-content-muted">Loading...</div>;
   }
 
   return (
     <div className="overflow-x-auto">
       <div className="inline-block min-w-full overflow-hidden rounded shadow">
-        <table className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700">
-          <thead className="text-gray-800 dark:text-gray-400">
+        <table className="min-w-full bg-surface text-sm leading-normal text-content">
+          <thead className="text-content-muted">
             <tr>
-              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
+              <th className="border-b border-border p-3 text-left font-normal uppercase">
                 Document
               </th>
-              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
+              <th className="border-b border-border p-3 text-left font-normal uppercase">
                 Status
               </th>
-              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
+              <th className="border-b border-border p-3 text-left font-normal uppercase">
                 Error
               </th>
             </tr>
           </thead>
-          <tbody className="text-black dark:text-white">
+          <tbody>
             {results.length === 0 ? (
               <tr>
                 <td className="p-3 text-center" colSpan={3}>
@@ -39,22 +39,24 @@ export default function AdminImportResultsPage() {
               results.map((result: ImportResult, index: number) => (
                 <tr key={index}>
                   <td
-                    className="grid border-b border-gray-200 p-3"
+                    className="grid border-b border-border p-3"
                     style={{ gridTemplateColumns: '4rem auto' }}
                   >
-                    <span className="text-gray-800 dark:text-gray-400">Name:</span>
+                    <span className="text-content-muted">Name:</span>
                     {result.id ? (
-                      <Link to={`/documents/${result.id}`}>{result.name}</Link>
+                      <Link to={`/documents/${result.id}`} className="text-secondary-600 hover:underline">
+                        {result.name}
+                      </Link>
                     ) : (
                       <span>N/A</span>
                     )}
-                    <span className="text-gray-800 dark:text-gray-400">File:</span>
+                    <span className="text-content-muted">File:</span>
                     <span>{result.path}</span>
                   </td>
-                  <td className="border-b border-gray-200 p-3">
+                  <td className="border-b border-border p-3">
                     <p>{result.status}</p>
                   </td>
-                  <td className="border-b border-gray-200 p-3">
+                  <td className="border-b border-border p-3">
                     <p>{result.error || ''}</p>
                   </td>
                 </tr>
diff --git a/frontend/src/pages/AdminLogsPage.tsx b/frontend/src/pages/AdminLogsPage.tsx
index 94d2fbe..b3a3a59 100644
--- a/frontend/src/pages/AdminLogsPage.tsx
+++ b/frontend/src/pages/AdminLogsPage.tsx
@@ -26,18 +26,18 @@ export default function AdminLogsPage() {
 
   return (
     <div>
-      <div className="mb-4 flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
+      <div className="mb-4 flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
         <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleFilterSubmit}>
           <div className="flex w-full grow flex-col">
             <div className="relative flex">
-              <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
+              <span className="inline-flex items-center border-y border-l border-border bg-surface px-3 text-sm text-content-muted shadow-sm">
                 <Search2Icon size={15} hoverable={false} />
               </span>
               <input
                 type="text"
                 value={filter}
                 onChange={e => setFilter(e.target.value)}
-                className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white p-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
+                className="w-full flex-1 appearance-none rounded-none border border-border bg-surface p-2 text-base text-content shadow-sm placeholder:text-content-subtle focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600"
                 placeholder="JQ Filter"
               />
             </div>
@@ -51,7 +51,7 @@ export default function AdminLogsPage() {
       </div>
 
       <div
-        className="flex w-full flex-col-reverse overflow-scroll text-black dark:text-white"
+        className="flex w-full flex-col-reverse overflow-scroll text-content"
         style={{ fontFamily: 'monospace' }}
       >
         {isLoading ? (
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
index e85cb85..fccc11a 100644
--- a/frontend/src/pages/AdminPage.tsx
+++ b/frontend/src/pages/AdminPage.tsx
@@ -42,19 +42,14 @@ export default function AdminPage() {
 
       const filename = `AnthoLumeBackup_${new Date().toISOString().replace(/[:.]/g, '')}.zip`;
 
-      // Stream the response directly to disk using File System Access API
-      // This avoids loading multi-GB files into browser memory
       if ('showSaveFilePicker' in window && typeof window.showSaveFilePicker === 'function') {
         try {
-          // Modern browsers: Use File System Access API for direct disk writes
           const handle = await window.showSaveFilePicker({
             suggestedName: filename,
             types: [{ description: 'ZIP Archive', accept: { 'application/zip': ['.zip'] } }],
           });
 
           const writable = await handle.createWritable();
-
-          // Stream response body directly to file without buffering
           const reader = response.body?.getReader();
           if (!reader) throw new Error('Unable to read response');
 
@@ -67,13 +62,11 @@ export default function AdminPage() {
           await writable.close();
           showInfo('Backup completed successfully');
         } catch (err) {
-          // User cancelled or error
           if ((err as Error).name !== 'AbortError') {
             showError('Backup failed: ' + (err as Error).message);
           }
         }
       } else {
-        // Fallback for older browsers
         showError(
           'Your browser does not support large file downloads. Please use Chrome, Edge, or Safari.'
         );
@@ -113,52 +106,34 @@ export default function AdminPage() {
 
   const handleMetadataMatch = () => {
     postAdminAction.mutate(
+      { data: { action: 'METADATA_MATCH' } },
       {
-        data: {
-          action: 'METADATA_MATCH',
-        },
-      },
-      {
-        onSuccess: () => {
-          showInfo('Metadata matching started');
-        },
-        onError: error => {
-          showError('Metadata matching failed: ' + getErrorMessage(error));
-        },
+        onSuccess: () => showInfo('Metadata matching started'),
+        onError: error => showError('Metadata matching failed: ' + getErrorMessage(error)),
       }
     );
   };
 
   const handleCacheTables = () => {
     postAdminAction.mutate(
+      { data: { action: 'CACHE_TABLES' } },
       {
-        data: {
-          action: 'CACHE_TABLES',
-        },
-      },
-      {
-        onSuccess: () => {
-          showInfo('Cache tables started');
-        },
-        onError: error => {
-          showError('Cache tables failed: ' + getErrorMessage(error));
-        },
+        onSuccess: () => showInfo('Cache tables started'),
+        onError: error => showError('Cache tables failed: ' + getErrorMessage(error)),
       }
     );
   };
 
   if (isLoading) {
-    return <div className="text-gray-500 dark:text-white">Loading...</div>;
+    return <div className="text-content-muted">Loading...</div>;
   }
 
   return (
     <div className="flex w-full grow flex-col gap-4">
-      {/* Backup & Restore Card */}
-      <div className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-        <p className="mb-2 text-lg font-semibold">Backup & Restore</p>
+      <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">Backup & Restore</p>
         <div className="flex flex-col gap-4">
-          {/* Backup Form */}
-          <form className="flex justify-between" onSubmit={handleBackupSubmit}>
+          <form className="flex justify-between text-content" onSubmit={handleBackupSubmit}>
             <div className="flex items-center gap-8">
               <div>
                 <input
@@ -186,8 +161,7 @@ export default function AdminPage() {
             </div>
           </form>
 
-          {/* Restore Form */}
-          <form onSubmit={handleRestoreSubmit} className="flex grow justify-between">
+          <form onSubmit={handleRestoreSubmit} className="flex grow justify-between text-content">
             <div className="flex w-1/2 items-center">
               <input
                 type="file"
@@ -205,11 +179,10 @@ export default function AdminPage() {
         </div>
       </div>
 
-      {/* Tasks Card */}
-      <div className="flex grow flex-col rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
-        <p className="text-lg font-semibold">Tasks</p>
-        <table className="min-w-full bg-white text-sm dark:bg-gray-700">
-          <tbody className="text-black dark:text-white">
+      <div className="flex grow flex-col rounded bg-surface p-4 text-content-muted shadow-lg">
+        <p className="text-lg font-semibold text-content">Tasks</p>
+        <table className="min-w-full bg-surface text-sm text-content">
+          <tbody>
             <tr>
               <td className="pl-0">
                 <p>Metadata Matching</p>
diff --git a/frontend/src/pages/AdminUsersPage.tsx b/frontend/src/pages/AdminUsersPage.tsx
index 533fb00..7597193 100644
--- a/frontend/src/pages/AdminUsersPage.tsx
+++ b/frontend/src/pages/AdminUsersPage.tsx
@@ -39,9 +39,7 @@ export default function AdminUsersPage() {
           setNewIsAdmin(false);
           refetch();
         },
-        onError: error => {
-          showError('Failed to create user: ' + getErrorMessage(error));
-        },
+        onError: error => showError('Failed to create user: ' + getErrorMessage(error)),
       }
     );
   };
@@ -49,19 +47,14 @@ export default function AdminUsersPage() {
   const handleDeleteUser = (userId: string) => {
     updateUser.mutate(
       {
-        data: {
-          operation: 'DELETE',
-          user: userId,
-        },
+        data: { operation: 'DELETE', user: userId },
       },
       {
         onSuccess: () => {
           showInfo('User deleted successfully');
           refetch();
         },
-        onError: error => {
-          showError('Failed to delete user: ' + getErrorMessage(error));
-        },
+        onError: error => showError('Failed to delete user: ' + getErrorMessage(error)),
       }
     );
   };
@@ -71,20 +64,14 @@ export default function AdminUsersPage() {
 
     updateUser.mutate(
       {
-        data: {
-          operation: 'UPDATE',
-          user: userId,
-          password,
-        },
+        data: { operation: 'UPDATE', user: userId, password },
       },
       {
         onSuccess: () => {
           showInfo('Password updated successfully');
           refetch();
         },
-        onError: error => {
-          showError('Failed to update password: ' + getErrorMessage(error));
-        },
+        onError: error => showError('Failed to update password: ' + getErrorMessage(error)),
       }
     );
   };
@@ -92,50 +79,40 @@ export default function AdminUsersPage() {
   const handleToggleAdmin = (userId: string, isAdmin: boolean) => {
     updateUser.mutate(
       {
-        data: {
-          operation: 'UPDATE',
-          user: userId,
-          is_admin: isAdmin,
-        },
+        data: { operation: 'UPDATE', user: userId, is_admin: isAdmin },
       },
       {
         onSuccess: () => {
-          const role = isAdmin ? 'admin' : 'user';
-          showInfo(`User permissions updated to ${role}`);
+          showInfo(`User permissions updated to ${isAdmin ? 'admin' : 'user'}`);
           refetch();
         },
-        onError: error => {
-          showError('Failed to update admin status: ' + getErrorMessage(error));
-        },
+        onError: error => showError('Failed to update admin status: ' + getErrorMessage(error)),
       }
     );
   };
 
   if (isLoading) {
-    return <div className="text-gray-500 dark:text-white">Loading...</div>;
+    return <div className="text-content-muted">Loading...</div>;
   }
 
   return (
     <div className="relative h-full overflow-x-auto">
       {showAddForm && (
-        <div className="absolute left-10 top-10 rounded bg-gray-200 p-3 shadow-lg shadow-gray-500 transition-all duration-200 dark:bg-gray-600 dark:shadow-gray-900">
-          <form
-            onSubmit={handleCreateUser}
-            className="flex flex-col gap-2 text-sm text-black dark:text-white"
-          >
+        <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">
             <input
               type="text"
               value={newUsername}
               onChange={e => setNewUsername(e.target.value)}
               placeholder="Username"
-              className="bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
+              className="bg-surface p-2 text-content"
             />
             <input
               type="password"
               value={newPassword}
               onChange={e => setNewPassword(e.target.value)}
               placeholder="Password"
-              className="bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
+              className="bg-surface p-2 text-content"
             />
             <div className="flex items-center gap-2">
               <input
@@ -147,7 +124,7 @@ export default function AdminUsersPage() {
               <label htmlFor="new_is_admin">Admin</label>
             </div>
             <button
-              className="bg-gray-500 px-2 py-1 font-medium text-white hover:bg-gray-800 dark:text-gray-800 dark:hover:bg-gray-100"
+              className="bg-primary-500 px-2 py-1 font-medium text-primary-foreground hover:bg-primary-700"
               type="submit"
             >
               Create
@@ -157,29 +134,25 @@ export default function AdminUsersPage() {
       )}
 
       <div className="min-w-full overflow-scroll rounded shadow">
-        <table className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700">
-          <thead className="text-gray-800 dark:text-gray-400">
+        <table className="min-w-full bg-surface text-sm leading-normal text-content">
+          <thead className="text-content-muted">
             <tr>
-              <th className="w-12 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
+              <th className="w-12 border-b border-border p-3 text-left font-normal uppercase">
                 <button onClick={() => setShowAddForm(!showAddForm)}>
                   <AddIcon size={20} />
                 </button>
               </th>
-              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
-                User
-              </th>
-              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
-                Password
-              </th>
-              <th className="border-b border-gray-200 p-3 text-center font-normal uppercase dark:border-gray-800">
+              <th className="border-b border-border p-3 text-left font-normal uppercase">User</th>
+              <th className="border-b border-border p-3 text-left font-normal uppercase">Password</th>
+              <th className="border-b border-border p-3 text-center font-normal uppercase">
                 Permissions
               </th>
-              <th className="w-48 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
+              <th className="w-48 border-b border-border p-3 text-left font-normal uppercase">
                 Created
               </th>
             </tr>
           </thead>
-          <tbody className="text-black dark:text-white">
+          <tbody>
             {users.length === 0 ? (
               <tr>
                 <td className="p-3 text-center" colSpan={5}>
@@ -189,33 +162,33 @@ export default function AdminUsersPage() {
             ) : (
               users.map((user: User) => (
                 <tr key={user.id}>
-                  <td className="relative cursor-pointer border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400">
+                  <td className="relative cursor-pointer border-b border-border p-3 text-content-muted">
                     <button onClick={() => handleDeleteUser(user.id)}>
                       <DeleteIcon size={20} />
                     </button>
                   </td>
-                  <td className="border-b border-gray-200 p-3">
+                  <td className="border-b border-border p-3">
                     <p>{user.id}</p>
                   </td>
-                  <td className="border-b border-gray-200 px-3">
+                  <td className="border-b border-border px-3">
                     <button
                       onClick={() => {
                         const password = prompt(`Enter new password for ${user.id}`);
                         if (password) handleUpdatePassword(user.id, password);
                       }}
-                      className="bg-gray-500 px-2 py-1 font-medium text-white hover:bg-gray-800 dark:text-gray-800 dark:hover:bg-gray-100"
+                      className="bg-primary-500 px-2 py-1 font-medium text-primary-foreground hover:bg-primary-700"
                     >
                       Reset
                     </button>
                   </td>
-                  <td className="flex min-w-40 justify-center gap-2 border-b border-gray-200 p-3 text-center">
+                  <td className="flex min-w-40 justify-center gap-2 border-b border-border p-3 text-center">
                     <button
                       onClick={() => handleToggleAdmin(user.id, true)}
                       disabled={user.admin}
-                      className={`rounded-md px-2 py-1 text-white dark:text-black ${
+                      className={`rounded-md px-2 py-1 ${
                         user.admin
-                          ? 'cursor-default bg-gray-800 dark:bg-gray-100'
-                          : 'cursor-pointer bg-gray-400 dark:bg-gray-600'
+                          ? 'cursor-default bg-content text-content-inverse'
+                          : 'cursor-pointer bg-surface-strong text-content'
                       }`}
                     >
                       admin
@@ -223,16 +196,16 @@ export default function AdminUsersPage() {
                     <button
                       onClick={() => handleToggleAdmin(user.id, false)}
                       disabled={!user.admin}
-                      className={`rounded-md px-2 py-1 text-white dark:text-black ${
+                      className={`rounded-md px-2 py-1 ${
                         !user.admin
-                          ? 'cursor-default bg-gray-800 dark:bg-gray-100'
-                          : 'cursor-pointer bg-gray-400 dark:bg-gray-600'
+                          ? 'cursor-default bg-content text-content-inverse'
+                          : 'cursor-pointer bg-surface-strong text-content'
                       }`}
                     >
                       user
                     </button>
                   </td>
-                  <td className="border-b border-gray-200 p-3">
+                  <td className="border-b border-border p-3">
                     <p>{user.created_at}</p>
                   </td>
                 </tr>
diff --git a/frontend/src/pages/ComponentDemoPage.tsx b/frontend/src/pages/ComponentDemoPage.tsx
index 7e45d80..0281249 100644
--- a/frontend/src/pages/ComponentDemoPage.tsx
+++ b/frontend/src/pages/ComponentDemoPage.tsx
@@ -38,17 +38,16 @@ export default function ComponentDemoPage() {
   };
 
   return (
-    <div className="space-y-8 p-4">
-      <h1 className="text-2xl font-bold dark:text-white">UI Components Demo</h1>
+    <div className="space-y-8 p-4 text-content">
+      <h1 className="text-2xl font-bold">UI Components Demo</h1>
 
-      {/* Toast Demos */}
-      <section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
-        <h2 className="mb-4 text-xl font-semibold dark:text-white">Toast Notifications</h2>
+      <section className="rounded-lg bg-surface p-6 shadow">
+        <h2 className="mb-4 text-xl font-semibold">Toast Notifications</h2>
         <div className="flex flex-wrap gap-4">
           <button
             onClick={handleDemoClick}
             disabled={isLoading}
-            className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
+            className="rounded bg-secondary-500 px-4 py-2 text-secondary-foreground hover:bg-secondary-600 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {isLoading ? <InlineLoader size="sm" /> : 'Show Info Toast'}
           </button>
@@ -66,21 +65,19 @@ export default function ComponentDemoPage() {
           </button>
           <button
             onClick={handleCustomToast}
-            className="rounded bg-purple-500 px-4 py-2 text-white hover:bg-purple-600"
+            className="rounded bg-primary-500 px-4 py-2 text-primary-foreground hover:bg-primary-600"
           >
             Show Custom Toast
           </button>
         </div>
       </section>
 
-      {/* Skeleton Demos */}
-      <section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
-        <h2 className="mb-4 text-xl font-semibold dark:text-white">Skeleton Loading Components</h2>
+      <section className="rounded-lg bg-surface p-6 shadow">
+        <h2 className="mb-4 text-xl font-semibold">Skeleton Loading Components</h2>
 
         <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
-          {/* Basic Skeletons */}
           <div className="space-y-4">
-            <h3 className="text-lg font-medium dark:text-gray-300">Basic Skeletons</h3>
+            <h3 className="text-lg font-medium text-content-muted">Basic Skeletons</h3>
             <div className="space-y-2">
               <Skeleton className="h-8 w-full" />
               <Skeleton variant="text" className="w-3/4" />
@@ -92,16 +89,14 @@ export default function ComponentDemoPage() {
             </div>
           </div>
 
-          {/* Skeleton Text */}
           <div className="space-y-4">
-            <h3 className="text-lg font-medium dark:text-gray-300">Skeleton Text</h3>
+            <h3 className="text-lg font-medium text-content-muted">Skeleton Text</h3>
             <SkeletonText lines={3} />
             <SkeletonText lines={5} className="max-w-md" />
           </div>
 
-          {/* Skeleton Avatar */}
           <div className="space-y-4">
-            <h3 className="text-lg font-medium dark:text-gray-300">Skeleton Avatar</h3>
+            <h3 className="text-lg font-medium text-content-muted">Skeleton Avatar</h3>
             <div className="flex items-center gap-4">
               <SkeletonAvatar size="sm" />
               <SkeletonAvatar size="md" />
@@ -110,9 +105,8 @@ export default function ComponentDemoPage() {
             </div>
           </div>
 
-          {/* Skeleton Button */}
           <div className="space-y-4">
-            <h3 className="text-lg font-medium dark:text-gray-300">Skeleton Button</h3>
+            <h3 className="text-lg font-medium text-content-muted">Skeleton Button</h3>
             <div className="flex flex-wrap gap-2">
               <SkeletonButton width={120} />
               <SkeletonButton className="w-full max-w-xs" />
@@ -121,9 +115,8 @@ export default function ComponentDemoPage() {
         </div>
       </section>
 
-      {/* Skeleton Card Demo */}
-      <section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
-        <h2 className="mb-4 text-xl font-semibold dark:text-white">Skeleton Cards</h2>
+      <section className="rounded-lg bg-surface p-6 shadow">
+        <h2 className="mb-4 text-xl font-semibold">Skeleton Cards</h2>
         <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           <SkeletonCard />
           <SkeletonCard showAvatar />
@@ -131,33 +124,30 @@ export default function ComponentDemoPage() {
         </div>
       </section>
 
-      {/* Skeleton Table Demo */}
-      <section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
-        <h2 className="mb-4 text-xl font-semibold dark:text-white">Skeleton Table</h2>
+      <section className="rounded-lg bg-surface p-6 shadow">
+        <h2 className="mb-4 text-xl font-semibold">Skeleton Table</h2>
         <SkeletonTable rows={5} columns={4} />
       </section>
 
-      {/* Page Loader Demo */}
-      <section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
-        <h2 className="mb-4 text-xl font-semibold dark:text-white">Page Loader</h2>
+      <section className="rounded-lg bg-surface p-6 shadow">
+        <h2 className="mb-4 text-xl font-semibold">Page Loader</h2>
         <PageLoader message="Loading demo content..." />
       </section>
 
-      {/* Inline Loader Demo */}
-      <section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
-        <h2 className="mb-4 text-xl font-semibold dark:text-white">Inline Loader</h2>
+      <section className="rounded-lg bg-surface p-6 shadow">
+        <h2 className="mb-4 text-xl font-semibold">Inline Loader</h2>
         <div className="flex items-center gap-8">
           <div className="text-center">
             <InlineLoader size="sm" />
-            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Small</p>
+            <p className="mt-2 text-sm text-content-muted">Small</p>
           </div>
           <div className="text-center">
             <InlineLoader size="md" />
-            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Medium</p>
+            <p className="mt-2 text-sm text-content-muted">Medium</p>
           </div>
           <div className="text-center">
             <InlineLoader size="lg" />
-            <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">Large</p>
+            <p className="mt-2 text-sm text-content-muted">Large</p>
           </div>
         </div>
       </section>
diff --git a/frontend/src/pages/DocumentPage.tsx b/frontend/src/pages/DocumentPage.tsx
index adb4ed4..b6d954d 100644
--- a/frontend/src/pages/DocumentPage.tsx
+++ b/frontend/src/pages/DocumentPage.tsx
@@ -1,4 +1,6 @@
+import { useState } from 'react';
 import { useParams } from 'react-router-dom';
+import { useQueryClient } from '@tanstack/react-query';
 import {
   useGetDocument,
   useEditDocument,
@@ -6,7 +8,6 @@ import {
 } from '../generated/anthoLumeAPIV1';
 import { Document } from '../generated/model/document';
 import { Progress } from '../generated/model/progress';
-import { useQueryClient } from '@tanstack/react-query';
 import { formatDuration } from '../utils/formatters';
 import {
   DeleteIcon,
@@ -18,9 +19,14 @@ import {
   CloseIcon,
   CheckIcon,
 } from '../icons';
-import { useState } from 'react';
 import { Field, FieldLabel, FieldValue, FieldActions } from '../components';
 
+const iconButtonClassName = 'cursor-pointer text-content-muted hover:text-content';
+const popupClassName = 'rounded bg-surface-strong p-3 text-content shadow-lg transition-all duration-200';
+const popupInputClassName = 'rounded bg-surface p-2 text-content';
+const editInputClassName =
+  'w-full rounded border border-secondary-200 bg-secondary-50 p-2 text-lg font-medium text-content focus:outline-none focus:ring-2 focus:ring-secondary-400 dark:border-secondary-700 dark:bg-secondary-900/20 dark:focus:ring-secondary-500';
+
 export default function DocumentPage() {
   const { id } = useParams<{ id: string }>();
   const queryClient = useQueryClient();
@@ -35,18 +41,16 @@ export default function DocumentPage() {
   const [isEditingDescription, setIsEditingDescription] = useState(false);
   const [showTimeReadInfo, setShowTimeReadInfo] = useState(false);
 
-  // Edit values - initialized after document is loaded
   const [editTitle, setEditTitle] = useState('');
   const [editAuthor, setEditAuthor] = useState('');
   const [editDescription, setEditDescription] = useState('');
 
   if (docLoading) {
-    return <div className="text-gray-500 dark:text-white">Loading...</div>;
+    return <div className="text-content-muted">Loading...</div>;
   }
 
-  // Check for successful response (status 200)
   if (!docData || docData.status !== 200) {
-    return <div className="text-gray-500 dark:text-white">Document not found</div>;
+    return <div className="text-content-muted">Document not found</div>;
   }
 
   const document = docData.data.document as Document;
@@ -54,7 +58,7 @@ export default function DocumentPage() {
     docData?.status === 200 ? (docData.data.progress as Progress | undefined) : undefined;
 
   if (!document) {
-    return <div className="text-gray-500 dark:text-white">Document not found</div>;
+    return <div className="text-content-muted">Document not found</div>;
   }
 
   const percentage =
@@ -62,24 +66,18 @@ export default function DocumentPage() {
   const secondsPerPercent = document.seconds_per_percent || 0;
   const totalTimeLeftSeconds = Math.round((100 - percentage) * secondsPerPercent);
 
-  // Helper to start editing
   const startEditing = (field: 'title' | 'author' | 'description') => {
     if (field === 'title') setEditTitle(document.title);
     if (field === 'author') setEditAuthor(document.author);
     if (field === 'description') setEditDescription(document.description || '');
   };
 
-  // Save edit handlers
   const saveTitle = () => {
     editMutation.mutate(
-      {
-        id: document.id,
-        data: { title: editTitle },
-      },
+      { id: document.id, data: { title: editTitle } },
       {
         onSuccess: response => {
           setIsEditingTitle(false);
-          // Update cache with the response data (no refetch needed)
           queryClient.setQueryData(getGetDocumentQueryKey(document.id), response);
         },
         onError: () => setIsEditingTitle(false),
@@ -89,14 +87,10 @@ export default function DocumentPage() {
 
   const saveAuthor = () => {
     editMutation.mutate(
-      {
-        id: document.id,
-        data: { author: editAuthor },
-      },
+      { id: document.id, data: { author: editAuthor } },
       {
         onSuccess: response => {
           setIsEditingAuthor(false);
-          // Update cache with the response data (no refetch needed)
           queryClient.setQueryData(getGetDocumentQueryKey(document.id), response);
         },
         onError: () => setIsEditingAuthor(false),
@@ -106,14 +100,10 @@ export default function DocumentPage() {
 
   const saveDescription = () => {
     editMutation.mutate(
-      {
-        id: document.id,
-        data: { description: editDescription },
-      },
+      { id: document.id, data: { description: editDescription } },
       {
         onSuccess: response => {
           setIsEditingDescription(false);
-          // Update cache with the response data (no refetch needed)
           queryClient.setQueryData(getGetDocumentQueryKey(document.id), response);
         },
         onError: () => setIsEditingDescription(false),
@@ -123,10 +113,8 @@ export default function DocumentPage() {
 
   return (
     <div className="relative size-full">
-      <div className="size-full overflow-scroll rounded bg-white p-4 shadow-lg dark:bg-gray-700 dark:text-white">
-        {/* Document Info - Left Column */}
+      <div className="size-full overflow-scroll rounded bg-surface p-4 text-content shadow-lg">
         <div className="relative float-left mb-2 mr-4 flex w-44 flex-col gap-2 md:w-60 lg:w-80">
-          {/* Cover Image with Edit Label */}
           <label className="z-10 cursor-pointer" htmlFor="edit-cover-checkbox">
             <img
               className="w-full rounded object-fill"
@@ -135,31 +123,27 @@ export default function DocumentPage() {
             />
           </label>
 
-          {/* Read Button - Only if file exists */}
           {document.filepath && (
             <a
               href={`/reader#id=${document.id}&type=REMOTE`}
-              className="z-10 mt-2 w-full rounded bg-blue-700 py-1 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700"
+              className="z-10 mt-2 w-full rounded bg-secondary-700 py-1 text-center text-sm font-medium text-white hover:bg-secondary-800 focus:outline-none focus:ring-4 focus:ring-secondary-300 dark:bg-secondary-600 dark:hover:bg-secondary-700"
             >
               Read
             </a>
           )}
 
-          {/* Action Buttons Container */}
           <div className="relative z-20 flex flex-wrap-reverse justify-between gap-2">
-            {/* ISBN Info */}
             <div className="min-w-[50%] md:mr-2">
               <div className="flex gap-1 text-sm">
-                <p className="text-gray-500">ISBN-10:</p>
+                <p className="text-content-muted">ISBN-10:</p>
                 <p className="font-medium">{document.isbn10 || 'N/A'}</p>
               </div>
               <div className="flex gap-1 text-sm">
-                <p className="text-gray-500">ISBN-13:</p>
+                <p className="text-content-muted">ISBN-13:</p>
                 <p className="font-medium">{document.isbn13 || 'N/A'}</p>
               </div>
             </div>
 
-            {/* Edit Cover Dropdown */}
             <div className="relative">
               <input
                 type="checkbox"
@@ -169,35 +153,24 @@ export default function DocumentPage() {
                 onChange={e => setShowEditCover(e.target.checked)}
               />
               <div
-                className={`absolute left-0 top-0 z-30 flex flex-col gap-2 rounded bg-gray-200 p-3 shadow-lg transition-all duration-200 dark:bg-gray-600 ${
+                className={`absolute left-0 top-0 z-30 flex flex-col gap-2 ${popupClassName} ${
                   showEditCover ? 'opacity-100' : 'pointer-events-none opacity-0'
                 }`}
               >
-                <form className="flex w-72 flex-col gap-2 text-sm text-black dark:text-white">
-                  <input
-                    type="file"
-                    id="cover_file"
-                    name="cover_file"
-                    className="bg-gray-300 p-2"
-                  />
+                <form className="flex w-72 flex-col gap-2 text-sm">
+                  <input type="file" id="cover_file" name="cover_file" className={popupInputClassName} />
                   <button
                     type="submit"
-                    className="rounded bg-blue-700 px-2 py-1 text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600"
+                    className="rounded bg-secondary-700 px-2 py-1 text-sm font-medium text-white hover:bg-secondary-800 dark:bg-secondary-600"
                   >
                     Upload Cover
                   </button>
                 </form>
-                <form className="flex w-72 flex-col gap-2 text-sm text-black dark:text-white">
-                  <input
-                    type="checkbox"
-                    checked
-                    id="remove_cover"
-                    name="remove_cover"
-                    className="hidden"
-                  />
+                <form className="flex w-72 flex-col gap-2 text-sm">
+                  <input type="checkbox" checked id="remove_cover" name="remove_cover" className="hidden" />
                   <button
                     type="submit"
-                    className="rounded bg-blue-700 px-2 py-1 text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600"
+                    className="rounded bg-secondary-700 px-2 py-1 text-sm font-medium text-white hover:bg-secondary-800 dark:bg-secondary-600"
                   >
                     Remove Cover
                   </button>
@@ -205,24 +178,22 @@ export default function DocumentPage() {
               </div>
             </div>
 
-            {/* Icons Container */}
-            <div className="relative my-auto flex grow justify-between text-gray-500 dark:text-gray-500">
-              {/* Delete Button */}
+            <div className="relative my-auto flex grow justify-between text-content-muted">
               <div className="relative">
                 <button
                   type="button"
                   onClick={() => setShowDelete(!showDelete)}
-                  className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
+                  className={iconButtonClassName}
                   aria-label="Delete"
                 >
                   <DeleteIcon size={28} />
                 </button>
                 <div
-                  className={`absolute bottom-7 left-5 z-30 rounded bg-gray-200 p-3 shadow-lg transition-all duration-200 dark:bg-gray-600 ${
+                  className={`absolute bottom-7 left-5 z-30 ${popupClassName} ${
                     showDelete ? 'opacity-100' : 'pointer-events-none opacity-0'
                   }`}
                 >
-                  <form className="w-24 text-sm text-black dark:text-white">
+                  <form className="w-24 text-sm">
                     <button
                       type="submit"
                       className="rounded bg-red-600 px-2 py-1 text-sm font-medium text-white hover:bg-red-700"
@@ -233,38 +204,36 @@ export default function DocumentPage() {
                 </div>
               </div>
 
-              {/* Activity Button */}
               <a
                 href={`/activity?document=${document.id}`}
                 aria-label="Activity"
-                className="hover:text-gray-800 dark:hover:text-gray-100"
+                className={iconButtonClassName}
               >
                 <ActivityIcon size={28} />
               </a>
 
-              {/* Identify/Search Button */}
               <div className="relative">
                 <button
                   type="button"
                   onClick={() => setShowIdentify(!showIdentify)}
                   aria-label="Identify"
-                  className="hover:text-gray-800 dark:hover:text-gray-100"
+                  className={iconButtonClassName}
                 >
                   <SearchIcon size={28} />
                 </button>
                 <div
-                  className={`absolute bottom-7 left-5 z-30 rounded bg-gray-200 p-3 shadow-lg transition-all duration-200 dark:bg-gray-600 ${
+                  className={`absolute bottom-7 left-5 z-30 ${popupClassName} ${
                     showIdentify ? 'opacity-100' : 'pointer-events-none opacity-0'
                   }`}
                 >
-                  <form className="flex flex-col gap-2 text-sm text-black dark:text-white">
+                  <form className="flex flex-col gap-2 text-sm">
                     <input
                       type="text"
                       id="title"
                       name="title"
                       placeholder="Title"
                       defaultValue={document.title}
-                      className="rounded bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
+                      className={popupInputClassName}
                     />
                     <input
                       type="text"
@@ -272,7 +241,7 @@ export default function DocumentPage() {
                       name="author"
                       placeholder="Author"
                       defaultValue={document.author}
-                      className="rounded bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
+                      className={popupInputClassName}
                     />
                     <input
                       type="text"
@@ -280,11 +249,11 @@ export default function DocumentPage() {
                       name="isbn"
                       placeholder="ISBN 10 / ISBN 13"
                       defaultValue={document.isbn13 || document.isbn10}
-                      className="rounded bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
+                      className={popupInputClassName}
                     />
                     <button
                       type="submit"
-                      className="rounded bg-blue-700 px-2 py-1 text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600"
+                      className="rounded bg-secondary-700 px-2 py-1 text-sm font-medium text-white hover:bg-secondary-800 dark:bg-secondary-600"
                     >
                       Identify
                     </button>
@@ -292,17 +261,16 @@ export default function DocumentPage() {
                 </div>
               </div>
 
-              {/* Download Button */}
               {document.filepath ? (
                 <a
                   href={`/api/v1/documents/${document.id}/file`}
                   aria-label="Download"
-                  className="hover:text-gray-800 dark:hover:text-gray-100"
+                  className={iconButtonClassName}
                 >
                   <DownloadIcon size={28} />
                 </a>
               ) : (
-                <span className="text-gray-200 dark:text-gray-600">
+                <span className="text-content-subtle">
                   <DownloadIcon size={28} disabled />
                 </span>
               )}
@@ -310,9 +278,7 @@ export default function DocumentPage() {
           </div>
         </div>
 
-        {/* Document Details Grid */}
         <div className="grid justify-between gap-4 pb-4 sm:grid-cols-2">
-          {/* Title - Editable */}
           <Field
             isEditing={isEditingTitle}
             label={
@@ -321,20 +287,10 @@ export default function DocumentPage() {
                 <FieldActions>
                   {isEditingTitle ? (
                     <div className="flex gap-1">
-                      <button
-                        type="button"
-                        onClick={() => setIsEditingTitle(false)}
-                        className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
-                        aria-label="Cancel edit"
-                      >
+                      <button type="button" onClick={() => setIsEditingTitle(false)} className={iconButtonClassName} aria-label="Cancel edit">
                         <CloseIcon size={18} />
                       </button>
-                      <button
-                        type="button"
-                        onClick={saveTitle}
-                        className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
-                        aria-label="Confirm edit"
-                      >
+                      <button type="button" onClick={saveTitle} className={iconButtonClassName} aria-label="Confirm edit">
                         <CheckIcon size={18} />
                       </button>
                     </div>
@@ -345,7 +301,7 @@ export default function DocumentPage() {
                         startEditing('title');
                         setIsEditingTitle(true);
                       }}
-                      className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
+                      className={iconButtonClassName}
                       aria-label="Edit title"
                     >
                       <EditIcon size={18} />
@@ -357,19 +313,13 @@ export default function DocumentPage() {
           >
             {isEditingTitle ? (
               <div className="relative mt-1 flex gap-2">
-                <input
-                  type="text"
-                  value={editTitle}
-                  onChange={e => setEditTitle(e.target.value)}
-                  className="w-full rounded border border-blue-200 bg-blue-50 p-2 text-lg font-medium text-black focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-blue-700 dark:bg-blue-900/20 dark:text-white dark:focus:ring-blue-500"
-                />
+                <input type="text" value={editTitle} onChange={e => setEditTitle(e.target.value)} className={editInputClassName} />
               </div>
             ) : (
               <FieldValue>{document.title}</FieldValue>
             )}
           </Field>
 
-          {/* Author - Editable */}
           <Field
             isEditing={isEditingAuthor}
             label={
@@ -378,20 +328,10 @@ export default function DocumentPage() {
                 <FieldActions>
                   {isEditingAuthor ? (
                     <>
-                      <button
-                        type="button"
-                        onClick={() => setIsEditingAuthor(false)}
-                        className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
-                        aria-label="Cancel edit"
-                      >
+                      <button type="button" onClick={() => setIsEditingAuthor(false)} className={iconButtonClassName} aria-label="Cancel edit">
                         <CloseIcon size={18} />
                       </button>
-                      <button
-                        type="button"
-                        onClick={saveAuthor}
-                        className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
-                        aria-label="Confirm edit"
-                      >
+                      <button type="button" onClick={saveAuthor} className={iconButtonClassName} aria-label="Confirm edit">
                         <CheckIcon size={18} />
                       </button>
                     </>
@@ -402,7 +342,7 @@ export default function DocumentPage() {
                         startEditing('author');
                         setIsEditingAuthor(true);
                       }}
-                      className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
+                      className={iconButtonClassName}
                       aria-label="Edit author"
                     >
                       <EditIcon size={18} />
@@ -414,19 +354,13 @@ export default function DocumentPage() {
           >
             {isEditingAuthor ? (
               <div className="relative mt-1 flex gap-2">
-                <input
-                  type="text"
-                  value={editAuthor}
-                  onChange={e => setEditAuthor(e.target.value)}
-                  className="w-full rounded border border-blue-200 bg-blue-50 p-2 text-lg font-medium text-black focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-blue-700 dark:bg-blue-900/20 dark:text-white dark:focus:ring-blue-500"
-                />
+                <input type="text" value={editAuthor} onChange={e => setEditAuthor(e.target.value)} className={editInputClassName} />
               </div>
             ) : (
               <FieldValue>{document.author}</FieldValue>
             )}
           </Field>
 
-          {/* Time Read with Info Dropdown */}
           <Field
             label={
               <>
@@ -434,31 +368,27 @@ export default function DocumentPage() {
                 <button
                   type="button"
                   onClick={() => setShowTimeReadInfo(!showTimeReadInfo)}
-                  className="my-auto cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
+                  className={`${iconButtonClassName} my-auto`}
                   aria-label="Show time read info"
                 >
                   <InfoIcon size={18} />
                 </button>
                 <div
-                  className={`absolute right-0 top-7 z-30 rounded bg-gray-200 p-3 shadow-lg transition-all duration-200 dark:bg-gray-600 ${
+                  className={`absolute right-0 top-7 z-30 ${popupClassName} ${
                     showTimeReadInfo ? 'opacity-100' : 'pointer-events-none opacity-0'
                   }`}
                 >
                   <div className="flex text-xs">
-                    <p className="w-32 text-gray-400">Seconds / Percent</p>
-                    <p className="font-medium dark:text-white">
-                      {secondsPerPercent !== 0 ? secondsPerPercent : 'N/A'}
-                    </p>
+                    <p className="w-32 text-content-subtle">Seconds / Percent</p>
+                    <p className="font-medium">{secondsPerPercent !== 0 ? secondsPerPercent : 'N/A'}</p>
                   </div>
                   <div className="flex text-xs">
-                    <p className="w-32 text-gray-400">Words / Minute</p>
-                    <p className="font-medium dark:text-white">
-                      {document.wpm && document.wpm > 0 ? document.wpm : 'N/A'}
-                    </p>
+                    <p className="w-32 text-content-subtle">Words / Minute</p>
+                    <p className="font-medium">{document.wpm && document.wpm > 0 ? document.wpm : 'N/A'}</p>
                   </div>
                   <div className="flex text-xs">
-                    <p className="w-32 text-gray-400">Est. Time Left</p>
-                    <p className="whitespace-nowrap font-medium dark:text-white">
+                    <p className="w-32 text-content-subtle">Est. Time Left</p>
+                    <p className="whitespace-nowrap font-medium">
                       {totalTimeLeftSeconds > 0 ? formatDuration(totalTimeLeftSeconds) : 'N/A'}
                     </p>
                   </div>
@@ -473,13 +403,11 @@ export default function DocumentPage() {
             </FieldValue>
           </Field>
 
-          {/* Progress */}
           <Field label={<FieldLabel>Progress</FieldLabel>}>
             <FieldValue>{`${percentage.toFixed(2)}%`}</FieldValue>
           </Field>
         </div>
 
-        {/* Description - Editable */}
         <Field
           isEditing={isEditingDescription}
           label={
@@ -488,20 +416,10 @@ export default function DocumentPage() {
               <FieldActions>
                 {isEditingDescription ? (
                   <>
-                    <button
-                      type="button"
-                      onClick={() => setIsEditingDescription(false)}
-                      className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
-                      aria-label="Cancel edit"
-                    >
+                    <button type="button" onClick={() => setIsEditingDescription(false)} className={iconButtonClassName} aria-label="Cancel edit">
                       <CloseIcon size={18} />
                     </button>
-                    <button
-                      type="button"
-                      onClick={saveDescription}
-                      className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
-                      aria-label="Confirm edit"
-                    >
+                    <button type="button" onClick={saveDescription} className={iconButtonClassName} aria-label="Confirm edit">
                       <CheckIcon size={18} />
                     </button>
                   </>
@@ -512,7 +430,7 @@ export default function DocumentPage() {
                       startEditing('description');
                       setIsEditingDescription(true);
                     }}
-                    className="cursor-pointer hover:text-gray-800 dark:hover:text-gray-100"
+                    className={iconButtonClassName}
                     aria-label="Edit description"
                   >
                     <EditIcon size={18} />
@@ -527,14 +445,12 @@ export default function DocumentPage() {
               <textarea
                 value={editDescription}
                 onChange={e => setEditDescription(e.target.value)}
-                className="h-32 w-full grow rounded border border-blue-200 bg-blue-50 p-2 font-medium text-black focus:outline-none focus:ring-2 focus:ring-blue-400 dark:border-blue-700 dark:bg-blue-900/20 dark:text-white dark:focus:ring-blue-500"
+                className="h-32 w-full grow rounded border border-secondary-200 bg-secondary-50 p-2 font-medium text-content focus:outline-none focus:ring-2 focus:ring-secondary-400 dark:border-secondary-700 dark:bg-secondary-900/20 dark:focus:ring-secondary-500"
                 rows={5}
               />
             </div>
           ) : (
-            <FieldValue className="hyphens-auto text-justify">
-              {document.description || 'N/A'}
-            </FieldValue>
+            <FieldValue className="hyphens-auto text-justify">{document.description || 'N/A'}</FieldValue>
           )}
         </Field>
       </div>
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index f2a7e03..25504a7 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -17,29 +17,24 @@ interface InfoCardProps {
 }
 
 function InfoCard({ title, size, link }: InfoCardProps) {
+  const content = (
+    <div className="flex w-full gap-4 rounded bg-surface p-4 shadow-lg">
+      <div className="flex w-full flex-col justify-around text-sm text-content">
+        <p className="text-2xl font-bold">{size}</p>
+        <p className="text-sm text-content-subtle">{title}</p>
+      </div>
+    </div>
+  );
+
   if (link) {
     return (
       <Link to={link} className="w-full">
-        <div className="flex w-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
-          <div className="flex w-full flex-col justify-around text-sm dark:text-white">
-            <p className="text-2xl font-bold text-black dark:text-white">{size}</p>
-            <p className="text-sm text-gray-400">{title}</p>
-          </div>
-        </div>
+        {content}
       </Link>
     );
   }
 
-  return (
-    <div className="w-full">
-      <div className="flex w-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
-        <div className="flex w-full flex-col justify-around text-sm dark:text-white">
-          <p className="text-2xl font-bold text-black dark:text-white">{size}</p>
-          <p className="text-sm text-gray-400">{title}</p>
-        </div>
-      </div>
-    </div>
-  );
+  return <div className="w-full">{content}</div>;
 }
 
 interface StreakCardProps {
@@ -63,18 +58,18 @@ function StreakCard({
 }: StreakCardProps) {
   return (
     <div className="w-full">
-      <div className="relative w-full rounded bg-white px-4 py-6 shadow-lg dark:bg-gray-700">
-        <p className="w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
+      <div className="relative w-full rounded bg-surface px-4 py-6 text-content shadow-lg">
+        <p className="w-max border-b border-border text-sm font-semibold text-content-muted">
           {window === 'WEEK' ? 'Weekly Read Streak' : 'Daily Read Streak'}
         </p>
         <div className="my-6 flex items-end space-x-2">
-          <p className="text-5xl font-bold text-black dark:text-white">{currentStreak}</p>
+          <p className="text-5xl font-bold">{currentStreak}</p>
         </div>
-        <div className="dark:text-white">
-          <div className="mb-2 flex items-center justify-between border-b border-gray-200 pb-2 text-sm">
+        <div>
+          <div className="mb-2 flex items-center justify-between border-b border-border pb-2 text-sm">
             <div>
               <p>{window === 'WEEK' ? 'Current Weekly Streak' : 'Current Daily Streak'}</p>
-              <div className="flex items-end text-sm text-gray-400">
+              <div className="flex items-end text-sm text-content-subtle">
                 {currentStreakStartDate} ➞ {currentStreakEndDate}
               </div>
             </div>
@@ -83,7 +78,7 @@ function StreakCard({
           <div className="mb-2 flex items-center justify-between pb-2 text-sm">
             <div>
               <p>{window === 'WEEK' ? 'Best Weekly Streak' : 'Best Daily Streak'}</p>
-              <div className="flex items-end text-sm text-gray-400">
+              <div className="flex items-end text-sm text-content-subtle">
                 {maxStreakStartDate} ➞ {maxStreakEndDate}
               </div>
             </div>
@@ -120,67 +115,47 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
 
   const currentData = data[selectedPeriod];
 
-  const handlePeriodChange = (period: TimePeriod) => {
-    setSelectedPeriod(period);
-  };
+  const getPeriodClassName = (period: TimePeriod) =>
+    `cursor-pointer ${selectedPeriod === period ? 'text-content' : 'text-content-subtle hover:text-content'}`;
 
   return (
     <div className="w-full">
-      <div className="flex size-full flex-col justify-between rounded bg-white px-4 py-6 shadow-lg dark:bg-gray-700">
+      <div className="flex size-full flex-col justify-between rounded bg-surface px-4 py-6 text-content shadow-lg">
         <div>
           <div className="flex justify-between">
-            <p className="w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
+            <p className="w-max border-b border-border text-sm font-semibold text-content-muted">
               {name} Leaderboard
             </p>
-            <div className="flex items-center gap-2 text-xs text-gray-400">
-              <button
-                type="button"
-                onClick={() => handlePeriodChange('all')}
-                className={`cursor-pointer hover:text-black dark:hover:text-white ${selectedPeriod === 'all' ? '!text-black dark:!text-white' : ''}`}
-              >
+            <div className="flex items-center gap-2 text-xs">
+              <button type="button" onClick={() => setSelectedPeriod('all')} className={getPeriodClassName('all')}>
                 all
               </button>
-              <button
-                type="button"
-                onClick={() => handlePeriodChange('year')}
-                className={`cursor-pointer hover:text-black dark:hover:text-white ${selectedPeriod === 'year' ? '!text-black dark:!text-white' : ''}`}
-              >
+              <button type="button" onClick={() => setSelectedPeriod('year')} className={getPeriodClassName('year')}>
                 year
               </button>
-              <button
-                type="button"
-                onClick={() => handlePeriodChange('month')}
-                className={`cursor-pointer hover:text-black dark:hover:text-white ${selectedPeriod === 'month' ? '!text-black dark:!text-white' : ''}`}
-              >
+              <button type="button" onClick={() => setSelectedPeriod('month')} className={getPeriodClassName('month')}>
                 month
               </button>
-              <button
-                type="button"
-                onClick={() => handlePeriodChange('week')}
-                className={`cursor-pointer hover:text-black dark:hover:text-white ${selectedPeriod === 'week' ? '!text-black dark:!text-white' : ''}`}
-              >
+              <button type="button" onClick={() => setSelectedPeriod('week')} className={getPeriodClassName('week')}>
                 week
               </button>
             </div>
           </div>
         </div>
 
-        {/* Current period data */}
         <div className="my-6 flex items-end space-x-2">
           {currentData?.length === 0 ? (
-            <p className="text-5xl font-bold text-black dark:text-white">N/A</p>
+            <p className="text-5xl font-bold">N/A</p>
           ) : (
-            <p className="text-5xl font-bold text-black dark:text-white">
-              {currentData[0]?.user_id || 'N/A'}
-            </p>
+            <p className="text-5xl font-bold">{currentData[0]?.user_id || 'N/A'}</p>
           )}
         </div>
 
-        <div className="dark:text-white">
+        <div>
           {currentData?.slice(0, 3).map((item: LeaderboardEntry, index: number) => (
             <div
               key={index}
-              className={`flex items-center justify-between py-2 text-sm ${index > 0 ? 'border-t border-gray-200' : ''}`}
+              className={`flex items-center justify-between py-2 text-sm ${index > 0 ? 'border-t border-border' : ''}`}
             >
               <div>
                 <p>{item.user_id}</p>
@@ -204,22 +179,20 @@ export default function HomePage() {
   const userStats = homeResponse?.user_statistics;
 
   if (homeLoading) {
-    return <div className="text-gray-500 dark:text-white">Loading...</div>;
+    return <div className="text-content-muted">Loading...</div>;
   }
 
   return (
     <div className="flex flex-col gap-4">
-      {/* Daily Read Totals Graph */}
       <div className="w-full">
-        <div className="relative w-full rounded bg-white shadow-lg dark:bg-gray-700">
-          <p className="absolute left-5 top-3 w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
+        <div className="relative w-full rounded bg-surface shadow-lg">
+          <p className="absolute left-5 top-3 w-max border-b border-border text-sm font-semibold text-content-muted">
             Daily Read Totals
           </p>
           <ReadingHistoryGraph data={graphData || []} />
         </div>
       </div>
 
-      {/* Info Cards */}
       <div className="grid grid-cols-2 gap-4 md:grid-cols-4">
         <InfoCard title="Documents" size={dbInfo?.documents_size || 0} link="./documents" />
         <InfoCard title="Activity Records" size={dbInfo?.activity_size || 0} link="./activity" />
@@ -227,7 +200,6 @@ export default function HomePage() {
         <InfoCard title="Devices" size={dbInfo?.devices_size || 0} />
       </div>
 
-      {/* Streak Cards */}
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
         {streaks?.map((streak: UserStreak, index: number) => (
           <StreakCard
@@ -243,7 +215,6 @@ export default function HomePage() {
         ))}
       </div>
 
-      {/* Leaderboard Cards */}
       <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
         <LeaderboardCard
           name="WPM"
diff --git a/frontend/src/pages/ProgressPage.tsx b/frontend/src/pages/ProgressPage.tsx
index e1b7c77..f43de30 100644
--- a/frontend/src/pages/ProgressPage.tsx
+++ b/frontend/src/pages/ProgressPage.tsx
@@ -12,10 +12,7 @@ export default function ProgressPage() {
       key: 'document_id' as const,
       header: 'Document',
       render: (_value, row) => (
-        <Link
-          to={`/documents/${row.document_id}`}
-          className="text-blue-600 hover:underline dark:text-blue-400"
-        >
+        <Link to={`/documents/${row.document_id}`} className="text-secondary-600 hover:underline">
           {row.author || 'Unknown'} - {row.title || 'Unknown'}
         </Link>
       ),
diff --git a/frontend/src/pages/RegisterPage.tsx b/frontend/src/pages/RegisterPage.tsx
index 6f5f4ab..5e1df16 100644
--- a/frontend/src/pages/RegisterPage.tsx
+++ b/frontend/src/pages/RegisterPage.tsx
@@ -49,7 +49,7 @@ export default function RegisterPage() {
   };
 
   return (
-    <div className="min-h-screen bg-gray-100 dark:bg-gray-800 dark:text-white">
+    <div className="min-h-screen bg-canvas text-content">
       <div className="flex w-full flex-wrap">
         <div className="flex w-full flex-col md:w-1/2">
           <div className="my-auto flex flex-col justify-center px-8 pt-8 md:justify-start md:px-24 md:pt-0 lg:px-32">
@@ -61,7 +61,7 @@ export default function RegisterPage() {
                     type="text"
                     value={username}
                     onChange={e => setUsername(e.target.value)}
-                    className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
+                    className="w-full flex-1 appearance-none rounded-none border border-border bg-surface px-4 py-2 text-base text-content shadow-sm placeholder:text-content-subtle focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600"
                     placeholder="Username"
                     required
                     disabled={isLoading || isLoadingInfo || !registrationEnabled}
@@ -74,7 +74,7 @@ export default function RegisterPage() {
                     type="password"
                     value={password}
                     onChange={e => setPassword(e.target.value)}
-                    className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
+                    className="w-full flex-1 appearance-none rounded-none border border-border bg-surface px-4 py-2 text-base text-content shadow-sm placeholder:text-content-subtle focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600"
                     placeholder="Password"
                     required
                     disabled={isLoading || isLoadingInfo || !registrationEnabled}
@@ -106,8 +106,8 @@ export default function RegisterPage() {
           </div>
         </div>
         <div className="relative hidden h-screen w-1/2 shadow-2xl md:block">
-          <div className="left-0 top-0 flex h-screen w-full items-center justify-center bg-gray-300 object-cover ease-in-out">
-            <span className="text-gray-500">AnthoLume</span>
+          <div className="left-0 top-0 flex h-screen w-full items-center justify-center bg-surface-strong object-cover ease-in-out">
+            <span className="text-content-muted">AnthoLume</span>
           </div>
         </div>
       </div>
diff --git a/frontend/src/pages/SearchPage.tsx b/frontend/src/pages/SearchPage.tsx
index 9f95347..ade7f0a 100644
--- a/frontend/src/pages/SearchPage.tsx
+++ b/frontend/src/pages/SearchPage.tsx
@@ -49,30 +49,30 @@ export function SearchPageView({
   return (
     <div className="flex w-full flex-col gap-4 md:flex-row">
       <div className="flex grow flex-col gap-4">
-        <div className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white">
+        <div className="flex grow flex-col gap-2 rounded bg-surface p-4 text-content-muted shadow-lg">
           <form className="flex flex-col gap-4 lg:flex-row" onSubmit={onSubmit}>
             <div className="flex w-full grow flex-col">
               <div className="relative flex">
-                <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
+                <span className="inline-flex items-center border-y border-l border-border bg-surface px-3 text-sm text-content-muted shadow-sm">
                   <Search2Icon size={15} hoverable={false} />
                 </span>
                 <input
                   type="text"
                   value={query}
                   onChange={e => onQueryChange(e.target.value)}
-                  className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
+                  className="w-full flex-1 appearance-none rounded-none border border-border bg-surface px-4 py-2 text-base text-content shadow-sm placeholder:text-content-subtle focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600"
                   placeholder="Query"
                 />
               </div>
             </div>
             <div className="relative flex min-w-[12em]">
-              <span className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm">
+              <span className="inline-flex items-center border-y border-l border-border bg-surface px-3 text-sm text-content-muted shadow-sm">
                 <BookIcon size={15} />
               </span>
               <select
                 value={source}
                 onChange={e => onSourceChange(e.target.value as GetSearchSource)}
-                className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
+                className="w-full flex-1 appearance-none rounded-none border border-border bg-surface px-4 py-2 text-base text-content shadow-sm placeholder:text-content-subtle focus:border-transparent focus:outline-none focus:ring-2 focus:ring-primary-600"
               >
                 <option value={GetSearchSource.LibGen}>Library Genesis</option>
                 <option value={GetSearchSource.Annas_Archive}>Annas Archive</option>
@@ -87,28 +87,28 @@ export function SearchPageView({
         </div>
 
         <div className="inline-block min-w-full overflow-hidden rounded shadow">
-          <table className="min-w-full bg-white text-sm leading-normal md:text-sm dark:bg-gray-700">
-            <thead className="text-gray-800 dark:text-gray-400">
+          <table className="min-w-full bg-surface text-sm leading-normal text-content md:text-sm">
+            <thead className="text-content-muted">
               <tr>
-                <th className="w-12 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"></th>
-                <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
+                <th className="w-12 border-b border-border p-3 text-left font-normal uppercase"></th>
+                <th className="border-b border-border p-3 text-left font-normal uppercase">
                   Document
                 </th>
-                <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
+                <th className="border-b border-border p-3 text-left font-normal uppercase">
                   Series
                 </th>
-                <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
+                <th className="border-b border-border p-3 text-left font-normal uppercase">
                   Type
                 </th>
-                <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
+                <th className="border-b border-border p-3 text-left font-normal uppercase">
                   Size
                 </th>
-                <th className="hidden border-b border-gray-200 p-3 text-left font-normal uppercase md:block dark:border-gray-800">
+                <th className="hidden border-b border-border p-3 text-left font-normal uppercase md:table-cell">
                   Date
                 </th>
               </tr>
             </thead>
-            <tbody className="text-black dark:text-white">
+            <tbody>
               {isLoading && (
                 <tr>
                   <td className="p-3 text-center" colSpan={6}>
@@ -126,24 +126,24 @@ export function SearchPageView({
               {!isLoading &&
                 results.map(item => (
                   <tr key={item.id}>
-                    <td className="border-b border-gray-200 p-3 text-gray-500 dark:text-gray-500">
-                      <button className="hover:text-purple-600" title="Download">
+                    <td className="border-b border-border p-3 text-content-muted">
+                      <button className="hover:text-primary-600" title="Download">
                         <DownloadIcon size={15} />
                       </button>
                     </td>
-                    <td className="border-b border-gray-200 p-3">
+                    <td className="border-b border-border p-3">
                       {item.author || 'N/A'} - {item.title || 'N/A'}
                     </td>
-                    <td className="border-b border-gray-200 p-3">
+                    <td className="border-b border-border p-3">
                       <p>{item.series || 'N/A'}</p>
                     </td>
-                    <td className="border-b border-gray-200 p-3">
+                    <td className="border-b border-border p-3">
                       <p>{item.file_type || 'N/A'}</p>
                     </td>
-                    <td className="border-b border-gray-200 p-3">
+                    <td className="border-b border-border p-3">
                       <p>{item.file_size || 'N/A'}</p>
                     </td>
-                    <td className="hidden border-b border-gray-200 p-3 md:table-cell">
+                    <td className="hidden border-b border-border p-3 md:table-cell">
                       <p>{item.upload_date || 'N/A'}</p>
                     </td>
                   </tr>
@@ -172,7 +172,7 @@ export default function SearchPage() {
       query: {
         enabled: activeQuery.trim().length > 0,
       },
-    },
+    }
   );
   const results = getSearchResults(data);
 
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
index ef2493d..4109d6f 100644
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -74,42 +74,42 @@ export default function SettingsPage() {
       <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 shadow-lg md:w-60 lg:w-80">
-            <div className="mb-4 size-16 rounded-full bg-gray-200 dark:bg-gray-600" />
-            <div className="h-6 w-32 rounded bg-gray-200 dark:bg-gray-600" />
+            <div className="mb-4 size-16 rounded-full bg-surface-strong" />
+            <div className="h-6 w-32 rounded bg-surface-strong" />
           </div>
         </div>
         <div className="flex grow flex-col gap-4">
           <div className="flex flex-col gap-2 rounded bg-surface p-4 shadow-lg">
-            <div className="mb-4 h-6 w-48 rounded bg-gray-200 dark:bg-gray-600" />
+            <div className="mb-4 h-6 w-48 rounded bg-surface-strong" />
             <div className="flex gap-4">
-              <div className="h-12 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
-              <div className="h-12 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
-              <div className="h-10 w-40 rounded bg-gray-200 dark:bg-gray-600" />
+              <div className="h-12 flex-1 rounded bg-surface-strong" />
+              <div className="h-12 flex-1 rounded bg-surface-strong" />
+              <div className="h-10 w-40 rounded bg-surface-strong" />
             </div>
           </div>
           <div className="flex flex-col gap-2 rounded bg-surface p-4 shadow-lg">
-            <div className="mb-4 h-6 w-48 rounded bg-gray-200 dark:bg-gray-600" />
+            <div className="mb-4 h-6 w-48 rounded bg-surface-strong" />
             <div className="flex gap-4">
-              <div className="h-12 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
-              <div className="h-10 w-40 rounded bg-gray-200 dark:bg-gray-600" />
+              <div className="h-12 flex-1 rounded bg-surface-strong" />
+              <div className="h-10 w-40 rounded bg-surface-strong" />
             </div>
           </div>
           <div className="flex flex-col gap-2 rounded bg-surface p-4 shadow-lg">
-            <div className="mb-4 h-6 w-48 rounded bg-gray-200 dark:bg-gray-600" />
+            <div className="mb-4 h-6 w-48 rounded bg-surface-strong" />
             <div className="grid gap-3 md:grid-cols-3">
               {themeModes.map(mode => (
-                <div key={mode.value} className="h-24 rounded bg-gray-200 dark:bg-gray-600" />
+                <div key={mode.value} className="h-24 rounded bg-surface-strong" />
               ))}
             </div>
           </div>
           <div className="flex flex-col rounded bg-surface p-4 shadow-lg">
-            <div className="mb-4 h-6 w-24 rounded bg-gray-200 dark:bg-gray-600" />
+            <div className="mb-4 h-6 w-24 rounded bg-surface-strong" />
             <div className="mb-4 flex gap-4">
-              <div className="h-6 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
-              <div className="h-6 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
-              <div className="h-6 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
+              <div className="h-6 flex-1 rounded bg-surface-strong" />
+              <div className="h-6 flex-1 rounded bg-surface-strong" />
+              <div className="h-6 flex-1 rounded bg-surface-strong" />
             </div>
-            <div className="h-32 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
+            <div className="h-32 flex-1 rounded bg-surface-strong" />
           </div>
         </div>
       </div>