diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
index b1b0387..88d0ff0 100644
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@@ -2,15 +2,13 @@
 
 #### Please check if the PR fulfills these requirements
 
-- [ ] The changes don't come from your master branch. ([Source](https://blog.jasonmeridth.com/posts/do-not-issue-pull-requests-from-your-master-branch/)) 
+- [ ] The changes don't come from your master branch. ([Source](https://blog.jasonmeridth.com/posts/do-not-issue-pull-requests-from-your-master-branch/))
 
 ---
 
 ### [Trello Card](trello.com/LINK-TO-TRELLO-CARD)
 
-#### What kind of change does this PR introduce? (bug fix, feature, docs update, ...)
-
-Please delete options that are not relevant.
+#### What kind of change does this PR introduce? [check at least one box] (bug fix, feature, docs update, ...)
 
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
@@ -48,7 +46,7 @@ Please delete options that are not relevant.
 ---
 
 
-#### TODO:
+#### TODO: [delete if there are no relevant TODOs after this PR is merged]
 - this
 - that
 - other
diff --git a/README.md b/README.md
index 8cdd4f0..b6eb5b3 100644
--- a/README.md
+++ b/README.md
@@ -15,9 +15,9 @@ Banana App is an open-source, not-for-profit project of The Be Good Foundation.
 
 Step 0 is to [install the backend](https://github.com/FoodIsLifeBGP/banana-rails).  Follow those instructions to make sure you have everything needed to install this repo.
 
-Then if you havent already done so, clone the repository to your desired project folder and install dependencies: `git clone https://github.com/FoodIsLifeBGP/banana-rn && cd banana-rn && npm i`
+Then if you haven't already done so, clone the repository to your desired project folder and install dependencies: `git clone https://github.com/FoodIsLifeBGP/banana-admin && cd banana-admin`
 
-otherwise you can just navigate to your project's root folder in the terminal (e.g. `cd ~/Projects/banana-rn`)
+otherwise you can just navigate to your project's root folder in the terminal (e.g. `cd ~/Projects/banana-admin`)
 
 # Installation (Mac/OSX)
 
@@ -73,7 +73,7 @@ Run ESLint (you'll need to ensure you fix any linter errors and visually double-
 yarn lint
 ```
 
-...and infequently you may need to build the project:
+...and infrequently you may need to build the project:
 ```
 yarn run build
 ```
diff --git a/src/App.js b/src/App.js
index 85f8007..c5537cb 100644
--- a/src/App.js
+++ b/src/App.js
@@ -9,6 +9,8 @@ import HomePage from './Pages/HomePage';
 import SettingsPage from './Pages/SettingsPage';
 import ReviewApplicationPage from './Pages/ReviewApplicationPage';
 import LoginPage from './Pages/LoginPage/index';
+import ApplicationIndexPage from './Pages/ApplicationIndexPage';
+import ApplicationDetailPage from './Pages/ApplicationDetailPage';
 
 function App() {
   return (
@@ -20,6 +22,9 @@ function App() {
             <Route exact path="/home" element={<HomePage />} />
             <Route exact path="/settings" element={<SettingsPage />} />
             <Route exact path="/review-applications" element={<ReviewApplicationPage />} />
+            <Route exact path="/applications/:userVariant" element={<ApplicationIndexPage />} />
+            <Route exact path="/applications/:userVariant/:id" element={<ApplicationDetailPage />} />
+            <Route exact path="/review-applications" element={<ReviewApplicationPage />} />
           </Routes>
         </div>
       </Router>
diff --git a/src/Components/ApplicationCard/index.js b/src/Components/ApplicationCard/index.js
index 741ae92..672f7be 100644
--- a/src/Components/ApplicationCard/index.js
+++ b/src/Components/ApplicationCard/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 import Icon from '../Icon';
 
 function ApplicationCard(props) {
@@ -26,7 +26,7 @@ function ApplicationCard(props) {
   return (
     <div className={styles.container} type={type}>
       <div className={styles.icon}>
-        <Icon className={styles.icon} name={iconName} size={70} />
+        <Icon className={styles.icon} name={iconName} />
       </div>
       <div className={styles.body}>
         {userCount.toLocaleString(undefined, { minimumIntegerDigits: 2, useGrouping: false })}
diff --git a/src/Components/ApplicationCard/style.module.css b/src/Components/ApplicationCard/style.module.scss
similarity index 93%
rename from src/Components/ApplicationCard/style.module.css
rename to src/Components/ApplicationCard/style.module.scss
index 739ef87..4f9514f 100644
--- a/src/Components/ApplicationCard/style.module.css
+++ b/src/Components/ApplicationCard/style.module.scss
@@ -1,8 +1,8 @@
 @import "../../colors.module.css";
 @import "../../fonts.module.css";
 
-.container{
-  width: 500px;
+.container {
+  width: 100%;
   height: 244px;
   display: flex;
   flex-direction: column;
@@ -28,9 +28,13 @@
 
 .icon {
   position: absolute;
-  height: 60px;
+  width: 2.75rem;
   right: 24px;
   top: 24px;
+
+  img {
+    width: 100%;
+  }
 }
 
 .body {
diff --git a/src/Components/ApplicationStatusForm/index.js b/src/Components/ApplicationStatusForm/index.js
index b83d335..74e18ef 100644
--- a/src/Components/ApplicationStatusForm/index.js
+++ b/src/Components/ApplicationStatusForm/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 
 function ApplicationStatusForm({ title, handleSubmit }) {
   return (
diff --git a/src/Components/ApplicationStatusForm/style.module.css b/src/Components/ApplicationStatusForm/style.module.scss
similarity index 100%
rename from src/Components/ApplicationStatusForm/style.module.css
rename to src/Components/ApplicationStatusForm/style.module.scss
diff --git a/src/Components/BreadCrumb/style.module.scss b/src/Components/BreadCrumb/style.module.scss
index 081f645..8ed2563 100644
--- a/src/Components/BreadCrumb/style.module.scss
+++ b/src/Components/BreadCrumb/style.module.scss
@@ -4,6 +4,7 @@
   background: white;
   display: flex;
   padding: 2rem 0rem;
+  list-style: none;
 }
 
 .linkStyle {
diff --git a/src/Components/Button/style.module.css b/src/Components/Button/style.module.css
index 6f20aef..fed77e9 100644
--- a/src/Components/Button/style.module.css
+++ b/src/Components/Button/style.module.css
@@ -3,7 +3,6 @@
 
 
 .buttonContainer{
-  width: 150px;
   height: 70px;
   display: flex;
   justify-content: center;
diff --git a/src/Components/DonationCard/index.js b/src/Components/DonationCard/index.js
index 0b7b82a..8e3ecff 100644
--- a/src/Components/DonationCard/index.js
+++ b/src/Components/DonationCard/index.js
@@ -29,7 +29,7 @@ function DonationCard(props) {
         <Row>
           <Col className={styles.body}>{`${fractionDonated}%`}</Col>
           <Col className={styles.alignRight}>
-            <Icon name="donationStatus" size={85} />
+            <Icon name="donationStatus" />
           </Col>
         </Row>
         <Row>
diff --git a/src/Components/DonationCard/style.module.css b/src/Components/DonationCard/style.module.css
index e491a92..8325984 100644
--- a/src/Components/DonationCard/style.module.css
+++ b/src/Components/DonationCard/style.module.css
@@ -3,7 +3,7 @@
  @import "../../fonts.module.css";
 
  .container{
-   width: 500px;
+   width: 100%;
    height: 512px;
    display: flex;
    flex-direction: column;
@@ -82,4 +82,4 @@
  ::-webkit-progress-value {
    background-color: currentColor;
  }
- 
+
diff --git a/src/Components/Icon/index.js b/src/Components/Icon/index.js
index dcaa30a..6988554 100644
--- a/src/Components/Icon/index.js
+++ b/src/Components/Icon/index.js
@@ -2,23 +2,19 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import map from './map';
 
-function Icon(props) {
-  const { name, size } = props;
+function Icon({ name }) {
   const fileRef = map[name];
-  if (fileRef) {
-    return (
-      <img src={fileRef} style={{ width: size, height: size }} alt="" />
-    );
-  }
 
-  return (
-    <i className={`fa fa-${name}`} style={{ fontSize: `${size} + px` }} />
+  return fileRef ? (
+    <img src={fileRef} alt={fileRef} />
+  ) : (
+    <i className={`fa fa-${name}`} />
   );
 }
 
 Icon.propTypes = {
   name: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
+
 };
 
 export default Icon;
diff --git a/src/Components/Input/index.js b/src/Components/Input/index.js
index 7747f84..a160d80 100644
--- a/src/Components/Input/index.js
+++ b/src/Components/Input/index.js
@@ -20,7 +20,7 @@ function Input(props) {
   const renderIcon = () => {
     if (iconName && iconName !== '') {
       return (
-        <Icon name={iconName} size={20} className={styles.icon} />
+        <Icon name={iconName} className={styles.icon} />
       );
     }
     return null;
diff --git a/src/Components/Navbar/index.js b/src/Components/Navbar/index.js
index 36f3dcc..71b7ed4 100644
--- a/src/Components/Navbar/index.js
+++ b/src/Components/Navbar/index.js
@@ -9,7 +9,7 @@ import {
   Row,
   Col,
 } from 'reactstrap';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 import Icon from '../Icon';
 
 function Navbar(props) {
@@ -24,7 +24,7 @@ function Navbar(props) {
       <NavbarBrand href="/">
         <Row className="align-items-center">
           <Col>
-            <Icon name="bananaIcon" size={75} />
+            <Icon name="bananaIcon" />
           </Col>
           <Col>
             <NavbarText className={styles.bananaPortalNav}>
@@ -37,13 +37,13 @@ function Navbar(props) {
       </NavbarBrand>
       <Nav pills>
         <NavItem className={styles.navIcon}>
-          <Icon name="alertBell" size={35} />
+          <Icon name="alertBell" />
         </NavItem>
         <NavItem className={styles.navIcon}>
-          <Icon name="tasks" size={35} />
+          <Icon name="tasks" />
         </NavItem>
         <NavItem className={styles.navIcon}>
-          <Icon name="ellipse" size={35} />
+          <Icon name="ellipse" />
         </NavItem>
       </Nav>
     </BootstrapNavbar>
diff --git a/src/Components/Navbar/style.module.css b/src/Components/Navbar/style.module.scss
similarity index 100%
rename from src/Components/Navbar/style.module.css
rename to src/Components/Navbar/style.module.scss
diff --git a/src/Components/Paginator/index.js b/src/Components/Paginator/index.js
index a13a20a..5af960a 100644
--- a/src/Components/Paginator/index.js
+++ b/src/Components/Paginator/index.js
@@ -19,7 +19,7 @@ function Paginator(props) {
   return (
     <Pagination aria-label="Page navigation" className={styles.paginationStyle}>
       <PaginationItem onClick={() => priorPage(currentPage)} disabled={currentPage === 1}>
-        <PaginationLink href="#">
+        <PaginationLink>
           <span className={currentPage !== 1 ? styles.pagTabText : ''}>
             &laquo;
           </span>
@@ -30,8 +30,9 @@ function Paginator(props) {
           onClick={() => paginate(number)}
           className={number === currentPage ? 'activeSquare paginationItemStyle' : 'paginationItemStyle'}
           active={number === currentPage}
+          key={number + 1}
         >
-          <PaginationLink href="#" className={number === currentPage ? styles.paginationLinkStyle : ''}>
+          <PaginationLink className={number === currentPage ? styles.paginationLinkStyle : ''}>
             <span className={styles.pagTabText}>
               {number}
             </span>
@@ -39,7 +40,7 @@ function Paginator(props) {
         </PaginationItem>
       ))}
       <PaginationItem onClick={() => nextPage(currentPage)} disabled={currentPage === pages}>
-        <PaginationLink href="#">
+        <PaginationLink>
           <span className={currentPage !== pages ? styles.pagTabText : ''}>
             &raquo;
           </span>
diff --git a/src/Components/ProfilePicture/index.js b/src/Components/ProfilePicture/index.js
index 1d269fa..3699dd7 100644
--- a/src/Components/ProfilePicture/index.js
+++ b/src/Components/ProfilePicture/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 import BANANA from '../../Image/BANANA.svg';
 
 const classNames = require('classnames');
diff --git a/src/Components/ProfilePicture/style.module.css b/src/Components/ProfilePicture/style.module.scss
similarity index 100%
rename from src/Components/ProfilePicture/style.module.css
rename to src/Components/ProfilePicture/style.module.scss
diff --git a/src/Components/Search/index.js b/src/Components/Search/index.js
index 39eecbd..20c0c07 100644
--- a/src/Components/Search/index.js
+++ b/src/Components/Search/index.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import Icon from '../Icon';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 
 function Search() {
   const [search, setSearch] = useState('');
diff --git a/src/Components/Search/style.module.css b/src/Components/Search/style.module.scss
similarity index 90%
rename from src/Components/Search/style.module.css
rename to src/Components/Search/style.module.scss
index c837041..f2a4951 100644
--- a/src/Components/Search/style.module.css
+++ b/src/Components/Search/style.module.scss
@@ -1,10 +1,11 @@
 .searchComponent {
-  width: 403px;
   height: 73px;
   display: flex;
   flex-direction: row;
   background: var(--LIGHT_GRAY);
   border-radius: 8px;
+  margin-top: 1rem;
+  margin-right: 1rem;
 }
 
 .vector {
@@ -19,7 +20,7 @@
   font-family: Open Sans;
   font-style: normal;
   font-weight: normal;
-  font-size: 24px;
+  font-size: 1.25rem;
   line-height: 33px;
   border: none;
   background: rgba(0,0,0,0);
diff --git a/src/Components/Status/index.js b/src/Components/Status/index.js
index 5976e55..90d7479 100644
--- a/src/Components/Status/index.js
+++ b/src/Components/Status/index.js
@@ -1,61 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 
-function Status(props) {
-  const { statusState } = props;
+export default function Status({ statusState }) {
+  const parsedState = statusState.charAt(0).toUpperCase() + statusState.slice(1);
 
-  if (statusState === 'pending') {
-    return (
-      <div className={styles.pendingDiv}>
-        <p className={styles.text}><strong>Pending</strong></p>
-      </div>
-    );
-  }
-
-  if (statusState === 'active') {
-    return (
-      <div className={styles.activeDiv}>
-        <p className={styles.text}><strong className={styles.whiteText}>Active</strong></p>
-      </div>
-    );
-  }
-
-  if (statusState === 'inactive') {
-    return (
-      <div className={styles.inactiveDiv}>
-        <p className={styles.text}><strong className={styles.navyBlueText}>Inactive</strong></p>
-      </div>
-    );
-  }
-
-  if (statusState === 'incomplete') {
-    return (
-      <div className={styles.incompleteDiv}>
-        <p className={styles.text}><strong>Incomplete</strong></p>
-      </div>
-    );
-  }
-
-  if (statusState === 'suspended') {
-    return (
-      <div className={styles.suspendedDiv}>
-        <p className={styles.text}><strong>Suspended</strong></p>
-      </div>
-    );
-  }
-
-  if (statusState === 'closed') {
-    return (
-      <div className={styles.closedDiv}>
-        <p className={styles.text}><strong className={styles.whiteText}>Closed</strong></p>
-      </div>
-    );
-  }
+  return (
+    <div className={`${styles.applicationStatusLabel} ${styles[statusState]}`}>
+      <strong>{parsedState}</strong>
+    </div>
+  );
 }
 
 Status.propTypes = {
   statusState: PropTypes.string.isRequired,
 };
-
-export default Status;
diff --git a/src/Components/Status/style.module.css b/src/Components/Status/style.module.css
deleted file mode 100644
index 111ac0f..0000000
--- a/src/Components/Status/style.module.css
+++ /dev/null
@@ -1,135 +0,0 @@
-@import "../../colors.module.css";
-@import "../../fonts.module.css";
-
-
-  .text {
-    position: static;
-    width: 67px;
-    height: 27px;
-    left: 10px;
-    top: 5px;
-
-    font-family: Open Sans;
-    font-style: normal;
-    font-weight: bold;
-    font-size: 20px;
-    line-height: 27px;
-    display: flex;
-    align-items: center;
-    letter-spacing: 0.04em;
-
-    /* Inside Auto Layout */
-
-    flex: none;
-    order: 0;
-    flex-grow: 0;
-    margin: 10px 0px;
-  }
-
-  .whiteText {
-    color: var(--WHITE);
-  }
-
-  .navyBlueText {
-    color: var(--NAVY_BLUE);
-  }
-
-.pendingDiv {
-  /* Auto Layout */
-
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 5px 10px;
-
-  /* position: absolute; */
-  width: 106px;
-  height: 37px;
-  /* left: 1108px;
-  top: 0px; */
-
-  /* Banana Yellow */
-
-  background-color: var(--BANANA_YELLOW);
-  border-radius: 8px;
-}
-
-.activeDiv {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 5px 10px;
-
-  /* position: absolute; */
-  width: 87px;
-  height: 37px;
-  /* left: 1210px;
-  top: 485px; */
-
-  background: var(--GREEN);
-  border-radius: 8px;
-}
-
-.inactiveDiv {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 5px 10px;
-
-  /* position: absolute; */
-  width: 106px;
-  height: 37px;
-  /* left: 1203px;
-  top: 740px; */
-
-  background: #C8CED3;
-  border-radius: 8px;
-}
-
-.incompleteDiv { 
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 5px 10px;
-
-  /* position: absolute; */
-  width: 141px;
-  height: 37px;
-  /* left: 1188.5px;
-  top: 825px; */
-
-  background: var(--ORANGE);
-  border-radius: 8px;
-}
-
-.suspendedDiv {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 5px 10px;
-
-  /* position: absolute; */
-  width: 136px;
-  height: 37px;
-  /* left: 1189.5px;
-  top: 910px; */
-
-  background: var(--SUSPENDED_RED);
-  border-radius: 8px;
-}
-
-.closedDiv {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 5px 10px;
-
-  /* position: absolute; */
-  width: 90px;
-  height: 37px;
-  /* left: 1211px;
-  top: 1167px; */
-
-  background: #6D6D6D;
-  border-radius: 8px;
-}
\ No newline at end of file
diff --git a/src/Components/Status/style.module.scss b/src/Components/Status/style.module.scss
new file mode 100644
index 0000000..ccce92b
--- /dev/null
+++ b/src/Components/Status/style.module.scss
@@ -0,0 +1,33 @@
+@import "../../colors.module.css";
+@import "../../fonts.module.css";
+
+.applicationStatusLabel {
+  padding: 5px 10px;
+  border-radius: 8px;
+  width: fit-content;
+
+  &.pending {
+    color: var(--BLACK);
+    background-color: var(--BANANA_YELLOW);
+  }
+  &.active {
+    color: var(--BLACK);
+    background-color: var(--GREEN);
+  }
+  &.inactive {
+    color: var(--BLACK);
+    background-color: #C8CED3;
+  }
+  &.incomplete {
+    color: var(--BLACK);
+    background-color: var(--ORANGE);
+  }
+  &.suspended {
+    color: var(--BLACK);
+    background-color: var(--SUSPENDED_RED);
+  }
+  &.closed {
+    color: var(--BLACK);
+    background-color: #6D6D6D;
+  }
+}
\ No newline at end of file
diff --git a/src/Components/SuccessPopUp/index.js b/src/Components/SuccessPopUp/index.js
index f022a4b..4bdf5a7 100644
--- a/src/Components/SuccessPopUp/index.js
+++ b/src/Components/SuccessPopUp/index.js
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 
 function SuccessPopUp(props) {
   const [show, setShow] = useState(true);
diff --git a/src/Components/SuccessPopUp/style.module.css b/src/Components/SuccessPopUp/style.module.scss
similarity index 100%
rename from src/Components/SuccessPopUp/style.module.css
rename to src/Components/SuccessPopUp/style.module.scss
diff --git a/src/Components/UserList/index.js b/src/Components/UserList/index.js
index 25e3074..639607f 100644
--- a/src/Components/UserList/index.js
+++ b/src/Components/UserList/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 // eslint-disable-next-line no-unused-vars
 import PropTypes from 'prop-types';
 import { v4 } from 'uuid';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 import Status from '../Status';
 
 const testData = [
diff --git a/src/Components/UserList/style.module.css b/src/Components/UserList/style.module.scss
similarity index 100%
rename from src/Components/UserList/style.module.css
rename to src/Components/UserList/style.module.scss
diff --git a/src/Pages/DonorPage/index.js b/src/Pages/ApplicationDetailPage/index.js
similarity index 88%
rename from src/Pages/DonorPage/index.js
rename to src/Pages/ApplicationDetailPage/index.js
index eb56674..6893e1f 100644
--- a/src/Pages/DonorPage/index.js
+++ b/src/Pages/ApplicationDetailPage/index.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { v4 } from 'uuid';
+import { useParams } from 'react-router-dom';
 
 import BreadCrumb from '../../Components/BreadCrumb';
 import Navbar from '../../Components/Navbar';
@@ -7,7 +8,7 @@ import Search from '../../Components/Search';
 import Paginator from '../../Components/Paginator';
 import Status from '../../Components/Status';
 
-import styles from './style.module.css';
+import styles from './style.module.scss';
 
 // TODO: Pull real data, not dummy data
 const testData = [
@@ -85,7 +86,11 @@ const testData = [
   },
 ];
 
-function DonorPage() {
+// NOTE: user variant can only be either "donor", "client" or "all"
+function UserDetailPage() {
+  const { userVariant } = useParams();
+  console.log('userVariant:', userVariant);
+
   const entriesPerPage = 10;
   const [displayData, setDisplayData] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
@@ -113,7 +118,7 @@ function DonorPage() {
     }
   };
 
-  const newDonorPageBCT = [
+  const UserDetailPageBCT = [
     { pageName: 'Home', url: 'localhost:3000' },
     { pageName: 'Donor', url: 'localhost:3000' },
     { pageName: 'New Donor Applications', url: 'localhost:3000' },
@@ -125,15 +130,19 @@ function DonorPage() {
     <div>
       <Navbar />
       <div className={styles.belowNav}>
-        <BreadCrumb breadCrumbTrail={newDonorPageBCT} />
+        <BreadCrumb breadCrumbTrail={UserDetailPageBCT} />
         <div className={styles.headerBar}>
-          <h2 className={styles.headerLeft}>NEW APPLICATIONS (DONOR)</h2>
+          <h2 className={styles.headerLeft}>
+            NEW APPLICATIONS (
+            {userVariant}
+            )
+          </h2>
           <div className={styles.headerRight}>
             <Search className={styles.headerItem} />
             <input
               className={styles.viewAllButton}
               type="submit"
-              value="View all list"
+              value="All Applications"
             />
           </div>
         </div>
@@ -170,4 +179,4 @@ function DonorPage() {
   );
 }
 
-export default DonorPage;
+export default UserDetailPage;
diff --git a/src/Pages/AllDonorsPage/style.module.css b/src/Pages/ApplicationDetailPage/style.module.scss
similarity index 97%
rename from src/Pages/AllDonorsPage/style.module.css
rename to src/Pages/ApplicationDetailPage/style.module.scss
index 0689377..04955cd 100644
--- a/src/Pages/AllDonorsPage/style.module.css
+++ b/src/Pages/ApplicationDetailPage/style.module.scss
@@ -29,7 +29,6 @@ h2 {
 }
 
 .viewAllButton {
-  width: 14rem;
   height: 4.5rem;
   display: flex;
   justify-content: center;
diff --git a/src/Pages/AllDonorsPage/index.js b/src/Pages/ApplicationIndexPage/index.js
similarity index 65%
rename from src/Pages/AllDonorsPage/index.js
rename to src/Pages/ApplicationIndexPage/index.js
index a64e75d..ba8b3fa 100644
--- a/src/Pages/AllDonorsPage/index.js
+++ b/src/Pages/ApplicationIndexPage/index.js
@@ -1,13 +1,14 @@
 import React, { useEffect, useState } from 'react';
 import { v4 } from 'uuid';
+import { useParams } from 'react-router-dom';
 
 import BreadCrumb from '../../Components/BreadCrumb';
 import Navbar from '../../Components/Navbar';
 import Search from '../../Components/Search';
 import Paginator from '../../Components/Paginator';
 import Status from '../../Components/Status';
-
-import styles from './style.module.css';
+import styles from './style.module.scss';
+import ApiService from '../../Services/ApiService';
 
 // TODO: Pull real data, not dummy data
 const testData = [
@@ -85,7 +86,34 @@ const testData = [
   },
 ];
 
-function AllDonorsPage() {
+// NOTE: `userVariant` can only be either "donors", "clients" or "all"
+function ApplicationIndexPage() {
+  const { userVariant } = useParams();
+  let userVariantText = userVariant;
+  const { axiosRequest } = ApiService();
+
+  if (userVariant === 'all') {
+    userVariantText = 'Donors & Clients';
+  } else {
+    userVariantText = userVariant.charAt(0).toUpperCase() + userVariant.slice(1);
+  }
+
+  const fetchUsers = async () => {
+    try {
+      const response = await axiosRequest(
+        'GET',
+        'clients',
+      );
+      console.log('response:', response);
+    } catch (error) {
+      console.log('error:', error);
+    }
+  };
+
+  useEffect(() => {
+    fetchUsers();
+  }, []);
+
   const entriesPerPage = 10;
   const [displayData, setDisplayData] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
@@ -114,9 +142,8 @@ function AllDonorsPage() {
   };
 
   const newDonorPageBCT = [
-    { pageName: 'Home', url: 'localhost:3000' },
-    { pageName: 'Donor', url: 'localhost:3000' },
-    { pageName: 'All Lists', url: 'localhost:3000' },
+    { pageName: 'Home', url: '/' },
+    { pageName: userVariantText, url: '/' },
   ];
 
   const paginate = (pageNumber) => setCurrentPage(pageNumber);
@@ -127,36 +154,42 @@ function AllDonorsPage() {
       <div className={styles.belowNav}>
         <BreadCrumb breadCrumbTrail={newDonorPageBCT} />
         <div className={styles.headerBar}>
-          <h2 className={styles.headerLeft}>ALL LISTS (DONOR)</h2>
+          <h2 className={styles.headerLeft}>
+            {userVariantText}
+          </h2>
           <div className={styles.headerRight}>
             <Search className={styles.headerItem} />
             <input
               className={styles.viewAllButton}
               type="submit"
-              value="View all list"
+              value="New Applications"
             />
           </div>
         </div>
         {/* Replace table with dynamic table component when it's ready */}
-        <table className={styles.newDonorTable}>
-          <tr>
-            <th>No.</th>
-            <th>Name</th>
-            <th>Business Name</th>
-            <th>Date Registered</th>
-            <th>Status</th>
-          </tr>
-          {/* Replace testData.map with line below for production
-          {data.map((entry, index) => {  */}
-          {displayData.map((entry, index) => (
-            <tr key={v4()}>
-              <td>{index + 1}</td>
-              <td>{entry.name}</td>
-              <td>{entry.businessName}</td>
-              <td>{entry.dateSubmitted}</td>
-              <td className={styles.status}><Status statusState={entry.status} /></td>
+        <table className={styles.table}>
+          <tbody>
+            <tr>
+              <th>No.</th>
+              <th>Name</th>
+              <th>Business Name</th>
+              <th>Date Registered</th>
+              <th>Status</th>
             </tr>
-          ))}
+            {/* Replace testData.map with line below for production
+            {data.map((entry, index) => {  */}
+            {displayData.map((entry, index) => (
+              <tr key={v4()}>
+                <td>{index + 1}</td>
+                <td>{entry.name}</td>
+                <td>{entry.businessName}</td>
+                <td>{entry.dateSubmitted}</td>
+                <td className={styles.statusCell}>
+                  <Status statusState={entry.status} />
+                </td>
+              </tr>
+            ))}
+          </tbody>
         </table>
         <Paginator
           pages={pages}
@@ -170,4 +203,4 @@ function AllDonorsPage() {
   );
 }
 
-export default AllDonorsPage;
+export default ApplicationIndexPage;
diff --git a/src/Pages/DonorPage/style.module.css b/src/Pages/ApplicationIndexPage/style.module.scss
similarity index 65%
rename from src/Pages/DonorPage/style.module.css
rename to src/Pages/ApplicationIndexPage/style.module.scss
index 0689377..6919488 100644
--- a/src/Pages/DonorPage/style.module.css
+++ b/src/Pages/ApplicationIndexPage/style.module.scss
@@ -2,15 +2,28 @@
   padding: 0rem 4rem;
 }
 
+@media screen and (max-width: 768px) {
+  .belowNav {
+    padding: 0rem 1rem;
+  }
+}
+
 h2 {
   color: var(--NAVY_BLUE);
   font-weight: bold;
 }
 
-.newDonorTable {
+.table {
   width: 100%;
 }
 
+.statusCell {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0.25rem 0;
+}
+
 .breadCTrail {
   margin: 2rem 0rem;
 }
@@ -18,14 +31,21 @@ h2 {
 .headerBar {
   display: flex;
   justify-content: space-between;
+  flex-wrap: wrap;
   align-items: center;
   margin-bottom: 2rem;
+
+  h2 {
+    margin-top: 1rem;
+    margin-bottom: 0;
+  }
 }
 
 .headerRight {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-wrap: wrap;
 }
 
 .viewAllButton {
@@ -38,9 +58,10 @@ h2 {
   color: var(--NAVY_BLUE);
   font-family: 'Open Sans', sans-serif;
   font-weight: bold;
-  font-size: 1.5rem;
+  font-size: 1.25rem;
   border-radius: .5rem;
   border-color: var(--BANANA_YELLOW);
   border-width: 0rem;
-  margin-left: 1rem;
+  margin-top: 1rem;
+  margin-right: 1rem;
 }
\ No newline at end of file
diff --git a/src/Pages/ErrorPage/index.js b/src/Pages/ErrorPage/index.js
index b0320d1..b38ae94 100644
--- a/src/Pages/ErrorPage/index.js
+++ b/src/Pages/ErrorPage/index.js
@@ -4,9 +4,6 @@ import styles from './style.module.scss';
 import Icon from '../../Components/Icon';
 
 function ErrorPage() {
-  const ladyWidth = 400;
-  const bananaWidth = 60;
-
   useEffect(() => {
     document.body.classList.add('theBody');
   }, []);
@@ -32,9 +29,9 @@ function ErrorPage() {
           </div>
         </div>
         <div className={styles.rightBody}>
-          <Icon name="upsetWoman" size={ladyWidth} />
+          <Icon name="upsetWoman" />
           <div className={styles.bananaPeel}>
-            <Icon name="bananaPeel" size={bananaWidth} />
+            <Icon name="bananaPeel" />
           </div>
         </div>
       </div>
diff --git a/src/Pages/ErrorPage/style.module.scss b/src/Pages/ErrorPage/style.module.scss
index 3e8f0b4..464dae7 100644
--- a/src/Pages/ErrorPage/style.module.scss
+++ b/src/Pages/ErrorPage/style.module.scss
@@ -92,37 +92,37 @@ p{
   .sb-show-main.sb-main-padded.theBody{
     padding: 0rem;
   }
-  
+
   .body{
     padding: 5vh 0px;
     display: flex;
     justify-content: center;
-    align-items: start;
+    align-items: flex-start;
   }
-  
+
   .rightBody{
     display: flex;
   }
-  
+
   .buttonContainer{
     display: flex;
     justify-content: center;
   }
-  
+
   h1, p {
     color: var(--NAVY_BLUE);
     text-align: center;
   }
-  
+
   h1 {
     font: "open sans";
     font-size: 5rem;
   }
-  
+
   p{
     font-size: 1.5rem;
   }
-  
+
   .goBackButton{
     width: 21vw;
     height: 7vw;
@@ -139,7 +139,7 @@ p{
     border-width: 0px;
     margin: 10px 10px 10px 1vw;
   }
-  
+
   .homeButton{
     width: 21vw;
     height: 7vw;
@@ -162,7 +162,7 @@ p{
     left: -60px;
     top: 349px;
   }
-  
+
   .bottomBar{
     height: 15vh;
     background-color: var(--BANANA_YELLOW);
diff --git a/src/Pages/SettingsPage/index.js b/src/Pages/SettingsPage/index.js
index c261665..a70ee10 100644
--- a/src/Pages/SettingsPage/index.js
+++ b/src/Pages/SettingsPage/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import Navbar from '../../Components/Navbar';
 import ProfilePicture from '../../Components/ProfilePicture';
 import Button from '../../Components/Button';
-import styles from './style.module.css';
+import styles from './style.module.scss';
 
 const userStub = {
   firstName: 'John',
diff --git a/src/Pages/SettingsPage/style.module.css b/src/Pages/SettingsPage/style.module.scss
similarity index 100%
rename from src/Pages/SettingsPage/style.module.css
rename to src/Pages/SettingsPage/style.module.scss
diff --git a/src/stories/AllDonorsPage.stories.js b/src/stories/AllDonorsPage.stories.js
deleted file mode 100644
index a621136..0000000
--- a/src/stories/AllDonorsPage.stories.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import AllDonorsPage from '../Pages/AllDonorsPage';
-
-export default {
-  title: 'AllDonorsPage',
-  component: AllDonorsPage,
-};
-
-export const presentation = () => <AllDonorsPage />;
diff --git a/src/stories/DonorPage.stories.js b/src/stories/DonorPage.stories.js
deleted file mode 100644
index 31496ca..0000000
--- a/src/stories/DonorPage.stories.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import DonorPage from '../Pages/DonorPage';
-
-export default {
-  title: 'DonorPage',
-  component: DonorPage,
-};
-
-export const presentation = () => <DonorPage />;
diff --git a/src/stories/Icon.stories.js b/src/stories/Icon.stories.js
index f649a76..a844dbe 100644
--- a/src/stories/Icon.stories.js
+++ b/src/stories/Icon.stories.js
@@ -6,4 +6,4 @@ export default {
   component: Icon,
 };
 
-export const presentation = () => <Icon name="user" size={100} />;
+export const presentation = () => <Icon name="user" />;
diff --git a/src/stories/UserDetailPage.stories.js b/src/stories/UserDetailPage.stories.js
new file mode 100644
index 0000000..faeda6a
--- /dev/null
+++ b/src/stories/UserDetailPage.stories.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ApplicationDetailPage from '../Pages/ApplicationDetailPage';
+
+export default {
+  title: 'ApplicationDetailPage',
+  component: ApplicationDetailPage,
+};
+
+export const presentation = () => <ApplicationDetailPage />;
diff --git a/src/stories/UserIndexPage.stories.js b/src/stories/UserIndexPage.stories.js
new file mode 100644
index 0000000..78077be
--- /dev/null
+++ b/src/stories/UserIndexPage.stories.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ApplicationIndexPage from '../Pages/ApplicationIndexPage';
+
+export default {
+  title: 'ApplicationIndexPage',
+  component: ApplicationIndexPage,
+};
+
+export const presentation = () => <ApplicationIndexPage />;