diff --git a/apps/spa/src/components/DesktopMegaMenu.tsx b/apps/spa/src/components/DesktopMegaMenu.tsx
index cae0186..eb45de0 100644
--- a/apps/spa/src/components/DesktopMegaMenu.tsx
+++ b/apps/spa/src/components/DesktopMegaMenu.tsx
@@ -78,7 +78,7 @@ export function DesktopMegaMenu({ items }: DesktopMegaMenuProps) {
                 onMouseEnter={() => handleOpen(uniqueId)}
                 onMouseLeave={handleClose}
               >
-                <div className="w-full bg-[#F9F8F5] border-b border-black/5 shadow-sm cursor-default">
+                <div className="w-full bg-spa-sage border-b border-black/5 shadow-sm cursor-default">
                   <div className="flex justify-center gap-16 py-10 max-w-7xl mx-auto px-6">
                     {item.columns!.map((col, idx) => (
                       <div key={idx} className="flex flex-col min-w-[140px] text-left">
diff --git a/apps/spa/src/components/Navbar.tsx b/apps/spa/src/components/Navbar.tsx
index a9f7a65..370b371 100644
--- a/apps/spa/src/components/Navbar.tsx
+++ b/apps/spa/src/components/Navbar.tsx
@@ -153,7 +153,7 @@ export default function Navbar({ topOffsetClassName = 'top-0' }: NavbarProps) {
         ref={navRef}
         className={`fixed ${finalTopClassName} z-50 w-full border-b border-black/5 transition-all duration-300 ${
           scrolled ? 'shadow-lg shadow-black/5' : 'shadow-none'
-        } bg-white/80 px-4 py-3.5 backdrop-blur-xl md:bg-[#F9F8F5] md:px-6 md:py-4 md:backdrop-blur-none`}
+        } bg-white/80 px-4 py-3.5 backdrop-blur-xl md:bg-spa-sage md:px-6 md:py-4 md:backdrop-blur-none`}
       >
         {/* Single-row layout: Logo (left) | Menu (center, desktop) | Actions (right) */}
         <div className="w-full flex items-center justify-between gap-4">
diff --git a/apps/spa/src/pages/CustomPage.tsx b/apps/spa/src/pages/CustomPage.tsx
index 9278206..ed63ec8 100644
--- a/apps/spa/src/pages/CustomPage.tsx
+++ b/apps/spa/src/pages/CustomPage.tsx
@@ -65,7 +65,7 @@ export default function CustomPage() {
   }, [slug, i18n.language]);
 
   return (
-    <div className="min-h-screen bg-[#FDFDF9] text-[#1F3D2D]">
+    <div className="min-h-screen bg-spa-light text-spa-forest">
       {announcementSections.map((section) => (
         <DynamicPageRenderer
           key={section.id}