diff --git a/package-lock.json b/package-lock.json
index a65aa5d..f6a3a5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,8 +11,10 @@
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
+        "axios": "^1.4.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
+        "react-router-dom": "^6.14.2",
         "react-scripts": "5.0.1",
         "react-speech-recognition": "^3.10.0",
         "web-vitals": "^2.1.4"
@@ -3261,6 +3263,14 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz",
+      "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A==",
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -5275,6 +5285,29 @@
         "node": ">=4"
       }
     },
+    "node_modules/axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -14229,6 +14262,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -14520,6 +14558,36 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz",
+      "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==",
+      "dependencies": {
+        "@remix-run/router": "1.7.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz",
+      "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==",
+      "dependencies": {
+        "@remix-run/router": "1.7.2",
+        "react-router": "6.14.2"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
@@ -19671,6 +19739,11 @@
         "source-map": "^0.7.3"
       }
     },
+    "@remix-run/router": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.7.2.tgz",
+      "integrity": "sha512-7Lcn7IqGMV+vizMPoEl5F0XDshcdDYtMI6uJLQdQz5CfZAwy3vvGKYSUk789qndt5dEC4HfSjviSYlSoHGL2+A=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -21187,6 +21260,28 @@
       "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz",
       "integrity": "sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g=="
     },
+    "axios": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.4.0.tgz",
+      "integrity": "sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==",
+      "requires": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "axobject-query": {
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz",
@@ -27478,6 +27573,11 @@
         }
       }
     },
+    "proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "psl": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz",
@@ -27689,6 +27789,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.14.2.tgz",
+      "integrity": "sha512-09Zss2dE2z+T1D03IheqAFtK4UzQyX8nFPWx6jkwdYzGLXd5ie06A6ezS2fO6zJfEb/SpG6UocN2O1hfD+2urQ==",
+      "requires": {
+        "@remix-run/router": "1.7.2"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.14.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.14.2.tgz",
+      "integrity": "sha512-5pWX0jdKR48XFZBuJqHosX3AAHjRAzygouMTyimnBPOLdY3WjzUSKhus2FVMihUFWzeLebDgr4r8UeQFAct7Bg==",
+      "requires": {
+        "@remix-run/router": "1.7.2",
+        "react-router": "6.14.2"
+      }
+    },
     "react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",
diff --git a/package.json b/package.json
index f961fee..0e1f7a8 100644
--- a/package.json
+++ b/package.json
@@ -6,8 +6,10 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
     "react-speech-recognition": "^3.10.0",
     "web-vitals": "^2.1.4"
diff --git a/src/App.js b/src/App.js
index 5d89ac6..772b4c6 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,12 +1,21 @@
 import React from 'react';
-import Header from './components/header';
-import Dictaphone from './components/Speech';
+import {BrowserRouter, Routes, Route} from 'react-router-dom';
+import Fund from './components/Fund'
+import Trust from './components/Trust'
+import Deposit from './components/Deposit'
+import Loan from './components/Loan'
+import Main from './pages/Main';
 const App = () =>{
     return(
-      <>
-      <Header />
-      <Dictaphone />
-      </>
+      <BrowserRouter>
+      <Routes>
+        <Route path='/' element={<Main />}></Route>
+        <Route path='/fund' element={<Fund />}></Route>
+        <Route path='/trust' element={<Trust />}></Route>
+        <Route path='/deposit' element={<Deposit />}></Route>
+        <Route path='/loan' element={<Loan />}></Route>
+      </Routes>
+      </BrowserRouter>
     )
 }
 export default App
\ No newline at end of file
diff --git a/src/assets/kb_logo.jpg b/src/assets/kb_logo.jpg
new file mode 100644
index 0000000..0d9bc1b
Binary files /dev/null and b/src/assets/kb_logo.jpg differ
diff --git a/src/assets/logo.jpg b/src/assets/logo.jpg
new file mode 100644
index 0000000..1d02d73
Binary files /dev/null and b/src/assets/logo.jpg differ
diff --git a/src/components/Dash.js b/src/components/Dash.js
new file mode 100644
index 0000000..6cde6eb
--- /dev/null
+++ b/src/components/Dash.js
@@ -0,0 +1,20 @@
+import React from "react";
+import "../styles/Dash.css";
+const Dash = () => {
+    return(
+        <div className="dashboard">
+            <div className="chatting">
+                <>채팅하는 곳 ㅎ,ㅎ</>
+            </div>
+            <input
+                type="text"
+                className="chat-input"
+            />
+            <button
+                type="button"
+                className="btn-send"
+            />
+        </div>      
+    )
+}
+export default Dash
\ No newline at end of file
diff --git a/src/components/Deposit.js b/src/components/Deposit.js
new file mode 100644
index 0000000..bc6ac65
--- /dev/null
+++ b/src/components/Deposit.js
@@ -0,0 +1,13 @@
+import React from "react";
+import Header from "./Header";
+import Nav from "./Nav";
+const Deposit = () =>{
+    return (
+        <>
+        <Header />
+        <Nav />
+        예적금
+        </>
+    )
+}
+export default Deposit
\ No newline at end of file
diff --git a/src/components/Fund.js b/src/components/Fund.js
new file mode 100644
index 0000000..06cfec8
--- /dev/null
+++ b/src/components/Fund.js
@@ -0,0 +1,13 @@
+import React from "react";
+import Header from "./Header";
+import Nav from "./Nav";
+const Fund = () =>{
+    return (
+        <>
+        <Header />
+        <Nav />
+         펀드
+        </>
+    )
+}
+export default Fund
\ No newline at end of file
diff --git a/src/components/Loan.js b/src/components/Loan.js
new file mode 100644
index 0000000..95b4098
--- /dev/null
+++ b/src/components/Loan.js
@@ -0,0 +1,13 @@
+import React from "react";
+import Header from "./Header";
+import Nav from "./Nav";
+const Loan = () =>{
+    return (
+        <>
+        <Header />
+        <Nav />
+         대출
+        </>
+    )
+}
+export default Loan
\ No newline at end of file
diff --git a/src/components/Nav.js b/src/components/Nav.js
index e69de29..1a8bfba 100644
--- a/src/components/Nav.js
+++ b/src/components/Nav.js
@@ -0,0 +1,56 @@
+import React from "react";
+import { useNavigate } from "react-router-dom"; // 수정된 import 문입니다
+import '../styles/component.css';
+
+const Nav = () => {
+    const navigate = useNavigate(); // useNavigate 훅을 사용합니다
+
+    return (
+        <nav className="navbar">
+            <ul className="navmenu">
+                <li>
+                    <span onClick={() => navigate('/fund')}>펀드</span>
+                    <ul>
+                        <li className="submenu">
+                            <span onClick={() => navigate('/fund/details')}>세부</span>
+                            <span onClick={() => navigate('/fund/details')}>세부</span>
+                            <span onClick={() => navigate('/fund/details')}>세부</span>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <span onClick={() => navigate('/trust')}>신탁</span>
+                    <ul>
+                        <li className="submenu">
+                            <span onClick={() => navigate('/trust/details')}>세부</span>
+                            <span onClick={() => navigate('/trust/details')}>세부</span>
+                            <span onClick={() => navigate('/trust/details')}>세부</span>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <span onClick={() => navigate('/deposit')}>예/적금</span>
+                    <ul>
+                        <li className="submenu">
+                            <span onClick={() => navigate('/deposit/details')}>세부</span>
+                            <span onClick={() => navigate('/deposit/details')}>세부</span>
+                            <span onClick={() => navigate('/deposit/details')}>세부</span>
+                        </li>
+                    </ul>
+                </li>
+                <li>
+                    <span onClick={() => navigate('/loan')}>대출</span>
+                    <ul>
+                        <li className="submenu">
+                            <span onClick={() => navigate('/loan/details')}>세부</span>
+                            <span onClick={() => navigate('/loan/details')}>세부</span>
+                            <span onClick={() => navigate('/loan/details')}>세부</span>
+                        </li>
+                    </ul>
+                </li>
+            </ul>
+        </nav>
+    )
+}
+
+export default Nav;
diff --git a/src/components/Speech.js b/src/components/Speech.js
deleted file mode 100644
index 98c4c7c..0000000
--- a/src/components/Speech.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
-
-const Dictaphone = () => {
-  const {
-    transcript,
-    listening,
-    resetTranscript,
-    browserSupportsSpeechRecognition
-  } = useSpeechRecognition();
-
-  if (!browserSupportsSpeechRecognition) {
-    return <span>Browser doesn't support speech recognition.</span>;
-  }
-
-  // 래퍼 함수를 이용하여 버튼 클릭 시 함수 호출
-  const handleStartListening = () => {
-    SpeechRecognition.startListening({ continuous: true, language: 'ko' });
-  };
-
-  return (
-    <div>
-      <p>Microphone: {listening ? 'on' : 'off'}</p>
-      <button onClick={handleStartListening}>Start</button>
-      <button onClick={SpeechRecognition.stopListening}>Stop</button>
-      <button onClick={resetTranscript}>Reset</button>
-      <p>{transcript}</p>
-    </div>
-  );
-};
-
-export default Dictaphone;
diff --git a/src/components/Trust.js b/src/components/Trust.js
new file mode 100644
index 0000000..2268518
--- /dev/null
+++ b/src/components/Trust.js
@@ -0,0 +1,13 @@
+import React from "react";
+import Header from "./Header";
+import Nav from "./Nav";
+const Trust = () =>{
+    return (
+        <>
+        <Header />
+        <Nav />
+        신탁
+        </>
+    )
+}
+export default Trust;
\ No newline at end of file
diff --git a/src/components/header.js b/src/components/header.js
index 1a0bde4..31eba4c 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -1,9 +1,14 @@
 import React from "react";
+import '../styles/component.css'
 const Header = () => {
+    
     return(
-        <>
-        헤더
-        </>
+        <div>
+            <div className="head">
+                <div className="headMenu" alt="logo" src="../img/logo.jpg"></div>
+                <div className="headMenu" alt="kb_logo" src="img/kb_logo.jpg"></div>
+            </div>
+        </div>
     )
 }
 export default Header
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index d563c0f..347dcca 100644
--- a/src/index.js
+++ b/src/index.js
@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
-import reportWebVitals from './reportWebVitals';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
@@ -14,4 +13,4 @@ root.render(
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
+
diff --git a/src/pages/Main.js b/src/pages/Main.js
new file mode 100644
index 0000000..f35f654
--- /dev/null
+++ b/src/pages/Main.js
@@ -0,0 +1,14 @@
+import React from "react";
+import Nav from "../components/Nav";
+import Header from "../components/Header.js";
+import Dash from "../components/Dash";
+const Main = () => {
+    return (
+        <>
+            <Header />
+            <Nav />
+            <Dash />
+        </>
+    )
+}
+export default Main
\ No newline at end of file
diff --git a/src/styles/Dash.css b/src/styles/Dash.css
new file mode 100644
index 0000000..388e5d6
--- /dev/null
+++ b/src/styles/Dash.css
@@ -0,0 +1,32 @@
+.dashboard{
+    width: 70%;
+    height: 80%;
+    position: absolute;
+    right: 0px;
+    bottom: 0px;
+    background-color: lightcyan;
+}
+
+.chatting{
+    background-color: lightpink;
+    width: 80%;
+    height: 80%;
+    margin:  5% auto;
+    border-radius: 30px;
+}
+
+input{
+    width: 70%;
+    height: 6%;
+    margin-left:10%;
+    background-color: gainsboro;
+    border: 0px;
+    border-radius: 30px;
+}
+
+button{
+    margin-left: 3%;
+    width: 7%;
+    height: 6%;
+    border-radius: 3px;
+}
\ No newline at end of file
diff --git a/src/styles/component.css b/src/styles/component.css
new file mode 100644
index 0000000..8c72761
--- /dev/null
+++ b/src/styles/component.css
@@ -0,0 +1,73 @@
+.head {
+    width: 100%;
+    background-color: blanchedalmond;
+    padding: 15px 0px;
+    text-align: right;
+}
+
+.headMenu {
+    color: white;
+    margin: 9px;
+    text-decoration: none;
+}
+
+.navbar {
+    background-color: yellow;
+    display: flex;
+    position: relative;
+    width: 200px;
+    height: 600px;
+    padding: 15px 0px;
+    display: flex;
+
+}
+
+.navmenu {
+    position: absolute;
+    right: 0;
+    height: calc(100% - 16px);
+    width: 25vw;
+    max-width: 300px;
+    background-color: yellow;
+    z-index: 999;
+    float: right;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    padding-top: 16px;
+}
+
+
+li {
+    list-style: none;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+nav > ul > li {
+    border-left: 2px solid #606060;
+    width: 100;
+    cursor: pointer;
+    justify-content:space-between;
+
+  }
+
+ul > li > span {
+    display: flex;
+    margin: 8px;
+    font-size: 13px;
+  }
+
+nav > ul > li > span {
+    display: flex;
+    margin: 8px;
+    font-size: 15px;
+  }
+
+  ul > li > span:hover {
+    padding-bottom: 5px;
+    background-color: #fbfed3;
+    border: none;
+    font-weight: 600;
+  }
\ No newline at end of file