diff --git a/src/app/recipes/page.tsx b/src/app/recipes/page.tsx
index 39ba35b..061d56d 100644
--- a/src/app/recipes/page.tsx
+++ b/src/app/recipes/page.tsx
@@ -3,70 +3,67 @@
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import ReactLenis from "lenis/react";
 import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
-import FeatureCardMedia from '@/components/sections/feature/FeatureCardMedia';
+import FeatureCardEight from '@/components/sections/feature/FeatureCardEight';
+import ContactSplit from '@/components/sections/contact/ContactSplit';
 import FooterMedia from '@/components/sections/footer/FooterMedia';
-import ContactSplitForm from '@/components/form/ContactForm';
 
 export default function RecipesPage() {
   return (
     <ThemeProvider
-        defaultButtonVariant="icon-arrow"
-        defaultTextAnimation="reveal-blur"
-        borderRadius="soft"
-        contentWidth="medium"
-        sizing="mediumSizeLargeTitles"
-        background="grid"
-        cardStyle="gradient-bordered"
-        primaryButtonStyle="flat"
-        secondaryButtonStyle="glass"
-        headingFontWeight="medium"
+      defaultButtonVariant="icon-arrow"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="soft"
+      contentWidth="medium"
+      sizing="mediumSizeLargeTitles"
+      background="grid"
+      cardStyle="gradient-bordered"
+      primaryButtonStyle="flat"
+      secondaryButtonStyle="glass"
+      headingFontWeight="medium"
     >
       <ReactLenis root>
         <div id="nav" data-section="nav">
-            <NavbarStyleCentered
+          <NavbarStyleCentered
             navItems={[
-                { name: "Home", id: "/" },
-                { name: "Recipes", id: "/recipes" }
+              { name: "Home", id: "/" },
+              { name: "Recipes", id: "/recipes" }
             ]}
-            />
+          />
         </div>
 
-        <div id="recipe-browser" data-section="recipe-browser">
-          <FeatureCardMedia
+        <div id="features" data-section="features">
+          <FeatureCardEight
             title="Browse Our Recipes"
             description="Discover delicious recipes categorized by type, diet, and prep time."
-            animationType="slide-up"
             textboxLayout="split"
             useInvertedBackground={false}
             features={[
-              { title: "Quick & Easy", description: "Ready in 30 minutes or less.", tag: "Category", imageSrc: "http://img.b2bpic.net/free-photo/chef-preparing-food-in-restaurant-kitchen_23-2148760662.jpg" },
-              { title: "Healthy & Lean", description: "Nutritious and balanced meals.", tag: "Category", imageSrc: "http://img.b2bpic.net/free-photo/healthy-food-background_23-2148464673.jpg" },
-              { title: "Vegetarian", description: "Plant-based goodness.", tag: "Category", imageSrc: "http://img.b2bpic.net/free-photo/top-view-bell-peppers-ingredients-wooden-table_23-2148762744.jpg" }
+              { id: "1", title: "Quick & Easy", description: "Ready in 30 minutes or less.", imageSrc: "http://img.b2bpic.net/free-photo/chef-preparing-food-in-restaurant-kitchen_23-2148760662.jpg" },
+              { id: "2", title: "Healthy & Lean", description: "Nutritious and balanced meals.", imageSrc: "http://img.b2bpic.net/free-photo/healthy-food-background_23-2148464673.jpg" },
+              { id: "3", title: "Vegetarian", description: "Plant-based goodness.", imageSrc: "http://img.b2bpic.net/free-photo/top-view-bell-peppers-ingredients-wooden-table_23-2148762744.jpg" }
             ]}
           />
         </div>
 
         <div id="contact" data-section="contact">
-          <ContactSplitForm
+          <ContactSplit
+            tag="Newsletter"
             title="Newsletter"
             description="Get new recipes delivered to your inbox."
-            tag="Newsletter"
-            inputs={[
-              { label: "Your Name", name: "name", type: "text", placeholder: "Your Name" },
-              { label: "Your Email", name: "email", type: "email", placeholder: "Your Email" }
-            ]}
+            background={{ variant: "plain" }}
+            useInvertedBackground={false}
           />
         </div>
 
         <div id="footer" data-section="footer">
-            <FooterMedia
+          <FooterMedia
             videoSrc="http://img.b2bpic.net/free-photo/gradient-dark-blue-futuristic-digital-grid-background_53876-129728.jpg"
             logoText="TradeStream"
             columns={[
-                { title: "Platform", items: [{ label: "Home", href: "/" }, { label: "Recipes", href: "/recipes" }] },
-                { title: "Support", items: [{ label: "Contact", href: "/contact" }] }
+              { title: "Platform", items: [{ label: "Home", href: "/" }, { label: "Recipes", href: "/recipes" }] },
+              { title: "Support", items: [{ label: "Contact", href: "/contact" }] }
             ]}
-            />
+          />
         </div>
       </ReactLenis>
     </ThemeProvider>