diff --git a/RAILWAY_DEPLOYMENT.md b/RAILWAY_DEPLOYMENT.md
index 44c9c0f3..74c575c9 100644
--- a/RAILWAY_DEPLOYMENT.md
+++ b/RAILWAY_DEPLOYMENT.md
@@ -150,5 +150,3 @@ Railway respects the ENTRYPOINT, so both environments run `prismaInitAndRun` on
    ```
 4. **Monitor Railway logs** on deployment to verify seeding behavior
 5. **Keep system badges in sync** between `prodData.ts` and production database
-
-TODO: Review & update doc
\ No newline at end of file
diff --git a/backend/gql/resolvers/assignedTaskResolver.ts b/backend/gql/resolvers/assignedTaskResolver.ts
index 242876ca..31d6c7de 100644
--- a/backend/gql/resolvers/assignedTaskResolver.ts
+++ b/backend/gql/resolvers/assignedTaskResolver.ts
@@ -75,8 +75,8 @@ const assignedTaskResolver = {
           end_date: { gte: getStartOfDay(new Date()) },
         },
         orderBy: {
-          start_date: "asc"
-        }
+          start_date: "asc",
+        },
       });
     },
     getAssignedTasksByWeek: async (
@@ -97,8 +97,8 @@ const assignedTaskResolver = {
           end_date: { gte: weekStart },
         },
         orderBy: {
-          start_date: "asc"
-        }
+          start_date: "asc",
+        },
       });
     },
     hasCompletedAllRequiredTasks: async (
diff --git a/backend/gql/resolvers/badgeLevelProgressResolver.ts b/backend/gql/resolvers/badgeLevelProgressResolver.ts
index 9186a9d7..98bb9a49 100644
--- a/backend/gql/resolvers/badgeLevelProgressResolver.ts
+++ b/backend/gql/resolvers/badgeLevelProgressResolver.ts
@@ -20,10 +20,7 @@ const badgeLevelProgressResolver = {
             },
           },
         },
-        orderBy: [
-          { name: "asc" },
-          { badge_level: { value: "asc" } },
-        ],
+        orderBy: [{ name: "asc" }, { badge_level: { value: "asc" } }],
       });
     },
   },
diff --git a/backend/gql/resolvers/participantResolver.ts b/backend/gql/resolvers/participantResolver.ts
index 35cd44db..d6e20a6b 100644
--- a/backend/gql/resolvers/participantResolver.ts
+++ b/backend/gql/resolvers/participantResolver.ts
@@ -119,22 +119,8 @@ const participantResolver = {
       const isEmpty = Object.keys(updates).length === 0;
       if (isEmpty) throw new Error("no updates received");
 
-      if (room !== undefined) {
-        if (room < 1 || room > 10) {
-          throw new Error("room must be between 1 and 10");
-        }
-
-        const occupiedRoom = await db.participant.findFirst({
-          where: {
-            room,
-            pid: { not: pid },
-            OR: [
-              { departure: null },
-              { departure: { gt: getEndOfDay(new Date()) } },
-            ],
-          },
-        });
-        if (occupiedRoom) throw new Error("room is occupied");
+      if (room !== undefined && (room < 1 || room > 10)) {
+        throw new Error("room must be between 1 and 10");
       }
 
       return db.participant.update({
diff --git a/backend/gql/resolvers/transactionResolver.ts b/backend/gql/resolvers/transactionResolver.ts
index b7ddfa14..b0b4bc94 100644
--- a/backend/gql/resolvers/transactionResolver.ts
+++ b/backend/gql/resolvers/transactionResolver.ts
@@ -1,6 +1,5 @@
 import { Transaction, TransactionType, DayOfWeek } from "@prisma/client";
 import db from "../../prisma";
-import { orderedDays } from "../../constants/days";
 import { getEndOfWeek, getStartOfWeek, whichDay } from "../../utils/dateUtils";
 
 type GetWeeklyEarningsResponse = Record<DayOfWeek, number>;
diff --git a/backend/prisma/seed/seed.ts b/backend/prisma/seed/seed.ts
index 0c129357..13a28d37 100644
--- a/backend/prisma/seed/seed.ts
+++ b/backend/prisma/seed/seed.ts
@@ -1,5 +1,5 @@
 import { createSeedClient } from "@snaplet/seed";
-import { Priority, TaskType } from "@prisma/client";
+import { TaskType } from "@prisma/client";
 import { badgeLevels, systemBadges, tasks } from "./initialData";
 import db from "../index";
 import * as random from "./random";
diff --git a/backend/utils/dateUtils.ts b/backend/utils/dateUtils.ts
index a3378623..8e0d5278 100644
--- a/backend/utils/dateUtils.ts
+++ b/backend/utils/dateUtils.ts
@@ -7,8 +7,8 @@ import {
   startOfWeek,
 } from "date-fns";
 import { toZonedTime, fromZonedTime } from "date-fns-tz";
-import { orderedDays } from "../constants/days";
 import { DayOfWeek } from "@prisma/client";
+import { orderedDays } from "../constants/days";
 
 const timeZone = "America/Toronto";
 
diff --git a/backend/utils/taskUtils.ts b/backend/utils/taskUtils.ts
index 9f66b045..07cfbb0e 100644
--- a/backend/utils/taskUtils.ts
+++ b/backend/utils/taskUtils.ts
@@ -77,14 +77,20 @@ function buildStartAndEndDates(task: Task): StartAndEndDates[] {
   return startAndEndDates;
 }
 
-export async function assignTasksToParticipants(tasks: Task[], pids?: number[]) {
+export async function assignTasksToParticipants(
+  tasks: Task[],
+  pids?: number[]
+) {
   let participantPids: number[];
   if (pids) {
     participantPids = pids;
   } else {
     const participants = await db.participant.findMany({
       where: {
-        OR: [{ departure: null }, { departure: { gt: getEndOfDay(new Date()) } }],
+        OR: [
+          { departure: null },
+          { departure: { gt: getEndOfDay(new Date()) } },
+        ],
       },
       select: { pid: true },
     });
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4365a227..fd20c643 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -35,7 +35,7 @@ import NotFoundScreen from "./ui/screens/NotFoundScreen";
 import UI from "./ui/UI";
 import colors from "./theme/colors";
 import { Text, textStyles } from "./theme/typography";
-import { Progress } from "./theme/progress";
+import { Progress, Checkbox, Alert } from "./theme/components";
 
 function initApolloClient() {
   const backendUrl =
@@ -80,9 +80,11 @@ const App = (): React.ReactElement => {
   const theme = extendTheme({
     colors,
     textStyles,
-    components: { 
+    components: {
       Text,
       Progress,
+      Checkbox,
+      Alert,
     },
   });
   const apolloClient = initApolloClient();
diff --git a/frontend/src/admin/AdminContext.tsx b/frontend/src/admin/AdminContext.tsx
index 00017c6a..9b3a8cac 100644
--- a/frontend/src/admin/AdminContext.tsx
+++ b/frontend/src/admin/AdminContext.tsx
@@ -20,7 +20,9 @@ interface AdminProviderProps {
 
 export const AdminProvider: React.FC<AdminProviderProps> = ({ children }) => {
   const [role, setRole] = useState<string>("");
-  const [roomToParticipant, setRoomToParticipant] = useState<Record<number, number>>({});
+  const [roomToParticipant, setRoomToParticipant] = useState<
+    Record<number, number>
+  >({});
 
   return (
     <AdminContext.Provider
diff --git a/frontend/src/admin/AdminMenu.tsx b/frontend/src/admin/AdminMenu.tsx
index 746ceb5f..2c175c89 100644
--- a/frontend/src/admin/AdminMenu.tsx
+++ b/frontend/src/admin/AdminMenu.tsx
@@ -1,9 +1,11 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Tabs, TabList, Tab, Box, Flex, Text } from "@chakra-ui/react";
 import * as ROUTES from "../constants/routes";
 import PopupContainer from "../ui/containers/PopupContainer";
 import BlackOutlineButton from "../ui/buttons/BlackOutlineButton";
+import { AdminContext } from "./AdminContext";
+import { ADMIN } from "../constants/roles";
 
 type SideBarTabProps = {
   label: string;
@@ -21,12 +23,12 @@ function SideBarTab({ label, handleClick }: SideBarTabProps) {
       fontWeight={500}
       fontSize="16px"
       fontFamily="Nunito"
-      color="#000000"
+      color="text.dark"
       onClick={handleClick}
       _selected={{
         fontWeight: 700,
-        color: "neutral.0",
-        bg: "secondary.700",
+        color: "white",
+        bg: "brand.secondaryDark",
       }}
     >
       {label}
@@ -40,6 +42,7 @@ type SignOutPopUpProps = {
 
 function SignOutPopUp({ cancel }: SignOutPopUpProps) {
   const navigate = useNavigate();
+
   const handleSignOut = () => {
     localStorage.removeItem("token");
     return navigate(ROUTES.ADMIN_LOGIN_PAGE);
@@ -52,7 +55,7 @@ function SignOutPopUp({ cancel }: SignOutPopUpProps) {
       submit_action={handleSignOut}
       cancel_action={cancel}
     >
-      <Text textStyle="web.b2" color="text.light.secondary">
+      <Text textStyle="b1" color="text.grey">
         Are you sure you want to sign out?
       </Text>
     </PopupContainer>
@@ -62,6 +65,7 @@ function SignOutPopUp({ cancel }: SignOutPopUpProps) {
 export default function AdminMenu() {
   const navigate = useNavigate();
   const [signOut, setSignOut] = useState(false);
+  const { role } = useContext(AdminContext);
 
   const pages = [
     { label: "Home", route: ROUTES.ADMIN_HOME_PAGE },
@@ -70,7 +74,10 @@ export default function AdminMenu() {
     { label: "Participants", route: ROUTES.ADMIN_PARTICIPANTS_PAGE },
     { label: "Task Library", route: ROUTES.ADMIN_TASKS_PAGE },
     { label: "Badge Library", route: ROUTES.ADMIN_BADGES_PAGE },
-    { label: "Reports", route: ROUTES.ADMIN_REPORTS_PAGE },
+
+    ...(role === ADMIN
+      ? [{ label: "Reports", route: ROUTES.ADMIN_REPORTS_PAGE }]
+      : []),
   ];
 
   const currentPage = pages.findIndex(
@@ -85,8 +92,8 @@ export default function AdminMenu() {
       top={0}
       left={0}
       borderRight="1px"
-      borderRightColor="neutral.300"
-      bg="neutral.0"
+      borderRightColor="background.border"
+      bg="background.admin"
       padding="25px 20px"
       display="flex"
       flexDirection="column"
@@ -118,7 +125,7 @@ export default function AdminMenu() {
         label="Sign Out"
         action={() => setSignOut(true)}
         is_active={signOut}
-        text_color="danger.900"
+        text_color="indicate.brightRed"
       />
 
       {signOut && <SignOutPopUp cancel={() => setSignOut(false)} />}
diff --git a/frontend/src/admin/AdminRoute.tsx b/frontend/src/admin/AdminRoute.tsx
index f1d7f28b..098b2ef9 100644
--- a/frontend/src/admin/AdminRoute.tsx
+++ b/frontend/src/admin/AdminRoute.tsx
@@ -11,6 +11,7 @@ import { AdminContext } from "./AdminContext";
 import ErrorScreen from "../ui/screens/ErrorScreen";
 import AdminMenu from "./AdminMenu";
 import { Participant } from "../types/models";
+import useNotification from "../hooks/useNotification";
 
 type AdminRouteProps = {
   children: React.ReactElement;
@@ -64,7 +65,7 @@ export default function AdminRoute({ children }: AdminRouteProps) {
           adminContext.setRole(role);
         }
         setPopulatingContext(false);
-      }
+      };
       populateContext();
     }
   }, [authorizing, authorized]);
@@ -103,9 +104,9 @@ export default function AdminRoute({ children }: AdminRouteProps) {
             left="0px"
             width="100%"
             height="55px"
-            bg="primary.100"
+            bg="brand.primaryLight"
             borderBottom="1px solid"
-            borderColor="neutral.300"
+            borderColor="background.border"
             zIndex={5}
           />
           <Flex
diff --git a/frontend/src/admin/pages/announcements/Main.tsx b/frontend/src/admin/pages/announcements/Main.tsx
index 2433e270..fe02f7cf 100644
--- a/frontend/src/admin/pages/announcements/Main.tsx
+++ b/frontend/src/admin/pages/announcements/Main.tsx
@@ -12,6 +12,7 @@ import ErrorScreen from "../../../ui/screens/ErrorScreen";
 import UnderlineButton from "../../../ui/buttons/UnderlineButton";
 import { getRoomString } from "../../../helpers/stringUtils";
 import { formatDateV3 } from "../../../helpers/formatDateTime";
+import { Plus } from "../../../ui/icons/ActionIcons";
 
 export default function AdminAnnouncementsPage() {
   const [create, setCreate] = useState(false);
@@ -74,23 +75,24 @@ export default function AdminAnnouncementsPage() {
     return <ErrorScreen message={getAllAnnouncementsError.message} />;
 
   return (
-    <Flex width="100%" flexDir="column" gap="15px">
+    <Flex width="100%" flexDir="column" height="fit-content" gap="15px">
       <Flex
         width="100%"
         height="fit-content"
         alignItems="center"
         justifyContent="space-between"
       >
-        <Flex alignItems="center" gap="15px">
-          <Text textStyle="web.h2" color="primary.700" pl="3px">
+        <Flex alignItems="baseline" gap="15px">
+          <Text textStyle="h2" color="brand.primaryDark" pl="3px">
             Announcements
           </Text>
-          <Text textStyle="web.b3" color="text.light.secondary" marginTop="7px">
+          <Text textStyle="b2" color="text.light">
             Expires in 7 days
           </Text>
         </Flex>
 
         <OrangeButton
+          icon={<Plus />}
           label="Create Announcement"
           action={() => setCreate(true)}
           is_active={create}
@@ -98,10 +100,10 @@ export default function AdminAnnouncementsPage() {
       </Flex>
 
       <Flex alignItems="center" gap="15px">
-        <Text textStyle="web.s1" color="#000000" fontWeight={600}>
+        <Text textStyle="s1" color="text.medium" fontWeight={600}>
           Filters:
         </Text>
-        <Flex alignItems="center" gap="5px">
+        <Flex alignItems="center" gap="4px">
           {selectedButtons.map((isSelected: boolean, index: number) => (
             <GreenOutlineButton
               key={index}
@@ -118,11 +120,7 @@ export default function AdminAnnouncementsPage() {
         />
       </Flex>
 
-      <Text textStyle="web.b3" color="text.light.secondary">
-        Most Recent
-      </Text>
-
-      <VStack spacing={4} align="stretch" paddingBottom="20px">
+      <Flex flexDir="column" gap="8px" mt="6px">
         {getAllAnnouncementsData?.getAnnouncementsSentToParticipants.map(
           (announcement: any) => (
             <AnnouncementCard
@@ -136,7 +134,7 @@ export default function AdminAnnouncementsPage() {
             />
           )
         )}
-      </VStack>
+      </Flex>
 
       {create && (
         <CreateAnnouncementModal
diff --git a/frontend/src/admin/pages/announcements/components/AnnouncementCard.tsx b/frontend/src/admin/pages/announcements/components/AnnouncementCard.tsx
index 17bd7185..ca6d8af0 100644
--- a/frontend/src/admin/pages/announcements/components/AnnouncementCard.tsx
+++ b/frontend/src/admin/pages/announcements/components/AnnouncementCard.tsx
@@ -7,6 +7,7 @@ import { Priority } from "../../../../types/enums";
 import WidgetContainer from "../../../../ui/containers/WidgetContainer";
 import { ExclamationMark } from "../../../../ui/icons/NotificationIcons";
 import { Marker, Trash } from "../../../../ui/icons/ActionIcons";
+import useNotification from "../../../../hooks/useNotification";
 
 type AnnouncementCardProps = {
   announcement_id: any;
@@ -27,7 +28,7 @@ export default function AnnouncementCard({
 }: AnnouncementCardProps) {
   const [edit, setEdit] = useState(false);
   const [error, setError] = useState<string>("");
-
+  const { sendNotification } = useNotification();
   const [deleteAnnouncement] = useMutation(DELETE_ANNOUNCEMENT);
   const handleDeleteAnnouncement = async (aid: number) => {
     setError("");
@@ -37,6 +38,7 @@ export default function AnnouncementCard({
       });
 
       refetch();
+      sendNotification("Announcement deleted successfully");
     } catch (err: any) {
       setError(err.message);
     }
@@ -46,16 +48,14 @@ export default function AnnouncementCard({
     <WidgetContainer
       width="100%"
       height="100%"
-      paddingX="20px"
+      paddingX="18px"
       paddingY="12px"
-      bg_color="neutral.100"
+      bg_color="background.highlight"
     >
-      <Flex direction="row" justify="space-between" align="center" gap="10px">
+      <Flex direction="row" justify="space-between" align="center" gap="20px">
         <Flex direction="column" flex="1">
           <Flex align="center" gap={1.5}>
-            <Text textStyle="web.c1" fontWeight={700}>
-              {room}
-            </Text>
+            <Text textStyle="s1">{room}</Text>
             <Flex>
               {(priority === Priority.HIGH ||
                 priority === Priority.CRITICAL) && <ExclamationMark />}
@@ -63,22 +63,16 @@ export default function AnnouncementCard({
             </Flex>
           </Flex>
 
-          <Text
-            textStyle="web.s1"
-            fontWeight={600}
-            mt={1}
-            whiteSpace="pre-line"
-            color="#3f3f3f"
-          >
+          <Text textStyle="b1" mt={1} whiteSpace="pre-line" color="text.dark">
             {message}
           </Text>
 
-          <Text textStyle="web.b3" color="text.light.secondary" mt={2}>
+          <Text textStyle="b2" color="text.medium" mt={1}>
             {timestamp}
           </Text>
         </Flex>
 
-        <Flex align="center" gap="15px" ml="10px">
+        <Flex align="center" gap="15px">
           <Flex onClick={() => setEdit(true)} cursor="pointer">
             <Marker size={20} />
           </Flex>
diff --git a/frontend/src/admin/pages/announcements/components/CreateAnnouncementModal.tsx b/frontend/src/admin/pages/announcements/components/CreateAnnouncementModal.tsx
index 5f14c2e6..f3d69a3d 100644
--- a/frontend/src/admin/pages/announcements/components/CreateAnnouncementModal.tsx
+++ b/frontend/src/admin/pages/announcements/components/CreateAnnouncementModal.tsx
@@ -10,6 +10,7 @@ import TextAreaInput from "../../../../ui/inputs/TextAreaInput";
 import { AdminContext } from "../../../AdminContext";
 import { Priority } from "../../../../types/enums";
 import TextInput from "../../../../ui/inputs/TextInput";
+import useNotification from "../../../../hooks/useNotification";
 
 const CreateAnnouncementModal = ({
   onClose,
@@ -24,12 +25,19 @@ const CreateAnnouncementModal = ({
   const [message, setMessage] = useState<string>("");
   const [error, setError] = useState<string>("");
 
+  const { sendNotification } = useNotification();
+
   const [createAnnouncement, { loading: createAnnouncementLoading }] =
     useMutation(CREATE_ANNOUNCEMENT);
   const { roomToParticipant } = useContext(AdminContext);
 
   const handleSend = async () => {
-    if (selectedRooms.length === 0 || priority === null || message === "" || topic === "") {
+    if (
+      selectedRooms.length === 0 ||
+      priority === null ||
+      message === "" ||
+      topic === ""
+    ) {
       setError("Missing fields.");
       return;
     }
@@ -59,6 +67,7 @@ const CreateAnnouncementModal = ({
       });
 
       refetch();
+      sendNotification("Announcement created successfully");
       onClose();
     } catch (err: any) {
       setError("Unable to create announcement");
@@ -93,7 +102,7 @@ const CreateAnnouncementModal = ({
       error_message={error}
     >
       <Flex gap="5px" wrap="wrap" alignItems="center" maxWidth="400px">
-        <Text textStyle="web.s1" color="text.light.secondary" mr="5px">
+        <Text textStyle="s1" color="text.medium" mr="5px">
           Send To:
         </Text>
         {[[0], ...ROOM_NUMBERS].flat().map((room: number) => {
diff --git a/frontend/src/admin/pages/announcements/components/EditAnnouncementModal.tsx b/frontend/src/admin/pages/announcements/components/EditAnnouncementModal.tsx
index c2d96d7d..88e8c4f8 100644
--- a/frontend/src/admin/pages/announcements/components/EditAnnouncementModal.tsx
+++ b/frontend/src/admin/pages/announcements/components/EditAnnouncementModal.tsx
@@ -8,6 +8,7 @@ import TextAreaInput from "../../../../ui/inputs/TextAreaInput";
 import { Priority } from "../../../../types/enums";
 import FixedInput from "../../../../ui/inputs/FixedInput";
 import { toTitleCase } from "../../../../helpers/stringUtils";
+import useNotification from "../../../../hooks/useNotification";
 
 type EditAnnouncementModalProps = {
   setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
@@ -30,7 +31,7 @@ const EditAnnouncementModal = ({
   const [message, setMessage] = useState<string>(initialMessage);
 
   const [error, setError] = useState<string>("");
-
+  const { sendNotification } = useNotification();
   const [editAnnouncement, { loading: editAnnouncementLoading }] =
     useMutation(UPDATE_ANNOUNCEMENT);
 
@@ -52,6 +53,7 @@ const EditAnnouncementModal = ({
 
       refetch();
       setIsOpen(false);
+      sendNotification("Announcement updated successfully");
     } catch (err: any) {
       setError("Unable to update announcement");
     }
diff --git a/frontend/src/admin/pages/badges/Main.tsx b/frontend/src/admin/pages/badges/Main.tsx
index 5647d1d7..07b6f2c3 100644
--- a/frontend/src/admin/pages/badges/Main.tsx
+++ b/frontend/src/admin/pages/badges/Main.tsx
@@ -1,6 +1,6 @@
 import { Flex, Text } from "@chakra-ui/react";
 import { useQuery } from "@apollo/client";
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import CreateCustomBadgeModal from "./components/CreateCustomBadgeModal";
 import CustomBadgeTable from "./components/CustomBadgeTable";
 import SystemBadgeTable from "./components/SystemBadgeTable";
@@ -9,9 +9,13 @@ import { GET_SYSTEM_BADGES } from "../../../gql/systemBadgeRequests";
 import AssignCustomBadgeModal from "./components/AssignCustomBadgeModal";
 import GreenOutlineButton from "../../../ui/buttons/GreenOutlineButton";
 import OrangeButton from "../../../ui/buttons/OrangeButton";
+import { Plus } from "../../../ui/icons/ActionIcons";
+import { AdminContext } from "../../AdminContext";
+import { ADMIN } from "../../../constants/roles";
 
-// TODO: Relief staff cannot change the badges
 export default function AdminBadgesPage() {
+  const { role } = useContext(AdminContext);
+
   const [create, setCreate] = useState(false);
   const [assign, setAssign] = useState(false);
 
@@ -37,11 +41,11 @@ export default function AdminBadgesPage() {
         alignItems="center"
         justifyContent="space-between"
       >
-        <Flex alignItems="center" gap="15px" pl="5px">
-          <Text textStyle="web.h2" color="primary.700">
+        <Flex alignItems="baseline" gap="15px" pl="5px">
+          <Text textStyle="h2" color="brand.primaryDark">
             System Badges
           </Text>
-          <Text textStyle="web.b3" color="text.light.secondary" marginTop="7px">
+          <Text textStyle="b2" color="text.light">
             System badges will be granted to participants automatically.
           </Text>
         </Flex>
@@ -59,26 +63,29 @@ export default function AdminBadgesPage() {
         justifyContent="space-between"
         mt="10px"
       >
-        <Flex alignItems="center" gap="15px">
-          <Text textStyle="web.h2" color="primary.700" pl="5px">
+        <Flex alignItems="baseline" gap="15px">
+          <Text textStyle="h2" color="brand.primaryDark" pl="5px">
             Custom Badges
           </Text>
-          <Text textStyle="web.b3" color="text.light.secondary" marginTop="7px">
+          <Text textStyle="b2" color="text.light">
             You can create new and reward participants custom badges.
           </Text>
         </Flex>
-        <Flex alignItems="center" gap="15px">
-          <GreenOutlineButton
-            label="Assign Custom Badge"
-            action={() => setAssign(true)}
-            is_active={assign}
-          />
-          <OrangeButton
-            label="Create Badge"
-            action={() => setCreate(true)}
-            is_active={create}
-          />
-        </Flex>
+        {role === ADMIN && (
+          <Flex alignItems="center" gap="15px">
+            <GreenOutlineButton
+              label="Assign Custom Badge"
+              action={() => setAssign(true)}
+              is_active={assign}
+            />
+            <OrangeButton
+              label="Create Badge"
+              action={() => setCreate(true)}
+              is_active={create}
+              icon={<Plus />}
+            />
+          </Flex>
+        )}
       </Flex>
       <CustomBadgeTable
         loading={customBadgesLoading}
diff --git a/frontend/src/admin/pages/badges/components/AssignCustomBadgeModal.tsx b/frontend/src/admin/pages/badges/components/AssignCustomBadgeModal.tsx
index 6defe3d1..001a64bf 100644
--- a/frontend/src/admin/pages/badges/components/AssignCustomBadgeModal.tsx
+++ b/frontend/src/admin/pages/badges/components/AssignCustomBadgeModal.tsx
@@ -10,6 +10,7 @@ import { AdminContext } from "../../../AdminContext";
 import { toTitleCase } from "../../../../helpers/stringUtils";
 import { CustomBadge } from "../../../../types/models";
 import DropdownInput from "../../../../ui/inputs/DropdownInput";
+import useNotification from "../../../../hooks/useNotification";
 
 interface AssignCustomBadgeModalProps {
   onClose: () => void;
@@ -21,7 +22,7 @@ const AssignCustomBadgeModal: React.FC<AssignCustomBadgeModalProps> = ({
   customBadges,
 }) => {
   const { roomToParticipant } = useContext(AdminContext);
-
+  const { sendNotification } = useNotification();
   const [selectedBadgeId, setSelectedBadgeId] = useState<string>("");
   const [badgeValue, setBadgeValue] = useState<number | null>(null);
   const [selectedParticipants, setSelectedParticipants] = useState<number[]>(
@@ -81,6 +82,7 @@ const AssignCustomBadgeModal: React.FC<AssignCustomBadgeModalProps> = ({
           )
         );
         onClose();
+        sendNotification("Custom badge assigned successfully");
       } catch (err: any) {
         setError(err.message);
       }
@@ -126,11 +128,9 @@ const AssignCustomBadgeModal: React.FC<AssignCustomBadgeModalProps> = ({
         size="small"
       />
 
-      <Flex w="100%" h="1px" bg="neutral.300" mt="8px" />
+      <Flex w="100%" h="1px" bg="background.border" mt="6px" />
 
-      <Text textStyle="web.s1" color="text.light.secondary">
-        Choose Room(s)
-      </Text>
+      <Text textStyle="s2">Choose Room(s)</Text>
       <Grid templateColumns="repeat(5, 1fr)" gap="5px">
         {ROOM_NUMBERS.map((num: number) => (
           <GreenOutlineButton
diff --git a/frontend/src/admin/pages/badges/components/CreateCustomBadgeModal.tsx b/frontend/src/admin/pages/badges/components/CreateCustomBadgeModal.tsx
index 9aab6626..ebf11b59 100644
--- a/frontend/src/admin/pages/badges/components/CreateCustomBadgeModal.tsx
+++ b/frontend/src/admin/pages/badges/components/CreateCustomBadgeModal.tsx
@@ -6,6 +6,7 @@ import PopupContainer from "../../../../ui/containers/PopupContainer";
 import TextInput from "../../../../ui/inputs/TextInput";
 import { Icon } from "../../../../types/enums";
 import { ICON_MAP } from "../../../../constants/icons";
+import useNotification from "../../../../hooks/useNotification";
 
 interface CreateCustomBadgeModalProps {
   onClose: () => void;
@@ -20,7 +21,7 @@ const CreateCustomBadgeModal = ({
   const [criteria, setCriteria] = useState("");
   const [selectedIcon, setSelectedIcon] = useState<Icon | null>(null);
   const [error, setError] = useState("");
-
+  const { sendNotification } = useNotification();
   const availableIcons = [
     Icon.PLANT,
     Icon.GROUP,
@@ -48,6 +49,7 @@ const CreateCustomBadgeModal = ({
         });
         onClose();
         await refetch();
+        sendNotification("Custom badge created successfully");
       } catch (err: any) {
         setError(err.message);
       }
@@ -79,7 +81,7 @@ const CreateCustomBadgeModal = ({
         size="large"
       />
 
-      <Text textStyle="web.s1" color="text.light.secondary">
+      <Text textStyle="s2" color="text.dark">
         Choose Badge Icon
       </Text>
       <Grid templateColumns="repeat(6, 1fr)" gap={3}>
@@ -95,14 +97,19 @@ const CreateCustomBadgeModal = ({
               py="12px"
               px="8px"
               border="1px solid"
-              borderColor={isSelected ? "primary.700" : "neutral.300"}
+              borderColor={
+                isSelected ? "brand.primaryDark" : "background.border"
+              }
               borderRadius="8px"
               cursor="pointer"
               onClick={() => setSelectedIcon(icon)}
+              _hover={{
+                bg: "background.highlight",
+              }}
             >
               <IconComponent
                 size={24}
-                color={isSelected ? "primary.700" : "text.light.secondary"}
+                color={isSelected ? "brand.primaryDark" : "text.medium"}
               />
             </Flex>
           );
diff --git a/frontend/src/admin/pages/badges/components/CustomBadgeTable.tsx b/frontend/src/admin/pages/badges/components/CustomBadgeTable.tsx
index d2cf2b4f..016bf5fa 100644
--- a/frontend/src/admin/pages/badges/components/CustomBadgeTable.tsx
+++ b/frontend/src/admin/pages/badges/components/CustomBadgeTable.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useMutation } from "@apollo/client";
 import { DELETE_CUSTOM_BADGE } from "../../../../gql/customBadgeRequests";
 import EditCustomBadgeModal from "./EditCustomBadgeModal";
@@ -6,6 +6,9 @@ import DataTable, { Column, Row } from "../../../../ui/misc/DataTable";
 import { CustomBadge } from "../../../../types/models";
 import { Marker, Trash } from "../../../../ui/icons/ActionIcons";
 import { ICON_MAP } from "../../../../constants/icons";
+import { AdminContext } from "../../../AdminContext";
+import { ADMIN } from "../../../../constants/roles";
+import useNotification from "../../../../hooks/useNotification";
 
 type CustomBadgeTableProps = {
   loading: boolean;
@@ -20,6 +23,8 @@ const CustomBadgeTable = ({
   badges,
   refetch,
 }: CustomBadgeTableProps) => {
+  const { role } = useContext(AdminContext);
+  const { sendNotification } = useNotification();
   const [edit, setEdit] = useState(false);
   const [selected, setSelected] = useState<CustomBadge | null>(null);
   const [deleteError, setDeleteError] = useState<string>("");
@@ -36,6 +41,7 @@ const CustomBadgeTable = ({
         },
       });
       await refetch();
+      sendNotification("Custom badge deleted successfully");
     } catch (err: any) {
       setDeleteError(err.message);
     }
@@ -45,8 +51,13 @@ const CustomBadgeTable = ({
     { header: "Icon", width: "5%", center: true },
     { header: "Badge Name", width: "25%" },
     { header: "Description", width: "68%" },
-    { header: "", width: "1%" },
-    { header: "", width: "1%" },
+
+    ...(role === ADMIN
+      ? [
+          { header: "", width: "1%" },
+          { header: "", width: "1%" },
+        ]
+      : []),
   ];
 
   const rows: Row[][] = badges.length
@@ -56,17 +67,22 @@ const CustomBadgeTable = ({
           { element: <IconComponent size={20} /> },
           { element: badge.name },
           { element: badge.description },
-          {
-            element: <Marker size={20} />,
-            action: () => {
-              setSelected(badge);
-              setEdit(true);
-            },
-          },
-          {
-            element: <Trash size={20} />,
-            action: async () => handleDelete(badge.cid),
-          },
+
+          ...(role === ADMIN
+            ? [
+                {
+                  element: <Marker size={20} />,
+                  action: () => {
+                    setSelected(badge);
+                    setEdit(true);
+                  },
+                },
+                {
+                  element: <Trash size={20} />,
+                  action: async () => handleDelete(badge.cid),
+                },
+              ]
+            : []),
         ];
       })
     : [];
diff --git a/frontend/src/admin/pages/badges/components/EditCustomBadgeModal.tsx b/frontend/src/admin/pages/badges/components/EditCustomBadgeModal.tsx
index f1966c76..2e1ca4df 100644
--- a/frontend/src/admin/pages/badges/components/EditCustomBadgeModal.tsx
+++ b/frontend/src/admin/pages/badges/components/EditCustomBadgeModal.tsx
@@ -3,6 +3,7 @@ import { useMutation } from "@apollo/client";
 import { UPDATE_CUSTOM_BADGE } from "../../../../gql/customBadgeRequests";
 import PopupContainer from "../../../../ui/containers/PopupContainer";
 import TextInput from "../../../../ui/inputs/TextInput";
+import useNotification from "../../../../hooks/useNotification";
 
 interface EditCustomBadgeModalProps {
   onClose: () => void;
@@ -18,7 +19,7 @@ const EditCustomBadgeModal: React.FC<EditCustomBadgeModalProps> = ({
   const [badgeName, setBadgeName] = useState(selected.name);
   const [badgeCriteria, setBadgeCriteria] = useState(selected.description);
   const [error, setError] = useState("");
-
+  const { sendNotification } = useNotification();
   const [updateCustomBadge, { loading: updateCustomBadgeLoading }] =
     useMutation(UPDATE_CUSTOM_BADGE);
 
@@ -40,6 +41,7 @@ const EditCustomBadgeModal: React.FC<EditCustomBadgeModalProps> = ({
       });
       await refetch();
       onClose();
+      sendNotification("Custom badge updated successfully");
     } catch (err: any) {
       setError(err.message);
     }
diff --git a/frontend/src/admin/pages/badges/components/EditSystemBadgeModal.tsx b/frontend/src/admin/pages/badges/components/EditSystemBadgeModal.tsx
index e459a557..087fd960 100644
--- a/frontend/src/admin/pages/badges/components/EditSystemBadgeModal.tsx
+++ b/frontend/src/admin/pages/badges/components/EditSystemBadgeModal.tsx
@@ -11,6 +11,7 @@ import FixedInput from "../../../../ui/inputs/FixedInput";
 import { LEVEL_ORDER } from "../../../../constants/levels";
 import { toTitleCase } from "../../../../helpers/stringUtils";
 import NumberInput from "../../../../ui/inputs/NumberInput";
+import useNotification from "../../../../hooks/useNotification";
 
 interface EditSystemBadgeModalProps {
   isOpen: boolean;
@@ -62,7 +63,7 @@ const EditSystemBadgeModal = ({
     )
   );
   const [error, setError] = useState("");
-
+  const { sendNotification } = useNotification();
   const [updateBadgeLevel, { loading: updateBadgeLevelLoading }] =
     useMutation(UPDATE_BADGE_LEVEL);
   const [updateSystemBadge, { loading: updateSystemBadgeLoading }] =
@@ -133,6 +134,7 @@ const EditSystemBadgeModal = ({
       await Promise.all(requests);
       await refetch();
       onClose();
+      sendNotification("System badge updated successfully");
     } catch (err: any) {
       setError("Failed to edit system badge");
     }
@@ -162,9 +164,7 @@ const EditSystemBadgeModal = ({
 
       <Flex justifyContent="space-between" alignItems="center" w="100%">
         <Flex flexDir="column" gap="5px">
-          <Text textStyle="web.s1" color="text.light.secondary">
-            Set Badge Levels
-          </Text>
+          <Text textStyle="s2">Set Badge Levels</Text>
           {LEVEL_ORDER.map((level: Level) => {
             if (!badgeLevels[level]) return null;
             const data = badgeLevels[level];
@@ -175,7 +175,7 @@ const EditSystemBadgeModal = ({
                 justifyContent="center"
                 width="90%"
               >
-                <Text textStyle="web.b3" width="100px">
+                <Text textStyle="b2" width="100px">
                   {toTitleCase(level)}:
                 </Text>
                 <NumberInput
@@ -191,17 +191,13 @@ const EditSystemBadgeModal = ({
                   }
                   size="small"
                 />
-                <Text textStyle="web.b3">times</Text>
+                <Text textStyle="b2">times</Text>
               </Flex>
             );
           })}
         </Flex>
         <Flex flexDir="column" gap="5px">
-          <Text
-            textStyle="web.s1"
-            color="text.light.secondary"
-            textAlign="right"
-          >
+          <Text textStyle="s2" textAlign="right">
             Marillac Bucks
           </Text>
           {LEVEL_ORDER.map((level: Level) => {
diff --git a/frontend/src/admin/pages/badges/components/SystemBadgeTable.tsx b/frontend/src/admin/pages/badges/components/SystemBadgeTable.tsx
index 5e542baf..4d39a169 100644
--- a/frontend/src/admin/pages/badges/components/SystemBadgeTable.tsx
+++ b/frontend/src/admin/pages/badges/components/SystemBadgeTable.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { useMutation } from "@apollo/client";
 import { UPDATE_SYSTEM_BADGE } from "../../../../gql/systemBadgeRequests";
 import EditSystemBadgeModal from "./EditSystemBadgeModal";
@@ -8,6 +8,9 @@ import { ICON_MAP } from "../../../../constants/icons";
 import { Marker } from "../../../../ui/icons/ActionIcons";
 import { LEVEL_ABBREVIATION, LEVEL_ORDER } from "../../../../constants/levels";
 import ToggleButton from "../../../../ui/buttons/ToggleButton";
+import { AdminContext } from "../../../AdminContext";
+import { ADMIN } from "../../../../constants/roles";
+import useNotification from "../../../../hooks/useNotification";
 
 type SystemBadgeTableProps = {
   loading: boolean;
@@ -22,6 +25,8 @@ const SystemBadgeTable = ({
   badges,
   refetch,
 }: SystemBadgeTableProps) => {
+  const { role } = useContext(AdminContext);
+  const { sendNotification } = useNotification();
   const [edit, setEdit] = useState(false);
   const [selected, setSelected] = useState<SystemBadge | null>(null);
   const [updateError, setUpdateError] = useState<string>("");
@@ -37,6 +42,7 @@ const SystemBadgeTable = ({
         },
       });
       await refetch();
+      sendNotification("System badge status updated successfully");
     } catch (err: any) {
       setUpdateError(err.message);
     }
@@ -46,8 +52,13 @@ const SystemBadgeTable = ({
     { header: "Badge Name", width: "25%" },
     { header: "Description", width: "50%" },
     { header: "Offered Levels", width: "10%" },
-    { header: "Status", width: "5%", center: true },
-    { header: "", width: "5%" },
+
+    ...(role === ADMIN
+      ? [
+          { header: "Status", width: "5%", center: true },
+          { header: "", width: "5%" },
+        ]
+      : []),
   ];
 
   const rows: Row[][] = badges.length
@@ -63,21 +74,29 @@ const SystemBadgeTable = ({
           { element: badge.name },
           { element: badge.description },
           { element: offeredLevels },
-          {
-            element: (
-              <ToggleButton active={badge.is_active} setActive={() => {}} />
-            ),
-            action: async () => {
-              changeActivityStatus(badge.name, !badge.is_active);
-            },
-          },
-          {
-            element: <Marker size={20} />,
-            action: () => {
-              setSelected(badge);
-              setEdit(true);
-            },
-          },
+
+          ...(role === ADMIN
+            ? [
+                {
+                  element: (
+                    <ToggleButton
+                      active={badge.is_active}
+                      setActive={() => {}}
+                    />
+                  ),
+                  action: async () => {
+                    changeActivityStatus(badge.name, !badge.is_active);
+                  },
+                },
+                {
+                  element: <Marker size={20} />,
+                  action: () => {
+                    setSelected(badge);
+                    setEdit(true);
+                  },
+                },
+              ]
+            : []),
         ];
       })
     : [];
diff --git a/frontend/src/admin/pages/home/Main.tsx b/frontend/src/admin/pages/home/Main.tsx
index 8265fde2..8d07d343 100644
--- a/frontend/src/admin/pages/home/Main.tsx
+++ b/frontend/src/admin/pages/home/Main.tsx
@@ -15,14 +15,14 @@ const AdminHomePage = (): React.ReactElement => {
         zIndex="100"
         direction="row"
         justifyContent="space-between"
-        alignItems="center"
+        alignItems="baseline"
         px="20px"
         width="100%"
       >
-        <Text textStyle="web.h2" color="#000000">
+        <Text textStyle="h1" color="text.dark">
           Marillac Place Overview
         </Text>
-        <Text textStyle="web.h3" color="#000000">
+        <Text textStyle="h3" color="text.dark">
           {formatDateV1(new Date())}
         </Text>
       </Flex>
diff --git a/frontend/src/admin/pages/home/components/AnnouncementSection.tsx b/frontend/src/admin/pages/home/components/AnnouncementSection.tsx
index 7cbf86b5..c9e741d2 100644
--- a/frontend/src/admin/pages/home/components/AnnouncementSection.tsx
+++ b/frontend/src/admin/pages/home/components/AnnouncementSection.tsx
@@ -16,26 +16,22 @@ const AnnouncementCard: React.FC<{ announcement: Announcement }> = ({
 }) => {
   return (
     <WidgetContainer
-      bg_color="neutral.100"
+      bg_color="background.highlight"
       width="100%"
-      paddingX="20px"
-      paddingY="12px"
+      paddingX="16px"
+      paddingY="10px"
     >
       <Flex flexDir="column" width="100%" gap="5px">
         <Flex width="100%" alignItems="baseline">
-          <Text textStyle="web.b2" fontWeight={600} color="black">
+          <Text textStyle="s1" fontWeight={600} color="text.dark">
             {getRoomString(announcement)}
           </Text>
-          <Text
-            textStyle="web.b3"
-            color="text.light.secondary"
-            marginLeft="10px"
-          >
+          <Text textStyle="b2" color="text.medium" marginLeft="10px">
             posted at {formatDateV2(new Date(announcement.date))}
           </Text>
         </Flex>
         <Flex width="100%">
-          <Text textStyle="web.b2" color="black">
+          <Text textStyle="b2" color="text.dark">
             {announcement.message}
           </Text>
         </Flex>
@@ -74,10 +70,10 @@ const AnnouncementSection = () => {
         paddingBottom="10px"
       >
         <Flex gap="10px" alignItems="baseline">
-          <Text textStyle="web.h3" color="primary.700" pl="5px">
+          <Text textStyle="h3" color="brand.primaryDark" pl="5px">
             Announcements
           </Text>
-          <Text textStyle="web.b3" color="text.light.secondary">
+          <Text textStyle="b2" color="text.light">
             {announcements.length} new post
             {announcements.length === 1 ? "" : "s"} today
           </Text>
@@ -108,7 +104,7 @@ const AnnouncementSection = () => {
             />
           ))
         ) : (
-          <Text textStyle="web.b2" color="text.light.secondary">
+          <Text textStyle="b1" color="text.light">
             No Announcements Yet
           </Text>
         )}
diff --git a/frontend/src/admin/pages/home/components/NoteSection.tsx b/frontend/src/admin/pages/home/components/NoteSection.tsx
index 4c0bc201..2e6eb51c 100644
--- a/frontend/src/admin/pages/home/components/NoteSection.tsx
+++ b/frontend/src/admin/pages/home/components/NoteSection.tsx
@@ -77,10 +77,10 @@ const NoteSection = () => {
         gap="10px"
         paddingBottom="10px"
       >
-        <Text textStyle="web.h3" color="primary.700" pl="5px">
+        <Text textStyle="h3" color="brand.primaryDark" pl="5px">
           Internal Notes
         </Text>
-        <Text textStyle="web.b3" color="text.light.secondary">
+        <Text textStyle="b2" color="text.light">
           Expires in 48h
         </Text>
       </Flex>
@@ -100,7 +100,7 @@ const NoteSection = () => {
         }}
       >
         {getNotesData?.getNotes.length === 0 ? (
-          <Text textStyle="web.b2" color="text.light.secondary">
+          <Text textStyle="b1" color="text.light">
             No Admin Notes Yet
           </Text>
         ) : (
@@ -108,9 +108,10 @@ const NoteSection = () => {
             return (
               <WidgetContainer
                 key={note.nid}
-                bg_color="neutral.100"
+                bg_color="background.highlight"
                 width="100%"
                 height="fit-content"
+                paddingY="10px"
               >
                 <Flex
                   width="100%"
@@ -118,7 +119,7 @@ const NoteSection = () => {
                   flexWrap="wrap"
                   overflow="hidden"
                 >
-                  <Text textStyle="web.b2" color="#000000">
+                  <Text textStyle="b2" color="text.dark">
                     {note.message}
                   </Text>
                 </Flex>
@@ -126,10 +127,10 @@ const NoteSection = () => {
                 <Flex
                   width="100%"
                   justifyContent="space-between"
-                  alignItems="center"
-                  mt="5px"
+                  alignItems="baseline"
+                  mt="6px"
                 >
-                  <Text textStyle="web.b3" color="text.light.secondary">
+                  <Text textStyle="b2" color="text.medium">
                     {formatDateV3(new Date(note.date))}
                   </Text>
                   <UnderlineButton
@@ -152,8 +153,7 @@ const NoteSection = () => {
         bottom="0"
         left="0"
         paddingX="20px"
-        paddingTop="10px"
-        paddingBottom="12px"
+        paddingY="10px"
       >
         <InputGroup width="100%" height="100%">
           <Input
@@ -161,17 +161,17 @@ const NoteSection = () => {
             height="100%"
             fontFamily="Nunito"
             fontWeight="400"
-            fontSize="14px"
-            color="#000000"
+            fontSize="12px"
+            color="text.dark"
             placeholder="Write a note"
             type="text"
             value={newNote}
             onChange={(e) => setNewNote(e.target.value)}
             border="1px solid"
-            borderColor="neutral.300"
+            borderColor="background.border"
             borderRadius="8px"
             _focus={{
-              borderColor: "neutral.300",
+              borderColor: "background.border",
               boxShadow: "none",
             }}
           />
@@ -182,7 +182,7 @@ const NoteSection = () => {
               padding="0px"
               _hover={{ bg: "transparent" }}
             >
-              <Airplane color="primary.700" size={16} />
+              <Airplane color="brand.primaryDark" size={16} />
             </Button>
           </InputRightElement>
         </InputGroup>
diff --git a/frontend/src/admin/pages/home/components/RoomsOverview.tsx b/frontend/src/admin/pages/home/components/RoomsOverview.tsx
index 6b55d674..d5df98c1 100644
--- a/frontend/src/admin/pages/home/components/RoomsOverview.tsx
+++ b/frontend/src/admin/pages/home/components/RoomsOverview.tsx
@@ -45,10 +45,10 @@ export default function RoomsOverview() {
         gap="10px"
         paddingBottom="10px"
       >
-        <Text textStyle="web.h3" color="primary.700" pl="5px">
+        <Text textStyle="h3" color="brand.primaryDark" pl="5px">
           Rooms
         </Text>
-        <Text textStyle="web.b3" color="text.light.secondary">
+        <Text textStyle="b2" color="text.light">
           Showing pending tasks for this week
         </Text>
       </Flex>
@@ -68,13 +68,13 @@ export default function RoomsOverview() {
             height="100%"
           >
             <Text
-              textStyle="web.s1"
-              bg="primary.100"
+              textStyle="s2"
+              bg="brand.primaryLight"
               width="100%"
               textAlign="center"
-              padding="8px"
+              padding="6px"
               borderBottom="1px solid"
-              borderColor="neutral.300"
+              borderColor="background.border"
               borderTopRightRadius="8px"
               borderTopLeftRadius="8px"
             >
@@ -82,10 +82,10 @@ export default function RoomsOverview() {
             </Text>
             {room in roomToParticipant ? (
               <>
-                <Text textStyle="web.b3" textAlign="center" mt="10px">
+                <Text textStyle="b2" textAlign="center" mt="10px">
                   ID Number: <b>#{roomToParticipant[room]}</b>
                 </Text>
-                <Text textStyle="web.b3" textAlign="center" mt="5px">
+                <Text textStyle="b2" textAlign="center" mt="6px">
                   {data?.getNumberOfAssignedTasksByRoom[room - 1]} Assigned
                   Tasks
                 </Text>
@@ -104,7 +104,7 @@ export default function RoomsOverview() {
               </>
             ) : (
               <>
-                <Text textStyle="web.b3" textAlign="center" mt="25px">
+                <Text textStyle="b2" textAlign="center" mt="25px">
                   Room Available.
                 </Text>
                 <Flex
diff --git a/frontend/src/admin/pages/login/Main.tsx b/frontend/src/admin/pages/login/Main.tsx
index 2b5fd499..7b5641c3 100644
--- a/frontend/src/admin/pages/login/Main.tsx
+++ b/frontend/src/admin/pages/login/Main.tsx
@@ -69,12 +69,12 @@ export default function AdminLoginPage() {
       h="100vh"
       alignItems="center"
       justifyContent="center"
-      bg="neutral.0"
+      bg="white"
     >
       <Flex
         width="700px"
         h="350px"
-        bg="primary.100"
+        bg="brand.primaryLight"
         borderRadius="8px"
         boxShadow="lg"
         flexDir="row"
@@ -94,8 +94,8 @@ export default function AdminLoginPage() {
           paddingY="25px"
         >
           <Flex flexDir="column">
-            <Text textStyle="web.h2">Sign in</Text>
-            <Text textStyle="web.b2">Please enter your login information.</Text>
+            <Text textStyle="h2">Sign In</Text>
+            <Text textStyle="b1">Please enter your login information.</Text>
           </Flex>
 
           <Flex flexDir="column" gap="10px" my="20px">
@@ -117,14 +117,14 @@ export default function AdminLoginPage() {
             />
 
             {error && (
-              <Text textStyle="web.b2" fontWeight="600" color="#E30000">
+              <Text textStyle="b1" fontWeight="600" color="indicate.brightRed">
                 {error}
               </Text>
             )}
           </Flex>
 
           <OrangeButton
-            label="Sign in"
+            label="Sign In"
             action={handleSubmit}
             is_active={false}
           />
diff --git a/frontend/src/admin/pages/participants/Main.tsx b/frontend/src/admin/pages/participants/Main.tsx
index 62485f41..c32b4697 100644
--- a/frontend/src/admin/pages/participants/Main.tsx
+++ b/frontend/src/admin/pages/participants/Main.tsx
@@ -1,7 +1,10 @@
 import { Flex, Spinner, Text, Grid } from "@chakra-ui/react";
 import React from "react";
 import { useQuery } from "@apollo/client";
-import { GET_CURRENT_PARTICIPANTS, GET_PAST_PARTICIPANTS } from "../../../gql/participantRequests";
+import {
+  GET_CURRENT_PARTICIPANTS,
+  GET_PAST_PARTICIPANTS,
+} from "../../../gql/participantRequests";
 import { ROOM_NUMBERS } from "../../../constants/rooms";
 import OccupiedRoomCard from "./components/OccupiedRoomCard";
 import EmptyRoomCard from "./components/EmptyRoomCard";
@@ -11,8 +14,18 @@ import ErrorScreen from "../../../ui/screens/ErrorScreen";
 import { Participant } from "../../../types/models";
 
 export default function AdminParticipantsPage() {
-  const { loading: loadingCurrent, error: errorCurrent, data: dataCurrent, refetch: refetchCurrent } = useQuery(GET_CURRENT_PARTICIPANTS);
-  const { loading: loadingPast, error: errorPast, data: dataPast, refetch: refetchPast } = useQuery(GET_PAST_PARTICIPANTS);
+  const {
+    loading: loadingCurrent,
+    error: errorCurrent,
+    data: dataCurrent,
+    refetch: refetchCurrent,
+  } = useQuery(GET_CURRENT_PARTICIPANTS);
+  const {
+    loading: loadingPast,
+    error: errorPast,
+    data: dataPast,
+    refetch: refetchPast,
+  } = useQuery(GET_PAST_PARTICIPANTS);
 
   const currentParticipants: Record<number, Participant> = {};
   if (dataCurrent && dataCurrent.getCurrentParticipants) {
@@ -26,7 +39,7 @@ export default function AdminParticipantsPage() {
 
   return (
     <Flex w="100%" flexDir="column" minHeight="fit-content">
-      <Text textStyle="web.h2" color="primary.700" mb="10px">
+      <Text textStyle="h2" color="brand.primaryDark" mb="10px">
         Current Participants
       </Text>
 
@@ -41,15 +54,24 @@ export default function AdminParticipantsPage() {
               refetchPast={refetchPast}
             />
           ) : (
-            <EmptyRoomCard key={num} roomNumber={num} refetch={refetchCurrent} />
+            <EmptyRoomCard
+              key={num}
+              roomNumber={num}
+              refetch={refetchCurrent}
+            />
           )
         )}
       </Grid>
 
-      <Text textStyle="web.h2" color="primary.700" mt="20px" mb="10px">
+      <Text textStyle="h3" color="brand.primaryDark" mt="20px" mb="10px">
         Past Participants
       </Text>
-      <PastParticipantTable participants={dataPast?.getPastParticipants || []} refetch={refetchPast} loading={loadingPast} error={errorPast} />
+      <PastParticipantTable
+        participants={dataPast?.getPastParticipants || []}
+        refetch={refetchPast}
+        loading={loadingPast}
+        error={errorPast}
+      />
     </Flex>
   );
 }
diff --git a/frontend/src/admin/pages/participants/components/AddParticipantCard.tsx b/frontend/src/admin/pages/participants/components/AddParticipantCard.tsx
index ad152955..fcd144c6 100644
--- a/frontend/src/admin/pages/participants/components/AddParticipantCard.tsx
+++ b/frontend/src/admin/pages/participants/components/AddParticipantCard.tsx
@@ -5,6 +5,7 @@ import ModalContainer from "../../../../ui/containers/PopupContainer";
 import NumberInput from "../../../../ui/inputs/NumberInput";
 import TextInput from "../../../../ui/inputs/TextInput";
 import DateInput from "../../../../ui/inputs/DateInput";
+import PasswordInput from "../../../../ui/inputs/PasswordInput";
 
 type AddParticipantCardProps = {
   roomNumber: number;
@@ -77,7 +78,7 @@ const AddParticipantCard = ({
         update_action={(value: Date) => setArrivalDate(value)}
         size="large"
       />
-      <TextInput
+      <PasswordInput
         label="Password"
         current_value={password}
         update_action={(value: any) => setPassword(value)}
@@ -87,4 +88,4 @@ const AddParticipantCard = ({
   );
 };
 
-export default AddParticipantCard;
\ No newline at end of file
+export default AddParticipantCard;
diff --git a/frontend/src/admin/pages/participants/components/EditParticipantCard.tsx b/frontend/src/admin/pages/participants/components/EditParticipantCard.tsx
index 5641a7d7..0f681b3f 100644
--- a/frontend/src/admin/pages/participants/components/EditParticipantCard.tsx
+++ b/frontend/src/admin/pages/participants/components/EditParticipantCard.tsx
@@ -10,6 +10,10 @@ import TextInput from "../../../../ui/inputs/TextInput";
 import GreenButton from "../../../../ui/buttons/GreenOutlineButton";
 import { Participant } from "../../../../types/models";
 import FixedInput from "../../../../ui/inputs/FixedInput";
+import PasswordInput from "../../../../ui/inputs/PasswordInput";
+import { Swap } from "../../../../ui/icons/ActionIcons";
+import { ExitDoor } from "../../../../ui/icons/MiscIcons";
+import useNotification from "../../../../hooks/useNotification";
 
 type EditParticipantCardProps = {
   roomNumber: number;
@@ -29,12 +33,16 @@ export default function EditParticipantCard({
   const participant: Participant = participants[roomNumber];
   const id: number = participant.pid;
   const currentArrivalDate = new Date(participant.arrival);
-  const currentDepartureDate = participant.departure ? new Date(participant.departure) : null;
+  const currentDepartureDate = participant.departure
+    ? new Date(participant.departure)
+    : null;
   const currentPassword = participant.password;
 
   const [arrivalDate, setArrivalDate] = useState<Date>(currentArrivalDate);
   const [password, setPassword] = useState<string>(currentPassword);
-  const [departureDate, setDepartureDate] = useState<Date | null>(currentDepartureDate);
+  const [departureDate, setDepartureDate] = useState<Date | null>(
+    currentDepartureDate
+  );
 
   const [swapParticipant, setSwapParticipant] = useState(false);
   const [endStay, setEndStay] = useState(false);
@@ -43,7 +51,7 @@ export default function EditParticipantCard({
   const [selectedSwap, setSelectedSwap] = useState(-1);
 
   const [updateParticipant, { loading }] = useMutation(UPDATE_PARTICIPANT);
-
+  const { sendNotification } = useNotification();
   async function handleSubmit() {
     setError("");
     const today = endOfDay(new Date());
@@ -91,9 +99,7 @@ export default function EditParticipantCard({
           room: swapParticipant ? selectedSwap : undefined,
           arrival: arrivalDate.toISOString(),
           departure:
-            endStay && departureDate
-              ? departureDate.toISOString()
-              : undefined,
+            endStay && departureDate ? departureDate.toISOString() : undefined,
           password,
         },
       });
@@ -110,6 +116,7 @@ export default function EditParticipantCard({
       refetchCurrent();
       refetchPast();
       close();
+      sendNotification("Participant updated successfully");
     } catch (err: any) {
       setError(err.message);
     }
@@ -141,7 +148,7 @@ export default function EditParticipantCard({
         size="large"
       />
 
-      <TextInput
+      <PasswordInput
         label="Password"
         current_value={password}
         update_action={setPassword}
@@ -150,55 +157,61 @@ export default function EditParticipantCard({
 
       <Flex alignItems="center" justifyContent="flex-start" gap="8px" mt="10px">
         <GreenButton
-          label="Swap Participant"
+          label="Swap Rooms"
           action={() => {
-            setEndStay(false);
-            setDepartureDate(null);
+            if (!swapParticipant) {
+              setEndStay(false);
+              setDepartureDate(null);
+            }
             setError("");
-            setSwapParticipant(true);
+            setSwapParticipant(!swapParticipant);
           }}
           is_active={swapParticipant}
+          icon={<Swap color="currentColor" />}
         />
         <Button
           onClick={() => {
-            setSwapParticipant(false);
-            setSelectedSwap(-1);
+            if (!endStay) {
+              setSwapParticipant(false);
+              setSelectedSwap(-1);
+            }
             setError("");
-            setEndStay(true);
+            setEndStay(!endStay);
           }}
           isActive={endStay}
           cursor="pointer"
           borderRadius="8px"
           border="1px"
-          borderColor="#E30000"
+          borderColor="indicate.brightRed"
           width="fit-content"
           height="fit-content"
           paddingX="12px"
           paddingY="6px"
-          bg="#FFFFFF"
-          color="#E30000"
+          bg="white"
+          color="indicate.brightRed"
           _hover={{
-            color: "#FFFFFF",
-            bg: "#E30000",
+            color: "white",
+            bg: "indicate.brightRed",
           }}
           _active={{
-            color: "#FFFFFF",
-            bg: "#E30000",
+            color: "white",
+            bg: "indicate.brightRed",
           }}
         >
-          <Text textStyle="web.s1" color="inherit">
+          <ExitDoor color="currentColor" />
+          <Text textStyle="s2" color="inherit" ml="6px">
             End Stay
           </Text>
         </Button>
       </Flex>
 
       {(endStay || swapParticipant) && (
-        <Flex w="100%" h="1px" bg="neutral.300" mt="8px" />
+        <Flex w="100%" h="1px" bg="background.border" mt="6px" />
       )}
 
       {swapParticipant && (
         <Flex flexDir="column">
-          <Text textStyle="web.s1" color="text.light.secondary" mb="5px">
+          <Text textStyle="s2" mb="5px">
             Available Rooms
           </Text>
           <Flex wrap="wrap" gap="5px" width="400px">
@@ -216,18 +229,18 @@ export default function EditParticipantCard({
 
       {selectedSwap !== -1 &&
         (selectedSwap === roomNumber ? (
-          <Text textStyle="web.b3">
+          <Text textStyle="b2">
             Participant #{participants[roomNumber].pid} is already in Room{" "}
             {roomNumber}.
           </Text>
         ) : (
           <Flex flexDir="column" gap="5px">
-            <Text textStyle="web.b3">
+            <Text textStyle="b2">
               Participant #{participants[roomNumber].pid} will be moved to Room{" "}
               {selectedSwap}.
             </Text>
             {selectedSwap in participants && (
-              <Text textStyle="web.b3">
+              <Text textStyle="b2">
                 Participant #{participants[selectedSwap].pid} will be moved to
                 Room {roomNumber}.
               </Text>
diff --git a/frontend/src/admin/pages/participants/components/EditPastParticipantCard.tsx b/frontend/src/admin/pages/participants/components/EditPastParticipantCard.tsx
index 143089c6..e2015d2c 100644
--- a/frontend/src/admin/pages/participants/components/EditPastParticipantCard.tsx
+++ b/frontend/src/admin/pages/participants/components/EditPastParticipantCard.tsx
@@ -4,6 +4,7 @@ import { UPDATE_PARTICIPANT } from "../../../../gql/participantRequests";
 import ModalContainer from "../../../../ui/containers/PopupContainer";
 import DateInput from "../../../../ui/inputs/DateInput";
 import FixedInput from "../../../../ui/inputs/FixedInput";
+import useNotification from "../../../../hooks/useNotification";
 
 type EditPastParticipantCardProps = {
   id: number;
@@ -23,7 +24,7 @@ export default function EditPastParticipantCard({
   const [arrivalDate, setArrivalDate] = useState<Date>(arrival);
   const [departureDate, setDepartureDate] = useState<Date>(departure);
   const [error, setError] = useState("");
-
+  const { sendNotification } = useNotification();
   const [updateParticipant, { loading }] = useMutation(UPDATE_PARTICIPANT);
 
   async function handleSubmit() {
@@ -54,6 +55,7 @@ export default function EditPastParticipantCard({
           });
           refetch();
           close();
+          sendNotification("Past participant updated successfully");
         } catch (err: any) {
           setError(err.message);
         }
diff --git a/frontend/src/admin/pages/participants/components/EmptyRoomCard.tsx b/frontend/src/admin/pages/participants/components/EmptyRoomCard.tsx
index d75358a1..900069f0 100644
--- a/frontend/src/admin/pages/participants/components/EmptyRoomCard.tsx
+++ b/frontend/src/admin/pages/participants/components/EmptyRoomCard.tsx
@@ -8,13 +8,16 @@ type EmptyRoomCardProps = {
   refetch: () => void;
 };
 
-export default function EmptyRoomCard({ roomNumber, refetch }: EmptyRoomCardProps) {
+export default function EmptyRoomCard({
+  roomNumber,
+  refetch,
+}: EmptyRoomCardProps) {
   const [addParticipant, setAddParticipant] = useState(false);
   return (
     <Flex
-      height="140px"
+      height="150px"
       border="1px"
-      borderColor="neutral.300"
+      borderColor="background.border"
       borderRadius="8px"
       flexDir="column"
       justifyContent="center"
@@ -31,13 +34,15 @@ export default function EmptyRoomCard({ roomNumber, refetch }: EmptyRoomCardProp
         justifyContent="center"
         alignItems="center"
         borderBottom="1px"
-        borderColor="neutral.300"
-        bg="primary.100"
+        borderColor="background.border"
+        bg="brand.primaryLight"
       >
-        <Text textStyle="web.s1">Room {roomNumber}</Text>
+        <Text textStyle="s1">Room {roomNumber}</Text>
       </Flex>
 
-      <Text textStyle="web.b3" mb="2px">This room is empty.</Text>
+      <Text textStyle="b1" mb="2px">
+        This room is empty.
+      </Text>
 
       <Flex position="absolute" bottom="12px">
         <OrangeButton
diff --git a/frontend/src/admin/pages/participants/components/OccupiedRoomCard.tsx b/frontend/src/admin/pages/participants/components/OccupiedRoomCard.tsx
index f9599456..ea166474 100644
--- a/frontend/src/admin/pages/participants/components/OccupiedRoomCard.tsx
+++ b/frontend/src/admin/pages/participants/components/OccupiedRoomCard.tsx
@@ -23,9 +23,9 @@ const OccupiedRoomCard = ({
   const { arrival } = participants[roomNumber];
   return (
     <Flex
-      height="140px"
+      height="150px"
       border="1px"
-      borderColor="neutral.300"
+      borderColor="background.border"
       borderRadius="8px"
       flexDir="column"
       justifyContent="center"
@@ -44,21 +44,21 @@ const OccupiedRoomCard = ({
         justifyContent="center"
         alignItems="center"
         borderBottom="1px"
-        borderColor="neutral.300"
-        bg="primary.100"
+        borderColor="background.border"
+        bg="brand.primaryLight"
       >
-        <Text textStyle="web.s1">Room {roomNumber}</Text>
+        <Text textStyle="s1">Room {roomNumber}</Text>
       </Flex>
 
-      <Text textStyle="web.b3">
+      <Text textStyle="b1">
         ID Number:&nbsp;
-        <Text as="span" fontWeight="700">
+        <Text as="span" fontWeight="650">
           #{id}
         </Text>
       </Text>
-      <Text textStyle="web.b3" mb="2px">
-        Arrival Date:&nbsp;
-        <Text as="span" fontWeight="700">
+      <Text textStyle="b1" mb="2px">
+        Arrival:&nbsp;
+        <Text as="span" fontWeight="650">
           {formatDateV6(new Date(arrival))}
         </Text>
       </Text>
diff --git a/frontend/src/admin/pages/participants/components/PastParticipantTable.tsx b/frontend/src/admin/pages/participants/components/PastParticipantTable.tsx
index fd49f114..bcb3e87e 100644
--- a/frontend/src/admin/pages/participants/components/PastParticipantTable.tsx
+++ b/frontend/src/admin/pages/participants/components/PastParticipantTable.tsx
@@ -12,7 +12,12 @@ type PastParticipantTableProps = {
   loading: boolean;
   error: ApolloError | undefined;
 };
-const PastParticipantTable = ({ participants, refetch, loading, error }: PastParticipantTableProps) => {
+const PastParticipantTable = ({
+  participants,
+  refetch,
+  loading,
+  error,
+}: PastParticipantTableProps) => {
   const [edit, setEdit] = useState(false);
   const [selectedId, setSelectedId] = useState(-1);
   const [selectedArrival, setSelectedArrival] = useState<Date | null>(null);
@@ -36,27 +41,32 @@ const PastParticipantTable = ({ participants, refetch, loading, error }: PastPar
 
   const rows: Row[][] = participants.length
     ? participants.map((participant: Participant, index: number) => {
-      return [
-        {
-          element: participant.pid,
-        },
-        {
-          element: formatDateV1(new Date(participant.arrival)),
-        },
-        {
-          element: participant.departure ? formatDateV1(new Date(participant.departure)) : "",
-        },
-        {
-          element: <Marker size={20} />,
-          action: () => {
-            setSelectedId(participant.pid);
-            setSelectedArrival(new Date(participant.arrival));
-            setSelectedDeparture(participant.departure ? new Date(participant.departure) : null);
-            setEdit(true);
-          }
-        }
-      ];
-    }): [];
+        return [
+          {
+            element: participant.pid,
+          },
+          {
+            element: formatDateV1(new Date(participant.arrival)),
+          },
+          {
+            element: participant.departure
+              ? formatDateV1(new Date(participant.departure))
+              : "",
+          },
+          {
+            element: <Marker size={20} />,
+            action: () => {
+              setSelectedId(participant.pid);
+              setSelectedArrival(new Date(participant.arrival));
+              setSelectedDeparture(
+                participant.departure ? new Date(participant.departure) : null
+              );
+              setEdit(true);
+            },
+          },
+        ];
+      })
+    : [];
 
   return (
     <>
@@ -66,14 +76,15 @@ const PastParticipantTable = ({ participants, refetch, loading, error }: PastPar
         loading={loading}
         error={error?.message}
       />
-      {edit && selectedArrival && selectedDeparture && selectedId && 
-      <EditPastParticipantCard
-        id={selectedId}
-        arrival={selectedArrival}
-        departure={selectedDeparture}
-        close={() => setEdit(false)}
-        refetch={refetch}
-      />}
+      {edit && selectedArrival && selectedDeparture && selectedId && (
+        <EditPastParticipantCard
+          id={selectedId}
+          arrival={selectedArrival}
+          departure={selectedDeparture}
+          close={() => setEdit(false)}
+          refetch={refetch}
+        />
+      )}
     </>
   );
 };
diff --git a/frontend/src/admin/pages/reports/Main.tsx b/frontend/src/admin/pages/reports/Main.tsx
index e0d6a30f..926edc5c 100644
--- a/frontend/src/admin/pages/reports/Main.tsx
+++ b/frontend/src/admin/pages/reports/Main.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useContext, useState } from "react";
 import { Flex, Text } from "@chakra-ui/react";
 import { useQuery } from "@apollo/client";
 import ReportsTable from "./components/ReportsTable";
@@ -7,6 +7,9 @@ import { GET_REPORT_RECIPIENTS } from "../../../gql/reportRecipientRequests";
 import LoadingScreen from "../../../ui/screens/LoadingScreen";
 import ErrorScreen from "../../../ui/screens/ErrorScreen";
 import OrangeButton from "../../../ui/buttons/OrangeButton";
+import { Plus } from "../../../ui/icons/ActionIcons";
+import { AdminContext } from "../../AdminContext";
+import { ADMIN } from "../../../constants/roles";
 
 type Report = {
   email: string;
@@ -14,8 +17,8 @@ type Report = {
   monthly: boolean;
 };
 
-// TODO: Relief staff cannot access this page
 export default function AdminReportsPage() {
+  const { role } = useContext(AdminContext);
   const { loading, error, data, refetch } = useQuery(GET_REPORT_RECIPIENTS);
   const reports: Report[] = data?.getReportRecipients || [];
 
@@ -23,6 +26,8 @@ export default function AdminReportsPage() {
 
   if (loading) return <LoadingScreen />;
   if (error) return <ErrorScreen message={error.message} />;
+  if (role !== ADMIN)
+    return <ErrorScreen message="You are not authorized to access this page" />;
 
   return (
     <Flex width="100%" height="fit-content" flexDir="column" gap="15px">
@@ -33,15 +38,11 @@ export default function AdminReportsPage() {
         justifyContent="space-between"
       >
         <Flex alignItems="center" justifyContent="space-between" w="100%">
-          <Flex alignItems="center" gap="15px">
-            <Text textStyle="web.h2" color="primary.700" pl="5px">
+          <Flex alignItems="baseline" gap="15px">
+            <Text textStyle="h2" color="brand.primaryDark" pl="5px">
               Reports
             </Text>
-            <Text
-              textStyle="web.b3"
-              color="text.light.secondary"
-              marginTop="7px"
-            >
+            <Text textStyle="b2" color="text.light">
               Reports will be automatically generated and emailed. Edit
               frequency of reports below.
             </Text>
@@ -50,6 +51,7 @@ export default function AdminReportsPage() {
             label="Add Email"
             action={() => setAddEmail(true)}
             is_active={addEmail}
+            icon={<Plus />}
           />
         </Flex>
       </Flex>
diff --git a/frontend/src/admin/pages/reports/components/AddEmailModal.tsx b/frontend/src/admin/pages/reports/components/AddEmailModal.tsx
index 906a552a..c88cb20a 100644
--- a/frontend/src/admin/pages/reports/components/AddEmailModal.tsx
+++ b/frontend/src/admin/pages/reports/components/AddEmailModal.tsx
@@ -5,6 +5,7 @@ import PopupContainer from "../../../../ui/containers/PopupContainer";
 import TextInput from "../../../../ui/inputs/TextInput";
 import { CREATE_REPORT_RECIPIENT } from "../../../../gql/reportRecipientRequests";
 import ToggleButton from "../../../../ui/buttons/ToggleButton";
+import useNotification from "../../../../hooks/useNotification";
 
 type AddEmailModalProps = {
   refetch: () => void;
@@ -19,7 +20,7 @@ export default function AddEmailModal({
   const [weekly, setWeekly] = useState<boolean>(false);
   const [monthly, setMonthly] = useState<boolean>(false);
   const [error, setError] = useState("");
-
+  const { sendNotification } = useNotification();
   const [createReportRecipient, { loading: createReportRecipientLoading }] =
     useMutation(CREATE_REPORT_RECIPIENT);
   const handleAddEmail = async (
@@ -42,6 +43,7 @@ export default function AddEmailModal({
       });
       onClose();
       refetch();
+      sendNotification("Email added successfully");
     } catch (err: any) {
       setError(err.message);
     }
@@ -62,17 +64,14 @@ export default function AddEmailModal({
         update_action={setEmail}
         size="large"
       />
-      <Text textStyle="web.s1" color="text.light.secondary">
-        Report Frequency
-      </Text>
-      <Flex w="100%" alignItems="center" gap="15px">
-        <Text textStyle="web.b3" color="text.light.primary" w="95px">
+      <Flex w="100%" alignItems="center" gap="15px" mt="6px">
+        <Text textStyle="s2" color="text.dark" w="95px">
           Weekly Reports
         </Text>
         <ToggleButton active={weekly} setActive={setWeekly} />
       </Flex>
       <Flex w="100%" alignItems="center" gap="15px">
-        <Text textStyle="web.b3" color="text.light.primary" w="95px">
+        <Text textStyle="s2" color="text.dark" w="95px">
           Monthly Reports
         </Text>
         <ToggleButton active={monthly} setActive={setMonthly} />
diff --git a/frontend/src/admin/pages/reports/components/ReportsTable.tsx b/frontend/src/admin/pages/reports/components/ReportsTable.tsx
index d230e23d..c6745138 100644
--- a/frontend/src/admin/pages/reports/components/ReportsTable.tsx
+++ b/frontend/src/admin/pages/reports/components/ReportsTable.tsx
@@ -7,6 +7,7 @@ import {
   DELETE_REPORT_RECIPIENT,
   UPDATE_REPORT_RECIPIENT,
 } from "../../../../gql/reportRecipientRequests";
+import useNotification from "../../../../hooks/useNotification";
 
 type Report = {
   email: string;
@@ -24,6 +25,7 @@ export default function ReportsTable({ reports, refetch }: ReportsTableProps) {
     useMutation(UPDATE_REPORT_RECIPIENT);
   const [deleteReportRecipient, { loading: deleteReportRecipientLoading }] =
     useMutation(DELETE_REPORT_RECIPIENT);
+  const { sendNotification } = useNotification();
 
   const handleChangeWeekly = async (email: string, weekly: boolean) => {
     try {
@@ -34,6 +36,7 @@ export default function ReportsTable({ reports, refetch }: ReportsTableProps) {
         },
       });
       refetch();
+      sendNotification("Weekly report frequency updated successfully");
     } catch (err) {
       console.error("Error updating report recipient:", err);
     }
@@ -48,6 +51,7 @@ export default function ReportsTable({ reports, refetch }: ReportsTableProps) {
         },
       });
       refetch();
+      sendNotification("Monthly report frequency updated successfully");
     } catch (err) {
       console.error("Error updating report recipient:", err);
     }
@@ -61,6 +65,7 @@ export default function ReportsTable({ reports, refetch }: ReportsTableProps) {
         },
       });
       refetch();
+      sendNotification("Email deleted successfully");
     } catch (err) {
       console.error("Error deleting report recipient:", err);
     }
diff --git a/frontend/src/admin/pages/schedule/Main.tsx b/frontend/src/admin/pages/schedule/Main.tsx
index 5fd50a54..1cc3c8bf 100644
--- a/frontend/src/admin/pages/schedule/Main.tsx
+++ b/frontend/src/admin/pages/schedule/Main.tsx
@@ -16,7 +16,7 @@ import OrangeButton from "../../../ui/buttons/OrangeButton";
 import { ADMIN_PARTICIPANTS_PAGE } from "../../../constants/routes";
 import GreenOutlineButton from "../../../ui/buttons/GreenOutlineButton";
 import { Calendar, List } from "../../../ui/icons/MiscIcons";
-import { Marker } from "../../../ui/icons/ActionIcons";
+import { Marker, Plus } from "../../../ui/icons/ActionIcons";
 import AnyDayTasksTable from "./components/AnyDayTasksTable";
 import DailyTasksTable from "./components/DailyTasksTable";
 import MarillacBalanceModal from "./components/MarillacBalanceModal";
@@ -102,7 +102,7 @@ export default function AdminSchedulePage() {
       {selectedRoom in roomToParticipant ? (
         <>
           <Flex alignItems="center" justifyContent="space-between" w="100%">
-            <Text textStyle="web.h2" color="primary.700" pl="3px">
+            <Text textStyle="h2" color="brand.primaryDark" pl="3px">
               {formatDateV5(weekStart)}
             </Text>
             <GreenOutlineButton
@@ -130,18 +130,18 @@ export default function AdminSchedulePage() {
                 borderRightRadius="0px"
                 border="1px solid"
                 borderColor="#E67D4F"
-                bg="#FFFFFF"
+                bg="white"
                 color="#E67D4F"
                 _hover={{
-                  bg: "#E67D4F",
-                  color: "#FFFFFF",
+                  bg: "brand.secondaryDark",
+                  color: "white",
                 }}
                 _active={{
-                  bg: "#E67D4F",
-                  color: "#FFFFFF",
+                  bg: "brand.secondaryDark",
+                  color: "white",
                 }}
               >
-                <Text textStyle="web.s1" color="inherit">
+                <Text textStyle="s2" color="inherit">
                   List
                 </Text>
               </Button>
@@ -157,18 +157,18 @@ export default function AdminSchedulePage() {
                 borderRightRadius="8px"
                 border="1px solid"
                 borderColor="#E67D4F"
-                bg="#FFFFFF"
-                color="#E67D4F"
+                bg="white"
+                color="brand.secondaryDark"
                 _hover={{
-                  bg: "#E67D4F",
-                  color: "#FFFFFF",
+                  bg: "brand.secondaryDark",
+                  color: "white",
                 }}
                 _active={{
-                  bg: "#E67D4F",
-                  color: "#FFFFFF",
+                  bg: "brand.secondaryDark",
+                  color: "white",
                 }}
               >
-                <Text textStyle="web.s1" color="inherit">
+                <Text textStyle="s2" color="inherit">
                   Calendar
                 </Text>
               </Button>
@@ -177,6 +177,7 @@ export default function AdminSchedulePage() {
               label="Assign Task"
               action={() => setAssignTask(true)}
               is_active={assignTask}
+              icon={<Plus />}
             />
           </Flex>
 
@@ -189,7 +190,7 @@ export default function AdminSchedulePage() {
             />
           ) : (
             <>
-              <Text textStyle="web.h2" color="primary.700" pl="3px">
+              <Text textStyle="h3" color="brand.primaryDark" pl="3px" mt="8px">
                 Daily
               </Text>
               <DailyTasksTable
@@ -198,7 +199,7 @@ export default function AdminSchedulePage() {
                 error={assignedTasksError}
                 loading={assignedTasksLoading}
               />
-              <Text textStyle="web.h2" color="primary.700" pl="3px">
+              <Text textStyle="h3" color="brand.primaryDark" pl="3px">
                 Any Day
               </Text>
               <AnyDayTasksTable
@@ -246,7 +247,7 @@ export default function AdminSchedulePage() {
           direction="column"
           gap={4}
         >
-          <Text textStyle="web.h3" color="text.light.disabled">
+          <Text textStyle="h3" color="text.medium">
             This room is empty
           </Text>
           <OrangeButton
diff --git a/frontend/src/admin/pages/schedule/components/AssignTaskModal.tsx b/frontend/src/admin/pages/schedule/components/AssignTaskModal.tsx
index 391adfdb..fde4d097 100644
--- a/frontend/src/admin/pages/schedule/components/AssignTaskModal.tsx
+++ b/frontend/src/admin/pages/schedule/components/AssignTaskModal.tsx
@@ -23,6 +23,7 @@ import {
   isValidTask,
 } from "../../../../helpers/taskHelpers";
 import { toTitleCase } from "../../../../helpers/stringUtils";
+import useNotification from "../../../../hooks/useNotification";
 
 type InitialAssignTaskModalProps = {
   onNext: (task: Task) => void;
@@ -105,7 +106,7 @@ export default function AssignTaskModal({
 }: AssignTaskModalProps) {
   const [initialState, setInitialState] = useState<boolean>(true);
   const [error, setError] = useState<string>("");
-
+  const { sendNotification } = useNotification();
   const [taskId, setTaskId] = useState<number | null>(null);
   const [taskName, setTaskName] = useState<string>("");
   const [taskType, setTaskType] = useState<TaskType>(TaskType.OPTIONAL);
@@ -164,6 +165,7 @@ export default function AssignTaskModal({
       await Promise.all(operations);
       refetchAssignedTasks();
       onClose();
+      sendNotification("Task assigned successfully");
     } catch (err: any) {
       setError(err.message);
     }
diff --git a/frontend/src/admin/pages/schedule/components/DailyTasksTable.tsx b/frontend/src/admin/pages/schedule/components/DailyTasksTable.tsx
index e0024468..8f989366 100644
--- a/frontend/src/admin/pages/schedule/components/DailyTasksTable.tsx
+++ b/frontend/src/admin/pages/schedule/components/DailyTasksTable.tsx
@@ -79,7 +79,7 @@ export default function DailyTasksTable({
         ])
     );
   }, [chosenDay, tasks]);
-  
+
   return (
     <Flex flexDir="column" w="100%">
       <Flex w="100%" alignItems="center" justifyContent="center">
@@ -97,16 +97,17 @@ export default function DailyTasksTable({
             width="14.1%"
             height="fit-content"
             paddingX="12px"
-            paddingY="6px"
-            bg="#FFFFFF"
+            paddingTop="8px"
+            paddingBottom="6px"
+            bg="white"
             _hover={{
-              bg: "#F5F6F8",
+              bg: "background.highlight",
             }}
             _active={{
-              bg: "#F5F6F8",
+              bg: "background.highlight",
             }}
           >
-            <Text textStyle="web.s1" color="text.light.primary">
+            <Text textStyle="s2" color="text.dark">
               {toTitleCase(day)}
             </Text>
           </Button>
diff --git a/frontend/src/admin/pages/schedule/components/EditAssignedTaskModal.tsx b/frontend/src/admin/pages/schedule/components/EditAssignedTaskModal.tsx
index e792c793..833a0949 100644
--- a/frontend/src/admin/pages/schedule/components/EditAssignedTaskModal.tsx
+++ b/frontend/src/admin/pages/schedule/components/EditAssignedTaskModal.tsx
@@ -7,6 +7,7 @@ import TextInput from "../../../../ui/inputs/TextInput";
 import NumberInput from "../../../../ui/inputs/NumberInput";
 import TextAreaInput from "../../../../ui/inputs/TextAreaInput";
 import { UPDATE_ASSIGNED_TASK } from "../../../../gql/assignedTaskRequests";
+import useNotification from "../../../../hooks/useNotification";
 
 type EditAssignedTaskModalProps = {
   task: AssignedTask;
@@ -19,6 +20,7 @@ export default function EditAssignedTaskModal({
   onClose,
   refetch,
 }: EditAssignedTaskModalProps) {
+  const { sendNotification } = useNotification();
   const [taskName, setTaskName] = useState(task.name);
   const [addition, setAddition] = useState(task.value);
   const [deduction, setDeduction] = useState(task.penalty);
@@ -50,6 +52,7 @@ export default function EditAssignedTaskModal({
       });
       refetch();
       onClose();
+      sendNotification("Assigned task updated successfully");
     } catch (err: any) {
       setError(err.message);
     }
diff --git a/frontend/src/admin/pages/schedule/components/MarillacBalanceModal.tsx b/frontend/src/admin/pages/schedule/components/MarillacBalanceModal.tsx
index 879016a3..2e3c5f58 100644
--- a/frontend/src/admin/pages/schedule/components/MarillacBalanceModal.tsx
+++ b/frontend/src/admin/pages/schedule/components/MarillacBalanceModal.tsx
@@ -7,6 +7,7 @@ import FixedInput from "../../../../ui/inputs/FixedInput";
 import NumberInput from "../../../../ui/inputs/NumberInput";
 import SelectInput from "../../../../ui/inputs/SelectInput";
 import TextAreaInput from "../../../../ui/inputs/TextAreaInput";
+import useNotification from "../../../../hooks/useNotification";
 
 type MarillacBalanceModalProps = {
   currentBalance: number;
@@ -25,7 +26,7 @@ export default function MarillacBalanceModal({
   const [amount, setAmount] = useState<number>(0);
   const [reason, setReason] = useState("");
   const [error, setError] = useState("");
-
+  const { sendNotification } = useNotification();
   const [updateMarillacBucks, { loading: updateMarillacBucksLoading }] =
     useMutation(UPDATE_BALANCE);
 
@@ -45,11 +46,12 @@ export default function MarillacBalanceModal({
             reason,
           },
         });
+        refetchParticipant();
+        close();
+        sendNotification("Marillac balance updated successfully");
       } catch (err: any) {
         setError(err.message);
       }
-      refetchParticipant();
-      close();
     }
   }
 
diff --git a/frontend/src/admin/pages/schedule/components/RoomNavigation.tsx b/frontend/src/admin/pages/schedule/components/RoomNavigation.tsx
index 4fe35353..c61e9bb1 100644
--- a/frontend/src/admin/pages/schedule/components/RoomNavigation.tsx
+++ b/frontend/src/admin/pages/schedule/components/RoomNavigation.tsx
@@ -17,7 +17,7 @@ export default function RoomNavigation({
       justifyContent="space-between"
       alignItems="center"
       position="absolute"
-      top="18px"
+      top="21px"
       left="0px"
       zIndex={10}
       paddingX="20px"
@@ -25,14 +25,15 @@ export default function RoomNavigation({
       {ROOM_NUMBERS.map((num: number) => (
         <Text
           key={num}
-          textStyle="web.b1"
-          fontWeight="700"
-          color={selectedRoom === num ? "primary.700" : "#000000"}
+          textStyle="s1"
+          color={selectedRoom === num ? "brand.primaryDark" : "text.dark"}
           cursor="pointer"
           onClick={() => changeRoom(num)}
           borderBottom="3px solid"
-          borderColor={selectedRoom === num ? "primary.700" : "transparent"}
-          px="12px"
+          borderColor={
+            selectedRoom === num ? "brand.primaryDark" : "transparent"
+          }
+          px="10px"
           pb="10px"
         >
           Room {num}
diff --git a/frontend/src/admin/pages/schedule/components/TaskDetailsModal.tsx b/frontend/src/admin/pages/schedule/components/TaskDetailsModal.tsx
index 1a7236d7..6f902530 100644
--- a/frontend/src/admin/pages/schedule/components/TaskDetailsModal.tsx
+++ b/frontend/src/admin/pages/schedule/components/TaskDetailsModal.tsx
@@ -20,6 +20,7 @@ import {
   Incomplete,
 } from "../../../../ui/icons/StatusIcons";
 import EditAssignedTaskModal from "./EditAssignedTaskModal";
+import useNotification from "../../../../hooks/useNotification";
 
 interface TaskDetailsModalProps {
   task: AssignedTask;
@@ -35,7 +36,7 @@ export default function TaskDetailsModal({
   const [selectedStatus, setSelectedStatus] = useState<TaskStatus>(task.status);
   const [editDetails, setEditDetails] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
-
+  const { sendNotification } = useNotification();
   const [deleteAssignedTask, { loading: deleteAssignedTaskLoading }] =
     useMutation(DELETE_ASSIGNED_TASK);
   const handleDelete = async () => {
@@ -47,6 +48,7 @@ export default function TaskDetailsModal({
       });
       refetch();
       onClose();
+      sendNotification("Assigned task deleted successfully");
     } catch (err: any) {
       setError(err.message);
     }
@@ -74,6 +76,7 @@ export default function TaskDetailsModal({
       });
       refetch();
       onClose();
+      sendNotification("Task status updated successfully");
     } catch (err: any) {
       setError(err.message);
     }
@@ -124,8 +127,8 @@ export default function TaskDetailsModal({
         orientation="horizontal"
       />
       <Flex flexDir="column">
-      <Flex width="350px" h="0px" />
-        <Text textStyle="web.s1" color="text.light.secondary" mb="5px">
+        <Flex width="350px" h="0px" />
+        <Text textStyle="s2" mb="5px">
           Status
         </Text>
         <Flex gap="5px">
diff --git a/frontend/src/admin/pages/tasks/Main.tsx b/frontend/src/admin/pages/tasks/Main.tsx
index d59ea422..5e38ef77 100644
--- a/frontend/src/admin/pages/tasks/Main.tsx
+++ b/frontend/src/admin/pages/tasks/Main.tsx
@@ -14,7 +14,7 @@ import OrangeButton from "../../../ui/buttons/OrangeButton";
 import { TaskType } from "../../../types/enums";
 import { Task } from "../../../types/models";
 import { toTitleCase } from "../../../helpers/stringUtils";
-import { MagnifyingGlass } from "../../../ui/icons/ActionIcons";
+import { MagnifyingGlass, Plus } from "../../../ui/icons/ActionIcons";
 import AddTaskModal from "./components/AddTaskModal";
 
 export default function AdminTasksPage() {
@@ -46,7 +46,7 @@ export default function AdminTasksPage() {
         justifyContent="flex-start"
         alignItems="center"
         position="absolute"
-        top="18px"
+        top="21px"
         left="0px"
         zIndex={10}
         paddingX="20px"
@@ -55,14 +55,15 @@ export default function AdminTasksPage() {
         {[TaskType.REQUIRED, TaskType.OPTIONAL].map((type: TaskType) => (
           <Text
             key={type}
-            textStyle="web.b1"
-            fontWeight="700"
-            color={selectedTaskType === type ? "primary.700" : "#000000"}
+            textStyle="s1"
+            color={
+              selectedTaskType === type ? "brand.primaryDark" : "text.dark"
+            }
             cursor="pointer"
             onClick={() => setSelectedTaskType(type)}
             borderBottom="3px solid"
             borderColor={
-              selectedTaskType === type ? "primary.700" : "transparent"
+              selectedTaskType === type ? "brand.primaryDark" : "transparent"
             }
             px="12px"
             pb="10px"
@@ -76,7 +77,7 @@ export default function AdminTasksPage() {
         <Flex w="100%" justifyContent="space-between" gap="10px">
           <InputGroup>
             <InputLeftElement pb="7px" pl="3px">
-              <MagnifyingGlass color="text.light.secondary" size={14} />
+              <MagnifyingGlass color="text.medium" size={14} />
             </InputLeftElement>
             <Input
               placeholder="Search"
@@ -88,14 +89,14 @@ export default function AdminTasksPage() {
               paddingX="12px"
               paddingY="6px"
               border="1px"
-              borderColor="neutral.300"
+              borderColor="background.border"
               borderRadius="8px"
               fontFamily="Nunito"
               fontWeight="400"
               fontSize="12px"
-              color="text.light.primary"
+              color="text.dark"
               _focus={{
-                borderColor: "neutral.300",
+                borderColor: "background.border",
                 boxShadow: "none",
               }}
             />
@@ -105,6 +106,7 @@ export default function AdminTasksPage() {
             label="Add Task"
             action={() => setAddTask(true)}
             is_active={addTask}
+            icon={<Plus />}
           />
         </Flex>
 
diff --git a/frontend/src/admin/pages/tasks/components/AddTaskModal.tsx b/frontend/src/admin/pages/tasks/components/AddTaskModal.tsx
index 1f5fd3a2..f4f7efd2 100644
--- a/frontend/src/admin/pages/tasks/components/AddTaskModal.tsx
+++ b/frontend/src/admin/pages/tasks/components/AddTaskModal.tsx
@@ -16,6 +16,7 @@ import TextInput from "../../../../ui/inputs/TextInput";
 import TextAreaInput from "../../../../ui/inputs/TextAreaInput";
 import DateOptions from "../../../../ui/misc/DateOptions";
 import { isValidTask } from "../../../../helpers/taskHelpers";
+import useNotification from "../../../../hooks/useNotification";
 
 type AddTaskModalProps = {
   taskType: TaskType;
@@ -45,6 +46,7 @@ export default function AddTaskModal({
   const [error, setError] = useState<string>("");
 
   const [createTask, { loading: createTaskLoading }] = useMutation(CREATE_TASK);
+  const { sendNotification } = useNotification();
   async function handleSubmit() {
     const newTask: any = {
       tid: 0,
@@ -90,6 +92,7 @@ export default function AddTaskModal({
       });
       refetch();
       close();
+      sendNotification("Task created successfully");
     } catch (err: any) {
       setError(err.message);
     }
diff --git a/frontend/src/admin/pages/tasks/components/EditTaskModal.tsx b/frontend/src/admin/pages/tasks/components/EditTaskModal.tsx
index ee92075b..b3a314c3 100644
--- a/frontend/src/admin/pages/tasks/components/EditTaskModal.tsx
+++ b/frontend/src/admin/pages/tasks/components/EditTaskModal.tsx
@@ -17,6 +17,7 @@ import TextInput from "../../../../ui/inputs/TextInput";
 import DateOptions from "../../../../ui/misc/DateOptions";
 import NumberInput from "../../../../ui/inputs/NumberInput";
 import TextAreaInput from "../../../../ui/inputs/TextAreaInput";
+import useNotification from "../../../../hooks/useNotification";
 
 type EditTaskModalProps = {
   selected: Task;
@@ -67,7 +68,7 @@ export default function EditTaskModal({
   const [error, setError] = useState("");
 
   const [updateTask] = useMutation(UPDATE_TASK);
-
+  const { sendNotification } = useNotification();
   async function handleSubmit() {
     const updatedTask: any = {
       tid: selected.tid,
@@ -114,6 +115,7 @@ export default function EditTaskModal({
       });
       refetch();
       close();
+      sendNotification("Task updated successfully");
     } catch (err: any) {
       setError(err.message);
     }
diff --git a/frontend/src/admin/pages/tasks/components/TasksTable.tsx b/frontend/src/admin/pages/tasks/components/TasksTable.tsx
index f16405e7..e9933db3 100644
--- a/frontend/src/admin/pages/tasks/components/TasksTable.tsx
+++ b/frontend/src/admin/pages/tasks/components/TasksTable.tsx
@@ -14,6 +14,7 @@ import { formatDateV2 } from "../../../../helpers/formatDateTime";
 import { Marker, Trash } from "../../../../ui/icons/ActionIcons";
 import EditTaskModal from "./EditTaskModal";
 import { formatCurrency } from "../../../../helpers/formatCurrency";
+import useNotification from "../../../../hooks/useNotification";
 
 type TasksTableProps = {
   taskType: TaskType;
@@ -32,16 +33,17 @@ const TasksTable = ({
 }: TasksTableProps) => {
   const [editTask, setEditTask] = useState<Task | null>(null);
   const [deleteTask] = useMutation(DELETE_TASK);
-
+  const { sendNotification } = useNotification();
   async function handleDeleteTask(tid: number) {
     try {
       await deleteTask({
         variables: { tid },
       });
+      refetch();
+      sendNotification("Task deleted successfully");
     } catch (err: any) {
       console.log(err);
     }
-    refetch();
   }
 
   function getAssignedDaysString(
diff --git a/frontend/src/gql/announcementRequests.ts b/frontend/src/gql/announcementRequests.ts
index 82fb8986..d54b55b1 100644
--- a/frontend/src/gql/announcementRequests.ts
+++ b/frontend/src/gql/announcementRequests.ts
@@ -41,7 +41,12 @@ export const CREATE_ANNOUNCEMENT = gql`
     $message: String!
     $topic: String!
   ) {
-    createAnnouncement(priority: $priority, pids: $pids, message: $message, topic: $topic) {
+    createAnnouncement(
+      priority: $priority
+      pids: $pids
+      message: $message
+      topic: $topic
+    ) {
       aid
       date
       message
diff --git a/frontend/src/helpers/formatDateTime.ts b/frontend/src/helpers/formatDateTime.ts
index b4d50085..3414652f 100644
--- a/frontend/src/helpers/formatDateTime.ts
+++ b/frontend/src/helpers/formatDateTime.ts
@@ -3,58 +3,58 @@ import { format, parse } from "date-fns";
 // e.g. January 1, 2026
 export function formatDateV1(date: Date): string {
   return format(date, "MMMM d, yyyy");
-};
+}
 
 // e.g. 2:30 PM
 export function formatDateV2(date: Date): string {
   return format(date, "h:mm a");
-};
+}
 
 // e.g. Jan 1, 2:30 PM
 export function formatDateV3(date: Date): string {
   return format(date, "MMM d, h:mm a");
-};
+}
 
 // e.g. THURSDAY 1
 export function formatDateV4(date: Date): string {
   return format(date, "EEEE d").toUpperCase();
-};
+}
 
 // e.g. JANUARY 2025
 export function formatDateV5(date: Date): string {
   return format(date, "MMMM yyyy").toUpperCase();
-};
+}
 
 // e.g. Jan 1, 2026
 export function formatDateV6(date: Date): string {
   return format(date, "MMM d, yyyy");
-};
+}
 
 // e.g. Thursday, Jan 1
 export function formatDateV7(date: Date): string {
   return format(date, "EEEE, MMM d");
-};
+}
 
 // e.g. Thursday - January 1, 2026
 export function formatDateV8(date: Date): string {
   return format(date, "EEEE - MMM d, yyyy");
-};
+}
 
 export function formatDateInputValue(date: Date): string {
   return format(date, "yyyy-MM-dd");
-};
+}
 
 export function parseDateInputValue(date: string): Date {
   return parse(date, "yyyy-MM-dd", new Date());
-};
+}
 
 export function formatTimeInputValue(date: Date): string {
   return format(date, "HH:mm");
-};
+}
 
 export function parseTimeInputValue(time: string): Date {
   return parse(time, "HH:mm", new Date());
-};
+}
 
 export function combineDayAndTime(day: Date, time: Date): Date {
   return new Date(
@@ -66,4 +66,4 @@ export function combineDayAndTime(day: Date, time: Date): Date {
     time.getSeconds(),
     time.getMilliseconds()
   );
-};
+}
diff --git a/frontend/src/helpers/stringUtils.ts b/frontend/src/helpers/stringUtils.ts
index 0fa435c8..04a131e3 100644
--- a/frontend/src/helpers/stringUtils.ts
+++ b/frontend/src/helpers/stringUtils.ts
@@ -16,7 +16,7 @@ export const getRoomString = (announcement: Announcement) => {
     announcement.ReceivedAnnouncement?.map(
       (ra: ReceivedAnnouncement) => ra.participant?.room
     ).filter((room) => room !== undefined) ?? []
-  ).sort();
+  ).sort((a, b) => Number(a) - Number(b));
 
   if (announcement.ReceivedAnnouncement?.length === 1) {
     return `Room ${rooms[0]}`;
diff --git a/frontend/src/helpers/taskHelpers.ts b/frontend/src/helpers/taskHelpers.ts
index d39bfbd0..fd8bc280 100644
--- a/frontend/src/helpers/taskHelpers.ts
+++ b/frontend/src/helpers/taskHelpers.ts
@@ -14,11 +14,10 @@ import { combineDayAndTime } from "./formatDateTime";
 export function isAllDayTask(assignedTask: AssignedTask): boolean {
   const startDate = new Date(assignedTask.start_date);
   const endDate = new Date(assignedTask.end_date);
-  const allDay = (
+  const allDay =
     !isSameDay(startDate, endDate) ||
     (isEqual(startOfDay(startDate), startDate) &&
-      isEqual(endOfDay(endDate), endDate))
-  );
+      isEqual(endOfDay(endDate), endDate));
   return allDay;
 }
 
diff --git a/frontend/src/hooks/useLocalStorage.tsx b/frontend/src/hooks/useLocalStorage.tsx
deleted file mode 100644
index cc0e0dcd..00000000
--- a/frontend/src/hooks/useLocalStorage.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useState, useEffect } from "react";
-
-// TODO: Apply this hook for all local storage operations in this project
-export function useLocalStorage<T>(key: string, initialValue: T) {
-  const [value, setValue] = useState<T>(() => {
-    try {
-      const json = localStorage.getItem(key);
-      return json != null ? JSON.parse(json) : initialValue;
-    } catch {
-      return initialValue;
-    }
-  });
-
-  useEffect(() => {
-    localStorage.setItem(key, JSON.stringify(value));
-  }, [key, value]);
-
-  return [value, setValue] as const;
-}
diff --git a/frontend/src/hooks/useNotification.tsx b/frontend/src/hooks/useNotification.tsx
index be80fdad..41daedd5 100644
--- a/frontend/src/hooks/useNotification.tsx
+++ b/frontend/src/hooks/useNotification.tsx
@@ -1,18 +1,15 @@
 import { useToast } from "@chakra-ui/react";
 
-// TODO: Customize toast to match Figma design
-// https://www.figma.com/design/Ts9QxCIXFe4l9h6GKOLOIq/Admin-Application?node-id=5530-38022&t=d0D0hBm1Lo6YUL70-4
-// Apply this hook for all successful create / update / delete operations in this project
 export default function useNotification() {
   const toast = useToast();
 
   const sendNotification = (message: string) => {
     toast({
       description: message,
-      status: "success",
       position: "top",
       duration: 3000,
-      variant: "left-accent",
+      variant: "subtle",
+      status: "success",
     });
   };
 
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 896139f0..7b7cdfc7 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -31,6 +31,18 @@
   flex: 1 !important;
   height: 100% !important;
   min-height: 0 !important;
+  background-color: transparent !important;
+}
+
+.rbc-month-view,
+.rbc-time-view,
+.rbc-agenda-view,
+.rbc-time-content,
+.rbc-time-header,
+.rbc-header,
+.rbc-day-bg,
+.rbc-today {
+  background-color: transparent !important;
 }
 
 .rbc-toolbar {
@@ -39,7 +51,6 @@
 
 .rbc-time-view {
   border: none !important;
-  background-color: white;
   display: flex !important;
   flex-direction: column !important;
   flex: 1 !important;
@@ -48,7 +59,6 @@
 }
 
 .rbc-header {
-  background-color: white;
   font-weight: 600;
   border: none !important;
 }
@@ -58,7 +68,6 @@
 }
 
 .rbc-time-header {
-  background-color: white;
   flex-shrink: 0;
   margin: 0 !important;
   padding: 0 !important;
@@ -131,14 +140,13 @@
 }
 
 .rbc-time-header-gutter {
-  background-color: white;
   border-bottom: 1px solid var(--border-color);
   flex-shrink: 0;
   border: none !important;
 }
 
 .rbc-allday-cell {
-  background-color: white;
+  background-color: transparent !important;
   border: none !important;
   padding: 2px 0;
   min-height: 24px;
@@ -198,7 +206,7 @@
   position: sticky !important;
 
   z-index: 9 !important;
-  background-color: white !important;
+  background-color: transparent !important;
 }
 
 .rbc-time-column {
diff --git a/frontend/src/participant/ParticipantContext.tsx b/frontend/src/participant/ParticipantContext.tsx
index d84a68c6..19a9e302 100644
--- a/frontend/src/participant/ParticipantContext.tsx
+++ b/frontend/src/participant/ParticipantContext.tsx
@@ -26,12 +26,14 @@ interface ParticipantProviderProps {
   children: ReactNode;
 }
 
-export const ParticipantProvider: React.FC<ParticipantProviderProps> = ({ children }) => {
+export const ParticipantProvider: React.FC<ParticipantProviderProps> = ({
+  children,
+}) => {
   const [pid, setPid] = useState<number>(-1);
   const [room, setRoom] = useState<number>(0);
   const [balance, setBalance] = useState<number>(0);
   const [totalEarnings, setTotalEarnings] = useState<number>(0);
-  
+
   return (
     <ParticipantContext.Provider
       value={{
diff --git a/frontend/src/participant/ParticipantMenu.tsx b/frontend/src/participant/ParticipantMenu.tsx
index d6760b43..ba473077 100644
--- a/frontend/src/participant/ParticipantMenu.tsx
+++ b/frontend/src/participant/ParticipantMenu.tsx
@@ -41,13 +41,13 @@ function ExpandedParticipantMenu({
       alignItems="center"
       justifyContent="center"
       gap="10px"
-      bg="neutral.0"
+      bg="white"
       borderBottom="1px solid"
-      borderColor="neutral.300"
+      borderColor="background.border"
       flexDir="column"
       zIndex={100}
     >
-      <Text textStyle="mobile.h2" color="primary.700">
+      <Text textStyle="s1" color="brand.primaryDark">
         Room {room}
       </Text>
       <Tabs
@@ -64,18 +64,18 @@ function ExpandedParticipantMenu({
               padding="8px 16px"
               borderRadius="8px"
               justifyContent="center"
-              fontWeight={500}
-              fontSize="16px"
+              fontWeight={400}
+              fontSize="14px"
               fontFamily="Nunito"
-              color="#000000"
+              color="text.dark"
               onClick={() => {
                 navigate(page.route);
                 collapseMenu();
               }}
               _selected={{
-                fontWeight: 700,
-                color: "neutral.0",
-                bg: "secondary.700",
+                fontWeight: 650,
+                color: "white",
+                bg: "brand.secondaryDark",
               }}
             >
               {page.label}
@@ -83,13 +83,13 @@ function ExpandedParticipantMenu({
           ))}
         </TabList>
       </Tabs>
-      <Flex w="100%" h="1px" bg="neutral.300" />
+      <Flex w="100%" h="1px" bg="background.border" />
       <Text
-        textStyle="mobile.h2"
-        color="danger.900"
+        textStyle="s1"
+        color="indicate.brightRed"
         cursor="pointer"
         onClick={() => handleSignOut()}
-        mt="10px"
+        mt="8px"
       >
         Sign Out
       </Text>
@@ -102,7 +102,10 @@ type ParticipantMenuProps = {
   balance: number;
 };
 
-export default function ParticipantMenu({ room, balance }: ParticipantMenuProps) {
+export default function ParticipantMenu({
+  room,
+  balance,
+}: ParticipantMenuProps) {
   const pages = [
     { label: "Home", route: ROUTES.PARTICIPANTS_HOME_PAGE },
     { label: "Schedule", route: ROUTES.PARTICIPANTS_SCHEDULE_PAGE },
@@ -119,7 +122,7 @@ export default function ParticipantMenu({ room, balance }: ParticipantMenuProps)
     <Flex
       width="100%"
       height="60px"
-      bg="primary.100"
+      bg="brand.primaryLight"
       alignItems="center"
       justifyContent="center"
       position="absolute"
@@ -128,15 +131,29 @@ export default function ParticipantMenu({ room, balance }: ParticipantMenuProps)
       zIndex={100}
     >
       {!expandMenu && (
-        <Flex onClick={() => setExpandMenu(true)} cursor="pointer" position="absolute" left="20px" top="20px" zIndex={100}>
-          <Menu size={24} />
+        <Flex
+          onClick={() => setExpandMenu(true)}
+          cursor="pointer"
+          position="absolute"
+          left="20px"
+          top="24px"
+          zIndex={100}
+        >
+          <Menu size={18} />
         </Flex>
       )}
 
       {expandMenu && (
         <>
-          <Flex onClick={() => setExpandMenu(false)} cursor="pointer" position="absolute" left="20px" top="20px" zIndex={100}>
-            <Cross size={24} />
+          <Flex
+            onClick={() => setExpandMenu(false)}
+            cursor="pointer"
+            position="absolute"
+            left="21px"
+            top="26px"
+            zIndex={100}
+          >
+            <Cross size={16} />
           </Flex>
           <ExpandedParticipantMenu
             room={room}
@@ -147,11 +164,21 @@ export default function ParticipantMenu({ room, balance }: ParticipantMenuProps)
         </>
       )}
 
-      <Text textStyle="mobile.h1" pt="5px">{pages[currentPageIndex].label}</Text>
+      <Text textStyle="h4" pt="5px">
+        {pages[currentPageIndex].label}
+      </Text>
 
-      <Flex gap="7px" alignItems="center" justifyContent="center" position="absolute" right="20px" top="20px" zIndex={100}>
-        <MarillacCoin size={24} />
-        <Text textStyle="mobile.h2">{balance}</Text>
+      <Flex
+        gap="7px"
+        alignItems="center"
+        justifyContent="center"
+        position="absolute"
+        right="20px"
+        top="22px"
+        zIndex={100}
+      >
+        <MarillacCoin size={18} />
+        <Text textStyle="s1">{balance}</Text>
       </Flex>
     </Flex>
   );
diff --git a/frontend/src/participant/ParticipantRoute.tsx b/frontend/src/participant/ParticipantRoute.tsx
index 07d5cde6..d06042a7 100644
--- a/frontend/src/participant/ParticipantRoute.tsx
+++ b/frontend/src/participant/ParticipantRoute.tsx
@@ -26,13 +26,20 @@ export default function ParticipantRoute({ children }: ParticipantRouteProps) {
 
   const [getParticipantByPid] = useLazyQuery(GET_PARTICIPANT_BY_PID, {
     onCompleted: (data) => {
-      if (!data || !data.getParticipantByPid || !data.getParticipantByPid.room || !data.getParticipantByPid.balance) {
+      if (
+        !data ||
+        !data.getParticipantByPid ||
+        !data.getParticipantByPid.room ||
+        !data.getParticipantByPid.balance
+      ) {
         setError("participant data is missing");
         return;
       }
       participantContext.setRoom(data.getParticipantByPid.room);
       participantContext.setBalance(data.getParticipantByPid.balance);
-      participantContext.setTotalEarnings(data.getParticipantByPid.total_earnings);
+      participantContext.setTotalEarnings(
+        data.getParticipantByPid.total_earnings
+      );
     },
     onError: (err: Error) => {
       setError(err.message);
@@ -71,14 +78,18 @@ export default function ParticipantRoute({ children }: ParticipantRouteProps) {
   }
 
   return (
-    <Flex
-      w="100vw"
-      h="100vh"
-      alignItems="flex-start"
-      justifyContent="center"
-    >
-      <Flex maxWidth="500px" width="100%" height="fit-content" flexDir="column" position="relative">
-        <ParticipantMenu room={participantContext.room} balance={participantContext.balance} />
+    <Flex w="100vw" h="100vh" alignItems="flex-start" justifyContent="center">
+      <Flex
+        maxWidth="500px"
+        width="100%"
+        height="fit-content"
+        flexDir="column"
+        position="relative"
+      >
+        <ParticipantMenu
+          room={participantContext.room}
+          balance={participantContext.balance}
+        />
         <Flex
           flexDir="column"
           mt="60px"
@@ -87,8 +98,15 @@ export default function ParticipantRoute({ children }: ParticipantRouteProps) {
           padding="20px"
           overflow="scroll"
           gap="8px"
+          bg="background.participant"
         >
-          {error ? <ErrorScreen message={error} /> : (authorizing || populatingContext) ? <LoadingScreen /> : children}
+          {error ? (
+            <ErrorScreen message={error} />
+          ) : authorizing || populatingContext ? (
+            <LoadingScreen />
+          ) : (
+            children
+          )}
         </Flex>
       </Flex>
     </Flex>
diff --git a/frontend/src/participant/pages/announcements/Main.tsx b/frontend/src/participant/pages/announcements/Main.tsx
index 61eabd1c..828054a8 100644
--- a/frontend/src/participant/pages/announcements/Main.tsx
+++ b/frontend/src/participant/pages/announcements/Main.tsx
@@ -19,7 +19,7 @@ export default function ParticipantsAnnouncementsPage() {
 
   const [filter, setFilter] = useState(0);
   const getFilterVariables = () => {
-    switch(filter){
+    switch (filter) {
       case 0: // ALL
         return { pid: participantId };
       case 1: // UNREAD
@@ -33,33 +33,42 @@ export default function ParticipantsAnnouncementsPage() {
     }
   };
 
-  const { data, loading, error, refetch } = useQuery(GET_RECEIVED_ANNOUNCEMENTS, {
-    variables : getFilterVariables(),
-    skip: !participantId,
-    fetchPolicy: "network-only",
-    nextFetchPolicy: "cache-first",
-    notifyOnNetworkStatusChange: true,
-  });
+  const { data, loading, error, refetch } = useQuery(
+    GET_RECEIVED_ANNOUNCEMENTS,
+    {
+      variables: getFilterVariables(),
+      skip: !participantId,
+      fetchPolicy: "network-only",
+      nextFetchPolicy: "cache-first",
+      notifyOnNetworkStatusChange: true,
+    }
+  );
 
   if (loading) return <LoadingScreen />;
   if (error) return <ErrorScreen message={error.message} />;
 
   if (expandedView && selected) {
     return (
-      <AnnouncementsExpandedView 
-        announcement={selected} 
+      <AnnouncementsExpandedView
+        announcement={selected}
         onBack={() => {
           refetch();
           setExpandedView(false);
           setSelected(null);
         }}
       />
-    )
+    );
   }
 
   return (
     <>
-      <Flex w="100%" alignItems="center" justifyContent="center" gap="8px" mb="8px">
+      <Flex
+        w="100%"
+        alignItems="center"
+        justifyContent="center"
+        gap="8px"
+        mb="8px"
+      >
         <GreenOutlineButton
           label="All"
           action={() => setFilter(0)}
@@ -81,21 +90,23 @@ export default function ParticipantsAnnouncementsPage() {
           is_active={filter === 3}
         />
       </Flex>
-      
-      {data?.getReceivedAnnouncements.map((announcement: ReceivedAnnouncement, index: number) => {
-        return (
-          <Flex
-            key={index}
-            cursor="pointer"
-            onClick={() => {
-              setSelected(announcement);
-              setExpandedView(true);
-            }}
-          >
-            <ParticipantAnnouncementCard announcement={announcement} />
-          </Flex>
-        );
-      })}
+
+      {data?.getReceivedAnnouncements.map(
+        (announcement: ReceivedAnnouncement, index: number) => {
+          return (
+            <Flex
+              key={index}
+              cursor="pointer"
+              onClick={() => {
+                setSelected(announcement);
+                setExpandedView(true);
+              }}
+            >
+              <ParticipantAnnouncementCard announcement={announcement} />
+            </Flex>
+          );
+        }
+      )}
     </>
   );
 }
diff --git a/frontend/src/participant/pages/announcements/components/AnnouncementsExpandedView.tsx b/frontend/src/participant/pages/announcements/components/AnnouncementsExpandedView.tsx
index 26b3fa3c..0473b2d7 100644
--- a/frontend/src/participant/pages/announcements/components/AnnouncementsExpandedView.tsx
+++ b/frontend/src/participant/pages/announcements/components/AnnouncementsExpandedView.tsx
@@ -2,7 +2,11 @@ import { Divider, Flex, Text } from "@chakra-ui/react";
 import React, { useContext, useEffect, useRef, useState } from "react";
 import { useMutation } from "@apollo/client";
 import { formatDateV3 } from "../../../../helpers/formatDateTime";
-import { ExclamationMark, Dot, Mail } from "../../../../ui/icons/NotificationIcons";
+import {
+  ExclamationMark,
+  Dot,
+  Mail,
+} from "../../../../ui/icons/NotificationIcons";
 import { Pin, Pinned } from "../../../../ui/icons/ActionIcons";
 import GreenOutlineButton from "../../../../ui/buttons/GreenOutlineButton";
 import { UPDATE_RECEIVED_ANNOUNCEMENT } from "../../../../gql/receivedAnnouncementRequests";
@@ -31,7 +35,7 @@ export default function AnnouncementsExpandedView({
 
   const handleUpdatePin = async (pin: boolean) => {
     if (pid === -1) {
-      setError("Unable to update pin status, something went wrong.")
+      setError("Unable to update pin status, something went wrong.");
     }
 
     try {
@@ -47,10 +51,10 @@ export default function AnnouncementsExpandedView({
       setError(err.message);
     }
   };
-  
+
   const handleMarkAsUnread = async () => {
     if (pid === -1) {
-      setError("Unable to update read status, something went wrong.")
+      setError("Unable to update read status, something went wrong.");
     }
 
     try {
@@ -64,7 +68,7 @@ export default function AnnouncementsExpandedView({
         });
         setRead(false);
       }
-      onBack(); 
+      onBack();
     } catch (err: any) {
       setError(err.message);
     }
@@ -72,9 +76,9 @@ export default function AnnouncementsExpandedView({
 
   const handleGoBack = async () => {
     if (pid === -1) {
-      setError("Unable to mark message as read, something went wrong.")
+      setError("Unable to mark message as read, something went wrong.");
     }
- 
+
     try {
       if (!read) {
         await updatePinRead({
@@ -86,31 +90,37 @@ export default function AnnouncementsExpandedView({
         });
         setRead(true);
       }
-      onBack(); 
+      onBack();
     } catch (err: any) {
       setError(err.message);
     }
-  }
+  };
 
   const details: Announcement | undefined = announcement.announcement;
-  if (!details || (details && (!details.topic || !details.date || !details.message || !details.priority))) {
-    return <ErrorScreen message="Unable to load announcement details, something went wrong." />
+  if (
+    !details ||
+    (details &&
+      (!details.topic ||
+        !details.date ||
+        !details.message ||
+        !details.priority))
+  ) {
+    return (
+      <ErrorScreen message="Unable to load announcement details, something went wrong." />
+    );
   }
 
   return (
     <>
       <Flex alignItems="center" justify="space-between">
-        <Text textStyle="mobile.h2" color="primary.700">
+        <Text textStyle="h4" color="brand.primaryDark">
           {toTitleCase(details.topic)}
         </Text>
-        <UnderlineButton
-          label="Go Back"
-          action={handleGoBack}
-        />
+        <UnderlineButton label="Go Back" action={handleGoBack} />
       </Flex>
 
       <Flex alignItems="center" justify="space-between" marginBottom="4px">
-        <Text textStyle="mobile.b2" color="text.light.secondary">
+        <Text textStyle="b1" color="text.medium">
           {formatDateV3(new Date(details.date))}
         </Text>
 
@@ -118,7 +128,7 @@ export default function AnnouncementsExpandedView({
           {details.priority !== Priority.NORMAL && (
             <Flex gap="4px" alignItems="center">
               <ExclamationMark size={12} />
-              <Text textStyle="mobile.b2" color="danger.800">
+              <Text textStyle="b1" color="indicate.brightRed">
                 Priority
               </Text>
             </Flex>
@@ -127,7 +137,7 @@ export default function AnnouncementsExpandedView({
           {pinned && (
             <Flex gap="4px" alignItems="center">
               <Pinned size={12} />
-              <Text textStyle="mobile.b2" color="secondary.700">
+              <Text textStyle="b1" color="brand.secondaryDark">
                 Pinned
               </Text>
             </Flex>
@@ -135,12 +145,14 @@ export default function AnnouncementsExpandedView({
         </Flex>
       </Flex>
 
-      <Divider borderColor="neutral.300" />
+      <Divider borderColor="background.border" />
 
-      <Text textStyle="mobile.b1" my="8px">{details.message}</Text>
+      <Text textStyle="b1" my="8px">
+        {details.message}
+      </Text>
 
       {error && (
-        <Text textStyle="mobile.b1" color="danger.800">
+        <Text textStyle="b1" color="danger.800">
           this is an error message
         </Text>
       )}
@@ -156,9 +168,15 @@ export default function AnnouncementsExpandedView({
           label={pinned ? "Unpin" : "Pin"}
           action={() => handleUpdatePin(!pinned)}
           is_active={false}
-          icon={pinned ? <Pinned size={12} color="currentColor" /> : <Pin size={12} color="currentColor" />}
+          icon={
+            pinned ? (
+              <Pinned size={12} color="currentColor" />
+            ) : (
+              <Pin size={12} color="currentColor" />
+            )
+          }
         />
       </Flex>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/participant/pages/announcements/components/ParticipantAnnouncementCard.tsx b/frontend/src/participant/pages/announcements/components/ParticipantAnnouncementCard.tsx
index b374ae85..a46af20f 100644
--- a/frontend/src/participant/pages/announcements/components/ParticipantAnnouncementCard.tsx
+++ b/frontend/src/participant/pages/announcements/components/ParticipantAnnouncementCard.tsx
@@ -11,53 +11,62 @@ type ParticipantAnnouncementCardProps = {
   announcement: ReceivedAnnouncement;
 };
 
-export default function ParticipantAnnouncementCard({ announcement }: ParticipantAnnouncementCardProps) {
+export default function ParticipantAnnouncementCard({
+  announcement,
+}: ParticipantAnnouncementCardProps) {
   const details: Announcement | undefined = announcement.announcement;
-  if (!details || (details && (!details.topic || !details.date || !details.message || !details.priority))) {
+  if (
+    !details ||
+    (details &&
+      (!details.topic ||
+        !details.date ||
+        !details.message ||
+        !details.priority))
+  ) {
     return (
       <Flex
         w="100%"
         borderTop="1px solid"
-        borderColor="neutral.300"
+        borderColor="background.border"
         paddingTop="12px"
         paddingLeft="25px"
         flexDir="column"
         position="relative"
       >
-        <Text textStyle="web.b2" color="#E30000" textAlign="center">
+        <Text textStyle="web.b1" color="indicate.brightRed" textAlign="center">
           Unable to load announcement details.
         </Text>
       </Flex>
-    )
+    );
   }
 
   return (
     <Flex
       w="100%"
       borderTop="1px solid"
-      borderColor="neutral.300"
+      borderColor="background.border"
       paddingTop="12px"
       flexDir="column"
     >
       <Flex alignItems="center" justifyContent="space-between">
         <Flex alignItems="baseline" gap="10px">
-          {!announcement.read && <Dot size={12} />}
-          <Text textStyle="mobile.b0">{toTitleCase(details.topic)}</Text>
-          <Text textStyle="mobile.b2" color="text.light.secondary">
+          {!announcement.read && <Dot size={10} />}
+          <Text textStyle="s1">{toTitleCase(details.topic)}</Text>
+          <Text textStyle="b2" color="text.medium">
             {formatDateV3(new Date(details.date))}
           </Text>
         </Flex>
 
         <Flex gap="8px">
-          {(details.priority !== Priority.NORMAL) && (
-            <ExclamationMark size={14} />
+          {details.priority !== Priority.NORMAL && (
+            <ExclamationMark size={12} />
           )}
-          {announcement.pinned && <Pin size={14} color="secondary.700" />}
+          {announcement.pinned && <Pin size={12} color="brand.secondaryDark" />}
         </Flex>
       </Flex>
 
       <Text
-        textStyle="mobile.b1"
+        textStyle="b1"
         marginTop="5px"
         minH="25px"
         maxH="45px"
@@ -67,4 +76,4 @@ export default function ParticipantAnnouncementCard({ announcement }: Participan
       </Text>
     </Flex>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/participant/pages/home/Main.tsx b/frontend/src/participant/pages/home/Main.tsx
index 4edbcddd..bdb01ea1 100644
--- a/frontend/src/participant/pages/home/Main.tsx
+++ b/frontend/src/participant/pages/home/Main.tsx
@@ -10,20 +10,23 @@ import AnnouncementWidget from "./components/AnnouncementWidget";
 
 export default function ParticipantsHomePage() {
   const { pid } = useContext(ParticipantContext);
-  if (pid === -1) return <ErrorScreen message="Something is wrong. Please try again later." />;
+  if (pid === -1)
+    return (
+      <ErrorScreen message="Something is wrong. Please try again later." />
+    );
 
   return (
     <>
-      <Flex w="100%" flexDir="column" mb="16px" gap="4px">
-        <Text color="primary.700" textStyle="mobile.h1">
+      <Flex w="100%" flexDir="column" mb="12px" gap="4px">
+        <Text color="brand.primaryDark" textStyle="h2">
           Welcome to Marillac Place
         </Text>
-        <Text color="text.light.secondary" textStyle="mobile.h3">
+        <Text color="text.medium" textStyle="h4">
           {formatDateV8(new Date())}
         </Text>
       </Flex>
-      
-      <Flex w="100%" flexDir="column" gap="16px">
+
+      <Flex w="100%" flexDir="column" gap="8px">
         <TasksCompletedWidget pid={pid} />
         <NewAchievedBadgesWidget pid={pid} />
         <TodoListWidget pid={pid} />
diff --git a/frontend/src/participant/pages/home/components/AnnouncementWidget.tsx b/frontend/src/participant/pages/home/components/AnnouncementWidget.tsx
index 95cc40d4..9ffaccc5 100644
--- a/frontend/src/participant/pages/home/components/AnnouncementWidget.tsx
+++ b/frontend/src/participant/pages/home/components/AnnouncementWidget.tsx
@@ -12,7 +12,7 @@ import { ReceivedAnnouncement } from "../../../../types/models";
 
 type AnnouncementWidgetProps = {
   pid: number;
-}
+};
 
 export default function AnnouncementWidget({ pid }: AnnouncementWidgetProps) {
   const navigate = useNavigate();
@@ -28,29 +28,45 @@ export default function AnnouncementWidget({ pid }: AnnouncementWidgetProps) {
   const announcements = announcementData?.getReceivedAnnouncements ?? [];
 
   return (
-    <WidgetContainer 
+    <WidgetContainer
       width="100%"
       height="fit-content"
-      paddingX="18px"
-      paddingY="14px"
+      paddingX="16px"
       loading={announcementLoading}
       error={announcementError?.message}
     >
-      <Flex w="100%" justifyContent="space-between" alignItems="center" mb={announcements.length > 0 ? "8px" : "0px"}>
-        <Text textStyle="mobile.b0">Recent Announcements</Text>
+      <Flex
+        w="100%"
+        justifyContent="space-between"
+        alignItems="center"
+        mb={announcements.length > 0 ? "8px" : "0px"}
+      >
+        <Text textStyle="s1">Recent Announcements</Text>
         <UnderlineButton
           label="View All"
           action={() => navigate(PARTICIPANTS_ANNOUNCEMENTS_PAGE)}
         />
       </Flex>
 
-      {announcements.slice(0, 5).map((announcement: ReceivedAnnouncement, index: number) => (
-        <Flex key={index} width="100%" flexDir="column">
-          {index > 0 && <Divider orientation="horizontal" borderColor="neutral.300" my="8px" />}
-          <Text textStyle="mobile.b1" mb="2px">{announcement.announcement?.message}</Text>
-          <Text textStyle="mobile.b2" color="text.light.secondary">{formatDateV3(new Date(announcement.announcement?.date ?? ""))}</Text>
-        </Flex>
-      ))}
+      {announcements
+        .slice(0, 5)
+        .map((announcement: ReceivedAnnouncement, index: number) => (
+          <Flex key={index} width="100%" flexDir="column">
+            {index > 0 && (
+              <Divider
+                orientation="horizontal"
+                borderColor="background.border"
+                my="8px"
+              />
+            )}
+            <Text textStyle="b1" mb="2px">
+              {announcement.announcement?.message}
+            </Text>
+            <Text textStyle="b2" color="text.medium">
+              {formatDateV3(new Date(announcement.announcement?.date ?? ""))}
+            </Text>
+          </Flex>
+        ))}
     </WidgetContainer>
   );
 }
diff --git a/frontend/src/participant/pages/home/components/BadgeRow.tsx b/frontend/src/participant/pages/home/components/BadgeRow.tsx
deleted file mode 100644
index b4ec878c..00000000
--- a/frontend/src/participant/pages/home/components/BadgeRow.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import React from "react";
-import { Box, Flex, Text, Button } from "@chakra-ui/react";
-import { Level, Icon } from "../../../../types/enums";
-import Badge from "../../../../ui/misc/BadgeProgress";
-
-interface BadgeRowProps {
-  messageText: string;
-  title: string;
-  subtitle: string;
-  badge: {
-    icon: Icon;
-    level: Level;
-    percentageComplete?: number;
-  };
-  isLast?: boolean;
-  showButton?: boolean;
-  onProgressClick?: () => void;
-}
-
-const BadgeRow: React.FC<BadgeRowProps> = ({
-  messageText,
-  title,
-  subtitle,
-  badge,
-  isLast = false,
-  showButton = false,
-  onProgressClick,
-}) => {
-  return (
-    <Box>
-      {/* Message text with button */}
-      <Flex justify="space-between" align="center" mb="8px">
-        <Text textStyle="mobile.h3" color="text.light.primary" fontWeight="600">
-          {messageText}
-        </Text>
-        {showButton && onProgressClick && (
-          <Button
-            variant="link"
-            color="primary.700"
-            textStyle="mobile.h3"
-            fontWeight="600"
-            textDecoration="underline"
-            onClick={onProgressClick}
-            _hover={{
-              color: "primary.700",
-              opacity: 0.8,
-            }}
-          >
-            Progress
-          </Button>
-        )}
-      </Flex>
-
-      {/* Badge and content row */}
-      <Flex align="center" gap="12px" mb={isLast ? "0" : "16px"}>
-        <Badge
-          icon={badge.icon}
-          level={badge.level}
-          percentageComplete={badge.percentageComplete ?? 100}
-        />
-        <Box flex="1">
-          <Text
-            textStyle="mobile.h3"
-            color="text.light.primary"
-            fontWeight="600"
-            mb="2px"
-          >
-            {title}
-          </Text>
-          <Text
-            textStyle="mobile.b1"
-            color="text.light.secondary"
-            lineHeight="1.3"
-          >
-            {subtitle}
-          </Text>
-        </Box>
-      </Flex>
-    </Box>
-  );
-};
-
-export default BadgeRow;
diff --git a/frontend/src/participant/pages/home/components/NewAchievedBadgesWidget.tsx b/frontend/src/participant/pages/home/components/NewAchievedBadgesWidget.tsx
index 0b20bef7..4e0d5bd5 100644
--- a/frontend/src/participant/pages/home/components/NewAchievedBadgesWidget.tsx
+++ b/frontend/src/participant/pages/home/components/NewAchievedBadgesWidget.tsx
@@ -4,43 +4,68 @@ import { useMutation } from "@apollo/client";
 import { Divider, Flex, Text } from "@chakra-ui/react";
 import WidgetContainer from "../../../../ui/containers/WidgetContainer";
 import { FETCH_NEW_ACHIEVED_BADGE_LEVELS } from "../../../../gql/achievedBadgeLevelRequests";
-import { AchievedBadgeLevel, EarnedCustomBadge } from "../../../../types/models";
-import BadgeLevelRow from "../../../../ui/misc/BadgeLevelRow";
+import {
+  AchievedBadgeLevel,
+  EarnedCustomBadge,
+} from "../../../../types/models";
+import BadgeLevelRow from "../../../../ui/badge/BadgeLevelRow";
 import { PARTICIPANTS_PROGRESS_PAGE } from "../../../../constants/routes";
 import UnderlineButton from "../../../../ui/buttons/UnderlineButton";
 import { FETCH_NEW_EARNED_CUSTOM_BADGES } from "../../../../gql/earnedCustomBadgeRequests";
-import CustomBadgeRow from "../../../../ui/misc/CustomBadgeRow";
+import CustomBadgeRow from "../../../../ui/badge/CustomBadgeRow";
 
 type NewAchievedBadgesWidgetProps = {
   pid: number;
-}
+};
 
-export default function NewAchievedBadgesWidget({ pid }: NewAchievedBadgesWidgetProps) {
+export default function NewAchievedBadgesWidget({
+  pid,
+}: NewAchievedBadgesWidgetProps) {
   const navigate = useNavigate();
 
-  const [fetchNewEarnedCustomBadges, { data: earnedCustomBadgeData, loading: earnedCustomBadgeLoading, error: earnedCustomBadgeError}] = useMutation(FETCH_NEW_EARNED_CUSTOM_BADGES);
-  const [fetchNewAchievedBadgeLevels, { data: achievedBadgeData, loading: achievedBadgeLoading, error: achievedBadgeError}] = useMutation(FETCH_NEW_ACHIEVED_BADGE_LEVELS);
+  const [
+    fetchNewEarnedCustomBadges,
+    {
+      data: earnedCustomBadgeData,
+      loading: earnedCustomBadgeLoading,
+      error: earnedCustomBadgeError,
+    },
+  ] = useMutation(FETCH_NEW_EARNED_CUSTOM_BADGES);
+  const [
+    fetchNewAchievedBadgeLevels,
+    {
+      data: achievedBadgeData,
+      loading: achievedBadgeLoading,
+      error: achievedBadgeError,
+    },
+  ] = useMutation(FETCH_NEW_ACHIEVED_BADGE_LEVELS);
   useEffect(() => {
     fetchNewEarnedCustomBadges({ variables: { pid } });
     fetchNewAchievedBadgeLevels({ variables: { pid } });
   }, [pid]);
 
-  
-  const newEarnedCustomBadges = earnedCustomBadgeData?.fetchNewEarnedCustomBadges || [];
-  const newAchievedBadges = achievedBadgeData?.fetchNewAchievedBadgeLevels || [];
-  if (newAchievedBadges.length + newEarnedCustomBadges.length === 0) return null;
+  const newEarnedCustomBadges =
+    earnedCustomBadgeData?.fetchNewEarnedCustomBadges || [];
+  const newAchievedBadges =
+    achievedBadgeData?.fetchNewAchievedBadgeLevels || [];
+  if (newAchievedBadges.length + newEarnedCustomBadges.length === 0)
+    return null;
 
   return (
-    <WidgetContainer 
-      width="100%" 
-      height="fit-content" 
-      paddingX="18px" 
-      paddingY="14px"
+    <WidgetContainer
+      width="100%"
+      height="fit-content"
+      paddingX="16px"
       loading={achievedBadgeLoading}
       error={achievedBadgeError?.message}
     >
-      <Flex w="100%" justifyContent="space-between" alignItems="center" mb="8px">
-        <Text textStyle="mobile.b0">New Badges Achieved!</Text>
+      <Flex
+        w="100%"
+        justifyContent="space-between"
+        alignItems="center"
+        mb="8px"
+      >
+        <Text textStyle="s1">New Badges Achieved!</Text>
         <UnderlineButton
           label="Progress"
           action={() => navigate(PARTICIPANTS_PROGRESS_PAGE)}
@@ -49,10 +74,12 @@ export default function NewAchievedBadgesWidget({ pid }: NewAchievedBadgesWidget
       {newEarnedCustomBadges.map((badge: EarnedCustomBadge, index: number) => (
         <CustomBadgeRow key={index} badge={badge} index={index} />
       ))}
-      {newEarnedCustomBadges.length > 0 && newAchievedBadges.length > 0 && <Divider orientation="horizontal" color='neutral.300' mt="8px" />}
+      {newEarnedCustomBadges.length > 0 && newAchievedBadges.length > 0 && (
+        <Divider orientation="horizontal" color="background.border" mt="8px" />
+      )}
       {newAchievedBadges.map((badge: AchievedBadgeLevel, index: number) => (
         <BadgeLevelRow key={index} badge={badge} achieved index={index} />
       ))}
     </WidgetContainer>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/participant/pages/home/components/TasksCompletedWidget.tsx b/frontend/src/participant/pages/home/components/TasksCompletedWidget.tsx
index a017ad4c..a7886535 100644
--- a/frontend/src/participant/pages/home/components/TasksCompletedWidget.tsx
+++ b/frontend/src/participant/pages/home/components/TasksCompletedWidget.tsx
@@ -10,36 +10,47 @@ import { HAS_COMPLETED_ALL_REQUIRED_TASKS } from "../../../../gql/assignedTaskRe
 
 type TasksCompletedWidgetProps = {
   pid: number;
-}
+};
 
-export default function TasksCompletedWidget({ pid }: TasksCompletedWidgetProps) {
+export default function TasksCompletedWidget({
+  pid,
+}: TasksCompletedWidgetProps) {
   const navigate = useNavigate();
-  const { data: completedAllTasksData, loading: completedAllTasksLoading, error: completedAllTasksError} = useQuery(HAS_COMPLETED_ALL_REQUIRED_TASKS, {
+  const {
+    data: completedAllTasksData,
+    loading: completedAllTasksLoading,
+    error: completedAllTasksError,
+  } = useQuery(HAS_COMPLETED_ALL_REQUIRED_TASKS, {
     variables: { pid },
   });
-  const hasCompletedAllTasks = completedAllTasksData?.hasCompletedAllRequiredTasks || false;
-  if (hasCompletedAllTasks) return null;
+  const hasCompletedAllTasks =
+    completedAllTasksData?.hasCompletedAllRequiredTasks || false;
+  if (!hasCompletedAllTasks) return null;
 
   return (
-    <WidgetContainer 
-      width="100%" 
-      height="fit-content" 
-      paddingX="18px" 
-      paddingY="14px"
+    <WidgetContainer
+      width="100%"
+      height="fit-content"
+      paddingX="16px"
       loading={completedAllTasksLoading}
       error={completedAllTasksError?.message}
     >
-      <Flex w="100%" justifyContent="space-between" alignItems="center" mb="8px">
-        <Text textStyle="mobile.b0">Mandatory Tasks Completed!</Text>
+      <Flex
+        w="100%"
+        justifyContent="space-between"
+        alignItems="center"
+        mb="8px"
+      >
+        <Text textStyle="s1">Mandatory Tasks Completed!</Text>
         <UnderlineButton
           label="Tasks"
           action={() => navigate(PARTICIPANTS_SCHEDULE_PAGE)}
         />
       </Flex>
 
-      <Flex w="100%" alignItems="center" gap="16px">
-        <Trophy size={28} />
-        <Text textStyle="mobile.b1" flex="1">
+      <Flex w="100%" alignItems="center" gap="12px">
+        <Trophy size={24} />
+        <Text textStyle="b1" flex="1">
           You&apos;ve completed all your mandatory tasks for the week.
         </Text>
       </Flex>
diff --git a/frontend/src/participant/pages/home/components/TodoListWidget.tsx b/frontend/src/participant/pages/home/components/TodoListWidget.tsx
index 5feed259..d634ea9d 100644
--- a/frontend/src/participant/pages/home/components/TodoListWidget.tsx
+++ b/frontend/src/participant/pages/home/components/TodoListWidget.tsx
@@ -14,58 +14,81 @@ import { Comment } from "../../../../ui/icons/ActionIcons";
 import UnderlineButton from "../../../../ui/buttons/UnderlineButton";
 import { ScheduleView } from "../../../../constants/views";
 import { AssignedTask } from "../../../../types/models";
-import { Assigned, Excused, Complete, Incomplete } from "../../../../ui/icons/StatusIcons";
+import {
+  Assigned,
+  Excused,
+  Complete,
+  Incomplete,
+} from "../../../../ui/icons/StatusIcons";
 
 type TodoListWidgetProps = {
   pid: number;
-}
+};
 
 const TodoListWidget = ({ pid }: TodoListWidgetProps) => {
   const navigate = useNavigate();
 
-  const { data, loading, error } = useQuery(
-    GET_ASSIGNED_TASKS_FOR_TODAY, {
-      variables: { pid },
-    }
-  );
+  const { data, loading, error } = useQuery(GET_ASSIGNED_TASKS_FOR_TODAY, {
+    variables: { pid },
+  });
 
   const tasks = data?.getAssignedTasksForToday ?? [];
 
   return (
-    <WidgetContainer 
+    <WidgetContainer
       width="100%"
       height="fit-content"
-      paddingX="18px"
-      paddingY="14px"
+      paddingX="16px"
       loading={loading}
       error={error?.message}
     >
-      <Flex w="100%" justifyContent="space-between" alignItems="center" mb={tasks.length > 0 ? "8px" : "0px"}>
-        <Text textStyle="mobile.b0">Todo List</Text>
+      <Flex
+        w="100%"
+        justifyContent="space-between"
+        alignItems="center"
+        mb={tasks.length > 0 ? "8px" : "0px"}
+      >
+        <Text textStyle="s1">Todo List</Text>
         <UnderlineButton
           label="Schedule"
-          action={() => navigate(PARTICIPANTS_SCHEDULE_PAGE, { state: { view: ScheduleView.CALENDAR } })}
+          action={() =>
+            navigate(PARTICIPANTS_SCHEDULE_PAGE, {
+              state: { view: ScheduleView.CALENDAR },
+            })
+          }
         />
       </Flex>
       <Flex flexDir="column" gap="8px">
         {tasks.map((task: AssignedTask, index: number) => {
-          const noSpecificTime = (
-            isEqual(startOfDay(new Date(task.start_date)), new Date(task.start_date)) &&
-            isEqual(endOfDay(new Date(task.end_date)), new Date(task.end_date))
-          );
+          const noSpecificTime =
+            isEqual(
+              startOfDay(new Date(task.start_date)),
+              new Date(task.start_date)
+            ) &&
+            isEqual(endOfDay(new Date(task.end_date)), new Date(task.end_date));
           return (
-            <Flex key={index} justifyContent="space-between" alignItems="center">
+            <Flex
+              key={index}
+              justifyContent="space-between"
+              alignItems="center"
+            >
               <Flex alignItems="center" gap="12px">
                 {task.status === TaskStatus.ASSIGNED && <Assigned />}
                 {task.status === TaskStatus.COMPLETE && <Complete />}
                 {task.status === TaskStatus.EXCUSED && <Excused />}
                 {task.status === TaskStatus.INCOMPLETE && <Incomplete />}
-                <Text textStyle="mobile.b1">{task.name}</Text>
+                <Text textStyle="b1">{task.name}</Text>
                 {task.comment && <Comment size={12} />}
               </Flex>
-              <Text textStyle="mobile.b2" color="text.light.secondary">{noSpecificTime ? "Anytime" : formatDateV2(new Date(task.start_date)) + " - " + formatDateV2(new Date(task.end_date))}</Text>
+              <Text textStyle="b2" color="text.medium">
+                {noSpecificTime
+                  ? "Anytime"
+                  : formatDateV2(new Date(task.start_date)) +
+                    " - " +
+                    formatDateV2(new Date(task.end_date))}
+              </Text>
             </Flex>
-          )
+          );
         })}
       </Flex>
     </WidgetContainer>
diff --git a/frontend/src/participant/pages/login/Main.tsx b/frontend/src/participant/pages/login/Main.tsx
index 381ef132..9cd0f4d2 100644
--- a/frontend/src/participant/pages/login/Main.tsx
+++ b/frontend/src/participant/pages/login/Main.tsx
@@ -69,7 +69,7 @@ export default function ParticipantsLoginPage() {
       h="100vh"
       alignItems="flex-start"
       justifyContent="center"
-      bg="primary.100"
+      bg="brand.primaryLight"
     >
       <Flex
         width="350px"
@@ -89,10 +89,8 @@ export default function ParticipantsLoginPage() {
           paddingY="25px"
         >
           <Flex flexDir="column">
-            <Text textStyle="mobile.h1">Sign in</Text>
-            <Text textStyle="mobile.b1">
-              Please enter your login information.
-            </Text>
+            <Text textStyle="h2">Sign in</Text>
+            <Text textStyle="b1">Please enter your login information.</Text>
           </Flex>
 
           <Flex flexDir="column" gap="10px" mt="15px" mb="10px">
@@ -112,12 +110,17 @@ export default function ParticipantsLoginPage() {
           </Flex>
 
           {error && (
-            <Text textStyle="mobile.b1" fontWeight="500" color="#E30000" mt="5px">
+            <Text
+              textStyle="b1"
+              fontWeight="500"
+              color="indicate.brightRed"
+              mt="5px"
+            >
               {error}
             </Text>
           )}
 
-          <Flex mt="15px">  
+          <Flex mt="15px">
             <OrangeButton
               label="Sign in"
               action={handleSubmit}
diff --git a/frontend/src/participant/pages/progress/Main.tsx b/frontend/src/participant/pages/progress/Main.tsx
index 9d9c2aa3..e6ed1448 100644
--- a/frontend/src/participant/pages/progress/Main.tsx
+++ b/frontend/src/participant/pages/progress/Main.tsx
@@ -6,7 +6,7 @@ import BadgeDisplay from "./components/BadgeDisplay";
 
 export default function ParticipantsProgressPage() {
   return (
-    <Flex direction="column" gap="16px">
+    <Flex direction="column" gap="8px">
       <BucksGoalCard />
       <WeeklyEarningsChart />
       <BadgeDisplay />
diff --git a/frontend/src/participant/pages/progress/components/BadgeDisplay.tsx b/frontend/src/participant/pages/progress/components/BadgeDisplay.tsx
index da06f769..3908a881 100644
--- a/frontend/src/participant/pages/progress/components/BadgeDisplay.tsx
+++ b/frontend/src/participant/pages/progress/components/BadgeDisplay.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useContext } from "react";
-import { Divider, HStack, Text } from "@chakra-ui/react";
+import { Divider, Flex, HStack, Text } from "@chakra-ui/react";
 import { useQuery } from "@apollo/client";
 import WidgetContainer from "../../../../ui/containers/WidgetContainer";
 import { toTitleCase } from "../../../../helpers/stringUtils";
@@ -8,10 +8,14 @@ import ErrorScreen from "../../../../ui/screens/ErrorScreen";
 import LoadingScreen from "../../../../ui/screens/LoadingScreen";
 import { GET_BADGE_LEVEL_PROGRESS } from "../../../../gql/badgeLevelProgressRequests";
 import { GET_ACHIEVED_BADGE_LEVELS } from "../../../../gql/achievedBadgeLevelRequests";
-import BadgeLevelRow from "../../../../ui/misc/BadgeLevelRow";
-import { AchievedBadgeLevel, BadgeLevelProgress, EarnedCustomBadge } from "../../../../types/models";
+import BadgeLevelRow from "../../../../ui/badge/BadgeLevelRow";
+import {
+  AchievedBadgeLevel,
+  BadgeLevelProgress,
+  EarnedCustomBadge,
+} from "../../../../types/models";
 import { GET_EARNED_CUSTOM_BADGES } from "../../../../gql/earnedCustomBadgeRequests";
-import CustomBadgeRow from "../../../../ui/misc/CustomBadgeRow";
+import CustomBadgeRow from "../../../../ui/badge/CustomBadgeRow";
 
 const BadgeDisplay = () => {
   const { pid } = useContext(ParticipantContext);
@@ -45,7 +49,9 @@ const BadgeDisplay = () => {
   });
 
   if (pid === -1 || errorProgress || errorAchieved || errorEarnedCustomBadge) {
-    return <ErrorScreen message="Failed to load badge data. Please try again later." />;
+    return (
+      <ErrorScreen message="Failed to load badge data. Please try again later." />
+    );
   }
 
   if (loadingProgress || loadingAchieved || loadingEarnedCustomBadge) {
@@ -53,47 +59,69 @@ const BadgeDisplay = () => {
   }
 
   return (
-    <WidgetContainer
-      width="100%"
-      height="fit-content"
-      paddingX="18px"
-      paddingY="14px"
-    >
-      <HStack mb="12px">
+    <WidgetContainer width="100%" height="fit-content" paddingX="16px">
+      <Flex mb="12px" gap="12px" alignItems="center">
         {(["badges", "achieved"] as const).map((tab) => (
           <Text
-            width="60px"
+            width="fit-content"
             key={tab}
-            textStyle={activeTab === tab ? "mobile.b0" : "mobile.b1"}
-            color={activeTab === tab ? "black" : "text.light.secondary"}
-            textDecoration={activeTab === tab ? "underline" : "none"}
+            textStyle={activeTab === tab ? "s1" : "b1"}
+            color={activeTab === tab ? "text.dark" : "text.light"}
+            textDecoration="underline"
+            _hover={{
+              textDecoration: activeTab === tab ? "underline" : "none",
+            }}
             cursor="pointer"
-            _hover={{ textDecoration: "underline" }}
             onClick={() => setActiveTab(tab)}
             transition="all 0.2s ease"
           >
             {toTitleCase(tab)}
           </Text>
         ))}
-      </HStack>
-      {activeTab === "badges" ? progressData?.getBadgeLevelProgress?.map((badge: BadgeLevelProgress, index: number) => (
-        <BadgeLevelRow key={`${activeTab}-${index}`} badge={badge} index={index} />
-      )) : (
+      </Flex>
+      {activeTab === "badges" ? (
+        progressData?.getBadgeLevelProgress?.map(
+          (badge: BadgeLevelProgress, index: number) => (
+            <BadgeLevelRow
+              key={`${activeTab}-${index}`}
+              badge={badge}
+              index={index}
+            />
+          )
+        )
+      ) : (
         <>
-          {achievedData?.getAchievedBadgeLevels?.map((badge: AchievedBadgeLevel, index: number) => (
-            <BadgeLevelRow key={`${activeTab}-${index}`} badge={badge} achieved index={index} />
-          ))}
-          { achievedData?.getAchievedBadgeLevels?.length > 0 && 
-            earnedCustomBadgeData?.getEarnedCustomBadges?.length > 0 && 
-            <Divider orientation="horizontal" color='neutral.300' mt="8px" />
-          }
-          {earnedCustomBadgeData?.getEarnedCustomBadges?.map((badge: EarnedCustomBadge, index: number) => (
-            <CustomBadgeRow key={`${activeTab}-${index}`} badge={badge} index={index} />
-          ))}
+          {achievedData?.getAchievedBadgeLevels?.map(
+            (badge: AchievedBadgeLevel, index: number) => (
+              <BadgeLevelRow
+                key={`${activeTab}-${index}`}
+                badge={badge}
+                achieved
+                index={index}
+              />
+            )
+          )}
+          {achievedData?.getAchievedBadgeLevels?.length > 0 &&
+            earnedCustomBadgeData?.getEarnedCustomBadges?.length > 0 && (
+              <Divider
+                orientation="horizontal"
+                color="background.border"
+                mt="8px"
+              />
+            )}
+          {earnedCustomBadgeData?.getEarnedCustomBadges?.map(
+            (badge: EarnedCustomBadge, index: number) => (
+              <CustomBadgeRow
+                key={`${activeTab}-${index}`}
+                badge={badge}
+                index={index}
+              />
+            )
+          )}
         </>
       )}
     </WidgetContainer>
   );
 };
 
-export default BadgeDisplay;
\ No newline at end of file
+export default BadgeDisplay;
diff --git a/frontend/src/participant/pages/progress/components/BucksGoalCard.tsx b/frontend/src/participant/pages/progress/components/BucksGoalCard.tsx
index fae5c299..7576d710 100644
--- a/frontend/src/participant/pages/progress/components/BucksGoalCard.tsx
+++ b/frontend/src/participant/pages/progress/components/BucksGoalCard.tsx
@@ -14,7 +14,10 @@ import { useMutation, useQuery } from "@apollo/client";
 import WidgetContainer from "../../../../ui/containers/WidgetContainer";
 import UnderlineButton from "../../../../ui/buttons/UnderlineButton";
 import { ParticipantContext } from "../../../ParticipantContext";
-import { CREATE_EARNING_GOAL, GET_EARNING_GOAL } from "../../../../gql/earningGoalRequests";
+import {
+  CREATE_EARNING_GOAL,
+  GET_EARNING_GOAL,
+} from "../../../../gql/earningGoalRequests";
 import ErrorScreen from "../../../../ui/screens/ErrorScreen";
 import LoadingScreen from "../../../../ui/screens/LoadingScreen";
 import { GoalAction } from "../../../../types/enums";
@@ -26,7 +29,8 @@ import { SetGoal } from "./SetGoal";
 export default function BucksGoalCard() {
   const { pid, totalEarnings } = useContext(ParticipantContext);
 
-  const [createGoal, { loading: createGoalLoading, error: createGoalError }] = useMutation(CREATE_EARNING_GOAL);
+  const [createGoal, { loading: createGoalLoading, error: createGoalError }] =
+    useMutation(CREATE_EARNING_GOAL);
   const { data, loading, error, refetch } = useQuery(GET_EARNING_GOAL, {
     variables: { pid },
   });
@@ -49,7 +53,7 @@ export default function BucksGoalCard() {
 
   const [editGoal, setEditGoal] = useState<EarningGoal | null>(null);
   const [setGoal, setSetGoal] = useState(false);
-  
+
   const goal = data?.getEarningGoal ?? null;
   const metGoal = goal?.action === GoalAction.REACHED;
   const percentComplete = (totalEarnings / goal?.value) * 100;
@@ -69,7 +73,9 @@ export default function BucksGoalCard() {
   };
 
   if (pid === -1 || error || createGoalError) {
-    return <ErrorScreen message="Failed to load marillac bucks goal. Please try again later." />;
+    return (
+      <ErrorScreen message="Failed to load marillac bucks goal. Please try again later." />
+    );
   }
 
   if (loading || createGoalLoading) {
@@ -78,29 +84,50 @@ export default function BucksGoalCard() {
 
   return (
     <>
-      {editGoal && <EditGoal handleClose={() => setEditGoal(null)} refetchGoal={refetch} currentGoal={editGoal} />}
-      {setGoal && <SetGoal handleClose={() => setSetGoal(false)} refetchGoal={refetch} prevGoal={goal?.value ?? 0} />}
+      {editGoal && (
+        <EditGoal
+          handleClose={() => setEditGoal(null)}
+          refetchGoal={refetch}
+          currentGoal={editGoal}
+        />
+      )}
+      {setGoal && (
+        <SetGoal
+          handleClose={() => setSetGoal(false)}
+          refetchGoal={refetch}
+          prevGoal={goal?.value ?? 0}
+        />
+      )}
       <WidgetContainer
         width="100%"
         height="fit-content"
-        paddingX="18px"
-        paddingY="14px"
+        paddingX="16px"
         loading={false}
         error=""
       >
-        <Flex direction="row" justifyContent="space-between" alignItems="center" mb="8px">
-          <Text textStyle="mobile.b0">Marillac Bucks Goal</Text>
+        <Flex
+          direction="row"
+          justifyContent="space-between"
+          alignItems="center"
+          mb="8px"
+        >
+          <Text textStyle="s1">Marillac Bucks Goal</Text>
           <UnderlineButton
             label={editGoalText()}
             action={() => editGoalAction()}
           />
         </Flex>
         {!goal ? (
-          <Text textStyle="mobile.b1">Set a new goal to track your progress!</Text>
+          <Text textStyle="b1">Set a new goal to track your progress!</Text>
         ) : !metGoal ? (
-          <Flex direction="column" gap={2} mt="8px" mb={percentComplete >= 15 && percentComplete <= 85 ? "8px" : "0px"}>
+          <Flex
+            direction="column"
+            gap={2}
+            mt="8px"
+            mb={percentComplete >= 15 && percentComplete <= 85 ? "8px" : "0px"}
+          >
             <Progress
-              colorScheme="primary.700"
+              colorScheme="brand.primaryDark"
               value={percentComplete}
               borderRadius="full"
               height="15px"
@@ -112,10 +139,10 @@ export default function BucksGoalCard() {
               alignItems="start"
               position="relative"
             >
-              <Text textStyle="mobile.b0" color="text.light.secondary">
+              <Text textStyle="s2" color="text.medium">
                 $0
               </Text>
-              {(percentComplete >= 15 && percentComplete <= 85) && (
+              {percentComplete >= 15 && percentComplete <= 85 && (
                 <Flex
                   direction="column"
                   position="absolute"
@@ -125,10 +152,10 @@ export default function BucksGoalCard() {
                   pb="10px"
                 >
                   <Triangle />
-                  <Text textStyle="mobile.b0">${totalEarnings}</Text>
+                  <Text textStyle="s2">${totalEarnings}</Text>
                 </Flex>
               )}
-              <Text textStyle="mobile.b0" color="text.light.secondary">
+              <Text textStyle="s2" color="text.medium">
                 ${goal.value}
               </Text>
             </Flex>
@@ -136,7 +163,7 @@ export default function BucksGoalCard() {
         ) : (
           <Flex direction="row" gap={4} alignItems="center">
             <Trophy size={48} />
-            <Text textStyle="mobile.b1">
+            <Text textStyle="b1">
               Congratulations on completing your goal! Make sure to tell
               Marillac staff about your achievement.
             </Text>
diff --git a/frontend/src/participant/pages/progress/components/EditGoal.tsx b/frontend/src/participant/pages/progress/components/EditGoal.tsx
index 0ec81736..1406998c 100644
--- a/frontend/src/participant/pages/progress/components/EditGoal.tsx
+++ b/frontend/src/participant/pages/progress/components/EditGoal.tsx
@@ -67,15 +67,17 @@ export const EditGoal: React.FC<EditGoalProps> = ({
       loading={loading}
     >
       <Flex justify="space-between" alignItems="center">
-        <Text textStyle="mobile.b1">Previous goal:</Text>
+        <Text textStyle="b1">Previous Goal:</Text>
         <Flex align="center" gap={2} justifyContent="space-between">
           <MarillacCoin size={17.5} />
-          <Text textStyle="mobile.b0" mr='1px'>{currentGoal.value}</Text>
+          <Text textStyle="s1" mr="1px">
+            {currentGoal.value}
+          </Text>
         </Flex>
       </Flex>
 
       <Flex justify="space-between" alignItems="center">
-        <Text textStyle="mobile.b1">New goal:</Text>
+        <Text textStyle="b1">New Goal:</Text>
         <Flex align="center" gap={2} justifyContent="space-between" mr="-4px">
           <MarillacCoin size={22} />
           <NumberInput
diff --git a/frontend/src/participant/pages/progress/components/SetGoal.tsx b/frontend/src/participant/pages/progress/components/SetGoal.tsx
index 5e1033c3..43973300 100644
--- a/frontend/src/participant/pages/progress/components/SetGoal.tsx
+++ b/frontend/src/participant/pages/progress/components/SetGoal.tsx
@@ -14,7 +14,11 @@ interface SetGoalProps {
   prevGoal: number;
 }
 
-export const SetGoal: React.FC<SetGoalProps> = ({ handleClose, refetchGoal, prevGoal }) => {
+export const SetGoal: React.FC<SetGoalProps> = ({
+  handleClose,
+  refetchGoal,
+  prevGoal,
+}) => {
   const [goal, setGoal] = useState<number | null>(null);
   const [error, setError] = useState("");
   const { pid } = useContext(ParticipantContext);
@@ -62,7 +66,7 @@ export const SetGoal: React.FC<SetGoalProps> = ({ handleClose, refetchGoal, prev
       loading={loading}
     >
       <Flex justify="space-between" alignItems="center">
-        <Text textStyle="mobile.b1">New goal:</Text>
+        <Text textStyle="b1">New Goal:</Text>
         <Flex align="center" gap={2} justifyContent="space-between" mr="-4px">
           <MarillacCoin size={22} />
           <NumberInput
diff --git a/frontend/src/participant/pages/progress/components/WeeklyEarningsChart.tsx b/frontend/src/participant/pages/progress/components/WeeklyEarningsChart.tsx
index 202a8d65..d0865503 100644
--- a/frontend/src/participant/pages/progress/components/WeeklyEarningsChart.tsx
+++ b/frontend/src/participant/pages/progress/components/WeeklyEarningsChart.tsx
@@ -45,47 +45,49 @@ const WeeklyEarningsChart = () => {
 
   const today = new Date();
   const dayOfWeek = today.getDay();
-  const [selectedDay, setSelectedDay] = useState<number>(dayOfWeek);
 
   const chartData: ChartDataItem[] = useMemo(() => {
     return weeklyEarnings.map((earnings, index) => ({
       amount: earnings,
-      day: DAY_ABBREVIATIONS[DAYS[index]]
+      day: DAY_ABBREVIATIONS[DAYS[index]],
     }));
   }, [weeklyEarnings, dayOfWeek]);
 
   const maxEarnings = Math.max(...weeklyEarnings);
-  const upperBound = Math.ceil(maxEarnings * 1.2) || 10;
+  const upperBound = Math.ceil(maxEarnings * 1.2);
 
   if (pid === -1) {
-    return <ErrorScreen message="Failed to load weekly earnings. Please try again later." />;
+    return (
+      <ErrorScreen message="Failed to load weekly earnings. Please try again later." />
+    );
   }
 
   return (
     <WidgetContainer
       width="100%"
       height="fit-content"
-      paddingX="18px"
-      paddingY="14px"
+      paddingX="16px"
       loading={loadingEarnings}
       error={errorEarnings?.message}
     >
-      <Text textStyle="mobile.b0" mb="16px">Weekly Earnings</Text>
+      <Text textStyle="s1" mb="16px">
+        Weekly Earnings
+      </Text>
       <ResponsiveContainer width="100%" height={250}>
         <BarChart data={chartData}>
           <CartesianGrid
             strokeDasharray="0"
-            stroke={colors.neutral[300]}
+            stroke={colors.background.border}
             horizontal
             vertical={false}
           />
           <XAxis
             dataKey="day"
-            axisLine={{ stroke: colors.neutral[300] }}
+            axisLine={{ stroke: colors.background.border }}
             tickLine={false}
             tickMargin={8}
             height={25}
-            tick={{ fill: colors.text.light.secondary, fontSize: 12 }}
+            tick={{ fill: colors.text.medium, fontSize: 12 }}
             fontFamily="Nunito"
           />
           <YAxis
@@ -94,39 +96,41 @@ const WeeklyEarningsChart = () => {
             tickLine={false}
             tickCount={4}
             tickMargin={8}
-            tick={{ fill: colors.text.light.secondary, fontSize: 12 }}
+            tick={{ fill: colors.text.medium, fontSize: 12 }}
             tickFormatter={(value) => `$${value}`}
             width={35}
             fontFamily="Nunito"
           />
-          <Bar
-            dataKey="amount"
-            radius={[2, 2, 0, 0]}
-          >
+          <Bar dataKey="amount" radius={[2, 2, 0, 0]}>
             {chartData.map((entry, index) => (
               <Cell
                 key={`cell-${index}`}
-                fill={index === selectedDay ? colors.primary[700] : colors.primary[100]}
+                fill={
+                  index === dayOfWeek
+                    ? colors.brand.primaryDark
+                    : colors.brand.primaryLight
+                }
               />
             ))}
-            <LabelList content={(props: any) => {
-              const { x, y, width, index, value } = props;
-              console.log(props);
-              if (index !== selectedDay) return null;
-              return (
-                <text
-                  x={x + width / 2}
-                  y={y - 8}
-                  textAnchor="middle"
-                  fill="#000000"
-                  fontSize={14}
-                  fontWeight={700}
-                  fontFamily="Nunito"
-                >
-                  ${value}
-                </text>
-              );
-            }}
+            <LabelList
+              content={(props: any) => {
+                const { x, y, width, index, value } = props;
+                console.log(props);
+                if (index !== dayOfWeek) return null;
+                return (
+                  <text
+                    x={x + width / 2}
+                    y={y - 8}
+                    textAnchor="middle"
+                    fill="#000000"
+                    fontSize="12px"
+                    fontWeight={650}
+                    fontFamily="Nunito"
+                  >
+                    ${value}
+                  </text>
+                );
+              }}
             />
           </Bar>
         </BarChart>
diff --git a/frontend/src/participant/pages/schedule/Main.tsx b/frontend/src/participant/pages/schedule/Main.tsx
index cf085223..51528984 100644
--- a/frontend/src/participant/pages/schedule/Main.tsx
+++ b/frontend/src/participant/pages/schedule/Main.tsx
@@ -1,20 +1,36 @@
 import { Button, Divider, Flex, HStack, Text } from "@chakra-ui/react";
 import { useQuery } from "@apollo/client";
 import React, { useContext, useEffect, useState } from "react";
-import { endOfDay, isEqual, isSameDay, startOfDay, startOfWeek } from "date-fns";
+import {
+  endOfDay,
+  isEqual,
+  isSameDay,
+  startOfDay,
+  startOfWeek,
+} from "date-fns";
 import { useLocation } from "react-router-dom";
 import { ParticipantContext } from "../../ParticipantContext";
 import { GET_ASSIGNED_TASKS_BY_WEEK } from "../../../gql/assignedTaskRequests";
 import ErrorScreen from "../../../ui/screens/ErrorScreen";
 import { DisplayView, ScheduleView } from "../../../constants/views";
-import { formatDateV1, formatDateV2, formatDateV6, formatDateV7 } from "../../../helpers/formatDateTime";
+import {
+  formatDateV1,
+  formatDateV2,
+  formatDateV6,
+  formatDateV7,
+} from "../../../helpers/formatDateTime";
 import MarillacPlaceCalendar from "../../../ui/misc/MarillacPlaceCalendar";
 import LoadingScreen from "../../../ui/screens/LoadingScreen";
 import { Calendar, List } from "../../../ui/icons/MiscIcons";
 import { AssignedTask } from "../../../types/models";
 import TaskDetailsModal from "./components/TaskDetailsModal";
 import { TaskStatus } from "../../../types/enums";
-import { Assigned, Complete, Excused, Incomplete } from "../../../ui/icons/StatusIcons";
+import {
+  Assigned,
+  Complete,
+  Excused,
+  Incomplete,
+} from "../../../ui/icons/StatusIcons";
 import { Comment } from "../../../ui/icons/ActionIcons";
 
 export default function ParticipantsSchedulePage() {
@@ -22,7 +38,9 @@ export default function ParticipantsSchedulePage() {
   const location = useLocation();
   const { view } = location.state || { view: ScheduleView.LIST };
   const [currentView, setCurrentView] = useState<ScheduleView>(view);
-  const [viewTaskDetails, setViewTaskDetails] = useState<AssignedTask | null>(null);
+  const [viewTaskDetails, setViewTaskDetails] = useState<AssignedTask | null>(
+    null
+  );
 
   const { data, loading, error } = useQuery(GET_ASSIGNED_TASKS_BY_WEEK, {
     variables: { pid, weekStart: startOfWeek(new Date()).toISOString() },
@@ -33,16 +51,25 @@ export default function ParticipantsSchedulePage() {
   }
 
   if (error || pid === -1) {
-    return <ErrorScreen message="Failed to load assigned tasks. Please try again later." />;
+    return (
+      <ErrorScreen message="Failed to load assigned tasks. Please try again later." />
+    );
   }
 
   const tasks = data?.getAssignedTasksByWeek ?? [];
 
   return (
     <>
-      <Flex w="100%" mb="12px" justifyContent="space-between" alignItems="center">
-        <Text color="primary.700" textStyle="mobile.h1">
-          {currentView === ScheduleView.CALENDAR ? formatDateV1(new Date()) : "This Week"}
+      <Flex
+        w="100%"
+        mb="12px"
+        justifyContent="space-between"
+        alignItems="center"
+      >
+        <Text color="brand.primaryDark" textStyle="h3">
+          {currentView === ScheduleView.CALENDAR
+            ? formatDateV1(new Date())
+            : "This Week"}
         </Text>
         <HStack spacing={0}>
           <Button
@@ -55,15 +82,15 @@ export default function ParticipantsSchedulePage() {
             borderRightRadius="0px"
             border="1px solid"
             borderColor="#E67D4F"
-            bg="#FFFFFF"
-            color="#E67D4F"
+            bg="white"
+            color="brand.secondaryDark"
             _hover={{
-              bg: "#E67D4F",
-              color: "#FFFFFF",
+              bg: "brand.secondaryDark",
+              color: "white",
             }}
             _active={{
-              bg: "#E67D4F",
-              color: "#FFFFFF",
+              bg: "brand.secondaryDark",
+              color: "white",
             }}
           >
             <List color="currentColor" size={12} />
@@ -78,15 +105,15 @@ export default function ParticipantsSchedulePage() {
             border="1px solid"
             borderColor="#E67D4F"
             padding="0px"
-            bg="#FFFFFF"
+            bg="white"
             color="#E67D4F"
             _hover={{
-              bg: "#E67D4F",
-              color: "#FFFFFF",
+              bg: "brand.secondaryDark",
+              color: "white",
             }}
             _active={{
-              bg: "#E67D4F",
-              color: "#FFFFFF",
+              bg: "brand.secondaryDark",
+              color: "white",
             }}
           >
             <Calendar color="currentColor" size={16} />
@@ -104,42 +131,66 @@ export default function ParticipantsSchedulePage() {
       ) : (
         <Flex flexDir="column" gap="12px">
           {tasks.map((task: AssignedTask, index: number) => {
-            const noSpecificTime = (
-              isEqual(startOfDay(new Date(task.start_date)), new Date(task.start_date)) &&
-              isEqual(endOfDay(new Date(task.end_date)), new Date(task.end_date))
-            );
-            const showDayHeader = (
-              index === 0 || 
-              !isSameDay(new Date(task.start_date), new Date(tasks[index - 1].start_date))
-            );
+            const noSpecificTime =
+              isEqual(
+                startOfDay(new Date(task.start_date)),
+                new Date(task.start_date)
+              ) &&
+              isEqual(
+                endOfDay(new Date(task.end_date)),
+                new Date(task.end_date)
+              );
+            const showDayHeader =
+              index === 0 ||
+              !isSameDay(
+                new Date(task.start_date),
+                new Date(tasks[index - 1].start_date)
+              );
 
             return (
               <>
                 {showDayHeader && (
                   <>
-                    <Divider borderColor="neutral.300" />
-                    <Text textStyle="mobile.b0">{formatDateV7(new Date(task.start_date))}</Text>
+                    <Divider borderColor="background.border" />
+                    <Text textStyle="s1">
+                      {formatDateV7(new Date(task.start_date))}
+                    </Text>
                   </>
                 )}
-                <Flex key={index} justifyContent="space-between" alignItems="center" onClick={() => setViewTaskDetails(task)} cursor="pointer">
+                <Flex
+                  key={index}
+                  justifyContent="space-between"
+                  alignItems="center"
+                  onClick={() => setViewTaskDetails(task)}
+                  cursor="pointer"
+                >
                   <Flex alignItems="center" gap="12px">
                     {task.status === TaskStatus.ASSIGNED && <Assigned />}
                     {task.status === TaskStatus.COMPLETE && <Complete />}
                     {task.status === TaskStatus.EXCUSED && <Excused />}
                     {task.status === TaskStatus.INCOMPLETE && <Incomplete />}
-                    <Text textStyle="mobile.b1">{task.name}</Text>
+                    <Text textStyle="b1">{task.name}</Text>
                     {task.comment && <Comment size={12} />}
                   </Flex>
-                  <Text textStyle="mobile.b2" color="text.light.secondary">{noSpecificTime ? "Anytime" : formatDateV2(new Date(task.start_date)) + " to " + formatDateV2(new Date(task.end_date))}</Text>
+                  <Text textStyle="b2" color="text.medium">
+                    {noSpecificTime
+                      ? "Anytime"
+                      : formatDateV2(new Date(task.start_date)) +
+                        " to " +
+                        formatDateV2(new Date(task.end_date))}
+                  </Text>
                 </Flex>
               </>
-            )
+            );
           })}
         </Flex>
       )}
 
       {viewTaskDetails && (
-        <TaskDetailsModal task={viewTaskDetails} onClose={() => setViewTaskDetails(null)} />
+        <TaskDetailsModal
+          task={viewTaskDetails}
+          onClose={() => setViewTaskDetails(null)}
+        />
       )}
     </>
   );
diff --git a/frontend/src/participant/pages/schedule/components/TaskDetailsModal.tsx b/frontend/src/participant/pages/schedule/components/TaskDetailsModal.tsx
index bbd16518..b422948f 100644
--- a/frontend/src/participant/pages/schedule/components/TaskDetailsModal.tsx
+++ b/frontend/src/participant/pages/schedule/components/TaskDetailsModal.tsx
@@ -13,27 +13,41 @@ type TaskDetailsModalProps = {
   onClose: () => void;
 };
 
-export default function TaskDetailsModal({ task, onClose }: TaskDetailsModalProps) {
-  const noSpecificTime = (
+export default function TaskDetailsModal({
+  task,
+  onClose,
+}: TaskDetailsModalProps) {
+  const noSpecificTime =
     isEqual(startOfDay(new Date(task.start_date)), new Date(task.start_date)) &&
-    isEqual(endOfDay(new Date(task.end_date)), new Date(task.end_date))
+    isEqual(endOfDay(new Date(task.end_date)), new Date(task.end_date));
+  const spansMultipleDays = !isSameDay(
+    new Date(task.start_date),
+    new Date(task.end_date)
   );
-  const spansMultipleDays = !isSameDay(new Date(task.start_date), new Date(task.end_date));
 
   return (
-    <PopupContainer
-      title={task.name}
-      cancel_action={onClose}
-    >
+    <PopupContainer title={task.name} cancel_action={onClose}>
       <FixedInput
         label="Time"
-        current_value={noSpecificTime ? "Anytime" : formatDateV2(new Date(task.start_date)) + " to " + formatDateV2(new Date(task.end_date))}
+        current_value={
+          noSpecificTime
+            ? "Anytime"
+            : formatDateV2(new Date(task.start_date)) +
+              " to " +
+              formatDateV2(new Date(task.end_date))
+        }
         orientation="horizontal"
       />
 
       <FixedInput
         label="Date"
-        current_value={spansMultipleDays ? formatDateV6(new Date(task.start_date)) + " to " + formatDateV6(new Date(task.end_date)) : formatDateV6(new Date(task.start_date))}
+        current_value={
+          spansMultipleDays
+            ? formatDateV6(new Date(task.start_date)) +
+              " to " +
+              formatDateV6(new Date(task.end_date))
+            : formatDateV6(new Date(task.start_date))
+        }
         orientation="horizontal"
       />
 
@@ -64,4 +78,4 @@ export default function TaskDetailsModal({ task, onClose }: TaskDetailsModalProp
       </Flex>
     </PopupContainer>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/theme/colors.ts b/frontend/src/theme/colors.ts
index d8670dd5..e2ce2268 100644
--- a/frontend/src/theme/colors.ts
+++ b/frontend/src/theme/colors.ts
@@ -1,68 +1,46 @@
-// TODO (calista):
-// go over Figma design update & categorize colors definition
+/**
+ * Color Structure
+ *
+ * - brand: marillac's main colors.
+ * - background: the whites and greys for pages, popups, tables, etc.
+ * - indicate: colors for success/error/warning/informational UI.
+ * - schedule dark/light: all of the colors that are used within the schedule
+ * - text: standard font colors
+ */
 
 const colors = {
-  task_status: {
-    complete: "#0D8312",
-    assigned: "#255B9A",
-    excused: "#B07D18",
-    incomplete: "#B21D2F",
-  },
-  neutral: {
-    0: "#FFFFFF",
-    100: "#FAFAFA",
-    200: "#F5F6F8",
-    300: "#C5C8D8",
-  },
-  primary: {
-    100: "#E3ECEB",
-    700: "#0C727E",
-  },
-  secondary: {
-    100: "#FCF2ED",
-    700: "#E67D4F",
-  },
-  danger: {
-    100: "#FEF1F2",
-    700: "#F0A5AE",
-    800: "#D34C5C",
-    900: "#B21D2F",
-  },
-  warning: {
-    100: "#FFF8EB",
-    700: "#FEDEA0",
-    800: "#DFA431",
-    900: "#B07D18",
-  },
-  success: {
-    100: "#EAFFEB",
-    700: "#A2E3A4",
-    800: "#1BB421",
-    900: "#0D8312",
-  },
-  actionsDark: {
-    blue: "#255B9A",
-    red: "#B21D2F",
-    yellow: "#B07D18",
-    green: "#0D8312",
-  },
-  actionsLight: {
-    blue: "#C5DCF8",
-    yellow: "#FFE5B2",
-    green: "#CDEECE",
-    red: "#F8D7DB",
+  brand: {
+    primaryDark: "#0C727E",
+    primaryLight: "#E3ECEB",
+    secondaryDark: "#E67D4F",
+    secondaryLight: "#FCF2ED",
+  },
+  background: {
+    admin: "#FFFFFF",
+    participant: "#FDFDFD",
+    highlight: "#F8F8F8",
+    border: "#C5C8D8",
+  },
+  indicate: {
+    darkRed: "#B21D2F",
+    brightRed: "#E30000",
+    deepGreen: "#259E29",
+    lightGreen: "#EAFFEB",
+  },
+  schedule: {
+    assignedDark: "#255B9A",
+    incompleteDark: "#B21D2F",
+    excusedDark: "#B07D18",
+    completeDark: "#0D8312",
+    assignedLight: "#C5DCF8",
+    incompleteLight: "#F8D7DB",
+    excusedLight: "#FFE5B2",
+    completeLight: "#CDEECE",
   },
   text: {
-    light: {
-      primary: "#1D2433",
-      secondary: "#595D67",
-      disabled: "#6C707A",
-    },
-    dark: {
-      primary: "#FFFFFF",
-      secondary: "#B5B5B8",
-      disabled: "#8B8C8F",
-    },
+    dark: "#000000",
+    medium: "#626262",
+    light: "#808080",
   },
 };
 
diff --git a/frontend/src/theme/components.ts b/frontend/src/theme/components.ts
new file mode 100644
index 00000000..5c8ef566
--- /dev/null
+++ b/frontend/src/theme/components.ts
@@ -0,0 +1,80 @@
+import { progressAnatomy, checkboxAnatomy } from "@chakra-ui/anatomy";
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+  defineStyleConfig,
+} from "@chakra-ui/react";
+
+const {
+  definePartsStyle: definePartsStyleProgress,
+  defineMultiStyleConfig: defineMultiStyleConfigProgress,
+} = createMultiStyleConfigHelpers(progressAnatomy.keys);
+
+const baseStyleProgress = definePartsStyleProgress({
+  track: {
+    bg: "brand.primaryLight",
+  },
+  filledTrack: {
+    bg: "brand.primaryDark",
+  },
+});
+
+export const Progress = defineMultiStyleConfigProgress({
+  baseStyle: baseStyleProgress,
+});
+
+const {
+  definePartsStyle: definePartsStyleCheckbox,
+  defineMultiStyleConfig: defineMultiStyleConfigCheckbox,
+} = createMultiStyleConfigHelpers(checkboxAnatomy.keys);
+
+const baseStyleCheckbox = definePartsStyleCheckbox({
+  control: {
+    w: 4,
+    h: 4,
+    svg: {
+      w: 3,
+      h: 3,
+    },
+    border: "1.5px solid",
+    borderColor: "background.border",
+    bg: "none",
+    _checked: {
+      bg: "brand.primaryDark",
+      _hover: {
+        bg: "brand.primaryDark",
+      },
+    },
+    _focusVisible: {
+      boxShadow: "none",
+      outline: "none",
+    },
+  },
+});
+
+export const Checkbox = defineMultiStyleConfigCheckbox({
+  baseStyle: baseStyleCheckbox,
+});
+
+const baseStyleAlert = defineStyle({
+  container: {
+    borderRadius: "8px",
+    padding: "12px",
+    fontFamily: "Nunito, sans-serif",
+    fontWeight: 650,
+    fontSize: "14px",
+    bg: "indicate.lightGreen",
+    border: "2px solid",
+    borderColor: "indicate.deepGreen",
+  },
+  description: {
+    color: "indicate.deepGreen",
+  },
+  icon: {
+    color: "indicate.deepGreen",
+  },
+});
+
+export const Alert = defineStyleConfig({
+  baseStyle: baseStyleAlert,
+});
diff --git a/frontend/src/theme/progress.ts b/frontend/src/theme/progress.ts
deleted file mode 100644
index 4716a269..00000000
--- a/frontend/src/theme/progress.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { progressAnatomy } from "@chakra-ui/anatomy";
-import { createMultiStyleConfigHelpers } from "@chakra-ui/react";
-
-const { definePartsStyle, defineMultiStyleConfig } =
-  createMultiStyleConfigHelpers(progressAnatomy.keys);
-
-const baseStyle = definePartsStyle({
-  track: {
-    bg: "primary.100",
-  },
-  filledTrack: {
-    bg: "primary.700",
-  },
-});
-
-export const Progress = defineMultiStyleConfig({
-  baseStyle,
-});
\ No newline at end of file
diff --git a/frontend/src/theme/typography.ts b/frontend/src/theme/typography.ts
index ed1c4969..0b3684bb 100644
--- a/frontend/src/theme/typography.ts
+++ b/frontend/src/theme/typography.ts
@@ -1,102 +1,53 @@
-// TODO (calista):
-// Go over Figma design update & categorize text styles
-// standardize text style for error messages
-
 import { defineStyleConfig } from "@chakra-ui/react";
 
+/**
+ * Typography Structure
+ *
+ * - h: heading
+ * - s: subtitle
+ * - b: body
+ */
+
 export const Text = defineStyleConfig({
   baseStyle: {
     fontFamily: "Nunito",
-    color: "#000000",
+    color: "text.dark",
     margin: 0,
     padding: 0,
   },
 });
 
 export const textStyles = {
-  web: {
-    h1: {
-      fontWeight: "700",
-      fontSize: "32px",
-    },
-    h2: {
-      fontWeight: "700",
-      fontSize: "24px",
-    },
-    h3: {
-      fontWeight: "700",
-      fontSize: "20px",
-    },
-    s1: {
-      fontWeight: "700",
-      fontSize: "12px",
-    },
-    b1: {
-      fontWeight: "400",
-      fontSize: "16px",
-    },
-    b2: {
-      fontWeight: "400",
-      fontSize: "14px",
-    },
-    b3: {
-      fontWeight: "400",
-      fontSize: "12px",
-    },
-    c1: {
-      color: "#808080",
-      fontWeight: "400",
-      fontSize: "14px",
-    },
-    label: {
-      fontWeight: "500",
-      fontSize: "16px",
-      textTransform: "uppercase",
-    },
+  h1: {
+    fontWeight: "700",
+    fontSize: "26px",
+  },
+  h2: {
+    fontWeight: "700",
+    fontSize: "24px",
+  },
+  h3: {
+    fontWeight: "700",
+    fontSize: "20px",
+  },
+  h4: {
+    fontWeight: "700",
+    fontSize: "16px",
+  },
+  s1: {
+    fontWeight: "650",
+    fontSize: "14px",
+  },
+  s2: {
+    fontWeight: "650",
+    fontSize: "12px",
+  },
+  b1: {
+    fontWeight: "400",
+    fontSize: "14px",
   },
-  mobile: {
-    h1: {
-      fontWeight: "700",
-      fontSize: "20px",
-    },
-    h2: {
-      fontWeight: "700",
-      fontSize: "16px",
-    },
-    h3: {
-      fontWeight: "400",
-      fontSize: "16px",
-    },
-    s1: {
-      color: "#808080",
-      fontWeight: "600",
-      fontSize: "12px",
-    },
-    b0: {
-      fontWeight: "700",
-      fontSize: "14px",
-    },
-    b1: {
-      fontWeight: "400",
-      fontSize: "14px",
-    },
-    b2: {
-      fontWeight: "400",
-      fontSize: "12px",
-    },
-    b3: {
-      fontWeight: "400",
-      fontSize: "10px",
-    },
-    c1: {
-      color: "#808080",
-      fontWeight: "400",
-      fontSize: "12px",
-    },
-    label: {
-      fontWeight: "500",
-      fontSize: "14px",
-      textTransform: "uppercase",
-    },
+  b2: {
+    fontWeight: "400",
+    fontSize: "12px",
   },
 };
diff --git a/frontend/src/ui/UI.tsx b/frontend/src/ui/UI.tsx
index 364a00dd..564c8312 100644
--- a/frontend/src/ui/UI.tsx
+++ b/frontend/src/ui/UI.tsx
@@ -5,7 +5,7 @@ import BlackOutlineButton from "./buttons/BlackOutlineButton";
 import OrangeButton from "./buttons/OrangeButton";
 import GreenOutlineButton from "./buttons/GreenOutlineButton";
 import UnderlineButton from "./buttons/UnderlineButton";
-import { Comment, Marker, Pin, PlusSign, Trash } from "./icons/ActionIcons";
+import { Comment, Marker, Plus, Download, Trash } from "./icons/ActionIcons";
 import WidgetContainer from "./containers/WidgetContainer";
 import PopupContainer from "./containers/PopupContainer";
 import {
@@ -56,7 +56,7 @@ import {
   TimePreference,
   DayOfWeek,
 } from "../types/enums";
-import Badge from "./misc/BadgeProgress";
+import Badge from "./badge/BadgeProgress";
 import TaskStatusDisplay from "./misc/TaskStatusDisplay";
 import ToggleButton from "./buttons/ToggleButton";
 import LoadingScreen from "./screens/LoadingScreen";
@@ -236,10 +236,10 @@ export default function UI() {
       padding="50px"
       gap="20px"
     >
-      <Text textStyle="web.h1" color="primary.700">
+      <Text textStyle="h1" color="brand.primaryDark">
         Marillac Place UI Components
       </Text>
-      <Text textStyle="web.h3">Buttons</Text>
+      <Text textStyle="h3">Buttons</Text>
       <Flex flexDir="row" gap="10px">
         <BlackOutlineButton
           label="BlackOutlineButton"
@@ -296,10 +296,10 @@ export default function UI() {
       </Flex>
       <UnderlineButton label="UnderlineButton" action={() => {}} />
       <ToggleButton active={toggleActive} setActive={setToggleActive} />
-      <Text textStyle="web.h3">Containers</Text>
+      <Text textStyle="h3">Containers</Text>
       <Flex flexDir="row" gap="10px">
         <WidgetContainer
-          bg_color="neutral.100"
+          bg_color="background.highlight"
           width="200px"
           height="100px"
           paddingX="12px"
@@ -307,10 +307,10 @@ export default function UI() {
           loading={false}
           error=""
         >
-          <Text textStyle="web.b2">WidgetContainer</Text>
+          <Text textStyle="b1">WidgetContainer</Text>
         </WidgetContainer>
         <WidgetContainer
-          bg_color="primary.100"
+          bg_color="brand.primaryLight"
           width="200px"
           height="100px"
           paddingX="12px"
@@ -318,10 +318,10 @@ export default function UI() {
           loading={false}
           error=""
         >
-          <Text textStyle="web.b2">WidgetContainer (bg color)</Text>
+          <Text textStyle="b1">WidgetContainer (bg color)</Text>
         </WidgetContainer>
         <WidgetContainer
-          bg_color="neutral.100"
+          bg_color="background.highlight"
           width="200px"
           height="100px"
           paddingX="12px"
@@ -329,10 +329,10 @@ export default function UI() {
           loading
           error=""
         >
-          <Text textStyle="web.b2">WidgetContainer (loading)</Text>
+          <Text textStyle="b1">WidgetContainer (loading)</Text>
         </WidgetContainer>
         <WidgetContainer
-          bg_color="neutral.100"
+          bg_color="background.highlight"
           width="200px"
           height="100px"
           paddingX="12px"
@@ -340,7 +340,7 @@ export default function UI() {
           loading={false}
           error="Something went wrong."
         >
-          <Text textStyle="web.b2">WidgetContainer (error)</Text>
+          <Text textStyle="b1">WidgetContainer (error)</Text>
         </WidgetContainer>
       </Flex>
       <Flex flexDir="row" gap="10px">
@@ -367,7 +367,7 @@ export default function UI() {
             error_message=""
             loading={false}
           >
-            <Text textStyle="web.b2">PopupContainer</Text>
+            <Text textStyle="b1">PopupContainer</Text>
           </PopupContainer>
         )}
         {showLoadingPopup && (
@@ -381,7 +381,7 @@ export default function UI() {
             error_message=""
             loading
           >
-            <Text textStyle="web.b2">PopupContainer (loading)</Text>
+            <Text textStyle="b1">PopupContainer (loading)</Text>
           </PopupContainer>
         )}
         {showErrorPopup && (
@@ -396,11 +396,11 @@ export default function UI() {
             system_error
             loading={false}
           >
-            <Text textStyle="web.b2">PopupContainer (error)</Text>
+            <Text textStyle="b1">PopupContainer (error)</Text>
           </PopupContainer>
         )}
       </Flex>
-      <Text textStyle="web.h3">Badges</Text>
+      <Text textStyle="h3">Badges</Text>
       <Flex flexDir="row" gap="10px">
         <Badge icon={Icon.BABY} level={Level.NOVICE} percentageComplete={50} />
         <Badge
@@ -416,7 +416,7 @@ export default function UI() {
           percentageComplete={25}
         />
       </Flex>
-      <Text textStyle="web.h3">Icons</Text>
+      <Text textStyle="h3">Icons</Text>
       <Flex
         width="fit-content"
         height="fit-content"
@@ -426,15 +426,15 @@ export default function UI() {
         flexDir="row"
         gap="10px"
         padding="10px"
-        bg="neutral.300"
+        bg="background.border"
         rounded="8px"
         alignItems="center"
         justifyContent="center"
       >
         <Comment />
-        <Pin />
         <Marker />
-        <PlusSign />
+        <Plus />
+        <Download />
         <Trash />
         <Baby />
         <Diamond />
@@ -466,7 +466,7 @@ export default function UI() {
         <Excused />
         <Incomplete />
       </Flex>
-      <Text textStyle="web.h3">Inputs</Text>
+      <Text textStyle="h3">Inputs</Text>
       <Flex flexDir="row" gap="10px">
         <FixedInput
           label="FixedInput"
@@ -542,7 +542,7 @@ export default function UI() {
         update_action={setSelect}
         value_options={options}
       />
-      <Text textStyle="web.h3">Date Options</Text>
+      <Text textStyle="h3">Date Options</Text>
       <UnderlineButton
         label="Show DateOptions"
         action={() => setShowDateOptions(!showDateOptions)}
@@ -575,14 +575,14 @@ export default function UI() {
           />
         </PopupContainer>
       )}
-      <Text textStyle="web.h3">Task Status Display</Text>
+      <Text textStyle="h3">Task Status Display</Text>
       <Flex flexDir="row" gap="10px">
         <TaskStatusDisplay status={TaskStatus.ASSIGNED} />
         <TaskStatusDisplay status={TaskStatus.EXCUSED} />
         <TaskStatusDisplay status={TaskStatus.INCOMPLETE} />
         <TaskStatusDisplay status={TaskStatus.COMPLETE} />
       </Flex>
-      <Text textStyle="web.h3">Calendar (Web)</Text>
+      <Text textStyle="h3">Calendar (Web)</Text>
       <Box width="1000px">
         <MarillacPlaceCalendar
           assignedTasks={assignedTasks}
@@ -591,7 +591,7 @@ export default function UI() {
           view={DisplayView.WEB}
         />
       </Box>
-      <Text textStyle="web.h3">Calendar (Mobile)</Text>
+      <Text textStyle="h3">Calendar (Mobile)</Text>
       <Box width="400px">
         <MarillacPlaceCalendar
           assignedTasks={assignedTasks}
@@ -600,7 +600,7 @@ export default function UI() {
           view={DisplayView.MOBILE}
         />
       </Box>
-      <Text textStyle="web.h3">Data Table</Text>
+      <Text textStyle="h3">Data Table</Text>
       <Box width="800px">
         <DataTable
           loading={false}
@@ -625,16 +625,26 @@ export default function UI() {
           rows={dataTableRows}
         />
       </Box>
-      <Text textStyle="web.h3">Loading Screen</Text>
-      <Box width="1000px" height="500px" outline="1px solid black" padding="20px">
+      <Text textStyle="h3">Loading Screen</Text>
+      <Box
+        width="1000px"
+        height="500px"
+        outline="1px solid black"
+        padding="20px"
+      >
         <LoadingScreen message="Loading..." />
       </Box>
-      <Text textStyle="web.h3">Not Found Screen</Text>
+      <Text textStyle="h3">Not Found Screen</Text>
       <Box width="1000px" outline="1px solid black" padding="20px">
         <NotFoundScreen />
       </Box>
-      <Text textStyle="web.h3">Error Screen</Text>
-      <Box width="1000px" height="500px" outline="1px solid black" padding="20px">
+      <Text textStyle="h3">Error Screen</Text>
+      <Box
+        width="1000px"
+        height="500px"
+        outline="1px solid black"
+        padding="20px"
+      >
         <ErrorScreen message="An error has occurred." />
       </Box>
     </Flex>
diff --git a/frontend/src/ui/misc/BadgeLevelRow.tsx b/frontend/src/ui/badge/BadgeLevelRow.tsx
similarity index 61%
rename from frontend/src/ui/misc/BadgeLevelRow.tsx
rename to frontend/src/ui/badge/BadgeLevelRow.tsx
index 3ce6ef40..3c3d8738 100644
--- a/frontend/src/ui/misc/BadgeLevelRow.tsx
+++ b/frontend/src/ui/badge/BadgeLevelRow.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Flex, Text, Divider } from "@chakra-ui/react";
 import { Icon } from "../../types/enums";
-import { AchievedBadgeLevel, BadgeLevelProgress, EarnedCustomBadge } from "../../types/models";
+import { AchievedBadgeLevel, BadgeLevelProgress } from "../../types/models";
 import BadgeProgress from "./BadgeProgress";
 import { MarillacCoin } from "../icons/MiscIcons";
 import { toTitleCase } from "../../helpers/stringUtils";
@@ -12,9 +12,15 @@ interface BadgeLevelRowProps {
   achieved?: boolean;
 }
 
-const BadgeLevelRow: React.FC<BadgeLevelRowProps> = ({ badge, index, achieved = false }) => {
+const BadgeLevelRow: React.FC<BadgeLevelRowProps> = ({
+  badge,
+  index,
+  achieved = false,
+}) => {
   const icon = badge.badge_level?.system_badge?.icon ?? Icon.FIVE_STAR;
-  const description = badge.badge_level?.system_badge?.description ?? "Error loading badge description";
+  const description =
+    badge.badge_level?.system_badge?.description ??
+    "Error loading badge description";
   const value = badge.badge_level?.value ?? 0;
 
   function getPercentageComplete(bl: any): number {
@@ -31,26 +37,33 @@ const BadgeLevelRow: React.FC<BadgeLevelRowProps> = ({ badge, index, achieved =
   return (
     <>
       {index !== 0 && (
-        <Divider orientation="horizontal" color='neutral.300' mt="8px" />
+        <Divider orientation="horizontal" color="background.border" mt="8px" />
       )}
-      <Flex width="100%" alignItems="center" justifyContent="space-between" mt="8px">
+      <Flex
+        width="100%"
+        alignItems="center"
+        justifyContent="space-between"
+        mt="8px"
+      >
         <Flex alignItems="center" gap="12px">
-          <BadgeProgress icon={icon} level={badge.level} percentageComplete={getPercentageComplete(badge)} />
+          <BadgeProgress
+            icon={icon}
+            level={badge.level}
+            percentageComplete={getPercentageComplete(badge)}
+          />
 
           <Flex flexDir="column">
-            <Text textStyle="mobile.b0" color="primary.700">
+            <Text textStyle="s1" color="brand.primaryDark">
               {toTitleCase(badge.level) + " " + badge.name + " Badge"}
             </Text>
-            <Text textStyle="mobile.b2" color="text.light.secondary">
+            <Text textStyle="b2" color="text.medium">
               {description}
             </Text>
           </Flex>
         </Flex>
         {!achieved && (
           <Flex alignItems="center" gap="8px">
-            <Text textStyle="mobile.b1">
-              {value}
-            </Text>
+            <Text textStyle="b1">{value}</Text>
             <MarillacCoin size={16} />
           </Flex>
         )}
diff --git a/frontend/src/ui/misc/BadgeProgress.tsx b/frontend/src/ui/badge/BadgeProgress.tsx
similarity index 98%
rename from frontend/src/ui/misc/BadgeProgress.tsx
rename to frontend/src/ui/badge/BadgeProgress.tsx
index 19186cb6..c9c40a39 100644
--- a/frontend/src/ui/misc/BadgeProgress.tsx
+++ b/frontend/src/ui/badge/BadgeProgress.tsx
@@ -31,7 +31,7 @@ const levelConfig: Record<
   },
   CUSTOM: {
     FrameIcon: BadgeLevelFrameSet.Custom,
-    color: "#0C727E",
+    color: "brand.primaryDark",
   },
 };
 
diff --git a/frontend/src/ui/misc/CustomBadgeRow.tsx b/frontend/src/ui/badge/CustomBadgeRow.tsx
similarity index 57%
rename from frontend/src/ui/misc/CustomBadgeRow.tsx
rename to frontend/src/ui/badge/CustomBadgeRow.tsx
index f1f6fac1..801186cf 100644
--- a/frontend/src/ui/misc/CustomBadgeRow.tsx
+++ b/frontend/src/ui/badge/CustomBadgeRow.tsx
@@ -12,17 +12,26 @@ const CustomBadgeRow: React.FC<CustomBadgeRowProps> = ({ badge, index }) => {
   return (
     <>
       {index !== 0 && (
-        <Divider orientation="horizontal" color='neutral.300' mt="8px" />
+        <Divider orientation="horizontal" color="background.border" mt="8px" />
       )}
-      <Flex width="100%" alignItems="center" justifyContent="space-between" mt="8px">
+      <Flex
+        width="100%"
+        alignItems="center"
+        justifyContent="space-between"
+        mt="8px"
+      >
         <Flex alignItems="center" gap="12px">
-          <BadgeProgress icon={badge.icon} level="CUSTOM" percentageComplete={100} />
+          <BadgeProgress
+            icon={badge.icon}
+            level="CUSTOM"
+            percentageComplete={100}
+          />
 
           <Flex flexDir="column">
-            <Text textStyle="mobile.b0" color="primary.700">
+            <Text textStyle="s1" color="brand.primaryDark">
               {"Custom " + badge.name + " Badge"}
             </Text>
-            <Text textStyle="mobile.b2" color="text.light.secondary">
+            <Text textStyle="b2" color="text.medium">
               {badge.description}
             </Text>
           </Flex>
@@ -32,4 +41,4 @@ const CustomBadgeRow: React.FC<CustomBadgeRowProps> = ({ badge, index }) => {
   );
 };
 
-export default CustomBadgeRow;
\ No newline at end of file
+export default CustomBadgeRow;
diff --git a/frontend/src/ui/buttons/BlackOutlineButton.tsx b/frontend/src/ui/buttons/BlackOutlineButton.tsx
index 7376d9ff..df51ae30 100644
--- a/frontend/src/ui/buttons/BlackOutlineButton.tsx
+++ b/frontend/src/ui/buttons/BlackOutlineButton.tsx
@@ -10,7 +10,7 @@ export default function BlackOutlineButton({
   label,
   action,
   is_active,
-  text_color = "#000000",
+  text_color = "text.dark",
   icon,
 }: BlackOutlineButtonProps) {
   return (
@@ -25,17 +25,17 @@ export default function BlackOutlineButton({
       height="fit-content"
       paddingX="12px"
       paddingY="6px"
-      bg="#FFFFFF"
+      bg="white"
       _hover={{
-        bg: "#F5F6F8",
+        bg: "background.highlight",
       }}
       _active={{
-        bg: "#F5F6F8",
+        bg: "background.highlight",
       }}
     >
       <Flex alignItems="center" gap="5px">
         {icon}
-        <Text textStyle="web.s1" color={text_color}>
+        <Text textStyle="s2" color={text_color}>
           {label}
         </Text>
       </Flex>
diff --git a/frontend/src/ui/buttons/GreenOutlineButton.tsx b/frontend/src/ui/buttons/GreenOutlineButton.tsx
index effce4a8..f6ae7542 100644
--- a/frontend/src/ui/buttons/GreenOutlineButton.tsx
+++ b/frontend/src/ui/buttons/GreenOutlineButton.tsx
@@ -20,20 +20,20 @@ export default function GreenOutlineButton({
       height="fit-content"
       paddingX="12px"
       paddingY="6px"
-      bg="#FFFFFF"
+      bg="white"
       color="#0C727E"
       _hover={{
-        color: "#FFFFFF",
-        bg: "#0C727E",
+        color: "white",
+        bg: "brand.primaryDark",
       }}
       _active={{
-        color: "#FFFFFF",
-        bg: "#0C727E",
+        color: "white",
+        bg: "brand.primaryDark",
       }}
     >
-      <Flex alignItems="center" gap="5px">
+      <Flex alignItems="center" gap="6px">
         {icon}
-        <Text textStyle="web.s1" color="inherit">
+        <Text textStyle="s2" color="inherit">
           {label}
         </Text>
       </Flex>
diff --git a/frontend/src/ui/buttons/OrangeButton.tsx b/frontend/src/ui/buttons/OrangeButton.tsx
index 98dcbdbd..e3af0af7 100644
--- a/frontend/src/ui/buttons/OrangeButton.tsx
+++ b/frontend/src/ui/buttons/OrangeButton.tsx
@@ -15,24 +15,24 @@ export default function OrangeButton({
       cursor="pointer"
       borderRadius="8px"
       border="1px"
-      borderColor="#E67D4F"
+      borderColor="brand.secondaryDark"
       width="fit-content"
       height="fit-content"
       paddingX="12px"
       paddingY="6px"
-      bg="#E67D4F"
+      bg="brand.secondaryDark"
       _hover={{
-        borderColor: "#D76A3B",
-        bg: "#D76A3B",
+        borderColor: "#D9764A",
+        bg: "#D9764A",
       }}
       _active={{
-        borderColor: "#D76A3B",
-        bg: "#D76A3B",
+        borderColor: "#D9764A",
+        bg: "#D9764A",
       }}
     >
-      <Flex alignItems="center" gap="5px">
+      <Flex alignItems="center" gap="6px">
         {icon}
-        <Text textStyle="web.s1" color="#FFFFFF">
+        <Text textStyle="s2" color="white">
           {label}
         </Text>
       </Flex>
diff --git a/frontend/src/ui/buttons/ToggleButton.tsx b/frontend/src/ui/buttons/ToggleButton.tsx
index 1e49de68..8c1f782a 100644
--- a/frontend/src/ui/buttons/ToggleButton.tsx
+++ b/frontend/src/ui/buttons/ToggleButton.tsx
@@ -14,7 +14,7 @@ export default function ToggleButton({ active, setActive }: ToggleButtonProps) {
       width="42px"
       height="24px"
       borderRadius="16px"
-      bg={active ? "primary.700" : "neutral.300"}
+      bg={active ? "brand.primaryDark" : "background.border"}
       cursor="pointer"
       transition="background-color 0.3s ease"
       onClick={() => setActive(!active)}
@@ -32,7 +32,7 @@ export default function ToggleButton({ active, setActive }: ToggleButtonProps) {
         width="16px"
         height="16px"
         borderRadius="50%"
-        bg="neutral.0"
+        bg="white"
         transition="left 0.3s ease"
         boxShadow="0 2px 4px rgba(0, 0, 0, 0.2)"
       />
diff --git a/frontend/src/ui/buttons/UnderlineButton.tsx b/frontend/src/ui/buttons/UnderlineButton.tsx
index 3623999b..1188942f 100644
--- a/frontend/src/ui/buttons/UnderlineButton.tsx
+++ b/frontend/src/ui/buttons/UnderlineButton.tsx
@@ -21,10 +21,9 @@ export default function UnderlineButton({
       }}
     >
       <Text
-        textStyle="web.s1"
-        color="black"
+        textStyle="s2"
+        color="text.dark"
         textDecoration="underline"
-        fontWeight={600}
         _hover={{
           textDecoration: "none",
         }}
diff --git a/frontend/src/ui/containers/PopupContainer.tsx b/frontend/src/ui/containers/PopupContainer.tsx
index 00625da8..3471dca0 100644
--- a/frontend/src/ui/containers/PopupContainer.tsx
+++ b/frontend/src/ui/containers/PopupContainer.tsx
@@ -56,7 +56,7 @@ export default function PopupContainer({
         gap="8px"
       >
         <Flex justifyContent="space-between" alignItems="baseline">
-          <Text textStyle="web.h3" mb="4px" mr="20px">
+          <Text textStyle="h3" mb="4px" mr="20px">
             {title}
           </Text>
           <Flex gap="5px">
@@ -65,8 +65,8 @@ export default function PopupContainer({
                 label="Edit"
                 action={edit_action}
                 is_active={false}
-                text_color="primary.700"
-                icon={<Marker color="primary.700" />}
+                text_color="brand.primaryDark"
+                icon={<Marker color="brand.primaryDark" />}
               />
             )}
             {delete_action && (
@@ -74,7 +74,7 @@ export default function PopupContainer({
                 label="Delete"
                 action={delete_action}
                 is_active={false}
-                text_color="#E30000"
+                text_color="indicate.brightRed"
                 icon={<Trash />}
               />
             )}
@@ -89,29 +89,26 @@ export default function PopupContainer({
             alignItems="center"
             paddingY="10px"
           >
-            <Spinner size="md" color="primary.700" />
+            <Spinner size="md" color="brand.primaryDark" />
           </Flex>
         ) : system_error ? (
           <Flex flexDir="column" gap="2px" paddingY="10px">
-            <Text textStyle="web.b2" color="#E30000" textAlign="center">
+            <Text textStyle="s1" color="indicate.brightRed" textAlign="center">
               ERROR
             </Text>
-            <Text
-              textStyle="web.b2"
-              color="text.light.secondary"
-              textAlign="center"
-            >
+            <Text textStyle="b1" color="text.medium" textAlign="center">
               Something went wrong.
             </Text>
           </Flex>
         ) : (
-          children
-        )}
-
-        {error_message && (
-          <Text textStyle="web.b2" color="#E30000">
-            {error_message}
-          </Text>
+          <>
+            {children}
+            {error_message && (
+              <Text textStyle="b1" color="indicate.brightRed">
+                {error_message}
+              </Text>
+            )}
+          </>
         )}
 
         <Flex alignItems="center" justifyContent="flex-end" gap="12px" mt="8px">
diff --git a/frontend/src/ui/containers/WidgetContainer.tsx b/frontend/src/ui/containers/WidgetContainer.tsx
index f38d7c4a..0473011a 100644
--- a/frontend/src/ui/containers/WidgetContainer.tsx
+++ b/frontend/src/ui/containers/WidgetContainer.tsx
@@ -22,7 +22,6 @@ export default function WidgetContainer({
   loading = false,
   error = "",
 }: WidgetContainerProps) {
-
   return (
     <Box
       position="relative"
@@ -32,7 +31,7 @@ export default function WidgetContainer({
       paddingY={paddingY}
       bg={bg_color}
       border="1px solid"
-      borderColor="neutral.300"
+      borderColor="background.border"
       rounded="8px"
     >
       {loading ? (
@@ -42,7 +41,7 @@ export default function WidgetContainer({
           justifyContent="center"
           alignItems="center"
         >
-          <Spinner size="md" color="primary.700" />
+          <Spinner size="md" color="brand.primaryDark" />
         </Flex>
       ) : error !== "" ? (
         <Flex
@@ -53,14 +52,10 @@ export default function WidgetContainer({
           flexDir="column"
           gap="2px"
         >
-          <Text textStyle="web.b2" color="#E30000" textAlign="center">
+          <Text textStyle="s1" color="indicate.brightRed" textAlign="center">
             ERROR
           </Text>
-          <Text
-            textStyle="web.b2"
-            color="text.light.secondary"
-            textAlign="center"
-          >
+          <Text textStyle="b1" color="text.medium" textAlign="center">
             {error}
           </Text>
         </Flex>
diff --git a/frontend/src/ui/icons/ActionIcons.tsx b/frontend/src/ui/icons/ActionIcons.tsx
index f5b27681..5d584745 100644
--- a/frontend/src/ui/icons/ActionIcons.tsx
+++ b/frontend/src/ui/icons/ActionIcons.tsx
@@ -4,7 +4,7 @@ import useChakraColor from "../../hooks/useChakraColor";
 
 export const Comment: React.FC<IconProps> = ({
   size = 14,
-  color = "#626262",
+  color = "text.light",
 }) => {
   const iconColor = useChakraColor(color);
   return (
@@ -41,14 +41,23 @@ export const Pin: React.FC<IconProps> = ({ size = 16, color = "#0C727E" }) => {
   );
 };
 
-export const Pinned: React.FC<IconProps> = ({ size = 16, color = "#E67D4F" }) => {
+export const Pinned: React.FC<IconProps> = ({
+  size = 16,
+  color = "#E67D4F",
+}) => {
   const iconColor = useChakraColor(color);
   return (
-    <svg width={size} height={size} viewBox="0 0 10 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path 
-        fillRule="evenodd" 
-        clipRule="evenodd" 
-        d="M7.85714 5.25V1.5H8.57143C8.96429 1.5 9.28572 1.1625 9.28572 0.75C9.28572 0.3375 8.96429 0 8.57143 0H1.42857C1.03571 0 0.714286 0.3375 0.714286 0.75C0.714286 1.1625 1.03571 1.5 1.42857 1.5H2.14286V5.25C2.14286 6.495 1.18571 7.5 0 7.5V9H4.26429V14.25L4.97857 15L5.69286 14.25V9H10V7.5C8.81429 7.5 7.85714 6.495 7.85714 5.25Z" 
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 10 15"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.85714 5.25V1.5H8.57143C8.96429 1.5 9.28572 1.1625 9.28572 0.75C9.28572 0.3375 8.96429 0 8.57143 0H1.42857C1.03571 0 0.714286 0.3375 0.714286 0.75C0.714286 1.1625 1.03571 1.5 1.42857 1.5H2.14286V5.25C2.14286 6.495 1.18571 7.5 0 7.5V9H4.26429V14.25L4.97857 15L5.69286 14.25V9H10V7.5C8.81429 7.5 7.85714 6.495 7.85714 5.25Z"
         fill={iconColor}
       />
     </svg>
@@ -73,20 +82,25 @@ export const Marker: React.FC<IconProps> = ({ size = 16, color = "black" }) => {
   );
 };
 
-export const PlusSign: React.FC<IconProps> = ({
-  size = 14,
-  color = "white",
-}) => {
+export const Plus: React.FC<IconProps> = ({ size = 14, color = "white" }) => {
   const iconColor = useChakraColor(color);
   return (
     <svg
       width={size}
       height={size}
-      viewBox="0 0 14 14"
+      viewBox="0 0 24 24"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path d="M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z" fill={iconColor} />
+      <g id="SVGRepo_iconCarrier">
+        <path
+          d="M4 12H20M12 4V20"
+          stroke={iconColor}
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
     </svg>
   );
 };
@@ -143,9 +157,27 @@ export const MagnifyingGlass: React.FC<IconProps> = ({
   );
 };
 
+export const Download: React.FC<IconProps> = ({
+  size = 16,
+  color = "black",
+}) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M18 15V18H6V15H4V18C4 19.1 4.9 20 6 20H18C19.1 20 20 19.1 20 18V15H18ZM17 11L15.59 9.59L13 12.17V4H11V12.17L8.41 9.59L7 11L12 16L17 11Z"
+      fill={color}
+    />
+  </svg>
+);
+
 export const Trash: React.FC<IconProps> = ({
   size = 16,
-  color = "#E30000",
+  color = "indicate.brightRed",
 }) => {
   const iconColor = useChakraColor(color);
   return (
@@ -202,34 +234,57 @@ export const Trash: React.FC<IconProps> = ({
   );
 };
 
-export const Menu: React.FC<IconProps> = ({
-  size = 16,
-  color = "black",
-}) => {
+export const Menu: React.FC<IconProps> = ({ size = 16, color = "black" }) => {
   const iconColor = useChakraColor(color);
   return (
-    <svg width={size} height={size} viewBox="0 0 26 17" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path 
-      d="M0.791677 16.6868C0.566844 16.6868 0.378955 16.6102 0.228011 16.4572C0.0770665 16.3041 0.0010664 16.1157 1.08447e-05 15.8919C-0.00104471 15.6681 0.0749554 15.4803 0.228011 15.3282C0.381066 15.1763 0.568955 15.1008 0.791677 15.1018H24.5417C24.7665 15.1018 24.9544 15.1778 25.1053 15.3298C25.2573 15.4818 25.3333 15.6702 25.3333 15.8951C25.3333 16.1199 25.2573 16.3078 25.1053 16.4587C24.9533 16.6097 24.7655 16.6852 24.5417 16.6852L0.791677 16.6868ZM0.791677 9.13425C0.566844 9.13425 0.378955 9.05825 0.228011 8.90625C0.0770665 8.75425 0.0010664 8.56583 1.08447e-05 8.341C-0.00104471 8.11617 0.0749554 7.92828 0.228011 7.77733C0.381066 7.62639 0.568955 7.55092 0.791677 7.55092H24.5417C24.7665 7.55092 24.9544 7.62692 25.1053 7.77892C25.2563 7.93092 25.3323 8.11933 25.3333 8.34417C25.3344 8.569 25.2584 8.75689 25.1053 8.90783C24.9523 9.05878 24.7644 9.13425 24.5417 9.13425H0.791677ZM0.791677 1.58175C0.566844 1.58175 0.378955 1.50628 0.228011 1.35533C0.0760109 1.20333 1.08447e-05 1.01492 1.08447e-05 0.790083C1.08447e-05 0.56525 0.0760109 0.377361 0.228011 0.226417C0.380011 0.0754724 0.5679 0 0.791677 0H24.5417C24.7665 0 24.9544 0.0760001 25.1053 0.228C25.2563 0.38 25.3323 0.567361 25.3333 0.790083C25.3344 1.01281 25.2584 1.20069 25.1053 1.35375C24.9523 1.50681 24.7644 1.58281 24.5417 1.58175H0.791677Z" 
-      fill={iconColor}
-    />
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 26 17"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M0.791677 16.6868C0.566844 16.6868 0.378955 16.6102 0.228011 16.4572C0.0770665 16.3041 0.0010664 16.1157 1.08447e-05 15.8919C-0.00104471 15.6681 0.0749554 15.4803 0.228011 15.3282C0.381066 15.1763 0.568955 15.1008 0.791677 15.1018H24.5417C24.7665 15.1018 24.9544 15.1778 25.1053 15.3298C25.2573 15.4818 25.3333 15.6702 25.3333 15.8951C25.3333 16.1199 25.2573 16.3078 25.1053 16.4587C24.9533 16.6097 24.7655 16.6852 24.5417 16.6852L0.791677 16.6868ZM0.791677 9.13425C0.566844 9.13425 0.378955 9.05825 0.228011 8.90625C0.0770665 8.75425 0.0010664 8.56583 1.08447e-05 8.341C-0.00104471 8.11617 0.0749554 7.92828 0.228011 7.77733C0.381066 7.62639 0.568955 7.55092 0.791677 7.55092H24.5417C24.7665 7.55092 24.9544 7.62692 25.1053 7.77892C25.2563 7.93092 25.3323 8.11933 25.3333 8.34417C25.3344 8.569 25.2584 8.75689 25.1053 8.90783C24.9523 9.05878 24.7644 9.13425 24.5417 9.13425H0.791677ZM0.791677 1.58175C0.566844 1.58175 0.378955 1.50628 0.228011 1.35533C0.0760109 1.20333 1.08447e-05 1.01492 1.08447e-05 0.790083C1.08447e-05 0.56525 0.0760109 0.377361 0.228011 0.226417C0.380011 0.0754724 0.5679 0 0.791677 0H24.5417C24.7665 0 24.9544 0.0760001 25.1053 0.228C25.2563 0.38 25.3323 0.567361 25.3333 0.790083C25.3344 1.01281 25.2584 1.20069 25.1053 1.35375C24.9523 1.50681 24.7644 1.58281 24.5417 1.58175H0.791677Z"
+        fill={iconColor}
+      />
     </svg>
   );
 };
 
-export const Cross: React.FC<IconProps> = ({
-  size = 16,
-  color = "black",
-}) => {
+export const Cross: React.FC<IconProps> = ({ size = 16, color = "black" }) => {
   const iconColor = useChakraColor(color);
   return (
-    <svg width={size} height={size} viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
-      <path 
-        d="M18.2267 18L1 1M18.2267 1L1 18" 
-        stroke={iconColor} 
-        strokeWidth="2" 
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.2267 18L1 1M18.2267 1L1 18"
+        stroke={iconColor}
+        strokeWidth="2"
         strokeLinecap="round"
       />
     </svg>
   );
 };
+
+export const Swap: React.FC<IconProps> = ({ size = 14, color = "#0C727E" }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 14 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M9.33366 6.41667L11.667 4.08333M11.667 4.08333L9.33366 1.75M11.667 4.08333H2.33366M4.66699 7.58333L2.33366 9.91667M2.33366 9.91667L4.66699 12.25M2.33366 9.91667H11.667"
+      stroke={color}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
diff --git a/frontend/src/ui/icons/BadgeLevelFrameIcons.tsx b/frontend/src/ui/icons/BadgeLevelFrameIcons.tsx
index dc98d0f6..b7d1c80d 100644
--- a/frontend/src/ui/icons/BadgeLevelFrameIcons.tsx
+++ b/frontend/src/ui/icons/BadgeLevelFrameIcons.tsx
@@ -227,35 +227,62 @@ export const Diamond: React.FC<IconProps> = ({ size = 16 }) => (
 );
 
 export const Custom: React.FC<IconProps> = ({ size = 16 }) => (
-  <svg width={size} height={size} viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path 
-      d="M76 38C76 58.9868 58.9868 76 38 76C17.0132 76 0 58.9868 0 38C0 17.0132 17.0132 0 38 0C58.9868 0 76 17.0132 76 38Z" 
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 76 76"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M76 38C76 58.9868 58.9868 76 38 76C17.0132 76 0 58.9868 0 38C0 17.0132 17.0132 0 38 0C58.9868 0 76 17.0132 76 38Z"
       fill="url(#paint0_linear_1_2)"
     />
-    <path 
-      d="M76 38C76 58.9868 58.9868 76 38 76C17.0132 76 0 58.9868 0 38C0 17.0132 17.0132 0 38 0C58.9868 0 76 17.0132 76 38ZM7.07397 38C7.07397 55.08 20.92 68.926 38 68.926C55.08 68.926 68.926 55.08 68.926 38C68.926 20.92 55.08 7.07397 38 7.07397C20.92 7.07397 7.07397 20.92 7.07397 38Z" 
+    <path
+      d="M76 38C76 58.9868 58.9868 76 38 76C17.0132 76 0 58.9868 0 38C0 17.0132 17.0132 0 38 0C58.9868 0 76 17.0132 76 38ZM7.07397 38C7.07397 55.08 20.92 68.926 38 68.926C55.08 68.926 68.926 55.08 68.926 38C68.926 20.92 55.08 7.07397 38 7.07397C20.92 7.07397 7.07397 20.92 7.07397 38Z"
       fill="#0C727E"
     />
-    <path 
-      d="M38 0L44.079 7.43873L52.542 2.89258L55.3116 12.0914L64.8701 11.1299L63.9086 20.6884L73.1074 23.458L68.5613 31.921L76 38L68.5613 44.079L73.1074 52.542L63.9086 55.3116L64.8701 64.8701L55.3116 63.9086L52.542 73.1074L44.079 68.5613L38 76L31.921 68.5613L23.458 73.1074L20.6884 63.9086L11.1299 64.8701L12.0914 55.3116L2.89258 52.542L7.43873 44.079L0 38L7.43873 31.921L2.89258 23.458L12.0914 20.6884L11.1299 11.1299L20.6884 12.0914L23.458 2.89258L31.921 7.43873L38 0Z" 
+    <path
+      d="M38 0L44.079 7.43873L52.542 2.89258L55.3116 12.0914L64.8701 11.1299L63.9086 20.6884L73.1074 23.458L68.5613 31.921L76 38L68.5613 44.079L73.1074 52.542L63.9086 55.3116L64.8701 64.8701L55.3116 63.9086L52.542 73.1074L44.079 68.5613L38 76L31.921 68.5613L23.458 73.1074L20.6884 63.9086L11.1299 64.8701L12.0914 55.3116L2.89258 52.542L7.43873 44.079L0 38L7.43873 31.921L2.89258 23.458L12.0914 20.6884L11.1299 11.1299L20.6884 12.0914L23.458 2.89258L31.921 7.43873L38 0Z"
       fill="url(#paint1_linear_1_2)"
     />
-    <path 
-      d="M38.0002 68.9263C20.9203 68.9263 7.07422 55.0802 7.07422 38.0002C7.07422 20.9203 20.9203 7.07422 38.0002 7.07422C55.0802 7.07422 68.9263 20.9203 68.9263 38.0002C68.9263 55.0802 55.0802 68.9263 38.0002 68.9263Z" 
+    <path
+      d="M38.0002 68.9263C20.9203 68.9263 7.07422 55.0802 7.07422 38.0002C7.07422 20.9203 20.9203 7.07422 38.0002 7.07422C55.0802 7.07422 68.9263 20.9203 68.9263 38.0002C68.9263 55.0802 55.0802 68.9263 38.0002 68.9263Z"
       fill="url(#paint2_linear_1_2)"
     />
     <defs>
-      <linearGradient id="paint0_linear_1_2" x1="38" y1="0" x2="38" y2="76" gradientUnits="userSpaceOnUse">
-        <stop stopColor="#F7DA0C"/>
-        <stop offset="1" stopColor="#F7C208"/>
+      <linearGradient
+        id="paint0_linear_1_2"
+        x1="38"
+        y1="0"
+        x2="38"
+        y2="76"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#F7DA0C" />
+        <stop offset="1" stopColor="#F7C208" />
       </linearGradient>
-      <linearGradient id="paint1_linear_1_2" x1="38" y1="0" x2="38" y2="76" gradientUnits="userSpaceOnUse">
-        <stop stopColor="#F4B396"/>
-        <stop offset="1" stopColor="#0C727E"/>
+      <linearGradient
+        id="paint1_linear_1_2"
+        x1="38"
+        y1="0"
+        x2="38"
+        y2="76"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#F4B396" />
+        <stop offset="1" stopColor="#0C727E" />
       </linearGradient>
-      <linearGradient id="paint2_linear_1_2" x1="38.0002" y1="7.07422" x2="38.0002" y2="68.9263" gradientUnits="userSpaceOnUse">
-        <stop stopColor="#F2BCA2"/>
-        <stop offset="1" stopColor="#E67D4F"/>
+      <linearGradient
+        id="paint2_linear_1_2"
+        x1="38.0002"
+        y1="7.07422"
+        x2="38.0002"
+        y2="68.9263"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#F2BCA2" />
+        <stop offset="1" stopColor="#E67D4F" />
       </linearGradient>
     </defs>
   </svg>
diff --git a/frontend/src/ui/icons/MiscIcons.tsx b/frontend/src/ui/icons/MiscIcons.tsx
index 764a6d30..b82930d3 100644
--- a/frontend/src/ui/icons/MiscIcons.tsx
+++ b/frontend/src/ui/icons/MiscIcons.tsx
@@ -3,7 +3,7 @@ import { IconProps } from "../../types/component";
 import useChakraColor from "../../hooks/useChakraColor";
 
 export const Calendar: React.FC<IconProps> = ({
-  size = 14,
+  size = 12,
   color = "#E67D4F",
 }) => {
   const iconColor = useChakraColor(color);
@@ -25,7 +25,7 @@ export const Calendar: React.FC<IconProps> = ({
   );
 };
 
-export const List: React.FC<IconProps> = ({ size = 12, color = "#E67D4F" }) => {
+export const List: React.FC<IconProps> = ({ size = 10, color = "#E67D4F" }) => {
   const iconColor = useChakraColor(color);
   return (
     <svg
@@ -214,11 +214,100 @@ export const Trophy: React.FC<IconProps> = ({ size = 16 }) => (
   </svg>
 );
 
+export const ExitDoor: React.FC<IconProps> = ({
+  size = 16,
+  color = "indicate.brightRed",
+}) => {
+  const iconColor = useChakraColor(color);
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.66634 2.66647H10.6663C11.02 2.66647 11.3591 2.80695 11.6091 3.057C11.8592 3.30705 11.9997 3.64618 11.9997 3.99981V13.3331M1.33301 13.3331H3.33301M3.33301 13.3331L7.83834 14.4591C7.9366 14.4836 8.03914 14.4854 8.1382 14.4644C8.23725 14.4434 8.33021 14.4 8.41002 14.3377C8.48983 14.2754 8.55439 14.1957 8.5988 14.1047C8.64322 14.0137 8.66631 13.9137 8.66634 13.8125V3.04114C8.66621 2.83859 8.61993 2.63807 8.53103 2.45608C8.44212 2.27409 8.31292 2.11475 8.15323 1.99015C7.99355 1.86555 7.80757 1.77897 7.60943 1.73698C7.41128 1.69498 7.20617 1.69869 7.00967 1.74781L4.34301 2.41447C4.05456 2.48657 3.79848 2.65302 3.61548 2.88736C3.43248 3.1217 3.33305 3.41048 3.33301 3.70781V13.3331ZM8.66634 13.3331H14.6663M6.66634 7.99981V8.00647"
+        stroke={iconColor}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+      />
+    </svg>
+  );
+};
+
 export const Triangle: React.FC<IconProps> = ({ size = 12 }) => (
-  <svg width={size} height={size} viewBox="0 0 12 11" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path 
-      d="M4.79035 0.506928C5.17342 -0.169033 6.14732 -0.169033 6.53038 0.506929L11.1896 8.72865C11.5673 9.39529 11.0858 10.2217 10.3195 10.2217L1.00119 10.2217C0.234953 10.2217 -0.246602 9.39528 0.131174 8.72865L4.79035 0.506928Z" 
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 12 11"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4.79035 0.506928C5.17342 -0.169033 6.14732 -0.169033 6.53038 0.506929L11.1896 8.72865C11.5673 9.39529 11.0858 10.2217 10.3195 10.2217L1.00119 10.2217C0.234953 10.2217 -0.246602 9.39528 0.131174 8.72865L4.79035 0.506928Z"
       fill="#0C727E"
     />
   </svg>
 );
+
+export const Eye: React.FC<IconProps> = ({
+  size = 16,
+  color = "text.medium",
+}) => {
+  const iconColor = useChakraColor(color);
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="SVGRepo_iconCarrier">
+        <path
+          d="M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z"
+          stroke={iconColor}
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z"
+          stroke={iconColor}
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};
+
+export const ClosedEye: React.FC<IconProps> = ({
+  size = 16,
+  color = "text.medium",
+}) => {
+  const iconColor = useChakraColor(color);
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g id="SVGRepo_iconCarrier">
+        <path
+          d="M2.99902 3L20.999 21M9.8433 9.91364C9.32066 10.4536 8.99902 11.1892 8.99902 12C8.99902 13.6569 10.3422 15 11.999 15C12.8215 15 13.5667 14.669 14.1086 14.133M6.49902 6.64715C4.59972 7.90034 3.15305 9.78394 2.45703 12C3.73128 16.0571 7.52159 19 11.9992 19C13.9881 19 15.8414 18.4194 17.3988 17.4184M10.999 5.04939C11.328 5.01673 11.6617 5 11.9992 5C16.4769 5 20.2672 7.94291 21.5414 12C21.2607 12.894 20.8577 13.7338 20.3522 14.5"
+          stroke={iconColor}
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};
diff --git a/frontend/src/ui/icons/NotificationIcons.tsx b/frontend/src/ui/icons/NotificationIcons.tsx
index 16cf65b2..a6111bba 100644
--- a/frontend/src/ui/icons/NotificationIcons.tsx
+++ b/frontend/src/ui/icons/NotificationIcons.tsx
@@ -36,8 +36,8 @@ export const Dot: React.FC<IconProps> = ({ size = 12, color = "#E67D4F" }) => {
 };
 
 export const ExclamationMark: React.FC<IconProps> = ({
-  size = 14,
-  color = "#D34C5C",
+  size = 12,
+  color = "indicate.brightRed",
 }) => {
   const iconColor = useChakraColor(color);
   return (
diff --git a/frontend/src/ui/icons/todo.txt b/frontend/src/ui/icons/todo.txt
deleted file mode 100644
index 3f856b6c..00000000
--- a/frontend/src/ui/icons/todo.txt
+++ /dev/null
@@ -1 +0,0 @@
-TODO (calista): Import remaining SVGs from Figma and turn them into React FC's
\ No newline at end of file
diff --git a/frontend/src/ui/inputs/DateInput.tsx b/frontend/src/ui/inputs/DateInput.tsx
index 1210df12..b220d938 100644
--- a/frontend/src/ui/inputs/DateInput.tsx
+++ b/frontend/src/ui/inputs/DateInput.tsx
@@ -17,7 +17,7 @@ export default function DateInput({
   return (
     <FormControl>
       {label && (
-        <Text textStyle="web.s1" color="text.light.secondary" mb="4px">
+        <Text textStyle="s2" mb="4px">
           {label}
         </Text>
       )}
@@ -35,7 +35,7 @@ export default function DateInput({
         fontFamily="Nunito"
         fontWeight="400"
         fontSize="12px"
-        color="#000000"
+        color="text.dark"
         _focus={{
           borderColor: "#C5C8D8",
           boxShadow: "none",
diff --git a/frontend/src/ui/inputs/DropdownInput.tsx b/frontend/src/ui/inputs/DropdownInput.tsx
index b15338fc..7652d549 100644
--- a/frontend/src/ui/inputs/DropdownInput.tsx
+++ b/frontend/src/ui/inputs/DropdownInput.tsx
@@ -1,5 +1,3 @@
-// TODO: Refactor the dropdown to match the Figma design
-
 import React from "react";
 import { FormControl, Text, Select } from "@chakra-ui/react";
 import { InputProps } from "../../types/component";
@@ -21,7 +19,7 @@ export default function DropdownInput({
   return (
     <FormControl>
       {label && (
-        <Text textStyle="web.s1" color="text.light.secondary" mb="4px">
+        <Text textStyle="s2" mb="4px">
           {label}
         </Text>
       )}
@@ -36,7 +34,7 @@ export default function DropdownInput({
         fontFamily="Nunito"
         fontWeight="400"
         fontSize="12px"
-        color="#000000"
+        color="text.dark"
         _focus={{
           borderColor: "#C5C8D8",
           boxShadow: "none",
diff --git a/frontend/src/ui/inputs/FixedInput.tsx b/frontend/src/ui/inputs/FixedInput.tsx
index fe930285..c9a54944 100644
--- a/frontend/src/ui/inputs/FixedInput.tsx
+++ b/frontend/src/ui/inputs/FixedInput.tsx
@@ -13,17 +13,13 @@ export default function FixedInput({
 }: FixedInputProps) {
   return (
     <Flex
-      gap="5px"
+      gap="6px"
       alignItems="flex-start"
       flexDir={orientation === "horizontal" ? "row" : "column"}
       mb="4px"
     >
-      <Text textStyle="web.s1" color="text.light.secondary">
-        {label}
-      </Text>
-      <Text textStyle="web.b3" color="text.light.primary">
-        {current_value}
-      </Text>
+      <Text textStyle="s2">{label}</Text>
+      <Text textStyle="b2">{current_value}</Text>
     </Flex>
   );
 }
diff --git a/frontend/src/ui/inputs/NumberInput.tsx b/frontend/src/ui/inputs/NumberInput.tsx
index 8a4ecab9..e9b28a73 100644
--- a/frontend/src/ui/inputs/NumberInput.tsx
+++ b/frontend/src/ui/inputs/NumberInput.tsx
@@ -14,7 +14,7 @@ export default function NumberInput({
   return (
     <FormControl>
       {label && (
-        <Text textStyle="web.s1" color="text.light.secondary" mb="4px">
+        <Text textStyle="s2" mb="4px">
           {label}
         </Text>
       )}
@@ -36,7 +36,7 @@ export default function NumberInput({
         fontFamily="Nunito"
         fontWeight="400"
         fontSize="12px"
-        color="#000000"
+        color="text.dark"
         _focus={{
           borderColor: "#C5C8D8",
           boxShadow: "none",
diff --git a/frontend/src/ui/inputs/PasswordInput.tsx b/frontend/src/ui/inputs/PasswordInput.tsx
index 5b566e83..019e5dab 100644
--- a/frontend/src/ui/inputs/PasswordInput.tsx
+++ b/frontend/src/ui/inputs/PasswordInput.tsx
@@ -1,6 +1,14 @@
-import React from "react";
-import { FormControl, Input, Text } from "@chakra-ui/react";
+import React, { useState } from "react";
+import {
+  FormControl,
+  Input,
+  Text,
+  InputGroup,
+  InputRightElement,
+  IconButton,
+} from "@chakra-ui/react";
 import { InputProps } from "../../types/component";
+import { Eye, ClosedEye } from "../icons/MiscIcons";
 
 export default function PasswordInput({
   label,
@@ -9,37 +17,48 @@ export default function PasswordInput({
   update_action,
   size,
 }: InputProps) {
-  // TODO: add icon for password visibility toggle and handle click event (i.e. input type is text if visible, password if not)
+  const [showPassword, setShowPassword] = useState(false);
   const width =
     size === "small" ? "100px" : size === "medium" ? "250px" : "400px";
   return (
     <FormControl>
       {label && (
-        <Text textStyle="web.s1" color="text.light.secondary" mb="4px">
+        <Text textStyle="s2" mb="4px">
           {label}
         </Text>
       )}
-      <Input
-        type="password"
-        value={current_value}
-        placeholder={placeholder}
-        onChange={(e) => update_action(e.target.value)}
-        width={width}
-        height="fit-content"
-        paddingX="12px"
-        paddingY="6px"
-        border="1px"
-        borderColor="#C5C8D8"
-        borderRadius="8px"
-        fontFamily="Nunito"
-        fontWeight="400"
-        fontSize="12px"
-        color="#000000"
-        _focus={{
-          borderColor: "#C5C8D8",
-          boxShadow: "none",
-        }}
-      />
+      <InputGroup>
+        <Input
+          type={showPassword ? "text" : "password"}
+          value={current_value}
+          placeholder={placeholder}
+          onChange={(e) => update_action(e.target.value)}
+          width={width}
+          height="fit-content"
+          paddingX="12px"
+          paddingY="6px"
+          border="1px"
+          borderColor="#C5C8D8"
+          borderRadius="8px"
+          fontFamily="Nunito"
+          fontWeight="400"
+          fontSize="12px"
+          color="text.dark"
+          _focus={{
+            borderColor: "#C5C8D8",
+            boxShadow: "none",
+          }}
+        />
+        <InputRightElement h="100%" display="flex" alignItems="center">
+          <IconButton
+            aria-label="Toggle password visibility"
+            icon={showPassword ? <Eye /> : <ClosedEye />}
+            onClick={() => setShowPassword(!showPassword)}
+            bg="transparent"
+            _hover={{ bg: "transparent" }}
+          />
+        </InputRightElement>
+      </InputGroup>
     </FormControl>
   );
 }
diff --git a/frontend/src/ui/inputs/SelectInput.tsx b/frontend/src/ui/inputs/SelectInput.tsx
index 93fc6649..aacb909c 100644
--- a/frontend/src/ui/inputs/SelectInput.tsx
+++ b/frontend/src/ui/inputs/SelectInput.tsx
@@ -15,7 +15,7 @@ export default function SelectInput({
   return (
     <FormControl>
       {label && (
-        <Text textStyle="web.s1" color="text.light.secondary" mb="4px">
+        <Text textStyle="s2" mb="4px">
           {label}
         </Text>
       )}
@@ -35,10 +35,10 @@ export default function SelectInput({
                 boxShadow: "none",
               }}
               _checked={{
-                bg: "#0C727E",
+                bg: "brand.primaryDark",
               }}
             >
-              <Text textStyle="web.b3" color="#000000">
+              <Text textStyle="b2" color="text.dark">
                 {key}
               </Text>
             </Radio>
diff --git a/frontend/src/ui/inputs/TextAreaInput.tsx b/frontend/src/ui/inputs/TextAreaInput.tsx
index d9db891c..38ac6afb 100644
--- a/frontend/src/ui/inputs/TextAreaInput.tsx
+++ b/frontend/src/ui/inputs/TextAreaInput.tsx
@@ -13,7 +13,7 @@ export default function TextAreaInput({
   return (
     <FormControl>
       {label && (
-        <Text textStyle="web.s1" color="text.light.secondary" mb="4px">
+        <Text textStyle="s2" mb="4px">
           {label}
         </Text>
       )}
@@ -30,7 +30,7 @@ export default function TextAreaInput({
         fontFamily="Nunito"
         fontWeight="400"
         fontSize="12px"
-        color="#000000"
+        color="text.dark"
         _focus={{
           borderColor: "#C5C8D8",
           boxShadow: "none",
diff --git a/frontend/src/ui/inputs/TextInput.tsx b/frontend/src/ui/inputs/TextInput.tsx
index d65e544a..6af5aeab 100644
--- a/frontend/src/ui/inputs/TextInput.tsx
+++ b/frontend/src/ui/inputs/TextInput.tsx
@@ -13,7 +13,7 @@ export default function TextInput({
   return (
     <FormControl width="100%">
       {label && (
-        <Text textStyle="web.s1" color="text.light.secondary" mb="4px">
+        <Text textStyle="s2" mb="4px">
           {label}
         </Text>
       )}
@@ -27,14 +27,14 @@ export default function TextInput({
           paddingX="12px"
           paddingY="6px"
           border="1px"
-          borderColor="neutral.300"
+          borderColor="background.border"
           borderRadius="8px"
           fontFamily="Nunito"
           fontWeight="400"
           fontSize="12px"
-          color="text.light.primary"
+          color="text.dark"
           _focus={{
-            borderColor: "neutral.300",
+            borderColor: "background.border",
             boxShadow: "none",
           }}
         />
diff --git a/frontend/src/ui/inputs/TimeInput.tsx b/frontend/src/ui/inputs/TimeInput.tsx
index e1a0d35c..e2349259 100644
--- a/frontend/src/ui/inputs/TimeInput.tsx
+++ b/frontend/src/ui/inputs/TimeInput.tsx
@@ -17,7 +17,7 @@ export default function TimeInput({
   return (
     <FormControl>
       {label && (
-        <Text textStyle="web.s1" color="text.light.secondary" mb="4px">
+        <Text textStyle="s2" mb="4px">
           {label}
         </Text>
       )}
@@ -35,7 +35,7 @@ export default function TimeInput({
         fontFamily="Nunito"
         fontWeight="400"
         fontSize="12px"
-        color="#000000"
+        color="text.dark"
         _focus={{
           borderColor: "#C5C8D8",
           boxShadow: "none",
diff --git a/frontend/src/ui/misc/DataTable.tsx b/frontend/src/ui/misc/DataTable.tsx
index 14cd974c..fe2bb192 100644
--- a/frontend/src/ui/misc/DataTable.tsx
+++ b/frontend/src/ui/misc/DataTable.tsx
@@ -35,18 +35,18 @@ const DataTable = ({ loading, error, columns, rows }: DataTableProps) => {
   return (
     <TableContainer
       border="1px solid"
-      borderColor="neutral.300"
+      borderColor="background.border"
       borderRadius="8px"
       w="100%"
     >
       <Table>
         <Thead>
-          <Tr backgroundColor="neutral.200" w="100%">
+          <Tr backgroundColor="background.highlight" w="100%">
             {columns.map((col: Column, index: number) => (
               <Th width={col.width} key={index}>
                 <Text
-                  textStyle="web.s1"
-                  color="#000000"
+                  textStyle="s2"
+                  color="text.dark"
                   textTransform="none"
                   textAlign={col.center ? "center" : "left"}
                 >
@@ -58,23 +58,23 @@ const DataTable = ({ loading, error, columns, rows }: DataTableProps) => {
         </Thead>
         <Tbody>
           {loading ? (
-            <Tr outline="1px solid" outlineColor="neutral.300">
+            <Tr outline="1px solid" outlineColor="background.border">
               <Td colSpan={6} textAlign="center" paddingY="50px">
-                <Spinner size="md" color="primary.700" />
+                <Spinner size="md" color="brand.primaryDark" />
               </Td>
             </Tr>
           ) : error ? (
-            <Tr outline="1px solid" outlineColor="neutral.300">
+            <Tr outline="1px solid" outlineColor="background.border">
               <Td colSpan={6} paddingY="50px">
                 <Flex flexDir="column" gap="2px">
-                  <Text textStyle="web.b2" color="#E30000" textAlign="center">
-                    ERROR
-                  </Text>
                   <Text
-                    textStyle="web.b2"
-                    color="text.light.secondary"
+                    textStyle="s1"
+                    color="indicate.brightRed"
                     textAlign="center"
                   >
+                    ERROR
+                  </Text>
+                  <Text textStyle="b1" color="text.medium" textAlign="center">
                     {error}
                   </Text>
                 </Flex>
@@ -85,7 +85,7 @@ const DataTable = ({ loading, error, columns, rows }: DataTableProps) => {
               <Tr
                 key={index}
                 outline={index % 2 ? "0px solid" : "1px solid"}
-                outlineColor="neutral.300"
+                outlineColor="background.border"
               >
                 {row.map((cell: Row, cellIndex: number) => (
                   <Td key={cellIndex}>
@@ -114,11 +114,7 @@ const DataTable = ({ loading, error, columns, rows }: DataTableProps) => {
                         </Button>
                       </Flex>
                     ) : (
-                      <Text
-                        textStyle="web.b3"
-                        color="text.light.primary"
-                        textAlign="left"
-                      >
+                      <Text textStyle="b2" textAlign="left">
                         {cell.element}
                       </Text>
                     )}
diff --git a/frontend/src/ui/misc/DateOptions.tsx b/frontend/src/ui/misc/DateOptions.tsx
index 5d02e2a5..d3a96654 100644
--- a/frontend/src/ui/misc/DateOptions.tsx
+++ b/frontend/src/ui/misc/DateOptions.tsx
@@ -113,14 +113,14 @@ export default function DateOptions({
   return (
     <>
       {taskType !== TaskType.REQUIRED && showParticipantPreference && (
-        <Flex alignItems="center" gap="5px" pt="3px">
+        <Flex alignItems="center" gap="8px" pt="3px">
+          <Text textStyle="s2" color="text.dark">
+            Participant Preference
+          </Text>
           <Checkbox
             isChecked={participantPreference}
             onChange={(e: any) => setParticipantPreference(e.target.checked)}
           />
-          <Text textStyle="web.b3" color="#000000">
-            Participant Preference?
-          </Text>
         </Flex>
       )}
 
@@ -137,7 +137,7 @@ export default function DateOptions({
             }}
           />
 
-          <Flex gap="5px">
+          <Flex gap="5px" mb="2px">
             {DAYS.map((day: DayOfWeek, index) => (
               <GreenOutlineButton
                 key={index}
diff --git a/frontend/src/ui/misc/MarillacPlaceCalendar.tsx b/frontend/src/ui/misc/MarillacPlaceCalendar.tsx
index 12c8c56e..0482bfb8 100644
--- a/frontend/src/ui/misc/MarillacPlaceCalendar.tsx
+++ b/frontend/src/ui/misc/MarillacPlaceCalendar.tsx
@@ -37,7 +37,7 @@ function CustomHeader({ date }: CustomHeaderProps) {
       flexDirection="column"
       justifyContent="center"
     >
-      <Text textStyle="web.b2" mb={1} letterSpacing="0.3px">
+      <Text textStyle="b1" mb={1} letterSpacing="0.3px">
         {dayAbbr}
       </Text>
       <Box
@@ -47,13 +47,13 @@ function CustomHeader({ date }: CustomHeaderProps) {
         w="27px"
         h="27px"
         borderRadius="full"
-        bg={isToday ? "secondary.700" : "transparent"}
+        bg={isToday ? "brand.secondaryDark" : "transparent"}
         cursor="default"
         margin="0"
         padding="0"
       >
         <Text
-          textStyle="web.b1"
+          textStyle="b1"
           textAlign="center"
           color={isToday ? "white" : "black"}
         >
@@ -82,11 +82,11 @@ function AssignedTaskEvent({
       direction="column"
       gap="2px"
     >
-      <Text textStyle="web.s1" color="inherit">
+      <Text textStyle="s2" color="inherit">
         {assignedTask.name}
       </Text>
       {displayDate && (
-        <Text fontSize="10px" color="inherit">
+        <Text fontSize="10px" fontWeight="400" color="inherit">
           {`${formatDateV2(new Date(assignedTask.start_date))} - ${formatDateV2(
             new Date(assignedTask.end_date)
           )}`}
diff --git a/frontend/src/ui/misc/TaskStatusDisplay.tsx b/frontend/src/ui/misc/TaskStatusDisplay.tsx
index 7c217b13..611e262c 100644
--- a/frontend/src/ui/misc/TaskStatusDisplay.tsx
+++ b/frontend/src/ui/misc/TaskStatusDisplay.tsx
@@ -11,26 +11,26 @@ type TaskStatusDisplayProps = {
 const TaskStatusConfig = {
   [TaskStatus.ASSIGNED]: {
     icon: Assigned,
-    bgColor: "#C5DCF8",
-    textColor: "#255B9A",
+    bgColor: "schedule.assignedLight",
+    textColor: "schedule.assignedDark",
     text: "Assigned",
   },
   [TaskStatus.COMPLETE]: {
     icon: Complete,
-    bgColor: "#CDEECE",
-    textColor: "#0D8312",
+    bgColor: "schedule.completeLight",
+    textColor: "schedule.completeDark",
     text: "Complete",
   },
   [TaskStatus.EXCUSED]: {
     icon: Excused,
-    bgColor: "#FFE5B2",
-    textColor: "#B07D18",
+    bgColor: "schedule.excusedLight",
+    textColor: "schedule.excusedDark",
     text: "Excused",
   },
   [TaskStatus.INCOMPLETE]: {
     icon: Incomplete,
-    bgColor: "#F8D7DB",
-    textColor: "#B21D2F",
+    bgColor: "schedule.incompleteLight",
+    textColor: "schedule.incompleteDark",
     text: "Incomplete",
   },
 };
@@ -48,11 +48,11 @@ export default function TaskStatusDisplay({
       color={TaskStatusConfig[status].textColor}
       borderRadius="lg"
       width={size}
-      height="35px"
-      gap="1px"
+      height="32px"
+      gap="4px"
     >
       <Icon size={20} />
-      <Text textStyle="web.s1" color={TaskStatusConfig[status].textColor}>
+      <Text textStyle="s2" color={TaskStatusConfig[status].textColor}>
         {TaskStatusConfig[status].text}
       </Text>
     </Flex>
diff --git a/frontend/src/ui/screens/ErrorScreen.tsx b/frontend/src/ui/screens/ErrorScreen.tsx
index ceacca36..b9df0b34 100644
--- a/frontend/src/ui/screens/ErrorScreen.tsx
+++ b/frontend/src/ui/screens/ErrorScreen.tsx
@@ -38,21 +38,26 @@ export default function ErrorScreen({
           ⚠️
         </Box>
 
-        <Text fontSize="14px" color="text.light.secondary" mb={2} fontWeight={500}>
+        <Text fontSize="14px" color="text.medium" mb={2} fontWeight={500}>
           Oops — something went wrong
         </Text>
 
-        <Text fontSize="18px" color="secondary.700" mb={2} fontWeight={700}>
+        <Text
+          fontSize="18px"
+          color="brand.secondaryDark"
+          mb={2}
+          fontWeight={700}
+        >
           {message}
         </Text>
 
-        <Text fontSize="12px" color="text.light.secondary" mb={4}>
+        <Text fontSize="12px" color="text.medium" mb={4}>
           If the problem persists, contact support via our{" "}
           <a
             href="https://marillacplace.ca/contact/"
             target="_blank"
             rel="noopener noreferrer"
-            style={{ color: "#0C727E", textDecoration: "underline" }}
+            style={{ color: "brand.primaryDark", textDecoration: "underline" }}
           >
             contact page
           </a>
diff --git a/frontend/src/ui/screens/LoadingScreen.tsx b/frontend/src/ui/screens/LoadingScreen.tsx
index bb2cecba..d76104aa 100644
--- a/frontend/src/ui/screens/LoadingScreen.tsx
+++ b/frontend/src/ui/screens/LoadingScreen.tsx
@@ -17,7 +17,7 @@ export default function LoadingScreen({
       gap={3}
       role="status"
     >
-      <Spinner size="xl" color="primary.700" thickness="4px" />
+      <Spinner size="xl" color="brand.primaryDark" thickness="4px" />
       <Text fontSize="md" color="gray.600">
         {message}
       </Text>
diff --git a/frontend/src/ui/screens/NotFoundScreen.tsx b/frontend/src/ui/screens/NotFoundScreen.tsx
index f8295cf0..3c225946 100644
--- a/frontend/src/ui/screens/NotFoundScreen.tsx
+++ b/frontend/src/ui/screens/NotFoundScreen.tsx
@@ -30,10 +30,10 @@ export default function NotFoundScreen() {
         padding="20px"
       >
         <img src="/assets/logo.png" alt="Marillac Place Logo" width="50%" />
-        <Text textStyle="web.h2" color="secondary.700" textAlign="center">
+        <Text textStyle="h2" color="brand.secondaryDark" textAlign="center">
           404 Page Not Found
         </Text>
-        <Text textStyle="web.b2" color="text.light.primary" textAlign="center">
+        <Text textStyle="b1" color="text.black" textAlign="center">
           Sorry! The page you are looking for does not exist. If you think
           something is broken, please contact support via our{" "}
           <a