diff --git a/frontend/src/components/CanteenPublication/EditableCommentsField.vue b/frontend/src/components/CanteenPublication/EditableCommentsField.vue
new file mode 100644
index 000000000..96c9e93ea
--- /dev/null
+++ b/frontend/src/components/CanteenPublication/EditableCommentsField.vue
@@ -0,0 +1,117 @@
+<template>
+  <v-col v-if="!editDescription && (value || editable)" cols="12" sm="6" class="px-0 pb-2">
+    <div v-if="value">
+      <h2 class="fr-text grey--text text--darken-4 mb-6">
+        {{ label }}
+      </h2>
+      <div class="ml-n8">
+        <DsfrHighlight>
+          <p>
+            {{ value }}
+          </p>
+        </DsfrHighlight>
+      </div>
+    </div>
+    <v-btn
+      v-if="editable"
+      @click="
+        editDescription = true
+        oldComments = value
+      "
+      outlined
+      small
+      color="primary"
+      class="fr-btn--tertiary px-2 mt-4"
+    >
+      <v-icon primary x-small class="mr-1">mdi-pencil-outline</v-icon>
+      {{ cta || "Modifier" }}
+    </v-btn>
+  </v-col>
+  <v-col v-else-if="editable" cols="12" sm="6">
+    <v-form v-model="formIsValid" ref="commentsForm">
+      <DsfrTextarea
+        v-model="canteen[valueKey]"
+        :counter="charLimit"
+        :rules="[validators.maxChars(charLimit)]"
+        rows="5"
+        class="mt-2"
+      >
+        <template v-slot:label>
+          <span class="fr-label mb-1">{{ label }}</span>
+          <span v-if="helpText" class="fr-hint-text mb-2">
+            {{ helpText }}
+          </span>
+          <slot name="help-text" />
+        </template>
+      </DsfrTextarea>
+      <v-btn @click="saveDescription" class="primary">Enregistrer</v-btn>
+    </v-form>
+  </v-col>
+</template>
+
+<script>
+import DsfrTextarea from "@/components/DsfrTextarea"
+import DsfrHighlight from "@/components/DsfrHighlight"
+import validators from "@/validators"
+
+export default {
+  name: "EditableCommentsField",
+  props: {
+    canteen: Object,
+    valueKey: String,
+    editable: Boolean,
+    label: String,
+    helpText: String,
+    cta: String,
+    charLimit: Number,
+  },
+  components: { DsfrTextarea, DsfrHighlight },
+  data() {
+    return {
+      editDescription: false,
+      formIsValid: true,
+      oldComments: this.canteen[this.valueKey],
+    }
+  },
+  computed: {
+    validators() {
+      return validators
+    },
+    value() {
+      return this.canteen[this.valueKey]
+    },
+  },
+  methods: {
+    saveDescription() {
+      if (this.canteen[this.valueKey] === this.oldComments) {
+        this.editDescription = false
+        return
+      }
+      this.$refs.commentsForm.validate()
+      if (!this.formIsValid) {
+        this.$store.dispatch("notifyRequiredFieldsError")
+        return
+      }
+      const payload = {}
+      payload[this.valueKey] = this.canteen[this.valueKey]
+      this.$store
+        .dispatch("updateCanteen", {
+          id: this.canteen.id,
+          payload,
+        })
+        .then(() => {
+          this.$store.dispatch("notify", {
+            status: "success",
+            message: "Commentaires mises à jour",
+          })
+          this.editDescription = false
+        })
+        .catch(() => {
+          this.$store.dispatch("notifyServerError")
+        })
+    },
+  },
+}
+</script>
+
+<style></style>
diff --git a/frontend/src/components/CanteenPublication/ResultsComponents/CentralKitchenInfo.vue b/frontend/src/components/CanteenPublication/ResultsComponents/CentralKitchenInfo.vue
new file mode 100644
index 000000000..b00a7f3ca
--- /dev/null
+++ b/frontend/src/components/CanteenPublication/ResultsComponents/CentralKitchenInfo.vue
@@ -0,0 +1,44 @@
+<template>
+  <!-- TODO: use DsfrCallout instead -->
+  <v-card outlined elevation="0" color="primary lighten-5" class="d-flex mb-6" v-if="usesCentralKitchenDiagnostics">
+    <v-icon class="ml-4" color="primary">$information-fill</v-icon>
+
+    <v-card-text>
+      <p class="mb-0">
+        La cantine « {{ canteen.name }} » sert des repas cuisinés dans la cuisine centrale
+        <span v-if="centralKitchen.publicationStatus === 'published'">
+          <router-link
+            :to="{
+              name: 'CanteenPage',
+              params: { canteenUrlComponent: this.$store.getters.getCanteenUrlComponent(centralKitchen) },
+            }"
+          >
+            « {{ centralKitchen.name }} »
+          </router-link>
+          .
+        </span>
+        <span v-else>« {{ centralKitchen.name }} ».</span>
+        Les valeurs ci-dessous sont celles du lieu de production des repas.
+      </p>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script>
+export default {
+  name: "CentralKitchenInfo",
+  props: {
+    canteen: Object,
+  },
+  computed: {
+    centralKitchen() {
+      return this.canteen.centralKitchen
+    },
+    usesCentralKitchenDiagnostics() {
+      return (
+        this.canteen.productionType === "site_cooked_elsewhere" && this.canteen.centralKitchenDiagnostics?.length > 0
+      )
+    },
+  },
+}
+</script>
diff --git a/frontend/src/components/CanteenPublication/ResultsComponents/QualityMeasureResults.vue b/frontend/src/components/CanteenPublication/ResultsComponents/QualityMeasureResults.vue
index d2bad1b5c..a52ea6e05 100644
--- a/frontend/src/components/CanteenPublication/ResultsComponents/QualityMeasureResults.vue
+++ b/frontend/src/components/CanteenPublication/ResultsComponents/QualityMeasureResults.vue
@@ -1,206 +1,85 @@
 <template>
   <div class="mb-8">
-    <p v-if="badge.earned" class="mb-0">
+    <CentralKitchenInfo :canteen="canteen" />
+
+    <p v-if="badge.earned">
       Ce qui est servi dans les assiettes est au moins à {{ applicableRules.qualityThreshold }} % de produits durables
       et de qualité, dont {{ applicableRules.bioThreshold }} % bio, en respectant
       <a href="https://ma-cantine.agriculture.gouv.fr/blog/16">les seuils d'Outre-mer</a>
     </p>
     <p v-else>Cet établissement ne respecte pas encore la loi EGAlim pour cette mesure.</p>
-    <div v-if="showPercentagesBlock">
-      <h2 class="font-weight-black text-h6 grey--text text--darken-4 my-4">
-        Que mange-t-on dans les assiettes en {{ publicationYear }} ?
-      </h2>
-
-      <v-card outlined elevation="0" color="primary lighten-5" class="d-flex mb-6" v-if="usesCentralKitchenDiagnostics">
-        <v-icon class="ml-4" color="primary">$information-fill</v-icon>
 
-        <v-card-text>
-          <p class="mb-0">
-            La cantine « {{ canteen.name }} » sert des repas cuisinés dans la cuisine centrale
-            <span v-if="canteen.centralKitchen.publicationStatus === 'published'">
-              <router-link
-                :to="{
-                  name: 'CanteenPage',
-                  params: { canteenUrlComponent: this.$store.getters.getCanteenUrlComponent(canteen.centralKitchen) },
-                }"
-              >
-                « {{ canteen.centralKitchen.name }} »
-              </router-link>
-              .
-            </span>
-            <span v-else>« {{ canteen.centralKitchen.name }} ».</span>
-            Les valeurs ci-dessous sont celles du lieu de production des repas.
-          </p>
-        </v-card-text>
-      </v-card>
+    <DsfrSegmentedControl v-model="tab" legend="Année" noLegend :items="tabs" />
+    <div v-if="diagnosticForYear">
+      <ApproGraph v-if="diagnosticForYear" :diagnostic="diagnosticForYear" :canteen="canteen" />
 
-      <h3
-        class="font-weight-black text-body-1 grey--text text--darken-4 my-4"
-        v-if="
-          diagnostic.diagnosticType === 'COMPLETE' ||
-            meatEgalimPercentage ||
-            meatFrancePercentage ||
-            fishEgalimPercentage
-        "
-      >
-        Total
-      </h3>
-      <v-row>
-        <v-col cols="12" sm="6" md="4" v-if="bioPercentage">
-          <v-card class="fill-height text-center py-4 d-flex flex-column justify-center" outlined>
-            <p class="ma-0">
-              <span class="grey--text text-h5 font-weight-black text--darken-2 mr-1">{{ bioPercentage }} %</span>
-              <span class="caption grey--text text--darken-2">
-                bio
-              </span>
-            </p>
-            <div class="mt-2">
-              <v-img
-                contain
-                src="/static/images/quality-labels/logo_bio_eurofeuille.png"
-                alt="Logo Agriculture Biologique"
-                title="Logo Agriculture Biologique"
-                max-height="35"
-              />
-            </div>
-          </v-card>
-        </v-col>
-        <v-col cols="12" sm="6" md="4" v-if="sustainablePercentage">
-          <v-card class="fill-height text-center py-4 d-flex flex-column justify-center" outlined>
-            <p class="ma-0">
-              <span class="grey--text text-h5 font-weight-black text--darken-2 mr-1">
-                {{ sustainablePercentage }} %
-              </span>
-              <span class="caption grey--text text--darken-2">
-                durables et de qualité (hors bio)
-              </span>
-            </p>
-            <div class="d-flex mt-2 justify-center flex-wrap">
-              <v-img
-                contain
-                v-for="label in labels"
-                :key="label.title"
-                :src="`/static/images/quality-labels/${label.src}`"
-                :alt="label.title"
-                :title="label.title"
-                class="px-1"
-                max-height="40"
-                max-width="40"
-              />
-            </div>
-          </v-card>
-        </v-col>
-      </v-row>
-      <div v-if="diagnostic.diagnosticType === 'COMPLETE'">
-        <h3 class="font-weight-black text-body-1 grey--text text--darken-4 mt-4">
-          Catégories EGAlim par famille de produit
-        </h3>
-        <FamiliesGraph :diagnostic="diagnostic" :height="$vuetify.breakpoint.xs ? '440px' : '380px'" />
-      </div>
-      <div v-else-if="meatEgalimPercentage || meatFrancePercentage || fishEgalimPercentage">
-        <h3 class="font-weight-black text-body-1 grey--text text--darken-4 mb-4 mt-8">
-          Par famille de produit
-        </h3>
-        <v-row>
-          <v-col cols="12" sm="4" md="4" v-if="meatEgalimPercentage">
-            <v-card class="fill-height text-center py-4 d-flex flex-column justify-center" outlined>
-              <p class="ma-0">
-                <span class="grey--text text-h5 font-weight-black text--darken-2 mr-1">
-                  {{ meatEgalimPercentage }} %
-                </span>
-                <span class="caption grey--text text--darken-2">
-                  viandes et volailles EGAlim
-                </span>
-              </p>
-              <div class="mt-2">
-                <v-icon size="30" color="brown">
-                  mdi-food-steak
-                </v-icon>
-                <v-icon size="30" color="brown">
-                  mdi-food-drumstick
-                </v-icon>
-                <v-icon size="30" color="green">
-                  $checkbox-circle-fill
-                </v-icon>
-              </div>
-            </v-card>
-          </v-col>
-          <v-col cols="12" sm="4" md="4" v-if="meatFrancePercentage">
-            <v-card class="fill-height text-center py-4 d-flex flex-column justify-center" outlined>
-              <p class="ma-0">
-                <span class="grey--text text-h5 font-weight-black text--darken-2 mr-1">
-                  {{ meatFrancePercentage }} %
-                </span>
-                <span class="caption grey--text text--darken-2">
-                  viandes et volailles provenance France
-                </span>
-              </p>
-              <div class="mt-2">
-                <v-icon size="30" color="brown">
-                  mdi-food-steak
-                </v-icon>
-                <v-icon size="30" color="brown">
-                  mdi-food-drumstick
-                </v-icon>
-                <v-icon size="30" color="indigo">
-                  $france-line
-                </v-icon>
-              </div>
-            </v-card>
-          </v-col>
-          <v-col cols="12" sm="4" md="4" v-if="fishEgalimPercentage">
-            <v-card class="fill-height text-center py-4 d-flex flex-column justify-center" outlined>
-              <p class="ma-0">
-                <span class="grey--text text-h5 font-weight-black text--darken-2 mr-1">
-                  {{ fishEgalimPercentage }} %
-                </span>
-                <span class="caption grey--text text--darken-2">
-                  produits aquatiques EGAlim
-                </span>
-              </p>
-              <div class="mt-2">
-                <v-icon size="30" color="blue">
-                  mdi-fish
-                </v-icon>
-                <v-icon size="30" color="green">
-                  $checkbox-circle-fill
-                </v-icon>
-              </div>
-            </v-card>
-          </v-col>
-        </v-row>
+      <div v-if="hasFamilyDetail">
+        <DsfrAccordion :items="[{ title: 'Détail par famille de produit' }]" class="mb-2">
+          <template v-slot:content>
+            <v-row class="text-center pt-3 pb-2">
+              <v-col cols="12" sm="4" class="pa-4">
+                <v-icon large class="grey--text text--darken-3 mb-2">$award-line</v-icon>
+                <p class="mb-0">
+                  <span class="font-weight-bold percentage">{{ meatEgalimPercentage || "—" }} %</span>
+                  de viandes et volailles
+                  <br />
+                  EGAlim
+                </p>
+              </v-col>
+              <v-col cols="12" sm="4" class="pa-4">
+                <v-icon large class="grey--text text--darken-3 mb-2">$france-line</v-icon>
+                <p class="mb-0">
+                  <span class="font-weight-bold percentage">{{ meatFrancePercentage || "—" }} %</span>
+                  de viandes et volailles
+                  <br />
+                  provenance France
+                </p>
+              </v-col>
+              <v-col cols="12" sm="4" class="pa-4">
+                <v-icon large class="grey--text text--darken-3 mb-2">$anchor-line</v-icon>
+                <p class="mb-0">
+                  <span class="font-weight-bold percentage">{{ fishEgalimPercentage || "—" }} %</span>
+                  de produits de la mer
+                  <br />
+                  et aquaculture EGAlim
+                </p>
+              </v-col>
+            </v-row>
+          </template>
+        </DsfrAccordion>
       </div>
     </div>
-
-    <div v-if="shouldDisplayGraph">
-      <h2 id="appro-heading" class="font-weight-black text-h6 grey--text text--darken-4 mt-12 mb-2">
-        Évolution des produits dans nos assiettes sur les années
-      </h2>
-      <div>
-        <MultiYearSummaryStatistics
-          :diagnostics="graphDiagnostics"
-          headingId="appro-heading"
-          height="260"
-          :width="$vuetify.breakpoint.mdAndUp ? '650px' : '100%'"
-          :applicableRules="applicableRules"
-        />
-      </div>
+    <div v-else>
+      <MultiYearSummaryStatistics
+        :diagnostics="graphDiagnostics"
+        headingId="appro-heading"
+        height="260"
+        :width="$vuetify.breakpoint.mdAndUp ? '650px' : '100%'"
+        :applicableRules="applicableRules"
+      />
     </div>
+    <EditableCommentsField
+      :canteen="canteen"
+      valueKey="qualityComments"
+      :editable="editable"
+      label="Commentaire"
+      helpText="Si vous le souhaitez, ajoutez des précisions sur vos résultats : actions entreprises, priorités à venir..."
+      cta="Modifier le commentaire"
+      :charLimit="500"
+    />
   </div>
 </template>
 
 <script>
-import {
-  lastYear,
-  hasDiagnosticApproData,
-  applicableDiagnosticRules,
-  getSustainableTotal,
-  getPercentage,
-  latestCreatedDiagnostic,
-} from "@/utils"
-import labels from "@/data/quality-labels.json"
+import { applicableDiagnosticRules, getPercentage, latestCreatedDiagnostic } from "@/utils"
+import CentralKitchenInfo from "./CentralKitchenInfo"
+import DsfrSegmentedControl from "@/components/DsfrSegmentedControl"
+import ApproGraph from "@/components/ApproGraph"
+import EditableCommentsField from "../EditableCommentsField"
 import MultiYearSummaryStatistics from "@/components/MultiYearSummaryStatistics"
-import FamiliesGraph from "@/components/FamiliesGraph"
+import DsfrAccordion from "@/components/DsfrAccordion"
+
+const COMPARE_TAB = "Comparer"
 
 export default {
   name: "QualityMeasureResults",
@@ -208,11 +87,23 @@ export default {
     badge: Object,
     canteen: Object,
     diagnosticSet: Array,
+    editable: Boolean,
+  },
+  components: {
+    CentralKitchenInfo,
+    DsfrSegmentedControl,
+    ApproGraph,
+    EditableCommentsField,
+    MultiYearSummaryStatistics,
+    DsfrAccordion,
   },
-  components: { MultiYearSummaryStatistics, FamiliesGraph },
   data() {
+    const tabs = this.diagnosticSet.map((d) => +d.year)
+    tabs.sort((a, b) => b - a)
+    tabs.push(COMPARE_TAB)
     return {
-      labels,
+      tabs,
+      tab: tabs[0],
     }
   },
   computed: {
@@ -220,61 +111,29 @@ export default {
       if (!this.diagnosticSet) return
       return latestCreatedDiagnostic(this.diagnosticSet)
     },
-    publicationYear() {
-      return this.diagnostic?.year
-    },
-    usesCentralKitchenDiagnostics() {
-      return (
-        this.canteen?.productionType === "site_cooked_elsewhere" && this.canteen?.centralKitchenDiagnostics?.length > 0
-      )
-    },
-    showPercentagesBlock() {
-      return (
-        this.diagnostic &&
-        (this.bioPercentage ||
-          this.sustainablePercentage ||
-          this.meatEgalimPercentage ||
-          this.meatFrancePercentage ||
-          this.fishEgalimPercentage)
-      )
+    diagnosticForYear() {
+      return this.diagnosticSet.find((d) => d.year === +this.tab)
     },
     applicableRules() {
       return applicableDiagnosticRules(this.canteen)
     },
     hasPercentages() {
-      return "percentageValueTotalHt" in this.diagnostic
-    },
-    bioPercentage() {
-      return this.hasPercentages
-        ? this.toPercentage(this.diagnostic.percentageValueBioHt)
-        : getPercentage(this.diagnostic.valueBioHt, this.diagnostic.valueTotalHt)
-    },
-    sustainablePercentage() {
-      return this.hasPercentages
-        ? this.toPercentage(getSustainableTotal(this.diagnostic))
-        : getPercentage(getSustainableTotal(this.diagnostic), this.diagnostic.valueTotalHt)
+      return "percentageValueTotalHt" in this.diagnosticForYear
     },
     meatEgalimPercentage() {
       return this.hasPercentages
-        ? this.toPercentage(this.diagnostic.percentageValueMeatPoultryEgalimHt)
-        : getPercentage(this.diagnostic.valueMeatPoultryEgalimHt, this.diagnostic.valueMeatPoultryHt)
+        ? this.toPercentage(this.diagnosticForYear.percentageValueMeatPoultryEgalimHt)
+        : getPercentage(this.diagnosticForYear.valueMeatPoultryEgalimHt, this.diagnosticForYear.valueMeatPoultryHt)
     },
     meatFrancePercentage() {
       return this.hasPercentages
-        ? this.toPercentage(this.diagnostic.percentageValueMeatPoultryFranceHt)
-        : getPercentage(this.diagnostic.valueMeatPoultryFranceHt, this.diagnostic.valueMeatPoultryHt)
+        ? this.toPercentage(this.diagnosticForYear.percentageValueMeatPoultryFranceHt)
+        : getPercentage(this.diagnosticForYear.valueMeatPoultryFranceHt, this.diagnosticForYear.valueMeatPoultryHt)
     },
     fishEgalimPercentage() {
       return this.hasPercentages
-        ? this.toPercentage(this.diagnostic.percentageValueFishEgalimHt)
-        : getPercentage(this.diagnostic.valueFishEgalimHt, this.diagnostic.valueFishHt)
-    },
-    shouldDisplayGraph() {
-      if (!this.diagnosticSet || this.diagnosticSet.length === 0) return false
-      const completedDiagnostics = this.diagnosticSet.filter(hasDiagnosticApproData)
-      if (completedDiagnostics.length === 0) return false
-      else if (completedDiagnostics.length === 1) return completedDiagnostics[0].year !== lastYear()
-      else return true
+        ? this.toPercentage(this.diagnosticForYear.percentageValueFishEgalimHt)
+        : getPercentage(this.diagnosticForYear.valueFishEgalimHt, this.diagnosticForYear.valueFishHt)
     },
     graphDiagnostics() {
       if (!this.diagnosticSet || this.diagnosticSet.length === 0) return null
@@ -285,6 +144,9 @@ export default {
       }
       return diagnostics
     },
+    hasFamilyDetail() {
+      return this.meatEgalimPercentage || this.meatFrancePercentage || this.fishEgalimPercentage
+    },
   },
   methods: {
     toPercentage(value) {
diff --git a/frontend/src/components/CanteenPublication/index.vue b/frontend/src/components/CanteenPublication/index.vue
index a794a5139..b4268e90a 100644
--- a/frontend/src/components/CanteenPublication/index.vue
+++ b/frontend/src/components/CanteenPublication/index.vue
@@ -1,53 +1,22 @@
 <template>
   <div class="text-left" v-if="canteen">
-    <v-col v-if="!editDescription && (canteen.publicationComments || editable)" cols="12" sm="6" class="px-0 pb-2">
-      <div v-if="canteen.publicationComments">
-        <h2 class="fr-text grey--text text--darken-4 mb-6">
-          Description de l'établissement
-        </h2>
-        <div class="ml-n8">
-          <DsfrHighlight>
-            <p>
-              {{ canteen.publicationComments }}
-            </p>
-          </DsfrHighlight>
-        </div>
-      </div>
-      <v-btn
-        v-if="editable"
-        @click="
-          editDescription = true
-          oldPublicationComments = canteen.publicationComments
-        "
-        outlined
-        small
-        color="primary"
-        class="fr-btn--tertiary px-2 mt-4"
-      >
-        <v-icon primary x-small class="mr-1">mdi-pencil-outline</v-icon>
-        Modifier la description
-      </v-btn>
-    </v-col>
-    <v-col v-else-if="editable" cols="12" sm="6">
-      <v-form v-model="publicationFormIsValid" ref="publicationCommentsForm">
-        <DsfrTextarea
-          class="mt-2"
-          rows="5"
-          counter="500"
-          v-model="canteen.publicationComments"
-          :rules="[validators.maxChars(500)]"
-        >
-          <template v-slot:label>
-            <span class="fr-label mb-1">Déscription de l'établissement</span>
-            <span class="fr-hint-text mb-2">
-              Si vous le souhaitez, personnalisez votre affiche en écrivant quelques mots sur votre établissement&nbsp;:
-              son fonctionnement, l'organisation, l'historique...
-            </span>
-          </template>
-        </DsfrTextarea>
-        <v-btn @click="saveDescription" class="primary">Enregistrer</v-btn>
-      </v-form>
-    </v-col>
+    <EditableCommentsField
+      v-if="canteen"
+      :canteen="canteen"
+      valueKey="publicationComments"
+      :editable="editable"
+      label="Description de l'établissement"
+      cta="Modifier la description"
+      :charLimit="500"
+    >
+      <template v-slot:help-text>
+        <span class="fr-hint-text mb-2">
+          Si vous le souhaitez, personnalisez votre affiche en écrivant quelques mots sur votre établissement&nbsp;: son
+          fonctionnement, l'organisation, l'historique...
+        </span>
+      </template>
+    </EditableCommentsField>
+
     <h2 class="mt-12 mb-8">Où en-sommes nous de notre transition alimentaire ?</h2>
     <DsfrAccordion :items="badgeItems" :openPanelIndex="editable ? undefined : 0" class="mt-4">
       <template v-slot:title="{ item }">
@@ -69,6 +38,7 @@
           :badge="item"
           :canteen="canteen"
           :diagnosticSet="diagnosticSet"
+          :editable="editable"
         />
         <p class="mb-0">
           Se renseigner sur
@@ -97,11 +67,9 @@
 import keyMeasures from "@/data/key-measures.json"
 import { badges, latestCreatedDiagnostic, applicableDiagnosticRules } from "@/utils"
 import ImageGallery from "@/components/ImageGallery"
-import DsfrHighlight from "@/components/DsfrHighlight"
-import DsfrTextarea from "@/components/DsfrTextarea"
+import EditableCommentsField from "./EditableCommentsField"
 import DsfrAccordion from "@/components/DsfrAccordion"
 import Constants from "@/constants"
-import validators from "@/validators"
 
 import QualityMeasureResults from "./ResultsComponents/QualityMeasureResults"
 import DiversificationMeasureResults from "./ResultsComponents/DiversificationMeasureResults"
@@ -117,17 +85,9 @@ export default {
       default: false,
     },
   },
-  data() {
-    return {
-      editDescription: false,
-      publicationFormIsValid: true,
-      oldPublicationComments: undefined,
-    }
-  },
   components: {
     ImageGallery,
-    DsfrHighlight,
-    DsfrTextarea,
+    EditableCommentsField,
     DsfrAccordion,
     QualityMeasureResults,
     DiversificationMeasureResults,
@@ -136,9 +96,6 @@ export default {
     WasteMeasureResults,
   },
   computed: {
-    validators() {
-      return validators
-    },
     diagnosticSet() {
       if (!this.canteen) return
       if (!this.usesCentralKitchenDiagnostics) return this.canteen.diagnostics
@@ -210,33 +167,5 @@ export default {
       return this.$vuetify.breakpoint.xs ? 0 : 3
     },
   },
-  methods: {
-    saveDescription() {
-      if (this.canteen.publicationComments === this.oldPublicationComments) {
-        this.editDescription = false
-        return
-      }
-      this.$refs.publicationCommentsForm.validate()
-      if (!this.publicationFormIsValid) {
-        this.$store.dispatch("notifyRequiredFieldsError")
-        return
-      }
-      this.$store
-        .dispatch("updateCanteen", {
-          id: this.canteen.id,
-          payload: { publicationComments: this.canteen.publicationComments },
-        })
-        .then(() => {
-          this.$store.dispatch("notify", {
-            status: "success",
-            message: "Description mise à jour",
-          })
-          this.editDescription = false
-        })
-        .catch(() => {
-          this.$store.dispatch("notifyServerError")
-        })
-    },
-  },
 }
 </script>
diff --git a/frontend/src/components/DsfrSegmentedControl.vue b/frontend/src/components/DsfrSegmentedControl.vue
new file mode 100644
index 000000000..7ccb6c1bb
--- /dev/null
+++ b/frontend/src/components/DsfrSegmentedControl.vue
@@ -0,0 +1,137 @@
+<template>
+  <fieldset :class="{ 'fr-segmented': true, 'fr-segmented--no-legend': noLegend }">
+    <legend class="fr-segmented__legend">{{ legend }}</legend>
+    <div class="fr-segmented__elements">
+      <div v-for="item in itemsForDisplay" :key="item.value" class="fr-segmented__element">
+        <input
+          :value="item.value"
+          type="radio"
+          :id="`segmented-${item.value}`"
+          :name="name"
+          v-on:input="$emit('input', $event.target.value)"
+          :checked="value === item.value"
+        />
+        <label class="fr-label" :for="`segmented-${item.value}`">{{ item.text }}</label>
+      </div>
+    </div>
+  </fieldset>
+</template>
+
+<script>
+export default {
+  name: "DsfrSegmentedControl",
+  props: {
+    value: [String, Number],
+    legend: String, // necessary even if not displayed
+    noLegend: Boolean,
+    // array of text value objects
+    items: Array,
+    name: {
+      type: String,
+      default: "segmented-group",
+    },
+  },
+  computed: {
+    itemsForDisplay() {
+      if (!this.items.length) return this.items
+      if (this.items[0].text) return this.items
+      return this.items.map((i) => ({ text: i, value: i }))
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+/* TODO: styling for SM as well as MD */
+.fr-segmented {
+  align-items: center;
+  border: 0;
+  display: inline-flex;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+.fr-segmented__legend {
+  margin-bottom: 0.75rem;
+  padding: 0;
+}
+.fr-segmented--no-legend legend {
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  display: block;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+.fr-segmented--no-legend legend + .fr-segmented__elements {
+  margin-left: 0;
+}
+.fr-segmented__elements {
+  border-radius: 0.25rem;
+  box-shadow: inset 0 0 0 1px #ddd;
+  // box-shadow: inset 0 0 0 1px var(--border-default-grey);
+  display: flex;
+  flex-direction: row;
+}
+.fr-segmented__element {
+  position: relative;
+}
+.fr-segmented input {
+  height: 100%;
+  margin: 0;
+  position: absolute;
+  width: 100%;
+  z-index: -1;
+}
+.fr-segmented input + label {
+  align-items: center;
+  border-radius: 0.25rem;
+  display: inline-flex;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  max-height: none;
+  max-width: 100%;
+  min-height: 2.5rem;
+  overflow: visible;
+  overflow: initial;
+  padding: 0.5rem 1rem;
+  white-space: nowrap;
+  width: 100%;
+}
+.fr-segmented input + label::before {
+  --icon-size: 1rem;
+  margin-left: -0.125rem;
+  margin-right: 0.5rem;
+}
+.fr-segmented .fr-segmented__element input {
+  opacity: 0;
+}
+// TODO: fix focus styling, currently not displayed for some reason
+input:focus {
+  outline-color: #0a76f6;
+  outline-offset: 2px;
+  outline-style: solid;
+  outline-width: 2px;
+}
+// TODO: why is background hover taking up whole space when in DSFR it leaves some space?
+.fr-segmented input:not([disabled]):not(:checked) + label:hover {
+  --grey-1000-50-hover: #f6f6f6;
+  --grey-1000-50-active: #ededed;
+  --background-default-grey-hover: var(--grey-1000-50-hover);
+  --background-default-grey-active: var(--grey-1000-50-active);
+  --hover: var(--background-default-grey-hover);
+  --active: var(--background-default-grey-active);
+  background-color: var(--hover);
+}
+.fr-segmented__element input:checked + label {
+  box-shadow: inset 0 0 0 1px #000091;
+  // box-shadow: inset 0 0 0 1px var(--border-active-blue-france);
+  color: #000091;
+  // color: var(--text-active-blue-france);
+}
+</style>
diff --git a/frontend/src/constants.js b/frontend/src/constants.js
index 3b58df892..4621fd43a 100644
--- a/frontend/src/constants.js
+++ b/frontend/src/constants.js
@@ -85,8 +85,8 @@ export default Object.freeze({
       color: "pink darken-4",
     },
     PRODUITS_DE_LA_MER: {
-      text: "Produits aquatiques frais et surgelés",
-      shortText: "produits aquatiques",
+      text: "Produits de la mer et aquaculture frais et surgelés",
+      shortText: "produits de la mer et aquaculture",
       color: "blue darken-3",
     },
     FRUITS_ET_LEGUMES: {