diff --git a/src/app/page.tsx b/src/app/page.tsx
index fb6976e..a4afce6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -9,6 +9,7 @@ import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboa
 import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen';
 import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
 import TestimonialCardThirteen from '@/components/sections/testimonial/TestimonialCardThirteen';
+import { Sparkles } from '@/components/background/Sparkles';
 
 export default function LandingPage() {
   return (
@@ -66,6 +67,7 @@ export default function LandingPage() {
           id: "6",          imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3BtwXXwXAFgkLcj8UK8yqk5jXxb/panoramic-ocean-surface-with-sun-glisten-1775511261059-f4eb7d73.png",          imageAlt: "Expansive sea"},
       ]}
     />
+    <Sparkles particleDensity={80} speed={2} />
   </div>
 
   <div id="features" data-section="features">
@@ -153,4 +155,4 @@ export default function LandingPage() {
       </ReactLenis>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index 5735fae..958d38b 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,14 +10,14 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #f0f9ff;
-  --card: #e0f2fe;
-  --foreground: #082f49;
+  --background: #000612;
+  --card: #0a1f33;
+  --foreground: #e0f2fe;
   --primary-cta: #0284c7;
   --primary-cta-text: #ffffff;
-  --secondary-cta: #f0f9ff;
+  --secondary-cta: #082f49;
   --secondary-cta-text: #082f49;
-  --accent: #bae6fd;
+  --accent: #38bdf8;
   --background-accent: #0369a1;
 
   /* text sizing - set by ThemeProvider */