diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
new file mode 100644
index 0000000..78ae925
--- /dev/null
+++ b/src/app/about/page.tsx
@@ -0,0 +1,59 @@
+"use client";
+import { ThemeProvider } from "next-themes";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import TextAbout from '@/components/sections/about/TextAbout';
+import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+import { Award, HeartHandshake, Users } from 'lucide-react';
+
+export default function AboutPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Services', id: '/services' }
+  ];
+
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <NavbarStyleApple navItems={navItems} brandName="ClinicName" />
+      <main className="flex min-h-screen flex-col items-center justify-between">
+        <div id="about-us" data-section="about-us">
+          <TextAbout
+            tag="Our Clinic"
+            title="Dedicated to Your Health and Well-being"
+            description="At ClinicName, we are committed to providing exceptional healthcare services with a focus on compassion, innovation, and patient-centered care. Our team of experienced professionals works tirelessly to ensure you receive the best possible treatment in a welcoming and supportive environment. We believe in building lasting relationships with our patients, guiding them on their journey to optimal health."
+            useInvertedBackground={false}
+          />
+        </div>
+        <div id="metrics" data-section="metrics">
+          <MetricCardThree
+            title="Our Achievements"
+            description="Years of trusted service and patient satisfaction."
+            animationType="slide-up"
+            metrics={[
+              { id: '1', icon: Award, title: 'Years in Service', value: '15+' },
+              { id: '2', icon: Users, title: 'Happy Patients', value: '10K+' },
+              { id: '3', icon: HeartHandshake, title: 'Specialists', value: '50+' }
+            ]}
+          />
+        </div>
+      </main>
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: 'Company',
+              items: [{ label: 'Home', href: '/' }, { label: 'Services', href: '/services' }]
+            },
+            {
+              title: 'Legal',
+              items: [{ label: 'Privacy Policy' }, { label: 'Terms of Service' }]
+            }
+          ]}
+          bottomLeftText="© 2024 ClinicName. All rights reserved."
+          bottomRightText="Built with Webild"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/booking/page.tsx b/src/app/booking/page.tsx
new file mode 100644
index 0000000..66229d9
--- /dev/null
+++ b/src/app/booking/page.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { ThemeProvider } from '@/app/ThemeProvider';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+
+export default function BookingPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleCentered
+        navItems={[
+          { name: 'Home', id: '/' },
+          { name: 'Booking', id: '/booking' },
+          { name: 'Contact', id: '/contact' }
+        ]}
+        brandName="Webild"
+      />
+      <div id="booking" data-section="booking">
+        <ContactCenter
+          tag="Appointments"
+          title="Book Your Session"
+          description="Schedule your appointment with us. Fill out the form below and we'll confirm your booking shortly."
+          inputPlaceholder="Your email for confirmation"
+          buttonText="Book Now"
+          termsText="By clicking 'Book Now', you agree to our booking terms and conditions."
+          background={{ variant: 'plain' }}
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
new file mode 100644
index 0000000..b08290a
--- /dev/null
+++ b/src/app/contact/page.tsx
@@ -0,0 +1,43 @@
+'use client';
+
+import { ThemeProvider } from '@/app/ThemeProvider';
+import NavbarStyleCentered from '@/components/navbar/NavbarStyleCentered/NavbarStyleCentered';
+import ContactCenter from '@/components/sections/contact/ContactCenter';
+
+export default function ContactPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="expand-hover"
+      defaultTextAnimation="entrance-slide"
+      borderRadius="rounded"
+      contentWidth="medium"
+      sizing="medium"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <NavbarStyleCentered
+        navItems={[
+          { name: 'Home', id: '/' },
+          { name: 'Booking', id: '/booking' },
+          { name: 'Contact', id: '/contact' }
+        ]}
+        brandName="Webild"
+      />
+      <div id="contact" data-section="contact">
+        <ContactCenter
+          tag="Get in Touch"
+          title="Contact Us"
+          description="Have questions or need support? Reach out to us using the form below, or find our contact details.\n\nEmail: info@example.com\nPhone: +1 (123) 456-7890\nAddress: 123 Webild Street, Suite 400, City, State, 12345"
+          inputPlaceholder="Your email address"
+          buttonText="Send Message"
+          termsText="By clicking 'Send Message', you agree to our privacy policy."
+          background={{ variant: 'plain' }}
+          useInvertedBackground={false}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 4b13001..61baf57 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import type { Metadata } from "next";
-import { Halant } from "next/font/google";
+import { Montserrat } from "next/font/google";
 import { Inter } from "next/font/google";
 import "./globals.css";
 import "@/lib/gsap-setup";
@@ -7,20 +7,16 @@ import { ServiceWrapper } from "@/components/ServiceWrapper";
 import Tag from "@/tag/Tag";
 import { getVisualEditScript } from "@/utils/visual-edit-script";
 
-const halant = Halant({
-  variable: "--font-halant",
-  subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
+const montserrat = Montserrat({
+  variable: "--font-montserrat",  subsets: ["latin"],
 });
 
 const inter = Inter({
-  variable: "--font-inter",
-  subsets: ["latin"],
+  variable: "--font-inter",  subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Webild components 2",
-  description: "Generated by create next app",
+  title: "Novara Clinic | Advanced Healthcare & Wellness",  description: "Novara Clinic provides exceptional medical services with a compassionate approach, focusing on advanced care and patient well-being."
 };
 
 export default function RootLayout({
@@ -32,7 +28,7 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <ServiceWrapper>
         <body
-          className={`${halant.variable} ${inter.variable} antialiased`}
+          className={`${montserrat.variable} ${inter.variable} antialiased`}
         >
           <Tag />
           {children}
@@ -45,4 +41,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 d39d6c0..7e4c7d4 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,49 @@
-import { redirect } from 'next/navigation';
+"use client";
+import { ThemeProvider } from "next-themes";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import HeroBillboardGallery from '@/components/sections/hero/HeroBillboardGallery';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
 
 export default function Home() {
-  redirect('/components');
-}
\ No newline at end of file
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Services', id: '/services' }
+  ];
+
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <NavbarStyleApple navItems={navItems} brandName="ClinicName" />
+      <main className="flex min-h-screen flex-col items-center justify-between">
+        <div id="hero" data-section="hero">
+          <HeroBillboardGallery
+            title="Your Health, Our Priority"
+            description="Providing exceptional care with compassion and expertise. Discover our comprehensive services designed for your well-being."
+            background={{ variant: 'radial-gradient' }}
+            mediaItems={[
+              { imageSrc: 'https://images.unsplash.com/photo-1576091160550-2173dba99934?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Doctor consulting patient' },
+              { imageSrc: 'https://images.unsplash.com/photo-1585435557343-3b0226bc7811?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Medical instruments' },
+              { imageSrc: 'https://images.unsplash.com/photo-1538108425244-a9578297b69c?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', imageAlt: 'Nurse taking blood pressure' }
+            ]}
+            buttons={[{ text: 'Explore Services', href: '/services' }]}          />
+        </div>
+      </main>
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: 'Company',
+              items: [{ label: 'About Us', href: '/about' }, { label: 'Services', href: '/services' }]
+            },
+            {
+              title: 'Legal',
+              items: [{ label: 'Privacy Policy' }, { label: 'Terms of Service' }]
+            }
+          ]}
+          bottomLeftText="© 2024 ClinicName. All rights reserved."
+          bottomRightText="Built with Webild"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
new file mode 100644
index 0000000..9d03e5c
--- /dev/null
+++ b/src/app/services/page.tsx
@@ -0,0 +1,84 @@
+"use client";
+import { ThemeProvider } from "next-themes";
+import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
+import ProductCardOne from '@/components/sections/product/ProductCardOne';
+import FooterSimple from '@/components/sections/footer/FooterSimple';
+
+export default function ServicesPage() {
+  const navItems = [
+    { name: 'Home', id: '/' },
+    { name: 'About', id: '/about' },
+    { name: 'Services', id: '/services' }
+  ];
+
+  const services = [
+    {
+      id: 's1',
+      name: 'General Check-up',
+      price: '$99',
+      imageSrc: 'https://images.unsplash.com/photo-1579684385137-d2e0717208d2?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'General Check-up'
+    },
+    {
+      id: 's2',
+      name: 'Dental Care',
+      price: '$120',
+      imageSrc: 'https://images.unsplash.com/photo-1599026466632-a567636e0996?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'Dental Care'
+    },
+    {
+      id: 's3',
+      name: 'Pediatric Services',
+      price: '$110',
+      imageSrc: 'https://images.unsplash.com/photo-1576091160418-e39b65e90069?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'Pediatric Services'
+    },
+    {
+      id: 's4',
+      name: 'Dermatology',
+      price: '$150',
+      imageSrc: 'https://images.unsplash.com/photo-1591130635956-fcf97f374776?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'Dermatology'
+    },
+    {
+      id: 's5',
+      name: 'Cardiology',
+      price: '$200',
+      imageSrc: 'https://images.unsplash.com/photo-1582719266395-5d55aa6ce124?q=80&w=2670&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
+      imageAlt: 'Cardiology'
+    }
+  ];
+
+  return (
+    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+      <NavbarStyleApple navItems={navItems} brandName="ClinicName" />
+      <main className="flex min-h-screen flex-col items-center justify-between">
+        <div id="services-offerings" data-section="services-offerings">
+          <ProductCardOne
+            title="Our Comprehensive Services"
+            description="Explore our range of healthcare services designed to meet your every need. From routine check-ups to specialized treatments, our experts are here for you."
+            products={services}
+            gridVariant="three-columns-all-equal-width"
+            animationType="slide-up"
+          />
+        </div>
+      </main>
+      <div id="footer" data-section="footer">
+        <FooterSimple
+          columns={[
+            {
+              title: 'Company',
+              items: [{ label: 'Home', href: '/' }, { label: 'About Us', href: '/about' }]
+            },
+            {
+              title: 'Legal',
+              items: [{ label: 'Privacy Policy' }, { label: 'Terms of Service' }]
+            }
+          ]}
+          bottomLeftText="© 2024 ClinicName. All rights reserved."
+          bottomRightText="Built with Webild"
+        />
+      </div>
+    </ThemeProvider>
+  );
+}
diff --git a/src/app/styles/base.css b/src/app/styles/base.css
index c719d19..62c2d18 100644
--- a/src/app/styles/base.css
+++ b/src/app/styles/base.css
@@ -24,5 +24,5 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: var(--font-dm-sans), sans-serif;
+  font-family: var(--font-montserrat), sans-serif;
 }
diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css
index f74c03d..aceda05 100644
--- a/src/app/styles/variables.css
+++ b/src/app/styles/variables.css
@@ -10,15 +10,15 @@
   --accent: #ffffff;
   --background-accent: #ffffff; */
 
-  --background: #F7F5F1;
-  --card: #E8EDE9;
-  --foreground: #4A5568;
-  --primary-cta: #C9A96E;
+  --background: #f5f5f5;
+  --card: #ffffff;
+  --foreground: #1c1c1c;
+  --primary-cta: #1f3251;
   --primary-cta-text: #F7F5F1;
-  --secondary-cta: #0D1B2A;
+  --secondary-cta: #ffffff;
   --secondary-cta-text: #F7F5F1;
-  --accent: #C9A96E;
-  --background-accent: #0D1B2A;
+  --accent: #15479c;
+  --background-accent: #a8cce8;
 
   /* text sizing - set by ThemeProvider */
   /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);