diff --git a/src/components/goal/Goal.module.css b/src/components/goal/Goal.module.css
index b3e1f74d..60a2b460 100644
--- a/src/components/goal/Goal.module.css
+++ b/src/components/goal/Goal.module.css
@@ -19,16 +19,16 @@
 
 .createInput input {
   border-radius: 2px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--outline);
   margin: 2px 4px;
   padding: 4px 2px;
 }
 
 .description {
-  color: var(--grey-202-a-333-c, #2a333c);
+  color: var(--grey-20);
 
   /* Body 1 */
-  font-family: var(--font-inter);
+  font-family: var(--inter);
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
@@ -61,14 +61,14 @@
   gap: 10px;
 
   border-radius: 16px;
-  background: var(--grey-80-f-4-f-6-f-7, #f4f6f7);
+  background: var(--grey-80);
 }
 
 .subgoalCount {
-  color: var(--grey-30586874, #586874);
+  color: var(--grey-30);
 
   /* Body 2 */
-  font-family: var(--font-inter);
+  font-family: var(--inter);
   font-size: 14px;
   font-style: normal;
   font-weight: 500;
diff --git a/src/components/goal/Goal.tsx b/src/components/goal/Goal.tsx
index 16d3a475..f8115f3d 100644
--- a/src/components/goal/Goal.tsx
+++ b/src/components/goal/Goal.tsx
@@ -64,7 +64,7 @@ const Goals = ({ goal }: GoalProps) => {
                 fontSize: "14px",
                 borderRadius: "8px",
                 backgroundColor: "white",
-                color: "#20159E",
+                color: "var(--primary-40)",
                 border: "none",
               }}
               onClick={async (e) => {
diff --git a/src/components/iep/Iep.module.css b/src/components/iep/Iep.module.css
index 3afb9033..d29acabf 100644
--- a/src/components/iep/Iep.module.css
+++ b/src/components/iep/Iep.module.css
@@ -5,11 +5,11 @@
   align-items: center;
   gap: 8px;
   border-radius: 8px 8px 0px 0px;
-  background: #fff;
+  background: var(--grey-100);
 }
 
 .goalsContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   padding-bottom: 2rem;
   min-height: 50vh;
   max-height: 70vh;
@@ -41,12 +41,12 @@
 }
 
 .addGoalFormContainer {
-  border-left: 1px #d6dde1 solid;
+  border-left: 1px var(--outline) solid;
   padding: 2rem;
 }
 
 .addGoalFormHeading {
-  color: #021426;
+  color: var(--on-background);
   font-size: 24px;
   font-family: var(--font-quicksand);
   font-weight: 600;
@@ -64,12 +64,12 @@
   gap: 8px;
   align-self: stretch;
   border-radius: 8px;
-  background: #f5f5f5;
+  background: var(--grey-80);
   resize: none;
 }
 
 .listGoal {
-  border-bottom: 1px solid #d6dde1;
+  border-bottom: 1px solid var(--outline);
 }
 
 .listGoal :hover {
diff --git a/src/components/iep/Iep.tsx b/src/components/iep/Iep.tsx
index b2677cab..440577dc 100644
--- a/src/components/iep/Iep.tsx
+++ b/src/components/iep/Iep.tsx
@@ -88,13 +88,13 @@ const Iep = ({ iep_id }: IepProps) => {
               {showAddGoalForm && (
                 <ListItem
                   key="adding-goal"
-                  style={{ borderBottom: "1px solid #D6DDE1" }}
+                  style={{ borderBottom: "1px solid var(--outline)" }}
                 >
                   <div
                     style={{
                       padding: "24px",
                       fontStyle: "italic",
-                      color: "#788591",
+                      color: "var(--grey-40)",
                     }}
                   >
                     Adding new goal...
diff --git a/src/components/paraTrials/Paratrials.module.css b/src/components/paraTrials/Paratrials.module.css
index a4b2dce7..5c7b1e6c 100644
--- a/src/components/paraTrials/Paratrials.module.css
+++ b/src/components/paraTrials/Paratrials.module.css
@@ -46,7 +46,7 @@
   background-color: var(--accent);
 }
 .counterNumberDisplay-blue {
-  background-color: #1680a133;
+  background-color: var(--accent);
 }
 .counterButton-green {
   background-color: var(--success);
@@ -58,7 +58,7 @@
   background-color: var(--warning-container);
 }
 .counterNumberDisplay-yellow {
-  background-color: #ffaa4433;
+  background-color: var(--warning-state);
 }
 .counterButton-red {
   background-color: var(--error);
diff --git a/src/components/progressBar/progressBar.tsx b/src/components/progressBar/progressBar.tsx
index 1a3c8640..ac59304e 100644
--- a/src/components/progressBar/progressBar.tsx
+++ b/src/components/progressBar/progressBar.tsx
@@ -12,8 +12,8 @@ const ProgressBar = ({ fillPercent }: ProgressBarProps) => {
         height: "5px",
         background:
           fillPercent === 100
-            ? "#788591"
-            : `linear-gradient(to right, #3023B8 0%, #3023B8 ${fillPercent}%, #9B93F1 ${fillPercent}%, #9B93F1 100%`,
+            ? "var(--grey-40)"
+            : `linear-gradient(to right, var(--primary-50) 0%, var(--primary-50) ${fillPercent}%, var(--primary-80) ${fillPercent}%, var(--primary-80) 100%`,
       }}
     ></div>
   );
diff --git a/src/components/styles/Toast.module.css b/src/components/styles/Toast.module.css
index f12d2a1d..33aa4e5a 100644
--- a/src/components/styles/Toast.module.css
+++ b/src/components/styles/Toast.module.css
@@ -14,8 +14,8 @@
   row-gap: 8px;
   flex-wrap: wrap;
   border-radius: 4px;
-  background: #fef1f0;
-  font-family: var(--font-inter);
+  background: var(--error-container);
+  font-family: var(--inter);
   font-size: 16px;
   font-style: normal;
   font-weight: 400;
@@ -24,5 +24,5 @@
 
 .closeButton {
   border: none;
-  background: #fef1f0;
+  background: var(--error-container);
 }
diff --git a/src/components/subgoal/Subgoal-Assignment-Modal.module.css b/src/components/subgoal/Subgoal-Assignment-Modal.module.css
index b0967909..57da82c7 100644
--- a/src/components/subgoal/Subgoal-Assignment-Modal.module.css
+++ b/src/components/subgoal/Subgoal-Assignment-Modal.module.css
@@ -11,7 +11,7 @@
 
 .subgoalDescriptionBox {
   border-radius: 8px;
-  background-color: #f6f5ff;
+  background-color: var(--primary-container);
   padding: 8px 16px;
 }
 
@@ -26,5 +26,5 @@
 
 /* We may have to set up a theme to override the MUI styles so we can achieve our design systems setups since this does not work, or build our own global buttons and use those */
 .button {
-  background-color: #20159e;
+  background-color: var(--primary-40);
 }
diff --git a/src/components/subgoal/Subgoal-Assignment-Modal.tsx b/src/components/subgoal/Subgoal-Assignment-Modal.tsx
index ec56898d..d357039c 100644
--- a/src/components/subgoal/Subgoal-Assignment-Modal.tsx
+++ b/src/components/subgoal/Subgoal-Assignment-Modal.tsx
@@ -139,7 +139,7 @@ export const SubgoalAssignmentModal = (props: SubgoalAssignmentModalProps) => {
                 my: 2,
                 maxHeight: "10rem",
                 overflow: "auto",
-                border: "1px solid #d6dde1",
+                border: "1px solid var(--grey-70)",
                 borderRadius: 1,
               }}
             >
diff --git a/src/components/subgoal/Subgoal.tsx b/src/components/subgoal/Subgoal.tsx
index 671cd8ea..2ee57690 100644
--- a/src/components/subgoal/Subgoal.tsx
+++ b/src/components/subgoal/Subgoal.tsx
@@ -14,12 +14,12 @@ const Subgoals = ({ subgoal }: SubgoalProps) => {
   const [isAssignmentModalOpen, setIsAssignmentModalOpen] = useState(false);
 
   return (
-    <Box sx={{ border: "1px solid #B9C1C6" }}>
+    <Box sx={{ border: "1px solid var(--grey-60)" }}>
       <Box
         sx={{
           display: "flex-col",
           justifyContent: "space-between",
-          backgroundColor: "#fff",
+          backgroundColor: "var(--grey-100)",
           padding: "1rem",
         }}
       >
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
index b935dc87..563cd371 100644
--- a/src/components/table/table.tsx
+++ b/src/components/table/table.tsx
@@ -238,7 +238,7 @@ function EnhancedTableInput<Column extends HeadCell>({
 
 const StyledTableRow = styled(TableRow)(() => ({
   "&:nth-of-type(odd)": {
-    backgroundColor: "#F8F9FA",
+    backgroundColor: "var(--grey-90)",
   },
   "&.MuiTableRow-hover:hover": {
     backgroundColor: "lightgray",
diff --git a/src/components/taskCard/TaskCard.module.css b/src/components/taskCard/TaskCard.module.css
index 1b96cf21..1aa349b7 100644
--- a/src/components/taskCard/TaskCard.module.css
+++ b/src/components/taskCard/TaskCard.module.css
@@ -8,12 +8,12 @@
 }
 .dateFloaterRed {
   composes: dateFloater;
-  color: #b3261e;
+  color: var(--error);
 }
 
 .dateFloaterGreen {
   composes: dateFloater;
-  color: #167841;
+  color: var(--success);
 }
 
 .profile {
@@ -35,7 +35,7 @@
   border-radius: 50%;
   height: 50px;
   width: 50px;
-  background-color: cadetblue;
+  background-color: var(--primary-80);
 }
 
 .imageDone {
diff --git a/src/components/uploadPicture/uploadImage.module.css b/src/components/uploadPicture/uploadImage.module.css
index e53800d9..ae07641c 100644
--- a/src/components/uploadPicture/uploadImage.module.css
+++ b/src/components/uploadPicture/uploadImage.module.css
@@ -9,10 +9,10 @@
   padding: 10px;
   display: block;
   margin-bottom: 20px;
-  background-color: white;
-  color: rgb(131, 23, 202);
-  border: 1px solid #ffffffee;
-  box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
+  background-color: var(--grey-100);
+  color: var(--primary-70);
+  border: 1px solid var(--outline);
+  box-shadow: 0px 0px 1px 2px var(--grey-10);
   font-size: 14px;
   font-family: "Lucida Grande", "Arial", sans-serif;
   align-items: center;
diff --git a/src/pages/students/[student_id].tsx b/src/pages/students/[student_id].tsx
index 672a9ef3..f55b6c36 100644
--- a/src/pages/students/[student_id].tsx
+++ b/src/pages/students/[student_id].tsx
@@ -22,7 +22,7 @@ const style = {
   left: "50%",
   transform: "translate(-50%, -50%)",
   bgcolor: "background.paper",
-  border: "2px solid #000",
+  border: "2px solid var(--grey-10)",
   boxShadow: 24,
 
   p: 4,
@@ -30,7 +30,7 @@ const style = {
 
 // uncomment and edit to apply design systems styling
 // const textfieldstyle = {
-//   border: "1px solid #20159E",
+//   border: "1px solid var(--grey-10)",
 //   width: "100%",
 // };
 
diff --git a/src/styles/GoalPage.module.css b/src/styles/GoalPage.module.css
index 724687d8..7915c351 100644
--- a/src/styles/GoalPage.module.css
+++ b/src/styles/GoalPage.module.css
@@ -25,7 +25,7 @@
   align-items: center;
   gap: 8px;
   border-radius: 8px 8px 0px 0px;
-  background-color: #e0e0e0;
+  background-color: var(--grey-70);
   color: var(--grey-30);
 }
 
diff --git a/src/styles/Input.module.css b/src/styles/Input.module.css
index 541b26ec..b81b2807 100644
--- a/src/styles/Input.module.css
+++ b/src/styles/Input.module.css
@@ -1,7 +1,7 @@
 /* TODO: Might use MUI for all inputs for consistency */
 .default {
   border-radius: 2px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--outline);
   margin: 2px 4px;
   padding: 4px 2px;
 }
diff --git a/src/styles/Modal.module.css b/src/styles/Modal.module.css
index 741d0bbe..c8b5c5dc 100644
--- a/src/styles/Modal.module.css
+++ b/src/styles/Modal.module.css
@@ -4,8 +4,8 @@
   left: 50%;
   transform: translate(-50%);
   width: 400;
-  background-color: white;
-  border: 1px solid #000;
+  background-color: var(--grey-100);
+  border: 1px solid var(--grey-10);
   border-radius: 10px;
   box-shadow: 24;
   padding: 3rem;
diff --git a/src/styles/StaffPage.module.css b/src/styles/StaffPage.module.css
index 073df368..4f643bb5 100644
--- a/src/styles/StaffPage.module.css
+++ b/src/styles/StaffPage.module.css
@@ -1,11 +1,11 @@
 .staffInfoContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   border-radius: 10px;
   padding: 0.5rem;
 }
 
 .staffEditContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   border-radius: 10px;
   padding: 20px 50px;
 }
@@ -47,7 +47,7 @@
 }
 
 .noStaffContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   border-radius: 10px;
   margin-top: 2rem;
   min-height: 50vh;
diff --git a/src/styles/StudentPage.module.css b/src/styles/StudentPage.module.css
index b93896a8..1b91abaa 100644
--- a/src/styles/StudentPage.module.css
+++ b/src/styles/StudentPage.module.css
@@ -1,11 +1,11 @@
 .studentInfoContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   border-radius: 10px;
   padding: 0.5rem;
 }
 
 .studentEditContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   border-radius: 10px;
   padding: 20px 50px;
 }
@@ -54,7 +54,7 @@
 }
 
 .noIepContainer {
-  background-color: #ffffff;
+  background-color: var(--grey-100);
   border-radius: 10px;
   margin-top: 2rem;
   min-height: 50vh;
diff --git a/src/theme.ts b/src/theme.ts
index a0741ac8..f464320a 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -23,7 +23,7 @@ export const theme = createTheme({
     h1: {
       fontWeight: 600,
       fontSize: "2.5em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       [breakpoints.down("md")]: {
         fontSize: "2em",
       },
@@ -31,7 +31,7 @@ export const theme = createTheme({
     h2: {
       fontWeight: 600,
       fontSize: "2em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       [breakpoints.down("md")]: {
         fontSize: "1.5em",
       },
@@ -39,7 +39,7 @@ export const theme = createTheme({
     h3: {
       fontWeight: 600,
       fontSize: "1.5em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       [breakpoints.down("md")]: {
         fontSize: "1.25em",
       },
@@ -47,7 +47,7 @@ export const theme = createTheme({
     h4: {
       fontWeight: 600,
       fontSize: "1.25em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       [breakpoints.down("md")]: {
         fontWeight: 500,
       },
@@ -55,36 +55,36 @@ export const theme = createTheme({
     h5: {
       fontWeight: 700,
       fontSize: "1em",
-      fontFamily: "var(--font-inter), sans-serif",
+      fontFamily: "var(--inter), sans-serif",
     },
     body1: {
       fontWeight: 400,
       fontSize: "1em",
-      fontFamily: "var(--font-inter), sans-serif",
+      fontFamily: "var(--inter), sans-serif",
       lineHeight: "150%",
     },
     body2: {
       fontWeight: 500,
       fontSize: "0.875em",
-      fontFamily: "var(--font-inter), sans-serif",
+      fontFamily: "var(--inter), sans-serif",
       lineHeight: "150%",
     },
     button: {
       fontWeight: 600,
       fontSize: "1em",
-      fontFamily: "var(--font-quicksand), sans-serif",
+      fontFamily: "var(--quicksand), sans-serif",
       lineHeight: "150%",
     },
     caption: {
       fontWeight: 400,
       fontSize: "0.75em",
-      fontFamily: "var(--font-inter), sans-serif",
+      fontFamily: "var(--inter), sans-serif",
       lineHeight: "150%",
     },
     overline: {
       fontWeight: 600,
       fontSize: "0.75em",
-      fontFamily: "var(--font-inter), sans-serif",
+      fontFamily: "var(--inter), sans-serif",
     },
   },
 });