diff --git a/mpwo_client/public/index.html b/mpwo_client/public/index.html
index ed0ebafa..678b433b 100644
--- a/mpwo_client/public/index.html
+++ b/mpwo_client/public/index.html
@@ -4,37 +4,18 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <link
+      href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css"
+      rel="stylesheet"
+    >
+    <title>mpwo</title>
   </head>
   <body>
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git a/mpwo_client/src/components/App.jsx b/mpwo_client/src/components/App.jsx
index 948a3986..d1ad0291 100644
--- a/mpwo_client/src/components/App.jsx
+++ b/mpwo_client/src/components/App.jsx
@@ -1,9 +1,9 @@
 import React from 'react'
 
-import logo from '../logo.svg'
 import './App.css'
+import NavBar from './NavBar'
 
-class App extends React.Component {
+export default class App extends React.Component {
   constructor(props) {
     super(props)
     this.props = props
@@ -12,16 +12,11 @@ class App extends React.Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
+        <NavBar />
+        <p className="App-body">
+          App in progress
         </p>
       </div>
     )
   }
 }
-
-export default App
diff --git a/mpwo_client/src/components/NavBar.jsx b/mpwo_client/src/components/NavBar.jsx
new file mode 100644
index 00000000..42479f58
--- /dev/null
+++ b/mpwo_client/src/components/NavBar.jsx
@@ -0,0 +1,37 @@
+import React from 'react'
+
+export default class NavBar extends React.Component {
+  constructor(props) {
+    super(props)
+    this.props = props
+  }
+
+  render() {
+    return (
+    <header>
+      <nav className="navbar navbar-expand-lg navbar-light bg-light">
+        <span className="navbar-brand">mpwo</span>
+        <button
+            className="navbar-toggler"
+            type="button"
+            data-toggle="collapse"
+            data-target="#navbarSupportedContent"
+            aria-controls="navbarSupportedContent"
+            aria-expanded="false"
+            aria-label="Toggle navigation"
+        >
+          <span className="navbar-toggler-icon" />
+        </button>
+
+        <div className="collapse navbar-collapse" id="navbarSupportedContent">
+          <ul className="navbar-nav mr-auto">
+            <li className="nav-item">
+              <a className="nav-link" href="/">Home</a>
+            </li>
+          </ul>
+        </div>
+      </nav>
+    </header>
+    )
+  }
+}
