diff --git a/components/navbar/index.tsx b/components/navbar/index.tsx
new file mode 100644
index 0000000..98afd9b
--- /dev/null
+++ b/components/navbar/index.tsx
@@ -0,0 +1,60 @@
+"use client";
+import { DesktopNavbar } from "./desktop-navbar";
+import { MobileNavbar } from "./mobile-navbar";
+import { motion } from "framer-motion";
+import { useLanguage } from "@/context/language-provider";
+import { LanguageSwitcher } from "@/components/language-switcher";
+
+interface NavItem {
+  title: string;
+  link: string;
+}
+
+export function NavBar() {
+  const { t } = useLanguage();
+
+  const navItems: NavItem[] = [
+    {
+      title: t("home"),
+      link: "/",
+    },
+    {
+      title: t("report"),
+      link: "#report",
+    },
+    {
+      title: t("safety"),
+      link: "#safety",
+    },
+  ];
+  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">
+        <div className="flex items-center justify-between">
+          <DesktopNavbar navItems={navItems} />
+          <div className="fixed right-10 top-7 z-[60]">
+            <LanguageSwitcher />
+          </div>
+        </div>
+      </div>
+      <div className="flex h-full w-full items-center lg:hidden">
+        <MobileNavbar navItems={navItems} />
+        <div className="ml-auto mr-4">
+          <LanguageSwitcher />
+        </div>
+      </div>
+    </motion.nav>
+  );
+}