diff --git a/app/page.tsx b/app/page.tsx
index a3ade6a7..7b0b51a9 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -30,7 +30,7 @@ export default function Home() {
   }, []);
 
   return (
-    <div className="bg-background text-foreground flex min-h-[100dvh] flex-col items-center justify-items-center">
+    <div className="bg-[var(--hp-surface)] text-white flex min-h-[100dvh] flex-col items-center justify-items-center">
       <Header
         isScrolled={isScrolled}
         mobileMenuOpen={mobileMenuOpen}
diff --git a/components/footer.tsx b/components/footer.tsx
index cdcf89cf..fab3a019 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -29,7 +29,7 @@ export function Footer() {
           <div className="sm:col-span-2">
             <Link href="/" className="mb-4 flex items-center gap-2">
               <Logo className="size-5" />
-              <span className="font-mono text-sm font-semibold">tweakcn</span>
+              <span className="font-mono text-sm font-semibold text-white">tweakcn</span>
             </Link>
             <p className="max-w-xs text-xs leading-relaxed text-[var(--hp-text-secondary)]">
               A visual theme editor for shadcn/ui. Customize, preview, and export Tailwind CSS
@@ -62,7 +62,7 @@ export function Footer() {
 
           {/* Product links */}
           <div>
-            <h4 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-foreground">
+            <h4 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-white">
               Product
             </h4>
             <ul className="space-y-2.5">
@@ -81,7 +81,7 @@ export function Footer() {
 
           {/* Resources links */}
           <div>
-            <h4 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-foreground">
+            <h4 className="mb-4 font-mono text-xs font-semibold uppercase tracking-widest text-white">
               Resources
             </h4>
             <ul className="space-y-2.5">
@@ -92,14 +92,14 @@ export function Footer() {
                       href={link.href}
                       target="_blank"
                       rel="noopener noreferrer"
-                      className="font-mono text-xs text-[var(--hp-text-secondary)] transition-colors hover:text-foreground"
+                      className="font-mono text-xs text-[var(--hp-text-secondary)] transition-colors hover:text-white"
                     >
                       {link.label}
                     </a>
                   ) : (
                     <Link
                       href={link.href}
-                      className="font-mono text-xs text-[var(--hp-text-secondary)] transition-colors hover:text-foreground"
+                      className="font-mono text-xs text-[var(--hp-text-secondary)] transition-colors hover:text-white"
                     >
                       {link.label}
                     </Link>
diff --git a/components/home/faq.tsx b/components/home/faq.tsx
index 1859830d..c809ead2 100644
--- a/components/home/faq.tsx
+++ b/components/home/faq.tsx
@@ -36,7 +36,7 @@ const faqs = [
 
 export function FAQ() {
   return (
-    <section id="faq" className="w-full border-b border-[var(--hp-rule)]">
+    <section id="faq" className="w-full border-b border-[var(--hp-rule)] bg-[var(--hp-surface)]">
       <div className="container mx-auto px-4 md:px-6">
         {/* Header row */}
         <div className="border-b border-[var(--hp-rule)] py-10">
diff --git a/components/home/hero.tsx b/components/home/hero.tsx
index e9546ab6..61fa37bc 100644
--- a/components/home/hero.tsx
+++ b/components/home/hero.tsx
@@ -14,7 +14,7 @@ export function Hero() {
   const mode = themeState.currentMode;
 
   return (
-    <section className="relative w-full overflow-hidden border-b border-[var(--hp-rule)]">
+    <section className="relative w-full overflow-hidden border-b border-[var(--hp-rule)] bg-[var(--hp-surface)]">
       {/* Fine dot grid */}
       <div
         className="pointer-events-none absolute inset-0 -z-10"
diff --git a/components/home/how-it-works.tsx b/components/home/how-it-works.tsx
index 2ec52ef1..8af936fa 100644
--- a/components/home/how-it-works.tsx
+++ b/components/home/how-it-works.tsx
@@ -23,7 +23,7 @@ const steps = [
 
 export function HowItWorks() {
   return (
-    <section id="how-it-works" className="w-full border-b border-[var(--hp-rule)]">
+    <section id="how-it-works" className="w-full border-b border-[var(--hp-rule)] bg-[var(--hp-surface)]">
       <div className="container mx-auto px-4 md:px-6">
         {/* Header row */}
         <div className="flex items-end justify-between border-b border-[var(--hp-rule)] py-10">
diff --git a/components/home/testimonials.tsx b/components/home/testimonials.tsx
index 667825f3..656042e2 100644
--- a/components/home/testimonials.tsx
+++ b/components/home/testimonials.tsx
@@ -177,7 +177,7 @@ function MarqueeRow({ items, reverse = false }: { items: typeof testimonials; re
 
 export function Testimonials() {
   return (
-    <section id="testimonials" className="w-full border-b border-[var(--hp-rule)] py-20 md:py-28 overflow-hidden">
+    <section id="testimonials" className="w-full border-b border-[var(--hp-rule)] bg-[var(--hp-surface)] py-20 md:py-28 overflow-hidden">
       <div className="container mx-auto mb-12 px-4 md:px-6">
         <motion.div
           initial={{ opacity: 0, y: 12 }}