diff --git a/src/components/application/ApplicationCard.vue b/src/components/application/ApplicationCard.vue
index 1550b13d6c5b9f5d7621b6846c96573a79cb8c80..32e2c30393c1f908bbdbfdd6b95c9c7bd7c88ff8 100644
--- a/src/components/application/ApplicationCard.vue
+++ b/src/components/application/ApplicationCard.vue
@@ -16,6 +16,10 @@ export default {
       type: Object,
       required: true,
     },
+    applicationRoles: {
+      type: Array,
+      default: () => [],
+    },
     index: {
       required: true,
       type: Number,
@@ -90,6 +94,7 @@ export default {
         :url="url"
         :redirection="redirection"
         :close-cb="redirection"
+        :application-roles="applicationRoles"
       >
       </DetailApplicationModalCard>
     </b-modal>
@@ -122,7 +127,7 @@ export default {
           <div class="card-footer-item">
             <b-button
               v-if="application.references.length !== 0"
-              :disabled="!application.isApplicationUser()"
+              :disabled="!(application.canReadReference || application.canWriteReference)"
               icon-left="drafting-compass"
               @click="showCharte(displayReferencesManagement(application))"
             >
@@ -132,7 +137,7 @@ export default {
           <div class="card-footer-item">
             <b-button
               v-if="application.dataTypes.length !== 0"
-              :disabled="!application.isApplicationUser()"
+              :disabled="!(application.canReadDatatype || application.canWriteDatatype)"
               icon-left="poll"
               @click="showCharte(displayDataSetManagement(application))"
             >
diff --git a/src/components/application/DetailApplicationModalCard.vue b/src/components/application/DetailApplicationModalCard.vue
index 2efe4923bdb5879ac641039444efcc41afd82955..192ed3bfd64ce65d63e7ff86f4a670ece8542eec 100644
--- a/src/components/application/DetailApplicationModalCard.vue
+++ b/src/components/application/DetailApplicationModalCard.vue
@@ -36,6 +36,10 @@ import { User } from "@/model/User";
 
 export default {
   name: "DetailApplicationModalCard",
+  applicationRoles: {
+    type: Object,
+    default: () => {},
+  },
   components: { CharteValidator, ModalCard },
   emits: ["setValidatedCharte"],
   props: {
diff --git a/src/components/common/CollapsibleTree.vue b/src/components/common/CollapsibleTree.vue
index 3335cef8f0c8c01b3a175dc5261370f7f76f0afe..07463959d8f4cca19af16a8302e1607368267495 100644
--- a/src/components/common/CollapsibleTree.vue
+++ b/src/components/common/CollapsibleTree.vue
@@ -79,7 +79,7 @@
         >
           <slot
             name="synthesisDetail"
-            v-bind:lineCount="updateCountLineFile"
+            v-bind:lineCount="lineCount"
             v-bind:onClickLabelSynthesisDetailCb="onClickLabelSynthesisDetailCb"
             v-bind:option="option"
             v-bind:refFile="refFile"
@@ -115,14 +115,14 @@
                 />
               </span>
             </div>
-            <div v-if="refFile">
-              <span class="file-name">
-                {{ refFile.name }}
+            <div v-else-if="lineCount">
+              <span :class="lineCount ? 'file-name' : 'file-name has-text-danger'">
+                {{ $tc("validation.count-line", lineCount, { count: lineCount }) }}
               </span>
             </div>
-            <div v-else>
-              <span :class="updateCountLineFile ? 'file-name' : 'file-name has-text-danger'">
-                {{ $tc("validation.count-line", updateCountLineFile) }}
+            <div v-else-if="refFile">
+              <span class="file-name">
+                {{ refFile.name }}
               </span>
             </div>
           </slot>
@@ -196,7 +196,8 @@
         v-for="child in option.children"
         :key="child.id"
         :application-title="applicationTitle"
-        :buttons="buttons"
+        :buttons="buildButton ? buildButton(child) : buttons"
+        :build-button="buildButton"
         :class="displayChildren ? '' : 'hide'"
         :level="level + 1"
         :line-count="lineCountSynthesis(referenceSynthesis, child)"
@@ -217,7 +218,7 @@ import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import AvailiblityChart from "../charts/AvailiblityChart.vue";
 import LoadingAnimate from "@/components/common/LoadingAnimate.vue";
 import { lineCountSynthesis } from "@/composable/application/synthesis";
-import { computed, watch } from "vue";
+import { watch } from "vue";
 import useBoolean from "@/composable/components/boolean";
 import TagsInfos from "@/components/common/TagsInfos.vue";
 import { length } from "vee-validate/dist/rules";
@@ -231,6 +232,7 @@ export default {
   },
   components: { TagsInfos, LoadingAnimate, FontAwesomeIcon, AvailiblityChart },
   props: {
+    buildButton: Function,
     applicationName: String,
     canUpload: {
       type: Boolean,
@@ -272,10 +274,9 @@ export default {
       type: String,
     },
   },
-  setup(props) {
+  setup() {
     let innerOptionChecked = null;
     let refFile = null;
-    let updateCountLineFile = computed(() => props.lineCount);
     const { refBoolean: displayChildren, doChangeBoolean: changeDisplayChildren } = useBoolean();
     watch(
       () => innerOptionChecked,
@@ -299,7 +300,6 @@ export default {
       displayChildren,
       refFile,
       innerOptionChecked,
-      updateCountLineFile,
     };
   },
 };
diff --git a/src/components/common/provider/FiltersDataCollapse.vue b/src/components/common/provider/FiltersDataCollapse.vue
index 62ca984f1737410c8e65e0f77485534846d0328d..10b5f9a97431f9cdb9a42e3e91fa1942b381d156 100644
--- a/src/components/common/provider/FiltersDataCollapse.vue
+++ b/src/components/common/provider/FiltersDataCollapse.vue
@@ -45,7 +45,17 @@
               type="search"
               @select="
                 (option) =>
-                  updateValue(columns.id, { componentKey: columns.id, filters: [] }, option)
+                  updateValue(
+                    columns.id,
+                    {
+                      componentKey: columns.parentComponentKey
+                        ? columns.parentComponentKey + '::' + columns.id
+                        : columns.id,
+                      filters: [],
+                      columns: columns,
+                    },
+                    option
+                  )
               "
               @typing="getNewListReferenceValuesWhenFiltered"
             >
@@ -108,14 +118,22 @@
               @blur="
                 updateValue(
                   columns.id,
-                  { componentKey: columns.id, filters: filters[columns.componentKey] },
+                  {
+                    componentKey: columns.id,
+                    filters: filters[columns.componentKey],
+                    columns: columns,
+                  },
                   null
                 )
               "
               @keyup.native.enter="
                 updateValue(
                   columns.id,
-                  { componentKey: columns.id, filters: filters[columns.componentKey] },
+                  {
+                    componentKey: columns.id,
+                    filters: filters[columns.componentKey],
+                    columns: columns,
+                  },
                   null
                 )
               "
@@ -141,12 +159,18 @@
     </div>
     <div class="card-footer">
       <div class="card-footer-item">
-        <b-button expanded icon-left="redo" outlined type="is-danger" @click="clear()"
-                  disabled="!filters.length"
+        <b-button
+          expanded
+          icon-left="redo"
+          outlined
+          type="is-danger"
+          @click="clear()"
+          disabled="!filters.length"
           >{{ $t("dataTypesManagement.réinitialiser") }}
           {{ $t("dataTypesManagement.filtre") }}
         </b-button>
-      </div><!--
+      </div>
+      <!--
       <div class="card-footer-item">
         <b-button
           expanded
@@ -165,7 +189,11 @@
           type="is-primary"
           @click="$emit('download-search', { filters })"
         >
-          {{ filters.length?$t("dataTable.donwload-result-filter"): $t("dataTable.donwload-result") }}
+          {{
+            filters.length
+              ? $t("dataTable.donwload-result-filter")
+              : $t("dataTable.donwload-result")
+          }}
         </b-button>
       </div>
     </div>
@@ -195,7 +223,7 @@ export default {
       type: String,
     },
     isRefLinkTo: {
-      type: Array,
+      type: Object,
       defaults: [],
     },
     columnsToBeShown: {
diff --git a/src/components/datas/DatasLink.vue b/src/components/datas/DatasLink.vue
index eb2e7cfa41aa76168fe24fa8abe6f43c0399b25c..2b6b34628d4659c3b7edce4c429331e73d7a486c 100644
--- a/src/components/datas/DatasLink.vue
+++ b/src/components/datas/DatasLink.vue
@@ -144,11 +144,11 @@ export default {
     watch(() => props.value, getOrLoadReference);
 
     async function getOrLoadReference() {
-      if (props.referenceType && props.value) {
+      if (props.referenceType && (props.value || props.columnId)) {
         const result = await getOrLoadDataByNaturalKey(
           props.application,
           props.referenceType,
-          props.value
+          props.columnId || props.value
         );
         let referenceTypeForReferencingColumns = result.referenceTypeForReferencingColumns;
         if (result.rows.length !== 0) {
diff --git a/src/components/datas/DatasPatternLink.vue b/src/components/datas/DatasPatternLink.vue
index 5bd614905ef9e4f5297cfbdad1bc981e477fd1cb..09b141f5a7c1195c2a7fea8c01efef908abf5b08 100644
--- a/src/components/datas/DatasPatternLink.vue
+++ b/src/components/datas/DatasPatternLink.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div v-if="withQualifier">
     <span v-if="info && showBtnTablePatternColumn(infoValues)">
       <b-button
         size="is-small"
@@ -23,7 +23,7 @@
         <div class="card-header">
           <div class="title card-header-title">
             <p field="name" style="font-size: 1.5rem">
-              {{ columnTitle.match(".*::(.*)")[1] }}
+              {{ columnTitle.match(".*::(.*)") ? columnTitle.match(".*::(.*)")[1] : columnTitle }}
             </p>
           </div>
         </div>
@@ -68,9 +68,13 @@
       </div>
     </b-modal>
   </div>
+  <div v-else>
+    {{ patternLinkHeader }}
+  </div>
 </template>
 
 <script>
+import services from "@/composable/services";
 import useBoolean from "@/composable/components/boolean";
 import DatasLink from "@/components/datas/DatasLink.vue";
 import { computed } from "vue";
@@ -79,6 +83,7 @@ export default {
   name: "DatasPatternLink",
   components: { /*LoadingAnimate, DatasManyLink, */ DatasLink },
   props: {
+    withQualifier: Boolean,
     application: Object,
     columnTitle: String,
     value: Array,
@@ -109,8 +114,27 @@ export default {
         });
       return showModal.length !== 0;
     }
+    const patternLinkHeader = computed(() => {
+      console.log(
+        "dataid",
+        props.dataId,
+        "columntitle",
+        props.columnTitle,
+        "application",
+        props.application
+      );
+      //application.configuration.i18n.data.t_swc_swc.components.swc_variable.exportHeader.title.fr
+      return services.internationalisationService.localeReferenceColumnsNames(
+        props.dataId,
+        props.columnTitle,
+        props.application
+      );
+    });
 
-    const columnName = computed(() => props.columnTitle.match(".*::(.*)")[1]);
+    const columnName = computed(() => {
+      let pattern = props.columnTitle.match(".*::(.*)");
+      return pattern ? pattern[1] : props.columnTitle;
+    });
 
     async function showModal() {
       isLoading.value = true;
@@ -118,7 +142,9 @@ export default {
       isLoading.value = false;
       return props.value;
     }
+
     return {
+      patternLinkHeader,
       columnName,
       isLoading,
       isCardModalActive,
diff --git a/src/locales/en.json b/src/locales/en.json
index cfb44a738ee1c32fc3d1cad6781bb0bf27f55596..0905b9461e0db033d694568c3a019efdcafc3193 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -125,7 +125,7 @@
     "app_update_version": "Version of {name} proposed is: {version}",
     "change": "Update",
     "register-rows": "No records | Only one record | About {totalRows} records available",
-    "no-right-for-application": "you have no rights to view this data",
+    "no-right-for-application": "Your rights are insufficient to view this data",
     "charte_message": "I have read and accept the conditions of use of the data.",
     "charte_header": "To access the {localName} application, you must accept the conditions of use.",
     "chose-config": "Chose a configuration",
@@ -273,6 +273,8 @@
     "filter-auth-by-name": "Filter by authorization name"
   },
   "dataTypesManagement": {
+    "horizontalized": "Horizontalized data",
+    "verticalized": "Verticalized data",
     "ASC": "ASC",
     "DESC": "DESC",
     "accepted": "Accepted",
diff --git a/src/locales/fr.json b/src/locales/fr.json
index 7c1a02d548ce21fa776b75f2bbc5af25ab8542da..0787332661fc05b0acadc50d6485603058f8aa0a 100644
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@@ -125,7 +125,7 @@
     "app_update_version": "Version de {name} proposée est : {version}",
     "change": "Mise à jour",
     "register-rows": "Aucun enregistrement  | Un seul enregistrement | Environ {totalRows} enregistrements disponibles",
-    "no-right-for-application": "vous n'avez pas de droits vous premettant de consulter ces données",
+    "no-right-for-application": "Vos droits sont insuffisants pour consulter ces données",
     "charte_message": "J'ai lu et j'accepte les conditions d'utilisation des données.",
     "charte_header": "Pour accéder à l'application {localName}, vous devez accepter les conditions d'utilisation.",
     "chose-config": "Choisir une configuration",
@@ -274,6 +274,8 @@
     "filter-auth-by-name": "Filtre par nom d'autorisation"
   },
   "dataTypesManagement": {
+    "horizontalized": "Données horizontalisées",
+    "verticalized": "Données verticalisées",
     "ASC": "ASC",
     "DESC": "DESC",
     "accepted": "Accepté",
diff --git a/src/model/ApplicationResult.js b/src/model/ApplicationResult.js
index 2acd89713c8b4879498a7b20bd62842d55214a3a..9575401ce6ae103b87bb1f48be89e204b570ffd5 100644
--- a/src/model/ApplicationResult.js
+++ b/src/model/ApplicationResult.js
@@ -40,15 +40,29 @@ export class ApplicationResult {
   data = {};
   additionalFile = {};
   configuration = {};
-  configFile;
   currentApplicationUserRolesResult = {};
   hasSignedCharte = false;
   hasSignedLastCharte = false;
-  authorizations = {};
-  dependantNodesByDataName = {};
   internationalization = {};
+  dependantNodesByDataName = {};
   orderedReferences = {};
   referenceSynthesis = {};
+  canReadReference;
+  canWriteReference;
+  canReadDatatype;
+  canWriteDatatype;
+  authorizations = {
+    idRef: {
+      ACTIVE_APPLICATION_USER: false,
+      ANY: false,
+      APPLICATION_USER: false,
+      DELETE: false,
+      DOWNLOAD: false,
+      PUBLICATION: false,
+      READ: false,
+      UPLOAD: false,
+    },
+  };
 
   isApplicationUser() {
     return (
@@ -93,5 +107,11 @@ export class ApplicationResult {
     let charteTimeStamp = User.STORED_AUTHENTICATED_USER()?.chartes?.[application.id];
     this.hasSignedLastCharte = new Date().getTime() > charteTimeStamp;
     this.hasSignedCharte = charteTimeStamp;
+    this.authorizations = application.authorizations;
+
+    this.canReadReference = application.canReadReference;
+    this.canWriteReference = application.canWriteReference;
+    this.canReadDatatype = application.canReadDatatype;
+    this.canWriteDatatype = application.canWriteDatatype;
   }
 }
diff --git a/src/model/application/Application.js b/src/model/application/Application.js
index a76c75d083f4850127ae0baad1c6eb8879639b63..0962ebb9b9aa38fd73ea3b4f892fbee664c6e40c 100644
--- a/src/model/application/Application.js
+++ b/src/model/application/Application.js
@@ -1,6 +1,6 @@
 export class Application {
   id;
-  localName = "toto";
+  localName;
   creationDate;
   updateDate;
   name;
@@ -15,15 +15,63 @@ export class Application {
   currentApplicationUserRolesResult = {};
   hasSignedCharte = false;
   hasSignedLastCharte = false;
+  dataSyntheses = {};
+  canWriteReference = false;
+  canReadReference = false;
+  canWriteDatatype = false;
+  canReadDatatype = false;
 
   static of(result) {
     const application = new Application(result.application);
     application.currentApplicationUserRolesResult = result.currentApplicationUserRolesResult;
     application.hasSignedCharte = result.hasSignedCharte;
     application.hasSignedLastCharte = result.hasSignedLastCharte;
+    application.dataSyntheses = (result.dataSyntheses || []).reduce((acc, synthesis) => {
+      acc[synthesis.referenceType] = synthesis.lineCount;
+      return acc;
+    }, {});
+
+    application.canWriteReference = application.hasReferenceToWrite();
+    application.canReadReference = application.hasReferenceToRead();
+    application.canWriteDatatype = application.hasDatatypeToWrite();
+    application.canReadDatatype = application.hasDatatypeToRead();
     return application;
   }
 
+  hasReferenceToRead() {
+    let applicationRoles = this.currentApplicationUserRolesResult.applicationRoles;
+    let datasyntheses = this.dataSyntheses;
+    return this.references
+      .map((reference) => {
+        let reader = applicationRoles?.includes("reader") && datasyntheses[reference] > 0;
+        let writer = applicationRoles?.includes("writer");
+        return reader || writer;
+      })
+      .reduce((acc, reader) => acc || reader, false);
+  }
+
+  hasReferenceToWrite() {
+    let applicationRoles = this.currentApplicationUserRolesResult.applicationRoles;
+    return applicationRoles?.includes("writer");
+  }
+
+  hasDatatypeToRead() {
+    let applicationRoles = this.currentApplicationUserRolesResult.applicationRoles;
+    let datasyntheses = this.dataSyntheses;
+    return this.dataTypes
+      .map((reference) => {
+        let reader = applicationRoles?.includes("reader") && datasyntheses[reference] > 0;
+        let writer = applicationRoles?.includes("writer");
+        return reader || writer;
+      })
+      .reduce((acc, reader) => acc || reader, false);
+  }
+
+  hasDatatypeToWrite() {
+    let applicationRoles = this.currentApplicationUserRolesResult.applicationRoles;
+    return applicationRoles?.includes("writer");
+  }
+
   isApplicationUser() {
     return (
       this.currentApplicationUserRolesResult?.applicationRoles?.includes("applicationManager") ||
@@ -56,6 +104,15 @@ export class Application {
     this.additionalFile = application.additionalFiles;
     this.configuration = application.configuration;
     this.configFile = application.configFile;
+    this.canReadReference = application.canReadReference;
+    this.canWriteReference = application.canWriteReference;
+    this.canReadDatatype = application.canReadDatatype;
+    this.canWriteDatatype = application.canWriteDatatype;
+    this.localName = application.localName;
+    this.currentApplicationUserRolesResult = application.currentApplicationUserRolesResult || {};
+    this.hasSignedCharte = application.hasSignedCharte || false;
+    this.hasSignedLastCharte = application.hasSignedLastCharte || false;
+    this.dataSyntheses = application.dataSyntheses || {};
 
     const configuration = application.configuration;
     for (const dataName in configuration?.dataDescription || {}) {
diff --git a/src/model/application/Component.js b/src/model/application/Component.js
index 22838f5773972a51db8a09f85caf45ca678a81ec..5dc2c9c2097b981b2500d553002dd0dc7bae9f7d 100644
--- a/src/model/application/Component.js
+++ b/src/model/application/Component.js
@@ -214,6 +214,7 @@ class PatternComponent extends Component {
   patternQualifierComponents;
   originalName;
   rowId;
+  horizontalDisplay = true;
 
   constructor(
     type,
@@ -255,13 +256,28 @@ class PatternComponent extends Component {
   }
 
   getHeader() {
-    return this.originalName;
+    return this.originalName || this.exportHeader;
   }
 
+  getDisplayValue = function (row) {
+    let columnValue = this.getColumnValue(row);
+    let displaysForRow = row.displaysForRow?.[this.refLinkedTo]?.[row.values[this.id]];
+    if (displaysForRow && typeof columnValue !== "number") {
+      return displaysForRow;
+    } else {
+      return "" + columnValue;
+    }
+  };
+
   getColumnValue(row) {
-    let pattern = this.id.match("(.*?)::(.*)");
-    return row.values[pattern[1]]?.find((column) => column.__ORIGINAL_COLUMN_NAME__ == pattern[2])
-      ?.__VALUE__;
+    if (this.horizontalDisplay)
+      if (this.horizontalDisplay) {
+        let pattern = this.id.match("(.*?)::(.*)");
+        return row.values[pattern[1]]?.find(
+          (column) => column.__ORIGINAL_COLUMN_NAME__ == pattern[2]
+        ).__VALUE__;
+      }
+    return row.values[this.componentKey]?.[0]?.__VALUE__;
   }
 
   componentsForValue(value, row) {
@@ -290,22 +306,37 @@ class PatternComponent extends Component {
   }
 
   getColumnQualifiersMap(application, dataId, row) {
-    let pattern = this.id.match("(.*)::(.*)");
-    let value = row.values[pattern[1]].find(
-      (component) => pattern[2] == component.__ORIGINAL_COLUMN_NAME__
-    );
-    let qualifiers = this.patternQualifierComponents.map((col) => {
-      let columnName = col.getHeader(application, dataId, col.id);
-      let returnValue = {
-        component: col,
-        column: col.id,
-        columnName,
-        value: value[col.id],
-        id: col.id,
-      };
-      returnValue[col.id] = value[col.id];
-      return returnValue;
-    }, []);
+    let qualifiers;
+    if (dataId) {
+      let pattern = this.id.match("(.*)::(.*)");
+      let value;
+      if (pattern) {
+        value = row.values[pattern[1]].find(
+          (component) => pattern[2] == component.__ORIGINAL_COLUMN_NAME__
+        );
+      } else {
+        value = row?.values?.[dataId]?.[0];
+      }
+      qualifiers = this.patternQualifierComponents.map((col) => {
+        let columnName;
+        if (this.horizontalDisplay) {
+          columnName = col.getHeader(application, dataId, col.id);
+        } else {
+          columnName = dataId;
+        }
+        let returnValue = {
+          component: col,
+          column: col.id,
+          columnName,
+          value: value[col.id],
+          id: col.id,
+        };
+        returnValue[col.id] = value[col.id];
+        return returnValue;
+      }, []);
+    } else {
+      qualifiers = this.patternQualifierComponents;
+    }
 
     return qualifiers;
   }
@@ -337,7 +368,18 @@ class PatternQualifierComponent extends Component {
     } else if (this.id.match(".*::.*")) {
       return this._getInternationalizedColumn(dataId, this.id, application);
     }
-    return "PatternQualifierComponent non trouvé";
+    return this._getInternationalizedColumn(dataId, this.id, application);
+  }
+
+  getColumnValue(row) {
+    let pattern = this.id.match("(.*)::(.*)::(.*)");
+    if (pattern) {
+      return row.values[pattern[1]]?.find(
+        (column) => column.__ORIGINAL_COLUMN_NAME__ == pattern[3]
+      )?.[pattern[2]];
+    }
+    let value = row.values?.[this.parentComponentKey]?.[0]?.[this.id];
+    return row.displaysForRow?.[this.refLinkedTo]?.[value] || value;
   }
 }
 
diff --git a/src/services/AlertService.js b/src/services/AlertService.js
index 57eeb448bf2fb181c167d24114fa9dd250f259ed..56126959455eba801353213f0d0726c9f027c986 100644
--- a/src/services/AlertService.js
+++ b/src/services/AlertService.js
@@ -17,7 +17,7 @@ export class AlertService {
       message: message,
       type: BuefyTypes.SUCCESS,
       duration: TOAST_INFO_DURATION,
-      position: TOAST_POSITION
+      position: TOAST_POSITION,
     });
   }
 
@@ -27,7 +27,7 @@ export class AlertService {
       message: message,
       type: BuefyTypes.WARNING,
       duration: TOAST_ERROR_DURATION,
-      position: TOAST_POSITION
+      position: TOAST_POSITION,
     });
   }
 
@@ -41,7 +41,7 @@ export class AlertService {
               message: i18n.t("applications.no-right-for-application"),
               type: BuefyTypes.DANGER,
               duration: TOAST_ERROR_DURATION,
-              position: TOAST_POSITION
+              position: TOAST_POSITION,
             });
             t = "NO-RIGHTS";
           } else {
@@ -49,7 +49,7 @@ export class AlertService {
               message: i18n.t("exceptionMessage." + t),
               type: BuefyTypes.DANGER,
               duration: TOAST_ERROR_DURATION,
-              position: TOAST_POSITION
+              position: TOAST_POSITION,
             });
           }
         } else if ("NO_RIGHT_FOR_APPLICATION_MANAGEMENT" === t.message) {
@@ -65,7 +65,7 @@ export class AlertService {
             message: i18n.t("exceptionMessage." + message, params),
             type: BuefyTypes.DANGER,
             duration: TOAST_ERROR_DURATION,
-            position: TOAST_POSITION
+            position: TOAST_POSITION,
           });
         }
         if (state) state.value = t;
@@ -75,7 +75,7 @@ export class AlertService {
         message: message,
         type: BuefyTypes.DANGER,
         duration: TOAST_ERROR_DURATION,
-        position: TOAST_POSITION
+        position: TOAST_POSITION,
       });
     }
   }
@@ -88,8 +88,7 @@ export class AlertService {
     }
   }
 
-  dialog(title, message, confirmText, type = "warning", cancelMsg, onConfirmCb = () => {
-  }) {
+  dialog(title, message, confirmText, type = "warning", cancelMsg, onConfirmCb = () => {}) {
     DialogProgrammatic.confirm({
       title: title,
       message: message,
@@ -99,7 +98,7 @@ export class AlertService {
       cancelText: cancelMsg,
       onConfirm: () => {
         onConfirmCb();
-      }
+      },
     });
   }
 }
diff --git a/src/services/InternationalisationService.js b/src/services/InternationalisationService.js
index fb8312401d73c8f60a0938f948085fcb11ffd95c..8ced452bf7f1b2bbb04ce18053075fd7ed471b50 100644
--- a/src/services/InternationalisationService.js
+++ b/src/services/InternationalisationService.js
@@ -181,7 +181,7 @@ export class InternationalisationService extends Fetcher {
         for (let applicationReference in applicationReferences) {
           if (applicationReference === referenceColumnName) {
             let defaultValue = forDescription ? null : referenceColumnName;
-            referenceColumnName++;
+            //referenceColumnName++;
             return (
               applicationReferences[applicationReference].i18n?.[
                 forDescription ? "description" : "title"
@@ -202,7 +202,7 @@ export class InternationalisationService extends Fetcher {
         ?.exportHeader;
     if (exportHeader) {
       let defaultValue = forDescription ? null : columnName;
-      columnName++;
+      //columnName++;
       localColumnName =
         exportHeader?.[forDescription ? "description" : "title"]?.[
           localStorage.getItem(LOCAL_STORAGE_LANG)
diff --git a/src/views/application/ApplicationInfoView.vue b/src/views/application/ApplicationInfoView.vue
index 7d433822108f4052c9635be0e46d69c6db2bb9ab..8b82789c46276140f4b6242f04afbbfeda000d09 100644
--- a/src/views/application/ApplicationInfoView.vue
+++ b/src/views/application/ApplicationInfoView.vue
@@ -89,6 +89,16 @@ export default {
       authorizationsManagementForApplicationUsers,
       showRequestRights,
     } = useRedirections(application);
+    const canReadReferences = computed(() =>
+      Object.keys(application.references).filter(
+        (reference) => application?.authorizations?.[reference]?.READ
+      )
+    );
+    const canReadDataTypes = computed(() =>
+      Object.keys(application.dataTypes).filter(
+        (dataType) => application?.authorizations?.[dataType]?.READ
+      )
+    );
 
     onMounted(async () => {
       await init();
@@ -134,12 +144,12 @@ export default {
             : application?.currentApplicationUserRolesResult?.isOpenAdomAdmin
         );
         changeCanManagerApplication(
-          application?.currentApplicationUserRolesResult?.applicationRoles.includes(
+          application?.currentApplicationUserRolesResult?.applicationRoles?.includes(
             "applicationManager"
           )
         );
         changeCanManagerUser(
-          application?.currentApplicationUserRolesResult?.applicationRoles.includes("userManager")
+          application?.currentApplicationUserRolesResult?.applicationRoles?.includes("userManager")
         );
       } catch (error) {
         console.log("missing admin application rights", error);
@@ -147,6 +157,8 @@ export default {
     }
 
     return {
+      canReadReferences,
+      canReadDataTypes,
       createApplication,
       updateApplication,
       downloadApplicationUploadBundle,
@@ -431,6 +443,7 @@ export default {
             class="buttonWarper"
           >
             <b-button
+              :disabled="!canReadReferences.length"
               class="column"
               icon-left="drafting-compass"
               type="is-primary"
@@ -443,6 +456,7 @@ export default {
             class="buttonWarper"
           >
             <b-button
+              :disabled="!canReadDataTypes.length"
               class="column"
               icon-left="poll"
               type="is-primary"
diff --git a/src/views/application/ApplicationsView.vue b/src/views/application/ApplicationsView.vue
index a9e9221ae252c5c1595bf42f1d69d2b421b37f77..72ecabb952c09afa34c589f75e18c9359399b0f1 100644
--- a/src/views/application/ApplicationsView.vue
+++ b/src/views/application/ApplicationsView.vue
@@ -126,6 +126,9 @@
         <div class="columns">
           <ApplicationCard
             v-for="(application, index) in selectedApplications"
+            :application-roles="
+              application?.currentApplicationUserRolesResult?.applicationRoles || []
+            "
             :key="application.name"
             :application="application"
             :current="current"
@@ -165,9 +168,15 @@ import { computed, onMounted, inject } from "vue";
 import { useRedirections } from "@/composable/applications/useFunction";
 import ApplicationCard from "@/components/application/ApplicationCard.vue";
 import useNumber from "@/composable/components/number";
+import { Application } from "@/model/application/Application";
 
 export default {
   name: "ApplicationsView",
+  computed: {
+    Application() {
+      return Application;
+    },
+  },
   components: { ApplicationCard, LoadingAnimate, PageView },
   setup() {
     const { createApplication, updateApplication, displayAdditionalFilesManagement } =
diff --git a/src/views/authorizations/AuthorizationsRightsRequestInfoView.vue b/src/views/authorizations/AuthorizationsRightsRequestInfoView.vue
index d20124ccf354d8a814e45235881a3911987e95b2..bda8904e1f55f034faf2ca30d466a29c1c0976d8 100644
--- a/src/views/authorizations/AuthorizationsRightsRequestInfoView.vue
+++ b/src/views/authorizations/AuthorizationsRightsRequestInfoView.vue
@@ -380,7 +380,7 @@ export default {
           currentUser.value = [
             request.users.find(
               (user) =>
-                user.id ===
+                user?.id ===
                 ((request &&
                   request.rightsRequests &&
                   request.rightsRequests[0] &&
@@ -533,16 +533,16 @@ export default {
         }
       }
       let usersId;
-      let authenticatedUserId = User.STORED_AUTHENTICATED_USER().id;
+      let authenticatedUserId = User.STORED_AUTHENTICATED_USER()?.id;
       if (
-        (currentUser.value.id && currentUser.value.id !== authenticatedUserId) ||
-        (currentUser.value[0] && currentUser.value[0].id !== authenticatedUserId)
+        (currentUser.value?.id && currentUser.value?.id !== authenticatedUserId) ||
+        (currentUser.value[0] && currentUser.value[0]?.id !== authenticatedUserId)
       ) {
-        usersId = currentUser.value.id
-          ? [currentUser.value.id, authenticatedUserId]
-          : [currentUser.value[0].id, authenticatedUserId];
+        usersId = currentUser.value?.id
+          ? [currentUser.value?.id, authenticatedUserId]
+          : [currentUser.value[0]?.id, authenticatedUserId];
       } else {
-        usersId = [currentUser.value.id ? currentUser.value.id : currentUser.value[0].id];
+        usersId = [currentUser.value?.id ? currentUser.value?.id : currentUser.value[0]?.id];
       }
       return {
         uuid: props.authorizationId === "new" ? null : props.authorizationId,
@@ -635,7 +635,7 @@ export default {
             currentUser.value.label ? currentUser.value.label : currentUser.value[0].label
           }`,
           description: description.value,
-          usersId: [currentUser.value[0].id, User.STORED_AUTHENTICATED_USER()?.id],
+          usersId: [currentUser.value[0]?.id, User.STORED_AUTHENTICATED_USER()?.id],
           authorizationForAll,
           authorizationsWithRestriction,
         };
diff --git a/src/views/authorizations/DataTypeAuthorizationsView.vue b/src/views/authorizations/DataTypeAuthorizationsView.vue
index de80ee779e53f8ee9f62278d50cb0396344c008a..ea6054af732e0f781dcf5ad17673b9b8d77216cb 100644
--- a/src/views/authorizations/DataTypeAuthorizationsView.vue
+++ b/src/views/authorizations/DataTypeAuthorizationsView.vue
@@ -341,7 +341,7 @@
                   <a class="card-header-icon" style="padding-left: 0; padding-right: 0">
                     <b-button
                       class="show-check-details"
-                      disabled
+                      :disabled="!isApplicationManager"
                       icon-left="times-circle"
                       size="is-small"
                       style="
@@ -355,6 +355,7 @@
                     >
                     </b-button>
                     <b-button
+                      :disabled="!isUserManager"
                       class="show-check-details"
                       icon-left="pen-square"
                       onmouseout="style.color='';"
diff --git a/src/views/authorizations/RequestAuthorizationManagementView.vue b/src/views/authorizations/RequestAuthorizationManagementView.vue
index 74f7e5772f33cf8b1dfb8706b10e711e121345a4..1c4d895052f5aeb4e2af64428ecb6f65d93e4c66 100644
--- a/src/views/authorizations/RequestAuthorizationManagementView.vue
+++ b/src/views/authorizations/RequestAuthorizationManagementView.vue
@@ -54,6 +54,46 @@
             </p>
           </template>
         </b-table-column>
+        <b-table-column :searchable="true" field="comment" label="Commentaire" sortable>
+          <template #searchable="props">
+            <b-input
+              v-model="props.filters[props.column.field]"
+              :placeholder="$t('dataTypeAuthorizations.search')"
+              icon="search"
+            />
+          </template>
+          <template v-slot="props">
+            <a @click="manageRequest(props.row.id)" class="is-flex is-align-content-center">
+              <b-icon icon="pen-square" size="is-small"></b-icon>
+              <span class="with-padding">{{ props.row.comment }}</span>
+            </a>
+          </template>
+        </b-table-column>
+        <b-table-column :searchable="true" field="createDate" label="Date de création" sortable>
+          <template #searchable="props">
+            <b-input
+              v-model="props.filters[props.column.field]"
+              :placeholder="$t('dataTypeAuthorizations.search')"
+              icon="search"
+            />
+          </template>
+          <template v-slot="props">
+            {{ formatDate(props.row.createDate) }}
+          </template>
+        </b-table-column>
+        <b-table-column :searchable="true" field="updateDate" label="Date de création" sortable>
+          <template #searchable="props">
+            <b-input
+              v-model="props.filters[props.column.field]"
+              :placeholder="$t('dataTypeAuthorizations.search')"
+              icon="search"
+            />
+          </template>
+          <template v-slot="props">
+            {{ formatDate(props.row.updateDate) }}
+          </template>
+        </b-table-column>
+        <!--
         <b-table-column :searchable="true" field="number request" label="N° de la demande" sortable>
           <template #searchable="props">
             <b-input
@@ -68,6 +108,7 @@
             </a>
           </template>
         </b-table-column>
+-->
         <b-table-column :searchable="true" field="setted" label="Statut" sortable>
           <template #searchable>
             <b-select
@@ -250,8 +291,13 @@ export default {
     function manageRequest(id) {
       app.$router.push(`/applications/${props.applicationName}/authorizationsRequest/${id}`);
     }
+    function formatDate(date) {
+      if (!date) return "";
+      return moment(date).format("DD/MM/YYYY");
+    }
 
     return {
+      formatDate,
       manageRequest,
       isVisibleRequest,
       getUserEmail,
@@ -292,4 +338,7 @@ td {
 .listAuthorization:nth-child(odd) {
   background-color: #f5f5f5;
 }
+.with-padding {
+  padding-left: 1em;
+}
 </style>
diff --git a/src/views/data/DataTableView.vue b/src/views/data/DataTableView.vue
index 518940406de0b327796120e9f28493a059a281b8..9d3f8384851de44f8acefd09b8b9ae18b513f135 100644
--- a/src/views/data/DataTableView.vue
+++ b/src/views/data/DataTableView.vue
@@ -12,7 +12,7 @@
       :localName="application.localRefName"
       :local-title="$t('titles.references-data', { refName: application.localRefName })"
     />
-    <div id="tagsCollapse" class="column">
+    <div id="tagsCollapsereal" class="column">
       <TagsCollapse
         v-if="hasTags"
         :tags="tags"
@@ -20,11 +20,11 @@
         @change:allTags="changeAllValueTags($event)"
       />
     </div>
-    <div v-if="state!=='NO-RIGHTS'">
+    <div v-if="state !== 'NO-RIGHTS'">
       <FiltersDataCollapse
         :application="application"
         :application-name="applicationName"
-        :columns-to-be-shown="dataColumnsToBeShown"
+        :columns-to-be-shown="dataColumnsForFilters"
         :data-id="dataId"
         :is-ref-link-to="referenceTypeForReferencingColumns"
         @view-search="recalculate($event)"
@@ -32,7 +32,14 @@
         @clear-search="clear($event)"
       />
       <LoadingAnimate v-if="isLoading" :size="'is-large'"></LoadingAnimate>
-      <div v-if="data && dataColumnsToBeShown && !isLoading && totalRows<101">
+      <div v-if="data && dataColumnsToBeShown && !isLoading && totalRows > 0">
+        <b-switch v-if="canHorizontalize" v-model="horizontalDisplay" @input="changeDisplay">
+          {{
+            horizontalDisplay
+              ? $t("dataTypesManagement.horizontalized")
+              : $t("dataTypesManagement.verticalized")
+          }}
+        </b-switch>
         <b-table
           id="filtreTable"
           :current-page="currentPage"
@@ -61,16 +68,32 @@
                 </TagsInfos>
                 <DatasPatternLink
                   v-if="'PatternComponent' === column.type"
+                  :with-qualifier="horizontalDisplay"
                   :info="column.type === 'PatternComponent'"
                   :application="application"
-                  :value="column.getColumnQualifiersMap(application, dataId, rows[0])"
+                  :value="
+                    column.getColumnQualifiersMap(
+                      application,
+                      column.horizontalDisplay ? dataId : column.componentKey,
+                      rows[0]
+                    )
+                  "
                   :column-id="column.id"
                   :column-title="column.id"
-                  :info-values="column.getColumnQualifiersMap(application, dataId, rows[0])"
+                  :info-values="
+                    column.getColumnQualifiersMap(
+                      application,
+                      column.horizontalDisplay ? dataId : column.componentKey,
+                      rows[0]
+                    )
+                  "
                   :loaded-references-by-key="{}"
                   :pattern-checker-date-ref="patternCheckerDateRef"
                   :data-id="dataId"
                 ></DatasPatternLink>
+                <div v-else-if="'patternQualifierComponent' === column.type">
+                  {{ column.getHeader(application, dataId) }}
+                </div>
                 <div v-else>
                   {{ column.getHeader(application, dataId) }}
                 </div>
@@ -123,7 +146,9 @@
                 :value="'' + column.getColumnValue(props.row)"
               ></DatasLink>
               <div v-else class="columns">
-                <a @click="askDeletionConfirmation(rows[tableValues.indexOf(props.row)]?.naturalKey)">
+                <a
+                  @click="askDeletionConfirmation(rows[tableValues.indexOf(props.row)]?.naturalKey)"
+                >
                   <b-icon class="clickable" icon="times-circle" size="is-small" type="is-danger">
                   </b-icon>
                 </a>
@@ -155,17 +180,17 @@
           type="is-primary"
           icon-left="download"
           @click.prevent="downloadResultSearch"
-        >{{ $t("dataTable.donwload-result") }}
+          >{{ $t("dataTable.donwload-result") }}
         </b-button>
       </div>
     </div>
 
-    <div v-else-if="state==='NO-RIGHTS'">
+    <div v-else-if="state === 'NO-RIGHTS'">
       <b-message type="is-danger" :closable="false" size="is-medium" has-icon>
         {{ $t("applications.no-right-for-application") }}
       </b-message>
       <b-button
-        class="mt-3 "
+        class="mt-3"
         type="is-primary"
         @click="$router.push('../authorizationsRequest/new')"
       >
@@ -176,7 +201,6 @@
       <b-message type="is-primary" :closable="false" size="is-medium" has-icon>
         {{ $tc("applications.register-rows", totalRows, { totalRows: totalRows }) }}
       </b-message>
-
     </div>
   </PageView>
 </template>
@@ -215,7 +239,7 @@ export default {
   name: "DataTableView",
   props: {
     applicationName: String,
-    dataId: String
+    dataId: String,
   },
   components: {
     TitleAndDescription,
@@ -228,7 +252,7 @@ export default {
     TagsCollapse,
     DatasLink,
     DatasManyLink,
-    DatasDynamicLink
+    DatasDynamicLink,
   },
   setup(props) {
     const loadExample = ref(true);
@@ -242,6 +266,9 @@ export default {
     const { shallowRefArray: errorsMessages } = useArray();
     const { refNumber: currentPage, doChangeNumber: changeCurrentPage } = useNumber(1);
     const { refBoolean: isLoading, doChangeBoolean: changeIsLoading } = useBoolean();
+    const { refBoolean: horizontalDisplay, doChangeBoolean: changeHorizontalDisplay } =
+      useBoolean();
+    const canHorizontalize = ref(false);
     const { reactiveObject: application, doChangeObject: changeApplication } = useObject(
       new ApplicationResult()
     );
@@ -252,7 +279,7 @@ export default {
     const { shallowRefArray: tableValues, doChangeArray: changeTableValues } = useArray();
     const { shallowRefArray: tags, doChangeArray: _changeTags } = useArray();
     const { shallowRefArray: filters, doAddToArray: pushFilters } = useArray();
-    const { shallowRefArray: referenceTypeForReferencingColumns } = useArray();
+    const { reactiveObject: referenceTypeForReferencingColumns } = useObject();
     const { reactiveObject: referencesDynamic, doChangeObject: changeReferencesDynamic } =
       useObject();
     const tableHeight = computed(() => {
@@ -278,9 +305,36 @@ export default {
         return services.tagService.toBeShown(tags.value, realVariables.value);
       }
     });
+    const dataColumnsForFilters = computed(() => {
+      let colomnsForFilters = columns.value.reduce((acc, column) => {
+        if (column.type === "PatternComponent") {
+          column.horizontalDisplay = false;
+          acc.push(column);
+          column
+            .getColumnQualifiersMap(application, null, rows.value[0])
+            .forEach((qualifier) => acc.push(qualifier));
+        } else if (column.type !== "PatternAdjacentComponent") {
+          acc.push(column);
+        }
+        return acc;
+      }, []);
+      let navigateurName = navigator.userAgent;
+      if (navigateurName.indexOf("Firefox") >= 1) {
+        return services.tagService.toBeShownDataColumns(tags.value, colomnsForFilters);
+      } else if (navigateurName.indexOf("Safari") >= 1 && navigateurName.indexOf("Chrome") >= 1) {
+        return services.tagService.toBeShown(tags.value, colomnsForFilters);
+      } else {
+        console.log(
+          "Votre navigateur n'est pas testé l'ordonnance des filtres est par défault",
+          navigateurName
+        );
+
+        return services.tagService.toBeShown(tags.value, colomnsForFilters);
+      }
+    });
 
     const hasTags = useBoolean(false).refBoolean;
-    const changeTags = function(tagsToChange) {
+    const changeTags = function (tagsToChange) {
       _changeTags({ ...tagsToChange });
       hasTags.value =
         tags.value &&
@@ -309,11 +363,17 @@ export default {
       if (column.referenceType === "ReferenceChecker") {
         let refLinkedTo = column.refLinkedTo;
         let refLinkedToColumn = column.refLinkedToColumn;
-        let refsLinkedToElementElementElement =
-          row?.refsLinkedTo?.[refLinkedTo]?.[refLinkedToColumn]?.[0];
-        /*if (!refsLinkedToElementElementElement) {
-          console.log("refsLinkedToElementElementElement", column);
-        }*/
+        let refsLinkedToElementElementElement = row?.refsLinkedTo?.[refLinkedTo];
+        if (refsLinkedToElementElementElement?.[refLinkedToColumn]) {
+          refsLinkedToElementElementElement =
+            refsLinkedToElementElementElement?.[refLinkedToColumn]?.[0];
+        } else {
+          refLinkedToColumn = Object.keys(refsLinkedToElementElementElement || {}).find((key) =>
+            key.match(".*::(.*)::.*")
+          );
+          refsLinkedToElementElementElement =
+            refsLinkedToElementElementElement?.[refLinkedToColumn].hierarchicalKey.sql;
+        }
         return refsLinkedToElementElementElement;
       }
     }
@@ -337,7 +397,7 @@ export default {
               `/applications/${props.applicationName}/${dataIsType}/${props.dataId}`
             ),
           () => app.$router.push(`/applications/${props.applicationName}/${dataIsType}`)
-        )
+        ),
       ]);
       changeColumns(services.tagService.toBeShown(tags.value, columns.value));
       changeTags(buildTagsColumns(application, columns.value, tags.value));
@@ -349,7 +409,7 @@ export default {
         changeApplication(
           await services.applicationService.getApplication(props.applicationName, [
             "CONFIGURATION",
-            "REFERENCETYPE"
+            "REFERENCETYPE",
           ])
         );
         changeApplication({
@@ -358,28 +418,35 @@ export default {
           localRefDescription:
             application.configuration.i18n.data[props.dataId].i18n.description[locale],
         });
-        totalRows.value = application.referenceSynthesis.find(synthesis => synthesis.referenceType === props.dataId)?.lineCount || 0;
+        totalRows.value =
+          application.referenceSynthesis.find(
+            (synthesis) => synthesis.referenceType === props.dataId
+          )?.lineCount || 0;
         const data = await services.dataService.getData(
           props.applicationName,
           props.dataId,
           {
+            horizontalDisplay: horizontalDisplay.value,
             offset: params.offset,
-            limit: params.limit
+            limit: params.limit,
           },
           loadExample.value
         );
+
+        canHorizontalize.value = data.patternDefinitionCount >= 1;
+        changeHorizontalDisplay(data.patternDefinitionCount > 1);
         if (data) {
           //let dataValues = data.rows;
           //totalRows.value = data.totalRows;
           //changeRows(dataValues);
           if (Object.keys(data?.referenceTypeForReferencingColumns).length > 0) {
             for (let key in data.referenceTypeForReferencingColumns) {
-              referenceTypeForReferencingColumns.value[key] =
+              referenceTypeForReferencingColumns[key] =
                 data.referenceTypeForReferencingColumns[key];
             }
           }
         }
-        await updateData({"filters":[]}, data, false, totalRows);
+        await updateData({ filters: [] }, data, false, totalRows);
       } catch (error) {
         services.alertService.toastServerError(error, state);
       }
@@ -389,12 +456,20 @@ export default {
     const realVariables = computed(() => {
       return columns.value.reduce((acc, column) => {
         if (column.type === "PatternComponent") {
-          let row = rows.value[0];
-          row.values[column.id]
-            .map((value) => column.componentsForValue(value, row))
-            .forEach((col) => {
-              col.forEach((col2) => acc.push(col2));
-            });
+          if (horizontalDisplay.value) {
+            let row = rows.value[0];
+            row.values[column.id]
+              .map((value) => column.componentsForValue(value, row))
+              .forEach((col) => {
+                col.forEach((col2) => acc.push(col2));
+              });
+          } else {
+            column.horizontalDisplay = false;
+            acc.push(column);
+            column
+              .getColumnQualifiersMap(application, null, rows.value[0])
+              .forEach((qualifier) => acc.push(qualifier));
+          }
         } else if (column.type !== "PatternAdjacentComponent") {
           acc.push(column);
         }
@@ -458,7 +533,7 @@ export default {
           .reduce((accumulator, component) => {
             accumulator.push(component);
             return accumulator;
-          }, [])
+          }, []),
       ];
       changeColumns(localColumns);
       if (rows.value) {
@@ -490,7 +565,9 @@ export default {
       changeCurrentPage(1);
       let limit = params.limit;
       params.limit = null;
-      params.componentFilters = event.filters.filter((v) => v !== undefined);
+      params.componentFilters = event?.filters
+        ? event.filters.filter((v) => v !== undefined)
+        : params.componentFilters;
       let tableValue = await services.dataService.getData(
         props.applicationName,
         props.dataId,
@@ -503,7 +580,7 @@ export default {
       changeRows(tableValue.rows);
       let variables = tableValue.variables;
       //totalRows.value = tableValue.totalRows;
-      pushFilters(event?event.filters.filter((v) => v !== undefined):{});
+      pushFilters(event ? event.filters.filter((v) => v !== undefined) : {});
       await setInitialVariables(variables);
       changeIsLoading(false);
       this?.$forceUpdate && this.$forceUpdate();
@@ -611,7 +688,14 @@ export default {
       console.log("coucou");
     }
 
+    async function changeDisplay(event) {
+      params.horizontalDisplay = horizontalDisplay.value;
+      recalculate();
+      console.log("changeDisplay", event, horizontalDisplay.value);
+    }
+
     return {
+      changeDisplay,
       state,
       showModal,
       realVariables,
@@ -640,6 +724,7 @@ export default {
       application,
       data,
       dataColumnsToBeShown,
+      dataColumnsForFilters,
       filters,
       MANY,
       ONE,
@@ -650,9 +735,11 @@ export default {
       patternCheckerDateRef,
       totalRows,
       tableHeight,
-      loader
+      loader,
+      canHorizontalize,
+      horizontalDisplay,
     };
-  }
+  },
 };
 </script>
 <style lang="scss" scoped>
diff --git a/src/views/data/DataVersioningView.vue b/src/views/data/DataVersioningView.vue
index 22304b8163064aefdf02832178b5d765cb8cfb9c..72242e60f0bdffb56ea68c192a9a6db52227f73f 100644
--- a/src/views/data/DataVersioningView.vue
+++ b/src/views/data/DataVersioningView.vue
@@ -569,11 +569,7 @@ export default {
                 }
               }
               if (reference !== "") {
-
-                let ref = await services.dataService.getData(
-                  props.applicationName,
-                  reference
-                );
+                let ref = await services.dataService.getData(props.applicationName, reference);
                 loadedReferences[reference] = ref;
                 refForAuth[reference] = ref;
                 changeReferenceScopes(refForAuth[reference].referenceScopes);
diff --git a/src/views/data/DatasManagementView.vue b/src/views/data/DatasManagementView.vue
index 7a701667c62d12fb9233c27dac0bb76d05317c83..59c67ea74d1cdd8108c022d7f864781f47098572 100644
--- a/src/views/data/DatasManagementView.vue
+++ b/src/views/data/DatasManagementView.vue
@@ -58,6 +58,7 @@
         :application-name="applicationName"
         :application-title="$t('titles.references-page', { applicationName: applicationName })"
         :buttons="buttons(data)"
+        :build-button="buttons"
         :is-loading="isLineCountLoading"
         :is-uploading="isUploading"
         :level="0"
@@ -103,7 +104,7 @@ import useArray from "@/composable/components/array";
 import useBoolean from "@/composable/components/boolean";
 import useNumber from "@/composable/components/number";
 import useObject from "@/composable/components/object";
-import {  onMounted } from "vue";
+import { onMounted, nextTick } from "vue";
 import services from "@/composable/services";
 import { buildTags } from "@/composable/application/tags";
 import { lineCountSynthesis } from "@/composable/application/synthesis";
@@ -122,12 +123,12 @@ export default {
     TagsCollapse,
     DetailsPanel,
     PageView,
-    SubMenu
+    SubMenu,
   },
   props: {
     applicationName: {
-      type: String
-    }
+      type: String,
+    },
   },
   setup(props) {
     const { shallowRefArray: datas, doChangeArray: changeDatas } = useArray();
@@ -155,7 +156,7 @@ export default {
     const { refBoolean: canManagerUser, doChangeBoolean: changeCanManagerUser } = useBoolean(false);
     const type = window.location.href.split("/");
     const hasTags = useBoolean(false).refBoolean;
-    const changeTags = function(tagsToChange) {
+    const changeTags = function (tagsToChange) {
       _changeTags({ ...tagsToChange });
       hasTags.value =
         tags &&
@@ -164,7 +165,12 @@ export default {
       let sortedData = application.configuration.hierarchicalNodes
         .map((node) => node.nodeName)
         .map((nodeName) => datas.value.find((data) => data.id === nodeName))
-        .filter((node) => node);
+        .filter((node) => node)
+        .sort(
+          (a, b) =>
+            application.orderedReferences.indexOf(a.id) -
+            application.orderedReferences.indexOf(b.id)
+        );
       changeDatasToBeShown(services.tagService.toBeShown(tags, sortedData));
     };
 
@@ -191,7 +197,7 @@ export default {
             : i18n.t("referencesManagement.references").toLowerCase(),
           () => app.$router.push(`/applications/${props.applicationName}/${type[type.length - 1]}`),
           () => app.$router.push(`/applications/${props.applicationName}`)
-        )
+        ),
       ]);
       changeTags(buildTags(application, datas.value));
       changeDatas(services.tagService.toBeShown(tags, datas.value));
@@ -232,7 +238,7 @@ export default {
         canDownload: canDownload,
         canDelete: canDelete,
         isAdmin: isAdmin,
-        canShow: any
+        canShow: any,
       };
     }
 
@@ -244,7 +250,7 @@ export default {
             await services.applicationService.getApplication(props.applicationName, [
               "CONFIGURATION",
               "DATATYPE",
-              "REFERENCETYPE"
+              "REFERENCETYPE",
             ])
           );
           if (!application?.id) {
@@ -264,7 +270,7 @@ export default {
           changeApplication(
             await services.applicationService.getApplication(props.applicationName, [
               "CONFIGURATION",
-              "REFERENCETYPE"
+              "REFERENCETYPE",
             ])
           );
           if (!application?.id) {
@@ -290,8 +296,13 @@ export default {
           (label) => consultReference(label),
           "is-dark",
           null,
-          !reference.canRead ||   !(application.referenceSynthesis.find(synthesis => synthesis.referenceType === reference.id)?.lineCount || 0 )> 0
-        )/*,
+          !(
+            reference.canRead &&
+            (application.referenceSynthesis.find(
+              (synthesis) => synthesis.referenceType === reference.id
+            )?.lineCount || 0) > 0
+          )
+        ) /*,
         new Button(
           i18n.t("referencesManagement.download"),
           "download",
@@ -299,7 +310,7 @@ export default {
           null,
           null,
           !reference.canDownload || !lineCount.value
-        )*/
+        )*/,
       ];
     }
 
@@ -316,7 +327,7 @@ export default {
           `/applications/${props.applicationName}/${type[type.length - 1]}/${ref.id}`
         );
       }
-    }/*
+    } /*
 
     async function downloadReference(label) {
       const reference = findReferenceByLabel(label);
@@ -345,12 +356,15 @@ export default {
           refFile
         );
         let referenceSynthesis = result.referenceSynthesis;
-        changeApplication({
+        let updatedApplication = {
           ...application,
-          referenceSynthesis
-        });
+          referenceSynthesis,
+        };
+        updatedApplication = new ApplicationResult(updatedApplication);
+        changeApplication(updatedApplication);
         services.alertService.toastSuccess(i18n.t("alert.reference-updated"));
         showInfoEmpty.value[referenceType] = { value: true };
+        await nextTick();
       } catch (errors) {
         await checkMessageErrors(errors);
       }
@@ -433,9 +447,9 @@ export default {
       isLineCountLoading,
       hasTags,
       type,
-      consultAuthorization
+      consultAuthorization,
     };
-  }
+  },
 };
 </script>
 <style lang="scss" scoped>