diff --git a/webapp/public/locales/en/main.json b/webapp/public/locales/en/main.json
index 98dd40ccad..af38707f26 100644
--- a/webapp/public/locales/en/main.json
+++ b/webapp/public/locales/en/main.json
@@ -40,6 +40,7 @@
     "global.upload": "Upload",
     "global.key": "Key",
     "global.value": "Value",
+    "global.number": "Number",
     "global.emptyString": "Empty string",
     "global.edit": "Edit",
     "global.download": "Download",
@@ -218,6 +219,36 @@
     "study.copyJobId": "Copy the job id",
     "study.modelization.map.newArea": "New Area",
     "study.modelization.map.areaName": "Area name",
+    "study.modelization.links.hurdleCost": "Hurdle costs",
+    "study.modelization.links.loopFlows": "Loop flows",
+    "study.modelization.links.pst": "PST",
+    "study.modelization.links.type": "Type",
+    "study.modelization.links.transmissionCapa": "Transmission capacities",
+    "study.modelization.links.transmissionCapa.infinite": "Infinite",
+    "study.modelization.links.transmissionCapa.ignore": "Ignore",
+    "study.modelization.links.transmissionCapa.enabled": "Enabled",
+    "study.modelization.links.type.ac": "AC",
+    "study.modelization.links.type.dc": "DC",
+    "study.modelization.links.type.gaz": "Gas",
+    "study.modelization.links.type.virt": "Virt",
+    "study.modelization.links.type.other": "Other",
+    "study.modelization.links.matrix.parameters": "Parameters",
+    "study.modelization.links.matrix.capacities": "Capacities",
+    "study.modelization.links.matrix.columns.transCapaDirect": "Trans. capacity direct",
+    "study.modelization.links.matrix.columns.transCapaIndirect": "Trans. capacity indirect",
+    "study.modelization.links.matrix.columns.hurdleCostsDirect": "Hurdle costs direct",
+    "study.modelization.links.matrix.columns.hurdleCostsIndirect": "Hurdle costs indirect",
+    "study.modelization.links.matrix.columns.inpedances": "Inpedances",
+    "study.modelization.links.matrix.columns.loopFlow": "Loop flow",
+    "study.modelization.links.matrix.columns.pShiftMin": "P.Shift Min",
+    "study.modelization.links.matrix.columns.pShiftMax": "P.Shift Max",
+    "study.modelization.configuration.general.firstDay": "First day",
+    "study.modelization.configuration.general.lastDay": "Last day",
+    "study.modelization.configuration.general.calendar": "Calendar",
+    "study.modelization.configuration.general.year": "Year",
+    "study.modelization.configuration.general.week": "Week",
+    "study.modelization.configuration.general.firstDayOfYear": "1st January",
+    "study.modelization.configuration.general.leapYear": "Leap year",
     "study.modelization.nodeProperties.nodalOptimization": "Nodal Optimization",
     "study.modelization.nodeProperties.energyCost": "Energy cost",
     "study.modelization.nodeProperties.unsupplied": "Unsupplied",
diff --git a/webapp/public/locales/fr/main.json b/webapp/public/locales/fr/main.json
index 11aa96d70d..0a1ccc0481 100644
--- a/webapp/public/locales/fr/main.json
+++ b/webapp/public/locales/fr/main.json
@@ -40,6 +40,7 @@
     "global.upload": "Charger",
     "global.key": "Clé",
     "global.value": "Valeur",
+    "global.number": "Nombre",
     "global.emptyString": "Chaine de caractères vide",
     "global.edit": "Editer",
     "global.download": "Télécharger",
@@ -218,14 +219,44 @@
     "study.copyJobId": "Copier l'identifiant de la tâche",
     "study.modelization.map.newArea": "Nouvelle zone",
     "study.modelization.map.areaName": "Nom de la zone",
+    "study.modelization.links.hurdleCost": "Hurdle costs",
+    "study.modelization.links.loopFlows": "Loop flows",
+    "study.modelization.links.pst": "PST",
+    "study.modelization.links.type": "Type",
+    "study.modelization.links.transmissionCapa": "Transmission capacities",
+    "study.modelization.links.transmissionCapa.infinite": "Infinite",
+    "study.modelization.links.transmissionCapa.ignore": "Ignore",
+    "study.modelization.links.transmissionCapa.enabled": "Enabled",
+    "study.modelization.links.type.ac": "AC",
+    "study.modelization.links.type.dc": "DC",
+    "study.modelization.links.type.gaz": "Gas",
+    "study.modelization.links.type.virt": "Virt",
+    "study.modelization.links.type.other": "Other",
+    "study.modelization.links.matrix.parameters": "Paramètres",
+    "study.modelization.links.matrix.capacities": "Capacités",
+    "study.modelization.links.matrix.columns.transCapaDirect": "Trans. capacity direct",
+    "study.modelization.links.matrix.columns.transCapaIndirect": "Trans. capacity indirect",
+    "study.modelization.links.matrix.columns.hurdleCostsDirect": "Hurdle costs direct",
+    "study.modelization.links.matrix.columns.hurdleCostsIndirect": "Hurdle costs indirect",
+    "study.modelization.links.matrix.columns.inpedances": "Inpedances",
+    "study.modelization.links.matrix.columns.loopFlow": "Loop flow",
+    "study.modelization.links.matrix.columns.pShiftMin": "P.Shift Min",
+    "study.modelization.links.matrix.columns.pShiftMax": "P.Shift Max",
+    "study.modelization.configuration.general.firstDay": "Premier jour",
+    "study.modelization.configuration.general.lastDay": "Dernier jour",
+    "study.modelization.configuration.general.calendar": "Calendrier",
+    "study.modelization.configuration.general.year": "Année",
+    "study.modelization.configuration.general.week": "Semaine",
+    "study.modelization.configuration.general.firstDayOfYear": "1er Janvier",
+    "study.modelization.configuration.general.leapYear": "Année bissextile",
     "study.modelization.nodeProperties.nodalOptimization": "Optimisation nodale",
     "study.modelization.nodeProperties.energyCost": "Coût de l'énergie",
     "study.modelization.nodeProperties.unsupplied": "Non distribuée",
     "study.modelization.nodeProperties.splilled": "Non évacuée",
-    "study.modelization.nodeProperties.lastResortShedding": "Last resort shedding status",
-    "study.modelization.nodeProperties.nonDispatchPower": "Non dispatch. power",
-    "study.modelization.nodeProperties.dispatchHydroPower": "Dispatch hydropower",
-    "study.modelization.nodeProperties.otherDispatchPower": "Other dispatch power",
+    "study.modelization.nodeProperties.lastResortShedding": "Moyen de dernier recours pour l'écrêtement",
+    "study.modelization.nodeProperties.nonDispatchPower": "Production non pilotable",
+    "study.modelization.nodeProperties.dispatchHydroPower": "Hydrolique pilotable",
+    "study.modelization.nodeProperties.otherDispatchPower": "Autres productions pilotables",
     "study.modelization.nodeProperties.outputFilter": "Affichage des sorties",
     "study.modelization.nodeProperties.filterByYear": "Sorties année par année",
     "study.modelization.nodeProperties.filterSynthesis": "Sorties de la synthèse",
diff --git a/webapp/src/common/types.ts b/webapp/src/common/types.ts
index 667591389d..fddd524ae0 100644
--- a/webapp/src/common/types.ts
+++ b/webapp/src/common/types.ts
@@ -405,6 +405,13 @@ export interface FileStudyTreeConfigDTO {
   archive_input_series: Array<string>;
   enr_modelling: string;
 }
+export interface LinkElement {
+  label: string;
+  name: string;
+  area1: string;
+  area2: string;
+}
+export type LinkListElement = { [elm: string]: LinkElement };
 
 export enum StudyOutputDownloadType {
   LINKS = "LINKS",
diff --git a/webapp/src/components/common/MatrixInput/index.tsx b/webapp/src/components/common/MatrixInput/index.tsx
index 03da3899e3..9e2ccb2fd2 100644
--- a/webapp/src/components/common/MatrixInput/index.tsx
+++ b/webapp/src/components/common/MatrixInput/index.tsx
@@ -28,11 +28,12 @@ interface PropsType {
   study: StudyMetadata;
   url: string;
   columnsNames?: string[];
+  title?: string;
   computStats: MatrixStats;
 }
 
 function MatrixInput(props: PropsType) {
-  const { study, url, columnsNames, computStats } = props;
+  const { study, url, columnsNames, title, computStats } = props;
   const { enqueueSnackbar } = useSnackbar();
   const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
   const [t] = useTranslation();
@@ -118,7 +119,7 @@ function MatrixInput(props: PropsType) {
               lineHeight: 1.334,
             }}
           >
-            {t("xpansion.timeSeries")}
+            {title || t("xpansion.timeSeries")}
           </Typography>
           <Box sx={{ display: "flex", alignItems: "center" }}>
             {!isLoading && data?.columns?.length > 1 && (
@@ -188,6 +189,7 @@ function MatrixInput(props: PropsType) {
 
 MatrixInput.defaultProps = {
   columnsNames: undefined,
+  title: undefined,
 };
 
 export default MatrixInput;
diff --git a/webapp/src/components/common/fieldEditors/SelectFE.tsx b/webapp/src/components/common/fieldEditors/SelectFE.tsx
index 52ee994017..4caf24cb28 100644
--- a/webapp/src/components/common/fieldEditors/SelectFE.tsx
+++ b/webapp/src/components/common/fieldEditors/SelectFE.tsx
@@ -1,5 +1,6 @@
 import {
   FormControl,
+  FormControlProps,
   FormHelperText,
   InputLabel,
   MenuItem,
@@ -22,6 +23,7 @@ export interface SelectFEProps
   options: Array<string | OptionObj>;
   helperText?: React.ReactNode;
   emptyValue?: boolean;
+  formControlProps?: FormControlProps;
 }
 
 function formatOptions(
@@ -39,6 +41,7 @@ const SelectFE = forwardRef((props: SelectFEProps, ref) => {
     helperText,
     emptyValue,
     variant = "filled",
+    formControlProps,
     ...selectProps
   } = props;
   const { label } = selectProps;
@@ -51,7 +54,7 @@ const SelectFE = forwardRef((props: SelectFEProps, ref) => {
   );
 
   return (
-    <FormControl variant={variant}>
+    <FormControl variant={variant} {...formControlProps}>
       <InputLabel id={labelId}>{label}</InputLabel>
       <Select
         {...selectProps}
diff --git a/webapp/src/components/singlestudy/explore/Configuration/General/Fields/index.tsx b/webapp/src/components/singlestudy/explore/Configuration/General/Fields/index.tsx
index f4542652fc..83a2d6f74a 100644
--- a/webapp/src/components/singlestudy/explore/Configuration/General/Fields/index.tsx
+++ b/webapp/src/components/singlestudy/explore/Configuration/General/Fields/index.tsx
@@ -1,6 +1,7 @@
 import * as R from "ramda";
 import { Box, Divider, TextField } from "@mui/material";
 import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { StyledFieldset } from "../styles";
 import SelectFE from "../../../../../common/fieldEditors/SelectFE";
 import { StudyMetadata } from "../../../../../../common/types";
@@ -24,6 +25,7 @@ interface Props {
 function Fields(props: Props) {
   const { study } = props;
   const studyVersion = Number(study.version);
+  const [t] = useTranslation();
   const { register, setValue, watch, getValues } = useFormContext<FormValues>();
   const buildingMode = watch("buildingMode");
 
@@ -45,9 +47,9 @@ function Fields(props: Props) {
       return "First day must be lower or equal to last day";
     }
     if (getValues("leapYear")) {
-      return v <= 365 ? true : "Maximum is 365 for a leap year";
+      return v <= 366 ? true : "Maximum is 366 for a leap year";
     }
-    return v <= 364 ? true : "Maximum is 364 for a non-leap year";
+    return v <= 365 ? true : "Maximum is 365 for a non-leap year";
   };
 
   ////////////////////////////////////////////////////////////////
@@ -73,7 +75,7 @@ function Fields(props: Props) {
           })}
         />
         <TextField
-          label="First day"
+          label={t("study.modelization.configuration.general.firstDay")}
           variant="filled"
           {...register("firstDay", {
             deps: "lastDay",
@@ -83,7 +85,7 @@ function Fields(props: Props) {
           })}
         />
         <TextField
-          label="Last day"
+          label={t("study.modelization.configuration.general.lastDay")}
           variant="filled"
           {...register("lastDay", {
             deps: "firstDay",
@@ -93,7 +95,9 @@ function Fields(props: Props) {
           })}
         />
       </StyledFieldset>
-      <StyledFieldset legend="Calendar">
+      <StyledFieldset
+        legend={t("study.modelization.configuration.general.calendar")}
+      >
         <TextField
           label="Horizon"
           variant="filled"
@@ -102,21 +106,21 @@ function Fields(props: Props) {
           })}
         />
         <SelectFE
-          label="Year"
+          label={t("study.modelization.configuration.general.year")}
           options={YEAR_OPTIONS}
           {...register("firstMonth", {
             onAutoSubmit: saveValue("general/first-month-in-year"),
           })}
         />
         <SelectFE
-          label="Week"
+          label={t("study.modelization.configuration.general.week")}
           options={WEEK_OPTIONS}
           {...register("firstWeekDay", {
             onAutoSubmit: saveValue("general/first.weekday"),
           })}
         />
         <SelectFE
-          label="1st January"
+          label={t("study.modelization.configuration.general.firstDayOfYear")}
           options={FIRST_JANUARY_OPTIONS}
           {...register("firstJanuary", {
             onAutoSubmit: saveValue("general/january.1st"),
@@ -124,7 +128,7 @@ function Fields(props: Props) {
         />
         <SwitchFE
           sx={{ flex: 1, flexBasis: "100%" }}
-          label="Leap year"
+          label={t("study.modelization.configuration.general.leapYear")}
           {...register("leapYear", {
             deps: ["firstDay", "lastDay"],
             onAutoSubmit: saveValue("general/leapyear"),
@@ -142,7 +146,7 @@ function Fields(props: Props) {
           }}
         >
           <TextField
-            label="Number"
+            label={t("global.number")}
             variant="filled"
             {...register("nbYears", {
               validate: (v) => {
diff --git a/webapp/src/components/singlestudy/explore/Modelization/Areas/AreaPropsView.tsx b/webapp/src/components/singlestudy/explore/Modelization/Areas/AreaPropsView.tsx
index c044cbddac..645ac340c8 100644
--- a/webapp/src/components/singlestudy/explore/Modelization/Areas/AreaPropsView.tsx
+++ b/webapp/src/components/singlestudy/explore/Modelization/Areas/AreaPropsView.tsx
@@ -4,6 +4,7 @@ import PropertiesView from "../../../../common/PropertiesView";
 import useAppSelector from "../../../../../redux/hooks/useAppSelector";
 import { getStudyAreas } from "../../../../../redux/selectors";
 import ListElement from "../../common/ListElement";
+import { transformNameToId } from "../../../../../services/utils";
 
 interface PropsType {
   studyId: string;
@@ -27,7 +28,13 @@ function AreaPropsView(props: PropsType) {
       }
       return [];
     };
-    setFilteredAreas(filter());
+    setFilteredAreas(
+      filter().map((el) => ({
+        ...el,
+        name: transformNameToId(el.name),
+        label: el.name,
+      }))
+    );
   }, [areas, areaNameFilter]);
 
   ////////////////////////////////////////////////////////////////
@@ -40,7 +47,7 @@ function AreaPropsView(props: PropsType) {
         <ListElement
           list={filteredAreas}
           currentElement={currentArea}
-          setSelectedItem={(elm) => onClick(elm.name)}
+          setSelectedItem={(elm) => onClick(transformNameToId(elm.name))}
         />
       }
       secondaryContent={<div />}
diff --git a/webapp/src/components/singlestudy/explore/Modelization/Areas/index.tsx b/webapp/src/components/singlestudy/explore/Modelization/Areas/index.tsx
index d72b9ca6f9..c7448e08f2 100644
--- a/webapp/src/components/singlestudy/explore/Modelization/Areas/index.tsx
+++ b/webapp/src/components/singlestudy/explore/Modelization/Areas/index.tsx
@@ -36,11 +36,11 @@ function Areas() {
   // Event Handlers
   ////////////////////////////////////////////////////////////////
 
-  const handleAreaClick = (areaName: string): void => {
+  const handleAreaClick = (areaId: string): void => {
     if (studyData?.areas === undefined) return;
-    const elm = studyData?.areas[areaName.toLowerCase()];
+    const elm = studyData?.areas[areaId];
     if (elm) {
-      dispatch(setCurrentArea(areaName.toLowerCase()));
+      dispatch(setCurrentArea(areaId));
     }
   };
 
@@ -56,9 +56,7 @@ function Areas() {
             <AreaPropsView
               studyId={study.id}
               onClick={handleAreaClick}
-              currentArea={
-                selectedArea !== undefined ? selectedArea.name : undefined
-              }
+              currentArea={currentArea !== undefined ? currentArea : undefined}
             />
           )}
         </Box>
diff --git a/webapp/src/components/singlestudy/explore/Modelization/Links/LinkPropsView.tsx b/webapp/src/components/singlestudy/explore/Modelization/Links/LinkPropsView.tsx
new file mode 100644
index 0000000000..6f5c502e8c
--- /dev/null
+++ b/webapp/src/components/singlestudy/explore/Modelization/Links/LinkPropsView.tsx
@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import PropertiesView from "../../../../common/PropertiesView";
+import useAppSelector from "../../../../../redux/hooks/useAppSelector";
+import { getStudyLinks } from "../../../../../redux/selectors";
+import ListElement from "../../common/ListElement";
+import { LinkElement } from "../../../../../common/types";
+
+interface PropsType {
+  studyId: string;
+  onClick: (name: string) => void;
+  currentLink?: string;
+}
+function LinkPropsView(props: PropsType) {
+  const { onClick, currentLink, studyId } = props;
+  const links = useAppSelector((state) => getStudyLinks(state, studyId));
+  const [linkNameFilter, setLinkNameFilter] = useState<string>();
+  const [filteredLinks, setFilteredLinks] = useState<Array<LinkElement>>(
+    links || []
+  );
+
+  useEffect(() => {
+    const filter = (): Array<LinkElement> => {
+      if (links) {
+        return links.filter(
+          (s) =>
+            !linkNameFilter ||
+            s.name.search(new RegExp(linkNameFilter, "i")) !== -1
+        );
+      }
+      return [];
+    };
+    setFilteredLinks(filter());
+  }, [links, linkNameFilter]);
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return (
+    <PropertiesView
+      mainContent={
+        <ListElement
+          list={filteredLinks}
+          currentElement={currentLink}
+          setSelectedItem={(elm) => onClick(elm.name)}
+        />
+      }
+      secondaryContent={<div />}
+      onSearchFilterChange={(e) => setLinkNameFilter(e as string)}
+    />
+  );
+}
+
+LinkPropsView.defaultProps = {
+  currentLink: undefined,
+};
+
+export default LinkPropsView;
diff --git a/webapp/src/components/singlestudy/explore/Modelization/Links/LinkView/LinkForm.tsx b/webapp/src/components/singlestudy/explore/Modelization/Links/LinkView/LinkForm.tsx
new file mode 100644
index 0000000000..58fcd7b9cc
--- /dev/null
+++ b/webapp/src/components/singlestudy/explore/Modelization/Links/LinkView/LinkForm.tsx
@@ -0,0 +1,307 @@
+import { Box } from "@mui/material";
+import { AxiosError } from "axios";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { editStudy } from "../../../../../../services/api/study";
+import useEnqueueErrorSnackbar from "../../../../../../hooks/useEnqueueErrorSnackbar";
+import Fieldset from "../../../../../common/Fieldset";
+import { AutoSubmitHandler, FormObj } from "../../../../../common/Form";
+import { getLinkPath, LinkFields } from "./utils";
+import SwitchFE from "../../../../../common/fieldEditors/SwitchFE";
+import {
+  LinkElement,
+  MatrixStats,
+  StudyMetadata,
+} from "../../../../../../common/types";
+import SelectFE from "../../../../../common/fieldEditors/SelectFE";
+import MatrixInput from "../../../../../common/MatrixInput";
+import LinkMatrixView from "./LinkMatrixView";
+
+export default function LinkForm(
+  props: FormObj<LinkFields, unknown> & {
+    link: LinkElement;
+    study: StudyMetadata;
+  }
+) {
+  const { register, defaultValues, study, link } = props;
+  const studyId = study.id;
+  const isTabMatrix = useMemo((): boolean => {
+    let version = 0;
+    try {
+      version = parseInt(study.version, 10);
+    } catch (e) {
+      version = 0;
+    }
+    return version >= 820;
+  }, [study]);
+
+  const { area1, area2 } = link;
+  const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
+  const [t] = useTranslation();
+  const path = useMemo(() => {
+    return getLinkPath(area1, area2);
+  }, [area1, area2]);
+
+  const optionTransCap = ["infinite", "ignore", "enabled"].map((item) => ({
+    label: t(`study.modelization.links.transmissionCapa.${item}`),
+    value: item.toLowerCase(),
+  }));
+
+  const optionType = ["ac", "dc", "gaz", "virt", "other"].map((item) => ({
+    label: t(`study.modelization.links.type.${item}`),
+    value: item.toLowerCase(),
+  }));
+
+  const filterOptions = ["hourly", "daily", "weekly", "monthly", "annual"].map(
+    (item) => ({
+      label: t(`study.${item}`),
+      value: item,
+    })
+  );
+
+  const columnsNames = [
+    t("study.modelization.links.matrix.columns.transCapaDirect"),
+    t("study.modelization.links.matrix.columns.transCapaIndirect"),
+    t("study.modelization.links.matrix.columns.hurdleCostsDirect"),
+    t("study.modelization.links.matrix.columns.hurdleCostsIndirect"),
+    t("study.modelization.links.matrix.columns.inpedances"),
+    t("study.modelization.links.matrix.columns.loopFlow"),
+    t("study.modelization.links.matrix.columns.pShiftMin"),
+    t("study.modelization.links.matrix.columns.pShiftMax"),
+  ];
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const handleAutoSubmit = async (path: string, data: any) => {
+    try {
+      await editStudy(data, studyId, path);
+    } catch (error) {
+      enqueueErrorSnackbar(t("study.error.updateUI"), error as AxiosError);
+    }
+  };
+
+  const handleTypeAutoSubmit: AutoSubmitHandler<LinkFields, string> = (
+    value
+  ) => {
+    const defaultFilterSynthesis = defaultValues?.filterSynthesis
+      ? (defaultValues?.filterSynthesis as Array<string>).filter(
+          (elm) => elm !== ""
+        )
+      : [];
+    const defaultFilterByYear = defaultValues?.filterByYear
+      ? (defaultValues?.filterByYear as Array<string>).filter(
+          (elm) => elm !== ""
+        )
+      : [];
+
+    const common = {
+      "hurdles-cost": defaultValues?.hurdleCost,
+      "loop-flow": defaultValues?.loopFlows,
+      "use-phase-shifter": defaultValues?.pst,
+      "transmission-capacities": defaultValues?.transmissionCapa,
+      "filter-synthesis": defaultFilterSynthesis.join(","),
+      "filter-year-by-year": defaultFilterByYear.join(","),
+    };
+
+    let other = {
+      "asset-type": "other",
+      "link-style": "dot",
+      "link-width": 2,
+      colorr: 255,
+      colorg: 128,
+      colorb: 0,
+    };
+    switch (value) {
+      case "ac":
+        other = {
+          "asset-type": "ac",
+          "link-style": "plain",
+          "link-width": 1,
+          colorr: 112,
+          colorg: 112,
+          colorb: 112,
+        };
+        break;
+
+      case "dc":
+        other = {
+          "asset-type": "dc",
+          "link-style": "dash",
+          "link-width": 2,
+          colorr: 0,
+          colorg: 255,
+          colorb: 0,
+        };
+        break;
+
+      case "gaz":
+        other = {
+          "asset-type": "gaz",
+          "link-style": "plain",
+          "link-width": 3,
+          colorr: 0,
+          colorg: 128,
+          colorb: 255,
+        };
+        break;
+
+      case "virt":
+        other = {
+          "asset-type": "virt",
+          "link-style": "dotdash",
+          "link-width": 2,
+          colorr: 255,
+          colorg: 0,
+          colorb: 128,
+        };
+        break;
+
+      default:
+        break;
+    }
+    handleAutoSubmit(path.type, { ...common, ...other });
+  };
+
+  const renderSelect = (
+    filterName: string,
+    options: Array<{ label: string; value: string }>,
+    onAutoSubmit?: AutoSubmitHandler<LinkFields, string>
+  ) => (
+    <Box sx={{ display: "flex", flexGrow: 1 }}>
+      <SelectFE
+        {...register(filterName, {
+          onAutoSubmit:
+            onAutoSubmit ||
+            ((value) => {
+              handleAutoSubmit(path[filterName], value);
+            }),
+        })}
+        defaultValue={(defaultValues || {})[filterName] || []}
+        variant="filled"
+        options={options}
+        formControlProps={{
+          sx: {
+            flex: 1,
+            mx: 2,
+            boxSizing: "border-box",
+          },
+        }}
+        sx={{ width: "100%", minWidth: "200px" }}
+        label={t(`study.modelization.links.${filterName}`)}
+      />
+    </Box>
+  );
+  const renderFilter = (filterName: string) => (
+    <Box sx={{ mb: 2 }}>
+      <SelectFE
+        multiple
+        {...register(filterName, {
+          onAutoSubmit: (value) => {
+            const selection = value
+              ? (value as Array<string>).filter((val) => val !== "")
+              : [];
+            handleAutoSubmit(path[filterName], selection.join(", "));
+          },
+        })}
+        renderValue={(value: unknown) => {
+          const selection = value
+            ? (value as Array<string>).filter((val) => val !== "")
+            : [];
+          return selection.length > 0
+            ? selection.map((elm) => t(`study.${elm}`)).join(", ")
+            : t("global.none");
+        }}
+        defaultValue={(defaultValues || {})[filterName] || []}
+        variant="filled"
+        options={filterOptions}
+        sx={{ minWidth: "200px" }}
+        label={t(`study.modelization.nodeProperties.${filterName}`)}
+      />
+    </Box>
+  );
+
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        height: "100%",
+        py: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        <Fieldset legend={t("global.general")} style={{ padding: "16px" }}>
+          <Box
+            sx={{
+              width: "100%",
+              display: "flex",
+              justifyContent: "flex-start",
+            }}
+          >
+            <SwitchFE
+              label={t("study.modelization.links.hurdleCost")}
+              {...register("hurdleCost", {
+                onAutoSubmit: (value) =>
+                  handleAutoSubmit(path.hurdleCost, value),
+              })}
+            />
+            <SwitchFE
+              sx={{ mx: 2 }}
+              label={t("study.modelization.links.loopFlows")}
+              {...register("loopFlows", {
+                onAutoSubmit: (value) =>
+                  handleAutoSubmit(path.loopFlows, value),
+              })}
+            />
+            <SwitchFE
+              sx={{ mx: 2 }}
+              label={t("study.modelization.links.pst")}
+              {...register("pst", {
+                onAutoSubmit: (value) => handleAutoSubmit(path.pst, value),
+              })}
+            />
+            {renderSelect("transmissionCapa", optionTransCap)}
+            {renderSelect("type", optionType, handleTypeAutoSubmit)}
+          </Box>
+        </Fieldset>
+        <Fieldset
+          legend={t("study.modelization.nodeProperties.outputFilter")}
+          style={{ padding: "16px" }}
+        >
+          <Box
+            sx={{
+              width: "100%",
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            {renderFilter("filterSynthesis")}
+            {renderFilter("filterByYear")}
+          </Box>
+        </Fieldset>
+        <Box
+          sx={{
+            width: "100%",
+            display: "flex",
+            flexDirection: "column",
+            height: "500px",
+          }}
+        >
+          {isTabMatrix ? (
+            <LinkMatrixView study={study} area1={area1} area2={area2} />
+          ) : (
+            <MatrixInput
+              study={study}
+              url={`input/links/${area1.toLowerCase()}/${area2.toLowerCase()}`}
+              columnsNames={columnsNames}
+              computStats={MatrixStats.NOCOL}
+            />
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+}
diff --git a/webapp/src/components/singlestudy/explore/Modelization/Links/LinkView/LinkMatrixView.tsx b/webapp/src/components/singlestudy/explore/Modelization/Links/LinkView/LinkMatrixView.tsx
new file mode 100644
index 0000000000..e8b4bea0bf
--- /dev/null
+++ b/webapp/src/components/singlestudy/explore/Modelization/Links/LinkView/LinkMatrixView.tsx
@@ -0,0 +1,97 @@
+/* eslint-disable react/jsx-props-no-spreading */
+import * as React from "react";
+import { Divider, styled } from "@mui/material";
+import Tabs from "@mui/material/Tabs";
+import Tab from "@mui/material/Tab";
+import Box from "@mui/material/Box";
+import { useTranslation } from "react-i18next";
+import { MatrixStats, StudyMetadata } from "../../../../../../common/types";
+import MatrixInput from "../../../../../common/MatrixInput";
+
+export const StyledTab = styled(Tabs)({
+  width: "98%",
+  borderBottom: 1,
+  borderColor: "divider",
+});
+
+interface Props {
+  study: StudyMetadata;
+  area1: string;
+  area2: string;
+}
+
+function LinkMatrixView(props: Props) {
+  const [t] = useTranslation();
+  const { study, area1, area2 } = props;
+  const [value, setValue] = React.useState(0);
+
+  const columnsNames = [
+    t("study.modelization.links.matrix.columns.hurdleCostsDirect"),
+    t("study.modelization.links.matrix.columns.hurdleCostsIndirect"),
+    t("study.modelization.links.matrix.columns.inpedances"),
+    t("study.modelization.links.matrix.columns.loopFlow"),
+    t("study.modelization.links.matrix.columns.pShiftMin"),
+    t("study.modelization.links.matrix.columns.pShiftMax"),
+  ];
+
+  const handleChange = (event: React.SyntheticEvent, newValue: number) => {
+    setValue(newValue);
+  };
+  return (
+    <Box
+      width="100%"
+      height="100%"
+      display="flex"
+      flexDirection="column"
+      justifyContent="flex-start"
+      alignItems="center"
+    >
+      <StyledTab
+        value={value}
+        onChange={handleChange}
+        aria-label="basic tabs example"
+      >
+        <Tab label={t("study.modelization.links.matrix.parameters")} />
+        <Tab label={t("study.modelization.links.matrix.capacities")} />
+      </StyledTab>
+      <Box
+        sx={{
+          display: "flex",
+          width: "100%",
+          height: "100%",
+        }}
+      >
+        {value === 0 ? (
+          <MatrixInput
+            study={study}
+            url={`input/links/${area1.toLowerCase()}/${area2.toLowerCase()}_parameters`}
+            columnsNames={columnsNames}
+            computStats={MatrixStats.NOCOL}
+          />
+        ) : (
+          <>
+            <MatrixInput
+              study={study}
+              title={t(
+                "study.modelization.links.matrix.columns.transCapaDirect"
+              )}
+              url={`input/links/${area1.toLowerCase()}/capacities/${area2.toLowerCase()}_direct`}
+              computStats={MatrixStats.NOCOL}
+            />
+            <Divider sx={{ width: "1px", bgcolor: "divider" }} />
+            <MatrixInput
+              study={study}
+              title={t(
+                "study.modelization.links.matrix.columns.transCapaIndirect"
+              )}
+              url={`input/links/${area1.toLowerCase()}/capacities/${area2.toLowerCase()}_indirect`}
+              computStats={MatrixStats.NOCOL}
+            />
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default LinkMatrixView;
diff --git a/webapp/src/components/singlestudy/explore/Modelization/Links/LinkView/index.tsx b/webapp/src/components/singlestudy/explore/Modelization/Links/LinkView/index.tsx
new file mode 100644
index 0000000000..a15ed3271e
--- /dev/null
+++ b/webapp/src/components/singlestudy/explore/Modelization/Links/LinkView/index.tsx
@@ -0,0 +1,50 @@
+import * as R from "ramda";
+import { Box } from "@mui/material";
+import { useOutletContext } from "react-router";
+import { LinkElement, StudyMetadata } from "../../../../../../common/types";
+import usePromise, { PromiseStatus } from "../../../../../../hooks/usePromise";
+import Form from "../../../../../common/Form";
+import LinkForm from "./LinkForm";
+import { getDefaultValues, LinkFields } from "./utils";
+import SimpleLoader from "../../../../../common/loaders/SimpleLoader";
+
+interface Props {
+  link: LinkElement;
+}
+
+function LinkView(props: Props) {
+  const { study } = useOutletContext<{ study: StudyMetadata }>();
+  const { link } = props;
+  const { data: defaultValues, status } = usePromise(
+    () => getDefaultValues(study.id, link.area1, link.area2),
+    {},
+    [study.id, link.area1, link.area2]
+  );
+
+  return (
+    <Box sx={{ width: "100%", height: "100%", overflowY: "auto" }}>
+      {R.cond([
+        [R.equals(PromiseStatus.Pending), () => <SimpleLoader />],
+        [
+          R.equals(PromiseStatus.Resolved),
+          () => (
+            <Form
+              autoSubmit
+              config={{ defaultValues: defaultValues as LinkFields }}
+            >
+              {(formObj) =>
+                LinkForm({
+                  ...formObj,
+                  link,
+                  study,
+                })
+              }
+            </Form>
+          ),
+        ],
+      ])(status)}
+    </Box>
+  );
+}
+
+export default LinkView;
diff --git a/webapp/src/components/singlestudy/explore/Modelization/Links/LinkView/utils.ts b/webapp/src/components/singlestudy/explore/Modelization/Links/LinkView/utils.ts
new file mode 100644
index 0000000000..e0d887bc93
--- /dev/null
+++ b/webapp/src/components/singlestudy/explore/Modelization/Links/LinkView/utils.ts
@@ -0,0 +1,77 @@
+import { FieldValues } from "react-hook-form";
+import { getStudyData } from "../../../../../../services/api/study";
+
+type TransCapacitiesType = "infinite" | "ignore" | "enabled";
+type AssetType = "ac" | "dc" | "gaz" | "virt";
+type LinkStyleType = "plain" | "dash" | "dot" | "dotdash";
+type FilteringType = "hourly" | "daily" | "weekly" | "monthly" | "annual";
+
+export interface LinkType {
+  "hurdles-cost": boolean;
+  "loop-flow": boolean;
+  "use-phase-shifter": boolean;
+  "transmission-capacities": TransCapacitiesType;
+  "asset-type": AssetType;
+  "link-style": LinkStyleType;
+  "link-width": number;
+  colorr: number;
+  colorg: number;
+  colorb: number;
+  "filter-synthesis": string;
+  "filter-year-by-year": string;
+}
+
+export interface LinkFields extends FieldValues {
+  hurdleCost: boolean;
+  loopFlows: boolean;
+  pst: boolean;
+  type: string;
+  transmissionCapa: string;
+  filterSynthesis: Array<FilteringType>;
+  filterByYear: Array<FilteringType>;
+}
+
+export type LinkPath = Omit<Record<keyof LinkFields, string>, "name">;
+
+export function getLinkPath(area1: string, area2: string): LinkPath {
+  const pathPrefix = `input/links/${area1.toLowerCase()}/properties/${area2.toLowerCase()}`;
+  return {
+    hurdleCost: `${pathPrefix}/hurdles-cost`,
+    loopFlows: `${pathPrefix}/loop-flow`,
+    pst: `${pathPrefix}/use-phase-shifter`,
+    type: pathPrefix,
+    transmissionCapa: `${pathPrefix}/transmission-capacities`,
+    filterSynthesis: `${pathPrefix}/filter-synthesis`,
+    filterByYear: `${pathPrefix}/filter-year-by-year`,
+  };
+}
+
+export async function getDefaultValues(
+  studyId: string,
+  area1: string,
+  area2: string
+): Promise<LinkFields> {
+  // Path
+  const pathPrefix = `input/links/${area1.toLowerCase()}/properties/${area2.toLowerCase()}`;
+  // Fetch fields
+  const fields: LinkType = await getStudyData(studyId, pathPrefix, 3);
+
+  // Return element
+  return {
+    hurdleCost: fields["hurdles-cost"],
+    loopFlows: fields["loop-flow"],
+    pst: fields["use-phase-shifter"],
+    type: fields["asset-type"],
+    transmissionCapa: fields["transmission-capacities"],
+    filterSynthesis: fields["filter-synthesis"].split(",").map((elm) => {
+      const sElm = elm.replace(/\s+/g, "");
+      return sElm as FilteringType;
+    }),
+    filterByYear: fields["filter-year-by-year"].split(",").map((elm) => {
+      const sElm = elm.replace(/\s+/g, "");
+      return sElm as FilteringType;
+    }),
+  };
+}
+
+export default {};
diff --git a/webapp/src/components/singlestudy/explore/Modelization/Links/index.tsx b/webapp/src/components/singlestudy/explore/Modelization/Links/index.tsx
index 11ed1e0fcf..f5ecb359ef 100644
--- a/webapp/src/components/singlestudy/explore/Modelization/Links/index.tsx
+++ b/webapp/src/components/singlestudy/explore/Modelization/Links/index.tsx
@@ -1,8 +1,93 @@
-import UnderConstruction from "../../../../common/page/UnderConstruction";
-import previewImage from "./preview.png";
+import { Box } from "@mui/material";
+import * as R from "ramda";
+import { ReactNode } from "react";
+import { useOutletContext } from "react-router";
+import { StudyMetadata } from "../../../../../common/types";
+import SimpleLoader from "../../../../common/loaders/SimpleLoader";
+import NoContent from "../../../../common/page/NoContent";
+import SplitLayoutView from "../../../../common/SplitLayoutView";
+import LinkPropsView from "./LinkPropsView";
+import useStudyData from "../../hooks/useStudyData";
+import { getCurrentLinkId, selectLinks } from "../../../../../redux/selectors";
+import useAppSelector from "../../../../../redux/hooks/useAppSelector";
+import useAppDispatch from "../../../../../redux/hooks/useAppDispatch";
+import { setCurrentLink } from "../../../../../redux/ducks/studyDataSynthesis";
+import LinkView from "./LinkView";
 
 function Links() {
-  return <UnderConstruction previewImage={previewImage} />;
+  const { study } = useOutletContext<{ study: StudyMetadata }>();
+  const {
+    value: studyData,
+    error,
+    isLoading,
+  } = useStudyData({
+    studyId: study.id,
+    selector: selectLinks,
+  });
+  const currentLink = useAppSelector(getCurrentLinkId);
+  const dispatch = useAppDispatch();
+  const selectedLink =
+    studyData && currentLink ? studyData[currentLink].name : undefined;
+
+  ////////////////////////////////////////////////////////////////
+  // Event Handlers
+  ////////////////////////////////////////////////////////////////
+
+  const handleLinkClick = (linkName: string): void => {
+    if (studyData === undefined) return;
+    const elm = studyData[linkName];
+    if (elm) {
+      dispatch(setCurrentLink(linkName));
+    }
+  };
+
+  ////////////////////////////////////////////////////////////////
+  // JSX
+  ////////////////////////////////////////////////////////////////
+
+  return (
+    <SplitLayoutView
+      left={
+        <Box width="100%" height="100%">
+          {studyData !== undefined && !isLoading && (
+            <LinkPropsView
+              studyId={study.id}
+              onClick={handleLinkClick}
+              currentLink={selectedLink || undefined}
+            />
+          )}
+        </Box>
+      }
+      right={
+        <>
+          {R.cond([
+            // Loading
+            [() => isLoading, () => (<SimpleLoader />) as ReactNode],
+            [
+              () => error !== undefined,
+              () => (<NoContent title={error?.message} />) as ReactNode,
+            ],
+            // Link list
+            [
+              () => selectedLink !== undefined,
+              () =>
+                (
+                  <Box width="100%" height="100%">
+                    {studyData === undefined ? (
+                      <SimpleLoader />
+                    ) : (
+                      <LinkView link={studyData[selectedLink as string]} />
+                    )}
+                  </Box>
+                ) as ReactNode,
+            ],
+            // No Areas
+            [R.T, () => (<NoContent title="No Links" />) as ReactNode],
+          ])()}
+        </>
+      }
+    />
+  );
 }
 
 export default Links;
diff --git a/webapp/src/components/singlestudy/explore/Modelization/Links/preview.png b/webapp/src/components/singlestudy/explore/Modelization/Links/preview.png
deleted file mode 100644
index c44742a358..0000000000
Binary files a/webapp/src/components/singlestudy/explore/Modelization/Links/preview.png and /dev/null differ
diff --git a/webapp/src/components/singlestudy/explore/common/ListElement.tsx b/webapp/src/components/singlestudy/explore/common/ListElement.tsx
index c825149ac3..e5d2d95938 100644
--- a/webapp/src/components/singlestudy/explore/common/ListElement.tsx
+++ b/webapp/src/components/singlestudy/explore/common/ListElement.tsx
@@ -7,7 +7,9 @@ interface PropsType<T> {
   setSelectedItem: (item: T, index: number) => void;
 }
 
-function ListElement<T extends { name: string }>(props: PropsType<T>) {
+function ListElement<T extends { name: string; label?: string }>(
+  props: PropsType<T>
+) {
   const { list, currentElement, setSelectedItem } = props;
 
   return (
@@ -31,7 +33,7 @@ function ListElement<T extends { name: string }>(props: PropsType<T>) {
           <ListItemText
             sx={{ "&> span": { textOverflow: "ellipsis", overflow: "hidden" } }}
           >
-            {element.name}
+            {element.label || element.name}
           </ListItemText>
           <ListItemIcon
             sx={{
diff --git a/webapp/src/redux/ducks/studyDataSynthesis.ts b/webapp/src/redux/ducks/studyDataSynthesis.ts
index 8d7120e543..52144c5147 100644
--- a/webapp/src/redux/ducks/studyDataSynthesis.ts
+++ b/webapp/src/redux/ducks/studyDataSynthesis.ts
@@ -11,6 +11,7 @@ import {
   WSMessage,
 } from "../../common/types";
 import * as api from "../../services/api/study";
+import { selectLinks } from "../selectors";
 import { AppAsyncThunkConfig } from "../store";
 import { makeActionName } from "../utils";
 
@@ -21,10 +22,12 @@ export const studyDataAdapter = createEntityAdapter<FileStudyTreeConfigDTO>({
 export interface StudyDataState
   extends ReturnType<typeof studyDataAdapter.getInitialState> {
   currentArea: string;
+  currentLink: string;
 }
 
 const initialState = studyDataAdapter.getInitialState({
   currentArea: "",
+  currentLink: "",
 }) as StudyDataState;
 
 const n = makeActionName("studyDataSynthesis");
@@ -37,6 +40,10 @@ export const setCurrentArea = createAction<
   NonNullable<StudyDataState["currentArea"]>
 >(n("SET_CURRENT_AREA"));
 
+export const setCurrentLink = createAction<
+  NonNullable<StudyDataState["currentLink"]>
+>(n("SET_CURRENT_LINK"));
+
 ////////////////////////////////////////////////////////////////
 // Thunks
 ////////////////////////////////////////////////////////////////
@@ -49,9 +56,20 @@ export const createStudyData = createAsyncThunk<
   n("CREATE_STUDY_DATA"),
   async (studyId, { dispatch, getState, rejectWithValue }) => {
     try {
+      // Fetch study synthesis data
       const studyData = await api.getStudySynthesis(studyId);
+
+      // Set current area
       const areas = Object.keys(studyData.areas);
-      if (areas.length > 0) dispatch(setCurrentArea(areas[0].toLowerCase()));
+      if (areas.length > 0) dispatch(setCurrentArea(areas[0]));
+
+      // Set current link
+      const links = selectLinks(studyData);
+      const linkList = links ? Object.values(links) : [];
+      if (linkList.length > 0) {
+        dispatch(setCurrentLink(linkList[0].name));
+      }
+
       return studyData;
     } catch (err) {
       return rejectWithValue(err);
@@ -91,5 +109,8 @@ export default createReducer(initialState, (builder) => {
     .addCase(deleteStudyData.fulfilled, studyDataAdapter.removeOne)
     .addCase(setCurrentArea, (draftState, action) => {
       draftState.currentArea = action.payload;
+    })
+    .addCase(setCurrentLink, (draftState, action) => {
+      draftState.currentLink = action.payload;
     });
 });
diff --git a/webapp/src/redux/selectors.ts b/webapp/src/redux/selectors.ts
index 97b125d1b2..9b89d598b7 100644
--- a/webapp/src/redux/selectors.ts
+++ b/webapp/src/redux/selectors.ts
@@ -1,6 +1,8 @@
 import { createEntityAdapter, createSelector } from "@reduxjs/toolkit";
 import {
+  FileStudyTreeConfigDTO,
   GroupDetailsDTO,
+  LinkListElement,
   StudyMetadata,
   UserDetailsDTO,
 } from "../common/types";
@@ -184,10 +186,49 @@ export const getCurrentAreaId = (
   return getStudyDataState(state).currentArea;
 };
 
+export const getCurrentLinkId = (
+  state: AppState
+): StudyDataState["currentLink"] => {
+  return getStudyDataState(state).currentLink;
+};
+
 export const getStudyAreas = createSelector(getStudyData, (studyData) =>
   studyData ? Object.values(studyData.areas) : []
 );
 
+export const selectLinks = (
+  studyData: FileStudyTreeConfigDTO | undefined
+): LinkListElement | undefined => {
+  if (studyData) {
+    const links: LinkListElement = {};
+    Object.keys(studyData.areas).forEach((elm1) => {
+      const area1 = studyData.areas[elm1];
+      Object.keys(area1.links).forEach((elm2) => {
+        const area2 = studyData.areas[elm2];
+        const area1Id = elm1.localeCompare(elm2) < 0 ? elm1 : elm2;
+        const area2Id = elm1 === area1Id ? elm2 : elm1;
+        const name = `${area1Id} / ${area2Id}`;
+        links[name] = {
+          label: `${area1.name} / ${area2.name}`,
+          name,
+          area1: area1Id,
+          area2: area2Id,
+        };
+      });
+    });
+    return links;
+  }
+  return undefined;
+};
+
+export const getStudyLinks = createSelector(getStudyData, (data) => {
+  if (data) {
+    const tmp = selectLinks(data);
+    if (tmp) return Object.values(tmp) || [];
+  }
+  return [];
+});
+
 ////////////////////////////////////////////////////////////////
 // UI
 ////////////////////////////////////////////////////////////////