diff --git a/src/actions/adminAction.js b/src/actions/adminAction.js
index 8a97b2fc..1504e9eb 100644
--- a/src/actions/adminAction.js
+++ b/src/actions/adminAction.js
@@ -1,7 +1,11 @@
 import axios from 'axios'
 import { errorHandler } from '../utils/errorHandler'
 import { setRequestStatus } from '../utils/setRequestStatus'
-import { SET_ADMIN } from './types'
+import { SET_ADMIN, GET_ADMIN } from './types'
+import { setAuthToken } from '../utils/setAuthToken'
+import jwt_decode from 'jwt-decode';
+import { setCurrentUser } from './authAction'
+
 
 export const createAdmin = (adminInfo) => async (dispatch) => {
   try {
@@ -9,24 +13,40 @@ export const createAdmin = (adminInfo) => async (dispatch) => {
     setRequestStatus(false)
     if (res.status === 201) {
       setRequestStatus(true)
+      dispatch({
+        type: GET_ADMIN,
+        payload: res.data.user
+      })
     }
   } catch (error) {
     dispatch(errorHandler(error))
   }
 }
 
-export const loginAdmin = (adminInfo) => async (dispatch) => {
+export const loginAdmin = (adminInfo, history) => async (dispatch) => {
   try {
     const res = await axios.post('/auth/login/', adminInfo)
-    dispatch(setRequestStatus(false))
-    if (res.status === 200) {
-      dispatch(setRequestStatus(true))
-      localStorage.setItem('admin', true)
-      dispatch({
-        type: SET_ADMIN,
-        payload: true
-      })
-    }
+   dispatch(setRequestStatus(false));
+   if (res.status === 200) {
+
+     const token = res.data.token;
+     dispatch(setRequestStatus(true));
+
+     localStorage.setItem("jwtToken", JSON.stringify(token));
+     setAuthToken(token);
+
+     // update state with user
+     const decodedData = await jwt_decode(token);
+     localStorage.setItem('userId', decodedData._id)
+     dispatch(setCurrentUser(decodedData));
+
+     dispatch({
+       type: SET_ADMIN,
+       payload: true
+     })
+     
+     history.push("/dashboard");
+   }
   } catch (error) {
     dispatch(errorHandler(error))
   }
diff --git a/src/actions/authAction.js b/src/actions/authAction.js
index 270d7b6e..543bb639 100644
--- a/src/actions/authAction.js
+++ b/src/actions/authAction.js
@@ -1,4 +1,4 @@
-import { SET_CURRENT_USER } from './types';
+import { SET_CURRENT_USER, GET_USER_PROFILE, PASSWORD_SUCCESSFULLY_CHANGED, PASSWORD_CHANGE_REQUEST_SUCCESS } from './types';
 import axios from 'axios';
 import { setAuthToken } from '../utils/setAuthToken';
 import jwt_decode from 'jwt-decode';
@@ -14,6 +14,10 @@ export const registerUser = (userInfo, history) => async (dispatch) => {
     
     if(res.status === 201) { 
       dispatch(setRequestStatus(true));
+      dispatch({
+        type: GET_USER_PROFILE,
+        payload: res.data.user
+      })
       history.push('/');
     }
 
@@ -53,13 +57,17 @@ export const loginUser = (userInfo, history) => async (dispatch) => {
 // forgot password 
 export const forgotPassword = (email) => async (dispatch) => {
   try {
-    const res = await axios.post('/user/password_reset', email);
+    const res = await axios.patch('/user/password_reset/request/', email);
     dispatch(setRequestStatus(false));
     
     if(res.status === 200){
       dispatch(setRequestStatus(true));
       console.log("Forgot password request sent!!");
       forgotPasswordToken = res.data.token;
+      dispatch({
+        type: PASSWORD_CHANGE_REQUEST_SUCCESS,
+        payload: res.data.token
+      })
     }
 
   } catch (error) {
@@ -70,13 +78,17 @@ export const forgotPassword = (email) => async (dispatch) => {
 // update password 
 export const changePassword = (passObj) => async (dispatch) => {
   try {
-    const res = await axios.post(`/user/password_reset/${forgotPasswordToken}`, passObj);
+    const res = await axios.patch(`/user/password_reset/${forgotPasswordToken}`, passObj);
     dispatch(setRequestStatus(false));
 
     if(res.status === 200){
       dispatch(setRequestStatus(true));
       console.log("Password updated!", res.data);
       // show password updated notification from here 
+      dispatch({
+        type: PASSWORD_SUCCESSFULLY_CHANGED,
+        payload: res.data.updated
+      })
     }
     
   } catch(error) {
diff --git a/src/actions/commentAction.js b/src/actions/commentAction.js
new file mode 100644
index 00000000..94e9fe99
--- /dev/null
+++ b/src/actions/commentAction.js
@@ -0,0 +1,67 @@
+import { GET_COMMENTS_OF_A_POST } from './types'
+import { errorHandler } from '../utils/errorHandler'
+import axios from 'axios'
+import { setRequestStatus } from '../utils/setRequestStatus'
+
+// CREATE COMMENT ON A PARTICULAR POST 
+export const createComment = (postId, comment) => async (dispatch) => {
+  try {
+    const res = await axios.post(`/comment/${postId}`, comment)
+    dispatch(setRequestStatus(false));
+    if(res.status === 201) {
+      dispatch(setRequestStatus(true))
+      console.log('created comment ', res.data.comment)
+      dispatch(getAllCommentsOfPost());
+    }
+  } catch(error) {
+    dispatch(errorHandler(error))
+  }
+}
+
+// GET ALL COMMENTS OF A POST
+export const getAllCommentsOfPost = (postId) => async (dispatch) => {
+  try {
+    const res = await axios.get(`/comment/${postId}`)
+    dispatch(setRequestStatus(false))
+    if(res.status === 200) {
+      dispatch(setRequestStatus(true));
+      console.log('fetching comments of ', postId, res.data.comments);
+      dispatch({
+        type: GET_COMMENTS_OF_A_POST,
+        payload: res.data.comments
+      })
+    }
+  } catch(error) {
+    dispatch(errorHandler(error))
+  }
+}
+
+// UPDATE COMMENT OF A POST
+export const updateComment = (commentId, updatedComment) => async (dispatch) => {
+  try {
+    const res = await axios.patch(`/comment/${commentId}`, updatedComment)
+    dispatch(setRequestStatus(false))
+    if(res.status === 200) {
+      dispatch(setRequestStatus(true))
+      console.log('comment updated ', res.data.comment)
+      dispatch(getAllCommentsOfPost())
+    }
+  } catch(error) {
+    errorHandler(error)
+  }
+}
+
+// DELETE COMMENT
+export const deleteComment = (commentId) => async (dispatch) => {
+  try {
+    const res = await axios.delete(`/comment/${commentId}`)
+    dispatch(setRequestStatus(false))
+    if(res.status === 200) {
+      dispatch(setRequestStatus(true));
+      console.log('comment deleted ', res.data)
+      dispatch(getAllCommentsOfPost())
+    }
+  } catch(error) {
+    dispatch(errorHandler(error))
+  }
+}
\ No newline at end of file
diff --git a/src/actions/dashboardAction.js b/src/actions/dashboardAction.js
index 8076881f..d47cb95d 100644
--- a/src/actions/dashboardAction.js
+++ b/src/actions/dashboardAction.js
@@ -2,6 +2,9 @@ import axios from 'axios'
 import { setRequestStatus } from '../utils/setRequestStatus'
 import { errorHandler } from '../utils/errorHandler'
 import { GET_ALL_UPCOMING_EVENTS } from './types'
+import { getAllEvents } from './eventAction'
+import { getAllPosts } from './postAction'
+import { getAllProjects } from './projectAction'
 
 // GET UPCOMING EVENTS
 export const upcomingEvents = () => async (dispatch) => {
@@ -29,6 +32,7 @@ export const createPost = (postInfo) => async (dispatch) => {
     if (res.status === 201) {
       dispatch(setRequestStatus(true))
       console.log('post created ', res.data)
+      dispatch(getAllPosts())
     }
   } catch (error) {
     dispatch(errorHandler(error))
@@ -43,6 +47,7 @@ export const createEvent = (eventInfo) => async (dispatch) => {
     if (res.status === 201) {
       dispatch(setRequestStatus(true))
       console.log('event created ', res.data)
+      dispatch(getAllEvents())
     }
   } catch (error) {
     dispatch(errorHandler(error))
@@ -58,6 +63,7 @@ export const createProject = (projectInfo) => async (dispatch) => {
     if (res.status === 201) {
       dispatch(setRequestStatus(true))
       console.log('project created ', res.data)
+      dispatch(getAllProjects())
     }
   } catch (error) {
     dispatch(errorHandler(error))
diff --git a/src/actions/eventAction.js b/src/actions/eventAction.js
index 72ac4069..5aa603a6 100644
--- a/src/actions/eventAction.js
+++ b/src/actions/eventAction.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { errorHandler } from '../utils/errorHandler';
 import { setRequestStatus } from '../utils/setRequestStatus';
-import { GET_ALL_EVENTS } from './types';
+import { GET_ALL_EVENTS, GET_EVENT_BY_ID } from './types';
 
 // DELETE EVENT REQUEST 
 export const deleteEvent = (eventId) => async (dispatch) => {
@@ -10,6 +10,7 @@ export const deleteEvent = (eventId) => async (dispatch) => {
     dispatch(setRequestStatus(false));
     if(res.status === 200){
       dispatch(setRequestStatus(true));
+      dispatch(getAllEvents())
     }
   } catch(error) {
     dispatch(errorHandler(error))
@@ -23,6 +24,7 @@ export const updateEvent = (eventId, updatedInfo) => async (dispatch) => {
     dispatch(setRequestStatus(false));
     if(res.status === 200){
       dispatch(setRequestStatus(true));
+      dispatch(getAllEvents())
     }
   } catch(error) {
     dispatch(errorHandler(error))
@@ -60,3 +62,22 @@ export const getAllEvents = (pagination = 10, page = 1) => async (dispatch) => {
     dispatch(errorHandler(error))
   }
 }
+
+// GET EVENT BY ID 
+export const getEventById = (eventId) => async (dispatch) => {
+  try {
+    console.log('fetching event ', eventId)
+    const res = await axios.get(`/event/${eventId}`)
+    dispatch(setRequestStatus(false))
+    if(res.status === 200){
+      dispatch(setRequestStatus(true))
+      console.log('fetching event by id ', res.data.event)
+      dispatch({
+        type: GET_EVENT_BY_ID,
+        payload: res.data.event
+      })
+    }
+  } catch(error) {
+    dispatch(errorHandler(error))
+  }
+}
\ No newline at end of file
diff --git a/src/actions/orgAction.js b/src/actions/orgAction.js
index b46aa774..15a44800 100644
--- a/src/actions/orgAction.js
+++ b/src/actions/orgAction.js
@@ -11,6 +11,7 @@ export const registerCommunity  = (orgInfo) => async (dispatch) => {
     if (res.status === 201) {
       dispatch(setRequestStatus(true))
       localStorage.setItem('orgId', JSON.stringify(res.data.org._id))
+      dispatch(getOrgProfile())
     }
   } catch (error) {
     dispatch(errorHandler(error))
@@ -61,15 +62,17 @@ export const getOrgProfile = () => async (dispatch) => {
 export const updateOrgProfile = (updatedInfo) => async (dispatch) => {
   try {
     let orgId = localStorage.getItem('orgId')
+    console.log('updatedInfo ', updatedInfo);
     const res = await axios.patch(`/org/${orgId}`, updatedInfo)
     dispatch(setRequestStatus(false));
     if(res.status === 200) {
       dispatch(setRequestStatus(true))
       console.log('org profile updated!', res.data)
-      dispatch({
-        type: UPDATE_ORG_PROFILE,
-        payload: res.data.organization
-      })
+      dispatch(getOrgProfile());
+      // dispatch({
+      //   type: UPDATE_ORG_PROFILE,
+      //   payload: res.data.organization
+      // })
     }
   } catch(error) {
     dispatch(errorHandler(error))
diff --git a/src/actions/postAction.js b/src/actions/postAction.js
index 6ca6e777..f5b56f8c 100644
--- a/src/actions/postAction.js
+++ b/src/actions/postAction.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { errorHandler } from '../utils/errorHandler';
 import { setRequestStatus } from '../utils/setRequestStatus';
-import { GET_ALL_POSTS } from './types';
+import { GET_ALL_POSTS, GET_ALL_PINNED_POSTS } from './types';
 
 // GET ALL POSTS
 export const getAllPosts = (pagination = 10, page = 1) => async (dispatch) => {
@@ -21,3 +21,20 @@ export const getAllPosts = (pagination = 10, page = 1) => async (dispatch) => {
   }
 }
 
+// GET ALL PINNED POSTS 
+export const getAllPinnedPosts = (pagination = 10, page = 1) => async (dispatch) => {
+  try {
+    const res = await axios.get(`/post/all/pinned?pagination=${pagination}&page=${page}`)
+    dispatch(setRequestStatus(false))
+    if(res.status === 200){
+      dispatch(setRequestStatus(true))
+      console.log('fetching all pinned posts ', res.data.pinnedPost)
+      dispatch({
+        type: GET_ALL_PINNED_POSTS,
+        payload: res.data.pinnedPost
+      })
+    }
+  } catch(error) {
+    dispatch(errorHandler(error))
+  }
+}
\ No newline at end of file
diff --git a/src/actions/projectAction.js b/src/actions/projectAction.js
index f21d3c34..ffa6594b 100644
--- a/src/actions/projectAction.js
+++ b/src/actions/projectAction.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { errorHandler } from '../utils/errorHandler';
 import { setRequestStatus } from '../utils/setRequestStatus';
-import { GET_ALL_PROJECTS } from './types';
+import { GET_ALL_PROJECTS, GET_SINGLE_PROJECT } from './types';
 
 // CREATE PROJECT
 export const createProject = (projectInfo) => async (dispatch) => {
@@ -34,4 +34,56 @@ export const getAllProjects = (pagination = 10, page = 1) => async (dispatch) =>
   } catch(error) {
     dispatch(errorHandler(error))
   }
-}
\ No newline at end of file
+}
+
+// GET PROJECT BY ID 
+export const getProjectById = (projectId) => async (dispatch) => {
+  try {
+    const res = await axios.get(`/project/${projectId}`)
+    dispatch(setRequestStatus(false))
+    if(res.status === 200) {
+      dispatch(setRequestStatus(true));
+      dispatch({
+        type: GET_SINGLE_PROJECT,
+        payload: res.data.project
+      })
+    }
+  } catch(error) {
+    dispatch(errorHandler(error))
+  }
+}
+
+// UPDATE PROJECT 
+export const updateProject = (projectId, updatedInfo) => async (dispatch) => {
+  try {
+    const res = await axios.patch(`/project/${projectId}`, updatedInfo)
+    dispatch(setRequestStatus(false))
+    if(res.status === 200) {
+      dispatch(setRequestStatus(true));
+      console.log('updated project info ', res.data)
+      dispatch({
+        type: GET_SINGLE_PROJECT,
+        payload: res.data.project
+      })
+    }
+  } catch(error) {
+    dispatch(errorHandler(error))
+  }
+}
+
+// DELETE PROJECT BY ID
+export const deleteProjectById = (projectId, history) => async (dispatch) => {
+  try {
+    const res = await axios.delete(`/project/${projectId}`)
+    dispatch(setRequestStatus(false))
+    if(res.status === 200) {
+      dispatch(setRequestStatus(true))
+      console.log('Project deleted', res.data.msg);
+      // window.location.href = '/projects'
+      // dispatch(getAllProjects())
+      history.push('/projects');
+    }
+  } catch(error) {
+    dispatch(errorHandler(error))
+  }
+}
diff --git a/src/actions/types.js b/src/actions/types.js
index ca25eeac..cdcbc38d 100644
--- a/src/actions/types.js
+++ b/src/actions/types.js
@@ -26,4 +26,13 @@ export const GET_USER_PROJECTS = "GET_USER_PROJECTS";
 export const GET_ALL_EVENTS = "GET_ALL_EVENTS";
 export const GET_ALL_PROJECTS = "GET_ALL_PROJECTS";
 export const GET_ALL_POSTS = "GET_ALL_POSTS";
-export const GET_USER_POSTS = "GET_USER_POSTS";
\ No newline at end of file
+export const GET_USER_POSTS = "GET_USER_POSTS";
+export const GET_ALL_PINNED_POSTS = "GET_ALL_PINNED_POSTS";
+export const GET_EVENT_BY_ID = "GET_EVENT_BY_ID";
+export const GET_ADMIN = "GET_ADMIN";
+export const GET_COMMENTS_OF_A_POST = "GET_COMMENTS_OF_A_POST";
+export const GET_SINGLE_PROJECT = "GET_SINGLE_PROJECT";
+export const PASSWORD_CHANGE_REQUEST_SUCCESS = "PASSWORD_CHANGE_REQUEST_SUCCESS";
+export const PASSWORD_SUCCESSFULLY_CHANGED = "PASSWORD_SUCCESSFULLY_CHANGED";
+export const GET_INVITE_LINK = "GET_INVITE_LINK";
+export const PROCESS_INVITE_LINK = "PROCESS_INVITE_LINK";
\ No newline at end of file
diff --git a/src/actions/usersAction.js b/src/actions/usersAction.js
index 149456e0..14fbe450 100644
--- a/src/actions/usersAction.js
+++ b/src/actions/usersAction.js
@@ -1,4 +1,4 @@
-import { GET_USER_PROFILE, GET_ALL_MEMBERS, UPDATE_USER_PROFILE, GET_USER_EVENTS, GET_USER_PROJECTS, GET_USER_POSTS } from './types'
+import { GET_USER_PROFILE, GET_ALL_MEMBERS, UPDATE_USER_PROFILE, GET_USER_EVENTS, GET_USER_PROJECTS, GET_USER_POSTS, GET_INVITE_LINK, PROCESS_INVITE_LINK } from './types'
 import { errorHandler } from '../utils/errorHandler'
 import axios from 'axios'
 import { setRequestStatus } from '../utils/setRequestStatus'
@@ -158,3 +158,39 @@ export const getPostsCreatedByUser = (pagination = 10, page = 1) => async (dispa
     dispatch(errorHandler(error))
   }
 }
+
+// GET INVITE LINK 
+export const getInviteLink = () => async (dispatch) => {
+  try {
+    const res = await axios.get('/user/invite')
+    dispatch(setRequestStatus(false));
+    if(res.status === 200) {
+      dispatch(setRequestStatus(true));
+      console.log('Fetching invite link ', res.data.inviteLink)
+      dispatch({
+        type: GET_INVITE_LINK,
+        payload: res.data.inviteLink
+      })
+    }
+  } catch (error) {
+    dispatch(errorHandler(error))
+  }
+}
+
+// PROCESS INVITE LINK 
+export const processInviteToken = (token) => async (dispatch) => {
+  try {
+    const res = await axios.get(`/user/invite/${token}`)
+    dispatch(setRequestStatus(false));
+    if(res.status === 200) {
+      dispatch(setRequestStatus(true))
+      console.log('Processing the invite link ', res.data);
+      dispatch({
+        type: PROCESS_INVITE_LINK,
+        payload: res.data.success || res.data.msg
+      })
+    }
+  } catch(error) {
+    dispatch(errorHandler(error));
+  }
+}
\ No newline at end of file
diff --git a/src/auth/login-form/login-form.js b/src/auth/login-form/login-form.js
index 317d817f..f6cea6f4 100644
--- a/src/auth/login-form/login-form.js
+++ b/src/auth/login-form/login-form.js
@@ -68,8 +68,6 @@ class LoginForm extends Component {
   };
 
   render() {
-    const { email, password, error, isValidForm, isValidEmail } = this.state;
-
     const handleToggle = (e) => {
       const targetName = e.target.name;
       this.setState({
diff --git a/src/auth/signup-form/signup-form.js b/src/auth/signup-form/signup-form.js
index bdcd1758..85843061 100644
--- a/src/auth/signup-form/signup-form.js
+++ b/src/auth/signup-form/signup-form.js
@@ -1,8 +1,6 @@
 import React, { Component } from "react";
 import { Form, Button, Row, Col } from "react-bootstrap";
-import { TextField } from "@material-ui/core";
 import "./signup-form.scss";
-import Grid from "@material-ui/core/Grid";
 import { makeStyles } from "@material-ui/core/styles";
 import { connect } from "react-redux";
 import { registerUser } from "../../actions/authAction";
@@ -172,9 +170,9 @@ class SignUpForm extends Component {
       isValidEmail,
       isValidPhone,
       isValidDesc,
-      isMatched,
-      isValidForm,
-      error,
+      // isMatched,
+      // isValidForm,
+      // error,
     } = this.state;
 
     return (
diff --git a/src/common/Popups.js b/src/common/Popups.js
index 89c950ab..b23399ed 100644
--- a/src/common/Popups.js
+++ b/src/common/Popups.js
@@ -5,6 +5,8 @@ import { MdVerifiedUser } from 'react-icons/md';
 import { FaUserSlash } from 'react-icons/fa';
 import { connect } from 'react-redux';
 import { forgotPassword, changePassword } from '../actions/authAction';
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
  
 class Popups extends Component {
   constructor(props){
@@ -20,16 +22,26 @@ class Popups extends Component {
       option: "",
       optionValue: "",
       newPass: "",
-      cnfPass: ""
+      cnfPass: "",
+      requested: false
     }
   }
   
   componentWillReceiveProps(nextProps){
+    console.log('nextProps in common ', nextProps)
     this.setState({
       show: nextProps.modalShow,
       option: nextProps.option,
       optionValue: nextProps.optionValue
     });
+    const { currentStep, requested } = this.state
+    if (nextProps.auth.resetPassReq !== null && requested) {
+      toast.success('Link sent to your registered email!')
+      let step = currentStep >= 2 ? 2 : currentStep + 1
+      this.setState({
+        currentStep: step 
+      })
+    } 
   }
  
   handleClose = () => {
@@ -54,8 +66,8 @@ class Popups extends Component {
 
   changePassword = (e) => {
     e.preventDefault();
-    const { newPass } = this.state;
-    const { auth, changePassword, status } = this.props;
+    const { newPass, success } = this.state;
+    const { auth, changePassword } = this.props;
     
     const passObj = { 
       password: newPass,
@@ -66,30 +78,21 @@ class Popups extends Component {
     changePassword(passObj);
 
     // show notification on sidebar if done successfully 
-    if(status.success) {
+    if(success) {
       console.log("Successfully changed the password!");
     }
   }
   
   forgotPasswordRequest = () => {
     const { email } = this.state;
-    const { forgotPassword, status } = this.props;
+    const { forgotPassword } = this.props;
     
     console.log("forgot password request sending...")
-    forgotPassword(email);
-    
-    let { currentStep } = this.state;
-    // move to next step if forgot password request successful
-    if(status.success){
-      currentStep = currentStep >= 2 ? 2 : currentStep + 1
-      this.setState({
-        currentStep: currentStep
-      })
-    } else {
-      // show error message in popup 
-      console.log("Something went wrong!!");
+    const emailObj = {
+      email: email
     }
-
+    this.setState({ requested: true })
+    forgotPassword(emailObj);
   }
     
 
@@ -305,12 +308,25 @@ function Step2(props) {
   if (props.currentStep !== 2) {
     return null
   } 
-  return(
+  return (
     <React.Fragment>
-    <div className="form-group">
-      <label htmlFor="password">Check your email to get the link of reset the password. If it doesnot appear within few minutes, check the spam folder.</label>
-          
-    </div>
+      <ToastContainer
+        position="top-right"
+        autoClose={5000}
+        hideProgressBar={false}
+        newestOnTop={false}
+        closeOnClick
+        rtl={false}
+        pauseOnFocusLoss
+        draggable
+        pauseOnHover
+      />
+      <div className="form-group">
+        <label htmlFor="password">
+          Check your email to get the link of reset the password. If it doesnot
+          appear within few minutes, check the spam folder.
+        </label>
+      </div>
     </React.Fragment>
   );
 }
diff --git a/src/css/components/_modals.scss b/src/css/components/_modals.scss
index 3892bb60..47702b99 100644
--- a/src/css/components/_modals.scss
+++ b/src/css/components/_modals.scss
@@ -30,9 +30,18 @@
         letter-spacing: 0.2em;
         padding-top: 5px;
       }
+      .search_btn {
+        width: 6vw;
+        height: 5vh;
+        background: rgb(250, 251, 252);
+        border-radius: 100px;
+        color: #1A73E8;
+        padding: 0.3em;
+        margin-left: 1em;
+      }
     }
     .modal__search {
-      width: 100%;
+      width: 50%;
       border: 1px solid #cccccc;
       box-sizing: border-box;
       border-radius: 5px;
@@ -201,7 +210,7 @@
       border-radius: 20px;
       margin-top: 15px;
       margin-bottom: 10px;
-      justify-content: center;
+      margin-left: 10px;
       align-items: center;
       .member__image {
         border: 1px solid #e6e6e5;
@@ -214,6 +223,7 @@
       .member__content {
         padding-left: 10px;
         padding-right: 10px;
+        margin-right: 40px;
         width: 50%;
       }
 
diff --git a/src/reducers/adminReducers.js b/src/reducers/adminReducers.js
new file mode 100644
index 00000000..e015d7ce
--- /dev/null
+++ b/src/reducers/adminReducers.js
@@ -0,0 +1,19 @@
+import { SET_ADMIN } from '../actions/types'
+const initialState = {
+  isAdmin: false,
+  admin: {}
+}
+
+export default (state = initialState, action) => {
+  switch(action.type) {
+    case SET_ADMIN: {
+      return {
+        ...state,
+        isAdmin: action.payload
+      }
+    }
+    default: {
+      return state
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/reducers/authReducer.js b/src/reducers/authReducer.js
index 7320b181..5a4b7b16 100644
--- a/src/reducers/authReducer.js
+++ b/src/reducers/authReducer.js
@@ -1,4 +1,4 @@
-import { SET_CURRENT_USER, RESPONSE_MSG, SET_ADMIN, BLOCK_USER, UNBLOCK_USER, REMOVE_USER } from "../actions/types"
+import { SET_CURRENT_USER, RESPONSE_MSG, SET_ADMIN, BLOCK_USER, UNBLOCK_USER, REMOVE_USER, PASSWORD_CHANGE_REQUEST_SUCCESS, PASSWORD_SUCCESSFULLY_CHANGED } from "../actions/types"
 
 const initialState = {
   // make it false later, default is set to true so that contributors don't need to login for test
@@ -6,6 +6,8 @@ const initialState = {
   isAdmin: false,
   isBlocked: false,
   isRemoved: false,
+  resetPassReq: null,
+  passUpdated: false,
   user: {},
   response_msg: ""
 }
@@ -19,6 +21,18 @@ export default (state = initialState, action) => {
         user: action.payload
       }
     }
+    case PASSWORD_CHANGE_REQUEST_SUCCESS: {
+      return {
+        ...state,
+        resetPassReq: action.payload
+      }
+    }
+    case PASSWORD_SUCCESSFULLY_CHANGED: {
+      return {
+        ...state,
+        passUpdated: action.payload
+      }
+    }
     case BLOCK_USER: {
       return {
         ...state,
diff --git a/src/reducers/commentReducer.js b/src/reducers/commentReducer.js
new file mode 100644
index 00000000..db8cd306
--- /dev/null
+++ b/src/reducers/commentReducer.js
@@ -0,0 +1,19 @@
+import { GET_COMMENTS_OF_A_POST } from '../actions/types'
+
+const initialState = {
+  allComments: []
+}
+
+export default (state = initialState, action) => {
+  switch(action.type) {
+    case GET_COMMENTS_OF_A_POST: {
+      return {
+        ...state,
+        allComments: action.payload
+      }
+    }
+    default: {
+      return state
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/reducers/eventReducer.js b/src/reducers/eventReducer.js
index e4873061..cab7f108 100644
--- a/src/reducers/eventReducer.js
+++ b/src/reducers/eventReducer.js
@@ -1,6 +1,7 @@
-import { GET_ALL_EVENTS } from '../actions/types'
+import { GET_ALL_EVENTS, GET_EVENT_BY_ID } from '../actions/types'
 const initialState = {
-  allEvents: []
+  allEvents: [],
+  event: {}
 }
 
 export default (state = initialState, action) => {
@@ -11,6 +12,12 @@ export default (state = initialState, action) => {
         allEvents: action.payload
       }
     }
+    case GET_EVENT_BY_ID: {
+      return {
+        ...state,
+        event: action.payload
+      }
+    }
     default:{
       return state
     }
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 360c5d2b..250d51d9 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -10,6 +10,8 @@ import insightReducer from './insightReducer';
 import orgReducer from './orgReducer';
 import eventReducer from './eventReducer';
 import projectReducer from './projectReducer';
+import adminReducers from './adminReducers';
+import commentReducer from './commentReducer';
 
 const rootReducer = combineReducers({
   auth: authReducers,
@@ -22,6 +24,8 @@ const rootReducer = combineReducers({
   org: orgReducer,
   event: eventReducer,
   project: projectReducer,
+  admin: adminReducers,
+  comment: commentReducer,
   status: requestStatus
 });
 
diff --git a/src/reducers/postReducer.js b/src/reducers/postReducer.js
index 0975ac3a..aa70b762 100644
--- a/src/reducers/postReducer.js
+++ b/src/reducers/postReducer.js
@@ -1,6 +1,7 @@
-import { GET_ALL_POSTS } from '../actions/types'
+import { GET_ALL_POSTS, GET_ALL_PINNED_POSTS } from '../actions/types'
 const initialState = {
-  allPosts: []
+  allPosts: [],
+  pinnedPosts: []
 }
 
 export default (state = initialState, action) => {
@@ -11,6 +12,12 @@ export default (state = initialState, action) => {
         allPosts: action.payload
       }
     }
+    case GET_ALL_PINNED_POSTS: {
+      return {
+        ...state,
+        pinnedPosts: action.payload
+      }
+    }
     default:{
       return state
     }
diff --git a/src/reducers/projectReducer.js b/src/reducers/projectReducer.js
index 73b37577..790b563b 100644
--- a/src/reducers/projectReducer.js
+++ b/src/reducers/projectReducer.js
@@ -1,6 +1,7 @@
-import { GET_ALL_PROJECTS } from '../actions/types'
+import { GET_ALL_PROJECTS, GET_SINGLE_PROJECT } from '../actions/types'
 const initialState = {
-  allProjects: []
+  allProjects: [],
+  singleProject: {}
 }
 
 export default (state = initialState, action) => {
@@ -11,6 +12,12 @@ export default (state = initialState, action) => {
         allProjects: action.payload
       }
     }
+    case GET_SINGLE_PROJECT: {
+      return {
+        ...state,
+        singleProject: action.payload
+      }
+    }
     default:{
       return state
     }
diff --git a/src/reducers/userReducer.js b/src/reducers/userReducer.js
index 1448b093..0bbf1ed0 100644
--- a/src/reducers/userReducer.js
+++ b/src/reducers/userReducer.js
@@ -1,9 +1,10 @@
-import { GET_USER_PROFILE, UPDATE_USER_PROFILE, GET_USER_EVENTS, GET_USER_PROJECTS, GET_USER_POSTS } from '../actions/types'
+import { GET_USER_PROFILE, UPDATE_USER_PROFILE, GET_USER_EVENTS, GET_USER_PROJECTS, GET_USER_POSTS, GET_INVITE_LINK } from '../actions/types'
 const initialState = {
   userProfile: {},
   userEvents: [],
   userProjects: [],
-  userPosts: []
+  userPosts: [],
+  inviteLink: ''
 }
 
 export default (state = initialState, action) => {
@@ -38,6 +39,12 @@ export default (state = initialState, action) => {
         userProfile: action.payload
       }
     }
+    case GET_INVITE_LINK: {
+      return {
+        ...state,
+        inviteLink: action.payload
+      }
+    }
     default: {
       return state
     }
diff --git a/src/user/Admin/Admin.js b/src/user/Admin/Admin.js
index 166af92d..ede675bf 100644
--- a/src/user/Admin/Admin.js
+++ b/src/user/Admin/Admin.js
@@ -1,11 +1,12 @@
 import React, { Component } from 'react'
-import { Form, Button, Col, Row } from 'react-bootstrap'
+import { Button } from 'react-bootstrap'
 import './register.scss'
 import SmallDonut from '../../images/small_donut.png'
 import ExtraDonuts from '../../images/extra-donuts.png'
 import DonutShadow from '../../images/shadow.png'
 import Register from './components/Register'
 import Login from './components/Login'
+import { connect } from 'react-redux'
 
 class Admin extends Component {
   constructor(props) {
@@ -20,11 +21,13 @@ class Admin extends Component {
       view: 'register'
     }
   }
+
   toggleView = (name) => {
     this.setState({ view: name })
   }
+
   render() {
-    const { email, name, password, cnfPass, register, setup, activate, login, view } = this.state;
+    const {  view } = this.state;
     
     let adminEmailVerification = (
       <div className="email__verification__box">
@@ -100,4 +103,11 @@ class Admin extends Component {
     );
   }
 }
-export default Admin;
\ No newline at end of file
+// map state to props 
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  error: state.error,
+  admin: state.admin
+})
+
+export default connect(mapStateToProps)(Admin);
\ No newline at end of file
diff --git a/src/user/Admin/components/Login.js b/src/user/Admin/components/Login.js
index 28031778..ddf47610 100644
--- a/src/user/Admin/components/Login.js
+++ b/src/user/Admin/components/Login.js
@@ -1,14 +1,44 @@
 import React, { Component } from 'react'
 import { Form, Button } from 'react-bootstrap'
+import { connect } from 'react-redux';
+import { loginAdmin } from '../../../actions/adminAction'
+import { withRouter } from 'react-router-dom'
 
 class Login extends Component {
   constructor(props) {
     super(props);
     this.state = {
       register: false,
+      email: '',
+      password: ''
     };
   }
+
+  componentWillReceiveProps(nextProps) {
+    console.log('login nextProps', nextProps)
+  }
+
+  loginAdmin = (e) => {
+    e.preventDefault()
+    const { email, password } = this.state
+    const info = {
+      email: email,
+      password: password
+    }
+    console.log('admin login', info)
+    this.props.loginAdmin(info, this.props.history)
+    if(this.props.status.success) {
+      this.props.toggle('setup')
+    }
+  }
+
+  onChange = (e) => {
+    const { name, value } = e.target
+    this.setState({ [name]: value })
+  }
+
   render() {
+    const { email, password } = this.state
     return (
       <div className="login-details">
         <div className="user__data">
@@ -28,6 +58,7 @@ class Login extends Component {
                   type="email"
                   placeholder="abc@gmail.com"
                   name="email"
+                  defaultValue={email}
                   onChange={this.onChange}
                 />
               </Form.Group>
@@ -38,6 +69,7 @@ class Login extends Component {
                   type="password"
                   placeholder="***********"
                   name="password"
+                  defaultValue={password}
                   onChange={this.onChange}
                 />
               </Form.Group>
@@ -48,7 +80,7 @@ class Login extends Component {
                 type="submit"
                 variant="primary"
                 color="primary"
-                onClick={() => this.props.toggle('setup')}
+                onClick={this.loginAdmin}
               >
                 <span className="login-text">Login as an Admin</span>
               </Button>
@@ -64,4 +96,12 @@ class Login extends Component {
   }
 }
 
-export default Login;
\ No newline at end of file
+// map state to props 
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  error: state.error,
+  admin: state.admin,
+  status: state.status
+})
+
+export default connect(mapStateToProps, { loginAdmin })(withRouter(Login));
\ No newline at end of file
diff --git a/src/user/Admin/components/Register.js b/src/user/Admin/components/Register.js
index 076ff758..4bc96569 100644
--- a/src/user/Admin/components/Register.js
+++ b/src/user/Admin/components/Register.js
@@ -1,17 +1,51 @@
 import React, { Component } from 'react'
-import { Form, Button} from 'react-bootstrap'
+import { Form, Button, Row, Col } from 'react-bootstrap'
+import { connect } from 'react-redux';
+import { createAdmin } from '../../../actions/adminAction'
 
 class Register extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      login: false
-    }
+      login: false,
+      firstName: "",
+      lastName: "",
+      email: "",
+      password: "",
+      cnfPass: "",
+    };
   }
-  gotoLogin = () => {
 
+  componentWillReceiveProps(nextProps) {
+    console.log("Register admin nextProps ", nextProps);
   }
+
+  onChange = (e) => {
+    const { name, value } = e.target;
+    this.setState({ [name]: value });
+  };
+
+  registerAdmin = (e) => {
+    e.preventDefault();
+    const { firstName, lastName, email, password } = this.state;
+    const info = {
+      name: {
+        firstName: firstName,
+        lastName: lastName,
+      },
+      email: email,
+      password: password,
+      isAdmin: true,
+    };
+    console.log("registering admin", info);
+    this.props.createAdmin(info)
+    if (this.props.status.success) {
+      this.props.toggle("activate");
+    }
+  };
+
   render() {
+    const { firstName, lastName, email, password, cnfPass } = this.state;
     return (
       <div className="register-details">
         <div className="user__data">
@@ -31,21 +65,38 @@ class Register extends Component {
                   type="email"
                   placeholder="abc@gmail.com"
                   name="email"
+                  defaultValue={email}
                   onChange={this.onChange}
                 />
               </Form.Group>
-              <Form.Group controlId="formBasicEmail">
-                <Form.Label className="form__group__label">
-                  Admin Name
-                </Form.Label>
-                <Form.Control
-                  required
-                  type="text"
-                  placeholder="Enter admin name"
-                  name="name"
-                  onChange={this.onChange}
-                />
-              </Form.Group>
+              <Row>
+                <Col>
+                  <Form.Group>
+                    <Form.Label>First Name</Form.Label>
+                    <Form.Control
+                      defaultValue={firstName}
+                      type="text"
+                      placeholder="First Name"
+                      name="firstName"
+                      onChange={this.onChange}
+                      required
+                    />
+                  </Form.Group>
+                </Col>
+                <Col>
+                  <Form.Group>
+                    <Form.Label>Last Name</Form.Label>
+                    <Form.Control
+                      defaultValue={lastName}
+                      type="text"
+                      placeholder="Last Name"
+                      name="lastName"
+                      onChange={this.onChange}
+                      required
+                    />
+                  </Form.Group>
+                </Col>
+              </Row>
               <Form.Group controlId="formBasicPassword">
                 <Form.Label className="form__group__label">Password</Form.Label>
                 <Form.Control
@@ -53,6 +104,7 @@ class Register extends Component {
                   type="password"
                   placeholder="***********"
                   name="password"
+                  defaultValue={password}
                   onChange={this.onChange}
                 />
               </Form.Group>
@@ -65,6 +117,7 @@ class Register extends Component {
                   type="password"
                   placeholder="***********"
                   name="cnfPass"
+                  defaultValue={cnfPass}
                   onChange={this.onChange}
                 />
               </Form.Group>
@@ -75,13 +128,16 @@ class Register extends Component {
                 type="submit"
                 variant="primary"
                 color="primary"
-                onClick={() => this.props.toggle('activate')}
+                onClick={this.registerAdmin}
               >
                 <span className="register-text">Register as an Admin</span>
               </Button>
             </div>
-            <p className="already__account" onClick={() => this.props.toggle('login')}>
-              Don't have an account?
+            <p
+              className="already__account"
+              onClick={() => this.props.toggle("login")}
+            >
+              Already have an account?
               <span className="link"> Login</span>
             </p>
           </Form>
@@ -90,4 +146,13 @@ class Register extends Component {
     );
   }
 }
-export default Register;
+
+// map state to props 
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  error: state.error,
+  admin: state.admin,
+  status: state.status
+})
+
+export default connect(mapStateToProps, { createAdmin })(Register);
diff --git a/src/user/dashboard/Community/CommunitySetting.js b/src/user/dashboard/Community/CommunitySetting.js
index 798c75cc..044c14a0 100644
--- a/src/user/dashboard/Community/CommunitySetting.js
+++ b/src/user/dashboard/Community/CommunitySetting.js
@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import { Modal, Button} from 'react-bootstrap'
 import LeftNav from './LeftNav'
 import './community.scss'
 import OrgProfile from './components/OrgProfile';
diff --git a/src/user/dashboard/Community/LeftNav.js b/src/user/dashboard/Community/LeftNav.js
index 359a848c..fec66ca5 100644
--- a/src/user/dashboard/Community/LeftNav.js
+++ b/src/user/dashboard/Community/LeftNav.js
@@ -1,6 +1,5 @@
 import React, { Component } from "react";
-import { ListGroup, Button } from "react-bootstrap";
-import { NavLink } from "react-router-dom";
+import { ListGroup } from "react-bootstrap";
 import PropTypes from "prop-types";
 import "./navigation.scss";
 
diff --git a/src/user/dashboard/Community/components/OrgAuth.js b/src/user/dashboard/Community/components/OrgAuth.js
index df436819..4a420afc 100644
--- a/src/user/dashboard/Community/components/OrgAuth.js
+++ b/src/user/dashboard/Community/components/OrgAuth.js
@@ -33,6 +33,7 @@ class OrgAuth extends Component {
         gitlab
       }
     }
+    console.log('updating auth settings ', info);
     this.props.updateSettings(info)
   }
 
@@ -45,17 +46,25 @@ class OrgAuth extends Component {
     const { authentication } = nextProps.org.org.options;
     console.log("authentication ", authentication);
     const { email, google, github, gitlab } = authentication;
-    this.setState({ email, google, github, gitlab }, () => {
+    this.setState({
+          email,
+          google,
+          github,
+          gitlab,
+          error: nextProps.error.msg
+        }, () => {
       console.log("updated state", this.state);
     });
-    this.setState({ error: nextProps.error.msg }, () => {
-      console.log('state ', this.state)
-    })
   }
 
-
   render() {
-    const { email, github, gitlab, google, error } = this.state
+    const { 
+      email, 
+      github, 
+      gitlab, 
+      google, 
+      // error
+     } = this.state
     return (
       <div className="container">
         <div className="auth_content">
diff --git a/src/user/dashboard/Community/components/OrgPermission.js b/src/user/dashboard/Community/components/OrgPermission.js
index f8e8beef..1c564a6e 100644
--- a/src/user/dashboard/Community/components/OrgPermission.js
+++ b/src/user/dashboard/Community/components/OrgPermission.js
@@ -60,12 +60,18 @@ class OrgPermission extends Component {
   }
 
   render() {
-    const { canChangeEmail, canChangeName, sendInvite, canCreateManage, error } = this.state
+    const { 
+      canChangeEmail, 
+      canChangeName, 
+      sendInvite, 
+      canCreateManage, 
+      // error
+     } = this.state
     return (
       <div className="container">
         <div className="permission_content">
           <div className="container">
-             <p className="org_permission_text">Organization Permission</p>
+            <p className="org_permission_text">Organization Permission</p>
             <Form className="form">
               <Form.Group>
                 <Form.Label htmlFor="header_text" className="header_text">
@@ -76,14 +82,19 @@ class OrgPermission extends Component {
                 <Form.Label htmlFor="label_text" className="sub_header_text">
                   Are invitations required for joining the organization?
                 </Form.Label>
-                <Form.Control 
-                  as = "select"
-                  className = "select_option"
-                  name = "sendInvite" 
+                <Form.Control
+                  as="select"
+                  className="select_option"
+                  name="sendInvite"
+                  value={sendInvite}
                   onChange={this.onChange}
                 >
-                  <option value="BOTH">Yes. Admins and Members can send invitations</option>
-                  <option value="ADMINS">Yes. Only Admins can send invitations</option>
+                  <option value="BOTH">
+                    Yes. Admins and Members can send invitations
+                  </option>
+                  <option value="ADMINS">
+                    Yes. Only Admins can send invitations
+                  </option>
                   <option value="NONE">No one can send invitations</option>
                 </Form.Control>
               </Form.Group>
@@ -137,10 +148,30 @@ class OrgPermission extends Component {
                 >
                   Who can create and manage user groups
                 </Form.Label>
-                <Form.Control as="select" name="canCreateManage" className="select_option" onChange={this.onChange}>
-                  <option value="BOTH">Admins and Members </option>
-                  <option value="ADMINS">Only Admins</option>
-                  <option value="MEMBERS">Only Members </option>
+                <Form.Control
+                  as="select"
+                  name="canCreateManage"
+                  className="select_option"
+                  onChange={this.onChange}
+                >
+                  <option
+                    value="BOTH"
+                    selected={canCreateManage === "BOTH"}
+                  >
+                    BOTH
+                  </option>
+                  <option
+                    value="ADMINS"
+                    selected={canCreateManage === "ADMINS"}
+                  >
+                    Only Admins
+                  </option>
+                  <option
+                    value="MEMBERS"
+                    selected={canCreateManage === "MEMBERS"}
+                  >
+                    Only Members
+                  </option>
                 </Form.Control>
               </Form.Group>
               <Form.Group>
diff --git a/src/user/dashboard/Community/components/OrgProfile.js b/src/user/dashboard/Community/components/OrgProfile.js
index 264187f8..61dad877 100644
--- a/src/user/dashboard/Community/components/OrgProfile.js
+++ b/src/user/dashboard/Community/components/OrgProfile.js
@@ -12,10 +12,8 @@ class OrgProfile extends Component {
       isDeactivated: false,
       logo: null,
       orgName: "",
-      desc: {
-        short: "",
-        long: ""
-      },
+      shortDesc: "",
+      longDesc: "",
       error: ''
     }
   }
@@ -26,14 +24,9 @@ class OrgProfile extends Component {
   }
 
   componentWillReceiveProps(nextProps) {
-    console.log('nextProps ', nextProps)
     const { name, description } = nextProps.org.org;
-    let info = {
-      short: description.shortDescription,
-      long: description.longDescription,
-    };
     const { isDeactivated } = nextProps.org
-    this.setState({ orgName: name, desc: info, isDeactivated: isDeactivated }, () => {
+    this.setState({ orgName: name, shortDesc: description.shortDescription, longDesc: description.longDescription, isDeactivated: isDeactivated }, () => {
       console.log('org info ', this.state)
     })
     const { msg } = nextProps.error
@@ -42,7 +35,9 @@ class OrgProfile extends Component {
 
   handleChange = (event) => {
     const { name, value } = event.target;
-    this.setState({ [name] : value })
+    this.setState({ [name] : value }, () => {
+      console.log('state ', this.state)
+    })
   }
 
   deactivateOrg = () => {
@@ -52,15 +47,16 @@ class OrgProfile extends Component {
 
   updateInfo = () => {
     console.log('Update info clicked!');
-    const { orgName, desc } = this.state
-    const updatedInfo = {
+    const { orgName, shortDesc, longDesc } = this.state
+    const info = {
       description: {
-        shortDescription: desc.short,
-        longDescription: desc.long,
+        shortDescription: shortDesc,
+        longDescription: longDesc,
       },
       name: orgName
     };
-    this.props.updateOrgProfile(updatedInfo)
+    console.log('updatedInfo ', info)
+    this.props.updateOrgProfile(info)
   }
 
   onFileChange = (e) => {
@@ -71,7 +67,14 @@ class OrgProfile extends Component {
   }
 
   render() {
-    const { logo, orgName, desc, error, isDeactivated } = this.state;
+    const { 
+      logo, 
+      orgName, 
+      shortDesc, 
+      longDesc, 
+      // error, 
+      isDeactivated
+     } = this.state;
     return (
       <div className="container">
         <div className="profile_content">
@@ -118,13 +121,13 @@ class OrgProfile extends Component {
                 </Form.Label>
                 <Form.Control
                   as="textarea"
-                  name="shortDescription"
+                  name="shortDesc"
                   id="exampleText"
                   placeholder="Short description"
                   className="placeholder_text"
                   required={true}
                   onChange={this.handleChange}
-                  defaultValue={desc.short}
+                  defaultValue={shortDesc}
                   rows="1"
                 />
               </Form.Group>
@@ -138,7 +141,7 @@ class OrgProfile extends Component {
                   placeholder="Long description"
                   required={true}
                   className="placeholder_text"
-                  defaultValue={desc.long}
+                  defaultValue={longDesc}
                   onChange={this.handleChange}
                   name="longDesc"
                 />
@@ -176,4 +179,8 @@ const mapStateToProps = (state) => ({
   org: state.org
 })
 
-export default connect(mapStateToProps, { getOrgProfile, updateOrgProfile, deactivateOrg })(OrgProfile);
\ No newline at end of file
+export default connect(mapStateToProps, {
+   getOrgProfile, 
+   updateOrgProfile, 
+   deactivateOrg
+})(OrgProfile);
diff --git a/src/user/dashboard/Community/components/OrgSettings.js b/src/user/dashboard/Community/components/OrgSettings.js
index 638a16dd..26a939aa 100644
--- a/src/user/dashboard/Community/components/OrgSettings.js
+++ b/src/user/dashboard/Community/components/OrgSettings.js
@@ -13,7 +13,8 @@ class OrgSettings extends Component {
       enableEmail: true,
       language: "",
       time: "",
-      error: ''
+      error: '',
+      editingTime: ''
     };
   }
 
@@ -35,9 +36,10 @@ class OrgSettings extends Component {
       settings: {
         enableEmail,
         language,
-        time
-      }
+        timeFormat: time
+      },
     };
+    console.log('updating settings ', info);
     this.props.updateSettings(info)
   }
 
@@ -59,7 +61,14 @@ class OrgSettings extends Component {
   }
 
   render() {
-    const { enableEmail, language, time, error } = this.state;
+    const { 
+      enableEmail, 
+      language, 
+      time, 
+      editingTime,
+      // editing
+      // error
+     } = this.state;
     return (
       <div className="container">
         <div className="settings_content">
@@ -74,6 +83,7 @@ class OrgSettings extends Component {
                   as="select"
                   className="select_option"
                   name="editing"
+                  value={editingTime}
                   onChange={this.onChange}
                 >
                   <option value="10">Upto 10 min after posting</option>
@@ -140,11 +150,27 @@ class OrgSettings extends Component {
                   as="select"
                   name="language"
                   className="select_option"
+                  value={language}
                   onChange={this.onChange}
                 >
-                  <option value="English">English</option>
-                  <option value="French">French</option>
-                  <option value="German">German</option>
+                  <option
+                    value="English"
+                    selected={language === "English"}
+                  >
+                    English
+                  </option>
+                  <option
+                    value="French"
+                    selected={language === "French"}
+                  >
+                    French
+                  </option>
+                  <option
+                    value="German"
+                    selected={language === "German"}
+                  >
+                    German
+                  </option>
                 </Form.Control>
               </Form.Group>
               <Form.Group>
@@ -158,10 +184,19 @@ class OrgSettings extends Component {
                   as="select"
                   name="time"
                   className="select_option"
+                  value={time}
                   onChange={this.onChange}
                 >
-                  <option value="12">12 hr clock (05:00 PM)</option>
-                  <option value="24">24 hr clock (13:00)</option>
+                  <option 
+                    value="12"
+                    selected={time === "12" }
+                    >12 hr clock (05:00 PM)
+                  </option>
+                  <option 
+                    value="24"
+                    selected={time === "24" }
+                  >24 hr clock (13:00)
+                  </option>
                 </Form.Control>
               </Form.Group>
               <Form.Group>
diff --git a/src/user/dashboard/Community/components/permission.scss b/src/user/dashboard/Community/components/permission.scss
index 06da56b8..fde907e6 100644
--- a/src/user/dashboard/Community/components/permission.scss
+++ b/src/user/dashboard/Community/components/permission.scss
@@ -17,6 +17,9 @@
         border: 0.75px solid #90949C;
         background: #FFFFFF;
         box-sizing: border-box;
+        .hide {
+          display: none;
+        }
       }
       .placeholder_text {
         color: #C9C9C9;
diff --git a/src/user/dashboard/Community/components/settings.scss b/src/user/dashboard/Community/components/settings.scss
index e64bc290..4007fc7e 100644
--- a/src/user/dashboard/Community/components/settings.scss
+++ b/src/user/dashboard/Community/components/settings.scss
@@ -17,6 +17,9 @@
         border: 0.75px solid #90949C;
         background: #FFFFFF;
         box-sizing: border-box;
+        .hide {
+          display: none;
+        }
       }
       .placeholder_text {
         color: #C9C9C9;
diff --git a/src/user/dashboard/dashboard.js b/src/user/dashboard/dashboard.js
index 275ee41f..ae42e0cd 100644
--- a/src/user/dashboard/dashboard.js
+++ b/src/user/dashboard/dashboard.js
@@ -5,8 +5,8 @@ import UpcomingEvents from "./upcoming-events/upcoming-events";
 import Notifications from "./notifications/notifications";
 import Portfolio from "./portfolio/portfolio";
 import NewsFeed from "./news-feed/news-feed";
-import Updates from "./updates/updates";
-import orgUpdatesLoading from "../../placeholderLoading/orgUpdatesLoading/orgUpdatesLoading";
+// import Updates from "./updates/updates";
+// import orgUpdatesLoading from "../../placeholderLoading/orgUpdatesLoading/orgUpdatesLoading";
 import notifyUsersLoading from "../../placeholderLoading/notifyUsersLoading/notifyUsersLoading";
 import portfolioLoading from "../../placeholderLoading/portfolioLoading/portfolioLoading";
 import newsFeedLoading from "../../placeholderLoading/newsFeedLoading/newsFeedLoading";
diff --git a/src/user/dashboard/insights/components/CommunityStats.js b/src/user/dashboard/insights/components/CommunityStats.js
index 562b8d51..d2d0f69e 100644
--- a/src/user/dashboard/insights/components/CommunityStats.js
+++ b/src/user/dashboard/insights/components/CommunityStats.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react'
-import { Form, Button } from 'react-bootstrap';
+import { Button } from 'react-bootstrap';
 import './community.scss'
-import Navigation from '../../navigation/navigation';
 import { connect } from 'react-redux'
 import { getMember, getMembers, getOrgOverview, getPersonalOverview } from '../../../../actions/insightAction'
 
diff --git a/src/user/dashboard/navigation/navigation.js b/src/user/dashboard/navigation/navigation.js
index f8071de8..72ac2e12 100644
--- a/src/user/dashboard/navigation/navigation.js
+++ b/src/user/dashboard/navigation/navigation.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { ListGroup, Button,  OverlayTrigger, Tooltip } from "react-bootstrap";
+import { ListGroup, Button } from "react-bootstrap";
 import { NavLink } from "react-router-dom";
 import PropTypes from "prop-types";
 import "./navigation.scss";
@@ -11,9 +11,9 @@ import {
   DonutTitleSmall,
   DonutIconSmall,
 } from "../../../donutTitle/donutTitle";
-import ComminytPng from "../../../images/community.png";
-import CommunitySetting from "../Community/CommunitySetting";
-import { Desktop, Mobile, Default, Tablet } from "../../../utils/breakpoints";
+// import ComminytPng from "../../../images/community.png";
+// import CommunitySetting from "../Community/CommunitySetting";
+import { Desktop, Mobile } from "../../../utils/breakpoints";
 import SVGIcon from "../../../utils/SVGIcon";
 
 class Navigation extends Component {
@@ -22,13 +22,13 @@ class Navigation extends Component {
     org: false
  };
   render() {
-    function renderTooltip(props) {
-      return (
-        <Tooltip id="button-tooltip" {...props}>
-          Simple tooltip
-        </Tooltip>
-      );
-    }
+    // function renderTooltip(props) {
+    //   return (
+    //     <Tooltip id="button-tooltip" {...props}>
+    //       Simple tooltip
+    //     </Tooltip>
+    //   );
+    // }
     const ListItem = (props) => {
       const item = props.isMobile ? (
         <ListGroup.Item className={props.className}>
@@ -55,20 +55,15 @@ class Navigation extends Component {
       this.setState({
         open: false,
       });
-    // const closeOrgSetting = () => {
-    //   this.setState({
-    //     org: false
-    //   })
-    // }
-    const divStyle = {
-      position: "fixed",
-      bottom: '5em'
-    };
+    // const divStyle = {
+    //   position: "fixed",
+    //   bottom: '5em'
+    // };
     const divStyle2 = {
       position: "fixed",
       bottom: "2em"
     };
-    const { dashboard, posts, org, orgSettings,  event, proj, profile, logout, settings } = this.props;
+    const { logout } = this.props;
     return (
       <div className="main-navigation">
         <Desktop>
diff --git a/src/user/dashboard/navigation/navigation.scss b/src/user/dashboard/navigation/navigation.scss
index bde19203..03260b53 100644
--- a/src/user/dashboard/navigation/navigation.scss
+++ b/src/user/dashboard/navigation/navigation.scss
@@ -31,6 +31,14 @@
         color: #1a73e8;
       }
     }
+    span {
+      .active {
+        background-color: rgba(26, 115, 232, 0.1);
+        .link {
+          color: #1a73e8;
+        }
+      }
+    }
   }
 }
 
@@ -41,6 +49,14 @@
         color: rgba(0, 0, 0, 0.5);
       }
     }
+    span {
+      .active {
+        background-color: rgba(26, 115, 232, 0.1);
+        .link {
+          color: #1a73e8;
+        }
+      }
+    }
   }
 }
 
@@ -50,6 +66,11 @@
       svg {
         padding: 0px 10px 0px 10px;
       }
+      span {
+        svg {
+          padding: 0px;
+        }
+      }
     }
   }
 }
diff --git a/src/user/dashboard/news-feed/news-feed.js b/src/user/dashboard/news-feed/news-feed.js
index b813abae..62bde94b 100644
--- a/src/user/dashboard/news-feed/news-feed.js
+++ b/src/user/dashboard/news-feed/news-feed.js
@@ -9,7 +9,7 @@ import {
   ListItemAvatar,
   Avatar,
   ListItemText,
-  ListItemSecondaryAction,
+  // ListItemSecondaryAction,
   IconButton,
   CardMedia,
 } from "@material-ui/core";
@@ -18,17 +18,18 @@ import { Button } from "react-bootstrap";
 import AddEventModal from "./popups/AddEventModal";
 import AddProjectModal from "./popups/AddProjectModal";
 import ArrowDropUpIcon from "@material-ui/icons/ArrowDropUp";
-import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
+// import ArrowDropDownIcon from "@material-ui/icons/ArrowDropDown";
 import ChatBubbleIcon from "@material-ui/icons/ChatBubble";
-import EventNoteIcon from "@material-ui/icons/EventNote";
-import EventIcon from "@material-ui/icons/Event";
-import ReplyIcon from '@material-ui/icons/Reply';
-import feed from "../../../jsonData/news-feed";
+// import EventNoteIcon from "@material-ui/icons/EventNote";
+// import EventIcon from "@material-ui/icons/Event";
+// import ReplyIcon from '@material-ui/icons/Reply';
+// import feed from "../../../jsonData/news-feed";
 import "../../pinned-posts/posts/posts.scss";
 import "./news-feed.scss";
 import AddPostModal from "./popups/AddPostModal";
-import { Comment } from "./popups/comment";
+import Comment  from "./popups/comment";
 import { connect } from 'react-redux'
+import { getAllCommentsOfPost } from '../../../actions/commentAction'
 import profileImg from '../../../svgs/evt-creator.svg';
 import eventImg from "../../../svgs/event-img-1.svg";
 import eventImg2 from "../../../svgs/event-img-2.svg";
@@ -97,17 +98,19 @@ function NewsFeed(props) {
   const [writePost, showPostModal] = useState(false);
   const [showComment, toggle] = useState(false);
   const [commentId, setCommentId] = useState('');
-  const [all, setAll] = useState([]);
+  // const [all, setAll] = useState([]);
   const [events, setEvents] = useState([]);
   const [projects, setAllProjects] = useState([]);
   const [posts, setAllPosts] = useState([]);
+  // const [allCommentsOfPost, setAllCommentsOfPost] = useState({})
 
   useEffect(() => {
     console.log("useEffect from news-feed ", props);
     setEvents(props?.allEvents);
     setAllProjects(props?.allProjects);
     setAllPosts(props?.allPosts);
-    setAll(props?.allMix);
+    // setAll(props?.allMix);
+    // setAllCommentsOfPost(props?.comment?.allComments)
   }, [props]);
 
   let handleClick = (atrb) => () => {
@@ -141,18 +144,19 @@ function NewsFeed(props) {
 
   let commentToggle = (postId) => {
     console.log("Comment toggle clicked!", postId);
+    props.getAllCommentsOfPost(postId)
     setCommentId(postId);
     toggle(!showComment);
   }
   
-  let postContent = posts.map((post) => {
+  let postContent = posts?.map((post) => {
     return (
         <div className="grid" key={post._id}>
         <Paper elevation={1} className={classes.paper}>
           <Card className={classes.root}>
-              <CardMedia className="projimg"
+              {/* <CardMedia className="projimg"
                 image={post?.image || eventImg } title="Post Image">
-            </CardMedia>
+            </CardMedia> */}
             <List className={classes.listStyle}>
               <ListItem className={classes.listStyle2}>
                 <ListItemAvatar>
@@ -196,10 +200,6 @@ function NewsFeed(props) {
                   </Button>
                 </span>
               </ListItem>
-              <Comment
-                show={showComment && post._id === commentId}
-                onHide={toggle}
-              />
             </List>
           </Card>
         </Paper>
@@ -207,7 +207,7 @@ function NewsFeed(props) {
     )
   })
 
-  let projectsContent = projects.map((project) => {
+  let projectsContent = projects?.map((project) => {
     return (
       <div className="grid" key={project?._id}>
             <Paper elevation={1} className={classes.paper}>
@@ -269,7 +269,6 @@ function NewsFeed(props) {
                                 </Button>
                             </span>
                         </ListItem>
-                            <Comment show={showComment && project._id === commentId} onHide={toggle}/>
                     </List>
                 </Card>
             </Paper>
@@ -277,7 +276,7 @@ function NewsFeed(props) {
     )
   })
 
-  let eventsContent = events.map((event) => {
+  let eventsContent = events?.map((event) => {
     return (
        <div div className = "grid" key={event._id}>
             <Paper elevation={1} className={classes.paper}>
@@ -352,10 +351,14 @@ function NewsFeed(props) {
                                 </Button>
                             </span>
                         </ListItem> */}
-                        <Comment show={showComment && event._id === commentId} onHide={toggle}/>
                     </List>
                 </Card>
             </Paper>
+            <Comment
+                show={showComment}
+                onHide={toggle}
+                postId={commentId}
+              />
         </div>
     )
   })
@@ -463,7 +466,7 @@ function NewsFeed(props) {
               </Button>
             ) : (
               <Button
-                autofocus
+                autoFocus
                 variant="primary"
                 className="category-btn"
                 onClick={handleClick("All")}
@@ -519,7 +522,8 @@ const mapStateToProps = (state) => ({
   error: state.error,
   event: state.event,
   post: state.post,
-  status: state.status
+  status: state.status,
+  comment: state.comment
 })
 
-export default connect(mapStateToProps)(NewsFeed)
+export default connect(mapStateToProps, { getAllCommentsOfPost })(NewsFeed)
diff --git a/src/user/dashboard/news-feed/popups/AddEventModal.js b/src/user/dashboard/news-feed/popups/AddEventModal.js
index 105f46ca..fe943e38 100644
--- a/src/user/dashboard/news-feed/popups/AddEventModal.js
+++ b/src/user/dashboard/news-feed/popups/AddEventModal.js
@@ -1,4 +1,4 @@
-import React,  { useState, useEffect } from "react";
+import React,  { useState } from "react";
 import { Button, Modal, Form, Col } from "react-bootstrap";
 import PropTypes from "prop-types";
 import { connect } from 'react-redux';
@@ -30,6 +30,7 @@ const AddEventModal = (props) => {
   const onEventTime = (event) => {
     setEventTime(event.target.value)
   }
+
   const onCreateEventClick = () => {
     const obj = {
       location,
@@ -38,12 +39,15 @@ const AddEventModal = (props) => {
       description: {
         shortDescription,
         longDescription
-      }
+      },
+      eventTime: eventTime
     }
+    console.log('creating event ', obj);
     props.createEvent(obj)
     props.handleClose()
   }
 
+
   return (
     <Modal
       show={props.show}
@@ -142,7 +146,7 @@ const AddEventModal = (props) => {
         </Form>
       </Modal.Body>
       <div className="modal__buttons">
-        <Button Button onClick = {onCreateEventClick}
+        <Button onClick = {onCreateEventClick}
         className = "modal__save" >
           <span className="modal__buttontext">Save</span>
         </Button>
diff --git a/src/user/dashboard/news-feed/popups/AddPostModal.js b/src/user/dashboard/news-feed/popups/AddPostModal.js
index 652cab64..28cb4a2b 100644
--- a/src/user/dashboard/news-feed/popups/AddPostModal.js
+++ b/src/user/dashboard/news-feed/popups/AddPostModal.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import { Button, Modal, Form, Col } from "react-bootstrap";
 import PropTypes from "prop-types";
 import { connect } from 'react-redux';
@@ -60,7 +60,7 @@ const AddPostModal = (props) => {
         </Form>
       </Modal.Body>
       <div className="modal__buttons">
-        <Button Button onClick = {createPostClick.bind(this, content)} className = "modal__save" >
+        <Button onClick = {createPostClick.bind(this, content)} className = "modal__save" >
           <span className="modal__buttontext">Post</span>
         </Button>
         <Button onClick={props.onHide} className="modal__cancel">
diff --git a/src/user/dashboard/news-feed/popups/AddProjectModal.js b/src/user/dashboard/news-feed/popups/AddProjectModal.js
index b5b7a6ac..7a377ebb 100644
--- a/src/user/dashboard/news-feed/popups/AddProjectModal.js
+++ b/src/user/dashboard/news-feed/popups/AddProjectModal.js
@@ -10,6 +10,7 @@ const AddProjectModal = (props) => {
   const [long, setLongDescription] = useState("")
   const [githubLink, setGithubLink] = useState("")
   const [bitbucketLink, setBitbucketLink] = useState("")
+  const [stacks, setTechStacks] = useState("")
 
   const onProjectName = (event) => {
     setProjectName(event.target.value)
@@ -27,19 +28,28 @@ const AddProjectModal = (props) => {
     setBitbucketLink(event.target.value)
   }
 
+  const onTechStacks = (event) => {
+    const stacks = event.target.value;
+    console.log('stacks ', stacks);
+    setTechStacks(stacks)
+  }
+
   const onCreateProjectClick = () => {
-    console.log('creating project!')
+    const techStacks = stacks.split(',');
     const projectInfo = {
       projectName,
       description : {
         short,
         long
       },
+      techStacks,
       links: [{ githubLink: githubLink }, {bitbucketLink: bitbucketLink}]
     }
+    console.log('creating project!', projectInfo)
     props.createProject(projectInfo)
     props.handleClose()
   }
+
   return (
     <Modal
       show={props.show}
@@ -130,6 +140,20 @@ const AddProjectModal = (props) => {
               />
             </Form.Group>
           </Form.Row>
+          <Form.Row className="modal__row">
+            <Form.Group
+              as={Col}
+              controlId="formGridEmail"
+              className="modal__group"
+            >
+              <Form.Label className="modal__label">Tech stacks</Form.Label>
+              <Form.Control 
+                type="text" 
+                placeholder="Input tech stacks separated by comma.."
+                onChange={onTechStacks}
+              />
+            </Form.Group>
+          </Form.Row>
         </Form>
       </Modal.Body>
       <div className="modal__buttons">
diff --git a/src/user/dashboard/news-feed/popups/comment.js b/src/user/dashboard/news-feed/popups/comment.js
index d76e0256..7c2c0091 100644
--- a/src/user/dashboard/news-feed/popups/comment.js
+++ b/src/user/dashboard/news-feed/popups/comment.js
@@ -1,39 +1,74 @@
 import React, { Component } from "react";
 import { Modal, Button, Row, Col, Form } from "react-bootstrap";
+import { connect } from 'react-redux';
+import { createComment, getAllCommentsOfPost, deleteComment } from '../../../../actions/commentAction'
 import "./comment.scss";
+// import comments from "../../../../jsonData/comments";
+import profile_img from '../../../../svgs/profile-icon.svg'
+import { MdDelete } from "react-icons/md";
+import { checkDeleteRights } from '../../../dashboard/utils/checkDeleteRights'
 
-import comments from "../../../../jsonData/comments";
-export class Comment extends Component {
-  // eslint-disable-next-line
+class Comment extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      comment: "",
+      content: "",
+      allComments: [],
+      postId: '',
+      userId: ''
     };
-    this.onChange = this.onChange.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
   }
 
-  onChange(e) {
+  onChange = (e) => {
     this.setState({ [e.target.name]: e.target.value });
   }
 
-  onSubmit(e) {
+  onPost = (e) => {
     e.preventDefault();
-    const comment = this.state;
+    const { content, postId } = this.state;
+    const commentInfo = {
+      content: content
+    }
+    this.props.createComment(postId, commentInfo)
+    console.log('submitting comment ', content, postId);
+    this.setState({ content: " "})
+    this.props.onHide()
+  }
+
+  onDelete = (commentId) => {
+    console.log('deleting comment ', commentId)
+    this.props.deleteComment(commentId)
+  }
+
+  componentDidMount() {
+     const userId = JSON.stringify(localStorage.getItem("userId"));
+     console.log("checking rights ", userId);
+     this.setState({ userId: userId })
+  }
 
-    console.log(comment);
+  componentWillReceiveProps(nextProps) {
+    console.log('comment state', nextProps)
+    const { postId, comment } = nextProps
+    this.setState({ postId: postId, allComments: comment?.allComments }, () => {
+      console.log('updated comment state ', this.state)
+    })
   }
+
   render() {
-    var all_comments = comments.map((comment) => (
+    const { show, onHide } = this.props
+    const { allComments, content } = this.state
+    var all_comments = allComments.map((comment) => (
       <Row className="user_comment" id={comment._id}>
         <Col md={2}>
-          <img class="photo" src={comment.logo} alt="I"></img>
+          <img class="photo" src={profile_img || comment.userId?.image } alt="I"></img>
         </Col>
         <Col md={10}>
           <div className="contain">
-            <p className="user">{comment.name}</p>
-            <p className="comment">{comment.comment}</p>
+            <p className="user">{comment?.userId?.name?.firstName + " " + comment?.userId?.name?.lastName || "User name"}</p>
+            <p className="comment">{comment.content || "Comment content"}
+              {checkDeleteRights(comment.userId?._id) ? (<MdDelete size={20} className="delete__icon" onClick={this.onDelete.bind(this, comment._id)}
+              />) : null}
+            </p>
           </div>
         </Col>
       </Row>
@@ -41,7 +76,8 @@ export class Comment extends Component {
 
     return (
       <Modal
-        {...this.props}
+        show={show}
+        onHide={onHide}
         size="md"
         aria-labelledby="contained-modal-title-vcenter"
         centered
@@ -58,8 +94,8 @@ export class Comment extends Component {
                 <Form.Control
                   className="form-input"
                   as="textarea"
-                  name="comment"
-                  value={this.state.comment}
+                  name="content"
+                  value={content}
                   onChange={this.onChange}
                   placeholder="Write your mind here...."
                   size="sm"
@@ -68,7 +104,7 @@ export class Comment extends Component {
 
               <div className="form-footer">
                 <Button
-                  onClick={this.props.onHide}
+                  onClick={this.onPost}
                   type="submit"
                   className="savebtn"
                 >
@@ -77,10 +113,20 @@ export class Comment extends Component {
               </div>
             </Form>
             <div className="about">Other people who commented</div>
-            {all_comments}
+            {Boolean(allComments?.length > 0) ? all_comments : "Be the first to comment!"}
           </Modal.Body>
         </div>
       </Modal>
     );
   }
 }
+
+// map state to props 
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  error: state.error,
+  comment: state.comment,
+  post: state.post
+})
+
+export default connect(mapStateToProps, { getAllCommentsOfPost, createComment, deleteComment })(Comment);
diff --git a/src/user/dashboard/news-feed/popups/comment.scss b/src/user/dashboard/news-feed/popups/comment.scss
index 61308921..11edefca 100644
--- a/src/user/dashboard/news-feed/popups/comment.scss
+++ b/src/user/dashboard/news-feed/popups/comment.scss
@@ -65,6 +65,11 @@
     font-size: 0.8em;
     color: rgb(90, 84, 84);
     margin-top: -13px;   
+    max-width: 52ch;
+    .delete__icon {
+        color: rgb(82, 82, 82);
+        float: right;
+    }
 }
 
 .user_comment{
diff --git a/src/user/dashboard/portfolio/portfolio.js b/src/user/dashboard/portfolio/portfolio.js
index 42939e19..ceada520 100644
--- a/src/user/dashboard/portfolio/portfolio.js
+++ b/src/user/dashboard/portfolio/portfolio.js
@@ -37,7 +37,7 @@ class Portfolio extends Component {
   componentWillReceiveProps(nextProps) {
     const { insight, user} = nextProps
     let members = insight.allMembers
-    let admins = insight.allMembers.filter(member => member.isAdmin == true);
+    let admins = insight.allMembers.filter(member => member.isAdmin === true);
     let info = insight.personalOverview
     let followers = user.userProfile.followers
     let followings = user.userProfile.followings;
diff --git a/src/user/dashboard/upcoming-events/upcoming-events.js b/src/user/dashboard/upcoming-events/upcoming-events.js
index c5dd98e2..b61bdde1 100644
--- a/src/user/dashboard/upcoming-events/upcoming-events.js
+++ b/src/user/dashboard/upcoming-events/upcoming-events.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import "./upcoming-events.scss";
-import events from '../../../jsonData/upcoming-events';
+// import events from '../../../jsonData/upcoming-events';
 import donutIcon from '../../../svgs/donut-icon.svg'
 import { connect } from "react-redux";
 import { upcomingEvents } from '../../../actions/dashboardAction'
diff --git a/src/user/dashboard/utils/checkDeleteRights.js b/src/user/dashboard/utils/checkDeleteRights.js
new file mode 100644
index 00000000..986c9564
--- /dev/null
+++ b/src/user/dashboard/utils/checkDeleteRights.js
@@ -0,0 +1,16 @@
+export const checkDeleteRights = (userId) => {
+  const isAdmin = localStorage.getItem('admin');
+  const userLoggedIn = JSON.stringify(localStorage.getItem('userId'))
+  if(isAdmin === 'true' || userLoggedIn === JSON.stringify(userId)){
+    return true
+  }
+  return false
+}
+
+export const checkRemoveRight = () => {
+  const isAdmin = localStorage.getItem('admin')
+  if(isAdmin === 'true'){
+    return true
+  }
+  return false
+}
diff --git a/src/user/dashboard/utils/notification.js b/src/user/dashboard/utils/notification.js
index 8ad1e6aa..e59eb27a 100644
--- a/src/user/dashboard/utils/notification.js
+++ b/src/user/dashboard/utils/notification.js
@@ -1,4 +1,4 @@
- import { ToastContainer, toast } from "react-toastify";
+//  import { ToastContainer, toast } from "react-toastify";
  import "react-toastify/dist/ReactToastify.css";
 
  export const initializeSockets = (state, donutIcon, addToNotification) => {
diff --git a/src/user/events/events.js b/src/user/events/events.js
index c4e7ef6b..bba437e8 100644
--- a/src/user/events/events.js
+++ b/src/user/events/events.js
@@ -1,12 +1,15 @@
 import React, { Component } from "react";
 import Navigation from "../dashboard/navigation/navigation";
 import { Grid ,CardActions, Card} from "@material-ui/core";
-import Event_list from "../../jsonData/events";
+// import Event_list from "../../jsonData/events";
 import { Row, Col } from "react-bootstrap";
 import "./events.scss";
 import Popups from './popups/popups';
 import DeleteEvent from "./popups/DeleteEvent";
 import EditEvent from "./popups/EditEvent";
+import { connect } from 'react-redux'
+import { getAllEvents } from '../../actions/eventAction'
+import { checkDeleteRights } from '../dashboard/utils/checkDeleteRights'
 
 class Events extends Component {
   constructor(props) {
@@ -16,77 +19,101 @@ class Events extends Component {
       modalShow: false,
       optionValue: {},
       delete: false,
-      edit: false
+      edit: false, 
+      allEvents: [],
+      eventId: '',
+      singleEvent: {}
     }
   }
 
+  componentWillMount() {
+    setTimeout(() => {
+      this.props.getAllEvents()
+    })
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log('events nextProps', nextProps)
+    const { allEvents } = nextProps.event
+    this.setState({ allEvents: allEvents, isAdmin: nextProps.auth?.isAdmin }, () => {
+      console.log('updating all events ', this.state)
+    })
+  }
+
+  
   render() {
-    const setOptionValue = (targetId) => {
-        const event = Event_list.filter((x) => x._id === targetId);         
-        this.setState({optionValue: event[0]})
+    const { allEvents } = this.state
+    // const setOptionValue = (targetId) => {
+    //     const event = Event_list.filter((x) => x._id === targetId);         
+    //     this.setState({optionValue: event[0]})
+    // }
+
+    const handleToggle = (eventId, event) => {
+      console.log("-handletoggel",eventId)
+      this.setState({ modalShow: true, eventId: eventId, singleEvent: event });
+    }
+
+    const RefineDate = (d) => {
+      const date = d.split("T")
+      const eventDate = date[0].slice(-2)
+      return eventDate; 
     }
 
-    const handleToggle = (e) => {
-      const targetId = e.target.id;
-      console.log("-handletoggel",targetId)
-      this.setState({ modalShow: true });
-      setOptionValue(targetId);
+    const RefineTime = (d) => {
+      const time = d.split("T");
+      const eventTime = time[1].slice(0, 5)
+      return eventTime;
     }
     
-    var RefinedDay = (d) => {
+    const RefinedDay = (d) => {
       const day = d.slice(0, 3);
       return day;
     };
 
-    const editEvent = (e) => {
-      e.preventDefault();
-      this.setState({ modalShow: false, edit: true })
+    const RefinedYear = (d) => {
+       const month = d.slice(4, 7);
+       const year = d.slice(11, 15);
+       return month + " " + year;
+     };
+
+    const editEvent = (eventId, eventInfo) => {
+      console.log('eventId ', eventId)
+      this.setState({ modalShow: false, edit: true, eventId:  eventId, singleEvent: eventInfo })
     }
 
-    const handleDelete = (e) => {
-      this.setState({ modalShow: false, delete: true })
+    const handleDelete = (eventId) => {
+      console.log('eventId ', eventId)
+      this.setState({ modalShow: false, delete: true, eventId: eventId })
     }
 
     const cancel = () => {
       this.setState({ delete: false, edit: false })
     }
 
-    const RefinedYear = (d) => {
-      const month = d.slice(4, 7);
-      const year = d.slice(11, 15);
-      return month + " " + year;
-    };
-
   const FooterOfEvents = ({ Item }) => {
     return (
       <div className="row">
-        <DeleteEvent 
-          show={this.state.delete} 
-          onHide={cancel}
-          eventId={Item._id}
-        />
-        <EditEvent 
-          show={this.state.edit}
-          onHide={cancel}
-          eventId={Item._id}
-        />
         <div className="col-md-6 col-sm-12 col-lg-6">
           <span>
-            <a 
-              className="mr-3"
-              href="javascript: void(0)" 
-              onClick={editEvent}
-              >Edit</a>
-            <a 
-              href="javascript: void(0)"
-              onClick={handleDelete}
-              >Delete</a>
+            {checkDeleteRights(Item.createdBy._id) ? (
+            <>
+              <a 
+                className="mr-3"
+                href="javascript: void(0)" 
+                onClick={editEvent.bind(this, Item._id, Item)}
+                >Edit</a>
+              <a 
+                href="javascript: void(0)"
+                onClick={handleDelete.bind(this, Item._id)}
+                >Delete</a>
+            </>
+            ) : null }
             </span>
         </div>
         <div className="col-md-6">
           <a 
             href="javascript:void(0)" 
-            onClick={handleToggle} 
+            onClick={handleToggle.bind(this, Item._id, Item)} 
             style={{float: "right"}} 
             id={Item._id}
             >See More
@@ -96,42 +123,40 @@ class Events extends Component {
     )
   }
 
-    let Events = Event_list.map((Item, index) => (
-      <Grid item xs={6} sm={4} key={index}>
+    let Events = allEvents?.map((Item, index) => (
+      <Grid item xs = {6} sm = {4} key = {index} className = "card__container" >
         {Date.parse(Item.eventDate) >= Date.parse(new Date()) ? (
           <Card>
             <CardActions>
               <Grid container spacing={1}>
                 <Row>
-                  <Col xs={2}>
+                  <Col xs={1}>
                     {Item.isCancelled ? (
                       <div className="cancelled">{""}</div>
                     ) : (
                       <div className="div-upcoming">{""}</div>
                     )}
                   </Col>
-                  <Col sm={5} xs={12}>
-                    <div className="div2">
-                      {new Date(Date.parse(Item.eventDate)).getDate()}
-                    </div>
+                  <Col sm={3} xs={12}>
+                    <div className="div2">{RefineDate(Item?.eventDate)}</div>
                   </Col>
                   <Col sm={5} xs={12}>
                     <div className="div3">
                       {RefinedDay(
-                        new Date(Date.parse(Item.eventDate)).toString()
+                        new Date(Date.parse(Item?.eventDate)).toString()
                       )}
                       ,
                       {RefinedYear(
-                        new Date(Date.parse(Item.eventDate)).toString()
+                        new Date(Date.parse(Item?.eventDate)).toString()
                       )}
                     </div>
                   </Col>
                 </Row>
                 <div className="inside">
                   <Grid item xs={12}>
-                    <p className="eventName">{Item.eventName}</p>
+                    <p className="eventName">{Item?.eventName}</p>
                     <p className="short-des">
-                      {Item.description.shortDescription}
+                      {Item?.description?.shortDescription}
                     </p>
                   </Grid>
                   <Grid item sm={12}>
@@ -139,24 +164,24 @@ class Events extends Component {
                       Time :
                       {Item.isCancelled ? (
                         <span className="timing3">
-                          {new Date(Date.parse(Item.eventDate)).toTimeString()}
+                          {RefineTime(Item?.eventDate)}
                         </span>
                       ) : (
                         <span className="timing1">
-                          {new Date(Date.parse(Item.eventDate)).toTimeString()}
+                          {RefineTime(Item?.eventDate)}
                         </span>
                       )}
                     </p>
                   </Grid>
                   <Grid item sm={12}>
-                    {!Item.isCancelled ? (
-                      Item.isOnline ? (
+                    {!Item?.isCancelled ? (
+                      Item?.isOnline ? (
                         <p className="event-location1">
                           <span className="timing1">Online</span>
                         </p>
                       ) : (
                         <p className="event-location1">
-                          <span className="timing1">{Item.location}</span>
+                          <span className="timing1">{Item?.location}</span>
                         </p>
                       )
                     ) : (
@@ -164,9 +189,7 @@ class Events extends Component {
                     )}
                   </Grid>
                   <Grid item sm={12}>
-                    <FooterOfEvents 
-                      Item={Item} 
-                    />
+                    <FooterOfEvents Item={Item} />
                   </Grid>
                 </div>
               </Grid>
@@ -177,16 +200,16 @@ class Events extends Component {
             <CardActions>
               <Grid container spacing={1}>
                 <Row>
-                  <Col xs={2}>
-                  {Item.isCancelled ? (
-                    <div className="cancelled">{""}</div>
-                  ) : (
-                    <div className="div-past">{""}</div>
-                  )}
+                  <Col xs={1}>
+                    {Item.isCancelled ? (
+                      <div className="cancelled">{""}</div>
+                    ) : (
+                      <div className="div-past">{""}</div>
+                    )}
                   </Col>
-                  <Col sm={5} xs={12}>
+                  <Col sm={3} xs={12}>
                     <div className="div2">
-                      {new Date(Date.parse(Item.eventDate)).getDate()}
+                      {RefineDate(Item?.eventDate)}
                     </div>
                   </Col>
                   <Col sm={5} xs={12}>
@@ -213,32 +236,32 @@ class Events extends Component {
                       Time :
                       {Item.isCancelled ? (
                         <span className="timing3">
-                          {new Date(Date.parse(Item.eventDate)).toTimeString()}
+                          {RefineTime(Item?.eventDate)}
                         </span>
                       ) : (
-                        <span className="timing2">
-                          {new Date(Date.parse(Item.eventDate)).toTimeString()}
+                        <span className="timing1">
+                          {RefineTime(Item?.eventDate)}
                         </span>
                       )}
                     </p>
                   </Grid>
                   <Grid item sm={12}>
-                  {!Item.isCancelled ? (
-                    Item.isOnline ? (
-                      <p className="event-location1">
-                        <span className="timing2">Online</span>
-                      </p>
+                    {!Item.isCancelled ? (
+                      Item.isOnline ? (
+                        <p className="event-location1">
+                          <span className="timing2">Online</span>
+                        </p>
+                      ) : (
+                        <p className="event-location1">
+                          <span className="timing2">{Item.location}</span>
+                        </p>
+                      )
                     ) : (
-                      <p className="event-location1">
-                        <span className="timing2">{Item.location}</span>
-                      </p>
-                    )
-                  ) : (
-                    <p className="timing3">CANCELLED</p>
-                  )}
+                      <p className="timing3">CANCELLED</p>
+                    )}
                   </Grid>
                   <Grid item sm={12}>
-                     <FooterOfEvents Item={Item} />
+                    <FooterOfEvents Item={Item} />
                   </Grid>
                 </div>
               </Grid>
@@ -256,19 +279,37 @@ class Events extends Component {
         <div className="news events">
           <div className="container">
             <h1 className="event_header">All Events</h1>
-            <Grid container spacing={3}>
+            <Grid container spacing={3} >
               {Events}
             </Grid>
           </div>
         </div>
-        <Popups 
+        <Popups
           option={this.state.option}
           optionValue={this.state.optionValue}
           modalShow={this.state.modalShow}
+          eventInfo={this.state.singleEvent}
+        />
+        <DeleteEvent
+          show={this.state.delete}
+          onHide={cancel}
+          eventId={this.state.eventId}
+        />
+        <EditEvent
+          show={this.state.edit}
+          onHide={cancel}
+          eventId={this.state.eventId}
+          eventInfo={this.state.singleEvent}
         />
       </div>
     );
   }
 }
+// map state to props 
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  error: state.error,
+  event: state.event
+})
 
-export default Events;
+export default connect(mapStateToProps, { getAllEvents })(Events);
diff --git a/src/user/events/events.scss b/src/user/events/events.scss
index 4a7c14b8..e73b0b4f 100644
--- a/src/user/events/events.scss
+++ b/src/user/events/events.scss
@@ -14,6 +14,13 @@
           line-height: 1.3em;
           color: #2D2D2D;
         }
+        .card__container {
+          max-width: 33.33%;
+        }
+        .MuiCard-root {
+          overflow: hidden;
+          height: 42vh;
+        }
       }
   }
 } 
@@ -77,6 +84,8 @@
     width: auto;
     text-align: center;
     font-size: 1.45rem;
+    margin-left: 5vw;
+    margin-right: -12vw;
     .day{
       font-weight: 25px;
     }
@@ -100,14 +109,20 @@
 
 .short-des{
   text-align: justify;
-  text-overflow: ellipsis;
   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;
+  }
 
 .createdAt{
   text-align: center;
diff --git a/src/user/events/popups/DeleteEvent.js b/src/user/events/popups/DeleteEvent.js
index 0cc9d429..e6c0164a 100644
--- a/src/user/events/popups/DeleteEvent.js
+++ b/src/user/events/popups/DeleteEvent.js
@@ -14,8 +14,11 @@ class DeleteEvent extends Component {
     }
   }
 
-  deleteEventClick = (e) => {
-    e.preventDefault();
+  componentWillReceiveProps(nextProps){
+    console.log('deleteEvent ', nextProps)
+  }
+
+  deleteEventClick = () => {
     console.log("Clicked on delete event")
     this.props.deleteEvent(this.props.eventId);
     if(this.props.status.success){
@@ -26,7 +29,7 @@ class DeleteEvent extends Component {
   }
 
   render() {
-    const { show, onHide, eventId } = this.props;
+    const { show, onHide } = this.props;
     return (
       <div>
         <Modal
diff --git a/src/user/events/popups/EditEvent.js b/src/user/events/popups/EditEvent.js
index 2541235d..7f7084eb 100644
--- a/src/user/events/popups/EditEvent.js
+++ b/src/user/events/popups/EditEvent.js
@@ -2,7 +2,7 @@ import React, {Component} from 'react';
 import {Modal, Button, Row, Col, Form} from 'react-bootstrap';
 import "./popup.scss";
 import { connect } from 'react-redux';
-import { updateEvent, deleteEvent } from '../../../actions/eventAction';
+import { updateEvent, deleteEvent, getEventById } from '../../../actions/eventAction';
 import PropTypes from 'prop-types'
 
 
@@ -18,16 +18,50 @@ class EditEvent extends Component {
     };
   }
 
-  componentDidMount = () => {
-    // FETCH THE EVENT DETAILS ON POPUP GETS TRIGGERED (INTEGRATION)
-    console.log("Fetching the event details!");
-  };
+
+  componentWillReceiveProps(nextProps) {
+    console.log('edit ', nextProps)
+    const { eventInfo } = nextProps
+    const { eventName, description, eventDate, location } = eventInfo
+    this.setState({ 
+      eventName: eventName, 
+      shortDesc: description?.shortDescription, 
+      longDesc: description?.longDescription,
+      location: location,
+      date: eventDate
+    }, () => {
+      console.log('edit state ', this.state)
+    })
+  }
 
   onChange = (event) => {
     const { name, value } = event.target;
     this.setState({ [name]: value });
   };
 
+  refineDate = (d) => {
+    const date = d.split("T")
+    const eventDate = date[0].slice(-2)
+    return eventDate;
+  }
+
+  refineTime = (d) => {
+    const time = d.split("T");
+    const eventTime = time[1].slice(0, 5)
+    return eventTime;
+  }
+
+  refineDay = (d) => {
+    const day = d.slice(0, 3);
+    return day;
+  };
+
+  refineYear = (d) => {
+    const month = d.slice(4, 7);
+    const year = d.slice(11, 15);
+    return month + " " + year;
+  };
+
   updateEvent = (e) => {
     e.preventDefault();
     console.log("Updating the event!!");
@@ -49,7 +83,7 @@ class EditEvent extends Component {
 
   render() {
     const { show, onHide } = this.props;
-
+    const { eventName, shortDesc, longDesc, location } =this.state
     return (
       <Modal
         show={show}
@@ -75,6 +109,7 @@ class EditEvent extends Component {
                   placeholder="Event name.."
                   size="sm"
                   name="eventName"
+                  defaultValue={eventName}
                   onChange={this.onChange}
                   required={true}
                 />
@@ -88,6 +123,7 @@ class EditEvent extends Component {
                 placeholder="Write a few lines about event.."
                 size="sm"
                 name="shortDesc"
+                defaultValue={shortDesc}
                 onChange={this.onChange}
                 required={true}
               />
@@ -100,6 +136,7 @@ class EditEvent extends Component {
                 placeholder="Write a details of event.."
                 size="sm"
                 name="longDesc"
+                defaultValue={longDesc}
                 onChange={this.onChange}
                 required={true}
               />
@@ -112,6 +149,7 @@ class EditEvent extends Component {
                 placeholder="Event location.."
                 size="sm"
                 name="location"
+                defaultValue={location}
                 onChange={this.onChange}
                 required={true}
               />
@@ -124,6 +162,7 @@ class EditEvent extends Component {
                 placeholder="Event date.."
                 size="sm"
                 name="date"
+                // defaultValue={this.refineDate(date)}
                 onChange={this.onChange}
                 required={true}
               />
@@ -146,12 +185,15 @@ class EditEvent extends Component {
 EditEvent.propTypes = {
   show: PropTypes.bool.isRequired,
   onHide: PropTypes.func.isRequired,
-  eventId: PropTypes.string.isRequired
+  eventId: PropTypes.string.isRequired,
+  eventInfo: PropTypes.object.isRequired
 }
 
 const mapStateToProps = (state) => ({
+  auth: state.auth,
+  status: state.status,
   error: state.error,
-  statue: state.status
+  event: state.event
 })
 
-export default connect(mapStateToProps, { updateEvent, deleteEvent })((EditEvent))
+export default connect(mapStateToProps, { updateEvent, deleteEvent, getEventById })((EditEvent))
diff --git a/src/user/events/popups/popups.js b/src/user/events/popups/popups.js
index 7ed0cab2..39ba646d 100644
--- a/src/user/events/popups/popups.js
+++ b/src/user/events/popups/popups.js
@@ -11,13 +11,17 @@ class Popups extends Component {
     this.state = {
       show: false,
       optionValue: {},
+      eventInfo: {},
+      isCancelled: false
     };
   }
 
   componentWillReceiveProps(nextProps) {
+    console.log('popups ', nextProps)
     this.setState({
       show: nextProps.modalShow,
-      optionValue: nextProps.optionValue,
+      optionValue: nextProps?.optionValue,
+      eventInfo: nextProps?.eventInfo
     });
   }
 
@@ -25,20 +29,32 @@ class Popups extends Component {
     this.setState({ show: false });
   };
 
-  render() {
-    let {
-      eventName,
-      rsvpYes,
-      rsvpNo,
-      rsvpMaybe,
-      description,
-      slots,
-      eventDate,
-      isOnline,
-      location,
-      isCancelled,
-    } = this.state.optionValue;
+  RefineDate = (d) => {
+    const date = d.split("T")
+    const eventDate = date[0].slice(-2)
+    return eventDate;
+  }
+
+  RefineTime = (d) => {
+    const time = d.split("T");
+    const eventTime = time[1].slice(0, 5)
+    return eventTime;
+  }
+
+  RefinedDay = (d) => {
+    const day = d.slice(0, 3);
+    return day;
+  };
+
+  RefinedYear = (d) => {
+    const month = d.slice(4, 7);
+    const year = d.slice(11, 15);
+    return month + " " + year;
+  };
+
 
+  render() {
+    const { eventName, eventDate, description, location, isOnline, slots, rsvpMaybe, rsvpNo, rsvpYes } = this.state.eventInfo
     return (
       <Modal
         size="lg"
@@ -57,13 +73,13 @@ class Popups extends Component {
               </Col>
               <Col xs={6} md={4}>
                 {eventName ? (
-                  <p className="info-eventName">{eventName}</p>
+                  <p className="info-eventName">{eventName || "EventName"}</p>
                 ) : null}
               </Col>
               <Col xs={6} md={4}>
                 {slots ? (
                   <p className="info-common">
-                    Slots : <span className="info-common-no">{slots}</span>
+                    Slots : <span className="info-common-no">{slots || 0}</span>
                   </p>
                 ) : null}
               </Col>
@@ -71,21 +87,32 @@ class Popups extends Component {
             <Row className="show-grid">
               <Col xs={6} md={4}>
                 {eventDate ? (
-                  <p className="info-common">{eventDate.slice(0, 16)}</p>
+                  <p className="info-common">{this.RefineDate(eventDate)}</p>
                 ) : null}
               </Col>
               <Col xs={6} md={4}>
                 {eventDate ? (
-                  <p className="info-common">{eventDate.slice(16, 33)}</p>
+                  <p className="info-common">
+                    {" "}
+                    {this.RefinedDay(
+                      new Date(Date.parse(eventDate)).toString()
+                    )}
+                    ,
+                    {this.RefinedYear(
+                      new Date(Date.parse(eventDate)).toString()
+                    )}
+                  </p>
                 ) : null}
               </Col>
               <Col xs={6} md={4}>
-                {isCancelled ? (
+                {this.state.isCancelled ? (
                   <p className="info-cancelled">CANCELLED</p>
                 ) : { isOnline } ? (
-                  <p className="info-common">Online</p>
+                  <p className="info-common">
+                    {isOnline ? "Online" : "Offline"}
+                  </p>
                 ) : (
-                  <p className="info-common">{location}</p>
+                  <p className="info-common">{location || "Location"}</p>
                 )}
               </Col>
             </Row>
@@ -94,7 +121,7 @@ class Popups extends Component {
               <Col xs={12} md={12}>
                 {description ? (
                   <p className="info-description">
-                    {description.longDescription}
+                    {description?.longDescription}
                   </p>
                 ) : null}
               </Col>
@@ -104,7 +131,9 @@ class Popups extends Component {
                 {rsvpYes ? (
                   <p className="info-common">
                     Attending :{" "}
-                    <span className="info-common-no">{rsvpYes.length}</span>
+                    <span className="info-common-no">
+                      {rsvpYes?.length || 0}
+                    </span>
                   </p>
                 ) : null}
               </Col>
@@ -112,7 +141,9 @@ class Popups extends Component {
                 {rsvpYes ? (
                   <p className="info-common">
                     Might Attend :{" "}
-                    <span className="info-common-no">{rsvpMaybe.length}</span>
+                    <span className="info-common-no">
+                      {rsvpMaybe?.length || 0}
+                    </span>
                   </p>
                 ) : null}
               </Col>
@@ -120,7 +151,9 @@ class Popups extends Component {
                 {rsvpYes ? (
                   <p className="info-common">
                     Not Attending :{" "}
-                    <span className="info-common-no">{rsvpNo.length}</span>
+                    <span className="info-common-no">
+                      {rsvpNo?.length || 0}
+                    </span>
                   </p>
                 ) : null}
               </Col>
@@ -134,7 +167,6 @@ class Popups extends Component {
 
 Popups.propTypes = {
   modalShow: PropTypes.bool.isRequired,
-  option: PropTypes.string.isRequired,
   optionValue: PropTypes.any.isRequired,
 };
 
diff --git a/src/user/integrations/NameForm.js b/src/user/integrations/NameForm.js
index 8711590e..0753cecd 100644
--- a/src/user/integrations/NameForm.js
+++ b/src/user/integrations/NameForm.js
@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import {Modal, Button, Form, Row, Col} from 'react-bootstrap';
+import {Modal, Button, Form, Row} from 'react-bootstrap';
 import {JitsiMeet} from './Jitsi';
 import "./jitsi.scss";
 
@@ -17,7 +17,7 @@ export class Info extends Component{
         params === "user"
           ? this.setState({ user: event.target.value })
           : this.setState({ roomID: event.target.value });
-          this.setState({disable: (this.state.roomID == '' || this.state.user == '') ?
+          this.setState({disable: (this.state.roomID === '' || this.state.user === '') ?
           true : false });
       };
       closeJitsi = ()=>this.setState({
diff --git a/src/user/organization/org-contact/OrgContact.js b/src/user/organization/org-contact/OrgContact.js
index 57d162c6..5c8ac099 100644
--- a/src/user/organization/org-contact/OrgContact.js
+++ b/src/user/organization/org-contact/OrgContact.js
@@ -1,13 +1,24 @@
 import React, { Component } from "react";
 import "./org-contact.scss";
 import { Card, Avatar, CardContent } from '@material-ui/core';
+import { connect } from 'react-redux'
+import { getOrgProfile } from '../../../actions/orgAction'
 
 class OrgContact extends Component {
     constructor(props) {
         super(props);
         this.state = {
+            website: '',
+            email: '',
+            admins: [],
+            moderators: []
         };
     }
+    componentWillReceiveProps(nextProps) {
+        console.log('org contacts ', nextProps)
+        const { contactInfo } = nextProps.org?.org
+        this.setState({website: contactInfo?.website, email: contactInfo?.email })
+    }
     render() {
         return (
             <div className="contact">
@@ -25,12 +36,12 @@ class OrgContact extends Component {
                         </div>
                         <div className="email-content">
                             <p className='initial'>Website</p>
-                            <p className='info'>{this.props.website}</p>
+                            <p className='info'>{this.state.website}</p>
                             <p className='hidden'>Community</p>
                         </div>
                         <div className='email-content'>
-                            <p className="initial">Contact</p>
-                            <p className='info'>{this.props.contactinfo}</p>
+                            <p className="initial">Community email</p>
+                            <p className='info'>{this.state.email}</p>
                             <p></p>
                         </div>
                     </CardContent>
@@ -39,4 +50,10 @@ class OrgContact extends Component {
         )
     }
 }
-export default OrgContact;
+// map state to props 
+const mapStateToProps = (state) => ({
+    auth: state.auth,
+    error: state.error,
+    org: state.org
+})
+export default connect(mapStateToProps,  { getOrgProfile })(OrgContact);
diff --git a/src/user/organization/org-info/org-info.js b/src/user/organization/org-info/org-info.js
index f9c7f61b..9767fa46 100644
--- a/src/user/organization/org-info/org-info.js
+++ b/src/user/organization/org-info/org-info.js
@@ -3,24 +3,48 @@ import "./org-info.scss";
 import { Button } from "react-bootstrap";
 import { Avatar } from "@material-ui/core";
 import EditInfo from "../popups/EditInfo";
+import { connect } from 'react-redux';
+import { getOrgProfile } from '../../../actions/orgAction'
 
 class OrgInfo extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      editOrg: false
+      editOrg: false,
+      orgProfile: {}
     }
   }
+
   onEditOrg = () => {
     console.log('Edit org is clicked!')
     this.setState({ editOrg: true })
   }
+  
   closeEditPop = () => {
     console.log('Closing edit pop');
     this.setState({ editOrg: false })
   }
 
+  componentDidMount() {
+    console.log('props ', this.props)
+    // this.props.getOrgProfile()
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log('orgInfo nextProps', nextProps)
+    this.setState({ orgProfile: nextProps.org?.org }, () => {
+      console.log('updating org profile', this.state)
+    })
+  }
+
   render() {
+    const { orgProfile } = this.state
+    const { 
+      name, 
+      description, 
+      // contactInfo, 
+      createdAt
+     } = orgProfile
     return (
       <div className="org-details">
         <div className="org-image">
@@ -28,24 +52,22 @@ class OrgInfo extends Component {
             <Avatar alt="Organisation-DP" className="orgpic" src=""></Avatar>
           </div>
           <div className="edit-option">
-            <Button variant="primary" className="useredit" onClick={this.onEditOrg}>
-              User Edit
+            <Button variant="primary" className="useredit">
+              Community
             </Button>
           </div>
           <EditInfo show={this.state.editOrg} onHide={this.closeEditPop} />
         </div>
         <div className="org-data">
           <h1>
-            CodeUnio
-            <Button variant="primary" size="sm" className="org-followbtn">
+            {name || "NA" }
+            {/* <Button variant="primary" size="sm" className="org-followbtn">
               Follow
-            </Button>
+            </Button> */}
           </h1>
-          <p className="profession">Started 10 years ago</p>
-          <p className="place">584 members</p>
+          <p className="profession">Created on: {createdAt || "NA"}</p>
           <p className="desc">
-            Where millions of people gather together every day to imagine,
-            create
+            {description?.shortDescription || "Short description of org "}
           </p>
           <div className="social-icons">
             <Button variant="primary">Facebook</Button>
@@ -58,4 +80,11 @@ class OrgInfo extends Component {
   }
 }
 
-export default OrgInfo;
+// map state to props 
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  org: state.org,
+  error: state.error
+})
+
+export default connect(mapStateToProps, { getOrgProfile })(OrgInfo);
diff --git a/src/user/organization/org-info/org-info.scss b/src/user/organization/org-info/org-info.scss
index f5d8832b..46d5a5cf 100644
--- a/src/user/organization/org-info/org-info.scss
+++ b/src/user/organization/org-info/org-info.scss
@@ -42,6 +42,7 @@
       font-weight: 600;
       margin: 4px 0;
       line-height: 0%;
+      padding-bottom: 10px;
     }
     .place {
       font-family: Inter;
@@ -58,8 +59,8 @@
       font-weight: normal;
       font-size: 14px;
       line-height: 17px;
-
       color: #1d2129;
+      text-align: justify;
     }
     .social-icons {
       display: flex;
diff --git a/src/user/organization/organization.js b/src/user/organization/organization.js
index ac8480bb..8d419c3a 100644
--- a/src/user/organization/organization.js
+++ b/src/user/organization/organization.js
@@ -11,6 +11,8 @@ import topBarLoading from "../../placeholderLoading/topBarLoading/topBarLoading"
 import orgUpdatesLoading from "../../placeholderLoading/orgUpdatesLoading/orgUpdatesLoading";
 import contactLoading from "../../placeholderLoading/contactLoading/contactLoading";
 import cardLoading from "../../placeholderLoading/cardLoading/cardLoading";
+import { connect } from 'react-redux'
+import { getOrgProfile } from '../../actions/orgAction'
 
 class Organization extends Component {
   constructor(props) {
@@ -18,16 +20,31 @@ class Organization extends Component {
     this.state = {
       org: true,
       isLoading: true,
+      orgProfile: {}
     };
   }
 
   componentDidMount() {
+    setTimeout(() => {
+      this.props.getOrgProfile()
+    })
     setTimeout(() => {
       this.setState({ isLoading: false });
     }, 1000);
   }
 
+  componentWillReceiveProps(nextProps) {
+    console.log('organization ', nextProps)
+    this.setState({ orgProfile: nextProps.org?.org })
+  }
+
   render() {
+    const { orgProfile } = this.state
+    const { 
+      // name, 
+      description, 
+      // contactInfo
+    } = orgProfile
     return (
       <div className="organization">
         <div className="navigation">
@@ -47,7 +64,7 @@ class Organization extends Component {
               cardLoading()
             ) : (
               <div className="posts">
-                <h2>Posts</h2>
+                {/* <h2>Posts</h2> */}
                 <div className="categories">
                   <div className="category-type active">About Us</div>
                   <div className="category-type">Donuts</div>
@@ -56,11 +73,11 @@ class Organization extends Component {
                 </div>
                 <Card className="about-us">
                   <CardContent>
-                    <div className="title">Codeuino</div>
-                    <div className="subtitle">{orginfo.question_1}</div>
-                    <p>{orginfo.description_1}</p>
-                    <div className="subtitle">{orginfo.question_1}</div>
-                    <p>{orginfo.description_1}</p>
+                    <div className="title">{orgProfile?.name}</div>
+                    <div className="subtitle">Short description </div>
+                    <p className="short__desc">{description?.shortDescription || "Short details of organization"}</p>
+                    <div className="subtitle">About us in details</div>
+                    <p className="long__desc">{description?.longDescription || "Long description of the organization"}</p>
                   </CardContent>
                 </Card>
               </div>
@@ -94,5 +111,11 @@ class Organization extends Component {
     );
   }
 }
+// map state to props 
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  error: state.error,
+  org: state.org
+})
 
-export default Organization;
+export default connect(mapStateToProps, { getOrgProfile })(Organization);
diff --git a/src/user/organization/organization.scss b/src/user/organization/organization.scss
index b1b5e0b0..b4890be2 100644
--- a/src/user/organization/organization.scss
+++ b/src/user/organization/organization.scss
@@ -69,6 +69,15 @@
           color: black;
           font-weight: bold;
         }
+        .short__desc, .long__desc {
+           font-family: Inter;
+           font-style: normal;
+           font-weight: normal;
+           font-size: 14px;
+           line-height: 17px;
+           color: #1d2129;
+           text-align: justify;
+        }
       }
     }
     .org-updates {
diff --git a/src/user/organization/popups/Admins.js b/src/user/organization/popups/Admins.js
index cadcc061..103a022a 100644
--- a/src/user/organization/popups/Admins.js
+++ b/src/user/organization/popups/Admins.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Modal, Button, Row, Col, Image, Form } from "react-bootstrap";
+import { Modal, Button, Row, Image, Form } from "react-bootstrap";
 import { connect } from 'react-redux'
 import { removeAdmin } from '../../../actions/orgAction'
 import logo from "../../../svgs/logo-image.jpg";
@@ -64,6 +64,11 @@ class Admins extends Component {
     }
   }
 
+  onSearchClick = () => {
+    const { query } = this.state
+    this.props.getMember(query)
+  }
+
   render() {
     const { onHide, show } = this.props
     const adminList = [...this.state.admins] 
@@ -100,14 +105,17 @@ class Admins extends Component {
         <Modal.Header closeButton className="modal__header">
           <Modal.Title className="modal__title">
             <div className="modal__main-title">Administrators</div>
-            <input 
-              type="text" 
-              placeholder="Search" 
+            <input
+              type="text"
+              placeholder="Search"
               className="modal__search"
               value={this.state.query}
               onChange={this.onChange}
               onKeyPress={this.onKeyPress}
             />
+            <Button className="search_btn" onClick={this.onSearchClick}>
+              Search
+            </Button>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body className="modal__body">
diff --git a/src/user/organization/popups/EditInfo.js b/src/user/organization/popups/EditInfo.js
index 2d427faf..7d271516 100644
--- a/src/user/organization/popups/EditInfo.js
+++ b/src/user/organization/popups/EditInfo.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import { Button, Modal, Form, Col } from "react-bootstrap";
 import PropTypes from "prop-types";
 import UploadImg from '../../../images/upload.jpg'
diff --git a/src/user/organization/popups/Members.js b/src/user/organization/popups/Members.js
index c2e1f351..e4911ce1 100644
--- a/src/user/organization/popups/Members.js
+++ b/src/user/organization/popups/Members.js
@@ -1,9 +1,12 @@
 import React, { Component } from "react";
-import { Modal, Button, Row, Col, Image, Form } from "react-bootstrap";
+import { Modal, Button, Row, Image, Form } from "react-bootstrap";
 import { connect } from 'react-redux';
-import { removeUser } from '../../../actions/usersAction'
+import { removeUser, getInviteLink } from '../../../actions/usersAction'
 import { getMember } from '../../../actions/insightAction'
 import logo from "../../../svgs/logo-image.jpg";
+import { checkRemoveRight } from '../../dashboard/utils/checkDeleteRights'
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 class Members extends Component {
   constructor(props) {
@@ -11,14 +14,18 @@ class Members extends Component {
     this.state = {
       text: 'Follow',
       members: [],
-      query: ''
+      query: '',
+      isAdmin: '',
+      inviteLink: null
     }
   }
 
   onRemoveClick = (userId) => {
     console.log('Removing !', userId);
     // SEND REQUEST TO REMOVE USER WITH ID = INDEX
-    this.props.removeUser(userId)
+    if(this.state.isAdmin) {
+      this.props.removeUser(userId);
+    }
   }
 
   onChange = (e) => {
@@ -34,10 +41,21 @@ class Members extends Component {
 
   onSearchClick = () => {
     const { query } = this.state;
-    console.log('')
+    console.log('query ', query);
     this.props.getMember(query);
   }
 
+  onGetInviteLink = () => {
+    console.log('Get invite link clicked!');
+    this.props.getInviteLink();
+  }
+
+  componentDidMount() {
+    checkRemoveRight() 
+    ? this.setState({ isAdmin: true }) 
+    : this.setState({ isAdmin: false })
+  }
+
   componentWillReceiveProps(nextProps) {
     console.log('nextProps ', nextProps)
     const { query } = this.state
@@ -49,7 +67,7 @@ class Members extends Component {
       let allMembers = nextProps.insight.allMembers
       res = this.mapHelper(allMembers)
     }
-    this.setState({ members: res }, () => {
+    this.setState({ members: res, inviteLink: nextProps.user.inviteLink }, () => {
       console.log("members ", this.state);
     });
   }
@@ -64,8 +82,21 @@ class Members extends Component {
     return membersInfo
   }
 
+  copyToClipBoard = async (link) => {
+    try {
+      await navigator.clipboard.writeText(link);
+      if(this.state.inviteLink !== null){
+        toast.success('Link copied to clipboard!');
+      }
+    } catch (error) {
+      toast.error('Something went wrong!');
+      console.log('error ', error)
+    }
+  }
+
   render() {
     const { onHide, show } = this.props
+    const { isAdmin, inviteLink } = this.state
     const membersList = [ ...this.state.members] 
     let members = membersList.map((item) => (
       <Row className="modal__member" id="p1" key={item._id}>
@@ -85,7 +116,10 @@ class Members extends Component {
             onClick={this.onRemoveClick.bind(this, item._id)}
           >
             <span className="remove_followText">
-              {Boolean(item.isRemoved === true) ? (<span>Removed</span>) : (<span>Remove</span>)}
+              {Boolean(item.isRemoved === true) 
+                ? (<span>Removed</span>) 
+                : isAdmin ? (<span>Remove</span>) : (<span>New!</span>)
+              }
             </span>
           </Button>
         </div>
@@ -112,6 +146,12 @@ class Members extends Component {
               onChange={this.onChange}
               onKeyPress={this.onKeyPress}
             />
+            <Button
+              className="search_btn"
+              onClick={this.onSearchClick}
+            >
+              Search
+            </Button>
           </Modal.Title>
         </Modal.Header>
         <Modal.Body className="modal__body">
@@ -121,14 +161,17 @@ class Members extends Component {
             <h3 className="modal__mini-title">ADD MEMBER</h3>
             <div className="add__member__form">
               <Form.Label htmlFor="email" className="email__header">
-                Email
+                Get invite link
               </Form.Label>
               <div className="add__member__input__container">
                 <Form.Control
                   as="input"
-                  placeholder=" Enter their email"
+                  placeholder="Copy invite link to share"
+                  defaultValue={inviteLink}
+                  readOnly={true}
+                  onClick={this.copyToClipBoard.bind(this, inviteLink)}
                 ></Form.Control>
-                <Button className="invite__btn">Invite</Button>
+                <Button className="invite__btn" onClick={this.onGetInviteLink}>Get Link</Button>
               </div>
               <div className="share__btn__container">
                 <p className="share__text">or share invite on</p>
@@ -139,6 +182,17 @@ class Members extends Component {
             </div>
           </div>
         </Modal.Body>
+        <ToastContainer
+            position="top-right"
+            autoClose={5000}
+            hideProgressBar={false}
+            newestOnTop={false}
+            closeOnClick
+            rtl={false}
+            pauseOnFocusLoss
+            draggable
+            pauseOnHover
+          />
       </Modal>
     );
   }
@@ -152,4 +206,4 @@ const mapStateToProps = (state) => ({
   status: state.status
 })
 
-export default connect(mapStateToProps, { removeUser, getMember })(Members);
\ No newline at end of file
+export default connect(mapStateToProps, { removeUser, getMember, getInviteLink })(Members);
\ No newline at end of file
diff --git a/src/user/pinned-posts/pinned-posts.js b/src/user/pinned-posts/pinned-posts.js
index ce5f0c88..2b48de2c 100644
--- a/src/user/pinned-posts/pinned-posts.js
+++ b/src/user/pinned-posts/pinned-posts.js
@@ -1,10 +1,10 @@
 import React, { Component } from "react";
 import "./pinned-posts.scss";
 import Navigation from "../dashboard/navigation/navigation";
-import Updates from "../dashboard/updates/updates";
+// import Updates from "../dashboard/updates/updates";
 import PinPosts from "../pinned-posts/posts/pinPosts";
 import pinnedPostsLoading from "../../placeholderLoading/pinnedPostsLoading/pinnedPostsLoading";
-import orgUpdatesLoading from "../../placeholderLoading/orgUpdatesLoading/orgUpdatesLoading";
+// import orgUpdatesLoading from "../../placeholderLoading/orgUpdatesLoading/orgUpdatesLoading";
 
 class PinnedPosts extends Component {
   constructor(props) {
diff --git a/src/user/pinned-posts/posts/pinPosts.js b/src/user/pinned-posts/posts/pinPosts.js
index cc6b1ec4..c8ac8fad 100644
--- a/src/user/pinned-posts/posts/pinPosts.js
+++ b/src/user/pinned-posts/posts/pinPosts.js
@@ -1,22 +1,35 @@
 import React , { useState, useEffect } from 'react';
-import {List, Card, Button, Paper, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, IconButton, CardMedia} from '@material-ui/core';
+import {
+    List, 
+    Card,
+    Button, 
+    Paper, 
+    ListItem, 
+    ListItemAvatar, 
+    Avatar, 
+    ListItemText, 
+    // ListItemSecondaryAction, 
+    IconButton, 
+    CardMedia
+} from '@material-ui/core';
 import { makeStyles } from '@material-ui/core/styles';
-import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
+// import MoreHorizIcon from '@material-ui/icons/MoreHoriz';
 import ArrowDropUpIcon from '@material-ui/icons/ArrowDropUp';
-import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+// import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
 import ChatBubbleIcon from '@material-ui/icons/ChatBubble';
-import EventNoteIcon from '@material-ui/icons/EventNote';
-import EventIcon from '@material-ui/icons/Event';
-import feed from '../../../jsonData/news-feed';
-import ReplyIcon from '@material-ui/icons/Reply';
+// import EventNoteIcon from '@material-ui/icons/EventNote';
+// import EventIcon from '@material-ui/icons/Event';
+// import feed from '../../../jsonData/news-feed';
+// import ReplyIcon from '@material-ui/icons/Reply';
 import { connect } from 'react-redux'
 import { getEventsCreatedByUser, getProjectCreatedByUser } from '../../../actions/usersAction'
 import "./posts.scss";
-import { Comment } from '../../dashboard/news-feed/popups/comment';
+import Comment from '../../dashboard/news-feed/popups/comment';
 import { withRouter } from 'react-router-dom';
 import profileImg from '../../../svgs/evt-creator.svg';
 import eventImg from "../../../svgs/event-img-1.svg";
 import eventImg2 from "../../../svgs/event-img-2.svg";
+import { getAllPinnedPosts } from '../../../actions/postAction'
 
 const styles = makeStyles((theme) => ({
     root: {
@@ -75,7 +88,7 @@ function PinPosts(props){
     const [first, second] = useState('f');
     const [showComment, toggle] = useState(false);
     const [commentId, setCommentId] = useState('');
-    const [all, setAll] = useState([])
+    // const [all, setAll] = useState([])
     const [userEvents, setEvents] = useState([])
     const [userPosts, setPosts] = useState([])
     const [userProjects, setAllProjects] = useState([])
@@ -83,15 +96,19 @@ function PinPosts(props){
     useEffect(() => {
         console.log('props from PinPosts ', props)
         if(props.match?.path === '/pinned-posts') {
-            console.log('fetch all the pinned posts!')
+            console.log('fetch all the pinned posts!', props)
+            props.getAllPinnedPosts()
+            setTimeout(() => {
+                setPosts(props.posts?.pinnedPosts);
+            })
         }
         // debugger;
         if(props.match?.path === '/profile'){
             setEvents(props.userEvents)
             setAllProjects(props.userProjects || [])
             setPosts(props.userPosts)
-            let all = [...userEvents, ...userProjects, ...userPosts]
-            setAll(all)
+            // let all = [...userEvents, ...userProjects, ...userPosts]
+            // setAll(all)
         }
     }, [props])
     
@@ -108,7 +125,7 @@ function PinPosts(props){
         toggle(!showComment);
     }
 
-    let userProjectsContent = userProjects.map((newsItem) => {
+    let userProjectsContent = userProjects?.map((newsItem) => {
         return (
             <div className="grid" key={newsItem?._id}>
             <Paper elevation={1} className={classes.paper}>
@@ -133,7 +150,7 @@ function PinPosts(props){
                                 </Avatar>
                             </ListItemAvatar>
                             <ListItemText className="main">
-                                <h2>{newsItem?.createdBy?.name?.firstName + " " + newsItem?.createdBy?.name?.lastName}</h2>
+                                <h2>{newsItem?.createdBy?.name?.firstName + " " + newsItem?.createdBy?.name?.lastName || "No Name"}</h2>
                                 <small>{newsItem?.createdAt}</small>
                             </ListItemText>
                             {/* <ListItemSecondaryAction>
@@ -178,7 +195,7 @@ function PinPosts(props){
         )
     })
 
-    let userEventsContent = userEvents.map((newsItem, index) => {
+    let userEventsContent = userEvents?.map((newsItem, index) => {
         return (
             <div div className = "grid" key={index}>
             <Paper elevation={1} className={classes.paper}>
@@ -261,14 +278,14 @@ function PinPosts(props){
         )
     });
 
-    let userPostsContent = userPosts.map((newsItem, index) => {
+    let userPostsContent = userPosts?.map((newsItem, index) => {
         return (
           <div className="grid" key={index}>
             <Paper elevation={1} className={classes.paper}>
               <Card className={classes.root}>
-                  <CardMedia className="projimg"
+                  {/* <CardMedia className="projimg"
                     image={newsItem?.image || eventImg } title="Post Image">
-                </CardMedia>
+                </CardMedia> */}
                 <List className={classes.listStyle}>
                   <ListItem className={classes.listStyle2}>
                     <ListItemAvatar>
@@ -372,7 +389,8 @@ const mapStateToProps = (state) => ({
     auth: state.auth,
     error: state.error,
     user: state.user,
-    status: state.status
+    status: state.status,
+    posts: state.post
 })
 
-export default connect(mapStateToProps , { getEventsCreatedByUser, getProjectCreatedByUser })(withRouter(PinPosts));
\ No newline at end of file
+export default connect(mapStateToProps , { getEventsCreatedByUser, getProjectCreatedByUser, getAllPinnedPosts })(withRouter(PinPosts));
\ No newline at end of file
diff --git a/src/user/pinned-posts/posts/posts.js b/src/user/pinned-posts/posts/posts.js
index 6abaa5d3..4d9f530f 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 userIcon2 from "../../../images/gsoc.png";
+import gsoc from "../../../images/gsoc.png";
 
 class Posts extends Component {
   state = { date: new Date() };
diff --git a/src/user/profile/popups/EditProfile.js b/src/user/profile/popups/EditProfile.js
index 90ef3146..7d6ff760 100644
--- a/src/user/profile/popups/EditProfile.js
+++ b/src/user/profile/popups/EditProfile.js
@@ -27,7 +27,7 @@ class EditProfile extends Component {
 
   onSave = (e) => {
     e.preventDefault();
-    const { firstName, lastName, designation, location, website, github, shortDesc, longDesc } = this.state
+    const { firstName, lastName, designation, location, website, shortDesc, longDesc } = this.state
     const info = {
       name: {
         firstName,
@@ -66,7 +66,7 @@ class EditProfile extends Component {
 
   render() {
     const { borderStyle, onHide, show } = this.props
-    const { firstName, lastName, shortDesc, location, github, linkedIn, fb, designation, website, longDesc } = this.state
+    const { firstName, lastName, shortDesc, location, designation, website, longDesc } = this.state
      return (
        <Modal onHide={onHide} show={show} className="modal">
          <Modal.Header
diff --git a/src/user/profile/popups/Followers.js b/src/user/profile/popups/Followers.js
index dbff4437..56a73813 100644
--- a/src/user/profile/popups/Followers.js
+++ b/src/user/profile/popups/Followers.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Modal, Button, Row, Col, Image } from "react-bootstrap";
+import { Modal, Button, Row, Image } from "react-bootstrap";
 import PropTypes from 'prop-types';
 import logo from "../../../svgs/logo-image.jpg";
 import { connect } from 'react-redux'
@@ -10,83 +10,115 @@ class Followers extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      text: 'Follow',
+      text: "Follow",
       followings: [],
-      status: false
-    }
+      status: false,
+      query: "",
+    };
   }
 
   follow = (userId) => {
-    console.log('started following user ', userId)
-    this.props.followUser(userId)
-  }
+    console.log("started following user ", userId);
+    this.props.followUser(userId);
+  };
 
   unFollow = (userId) => {
-    console.log('started unfollowing ', userId)
-    this.props.unFollowUser(userId)
-  }
+    console.log("started unfollowing ", userId);
+    this.props.unFollowUser(userId);
+  };
 
   checkFollowing = (userId = 0) => {
-    let followingArray = this.state.followings.map(follow => follow._id)
-    let isFollowing = followingArray.includes(userId) ? true : false
-    console.log('isFollowing ', isFollowing)
-    return isFollowing
-  }
+    let followingArray = this.state.followings.map((follow) => follow._id);
+    let isFollowing = followingArray.includes(userId) ? true : false;
+    console.log("isFollowing ", isFollowing);
+    return isFollowing;
+  };
 
   onFollowUnFollowClick = (userId, text) => {
-    console.log('userId text ', userId + " " + text)
-    if(text === 'Follow') {
-      this.follow(userId)
+    console.log("userId text ", userId + " " + text);
+    if (text === "Follow") {
+      this.follow(userId);
     }
-    if(text === 'UnFollow') {
-      this.unFollow(userId)
+    if (text === "UnFollow") {
+      this.unFollow(userId);
     }
-  }
+  };
+
+  onChange = (e) => {
+    this.setState({ query: e.target.value });
+  };
+
+  // onKeyPress = (e) => {
+  //   console.log("event ", e.key);
+  //   if (e.key === "Enter") {
+  //     this.onSearchClick();
+  //   }
+  // };
+
+  // onSearchClick = () => {
+  //   const { query } = this.state;
+  //   console.log("query ", query);
+  //   this.props.getMember(query);
+  // };
 
   componentWillReceiveProps(nextProps) {
-    console.log('nextProps ', nextProps)
-    this.setState({ followings: nextProps.followings })
+    console.log("nextProps ", nextProps);
+    this.setState({ followings: nextProps.followings });
   }
 
   render() {
-    const { borderStyle, onHide, followers, followings, show } = this.props
-    let followersList = []
-    
-    if(followers && followers.length > 0) {
+    const { borderStyle, onHide, followers, show } = this.props;
+    // const { query } = this.state;
+    let followersList = [];
+
+    if (followers && followers.length > 0) {
       for (const follower in followers) {
-        let tempObj = {}
-        tempObj.name = followers[follower].name.firstName + ' ' + followers[follower].name.lastName;
-        tempObj.desg = followers[follower].info.about.designation || 'NA';
-        tempObj._id = followers[follower]._id
-        this.checkFollowing(tempObj._id) ? tempObj.text = 'UnFollow' : tempObj.text = 'Follow'
-        followersList.push(tempObj)
+        let tempObj = {};
+        tempObj.name =
+          followers[follower].name.firstName +
+          " " +
+          followers[follower].name.lastName;
+        tempObj.desg = followers[follower].info.about.designation || "NA";
+        tempObj._id = followers[follower]._id;
+        this.checkFollowing(tempObj._id)
+          ? (tempObj.text = "UnFollow")
+          : (tempObj.text = "Follow");
+        followersList.push(tempObj);
       }
     }
 
-
     let followersContent = followersList.map((item) => (
       <Row className="modal__follower" id="p1" key={item._id}>
         <div className="follower__image">
-          <Image
-            className="modal__followerPhoto"
-            src={logo}
-            alt="I"
-            rounded
-          />
+          <Image className="modal__followerPhoto" src={logo} alt="I" rounded />
         </div>
         <div className="follower__content">
           <span className="modal__followerName">{item.name}</span>
-          <span className="modal__followerDescription">
-            {item.desg}
-          </span>
+          <span className="modal__followerDescription">{item.desg}</span>
         </div>
         <div className="follower__btn__container">
-          <Button className={Boolean(item.text === 'Follow') ? 'modal__followButton' : 'modal__unFollowButton'} variant="outline-primary" onClick={this.onFollowUnFollowClick.bind(this, item._id, item.text)}>
-            <span className={Boolean(item.text === 'Follow') ? 'modal__followText' : 'modal__unFollowText'}>{item.text}</span>
+          <Button
+            className={
+              Boolean(item.text === "Follow")
+                ? "modal__followButton"
+                : "modal__unFollowButton"
+            }
+            variant="outline-primary"
+            onClick={this.onFollowUnFollowClick.bind(this, item._id, item.text)}
+          >
+            <span
+              className={
+                Boolean(item.text === "Follow")
+                  ? "modal__followText"
+                  : "modal__unFollowText"
+              }
+            >
+              {item.text}
+            </span>
           </Button>
         </div>
-    </Row>
-    ))
+      </Row>
+    ));
     return (
       <Modal
         onHide={onHide}
@@ -100,7 +132,17 @@ class Followers extends Component {
         <Modal.Header closeButton className="modal__header">
           <Modal.Title className="modal__title">
             <div className="modal__main-title">Followers</div>
-            <input type="text" placeholder="Search" className="modal__search" />
+            {/* <input
+              type="text"
+              placeholder="Search"
+              className="modal__search"
+              value={query}
+              onChange={this.onChange}
+              onKeyPress={this.onKeyPress}
+            />
+            <Button className="search_btn" onClick={this.onSearchClick}>
+              Search
+            </Button> */}
           </Modal.Title>
         </Modal.Header>
         <Modal.Body className="modal__body">
diff --git a/src/user/profile/profile.js b/src/user/profile/profile.js
index eb2e044d..bcdbac2e 100644
--- a/src/user/profile/profile.js
+++ b/src/user/profile/profile.js
@@ -4,9 +4,10 @@ import Navigation from "../dashboard/navigation/navigation";
 import UserInfo from "./user-info/user-info";
 import Portfolio from "../dashboard/portfolio/portfolio";
 import PinPosts from "../pinned-posts/posts/pinPosts";
-import Updates from "../dashboard/updates/updates";
+// import Updates from "../dashboard/updates/updates";
 import { connect } from 'react-redux'
 import { getProfile, getEventsCreatedByUser, getProjectCreatedByUser, getPostsCreatedByUser } from '../../actions/usersAction' 
+import { getAllPinnedPosts } from '../../actions/postAction'
 
 class Profile extends Component {
   constructor(props) {
@@ -17,7 +18,8 @@ class Profile extends Component {
       all: [],
       userEvents: [],
       userProjects: [],
-      userPosts: []
+      userPosts: [],
+      pinnedPosts: []
     };
   }
 
@@ -38,15 +40,20 @@ class Profile extends Component {
       setTimeout(() => {
         this.props.getProjectCreatedByUser();
       });
+      setTimeout(() => {
+        this.props.getAllPinnedPosts()
+      })
     }
   }
 
   componentWillReceiveProps(nextProps) {
     console.log("profile nextProps ", nextProps);
     const { userEvents, userProjects, userPosts } = nextProps.user;
+    const { pinnedPosts } = nextProps.posts
     console.log("userEvents ", userEvents);
     console.log("userProjects ", userProjects);
     console.log("userPosts ", userPosts);
+    console.log("pinnedPosts ", pinnedPosts)
     let all = [...userEvents, ...userProjects, ...userPosts]
     console.log("all ", all);
     this.setState({
@@ -54,12 +61,13 @@ class Profile extends Component {
       userEvents: userEvents,
       userProjects: userProjects,
       userPosts: userPosts,
+      pinnedPosts: pinnedPosts,
       all: all,
     });
   }
 
   render() {
-    const { userProfile, all, userEvents, userProjects, userPosts } = this.state;
+    const { userProfile, all, userEvents, userProjects, userPosts, pinnedPosts } = this.state;
     return (
       <div className="profile">
         <div className="navigation">
@@ -72,7 +80,13 @@ class Profile extends Component {
           </div>
           <div className="two">
             <div className="posts-profile">
-              <PinPosts all={all} userProjects={userProjects} userEvents={userEvents} userPosts={userPosts}/>
+              <PinPosts 
+                all={all} 
+                userProjects={userProjects} 
+                userEvents={userEvents} 
+                userPosts={userPosts}
+                pinnedPosts={pinnedPosts}
+              />
             </div>
             <div className="updat"></div>
           </div>
@@ -96,5 +110,6 @@ export default connect(mapStateToProps, {
   getProfile,
   getEventsCreatedByUser, 
   getProjectCreatedByUser,
-  getPostsCreatedByUser
+  getPostsCreatedByUser,
+  getAllPinnedPosts
 })(Profile);
diff --git a/src/user/profile/user-info/user-info.js b/src/user/profile/user-info/user-info.js
index 70b79649..a095ab1e 100644
--- a/src/user/profile/user-info/user-info.js
+++ b/src/user/profile/user-info/user-info.js
@@ -3,7 +3,7 @@ import "./user-info.scss";
 import { Button } from "react-bootstrap";
 import { Avatar } from "@material-ui/core";
 import EditProfile from "./../popups/EditProfile";
-import Followers from "../popups/Followers";
+// import Followers from "../popups/Followers";
 
 class UserInfo extends Component {
   constructor(props) {
@@ -33,15 +33,15 @@ class UserInfo extends Component {
   }
 
   render() {
-    const { designation, website, location, shortDesc, name } = this.state
+    const { designation, location, shortDesc, name } = this.state
     let cancel = () =>
       this.setState({
         editProfile: false,
       });
-    let cancelf = () =>
-      this.setState({
-        followersList: false,
-      });
+    // let cancelf = () =>
+    //   this.setState({
+    //     followersList: false,
+    //   });
     return (
       <div className="user-details">
         <div className="user-image">
diff --git a/src/user/projects/popups/delete-project.js b/src/user/projects/popups/delete-project.js
index b7c757bb..9c986565 100644
--- a/src/user/projects/popups/delete-project.js
+++ b/src/user/projects/popups/delete-project.js
@@ -1,11 +1,20 @@
 import React, { Component } from "react";
 import { Modal, Button } from "react-bootstrap";
+import { connect } from 'react-redux'
+import { deleteProjectById } from '../../../actions/projectAction'
+import { withRouter } from 'react-router-dom'
 
-export class DeleteProject extends Component {
+class DeleteProject extends Component {
+  onRemove = () => {
+    console.log('deleting project', this.props.projectId);
+    this.props.deleteProjectById(this.props.projectId, this.props.history);
+  }
   render() {
+    const { show, onHide } = this.props
     return (
       <Modal
-        {...this.props}
+        show={show}
+        onHide={onHide}
         aria-labelledby="contained-modal-title-vcenter"
         centered
       >
@@ -15,10 +24,20 @@ export class DeleteProject extends Component {
           </Modal.Title>
         </Modal.Header>
         <Modal.Footer>
-          <Button variant="danger">Remove</Button>
-          <Button variant="light">Keep It</Button>
+          <Button variant="danger" onClick={this.onRemove}>Remove</Button>
+          <Button variant="light" onClick={onHide}>Keep It</Button>
         </Modal.Footer>
       </Modal>
     );
   }
 }
+
+// map state to props 
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  error: state.error,
+  project: state.project
+})
+
+export default connect(mapStateToProps, { deleteProjectById })(withRouter(DeleteProject));
+
diff --git a/src/user/projects/popups/edit-project.js b/src/user/projects/popups/edit-project.js
index e5a0fa0a..79f4a1c3 100644
--- a/src/user/projects/popups/edit-project.js
+++ b/src/user/projects/popups/edit-project.js
@@ -1,43 +1,71 @@
 import React, { Component } from "react";
 import { Modal, Button, Row, Col, Form } from "react-bootstrap";
-export class EditProject extends Component {
+import { connect } from 'react-redux'
+import { updateProject } from '../../../actions/projectAction'
+
+class EditProject extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      Proj_name: "",
-      version: "",
-      short_des: "",
-      long_des: "",
-      github_link: "",
-      bitbucket_link: "",
-      host_link: "",
-      img_link: "",
+      projectName: '',
+      github_link: '',
+      bitbucket_link: '',
+      version: '',
+      long_des: '',
+      short_des: '',
+      img_link: '',
+      projectId: ''
     };
-    this.trigger = 0;
-    this.onChange = this.onChange.bind(this);
-    this.onSubmit = this.onSubmit.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
-    if (this.trigger < 1) this.setState({ ...nextProps.data });
-    this.trigger = this.trigger + 1;
+    console.log('edit nextProps ',nextProps);
+    const { projectName, description, links, version, _id, imgUrl } = nextProps.project.singleProject
+    this.setState({ 
+      projectName: projectName, 
+      long_des: description?.long, 
+      short_des: description?.short, 
+      github_link: links[0]?.githubLink ||  '', 
+      bitbucket_link: links[0]?.bitbucketLink ||  '', 
+      version: version || '',
+      img_link: imgUrl || '',
+      projectId: _id
+     },() => { 
+       console.log('edit project ', this.state)
+    });
   }
 
-  onChange(e) {
+  onChange = (e) => {
     this.setState({ [e.target.name]: e.target.value });
   }
 
-  onSubmit(e) {
-    e.preventDefault();
-    const EditProject = this.state;
-
-    console.log("Edited Project", EditProject);
+  onUpdateClick = (e) => {
+    e.preventDefault()
+    const { projectName, projectId, github_link, bitbucket_link, version, long_des, short_des, img_link} = this.state
+    const info = {
+      projectName: projectName,
+      description: {
+        long: long_des,
+        short: short_des
+      },
+      version: version,
+      links: [{
+        githubLink: github_link,
+        bitbucketLink: bitbucket_link
+      }],
+      imgUrl: img_link
+    }
+    console.log('updating project ', info)
+    this.props.updateProject(projectId, info)
   }
 
   render() {
+    const { projectName, github_link, bitbucket_link, version, short_des, long_des, img_link } = this.state
+    const { show, onHide } = this.props
     return (
       <Modal
-        {...this.props}
+        show={show}
+        onHide={onHide}
         size="md"
         aria-labelledby="contained-modal-title-vcenter"
         centered
@@ -56,8 +84,8 @@ export class EditProject extends Component {
                   <Form.Control
                     className="form-input"
                     type="text"
-                    name="Proj_name"
-                    value={this.state.Proj_name}
+                    name="projectName"
+                    value={projectName}
                     onChange={this.onChange}
                     placeholder="Type here.."
                     size="sm"
@@ -68,9 +96,9 @@ export class EditProject extends Component {
                 <Form.Label className="label">Version</Form.Label>
                 <Form.Control
                   className="form-input"
-                  type="Number"
+                  type="text"
                   name="version"
-                  value={this.state.version}
+                  value={version}
                   onChange={this.onChange}
                   size="sm"
                 />
@@ -81,7 +109,7 @@ export class EditProject extends Component {
                   className="form-input"
                   as="textarea"
                   name="short_des"
-                  value={this.state.short_des}
+                  value={short_des}
                   onChange={this.onChange}
                   placeholder="Write a brief info about the project.."
                   size="sm"
@@ -93,7 +121,7 @@ export class EditProject extends Component {
                   className="form-input"
                   as="textarea"
                   name="long_des"
-                  value={this.state.long_des}
+                  value={long_des}
                   onChange={this.onChange}
                   placeholder="Whats the project is about.."
                   size="sm"
@@ -107,9 +135,9 @@ export class EditProject extends Component {
                     className="form-input"
                     type="text"
                     name="github_link"
-                    value={this.state.github_link}
+                    value={github_link}
                     onChange={this.onChange}
-                    placeholder="GitHub Profile"
+                    placeholder="GitHub Link"
                     size="sm"
                   />
                 </Col>
@@ -119,33 +147,21 @@ export class EditProject extends Component {
                     className="form-input"
                     type="text"
                     name="bitbucket_link"
-                    value={this.state.bitbucket_link}
+                    value={bitbucket_link}
                     onChange={this.onChange}
-                    placeholder="BitBucket Profile"
+                    placeholder="BitBucket Link"
                     size="sm"
                   />
                 </Col>
               </Row>
               <Row className="form-content">
-                <Col className="p-0" sm={5}>
-                  <Form.Label className="label">Hosted URL</Form.Label>
-                  <Form.Control
-                    className="form-input"
-                    type="text"
-                    name="host_link"
-                    value={this.state.host_link}
-                    onChange={this.onChange}
-                    placeholder="Hosted Profile"
-                    size="sm"
-                  />
-                </Col>
                 <Col className="p-0" sm={5}>
                   <Form.Label className="label">Image URL</Form.Label>
                   <Form.Control
                     className="form-input"
                     type="text"
                     name="img_link"
-                    value={this.state.img_link}
+                    value={img_link}
                     onChange={this.onChange}
                     placeholder="Image link"
                     size="sm"
@@ -154,13 +170,13 @@ export class EditProject extends Component {
               </Row>
               <div className="form-footer">
                 <Button
-                  onClick={this.props.onHide}
+                  onClick={this.onUpdateClick}
                   type="submit"
                   className="savebtn"
                 >
                   Save
                 </Button>
-                <Button variant="outline-primary" onClick={this.props.onHide}>
+                <Button variant="outline-primary" onClick={onHide}>
                   Cancel
                 </Button>
               </div>
@@ -171,3 +187,13 @@ export class EditProject extends Component {
     );
   }
 }
+
+// map state to props 
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  error: state.error,
+  project: state.project
+})
+
+export default connect(mapStateToProps, { updateProject })(EditProject);
+
diff --git a/src/user/projects/proj-info/proj-info.js b/src/user/projects/proj-info/proj-info.js
index f0925a55..41a4045f 100644
--- a/src/user/projects/proj-info/proj-info.js
+++ b/src/user/projects/proj-info/proj-info.js
@@ -1,5 +1,4 @@
 import React, { Component } from "react";
-import Project_list from "../../../jsonData/projects";
 import EditIcon from '@material-ui/icons/Edit';
 import GitHubIcon from '@material-ui/icons/GitHub';
 import LanguageIcon from '@material-ui/icons/Language';
@@ -8,11 +7,14 @@ import { Card, Button, Badge, Col, Row } from "react-bootstrap";
 import "./proj-info.scss";
 import ArrowBackIcon from "@material-ui/icons/ArrowBack";
 import proj_img from "../../../images/project.png";
-import user_img from "../../../images/userIcon.jpg";
-import { EditProject } from "../popups/edit-project";
+import EditProject from "../popups/edit-project";
 import DeleteIcon from "@material-ui/icons/Delete";
-import { DeleteProject } from "../popups/delete-project";
-import { makeStyles,Grid, Fab, CardActionArea, CardActions, CardContent, CardMedia, Typography} from "@material-ui/core";
+import DeleteProject from "../popups/delete-project";
+import { makeStyles,Grid, Fab} from "@material-ui/core";
+// import { CardActionArea, CardActions, CardContent, CardMedia, Typography } from "@material-ui/core"
+import { connect } from 'react-redux'
+import { getProjectById } from '../../../actions/projectAction'
+import { checkDeleteRights } from '../../dashboard/utils/checkDeleteRights'
 
 
 class ProjInfo extends Component {
@@ -20,21 +22,47 @@ class ProjInfo extends Component {
     super(props);
     this.state = {
       proj: true,
-      editproject: false,
-      project_info: {},
+      editProject: false,
+      projectInfo: {},
+      deleteProject: false,
+      githubLink: '',
+      bitBucketLink: '',
+      techStacks: []
     };
   }
 
+  componentDidMount() {
+    console.log('project info mounted ',this.props)
+    // fetch the data from db 
+    setTimeout(() => {
+      this.props.getProjectById(this.props.match.params.id)
+    })
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log('nextProps ', nextProps)
+    const { singleProject } = nextProps.project
+    this.setState({ projectInfo: singleProject, techStacks: singleProject.techStacks }, () => {
+      console.log('updating project info state ', this.state)
+    })
+    const { links } = singleProject
+    this.setState({ githubLink: links[0]?.githubLink, bitBucketLink: links[0]?.bitBucketLink })
+  }
+
   render() {
-    let cancel = () =>
+    const { projectInfo, editProject, proj, deleteProject, githubLink, bitBucketLink, techStacks } = this.state
+
+    let cancel = () =>{
       this.setState({
-        editproject: false,
-        profile_info:{}
+        editProject: false,
       });
-      let cancel_del = () =>
+    }
+
+    let cancel_del = () => {
       this.setState({
-        deleteproject: false,
-      });
+        deleteProject: false,
+      })
+    }
 
     const useStyles = makeStyles((theme) => ({
       root: {
@@ -42,51 +70,56 @@ class ProjInfo extends Component {
       },
     }));
 
-    const useStyles2 = makeStyles({
-      root: {
-        maxWidth: 345,
-        marginTop: "20px",
-      },
-    });
+    // const useStyles2 = makeStyles({
+    //   root: {
+    //     maxWidth: 345,
+    //     marginTop: "20px",
+    //   },
+    // });
 
-    let project_info = Project_list.filter(
-      (x) => x._id === this.props.match.params.id
-    );
-    let maintainers = project_info[0].maintainers.map((item) => (
-      <Grid item xs={6} sm={4}>
-        <Card className={useStyles2.root}>
-          <CardActionArea>
-            <CardMedia component="img" className="img" image={user_img} />
-
-            <CardContent>
-              <Typography gutterBottom variant="h5" component="h2">
-                {item}
-              </Typography>
-              <Typography variant="body2" color="textSecondary" component="p">
-                Software developer in Codeuino
-              </Typography>
-            </CardContent>
-          </CardActionArea>
-          <CardActions>
-            <Button size="small" variant="light">
-              <strong>See Profile</strong>
-            </Button>
-          </CardActions>
-        </Card>
-      </Grid>
-    ));
+    // let maintainers = projectInfo?.maintainers.map((item) => (
+    //   <Grid item xs={6} sm={4}>
+    //     <Card className={useStyles2.root}>
+    //       <CardActionArea>
+    //         <CardMedia component="img" className="img" image={user_img} />
+
+    //         <CardContent>
+    //           <Typography gutterBottom variant="h5" component="h2">
+    //             {item}
+    //           </Typography>
+    //           <Typography variant="body2" color="textSecondary" component="p">
+    //             Software developer in Codeuino
+    //           </Typography>
+    //         </CardContent>
+    //       </CardActionArea>
+    //       <CardActions>
+    //         <Button size="small" variant="light">
+    //           <strong>See Profile</strong>
+    //         </Button>
+    //       </CardActions>
+    //     </Card>
+    //   </Grid>
+    // ));
+
+    let variant = ["primary", "secondary", "success", "danger", "warning", "light", "dark"]
+    const techBadge = techStacks?.map((techs, index) => (
+      <>
+        <Badge pill variant={variant[index]} key={index}>{techs}</Badge>{" "}
+      </>
+    ))
 
     return (
       <div className="organization">
         <div className="navigation">
-          <Navigation proj={this.state.proj}></Navigation>
+          <Navigation proj={proj}></Navigation>
         </div>
         <div className="news">
           <Fab
             className="back"
             href="/projects"
-            color="primary"
+            color="default"
             aria-label="add"
+            ml-2
           >
             <ArrowBackIcon />
           </Fab>
@@ -98,109 +131,91 @@ class ProjInfo extends Component {
               <div className="project-info">
                 <Row>
                   <Col sm={7}>
-                    <h1 className="proj_name">{project_info[0].Proj_name}</h1>
+                    <h1 className="proj_name">{projectInfo?.projectName}</h1>
                     <Badge variant="success">
-                      Version {project_info[0].version}
+                      Version {projectInfo?.version || "1.0.0"}
                     </Badge>{" "}
                   </Col>
 
                   <Col sm={5}>
-                    <Button variant="light" href={project_info[0].github_link}>
+                    <Button variant = "light" onClick = {() => {
+                        window.open(githubLink, '_blank')
+                      }
+                    } >
                       <GitHubIcon></GitHubIcon>
                     </Button>{" "}
-                    <Button
-                      variant="light"
-                      href={project_info[0].bitbucket_link}
-                    >
+                    <Button variant = "light" onClick = {() => {
+                          window.open(bitBucketLink, '_blank')
+                        } 
+                      }>
                       <LanguageIcon></LanguageIcon>
                     </Button>{" "}
-                    <Button
-                      variant="light"
-                      onClick={() => this.setState({ editproject: true,project_info:project_info[0] })}
-                    >
-                      <EditIcon></EditIcon>
-                    </Button>{" "}
+                    {checkDeleteRights(projectInfo.createdBy?._id) ? (
+                      <Button
+                        variant="light"
+                        onClick={() => this.setState({ editProject: true})}
+                      >
+                        <EditIcon></EditIcon>
+                      </Button>
+                    ) : null }
                     <EditProject
-                      show={this.state.editproject}
-                      data={this.state.project_info}
+                      show={editProject}
+                      data={projectInfo}
                       onHide={cancel}
                     />
-                    <Button
-                    variant="light"
-                    onClick={() => this.setState({ deleteproject: true })}
-                  >
-                    <DeleteIcon></DeleteIcon>
-                  </Button>
+                    {checkDeleteRights(projectInfo.createdBy?._id) ? (
+                      <Button
+                        variant="light"
+                        onClick={() => this.setState({ deleteProject: true })}
+                      >
+                        <DeleteIcon></DeleteIcon>
+                      </Button>
+                    ) : null}
                   <DeleteProject
-                    show={this.state.deleteproject}
+                    show={deleteProject}
                     onHide={cancel_del}
+                    projectId={this.props.match.params.id}
                   />
                     <br></br>
                     <div className="tech-stack">
-                  <Badge pill variant="primary">
-                    React
-                  </Badge>{" "}
-                  <Badge pill variant="secondary">
-                    Passport
-                  </Badge>{" "}
-                  <Badge pill variant="success">
-                    Nodejs
-                  </Badge>{" "}
-                  <Badge pill variant="danger">
-                    Bootstrap
-                  </Badge>{" "}
-                  <br></br>
-                  <Badge pill variant="warning">
-                    Mongoose
-                  </Badge>{" "}
-                  <Badge pill variant="info">
-                    JWT
-                  </Badge>{" "}
-                  <Badge pill variant="light">
-                    Material-ui
-                  </Badge>{" "}
-                  <Badge pill variant="dark">
-                    Redux
-                  </Badge>
-                </div>
+                      {techBadge}
+                    </div>
                   </Col>
                 </Row>
 
                 <p className="createAt">
-                  Created At: {project_info[0].createAt}{" "}
+                  Created At: {projectInfo?.createdAt}{" "}
                 </p>
-                <p className="short_des">{project_info[0].short_des}</p>
-                <p className="place">Updated At: {project_info[0].updatedAt}</p>
-                
-             
+                <p className="place">Updated At: {projectInfo?.updatedAt}</p>
+                <p className="short_des">{projectInfo.description?.short || "Short description"}</p>
               </div>
             </Col>
           </Row>
           <Row>
             <Col xs={12}>
               <div className="description">
-                <h1>About the Project</h1>
+                <h1>Project Details</h1>
                 <hr />
 
                 <p className="desc">
-                {project_info[0].long_des}
+                  {projectInfo.description?.long || "Long description"}
                 </p>
               </div>
             </Col>
           </Row>
 
-          <Row>
+          {/* <Row>
             <Col xs={12}>
               <div className="maintainers">
                 <h1>Maintainers</h1>
                 <hr />
               </div>
             </Col>
-          </Row>
+          </Row> */}
 
           <div className={useStyles.root}>
             <Grid container spacing={1}>
-              {maintainers}
+              {/* {maintainers} */}
             </Grid>
           </div>
         </div>
@@ -209,4 +224,11 @@ class ProjInfo extends Component {
   }
 }
 
-export default ProjInfo;
+// map state to props 
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  error: state.error,
+  project: state.project
+})
+
+export default connect(mapStateToProps, { getProjectById })(ProjInfo);
diff --git a/src/user/projects/proj-info/proj-info.scss b/src/user/projects/proj-info/proj-info.scss
index 0781ed03..376389dc 100644
--- a/src/user/projects/proj-info/proj-info.scss
+++ b/src/user/projects/proj-info/proj-info.scss
@@ -9,29 +9,29 @@
 }
 
 .proj_img{
-  height:20rem;
- width:auto; 
+  height:15rem;
+  margin-left: 1vw;
+  max-width: 23vw;
+  max-height: 42vh;
+  height: 39vh;
 }
 
-.img {
- height:20rem;
- width:auto;
-}
-
-
 .project-info {
   flex: 1;
   padding: 10px 14px;
   h1 {
-    color: #0069d9;
+    color: #2D2D2D;
     font-size: 40px;
-    font-weight: bold;
+    font-weight: 500;
     margin: 0;
     padding: 0;
   }
 
   .createAt{
-    color: #2c3e50;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: normal;
+    color: #2D2D2D;
     font-size: 12px;
     margin: 4px 0;
     padding: 0;
@@ -40,53 +40,70 @@
     margin-top: 3vh;
   }
   .short_des {
-    color: #748391;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: normal;
+    color: #2D2D2D;
     font-size: 18px;
-    font-weight: bold;
+    font-weight: 500;
     margin: 4px 0;
     padding: 0;
+    text-align: justify;
+    max-width: 80%;
   }
 
   .place {
-    color: #2c3e50;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: normal;
+    color: #2D2D2D;
     font-size: 12px;
     margin: 4px 0;
     padding: 0;
+    margin-bottom: 5%;
   }
   .desc {
-    color: #5d5d5d;
-    font-size: 14px;
-    margin: 0;
-    padding: 0;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 1.5em;
+    line-height: 1.3em;
+    color: #2D2D2D;
+    text-align: justify;
+    max-width: 83%;
   }
 }
 
 .description{
   h1{
-    color: #0069d9;
-    font-size: 30px;
+    font-family: Inter;
+    font-style: normal;
+    color: #2D2D2D;
+    font-size: 27px;
     margin: 0;
-    font-weight: bold;
+    font-weight: 500;
     padding: 0;
-    text-align: center;
+    text-align: left;
+    margin-left: 2%;
   }
  
   .desc {
-    color: #5d5d5d;
-    font-size: 14px;
-    margin: auto;
-    font-weight: 100;
-    padding: 20px;
+    font-family: Inter;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 1.2em;
+    line-height: 1.3em;
+    color: #2D2D2D;
+    margin-left: 2%;
+    max-width: 83%;
   }
-
-
-  margin-top: 2vh;
+  margin-top: 5vh;
 }
 
 
 .maintainers{
   h1{
-    color: #0069d9;
+    color: #2D2D2D;
     font-size: 30px;
     font-weight: bold;
     margin: 0;
diff --git a/src/user/projects/projects.js b/src/user/projects/projects.js
index e9c831e0..1ae4da1a 100644
--- a/src/user/projects/projects.js
+++ b/src/user/projects/projects.js
@@ -1,22 +1,40 @@
 import React, { Component } from "react";
 import "./projects.scss";
 import Navigation from "../dashboard/navigation/navigation";
-import Project_list from "../../jsonData/projects";
+// import Project_list from "../../jsonData/projects";
 import { makeStyles,Grid , Card, CardActionArea, CardActions, CardContent, CardMedia, Typography} from "@material-ui/core";
 import { Button } from "react-bootstrap";
-import Popups from "../../common/Popups";
-
+// import Popups from "../../common/Popups";
+import { connect } from 'react-redux'
+import { createProject, getAllProjects } from '../../actions/projectAction'
+import projectImage from '../../images/project.png'
 
 class Projects extends Component {
   constructor(props) {
     super(props);
     this.state = {
       proj: true,
-      deleteproject: false
+      deleteproject: false,
+      allProjects: []
     };
   }
 
+  componentDidMount() {
+    setTimeout(() => {
+      this.props.getAllProjects();
+    })
+  }
+
+  componentWillReceiveProps(nextProps) {
+    console.log('project ', nextProps)
+    const { allProjects } = nextProps.project
+    this.setState({ allProjects: allProjects }, () => {
+      console.log('projects state ', this.state)
+    })
+  }
+
   render() {
+    const { allProjects } = this.state
     const useStyles = makeStyles((theme) => ({
       root: {
         flexGrow: 1,
@@ -35,21 +53,21 @@ class Projects extends Component {
       },
     });
 
-    let Projects = Project_list.map((Item) => (
-      <Grid item xs={6} sm={4}>
+    let Projects = allProjects.map((Item, index) => (
+      <Grid item xs = {6} sm = {4} key={index} className="card__container">
         <Card className={useStyles2.root}>
           <CardActionArea>
             <CardMedia
               component="img"
               className="img"
-              image={Item.image}
+              image={Item.image || projectImage}
             />
             <CardContent>
               <Typography gutterBottom variant="h5" component="h2">
-                {Item.Proj_name}
+                {Item.projectName || "Project Name"}
               </Typography>
-              <Typography variant="body2" color="textSecondary" component="p">
-                {Item.short_des}
+              <Typography variant="body2" color="textSecondary" component="p" className="short-des">
+                {Item.description?.shortDescription || "Short description of the project"}
               </Typography>
             </CardContent>
           </CardActionArea>
@@ -68,20 +86,28 @@ class Projects extends Component {
           <Navigation proj={this.state.proj}></Navigation>
         </div>
         <div className="news projects">
+          <p id="project__header">All Projects</p>
           <div className={useStyles.root}>
-            <Grid container spacing={2}>
+            <Grid container spacing={3}>
               {Projects}
             </Grid>
           </div>
         </div>
-        <Popups
+        {/* <Popups
           option={this.state.option}
           optionValue={this.state.optionValue}
           modalShow={this.state.modalShow}
-        />
+        /> */}
       </div>
     );
   }
 }
 
-export default Projects;
+// map state to props 
+const mapStateToProps = (state) => ({
+  auth: state.auth,
+  error: state.error,
+  project: state.project
+})
+
+export default connect(mapStateToProps, { createProject, getAllProjects })(Projects);
diff --git a/src/user/projects/projects.scss b/src/user/projects/projects.scss
index 045aab75..e71ec7cd 100644
--- a/src/user/projects/projects.scss
+++ b/src/user/projects/projects.scss
@@ -8,13 +8,40 @@
     }
 
     .projects {
-        margin-top: 2vh;
+        margin-top: 5vh;
+        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%;
+        }
+
+        .MuiCard-root {
+          overflow: hidden;
+          height: 42vh;
+        }
 
         img{
-          height: 20rem;
+          height: 10rem;
           width:auto;
+          object-fit: cover;
         }
-          
       .create{
         position:fixed;
         z-index: 2;
@@ -26,5 +53,22 @@
         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;
+      }
+
     }
   }  
\ No newline at end of file
diff --git a/src/user/proposals/AdminProposalDashboard/DashboardContent/DashboardContent.js b/src/user/proposals/AdminProposalDashboard/DashboardContent/DashboardContent.js
index b1d88689..60f9dda1 100644
--- a/src/user/proposals/AdminProposalDashboard/DashboardContent/DashboardContent.js
+++ b/src/user/proposals/AdminProposalDashboard/DashboardContent/DashboardContent.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Button, Form, Col, Image } from "react-bootstrap";
+import { Button, Form, Image } from "react-bootstrap";
 import "./DashboardContent.scss";
 import userIcon2 from "../../../../images/userIcon2.jpg";
 
diff --git a/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.js b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.js
index cfa35155..df121134 100644
--- a/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.js
+++ b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionComments/DiscussionComments.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import userIcon2 from "../../../../../images/userIcon2.jpg";
+// import userIcon2 from "../../../../../images/userIcon2.jpg";
 import { Form, ListGroup } from "react-bootstrap";
 import "./DiscussionComments.scss";
 
diff --git a/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.js b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.js
index 66248bb0..f9df6d1b 100644
--- a/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.js
+++ b/src/user/proposals/ProposalDiscussion/DiscussionContent/DiscussionContent.js
@@ -1,6 +1,6 @@
 import React, { Component } from "react";
 import "./DiscussionContent.scss";
-import { Button, Container, Row, Col, Image, ListGroup } from "react-bootstrap";
+import { Button, Row, Image, ListGroup } from "react-bootstrap";
 import DiscussionComments from "./DiscussionComments/DiscussionComments";
 import eventImg from "../../../../svgs/event-img-1.svg";
 import userIcon2 from "../../../../images/userIcon2.jpg";
diff --git a/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.js b/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.js
index 9fd70fc8..032cc2b2 100644
--- a/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.js
+++ b/src/user/proposals/UserProposalDashboard/DashboardContent/DashboardContent.js
@@ -1,5 +1,5 @@
 import React, { Component } from "react";
-import { Button, Form, Col, Image } from "react-bootstrap";
+import { Button, Form, Image } from "react-bootstrap";
 import "./DashboardContent.scss";
 import userIcon2 from "../../../../images/userIcon2.jpg";
 
diff --git a/src/user/setup/Setup.js b/src/user/setup/Setup.js
index 6f44cb71..4b1d3599 100644
--- a/src/user/setup/Setup.js
+++ b/src/user/setup/Setup.js
@@ -57,7 +57,7 @@ class Setup extends Component {
 
   onFinish = () => {
     console.log('Finish message from setup page!', this.state);
-    const { communityName, shortDesc, longDesc, email, website, chatPlatform, color } = this.state
+    const { communityName, shortDesc, longDesc, email, website, chatPlatform } = this.state
     const orgObj = {
       name: communityName,
       description: {
@@ -77,7 +77,7 @@ class Setup extends Component {
 
   componentWillReceiveProps(nextProps) {
     const { msg } = nextProps.error;
-    if (msg == null || msg == undefined) {
+    if (msg == null || msg === undefined) {
       window.location.href = "/dashboard";
     } else {
       this.setState({ error: msg });
diff --git a/src/utils/SVGIcon.js b/src/utils/SVGIcon.js
index 9c22e9f5..92588610 100644
--- a/src/utils/SVGIcon.js
+++ b/src/utils/SVGIcon.js
@@ -41,18 +41,18 @@ const getPath = (name, props) => {
         <path
           d="M0 10H8V0H0V10ZM0 18H8V12H0V18ZM10 18H18V8H10V18ZM10 0V6H18V0H10Z"
           fill={props.fill}
-          fill-opacity="0.5"
+          fillOpacity="0.5"
           className="path-name"
         />
       );
     case "Pinned Posts":
       return (
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M18.8043 2.15521C16.2894 -0.592583 11.974 -0.725094 9.18483 1.82775C7.01728 3.81162 6.38726 6.85162 7.38933 9.39879L0.51388 16.6358L0.512961 16.6368C-0.117421 17.2947 -0.192773 18.2877 0.432155 18.9705C1.05658 19.6528 2.05245 19.6667 2.76255 19.0979L2.76367 19.097L10.5848 12.8875C13.0327 14.1087 16.1146 13.7488 18.2809 11.766C21.0701 9.2132 21.3195 4.90328 18.8043 2.15521ZM7.42991 7.18208C7.35949 5.37255 8.06656 3.5292 9.52241 2.19672C12.1156 -0.176716 16.1139 -0.0435814 18.4355 2.49291C19.2794 3.415 19.7875 4.52965 19.9677 5.68903C19.7875 4.52961 19.2795 3.41491 18.4355 2.49279C16.1139 -0.0437087 12.1156 -0.176843 9.52241 2.19659C8.06652 3.52911 7.35946 5.37251 7.42991 7.18208ZM0.501346 17.816C0.514476 17.5229 0.639746 17.227 0.874681 16.9821L7.97743 9.50584C7.97741 9.50581 7.9774 9.50578 7.97739 9.50575L0.874675 16.982C0.639707 17.2269 0.514446 17.5229 0.501346 17.816ZM1.3888 18.0951C1.55829 18.2802 1.80082 18.2289 1.96635 18.0964L9.84292 11.8427C9.791 11.8031 9.74144 11.7605 9.69188 11.7179C9.66833 11.6976 9.64478 11.6774 9.62098 11.6574C9.60059 11.6403 9.57995 11.6236 9.55931 11.6068C9.52355 11.5778 9.48777 11.5488 9.4532 11.5178C9.3222 11.3994 9.1965 11.2751 9.07586 11.1456C9.06899 11.1384 9.06178 11.1317 9.05458 11.125C9.04631 11.1173 9.03805 11.1096 9.03031 11.1012C9.02259 11.0927 9.01559 11.0837 9.00855 11.0747C9.00146 11.0656 8.99433 11.0565 8.9864 11.0479C8.86967 10.9174 8.75826 10.7832 8.65321 10.6437C8.62465 10.6055 8.59826 10.5664 8.57184 10.5273C8.55857 10.5077 8.5453 10.4881 8.53173 10.4685C8.51389 10.443 8.49568 10.4176 8.47749 10.3923C8.43899 10.3387 8.40052 10.2851 8.36551 10.2296L1.44021 17.5186C1.29214 17.6731 1.21959 17.9102 1.3888 18.0951Z"
           fill={props.fill}
-          fill-opacity="0.5"
+          fillOpacity="0.5"
           className="path-name"
         />
       );
@@ -61,7 +61,7 @@ const getPath = (name, props) => {
         <path
           d="M10 0C4.486 0 0 4.486 0 10C0 15.514 4.486 20 10 20C15.514 20 20 15.514 20 10C20 4.486 15.514 0 10 0ZM2 10C2 9.101 2.156 8.238 2.431 7.431L4 9L6 11V13L8 15L9 16V17.931C5.061 17.436 2 14.072 2 10ZM16.33 14.873C15.677 14.347 14.687 14 14 14V13C14 12.4696 13.7893 11.9609 13.4142 11.5858C13.0391 11.2107 12.5304 11 12 11H8V8C8.53043 8 9.03914 7.78929 9.41421 7.41421C9.78929 7.03914 10 6.53043 10 6V5H11C11.5304 5 12.0391 4.78929 12.4142 4.41421C12.7893 4.03914 13 3.53043 13 3V2.589C15.928 3.778 18 6.65 18 10C17.9998 11.7647 17.4123 13.4791 16.33 14.873Z"
           fill={props.fill}
-          fill-opacity="0.5"
+          fillOpacity="0.5"
           className="path-name"
         />
       );
@@ -70,7 +70,7 @@ const getPath = (name, props) => {
         <path
           d="M4.5 4.5C4.5 6.981 6.519 9 9 9C11.481 9 13.5 6.981 13.5 4.5C13.5 2.019 11.481 0 9 0C6.519 0 4.5 2.019 4.5 4.5ZM17 19H18V18C18 14.141 14.859 11 11 11H7C3.14 11 0 14.141 0 18V19H17Z"
           fill={props.fill}
-          fill-opacity="0.5"
+          fillOpacity="0.5"
           className="path-name"
         />
       );
@@ -79,7 +79,7 @@ const getPath = (name, props) => {
         <path
           d="M17.4298 10.98C17.4698 10.66 17.4998 10.34 17.4998 10C17.4998 9.66 17.4698 9.34 17.4298 9.02L19.5398 7.37C19.7298 7.22 19.7798 6.95 19.6598 6.73L17.6598 3.27C17.5398 3.05 17.2698 2.97 17.0498 3.05L14.5598 4.05C14.0398 3.65 13.4798 3.32 12.8698 3.07L12.4898 0.42C12.4598 0.18 12.2498 0 11.9998 0H7.99984C7.74984 0 7.53984 0.18 7.50984 0.42L7.12984 3.07C6.51984 3.32 5.95984 3.66 5.43984 4.05L2.94984 3.05C2.71984 2.96 2.45984 3.05 2.33984 3.27L0.339839 6.73C0.209839 6.95 0.26984 7.22 0.45984 7.37L2.56984 9.02C2.52984 9.34 2.49984 9.67 2.49984 10C2.49984 10.33 2.52984 10.66 2.56984 10.98L0.45984 12.63C0.26984 12.78 0.219839 13.05 0.339839 13.27L2.33984 16.73C2.45984 16.95 2.72984 17.03 2.94984 16.95L5.43984 15.95C5.95984 16.35 6.51984 16.68 7.12984 16.93L7.50984 19.58C7.53984 19.82 7.74984 20 7.99984 20H11.9998C12.2498 20 12.4598 19.82 12.4898 19.58L12.8698 16.93C13.4798 16.68 14.0398 16.34 14.5598 15.95L17.0498 16.95C17.2798 17.04 17.5398 16.95 17.6598 16.73L19.6598 13.27C19.7798 13.05 19.7298 12.78 19.5398 12.63L17.4298 10.98ZM9.99984 13.5C8.06984 13.5 6.49984 11.93 6.49984 10C6.49984 8.07 8.06984 6.5 9.99984 6.5C11.9298 6.5 13.4998 8.07 13.4998 10C13.4998 11.93 11.9298 13.5 9.99984 13.5Z"
           fill={props.fill}
-          fill-opacity="0.5"
+          fillOpacity="0.5"
           className="path-name"
         />
       );
@@ -147,20 +147,20 @@ const getPath = (name, props) => {
       return (
         <>
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M8.50214 0.402641C8.95768 0.140138 9.47421 0.00195312 10 0.00195312C10.5258 0.00195312 11.0424 0.140149 11.4979 0.402673C11.4986 0.403074 11.4993 0.403475 11.5 0.403877L18.5 4.40387C18.9556 4.66692 19.334 5.04515 19.5973 5.50062C19.8606 5.95609 19.9995 6.47279 20 6.99888V15.0009C19.9995 15.527 19.8606 16.0437 19.5973 16.4992C19.334 16.9547 18.9556 17.3329 18.5 17.5959L18.4961 17.5981L11.5 21.5959C11.4994 21.5963 11.4988 21.5966 11.4982 21.597C11.0426 21.8596 10.5259 21.9979 10 21.9979C9.4741 21.9979 8.95745 21.8596 8.50185 21.597C8.50123 21.5966 8.50062 21.5963 8.5 21.5959L1.50386 17.5981L1.5 17.5959C1.04439 17.3329 0.66597 16.9547 0.402692 16.4992C0.139414 16.0437 0.000539601 15.527 0 15.0009V6.99888C0.000539601 6.47279 0.139414 5.95609 0.402692 5.50062C0.66597 5.04515 1.04439 4.66692 1.5 4.40388L1.50386 4.40165L8.50214 0.402641ZM10 2.00195C9.82446 2.00195 9.65202 2.04816 9.5 2.13593L9.49614 2.13815L2.5 6.13593C2.49947 6.13623 2.49895 6.13654 2.49842 6.13684C2.34726 6.22448 2.22169 6.35021 2.13423 6.50151C2.04654 6.65321 2.00025 6.82528 2 7.0005V14.9993C2.00025 15.1745 2.04654 15.3466 2.13423 15.4983C2.22169 15.6496 2.34726 15.7753 2.49842 15.863C2.49895 15.8633 2.49947 15.8636 2.5 15.8639L9.5 19.8639C9.65202 19.9516 9.82446 19.9979 10 19.9979C10.1755 19.9979 10.348 19.9516 10.5 19.8639L10.5039 19.8617L17.5 15.8639C17.5005 15.8636 17.5011 15.8633 17.5016 15.863C17.6527 15.7753 17.7783 15.6496 17.8658 15.4983C17.9535 15.3465 17.9998 15.1742 18 14.9989V7.00093C17.9998 6.82556 17.9535 6.65333 17.8658 6.50151C17.7783 6.35021 17.6527 6.22449 17.5016 6.13685C17.5011 6.13654 17.5005 6.13623 17.5 6.13593L10.5 2.13594C10.348 2.04817 10.1755 2.00195 10 2.00195Z"
             fill="#1A73E8"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M0.404578 5.45916C0.68112 4.9811 1.29285 4.81773 1.77091 5.09428L10.0002 9.85462L18.2295 5.09428C18.7075 4.81773 19.3193 4.9811 19.5958 5.45916C19.8723 5.93722 19.709 6.54895 19.2309 6.82549L10.5009 11.8755C10.1911 12.0547 9.80923 12.0547 9.49946 11.8755L0.769462 6.82549C0.2914 6.54895 0.128037 5.93722 0.404578 5.45916Z"
             fill="#1A73E8"
           />
           <path
-            fill-rule="evenodd"
-            clip-rule="evenodd"
+            fillRule="evenodd"
+            clipRule="evenodd"
             d="M10 10C10.5523 10 11 10.4477 11 11V21.08C11 21.6323 10.5523 22.08 10 22.08C9.44772 22.08 9 21.6323 9 21.08V11C9 10.4477 9.44772 10 10 10Z"
             fill="black"
             fillOpacity="0.5"
diff --git a/src/utils/breakpoints.js b/src/utils/breakpoints.js
index c79cd28b..dccacc29 100644
--- a/src/utils/breakpoints.js
+++ b/src/utils/breakpoints.js
@@ -1,4 +1,3 @@
-import React, { Component } from "react";
 import { useMediaQuery } from "react-responsive";
 
 const Desktop = ({ children }) => {