diff --git a/src/svgs/logout.svg b/src/svgs/logout.svg
new file mode 100644
index 00000000..e0188843
--- /dev/null
+++ b/src/svgs/logout.svg
@@ -0,0 +1,60 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<g>
+	<path style="fill:#303C42;" d="M330.667,384c-5.896,0-10.667,4.771-10.667,10.667v74.667c0,11.76-9.573,21.333-21.333,21.333h-256
+		c-11.76,0-21.333-9.573-21.333-21.333V42.667c0-11.76,9.573-21.333,21.333-21.333h256c11.76,0,21.333,9.573,21.333,21.333v74.667
+		c0,5.896,4.771,10.667,10.667,10.667c5.896,0,10.667-4.771,10.667-10.667V42.667C341.333,19.135,322.198,0,298.667,0h-256
+		C19.135,0,0,19.135,0,42.667v426.667C0,492.865,19.135,512,42.667,512h256c23.531,0,42.667-19.135,42.667-42.667v-74.667
+		C341.333,388.771,336.563,384,330.667,384z"/>
+	<path style="fill:#303C42;" d="M508.542,248.135l-128-117.333c-4.365-3.979-11.083-3.677-15.073,0.656
+		c-3.979,4.344-3.688,11.094,0.656,15.073l107.79,98.802H138.667c-5.896,0-10.667,4.771-10.667,10.667
+		c0,5.896,4.771,10.667,10.667,10.667h335.249l-107.79,98.802c-4.344,3.979-4.635,10.729-0.656,15.073
+		c2.104,2.292,4.979,3.458,7.865,3.458c2.573,0,5.156-0.927,7.208-2.802l128-117.333C510.75,261.844,512,258.99,512,256
+		C512,253.01,510.75,250.156,508.542,248.135z"/>
+</g>
+<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-49.2745" y1="639.416" x2="-25.5203" y2="628.3345" gradientTransform="matrix(21.3333 0 0 -21.3333 996.3334 13791.667)">
+	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2"/>
+	<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
+</linearGradient>
+<path style="fill:url(#SVGID_1_);" d="M330.667,384c-5.896,0-10.667,4.771-10.667,10.667v74.667c0,11.76-9.573,21.333-21.333,21.333
+	h-256c-11.76,0-21.333-9.573-21.333-21.333V42.667c0-11.76,9.573-21.333,21.333-21.333h256c11.76,0,21.333,9.573,21.333,21.333
+	v74.667c0,5.896,4.771,10.667,10.667,10.667c5.896,0,10.667-4.771,10.667-10.667V42.667C341.333,19.135,322.198,0,298.667,0h-256
+	C19.135,0,0,19.135,0,42.667v426.667C0,492.865,19.135,512,42.667,512h256c23.531,0,42.667-19.135,42.667-42.667v-74.667
+	C341.333,388.771,336.563,384,330.667,384z M508.542,248.135l-128-117.333c-4.365-3.979-11.083-3.677-15.073,0.656
+	c-3.979,4.344-3.688,11.094,0.656,15.073l107.79,98.802H138.667c-5.896,0-10.667,4.771-10.667,10.667
+	c0,5.896,4.771,10.667,10.667,10.667h335.249l-107.79,98.802c-4.344,3.979-4.635,10.729-0.656,15.073
+	c2.104,2.292,4.979,3.458,7.865,3.458c2.573,0,5.156-0.927,7.208-2.802l128-117.333C510.75,261.844,512,258.99,512,256
+	C512,253.01,510.75,250.156,508.542,248.135z"/>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>
diff --git a/src/user/dashboard/navigation/navigation.js b/src/user/dashboard/navigation/navigation.js
index 1993a4aa..4ac449c0 100644
--- a/src/user/dashboard/navigation/navigation.js
+++ b/src/user/dashboard/navigation/navigation.js
@@ -1,11 +1,17 @@
 import React, { Component } from "react";
-import { ListGroup } from "react-bootstrap";
-import { NavLink } from 'react-router-dom';
+import { ListGroup, Button } from "react-bootstrap";
+import { NavLink } from "react-router-dom";
 import { DonutTitleSmall } from "../../../donutTitle/donutTitle";
 import "./navigation.scss";
+import {Logout} from "../../profile/popups/logout";
+import logo from "../../../svgs/logout.svg";
 
 class Navigation extends Component {
+  state = { logout:false };
   render() {
+    let cancel =()=>this.setState({
+      logout:false
+    });
     const divStyle = {
       position: "absolute",
       bottom: 0
@@ -106,7 +112,7 @@ class Navigation extends Component {
               <b>Account</b>
             </NavLink>
           </ListGroup.Item>
-          <ListGroup.Item style={divStyle}>
+          <ListGroup.Item style={{position: "absolute", bottom: "50px"}}>
             <svg
               width="38"
               height="38"
@@ -122,6 +128,16 @@ class Navigation extends Component {
             </svg>
             Settings
           </ListGroup.Item>
+          <ListGroup.Item style={divStyle}>
+            <Button variant="link" size="sm" style=
+            {{"margin-left": "-8.5px", color: "rgba(0, 0, 0, 0.5)"}} onClick={
+              ()=>this.setState({logout:true})}>
+            <img class="logout" src={logo} alt="L"></img>
+            <b>Logout</b>
+            </Button>
+            <Logout show={this.state.logout}
+              onHide={cancel} />
+          </ListGroup.Item>
         </ListGroup>
       </div>
     );
diff --git a/src/user/dashboard/navigation/navigation.scss b/src/user/dashboard/navigation/navigation.scss
index fa1ef97f..a5928a66 100644
--- a/src/user/dashboard/navigation/navigation.scss
+++ b/src/user/dashboard/navigation/navigation.scss
@@ -64,4 +64,12 @@
       }
     }
   }
+}
+
+.logout{
+  height: 21px;
+  width: 21px;
+  color: rgba(0, 0, 0, 0.5);
+  margin-right: 15px;
+  margin-left: 2px;
 }
\ No newline at end of file
diff --git a/src/user/profile/popups/edit-profile.js b/src/user/profile/popups/edit-profile.js
new file mode 100644
index 00000000..86ac8a57
--- /dev/null
+++ b/src/user/profile/popups/edit-profile.js
@@ -0,0 +1,99 @@
+import React, {Component} from 'react';
+import {Modal, Button, Row, Col, Form} from 'react-bootstrap';
+import "./popups.scss";
+
+export class EditProfile extends Component{
+    // eslint-disable-next-line
+    constructor(props){
+        super(props);
+    }
+    render(){
+    return (
+        <Modal
+      {...this.props}
+      size="md"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered>
+      <div className="container">
+        <Modal.Header closeButton className="heading border border-0 p-0">
+        <Modal.Title id="contained-modal-title-vcenter"> 
+        <div className="title">Edit Profile</div>
+        <div className="about">PERSONAL INFORMATION</div>
+        </Modal.Title> 
+        </Modal.Header>
+        <Modal.Body>
+          <Row className="form-content">
+          <Col className="p-0" sm={5}>
+          <Form.Label className="label">First Name</Form.Label>
+          <Form.Control className="form-input"
+              type="text"
+              placeholder="Type here.."
+              size="sm"/>
+          </Col>
+          <Col className="p-0" sm={5}>
+          <Form.Label className="label">Last Name</Form.Label>
+          <Form.Control className="form-input"
+              type="text"
+              placeholder="Type here.."
+              size="sm"/>
+          </Col>
+          </Row>
+          <Row className="form-content">
+          <Col className="p-0" sm={5}>
+          <Form.Label className="label">Designation</Form.Label>
+          <Form.Control className="form-input"
+              type="text"
+              placeholder="What do you do?"
+              size="sm"/>
+          </Col>
+          <Col className="p-0" sm={5}>
+          <Form.Label className="label">Location</Form.Label>
+          <Form.Control className="form-input"
+              type="text"
+              placeholder="Where do you live?"
+              size="sm"/>
+          </Col>
+          </Row>
+          <Row className="form-content">
+          <Form.Label className="label">About</Form.Label>
+          <Form.Control className="form-input"
+              as="textarea"
+              placeholder="Write a few lines about yourself.."
+              size="sm"/>
+          </Row>
+          <div className="about extra">PROFILES</div>
+          <Row className="form-content">
+          <Col className="p-0" sm={5}>
+          <Form.Label className="label">GitHub URL</Form.Label>
+          <Form.Control className="form-input"
+              type="text"
+              placeholder="GitHub Profile"
+              size="sm"/>
+          </Col>
+          <Col className="p-0" sm={5}>
+          <Form.Label className="label">LinkedIn URL</Form.Label>
+          <Form.Control className="form-input"
+              type="text"
+              placeholder="LinkedIn Profile"
+              size="sm"/>
+          </Col>
+          </Row>
+          <Row className="form-content">
+          <Col className="p-0" sm={5}>
+          <Form.Label className="label">Facebook URL</Form.Label>
+          <Form.Control className="form-input"
+              type="text"
+              placeholder="Facebook Profile"
+              size="sm"/>
+          </Col>
+          </Row>  
+        </Modal.Body>
+        <div className="form-footer">
+          <Button onClick={this.props.onHide} className="savebtn">Save</Button>
+          <Button variant="outline-primary" onClick={this.props.onHide}>Cancel</Button>
+        </div>
+      </div>
+      </Modal>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/user/profile/popups/followers.js b/src/user/profile/popups/followers.js
new file mode 100644
index 00000000..c673d738
--- /dev/null
+++ b/src/user/profile/popups/followers.js
@@ -0,0 +1,81 @@
+import React, {Component} from 'react';
+import {Modal, Button, Row, Col} from 'react-bootstrap';
+import logo from "../../../svgs/profile-icon.svg";
+import "./popups.scss";
+
+export class Followers extends Component{
+    // eslint-disable-next-line
+    constructor(props){
+        super(props);
+    }
+    state = {text:"Follow"};
+    render(){
+        
+    return (
+        <Modal
+      {...this.props}
+      size="md"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered>
+      <div className="container">
+        <Modal.Header closeButton className="heading border border-0 p-0">
+        <Modal.Title id="contained-modal-title-vcenter"> 
+        <div className="title">Followers</div>
+        <div className="about">PEOPLE WHO FOLLOW YOU</div>
+        </Modal.Title> 
+        </Modal.Header>
+        <Modal.Body>
+            <Row className="follower" id="p1">
+                <Col md={2}><img class="photo" src={logo} alt="I"></img></Col>
+                <Col md={7}><div className="contain"> 
+                  <p className="user">Dhanus Rajendra</p>
+                  <p className="descr">Front-End Developer</p>
+                </div></Col>
+                <Col md={3}><Button className="follow-link" variant="outline-primary">Follow</Button></Col>
+            </Row>
+            <Row className="follower" id="p1">
+                <Col md={2}><img class="photo" src={logo} alt="I"></img></Col>
+                <Col md={7}><div className="contain"> 
+                  <p className="user">Dhanus Rajendra</p>
+                  <p className="descr">Front-End Developer</p>
+                </div></Col>
+                <Col md={3}><Button className="follow-link" variant="outline-primary">Follow</Button></Col>
+            </Row>
+            <Row className="follower" id="p1">
+                <Col md={2}><img class="photo" src={logo} alt="I"></img></Col>
+                <Col md={7}><div className="contain"> 
+                  <p className="user">Dhanus Rajendra</p>
+                  <p className="descr">Front-End Developer</p>
+                </div></Col>
+                <Col md={3}><Button className="follow-link" variant="outline-primary">Follow</Button></Col>
+            </Row>
+            <Row className="follower" id="p1">
+                <Col md={2}><img class="photo" src={logo} alt="I"></img></Col>
+                <Col md={7}><div className="contain"> 
+                  <p className="user">Dhanus Rajendra</p>
+                  <p className="descr">Front-End Developer</p>
+                </div></Col>
+                <Col md={3}><Button className="follow-link" variant="outline-primary">Follow</Button></Col>
+            </Row>
+            <Row className="follower" id="p1">
+                <Col md={2}><img class="photo" src={logo} alt="I"></img></Col>
+                <Col md={7}><div className="contain"> 
+                  <p className="user">Dhanus Rajendra</p>
+                  <p className="descr">Front-End Developer</p>
+                </div></Col>
+                <Col md={3}><Button className="follow-link" variant="outline-primary">Follow</Button></Col>
+            </Row>
+            <Row className="follower" id="p1">
+                <Col md={2}><img class="photo" src={logo} alt="I"></img></Col>
+                <Col md={7}><div className="contain"> 
+                  <p className="user">Dhanus Rajendra</p>
+                  <p className="descr">Front-End Developer</p>
+                </div></Col>
+                <Col md={3}><Button className="follow-link" variant="outline-primary">Follow</Button></Col>
+            </Row>
+        </Modal.Body>
+      </div>
+      </Modal>
+    );
+  }
+}
diff --git a/src/user/profile/popups/logout.js b/src/user/profile/popups/logout.js
new file mode 100644
index 00000000..e2feb86a
--- /dev/null
+++ b/src/user/profile/popups/logout.js
@@ -0,0 +1,33 @@
+import React, {Component} from 'react';
+import {Modal, Button} from 'react-bootstrap';
+import "./popups.scss";
+
+export class Logout extends Component{
+    // eslint-disable-next-line
+    constructor(props){
+        super(props);
+    }
+    render(){
+    return (
+        <Modal
+      {...this.props}
+      size="md"
+      aria-labelledby="contained-modal-title-vcenter"
+      centered>
+      <div className="container">
+        <Modal.Header closeButton className="heading border border-0 p-0">
+        <Modal.Title id="contained-modal-title-vcenter"> 
+        <div className="title">Logout?</div>
+        <div className="message">Are you sure you want to logout of Donut?</div>
+        </Modal.Title> 
+        </Modal.Header>
+        
+        <div className="form-footer">
+          <Button onClick={this.props.onHide} className="savebtn" size="sm">Yes</Button>
+          <Button variant="outline-primary" onClick={this.props.onHide} size="sm">No</Button>
+        </div>
+      </div>
+      </Modal>
+    );
+  }
+}
\ No newline at end of file
diff --git a/src/user/profile/popups/popups.scss b/src/user/profile/popups/popups.scss
new file mode 100644
index 00000000..8e8f8f3c
--- /dev/null
+++ b/src/user/profile/popups/popups.scss
@@ -0,0 +1,100 @@
+.heading{
+    margin-top: 20px;
+}
+.title{
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 29px;
+    color: #1A73E8;
+}
+.about{
+    font-weight: 500;
+    font-size: 10px;
+    line-height: 14px;
+    letter-spacing: 0.2em;
+    color: #90949C;
+    margin-top:10px;
+}
+.message{
+    font-weight: 500;
+    font-size: 14px;
+    line-height: 14px;
+    letter-spacing: 0.2em;
+    color: rgb(28, 30, 34);
+    margin-top:15px;
+    margin-bottom: 20px;
+}
+.extra{
+    margin-bottom: 20px;
+    margin-left: -15px;
+}
+.label{
+    font-weight: 600;
+    font-size: 12px;
+    color:#000000;
+    margin-bottom: 3px;
+}
+.form-input{
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 300;
+    font-size: 13px;
+    line-height: 16px;
+}
+.form-content{
+    margin-top:-2%;
+    margin-bottom: 20px;
+    justify-content:space-between;
+}
+.form-footer{
+    margin-top: 0;
+    Button{
+        width:90px;
+        margin-right: 20px;
+        margin-bottom: 30px;
+        border-radius: 100px;
+        font-weight:600;
+    }
+    .savebtn{
+        background-color: #1A73E8;
+    }
+
+}
+.contain{
+    margin-top: -3px;
+}
+.photo{
+    margin-top: 3px;
+    height: 43px;
+    width: 43px; 
+} 
+.user{
+    margin-top: 2px;
+    font-size: 1.1em;
+    color: black;    
+}
+.descr{
+    font-size: 0.8em;
+    color: rgb(90, 84, 84);
+    margin-top: -13px;   
+}
+.follow-link{
+    margin-top: 3px;
+    padding: 8px;
+    font-size: 14px;
+    box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
+    border-radius: 20px;
+    width: 80px;
+    height: 35px;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 17px;
+    text-align: center;
+}
+.follower{
+    margin-top: 10px;
+    margin-bottom: 10px;
+    justify-content:space-between;
+}
\ No newline at end of file
diff --git a/src/user/profile/user-info/user-info.js b/src/user/profile/user-info/user-info.js
index e38c7500..ba9a2619 100644
--- a/src/user/profile/user-info/user-info.js
+++ b/src/user/profile/user-info/user-info.js
@@ -1,9 +1,17 @@
 import React, { Component } from "react";
 import "./user-info.scss";
 import { Button } from "react-bootstrap";
-
+import {EditProfile} from "./../popups/edit-profile";
+import {Followers} from "./../popups/followers"
 class UserInfo extends Component {
+  state = { editProfile:false, followersList:false };
   render() {
+    let cancel =()=>this.setState({
+      editProfile:false
+    });
+    let cancelf =()=>this.setState({
+      followersList:false
+    });
     return (
       <div className="user-details">
         <div className="user-image">
@@ -11,12 +19,18 @@ class UserInfo extends Component {
             <img src="" alt="" />
           </div>
           <div className="edit-option">
-            <Button variant="primary">User Edit</Button>
+            <Button variant="primary" onClick={
+              ()=>this.setState({editProfile:true})}>User Edit</Button>
+              <EditProfile show={this.state.editProfile}
+              onHide={cancel} />
           </div>
         </div>
         <div className="user-data">
           <h1>
-            Dhanus Rajendra <Button variant="primary">Follow</Button>
+            Dhanus Rajendra <Button variant="primary" onClick={
+              ()=>this.setState({followersList:true})}>Follow</Button>
+              <Followers show={this.state.followersList}
+              onHide={cancelf} />
           </h1>
           <p className="profession">Front end developer</p>
           <p className="place">Bengaluru, Karnataka</p>