diff --git a/client/public/assets/loginimg.png b/client/public/assets/loginimg.png
new file mode 100644
index 0000000..6f25f53
Binary files /dev/null and b/client/public/assets/loginimg.png differ
diff --git a/client/public/assets/signupimg.png b/client/public/assets/signupimg.png
new file mode 100644
index 0000000..fcbc990
Binary files /dev/null and b/client/public/assets/signupimg.png differ
diff --git a/client/src/App.js b/client/src/App.js
index 08fcd8d..a967d3e 100644
--- a/client/src/App.js
+++ b/client/src/App.js
@@ -1,14 +1,25 @@
+import React from 'react';
 import logo from './logo.svg';
 import './App.css';
+import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+import {Row,Col} from 'react-bootstrap';
+import Login from "./components/LoginComponent";
+import SignUp from "./components/SignupComponent";
 
 function App() {
-  return (
+  return (<Router>
     <div className="App">
-      <header className="App-header">
-        <h1>Hello, All-Notes :)</h1>
-
-      </header>
-    </div>
+<div className="auth-wrapper">
+        <div className="auth-inner">     
+       
+          <Switch>
+            <Route exact path='/' component={Login} />
+            <Route path="/sign-in" component={Login} />
+            <Route path="/sign-up" component={SignUp} />
+          </Switch>
+        </div>
+      </div>
+    </div></Router>
   );
 }
 
diff --git a/client/src/components/LoginComponent.js b/client/src/components/LoginComponent.js
new file mode 100644
index 0000000..b46b06b
--- /dev/null
+++ b/client/src/components/LoginComponent.js
@@ -0,0 +1,41 @@
+import React, { Component } from "react";
+import {Row,Col} from 'react-bootstrap';
+import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+
+export default class Login extends Component {
+    render() {
+        return (
+<Row className="landing">
+<Col> <img src ="assets/loginimg.png" alt="image"/> </Col>
+<Col>
+            <form>
+                <h3>Sign In</h3>
+
+                <div className="form-group">
+                    <label>Email address</label>
+                    <input type="email" className="form-control" placeholder="Enter email" />
+                </div>
+
+                <div className="form-group">
+                    <label>Password</label>
+                    <input type="password" className="form-control" placeholder="Enter password" />
+                </div>
+
+                <div className="form-group">
+                    <div className="custom-control custom-checkbox">
+                        <input type="checkbox" className="custom-control-input" id="customCheck1" />
+                        <label className="custom-control-label" htmlFor="customCheck1">Remember me</label>
+                    </div>
+                </div>
+
+                <button type="submit" className="btn btn-primary btn-block">Submit</button>
+                <p><Link className="nav-link text-right" to={"/sign-up"}>Sign up</Link></p>
+                <p className="forgot-password text-right">
+                    Forgot <a href="#">password?</a>
+                </p>
+            </form>
+</Col>
+</Row>
+);
+    }
+}
diff --git a/client/src/components/SignupComponent.js b/client/src/components/SignupComponent.js
new file mode 100644
index 0000000..3da9b72
--- /dev/null
+++ b/client/src/components/SignupComponent.js
@@ -0,0 +1,42 @@
+import React, { Component } from "react";
+import {Row,Col} from 'react-bootstrap';
+import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
+
+export default class SignUp extends Component {
+    render() {
+        return (
+<Row className="landing">
+<Col> <img src ="assets/signupimg.png" alt="image"/> </Col>
+<Col>
+            <form>
+                <h3>Sign Up</h3>
+                <div className="form-group">
+                    <label>First name</label>
+                    <input type="text" className="form-control" placeholder="First name" />
+                </div>
+
+                <div className="form-group">
+                    <label>Last name</label>
+                    <input type="text" className="form-control" placeholder="Last name" />
+                </div>
+
+                <div className="form-group">
+                    <label>Email address</label>
+                    <input type="email" className="form-control" placeholder="Enter email" />
+                </div>
+
+                <div className="form-group">
+                    <label>Password</label>
+                    <input type="password" className="form-control" placeholder="Enter password" />
+                </div>
+
+                <button type="submit" className="btn btn-primary btn-block">Sign Up</button>
+                <p className="forgot-password text-right">
+                    Already registered <Link className="nav-link text-right" to={"/sign-in"}>Sign in?</Link>
+                </p>
+            </form>
+</Col>
+</Row>
+        );
+    }
+}
diff --git a/client/src/index.css b/client/src/index.css
index ec2585e..746f02d 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -1,13 +1,84 @@
+@import url('https://fonts.googleapis.com/css?family=Fira+Sans:400,500,600,700,800');
+
+* {
+  box-sizing: border-box;
+  grid-column: 1 /2;
+  grid-row:1 /2;
+}
 body {
+  background: #3E206D;
+  min-height: 100vh;
+  display: flex;
+  font-weight: 400;
+  font-family: 'Fira Sans', sans-serif;
+}
+
+h1,h2,h3,h4,h5,h6,label,span {
+  font-weight: 500;
+  font-family: 'Fira Sans', sans-serif;
+}
+
+body, html, .App, #root, .auth-wrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.navbar-light {
+  background-color: #ffffff;
+  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
+}
+
+.auth-wrapper {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  text-align: left;
+}
+
+.auth-inner {
+  width: 800px;
+  margin: auto;
+  background: #ffffff;
+  box-shadow: 0px 14px 80px rgba(34, 35, 58, 0.2);
+  padding: 40px 80px 45px 55px;
+  border-radius: 15px;
+  transition: all .3s;
+  padding-top:30px;
+}
+
+.auth-wrapper .form-control:focus {
+  border-color: #167bff;
+  box-shadow: none;
+}
+
+.auth-wrapper h3 {
+  text-align: center;
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  line-height: 1;
+  padding-bottom: 20px;
+}
+
+.custom-control-label {
+  font-weight: 400;
+}
+
+.forgot-password,
+.forgot-password a {
+  text-align: right;
+  font-size: 13px;
+  padding-top: 10px;
+  color: #7f7d7d;
+  margin: 0;
+}
+
+.forgot-password a {
+  color: #167bff;
 }
+form{
+display : flex;
+align-items : centre;
+flex-direction: column;
+grid-column:  1 / 2;
+grid-row: 1 / 2;
 
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
 }
diff --git a/client/src/index.js b/client/src/index.js
index ef2edf8..c1cdc17 100644
--- a/client/src/index.js
+++ b/client/src/index.js
@@ -1,17 +1,14 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom";
+import { BrowserRouter } from "react-router-dom";
+import "./index.css";
+import App from "./App";
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
+    <BrowserRouter>
+        <App />
+    </BrowserRouter>,
+    document.getElementById("root")
 );
 
-// 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/design/Logo-design b/design/Logo-design
deleted file mode 100644
index 8b13789..0000000
--- a/design/Logo-design
+++ /dev/null
@@ -1 +0,0 @@
-