diff --git a/src/css/components/_modals.scss b/src/css/components/_modals.scss
index 8fe808a0..284d13d9 100644
--- a/src/css/components/_modals.scss
+++ b/src/css/components/_modals.scss
@@ -1,12 +1,12 @@
 .modal {
   border-radius: 20px;
   .modal-content {
-     border-radius: 10px;
-     max-height: 70vh;
-     width: 66%;
-     border: 0px;
-     overflow-y: scroll;
-     overflow-x: hidden;
+    border-radius: 10px;
+    max-height: 70vh;
+    width: 66%;
+    border: 0px;
+    overflow-y: scroll;
+    overflow-x: hidden;
   }
   .modal__header {
     .modal__title {
@@ -33,7 +33,7 @@
     }
     .modal__search {
       width: 100%;
-      border: 1px solid #CCCCCC;
+      border: 1px solid #cccccc;
       box-sizing: border-box;
       border-radius: 5px;
       padding-left: 5px;
@@ -44,23 +44,23 @@
       font-weight: normal;
       font-size: 15px;
       line-height: 5px;
-      color: #90949C;
+      color: #90949c;
       padding-top: 5px;
       padding-bottom: 5px;
     }
   }
   .modal__body {
     overflow-y: scroll;
-     .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__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__form {
       .modal__row {
         .modal__group {
@@ -94,10 +94,15 @@
             margin-left: 0px;
             margin-top: -0.3em;
             border-radius: 50%;
-            border: 1px solid #CCCCCC;
+            border: 1px solid #cccccc;
             box-sizing: border-box;
             border-radius: 5px;
           }
+          .modal__textSelection {
+            font-style: italic;
+            display: block;
+            color: #6c757d;
+          }
         }
       }
       .modal__secondary-title {
@@ -119,7 +124,7 @@
       justify-content: center;
       align-items: center;
       .follower__image {
-        border: 1px solid #E6E6E5;
+        border: 1px solid #e6e6e5;
         border-radius: 5px;
         min-width: 56px;
         margin-left: 10px;
@@ -181,7 +186,7 @@
       justify-content: center;
       align-items: center;
       .member__image {
-        border: 1px solid #E6E6E5;
+        border: 1px solid #e6e6e5;
         border-radius: 5px;
         min-width: 56px;
         margin-left: 10px;
@@ -222,7 +227,7 @@
         display: block;
       }
       .modal__remove__followButton {
-        border: 1px solid #EB5757;
+        border: 1px solid #eb5757;
         box-sizing: border-box;
         box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
         border-radius: 34px;
@@ -238,7 +243,7 @@
           font-weight: 500;
           font-size: 12px;
           line-height: 15px;
-          color: #EB5757;
+          color: #eb5757;
         }
       }
     }
@@ -256,7 +261,7 @@
           display: flex;
           .invite__btn {
             margin-left: 3px;
-            background: #1A73E8;
+            background: #1a73e8;
             box-shadow: 1.26667px 2.53333px 6.33333px rgba(0, 0, 0, 0.1);
             border-radius: 43.0667px;
             width: 83px;
@@ -269,7 +274,7 @@
           flex-wrap: wrap;
           .invite__btn {
             margin-right: 10px;
-            background: #1A73E8;
+            background: #1a73e8;
             box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
             border-radius: 20px;
             width: 83px;
@@ -282,7 +287,7 @@
             font-weight: normal;
             font-size: 13px;
             line-height: 16px;
-            color: #90949C;
+            color: #90949c;
             width: 100%;
             padding-top: 1em;
           }
diff --git a/src/images/userIcon2.jpg b/src/images/userIcon2.jpg
new file mode 100644
index 00000000..0edef7a7
Binary files /dev/null and b/src/images/userIcon2.jpg differ
diff --git a/src/router.js b/src/router.js
index f81313e3..92cdef44 100644
--- a/src/router.js
+++ b/src/router.js
@@ -12,12 +12,15 @@ import ProjInfo from "./user/projects/proj-info/proj-info";
 import PrivateRoute from "./common/PrivateRoute";
 import Maintenance from "./maintenance/maintenance";
 import Events from "./user/events/events";
+import UserProposalDashboard from "./user/proposals/UserProposalDashboard/UserProposalDashboard";
+import AdminProposalDashboard from "./user/proposals/AdminProposalDashboard/AdminProposalDashboard";
+import ProposalDiscussion from "./user/proposals/ProposalDiscussion/ProposalDiscussion";
+import ProposalEditor from "./user/proposals/ProposalEditor/ProposalEditor";
 import Admin from "./user/Admin/Admin";
 import Setup from "./user/setup/Setup";
 import CommunitySetting from "./user/dashboard/Community/CommunitySetting";
 import Insight from "./user/dashboard/insights/Insight";
 
-
 const Router = () => (
   <BrowserRouter>
     <Switch>
@@ -29,13 +32,30 @@ const Router = () => (
       <PrivateRoute exact path="/profile" component={Profile} />
       <PrivateRoute exact path="/:id/proj-info" component={ProjInfo} />
       <PrivateRoute exact path="/organization" component={Organization} />
-      <PrivateRoute exact path="/settings" component={Settings}/>
+      <PrivateRoute exact path="/settings" component={Settings} />
       <PrivateRoute exact path="/projects" component={Projects} />
       <PrivateRoute exact path="/events" component={Events} />
+      <PrivateRoute exact path="/proposal" component={UserProposalDashboard} />
+      <PrivateRoute
+        exact
+        path="/adminproposal"
+        component={AdminProposalDashboard}
+      />
+      <PrivateRoute
+        exact
+        path="/proposalDiscussion"
+        component={ProposalDiscussion}
+      />
+      <PrivateRoute
+        exact
+        path="/adminproposal"
+        component={AdminProposalDashboard}
+      />
+      <PrivateRoute exact path="/proposaleditor" component={ProposalEditor} />
       <PrivateRoute exact path="/setup" component={Setup} />
       <PrivateRoute exact path="/org-settings" component={CommunitySetting} />
       <PrivateRoute exact path="/insight" component={Insight} />
-      <PrivateRoute exact path="/admin" component={Admin}/>
+      <PrivateRoute exact path="/admin" component={Admin} />
       <Route component={NotFound} />
     </Switch>
   </BrowserRouter>
diff --git a/src/svgs/luke_1.jpg b/src/svgs/luke_1.jpg
new file mode 100644
index 00000000..0edef7a7
Binary files /dev/null and b/src/svgs/luke_1.jpg differ
diff --git a/src/user/dashboard/dashboard.scss b/src/user/dashboard/dashboard.scss
index da53b66a..46a6cc7f 100644
--- a/src/user/dashboard/dashboard.scss
+++ b/src/user/dashboard/dashboard.scss
@@ -4,18 +4,18 @@
   height: auto;
   font-family: Muli, sans-serif;
   .navigation {
-    flex: 1;
+    flex-grow: 1;
     border-right: solid 1px #dfe9f1;
   }
   .news {
-    flex: 4;
+    flex-grow: 4;
     .notify-user {
       display: flex;
       padding: 20px 0px 20px 30px;
     }
   }
   .promotions {
-    flex: 2;
+    flex-grow: 2;
     padding: 20px 12px 20px 0px;
   }
 }
diff --git a/src/user/pinned-posts/posts/posts.js b/src/user/pinned-posts/posts/posts.js
index 4d9f530f..6abaa5d3 100644
--- a/src/user/pinned-posts/posts/posts.js
+++ b/src/user/pinned-posts/posts/posts.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import "./posts.scss";
-import gsoc from "../../../images/gsoc.png";
+import userIcon2 from "../../../images/gsoc.png";
 
 class Posts extends Component {
   state = { date: new Date() };
diff --git a/src/user/proposals/AdminProposalDashboard/AdminProposalDashboard.js b/src/user/proposals/AdminProposalDashboard/AdminProposalDashboard.js
new file mode 100644
index 00000000..9b1f0f51
--- /dev/null
+++ b/src/user/proposals/AdminProposalDashboard/AdminProposalDashboard.js
@@ -0,0 +1,32 @@
+import React, { Component } from "react";
+import "./AdminProposalDashboard.scss";
+import Navigation from "../../dashboard/navigation/navigation";
+import DashboardContent from "./DashboardContent/DashboardContent";
+import DashboardRightPanel from "./DashboardRightPanel/DashboardRightPanel";
+
+class UserProposalDashboard extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dashboard: true,
+      isLoading: true,
+    };
+  }
+  render() {
+    return (
+      <div className="dashboard">
+        <div className="dashboard__navigation">
+          <Navigation dashboard={this.state.dashboard} />
+        </div>
+        <div className="dashboard__content">
+          <DashboardContent />
+        </div>
+        <div className="dashboard__rightpanel">
+          <DashboardRightPanel />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default UserProposalDashboard;
diff --git a/src/user/proposals/AdminProposalDashboard/AdminProposalDashboard.scss b/src/user/proposals/AdminProposalDashboard/AdminProposalDashboard.scss
new file mode 100644
index 00000000..86e9c195
--- /dev/null
+++ b/src/user/proposals/AdminProposalDashboard/AdminProposalDashboard.scss
@@ -0,0 +1,16 @@
+.dashboard {
+  display: flex;
+  min-height: 100vh;
+  height: auto;
+  font-family: Muli, sans-serif;
+  .dashboard__navigation {
+    flex: 1;
+    border-right: solid 1px #dfe9f1;
+  }
+  .dashboard__content {
+    flex: 4;
+  }
+  .dashboard__rightpanel {
+    flex: 1.5;
+  }
+}
diff --git a/src/user/proposals/AdminProposalDashboard/DashboardContent/DashboardContent.js b/src/user/proposals/AdminProposalDashboard/DashboardContent/DashboardContent.js
new file mode 100644
index 00000000..b1d88689
--- /dev/null
+++ b/src/user/proposals/AdminProposalDashboard/DashboardContent/DashboardContent.js
@@ -0,0 +1,177 @@
+import React, { Component } from "react";
+import { Button, Form, Col, Image } from "react-bootstrap";
+import "./DashboardContent.scss";
+import userIcon2 from "../../../../images/userIcon2.jpg";
+
+class DashboardContent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div className="dashboard-content">
+        <div className="searchbar-container">
+          <Form>
+            <Form.Control
+              as="input"
+              placeholder="search"
+              className="searchbar"
+            />
+          </Form>
+          <div className="dashboard-title">
+            <span className="title-text">Proposals</span>
+          </div>
+          <div className="button-container">
+            <div className="posts">
+              <div className="category">
+                <Button variant="primary" className="category-btn">
+                  <span className="btn-content">All</span>
+                </Button>
+                <span className="space"></span>
+                <Button variant="primary" className="category-btn">
+                  <span className="btn-content">Accepted</span>
+                </Button>
+                <span className="space"></span>
+                <Button variant="primary" className="category-btn">
+                  <span className="btn-content">Under Review</span>
+                </Button>
+                <span className="space"></span>
+                <Button variant="primary" className="category-btn">
+                  <span className="btn-content">Drafts</span>
+                </Button>
+                <Button variant="primary" className="category-btn">
+                  <span className="btn-content">Rejected</span>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="proposal-container">
+          <div className="proposals">
+            <div className="single-proposal">
+              <div className="user-info">
+                <div className="image">
+                  <Image src={userIcon2} alt="icon" rounded />
+                </div>
+                <div className="img-desc">
+                  <h2>Admin panel in donut dashboard</h2>
+                  <p className="proposal-date">June 5, 2018 4:31 AM</p>
+                </div>
+                <Button
+                  variant="primary"
+                  className="status-btn-draft"
+                  size="sm"
+                >
+                  <span className="btn-content">Draft</span>
+                </Button>
+              </div>
+              <div className="proposal-content">
+                <div className="proposal-details">
+                  ex sit ex laboris adipisicing enim eiusmod proident
+                  exercitation ea fugiat in llit pariatur occaecat ut nostrud
+                  ullamco ex official ex sit ex laboris adipisicing enim eiusmod
+                  proident exercitation ea...
+                </div>
+                <div className="proposal-options">
+                  <Button variant="primary" className="option-btn" size="sm">
+                    <span className="option-text">Edit</span>
+                  </Button>
+                  <Button
+                    variant="primary"
+                    className="option-btn"
+                    size="sm"
+                    active
+                  >
+                    <span className="option-text">View</span>
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div className="single-proposal">
+              <div className="user-info">
+                <div className="image">
+                  <Image src={userIcon2} alt="icon" rounded />
+                </div>
+                <div className="img-desc">
+                  <h2>Admin panel in donut dashboard</h2>
+                  <p className="proposal-date">June 5, 2018 4:31 AM</p>
+                </div>
+                <Button
+                  variant="primary"
+                  className="status-btn-submitted"
+                  size="sm"
+                >
+                  <span className="btn-content">Submitted</span>
+                </Button>
+              </div>
+              <div className="proposal-content">
+                <div className="proposal-details">
+                  ex sit ex laboris adipisicing enim eiusmod proident
+                  exercitation ea fugiat in llit pariatur occaecat ut nostrud
+                  ullamco ex official ex sit ex laboris adipisicing enim eiusmod
+                  proident exercitation ea...
+                </div>
+                <div className="proposal-options">
+                  <Button variant="primary" className="option-btn" size="sm">
+                    <span className="option-text">Edit</span>
+                  </Button>
+                  <Button
+                    variant="primary"
+                    className="option-btn"
+                    size="sm"
+                    active
+                  >
+                    <span className="option-text">View</span>
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <div className="single-proposal">
+              <div className="user-info">
+                <div className="image">
+                  <Image src={userIcon2} alt="icon" rounded />
+                </div>
+                <div className="img-desc">
+                  <h2>Admin panel in donut dashboard</h2>
+                  <p className="proposal-date">June 5, 2018 4:31 AM</p>
+                </div>
+                <Button
+                  variant="primary"
+                  className="status-btn-accepted"
+                  size="sm"
+                >
+                  <span className="btn-content">Accepted</span>
+                </Button>
+              </div>
+              <div className="proposal-content">
+                <div className="proposal-details">
+                  ex sit ex laboris adipisicing enim eiusmod proident
+                  exercitation ea fugiat in llit pariatur occaecat ut nostrud
+                  ullamco ex official ex sit ex laboris adipisicing enim eiusmod
+                  proident exercitation ea...
+                </div>
+                <div className="proposal-options">
+                  <Button variant="primary" className="option-btn" size="sm">
+                    <span className="option-text">Edit</span>
+                  </Button>
+                  <Button
+                    variant="primary"
+                    className="option-btn"
+                    size="sm"
+                    active
+                  >
+                    <span className="option-text">View</span>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default DashboardContent;
diff --git a/src/user/proposals/AdminProposalDashboard/DashboardContent/DashboardContent.scss b/src/user/proposals/AdminProposalDashboard/DashboardContent/DashboardContent.scss
new file mode 100644
index 00000000..adc0732c
--- /dev/null
+++ b/src/user/proposals/AdminProposalDashboard/DashboardContent/DashboardContent.scss
@@ -0,0 +1,184 @@
+.dashboard-content {
+  padding: 30px;
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+
+  .searchbar-container {
+    flex-grow: 0.5;
+    .searchbar {
+      border-radius: 25px;
+    }
+    .dashboard-title {
+      margin-top: 15px;
+      .title-text {
+        font-family: Inter;
+        font-style: normal;
+        font-weight: 600;
+        font-size: 36px;
+        line-height: 44px;
+        color: #000000;
+      }
+    }
+    .button-container {
+      .posts {
+        .category {
+          text-align: left;
+          margin-left: 0px;
+          margin-top: 20px;
+          .category-btn {
+            background-color: white;
+            font-family: Inter;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 18px;
+            line-height: 22px;
+
+            &:hover {
+              background-color: #1a73e8;
+              color: white;
+            }
+
+            &:focus {
+              background-color: #1a73e8;
+              color: white;
+            }
+          }
+        }
+      }
+    }
+  }
+  .proposal-container {
+    margin-top: 20px;
+    flex-grow: 5;
+    .proposals {
+      .single-proposal {
+        display: inline-block;
+        counter-increment: item-counter;
+        width: 100%;
+        margin-bottom: 15px;
+        border: solid 1px #dfe9f1;
+        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
+        border-radius: 5px;
+        .user-info {
+          display: flex;
+          padding: 8px;
+          .image {
+            width: 38px;
+            height: 38px;
+            img {
+              width: 100%;
+              height: 100%;
+              border-radius: 2px;
+            }
+          }
+          .img-desc {
+            margin-left: 10px;
+            h2 {
+              font-family: Inter;
+              font-style: normal;
+              font-weight: 600;
+              font-size: 18px;
+              line-height: 22px;
+              margin: 3px;
+              /* identical to box height */
+            }
+            small {
+              font-family: Inter;
+              font-style: normal;
+              font-weight: normal;
+              font-size: 12px;
+              line-height: 15px;
+              color: #90949c;
+              margin: 0;
+            }
+            .proposal-date {
+              font-family: Inter;
+              font-style: normal;
+              font-weight: normal;
+              font-size: 12px;
+              line-height: 15px;
+
+              color: #90949c;
+            }
+          }
+          .status-btn-draft {
+            background-color: white;
+            padding: 4px 36px;
+            border: solid 1px #eb5757;
+            border-radius: 100px;
+            color: #eb5757;
+            margin: 0 5px;
+            height: 30px;
+            cursor: default;
+          }
+          .status-btn-submitted {
+            background-color: white;
+            padding: 4px 36px;
+            border: solid 1px #90949c;
+            border-radius: 100px;
+            color: #90949c;
+            margin: 0 5px;
+            height: 30px;
+            cursor: default;
+          }
+          .status-btn-accepted {
+            background-color: white;
+            padding: 4px 36px;
+            border: solid 1px #27ae60;
+            border-radius: 100px;
+            color: #27ae60;
+            margin: 0 5px;
+            height: 30px;
+            cursor: default;
+          }
+          .dropdown-container {
+            margin-left: auto;
+            margin-right: 5px;
+          }
+        }
+        .proposal-content {
+          display: flex;
+          .proposal-details {
+            flex: 3;
+            font-family: Inter;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+            line-height: 17px;
+            padding: 10px;
+
+            color: #1d2129;
+          }
+          .proposal-options {
+            flex: 1.5;
+            text-align: center;
+            padding: 20px;
+            .option-btn {
+              background-color: white;
+              color: #007bff;
+              padding: 4px 40px;
+              border: solid 1px #1a73e8;
+              border-radius: 100px;
+              margin: 0 10px;
+              height: 30px;
+              cursor: pointer;
+              &.active {
+                background: #007bff;
+                color: white;
+              }
+              .option-text {
+                font-family: Inter;
+                font-style: normal;
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 22px;
+                /* identical to box height */
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/Comments/Comments.js b/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/Comments/Comments.js
new file mode 100644
index 00000000..3430f1aa
--- /dev/null
+++ b/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/Comments/Comments.js
@@ -0,0 +1,72 @@
+import React, { Component } from "react";
+import "./Comments.scss";
+import { ListGroup, Image } from "react-bootstrap";
+import userIcon2 from "../../../../../images/userIcon2.jpg";
+
+class Comments extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div className="comments">
+        <div className="comment-title">Comments</div>
+        <div className="comments-container">
+          <ListGroup variant="flush">
+            <ListGroup.Item>
+              <div className="comment-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="comment-container">
+                  <div className="commenting-user">Devesh</div>
+                  <div className="commented-section">
+                    "Lorem ipsum dolor sit amet"
+                  </div>
+                  <div className="comment-text">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+          </ListGroup>
+          <ListGroup>
+            <ListGroup.Item>
+              <div className="comment-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="comment-container">
+                  <div className="commenting-user">Devesh</div>
+                  <div className="commented-section">
+                    "Lorem ipsum dolor sit amet"
+                  </div>
+                  <div className="comment-text">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+          </ListGroup>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Comments;
diff --git a/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/Comments/Comments.scss b/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/Comments/Comments.scss
new file mode 100644
index 00000000..88c79fca
--- /dev/null
+++ b/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/Comments/Comments.scss
@@ -0,0 +1,69 @@
+.comments {
+  .comment-title {
+    margin-top: 10px;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 27px;
+
+    color: #000000;
+  }
+  .comments-container {
+    border: solid 1px #dfe9f1;
+    overflow: auto;
+    border-radius: 5px;
+    margin: 5px;
+    max-height: 300px;
+    .comment-item {
+      display: flex;
+      padding: none;
+      .image-container {
+        flex: 1;
+        .user-image {
+          width: 30px;
+          height: 30px;
+        }
+      }
+      .comment-container {
+        flex: 6;
+        border: solid 1px #dfe9f1;
+        overflow: auto;
+        border-radius: 5px;
+        padding: 3px;
+        .commenting-user {
+          font-family: Inter;
+          font-style: normal;
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 150%;
+          /* or 21px */
+
+          color: #000000;
+        }
+        .commented-section {
+          margin-top: 2px;
+          font-family: Inter;
+          font-style: normal;
+          font-weight: normal;
+          font-size: 14px;
+          line-height: 150%;
+          /* or 21px */
+
+          color: rgba(29, 33, 41, 0.5);
+        }
+        .comment-text {
+          margin-top: 2px;
+          font-family: Inter;
+          font-style: normal;
+          font-weight: normal;
+          font-size: 14px;
+
+          /* or 21px */
+
+          color: rgba(21, 21, 21, 0.91);
+        }
+      }
+    }
+  }
+}
diff --git a/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/DashboardRightPanel.js b/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/DashboardRightPanel.js
new file mode 100644
index 00000000..106355b4
--- /dev/null
+++ b/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/DashboardRightPanel.js
@@ -0,0 +1,25 @@
+import React, { Component } from "react";
+import "./DashboardRightPanel.scss";
+import Comments from "./Comments/Comments";
+import OtherIdeas from "./OtherIdeas/OtherIdeas";
+
+class DashboardRightPanel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div className="panel">
+        <div className="panel-comments">
+          <Comments />
+        </div>
+        <div className="panel-ideas">
+          <OtherIdeas />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default DashboardRightPanel;
diff --git a/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/DashboardRightPanel.scss b/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/DashboardRightPanel.scss
new file mode 100644
index 00000000..133ebce0
--- /dev/null
+++ b/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/DashboardRightPanel.scss
@@ -0,0 +1,12 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+
+  .panel-comments {
+    flex-grow: 1;
+  }
+  .panel-ideas {
+    margin-top: 10px;
+    flex-grow: 1;
+  }
+}
diff --git a/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/OtherIdeas/OtherIdeas.js b/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/OtherIdeas/OtherIdeas.js
new file mode 100644
index 00000000..a64b31b3
--- /dev/null
+++ b/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/OtherIdeas/OtherIdeas.js
@@ -0,0 +1,119 @@
+import React, { Component } from "react";
+import "./OtherIdeas.scss";
+import { ListGroup, Image } from "react-bootstrap";
+import userIcon2 from "../../../../../images/userIcon2.jpg";
+
+class OtherIdeas extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div className="ideas">
+        <div className="ideas-title">Other Ideas</div>
+        <div className="ideas-container">
+          <ListGroup variant="flush">
+            <ListGroup.Item>
+              <div className="idea-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="idea-container">
+                  <div className="idea-title">We got into GSoC 2020</div>
+                  <div className="idea-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <div className="idea-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="idea-container">
+                  <div className="idea-title">We got into GSoC 2020</div>
+                  <div className="idea-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <div className="idea-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="idea-container">
+                  <div className="idea-title">We got into GSoC 2020</div>
+                  <div className="idea-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <div className="idea-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="idea-container">
+                  <div className="idea-title">We got into GSoC 2020</div>
+                  <div className="idea-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <div className="idea-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="idea-container">
+                  <div className="idea-title">We got into GSoC 2020</div>
+                  <div className="idea-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+          </ListGroup>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default OtherIdeas;
diff --git a/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/OtherIdeas/OtherIdeas.scss b/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/OtherIdeas/OtherIdeas.scss
new file mode 100644
index 00000000..6058404f
--- /dev/null
+++ b/src/user/proposals/AdminProposalDashboard/DashboardRightPanel/OtherIdeas/OtherIdeas.scss
@@ -0,0 +1,52 @@
+.ideas {
+  .ideas-title {
+    margin-top: 10px;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 27px;
+
+    color: #000000;
+  }
+  .ideas-container {
+    border: solid 1px #dfe9f1;
+    overflow: auto;
+    border-radius: 5px;
+    margin: 5px;
+    max-height: 300px;
+    .idea-item {
+      display: flex;
+      padding: none;
+      .image-container {
+        flex: 1;
+        .user-image {
+          width: 30px;
+          height: 30px;
+        }
+      }
+      .idea-container {
+        flex: 6;
+        .idea-title {
+          font-family: Inter;
+          font-style: normal;
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 21px;
+          /* identical to box height, or 150% */
+
+          color: #000000;
+        }
+        .idea-description {
+          font-family: Inter;
+          font-style: normal;
+          font-weight: normal;
+          font-size: 12px;
+          line-height: 15px;
+
+          color: rgba(29, 33, 41, 0.5);
+        }
+      }
+    }
+  }
+}
diff --git a/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.js b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.js
new file mode 100644
index 00000000..cfa35155
--- /dev/null
+++ b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.js
@@ -0,0 +1,38 @@
+import React, { Component } from "react";
+import userIcon2 from "../../../../../images/userIcon2.jpg";
+import { Form, ListGroup } from "react-bootstrap";
+import "./DiscussionComments.scss";
+
+class DiscussionComments extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const comments = this.props.commentItems;
+    return (
+      <div className="commentbox">
+        <div className="comments">
+          <div className="comment-title">Comments</div>
+          <div className="comments-containers">
+            <ListGroup>{comments}</ListGroup>
+          </div>
+          <div className="chat-container">
+            <div className="textinput-container">
+              <Form>
+                <Form.Control
+                  as="input"
+                  placeholder="Comment"
+                  className="textinput"
+                />
+              </Form>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default DiscussionComments;
diff --git a/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.scss b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.scss
new file mode 100644
index 00000000..881d97d1
--- /dev/null
+++ b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.scss
@@ -0,0 +1,84 @@
+.commentbox {
+  .comments {
+    .comment-title {
+      margin-top: 10px;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: 600;
+      font-size: 22px;
+      line-height: 27px;
+
+      color: #000000;
+    }
+    .comments-containers {
+      border: solid 1px #dfe9f1;
+      overflow: auto;
+      border-radius: 5px;
+      margin: 5px 5px -1px 5px;
+      max-height: 73vh;
+
+      .comment-item {
+        display: flex;
+        padding: none;
+        .image-container {
+          flex: 1;
+          .user-image {
+            width: 30px;
+            height: 30px;
+          }
+        }
+        .comment-container {
+          flex: 6;
+          border: solid 1px #dfe9f1;
+
+          border-radius: 5px;
+          padding: 3px;
+          .commenting-user {
+            font-family: Inter;
+            font-style: normal;
+            font-weight: 600;
+            font-size: 14px;
+            line-height: 150%;
+            /* or 21px */
+
+            color: #000000;
+          }
+          .commented-section {
+            margin-top: 2px;
+            font-family: Inter;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+            line-height: 150%;
+            /* or 21px */
+
+            color: rgba(29, 33, 41, 0.5);
+          }
+          .comment-text {
+            margin-top: 2px;
+            font-family: Inter;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+
+            /* or 21px */
+
+            color: rgba(21, 21, 21, 0.91);
+          }
+        }
+      }
+    }
+    .chat-container {
+      border: solid 1px #dfe9f1;
+      margin-bottom: 20px;
+
+      margin-left: 5px;
+      margin-right: 5px;
+      padding: 10px;
+
+      .textinput {
+        border-radius: 25px;
+      }
+    }
+  }
+}
diff --git a/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.js b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.js
new file mode 100644
index 00000000..66248bb0
--- /dev/null
+++ b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.js
@@ -0,0 +1,209 @@
+import React, { Component } from "react";
+import "./DiscussionContent.scss";
+import { Button, Container, Row, Col, Image, ListGroup } from "react-bootstrap";
+import DiscussionComments from "./DiscussionComments/DiscussionComments";
+import eventImg from "../../../../svgs/event-img-1.svg";
+import userIcon2 from "../../../../images/userIcon2.jpg";
+import RequestChanges from "../DiscussionPopups/RequestChanges";
+
+class DiscussionContent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { comments: [], showModal: false, selectedText: "" };
+  }
+
+  componentDidMount() {
+    this.processComments();
+  }
+  processComments = () => {
+    let comments = [];
+
+    for (let i = 0; i < 6; i++) {
+      comments.push(
+        <ListGroup.Item>
+          <div className="comment-item">
+            <div className="image-container">
+              <Image
+                src={userIcon2}
+                alt="icon"
+                rounded
+                className="user-image"
+              />
+            </div>
+            <div className="comment-container">
+              <div className="commenting-user">Devesh</div>
+              <div className="commented-section">
+                "Lorem ipsum dolor sit amet"
+              </div>
+              <div className="comment-text">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam, quis nostrud exercitation
+              </div>
+            </div>
+          </div>
+        </ListGroup.Item>
+      );
+    }
+    this.setState({
+      comments: comments,
+    });
+  };
+
+  handleTextSelction = () => {
+    if (window.getSelection().toString().length > 0) {
+      this.setState(
+        {
+          selectedText: window.getSelection().toString(),
+        },
+        () => {
+          this.setState({
+            showModal: true,
+          });
+        }
+      );
+    }
+  };
+
+  handleComment = (text) => {
+    let comments = this.state.comments;
+
+    comments.push(
+      <ListGroup.Item>
+        <div className="comment-item">
+          <div className="image-container">
+            <Image src={userIcon2} alt="icon" rounded className="user-image" />
+          </div>
+          <div className="comment-container">
+            <div className="commenting-user">Devesh</div>
+            <div className="commented-section">{this.state.selectedText}</div>
+            <div className="comment-text">{text}</div>
+          </div>
+        </div>
+      </ListGroup.Item>
+    );
+
+    this.setState({
+      comments: comments,
+      selectedText: "",
+    });
+  };
+
+  handleClose = () => {
+    this.setState({
+      showModal: false,
+    });
+  };
+
+  render() {
+    return (
+      <div className="discussion-content">
+        <div className="discussion-toppanel">
+          <div className="discussion-title">
+            <span className="title-text">Proposal Title Here</span>
+          </div>
+          <div className="discussion-desc"></div>
+          <div className="discussion-buttons">
+            <Button variant="primary" className="option-btn" size="sm" active>
+              <span className="option-text">Edit</span>
+            </Button>
+          </div>
+        </div>
+        <div className="discussion-bottompanel">
+          <div className="proposal-preview">
+            <div className="proposal-text" onMouseUp={this.handleTextSelction}>
+              <p>
+                Fugiat esse aliquip sint culpa. Nulla amet ipsum non commodo
+                veniam velit officia dolor laborum et aliquip ad velit veniam.
+                Consequat mollit consequat adipisicing duis consectetur duis non
+                fugiat et in elit consectetur sint. Mollit id aliqua commodo
+                duis sint non. Officia sunt consectetur et officia officia ad
+                officia aliquip qui enim aliquip officia minim. Minim consequat
+                duis deserunt aliqua qui consectetur tempor ex aliquip occaecat
+                ad veniam consectetur. Dolor et laboris sit esse laborum ex
+                deserunt nisi magna eiusmod. Mollit non ipsum laboris nulla
+                commodo enim elit magna amet. Quis officia incididunt aute elit
+                veniam ullamco ea elit reprehenderit. Pariatur exercitation ut
+                quis occaecat esse consectetur eu eiusmod ut et exercitation.
+                Nisi pariatur eu deserunt aliqua cillum dolore. Dolore duis
+                laboris occaecat incididunt minim aliqua.
+              </p>
+              <p>
+                Heading Irure mollit mollit proident amet sunt ea deserunt do
+                anim proident mollit. Aliquip fugiat quis ipsum est nisi ut
+                magna excepteur aliquip reprehenderit occaecat. Ea enim officia
+                labore consectetur et ad. Mollit ut duis nulla amet dolor minim
+                laborum amet cillum velit. Incididunt elit quis ipsum velit esse
+                eu adipisicing sint voluptate ea ipsum. Ullamco pariatur
+                incididunt tempor qui voluptate id deserunt tempor. Consectetur
+                mollit aute consequat ut non amet fugiat eiusmod. Cupidatat
+                velit ea eu veniam proident irure ullamco dolor aliquip nisi
+                minim. Nisi consequat sit ea anim duis in id mollit ipsum aute
+                mollit commodo excepteur occaecat. Aliqua magna sunt in et duis
+                veniam. Cillum in sunt sint officia. Dolor aliqua irure dolor
+                adipisicing et culpa. Heading Cupidatat pariatur exercitation
+                enim adipisicing qui labore officia cupidatat. Proident amet
+                minim cupidatat proident velit in ea sint velit. Duis
+                adipisicing excepteur cupidatat consequat ex non cupidatat ea
+                non. Commodo ad anim. Cupidatat pariatur exercitation enim
+                adipisicing qui labore officia cupidatat. Proident amet minim
+                cupidatat proident velit in ea sint velit. Duis adipisicing
+                excepteur cupidatat consequat ex non cupidatat ea non. Commodo
+                ad anim.Cupidatat pariatur exercitation enim adipisicing qui
+                labore officia cupidatat. Proident amet minim cupidatat proident
+                velit in ea sint velit. Duis adipisicing excepteur cupidatat
+                consequat ex non cupidatat ea non. Commodo ad anim.
+              </p>
+              <p>
+                Heading Irure mollit mollit proident amet sunt ea deserunt do
+                anim proident mollit. Aliquip fugiat quis ipsum est nisi ut
+                magna excepteur aliquip reprehenderit occaecat. Ea enim officia
+                labore consectetur et ad. Mollit ut duis nulla amet dolor minim
+                laborum amet cillum velit. Incididunt elit quis ipsum velit esse
+                eu adipisicing sint voluptate ea ipsum. Ullamco pariatur
+                incididunt tempor qui voluptate id deserunt tempor. Consectetur
+                mollit aute consequat ut non amet fugiat eiusmod. Cupidatat
+                velit ea eu veniam proident irure ullamco dolor aliquip nisi
+                minim. Nisi consequat sit ea anim duis in id mollit ipsum aute
+                mollit commodo excepteur occaecat. Aliqua magna sunt in et duis
+                veniam. Cillum in sunt sint officia. Dolor aliqua irure dolor
+                adipisicing et culpa. Heading Cupidatat pariatur exercitation
+                enim adipisicing qui labore officia cupidatat. Proident amet
+                minim cupidatat proident velit in ea sint velit. Duis
+                adipisicing excepteur cupidatat consequat ex non cupidatat ea
+                non. Commodo ad anim. Cupidatat pariatur exercitation enim
+                adipisicing qui labore officia cupidatat. Proident amet minim
+                cupidatat proident velit in ea sint velit. Duis adipisicing
+                excepteur cupidatat consequat ex non cupidatat ea non. Commodo
+                ad anim.Cupidatat pariatur exercitation enim adipisicing qui
+                labore officia cupidatat. Proident amet minim cupidatat proident
+                velit in ea sint velit. Duis adipisicing excepteur cupidatat
+                consequat ex non cupidatat ea non. Commodo ad anim.
+              </p>
+            </div>
+            <div className="attached-images">
+              <div className="images-title">Attached Images</div>
+              <Row>
+                <Image src={eventImg} rounded className="image-item" />
+                <Image src={eventImg} rounded className="image-item" />
+              </Row>
+            </div>
+          </div>
+          <div className="comments">
+            <DiscussionComments commentItems={this.state.comments} />
+          </div>
+          <RequestChanges
+            show={this.state.showModal}
+            handleClose={() => {
+              this.handleClose();
+            }}
+            handleComment={this.handleComment}
+            selectedText={this.state.selectedText}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default DiscussionContent;
diff --git a/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.scss b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.scss
new file mode 100644
index 00000000..6ac75b44
--- /dev/null
+++ b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.scss
@@ -0,0 +1,97 @@
+.discussion-content {
+  padding: 30px;
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+  .discussion-toppanel {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    .discussion-title {
+      flex-grow: 5;
+
+      .title-text {
+        font-family: Inter;
+        font-style: normal;
+        font-weight: 600;
+        font-size: 36px;
+        line-height: 44px;
+
+        color: #1d2129;
+      }
+    }
+    .discussion-buttons {
+      flex-grow: 1;
+      text-align: right;
+      .option-btn {
+        background-color: white;
+        color: #007bff;
+        padding: 4px 40px;
+        border: solid 1px #1a73e8;
+        border-radius: 100px;
+        margin: 0 10px;
+        height: 30px;
+        cursor: pointer;
+        &.active {
+          background: #007bff;
+          color: white;
+        }
+        .option-text {
+          font-family: Inter;
+          font-style: normal;
+          font-weight: normal;
+          font-size: 16px;
+          line-height: 19px;
+          /* identical to box height */
+        }
+      }
+    }
+  }
+  .discussion-bottompanel {
+    flex-grow: 4;
+    display: flex;
+
+    .proposal-preview {
+      margin-top: 20px;
+      flex: 2;
+      display: flex;
+      flex-direction: column;
+      max-height: 80vh;
+
+      .proposal-text {
+        overflow: auto;
+        flex-grow: 4;
+        font-family: Inter;
+        font-style: normal;
+        font-weight: normal;
+        font-size: 18px;
+        line-height: 22px;
+
+        color: #1d2129;
+      }
+      .attached-images {
+        padding: 10px 10px 0px 0px;
+        flex-grow: 1;
+        .images-title {
+          margin-top: 10px;
+          font-family: Inter;
+          font-style: normal;
+          font-weight: 600;
+          font-size: 22px;
+          line-height: 27px;
+
+          color: #000000;
+        }
+        .image-item {
+          max-height: 10em;
+          margin-right: 10px;
+          margin-left: 10px;
+        }
+      }
+    }
+    .comments {
+      flex: 1;
+      padding-left: 10px;
+    }
+  }
+}
diff --git a/src/user/proposals/ProposalDiscussion/DiscussionPopups/RequestChanges.js b/src/user/proposals/ProposalDiscussion/DiscussionPopups/RequestChanges.js
new file mode 100644
index 00000000..861deff8
--- /dev/null
+++ b/src/user/proposals/ProposalDiscussion/DiscussionPopups/RequestChanges.js
@@ -0,0 +1,80 @@
+import React from "react";
+import { Button, Modal, Form, Col } from "react-bootstrap";
+import PropTypes from "prop-types";
+
+class RequestChanges extends React.Component {
+  constructor(props) {
+    super(props);
+    this.textInput = React.createRef();
+  }
+  handleChange = () => {
+    const value = this.textInput.current.value;
+    console.log(value);
+  };
+
+  render() {
+    return (
+      <Modal
+        show={this.props.show}
+        onHide={this.props.handleClose}
+        animation={false}
+        className="modal"
+        centered
+      >
+        <Modal.Header
+          closeButton
+          className="modal__header"
+          style={this.props.borderStyle}
+        >
+          <Modal.Title className="modal__title" style={this.props.borderStyle}>
+            <div className="modal__main-title">Request Changes</div>
+          </Modal.Title>
+        </Modal.Header>
+        <Modal.Body className="modal__body" style={this.props.borderStyle}>
+          <Form className="modal__form" style={this.props.borderStyle}>
+            <Form.Row className="modal__row">
+              <Form.Group
+                as={Col}
+                controlId="formGridEmail"
+                className="modal__group"
+              >
+                <span className="modal__textSelection">{`"${this.props.selectedText}"`}</span>
+                <Form.Control
+                  ref={this.textInput}
+                  as="textarea"
+                  className="modal__post"
+                  placeholder="Explain the changes required"
+                  onChange={() => {
+                    this.handleChange();
+                  }}
+                />
+              </Form.Group>
+            </Form.Row>
+          </Form>
+        </Modal.Body>
+        <div className="modal__buttons">
+          <Button
+            onClick={() =>
+              this.props.handleComment(this.textInput.current.value)
+            }
+            className="modal__save"
+          >
+            <span className="modal__buttontext">Coment</span>
+          </Button>
+          <Button onClick={this.props.handleClose} className="modal__cancel">
+            <span className="modal__buttontext">Cancel</span>
+          </Button>
+        </div>
+      </Modal>
+    );
+  }
+}
+RequestChanges.propTypes = {
+  onClick: PropTypes.func,
+  handleComment: PropTypes.func,
+  show: PropTypes.bool,
+  style: PropTypes.object,
+  selectedText: PropTypes.string,
+};
+
+export default RequestChanges;
diff --git a/src/user/proposals/ProposalDiscussion/ProposalDiscussion.js b/src/user/proposals/ProposalDiscussion/ProposalDiscussion.js
new file mode 100644
index 00000000..2adb0adf
--- /dev/null
+++ b/src/user/proposals/ProposalDiscussion/ProposalDiscussion.js
@@ -0,0 +1,25 @@
+import React, { Component } from "react";
+import "./ProposalDiscussion.scss";
+import Navigation from "../../dashboard/navigation/navigation";
+import DiscussionContent from "./DiscussionContent/DiscussionContent";
+
+class ProposalDiscussion extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div className="discussion">
+        <div className="discussion__navigation">
+          <Navigation dashboard={this.state.dashboard} />
+        </div>
+        <div className="discussion__content">
+          <DiscussionContent />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ProposalDiscussion;
diff --git a/src/user/proposals/ProposalDiscussion/ProposalDiscussion.scss b/src/user/proposals/ProposalDiscussion/ProposalDiscussion.scss
new file mode 100644
index 00000000..462ca8f7
--- /dev/null
+++ b/src/user/proposals/ProposalDiscussion/ProposalDiscussion.scss
@@ -0,0 +1,13 @@
+.discussion {
+  display: flex;
+  min-height: 100vh;
+  height: auto;
+  font-family: Muli, sans-serif;
+  .discussion__navigation {
+    flex: 1;
+    border-right: solid 1px #dfe9f1;
+  }
+  .discussion__content {
+    flex: 5.5;
+  }
+}
diff --git a/src/user/proposals/ProposalEditor/EditorContent/EditorContent.js b/src/user/proposals/ProposalEditor/EditorContent/EditorContent.js
new file mode 100644
index 00000000..4c04a860
--- /dev/null
+++ b/src/user/proposals/ProposalEditor/EditorContent/EditorContent.js
@@ -0,0 +1,12 @@
+import React, { Component } from "react";
+class EditorContent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return <div></div>;
+  }
+}
+
+export default EditorContent;
diff --git a/src/user/proposals/ProposalEditor/EditorContent/EditorContent.scss b/src/user/proposals/ProposalEditor/EditorContent/EditorContent.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/user/proposals/ProposalEditor/ProposalEditor.js b/src/user/proposals/ProposalEditor/ProposalEditor.js
new file mode 100644
index 00000000..04378eaf
--- /dev/null
+++ b/src/user/proposals/ProposalEditor/ProposalEditor.js
@@ -0,0 +1,24 @@
+import React, { Component } from "react";
+import Navigation from "../../dashboard/navigation/navigation";
+import EditorContent from "./EditorContent/EditorContent";
+
+class ProposalEditor extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div className="editor">
+        <div className="editor__navigation">
+          <Navigation dashboard={this.state.dashboard} />
+        </div>
+        <div className="editor__content">
+          <EditorContent />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default ProposalEditor;
diff --git a/src/user/proposals/ProposalEditor/ProposalEditor.scss b/src/user/proposals/ProposalEditor/ProposalEditor.scss
new file mode 100644
index 00000000..b5f48ddf
--- /dev/null
+++ b/src/user/proposals/ProposalEditor/ProposalEditor.scss
@@ -0,0 +1,13 @@
+.editor {
+  display: flex;
+  min-height: 100vh;
+  height: auto;
+  font-family: Muli, sans-serif;
+  .editor__navigation {
+    flex: 1;
+    border-right: solid 1px #dfe9f1;
+  }
+  .editor__content {
+    flex: 5.5;
+  }
+}
diff --git a/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.js b/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.js
new file mode 100644
index 00000000..9fd70fc8
--- /dev/null
+++ b/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.js
@@ -0,0 +1,95 @@
+import React, { Component } from "react";
+import { Button, Form, Col, Image } from "react-bootstrap";
+import "./DashboardContent.scss";
+import userIcon2 from "../../../../images/userIcon2.jpg";
+
+class DashboardContent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div className="dashboard-content">
+        <div className="searchbar-container">
+          <Form>
+            <Form.Control
+              as="input"
+              placeholder="search"
+              className="searchbar"
+            />
+          </Form>
+          <div className="dashboard-title">
+            <span className="title-text">Proposals</span>
+          </div>
+          <div className="button-container">
+            <div className="posts">
+              <div className="category">
+                <Button variant="primary" className="category-btn">
+                  <span className="btn-content">All</span>
+                </Button>
+                <span className="space"></span>
+                <Button variant="primary" className="category-btn">
+                  <span className="btn-content">Accepted</span>
+                </Button>
+                <span className="space"></span>
+                <Button variant="primary" className="category-btn">
+                  <span className="btn-content">Under Review</span>
+                </Button>
+                <span className="space"></span>
+                <Button variant="primary" className="category-btn">
+                  <span className="btn-content">Drafts</span>
+                </Button>
+                <Button variant="primary" className="category-btn">
+                  <span className="btn-content">Rejected</span>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="proposal-container">
+          <div className="proposals">
+            <div className="single-proposal">
+              <div className="user-info">
+                <div className="image">
+                  <Image src={userIcon2} alt="icon" rounded />
+                </div>
+                <div className="img-desc">
+                  <h2>Sample Proposal</h2>
+                  <p className="proposal-date">June 5, 2018 4:31 AM</p>
+                </div>
+                <Button variant="primary" className="status-btn" size="sm">
+                  <span className="btn-content">Draft</span>
+                </Button>
+              </div>
+              <div className="proposal-content">
+                <div className="proposal-details">
+                  ex sit ex laboris adipisicing enim eiusmod proident
+                  exercitation ea fugiat in llit pariatur occaecat ut nostrud
+                  ullamco ex official ex sit ex laboris adipisicing enim eiusmod
+                  proident exercitation ea...
+                </div>
+                <div className="proposal-options">
+                  <Button variant="primary" className="option-btn" size="sm">
+                    <span className="option-text">Edit</span>
+                  </Button>
+                  <Button
+                    variant="primary"
+                    className="option-btn"
+                    size="sm"
+                    active
+                  >
+                    <span className="option-text">View</span>
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default DashboardContent;
diff --git a/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.scss b/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.scss
new file mode 100644
index 00000000..2577b135
--- /dev/null
+++ b/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.scss
@@ -0,0 +1,164 @@
+.dashboard-content {
+  padding: 30px;
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+
+  .searchbar-container {
+    flex-grow: 0.5;
+    .searchbar {
+      border-radius: 25px;
+    }
+    .dashboard-title {
+      margin-top: 15px;
+      .title-text {
+        font-family: Inter;
+        font-style: normal;
+        font-weight: 600;
+        font-size: 36px;
+        line-height: 44px;
+        color: #000000;
+      }
+    }
+    .button-container {
+      .posts {
+        .category {
+          text-align: left;
+          margin-left: 0px;
+          margin-top: 20px;
+          .category-btn {
+            background-color: white;
+            font-family: Inter;
+            font-style: normal;
+            font-weight: 500;
+            font-size: 18px;
+            line-height: 22px;
+
+            &:hover {
+              background-color: #1a73e8;
+              color: white;
+            }
+
+            &:focus {
+              background-color: #1a73e8;
+              color: white;
+            }
+          }
+        }
+      }
+    }
+  }
+  .proposal-container {
+    margin-top: 20px;
+    flex-grow: 5;
+    .proposals {
+      .single-proposal {
+        display: inline-block;
+        counter-increment: item-counter;
+        width: 100%;
+        margin-bottom: 15px;
+        border: solid 1px #dfe9f1;
+        box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.1);
+        border-radius: 5px;
+        .user-info {
+          display: flex;
+          padding: 8px;
+          .image {
+            width: 38px;
+            height: 38px;
+            img {
+              width: 100%;
+              height: 100%;
+              border-radius: 2px;
+            }
+          }
+          .img-desc {
+            margin-left: 10px;
+            h2 {
+              font-family: Inter;
+              font-style: normal;
+              font-weight: 600;
+              font-size: 18px;
+              line-height: 22px;
+              margin: 3px;
+              /* identical to box height */
+            }
+            small {
+              font-family: Inter;
+              font-style: normal;
+              font-weight: normal;
+              font-size: 12px;
+              line-height: 15px;
+              color: #90949c;
+              margin: 0;
+            }
+            .proposal-date {
+              font-family: Inter;
+              font-style: normal;
+              font-weight: normal;
+              font-size: 12px;
+              line-height: 15px;
+
+              color: #90949c;
+            }
+          }
+          .status-btn {
+            background-color: white;
+            padding: 4px 36px;
+            border: solid 1px #eb5757;
+            border-radius: 100px;
+            color: #eb5757;
+            margin: 0 5px;
+            height: 30px;
+            cursor: default;
+          }
+          .dropdown-container {
+            margin-left: auto;
+            margin-right: 5px;
+          }
+        }
+        .proposal-content {
+          display: flex;
+          .proposal-details {
+            flex: 3;
+            font-family: Inter;
+            font-style: normal;
+            font-weight: normal;
+            font-size: 14px;
+            line-height: 17px;
+            padding: 10px;
+
+            color: #1d2129;
+          }
+          .proposal-options {
+            flex: 1.5;
+            text-align: center;
+            padding: 20px;
+            .option-btn {
+              background-color: white;
+              color: #007bff;
+              padding: 4px 40px;
+              border: solid 1px #1a73e8;
+              border-radius: 100px;
+              margin: 0 10px;
+              height: 30px;
+              cursor: pointer;
+              &.active {
+                background: #007bff;
+                color: white;
+              }
+              .option-text {
+                font-family: Inter;
+                font-style: normal;
+                font-weight: 500;
+                font-size: 14px;
+                line-height: 22px;
+                /* identical to box height */
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/user/proposals/UserProposalDashboard/DashboardRightPanel/Comments/Comments.js b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/Comments/Comments.js
new file mode 100644
index 00000000..3430f1aa
--- /dev/null
+++ b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/Comments/Comments.js
@@ -0,0 +1,72 @@
+import React, { Component } from "react";
+import "./Comments.scss";
+import { ListGroup, Image } from "react-bootstrap";
+import userIcon2 from "../../../../../images/userIcon2.jpg";
+
+class Comments extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div className="comments">
+        <div className="comment-title">Comments</div>
+        <div className="comments-container">
+          <ListGroup variant="flush">
+            <ListGroup.Item>
+              <div className="comment-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="comment-container">
+                  <div className="commenting-user">Devesh</div>
+                  <div className="commented-section">
+                    "Lorem ipsum dolor sit amet"
+                  </div>
+                  <div className="comment-text">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+          </ListGroup>
+          <ListGroup>
+            <ListGroup.Item>
+              <div className="comment-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="comment-container">
+                  <div className="commenting-user">Devesh</div>
+                  <div className="commented-section">
+                    "Lorem ipsum dolor sit amet"
+                  </div>
+                  <div className="comment-text">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                    aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+          </ListGroup>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default Comments;
diff --git a/src/user/proposals/UserProposalDashboard/DashboardRightPanel/Comments/Comments.scss b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/Comments/Comments.scss
new file mode 100644
index 00000000..88c79fca
--- /dev/null
+++ b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/Comments/Comments.scss
@@ -0,0 +1,69 @@
+.comments {
+  .comment-title {
+    margin-top: 10px;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 27px;
+
+    color: #000000;
+  }
+  .comments-container {
+    border: solid 1px #dfe9f1;
+    overflow: auto;
+    border-radius: 5px;
+    margin: 5px;
+    max-height: 300px;
+    .comment-item {
+      display: flex;
+      padding: none;
+      .image-container {
+        flex: 1;
+        .user-image {
+          width: 30px;
+          height: 30px;
+        }
+      }
+      .comment-container {
+        flex: 6;
+        border: solid 1px #dfe9f1;
+        overflow: auto;
+        border-radius: 5px;
+        padding: 3px;
+        .commenting-user {
+          font-family: Inter;
+          font-style: normal;
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 150%;
+          /* or 21px */
+
+          color: #000000;
+        }
+        .commented-section {
+          margin-top: 2px;
+          font-family: Inter;
+          font-style: normal;
+          font-weight: normal;
+          font-size: 14px;
+          line-height: 150%;
+          /* or 21px */
+
+          color: rgba(29, 33, 41, 0.5);
+        }
+        .comment-text {
+          margin-top: 2px;
+          font-family: Inter;
+          font-style: normal;
+          font-weight: normal;
+          font-size: 14px;
+
+          /* or 21px */
+
+          color: rgba(21, 21, 21, 0.91);
+        }
+      }
+    }
+  }
+}
diff --git a/src/user/proposals/UserProposalDashboard/DashboardRightPanel/DashboardRightPanel.js b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/DashboardRightPanel.js
new file mode 100644
index 00000000..106355b4
--- /dev/null
+++ b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/DashboardRightPanel.js
@@ -0,0 +1,25 @@
+import React, { Component } from "react";
+import "./DashboardRightPanel.scss";
+import Comments from "./Comments/Comments";
+import OtherIdeas from "./OtherIdeas/OtherIdeas";
+
+class DashboardRightPanel extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div className="panel">
+        <div className="panel-comments">
+          <Comments />
+        </div>
+        <div className="panel-ideas">
+          <OtherIdeas />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default DashboardRightPanel;
diff --git a/src/user/proposals/UserProposalDashboard/DashboardRightPanel/DashboardRightPanel.scss b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/DashboardRightPanel.scss
new file mode 100644
index 00000000..133ebce0
--- /dev/null
+++ b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/DashboardRightPanel.scss
@@ -0,0 +1,12 @@
+.panel {
+  display: flex;
+  flex-direction: column;
+
+  .panel-comments {
+    flex-grow: 1;
+  }
+  .panel-ideas {
+    margin-top: 10px;
+    flex-grow: 1;
+  }
+}
diff --git a/src/user/proposals/UserProposalDashboard/DashboardRightPanel/OtherIdeas/OtherIdeas.js b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/OtherIdeas/OtherIdeas.js
new file mode 100644
index 00000000..a64b31b3
--- /dev/null
+++ b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/OtherIdeas/OtherIdeas.js
@@ -0,0 +1,119 @@
+import React, { Component } from "react";
+import "./OtherIdeas.scss";
+import { ListGroup, Image } from "react-bootstrap";
+import userIcon2 from "../../../../../images/userIcon2.jpg";
+
+class OtherIdeas extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+  render() {
+    return (
+      <div className="ideas">
+        <div className="ideas-title">Other Ideas</div>
+        <div className="ideas-container">
+          <ListGroup variant="flush">
+            <ListGroup.Item>
+              <div className="idea-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="idea-container">
+                  <div className="idea-title">We got into GSoC 2020</div>
+                  <div className="idea-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <div className="idea-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="idea-container">
+                  <div className="idea-title">We got into GSoC 2020</div>
+                  <div className="idea-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <div className="idea-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="idea-container">
+                  <div className="idea-title">We got into GSoC 2020</div>
+                  <div className="idea-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <div className="idea-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="idea-container">
+                  <div className="idea-title">We got into GSoC 2020</div>
+                  <div className="idea-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+            <ListGroup.Item>
+              <div className="idea-item">
+                <div className="image-container">
+                  <Image
+                    src={userIcon2}
+                    alt="icon"
+                    rounded
+                    className="user-image"
+                  />
+                </div>
+                <div className="idea-container">
+                  <div className="idea-title">We got into GSoC 2020</div>
+                  <div className="idea-description">
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                    do eiusmod tempor incididunt ut labore et dolore magna
+                  </div>
+                </div>
+              </div>
+            </ListGroup.Item>
+          </ListGroup>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default OtherIdeas;
diff --git a/src/user/proposals/UserProposalDashboard/DashboardRightPanel/OtherIdeas/OtherIdeas.scss b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/OtherIdeas/OtherIdeas.scss
new file mode 100644
index 00000000..6058404f
--- /dev/null
+++ b/src/user/proposals/UserProposalDashboard/DashboardRightPanel/OtherIdeas/OtherIdeas.scss
@@ -0,0 +1,52 @@
+.ideas {
+  .ideas-title {
+    margin-top: 10px;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: 600;
+    font-size: 22px;
+    line-height: 27px;
+
+    color: #000000;
+  }
+  .ideas-container {
+    border: solid 1px #dfe9f1;
+    overflow: auto;
+    border-radius: 5px;
+    margin: 5px;
+    max-height: 300px;
+    .idea-item {
+      display: flex;
+      padding: none;
+      .image-container {
+        flex: 1;
+        .user-image {
+          width: 30px;
+          height: 30px;
+        }
+      }
+      .idea-container {
+        flex: 6;
+        .idea-title {
+          font-family: Inter;
+          font-style: normal;
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 21px;
+          /* identical to box height, or 150% */
+
+          color: #000000;
+        }
+        .idea-description {
+          font-family: Inter;
+          font-style: normal;
+          font-weight: normal;
+          font-size: 12px;
+          line-height: 15px;
+
+          color: rgba(29, 33, 41, 0.5);
+        }
+      }
+    }
+  }
+}
diff --git a/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js b/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js
new file mode 100644
index 00000000..0d39a465
--- /dev/null
+++ b/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js
@@ -0,0 +1,32 @@
+import React, { Component } from "react";
+import "./UserProposalDashboard.scss";
+import Navigation from "../../dashboard/navigation/navigation";
+import DashboardContent from "./DashboardContent/DashboardContent";
+import DashboardRightPanel from "./DashboardRightPanel/DashboardRightPanel";
+
+class UserProposalDashboard extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      dashboard: true,
+      isLoading: true,
+    };
+  }
+  render() {
+    return (
+      <div className="dashboard">
+        <div className="dashboard__navigation">
+          <Navigation dashboard={this.state.dashboard} />
+        </div>
+        <div className="dashboard__content">
+          <DashboardContent />
+        </div>
+        <div className="dashboard__rightpanel">
+          <DashboardRightPanel />
+        </div>
+      </div>
+    );
+  }
+}
+
+export default UserProposalDashboard;
diff --git a/src/user/proposals/UserProposalDashboard/UserProposalDashboard.scss b/src/user/proposals/UserProposalDashboard/UserProposalDashboard.scss
new file mode 100644
index 00000000..7cd07c4b
--- /dev/null
+++ b/src/user/proposals/UserProposalDashboard/UserProposalDashboard.scss
@@ -0,0 +1,16 @@
+.dashboard {
+  display: flex;
+  min-height: 100vh;
+  height: auto;
+  font-family: Muli, sans-serif;
+  .dashboard__navigation {
+    flex: 1;
+    border-right: solid 1px #dfe9f1;
+  }
+  .dashboard__content {
+    flex: 4;
+  }
+  .dashboard__rightpanel {
+    flex: 2;
+  }
+}