diff --git a/src/App.tsx b/src/App.tsx
index e77c373..853ef7f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,10 +1,12 @@
 import './App.css'
+import NavBar from './components/nav_bar/NavBar'
 import Catalog from './pages/catalog/Catalog'
 import Login from './pages/login/Login'
 
 function App() {
   return (
     <>
+      <NavBar/>
       <Login/>
       <Catalog/>
     </>
diff --git a/src/components/index.ts b/src/components/index.ts
new file mode 100644
index 0000000..74a7365
--- /dev/null
+++ b/src/components/index.ts
@@ -0,0 +1,2 @@
+export * from './menu/'
+export * from './nav_bar/'
diff --git a/src/components/nav_bar/NavBar.tsx b/src/components/nav_bar/NavBar.tsx
new file mode 100644
index 0000000..cdbbdaf
--- /dev/null
+++ b/src/components/nav_bar/NavBar.tsx
@@ -0,0 +1,17 @@
+import Menu from "./components/menu/Menu";
+import Profile from "./components/profile/Profile";
+
+const NavBar = () => {
+  return (
+    <>
+      <div>
+        <Menu/>
+      </div>
+      <div>
+        <Profile/>
+      </div>
+    </>
+  )
+}
+
+export default NavBar;
diff --git a/src/components/nav_bar/components/intex.ts b/src/components/nav_bar/components/intex.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/nav_bar/components/menu/Menu.tsx b/src/components/nav_bar/components/menu/Menu.tsx
new file mode 100644
index 0000000..b08ef86
--- /dev/null
+++ b/src/components/nav_bar/components/menu/Menu.tsx
@@ -0,0 +1,14 @@
+const Menu = () => {
+  return (
+    <>
+      <button>Menu</button>
+      <ul>
+        <li>Iniciar Sesión</li>
+        <li>Catalogo</li>
+        <li>Compras</li>
+      </ul>
+    </>
+  )
+}
+
+export default Menu;
diff --git a/src/components/nav_bar/components/menu/index.ts b/src/components/nav_bar/components/menu/index.ts
new file mode 100644
index 0000000..55dbcb3
--- /dev/null
+++ b/src/components/nav_bar/components/menu/index.ts
@@ -0,0 +1 @@
+export * from './Menu.tsx'
diff --git a/src/components/nav_bar/components/profile/Profile.tsx b/src/components/nav_bar/components/profile/Profile.tsx
new file mode 100644
index 0000000..cc539c4
--- /dev/null
+++ b/src/components/nav_bar/components/profile/Profile.tsx
@@ -0,0 +1,9 @@
+const Profile = () => {
+  return (
+    <>
+      <p>Alejandro - Admin</p>
+    </>
+  )
+}
+
+export default Profile;
diff --git a/src/components/nav_bar/index.ts b/src/components/nav_bar/index.ts
new file mode 100644
index 0000000..e69de29