diff --git a/components/navbar/navbar-item.tsx b/components/navbar/navbar-item.tsx
new file mode 100644
index 0000000..7c291a4
--- /dev/null
+++ b/components/navbar/navbar-item.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import Link from "next/link";
+import { ReactNode } from "react";
+
+type Props = {
+  href: string;
+  children: ReactNode;
+  className?: string;
+  target?: "_blank";
+};
+
+export function NavBarItem({
+  children,
+  href,
+  target,
+  className = "flex items-center justify-center text-sm leading-[110%] px-4 py-2 rounded-md hover:bg-[#F5F5F5] dark:hover:bg-neutral-800 hover:text-black text-muted dark:text-muted-dark",
+}: Props) {
+  return (
+    <Link
+      href={href}
+      className={className}
+      target={target}
+    >
+      {children}
+    </Link>
+  );
+}