diff --git a/src/components/CreationCohort/ControlPanel/styles.ts b/src/components/CreationCohort/ControlPanel/styles.ts
index 59e803d9d..574420c2c 100644
--- a/src/components/CreationCohort/ControlPanel/styles.ts
+++ b/src/components/CreationCohort/ControlPanel/styles.ts
@@ -1,84 +1,82 @@
-import { makeStyles, createStyles } from '@mui/styles'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    rightPanelContainerStyle: {
-      position: 'fixed',
-      width: 284,
-      height: 'calc(100% - 16px)',
-      top: 0,
-      right: 0,
-      margin: 8,
-      overflow: 'auto'
-    },
-    container: {
-      borderRadius: 12,
-      border: '1px solid #CCCCCD',
-      backgroundColor: 'white',
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      marginTop: 8,
-      padding: 4,
-      '&:first-child': {
-        marginTop: 0
-      }
-    },
-    requestExecution: {
-      marginTop: 12,
-      marginBottom: 12,
-      backgroundColor: '#5BC5F2',
-      borderRadius: '26px',
-      border: 'none',
-      height: '42px',
-      width: '90%',
-      color: '#FFF',
-      '&:hover': {
-        backgroundColor: '#499cbf'
-      },
-      '&:disabled': {
-        opacity: 0.7
-      }
-    },
-    actionButton: {
-      backgroundColor: '#FFF',
-      marginBottom: 6,
-      borderRadius: '18px',
-      height: '36px',
-      width: '80%',
-      border: `2px solid currentColor`,
-      '&:disabled': {
-        color: '#ccc',
-        opacity: 0.7
-      },
-      '& > span': {
-        position: 'relative'
-      }
-    },
-    boldText: {
-      fontWeight: 700
-    },
-    blueText: {
-      color: '#5BC5F2'
-    },
-    redText: {
-      color: '#fc1847'
-    },
-    iconBorder: {
-      color: 'currentColor'
-    },
-    patientTypo: {
-      margin: '10px'
+const useStyles = makeStyles()(() => ({
+  rightPanelContainerStyle: {
+    position: 'fixed',
+    width: 284,
+    height: 'calc(100% - 16px)',
+    top: 0,
+    right: 0,
+    margin: 8,
+    overflow: 'auto'
+  },
+  container: {
+    borderRadius: 12,
+    border: '1px solid #CCCCCD',
+    backgroundColor: 'white',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    marginTop: 8,
+    padding: 4,
+    '&:first-child': {
+      marginTop: 0
+    }
+  },
+  requestExecution: {
+    marginTop: 12,
+    marginBottom: 12,
+    backgroundColor: '#5BC5F2',
+    borderRadius: '26px',
+    border: 'none',
+    height: '42px',
+    width: '90%',
+    color: '#FFF',
+    '&:hover': {
+      backgroundColor: '#499cbf'
     },
-    sidesMargin: {
-      margin: '0 10px'
+    '&:disabled': {
+      opacity: 0.7
+    }
+  },
+  actionButton: {
+    backgroundColor: '#FFF',
+    marginBottom: 6,
+    borderRadius: '18px',
+    height: '36px',
+    width: '80%',
+    border: `2px solid currentColor`,
+    '&:disabled': {
+      color: '#ccc',
+      opacity: 0.7
     },
-    errorAlert: {
-      marginTop: 8,
-      borderRadius: 12,
-      border: '1px solid currentColor'
+    '& > span': {
+      position: 'relative'
     }
-  })
-)
+  },
+  boldText: {
+    fontWeight: 700
+  },
+  blueText: {
+    color: '#5BC5F2'
+  },
+  redText: {
+    color: '#fc1847'
+  },
+  iconBorder: {
+    color: 'currentColor'
+  },
+  patientTypo: {
+    margin: '10px'
+  },
+  sidesMargin: {
+    margin: '0 10px'
+  },
+  errorAlert: {
+    marginTop: 8,
+    borderRadius: 12,
+    border: '1px solid currentColor'
+  }
+}))
 
 export default useStyles
diff --git a/src/components/CreationCohort/DiagramView/components/Breadcrumbs/styles.ts b/src/components/CreationCohort/DiagramView/components/Breadcrumbs/styles.ts
index 3a35b523d..6eb6ceaef 100644
--- a/src/components/CreationCohort/DiagramView/components/Breadcrumbs/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/Breadcrumbs/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     marginBottom: theme.spacing(2)
   }
diff --git a/src/components/CreationCohort/DiagramView/components/CriteriaCard/components/CriteriaCardContent/styles.ts b/src/components/CreationCohort/DiagramView/components/CriteriaCard/components/CriteriaCardContent/styles.ts
index e39ba9b4a..2880b10e3 100644
--- a/src/components/CreationCohort/DiagramView/components/CriteriaCard/components/CriteriaCardContent/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/CriteriaCard/components/CriteriaCardContent/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   cardContent: {
     display: 'flex',
     padding: 0,
diff --git a/src/components/CreationCohort/DiagramView/components/CriteriaCard/styles.ts b/src/components/CreationCohort/DiagramView/components/CriteriaCard/styles.ts
index 526aafa9f..b146a7532 100644
--- a/src/components/CreationCohort/DiagramView/components/CriteriaCard/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/CriteriaCard/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   criteriaItem: {
     display: 'flex',
     justifyContent: 'space-between',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/OccurrencesInputs/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/OccurrencesInputs/styles.ts
index 481a509dd..4962c25a0 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/OccurrencesInputs/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/OccurrencesInputs/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/VisitInputs/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/VisitInputs/styles.ts
index 86f5d858e..644dcceed 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/VisitInputs/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/VisitInputs/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   inputItem: {
     margin: '1em',
     width: 'calc(100% - 2em)'
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/styles.ts
deleted file mode 100644
index 318801fea..000000000
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/AdvancedInputs/styles.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { makeStyles } from 'tss-react/mui'
-
-const useStyles = makeStyles(() => ({}))
-
-export default useStyles
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/components/BiologySearch/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/components/BiologySearch/styles.ts
index db585258f..f20cf4753 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/components/BiologySearch/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/components/BiologySearch/styles.ts
@@ -1,7 +1,7 @@
-import makeStyles from '@mui/styles/makeStyles'
+import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/components/Form/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/components/Form/styles.ts
index 993d46280..8765a8bcb 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/components/Form/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/components/Form/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/components/Hierarchy/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/components/Hierarchy/styles.ts
index 5a6312799..f0112987d 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/components/Hierarchy/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/components/Hierarchy/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/styles.ts
index 49e9a181f..45d225af8 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/BiologyForm/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   tabs: {
     marginTop: 72,
     position: 'absolute',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CCAM/components/Form/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CCAM/components/Form/styles.ts
index 993d46280..8765a8bcb 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CCAM/components/Form/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CCAM/components/Form/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CCAM/components/Hierarchy/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CCAM/components/Hierarchy/styles.ts
index 1b08cd2bc..bde2875c0 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CCAM/components/Hierarchy/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CCAM/components/Hierarchy/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CCAM/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CCAM/styles.ts
index 49e9a181f..45d225af8 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CCAM/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/CCAM/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   tabs: {
     marginTop: 72,
     position: 'absolute',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/components/Form/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/components/Form/styles.ts
index 993d46280..8765a8bcb 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/components/Form/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/components/Form/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/components/Hierarchy/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/components/Hierarchy/styles.ts
index 9377b0413..478271216 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/components/Hierarchy/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/components/Hierarchy/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/styles.ts
index e07c837f3..6772fa0b4 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/Cim10Form/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   tabs: {
     marginTop: 72,
     position: 'absolute'
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/DemographicFrom/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/DemographicFrom/styles.ts
index e84745e7d..9e7a8bf6b 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/DemographicFrom/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/DemographicFrom/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/DocumentsForm/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/DocumentsForm/styles.ts
index 502e761d1..e57344c49 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/DocumentsForm/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/DocumentsForm/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHM/components/Form/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHM/components/Form/styles.ts
index 4ec06aa65..22ddd251b 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHM/components/Form/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHM/components/Form/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHM/components/Hierarchy/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHM/components/Hierarchy/styles.ts
index ad1de6d6a..e9857f518 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHM/components/Hierarchy/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHM/components/Hierarchy/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHM/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHM/styles.ts
index e07c837f3..6772fa0b4 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHM/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/GHM/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   tabs: {
     marginTop: 72,
     position: 'absolute'
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/IPPForm/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/IPPForm/styles.ts
index 2f657243f..9e7a8bf6b 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/IPPForm/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/IPPForm/styles.ts
@@ -1,6 +1,6 @@
-import makeStyles from '@mui/styles/makeStyles'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/components/Form/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/components/Form/styles.ts
index 2c038ebef..d26f1b494 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/components/Form/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/components/Form/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/components/Hierarchy/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/components/Hierarchy/styles.ts
index 1e2e30e90..b98ded115 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/components/Hierarchy/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/components/Hierarchy/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/styles.ts
index e07c837f3..6772fa0b4 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/MedicationForm/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   tabs: {
     marginTop: 72,
     position: 'absolute'
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/RequestForm/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/RequestForm/styles.ts
index e84745e7d..9e7a8bf6b 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/RequestForm/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/RequestForm/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/SupportedForm/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/SupportedForm/styles.ts
index e84745e7d..9e7a8bf6b 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/SupportedForm/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/SupportedForm/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/styles.ts
index 5f8b9ce0d..0d25dc846 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/CriteriaRightPanel/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/LogicalOperatorItem/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/LogicalOperatorItem/styles.ts
index 7f55428bd..c4e531471 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/LogicalOperatorItem/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/components/LogicalOperatorItem/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   backDrop: {
     height: '100vh',
     width: '100vw',
diff --git a/src/components/CreationCohort/DiagramView/components/LogicalOperator/styles.ts b/src/components/CreationCohort/DiagramView/components/LogicalOperator/styles.ts
index 6e4f05291..c483bf6d8 100644
--- a/src/components/CreationCohort/DiagramView/components/LogicalOperator/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/LogicalOperator/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   backDrop: {
     height: '100vh',
     width: '100vw',
diff --git a/src/components/CreationCohort/DiagramView/components/PopulationCard/components/styles.ts b/src/components/CreationCohort/DiagramView/components/PopulationCard/components/styles.ts
index 03752fdb8..19e618e2b 100644
--- a/src/components/CreationCohort/DiagramView/components/PopulationCard/components/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/PopulationCard/components/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/DiagramView/components/PopulationCard/styles.ts b/src/components/CreationCohort/DiagramView/components/PopulationCard/styles.ts
index bfe1cb8fd..6d82f3f7d 100644
--- a/src/components/CreationCohort/DiagramView/components/PopulationCard/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/PopulationCard/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   populationCard: {
     display: 'flex',
     justifyContent: 'space-between',
diff --git a/src/components/CreationCohort/DiagramView/components/TemporalConstraintCard/components/EventSequenceTable/styles.ts b/src/components/CreationCohort/DiagramView/components/TemporalConstraintCard/components/EventSequenceTable/styles.ts
index 8ec93c099..47a23aca9 100644
--- a/src/components/CreationCohort/DiagramView/components/TemporalConstraintCard/components/EventSequenceTable/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/TemporalConstraintCard/components/EventSequenceTable/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   inputContainer: {
     marginBottom: '24px'
   },
diff --git a/src/components/CreationCohort/DiagramView/components/TemporalConstraintCard/components/TemporalConstraintConfig/styles.ts b/src/components/CreationCohort/DiagramView/components/TemporalConstraintCard/components/TemporalConstraintConfig/styles.ts
index 9a6f224b1..3582eff5e 100644
--- a/src/components/CreationCohort/DiagramView/components/TemporalConstraintCard/components/TemporalConstraintConfig/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/TemporalConstraintCard/components/TemporalConstraintConfig/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   input: {
     width: 80,
     backgroundColor: '#FFF',
diff --git a/src/components/CreationCohort/DiagramView/components/TemporalConstraintCard/styles.ts b/src/components/CreationCohort/DiagramView/components/TemporalConstraintCard/styles.ts
index 84592dc85..82d39f49e 100644
--- a/src/components/CreationCohort/DiagramView/components/TemporalConstraintCard/styles.ts
+++ b/src/components/CreationCohort/DiagramView/components/TemporalConstraintCard/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     height: 42,
     marginLeft: 12,
diff --git a/src/components/CreationCohort/DiagramView/styles.ts b/src/components/CreationCohort/DiagramView/styles.ts
index 67ccc72c7..7119e1b8d 100644
--- a/src/components/CreationCohort/DiagramView/styles.ts
+++ b/src/components/CreationCohort/DiagramView/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/CreationCohort/JsonView/styles.ts b/src/components/CreationCohort/JsonView/styles.ts
index afdff8ae1..2206272f9 100644
--- a/src/components/CreationCohort/JsonView/styles.ts
+++ b/src/components/CreationCohort/JsonView/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     width: 'calc(100% - 220px) !important',
     height: '100% !important',
diff --git a/src/components/CreationCohort/Modals/ModalCohortTitle/styles.ts b/src/components/CreationCohort/Modals/ModalCohortTitle/styles.ts
index 53fb05103..bff68d7a8 100644
--- a/src/components/CreationCohort/Modals/ModalCohortTitle/styles.ts
+++ b/src/components/CreationCohort/Modals/ModalCohortTitle/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   inputContainer: {
     marginBottom: '24px'
   }
diff --git a/src/components/CreationCohort/Modals/ModalCreateNewRequest/styles.ts b/src/components/CreationCohort/Modals/ModalCreateNewRequest/styles.ts
index b16c2df35..f2d06d3b8 100644
--- a/src/components/CreationCohort/Modals/ModalCreateNewRequest/styles.ts
+++ b/src/components/CreationCohort/Modals/ModalCreateNewRequest/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   inputContainer: {
     marginBottom: '24px'
   },
diff --git a/src/components/CreationCohort/styles.ts b/src/components/CreationCohort/styles.ts
index ed8ac00f0..8016e7a56 100644
--- a/src/components/CreationCohort/styles.ts
+++ b/src/components/CreationCohort/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   grid: {
     height: '40vh'
   }
diff --git a/src/components/Dashboard/ExportModal/styles.ts b/src/components/Dashboard/ExportModal/styles.ts
index 2be993501..c2d746383 100644
--- a/src/components/Dashboard/ExportModal/styles.ts
+++ b/src/components/Dashboard/ExportModal/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   tableTitle: { marginBlock: 8 },
   list: {
     border: `1px solid ${theme.palette.grey[400]}`,
diff --git a/src/components/Dashboard/PatientList/components/styles.ts b/src/components/Dashboard/PatientList/components/styles.ts
index 13c7b15d9..5a4148e13 100644
--- a/src/components/Dashboard/PatientList/components/styles.ts
+++ b/src/components/Dashboard/PatientList/components/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   chartOverlay: {
     display: 'flex',
     flexDirection: 'column',
diff --git a/src/components/Dashboard/Preview/Charts/styles.js b/src/components/Dashboard/Preview/Charts/styles.js
index 3c1b0d8d7..b382f51cc 100644
--- a/src/components/Dashboard/Preview/Charts/styles.js
+++ b/src/components/Dashboard/Preview/Charts/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   tooltip: {
     position: 'absolute',
     textAlign: 'center',
diff --git a/src/components/Dashboard/Preview/styles.ts b/src/components/Dashboard/Preview/styles.ts
index 9caed339e..3f8ee4172 100644
--- a/src/components/Dashboard/Preview/styles.ts
+++ b/src/components/Dashboard/Preview/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     backgroundColor: '#E6F1FD'
   },
diff --git a/src/components/DataTable/styles.ts b/src/components/DataTable/styles.ts
index 4f5ed2e9b..88854ee10 100644
--- a/src/components/DataTable/styles.ts
+++ b/src/components/DataTable/styles.ts
@@ -1,152 +1,150 @@
-import { makeStyles, createStyles } from '@mui/styles'
+import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    table: {
-      minWidth: 650
-    },
-    tableHead: {
-      height: 42,
-      backgroundColor: '#D1E2F4',
-      textTransform: 'uppercase'
-    },
-    tableHeadCell: {
-      fontSize: 11,
-      fontWeight: 'bold',
+const useStyles = makeStyles()((theme: Theme) => ({
+  table: {
+    minWidth: 650
+  },
+  tableHead: {
+    height: 42,
+    backgroundColor: '#D1E2F4',
+    textTransform: 'uppercase'
+  },
+  tableHeadCell: {
+    fontSize: 11,
+    fontWeight: 'bold',
+    color: '#0063AF',
+    padding: '0 20px'
+  },
+  libelle: {
+    fontWeight: 'bold'
+  },
+  genderIcon: {
+    height: 25,
+    fill: '#0063AF'
+  },
+  pagination: {
+    margin: '10px 0',
+    float: 'right',
+    '& button': {
+      backgroundColor: '#fff',
+      color: '#5BC5F2'
+    },
+    '& .MuiPaginationItem-page.Mui-selected': {
       color: '#0063AF',
-      padding: '0 20px'
-    },
-    libelle: {
-      fontWeight: 'bold'
-    },
-    genderIcon: {
-      height: 25,
-      fill: '#0063AF'
-    },
-    pagination: {
-      margin: '10px 0',
-      float: 'right',
-      '& button': {
-        backgroundColor: '#fff',
-        color: '#5BC5F2'
-      },
-      '& .MuiPaginationItem-page.Mui-selected': {
-        color: '#0063AF',
-        backgroundColor: '#FFF'
-      }
-    },
-    validChip: {
-      fontSize: 11,
+      backgroundColor: '#FFF'
+    }
+  },
+  validChip: {
+    fontSize: 11,
+    backgroundColor: '#5BC5F2',
+    color: '#FFF',
+    fontWeight: 'bold'
+  },
+  cancelledChip: {
+    fontSize: 11,
+    backgroundColor: '#D0D7D8',
+    color: '#FFF',
+    fontWeight: 'bold'
+  },
+  emptyTableRow: {
+    minHeight: `calc(100vh - 500px)`,
+    height: `calc(100vh - 500px)`,
+    maxHeight: `calc(100vh - 500px)`
+  },
+  tableBodyRows: {
+    height: 80,
+    '&:nth-of-type(even)': {
+      backgroundColor: '#FAF9F9'
+    }
+  },
+  iconSize: {
+    fontSize: 30
+  },
+  searchIcon: {
+    padding: 0,
+    marginLeft: 4
+  },
+  iconMargin: {
+    margin: `0 ${theme.spacing(1)}`
+  },
+  multiple: {
+    '&::after': {
+      content: "'/'",
+      padding: '0 4px'
+    },
+    '&:last-child::after': {
+      content: "''",
+      padding: 0
+    }
+  },
+  tableHeadLabel: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    padding: 0,
+    top: 2,
+    position: 'relative'
+  },
+  tabsContainer: {
+    backgroundColor: '#153D8A',
+    borderRadius: 8,
+    color: 'white',
+    minHeight: 41,
+    '& .Mui-selected': { color: 'white' }
+  },
+  indicator: {
+    backgroundColor: '#ED6D91',
+    height: '4px'
+  },
+  selected: {
+    backgroundColor: '#0063AF',
+    color: 'white'
+  },
+  tabTitle: {
+    minWidth: 160,
+    color: 'white',
+    fontWeight: 400,
+    borderBottom: '#255CA1 inset 4px',
+    minHeight: 41,
+    padding: '6px 12px'
+  },
+  searchBar: {
+    minWidth: 250,
+    backgroundColor: '#FFF',
+    border: '1px solid #D0D7D8',
+    boxShadow: '0px 1px 16px #0000000A',
+    borderRadius: 25
+  },
+  input: {
+    marginLeft: theme.spacing(1),
+    flex: 1
+  },
+  searchButton: {
+    minWidth: 150,
+    height: 32,
+    backgroundColor: '#5BC5F2',
+    color: 'white',
+    borderRadius: 25,
+    marginInline: 8,
+    '&:hover': {
       backgroundColor: '#5BC5F2',
-      color: '#FFF',
-      fontWeight: 'bold'
-    },
-    cancelledChip: {
-      fontSize: 11,
-      backgroundColor: '#D0D7D8',
-      color: '#FFF',
-      fontWeight: 'bold'
-    },
-    emptyTableRow: {
-      minHeight: `calc(100vh - 500px)`,
-      height: `calc(100vh - 500px)`,
-      maxHeight: `calc(100vh - 500px)`
-    },
-    tableBodyRows: {
-      height: 80,
-      '&:nth-of-type(even)': {
-        backgroundColor: '#FAF9F9'
-      }
-    },
-    iconSize: {
-      fontSize: 30
-    },
-    searchIcon: {
-      padding: 0,
-      marginLeft: 4
-    },
-    iconMargin: {
-      margin: `0 ${theme.spacing(1)}`
-    },
-    multiple: {
-      '&::after': {
-        content: "'/'",
-        padding: '0 4px'
-      },
-      '&:last-child::after': {
-        content: "''",
-        padding: 0
-      }
-    },
-    tableHeadLabel: {
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      padding: 0,
-      top: 2,
-      position: 'relative'
-    },
-    tabsContainer: {
-      backgroundColor: '#153D8A',
-      borderRadius: 8,
-      color: 'white',
-      minHeight: 41,
-      '& .Mui-selected': { color: 'white' }
-    },
-    indicator: {
-      backgroundColor: '#ED6D91',
-      height: '4px'
-    },
-    selected: {
-      backgroundColor: '#0063AF',
       color: 'white'
-    },
-    tabTitle: {
-      minWidth: 160,
-      color: 'white',
-      fontWeight: 400,
-      borderBottom: '#255CA1 inset 4px',
-      minHeight: 41,
-      padding: '6px 12px'
-    },
-    searchBar: {
-      minWidth: 250,
-      backgroundColor: '#FFF',
-      border: '1px solid #D0D7D8',
-      boxShadow: '0px 1px 16px #0000000A',
+    }
+  },
+  errorContainer: {
+    color: '#f44336',
+    width: '100%',
+    padding: '0 16px'
+  },
+  select: {
+    marginRight: 4,
+    borderRadius: 25,
+    backgroundColor: '#FFF',
+    '& .MuiSelect-select': {
       borderRadius: 25
-    },
-    input: {
-      marginLeft: theme.spacing(1),
-      flex: 1
-    },
-    searchButton: {
-      minWidth: 150,
-      height: 32,
-      backgroundColor: '#5BC5F2',
-      color: 'white',
-      borderRadius: 25,
-      marginInline: 8,
-      '&:hover': {
-        backgroundColor: '#5BC5F2',
-        color: 'white'
-      }
-    },
-    errorContainer: {
-      color: '#f44336',
-      width: '100%',
-      padding: '0 16px'
-    },
-    select: {
-      marginRight: 4,
-      borderRadius: 25,
-      backgroundColor: '#FFF',
-      '& .MuiSelect-select': {
-        borderRadius: 25
-      }
     }
-  })
-)
+  }
+}))
 
 export default useStyles
diff --git a/src/components/ErrorView/styles.ts b/src/components/ErrorView/styles.ts
index fd801880c..d1b40eb6b 100644
--- a/src/components/ErrorView/styles.ts
+++ b/src/components/ErrorView/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { smallDrawerWidth, largeDrawerWidth } from 'components/Routes/LeftSideBar/LeftSideBar'
 
-export default makeStyles((theme: any) => ({
+export default makeStyles()((theme: any) => ({
   appBar: {
     height: '100vh',
     marginLeft: smallDrawerWidth,
diff --git a/src/components/Filters/BiologyFilters/styles.js b/src/components/Filters/BiologyFilters/styles.js
index c0eeec279..35c993537 100644
--- a/src/components/Filters/BiologyFilters/styles.js
+++ b/src/components/Filters/BiologyFilters/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   dialog: {
     width: '600px'
   },
diff --git a/src/components/Filters/CohortsFilters/styles.js b/src/components/Filters/CohortsFilters/styles.js
index 80139a055..be1ccb752 100644
--- a/src/components/Filters/CohortsFilters/styles.js
+++ b/src/components/Filters/CohortsFilters/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   dialog: {
     width: '600px'
   },
diff --git a/src/components/Filters/DocumentFilters/styles.js b/src/components/Filters/DocumentFilters/styles.js
index 43f790ed0..c27146ca2 100644
--- a/src/components/Filters/DocumentFilters/styles.js
+++ b/src/components/Filters/DocumentFilters/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   dialog: {
     width: '500px'
   },
diff --git a/src/components/Filters/MedicationFilters/styles.js b/src/components/Filters/MedicationFilters/styles.js
index 7fd6233c9..e27dce29a 100644
--- a/src/components/Filters/MedicationFilters/styles.js
+++ b/src/components/Filters/MedicationFilters/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   dialog: {
     width: '600px'
   },
diff --git a/src/components/Filters/PMSIFilters/styles.js b/src/components/Filters/PMSIFilters/styles.js
index 7fd6233c9..e27dce29a 100644
--- a/src/components/Filters/PMSIFilters/styles.js
+++ b/src/components/Filters/PMSIFilters/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   dialog: {
     width: '600px'
   },
diff --git a/src/components/Filters/PatientFilters/styles.js b/src/components/Filters/PatientFilters/styles.js
index 16091c4d8..c40c67bc9 100644
--- a/src/components/Filters/PatientFilters/styles.js
+++ b/src/components/Filters/PatientFilters/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   dialog: {
     width: '400px'
   },
diff --git a/src/components/Filters/SortDialog/styles.js b/src/components/Filters/SortDialog/styles.js
index 5baf783ad..b37a36da7 100644
--- a/src/components/Filters/SortDialog/styles.js
+++ b/src/components/Filters/SortDialog/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   dialog: {
     width: '600px'
   },
diff --git a/src/components/Inputs/InputAgeRange/styles.js b/src/components/Inputs/InputAgeRange/styles.js
index aadd7da74..4cc7c2543 100644
--- a/src/components/Inputs/InputAgeRange/styles.js
+++ b/src/components/Inputs/InputAgeRange/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   ageFilter: {
     paddingBottom: '9px'
   }
diff --git a/src/components/Inputs/InputDate/styles.jsx b/src/components/Inputs/InputDate/styles.jsx
index f12106010..dc227f032 100644
--- a/src/components/Inputs/InputDate/styles.jsx
+++ b/src/components/Inputs/InputDate/styles.jsx
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   formControl: { margin: '1em' },
   inputContainer: {
     display: 'flex',
diff --git a/src/components/Inputs/InputNumber/styles.jsx b/src/components/Inputs/InputNumber/styles.jsx
index f7867c212..a4bdcfc2e 100644
--- a/src/components/Inputs/InputNumber/styles.jsx
+++ b/src/components/Inputs/InputNumber/styles.jsx
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   formControl: { margin: '1em' },
   inputText: {
     border: '1px solid #D7DAE3',
diff --git a/src/components/Inputs/InputSearchDocument/components/DocumentSearchHelp/styles.js b/src/components/Inputs/InputSearchDocument/components/DocumentSearchHelp/styles.js
index e928e750e..35519599a 100644
--- a/src/components/Inputs/InputSearchDocument/components/DocumentSearchHelp/styles.js
+++ b/src/components/Inputs/InputSearchDocument/components/DocumentSearchHelp/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   dialog: {
     minWidth: '600px',
     overflow: 'auto'
diff --git a/src/components/Inputs/InputSearchDocument/components/styles.ts b/src/components/Inputs/InputSearchDocument/components/styles.ts
index 229987571..6c96f8b8f 100644
--- a/src/components/Inputs/InputSearchDocument/components/styles.ts
+++ b/src/components/Inputs/InputSearchDocument/components/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   documentButtons: {
     display: 'flex',
     justifyContent: 'flex-end'
diff --git a/src/components/Inputs/PatientSearchBar/styles.ts b/src/components/Inputs/PatientSearchBar/styles.ts
index e09dab7c0..3a724d3b9 100644
--- a/src/components/Inputs/PatientSearchBar/styles.ts
+++ b/src/components/Inputs/PatientSearchBar/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   component: {
     marginBottom: '16px'
   },
diff --git a/src/components/Inputs/ScopeSearchBar/styles.ts b/src/components/Inputs/ScopeSearchBar/styles.ts
index 4332c3479..e6b2fdcad 100644
--- a/src/components/Inputs/ScopeSearchBar/styles.ts
+++ b/src/components/Inputs/ScopeSearchBar/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   searchBar: {
     minWidth: 250,
     backgroundColor: '#FFF',
diff --git a/src/components/MasterChips/styles.js b/src/components/MasterChips/styles.js
index efd1a7821..8a6ea08f4 100644
--- a/src/components/MasterChips/styles.js
+++ b/src/components/MasterChips/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   chips: {
     margin: '12px 6px',
     '&:last-child': {
diff --git a/src/components/MyProjects/Modals/ModalAddOrEditProject/styles.ts b/src/components/MyProjects/Modals/ModalAddOrEditProject/styles.ts
index 816a77420..7716019e8 100644
--- a/src/components/MyProjects/Modals/ModalAddOrEditProject/styles.ts
+++ b/src/components/MyProjects/Modals/ModalAddOrEditProject/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   deleteButton: {
     position: 'absolute',
     left: 8,
diff --git a/src/components/MyProjects/Modals/ModalDeleteRequests/styles.ts b/src/components/MyProjects/Modals/ModalDeleteRequests/styles.ts
index b7c661bec..6527ef299 100644
--- a/src/components/MyProjects/Modals/ModalDeleteRequests/styles.ts
+++ b/src/components/MyProjects/Modals/ModalDeleteRequests/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   deleteButton: {
     color: '#dc3545'
   }
diff --git a/src/components/MyProjects/Modals/ModalEditCohort/styles.ts b/src/components/MyProjects/Modals/ModalEditCohort/styles.ts
index e368a11ba..ab68b5c84 100644
--- a/src/components/MyProjects/Modals/ModalEditCohort/styles.ts
+++ b/src/components/MyProjects/Modals/ModalEditCohort/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   inputContainer: {
     marginBottom: '24px'
   },
diff --git a/src/components/MyProjects/Modals/ModalShareRequest/components/styles.ts b/src/components/MyProjects/Modals/ModalShareRequest/components/styles.ts
index 4a66d4eb2..7287323a2 100644
--- a/src/components/MyProjects/Modals/ModalShareRequest/components/styles.ts
+++ b/src/components/MyProjects/Modals/ModalShareRequest/components/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   inputContainer: {
     marginBottom: '24px'
   },
diff --git a/src/components/MyProjects/Modals/ModalShareRequest/styles.ts b/src/components/MyProjects/Modals/ModalShareRequest/styles.ts
index 53fb05103..bff68d7a8 100644
--- a/src/components/MyProjects/Modals/ModalShareRequest/styles.ts
+++ b/src/components/MyProjects/Modals/ModalShareRequest/styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   inputContainer: {
     marginBottom: '24px'
   }
diff --git a/src/components/MyProjects/ProjectSearchBar/styles.ts b/src/components/MyProjects/ProjectSearchBar/styles.ts
index 7df883dd7..f0da5e979 100644
--- a/src/components/MyProjects/ProjectSearchBar/styles.ts
+++ b/src/components/MyProjects/ProjectSearchBar/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   searchBar: {
     minWidth: '200px',
     backgroundColor: '#FFF',
diff --git a/src/components/MyProjects/ProjectTable/styles.ts b/src/components/MyProjects/ProjectTable/styles.ts
index b278ad7fb..e35883466 100644
--- a/src/components/MyProjects/ProjectTable/styles.ts
+++ b/src/components/MyProjects/ProjectTable/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   grid: {
     marginBottom: theme.spacing(2)
   },
diff --git a/src/components/Patient/PatientBiology/styles.js b/src/components/Patient/PatientBiology/styles.js
index a5ab59cd6..79bd464b0 100644
--- a/src/components/Patient/PatientBiology/styles.js
+++ b/src/components/Patient/PatientBiology/styles.js
@@ -1,34 +1,32 @@
-import { createStyles, makeStyles } from 'tss-react/mui'
+import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles((theme) =>
-  createStyles({
-    documentTable: {
-      margin: '0 auto'
-    },
-    documentButtons: {
-      display: 'flex',
-      justifyContent: 'flex-end'
-    },
-    filterAndSort: {
-      '& > *': { marginBottom: 5 }
-    },
-    searchBar: {
-      minWidth: 200,
-      backgroundColor: '#FFF',
-      border: '1px solid #D0D7D8',
-      boxShadow: '0px 1px 16px #0000000A',
-      borderRadius: '25px'
-    },
-    input: {
-      marginLeft: theme.spacing(1),
-      flex: 1
-    },
-    searchButton: {
-      minWidth: 150,
-      backgroundColor: '#5BC5F2',
-      color: '#FFF',
-      borderRadius: '25px',
-      marginLeft: 8
-    }
-  })
-)
+export default makeStyles()((theme) => ({
+  documentTable: {
+    margin: '0 auto'
+  },
+  documentButtons: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  filterAndSort: {
+    '& > *': { marginBottom: 5 }
+  },
+  searchBar: {
+    minWidth: 200,
+    backgroundColor: '#FFF',
+    border: '1px solid #D0D7D8',
+    boxShadow: '0px 1px 16px #0000000A',
+    borderRadius: '25px'
+  },
+  input: {
+    marginLeft: theme.spacing(1),
+    flex: 1
+  },
+  searchButton: {
+    minWidth: 150,
+    backgroundColor: '#5BC5F2',
+    color: '#FFF',
+    borderRadius: '25px',
+    marginLeft: 8
+  }
+}))
diff --git a/src/components/Patient/PatientDocs/styles.js b/src/components/Patient/PatientDocs/styles.js
index 69378ee7b..5e9081b22 100644
--- a/src/components/Patient/PatientDocs/styles.js
+++ b/src/components/Patient/PatientDocs/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   documentTable: {
     margin: '0 auto'
   },
diff --git a/src/components/Patient/PatientHeader/PatientInfo/styles.js b/src/components/Patient/PatientHeader/PatientInfo/styles.js
index c7ac94f2e..c5031664c 100644
--- a/src/components/Patient/PatientHeader/PatientInfo/styles.js
+++ b/src/components/Patient/PatientHeader/PatientInfo/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles({
+export default makeStyles()({
   root: {
     display: 'flex',
     alignItems: 'center',
diff --git a/src/components/Patient/PatientHeader/PatientTitle/styles.js b/src/components/Patient/PatientHeader/PatientTitle/styles.js
index b2ed9a15f..f34d1234c 100644
--- a/src/components/Patient/PatientHeader/PatientTitle/styles.js
+++ b/src/components/Patient/PatientHeader/PatientTitle/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles(() => ({
+export default makeStyles()(() => ({
   root: {
     display: 'flex',
     margin: 0
diff --git a/src/components/Patient/PatientHeader/styles.js b/src/components/Patient/PatientHeader/styles.js
index 9c4009820..4ebd84db1 100644
--- a/src/components/Patient/PatientHeader/styles.js
+++ b/src/components/Patient/PatientHeader/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles({
+export default makeStyles()({
   root: {
     backgroundColor: '#F3F8FE',
     height: '140px'
diff --git a/src/components/Patient/PatientMedication/styles.js b/src/components/Patient/PatientMedication/styles.js
index 06f98c994..e39c65a43 100644
--- a/src/components/Patient/PatientMedication/styles.js
+++ b/src/components/Patient/PatientMedication/styles.js
@@ -1,54 +1,52 @@
-import { createStyles, makeStyles } from 'tss-react/mui'
+import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles((theme) =>
-  createStyles({
-    documentTable: {
-      margin: '0 auto'
-    },
-    documentButtons: {
-      display: 'flex',
-      justifyContent: 'flex-end'
-    },
-    searchBar: {
-      minWidth: 200,
-      backgroundColor: '#FFF',
-      border: '1px solid #D0D7D8',
-      boxShadow: '0px 1px 16px #0000000A',
-      borderRadius: '25px'
-    },
-    input: {
-      marginLeft: theme.spacing(1),
-      flex: 1
-    },
-    searchButton: {
-      minWidth: 150,
-      backgroundColor: '#5BC5F2',
-      color: '#FFF',
-      borderRadius: '25px',
-      marginLeft: 8
-    },
-    root: {
-      backgroundColor: '#153D8A',
-      borderRadius: '8px',
-      color: 'white',
-      minHeight: 41
-    },
-    tabTitle: {
-      minWidth: 0,
-      color: 'white',
-      fontWeight: '400',
-      borderBottom: '#255CA1 inset 4px',
-      minHeight: 41
-    },
-    indicator: {
-      backgroundColor: '#5BC5F2',
-      height: '4px'
-    },
-    selected: {
-      backgroundColor: '#0063AF'
-    },
-    filterAndSort: {
-      '& > *': { marginBottom: 5 }
-    }
-  })
-)
+export default makeStyles()((theme) => ({
+  documentTable: {
+    margin: '0 auto'
+  },
+  documentButtons: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  searchBar: {
+    minWidth: 200,
+    backgroundColor: '#FFF',
+    border: '1px solid #D0D7D8',
+    boxShadow: '0px 1px 16px #0000000A',
+    borderRadius: '25px'
+  },
+  input: {
+    marginLeft: theme.spacing(1),
+    flex: 1
+  },
+  searchButton: {
+    minWidth: 150,
+    backgroundColor: '#5BC5F2',
+    color: '#FFF',
+    borderRadius: '25px',
+    marginLeft: 8
+  },
+  root: {
+    backgroundColor: '#153D8A',
+    borderRadius: '8px',
+    color: 'white',
+    minHeight: 41
+  },
+  tabTitle: {
+    minWidth: 0,
+    color: 'white',
+    fontWeight: '400',
+    borderBottom: '#255CA1 inset 4px',
+    minHeight: 41
+  },
+  indicator: {
+    backgroundColor: '#5BC5F2',
+    height: '4px'
+  },
+  selected: {
+    backgroundColor: '#0063AF'
+  },
+  filterAndSort: {
+    '& > *': { marginBottom: 5 }
+  }
+}))
diff --git a/src/components/Patient/PatientPMSI/styles.js b/src/components/Patient/PatientPMSI/styles.js
index 60c7f151d..8076383f7 100644
--- a/src/components/Patient/PatientPMSI/styles.js
+++ b/src/components/Patient/PatientPMSI/styles.js
@@ -1,54 +1,52 @@
-import { createStyles, makeStyles } from 'tss-react/mui'
+import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles((theme) =>
-  createStyles({
-    documentTable: {
-      margin: '0 auto'
-    },
-    filterAndSort: {
-      '& > *': { marginBottom: 5 }
-    },
-    root: {
-      backgroundColor: '#153D8A',
-      borderRadius: '8px',
-      color: 'white',
-      minHeight: 41
-    },
-    indicator: {
-      backgroundColor: '#5BC5F2',
-      height: '4px'
-    },
-    selected: {
-      backgroundColor: '#0063AF'
-    },
-    tabTitle: {
-      minWidth: 0,
-      color: 'white',
-      fontWeight: '400',
-      borderBottom: '#255CA1 inset 4px',
-      minHeight: 41
-    },
-    documentButtons: {
-      display: 'flex',
-      justifyContent: 'flex-end'
-    },
-    input: {
-      marginLeft: theme.spacing(1),
-      flex: 1
-    },
-    searchBar: {
-      minWidth: 200,
-      backgroundColor: '#FFF',
-      border: '1px solid #D0D7D8',
-      boxShadow: '0px 1px 16px #0000000A',
-      borderRadius: '25px'
-    },
-    searchButton: {
-      minWidth: 150,
-      backgroundColor: '#5BC5F2',
-      color: '#FFF',
-      borderRadius: '25px',
-      marginLeft: 8
-    }
-  })
-)
+export default makeStyles()((theme) => ({
+  documentTable: {
+    margin: '0 auto'
+  },
+  filterAndSort: {
+    '& > *': { marginBottom: 5 }
+  },
+  root: {
+    backgroundColor: '#153D8A',
+    borderRadius: '8px',
+    color: 'white',
+    minHeight: 41
+  },
+  indicator: {
+    backgroundColor: '#5BC5F2',
+    height: '4px'
+  },
+  selected: {
+    backgroundColor: '#0063AF'
+  },
+  tabTitle: {
+    minWidth: 0,
+    color: 'white',
+    fontWeight: '400',
+    borderBottom: '#255CA1 inset 4px',
+    minHeight: 41
+  },
+  documentButtons: {
+    display: 'flex',
+    justifyContent: 'flex-end'
+  },
+  input: {
+    marginLeft: theme.spacing(1),
+    flex: 1
+  },
+  searchBar: {
+    minWidth: 200,
+    backgroundColor: '#FFF',
+    border: '1px solid #D0D7D8',
+    boxShadow: '0px 1px 16px #0000000A',
+    borderRadius: '25px'
+  },
+  searchButton: {
+    minWidth: 150,
+    backgroundColor: '#5BC5F2',
+    color: '#FFF',
+    borderRadius: '25px',
+    marginLeft: 8
+  }
+}))
diff --git a/src/components/Patient/PatientPreview/PatientField/styles.js b/src/components/Patient/PatientPreview/PatientField/styles.js
index fa37ccd88..efa64e3f4 100644
--- a/src/components/Patient/PatientPreview/PatientField/styles.js
+++ b/src/components/Patient/PatientPreview/PatientField/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles((theme) => ({
+export default makeStyles()((theme) => ({
   gridItem: {
     padding: theme.spacing(2),
     color: '#0063AF'
diff --git a/src/components/Patient/PatientPreview/styles.js b/src/components/Patient/PatientPreview/styles.js
index 76e4e5437..d2517f8a8 100644
--- a/src/components/Patient/PatientPreview/styles.js
+++ b/src/components/Patient/PatientPreview/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles(() => ({
+export default makeStyles()(() => ({
   patientTable: {
     marginBottom: '16px',
     boxShadow: '0px 3px 6px #0000000A'
diff --git a/src/components/Patient/PatientSidebar/PatientSidebarHeader/styles.js b/src/components/Patient/PatientSidebar/PatientSidebarHeader/styles.js
index b22dd3fcb..6b120fe5c 100644
--- a/src/components/Patient/PatientSidebar/PatientSidebarHeader/styles.js
+++ b/src/components/Patient/PatientSidebar/PatientSidebarHeader/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles((theme) => ({
+export default makeStyles()((theme) => ({
   root: {
     display: 'flex',
     padding: '0 8px',
diff --git a/src/components/Patient/PatientSidebar/PatientSidebarItem/styles.js b/src/components/Patient/PatientSidebar/PatientSidebarItem/styles.js
index 712d121cd..3c7eee320 100644
--- a/src/components/Patient/PatientSidebar/PatientSidebarItem/styles.js
+++ b/src/components/Patient/PatientSidebar/PatientSidebarItem/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles({
+export default makeStyles()({
   listItem: {
     '&:hover': {
       cursor: 'pointer',
diff --git a/src/components/Patient/PatientSidebar/styles.js b/src/components/Patient/PatientSidebar/styles.js
index 402ed6b1c..8678fc473 100644
--- a/src/components/Patient/PatientSidebar/styles.js
+++ b/src/components/Patient/PatientSidebar/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles({
+export default makeStyles()({
   paper: {
     width: (props) => props.width
   },
diff --git a/src/components/Patient/PatientTimeline/FilterTimelineDialog/styles.js b/src/components/Patient/PatientTimeline/FilterTimelineDialog/styles.js
index 8bacb82c8..e3aa501a9 100644
--- a/src/components/Patient/PatientTimeline/FilterTimelineDialog/styles.js
+++ b/src/components/Patient/PatientTimeline/FilterTimelineDialog/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   dialog: {
     width: '600px'
   },
diff --git a/src/components/Patient/PatientTimeline/HospitDialog/DocumentTable/styles.ts b/src/components/Patient/PatientTimeline/HospitDialog/DocumentTable/styles.ts
index 4bb2c926c..8a983b204 100644
--- a/src/components/Patient/PatientTimeline/HospitDialog/DocumentTable/styles.ts
+++ b/src/components/Patient/PatientTimeline/HospitDialog/DocumentTable/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   table: {
     minWidth: 650
   },
diff --git a/src/components/Patient/PatientTimeline/HospitDialog/styles.js b/src/components/Patient/PatientTimeline/HospitDialog/styles.js
index 75fb36107..4c4940808 100644
--- a/src/components/Patient/PatientTimeline/HospitDialog/styles.js
+++ b/src/components/Patient/PatientTimeline/HospitDialog/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   pagination: {
     marginTop: 10,
     float: 'right'
diff --git a/src/components/Routes/LeftSideBar/styles.ts b/src/components/Routes/LeftSideBar/styles.ts
index aacef60c2..ff83d5991 100644
--- a/src/components/Routes/LeftSideBar/styles.ts
+++ b/src/components/Routes/LeftSideBar/styles.ts
@@ -1,148 +1,146 @@
-import { makeStyles, createStyles } from '@mui/styles'
+import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
 const drawerWidth = 260
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      display: 'flex'
-    },
-    hide: {
-      display: 'none'
-    },
-    drawer: {
-      width: drawerWidth,
-      flexShrink: 0,
-      whiteSpace: 'nowrap'
-    },
-    drawerOpen: {
-      backgroundColor: '#232E6A',
-      width: drawerWidth,
-      transition: theme.transitions.create('width', {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen
-      })
-    },
-    drawerClose: {
-      backgroundColor: '#232E6A',
-      transition: theme.transitions.create('width', {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen
-      }),
-      overflowX: 'hidden',
-      width: 52
-    },
-    closeDrawerButton: {
-      marginRight: '-4px'
-    },
-    menuButton: {
-      marginLeft: '-4px'
-    },
-    avatar: {
-      color: 'white',
-      backgroundColor: '#5BC5F2',
-      height: '30px',
-      width: '30px',
-      fontSize: '1rem',
-      marginLeft: '-5px',
-      display: 'flex',
-      overflow: 'hidden',
-      position: 'relative',
-      alignItems: 'center',
-      flexShrink: 0,
-      lineHeight: 1,
-      borderRadius: '50%',
-      justifyContent: 'center'
-    },
-    toolbar: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      padding: theme.spacing(0, 1),
-      // necessary for content to be below app bar
-      ...theme.mixins.toolbar
-    },
-    logoutButton: {
-      marginLeft: '6px'
-    },
-    searchButton: {
-      border: '1px white solid;',
-      borderRadius: 15,
-      width: '100%',
-      display: 'initial'
-    },
-    logoutIcon: {
-      width: '15px',
-      fill: '#5BC5F2'
-    },
-    userName: {
-      color: '#FFF',
-      fontWeight: 600
-    },
-    listItem: {
-      padding: 16,
-      height: 56,
-      '& svg': {
-        height: 56
-      }
-    },
-    listIcon: {
-      minWidth: '35px'
-    },
-    title: {
-      color: '#FFF',
-      fontSize: '15px',
-      lineHeight: '35px'
-    },
-    nestedList: {
-      marginLeft: '36px'
-    },
-    nestedTitle: {
-      color: '#D0D7D8',
-      fontSize: 13,
-      lineHeight: '25px'
-    },
-    button: {
-      marginLeft: 7
-    },
-    miniButton: {
-      borderRadius: 14,
-      height: 23,
-      width: 23,
-      marginLeft: -2,
-      backgroundColor: '#fff',
-      color: '#153D8A',
-      '& svg': {
-        fontSize: 18
-      },
-      '&:hover': { backgroundColor: '#d5d5d5' }
-    },
-    linkHover: {
-      color: 'white',
-      '&:hover': { cursor: 'pointer', textDecoration: 'None' }
-    },
-    newCohortButton: {
-      backgroundColor: '#5BC5F2',
-      borderRadius: 25,
-      border: 'none',
-      height: 45,
-      '&:hover': {
-        backgroundColor: '#499cbf',
-        color: '#FFF'
-      }
-    },
-    editCohortButton: {
-      backgroundColor: 'transparent',
-      border: '2px solid currentColor',
-      color: '#5BC5F2',
-      borderRadius: 25,
-      height: 50,
-      '&:hover': {
-        color: '#499cbf'
-      }
+const useStyles = makeStyles()((theme: Theme) => ({
+  root: {
+    display: 'flex'
+  },
+  hide: {
+    display: 'none'
+  },
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
+    whiteSpace: 'nowrap'
+  },
+  drawerOpen: {
+    backgroundColor: '#232E6A',
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  },
+  drawerClose: {
+    backgroundColor: '#232E6A',
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    }),
+    overflowX: 'hidden',
+    width: 52
+  },
+  closeDrawerButton: {
+    marginRight: '-4px'
+  },
+  menuButton: {
+    marginLeft: '-4px'
+  },
+  avatar: {
+    color: 'white',
+    backgroundColor: '#5BC5F2',
+    height: '30px',
+    width: '30px',
+    fontSize: '1rem',
+    marginLeft: '-5px',
+    display: 'flex',
+    overflow: 'hidden',
+    position: 'relative',
+    alignItems: 'center',
+    flexShrink: 0,
+    lineHeight: 1,
+    borderRadius: '50%',
+    justifyContent: 'center'
+  },
+  toolbar: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: theme.spacing(0, 1),
+    // necessary for content to be below app bar
+    ...theme.mixins.toolbar
+  },
+  logoutButton: {
+    marginLeft: '6px'
+  },
+  searchButton: {
+    border: '1px white solid;',
+    borderRadius: 15,
+    width: '100%',
+    display: 'initial'
+  },
+  logoutIcon: {
+    width: '15px',
+    fill: '#5BC5F2'
+  },
+  userName: {
+    color: '#FFF',
+    fontWeight: 600
+  },
+  listItem: {
+    padding: 16,
+    height: 56,
+    '& svg': {
+      height: 56
+    }
+  },
+  listIcon: {
+    minWidth: '35px'
+  },
+  title: {
+    color: '#FFF',
+    fontSize: '15px',
+    lineHeight: '35px'
+  },
+  nestedList: {
+    marginLeft: '36px'
+  },
+  nestedTitle: {
+    color: '#D0D7D8',
+    fontSize: 13,
+    lineHeight: '25px'
+  },
+  button: {
+    marginLeft: 7
+  },
+  miniButton: {
+    borderRadius: 14,
+    height: 23,
+    width: 23,
+    marginLeft: -2,
+    backgroundColor: '#fff',
+    color: '#153D8A',
+    '& svg': {
+      fontSize: 18
+    },
+    '&:hover': { backgroundColor: '#d5d5d5' }
+  },
+  linkHover: {
+    color: 'white',
+    '&:hover': { cursor: 'pointer', textDecoration: 'None' }
+  },
+  newCohortButton: {
+    backgroundColor: '#5BC5F2',
+    borderRadius: 25,
+    border: 'none',
+    height: 45,
+    '&:hover': {
+      backgroundColor: '#499cbf',
+      color: '#FFF'
+    }
+  },
+  editCohortButton: {
+    backgroundColor: 'transparent',
+    border: '2px solid currentColor',
+    color: '#5BC5F2',
+    borderRadius: 25,
+    height: 50,
+    '&:hover': {
+      color: '#499cbf'
     }
-  })
-)
+  }
+}))
 
 export default useStyles
diff --git a/src/components/Routes/styles.ts b/src/components/Routes/styles.ts
index 219a81dc4..1dad3a25d 100644
--- a/src/components/Routes/styles.ts
+++ b/src/components/Routes/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   title: {
     color: '#153d8a'
   },
diff --git a/src/components/SavedResearch/ResearchTable/styles.js b/src/components/SavedResearch/ResearchTable/styles.js
index 18b15d13f..b1084886b 100644
--- a/src/components/SavedResearch/ResearchTable/styles.js
+++ b/src/components/SavedResearch/ResearchTable/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   table: {
     minWidth: 650
   },
diff --git a/src/components/SavedResearch/styles.ts b/src/components/SavedResearch/styles.ts
index 824763995..17a2fc397 100644
--- a/src/components/SavedResearch/styles.ts
+++ b/src/components/SavedResearch/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   documentTable: {
     margin: '24px 0'
   },
diff --git a/src/components/ScopeTree/ScopeTreeTable/index.jsx b/src/components/ScopeTree/ScopeTreeTable/index.jsx
index 5d45028a8..08553168f 100644
--- a/src/components/ScopeTree/ScopeTreeTable/index.jsx
+++ b/src/components/ScopeTree/ScopeTreeTable/index.jsx
@@ -11,7 +11,7 @@ import TableRow from '@mui/material/TableRow'
 import EnhancedTableHead from './components/TableHead'
 import { getComparator, stableSort } from 'utils/alphabeticalSort'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   root: {
     width: '100%'
   },
diff --git a/src/components/ScopeTree/styles.js b/src/components/ScopeTree/styles.js
index 4ba8c759b..fabb45f6c 100644
--- a/src/components/ScopeTree/styles.js
+++ b/src/components/ScopeTree/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles(() => ({
+export default makeStyles()(() => ({
   container: {
     background: 'white'
   },
diff --git a/src/components/TopBar/styles.js b/src/components/TopBar/styles.js
index b098330e9..1b536ca89 100644
--- a/src/components/TopBar/styles.js
+++ b/src/components/TopBar/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-export default makeStyles((theme) => ({
+export default makeStyles()((theme) => ({
   root: {
     minHeight: '72px',
     display: 'flex',
diff --git a/src/components/Welcome/NewsCard/styles.js b/src/components/Welcome/NewsCard/styles.js
index b6e7e0a99..97eedf2e1 100644
--- a/src/components/Welcome/NewsCard/styles.js
+++ b/src/components/Welcome/NewsCard/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   divider: {
     marginBottom: '15px'
   }
diff --git a/src/components/Welcome/PatientsCard/styles.js b/src/components/Welcome/PatientsCard/styles.js
index d5960aae8..21bb71dd3 100644
--- a/src/components/Welcome/PatientsCard/styles.js
+++ b/src/components/Welcome/PatientsCard/styles.js
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   button: {
     backgroundColor: '#5BC5F2',
     color: '#FFF',
diff --git a/src/components/Welcome/ResearchCard/styles.ts b/src/components/Welcome/ResearchCard/styles.ts
index a50bcecbb..f10113f3c 100644
--- a/src/components/Welcome/ResearchCard/styles.ts
+++ b/src/components/Welcome/ResearchCard/styles.ts
@@ -1,17 +1,15 @@
-import { makeStyles, createStyles } from '@mui/styles'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    tableContainer: {
-      marginTop: '16px'
-    },
-    link: {
-      color: '#5BC5F2',
-      fontSize: '13px',
-      fontWeight: 600,
-      cursor: 'pointer'
-    }
-  })
-)
+const useStyles = makeStyles()(() => ({
+  tableContainer: {
+    marginTop: '16px'
+  },
+  link: {
+    color: '#5BC5F2',
+    fontSize: '13px',
+    fontWeight: 600,
+    cursor: 'pointer'
+  }
+}))
 
 export default useStyles
diff --git a/src/components/Welcome/SearchPatientCard/styles.js b/src/components/Welcome/SearchPatientCard/styles.js
index 88b7f15a9..db4731c97 100644
--- a/src/components/Welcome/SearchPatientCard/styles.js
+++ b/src/components/Welcome/SearchPatientCard/styles.js
@@ -1,14 +1,12 @@
-import { createStyles, makeStyles } from 'tss-react/mui'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    divider: {
-      marginBottom: '15px'
-    },
-    lockIcon: {
-      margin: '0 8px'
-    }
-  })
-)
+const useStyles = makeStyles()(() => ({
+  divider: {
+    marginBottom: '15px'
+  },
+  lockIcon: {
+    margin: '0 8px'
+  }
+}))
 
 export default useStyles
diff --git a/src/components/Welcome/TutorialsCard/styles.ts b/src/components/Welcome/TutorialsCard/styles.ts
index e7bde33c4..64e53c62a 100644
--- a/src/components/Welcome/TutorialsCard/styles.ts
+++ b/src/components/Welcome/TutorialsCard/styles.ts
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   divider: {
     marginBottom: '15px'
   },
diff --git a/src/views/CohortCreation/styles.js b/src/views/CohortCreation/styles.js
index c4794febb..febd7024e 100644
--- a/src/views/CohortCreation/styles.js
+++ b/src/views/CohortCreation/styles.js
@@ -1,7 +1,7 @@
 import { makeStyles } from 'tss-react/mui'
 import { smallDrawerWidth, largeDrawerWidth } from 'components/Routes/LeftSideBar/LeftSideBar'
 
-export default makeStyles((theme) => ({
+export default makeStyles()((theme) => ({
   appBar: {
     marginLeft: smallDrawerWidth,
     zIndex: theme.zIndex.drawer + 1,
diff --git a/src/views/Contact/styles.ts b/src/views/Contact/styles.ts
index 1430dc6b5..f5c6a044a 100644
--- a/src/views/Contact/styles.ts
+++ b/src/views/Contact/styles.ts
@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 import { smallDrawerWidth, largeDrawerWidth } from 'components/Routes/LeftSideBar/LeftSideBar'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   appBar: {
     marginLeft: smallDrawerWidth,
     width: `calc(100% - ${smallDrawerWidth}px)`,
diff --git a/src/views/Dashboard/styles.ts b/src/views/Dashboard/styles.ts
index 677544164..b1e5395ec 100644
--- a/src/views/Dashboard/styles.ts
+++ b/src/views/Dashboard/styles.ts
@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 import { smallDrawerWidth, largeDrawerWidth } from 'components/Routes/LeftSideBar/LeftSideBar'
 
-export default makeStyles((theme: Theme) => ({
+export default makeStyles()((theme: Theme) => ({
   appBar: {
     marginLeft: smallDrawerWidth,
     width: `calc(100% - ${smallDrawerWidth}px)`,
diff --git a/src/views/Login/styles.ts b/src/views/Login/styles.ts
index cafcccc9c..cbd0b6597 100644
--- a/src/views/Login/styles.ts
+++ b/src/views/Login/styles.ts
@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 import BackgroundLogin from 'assets/images/background-login.png'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     height: '100vh'
   },
diff --git a/src/views/MyProjects/styles.ts b/src/views/MyProjects/styles.ts
index d1eb8dfea..c08295e96 100644
--- a/src/views/MyProjects/styles.ts
+++ b/src/views/MyProjects/styles.ts
@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 import { smallDrawerWidth, largeDrawerWidth } from 'components/Routes/LeftSideBar/LeftSideBar'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   appBar: {
     marginLeft: smallDrawerWidth,
     width: `calc(100% - ${smallDrawerWidth}px)`,
diff --git a/src/views/PageNotFound/styles.ts b/src/views/PageNotFound/styles.ts
index a8d1a01c5..974b4dac4 100644
--- a/src/views/PageNotFound/styles.ts
+++ b/src/views/PageNotFound/styles.ts
@@ -1,10 +1,10 @@
-import makeStyles from '@mui/styles/makeStyles'
+import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 
 const skyBlue = '#5BC5F2'
 const bgColor = '#E6F1FD'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   logo: {
     position: 'fixed',
     top: 12,
diff --git a/src/views/Patient/styles.js b/src/views/Patient/styles.js
index 6434164ab..427c29ebf 100644
--- a/src/views/Patient/styles.js
+++ b/src/views/Patient/styles.js
@@ -1,57 +1,55 @@
-import { createStyles, makeStyles } from 'tss-react/mui'
+import { makeStyles } from 'tss-react/mui'
 import { smallDrawerWidth, largeDrawerWidth } from 'components/Routes/LeftSideBar/LeftSideBar'
 
 export const sidebarWidth = '350px'
 
-export default makeStyles((theme) =>
-  createStyles({
-    appBar: {
-      marginLeft: smallDrawerWidth,
-      width: `calc(100% - ${smallDrawerWidth}px)`,
-      zIndex: theme.zIndex.drawer + 1,
-      transition: theme.transitions.create(['width', 'margin'], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.leavingScreen
-      })
-    },
-    appBarShift: {
-      marginLeft: largeDrawerWidth,
-      width: `calc(100% - ${largeDrawerWidth}px)`,
-      transition: theme.transitions.create(['width', 'margin'], {
-        easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen
-      })
-    },
-    contentShift: {
-      marginRight: sidebarWidth
-    },
-    tabTitle: {
-      minWidth: 0,
-      color: 'rgba(0, 99, 175, 0.4)',
-      borderBottom: '#CFE4FD 2px inset',
-      padding: '6px 12px'
-    },
-    tabContainer: {
-      paddingTop: theme.spacing(3),
-      width: '100%'
-    },
-    loading: {
-      position: 'absolute',
-      top: '50%',
-      left: '50%'
-    },
-    openLeftBar: {
-      backgroundColor: '#FFF',
-      width: 30,
-      height: 101,
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      boxShadow: '0px 3px 6px #0000000A',
-      borderRadius: '2px 0px 0px 2px',
-      top: 72,
-      right: 0,
-      position: 'fixed'
-    }
-  })
-)
+export default makeStyles()((theme) => ({
+  appBar: {
+    marginLeft: smallDrawerWidth,
+    width: `calc(100% - ${smallDrawerWidth}px)`,
+    zIndex: theme.zIndex.drawer + 1,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.leavingScreen
+    })
+  },
+  appBarShift: {
+    marginLeft: largeDrawerWidth,
+    width: `calc(100% - ${largeDrawerWidth}px)`,
+    transition: theme.transitions.create(['width', 'margin'], {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    })
+  },
+  contentShift: {
+    marginRight: sidebarWidth
+  },
+  tabTitle: {
+    minWidth: 0,
+    color: 'rgba(0, 99, 175, 0.4)',
+    borderBottom: '#CFE4FD 2px inset',
+    padding: '6px 12px'
+  },
+  tabContainer: {
+    paddingTop: theme.spacing(3),
+    width: '100%'
+  },
+  loading: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%'
+  },
+  openLeftBar: {
+    backgroundColor: '#FFF',
+    width: 30,
+    height: 101,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    boxShadow: '0px 3px 6px #0000000A',
+    borderRadius: '2px 0px 0px 2px',
+    top: 72,
+    right: 0,
+    position: 'fixed'
+  }
+}))
diff --git a/src/views/SavedResearch/styles.ts b/src/views/SavedResearch/styles.ts
index 43a95674b..90f42d134 100644
--- a/src/views/SavedResearch/styles.ts
+++ b/src/views/SavedResearch/styles.ts
@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 import { smallDrawerWidth, largeDrawerWidth } from 'components/Routes/LeftSideBar/LeftSideBar'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   appBar: {
     marginLeft: smallDrawerWidth,
     width: `calc(100% - ${smallDrawerWidth}px)`,
diff --git a/src/views/Scope/styles.js b/src/views/Scope/styles.js
index 7f4f14865..c660c8a1f 100644
--- a/src/views/Scope/styles.js
+++ b/src/views/Scope/styles.js
@@ -32,7 +32,7 @@ export const itemStyles = {
   }
 }
 
-export default makeStyles((theme) => ({
+export default makeStyles()((theme) => ({
   appBar: {
     marginLeft: smallDrawerWidth,
     width: `calc(100% - ${smallDrawerWidth}px)`,
diff --git a/src/views/SearchPatient/styles.ts b/src/views/SearchPatient/styles.ts
index 7d6a8174a..6960d5a09 100644
--- a/src/views/SearchPatient/styles.ts
+++ b/src/views/SearchPatient/styles.ts
@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 import { smallDrawerWidth, largeDrawerWidth } from 'components/Routes/LeftSideBar/LeftSideBar'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   appBar: {
     marginLeft: smallDrawerWidth,
     width: `calc(100% - ${smallDrawerWidth}px)`,
diff --git a/src/views/Welcome/styles.ts b/src/views/Welcome/styles.ts
index 3ad696cf1..a8ed4e308 100644
--- a/src/views/Welcome/styles.ts
+++ b/src/views/Welcome/styles.ts
@@ -2,7 +2,7 @@ import { makeStyles } from 'tss-react/mui'
 import { Theme } from '@mui/material/styles'
 import { smallDrawerWidth, largeDrawerWidth } from 'components/Routes/LeftSideBar/LeftSideBar'
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles()((theme: Theme) => ({
   root: {
     minHeight: 'calc(100vh + 20px)'
   },