diff --git a/frontend/packages/core/src/Table/accordion-table.tsx b/frontend/packages/core/src/Table/accordion-table.tsx
index 3ad647508d..613e289ea6 100644
--- a/frontend/packages/core/src/Table/accordion-table.tsx
+++ b/frontend/packages/core/src/Table/accordion-table.tsx
@@ -8,10 +8,10 @@ import styled from "../styled";
 import type { TableRowProps } from "./table";
 import { TableCell } from "./table";
 
-const IconButton = styled(MuiIconButton)({
+const IconButton = styled(MuiIconButton)(({ theme }) => ({
   padding: "0",
-  color: "#0D1030",
-});
+  color: theme.palette.secondary[900],
+}));
 
 const ChevronRight = styled(ChevronRightIcon)<{ $disabled: boolean }>(props => ({ theme }) => ({
   color: props?.$disabled ? theme.palette.secondary[200] : "unset",
diff --git a/frontend/packages/core/src/Table/metadata-table.tsx b/frontend/packages/core/src/Table/metadata-table.tsx
index cf9d02c10c..83fc71fa1c 100644
--- a/frontend/packages/core/src/Table/metadata-table.tsx
+++ b/frontend/packages/core/src/Table/metadata-table.tsx
@@ -5,6 +5,7 @@ import { DevTool } from "@hookform/devtools";
 import { yupResolver } from "@hookform/resolvers/yup";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import {
+  alpha,
   Grid as MuiGrid,
   StandardTextFieldProps,
   Table as MuiTable,
@@ -55,11 +56,11 @@ const TableContainer = styled(MuiTableContainer)<{
   })
 );
 
-const Table = styled(MuiTable)({
-  border: "1px solid rgba(13, 16, 48, 0.12)",
+const Table = styled(MuiTable)(({ theme }) => ({
+  border: `1px solid ${alpha(theme.palette.secondary[900], 0.12)}`,
   borderRadius: "4px",
   borderCollapse: "unset",
-});
+}));
 
 const TableBody = styled(MuiTableBody)({
   "tr:first-of-type > td:first-of-type": {
@@ -79,13 +80,13 @@ const TableBody = styled(MuiTableBody)({
   },
 });
 
-const TableCell = styled(MuiTableCell)({
-  color: "#0D1030",
+const TableCell = styled(MuiTableCell)(({ theme }) => ({
+  color: theme.palette.secondary[900],
   fontSize: "14px",
   fontWeight: "normal",
   height: "48px",
   padding: "8px 16px",
-});
+}));
 
 const Grid = styled(MuiGrid)({
   display: "flex",
@@ -107,11 +108,11 @@ const Grid = styled(MuiGrid)({
   },
 });
 
-const KeyCellContainer = styled(TableCell)({
+const KeyCellContainer = styled(TableCell)(({ theme }) => ({
   width: "45%",
-  background: "rgba(13, 16, 48, 0.03)",
+  background: alpha(theme.palette.secondary[900], 0.03),
   fontWeight: 500,
-});
+}));
 
 interface KeyCellProps {
   data: IdentifiableRowData;
diff --git a/frontend/packages/core/src/Table/table.tsx b/frontend/packages/core/src/Table/table.tsx
index 7591abc4be..ce26828dee 100644
--- a/frontend/packages/core/src/Table/table.tsx
+++ b/frontend/packages/core/src/Table/table.tsx
@@ -53,22 +53,22 @@ const StyledTableBody = styled(MuiTableBody)({
   display: "contents",
 });
 
-const StyledTableHeadRow = styled(MuiTableRow)({
+const StyledTableHeadRow = styled(MuiTableRow)(({ theme }) => ({
   display: "contents",
-  backgroundColor: "#D7DAF6",
-});
+  backgroundColor: theme.palette.primary[300],
+}));
 
 const StyledTableRow = styled(MuiTableRow)<{
   $responsive?: TableRowProps["responsive"];
 }>(
-  {
+  ({ theme }) => ({
     ":nth-of-type(even)": {
-      background: "#F8F8F9",
+      background: theme.palette.secondary[50],
     },
     ":hover": {
-      background: "#EBEDFB",
+      background: theme.palette.primary[200],
     },
-  },
+  }),
   props => ({
     display: props.$responsive ? "contents" : "",
   })
@@ -79,15 +79,15 @@ const StyledTableCell = styled(MuiTableCell)<{
   $responsive?: TableCellProps["responsive"];
   $action?: TableCellProps["action"];
 }>(
-  {
+  ({ theme }) => ({
     alignItems: "center",
     fontSize: "14px",
     padding: "15px 16px",
-    color: "#0D1030",
+    color: theme.palette.secondary[900],
     overflow: "hidden",
     background: "inherit",
     minHeight: "100%",
-  },
+  }),
   props => ({ theme }) => ({
     borderBottom: props?.$border ? `1px solid ${theme.palette.secondary[200]}` : "0",
     display: props.$responsive ? "flex" : "",
diff --git a/frontend/packages/core/src/accordion.tsx b/frontend/packages/core/src/accordion.tsx
index cca4ad6df2..3a7f5d61ba 100644
--- a/frontend/packages/core/src/accordion.tsx
+++ b/frontend/packages/core/src/accordion.tsx
@@ -8,11 +8,12 @@ import {
   AccordionActions as MuiAccordionActions,
   AccordionDetails as MuiAccordionDetails,
   AccordionSummary as MuiAccordionSummary,
+  alpha,
   Divider as MuiDivider,
   useControlled,
 } from "@mui/material";
 
-const StyledAccordion = styled(MuiAccordion)({
+const StyledAccordion = styled(MuiAccordion)(({ theme }) => ({
   borderRadius: "4px",
   boxShadow: "none",
   border: "1px solid transparent",
@@ -21,16 +22,16 @@ const StyledAccordion = styled(MuiAccordion)({
   overflowWrap: "anywhere",
 
   "&.Mui-expanded": {
-    boxShadow: "0px 4px 6px rgba(53, 72, 212, 0.2)",
-    borderColor: "rgba(13, 16, 48, 0.12)",
+    boxShadow: `0px 4px 6px ${alpha(theme.palette.primary[600], 0.2)}`,
+    borderColor: alpha(theme.palette.secondary[900], 0.12),
   },
 
   ".MuiIconButton-root": {
-    color: "rgba(13, 16, 48, 0.38)",
+    color: alpha(theme.palette.secondary[900], 0.38),
   },
 
   ".MuiIconButton-root.Mui-expanded": {
-    color: "rgba(13, 16, 48, 0.6)",
+    color: alpha(theme.palette.secondary[900], 0.6),
   },
 
   ".MuiAccordionDetails-root": {
@@ -45,7 +46,7 @@ const StyledAccordion = styled(MuiAccordion)({
   "&:before": {
     display: "none",
   },
-});
+}));
 
 const AccordionSummaryBase = ({ children, collapsible, expanded, ...props }) => {
   return (
@@ -58,18 +59,18 @@ const AccordionSummaryBase = ({ children, collapsible, expanded, ...props }) =>
   );
 };
 
-export const StyledAccordionSummary = styled(AccordionSummaryBase)({
-  backgroundColor: "#fafafb",
+export const StyledAccordionSummary = styled(AccordionSummaryBase)(({ theme }) => ({
+  backgroundColor: theme.palette.secondary[50],
   borderRadius: "4px",
-  color: "#0d1030",
+  color: theme.palette.secondary[900],
   height: "48px",
 
   "&:hover": {
-    backgroundColor: "rgba(13, 16, 48, 0.03)",
+    backgroundColor: alpha(theme.palette.secondary[900], 0.03),
   },
 
   "&:active": {
-    backgroundColor: "rgba(13, 16, 48, 0.12)",
+    backgroundColor: alpha(theme.palette.secondary[900], 0.12),
   },
 
   ".MuiAccordionSummary-content": {
@@ -78,10 +79,10 @@ export const StyledAccordionSummary = styled(AccordionSummaryBase)({
   },
 
   "&.Mui-expanded": {
-    backgroundColor: "#e1e4f9",
+    backgroundColor: theme.palette.primary[200],
     minHeight: "48px",
   },
-});
+}));
 
 const StyledAccordionGroup = styled.div({
   width: "100%",
diff --git a/frontend/packages/core/src/button.tsx b/frontend/packages/core/src/button.tsx
index e9110ae1e0..d1b60d15df 100644
--- a/frontend/packages/core/src/button.tsx
+++ b/frontend/packages/core/src/button.tsx
@@ -1,15 +1,22 @@
 import * as React from "react";
+import styled from "@emotion/styled";
 import CheckCircleOutlinedIcon from "@mui/icons-material/CheckCircleOutlined";
 import FileCopyOutlinedIcon from "@mui/icons-material/FileCopyOutlined";
 import type {
   ButtonProps as MuiButtonProps,
   IconButtonProps as MuiIconButtonProps,
+  Theme,
+} from "@mui/material";
+import {
+  alpha,
+  Button as MuiButton,
+  Grid,
+  IconButton as MuiIconButton,
+  useTheme,
 } from "@mui/material";
-import { Button as MuiButton, Grid, IconButton as MuiIconButton, useTheme } from "@mui/material";
 
 import { Tooltip } from "./Feedback/tooltip";
 import type { GridJustification } from "./grid";
-import styled from "./styled";
 
 interface ButtonPalette {
   /** A palette of background colors used for the various button states. */
@@ -65,7 +72,10 @@ const BUTTON_SIZE_MAP = {
 
 export type ButtonSize = keyof typeof BUTTON_SIZE_MAP;
 
-const StyledButton = styled(MuiButton)<{ palette: ButtonPalette; size: ButtonSize }>(
+const StyledButton = styled(MuiButton)<{
+  palette: ButtonPalette;
+  size: ButtonSize;
+}>(
   {
     borderRadius: "4px",
     fontWeight: 500,
@@ -83,12 +93,12 @@ const StyledButton = styled(MuiButton)<{ palette: ButtonPalette; size: ButtonSiz
   })
 );
 
-const StyledBorderButton = styled(StyledButton)({
-  border: "1px solid #0D1030",
+const StyledBorderButton = styled(StyledButton)(({ theme }) => ({
+  border: `1px solid ${theme.palette.secondary[900]}`,
   "&.Mui-disabled": {
-    borderColor: "rgba(13, 16, 48, 0.1)",
+    borderColor: alpha(theme.palette.secondary[900], 0.1),
   },
-});
+}));
 
 /** Provides feedback to the user in regards to the action of the button. */
 type ButtonVariant = "neutral" | "primary" | "danger" | "destructive" | "secondary";
@@ -112,54 +122,54 @@ export type IconButtonSize = keyof typeof ICON_BUTTON_STYLE_MAP;
 export const ICON_BUTTON_VARIANTS = Object.keys(ICON_BUTTON_STYLE_MAP);
 
 /** A color palette from a @type ButtonPalette */
-const variantPalette = (variant: ButtonVariant, theme): ButtonPalette => {
+const variantPalette = (variant: ButtonVariant, theme: Theme): ButtonPalette => {
   const COLORS = {
     neutral: {
       background: {
         primary: "transparent",
         hover: theme.palette.secondary[200],
-        active: "#CFD3D7",
-        disabled: "#FFFFFF",
+        active: theme.palette.secondary[300],
+        disabled: theme.palette.contrastColor,
       },
       font: {
-        primary: "#0D1030",
-        disabled: "#0D1030",
+        primary: theme.palette.secondary[900],
+        disabled: theme.palette.secondary[900],
       },
     },
     primary: {
       background: {
-        primary: "#3548D4",
-        hover: theme.palette.primary[600],
-        active: theme.palette.primary[700],
+        primary: theme.palette.primary[600],
+        hover: theme.palette.primary[700],
+        active: theme.palette.primary[600],
         disabled: theme.palette.secondary[200],
       },
       font: {
-        primary: "#FFFFFF",
-        disabled: "rgba(13, 16, 48, 0.38)",
+        primary: theme.palette.contrastColor,
+        disabled: alpha(theme.palette.secondary[900], 0.38),
       },
     },
     danger: {
       background: {
         primary: theme.palette.error[600],
-        hover: "#BA2E12",
-        active: "#AB2A10",
-        disabled: "#F1B3A6",
+        hover: theme.palette.error[700],
+        active: theme.palette.error[800],
+        disabled: theme.palette.error[200],
       },
       font: {
-        primary: "#FFFFFF",
-        disabled: "#FFFFFF",
+        primary: theme.palette.contrastColor,
+        disabled: theme.palette.contrastColor,
       },
     },
     secondary: {
       background: {
         primary: "transparent",
-        hover: "#F5F6FD",
-        active: "#D7DAF6",
+        hover: theme.palette.primary[100],
+        active: theme.palette.primary[300],
         disabled: "transparent",
       },
       font: {
-        primary: "#3548D4",
-        disabled: "#0D1030",
+        primary: theme.palette.primary[600],
+        disabled: theme.palette.secondary[900],
       },
     },
   } as { [key: string]: ButtonPalette };
@@ -189,7 +199,7 @@ export interface ButtonProps
 const Button = ({ text, variant = "primary", size = "medium", ...props }: ButtonProps) => {
   const theme = useTheme();
   const palette = variantPalette(variant, theme);
-  const ButtonVariant = variant === "neutral" ? StyledBorderButton : StyledButton;
+  const ButtonVariant = (variant === "neutral" ? StyledBorderButton : StyledButton) as any;
 
   return (
     <ButtonVariant variant="contained" disableElevation palette={palette} size={size} {...props}>
@@ -278,12 +288,12 @@ const ButtonGroup = ({ children, justify = "flex-end", border = "top" }: ButtonG
   </ButtonGroupContainer>
 );
 
-const StyledClipboardIconButton = styled(MuiIconButton)({
-  color: "#000000",
+const StyledClipboardIconButton = styled(MuiIconButton)(({ theme }) => ({
+  color: theme.palette.getContrastText(theme.palette.contrastColor),
   ":hover": {
     backgroundColor: "transparent",
   },
-});
+}));
 
 export interface ClipboardButtonProps {
   /** Case-sensitive text to be copied. */
diff --git a/frontend/packages/core/src/card.tsx b/frontend/packages/core/src/card.tsx
index 20a5bd0d3c..5f11e6d722 100644
--- a/frontend/packages/core/src/card.tsx
+++ b/frontend/packages/core/src/card.tsx
@@ -9,19 +9,20 @@ import {
   CardActionAreaProps,
   Divider,
   Grid,
+  useTheme,
 } from "@mui/material";
 import type { SpacingProps as MuiSpacingProps } from "@mui/system";
-import { spacing } from "@mui/system";
+import { alpha, spacing } from "@mui/system";
 
 import { IconButton } from "./button";
 import { Typography, TypographyProps } from "./typography";
 
 // TODO: seperate out the different card parts into various files
 
-const StyledCard = styled(MuiCard)({
-  boxShadow: "0px 4px 6px rgba(53, 72, 212, 0.2)",
-  border: "1px solid rgba(13, 16, 48, 0.1)",
-});
+const StyledCard = styled(MuiCard)(({ theme }) => ({
+  boxShadow: `0px 4px 6px ${alpha(theme.palette.primary[600], 0.2)}`,
+  border: `1px solid ${alpha(theme.palette.secondary[900], 0.1)}`,
+}));
 
 export interface CardProps {
   children?: React.ReactNode | React.ReactNode[];
@@ -29,9 +30,9 @@ export interface CardProps {
 
 const Card = ({ children, ...props }: CardProps) => <StyledCard {...props}>{children}</StyledCard>;
 
-const StyledCardHeaderContainer = styled.div({
-  background: "#EBEDFB",
-});
+const StyledCardHeaderContainer = styled.div(({ theme }) => ({
+  background: theme.palette.primary[200],
+}));
 
 const StyledCardHeader = styled(Grid)({
   padding: "6px 8px",
@@ -81,36 +82,39 @@ interface CardHeaderProps {
   title: React.ReactNode;
 }
 
-const CardHeader = ({ actions, avatar, children, title, summary = [] }: CardHeaderProps) => (
-  <StyledCardHeaderContainer>
-    <StyledCardHeader container wrap="nowrap" alignItems="center">
-      <StyledCardHeaderAvatarContainer>
-        <StyledCardHeaderAvatar>{avatar}</StyledCardHeaderAvatar>
-      </StyledCardHeaderAvatarContainer>
-      <Grid container wrap="nowrap" alignItems="center">
-        <Grid item xs>
-          <Typography variant="h4">{title}</Typography>
+const CardHeader = ({ actions, avatar, children, title, summary = [] }: CardHeaderProps) => {
+  const theme = useTheme();
+  return (
+    <StyledCardHeaderContainer>
+      <StyledCardHeader container wrap="nowrap" alignItems="center">
+        <StyledCardHeaderAvatarContainer>
+          <StyledCardHeaderAvatar>{avatar}</StyledCardHeaderAvatar>
+        </StyledCardHeaderAvatarContainer>
+        <Grid container wrap="nowrap" alignItems="center">
+          <Grid item xs>
+            <Typography variant="h4">{title}</Typography>
+          </Grid>
+          {summary.map((section: CardHeaderSummaryProps, idx: number) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <React.Fragment key={idx}>
+              <StyledDivider orientation="vertical" />
+              <StyledGridItem item xs>
+                {section.title}
+                {section.subheader && (
+                  <Typography variant="body4" color={alpha(theme.palette.secondary[900], 0.6)}>
+                    {section.subheader}
+                  </Typography>
+                )}
+              </StyledGridItem>
+            </React.Fragment>
+          ))}
         </Grid>
-        {summary.map((section: CardHeaderSummaryProps, idx: number) => (
-          // eslint-disable-next-line react/no-array-index-key
-          <React.Fragment key={idx}>
-            <StyledDivider orientation="vertical" />
-            <StyledGridItem item xs>
-              {section.title}
-              {section.subheader && (
-                <Typography variant="body4" color="rgba(13, 16, 48, 0.6)">
-                  {section.subheader}
-                </Typography>
-              )}
-            </StyledGridItem>
-          </React.Fragment>
-        ))}
-      </Grid>
-      {actions}
-    </StyledCardHeader>
-    {children}
-  </StyledCardHeaderContainer>
-);
+        {actions}
+      </StyledCardHeader>
+      {children}
+    </StyledCardHeaderContainer>
+  );
+};
 
 // Material UI Spacing system supports many props https://material-ui.com/system/spacing/#api
 // We can add more to this list as use cases arise
@@ -133,24 +137,24 @@ const BaseCardActionArea = styled(CardActionArea)<SpacingProps>`
   ${spacing}
 `;
 
-const StyledCardActionArea = styled(BaseCardActionArea)({
+const StyledCardActionArea = styled(BaseCardActionArea)(({ theme }) => ({
   ":hover": {
-    backgroundColor: "#F5F6FD",
+    backgroundColor: theme.palette.primary[100],
   },
 
   ":active": {
-    backgroundColor: "#D7DAF6",
+    backgroundColor: theme.palette.primary[300],
   },
-});
+}));
 
-const StyledExpandButton = styled(IconButton)({
+const StyledExpandButton = styled(IconButton)(({ theme }) => ({
   width: "32px",
   height: "32px",
-  color: "#3548D4",
+  color: theme.palette.primary[600],
   ":hover": {
     backgroundColor: "transparent",
   },
-});
+}));
 
 interface CollapsibleState {
   /** The text to show in the collapse action area when the card content is collapsed/not collapsed.
@@ -189,6 +193,7 @@ const CardContent = ({
   maxHeight = "none",
   ...props
 }: CardContentProps) => {
+  const theme = useTheme();
   const ref = React.useRef(null);
   const [showExpand, setShowExpand] = React.useState<boolean>(false);
   const [expanded, setExpanded] = React.useState<boolean>(true);
@@ -224,7 +229,7 @@ const CardContent = ({
         <StyledCardActionArea padding={0} onClick={() => setExpanded(!expanded)}>
           <Grid container alignItems="center" justifyContent="center">
             <Grid item>
-              <Typography variant="body4" color="#3548D4">
+              <Typography variant="body4" color={theme.palette.primary[600]}>
                 {expanded ? collapseAction?.open.title : collapseAction?.closed.title}
               </Typography>
             </Grid>
@@ -240,7 +245,7 @@ const CardContent = ({
   );
 };
 
-const StyledLandingCard = styled(Card)({
+const StyledLandingCard = styled(Card)(({ theme }) => ({
   border: "none",
   height: "214px",
   maxHeight: "100%",
@@ -256,9 +261,9 @@ const StyledLandingCard = styled(Card)({
     fontWeight: "bold",
     fontSize: "12px",
     lineHeight: "36px",
-    color: "rgba(13, 16, 48, 0.6)",
+    color: alpha(theme.palette.secondary[900], 0.6),
   },
-});
+}));
 
 const TruncatedText = styled(Typography)({
   display: "-webkit-box",
@@ -278,10 +283,10 @@ const IconAvatar = styled(Avatar)({
   marginRight: "8px",
 });
 
-const StyledAvatar = styled(IconAvatar)({
-  color: "rgba(13, 16, 48, 0.38)",
-  backgroundColor: "rgba(13, 16, 48, 0.12)",
-});
+const StyledAvatar = styled(IconAvatar)(({ theme }) => ({
+  color: "alpha(theme.palette.secondary[900], 0.38)",
+  backgroundColor: alpha(theme.palette.secondary[900], 0.12),
+}));
 
 export interface LandingCardProps extends Pick<CardActionAreaProps, "onClick"> {
   group: string;
@@ -298,6 +303,7 @@ export const LandingCard = ({
   onClick,
   ...props
 }: LandingCardProps) => {
+  const theme = useTheme();
   const validIcon = icon && icon.length > 0;
   return (
     <StyledLandingCard {...props}>
@@ -313,7 +319,7 @@ export const LandingCard = ({
           </div>
           <div>
             <TruncatedText variant="h3">{title}</TruncatedText>
-            <TruncatedText color="rgba(13, 16, 48, 0.6)" variant="body2">
+            <TruncatedText color={alpha(theme.palette.secondary[900], 0.6)} variant="body2">
               {description}
             </TruncatedText>
           </div>
diff --git a/frontend/packages/core/src/chip.tsx b/frontend/packages/core/src/chip.tsx
index 8e7ba53660..3d5a130d08 100644
--- a/frontend/packages/core/src/chip.tsx
+++ b/frontend/packages/core/src/chip.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
-import type { ChipProps as MuiChipProps } from "@mui/material";
-import { Chip as MuiChip } from "@mui/material";
+import type { ChipProps as MuiChipProps, Theme } from "@mui/material";
+import { alpha, Chip as MuiChip } from "@mui/material";
 
 import styled from "./styled";
 
@@ -32,44 +32,6 @@ export interface ChipProps
   filled?: boolean;
 }
 
-const CHIP_COLOR_MAP = {
-  error: {
-    background: "#F9EAE7",
-    label: "#C2302E",
-    borderColor: "#C2302E",
-  },
-  warn: {
-    background: "#FEF8E8",
-    label: "#D87313",
-    borderColor: "#D87313",
-  },
-  attention: {
-    background: "#E2E2E6",
-    label: "#0D1030",
-    borderColor: "##0D103061",
-  },
-  neutral: {
-    background: "#F8F8F9",
-    label: "#0D1030",
-    borderColor: "rgba(13, 16, 48, 0.1)",
-  },
-  active: {
-    background: "#EBEDFA",
-    label: "#3548D4",
-    borderColor: "#3548D4",
-  },
-  pending: {
-    background: "#FFFEE8",
-    label: "#B09027",
-    borderColor: "#B09027",
-  },
-  success: {
-    background: "#E9F6EC",
-    label: "#40A05A",
-    borderColor: "#40A05A",
-  },
-};
-
 const StyledChip = styled(MuiChip)<{
   $filled: ChipProps["filled"];
   $variant: ChipProps["variant"];
@@ -86,14 +48,53 @@ const StyledChip = styled(MuiChip)<{
       padding: "7px 12px",
     },
   },
-  props => ({
-    height: props.size === "small" ? "24px" : "32px",
-    background: props.$filled
-      ? CHIP_COLOR_MAP[props.$variant].borderColor
-      : CHIP_COLOR_MAP[props.$variant].background,
-    color: props.$filled ? "#FFFFFF" : CHIP_COLOR_MAP[props.$variant].label,
-    borderColor: CHIP_COLOR_MAP[props.$variant].borderColor,
-  })
+  props => ({ theme }: { theme: Theme }) => {
+    const CHIP_COLOR_MAP = {
+      error: {
+        background: theme.palette.error[50],
+        label: theme.palette.error[600],
+        borderColor: theme.palette.error[600],
+      },
+      warn: {
+        background: theme.palette.warning[50],
+        label: theme.palette.warning[600],
+        borderColor: theme.palette.warning[600],
+      },
+      attention: {
+        background: theme.palette.secondary[200],
+        label: theme.palette.secondary[900],
+        borderColor: alpha(theme.palette.secondary[900], 0.6),
+      },
+      neutral: {
+        background: theme.palette.secondary[50],
+        label: theme.palette.secondary[900],
+        borderColor: alpha(theme.palette.secondary[300], 0.6),
+      },
+      active: {
+        background: theme.palette.primary[200],
+        label: theme.palette.primary[600],
+        borderColor: theme.palette.primary[600],
+      },
+      pending: {
+        background: theme.palette.warning[50],
+        label: theme.palette.warning[500],
+        borderColor: theme.palette.warning[500],
+      },
+      success: {
+        background: theme.palette.success[50],
+        label: theme.palette.success[500],
+        borderColor: theme.palette.success[500],
+      },
+    };
+    return {
+      height: props.size === "small" ? "24px" : "32px",
+      background: props.$filled
+        ? CHIP_COLOR_MAP[props.$variant].borderColor
+        : CHIP_COLOR_MAP[props.$variant].background,
+      color: props.$filled ? theme.palette.contrastColor : CHIP_COLOR_MAP[props.$variant].label,
+      borderColor: CHIP_COLOR_MAP[props.$variant].borderColor,
+    };
+  }
 );
 
 const Chip = ({ variant, filled = false, size = "medium", ...props }: ChipProps) => (
diff --git a/frontend/packages/core/src/confirmation.tsx b/frontend/packages/core/src/confirmation.tsx
index 612d1ba930..183bdcb0da 100644
--- a/frontend/packages/core/src/confirmation.tsx
+++ b/frontend/packages/core/src/confirmation.tsx
@@ -2,39 +2,39 @@ import React from "react";
 import styled from "@emotion/styled";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import ThumbUpIcon from "@mui/icons-material/ThumbUp";
-import { Grid } from "@mui/material";
+import { alpha, Grid } from "@mui/material";
 
-const IconContainer = styled(Grid)({
+const IconContainer = styled(Grid)(({ theme }) => ({
   paddingTop: "4px",
   display: "flex",
   flexDirection: "column",
   justifyContent: "center",
-  color: "#2F67F6",
+  color: theme.palette.primary[600],
   fontSize: "7rem",
-});
+}));
 
 const Icon = styled(ThumbUpIcon)({
   fontSize: "0.5em",
   marginBottom: "10px",
 });
 
-const TitleContainer = styled(Grid)({
-  color: "#1E942E",
+const TitleContainer = styled(Grid)(({ theme }) => ({
+  color: theme.palette.success[600],
   display: "flex",
   alignItems: "center",
   fontSize: "20px",
   fontWeight: 500,
   textTransform: "capitalize",
-});
+}));
 
 const CheckmarkIcon = styled(CheckCircleIcon)({
   marginRight: "8px",
 });
 
-const SubtitleContainer = styled.div({
-  color: "rgba(13, 16, 48, 0.6)",
+const SubtitleContainer = styled.div(({ theme }) => ({
+  color: alpha(theme.palette.secondary[900], 0.6),
   fontSize: "12px",
-});
+}));
 
 const Confirmation: React.FC<{ action: string }> = ({ action, children }) => (
   <Grid container direction="column" justifyContent="center" alignItems="center">
diff --git a/frontend/packages/core/src/dialog.tsx b/frontend/packages/core/src/dialog.tsx
index 55ebd68e4c..f0caf73c5e 100644
--- a/frontend/packages/core/src/dialog.tsx
+++ b/frontend/packages/core/src/dialog.tsx
@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 import CloseIcon from "@mui/icons-material/Close";
 import type { DialogProps as MuiDialogProps } from "@mui/material";
 import {
+  alpha,
   Dialog as MuiDialog,
   DialogActions as MuiDialogActions,
   DialogContent as MuiDialogContent,
@@ -11,52 +12,52 @@ import {
   Paper,
 } from "@mui/material";
 
-const DialogPaper = styled(Paper)({
-  border: "1px solid rgba(13, 16, 48, 0.1)",
+const DialogPaper = styled(Paper)(({ theme }) => ({
+  border: `1px solid ${alpha(theme.palette.secondary[900], 0.1)}`,
   boxShadow: "0px 10px 24px rgba(35, 48, 143, 0.3)",
   boxSizing: "border-box",
-  backgroundColor: "#FFFFFF",
+  backgroundColor: theme.palette.contrastColor,
   width: "max-content",
   maxWidth: "75vw",
-});
+}));
 
-const DialogTitle = styled(MuiDialogTitle)({
+const DialogTitle = styled(MuiDialogTitle)(({ theme }) => ({
   display: "flex",
   justifyContent: "space-between",
   fontSize: "20px",
   padding: "12px 12px 0 32px",
   fontWeight: 500,
-  color: "#0D1030",
-});
+  color: theme.palette.secondary[900],
+}));
 
 const DialogTitleText = styled.div({
   padding: "14px 0 0 0",
 });
 
-const IconButton = styled(MuiIconButton)({
+const IconButton = styled(MuiIconButton)(({ theme }) => ({
   height: "12px",
   width: "12px",
-  color: "#0D1030",
-});
+  color: theme.palette.secondary[900],
+}));
 
-const DialogContent = styled(MuiDialogContent)({
+const DialogContent = styled(MuiDialogContent)(({ theme }) => ({
   padding: "16px 32px 32px 32px",
   fontSize: "16px",
   fontWeight: 400,
-  color: "rgba(13, 16, 48, 0.6)",
+  color: alpha(theme.palette.secondary[900], 0.6),
   "> *": {
     margin: "16px 0 0 0",
   },
   overflowWrap: "break-word",
-});
+}));
 
-const DialogActions = styled(MuiDialogActions)({
-  borderTop: "1px solid rgba(13, 16, 48, 0.12)",
+const DialogActions = styled(MuiDialogActions)(({ theme }) => ({
+  borderTop: `1px solid ${alpha(theme.palette.secondary[900], 0.12)}`,
   padding: "0 8px",
   "> *": {
     margin: "16px 8px 16px 8px",
   },
-});
+}));
 
 export interface DialogContentProps {}
 export interface DialogActionsProps {}
diff --git a/frontend/packages/core/src/horizontal-rule.tsx b/frontend/packages/core/src/horizontal-rule.tsx
index c0a3b7293e..332887fc89 100644
--- a/frontend/packages/core/src/horizontal-rule.tsx
+++ b/frontend/packages/core/src/horizontal-rule.tsx
@@ -1,5 +1,6 @@
 import * as React from "react";
 import styled from "@emotion/styled";
+import { alpha } from "@mui/system";
 
 const HorizontalRuleBase = ({ children, ...props }: HorizontalRuleProps) => (
   <div {...props}>
@@ -17,7 +18,7 @@ export type HorizontalRuleProps = {
   children: React.ReactNode;
 };
 
-const StyledHorizontalRule = styled(HorizontalRuleBase)({
+const StyledHorizontalRule = styled(HorizontalRuleBase)(({ theme }) => ({
   alignItems: "center",
   display: "flex",
   flexDirection: "row",
@@ -30,19 +31,19 @@ const StyledHorizontalRule = styled(HorizontalRuleBase)({
 
   ".line > span": {
     display: "block",
-    borderTop: "1px solid rgba(13, 16, 48, 0.12)",
+    borderTop: `1px solid ${alpha(theme.palette.secondary[900], 0.12)}`,
   },
 
   ".content": {
     padding: "0 16px",
     fontWeight: "bold",
     fontSize: "14px",
-    color: "rgba(13, 16, 48, 0.38)",
+    color: alpha(theme.palette.secondary[900], 0.38),
     textTransform: "uppercase",
     display: "inline-flex",
     alignItems: "center",
   },
-});
+}));
 
 export const HorizontalRule = ({ children }: HorizontalRuleProps) => (
   <StyledHorizontalRule>{children}</StyledHorizontalRule>
diff --git a/frontend/packages/core/src/link.tsx b/frontend/packages/core/src/link.tsx
index 8ef4c1312e..43b2192f5c 100644
--- a/frontend/packages/core/src/link.tsx
+++ b/frontend/packages/core/src/link.tsx
@@ -9,15 +9,15 @@ type TextTransform = "none" | "capitalize" | "uppercase" | "lowercase" | "initia
 const StyledLink = styled(MuiLink)<{
   $textTransform: LinkProps["textTransform"];
 }>(
-  {
+  ({ theme }) => ({
     display: "flex",
     width: "100%",
     maxWidth: "fit-content",
     fontSize: "14px",
-    color: "#3548D4",
+    color: theme.palette.primary[600],
     overflow: "hidden",
     textOverflow: "ellipsis",
-  },
+  }),
   props => ({
     textTransform: props.$textTransform,
   })
diff --git a/frontend/packages/core/src/loading.tsx b/frontend/packages/core/src/loading.tsx
index 9f894ca388..24a2d3fa5f 100644
--- a/frontend/packages/core/src/loading.tsx
+++ b/frontend/packages/core/src/loading.tsx
@@ -2,10 +2,10 @@ import React from "react";
 import styled from "@emotion/styled";
 import { CircularProgress, Grid, Paper } from "@mui/material";
 
-const LoadingSpinner = styled(CircularProgress)`
-  color: #3548d4;
-  position: absolute;
-`;
+const LoadingSpinner = styled(CircularProgress)(({ theme }) => ({
+  color: theme.palette.primary[600],
+  position: "absolute",
+}));
 
 const ContentContainer = styled(Grid)`
   position: relative;
diff --git a/frontend/packages/core/src/paper.tsx b/frontend/packages/core/src/paper.tsx
index eb04b47a23..8b968673af 100644
--- a/frontend/packages/core/src/paper.tsx
+++ b/frontend/packages/core/src/paper.tsx
@@ -1,18 +1,18 @@
 import * as React from "react";
 import styled from "@emotion/styled";
 import type { PaperProps as MuiPaperProps } from "@mui/material";
-import { Paper as MuiPaper } from "@mui/material";
+import { alpha, Paper as MuiPaper } from "@mui/material";
 
 export interface PaperProps extends Pick<MuiPaperProps, "children"> {}
 
-const StyledPaper = styled(MuiPaper)({
-  boxShadow: "0px 4px 6px rgba(53, 72, 212, 0.2)",
-  border: "1px solid rgba(13, 16, 48, 0.1)",
-  background: "#FFFFFF",
+const StyledPaper = styled(MuiPaper)(({ theme }) => ({
+  boxShadow: `0px 4px 6px ${alpha(theme.palette.primary[600], 0.2)}`,
+  border: `1px solid ${alpha(theme.palette.secondary[900], 0.1)}`,
+  background: theme.palette.contrastColor,
   padding: "16px",
   minWidth: "inherit",
   minHeight: "inherit",
-});
+}));
 
 const Paper = ({ children, ...props }: PaperProps) => (
   <StyledPaper {...props}>{children}</StyledPaper>
diff --git a/frontend/packages/core/src/popper.tsx b/frontend/packages/core/src/popper.tsx
index 2736af7100..d1c85c24e4 100644
--- a/frontend/packages/core/src/popper.tsx
+++ b/frontend/packages/core/src/popper.tsx
@@ -6,6 +6,7 @@ import type {
   PopperProps as MuiPopperProps,
 } from "@mui/material";
 import {
+  alpha,
   ClickAwayListener,
   Collapse,
   List,
@@ -25,26 +26,26 @@ const Paper = styled(MuiPaper)(({ theme }) => ({
   border: `1px solid ${theme.palette.secondary[200]}`,
   boxShadow: "0px 10px 24px rgba(35, 48, 143, 0.3)",
   ".MuiListItem-root[id='popperItem']": {
-    backgroundColor: "#FFFFFF",
+    backgroundColor: theme.palette.contrastColor,
     height: "48px",
     "&:hover": {
-      backgroundColor: "#F5F6FD",
+      backgroundColor: theme.palette.primary[100],
     },
     "&:active": {
-      backgroundColor: "#D7DAF6",
+      backgroundColor: theme.palette.primary[300],
     },
     "&.Mui-selected": {
-      backgroundColor: "#FFFFFF",
+      backgroundColor: theme.palette.contrastColor,
       "&:hover": {
-        backgroundColor: "#F5F6FD",
+        backgroundColor: theme.palette.primary[100],
       },
       "&:active": {
-        backgroundColor: "#D7DAF6",
+        backgroundColor: theme.palette.primary[300],
       },
     },
     "&:hover, &:active, &.Mui-selected": {
       ".MuiTypography-root": {
-        color: "#3548D4",
+        color: theme.palette.primary[600],
       },
     },
   },
@@ -60,15 +61,15 @@ const PopperItemIcon = styled.div({
   width: "24px",
 });
 
-const ListItemText = styled(MuiListItemText)({
+const ListItemText = styled(MuiListItemText)(({ theme }) => ({
   ".MuiTypography-root": {
-    color: "rgba(13, 16, 48, 0.6)",
+    color: alpha(theme.palette.secondary[900], 0.6),
     fontWeight: 500,
     fontSize: "14px",
     lineHeight: "18px",
     padding: "15px 15px",
   },
-});
+}));
 
 export interface PopperItemProps extends Pick<ListItemProps, "selected" | "disabled"> {
   children: React.ReactNode;
diff --git a/frontend/packages/core/src/stepper.tsx b/frontend/packages/core/src/stepper.tsx
index fec9bcbf87..7a1efe4551 100644
--- a/frontend/packages/core/src/stepper.tsx
+++ b/frontend/packages/core/src/stepper.tsx
@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 import MuiCheckIcon from "@mui/icons-material/Check";
 import PriorityHighIcon from "@mui/icons-material/PriorityHigh";
 import {
+  alpha,
   Step as MuiStep,
   StepConnector as MuiStepConnector,
   StepLabel as MuiStepLabel,
@@ -15,13 +16,13 @@ const StepContainer = styled.div(({ theme }) => ({
   ".MuiStepLabel-label": {
     fontWeight: 500,
     fontSize: "14px",
-    color: "rgba(13, 16, 48, 0.38)",
+    color: alpha(theme.palette.secondary[900], 0.38),
   },
   ".MuiStepLabel-label.Mui-active": {
-    color: "#0d1030",
+    color: theme.palette.secondary[900],
   },
   ".MuiStepLabel-label.Mui-completed": {
-    color: "rgba(13, 16, 48, 0.38)",
+    color: alpha(theme.palette.secondary[900], 0.38),
   },
   ".MuiStepper-root": {
     background: "transparent",
@@ -73,11 +74,11 @@ const StepContainer = styled.div(({ theme }) => ({
   },
 
   ".Mui-active .MuiStepConnector-line": {
-    backgroundColor: "#3548D4",
+    backgroundColor: theme.palette.primary[600],
   },
 
   ".Mui-completed .MuiStepConnector-line": {
-    backgroundColor: "#3548D4",
+    backgroundColor: theme.palette.primary[600],
   },
 }));
 
@@ -120,24 +121,24 @@ const StepIcon: React.FC<StepIconProps> = ({ index, variant }) => {
   const theme = useTheme();
   const stepIconVariants = {
     active: {
-      background: "#FFFFFF",
-      border: "1px solid #3548D4",
-      font: "#3548D4",
+      background: theme.palette.contrastColor,
+      border: `1px solid ${theme.palette.primary[600]}`,
+      font: theme.palette.primary[600],
     },
     pending: {
       background: theme.palette.secondary[200],
       border: theme.palette.secondary[200],
-      font: "rgba(13, 16, 48, 0.38)",
+      font: alpha(theme.palette.secondary[900], 0.38),
     },
     success: {
-      background: "#3548D4",
-      border: "#3548D4",
-      font: "#FFFFFF",
+      background: theme.palette.primary[600],
+      border: theme.palette.primary[600],
+      font: theme.palette.contrastColor,
     },
     failed: {
       background: theme.palette.error[600],
       border: theme.palette.error[600],
-      font: "#FFFFFF",
+      font: theme.palette.contrastColor,
     },
   };
   const color = stepIconVariants[variant || "pending"];
diff --git a/frontend/packages/core/src/tab.tsx b/frontend/packages/core/src/tab.tsx
index bd32380105..cbb49f87db 100644
--- a/frontend/packages/core/src/tab.tsx
+++ b/frontend/packages/core/src/tab.tsx
@@ -2,13 +2,13 @@ import * as React from "react";
 import styled from "@emotion/styled";
 import { TabContext, TabList, TabPanel as MuiTabPanel } from "@mui/lab";
 import type { TabProps as MuiTabProps, TabsProps as MuiTabsProps } from "@mui/material";
-import { Tab as MuiTab } from "@mui/material";
+import { alpha, Tab as MuiTab } from "@mui/material";
 
 const StyledTab = styled(MuiTab)(({ theme }) => ({
   minWidth: "111px",
   height: "46px",
   padding: "12px 32px",
-  color: "rgba(13, 16, 48, 0.6)",
+  color: alpha(theme.palette.secondary[900], 0.6),
   borderBottom: `3px solid ${theme.palette.secondary[200]}`,
   fontSize: "14px",
   fontWeight: "bold",
@@ -16,37 +16,37 @@ const StyledTab = styled(MuiTab)(({ theme }) => ({
   textTransform: "none",
   "&.Mui-selected": {
     backgroundColor: "unset",
-    color: "#3548D4",
+    color: theme.palette.primary[600],
     border: "0",
   },
   "&:hover": {
-    color: "rgba(13, 16, 48, 0.6)",
+    color: alpha(theme.palette.secondary[900], 0.6),
     backgroundColor: theme.palette.secondary[200],
     outline: "none",
   },
   "&:focus": {
-    color: "#3548D4",
-    backgroundColor: "#EBEDFB",
+    color: theme.palette.primary[600],
+    backgroundColor: theme.palette.primary[200],
   },
   "&:focus-within": {
-    color: "#3548D4",
-    backgroundColor: "#EBEDFB",
+    color: theme.palette.primary[600],
+    backgroundColor: theme.palette.primary[200],
   },
   "&:active": {
-    color: "rgba(13, 16, 48, 0.6)",
-    backgroundColor: "#DBDBE0",
+    color: alpha(theme.palette.secondary[900], 0.6),
+    backgroundColor: theme.palette.secondary[200],
   },
   ".MuiTab-wrapper": {
     margin: "auto",
   },
 }));
 
-const StyledTabs = styled(TabList)({
+const StyledTabs = styled(TabList)(({ theme }) => ({
   ".MuiTabs-indicator": {
     height: "4px",
-    backgroundColor: "#3548D4",
+    backgroundColor: theme.palette.primary[600],
   },
-});
+}));
 
 export interface TabProps extends Pick<MuiTabProps, "label" | "value" | "onClick"> {
   children?: React.ReactNode;
diff --git a/frontend/packages/core/src/tests/__snapshots__/button.test.tsx.snap b/frontend/packages/core/src/tests/__snapshots__/button.test.tsx.snap
index b589945051..a887b113c1 100644
--- a/frontend/packages/core/src/tests/__snapshots__/button.test.tsx.snap
+++ b/frontend/packages/core/src/tests/__snapshots__/button.test.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Destructive Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-ar25yj-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
+exports[`Destructive Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-1i6z5sh-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
 
-exports[`Large Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-disableElevation MuiButtonBase-root css-1riuhoz-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
+exports[`Large Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeLarge MuiButton-containedSizeLarge MuiButton-disableElevation MuiButtonBase-root css-r0dr1r-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
 
-exports[`Neutral Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-vtyj5e-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
+exports[`Neutral Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-ofve1n-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
 
-exports[`Primary Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-10xjq6l-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
+exports[`Primary Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-jc1w96-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
 
-exports[`Small Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-disableElevation MuiButtonBase-root css-9z78cp-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
+exports[`Small Button Component 1`] = `"<button class=\\"MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeSmall MuiButton-containedSizeSmall MuiButton-disableElevation MuiButtonBase-root css-e1f49j-MuiButtonBase-root-MuiButton-root\\" tabindex=\\"0\\" type=\\"button\\" palette=\\"[object Object]\\">test</button>"`;
diff --git a/frontend/packages/core/src/tests/tab.test.tsx b/frontend/packages/core/src/tests/tab.test.tsx
index 21d9fb7cb3..f8ff48101f 100644
--- a/frontend/packages/core/src/tests/tab.test.tsx
+++ b/frontend/packages/core/src/tests/tab.test.tsx
@@ -9,7 +9,6 @@ import { ThemeProvider } from "../Theme";
 beforeEach(() => {
   render(
     <ThemeProvider>
-      {" "}
       <Tabs value={1}>
         <Tab label="meow" />
         <Tab label="mix" />
diff --git a/frontend/packages/core/src/text.tsx b/frontend/packages/core/src/text.tsx
index 0ec95156b3..11fd6fdf8f 100644
--- a/frontend/packages/core/src/text.tsx
+++ b/frontend/packages/core/src/text.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import styled from "@emotion/styled";
-import { Fab, Grid } from "@mui/material";
+import { alpha, Fab, Grid } from "@mui/material";
 
 import { ClipboardButton } from "./button";
 
@@ -13,8 +13,8 @@ const ContentContainer = styled(Grid)({
   flex: 1,
 });
 
-const Pre = styled.pre({
-  border: "1px solid rgba(13, 16, 48, 0.38)",
+const Pre = styled("pre")(({ theme }) => ({
+  border: `1px solid ${alpha(theme.palette.secondary[900], 0.38)}`,
   backgroundColor: "rgba(13,16,48,0.12)",
   borderRadius: "4px",
   fontSize: "16px",
@@ -26,7 +26,7 @@ const Pre = styled.pre({
   flexDirection: "row-reverse",
   display: "flex",
   overflowY: "scroll",
-});
+}));
 
 interface CodeProps {
   children: string;
diff --git a/frontend/packages/core/src/typography.tsx b/frontend/packages/core/src/typography.tsx
index 4351d598dc..81518ac420 100644
--- a/frontend/packages/core/src/typography.tsx
+++ b/frontend/packages/core/src/typography.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import type { TypographyProps as MuiTypographyProps } from "@mui/material";
+import { TypographyProps as MuiTypographyProps, useTheme } from "@mui/material";
 
 import styled from "./styled";
 
@@ -167,20 +167,23 @@ export interface TypographyProps extends Pick<MuiTypographyProps, "noWrap"> {
 const Typography = ({
   variant,
   children,
-  color = "#0D1030",
+  color,
   textTransform,
   noWrap,
   ...props
-}: TypographyProps) => (
-  <StyledTypography
-    $variant={variant}
-    $color={color}
-    $textTransform={textTransform}
-    $noWrap={noWrap}
-    {...props}
-  >
-    {children}
-  </StyledTypography>
-);
+}: TypographyProps) => {
+  const theme = useTheme();
+  return (
+    <StyledTypography
+      $variant={variant}
+      $color={color ?? theme.palette.secondary[900]}
+      $textTransform={textTransform}
+      $noWrap={noWrap}
+      {...props}
+    >
+      {children}
+    </StyledTypography>
+  );
+};
 
 export { StyledTypography, Typography };
diff --git a/frontend/packages/wizard/src/wizard.tsx b/frontend/packages/wizard/src/wizard.tsx
index 0fa8baa14f..6f40521f76 100644
--- a/frontend/packages/wizard/src/wizard.tsx
+++ b/frontend/packages/wizard/src/wizard.tsx
@@ -16,7 +16,13 @@ import {
 } from "@clutch-sh/core";
 import type { ManagerLayout } from "@clutch-sh/data-layout";
 import { DataLayoutContext, useDataLayoutManager } from "@clutch-sh/data-layout";
-import { Container as MuiContainer, Grid, Paper as MuiPaper, Typography } from "@mui/material";
+import {
+  alpha,
+  Container as MuiContainer,
+  Grid,
+  Paper as MuiPaper,
+  Typography,
+} from "@mui/material";
 
 import { useWizardState, WizardAction } from "./state";
 import type { WizardStepProps } from "./step";
@@ -59,10 +65,10 @@ const Container = styled(MuiContainer)<{ $width: ContainerProps["width"] }>(
   })
 );
 
-const Paper = styled(MuiPaper)({
-  boxShadow: "0px 5px 15px rgba(53, 72, 212, 0.2)",
+const Paper = styled(MuiPaper)(({ theme }) => ({
+  boxShadow: `0px 5px 15px ${alpha(theme.palette.primary[600], 0.2)}`,
   padding: "32px",
-});
+}));
 
 const Wizard = ({ heading, width = "default", dataLayout, children }: WizardProps) => {
   const [state, dispatch] = useWizardState();
diff --git a/frontend/workflows/audit/src/logs/index.tsx b/frontend/workflows/audit/src/logs/index.tsx
index 1a97d084be..5db5751f21 100644
--- a/frontend/workflows/audit/src/logs/index.tsx
+++ b/frontend/workflows/audit/src/logs/index.tsx
@@ -33,10 +33,10 @@ const LoadingContainer = styled("div")({
   width: "40px",
 });
 
-const LoadingSpinner = styled(CircularProgress)`
-  color: #3548d4;
-  position: absolute;
-`;
+const LoadingSpinner = styled(CircularProgress)(({ theme }) => ({
+  color: theme.palette.primary[600],
+  position: "absolute",
+}));
 
 const AuditLog: React.FC<AuditLogProps> = ({ heading, detailsPathPrefix, downloadPrefix }) => {
   const [searchParams, setSearchParams] = useSearchParams();
diff --git a/frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap b/frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap
index 9b29da8fcb..208e1871a5 100644
--- a/frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap
+++ b/frontend/workflows/ec2/src/tests/__snapshots__/reboot-instance.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`renders correctly 1`] = `
         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
       >
         <div
-          class="css-hnlaxq"
+          class="css-1ox5uwj"
         >
           <div
             class="MuiStepper-root MuiStepper-horizontal MuiStepper-alternativeLabel css-10mg1vw-MuiStepper-root"
@@ -28,7 +28,7 @@ exports[`renders correctly 1`] = `
                   class="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel css-vnkopk-MuiStepLabel-iconContainer"
                 >
                   <div
-                    class="css-pu8aqe"
+                    class="css-1t41j0i"
                   >
                     <div
                       class="css-h5bkmw"
@@ -131,7 +131,7 @@ exports[`renders correctly 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
           >
             <span
-              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-9n93x5-MuiCircularProgress-root"
+              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-vzjh3v-MuiCircularProgress-root"
               role="progressbar"
               style="width: 40px; height: 40px;"
             >
diff --git a/frontend/workflows/ec2/src/tests/__snapshots__/resize-asg.test.tsx.snap b/frontend/workflows/ec2/src/tests/__snapshots__/resize-asg.test.tsx.snap
index 80113b430d..86c6b890a7 100644
--- a/frontend/workflows/ec2/src/tests/__snapshots__/resize-asg.test.tsx.snap
+++ b/frontend/workflows/ec2/src/tests/__snapshots__/resize-asg.test.tsx.snap
@@ -2,7 +2,6 @@
 
 exports[`renders correctly 1`] = `
 <DocumentFragment>
-   
   <div
     class="MuiContainer-root MuiContainer-maxWidthLg css-qvkihn-MuiContainer-root"
   >
@@ -14,7 +13,7 @@ exports[`renders correctly 1`] = `
         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
       >
         <div
-          class="css-hnlaxq"
+          class="css-1ox5uwj"
         >
           <div
             class="MuiStepper-root MuiStepper-horizontal MuiStepper-alternativeLabel css-10mg1vw-MuiStepper-root"
@@ -29,7 +28,7 @@ exports[`renders correctly 1`] = `
                   class="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel css-vnkopk-MuiStepLabel-iconContainer"
                 >
                   <div
-                    class="css-pu8aqe"
+                    class="css-1t41j0i"
                   >
                     <div
                       class="css-h5bkmw"
@@ -132,7 +131,7 @@ exports[`renders correctly 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
           >
             <span
-              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-9n93x5-MuiCircularProgress-root"
+              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-vzjh3v-MuiCircularProgress-root"
               role="progressbar"
               style="width: 40px; height: 40px;"
             >
diff --git a/frontend/workflows/ec2/src/tests/__snapshots__/terminate-instance.test.tsx.snap b/frontend/workflows/ec2/src/tests/__snapshots__/terminate-instance.test.tsx.snap
index 9b29da8fcb..208e1871a5 100644
--- a/frontend/workflows/ec2/src/tests/__snapshots__/terminate-instance.test.tsx.snap
+++ b/frontend/workflows/ec2/src/tests/__snapshots__/terminate-instance.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`renders correctly 1`] = `
         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
       >
         <div
-          class="css-hnlaxq"
+          class="css-1ox5uwj"
         >
           <div
             class="MuiStepper-root MuiStepper-horizontal MuiStepper-alternativeLabel css-10mg1vw-MuiStepper-root"
@@ -28,7 +28,7 @@ exports[`renders correctly 1`] = `
                   class="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel css-vnkopk-MuiStepLabel-iconContainer"
                 >
                   <div
-                    class="css-pu8aqe"
+                    class="css-1t41j0i"
                   >
                     <div
                       class="css-h5bkmw"
@@ -131,7 +131,7 @@ exports[`renders correctly 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
           >
             <span
-              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-9n93x5-MuiCircularProgress-root"
+              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-vzjh3v-MuiCircularProgress-root"
               role="progressbar"
               style="width: 40px; height: 40px;"
             >
diff --git a/frontend/workflows/ec2/src/tests/resize-asg.test.tsx b/frontend/workflows/ec2/src/tests/resize-asg.test.tsx
index adac0ded65..af8144d28e 100644
--- a/frontend/workflows/ec2/src/tests/resize-asg.test.tsx
+++ b/frontend/workflows/ec2/src/tests/resize-asg.test.tsx
@@ -11,7 +11,6 @@ test("renders correctly", () => {
   const { asFragment } = render(
     <BrowserRouter>
       <ThemeProvider>
-        {" "}
         <ResizeAutoscalingGroup resolverType="clutch.aws.ec2.v1.AutoscalingGroup" />
       </ThemeProvider>
     </BrowserRouter>
diff --git a/frontend/workflows/envoy/src/remote-triage/dashboard.tsx b/frontend/workflows/envoy/src/remote-triage/dashboard.tsx
index a433e7f18a..0780ece998 100644
--- a/frontend/workflows/envoy/src/remote-triage/dashboard.tsx
+++ b/frontend/workflows/envoy/src/remote-triage/dashboard.tsx
@@ -1,21 +1,22 @@
 import React from "react";
 import type { clutch as IClutch } from "@clutch-sh/api";
 import { Grid, MetadataTable, Paper, styled } from "@clutch-sh/core";
+import type { Theme } from "@mui/material";
 import { Cell, Pie, PieChart } from "recharts";
 
-const SummaryCardTitle = styled("div")({
+const SummaryCardTitle = styled("div")(({ theme }) => ({
   fontWeight: 600,
   fontSize: "14px",
-  color: "#0D1030",
-});
+  color: theme.palette.secondary[900],
+}));
 
 const SummaryCardBody = styled("div")<{ $color?: string }>(
   {
     fontWeight: "bold",
     fontSize: "20px",
   },
-  props => ({
-    color: props.$color ? props.$color : "#3548D4",
+  props => ({ theme }: { theme: Theme }) => ({
+    color: props.$color ? props.$color : theme.palette.primary[600],
   })
 );
 
diff --git a/frontend/workflows/envoy/src/remote-triage/server-info.tsx b/frontend/workflows/envoy/src/remote-triage/server-info.tsx
index 62e362a481..0b4add3fca 100644
--- a/frontend/workflows/envoy/src/remote-triage/server-info.tsx
+++ b/frontend/workflows/envoy/src/remote-triage/server-info.tsx
@@ -8,12 +8,12 @@ const Container = styled("div")({
   },
 });
 
-const Title = styled("div")({
+const Title = styled("div")(({ theme }) => ({
   fontWeight: "bold",
   fontSize: "20px",
-  color: "#0D1030",
+  color: theme.palette.secondary[900],
   textTransform: "capitalize",
-});
+}));
 
 interface ServerInformation {
   command_line_options: {
diff --git a/frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap b/frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap
index 237c6f810f..98fe04c7ef 100644
--- a/frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap
+++ b/frontend/workflows/envoy/src/tests/__snapshots__/remote-triage.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`renders correctly 1`] = `
         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
       >
         <div
-          class="css-hnlaxq"
+          class="css-1ox5uwj"
         >
           <div
             class="MuiStepper-root MuiStepper-horizontal MuiStepper-alternativeLabel css-10mg1vw-MuiStepper-root"
@@ -28,7 +28,7 @@ exports[`renders correctly 1`] = `
                   class="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel css-vnkopk-MuiStepLabel-iconContainer"
                 >
                   <div
-                    class="css-pu8aqe"
+                    class="css-1t41j0i"
                   >
                     <div
                       class="css-h5bkmw"
@@ -94,7 +94,7 @@ exports[`renders correctly 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
           >
             <div
-              class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+              class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
             >
               <label
                 class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -134,7 +134,7 @@ exports[`renders correctly 1`] = `
               data-border="top"
             >
               <button
-                class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-rsbbnv-MuiButtonBase-root-MuiButton-root"
+                class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-jc1w96-MuiButtonBase-root-MuiButton-root"
                 palette="[object Object]"
                 tabindex="0"
                 type="button"
diff --git a/frontend/workflows/experimentation/src/tests/__snapshots__/list-experiments.test.tsx.snap b/frontend/workflows/experimentation/src/tests/__snapshots__/list-experiments.test.tsx.snap
index aeee5c7e38..e0646eafe1 100644
--- a/frontend/workflows/experimentation/src/tests/__snapshots__/list-experiments.test.tsx.snap
+++ b/frontend/workflows/experimentation/src/tests/__snapshots__/list-experiments.test.tsx.snap
@@ -23,7 +23,7 @@ exports[`renders correctly 1`] = `
           data-border="bottom"
         >
           <button
-            class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-rsbbnv-MuiButtonBase-root-MuiButton-root"
+            class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-v5b4j7-MuiButtonBase-root-MuiButton-root"
             palette="[object Object]"
             tabindex="0"
             type="button"
diff --git a/frontend/workflows/k8s/package.json b/frontend/workflows/k8s/package.json
index 8c9abbfda0..691f1a6c65 100644
--- a/frontend/workflows/k8s/package.json
+++ b/frontend/workflows/k8s/package.json
@@ -29,6 +29,7 @@
     "@emotion/styled": "^11.1.5",
     "@hookform/resolvers": "2.8.8",
     "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.8.5",
     "lodash": "4.17.21",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
diff --git a/frontend/workflows/k8s/src/k8s-dash-header.tsx b/frontend/workflows/k8s/src/k8s-dash-header.tsx
index dc0764e53a..d6c3834f84 100644
--- a/frontend/workflows/k8s/src/k8s-dash-header.tsx
+++ b/frontend/workflows/k8s/src/k8s-dash-header.tsx
@@ -1,21 +1,22 @@
 import React from "react";
 import styled from "@emotion/styled";
+import { alpha } from "@mui/material";
 
-const Category = styled.div({
+const Category = styled("div")(({ theme }) => ({
   fontWeight: 700,
   fontSize: "12px",
   lineHeight: "16px",
-  color: "rgba(13, 16, 48, 0.38)",
+  color: alpha(theme.palette.secondary[900], 0.38),
   textTransform: "uppercase",
   paddingBottom: "8px",
-});
+}));
 
-const HeaderText = styled.div({
+const HeaderText = styled("div")(({ theme }) => ({
   fontWeight: 700,
   fontSize: "26px",
   lineHeight: "32px",
-  color: "#0D1030",
-});
+  color: theme.palette.secondary[900],
+}));
 
 const K8sDashHeader = () => (
   <div>
diff --git a/frontend/workflows/k8s/src/k8s-dashboard.tsx b/frontend/workflows/k8s/src/k8s-dashboard.tsx
index 1702e409b3..0bea3f3159 100644
--- a/frontend/workflows/k8s/src/k8s-dashboard.tsx
+++ b/frontend/workflows/k8s/src/k8s-dashboard.tsx
@@ -7,6 +7,7 @@ import AppsIcon from "@mui/icons-material/Apps";
 import CropFreeIcon from "@mui/icons-material/CropFree";
 import DnsOutlinedIcon from "@mui/icons-material/DnsOutlined";
 import LoopOutlinedIcon from "@mui/icons-material/LoopOutlined";
+import { alpha } from "@mui/material";
 
 import type { WorkflowProps } from ".";
 import CronTable from "./crons-table";
@@ -30,20 +31,20 @@ const Content = styled.div({
   margin: "32px 0",
 });
 
-const PlaceholderTitle = styled.div({
+const PlaceholderTitle = styled("div")(({ theme }) => ({
   paddingBottom: "16px",
   fontWeight: 700,
   fontSize: "22px",
   lineHeight: "28px",
-  color: "0D1030",
-});
+  color: theme.palette.secondary[900],
+}));
 
-const PlaceholderText = styled.div({
+const PlaceholderText = styled("div")(({ theme }) => ({
   fontWeight: 400,
   fontSize: "16px",
   lineHeight: "22px",
-  color: "rgba(13, 16, 48, 0.6)",
-});
+  color: alpha(theme.palette.secondary[900], 0.6),
+}));
 
 const Placeholder = () => (
   <Paper>
diff --git a/frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap b/frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap
index 9b29da8fcb..208e1871a5 100644
--- a/frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap
+++ b/frontend/workflows/k8s/src/tests/__snapshots__/delete-pod.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`renders correctly 1`] = `
         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
       >
         <div
-          class="css-hnlaxq"
+          class="css-1ox5uwj"
         >
           <div
             class="MuiStepper-root MuiStepper-horizontal MuiStepper-alternativeLabel css-10mg1vw-MuiStepper-root"
@@ -28,7 +28,7 @@ exports[`renders correctly 1`] = `
                   class="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel css-vnkopk-MuiStepLabel-iconContainer"
                 >
                   <div
-                    class="css-pu8aqe"
+                    class="css-1t41j0i"
                   >
                     <div
                       class="css-h5bkmw"
@@ -131,7 +131,7 @@ exports[`renders correctly 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
           >
             <span
-              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-9n93x5-MuiCircularProgress-root"
+              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-vzjh3v-MuiCircularProgress-root"
               role="progressbar"
               style="width: 40px; height: 40px;"
             >
diff --git a/frontend/workflows/k8s/src/tests/__snapshots__/resize-hpa.test.tsx.snap b/frontend/workflows/k8s/src/tests/__snapshots__/resize-hpa.test.tsx.snap
index 50015a2709..86c6b890a7 100644
--- a/frontend/workflows/k8s/src/tests/__snapshots__/resize-hpa.test.tsx.snap
+++ b/frontend/workflows/k8s/src/tests/__snapshots__/resize-hpa.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`renders correctly 1`] = `
         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
       >
         <div
-          class="css-hnlaxq"
+          class="css-1ox5uwj"
         >
           <div
             class="MuiStepper-root MuiStepper-horizontal MuiStepper-alternativeLabel css-10mg1vw-MuiStepper-root"
@@ -28,7 +28,7 @@ exports[`renders correctly 1`] = `
                   class="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel css-vnkopk-MuiStepLabel-iconContainer"
                 >
                   <div
-                    class="css-pu8aqe"
+                    class="css-1t41j0i"
                   >
                     <div
                       class="css-h5bkmw"
@@ -131,7 +131,7 @@ exports[`renders correctly 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
           >
             <span
-              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-9n93x5-MuiCircularProgress-root"
+              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-vzjh3v-MuiCircularProgress-root"
               role="progressbar"
               style="width: 40px; height: 40px;"
             >
diff --git a/frontend/workflows/k8s/src/tests/__snapshots__/scale-resources.test.tsx.snap b/frontend/workflows/k8s/src/tests/__snapshots__/scale-resources.test.tsx.snap
index 014c1b34d2..0dddf37880 100644
--- a/frontend/workflows/k8s/src/tests/__snapshots__/scale-resources.test.tsx.snap
+++ b/frontend/workflows/k8s/src/tests/__snapshots__/scale-resources.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`renders correctly 1`] = `
         class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
       >
         <div
-          class="css-hnlaxq"
+          class="css-1ox5uwj"
         >
           <div
             class="MuiStepper-root MuiStepper-horizontal MuiStepper-alternativeLabel css-10mg1vw-MuiStepper-root"
@@ -28,7 +28,7 @@ exports[`renders correctly 1`] = `
                   class="MuiStepLabel-iconContainer MuiStepLabel-alternativeLabel css-vnkopk-MuiStepLabel-iconContainer"
                 >
                   <div
-                    class="css-pu8aqe"
+                    class="css-1t41j0i"
                   >
                     <div
                       class="css-h5bkmw"
@@ -131,7 +131,7 @@ exports[`renders correctly 1`] = `
             class="MuiGrid-root MuiGrid-container MuiGrid-direction-xs-column css-1ewlecp-MuiGrid-root"
           >
             <span
-              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-9n93x5-MuiCircularProgress-root"
+              class="MuiCircularProgress-root MuiCircularProgress-indeterminate MuiCircularProgress-colorPrimary css-vzjh3v-MuiCircularProgress-root"
               role="progressbar"
               style="width: 40px; height: 40px;"
             >
diff --git a/frontend/workflows/projectCatalog/src/catalog/project-card.tsx b/frontend/workflows/projectCatalog/src/catalog/project-card.tsx
index 2e479c5116..c87bfcca02 100644
--- a/frontend/workflows/projectCatalog/src/catalog/project-card.tsx
+++ b/frontend/workflows/projectCatalog/src/catalog/project-card.tsx
@@ -4,8 +4,9 @@ import { Card, Grid, IconButton, Typography } from "@clutch-sh/core";
 import styled from "@emotion/styled";
 import CloseIcon from "@mui/icons-material/Close";
 import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import { alpha, useTheme } from "@mui/material";
 
-const StyledCard = styled(Card)({
+const StyledCard = styled(Card)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   width: "350px",
@@ -14,18 +15,18 @@ const StyledCard = styled(Card)({
   padding: "22px 19px 27px 29px",
   ":hover": {
     cursor: "pointer",
-    backgroundColor: "#F5F6FD",
+    backgroundColor: theme.palette.primary[100],
     ".showOnHover": {
       visibility: "visible",
     },
   },
   ":active": {
-    backgroundColor: "#D7DAF6",
+    backgroundColor: theme.palette.primary[300],
   },
   ".showOnHover": {
     visibility: "hidden",
   },
-});
+}));
 
 interface ProjectCardProps {
   project: IClutch.core.project.v1.IProject;
@@ -33,6 +34,7 @@ interface ProjectCardProps {
 }
 
 const ProjectCard = ({ project, onRemove }: ProjectCardProps) => {
+  const theme = useTheme();
   const remove = event => {
     event.stopPropagation();
     onRemove();
@@ -60,7 +62,7 @@ const ProjectCard = ({ project, onRemove }: ProjectCardProps) => {
         style={{ marginTop: "8px", paddingRight: "16px", flex: "1", overflow: "hidden" }}
         zeroMinWidth
       >
-        <Typography variant="body2" color="rgba(13, 16, 48, 0.65)">
+        <Typography variant="body2" color={alpha(theme.palette.secondary[900], 0.65)}>
           {project?.data?.description}
         </Typography>
       </Grid>
diff --git a/frontend/workflows/projectCatalog/src/details/card.tsx b/frontend/workflows/projectCatalog/src/details/card.tsx
index b0f77dc20d..6c06100219 100644
--- a/frontend/workflows/projectCatalog/src/details/card.tsx
+++ b/frontend/workflows/projectCatalog/src/details/card.tsx
@@ -50,7 +50,7 @@ const StyledCard = styled(Card)({
   padding: "16px",
 });
 
-const StyledProgressContainer = styled("div")({
+const StyledProgressContainer = styled("div")(({ theme }) => ({
   marginBottom: "8px",
   marginTop: "-12px",
   height: "4px",
@@ -58,9 +58,9 @@ const StyledProgressContainer = styled("div")({
     backgroundColor: "rgb(194, 200, 242)",
   },
   ".MuiLinearProgress-bar": {
-    backgroundColor: "#3548D4",
+    backgroundColor: theme.palette.primary[600],
   },
-});
+}));
 
 const StyledTitle = styled(Grid)({
   textTransform: "capitalize",
diff --git a/frontend/workflows/projectSelector/src/card.tsx b/frontend/workflows/projectSelector/src/card.tsx
index 34bc2efb87..5743b266ce 100644
--- a/frontend/workflows/projectSelector/src/card.tsx
+++ b/frontend/workflows/projectSelector/src/card.tsx
@@ -13,15 +13,15 @@ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
 import { LinearProgress } from "@mui/material";
 
-const StyledProgressContainer = styled.div({
+const StyledProgressContainer = styled("div")(({ theme }) => ({
   height: "4px",
   ".MuiLinearProgress-root": {
     backgroundColor: "rgb(194, 200, 242)",
   },
   ".MuiLinearProgress-bar": {
-    backgroundColor: "#3548D4",
+    backgroundColor: theme.palette.primary[600],
   },
-});
+}));
 
 interface CardProps {
   avatar?: React.ReactNode;
diff --git a/frontend/workflows/projectSelector/src/project-group.tsx b/frontend/workflows/projectSelector/src/project-group.tsx
index 0fca315a8e..95a266ccb1 100644
--- a/frontend/workflows/projectSelector/src/project-group.tsx
+++ b/frontend/workflows/projectSelector/src/project-group.tsx
@@ -4,6 +4,7 @@ import styled from "@emotion/styled";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 import ClearIcon from "@mui/icons-material/Clear";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { alpha } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 
 import { deriveSwitchStatus, useDispatch, useReducerState } from "./helpers";
@@ -22,9 +23,9 @@ const StyledGroupTitle = styled.span({
   display: "inline-block",
 });
 
-const StyledCount = styled.span({
-  color: "rgba(13, 16, 48, 0.6)",
-  backgroundColor: "rgba(13, 16, 48, 0.03)",
+const StyledCount = styled("span")(({ theme }) => ({
+  color: alpha(theme.palette.secondary[900], 0.6),
+  backgroundColor: alpha(theme.palette.secondary[900], 0.03),
   fontVariantNumeric: "tabular-nums",
   borderRadius: "4px",
   fontWeight: "bold",
@@ -34,21 +35,21 @@ const StyledCount = styled.span({
   marginBottom: "10px",
   marginTop: "2px",
   display: "inline-block",
-});
+}));
 
 // This div used to have `padding: "0 25px 0 8px"` but that made it look weird when we implemented quicklinks
 // because the "only" and "x" buttons are hidden when the popper is expanded and mouse is no longer hovering.
-const StyledMenuItem = styled.div({
+const StyledMenuItem = styled("div")(({ theme }) => ({
   height: "48px",
   display: "flex",
   alignItems: "center",
   "&:hover": {
-    backgroundColor: "rgba(13, 16, 48, 0.03)",
+    backgroundColor: alpha(theme.palette.secondary[900], 0.03),
   },
   "&:hover > div": {
     display: "inline-flex", // Unhide hidden only button and x if necessary.
   },
-});
+}));
 
 const StyledProjectHeader = styled.div({
   display: "flex",
@@ -66,16 +67,16 @@ const StyledHeaderColumn = styled.div((props: { grow?: boolean }) => ({
   flexGrow: props.grow ? 1 : 0,
 }));
 
-const StyledNoProjectsText = styled.div({
-  color: "rgba(13, 16, 48, 0.38)",
+const StyledNoProjectsText = styled("div")(({ theme }) => ({
+  color: alpha(theme.palette.secondary[900], 0.38),
   textAlign: "center",
   fontSize: "12px",
   marginBottom: "16px",
-});
+}));
 
-const StyledAllText = styled.div({
-  color: "rgba(13, 16, 48, 0.38)",
-});
+const StyledAllText = styled("div")(({ theme }) => ({
+  color: alpha(theme.palette.secondary[900], 0.38),
+}));
 
 const StyledMenuItemName = styled.span({
   flexGrow: 1,
@@ -88,10 +89,10 @@ const StyledMenuItemName = styled.span({
   maxWidth: "160px",
 });
 
-const StyledClearIcon = styled.span({
+const StyledClearIcon = styled("span")(({ theme }) => ({
   ".MuiIconButton-root": {
     padding: "6px",
-    color: "rgba(13, 16, 48, 0.38)",
+    color: alpha(theme.palette.secondary[900], 0.38),
   },
   ".MuiIconButton-root:hover": {
     backgroundColor: "rgb(245, 246, 253)",
@@ -99,25 +100,25 @@ const StyledClearIcon = styled.span({
   ".MuiIconButton-root:active": {
     backgroundColor: "rgba(0,0,0, 0.1)",
   },
-});
+}));
 
-const StyledOnlyButton = styled.button({
+const StyledOnlyButton = styled("button")(({ theme }) => ({
   border: "none",
   cursor: "pointer",
   borderRadius: "4px",
   fontSize: "14px",
   padding: "5px",
   marginRight: "4px",
-  color: "rgba(53, 72, 212, 1)",
+  color: alpha(theme.palette.primary[600], 1),
   backgroundColor: "unset",
   fontFamily: "inherit",
   "&:hover": {
-    backgroundColor: "#f5f6fd",
+    backgroundColor: theme.palette.primary[100],
   },
   "&:active": {
-    backgroundColor: "#D7DAF6",
+    backgroundColor: theme.palette.primary[300],
   },
-});
+}));
 
 const StyledHoverOptions = styled.div({
   alignItems: "center",
diff --git a/frontend/workflows/projectSelector/src/project-links.tsx b/frontend/workflows/projectSelector/src/project-links.tsx
index c2075a2d30..ea9542b6a7 100644
--- a/frontend/workflows/projectSelector/src/project-links.tsx
+++ b/frontend/workflows/projectSelector/src/project-links.tsx
@@ -16,7 +16,7 @@ const itemHoverStyle = {
   display: "flex",
   alignItems: "center",
   "&:hover": {
-    backgroundColor: "rgba(13, 16, 48, 0.05)",
+    backgroundColor: "rgba(theme.palette.secondary[900], 0.05)",
   },
 };
 
@@ -34,7 +34,7 @@ const StyledSubLink = styled.div({
 const StyledMoreVertIcon = styled.span({
   ".MuiIconButton-root": {
     padding: "6px",
-    color: "rgba(13, 16, 48, 0.38)",
+    color: "rgba(theme.palette.secondary[900], 0.38)",
   },
   ".MuiIconButton-root:hover": {
     backgroundColor: "rgb(245, 246, 253)",
diff --git a/frontend/workflows/projectSelector/src/project-selector.tsx b/frontend/workflows/projectSelector/src/project-selector.tsx
index 14f9157074..488164b87f 100644
--- a/frontend/workflows/projectSelector/src/project-selector.tsx
+++ b/frontend/workflows/projectSelector/src/project-selector.tsx
@@ -17,7 +17,7 @@ import styled from "@emotion/styled";
 import AddIcon from "@mui/icons-material/Add";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import UpdateIcon from "@mui/icons-material/Update";
-import { Divider, LinearProgress, useTheme } from "@mui/material";
+import { alpha, Divider, LinearProgress, useTheme } from "@mui/material";
 import _ from "lodash";
 
 import { useDashUpdater, useRefreshRateState, useRefreshUpdater } from "./dash-hooks";
@@ -63,15 +63,15 @@ const initialState: State = {
   error: undefined,
 };
 
-const StyledSelectorContainer = styled.div({
+const StyledSelectorContainer = styled("div")(({ theme }) => ({
   backgroundColor: "#F9FAFE",
-  borderRight: "1px solid rgba(13, 16, 48, 0.1)",
-  boxShadow: "0px 4px 6px rgba(53, 72, 212, 0.2)",
+  borderRight: `1px solid ${alpha(theme.palette.secondary[900], 0.1)}`,
+  boxShadow: `0px 4px 6px ${alpha(theme.palette.primary[600], 0.2)}`,
   width: "245px",
   overflowY: "auto",
   overflowX: "hidden",
   maxHeight: "100%",
-});
+}));
 
 const StyledWorkflowHeader = styled.div({
   margin: "16px 16px 12px 16px",
@@ -92,15 +92,15 @@ const StyledProjectTextField = styled(TextField)({
   padding: "16px 16px 8px 16px",
 });
 
-const StyledProgressContainer = styled.div({
+const StyledProgressContainer = styled("div")(({ theme }) => ({
   height: "4px",
   ".MuiLinearProgress-root": {
     backgroundColor: "rgb(194, 200, 242)",
   },
   ".MuiLinearProgress-bar": {
-    backgroundColor: "#3548D4",
+    backgroundColor: theme.palette.primary[600],
   },
-});
+}));
 
 // TODO(smonero): decide on styling for this
 const FlexCenterAlignContainer = styled.div({
@@ -365,7 +365,7 @@ const ProjectSelector = ({ onError }: ProjectSelectorProps) => {
                       },
                     ].map(item => (
                       <TooltipContainer key={item.title}>
-                        <Typography variant="subtitle3" color={theme.palette.secondary[200]}>
+                        <Typography variant="subtitle3" color={theme.palette.contrastColor}>
                           {item.title}
                         </Typography>
                         <Typography variant="body4" color={theme.palette.secondary[200]}>
@@ -389,7 +389,9 @@ const ProjectSelector = ({ onError }: ProjectSelectorProps) => {
                     placement="bottom"
                   >
                     <UpdateIcon
-                      style={{ color: autoRefresh ? "#3548D4" : "rgba(0, 0, 0, 0.26)" }}
+                      style={{
+                        color: autoRefresh ? theme.palette.primary[600] : "rgba(0, 0, 0, 0.26)",
+                      }}
                       fontSize="small"
                       onClick={() => {
                         handleRefreshRateChange();
diff --git a/frontend/workflows/redisexperimentation/src/tests/__snapshots__/experiment-details.test.tsx.snap b/frontend/workflows/redisexperimentation/src/tests/__snapshots__/experiment-details.test.tsx.snap
index e8177f4393..e6c68e225d 100644
--- a/frontend/workflows/redisexperimentation/src/tests/__snapshots__/experiment-details.test.tsx.snap
+++ b/frontend/workflows/redisexperimentation/src/tests/__snapshots__/experiment-details.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`renders correctly 1`] = `
     class="css-1dkqlr9"
   >
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
     >
       <label
         class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -42,7 +42,7 @@ exports[`renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
     >
       <label
         class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -78,7 +78,7 @@ exports[`renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
     >
       <label
         class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary MuiFormLabel-filled css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -124,7 +124,7 @@ exports[`renders correctly 1`] = `
         Fault Type
       </label>
       <div
-        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1tg9r3q-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-y8yi4s-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
       >
         <div
           aria-expanded="false"
@@ -177,7 +177,7 @@ exports[`renders correctly 1`] = `
       data-border="top"
     >
       <button
-        class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-vtyj5e-MuiButtonBase-root-MuiButton-root"
+        class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-ofve1n-MuiButtonBase-root-MuiButton-root"
         palette="[object Object]"
         tabindex="0"
         type="button"
@@ -185,7 +185,7 @@ exports[`renders correctly 1`] = `
         Cancel
       </button>
       <button
-        class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-rsbbnv-MuiButtonBase-root-MuiButton-root"
+        class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-v5b4j7-MuiButtonBase-root-MuiButton-root"
         palette="[object Object]"
         tabindex="0"
         type="submit"
diff --git a/frontend/workflows/redisexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap b/frontend/workflows/redisexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap
index a6b26f9662..208233224a 100644
--- a/frontend/workflows/redisexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap
+++ b/frontend/workflows/redisexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`renders correctly 1`] = `
           class="css-1dkqlr9"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
           >
             <label
               class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -58,7 +58,7 @@ exports[`renders correctly 1`] = `
             </div>
           </div>
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
           >
             <label
               class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -94,7 +94,7 @@ exports[`renders correctly 1`] = `
             </div>
           </div>
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
           >
             <label
               class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary MuiFormLabel-filled css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -140,7 +140,7 @@ exports[`renders correctly 1`] = `
               Fault Type
             </label>
             <div
-              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1tg9r3q-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-y8yi4s-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
             >
               <div
                 aria-expanded="false"
@@ -193,7 +193,7 @@ exports[`renders correctly 1`] = `
             data-border="top"
           >
             <button
-              class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-vtyj5e-MuiButtonBase-root-MuiButton-root"
+              class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-ofve1n-MuiButtonBase-root-MuiButton-root"
               palette="[object Object]"
               tabindex="0"
               type="button"
@@ -201,7 +201,7 @@ exports[`renders correctly 1`] = `
               Cancel
             </button>
             <button
-              class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-rsbbnv-MuiButtonBase-root-MuiButton-root"
+              class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-v5b4j7-MuiButtonBase-root-MuiButton-root"
               palette="[object Object]"
               tabindex="0"
               type="submit"
diff --git a/frontend/workflows/serverexperimentation/src/tests/__snapshots__/experiment-details.test.tsx.snap b/frontend/workflows/serverexperimentation/src/tests/__snapshots__/experiment-details.test.tsx.snap
index 221b40e805..7692c68fed 100644
--- a/frontend/workflows/serverexperimentation/src/tests/__snapshots__/experiment-details.test.tsx.snap
+++ b/frontend/workflows/serverexperimentation/src/tests/__snapshots__/experiment-details.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`renders correctly 1`] = `
       Cluster Pair
     </h3>
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
     >
       <label
         class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -47,7 +47,7 @@ exports[`renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
     >
       <label
         class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -83,7 +83,7 @@ exports[`renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
     >
       <label
         class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary MuiFormLabel-filled css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -134,7 +134,7 @@ exports[`renders correctly 1`] = `
         Fault Type
       </label>
       <div
-        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1tg9r3q-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-y8yi4s-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
       >
         <div
           aria-expanded="false"
@@ -183,7 +183,7 @@ exports[`renders correctly 1`] = `
       </div>
     </div>
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
     >
       <label
         class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -223,7 +223,7 @@ exports[`renders correctly 1`] = `
       data-border="top"
     >
       <button
-        class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-vtyj5e-MuiButtonBase-root-MuiButton-root"
+        class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-ofve1n-MuiButtonBase-root-MuiButton-root"
         palette="[object Object]"
         tabindex="0"
         type="button"
@@ -231,7 +231,7 @@ exports[`renders correctly 1`] = `
         Cancel
       </button>
       <button
-        class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-rsbbnv-MuiButtonBase-root-MuiButton-root"
+        class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-v5b4j7-MuiButtonBase-root-MuiButton-root"
         palette="[object Object]"
         tabindex="0"
         type="submit"
@@ -254,7 +254,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
       Cluster Pair
     </h3>
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
     >
       <label
         class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -290,7 +290,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
       </div>
     </div>
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
     >
       <label
         class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -336,7 +336,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
         Upstream Cluster Type
       </label>
       <div
-        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1tg9r3q-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-y8yi4s-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
       >
         <div
           aria-expanded="false"
@@ -385,7 +385,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
       </div>
     </div>
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
     >
       <label
         class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary MuiFormLabel-filled css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -436,7 +436,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
         Fault Type
       </label>
       <div
-        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1tg9r3q-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+        class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-y8yi4s-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
       >
         <div
           aria-expanded="false"
@@ -485,7 +485,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
       </div>
     </div>
     <div
-      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+      class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
     >
       <label
         class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -525,7 +525,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
       data-border="top"
     >
       <button
-        class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-vtyj5e-MuiButtonBase-root-MuiButton-root"
+        class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-ofve1n-MuiButtonBase-root-MuiButton-root"
         palette="[object Object]"
         tabindex="0"
         type="button"
@@ -533,7 +533,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
         Cancel
       </button>
       <button
-        class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-rsbbnv-MuiButtonBase-root-MuiButton-root"
+        class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-v5b4j7-MuiButtonBase-root-MuiButton-root"
         palette="[object Object]"
         tabindex="0"
         type="submit"
diff --git a/frontend/workflows/serverexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap b/frontend/workflows/serverexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap
index 9c35ac8e62..19c088f0da 100644
--- a/frontend/workflows/serverexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap
+++ b/frontend/workflows/serverexperimentation/src/tests/__snapshots__/start-experiment.test.tsx.snap
@@ -27,7 +27,7 @@ exports[`renders correctly 1`] = `
             Cluster Pair
           </h3>
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
           >
             <label
               class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -63,7 +63,7 @@ exports[`renders correctly 1`] = `
             </div>
           </div>
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
           >
             <label
               class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -99,7 +99,7 @@ exports[`renders correctly 1`] = `
             </div>
           </div>
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
           >
             <label
               class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary MuiFormLabel-filled css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -150,7 +150,7 @@ exports[`renders correctly 1`] = `
               Fault Type
             </label>
             <div
-              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1tg9r3q-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-y8yi4s-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
             >
               <div
                 aria-expanded="false"
@@ -199,7 +199,7 @@ exports[`renders correctly 1`] = `
             </div>
           </div>
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
           >
             <label
               class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -239,7 +239,7 @@ exports[`renders correctly 1`] = `
             data-border="top"
           >
             <button
-              class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-vtyj5e-MuiButtonBase-root-MuiButton-root"
+              class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-ofve1n-MuiButtonBase-root-MuiButton-root"
               palette="[object Object]"
               tabindex="0"
               type="button"
@@ -247,7 +247,7 @@ exports[`renders correctly 1`] = `
               Cancel
             </button>
             <button
-              class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-rsbbnv-MuiButtonBase-root-MuiButton-root"
+              class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-v5b4j7-MuiButtonBase-root-MuiButton-root"
               palette="[object Object]"
               tabindex="0"
               type="submit"
@@ -289,7 +289,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
             Cluster Pair
           </h3>
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
           >
             <label
               class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -325,7 +325,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
             </div>
           </div>
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
           >
             <label
               class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -371,7 +371,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
               Upstream Cluster Type
             </label>
             <div
-              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1tg9r3q-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-y8yi4s-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
             >
               <div
                 aria-expanded="false"
@@ -420,7 +420,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
             </div>
           </div>
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
           >
             <label
               class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary MuiFormLabel-filled css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -471,7 +471,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
               Fault Type
             </label>
             <div
-              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-1tg9r3q-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
+              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl css-y8yi4s-MuiInputBase-root-MuiOutlinedInput-root-MuiSelect-root"
             >
               <div
                 aria-expanded="false"
@@ -520,7 +520,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
             </div>
           </div>
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-137h3m1-MuiFormControl-root-MuiTextField-root"
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-14umvlt-MuiFormControl-root-MuiTextField-root"
           >
             <label
               class="MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-sizeSmall MuiInputLabel-outlined MuiFormLabel-root MuiFormLabel-colorPrimary css-1eup1al-MuiFormLabel-root-MuiInputLabel-root"
@@ -560,7 +560,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
             data-border="top"
           >
             <button
-              class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-vtyj5e-MuiButtonBase-root-MuiButton-root"
+              class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-ofve1n-MuiButtonBase-root-MuiButton-root"
               palette="[object Object]"
               tabindex="0"
               type="button"
@@ -568,7 +568,7 @@ exports[`renders correctly with upstream cluster type selection enabled 1`] = `
               Cancel
             </button>
             <button
-              class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-rsbbnv-MuiButtonBase-root-MuiButton-root"
+              class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-disableElevation MuiButtonBase-root css-v5b4j7-MuiButtonBase-root-MuiButton-root"
               palette="[object Object]"
               tabindex="0"
               type="submit"