diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index ae744f3e5698ac73d0c8b8ae36e105a3248fd378..7d61652eabd3208fe7c70633b608986fc46dfc73 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -22,7 +22,7 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
-        "react-scripts": "5.0.1"
+        "react-scripts": "^5.0.1"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
diff --git a/frontend/package.json b/frontend/package.json
index 3b527825513d9545983806d40fde99e9009538f4..4d6a80317e601dac2dfaba231b4b62c8ef49123e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,7 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
-    "react-scripts": "5.0.1"
+    "react-scripts": "^5.0.1"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/frontend/src/App.js b/frontend/src/App.js
index b43e8d06c905283897f35f5be0c77b4303558cb1..75f4ca4becd0a4695e4a1f93f33066ab7feace16 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,8 +1,22 @@
 import "./App.css";
+import {Routes, Route } from 'react-router-dom';
+import Header from "./Header.js";
+import Main from "./Main.js";
 import GoogleLoginButton from "./GoogleLoginButton.js";
 
 function App() {
-  return <GoogleLoginButton/>;
+  return(
+    <div className="App">
+      <Header/>
+      <Routes>
+        <Route path="/" element={<Main/>}></Route>
+        <Route path="/search" element={<h1>검색</h1>}></Route>
+    {/* <Route path="/postwrite" element={<PostWrite/>}></Route> */}
+      </Routes>
+      <GoogleLoginButton/>
+      {/* <Footer/> */}
+    </div>
+    );
 }
 
 export default App;
\ No newline at end of file
diff --git a/frontend/src/Header.css b/frontend/src/Header.css
new file mode 100644
index 0000000000000000000000000000000000000000..14b0bf3a6ac90cd026a52340c503787fd825a681
--- /dev/null
+++ b/frontend/src/Header.css
@@ -0,0 +1,35 @@
+.header {
+    /* background-color:$white; */
+    /* z-index: 999; */
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    /* height: 70px; */
+    border-bottom: 1px solid;
+    /* overflow: auto */
+}
+
+.logo_image {
+    width: 350px;
+    /* height: ; */
+    float: left;
+    margin-bottom: 10px;
+}
+
+.menu_list{
+    display: flex;
+    flex-direction: row;
+    padding: 0px;
+    margin: 0px;
+    /* margin-left: 500px; */
+    float: right;
+}
+
+li{
+    /* font-family: '', cursive; */
+    list-style-type: none;
+    margin-right: 3rem;
+    font-size: 1.2rem;
+    font-weight: 100;
+}
\ No newline at end of file
diff --git a/frontend/src/Header.js b/frontend/src/Header.js
index 7a0ebc4e0ed18fdd74e5f8ab705fa349337220dd..f3d61773084d78b614049907fc9cc691d53b8120 100644
--- a/frontend/src/Header.js
+++ b/frontend/src/Header.js
@@ -1,5 +1,6 @@
 import {Link} from "react-router-dom";
 import logo from './logo.png';
+import './Header.css';
 
 function Header(){
     return(
diff --git a/frontend/src/Router.js b/frontend/src/Router.js
deleted file mode 100644
index ff1cafa909a4441ab2bf9eed644ceb75173f7e1f..0000000000000000000000000000000000000000
--- a/frontend/src/Router.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import Main from './Main.js';
-
-function Router() {
-  return (
-    <div className="Router">
-            <BrowserRouter>
-                {/* <Header/> */}
-                <Routes>
-                    <Route path="/" element={<Main/>}></Route>
-                    {/* <Route path="/search" element={<Search/>}></Route> */}
-                    {/* <Route path="/postwrite" element={<PostWrite/>}></Route> */}
-                </Routes>
-                {/* <Footer/> */}
-            </BrowserRouter>
-    </div>
-  );
-}
-
-export default Router;
diff --git a/frontend/src/index.js b/frontend/src/index.js
index bfae93475e871b851724dacb90c21dd588c26279..532f33b6b06e3fb01b749b217e7da9f09c8fb5f1 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -3,16 +3,12 @@ import ReactDOM from "react-dom/client";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import "./index.css";
 import App from "./App";
-import Main from "./Main";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<App />} />
-		    <Route path="/main" element={<Main />} />
-      </Routes>
+      <App/>
     </BrowserRouter>
   </React.StrictMode>
 );