diff --git a/webapp/public/locales/en/main.json b/webapp/public/locales/en/main.json
index f7651f99b1..e966640063 100644
--- a/webapp/public/locales/en/main.json
+++ b/webapp/public/locales/en/main.json
@@ -479,7 +479,6 @@
   "study.modelization.bindingConst.question.deleteConstraintTerm": "Are you sure you want to delete this constraint term?",
   "study.modelization.bindingConst.question.deleteBindingConstraint": "Are you sure you want to delete this binding constraint?",
   "study.results.mc": "Monte-Carlo",
-  "study.results.mc.year": "Year",
   "study.results.display": "Display",
   "study.results.temporality": "Temporality",
   "study.results.noData": "No data available",
diff --git a/webapp/public/locales/fr/main.json b/webapp/public/locales/fr/main.json
index d60556d964..9be8545238 100644
--- a/webapp/public/locales/fr/main.json
+++ b/webapp/public/locales/fr/main.json
@@ -110,7 +110,7 @@
   "form.submit.inProgress": "Le formulaire est en cours de soumission. Etes-vous sûr de vouloir quitter la page ?",
   "form.asyncDefaultValues.error": "Impossible d'obtenir les valeurs",
   "form.field.required": "Champ requis",
-  "form.field.duplicate": "Cette valeur existe déjà: {{0}}", 
+  "form.field.duplicate": "Cette valeur existe déjà: {{0}}",
   "form.field.minLength": "{{0}} caractère(s) minimum",
   "form.field.minValue": "La valeur minimum est {{0}}",
   "form.field.maxValue": "La valeur maximum est {{0}}",
@@ -479,7 +479,6 @@
   "study.modelization.bindingConst.question.deleteConstraintTerm": "Êtes-vous sûr de vouloir supprimer ce terme ?",
   "study.modelization.bindingConst.question.deleteBindingConstraint": "Êtes-vous sûr de vouloir supprimer cette contrainte couplante ?",
   "study.results.mc": "Monte-Carlo",
-  "study.results.mc.year": "année",
   "study.results.display": "Affichage",
   "study.results.temporality": "Temporalité",
   "study.results.noData": "Aucune donnée disponible",
diff --git a/webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/SelectionDrawer.tsx b/webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/SelectionDrawer.tsx
deleted file mode 100644
index da3aef3229..0000000000
--- a/webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/SelectionDrawer.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { Box, Button, Drawer, RadioGroup } from "@mui/material";
-import { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import BooleanFE from "../../../../../common/fieldEditors/BooleanFE";
-import NumberFE from "../../../../../common/fieldEditors/NumberFE";
-import RadioFE from "../../../../../common/fieldEditors/RadioFE";
-import Fieldset from "../../../../../common/Fieldset";
-import { DataType, MAX_YEAR, Timestep } from "./utils";
-
-export interface SelectionDrawerProps {
-  open: boolean;
-  onClose: () => void;
-  values: {
-    dataType: DataType;
-    timestep: Timestep;
-    year: number;
-  };
-  maxYear?: number;
-  onSelection: (values: SelectionDrawerProps["values"]) => void;
-}
-
-function SelectionDrawer(props: SelectionDrawerProps) {
-  const { open, onClose, values, maxYear = MAX_YEAR, onSelection } = props;
-  const [dataTypeTmp, setDataTypeTmp] = useState(values.dataType);
-  const [timestepTmp, setTimestepTemp] = useState(values.timestep);
-  const [yearTmp, setYearTmp] = useState(values.year);
-  const { t } = useTranslation();
-
-  useEffect(() => {
-    setDataTypeTmp(values.dataType);
-    setTimestepTemp(values.timestep);
-    setYearTmp(values.year);
-  }, [values.dataType, values.timestep, values.year]);
-
-  ////////////////////////////////////////////////////////////////
-  // Event Handlers
-  ////////////////////////////////////////////////////////////////
-
-  const handleSelection = () => {
-    onSelection({
-      dataType: dataTypeTmp,
-      timestep: timestepTmp,
-      year: yearTmp,
-    });
-    onClose();
-  };
-
-  const handleClose = () => {
-    setDataTypeTmp(values.dataType);
-    setTimestepTemp(values.timestep);
-    setYearTmp(values.year);
-    onClose();
-  };
-
-  ////////////////////////////////////////////////////////////////
-  // JSX
-  ////////////////////////////////////////////////////////////////
-
-  return (
-    <Drawer
-      open={open}
-      onClose={handleClose}
-      anchor="right"
-      PaperProps={{ sx: { display: "flex" } }}
-    >
-      <Box sx={{ flex: 1, p: 3, overflow: "auto" }}>
-        <Fieldset
-          legend={t("study.results.mc")}
-          contentProps={{ sx: { flexDirection: "column" } }}
-        >
-          <BooleanFE
-            value={yearTmp <= 0}
-            trueText="Synthesis"
-            falseText="Year by year"
-            onChange={(event) => {
-              setYearTmp(event?.target.value ? -1 : 1);
-            }}
-          />
-          {yearTmp > 0 && (
-            <NumberFE
-              sx={{ m: 0 }}
-              label="Year"
-              value={yearTmp}
-              onChange={(event) => {
-                const value = Number(event.target.value);
-                setYearTmp(value > maxYear ? maxYear : value);
-              }}
-            />
-          )}
-        </Fieldset>
-        <Fieldset legend={t("study.results.display")}>
-          <RadioGroup
-            value={dataTypeTmp}
-            onChange={(_, value) => setDataTypeTmp(value as DataType)}
-          >
-            <RadioFE value={DataType.General} label="General values" />
-            <RadioFE value={DataType.Thermal} label="Thermal plants" />
-            <RadioFE value={DataType.Renewable} label="Ren. clusters" />
-            <RadioFE value={DataType.Record} label="RecordYears" />
-          </RadioGroup>
-        </Fieldset>
-        <Fieldset legend={t("study.results.temporality")}>
-          <RadioGroup
-            value={timestepTmp}
-            onChange={(_, value) => setTimestepTemp(value as Timestep)}
-          >
-            <RadioFE value={Timestep.Hourly} label="Hourly" />
-            <RadioFE value={Timestep.Daily} label="Daily" />
-            <RadioFE value={Timestep.Weekly} label="Weekly" />
-            <RadioFE value={Timestep.Monthly} label="Monthly" />
-            <RadioFE value={Timestep.Annual} label="Annual" />
-          </RadioGroup>
-        </Fieldset>
-      </Box>
-      <Box sx={{ display: "flex", justifyContent: "flex-end", gap: 2, p: 2 }}>
-        <Button variant="contained" onClick={handleSelection}>
-          {t("global.apply")}
-        </Button>
-      </Box>
-    </Drawer>
-  );
-}
-
-export default SelectionDrawer;
diff --git a/webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx b/webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx
index abc29e9b4b..00f9cc90f7 100644
--- a/webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx
@@ -31,14 +31,22 @@ import EditableMatrix from "../../../../../common/EditableMatrix";
 import PropertiesView from "../../../../../common/PropertiesView";
 import SplitLayoutView from "../../../../../common/SplitLayoutView";
 import ListElement from "../../common/ListElement";
-import SelectionDrawer, { SelectionDrawerProps } from "./SelectionDrawer";
-import { createPath, DataType, OutputItemType, Timestep } from "./utils";
+import {
+  createPath,
+  DataType,
+  MAX_YEAR,
+  OutputItemType,
+  Timestep,
+} from "./utils";
 import UsePromiseCond, {
   mergeResponses,
 } from "../../../../../common/utils/UsePromiseCond";
 import useStudySynthesis from "../../../../../../redux/hooks/useStudySynthesis";
 import { downloadMatrix } from "../../../../../../utils/matrixUtils";
 import ButtonBack from "../../../../../common/ButtonBack";
+import BooleanFE from "../../../../../common/fieldEditors/BooleanFE";
+import SelectFE from "../../../../../common/fieldEditors/SelectFE";
+import NumberFE from "../../../../../common/fieldEditors/NumberFE";
 
 function ResultDetails() {
   const { study } = useOutletContext<{ study: StudyMetadata }>();
@@ -53,7 +61,6 @@ function ResultDetails() {
   const [dataType, setDataType] = useState(DataType.General);
   const [timestep, setTimeStep] = useState(Timestep.Hourly);
   const [year, setYear] = useState(-1);
-  const [showFilter, setShowFilter] = useState(false);
   const [itemType, setItemType] = useState(OutputItemType.Areas);
   const [selectedItemId, setSelectedItemId] = useState("");
   const [searchValue, setSearchValue] = useState("");
@@ -76,6 +83,8 @@ function ResultDetails() {
     (item) => item.id === selectedItemId
   ) as (Area & { id: string }) | LinkElement | undefined;
 
+  const maxYear = output?.nbyears ?? MAX_YEAR;
+
   useEffect(
     () => {
       const isValidSelectedItem =
@@ -94,7 +103,7 @@ function ResultDetails() {
     async () => {
       if (output && selectedItem) {
         const path = createPath({
-          output: { ...output, id: outputId as string },
+          output,
           item: selectedItem,
           dataType,
           timestep,
@@ -116,7 +125,7 @@ function ResultDetails() {
     {
       resetDataOnReload: true,
       resetErrorOnReload: true,
-      deps: [study.id, output, selectedItem],
+      deps: [study.id, output, selectedItem, dataType, timestep, year],
     }
   );
 
@@ -131,16 +140,6 @@ function ResultDetails() {
     setItemType(value);
   };
 
-  const handleSelection: SelectionDrawerProps["onSelection"] = ({
-    dataType,
-    timestep,
-    year,
-  }) => {
-    setDataType(dataType);
-    setTimeStep(timestep);
-    setYear(year);
-  };
-
   const handleDownload = (matrixData: MatrixType, fileName: string): void => {
     downloadMatrix(matrixData, fileName);
   };
@@ -150,152 +149,211 @@ function ResultDetails() {
   ////////////////////////////////////////////////////////////////
 
   return (
-    <>
-      <SplitLayoutView
-        left={
-          <PropertiesView
-            topContent={
-              <Box
-                sx={{
-                  width: 1,
-                  px: 1,
-                }}
+    <SplitLayoutView
+      left={
+        <PropertiesView
+          topContent={
+            <Box
+              sx={{
+                width: 1,
+                px: 1,
+              }}
+            >
+              <ButtonBack onClick={() => navigate("..")} />
+            </Box>
+          }
+          mainContent={
+            <>
+              <ToggleButtonGroup
+                sx={{ p: 1 }}
+                value={itemType}
+                exclusive
+                size="small"
+                fullWidth
+                onChange={handleItemTypeChange}
               >
-                <ButtonBack onClick={() => navigate("..")} />
-              </Box>
-            }
-            mainContent={
-              <>
-                <ToggleButtonGroup
-                  sx={{ p: 1 }}
-                  value={itemType}
-                  exclusive
-                  size="small"
-                  fullWidth
-                  onChange={handleItemTypeChange}
-                >
-                  <ToggleButton value={OutputItemType.Areas}>
-                    {t("study.areas")}
-                  </ToggleButton>
-                  <ToggleButton value={OutputItemType.Links}>
-                    {t("study.links")}
-                  </ToggleButton>
-                </ToggleButtonGroup>
-                <ListElement
-                  list={filteredItems}
-                  currentElement={selectedItemId}
-                  currentElementKeyToTest="id"
-                  setSelectedItem={(item) => setSelectedItemId(item.id)}
-                />
-              </>
-            }
-            onSearchFilterChange={setSearchValue}
-          />
-        }
-        right={
+                <ToggleButton value={OutputItemType.Areas}>
+                  {t("study.areas")}
+                </ToggleButton>
+                <ToggleButton value={OutputItemType.Links}>
+                  {t("study.links")}
+                </ToggleButton>
+              </ToggleButtonGroup>
+              <ListElement
+                list={filteredItems}
+                currentElement={selectedItemId}
+                currentElementKeyToTest="id"
+                setSelectedItem={(item) => setSelectedItemId(item.id)}
+              />
+            </>
+          }
+          onSearchFilterChange={setSearchValue}
+        />
+      }
+      right={
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            height: 1,
+            width: 1,
+            gap: 1,
+          }}
+        >
           <Box
             sx={{
               display: "flex",
-              flexDirection: "column",
-              height: 1,
-              width: 1,
-              gap: 1,
+              alignItems: "center",
+              justifyContent: "flex-end",
+              gap: 2,
+              flexWrap: "wrap",
             }}
           >
-            <Box
-              sx={{
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "flex-end",
-                gap: 4,
-              }}
-            >
-              {[
+            {(
+              [
                 [
                   `${t("study.results.mc")}:`,
-                  year > 0 ? `${t("study.results.mc.year")} ${year}` : "all",
+                  // year > 0 ? `${t("study.results.mc.year")} ${year}` : "all",
+                  () => (
+                    <>
+                      <BooleanFE
+                        value={year <= 0}
+                        trueText="Synthesis"
+                        falseText="Year by year"
+                        size="small"
+                        variant="outlined"
+                        onChange={(event) => {
+                          setYear(event?.target.value ? -1 : 1);
+                        }}
+                      />
+                      {year > 0 && (
+                        <NumberFE
+                          size="small"
+                          variant="outlined"
+                          value={year}
+                          sx={{ m: 0, ml: 1, width: 80 }}
+                          inputProps={{
+                            min: 1,
+                            max: maxYear,
+                          }}
+                          onChange={(event) => {
+                            setYear(Number(event.target.value));
+                          }}
+                        />
+                      )}
+                    </>
+                  ),
                 ],
-                [`${t("study.results.display")}:`, dataType],
-                [`${t("study.results.temporality")}:`, timestep],
-              ].map(([label, value]) => (
-                <Box key={label}>
-                  <Box component="span" sx={{ opacity: 0.7, mr: 1 }}>
-                    {label}
-                  </Box>
-                  {value}
-                </Box>
-              ))}
-              <Button
-                variant="outlined"
-                onClick={() => setShowFilter(true)}
-                disabled={matrixRes.isLoading}
-              >
-                {t("global.change")}
-              </Button>
-
-              <Button
-                variant="outlined"
-                color="primary"
-                startIcon={<DownloadOutlinedIcon />}
-                onClick={() =>
-                  matrixRes.data &&
-                  handleDownload(matrixRes.data, `matrix_${study.id}`)
-                }
-                disabled={matrixRes.isLoading}
-              >
-                {t("global.download")}
-              </Button>
-            </Box>
-            <Box sx={{ flex: 1 }}>
-              <UsePromiseCond
-                response={mergeResponses(outputRes, matrixRes)}
-                ifPending={() => (
-                  <Skeleton sx={{ height: 1, transform: "none" }} />
-                )}
-                ifResolved={([, matrix]) =>
-                  matrix && (
-                    <EditableMatrix
-                      matrix={matrix}
-                      matrixTime={false}
-                      readOnly
-                      toggleView
+                [
+                  `${t("study.results.display")}:`,
+                  () => (
+                    <SelectFE
+                      value={dataType}
+                      options={[
+                        { value: DataType.General, label: "General values" },
+                        { value: DataType.Thermal, label: "Thermal plants" },
+                        { value: DataType.Renewable, label: "Ren. clusters" },
+                        { value: DataType.Record, label: "RecordYears" },
+                      ]}
+                      size="small"
+                      variant="outlined"
+                      onChange={(event) => {
+                        setDataType(event?.target.value as DataType);
+                      }}
                     />
-                  )
-                }
-                ifRejected={(err) => (
-                  <Box
-                    sx={{
-                      height: 1,
-                      display: "flex",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      flexDirection: "column",
-                      gap: 1,
-                    }}
-                  >
-                    {axios.isAxiosError(err) && err.response?.status === 404 ? (
-                      <>
-                        <GridOffIcon sx={{ fontSize: "80px" }} />
-                        {t("study.results.noData")}
-                      </>
-                    ) : (
-                      t("data.error.matrix")
-                    )}
-                  </Box>
-                )}
-              />
-            </Box>
+                  ),
+                ],
+                [
+                  `${t("study.results.temporality")}:`,
+                  () => (
+                    <SelectFE
+                      value={timestep}
+                      options={[
+                        { value: Timestep.Hourly, label: "Hourly" },
+                        { value: Timestep.Daily, label: "Daily" },
+                        { value: Timestep.Weekly, label: "Weekly" },
+                        { value: Timestep.Monthly, label: "Monthly" },
+                        { value: Timestep.Annual, label: "Annual" },
+                      ]}
+                      size="small"
+                      variant="outlined"
+                      onChange={(event) => {
+                        setTimeStep(event?.target.value as Timestep);
+                      }}
+                    />
+                  ),
+                ],
+              ] as const
+            ).map(([label, Field]) => (
+              <Box
+                key={label}
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                }}
+              >
+                <Box component="span" sx={{ opacity: 0.7, mr: 1 }}>
+                  {label}
+                </Box>
+                <Field />
+              </Box>
+            ))}
+            <Button
+              size="small"
+              title={t("global.download")}
+              variant="outlined"
+              color="primary"
+              onClick={() =>
+                matrixRes.data &&
+                handleDownload(matrixRes.data, `matrix_${study.id}`)
+              }
+              disabled={matrixRes.isLoading}
+            >
+              <DownloadOutlinedIcon />
+            </Button>
           </Box>
-        }
-      />
-      <SelectionDrawer
-        open={showFilter}
-        onClose={() => setShowFilter(false)}
-        values={{ dataType, timestep, year }}
-        maxYear={output?.nbyears}
-        onSelection={handleSelection}
-      />
-    </>
+          <Box sx={{ flex: 1 }}>
+            <UsePromiseCond
+              response={mergeResponses(outputRes, matrixRes)}
+              ifPending={() => (
+                <Skeleton sx={{ height: 1, transform: "none" }} />
+              )}
+              ifResolved={([, matrix]) =>
+                matrix && (
+                  <EditableMatrix
+                    matrix={matrix}
+                    matrixTime={false}
+                    readOnly
+                    toggleView
+                  />
+                )
+              }
+              ifRejected={(err) => (
+                <Box
+                  sx={{
+                    height: 1,
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    flexDirection: "column",
+                    gap: 1,
+                  }}
+                >
+                  {axios.isAxiosError(err) && err.response?.status === 404 ? (
+                    <>
+                      <GridOffIcon sx={{ fontSize: "80px" }} />
+                      {t("study.results.noData")}
+                    </>
+                  ) : (
+                    t("data.error.matrix")
+                  )}
+                </Box>
+              )}
+            />
+          </Box>
+        </Box>
+      }
+    />
   );
 }