diff --git a/attached_assets/image_1746139607782.png b/attached_assets/image_1746139607782.png
new file mode 100644
index 0000000..028f421
Binary files /dev/null and b/attached_assets/image_1746139607782.png differ
diff --git a/client/src/pages/Home.tsx b/client/src/pages/Home.tsx
index c3c6a5c..d36a946 100644
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -30,16 +30,16 @@ export default function Home() {
   return (
     <PageLayout>
       {/* Hero Section */}
-      <section className="bg-navy/10 dark:bg-navy/20 py-16 md:py-24">
+      <section className="bg-primary/10 dark:bg-primary/20 py-16 md:py-24">
         <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6 text-center">
           <div className="max-w-3xl mx-auto mb-8">
-            <h1 className="text-3xl md:text-4xl lg:text-5xl font-serif font-bold text-navy dark:text-cream mb-6">
+            <h1 className="text-3xl md:text-4xl lg:text-5xl font-serif font-bold text-primary dark:text-primary-foreground mb-6">
               Discover the world's literary heritage
             </h1>
-            <p className="text-lg md:text-xl text-ink/80 dark:text-cream/80 italic font-serif mb-2">
+            <p className="text-lg md:text-xl text-foreground/80 dark:text-foreground/80 italic font-serif mb-2">
               "{randomQuote.text}"
             </p>
-            <p className="text-ink/60 dark:text-cream/60">— {randomQuote.author}</p>
+            <p className="text-foreground/60 dark:text-foreground/60">— {randomQuote.author}</p>
           </div>
           
           <SearchBar className="max-w-xl mx-auto" fullWidth />
@@ -50,11 +50,11 @@ export default function Home() {
       <section className="py-12 md:py-16">
         <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
           <div className="flex justify-between items-center mb-8">
-            <h2 className="text-2xl md:text-3xl font-serif font-bold text-navy dark:text-cream">
+            <h2 className="text-2xl md:text-3xl font-serif font-bold text-primary dark:text-primary-foreground">
               Featured Authors
             </h2>
             <Link href="/authors">
-              <Button variant="link" className="text-russet dark:text-russet/90">
+              <Button variant="link" className="text-accent dark:text-accent">
                 View all authors
               </Button>
             </Link>
@@ -63,29 +63,29 @@ export default function Home() {
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
             {authorsLoading ? (
               Array.from({ length: 4 }).map((_, i) => (
-                <Card key={i} className="bg-cream dark:bg-dark-surface">
+                <Card key={i} className="bg-card dark:bg-card">
                   <CardContent className="p-6">
                     <div className="flex items-center gap-4 mb-4">
-                      <div className="w-16 h-16 rounded-full bg-navy/10 dark:bg-navy/20 animate-pulse"></div>
+                      <div className="w-16 h-16 rounded-full bg-primary/10 dark:bg-primary/20 animate-pulse"></div>
                       <div className="flex-1">
-                        <div className="h-5 bg-navy/10 dark:bg-navy/20 rounded-md w-3/4 mb-2 animate-pulse"></div>
-                        <div className="h-4 bg-navy/10 dark:bg-navy/20 rounded-md w-1/2 animate-pulse"></div>
+                        <div className="h-5 bg-primary/10 dark:bg-primary/20 rounded-md w-3/4 mb-2 animate-pulse"></div>
+                        <div className="h-4 bg-primary/10 dark:bg-primary/20 rounded-md w-1/2 animate-pulse"></div>
                       </div>
                     </div>
-                    <div className="h-20 bg-navy/10 dark:bg-navy/20 rounded-md animate-pulse"></div>
+                    <div className="h-20 bg-primary/10 dark:bg-primary/20 rounded-md animate-pulse"></div>
                   </CardContent>
                 </Card>
               ))
             ) : (
               featuredAuthors?.map((author) => (
-                <Card key={author.id} className="bg-cream dark:bg-dark-surface hover:shadow-md transition-shadow">
+                <Card key={author.id} className="bg-card dark:bg-card hover:shadow-md transition-shadow">
                   <CardContent className="p-6">
                     <AuthorChip author={author} size="lg" withLifeDates className="mb-4" />
-                    <p className="text-ink/80 dark:text-cream/80 text-sm line-clamp-4 mb-4">
+                    <p className="text-foreground/80 dark:text-foreground/80 text-sm line-clamp-4 mb-4">
                       {author.biography?.slice(0, 150)}...
                     </p>
                     <Link href={`/authors/${author.slug}`}>
-                      <Button size="sm" variant="outline" className="w-full text-navy dark:text-navy border-navy/50 hover:bg-navy/10">
+                      <Button size="sm" variant="outline" className="w-full text-primary dark:text-primary border-primary/50 hover:bg-primary/10">
                         Explore works
                       </Button>
                     </Link>
@@ -98,14 +98,14 @@ export default function Home() {
       </section>
 
       {/* Trending Works */}
-      <section className="py-12 md:py-16 bg-paper dark:bg-dark-paper">
+      <section className="py-12 md:py-16 bg-muted dark:bg-muted">
         <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
           <div className="flex justify-between items-center mb-8">
-            <h2 className="text-2xl md:text-3xl font-serif font-bold text-navy dark:text-cream">
+            <h2 className="text-2xl md:text-3xl font-serif font-bold text-primary dark:text-primary-foreground">
               Trending Works
             </h2>
             <Link href="/explore">
-              <Button variant="link" className="text-russet dark:text-russet/90">
+              <Button variant="link" className="text-accent dark:text-accent">
                 Explore all works
               </Button>
             </Link>
@@ -114,7 +114,7 @@ export default function Home() {
           <div className="space-y-6">
             {worksLoading ? (
               Array.from({ length: 3 }).map((_, i) => (
-                <div key={i} className="h-40 bg-cream dark:bg-dark-surface rounded-lg animate-pulse"></div>
+                <div key={i} className="h-40 bg-card dark:bg-card rounded-lg animate-pulse"></div>
               ))
             ) : (
               trendingWorks?.map((work) => (
@@ -129,11 +129,11 @@ export default function Home() {
       <section className="py-12 md:py-16">
         <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6">
           <div className="flex justify-between items-center mb-8">
-            <h2 className="text-2xl md:text-3xl font-serif font-bold text-navy dark:text-cream">
+            <h2 className="text-2xl md:text-3xl font-serif font-bold text-primary dark:text-primary-foreground">
               Recently Translated
             </h2>
             <Link href="/explore?sort=recent">
-              <Button variant="link" className="text-russet dark:text-russet/90">
+              <Button variant="link" className="text-accent dark:text-accent">
                 See more
               </Button>
             </Link>
@@ -142,7 +142,7 @@ export default function Home() {
           <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
             {worksLoading ? (
               Array.from({ length: 3 }).map((_, i) => (
-                <div key={i} className="h-64 bg-cream dark:bg-dark-surface rounded-lg animate-pulse"></div>
+                <div key={i} className="h-64 bg-card dark:bg-card rounded-lg animate-pulse"></div>
               ))
             ) : (
               trendingWorks?.map((work) => (
@@ -154,22 +154,22 @@ export default function Home() {
       </section>
 
       {/* Call to Action */}
-      <section className="py-16 md:py-24 bg-navy dark:bg-navy/80 text-cream">
+      <section className="py-16 md:py-24 bg-primary text-primary-foreground">
         <div className="max-w-[var(--content-width)] mx-auto px-4 md:px-6 text-center">
           <h2 className="text-2xl md:text-3xl font-serif font-bold mb-4">
             Contribute to Literary Heritage
           </h2>
-          <p className="text-lg max-w-2xl mx-auto mb-8 text-cream/90">
+          <p className="text-lg max-w-2xl mx-auto mb-8 text-primary-foreground/90">
             Share your translations, engage with other readers, and help preserve and spread literary works across languages.
           </p>
           <div className="flex gap-4 justify-center flex-wrap">
             <Link href="/submit">
-              <Button size="lg" className="bg-russet hover:bg-russet/90 text-white">
+              <Button size="lg" className="bg-accent hover:bg-accent/90 text-accent-foreground">
                 Submit a Translation
               </Button>
             </Link>
             <Link href="/explore">
-              <Button size="lg" variant="outline" className="text-cream border-cream/30">
+              <Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10">
                 Explore the Archive
               </Button>
             </Link>