diff --git a/fe/src/components/Nav.tsx b/fe/src/components/Nav.tsx
deleted file mode 100644
index c3a00e1..0000000
--- a/fe/src/components/Nav.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from "react";
-
-const NavContext = React.createContext({
-  links: [{ name: "", url: "" }],
-});
-
-type Props = {
-  links: { name: string; url: string }[];
-  style?: React.CSSProperties;
-  children: React.ReactNode;
-};
-
-export function NavWrapper({ links, style, children }: Props) {
-  const contextValue = { links };
-
-  return (
-    <NavContext.Provider value={contextValue}>
-      <nav style={style}>{children}</nav>
-    </NavContext.Provider>
-  );
-}
-
-export function NavList({
-  children,
-  style,
-}: {
-  children: React.ReactNode;
-  style: React.CSSProperties;
-}) {
-  return <ul style={style}>{children}</ul>;
-}
-
-export function NavItem({ style }: { style: React.CSSProperties }) {
-  const { links } = React.useContext(NavContext);
-
-  return (
-    <>
-      {links.map((link: { name: string; url: string }) => (
-        <li key={link.url}>
-          <a style={style} href={link.url}>
-            {link.name}
-          </a>
-        </li>
-      ))}
-    </>
-  );
-}
-
-NavWrapper.NavList = NavList;
-NavWrapper.NavItem = NavItem;
diff --git a/fe/src/components/NavBar.tsx b/fe/src/components/NavBar.tsx
new file mode 100644
index 0000000..9392b0f
--- /dev/null
+++ b/fe/src/components/NavBar.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+
+type Props = {
+  navItems: React.ReactElement[];
+  style?: React.CSSProperties;
+  children: React.ReactNode;
+};
+
+const NavContext = React.createContext({ navItems: [<div>initial</div>] });
+
+export function NavBar({ navItems, style, children }: Props) {
+  const contextValue = { navItems };
+
+  return (
+    <NavContext.Provider value={contextValue}>
+      <nav style={style}>{children}</nav>
+    </NavContext.Provider>
+  );
+}
+
+export function NavList({
+  children,
+  style,
+}: {
+  children: React.ReactNode;
+  style: React.CSSProperties;
+}) {
+  return <ul style={style}>{children}</ul>;
+}
+
+export function NavItem() {
+  const { navItems } = React.useContext(NavContext);
+
+  return (
+    <>
+      {navItems.map((navItem, idx) => (
+        <li key={idx}>{navItem}</li>
+      ))}
+    </>
+  );
+}
+
+NavBar.NavList = NavList;
+NavBar.NavItem = NavItem;
diff --git a/fe/src/components/common/Header.tsx b/fe/src/components/common/Header.tsx
index de872d4..98db711 100644
--- a/fe/src/components/common/Header.tsx
+++ b/fe/src/components/common/Header.tsx
@@ -1,15 +1,23 @@
 import TVTickerTapeWidget from "../TradingViewWidgets/TVTickerTape";
-import { NavWrapper } from "../Nav";
+import { NavBar } from "../NavBar";
 import styled from "styled-components";
 import Search from "../Search";
 import UserControls from "../common/UserControls";
 import Routes from "router/Routes";
 
 export default function Header() {
-  const headerNavLinks = [
-    { name: "Portfolio", url: Routes.PORTFOLIO },
-    { name: "Watchlist", url: Routes.WATCHLIST },
-    { name: "Indices", url: Routes.INDICES },
+  const navItemList = [
+    <div
+      style={navItemStyle}
+      onClick={() => console.log("포트폴리오 Dropdown 요소가 들어갈자리")}>
+      Portfolio
+    </div>,
+    <a style={navItemStyle} href={Routes.WATCHLIST}>
+      Watchlist
+    </a>,
+    <a style={navItemStyle} href={Routes.INDICES}>
+      Indices
+    </a>,
   ];
 
   return (
@@ -17,11 +25,11 @@ export default function Header() {
       <StyledHeader>
         <HeaderLeft>
           <StyledBrandIdentity>FineAnts</StyledBrandIdentity>
-          <NavWrapper style={navStyles} links={headerNavLinks}>
-            <NavWrapper.NavList style={navListStyle}>
-              <NavWrapper.NavItem style={navItemStyle} />
-            </NavWrapper.NavList>
-          </NavWrapper>
+          <NavBar style={navBarStyles} navItems={navItemList}>
+            <NavBar.NavList style={navListStyle}>
+              <NavBar.NavItem />
+            </NavBar.NavList>
+          </NavBar>
         </HeaderLeft>
         <HeaderRight>
           <Search />
@@ -61,7 +69,7 @@ const StyledBrandIdentity = styled.div`
   font-weight: bold;
 `;
 
-const navStyles = {
+const navBarStyles = {
   backgroundColor: "#ffffff",
 };