diff --git a/src/app/page.tsx b/src/app/page.tsx
index 87b3f5e..29803cf 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,12 +1,12 @@
 "use client";
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { Sparkles } from "lucide-react";
+import { Sparkles, Star } from "lucide-react";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import HeroSplitKpi from "@/components/sections/hero/HeroSplitKpi";
 import InlineImageSplitTextAbout from "@/components/sections/about/InlineImageSplitTextAbout";
 import ProductCardSeven from "@/components/sections/product/ProductCardSeven";
-import MetricCardTwo from "@/components/sections/metrics/MetricCardTwo";
+import MetricCardEight from "@/components/sections/metrics/MetricCardEight";
 import TestimonialCardThirteen from "@/components/sections/testimonial/TestimonialCardThirteen";
 import FaqBase from "@/components/sections/faq/FaqBase";
 import ContactInline from "@/components/sections/contact/ContactInline";
@@ -117,34 +117,32 @@ export default function CinemaPage() {
       </div>
 
       <div id="metrics" data-section="metrics">
-        <MetricCardTwo
+        <MetricCardEight
           title="Why Choose Look With Us"
-          description="Industry-leading cinema experience backed by numbers"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766747079426-9una2mtv.jpg"
+          imageAlt="Premium cinema experience"
           metrics={[
             {
               id: "1",
               value: "4K Projection",
-              description: "Crystal Clear Images"
+              title: "Crystal Clear Images"
             },
             {
               id: "2",
               value: "7.1 Surround",
-              description: "Immersive Sound System"
+              title: "Immersive Sound System"
             },
             {
               id: "3",
               value: "Premium Seats",
-              description: "Reclinable Seating"
+              title: "Reclinable Seating"
             },
             {
               id: "4",
               value: "100% Online",
-              description: "Easy Bookings"
+              title: "Easy Bookings"
             }
           ]}
-          gridVariant="uniform-all-items-equal"
-          animationType="slide-up"
-          textboxLayout="default"
           useInvertedBackground="noInvert"
         />
       </div>
@@ -264,6 +262,8 @@ export default function CinemaPage() {
           inputPlaceholder="Enter your email"
           buttonText="Subscribe"
           useInvertedBackground="noInvert"
+          imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/gallery/uploaded-1766747079426-9una2mtv.jpg"
+          imageAlt="Cinema experience"
         />
       </div>
 
@@ -274,4 +274,4 @@ export default function CinemaPage() {
       </div>
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}