diff --git a/client/src/components/Footer/Footer.tsx b/client/src/components/Footer/Footer.tsx
index 600bfcdca..32132e169 100644
--- a/client/src/components/Footer/Footer.tsx
+++ b/client/src/components/Footer/Footer.tsx
@@ -32,8 +32,8 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
           href={`${apiBase}?scheme=${scheme}&host=${fullHost}`}
           target="_blank"
           rel="noreferrer"
-          underline="hover"
-          className={`${classes.link} ${classes.logoLink}`}
+          color="secondary"
+          className={classes.link}
           sx={{ fontSize: windowIsSmall ? '0.7rem' : '0.9rem' }}
         >
           API
@@ -99,8 +99,8 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
                     href={link.url}
                     target="_blank"
                     rel="noreferrer"
-                    underline="hover"
-                    className={`${classes.link} ${classes.linkText}`}
+                    color="secondary"
+                    className={classes.link}
                     style={{
                       fontSize: '0.8rem',
                     }}
@@ -127,8 +127,8 @@ const Footer: FC<FooterProps> = ({ version, linkList }) => {
                   href={link.url}
                   target="_blank"
                   rel="noreferrer"
-                  underline="hover"
-                  className={`${classes.link} ${classes.linkText}`}
+                  color="secondary"
+                  className={classes.link}
                   style={{
                     fontSize: '1.1rem',
                     margin: '0 16px',
diff --git a/client/src/components/Footer/styles.tsx b/client/src/components/Footer/styles.tsx
index 8b1604b47..fafb9aeb0 100644
--- a/client/src/components/Footer/styles.tsx
+++ b/client/src/components/Footer/styles.tsx
@@ -12,7 +12,7 @@ export default makeStyles()((theme: Theme) => ({
     overflow: 'auto',
     zIndex: `${theme.zIndex.drawer + 1} !important` as any,
     backgroundColor: theme.palette.common.orangeLightest,
-    borderTop: `1px ${theme.palette.common.grayLighter} solid`,
+    borderTop: `1px ${theme.palette.divider} solid`,
     bottom: 0,
     '@media print': {
       display: 'none',
@@ -37,11 +37,4 @@ export default makeStyles()((theme: Theme) => ({
     fontWeight: 'bolder',
     width: 'max-content',
   },
-  logoLink: {
-    fontStyle: 'normal',
-    color: theme.palette.common.orangeDarkest,
-  },
-  linkText: {
-    color: theme.palette.common.grayDark,
-  },
 }));
diff --git a/client/src/components/InputsModal/InputCheckboxGroup.tsx b/client/src/components/InputsModal/InputCheckboxGroup.tsx
index 0e730b8cb..ddc326673 100644
--- a/client/src/components/InputsModal/InputCheckboxGroup.tsx
+++ b/client/src/components/InputsModal/InputCheckboxGroup.tsx
@@ -94,6 +94,7 @@ const InputCheckboxGroup: FC<InputCheckboxGroupProps> = ({
         id={`requirement${index}_input`}
         disabled={requirement.locked}
         fullWidth
+        className={classes.inputField}
       >
         <FormLabel required={!requirement.optional} className={classes.inputLabel}>
           <FieldLabel requirement={requirement} />
diff --git a/client/src/components/InputsModal/InputOAuthCredentials.tsx b/client/src/components/InputsModal/InputOAuthCredentials.tsx
index e5b13d95f..70cd0394a 100644
--- a/client/src/components/InputsModal/InputOAuthCredentials.tsx
+++ b/client/src/components/InputsModal/InputOAuthCredentials.tsx
@@ -100,6 +100,7 @@ const InputOAuthCredentials: FC<InputOAuthCredentialsProps> = ({
         <TextField
           disabled={requirement.locked}
           required={field.required}
+          error={field.required && !oAuthCredentials[field.name as keyof OAuthCredentials]}
           id={`requirement${index}_${field.name}`}
           label={fieldLabel}
           helperText={requirement.description}
diff --git a/client/src/components/InputsModal/InputRadioGroup.tsx b/client/src/components/InputsModal/InputRadioGroup.tsx
index 90482695c..1c283a8b1 100644
--- a/client/src/components/InputsModal/InputRadioGroup.tsx
+++ b/client/src/components/InputsModal/InputRadioGroup.tsx
@@ -48,6 +48,7 @@ const InputRadioGroup: FC<InputRadioGroupProps> = ({
         id={`requirement${index}_input`}
         disabled={requirement.locked}
         fullWidth
+        className={classes.inputField}
       >
         <FormLabel required={!requirement.optional} className={classes.inputLabel}>
           <FieldLabel requirement={requirement} />
diff --git a/client/src/components/InputsModal/InputTextArea.tsx b/client/src/components/InputsModal/InputTextArea.tsx
index 1c1c531d5..564f0c635 100644
--- a/client/src/components/InputsModal/InputTextArea.tsx
+++ b/client/src/components/InputsModal/InputTextArea.tsx
@@ -14,12 +14,14 @@ export interface InputTextAreaProps {
 
 const InputTextArea: FC<InputTextAreaProps> = ({ requirement, index, inputsMap, setInputsMap }) => {
   const { classes } = useStyles();
+  const [hasBeenModified, setHasBeenModified] = React.useState(false);
 
   return (
     <ListItem>
       <TextField
         disabled={requirement.locked}
         required={!requirement.optional}
+        error={hasBeenModified && !requirement.optional && !inputsMap.get(requirement.name)}
         id={`requirement${index}_input`}
         className={classes.inputField}
         variant="standard"
@@ -33,6 +35,7 @@ const InputTextArea: FC<InputTextAreaProps> = ({ requirement, index, inputsMap,
           const value = event.target.value;
           inputsMap.set(requirement.name, value);
           setInputsMap(new Map(inputsMap));
+          setHasBeenModified(true);
         }}
         FormHelperTextProps={{
           sx: { '&.Mui-disabled': { color: lightTheme.palette.common.grayDark } },
diff --git a/client/src/components/InputsModal/InputTextField.tsx b/client/src/components/InputsModal/InputTextField.tsx
index 3d716e215..6997f4c05 100644
--- a/client/src/components/InputsModal/InputTextField.tsx
+++ b/client/src/components/InputsModal/InputTextField.tsx
@@ -19,12 +19,14 @@ const InputTextField: FC<InputTextFieldProps> = ({
   setInputsMap,
 }) => {
   const { classes } = useStyles();
+  const [hasBeenModified, setHasBeenModified] = React.useState(false);
 
   return (
     <ListItem>
       <TextField
         disabled={requirement.locked}
         required={!requirement.optional}
+        error={hasBeenModified && !requirement.optional && !inputsMap.get(requirement.name)}
         id={`requirement${index}_input`}
         className={classes.inputField}
         variant="standard"
@@ -36,6 +38,7 @@ const InputTextField: FC<InputTextFieldProps> = ({
           const value = event.target.value;
           inputsMap.set(requirement.name, value);
           setInputsMap(new Map(inputsMap));
+          setHasBeenModified(true);
         }}
         InputLabelProps={{ shrink: true }}
         FormHelperTextProps={{
diff --git a/client/src/components/InputsModal/InputsModal.tsx b/client/src/components/InputsModal/InputsModal.tsx
index 9ddb5a6e3..93a8ae9a2 100644
--- a/client/src/components/InputsModal/InputsModal.tsx
+++ b/client/src/components/InputsModal/InputsModal.tsx
@@ -11,6 +11,8 @@ import {
   ToggleButtonGroup,
   ToggleButton,
   Typography,
+  Paper,
+  Box,
 } from '@mui/material';
 import ReactMarkdown from 'react-markdown';
 import YAML from 'js-yaml';
@@ -298,65 +300,75 @@ const InputsModal: FC<InputsModalProps> = ({
           ) : (
             <TextField
               id={`${inputType}-serial-input`}
-              fullWidth
-              multiline
               minRows={4}
               key={baseInput}
               error={invalidInput}
               defaultValue={baseInput}
+              label={invalidInput ? `ERROR: INVALID ${inputType}` : inputType}
+              InputProps={{
+                classes: {
+                  input: classes.serialInput,
+                },
+              }}
+              fullWidth
+              multiline
               data-testid="serial-input"
-              className={classes.serialInput}
               onChange={(e) => handleSerialChanges(e.target.value)}
-              label={invalidInput ? `ERROR: INVALID ${inputType}` : inputType}
             />
           )}
         </main>
       </DialogContent>
       <DialogActions className={classes.dialogActions}>
-        <ToggleButtonGroup
-          exclusive
-          role="group"
-          color="primary"
-          size="small"
-          value={inputType}
-          onChange={handleInputTypeChange}
-          className={classes.toggleButtonGroup}
-        >
-          <ToggleButton
-            value="Field"
-            disabled={invalidInput}
-            data-testid="field-button"
-            className={classes.toggleButton}
-          >
-            Field
-          </ToggleButton>
-          <ToggleButton
-            value="JSON"
-            disabled={invalidInput}
-            data-testid="json-button"
-            className={classes.toggleButton}
+        <Paper elevation={0} className={classes.toggleButtonGroupContainer}>
+          <ToggleButtonGroup
+            exclusive
+            role="group"
+            color="secondary"
+            size="small"
+            value={inputType}
+            onChange={handleInputTypeChange}
+            className={classes.toggleButtonGroup}
           >
-            JSON
-          </ToggleButton>
-          <ToggleButton
-            value="YAML"
-            disabled={invalidInput}
-            data-testid="yaml-button"
-            className={classes.toggleButton}
+            <ToggleButton
+              value="Field"
+              disabled={invalidInput}
+              data-testid="field-button"
+              className={classes.toggleButton}
+            >
+              Field
+            </ToggleButton>
+            <ToggleButton
+              value="JSON"
+              disabled={invalidInput}
+              data-testid="json-button"
+              className={classes.toggleButton}
+            >
+              JSON
+            </ToggleButton>
+            <ToggleButton
+              value="YAML"
+              disabled={invalidInput}
+              data-testid="yaml-button"
+              className={classes.toggleButton}
+            >
+              YAML
+            </ToggleButton>
+          </ToggleButtonGroup>
+        </Paper>
+        <Box>
+          <Button color="secondary" data-testid="cancel-button" onClick={closeModal} sx={{ mr: 1 }}>
+            Cancel
+          </Button>
+          <Button
+            color="secondary"
+            variant="contained"
+            disableElevation
+            onClick={submitClicked}
+            disabled={missingRequiredInput || invalidInput}
           >
-            YAML
-          </ToggleButton>
-        </ToggleButtonGroup>
-        <Button data-testid="cancel-button" className={classes.inputAction} onClick={closeModal}>
-          Cancel
-        </Button>
-        <Button
-          onClick={submitClicked}
-          disabled={missingRequiredInput || invalidInput}
-          className={classes.inputAction}
-        >
-          Submit
-        </Button>
+            Submit
+          </Button>
+        </Box>
       </DialogActions>
     </Dialog>
   );
diff --git a/client/src/components/InputsModal/RequiredInputWarning.tsx b/client/src/components/InputsModal/RequiredInputWarning.tsx
index 07f120b61..d0855a55f 100644
--- a/client/src/components/InputsModal/RequiredInputWarning.tsx
+++ b/client/src/components/InputsModal/RequiredInputWarning.tsx
@@ -1,12 +1,12 @@
-import { Tooltip } from '@mui/material';
 import React, { FC } from 'react';
 import WarningIcon from '@mui/icons-material/Warning';
+import CustomTooltip from '~/components/_common/CustomTooltip';
 
 const RequiredInputWarning: FC = () => {
   return (
-    <Tooltip title="Missing value for required input">
-      <WarningIcon />
-    </Tooltip>
+    <CustomTooltip title="Missing value for required input">
+      <WarningIcon fontSize="small" color="error" />
+    </CustomTooltip>
   );
 };
 
diff --git a/client/src/components/InputsModal/styles.tsx b/client/src/components/InputsModal/styles.tsx
index 50cb782a4..c6327a761 100644
--- a/client/src/components/InputsModal/styles.tsx
+++ b/client/src/components/InputsModal/styles.tsx
@@ -10,17 +10,20 @@ export default makeStyles()((theme: Theme) => ({
   inputField: {
     '& > label.MuiInputLabel-shrink': {
       fontWeight: 600,
-      color: 'rgba(0,0,0,0.85)',
+      color: theme.palette.common.grayDarkest,
     },
     '& label.Mui-focused': {
-      color: theme.palette.primary.main,
+      color: theme.palette.common.orangeDarkest,
     },
     '& label.Mui-disabled': {
       color: theme.palette.common.gray,
     },
+    '& label.Mui-error': {
+      color: theme.palette.error.main,
+    },
   },
   inputLabel: {
-    color: 'rgba(0,0,0,0.85)',
+    color: theme.palette.common.grayDarkest,
     fontWeight: 600,
     fontSize: '.75rem',
   },
@@ -31,26 +34,48 @@ export default makeStyles()((theme: Theme) => ({
   oauthCard: {
     width: '100%',
     margin: '8px 0',
-    borderColor: 'rgba(0,0,0,0.3)',
+    borderColor: theme.palette.common.grayLight,
     '&:focus-within': {
       borderColor: theme.palette.primary.main,
     },
   },
-  inputAction: {
-    color: theme.palette.primary.dark,
-  },
   serialInput: {
     height: 'max-content',
+    fontFamily: 'monospace',
   },
   dialogActions: {
     display: 'flex',
+    justifyContent: 'space-between',
+  },
+  toggleButtonGroupContainer: {
+    display: 'flex',
+    border: `1px solid ${theme.palette.divider}`,
+    flexWrap: 'wrap',
   },
   toggleButtonGroup: {
     flexGrow: 1,
+    '& .MuiToggleButtonGroup-grouped': {
+      margin: theme.spacing(0.5),
+      border: 0,
+      '&.Mui-disabled': {
+        border: 0,
+      },
+      '&:not(:first-of-type), :first-of-type': {
+        borderRadius: theme.shape.borderRadius,
+      },
+    },
   },
   toggleButton: {
+    color: theme.palette.common.grayDark,
+    '&:hover, :focus-within': {
+      backgroundColor: theme.palette.common.grayLightest,
+      fontWeight: 'bolder',
+    },
     '&.Mui-selected': {
-      color: theme.palette.primary.dark,
+      backgroundColor: 'unset',
+      border: `1px solid ${theme.palette.secondary.main} !important`,
+      color: theme.palette.secondary.main,
+      fontWeight: 'bolder',
     },
   },
 }));
diff --git a/client/src/components/RequestDetailModal/RequestDetailModal.tsx b/client/src/components/RequestDetailModal/RequestDetailModal.tsx
index 67ccdb145..aead3f9bc 100644
--- a/client/src/components/RequestDetailModal/RequestDetailModal.tsx
+++ b/client/src/components/RequestDetailModal/RequestDetailModal.tsx
@@ -1,20 +1,21 @@
+import React, { FC } from 'react';
 import {
   Box,
+  Button,
   Dialog,
+  DialogActions,
   DialogContent,
   DialogTitle,
   Divider,
   IconButton,
-  Tooltip,
   Typography,
 } from '@mui/material';
 import { Request } from '~/models/testSuiteModels';
-import React, { FC } from 'react';
+import { ContentCopy, Input } from '@mui/icons-material';
+import CustomTooltip from '~/components/_common/CustomTooltip';
 import CodeBlock from './CodeBlock';
 import HeaderTable from './HeaderTable';
 import useStyles from './styles';
-import InputIcon from '@mui/icons-material/Input';
-import { ContentCopy } from '@mui/icons-material';
 
 export interface RequestDetailModalProps {
   request?: Request;
@@ -43,14 +44,14 @@ const RequestDetailModal: FC<RequestDetailModalProps> = ({
   };
 
   const usedRequestIcon = (
-    <Tooltip title="This request was performed in another test and the result is used by this test">
-      <InputIcon className={classes.inputIcon} />
-    </Tooltip>
+    <CustomTooltip title="This request was performed in another test and the result is used by this test">
+      <Input className={classes.inputIcon} />
+    </CustomTooltip>
   );
 
   const requestDialogTitle = (
     <Box display="flex" className={classes.modalTitle}>
-      <Tooltip
+      <CustomTooltip
         title={`${request?.verb.toUpperCase() || ''} ${request?.url || ''} \u2192 ${
           request?.status || ''
         }`}
@@ -64,19 +65,19 @@ const RequestDetailModal: FC<RequestDetailModalProps> = ({
             {request?.url}
           </Box>
           {request?.url && (
-            <Tooltip open={copySuccess} title="Text copied!">
+            <CustomTooltip open={copySuccess} title="Text copied!">
               <Box pr={1}>
                 <IconButton color="secondary" onClick={() => void copyTextClick(request.url)}>
                   <ContentCopy fontSize="inherit" />
                 </IconButton>
               </Box>
-            </Tooltip>
+            </CustomTooltip>
           )}
           <Box display="flex" flexShrink={0}>
             &#8594; {request?.status}
           </Box>
         </Box>
-      </Tooltip>
+      </CustomTooltip>
       <Box display="flex" flexGrow={1} pr={1} />
       {usedRequest && (
         <Box display="flex" flexShrink={1} flexDirection="row-reverse" px={2}>
@@ -92,7 +93,7 @@ const RequestDetailModal: FC<RequestDetailModalProps> = ({
         open={modalVisible}
         fullWidth={true}
         maxWidth="md"
-        onClose={() => hideModal()}
+        onClose={hideModal}
         data-testid="requestDetailModal"
       >
         <DialogTitle>{requestDialogTitle}</DialogTitle>
@@ -114,6 +115,16 @@ const RequestDetailModal: FC<RequestDetailModalProps> = ({
             <CodeBlock body={request.response_body} headers={request.response_headers} />
           </Box>
         </DialogContent>
+        <DialogActions>
+          <Button
+            color="secondary"
+            variant="contained"
+            data-testid="cancel-button"
+            onClick={hideModal}
+          >
+            Close
+          </Button>
+        </DialogActions>
       </Dialog>
     );
   } else {
diff --git a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
index 57ec60828..6c0f1bf11 100644
--- a/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
+++ b/client/src/components/SuiteOptionsPage/SuiteOptionsPage.tsx
@@ -85,7 +85,7 @@ const SuiteOptionsPage: FC<SuiteOptionsPageProps> = ({ testSuite }) => {
         component="h1"
         align="center"
         sx={{
-          color: lightTheme.palette.common.grayDarkest,
+          color: lightTheme.palette.common.grayDarker,
           fontSize: windowIsSmall ? '2rem' : 'auto',
           fontWeight: 'bolder',
           letterSpacing: 2,
diff --git a/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx b/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx
index 253f0d954..6ab2d33a4 100644
--- a/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx
+++ b/client/src/components/TestSuite/ConfigMessagesDetails/ConfigMessagesDetailsPanel.tsx
@@ -1,10 +1,10 @@
 import React, { FC } from 'react';
-import { Box, Card, Chip, Divider, Tab, Tabs, Typography } from '@mui/material';
+import ReactMarkdown from 'react-markdown';
+import { Box, Card, Chip, Divider, Tabs, Typography } from '@mui/material';
 import { Message, TestSuite } from '~/models/testSuiteModels';
-import useStyles from './styles';
+import CustomTab from '~/components/_common/CustomTab';
 import TabPanel from '../TestSuiteDetails/TestListItem/TabPanel';
-import ReactMarkdown from 'react-markdown';
-import lightTheme from 'styles/theme';
+import useStyles from './styles';
 
 interface ConfigDetailsPanelProps {
   testSuite: TestSuite;
@@ -40,12 +40,6 @@ const ConfigMessagesDetailsPanel: FC<ConfigDetailsPanelProps> = ({ testSuite: ru
     </Box>
   );
 
-  const darkTabText = {
-    '&.Mui-selected': {
-      color: lightTheme.palette.common.orangeDarker,
-    },
-  };
-
   const a11yProps = (id: string, index: number) => ({
     id: `${id}-tab-${index}`,
     'aria-controls': `${id}-tabpanel-${index}`,
@@ -68,21 +62,12 @@ const ConfigMessagesDetailsPanel: FC<ConfigDetailsPanelProps> = ({ testSuite: ru
         }}
         variant="fullWidth"
       >
-        <Tab
-          label={tabLabel('Errors', errorMessages.length)}
-          {...a11yProps('errors', 0)}
-          sx={darkTabText}
-        />
-        <Tab
+        <CustomTab label={tabLabel('Errors', errorMessages.length)} {...a11yProps('errors', 0)} />
+        <CustomTab
           label={tabLabel('Warnings', warningMessages.length)}
           {...a11yProps('warnings', 1)}
-          sx={darkTabText}
-        />
-        <Tab
-          label={tabLabel('Info', infoMessages.length)}
-          {...a11yProps('info', 2)}
-          sx={darkTabText}
         />
+        <CustomTab label={tabLabel('Info', infoMessages.length)} {...a11yProps('info', 2)} />
       </Tabs>
       <Divider />
       <TabPanel id="errors" currentTabIndex={tabIndex} index={0}>
diff --git a/client/src/components/TestSuite/ConfigMessagesDetails/styles.tsx b/client/src/components/TestSuite/ConfigMessagesDetails/styles.tsx
index d791d4cbc..afcf3cd57 100644
--- a/client/src/components/TestSuite/ConfigMessagesDetails/styles.tsx
+++ b/client/src/components/TestSuite/ConfigMessagesDetails/styles.tsx
@@ -9,7 +9,7 @@ export default makeStyles()((theme: Theme) => ({
     padding: '8px 16px',
     fontWeight: 600,
     fontSize: '16px',
-    borderBottom: '1px solid rgba(0,0,0,.12)',
+    borderBottom: `1px solid ${theme.palette.divider}`,
     backgroundColor: theme.palette.common.blueGrayLightest,
     borderTopLeftRadius: '4px',
     borderTopRightRadius: '4px',
diff --git a/client/src/components/TestSuite/TestRunButton/TestRunButton.tsx b/client/src/components/TestSuite/TestRunButton/TestRunButton.tsx
index 7d84fcdf7..c2fcfae56 100644
--- a/client/src/components/TestSuite/TestRunButton/TestRunButton.tsx
+++ b/client/src/components/TestSuite/TestRunButton/TestRunButton.tsx
@@ -1,8 +1,9 @@
 import React, { FC } from 'react';
-import { Button, Tooltip } from '@mui/material';
+import { Button } from '@mui/material';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
 import PlayCircleIcon from '@mui/icons-material/PlayCircle';
 import { TestGroup, Runnable, RunnableType } from '~/models/testSuiteModels';
+import CustomTooltip from '~/components/_common/CustomTooltip';
 import lightTheme from '~/styles/theme';
 
 import { useAppStore } from '~/store/app';
@@ -46,7 +47,7 @@ const TestRunButton: FC<TestRunButtonProps> = ({
 
   // Custom icon button to resolve nested interactive control error
   const iconButton = (
-    <Tooltip describeChild title={`Run ${runnable.title}`}>
+    <CustomTooltip describeChild title={`Run ${runnable.title}`}>
       <PlayCircleIcon
         aria-label={`Run ${runnable.title}${
           testRunInProgress ? ' Disabled - Test Run in Progress' : ''
@@ -75,7 +76,7 @@ const TestRunButton: FC<TestRunButtonProps> = ({
               },
         }}
       />
-    </Tooltip>
+    </CustomTooltip>
   );
 
   if (!showRunButton) {
diff --git a/client/src/components/TestSuite/TestRunProgressBar/TestRunProgressBar.tsx b/client/src/components/TestSuite/TestRunProgressBar/TestRunProgressBar.tsx
index 2253cf9f8..7000e1fe2 100644
--- a/client/src/components/TestSuite/TestRunProgressBar/TestRunProgressBar.tsx
+++ b/client/src/components/TestSuite/TestRunProgressBar/TestRunProgressBar.tsx
@@ -6,16 +6,16 @@ import {
   CircularProgress,
   LinearProgress,
   Snackbar,
-  Tooltip,
   Typography,
 } from '@mui/material';
 import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import CancelIcon from '@mui/icons-material/Cancel';
 import DoneIcon from '@mui/icons-material/Done';
 import FilterNoneIcon from '@mui/icons-material/FilterNone';
-import useStyles from './styles';
+import CustomTooltip from '~/components/_common/CustomTooltip';
 import lightTheme from '~/styles/theme';
 import { useAppStore } from '~/store/app';
+import useStyles from './styles';
 
 export interface TestRunProgressBarProps {
   showProgressBar: boolean;
@@ -31,33 +31,33 @@ const StatusIndicator = (status: string | null | undefined) => {
   switch (status) {
     case 'running':
       return (
-        <Tooltip title="Running">
+        <CustomTooltip title="Running">
           <CircularProgress size={24} />
-        </Tooltip>
+        </CustomTooltip>
       );
     case 'cancelling':
       return (
-        <Tooltip title="Cancelling">
+        <CustomTooltip title="Cancelling">
           <CircularProgress size={24} />
-        </Tooltip>
+        </CustomTooltip>
       );
     case 'waiting':
       return (
-        <Tooltip title="Waiting">
+        <CustomTooltip title="Waiting">
           <AccessTimeIcon color="primary" />
-        </Tooltip>
+        </CustomTooltip>
       );
     case 'queued':
       return (
-        <Tooltip title="Queued">
+        <CustomTooltip title="Queued">
           <FilterNoneIcon color="primary" />
-        </Tooltip>
+        </CustomTooltip>
       );
     case 'done':
       return (
-        <Tooltip title="Done">
+        <CustomTooltip title="Done">
           <DoneIcon color="primary" />
-        </Tooltip>
+        </CustomTooltip>
       );
     default:
       return null;
@@ -132,7 +132,7 @@ const TestRunProgressBar: FC<TestRunProgressBarProps> = ({
             {testRun?.status === 'done' ? testCount : completedCount}/{testCount}
           </Typography>
         </Box>
-        <Tooltip title="Cancel Test Run">
+        <CustomTooltip title="Cancel Test Run">
           <IconButton
             aria-label="cancel"
             disabled={!cancellable}
@@ -142,7 +142,7 @@ const TestRunProgressBar: FC<TestRunProgressBarProps> = ({
           >
             <CancelIcon />
           </IconButton>
-        </Tooltip>
+        </CustomTooltip>
       </Box>
     </Snackbar>
   );
diff --git a/client/src/components/TestSuite/TestRunProgressBar/styles.tsx b/client/src/components/TestSuite/TestRunProgressBar/styles.tsx
index 2de3e7bac..8619bcc00 100644
--- a/client/src/components/TestSuite/TestRunProgressBar/styles.tsx
+++ b/client/src/components/TestSuite/TestRunProgressBar/styles.tsx
@@ -14,7 +14,7 @@ export default makeStyles()((theme: Theme) => ({
   },
   linearProgress: {
     height: 8,
-    backgroundColor: 'rgba(0,0,0,.2)',
+    backgroundColor: theme.palette.common.grayDarker,
     borderRadius: 2,
   },
 }));
diff --git a/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx b/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx
index eb1cdf38e..30c2539c3 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/ResultIcon.tsx
@@ -1,6 +1,5 @@
 import React, { FC } from 'react';
 import { Result } from '~/models/testSuiteModels';
-import { Tooltip } from '@mui/material';
 import { red, orange, green, purple, grey } from '@mui/material/colors';
 import {
   AccessTime,
@@ -12,7 +11,7 @@ import {
   Pending,
   RadioButtonUnchecked,
 } from '@mui/icons-material';
-
+import CustomTooltip from '~/components/_common/CustomTooltip';
 import { useTestSessionStore } from '~/store/testSession';
 
 export interface ResultIconProps {
@@ -27,68 +26,68 @@ const ResultIcon: FC<ResultIconProps> = ({ result, isRunning }) => {
   // run and result is not for other test runs
   if (isRunning && result?.test_run_id !== testRunId) {
     return (
-      <Tooltip title="pending">
+      <CustomTooltip title="pending">
         <Pending style={{ color: grey[500] }} /* data-testid={`${result.id}-${result.result}`} */ />
-      </Tooltip>
+      </CustomTooltip>
     );
   } else if (result) {
     switch (result.result) {
       case 'pass':
         return (
-          <Tooltip title="passed">
+          <CustomTooltip title="passed">
             <CheckCircle
               style={{ color: result.optional ? green[100] : green[500] }}
               data-testid={`${result.id}-${result.result}`}
             />
-          </Tooltip>
+          </CustomTooltip>
         );
       case 'fail':
         return (
-          <Tooltip title="failed">
+          <CustomTooltip title="failed">
             <Cancel
               style={{ color: result.optional ? grey[500] : red[500] }}
               data-testid={`${result.id}-${result.result}`}
             />
-          </Tooltip>
+          </CustomTooltip>
         );
       case 'cancel':
         return (
-          <Tooltip title="cancel">
+          <CustomTooltip title="cancel">
             <Cancel
               style={{ color: result.optional ? grey[500] : red[500] }}
               data-testid={`${result.id}-${result.result}`}
             />
-          </Tooltip>
+          </CustomTooltip>
         );
       case 'skip':
         return (
-          <Tooltip title="skipped">
+          <CustomTooltip title="skipped">
             <Block
               style={{ color: result.optional ? grey[500] : orange[800] }}
               data-testid={`${result.id}-${result.result}`}
             />
-          </Tooltip>
+          </CustomTooltip>
         );
       case 'omit':
         return (
-          <Tooltip title="omitted">
+          <CustomTooltip title="omitted">
             <Circle style={{ color: grey[500] }} data-testid={`${result.id}-${result.result}`} />
-          </Tooltip>
+          </CustomTooltip>
         );
       case 'error':
         return (
-          <Tooltip title="error">
+          <CustomTooltip title="error">
             <Error
               style={{ color: result.optional ? grey[500] : purple[500] }}
               data-testid={`${result.id}-${result.result}`}
             />
-          </Tooltip>
+          </CustomTooltip>
         );
       case 'wait':
         return (
-          <Tooltip title="wait">
+          <CustomTooltip title="wait">
             <AccessTime data-testid={`${result.id}-${result.result}`} />
-          </Tooltip>
+          </CustomTooltip>
         );
 
       default:
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NavigableGroupListItem.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NavigableGroupListItem.tsx
index bc256789d..131041ea3 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NavigableGroupListItem.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/NavigableGroupListItem.tsx
@@ -32,10 +32,10 @@ const NavigableGroupListItem: FC<NavigableGroupListItemProps> = ({ testGroup })
                     <Typography className={classes.shortId}>{`${testGroup.short_id} `}</Typography>
                   )}
                   <Link
-                    color="inherit"
+                    color="secondary"
                     href={`${location.pathname}#${testGroup.id}`}
-                    underline="hover"
                     data-testid="navigable-group-item"
+                    sx={{ fontWeight: 'bold' }}
                   >
                     {testGroup.title}
                   </Link>
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/styles.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/styles.tsx
index ed942ee48..479d5a41d 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/styles.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestGroupListItem/styles.tsx
@@ -12,7 +12,7 @@ export default makeStyles()((theme: Theme) => ({
     display: 'inline',
     fontWeight: 'bold',
     alignSelf: 'center',
-    color: theme.palette.common.grayDarkest,
+    color: theme.palette.common.grayDarker,
   },
   currentItem: {
     fontWeight: 600,
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/ProblemBadge.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/ProblemBadge.tsx
index a80f036a9..8a05af3ef 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/ProblemBadge.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/ProblemBadge.tsx
@@ -1,7 +1,9 @@
-import { Badge, SvgIconTypeMap, Tooltip } from '@mui/material';
-import { OverridableComponent } from '@mui/material/OverridableComponent';
 import React, { FC } from 'react';
+import { Badge, SvgIconTypeMap } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
 import clsx from 'clsx';
+import CustomTooltip from '~/components/_common/CustomTooltip';
+
 import useStyles from './styles';
 
 type ProblemBadgeProps = {
@@ -57,7 +59,7 @@ const ProblemBadge: FC<ProblemBadgeProps> = ({
         }
       }}
     >
-      <Tooltip describeChild title={description}>
+      <CustomTooltip describeChild title={description}>
         <Icon
           aria-label={`View ${description}`}
           aria-hidden={false}
@@ -74,7 +76,7 @@ const ProblemBadge: FC<ProblemBadgeProps> = ({
             }
           }}
         />
-      </Tooltip>
+      </CustomTooltip>
     </Badge>
   );
 };
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/RequestList.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/RequestList.tsx
index ab803fd44..e410f1d39 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/RequestList.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/RequestList.tsx
@@ -9,16 +9,15 @@ import {
   Table,
   TableContainer,
   TableBody,
-  Tooltip,
   TableHead,
 } from '@mui/material';
-import InputIcon from '@mui/icons-material/Input';
+import { ContentCopy, Input, SaveAlt } from '@mui/icons-material';
 import { Request } from '~/models/testSuiteModels';
-import RequestDetailModal from '~/components/RequestDetailModal/RequestDetailModal';
 import { getRequestDetails } from '~/api/RequestsApi';
-import useStyles from './styles';
-import { ContentCopy, SaveAlt } from '@mui/icons-material';
+import RequestDetailModal from '~/components/RequestDetailModal/RequestDetailModal';
+import CustomTooltip from '~/components/_common/CustomTooltip';
 import { useSnackbar } from 'notistack';
+import useStyles from './styles';
 
 interface RequestListProps {
   resultId: string;
@@ -69,9 +68,9 @@ const RequestList: FC<RequestListProps> = ({ requests, resultId, updateRequest,
   const renderReferenceIcon = (request: Request) => {
     if (request.result_id !== resultId) {
       return (
-        <Tooltip title="This request was performed in another test and the result is used by this test">
-          <InputIcon fontSize="small" sx={{ pr: 1 }} />
-        </Tooltip>
+        <CustomTooltip title="This request was performed in another test and the result is used by this test">
+          <Input fontSize="small" sx={{ pr: 1 }} />
+        </CustomTooltip>
       );
     }
   };
@@ -130,7 +129,7 @@ const RequestList: FC<RequestListProps> = ({ requests, resultId, updateRequest,
         </TableCell>
         <TableCell className={classes.requestUrlContainer}>
           <Box display="flex" alignItems="center">
-            <Tooltip title={request.url} placement="bottom-start">
+            <CustomTooltip title={request.url} placement="bottom-start">
               <Typography
                 variant="subtitle2"
                 component="p"
@@ -149,8 +148,8 @@ const RequestList: FC<RequestListProps> = ({ requests, resultId, updateRequest,
               >
                 {request.url}
               </Typography>
-            </Tooltip>
-            <Tooltip
+            </CustomTooltip>
+            <CustomTooltip
               open={copySuccess[request.url as keyof typeof copySuccess] || false}
               title="Text copied!"
               sx={
@@ -171,7 +170,7 @@ const RequestList: FC<RequestListProps> = ({ requests, resultId, updateRequest,
               >
                 <ContentCopy fontSize="inherit" />
               </IconButton>
-            </Tooltip>
+            </CustomTooltip>
           </Box>
         </TableCell>
         <TableCell>
@@ -181,9 +180,9 @@ const RequestList: FC<RequestListProps> = ({ requests, resultId, updateRequest,
         </TableCell>
         <TableCell>
           {request.direction === 'incoming' && (
-            <Tooltip title="Direction: incoming">
+            <CustomTooltip title="Direction: incoming">
               <SaveAlt />
-            </Tooltip>
+            </CustomTooltip>
           )}
         </TableCell>
         {view === 'run' && <TableCell>{renderDetailsButton(request)}</TableCell>}
diff --git a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestRunDetail.tsx b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestRunDetail.tsx
index f2cd41f78..1bfb74a3d 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestRunDetail.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/TestListItem/TestRunDetail.tsx
@@ -1,12 +1,13 @@
 import React, { FC, useEffect, useMemo } from 'react';
-import { Box, Card, Divider, Tab, Tabs, Tooltip, Typography } from '@mui/material';
+import { Box, Card, Divider, Tabs, Typography } from '@mui/material';
 import { Message, Request, Test, TestInput, TestOutput } from '~/models/testSuiteModels';
 import { shouldShowDescription } from '~/components/TestSuite/TestSuiteUtilities';
+import CustomTab from '~/components/_common/CustomTab';
+import CustomTooltip from '~/components/_common/CustomTooltip';
 import TabPanel from '~/components/TestSuite/TestSuiteDetails/TestListItem/TabPanel';
 import MessageList from '~/components/TestSuite/TestSuiteDetails/TestListItem/MessageList';
 import RequestList from '~/components/TestSuite/TestSuiteDetails/TestListItem/RequestList';
 import InputOutputList from '~/components/TestSuite/TestSuiteDetails/TestListItem/InputOutputList';
-import lightTheme from '~/styles/theme';
 import useStyles from './styles';
 import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
@@ -56,32 +57,22 @@ const TestRunDetail: FC<TestRunDetailProps> = ({
   });
 
   const renderTab = (tab: TabProps, index: number) => {
-    const darkTabText = {
-      '&.Mui-selected': {
-        color: lightTheme.palette.common.orangeDarker,
-      },
-    };
-
     if ((!tab.value || tab.value.length === 0) && tab.label !== 'About') {
       return (
-        <Tab
+        <CustomTab
           key={`${tab.label}-${index}`}
           label={
-            <Tooltip title={`No ${tab.label.toLowerCase()} available`}>
+            <CustomTooltip title={`No ${tab.label.toLowerCase()} available`}>
               <Typography variant="button">{tab.label}</Typography>
-            </Tooltip>
+            </CustomTooltip>
           }
           {...a11yProps(index)}
           disabled
-          sx={darkTabText}
-          style={{ pointerEvents: 'auto' }}
         />
       );
     }
 
-    return (
-      <Tab key={`${tab.label}-${index}`} label={tab.label} {...a11yProps(index)} sx={darkTabText} />
-    );
+    return <CustomTab key={`${tab.label}-${index}`} label={tab.label} {...a11yProps(index)} />;
   };
 
   return (
diff --git a/client/src/components/TestSuite/TestSuiteDetails/styles.tsx b/client/src/components/TestSuite/TestSuiteDetails/styles.tsx
index 681733146..15d0cf917 100644
--- a/client/src/components/TestSuite/TestSuiteDetails/styles.tsx
+++ b/client/src/components/TestSuite/TestSuiteDetails/styles.tsx
@@ -12,7 +12,7 @@ export default makeStyles()((theme: Theme) => ({
     display: 'inline',
     fontWeight: 'bold',
     alignSelf: 'center',
-    color: theme.palette.common.grayDarkest,
+    color: theme.palette.common.grayDarker,
   },
   testGroupCardHeader: {
     display: 'flex',
diff --git a/client/src/components/TestSuite/TestSuiteTree/TestGroupTreeItem.tsx b/client/src/components/TestSuite/TestSuiteTree/TestGroupTreeItem.tsx
index 96ae327d1..7f1b1a11f 100644
--- a/client/src/components/TestSuite/TestSuiteTree/TestGroupTreeItem.tsx
+++ b/client/src/components/TestSuite/TestSuiteTree/TestGroupTreeItem.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { TestGroup } from '~/models/testSuiteModels';
-import CustomTreeItem from '~/components/_common/TreeItem';
+import CustomTreeItem from '~/components/_common/CustomTreeItem';
 import TreeItemLabel from './TreeItemLabel';
 import ResultIcon from '../TestSuiteDetails/ResultIcon';
 
diff --git a/client/src/components/TestSuite/TestSuiteTree/TestSuiteTree.tsx b/client/src/components/TestSuite/TestSuiteTree/TestSuiteTree.tsx
index 860e72ed8..5586ce6aa 100644
--- a/client/src/components/TestSuite/TestSuiteTree/TestSuiteTree.tsx
+++ b/client/src/components/TestSuite/TestSuiteTree/TestSuiteTree.tsx
@@ -12,7 +12,7 @@ import WarningAmberIcon from '@mui/icons-material/WarningAmber';
 import useStyles from './styles';
 import TestGroupTreeItem from './TestGroupTreeItem';
 import TreeItemLabel from './TreeItemLabel';
-import CustomTreeItem from '~/components/_common/TreeItem';
+import CustomTreeItem from '~/components/_common/CustomTreeItem';
 import PresetsSelector from '~/components/PresetsSelector/PresetsSelector';
 import lightTheme from '~/styles/theme';
 
diff --git a/client/src/components/TestSuite/TestSuiteTree/styles.tsx b/client/src/components/TestSuite/TestSuiteTree/styles.tsx
index e7173da6d..5c77c78d3 100644
--- a/client/src/components/TestSuite/TestSuiteTree/styles.tsx
+++ b/client/src/components/TestSuite/TestSuiteTree/styles.tsx
@@ -22,7 +22,7 @@ export default makeStyles()((theme: Theme) => ({
     display: 'inline',
     fontWeight: 'bold',
     alignSelf: 'center',
-    color: theme.palette.common.grayDarkest,
+    color: theme.palette.common.grayDarker,
   },
   testSuiteTreePanel: {
     display: 'flex',
@@ -45,9 +45,9 @@ export default makeStyles()((theme: Theme) => ({
     padding: '8px 20px !important',
   },
   treeItemTopBorder: {
-    borderTop: `1px solid ${theme.palette.common.grayLighter}`,
+    borderTop: `1px solid ${theme.palette.divider}`,
   },
   treeItemBottomBorder: {
-    borderBottom: `1px solid ${theme.palette.common.grayLighter}`,
+    borderBottom: `1px solid ${theme.palette.divider}`,
   },
 }));
diff --git a/client/src/components/_common/ActionModal.tsx b/client/src/components/_common/ActionModal.tsx
index dd1997c3d..45533a81f 100644
--- a/client/src/components/_common/ActionModal.tsx
+++ b/client/src/components/_common/ActionModal.tsx
@@ -25,7 +25,13 @@ const ActionModal: FC<ActionModalProps> = ({ modalVisible, message, cancelTestRu
         </DialogContentText>
       </DialogContent>
       <DialogActions>
-        <Button color="primary" onClick={cancelTestRun} data-testid="cancel-button">
+        <Button
+          color="secondary"
+          variant="contained"
+          disableElevation
+          onClick={cancelTestRun}
+          data-testid="cancel-button"
+        >
           Cancel
         </Button>
       </DialogActions>
diff --git a/client/src/components/_common/BackButton.tsx b/client/src/components/_common/BackButton.tsx
index 81f642d63..68fb7ba4d 100644
--- a/client/src/components/_common/BackButton.tsx
+++ b/client/src/components/_common/BackButton.tsx
@@ -1,7 +1,8 @@
 import React, { FC } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { IconButton } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import { useNavigate } from 'react-router-dom';
+import CustomTooltip from '~/components/_common/CustomTooltip';
 
 export interface BackButtonProps {
   tooltipText: string;
@@ -12,11 +13,11 @@ const BackButton: FC<BackButtonProps> = ({ tooltipText, destination }) => {
   const navigate = useNavigate();
 
   return (
-    <Tooltip title={tooltipText}>
+    <CustomTooltip title={tooltipText}>
       <IconButton size="small" onClick={() => navigate(destination)}>
         <ArrowBackIcon fontSize="large" />
       </IconButton>
-    </Tooltip>
+    </CustomTooltip>
   );
 };
 
diff --git a/client/src/components/_common/CustomTab.tsx b/client/src/components/_common/CustomTab.tsx
new file mode 100644
index 000000000..2a7239bf5
--- /dev/null
+++ b/client/src/components/_common/CustomTab.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import { Tab } from '@mui/material';
+
+interface CustomTabProps {
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+
+const CustomTab = styled((props: CustomTabProps) => <Tab disableRipple {...props} />)(
+  ({ theme }) => ({
+    pointerEvents: 'auto',
+    fontWeight: 'bolder',
+    '&:hover, :focus-within': {
+      color: theme.palette.common.grayDarkest,
+    },
+    '&:disabled': {
+      color: theme.palette.common.gray,
+    },
+    '&.Mui-selected': {
+      color: theme.palette.common.orangeDarker,
+    },
+  })
+);
+
+export default CustomTab;
diff --git a/client/src/components/_common/CustomTooltip.tsx b/client/src/components/_common/CustomTooltip.tsx
new file mode 100644
index 000000000..bac502805
--- /dev/null
+++ b/client/src/components/_common/CustomTooltip.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip';
+
+const CustomTooltip = styled(({ className, ...props }: TooltipProps) => (
+  <Tooltip {...props} classes={{ popper: className }} />
+))(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    fontSize: theme.typography.pxToRem(16),
+  },
+}));
+
+export default CustomTooltip;
diff --git a/client/src/components/_common/TreeItem.tsx b/client/src/components/_common/CustomTreeItem.tsx
similarity index 95%
rename from client/src/components/_common/TreeItem.tsx
rename to client/src/components/_common/CustomTreeItem.tsx
index 2384263c6..4be7eceb5 100644
--- a/client/src/components/_common/TreeItem.tsx
+++ b/client/src/components/_common/CustomTreeItem.tsx
@@ -9,6 +9,7 @@ import clsx from 'clsx';
 import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import { useNavigate } from 'react-router-dom';
+import lightTheme from '~/styles/theme';
 
 interface CustomTreeItemContentProps extends TreeItemContentProps {
   testId?: string;
@@ -95,7 +96,7 @@ const CustomTreeItem = styled((props: TreeItemProps) => (
   <TreeItem ContentComponent={CustomContent} {...props} />
 ))(() => ({
   [`& .${treeItemClasses.selected}`]: {
-    backgroundColor: 'rgba(248, 139, 48, 0.2) !important',
+    backgroundColor: `${lightTheme.palette.common.orangeLighter} !important`,
   },
   [`& .${treeItemClasses.content}`]: {
     width: 'auto',
diff --git a/client/src/components/_common/SelectionPanel/RadioSelection.tsx b/client/src/components/_common/SelectionPanel/RadioSelection.tsx
index e2fbebe68..8b6bff6af 100644
--- a/client/src/components/_common/SelectionPanel/RadioSelection.tsx
+++ b/client/src/components/_common/SelectionPanel/RadioSelection.tsx
@@ -1,15 +1,8 @@
 import React, { FC, useEffect } from 'react';
-import {
-  Box,
-  FormControl,
-  FormControlLabel,
-  FormLabel,
-  Radio,
-  RadioGroup,
-  Tooltip,
-} from '@mui/material';
+import { Box, FormControl, FormControlLabel, FormLabel, Radio, RadioGroup } from '@mui/material';
 import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';
 import { RadioOption, RadioOptionSelection } from '~/models/selectionModels';
+import CustomTooltip from '~/components/_common/CustomTooltip';
 
 export interface RadioSelectionProps {
   options: RadioOption[];
@@ -50,9 +43,9 @@ const RadioSelection: FC<RadioSelectionProps> = ({
           <FormLabel sx={{ display: 'flex', alignItems: 'center' }}>
             {option.title || option.id}
             {option.description && (
-              <Tooltip title={option.description}>
+              <CustomTooltip title={option.description}>
                 <HelpOutlineOutlinedIcon fontSize="small" color="secondary" sx={{ px: 0.5 }} />
-              </Tooltip>
+              </CustomTooltip>
             )}
           </FormLabel>
 
diff --git a/client/src/components/_common/SelectionPanel/styles.tsx b/client/src/components/_common/SelectionPanel/styles.tsx
index b9dc16304..2c2e69625 100644
--- a/client/src/components/_common/SelectionPanel/styles.tsx
+++ b/client/src/components/_common/SelectionPanel/styles.tsx
@@ -1,6 +1,7 @@
+import { Theme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';
 
-export default makeStyles()(() => ({
+export default makeStyles()((theme: Theme) => ({
   optionsList: {
     display: 'flex',
     flexDirection: 'column',
@@ -10,6 +11,6 @@ export default makeStyles()(() => ({
     overflow: 'auto',
   },
   selectedItem: {
-    backgroundColor: 'rgba(248, 139, 48, 0.2) !important',
+    backgroundColor: `${theme.palette.common.orangeLighter} !important`,
   },
 }));
diff --git a/client/src/components/_common/__tests__/TreeItem.test.tsx b/client/src/components/_common/__tests__/TreeItem.test.tsx
index 584d0f9fe..ec998aff2 100644
--- a/client/src/components/_common/__tests__/TreeItem.test.tsx
+++ b/client/src/components/_common/__tests__/TreeItem.test.tsx
@@ -6,7 +6,7 @@ import userEvent from '@testing-library/user-event';
 import TreeView from '@mui/lab/TreeView';
 import TreeItemLabel from 'components/TestSuite/TestSuiteTree/TreeItemLabel';
 import ThemeProvider from 'components/ThemeProvider';
-import CustomTreeItem from '../TreeItem';
+import CustomTreeItem from '../CustomTreeItem';
 import { mockedTestSuite } from '../__mocked_data__/mockData';
 
 test('renders custom TreeItem', () => {
diff --git a/client/src/styles/theme.tsx b/client/src/styles/theme.tsx
index ae1c8290e..6ec8556e4 100644
--- a/client/src/styles/theme.tsx
+++ b/client/src/styles/theme.tsx
@@ -7,6 +7,7 @@ declare module '@mui/material/styles/createPalette' {
     black: string;
     red: string;
     orangeLightest: string;
+    orangeLighter: string;
     orange: string;
     orangeDarker: string;
     orangeDarkest: string;
@@ -22,6 +23,7 @@ declare module '@mui/material/styles/createPalette' {
     grayLightest: string;
     grayMedium: string;
     grayDark: string;
+    grayDarker: string;
     grayDarkest: string;
   }
 }
@@ -30,22 +32,24 @@ const colors = {
   black: '#222',
   red: '#d95d77',
   orangeLightest: '#fff8f2',
-  orange: '#F88B30',
-  orangeDarker: '#C05702',
-  orangeDarkest: '#853C00',
+  orangeLighter: '#ffe4ce',
+  orange: '#f88b30',
+  orangeDarker: '#c05702',
+  orangeDarkest: '#853c00',
   green: '#2fa874',
-  blue: '#51788D',
+  blue: '#51788d',
   blueLight: '#9ad2f0',
   blueGray: '#cbd5df',
   blueGrayLighter: '#e6ebf2',
   blueGrayLightest: '#f1f8ff',
-  gray: 'rgba(0, 0, 0, 0.6)',
+  gray: '#707070',
   grayLight: '#bdbdbd',
   grayLighter: '#e0e0e0',
   grayLightest: '#eeeeee',
   grayMedium: '#757575',
   grayDark: '#616161',
-  grayDarkest: '#424242',
+  grayDarker: '#424242',
+  grayDarkest: '#191919',
 };
 
 const paletteBase = {