diff --git a/frontend/src/component/admin/users/UserForm/UserForm.styles.ts b/frontend/src/component/admin/users/UserForm/UserForm.styles.ts
index 40cd85cf5e..a179d251c6 100644
--- a/frontend/src/component/admin/users/UserForm/UserForm.styles.ts
+++ b/frontend/src/component/admin/users/UserForm/UserForm.styles.ts
@@ -38,7 +38,6 @@ export const useStyles = makeStyles(theme => ({
         position: 'relative',
     },
     errorMessage: {
-        // @ts-expect-error
         fontSize: theme.fontSizes.smallBody,
         color: theme.palette.error.main,
         position: 'absolute',
diff --git a/frontend/src/component/common/Feedback/Feedback.styles.ts b/frontend/src/component/common/Feedback/Feedback.styles.ts
index 19a65e3335..c77541b2c1 100644
--- a/frontend/src/component/common/Feedback/Feedback.styles.ts
+++ b/frontend/src/component/common/Feedback/Feedback.styles.ts
@@ -4,7 +4,7 @@ export const useStyles = makeStyles(theme => ({
     feedback: {
         borderRadius: '12.5px',
         backgroundColor: '#fff',
-        zIndex: '9999',
+        zIndex: 9999,
         boxShadow: '2px 2px 4px 4px rgba(143,143,143, 0.25)',
         padding: '1.5rem',
         maxWidth: '400px',
diff --git a/frontend/src/component/common/Splash/Splash.styles.ts b/frontend/src/component/common/Splash/Splash.styles.ts
index 89d64edbe1..2a64b56ccd 100644
--- a/frontend/src/component/common/Splash/Splash.styles.ts
+++ b/frontend/src/component/common/Splash/Splash.styles.ts
@@ -29,7 +29,7 @@ export const useStyles = makeStyles(theme => ({
             right: '0px',
             bottom: '0px',
             padding: '2rem 0',
-            zIndex: '500',
+            zIndex: 500,
             position: 'fixed',
             width: '100%',
             height: '100%',
diff --git a/frontend/src/component/context/ContextForm/ContextForm.styles.ts b/frontend/src/component/context/ContextForm/ContextForm.styles.ts
index 7ba6779c28..a9f53f195e 100644
--- a/frontend/src/component/context/ContextForm/ContextForm.styles.ts
+++ b/frontend/src/component/context/ContextForm/ContextForm.styles.ts
@@ -54,7 +54,6 @@ export const useStyles = makeStyles(theme => ({
         position: 'relative',
     },
     errorMessage: {
-        // @ts-expect-error
         fontSize: theme.fontSizes.smallBody,
         color: theme.palette.error.main,
         position: 'absolute',
diff --git a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.styles.ts b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.styles.ts
index c798e3e5fd..6cd7210b25 100644
--- a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.styles.ts
+++ b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.styles.ts
@@ -38,7 +38,6 @@ export const useStyles = makeStyles(theme => ({
         position: 'relative',
     },
     errorMessage: {
-        // @ts-expect-error
         fontSize: theme.fontSizes.smallBody,
         color: theme.palette.error.main,
         position: 'absolute',
diff --git a/frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.styles.ts b/frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.styles.ts
index 60e0b52518..11aabd3422 100644
--- a/frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.styles.ts
+++ b/frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.styles.ts
@@ -6,7 +6,6 @@ export const useStyles = makeStyles(theme => ({
     },
     formHeader: {
         fontWeight: 'bold',
-        // @ts-expect-error
         fontSize: theme.fontSizes.bodySize,
         marginTop: '1.5rem',
         marginBottom: '0.5rem',
diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts b/frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts
index c2770e7da1..2dadac70a1 100644
--- a/frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts
+++ b/frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts
@@ -38,7 +38,6 @@ export const useStyles = makeStyles(theme => ({
         marginBottom: '0.5rem',
     },
     typeDescription: {
-        // @ts-expect-error
         fontSize: theme.fontSizes.smallBody,
         color: theme.palette.grey[600],
         top: '-13px',
@@ -55,7 +54,6 @@ export const useStyles = makeStyles(theme => ({
         position: 'relative',
     },
     errorMessage: {
-        // @ts-expect-error
         fontSize: theme.fontSizes.smallBody,
         color: theme.palette.error.main,
         position: 'absolute',
diff --git a/frontend/src/component/menu/Header/Header.styles.ts b/frontend/src/component/menu/Header/Header.styles.ts
index 091b89226a..410b6787e6 100644
--- a/frontend/src/component/menu/Header/Header.styles.ts
+++ b/frontend/src/component/menu/Header/Header.styles.ts
@@ -7,7 +7,7 @@ export const useStyles = makeStyles(theme => ({
         padding: '0.5rem',
         boxShadow: 'none',
         position: 'relative',
-        zIndex: '300',
+        zIndex: 300,
     },
     links: {
         display: 'flex',
diff --git a/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.styles.ts b/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.styles.ts
index 36b212badf..5eb051e6c7 100644
--- a/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.styles.ts
+++ b/frontend/src/component/tagTypes/TagTypeForm/TagTypeForm.styles.ts
@@ -38,7 +38,6 @@ export const useStyles = makeStyles(theme => ({
         position: 'relative',
     },
     errorMessage: {
-        // @ts-expect-error
         fontSize: theme.fontSizes.smallBody,
         color: theme.palette.error.main,
         position: 'absolute',
diff --git a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.js b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.js
index 21cceaad62..07446f1bff 100644
--- a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.js
+++ b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.js
@@ -3,7 +3,7 @@ import { makeStyles } from '@material-ui/styles';
 export const useStyles = makeStyles(theme => ({
     profile: {
         position: 'absolute',
-        zIndex: '5000',
+        zIndex: 5000,
         minWidth: '300px',
         right: 0,
         padding: '1.5rem',
diff --git a/frontend/src/themes/main-theme.js b/frontend/src/themes/main-theme.ts
similarity index 87%
rename from frontend/src/themes/main-theme.js
rename to frontend/src/themes/main-theme.ts
index 70c1443632..81eb4bfa34 100644
--- a/frontend/src/themes/main-theme.js
+++ b/frontend/src/themes/main-theme.ts
@@ -1,6 +1,16 @@
-import { createTheme } from '@material-ui/core/styles';
+import { createTheme, Theme } from '@material-ui/core/styles';
 
-const theme = createTheme({
+type MainTheme = typeof mainTheme;
+
+declare module '@material-ui/core/styles/createTheme' {
+    interface Theme extends MainTheme {}
+}
+
+declare module '@material-ui/core/styles/makeStyles' {
+    interface Theme extends MainTheme {}
+}
+
+const mainTheme = {
     typography: {
         fontFamily: ['Sen', 'Roboto, sans-serif'],
         fontWeightBold: '700',
@@ -117,6 +127,6 @@ const theme = createTheme({
         semi: '700',
         bold: '700',
     },
-});
+};
 
-export default theme;
+export default createTheme(mainTheme as unknown as Theme);