diff --git a/templates/people/gymnasts/gymnast_level_chart_bar.html b/templates/people/gymnasts/gymnast_level_chart_bar.html
new file mode 100644
index 0000000000..8fd33f2f1f
--- /dev/null
+++ b/templates/people/gymnasts/gymnast_level_chart_bar.html
@@ -0,0 +1,18 @@
+<h4 class="d-flex align-items-end flex-column">
+    Estimated level : {% if gymnast_nb_known_skills %}{{ evaluated_level }}{% else %}0{% endif %}
+</h4>
+<div class="progress-container progress-primary">
+    <div class="progress" style="height: 10px;">
+        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: {{ percentage_known_skill }}%;"></div>
+    </div>
+</div>
+<!-- {{ nb_known_skill }} known skills on {{ nb_skill }} skills. -->
+{% for level in percentages %}
+    {% if level.2 > 0 and level.2 <= level.1 %}
+    <div class="progress-container progress-warning mt-2">
+        <div class="progress" style="height: 10px;">
+            <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: {% widthratio level.2 level.1 100 %}%;">&nbsp;&nbsp;Level {{ level.0 }}</div>
+        </div>
+    </div>
+    {% endif %}
+{% endfor %}
\ No newline at end of file
diff --git a/templates/people/gymnasts/gymnast_level_doughnut.html b/templates/people/gymnasts/gymnast_level_doughnut.html
new file mode 100644
index 0000000000..4632ab4d3a
--- /dev/null
+++ b/templates/people/gymnasts/gymnast_level_doughnut.html
@@ -0,0 +1,41 @@
+<canvas id="chartjs_completude" style="position: relative; height:40vh; width:80vw"></canvas>
+
+<script type="text/javascript">
+
+    var completude_data = {
+        datasets:[{
+            borderWidth: 0,
+            data: [
+                {{ nb_skill_masterised }},
+                {{ nb_skill_chained }},
+                {{ nb_skill_without_help }},
+                {{ nb_skill_whith_help }},
+                {{ nb_unknown_skill }}
+            ],
+            backgroundColor: [
+                "#1CA8DD",
+                "#1BC98E", /*"#1ca8dd",*/
+                "#FEFB01",
+                "#FF9300",
+                "#FF2F92",   /*"#1bc98e"*/
+            ]
+        }],
+        labels: ['Skill masterised', 'Chained skills ', 'Skills without help', 'Skills with help', 'Unknown Skills'],
+    };
+
+    new Chart(document.getElementById("chartjs_completude"),{
+        responsive: true,
+        maintainAspectRatio: true,
+        type: "doughnut",
+        data: completude_data,
+        options: {
+            plugins: {
+                legend: {
+                    display: false,
+                },
+            },
+            cutoutPercentage: 55,
+            maintainAspectRatio: false,
+        },
+    });
+</script>
\ No newline at end of file