diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
new file mode 100644
index 0000000..d6915ee
--- /dev/null
+++ b/components/navbar/index.tsx
@@ -0,0 +1,42 @@
+"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 - uncomment the pages you want to enable
+const navItems: NavItem[] = [
+  {
+    title: "Home",
+    link: "/",
+  },
+];
+
+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-4 mx-auto inset-x-0 z-50 w-[95%] lg:w-full"
+    >
+      <div className="hidden lg:block w-full">
+        <DesktopNavbar navItems={navItems} />
+      </div>
+      <div className="flex h-full w-full items-center lg:hidden">
+        <MobileNavbar navItems={navItems} />
+      </div>
+    </motion.nav>
+  );
+}