diff --git a/mms-frontend/src/App.js b/mms-frontend/src/App.js
index 82858c6..b301f59 100644
--- a/mms-frontend/src/App.js
+++ b/mms-frontend/src/App.js
@@ -10,6 +10,7 @@ import Home from './pages/Home';
 import UserSignup from './pages/UserSignup';
 import Header from './components/Header';
 import React from 'react';
+import Login from './pages/Login';
 
 function App() {
   return (
@@ -21,6 +22,7 @@ function App() {
           <Route path="/" component={Home} exact />
           <Route path="/install" component={AppInstall} />
           <Route path="/user-signup" component={UserSignup} />
+          <Route path="/Login" component={Login} />
         </Switch>
       </Router>
     </React.Fragment>
diff --git a/mms-frontend/src/components/Header.js b/mms-frontend/src/components/Header.js
index 38d3d3d..bbddd10 100644
--- a/mms-frontend/src/components/Header.js
+++ b/mms-frontend/src/components/Header.js
@@ -84,6 +84,11 @@ export default function Header() {
                                         history.push("/user-signup")
                                     }
                                 }>Sign Up</MenuItem>
+                                <MenuItem onClick={
+                                    () => {
+                                        history.push("/Login")
+                                    }
+                                }>Log In</MenuItem>
                                 <MenuItem onClick={
                                     () => {
                                         history.push("/install")
diff --git a/mms-frontend/src/css/Login.css b/mms-frontend/src/css/Login.css
new file mode 100644
index 0000000..cfd7b16
--- /dev/null
+++ b/mms-frontend/src/css/Login.css
@@ -0,0 +1,27 @@
+*{
+    box-sizing: border-box;
+	margin: 0;
+    padding: 0;
+}
+#MemeorTag {
+    background: lightcyan;
+    border: 2px solid #000;
+    border-radius: 50%;
+    font-size: 1.5rem;
+    padding: 1.5vw;
+}
+#LoginComponent {
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin: 5vh auto auto auto;
+    padding: 1vw;
+}
+input, button {
+    display: block;
+    padding: .5vw;
+    font-size: 1rem;
+    margin-bottom: .5vw;
+}
\ No newline at end of file
diff --git a/mms-frontend/src/pages/Login.js b/mms-frontend/src/pages/Login.js
new file mode 100644
index 0000000..d31a70d
--- /dev/null
+++ b/mms-frontend/src/pages/Login.js
@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import '../css/Login.css';
+
+export class Login extends Component {
+    render() {
+        return (
+            <div id="LoginComponent">
+                <div id="MemeorTag">memeor</div>
+                <h1>Member Login</h1>
+                <input type="text" placeholder="Username"></input>
+                <input type="text" placeholder="Password"></input>
+                <button>Log in</button>
+                <a href="/">Forgot password</a>
+                <p>New User? <a href="/user-signup">Sign Up</a></p>
+            </div>
+        )
+    }
+}
+
+export default Login;
\ No newline at end of file