diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
new file mode 100644
index 0000000..0f72a7a
--- /dev/null
+++ b/components/navbar/index.tsx
@@ -0,0 +1,54 @@
+"use client";
+import { DesktopNavbar } from "./desktop-navbar";
+import { MobileNavbar } from "./mobile-navbar";
+import { motion } from "framer-motion";
+
+interface NavItem {
+  title: string;
+  link: string;
+}
+
+// Navigation items - updated for smooth scrolling
+const navItems: NavItem[] = [
+  {
+    title: "Home",
+    link: "/",
+  },
+  {
+    title: "Services",
+    link: "#services",
+  },
+  {
+    title: "Results",
+    link: "#results",
+  },
+  {
+    title: "Book a Call",
+    link: "#book",
+  },
+];
+
+export function NavBar() {
+  return (
+    <motion.nav
+      initial={{
+        y: -80,
+      }}
+      animate={{
+        y: 0,
+      }}
+      transition={{
+        ease: [0.6, 0.05, 0.1, 0.9],
+        duration: 0.8,
+      }}
+      className="max-w-7xl fixed top-6 mx-auto inset-x-0 z-50 w-[95%] lg:w-full"
+    >
+      <div className="hidden lg:block w-full bg-white/70 dark:bg-neutral-950/70 backdrop-blur-xl rounded-full border border-neutral-200/50 dark:border-neutral-800/50 shadow-2xl shadow-neutral-200/20 dark:shadow-black/40 px-4 py-2">
+        <DesktopNavbar navItems={navItems} />
+      </div>
+      <div className="flex h-full w-full items-center lg:hidden bg-white/70 dark:bg-neutral-950/70 backdrop-blur-xl rounded-2xl border border-neutral-200/50 dark:border-neutral-800/50 shadow-xl px-4 py-3">
+        <MobileNavbar navItems={navItems} />
+      </div>
+    </motion.nav>
+  );
+}