diff --git a/padel/settings.py b/padel/settings.py
index fdddac8..36dc097 100644
--- a/padel/settings.py
+++ b/padel/settings.py
@@ -37,7 +37,8 @@ INSTALLED_APPS = [
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
-    'scores'
+    'scores',
+    'rest_framework'
 ]
 
 MIDDLEWARE = [
@@ -100,6 +101,15 @@ AUTH_PASSWORD_VALIDATORS = [
     },
 ]
 
+# Rest
+
+REST_FRAMEWORK = {
+    # Use Django's standard `django.contrib.auth` permissions,
+    # or allow read-only access for unauthenticated users.
+    'DEFAULT_PERMISSION_CLASSES': [
+        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
+    ]
+}
 
 # Internationalization
 # https://docs.djangoproject.com/en/4.1/topics/i18n/
diff --git a/padel/urls.py b/padel/urls.py
index 6d79dd2..6f70383 100644
--- a/padel/urls.py
+++ b/padel/urls.py
@@ -15,8 +15,16 @@ Including another URLconf
 """
 from django.contrib import admin
 from django.urls import include, path
+from rest_framework import routers
+from scores import views
+
+router = routers.DefaultRouter()
+router.register(r'users', views.UserViewSet)
+router.register(r'matches', views.MatchViewSet)
 
 urlpatterns = [
+    path('api/', include(router.urls)),
     path('', include('scores.urls')),
     path('admin/', admin.site.urls),
+    path('api-auth/', include('rest_framework.urls', namespace='rest_framework'))
 ]
diff --git a/scores/migrations/0005_match_team5.py b/scores/migrations/0005_match_team5.py
new file mode 100644
index 0000000..433ca0d
--- /dev/null
+++ b/scores/migrations/0005_match_team5.py
@@ -0,0 +1,18 @@
+# Generated by Django 4.1.1 on 2023-02-23 15:38
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('scores', '0004_match_court'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='match',
+            name='team5',
+            field=models.CharField(blank=True, max_length=200),
+        ),
+    ]
diff --git a/scores/models.py b/scores/models.py
index 039a9ca..5eaa339 100644
--- a/scores/models.py
+++ b/scores/models.py
@@ -1,6 +1,5 @@
 from django.db import models
-import datetime
-from datetime import timedelta
+from django.utils import timezone
 
 class Club(models.Model):
     name = models.CharField(max_length=200)
@@ -18,6 +17,7 @@ class Match(models.Model):
     team2 = models.CharField(max_length=200, blank=True)
     team3 = models.CharField(max_length=200, blank=True)
     team4 = models.CharField(max_length=200, blank=True)
+    team5 = models.CharField(max_length=200, blank=True)
 
     team1scorecolumn1 = models.CharField(max_length=200, blank=True)
     team1scorecolumn2 = models.CharField(max_length=200, blank=True)
@@ -30,6 +30,19 @@ class Match(models.Model):
     team2scorecolumn4 = models.CharField(max_length=200, blank=True)
     team2scorecolumn5 = models.CharField(max_length=200, blank=True)
 
-    # def duration(self):
-    #     delta = datetime.now().date() - date
-    #     return str(timedelta(delta))
+    def duration(self):
+
+        _seconds = (timezone.now() - self.date).total_seconds()
+
+        if _seconds > 0:
+            _hours = int(_seconds / 3600)
+            _minutes = int((_seconds % 3600) / 60)
+            return f"{_hours}:{_minutes:02d}"
+        else :
+            _seconds = _seconds * -1
+            _hours = int(_seconds / 3600)
+            _minutes = int((_seconds % 3600) / 60)
+            return "Démarre dans " + f"{_hours}:{_minutes:02d}" + "..."
+
+    def seconds(self):
+        return (timezone.now() - self.date).total_seconds()
diff --git a/scores/serializers.py b/scores/serializers.py
new file mode 100644
index 0000000..bbaeef5
--- /dev/null
+++ b/scores/serializers.py
@@ -0,0 +1,16 @@
+from django.contrib.auth.models import User
+from rest_framework import serializers
+from .models import Match
+
+
+class UserSerializer(serializers.HyperlinkedModelSerializer):
+    class Meta:
+        model = User
+        fields = ['url', 'username', 'email']
+
+class MatchSerializer(serializers.HyperlinkedModelSerializer):
+    class Meta:
+        model = Match
+        fields = ['id', 'date', 'title', 'team1', 'team2', 'team3', 'team4',
+        'team1scorecolumn1', 'team1scorecolumn2', 'team1scorecolumn3', 'team1scorecolumn4', 'team1scorecolumn5',
+        'team2scorecolumn1', 'team2scorecolumn2', 'team2scorecolumn3', 'team2scorecolumn4', 'team2scorecolumn5']
diff --git a/scores/static/scores/style.css b/scores/static/scores/style.css
index f34f9a2..1b1b509 100644
--- a/scores/static/scores/style.css
+++ b/scores/static/scores/style.css
@@ -1,16 +1,19 @@
-a {
+
+html {
+  /* font-size: 30px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
+  /* font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */
+
+  font-family: Helvetica, sans-serif;
+  background-color: #3878D8;
   color: white;
 }
 
-html {
-  font-size: 30px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
-  font-family: 'Open Sans', sans-serif; /* cela devrait être le reste du résultat obtenu à partir de Google fonts */
-  background-color: #438FFF;
+a {
   color: white;
 }
 
 table {
-  font-size: 40px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
+  font-size: 30px; /* px signifie 'pixels': la taille de base pour la police est désormais 10 pixels de haut  */
   font-weight: 600;
 }
 
@@ -20,22 +23,53 @@ table, th, td {
    border-collapse: collapse;
 }
 
+tr {
+  height: 80px;
+}
+
 td {
   padding: 10px;
 }
 
 .score {
-  width: 50px;
+  width: 60px;
   text-align: center;
   vertical-align: middle;
 }
 
+.center {
+  text-align: center;
+  margin: 0 auto;
+}
+
 .match {
   /* display: inline-block; */
-  /* background-color: red; */
+  display:inline-block;
+  width: 45%;
+  padding: 20px;
+
+}
+.smatch {
+  padding-top: 100px;
+  width: 800px;
+  margin: 0 auto;
+
+  /* position: relative;
+  top: 20%; */
+  /* transform: translateY(50%); */
+}
+
+.right {
+  text-align: right;
 }
+.scontainer {
+  display: flex;
+  align-items: center;
+}
+
 
 .container {
   /* width: 100%; */
+      /* text-align:center; */
   /* margin: 0 auto; */
 }
diff --git a/scores/templates/scores/index.html b/scores/templates/scores/index.html
index d2ba35a..f6c7e2f 100644
--- a/scores/templates/scores/index.html
+++ b/scores/templates/scores/index.html
@@ -1,22 +1,75 @@
+<html>
+
 {% load static %}
+<!--
+<script>
+// Set the date we're counting down to
+var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
 
-<html>
+// Update the count down every 1 second
+var x = setInterval(function() {
+
+  // Get today's date and time
+  var now = new Date().getTime();
+
+  // Find the distance between now and the count down date
+  var distance = {{ match.seconds }} * -1;
+
+  // Time calculations for days, hours, minutes and seconds
+  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+  // Display the result in the element with id="demo"
+  document.getElementById("demo").innerHTML = hours + "h "
+  + minutes + "m " + seconds + "s ";
+
+  // If the count down is finished, write some text
+  if (distance < 0) {
+    clearInterval(x);
+    document.getElementById("demo").innerHTML = "Démarrage en cours...";
+  }
+}, 1000);
+</script> -->
 
 <head>
   <link rel="stylesheet" href="{% static 'scores/style.css' %}">
-  <title>Padel kikou</title>
+  <title>Padel</title>
   <!-- <meta http-equiv="refresh" content="5" > -->
 </head>
 
-<!-- <p id="demo"></p> -->
 
 <div class="container">
 {% if matches %}
+{% for match in matches %}
     <div class="match">
-    {% for match in matches %}
-        <h1><a href="/scores/{{ match.id }}/">Cours #{{ match.court }} - {{ match.title }}</a></h1>
 
-        <h3>{{ match.duration }}</h3>
+        <p><a href="/match/{{ match.id }}/">COURS #{{ match.court }}</a></p>
+
+        <h1>{{ match.title }}</h1>
+
+        {% if match.team3 %}
+
+        <table>
+          <tr><td>{{ match.team1 }}</td>
+            {% if match.team1scorecolumn1 %}<td class="score">{{ match.team1scorecolumn1 }}</td>{% endif %}
+          </tr>
+          <tr><td>{{ match.team2 }}</td>
+            {% if match.team1scorecolumn2 %}<td class="score">{{ match.team1scorecolumn2 }}</td>{% endif %}
+          </tr>
+          <tr><td>{{ match.team3 }}</td>
+            {% if match.team1scorecolumn3 %}<td class="score">{{ match.team1scorecolumn3 }}</td>{% endif %}
+          </tr>
+          <tr><td>{{ match.team4 }}</td>
+            {% if match.team1scorecolumn4 %}<td class="score">{{ match.team1scorecolumn4 }}</td>{% endif %}
+          </tr>
+
+          <tr><td>{{ match.team5 }}</td>
+            {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
+          </tr>
+        </table>
+        {% else %}
 
         <table>
           <tr>
@@ -27,54 +80,29 @@
             {% if match.team1scorecolumn4 %}<td class="score">{{ match.team1scorecolumn4 }}</td>{% endif %}
             {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
           </tr>
-            <tr>
-              <td>{{ match.team2 }}</td>
-              {% if match.team2scorecolumn1 %}<td class="score">{{ match.team2scorecolumn1 }}</td>{% endif %}
-              {% if match.team2scorecolumn2 %}<td class="score">{{ match.team2scorecolumn2 }}</td>{% endif %}
-              {% if match.team2scorecolumn3 %}<td class="score">{{ match.team2scorecolumn3 }}</td>{% endif %}
-              {% if match.team2scorecolumn4 %}<td class="score">{{ match.team2scorecolumn4 }}</td>{% endif %}
-              {% if match.team2scorecolumn5 %}<td class="score">{{ match.team2scorecolumn5 }}</td>{% endif %}
-            </tr>
+          <tr>
+            <td>{{ match.team2 }}</td>
+            {% if match.team2scorecolumn1 %}<td class="score">{{ match.team2scorecolumn1 }}</td>{% endif %}
+            {% if match.team2scorecolumn2 %}<td class="score">{{ match.team2scorecolumn2 }}</td>{% endif %}
+            {% if match.team2scorecolumn3 %}<td class="score">{{ match.team2scorecolumn3 }}</td>{% endif %}
+            {% if match.team2scorecolumn4 %}<td class="score">{{ match.team2scorecolumn4 }}</td>{% endif %}
+            {% if match.team2scorecolumn5 %}<td class="score">{{ match.team2scorecolumn5 }}</td>{% endif %}
+          </tr>
         </table>
 
-    {% endfor %}
+        {% endif %}
+
+        <!-- <p id="demo"></p> -->
+
+        <p>{{ match.duration }}</p>
+
     </div>
+    {% endfor %}
 
 {% else %}
-    <p>No matches at the moment...</p>
+    <p class="center">Pas de matchs en cours...</p>
 {% endif %}
 </div>
 
 
-<script>
-// Set the date we're counting down to
-var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
-
-// Update the count down every 1 second
-var x = setInterval(function() {
-
-  // Get today's date and time
-  var now = new Date().getTime();
-
-  // Find the distance between now and the count down date
-  var distance = countDownDate - now;
-
-  // Time calculations for days, hours, minutes and seconds
-  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
-  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
-
-  // Display the result in the element with id="demo"
-  document.getElementById("demo").innerHTML = hours + "h "
-  + minutes + "m " + seconds + "s ";
-
-  // If the count down is finished, write some text
-  if (distance < 0) {
-    clearInterval(x);
-    document.getElementById("demo").innerHTML = "EXPIRED";
-  }
-}, 1000);
-</script>
-
 </html>
diff --git a/scores/templates/scores/match.html b/scores/templates/scores/match.html
new file mode 100644
index 0000000..0dfc185
--- /dev/null
+++ b/scores/templates/scores/match.html
@@ -0,0 +1,104 @@
+<html>
+
+{% load static %}
+
+<!-- <script>
+// Set the date we're counting down to
+var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();
+
+// Update the count down every 1 second
+var x = setInterval(function() {
+
+  // Get today's date and time
+  var now = new Date().getTime();
+
+  // Find the distance between now and the count down date
+  var distance = countDownDate - now;
+
+  // Time calculations for days, hours, minutes and seconds
+  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
+  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+  var seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+  // Display the result in the element with id="demo"
+  document.getElementById("demo").innerHTML = hours + "h "
+  + minutes + "m " + seconds + "s ";
+
+  // If the count down is finished, write some text
+  if (distance < 0) {
+    clearInterval(x);
+    document.getElementById("demo").innerHTML = "EXPIRED";
+  }
+}, 1000);
+</script> -->
+
+<head>
+  <link rel="stylesheet" href="{% static 'scores/style.css' %}">
+  <title>Padel - {{ match.title }} - COURS {{ match.court }}</title>
+  <!-- <meta http-equiv="refresh" content="5" > -->
+</head>
+
+<!-- <p id="demo"></p> -->
+
+<div class="scontainer">
+{% if match %}
+    <div class="smatch">
+
+      <p>COURS {{ match.court }}</p>
+
+      <h1>{{ match.title }}</h1>
+
+      {% if match.team3 %}
+
+      <table>
+        <tr><td>{{ match.team1 }}</td>
+          {% if match.team1scorecolumn1 %}<td class="score">{{ match.team1scorecolumn1 }}</td>{% endif %}
+        </tr>
+        <tr><td>{{ match.team2 }}</td>
+          {% if match.team1scorecolumn2 %}<td class="score">{{ match.team1scorecolumn2 }}</td>{% endif %}
+        </tr>
+        <tr><td>{{ match.team3 }}</td>
+          {% if match.team1scorecolumn3 %}<td class="score">{{ match.team1scorecolumn3 }}</td>{% endif %}
+        </tr>
+        <tr><td>{{ match.team4 }}</td>
+          {% if match.team1scorecolumn4 %}<td class="score">{{ match.team1scorecolumn4 }}</td>{% endif %}
+        </tr>
+
+        <tr><td>{{ match.team5 }}</td>
+          {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
+        </tr>
+      </table>
+      {% else %}
+
+      <table>
+        <tr>
+          <td>{{ match.team1 }}</td>
+          {% if match.team1scorecolumn1 %}<td class="score">{{ match.team1scorecolumn1 }}</td>{% endif %}
+          {% if match.team1scorecolumn2 %}<td class="score">{{ match.team1scorecolumn2 }}</td>{% endif %}
+          {% if match.team1scorecolumn3 %}<td class="score">{{ match.team1scorecolumn3 }}</td>{% endif %}
+          {% if match.team1scorecolumn4 %}<td class="score">{{ match.team1scorecolumn4 }}</td>{% endif %}
+          {% if match.team1scorecolumn5 %}<td class="score">{{ match.team1scorecolumn5 }}</td>{% endif %}
+        </tr>
+        <tr>
+          <td>{{ match.team2 }}</td>
+          {% if match.team2scorecolumn1 %}<td class="score">{{ match.team2scorecolumn1 }}</td>{% endif %}
+          {% if match.team2scorecolumn2 %}<td class="score">{{ match.team2scorecolumn2 }}</td>{% endif %}
+          {% if match.team2scorecolumn3 %}<td class="score">{{ match.team2scorecolumn3 }}</td>{% endif %}
+          {% if match.team2scorecolumn4 %}<td class="score">{{ match.team2scorecolumn4 }}</td>{% endif %}
+          {% if match.team2scorecolumn5 %}<td class="score">{{ match.team2scorecolumn5 }}</td>{% endif %}
+        </tr>
+      </table>
+
+      {% endif %}
+
+        <p>{{ match.duration }}</p>
+
+    </div>
+{% else %}
+    <p class="center">No matches at the moment...</p>
+{% endif %}
+</div>
+
+
+</html>
diff --git a/scores/urls.py b/scores/urls.py
index 0bc9ea4..d780f10 100644
--- a/scores/urls.py
+++ b/scores/urls.py
@@ -20,4 +20,5 @@ from . import views
 
 urlpatterns = [
     path('', views.index, name='index'),
+    path('match/<int:match_id>/', views.match, name='match'),
 ]
diff --git a/scores/views.py b/scores/views.py
index c8d7389..eb97335 100644
--- a/scores/views.py
+++ b/scores/views.py
@@ -1,12 +1,42 @@
-from django.shortcuts import render
+from django.shortcuts import render, get_object_or_404
 from django.http import HttpResponse
 from django.template import loader
+from django.contrib.auth.models import User
 from .models import Match
+from .serializers import UserSerializer, MatchSerializer
+from rest_framework import viewsets
+from rest_framework import permissions
 
 def index(request):
-    matches = Match.objects.order_by('-court')
+    matches = Match.objects.order_by('court')
     template = loader.get_template('scores/index.html')
     context = {
         'matches': matches,
     }
     return HttpResponse(template.render(context, request))
+
+def match(request, match_id):
+
+    match = get_object_or_404(Match, pk=match_id)
+    template = loader.get_template('scores/match.html')
+    context = {
+        'match': match,
+    }
+    return HttpResponse(template.render(context, request))
+
+
+class UserViewSet(viewsets.ModelViewSet):
+    """
+    API endpoint that allows users to be viewed or edited.
+    """
+    queryset = User.objects.all().order_by('-date_joined')
+    serializer_class = UserSerializer
+    permission_classes = [permissions.IsAuthenticated]
+
+class MatchViewSet(viewsets.ModelViewSet):
+    """
+    API endpoint that allows matches to be viewed or edited.
+    """
+    queryset = Match.objects.all().order_by('court')
+    serializer_class = MatchSerializer
+    permission_classes = [permissions.IsAuthenticated]