diff --git a/public/site/blueprints/tabs/design-to-light.yml b/public/site/blueprints/tabs/design-to-light.yml
index 3b8176a..963d11a 100644
--- a/public/site/blueprints/tabs/design-to-light.yml
+++ b/public/site/blueprints/tabs/design-to-light.yml
@@ -11,8 +11,13 @@ columns:
         default: false
   - width: 8/10
     fields:
+      DTLTargetHeadline:
+        type: headline
+        label: La proposition Design to light
+
       DTLProposalLocation:
-        label: Localisation de la proposition Design to light
+        label: Localisation
+        help: Quelle étape contient la proposition Design to light ?
         type: radio
         options:
           proposal: Proposition commerciale
@@ -59,8 +64,62 @@ columns:
         when:
           DTLProposalLocation: virtualSampleStaticTrack
 
+      separator:
+        type: line
+
+      evaluationHeadline:
+        type: headline
+        label: L'évaluation
+
       DTLGrade:
         label: Note globale
-        type: text
+        type: range
+        min: 0
+        max: 10
+        tooltip:
+          after: / 10
         when:
           isDTLEnabled: true
+
+      DTLDesignGrade:
+        label: Design global
+        type: range
+        min: -5
+        max: 5
+        width: 1/3
+        default: 0
+      DTLRingGrade:
+        label: Bague
+        type: range
+        min: -5
+        max: 5
+        width: 1/3
+        default: 0
+      DTLShoulderGrade:
+        label: Épaule
+        type: range
+        min: -5
+        max: 5
+        width: 1/3
+        default: 0
+      DTLSkeletonGrade:
+        label: Colonne et arêtes
+        type: range
+        min: -5
+        max: 5
+        width: 1/3
+        default: 0
+      DTLFootGrade:
+        label: Pied
+        type: range
+        min: -5
+        max: 5
+        width: 1/3
+        default: 0
+      DTLBottomGrade:
+        label: Fond de verre
+        type: range
+        min: -5
+        max: 5
+        width: 1/3
+        default: 0
diff --git a/public/site/templates/project.json.php b/public/site/templates/project.json.php
index 3500654..6988c1e 100644
--- a/public/site/templates/project.json.php
+++ b/public/site/templates/project.json.php
@@ -1,4 +1,47 @@
 <?php
+
+
+function getGlobalEvaluation($numberedGrade) {
+  if ($numberedGrade >= 0 && $numberedGrade < 3) {
+      return [
+        "letter" => "D",
+        "number" => $numberedGrade,
+        "mention" => "Assez lourd",
+        "comment" => "Allègement du flacon recommandé"
+      ];
+  }
+  if ($numberedGrade >= 3 && $numberedGrade < 6) {
+      return [
+        "letter" => "C",
+        "number" => $numberedGrade,
+        "mention" => "Assez lourd",
+        "comment" => "Allègement du flacon recommandé"
+      ];
+  }
+  if ($numberedGrade >= 6 && $numberedGrade < 8) {
+      return [
+        "letter" => "B",
+        "number" => $numberedGrade,
+        "mention" => "Assez lourd",
+        "comment" => "Allègement du flacon recommandé"
+      ];
+  }
+  if ($numberedGrade >= 8 && $numberedGrade <= 10) {
+      return [
+        "letter" => "A",
+        "number" => $numberedGrade,
+        "mention" => "Assez lourd",
+        "comment" => "Allègement du flacon recommandé"
+      ];
+  }
+  return [
+    "letter" => "",
+    "number" => $numberedGrade,
+    "mention" => "Assez lourd",
+    "comment" => "Allègement du flacon recommandé"
+  ];
+}
+
 $project = [
   "title" => $page->title()->value(),
   "url" => $page->url(),
@@ -73,8 +116,38 @@ $project = [
     }
 
     if ($page->DTLGrade()->isNotEmpty()) {
-      $DTLProposal["grade"] = $page->DTLGrade()->value();
+      $numberedGlobalGrade = (int) $page->DTLGrade()->value() ?? 0;
+      $DTLProposal["grades"] = [
+        "global" => getGlobalEvaluation($numberedGlobalGrade),
+        "indicators" => [
+          [
+            "label" => "design",
+            "value" => (int) $page->DTLDesignGrade()->value() ?? 0,
+          ],
+          [
+            "label" => "ring",
+            "value" => (int) $page->DTLRingGrade()->value() ?? 0,
+          ],
+          [
+            "label" => "shoulder",
+            "value" => (int) $page->DTLShoulderGrade()->value() ?? 0,
+          ],
+          [
+            "label" => "skeleton",
+            "value" => (int) $page->DTLSkeletonGrade()->value() ?? 0,
+          ],
+          [
+            "label" => "foot",
+            "value" => (int) $page->DTLFootGrade()->value() ?? 0,
+          ],
+          [
+            "label" => "bottom",
+            "value" => (int) $page->DTLBottomGrade()->value() ?? 0,
+          ]
+        ],
+      ];
     }
+
     $project["designToLight"] = $DTLProposal;
   }
 
diff --git a/src/components/design-to-light/DTLButton.vue b/src/components/design-to-light/DTLButton.vue
index a40cd9c..5fb1ed8 100644
--- a/src/components/design-to-light/DTLButton.vue
+++ b/src/components/design-to-light/DTLButton.vue
@@ -1,6 +1,6 @@
 <template>
-  <button v-if="page?.designToLight?.grade">
-    {{ page.designToLight.grade }}
+  <button v-if="page?.designToLight?.grades?.global">
+    {{ page.designToLight.grades.global.letter }}
   </button>
 </template>
 <script setup>
diff --git a/src/components/design-to-light/DTLPanel.vue b/src/components/design-to-light/DTLPanel.vue
index 1f50bd1..25e7be5 100644
--- a/src/components/design-to-light/DTLPanel.vue
+++ b/src/components/design-to-light/DTLPanel.vue
@@ -2,6 +2,30 @@
   <aside>
     <p>Données basées sur la proposition du {{ frenchFormattedModified }}</p>
     <p>{{ page.designToLight.stepLabel }}</p>
+
+    <h4>Note globale</h4>
+    <p>{{ page.designToLight.grades.global.letter }}</p>
+    <p>{{ page.designToLight.grades.global.mention }}</p>
+    <input
+      type="range"
+      :value="page.designToLight.grades.global.number"
+      disabled
+    />
+    <p>{{ page.designToLight.grades.global.comment }}</p>
+
+    <h4>Positionnement</h4>
+
+    <h4>Indicateur des composants impliqués</h4>
+    <template
+      v-for="indicator in page.designToLight.grades.indicators"
+      :key="indicator.value"
+    >
+      <label for="">{{ indicator.label }}</label>
+      <input type="range" :value="indicator.value" min="-5" max="+5" disabled />
+    </template>
+
+    <!-- Je laisse pour le moment en suspend l'effet de ce bouton car je ne suis pas sûr de comprendre. J'ai mis un commentaire sur Figma -->
+    <button>Demander une expertise d'optimisation</button>
   </aside>
 </template>
 <script setup>
@@ -9,13 +33,14 @@ import { storeToRefs } from "pinia";
 import { usePageStore } from "../../stores/page";
 import dayjs from "dayjs";
 import "dayjs/locale/fr";
+import { computed } from "vue";
 
 dayjs.locale("fr");
 
 const { page } = storeToRefs(usePageStore());
 
 const frenchFormattedModified = dayjs(page.value.designToLight.date).format(
-  "dddd D MMMM YYYY"
+  "D/MM/YYYY"
 );
 </script>