diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.ts b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.ts
deleted file mode 100644
index 2ccd335291..0000000000
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    container: {
-        maxWidth: '400px',
-    },
-    form: {
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-    },
-    input: { width: '100%', marginBottom: '1rem' },
-    selectInput: {
-        marginBottom: '1rem',
-        minWidth: '400px',
-        [theme.breakpoints.down(600)]: {
-            minWidth: '379px',
-        },
-    },
-    label: {
-        minWidth: '300px',
-        [theme.breakpoints.down(600)]: {
-            minWidth: 'auto',
-        },
-    },
-    cancelButton: {
-        marginLeft: '1.5rem',
-    },
-    inputDescription: {
-        marginBottom: '0.5rem',
-    },
-    permissionErrorContainer: {
-        position: 'relative',
-    },
-    errorMessage: {
-        fontSize: theme.fontSizes.smallBody,
-        color: theme.palette.error.main,
-        position: 'absolute',
-        top: '-8px',
-    },
-    selectOptionsLink: {
-        cursor: 'pointer',
-    },
-    selectOptionCheckbox: {
-        marginRight: '0.2rem',
-    },
-}));
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx
index d5265325c6..da396729b5 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx
@@ -1,13 +1,14 @@
 import {
+    Alert,
+    Box,
     Button,
     FormControl,
     FormControlLabel,
+    Link,
     Radio,
     RadioGroup,
+    styled,
     Typography,
-    Box,
-    Link,
-    Alert,
 } from '@mui/material';
 import { KeyboardArrowDownOutlined } from '@mui/icons-material';
 import React from 'react';
@@ -18,7 +19,6 @@ import Input from 'component/common/Input/Input';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { SelectProjectInput } from './SelectProjectInput/SelectProjectInput';
 import { ApiTokenFormErrorType } from './useApiTokenForm';
-import { useStyles } from './ApiTokenForm.styles';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { TokenType } from 'interfaces/token';
 
@@ -38,6 +38,47 @@ interface IApiTokenFormProps {
     clearErrors: (error?: ApiTokenFormErrorType) => void;
 }
 
+const StyledContainer = styled('div')(() => ({
+    maxWidth: '400px',
+}));
+
+const StyledForm = styled('form')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+}));
+
+const StyledInput = styled(Input)(({ theme }) => ({
+    width: '100%',
+    marginBottom: theme.spacing(2),
+}));
+
+const StyledSelectInput = styled(GeneralSelect)(({ theme }) => ({
+    marginBottom: theme.spacing(2),
+    minWidth: '400px',
+    [theme.breakpoints.down('sm')]: {
+        minWidth: '379px',
+    },
+}));
+
+const StyledInputDescription = styled('p')(({ theme }) => ({
+    marginBottom: theme.spacing(1),
+}));
+
+const StyledInputLabel = styled('label')(({ theme }) => ({
+    marginBottom: theme.spacing(1),
+}));
+
+const CancelButton = styled(Button)(({ theme }) => ({
+    marginLeft: theme.spacing(3),
+}));
+
+const StyledBox = styled(Box)({
+    marginTop: 'auto',
+    display: 'flex',
+    justifyContent: 'flex-end',
+});
+
 const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
     children,
     username,
@@ -54,7 +95,6 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
     clearErrors,
 }) => {
     const { uiConfig } = useUiConfig();
-    const { classes: styles } = useStyles();
     const { environments } = useEnvironments();
     const { projects: availableProjects } = useProjects();
 
@@ -97,7 +137,7 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
     const isUnleashCloud = Boolean(uiConfig?.flags?.UNLEASH_CLOUD);
 
     return (
-        <form onSubmit={handleSubmit} className={styles.form}>
+        <StyledForm onSubmit={handleSubmit}>
             <ConditionallyRender
                 condition={isUnleashCloud}
                 show={
@@ -110,12 +150,11 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
                     </Alert>
                 }
             />
-            <div className={styles.container}>
-                <p className={styles.inputDescription}>
+            <StyledContainer>
+                <StyledInputDescription>
                     What would you like to call this token?
-                </p>
-                <Input
-                    className={styles.input}
+                </StyledInputDescription>
+                <StyledInput
                     value={username}
                     name="username"
                     onChange={e => setUsername(e.target.value)}
@@ -126,9 +165,9 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
                     autoFocus
                 />
                 <FormControl sx={{ mb: 2, width: '100%' }}>
-                    <label id="token-type" className={styles.inputDescription}>
+                    <StyledInputLabel id="token-type">
                         What do you want to connect?
-                    </label>
+                    </StyledInputLabel>
                     <RadioGroup
                         aria-labelledby="token-type"
                         defaultValue="CLIENT"
@@ -166,9 +205,9 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
                         ))}
                     </RadioGroup>
                 </FormControl>
-                <p className={styles.inputDescription}>
+                <StyledInputDescription>
                     Which project do you want to give access to?
-                </p>
+                </StyledInputDescription>
                 <SelectProjectInput
                     disabled={type === TokenType.ADMIN}
                     options={selectableProjects}
@@ -177,10 +216,10 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
                     error={errors?.projects}
                     onFocus={() => clearErrors('projects')}
                 />
-                <p className={styles.inputDescription}>
+                <StyledInputDescription>
                     Which environment should the token have access to?
-                </p>
-                <GeneralSelect
+                </StyledInputDescription>
+                <StyledSelectInput
                     disabled={type === TokenType.ADMIN}
                     options={selectableEnvs}
                     value={environment}
@@ -190,22 +229,13 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
                     name="environment"
                     IconComponent={KeyboardArrowDownOutlined}
                     fullWidth
-                    className={styles.selectInput}
                 />
-            </div>
-            <Box
-                sx={{
-                    marginTop: 'auto',
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                }}
-            >
+            </StyledContainer>
+            <StyledBox>
                 {children}
-                <Button onClick={handleCancel} className={styles.cancelButton}>
-                    Cancel
-                </Button>
-            </Box>
-        </form>
+                <CancelButton onClick={handleCancel}>Cancel</CancelButton>
+            </StyledBox>
+        </StyledForm>
     );
 };
 
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.styles.ts b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.styles.ts
deleted file mode 100644
index 5c1e706282..0000000000
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.styles.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    selectOptionsLink: {
-        cursor: 'pointer',
-        fontSize: theme.fontSizes.bodySize,
-    },
-}));
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.tsx
index 10d8165223..7e7b4ee818 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.tsx
@@ -1,28 +1,25 @@
 import React, { FC } from 'react';
-import { Box, Link } from '@mui/material';
-import { useStyles } from './SelectAllButton.styles';
+import { Box, Link, styled } from '@mui/material';
 
 type SelectAllButtonProps = {
     isAllSelected: boolean;
     onClick: () => void;
 };
 
+const StyledLink = styled(Link)(({ theme }) => ({
+    cursor: 'pointer',
+    fontSize: theme.fontSizes.bodySize,
+})) as typeof Link;
+
 export const SelectAllButton: FC<SelectAllButtonProps> = ({
     isAllSelected,
     onClick,
 }) => {
-    const { classes: styles } = useStyles();
-
     return (
         <Box sx={{ ml: 3.5, my: 0.5 }}>
-            <Link
-                onClick={onClick}
-                className={styles.selectOptionsLink}
-                component="button"
-                underline="hover"
-            >
+            <StyledLink onClick={onClick} component="button" underline="hover">
                 {isAllSelected ? 'Deselect all' : 'Select all'}
-            </Link>
+            </StyledLink>
         </Box>
     );
 };
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.styles.ts b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.styles.ts
deleted file mode 100644
index 7c29c9bd3c..0000000000
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.styles.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { makeStyles } from 'tss-react/mui';
-
-export const useStyles = makeStyles()(theme => ({
-    selectOptionCheckbox: {
-        marginRight: '0.2rem',
-    },
-}));
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.tsx
index 37e2c3c4ca..62c10564fa 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.tsx
@@ -5,6 +5,7 @@ import {
     TextField,
     Box,
     Paper,
+    styled,
 } from '@mui/material';
 import { Autocomplete } from '@mui/material';
 
@@ -17,7 +18,6 @@ import {
 import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import { IAutocompleteBoxOption } from 'component/common/AutocompleteBox/AutocompleteBox';
-import { useStyles } from '../ApiTokenForm.styles';
 import { SelectAllButton } from './SelectAllButton/SelectAllButton';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
@@ -26,6 +26,10 @@ const ALL_PROJECTS = '*';
 // Fix for shadow under Autocomplete - match with Select input
 const CustomPaper = ({ ...props }) => <Paper elevation={8} {...props} />;
 
+const SelectOptionCheckbox = styled(Checkbox)(({ theme }) => ({
+    marginRight: theme.spacing(0.4),
+}));
+
 export interface ISelectProjectInputProps {
     disabled?: boolean;
     options: IAutocompleteBoxOption[];
@@ -43,7 +47,6 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
     error,
     onFocus,
 }) => {
-    const { classes: styles } = useStyles();
     const [projects, setProjects] = useState<string[]>(
         typeof defaultValue === 'string' ? [defaultValue] : defaultValue
     );
@@ -82,11 +85,10 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
         { selected }: AutocompleteRenderOptionState
     ) => (
         <li {...props}>
-            <Checkbox
+            <SelectOptionCheckbox
                 icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
                 checkedIcon={<CheckBoxIcon fontSize="small" />}
                 checked={selected}
-                className={styles.selectOptionCheckbox}
             />
             {option.label}
         </li>