diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js
index 0bff19970..af8b96394 100644
--- a/frontend/.storybook/main.js
+++ b/frontend/.storybook/main.js
@@ -1,5 +1,5 @@
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
 
   addons: [
     '@storybook/addon-links',
@@ -12,6 +12,8 @@ module.exports = {
     options: {}
   },
 
+  staticDirs: ['../public'],
+
   docs: {
     autodocs: true
   }
diff --git a/frontend/.storybook/preview.js b/frontend/.storybook/preview.js
index d0834a547..1181eaf2f 100644
--- a/frontend/.storybook/preview.js
+++ b/frontend/.storybook/preview.js
@@ -3,6 +3,7 @@ import themesConf from '../src/lib/themes';
 import { StylesProvider } from '@mui/styles';
 import '../src/i18n/config';
 import ThemeProviderNexti18n from '../src/i18n/ThemeProviderNexti18n';
+import { StyledEngineProvider } from '@mui/material/styles';
 
 const darkTheme = themesConf['dark'];
 const lightTheme = themesConf['light'];
@@ -12,9 +13,11 @@ const withThemeProvider = (Story, context) => {
   const theme = backgroundColor !== 'dark' ? lightTheme : darkTheme;
 
   const ourThemeProvider = (
-    <ThemeProviderNexti18n theme={theme}>
-      <Story {...context} />
-    </ThemeProviderNexti18n>
+    <StyledEngineProvider injectFirst>
+      <ThemeProviderNexti18n theme={theme}>
+        <Story {...context} />
+      </ThemeProviderNexti18n>
+    </StyledEngineProvider>
   );
   if (process.env.NODE_ENV !== 'test') {
     return ourThemeProvider;
diff --git a/frontend/package.json b/frontend/package.json
index 53d8be99f..138f89148 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -97,8 +97,8 @@
     "lint:fix": "eslint -c package.json --fix 'src/**/*.{js,jsx,ts,tsx}'",
     "i18n": "npx --no-install i18next ./src/**/ts* ./src/**/**/*.ts* ./src/**/**/**/*.ts* -c ./src/i18n/i18next-parser.config.js",
     "tsc": "tsc",
-    "storybook": "storybook dev -p 6006 -s public",
-    "build-storybook": "storybook build -s public"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "browserslist": {
     "production": [
diff --git a/frontend/src/components/Activity/ActivityContainer.tsx b/frontend/src/components/Activity/ActivityContainer.tsx
index fa5acaf41..da185cc6e 100644
--- a/frontend/src/components/Activity/ActivityContainer.tsx
+++ b/frontend/src/components/Activity/ActivityContainer.tsx
@@ -17,10 +17,13 @@ const useStyles = makeStyles({
   toolbar: {
     padding: 0,
   },
-  caption: {
+  select: {
     fontSize: '.85em',
   },
-  select: {
+  selectLabel: {
+    fontSize: '.85em',
+  },
+  displayedRows: {
     fontSize: '.85em',
   },
 });
@@ -102,6 +105,8 @@ function Container() {
     return entries;
   }
 
+  console.log(classes);
+
   return (
     <>
       <ListHeader title={t('activity|Activity')} />
diff --git a/frontend/src/components/Applications/ApplicationEdit.tsx b/frontend/src/components/Applications/ApplicationEdit.tsx
index ad8bd4b6e..768886004 100644
--- a/frontend/src/components/Applications/ApplicationEdit.tsx
+++ b/frontend/src/components/Applications/ApplicationEdit.tsx
@@ -75,6 +75,7 @@ export default function ApplicationEdit(props: ApplicationEditProps) {
           <Field
             name="name"
             component={TextField}
+            variant="standard"
             margin="dense"
             label={t('frequent|Name')}
             type="text"
@@ -84,6 +85,7 @@ export default function ApplicationEdit(props: ApplicationEditProps) {
           <Field
             name="product_id"
             component={TextField}
+            variant="standard"
             margin="dense"
             label={t('frequent|Product ID')}
             type="text"
@@ -93,6 +95,7 @@ export default function ApplicationEdit(props: ApplicationEditProps) {
           <Field
             name="description"
             component={TextField}
+            variant="standard"
             margin="dense"
             label={t('frequent|Description')}
             type="text"
@@ -102,6 +105,7 @@ export default function ApplicationEdit(props: ApplicationEditProps) {
             <Field
               type="text"
               name="appToClone"
+              variant="standard"
               label={t('applications|Groups/Channels')}
               select
               helperText={t(
diff --git a/frontend/src/components/Channels/ChannelAvatar.tsx b/frontend/src/components/Channels/ChannelAvatar.tsx
index 799083b97..ce686079c 100644
--- a/frontend/src/components/Channels/ChannelAvatar.tsx
+++ b/frontend/src/components/Channels/ChannelAvatar.tsx
@@ -22,5 +22,5 @@ const useStyles = makeStyles((theme: Theme) => ({
 export default function ChannelAvatar(props: ChannelAvatarProps) {
   const classes = useStyles(props);
 
-  return <Avatar className={classes.colorAvatar}>{props.children || ''}</Avatar>;
+  return <Avatar className={classes.colorAvatar}>{props.children || ' '}</Avatar>;
 }
diff --git a/frontend/src/components/Channels/ChannelEdit.tsx b/frontend/src/components/Channels/ChannelEdit.tsx
index 057c95846..1c0083839 100644
--- a/frontend/src/components/Channels/ChannelEdit.tsx
+++ b/frontend/src/components/Channels/ChannelEdit.tsx
@@ -186,6 +186,7 @@ export default function ChannelEdit(props: ChannelEditProps) {
                 <Field
                   name="name"
                   component={TextField}
+                  variant="standard"
                   margin="dense"
                   label={t('frequent|Name')}
                   InputLabelProps={{ shrink: true }}
@@ -199,8 +200,8 @@ export default function ChannelEdit(props: ChannelEditProps) {
               </Grid>
             </Grid>
           </Grid>
-          <FormControl variant="standard" margin="dense" disabled={!isCreation} fullWidth>
-            <InputLabel>Architecture</InputLabel>
+          <FormControl margin="dense" disabled={!isCreation} fullWidth>
+            <InputLabel variant="standard">Architecture</InputLabel>
             <MuiSelect
               variant="standard"
               value={arch}
diff --git a/frontend/src/components/Groups/GroupEditDialog/GroupDetailsForm.tsx b/frontend/src/components/Groups/GroupEditDialog/GroupDetailsForm.tsx
index be2a97997..21b738a86 100644
--- a/frontend/src/components/Groups/GroupEditDialog/GroupDetailsForm.tsx
+++ b/frontend/src/components/Groups/GroupEditDialog/GroupDetailsForm.tsx
@@ -22,6 +22,7 @@ export default function GroupDetailsForm(props: GroupDetailsFormProps) {
           <Field
             name="name"
             component={TextField}
+            variant="standard"
             margin="dense"
             label="Name"
             required
@@ -30,11 +31,14 @@ export default function GroupDetailsForm(props: GroupDetailsFormProps) {
           />
         </Grid>
         <Grid item xs={4}>
-          <FormControl variant="standard" margin="dense" fullWidth>
-            <InputLabel shrink>{t('groups|Channel')}</InputLabel>
+          <FormControl margin="dense" fullWidth>
+            <InputLabel variant="standard" shrink>
+              {t('groups|Channel')}
+            </InputLabel>
             <Field
               name="channel"
               component={Select}
+              variant="standard"
               displayEmpty
               defaultValue={values.channel}
               onChange={(e: any) => {
@@ -56,6 +60,7 @@ export default function GroupDetailsForm(props: GroupDetailsFormProps) {
           <Field
             name="track"
             component={TextField}
+            variant="standard"
             margin="dense"
             label={t('groups|Track (identifier for clients, filled with the group ID if omitted)')}
             fullWidth
@@ -66,6 +71,7 @@ export default function GroupDetailsForm(props: GroupDetailsFormProps) {
           <Field
             name="description"
             component={TextField}
+            variant="standard"
             margin="dense"
             label={t('groups|Description')}
             fullWidth
diff --git a/frontend/src/components/Groups/GroupEditDialog/GroupPolicyForm.tsx b/frontend/src/components/Groups/GroupEditDialog/GroupPolicyForm.tsx
index ccf3c2acb..bbab42b8d 100644
--- a/frontend/src/components/Groups/GroupEditDialog/GroupPolicyForm.tsx
+++ b/frontend/src/components/Groups/GroupEditDialog/GroupPolicyForm.tsx
@@ -125,6 +125,7 @@ export default function GroupPolicyForm(props: GroupPolicyFormProps) {
               <Field
                 name="maxUpdates"
                 component={TextField}
+                variant="standard"
                 label={t('groups|Max number of updates')}
                 margin="dense"
                 type="number"
@@ -143,6 +144,7 @@ export default function GroupPolicyForm(props: GroupPolicyFormProps) {
               <Field
                 name="updatesPeriodRange"
                 component={TextField}
+                variant="standard"
                 margin="dense"
                 type="number"
                 fullWidth
@@ -156,6 +158,7 @@ export default function GroupPolicyForm(props: GroupPolicyFormProps) {
               <Field
                 name="updatesPeriodUnit"
                 component={TextField}
+                variant="standard"
                 margin="dense"
                 select
                 fullWidth
@@ -182,6 +185,7 @@ export default function GroupPolicyForm(props: GroupPolicyFormProps) {
                 <Field
                   name="updatesTimeout"
                   component={TextField}
+                  variant="standard"
                   margin="dense"
                   type="number"
                   defaultValue={values.updatesTimeout}
@@ -193,6 +197,7 @@ export default function GroupPolicyForm(props: GroupPolicyFormProps) {
                   <Field
                     name="updatesTimeoutUnit"
                     component={TextField}
+                    variant="standard"
                     margin="dense"
                     select
                     fullWidth
diff --git a/frontend/src/components/Instances/Details.tsx b/frontend/src/components/Instances/Details.tsx
index ca9b64f36..4b04b3471 100644
--- a/frontend/src/components/Instances/Details.tsx
+++ b/frontend/src/components/Instances/Details.tsx
@@ -250,6 +250,7 @@ function EditDialog(props: EditDialogProps) {
           <Field
             name="name"
             component={TextField}
+            variant="standard"
             margin="dense"
             label={t('instances|Name')}
             type="text"
diff --git a/frontend/src/components/Instances/List.tsx b/frontend/src/components/Instances/List.tsx
index 8bb2bf9e6..a96dfcbc2 100644
--- a/frontend/src/components/Instances/List.tsx
+++ b/frontend/src/components/Instances/List.tsx
@@ -78,12 +78,11 @@ function InstanceFilter(props: InstanceFilterProps) {
     <Box pr={2}>
       <Grid container spacing={2} justifyContent="flex-end">
         <Grid item xs={5}>
-          <FormControl variant="standard" fullWidth disabled={props.disabled}>
-            <InputLabel htmlFor="select-status" shrink>
+          <FormControl fullWidth disabled={props.disabled}>
+            <InputLabel variant="standard" htmlFor="select-status" shrink>
               {t('instances|Filter Status')}
             </InputLabel>
             <Select
-              variant="standard"
               onChange={(event: any) => changeFilter('status', event.target.value)}
               input={<Input id="select-status" />}
               renderValue={(selected: any) =>
@@ -107,12 +106,11 @@ function InstanceFilter(props: InstanceFilterProps) {
           </FormControl>
         </Grid>
         <Grid item xs={5}>
-          <FormControl variant="standard" fullWidth disabled={props.disabled}>
-            <InputLabel htmlFor="select-versions" shrink>
+          <FormControl fullWidth disabled={props.disabled}>
+            <InputLabel variant="standard" htmlFor="select-versions" shrink>
               {t('instances|Filter Version')}
             </InputLabel>
             <Select
-              variant="standard"
               onChange={(event: SelectChangeEvent<string>) =>
                 changeFilter('version', event.target.value)
               }
@@ -419,7 +417,7 @@ function ListView(props: { application: Application; group: Group }) {
                 </Box>
               </Grid>
               <Grid item>
-                <InputLabel htmlFor="instance-search-filter" shrink>
+                <InputLabel variant="standard" htmlFor="instance-search-filter" shrink>
                   {t('frequent|Search')}
                 </InputLabel>
                 <SearchInput
diff --git a/frontend/src/components/Packages/EditDialog.tsx b/frontend/src/components/Packages/EditDialog.tsx
index f1b3c0e67..22939464c 100644
--- a/frontend/src/components/Packages/EditDialog.tsx
+++ b/frontend/src/components/Packages/EditDialog.tsx
@@ -141,8 +141,8 @@ function EditDialog(props: EditDialogProps) {
           )}
           <Grid container justifyContent="space-between">
             <Grid item>
-              <FormControl variant="standard" margin="dense" className={classes.topSelect}>
-                <InputLabel>Type</InputLabel>
+              <FormControl margin="dense" className={classes.topSelect}>
+                <InputLabel variant="standard">Type</InputLabel>
                 <MuiSelect
                   variant="standard"
                   value={packageType}
@@ -159,13 +159,12 @@ function EditDialog(props: EditDialogProps) {
             </Grid>
             <Grid item>
               <FormControl
-                variant="standard"
                 margin="dense"
                 fullWidth
                 className={classes.topSelect}
                 disabled={!isCreation}
               >
-                <InputLabel>{t('packages|Architecture')}</InputLabel>
+                <InputLabel variant="standard">{t('packages|Architecture')}</InputLabel>
                 <MuiSelect variant="standard" value={arch} onChange={handleArchChange}>
                   {Object.keys(ARCHES).map((key: string) => {
                     const archName = ARCHES[parseInt(key)];
@@ -191,6 +190,7 @@ function EditDialog(props: EditDialogProps) {
                       <Field
                         name="url"
                         component={TextField}
+                        variant="standard"
                         margin="dense"
                         label={t('packages|URL')}
                         type="url"
@@ -200,6 +200,7 @@ function EditDialog(props: EditDialogProps) {
                       <Field
                         name="filename"
                         component={TextField}
+                        variant="standard"
                         margin="dense"
                         label={t('packages|Filename')}
                         type="text"
@@ -209,6 +210,7 @@ function EditDialog(props: EditDialogProps) {
                       <Field
                         name="description"
                         component={TextField}
+                        variant="standard"
                         margin="dense"
                         label={t('packages|Description')}
                         type="text"
@@ -220,6 +222,7 @@ function EditDialog(props: EditDialogProps) {
                           <Field
                             name="version"
                             component={TextField}
+                            variant="standard"
                             margin="dense"
                             label={t('packages|Version')}
                             type="text"
@@ -232,6 +235,7 @@ function EditDialog(props: EditDialogProps) {
                           <Field
                             name="size"
                             component={TextField}
+                            variant="standard"
                             margin="dense"
                             label={t('packages|Size')}
                             type="number"
@@ -244,6 +248,7 @@ function EditDialog(props: EditDialogProps) {
                       <Field
                         name="hash"
                         component={TextField}
+                        variant="standard"
                         margin="dense"
                         label={t('packages|Hash')}
                         type="text"
@@ -257,6 +262,7 @@ function EditDialog(props: EditDialogProps) {
                         <Field
                           name="flatcarHash"
                           component={TextField}
+                          variant="standard"
                           margin="dense"
                           label={t('packages|Flatcar Action SHA256')}
                           type="text"
@@ -267,11 +273,12 @@ function EditDialog(props: EditDialogProps) {
                           fullWidth
                         />
                       )}
-                      <FormControl variant="standard" margin="dense" fullWidth>
-                        <InputLabel>Channels Blacklist</InputLabel>
+                      <FormControl margin="dense" fullWidth>
+                        <InputLabel variant="standard">Channels Blacklist</InputLabel>
                         <Field
                           name="channelsBlacklist"
                           component={Select}
+                          variant="standard"
                           multiple
                           renderValue={(selected: string[]) =>
                             getChannelsNames(selected).join(' / ')
diff --git a/frontend/src/components/Packages/FileList.tsx b/frontend/src/components/Packages/FileList.tsx
index 577a5d34a..8bfb0f709 100644
--- a/frontend/src/components/Packages/FileList.tsx
+++ b/frontend/src/components/Packages/FileList.tsx
@@ -107,7 +107,6 @@ function FileListItem(props: FileListItemProps) {
         </Grid>
         <Grid item xs={12}>
           <TextField
-            variant="standard"
             name="name"
             margin="dense"
             label={t('packages|Name')}
@@ -123,7 +122,6 @@ function FileListItem(props: FileListItemProps) {
         <Grid item container spacing={1}>
           <Grid item xs={6}>
             <TextField
-              variant="standard"
               name="size"
               margin="dense"
               label={t('packages|Size')}
@@ -138,7 +136,6 @@ function FileListItem(props: FileListItemProps) {
           </Grid>
           <Grid item xs={6}>
             <TextField
-              variant="standard"
               name="hash"
               margin="dense"
               label={t('packages|SHA1 Hash (base64)')}
@@ -155,7 +152,6 @@ function FileListItem(props: FileListItemProps) {
           </Grid>
           <Grid item xs={6}>
             <TextField
-              variant="standard"
               name="hash256"
               margin="dense"
               label={t('packages|SHA256 Hash (hex)')}
diff --git a/frontend/src/components/common/AutoCompletePicker/AutoCompletePicker.tsx b/frontend/src/components/common/AutoCompletePicker/AutoCompletePicker.tsx
index ca4c53be4..1f193054f 100644
--- a/frontend/src/components/common/AutoCompletePicker/AutoCompletePicker.tsx
+++ b/frontend/src/components/common/AutoCompletePicker/AutoCompletePicker.tsx
@@ -19,6 +19,7 @@ interface RenderInputProps {
   classes: {
     inputRoot: string;
     inputInput: string;
+    textFieldRoot: string;
   };
   ref?: React.Ref<any>;
   fullWidth: boolean;
@@ -41,6 +42,9 @@ function renderInput(inputProps: RenderInputProps) {
 
   return (
     <TextField
+      classes={{
+        root: classes.textFieldRoot,
+      }}
       InputProps={{
         inputRef: ref,
         classes: {
@@ -107,6 +111,9 @@ const useStyles = makeStyles({
     flexGrow: 1,
     position: 'relative',
   },
+  textFieldRoot: {
+    marginTop: '0.6em',
+  },
   inputRoot: {
     flexWrap: 'wrap',
   },
@@ -207,8 +214,10 @@ export default function AutoCompletePicker(props: AutoCompletePickerProps) {
 
   return (
     <div>
-      <FormControl variant="standard" fullWidth>
-        <InputLabel shrink>{props.label}</InputLabel>
+      <FormControl fullWidth>
+        <InputLabel variant="standard" shrink>
+          {props.label}
+        </InputLabel>
         <Input
           onClick={() => {
             setShowPicker(true);
diff --git a/frontend/src/components/common/TimezonePicker/TimezonePicker.tsx b/frontend/src/components/common/TimezonePicker/TimezonePicker.tsx
index ee1a8eccb..2505b5612 100644
--- a/frontend/src/components/common/TimezonePicker/TimezonePicker.tsx
+++ b/frontend/src/components/common/TimezonePicker/TimezonePicker.tsx
@@ -27,6 +27,7 @@ interface RenderInputProps {
   classes: {
     inputRoot: string;
     inputInput: string;
+    textFieldRoot: string;
   };
   ref?: React.Ref<any>;
   InputProps: {
@@ -48,6 +49,9 @@ function renderInput(inputProps: RenderInputProps) {
 
   return (
     <TextField
+      classes={{
+        root: classes.textFieldRoot,
+      }}
       InputProps={{
         inputRef: ref,
         classes: {
@@ -109,6 +113,9 @@ const useStyles = makeStyles({
     flexGrow: 1,
     position: 'relative',
   },
+  textFieldRoot: {
+    marginTop: '0.6em',
+  },
   inputRoot: {
     flexWrap: 'wrap',
   },
@@ -188,8 +195,10 @@ export default function TimzonePicker(props: {
 
   return (
     <div>
-      <FormControl variant="standard" fullWidth>
-        <InputLabel shrink>Timezone</InputLabel>
+      <FormControl fullWidth>
+        <InputLabel variant="standard" shrink>
+          Timezone
+        </InputLabel>
         <Input
           onClick={onInputActivate}
           value={selectedTimezone}
diff --git a/frontend/src/i18n/LocaleSelect/LocaleSelect.tsx b/frontend/src/i18n/LocaleSelect/LocaleSelect.tsx
index 63be79448..aa238c482 100644
--- a/frontend/src/i18n/LocaleSelect/LocaleSelect.tsx
+++ b/frontend/src/i18n/LocaleSelect/LocaleSelect.tsx
@@ -36,10 +36,9 @@ export default function LocaleSelect(props: LocaleSelectProps) {
   };
 
   return (
-    <FormControl variant="standard" className={classes.formControl}>
+    <FormControl className={classes.formControl}>
       {props.showTitle && <FormLabel component="legend">{t('Select locale')}</FormLabel>}
       <Select
-        variant="standard"
         value={i18n.language ? i18n.language : 'en'}
         onChange={changeLng}
         inputProps={{ 'aria-label': t('Select locale') }}
diff --git a/frontend/src/lib/themes.ts b/frontend/src/lib/themes.ts
index f7880464b..8a8e16299 100644
--- a/frontend/src/lib/themes.ts
+++ b/frontend/src/lib/themes.ts
@@ -14,6 +14,23 @@ declare module '@mui/material/styles/createPalette' {
 }
 
 const lightTheme = createTheme({
+  components: {
+    MuiSelect: {
+      defaultProps: {
+        variant: 'standard',
+      },
+    },
+    MuiFormControl: {
+      defaultProps: {
+        variant: 'standard',
+      },
+    },
+    MuiTextField: {
+      defaultProps: {
+        variant: 'standard',
+      },
+    },
+  },
   palette: {
     primary: {
       contrastText: '#fff',
@@ -26,6 +43,9 @@ const lightTheme = createTheme({
   },
   typography: {
     fontFamily: 'Overpass, sans-serif',
+    body1: {
+      fontSize: '0.875rem',
+    },
     h1: {
       fontSize: '1.875rem',
       fontWeight: 900,