diff --git a/src/App.js b/src/App.js
index 9d3fd213..52cdb160 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,11 +1,13 @@
 import React, { Component } from "react";
 import Router from "./router";
 import "./App.css";
-import { Provider } from 'react-redux';
-import store from './store';
-import jwt_decode from 'jwt-decode';
+
+import { Provider } from "react-redux";
+import store from "./store";
+import jwt_decode from "jwt-decode";
 import { setAuthToken } from "./utils/setAuthToken";
 import { setCurrentUser, logoutUser } from "./actions/authAction";
+import "./css/main.scss";
 
 class App extends Component {
   componentDidMount() {
@@ -14,23 +16,23 @@ class App extends Component {
     console.log("CHECKING TOKEN ", token);
     if (token) {
       const decodedData = jwt_decode(token);
-      // set auth token in axios header 
+      // set auth token in axios header
       setAuthToken(token);
-      // set user in the state 
+      // set user in the state
       setCurrentUser(decodedData);
       // check if token is valid or expired
       const currentTime = Date.now() / 1000; // in ms
       const expiryTime = decodedData.iat + 10800000; // 24 hrs
       if (expiryTime <= currentTime) {
         store.dispatch(logoutUser());
-        // now redirect to home page 
+        // now redirect to home page
         window.location.href = "/";
       }
     }
   }
   render() {
     return (
-      <Provider store={store} >
+      <Provider store={store}>
         <React.Fragment>
           <link
             rel="stylesheet"
@@ -44,6 +46,6 @@ class App extends Component {
     );
   }
 }
-document.title = 'Donut';
+document.title = "Donut";
 
 export default App;
diff --git a/src/css/abstracts/_mixins.scss b/src/css/abstracts/_mixins.scss
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/src/css/abstracts/_mixins.scss
@@ -0,0 +1 @@
+
diff --git a/src/css/abstracts/_variables.scss b/src/css/abstracts/_variables.scss
new file mode 100644
index 00000000..ab5302f7
--- /dev/null
+++ b/src/css/abstracts/_variables.scss
@@ -0,0 +1,23 @@
+/*------------------------------------*\
+    #COLORS
+\*------------------------------------*/
+// Primary Colours
+$color-primary-blue: #1a73e8;
+$color-primary-black: #000;
+$color-primary-white: #fff;
+
+// General modal colors
+$color-modal-title: #1a73e8;
+$color-modal-button: #1a73e8;
+$color-modal-miniheader: #90949c;
+$color-modal-form-label: #000000;
+$color-modal-field-border: #e2e2e2;
+$color-modal-buttton-background: #1a73e8;
+$color-modal-button-border: #1a73e8;
+$color-modal-message: #000000;
+$color-modal-button-active: #1a73e8;
+$color-modal-button-inactive: #fff;
+
+//Follower modal specific colors
+$color-modal-follower-name: #000000;
+$color-modal-follower-description: #90949c;
diff --git a/src/css/base/_reset.scss b/src/css/base/_reset.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/css/base/_typography.scss b/src/css/base/_typography.scss
new file mode 100644
index 00000000..37877b89
--- /dev/null
+++ b/src/css/base/_typography.scss
@@ -0,0 +1,13 @@
+/*------------------------------------*\
+    #Typography
+\*------------------------------------*/
+
+//Fonts used in the project
+$font-family-Inter: Inter;
+$font-family-Qanelas: Qanelas;
+$font-family-PlayfairDisplay: Playfair Display;
+
+//General font sizes
+$font-weight-normal: 500;
+$font-weight-bold: 600;
+$font-weight-light: 400;
diff --git a/src/css/components/_modals.scss b/src/css/components/_modals.scss
new file mode 100644
index 00000000..5b7b59da
--- /dev/null
+++ b/src/css/components/_modals.scss
@@ -0,0 +1,149 @@
+.modal {
+  .modal__header {
+    .modal__title {
+      .modal__main-title {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: $font-weight-bold;
+        font-size: 32px;
+        line-height: 39px;
+        color: $color-modal-title;
+      }
+      .modal__mini-title {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: $font-weight-normal;
+        font-size: 12px;
+        line-height: 19px;
+        color: $color-modal-miniheader;
+        letter-spacing: 0.2em;
+        padding-top: 5px;
+      }
+    }
+  }
+  .modal__body {
+    .modal__form {
+      .modal__row {
+        .modal__group {
+          .modal__label {
+            font-family: $font-family-Inter;
+            font-weight: $font-weight-normal;
+            font-size: 14px;
+            color: $color-modal-form-label;
+            margin-bottom: 3px;
+            line-height: 17px;
+          }
+          .modal__post {
+            border: 0.75px solid $color-modal-field-border;
+            box-sizing: border-box;
+            border-radius: 5px;
+            text-align: left;
+            resize: none;
+          }
+          .modal__message {
+            font-family: $font-family-Inter;
+            font-style: normal;
+            font-weight: $font-weight-normal;
+            font-size: 14px;
+            line-height: 17px;
+
+            color: $color-modal-message;
+          }
+        }
+      }
+      .modal__secondary-title {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: $font-weight-normal;
+        font-size: 12px;
+        line-height: 19px;
+        color: $color-modal-miniheader;
+        letter-spacing: 0.2em;
+        padding-top: 18px;
+      }
+    }
+    .modal__follower {
+      margin-top: 15px;
+      margin-bottom: 10px;
+      justify-content: space-between;
+
+      .modal__followerPhoto {
+        margin-top: 3px;
+        height: 43px;
+        width: 43px;
+      }
+      .modal__followerName {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: $font-weight-bold;
+        font-size: 18px;
+        display: block;
+        color: $color-modal-follower-name;
+      }
+      .modal__followerDescription {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 12px;
+        color: $color-modal-follower-description;
+        display: block;
+      }
+      .modal__followButton {
+        background: #fff;
+        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
+        border-radius: 34px;
+      }
+      .modal__followText {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: $font-weight-normal;
+        font-size: 12px;
+        line-height: 15px;
+
+        color: #1a73e8;
+      }
+    }
+  }
+  .modal__buttons {
+    .modal__save {
+      background: $color-modal-button-active;
+      box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
+      border-radius: 34px;
+      width: 104px;
+      height: 42px;
+      margin-right: 20px;
+      margin-bottom: 10px;
+      margin-left: 14px;
+      .modal__buttontext {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: bold;
+        font-size: 18px;
+        line-height: 22px;
+        /* identical to box height */
+
+        color: #ffffff;
+      }
+    }
+    .modal__cancel {
+      border: 1px solid #1a73e8;
+      background: $color-modal-button-inactive;
+      box-sizing: border-box;
+      box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
+      border-radius: 34px;
+      margin-right: 20px;
+      margin-bottom: 10px;
+      width: 104px;
+      height: 42px;
+      .modal__buttontext {
+        font-family: $font-family-Inter;
+        font-style: normal;
+        font-weight: $font-weight-normal;
+        font-size: 18px;
+        line-height: 22px;
+        /* identical to box height */
+        color: #1a73e8;
+      }
+    }
+  }
+}
diff --git a/src/css/layouts/_footer.scss b/src/css/layouts/_footer.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/css/layouts/_header.scss b/src/css/layouts/_header.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/css/main.scss b/src/css/main.scss
new file mode 100644
index 00000000..658c0f29
--- /dev/null
+++ b/src/css/main.scss
@@ -0,0 +1,48 @@
+/*------------------------------------*\
+    #CONTENTS
+\*------------------------------------*/
+/**
+ * ABSTRACTS..............................Declarations of Sass variables & mixins
+ * BASE...................................Default element styles
+ * LAYOUT.................................Layout-specific styles
+ * COMPONENTS.............................Component styles
+ * PAGES..................................Page specific styles
+ * THEMES.................................Theme styles
+ * VENDORS...............................
+ */
+
+/*------------------------------------*\
+    #ABSTRACTS
+\*------------------------------------*/
+@import "./abstracts/variables";
+@import "./abstracts//mixins";
+
+/*------------------------------------*\
+    #BASE
+\*------------------------------------*/
+@import "./base/reset";
+@import "./base/typography";
+
+/*------------------------------------*\
+    #COMPONENTS
+\*------------------------------------*/
+
+@import "./components/modals";
+
+/*------------------------------------*\
+    #LAYOUT
+\*------------------------------------*/
+@import "./layouts/header";
+@import "./layouts/footer";
+
+/*------------------------------------*\
+    #PAGES
+\*------------------------------------*/
+
+/*------------------------------------*\
+    #THEMES
+\*------------------------------------*/
+
+/*------------------------------------*\
+    #VENDORS
+\*------------------------------------*/
diff --git a/src/svgs/logo-image.jpg b/src/svgs/logo-image.jpg
new file mode 100644
index 00000000..0edef7a7
Binary files /dev/null and b/src/svgs/logo-image.jpg differ
diff --git a/src/user/dashboard/navigation/navigation.js b/src/user/dashboard/navigation/navigation.js
index 64f5e70f..4e553e88 100644
--- a/src/user/dashboard/navigation/navigation.js
+++ b/src/user/dashboard/navigation/navigation.js
@@ -4,7 +4,7 @@ import { NavLink } from "react-router-dom";
 import PropTypes from "prop-types";
 import { DonutTitleSmall } from "../../../donutTitle/donutTitle";
 import "./navigation.scss";
-import Logout from "../../profile/popups/logout";
+import Logout from "../../profile/popups/Logout";
 import logo from "../../../svgs/logout.svg";
 import { Info } from "../../integrations/NameForm";
 
@@ -215,7 +215,7 @@ class Navigation extends Component {
               <img class="logout" src={logo} alt="L"></img>
               <b>Logout</b>
             </Button>
-            <Logout show={this.state.logout} onHide={cancel} />
+            <Logout show={this.state.logout} handleClose={cancel} />
           </ListGroup.Item>
           <ListGroup.Item className="inactive">
             <p className="logo-text">CODEUINO</p>
diff --git a/src/user/dashboard/news-feed/news-feed.js b/src/user/dashboard/news-feed/news-feed.js
index 45e6bdb2..7e24ba62 100644
--- a/src/user/dashboard/news-feed/news-feed.js
+++ b/src/user/dashboard/news-feed/news-feed.js
@@ -17,6 +17,7 @@ import { makeStyles } from "@material-ui/core/styles";
 import { Button } from "react-bootstrap";
 import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
 import AddEventModal from "./popups/AddEventModal";
+import AddProjectModal from "./popups/AddProjectModal";
 import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
 import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import ChatBubbleIcon from "@material-ui/icons/ChatBubble";
@@ -80,17 +81,26 @@ export default function PinPosts(props) {
   const classes = styles();
   const [type, changeType] = React.useState("All");
   const [first, second] = React.useState("f");
-  const [show, setShow] = React.useState(false);
+  const [showProject, setShowProject] = React.useState(false);
+  const [showEvent, setShowEvent] = React.useState(false);
 
   let handleClick = (atrb) => () => {
     changeType(atrb);
     second("s");
   };
-  let handleShow = () => {
-    setShow(true);
+  let handleShow = (modalName) => {
+    if (modalName === "project") {
+      setShowProject(true);
+    } else if (modalName === "event") {
+      setShowEvent(true);
+    }
   };
-  let handleClose = () => {
-    setShow(false);
+  let handleClose = (modalName) => {
+    if (modalName === "project") {
+      setShowProject(false);
+    } else if (modalName === "event") {
+      setShowEvent(false);
+    }
   };
   let posts = feed.map((newsItem) => {
     if (
@@ -330,7 +340,9 @@ export default function PinPosts(props) {
               >
                 <Button
                   variant="primary"
-                  onClick={handleShow}
+                  onClick={() => {
+                    handleShow("event");
+                  }}
                   className="optionbtn"
                 >
                   <svg
@@ -347,8 +359,19 @@ export default function PinPosts(props) {
                   </svg>
                   <span className="optionbtn-text">Event</span>
                 </Button>
-                <AddEventModal show={show} handleClose={handleClose} />
-                <Button variant="primary" className="optionbtn">
+                <AddEventModal
+                  show={showEvent}
+                  handleClose={() => {
+                    handleClose("event");
+                  }}
+                />
+                <Button
+                  variant="primary"
+                  className="optionbtn"
+                  onClick={() => {
+                    handleShow("project");
+                  }}
+                >
                   <svg
                     width="38"
                     height="38"
@@ -363,6 +386,12 @@ export default function PinPosts(props) {
                   </svg>
                   <span className="optionbtn-text">Project</span>
                 </Button>
+                <AddProjectModal
+                  show={showProject}
+                  handleClose={() => {
+                    handleClose("project");
+                  }}
+                />
               </ButtonGroup>
             </div>
           </div>
diff --git a/src/user/dashboard/news-feed/news-feed.scss b/src/user/dashboard/news-feed/news-feed.scss
index 02c03613..8ccada06 100644
--- a/src/user/dashboard/news-feed/news-feed.scss
+++ b/src/user/dashboard/news-feed/news-feed.scss
@@ -403,77 +403,6 @@
   }
 }
 
-.modal-box {
-  .modal-header {
-    .modal-title {
-      .main {
-        font-family: Inter;
-        font-style: normal;
-        font-weight: 600;
-        font-size: 32px;
-        line-height: 39px;
-        color: #1a73e8;
-      }
-      .mini {
-        font-family: Inter;
-        font-style: normal;
-        font-weight: 500;
-        font-size: 12px;
-        line-height: 19px;
-        color: #90949c;
-        letter-spacing: 0.2em;
-        padding-top: 18px;
-      }
-    }
-  }
-  .modal-body {
-    .modal-form {
-      .modal-row {
-        .modal-group {
-          .form-label {
-            font-family: Inter;
-            font-style: normal;
-            font-weight: 500;
-            font-size: 14px;
-            line-height: 17px;
-            color: #1a73e8;
-          }
-          .post {
-            border: 0.75px solid #e2e2e2;
-            box-sizing: border-box;
-            border-radius: 5px;
-            text-align: left;
-            resize: none;
-            margin-left: 0;
-          }
-        }
-      }
-    }
-  }
-  .modal-buttons {
-    .save {
-      font-weight: bold;
-      background: #1a73e8;
-      box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
-      border-radius: 34px;
-      width: 74px;
-      margin-right: 20px;
-      margin-bottom: 10px;
-      margin-left: 14px;
-    }
-    .cancel {
-      border: 1px solid #1a73e8;
-      box-sizing: border-box;
-      box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
-      border-radius: 34px;
-      margin-right: 20px;
-      margin-bottom: 10px;
-      color: #1a73e8;
-      font-weight: 500;
-    }
-  }
-}
-
 .posts {
   .category {
     .category-btn {
diff --git a/src/user/dashboard/news-feed/popups/AddEventModal.js b/src/user/dashboard/news-feed/popups/AddEventModal.js
index 18c41aae..50f924b1 100644
--- a/src/user/dashboard/news-feed/popups/AddEventModal.js
+++ b/src/user/dashboard/news-feed/popups/AddEventModal.js
@@ -8,84 +8,81 @@ const AddEventModal = (props) => {
       show={props.show}
       onHide={props.handleClose}
       animation={false}
-      className="modal-box"
+      className="modal"
+      centered
     >
       <Modal.Header
         closeButton
-        className="modal-header"
+        className="modal__header"
         style={props.borderStyle}
       >
-        <Modal.Title className="modal-title" style={props.borderStyle}>
-          <div className="main">New Event</div>
-          <div className="mini">ABOUT THE EVENT</div>
+        <Modal.Title className="modal__title" style={props.borderStyle}>
+          <div className="modal__main-title">New Event</div>
+          <div className="modal__mini-title">ABOUT THE EVENT</div>
         </Modal.Title>
       </Modal.Header>
-      <Modal.Body className="modal-body" style={props.borderStyle}>
-        <Form className="modal-form" style={props.borderStyle}>
-          <Form.Row className="modal-row">
+      <Modal.Body className="modal__body" style={props.borderStyle}>
+        <Form className="modal__form" style={props.borderStyle}>
+          <Form.Row className="modal__row">
             <Form.Group
               as={Col}
               controlId="formGridEmail"
-              className="modal-group"
+              className="modal__group"
             >
-              <Form.Label className="form-label">Event Name</Form.Label>
+              <Form.Label className="modal__label">Event Name</Form.Label>
               <Form.Control type="email" placeholder="Type here.." />
             </Form.Group>
 
             <Form.Group
               as={Col}
               controlId="formGridPassword"
-              className="modal-group"
+              className="modal__group"
             >
-              <Form.Label className="form-label">Location</Form.Label>
+              <Form.Label className="modal__label">Location</Form.Label>
               <Form.Control type="password" placeholder="Where do you live?" />
             </Form.Group>
           </Form.Row>
-          <Form.Row className="modal-row">
+          <Form.Row className="modal__row">
             <Form.Group
               as={Col}
               controlId="formGridEmail"
-              className="modal-group"
+              className="modal__group"
             >
-              <Form.Label className="form-label">Date</Form.Label>
+              <Form.Label className="modal__label">Date</Form.Label>
               <Form.Control type="email" placeholder="DD/MM/YY" />
             </Form.Group>
 
             <Form.Group
               as={Col}
               controlId="formGridPassword"
-              className="modal-group"
+              className="modal__group"
             >
-              <Form.Label className="form-label">Time</Form.Label>
+              <Form.Label className="modal__label">Time</Form.Label>
               <Form.Control type="password" placeholder="10:00 AM" />
             </Form.Group>
           </Form.Row>
-          <Form.Row className="modal-row">
+          <Form.Row className="modal__row">
             <Form.Group
               as={Col}
               controlId="formGridEmail"
-              className="modal-group"
+              className="modal__group"
             >
-              <Form.Label className="form-label">Post Description</Form.Label>
+              <Form.Label className="modal__label">Post Description</Form.Label>
               <Form.Control
                 as="textarea"
-                className="post"
+                className="modal__post"
                 placeholder="What do you want to tell people about the event?"
               />
             </Form.Group>
           </Form.Row>
         </Form>
       </Modal.Body>
-      <div className="modal-buttons">
-        <Button variant="primary" onClick={props.handleClose} className="save">
-          Save
+      <div className="modal__buttons">
+        <Button onClick={props.handleClose} className="modal__save">
+          <span className="modal__buttontext">Save</span>
         </Button>
-        <Button
-          variant="secondry"
-          onClick={props.handleClose}
-          className="cancel"
-        >
-          Cancel
+        <Button onClick={props.handleClose} className="modal__cancel">
+          <span className="modal__buttontext">Cancel</span>
         </Button>
       </div>
     </Modal>
diff --git a/src/user/dashboard/news-feed/popups/AddProjectModal.js b/src/user/dashboard/news-feed/popups/AddProjectModal.js
new file mode 100644
index 00000000..063044db
--- /dev/null
+++ b/src/user/dashboard/news-feed/popups/AddProjectModal.js
@@ -0,0 +1,101 @@
+import React from "react";
+import { Button, Modal, Form, Col } from "react-bootstrap";
+import PropTypes from "prop-types";
+
+const AddProjectModal = (props) => {
+  return (
+    <Modal
+      show={props.show}
+      onHide={props.handleClose}
+      animation={false}
+      className="modal"
+      centered
+    >
+      <Modal.Header
+        closeButton
+        className="modal__header"
+        style={props.borderStyle}
+      >
+        <Modal.Title className="modal__title" style={props.borderStyle}>
+          <div className="modal__main-title">New Project</div>
+          <div className="modal__mini-title">ABOUT THE PROJECT</div>
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body className="modal__body" style={props.borderStyle}>
+        <Form className="modal__form" style={props.borderStyle}>
+          <Form.Row className="modal__row">
+            <Form.Group
+              as={Col}
+              controlId="formGridEmail"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">Project Name</Form.Label>
+              <Form.Control type="text" placeholder="Type here.." />
+            </Form.Group>
+          </Form.Row>
+          <Form.Row className="modal__row">
+            <Form.Group as={Col} className="modal__group">
+              <Form.Label className="modal__label">
+                Project Contributers
+              </Form.Label>
+              <Form.Control
+                type="text"
+                placeholder="Who all contributed to the project?"
+              />
+            </Form.Group>
+          </Form.Row>
+          <Form.Row className="modal__row">
+            <Form.Group
+              as={Col}
+              controlId="formGridEmail"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">
+                Project Description
+              </Form.Label>
+              <Form.Control
+                as="textarea"
+                className="modal__post"
+                placeholder="What do you want to tell people about the project?"
+              />
+            </Form.Group>
+          </Form.Row>
+          <Form.Row className="modal__row">
+            <Form.Group
+              as={Col}
+              controlId="formGridEmail"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">Github Link</Form.Label>
+              <Form.Control type="text" placeholder="Enter Github Link" />
+            </Form.Group>
+
+            <Form.Group
+              as={Col}
+              controlId="formGridPassword"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">Other Link</Form.Label>
+              <Form.Control type="text" placeholder="Enter Other Links" />
+            </Form.Group>
+          </Form.Row>
+        </Form>
+      </Modal.Body>
+      <div className="modal__buttons">
+        <Button onClick={props.handleClose} className="modal__save">
+          <span className="modal__buttontext">Save</span>
+        </Button>
+        <Button onClick={props.handleClose} className="modal__cancel">
+          <span className="modal__buttontext">Cancel</span>
+        </Button>
+      </div>
+    </Modal>
+  );
+};
+AddProjectModal.propTypes = {
+  onClick: PropTypes.func,
+  show: PropTypes.bool,
+  style: PropTypes.object,
+};
+
+export default AddProjectModal;
diff --git a/src/user/dashboard/news-feed/popups/comment.js b/src/user/dashboard/news-feed/popups/comment.js
index 57ad7538..d76e0256 100644
--- a/src/user/dashboard/news-feed/popups/comment.js
+++ b/src/user/dashboard/news-feed/popups/comment.js
@@ -1,76 +1,86 @@
-import React, {Component} from 'react';
-import {Modal, Button, Row, Col, Form} from 'react-bootstrap';
-import "./comment.scss"
+import React, { Component } from "react";
+import { Modal, Button, Row, Col, Form } from "react-bootstrap";
+import "./comment.scss";
 
-import comments from '../../../../jsonData/comments'
-export class Comment extends Component{
-    // eslint-disable-next-line
-    constructor(props){
-        super(props);
-        this.state={
-          comment:""
-         }
-         this.onChange = this.onChange.bind(this);
-         this.onSubmit = this.onSubmit.bind(this);
-      }
+import comments from "../../../../jsonData/comments";
+export class Comment extends Component {
+  // eslint-disable-next-line
+  constructor(props) {
+    super(props);
+    this.state = {
+      comment: "",
+    };
+    this.onChange = this.onChange.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
+  }
 
-   
   onChange(e) {
     this.setState({ [e.target.name]: e.target.value });
   }
 
-      onSubmit(e){
-         e.preventDefault();
-         const comment = this.state
-
-         console.log(comment)
-      }
-    render(){
-
-var all_comments = comments.map((comment)=>(
-  <Row className="user_comment" id ={comment._id}>
-  <Col md={2}><img class="photo" src={comment.logo} alt="I"></img></Col>
-  <Col md={10}><div className="contain"> 
-    <p className="user">{comment.name}</p>
-    <p className="comment">{comment.comment}</p>
-  </div></Col>
-</Row>
-))
+  onSubmit(e) {
+    e.preventDefault();
+    const comment = this.state;
 
+    console.log(comment);
+  }
+  render() {
+    var all_comments = comments.map((comment) => (
+      <Row className="user_comment" id={comment._id}>
+        <Col md={2}>
+          <img class="photo" src={comment.logo} alt="I"></img>
+        </Col>
+        <Col md={10}>
+          <div className="contain">
+            <p className="user">{comment.name}</p>
+            <p className="comment">{comment.comment}</p>
+          </div>
+        </Col>
+      </Row>
+    ));
 
     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">Comment</div>
-        </Modal.Title> 
-        </Modal.Header>
-        <Modal.Body>
-        <Form onSubmit={this.onSubmit}>
-        <Row className="form-content">
-        <Form.Control className="form-input"
-            as="textarea"
-            name="comment"
-            value={this.state.comment}
-            onChange={this.onChange}
-            placeholder="Write your mind here...."
-            size="sm"/>
-        </Row>  
-       
-        <div className="form-footer">
-          <Button onClick={this.props.onHide} type="submit" className="savebtn">Post</Button>
+      <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">Comment</div>
+            </Modal.Title>
+          </Modal.Header>
+          <Modal.Body>
+            <Form onSubmit={this.onSubmit}>
+              <Row className="form-content">
+                <Form.Control
+                  className="form-input"
+                  as="textarea"
+                  name="comment"
+                  value={this.state.comment}
+                  onChange={this.onChange}
+                  placeholder="Write your mind here...."
+                  size="sm"
+                />
+              </Row>
+
+              <div className="form-footer">
+                <Button
+                  onClick={this.props.onHide}
+                  type="submit"
+                  className="savebtn"
+                >
+                  Post
+                </Button>
+              </div>
+            </Form>
+            <div className="about">Other people who commented</div>
+            {all_comments}
+          </Modal.Body>
         </div>
-        </Form>
-        <div className="about">Other people who commented</div>
-        {all_comments}
-</Modal.Body>
-      </div>
       </Modal>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/src/user/profile/popups/EditProfile.js b/src/user/profile/popups/EditProfile.js
new file mode 100644
index 00000000..0fcdc5ca
--- /dev/null
+++ b/src/user/profile/popups/EditProfile.js
@@ -0,0 +1,122 @@
+import React from "react";
+import { Button, Modal, Form, Col } from "react-bootstrap";
+import PropTypes from "prop-types";
+
+const EditProfile = (props) => {
+  return (
+    <Modal {...props} className="modal">
+      <Modal.Header
+        closeButton
+        className="modal__header"
+        style={props.borderStyle}
+        centered
+      >
+        <Modal.Title className="modal__title" style={props.borderStyle}>
+          <div className="modal__main-title">Edit Profile</div>
+          <div className="modal__mini-title">PERSONAL INFORMATION</div>
+        </Modal.Title>
+      </Modal.Header>
+      <Modal.Body className="modal__body" style={props.borderStyle}>
+        <Form className="modal__form" style={props.borderStyle}>
+          <Form.Row className="modal__row">
+            <Form.Group
+              as={Col}
+              controlId="formGridFirstName"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">First Name</Form.Label>
+              <Form.Control type="text" placeholder="Type here.." />
+            </Form.Group>
+
+            <Form.Group
+              as={Col}
+              controlId="formGridLastName"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">Last Name</Form.Label>
+              <Form.Control type="text" placeholder="Type here.." />
+            </Form.Group>
+          </Form.Row>
+          <Form.Row className="modal__row">
+            <Form.Group
+              as={Col}
+              controlId="formGridDesignation"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">Designation</Form.Label>
+              <Form.Control type="text" placeholder="Type here.." />
+            </Form.Group>
+
+            <Form.Group
+              as={Col}
+              controlId="formGridLocation"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">Location</Form.Label>
+              <Form.Control type="text" placeholder="Type here.." />
+            </Form.Group>
+          </Form.Row>
+          <Form.Row className="modal__row">
+            <Form.Group
+              as={Col}
+              controlId="formGridAbout"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">About</Form.Label>
+              <Form.Control
+                as="textarea"
+                className="modal__post"
+                placeholder="Write a few lines about yourself.."
+              />
+            </Form.Group>
+          </Form.Row>
+          <div className="modal__secondary-title">PROFILES</div>
+          <Form.Row className="modal__row">
+            <Form.Group
+              as={Col}
+              controlId="formGridGithub"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">Github URL</Form.Label>
+              <Form.Control type="text" placeholder="Type here.." />
+            </Form.Group>
+
+            <Form.Group
+              as={Col}
+              controlId="formGridLinkedIn"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">LinkedIn URL</Form.Label>
+              <Form.Control type="text" placeholder="Type here.." />
+            </Form.Group>
+          </Form.Row>
+          <Form.Row className="modal__row">
+            <Form.Group
+              as={Col}
+              controlId="formGridFacebook"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">Facebook URL</Form.Label>
+              <Form.Control type="text" placeholder="Type here.." />
+            </Form.Group>
+          </Form.Row>
+        </Form>
+      </Modal.Body>
+      <div className="modal__buttons">
+        <Button onClick={props.handleClose} className="modal__save">
+          <span className="modal__buttontext">Save</span>
+        </Button>
+        <Button onClick={props.handleClose} className="modal__cancel">
+          <span className="modal__buttontext">Cancel</span>
+        </Button>
+      </div>
+    </Modal>
+  );
+};
+EditProfile.propTypes = {
+  onClick: PropTypes.func,
+  show: PropTypes.bool,
+  style: PropTypes.object,
+};
+
+export default EditProfile;
diff --git a/src/user/profile/popups/Followers.js b/src/user/profile/popups/Followers.js
new file mode 100644
index 00000000..b48e20bf
--- /dev/null
+++ b/src/user/profile/popups/Followers.js
@@ -0,0 +1,157 @@
+import React, { Component } from "react";
+import { Modal, Button, Row, Col, Image } from "react-bootstrap";
+import logo from "../../../svgs/logo-image.jpg";
+
+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"
+        className="modal"
+        centered
+      >
+        <Modal.Header closeButton className="modal__header">
+          <Modal.Title className="modal__title">
+            <div className="modal__main-title">Followers</div>
+            <div className="modal__mini-title">PEOPLE WHO FOLLOW YOU</div>
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body className="modal__body">
+          <Row className="modal__follower" id="p1">
+            <Col md={2}>
+              <Image
+                className="modal__followerPhoto"
+                src={logo}
+                alt="I"
+                rounded
+              />
+            </Col>
+            <Col md={7}>
+              <span className="modal__followerName">Dhanus Rajendra</span>
+              <span className="modal__followerDescription">
+                Front-End Developer
+              </span>
+            </Col>
+            <Col md={3}>
+              <Button className="modal__followButton" variant="outline-primary">
+                <span className="modal__followText">Follow</span>
+              </Button>
+            </Col>
+          </Row>
+          <Row className="modal__follower" id="p1">
+            <Col md={2}>
+              <Image
+                className="modal__followerPhoto"
+                src={logo}
+                alt="I"
+                rounded
+              />
+            </Col>
+            <Col md={7}>
+              <span className="modal__followerName">Dhanus Rajendra</span>
+              <span className="modal__followerDescription">
+                Front-End Developer
+              </span>
+            </Col>
+            <Col md={3}>
+              <Button className="modal__followButton" variant="outline-primary">
+                <span className="modal__followText">Follow</span>
+              </Button>
+            </Col>
+          </Row>
+          <Row className="modal__follower" id="p1">
+            <Col md={2}>
+              <Image
+                className="modal__followerPhoto"
+                src={logo}
+                alt="I"
+                rounded
+              />
+            </Col>
+            <Col md={7}>
+              <span className="modal__followerName">Dhanus Rajendra</span>
+              <span className="modal__followerDescription">
+                Front-End Developer
+              </span>
+            </Col>
+            <Col md={3}>
+              <Button className="modal__followButton" variant="outline-primary">
+                <span className="modal__followText">Follow</span>
+              </Button>
+            </Col>
+          </Row>
+          <Row className="modal__follower" id="p1">
+            <Col md={2}>
+              <Image
+                className="modal__followerPhoto"
+                src={logo}
+                alt="I"
+                rounded
+              />
+            </Col>
+            <Col md={7}>
+              <span className="modal__followerName">Dhanus Rajendra</span>
+              <span className="modal__followerDescription">
+                Front-End Developer
+              </span>
+            </Col>
+            <Col md={3}>
+              <Button className="modal__followButton" variant="outline-primary">
+                <span className="modal__followText">Follow</span>
+              </Button>
+            </Col>
+          </Row>
+          <Row className="modal__follower" id="p1">
+            <Col md={2}>
+              <Image
+                className="modal__followerPhoto"
+                src={logo}
+                alt="I"
+                rounded
+              />
+            </Col>
+            <Col md={7}>
+              <span className="modal__followerName">Dhanus Rajendra</span>
+              <span className="modal__followerDescription">
+                Front-End Developer
+              </span>
+            </Col>
+            <Col md={3}>
+              <Button className="modal__followButton" variant="outline-primary">
+                <span className="modal__followText">Follow</span>
+              </Button>
+            </Col>
+          </Row>
+          <Row className="modal__follower" id="p1">
+            <Col md={2}>
+              <Image
+                className="modal__followerPhoto"
+                src={logo}
+                alt="I"
+                rounded
+              />
+            </Col>
+            <Col md={7}>
+              <span className="modal__followerName">Dhanus Rajendra</span>
+              <span className="modal__followerDescription">
+                Front-End Developer
+              </span>
+            </Col>
+            <Col md={3}>
+              <Button className="modal__followButton" variant="outline-primary">
+                <span className="modal__followText">Follow</span>
+              </Button>
+            </Col>
+          </Row>
+        </Modal.Body>
+      </Modal>
+    );
+  }
+}
diff --git a/src/user/profile/popups/Logout.js b/src/user/profile/popups/Logout.js
new file mode 100644
index 00000000..d010eb67
--- /dev/null
+++ b/src/user/profile/popups/Logout.js
@@ -0,0 +1,65 @@
+import React, { Component } from "react";
+import { Modal, Button, Form, Col } from "react-bootstrap";
+import { connect } from "react-redux";
+import { withRouter } from "react-router-dom";
+import { logoutUser } from "../../../actions/authAction";
+
+class Logout extends Component {
+  // eslint-disable-next-line
+  constructor(props) {
+    super(props);
+  }
+  onLogoutClick = (e) => {
+    e.preventDefault();
+    console.log("Logging out!");
+    this.props.logoutUser();
+  };
+  render() {
+    return (
+      <Modal
+        show={this.props.show}
+        onHide={this.props.handleClose}
+        animation={false}
+        className="modal"
+        centered
+      >
+        <Modal.Header closeButton className="modal__header">
+          <Modal.Title className="modal__title">
+            <div className="modal__main-title">Logout?</div>
+          </Modal.Title>
+        </Modal.Header>
+
+        <Modal.Body className="modal__body">
+          <Form className="modal__form">
+            <Form.Row className="modal__row">
+              <Form.Group
+                as={Col}
+                controlId="formGridFirstName"
+                className="modal__group"
+              >
+                <div className="modal__message">
+                  You sure you want to logout from Donut?
+                </div>
+              </Form.Group>
+            </Form.Row>
+          </Form>
+        </Modal.Body>
+        <div className="modal__buttons">
+          <Button onClick={this.props.handleClose} className="modal__save">
+            <span className="modal__buttontext">Save</span>
+          </Button>
+          <Button onClick={this.props.handleClose} className="modal__cancel">
+            <span className="modal__buttontext">Cancel</span>
+          </Button>
+        </div>
+      </Modal>
+    );
+  }
+}
+// map state to props
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  error: state.error,
+});
+
+export default connect(mapStateToProps, { logoutUser })(withRouter(Logout));
diff --git a/src/user/profile/popups/edit-profile.js b/src/user/profile/popups/edit-profile.js
deleted file mode 100644
index 86ac8a57..00000000
--- a/src/user/profile/popups/edit-profile.js
+++ /dev/null
@@ -1,99 +0,0 @@
-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
deleted file mode 100644
index c673d738..00000000
--- a/src/user/profile/popups/followers.js
+++ /dev/null
@@ -1,81 +0,0 @@
-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
deleted file mode 100644
index 842e69fa..00000000
--- a/src/user/profile/popups/logout.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import React, {Component} from 'react';
-import {Modal, Button} from 'react-bootstrap';
-import "./popups.scss";
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-import { logoutUser } from '../../../actions/authAction';
-
-class Logout extends Component{
-    // eslint-disable-next-line
-    constructor(props){
-        super(props);
-    }
-    onLogoutClick = (e) => {
-      e.preventDefault();
-      console.log("Logging out!");
-      this.props.logoutUser();
-    }
-    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.onLogoutClick} className="savebtn" size="sm">Yes</Button>
-              <Button variant="outline-primary" onClick={this.props.onHide} size="sm">No</Button>
-            </div>
-          </div>
-      </Modal>
-      );
-  }
-}
-// map state to props 
-const mapStateToProps = (state) => ({
-  auth: state.auth,
-  error: state.error
-});
-
-export default connect(mapStateToProps, { logoutUser })(withRouter(Logout));
\ No newline at end of file
diff --git a/src/user/profile/popups/popups.scss b/src/user/profile/popups/popups.scss
deleted file mode 100644
index 8e8f8f3c..00000000
--- a/src/user/profile/popups/popups.scss
+++ /dev/null
@@ -1,100 +0,0 @@
-.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 4c806407..c0a65523 100644
--- a/src/user/profile/user-info/user-info.js
+++ b/src/user/profile/user-info/user-info.js
@@ -2,17 +2,19 @@ import React, { Component } from "react";
 import "./user-info.scss";
 import { Button } from "react-bootstrap";
 import { Avatar } from "@material-ui/core";
-import {EditProfile} from "./../popups/edit-profile";
-import {Followers} from "./../popups/followers"
+import EditProfile from "./../popups/EditProfile";
+import { Followers } from "../popups/Followers";
 class UserInfo extends Component {
-  state = { editProfile:false, followersList:false };
+  state = { editProfile: false, followersList: false };
   render() {
-    let cancel =()=>this.setState({
-      editProfile:false
-    });
-    let cancelf =()=>this.setState({
-      followersList:false
-    });
+    let cancel = () =>
+      this.setState({
+        editProfile: false,
+      });
+    let cancelf = () =>
+      this.setState({
+        followersList: false,
+      });
     return (
       <div className="user-details">
         <div className="user-image">
@@ -20,18 +22,25 @@ class UserInfo extends Component {
             <Avatar className="userpic"></Avatar>
           </div>
           <div className="edit-option">
-            <Button variant="primary" onClick={
-              ()=>this.setState({editProfile:true})}>User Edit</Button>
-              <EditProfile show={this.state.editProfile}
-              onHide={cancel} />
+            <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" onClick={
-              ()=>this.setState({followersList:true})}>Follow</Button>
-              <Followers show={this.state.followersList}
-              onHide={cancelf} />
+            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>
diff --git a/src/user/projects/popups/delete-project.js b/src/user/projects/popups/delete-project.js
index b2b06255..b7c757bb 100644
--- a/src/user/projects/popups/delete-project.js
+++ b/src/user/projects/popups/delete-project.js
@@ -1,24 +1,24 @@
 import React, { Component } from "react";
 import { Modal, Button } from "react-bootstrap";
-import "./popups.scss";
 
 export class DeleteProject extends Component {
-
   render() {
     return (
-      <Modal {...this.props} aria-labelledby="contained-modal-title-vcenter" centered>
-      <Modal.Header closeButton>
-        <Modal.Title className="delete_project_title" >Delete This Project</Modal.Title>
-      </Modal.Header>
-      <Modal.Footer>
-      <Button variant="danger">
-            Remove
-          </Button>
-          <Button variant="light">
-            Keep It
-          </Button>
-      </Modal.Footer>
-    </Modal>           
+      <Modal
+        {...this.props}
+        aria-labelledby="contained-modal-title-vcenter"
+        centered
+      >
+        <Modal.Header closeButton>
+          <Modal.Title className="delete_project_title">
+            Delete This Project
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Footer>
+          <Button variant="danger">Remove</Button>
+          <Button variant="light">Keep It</Button>
+        </Modal.Footer>
+      </Modal>
     );
   }
 }
diff --git a/src/user/projects/popups/edit-project.js b/src/user/projects/popups/edit-project.js
index 0dbc51b6..e5a0fa0a 100644
--- a/src/user/projects/popups/edit-project.js
+++ b/src/user/projects/popups/edit-project.js
@@ -1,29 +1,27 @@
 import React, { Component } from "react";
 import { Modal, Button, Row, Col, Form } from "react-bootstrap";
-import "./popups.scss";
 export class EditProject extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      Proj_name: '',
-      version: '',
-      short_des: '',
-      long_des: '',
-      github_link: '',
-      bitbucket_link: '',
-      host_link: '',
-      img_link: ''
-    }
-   this.trigger=0
-   this.onChange = this.onChange.bind(this);
+      Proj_name: "",
+      version: "",
+      short_des: "",
+      long_des: "",
+      github_link: "",
+      bitbucket_link: "",
+      host_link: "",
+      img_link: "",
+    };
+    this.trigger = 0;
+    this.onChange = this.onChange.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
   }
 
-  componentWillReceiveProps(nextProps){
-      if(this.trigger<1)
-         this.setState({...nextProps.data})
-         this.trigger = this.trigger+1;
-        }
+  componentWillReceiveProps(nextProps) {
+    if (this.trigger < 1) this.setState({ ...nextProps.data });
+    this.trigger = this.trigger + 1;
+  }
 
   onChange(e) {
     this.setState({ [e.target.name]: e.target.value });
@@ -31,13 +29,11 @@ export class EditProject extends Component {
 
   onSubmit(e) {
     e.preventDefault();
-const EditProject = this.state
+    const EditProject = this.state;
 
     console.log("Edited Project", EditProject);
   }
 
-
-
   render() {
     return (
       <Modal
@@ -53,7 +49,7 @@ const EditProject = this.state
             </Modal.Title>
           </Modal.Header>
           <Modal.Body>
-            <Form  onSubmit={this.onSubmit}>
+            <Form onSubmit={this.onSubmit}>
               <Row className="form-content">
                 <Col className="p-0" sm={12}>
                   <Form.Label className="label">Project Name</Form.Label>