diff --git a/templates/followup/chronos/details.html b/templates/followup/chronos/details.html
new file mode 100644
index 0000000000..b6d89298f4
--- /dev/null
+++ b/templates/followup/chronos/details.html
@@ -0,0 +1,79 @@
+{% extends "base.html" %}
+
+{% block content %}
+<div class="card mb-0">
+    <div class="card-header">
+        <h3 class="mb-0"><a href="{% url 'gymnast_details_tab' chrono.gymnast.id 'scores' %}">{{ chrono.gymnast }}</a></h3>
+        <h4 class="card-title"> Chrono of {{ chrono.date | date:'d N Y' }}</h4>
+    </div>
+    <div class="card-body pb-0 mb-0">
+        <div class="row mr-1 ml-1 pb-0 mb-0">
+            <div class="col-md-2 offset-md-1">
+                <table class="table tablesorter table-striped" data-sort="table" id="chrono_values_table">
+                {% for detail in chrono.details.all %}
+                <tr>
+                    <td>{{ detail.order }}</td>
+                    <td class="text-right">{{ detail.value }}</td>
+                </tr>
+                {% endfor %}
+                <tr>
+                    <td></td>
+                    <td class="text-right"><b>{{ chrono.score }}</b></td>
+                </tr>
+                </table>
+            </div>
+            <div class="col-md-8 offset-md-1 alert {% if request.session.template == 0 %}skill-info{% else %}alert-secondary{% endif %} mr-0 pb-0 pl-1 pr-1">
+                <canvas id="chartjs_chrono_details" class="chartjs" width="800" height="400"></canvas>
+            </div>
+        </div>
+    </div>
+</div>
+
+{% endblock %}
+
+{% block footerscript %}
+<script type="text/javascript">
+    var ctx = document.getElementById("chartjs_chrono_details").getContext("2d");
+    var gradient_stroke_1 = ctx.createLinearGradient(0, 450, 0, 0);
+
+    gradient_stroke_1.addColorStop(1, 'rgba(255, 99, 132, 0.4)');
+    gradient_stroke_1.addColorStop(0.75, 'rgba(255, 99, 132, 0.3)');
+    gradient_stroke_1.addColorStop(0.5, 'rgba(255, 99, 132, 0.2)');
+    gradient_stroke_1.addColorStop(0.25, 'rgba(255, 99, 132, 0)');
+
+    new Chart(document.getElementById("chartjs_chrono_details"), {
+        type: 'line',
+        data: {
+            labels: [
+                {% for detail in chrono.details.all %}
+                    {{ detail.order }},
+                {% endfor %}
+            ],
+            datasets: [{
+                backgroundColor: gradient_stroke_1,
+                borderColor: 'rgb(255, 99, 132)',
+                pointBackgroundColor: 'rgb(255, 99, 132)',
+                fill: true,
+                data: [
+                    {% for detail in chrono.details.all %}
+                        {{ detail.value }},
+                    {% endfor %}
+                ],
+            }]
+        },
+        options: {
+            scales: {
+                yAxes: [{
+                    ticks: {
+                        suggestedMin: {{ min_value }},
+                        suggestedMax: {{ max_value }},
+                    }
+                }]
+            },
+            legend: {
+                display: false,
+            }
+        },
+    });
+</script>
+{% endblock %}
diff --git a/templates/followup/chronos/list_details.html b/templates/followup/chronos/list_details.html
new file mode 100644
index 0000000000..52a0a37861
--- /dev/null
+++ b/templates/followup/chronos/list_details.html
@@ -0,0 +1,112 @@
+{% extends "base.html" %}
+{% load get_value_at_index %}
+
+{% block content %}
+<div class="card mb-0">
+    <div class="card-header">
+        <h3 class="mb-0"><a href="{% url 'gymnast_details_tab' gymnast.id 'scores' %}">{{ gymnast }}</a></h3>
+        Chrono from {{ date_begin | date:'d N Y' }} to {{ date_end | date:'d N Y' }}
+    </div>
+    <div class="card-body pb-0 mb-0">
+        <div class="row pb-0 mb-0">
+            {% if chronolist %}
+            <div class="col-md-5">
+                <table class="table table-condensed" id="chrono_values_table">
+                    {% for chrono in chrono_list %}
+                    <tr>
+                        {% for detail in chrono.details.all %}
+                            {% with stat_value=stat_values|get_value_at_index:forloop.counter0 %}
+                                <td class="{% if stat_value.max_score == detail.value %}cell-success{% endif %}{% if stat_value.min_score == detail.value %}cell-danger{% endif %}">{{ detail.value | floatformat:2 }}</td>
+                            {% endwith %}
+                        {% endfor %}
+                        <td class="text-right"><b>{{ chrono.score | floatformat:2 }}</b></td>
+                    </tr>
+                    {% endfor %}
+                    <tr>
+                        {% for value in stat_values %}
+                            <td><b>{{ value.avg_score | floatformat:2 }}</b></td>
+                        {% endfor %}
+                        <td class="text-right"><b></b></td>
+                    </tr>
+                    <!-- <tr>
+                        {% for value in stat_values %}
+                            <td><b>{{ value.min_score | floatformat:2 }}</b></td>
+                        {% endfor %}
+                        <td class="text-right"><b></b></td>
+                    </tr><tr>
+                        {% for value in stat_values %}
+                            <td><b>{{ value.max_score | floatformat:2 }}</b></td>
+                        {% endfor %}
+                        <td class="text-right"><b></b></td> -->
+                    </tr>
+                </table>
+            </div>
+            <div class="col-md-7 alert {% if request.session.template == 0 %}skill-info{% else %}alert-secondary{% endif %}">
+                <canvas id="chartjs_chrono" class="chartjs"></canvas>
+            </div>
+            {% else %}
+            <div class="col-md-5">
+                No chrono with the selected criteria.
+                <br />
+                <br />
+            </div>
+            {% endif %}
+        </div>
+    </div>
+</div>
+
+{% endblock %}
+
+{% block footerscript %}
+<script type="text/javascript">
+    // $('#chrono_values_table').DataTable({
+    //     paging: false,
+    //     searching: false,
+    //     ordering:  false,
+    //     "bInfo" : false,
+    // });
+
+    var ctx = document.getElementById("chartjs_chrono").getContext("2d");
+    var gradient_stroke_1 = ctx.createLinearGradient(0, 450, 0, 0);
+
+    gradient_stroke_1.addColorStop(1, 'rgba(255, 99, 132, 0.4)');
+    gradient_stroke_1.addColorStop(0.75, 'rgba(255, 99, 132, 0.3)');
+    gradient_stroke_1.addColorStop(0.5, 'rgba(255, 99, 132, 0.2)');
+    gradient_stroke_1.addColorStop(0.25, 'rgba(255, 99, 132, 0)');
+
+    new Chart(document.getElementById("chartjs_chrono"), {
+        type: 'line',
+        data: {
+            labels: [
+                {% for value in stat_values %}
+                    {{ value.avg_score | floatformat:3 }},
+                {% endfor %}
+            ],
+            datasets: [{
+                data: [
+                    {% for value in stat_values %}
+                        {{ value.avg_score | floatformat:3 }},
+                    {% endfor %}
+                ],
+                pointBackgroundColor: 'rgb(255, 99, 132)',
+                borderColor: 'rgb(255, 99, 132)',
+                backgroundColor: gradient_stroke_1,
+                fill: true,
+            }]
+        },
+        options: {
+            // scales: {
+            //     yAxes: [{
+            //         ticks: {
+            //             suggestedMin: {{ min_value }},
+            //             suggestedMax: {{ max_value }},
+            //         }
+            //     }]
+            // },
+            legend: {
+                display: false,
+            }
+        },
+    });
+</script>
+{% endblock %}