diff --git a/frontend/src/Account.tsx b/frontend/src/Account.tsx
deleted file mode 100644
index d1ecfc0f..00000000
--- a/frontend/src/Account.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import React from "react";
-import { observer } from "mobx-react-lite";
-import { useAuthContext } from "./context/auth/authContext";
-import Profile from "./Profile";
-
-/**
- * Account page that renders the Profile component as a nested child
- * Provides navigation options for the user to logout, or continue into the app.
- */
-const Account = observer(() => {
-  const { user } = useAuthContext();
-
-  return (
-    <div style={styles.pageContainer}>
-      {/* Blurred background layer */}
-      <div style={styles.backgroundLayer} />
-
-      {/* Foreground container */}
-      <div style={styles.foregroundContent}>
-        <div style={styles.accountContainer}>
-          <h1 style={styles.heading}>Welcome, {user?.userId}</h1>
-          <Profile />
-        </div>
-      </div>
-    </div>
-  );
-});
-
-export default Account;
-
-const styles: { [key: string]: React.CSSProperties } = {
-  pageContainer: {
-    position: "relative",
-    width: "100vw",
-    height: "100vh",
-    margin: 0,
-    padding: 0,
-    overflow: "hidden",
-    display: "flex",
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  backgroundLayer: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    zIndex: 0,
-    background: `
-    linear-gradient(135deg,
-     rgb(164, 183, 251) 0%,
-      rgb(212, 240, 255) 47%, rgb(111, 147, 237) 96%)
-    `,
-    backgroundSize: "cover",
-    backgroundBlendMode: "overlay",
-    filter: "blur(7px)",
-  },
-  foregroundContent: {
-    position: "relative",
-    zIndex: 1,
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-  },
-  accountContainer: {
-    width: "100%",
-    padding: "3rem",
-    backgroundColor: "rgba(255, 255, 255, 0.8)", // partially transparent
-    borderRadius: "8px",
-    boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
-    display: "flex",
-    flexDirection: "column",
-  },
-  topRow: {
-    display: "flex",
-    width: "100%",
-    justifyContent: "flex-end",
-    marginBottom: "1.5rem",
-  },
-  navButton: {
-    marginLeft: "0.5rem",
-    padding: "1.2rem",
-    fontSize: "1.2rem",
-    borderRadius: "4px",
-    cursor: "pointer",
-    backgroundColor: "#0b303b",
-    border: "1px solid #ccc",
-    color: "#fff",
-  },
-  heading: {
-    marginBottom: "2rem",
-    fontSize: "2.2rem",
-    fontWeight: 500,
-    textAlign: "center",
-  },
-};
diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx
index 2f8ae703..1de62118 100644
--- a/frontend/src/Login.tsx
+++ b/frontend/src/Login.tsx
@@ -78,7 +78,7 @@ const Login = observer(() => {
           </div>
           <div className="h-12 items-center">
             {failure ? (
-              <div className="text-[#D33221] mt-4 bg-[#FFA399] h-full rounded-md text-center flex items-center justify-center p-2">
+              <div className="text-warning mt-4 bg-light-warning h-full rounded-md text-center flex items-center justify-center p-2">
                 Your password is incorrect or this account doesn't exist.
               </div>
             ) : (
@@ -93,9 +93,9 @@ const Login = observer(() => {
             Login
           </button>
           <div className="flex items-center justify-between gap-4 mt-8">
-            <hr className="border-[#757575] w-[45%]" />
-            <div className="text-[#757575]">or</div>
-            <hr className="border-[#757575] w-[45%]" />
+            <hr className="border-dark-gray w-[45%]" />
+            <div className="text-dark-gray">or</div>
+            <hr className="border-dark-gray w-[45%]" />
           </div>
           <div className="flex items-center mt-8 justify-center">
             Don't have an account?{" "}
diff --git a/frontend/src/Profile.tsx b/frontend/src/Profile.tsx
deleted file mode 100644
index 641db377..00000000
--- a/frontend/src/Profile.tsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import React, { useState } from "react";
-import { observer } from "mobx-react-lite";
-import { useAuthContext } from "./context/auth/authContext";
-import { updateUserProfile } from "./external/bcanSatchel/actions";
-import { toJS } from 'mobx';
-import { Link } from "react-router-dom";
-import { api } from "./api";
-import { UserStatus } from "../../middle-layer/types/UserStatus";
-
-/**
- * Current logged in user's profile
- * Information can be updated for the profile here.
- */
-const Profile = observer(() => {
-  const { user } = useAuthContext();
-  const [email, setEmail] = useState(user?.email || "");
-  const [position, setPosition] = useState(user?.position || "");
-
-  console.log(toJS(user))
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault();
-  
-    try {
-      const response = await api("/auth/update-profile", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-          // TODO: Bearer token guarded by Auth
-          // Authorization: `Bearer ${user?.accessToken ?? ""}`,
-        },
-        body: JSON.stringify({
-          username: user?.userId,
-          email,
-          position: position,
-        }),
-      });
-  
-      if (!response.ok) {
-        const errorData = await response.json();
-        alert(errorData.message || "Failed to update profile.");
-        return;
-      }
-  
-      // Optionally parse the updated item returned
-      // const updatedData = await response.json();
-  
-      // Update local store so changes reflect immediately in the UI
-      // Conditional update semantics based on valid non-null 'User' object available
-      // eslint-disable-next-line @typescript-eslint/no-unused-expressions
-      user && updateUserProfile({
-        ...user,
-        email,
-        position: position as UserStatus,
-      });
-  
-      alert("Profile updated successfully.");
-    } catch (error) {
-      console.error("Error updating profile:", error);
-      alert("An error occurred while updating your profile.");
-    }
-  };  
-
-  return (
-    <form onSubmit={handleSubmit} style={styles.formContainer}>
-      <h2 style={styles.heading}>Profile</h2>
-
-      {/* Username (read-only) */}
-      <div style={styles.field}>
-        <label style={styles.label}>Username:</label>
-        <span style={styles.readonlyValue}>{user?.userId}</span>
-      </div>
-
-      {/* Email */}
-      <div style={styles.field}>
-        <label style={styles.label}>Email:</label>
-        <input
-          type="email"
-          style={styles.input}
-          value={email}
-          onChange={(e) => setEmail(e.target.value)}
-          required
-        />
-      </div>
-
-      {/* Biography */}
-      <div style={styles.field}>
-        <label style={styles.label}>Position/Role:</label>
-        <textarea
-          style={styles.textarea}
-          value={position}
-          onChange={(e) => setPosition(e.target.value)}
-        />
-      </div>
-      {/* Account Page Action Buttons */}
-      <div style={styles.actionButtons}>
-      <button type="submit" style={styles.button}>
-        Save Changes
-      </button>
-      <Link to="/main" style={{ textDecoration: "none" }}>
-        <button style={styles.button}>Home</button>
-      </Link>
-      </div>
-    </form>
-  );
-});
-
-export default Profile;
-
-// Style objects
-const styles: { [key: string]: React.CSSProperties } = {
-  formContainer: {
-    width: "500px",
-    padding: "2rem",
-    backgroundColor: "#ffffff",
-    borderRadius: "8px",
-    boxShadow: "0 2px 10px rgba(0,0,0,0.15)",
-    display: "flex",
-    flexDirection: "column",
-    margin: "0 auto",
-  },
-  heading: {
-    marginBottom: "1.5rem",
-    fontSize: "2rem",
-    fontWeight: 500,
-    textAlign: "center",
-  },
-  field: {
-    marginBottom: "1.5rem",
-  },
-  label: {
-    display: "block",
-    marginBottom: "0.5rem",
-    fontSize: "1.2rem",
-    fontWeight: 500,
-  },
-  readonlyValue: {
-    marginLeft: "0.5rem",
-    fontSize: "1.2rem",
-  },
-  input: {
-    width: "100%",
-    padding: "1rem",
-    fontSize: "1.2rem",
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    boxSizing: "border-box",
-    color: "lightgray",
-  },
-  textarea: {
-    width: "100%",
-    padding: "1rem",
-    fontSize: "1.2rem",
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    boxSizing: "border-box",
-    minHeight: "120px",
-    color: "lightgray",
-  },
-  button: {
-    padding: "1rem",
-    fontSize: "1.1rem",
-    backgroundColor: "#0b303b",
-    color: "#fff",
-    border: "none",
-    borderRadius: "4px",
-    cursor: "pointer",
-    alignSelf: "flex-start",
-  },
-  actionButtons: {
-    display: "flex",
-    justifyContent: "space-between",
-    alignItems: "center"
-  }
-};
diff --git a/frontend/src/Register.tsx b/frontend/src/Register.tsx
index 771c7a9a..aebb88b3 100644
--- a/frontend/src/Register.tsx
+++ b/frontend/src/Register.tsx
@@ -200,9 +200,9 @@ const Register = observer(() => {
             Register
           </button>
           <div className="flex items-center justify-between gap-4 mt-4">
-            <hr className="border-[#757575] w-[45%]" />
-            <div className="text-[#757575]">or</div>
-            <hr className="border-[#757575] w-[45%]" />
+            <hr className="border-dark-gray w-[45%]" />
+            <div className="text-dark-gray">or</div>
+            <hr className="border-dark-gray w-[45%]" />
           </div>
           <div className="flex items-center mt-4 justify-center">
             Have an account?{" "}
@@ -246,14 +246,14 @@ const styles: { [key: string]: React.CSSProperties } = {
     textAlign: "start",
   },
   warning: {
-    color: "#616161",
-    backgroundColor: "#E7E7E7",
+    color: "gray",
+    backgroundColor: "var(--color-light-gray-2)",
   },
   error: {
-    color: "#D33221",
-    backgroundColor: "#FFA399",
+    color: "var(--color-warning)",
+    backgroundColor: "var(--color-light-warning)",
   },
   errorItem: {
-    borderColor: "#D33221",
+    borderColor: "var(--color-warning)",
   },
 };
diff --git a/frontend/src/RegisterLanding.tsx b/frontend/src/RegisterLanding.tsx
index 3562e756..39797bbe 100644
--- a/frontend/src/RegisterLanding.tsx
+++ b/frontend/src/RegisterLanding.tsx
@@ -36,7 +36,7 @@ const RegisterLanding = () => {
                         color: 'black',
                         borderStyle: 'solid', borderColor: 'black', borderWidth: '1px'
                       }}
-                      className="py-2 px-4 rounded"
+                      className="py-2 mt-8 px-4 rounded-md"
                       onClick={() => {
                         logout()
                       }}
diff --git a/frontend/src/custom/ActionConfirmation.tsx b/frontend/src/custom/ActionConfirmation.tsx
index 0c1abda5..3c8fb9c6 100644
--- a/frontend/src/custom/ActionConfirmation.tsx
+++ b/frontend/src/custom/ActionConfirmation.tsx
@@ -51,13 +51,13 @@ import { IoIosWarning } from "react-icons/io";
 
             <div className="flex mb-6">
 
-            <div className="w-3" style={{backgroundColor : "#FA703F"}}/>
-            <div  className="p-3" style={{backgroundColor : "#FFE9D9"}}>
+            <div className="w-3 bg-medium-orange"/>
+            <div  className="p-3 bg-white-orange">
             <div className="flex">
-              <IoIosWarning size={24} style={{color: "#771505"}}/>
-              <p className="font-bold px-1 text-lg" style={{color: "#771505"}}> Warning </p>
+              <IoIosWarning size={24} className="text-burgundy"/>
+              <p className="font-bold px-1 text-lg text-burgundy"> Warning </p>
             </div>
-            <p className=" text-left text-lg font-semibold" style={{color : "#FA703F"}}>
+            <p className=" text-left text-lg font-semibold text-dark-orange">
               {warningMessage}
             </p>
 
@@ -70,12 +70,11 @@ import { IoIosWarning } from "react-icons/io";
           <div className="flex w-full justify-between ">
             <button
               style={{
-                backgroundColor: "#F7A781",
                 borderStyle: 'solid',
                 borderColor: 'black',
                 borderWidth: '2px'
               }}
-              className="rounded-lg hover:bg-gray-200 transition-colors w-32 h-12"
+              className="rounded-lg hover:bg-gray-200 bg-light-orange transition-colors w-32 h-12"
               onClick={onCloseDelete}
             >
               No, cancel
diff --git a/frontend/src/custom/RingButton.tsx b/frontend/src/custom/RingButton.tsx
index 04a94318..009f8d69 100644
--- a/frontend/src/custom/RingButton.tsx
+++ b/frontend/src/custom/RingButton.tsx
@@ -2,9 +2,9 @@ import "../styles/button.css";
 
 /* Maintained with button.css */
 export enum ButtonColorOption {
-  GREEN = "#5AB911",
-  GRAY = "#D3D3D3",
-  ORANGE = "#F7A781",
+  GREEN = "var(--color-green-2)",
+  GRAY = "var(--color-light-gray-2)",
+  ORANGE = "var(--color-light-orange)",
 }
 
 /* API for components to setup a button with expected system colors */
@@ -25,7 +25,7 @@ export default function RingButton({ text, color }: RingButtonProps) {
     <>
       {ButtonColorOption.GREEN === color && (
         <div
-          className="green-button button-default"
+          className="bg-green-2 button-default"
           style={{ width: "100%", border: "none", cursor: "default" }}
         >
           {text}
@@ -33,7 +33,7 @@ export default function RingButton({ text, color }: RingButtonProps) {
       )}
       {ButtonColorOption.ORANGE === color && (
         <div
-          className="orange-button button-default"
+          className="bg-light-orange button-default"
           style={{ width: "100%", border: "none", cursor: "default" }}
         >
           {text}
@@ -41,7 +41,7 @@ export default function RingButton({ text, color }: RingButtonProps) {
       )}
       {ButtonColorOption.GRAY === color && (
         <div
-          className="gray-button button-default"
+          className="bg-light-gray-2 button-default"
           style={{ width: "100%", border: "none", cursor: "default" }}
         >
           {text}
diff --git a/frontend/src/main-page/Footer.tsx b/frontend/src/main-page/Footer.tsx
index d713ac4d..56c6a5e4 100644
--- a/frontend/src/main-page/Footer.tsx
+++ b/frontend/src/main-page/Footer.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import "../styles/Footer.css";
 import { Group, Text, Link } from "@chakra-ui/react";
 import { FooterText } from "../translations/general";
-import tailwindConfig from "../../tailwind.config.js";
 
 const Footer: React.FC = () => {
   return (
@@ -14,7 +13,7 @@ const Footer: React.FC = () => {
             {FooterText.C4C}
           </Link>{" "}
           for{" "}
-          <Link variant="underline" _hover={{color: `${tailwindConfig.theme.colors["dark-orange"]}`}}  href={FooterText.Org_Link}>
+          <Link variant="underline" _hover={{color: "var(--color-dark-orange)"}}  href={FooterText.Org_Link}>
             {FooterText.Org}
           </Link>
         </Text>
diff --git a/frontend/src/main-page/dashboard/Charts/BarYearGrantStatus.tsx b/frontend/src/main-page/dashboard/Charts/BarYearGrantStatus.tsx
index 8d87b629..34482a10 100644
--- a/frontend/src/main-page/dashboard/Charts/BarYearGrantStatus.tsx
+++ b/frontend/src/main-page/dashboard/Charts/BarYearGrantStatus.tsx
@@ -103,7 +103,7 @@ const BarYearGrantStatus = observer(
               type="monotone"
               stackId="a"
               dataKey="value"
-              fill="#F58D5C"
+              fill="var(--color-medium-orange)"
               strokeWidth={2}
               name="Grants"
               radius={[15, 15, 15, 15]}
@@ -123,8 +123,8 @@ const BarYearGrantStatus = observer(
             <Tooltip
               contentStyle={{
                 borderRadius: "12px",
-                backgroundColor: "#fff",
-                border: "1px solid #ccc",
+                backgroundColor: "white",
+                border: "1px solid lightgray",
                 boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
               }}
               formatter={(value: number) =>
diff --git a/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx b/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx
index f45ebb69..e3ed477b 100644
--- a/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx
+++ b/frontend/src/main-page/dashboard/Charts/DonutMoneyApplied.tsx
@@ -31,8 +31,8 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => {
   );
   const total = sumReceived + sumUnreceived;
   const data = [
-    { name: "Received", value: sumReceived, fill: "#F8CC16" },
-    { name: "Unreceived", value: sumUnreceived, fill: "#F58D5C" },
+    { name: "Received", value: sumReceived, fill: "var(--color-yellow)"},
+    { name: "Unreceived", value: sumUnreceived, fill: "var(--color-medium-orange)" },
   ];
 
   // Creating the label for the slices
@@ -59,7 +59,7 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => {
             borderRadius: 2,
           }}
         />
-        <div style={{ fontSize: 12, color: "#555", marginTop: 0 }}>
+        <div style={{ fontSize: 12, color: "gray", marginTop: 0 }}>
           {`${(percent * 100).toFixed(0)}% ($${(value / 1_000_000).toFixed(
             2
           )}M)`}
@@ -92,7 +92,7 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => {
                 name="Unreceived"
                 value={sumUnreceived}
                 percent={sumUnreceived / total}
-                color="#F58D5C"
+                color="var(--color-medium-orange)"
               />
             </div>
           )}
@@ -103,7 +103,7 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => {
                 name="Received"
                 value={sumReceived}
                 percent={sumReceived / total}
-                color="#F8CC16"
+                color="var(--color-yellow)"
               />
             </div>
           )}
@@ -122,7 +122,7 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => {
             innerRadius="60%"
             outerRadius="80%"
             cornerRadius={50}
-            stroke="#fff"
+            stroke="white"
             strokeWidth={2}
             label={false}
           />
@@ -133,8 +133,8 @@ const DonutMoneyApplied = observer(({ grants }: { grants: Grant[] }) => {
             ]}
             contentStyle={{
               borderRadius: "12px",
-              backgroundColor: "#fff",
-              border: "1px solid #ccc",
+              backgroundColor: "white",
+              border: "1px solid lightgray",
               boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
             }}
           />
diff --git a/frontend/src/main-page/dashboard/Charts/KPICard.tsx b/frontend/src/main-page/dashboard/Charts/KPICard.tsx
index 7f18d14c..654e3da7 100644
--- a/frontend/src/main-page/dashboard/Charts/KPICard.tsx
+++ b/frontend/src/main-page/dashboard/Charts/KPICard.tsx
@@ -16,7 +16,7 @@ const KPICard = observer(
     percentChange: number;
   }) => {
     return (
-      <div className="chart-container kpi-card w-full flex flex-col justify-between">
+      <div className="chart-container !bg-pale-orange w-full flex flex-col justify-between">
         {/* Title */}
         <div className="text-lg w-full text-left font-semibold">{title}</div>
 
diff --git a/frontend/src/main-page/dashboard/Charts/LineChartSuccessRate.tsx b/frontend/src/main-page/dashboard/Charts/LineChartSuccessRate.tsx
index 7bc96be7..af63db6b 100644
--- a/frontend/src/main-page/dashboard/Charts/LineChartSuccessRate.tsx
+++ b/frontend/src/main-page/dashboard/Charts/LineChartSuccessRate.tsx
@@ -123,7 +123,7 @@ const LineChartSuccessRate = observer(({ grants }: { grants: Grant[] }) => {
             ) => (
               <span
                 style={{
-                  color: "#000",
+                  color: "black",
                   fontWeight: 500,
                   marginLeft: 5,
                   marginRight: 10,
@@ -133,11 +133,11 @@ const LineChartSuccessRate = observer(({ grants }: { grants: Grant[] }) => {
               </span>
             )}
           />
-          <CartesianGrid vertical={false} stroke="#aaa" strokeDasharray="5 5" />
+          <CartesianGrid vertical={false} stroke="lightgray" strokeDasharray="5 5" />
           <Line
             type="monotone"
             dataKey="money_captured"
-            stroke="#F58D5C"
+            stroke="var(--color-medium-orange)"
             strokeWidth={2}
             dot={{ r: 4 }}
             name="Money Captured"
@@ -146,7 +146,7 @@ const LineChartSuccessRate = observer(({ grants }: { grants: Grant[] }) => {
           <Line
             type="monotone"
             dataKey="grants_captured"
-            stroke="#F8CC16"
+            stroke="var(--color-yellow)"
             strokeWidth={2}
             dot={{ r: 4 }}
             name="Grants Captured"
@@ -174,8 +174,8 @@ const LineChartSuccessRate = observer(({ grants }: { grants: Grant[] }) => {
           <Tooltip
             contentStyle={{
               borderRadius: "12px",
-              backgroundColor: "#fff",
-              border: "1px solid #ccc",
+              backgroundColor: "white",
+              border: "1px solid lightgray",
               boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
             }}
             labelFormatter={(date: Date) => date.getFullYear().toString()}
diff --git a/frontend/src/main-page/dashboard/Charts/StackedBarMoneyReceived.tsx b/frontend/src/main-page/dashboard/Charts/StackedBarMoneyReceived.tsx
index 13448fc7..db49200e 100644
--- a/frontend/src/main-page/dashboard/Charts/StackedBarMoneyReceived.tsx
+++ b/frontend/src/main-page/dashboard/Charts/StackedBarMoneyReceived.tsx
@@ -71,7 +71,7 @@ const StackedBarMoneyReceived = observer(({ grants }: { grants: Grant[] }) => {
             ) => (
               <span
                 style={{
-                  color: "#000",
+                  color: "black",
                   fontWeight: 500,
                   marginLeft: 5,
                   marginRight: 10,
@@ -81,12 +81,12 @@ const StackedBarMoneyReceived = observer(({ grants }: { grants: Grant[] }) => {
               </span>
             )}
           />
-          <CartesianGrid vertical={false} stroke="#aaa" strokeDasharray="5 5" />
+          <CartesianGrid vertical={false} stroke="lightgray" strokeDasharray="5 5" />
           <Bar
             type="monotone"
             stackId="a"
             dataKey="unreceived"
-            fill="#F58D5C"
+            fill="var(--color-medium-orange)"
             strokeWidth={2}
             name="Unreceived"
             radius={[15, 15, 15, 15]}
@@ -106,7 +106,7 @@ const StackedBarMoneyReceived = observer(({ grants }: { grants: Grant[] }) => {
             type="monotone"
             stackId="a"
             dataKey="received"
-            fill="#F8CC16"
+            fill="var(--color-yellow)"
             strokeWidth={2}
             name="Received"
             radius={[15, 15, 15, 15]}
@@ -134,8 +134,8 @@ const StackedBarMoneyReceived = observer(({ grants }: { grants: Grant[] }) => {
           <Tooltip
             contentStyle={{
               borderRadius: "12px",
-              backgroundColor: "#fff",
-              border: "1px solid #ccc",
+              backgroundColor: "white",
+              border: "1px solid lightgray",
               boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
             }}
             formatter={(value: number) => `$${value.toLocaleString()}`}
diff --git a/frontend/src/main-page/dashboard/CsvExportButton.tsx b/frontend/src/main-page/dashboard/CsvExportButton.tsx
index cd04777f..861f2458 100644
--- a/frontend/src/main-page/dashboard/CsvExportButton.tsx
+++ b/frontend/src/main-page/dashboard/CsvExportButton.tsx
@@ -108,7 +108,7 @@ const CsvExportButton: React.FC = observer(() => {
 
   return (
     <button
-      className="grant-button bg-[#FFF1EB] flex justify-between items-center"
+      className="grant-button bg-white-orange flex justify-between items-center"
       type="button"
       onClick={onClickDownload}
       disabled={isProcessing}
diff --git a/frontend/src/main-page/dashboard/DateFilter.tsx b/frontend/src/main-page/dashboard/DateFilter.tsx
index e1a941f1..524ea3de 100644
--- a/frontend/src/main-page/dashboard/DateFilter.tsx
+++ b/frontend/src/main-page/dashboard/DateFilter.tsx
@@ -74,7 +74,7 @@ const DateFilter: React.FC = observer(() => {
               <div className="flex items-center p-2 rounded-sm hover:bg-gray-100 dark:hover:bg-gray-600">
                 <input
                   type="checkbox"
-                  className="w-4 h-4 rounded-sm accent-dark-orange bg-[#FFF1EB]"
+                  className="w-4 h-4 rounded-sm accent-dark-orange bg-white-orange"
                   id={year.toString()}
                   value={year}
                   checked={selectedYears.includes(year)}
diff --git a/frontend/src/main-page/dashboard/styles/Dashboard.css b/frontend/src/main-page/dashboard/styles/Dashboard.css
index d8bfe309..3d51d032 100644
--- a/frontend/src/main-page/dashboard/styles/Dashboard.css
+++ b/frontend/src/main-page/dashboard/styles/Dashboard.css
@@ -16,7 +16,7 @@ input[type="checkbox"] {
   /* Additional styling for the custom checkbox container */
   width: 1.2em;
   height: 1.2em;
-  border: 2px solid #ccc;
+  border: 2px solid lightgray;
   border-radius: 4px;
   display: inline-block;
   vertical-align: middle;
@@ -47,7 +47,7 @@ input[type="checkbox"]:checked::before {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
-  background-color: #f2ebe4;
+  background-color: var(--color-tan);
   width: 100%;
   height: 100%;
   overflow-y: auto;
@@ -61,19 +61,15 @@ input[type="checkbox"]:checked::before {
   justify-content: flex-start;
   align-items: center;
   padding: 24px;
-  background-color: #ffffff;
+  background-color: white;
   border-radius: 1.2rem;
   border: 0.1rem solid black;
 }
 
-.kpi-card {
-  background-color: #ffd5c2;
-}
-
 .tooltip {
   border-radius: 12px;
-  background-color: "#fffff";
-  border: "1px solid #ccc";
+  background-color: white;
+  border: "1px solid lightgray";
   box-shadow: "0 2px 8px rgba(0,0,0,0.1)";
 }
 
@@ -83,8 +79,8 @@ input[type="checkbox"]:checked::before {
 .data {
   white-space: nowrap;
   border-radius: 16px;
-  background-color: #fff;
-  border: 1px solid #ccc;
+  background-color: white;
+  border: 1px solid lightgray;
 }
 
 #reactSchedulerOutsideWrapper {
diff --git a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
index a61497c1..fa00b83b 100644
--- a/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
+++ b/frontend/src/main-page/grants/filter-bar/FilterBar.tsx
@@ -64,10 +64,9 @@ const FilterBar: React.FC = observer(() => {
                   }`}
                 >
                   <div
-                    className="flex w-full justify-between items-center"
-                    style={{
-                      color: selected === item.name ? "#FFFFFF" : "#000000",
-                    }}
+                    className={`flex w-full justify-between items-center ${
+                    selected === item.name ? "text-white" : "text-black"
+                    }`}
                   >
                     {item.name}
                     <FaChevronRight />
diff --git a/frontend/src/main-page/grants/filter-bar/GrantSearch.tsx b/frontend/src/main-page/grants/filter-bar/GrantSearch.tsx
index adcb3ce8..f2097c06 100644
--- a/frontend/src/main-page/grants/filter-bar/GrantSearch.tsx
+++ b/frontend/src/main-page/grants/filter-bar/GrantSearch.tsx
@@ -48,7 +48,6 @@ function GrantSearch() {
               pointerEvents: "none",
               zIndex: 2,
               marginLeft: "2px",
-              // color: "#aaa" // optional styling
             }}
           />
           <Input
diff --git a/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx b/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
index d6569b37..9fcc0f76 100644
--- a/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
+++ b/frontend/src/main-page/grants/grant-details/CostBenefitAnalysis.tsx
@@ -71,8 +71,7 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
             placeholder="Enter rate"
             value={hourlyRate}
             onChange={(e) => setHourlyRate(e.target.value)}
-            className="w-full h-[42px]  px-3 py-4 border border-gray-400 rounded-md"
-            style={{ backgroundColor: '#F2EBE4' }}
+            className="w-full h-[42px]  px-3 py-4 border border-gray-400 rounded-md bg-tan"
           />
         </div>
 
@@ -89,17 +88,15 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
                 console.log('Time per report changed to:', e.target.value);
                 setTimePerReport(e.target.value);
             }}
-            className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md"
-            style={{ backgroundColor: '#F2EBE4' }}
+            className="w-full h-[42px] px-3 py-4 border border-gray-400 rounded-md bg-tan"
           />
         </div>
 
         {/* Calculate Button */}
         <button
           onClick={calculateNetBenefit}
-          className="w-full py-1 px-4 rounded-md mb-7"
+          className="w-full py-1 px-4 rounded-md mb-7 bg-medium-orange"
           style={{
-            backgroundColor: '#F58D5C',
             color: 'black',
             borderStyle: 'solid',
             borderColor: 'black',
@@ -114,9 +111,8 @@ export const CostBenefitAnalysis: React.FC<CostBenefitAnalysisProps> = ({ grant
             <span className="text-sm font-semibold"> Net Benefit:</span>
         <div
           onClick={calculateNetBenefit}
-          className="w-1/2 py-2 px-4 rounded-md"
+          className="w-1/2 py-2 px-4 rounded-md bg-tan"
           style={{
-            backgroundColor: '#F2EBE4',
             color: netBenefit !== null ? 'black' : 'gray',
             borderStyle: 'solid',
             borderColor: 'black',
diff --git a/frontend/src/main-page/grants/grant-list/GrantItem.tsx b/frontend/src/main-page/grants/grant-list/GrantItem.tsx
index 36694c27..02692b22 100644
--- a/frontend/src/main-page/grants/grant-list/GrantItem.tsx
+++ b/frontend/src/main-page/grants/grant-list/GrantItem.tsx
@@ -229,9 +229,8 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                             <div
                               style={{
                                 color: "black",
-                                backgroundColor: "#D3D3D3",
                               }}
-                              className="h-9  flex items-center justify-center w-full rounded-full px-4"
+                              className="h-9  flex items-center bg-light-gray-2 justify-center w-full rounded-full px-4"
                             >
                               {formatDate(curGrant.application_deadline)}
                             </div>
@@ -247,12 +246,11 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                             <div
                               style={{
                                 color: "black",
-                                backgroundColor: "#D3D3D3",
                                 fontStyle: curGrant.grant_start_date
                                   ? "normal"
                                   : "italic",
                               }}
-                              className="h-9 flex items-center justify-center w-full rounded-full px-4"
+                              className="h-9 flex items-center bg-light-gray-2 justify-center w-full rounded-full px-4"
                             >
                               {curGrant.grant_start_date
                                 ? formatDate(curGrant.grant_start_date)
@@ -336,9 +334,8 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                           Report Deadlines
                         </label>
                         <div
-                          className="p-2 rounded-md h-[13.5rem] w-4/5  overflow-auto grip "
+                          className="p-2 rounded-md h-[13.5rem] w-4/5  overflow-auto grip bg-medium-orange"
                           style={{
-                            backgroundColor: "#F58D5C",
                             borderStyle: "solid",
                             borderColor: "black",
                             borderWidth: "1px",
@@ -354,9 +351,8 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                                   key={index}
                                   style={{
                                     color: "black",
-                                    backgroundColor: "#D3D3D3",
                                   }}
-                                  className="h-10 flex items-center justify-center w-full rounded-full mb-2 px-4"
+                                  className="h-10 flex items-center bg-light-gray-2 justify-center w-full rounded-full mb-2 px-4"
                                 >
                                   {formatDate(deadline)}
                                 </div>
@@ -391,17 +387,15 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                         </label>
                         {/*Box div*/}
                         <div
-                          className="items-center flex rounded-md"
+                          className="items-center flex rounded-md bg-medium-orange"
                           style={{
-                            backgroundColor: "#F58D5C",
                             borderColor: "black",
                             borderWidth: "1px",
                           }}
                         >
                           <MdOutlinePerson2 className="w-1/5 h-full p-1" />
                           <div
-                            style={{ backgroundColor: "#F2EBE4" }}
-                            className="w-4/5 border-l border-black bg-[#FFCEB6] rounded-r-md"
+                            className="w-4/5 border-l border-black rounded-r-md bg-tan"
                           >
                             <h2
                               className="truncate px-2 text-left font-bold h-8 w-full text-gray-700 rounded flex items-center"
@@ -435,17 +429,15 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                         </label>
                         {/*Box div*/}
                         <div
-                          className="items-center flex rounded-md"
+                          className="items-center flex rounded-md bg-medium-orange"
                           style={{
-                            backgroundColor: "#F58D5C",
                             borderColor: "black",
                             borderWidth: "1px",
                           }}
                         >
                           <MdOutlinePerson2 className="w-1/5 h-full p-1" />
                           <div
-                            style={{ backgroundColor: "#F2EBE4" }}
-                            className="w-4/5 border-l border-black bg-[#FFCEB6] rounded-r-md"
+                            className="w-4/5 border-l border-black rounded-r-md bg-tan"
                           >
                             <h2
                               className="truncate px-2 text-left font-bold h-8 w-full text-gray-700 rounded-md flex items-center"
@@ -646,7 +638,7 @@ const GrantItem: React.FC<GrantItemProps> = observer(
                         backgroundColor: "indianred",
                         color: "white",
                         borderStyle: "solid",
-                        borderColor: "#8B0000",
+                        borderColor: "black",
                         borderWidth: "1px",
                       }}
                       className="py-2 px-4 rounded-md hover:bg-red-600 transition-colors"
diff --git a/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx b/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx
index 361ecafa..5344a319 100644
--- a/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx
+++ b/frontend/src/main-page/grants/grant-list/StatusIndicator.tsx
@@ -16,7 +16,6 @@ const StatusIndicator: React.FC<StatusIndicatorProps> = ({ curStatus }) => {
     <div className="justify-self-center">
     <span className="flex items-center">
       <FaCircle style={{ color: circleColor}} className="mr-4" />
-      {/* The text label: #000, "Helvetica Neue", 28px */}
       <span className="w-20 text-left">{labelText}</span>
     </span>
     </div>
diff --git a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
index 285a6e4d..cf562115 100644
--- a/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
+++ b/frontend/src/main-page/grants/new-grant/NewGrantModal.tsx
@@ -472,7 +472,7 @@ const NewGrantModal: React.FC<{
               <input
                 style={{
                   height: "42px",
-                  backgroundColor: "#F2EBE4",
+                  backgroundColor: "var(--color-tan)",
                   borderStyle: "solid",
                   borderColor: "black",
                   borderWidth: "1px",
@@ -503,7 +503,7 @@ const NewGrantModal: React.FC<{
                     <input
                       style={{
                         height: "42px",
-                        backgroundColor: "#F2EBE4",
+                        backgroundColor: "var(--color-tan)",
                         borderStyle: "solid",
                         borderColor: "black",
                         borderWidth: "1px",
@@ -531,7 +531,7 @@ const NewGrantModal: React.FC<{
                     <input
                       style={{
                         height: "42px",
-                        backgroundColor: "#F2EBE4",
+                        backgroundColor: "var(--color-tan)",
                         borderStyle: "solid",
                         borderColor: "black",
                         borderWidth: "1px",
@@ -561,7 +561,7 @@ const NewGrantModal: React.FC<{
                     min="0"
                     style={{
                       height: "42px",
-                      backgroundColor: "#F2EBE4",
+                      backgroundColor: "var(--color-tan)",
                       borderStyle: "solid",
                       borderColor: "black",
                       borderWidth: "1px",
@@ -587,9 +587,8 @@ const NewGrantModal: React.FC<{
                     Report Deadlines
                   </label>
                   <div
-                    className="p-2 rounded sm:h-52 xl:h-40 overflow-y-auto overflow-x-hidden"
+                    className="p-2 rounded sm:h-52 bg-light-gray-2 xl:h-40 overflow-y-auto overflow-x-hidden"
                     style={{
-                      backgroundColor: "#D3D3D3",
                       borderStyle: "solid",
                       borderColor: "black",
                       borderWidth: "1px",
@@ -600,7 +599,7 @@ const NewGrantModal: React.FC<{
                       style={{
                         height: "42px",
                         color: "black",
-                        backgroundColor: "#F58D5C",
+                        backgroundColor: "var(--color-medium-orange)",
                         borderStyle: "solid",
                         borderColor: "black",
                         borderWidth: "1px",
@@ -616,7 +615,7 @@ const NewGrantModal: React.FC<{
                           key={index}
                           style={{
                             height: "42px",
-                            backgroundColor: "#F2EBE4",
+                            backgroundColor: "var(--color-tan)",
                             borderStyle: "solid",
                             borderColor: "black",
                             borderWidth: "1px",
@@ -640,7 +639,7 @@ const NewGrantModal: React.FC<{
                           <button
                             style={{
                               height: "42px",
-                              backgroundColor: "#FF6B6B",
+                              backgroundColor: "var(--color-light-red)",
                               borderStyle: "solid",
                               borderColor: "black",
                               borderWidth: "1px",
@@ -670,7 +669,7 @@ const NewGrantModal: React.FC<{
                 <input
                   style={{
                     height: "42px",
-                    backgroundColor: "#F2EBE4",
+                    backgroundColor: "var(--color-tan)",
                     borderStyle: "solid",
                     borderColor: "black",
                     borderWidth: "1px",
@@ -695,7 +694,7 @@ const NewGrantModal: React.FC<{
                 <CurrencyInput
                   style={{
                     height: "42px",
-                    backgroundColor: "#F2EBE4",
+                    backgroundColor: "var(--color-tan)",
                     borderStyle: "solid",
                     borderColor: "black",
                     borderWidth: "1px",
@@ -721,7 +720,7 @@ const NewGrantModal: React.FC<{
                       BCAN POC *
                   </label>
                   {/*Box div*/} 
-                  <div className="items-center flex p-3 rounded h-full" style={{backgroundColor: "#F58D5C", borderColor: 'black', borderWidth: '1px', borderRadius:"1.2rem"}}>
+                  <div className="items-center flex p-3 rounded h-full bg-medium-orange" style={{borderColor: 'black', borderWidth: '1px', borderRadius:"1.2rem"}}>
                       <MdOutlinePerson2 className="w-1/4 h-full p-1"/>
                       <div className="w-3/4">
                       <UserDropdown
@@ -732,7 +731,7 @@ const NewGrantModal: React.FC<{
                       }}
                       placeholder="Name"
                       />
-                        <input style={{height: "48px",backgroundColor: '#F2EBE4', borderStyle: 'solid', borderColor: 'black', borderWidth: '1px'}}
+                        <input style={{height: "48px",backgroundColor: "var(--color-tan)", borderStyle: 'solid', borderColor: 'black', borderWidth: '1px'}}
                         className="font-family-helvetica w-full text-gray-700 rounded"
                          placeholder="e-mail" 
                          value={bcanPocEmail}
@@ -752,9 +751,8 @@ const NewGrantModal: React.FC<{
                 </label>
                 {/*Box div*/}
                 <div
-                  className="flex p-3 rounded  items-center h-full"
+                  className="flex p-3 rounded  items-center h-full bg-medium-orange"
                   style={{
-                    backgroundColor: "#F58D5C",
                     borderColor: "black",
                     borderWidth: "1px",
                     borderRadius: "1.2rem",
@@ -765,7 +763,7 @@ const NewGrantModal: React.FC<{
                     <input
                       style={{
                         height: "42px",
-                        backgroundColor: "#F2EBE4",
+                        backgroundColor: "var(--color-tan)",
                         borderStyle: "solid",
                         borderColor: "black",
                         borderWidth: "1px",
@@ -779,7 +777,7 @@ const NewGrantModal: React.FC<{
                     <input
                       style={{
                         height: "42px",
-                        backgroundColor: "#F2EBE4",
+                        backgroundColor: "var(--color-tan)",
                         borderStyle: "solid",
                         borderColor: "black",
                         borderWidth: "1px",
@@ -810,7 +808,7 @@ const NewGrantModal: React.FC<{
                   <select
                     style={{
                       height: "42px",
-                      backgroundColor: "#F2EBE4",
+                      backgroundColor: "var(--color-tan)",
                       borderStyle: "solid",
                       borderColor: "black",
                       borderWidth: "1px",
@@ -838,7 +836,7 @@ const NewGrantModal: React.FC<{
                   <select
                     style={{
                       height: "42px",
-                      backgroundColor: "#F2EBE4",
+                      backgroundColor: "var(--color-tan)",
                       borderStyle: "solid",
                       borderColor: "black",
                       borderWidth: "1px",
@@ -870,7 +868,7 @@ const NewGrantModal: React.FC<{
                     style={{
                       marginBottom: "0px",
                       height: "42px",
-                      backgroundColor: "#F2EBE4",
+                      backgroundColor: "var(--color-tan)",
                       borderStyle: "solid",
                       borderColor: "black",
                       borderWidth: "1px",
@@ -926,7 +924,7 @@ const NewGrantModal: React.FC<{
                         type="text"
                         placeholder="Name"
                         className="flex-1 px-2 border border-black rounded-md"
-                        style={{ backgroundColor: "#F2EBE4", height: "42px" }}
+                        style={{backgroundColor: "var(--color-tan)", height: "42px" }}
                         value={currentAttachment.attachment_name}
                         onChange={(e) =>
                           setCurrentAttachment({
@@ -939,7 +937,7 @@ const NewGrantModal: React.FC<{
                         type="text"
                         placeholder="URL"
                         className="h-12 flex-1 px-2 border border-black rounded-md"
-                        style={{ backgroundColor: "#F2EBE4", height: "42px" }}
+                        style={{ backgroundColor: "var(--color-tan)", height: "42px" }}
                         value={currentAttachment.url}
                         onChange={(e) =>
                           setCurrentAttachment({
@@ -950,7 +948,7 @@ const NewGrantModal: React.FC<{
                       />
                       <select
                         className="h-12 border border-black rounded-md px-2 items-center justify-center"
-                        style={{ backgroundColor: "#F2EBE4", height: "42px" }}
+                        style={{ backgroundColor: "var(--color-tan)", height: "42px" }}
                         value={currentAttachment.type}
                         onChange={(e) =>
                           setCurrentAttachment({
@@ -971,7 +969,7 @@ const NewGrantModal: React.FC<{
                         <button
                           type="button"
                           style={{
-                            backgroundColor: "#D3D3D3",
+                            backgroundColor: "var(--color-light-gray-2)",
                             color: "black",
                             height: "21px",
                           }}
@@ -985,7 +983,7 @@ const NewGrantModal: React.FC<{
                           type="button"
                           onClick={_addAttachment}
                           style={{
-                            backgroundColor: "#F58D5C",
+                            backgroundColor: "var(--color-medium-orange)",
                             color: "black",
                             height: "21px",
                           }}
@@ -1000,9 +998,8 @@ const NewGrantModal: React.FC<{
 
                 {/* Gray box showing added links */}
                 <div
-                  className=" p-2 rounded-md overflow-y-auto overflow-x-hidden"
+                  className=" p-2 rounded-md overflow-y-auto overflow-x-hidden bg-light-gray-2"
                   style={{
-                    backgroundColor: "#D3D3D3",
                     borderStyle: "solid",
                     borderColor: "black",
                     borderWidth: "1px",
@@ -1019,7 +1016,7 @@ const NewGrantModal: React.FC<{
                         <div
                           style={{
                             height: "42px",
-                            backgroundColor: "#F2EBE4",
+                            backgroundColor: "var(--color-tan)",
                             borderStyle: "solid",
                             borderColor: "black",
                             borderWidth: "1px",
@@ -1045,7 +1042,7 @@ const NewGrantModal: React.FC<{
                         <button
                           style={{
                             height: "42px",
-                            backgroundColor: "#FF6B6B",
+                            backgroundColor: "var(--color-light-red)",
                             borderStyle: "solid",
                             borderColor: "black",
                             borderWidth: "1px",
@@ -1075,7 +1072,7 @@ const NewGrantModal: React.FC<{
           </label>
           <textarea
             style={{
-              backgroundColor: "#F2EBE4",
+              backgroundColor: "var(--color-tan)",
               borderStyle: "solid",
               borderColor: "black",
               borderWidth: "1px",
@@ -1108,7 +1105,7 @@ const NewGrantModal: React.FC<{
             style={{
               fontFamily: "helvetica",
               color: "black",
-              backgroundColor: "#F58D5C",
+              backgroundColor: "var(--color-medium-orange)",
               borderStyle: "solid",
               borderColor: "black",
               borderWidth: "1px",
@@ -1142,7 +1139,7 @@ const NewGrantModal: React.FC<{
             <button
               onClick={() => setShowErrorPopup(false)}
               style={{
-                backgroundColor: "#F58D5C",
+                backgroundColor: "var(--color-medium-orange)",
                 color: "black",
                 borderStyle: "solid",
                 borderColor: "black",
diff --git a/frontend/src/main-page/grants/styles/CalendarDropdown.css b/frontend/src/main-page/grants/styles/CalendarDropdown.css
index 236ff6d7..e6299118 100644
--- a/frontend/src/main-page/grants/styles/CalendarDropdown.css
+++ b/frontend/src/main-page/grants/styles/CalendarDropdown.css
@@ -18,7 +18,7 @@
 }
 
 .calendar-toggle-button:hover {
-    background-color: #f7a781;
+    background-color: var(--color-light-orange);
     border-color: black;
 }
 
@@ -31,6 +31,6 @@
     z-index: 9999;
     background-color: white;
     padding: 1rem;
-    border: 0.1rem solid #ccc;
+    border: 0.1rem solid lightgray;
     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
 }
\ No newline at end of file
diff --git a/frontend/src/main-page/grants/styles/GrantButton.css b/frontend/src/main-page/grants/styles/GrantButton.css
index f8ed6526..9322a33c 100644
--- a/frontend/src/main-page/grants/styles/GrantButton.css
+++ b/frontend/src/main-page/grants/styles/GrantButton.css
@@ -1,5 +1,5 @@
 .grant-button {
-    color: #000;
+    color: black;
     
     /* Shape and layout */
     border-radius: 15px;
diff --git a/frontend/src/main-page/grants/styles/GrantDetails.css b/frontend/src/main-page/grants/styles/GrantDetails.css
index 7348c545..a661163b 100644
--- a/frontend/src/main-page/grants/styles/GrantDetails.css
+++ b/frontend/src/main-page/grants/styles/GrantDetails.css
@@ -26,7 +26,7 @@
   min-height: 100px;  /* Sets a reasonable height */
   min-width: 100%;
   padding: 1rem;      /* Matches <p> padding */
-  border: 0.1rem solid #F26624;
+  border: 0.1rem solid var(--color-dark-orange);
     border-radius: 15px;
   transition: border-color 0.3s ease;
   overflow-y: auto;
diff --git a/frontend/src/main-page/grants/styles/GrantItem.css b/frontend/src/main-page/grants/styles/GrantItem.css
index 4b558640..412999dc 100644
--- a/frontend/src/main-page/grants/styles/GrantItem.css
+++ b/frontend/src/main-page/grants/styles/GrantItem.css
@@ -9,10 +9,10 @@
   /* justify-content: space-between; */
   border-radius: 15px;
 
-  background-color: #f2ebe4;
+  background-color: var(--color-tan);
   /* margin: 0; Remove margin */
   transition: background-color 0.2s ease;
-  border: 0.1rem solid #f26624;
+  border: 0.1rem solid var(--color-dark-orange);
 }
 
 .grant-summary.expanded {
@@ -52,7 +52,7 @@
 .grant-body.expanded {
   max-height: 100%;
   padding: 1rem;
-  border: 0.1rem solid #f26624;
+  border: 0.1rem solid var(--color-dark-orange);
   border-top-width: 0cap;
 }
 
@@ -67,20 +67,7 @@
   padding-top: 1rem; /* Optional: Add some space above the button */
 }
 
-.done-button {
-  bottom: 1rem;
-  right: 1rem;
-  padding: 0.5rem 1rem;
-  background-color: #3191cf;
-  color: black;
-  border: none;
-  border-radius: 15px;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: background-color 0.3s ease;
-}
-
 .gray-label {
   color: black;
-  background-color: "#D3D3D3";
+  background-color: var(--color-light-gray-2);
 }
diff --git a/frontend/src/main-page/grants/styles/GrantList.css b/frontend/src/main-page/grants/styles/GrantList.css
index f62df063..d15f2c85 100644
--- a/frontend/src/main-page/grants/styles/GrantList.css
+++ b/frontend/src/main-page/grants/styles/GrantList.css
@@ -4,6 +4,6 @@
     flex-direction: column;
     justify-content: space-around;
     border-radius: 15px;
-background: #F7A781;
+    background: var(--color-light-orange);
 /* padding: 0.5em; */
 }
diff --git a/frontend/src/main-page/grants/styles/GrantPage.css b/frontend/src/main-page/grants/styles/GrantPage.css
index 7e59bac0..597c8175 100644
--- a/frontend/src/main-page/grants/styles/GrantPage.css
+++ b/frontend/src/main-page/grants/styles/GrantPage.css
@@ -10,7 +10,7 @@ html, body {
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
-    background-color: #F2EBE4;
+    background-color: -var(--color-tan);
     width: 100%;
     height: 100%;
     overflow-y: auto;
diff --git a/frontend/src/main-page/grants/styles/GrantSearch.css b/frontend/src/main-page/grants/styles/GrantSearch.css
index 85e4f23c..7b6c4286 100644
--- a/frontend/src/main-page/grants/styles/GrantSearch.css
+++ b/frontend/src/main-page/grants/styles/GrantSearch.css
@@ -28,37 +28,10 @@
 
 .search-input:focus {
     outline: none !important;
-    border:0.1rem solid #F58D5C;
+    border:0.1rem solid var(--color-medium-orange);
 }
 
 
 .filter-state {
     color: whitesmoke;
-}
-
-.dropdown-container {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 100%;
-    background: white;
-    border: 0.1rem solid #ddd;
-    border-radius: 15px;
-    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
-    z-index: 10;
-    max-height: 200px;
-    overflow-y: auto;
-}
-
-.dropdown-item {
-    padding: 8px;
-    cursor: pointer;
-    border-bottom: 0.1rem solid #eee;
-    transition: background 0.2s ease;
-    color: black;
-}
-
-.dropdown-item:hover {
-    background: #f1f1f1;
-    color: black;
 }
\ No newline at end of file
diff --git a/frontend/src/main-page/grants/styles/NewGrantModal.css b/frontend/src/main-page/grants/styles/NewGrantModal.css
index ce6331b7..3f544b92 100644
--- a/frontend/src/main-page/grants/styles/NewGrantModal.css
+++ b/frontend/src/main-page/grants/styles/NewGrantModal.css
@@ -91,14 +91,6 @@
   text-align: left;
 }
 
-/* Error message styling */
-.error-message {
-  grid-column: 1 / span 2; /* span across both columns */
-  margin: 0.5rem 0;
-  color: #d9534f;
-  font-weight: bold;
-}
-
 /* For text inputs, selects, textareas */
 .modal-content input,
 .modal-content select,
@@ -107,11 +99,11 @@
   padding: 0.6rem;
   font-size: 1rem;
   margin-bottom: 0.25rem;
-  border: 0.1rem solid #ccc;
+  border: 0.1rem solid lightgray;
   border-radius: 15px;
   box-sizing: border-box;
-  background-color: #fff;
-  color: #000;
+  background-color: white;
+  color: black;
 }
 
 /* Make textareas bigger by default */
@@ -182,9 +174,9 @@
     Buttons 
   */
 .modal-content button {
-  background-color: #007bff; /* typical “primary” color */
+  background-color: gray; /* typical “primary” color */
   border: none;
-  color: #fff;
+  color: white;
   padding: 0.75rem 1.25rem;
   font-size: 1rem;
   border-radius: 15px;
@@ -194,5 +186,5 @@
 
 /* Hover effect for buttons */
 .modal-content button:hover {
-  background-color: #0056b3;
+  background-color: darkgray;
 }
diff --git a/frontend/src/main-page/grants/styles/UserDropdown.css b/frontend/src/main-page/grants/styles/UserDropdown.css
index a34ef7b7..8db14b05 100644
--- a/frontend/src/main-page/grants/styles/UserDropdown.css
+++ b/frontend/src/main-page/grants/styles/UserDropdown.css
@@ -6,19 +6,19 @@
 .user-dropdown-input {
   height: 48px;
   width: 100%;
-  background-color: #F2EBE4;
+  background-color: var(--color-tan);
   border-style: solid;
   border-color: black;
   border-width: 1px;
   border-radius: 4px;
   padding: 0 12px;
   cursor: pointer;
-  color: #374151;
+  color: var(--color-teal);
 }
 
 .user-dropdown-input:focus {
   outline: none;
-  border-color: #F58D5C;
+  border-color: var(--color-medium-orange);
 }
 
 .user-dropdown-menu {
@@ -28,7 +28,7 @@
   right: 0;
   max-height: 200px;
   overflow-y: auto;
-  background-color: #F2EBE4;
+  background-color: var(--color-tan);
   border-style: solid;
   border-color: black;
   border-width: 1px;
@@ -42,12 +42,12 @@
 .user-dropdown-item {
   padding: 12px;
   cursor: pointer;
-  border-bottom: 1px solid #D3D3D3;
+  border-bottom: 1px solid var(--color-light-gray-2);
   transition: background-color 0.2s;
 }
 
 .user-dropdown-item:hover {
-  background-color: #D3D3D3;
+  background-color: var(--color-light-gray-2);
 }
 
 .user-dropdown-item:last-child {
@@ -62,7 +62,7 @@
 
 .user-dropdown-email {
   font-size: 14px;
-  color: #666;
+  color: gray;
   margin-top: 2px;
   font-family: helvetica;
   white-space: nowrap;
@@ -72,6 +72,6 @@
 
 .user-dropdown-empty {
   padding: 12px;
-  color: #666;
+  color: gray;
   text-align: center;
 }
\ No newline at end of file
diff --git a/frontend/src/main-page/header/styles/AccountInfo.css b/frontend/src/main-page/header/styles/AccountInfo.css
index 11eb4f22..aeef0adc 100644
--- a/frontend/src/main-page/header/styles/AccountInfo.css
+++ b/frontend/src/main-page/header/styles/AccountInfo.css
@@ -12,14 +12,14 @@
   position: absolute;
   padding: 20px 40px;
   background-color: white;
-  border: 1px solid #2d2d2d;
+  border: 1px solid black;
   border-radius: 8px;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
   z-index: 9999;
 }
 
 .popup-header {
-  color: #000;
+  color: black;
   font-size: 22px;
   font-style: normal;
   font-weight: 100;
@@ -35,7 +35,7 @@
   flex-direction: column;
   gap: 10px;
   margin-bottom: 20px;
-  border-left: 4px solid #ff6b35;
+  border-left: 4px solid var(--color-medium-orange);
   padding-left: 20px;
   z-index: 1000;
 }
@@ -49,7 +49,7 @@
 }
 
 .info-label {
-  color: #646464;
+  color: gray;
   font-size: 15px;
   font-style: normal;
   font-weight: 700;
@@ -58,7 +58,7 @@
 }
 
 .info-value {
-  color: #000;
+  color: black;
 font-size: 15px;
 font-style: normal;
 font-weight: 400;
@@ -81,17 +81,17 @@ z-index: 1000;
   gap: 8px;
   padding: 10px 20px;
   background: white;
-  border: 2px solid #2d2d2d;
+  border: 2px solid var(--color-almost-black);
   border-radius: 10px;
   font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s ease;
-  color: #2d2d2d;
+  color: var(--color-almost-black);
 }
 
 .user-list-btn:hover {
-  background: #f8f8f8;
+  background: var(--color-light-gray);
   transform: translateY(-1px);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
@@ -103,10 +103,10 @@ z-index: 1000;
 
 .logout-btn {
   padding: 10px 26px;
-  background: #ffb3b3;
-  border: 2px solid #ff8888;
+  background: var(--color-light-warning);
+  border: 2px solid var(--color-light-red);
   border-radius: 10px;
-  color: #d63031;
+  color: var(--color-warning);
   font-size: 14px;
   font-weight: 600;
   cursor: pointer;
@@ -114,9 +114,9 @@ z-index: 1000;
 }
 
 .logout-btn:hover {
-  background: #ff9999;
+  background: var(--color-light-orange);
   color: white;
-  border-color: #ff7777;
+  border-color: var(--color-medium-orange);
   transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(255, 119, 119, 0.3);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
diff --git a/frontend/src/main-page/header/styles/Header.css b/frontend/src/main-page/header/styles/Header.css
index 3ba13e38..e1d6940e 100644
--- a/frontend/src/main-page/header/styles/Header.css
+++ b/frontend/src/main-page/header/styles/Header.css
@@ -34,7 +34,7 @@
 .header-button-selected {
     font-weight: 600;
     color: black;
-    background-color: #F7A781;
+    background-color: var(--color-light-orange);
     border: 0.1rem black solid;
 }
 
diff --git a/frontend/src/main-page/users/ApprovedUserCard.tsx b/frontend/src/main-page/users/ApprovedUserCard.tsx
index aff33797..298ffb8e 100644
--- a/frontend/src/main-page/users/ApprovedUserCard.tsx
+++ b/frontend/src/main-page/users/ApprovedUserCard.tsx
@@ -155,7 +155,7 @@ const ApprovedUserCard = ({
             <Menu.Content>
               <Button
                 px={4}
-                className="text-sm focus:outline-none block w-full bg-[#D3D3D3] border-[#666666] text-[#666666] mb-1"
+                className="text-sm focus:outline-none block w-full bg-light-gray-2 border-dark-gray text-dark-gray mb-1"
                 onClick={() => setIsChangeGroupModalOpen(true)}
               >
                 Change to {position === UserStatus.Admin ? "employee" : "admin"}
@@ -164,7 +164,7 @@ const ApprovedUserCard = ({
               </Button>
               <Button
                 px={4}
-                className="text-sm focus:outline-none block w-full bg-[#FFDFDF] border-[#D33221] text-[#D33221]"
+                className="text-sm focus:outline-none block w-full bg-light-warning-2 border-warning text-warning"
                 onClick={() => setIsDeleteUserModalOpen(true)}
               >
                 Delete user{"  "}
diff --git a/frontend/src/main-page/users/PendingUserCard.tsx b/frontend/src/main-page/users/PendingUserCard.tsx
index a2b89560..fd1346d1 100644
--- a/frontend/src/main-page/users/PendingUserCard.tsx
+++ b/frontend/src/main-page/users/PendingUserCard.tsx
@@ -97,13 +97,13 @@ const PendingUserCard = ({
       </div>
       <div className="flex w-[140px] gap-3">
         <button 
-          className="bg-[#c6fbd3] w-8 h-8 focus:outline-none rounded"
+          className="bg-pale-green w-8 h-8 focus:outline-none rounded"
           onClick={approveUser}
           disabled={isLoading}>
           <FontAwesomeIcon icon={faCheck} className="text-black" />
         </button>
         <button 
-        className="bg-[#fe9d92] w-8 h-8 focus:outline-none rounded"
+        className="bg-light-warning w-8 h-8 focus:outline-none rounded"
           onClick={rejectUser}
           disabled={isLoading}>
           <FontAwesomeIcon icon={faX} className="text-black"/>
diff --git a/frontend/src/main-page/users/UserPositionCard.tsx b/frontend/src/main-page/users/UserPositionCard.tsx
index 184f917a..e4503113 100644
--- a/frontend/src/main-page/users/UserPositionCard.tsx
+++ b/frontend/src/main-page/users/UserPositionCard.tsx
@@ -9,12 +9,12 @@ const UserPositionCard = ({ position }: UserPositionCardProps) => {
   const cardStyles = useMemo(() => {
     switch (position) {
       case UserStatus.Admin:
-        return "bg-[#BCFFD8] border-[#119548] text-[#119548]";
+        return "bg-pale-green border-green text-green";
       case UserStatus.Employee:
-        return "bg-[#FFF8CA] border-[#F8CC16] text-[#8a710c]";
+        return "bg-medium-yellow border-yellow text-dark-yellow";
       case UserStatus.Inactive:
       default:
-        return "bg-[#D3D3D3] border-[#666666] text-[#666666]";
+        return "bg-light-gray-2 border-gray text-gray";
     }
   }, [position]);
 
diff --git a/frontend/src/main-page/users/Users.tsx b/frontend/src/main-page/users/Users.tsx
index 7d94f4b5..2a8d2fad 100644
--- a/frontend/src/main-page/users/Users.tsx
+++ b/frontend/src/main-page/users/Users.tsx
@@ -96,15 +96,15 @@ const Users = observer(() => {
               ? "All Users"
               : "Pending Users"}
           </h1>
-          <p className="text-[#FF8476]">{numInactiveUsers} new users</p>
+          <p className="text-dark-orange">{numInactiveUsers} new users</p>
         </div>
-        <div className="min-h-screen bg-[#F5F4F4] border rounded-md relative flex flex-col">
+        <div className="min-h-screen bg-light-gray-3 border rounded-md relative flex flex-col">
           <div className="absolute right-7 top-0 -translate-y-full flex">
             <button
               className={`w-52 h-16 border rounded-b-none focus:outline-none ${
                 usersTabStatus === UsersTab.PendingUsers
-                  ? "bg-[#F5F4F4] border-x-[#000000] border-t-[#000000]"
-                  : "bg-[#F4F4F4] border-x-[#BFBBBB] border-t-[#BFBBBB] border-b-[#000000]"
+                  ? "bg-light-gray-3 border-x-black border-t-black"
+                  : "bg-light-gray-3 border-x-medium-gray-2 border-t-medium-gray-2 border-b-black"
               }`}
               onClick={() => {
                 setUsersTabStatus(UsersTab.PendingUsers);
@@ -116,8 +116,8 @@ const Users = observer(() => {
             <button
               className={`w-52 h-16 border rounded-b-none ml-2 focus:outline-none ${
                 usersTabStatus === UsersTab.CurrentUsers
-                  ? "bg-[#F5F4F4] border-x-[#000000] border-t-[#000000]"
-                  : "bg-[#F4F4F4] border-x-[#BFBBBB] border-t-[#BFBBBB] border-b-[#000000]"
+                  ? "bg-light-gray-3 border-x-black border-t-black"
+                  : "bg-light-gray-3 border-x-medium-gray-2 border-t-medium-gray-2 border-b-black"
               }`}
               onClick={() => {
                 setUsersTabStatus(UsersTab.CurrentUsers);
@@ -130,7 +130,7 @@ const Users = observer(() => {
           <div>
             {usersTabStatus === UsersTab.CurrentUsers ? (
               <>
-                <div className="flex px-9 pb-3 m-7 border-b border-b-[#BFBBBB] font-semibold justify-around">
+                <div className="flex px-9 pb-3 m-7 border-b border-b-medium-gray-2 font-semibold justify-around">
                   <p className="w-[140px] text-left">User ID</p>
                   <p className="w-[140px] text-left">Email</p>
                   <p className="w-[140px] text-left">Position</p>
@@ -146,7 +146,7 @@ const Users = observer(() => {
               </>
             ) : (
               <>
-                <div className="flex px-9 pb-3 m-7 border-b border-b-[#BFBBBB] font-semibold justify-around">
+                <div className="flex px-9 pb-3 m-7 border-b border-b-medium-gray-2 font-semibold justify-around">
                   <p className="w-[140px] text-left">User ID</p>
                   <p className="w-[140px] text-left">Email</p>
                   <p className="w-[140px] text-left">Position</p>
diff --git a/frontend/src/styles/Footer.css b/frontend/src/styles/Footer.css
index a8d3132a..c76e2d9f 100644
--- a/frontend/src/styles/Footer.css
+++ b/frontend/src/styles/Footer.css
@@ -7,23 +7,14 @@
 flex-grow: 1;
 
   
-    background-color: #ffffff;
-    border-color: rgb(228, 228, 231);
+    background-color: white;
+    border-color: var(--color-off-white);
     width: 100%;
     padding: 1em;
     
     /* Text */
     font-size: 1.3rem;
-    color: rgb(74 73 81) + 1;
-}
-
-.bcan-link {
-    background-color: "#0b303b";
-    border: "0.1rem solid #ccc";
-    border-width: 0;
-    border-radius: "100px";
-    color: "#fff";
-    text-transform: "uppercase";
+    color: var(--color-almost-black);
 }
 
 .text-block {
@@ -36,5 +27,5 @@ flex-grow: 1;
 .northeastern-uni-caption {
     font-size: 0.90rem;
     line-height: 1rem;
-    color: rgb(153 151 162);
+    color: var(--color-dark-gray);
 }
\ No newline at end of file
diff --git a/frontend/src/styles/button.css b/frontend/src/styles/button.css
index b9392dd3..53ba4cc6 100644
--- a/frontend/src/styles/button.css
+++ b/frontend/src/styles/button.css
@@ -1,34 +1,3 @@
-/* Custom dropdown container */
-.custom-dropdown-wrapper {
-  position: relative;
-  display: inline-block;
-}
-
-/* The dropdown menu styling */
-.custom-dropdown {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  z-index: 10;
-  background-color: #fff;
-  border: 0.1rem solid #ddd;
-  border-radius: 15px;
-  padding: 0.5rem;
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* Each dropdown option */
-.custom-dropdown-option {
-  cursor: pointer;
-}
-
-.custom-dropdown-option:hover {
-  opacity: 0.85;
-}
-
 /* Optional: styling for the preview of the status button */
 .status-button-preview {
   cursor: pointer;
@@ -36,27 +5,10 @@
 
 /* Button preview defaults */
 .button-default {
-  color: #000000;
+  color: black;
   width: 168.42px;
   text-align: center;
   padding: 0.5rem 0;
   border-radius: 15px;
   z-index: 0;
-}
-
-/* Custom button color classes */
-.green-button {
-  background-color: #5ab911;
-}
-
-.gray-button {
-  background-color: #d3d3d3;
-}
-
-.orange-button {
-  background-color: #f7a781;
-}
-
-.navy-button {
-  background-color: #0b303b;
-}
+}
\ No newline at end of file
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
index 548ff0f3..3c451938 100644
--- a/frontend/src/styles/index.css
+++ b/frontend/src/styles/index.css
@@ -1,15 +1,67 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
 
 :root {
+
+  --color-active: #5AB911;
+  --color-inactive: #A9A9A9;
+  --color-potential: #E6CA15;
+  --color-pending: #FFA500;
+  --color-dark-gray: #757575;
+
+  --color-dark-blue: #3191CF;
+  --color-light-blue: #90c4e5;
+
+  --color-green: #119548;
+  --color-green-2: #5AB911;
+  --color-pale-green: #c6fbd3;
+
+  --color-yellow: #F8CC16;
+  --color-medium-yellow: #FFF8CA;
+  --color-dark-yellow: #8a710c;
+
+  --color-black: #000000;
+  --color-almost-black: #2D2D2D;
+
+  --color-red: #ff0000;
+  --color-burgundy: #771505;
+  --color-light-red: #FF6B6B;
+
+  --color-tan: #F2EBE4;
+
+  --color-dark-orange: #F26624;
+  --color-light-orange: #f7a781;
+  --color-medium-orange: #F58D5C;
+
+  --color-white: #FFFFFF;
+
+  --color-light-gray: #F8F8F8;
+  --color-light-gray-2: #D3D3D3;
+  --color-light-gray-3: #F5F4F4;
+  --color-gray: #808080;
+  --color-medium-gray: #D9D9D9;
+  --color-medium-gray-2: #BFBBBB;
+  --color-dark-gray: #757575;
+
+  --color-pale-orange: #FFCEB6;
+  --color-white-orange: #FFF1EB;
+
+  --color-warning: #D33221;
+  --color-light-warning: #FFA399;
+  --color-light-warning-2: #FFDFDF;
+
+  --color-off-white: #F9F9F9;
+  --color-teal: #213547;
+
+
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
 
   color-scheme: light dark;
   color: rgba(0, 0, 0, 0.87);
-  background-color: #F2EBE4;
+  background-color: var(--color-tan);
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -19,11 +71,11 @@
 
 a {
   font-weight: 500;
-  color: #646cff;
+  color: var(--color-dark-blue);
   text-decoration: inherit;
 }
 a:hover {
-  color: #535bf2;
+  color: var(--color-dark-blue);
 }
 
 body {
@@ -46,7 +98,7 @@ button {
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
-  background-color: #1a1a1a;
+  background-color: black;
   cursor: pointer;
   transition: border-color 0.25s;
 }
@@ -65,14 +117,14 @@ button:focus-visible {
 
 @media (prefers-color-scheme: light) {
   :root {
-    color: #213547;
-    background-color: #ffffff;
+    color: var(--color-teal);
+    background-color: white;
   }
   a:hover {
-    color: #747bff;
+    color: var(--color-dark-blue);
   }
   button {
-    background-color: #f9f9f9;
+    background-color: var(--color-off-white);
   }
 }
 
diff --git a/frontend/src/styles/notification.css b/frontend/src/styles/notification.css
index e73e0026..0ac021d6 100644
--- a/frontend/src/styles/notification.css
+++ b/frontend/src/styles/notification.css
@@ -4,7 +4,7 @@
   top: 75px;
   width: min(340px, 70%);
   background-color: white;
-  border: 1px solid #343131;
+  border: 1px solid black;
   border-radius: 6px;
   box-shadow: 0 4px 10px rgba(0,0,0,0.1);
   padding: 0.5rem;
@@ -17,7 +17,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 0.5rem 0.5rem;
-  border-bottom: 1px solid #ddd;
+  border-bottom: 1px solid var(--color-light-gray-2);
 }
 
 
@@ -35,10 +35,10 @@
   border: none;
   font-size: 1rem;
   cursor: pointer;
-  color: #777;
+  color: gray;
 }
 .close-button:hover {
-  color: #e74c3c;
+  color: var(--color-warning);
 }
 
 
@@ -53,7 +53,7 @@
 
 .grant-notification {
   position: relative;
-  border-bottom: 0.2px solid #dfd9d9;
+  border-bottom: 0.2px solid var(--color-light-gray-2);
   border-radius: 0px;
   padding: 8px 10px;
   padding-right: 35px;
@@ -65,7 +65,7 @@
 
 .bell-notif {
   margin-right: 10px;
-  background-color: rgb(225, 225, 225);
+  background-color: var(--color-light-gray);
   padding: 10px;
   border-radius: 100%;
   scale: 73%;
@@ -84,30 +84,30 @@
 .notification-title {
   font-weight: 600;
   font-size: 13px;
-  color: #101010;
+  color: black;
   line-height: 1.15;
 }
 
 .notification-message {
   font-size: 12.5px;
-  color: #555;
+  color: var(--color-dark-gray);
   margin-top: 4px;
   line-height: 1.2;
 }
 
 .grant-notification:hover {
-  background-color: #f1f1f1;
+  background-color: var(--color-off-white);
 }
 
 .notification-trash-icon {
   position: absolute;
   bottom: 8px;
   right: 10px;
-  color: #aaa;
+  color: gray;
   cursor: pointer;
   font-size: 0.9rem
 }
 
 .notification-trash-icon:hover {
-  color: #e74c3c
+  color: var(--color-warning)
 }
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index a40726dd..eb57699b 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -1,25 +1,40 @@
 import type { Config } from "tailwindcss";
 
 export default {
-  content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"],
+  content: ["./src/**/*.{js,ts,jsx,tsx,mdx,html}"],
   theme: {
     colors: {
       'dark-blue': '#3191CF',
       'light-blue': '#90c4e5',
       'green': '#119548',
+      'green-2': '#5AB911',
+      'pale-green': '#c6fbd3',
       'yellow': '#F8CC16',
+      'medium-yellow': '#FFF8CA',
+      'dark-yellow': '#8a710c',
       'black': '#000000',
       'red': '#ff0000',
+      'burgundy': '#771505',
+      'light-red': '#FF6B6B',
       'tan': '#F2EBE4',
       'dark-orange': "#F26624",
       'light-orange': "#f7a781",
       'medium-orange': '#F58D5C',
       'white': "#FFFFFF",
       'light-gray': '#F8F8F8',
+      'light-gray-2': '#D3D3D3',
+      'light-gray-3': '#F5F4F4',
       'gray': '#808080',
       'pale-orange':'#FFCEB6',
       'white-orange': '#FFF1EB',
       'medium-gray': '#D9D9D9',
+      'medium-gray-2': '#BFBBBB',
+      'dark-gray': '#757575',
+      'warning': '#D33221',
+      'light-warning': '#FFA399',
+      'light-warning-2': '#FFDFDF',
+      'off-white': '#F9F9F9',
+      'teal': '#213547',
     },
     fontFamily: {
       sans: ['Montserrat', 'sans-serif'],
diff --git a/middle-layer/types/Status.ts b/middle-layer/types/Status.ts
index 5f5f0b0b..beaa190f 100644
--- a/middle-layer/types/Status.ts
+++ b/middle-layer/types/Status.ts
@@ -41,13 +41,13 @@ export function statusToString(status : Status): string {
 // color associated with status on UI, represented as a string
 export function getColorStatus(status: string) {
     switch (status) {
-        case "Active": return "#5AB911"; // green
-        case "Inactive": return "#A9A9A9" // gray
-        case "Potential": return "#E6CA15" // TODO: no color given for potential yet
+        case "Active": return "var(--color-active)"; // green
+        case "Inactive": return "var(--color-inactive)" // gray
+        case "Potential": return "var(--color-potential)" // TODO: no color given for potential yet
         // TODO add colors for rejected and pending
-        case "Rejected": return "#FF0000" // red
-        case "Pending": return "#FFA500" // orange
-        default: return '#A9A9A9';
+        case "Rejected": return "var(--color-red)" // red
+        case "Pending": return "var(--color-pending)" // orange
+        default: return 'gray';
     }
 }