diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index ae80ae5..5c36ed7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1413,4 +1413,4 @@ export default function RootLayout({
       </ServiceWrapper>
     </html>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 57c9604..4f2f0c8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,7 +3,7 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
 import HeroCentered from '@/components/sections/hero/HeroCentered';
-import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import ProductCardFour from '@/components/sections/product/ProductCardFour';
 import AboutMetric from '@/components/sections/about/AboutMetric';
 import FeatureCardSix from '@/components/sections/feature/FeatureCardSix';
 import TestimonialCardTwelve from '@/components/sections/testimonial/TestimonialCardTwelve';
@@ -60,7 +60,7 @@ export default function LandingPage() {
       </div>
 
       <div id="gallery" data-section="gallery">
-        <ProductCardOne
+        <ProductCardFour
           title="Featured Arrangements"
           description="Discover our exquisite collection of handcrafted floral designs, each created with passion and precision."
           tag="Our Gallery"
@@ -68,13 +68,13 @@ export default function LandingPage() {
           useInvertedBackground={false}
           products={[
             {
-              id: "1",              name: "Romance Rose",              price: "$95",              imageSrc: "http://img.b2bpic.net/free-photo/bouquet-pink-roses-single-branch-rose-with-green-leaves-inside-vase_114579-1440.jpg?_wi=1",              imageAlt: "Romantic rose arrangement"
+              id: "1",              name: "Romance Rose",              price: "$95",              variant: "Premium Red",              imageSrc: "http://img.b2bpic.net/free-photo/bouquet-pink-roses-single-branch-rose-with-green-leaves-inside-vase_114579-1440.jpg?_wi=1",              imageAlt: "Romantic rose arrangement"
             },
             {
-              id: "2",              name: "Bridal Dreams",              price: "$150",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wedding-bouquet-flowers_1157-18354.jpg?_wi=1",              imageAlt: "Elegant bridal bouquet"
+              id: "2",              name: "Bridal Dreams",              price: "$150",              variant: "White & Cream",              imageSrc: "http://img.b2bpic.net/free-photo/beautiful-wedding-bouquet-flowers_1157-18354.jpg?_wi=1",              imageAlt: "Elegant bridal bouquet"
             },
             {
-              id: "3",              name: "Spring Garden",              price: "$85",              imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-colorful-tulips-baby-s-breath-flower-wooden-desk_23-2148048500.jpg?_wi=1",              imageAlt: "Colorful spring arrangement"
+              id: "3",              name: "Spring Garden",              price: "$85",              variant: "Colorful Mix",              imageSrc: "http://img.b2bpic.net/free-photo/overhead-view-colorful-tulips-baby-s-breath-flower-wooden-desk_23-2148048500.jpg?_wi=1",              imageAlt: "Colorful spring arrangement"
             }
           ]}
           gridVariant="three-columns-all-equal-width"
@@ -203,4 +203,4 @@ export default function LandingPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index af33e55..174637e 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -2,23 +2,23 @@
   /* Base units */
   /* --vw is set by ThemeProvider */
 
-  /* --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #6139e6;;
-  --secondary-cta: #ffffff;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;; */
+  /* --background: #0a0a0a;;
+  --card: #1a1a1a;;
+  --foreground: #ffffff;;
+  --primary-cta: #ff3333;;
+  --secondary-cta: #1a1a1a;;
+  --accent: #ff3333;;
+  --background-accent: #330000;; */
 
-  --background: #f5f5f5;;
-  --card: #ffffff;;
-  --foreground: #1c1c1c;;
-  --primary-cta: #6139e6;;
+  --background: #0a0a0a;;
+  --card: #1a1a1a;;
+  --foreground: #ffffff;;
+  --primary-cta: #ff3333;;
   --primary-cta-text: #f5f5f5;;
-  --secondary-cta: #ffffff;;
+  --secondary-cta: #1a1a1a;;
   --secondary-cta-text: #1c1c1c;;
-  --accent: #6139e6;;
-  --background-accent: #b3a8e8;;
+  --accent: #ff3333;;
+  --background-accent: #330000;;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
diff --git a/src/app/terms/page.tsx b/src/app/terms/page.tsx
index 3024e64..dc3e90f 100644
--- a/src/app/terms/page.tsx
+++ b/src/app/terms/page.tsx
@@ -153,4 +153,4 @@ export default function TermsPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}