diff --git a/frontend/src/app/login/page.tsx b/frontend/src/app/login/page.tsx
index 1b4a8cb..ab5cd9b 100644
--- a/frontend/src/app/login/page.tsx
+++ b/frontend/src/app/login/page.tsx
@@ -31,7 +31,7 @@ export default function LoginPage() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
+    <div className="min-h-screen bg-background flex items-center justify-center">
       <div className="max-w-md w-full space-y-8 p-8">
         <div className="text-center">
           <div className="flex justify-center mb-4">
@@ -43,8 +43,8 @@ export default function LoginPage() {
               className="rounded-lg"
             />
           </div>
-          <h2 className="text-3xl font-bold text-gray-900">LetterFeed</h2>
-          <p className="mt-2 text-gray-600">Sign in to your account</p>
+          <h2 className="text-3xl font-bold text-foreground">LetterFeed</h2>
+          <p className="mt-2 text-muted-foreground">Sign in to your account</p>
         </div>
 
         <Card>
diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx
index fefdd8e..39856ef 100644
--- a/frontend/src/app/page.tsx
+++ b/frontend/src/app/page.tsx
@@ -61,7 +61,7 @@ function LetterFeedApp() {
   }
 
   return (
-    <div className="min-h-screen bg-gray-50">
+    <div className="min-h-screen bg-background">
       <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
         <Header
           onOpenAddNewsletter={() => setIsAddDialogOpen(true)}
diff --git a/frontend/src/components/letterfeed/EmptyState.tsx b/frontend/src/components/letterfeed/EmptyState.tsx
index 1c074bc..d02febb 100644
--- a/frontend/src/components/letterfeed/EmptyState.tsx
+++ b/frontend/src/components/letterfeed/EmptyState.tsx
@@ -8,9 +8,9 @@ interface EmptyStateProps {
 export function EmptyState({ onAddNewsletter }: EmptyStateProps) {
   return (
     <div className="text-center py-12">
-      <Rss className="w-12 h-12 text-gray-400 mx-auto mb-4" />
-      <h3 className="text-lg font-medium text-gray-900 mb-2">No newsletters registered</h3>
-      <p className="text-gray-600 mb-4">Get started by adding your first newsletter</p>
+      <Rss className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
+      <h3 className="text-lg font-medium text-foreground mb-2">No newsletters registered</h3>
+      <p className="text-muted-foreground mb-4">Get started by adding your first newsletter</p>
       <Button onClick={onAddNewsletter}>
         <Plus className="w-4 h-4 mr-2" />
         Add Your First Newsletter
diff --git a/frontend/src/components/letterfeed/Header.tsx b/frontend/src/components/letterfeed/Header.tsx
index 4b0f000..3c908cb 100644
--- a/frontend/src/components/letterfeed/Header.tsx
+++ b/frontend/src/components/letterfeed/Header.tsx
@@ -39,8 +39,8 @@ export function Header({ onOpenAddNewsletter, onOpenSettings }: HeaderProps) {
           className="rounded-lg"
         />
         <div>
-          <h1 className="text-2xl md:text-3xl font-bold text-gray-900">LetterFeed</h1>
-          <p className="text-gray-600 mt-1 hidden md:block">
+          <h1 className="text-2xl md:text-3xl font-bold text-foreground">LetterFeed</h1>
+          <p className="text-muted-foreground mt-1 hidden md:block">
             Newsletters as RSS feeds
           </p>
         </div>
diff --git a/frontend/src/components/letterfeed/LoadingSpinner.tsx b/frontend/src/components/letterfeed/LoadingSpinner.tsx
index ab50f74..2fff48f 100644
--- a/frontend/src/components/letterfeed/LoadingSpinner.tsx
+++ b/frontend/src/components/letterfeed/LoadingSpinner.tsx
@@ -2,8 +2,8 @@ import { Loader2 } from "lucide-react"
 
 export function LoadingSpinner() {
   return (
-    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
-      <Loader2 className="w-12 h-12 text-gray-400 animate-spin" data-testid="loading-spinner" />
+    <div className="min-h-screen bg-background flex items-center justify-center">
+      <Loader2 className="w-12 h-12 text-muted-foreground animate-spin" data-testid="loading-spinner" />
     </div>
   )
 }