diff --git a/client/src/components/App/App.js b/client/src/components/App/App.js
index 039f401f..9a30bc69 100644
--- a/client/src/components/App/App.js
+++ b/client/src/components/App/App.js
@@ -26,7 +26,7 @@ class App extends Component {
           <Route path="/product/:id" component={ProductPage} />
           <Route path="/search/:searchInput" component={Shop} />
           <Route exact path="/shipping_info" component={shipping_info} />
-        </div>{' '}
+        </div>
       </Router>
     )
   }
diff --git a/client/src/components/Login/index.js b/client/src/components/Login/index.js
new file mode 100644
index 00000000..68321b3a
--- /dev/null
+++ b/client/src/components/Login/index.js
@@ -0,0 +1,56 @@
+import React, { Component } from 'react'
+import './style.css'
+import NavBar from '../Navbar'
+import axios from 'axios';
+class Login extends Component {
+state = {
+
+email:'',
+password:''
+
+
+}
+
+emailValue = (event)=>{
+  const {value} = event.target
+  this.setState({email:value})
+}
+passwordValue = (event)=>{
+  const {value} = event.target
+
+  this.setState({password:value})
+}
+doSomeThing = (e)=>{
+  console.log("its ok")
+const {email,password} =this.state
+
+
+  e.preventDefault();
+
+  axios.post(`/login`,{"email":email,"password":password})
+  .then( ({data}) => {
+    console.log("data",data)
+  })
+
+}
+
+  render () {
+    return (
+      
+      <div>
+        < NavBar />
+        <h1 className="login-titel">Login </h1>
+        <form className="login" onSubmit={this.doSomeThing} >
+
+        <input className="input" type="email" autocomplete="on" placeholder="Email" name="email" value={this.state.email}  onChange={this.emailValue}   required/>
+        <input className="input" type="password" autocomplete="on" placeholder="Password" name="password" value={this.state.password}  onChange={this.passwordValue}  required/>
+          <button type="submit" className="signin-button">Login</button>
+          <button type="button" className="signup-button">Signup</button>
+
+        </form>
+      </div>
+    )
+  }
+}
+
+export default Login
diff --git a/client/src/components/Login/style.css b/client/src/components/Login/style.css
new file mode 100644
index 00000000..fb38d47d
--- /dev/null
+++ b/client/src/components/Login/style.css
@@ -0,0 +1,143 @@
+.login {
+    display: flex;
+    flex-direction: column;
+    margin: 5% auto auto auto;
+}
+
+.input {
+    width: 65%;
+    margin: auto auto 5% auto;
+    height: 25px;
+    font-size: 1.2em;
+    border: 0;
+    border-bottom: 2px solid black;
+    padding-left: 1%;
+    color: #83c102;
+}
+
+.signin-button {
+    height: 63px;
+    width: 20%;
+    background: #54bc07;
+    color: white;
+    font-size: 1.2em;
+    border-radius: 5px;
+    margin: 3% auto;
+}
+
+.signin-button:hover {
+    background: #00a1ec;
+    color: white;
+}
+
+.signup-button {
+    height: 63px;
+    width: 20%;
+    background: #A2A2A2;
+    color: white;
+    font-size: 1.2em;
+    border-radius: 5px;
+    margin: auto;
+}
+
+.signup-button:hover {
+    background: #00a1ec;
+    color: white;
+}
+
+.login-titel {
+    text-align: left;
+    margin: 10% auto auto 10%;
+}
+
+@media screen and (max-width:900px) {
+    .left,
+    .main,
+    .right {
+        width: 100%;
+        /* The width is 100%, when the viewport is 800px or smaller */
+    }
+    .login-titel {
+        text-align: left;
+        margin: 15% auto auto 10%;
+    }
+    .login {
+        display: flex;
+        flex-direction: column;
+        margin: 10% auto auto auto;
+    }
+    .input {
+        width: 85%;
+        margin: auto auto 10% auto;
+        height: 25px;
+        font-size: 1.2em;
+        border: 0;
+        border-bottom: 2px solid black;
+        padding-left: 1%;
+        color: #83c102;
+    }
+    .signin-button {
+        height: 63px;
+        width: 45%;
+        background: #54bc07;
+        color: white;
+        font-size: 1.2em;
+        border-radius: 5px;
+        margin: 3% auto;
+    }
+    .signup-button {
+        height: 63px;
+        width: 45%;
+        background: #A2A2A2;
+        color: white;
+        font-size: 1.2em;
+        border-radius: 5px;
+        margin: auto;
+    }
+}
+
+@media screen and (max-width:500px) {
+    .left,
+    .main,
+    .right {
+        width: 100%;
+        /* The width is 100%, when the viewport is 800px or smaller */
+    }
+    .login-titel {
+        text-align: left;
+        margin: 15% auto auto 10%;
+    }
+    .login {
+        display: flex;
+        flex-direction: column;
+        margin: 40% auto auto auto;
+    }
+    .input {
+        width: 85%;
+        margin: auto auto 10% auto;
+        height: 25px;
+        font-size: 1.2em;
+        border: 0;
+        border-bottom: 2px solid black;
+        padding-left: 1%;
+        color: #83c102;
+    }
+    .signin-button {
+        height: 63px;
+        width: 45%;
+        background: #54bc07;
+        color: white;
+        font-size: 1.2em;
+        border-radius: 5px;
+        margin: 3% auto;
+    }
+    .signup-button {
+        height: 63px;
+        width: 45%;
+        background: #A2A2A2;
+        color: white;
+        font-size: 1.2em;
+        border-radius: 5px;
+        margin: auto;
+    }
+}
\ No newline at end of file
diff --git a/client/src/components/Navbar/style.css b/client/src/components/Navbar/style.css
index e1cfbf74..767617bf 100644
--- a/client/src/components/Navbar/style.css
+++ b/client/src/components/Navbar/style.css
@@ -1,36 +1,99 @@
 .nav-bar {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 100vw;
-  margin: auto;
-  height: 10vh;
-  box-shadow: 1px -10px 16px 7px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100vw;
+    height: 42px;
+    margin: auto;
+    padding-top: 1%;
+    padding-bottom: 1%;
+    box-shadow: 1px -10px 16px 7px;
 }
+
 .cart-section {
-  margin-right: 0%;
+    margin-right: 0%;
 }
+
 .logo-section {
-  display: flex;
-  flex-direction: row;
+    display: flex;
+    flex-direction: row;
 }
 
 .cart,
 .menu {
-  width: 23px;
-  height: 21px;
-  margin: 10px 6px;
-
+    width: 23px;
+    height: 21px;
+    margin: 10px 6px;
 }
+
 .menu {
-  margin-right: 27px;
+    margin-right: 27px;
 }
+
 .logo {
-  width: 98px;
-  height: 41px;
-  margin: 3px -28px 0px 31px;
+    width: 98px;
+    height: 41px;
+    margin: 3px -28px 0px 31px;
 }
+
 .shop {
-  margin-top: 15px;
-  margin-left: 35%;
+    margin-top: 15px;
+    margin-left: 35%;
 }
+
+@media screen and (max-width:1200px) {
+    .left,
+    .main,
+    .right {
+        width: 100%;
+        /* The width is 100%, when the viewport is 800px or smaller */
+    }
+    .nav-bar {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100vw;
+        margin: auto;
+        padding-top: 1%;
+        height: 42px;
+        box-shadow: 1px -10px 16px 7px;
+    }
+}
+
+@media screen and (max-width:800px) {
+    .left,
+    .main,
+    .right {
+        width: 100%;
+        /* The width is 100%, when the viewport is 800px or smaller */
+    }
+    .nav-bar {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100vw;
+        margin: auto;
+        padding-top: 1%;
+        height: 42px;
+        box-shadow: 1px -10px 16px 7px;
+    }
+}
+
+@media screen and (max-width:500px) {
+    .left,
+    .main,
+    .right {
+        width: 100%;
+        /* The width is 100%, when the viewport is 800px or smaller */
+    }
+    .nav-bar {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        width: 100vw;
+        margin: auto;
+        padding-top: 1%;
+        height: 42px;
+        box-shadow: 1px -10px 16px 7px;
+    }
+}
\ No newline at end of file
diff --git a/client/src/components/Product_card/style.css b/client/src/components/Product_card/style.css
index 5b85469a..fe0bcc9a 100644
--- a/client/src/components/Product_card/style.css
+++ b/client/src/components/Product_card/style.css
@@ -1,21 +1,22 @@
 .product-card-back {
     display: flex;
     flex-direction: column;
+    align-items: center;
     justify-content: center;
     border-radius: 0.25rem;
     box-shadow: 0 2px 6px hsla(220, 10%, 30%, 0.2), 0 8px 16px hsla(220, 10%, 30%, 0.2);
     padding: 1rem;
     background-color: #fff;
-    height: 270px;
+    height: 190px;
     width: 75%;
     margin: 5%;
 }
 
 .cards {
     display: inline-grid;
-    grid-template-columns: auto auto;
-    grid-gap: 0px;
-    margin: 3% 0% 3% 8%;
+    grid-template-rows: 150px 150px 150px 150px;
+    justify-content: space-around;
+    margin-left: 5%;
 }
 
 .loading {
@@ -61,7 +62,7 @@ a:link {
         box-shadow: 0 2px 6px hsla(220, 10%, 30%, 0.2), 0 8px 16px hsla(220, 10%, 30%, 0.2);
         padding: 1rem;
         background-color: #fff;
-        height: 248px;
+        height: 190px;
         width: 68%;
         margin: 5%;
     }
@@ -72,6 +73,13 @@ a:link {
         width: 76px;
         margin-top: 15px;
     }
+    .cards {
+        display: inline-grid;
+        grid-template-rows: 150px 150px;
+        grid-row-start: 1;
+        grid-row-end: 2;
+        margin: 3% 3% 3% 7%;
+    }
 }
 
 @media screen and (max-width:736px) {
@@ -89,7 +97,7 @@ a:link {
         box-shadow: 0 2px 6px hsla(220, 10%, 30%, 0.2), 0 8px 16px hsla(220, 10%, 30%, 0.2);
         padding: 1rem;
         background-color: #fff;
-        height: 187px;
+        height: 190px;
         width: 68%;
         margin: 5%;
     }
@@ -100,6 +108,13 @@ a:link {
         width: 76px;
         margin-top: 15px;
     }
+    .cards {
+        display: inline-grid;
+        grid-template-rows: 150px 150px;
+        grid-row-start: 1;
+        grid-row-end: 2;
+        margin: 3% 3% 3% 7%;
+    }
 }
 
 @media screen and (max-width:600px) {
@@ -128,6 +143,13 @@ a:link {
         width: 76px;
         margin-top: 15px;
     }
+    .cards {
+        display: inline-grid;
+        grid-template-rows: 150px 150px;
+        grid-row-start: 1;
+        grid-row-end: 2;
+        margin: 3% 3% 3% 7%;
+    }
 }
 
 @media screen and (max-width:485px) {
@@ -146,7 +168,7 @@ a:link {
         padding: 1rem;
         background-color: #fff;
         height: 180px;
-        width: 68%;
+        width: 73%;
         margin: 5%;
     }
     .product-img {
@@ -156,6 +178,13 @@ a:link {
         width: 76px;
         margin-top: 15px;
     }
+    .cards {
+        display: inline-grid;
+        grid-template-rows: 150px 150px;
+        grid-row-start: 1;
+        grid-row-end: 2;
+        margin: 3% 3% 3% 7%;
+    }
 }
 
 h1 {
diff --git a/package.json b/package.json
index f41b38e0..841ca079 100644
--- a/package.json
+++ b/package.json
@@ -6,11 +6,14 @@
     "dependencies": {
         "alert-node": "^2.0.0",
         "axios": "^0.19.0",
+        "bcryptjs": "^2.4.3",
         "concurrently": "^4.1.2",
         "env2": "^2.2.2",
         "fs": "0.0.1-security",
+        "jsonwebtoken": "^8.5.1",
         "pg": "^7.12.1",
-        "prop-types": "^15.7.2"
+        "prop-types": "^15.7.2",
+        "sweetalert2": "^8.17.1"
     },
     "devDependencies": {
         "eslint": "^6.3.0",
diff --git a/src/controller/checkIfLogin.js b/src/controller/checkIfLogin.js
new file mode 100644
index 00000000..95ce7220
--- /dev/null
+++ b/src/controller/checkIfLogin.js
@@ -0,0 +1,24 @@
+const { verify } = require('jsonwebtoken')
+const secret = process.env.SECRET
+
+const checkIfLogin = (request, response) => {
+    if (!request.headers.cookie) {
+        return null
+    }
+
+    const { token } = parse(request.headers.cookie)
+
+    if (!token) {
+        return null
+    }
+
+    return verify(token, secret, (err, userData) => {
+        if (err) {
+            return err
+        } else {
+            console.log(userData)
+            return userData
+        }
+    })
+}
+module.exports = checkIfLogin
\ No newline at end of file
diff --git a/src/controller/index.js b/src/controller/index.js
index 9c330c3c..60a45057 100644
--- a/src/controller/index.js
+++ b/src/controller/index.js
@@ -4,13 +4,15 @@ const { getAllProduct } = require('./getProducts.js')
 const { getAllcategoryProduct } = require('./get_category_products')
 const { searchForAllProduct } = require('./get_products_by_name')
 const getCategories = require('./get_category')
+const { getLoginInfo } = require('./loginController')
 const getProduct = require('./get_product')
 const add_order = require('./add_order')
 const addToCart = require('./add_to_cart')
-
 router.get('/shop/:category_id', getAllcategoryProduct)
 router.get('/search/:searchInput', searchForAllProduct)
+router.post('/login', getLoginInfo)
 router.get('/shop', getAllProduct)
+router.get('/category', getCategories)
 router.post('/shipping_info', add_order)
 
 router.get('/category', getCategories)
diff --git a/src/controller/loginController.js b/src/controller/loginController.js
new file mode 100644
index 00000000..c9abfaf1
--- /dev/null
+++ b/src/controller/loginController.js
@@ -0,0 +1,50 @@
+const { checkUserEmail, checkUserPassword } = require('../database/queries/checkUserInfo.js')
+const bcrypt = require('bcryptjs')
+const { sign } = require('jsonwebtoken')
+const secret = process.env.SECRET
+const alert = require('alert-node')
+
+const { checkIfLogin } = require('./checkIfLogin.js')
+
+exports.getLoginInfo = (request, response, next) => {
+  const { email } = request.body
+  const { password } = request.body
+  console.log('email', email)
+  console.log('password', password)
+  checkUserEmail(email).then(result => {
+    if (!checkIfLogin) {
+      // eslint-disable-next-line no-lone-blocks
+      { if (result.length) {
+        bcrypt.compare(
+          password,
+          result[0].password,
+          (hashErr, passwordsMatch) => {
+            if (hashErr) {
+              next(hashErr)
+            } else if (passwordsMatch) {
+              const userInformation = { login: true, name: result[0].name }
+
+              const token = sign(userInformation, secret)
+              response.writeHead(302, {
+                Location: '/',
+                'Set-Cookie': 'token=' + token + `;Max-Age=${110000}`
+              })
+              response.end()
+            } else {
+              alert('incorrect password')
+              response.writeHead(302, {
+                location: '/login'
+              })
+              response.end()
+            }
+          }).catch(err => response.json(err))
+        checkUserPassword(password).then(result => response.json(result)).catch(err => response.json(err))
+      } }
+    }
+  })
+
+  const serverError = (err, response) => {
+    response.writeHead(500, 'Content-Type:text/html')
+    response.end('<h1>Sorry, there was a problem loading the homepage</h1>')
+  }
+}
diff --git a/src/database/queries/checkUserInfo.js b/src/database/queries/checkUserInfo.js
new file mode 100644
index 00000000..30925952
--- /dev/null
+++ b/src/database/queries/checkUserInfo.js
@@ -0,0 +1,15 @@
+// Add code below to query your database
+const dbConnection = require('../db_connection')
+
+const checkUserEmail = (email) => {
+    return dbConnection.query('SELECT * FROM "user" where  email = $1 ', [email])
+        .then(res => res.rows)
+        .catch(err => console.log(err))
+}
+const checkUserPassword = (password) => {
+    return dbConnection.query('SELECT * FROM "user" where password = $1 ', [password])
+        .then(res => res.rows)
+        .catch(err => console.log(err))
+}
+
+module.exports = { checkUserEmail, checkUserPassword }
\ No newline at end of file