diff --git a/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts
index 55b979cdfc..fd0756f3ad 100644
--- a/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts
+++ b/webapp/src/components/App/Singlestudy/Commands/Edition/DraggableCommands/CommandListItem/style.ts
@@ -1,6 +1,5 @@
 import { Accordion, Box, styled } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/HighlightOff";
-import { PAPER_BACKGROUND_NO_TRANSPARENCY } from "../../../../../../../theme";
 
 export const ItemContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== "onTopVisible",
@@ -15,7 +14,6 @@ export const DraggableAccorderon = styled(Accordion, {
 })<{ isDragging?: boolean }>(({ theme, isDragging }) => ({
   flex: 1,
   boxSizing: "border-box",
-  backgroundColor: PAPER_BACKGROUND_NO_TRANSPARENCY,
   ...(isDragging
     ? {
         borderColor: theme.palette.secondary.main,
diff --git a/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/DetailsList.tsx b/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/DetailsList.tsx
index 55e6300dd7..f3775fc4a9 100644
--- a/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/DetailsList.tsx
+++ b/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/DetailsList.tsx
@@ -22,7 +22,6 @@ function DetailsList({ items }: Props) {
     <List
       sx={{
         width: 1,
-        backgroundColor: "#222333",
       }}
     >
       {items.map((item) => (
diff --git a/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/utils.ts b/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/utils.ts
index 91ca0f7b57..adfc2d2903 100644
--- a/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/utils.ts
+++ b/webapp/src/components/App/Singlestudy/HomeView/InformationView/Notes/utils.ts
@@ -4,7 +4,7 @@ import { ContentState, convertToRaw, EditorState } from "draft-js";
 import draftToHtml from "draftjs-to-html";
 import { convertFromHTML } from "draft-convert";
 import { Element as XMLElement, js2xml, xml2json } from "xml-js";
-import theme from "../../../../../../theme";
+import theme from "../../../../theme";
 
 interface BlockMap {
   from: string;
@@ -588,9 +588,9 @@ export const convertSize = (bytes: number): string => {
 
 const sizeRanges = [
   { limit: 0, color: "default" }, // Size is unknown or not calculated
-  { limit: 5 * BYTES_PER_GB, color: theme.palette.success.main }, // Size is 0 to 5 GB
-  { limit: 25 * BYTES_PER_GB, color: theme.palette.warning.main }, // Size is 5 GB to 25 GB
-  { limit: Infinity, color: theme.palette.error.main }, // Size is 25 GB and above
+  { limit: 5 * BYTES_PER_GB, color: "palette.success.main" }, // Size is 0 to 5 GB
+  { limit: 25 * BYTES_PER_GB, color: "palette.warning.main" }, // Size is 5 GB to 25 GB
+  { limit: Infinity, color: "palette.error.main" }, // Size is 25 GB and above
 ];
 
 export const getColorForSize = (bytes: number): string => {
diff --git a/webapp/src/components/App/Singlestudy/NavHeader/Actions.tsx b/webapp/src/components/App/Singlestudy/NavHeader/Actions.tsx
index b922b7589c..814d476ab8 100644
--- a/webapp/src/components/App/Singlestudy/NavHeader/Actions.tsx
+++ b/webapp/src/components/App/Singlestudy/NavHeader/Actions.tsx
@@ -124,18 +124,11 @@ function Actions({
         />
       </Tooltip>
       {isManaged ? (
-        <Chip
-          label={t("study.managedStudy")}
-          variant="filled"
-          color="info"
-          size="small"
-        />
+        <Chip label={t("study.managedStudy")} color="info" size="small" />
       ) : (
-        <Chip label={study.workspace} variant="filled" size="small" />
+        <Chip label={study.workspace} size="small" />
       )}
-      {study.tags?.map((tag) => (
-        <Chip key={tag} label={tag} variant="filled" size="small" />
-      ))}
+      {study.tags?.map((tag) => <Chip key={tag} label={tag} size="small" />)}
       {isExplorer && (
         <Button
           size="small"
diff --git a/webapp/src/components/App/Singlestudy/NavHeader/index.tsx b/webapp/src/components/App/Singlestudy/NavHeader/index.tsx
index 4a2f134418..029585beb2 100644
--- a/webapp/src/components/App/Singlestudy/NavHeader/index.tsx
+++ b/webapp/src/components/App/Singlestudy/NavHeader/index.tsx
@@ -12,7 +12,7 @@ import DeleteOutlinedIcon from "@mui/icons-material/DeleteOutlined";
 import EditOutlinedIcon from "@mui/icons-material/EditOutlined";
 import { useTranslation } from "react-i18next";
 import { StudyMetadata, VariantTree } from "../../../../common/types";
-import { STUDIES_HEIGHT_HEADER } from "../../../../theme";
+import { STUDIES_HEIGHT_HEADER } from "../../theme";
 import { archiveStudy, unarchiveStudy } from "../../../../services/api/study";
 import { deleteStudy } from "../../../../redux/ducks/studies";
 import LauncherDialog from "../../Studies/LauncherDialog";
diff --git a/webapp/src/components/App/Singlestudy/UpgradeDialog.tsx b/webapp/src/components/App/Singlestudy/UpgradeDialog.tsx
index 7828d1b4c0..74c6796a46 100644
--- a/webapp/src/components/App/Singlestudy/UpgradeDialog.tsx
+++ b/webapp/src/components/App/Singlestudy/UpgradeDialog.tsx
@@ -62,7 +62,6 @@ function UpgradeDialog({ study, onClose, open }: Props) {
           <SelectFE
             name="version"
             label="Version"
-            variant="filled"
             options={versionOptions}
             control={control}
           />
diff --git a/webapp/src/components/App/Singlestudy/explore/Configuration/General/Fields.tsx b/webapp/src/components/App/Singlestudy/explore/Configuration/General/Fields.tsx
index 0fe6af285b..8913ce3f49 100644
--- a/webapp/src/components/App/Singlestudy/explore/Configuration/General/Fields.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Configuration/General/Fields.tsx
@@ -141,7 +141,6 @@ function Fields(props: Props) {
         <NumberFE
           name="firstDay"
           label={t("study.configuration.general.firstDay")}
-          variant="filled"
           control={control}
           rules={{
             deps: "lastDay",
@@ -151,7 +150,6 @@ function Fields(props: Props) {
         <NumberFE
           name="lastDay"
           label={t("study.configuration.general.lastDay")}
-          variant="filled"
           control={control}
           rules={{
             deps: "firstDay",
@@ -160,12 +158,7 @@ function Fields(props: Props) {
         />
       </Fieldset>
       <Fieldset legend={t("study.configuration.general.legend.calendar")}>
-        <StringFE
-          name="horizon"
-          label="Horizon"
-          variant="filled"
-          control={control}
-        />
+        <StringFE name="horizon" label="Horizon" control={control} />
         <SelectFE
           name="firstMonth"
           label={t("study.configuration.general.year")}
@@ -207,7 +200,6 @@ function Fields(props: Props) {
           <NumberFE
             name="nbYears"
             label={t("study.configuration.general.nbYears")}
-            variant="filled"
             control={control}
             rules={{
               validate: handleNbYearsValidation,
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/AddConstraintTermForm/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/AddConstraintTermForm/index.tsx
index e833cbe810..6051d4b12e 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/AddConstraintTermForm/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/AddConstraintTermDialog/AddConstraintTermForm/index.tsx
@@ -43,7 +43,6 @@ export default function AddConstraintTermForm(props: Props) {
             <NumberFE
               name="weight"
               label={t("study.modelization.bindingConst.weight")}
-              variant="filled"
               control={control}
               rules={{
                 required: t("form.field.required") as string,
@@ -76,7 +75,6 @@ export default function AddConstraintTermForm(props: Props) {
                   <NumberFE
                     name="offset"
                     label={t("study.modelization.bindingConst.offset")}
-                    variant="filled"
                     control={control}
                     rules={{
                       required: t("form.field.required") as string,
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/ConstraintTerm/index.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/ConstraintTerm/index.tsx
index 136f0f287d..00b89e375e 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/ConstraintTerm/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/ConstraintTerm/index.tsx
@@ -80,7 +80,6 @@ export default function ConstraintItem(props: Props) {
         left={
           <TextField
             label={t("study.modelization.bindingConst.weight")}
-            variant="filled"
             type="number"
             value={weight}
             onChange={(e) => handleChange("weight", e.target.value)}
@@ -113,7 +112,6 @@ export default function ConstraintItem(props: Props) {
               <OffsetInput onRemove={() => handleChange("offset", null)}>
                 <TextField
                   label={t("study.modelization.bindingConst.offset")}
-                  variant="filled"
                   type="number"
                   value={offset}
                   onChange={(e) => handleChange("offset", e.target.value)}
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/constraintviews/ConstraintElement.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/constraintviews/ConstraintElement.tsx
index c675363650..6ecbbd395e 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/constraintviews/ConstraintElement.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/constraintviews/ConstraintElement.tsx
@@ -22,7 +22,6 @@ export default function ConstraintElement(props: ElementProps) {
       <ConstraintElementHeader>
         <Typography
           sx={{
-            color: "grey.400",
             fontSize: "16px",
           }}
         >
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/constraintviews/style.ts b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/constraintviews/style.ts
index 11960d32c0..ae1616cc99 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/constraintviews/style.ts
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/BindingConstraints/BindingConstView/constraintviews/style.ts
@@ -1,11 +1,9 @@
 import { Box, Paper, styled } from "@mui/material";
-import { PAPER_BACKGROUND_NO_TRANSPARENCY } from "../../../../../../../../theme";
 
 export const ConstraintElementRoot = styled(Paper)(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
   padding: theme.spacing(1),
-  backgroundColor: PAPER_BACKGROUND_NO_TRANSPARENCY,
 }));
 
 export const ConstraintElementHeader = styled(Box)(({ theme }) => ({
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Map/Areas/AreaConfig.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Map/Areas/AreaConfig.tsx
index 44749abe3e..f7e4209792 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Map/Areas/AreaConfig.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Map/Areas/AreaConfig.tsx
@@ -84,7 +84,6 @@ function AreaConfig(props: Props) {
           <TextField
             sx={{ mt: 1 }}
             label={t("study.modelization.map.areaName")}
-            variant="filled"
             value={currentArea.name}
             disabled
           />
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Districts/UpdateDistrictDialog.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Districts/UpdateDistrictDialog.tsx
index d99e37fc91..29b05fedc3 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Districts/UpdateDistrictDialog.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Districts/UpdateDistrictDialog.tsx
@@ -91,7 +91,6 @@ function UpdateDistrictDialog(props: Props) {
           <SelectFE
             name="districtId"
             label={t("study.modelization.map.districts")}
-            variant="filled"
             options={districtsOptions}
             control={control}
             onChange={(e) => {
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Layers/UpdateLayerDialog.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Layers/UpdateLayerDialog.tsx
index 1160b309bc..ce0bcfb7bd 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Layers/UpdateLayerDialog.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Map/MapConfig/Layers/UpdateLayerDialog.tsx
@@ -91,7 +91,6 @@ function UpdateLayerDialog(props: Props) {
           <SelectFE
             name="layerId"
             label={t("Layers")}
-            variant="filled"
             options={layersOptions}
             control={control}
             onChange={(e) =>
diff --git a/webapp/src/components/App/Singlestudy/explore/Xpansion/Candidates/CandidateForm.tsx b/webapp/src/components/App/Singlestudy/explore/Xpansion/Candidates/CandidateForm.tsx
index f2bdb8c89f..c5b8fb916a 100644
--- a/webapp/src/components/App/Singlestudy/explore/Xpansion/Candidates/CandidateForm.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Xpansion/Candidates/CandidateForm.tsx
@@ -129,7 +129,6 @@ function CandidateForm(props: PropType) {
         <Fields>
           <TextField
             label={t("global.name")}
-            variant="filled"
             value={currentCandidate?.name || ""}
             onChange={(e) => handleChange("name", e.target.value)}
           />
@@ -154,7 +153,6 @@ function CandidateForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.annualCost")}
-            variant="filled"
             value={currentCandidate?.["annual-cost-per-mw"] || ""}
             onChange={(e) =>
               handleChange("annual-cost-per-mw", parseFloat(e.target.value))
@@ -163,7 +161,6 @@ function CandidateForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.alreadyICapacity")}
-            variant="filled"
             value={currentCandidate?.["already-installed-capacity"] || ""}
             onChange={(e) =>
               handleChange(
@@ -206,7 +203,6 @@ function CandidateForm(props: PropType) {
                 sx={{ mr: 2 }}
                 type="number"
                 label={t("xpansion.unitSize")}
-                variant="filled"
                 value={currentCandidate?.["unit-size"] || ""}
                 onChange={(e) =>
                   handleChange("unit-size", parseFloat(e.target.value))
@@ -215,7 +211,6 @@ function CandidateForm(props: PropType) {
               <TextField
                 type="number"
                 label={t("xpansion.maxUnits")}
-                variant="filled"
                 value={currentCandidate?.["max-units"] || ""}
                 onChange={(e) =>
                   handleChange("max-units", parseFloat(e.target.value))
@@ -227,7 +222,6 @@ function CandidateForm(props: PropType) {
             <TextField
               type="number"
               label={t("xpansion.maxInvestments")}
-              variant="filled"
               value={currentCandidate?.["max-investment"] || ""}
               onChange={(e) =>
                 handleChange("max-investment", parseFloat(e.target.value))
diff --git a/webapp/src/components/App/Singlestudy/explore/Xpansion/Settings/SettingsForm.tsx b/webapp/src/components/App/Singlestudy/explore/Xpansion/Settings/SettingsForm.tsx
index 8a7298e2e5..23f38274a2 100644
--- a/webapp/src/components/App/Singlestudy/explore/Xpansion/Settings/SettingsForm.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Xpansion/Settings/SettingsForm.tsx
@@ -129,7 +129,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.maxIteration")}
-            variant="filled"
             value={currentSettings.max_iteration}
             onChange={(e) => handleChange("max_iteration", e.target.value)}
             sx={{ mb: 1 }}
@@ -138,7 +137,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.optimalityGap")}
-            variant="filled"
             value={currentSettings.optimality_gap}
             onChange={(e) =>
               handleChange("optimality_gap", parseFloat(e.target.value))
@@ -149,7 +147,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.relativeGap")}
-            variant="filled"
             value={currentSettings.relative_gap}
             onChange={(e) =>
               handleChange("relative_gap", parseFloat(e.target.value))
@@ -160,7 +157,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.relaxedOptimalityGap")}
-            variant="filled"
             value={currentSettings.relaxed_optimality_gap}
             onChange={(e) =>
               handleChange("relaxed_optimality_gap", e.target.value)
@@ -185,7 +181,7 @@ function SettingsForm(props: PropType) {
           {/* <TextField
             type="number"
             label={t("xpansion.timeLimit")}
-            variant="filled"
+            
             value={Math.round((currentSettings.timelimit || 1e12) / 3600)}
             onChange={(e) =>
               handleChange(
@@ -198,7 +194,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.separationParameter")}
-            variant="filled"
             value={currentSettings.separation_parameter}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
               handleChange("separation_parameter", parseFloat(e.target.value))
@@ -209,7 +204,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.batchSize")}
-            variant="filled"
             value={currentSettings.batch_size}
             onChange={(e) =>
               handleChange("batch_size", parseInt(e.target.value, 10))
@@ -220,7 +214,6 @@ function SettingsForm(props: PropType) {
           <TextField
             type="number"
             label={t("xpansion.logLevel")}
-            variant="filled"
             value={currentSettings.log_level}
             onChange={(e) =>
               handleChange("log_level", parseInt(e.target.value, 10))
@@ -343,7 +336,6 @@ function SettingsForm(props: PropType) {
                 e.target.value as string[],
               )
             }
-            variant="filled"
             options={candidates}
           />
         </Box>
diff --git a/webapp/src/components/App/Studies/ExportModal/ExportFilter/Filter/index.tsx b/webapp/src/components/App/Studies/ExportModal/ExportFilter/Filter/index.tsx
index cffc673c9e..36e97a23dc 100644
--- a/webapp/src/components/App/Studies/ExportModal/ExportFilter/Filter/index.tsx
+++ b/webapp/src/components/App/Studies/ExportModal/ExportFilter/Filter/index.tsx
@@ -73,14 +73,12 @@ function Filter(props: PropTypes) {
       <TextField
         label={t("study.filterIn")}
         value={filterInValue}
-        variant="filled"
         onChange={(event) => setFilterInValue(event.target.value)}
         sx={{ m: 0, mb: 2, width: "95%" }}
       />
       <TextField
         label={t("study.filterOut")}
         value={filterOutValue}
-        variant="filled"
         onChange={(event) => setFilterOutValue(event.target.value)}
         sx={{ m: 0, mb: 2, width: "95%" }}
       />
diff --git a/webapp/src/components/App/Studies/ExportModal/ExportFilter/TagSelect/index.tsx b/webapp/src/components/App/Studies/ExportModal/ExportFilter/TagSelect/index.tsx
index ba4d1bca14..3644a11712 100644
--- a/webapp/src/components/App/Studies/ExportModal/ExportFilter/TagSelect/index.tsx
+++ b/webapp/src/components/App/Studies/ExportModal/ExportFilter/TagSelect/index.tsx
@@ -25,7 +25,6 @@ function TagSelect(props: PropTypes) {
         <TextField
           label={label}
           value={value}
-          variant="filled"
           onChange={(event) => setValue(event.target.value)}
           sx={{ m: 0, mr: 1, flex: 1 }}
         />
diff --git a/webapp/src/components/App/Studies/FilterDrawer.tsx b/webapp/src/components/App/Studies/FilterDrawer.tsx
index 5a613d7a6a..c2d32afbb7 100644
--- a/webapp/src/components/App/Studies/FilterDrawer.tsx
+++ b/webapp/src/components/App/Studies/FilterDrawer.tsx
@@ -4,7 +4,7 @@ import Toolbar from "@mui/material/Toolbar";
 import Divider from "@mui/material/Divider";
 import { Button, Drawer, List, ListItem, Typography } from "@mui/material";
 import { useEffect, useRef } from "react";
-import { STUDIES_FILTER_WIDTH } from "../../../theme";
+import { STUDIES_FILTER_WIDTH } from "../theme";
 import useAppSelector from "../../../redux/hooks/useAppSelector";
 import {
   getGroups,
@@ -93,7 +93,6 @@ function FilterDrawer(props: Props) {
           flexDirection="column"
           flexWrap="nowrap"
           boxSizing="border-box"
-          color="white"
         >
           <Typography sx={{ color: "grey.500", fontSize: "0.9em", mb: 2 }}>
             {t("global.filter").toUpperCase()}
diff --git a/webapp/src/components/App/Studies/HeaderBottom.tsx b/webapp/src/components/App/Studies/HeaderBottom.tsx
index da107facd7..d93d4c78b4 100644
--- a/webapp/src/components/App/Studies/HeaderBottom.tsx
+++ b/webapp/src/components/App/Studies/HeaderBottom.tsx
@@ -84,7 +84,6 @@ function HeaderBottom(props: PropTypes) {
         {filters.managed && (
           <Chip
             label={t("studies.managedStudiesFilter")}
-            variant="filled"
             color="secondary"
             onDelete={() => setFilterValue("managed", false)}
             sx={{ mx: 1 }}
@@ -93,7 +92,6 @@ function HeaderBottom(props: PropTypes) {
         {filters.archived && (
           <Chip
             label={t("studies.archivedStudiesFilter")}
-            variant="filled"
             color="secondary"
             onDelete={() => setFilterValue("archived", false)}
             sx={{ mx: 1 }}
@@ -111,7 +109,6 @@ function HeaderBottom(props: PropTypes) {
           <Chip
             key={version}
             label={displayVersionName(version)}
-            variant="filled"
             color="primary"
             onDelete={() => {
               setFilterValue(
@@ -126,7 +123,6 @@ function HeaderBottom(props: PropTypes) {
           <Chip
             key={user.id}
             label={user.name}
-            variant="filled"
             onDelete={() => {
               setFilterValue(
                 "users",
@@ -140,7 +136,6 @@ function HeaderBottom(props: PropTypes) {
           <Chip
             key={group.id}
             label={group.name}
-            variant="filled"
             color="success"
             onDelete={() => {
               setFilterValue(
@@ -155,7 +150,6 @@ function HeaderBottom(props: PropTypes) {
           <Chip
             key={tag}
             label={tag}
-            variant="filled"
             onDelete={() => {
               setFilterValue(
                 "tags",
diff --git a/webapp/src/components/App/Studies/LauncherDialog.tsx b/webapp/src/components/App/Studies/LauncherDialog.tsx
index 1419bfe6ac..f6e4433ed4 100644
--- a/webapp/src/components/App/Studies/LauncherDialog.tsx
+++ b/webapp/src/components/App/Studies/LauncherDialog.tsx
@@ -248,7 +248,6 @@ function LauncherDialog(props: Props) {
             id="launcher-option-output-suffix"
             label={t("global.name")}
             type="text"
-            variant="filled"
             value={options.output_suffix}
             onChange={(e) =>
               handleChange("output_suffix", e.target.value.trim())
@@ -264,7 +263,6 @@ function LauncherDialog(props: Props) {
             id="launcher-option-time-limit"
             label={t("study.timeLimit")}
             type="number"
-            variant="filled"
             value={(options.time_limit ?? 864000) / 3600} // 240 hours default
             onChange={(e) =>
               handleChange("time_limit", timeLimitParse(e.target.value))
@@ -287,7 +285,6 @@ function LauncherDialog(props: Props) {
                 id="nb-cpu"
                 label={t("study.nbCpu")}
                 type="number"
-                variant="filled"
                 value={options.nb_cpu}
                 onChange={(e) => {
                   const newValue = parseInt(e.target.value, 10);
@@ -333,7 +330,6 @@ function LauncherDialog(props: Props) {
             id="other-options"
             label={t("study.otherOptions")}
             type="text"
-            variant="filled"
             value={options.other_options}
             onChange={(e) => handleChange("other_options", e.target.value)}
             sx={{
diff --git a/webapp/src/components/App/Studies/SideNav.tsx b/webapp/src/components/App/Studies/SideNav.tsx
index d1e2f7ac38..d62846c5b4 100644
--- a/webapp/src/components/App/Studies/SideNav.tsx
+++ b/webapp/src/components/App/Studies/SideNav.tsx
@@ -1,7 +1,7 @@
 import { useNavigate } from "react-router";
 import { Box, Typography, List, ListItem, ListItemText } from "@mui/material";
 import { useTranslation } from "react-i18next";
-import { STUDIES_SIDE_NAV_WIDTH } from "../../../theme";
+import { STUDIES_SIDE_NAV_WIDTH } from "../theme";
 import StudyTree from "./StudyTree";
 import useAppSelector from "../../../redux/hooks/useAppSelector";
 import { getFavoriteStudies } from "../../../redux/selectors";
@@ -23,9 +23,7 @@ function SideNav() {
       p={2}
       sx={{ overflowX: "hidden", overflowY: "auto" }}
     >
-      <Typography sx={{ color: "grey.400" }}>
-        {t("studies.favorites")}
-      </Typography>
+      <Typography>{t("studies.favorites")}</Typography>
       <List sx={{ width: "100%" }}>
         {favorites.map((fav) => (
           <ListItem
@@ -46,7 +44,7 @@ function SideNav() {
           </ListItem>
         ))}
       </List>
-      <Typography sx={{ color: "grey.400" }}>Exploration</Typography>
+      <Typography>Exploration</Typography>
       <StudyTree />
     </Box>
   );
diff --git a/webapp/src/components/App/Studies/StudiesList/index.tsx b/webapp/src/components/App/Studies/StudiesList/index.tsx
index 65c8befbf9..c16f46c579 100644
--- a/webapp/src/components/App/Studies/StudiesList/index.tsx
+++ b/webapp/src/components/App/Studies/StudiesList/index.tsx
@@ -1,16 +1,10 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   Box,
   Typography,
   Breadcrumbs,
-  Select,
-  MenuItem,
-  ListItemText,
-  SelectChangeEvent,
-  ListItemIcon,
   Tooltip,
   FormControl,
-  InputLabel,
   IconButton,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
@@ -22,16 +16,11 @@ import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import FolderOffIcon from "@mui/icons-material/FolderOff";
 import RadarIcon from "@mui/icons-material/Radar";
 import { FixedSizeGrid, GridOnScrollProps } from "react-window";
-import { v4 as uuidv4 } from "uuid";
 import { AxiosError } from "axios";
 import { StudyMetadata } from "../../../../common/types";
-import {
-  STUDIES_HEIGHT_HEADER,
-  STUDIES_LIST_HEADER_HEIGHT,
-} from "../../../../theme";
+import { STUDIES_HEIGHT_HEADER, STUDIES_LIST_HEADER_HEIGHT } from "../../theme";
 import {
   setStudyScrollPosition,
-  StudiesSortConf,
   updateStudiesSortConf,
   updateStudyFilters,
 } from "../../../../redux/ducks/studies";
@@ -50,6 +39,7 @@ import RefreshButton from "../RefreshButton";
 import { scanFolder } from "../../../../services/api/study";
 import useEnqueueErrorSnackbar from "../../../../hooks/useEnqueueErrorSnackbar";
 import ConfirmationDialog from "../../../common/dialogs/ConfirmationDialog";
+import SelectFE from "../../../common/fieldEditors/SelectFE";
 
 const CARD_TARGET_WIDTH = 500;
 const CARD_HEIGHT = 250;
@@ -73,7 +63,6 @@ function StudiesList(props: StudiesListProps) {
   );
   const [folderList, setFolderList] = useState(folder.split("/"));
   const dispatch = useAppDispatch();
-  const sortLabelId = useRef(uuidv4()).current;
   const [selectedStudies, setSelectedStudies] = useState<string[]>([]);
   const [selectionMode, setSelectionMode] = useState(false);
   const [confirmFolderScan, setConfirmFolderScan] = useState<boolean>(false);
@@ -94,27 +83,33 @@ function StudiesList(props: StudiesListProps) {
     }
   }, [selectedStudies]);
 
-  const sortOptions = useMemo<Array<StudiesSortConf & { name: string }>>(
+  const sortOptions = useMemo(
     () => [
       {
-        name: t("studies.sortByName"),
-        property: "name",
-        order: "ascend",
+        label: t("studies.sortByName"),
+        value: JSON.stringify({ property: "name", order: "ascend" }),
+        icon: ArrowUpwardIcon,
       },
       {
-        name: t("studies.sortByName"),
-        property: "name",
-        order: "descend",
+        label: t("studies.sortByName"),
+        value: JSON.stringify({ property: "name", order: "descend" }),
+        icon: ArrowDownwardIcon,
       },
       {
-        name: t("studies.sortByDate"),
-        property: "modificationDate",
-        order: "ascend",
+        label: t("studies.sortByDate"),
+        value: JSON.stringify({
+          property: "modificationDate",
+          order: "ascend",
+        }),
+        icon: ArrowUpwardIcon,
       },
       {
-        name: t("studies.sortByDate"),
-        property: "modificationDate",
-        order: "descend",
+        label: t("studies.sortByDate"),
+        value: JSON.stringify({
+          property: "modificationDate",
+          order: "descend",
+        }),
+        icon: ArrowDownwardIcon,
       },
     ],
     [t],
@@ -235,7 +230,7 @@ function StudiesList(props: StudiesListProps) {
               );
             })}
           </Breadcrumbs>
-          <Typography mx={2} sx={{ color: "white" }}>
+          <Typography mx={2}>
             ({`${studyIds.length} ${t("global.studies").toLowerCase()}`})
           </Typography>
           <Tooltip title={t("studies.filters.strictfolder") as string}>
@@ -277,69 +272,16 @@ function StudiesList(props: StudiesListProps) {
             setSelectionMode={setSelectionMode}
           />
           <RefreshButton />
-          <FormControl
-            sx={{
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "center",
-              alignItems: "flex-start",
-              boxSizing: "border-box",
-            }}
-          >
-            <InputLabel id={sortLabelId} variant="standard">
-              {t("studies.sortBy")}
-            </InputLabel>
-            <Select
-              labelId={sortLabelId}
-              value={JSON.stringify(sortConf)}
-              label={t("studies.sortBy")}
-              variant="filled"
-              onChange={(e: SelectChangeEvent<string>) =>
-                dispatch(updateStudiesSortConf(JSON.parse(e.target.value)))
-              }
-              sx={{
-                width: "230px",
-                height: "45px",
-                ".MuiSelect-select": {
-                  display: "flex",
-                  flexFlow: "row nowrap",
-                  justifyContent: "center",
-                  alignItems: "center",
-                },
-                background: "rgba(255, 255, 255, 0)",
-                borderRadius: "4px 4px 0px 0px",
-                borderBottom: "1px solid rgba(255, 255, 255, 0.42)",
-                ".MuiSelect-icon": {
-                  backgroundColor: "#222333",
-                },
-              }}
-            >
-              {sortOptions.map(({ name, ...conf }) => {
-                const value = JSON.stringify(conf);
-                return (
-                  <MenuItem
-                    key={value}
-                    value={value}
-                    sx={{
-                      display: "flex",
-                      flexFlow: "row nowrap",
-                      justifyContent: "center",
-                      alignItems: "center",
-                    }}
-                  >
-                    <ListItemIcon sx={{ minWidth: "30px" }}>
-                      {conf.order === "ascend" ? (
-                        <ArrowUpwardIcon />
-                      ) : (
-                        <ArrowDownwardIcon />
-                      )}
-                    </ListItemIcon>
-                    <ListItemText primary={name} />
-                  </MenuItem>
-                );
-              })}
-            </Select>
-          </FormControl>
+          <SelectFE
+            label={t("studies.sortBy")}
+            value={JSON.stringify(sortConf)}
+            onChange={(e) =>
+              dispatch(
+                updateStudiesSortConf(JSON.parse(e.target.value as string)),
+              )
+            }
+            options={sortOptions}
+          />
         </Box>
       </Box>
       <Box sx={{ width: 1, height: 1 }}>
diff --git a/webapp/src/components/App/Studies/StudyCard.tsx b/webapp/src/components/App/Studies/StudyCard.tsx
index 976ee7acd8..82bb809ffa 100644
--- a/webapp/src/components/App/Studies/StudyCard.tsx
+++ b/webapp/src/components/App/Studies/StudyCard.tsx
@@ -246,7 +246,6 @@ const StudyCard = memo((props: Props) => {
               component="div"
               onClick={() => navigate(`/studies/${study.id}`)}
               sx={{
-                color: "white",
                 boxSizing: "border-box",
                 flexFlow: "nowrap",
                 width: "calc(100% - 64px)",
diff --git a/webapp/src/components/App/Tasks/index.tsx b/webapp/src/components/App/Tasks/index.tsx
index 11c8a7f525..2926b1a9e5 100644
--- a/webapp/src/components/App/Tasks/index.tsx
+++ b/webapp/src/components/App/Tasks/index.tsx
@@ -161,7 +161,6 @@ function JobsListing() {
           <Chip
             key="xpansion"
             label="Xpansion"
-            variant="filled"
             sx={{ m: 0.25, color: "black", bgcolor: indigo[300] }}
           />
         )}
@@ -169,7 +168,6 @@ function JobsListing() {
           <Chip
             key="adequacy_patch"
             label="Adequacy patch"
-            variant="filled"
             sx={{ m: 0.25, color: "black", bgcolor: indigo[300] }}
           />
         )}
@@ -295,7 +293,7 @@ function JobsListing() {
                 style={{ textDecoration: "none" }}
                 to={`/studies/${encodeURI(job.studyId)}`}
               >
-                <Typography sx={{ color: "white", fontSize: "0.95rem" }}>
+                <Typography sx={{ fontSize: "0.95rem" }}>
                   {studies.find((s) => s.id === job.studyId)?.name ||
                     `${t("global.unknown")} (${job.id})`}
                 </Typography>
diff --git a/webapp/src/components/App/index.tsx b/webapp/src/components/App/index.tsx
index be247e296b..e1e75f45bf 100644
--- a/webapp/src/components/App/index.tsx
+++ b/webapp/src/components/App/index.tsx
@@ -7,7 +7,6 @@ import {
 } from "react-router-dom";
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { SnackbarProvider } from "notistack";
-import maintheme from "../../theme";
 import MenuWrapper from "../wrappers/MenuWrapper";
 import Studies from "./Studies";
 import Data from "./Data";
@@ -54,13 +53,16 @@ import StorageForm from "./Singlestudy/explore/Modelization/Areas/Storages/Form"
 import ThermalForm from "./Singlestudy/explore/Modelization/Areas/Thermal/Form";
 import RenewablesForm from "./Singlestudy/explore/Modelization/Areas/Renewables/Form";
 import SplitHydroMatrix from "./Singlestudy/explore/Modelization/Areas/Hydro/SplitHydroMatrix";
+import useMuiTheme from "../../hooks/useMuiTheme";
 
 function App() {
+  const { theme } = useMuiTheme();
+
   return (
     <Router>
-      <ThemeProvider theme={maintheme}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
         <SnackbarProvider maxSnack={5}>
-          <CssBaseline />
           <MaintenanceWrapper>
             <LoginWrapper>
               <MenuWrapper>
diff --git a/webapp/src/components/App/theme.ts b/webapp/src/components/App/theme.ts
new file mode 100644
index 0000000000..343c1e3aaf
--- /dev/null
+++ b/webapp/src/components/App/theme.ts
@@ -0,0 +1,203 @@
+export const DRAWER_WIDTH = 60;
+export const DRAWER_WIDTH_EXTENDED = 240;
+export const STUDIES_HEIGHT_HEADER = 100;
+export const STUDIES_SIDE_NAV_WIDTH = 300;
+export const STUDIES_LIST_HEADER_HEIGHT = 100;
+export const STUDIES_FILTER_WIDTH = 300;
+
+export const SECONDARY_MAIN_COLOR = "#00B2FF";
+
+// components: {
+//   MuiCssBaseline: {
+//     styleOverrides: {
+//       div: {
+//         ...scrollbarStyle,
+//       },
+//       ul: {
+//         ...scrollbarStyle,
+//       },
+//       pre: {
+//         ...scrollbarStyle,
+//       },
+//     },
+//   },
+//   MuiPaper: {
+//     styleOverrides: {
+//       root: {
+//         backgroundColor: "#222333",
+//       },
+//     },
+//   },
+//   MuiAlert: {
+//     styleOverrides: {
+//       root: {
+//         backgroundColor: "#222333",
+//         color: "#FFFFFF",
+//       },
+//     },
+//   },
+//   MuiPopover: {
+//     styleOverrides: {
+//       paper: {
+//         ...scrollbarStyle,
+//       },
+//     },
+//   },
+//   MuiButton: {
+//     variants: [
+//       {
+//         props: { variant: "contained", color: "success" },
+//         style: {
+//           color: "#FFFFFF",
+//         },
+//       },
+//       {
+//         props: { variant: "contained", color: "error" },
+//         style: {
+//           color: "#FFFFFF",
+//         },
+//       },
+//     ],
+//   },
+//   MuiTextField: {
+//     variants: [
+//       {
+//         props: { variant: "outlined" },
+//         style: {
+//           margin: "8px",
+//           "& .MuiOutlinedInput-root:not(.MuiInputBase-multiline):not(.MuiAutocomplete-inputRoot) .MuiInputAdornment-sizeMedium + .MuiOutlinedInput-input":
+//             {
+//               // Default value: 'padding: 16.5px 14px'
+//               // Don't use 'padding' to support adornments left and right
+//               paddingTop: "13.5px",
+//               paddingBottom: "13.5px",
+//             },
+//         },
+//       },
+//       {
+//         props: { variant: "filled" },
+//         style: {
+//           ".MuiFilledInput-root": {
+//             background: "rgba(255, 255, 255, 0.09)",
+//             borderBottom: "1px solid rgba(255, 255, 255, 0.42)",
+//           },
+//           borderRadius: "4px 4px 0px 0px",
+//           minHeight: 0,
+//         },
+//       },
+//     ],
+//   },
+//   MuiSelect: {
+//     variants: [
+//       {
+//         props: { variant: "filled" },
+//         style: {
+//           background: "rgba(255, 255, 255, 0.09)",
+//           borderRadius: "4px 4px 0px 0px",
+//           borderBottom: "1px solid rgba(255, 255, 255, 0.42)",
+//           ".MuiSelect-icon": {
+//             backgroundColor: "#222333",
+//           },
+//         },
+//       },
+//     ],
+//   },
+//   MuiFormControl: {
+//     variants: [
+//       {
+//         props: { variant: "outlined" },
+//         style: {
+//           "> div > fieldset": {
+//             borderColor: "rgba(255,255,255,0.09)",
+//           },
+//         },
+//       },
+//     ],
+//   },
+// },
+// typography: {
+//   fontFamily: "'Inter', sans-serif",
+// },
+// palette: {
+//   background: {
+//     default: "#222333",
+//   },
+//   primary: {
+//     dark: "#C9940B",
+//     main: "#FFB800",
+//     light: "#FFDB7D",
+//     contrast: "rgba(0, 0, 0, 0.87)",
+//     containedHoverBackground:
+//       "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #FFB800",
+//     outlinedHoverBackground: "rgba(255, 184, 0, 0.08)",
+//     outlinedRestingBackground: "rgba(255, 184, 0, 0.05)",
+//   },
+//   secondary: {
+//     dark: "#0092D0",
+//     main: SECONDARY_MAIN_COLOR,
+//     light: "#77CFF5",
+//     contrast: "rgba(30, 30, 30, 0.87)",
+//     containedHoverBackground: `linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), ${SECONDARY_MAIN_COLOR}`,
+//     outlinedHoverBackground: "rgba(0, 178, 255, 0.08)",
+//     outlinedRestingBackground: "rgba(0, 178, 255, 0.5)",
+//   },
+//   success: {
+//     dark: "#388E3C",
+//     main: "#66BB6A",
+//     light: "#81C784",
+//     contrast: "#FFFFFF",
+//     containedHoverBackground:
+//       "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #66BB6A",
+//     outlinedHoverBackground: "rgba(102, 187, 106, 0.5)",
+//     outlinedRestingBackground: "rgba(102, 187, 106, 0.08)",
+//   },
+//   warning: {
+//     dark: "#F57C00",
+//     main: "#FF9800",
+//     light: "#FFB74D",
+//     contrast: "#FFFFFF",
+//     containedHoverBackground:
+//       "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #FF9800",
+//     outlinedHoverBackground: "rgba(255, 152, 0, 0.08)",
+//     outlinedRestingBackground: "rgba(255, 152, 0, 0.05)",
+//   },
+//   error: {
+//     dark: "#D32F2F",
+//     main: "#F44336",
+//     light: "#E57373",
+//     contrast: "#FFFFFF",
+//     containedHoverBackground:
+//       "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #F44336",
+//     outlinedHoverBackground: "rgba(244, 67, 54, 0.08)",
+//     outlinedRestingBackground: "rgba(244, 67, 54, 0.05)",
+//   },
+//   info: {
+//     dark: "#1976D2",
+//     main: "#2196F3",
+//     light: "#64B5F6",
+//     contrast: "#FFFFFF",
+//     containedHoverBackground:
+//       "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #2196F3",
+//     outlinedHoverBackground: "rgba(33, 150, 243, 0.08)",
+//     outlinedRestingBackground: "rgba(33, 150, 243, 0.05)",
+//   },
+//   text: {
+//     primary: "#FFFFFF",
+//     secondary: "rgba(255, 255, 255, 0.7)",
+//     disabled: "rgba(255, 255, 255, 0.5)",
+//   },
+//   action: {
+//     active: "rgba(255, 255, 255, 0.56)",
+//     hover: "rgba(255, 255, 255, 0.32)",
+//     selected: "rgba(255, 255, 255, 0.16)",
+//     disabled: "rgba(255, 255, 255, 0.3)",
+//     disabledBackground: "rgba(255, 255, 255, 0.12)",
+//     focus: "rgba(255, 255, 255, 0.12)",
+//   },
+//   divider: "rgba(255, 255, 255, 0.12)",
+//   outlineBorder: "#222333",
+//   standardFieldLine: "#222333",
+//   backdrop: "rgba(0, 0, 0, 0.5)",
+//   activeRating: "#FFB400",
+//   snackbar: "#FFFFFF",
+// },
diff --git a/webapp/src/components/common/FormGenerator/index.tsx b/webapp/src/components/common/FormGenerator/index.tsx
index b91dc7c9bc..11d2bd0d06 100644
--- a/webapp/src/components/common/FormGenerator/index.tsx
+++ b/webapp/src/components/common/FormGenerator/index.tsx
@@ -109,7 +109,6 @@ export default function FormGenerator<T extends FieldValues>(
                     () => (
                       <StringFE
                         {...otherProps}
-                        variant="filled"
                         control={control}
                         rules={vRules}
                       />
@@ -120,7 +119,6 @@ export default function FormGenerator<T extends FieldValues>(
                     () => (
                       <NumberFE
                         {...otherProps}
-                        variant="filled"
                         control={control}
                         rules={vRules}
                       />
@@ -141,7 +139,6 @@ export default function FormGenerator<T extends FieldValues>(
                     () => (
                       <BooleanFE
                         {...otherProps}
-                        variant="filled"
                         control={control}
                         rules={vRules}
                       />
@@ -156,7 +153,6 @@ export default function FormGenerator<T extends FieldValues>(
                             .options || []
                         }
                         {...otherProps}
-                        variant="filled"
                         control={control}
                         rules={vRules}
                       />
diff --git a/webapp/src/components/common/Handsontable.tsx b/webapp/src/components/common/Handsontable.tsx
index 2434eff01d..bf36759dfe 100644
--- a/webapp/src/components/common/Handsontable.tsx
+++ b/webapp/src/components/common/Handsontable.tsx
@@ -3,7 +3,7 @@ import HotTable, { HotTableProps } from "@handsontable/react";
 import { styled } from "@mui/material";
 import { forwardRef } from "react";
 import * as RA from "ramda-adjunct";
-import { SECONDARY_MAIN_COLOR } from "../../theme";
+import { SECONDARY_MAIN_COLOR } from "../App/theme";
 
 // Register Handsontable's modules
 registerAllModules();
diff --git a/webapp/src/components/common/SelectMulti.tsx b/webapp/src/components/common/SelectMulti.tsx
index 5f916bd3f7..bb8c131017 100644
--- a/webapp/src/components/common/SelectMulti.tsx
+++ b/webapp/src/components/common/SelectMulti.tsx
@@ -72,7 +72,6 @@ function SelectMulti(props: Props) {
         id={`multiple-checkbox-${name}`}
         multiple
         value={data}
-        variant="filled"
         placeholder={placeholder}
         onChange={handleChange}
         renderValue={tagsMode === true ? chipRender : checkboxRender}
diff --git a/webapp/src/components/common/fieldEditors/CheckboxesTagsFE.tsx b/webapp/src/components/common/fieldEditors/CheckboxesTagsFE.tsx
index 42e3a7e3fb..c7fbe7c16c 100644
--- a/webapp/src/components/common/fieldEditors/CheckboxesTagsFE.tsx
+++ b/webapp/src/components/common/fieldEditors/CheckboxesTagsFE.tsx
@@ -79,8 +79,8 @@ function CheckboxesTagsFE<
       renderOption={(props, option, { selected }) => (
         <li {...props}>
           <Checkbox
-            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
-            checkedIcon={<CheckBoxIcon fontSize="small" />}
+            icon={<CheckBoxOutlineBlankIcon />}
+            checkedIcon={<CheckBoxIcon />}
             style={{ marginRight: 8 }}
             checked={selected}
           />
@@ -89,9 +89,7 @@ function CheckboxesTagsFE<
       )}
       renderInput={(params) => (
         <TextField
-          sx={{ m: 0 }}
           name={name}
-          variant="filled"
           label={label}
           error={error}
           helperText={helperText}
diff --git a/webapp/src/components/common/fieldEditors/ColorPickerFE/index.tsx b/webapp/src/components/common/fieldEditors/ColorPickerFE/index.tsx
index e0d39b342e..d0c2612b3d 100644
--- a/webapp/src/components/common/fieldEditors/ColorPickerFE/index.tsx
+++ b/webapp/src/components/common/fieldEditors/ColorPickerFE/index.tsx
@@ -85,12 +85,6 @@ function ColorPickerFE(props: ColorPickerFEProps) {
           ),
         }}
         onClick={() => setIsPickerOpen(true)}
-        sx={{
-          ".MuiInputAdornment-sizeMedium+.MuiOutlinedInput-input": {
-            paddingTop: "16.5px !important",
-            paddingBottom: "16.5px !important",
-          },
-        }}
       />
       {isPickerOpen && (
         <Box
diff --git a/webapp/src/components/common/fieldEditors/SelectFE.tsx b/webapp/src/components/common/fieldEditors/SelectFE.tsx
index 0eabb24884..2bdd8058a1 100644
--- a/webapp/src/components/common/fieldEditors/SelectFE.tsx
+++ b/webapp/src/components/common/fieldEditors/SelectFE.tsx
@@ -12,10 +12,12 @@ import * as RA from "ramda-adjunct";
 import { startCase } from "lodash";
 import { O } from "ts-toolbelt";
 import reactHookFormSupport from "../../../hoc/reactHookFormSupport";
+import type { SvgIconComponent } from "@mui/icons-material";
 
 type OptionObj<T extends O.Object = O.Object> = {
   label: string;
   value: string | number;
+  icon?: SvgIconComponent;
 } & T;
 
 export interface SelectFEProps extends Omit<SelectProps, "labelId"> {
@@ -42,7 +44,7 @@ function SelectFE(props: SelectFEProps) {
     options,
     emptyValue,
     inputRef,
-    variant = "filled",
+    variant,
     helperText,
     error,
     label,
@@ -80,8 +82,9 @@ function SelectFE(props: SelectFEProps) {
             <em>None</em>
           </MenuItem>
         )}
-        {optionsFormatted.map(({ id, value, label }) => (
+        {optionsFormatted.map(({ id, value, label, icon: Icon }) => (
           <MenuItem key={id} value={value}>
+            {Icon && <Icon sx={{ mr: 1, verticalAlign: "sub" }} />}
             {label}
           </MenuItem>
         ))}
diff --git a/webapp/src/components/wrappers/LoginWrapper.tsx b/webapp/src/components/wrappers/LoginWrapper.tsx
index 9d5dee2ada..555ab4f0c7 100644
--- a/webapp/src/components/wrappers/LoginWrapper.tsx
+++ b/webapp/src/components/wrappers/LoginWrapper.tsx
@@ -77,14 +77,7 @@ function LoginWrapper(props: Props) {
         canDisplayApp ? (
           children
         ) : (
-          <Box
-            display="flex"
-            height="100vh"
-            sx={{
-              background:
-                "radial-gradient(ellipse at top right, #190520 0%, #190520 30%, #222333 100%)",
-            }}
-          >
+          <Box display="flex" height="100vh">
             <Box
               position="absolute"
               top="0px"
@@ -153,7 +146,6 @@ function LoginWrapper(props: Props) {
                         <StringFE
                           name="username"
                           label="NNI"
-                          variant="filled"
                           size="small"
                           sx={{ mb: 2 }}
                           fullWidth
@@ -163,7 +155,6 @@ function LoginWrapper(props: Props) {
                         <PasswordFE
                           name="password"
                           label={t("global.password")}
-                          variant="filled"
                           size="small"
                           inputProps={{
                             // https://web.dev/sign-in-form-best-practices/#current-password
diff --git a/webapp/src/components/wrappers/MenuWrapper/index.tsx b/webapp/src/components/wrappers/MenuWrapper/index.tsx
index 7426442e92..26cb2f3a3d 100644
--- a/webapp/src/components/wrappers/MenuWrapper/index.tsx
+++ b/webapp/src/components/wrappers/MenuWrapper/index.tsx
@@ -154,18 +154,10 @@ function MenuWrapper(props: Props) {
       return (
         <Tooltip title={tooltipTitle} placement="right-end" key={elm.id}>
           <NavListItem link>
-            <NavInternalLink
-              to={elm.link}
-              end={elm.strict}
-              style={({ isActive }) => ({
-                background: isActive
-                  ? theme.palette.primary.outlinedHoverBackground
-                  : undefined,
-              })}
-            >
+            <NavInternalLink to={elm.link} end={elm.strict}>
               <NotificationBadge>
                 <NavListItemIcon>
-                  <elm.icon sx={{ color: "grey.400" }} />
+                  <elm.icon />
                 </NavListItemIcon>
               </NotificationBadge>
               {extended && <NavListItemText primary={t(`${elm.id}`)} />}
@@ -180,22 +172,14 @@ function MenuWrapper(props: Props) {
           {elm.newTab === true ? (
             <NavExternalLink href={elm.link} target="_blank">
               <NavListItemIcon>
-                <elm.icon sx={{ color: "grey.400" }} />
+                <elm.icon />
               </NavListItemIcon>
               {extended && <NavListItemText primary={t(`${elm.id}`)} />}
             </NavExternalLink>
           ) : (
-            <NavInternalLink
-              to={elm.link}
-              end={elm.strict}
-              style={({ isActive }) => ({
-                background: isActive
-                  ? theme.palette.primary.outlinedHoverBackground
-                  : undefined,
-              })}
-            >
+            <NavInternalLink to={elm.link} end={elm.strict}>
               <NavListItemIcon>
-                <elm.icon sx={{ color: "grey.400" }} />
+                <elm.icon />
               </NavListItemIcon>
               {extended && <NavListItemText primary={t(`${elm.id}`)} />}
             </NavInternalLink>
@@ -276,7 +260,7 @@ function MenuWrapper(props: Props) {
           >
             <NavListItem onClick={() => setOpenLogoutDialog(true)}>
               <NavInternalLink to="#">
-                <NavListItemIcon sx={{ color: "grey.400" }}>
+                <NavListItemIcon>
                   <LogoutIcon />
                 </NavListItemIcon>
                 {extended && <NavListItemText primary={t("logout.title")} />}
@@ -289,7 +273,7 @@ function MenuWrapper(props: Props) {
           >
             <NavListItem onClick={() => dispatch(setMenuCollapse(extended))}>
               <NavInternalLink to="#">
-                <NavListItemIcon sx={{ color: "grey.400" }}>
+                <NavListItemIcon>
                   {extended ? <ArrowBackIosIcon /> : <ArrowForwardIosIcon />}
                 </NavListItemIcon>
                 {extended && <NavListItemText primary={t("button.collapse")} />}
diff --git a/webapp/src/components/wrappers/MenuWrapper/styles.ts b/webapp/src/components/wrappers/MenuWrapper/styles.ts
index f7f39a869f..1b99def591 100644
--- a/webapp/src/components/wrappers/MenuWrapper/styles.ts
+++ b/webapp/src/components/wrappers/MenuWrapper/styles.ts
@@ -5,15 +5,13 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 
 import { Box, styled } from "@mui/material";
-import { DRAWER_WIDTH, DRAWER_WIDTH_EXTENDED } from "../../../theme";
+import { DRAWER_WIDTH, DRAWER_WIDTH_EXTENDED } from "../../App/theme";
 
 export const Root = styled(Box)({
   display: "flex",
   width: "100vw",
   height: "100vh",
   overflow: "hidden",
-  background:
-    "radial-gradient(ellipse at top right, #190520 0%, #190520 30%, #222333 100%)",
 });
 
 export const TootlbarContent = styled(Box, {
@@ -50,7 +48,6 @@ export const LogoContainer = styled(Box)({
 });
 
 export const NavExternalLink = styled("a")({
-  color: "white",
   width: "100%",
   height: "100%",
   display: "flex",
@@ -97,7 +94,6 @@ export const NavInternalLink = styled(NavLink)({
 });
 
 export const NavListItemText = styled(ListItemText)(({ theme }) => ({
-  color: theme.palette.grey[400],
   "& span, & svg": {
     fontSize: "0.8em",
   },
diff --git a/webapp/src/hooks/useMuiTheme/index.ts b/webapp/src/hooks/useMuiTheme/index.ts
new file mode 100644
index 0000000000..9026945a96
--- /dev/null
+++ b/webapp/src/hooks/useMuiTheme/index.ts
@@ -0,0 +1,25 @@
+import { PaletteMode, createTheme, useMediaQuery } from "@mui/material";
+import { useMemo, useState } from "react";
+import { deepmerge } from "@mui/utils";
+import { baseTheme, darkPalette, lightPalette } from "./theme";
+
+function useMuiTheme() {
+  const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
+  const [themeMode, setThemeMode] = useState<PaletteMode>(
+    prefersDarkMode ? "dark" : "light",
+  );
+  const theme = useMemo(() => {
+    return createTheme(
+      deepmerge(baseTheme, {
+        palette: {
+          ...(themeMode === "light" ? lightPalette : darkPalette),
+          mode: themeMode,
+        },
+      }),
+    );
+  }, [themeMode]);
+
+  return { theme, setThemeMode };
+}
+
+export default useMuiTheme;
diff --git a/webapp/src/hooks/useMuiTheme/theme.ts b/webapp/src/hooks/useMuiTheme/theme.ts
new file mode 100644
index 0000000000..092c26f9a3
--- /dev/null
+++ b/webapp/src/hooks/useMuiTheme/theme.ts
@@ -0,0 +1,106 @@
+import { PaletteOptions, ThemeOptions } from "@mui/material";
+import {
+  amber,
+  blue,
+  blueGrey,
+  cyan,
+  deepOrange,
+  deepPurple,
+  green,
+  grey,
+  indigo,
+  lightBlue,
+  orange,
+  purple,
+  red,
+  yellow,
+} from "@mui/material/colors";
+
+const SECONDARY_MAIN_COLOR = "#00B2FF";
+
+export const baseTheme: ThemeOptions = {
+  components: {
+    MuiCssBaseline: {
+      styleOverrides: {
+        "&::-webkit-scrollbar": {
+          width: "7px",
+          height: "7px",
+        },
+        "&::-webkit-scrollbar-track": {
+          boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
+        },
+        "&::-webkit-scrollbar-thumb": {
+          backgroundColor: SECONDARY_MAIN_COLOR,
+        },
+      },
+    },
+    MuiAutocomplete: {
+      defaultProps: {
+        size: "small",
+      },
+    },
+    MuiButton: {
+      defaultProps: {
+        size: "small",
+      },
+    },
+    MuiInputBase: {
+      defaultProps: {
+        size: "small",
+      },
+    },
+    MuiSvgIcon: {
+      defaultProps: {
+        fontSize: "small",
+      },
+    },
+    MuiCheckbox: {
+      defaultProps: {
+        size: "small",
+      },
+    },
+  },
+};
+
+export const lightPalette: PaletteOptions = {
+  // palette values for light mode
+  primary: amber,
+  divider: amber[200],
+  text: {
+    primary: grey[900],
+    secondary: grey[800],
+  },
+};
+
+const themeColors = {
+  background: grey[900], // Dark background
+  paper: grey[800], // Lighter background for elements such as cards
+  primary: blue[700], // Buttons and other primary elements
+  secondary: purple[500], // Secondary elements
+  error: red[700], // Errors and warnings
+  warning: orange[800], // Warnings and alerts
+  info: cyan[600], // Informational messages
+  success: green[600], // Success states
+  textPrimary: grey[300], // Primary text
+  textSecondary: grey[500], // Secondary text
+  icon: yellow[600], // Icons and stars
+  divider: grey[700], // Dividers and borders
+};
+
+export const darkPalette: PaletteOptions = {
+  primary: "",
+  //secondary?: PaletteColorOptions;
+  //error?: PaletteColorOptions;
+  //warning?: PaletteColorOptions;
+  //info?: PaletteColorOptions;
+  //success?: PaletteColorOptions;
+  //mode?: PaletteMode;
+  //tonalOffset?: PaletteTonalOffset;
+  //contrastThreshold?: number;
+  //common?: Partial<CommonColors>;
+  //grey?: ColorPartial;
+  //text?: Partial<TypeText>;
+  //divider?: string;
+  //action?: Partial<TypeAction>;
+  //background?: Partial<TypeBackground>;
+};
diff --git a/webapp/src/theme.ts b/webapp/src/theme.ts
deleted file mode 100644
index 8840efceb8..0000000000
--- a/webapp/src/theme.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-import * as React from "react";
-import { createTheme } from "@mui/material/styles";
-
-export const DRAWER_WIDTH = 60;
-export const DRAWER_WIDTH_EXTENDED = 240;
-export const STUDIES_HEIGHT_HEADER = 100;
-export const STUDIES_SIDE_NAV_WIDTH = 300;
-export const STUDIES_LIST_HEADER_HEIGHT = 100;
-export const STUDIES_FILTER_WIDTH = 300;
-
-export const SECONDARY_MAIN_COLOR = "#00B2FF";
-export const PAPER_BACKGROUND_NO_TRANSPARENCY = "#212c38";
-
-export const scrollbarStyle = {
-  "&::-webkit-scrollbar": {
-    width: "7px",
-    height: "7px",
-  },
-  "&::-webkit-scrollbar-track": {
-    boxShadow: "inset 0 0 6px rgba(0, 0, 0, 0.3)",
-  },
-  "&::-webkit-scrollbar-thumb": {
-    backgroundColor: SECONDARY_MAIN_COLOR,
-  },
-};
-
-declare module "@mui/material/styles" {
-  interface PaletteColor {
-    contrast?: string;
-    containedHoverBackground?: string;
-    outlinedHoverBackground?: string;
-    outlinedRestingBackground?: string;
-  }
-  interface SimplePaletteColorOptions {
-    contrast?: string;
-    containedHoverBackground?: string;
-    outlinedHoverBackground?: string;
-    outlinedRestingBackground?: string;
-  }
-
-  interface PaletteOptions {
-    outlineBorder: React.CSSProperties["color"];
-    standardFieldLine: React.CSSProperties["color"];
-    backdrop: React.CSSProperties["color"];
-    activeRating: React.CSSProperties["color"];
-    snackbar: React.CSSProperties["color"];
-  }
-}
-
-const theme = createTheme({
-  components: {
-    MuiCssBaseline: {
-      styleOverrides: {
-        div: {
-          ...scrollbarStyle,
-        },
-        ul: {
-          ...scrollbarStyle,
-        },
-        pre: {
-          ...scrollbarStyle,
-        },
-      },
-    },
-    MuiPaper: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "#222333",
-        },
-      },
-    },
-    MuiAlert: {
-      styleOverrides: {
-        root: {
-          backgroundColor: "#222333",
-          color: "#FFFFFF",
-        },
-      },
-    },
-    MuiPopover: {
-      styleOverrides: {
-        paper: {
-          ...scrollbarStyle,
-        },
-      },
-    },
-    MuiButton: {
-      variants: [
-        {
-          props: { variant: "contained", color: "success" },
-          style: {
-            color: "#FFFFFF",
-          },
-        },
-        {
-          props: { variant: "contained", color: "error" },
-          style: {
-            color: "#FFFFFF",
-          },
-        },
-      ],
-    },
-    MuiTextField: {
-      variants: [
-        {
-          props: { variant: "outlined" },
-          style: {
-            margin: "8px",
-            "& .MuiOutlinedInput-root:not(.MuiInputBase-multiline):not(.MuiAutocomplete-inputRoot) .MuiInputAdornment-sizeMedium + .MuiOutlinedInput-input":
-              {
-                // Default value: 'padding: 16.5px 14px'
-                // Don't use 'padding' to support adornments left and right
-                paddingTop: "13.5px",
-                paddingBottom: "13.5px",
-              },
-          },
-        },
-        {
-          props: { variant: "filled" },
-          style: {
-            ".MuiFilledInput-root": {
-              background: "rgba(255, 255, 255, 0.09)",
-              borderBottom: "1px solid rgba(255, 255, 255, 0.42)",
-            },
-            borderRadius: "4px 4px 0px 0px",
-            minHeight: 0,
-          },
-        },
-      ],
-    },
-    MuiSelect: {
-      variants: [
-        {
-          props: { variant: "filled" },
-          style: {
-            background: "rgba(255, 255, 255, 0.09)",
-            borderRadius: "4px 4px 0px 0px",
-            borderBottom: "1px solid rgba(255, 255, 255, 0.42)",
-            ".MuiSelect-icon": {
-              backgroundColor: "#222333",
-            },
-          },
-        },
-      ],
-    },
-    MuiFormControl: {
-      variants: [
-        {
-          props: { variant: "outlined" },
-          style: {
-            "> div > fieldset": {
-              borderColor: "rgba(255,255,255,0.09)",
-            },
-          },
-        },
-      ],
-    },
-  },
-  typography: {
-    fontFamily: "'Inter', sans-serif",
-  },
-  palette: {
-    background: {
-      default: "#222333",
-    },
-    primary: {
-      dark: "#C9940B",
-      main: "#FFB800",
-      light: "#FFDB7D",
-      contrast: "rgba(0, 0, 0, 0.87)",
-      containedHoverBackground:
-        "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #FFB800",
-      outlinedHoverBackground: "rgba(255, 184, 0, 0.08)",
-      outlinedRestingBackground: "rgba(255, 184, 0, 0.05)",
-    },
-    secondary: {
-      dark: "#0092D0",
-      main: SECONDARY_MAIN_COLOR,
-      light: "#77CFF5",
-      contrast: "rgba(30, 30, 30, 0.87)",
-      containedHoverBackground: `linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), ${SECONDARY_MAIN_COLOR}`,
-      outlinedHoverBackground: "rgba(0, 178, 255, 0.08)",
-      outlinedRestingBackground: "rgba(0, 178, 255, 0.5)",
-    },
-    success: {
-      dark: "#388E3C",
-      main: "#66BB6A",
-      light: "#81C784",
-      contrast: "#FFFFFF",
-      containedHoverBackground:
-        "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #66BB6A",
-      outlinedHoverBackground: "rgba(102, 187, 106, 0.5)",
-      outlinedRestingBackground: "rgba(102, 187, 106, 0.08)",
-    },
-    warning: {
-      dark: "#F57C00",
-      main: "#FF9800",
-      light: "#FFB74D",
-      contrast: "#FFFFFF",
-      containedHoverBackground:
-        "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #FF9800",
-      outlinedHoverBackground: "rgba(255, 152, 0, 0.08)",
-      outlinedRestingBackground: "rgba(255, 152, 0, 0.05)",
-    },
-    error: {
-      dark: "#D32F2F",
-      main: "#F44336",
-      light: "#E57373",
-      contrast: "#FFFFFF",
-      containedHoverBackground:
-        "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #F44336",
-      outlinedHoverBackground: "rgba(244, 67, 54, 0.08)",
-      outlinedRestingBackground: "rgba(244, 67, 54, 0.05)",
-    },
-    info: {
-      dark: "#1976D2",
-      main: "#2196F3",
-      light: "#64B5F6",
-      contrast: "#FFFFFF",
-      containedHoverBackground:
-        "linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), #2196F3",
-      outlinedHoverBackground: "rgba(33, 150, 243, 0.08)",
-      outlinedRestingBackground: "rgba(33, 150, 243, 0.05)",
-    },
-    text: {
-      primary: "#FFFFFF",
-      secondary: "rgba(255, 255, 255, 0.7)",
-      disabled: "rgba(255, 255, 255, 0.5)",
-    },
-    action: {
-      active: "rgba(255, 255, 255, 0.56)",
-      hover: "rgba(255, 255, 255, 0.32)",
-      selected: "rgba(255, 255, 255, 0.16)",
-      disabled: "rgba(255, 255, 255, 0.3)",
-      disabledBackground: "rgba(255, 255, 255, 0.12)",
-      focus: "rgba(255, 255, 255, 0.12)",
-    },
-    divider: "rgba(255, 255, 255, 0.12)",
-    outlineBorder: "#222333",
-    standardFieldLine: "#222333",
-    backdrop: "rgba(0, 0, 0, 0.5)",
-    activeRating: "#FFB400",
-    snackbar: "#FFFFFF",
-  },
-});
-
-export default theme;