diff --git a/src/app/page.tsx b/src/app/page.tsx
index b02c5dc..a4e423d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -29,8 +29,9 @@ export default function LandingPage() {
           <NavbarLayoutFloatingInline
             navItems={[
               { name: "Home", id: "hero" },
-              { name: "Services", id: "features" },
-              { name: "Testimonials", id: "testimonials" },
+              { name: "Services", id: "/services" },
+              { name: "Portfolio", id: "/portfolio" },
+              { name: "Pricing", id: "/pricing" },
               { name: "Contact", id: "contact" },
             ]}
             brandName="SecureFence"
@@ -119,7 +120,7 @@ export default function LandingPage() {
         <div id="footer" data-section="footer">
           <FooterLogoEmphasis
             columns={[
-              { items: [{ label: "Services", href: "#features" }, { label: "About Us", href: "#" }, { label: "Contact", href: "#contact" }] },
+              { items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "#contact" }] },
               { items: [{ label: "Privacy Policy", href: "#" }, { label: "Terms of Service", href: "#" }] },
             ]}
             logoText="SecureFence"
diff --git a/src/app/portfolio/page.tsx b/src/app/portfolio/page.tsx
new file mode 100644
index 0000000..ddba24a
--- /dev/null
+++ b/src/app/portfolio/page.tsx
@@ -0,0 +1,15 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function PortfolioPage() {
+  const navItems = [{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Portfolio", id: "/portfolio" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }];
+  return (
+    <ThemeProvider>
+      <NavbarLayoutFloatingInline navItems={navItems} brandName="SecureFence" />
+      <div className="min-h-[60vh] flex items-center justify-center"><h1 className="text-4xl font-bold">Our Portfolio</h1></div>
+      <FooterLogoEmphasis columns={[{ items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] }]} logoText="SecureFence" />
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/pricing/page.tsx b/src/app/pricing/page.tsx
new file mode 100644
index 0000000..8e56e6f
--- /dev/null
+++ b/src/app/pricing/page.tsx
@@ -0,0 +1,22 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import PricingCardNine from '@/components/sections/pricing/PricingCardNine';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function PricingPage() {
+  const navItems = [{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Portfolio", id: "/portfolio" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }];
+  return (
+    <ThemeProvider>
+      <NavbarLayoutFloatingInline navItems={navItems} brandName="SecureFence" />
+      <PricingCardNine
+        animationType="slide-up"
+        title="Our Pricing Plans"
+        description="Simple, transparent pricing for all residential projects."
+        textboxLayout="default"
+        plans={[{ id: "basic", title: "Basic", price: "$500", period: "avg", features: ["Standard installation", "1 year warranty"], button: { text: "Get Quote" } }]}
+      />
+      <FooterLogoEmphasis columns={[{ items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] }]} logoText="SecureFence" />
+    </ThemeProvider>
+  );
+}
\ No newline at end of file
diff --git a/src/app/services/page.tsx b/src/app/services/page.tsx
new file mode 100644
index 0000000..34e5af4
--- /dev/null
+++ b/src/app/services/page.tsx
@@ -0,0 +1,20 @@
+"use client";
+import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
+import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
+import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
+import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis';
+
+export default function ServicesPage() {
+  const navItems = [{ name: "Home", id: "/" }, { name: "Services", id: "/services" }, { name: "Portfolio", id: "/portfolio" }, { name: "Pricing", id: "/pricing" }, { name: "Contact", id: "/contact" }];
+  return (
+    <ThemeProvider>
+      <NavbarLayoutFloatingInline navItems={navItems} brandName="SecureFence" />
+      <FeatureCardTwentyOne
+        title="Our Comprehensive Services"
+        description="Detailed breakdown of our professional fencing solutions."
+        accordionItems={[{ id: "1", title: "Full Service Installation", content: "End-to-end installation process." }, { id: "2", title: "Repair & Maintenance", content: "Fast and reliable repairs." }]}
+      />
+      <FooterLogoEmphasis columns={[{ items: [{ label: "Services", href: "/services" }, { label: "Portfolio", href: "/portfolio" }, { label: "Pricing", href: "/pricing" }, { label: "Contact", href: "/contact" }] }]} logoText="SecureFence" />
+    </ThemeProvider>
+  );
+}
\ No newline at end of file