diff --git a/src/app/(account-pages)/(components)/Nav.tsx b/src/app/(account-pages)/(components)/Nav.tsx
new file mode 100644
index 0000000..13de319
--- /dev/null
+++ b/src/app/(account-pages)/(components)/Nav.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { Route } from "@/routers/types";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React from "react";
+
+export const Nav = () => {
+  const pathname = usePathname();
+
+  const listNav: Route[] = [
+    "/account",
+    "/account-savelists",
+    "/account-password",
+    "/account-billing",
+  ];
+
+  return (
+    <div className="container">
+      <div className="flex space-x-8 md:space-x-14 overflow-x-auto hiddenScrollbar">
+        {listNav.map((item) => {
+          const isActive = pathname === item;
+          return (
+            <Link
+              key={item}
+              href={item}
+              className={`block py-5 md:py-8 border-b-2 flex-shrink-0 capitalize ${
+                isActive
+                  ? "border-primary-500 font-medium"
+                  : "border-transparent"
+              }`}
+            >
+              {item.replace("-", " ").replace("/", " ")}
+            </Link>
+          );
+        })}
+      </div>
+    </div>
+  );
+};