diff --git a/frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx b/frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx
index 6564441ad1..6f04f77e48 100644
--- a/frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx
+++ b/frontend/src/component/admin/billing/BillingDashboard/BillingInformation/BillingInformation.tsx
@@ -8,7 +8,7 @@ const StyledInfoBox = styled('aside')(({ theme }) => ({
     padding: theme.spacing(4),
     height: '100%',
     borderRadius: theme.shape.borderRadiusLarge,
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
 }));
 
 const StyledTitle = styled(Typography)(({ theme }) => ({
@@ -26,7 +26,7 @@ const StyledInfoLabel = styled(Typography)(({ theme }) => ({
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
     margin: `${theme.spacing(2.5)} 0`,
-    borderColor: theme.palette.dividerAlternative,
+    borderColor: theme.palette.divider,
 }));
 interface IBillingInformationProps {
     instanceStatus: IInstanceStatus;
diff --git a/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx b/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx
index b29b891a26..ea7898431c 100644
--- a/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx
+++ b/frontend/src/component/admin/groups/GroupForm/GroupForm.tsx
@@ -53,7 +53,7 @@ const StyledDescriptionBlock = styled('div')(({ theme }) => ({
     maxWidth: theme.spacing(60),
     padding: theme.spacing(3),
     backgroundColor: theme.palette.neutral.light,
-    color: theme.palette.grey[900],
+    color: theme.palette.text.primary,
     fontSize: theme.fontSizes.smallBody,
     borderRadius: theme.shape.borderRadiusMedium,
     marginBottom: theme.spacing(2),
diff --git a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
index be82eb0baf..9e4d741a98 100644
--- a/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
+++ b/frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCard.tsx
@@ -15,7 +15,7 @@ const StyledLink = styled(Link)(({ theme }) => ({
 const StyledGroupCard = styled('aside')(({ theme }) => ({
     padding: theme.spacing(2.5),
     height: '100%',
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusLarge,
     boxShadow: theme.boxShadows.card,
     display: 'flex',
diff --git a/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx b/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx
index aac1f7a6af..dfa156f0ea 100644
--- a/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx
+++ b/frontend/src/component/admin/maintenance/MaintenanceToggle.tsx
@@ -15,7 +15,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',
     padding: theme.spacing(3),
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusLarge,
 }));
 
diff --git a/frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx b/frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx
index a641c2ecb4..5bcc720019 100644
--- a/frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx
+++ b/frontend/src/component/admin/network/NetworkTraffic/NetworkTraffic.tsx
@@ -62,7 +62,7 @@ const createInstanceChartOptions = (
         tooltip: {
             backgroundColor: theme.palette.background.paper,
             bodyColor: theme.palette.text.primary,
-            titleColor: theme.palette.grey[700],
+            titleColor: theme.palette.action.active,
             borderColor: theme.palette.primary.main,
             borderWidth: 1,
             padding: 10,
diff --git a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx
index 79c225d727..bc54575903 100644
--- a/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx
+++ b/frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountModal.tsx
@@ -71,7 +71,7 @@ const StyledRoleRadio = styled(Radio)(({ theme }) => ({
 
 const StyledSecondaryContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadiusMedium,
     marginTop: theme.spacing(4),
     marginBottom: theme.spacing(2),
diff --git a/frontend/src/component/admin/users/InviteLink/InviteLink.tsx b/frontend/src/component/admin/users/InviteLink/InviteLink.tsx
index f918ec6b41..6425f86aa1 100644
--- a/frontend/src/component/admin/users/InviteLink/InviteLink.tsx
+++ b/frontend/src/component/admin/users/InviteLink/InviteLink.tsx
@@ -174,7 +174,7 @@ export const InviteLink: VFC<ICreateInviteLinkProps> = () => {
                             borderRadius: theme =>
                                 `${theme.shape.borderRadiusMedium}px`,
                             backgroundColor: theme =>
-                                theme.palette.secondaryContainer,
+                                theme.palette.background.elevation2,
                         }}
                     >
                         <Typography variant="body2" fontWeight="bold">
diff --git a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx
index bd672e2edc..0ed961fba2 100644
--- a/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx
+++ b/frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx
@@ -57,7 +57,7 @@ export const InviteLinkBar: VFC = () => {
     return (
         <Box
             sx={{
-                backgroundColor: 'tertiary.background',
+                backgroundColor: 'background.paper',
                 py: 2,
                 px: 4,
                 mb: 2,
diff --git a/frontend/src/component/admin/users/LinkField/LinkField.tsx b/frontend/src/component/admin/users/LinkField/LinkField.tsx
index 093ad26247..5c35b563f0 100644
--- a/frontend/src/component/admin/users/LinkField/LinkField.tsx
+++ b/frontend/src/component/admin/users/LinkField/LinkField.tsx
@@ -37,7 +37,7 @@ export const LinkField = ({ inviteLink, small }: ILinkFieldProps) => {
     return (
         <Box
             sx={{
-                backgroundColor: theme => theme.palette.secondaryContainer,
+                backgroundColor: theme => theme.palette.background.elevation2,
                 py: 4,
                 px: 4,
                 borderRadius: theme => `${theme.shape.borderRadius}px`,
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx
index dd03080771..cae9773d62 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/Change/Change.tsx
@@ -48,11 +48,11 @@ const StyledSingleChangeBox = styled(Box, {
         borderColor:
             $hasConflict || $isInConflictFeature
                 ? theme.palette.warning.border
-                : theme.palette.dividerAlternative,
+                : theme.palette.divider,
         borderTopColor:
             ($hasConflict || $isAfterWarning) && !$isInConflictFeature
                 ? theme.palette.warning.border
-                : theme.palette.dividerAlternative,
+                : theme.palette.divider,
     })
 );
 
diff --git a/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx b/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx
index acb3df1173..22c824769d 100644
--- a/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequest/Changes/FeatureToggleChanges.tsx
@@ -35,7 +35,7 @@ export const FeatureToggleChanges: FC<IFeatureToggleChanges> = ({
                 borderColor: theme =>
                     conflict
                         ? theme.palette.warning.border
-                        : theme.palette.tertiary.main,
+                        : theme.palette.divider,
                 borderBottom: 'none',
                 overflow: 'hidden',
             })}
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
index 83f118ea7c..fb202cbf36 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestComments/ChangeRequestComment.tsx
@@ -20,7 +20,7 @@ const CommentPaper = styled(Paper)(({ theme }) => ({
 const CommentHeader = styled(Box)(({ theme }) => ({
     display: 'flex',
     borderBottom: '1px solid',
-    borderColor: theme.palette.dividerAlternative,
+    borderColor: theme.palette.divider,
     paddingBottom: theme.spacing(1.5),
 }));
 
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
index 1ade47cc4d..82ef69ec96 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestHeader/ChangeRequestHeader.styles.tsx
@@ -26,7 +26,7 @@ export const StyledHeader = styled(Typography)(({ theme }) => ({
 
 export const StyledCard = styled(Card)(({ theme }) => ({
     padding: theme.spacing(0.75, 1.5),
-    backgroundColor: theme.palette.tertiary.light,
+    backgroundColor: theme.palette.background.elevation2,
 }));
 
 export const StyledAvatar = styled(Avatar)(({ theme }) => ({
diff --git a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx
index 609ba28c30..365ca7d4b8 100644
--- a/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.tsx
@@ -29,26 +29,26 @@ const resolveBorder = (state: ChangeRequestState, theme: Theme) => {
         return `2px solid ${theme.palette.primary.main}`;
     }
 
-    return `1px solid ${theme.palette.tertiary.main}`;
+    return `1px solid ${theme.palette.divider}`;
 };
 
 const resolveIconColors = (state: ChangeRequestState, theme: Theme) => {
     if (state === 'Approved') {
         return {
             bgColor: theme.palette.success.main!,
-            svgColor: theme.palette.tertiary.background,
+            svgColor: theme.palette.background.paper,
         };
     }
 
     if (state === 'Applied') {
         return {
             bgColor: theme.palette.primary.main!,
-            svgColor: theme.palette.tertiary.background,
+            svgColor: theme.palette.background.paper,
         };
     }
 
     return {
-        bgColor: theme.palette.tableHeaderBackground,
+        bgColor: theme.palette.background.elevation2,
         svgColor: theme.palette.neutral.main!,
     };
 };
@@ -117,8 +117,8 @@ const Approved = () => {
             <StyledFlexAlignCenterBox>
                 <StyledSuccessIcon />
                 <Box>
-                    <StyledReviewTitle color={theme.palette.success.main}>
-                        Changed approved
+                    <StyledReviewTitle color={theme.palette.success.dark}>
+                        Changes approved
                     </StyledReviewTitle>
                     <Typography>
                         One approving review from requested approvers
@@ -131,7 +131,7 @@ const Approved = () => {
             <StyledFlexAlignCenterBox>
                 <StyledSuccessIcon />
                 <Box>
-                    <StyledReviewTitle color={theme.palette.success.main}>
+                    <StyledReviewTitle color={theme.palette.success.dark}>
                         Changes are ready to be applied
                     </StyledReviewTitle>
                 </Box>
@@ -152,7 +152,7 @@ const ReviewRequired = ({ minApprovals }: IReviewRequiredProps) => {
             <StyledFlexAlignCenterBox>
                 <StyledWarningIcon />
                 <Box>
-                    <StyledReviewTitle color={theme.palette.warning.main}>
+                    <StyledReviewTitle color={theme.palette.warning.dark}>
                         Review required
                     </StyledReviewTitle>
                     <Typography>
@@ -166,7 +166,7 @@ const ReviewRequired = ({ minApprovals }: IReviewRequiredProps) => {
 
             <StyledFlexAlignCenterBox>
                 <StyledWarningIcon />
-                <StyledReviewTitle color={theme.palette.warning.main}>
+                <StyledReviewTitle color={theme.palette.warning.dark}>
                     Apply changes is blocked
                 </StyledReviewTitle>
             </StyledFlexAlignCenterBox>
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
index 02f5ec6496..06d61283a9 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx
@@ -59,7 +59,7 @@ export const Separator = () => (
         sx={{
             marginLeft: 1.5,
             marginRight: 1.5,
-            color: 'dividerAlternative',
+            color: 'divider',
         }}
     >
         |
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
index 3de3bf91f6..9cf8801d96 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx
@@ -38,7 +38,7 @@ export const EnvironmentChangeRequest: FC<{
                 padding: 3,
                 border: '2px solid',
                 mb: 5,
-                borderColor: theme => theme.palette.secondaryContainer,
+                borderColor: theme => theme.palette.divider,
                 borderRadius: theme => `${theme.shape.borderRadiusLarge}px`,
             }}
         >
diff --git a/frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx b/frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx
index 6795b49b3a..12491b8906 100644
--- a/frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx
+++ b/frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx
@@ -6,7 +6,7 @@ import { PageHeader } from '../../../common/PageHeader/PageHeader';
 const StyledHelpOutline = styled(HelpOutline)(({ theme }) => ({
     fontSize: theme.fontSizes.mainHeader,
     marginLeft: '0.3rem',
-    color: theme.palette.grey[700],
+    color: theme.palette.action.active,
 }));
 
 const StyledHeaderHint = styled('div')(({ theme }) => ({
diff --git a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts
index 2d8e20fa28..3d4eaaacff 100644
--- a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts
+++ b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts
@@ -8,7 +8,7 @@ export const useStyles = makeStyles()(theme => ({
         borderTopRightRadius: 50,
         borderBottomRightRadius: 50,
         '& fieldset': {
-            borderColor: theme.palette.grey[300],
+            borderColor: theme.palette.divider,
             borderLeftColor: 'transparent',
         },
         '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
diff --git a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
index a3a4056e98..81f38af96a 100644
--- a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
+++ b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
@@ -31,7 +31,7 @@ const StyledIcon = styled('div', {
 })<{ $disabled: boolean }>(({ theme, $disabled }) => ({
     background: $disabled
         ? theme.palette.primary.light
-        : theme.palette.featureSegmentSearchBackground,
+        : theme.palette.primary.main,
     height: '48px',
     width: '48px',
     display: 'flex',
@@ -40,7 +40,7 @@ const StyledIcon = styled('div', {
     paddingLeft: 6,
     borderTopLeftRadius: '40px',
     borderBottomLeftRadius: '40px',
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
 }));
 
 const StyledAutocomplete = styled(Autocomplete)({
diff --git a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx
index 458fc9fa39..45717db0ca 100644
--- a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx
+++ b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx
@@ -7,7 +7,7 @@ interface ICheckMarkBadgeProps {
 }
 
 const StyledBatch = styled('div')(({ theme }) => ({
-    backgroundColor: theme.palette.checkmarkBadge,
+    backgroundColor: theme.palette.primary.main,
     width: '75px',
     height: '75px',
     borderRadius: '50px',
@@ -21,12 +21,12 @@ const StyledBatch = styled('div')(({ theme }) => ({
 }));
 
 const StyledClose = styled(Close)(({ theme }) => ({
-    color: theme.palette.tertiary.background,
+    color: theme.palette.background.paper,
     width: '35px',
     height: '35px',
 }));
 const StyledCheck = styled(Check)(({ theme }) => ({
-    color: theme.palette.tertiary.background,
+    color: theme.palette.background.paper,
     width: '35px',
     height: '35px',
 }));
diff --git a/frontend/src/component/common/Codebox/Codebox.tsx b/frontend/src/component/common/Codebox/Codebox.tsx
index f566d50235..51742d7fa1 100644
--- a/frontend/src/component/common/Codebox/Codebox.tsx
+++ b/frontend/src/component/common/Codebox/Codebox.tsx
@@ -17,7 +17,7 @@ const StyledCode = styled('pre')(({ theme }) => ({
     margin: 0,
     wordBreak: 'break-all',
     whiteSpace: 'pre-wrap',
-    color: theme.palette.formSidebarTextColor,
+    color: theme.palette.common.white,
     fontSize: theme.fontSizes.smallBody,
 }));
 
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx
index 60c738da5d..67aac897a9 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx
@@ -50,9 +50,9 @@ const resolveContextDefinition = (
 const StyledForm = styled('div')({ padding: 0, margin: 0, width: '100%' });
 
 const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusMedium,
-    backgroundColor: theme.palette.constraintAccordion.editBackground,
+    backgroundColor: theme.palette.background.elevation1,
     boxShadow: 'none',
     margin: 0,
     '& .expanded': {
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx
index d970c25f88..9034ac8edc 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx
@@ -3,7 +3,7 @@ import { styled } from '@mui/material';
 
 const StyledHeader = styled('h3')(({ theme }) => ({
     fontSize: theme.fontSizes.bodySize,
-    fontWeight: theme.typography.fontWeightMedium,
+    fontWeight: theme.typography.fontWeightRegular,
     marginTop: theme.spacing(2),
     marginBottom: theme.spacing(0.5),
 }));
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
index 890e09c7b2..74e49c4475 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
@@ -12,6 +12,6 @@ export const useStyles = makeStyles()(theme => ({
     description: {
         lineHeight: 1.33,
         fontSize: theme.fontSizes.smallerBody,
-        color: theme.palette.grey[700],
+        color: theme.palette.action.active,
     },
 }));
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx
index e4cef7dae5..0a0003eaa3 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/StyledToggleButton/StyledToggleButton.tsx
@@ -6,12 +6,12 @@ export const StyledToggleButtonOff = styled(IconButton)(({ theme }) => ({
     minWidth: '28px',
     maxWidth: '28px',
     height: 'auto',
-    backgroundColor: theme.palette.tertiary.background,
+    backgroundColor: theme.palette.background.paper,
     borderRadius: theme.shape.borderRadius,
     padding: '0 1px 0',
     marginRight: '1rem',
     '&:hover': {
-        background: theme.palette.tertiary.contrast[300],
+        background: theme.palette.background.application,
     },
     [theme.breakpoints.between(1101, 1365)]: {
         marginRight: '0.5rem',
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
index 85f21e51a5..b4b30e4aed 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
@@ -46,7 +46,7 @@ const StyledHelpWrapper = styled(Tooltip)(({ theme }) => ({
 }));
 
 const StyledHelp = styled(HelpOutline)(({ theme }) => ({
-    fill: theme.palette.tertiary.dark,
+    fill: theme.palette.action.active,
     [theme.breakpoints.down(860)]: {
         display: 'none',
     },
@@ -60,7 +60,7 @@ const StyledConstraintLabel = styled('p')(({ theme }) => ({
 const StyledAddCustomLabel = styled('div')(({ theme }) => ({
     marginTop: theme.spacing(1),
     marginBottom: theme.spacing(1),
-    color: theme.palette.text.secondary,
+    color: theme.palette.text.primary,
     display: 'flex',
 }));
 
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
index 15718cf74a..1069863fed 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
@@ -27,9 +27,9 @@ interface IConstraintAccordionViewProps {
 }
 
 const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusMedium,
-    backgroundColor: theme.palette.constraintAccordion.background,
+    backgroundColor: theme.palette.background.paper,
     boxShadow: 'none',
     margin: 0,
 
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx
index f12acf3f2f..fa420e3244 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/StyledIconWrapper.tsx
@@ -5,7 +5,7 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 export const StyledIconWrapperBase = styled('div')<{
     prefix?: boolean;
 }>(({ theme }) => ({
-    backgroundColor: theme.palette.grey[200],
+    backgroundColor: theme.palette.background.elevation2,
     width: 24,
     display: 'flex',
     alignItems: 'center',
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
index dc5a426813..b7bd3fff05 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
@@ -11,7 +11,7 @@ interface IConstraintOperatorProps {
 const StyledContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(0.5, 1.5),
     borderRadius: theme.shape.borderRadius,
-    backgroundColor: theme.palette.constraintAccordion.operatorBackground,
+    backgroundColor: theme.palette.background.elevation2,
     lineHeight: 1.25,
 }));
 
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx
index c32f4bf8cb..ba3d1bf9a9 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect.tsx
@@ -64,7 +64,7 @@ const StyledMenuItem = styled(MenuItem, {
                   left: 0,
                   right: 0,
                   borderTop: '1px solid',
-                  borderTopColor: theme.palette.tertiary.contrast,
+                  borderTopColor: theme.palette.divider,
               },
           }
         : {}
diff --git a/frontend/src/component/common/Dialogue/Dialogue.tsx b/frontend/src/component/common/Dialogue/Dialogue.tsx
index 751fe7179b..b05fa35069 100644
--- a/frontend/src/component/common/Dialogue/Dialogue.tsx
+++ b/frontend/src/component/common/Dialogue/Dialogue.tsx
@@ -21,7 +21,7 @@ const StyledDialog = styled(Dialog)(({ theme, maxWidth }) => ({
 
 const StyledDialogTitle = styled(DialogTitle)(({ theme }) => ({
     backgroundColor: theme.palette.primary.main,
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
     padding: theme.spacing(3.5, 6),
     fontWeight: theme.fontWeight.medium,
 }));
diff --git a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx b/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx
index bc74f645d6..50d09785a2 100644
--- a/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx
+++ b/frontend/src/component/common/FeatureStatusChip/FeatureStatusChip.tsx
@@ -1,16 +1,10 @@
-import { Chip, styled } from '@mui/material';
+import { Badge } from 'component/common/Badge/Badge';
 
 interface IStatusChip {
     stale: boolean;
     showActive?: boolean;
 }
 
-const StyledChip = styled(Chip)(({ theme }) => ({
-    background: 'transparent',
-    border: `1px solid ${theme.palette.primary.main}`,
-    color: theme.palette.primary.main,
-}));
-
 export const FeatureStatusChip = ({
     stale,
     showActive = true,
@@ -26,12 +20,9 @@ export const FeatureStatusChip = ({
 
     return (
         <div data-loading style={{ marginLeft: '8px' }}>
-            <StyledChip
-                color="primary"
-                variant="outlined"
-                title={title}
-                label={value}
-            />
+            <Badge color={stale ? 'neutral' : 'secondary'} title={title}>
+                {value}
+            </Badge>
         </div>
     );
 };
diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
index 1235b1c354..d1b138333d 100644
--- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx
+++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
@@ -46,7 +46,7 @@ const StyledContainer = styled('section', {
 const StyledRelativeDiv = styled('div')(({ theme }) => relative);
 
 const StyledFormContent = styled('div')(({ theme }) => ({
-    backgroundColor: theme.palette.formBackground,
+    backgroundColor: theme.palette.background.paper,
     display: 'flex',
     flexDirection: 'column',
     padding: theme.spacing(6),
@@ -73,7 +73,7 @@ const StyledSidebarDivider = styled(Divider)(({ theme }) => ({
 }));
 
 const StyledSubtitle = styled('h2')(({ theme }) => ({
-    color: theme.palette.formSidebarTextColor,
+    color: theme.palette.common.white,
     marginBottom: theme.spacing(2),
     display: 'flex',
     justifyContent: 'space-between',
@@ -83,7 +83,7 @@ const StyledSubtitle = styled('h2')(({ theme }) => ({
 }));
 
 const StyledIcon = styled(FileCopy)(({ theme }) => ({
-    fill: theme.palette.text.tertiaryContrast,
+    fill: theme.palette.primary.contrastText,
 }));
 
 const StyledMobileGuidanceContainer = styled('div')(() => ({
@@ -105,11 +105,11 @@ const StyledMobileGuidanceButton = styled(IconButton)(() => ({
 }));
 
 const StyledInfoIcon = styled(Info)(({ theme }) => ({
-    fill: theme.palette.text.tertiaryContrast,
+    fill: theme.palette.primary.contrastText,
 }));
 
 const StyledSidebar = styled('aside')(({ theme }) => ({
-    backgroundColor: theme.palette.formSidebar,
+    backgroundColor: theme.palette.background.sidebar,
     padding: theme.spacing(4),
     flexGrow: 0,
     flexShrink: 0,
@@ -124,7 +124,7 @@ const StyledSidebar = styled('aside')(({ theme }) => ({
 }));
 
 const StyledDescription = styled('p')(({ theme }) => ({
-    color: theme.palette.formSidebarTextColor,
+    color: theme.palette.common.white,
     zIndex: 1,
     position: 'relative',
 }));
@@ -137,11 +137,11 @@ const StyledLinkContainer = styled('div')(({ theme }) => ({
 
 const StyledLinkIcon = styled(MenuBookIcon)(({ theme }) => ({
     marginRight: theme.spacing(1),
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
 }));
 
 const StyledDocumentationLink = styled('a')(({ theme }) => ({
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
     display: 'block',
     '&:hover': {
         textDecoration: 'none',
diff --git a/frontend/src/component/common/GuidanceIndicator/GuidanceIndicator.tsx b/frontend/src/component/common/GuidanceIndicator/GuidanceIndicator.tsx
index 167fdef936..6c20b1b9b5 100644
--- a/frontend/src/component/common/GuidanceIndicator/GuidanceIndicator.tsx
+++ b/frontend/src/component/common/GuidanceIndicator/GuidanceIndicator.tsx
@@ -5,7 +5,7 @@ const StyledIndicator = styled('div')(({ style, theme }) => ({
     width: '25px',
     height: '25px',
     borderRadius: '50%',
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -29,7 +29,7 @@ export const GuidanceIndicator: FC<IGuidanceIndicatorProps> = ({
 
     const defaults = { backgroundColor: theme.palette.primary.main };
     if (type === 'secondary') {
-        defaults.backgroundColor = theme.palette.tertiary.dark;
+        defaults.backgroundColor = theme.palette.text.disabled;
     }
 
     return (
diff --git a/frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx b/frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx
index e85a07b233..e826ff1acd 100644
--- a/frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx
+++ b/frontend/src/component/common/HtmlTooltip/HtmlTooltip.tsx
@@ -46,13 +46,13 @@ const StyledHtmlTooltip = styled(
             color: theme.palette.text.primary,
             fontWeight: theme.fontWeight.medium,
             maxWidth: 'inherit',
-            border: `1px solid ${theme.palette.lightBorder}`,
+            border: `1px solid ${theme.palette.divider}`,
             maxHeight,
             fontSize,
         },
         [`& .${tooltipClasses.arrow}`]: {
             '&:before': {
-                border: `1px solid ${theme.palette.lightBorder}`,
+                border: `1px solid ${theme.palette.divider}`,
             },
             color: theme.palette.background.paper,
         },
diff --git a/frontend/src/component/common/NotFound/NotFound.tsx b/frontend/src/component/common/NotFound/NotFound.tsx
index e02cb0c4ee..663099594d 100644
--- a/frontend/src/component/common/NotFound/NotFound.tsx
+++ b/frontend/src/component/common/NotFound/NotFound.tsx
@@ -12,7 +12,7 @@ const StyledContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(4),
     position: 'fixed',
     inset: 0,
-    backgroundColor: theme.palette.text.tertiaryContrast,
+    backgroundColor: theme.palette.primary.contrastText,
     width: '100%',
 }));
 
diff --git a/frontend/src/component/common/Notifications/Notification.tsx b/frontend/src/component/common/Notifications/Notification.tsx
index 06db8c5d68..626e3d5aae 100644
--- a/frontend/src/component/common/Notifications/Notification.tsx
+++ b/frontend/src/component/common/Notifications/Notification.tsx
@@ -38,7 +38,7 @@ const StyledListItemButton = styled(ListItemButton)(({ theme }) => ({
     cursor: 'pointer',
     margin: theme.spacing(2, 0),
     '&:not(:last-child)': {
-        borderBottom: `2px solid ${theme.palette.tertiary.contrast}`,
+        borderBottom: `2px solid ${theme.palette.divider}`,
     },
     width: '100%',
 }));
diff --git a/frontend/src/component/common/PageHeader/PageHeader.tsx b/frontend/src/component/common/PageHeader/PageHeader.tsx
index e94777e43d..17555e5272 100644
--- a/frontend/src/component/common/PageHeader/PageHeader.tsx
+++ b/frontend/src/component/common/PageHeader/PageHeader.tsx
@@ -15,7 +15,7 @@ import { usePageTitle } from 'hooks/usePageTitle';
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
     height: '100%',
-    borderColor: theme.palette.dividerAlternative,
+    borderColor: theme.palette.divider,
     width: '1px',
     display: 'inline-block',
     marginLeft: theme.spacing(2),
diff --git a/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx b/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
index 60b7ea86bf..e7a892a8e5 100644
--- a/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
+++ b/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
@@ -18,7 +18,7 @@ const PercentageCircle = ({
         transform: 'rotate(-90deg)',
         height: size,
         width: size,
-        background: theme.palette.grey[200],
+        background: theme.palette.background.elevation2,
     };
 
     // The percentage circle used to be drawn by CSS with a conic-gradient,
diff --git a/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx b/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
index 9a6fcca544..f356b47f0d 100644
--- a/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
+++ b/frontend/src/component/common/PremiumFeature/PremiumFeature.tsx
@@ -10,7 +10,9 @@ const PremiumFeatureWrapper = styled(Box, {
     flexDirection: 'column',
     alignItems: tooltip ? 'start' : 'center',
     textAlign: tooltip ? 'left' : 'center',
-    backgroundColor: tooltip ? 'transparent' : theme.palette.secondaryContainer,
+    backgroundColor: tooltip
+        ? 'transparent'
+        : theme.palette.background.elevation2,
     borderRadius: tooltip ? 0 : theme.shape.borderRadiusLarge,
     padding: tooltip ? theme.spacing(1, 0.5) : theme.spacing(7.5, 1),
 }));
diff --git a/frontend/src/component/common/Search/Search.tsx b/frontend/src/component/common/Search/Search.tsx
index 22b11644d4..78bb656a87 100644
--- a/frontend/src/component/common/Search/Search.tsx
+++ b/frontend/src/component/common/Search/Search.tsx
@@ -101,7 +101,7 @@ export const Search = ({
                 <SearchIcon
                     sx={{
                         mr: 1,
-                        color: theme => theme.palette.inactiveIcon,
+                        color: theme => theme.palette.action.disabled,
                     }}
                 />
                 <StyledInputBase
diff --git a/frontend/src/component/common/Search/SearchSuggestions/SearchDescription/SearchDescription.tsx b/frontend/src/component/common/Search/SearchSuggestions/SearchDescription/SearchDescription.tsx
index 66396db282..42003ea3a1 100644
--- a/frontend/src/component/common/Search/SearchSuggestions/SearchDescription/SearchDescription.tsx
+++ b/frontend/src/component/common/Search/SearchSuggestions/SearchDescription/SearchDescription.tsx
@@ -12,7 +12,7 @@ const StyledHeader = styled('span')(({ theme }) => ({
 }));
 
 const StyledCode = styled('span')(({ theme }) => ({
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     color: theme.palette.text.primary,
     padding: theme.spacing(0, 0.5),
     borderRadius: theme.spacing(0.5),
diff --git a/frontend/src/component/common/Search/SearchSuggestions/SearchInstructions/SearchInstructions.tsx b/frontend/src/component/common/Search/SearchSuggestions/SearchInstructions/SearchInstructions.tsx
index bfaf3a557e..145d84aded 100644
--- a/frontend/src/component/common/Search/SearchSuggestions/SearchInstructions/SearchInstructions.tsx
+++ b/frontend/src/component/common/Search/SearchSuggestions/SearchInstructions/SearchInstructions.tsx
@@ -9,7 +9,7 @@ const StyledHeader = styled('span')(({ theme }) => ({
 }));
 
 const StyledCode = styled('span')(({ theme }) => ({
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     color: theme.palette.text.primary,
     padding: theme.spacing(0, 0.5),
     borderRadius: theme.spacing(0.5),
diff --git a/frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx b/frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx
index 3ba355c9df..6f71da89af 100644
--- a/frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx
+++ b/frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx
@@ -38,12 +38,12 @@ const StyledFilterList = styled(FilterList)(({ theme }) => ({
 }));
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
-    border: `1px dashed ${theme.palette.dividerAlternative}`,
+    border: `1px dashed ${theme.palette.divider}`,
     margin: theme.spacing(1.5, 0),
 }));
 
 const StyledCode = styled('span')(({ theme }) => ({
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     color: theme.palette.text.primary,
     padding: theme.spacing(0, 0.5),
     borderRadius: theme.spacing(0.5),
diff --git a/frontend/src/component/common/SegmentItem/SegmentItem.tsx b/frontend/src/component/common/SegmentItem/SegmentItem.tsx
index a97bdd9824..2e7750cea4 100644
--- a/frontend/src/component/common/SegmentItem/SegmentItem.tsx
+++ b/frontend/src/component/common/SegmentItem/SegmentItem.tsx
@@ -21,7 +21,7 @@ interface ISegmentItemProps {
 }
 
 const StyledAccordion = styled(Accordion)(({ theme }) => ({
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusMedium,
     backgroundColor: theme.palette.background.paper,
     boxShadow: 'none',
diff --git a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
index dd88d915d9..34433643fb 100644
--- a/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
+++ b/frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx
@@ -99,7 +99,7 @@ export const StrategyItemContainer: FC<IStrategyItemContainerProps> = ({
                     />
                     <Icon
                         sx={{
-                            fill: theme => theme.palette.inactiveIcon,
+                            fill: theme => theme.palette.action.disabled,
                         }}
                     />
                     <StringTruncator
diff --git a/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx b/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx
index 19e0896483..441aafcbfb 100644
--- a/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx
+++ b/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx
@@ -9,7 +9,7 @@ const StyledContent = styled('div')(({ theme }) => ({
     padding: theme.spacing(0.75, 1),
     color: theme.palette.text.primary,
     fontSize: theme.fontSizes.smallerBody,
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadius,
     position: 'absolute',
     zIndex: theme.zIndex.fab,
@@ -23,8 +23,7 @@ const StyledCenteredContent = styled(StyledContent)(({ theme }) => ({
     top: '50%',
     left: '50%',
     transform: 'translate(-50%, -50%)',
-    backgroundColor: theme.palette.activityIndicators.primary,
-    border: `1px solid ${theme.palette.primary.border}`,
+    backgroundColor: theme.palette.seen.primary,
     borderRadius: theme.shape.borderRadiusLarge,
     padding: theme.spacing(0.75, 1.5),
 }));
diff --git a/frontend/src/component/common/TabNav/TabNav/TabNav.tsx b/frontend/src/component/common/TabNav/TabNav/TabNav.tsx
index 7a53636039..dbea1fee9c 100644
--- a/frontend/src/component/common/TabNav/TabNav/TabNav.tsx
+++ b/frontend/src/component/common/TabNav/TabNav/TabNav.tsx
@@ -51,7 +51,7 @@ export const TabNav = ({
                 sx={{
                     backgroundColor: theme => theme.palette.background.paper,
                     borderBottom: '1px solid',
-                    borderBottomColor: theme => theme.palette.grey[300],
+                    borderBottomColor: theme => theme.palette.divider,
                     borderRadius: 0,
                 }}
             >
diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts
index aecf0a19e5..6ccd08f755 100644
--- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts
+++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/CellSortable.styles.ts
@@ -22,7 +22,7 @@ export const StyledTableCell = styled(TableCell, {
     ...(isSortable && {
         padding: 0,
         '&:hover, &:focus': {
-            backgroundColor: theme.palette.tableHeaderHover,
+            backgroundColor: theme.palette.table.headerHover,
             '& svg': {
                 color: 'inherit',
             },
diff --git a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx
index 05448f5c1c..8061a3f214 100644
--- a/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx
+++ b/frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx
@@ -36,7 +36,7 @@ export const SortArrow: VFC<ISortArrowProps> = ({
                     <KeyboardArrowDown
                         sx={theme => ({
                             ...iconStyle(theme),
-                            color: theme.palette.tableHeaderColor,
+                            color: theme.palette.table.headerColor,
                         })}
                         className={className}
                         fontSize="inherit"
@@ -46,7 +46,7 @@ export const SortArrow: VFC<ISortArrowProps> = ({
                     <KeyboardArrowUp
                         sx={theme => ({
                             ...iconStyle(theme),
-                            color: theme.palette.tableHeaderColor,
+                            color: theme.palette.table.headerColor,
                         })}
                         className={className}
                         fontSize="inherit"
diff --git a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
index fb11609274..c120624e15 100644
--- a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
+++ b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
@@ -1,5 +1,5 @@
 import { VFC } from 'react';
-import { styled, TableHead, TableRow } from '@mui/material';
+import { TableHead, TableRow } from '@mui/material';
 import { HeaderGroup } from 'react-table';
 import { CellSortable } from './CellSortable/CellSortable';
 
@@ -9,23 +9,6 @@ interface ISortableTableHeaderProps {
     flex?: boolean;
 }
 
-const StyledTableRow = styled(TableRow)(({ theme }) => ({
-    '& > th': {
-        height: theme.shape.tableRowHeightCompact,
-        border: 0,
-        backgroundColor: theme.palette.tableHeaderBackground,
-        color: theme.palette.tableHeaderColor,
-        '&:first-of-type': {
-            borderTopLeftRadius: theme.shape.borderRadiusMedium,
-            borderBottomLeftRadius: theme.shape.borderRadiusMedium,
-        },
-        '&:last-of-type': {
-            borderTopRightRadius: theme.shape.borderRadiusMedium,
-            borderBottomRightRadius: theme.shape.borderRadiusMedium,
-        },
-    },
-}));
-
 export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
     headerGroups,
     className,
@@ -33,7 +16,7 @@ export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
 }) => (
     <TableHead className={className}>
         {headerGroups.map(headerGroup => (
-            <StyledTableRow {...headerGroup.getHeaderGroupProps()}>
+            <TableRow {...headerGroup.getHeaderGroupProps()}>
                 {headerGroup.headers.map((column: HeaderGroup) => {
                     const content = column.render('Header');
 
@@ -64,7 +47,7 @@ export const SortableTableHeader: VFC<ISortableTableHeaderProps> = ({
                         </CellSortable>
                     );
                 })}
-            </StyledTableRow>
+            </TableRow>
         ))}
     </TableHead>
 );
diff --git a/frontend/src/component/common/Table/cells/ActionCell/ActionCell.tsx b/frontend/src/component/common/Table/cells/ActionCell/ActionCell.tsx
index b65a4e872b..901de13cc8 100644
--- a/frontend/src/component/common/Table/cells/ActionCell/ActionCell.tsx
+++ b/frontend/src/component/common/Table/cells/ActionCell/ActionCell.tsx
@@ -9,7 +9,7 @@ const StyledContainer = styled(Box)(({ theme }) => ({
 }));
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
-    borderColor: theme.palette.dividerAlternative,
+    borderColor: theme.palette.divider,
     height: theme.spacing(3),
     margin: theme.spacing(0, 2),
 }));
diff --git a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx
index ca0f27daf3..1a578fe3a6 100644
--- a/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx
+++ b/frontend/src/component/common/Table/cells/FeatureSeenCell/FeatureSeenCell.tsx
@@ -30,21 +30,21 @@ const useFeatureColor = () => {
     return (unit?: string): string => {
         switch (unit) {
             case 'second':
-                return theme.palette.activityIndicators.recent;
+                return theme.palette.seen.recent;
             case 'minute':
-                return theme.palette.activityIndicators.recent;
+                return theme.palette.seen.recent;
             case 'hour':
-                return theme.palette.activityIndicators.recent;
+                return theme.palette.seen.recent;
             case 'day':
-                return theme.palette.activityIndicators.recent;
+                return theme.palette.seen.recent;
             case 'week':
-                return theme.palette.activityIndicators.inactive;
+                return theme.palette.seen.inactive;
             case 'month':
-                return theme.palette.activityIndicators.abandoned;
+                return theme.palette.seen.abandoned;
             case 'year':
-                return theme.palette.activityIndicators.abandoned;
+                return theme.palette.seen.abandoned;
             default:
-                return theme.palette.activityIndicators.unknown;
+                return theme.palette.seen.unknown;
         }
     };
 };
diff --git a/frontend/src/component/common/Table/cells/FeatureTypeCell/FeatureTypeCell.styles.ts b/frontend/src/component/common/Table/cells/FeatureTypeCell/FeatureTypeCell.styles.ts
index 2cbed1538b..23e2f20d08 100644
--- a/frontend/src/component/common/Table/cells/FeatureTypeCell/FeatureTypeCell.styles.ts
+++ b/frontend/src/component/common/Table/cells/FeatureTypeCell/FeatureTypeCell.styles.ts
@@ -8,6 +8,6 @@ export const useStyles = makeStyles()(theme => ({
         alignItems: 'center',
     },
     icon: {
-        color: theme.palette.inactiveIcon,
+        color: theme.palette.action.disabled,
     },
 }));
diff --git a/frontend/src/component/context/ContectFormChip/ContextFormChip.tsx b/frontend/src/component/context/ContectFormChip/ContextFormChip.tsx
index 60037f3d1a..a42ad1e9ca 100644
--- a/frontend/src/component/context/ContectFormChip/ContextFormChip.tsx
+++ b/frontend/src/component/context/ContectFormChip/ContextFormChip.tsx
@@ -16,7 +16,7 @@ const StyledContainer = styled('li')(({ theme }) => ({
     alignItems: 'start',
     gap: theme.spacing(1),
     padding: theme.spacing(1),
-    background: theme.palette.secondaryContainer,
+    background: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadius,
     wordBreak: 'break-word',
 }));
diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
index 49c83d72db..2798c70a5c 100644
--- a/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
+++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentCloneModal/EnvironmentCloneModal.tsx
@@ -59,7 +59,7 @@ const StyledInput = styled(Input)(({ theme }) => ({
 
 const StyledSecondaryContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadiusMedium,
     marginTop: theme.spacing(4),
 }));
diff --git a/frontend/src/component/events/EventDiff/EventDiff.tsx b/frontend/src/component/events/EventDiff/EventDiff.tsx
index d4f5a205dd..e87db6ae29 100644
--- a/frontend/src/component/events/EventDiff/EventDiff.tsx
+++ b/frontend/src/component/events/EventDiff/EventDiff.tsx
@@ -18,10 +18,10 @@ const EventDiff = ({ entry }: IEventDiffProps) => {
     const theme = useTheme();
 
     const styles: Record<string, CSSProperties> = {
-        A: { color: theme.palette.code.edited }, // array edited
-        E: { color: theme.palette.code.edited }, // edited
-        D: { color: theme.palette.code.diffSub }, // deleted
-        N: { color: theme.palette.code.diffAdd }, // added
+        A: { color: theme.palette.eventLog.edited }, // array edited
+        E: { color: theme.palette.eventLog.edited }, // edited
+        D: { color: theme.palette.eventLog.diffSub }, // deleted
+        N: { color: theme.palette.eventLog.diffAdd }, // added
     };
 
     const diffs =
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
index 30e795232d..08ca64d4c8 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
@@ -57,7 +57,7 @@ const StyledHr = styled('hr')(({ theme }) => ({
     height: '1px',
     margin: theme.spacing(2, 0),
     border: 'none',
-    background: theme.palette.tertiary.light,
+    background: theme.palette.background.elevation2,
 }));
 
 const StyledButtons = styled('div')(({ theme }) => ({
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx
index 390266797b..33415c4ff7 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyIcon/FeatureStrategyIcon.tsx
@@ -26,7 +26,7 @@ const StyledIcon = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
-    color: theme.palette.inactiveIcon,
+    color: theme.palette.action.disabled,
 
     '& svg': {
         width: theme.spacing(2.5),
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
index 4f0b3203e7..aae65734f5 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
@@ -48,7 +48,7 @@ const StyledCard = styled(Link)(({ theme }) => ({
     lineHeight: 1.25,
     borderWidth: '1px',
     borderStyle: 'solid',
-    borderColor: theme.palette.dividerAlternative,
+    borderColor: theme.palette.divider,
     borderRadius: theme.spacing(1),
     '&:hover, &:focus': {
         borderColor: theme.palette.primary.main,
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx
index fe3623d999..3604b0e8cc 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx
@@ -22,8 +22,8 @@ const StyledChip = styled('span')(({ theme }) => ({
     paddingBlockStart: theme.spacing(0.5),
     paddingBlockEnd: theme.spacing(0.5),
     borderRadius: '100rem',
-    background: theme.palette.featureStrategySegmentChipBackground,
-    color: theme.palette.text.tertiaryContrast,
+    background: theme.palette.primary.main,
+    color: theme.palette.primary.contrastText,
 }));
 
 const StyledButton = styled('button')(({ theme }) => ({
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx
index cd31ea5657..bc01ac0933 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx
@@ -30,7 +30,7 @@ const StyledAnd = styled('p')(({ theme }) => ({
     borderRadius: theme.shape.borderRadius,
     lineHeight: 1,
     color: theme.palette.text.primary,
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
 }));
 
 export const FeatureStrategySegmentList = ({
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts
index 2b4b57c41b..b4b195da50 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts
@@ -22,7 +22,7 @@ export const createChartOptions = (
             tooltip: {
                 backgroundColor: 'white',
                 bodyColor: theme.palette.text.primary,
-                titleColor: theme.palette.grey[700],
+                titleColor: theme.palette.action.active,
                 borderColor: theme.palette.primary.main,
                 borderWidth: 1,
                 padding: 10,
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
index 14011179c3..7af385a12d 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
@@ -31,6 +31,9 @@ const StyledItem = styled('li')(({ theme }) => ({
         backgroundColor: theme.palette.primary.main,
         color: theme.palette.primary.contrastText,
     },
+    '& > [aria-pressed=true]:hover': {
+        backgroundColor: theme.palette.primary.light,
+    },
 }));
 
 export const FeatureMetricsChips = ({
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
index 2c3ffe64ee..004075305b 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
@@ -39,7 +39,7 @@ export const FeatureMetricsContent = ({
                 borderTop={1}
                 pt={2}
                 mt={3}
-                borderColor={theme.palette.grey[200]}
+                borderColor={theme.palette.divider}
             >
                 <LazyFeatureMetricsChart
                     metrics={metrics}
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx
index b7e928b630..d79626c039 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx
@@ -37,7 +37,7 @@ const StyledText = styled('p')(({ theme }) => ({
     padding: theme.spacing(2, 0, 0, 0),
     borderTopWidth: '1px',
     borderTopStyle: 'solid',
-    borderTopColor: theme.palette.dividerAlternative,
+    borderTopColor: theme.palette.divider,
     fontSize: theme.fontSizes.smallerBody,
     color: theme.palette.text.secondary,
 }));
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx
index 8202c01c02..b5c38951d2 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/EnvironmentAccordionBody/StrategyDraggableItem/StrategyItem/StrategyExecution/StrategyExecution.tsx
@@ -16,6 +16,7 @@ import {
     parseParameterStrings,
 } from 'utils/parseParameter';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
+import { Badge } from 'component/common/Badge/Badge';
 
 interface IStrategyExecutionProps {
     strategy: IFeatureStrategyPayload;
@@ -29,7 +30,7 @@ const NoItems: VFC = () => (
 
 const StyledValueContainer = styled(Box)(({ theme }) => ({
     padding: theme.spacing(2, 3),
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderRadius: theme.shape.borderRadiusMedium,
 }));
 
@@ -72,13 +73,8 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
                                 />
                             </Box>
                             <div>
-                                <Chip
-                                    color="success"
-                                    variant="outlined"
-                                    size="small"
-                                    label={`${percentage}%`}
-                                />{' '}
-                                of your base{' '}
+                                <Badge color="success">{percentage}%</Badge> of
+                                your base{' '}
                                 {constraints.length > 0
                                     ? 'who match constraints'
                                     : ''}{' '}
@@ -167,12 +163,7 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
                             <div>
                                 {nameItem}
                                 {isSetTo}
-                                <Chip
-                                    color="success"
-                                    variant="outlined"
-                                    size="small"
-                                    label={`${percentage}%`}
-                                />
+                                <Badge color="success">{percentage}%</Badge>
                             </div>
                         </StyledValueContainer>
                     ) : null;
@@ -187,16 +178,15 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
                                 text={name}
                             />
                             {isSetTo}
-                            <Chip
+                            <Badge
                                 color={
                                     parameters[name] === 'true'
                                         ? 'success'
                                         : 'error'
                                 }
-                                variant="outlined"
-                                size="small"
-                                label={parameters[name]}
-                            />
+                            >
+                                {parameters[name]}
+                            </Badge>
                         </StyledValueContainer>
                     ) : null;
 
@@ -266,13 +256,7 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
         strategy.name === 'default' && (
             <>
                 <StyledValueContainer sx={{ width: '100%' }}>
-                    The standard strategy is{' '}
-                    <Chip
-                        variant="outlined"
-                        size="small"
-                        color="success"
-                        label="ON"
-                    />{' '}
+                    The standard strategy is <Badge color="success">ON</Badge>{' '}
                     for all users.
                 </StyledValueContainer>
             </>
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
index 33269ea5f6..c8a6147668 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
@@ -3,7 +3,6 @@ import {
     AccordionDetails,
     AccordionSummary,
     Box,
-    Chip,
     styled,
 } from '@mui/material';
 import { ExpandMore } from '@mui/icons-material';
@@ -22,6 +21,7 @@ import { FEATURE_ENVIRONMENT_ACCORDION } from 'utils/testIds';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { FeatureStrategyIcons } from 'component/feature/FeatureStrategy/FeatureStrategyIcons/FeatureStrategyIcons';
 import { useGlobalLocalStorage } from 'hooks/useGlobalLocalStorage';
+import { Badge } from 'component/common/Badge/Badge';
 
 interface IFeatureOverviewEnvironmentProps {
     env: IFeatureEnvironment;
@@ -55,7 +55,7 @@ const StyledAccordionDetails = styled(AccordionDetails, {
     shouldForwardProp: prop => prop !== 'enabled',
 })<{ enabled: boolean }>(({ theme, enabled }) => ({
     padding: theme.spacing(3),
-    background: theme.palette.secondaryContainer,
+    background: theme.palette.background.elevation2,
     borderBottomLeftRadius: theme.shape.borderRadiusLarge,
     borderBottomRightRadius: theme.shape.borderRadiusLarge,
     borderBottom: `4px solid ${
@@ -162,12 +162,12 @@ const FeatureOverviewEnvironment = ({
                                     <ConditionallyRender
                                         condition={!env.enabled}
                                         show={
-                                            <Chip
-                                                size="small"
-                                                variant="outlined"
-                                                label="Disabled"
+                                            <Badge
+                                                color="neutral"
                                                 sx={{ ml: 1 }}
-                                            />
+                                            >
+                                                Disabled
+                                            </Badge>
                                         }
                                     />
                                 </StyledHeaderTitle>
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
index 7ca34960ac..8d66d06c51 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
@@ -40,7 +40,7 @@ const StyledInfoParagraph = styled('p')(({ theme }) => ({
 }));
 
 const StyledIcon = styled(FiberManualRecord)(({ theme }) => ({
-    fill: theme.palette.standaloneBackground,
+    fill: theme.palette.background.application,
     height: '75px',
     width: '75px',
     [theme.breakpoints.down(500)]: {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/SectionSeparator/SectionSeparator.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/SectionSeparator/SectionSeparator.tsx
index ef525e8529..e1a6a8376c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/SectionSeparator/SectionSeparator.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/SectionSeparator/SectionSeparator.tsx
@@ -14,7 +14,7 @@ const SeparatorContainer = styled('div')(({ theme }) => ({
         transform: 'translateY(-50%)',
         height: 2,
         width: '100%',
-        backgroundColor: theme.palette.dividerAlternative,
+        backgroundColor: theme.palette.divider,
     },
 }));
 
@@ -22,7 +22,7 @@ const SeparatorContent = styled('span')(({ theme }) => ({
     fontSize: theme.fontSizes.bodySize,
     textAlign: 'center',
     padding: '0 1rem',
-    background: theme.palette.secondaryContainer,
+    background: theme.palette.background.elevation2,
     position: 'relative',
     maxWidth: '80%',
     color: theme.palette.text.primary,
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
index 05f0a1bbb7..b80b2ff69b 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
@@ -10,8 +10,8 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 
 const StyledContainer = styled('div')(({ theme }) => ({
     borderRadius: theme.shape.borderRadiusLarge,
-    color: theme.palette.text.tertiaryContrast,
-    backgroundColor: theme.palette.featureMetaData,
+    color: theme.palette.primary.contrastText,
+    backgroundColor: theme.palette.background.sidebar,
     display: 'flex',
     flexDirection: 'column',
     maxWidth: '350px',
@@ -54,7 +54,7 @@ const StyledBodyItem = styled('span')(({ theme }) => ({
 const StyledDescriptionContainer = styled('div')(({ theme }) => ({
     display: 'flex',
     alignItems: 'center',
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
 }));
 
 const FeatureOverviewMetaData = () => {
@@ -74,7 +74,7 @@ const FeatureOverviewMetaData = () => {
                             marginRight: theme.spacing(2),
                             height: '40px',
                             width: '40px',
-                            fill: theme.palette.text.tertiaryContrast,
+                            fill: theme.palette.primary.contrastText,
                         })}
                     />{' '}
                     <StyledHeader>{capitalize(type || '')} toggle</StyledHeader>
@@ -101,8 +101,8 @@ const FeatureOverviewMetaData = () => {
                                     >
                                         <Edit
                                             sx={theme => ({
-                                                color: theme.palette.text
-                                                    .tertiaryContrast,
+                                                color: theme.palette.primary
+                                                    .contrastText,
                                             })}
                                         />
                                     </PermissionIconButton>
@@ -124,8 +124,8 @@ const FeatureOverviewMetaData = () => {
                                     >
                                         <Edit
                                             sx={theme => ({
-                                                color: theme.palette.text
-                                                    .tertiaryContrast,
+                                                color: theme.palette.primary
+                                                    .contrastText,
                                             })}
                                         />
                                     </PermissionIconButton>
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx
index 5b70225d60..8c5a62421f 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelEnvironmentSwitches/FeatureOverviewSidePanelEnvironmentSwitch/FeatureOverviewSidePanelEnvironmentHider.tsx
@@ -8,9 +8,7 @@ const StyledVisibilityToggle = styled(IconButton, {
 })<{ visibilityOff: boolean }>(({ theme, visibilityOff }) => ({
     marginLeft: 'auto',
     marginRight: theme.spacing(-1),
-    color: visibilityOff
-        ? theme.palette.neutral.main
-        : theme.palette.tertiary.main,
+    color: visibilityOff ? theme.palette.neutral.main : theme.palette.divider,
     '&:hover': {
         color: theme.palette.neutral.main,
     },
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags.tsx
index 2e940f773f..e735ed9fb4 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSidePanel/FeatureOverviewSidePanelTags/FeatureOverviewSidePanelTags.tsx
@@ -27,9 +27,6 @@ const StyledTagContainer = styled('div')(({ theme }) => ({
 
 const StyledChip = styled(Chip)(({ theme }) => ({
     fontSize: theme.fontSizes.smallBody,
-    '.MuiChip-deleteIcon': {
-        color: theme.palette.neutral.main,
-    },
 }));
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsCard.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsCard.tsx
index 96bbd44455..5a48548655 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsCard.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureEnvironmentVariants/EnvironmentVariantsCard/EnvironmentVariantsCard.tsx
@@ -8,7 +8,7 @@ import { Badge } from 'component/common/Badge/Badge';
 const StyledCard = styled('div')(({ theme }) => ({
     padding: theme.spacing(3),
     borderRadius: theme.shape.borderRadiusLarge,
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     '&:not(:last-child)': {
         marginBottom: theme.spacing(3),
     },
diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx
index b1c3de6d4c..502f3fd414 100644
--- a/frontend/src/component/feature/FeatureView/FeatureView.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx
@@ -68,7 +68,7 @@ const StyledToolbarContainer = styled('div')({
 
 const StyledSeparator = styled('div')(({ theme }) => ({
     width: '100%',
-    backgroundColor: theme.palette.tertiary.light,
+    backgroundColor: theme.palette.background.elevation2,
     height: '1px',
 }));
 
diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx b/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx
index 2981b34aaa..709550d004 100644
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx
@@ -43,7 +43,7 @@ const StyledClose = styled('div')({
 
 const StyledCloseIcon = styled(CloseOutlined)(({ theme }) => ({
     fontSize: '1.5rem',
-    color: theme.palette.inactiveIcon,
+    color: theme.palette.action.disabled,
 }));
 
 export const FeedbackCES = ({ state }: IFeedbackCESProps) => {
diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx b/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx
index 8c2cc6eec1..cd6472cff1 100644
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx
@@ -41,7 +41,7 @@ const StyledScoreValue = styled('label')(({ theme }) => ({
         display: 'grid',
         justifyContent: 'center',
         alignItems: 'center',
-        background: theme.palette.grey[300],
+        background: theme.palette.divider,
         width: '3rem',
         height: '3rem',
         borderRadius: '10rem',
@@ -53,7 +53,7 @@ const StyledScoreValue = styled('label')(({ theme }) => ({
     '& input:checked + span': {
         fontWeight: theme.fontWeight.bold,
         background: theme.palette.primary.main,
-        color: theme.palette.text.tertiaryContrast,
+        color: theme.palette.primary.contrastText,
     },
     '& input:focus-visible + span': {
         outline: '2px solid',
diff --git a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
index 27cd579408..6472dd925e 100644
--- a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
+++ b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
@@ -29,7 +29,7 @@ exports[`FeedbackCESForm 1`] = `
             Very difficult
           </span>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -41,7 +41,7 @@ exports[`FeedbackCESForm 1`] = `
             </span>
           </label>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -53,7 +53,7 @@ exports[`FeedbackCESForm 1`] = `
             </span>
           </label>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -65,7 +65,7 @@ exports[`FeedbackCESForm 1`] = `
             </span>
           </label>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -77,7 +77,7 @@ exports[`FeedbackCESForm 1`] = `
             </span>
           </label>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -89,7 +89,7 @@ exports[`FeedbackCESForm 1`] = `
             </span>
           </label>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -101,7 +101,7 @@ exports[`FeedbackCESForm 1`] = `
             </span>
           </label>
           <label
-            class="css-112g122"
+            class="css-ruqihc"
           >
             <input
               name="score"
@@ -131,7 +131,7 @@ exports[`FeedbackCESForm 1`] = `
             class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-wb57ya-MuiFormControl-root-MuiTextField-root"
           >
             <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline css-1qvtpcv-MuiInputBase-root-MuiOutlinedInput-root"
+              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline css-1nhioic-MuiInputBase-root-MuiOutlinedInput-root"
             >
               <textarea
                 aria-invalid="false"
@@ -169,7 +169,7 @@ exports[`FeedbackCESForm 1`] = `
           hidden=""
         >
           <button
-            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-w5plom-MuiButtonBase-root-MuiButton-root"
+            class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium Mui-disabled MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1bqn98c-MuiButtonBase-root-MuiButton-root"
             disabled=""
             tabindex="-1"
             type="submit"
diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index 493f24d729..de87a60779 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx
@@ -28,7 +28,7 @@ const MainLayoutContentWrapper = styled('main')(({ theme }) => ({
     overflow: 'auto', // prevent margin collapsing
     flex: 1,
     width: '100%',
-    backgroundColor: theme.palette.contentWrapper,
+    backgroundColor: theme.palette.background.application,
     position: 'relative',
 }));
 
diff --git a/frontend/src/component/menu/Footer/Footer.tsx b/frontend/src/component/menu/Footer/Footer.tsx
index b43c8a3962..efa175811a 100644
--- a/frontend/src/component/menu/Footer/Footer.tsx
+++ b/frontend/src/component/menu/Footer/Footer.tsx
@@ -11,7 +11,7 @@ const StyledFooter = styled('footer')(({ theme }) => ({
     width: '100%',
     flexGrow: 1,
     zIndex: 100,
-    backgroundColor: theme.palette.footerBackground,
+    backgroundColor: theme.palette.background.paper,
 }));
 
 const StyledList = styled(List)({
diff --git a/frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap b/frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap
index c6e738838f..43c9e99e08 100644
--- a/frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap
+++ b/frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`should render DrawerMenu 1`] = `
                 className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
               >
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -72,7 +72,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -91,7 +91,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -111,7 +111,7 @@ exports[`should render DrawerMenu 1`] = `
                 </li>
                  
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -131,7 +131,7 @@ exports[`should render DrawerMenu 1`] = `
                 </li>
                  
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -150,7 +150,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -169,7 +169,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -188,7 +188,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -224,7 +224,7 @@ exports[`should render DrawerMenu 1`] = `
                 className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
               >
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -243,7 +243,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -262,7 +262,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -281,7 +281,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -300,7 +300,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -334,7 +334,7 @@ exports[`should render DrawerMenu 1`] = `
                 className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
               >
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -353,7 +353,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -372,7 +372,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -391,7 +391,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -410,7 +410,7 @@ exports[`should render DrawerMenu 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -498,7 +498,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
               >
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -517,7 +517,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -536,7 +536,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -556,7 +556,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </li>
                  
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -576,7 +576,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </li>
                  
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -595,7 +595,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -614,7 +614,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -633,7 +633,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -669,7 +669,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
               >
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -688,7 +688,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -707,7 +707,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -726,7 +726,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -745,7 +745,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -779,7 +779,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 className="MuiList-root MuiList-padding MuiList-dense css-zin4jp-MuiList-root"
               >
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -798,7 +798,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -817,7 +817,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -836,7 +836,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
@@ -855,7 +855,7 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                   </div>
                 </li>
                 <li
-                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1aaw0ru-MuiListItem-root"
+                  className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding css-1j1wl1e-MuiListItem-root"
                   disabled={false}
                 >
                   <div
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index 317bd6d958..1907087d39 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -42,7 +42,7 @@ import { useThemeMode } from 'hooks/useThemeMode';
 import { Notifications } from 'component/common/Notifications/Notifications';
 
 const StyledHeader = styled(AppBar)(({ theme }) => ({
-    backgroundColor: theme.palette.headerBackground,
+    backgroundColor: theme.palette.background.paper,
     padding: theme.spacing(1),
     boxShadow: 'none',
     position: 'relative',
diff --git a/frontend/src/component/playground/Playground/Playground.tsx b/frontend/src/component/playground/Playground/Playground.tsx
index b57f80e30d..99bb1483f8 100644
--- a/frontend/src/component/playground/Playground/Playground.tsx
+++ b/frontend/src/component/playground/Playground/Playground.tsx
@@ -159,7 +159,7 @@ export const Playground: VFC<{}> = () => {
             >
                 <Box
                     sx={{
-                        background: theme.palette.playgroundBackground,
+                        background: theme.palette.background.elevation2,
                         borderBottomLeftRadius: theme.shape.borderRadiusMedium,
                     }}
                 >
@@ -170,7 +170,7 @@ export const Playground: VFC<{}> = () => {
                             py: 3,
                             mb: 4,
                             mt: 2,
-                            background: theme.palette.playgroundBackground,
+                            background: theme.palette.background.elevation2,
                             transition: 'width 0.4s ease',
                             minWidth: matches ? 'auto' : '500px',
                             width: formWidth,
diff --git a/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundEditor/PlaygroundEditor.tsx b/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundEditor/PlaygroundEditor.tsx
index 61db181346..cdbad2d8ca 100644
--- a/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundEditor/PlaygroundEditor.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundCodeFieldset/PlaygroundEditor/PlaygroundEditor.tsx
@@ -25,7 +25,7 @@ const StyledEditorHeader = styled('aside')(({ theme }) => ({
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
-    border: `1px solid ${theme.palette.lightBorder}`,
+    border: `1px solid ${theme.palette.divider}`,
     borderBottom: 'none',
 }));
 
@@ -52,7 +52,7 @@ const EditorStatusOk = () => {
     return (
         <StyledEditorStatusContainer
             style={{
-                color: theme.palette.text.tertiaryContrast,
+                color: theme.palette.success.contrastText,
                 backgroundColor: theme.palette.success.main,
             }}
         >
@@ -67,7 +67,7 @@ const EditorStatusError = () => {
     return (
         <StyledEditorStatusContainer
             style={{
-                color: theme.palette.text.tertiaryContrast,
+                color: theme.palette.error.contrastText,
                 backgroundColor: theme.palette.error.main,
             }}
         >
@@ -117,7 +117,7 @@ export const PlaygroundEditor: VFC<IPlaygroundEditorProps> = ({
                 extensions={[json()]}
                 onChange={onCodeFieldChange}
                 style={{
-                    border: `1px solid ${theme.palette.lightBorder}`,
+                    border: `1px solid ${theme.palette.divider}`,
                     borderTop: 'none',
                     borderBottomLeftRadius: theme.shape.borderRadiusMedium,
                     borderBottomRightRadius: theme.shape.borderRadiusMedium,
diff --git a/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundForm.tsx b/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundForm.tsx
index ba410d06d5..4820661848 100644
--- a/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundForm.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundForm/PlaygroundForm.tsx
@@ -49,7 +49,7 @@ export const PlaygroundForm: VFC<IPlaygroundFormProps> = ({
                 variant="fullWidth"
                 sx={{
                     mb: 2,
-                    borderColor: theme.palette.dividerAlternative,
+                    borderColor: theme.palette.divider,
                     borderStyle: 'dashed',
                 }}
             />
@@ -60,7 +60,7 @@ export const PlaygroundForm: VFC<IPlaygroundFormProps> = ({
                 sx={{
                     mt: 3,
                     mb: 2,
-                    borderColor: theme.palette.dividerAlternative,
+                    borderColor: theme.palette.divider,
                 }}
             />
             <Box
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/ContextBanner/ContextBanner.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/ContextBanner/ContextBanner.tsx
index c1b5b3e69c..20bbaf78ea 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/ContextBanner/ContextBanner.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/ContextBanner/ContextBanner.tsx
@@ -9,7 +9,7 @@ interface IContextBannerProps {
 }
 
 const StyledContextFieldList = styled('ul')(({ theme }) => ({
-    color: colors.black,
+    color: theme.palette.text.primary,
     listStyleType: 'none',
     padding: theme.spacing(2),
 }));
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx
index 59aa1bdea5..6556c76a91 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureResultInfoPopoverCell.tsx
@@ -12,7 +12,7 @@ interface FeatureResultInfoPopoverCellProps {
 
 const FeatureResultPopoverWrapper = styled('div')(({ theme }) => ({
     alignItems: 'flex-end',
-    color: theme.palette.tertiary.main,
+    color: theme.palette.divider,
 }));
 
 export const FeatureResultInfoPopoverCell = ({
@@ -48,7 +48,7 @@ export const FeatureResultInfoPopoverCell = ({
                         maxWidth: '100%',
                         height: 'auto',
                         overflowY: 'auto',
-                        backgroundColor: theme.palette.tertiary.light,
+                        backgroundColor: theme.palette.background.elevation2,
                         borderRadius: theme.shape.borderRadius,
                     }),
                 }}
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx
index 843211e39b..9c6a9f87e4 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/FeatureStrategyItem.tsx
@@ -45,7 +45,7 @@ export const FeatureStrategyItem = ({
             <StrategyExecution
                 strategyResult={strategy}
                 input={input}
-                percentageFill={theme.palette.tertiary.light}
+                percentageFill={theme.palette.background.elevation2}
             />
         </StrategyItemContainer>
     );
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx
index 8400e8d404..5e997bfac5 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/CustomStrategyParams/CustomParameterItem/CustomParameterItem.tsx
@@ -13,7 +13,7 @@ const StyledWrapper = styled(Box)(({ theme }) => ({
     width: '100%',
     padding: theme.spacing(2, 3),
     borderRadius: theme.shape.borderRadiusMedium,
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx
index 014eacc685..eb5ea7cf5c 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/PlaygroundParameterItem/PlaygroundParameterItem.tsx
@@ -16,7 +16,7 @@ const StyledDivContainer = styled('div', {
     width: '100%',
     padding: theme.spacing(2, 3),
     borderRadius: theme.shape.borderRadiusMedium,
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx
index e132cda23c..29b6b57c3f 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.styles.tsx
@@ -5,5 +5,5 @@ export const StyledBoxSummary = styled(Box)(({ theme }) => ({
     height: 'auto',
     padding: theme.spacing(2, 3),
     borderRadius: theme.shape.borderRadiusMedium,
-    border: `1px solid ${theme.palette.dividerAlternative}`,
+    border: `1px solid ${theme.palette.divider}`,
 }));
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx
index d89939cc5f..a80bd75f55 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecution.tsx
@@ -1,7 +1,7 @@
 import { Fragment, VFC } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { StrategySeparator } from 'component/common/StrategySeparator/StrategySeparator';
-import { Chip, styled } from '@mui/material';
+import { styled } from '@mui/material';
 import { PlaygroundRequestSchema, PlaygroundStrategySchema } from 'openapi';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ConstraintExecution } from './ConstraintExecution/ConstraintExecution';
@@ -10,6 +10,7 @@ import { PlaygroundResultStrategyExecutionParameters } from './StrategyExecution
 import { CustomStrategyParams } from './CustomStrategyParams/CustomStrategyParams';
 import { formattedStrategyNames } from 'utils/strategyNames';
 import { StyledBoxSummary } from './StrategyExecution.styles';
+import { Badge } from 'component/common/Badge/Badge';
 
 interface IStrategyExecutionProps {
     strategyResult: PlaygroundStrategySchema;
@@ -60,14 +61,8 @@ export const StrategyExecution: VFC<IStrategyExecutionProps> = ({
         ),
         name === 'default' && (
             <StyledBoxSummary sx={{ width: '100%' }}>
-                The standard strategy is{' '}
-                <Chip
-                    variant="outlined"
-                    size="small"
-                    color="success"
-                    label="ON"
-                />{' '}
-                for all users.
+                The standard strategy is <Badge color="success">ON</Badge> for
+                all users.
             </StyledBoxSummary>
         ),
     ].filter(Boolean);
diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx
index 48ac9048ee..b50eea392f 100644
--- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx
+++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/FeatureResultInfoPopoverCell/FeatureStrategyList/StrategyList/StrategyItem/StrategyExecution/StrategyExecutionParameters/StrategyExecutionParameters.tsx
@@ -2,12 +2,13 @@ import {
     parseParameterNumber,
     parseParameterStrings,
 } from 'utils/parseParameter';
-import { Box, Chip } from '@mui/material';
+import { Box } from '@mui/material';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
 import { PlaygroundParameterItem } from '../PlaygroundParameterItem/PlaygroundParameterItem';
 import { StyledBoxSummary } from '../StrategyExecution.styles';
 import { PlaygroundConstraintSchema, PlaygroundRequestSchema } from 'openapi';
 import { getMappedParam } from '../helpers';
+import { Badge } from 'component/common/Badge/Badge';
 
 export interface PlaygroundResultStrategyExecutionParametersProps {
     parameters: { [key: string]: string };
@@ -41,12 +42,7 @@ export const PlaygroundResultStrategyExecutionParameters = ({
                                     />
                                 </Box>
                                 <div>
-                                    <Chip
-                                        color="success"
-                                        variant="outlined"
-                                        size="small"
-                                        label={`${percentage}%`}
-                                    />{' '}
+                                    <Badge color="success">{percentage}%</Badge>{' '}
                                     of your base{' '}
                                     {constraints.length > 0
                                         ? 'who match constraints'
diff --git a/frontend/src/component/project/Project/Import/ActionsContainer.tsx b/frontend/src/component/project/Project/Import/ActionsContainer.tsx
index eabfa961a7..e5349a0bf5 100644
--- a/frontend/src/component/project/Project/Import/ActionsContainer.tsx
+++ b/frontend/src/component/project/Project/Import/ActionsContainer.tsx
@@ -2,7 +2,7 @@ import { Box, styled } from '@mui/material';
 
 export const ActionsContainer = styled(Box)(({ theme }) => ({
     width: '100%',
-    borderTop: `1px solid ${theme.palette.dividerAlternative}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
     marginTop: 'auto',
     paddingTop: theme.spacing(3),
     display: 'flex',
diff --git a/frontend/src/component/project/Project/Import/ImportModal.tsx b/frontend/src/component/project/Project/Import/ImportModal.tsx
index cef316970b..2ea5687682 100644
--- a/frontend/src/component/project/Project/Import/ImportModal.tsx
+++ b/frontend/src/component/project/Project/Import/ImportModal.tsx
@@ -29,7 +29,7 @@ const TimelineContainer = styled('div')(({ theme }) => ({
 const TimelineHeader = styled('div')(({ theme }) => ({
     textTransform: 'uppercase',
     fontSize: theme.fontSizes.smallBody,
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
     fontWeight: theme.typography.fontWeightBold,
     paddingLeft: theme.spacing(2),
     marginBottom: theme.spacing(4),
diff --git a/frontend/src/component/project/Project/Import/ImportTimeline.tsx b/frontend/src/component/project/Project/Import/ImportTimeline.tsx
index 95138d6230..7bc98fed6f 100644
--- a/frontend/src/component/project/Project/Import/ImportTimeline.tsx
+++ b/frontend/src/component/project/Project/Import/ImportTimeline.tsx
@@ -24,7 +24,7 @@ const StyledTimelineDot = styled(TimelineDot, {
     shouldForwardProp: prop => prop !== 'active',
 })<{ active: boolean }>(({ theme, active }) => ({
     color: active ? theme.palette.primary.main : theme.palette.neutral.border,
-    backgroundColor: active ? theme.palette.text.tertiaryContrast : 'initial',
+    backgroundColor: active ? theme.palette.primary.contrastText : 'initial',
     fontWeight: active ? theme.fontWeight.bold : theme.fontWeight.medium,
     borderColor: theme.palette.neutral.border,
     width: '40px',
@@ -39,9 +39,7 @@ const StyledTimelineContent = styled(TimelineContent, {
     shouldForwardProp: prop => prop !== 'active',
 })<{ active: boolean }>(({ theme, active }) => ({
     marginBottom: theme.spacing(6),
-    color: active
-        ? theme.palette.text.tertiaryContrast
-        : theme.palette.neutral.border,
+    color: active ? theme.palette.common.white : theme.palette.neutral.border,
     marginTop: theme.spacing(2),
 }));
 
diff --git a/frontend/src/component/project/Project/Import/PulsingAvatar.tsx b/frontend/src/component/project/Project/Import/PulsingAvatar.tsx
index 782410aa24..ed393a4906 100644
--- a/frontend/src/component/project/Project/Import/PulsingAvatar.tsx
+++ b/frontend/src/component/project/Project/Import/PulsingAvatar.tsx
@@ -6,7 +6,7 @@ export const PulsingAvatar = styled(Avatar, {
     transition: 'background-color 0.5s ease',
     backgroundColor: active
         ? theme.palette.primary.main
-        : theme.palette.tertiary.main,
+        : theme.palette.divider,
     '@keyframes pulse': {
         '0%': {
             boxShadow: `0 0 0 0px ${alpha(theme.palette.primary.main, 0.7)}`,
diff --git a/frontend/src/component/project/Project/Import/configure/ImportExplanation.tsx b/frontend/src/component/project/Project/Import/configure/ImportExplanation.tsx
index 00269456d0..7e2a677174 100644
--- a/frontend/src/component/project/Project/Import/configure/ImportExplanation.tsx
+++ b/frontend/src/component/project/Project/Import/configure/ImportExplanation.tsx
@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { Box, styled, Typography } from '@mui/material';
 
 const ImportExplanationContainer = styled(Box)(({ theme }) => ({
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadiusLarge,
     padding: theme.spacing(3),
 }));
diff --git a/frontend/src/component/project/Project/Import/configure/ImportOptions.tsx b/frontend/src/component/project/Project/Import/configure/ImportOptions.tsx
index 4b50879333..cae6a0c163 100644
--- a/frontend/src/component/project/Project/Import/configure/ImportOptions.tsx
+++ b/frontend/src/component/project/Project/Import/configure/ImportOptions.tsx
@@ -6,7 +6,7 @@ import { IMPORT_ENVIRONMENT } from 'utils/testIds';
 import useProject from 'hooks/api/getters/useProject/useProject';
 
 const ImportOptionsContainer = styled(Box)(({ theme }) => ({
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadiusLarge,
     padding: theme.spacing(3),
 }));
diff --git a/frontend/src/component/project/Project/Import/validate/ValidationStage.tsx b/frontend/src/component/project/Project/Import/validate/ValidationStage.tsx
index 02a50d03ed..ebd3fdcc75 100644
--- a/frontend/src/component/project/Project/Import/validate/ValidationStage.tsx
+++ b/frontend/src/component/project/Project/Import/validate/ValidationStage.tsx
@@ -15,7 +15,7 @@ import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const ImportInfoContainer = styled(Box)(({ theme }) => ({
-    backgroundColor: theme.palette.secondaryContainer,
+    backgroundColor: theme.palette.background.elevation2,
     borderRadius: theme.shape.borderRadiusLarge,
     padding: theme.spacing(3),
 }));
diff --git a/frontend/src/component/project/Project/Project.styles.ts b/frontend/src/component/project/Project/Project.styles.ts
index 94fd6ec091..7159588ffe 100644
--- a/frontend/src/component/project/Project/Project.styles.ts
+++ b/frontend/src/component/project/Project/Project.styles.ts
@@ -64,7 +64,7 @@ export const StyledProjectTitle = styled('span')(({ theme }) => ({
 
 export const StyledSeparator = styled('div')(({ theme }) => ({
     width: '100%',
-    backgroundColor: theme.palette.tertiary.light,
+    backgroundColor: theme.palette.background.elevation2,
     height: '1px',
 }));
 
diff --git a/frontend/src/component/project/Project/ProjectInfo/ChangeRequestsWidget.tsx b/frontend/src/component/project/Project/ProjectInfo/ChangeRequestsWidget.tsx
index 7348772bf5..3d7b72d1ac 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ChangeRequestsWidget.tsx
+++ b/frontend/src/component/project/Project/ProjectInfo/ChangeRequestsWidget.tsx
@@ -38,14 +38,14 @@ const StyledChangeRequestStatusInfo = styled(Box)(({ theme }) => ({
 }));
 
 const StyledApprovedCount = styled(StyledCount)(({ theme }) => ({
-    background: theme.palette.activityIndicators.recent,
+    background: theme.palette.seen.recent,
     padding: theme.spacing(0, 1),
     marginRight: theme.spacing(0.5),
     borderRadius: theme.shape.borderRadius,
 }));
 
 const StyledInReviewCount = styled(StyledCount)(({ theme }) => ({
-    background: theme.palette.activityIndicators.primary,
+    background: theme.palette.seen.primary,
     padding: theme.spacing(0, 1),
     marginRight: theme.spacing(0.5),
     borderRadius: theme.shape.borderRadius,
diff --git a/frontend/src/component/project/Project/ProjectInfo/MetaWidget.tsx b/frontend/src/component/project/Project/ProjectInfo/MetaWidget.tsx
index 80c52bd8dc..097313a07b 100644
--- a/frontend/src/component/project/Project/ProjectInfo/MetaWidget.tsx
+++ b/frontend/src/component/project/Project/ProjectInfo/MetaWidget.tsx
@@ -16,7 +16,7 @@ interface IMetaWidgetProps {
 const StyledIDContainer = styled('div')(({ theme }) => ({
     textAlign: 'left',
     borderRadius: `${theme.shape.borderRadius}px`,
-    backgroundColor: `${theme.palette.secondaryContainer}`,
+    backgroundColor: `${theme.palette.background.elevation2}`,
     padding: theme.spacing(0.5, 2),
     fontSize: theme.typography.body2.fontSize,
 }));
diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts b/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
index 9a7e9566a7..bf78de9c48 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
+++ b/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
@@ -13,13 +13,13 @@ export const StyledProjectCard = styled(Card)(({ theme }) => ({
     justifyContent: 'space-between',
     margin: theme.spacing(1),
     boxShadow: 'none',
-    border: `1px solid ${theme.palette.tertiary.contrast}`,
+    border: `1px solid ${theme.palette.divider}`,
     [theme.breakpoints.down('sm')]: {
         justifyContent: 'center',
     },
     '&:hover': {
         transition: 'background-color 0.2s ease-in-out',
-        backgroundColor: theme.palette.projectCard.hover,
+        backgroundColor: theme.palette.neutral.light,
     },
 }));
 
@@ -58,6 +58,7 @@ export const StyledProjectIcon = styled(ProjectIcon)(({ theme }) => ({
     margin: theme.spacing(2, 'auto'),
     width: '80px',
     display: 'block',
+    fill: 'red',
 }));
 
 export const StyledDivInfo = styled('div')(({ theme }) => ({
@@ -71,6 +72,6 @@ export const StyledDivInfoContainer = styled('div')(() => ({
 }));
 
 export const StyledParagraphInfo = styled('p')(({ theme }) => ({
-    color: theme.palette.projectCard.textColor,
+    color: theme.palette.primary.dark,
     fontWeight: 'bold',
 }));
diff --git a/frontend/src/component/segments/SegmentFormStepTwo.tsx b/frontend/src/component/segments/SegmentFormStepTwo.tsx
index 4c13cf7ac4..c52cc32fea 100644
--- a/frontend/src/component/segments/SegmentFormStepTwo.tsx
+++ b/frontend/src/component/segments/SegmentFormStepTwo.tsx
@@ -53,7 +53,7 @@ const StyledInputDescription = styled('p')(({ theme }) => ({
 
 const StyledAddContextContainer = styled('div')(({ theme }) => ({
     marginTop: '1rem',
-    borderBottom: `1px solid ${theme.palette.grey[300]}`,
+    borderBottom: `1px solid ${theme.palette.divider}`,
     paddingBottom: '2rem',
 }));
 
@@ -70,7 +70,7 @@ const StyledNoConstraintText = styled('div')(({ theme }) => ({
 
 const StyledSubtitle = styled('p')(({ theme }) => ({
     fontSize: theme.fontSizes.bodySize,
-    color: theme.palette.tertiary.dark,
+    color: theme.palette.text.disabled,
     maxWidth: 515,
     marginBottom: theme.spacing(2.5),
     wordBreak: 'break-word',
@@ -86,7 +86,7 @@ const StyledButtonContainer = styled('div')(({ theme }) => ({
     marginTop: 'auto',
     display: 'flex',
     justifyContent: 'flex-end',
-    borderTop: `1px solid ${theme.palette.tertiary.contrast}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
     paddingTop: theme.spacing(2),
 }));
 
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
index f5fbba22af..540bd86bec 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
+++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
@@ -7,10 +7,10 @@ exports[`renders an empty list correctly 1`] = `
     aria-live="polite"
   >
     <div
-      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1  css-162esap-MuiPaper-root"
+      className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1  css-9re55q-MuiPaper-root"
     >
       <div
-        className="header mui-70tvrt-headerPadding css-13qk6zu"
+        className="header mui-70tvrt-headerPadding css-1eoza9b"
       >
         <div
           className="css-j7qwjs"
@@ -32,14 +32,14 @@ exports[`renders an empty list correctly 1`] = `
               className="css-j2179i"
             >
               <div
-                className="css-uds21r"
+                className="css-non55o"
               >
                 <div
-                  className="css-19ebc6o"
+                  className="css-1phd8d6"
                 >
                   <svg
                     aria-hidden={true}
-                    className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1dfm5ba-MuiSvgIcon-root"
+                    className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-6jhd5d-MuiSvgIcon-root"
                     data-testid="SearchIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -49,7 +49,7 @@ exports[`renders an empty list correctly 1`] = `
                     />
                   </svg>
                   <div
-                    className="MuiInputBase-root MuiInputBase-colorPrimary css-1vp7ju7-MuiInputBase-root"
+                    className="MuiInputBase-root MuiInputBase-colorPrimary css-4a25hy-MuiInputBase-root"
                     onClick={[Function]}
                   >
                     <input
@@ -70,14 +70,14 @@ exports[`renders an empty list correctly 1`] = `
                 </div>
               </div>
               <hr
-                className="MuiDivider-root MuiDivider-middle MuiDivider-vertical css-19a8bca-MuiDivider-root"
+                className="MuiDivider-root MuiDivider-middle MuiDivider-vertical css-1cqsk4j-MuiDivider-root"
               />
               <span
                 id="useId-0"
               >
                 <button
                   aria-labelledby="useId-0"
-                  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1aw3qf3-MuiButtonBase-root-MuiButton-root"
+                  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-om67xs-MuiButtonBase-root-MuiButton-root"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -116,15 +116,15 @@ exports[`renders an empty list correctly 1`] = `
           role="table"
         >
           <thead
-            className="MuiTableHead-root css-gitaq1-MuiTableHead-root"
+            className="MuiTableHead-root css-jwzar2-MuiTableHead-root"
             role={null}
           >
             <tr
-              className="MuiTableRow-root MuiTableRow-head css-1b9hsk7-MuiTableRow-root"
+              className="MuiTableRow-root MuiTableRow-head css-15lapfi-MuiTableRow-root"
               role="row"
             >
               <th
-                className="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-uzyimr-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-2e57lc-MuiTableCell-root"
                 scope="col"
                 style={
                   {
@@ -140,7 +140,7 @@ exports[`renders an empty list correctly 1`] = `
               </th>
               <th
                 aria-sort="ascending"
-                className="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-1ts7or6-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-ixv4xv-MuiTableCell-root"
                 scope="col"
                 style={
                   {
@@ -212,7 +212,7 @@ exports[`renders an empty list correctly 1`] = `
                 </button>
               </th>
               <th
-                className="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-uzyimr-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-head MuiTableCell-sizeMedium css-2e57lc-MuiTableCell-root"
                 scope="col"
                 style={
                   {
@@ -240,12 +240,12 @@ exports[`renders an empty list correctly 1`] = `
             role="rowgroup"
           >
             <tr
-              className="MuiTableRow-root MuiTableRow-hover css-cn4v9y-MuiTableRow-root"
+              className="MuiTableRow-root MuiTableRow-hover css-15lapfi-MuiTableRow-root"
               role="row"
             >
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -254,7 +254,7 @@ exports[`renders an empty list correctly 1`] = `
                 >
                   <svg
                     aria-hidden={true}
-                    className="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeMedium css-1db085k-MuiSvgIcon-root"
+                    className="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeMedium css-1011y64-MuiSvgIcon-root"
                     data-testid="LabelIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -267,7 +267,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -299,7 +299,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -322,7 +322,7 @@ exports[`renders an empty list correctly 1`] = `
                   >
                     <button
                       aria-labelledby="useId-1"
-                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1c5tps-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -372,7 +372,7 @@ exports[`renders an empty list correctly 1`] = `
                   >
                     <button
                       aria-labelledby="useId-2"
-                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1c5tps-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -410,12 +410,12 @@ exports[`renders an empty list correctly 1`] = `
               </td>
             </tr>
             <tr
-              className="MuiTableRow-root MuiTableRow-hover css-cn4v9y-MuiTableRow-root"
+              className="MuiTableRow-root MuiTableRow-hover css-15lapfi-MuiTableRow-root"
               role="row"
             >
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -424,7 +424,7 @@ exports[`renders an empty list correctly 1`] = `
                 >
                   <svg
                     aria-hidden={true}
-                    className="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeMedium css-1db085k-MuiSvgIcon-root"
+                    className="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeMedium css-1011y64-MuiSvgIcon-root"
                     data-testid="LabelIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -437,7 +437,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -469,7 +469,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -492,7 +492,7 @@ exports[`renders an empty list correctly 1`] = `
                   >
                     <button
                       aria-labelledby="useId-3"
-                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1c5tps-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -542,7 +542,7 @@ exports[`renders an empty list correctly 1`] = `
                   >
                     <button
                       aria-labelledby="useId-4"
-                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1c5tps-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -580,12 +580,12 @@ exports[`renders an empty list correctly 1`] = `
               </td>
             </tr>
             <tr
-              className="MuiTableRow-root MuiTableRow-hover css-cn4v9y-MuiTableRow-root"
+              className="MuiTableRow-root MuiTableRow-hover css-15lapfi-MuiTableRow-root"
               role="row"
             >
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -594,7 +594,7 @@ exports[`renders an empty list correctly 1`] = `
                 >
                   <svg
                     aria-hidden={true}
-                    className="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeMedium css-1db085k-MuiSvgIcon-root"
+                    className="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeMedium css-1011y64-MuiSvgIcon-root"
                     data-testid="LabelIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -607,7 +607,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -639,7 +639,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -662,7 +662,7 @@ exports[`renders an empty list correctly 1`] = `
                   >
                     <button
                       aria-labelledby="useId-5"
-                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1c5tps-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -712,7 +712,7 @@ exports[`renders an empty list correctly 1`] = `
                   >
                     <button
                       aria-labelledby="useId-6"
-                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1c5tps-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -750,12 +750,12 @@ exports[`renders an empty list correctly 1`] = `
               </td>
             </tr>
             <tr
-              className="MuiTableRow-root MuiTableRow-hover css-cn4v9y-MuiTableRow-root"
+              className="MuiTableRow-root MuiTableRow-hover css-15lapfi-MuiTableRow-root"
               role="row"
             >
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -764,7 +764,7 @@ exports[`renders an empty list correctly 1`] = `
                 >
                   <svg
                     aria-hidden={true}
-                    className="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeMedium css-1db085k-MuiSvgIcon-root"
+                    className="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeMedium css-1011y64-MuiSvgIcon-root"
                     data-testid="LabelIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -777,7 +777,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -809,7 +809,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -832,7 +832,7 @@ exports[`renders an empty list correctly 1`] = `
                   >
                     <button
                       aria-labelledby="useId-7"
-                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1c5tps-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -882,7 +882,7 @@ exports[`renders an empty list correctly 1`] = `
                   >
                     <button
                       aria-labelledby="useId-8"
-                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1c5tps-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -920,12 +920,12 @@ exports[`renders an empty list correctly 1`] = `
               </td>
             </tr>
             <tr
-              className="MuiTableRow-root MuiTableRow-hover css-cn4v9y-MuiTableRow-root"
+              className="MuiTableRow-root MuiTableRow-hover css-15lapfi-MuiTableRow-root"
               role="row"
             >
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -934,7 +934,7 @@ exports[`renders an empty list correctly 1`] = `
                 >
                   <svg
                     aria-hidden={true}
-                    className="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeMedium css-1db085k-MuiSvgIcon-root"
+                    className="MuiSvgIcon-root MuiSvgIcon-colorDisabled MuiSvgIcon-fontSizeMedium css-1011y64-MuiSvgIcon-root"
                     data-testid="LabelIcon"
                     focusable="false"
                     viewBox="0 0 24 24"
@@ -947,7 +947,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -979,7 +979,7 @@ exports[`renders an empty list correctly 1`] = `
               </td>
               <td
                 aria-sort={null}
-                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-iiibbc-MuiTableCell-root"
+                className="MuiTableCell-root MuiTableCell-body MuiTableCell-sizeMedium css-mu6r09-MuiTableCell-root"
                 role="cell"
               >
                 <div
@@ -1002,7 +1002,7 @@ exports[`renders an empty list correctly 1`] = `
                   >
                     <button
                       aria-labelledby="useId-9"
-                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1c5tps-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
@@ -1052,7 +1052,7 @@ exports[`renders an empty list correctly 1`] = `
                   >
                     <button
                       aria-labelledby="useId-10"
-                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                      className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge css-1c5tps-MuiButtonBase-root-MuiIconButton-root"
                       disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
diff --git a/frontend/src/component/user/Profile/ProfileTab/ProfileTab.tsx b/frontend/src/component/user/Profile/ProfileTab/ProfileTab.tsx
index 3825d2a386..cc5ec1491f 100644
--- a/frontend/src/component/user/Profile/ProfileTab/ProfileTab.tsx
+++ b/frontend/src/component/user/Profile/ProfileTab/ProfileTab.tsx
@@ -27,7 +27,7 @@ const StyledHeader = styled('div')(({ theme }) => ({
     padding: theme.spacing(6),
     borderRadius: theme.shape.borderRadiusLarge,
     backgroundColor: theme.palette.primary.main,
-    color: theme.palette.text.tertiaryContrast,
+    color: theme.palette.primary.contrastText,
     marginBottom: theme.spacing(3),
     boxShadow: theme.boxShadows.primaryHeader,
 }));
@@ -77,7 +77,7 @@ const StyledFormControl = styled(FormControl)(({ theme }) => ({
 }));
 
 const StyledInputLabel = styled(InputLabel)(({ theme }) => ({
-    backgroundColor: theme.palette.inputLabelBackground,
+    backgroundColor: theme.palette.background.paper,
 }));
 
 interface IProfileTabProps {
diff --git a/frontend/src/component/user/StandaloneBanner.tsx b/frontend/src/component/user/StandaloneBanner.tsx
index 8c542bec41..033aba2def 100644
--- a/frontend/src/component/user/StandaloneBanner.tsx
+++ b/frontend/src/component/user/StandaloneBanner.tsx
@@ -86,8 +86,8 @@ const StandaloneBanner: FC<IStandaloneBannerProps> = ({ title }) => {
 
     return (
         <StyledGradient
-            from={theme.palette.standaloneBannerGradient.from}
-            to={theme.palette.standaloneBannerGradient.to}
+            from={theme.palette.loginGradient.from}
+            to={theme.palette.loginGradient.to}
         >
             <StyledContainer>
                 <StyledTitle variant="h1">{title}</StyledTitle>
diff --git a/frontend/src/component/user/common/StandaloneLayout.tsx b/frontend/src/component/user/common/StandaloneLayout.tsx
index 86b551b49f..03d83378fa 100644
--- a/frontend/src/component/user/common/StandaloneLayout.tsx
+++ b/frontend/src/component/user/common/StandaloneLayout.tsx
@@ -9,7 +9,7 @@ interface IStandaloneLayout {
 
 const StyledContainer = styled('div')(({ theme }) => ({
     padding: theme.spacing(11),
-    background: theme.palette.standaloneBackground,
+    background: theme.palette.background.application,
     display: 'flex',
     [theme.breakpoints.down('md')]: {
         flexDirection: 'column',
diff --git a/frontend/src/themes/colors.ts b/frontend/src/themes/colors.ts
index 3c115fd241..45a7fe10f7 100644
--- a/frontend/src/themes/colors.ts
+++ b/frontend/src/themes/colors.ts
@@ -4,8 +4,6 @@
  * @see https://www.figma.com/file/qdwpPfuitJUNinm6mvmCmG/Unleash-application?node-id=7175%3A44590
  */
 export const colors = {
-    white: '#FFFFFF',
-    black: '#000000',
     grey: {
         900: '#202021',
         800: '#6E6E70',
@@ -18,7 +16,17 @@ export const colors = {
         100: '#F7F7FA',
         50: '#FFFFFF',
     },
+    // In MUI there colors are used with transparency, and we keep them here for a better overview
+    // We can use there for other places if needed
+    action: {
+        0.54: 'rgba(25, 24, 41, 0.54)',
+        0.32: 'rgba(25, 24, 41, 0.32)',
+        0.12: 'rgba(25, 24, 41, 0.12)',
+        0.08: 'rgba(25, 24, 41, 0.08)',
+        0.05: 'rgba(25, 24, 41, 0.05)',
+    },
     purple: {
+        950: '#4944a7',
         900: '#615BC2',
         800: '#6C65E5',
         700: '#817AFE',
diff --git a/frontend/src/themes/dark-theme.ts b/frontend/src/themes/dark-theme.ts
index 07ac3042f5..a08487cb7d 100644
--- a/frontend/src/themes/dark-theme.ts
+++ b/frontend/src/themes/dark-theme.ts
@@ -1,13 +1,6 @@
 import { createTheme } from '@mui/material/styles';
 import { colors } from './colors';
 
-const themeColors = {
-    main: colors.darkblue[900],
-    secondary: colors.darkblue[800],
-    textColor: '#ffffffe6',
-    hover: 'rgb(255, 255, 255, 0.7)',
-};
-
 export default createTheme({
     breakpoints: {
         values: {
@@ -36,6 +29,10 @@ export default createTheme({
             fontSize: '1.5rem',
             lineHeight: 1.875,
         },
+        h2: {
+            fontSize: `${20 / 16}rem`,
+            fontWeight: '700',
+        },
         h3: {
             fontSize: '1rem',
             fontWeight: '700',
@@ -45,7 +42,7 @@ export default createTheme({
         },
     },
     fontSizes: {
-        largeHeader: '2.25rem',
+        largeHeader: '2rem',
         mainHeader: '1.25rem',
         bodySize: '1rem',
         smallBody: `${14 / 16}rem`,
@@ -66,287 +63,312 @@ export default createTheme({
         tableRowHeightCompact: 56,
         tableRowHeightDense: 48,
     },
+
     palette: {
-        primary: {
-            main: themeColors.textColor,
-            light: colors.purple[700],
-            dark: colors.purple[900],
+        common: {
+            // Used for text color
+            white: colors.grey[50],
         },
-        secondary: {
+        text: {
+            primary: colors.grey[900],
+            secondary: colors.grey[800],
+            disabled: colors.grey[600],
+        },
+        primary: {
             main: colors.purple[800],
             light: colors.purple[700],
             dark: colors.purple[900],
+            contrastText: colors.grey[50], // Color used for content when primary.main is used as a background
+        },
+        secondary: {
+            // Used for purple badges and puple light elements
+            light: colors.purple[50],
+            main: colors.purple[800],
+            dark: colors.purple[900],
+            border: colors.purple[300],
         },
         info: {
             light: colors.blue[50],
             main: colors.blue[500],
             dark: colors.blue[700],
+            contrastText: colors.grey[50], // Color used for content when info.main is used as a background
             border: colors.blue[200],
         },
         success: {
             light: colors.green[50],
             main: colors.green[600],
-            dark: themeColors.main,
+            dark: colors.green[800],
+            contrastText: colors.grey[50], // Color used for content when success.main is used as a background
             border: colors.green[300],
         },
         warning: {
             light: colors.orange[100],
             main: colors.orange[800],
             dark: colors.orange[900],
+            contrastText: colors.grey[50], // Color used for content when warning.main is used as a background
             border: colors.orange[500],
         },
         error: {
             light: colors.red[50],
             main: colors.red[700],
             dark: colors.red[800],
+            contrastText: colors.grey[50], // Color used for content when error.main is used as a background
             border: colors.red[300],
         },
-        background: {
-            paper: themeColors.main,
-        },
-        divider: themeColors.secondary,
-        dividerAlternative: colors.grey[400],
-        tableHeaderHover: colors.darkblue[700],
-        tableHeaderBackground: themeColors.secondary,
-        tableHeaderColor: themeColors.textColor,
-        highlight: '#FFEACC',
-        secondaryContainer: themeColors.secondary,
-        contentWrapper: colors.darkblue[800],
-        formBackground: themeColors.main,
-        formSidebar: colors.darkblue[1000],
-        headerBackground: themeColors.main,
-        footerBackground: themeColors.main,
-        sidebarContainer: 'rgba(32,32,33, 0.2)',
-        codebox: colors.darkblue[600],
-        featureMetaData: colors.darkblue[1000],
-        playgroundBackground: colors.darkblue[600],
-        playgroundFormBackground: themeColors.secondary,
-        standaloneBackground: colors.black,
-        featureStrategySegmentChipBackground: themeColors.secondary,
-        featureSegmentSearchBackground: themeColors.secondary,
-        dialogHeaderBackground: themeColors.secondary,
-        dialogHeaderText: themeColors.textColor,
-        lightBorder: colors.darkblue[500],
-        constraintAccordion: {
-            editBackground: colors.darkblue[600],
-            background: themeColors.secondary,
-            operatorBackground: themeColors.main,
-        },
-        standaloneBannerGradient: {
-            from: colors.darkblue[1000],
-            to: colors.black,
-        },
-        projectCard: {
-            hover: themeColors.secondary,
-            textColor: themeColors.textColor,
-        },
-        formSidebarTextColor: themeColors.textColor,
-        checkmarkBadge: themeColors.secondary,
-        inputLabelBackground: 'transparent',
-        grey: colors.grey,
-        text: {
-            primary: themeColors.textColor,
-            secondary: colors.grey[800],
-            disabled: colors.grey[600],
-        },
-        code: {
-            main: '#0b8c8f',
-            diffAdd: 'green',
-            diffSub: 'red',
-            diffNeutral: 'black',
-            edited: 'blue',
-        },
+
+        /**
+         *  Used for grey badges, hover elements, and grey light elements
+         */
         neutral: {
-            light: colors.darkblue[500],
+            light: colors.grey[100],
             main: colors.grey[700],
             dark: colors.grey[800],
-            border: colors.grey[500],
+            border: colors.grey[400],
         },
-        activityIndicators: {
-            primary: themeColors.secondary,
-            unknown: themeColors.secondary,
-            recent: themeColors.secondary,
-            inactive: themeColors.secondary,
-            abandoned: themeColors.secondary,
+
+        background: {
+            paper: colors.grey[50],
+            default: colors.grey[50],
+            application: colors.grey[300],
+            sidebar: colors.purple[800],
+            elevation1: colors.grey[100],
+            elevation2: colors.grey[200],
         },
-        tertiary: {
-            light: themeColors.secondary,
-            main: colors.grey[400],
-            dark: colors.grey[600],
-            background: 'white',
-            contrast: colors.grey[300],
+
+        action: {
+            // Colors used for Icons and Buttons -> this comes from MUI and we overwriting it with our colors
+            active: colors.action[0.54],
+            hover: colors.action[0.05],
+            hoverOpacity: 0.05,
+            selected: colors.action[0.08],
+            selectedOpacity: 0.08,
+            disabled: colors.action[0.32],
+            disabledBackground: colors.action[0.12],
+            disabledOpacity: 0.38,
+            focus: colors.action[0.12],
+            focusOpacity: 0.12,
+            activatedOpacity: 0.12,
+        },
+
+        /**
+         * General divider
+         */
+        divider: colors.grey[400],
+
+        /**
+         * Table colors.
+         */
+        table: {
+            headerColor: colors.grey[900], //New - Is needed? ###CHECK
+            headerBackground: colors.grey[200],
+            headerHover: colors.grey[300],
+            divider: colors.grey[300],
+            rowHover: colors.grey[100],
+        },
+
+        /**
+         * Text highlight effect color. Used when filtering/searching over content.
+         */
+        highlight: colors.orange[200],
+
+        /**
+         * Background color used for the API command in the sidebar
+         */
+        codebox: colors.action[0.12],
+
+        /**
+         * Gradient for the login page
+         */
+        loginGradient: {
+            from: colors.purple[800],
+            to: colors.purple[950],
+        },
+
+        /**
+         * Colors for event log output.
+         */
+        eventLog: {
+            diffAdd: colors.green[800],
+            diffSub: colors.red[800],
+            edited: colors.grey[900],
+        },
+
+        /**
+         * For 'Seen' column on feature toggles list and other.
+         */
+        seen: {
+            unknown: colors.grey[100],
+            recent: colors.green[100],
+            inactive: colors.orange[200],
+            abandoned: colors.red[200],
+            primary: colors.purple[100],
         },
-        inactiveIcon: colors.grey[600],
     },
+
     components: {
-        MuiAppBar: {
-            styleOverrides: {
-                root: {
-                    color: themeColors.textColor,
-                },
-            },
-        },
-        MuiInputLabel: {
-            styleOverrides: {
-                root: {
-                    color: themeColors.textColor,
-                },
-            },
-        },
-        MuiIconButton: {
-            styleOverrides: {
-                root: {
-                    color: colors.white,
-                    '&:hover': {
-                        backgroundColor: themeColors.hover,
-                    },
-                    '&.Mui-disabled': {
-                        '& .MuiSvgIcon-root': {
-                            color: colors.grey[700],
-                        },
-                    },
-                },
-            },
-        },
+        // Links
         MuiLink: {
             styleOverrides: {
-                root: {
-                    color: colors.white,
+                root: ({ theme }) => ({
+                    color: theme.palette.primary.dark,
                     '&:hover': {
                         textDecoration: 'none',
                     },
-                },
+                }),
             },
         },
+
+        // Breadcrumb
         MuiBreadcrumbs: {
             styleOverrides: {
-                root: {
-                    color: themeColors.textColor,
+                root: ({ theme }) => ({
+                    color: theme.palette.text.primary,
                     fontSize: '0.875rem',
                     '& a': {
-                        color: themeColors.textColor,
-                        textDecoration: 'underline',
+                        color: theme.palette.primary.dark,
+                        textDecoration: 'none',
                         '&:hover': {
-                            textDecoration: 'none',
+                            textDecoration: 'underline',
                         },
                     },
-                },
+                }),
             },
         },
+
+        // Tables
         MuiTableHead: {
             styleOverrides: {
-                root: {
-                    background: 'transparent',
+                root: ({ theme }) => ({
+                    // background: 'transparent',
                     '& th': {
-                        background: colors.grey[200],
+                        height: theme.shape.tableRowHeightCompact,
+                        backgroundColor: theme.palette.table.headerBackground,
+                        border: 0,
+                        '&:first-of-type': {
+                            borderTopLeftRadius: theme.shape.borderRadiusMedium,
+                            borderBottomLeftRadius:
+                                theme.shape.borderRadiusMedium,
+                        },
+                        '&:last-of-type': {
+                            borderTopRightRadius:
+                                theme.shape.borderRadiusMedium,
+                            borderBottomRightRadius:
+                                theme.shape.borderRadiusMedium,
+                        },
                     },
-                },
+                }),
             },
         },
         MuiTableRow: {
             styleOverrides: {
-                root: {
-                    '&.MuiTableRow-hover:hover': {
-                        background: themeColors.secondary,
+                root: ({ theme }) => ({
+                    '&.MuiTableRow-root:hover': {
+                        //Not all the tables have row hover background. This will add background color on row hover for all the tables
+                        background: theme.palette.table.rowHover, //overwrite action.hover
                     },
-                },
+                }),
             },
         },
         MuiTableCell: {
             styleOverrides: {
-                root: {
-                    borderBottomColor: themeColors.main,
-                },
+                root: ({ theme }) => ({
+                    borderBottomColor: theme.palette.table.divider,
+                }),
             },
         },
+
+        // Alerts
         MuiAlert: {
             styleOverrides: {
-                root: {
-                    borderRadius: '8px',
+                root: ({ theme }) => ({
+                    borderRadius: theme.shape.borderRadiusMedium,
                     a: {
                         color: 'inherit',
                     },
                     '&.MuiAlert-standardInfo': {
-                        backgroundColor: colors.blue[50],
-                        color: colors.blue[700],
-                        border: `1px solid ${colors.blue[200]}`,
-                        '& .MuiAlert-icon .MuiSvgIcon-root': {
-                            color: colors.blue[500],
+                        backgroundColor: theme.palette.info.light,
+                        color: theme.palette.info.dark,
+                        border: `1px solid ${theme.palette.info.border}`,
+                        '& .MuiAlert-icon': {
+                            color: theme.palette.info.main,
                         },
                     },
                     '&.MuiAlert-standardSuccess': {
-                        backgroundColor: colors.green[50],
-                        color: colors.green[800],
-                        border: `1px solid ${colors.green[300]}`,
-                        '& .MuiAlert-icon .MuiSvgIcon-root': {
-                            color: colors.green[500],
+                        backgroundColor: theme.palette.success.light,
+                        color: theme.palette.success.dark,
+                        border: `1px solid ${theme.palette.success.border}`,
+                        '& .MuiAlert-icon': {
+                            color: theme.palette.success.main,
                         },
                     },
                     '&.MuiAlert-standardWarning': {
-                        backgroundColor: colors.orange[100],
-                        color: colors.orange[900],
-                        border: `1px solid ${colors.orange[500]}`,
-                        '& .MuiAlert-icon .MuiSvgIcon-root': {
-                            color: colors.orange[800],
+                        backgroundColor: theme.palette.warning.light,
+                        color: theme.palette.warning.dark,
+                        border: `1px solid ${theme.palette.warning.border}`,
+                        '& .MuiAlert-icon': {
+                            color: theme.palette.warning.main,
                         },
                     },
                     '&.MuiAlert-standardError': {
-                        backgroundColor: colors.red[50],
-                        color: colors.red[800],
-                        border: `1px solid ${colors.red[300]}`,
-                        '& .MuiAlert-icon .MuiSvgIcon-root': {
-                            color: colors.red[700],
+                        backgroundColor: theme.palette.error.light,
+                        color: theme.palette.error.dark,
+                        border: `1px solid ${theme.palette.error.border}`,
+                        '& .MuiAlert-icon': {
+                            color: theme.palette.error.main,
                         },
                     },
-                },
-            },
-        },
-        MuiButton: {
-            styleOverrides: {
-                root: {
-                    '&.Mui-disabled': {
-                        backgroundColor: colors.grey[400],
-                    },
-                },
-            },
-        },
-        MuiSvgIcon: {
-            styleOverrides: {
-                root: {
-                    color: themeColors.textColor,
-                },
+                }),
             },
         },
+
+        // Horizontal menu tabs
         MuiTabs: {
             styleOverrides: {
-                root: {
-                    backgroundColor: themeColors.main,
-                    color: themeColors.textColor,
+                root: ({ theme }) => ({
                     '& .MuiTabs-indicator': {
                         height: '4px',
                     },
-                },
+                    '& .MuiTabs-flexContainer': {
+                        minHeight: '70px',
+                        maxHeight: '70px',
+                    },
+                }),
             },
         },
         MuiTab: {
             styleOverrides: {
-                root: {
-                    color: themeColors.textColor,
+                root: ({ theme }) => ({
+                    color: theme.palette.text.primary,
                     fontSize: '1rem',
                     textTransform: 'none',
                     fontWeight: 400,
+                    lineHeight: '1',
                     minHeight: '62px',
                     '&:hover': {
-                        backgroundColor: themeColors.secondary,
+                        backgroundColor: theme.palette.background.elevation2,
                     },
                     '&.Mui-selected': {
-                        color: themeColors.textColor,
+                        color: theme.palette.text.primary,
                         fontWeight: 700,
                     },
                     '& > span': {
-                        color: colors.purple[900],
+                        color: theme.palette.primary.main, //Based on this color is created the focus color/effect
                     },
-                },
+                    [theme.breakpoints.down('md')]: {
+                        padding: '12px 0px',
+                    },
+                }),
+            },
+        },
+
+        // Constraint accordion / cards
+        MuiAccordion: {
+            styleOverrides: {
+                root: ({ theme }) => ({
+                    '&:first-of-type, &:last-of-type': {
+                        borderRadius: theme.shape.borderRadiusMedium,
+                    },
+                }),
             },
         },
         MuiAccordionSummary: {
@@ -355,67 +377,476 @@ export default createTheme({
                     '& > .MuiAccordionSummary-content.Mui-expanded': {
                         margin: '12px 0',
                     },
+                    '&.Mui-expanded': {
+                        minHeight: '0',
+                    },
                 },
             },
         },
+
+        // Project overview, improve toggle/switch disabled focus effect color
         MuiSwitch: {
             styleOverrides: {
-                switchBase: {
+                root: ({ theme }) => ({
                     zIndex: 1,
                     '&:not(.Mui-checked) .MuiTouchRipple-child': {
-                        color: colors.grey['500'],
+                        color: theme.palette.neutral.border,
                     },
-                },
-            },
-        },
-        MuiIcon: {
-            styleOverrides: {
-                root: {
-                    color: colors.white,
-                },
-                colorDisabled: {
-                    color: colors.white[600],
-                },
-            },
-        },
-        MuiMenu: {
-            styleOverrides: {
-                root: {
-                    '.MuiMenu-list': {
-                        backgroundColor: colors.darkblue[600],
-                    },
-                },
+                }),
             },
         },
+
+        // Overwiteing the action.disabledOpacity from MU
         MuiMenuItem: {
             styleOverrides: {
                 root: {
                     '&.Mui-disabled': {
                         opacity: 0.66,
                     },
-                    '&:hover': {
-                        backgroundColor: themeColors.secondary,
-                    },
                 },
             },
         },
+
+        // Inputs background - This is used when we have inputs on a grey background (e.g. edit contstraints, playground)
         MuiInputBase: {
             styleOverrides: {
-                root: {
-                    backgroundColor: colors.darkblue[1000],
-                    '.MuiSvgIcon-root': {
-                        color: '#fff',
-                    },
-                },
+                root: ({ theme }) => ({
+                    backgroundColor: theme.palette.background.paper,
+                }),
             },
         },
-        MuiPaper: {
+
+        // Top menu text color
+        MuiAppBar: {
             styleOverrides: {
-                root: {
-                    backgroundColor: themeColors.main,
-                    color: themeColors.textColor,
-                },
+                root: ({ theme }) => ({
+                    color: theme.palette.text.primary,
+                }),
             },
         },
     },
 });
+
+// Old dark theme below:
+
+// import { createTheme } from '@mui/material/styles';
+// import { colors } from './colors';
+
+// const themeColors = {
+//     main: colors.darkblue[900],
+//     secondary: colors.darkblue[800],
+//     textColor: '#ffffffe6',
+//     hover: 'rgb(255, 255, 255, 0.7)',
+// };
+
+// export default createTheme({
+//     breakpoints: {
+//         values: {
+//             xs: 0,
+//             sm: 600,
+//             md: 960,
+//             lg: 1260,
+//             xl: 1536,
+//         },
+//     },
+//     boxShadows: {
+//         main: '0px 2px 4px rgba(129, 122, 254, 0.2)',
+//         card: '0px 2px 10px rgba(28, 25, 78, 0.12)',
+//         elevated: '0px 1px 20px rgba(45, 42, 89, 0.1)',
+//         popup: '0px 2px 6px rgba(0, 0, 0, 0.25)',
+//         primaryHeader: '0px 8px 24px rgba(97, 91, 194, 0.2)',
+//         separator: '0px 2px 3px hsl(0deg 0% 78% / 50%)',
+//     },
+//     typography: {
+//         fontFamily: 'Sen, Roboto, sans-serif',
+//         fontWeightBold: '700',
+//         fontWeightMedium: '700',
+//         allVariants: { lineHeight: 1.4 },
+//         button: { lineHeight: 1.75 },
+//         h1: {
+//             fontSize: '1.5rem',
+//             lineHeight: 1.875,
+//         },
+//         h3: {
+//             fontSize: '1rem',
+//             fontWeight: '700',
+//         },
+//         caption: {
+//             fontSize: `${12 / 16}rem`,
+//         },
+//     },
+//     fontSizes: {
+//         largeHeader: '2.25rem',
+//         mainHeader: '1.25rem',
+//         bodySize: '1rem',
+//         smallBody: `${14 / 16}rem`,
+//         smallerBody: `${12 / 16}rem`,
+//     },
+//     fontWeight: {
+//         thin: 300,
+//         medium: 400,
+//         semi: 700,
+//         bold: 700,
+//     },
+//     shape: {
+//         borderRadius: 4,
+//         borderRadiusMedium: 8,
+//         borderRadiusLarge: 12,
+//         borderRadiusExtraLarge: 20,
+//         tableRowHeight: 64,
+//         tableRowHeightCompact: 56,
+//         tableRowHeightDense: 48,
+//     },
+//     palette: {
+//         primary: {
+//             main: themeColors.textColor,
+//             light: colors.purple[700],
+//             dark: colors.purple[900],
+//         },
+//         secondary: {
+//             main: colors.purple[800],
+//             light: colors.purple[700],
+//             dark: colors.purple[900],
+//         },
+//         info: {
+//             light: colors.blue[50],
+//             main: colors.blue[500],
+//             dark: colors.blue[700],
+//             border: colors.blue[200],
+//         },
+//         success: {
+//             light: colors.green[50],
+//             main: colors.green[600],
+//             dark: themeColors.main,
+//             border: colors.green[300],
+//         },
+//         warning: {
+//             light: colors.orange[100],
+//             main: colors.orange[800],
+//             dark: colors.orange[900],
+//             border: colors.orange[500],
+//         },
+//         error: {
+//             light: colors.red[50],
+//             main: colors.red[700],
+//             dark: colors.red[800],
+//             border: colors.red[300],
+//         },
+//         background: {
+//             paper: themeColors.main,
+//         },
+//         divider: themeColors.secondary,
+//         // dividerAlternative: colors.grey[400],
+//         tableHeaderHover: colors.darkblue[700],
+//         tableHeaderBackground: themeColors.secondary,
+//         tableHeaderColor: themeColors.textColor,
+//         highlight: '#FFEACC',
+//         secondaryContainer: themeColors.secondary,
+//         contentWrapper: colors.darkblue[800],
+//         formBackground: themeColors.main,
+//         formSidebar: colors.darkblue[1000],
+//         headerBackground: themeColors.main,
+//         footerBackground: themeColors.main,
+//         sidebarContainer: 'rgba(32,32,33, 0.2)',
+//         codebox: colors.darkblue[600],
+//         featureMetaData: colors.darkblue[1000],
+//         playgroundBackground: colors.darkblue[600],
+//         playgroundFormBackground: themeColors.secondary,
+//         standaloneBackground: colors.black,
+//         featureStrategySegmentChipBackground: themeColors.secondary,
+//         featureSegmentSearchBackground: themeColors.secondary,
+//         dialogHeaderBackground: themeColors.secondary,
+//         dialogHeaderText: themeColors.textColor,
+//         lightBorder: colors.darkblue[500],
+//         constraintAccordion: {
+//             editBackground: colors.darkblue[600],
+//             background: themeColors.secondary,
+//             operatorBackground: themeColors.main,
+//         },
+//         standaloneBannerGradient: {
+//             from: colors.darkblue[1000],
+//             to: colors.black,
+//         },
+//         projectCard: {
+//             hover: themeColors.secondary,
+//             textColor: themeColors.textColor,
+//         },
+//         formSidebarTextColor: themeColors.textColor,
+//         checkmarkBadge: themeColors.secondary,
+//         inputLabelBackground: 'transparent',
+//         grey: colors.grey,
+//         text: {
+//             primary: themeColors.textColor,
+//             secondary: colors.grey[800],
+//             disabled: colors.grey[600],
+//         },
+//         code: {
+//             main: '#0b8c8f',
+//             diffAdd: 'green',
+//             diffSub: 'red',
+//             diffNeutral: 'black',
+//             edited: 'blue',
+//         },
+//         neutral: {
+//             light: colors.darkblue[500],
+//             main: colors.grey[700],
+//             dark: colors.grey[800],
+//             border: colors.grey[500],
+//         },
+//         activityIndicators: {
+//             primary: themeColors.secondary,
+//             unknown: themeColors.secondary,
+//             recent: themeColors.secondary,
+//             inactive: themeColors.secondary,
+//             abandoned: themeColors.secondary,
+//         },
+//         // tertiary: {
+//         //     light: themeColors.secondary,
+//         //     main: colors.grey[400],
+//         //     dark: colors.grey[600],
+//         //     background: 'white',
+//         //     contrast: colors.grey[300],
+//         // },
+//         inactiveIcon: colors.grey[600],
+//     },
+//     components: {
+//         MuiAppBar: {
+//             styleOverrides: {
+//                 root: {
+//                     color: themeColors.textColor,
+//                 },
+//             },
+//         },
+//         MuiInputLabel: {
+//             styleOverrides: {
+//                 root: {
+//                     color: themeColors.textColor,
+//                 },
+//             },
+//         },
+//         MuiIconButton: {
+//             styleOverrides: {
+//                 root: {
+//                     color: colors.grey[50],
+//                     '&:hover': {
+//                         backgroundColor: themeColors.hover,
+//                     },
+//                     '&.Mui-disabled': {
+//                         '& .MuiSvgIcon-root': {
+//                             color: colors.grey[700],
+//                         },
+//                     },
+//                 },
+//             },
+//         },
+//         MuiLink: {
+//             styleOverrides: {
+//                 root: {
+//                     color: colors.grey[50],
+//                     '&:hover': {
+//                         textDecoration: 'none',
+//                     },
+//                 },
+//             },
+//         },
+//         MuiBreadcrumbs: {
+//             styleOverrides: {
+//                 root: {
+//                     color: themeColors.textColor,
+//                     fontSize: '0.875rem',
+//                     '& a': {
+//                         color: themeColors.textColor,
+//                         textDecoration: 'underline',
+//                         '&:hover': {
+//                             textDecoration: 'none',
+//                         },
+//                     },
+//                 },
+//             },
+//         },
+//         MuiTableHead: {
+//             styleOverrides: {
+//                 root: {
+//                     background: 'transparent',
+//                     '& th': {
+//                         background: colors.grey[200],
+//                     },
+//                 },
+//             },
+//         },
+//         MuiTableRow: {
+//             styleOverrides: {
+//                 root: {
+//                     '&.MuiTableRow-hover:hover': {
+//                         background: themeColors.secondary,
+//                     },
+//                 },
+//             },
+//         },
+//         MuiTableCell: {
+//             styleOverrides: {
+//                 root: {
+//                     borderBottomColor: themeColors.main,
+//                 },
+//             },
+//         },
+//         MuiAlert: {
+//             styleOverrides: {
+//                 root: {
+//                     borderRadius: '8px',
+//                     a: {
+//                         color: 'inherit',
+//                     },
+//                     '&.MuiAlert-standardInfo': {
+//                         backgroundColor: colors.blue[50],
+//                         color: colors.blue[700],
+//                         border: `1px solid ${colors.blue[200]}`,
+//                         '& .MuiAlert-icon .MuiSvgIcon-root': {
+//                             color: colors.blue[500],
+//                         },
+//                     },
+//                     '&.MuiAlert-standardSuccess': {
+//                         backgroundColor: colors.green[50],
+//                         color: colors.green[800],
+//                         border: `1px solid ${colors.green[300]}`,
+//                         '& .MuiAlert-icon .MuiSvgIcon-root': {
+//                             color: colors.green[500],
+//                         },
+//                     },
+//                     '&.MuiAlert-standardWarning': {
+//                         backgroundColor: colors.orange[100],
+//                         color: colors.orange[900],
+//                         border: `1px solid ${colors.orange[500]}`,
+//                         '& .MuiAlert-icon .MuiSvgIcon-root': {
+//                             color: colors.orange[800],
+//                         },
+//                     },
+//                     '&.MuiAlert-standardError': {
+//                         backgroundColor: colors.red[50],
+//                         color: colors.red[800],
+//                         border: `1px solid ${colors.red[300]}`,
+//                         '& .MuiAlert-icon .MuiSvgIcon-root': {
+//                             color: colors.red[700],
+//                         },
+//                     },
+//                 },
+//             },
+//         },
+//         MuiButton: {
+//             styleOverrides: {
+//                 root: {
+//                     '&.Mui-disabled': {
+//                         backgroundColor: colors.grey[400],
+//                     },
+//                 },
+//             },
+//         },
+//         MuiSvgIcon: {
+//             styleOverrides: {
+//                 root: {
+//                     color: themeColors.textColor,
+//                 },
+//             },
+//         },
+//         MuiTabs: {
+//             styleOverrides: {
+//                 root: {
+//                     backgroundColor: themeColors.main,
+//                     color: themeColors.textColor,
+//                     '& .MuiTabs-indicator': {
+//                         height: '4px',
+//                     },
+//                 },
+//             },
+//         },
+//         MuiTab: {
+//             styleOverrides: {
+//                 root: {
+//                     color: themeColors.textColor,
+//                     fontSize: '1rem',
+//                     textTransform: 'none',
+//                     fontWeight: 400,
+//                     minHeight: '62px',
+//                     '&:hover': {
+//                         backgroundColor: themeColors.secondary,
+//                     },
+//                     '&.Mui-selected': {
+//                         color: themeColors.textColor,
+//                         fontWeight: 700,
+//                     },
+//                     '& > span': {
+//                         color: colors.purple[900],
+//                     },
+//                 },
+//             },
+//         },
+//         MuiAccordionSummary: {
+//             styleOverrides: {
+//                 root: {
+//                     '& > .MuiAccordionSummary-content.Mui-expanded': {
+//                         margin: '12px 0',
+//                     },
+//                 },
+//             },
+//         },
+//         MuiSwitch: {
+//             styleOverrides: {
+//                 switchBase: {
+//                     zIndex: 1,
+//                     '&:not(.Mui-checked) .MuiTouchRipple-child': {
+//                         color: colors.grey['500'],
+//                     },
+//                 },
+//             },
+//         },
+//         MuiIcon: {
+//             styleOverrides: {
+//                 root: {
+//                     color: colors.grey[50],
+//                 },
+//                 colorDisabled: {
+//                     color: colors.grey[50],
+//                 },
+//             },
+//         },
+//         MuiMenu: {
+//             styleOverrides: {
+//                 root: {
+//                     '.MuiMenu-list': {
+//                         backgroundColor: colors.darkblue[600],
+//                     },
+//                 },
+//             },
+//         },
+//         MuiMenuItem: {
+//             styleOverrides: {
+//                 root: {
+//                     '&.Mui-disabled': {
+//                         opacity: 0.66,
+//                     },
+//                     '&:hover': {
+//                         backgroundColor: themeColors.secondary,
+//                     },
+//                 },
+//             },
+//         },
+//         MuiInputBase: {
+//             styleOverrides: {
+//                 root: {
+//                     backgroundColor: colors.darkblue[1000],
+//                     '.MuiSvgIcon-root': {
+//                         color: '#fff',
+//                     },
+//                 },
+//             },
+//         },
+//         MuiPaper: {
+//             styleOverrides: {
+//                 root: {
+//                     backgroundColor: themeColors.main,
+//                     color: themeColors.textColor,
+//                 },
+//             },
+//         },
+//     },
+// });
diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
index c78e879de6..251e46a3bb 100644
--- a/frontend/src/themes/theme.ts
+++ b/frontend/src/themes/theme.ts
@@ -63,13 +63,25 @@ export default createTheme({
         tableRowHeightCompact: 56,
         tableRowHeightDense: 48,
     },
+
     palette: {
+        common: {
+            // Used for text color
+            white: colors.grey[50],
+        },
+        text: {
+            primary: colors.grey[900],
+            secondary: colors.grey[800],
+            disabled: colors.grey[600],
+        },
         primary: {
             main: colors.purple[800],
             light: colors.purple[700],
             dark: colors.purple[900],
+            contrastText: colors.grey[50], // Color used for content when primary.main is used as a background
         },
         secondary: {
+            // Used for purple badges and puple light elements
             light: colors.purple[50],
             main: colors.purple[800],
             dark: colors.purple[900],
@@ -79,195 +91,237 @@ export default createTheme({
             light: colors.blue[50],
             main: colors.blue[500],
             dark: colors.blue[700],
+            contrastText: colors.grey[50], // Color used for content when info.main is used as a background
             border: colors.blue[200],
         },
         success: {
             light: colors.green[50],
             main: colors.green[600],
             dark: colors.green[800],
+            contrastText: colors.grey[50], // Color used for content when success.main is used as a background
             border: colors.green[300],
         },
         warning: {
             light: colors.orange[100],
             main: colors.orange[800],
             dark: colors.orange[900],
+            contrastText: colors.grey[50], // Color used for content when warning.main is used as a background
             border: colors.orange[500],
         },
         error: {
             light: colors.red[50],
             main: colors.red[700],
             dark: colors.red[800],
+            contrastText: colors.grey[50], // Color used for content when error.main is used as a background
             border: colors.red[300],
         },
+
+        /**
+         *  Used for grey badges, hover elements, and grey light elements
+         */
         neutral: {
             light: colors.grey[100],
             main: colors.grey[700],
             dark: colors.grey[800],
-            border: colors.grey[500],
+            border: colors.grey[400],
         },
-        tertiary: {
-            light: colors.grey[200],
-            main: colors.grey[400],
-            dark: colors.grey[600],
-            background: 'white',
-            contrast: colors.grey[300],
+
+        background: {
+            paper: colors.grey[50],
+            default: colors.grey[50],
+            application: colors.grey[300],
+            sidebar: colors.purple[800],
+            elevation1: colors.grey[100],
+            elevation2: colors.grey[200],
         },
-        divider: colors.grey[300],
-        dividerAlternative: colors.grey[400],
-        tableHeaderHover: colors.grey[400],
-        tableHeaderBackground: colors.grey[200],
-        tableHeaderColor: colors.grey[900],
-        formSidebarTextColor: colors.white,
-        highlight: '#FFEACC',
-        secondaryContainer: colors.grey[200],
-        contentWrapper: colors.grey[300],
-        headerBackground: colors.white,
-        footerBackground: colors.white,
-        formBackground: colors.white,
-        formSidebar: colors.purple[800],
-        featureMetaData: colors.purple[800],
-        codebox: 'rgba(32,32,33, 0.2)',
-        sidebarContainer: 'rgba(32,32,33, 0.2)',
-        playgroundBackground: colors.grey[200],
-        playgroundFormBackground: colors.grey[200],
-        standaloneBackground: colors.grey[300],
-        constraintAccordion: {
-            editBackground: '#F6F6FA',
-            background: colors.white,
-            operatorBackground: colors.grey[200],
+
+        action: {
+            // Colors used for Icons and Buttons -> this comes from MUI and we overwriting it with our colors
+            active: colors.action[0.54],
+            hover: colors.action[0.05],
+            hoverOpacity: 0.05,
+            selected: colors.action[0.08],
+            selectedOpacity: 0.08,
+            disabled: colors.action[0.32],
+            disabledBackground: colors.action[0.12],
+            disabledOpacity: 0.38,
+            focus: colors.action[0.12],
+            focusOpacity: 0.12,
+            activatedOpacity: 0.12,
         },
-        projectCard: {
-            hover: colors.grey[100],
-            textColor: '#4A4599',
+
+        /**
+         * General divider
+         */
+        divider: colors.grey[400],
+
+        /**
+         * Table colors.
+         */
+        table: {
+            headerColor: colors.grey[900], //New - Is needed? ###CHECK
+            headerBackground: colors.grey[200],
+            headerHover: colors.grey[300],
+            divider: colors.grey[300],
+            rowHover: colors.grey[100],
         },
-        standaloneBannerGradient: {
-            from: colors.purple[900],
-            to: '#173341',
+
+        /**
+         * Text highlight effect color. Used when filtering/searching over content.
+         */
+        highlight: colors.orange[200],
+
+        /**
+         * Background color used for the API command in the sidebar
+         */
+        codebox: colors.action[0.12],
+
+        /**
+         * Gradient for the login page
+         */
+        loginGradient: {
+            from: colors.purple[800],
+            to: colors.purple[950],
         },
-        checkmarkBadge: colors.purple[800],
-        inputLabelBackground: colors.white,
-        featureStrategySegmentChipBackground: colors.purple[800],
-        featureSegmentSearchBackground: colors.purple[800],
-        dialogHeaderBackground: colors.purple[800],
-        dialogHeaderText: '#ffffffe6',
-        grey: colors.grey,
-        lightBorder: colors.grey[400],
-        text: {
-            primary: colors.grey[900],
-            secondary: colors.grey[800],
-            disabled: colors.grey[600],
-            tertiaryContrast: '#fff',
+
+        /**
+         * Colors for event log output.
+         */
+        eventLog: {
+            diffAdd: colors.green[800],
+            diffSub: colors.red[800],
+            edited: colors.grey[900],
         },
-        code: {
-            main: '#0b8c8f',
-            diffAdd: '#3b6600',
-            diffSub: '#d11525',
-            diffNeutral: 'black',
-            edited: 'black',
-        },
-        activityIndicators: {
+
+        /**
+         * For 'Seen' column on feature toggles list and other.
+         */
+        seen: {
             unknown: colors.grey[100],
             recent: colors.green[100],
             inactive: colors.orange[200],
             abandoned: colors.red[200],
             primary: colors.purple[100],
         },
-        inactiveIcon: colors.grey[600],
     },
+
     components: {
+        // Links
         MuiLink: {
             styleOverrides: {
-                root: {
-                    color: colors.purple[900],
+                root: ({ theme }) => ({
+                    color: theme.palette.primary.dark,
                     '&:hover': {
                         textDecoration: 'none',
                     },
-                },
+                }),
             },
         },
+
+        // Breadcrumb
         MuiBreadcrumbs: {
             styleOverrides: {
-                root: {
-                    color: colors.grey[900],
+                root: ({ theme }) => ({
+                    color: theme.palette.text.primary,
                     fontSize: '0.875rem',
                     '& a': {
-                        color: colors.purple[900],
+                        color: theme.palette.primary.dark,
                         textDecoration: 'none',
                         '&:hover': {
                             textDecoration: 'underline',
                         },
                     },
-                },
+                }),
             },
         },
+
+        // Tables
         MuiTableHead: {
             styleOverrides: {
-                root: {
-                    background: 'transparent',
+                root: ({ theme }) => ({
+                    // background: 'transparent',
                     '& th': {
-                        background: colors.grey[200],
+                        height: theme.shape.tableRowHeightCompact,
+                        backgroundColor: theme.palette.table.headerBackground,
+                        border: 0,
+                        '&:first-of-type': {
+                            borderTopLeftRadius: theme.shape.borderRadiusMedium,
+                            borderBottomLeftRadius:
+                                theme.shape.borderRadiusMedium,
+                        },
+                        '&:last-of-type': {
+                            borderTopRightRadius:
+                                theme.shape.borderRadiusMedium,
+                            borderBottomRightRadius:
+                                theme.shape.borderRadiusMedium,
+                        },
                     },
-                },
+                }),
             },
         },
         MuiTableRow: {
             styleOverrides: {
-                root: {
-                    '&.MuiTableRow-hover:hover': {
-                        background: colors.grey[100],
+                root: ({ theme }) => ({
+                    '&.MuiTableRow-root:hover': {
+                        //Not all the tables have row hover background. This will add background color on row hover for all the tables
+                        background: theme.palette.table.rowHover, //overwrite action.hover
                     },
-                },
+                }),
             },
         },
         MuiTableCell: {
             styleOverrides: {
-                root: {
-                    borderBottomColor: colors.grey[300],
-                },
+                root: ({ theme }) => ({
+                    borderBottomColor: theme.palette.table.divider,
+                }),
             },
         },
+
+        // Alerts
         MuiAlert: {
             styleOverrides: {
-                root: {
-                    borderRadius: '8px',
+                root: ({ theme }) => ({
+                    borderRadius: theme.shape.borderRadiusMedium,
                     a: {
                         color: 'inherit',
                     },
                     '&.MuiAlert-standardInfo': {
-                        backgroundColor: colors.blue[50],
-                        color: colors.blue[700],
-                        border: `1px solid ${colors.blue[200]}`,
+                        backgroundColor: theme.palette.info.light,
+                        color: theme.palette.info.dark,
+                        border: `1px solid ${theme.palette.info.border}`,
                         '& .MuiAlert-icon': {
-                            color: colors.blue[500],
+                            color: theme.palette.info.main,
                         },
                     },
                     '&.MuiAlert-standardSuccess': {
-                        backgroundColor: colors.green[50],
-                        color: colors.green[800],
-                        border: `1px solid ${colors.green[300]}`,
+                        backgroundColor: theme.palette.success.light,
+                        color: theme.palette.success.dark,
+                        border: `1px solid ${theme.palette.success.border}`,
                         '& .MuiAlert-icon': {
-                            color: colors.green[500],
+                            color: theme.palette.success.main,
                         },
                     },
                     '&.MuiAlert-standardWarning': {
-                        backgroundColor: colors.orange[100],
-                        color: colors.orange[900],
-                        border: `1px solid ${colors.orange[500]}`,
+                        backgroundColor: theme.palette.warning.light,
+                        color: theme.palette.warning.dark,
+                        border: `1px solid ${theme.palette.warning.border}`,
                         '& .MuiAlert-icon': {
-                            color: colors.orange[800],
+                            color: theme.palette.warning.main,
                         },
                     },
                     '&.MuiAlert-standardError': {
-                        backgroundColor: colors.red[50],
-                        color: colors.red[800],
-                        border: `1px solid ${colors.red[300]}`,
+                        backgroundColor: theme.palette.error.light,
+                        color: theme.palette.error.dark,
+                        border: `1px solid ${theme.palette.error.border}`,
                         '& .MuiAlert-icon': {
-                            color: colors.red[700],
+                            color: theme.palette.error.main,
                         },
                     },
-                },
+                }),
             },
         },
+
+        // Horizontal menu tabs
         MuiTabs: {
             styleOverrides: {
                 root: ({ theme }) => ({
@@ -284,21 +338,21 @@ export default createTheme({
         MuiTab: {
             styleOverrides: {
                 root: ({ theme }) => ({
-                    color: colors.grey[900],
+                    color: theme.palette.text.primary,
                     fontSize: '1rem',
                     textTransform: 'none',
                     fontWeight: 400,
                     lineHeight: '1',
                     minHeight: '62px',
                     '&:hover': {
-                        backgroundColor: colors.grey[200],
+                        backgroundColor: theme.palette.background.elevation2,
                     },
                     '&.Mui-selected': {
-                        color: colors.grey[900],
+                        color: theme.palette.text.primary,
                         fontWeight: 700,
                     },
                     '& > span': {
-                        color: colors.purple[900],
+                        color: theme.palette.primary.main, //Based on this color is created the focus color/effect
                     },
                     [theme.breakpoints.down('md')]: {
                         padding: '12px 0px',
@@ -306,6 +360,8 @@ export default createTheme({
                 }),
             },
         },
+
+        // Constraint accordion / cards
         MuiAccordion: {
             styleOverrides: {
                 root: ({ theme }) => ({
@@ -327,23 +383,20 @@ export default createTheme({
                 },
             },
         },
+
+        // Project overview, improve toggle/switch disabled focus effect color
         MuiSwitch: {
             styleOverrides: {
-                switchBase: {
+                root: ({ theme }) => ({
                     zIndex: 1,
                     '&:not(.Mui-checked) .MuiTouchRipple-child': {
-                        color: colors.grey['500'],
+                        color: theme.palette.neutral.border,
                     },
-                },
-            },
-        },
-        MuiIcon: {
-            styleOverrides: {
-                colorDisabled: {
-                    color: colors.grey[600],
-                },
+                }),
             },
         },
+
+        // Overwiteing the action.disabledOpacity from MU
         MuiMenuItem: {
             styleOverrides: {
                 root: {
@@ -353,53 +406,22 @@ export default createTheme({
                 },
             },
         },
-        MuiChip: {
+
+        // Inputs background - This is used when we have inputs on a grey background (e.g. edit contstraints, playground)
+        MuiInputBase: {
             styleOverrides: {
-                root: ({ ownerState, theme }) => ({
-                    ...(ownerState.variant === 'outlined' &&
-                        ownerState.size === 'small' && {
-                            borderRadius: theme.shape.borderRadius,
-                            margin: 0,
-                            borderWidth: 1,
-                            borderStyle: 'solid',
-                            fontWeight: theme.typography.fontWeightBold,
-                            fontSize: theme.typography.caption.fontSize,
-                            ...(ownerState.color === 'success' && {
-                                backgroundColor: colors.green[50],
-                                borderColor: theme.palette.success.border,
-                                color: theme.palette.success.dark,
-                            }),
-                            ...(ownerState.color === 'default' && {
-                                color: theme.palette.text.secondary,
-                            }),
-                            ...(ownerState.color === 'error' && {
-                                color: theme.palette.error.dark,
-                                background: theme.palette.error.light,
-                                borderColor: theme.palette.error.border,
-                            }),
-                        }),
+                root: ({ theme }) => ({
+                    backgroundColor: theme.palette.background.paper,
                 }),
             },
         },
-        MuiInputBase: {
-            styleOverrides: {
-                root: {
-                    backgroundColor: '#fff',
-                },
-            },
-        },
-        MuiPaper: {
-            styleOverrides: {
-                root: {
-                    backgroundColor: '#fff',
-                },
-            },
-        },
+
+        // Top menu text color
         MuiAppBar: {
             styleOverrides: {
-                root: {
-                    color: colors.black,
-                },
+                root: ({ theme }) => ({
+                    color: theme.palette.text.primary,
+                }),
             },
         },
     },
diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts
index c63b5346df..93b90bceee 100644
--- a/frontend/src/themes/themeTypes.ts
+++ b/frontend/src/themes/themeTypes.ts
@@ -37,100 +37,57 @@ declare module '@mui/material/styles' {
          * Generic neutral palette color.
          */
         neutral: PaletteColorOptions;
+
+        /**
+         * Table colors.
+         */
+        table: {
+            headerColor: string;
+            headerBackground: string;
+            headerHover: string;
+            divider: string;
+            rowHover: string;
+        };
+
         /**
          * Colors for event log output.
          */
-        code: {
-            main: string;
+        eventLog: {
             diffAdd: string;
             diffSub: string;
-            diffNeutral: string;
             edited: string;
         };
+
         /**
          * For 'Seen' column on feature toggles list and other.
          */
-        activityIndicators: {
+        seen: {
             unknown: string;
             recent: string;
             inactive: string;
             abandoned: string;
             primary: string;
         };
-        dividerAlternative: string;
-        contentWrapper: string;
-        headerBackground: string;
-        footerBackground: string;
+
+        // dividerAlternative: string;
+
+        /**
+         * Background color for the API command in the sidebar
+         */
         codebox: string;
-        featureMetaData: string;
-        playgroundBackground: string;
-        playgroundFormBackground: string;
-        standaloneBackground: string;
-        standaloneBannerGradient: {
+
+        /**
+         * Gradient for the login page
+         */
+        loginGradient: {
             from: string;
             to: string;
         };
-        constraintAccordion: {
-            editBackground: string;
-            background: string;
-            operatorBackground: string;
-        };
-        projectCard: {
-            hover: string;
-            textColor: string;
-        };
-        checkmarkBadge: string;
-        inputLabelBackground: string;
-        featureStrategySegmentChipBackground: string;
-        featureSegmentSearchBackground: string;
-        dialogHeaderBackground: string;
-        dialogHeaderText: string;
-        formSidebarTextColor: string;
-        /**
-         * For table header hover effect.
-         */
-        tableHeaderBackground: string;
-        tableHeaderHover: string;
-        tableHeaderColor: string;
 
-        formBackground: string;
-        formSidebar: string;
         /**
          * Text highlight effect color. Used when filtering/searching over content.
          */
         highlight: string;
-        /**
-         * Background color for secondary containers.
-         */
-        secondaryContainer: string;
-        /**
-         * Background color for sidebar containers.
-         */
-        sidebarContainer: string;
-        /**
-         * Icon that doesn't have an action (visual only, no click handler).
-         *
-         * @deprecated use `<YourIcon color="disabled" />`.
-         * ⚠️ `color` only works with `import { YourIcon } from "@mui/icons"`
-         * and not with `import YourIcon from "@mui/icons/YourIcon"`.
-         */
-        inactiveIcon: string;
-
-        /** A border color used for contrast between similar backgroundColors **/
-        lightBorder: string;
-
-        /* Type for tertiary colors */
-        tertiary: {
-            main: string;
-            light: string;
-            dark: string;
-            background: string;
-            contrast: string;
-        };
-    }
-
-    interface CustomTypeText {
-        tertiaryContrast: string;
     }
 
     interface Theme extends CustomTheme {}
@@ -139,18 +96,28 @@ declare module '@mui/material/styles' {
     interface Palette extends CustomPalette {}
     interface PaletteOptions extends CustomPalette {}
 
-    interface TypeText extends CustomTypeText {}
+    interface TypeBackground extends CustomTypeBackground {}
+
+    /* Extend the background object from MUI */
+    interface CustomTypeBackground {
+        application: string;
+        sidebar: string;
+        elevation1: string;
+        elevation2: string;
+    }
 
     interface PaletteColor {
         light: string;
         main: string;
         dark: string;
-        border: string;
+        contrastText: string;
+        border?: string;
     }
     interface PaletteColorOptions {
         light?: string;
         main?: string;
         dark?: string;
+        contrastText?: string;
         border?: string;
     }
 }