diff --git a/src/user/_sidebarCommon.scss b/src/user/_sidebarCommon.scss
new file mode 100644
index 00000000..1fbc3c93
--- /dev/null
+++ b/src/user/_sidebarCommon.scss
@@ -0,0 +1,84 @@
+.sidebar {
+  background: #f5f5f5;
+  flex-grow: 1;
+  border-right: solid 1px #dfe9f1;
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  overflow-y: scroll;
+  transition: 0.3s ease-in-out;
+  width: 0;
+  overflow-x: hidden;
+}
+.sidebar-open {
+  width: 13vw;
+  background: #f5f5f5;
+  flex-grow: 1;
+  border-right: solid 1px #dfe9f1;
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  overflow-y: scroll;
+  overflow-x: hidden;
+  transition: 0.3s ease-in-out;
+}
+
+.sidebar-toggle {
+  position: sticky;
+  top: 10px;
+  left: 0;
+  bottom: 0;
+  transition: 0.3s ease-in-out;
+  width: 2.5rem;
+  height: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  background: #007bff;
+  border-radius: 50%;
+  border: none;
+  padding: 5px;
+  &:focus {
+    outline: none;
+  }
+  div {
+    width: 1.5rem;
+    height: 0.25rem;
+    background: white;
+    border-radius: 10px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .sidebar-toggle {
+    display: none;
+  }
+  .dashboard,
+  .profile,
+  .pinned-posts {
+    .news {
+      margin-left: 13vw;
+    }
+  }
+  .settings-content {
+    margin-left: 13vw;
+  }
+  .org_settings_view {
+    margin-left: 13vw;
+  }
+  .right_view {
+    margin-left: 13vw;
+  }
+  .integrations-content {
+    margin-left: 13vw;
+  }
+  .dashboard__content {
+    margin-left: 13vw;
+  }
+  .editor__content {
+    margin-left: 13vw;
+  }
+}
diff --git a/src/user/dashboard/Community/CommunitySetting.js b/src/user/dashboard/Community/CommunitySetting.js
index 3e4615d6..fe3a30d6 100644
--- a/src/user/dashboard/Community/CommunitySetting.js
+++ b/src/user/dashboard/Community/CommunitySetting.js
@@ -20,8 +20,9 @@ class CommunitySetting extends Component {
         settings: false,
         permission: false,
         authentication: false,
-        maintenance: false
-      }
+        maintenance: false,
+      },
+      sideBarOpen: true,
     };
   }
   componentDidMount() {
@@ -35,13 +36,32 @@ class CommunitySetting extends Component {
    this.setState({ option: { [name]: true }})
    this.setState({ view: name })
   }
+
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
     const { view } = this.state;
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     return (
       <div className="overall_container">
-        <div className="main_navigation">
+        <div className={sideBarClass}>
           <Navigation orgSettings={this.state.org} user={this.props.user} />
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="org_settings_view">
           <div className="main_section">
             <div className="left_nav">
@@ -60,7 +80,7 @@ class CommunitySetting extends Component {
               {view === "authentication" ? <OrgAuth /> : null}
               {view === "maintenance" ? <OrgMaintenance /> : null}
               {view === "activity" ? (
-                <Users 
+                <Users
                   handleOption={{ changeOption: this.changeOption.bind(this) }}
                 />) : null }
             </div>
@@ -77,4 +97,4 @@ const mapStateToProps = (state) => ({
   user: state.user,
   org: state.org
 })
-export default connect(mapStateToProps)(CommunitySetting);
\ No newline at end of file
+export default connect(mapStateToProps)(CommunitySetting);
diff --git a/src/user/dashboard/Community/community.scss b/src/user/dashboard/Community/community.scss
index 1be5f14f..9a80770f 100644
--- a/src/user/dashboard/Community/community.scss
+++ b/src/user/dashboard/Community/community.scss
@@ -1,6 +1,8 @@
+@import "../../sidebarCommon";
+
 .overall_container {
   display: flex;
-  .main_navigation {
+  /*.main_navigation {
     background: #f5f5f5;
     flex-grow: 1;
     border-right: solid 1px #dfe9f1;
@@ -9,9 +11,10 @@
     bottom: 0px;
     left: 0px;
     overflow-y: scroll;
-  }
+  }*/
+
   .org_settings_view {
-    margin-left: 13vw;
+    //margin-left: 13vw;
     margin-top: 35px;
     .main_section {
       display: flex;
diff --git a/src/user/dashboard/dashboard.js b/src/user/dashboard/dashboard.js
index 428a5151..f73243ba 100644
--- a/src/user/dashboard/dashboard.js
+++ b/src/user/dashboard/dashboard.js
@@ -8,7 +8,7 @@ import NewsFeed from "./news-feed/news-feed";
 import notifyUsersLoading from "../../placeholderLoading/notifyUsersLoading/notifyUsersLoading";
 import portfolioLoading from "../../placeholderLoading/portfolioLoading/portfolioLoading";
 import newsFeedLoading from "../../placeholderLoading/newsFeedLoading/newsFeedLoading";
-import { connect } from 'react-redux'
+import { connect } from 'react-redux';
 import { getAllEvents } from "../../actions/eventAction";
 import { getAllPosts } from "../../actions/postAction";
 import { getAllProjects } from "../../actions/projectAction";
@@ -22,7 +22,8 @@ class Dashboard extends Component {
       allPosts: [],
       allProjects: [],
       allEvents: [],
-      allMix: []
+      allMix: [],
+      sideBarOpen: true,
     };
   }
 
@@ -31,14 +32,14 @@ class Dashboard extends Component {
       this.props.getAllEvents();
     })
     setTimeout(() => {
-      this.props.getAllPosts()
+      this.props.getAllPosts();
     })
     setTimeout(() => {
-      this.props.getAllProjects()
-    })
+      this.props.getAllProjects();
+    });
     setTimeout(() => {
       this.setState({ isLoading: false });
-    }, 1000);
+    }, 1000)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -54,14 +55,31 @@ class Dashboard extends Component {
       console.log('updated dashboard ', this.state)
     })
   }
-
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
     const { allMix, allEvents, allProjects, allPosts } = this.state
-    return ( 
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
+    return (
       <div className="dashboard">
-        <div className="navigation">
+        <div className={sideBarClass}>
           <Navigation dashboard={this.state.dashboard}></Navigation>
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="news">
           {this.state.isLoading ? (
             notifyUsersLoading()
@@ -81,7 +99,7 @@ class Dashboard extends Component {
   }
 }
 
-// map state to props 
+// map state to props
 const mapStateToProps = (state) => ({
   auth: state.auth,
   error: state.error,
@@ -90,4 +108,4 @@ const mapStateToProps = (state) => ({
   project: state.project
 })
 
-export default connect(mapStateToProps, { getAllEvents, getAllPosts, getAllProjects })(Dashboard);
+export default connect(mapStateToProps, { getAllEvents, getAllPosts, getAllProjects })(Dashboard);
\ No newline at end of file
diff --git a/src/user/dashboard/dashboard.scss b/src/user/dashboard/dashboard.scss
index b9b0969c..90b300d1 100644
--- a/src/user/dashboard/dashboard.scss
+++ b/src/user/dashboard/dashboard.scss
@@ -1,9 +1,11 @@
+@import "../sidebarCommon";
+
 .dashboard {
   display: flex;
   min-height: 100vh;
   height: auto;
   font-family: Muli, sans-serif;
-  .navigation {
+  /*.navigation {
     background: #f5f5f5;
     flex-grow: 1;
     border-right: solid 1px #dfe9f1;
@@ -12,9 +14,10 @@
     bottom: 0px;
     left: 0px;
     overflow-y: scroll;
-  }
+  }*/
+
   .news {
-    margin-left: 13vw;
+    //margin-left: 13vw;
     flex-grow: 4;
     .notify-user {
       display: flex;
diff --git a/src/user/dashboard/insights/Insight.js b/src/user/dashboard/insights/Insight.js
index af6197a5..4dec1998 100644
--- a/src/user/dashboard/insights/Insight.js
+++ b/src/user/dashboard/insights/Insight.js
@@ -12,7 +12,8 @@ class Insight extends Component {
     this.state = {
       insight: true,
       view: 'org',
-      userId: ''
+      userId: '',
+      sideBarOpen: true,
     };
   }
 
@@ -26,9 +27,13 @@ class Insight extends Component {
       console.log('State is ', this.state);
     })
   }
-
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
     const { view, userId } = this.state;
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     let communityInfo = (
       <div className="right_view_container">
         <CommunityStats view={view} onTabChange={this.onTabChange.bind(this)} />
@@ -41,9 +46,22 @@ class Insight extends Component {
     );
     return (
       <div className="insight_main_container">
-        <div className="insight_left_nav">
+        <div className={sideBarClass}>
           <Navigation insight={this.state.insight} />
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="insight_content">
           {view === "org" ? communityInfo : memberInfo}
         </div>
@@ -52,7 +70,7 @@ class Insight extends Component {
   }
 }
 
-// map state to props 
+// map state to props
 const mapStateToProps = (state) => ({
   user: state.user
 })
diff --git a/src/user/dashboard/insights/insight.scss b/src/user/dashboard/insights/insight.scss
index 636a4df0..90c0ab98 100644
--- a/src/user/dashboard/insights/insight.scss
+++ b/src/user/dashboard/insights/insight.scss
@@ -1,6 +1,8 @@
+@import "../../sidebarCommon";
+
 .insight_main_container {
   display: flex;
-  .insight_left_nav {
+  /*.insight_left_nav {
     border-right: solid 1px #dfe9f1;
     position: fixed;
     top: 0px;
@@ -8,10 +10,11 @@
     left: 0px;
     overflow-y: scroll;
     background: #f5f5f5;
-  }
+  }*/
+
   .right_view_container {
     .right_view {
-      margin-left: 13vw;
+      //margin-left: 13vw;
       margin-top: 10px;
       .right_view_header {
         font-family: Qanelas;
diff --git a/src/user/dashboard/navigation/navigation.scss b/src/user/dashboard/navigation/navigation.scss
index 3d8de512..bd3aac1a 100644
--- a/src/user/dashboard/navigation/navigation.scss
+++ b/src/user/dashboard/navigation/navigation.scss
@@ -1,5 +1,5 @@
 .main-navigation {
-  width: 13vw;
+  //width: 13vw;
   .list-group {
     background-color: #f5f5f5;
     .list-group-item {
diff --git a/src/user/dashboard/settings/Settings.js b/src/user/dashboard/settings/Settings.js
index e75f3731..0bcc1bc6 100644
--- a/src/user/dashboard/settings/Settings.js
+++ b/src/user/dashboard/settings/Settings.js
@@ -7,21 +7,39 @@ class Settings extends Component {
   constructor(props){
     super(props);
     this.state = {
-      settings: true
-    }
+      settings: true,
+      sideBarOpen: true,
+    };
   }
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     return (
       <div className="settings">
-        <div className="navigation">
-            <Navigation settings={this.state.settings}></Navigation>
-          </div>
-          <div className="settings-content">
-            <SettingContent />
-          </div>
+        <div className={sideBarClass}>
+          <Navigation settings={this.state.settings}></Navigation>
+        </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
+        <div className="settings-content">
+          <SettingContent />
+        </div>
       </div>
     )
   }
 }
 export default Settings;
-
diff --git a/src/user/dashboard/settings/styles/settings.scss b/src/user/dashboard/settings/styles/settings.scss
index 284e9b3f..67408a65 100644
--- a/src/user/dashboard/settings/styles/settings.scss
+++ b/src/user/dashboard/settings/styles/settings.scss
@@ -1,10 +1,12 @@
+@import "../../../sidebarCommon";
+
 .settings {
   display: flex;
   min-height: 100vh;
   height: auto;
   font-family: Muli, sans-serif;
 
-  .navigation {
+  /*.navigation {
     background: #f5f5f5;
     flex-grow: 1;
     border-right: solid 1px #dfe9f1;
@@ -13,14 +15,15 @@
     bottom: 0px;
     left: 0px;
     overflow-y: scroll;
-  }
+  }*/
+
   .setting-sidebar {
     border-left: solid 1px #dfe9f1;
   }
 
   .settings-content {
     flex: 3;
-    margin-left: 13vw;
+    //margin-left: 13vw;
   }
   .options {
     color: rgba(0, 0, 0, 0.5);
diff --git a/src/user/events/events.js b/src/user/events/events.js
index 0689a436..328410d8 100644
--- a/src/user/events/events.js
+++ b/src/user/events/events.js
@@ -28,6 +28,7 @@ class Events extends Component {
       singleEvent: {},
       editAllowed: true,
       editingLimit: "",
+      sideBarOpen: true,
     };
   }
 
@@ -63,10 +64,14 @@ class Events extends Component {
     console.log("page number ", pageNumber);
     this.props.getAllEvents(6, pageNumber);
   };
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
 
   render() {
     const { allEvents, editingLimit } = this.state;
-
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     const handleToggle = (eventId, event) => {
       console.log("-handletoggel", eventId);
       this.setState({ modalShow: true, eventId: eventId, singleEvent: event });
@@ -273,9 +278,22 @@ class Events extends Component {
 
     return (
       <div className="organization">
-        <div className="navigation">
+        <div className={sideBarClass}>
           <Navigation event={this.state.event}></Navigation>
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "1vw" }
+              : { marginLeft: "-12vw" }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="events">
           <h1 className="event_header">All Events</h1>
           <Grid container spacing={3}>
diff --git a/src/user/events/events.scss b/src/user/events/events.scss
index 4f8c4ea8..89ef6879 100644
--- a/src/user/events/events.scss
+++ b/src/user/events/events.scss
@@ -1,9 +1,11 @@
+@import "../sidebarCommon";
+
 .organization {
   display: flex;
   min-height: 100vh;
   height: auto;
   font-family: Muli, sans-serif;
-  .navigation {
+  /*.navigation {
     background: #f5f5f5;
     flex-grow: 1;
     border-right: solid 1px #dfe9f1;
@@ -12,7 +14,8 @@
     bottom: 0px;
     left: 0px;
     overflow-y: scroll;
-  }
+  }*/
+
   .events {
     padding: 20px;
     margin-top: 2vh;
diff --git a/src/user/integrations/IntegrationsPage/IntegrationsPage.js b/src/user/integrations/IntegrationsPage/IntegrationsPage.js
index 485f7ee8..c25fde19 100644
--- a/src/user/integrations/IntegrationsPage/IntegrationsPage.js
+++ b/src/user/integrations/IntegrationsPage/IntegrationsPage.js
@@ -18,19 +18,39 @@ import Jitsi from '../../../assets/integrations/Jitsi.png'
 import Trello from '../../../assets/integrations/Trello.png'
 import SimplePoll from '../../../assets/integrations/SimplePoll.png'
 
+
 class IntegrationsPage extends Component {
   constructor(props) {
     super(props);
     this.state = {
       integrations: true,
+      sideBarOpen: true,
     };
   }
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     return (
       <div className="integrations">
-        <div className="navigation">
+        <div className={sideBarClass}>
           <Navigation org={this.state.org}></Navigation>
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="integrations-content">
           <div className="title-content">
             <div className="integrations-title">Integrations</div>
@@ -48,146 +68,145 @@ class IntegrationsPage extends Component {
             </Form>
           </div>
           <div className="integration-content">
+            <Card className="integration-card">
+              <Card.Img
+                variant="top"
+                src={GoogleCalendar}
+                className="integration-card-image"
+              />
+              <Card.Body>
+                <div className="integration-card-body">
+                  <Card.Title className="integration-card-title">
+                    Google Calendar
+                  </Card.Title>
+                  <Card.Text className="integration-card-tag">
+                    Communication
+                  </Card.Text>
+                  <Button
+                    className="integration-card-button-remove"
+                  >
+                    Remove
+                  </Button>
+                </div>
+              </Card.Body>
+            </Card>
 
-                <Card className="integration-card">
-                  <Card.Img
-                    variant="top"
-                    src={GoogleCalendar}
-                    className="integration-card-image"
-                  />
-                  <Card.Body>
-                    <div className="integration-card-body">
-                      <Card.Title className="integration-card-title">
-                        Google Calendar
-                      </Card.Title>
-                      <Card.Text className="integration-card-tag">
-                        Communication
-                      </Card.Text>
-                      <Button
-                        className="integration-card-button-remove"
-                      >
-                        Remove
-                      </Button>
-                    </div>
-                  </Card.Body>
-                </Card>
-  
-                <Card className="integration-card">
-                  <Card.Img
-                    variant="top"
-                    src={GoogleDrive}
-                    className="integration-card-image"
-                  />
-                  <Card.Body>
-                    <div className="integration-card-body">
-                      <Card.Title className="integration-card-title">
-                        Google Drive
-                      </Card.Title>
-                      <Card.Text className="integration-card-tag">
-                        File Management
-                      </Card.Text>
-                      <Button
-                        variant="primary"
-                        className="integration-card-button"
-                      >
-                        Add to Donut
-                      </Button>
-                    </div>
-                  </Card.Body>
-                </Card>
+            <Card className="integration-card">
+              <Card.Img
+                variant="top"
+                src={GoogleDrive}
+                className="integration-card-image"
+              />
+              <Card.Body>
+                <div className="integration-card-body">
+                  <Card.Title className="integration-card-title">
+                    Google Drive
+                  </Card.Title>
+                  <Card.Text className="integration-card-tag">
+                    File Management
+                  </Card.Text>
+                  <Button
+                    variant="primary"
+                    className="integration-card-button"
+                  >
+                    Add to Donut
+                  </Button>
+                </div>
+              </Card.Body>
+            </Card>
 
-                <Card className="integration-card">
-                  <Card.Img
-                    variant="top"
-                    src={Github}
-                    className="integration-card-image"
-                  />
-                  <Card.Body>
-                    <div className="integration-card-body">
-                      <Card.Title className="integration-card-title">
-                        Github
-                      </Card.Title>
-                      <Card.Text className="integration-card-tag">
-                        Source Control
-                      </Card.Text>
-                      <Button
-                        variant="primary"
-                        className="integration-card-button"
-                      >
-                        Add to Donut
-                      </Button>
-                    </div>
-                  </Card.Body>
-                </Card>
-                <Card className="integration-card">
-                  <Card.Img
-                    variant="top"
-                    src={Jitsi}
-                    className="integration-card-image"
-                  />
-                  <Card.Body>
-                    <div className="integration-card-body">
-                      <Card.Title className="integration-card-title">
-                        Jitsi Meet
-                      </Card.Title>
-                      <Card.Text className="integration-card-tag">
-                        Communication
-                      </Card.Text>
-                      <Button
-                        variant="primary"
-                        className="integration-card-button"
-                      >
-                        Add to Donut
-                      </Button>
-                    </div>
-                  </Card.Body>
-                </Card>
+            <Card className="integration-card">
+              <Card.Img
+                variant="top"
+                src={Github}
+                className="integration-card-image"
+              />
+              <Card.Body>
+                <div className="integration-card-body">
+                  <Card.Title className="integration-card-title">
+                    Github
+                  </Card.Title>
+                  <Card.Text className="integration-card-tag">
+                    Source Control
+                  </Card.Text>
+                  <Button
+                    variant="primary"
+                    className="integration-card-button"
+                  >
+                    Add to Donut
+                  </Button>
+                </div>
+              </Card.Body>
+            </Card>
+            <Card className="integration-card">
+              <Card.Img
+                variant="top"
+                src={Jitsi}
+                className="integration-card-image"
+              />
+              <Card.Body>
+                <div className="integration-card-body">
+                  <Card.Title className="integration-card-title">
+                    Jitsi Meet
+                  </Card.Title>
+                  <Card.Text className="integration-card-tag">
+                    Communication
+                  </Card.Text>
+                  <Button
+                    variant="primary"
+                    className="integration-card-button"
+                  >
+                    Add to Donut
+                  </Button>
+                </div>
+              </Card.Body>
+            </Card>
 
-                <Card className="integration-card">
-                  <Card.Img
-                    variant="top"
-                    src={SimplePoll}
-                    className="integration-card-image"
-                  />
-                  <Card.Body>
-                    <div className="integration-card-body">
-                      <Card.Title className="integration-card-title">
-                        Simple Poll
-                      </Card.Title>
-                      <Card.Text className="integration-card-tag">
-                        Productivity
-                      </Card.Text>
-                      <Button
-                        className="integration-card-button-remove"
-                      >
-                        Remove
-                      </Button>
-                    </div>
-                  </Card.Body>
-                </Card>
-                <Card className="integration-card">
-                  <Card.Img
-                    variant="top"
-                    src={Trello}
-                    className="integration-card-image"
-                  />
-                  <Card.Body>
-                    <div className="integration-card-body">
-                      <Card.Title className="integration-card-title">
-                        Trello
-                      </Card.Title>
-                      <Card.Text className="integration-card-tag">
-                        Communication
-                      </Card.Text>
-                      <Button
-                        variant="primary"
-                        className="integration-card-button"
-                      >
-                        Add to Donut
-                      </Button>
-                    </div>
-                  </Card.Body>
-                </Card>
+            <Card className="integration-card">
+              <Card.Img
+                variant="top"
+                src={SimplePoll}
+                className="integration-card-image"
+              />
+              <Card.Body>
+                <div className="integration-card-body">
+                  <Card.Title className="integration-card-title">
+                    Simple Poll
+                  </Card.Title>
+                  <Card.Text className="integration-card-tag">
+                    Productivity
+                  </Card.Text>
+                  <Button
+                    className="integration-card-button-remove"
+                  >
+                    Remove
+                  </Button>
+                </div>
+              </Card.Body>
+            </Card>
+            <Card className="integration-card">
+              <Card.Img
+                variant="top"
+                src={Trello}
+                className="integration-card-image"
+              />
+              <Card.Body>
+                <div className="integration-card-body">
+                  <Card.Title className="integration-card-title">
+                    Trello
+                  </Card.Title>
+                  <Card.Text className="integration-card-tag">
+                    Communication
+                  </Card.Text>
+                  <Button
+                    variant="primary"
+                    className="integration-card-button"
+                  >
+                    Add to Donut
+                  </Button>
+                </div>
+              </Card.Body>
+            </Card>
           </div>
         </div>
       </div>
diff --git a/src/user/integrations/IntegrationsPage/IntegrationsPage.scss b/src/user/integrations/IntegrationsPage/IntegrationsPage.scss
index 1eda3668..0e9e7630 100644
--- a/src/user/integrations/IntegrationsPage/IntegrationsPage.scss
+++ b/src/user/integrations/IntegrationsPage/IntegrationsPage.scss
@@ -3,11 +3,11 @@
   min-height: 100vh;
   height: auto;
   font-family: "Inter";
-  .navigation {
+  /*.navigation {
     flex: 0.5;
     border-right: solid 1px #dfe9f1;
     
-  }
+  }*/
   .integrations-content {
     width: 100%;
     flex: 3;
@@ -81,8 +81,8 @@
             text-align: center;
             border-radius: 25px;
             font-size: 15px;
-            color: #1A73E8;
-            background-color: #FFFFFF;
+            color: #1a73e8;
+            background-color: #ffffff;
             width: 60%;
           }
         }
diff --git a/src/user/integrations/UserIntegrations/UserIntegrations.js b/src/user/integrations/UserIntegrations/UserIntegrations.js
index 21040eb3..6d72527d 100644
--- a/src/user/integrations/UserIntegrations/UserIntegrations.js
+++ b/src/user/integrations/UserIntegrations/UserIntegrations.js
@@ -12,6 +12,7 @@ class UserIntegrations extends Component {
       integrations: true,
       integrationSelected: false,
       selectedIntegration: {},
+      sideBarOpen: true,
     };
   }
 
@@ -28,15 +29,31 @@ class UserIntegrations extends Component {
       integrationSelected: false,
     });
   };
-
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
     const { integrationSelected, selectedIntegration } = this.state;
-
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     return (
       <div className="integrations">
-        <div className="navigation">
+        <div className={sideBarClass}>
           <Navigation org={this.state.org}></Navigation>
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         {integrationSelected ? (
           <IntegrationDetails
             back={this.handleBackClick}
diff --git a/src/user/integrations/UserIntegrations/UserIntegrations.scss b/src/user/integrations/UserIntegrations/UserIntegrations.scss
index b8c60005..676db033 100644
--- a/src/user/integrations/UserIntegrations/UserIntegrations.scss
+++ b/src/user/integrations/UserIntegrations/UserIntegrations.scss
@@ -1,12 +1,15 @@
+@import "../../sidebarCommon";
+
 .integrations {
   display: flex;
   min-height: 100vh;
   height: auto;
   font-family: "Inter";
-  .navigation {
+  /*.navigation {
     flex: 0.5;
     border-right: solid 1px #dfe9f1;
-  }
+  }*/
+
   .integrations-content {
     width: 100%;
     flex: 3;
diff --git a/src/user/organization/organization.js b/src/user/organization/organization.js
index b118d4e2..8632f9d8 100644
--- a/src/user/organization/organization.js
+++ b/src/user/organization/organization.js
@@ -24,6 +24,7 @@ class Organization extends Component {
       isLoading: true,
       orgProfile: {},
       type: "About",
+      sideBarOpen: true,
     };
   }
 
@@ -42,8 +43,12 @@ class Organization extends Component {
   }
 
   handleClick = (type) => {
-    this.setState({ type: type })
-  }
+    this.setState({ type: type });
+  };
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
 
   render() {
     const { orgProfile, type } = this.state;
@@ -52,11 +57,25 @@ class Organization extends Component {
       description,
       // contactInfo
     } = orgProfile;
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     return (
       <div className="organization">
-        <div className="navigation">
+        <div className={sideBarClass}>
           <Navigation org={this.state.org}></Navigation>
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "1vw" }
+              : { marginLeft: "-12vw" }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="news">
           {this.state.isLoading ? (
             topBarLoading()
diff --git a/src/user/organization/organization.scss b/src/user/organization/organization.scss
index 16bd730e..5cc0c256 100644
--- a/src/user/organization/organization.scss
+++ b/src/user/organization/organization.scss
@@ -3,7 +3,7 @@
   min-height: 100vh;
   height: auto;
   font-family: "Inter";
-  .navigation {
+  /*.navigation {
     overflow-y: scroll;
     background: #f5f5f5;
     flex: 0.5;
@@ -12,14 +12,15 @@
     top: 0px;
     bottom: 0px;
     left: 0px;
-  }
+  }*/
+
   h2 {
     font-size: 20px;
     font-weight: bold;
     font-family: "Inter";
   }
   .news {
-    margin-left: 2vw;
+    //margin-left: 2vw;
     flex: 3;
     .notify-user {
       display: flex;
diff --git a/src/user/pinned-posts/pinned-posts.js b/src/user/pinned-posts/pinned-posts.js
index 1e1e48d6..f1d5221c 100644
--- a/src/user/pinned-posts/pinned-posts.js
+++ b/src/user/pinned-posts/pinned-posts.js
@@ -10,6 +10,7 @@ class PinnedPosts extends Component {
     this.state = {
       isLoading: true,
       pinned_posts: true,
+      sideBarOpen: true,
     };
   }
 
@@ -18,13 +19,30 @@ class PinnedPosts extends Component {
       this.setState({ isLoading: false });
     }, 1000);
   }
-
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     return (
       <div className="pinned-posts">
-        <div className="navigation">
+        <div className={sideBarClass}>
           <Navigation posts={this.state.pinned_posts}></Navigation>
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="news">
           {this.state.isLoading ? pinnedPostsLoading() : <PinPosts />}
         </div>
diff --git a/src/user/pinned-posts/pinned-posts.scss b/src/user/pinned-posts/pinned-posts.scss
index 6713d1f1..1ef83939 100644
--- a/src/user/pinned-posts/pinned-posts.scss
+++ b/src/user/pinned-posts/pinned-posts.scss
@@ -1,17 +1,20 @@
+@import "../sidebarCommon";
+
 .pinned-posts {
   display: flex;
   min-height: 100vh;
   height: auto;
   font-family: Muli, sans-serif;
-  h1{
+  h1 {
     font-size: 26px;
     font-weight: bold;
     font-family: Muli, sans-serif;
   }
-  .navigation {
+  /*.navigation {
     flex: 0.5;
     border-right: solid 1px #dfe9f1;
-  }
+  }*/
+
   .news {
     flex: 2;
     .notify-user {
@@ -23,10 +26,10 @@
     flex: 1;
     margin: 20px 20px;
   }
-  .Pinned-post{
+  .Pinned-post {
     padding: 20px 12px 0px 30px;
   }
-  .organization-update{
+  .organization-update {
     padding: 20px 12px 0px 0px;
   }
 }
diff --git a/src/user/profile/profile.js b/src/user/profile/profile.js
index 82207167..ab60fbb2 100644
--- a/src/user/profile/profile.js
+++ b/src/user/profile/profile.js
@@ -26,6 +26,7 @@ class Profile extends Component {
       userPosts: [],
       pinnedPosts: [],
       userId: "",
+      sideBarOpen: true,
     };
   }
 
@@ -71,7 +72,10 @@ class Profile extends Component {
       }
     );
   }
-
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
     const {
       userProfile,
@@ -81,16 +85,30 @@ class Profile extends Component {
       userPosts,
       pinnedPosts,
     } = this.state;
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     return (
       <div className="profile">
         <div
-          className="navigation"
+          className={sideBarClass}
           style={{
             background: "#f5f5f5",
           }}
         >
           <Navigation profile={this.state.profile}></Navigation>
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="news">
           <div className="notify-user">
             <UserInfo userProfile={userProfile} />
diff --git a/src/user/profile/profile.scss b/src/user/profile/profile.scss
index 94435f40..2c938c65 100644
--- a/src/user/profile/profile.scss
+++ b/src/user/profile/profile.scss
@@ -1,9 +1,11 @@
+@import "../sidebarCommon";
+
 .profile {
   display: flex;
   min-height: 100vh;
   height: auto;
   font-family: Muli, sans-serif;
-  .navigation {
+  /*.navigation {
     flex: 0.5;
     border-right: solid 1px #dfe9f1;
     position: fixed;
@@ -11,13 +13,14 @@
     bottom: 0px;
     left: 0px;
     overflow-y: scroll;
-  }
+  }*/
+
   h2 {
     font-size: 22px;
     font-weight: 650;
   }
   .news {
-    margin-left: 13vw;
+    //margin-left: 13vw;
     flex: 3;
     .notify-user {
       display: flex;
diff --git a/src/user/projects/proj-info/proj-info.js b/src/user/projects/proj-info/proj-info.js
index ab28b74b..05862160 100644
--- a/src/user/projects/proj-info/proj-info.js
+++ b/src/user/projects/proj-info/proj-info.js
@@ -15,7 +15,6 @@ import { getProjectById } from '../../../actions/projectAction'
 import { checkDeleteRights } from '../../dashboard/utils/checkDeleteRights'
 import Moment from 'react-moment'
 
-
 class ProjInfo extends Component {
   constructor(props) {
     super(props);
@@ -26,13 +25,14 @@ class ProjInfo extends Component {
       deleteProject: false,
       githubLink: '',
       bitBucketLink: '',
-      techStacks: []
+      techStacks: [],
+      sideBarOpen: true,
     };
   }
 
   componentDidMount() {
-    console.log('project info mounted ',this.props)
-    // fetch the data from db 
+    console.log('project info mounted ', this.props)
+    // fetch the data from db
     setTimeout(() => {
       this.props.getProjectById(this.props.match.params.id)
     })
@@ -47,7 +47,10 @@ class ProjInfo extends Component {
     const { links } = singleProject
     this.setState({ githubLink: links[0]?.githubLink, bitBucketLink: links[0]?.bitBucketLink })
   }
-
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
     const { projectInfo, editProject, proj, deleteProject, githubLink, bitBucketLink, techStacks } = this.state
 
@@ -100,18 +103,39 @@ class ProjInfo extends Component {
     //   </Grid>
     // ));
 
-    let variant = ["primary", "secondary", "success", "danger", "warning", "light", "dark"]
+    let variant = [
+      "primary",
+      "secondary",
+      "success",
+      "danger",
+      "warning",
+      "light",
+      "dark",
+    ];
     const techBadge = techStacks?.map((techs, index) => (
       <React.Fragment key={index}>
         <Badge pill variant={variant[index]} key={index}>{techs}</Badge>{" "}
       </React.Fragment>
     ))
-
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     return (
       <div className="organization">
-        <div className="navigation">
+        <div className={sideBarClass}>
           <Navigation proj={proj}></Navigation>
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "1vw" }
+              : { marginLeft: "-12vw" }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="news">
           <Row>
             <Col sm={4}>
@@ -161,11 +185,11 @@ class ProjInfo extends Component {
                         <DeleteIcon></DeleteIcon>
                       </Button>
                     ) : null}
-                  <DeleteProject
-                    show={deleteProject}
-                    onHide={cancel_del}
-                    projectId={this.props.match.params.id}
-                  />
+                    <DeleteProject
+                      show={deleteProject}
+                      onHide={cancel_del}
+                      projectId={this.props.match.params.id}
+                    />
                     <br></br>
                     <div className="tech-stack">
                       {techBadge}
@@ -174,10 +198,10 @@ class ProjInfo extends Component {
                 </Row>
 
                 <p className="createAt">
-                  Created At: 
-                    <Moment format="DD MMM YYYY">
-                      {projectInfo?.createdAt}
-                    </Moment>
+                  Created At:
+                  <Moment format="DD MMM YYYY">
+                    {projectInfo?.createdAt}
+                  </Moment>
                   {" "}
                 </p>
                 <p className="place">Updated At: 
@@ -187,7 +211,7 @@ class ProjInfo extends Component {
                 </p>
                 <p className="short_des">
                   {projectInfo.description?.short || "Short description"}
-                  </p>
+                </p>
               </div>
             </Col>
           </Row>
@@ -224,7 +248,7 @@ class ProjInfo extends Component {
   }
 }
 
-// map state to props 
+// map state to props
 const mapStateToProps = (state) => ({
   auth: state.auth,
   error: state.error,
diff --git a/src/user/projects/proj-info/proj-info.scss b/src/user/projects/proj-info/proj-info.scss
index 376389dc..9a46a713 100644
--- a/src/user/projects/proj-info/proj-info.scss
+++ b/src/user/projects/proj-info/proj-info.scss
@@ -1,15 +1,15 @@
 .container {
   margin-top: 2vh;
-  .back{
-    position:fixed;
+  .back {
+    position: fixed;
     z-index: 2;
-    top:0;
-    left:15%;
+    top: 0;
+    left: 15%;
   }
 }
 
-.proj_img{
-  height:15rem;
+.proj_img {
+  height: 15rem;
   margin-left: 1vw;
   max-width: 23vw;
   max-height: 42vh;
@@ -20,30 +20,30 @@
   flex: 1;
   padding: 10px 14px;
   h1 {
-    color: #2D2D2D;
+    color: #2d2d2d;
     font-size: 40px;
     font-weight: 500;
     margin: 0;
     padding: 0;
   }
 
-  .createAt{
+  .createAt {
     font-family: Inter;
     font-style: normal;
     font-weight: normal;
-    color: #2D2D2D;
+    color: #2d2d2d;
     font-size: 12px;
     margin: 4px 0;
     padding: 0;
   }
-  .tech-stack{
+  .tech-stack {
     margin-top: 3vh;
   }
   .short_des {
     font-family: Inter;
     font-style: normal;
     font-weight: normal;
-    color: #2D2D2D;
+    color: #2d2d2d;
     font-size: 18px;
     font-weight: 500;
     margin: 4px 0;
@@ -56,7 +56,7 @@
     font-family: Inter;
     font-style: normal;
     font-weight: normal;
-    color: #2D2D2D;
+    color: #2d2d2d;
     font-size: 12px;
     margin: 4px 0;
     padding: 0;
@@ -68,17 +68,17 @@
     font-weight: normal;
     font-size: 1.5em;
     line-height: 1.3em;
-    color: #2D2D2D;
+    color: #2d2d2d;
     text-align: justify;
     max-width: 83%;
   }
 }
 
-.description{
-  h1{
+.description {
+  h1 {
     font-family: Inter;
     font-style: normal;
-    color: #2D2D2D;
+    color: #2d2d2d;
     font-size: 27px;
     margin: 0;
     font-weight: 500;
@@ -86,24 +86,23 @@
     text-align: left;
     margin-left: 2%;
   }
- 
+
   .desc {
     font-family: Inter;
     font-style: normal;
     font-weight: normal;
     font-size: 1.2em;
     line-height: 1.3em;
-    color: #2D2D2D;
+    color: #2d2d2d;
     margin-left: 2%;
     max-width: 83%;
   }
   margin-top: 5vh;
 }
 
-
-.maintainers{
-  h1{
-    color: #2D2D2D;
+.maintainers {
+  h1 {
+    color: #2d2d2d;
     font-size: 30px;
     font-weight: bold;
     margin: 0;
@@ -113,4 +112,3 @@
   margin-top: 2vh;
   margin-bottom: 1vh;
 }
-
diff --git a/src/user/projects/projects.js b/src/user/projects/projects.js
index ce995d1b..fe4d0ee1 100644
--- a/src/user/projects/projects.js
+++ b/src/user/projects/projects.js
@@ -15,7 +15,8 @@ class Projects extends Component {
     this.state = {
       proj: true,
       deleteproject: false,
-      allProjects: []
+      allProjects: [],
+      sideBarOpen: true,
     };
   }
   componentDidMount() {
@@ -40,10 +41,14 @@ class Projects extends Component {
   handlePagination = (pageNumber) => {
     console.log('page number ', pageNumber);
     this.props.getAllProjects(6, pageNumber)
-  }
-
+  };
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
-    const { allProjects } = this.state
+    const { allProjects } = this.state;
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     const useStyles = makeStyles((theme) => ({
       root: {
         flexGrow: 1,
@@ -63,7 +68,7 @@ class Projects extends Component {
     });
 
     let Projects = allProjects.map((Item, index) => (
-      <Grid item xs = {6} sm = {4} key={index} className="card__container">
+      <Grid item xs={6} sm={4} key={index} className="card__container">
         <Card className={useStyles2.root}>
           <CardActionArea>
             <CardMedia
@@ -81,8 +86,8 @@ class Projects extends Component {
             </CardContent>
           </CardActionArea>
           <CardActions>
-            <Button 
-              size="small" 
+            <Button
+              size="small"
               onClick={() => this.props.history.push(`/${Item._id}/proj-info`)}
               variant="light"
             >
@@ -95,9 +100,22 @@ class Projects extends Component {
 
     return (
       <div className="organization">
-        <div className="navigation">
+        <div className={sideBarClass}>
           <Navigation proj={this.state.proj}></Navigation>
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "1vw" }
+              : { marginLeft: "-12vw" }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="news projects">
           <p id="project__header">All Projects</p>
           <div className={useStyles.root}>
@@ -120,7 +138,7 @@ class Projects extends Component {
   }
 }
 
-// map state to props 
+// map state to props
 const mapStateToProps = (state) => ({
   auth: state.auth,
   error: state.error,
diff --git a/src/user/projects/projects.scss b/src/user/projects/projects.scss
index 36d82dae..7c2531ed 100644
--- a/src/user/projects/projects.scss
+++ b/src/user/projects/projects.scss
@@ -1,87 +1,87 @@
 .organization {
-    display: flex;
-    min-height: 100vh;
-    font-family: Muli, sans-serif;
-    .navigation {
-      flex: 0.5;
-      border-right: solid 1px #dfe9f1;
-      position: fixed;
-      top: 0px;
-      bottom: 0px;
-      left: 0px;
-    }
+  display: flex;
+  min-height: 100vh;
+  font-family: Muli, sans-serif;
+  padding-left: 2vw;
+  /*.navigation {
+    flex: 0.5;
+    border-right: solid 1px #dfe9f1;
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    left: 0px;
+  }*/
 
-    .projects {
-        margin-top: 1vh;
-        margin-left: 4vw;
-        margin-right: 6vw;
-        p {
-          font-family: Inter;
-          font-style: normal;
-          font-weight: normal;
-          font-size: 1.5em;
-          line-height: 1.3em;
-          color: #2D2D2D;
-        }
-        #project_header {
-          font-family: Inter;
-          font-style: normal;
-          font-weight: normal;
-          font-size: 1.5em;
-          line-height: 1.3em;
-          color: #2D2D2D;
-        }
+  .projects {
+    margin-top: 1vh;
+    margin-left: 4vw;
+    margin-right: 6vw;
+    p {
+      font-family: Inter;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 1.5em;
+      line-height: 1.3em;
+      color: #2d2d2d;
+    }
+    #project_header {
+      font-family: Inter;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 1.5em;
+      line-height: 1.3em;
+      color: #2d2d2d;
+    }
 
-        .card__container{
-          max-width: 33.33%;
-        }
+    .card__container {
+      max-width: 33.33%;
+    }
 
-        .MuiCard-root {
-          overflow: hidden;
-          height: 42vh;
-        }
+    .MuiCard-root {
+      overflow: hidden;
+      height: 42vh;
+    }
 
-        img{
-          height: 10rem;
-          width:auto;
-          object-fit: cover;
-        }
-      .create{
-        position:fixed;
-        z-index: 2;
-        right:5rem;
-        bottom:5rem;
-      }
+    img {
+      height: 10rem;
+      width: auto;
+      object-fit: cover;
+    }
+    .create {
+      position: fixed;
+      z-index: 2;
+      right: 5rem;
+      bottom: 5rem;
+    }
 
-      strong {
-        color:#1A73E8;
-      }
-    
-      .short-des {
-        text-align: justify;
-        font-family: Inter;
-        font-style: normal;
-        font-weight: normal;
-        font-size: 1em;
-        line-height: 1.3em;
-        color: #2D2D2D;
-        /* white-space: nowrap; */
-        max-width: 259px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-      }
+    strong {
+      color: #1a73e8;
+    }
 
-      .project__pagination__container {
-        display: flex;
-        padding-top: 20px;
-        flex-direction: row;
-        justify-content: center;
-        align-items: center;
-      }
+    .short-des {
+      text-align: justify;
+      font-family: Inter;
+      font-style: normal;
+      font-weight: normal;
+      font-size: 1em;
+      line-height: 1.3em;
+      color: #2d2d2d;
+      /* white-space: nowrap; */
+      max-width: 259px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+    }
 
+    .project__pagination__container {
+      display: flex;
+      padding-top: 20px;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
     }
-    margin-left: 10%;
-  }
\ No newline at end of file
+  }
+  margin-left: 10%;
+}
diff --git a/src/user/proposals/ProposalEditor/ProposalEditor.js b/src/user/proposals/ProposalEditor/ProposalEditor.js
index abf80e7d..cce88eae 100644
--- a/src/user/proposals/ProposalEditor/ProposalEditor.js
+++ b/src/user/proposals/ProposalEditor/ProposalEditor.js
@@ -6,14 +6,32 @@ import "./ProposalEditor.scss";
 class ProposalEditor extends Component {
   constructor(props) {
     super(props);
-    this.state = {};
+    this.state = { sideBarOpen: true };
   }
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     return (
       <div className="editor">
-        <div className="editor__navigation">
+        <div className={sideBarClass}>
           <Navigation dashboard={this.state.dashboard} />
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="editor__content">
           <EditorContent />
         </div>
diff --git a/src/user/proposals/ProposalEditor/ProposalEditor.scss b/src/user/proposals/ProposalEditor/ProposalEditor.scss
index b5f48ddf..8e2f73e6 100644
--- a/src/user/proposals/ProposalEditor/ProposalEditor.scss
+++ b/src/user/proposals/ProposalEditor/ProposalEditor.scss
@@ -1,12 +1,15 @@
+@import "../../sidebarCommon";
+
 .editor {
   display: flex;
   min-height: 100vh;
   height: auto;
   font-family: Muli, sans-serif;
-  .editor__navigation {
+  /*.editor__navigation {
     flex: 1;
     border-right: solid 1px #dfe9f1;
-  }
+  }*/
+
   .editor__content {
     flex: 5.5;
   }
diff --git a/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js b/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js
index 0d39a465..3c2dbef9 100644
--- a/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js
+++ b/src/user/proposals/UserProposalDashboard/UserProposalDashboard.js
@@ -10,14 +10,33 @@ class UserProposalDashboard extends Component {
     this.state = {
       dashboard: true,
       isLoading: true,
+      sideBarOpen: true,
     };
   }
+  handleViewSidebar = () => {
+    console.log(this.state.sideBarOpen);
+    this.setState({ sideBarOpen: !this.state.sideBarOpen });
+  };
   render() {
+    var sideBarClass = this.state.sideBarOpen ? "sidebar-open" : "sidebar";
     return (
       <div className="dashboard">
-        <div className="dashboard__navigation">
+        <div className={sideBarClass}>
           <Navigation dashboard={this.state.dashboard} />
         </div>
+        <button
+          onClick={this.handleViewSidebar}
+          className="sidebar-toggle"
+          style={
+            sideBarClass === "sidebar-open"
+              ? { marginLeft: "13vw" }
+              : { marginLeft: 0 }
+          }
+        >
+          <div />
+          <div />
+          <div />
+        </button>
         <div className="dashboard__content">
           <DashboardContent />
         </div>