diff --git a/webapp/public/locales/en/main.json b/webapp/public/locales/en/main.json
index 8f6154f733..144538d16c 100644
--- a/webapp/public/locales/en/main.json
+++ b/webapp/public/locales/en/main.json
@@ -504,6 +504,8 @@
   "study.modelization.clusters.matrix.common": "Common",
   "study.modelization.clusters.matrix.tsGen": "TS generator",
   "study.modelization.clusters.matrix.timeSeries": "Time-Series",
+  "study.modelization.clusters.matrix.fuelCost": "Fuel Cost",
+  "study.modelization.clusters.matrix.co2Cost": "CO2 Cost",
   "study.modelization.clusters.backClusterList": "Back to cluster list",
   "study.modelization.clusters.tsInterpretation": "TS interpretation",
   "studies.modelization.clusters.question.delete_one": "Are you sure you want to delete this cluster?",
diff --git a/webapp/public/locales/fr/main.json b/webapp/public/locales/fr/main.json
index 4db50746c7..7210751d43 100644
--- a/webapp/public/locales/fr/main.json
+++ b/webapp/public/locales/fr/main.json
@@ -504,6 +504,8 @@
   "study.modelization.clusters.matrix.common": "Common",
   "study.modelization.clusters.matrix.tsGen": "TS generator",
   "study.modelization.clusters.matrix.timeSeries": "Séries temporelles",
+  "study.modelization.clusters.matrix.fuelCost": "Fuel Cost",
+  "study.modelization.clusters.matrix.co2Cost": "CO2 Cost",
   "study.modelization.clusters.backClusterList": "Retour à la liste des clusters",
   "study.modelization.clusters.tsInterpretation": "TS interpretation",
   "studies.modelization.clusters.question.delete_one": "Êtes-vous sûr de vouloir supprimer ce cluster ?",
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/Matrix.tsx b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/Matrix.tsx
index 93f8a08e7d..4e4652f8a4 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/Matrix.tsx
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/Matrix.tsx
@@ -1,5 +1,4 @@
-import * as React from "react";
-import * as R from "ramda";
+import { useState } from "react";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Box from "@mui/material/Box";
@@ -10,6 +9,7 @@ import {
   StudyMetadata,
 } from "../../../../../../../common/types";
 import MatrixInput from "../../../../../../common/MatrixInput";
+import { COMMON_MATRIX_COLS, TS_GEN_MATRIX_COLS } from "./utils";
 
 interface Props {
   study: StudyMetadata;
@@ -19,93 +19,87 @@ interface Props {
 
 function Matrix({ study, areaId, clusterId }: Props) {
   const [t] = useTranslation();
-  const [value, setValue] = React.useState(0);
+  const [value, setValue] = useState(0);
 
-  const commonNames = [
-    // TODO COMMON_MATIX_COLS
-    "Marginal cost modulation",
-    "Market bid modulation",
-    "Capacity modulation",
-    "Min gen modulation",
-  ];
-
-  const tsGenNames = [
-    // TODO TS_GEN_MATRIX_COLS
-    "FO Duration",
-    "PO Duration",
-    "FO Rate",
-    "PO Rate",
-    "NPO Min",
-    "NPO Max",
-  ];
+  ////////////////////////////////////////////////////////////////
+  // Event Handlers
+  ////////////////////////////////////////////////////////////////
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
     setValue(newValue);
   };
 
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
   return (
     <Box
-      width="100%"
-      height="100%"
-      display="flex"
-      flexDirection="column"
-      justifyContent="flex-start"
-      alignItems="center"
+      sx={{
+        display: "flex",
+        width: 1,
+        height: 1,
+        flexDirection: "column",
+        justifyContent: "flex-start",
+        alignItems: "center",
+      }}
     >
-      <Tabs
-        sx={{ width: 1 }}
-        value={value}
-        onChange={handleChange}
-        aria-label="basic tabs example"
-      >
+      <Tabs sx={{ width: 1 }} value={value} onChange={handleChange}>
         <Tab label={t("study.modelization.clusters.matrix.common")} />
         <Tab label={t("study.modelization.clusters.matrix.tsGen")} />
         <Tab label={t("study.modelization.clusters.matrix.timeSeries")} />
+        <Tab label={t("study.modelization.clusters.matrix.fuelCost")} />
+        <Tab label={t("study.modelization.clusters.matrix.co2Cost")} />
       </Tabs>
       <Box
         sx={{
           display: "flex",
-          width: "100%",
-          height: "100%",
+          width: 1,
+          height: 1,
         }}
       >
-        {R.cond([
-          [
-            () => value === 0,
-            () => (
-              <MatrixInput
-                study={study}
-                url={`input/thermal/prepro/${areaId}/${clusterId}/modulation`}
-                computStats={MatrixStats.NOCOL}
-                title={t("study.modelization.clusters.matrix.common")}
-                columnsNames={commonNames}
-              />
-            ),
-          ],
-          [
-            () => value === 1,
-            () => (
-              <MatrixInput
-                study={study}
-                url={`input/thermal/prepro/${areaId}/${clusterId}/data`}
-                computStats={MatrixStats.NOCOL}
-                title={t("study.modelization.clusters.matrix.tsGen")}
-                columnsNames={tsGenNames}
-              />
-            ),
-          ],
-          [
-            R.T,
-            () => (
-              <MatrixInput
-                study={study}
-                url={`input/thermal/series/${areaId}/${clusterId}/series`}
-                computStats={MatrixStats.NOCOL}
-                title={t("study.modelization.clusters.matrix.timeSeries")}
-              />
-            ),
-          ],
-        ])()}
+        {value === 0 && (
+          <MatrixInput
+            study={study}
+            url={`input/thermal/prepro/${areaId}/${clusterId}/modulation`}
+            computStats={MatrixStats.NOCOL}
+            title={t("study.modelization.clusters.matrix.common")}
+            columnsNames={COMMON_MATRIX_COLS}
+          />
+        )}
+        {value === 1 && (
+          <MatrixInput
+            study={study}
+            url={`input/thermal/prepro/${areaId}/${clusterId}/data`}
+            computStats={MatrixStats.NOCOL}
+            title={t("study.modelization.clusters.matrix.tsGen")}
+            columnsNames={TS_GEN_MATRIX_COLS}
+          />
+        )}
+        {value === 2 && (
+          <MatrixInput
+            study={study}
+            url={`input/thermal/series/${areaId}/${clusterId}/series`}
+            computStats={MatrixStats.NOCOL}
+            title={t("study.modelization.clusters.matrix.timeSeries")}
+          />
+        )}
+        {value === 3 && (
+          <MatrixInput
+            study={study}
+            url={`input/thermal/series/${areaId}/${clusterId}/fuelCost`}
+            computStats={MatrixStats.NOCOL}
+            title={t("study.modelization.clusters.matrix.fuelCost")}
+          />
+        )}
+        {value === 4 && (
+          <MatrixInput
+            study={study}
+            url={`input/thermal/series/${areaId}/${clusterId}/CO2Cost`}
+            computStats={MatrixStats.NOCOL}
+            title={t("study.modelization.clusters.matrix.co2Cost")}
+          />
+        )}
       </Box>
     </Box>
   );
diff --git a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/utils.ts b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/utils.ts
index f6da40a698..b5b0526ded 100644
--- a/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/utils.ts
+++ b/webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Thermal/utils.ts
@@ -11,6 +11,22 @@ import type { ClusterWithCapacity } from "../common/clustersUtils";
 // Constants
 ////////////////////////////////////////////////////////////////
 
+export const COMMON_MATRIX_COLS = [
+  "Marginal cost modulation",
+  "Market bid modulation",
+  "Capacity modulation",
+  "Min gen modulation",
+] as const;
+
+export const TS_GEN_MATRIX_COLS = [
+  "FO Duration",
+  "PO Duration",
+  "FO Rate",
+  "PO Rate",
+  "NPO Min",
+  "NPO Max",
+] as const;
+
 export const THERMAL_GROUPS = [
   "Gas",
   "Hard Coal",
@@ -25,8 +41,8 @@ export const THERMAL_GROUPS = [
 ] as const;
 
 export const THERMAL_POLLUTANTS = [
-  // For study versions >= 860
   "co2",
+  // Since v8.6
   "so2",
   "nh3",
   "nox",
@@ -89,6 +105,7 @@ export interface ThermalCluster extends ThermalPollutants {
   volatilityPlanned: number;
   lawForced: TimeSeriesLawOption;
   lawPlanned: TimeSeriesLawOption;
+  // Since v8.7
   costGeneration: CostGeneration;
   efficiency: number;
   variableOMCost: number;
diff --git a/webapp/src/components/common/EditableMatrix/index.tsx b/webapp/src/components/common/EditableMatrix/index.tsx
index 3e17ed5aaa..7916fa2a1f 100644
--- a/webapp/src/components/common/EditableMatrix/index.tsx
+++ b/webapp/src/components/common/EditableMatrix/index.tsx
@@ -24,7 +24,7 @@ interface PropTypes {
   matrixTime: boolean;
   readOnly: boolean;
   onUpdate?: (change: MatrixEditDTO[], source: string) => void;
-  columnsNames?: string[];
+  columnsNames?: string[] | readonly string[];
   rowNames?: string[];
   computStats?: MatrixStats;
   isPercentDisplayEnabled?: boolean;
diff --git a/webapp/src/components/common/MatrixInput/index.tsx b/webapp/src/components/common/MatrixInput/index.tsx
index fdeb92749f..d5c9a71f2a 100644
--- a/webapp/src/components/common/MatrixInput/index.tsx
+++ b/webapp/src/components/common/MatrixInput/index.tsx
@@ -29,7 +29,7 @@ const logErr = debug("antares:createimportform:error");
 interface Props {
   study: StudyMetadata;
   url: string;
-  columnsNames?: string[];
+  columnsNames?: string[] | readonly string[];
   rowNames?: string[];
   title?: string;
   computStats: MatrixStats;