diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
new file mode 100644
index 0000000..dfe6bbd
--- /dev/null
+++ b/components/navbar/index.tsx
@@ -0,0 +1,41 @@
+"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: "Inicio", link: "/" },
+  { title: "Catálogo", link: "/#catalog" },
+  { title: "Rastrear Pedido", link: "/tracking" },
+];
+
+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>
+  );
+}