From 15cb147c81dc27ace35e4a947c26f11a7c4b9fbe Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 6 Jun 2026 19:24:25 +0700
Subject: [PATCH] fix(spa): redesign remaining pages to light theme

---
 apps/spa/src/components/Navbar.tsx       |  2 +-
 apps/spa/src/pages/AboutPage.tsx         | 26 ++++++++---------
 apps/spa/src/pages/ArticleReaderPage.tsx | 10 +++----
 apps/spa/src/pages/ContactPage.tsx       | 28 +++++++++---------
 apps/spa/src/pages/FaqPage.tsx           | 16 +++++------
 apps/spa/src/pages/NotFoundPage.tsx      | 12 ++++----
 apps/spa/src/pages/ScentGuidePage.tsx    | 12 ++++----
 fix_theme.js                             | 36 ++++++++++++++++++++++++
 8 files changed, 89 insertions(+), 53 deletions(-)
 create mode 100644 fix_theme.js

diff --git a/apps/spa/src/components/Navbar.tsx b/apps/spa/src/components/Navbar.tsx
index 91eab4b..3b08a1d 100644
--- a/apps/spa/src/components/Navbar.tsx
+++ b/apps/spa/src/components/Navbar.tsx
@@ -271,7 +271,7 @@ export default function Navbar({ categories = [] }: NavbarProps) {
 
       {/* ── MOBILE DRAWER ── */}
       <div
-        className={`fixed inset-0 z-40 md:hidden transition-all duration-300 ${mobileOpen ? 'visible' : 'invisible'}`}
+        className={`fixed inset-0 z-[60] md:hidden transition-all duration-300 ${mobileOpen ? 'visible' : 'invisible'}`}
       >
         {/* Backdrop */}
         <div
diff --git a/apps/spa/src/pages/AboutPage.tsx b/apps/spa/src/pages/AboutPage.tsx
index 31bba4e..dac0d69 100644
--- a/apps/spa/src/pages/AboutPage.tsx
+++ b/apps/spa/src/pages/AboutPage.tsx
@@ -47,9 +47,9 @@ export default function AboutPage() {
           style={{ backgroundImage: 'radial-gradient(circle at 30% 50%, rgba(102,252,241,0.3) 0%, transparent 60%), radial-gradient(circle at 80% 20%, rgba(69,162,158,0.2) 0%, transparent 50%)' }}
         />
         <div className="relative z-10 text-center px-6 max-w-3xl mx-auto space-y-6 animate-fade-in">
-          <p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Our Story</p>
+          <p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Our Story</p>
           <h1 className="text-6xl font-bold leading-tight">
-            Born from a passion for <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-glow to-night-700 italic font-serif">stillness</span>
+            Born from a passion for <span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-glow to-spa-stone italic font-serif">stillness</span>
           </h1>
           <p className="text-slate-300 text-lg leading-relaxed">
             HomAroma began in 2019 as a one-person studio in Bangkok, crafting small batches of botanical aroma blends for friends and family. What started as a personal journey toward calm became a philosophy — that our environment shapes how we feel, think, and rest.
@@ -58,11 +58,11 @@ export default function AboutPage() {
       </section>
 
       {/* Stats Band */}
-      <section className="py-12 px-6 bg-white/3 border-y border-white/5">
+      <section className="py-12 px-6 bg-white/3 border-y border-spa-stone/10">
         <div className="max-w-4xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
           {STATS.map(s => (
             <div key={s.label} className="space-y-1">
-              <div className="text-4xl font-bold text-cyan-glow">{s.value}</div>
+              <div className="text-4xl font-bold text-spa-forest">{s.value}</div>
               <div className="text-xs uppercase tracking-widest text-slate-400">{s.label}</div>
             </div>
           ))}
@@ -73,7 +73,7 @@ export default function AboutPage() {
       <section className="py-24 px-6">
         <div className="max-w-6xl mx-auto grid md:grid-cols-2 gap-16 items-center">
           <div className="space-y-6">
-            <p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">Our Mission</p>
+            <p className="text-spa-forest uppercase tracking-[0.3em] text-xs font-semibold opacity-70">Our Mission</p>
             <h2 className="text-4xl font-bold leading-tight">
               Transforming spaces into sanctuaries of peace
             </h2>
@@ -81,10 +81,10 @@ export default function AboutPage() {
               We believe that scent is the fastest pathway to emotional transformation. A single breath of the right blend can dissolve anxiety, sharpen focus, or unlock creativity. Our mission is to make that transformation accessible — through products that are as beautiful as they are effective.
             </p>
             <p className="text-slate-400 leading-relaxed text-sm">
-              Every HomAroma product is designed with intention: the glass bottles are reusable, the packaging is recycled, and the formulas are written to be understood by anyone — not hidden behind chemical jargon.
+              Every HomAroma product is designed with intention: the bg-white shadow-sm border border-spa-stone/10 bottles are reusable, the packaging is recycled, and the formulas are written to be understood by anyone — not hidden behind chemical jargon.
             </p>
           </div>
-          <div className="relative h-80 rounded-2xl overflow-hidden glass border border-white/5">
+          <div className="relative h-80 rounded-2xl overflow-hidden bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10">
             <div className="absolute inset-0 bg-gradient-to-br from-teal-900/30 via-night-800/30 to-purple-900/20" />
             <div className="absolute inset-0 flex items-center justify-center">
               <div className="text-center space-y-3">
@@ -97,16 +97,16 @@ export default function AboutPage() {
       </section>
 
       {/* Three Pillars */}
-      <section className="py-24 px-6 bg-night-800/20 border-y border-white/5">
+      <section className="py-24 px-6 bg-white border-b border-spa-stone/10 border-y border-spa-stone/10">
         <div className="max-w-6xl mx-auto space-y-12">
           <div className="text-center space-y-3">
-            <p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70">What We Stand For</p>
+            <p className="text-spa-forest uppercase tracking-[0.3em] text-xs font-semibold opacity-70">What We Stand For</p>
             <h2 className="text-4xl font-bold">Three Pillars</h2>
-            <div className="w-12 h-px bg-cyan-glow mx-auto" />
+            <div className="w-12 h-px bg-spa-forest text-white mx-auto" />
           </div>
           <div className="grid md:grid-cols-3 gap-8">
             {PILLARS.map(p => (
-              <div key={p.title} className="glass rounded-2xl p-8 border border-white/5 hover:border-cyan-glow/20 transition-all duration-500 space-y-4">
+              <div key={p.title} className="bg-white shadow-sm border border-spa-stone/10 rounded-2xl p-8 border border-spa-stone/10 hover:border-spa-forest transition-all duration-500 space-y-4">
                 <div className="text-4xl">{p.icon}</div>
                 <h3 className="text-xl font-bold">{p.title}</h3>
                 <p className="text-slate-400 text-sm leading-relaxed">{p.desc}</p>
@@ -125,13 +125,13 @@ export default function AboutPage() {
         <div className="flex flex-col sm:flex-row gap-4 justify-center pt-4">
           <Link
             to="/scent-guide"
-            className="px-10 py-4 bg-white text-night-900 font-bold rounded-sm tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_30px_rgba(102,252,241,0.4)] transition-all duration-500"
+            className="px-10 py-4 bg-white text-spa-forest font-bold rounded-sm tracking-widest uppercase hover:bg-spa-forest text-white hover:shadow-[0_0_30px_rgba(102,252,241,0.4)] transition-all duration-500"
           >
             Take the Scent Guide
           </Link>
           <Link
             to="/shop"
-            className="px-10 py-4 glass text-white font-bold rounded-sm tracking-widest uppercase hover:bg-white/10 transition-all duration-300"
+            className="px-10 py-4 bg-white shadow-sm border border-spa-stone/10 text-white font-bold rounded-sm tracking-widest uppercase hover:bg-white/10 transition-all duration-300"
           >
             Shop All Products
           </Link>
diff --git a/apps/spa/src/pages/ArticleReaderPage.tsx b/apps/spa/src/pages/ArticleReaderPage.tsx
index c362bee..f03a751 100644
--- a/apps/spa/src/pages/ArticleReaderPage.tsx
+++ b/apps/spa/src/pages/ArticleReaderPage.tsx
@@ -25,7 +25,7 @@ export default function ArticleReaderPage() {
 
   if (loading) return (
     <div className="min-h-screen flex items-center justify-center bg-black">
-      <Loader2 className="w-8 h-8 animate-spin text-cyan-glow" />
+      <Loader2 className="w-8 h-8 animate-spin text-spa-forest" />
     </div>
   )
 
@@ -41,13 +41,13 @@ export default function ArticleReaderPage() {
   )
 
   return (
-    <div className="min-h-screen flex flex-col bg-night-950">
+    <div className="min-h-screen flex flex-col bg-pop-bg">
       <Navbar categories={categories} />
 
       <main className="flex-1 pt-24 pb-20">
         <article className="max-w-4xl mx-auto w-full animate-fade-in relative mt-8">
           
-          <Link to="/scent-guide" className="absolute -left-16 xl:-left-24 top-0 mt-8 hidden lg:flex p-4 glass border border-white/5 rounded-full hover:bg-white/10 transition-colors">
+          <Link to="/scent-guide" className="absolute -left-16 xl:-left-24 top-0 mt-8 hidden lg:flex p-4 bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 rounded-full hover:bg-white/10 transition-colors">
              <ArrowLeft className="w-5 h-5 text-slate-300" />
           </Link>
 
@@ -56,7 +56,7 @@ export default function ArticleReaderPage() {
             <Link to="/scent-guide" className="lg:hidden text-slate-400 text-sm hover:text-white inline-flex items-center gap-2 mb-4">
                <ArrowLeft className="w-4 h-4" /> Go Back
             </Link>
-            <p className="text-cyan-glow uppercase tracking-[0.3em] font-bold text-xs">
+            <p className="text-spa-forest uppercase tracking-[0.3em] font-bold text-xs">
               {new Date(article.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
             </p>
             <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight max-w-3xl mx-auto font-serif">
@@ -66,7 +66,7 @@ export default function ArticleReaderPage() {
 
           {/* Cover Image */}
           {article.coverImage && (
-            <div className="w-full aspect-[16/7] bg-night-900 md:rounded-[2rem] overflow-hidden shadow-2xl mb-16 border border-white/5">
+            <div className="w-full aspect-[16/7] bg-white md:rounded-[2rem] overflow-hidden shadow-2xl mb-16 border border-spa-stone/10">
               <img src={article.coverImage} alt={article.title} className="w-full h-full object-cover" />
             </div>
           )}
diff --git a/apps/spa/src/pages/ContactPage.tsx b/apps/spa/src/pages/ContactPage.tsx
index 9d06bb4..d4fe8b7 100644
--- a/apps/spa/src/pages/ContactPage.tsx
+++ b/apps/spa/src/pages/ContactPage.tsx
@@ -35,8 +35,8 @@ export default function ContactPage() {
       <Navbar categories={categories} />
 
       {/* Header */}
-      <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
-        <p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Get in Touch</p>
+      <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-spa-stone/10 bg-white border-b border-spa-stone/10">
+        <p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Get in Touch</p>
         <h1 className="text-5xl font-bold">Contact Us</h1>
         <p className="text-slate-400 max-w-lg mx-auto">
           Have a question, custom request, or partnership idea? We'd love to hear from you.
@@ -56,32 +56,32 @@ export default function ContactPage() {
                 { icon: '📍', label: 'Studio', value: 'Bangkok, Thailand', href: '#' },
               ].map(item => (
                 <a key={item.label} href={item.href} className="flex items-start gap-4 group">
-                  <div className="glass w-10 h-10 rounded-xl flex items-center justify-center text-lg shrink-0 group-hover:bg-cyan-glow/10 transition-colors">
+                  <div className="bg-white shadow-sm border border-spa-stone/10 w-10 h-10 rounded-xl flex items-center justify-center text-lg shrink-0 group-hover:bg-spa-forest/10 transition-colors">
                     {item.icon}
                   </div>
                   <div>
                     <p className="text-xs text-slate-500 uppercase tracking-widest">{item.label}</p>
-                    <p className="text-white text-sm font-medium group-hover:text-cyan-glow transition-colors">{item.value}</p>
+                    <p className="text-white text-sm font-medium group-hover:text-spa-forest transition-colors">{item.value}</p>
                   </div>
                 </a>
               ))}
             </div>
           </div>
 
-          <div className="glass rounded-2xl p-6 border border-white/5 space-y-3">
+          <div className="bg-white shadow-sm border border-spa-stone/10 rounded-2xl p-6 border border-spa-stone/10 space-y-3">
             <h3 className="font-bold text-sm uppercase tracking-widest">Response Time</h3>
             <div className="space-y-2 text-sm">
               <div className="flex justify-between">
                 <span className="text-slate-400">Email</span>
-                <span className="text-cyan-glow font-medium">~2 hours</span>
+                <span className="text-spa-forest font-medium">~2 hours</span>
               </div>
               <div className="flex justify-between">
                 <span className="text-slate-400">LINE</span>
-                <span className="text-cyan-glow font-medium">~30 minutes</span>
+                <span className="text-spa-forest font-medium">~30 minutes</span>
               </div>
               <div className="flex justify-between">
                 <span className="text-slate-400">Instagram DM</span>
-                <span className="text-cyan-glow font-medium">~4 hours</span>
+                <span className="text-spa-forest font-medium">~4 hours</span>
               </div>
             </div>
             <p className="text-[10px] text-slate-600 pt-2 uppercase tracking-wider">Mon–Sat, 9:00–18:00 (ICT)</p>
@@ -98,7 +98,7 @@ export default function ContactPage() {
                 <p className="text-slate-400">Thank you for reaching out. We'll get back to you within 2 hours.</p>
                 <button
                   onClick={() => setStatus('idle')}
-                  className="mt-4 px-8 py-3 glass border border-white/10 hover:border-cyan-glow/30 font-bold uppercase tracking-widest text-xs transition-all rounded-lg"
+                  className="mt-4 px-8 py-3 bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 hover:border-spa-forest font-bold uppercase tracking-widest text-xs transition-all rounded-lg"
                 >
                   Send Another
                 </button>
@@ -116,7 +116,7 @@ export default function ContactPage() {
                     value={form.name}
                     onChange={handleChange}
                     placeholder="Your name"
-                    className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
+                    className="w-full bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 focus:border-spa-forest rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
                   />
                 </div>
                 <div className="space-y-2">
@@ -128,7 +128,7 @@ export default function ContactPage() {
                     value={form.email}
                     onChange={handleChange}
                     placeholder="your@email.com"
-                    className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
+                    className="w-full bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 focus:border-spa-forest rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 transition-colors"
                   />
                 </div>
               </div>
@@ -139,7 +139,7 @@ export default function ContactPage() {
                   name="subject"
                   value={form.subject}
                   onChange={handleChange}
-                  className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-night-900 outline-none text-sm text-white transition-colors"
+                  className="w-full bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 focus:border-spa-forest rounded-xl px-4 py-3.5 bg-white outline-none text-sm text-white transition-colors"
                 >
                   <option value="" disabled>Select a subject</option>
                   {SUBJECTS.map(s => <option key={s} value={s}>{s}</option>)}
@@ -154,13 +154,13 @@ export default function ContactPage() {
                   onChange={handleChange}
                   rows={6}
                   placeholder="Tell us about your inquiry..."
-                  className="w-full glass border border-white/10 focus:border-cyan-glow/40 rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 resize-none transition-colors"
+                  className="w-full bg-white shadow-sm border border-spa-stone/10 border border-spa-stone/10 focus:border-spa-forest rounded-xl px-4 py-3.5 bg-transparent outline-none text-sm text-white placeholder-slate-600 resize-none transition-colors"
                 />
               </div>
               <button
                 type="submit"
                 disabled={status === 'sending'}
-                className="w-full py-4 bg-white text-night-900 font-bold uppercase tracking-widest text-sm rounded-xl hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3"
+                className="w-full py-4 bg-white text-spa-forest font-bold uppercase tracking-widest text-sm rounded-xl hover:bg-spa-forest text-white hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3"
               >
                 {status === 'sending' ? (
                   <>
diff --git a/apps/spa/src/pages/FaqPage.tsx b/apps/spa/src/pages/FaqPage.tsx
index 7a130a6..f18e924 100644
--- a/apps/spa/src/pages/FaqPage.tsx
+++ b/apps/spa/src/pages/FaqPage.tsx
@@ -60,8 +60,8 @@ export default function FaqPage() {
       <Navbar categories={categories} />
 
       {/* Header */}
-      <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
-        <p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Support</p>
+      <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-spa-stone/10 bg-white border-b border-spa-stone/10">
+        <p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Support</p>
         <h1 className="text-5xl font-bold">Frequently Asked Questions</h1>
         <p className="text-slate-400 max-w-lg mx-auto">
           Everything you need to know about HomAroma products, shipping, and care.
@@ -77,8 +77,8 @@ export default function FaqPage() {
               onClick={() => setActiveCategory(category)}
               className={`px-5 py-2 rounded-full text-xs font-bold uppercase tracking-widest transition-all duration-300 flex items-center gap-2 ${
                 activeCategory === category
-                  ? 'bg-cyan-glow text-night-900 shadow-[0_0_15px_rgba(102,252,241,0.3)]'
-                  : 'glass hover:bg-white/10'
+                  ? 'bg-spa-forest text-white text-spa-forest shadow-[0_0_15px_rgba(102,252,241,0.3)]'
+                  : 'bg-white shadow-sm border border-spa-stone/10 hover:bg-white/10'
               }`}
             >
               <span>{icon}</span> {category}
@@ -94,7 +94,7 @@ export default function FaqPage() {
             return (
               <div
                 key={key}
-                className={`glass rounded-xl overflow-hidden border transition-all duration-300 ${isOpen ? 'border-cyan-glow/20' : 'border-white/5'}`}
+                className={`bg-white shadow-sm border border-spa-stone/10 rounded-xl overflow-hidden border transition-all duration-300 ${isOpen ? 'border-spa-forest' : 'border-spa-stone/10'}`}
               >
                 <button
                   onClick={() => toggle(key)}
@@ -102,7 +102,7 @@ export default function FaqPage() {
                 >
                   <span className="font-semibold text-sm md:text-base leading-snug">{item.q}</span>
                   <svg
-                    className={`w-5 h-5 text-cyan-glow shrink-0 transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`}
+                    className={`w-5 h-5 text-spa-forest shrink-0 transition-transform duration-300 ${isOpen ? 'rotate-45' : ''}`}
                     fill="none" viewBox="0 0 24 24" stroke="currentColor"
                   >
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
@@ -120,13 +120,13 @@ export default function FaqPage() {
         </div>
 
         {/* Still have questions? */}
-        <div className="glass rounded-2xl p-8 text-center space-y-4 border border-white/5 mt-12">
+        <div className="bg-white shadow-sm border border-spa-stone/10 rounded-2xl p-8 text-center space-y-4 border border-spa-stone/10 mt-12">
           <div className="text-3xl">💬</div>
           <h3 className="font-bold text-xl">Still have questions?</h3>
           <p className="text-slate-400 text-sm">Our team is here to help — usually responds within 2 hours.</p>
           <a
             href="/contact"
-            className="inline-block px-8 py-3 bg-white text-night-900 font-bold rounded-lg uppercase tracking-widest text-xs hover:bg-cyan-glow transition-colors duration-300"
+            className="inline-block px-8 py-3 bg-white text-spa-forest font-bold rounded-lg uppercase tracking-widest text-xs hover:bg-spa-forest text-white transition-colors duration-300"
           >
             Contact Us
           </a>
diff --git a/apps/spa/src/pages/NotFoundPage.tsx b/apps/spa/src/pages/NotFoundPage.tsx
index e7025c8..a028445 100644
--- a/apps/spa/src/pages/NotFoundPage.tsx
+++ b/apps/spa/src/pages/NotFoundPage.tsx
@@ -2,11 +2,11 @@ import { Link } from 'react-router-dom'
 
 export default function NotFoundPage() {
   return (
-    <div className="min-h-screen flex items-center justify-center px-6 bg-night-900">
+    <div className="min-h-screen flex items-center justify-center px-6 bg-white">
       {/* Background glow */}
       <div className="absolute inset-0 pointer-events-none overflow-hidden">
-        <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-cyan-glow/5 rounded-full blur-3xl" />
-        <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-night-700/10 rounded-full blur-3xl" />
+        <div className="absolute top-1/3 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-spa-forest/10 rounded-full blur-3xl" />
+        <div className="absolute bottom-1/4 right-1/4 w-64 h-64 bg-spa-stone/10 rounded-full blur-3xl" />
       </div>
 
       <div className="relative z-10 text-center space-y-8 max-w-lg">
@@ -30,19 +30,19 @@ export default function NotFoundPage() {
         <div className="flex flex-col sm:flex-row gap-4 justify-center pt-2">
           <Link
             to="/"
-            className="px-8 py-3.5 bg-white text-night-900 font-bold rounded-lg tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 text-sm"
+            className="px-8 py-3.5 bg-white text-spa-forest font-bold rounded-lg tracking-widest uppercase hover:bg-spa-forest text-white hover:shadow-[0_0_25px_rgba(102,252,241,0.4)] transition-all duration-500 text-sm"
           >
             Go Home
           </Link>
           <Link
             to="/shop"
-            className="px-8 py-3.5 glass text-white font-bold rounded-lg tracking-widest uppercase hover:bg-white/10 transition-all duration-300 border border-white/10 text-sm"
+            className="px-8 py-3.5 bg-white shadow-sm border border-spa-stone/10 text-white font-bold rounded-lg tracking-widest uppercase hover:bg-white/10 transition-all duration-300 border border-spa-stone/10 text-sm"
           >
             Browse Products
           </Link>
         </div>
 
-        <div className="pt-4 border-t border-white/5">
+        <div className="pt-4 border-t border-spa-stone/10">
           <div className="flex justify-center gap-6 text-xs text-slate-500">
             <Link to="/scent-guide" className="hover:text-white transition-colors">Scent Guide</Link>
             <Link to="/faq" className="hover:text-white transition-colors">FAQ</Link>
diff --git a/apps/spa/src/pages/ScentGuidePage.tsx b/apps/spa/src/pages/ScentGuidePage.tsx
index 3945587..d436e65 100644
--- a/apps/spa/src/pages/ScentGuidePage.tsx
+++ b/apps/spa/src/pages/ScentGuidePage.tsx
@@ -18,8 +18,8 @@ export default function ScentGuidePage() {
       <Navbar categories={categories} />
 
       {/* Header */}
-      <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-white/5 bg-night-800/20">
-        <p className="text-cyan-glow uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Journal</p>
+      <div className="pt-32 pb-16 px-6 text-center space-y-4 border-b border-spa-stone/10 bg-white border-b border-spa-stone/10">
+        <p className="text-spa-forest uppercase tracking-[0.4em] text-xs font-semibold opacity-70">Journal</p>
         <h1 className="text-5xl font-bold">Scent Guide</h1>
         <p className="text-slate-400 max-w-lg mx-auto">
           Explore our collection of articles, guides, and sensory knowledge.
@@ -37,9 +37,9 @@ export default function ScentGuidePage() {
               <Link 
                 key={article.id} 
                 to={`/article/${article.slug}`}
-                className="group block bg-night-950 rounded-2xl overflow-hidden border border-white/5 hover:border-cyan-glow/30 transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl flex flex-col"
+                className="group block bg-pop-bg rounded-2xl overflow-hidden border border-spa-stone/10 hover:border-spa-forest transition-all duration-300 hover:-translate-y-1 hover:shadow-2xl flex flex-col"
               >
-                <div className="aspect-[4/3] bg-night-900 overflow-hidden shrink-0">
+                <div className="aspect-[4/3] bg-white overflow-hidden shrink-0">
                   {article.coverImage ? (
                     <img src={article.coverImage} alt={article.title} className="w-full h-full object-cover opacity-80 group-hover:opacity-100 group-hover:scale-105 transition-all duration-500" />
                   ) : (
@@ -49,10 +49,10 @@ export default function ScentGuidePage() {
                   )}
                 </div>
                 <div className="p-6 space-y-3 flex-1 flex flex-col">
-                  <p className="text-[10px] text-cyan-glow font-bold tracking-widest uppercase">
+                  <p className="text-[10px] text-spa-forest font-bold tracking-widest uppercase">
                     {new Date(article.createdAt).toLocaleDateString()}
                   </p>
-                  <h3 className="text-xl font-bold leading-tight group-hover:text-cyan-glow transition-colors">{article.title}</h3>
+                  <h3 className="text-xl font-bold leading-tight group-hover:text-spa-forest transition-colors">{article.title}</h3>
                   {/* Remove HTML tags for purely excerpt preview */}
                   <div className="text-slate-400 text-sm line-clamp-3" dangerouslySetInnerHTML={{ __html: article.content }} />
                 </div>
diff --git a/fix_theme.js b/fix_theme.js
new file mode 100644
index 0000000..7ba03b2
--- /dev/null
+++ b/fix_theme.js
@@ -0,0 +1,36 @@
+const fs = require('fs');
+
+const files = [
+  'apps/spa/src/pages/AboutPage.tsx',
+  'apps/spa/src/pages/ContactPage.tsx',
+  'apps/spa/src/pages/FaqPage.tsx',
+  'apps/spa/src/pages/ScentGuidePage.tsx',
+  'apps/spa/src/pages/NotFoundPage.tsx',
+  'apps/spa/src/pages/ArticleReaderPage.tsx'
+];
+
+for (const file of files) {
+  let content = fs.readFileSync(file, 'utf8');
+  
+  // Specific replaces for safety
+  content = content.replace(/bg-night-950/g, 'bg-pop-bg');
+  content = content.replace(/bg-night-900/g, 'bg-white');
+  content = content.replace(/bg-night-800\/20/g, 'bg-white border-b border-spa-stone/10');
+  content = content.replace(/bg-night-[0-9]+\/[0-9]+/g, 'bg-spa-stone/10');
+  
+  content = content.replace(/text-cyan-glow/g, 'text-spa-forest');
+  content = content.replace(/bg-cyan-glow\/[0-9]+/g, 'bg-spa-forest/10');
+  content = content.replace(/bg-cyan-glow/g, 'bg-spa-forest text-white');
+  
+  content = content.replace(/border-cyan-glow\/[0-9]+/g, 'border-spa-forest');
+  content = content.replace(/border-white\/[0-9]+/g, 'border-spa-stone/10');
+  
+  content = content.replace(/text-night-900/g, 'text-spa-forest');
+  content = content.replace(/to-night-700/g, 'to-spa-stone');
+  
+  // Replace glass with light theme equivalent
+  content = content.replace(/glass/g, 'bg-white shadow-sm border border-spa-stone/10');
+  
+  fs.writeFileSync(file, content);
+}
+console.log("Done fixing themes.");