diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
index f9f9025..4614f70 100644
--- a/src/app/about/page.tsx
+++ b/src/app/about/page.tsx
@@ -1,15 +1,16 @@
 "use client";
-import { ThemeProvider } from "next-themes";
-import { NavbarStyleCentered } from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import { SplitAbout } from "@/components/sections/about/SplitAbout";
-import { FooterBase } from "@/components/sections/footer/FooterBase";
-import { Sparkles, Lightbulb, TrendingUp, Handshake } from "lucide-react";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
+import SplitAbout from "@/components/sections/about/SplitAbout";
+import FooterSimple from "@/components/sections/footer/FooterSimple";
 import { useEffect, useState } from "react";
 
 const navbarLinks = [
   { name: "Home", id: "/" },
   { name: "Features", id: "/features" },
-  { name: "About", id: "/about" }
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "/contact" },
+  { name: "Dashboard", id: "/dashboard/tracker" }
 ];
 
 export default function AboutPage() {
@@ -24,10 +25,6 @@ export default function AboutPage() {
 
   return (
     <ThemeProvider
-      attribute="class"
-      defaultTheme="light"
-      enableSystem
-      disableTransitionOnChange
       defaultButtonVariant="hover-magnetic"
       defaultTextAnimation="entrance-slide"
       borderRadius="rounded"
@@ -39,42 +36,35 @@ export default function AboutPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleCentered
-        navItems={navbarLinks}
-        brandName="Webild"
-        logoSrc="/logo.svg"
-        logoAlt="Webild Logo"
-        button={{ text: "Get Started", href: "https://webild.com" }}
-      />
-      <div id="about" data-section="about">
-        <SplitAbout
-          title="Our Vision: Revolutionizing Talent Acquisition"
-          description="At Webild, we are passionate about creating intelligent solutions that empower businesses to find, attract, and hire the best talent efficiently and fairly."
-          tag="Who We Are"
-          bulletPoints={[
-            {
-              title: "Innovation-Driven",              description: "We constantly research and implement the latest technologies to bring you cutting-edge features.",              icon: Lightbulb
-            },
-            {
-              title: "Customer Success",              description: "Your success is our priority. We design our platform with user experience and effectiveness in mind.",              icon: TrendingUp
-            },
-            {
-              title: "Ethical & Inclusive",              description: "Committed to fair hiring practices and promoting diversity and inclusion in the workplace.",              icon: Handshake
-            }
-          ]}
-          imageSrc="https://picsum.photos/id/1015/800/600"
-          imageAlt="Team collaborating"
-          mediaAnimation="slide-up"
-          imagePosition="right"
-          textboxLayout="default"
-          useInvertedBackground={false}
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={navbarLinks}
+          brandName="Webild"
+          logoSrc="/logo.svg"
+          logoAlt="Webild Logo"
+          button={{ text: "Get Started", href: "https://webild.com" }}
         />
       </div>
-      <FooterBase
+      <div id="about-us" data-section="about-us">
+        <SplitAbout
+          title="About Our Mission"
+          description="At Webild, we're dedicated to empowering businesses with innovative solutions that drive growth and efficiency. Our team is passionate about creating tools that make a real difference."
+          bulletPoints={[
+            { title: "Innovation", description: "Continuously pushing boundaries with cutting-edge technology." },
+            { title: "Efficiency", description: "Streamlining processes to maximize productivity." },
+            { title: "Impact", description: "Creating solutions that deliver measurable value." }
+          ]}
+          imageSrc="https://picsum.photos/id/243/800/600"
+          imageAlt="Team collaborating in an office"
+          mediaAnimation="slide-up"
+          useInvertedBackground={false}
+          textboxLayout="default"
+        />
+      </div>
+      <FooterSimple
         columns={[
           {
             title: "Product",            items: [
-              { label: "Home", href: "/" },
               { label: "Features", href: "/features" },
               { label: "Pricing", href: "/pricing" }
             ]
@@ -86,8 +76,8 @@ export default function AboutPage() {
             ]
           }
         ]}
-        logoText="Webild"
-        copyrightText="© 2024 Webild. All rights reserved."
+        bottomLeftText="Webild"
+        bottomRightText="© 2024 Webild. All rights reserved."
       />
     </ThemeProvider>
   );
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index 13c48c7..0d32ff6 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -1,36 +1,18 @@
 "use client";
-
-import React, { useState } from 'react';
-import { ThemeProvider } from "@/components/theme-provider";
-import NavbarStyleApple from "@/components/navbar/NavbarStyleApple/NavbarStyleApple";
-import GlowingOrbBackground from "@/components/background/GlowingOrbBackground";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
 import ContactText from "@/components/sections/contact/ContactText";
-import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
-import Input from '@/components/form/Input';
-import ButtonBounceEffect from '@/components/button/ButtonBounceEffect/ButtonBounceEffect';
-import { Mail, Phone, MapPin } from 'lucide-react';
+import FooterSimple from "@/components/sections/footer/FooterSimple";
 
+const navbarLinks = [
+  { name: "Home", id: "/" },
+  { name: "Features", id: "/features" },
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "/contact" },
+  { name: "Dashboard", id: "/dashboard/tracker" }
+];
 
 export default function ContactPage() {
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [message, setMessage] = useState('');
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Handle form submission logic here
-    console.log('Form submitted:', { name, email, message });
-    alert('Thank you for your message! We will get back to you shortly.');
-    setName('');
-    setEmail('');
-    setMessage('');
-  };
-
-  const navItems = [
-    { name: 'Home', id: '/' },
-    { name: 'Contact', id: '/contact' }
-  ];
-
   return (
     <ThemeProvider
       defaultButtonVariant="hover-magnetic"
@@ -44,126 +26,43 @@ export default function ContactPage() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleApple navItems={navItems} brandName="Webild" />
-      <div className="relative min-h-screen">
-        <GlowingOrbBackground />
-        <div className="relative z-10 flex flex-col items-center justify-center py-20 px-4 md:px-8 lg:px-16 text-center">
-          <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Get in Touch</h1>
-          <p className="text-lg md:text-xl text-gray-400 max-w-2xl mb-12">
-            Have a question or want to work together? Fill out the form below or reach out to us directly.
-          </p>
-
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 max-w-5xl w-full">
-            {/* Contact Information Section */}
-            <div className="text-left">
-              <ContactText
-                text="Reach Out to Us"
-                buttons={[]} 
-                background={{ variant: 'plain' }}
-                useInvertedBackground={false}
-                className="!py-0 !pb-8"
-                textBoxClassName="!max-w-none"
-                textClassName="!text-3xl !md:text-4xl !lg:text-5xl !font-semibold !mb-6"
-              />
-              <p className="text-gray-300 text-lg mb-8">
-                We're here to help! Whether you have questions about our services, need support, or just want to say hello, our team is ready to connect.
-              </p>
-              <div className="space-y-6 text-gray-200">
-                <div className="flex items-start gap-4">
-                  <Mail className="w-6 h-6 text-primary-cta mt-1" />
-                  <div>
-                    <h3 className="font-semibold text-xl mb-1">Email Us</h3>
-                    <p>info@webild.com</p>
-                    <p>support@webild.com</p>
-                  </div>
-                </div>
-                <div className="flex items-start gap-4">
-                  <Phone className="w-6 h-6 text-primary-cta mt-1" />
-                  <div>
-                    <h3 className="font-semibold text-xl mb-1">Call Us</h3>
-                    <p>+1 (555) 123-4567</p>
-                </div>
-                </div>
-                <div className="flex items-start gap-4">
-                  <MapPin className="w-6 h-6 text-primary-cta mt-1" />
-                  <div>
-                    <h3 className="font-semibold text-xl mb-1">Our Office</h3>
-                    <p>123 Main Street, Suite 400</p>
-                    <p>Cityville, State, 12345</p>
-                    <p>Country</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Contact Form Section */}
-            <div className="bg-card p-8 rounded-lg shadow-xl text-left">
-              <h2 className="text-3xl font-semibold mb-6">Send us a Message</h2>
-              <form onSubmit={handleSubmit} className="space-y-6">
-                <div>
-                  <label htmlFor="name" className="block text-sm font-medium text-gray-300 mb-2">
-                    Name
-                  </label>
-                  <Input
-                    value={name}
-                    onChange={setName}
-                    placeholder="Your Name"
-                    required
-                    ariaLabel="Your Name"
-                    className="w-full px-4 py-2 bg-background-accent border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-cta text-foreground"
-                  />
-                </div>
-                <div>
-                  <label htmlFor="email" className="block text-sm font-medium text-gray-300 mb-2">
-                    Email
-                  </label>
-                  <Input
-                    value={email}
-                    onChange={setEmail}
-                    type="email"
-                    placeholder="you@example.com"
-                    required
-                    ariaLabel="Your Email"
-                    className="w-full px-4 py-2 bg-background-accent border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-cta text-foreground"
-                  />
-                </div>
-                <div>
-                  <label htmlFor="message" className="block text-sm font-medium text-gray-300 mb-2">
-                    Message
-                  </label>
-                  <textarea
-                    id="message"
-                    value={message}
-                    onChange={(e) => setMessage(e.target.value)}
-                    rows={5}
-                    placeholder="Your message..."
-                    required
-                    aria-label="Your Message"
-                    className="w-full px-4 py-2 bg-background-accent border border-gray-700 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-cta text-foreground resize-y"
-                  ></textarea>
-                </div>
-                <ButtonBounceEffect
-                  text="Send Message"
-                  type="submit"
-                  ariaLabel="Send Message"
-                  className="w-full py-3 bg-primary-cta text-white font-semibold rounded-md hover:bg-opacity-90 transition-colors"
-                />
-              </form>
-            </div>
-          </div>
-        </div>
-        <FooterLogoEmphasis
-          logoText="Webild"
-          columns={[
-            {
-              items: [
-                { label: 'Home', href: '/' },
-                { label: 'Contact', href: '/contact' }
-              ],
-            },
-          ]}
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={navbarLinks}
+          brandName="Webild"
+          logoSrc="/logo.svg"
+          logoAlt="Webild Logo"
+          button={{ text: "Get Started", href: "https://webild.com" }}
         />
       </div>
+      <div id="contact-us" data-section="contact-us">
+        <ContactText
+          text="Get in touch with us to learn more about our solutions."
+          buttons={[]}
+          background={{ variant: "plain" }}
+          useInvertedBackground={false}
+          className="py-12 md:py-20 lg:py-28"
+          textClassName="text-center"
+        />
+      </div>
+      <FooterSimple
+        columns={[
+          {
+            title: "Product",            items: [
+              { label: "Features", href: "/features" },
+              { label: "Pricing", href: "/pricing" }
+            ]
+          },
+          {
+            title: "Company",            items: [
+              { label: "About Us", href: "/about" },
+              { label: "Careers", href: "#careers" }
+            ]
+          }
+        ]}
+        bottomLeftText="Webild"
+        bottomRightText="© 2024 Webild. All rights reserved."
+      />
     </ThemeProvider>
   );
-}
\ No newline at end of file
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 89a4143..31093eb 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,15 +1,16 @@
 "use client";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import HeroBillboardRotatedCarousel from "@/components/sections/hero/HeroBillboardRotatedCarousel";
+import HeroCarouselLogo from "@/components/sections/hero/heroCarouselLogo/HeroCarouselLogo";
 import FooterBase from "@/components/sections/footer/FooterBase";
-import { Sparkles } from "lucide-react";
 import { useEffect, useState } from "react";
 
 const navbarLinks = [
   { name: "Home", id: "/" },
   { name: "Features", id: "/features" },
-  { name: "About", id: "/about" }
+  { name: "About", id: "/about" },
+  { name: "Contact", id: "/contact" },
+  { name: "Dashboard", id: "/dashboard/tracker" }
 ];
 
 export default function Home() {
@@ -35,31 +36,31 @@ export default function Home() {
       secondaryButtonStyle="glass"
       headingFontWeight="bold"
     >
-      <NavbarStyleCentered
-        navItems={navbarLinks}
-        brandName="Webild"
-        logoSrc="/logo.svg"
-        logoAlt="Webild Logo"
-        button={{ text: "Get Started", href: "https://webild.com" }}
-      />
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          navItems={navbarLinks}
+          brandName="Webild"
+          logoSrc="/logo.svg"
+          logoAlt="Webild Logo"
+          button={{ text: "Get Started", href: "https://webild.com" }}
+        />
+      </div>
       <div id="hero" data-section="hero">
-        <HeroBillboardRotatedCarousel
-          title="Innovate Your Recruitment Process"
+        <HeroCarouselLogo
+          logoText="Webild"
           description="Transform your hiring with our cutting-edge talent acquisition platform."
           buttons={[
             { text: "Learn More", href: "/features" },
             { text: "Contact Us", href: "https://webild.com/contact" }
           ]}
-          carouselItems={[
-            { id: "1", imageSrc: "https://picsum.photos/id/237/800/600", imageAlt: "Applicant tracking dashboard" },
-            { id: "2", imageSrc: "https://picsum.photos/id/238/800/600", imageAlt: "Interview scheduling interface" },
-            { id: "3", imageSrc: "https://picsum.photos/id/239/800/600", imageAlt: "Candidate communication tools" },
-            { id: "4", imageSrc: "https://picsum.photos/id/240/800/600", imageAlt: "Analytics and reporting" },
-            { id: "5", imageSrc: "https://picsum.photos/id/241/800/600", imageAlt: "Team collaboration features" },
-            { id: "6", imageSrc: "https://picsum.photos/id/242/800/600", imageAlt: "Customizable workflows" }
+          slides={[
+            { imageSrc: "https://picsum.photos/id/237/800/600", imageAlt: "Applicant tracking dashboard" },
+            { imageSrc: "https://picsum.photos/id/238/800/600", imageAlt: "Interview scheduling interface" },
+            { imageSrc: "https://picsum.photos/id/239/800/600", imageAlt: "Candidate communication tools" },
+            { imageSrc: "https://picsum.photos/id/240/800/600", imageAlt: "Analytics and reporting" },
+            { imageSrc: "https://picsum.photos/id/241/800/600", imageAlt: "Team collaboration features" },
+            { imageSrc: "https://picsum.photos/id/242/800/600", imageAlt: "Customizable workflows" }
           ]}
-          background={{ variant: "radial-gradient" }}
-          animationType="slide-up"
         />
       </div>
       <FooterBase