diff --git a/attached_assets/image_1746138221623.png b/attached_assets/image_1746138221623.png
new file mode 100644
index 0000000..49e9699
Binary files /dev/null and b/attached_assets/image_1746138221623.png differ
diff --git a/attached_assets/screenshot-1746138258154.png b/attached_assets/screenshot-1746138258154.png
new file mode 100644
index 0000000..6e23d58
Binary files /dev/null and b/attached_assets/screenshot-1746138258154.png differ
diff --git a/client/src/components/layout/NavHeader.tsx b/client/src/components/layout/NavHeader.tsx
index cf8f168..30da18f 100644
--- a/client/src/components/layout/NavHeader.tsx
+++ b/client/src/components/layout/NavHeader.tsx
@@ -15,23 +15,23 @@ export function NavHeader() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
   return (
-    <header className="navigation-header border-b border-sage/20 dark:border-sage/10 bg-cream dark:bg-dark-bg sticky top-0 z-10 shadow-sm">
+    <header className="navigation-header border-b border-sage/20 dark:border-sage/10 bg-cream dark:bg-paper sticky top-0 z-10 shadow-sm">
       <div className="flex items-center justify-between px-4 py-3 md:px-6 max-w-[var(--content-width)] mx-auto">
         <div className="flex items-center space-x-4">
-          <Link href="/" className="text-navy dark:text-sage font-serif text-2xl font-semibold tracking-tight">
+          <Link href="/" className="text-navy dark:text-cream font-serif text-2xl font-semibold tracking-tight">
             Tercul
           </Link>
           <nav className="hidden md:flex items-center space-x-6">
-            <Link href="/explore" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/explore" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
               Explore
             </Link>
-            <Link href="/authors" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/authors" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
               Authors
             </Link>
-            <Link href="/collections" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/collections" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
               Collections
             </Link>
-            <Link href="/blog" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/blog" className="text-ink/80 dark:text-cream/80 hover:text-navy dark:hover:text-navy/90 font-sans text-sm font-medium transition-colors">
               Blog
             </Link>
           </nav>
@@ -41,7 +41,7 @@ export function NavHeader() {
             <Button 
               variant="ghost" 
               size="icon"
-              className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10"
+              className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-sage/20 dark:hover:bg-sage/20"
             >
               <Search className="h-5 w-5" />
               <span className="sr-only">Search</span>
@@ -53,7 +53,7 @@ export function NavHeader() {
               <Button 
                 variant="ghost" 
                 size="icon"
-                className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10"
+                className="btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-sage/20 dark:hover:bg-sage/20"
               >
                 {theme === 'dark' ? (
                   <Moon className="h-5 w-5" />
@@ -76,11 +76,11 @@ export function NavHeader() {
             </DropdownMenuContent>
           </DropdownMenu>
           
-          <div className="h-6 w-px bg-sage/20 dark:bg-sage/10 mx-1"></div>
+          <div className="h-6 w-px bg-sage/20 dark:bg-sage/20 mx-1"></div>
           
           <Link href="/profile">
             <Button
-              className="btn-feedback flex items-center space-x-2 py-1 px-3 text-sm font-sans font-medium rounded-full bg-navy/10 dark:bg-cream/10 text-navy dark:text-cream/90 hover:bg-navy/20 dark:hover:bg-cream/20 transition-colors"
+              className="btn-feedback flex items-center space-x-2 py-1 px-3 text-sm font-sans font-medium rounded-full bg-sage/20 dark:bg-sage/20 text-navy dark:text-cream/90 hover:bg-sage/30 dark:hover:bg-sage/30 transition-colors"
             >
               <span>Sign In</span>
             </Button>
@@ -89,7 +89,7 @@ export function NavHeader() {
           <Button 
             variant="ghost" 
             size="icon"
-            className="md:hidden btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-navy/10 dark:hover:bg-cream/10"
+            className="md:hidden btn-feedback p-2 rounded-full text-navy/70 dark:text-cream/70 hover:bg-sage/20 dark:hover:bg-sage/20"
             onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
           >
             <Menu className="h-5 w-5" />
@@ -99,18 +99,18 @@ export function NavHeader() {
       </div>
       
       {mobileMenuOpen && (
-        <div className="md:hidden px-4 py-3 bg-cream dark:bg-dark-bg border-t border-sage/20 dark:border-sage/10">
+        <div className="md:hidden px-4 py-3 bg-cream dark:bg-paper border-t border-sage/20 dark:border-sage/20">
           <nav className="flex flex-col space-y-3">
-            <Link href="/explore" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/explore" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
               Explore
             </Link>
-            <Link href="/authors" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/authors" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
               Authors
             </Link>
-            <Link href="/collections" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/collections" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
               Collections
             </Link>
-            <Link href="/blog" className="text-navy/80 dark:text-cream/80 hover:text-russet dark:hover:text-russet/90 font-sans text-sm font-medium transition-colors">
+            <Link href="/blog" className="text-navy/80 dark:text-cream/80 hover:text-sage dark:hover:text-sage/90 font-sans text-sm font-medium transition-colors">
               Blog
             </Link>
           </nav>
diff --git a/client/src/index.css b/client/src/index.css
index e1d252f..f13b04d 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -5,83 +5,83 @@
 @tailwind utilities;
 
 :root {
-  --background: 48 33% 97%;
-  --foreground: 20 14.3% 4.1%;
+  --background: 180 7% 97%;
+  --foreground: 0 0% 20%;
   
-  --muted: 60 4.8% 95.9%;
-  --muted-foreground: 25 5.3% 44.7%;
+  --muted: 180 7% 94%;
+  --muted-foreground: 0 0% 45%;
   
-  --popover: 48 33% 97%;
-  --popover-foreground: 20 14.3% 4.1%;
+  --popover: 180 7% 97%;
+  --popover-foreground: 0 0% 20%;
   
-  --card: 48 33% 97%;
-  --card-foreground: 20 14.3% 4.1%;
+  --card: 180 7% 97%;
+  --card-foreground: 0 0% 20%;
   
-  --border: 60 6% 83%;
-  --input: 60 6% 83%;
+  --border: 174 10% 80%;
+  --input: 174 10% 80%;
   
-  --primary: 215 40% 23%;
-  --primary-foreground: 211 100% 99%;
+  --primary: 174 40% 24%;
+  --primary-foreground: 0 0% 100%;
   
-  --secondary: 60 4.8% 95.9%;
-  --secondary-foreground: 24 9.8% 10%;
+  --secondary: 180 7% 94%;
+  --secondary-foreground: 0 0% 20%;
   
-  --accent: 5 38% 48%;
-  --accent-foreground: 60 9.1% 97.8%;
+  --accent: 174 30% 40%;
+  --accent-foreground: 0 0% 100%;
   
   --destructive: 0 84.2% 60.2%;
-  --destructive-foreground: 60 9.1% 97.8%;
+  --destructive-foreground: 0 0% 100%;
   
-  --ring: 5 38% 48%;
+  --ring: 174 40% 24%;
   
   --radius: 0.5rem;
   
   /* Custom theme colors */
-  --cream: 48 33% 97%;
-  --navy: 215 40% 23%;
-  --russet: 5 38% 48%;
-  --sage: 145 10% 50%;
-  --ink: 0 0% 10%;
-  --paper: 44 40% 92%;
+  --cream: 180 7% 97%;
+  --navy: 174 40% 24%;
+  --russet: 0 60% 45%;
+  --sage: 174 30% 35%;
+  --ink: 0 0% 20%;
+  --paper: 180 7% 94%;
 }
 
 .dark {
-  --background: 0 0% 7%;
-  --foreground: 0 0% 98%;
+  --background: 174 20% 12%;
+  --foreground: 0 0% 90%;
   
-  --muted: 0 0% 15%;
-  --muted-foreground: 0 0% 64%;
+  --muted: 174 20% 18%;
+  --muted-foreground: 0 0% 70%;
   
-  --popover: 0 0% 12%;
-  --popover-foreground: 0 0% 98%;
+  --popover: 174 20% 14%;
+  --popover-foreground: 0 0% 90%;
   
-  --card: 0 0% 12%;
-  --card-foreground: 0 0% 98%;
+  --card: 174 20% 14%;
+  --card-foreground: 0 0% 90%;
   
-  --border: 0 0% 20%;
-  --input: 0 0% 20%;
+  --border: 174 15% 25%;
+  --input: 174 15% 25%;
   
-  --primary: 215 40% 23%;
-  --primary-foreground: 211 100% 99%;
+  --primary: 174 35% 45%;
+  --primary-foreground: 0 0% 100%;
   
-  --secondary: 0 0% 15%;
-  --secondary-foreground: 0 0% 98%;
+  --secondary: 174 20% 20%;
+  --secondary-foreground: 0 0% 90%;
   
-  --accent: 5 38% 48%;
-  --accent-foreground: 0 0% 98%;
+  --accent: 174 40% 45%;
+  --accent-foreground: 0 0% 100%;
   
   --destructive: 0 62.8% 30.6%;
-  --destructive-foreground: 0 0% 98%;
+  --destructive-foreground: 0 0% 100%;
   
-  --ring: 5 38% 48%;
+  --ring: 174 40% 45%;
   
   /* Custom theme colors */
-  --cream: 0 0% 98%;
-  --navy: 215 40% 60%;
-  --russet: 5 38% 60%;
-  --sage: 145 10% 60%;
+  --cream: 0 0% 90%;
+  --navy: 174 35% 45%;
+  --russet: 0 60% 50%;
+  --sage: 174 30% 40%;
   --ink: 0 0% 90%;
-  --paper: 0 0% 15%;
+  --paper: 174 20% 16%;
 }
 
 /* Content width variables */