diff --git a/server/client/src/Components/Menu.js b/server/client/src/Components/Menu.js
index 166f9dd567c645f7395cba6a7e81a920edf4dc29..16e77642bae16b3ccdadc38715249ec4d5867139 100644
--- a/server/client/src/Components/Menu.js
+++ b/server/client/src/Components/Menu.js
@@ -9,6 +9,10 @@ const Nav = styled.nav`
     a {
         color: #ffffff;
     }
+
+    & .logoutBtn:hover {
+        text-decoration: underline;
+    }
 `
 
 function Menu() {
@@ -49,9 +53,13 @@ function Menu() {
                             대관 확인/취소</Link>
                     </li>
                 </ul>
-                <div>
-                    <div>{name}님 안녕하세요.</div>
-                    <button onClick={logout} type="button">로그아웃</button>
+                <div className="h-100 mr-3">
+                    <div className="text-white text-right font-weight-light"><small>{name}님 안녕하세요</small></div>
+                    <div className="text-white text-right font-weight-light"><small>
+                        <Link to={{
+                            pathname: `/change/${localStorage.getItem('_id')}`,
+                            state: { id: localStorage.getItem('_id') },
+                        }}>비밀번호 변경</Link> / <span className="logoutBtn" onClick={logout} >로그아웃</span></small></div>
                 </div>
             </div>
         </Nav>
diff --git a/server/client/src/Pages/HomePage.js b/server/client/src/Pages/HomePage.js
index 489c8dd1970e549027345fa5a4df11177963d03b..fcfe233e010278bd227bc205b9179d22c508e734 100644
--- a/server/client/src/Pages/HomePage.js
+++ b/server/client/src/Pages/HomePage.js
@@ -10,10 +10,6 @@ function Home() {
                 home
                 <button><Link to="/login">로그인</Link></button>
                 <button><Link to="/signup">회원가입</Link></button>
-                <button><Link to={{
-                            pathname: `/change/${localStorage.getItem('_id')}`,
-                            state: { id: localStorage.getItem('_id') },
-                        }}>비밀번호 수정</Link></button>
             </div>
         </div>
     )
diff --git a/server/client/src/Pages/LoginPage.js b/server/client/src/Pages/LoginPage.js
index 6d82cc06dcc82aa23c8377f8e4acfe3de1de7b35..b2dfccf5aefd2617edda4b30915ba8bbf2268f6d 100644
--- a/server/client/src/Pages/LoginPage.js
+++ b/server/client/src/Pages/LoginPage.js
@@ -109,7 +109,7 @@ function Login() {
                 <div className={mobile ? "mob-head" : ""}>
                     <img className={mobile ? "mob-img" : "img-fluid"} src={Logo} />
                     <div className={"d-flex " + (mobile ? "align-items-center" : "justify-content-center")}>
-                        <h1 className="font-weight-bold text-white">고려대학교<br />대관 서비스</h1>
+                        <h1 className="font-weight-bold text-white text-center">고려대학교<br/>대관 서비스</h1>
                     </div>
                 </div>
             </Asd>
@@ -132,7 +132,7 @@ function Login() {
                             if (res.status === 404) return alert(res.data.error)
 
                             localStorage.setItem('token', res.data.token);
-                            localStorage.setItem('id', res.data.users._id);
+                            localStorage.setItem('_id', res.data.users._id);
                             localStorage.setItem('name', res.data.users.name);
                             setState(true);
                         })
diff --git a/server/client/src/Pages/NoticePage.js b/server/client/src/Pages/NoticePage.js
index 14b4cb120505d0bb2d2b309e3d9fdfae389d802a..a23c2c3a5b64287d200e9b28f7fa38da5fb2d406 100644
--- a/server/client/src/Pages/NoticePage.js
+++ b/server/client/src/Pages/NoticePage.js
@@ -1,6 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import Menu from '../Components/Menu';
 import axios from 'axios';
+import styled from 'styled-components';
 
 function Notice() {
     const [notices, setNotices] = useState([]);
@@ -9,6 +10,19 @@ function Notice() {
         getNotice();
     }, []);
 
+    function dateForm(day) {
+        const post_day = new Date(day);
+        let year = post_day.getFullYear();
+        let month = post_day.getMonth() + 1;
+        let date = post_day.getDate();
+
+        month = month < 10 ? '0' + month : month;
+        date = date < 10 ? '0' + date : date;
+
+        const new_date = year + "-" + month + "-" + date;
+        return new_date
+    }
+
     function getNotice() {
         axios.get(`/notices`)
             .then(res => {
@@ -25,13 +39,32 @@ function Notice() {
     return (
         <div>
             <Menu />
-            <div className="container">
-                <div className="row">
-                    <div className="col-12">
-                        {notices.map((notice) => <div>{notice.notice_title}</div>)}
+            <div className="container-fluid">
+                <div className="row justify-content-center vw-100 vh-90">
+                    <div className="col-md-7 col-12">
+
+                        <h2 className="p-3 border-bottom">공지사항</h2>
+
+                        <div id="accordion w-90 pt-1">
+                            {notices.map((notice, index) =>
+                                <div className="card">
+                                    <div className="card-header collapsed card-link w-100 row m-0 p-1" id={"Hnotice_" + index} data-toggle="collapse" href={"#notice_" + index}>
+                                        <div>
+                                            <div className="col-6 p-0">{notice.notice_title}</div>
+                                            <div className="col-3 p-0 text-center">{notice.notice_author}</div>
+                                            <div className="col-3 p-0 text-right">{dateForm(notice.post_date)}</div>
+                                        </div>
+                                    </div>
+                                    <div id={"notice_" + index} aria-labelledby={"Hnotice_" + index} className="collapse" data-parent="#accordion">
+                                        <div className="card-body">{notice.notice_content}</div>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+
                     </div>
-                </div>
-            </div>
+                </div >
+            </div >
         </div>
     )
 }
diff --git a/server/client/src/index.js b/server/client/src/index.js
index 72a7ab9a6e3cff8b1c4a5cb5979aa701bdaa898d..95f5b339c106f4f2d81abeba692268d0b31336be 100644
--- a/server/client/src/index.js
+++ b/server/client/src/index.js
@@ -2,8 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import * as serviceWorker from './serviceWorker';
 import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
-// import 'bootstrap';
-// import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.css';
 import axios from 'axios';
 import { PrivateRoute } from './Components/PrivateRoute';