diff --git a/backend/src/user/user.service.ts b/backend/src/user/user.service.ts
index db04a5f..5ca889a 100644
--- a/backend/src/user/user.service.ts
+++ b/backend/src/user/user.service.ts
@@ -732,12 +732,7 @@ async addUserToGroup(
       this.logger.log('Executing DynamoDB scan with filter for Inactive users...');
       const result = await this.dynamoDb.scan(params).promise();
       
-      const users: User[] = (result.Items || []).map((item) => ({
-        position: item.position as UserStatus,
-        email: item.email,
-        firstName: item.firstName,
-        lastName: item.lastName
-      }));
+      const users: User[] = (result.Items || []).map((item) => item as User);
 
       this.logger.log(`✅ Successfully retrieved ${users.length} inactive users`);
       return users;
@@ -787,12 +782,7 @@ async getAllActiveUsers(): Promise<User[]> {
         this.logger.error("DynamoDB scan result:", result);
         throw new NotFoundException("No active users found.");
       }
-      const users: User[] = (result.Items || []).map((item) => ({
-        position: item.position as UserStatus,
-        email: item.email,
-        firstName: item.firstName,
-        lastName: item.lastName
-      }));
+      const users: User[] = (result.Items || []).map((item) => item as User);
       
       this.logger.debug(`Fetched ${users.length} active users.`);
 
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
index a09c4ce..f6c3e0f 100644
--- a/frontend/src/components/Button.tsx
+++ b/frontend/src/components/Button.tsx
@@ -19,7 +19,7 @@ export default function Button({ text, onClick, className, logo, logoPosition, d
   return (
     <button onClick={onClick} disabled={disabled || false} type={type || "button"}
     className={`
-        px-4 py-2 rounded-3xl font-medium text-black border-2 active:bg-primary-900 active:text-white
+        px-4 py-2 rounded-3xl font-medium text-black border-2 active:bg-primary-900 active:border-primary-900 active:text-white
         flex items-center justify-center transition-opacity
         ${className} ${disabled
           ? "cursor-not-allowed opacity-50"
diff --git a/frontend/src/components/SearchBar.tsx b/frontend/src/components/SearchBar.tsx
new file mode 100644
index 0000000..debac71
--- /dev/null
+++ b/frontend/src/components/SearchBar.tsx
@@ -0,0 +1,42 @@
+import { IoMdSearch } from "react-icons/io";
+
+type SearchBarProps = {
+  handleInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  userInput: string;
+  text: string;
+};
+
+export default function SearchBar({
+  handleInputChange,
+  userInput,
+  text,
+}: SearchBarProps) {
+  return (
+    <div className="w-full relative">
+      {/* Absolutely-positioned icon */}
+      <IoMdSearch
+        style={{
+          position: "absolute",
+          top: "50%",
+          left: "0.7rem",
+          transform: "translateY(-50%)",
+          pointerEvents: "none",
+          zIndex: 2,
+          marginLeft: "2px",
+        }}
+      />
+      <input
+        placeholder={`Search for a ${text}...`}
+        className="w-full px-4 py-2 rounded-3xl font-medium text-black border-2 flex items-center justify-center border-grey-500"
+        onChange={handleInputChange}
+        value={userInput}
+        style={{ paddingLeft: "2rem" }} // make room for the icon
+        onKeyDown={(e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+          }
+        }}
+      />
+    </div>
+  );
+}
diff --git a/frontend/src/custom/ActionConfirmation.tsx b/frontend/src/custom/ActionConfirmation.tsx
index 0bea1b0..34dafc2 100644
--- a/frontend/src/custom/ActionConfirmation.tsx
+++ b/frontend/src/custom/ActionConfirmation.tsx
@@ -1,3 +1,4 @@
+import Button from "../components/Button";
 import { IoIosWarning } from "react-icons/io";
 
 {/* The popup that appears on delete */}
@@ -22,7 +23,7 @@ import { IoIosWarning } from "react-icons/io";
 
     return (
       <div 
-        className=" fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 transition-opacity duration-300"
+        className=" fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[1500] transition-opacity duration-300"
         onClick={onCloseDelete}
       >
         <div 
@@ -63,21 +64,11 @@ import { IoIosWarning } from "react-icons/io";
 
           {/* Buttons */}
           <div className="flex w-full justify-between ">
-            <button
-              className="rounded-lg hover:bg-gray-200 border-2 border-black bg-red-light transition-colors w-32 h-12"
-              onClick={onCloseDelete}
-            >
-              No, cancel
-            </button>
-            <button
-              className="rounded-lg text-black border-2 border-black hover:bg-red-700 transition-colors w-32 h-12"
-              onClick={() => {
+            <Button text="No, cancel" onClick={onCloseDelete} className=" text-red border-red hover:border-red hover:bg-red-light active:bg-red" />
+            <Button text="Yes, confirm" onClick={() => {
                 onConfirmDelete();
                 onCloseDelete();
-              }}
-            >
-              Yes, confirm
-            </button>
+              }} className="border-grey-500" />
           </div>
 
           </div>
diff --git a/frontend/src/external/bcanSatchel/actions.ts b/frontend/src/external/bcanSatchel/actions.ts
index 721f718..161e02a 100644
--- a/frontend/src/external/bcanSatchel/actions.ts
+++ b/frontend/src/external/bcanSatchel/actions.ts
@@ -65,6 +65,11 @@ export const updateSort = action(
   (sort: {header: keyof Grant, asc: boolean}) => ({ sort, })
 );
 
+export const updateUserSort = action(
+  "updateUserSort",
+  (sort: {header: keyof User, sort: "asc" | "desc" | "none"}) => ({ sort, })
+); 
+
 /**
  * Append a new grant to the current list of grants.
  */
@@ -75,6 +80,11 @@ export const updateSearchQuery = action(
   (searchQuery: string) => ({ searchQuery })
 );
 
+export const updateUserQuery = action(
+  "updateUserQuery",
+  (userQuery: string) => ({ userQuery })
+);
+
 export const setNotifications = action(
   'setNotifications',
   (notifications: Notification[]) => ({notifications})
diff --git a/frontend/src/external/bcanSatchel/mutators.ts b/frontend/src/external/bcanSatchel/mutators.ts
index c65065d..291469a 100644
--- a/frontend/src/external/bcanSatchel/mutators.ts
+++ b/frontend/src/external/bcanSatchel/mutators.ts
@@ -9,7 +9,9 @@ import {
   updateSearchQuery,
   updateYearFilter,
   setNotifications,
-  updateSort
+  updateSort,
+  updateUserQuery,
+  updateUserSort,
 } from './actions';
 import { getAppStore, persistToSessionStorage } from './store';
 import { setActiveUsers, setInactiveUsers } from './actions';
@@ -117,3 +119,14 @@ mutator(updateSort, (actionMessage) => {
   const store = getAppStore();
   store.sort = actionMessage.sort;
 })
+
+mutator(updateUserQuery, (actionMessage) => {
+  const store = getAppStore();
+  store.userQuery = actionMessage.userQuery;
+  console.log('Updated userQuery:', store.userQuery);
+})
+
+mutator(updateUserSort, (actionMessage) => {
+  const store = getAppStore();
+  store.userSort = actionMessage.sort;
+}) 
\ No newline at end of file
diff --git a/frontend/src/external/bcanSatchel/store.ts b/frontend/src/external/bcanSatchel/store.ts
index 4f47952..eea44b2 100644
--- a/frontend/src/external/bcanSatchel/store.ts
+++ b/frontend/src/external/bcanSatchel/store.ts
@@ -18,7 +18,9 @@ export interface AppState {
   activeUsers: User[] | [];
   inactiveUsers: User[] | [];
   sort: {header: keyof Grant, asc: boolean} | null;
+  userSort: {header: keyof User, sort: "asc" | "desc" | "none"} | null;
   notifications: Notification[];
+  userQuery: string;
 }
 
 // Define initial state
@@ -36,6 +38,8 @@ const initialState: AppState = {
   inactiveUsers: [],
   notifications: [],
   sort: null,
+  userSort: null,
+  userQuery: '',
 };
 
 /**
diff --git a/frontend/src/main-page/MainPage.tsx b/frontend/src/main-page/MainPage.tsx
index 642d535..750573c 100644
--- a/frontend/src/main-page/MainPage.tsx
+++ b/frontend/src/main-page/MainPage.tsx
@@ -2,35 +2,120 @@ import { Routes, Route } from "react-router-dom";
 import Dashboard from "./dashboard/Dashboard";
 import GrantPage from "./grants/GrantPage";
 import NavBar from "./navbar/NavBar";
-import Users from "./users/Users";
 import RestrictedPage from "./restricted/RestrictedPage";
 import CashFlowPage from "./cash-flow/CashFlowPage";
 import Settings from "./settings/Settings";
 import Footer from "../Footer";
+import UsersPage from "./users/UsersPage";
+
+import { UserStatus } from "../../../middle-layer/types/UserStatus";
+import { observer } from "mobx-react-lite";
+import { Navigate } from "react-router-dom";
+import { getAppStore } from "../external/bcanSatchel/store";
+import BellButton from "./navbar/Bell";
+import { useState } from "react";
+
+interface PositionGuardProps {
+  children: React.ReactNode;
+  adminOnly?: boolean;
+}
+
+const PositionGuard = observer(
+  ({ children, adminOnly = false }: PositionGuardProps) => {
+    const { user } = getAppStore();
+
+    // If user hasn't been resolved yet, avoid redirect
+    if (user === undefined) {
+      return null; // or a loading spinner
+    }
+
+    if (!user) {
+      return <Navigate to="/login" replace />;
+    }
+
+    if (
+      user.position === undefined ||
+      user.position === UserStatus.Inactive ||
+      (user.position === UserStatus.Employee && adminOnly)
+    ) {
+      return <Navigate to="/restricted" replace />;
+    }
+
+    return <>{children}</>;
+  },
+);
 
 function MainPage() {
+  const [openModal, setOpenModal] = useState(false);
+
   return (
     <div className="w-full flex-row flex h-screen overflow-hiden">
       <div>
         <NavBar />
       </div>
-      <div className="px-6 lg:px-10 py-8 pt-12 w-full h-screen overflow-y-auto">
+      <div className="px-6 lg:px-10 py-8 pt-8 w-full h-screen overflow-y-auto">
         <div className="min-h-screen mb-8">
+          <div className="bell-container flex justify-end w-full">
+            <BellButton setOpenModal={setOpenModal} openModal={openModal} />
+          </div>
           <Routes>
-            <Route path="/dashboard" element={<Dashboard />} />
+            <Route
+              path="/dashboard"
+              element={
+                <PositionGuard adminOnly={false}>
+                  <Dashboard />
+                </PositionGuard>
+              }
+            />
             <Route
               path="/all-grants"
-              element={<GrantPage showOnlyMyGrants={false} />}
+              element={
+                <PositionGuard adminOnly={false}>
+                  <GrantPage showOnlyMyGrants={false} />
+                </PositionGuard>
+              }
             />
             <Route
               path="/my-grants"
-              element={<GrantPage showOnlyMyGrants={true} />}
+              element={
+                <PositionGuard adminOnly={false}>
+                  <GrantPage showOnlyMyGrants={true} />
+                </PositionGuard>
+              }
+            />
+            <Route
+              path="/users"
+              element={
+                <PositionGuard adminOnly={true}>
+                  <UsersPage />
+                </PositionGuard>
+              }
             />
-            <Route path="/users" element={<Users />} />
             <Route path="/restricted" element={<RestrictedPage />} />
-            <Route path="/cash-flow" element={<CashFlowPage />} />
-            <Route path="/settings" element={<Settings />} />
-            <Route path="*" element={<GrantPage />} />
+            <Route
+              path="/cash-flow"
+              element={
+                <PositionGuard adminOnly={false}>
+                  <CashFlowPage />
+                </PositionGuard>
+              }
+            />
+            <Route
+              path="/settings"
+              element={
+                <PositionGuard adminOnly={false}>
+                  <Settings />
+                </PositionGuard>
+              }
+            />
+            <Route
+              path="*"
+              element={
+                <PositionGuard adminOnly={false}>
+                  <GrantPage showOnlyMyGrants={false} />
+                </PositionGuard>
+              }
+            />
           </Routes>
         </div>
         <Footer />
diff --git a/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx b/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx
index 936f8a8..c12d82c 100644
--- a/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx
+++ b/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx
@@ -77,7 +77,7 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => {
               },
             )}M`}
           </div>
-          <div className={`gap-1 flex flex-col absolute ${width > 250 ? "mt-12" : "mt-2"}`}>
+          <div className={`gap-1 flex break-all flex-col absolute ${width > 250 ? "mt-12" : "mt-2"}`}>
             <LabelItem
               name="Received"
               percent={sumReceived / total}
diff --git a/frontend/src/main-page/dashboard/DateFilter.tsx b/frontend/src/main-page/dashboard/DateFilter.tsx
index 9157a94..3317ce0 100644
--- a/frontend/src/main-page/dashboard/DateFilter.tsx
+++ b/frontend/src/main-page/dashboard/DateFilter.tsx
@@ -65,7 +65,7 @@ const DateFilter: React.FC = observer(() => {
         className="bg-white border-grey-500 inline-flex items-center justify-between text-sm lg:text-base"
       />
       <div
-        className={`z-[100] absolute  top-10 w-64 lg:w-80 bg-white ${showDropdown ? "" : "hidden"} rounded-md border-2 border-gray-200 shadow-lg`}
+        className={`z-[100] absolute  top-10 w-64 lg:w-80 bg-white ${showDropdown ? "" : "hidden"} rounded-md border-2 border-grey-500 shadow-lg`}
       >
         <button
           className="close-button absolute top-3 right-4 text-lg"
@@ -100,8 +100,8 @@ const DateFilter: React.FC = observer(() => {
             </li>
           ))}
         </ul>
-        <hr className="border-t mx-4 border-gray-200" />
-        <button className="p-2" onClick={() => handleReset()}>
+        <hr className="border-t mx-4 border-grey-400" />
+        <button className="p-2 border-0 hover:text-grey-600" onClick={() => handleReset()}>
           Reset
         </button>
       </div>
diff --git a/frontend/src/main-page/grants/GrantPage.tsx b/frontend/src/main-page/grants/GrantPage.tsx
index 4ba371d..1210676 100644
--- a/frontend/src/main-page/grants/GrantPage.tsx
+++ b/frontend/src/main-page/grants/GrantPage.tsx
@@ -16,9 +16,6 @@ import {
 import { toJS } from "mobx";
 import { observer } from "mobx-react-lite";
 import { ProcessGrantData } from "./filter-bar/processGrantData.ts";
-import { UserStatus } from "../../../../middle-layer/types/UserStatus.ts";
-import { Navigate } from "react-router-dom";
-import BellButton from "../navbar/Bell.tsx";
 import GrantCard from "./grant-list/GrantCard.tsx";
 import { api } from "../../api.ts";
 import Button from "../../components/Button.tsx";
@@ -31,7 +28,7 @@ interface GrantPageProps {
 function GrantPage({}: GrantPageProps) {
   const [showNewGrantModal, setShowNewGrantModal] = useState(false);
   const [wasGrantSubmitted, setWasGrantSubmitted] = useState(false);
-  
+
   // Use ProcessGrantData reactively to get filtered grants
   const { grants } = ProcessGrantData();
   const [curGrant, setCurGrant] = useState<Grant | null>(null);
@@ -43,53 +40,51 @@ function GrantPage({}: GrantPageProps) {
     }
   }, [grants]);
 
-   // If the NewGrantModal has been closed and a new grant submitted (or existing grant edited),
-   // refetch the grants list and update the current grant to reflect any changes
-   // SHOULD BE CHANGED TO ALSO ACCOMODATE DELETIONS (CURRENTLY ONLY UPDATES IF GRANT WAS CREATED/EDITED, NOT DELETED)
-    useEffect(() => {
-      if (!wasGrantSubmitted || !curGrant) return;
-
-      const updateGrant = async () => {
-        try {
-          const response = await api(`/grant/${curGrant.grantId}`, {
-            method: "GET",
-            headers: {
-              "Content-Type": "application/json",
-            },
-          });
-
-          if (response.ok) {
-            const updatedGrant = await response.json();
-            setCurGrant(updatedGrant);
-            console.log("✅ Grant refreshed:", updatedGrant);
-          } else {
-            console.error("❌ Failed to fetch updated grant");
-          }
-        } catch (err) {
-          console.error("Error fetching updated grant:", err);
+  // If the NewGrantModal has been closed and a new grant submitted (or existing grant edited),
+  // refetch the grants list and update the current grant to reflect any changes
+  // SHOULD BE CHANGED TO ALSO ACCOMODATE DELETIONS (CURRENTLY ONLY UPDATES IF GRANT WAS CREATED/EDITED, NOT DELETED)
+  useEffect(() => {
+    if (!wasGrantSubmitted || !curGrant) return;
+
+    const updateGrant = async () => {
+      try {
+        const response = await api(`/grant/${curGrant.grantId}`, {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+
+        if (response.ok) {
+          const updatedGrant = await response.json();
+          setCurGrant(updatedGrant);
+          console.log("✅ Grant refreshed:", updatedGrant);
+        } else {
+          console.error("❌ Failed to fetch updated grant");
         }
-      };
-
-      const updateGrants = async () => {
-        try {
-          const response = await api("/grant");
-          if (!response.ok) {
-            throw new Error(`HTTP Error, Status: ${response.status}`);
-          }
-          const updatedGrants: Grant[] = await response.json();
-          fetchAllGrants(updatedGrants);
-          console.log("✅ Grants list refreshed");
-        } catch (error) {
-          console.error("Error fetching grants:", error);
+      } catch (err) {
+        console.error("Error fetching updated grant:", err);
+      }
+    };
+
+    const updateGrants = async () => {
+      try {
+        const response = await api("/grant");
+        if (!response.ok) {
+          throw new Error(`HTTP Error, Status: ${response.status}`);
         }
-      };
+        const updatedGrants: Grant[] = await response.json();
+        fetchAllGrants(updatedGrants);
+        console.log("✅ Grants list refreshed");
+      } catch (error) {
+        console.error("Error fetching grants:", error);
+      }
+    };
 
-      updateGrants();
-      updateGrant();
-      setWasGrantSubmitted(false);
-    }, [wasGrantSubmitted]);
-  
-  const [openModal, setOpenModal] = useState(false);
+    updateGrants();
+    updateGrant();
+    setWasGrantSubmitted(false);
+  }, [wasGrantSubmitted]);
 
   const { user } = useAuthContext(); //gets current logged in user
   const userObj = toJS(user);
@@ -106,41 +101,41 @@ function GrantPage({}: GrantPageProps) {
     updateSearchQuery("");
   }, []);
 
-  return user ? (
-    user?.position !== UserStatus.Inactive ? (
-      <div className="grant-page w-full items-end">
-        <div className="bell-container flex justify-end w-full">
-          <BellButton setOpenModal={setOpenModal} openModal={openModal} />
-        </div>
-        <GrantSearch />
-        <div className="flex w-full justify-between py-2 gap-4">
-            <Button text="Filters Coming Soon" onClick={() => {}} className="border-2 border-grey-500 bg-white" />
-          <AddGrantButton onClick={() => setShowNewGrantModal(true)} />
-        </div>
+  return (
+    <div className="grant-page w-full items-end">
+      <GrantSearch />
+      <div className="flex w-full justify-between py-2 gap-4">
+        <Button
+          text="Filters Coming Soon"
+          onClick={() => {}}
+          className="border-2 border-grey-500 bg-white"
+        />
+        <AddGrantButton onClick={() => setShowNewGrantModal(true)} />
+      </div>
 
-        <div className="flex flex-row w-full gap-2 justify-between mt-4">
-          <div className="flex flex-col w-[33%] h-[150vh] overflow-y-scroll pr-2">
-            {grants.map((grant) => (
-              <GrantCard
-                key={grant.grantId}
-                grant={grant}
-                isSelected={curGrant?.grantId === grant.grantId}
-                onClick={() => setCurGrant(grant)}
-              />
-            ))}
-          </div>
-          <div className="w-[65%]">
-            {curGrant ? (
-              <GrantItem grant={curGrant} />
-            ) : (
-              <div className="flex items-center justify-center h-full text-gray-500">
-                No grants found.
-              </div>
-            )}
-          </div>
+      <div className="flex flex-row w-full gap-2 justify-between mt-4">
+        <div className="flex flex-col w-[33%] h-[150vh] overflow-y-scroll pr-2">
+          {grants.map((grant) => (
+            <GrantCard
+              key={grant.grantId}
+              grant={grant}
+              isSelected={curGrant?.grantId === grant.grantId}
+              onClick={() => setCurGrant(grant)}
+            />
+          ))}
+        </div>
+        <div className="w-[65%]">
+          {curGrant ? (
+            <GrantItem grant={curGrant} />
+          ) : (
+            <div className="flex items-center justify-center h-full text-gray-500">
+              No grants found.
+            </div>
+          )}
         </div>
+      </div>
 
-        {/* <div className="grid grid-cols-5 gap-8 px-4">
+      {/* <div className="grid grid-cols-5 gap-8 px-4">
           <div className="col-span-1">
             <FilterBar />
           </div>
@@ -156,24 +151,19 @@ function GrantPage({}: GrantPageProps) {
             </div>
           </div>
         </div>  */}
-        <div className="hidden-features">
-          {showNewGrantModal && (
-            <NewGrantModal
-              grantToEdit={null}
-              onClose={async () => {
-                setShowNewGrantModal(false);
-                setWasGrantSubmitted(true);
-              }}
-              isOpen={showNewGrantModal}
-            />
-          )}
-        </div>
+      <div className="hidden-features">
+        {showNewGrantModal && (
+          <NewGrantModal
+            grantToEdit={null}
+            onClose={async () => {
+              setShowNewGrantModal(false);
+              setWasGrantSubmitted(true);
+            }}
+            isOpen={showNewGrantModal}
+          />
+        )}
       </div>
-    ) : (
-      <Navigate to="restricted" replace />
-    )
-  ) : (
-    <Navigate to="/login" replace />
+    </div>
   );
 }
 
diff --git a/frontend/src/main-page/grants/filter-bar/GrantSearch.tsx b/frontend/src/main-page/grants/filter-bar/GrantSearch.tsx
index 4f2c4fa..064546f 100644
--- a/frontend/src/main-page/grants/filter-bar/GrantSearch.tsx
+++ b/frontend/src/main-page/grants/filter-bar/GrantSearch.tsx
@@ -1,10 +1,9 @@
-import { IoMdSearch } from "react-icons/io";
 import { useState } from "react";
 import Fuse from "fuse.js";
 import { updateSearchQuery } from "../../../external/bcanSatchel/actions";
 import { getAppStore } from "../../../external/bcanSatchel/store";
 import { Grant } from "../../../../../middle-layer/types/Grant";
-import { Input } from "@chakra-ui/react";
+import SearchBar from "../../../components/SearchBar";
 
 function GrantSearch() {
   const [userInput, setUserInput] = useState(getAppStore().searchQuery || "");
@@ -31,33 +30,7 @@ function GrantSearch() {
   };
 
   return (
-    <div className="w-full relative">
-      {/* Absolutely-positioned icon */}
-      <IoMdSearch
-        style={{
-          position: "absolute",
-          top: "50%",
-          left: "0.7rem",
-          transform: "translateY(-50%)",
-          pointerEvents: "none",
-          zIndex: 2,
-          marginLeft: "2px",
-        }}
-      />
-      <Input
-        placeholder="Search for a grant..."
-        variant="subtle"
-        className="px-4 py-2 rounded-3xl font-medium text-black border-2 flex items-center justify-center border-grey-500"
-        onChange={handleInputChange}
-        value={userInput}
-        style={{ paddingLeft: "2rem" }} // make room for the icon
-        onKeyDown={(e) => {
-          if (e.key === "Enter") {
-            e.preventDefault();
-          }
-        }}
-      />
-    </div>
+    <SearchBar handleInputChange={handleInputChange} userInput={userInput} text="grant"/>
   );
 }
 
diff --git a/frontend/src/main-page/grants/grant-view/ContactCard.tsx b/frontend/src/main-page/grants/grant-view/ContactCard.tsx
index 5d2005a..c65505f 100644
--- a/frontend/src/main-page/grants/grant-view/ContactCard.tsx
+++ b/frontend/src/main-page/grants/grant-view/ContactCard.tsx
@@ -1,3 +1,4 @@
+import { getAppStore } from "../../../external/bcanSatchel/store";
 import POC from "../../../../../middle-layer/types/POC";
 import logo from "../../../images/logo.svg";
 
@@ -6,11 +7,21 @@ type ContactCardProps = {
   type?: "BCAN" | "Granter";
 };
 
+const store = getAppStore()
+const activeUsers = store.activeUsers || [];
+
 export default function ContactCard({ contact, type }: ContactCardProps) {
+
+const contactPhoto =
+  type === "BCAN"
+    ? activeUsers.find((user) => user.email === contact?.POC_email)
+        ?.profilePicUrl
+    : logo;
+
   return (
     <div className="flex flex-row gap-4 w-full justify-items-start rounded border-2 p-3 h-full border-grey-500">
       <img
-        src={logo}
+        src={contactPhoto || logo}
         alt="Profile"
         className="max-w-14 rounded-full hidden lg:block"
       />
diff --git a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
index f4942cd..7ffdbdf 100644
--- a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
+++ b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
@@ -950,7 +950,7 @@ const NewGrantModal: React.FC<{
       {showErrorPopup && (
         <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
           <div
-            className="bg-white rounded-lg p-6 max-w-md mx-4 border-2 border-black"
+            className="bg-white rounded-md p-6 max-w-md mx-4 border-2 border-black"
           >
             <h3 className="text-xl font-bold mb-2">
               Error
diff --git a/frontend/src/main-page/navbar/NavBar.tsx b/frontend/src/main-page/navbar/NavBar.tsx
index f2729ab..69f5e6c 100644
--- a/frontend/src/main-page/navbar/NavBar.tsx
+++ b/frontend/src/main-page/navbar/NavBar.tsx
@@ -31,9 +31,9 @@ const NavBar: React.FC = observer(() => {
   };
   
   return (
-    <aside className="left-0 top-0 h-screen w-52 lg:w-56 bg-white flex flex-col">
+    <aside className="left-0 top-0 h-screen w-48 lg:w-56 bg-white flex flex-col">
       {/* Logo at top */}
-      <div className="p-6 flex items-center justify-center mr-4">
+      <div className="p-6 flex items-center justify-center mr-2">
         <img className="w-12 h-12" src={NavBarBranding.logo} alt={`${NavBarBranding.name} Logo`} />
         <span className="ml-3 text-xl font-semibold">{NavBarBranding.name}</span>
       </div>
@@ -77,7 +77,7 @@ const NavBar: React.FC = observer(() => {
             className="flex items-center gap-3 w-[85%] pl-8 pr-4 py-3 rounded-r-full transition-colors hover:bg-grey-500 hover:text-white text-left border-none font-medium"
           >
             <FontAwesomeIcon icon={faRightFromBracket} className="w-5 h-5" />
-            <span className="text-md">Sign Out</span>
+            <span className="text-sm lg:text-base">Sign Out</span>
           </button>
         </div>
       </div>
diff --git a/frontend/src/main-page/navbar/NavTab.tsx b/frontend/src/main-page/navbar/NavTab.tsx
index 9c698d0..3fc0a81 100644
--- a/frontend/src/main-page/navbar/NavTab.tsx
+++ b/frontend/src/main-page/navbar/NavTab.tsx
@@ -23,7 +23,7 @@ const NavTab: React.FC<NavTabProps> = ({ name, linkTo, icon }) => {
       }`}
     >
       <FontAwesomeIcon icon={icon} className="w-5 h-5" />
-      <span className="text-md">{name}</span>
+      <span className="text-sm lg:text-base">{name}</span>
     </Link>
   );
 };
diff --git a/frontend/src/main-page/notifications/NotificationPopup.tsx b/frontend/src/main-page/notifications/NotificationPopup.tsx
index b38721b..9c8eabf 100644
--- a/frontend/src/main-page/notifications/NotificationPopup.tsx
+++ b/frontend/src/main-page/notifications/NotificationPopup.tsx
@@ -51,7 +51,7 @@ const NotificationPopup: React.FC<NotificationPopupProps> = observer(({
 
 
     return createPortal(
-        <div className="notification-popup" role="dialog" aria-label="Notifications">
+        <div className="notification-popup border-1 border-grey-500 rounded shadow-lg" role="dialog" aria-label="Notifications">
             <div className="popup-header">
                 <h3>Alerts</h3>
                 <button className="close-button" onClick={() => setOpenModal(false)} aria-label="Close notifications">
diff --git a/frontend/src/main-page/restricted/RestrictedPage.tsx b/frontend/src/main-page/restricted/RestrictedPage.tsx
index f52c378..193f826 100644
--- a/frontend/src/main-page/restricted/RestrictedPage.tsx
+++ b/frontend/src/main-page/restricted/RestrictedPage.tsx
@@ -1,35 +1,35 @@
 import { Link } from "react-router-dom";
-import logo from "../../images/logo.svg";
 import { useAuthContext } from "../../context/auth/authContext";
+import Button from "../../components/Button";
+import BrandingPanel from "../../components/BrandingPanel";
+import { UserStatus } from "../../../../middle-layer/types/UserStatus";
+
 
 function RestrictedPage() {
-  const {logout} = useAuthContext();
+  const { logout, user } = useAuthContext();
   return (
-    <div className="flex justify-center gap-20 items-center h-[70vh] text-left">
-      <div>
-        <h1 className="text-7xl font-bold mb-5">So Sorry!</h1>
-        <p className="text-3xl font-bold mb-3">
-          You don't have access to this page.
-        </p>
-        <p className="text-xl mb-9">
-          Contact the admin if you think there's a mistake.
-        </p>
-        <Link to="/login">
-          <button
-            className="py-2 px-4 rounded w-48 font-semibold text-black bg-primary-700"
-            onClick={() => {
-              logout()
-            }}
-          >
-            Back to Login
-          </button>
-        </Link>
+    <div className="bg-white grid grid-cols-[75%_25%] lg:grid-cols-[50%_50%] relative w-screen h-screen m-0 p-0 overflow-hidden text-start">
+      <div className="h-full  px-24 flex flex-col justify-center items-start ">
+        <div className="w-full">
+          <h1 className="text-4xl pb-8 font-bold">So Sorry!</h1>
+          <h2 className="text-lg">
+            {user?.position === UserStatus.Inactive ? "Your account is currently inactive or pending approval." : "You don't have access to this page."} Contact the admin if you think
+            there's a mistake.
+          </h2>
+          <Link to="/login">
+            <Button
+              text="Back to Login"
+              className="py-2 my-8 px-4 bg-primary-900 text-white border-2"
+              onClick={() => {
+                logout();
+              }}
+            />
+          </Link>
+        </div>
+      </div>
+      <div className="h-full flex flex-col justify-center items-center p-8">
+        <BrandingPanel />
       </div>
-      <img
-        className="w-[400px] h-[400px] object-contain"
-        src={logo}
-        alt="BCAN logo"
-      />
     </div>
   );
 }
diff --git a/frontend/src/main-page/settings/components/InfoCard.tsx b/frontend/src/main-page/settings/components/InfoCard.tsx
index a8ffa24..cbe9d8f 100644
--- a/frontend/src/main-page/settings/components/InfoCard.tsx
+++ b/frontend/src/main-page/settings/components/InfoCard.tsx
@@ -13,7 +13,7 @@ type InfoCardProps = {
 
 export default function InfoCard({ title, fields, action }: InfoCardProps) {
   return (
-    <div className="w-full max-w-3xl rounded-lg bg-white p-6 shadow-sm flex flex-col">
+    <div className="w-full max-w-3xl rounded-md bg-white p-6 shadow-sm flex flex-col">
       {(title || action) && (
         <div className="mb-4 flex items-center justify-between">
           {title && (
diff --git a/frontend/src/main-page/users/ApprovedUserCard.tsx b/frontend/src/main-page/users/ApprovedUserCard.tsx
deleted file mode 100644
index 454be43..0000000
--- a/frontend/src/main-page/users/ApprovedUserCard.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import UserPositionCard from "./UserPositionCard";
-import { Button, Menu } from "@chakra-ui/react";
-import { FaEllipsisVertical } from "react-icons/fa6";
-import { UserStatus } from "../../../../middle-layer/types/UserStatus";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
-import ActionConfirmation from "../../custom/ActionConfirmation";
-import { useState } from "react";
-import { api } from "../../api";
-import { User } from "../../../../middle-layer/types/User";
-import { toJS } from "mobx";
-import { getAppStore } from "../../external/bcanSatchel/store";
-import { setActiveUsers } from "../../external/bcanSatchel/actions";
-// Did not change this to using the email/first name last name due to user page redesign so someone will be changing all of this anyway
-interface ApprovedUserCardProps {
-  userId: string;
-  email: string;
-  position: UserStatus;
-}
-
-const ApprovedUserCard = ({
-  userId,
-  email,
-  position,
-}: ApprovedUserCardProps) => {
-  const store = getAppStore();
-  const [isChangeGroupModalOpen, setIsChangeGroupModalOpen] = useState(false);
-  const [isDeleteUserModalOpen, setIsDeleteUserModalOpen] = useState(false);
-
-  const changeUserGroup = async () => {
-    console.log(
-      `Changing user ${email} to ${
-        position === UserStatus.Admin ? "employee" : "admin"
-      }...`
-    );
-
-    try {
-      const response = await api("/user/change-role", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          user: {
-            email,
-            position,
-          } as User,
-          groupName:
-            position === UserStatus.Admin
-              ? UserStatus.Employee
-              : UserStatus.Admin,
-          requestedBy: toJS(store.user) as User,
-        }),
-      });
-
-      if (response.ok) {
-        console.log(
-          `User ${userId} successfully changed to ${
-            position === UserStatus.Admin ? "employee" : "admin"
-          }`
-        );
-        alert(
-          `User ${userId} successfully changed to ${
-            position === UserStatus.Admin ? "employee" : "admin"
-          }`
-        );
-        const updatedUser = await response.json();
-        setActiveUsers([...store.activeUsers.filter(u => u.email !== email), updatedUser as User]);
-
-        setIsChangeGroupModalOpen(false);
-      } else {
-        const errorBody = await response.json();
-        console.error("Error: ", errorBody)
-      }
-    } catch (error) {
-      console.error("Error changing user group: ", error);
-    }
-  };
-
-  const deleteUser = async () => {
-    try {
-      const response = await api("user/delete-user", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          user: {
-            email,
-            position,
-          } as User,
-          requestedBy: toJS(store.user) as User,
-        }),
-      });
-
-      if (response.ok) {
-        console.log(`User ${email} has been deleted successfully`);
-        alert(`User ${email} has been deleted successfully`);
-        setActiveUsers(store.activeUsers.filter(u => u.email !== email));
-
-      } else {
-        const errorBody = await response.json();
-        console.error("Error: ", errorBody)
-        alert("Failed to delete user");
-      }
-      setIsDeleteUserModalOpen(false);
-    } catch (error) {
-      console.error("Error deleting user:", error);
-      alert("Error deleting user");
-    }
-  };
-
-  return (
-    <div className="bg-white text-lg border rounded-md m-6 p-6 flex justify-around items-center">
-      <ActionConfirmation
-        isOpen={isChangeGroupModalOpen}
-        onCloseDelete={() => setIsChangeGroupModalOpen(false)}
-        onConfirmDelete={changeUserGroup}
-        title={`Change User to ${
-          position === UserStatus.Admin ? "Employee" : "Admin"
-        }`}
-        subtitle="Are you sure you want to change to"
-        boldSubtitle={position === UserStatus.Admin ? "employee" : "admin"}
-        warningMessage={`By changing to ${
-          position === UserStatus.Admin ? "employee" : "admin"
-        }, they will ${
-          position === UserStatus.Admin
-            ? "gain access to sensitive data."
-            : "lose access to admin pages."
-        }`}
-      />
-      <ActionConfirmation
-        isOpen={isDeleteUserModalOpen}
-        onCloseDelete={() => setIsDeleteUserModalOpen(false)}
-        onConfirmDelete={deleteUser}
-        title="Delete User"
-        subtitle="Are you sure you want to delete"
-        boldSubtitle={userId}
-        warningMessage="By deleting this user, they won't be available in the system anymore."
-      />
-      <p className="font-semibold w-[140px] text-left">{userId}</p>
-      <p className="w-[140px] text-left">{email}</p>
-      <div className="w-[140px]">
-        <UserPositionCard position={position} />
-      </div>
-      <div className="absolute right-14">
-        <Menu.Root>
-          <Menu.Trigger>
-            <Button
-              variant="ghost"
-              className="focus:outline-none hover:border-none transition-none"
-            >
-              <FaEllipsisVertical />
-            </Button>
-          </Menu.Trigger>
-          <Menu.Positioner>
-            <Menu.Content>
-              <Button
-                px={4}
-                className="text-sm focus:outline-none block w-full bg-grey-400 border-grey-600 text-grey-600 mb-1"
-                onClick={() => setIsChangeGroupModalOpen(true)}
-              >
-                Change to {position === UserStatus.Admin ? "employee" : "admin"}
-                {"  "}
-                <FontAwesomeIcon icon={faPencil} />
-              </Button>
-              <Button
-                px={4}
-                className="text-sm focus:outline-none block w-full bg-red-light border-red text-red"
-                onClick={() => setIsDeleteUserModalOpen(true)}
-              >
-                Delete user{"  "}
-                <FontAwesomeIcon icon={faTrash} />
-              </Button>
-            </Menu.Content>
-          </Menu.Positioner>
-        </Menu.Root>
-      </div>
-    </div>
-  );
-};
-
-export default ApprovedUserCard;
diff --git a/frontend/src/main-page/users/PendingUserCard.tsx b/frontend/src/main-page/users/PendingUserCard.tsx
deleted file mode 100644
index fa740e4..0000000
--- a/frontend/src/main-page/users/PendingUserCard.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import UserPositionCard from "./UserPositionCard";
-import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
-import { api } from "../../api"
-import { UserStatus } from "../../../../middle-layer/types/UserStatus";
-import { getAppStore } from "../../external/bcanSatchel/store";
-import { User } from "../../../../middle-layer/types/User";
-import { toJS } from "mobx";
-import { moveUserToActive, removeUser } from "./UserActions";
-import { useState } from "react";
-
-// Did not change this to using the email/first name last name due to user page redesign so someone will be changing all of this anyway
-
-const store = getAppStore();
-
-interface PendingUserCardProps {
-  userId: string;
-  email: string;
-  position: UserStatus;
-}
-
-
-const PendingUserCard = ({
-  userId,
-  email,
-  position,
-}: PendingUserCardProps) => {
-
-  const [isLoading, setIsLoading] = useState(false);
-
-  const approveUser = async () => {
-    setIsLoading(true);
-    try {
-      const response = await api("/user/change-role", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          user: {
-            email,
-            position
-          } as User,
-          groupName: "Employee",
-          requestedBy: toJS(store.user) as User,
-        }),
-      });
-      if (response.ok) {
-        alert(`User ${userId} has been approved successfully`);
-        const body = await response.json();
-        moveUserToActive(body as User)
-      } else {
-        alert("Failed to approve user");
-      }
-    } catch (error) {
-      console.error("Error approving user:", error);
-      alert("Error approving user");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  const rejectUser = async () => {
-    setIsLoading(true);
-    try {
-      const response = await api("user/delete-user", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          user: {
-            email: email,
-            position,
-          } as User,
-          requestedBy: toJS(store.user) as User,
-        }),
-      });
-      if (response.ok) {
-        alert(`User ${name} has been deleted successfully`);
-        const body = await response.json();
-        removeUser(body)
-      } else {
-        alert("Failed to reject user");
-      }
-    } catch (error) {
-      console.error("Error rejecting user:", error);
-      alert("Error rejecting user");
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <div className="bg-white text-lg border rounded-md m-6 p-6 flex justify-around items-center">
-      <p className="font-semibold w-[140px] text-left">{userId}</p>
-      <p className="w-[140px] text-left">{email}</p>
-      <div className="w-[140px]">
-        <UserPositionCard position={position} />
-      </div>
-      <div className="flex w-[140px] gap-3">
-        <button 
-          className="bg-green-light w-8 h-8 focus:outline-none rounded"
-          onClick={approveUser}
-          disabled={isLoading}>
-          <FontAwesomeIcon icon={faCheck} className="text-black" />
-        </button>
-        <button 
-        className="bg-red-light w-8 h-8 focus:outline-none rounded"
-          onClick={rejectUser}
-          disabled={isLoading}>
-          <FontAwesomeIcon icon={faX} className="text-black"/>
-        </button>
-      </div>
-    </div>
-  );
-};
-
-export default PendingUserCard;
diff --git a/frontend/src/main-page/users/UserActions.ts b/frontend/src/main-page/users/UserActions.ts
index f726fbd..ddffc50 100644
--- a/frontend/src/main-page/users/UserActions.ts
+++ b/frontend/src/main-page/users/UserActions.ts
@@ -1,12 +1,19 @@
-import { api } from "../../api"
+import { api } from "../../api";
 import { User } from "../../../../middle-layer/types/User";
-import { setActiveUsers, setInactiveUsers } from "../../external/bcanSatchel/actions";
+import {
+  setActiveUsers,
+  setInactiveUsers,
+} from "../../external/bcanSatchel/actions";
 import { getAppStore } from "../../external/bcanSatchel/store";
 import { toJS } from "mobx";
+import { UserStatus } from "../../../../middle-layer/types/UserStatus";
+
+const store = getAppStore();
+
 export const fetchActiveUsers = async (): Promise<User[]> => {
   try {
     const response = await api("/user/active", {
-      method: 'GET'
+      method: "GET",
     });
 
     if (!response.ok && response.status !== 200) {
@@ -19,43 +26,163 @@ export const fetchActiveUsers = async (): Promise<User[]> => {
     console.error("Error fetching active users:", error);
     return []; // Return empty array on error
   }
-}
+};
 
 export const fetchInactiveUsers = async (): Promise<User[]> => {
   try {
-    const response = await api("/user/inactive", { method: 'GET' });
+    const response = await api("/user/inactive", { method: "GET" });
     if (!response.ok && response.status !== 200) {
       throw new Error(`HTTP Error, Status: ${response.status}`);
     }
     const inactiveUsers = await response.json();
     return inactiveUsers as User[];
+  } catch (error) {
+    console.error("Error fetching inactive users:", error);
+    return []; // Return empty array on error
   }
-  catch (error) {
-    console.error("Error fetching active users:", error);
-        return []; // Return empty array on error
-
-  }
-}
+};
 
 export const fetchUsers = async () => {
   console.log("Fetching users...");
-      const active = await fetchActiveUsers();
-      const inactive = await fetchInactiveUsers();
-      if (active) {
-        setActiveUsers(active);
-        console.log("Active users fetched:", toJS(getAppStore().activeUsers));
-      }
-      if (inactive) {
-        setInactiveUsers(inactive);
-        console.log("Inactive users fetched:", toJS(getAppStore().inactiveUsers));
-      }
-    };
+  const active = await fetchActiveUsers();
+  const inactive = await fetchInactiveUsers();
+  if (active) {
+    setActiveUsers(active);
+    console.log("Active users fetched:", toJS(store.activeUsers));
+  }
+  if (inactive) {
+    setInactiveUsers(inactive);
+    console.log("Inactive users fetched:", toJS(store.inactiveUsers));
+  }
+};
 
 export const moveUserToActive = (user: User) => {
-  setActiveUsers([...getAppStore().activeUsers, user]);
-  setInactiveUsers(getAppStore().inactiveUsers.filter(u => u.email !== user.email));
-}
+  setActiveUsers([...store.activeUsers, user]);
+  setInactiveUsers(store.inactiveUsers.filter((u) => u.email !== user.email));
+};
 
 export const removeUser = (user: User) => {
-  setInactiveUsers(getAppStore().inactiveUsers.filter(u => u.email !== user.email));
-}
\ No newline at end of file
+  setInactiveUsers(store.inactiveUsers.filter((u) => u.email !== user.email));
+  setActiveUsers(store.activeUsers.filter((u) => u.email !== user.email));
+};
+
+export const approveUser = async (
+  user: User,
+  setIsLoading: (loading: boolean) => void,
+) => {
+  setIsLoading(true);
+  try {
+    const response = await api("/user/change-role", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        user: {
+          email: user.email,
+          position: user.position,
+        } as User,
+        groupName: "Employee",
+        requestedBy: toJS(store.user) as User,
+      }),
+    });
+    if (response.ok) {
+      alert(`User ${user.email} has been approved successfully`);
+      const body = await response.json();
+      moveUserToActive(body as User);
+    } else {
+      alert("Failed to approve user");
+    }
+  } catch (error) {
+    console.error("Error approving user:", error);
+    alert("Error approving user");
+  } finally {
+    setIsLoading(false);
+  }
+};
+
+export const deleteUser = async (
+  user: User,
+  setIsLoading: (loading: boolean) => void,
+) => {
+  setIsLoading(true);
+  try {
+    const response = await api(
+      `user/delete-user/${encodeURIComponent(user.email)}`,
+      {
+        method: "DELETE",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          user: {
+            email: user.email,
+            position: user.position,
+          } as User,
+          requestedBy: toJS(store.user) as User,
+        }),
+      },
+    );
+
+    if (response.ok) {
+      console.log(`User ${user.email} has been deleted successfully`);
+      alert(`User ${user.email} has been deleted successfully`);
+      const body = await response.json();
+      removeUser(body);
+    } else {
+      const errorBody = await response.json();
+      console.error("Error: ", errorBody);
+      alert("Failed to delete user");
+    }
+  } catch (error) {
+    console.error("Error deleting user:", error);
+    alert("Error deleting user");
+  } finally {
+    setIsLoading(false);
+  }
+};
+
+export const changeUserGroup = async (user: User) => {
+  console.log(
+    `Changing user ${user.email} to ${
+      user.position === UserStatus.Admin ? "employee" : "admin"
+    }...`,
+  );
+
+  try {
+    const response = await api("/user/change-role", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        user: {
+          email: user.email,
+          position: user.position,
+        } as User,
+        groupName:
+          user.position === UserStatus.Admin
+            ? UserStatus.Employee
+            : UserStatus.Admin,
+        requestedBy: toJS(store.user) as User,
+      }),
+    });
+
+    if (response.ok) {
+      console.log(
+        `User ${user.email} successfully changed to ${
+          user.position === UserStatus.Admin ? "employee" : "admin"
+        }`,
+      );
+      alert(
+        `User ${user.email} successfully changed to ${
+          user.position === UserStatus.Admin ? "employee" : "admin"
+        }`,
+      );
+      const updatedUser = await response.json();
+      setActiveUsers([
+        ...store.activeUsers.filter((u) => u.email !== user.email),
+        updatedUser as User,
+      ]);
+    } else {
+      const errorBody = await response.json();
+      console.error("Error: ", errorBody);
+    }
+  } catch (error) {
+    console.error("Error changing user group: ", error);
+  }
+};
diff --git a/frontend/src/main-page/users/UserSearch.tsx b/frontend/src/main-page/users/UserSearch.tsx
new file mode 100644
index 0000000..2f1c328
--- /dev/null
+++ b/frontend/src/main-page/users/UserSearch.tsx
@@ -0,0 +1,37 @@
+import { useState } from "react";
+import Fuse from "fuse.js";
+import { getAppStore } from "../../external/bcanSatchel/store";
+import { updateUserQuery } from "../../external/bcanSatchel/actions";
+import { User } from "../../../../middle-layer/types/User";
+import SearchBar from "../../components/SearchBar";
+
+function UserSearch() {
+  const [userInput, setUserInput] = useState(getAppStore().userQuery || "");
+  // @ts-ignore
+  const [users, _setUsers] = useState<User[]>([]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUserInput(e.target.value);
+    performSearch(e.target.value);
+  };
+
+  const performSearch = (query: string) => {
+    if (!query) {
+      updateUserQuery("");
+      return;
+    }
+    const fuse = new Fuse<User>(users, {
+      keys: ["firstName", "lastName", "email"],
+      threshold: 0.3,
+    });
+    // const results =
+    fuse.search(query).map((res) => res.item);
+    updateUserQuery(query);
+  };
+
+  return (
+    <SearchBar handleInputChange={handleInputChange} userInput={userInput} text="user"/>
+  );
+}
+
+export default UserSearch;
diff --git a/frontend/src/main-page/users/Users.tsx b/frontend/src/main-page/users/Users.tsx
deleted file mode 100644
index 467252f..0000000
--- a/frontend/src/main-page/users/Users.tsx
+++ /dev/null
@@ -1,221 +0,0 @@
-import { useEffect, useState } from "react";
-import ApprovedUserCard from "./ApprovedUserCard";
-import PendingUserCard from "./PendingUserCard";
-import { User } from "../../../../middle-layer/types/User";
-import { Pagination, ButtonGroup, IconButton } from "@chakra-ui/react";
-import { HiChevronLeft, HiChevronRight } from "react-icons/hi";
-import { observer } from "mobx-react-lite";
-import { getAppStore } from "../../external/bcanSatchel/store";
-import { api } from "../../api";
-import { Navigate } from "react-router-dom";
-import { UserStatus } from "../../../../middle-layer/types/UserStatus";
-import { useAuthContext } from "../../context/auth/authContext";
-
-// Did not change this to using the email/first name last name due to user page redesign so someone will be changing all of this anyway
-// Represents a specific tab to show on the user page
-enum UsersTab {
-  PendingUsers,
-  CurrentUsers,
-}
-
-const fetchActiveUsers = async (): Promise<User[]> => {
-  try {
-    const response = await api("/user/active", {
-      method: "GET",
-    });
-
-    if (!response.ok) {
-      throw new Error(`HTTP Error, Status: ${response.status}`);
-    }
-
-    const activeUsers = await response.json();
-    return activeUsers as User[];
-  } catch (error) {
-    console.error("Error fetching active users:", error);
-    return []; // Return empty array on error
-  }
-};
-
-const fetchInactiveUsers = async () => {
-  try {
-    const response = await api("/user/inactive", { method: "GET" });
-    if (!response.ok) {
-      throw new Error(`HTTP Error, Status: ${response.status}`);
-    }
-    const inactiveUsers = await response.json();
-    return inactiveUsers as User[];
-  } catch (error) {
-    console.error("Error fetching active users:", error);
-  }
-};
-
-const ITEMS_PER_PAGE = 8;
-
-const Users = observer(() => {
-  const store = getAppStore();
-  const { user } = useAuthContext();
-
-  useEffect(() => {
-    const fetchUsers = async () => {
-      const active = await fetchActiveUsers();
-      const inactive = await fetchInactiveUsers();
-      if (active) {
-        store.activeUsers = active;
-      }
-      if (inactive) {
-        store.inactiveUsers = inactive;
-      }
-    };
-    fetchUsers();
-  }, []);
-
-  const [usersTabStatus, setUsersTabStatus] = useState<UsersTab>(
-    UsersTab.CurrentUsers
-  );
-  const [currentPage, setCurrentPage] = useState(1);
-
-  const filteredUsers =
-    usersTabStatus === UsersTab.PendingUsers
-      ? store.inactiveUsers
-      : store.activeUsers;
-
-  const numInactiveUsers = store.inactiveUsers.length;
-  const numUsers = filteredUsers.length;
-  const pageStartIndex = (currentPage - 1) * ITEMS_PER_PAGE;
-  const pageEndIndex =
-    pageStartIndex + ITEMS_PER_PAGE > numUsers
-      ? numUsers
-      : pageStartIndex + ITEMS_PER_PAGE;
-  const currentPageUsers = filteredUsers.slice(pageStartIndex, pageEndIndex);
-
-  return user ? (
-    user?.position !== UserStatus.Inactive ? (
-      <div className="p-8">
-        <div className="text-left mb-5">
-          <h1 className="font-medium text-4xl">
-            {usersTabStatus === UsersTab.CurrentUsers
-              ? "All Users"
-              : "Pending Users"}
-          </h1>
-          <p className="text-primary-900">{numInactiveUsers} new users</p>
-        </div>
-        <div className="min-h-screen bg-grey-100 border rounded-md relative flex flex-col">
-          <div className="absolute right-7 top-0 -translate-y-full flex">
-            <button
-              className={`w-52 h-16 border rounded-b-none focus:outline-none ${
-                usersTabStatus === UsersTab.PendingUsers
-                  ? "bg-grey-100 border-x-black border-t-black"
-                  : "bg-grey-100 border-x-grey-500 border-t-grey-500 border-b-black"
-              }`}
-              onClick={() => {
-                setUsersTabStatus(UsersTab.PendingUsers);
-                setCurrentPage(1);
-              }}
-            >
-              Pending Users
-            </button>
-            <button
-              className={`w-52 h-16 border rounded-b-none ml-2 focus:outline-none ${
-                usersTabStatus === UsersTab.CurrentUsers
-                  ? "bg-grey-100 border-x-black border-t-black"
-                  : "bg-grey-100 border-x-grey-500 border-t-grey-500 border-b-black"
-              }`}
-              onClick={() => {
-                setUsersTabStatus(UsersTab.CurrentUsers);
-                setCurrentPage(1);
-              }}
-            >
-              Current Users
-            </button>
-          </div>
-          <div>
-            {usersTabStatus === UsersTab.CurrentUsers ? (
-              <>
-                <div className="flex px-9 pb-3 m-7 border-b border-b-grey-500 font-semibold justify-around">
-                  <p className="w-[140px] text-left">User ID</p>
-                  <p className="w-[140px] text-left">Email</p>
-                  <p className="w-[140px] text-left">Position</p>
-                </div>
-                {currentPageUsers.map((user) => (
-                  <ApprovedUserCard
-                    key={user.email}
-                    userId={user.email}
-                    email={user.email}
-                    position={user.position}
-                  />
-                ))}
-              </>
-            ) : (
-              <>
-                <div className="flex px-9 pb-3 m-7 border-b border-b-grey-500 font-semibold justify-around">
-                  <p className="w-[140px] text-left">User ID</p>
-                  <p className="w-[140px] text-left">Email</p>
-                  <p className="w-[140px] text-left">Position</p>
-                  <div className="w-[140px]"></div>
-                </div>
-                {currentPageUsers.map((user) => (
-                  <PendingUserCard
-                    key={user.email}
-                    userId={user.email}
-                    email={user.email}
-                    position={user.position}
-                  />
-                ))}
-              </>
-            )}
-          </div>
-          <Pagination.Root
-            className="pt-4 mt-auto pb-4"
-            count={numUsers}
-            pageSize={ITEMS_PER_PAGE}
-            page={currentPage}
-            onPageChange={(e) => {
-              setCurrentPage(e.page);
-            }}
-          >
-            <ButtonGroup variant="ghost" size="md">
-              <Pagination.PrevTrigger asChild>
-                <IconButton>
-                  <HiChevronLeft />
-                </IconButton>
-              </Pagination.PrevTrigger>
-              <Pagination.Context>
-                {({ pages }) =>
-                  pages.map((page, index) =>
-                    page.type === "page" ? (
-                      <IconButton
-                        key={index}
-                        className={
-                          currentPage === page.value
-                            ? "text-secondary-500 underline"
-                            : "ghost"
-                        }
-                        onClick={() => setCurrentPage(page.value)}
-                        aria-label={`Go to page ${page.value}`}
-                      >
-                        {page.value}
-                      </IconButton>
-                    ) : (
-                      "..."
-                    )
-                  )
-                }
-              </Pagination.Context>
-              <Pagination.NextTrigger asChild>
-                <IconButton>
-                  <HiChevronRight />
-                </IconButton>
-              </Pagination.NextTrigger>
-            </ButtonGroup>
-          </Pagination.Root>
-        </div>
-      </div>
-    ) : (
-      <Navigate to="restricted" replace />
-    )
-  ) : (
-    <Navigate to="/login" replace />
-  );
-});
-
-export default Users;
diff --git a/frontend/src/main-page/users/UsersPage.tsx b/frontend/src/main-page/users/UsersPage.tsx
new file mode 100644
index 0000000..639527a
--- /dev/null
+++ b/frontend/src/main-page/users/UsersPage.tsx
@@ -0,0 +1,126 @@
+import { useState } from "react";
+//import { ButtonGroup, IconButton, Pagination } from "@chakra-ui/react";
+
+import { observer } from "mobx-react-lite";
+import Button from "../../components/Button.tsx";
+import UserSearch from "./UserSearch.tsx";
+import { ProcessUserData } from "./processUserData.ts";
+import UserRow from "./user-rows/UserRow.tsx";
+import UserMenu from "./user-rows/UserMenu.tsx";
+import UserRowHeader from "./user-rows/UserRowHeader.tsx";
+import UserApprove from "./user-rows/UserApprove.tsx";
+
+const UsersPage = observer(() => {
+  const [showAll, setShowAll] = useState(true);
+
+  const { activeUsers, inactiveUsers } = ProcessUserData();
+  //const ITEMS_PER_PAGE = 8;
+
+  //const [currentPage, setCurrentPage] = useState(1);
+
+  const filteredUsers = showAll ? activeUsers : inactiveUsers;
+
+  // const numUsers = filteredUsers.length;
+  // const pageStartIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+  // const pageStartIndex = 1; // Temporarily disable pagination by always starting at index 0
+  // const pageEndIndex =
+  //   pageStartIndex + ITEMS_PER_PAGE > numUsers
+  //     ? numUsers
+  //     : pageStartIndex + ITEMS_PER_PAGE;
+  // const currentPageUsers = filteredUsers.slice(pageStartIndex, pageEndIndex);
+  const currentPageUsers = filteredUsers; // Temporarily disable pagination by showing all users
+  return (
+    <div className="grant-page w-full items-end">
+      <UserSearch />
+      <div className="flex w-full py-2 gap-2">
+        <Button
+          text="Active Users"
+          onClick={() => setShowAll(true)}
+          className={`border-2 ${showAll ? "text-white bg-primary-900" : "bg-white border-grey-500 text-black"}`}
+        />
+        <div className="relative">
+          <Button
+            text="Pending Users"
+            onClick={() => setShowAll(false)}
+            className={`border-2  ${!showAll ? " text-white bg-primary-900" : "bg-white border-grey-500 text-black"}`}
+          />
+          {inactiveUsers.length > 0 && (
+            <span className="absolute top-[0.25rem] right-0 w-3 h-3 rounded-full bg-red border-2 border-white" />
+          )}
+        </div>
+      </div>
+
+      <div className="flex flex-row w-full gap-2 justify-between mt-4 bg-white rounded-md">
+        <div className="flex flex-col w-full overflow-y-scroll text-start">
+          <UserRowHeader />
+          {currentPageUsers.map((user) => (
+            <div key={user.email}>
+              <UserRow
+                user={user}
+                action={
+                  showAll ? (
+                    <UserMenu user={user} />
+                  ) : (
+                    <UserApprove user={user} />
+                  )
+                }
+              />
+            </div>
+          ))}
+          {currentPageUsers.length === 0 && (
+            <div className="flex flex-col items-center justify-center py-10 gap-4">
+              <p className="text-lg text-gray-500">No users to display</p>
+            </div>
+          )}
+        </div>
+      </div>
+      {/* Commenting out pagination for now to check if needed */}
+      {/* <Pagination.Root
+          className="pt-4 mt-auto pb-4"
+          count={numUsers}
+          pageSize={ITEMS_PER_PAGE}
+          page={currentPage}
+          onPageChange={(e) => {
+            setCurrentPage(e.page);
+          }}
+        >
+          <ButtonGroup variant="ghost" size="md">
+            <Pagination.PrevTrigger asChild>
+              <IconButton>
+                <HiChevronLeft />
+              </IconButton>
+            </Pagination.PrevTrigger>
+            <Pagination.Context>
+              {({ pages }) =>
+                pages.map((page, index) =>
+                  page.type === "page" ? (
+                    <IconButton
+                      key={index}
+                      className={
+                        currentPage === page.value
+                          ? "text-secondary-500 underline"
+                          : "ghost"
+                      }
+                      onClick={() => setCurrentPage(page.value)}
+                      aria-label={`Go to page ${page.value}`}
+                    >
+                      {page.value}
+                    </IconButton>
+                  ) : (
+                    "..."
+                  ),
+                )
+              }
+            </Pagination.Context>
+            <Pagination.NextTrigger asChild>
+              <IconButton>
+                <HiChevronRight />
+              </IconButton>
+            </Pagination.NextTrigger>
+          </ButtonGroup>
+        </Pagination.Root> */}
+    </div>
+  );
+});
+
+export default UsersPage;
diff --git a/frontend/src/main-page/users/processUserData.ts b/frontend/src/main-page/users/processUserData.ts
new file mode 100644
index 0000000..34fc80c
--- /dev/null
+++ b/frontend/src/main-page/users/processUserData.ts
@@ -0,0 +1,73 @@
+import { useEffect } from "react";
+import { User } from "../../../../middle-layer/types/User.ts";
+import { getAppStore } from "../../external/bcanSatchel/store.ts";
+import { fetchActiveUsers, fetchInactiveUsers } from "./UserActions.ts";
+
+const searchFilter = (searchQuery: string) => (user: User) => {
+  if (!searchQuery.trim()) return true;
+
+  const query = searchQuery.toLowerCase();
+  const firstName = user.firstName?.toLowerCase() || "";
+  const lastName = user.lastName?.toLowerCase() || "";
+  const email = user.email?.toLowerCase() || "";
+
+  return (
+    firstName.includes(query) ||
+    lastName.includes(query) ||
+    email.includes(query)
+  );
+};
+
+const filterUsers = (users: User[], predicates: ((user: User) => boolean)[]) =>
+  users.filter((user) => predicates.every((fn) => fn(user)));
+
+const sortUsers = (
+  users: User[],
+  header: keyof User,
+  sort: "asc" | "desc" | "none",
+) =>
+  [...users].sort((a: User, b: User) => {
+    const direction = sort === "asc" ? -1 : 1;
+
+    const aValue = a[header];
+    const bValue = b[header];
+
+    if (aValue == null) return -1 * direction;
+    if (bValue == null) return 1 * direction;
+
+    if (aValue > bValue) return 1 * direction;
+    if (aValue < bValue) return -1 * direction;
+
+    return 0;
+  });
+
+// contains callbacks for sorting and filtering users
+// stores state for list of users/filter
+export const ProcessUserData = () => {
+  const { activeUsers, inactiveUsers, userQuery, userSort } = getAppStore();
+
+  // fetch users on mount if empty
+  useEffect(() => {
+    if (activeUsers.length === 0) fetchActiveUsers();
+    if (inactiveUsers.length === 0) fetchInactiveUsers();
+  }, [activeUsers.length, inactiveUsers.length]);
+
+  // compute filtered users dynamically — no useState needed
+  const activeFiltered = filterUsers(activeUsers, [searchFilter(userQuery)]);
+
+  const inactiveFiltered = filterUsers(inactiveUsers, [
+    searchFilter(userQuery),
+  ]);
+
+  const sortedActive =
+    userSort && userSort.sort !== "none"
+      ? sortUsers(activeFiltered, userSort.header, userSort.sort)
+      : activeFiltered;
+
+  const sortedInactive =
+    userSort && userSort.sort !== "none"
+      ? sortUsers(inactiveFiltered, userSort.header, userSort.sort)
+      : inactiveFiltered;
+
+  return { activeUsers: sortedActive, inactiveUsers: sortedInactive };
+};
diff --git a/frontend/src/main-page/users/user-rows/UserApprove.tsx b/frontend/src/main-page/users/user-rows/UserApprove.tsx
new file mode 100644
index 0000000..4cfc7d6
--- /dev/null
+++ b/frontend/src/main-page/users/user-rows/UserApprove.tsx
@@ -0,0 +1,33 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheck, faX } from "@fortawesome/free-solid-svg-icons";
+import { User } from "../../../../../middle-layer/types/User";
+import { approveUser, deleteUser } from "../UserActions";
+import { useState } from "react";
+interface UserApproveProps {
+  user: User;
+}
+
+const UserApprove = ({ user }: UserApproveProps) => {
+  const [isLoading, setIsLoading] = useState(false);
+
+  return (
+    <div className="flex gap-3 w-full">
+      <button
+        className={`bg-green-light flex-none w-8 h-8 focus:outline-none rounded-sm hover:border-green-dark ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
+        onClick={() => approveUser(user, setIsLoading)}
+        disabled={isLoading}
+      >
+        <FontAwesomeIcon icon={faCheck} className="text-green" />
+      </button>
+      <button
+        className={`bg-red-light flex-none w-8 h-8 focus:outline-none rounded-sm hover:border-red-dark ${isLoading ? "opacity-50 cursor-not-allowed" : ""}`}
+        onClick={() => deleteUser(user, setIsLoading)}
+        disabled={isLoading}
+      >
+        <FontAwesomeIcon icon={faX} className="text-red" />
+      </button>
+    </div>
+  );
+};
+
+export default UserApprove;
diff --git a/frontend/src/main-page/users/user-rows/UserMenu.tsx b/frontend/src/main-page/users/user-rows/UserMenu.tsx
new file mode 100644
index 0000000..e94e739
--- /dev/null
+++ b/frontend/src/main-page/users/user-rows/UserMenu.tsx
@@ -0,0 +1,89 @@
+import { Menu } from "@chakra-ui/react";
+import { UserStatus } from "../../../../../middle-layer/types/UserStatus";
+import { faUserPen, faTrash } from "@fortawesome/free-solid-svg-icons";
+import ActionConfirmation from "../../../custom/ActionConfirmation";
+import { useState } from "react";
+import { User } from "../../../../../middle-layer/types/User";
+import Button from "../../../components/Button";
+import { FaEllipsis } from "react-icons/fa6";
+import { changeUserGroup, deleteUser } from "../UserActions";
+
+interface UserMenuProps {
+  user: User;
+}
+
+const UserMenu = ({ user }: UserMenuProps) => {
+  const [isChangeGroupModalOpen, setIsChangeGroupModalOpen] = useState(false);
+  const [isDeleteUserModalOpen, setIsDeleteUserModalOpen] = useState(false);
+
+  return (
+    <div key={user.email} className="w-full">
+      <ActionConfirmation
+        isOpen={isChangeGroupModalOpen}
+        onCloseDelete={() => setIsChangeGroupModalOpen(false)}
+        onConfirmDelete={() => changeUserGroup(user)}
+        title={`Change User to ${
+          user.position === UserStatus.Admin ? "Employee" : "Admin"
+        }`}
+        subtitle="Are you sure you want to change to"
+        boldSubtitle={user.position === UserStatus.Admin ? "employee" : "admin"}
+        warningMessage={`By changing to ${
+          user.position === UserStatus.Admin ? "employee" : "admin"
+        }, they will ${
+          user.position === UserStatus.Admin
+            ? "lose access to sensitive data."
+            : "gain access to admin pages."
+        }`}
+      />
+      <ActionConfirmation
+        isOpen={isDeleteUserModalOpen}
+        onCloseDelete={() => setIsDeleteUserModalOpen(false)}
+        onConfirmDelete={() => deleteUser(user, () => {})}
+        title="Delete User"
+        subtitle="Are you sure you want to delete"
+        boldSubtitle={user.email}
+        warningMessage="By deleting this user, they won't be available in the system anymore."
+      />
+      <div className="">
+        <Menu.Root>
+          <Menu.Trigger>
+            <div className="p-2 border-0  cursor-pointerchakra">
+              <FaEllipsis />
+            </div>
+          </Menu.Trigger>
+          <Menu.Positioner>
+            <Menu.Content className="bg-white rounded-md shadow-lg border-grey-500 border-1">
+              <div className="text-left justify-start">
+                <Button
+                  text={
+                    "Change to " +
+                    (user.position === UserStatus.Admin
+                      ? "employee"
+                      : "admin") +
+                    "  "
+                  }
+                  logo={faUserPen}
+                  logoPosition="left"
+                  onClick={() => setIsChangeGroupModalOpen(true)}
+                  disabled={isChangeGroupModalOpen || isDeleteUserModalOpen}
+                  className="text-sm focus:outline-none block w-full hover:border-grey-800 active:bg-grey-800 text-grey-800"
+                />
+                <hr className="border-t-1 border-grey-400 my-1 mx-2"></hr>
+                <Button
+                  text={"Delete user  "}
+                  logo={faTrash}
+                  logoPosition="left"
+                  disabled={isChangeGroupModalOpen || isDeleteUserModalOpen}
+                  onClick={() => setIsDeleteUserModalOpen(true)}
+                  className="text-sm focus:outline-none block w-full hover:border-red active:bg-red text-red"
+                />
+              </div>
+            </Menu.Content>
+          </Menu.Positioner>
+        </Menu.Root>
+      </div>
+    </div>
+  );
+};
+
+export default UserMenu;
diff --git a/frontend/src/main-page/users/UserPositionCard.tsx b/frontend/src/main-page/users/user-rows/UserPositionCard.tsx
similarity index 66%
rename from frontend/src/main-page/users/UserPositionCard.tsx
rename to frontend/src/main-page/users/user-rows/UserPositionCard.tsx
index 4cc2988..45c5f20 100644
--- a/frontend/src/main-page/users/UserPositionCard.tsx
+++ b/frontend/src/main-page/users/user-rows/UserPositionCard.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from "react";
-import { UserStatus } from "../../../../middle-layer/types/UserStatus";
+import { UserStatus } from "../../../../../middle-layer/types/UserStatus";
 
 interface UserPositionCardProps {
   position: UserStatus;
@@ -14,13 +14,13 @@ const UserPositionCard = ({ position }: UserPositionCardProps) => {
         return "bg-yellow-light border-yellow-dark text-yellow-dark";
       case UserStatus.Inactive:
       default:
-        return "bg-grey-400 border-gray text-gray";
+        return "bg-grey-400 border-grey text-grey-700";
     }
   }, [position]);
 
   return (
-    <div className={`py-1 px-6 rounded-md border ${cardStyles}`}>
-      <p className="text-base">{position}</p>
+    <div className={`inline-flex w-fit flex-none items-center rounded-full px-3 py-1 ${cardStyles}`}>
+      <p className="text-medium">{position}</p>
     </div>
   );
 };
diff --git a/frontend/src/main-page/users/user-rows/UserRow.tsx b/frontend/src/main-page/users/user-rows/UserRow.tsx
new file mode 100644
index 0000000..1cd1d96
--- /dev/null
+++ b/frontend/src/main-page/users/user-rows/UserRow.tsx
@@ -0,0 +1,32 @@
+import { User } from "../../../../../middle-layer/types/User";
+import UserPositionCard from "./UserPositionCard";
+import logo from "../../../images/logo.svg";
+
+interface UserRowProps {
+  user: User;
+  action: React.ReactNode;
+}
+const UserRow = ({ user, action }: UserRowProps) => {
+  return (
+    <div
+      key={user.email}
+      className="grid grid-cols-2 md:grid-cols-[30%_35%_25%_10%] cols gap-2 md:gap-0 text-sm lg:text-base border-b-2 border-grey-150 py-4 px-8 items-center"
+    >
+      <div className="col-span-1 flex items-center font-medium">
+        <img
+          src={user.profilePicUrl || logo}
+          alt="Profile"
+          className="max-w-12 mr-4 rounded-full hidden lg:block"
+        />
+        {user.firstName}&nbsp;{user.lastName}
+      </div>
+      <div className="col-span-1">{user.email}</div>
+      <div className="col-span-1">
+        <UserPositionCard position={user.position} />
+      </div>
+      <div className="col-span-1">{action}</div>
+    </div>
+  );
+};
+
+export default UserRow;
diff --git a/frontend/src/main-page/users/user-rows/UserRowHeader.tsx b/frontend/src/main-page/users/user-rows/UserRowHeader.tsx
new file mode 100644
index 0000000..e7c84b5
--- /dev/null
+++ b/frontend/src/main-page/users/user-rows/UserRowHeader.tsx
@@ -0,0 +1,49 @@
+import { useState } from "react";
+import { User } from "../../../../../middle-layer/types/User";
+import { updateUserSort } from "../../../external/bcanSatchel/actions";
+import UserRowHeaderButton from "./UserRowHeaderButton";
+
+// Did not change this to using the email/first name last name due to user page redesign so someone will be changing all of this anyway
+
+const UserRowHeader = () => {
+  const [labels, setLabels] = useState({
+    header: "lastName",
+    sort: "desc",
+  } as { header: keyof User; sort: "asc" | "desc" | "none" });
+
+  function buttonHandler(header: keyof User) {
+    const isAsc =
+      labels.header == header
+        ? labels.sort == "asc"
+          ? "desc"
+          : labels.sort == "desc"
+            ? "asc"
+            : "none"
+        : "desc";
+    updateUserSort({ header, sort: isAsc });
+    setLabels({ header: header, sort: isAsc });
+  }
+
+  return (
+    <div className="grid grid-cols-2 md:grid-cols-[30%_35%_25%_10%] cols border-b-2 border-grey-150 py-3 px-8 items-center">
+      <UserRowHeaderButton
+        header="Name"
+        sort={labels.header == "firstName" ? labels.sort : "none"}
+        onClick={() => buttonHandler("firstName")}
+      />
+      <UserRowHeaderButton
+        header="Email"
+        sort={labels.header == "email" ? labels.sort : "none"}
+        onClick={() => buttonHandler("email")}
+      />
+      <UserRowHeaderButton
+        header="Position"
+        sort={labels.header == "position" ? labels.sort : "none"}
+        onClick={() => buttonHandler("position")}
+      />
+      <div className="col-span-1 font-medium text-grey-600">{"Action"}</div>
+    </div>
+  );
+};
+
+export default UserRowHeader;
diff --git a/frontend/src/main-page/users/user-rows/UserRowHeaderButton.tsx b/frontend/src/main-page/users/user-rows/UserRowHeaderButton.tsx
new file mode 100644
index 0000000..0fde678
--- /dev/null
+++ b/frontend/src/main-page/users/user-rows/UserRowHeaderButton.tsx
@@ -0,0 +1,41 @@
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faSort,
+  faSortUp,
+  faSortDown,
+} from "@fortawesome/free-solid-svg-icons";
+
+// Did not change this to using the email/first name last name due to user page redesign so someone will be changing all of this anyway
+
+interface UserRowHeaderButtonProps {
+  header: string;
+  sort: "asc" | "desc" | "none";
+  onClick: () => void;
+}
+
+const UserRowHeaderButton = (props: UserRowHeaderButtonProps) => {
+  return (
+    <button
+      className="font-medium flex items-centerpx-0 hover:border-white col-span-1 justify-start hover:text-grey-500 text-grey-600"
+      onClick={props.onClick}
+    >
+      <button />
+      <span className="mr-2">
+        <FontAwesomeIcon
+          icon={
+            props.sort == "asc"
+              ? faSortUp
+              : props.sort == "desc"
+                ? faSortDown
+                : faSort
+          }
+          className="text-lg w-4 h-4"
+        />
+      </span>
+
+      {props.header}
+    </button>
+  );
+};
+
+export default UserRowHeaderButton;
diff --git a/frontend/src/styles/notification.css b/frontend/src/styles/notification.css
index 7f794c1..942690e 100644
--- a/frontend/src/styles/notification.css
+++ b/frontend/src/styles/notification.css
@@ -1,12 +1,9 @@
 .notification-popup {
   position: absolute;
-  right: 7rem;
-  top: 110px;
+  right: 6rem;
+  top: 2.5rem;
   width: min(340px, 70%);
   background-color: white;
-  border: 1px solid black;
-  border-radius: 6px;
-  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
   padding: 0.5rem;
   z-index: 1000;
 }
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 435c676..e326bed 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -90,12 +90,15 @@ export default {
       },
       borderWidth: {
         DEFAULT: "2px",
+        2: "2px",
+        1: "1px",
         0: "0",
       },
       borderRadius: {
         sm: "0.5rem",
         md: "0.75rem",
         DEFAULT: "0.75rem",
+        lg: "1rem",
         "4xl": "2rem",
       },
     },