diff --git a/.eslintignore b/.eslintignore
index c822d6c9ae..776a279d70 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -25,7 +25,6 @@ src/components/AutoReload/**
 src/components/AutoUpdate/**
 src/components/Badge/**
 src/components/common/**
-src/components/ForcePasswordUpdate/**
 src/components/Header/**
 src/components/Inventory/**
 src/components/Login/**
@@ -50,4 +49,6 @@ src/components/Timelog/**
 src/components/UpdatePassword/**
 src/components/UserManagement/**
 src/components/UserProfile/**
+src/components/WeeklySummary/**
+src/components/WeeklySummariesReport/**
 src/components/MouseoverText/**
diff --git a/.eslintrc.js b/.eslintrc.js
index 66841826e1..e073d2f2bd 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -50,6 +50,8 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     'import/no-duplicates': 'off',
     'import/no-named-as-default': 'off',
+    'no-alert': 'error',
+    'no-console': 'error',
   },
   overrides: [
     {
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
index bd024de74c..6de138e6ce 100644
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -1,6 +1,7 @@
 <component name="InspectionProjectProfileManager">
   <profile version="1.0">
     <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
     <inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
       <option name="myValues">
         <value>
diff --git a/.prettierignore b/.prettierignore
index aafd214ca1..719cbaf8c9 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -22,7 +22,6 @@ src/components/AutoReload/**
 src/components/AutoUpdate/**
 src/components/Badge/**
 src/components/common/**
-src/components/ForcePasswordUpdate/**
 src/components/Header/**
 src/components/Inventory/**
 src/components/Login/**
@@ -47,4 +46,6 @@ src/components/Timelog/**
 src/components/UpdatePassword/**
 src/components/UserManagement/**
 src/components/UserProfile/**
+src/components/WeeklySummary/**
+src/components/WeeklySummariesReport/**
 src/components/MouseoverText/**
diff --git a/Dockerfile b/Dockerfile
index 8e2770b994..bd987a421f 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -1,16 +1,16 @@
-# Define a imagem base
-FROM node:14-alpine
-# Set the working directory to /app
-WORKDIR /app
-# Copy the package.json and yarn.lock files to the container
-COPY package.json yarn.lock ./
-# Install dependencies
-RUN yarn install
-# Copy the rest of the app files to the container
-COPY . ./
-# Build the app
-RUN yarn build
-# Expose port 3000
-EXPOSE 3000
-# Set the startup command to run the app using Node.js
+# Define a imagem base
+FROM node:14-alpine
+# Set the working directory to /app
+WORKDIR /app
+# Copy the package.json and yarn.lock files to the container
+COPY package.json yarn.lock ./
+# Install dependencies
+RUN yarn install
+# Copy the rest of the app files to the container
+COPY . ./
+# Build the app
+RUN yarn build
+# Expose port 3000
+EXPOSE 3000
+# Set the startup command to run the app using Node.js
 CMD ["yarn", "start:local"]
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index bc7a4d3d51..90a740f9da 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14390,6 +14390,12 @@
             "lru-cache": "^6.0.0"
           }
         },
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+          "optional": true
+        },
         "which": {
           "version": "2.0.2",
           "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -19080,6 +19086,13 @@
         "faye-websocket": "^0.11.3",
         "uuid": "^8.3.2",
         "websocket-driver": "^0.7.4"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "8.3.2",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+          "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+        }
       }
     },
     "sockjs-client": {
@@ -20807,9 +20820,9 @@
       "integrity": "sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA=="
     },
     "uuid": {
-      "version": "8.3.2",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
-      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz",
+      "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA=="
     },
     "v8-compile-cache": {
       "version": "2.3.0",
diff --git a/package.json b/package.json
index f69c6360bc..21282445fa 100644
--- a/package.json
+++ b/package.json
@@ -69,6 +69,7 @@
     "redux-persist": "^5.10.0",
     "redux-thunk": "^2.3.0",
     "tinymce": "^5.10.7",
+    "uuid": "^9.0.1",
     "websocket-extensions": ">=0.1.4"
   },
   "scripts": {
diff --git a/src/__tests__/Teams/TeamMembersPopup.test.js b/src/__tests__/Teams/TeamMembersPopup.test.js
new file mode 100644
index 0000000000..67361a8bcb
--- /dev/null
+++ b/src/__tests__/Teams/TeamMembersPopup.test.js
@@ -0,0 +1,80 @@
+import configureStore from 'redux-mock-store';
+import TeamMembersPopup from 'components/Teams/TeamMembersPopup';
+import thunk from 'redux-thunk';
+import { authMock, userProfileMock, rolesMock } from '../../__tests__/mockStates';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Provider } from 'react-redux';
+
+const mockStore = configureStore([thunk]);
+
+const mockProps = {
+  members: { teamMembers: [] },
+  usersdata: { userProfiles: [] },
+};
+
+const renderComponent = props => {
+  const store = mockStore({
+    auth: authMock,
+    userProfile: userProfileMock,
+    role: rolesMock.role,
+    ...props,
+  });
+
+  render(
+    <Provider store={store}>
+      <TeamMembersPopup {...props} />
+    </Provider>,
+  );
+};
+
+const initialState = {
+  open: true,
+  selectedTeamName: 'Test Team',
+  hasPermission: jest.fn(),
+  members: {
+    teamMembers: { toSorted: jest.fn(() => []) },
+  },
+  roles: [{}],
+  auth: {
+    user: {
+      role: 'Owner',
+      permissions: {
+        frontPermissions: ['assignTeamToUsers'],
+      },
+    },
+  },
+  userProfile: { userProfiles: [] },
+  requestorRole: '',
+  userPermissions: [],
+  onClose: jest.fn(),
+  onDeleteClick: jest.fn(),
+};
+
+const usersdata = { userProfiles: [] };
+
+describe('TeamMembersPopup', () => {
+  it('should render correctly', () => {
+    renderComponent(mockProps);
+  });
+
+  it('should render "Add" button', () => {
+    renderComponent({ ...initialState, usersdata });
+    expect(screen.getByRole('button', { name: 'Add' })).toBeInTheDocument();
+  });
+
+  it('should render "Close" button', () => {
+    renderComponent({ ...initialState, usersdata });
+    expect(screen.getByText('Close')).toBeInTheDocument();
+  });
+
+  it('should call closePopup function', () => {
+    renderComponent({ ...initialState, usersdata });
+    fireEvent.click(screen.getByText('Close'));
+    expect(initialState.onClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays the team name in the modal header', () => {
+    renderComponent({ ...initialState, usersdata });
+    expect(screen.getByText(`Members of ${initialState.selectedTeamName}`)).toBeInTheDocument();
+  });
+});
diff --git a/src/actions/rolePermissionPresets.js b/src/actions/rolePermissionPresets.js
new file mode 100644
index 0000000000..ac40694659
--- /dev/null
+++ b/src/actions/rolePermissionPresets.js
@@ -0,0 +1,77 @@
+import axios from 'axios';
+import { ENDPOINTS } from '../utils/URL';
+import * as types from "../constants/rolePermissionPresets";
+
+export const fetchPresets = (presets) => {
+  return {
+    type: types.RECEIVE_PRESETS,
+    presets,
+  };
+};
+
+export const postNewPreset = payload => {
+  return {
+    type: types.ADD_NEW_PRESET,
+    payload,
+  };
+};
+
+export const deletePreset = presetId => {
+  return {
+    type: types.DELETE_PRESET,
+    presetId,
+  };
+};
+
+export const updatePreset = payload => {
+  return {
+    type: types.UPDATE_PRESET,
+    payload,
+  };
+};
+
+export const getPresetsByRole = (roleName) => async dispatch => {
+  const URL = ENDPOINTS.PRESETS_BY_ID(roleName);
+  const { data } = await axios.get(URL);
+  return dispatch(fetchPresets(data));
+};
+
+export const createNewPreset = newPreset => {
+  return async dispatch => {
+    try {
+      const res = await axios.post(ENDPOINTS.PRESETS(), newPreset);
+      if (res.status === 201){
+        dispatch(postNewPreset(res.data.newPreset));
+      }
+    } catch (error) {
+      console.log(error)
+    }
+    return status;
+  };
+};
+
+export const updatePresetById = (updatedPreset) => {
+  return async dispatch => {
+    try {
+      const res = await axios.put(ENDPOINTS.PRESETS_BY_ID(updatedPreset._id), updatedPreset);
+      if (res.status === 200){
+        dispatch(updatePreset(updatedPreset));
+      }
+    } catch (err) {
+      console.log(err);
+    }
+  };
+};
+
+export const deletePresetById = (presetId) => {
+  return async dispatch => {
+    try {
+      const res = await axios.delete(ENDPOINTS.PRESETS_BY_ID(presetId));
+      if (res.status === 200){
+        dispatch(deletePreset(presetId));
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+};
diff --git a/src/components/BMDashboard/BMDashboard.css b/src/components/BMDashboard/BMDashboard.css
new file mode 100644
index 0000000000..2e656b4125
--- /dev/null
+++ b/src/components/BMDashboard/BMDashboard.css
@@ -0,0 +1,47 @@
+.bm-dashboard__header h1{
+  font-size: 1.5em;
+  text-align: center;
+  margin-top: 2em;
+}
+
+.bm-dashboard__button.btn.btn-secondary{
+  background-color: #2e5061;
+}
+
+@media (min-width: 650px){
+
+.bm-dashboard__button.btn.btn-secondary{
+  padding-left: 0;
+  padding-right: 0;
+  max-height: 38px;
+}
+}
+
+/* project summaries */
+.projects-list{
+width: 80%;
+list-style-type: none;
+max-height: 80vh;
+overflow-x: hidden;
+overflow-y: auto;
+}
+
+.project-summary{
+  background-color: #e8f4f9;
+  min-height: 20vh;
+  height: auto;
+  margin-bottom: 2em;
+  padding: 1em;
+  border-radius: 5px;
+}
+
+.project-summary_header{
+  font-size: clamp(1em, 3vw, 1.3em);
+  font-weight: bold;
+}
+
+.project-summary p{
+  margin: 0;
+  font-size: clamp(0.9em, 2.5vw, 1em);
+}
+
diff --git a/src/components/BMDashboard/BMDashboard.jsx b/src/components/BMDashboard/BMDashboard.jsx
index f38f268fff..b95667fdbf 100644
--- a/src/components/BMDashboard/BMDashboard.jsx
+++ b/src/components/BMDashboard/BMDashboard.jsx
@@ -1,8 +1,38 @@
+import { Container } from 'reactstrap';
+import ProjectsList from './Projects/ProjectsList';
+import ProjectSelectForm from './Projects/ProjectSelectForm';
+import './BMDashboard.css';
+
+const dummyProjects = [
+  {
+    projectId: 1,
+    projectName: 'Big project',
+  },
+  {
+    projectId: 2,
+    projectName: 'Bigger project',
+  },
+  {
+    projectId: 3,
+    projectName: 'Very important project',
+  },
+  {
+    projectId: 4,
+    projectName: 'Super important project',
+  },
+];
+
 export function BMDashboard() {
   return (
-    <div style={{ textAlign: 'center', marginTop: '5rem' }}>
-      <h2>Building and Inventory Management Dashboard</h2>
-    </div>
+    <Container className="justify-content-center align-items-center mw-80 px-4">
+      <header className="bm-dashboard__header">
+        <h1>Building and Inventory Management Dashboard</h1>
+      </header>
+      <main>
+        <ProjectSelectForm projects={dummyProjects} />
+        <ProjectsList projects={dummyProjects} />
+      </main>
+    </Container>
   );
 }
 
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/LogBar.jsx b/src/components/BMDashboard/Projects/ProjectDetails/LogBar.jsx
new file mode 100644
index 0000000000..886e6ea7d1
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectDetails/LogBar.jsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { Button } from 'reactstrap';
+
+// button styles for each section
+const buttonStyles = {
+  dailyLogging: 'green',
+  newItem: 'blue',
+  team: 'indigo',
+};
+
+//  button labels for each section
+const buttonLabels = {
+  dailyLogging: ['Time', 'Material', 'Tool/Equipment'],
+  newItem: ['Team', 'Material', 'Tool/Equipment'],
+  team: ['Create New Team', 'Edit Existing Team', 'Log Issue'],
+};
+
+function LogBar() {
+  return (
+    <div className="log-bar">
+      {Object.keys(buttonStyles).map(section => (
+        <div key={uuidv4()} className="log-bar__section">
+          <h2>
+            {(() => {
+              switch (section) {
+                case 'dailyLogging':
+                  return 'Daily Logging:';
+                case 'newItem':
+                  return 'Add a New Item:';
+                default:
+                  return 'Team';
+              }
+            })()}
+          </h2>
+          <ul className="log-bar__btn-group">
+            {buttonLabels[section].map(label => (
+              <li key={uuidv4()}>
+                <Button
+                  type="button"
+                  className={
+                    label === 'Log Issue'
+                      ? `button button--maroon`
+                      : `button button--${buttonStyles[section]}`
+                  }
+                >
+                  {label}
+                </Button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default LogBar;
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialCard.jsx b/src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialCard.jsx
new file mode 100644
index 0000000000..f0abe0f96f
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialCard.jsx
@@ -0,0 +1,19 @@
+function MaterialCard() {
+  return (
+    <div className="single-card">
+      <div className="single-card__img">
+        <img
+          alt=""
+          src="https://www.theforkliftcenter.com/images/forklift-hero-left.png"
+          width="100%"
+        />
+      </div>
+      <div className="single-card__body">
+        <h3>Card title</h3>
+        <div className="single-card__info">Term ends in __ hours.</div>
+      </div>
+    </div>
+  );
+}
+
+export default MaterialCard;
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/Materials/Materials.jsx b/src/components/BMDashboard/Projects/ProjectDetails/Materials/Materials.jsx
new file mode 100644
index 0000000000..8a21a36aac
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectDetails/Materials/Materials.jsx
@@ -0,0 +1,13 @@
+import MaterialCard from './MaterialCard';
+
+function Materials() {
+  return (
+    <div className="cards-container__content">
+      <MaterialCard />
+      <MaterialCard />
+      <MaterialCard />
+    </div>
+  );
+}
+
+export default Materials;
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialsDisplay.jsx b/src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialsDisplay.jsx
new file mode 100644
index 0000000000..cc4b85530a
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectDetails/Materials/MaterialsDisplay.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Card } from 'reactstrap';
+import Materials from './Materials';
+
+function MaterialsDisplay() {
+  return (
+    <Card className="cards-container">
+      <h2 className="cards-container__header">Materials with quantity less than 20% left</h2>
+      <Materials />
+    </Card>
+  );
+}
+
+export default MaterialsDisplay;
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.css b/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.css
new file mode 100644
index 0000000000..524470d178
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.css
@@ -0,0 +1,204 @@
+.project-details {
+  text-align: center;
+  padding-top: 20px;
+  padding-left: 3%;
+  padding-right: 3%;
+  margin-top: 40px;
+  margin-bottom: 20px;
+  font-weight: bold;
+}
+
+.project-details h1{
+  font-size: 1.5rem;
+}
+
+/* styling for the logBar component - i.e. dashboard with buttons */
+
+.log-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  margin: 2em;
+  padding: 1em 2em;
+  width: 100%;
+  background-color: #eaeeef;
+}
+
+
+.log-bar__section {
+  width: 100%;
+  margin-top: 1em;
+}
+
+.log-bar__section h2, .card.cards-container h2, .project-log h2{
+  font-size: 1em;
+  font-weight: bold;
+}
+
+.log-bar__section ul{
+    list-style-type: none;
+  }
+
+.button.btn {
+  border: 0;
+  border-radius: 10px;
+  margin: 0.1em;
+  width: 100%;
+}
+
+.button.btn:hover{
+  outline:auto;
+  filter: brightness(130%);
+}
+
+/* buttons custom colors */
+.button.btn.button--green {
+  background-color: #015d4a;
+}
+
+.button.btn.button--blue {
+  background-color: #0f6386;
+}
+
+.button.btn.button--indigo {
+  background-color: #203844;
+}
+
+.button.btn.button--maroon {
+  background-color: #980101;
+  margin-top: 2em;
+}
+
+@media (min-width: 550px) {
+  .log-bar {
+    display: flex;
+    flex-direction: column;
+  }
+
+   .log-bar__btn-group {
+    margin-top: -0.5em;
+    display: flex;
+    justify-content: center;
+  }
+
+  .button.btn.btn-secondary {
+    width: auto;
+  }
+
+  .button.btn.btn-secondary.button--maroon {
+    margin-top: auto;
+  }
+}
+
+@media (min-width: 750px) {
+  .log-bar {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 2em;
+  }
+
+  .log-bar__section {
+    width: 50%;
+    flex: auto;
+  }
+
+  .button.btn.btn-secondary {
+    width: auto;
+  }
+
+  .button.btn.btn-secondary.button--maroon {
+    margin-left: 2em;
+  }
+}
+
+/* styling for containers with cards */
+.card.cards-container {
+  align-items: center;
+  margin: 1em 2em;
+  padding: 1em 2em;
+}
+
+.cards-container__content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+/* styling for single card element */
+.single-card {
+  border: 1px solid #eaeeef;
+  border-radius: 5px;
+  text-align: center;
+  margin-bottom: 0.5em;
+  cursor: pointer;
+}
+
+.single-card:hover {
+  box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
+  transform: translate3d(0.5px, 0.5px, 0.5px);
+}
+
+.single-card__body {
+  margin-top: 0.5em;
+}
+
+.single-card__body h3 {
+  font-size: 1em;
+  margin-bottom: -0.2em;
+}
+
+/* button on a card */
+.single-card__info {
+  font-size: 0.5rem;
+  padding: 1em;
+  margin: 0.5em;
+  border-radius: 10px;
+  background-color: #f2c897;
+}
+
+/* TO DO: dynamic value to be added */
+/* .single-card__info .warning{
+  color: white;
+  background-color: #980101; 
+} */
+
+@media (min-width: 600px) {
+  .cards-container__header {
+    height: 38px;
+  }
+
+  .cards-container__content {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-around;
+  }
+
+  /* styling for single card element */
+  .single-card {
+    margin: auto 0.2em;
+    flex: none;
+  }
+}
+
+/* styling for project log - i.e.table at the bottom */
+.project-log {
+  margin: 2em;
+  padding: 1em 2em;
+  width: 100%;
+  font-weight: lighter;
+}
+
+.project-log thead{
+  background-color: transparent;
+}
+
+@media (max-width: 768px){
+  .project-log td, .project-log th {
+    font-size: 0.6em;
+  }
+}
+
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.jsx b/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.jsx
new file mode 100644
index 0000000000..0874cb9578
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectDetails/ProjectDetails.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+import { Container, Row, Col } from 'reactstrap';
+import LogBar from './LogBar';
+import RentedToolsDisplay from './RentedTools/RentedToolsDisplay';
+import MaterialsDisplay from './Materials/MaterialsDisplay';
+import ProjectLog from './ProjectLog';
+import './ProjectDetails.css';
+
+function ProjectDetails() {
+
+  const { projectId } = useParams();
+  
+  return (
+    <Container className="project-details" fluid>
+      <Row className="mx-auto">
+        <h1>Project {projectId} Dashboard</h1>
+      </Row>
+      <Row className="mx-auto">
+        <LogBar />
+      </Row>
+      <Row className="mx-auto">
+        <Col lg="6" md="12">
+          <RentedToolsDisplay />
+        </Col>
+        <Col lg="6" md="12">
+          <MaterialsDisplay />
+        </Col>
+      </Row>
+      <Row className="mx-auto">
+        <ProjectLog />
+      </Row>
+    </Container>
+  );
+}
+
+export default ProjectDetails;
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/ProjectLog.jsx b/src/components/BMDashboard/Projects/ProjectDetails/ProjectLog.jsx
new file mode 100644
index 0000000000..e9dccde72d
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectDetails/ProjectLog.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { Card, Table } from 'reactstrap';
+
+const DummyData = [
+  {
+    id: '12',
+    firstName: 'Dora',
+    lastName: 'Kimberly',
+    role: 'Carpenter',
+    team: 'XYZ',
+    currentTask: 'Stud wall construction',
+    totalHrs: 169,
+    todaysHrs: 5.5,
+  },
+  {
+    id: '35',
+    firstName: 'Cailin',
+    lastName: 'Colby',
+    role: 'Volunteer',
+    team: 'Team A',
+    currentTask: 'Foundation concreting',
+    totalHrs: 15,
+    todaysHrs: 2.18,
+  },
+  {
+    id: '36',
+    firstName: 'Member A',
+    lastName: 'Member A',
+    role: 'Role A',
+    team: 'Team A',
+    currentTask: 'Task 1',
+    totalHrs: 169,
+    todaysHrs: 5.5,
+  },
+];
+
+function ProjectLog() {
+  const tableRows = DummyData.map(person => (
+    <tr key={person.id}>
+      <th scope="row">{person.id}</th>
+      <td>{person.firstName}</td>
+      <td>{person.lastName}</td>
+      <td>{person.role}</td>
+      <td>{person.team}</td>
+      <td>{person.currentTask}</td>
+      <td>{person.totalHrs}</td>
+      <td>{person.todaysHrs}</td>
+    </tr>
+  ));
+
+  return (
+    <Card className="project-log">
+      <h2>Members working on site today</h2>
+      <Table hover responsive striped>
+        <thead>
+          <tr>
+            <th>ID</th>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Role</th>
+            <th>Team</th>
+            <th>Current Task</th>
+            <th>Total Hrs</th>
+            <th>Today's Hrs</th>
+          </tr>
+        </thead>
+        <tbody>{tableRows}</tbody>
+      </Table>
+    </Card>
+  );
+}
+
+export default ProjectLog;
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/RentedToolsDisplay.jsx b/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/RentedToolsDisplay.jsx
new file mode 100644
index 0000000000..d3cf707d86
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/RentedToolsDisplay.jsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Card } from 'reactstrap';
+import ToolCards from './ToolCards';
+
+function RentedToolsDisplay() {
+  return (
+    <Card className="cards-container">
+      <h2 className="cards-container__header">
+        Rented Tools or equipment to be returned in 3 days.
+      </h2>
+      <ToolCards />
+    </Card>
+  );
+}
+
+export default RentedToolsDisplay;
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/ToolCard.jsx b/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/ToolCard.jsx
new file mode 100644
index 0000000000..71936da59d
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/ToolCard.jsx
@@ -0,0 +1,21 @@
+import React from 'react';
+
+function ToolCard() {
+  return (
+    <div className="single-card">
+      <div className="single-card__img">
+        <img
+          alt=""
+          src="https://www.theforkliftcenter.com/images/forklift-hero-left.png"
+          width="100%"
+        />
+      </div>
+      <div className="single-card__body">
+        <h3>Card title</h3>
+        <div className="single-card__info">Term ends in __ hours.</div>
+      </div>
+    </div>
+  );
+}
+
+export default ToolCard;
diff --git a/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/ToolCards.jsx b/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/ToolCards.jsx
new file mode 100644
index 0000000000..39268a4af7
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectDetails/RentedTools/ToolCards.jsx
@@ -0,0 +1,13 @@
+import ToolCard from './ToolCard';
+
+function ToolCards() {
+  return (
+    <div className="cards-container__content">
+      <ToolCard />
+      <ToolCard />
+      <ToolCard />
+    </div>
+  );
+}
+
+export default ToolCards;
diff --git a/src/components/BMDashboard/Projects/ProjectSelectForm.jsx b/src/components/BMDashboard/Projects/ProjectSelectForm.jsx
new file mode 100644
index 0000000000..a846e3eda4
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectSelectForm.jsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { useHistory } from 'react-router-dom';
+import { Form, FormGroup, Col, Row, Label, Input, Button } from 'reactstrap';
+
+const ProjectSelectForm = ({ projects }) => {
+  const history = useHistory();
+  const [selectedProjectId, setSelectedProjectId] = useState('');
+
+  const selectOptions = projects.map(project => {
+    return (
+      <option key={project.projectId} value={project.projectId}>
+        {project.projectName}
+      </option>
+    );
+  });
+
+  const handleOptionChange = event => {
+    setSelectedProjectId(event.target.value);
+  };
+
+  const handleButtonClick = () => {
+    if (selectedProjectId) {
+      //navigate to a new page with information about the selected project
+      history.push(`/bmdashboard/projects/${selectedProjectId}`);
+    } else {
+      alert('Please select an option first');
+    }
+  };
+
+  return (
+    <Form className="w-100 p-3  text-center">
+      <Row className="ml-0 gx-5 w-75 mx-auto" md="2" sm="1" xs="1">
+        <FormGroup>
+          <Col className="p-3">
+            <Label for="projectSelect" hidden>
+              Select
+            </Label>
+            <Input
+              id="projectSelect"
+              name="select"
+              type="select"
+              value={selectedProjectId}
+              onChange={handleOptionChange}
+            >
+              <option value="" default>
+                Select a project
+              </option>
+              {selectOptions}
+            </Input>
+          </Col>
+        </FormGroup>
+        <Col className="p-3">
+          <Button className="bm-dashboard__button w-100" onClick={handleButtonClick}>
+            Go to Project Dashboard
+          </Button>
+        </Col>
+      </Row>
+    </Form>
+  );
+};
+
+export default ProjectSelectForm;
diff --git a/src/components/BMDashboard/Projects/ProjectSummary.jsx b/src/components/BMDashboard/Projects/ProjectSummary.jsx
new file mode 100644
index 0000000000..9ecdabd6a9
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectSummary.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const ProjectSummary = ({ project }) => {
+  return (
+    <>
+      <h2 className="project-summary_header">{project.projectName} summary</h2>
+      <p>
+        Details of project summary TBD. 
+      </p>
+    </>
+  );
+};
+
+export default ProjectSummary;
diff --git a/src/components/BMDashboard/Projects/ProjectsList.jsx b/src/components/BMDashboard/Projects/ProjectsList.jsx
new file mode 100644
index 0000000000..d563b5c4e6
--- /dev/null
+++ b/src/components/BMDashboard/Projects/ProjectsList.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { Row } from 'reactstrap';
+import ProjectSummary from './ProjectSummary';
+
+const ProjectsList = ({ projects }) => {
+  const listItems = projects.map(project => {
+    return (
+      <li className="project-summary" key={project.projectId}>
+        <ProjectSummary project={project} />
+      </li>
+    );
+  });
+  return (
+    <Row className="ml-0 mt-2 text-center">
+      <ul className="projects-list">{listItems}</ul>
+    </Row>
+  );
+};
+
+export default ProjectsList;
diff --git a/src/components/Badge/Badge.css b/src/components/Badge/Badge.css
index be0a271cf0..3a99674b96 100644
--- a/src/components/Badge/Badge.css
+++ b/src/components/Badge/Badge.css
@@ -9,24 +9,28 @@
   height: 50px;
   width: 50px;
   margin: 5px;
+  overflow: inherit;
 }
 
 .badge_image_md > img {
   border-radius: 50%;
   height: 100px;
   width: 100px;
+  overflow: inherit;
 }
 
 .badge_image_lg > img {
   border-radius: 50%;
   height: 200px;
   width: 200px;
+  overflow: inherit;
 }
 
 .badge_image_mini > img {
   border-radius: 50%;
   height: 25px;
   width: 25px;
+  overflow: inherit;
 }
 
 .badge_count {
diff --git a/src/components/ForcePasswordUpdate/ForcePasswordUpdate.jsx b/src/components/ForcePasswordUpdate/ForcePasswordUpdate.jsx
index 881d1d9607..f8895a91bf 100644
--- a/src/components/ForcePasswordUpdate/ForcePasswordUpdate.jsx
+++ b/src/components/ForcePasswordUpdate/ForcePasswordUpdate.jsx
@@ -1,11 +1,10 @@
-import React from 'react';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
+import Joi from 'joi';
+import { toast } from 'react-toastify';
 import { forcePasswordUpdate } from '../../actions/updatePassword';
 import { clearErrors } from '../../actions/errorsActions';
 import Form from '../common/Form';
-import Joi from 'joi';
-import { toast } from 'react-toastify';
 
 export class ForcePasswordUpdate extends Form {
   state = {
@@ -50,17 +49,12 @@ export class ForcePasswordUpdate extends Form {
   };
 
   doSubmit = async () => {
-    const { newpassword, confirmnewpassword } = {
+    const { newpassword } = {
       ...this.state.data,
     };
 
-    if (newpassword !== confirmnewpassword) {
-      alert('Confirm Password must match New Password');
-      return;
-    }
-
-    let userId = this.props.match.params.userId;
-    let data = { userId, newpassword };
+    const { userId } = this.props.match.params;
+    const data = { userId, newpassword };
     const status = await this.props.forcePasswordUpdate(data);
     if (status === 200) {
       toast.success(
diff --git a/src/components/ForcePasswordUpdate/index.js b/src/components/ForcePasswordUpdate/index.js
index 86661e5541..e61ddb62ce 100644
--- a/src/components/ForcePasswordUpdate/index.js
+++ b/src/components/ForcePasswordUpdate/index.js
@@ -1 +1,3 @@
-export { default } from './ForcePasswordUpdate';
+import ForcePasswordUpdate from './ForcePasswordUpdate';
+
+export default ForcePasswordUpdate;
diff --git a/src/components/PermissionsManagement/PermissionsPresetsModal.jsx b/src/components/PermissionsManagement/PermissionsPresetsModal.jsx
new file mode 100644
index 0000000000..24154d831e
--- /dev/null
+++ b/src/components/PermissionsManagement/PermissionsPresetsModal.jsx
@@ -0,0 +1,32 @@
+import React, { useState } from 'react';
+import { FormCheck } from 'react-bootstrap';
+import { Alert, Button, Form, FormGroup, Input, Label } from 'reactstrap';
+import { toast } from 'react-toastify';
+import { connect } from 'react-redux';
+import Preset  from './Preset';
+import { boxStyle } from 'styles';
+
+
+const PermissionsPresetsModal = (props) => {
+  return (
+    <>
+      {props.presetsList?.length===0 ? 'There are no presets for this role.' : props.presetsList?.map((preset) => (
+        <div key={preset._id}>
+          <Preset
+            preset={preset}
+            roleId={props.roleId}
+            roleName={props.roleName}
+            onApply={props.onApply}
+          />
+        </div>
+      ))}
+    </>
+  );
+};
+
+const mapStateToProps = state => ({ presetsList: state.rolePreset.presets });
+
+// const mapDispatchToProps = dispatch => ({
+// });
+
+export default connect(mapStateToProps, null)(PermissionsPresetsModal);
diff --git a/src/components/PermissionsManagement/Preset.jsx b/src/components/PermissionsManagement/Preset.jsx
new file mode 100644
index 0000000000..9f5831b8f7
--- /dev/null
+++ b/src/components/PermissionsManagement/Preset.jsx
@@ -0,0 +1,130 @@
+import React, { useState, useRef } from 'react';
+import { FormCheck } from 'react-bootstrap';
+import { Alert, Button, Form, FormGroup, Input, Label, Row } from 'reactstrap';
+import { permissionLabel } from './UserRoleTab';
+import { mainPermissions } from './RolePermissions';
+import { toast } from 'react-toastify';
+import { connect } from 'react-redux';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEdit } from '@fortawesome/free-regular-svg-icons';
+import { updateRole } from '../../actions/role';
+import { updatePresetById, deletePresetById } from '../../actions/rolePermissionPresets';
+import { BsFillCaretDownFill, BsFillCaretUpFill } from 'react-icons/bs';
+import { boxStyle } from 'styles';
+import { update } from 'lodash';
+
+
+const Preset = (props) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [editing, setEditing] = useState(false);
+  const ref = useRef(null);
+
+  const onNameClicked = (e) => {
+    if(editing){
+      e.stopPropagation();
+    }
+  }
+
+  const onEditIconClicked = (e) => {
+    e.stopPropagation();
+    setEditing(!editing);
+    setTimeout(()=>{ref.current.focus()}, 0);
+  };
+
+  const onSaveNameChangeClicked = (e) => {
+    e.stopPropagation();
+    var newName = ref.current.textContent;
+    props.updatePreset({...props.preset, presetName: newName});
+    setEditing(false);
+  };
+
+  const applyPreset = async (preset) => {
+    try {
+      const updatedRole = {
+        roleId: props.roleId,
+        roleName: props.roleName,
+        permissions: preset.permissions
+      };
+      props.updateRole(props.roleId, updatedRole);
+      props.onApply(preset.permissions);
+    } catch (error) {
+      console.log(error.message);
+    }
+  };
+
+  return (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: Row,
+          cursor: 'pointer',
+          width: '100%',
+          borderBottom: 'solid',
+          borderColor: 'grey',
+          justifyContent: 'space-between'
+        }}
+        onClick={()=>setIsOpen(!isOpen)}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: '10px'
+        }}>
+          <h3 ref={ref} contentEditable={editing} suppressContentEditableWarning={true} onClick={onNameClicked} >{props.preset.presetName}</h3>
+          <FontAwesomeIcon
+                  icon={faEdit}
+                  size="lg"
+                  className="user-role-tab__icon edit-icon"
+                  onClick={onEditIconClicked}
+                />
+          {editing &&
+            <Button
+              color='primary'
+              onClick={onSaveNameChangeClicked}>
+              Save Name
+            </Button>}
+          {isOpen ? <BsFillCaretUpFill/>:<BsFillCaretDownFill/> }
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            gap: '10px'
+          }}>
+          <Button color='danger' onClick={(event)=>{event.stopPropagation(); props.deletePreset(props.preset._id);}}>
+            Delete
+          </Button>
+          <Button
+            color='primary'
+            onClick={(event)=>{event.stopPropagation(); applyPreset(props.preset);}}>
+            Apply
+          </Button>
+        </div>
+      </div>
+      {isOpen ? Object.keys(permissionLabel).map((permission) => (
+      <li className="user-role-tab__permissions" key={permission}>
+        <p style={{
+          color: props.preset.permissions.includes(permission) ? 'green' : 'red' ,
+          fontSize:  mainPermissions.includes(permissionLabel[permission]) ? '20px':'',
+          paddingLeft:  mainPermissions.includes(permissionLabel[permission]) ? '0': '50px'
+          }}>
+          {permissionLabel[permission]}
+        </p>
+      </li>
+      )):<></>}
+    </>
+  );
+};
+
+
+
+const mapStateToProps = state => ({ roles: state.role.roles });
+
+const mapDispatchToProps = dispatch => ({
+  updateRole: (roleId, updatedRole) => dispatch(updateRole(roleId, updatedRole)),
+  deletePreset: (presetId) => dispatch(deletePresetById(presetId)),
+  updatePreset: (newPreset) => dispatch(updatePresetById(newPreset))
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(Preset);
diff --git a/src/components/PermissionsManagement/RolePermissions.jsx b/src/components/PermissionsManagement/RolePermissions.jsx
index 4b7b658624..20caa1ea3d 100644
--- a/src/components/PermissionsManagement/RolePermissions.jsx
+++ b/src/components/PermissionsManagement/RolePermissions.jsx
@@ -12,6 +12,8 @@ import axios from 'axios';
 import { useHistory } from 'react-router-dom';
 import { boxStyle } from 'styles';
 import EditableInfoModal from 'components/UserProfile/EditableModal/EditableInfoModal';
+import PermissionsPresetsModal from './PermissionsPresetsModal.jsx'
+import { getPresetsByRole, createNewPreset } from 'actions/rolePermissionPresets';
 
 function getKeyByValue(object, value) {
   return Object.keys(object).find(key => object[key] === value);
@@ -29,6 +31,8 @@ const mapPermissionToLabel = permissions => {
   return label;
 };
 
+export const mainPermissions = ['See All the Reports Tab', 'See User Management Tab (Full Functionality)', 'See Badge Management Tab (Full Functionality)', 'See Project Management Tab (Full Functionality)', 'Edit Task', 'See Teams Management Tab (Full Functionality)', 'Edit Timelog Information', 'Edit User Profile', 'See Popup Management Tab (create and update popups)', 'See Permissions Management Tab', 'See Summary Indicator', 'See Visibility Icon'  ]
+
 export const  modalInfo = {
   'See Only Weekly Summary Reports Tab':
     'Make the "Other Links" -> "Reports" button appear/accessible.',
@@ -124,8 +128,6 @@ export const  modalInfo = {
 };
 
 function RolePermissions(props) {
-  
-  const mainPermissions = ['See All the Reports Tab', 'See User Management Tab (Full Functionality)', 'See Badge Management Tab (Full Functionality)', 'See Project Management Tab (Full Functionality)', 'Edit Project', 'See Teams Management Tab (Full Functionality)', 'Edit Timelog Information', 'Edit User Profile', 'See Permissions Management Tab' ]
 
   const [permissions, setPermissions] = useState(mapPermissionToLabel(props.permissions));
   const [deleteRoleModal, setDeleteRoleModal] = useState(false);
@@ -136,11 +138,17 @@ function RolePermissions(props) {
   const history = useHistory();
   const [infoRoleModal, setinfoRoleModal] = useState(false);
   const [modalContent, setContent] = useState(null);
-  
+  const [showPresetModal, setShowPresetModal] = useState(false);
+
   useEffect(() => {
     setRoleName(props.role);
+    props.getPresets(props.role);
   }, []);
 
+  useEffect(() => {
+    setPermissions(mapPermissionToLabel(props.permissions));
+  }, [props.roles]);
+
   const toggleDeleteRoleModal = () => {
     setDeleteRoleModal(!deleteRoleModal);
   };
@@ -176,6 +184,21 @@ function RolePermissions(props) {
     setPermissions(previous => [...previous, permission]);
   };
 
+  const saveNewPreset = async () => {
+    let count = 1;
+    while(props.presets.some(preset => preset.presetName === 'New Preset '+count)){
+      count+=1;
+    }
+    const newPreset = {
+      presetName: 'New Preset '+count,
+      roleName: props.role,
+      permissions: permissions.map(perm => {
+        return getKeyByValue(permissionLabel, perm);
+      }),
+    }
+    props.createNewPreset(newPreset);
+  }
+
   const updateInfo = async () => {
     const permissionsObjectName = permissions.map(perm => {
       return getKeyByValue(permissionLabel, perm);
@@ -231,13 +254,23 @@ function RolePermissions(props) {
             )}
           </div>
           {props?.userRole === 'Owner' && (
-            <div className="name-container__btns">
-              <Button className="btn_save" color="success" onClick={() => updateInfo()} style={boxStyle}>
-                Save
-              </Button>
-              <Button color="danger" onClick={toggleDeleteRoleModal} style={boxStyle}>
-                Delete Role
-              </Button>
+            <div className="name-container__btn_columns">
+              <div className="name-container__btns">
+                <Button className="btn_save" color="success" onClick={()=>{ saveNewPreset()}} style={boxStyle}>
+                    Create New Preset
+                  </Button>
+                  <Button color="primary" onClick={()=>{setShowPresetModal(!showPresetModal);}} style={boxStyle}>
+                    Load Presets
+                  </Button>
+              </div>
+              <div className="name-container__btns">
+                <Button className="btn_save" color="success" onClick={() => updateInfo()} style={boxStyle}>
+                  Save
+                </Button>
+                <Button color="danger" onClick={toggleDeleteRoleModal} style={boxStyle}>
+                  Delete Role
+                </Button>
+              </div>
             </div>
           )}
           <Modal isOpen={editRoleNameModal} toggle={toggleEditRoleNameModal}>
@@ -343,15 +376,36 @@ function RolePermissions(props) {
           </Button>
         </ModalFooter>
       </Modal>
+      <Modal
+        isOpen={showPresetModal}
+        toggle={()=>{setShowPresetModal((previous)=>!previous)}}
+        id="modal-content__new-role"
+      >
+        <ModalHeader
+          toggle={()=>{setShowPresetModal((previous)=>!previous)}}
+          cssModule={{ 'modal-title': 'w-100 text-center my-auto' }}
+        >
+          Role Presets
+        </ModalHeader>
+        <ModalBody id="modal-body_new-role--padding">
+          <PermissionsPresetsModal
+            roleId={props.roleId}
+            roleName={props.role}
+            onApply={(perms)=>setPermissions(mapPermissionToLabel(perms))}
+          />
+        </ModalBody>
+      </Modal>
     </>
   );
 }
 
-const mapStateToProps = state => ({ roles: state.role.roles });
+const mapStateToProps = state => ({ roles: state.role.roles, presets: state.rolePreset.presets });
 
 const mapDispatchToProps = dispatch => ({
   getAllRoles: () => dispatch(getAllRoles()),
   updateRole: (roleId, updatedRole) => dispatch(updateRole(roleId, updatedRole)),
+  getPresets: (role) => dispatch(getPresetsByRole(role)),
+  createNewPreset: (newPreset) => dispatch(createNewPreset(newPreset)),
 });
 
 export default connect(mapStateToProps, mapDispatchToProps)(RolePermissions);
diff --git a/src/components/PermissionsManagement/UserPermissionsPopUp.jsx b/src/components/PermissionsManagement/UserPermissionsPopUp.jsx
index 8784525d63..2a7a07f7b4 100644
--- a/src/components/PermissionsManagement/UserPermissionsPopUp.jsx
+++ b/src/components/PermissionsManagement/UserPermissionsPopUp.jsx
@@ -17,6 +17,13 @@ const UserPermissionsPopUp = ({ allUserProfiles, toggle, getAllUsers, roles }) =
   const [isOpen, setIsOpen] = useState(false);
   const [isInputFocus, setIsInputFocus] = useState(false);
   const [actualUserRolePermission, setActualUserRolePermission] = useState();
+
+  const setToDefault = () => {
+    setActualUserProfile(previous => {
+      return { ...previous, permissions: {frontPermissions: [],} };
+    });
+  }
+
   const [infoRoleModal, setinfoRoleModal] = useState(false);
   const [modalContent, setContent] = useState(null);
   //no onchange, always change this state;
@@ -110,7 +117,21 @@ const UserPermissionsPopUp = ({ allUserProfiles, toggle, getAllUsers, roles }) =
         updateProfileOnSubmit(e);
       }}
     >
-      <h4 className="user-permissions-pop-up__title">User name:</h4>
+      <div style={{display: 'flex', justifyContent: 'space-between', paddingBottom: '5px'}}>
+        <h4 className="user-permissions-pop-up__title">User name:</h4>
+        <Button
+          type="button"
+          color="success"
+          onClick={e => {
+            setToDefault();
+            updateProfileOnSubmit(e);
+          }}
+          disabled={actualUserProfile ? false : true}
+          style={boxStyle}
+        >
+          Reset to Default
+        </Button>
+      </div>
       <Dropdown
         isOpen={isOpen}
         toggle={() => {
diff --git a/src/components/PermissionsManagement/UserRoleTab.css b/src/components/PermissionsManagement/UserRoleTab.css
index bcab580bf8..93792eb621 100644
--- a/src/components/PermissionsManagement/UserRoleTab.css
+++ b/src/components/PermissionsManagement/UserRoleTab.css
@@ -33,6 +33,12 @@
   align-items: center;
 }
 
+.name-container__btn_columns {
+  display: flex;
+  flex-direction: row;
+  column-gap: 1rem;
+}
+
 .name-container__btns {
   display: flex;
   flex-direction: column;
diff --git a/src/components/Reports/PeopleReport/PeopleReport.jsx b/src/components/Reports/PeopleReport/PeopleReport.jsx
index 5d0830b28b..83a157c017 100644
--- a/src/components/Reports/PeopleReport/PeopleReport.jsx
+++ b/src/components/Reports/PeopleReport/PeopleReport.jsx
@@ -1,20 +1,22 @@
+// eslint-disable-next-line no-unused-vars
 import React, { Component, useState } from 'react';
 import '../../Teams/Team.css';
 import './PeopleReport.css';
-import { Button, Dropdown, DropdownButton } from 'react-bootstrap';
+import { formatDate } from 'utils/formatDate';
 import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import { FiUser } from 'react-icons/fi';
+import moment from 'moment';
+import { toast } from 'react-toastify';
 import {
   updateUserProfileProperty,
   getUserProfile,
   getUserTask,
 } from '../../../actions/userProfile';
+
 import { getUserProjects } from '../../../actions/userProjects';
 import { getWeeklySummaries, updateWeeklySummaries } from '../../../actions/weeklySummaries';
-import moment from 'moment';
 import 'react-input-range/lib/css/index.css';
-import Collapse from 'react-bootstrap/Collapse';
 import { getTimeEntriesForPeriod } from '../../../actions/timeEntries';
 import InfringementsViz from '../InfringementsViz';
 import TimeEntriesViz from '../TimeEntriesViz';
@@ -24,10 +26,8 @@ import PeopleTableDetails from '../PeopleTableDetails';
 import { ReportPage } from '../sharedComponents/ReportPage';
 import { getPeopleReportData } from './selectors';
 import { PeopleTasksPieChart } from './components';
-import { toast } from 'react-toastify';
 import ToggleSwitch from '../../UserProfile/UserProfileEdit/ToggleSwitch';
 import { Checkbox } from '../../common/Checkbox';
-import { formatDate } from 'utils/formatDate';
 
 class PeopleReport extends Component {
   constructor(props) {
@@ -36,19 +36,28 @@ class PeopleReport extends Component {
       userProfile: {},
       userTask: [],
       userProjects: {},
+      // eslint-disable-next-line react/no-unused-state
       userId: '',
+      // eslint-disable-next-line react/no-unused-state
       isLoading: true,
       bioStatus: '',
       authRole: '',
       infringements: {},
+      // eslint-disable-next-line react/no-unused-state
       isAssigned: '',
       isActive: '',
       isRehireable: false,
+      // eslint-disable-next-line react/no-unused-state
       priority: '',
+      // eslint-disable-next-line react/no-unused-state
       status: '',
+      // eslint-disable-next-line react/no-unused-state
       hasFilter: true,
+      // eslint-disable-next-line react/no-unused-state
       allClassification: [],
+      // eslint-disable-next-line react/no-unused-state
       classification: '',
+      // eslint-disable-next-line react/no-unused-state
       users: '',
       classificationList: [],
       priorityList: [],
@@ -56,8 +65,11 @@ class PeopleReport extends Component {
       fromDate: '2016-01-01',
       toDate: this.endOfWeek(0),
       timeEntries: {},
+      // eslint-disable-next-line react/no-unused-state
       startDate: '',
+      // eslint-disable-next-line react/no-unused-state
       endDate: '',
+      // eslint-disable-next-line react/no-unused-state
       fetched: false,
     };
     this.setStatus = this.setStatus.bind(this);
@@ -74,45 +86,52 @@ class PeopleReport extends Component {
   }
 
   async componentDidMount() {
-    if (this.props.match) {
-      const userId = this.props.match.params.userId;
-      await this.props.getUserProfile(userId);
-      await this.props.getUserTask(userId);
-      await this.props.getUserProjects(userId);
-      await this.props.getWeeklySummaries(userId);
-      await this.props.getTimeEntriesForPeriod(userId, this.state.fromDate, this.state.toDate);
+    const { match, userProfile, userTask, userProjects, timeEntries, auth } = this.props;
+    const { fromDate, toDate } = this.state;
+
+    if (match) {
+      const { userId } = match.params;
+      await getUserProfile(userId);
+      await getUserTask(userId);
+      await getUserProjects(userId);
+      await getWeeklySummaries(userId);
+      await getTimeEntriesForPeriod(userId, fromDate, toDate);
+
       this.setState({
+        // eslint-disable-next-line react/no-unused-state
         userId,
+        // eslint-disable-next-line react/no-unused-state
         isLoading: false,
-        bioStatus: this.props.userProfile.bioPosted,
-        authRole: this.props.auth.user.role,
+        bioStatus: userProfile.bioPosted,
+        authRole: auth.user.role,
         userProfile: {
-          ...this.props.userProfile,
+          ...userProfile,
         },
-        isRehireable: this.props.userProfile.isRehireable,
-        userTask: [...this.props.userTask],
+        isRehireable: userProfile.isRehireable,
+        userTask: [...userTask],
         userProjects: {
-          ...this.props.userProjects,
+          ...userProjects,
         },
-        allClassification: [
-          ...Array.from(new Set(this.props.userTask.map(item => item.classification))),
-        ],
-        infringements: this.props.userProfile.infringements,
+        // eslint-disable-next-line react/no-unused-state
+        allClassification: [...Array.from(new Set(userTask.map(item => item.classification)))],
+        infringements: userProfile.infringements,
         timeEntries: {
-          ...this.props.timeEntries,
+          ...timeEntries,
         },
       });
     }
   }
+
   setStartDate(date) {
-    this.setState(state => {
+    this.setState(() => {
       return {
         startDate: date,
       };
     });
   }
+
   setEndDate(date) {
-    this.setState(state => {
+    this.setState(() => {
       return {
         endDate: date,
       };
@@ -123,24 +142,8 @@ class PeopleReport extends Component {
     this.setState({ [e.target.name]: e.target.value });
   }
 
-  startOfWeek(offset) {
-    return moment()
-      .tz('America/Los_Angeles')
-      .startOf('week')
-      .subtract(offset, 'weeks')
-      .format('YYYY-MM-DD');
-  }
-
-  endOfWeek(offset) {
-    return moment()
-      .tz('America/Los_Angeles')
-      .endOf('week')
-      .subtract(offset, 'weeks')
-      .format('YYYY-MM-DD');
-  }
-
   setActive(activeValue) {
-    this.setState(state => {
+    this.setState(() => {
       return {
         isActive: activeValue,
       };
@@ -148,34 +151,35 @@ class PeopleReport extends Component {
   }
 
   async setRehireable(rehireValue) {
-    this.setState(state => {
+    const { userProfile } = this.props;
+
+    this.setState(() => {
       return {
         isRehireable: rehireValue,
       };
     });
 
     try {
-      await this.props.updateUserProfileProperty(
-        this.props.userProfile,
-        'isRehireable',
-        rehireValue,
-      );
+      await updateUserProfileProperty(userProfile, 'isRehireable', rehireValue);
       toast.success(`You have changed the rehireable status of this user to ${rehireValue}`);
     } catch (err) {
+      // eslint-disable-next-line no-alert
       alert('An error occurred while attempting to save the rehireable status of this user.');
     }
   }
 
   setPriority(priorityValue) {
-    if (priorityValue != 'Filter Off') {
-      this.setState(state => {
+    const { priorityList } = this.state;
+
+    if (priorityValue !== 'Filter Off') {
+      this.setState(() => {
         return {
           priority: priorityValue,
-          priorityList: this.state.priorityList.concat(priorityValue),
+          priorityList: priorityList.concat(priorityValue),
         };
       });
     } else {
-      this.setState(state => {
+      this.setState(() => {
         return {
           priority: priorityValue,
           priorityList: [],
@@ -183,16 +187,19 @@ class PeopleReport extends Component {
       });
     }
   }
+
   setStatus(statusValue) {
-    if (statusValue != 'Filter Off') {
-      this.setState(state => {
+    const { statusList } = this.state;
+
+    if (statusValue !== 'Filter Off') {
+      this.setState(() => {
         return {
           status: statusValue,
-          statusList: this.state.statusList.concat(statusValue),
+          statusList: statusList.concat(statusValue),
         };
       });
     } else {
-      this.setState(state => {
+      this.setState(() => {
         return {
           status: statusValue,
           statusList: [],
@@ -200,16 +207,18 @@ class PeopleReport extends Component {
       });
     }
   }
+
   setAssign(assignValue) {
-    this.setState(state => {
+    this.setState(() => {
       return {
         isAssigned: assignValue,
       };
     });
   }
 
+  // eslint-disable-next-line no-unused-vars
   setFilter(filterValue) {
-    this.setState(state => {
+    this.setState(() => {
       return {
         isAssigned: false,
         isActive: false,
@@ -229,15 +238,16 @@ class PeopleReport extends Component {
   }
 
   setClassfication(classificationValue) {
-    if (classificationValue != 'Filter Off') {
-      this.setState(state => {
+    const { classificationList } = this.state;
+    if (classificationValue !== 'Filter Off') {
+      this.setState(() => {
         return {
           classification: classificationValue,
-          classificationList: this.state.classificationList.concat(classificationValue),
+          classificationList: classificationList.concat(classificationValue),
         };
       });
     } else {
-      this.setState(state => {
+      this.setState(() => {
         return {
           classification: classificationValue,
           classificationList: [],
@@ -247,13 +257,22 @@ class PeopleReport extends Component {
   }
 
   setUsers(userValue) {
-    this.setState(state => {
+    this.setState(() => {
       return {
         users: userValue,
       };
     });
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  endOfWeek(offset) {
+    return moment()
+      .tz('America/Los_Angeles')
+      .endOf('week')
+      .subtract(offset, 'weeks')
+      .format('YYYY-MM-DD');
+  }
+
   render() {
     const {
       userProfile,
@@ -265,98 +284,29 @@ class PeopleReport extends Component {
       toDate,
       timeEntries,
     } = this.state;
-    const { firstName, lastName, weeklycommittedHours,hoursByCategory } = userProfile;
+    // eslint-disable-next-line no-unused-vars
+    const { firstName, lastName, weeklycommittedHours, hoursByCategory } = userProfile;
+    const { tangibleHoursReportedThisWeek, auth, match } = this.props;
 
-  
-    var totalTangibleHrsRound = 0;
+    let totalTangibleHrsRound = 0;
     if (hoursByCategory) {
-      const hours = hoursByCategory ? Object.values(hoursByCategory).reduce((prev, curr) => prev + curr, 0):0;
+      const hours = hoursByCategory
+        ? Object.values(hoursByCategory).reduce((prev, curr) => prev + curr, 0)
+        : 0;
       totalTangibleHrsRound = hours.toFixed(2);
     }
 
+    // eslint-disable-next-line react/no-unstable-nested-components,no-unused-vars
     const UserProject = props => {
-      let userProjectList = [];
+      const userProjectList = [];
       return <div>{userProjectList}</div>;
     };
-
-    const ClassificationOptions = props => {
-      return (
-        <DropdownButton
-          style={{ margin: '3px' }}
-          exact
-          id="dropdown-basic-button"
-          title="Classification"
-        >
-          {props.allClassification.map((c, index) => (
-            <Dropdown.Item onClick={() => this.setClassfication(c)}>{c}</Dropdown.Item>
-          ))}
-        </DropdownButton>
-      );
-    };
-
-    const StatusOptions = props => {
-      var allStatus = [...Array.from(new Set(props.get_tasks.map(item => item.status))).sort()];
-      allStatus.unshift('Filter Off');
-      return (
-        <DropdownButton style={{ margin: '3px' }} exact id="dropdown-basic-button" title="Status">
-          {allStatus.map((c, index) => (
-            <Dropdown.Item onClick={() => this.setStatus(c)}>{c}</Dropdown.Item>
-          ))}
-        </DropdownButton>
-      );
-    };
-
-    const UserOptions = props => {
-      let users = [];
-      props.userTask.map((task, index) =>
-        task.resources.map(resource => users.push(resource.name)),
-      );
-
-      users = Array.from(new Set(users)).sort();
-      users.unshift('Filter Off');
-      return (
-        <DropdownButton style={{ margin: '3px' }} exact id="dropdown-basic-button" title="Users">
-          {users.map((c, index) => (
-            <Dropdown.Item onClick={() => this.setUsers(c)}>{c}</Dropdown.Item>
-          ))}
-        </DropdownButton>
-      );
-    };
-    const ShowInfringementsCollapse = props => {
-      const [open, setOpen] = useState(false);
-      return (
-        <div>
-          <table className="center">
-            <table className="table table-bordered table-responsive-sm">
-              <thead>
-                <tr>
-                  <th scope="col" id="projects__order">
-                    <Button variant="light" onClick={() => setOpen(!open)} aria-expanded={open}>
-                      ⬇
-                    </Button>
-                  </th>
-
-                  <th scope="col" id="projects__order">
-                    Date
-                  </th>
-                  <th scope="col">Description</th>
-                </tr>
-              </thead>
-              <Collapse in={open}>
-                <tbody>{props.BlueSquare}</tbody>
-              </Collapse>
-            </table>
-          </table>
-        </div>
-      );
-    };
-
+    // eslint-disable-next-line react/no-unstable-nested-components
     const Infringements = props => {
-      let BlueSquare = [];
-      let dict = {};
+      const dict = {};
 
-      //aggregate infringements
-      for (let i = 0; i < props.infringements.length; i++) {
+      // aggregate infringements
+      for (let i = 0; i < props.infringements.length; i += 1) {
         if (props.infringements[i].date in dict) {
           dict[props.infringements[i].date].count += 1;
           dict[props.infringements[i].date].des.push(props.infringements[i].description);
@@ -369,12 +319,11 @@ class PeopleReport extends Component {
       }
 
       const startdate = Object.keys(dict)[0];
-      var startdateStr = '';
       if (startdate) {
-        startdateStr = startdate.toString();
+        startdate.toString();
       }
       if (props.infringements.length > 0) {
-        BlueSquare = props.infringements.map((current, index) => (
+        props.infringements.map((current, index) => (
           <tr className="teams__tr">
             <td>{index + 1}</td>
             <td>{current.date}</td>
@@ -384,21 +333,22 @@ class PeopleReport extends Component {
       }
       return (
         <div>
-          <div></div>
+          <div />
         </div>
       );
     };
 
+    // eslint-disable-next-line react/no-unstable-nested-components,no-unused-vars
     const PeopleDataTable = props => {
-      let peopleData = {
+      const peopleData = {
         alertVisible: false,
         taskData: [],
         color: null,
         message: '',
       };
 
-      for (let i = 0; i < userTask.length; i++) {
-        let task = {
+      for (let i = 0; i < userTask.length; i += 1) {
+        const task = {
           taskName: '',
           priority: '',
           status: '',
@@ -416,7 +366,7 @@ class PeopleReport extends Component {
           endstateInfo: '',
           intentInfo: '',
         };
-        let resourcesName = [];
+        const resourcesName = [];
 
         if (userTask[i].isActive) {
           task.active = 'Yes';
@@ -431,10 +381,10 @@ class PeopleReport extends Component {
         task.taskName = userTask[i].taskName;
         task.priority = userTask[i].priority;
         task.status = userTask[i].status;
-        let n = userTask[i].estimatedHours;
+        const n = userTask[i].estimatedHours;
         task.estimatedHours = n.toFixed(2);
-        for (let j = 0; j < userTask[i].resources.length; j++) {
-          let tempResource = {
+        for (let j = 0; j < userTask[i].resources.length; j += 1) {
+          const tempResource = {
             name: '',
             profilePic: '',
           };
@@ -467,164 +417,170 @@ class PeopleReport extends Component {
       return <PeopleTableDetails taskData={peopleData.taskData} />;
     };
 
-    const renderProfileInfo = () => (
-      <ReportPage.ReportHeader
-        src={this.state.userProfile.profilePic}
-        avatar={this.state.userProfile.profilePic ? undefined : <FiUser />}
-        isActive={isActive}
-      >
-        <div className="report-stats">
-        <p>
-          <Link to={`/userProfile/${userProfile._id}`} title="View Profile">
-            {userProfile.firstName} {userProfile.lastName}
-          </Link>
-        </p>
-        <p>Role: {userProfile.role}</p>
-        <p>Title: {userProfile.jobTitle}</p>
-
-        {userProfile.endDate ? (
-          <div className="rehireable">
-            <Checkbox
-              value={this.state.isRehireable}
-              onChange={() => this.setRehireable(!this.state.isRehireable)}
-              label="Rehireable"
-            />
-          </div>
-        ) : (
-          ''
-        )}
-
-        <div className="stats">
-          <div>
-            <h4>{formatDate(userProfile.createdDate)}</h4>
-            <p>Start Date</p>
-          </div>
-          <div>
-            <h4>
-              {userProfile.endDate ? formatDate(userProfile.endDate) : 'N/A'}
-            </h4>
-            <p>End Date</p>
-          </div>
-          {this.state.bioStatus ? (
-            <div>
-              <h5>
-                Bio {this.state.bioStatus === 'default' ? 'not requested' : this.state.bioStatus}
-              </h5>{' '}
-              {this.state.authRole === 'Administrator' || this.state.authRole === 'Owner' ? (
-                <ToggleSwitch
-                  fontSize={'13px'}
-                  switchType="bio"
-                  state={this.state.bioStatus}
-                  handleUserProfile={bio => onChangeBioPosted(bio)}
+    const renderProfileInfo = () => {
+      const { isRehireable, bioStatus, authRole } = this.state;
+      const { profilePic, role, jobTitle, endDate, _id, createdDate } = userProfile;
+
+      return (
+        <ReportPage.ReportHeader
+          src={profilePic}
+          avatar={profilePic ? undefined : <FiUser />}
+          isActive={isActive}
+        >
+          <div className="report-stats">
+            <p>
+              <Link to={`/userProfile/${_id}`} title="View Profile">
+                {firstName} {lastName}
+              </Link>
+            </p>
+            <p>Role: {role}</p>
+            <p>Title: {jobTitle}</p>
+
+            {endDate ? (
+              <div className="rehireable">
+                <Checkbox
+                  value={isRehireable}
+                  onChange={() => this.setRehireable(!isRehireable)}
+                  label="Rehireable"
                 />
+              </div>
+            ) : (
+              ''
+            )}
+
+            <div className="stats">
+              <div>
+                <h4>{formatDate(createdDate)}</h4>
+                <p>Start Date</p>
+              </div>
+              <div>
+                <h4>{endDate ? formatDate(endDate) : 'N/A'}</h4>
+                <p>End Date</p>
+              </div>
+              {bioStatus ? (
+                <div>
+                  <h5>Bio {bioStatus === 'default' ? 'not requested' : bioStatus}</h5>{' '}
+                  {authRole === 'Administrator' || authRole === 'Owner' ? (
+                    <ToggleSwitch
+                      fontSize="13px"
+                      switchType="bio"
+                      state={bioStatus}
+                      /* eslint-disable-next-line no-use-before-define */
+                      handleUserProfile={bio => onChangeBioPosted(bio)}
+                    />
+                  ) : null}
+                </div>
               ) : null}
             </div>
-          ) : null}
-        </div>
-        </div>
-      </ReportPage.ReportHeader>
-    );
+          </div>
+        </ReportPage.ReportHeader>
+      );
+    };
 
     const onChangeBioPosted = async bio => {
       const bioStatus = bio;
-      this.setState(state => {
+      this.setState(() => {
         return {
-          bioStatus: bioStatus,
+          bioStatus,
         };
       });
 
       try {
-        await this.props.updateUserProfileProperty(this.props.userProfile, 'bioPosted', bioStatus);
+        await updateUserProfileProperty(userProfile, 'bioPosted', bioStatus);
         toast.success('You have changed the bio announcement status of this user.');
       } catch (err) {
+        // eslint-disable-next-line no-alert
         alert('An error occurred while attempting to save the bioPosted change to the profile.');
       }
     };
 
     return (
       <div className="container-people-wrapper">
-      <ReportPage renderProfile={renderProfileInfo}>
-        <div className="people-report-time-logs-wrapper">
-          <ReportPage.ReportBlock
-            firstColor="#ff5e82"
-            secondColor="#e25cb2"
-            className="people-report-time-log-block"
-          >
-            <h3>{weeklycommittedHours}</h3>
-            <p>Weekly Committed Hours</p>
-          </ReportPage.ReportBlock>
-
-          {userProfile.endDate ? (
-            ''
-          ) : (
+        <ReportPage renderProfile={renderProfileInfo}>
+          <div className="people-report-time-logs-wrapper">
             <ReportPage.ReportBlock
-              firstColor="#b368d2"
-              secondColor="#831ec4"
+              firstColor="#ff5e82"
+              secondColor="#e25cb2"
               className="people-report-time-log-block"
             >
-              <h3>{this.props.tangibleHoursReportedThisWeek}</h3>
-              <p>Hours Logged This Week</p>
+              <h3>{weeklycommittedHours}</h3>
+              <p>Weekly Committed Hours</p>
             </ReportPage.ReportBlock>
-          )}
-
-          <ReportPage.ReportBlock
-            firstColor="#64b7ff"
-            secondColor="#928aef"
-            className="people-report-time-log-block"
-          >
-            <h3>{infringements.length}</h3>
-            <p>Blue squares</p>
-          </ReportPage.ReportBlock>
-          <ReportPage.ReportBlock
-            firstColor="#ffdb56"
-            secondColor="#ff9145"
-            className="people-report-time-log-block"
-          >
-            <h3>{totalTangibleHrsRound}</h3>
-            <p>Total Hours Logged</p>
-          </ReportPage.ReportBlock>
-        </div>
 
-        <PeopleTasksPieChart />
-        <div className="mobile-people-table">
-        <ReportPage.ReportBlock>
-          <div className="intro_date">
-            <h4>Tasks contributed</h4>
+            {userProfile.endDate ? (
+              ''
+            ) : (
+              <ReportPage.ReportBlock
+                firstColor="#b368d2"
+                secondColor="#831ec4"
+                className="people-report-time-log-block"
+              >
+                <h3>{tangibleHoursReportedThisWeek}</h3>
+                <p>Hours Logged This Week</p>
+              </ReportPage.ReportBlock>
+            )}
+
+            <ReportPage.ReportBlock
+              firstColor="#64b7ff"
+              secondColor="#928aef"
+              className="people-report-time-log-block"
+            >
+              <h3>{infringements.length}</h3>
+              <p>Blue squares</p>
+            </ReportPage.ReportBlock>
+            <ReportPage.ReportBlock
+              firstColor="#ffdb56"
+              secondColor="#ff9145"
+              className="people-report-time-log-block"
+            >
+              <h3>{totalTangibleHrsRound}</h3>
+              <p>Total Hours Logged</p>
+            </ReportPage.ReportBlock>
           </div>
-            
-          <PeopleDataTable />
-          
-
-          <div className="container">
-            <table>
-              <UserProject userProjects={userProjects} />
-              <Infringements
-                infringements={infringements}
-                fromDate={fromDate}
-                toDate={toDate}
-                timeEntries={timeEntries}
-              />
-              <div className="visualizationDiv">
-                <InfringementsViz
-                  infringements={infringements}
-                  fromDate={fromDate}
-                  toDate={toDate}
-                />
-              </div>
-              <div className="visualizationDiv">
-                <TimeEntriesViz timeEntries={timeEntries} fromDate={fromDate} toDate={toDate} />
-              </div>
-              <div className='visualizationDiv'>
-                <BadgeSummaryViz authId={this.props.auth.user.userid} userId={this.props.match.params.userId} badges={userProfile.badgeCollection} />
+
+          <PeopleTasksPieChart />
+          <div className="mobile-people-table">
+            <ReportPage.ReportBlock>
+              <div className="intro_date">
+                <h4>Tasks contributed</h4>
               </div>
-              <div className='visualizationDiv'>
-                <BadgeSummaryPreview badges={userProfile.badgeCollection} />
+
+              <PeopleDataTable />
+
+              <div className="container">
+                <table>
+                  <UserProject userProjects={userProjects} />
+                  <Infringements
+                    infringements={infringements}
+                    fromDate={fromDate}
+                    toDate={toDate}
+                    timeEntries={timeEntries}
+                  />
+                  <div className="visualizationDiv">
+                    <InfringementsViz
+                      infringements={infringements}
+                      fromDate={fromDate}
+                      toDate={toDate}
+                    />
+                  </div>
+                  <div className="visualizationDiv">
+                    <TimeEntriesViz timeEntries={timeEntries} fromDate={fromDate} toDate={toDate} />
+                  </div>
+                  <div className="visualizationDiv">
+                    <BadgeSummaryViz
+                      authId={auth.user.userid}
+                      userId={match.params.userId}
+                      badges={userProfile.badgeCollection}
+                    />
+                  </div>
+                  <div className="visualizationDiv">
+                    <BadgeSummaryPreview badges={userProfile.badgeCollection} />
+                  </div>
+                </table>
               </div>
-            </table>
+            </ReportPage.ReportBlock>
           </div>
-        </ReportPage.ReportBlock>
-        </div>
-      </ReportPage>
+        </ReportPage>
       </div>
     );
   }
diff --git a/src/components/Reports/PeopleTableDetails.jsx b/src/components/Reports/PeopleTableDetails.jsx
index d57476ff3c..c46ee8789d 100644
--- a/src/components/Reports/PeopleTableDetails.jsx
+++ b/src/components/Reports/PeopleTableDetails.jsx
@@ -5,7 +5,7 @@ import './PeopleTableDetails.css';
 import { NewModal } from '../common/NewModal';
 import TableFilter from './TableFilter/TableFilter';
 
-const PeopleTableDetails = props => {
+function PeopleTableDetails(props) {
   const [name, setName] = useState('');
   const [priority, setPriority] = useState('');
   const [status, setStatus] = useState('');
@@ -14,12 +14,8 @@ const PeopleTableDetails = props => {
   const [assign, setAssign] = useState('');
   const [estimatedHours, setEstimatedHours] = useState('');
   const [order, setOrder] = useState('');
-  const [deleteId, setDeleteId] = useState('');
-  const [deleteName, setDeleteName] = useState('');
-  const [deletePopup, setDeletePopup] = useState(false);
-  const [editPopup, setEditPopup] = useState(false);
-  const [startDate, setStartDate] = useState('');
-  const [endDate, setEndDate] = useState('');
+  const [startDate] = useState('');
+  const [endDate] = useState('');
 
   const onTaskNameSearch = text => {
     setName(text);
@@ -61,7 +57,9 @@ const PeopleTableDetails = props => {
   };
 
   const filterTasks = tasks => {
-    let simple = [];
+    // eslint-disable-next-line no-unused-vars
+    const simple = [];
+    // eslint-disable-next-line array-callback-return,consistent-return
     let filteredList = tasks.filter(task => {
       if (
         task.taskName.toLowerCase().includes(name.toLowerCase()) &&
@@ -76,7 +74,7 @@ const PeopleTableDetails = props => {
     });
     filteredList = filteredList.filter(task => {
       let flag = false;
-      for (let i = 0; i < task.resources[0].length; i++) {
+      for (let i = 0; i < task.resources[0].length; i += 1) {
         if (task.resources[0][i].name.toLowerCase().includes(resources.toLowerCase())) {
           flag = true;
           break;
@@ -88,7 +86,7 @@ const PeopleTableDetails = props => {
   };
   let toggleMoreResourcesStatus = true;
   const toggleMoreResources = id => {
-    let x = document.getElementById(id);
+    const x = document.getElementById(id);
     if (toggleMoreResourcesStatus) {
       x.style.display = 'table-cell';
     } else {
@@ -96,7 +94,8 @@ const PeopleTableDetails = props => {
     }
     toggleMoreResourcesStatus = !toggleMoreResourcesStatus;
   };
-  let filteredTasks = filterTasks(props.taskData);
+  const { taskData } = props;
+  const filteredTasks = filterTasks(taskData);
 
   const renderFilteredTask = value => (
     <div key={value._id} className="people-table-row people-table-body-row">
@@ -117,18 +116,24 @@ const PeopleTableDetails = props => {
                 />
               );
             }
+            return null;
           }),
         )}
         {value.resources?.map(res =>
           res.length > 2 ? (
-            <a className="name resourceMoreToggle" onClick={() => toggleMoreResources(value._id)}>
+            <button
+              type="button"
+              className="name resourceMoreToggle"
+              onClick={() => toggleMoreResources(value._id)}
+            >
               <span className="dot">{res.length - 2}+</span>
-            </a>
+            </button>
           ) : null,
         )}
         <div id={value._id} className="extra">
           <div className="extra1">
             {value.resources?.map(res =>
+              // eslint-disable-next-line array-callback-return,consistent-return
               res.map((resource, index) => {
                 if (index >= 2) {
                   return (
@@ -193,7 +198,7 @@ const PeopleTableDetails = props => {
       </div>
       <div className="people-table">
         {filteredTasks.map(value => (
-          <NewModal header={'Task info'} trigger={() => renderFilteredTask(value)}>
+          <NewModal header="Task info" trigger={() => renderFilteredTask(value)}>
             <div>Why This Task is important</div>
             <textarea className="rectangle" type="text" value={value.whyInfo} />
             <div>Design Intent</div>
@@ -205,6 +210,6 @@ const PeopleTableDetails = props => {
       </div>
     </Container>
   );
-};
+}
 
 export default PeopleTableDetails;
diff --git a/src/components/Reports/ProjectTable.jsx b/src/components/Reports/ProjectTable.jsx
index 577c94d1f1..274a79defe 100644
--- a/src/components/Reports/ProjectTable.jsx
+++ b/src/components/Reports/ProjectTable.jsx
@@ -1,29 +1,28 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react';
 import './reports.css';
 import { Link } from 'react-router-dom';
 
-const ProjectTable = props => {
+function ProjectTable({ projects }) {
   // Display project lists
   let ProjectsList = [];
-  if (props.projects.length > 0) {
-    ProjectsList = props.projects.map((project, index) => (
-      <tr id={'tr_' + project._id} key={project._id}>
+  if (projects.length > 0) {
+    ProjectsList = projects.map((project, index) => (
+      <tr id={`tr_${project._id}`} key={project._id}>
         <th scope="row">
           <div>{index + 1}</div>
         </th>
         <td>
-          <Link to={`/projectreport/${project._id}`}>
-            {project.projectName}
-          </Link>
+          <Link to={`/projectreport/${project._id}`}>{project.projectName}</Link>
         </td>
         <td>
           {project.isActive ? (
             <div className="isActive">
-              <i className="fa fa-circle" aria-hidden="true"></i>
+              <i className="fa fa-circle" aria-hidden="true" />
             </div>
           ) : (
             <div className="isNotActive">
-              <i className="fa fa-circle-o" aria-hidden="true"></i>
+              <i className="fa fa-circle-o" aria-hidden="true" />
             </div>
           )}
         </td>
@@ -47,5 +46,5 @@ const ProjectTable = props => {
       <tbody>{ProjectsList}</tbody>
     </table>
   );
-};
+}
 export default ProjectTable;
diff --git a/src/components/Reports/ReportTableSearchPanel.jsx b/src/components/Reports/ReportTableSearchPanel.jsx
index d6c2452b7a..c2953eebd2 100644
--- a/src/components/Reports/ReportTableSearchPanel.jsx
+++ b/src/components/Reports/ReportTableSearchPanel.jsx
@@ -1,11 +1,13 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react';
 import { SEARCH } from '../../languages/en/ui';
 import './reportsPage.css';
 
 /**
- * The search panel stateless component for  Rreport grid
+ * The search panel stateless component for Report grid
  */
-function ReportTableSearchPanel(props) {
+function ReportTableSearchPanel({ onSearch }) {
+  // Destructure onSearch here
   return (
     <div className="input-group" id="new_team">
       <div className="input-group-prepend">
@@ -13,6 +15,7 @@ function ReportTableSearchPanel(props) {
       </div>
 
       <input
+        /* eslint-disable-next-line jsx-a11y/no-autofocus */
         autoFocus
         type="text"
         className="form-control search-field-container"
@@ -20,7 +23,7 @@ function ReportTableSearchPanel(props) {
         placeholder="Search Text"
         id="team-profiles-wild-card-search"
         onChange={e => {
-          props.onSearch(e.target.value);
+          onSearch(e.target.value); // Use destructured onSearch directly
         }}
       />
     </div>
diff --git a/src/components/Reports/TeamTable.jsx b/src/components/Reports/TeamTable.jsx
index de467c11a2..1957314b11 100644
--- a/src/components/Reports/TeamTable.jsx
+++ b/src/components/Reports/TeamTable.jsx
@@ -1,20 +1,19 @@
+// eslint-disable-next-line no-unused-vars
 import React from 'react';
 import { Link } from 'react-router-dom';
 import './TeamTable.css';
 
-function TeamTable(props) {
+function TeamTable({ allTeams }) {
   // Display project lists
   let TeamsList = [];
-  if (props.allTeams.length > 0) {
-    TeamsList = props.allTeams.map((team, index) => (
+  if (allTeams.length > 0) {
+    TeamsList = allTeams.map((team, index) => (
       <tr id={`tr_${team._id}`} key={team._id}>
         <th scope="row">
           <div>{index + 1}</div>
         </th>
         <td>
-          <Link to={`/teamreport/${team._id}`}>
-            {team.teamName}
-          </Link>
+          <Link to={`/teamreport/${team._id}`}>{team.teamName}</Link>
         </td>
         <td className="projects__active--input">
           {team.isActive ? (
diff --git a/src/components/Reports/TimeEntriesViz.jsx b/src/components/Reports/TimeEntriesViz.jsx
index 6b27a465c2..3fb943e5ce 100644
--- a/src/components/Reports/TimeEntriesViz.jsx
+++ b/src/components/Reports/TimeEntriesViz.jsx
@@ -1,12 +1,13 @@
 import React from 'react';
 import * as d3 from 'd3/dist/d3.min';
 import { Button } from 'react-bootstrap';
-import { boxStyle } from 'styles';
+import { boxStyle } from '../../styles';
 
-const TimeEntriesViz = ({ timeEntries, fromDate, toDate }) => {
+function TimeEntriesViz({ timeEntries, fromDate, toDate }) {
   const [show, setShow] = React.useState(false);
 
   React.useEffect(() => {
+    // eslint-disable-next-line no-use-before-define
     generateGraph();
   }, [show, fromDate, toDate]);
 
@@ -15,44 +16,38 @@ const TimeEntriesViz = ({ timeEntries, fromDate, toDate }) => {
       d3.selectAll('#tlplot > *').remove();
     } else {
       d3.selectAll('#tlplot > *').remove();
-      const margin = { top: 10, right: 30, bottom: 30, left: 60 },
-        width = 1000 - margin.left - margin.right,
-        height = 400 - margin.top - margin.bottom;
+      const margin = { top: 10, right: 30, bottom: 30, left: 60 };
+      const width = 1000 - margin.left - margin.right;
+      const height = 400 - margin.top - margin.bottom;
 
-      var tooltipEl = function(d) {
+      const tooltipEl = function generateTooltipElement(d) {
         return (
-          '<div class="tip__container">' +
-          '<div class="close">' +
-          '<button>&times</button>' +
-          '</div>' +
-          '<div>' +
-          'Exact date: ' +
-          d3.timeFormat('%A, %B %e, %Y')(d.date) +
-          '<br>' +
-          'Hours logged on this day: ' +
-          d.count.toFixed(2) +
-          '</div>' +
-          '</div>'
+          `${'<div class="tip__container">' +
+            '<div class="close">' +
+            '<button>&times</button>' +
+            '</div>' +
+            '<div>' +
+            'Exact date: '}${d3.timeFormat('%A, %B %e, %Y')(d.date)}<br>` +
+          `Hours logged on this day: ${d.count.toFixed(2)}</div>` +
+          `</div>`
         );
       };
 
-      var legendEl = function(totalHours) {
+      const legendEl = function generateLegendElement(innerTotalHours) {
         return (
-          '<div class="lengendSubContainer">' +
-          '<div class="totalCount">' +
-          'Total Hours: ' +
-          totalHours.toFixed(2) +
-          '</div>' +
-          '<div class="entLabelsOff">' +
-          '<button>Labels Off</button>' +
-          '</div>' +
-          '<div class="entCountLabelsOn">' +
-          '<button>Show Daily Hours</button>' +
-          '</div>' +
-          '<div class="entDateLabelsOn">' +
-          '<button>Show Dates</button>' +
-          '</div>' +
-          '</div>'
+          `${'<div class="lengendSubContainer">' +
+            '<div class="totalCount">' +
+            'Total Hours: '}${innerTotalHours.toFixed(2)}</div>` +
+          `<div class="entLabelsOff">` +
+          `<button>Labels Off</button>` +
+          `</div>` +
+          `<div class="entCountLabelsOn">` +
+          `<button>Show Daily Hours</button>` +
+          `</div>` +
+          `<div class="entDateLabelsOn">` +
+          `<button>Show Dates</button>` +
+          `</div>` +
+          `</div>`
         );
       };
 
@@ -105,11 +100,11 @@ const TimeEntriesViz = ({ timeEntries, fromDate, toDate }) => {
         .attr('stroke', '#69b3a2')
         .attr('stroke-width', 3)
         .attr('fill', 'white')
-        .on('click', function(event, d) {
-          let prevTooltip = d3.select(`.ent${d.id}`);
+        .on('click', function handleEvent(event, d) {
+          const prevTooltip = d3.select(`.ent${d.id}`);
 
           if (prevTooltip.empty()) {
-            let Tooltip = d3
+            const Tooltip = d3
               .select('#tlplot')
               .append('div')
               .style('opacity', 0)
@@ -126,7 +121,7 @@ const TimeEntriesViz = ({ timeEntries, fromDate, toDate }) => {
               .style('top', `${event.pageY}px`)
               .style('opacity', 1);
 
-            Tooltip.select('.close').on('click', function() {
+            Tooltip.select('.close').on('click', function closeTooltip() {
               Tooltip.remove();
             });
           }
@@ -160,7 +155,7 @@ const TimeEntriesViz = ({ timeEntries, fromDate, toDate }) => {
         .style('display', 'none')
         .text(d => d3.timeFormat('%m/%d/%Y')(d.date));
 
-      let legend = d3
+      const legend = d3
         .select('#tlplot')
         .append('div')
         .attr('class', 'legendContainer')
@@ -170,17 +165,17 @@ const TimeEntriesViz = ({ timeEntries, fromDate, toDate }) => {
 
       legend.html(legendEl(totalHours));
 
-      legend.select('.entLabelsOff').on('click', function() {
+      legend.select('.entLabelsOff').on('click', function handleEntLabelsOffClick() {
         d3.selectAll('.entCountLabel').style('display', 'none');
         d3.selectAll('.entDateLabel').style('display', 'none');
       });
 
-      legend.select('.entCountLabelsOn').on('click', function() {
+      legend.select('.entCountLabelsOn').on('click', function handleEntCountLabelsOnClick() {
         d3.selectAll('.entCountLabel').style('display', 'block');
         d3.selectAll('.entDateLabel').style('display', 'none');
       });
 
-      legend.select('.entDateLabelsOn').on('click', function() {
+      legend.select('.entDateLabelsOn').on('click', function handleEntDateLabelsOnClick() {
         d3.selectAll('.entDateLabel').style('display', 'block');
         d3.selectAll('.entCountLabel').style('display', 'none');
       });
@@ -188,19 +183,19 @@ const TimeEntriesViz = ({ timeEntries, fromDate, toDate }) => {
   }
 
   const generateGraph = () => {
-    let timeEntriesDict = {};
-    let timeEntryvalues = [];
+    const timeEntriesDict = {};
+    const timeEntryvalues = [];
     let maxHoursCount = 0;
     let totalHours = 0;
 
-    //aggregate entries
+    // aggregate entries
     if (timeEntries.period) {
-      for (let i = 0; i < timeEntries.period.length; i++) {
-        let convertedHours =
-          parseInt(timeEntries.period[i].hours) +
+      for (let i = 0; i < timeEntries.period.length; i += 1) {
+        const convertedHours =
+          parseInt(timeEntries.period[i].hours, 10) +
           (timeEntries.period[i].minutes === '0'
             ? 0
-            : parseInt(timeEntries.period[i].minutes) / 60);
+            : parseInt(timeEntries.period[i].minutes, 10) / 60);
         totalHours += convertedHours;
         if (timeEntries.period[i].dateOfWork in timeEntriesDict) {
           timeEntriesDict[timeEntries.period[i].dateOfWork].time += convertedHours;
@@ -215,12 +210,12 @@ const TimeEntriesViz = ({ timeEntries, fromDate, toDate }) => {
       }
     }
 
-    //filter time entries by date
-    if (fromDate == '' || toDate == '') {
-      //if cond not needed
-      for (var key in timeEntriesDict) {
+    // filter time entries by date
+    if (fromDate === '' || toDate === '') {
+      // if cond not needed
+      Object.keys(timeEntriesDict).forEach(key => {
         timeEntryvalues.push({
-          date: d3.timeParse('%Y-%m-%d')(key.toString()),
+          date: d3.timeParse('%Y-%m-%d')(key),
           count: timeEntriesDict[key].time,
           des: timeEntriesDict[key].des,
           isTangible: timeEntriesDict[key].isTangible,
@@ -229,31 +224,31 @@ const TimeEntriesViz = ({ timeEntries, fromDate, toDate }) => {
         if (timeEntriesDict[key].time > maxHoursCount) {
           maxHoursCount = timeEntriesDict[key].time;
         }
-      }
+      });
     } else {
       let counter = 0;
-      for (var key in timeEntriesDict) {
+      Object.keys(timeEntriesDict).forEach(currentKey => {
         if (
-          (Date.parse(fromDate) <= Date.parse(key.toString())) &
-          (Date.parse(key.toString()) <= Date.parse(toDate))
+          Date.parse(fromDate) <= Date.parse(currentKey.toString()) &&
+          Date.parse(currentKey.toString()) <= Date.parse(toDate)
         ) {
           timeEntryvalues.push({
             id: counter,
-            date: d3.timeParse('%Y-%m-%d')(key.toString()),
-            count: timeEntriesDict[key].time,
-            des: timeEntriesDict[key].des,
-            isTangible: timeEntriesDict[key].isTangible,
+            date: d3.timeParse('%Y-%m-%d')(currentKey.toString()),
+            count: timeEntriesDict[currentKey].time,
+            des: timeEntriesDict[currentKey].des,
+            isTangible: timeEntriesDict[currentKey].isTangible,
             type: 'Entry',
           });
-          if (timeEntriesDict[key].time > maxHoursCount) {
-            maxHoursCount = timeEntriesDict[key].time;
+          if (timeEntriesDict[currentKey].time > maxHoursCount) {
+            maxHoursCount = timeEntriesDict[currentKey].time;
           }
           counter += 1;
         }
-      }
+      });
     }
 
-    timeEntryvalues.sort(function(a, b) {
+    timeEntryvalues.sort(function sortDates(a, b) {
       return new Date(b.date) - new Date(a.date);
     });
 
@@ -265,9 +260,9 @@ const TimeEntriesViz = ({ timeEntries, fromDate, toDate }) => {
       <Button onClick={() => setShow(!show)} aria-expanded={show} style={boxStyle}>
         Show Time Entries Graph
       </Button>
-      <div id="tlplot"></div>
+      <div id="tlplot" />
     </div>
   );
-};
+}
 
 export default TimeEntriesViz;
diff --git a/src/components/Reports/index.js b/src/components/Reports/index.js
index 7b5807188a..3464662d14 100644
--- a/src/components/Reports/index.js
+++ b/src/components/Reports/index.js
@@ -1 +1,3 @@
-export { default } from './Reports';
+import Reports from './Reports';
+
+export default Reports;
diff --git a/src/components/Teams/TeamMembersPopup.jsx b/src/components/Teams/TeamMembersPopup.jsx
index 5ae9fcbf45..15ea1b95d1 100644
--- a/src/components/Teams/TeamMembersPopup.jsx
+++ b/src/components/Teams/TeamMembersPopup.jsx
@@ -8,7 +8,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSort, faSortUp, faSortDown } from '@fortawesome/free-solid-svg-icons';
 import { connect } from 'react-redux';
 
-const TeamMembersPopup = React.memo(props => {
+export const TeamMembersPopup = React.memo(props => {
   const closePopup = () => {
     props.onClose();
     setSortOrder(0)
diff --git a/src/components/Timelog/Timelog.jsx b/src/components/Timelog/Timelog.jsx
index 74fb5a8fd7..e997d32d68 100644
--- a/src/components/Timelog/Timelog.jsx
+++ b/src/components/Timelog/Timelog.jsx
@@ -204,8 +204,7 @@ const Timelog = props => {
     props.getTimeEntriesForPeriod(userId, state.fromDate, state.toDate);
   };
 
-  // startOfWeek returns the date of the start of the week based on offset. Offset is the number of weeks before.
-  // For example, if offset is 0, returns the start of this week. If offset is 1, returns the start of last week.
+
   const startOfWeek = offset => {
     return moment()
       .tz('America/Los_Angeles')
@@ -277,6 +276,7 @@ const Timelog = props => {
     }
   };
 
+
   const buildOptions = async () => {
     //build options for the project and task
     let projects = [];
@@ -284,6 +284,7 @@ const Timelog = props => {
       projects = userProjects.projects;
     }
     const options = projects.map(project => (
+      (project?.projectId != undefined) &&
       <option value={project.projectId} key={project.projectId}>
         {' '}
         {project.projectName}{' '}
diff --git a/src/components/UserProfile/AddNewUserProfile/UserProfileAdd.jsx b/src/components/UserProfile/AddNewUserProfile/UserProfileAdd.jsx
index 4dcd46c6df..47e0500271 100644
--- a/src/components/UserProfile/AddNewUserProfile/UserProfileAdd.jsx
+++ b/src/components/UserProfile/AddNewUserProfile/UserProfileAdd.jsx
@@ -24,7 +24,7 @@ import { toast } from 'react-toastify';
 import TeamsTab from '../TeamsAndProjects/TeamsTab';
 import ProjectsTab from '../TeamsAndProjects/ProjectsTab';
 import { connect } from 'react-redux';
-import { get } from 'lodash';
+import { assign, get } from 'lodash';
 import { getUserProfile, updateUserProfile, clearUserProfile } from '../../../actions/userProfile';
 import {
   getAllUserTeams,
@@ -115,13 +115,13 @@ class AddUserProfile extends Component {
     this.state.showphone = true;
     this.onCreateNewUser();
   }
-
+  
+  
   render() {
     const { firstName, email, lastName, phoneNumber, role, jobTitle } = this.state.userProfile;
     const phoneNumberEntered =
       this.state.userProfile.phoneNumber === null ||
       this.state.userProfile.phoneNumber.length === 0;
-
     return (
       <StickyContainer>
         <DuplicateNamePopup
@@ -430,6 +430,7 @@ class AddUserProfile extends Component {
                     codeValid={this.state.codeValid}
                     setCodeValid={this.setCodeValid}
                     edit
+                    userProfile={this.state.userProfile}
                   />
                 </TabPane>
               </TabContent>
@@ -482,7 +483,6 @@ class AddUserProfile extends Component {
   onAssignTeam = assignedTeam => {
     const teams = [...this.state.teams];
     teams.push(assignedTeam);
-
     this.setState({
       teams: teams,
     });
@@ -670,6 +670,12 @@ class AddUserProfile extends Component {
               return;
             } else {
               toast.success('User profile created.');
+              this.state.userProfile._id = res.data._id;
+              if(this.state.teams.length > 0){
+                this.state.teams.forEach((team) => {
+                  this.props.addTeamMember(team._id, res.data._id, res.data.firstName, res.data.lastName)
+                })
+              }
             }
             this.props.userCreated();
           })
diff --git a/src/components/UserProfile/TeamsAndProjects/TeamsTab.jsx b/src/components/UserProfile/TeamsAndProjects/TeamsTab.jsx
index 090ea0fea7..c62c1591b5 100644
--- a/src/components/UserProfile/TeamsAndProjects/TeamsTab.jsx
+++ b/src/components/UserProfile/TeamsAndProjects/TeamsTab.jsx
@@ -1,6 +1,7 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import AddTeamPopup from './AddTeamPopup';
 import UserTeamsTable from './UserTeamsTable';
+import { addTeamMember, deleteTeamMember } from 'actions/allTeamsAction';
 
 const TeamsTab = props => {
   const {
@@ -21,9 +22,20 @@ const TeamsTab = props => {
     userProfile,
     codeValid,
     setCodeValid,
+    saved,
   } = props;
   const [addTeamPopupOpen, setaddTeamPopupOpen] = useState(false);
   const [renderedOn, setRenderedOn] = useState(0);
+  const [removedTeams, setRemovedTeams] = useState([]);
+
+  useEffect(() => {
+    if(saved && removedTeams.length > 0){
+      removedTeams.forEach(teamId => {
+        deleteTeamMember(teamId, userProfile._id);
+        setRemovedTeams([]);
+      })
+    }
+  }, [saved]);
 
   const onAddTeamPopupShow = () => {
     setaddTeamPopupOpen(true);
@@ -33,10 +45,14 @@ const TeamsTab = props => {
     setaddTeamPopupOpen(false);
   };
   const onSelectDeleteTeam = teamId => {
+    setRemovedTeams([...removedTeams, teamId]);
     onDeleteTeam(teamId);
   };
 
   const onSelectAssignTeam = team => {
+    if(userProfile._id){
+      addTeamMember(team._id, userProfile._id, userProfile.firstName, userProfile.lastName)
+    }
     onAssignTeam(team);
     setRenderedOn(Date.now());
   };
diff --git a/src/components/UserProfile/UserProfile.jsx b/src/components/UserProfile/UserProfile.jsx
index ae6cd4bc28..ff438d289e 100644
--- a/src/components/UserProfile/UserProfile.jsx
+++ b/src/components/UserProfile/UserProfile.jsx
@@ -50,8 +50,10 @@ import { UserStatus } from '../../utils/enums';
 import BlueSquareLayout from './BlueSquareLayout';
 import TeamWeeklySummaries from './TeamWeeklySummaries/TeamWeeklySummaries';
 import { boxStyle } from 'styles';
-import { connect } from 'react-redux';
+import { connect, useDispatch } from 'react-redux';
 import { formatDate } from 'utils/formatDate';
+import { fetchAllProjects } from '../../actions/projects';
+import { getAllUserTeams } from '../../actions/allTeamsAction';
 
 function UserProfile(props) {
   /* Constant values */
@@ -61,6 +63,7 @@ function UserProfile(props) {
     email: true,
   };
   const roles = props?.role.roles;
+  const dispatch = useDispatch();
 
   /* Hooks */
   const [showLoading, setShowLoading] = useState(true);
@@ -92,6 +95,7 @@ function UserProfile(props) {
   const [summarySelected, setSummarySelected] = useState(null);
   const [summaryName, setSummaryName] = useState('');
   const [showSummary, setShowSummary] = useState(false);
+  const [saved, setSaved] = useState(false);
 
   const userProfileRef = useRef();
 
@@ -103,9 +107,10 @@ function UserProfile(props) {
   const [userEndDate, setUserEndDate] = useState('');
 
   /* useEffect functions */
-
   useEffect(() => {
     loadUserProfile();
+    dispatch(fetchAllProjects());
+    dispatch(getAllUserTeams());
   }, []);
 
   useEffect(() => {
@@ -427,6 +432,7 @@ function UserProfile(props) {
       }
       await loadUserProfile();
       await loadUserTasks();
+      setSaved(false)
     } catch (err) {
       alert('An error occurred while attempting to save this profile.');
     }
@@ -446,7 +452,7 @@ function UserProfile(props) {
     setShowModal(false);
     setUserProfile({
       ...userProfile,
-      mediaUrl:mediaUrlUpdate !== undefined ? mediaUrlUpdate : userProfile.mediaUrl,
+      mediaUrl: mediaUrlUpdate !== undefined ? mediaUrlUpdate : userProfile.mediaUrl,
       personalLinks: personalLinksUpdate,
       adminLinks: adminLinksUpdate,
     });
@@ -556,8 +562,8 @@ function UserProfile(props) {
   const canEditUserProfile = targetIsDevAdminUneditable
     ? false
     : userProfile.role === 'Owner'
-    ? canAddDeleteEditOwners
-    : canPutUserProfile;
+      ? canAddDeleteEditOwners
+      : canPutUserProfile;
 
   const canEdit = canEditUserProfile || isUserSelf;
 
@@ -646,7 +652,7 @@ function UserProfile(props) {
                 Please click on &quot;Save changes&quot; to save the changes you have made.{' '}
               </Alert>
             ) : null}
-              {!codeValid ? (
+            {!codeValid ? (
               <Alert color="danger">
                 The code format should be A-AAA or AAAAA.
               </Alert>
@@ -881,6 +887,7 @@ function UserProfile(props) {
                   userProfile={userProfile}
                   codeValid={codeValid}
                   setCodeValid={setCodeValid}
+                  saved={saved}
                 />
               </TabPane>
               <TabPane tabId="4">
@@ -954,8 +961,8 @@ function UserProfile(props) {
                             if (selfIsDevAdminUneditable) {
                               alert(
                                 'STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS PASSWORD. ' +
-                                  'You shouldn’t even be using this account except to create your own accounts to use. ' +
-                                  'Please re-read the Local Setup Doc to understand why and what you should be doing instead of what you are trying to do now.',
+                                'You shouldn’t even be using this account except to create your own accounts to use. ' +
+                                'Please re-read the Local Setup Doc to understand why and what you should be doing instead of what you are trying to do now.',
                               );
                               return `#`;
                             }
@@ -980,6 +987,7 @@ function UserProfile(props) {
                               (isProfileEqual && isTasksEqual && isTeamsEqual && isProjectsEqual)
                             }
                             userProfile={userProfile}
+                            setSaved={()=>setSaved(true)}
                           />
                           <span
                             onClick={() => {
@@ -1035,6 +1043,7 @@ function UserProfile(props) {
                               (isProfileEqual && isTasksEqual && isTeamsEqual && isProjectsEqual)
                             }
                             userProfile={userProfile}
+                            setSaved={()=>setSaved(true)}
                           />
                           <span
                             onClick={() => {
@@ -1062,6 +1071,7 @@ function UserProfile(props) {
                 <ModalBody>
                   <TeamsTab
                     userTeams={userProfile?.teams || []}
+
                     teamsData={props?.allTeams?.allTeamsData || []}
                     onAssignTeam={onAssignTeam}
                     onDeleteTeam={onDeleteTeam}
@@ -1100,6 +1110,7 @@ function UserProfile(props) {
                               (isProfileEqual && isTasksEqual && isTeamsEqual && isProjectsEqual)
                             }
                             userProfile={userProfile}
+                            setSaved={()=>setSaved(true)}
                           />
                           <span
                             onClick={() => {
@@ -1160,6 +1171,7 @@ function UserProfile(props) {
                               (isProfileEqual && isTasksEqual && isTeamsEqual && isProjectsEqual)
                             }
                             userProfile={userProfile}
+                            setSaved={()=>setSaved(true)}
                           />
                           <span
                             onClick={() => {
@@ -1207,6 +1219,7 @@ function UserProfile(props) {
                               (isProfileEqual && isTasksEqual && isTeamsEqual && isProjectsEqual)
                             }
                             userProfile={userProfile}
+                            setSaved={()=>setSaved(true)}
                           />
                           <span
                             onClick={() => {
@@ -1247,8 +1260,8 @@ function UserProfile(props) {
                     if (selfIsDevAdminUneditable) {
                       alert(
                         'STOP! YOU SHOULDN’T BE TRYING TO CHANGE THIS PASSWORD. ' +
-                          'You shouldn’t even be using this account except to create your own accounts to use. ' +
-                          'Please re-read the Local Setup Doc to understand why and what you should be doing instead of what you are trying to do now.',
+                        'You shouldn’t even be using this account except to create your own accounts to use. ' +
+                        'Please re-read the Local Setup Doc to understand why and what you should be doing instead of what you are trying to do now.',
                       );
                       return `#`;
                     }
@@ -1274,6 +1287,7 @@ function UserProfile(props) {
                       (isProfileEqual && isTasksEqual && isTeamsEqual && isProjectsEqual)
                     }
                     userProfile={userProfile}
+                    setSaved={()=>setSaved(true)}
                   />
                   {activeTab !== '3' && (
                     <span
diff --git a/src/components/UserProfile/UserProfileEdit/SaveButton.jsx b/src/components/UserProfile/UserProfileEdit/SaveButton.jsx
index ebce5edb71..572cfe29f0 100644
--- a/src/components/UserProfile/UserProfileEdit/SaveButton.jsx
+++ b/src/components/UserProfile/UserProfileEdit/SaveButton.jsx
@@ -29,12 +29,13 @@ const validTeamCodeRegex = /^([a-zA-Z]-[a-zA-Z]{3}|[a-zA-Z]{5})$/;
  * @returns
  */
 const SaveButton = props => {
-  const { handleSubmit, disabled, userProfile } = props;
+  const { handleSubmit, disabled, userProfile, setSaved } = props;
   const [modal, setModal] = useState(false);
   const [randomMessage, setRandomMessage] = useState(getRandomMessage());
 
   const handleSave = () => {
     handleSubmit();
+    setSaved();
     setModal(true);
   };
 
diff --git a/src/components/UserProfile/UserProfileEdit/UserProfileEdit.jsx b/src/components/UserProfile/UserProfileEdit/UserProfileEdit.jsx
index 28ca737be0..53ffd7c331 100644
--- a/src/components/UserProfile/UserProfileEdit/UserProfileEdit.jsx
+++ b/src/components/UserProfile/UserProfileEdit/UserProfileEdit.jsx
@@ -934,6 +934,7 @@ class UserProfileEdit extends Component {
                       onDeleteTeam={this.onDeleteTeam}
                       role={requestorRole}
                       edit
+                      userProfile={this.state ? this.state.userProfile : []}
                     />
                   </TabPane>
                   <TabPane tabId="4">
diff --git a/src/constants/rolePermissionPresets.js b/src/constants/rolePermissionPresets.js
new file mode 100644
index 0000000000..ca60037476
--- /dev/null
+++ b/src/constants/rolePermissionPresets.js
@@ -0,0 +1,11 @@
+// INIT PRESETS
+export const RECEIVE_PRESETS = 'RECEIVE_PRESETS';
+
+// ADD NEW PRESET
+export const ADD_NEW_PRESET = 'ADD_NEW_PRESET';
+
+// UPDATE PRESET
+export const UPDATE_PRESET = 'UPDATE_PRESET';
+
+// DELETE PRESET
+export const DELETE_PRESET = 'DELETE_PRESET';
diff --git a/src/reducers/index.js b/src/reducers/index.js
index 73781fe8a7..8fe0b3c93a 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -24,6 +24,7 @@ import { badgeReducer } from './badgeReducer';
 import { popupEditorReducer } from './popupEditorReducer';
 import { timeZoneAPIReducer } from './timezoneApiReducer';
 import { roleReducer } from './roleReducer';
+import { rolePresetReducer } from './rolePresetReducer';
 import { ownerMessageReducer } from './ownerMessageReducer';
 import { ownerStandardMessageReducer } from './ownerStandardMessageReducer';
 import { infoCollectionsReducer} from './informationReducer';
@@ -58,6 +59,7 @@ export default combineReducers({
   teamMemberTasks: teamMemberTasksReducer,
   taskEditSuggestions: taskEditSuggestionsReducer,
   role: roleReducer,
+  rolePreset: rolePresetReducer,
   ownerMessage: ownerMessageReducer,
   ownerStandardMessage: ownerStandardMessageReducer,
   infoCollections: infoCollectionsReducer,
diff --git a/src/reducers/rolePresetReducer.js b/src/reducers/rolePresetReducer.js
new file mode 100644
index 0000000000..5fd0952cd8
--- /dev/null
+++ b/src/reducers/rolePresetReducer.js
@@ -0,0 +1,33 @@
+import * as types from "../constants/rolePermissionPresets";
+
+const initialState = {
+  presets: [],
+};
+
+export const rolePresetReducer = (state = initialState, action) => {
+  switch (action.type) {
+    case types.RECEIVE_PRESETS:
+      return { ...state, presets: action.presets };
+
+    case types.ADD_NEW_PRESET:
+      const toAdd = state.presets;
+      toAdd.push(action.payload);
+      return { ...state, presets: toAdd };
+
+    case types.UPDATE_PRESET:
+      const presetUpdated = action.payload;
+      const indexPresetUpdated = state.presets.findIndex(preset => preset._id === presetUpdated._id);
+      const presetsCopy = state.presets;
+
+      presetsCopy[indexPresetUpdated].presetName = presetUpdated.presetName;
+
+      return { ...state, presets: presetsCopy };
+
+    case types.DELETE_PRESET:
+      const presetsFiltered = state.presets.filter(preset => preset._id != action.presetId);
+      return {...state, presets: presetsFiltered};
+
+    default:
+      return state;
+  }
+};
diff --git a/src/routes.js b/src/routes.js
index 02e66a0df4..4fa57b67f9 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -44,6 +44,7 @@ import BMProtectedRoute from 'components/common/BMDashboard/BMProtectedRoute';
 import BMDashboard from 'components/BMDashboard';
 import BMLogin from 'components/BMDashboard/Login';
 import MaterialsList from 'components/BMDashboard/MaterialsList';
+import ProjectDetails from 'components/BMDashboard/Projects/ProjectDetails/ProjectDetails';
 
 export default (
   <>
@@ -156,10 +157,13 @@ export default (
 
       <BMProtectedRoute path="/bmdashboard" exact component={BMDashboard} />
       <Route path="/bmdashboard/login" component={BMLogin} />
+      <BMProtectedRoute path="/bmdashboard/projects/:projectId" component={ProjectDetails} />
       <BMProtectedRoute path="/bmdashboard/materials-list" component={MaterialsList} />
       {/* Temporary route to redirect all subdirectories to login if unauthenticated */}
       <BMProtectedRoute path="/bmdashboard/:path" component={BMDashboard} />
       
+  
+      
       {/* ----- END BM Dashboard Routing ----- */}
 
       <Route path="/login" component={Login} />
diff --git a/src/utils/URL.js b/src/utils/URL.js
index 6950456eb9..0c599e6eb6 100644
--- a/src/utils/URL.js
+++ b/src/utils/URL.js
@@ -82,6 +82,9 @@ export const ENDPOINTS = {
   ROLES: () => `${APIEndpoint}/roles`,
   ROLES_BY_ID: roleId => `${APIEndpoint}/roles/${roleId}`,
 
+  PRESETS: () => `${APIEndpoint}/rolePreset`,
+  PRESETS_BY_ID: (roleNameOrPresetId) => `${APIEndpoint}/rolePreset/${roleNameOrPresetId}`,
+
   OWNERMESSAGE: () => `${APIEndpoint}/ownerMessage`,
   OWNERMESSAGE_BY_ID: ownerMessageId => `${APIEndpoint}/ownerMessage/${ownerMessageId}`,