diff --git a/public/assets/css/app.css b/public/assets/css/app.css
index 1488b65..c8bc471 100644
--- a/public/assets/css/app.css
+++ b/public/assets/css/app.css
@@ -14,3 +14,26 @@
 .table.is-full {
     width: 100%;
 }
+
+.snapshot-link {
+    display: inline-block;
+    width: 33%;
+    padding: 10px;
+    margin-bottom: 10px;
+}
+
+.snapshot-link img {
+    width: 100%;
+}
+
+@media screen and (max-width: 1024px) {
+    .snapshot-link {
+        width: 49%;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .snapshot-link {
+        width: 100%;
+    }
+}
diff --git a/src/Controller/CameraController.php b/src/Controller/CameraController.php
new file mode 100644
index 0000000..7a54ed3
--- /dev/null
+++ b/src/Controller/CameraController.php
@@ -0,0 +1,19 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\Filesystem\Filesystem;
+use App\Motion\SnapshotRepository;
+
+class CameraController extends AbstractController
+{
+    /**
+     * @Route("/camera", name="camera")
+     */
+    public function camera()
+    {
+        return $this->render('camera.html.twig');
+    }
+}
diff --git a/src/Controller/EventController.php b/src/Controller/EventController.php
new file mode 100644
index 0000000..26405aa
--- /dev/null
+++ b/src/Controller/EventController.php
@@ -0,0 +1,23 @@
+<?php
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\Routing\Annotation\Route;
+use Symfony\Component\Filesystem\Filesystem;
+use App\Motion\SnapshotRepository;
+
+class EventController extends AbstractController
+{
+    /**
+     * @Route("/events", name="events")
+     */
+    public function events(SnapshotRepository $snapshotRepository)
+    {
+        $snapshots = $snapshotRepository->find();
+
+        return $this->render('events.html.twig', [
+            'snapshots' => $snapshots,
+        ]);
+    }
+}
diff --git a/src/Controller/MonitoringController.php b/src/Controller/MonitoringController.php
index bda7e9a..0acd845 100644
--- a/src/Controller/MonitoringController.php
+++ b/src/Controller/MonitoringController.php
@@ -16,16 +16,4 @@ class MonitoringController extends AbstractController
     {
         return $this->render('charts.html.twig');
     }
-
-    /**
-     * @Route("/camera", name="camera")
-     */
-    public function camera(SnapshotRepository $snapshotRepository)
-    {
-        $snapshots = $snapshotRepository->find();
-
-        return $this->render('camera.html.twig', [
-            'snapshots' => $snapshots,
-        ]);
-    }
 }
diff --git a/src/Motion/Snapshot.php b/src/Motion/Snapshot.php
index 8d55ead..39d6005 100644
--- a/src/Motion/Snapshot.php
+++ b/src/Motion/Snapshot.php
@@ -13,7 +13,9 @@ class Snapshot
 {
     protected DateTime $date;
 
-    protected string $path;
+    protected string $movie;
+    
+    protected string $thumbnail;
 
     public function setDate(DateTime $date): self
     {
@@ -27,15 +29,27 @@ class Snapshot
         return $this->date;
     }
 
-    public function setPath(string $path): self
+    public function setMovie(string $movie): self
     {
-        $this->path = $path;
+        $this->movie = $movie;
 
         return $this;
     }
 
-    public function getPath(): ? string
+    public function getMovie(): ? string
     {
-        return $this->path;
+        return $this->movie;
+    }
+
+    public function setThumbnail(string $thumbnail): self
+    {
+        $this->thumbnail = $thumbnail;
+
+        return $this;
+    }
+
+    public function getThumbnail(): ? string
+    {
+        return $this->thumbnail;
     }
 }
diff --git a/src/Motion/SnapshotRepository.php b/src/Motion/SnapshotRepository.php
index a34ff66..3e77ba2 100644
--- a/src/Motion/SnapshotRepository.php
+++ b/src/Motion/SnapshotRepository.php
@@ -38,10 +38,14 @@ class SnapshotRepository
             $date = basename($file->getPath());
             $time = str_replace(['.mp4', '-'], ['', ':'], $file->getBasename());
 
+            $movie = $file->getPath().'/'.$file->getBasename();
+            $thumbnail = str_replace('.mp4', '.jpg', $movie);
+
             $snapshot = new Snapshot();
             $snapshot
                 ->setDate(new \DateTime($date.' '.$time))
-                ->setPath($file->getPath().'/'.$file->getBasename());
+                ->setMovie($movie)
+                ->setThumbnail($thumbnail);
 
             $objects[] = $snapshot;
         }
diff --git a/templates/base.html.twig b/templates/base.html.twig
index e154270..1c7ab6f 100644
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@@ -34,6 +34,10 @@
                     <a class="navbar-item {% if app.request.attributes.get('_route') == 'camera' %}is-active{% endif %}" href="{{ path('camera') }}">
                         Caméra
                     </a>
+
+                    <a class="navbar-item {% if app.request.attributes.get('_route') == 'events' %}is-active{% endif %}" href="{{ path('events') }}">
+                        Évènements
+                    </a>
                 </div>
             </div>
         </nav>
diff --git a/templates/camera.html.twig b/templates/camera.html.twig
index 2216eb7..1fcbb0e 100644
--- a/templates/camera.html.twig
+++ b/templates/camera.html.twig
@@ -7,48 +7,5 @@
         <div class="camera-wrapper">
             <img src="https://api:WFVbTdZbad1EGC3vtwazECVqVzaD@terrarium-proxy.deblan.fr/proxy/camera1" class="box camera" alt="Caméra 1">
         </div>
-
-        <hr>
-
-        {% if snapshots|length %}
-            <div class="title is-4">
-                Évènements
-            </div>
-
-            <table class="table is-full">
-                <thead>
-                    <tr>
-                        <th width="30%">Date</th>
-                        <th>Fichier</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for snapshot in snapshots %}
-                        <tr>
-                            <td>{{ snapshot.date.format('d/m/Y H:i:s') }}</td>
-                            <td>
-                                <a href="{{ asset(snapshot.path) }}" class="snapshot-link">
-                                    {{ snapshot.path }}
-                                </a>
-                            </td>
-                        </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-        {% endif %}
     </div>
-
-    <div id="snapshot-view"></div>
-
-    <template id="snapshot-template">
-        <div class="modal is-active">
-            <div class="modal-background"></div>
-            <div class="modal-content" controls>
-                <video controls class="image">
-                    <source src="{src}" type="video/mp4" />
-                </video>
-            </div>
-            <button class="modal-close is-large" aria-label="close"></button>
-        </div>
-    </template>
 {% endblock %}
diff --git a/templates/events.html.twig b/templates/events.html.twig
new file mode 100644
index 0000000..363930f
--- /dev/null
+++ b/templates/events.html.twig
@@ -0,0 +1,27 @@
+{% extends 'base.html.twig' %}
+
+{% block title %}{{ parent() }} - Évènements{% endblock %}
+
+{% block body %}
+    <div class="container">
+        {% for snapshot in snapshots|reverse %}
+            <a href="{{ asset(snapshot.movie) }}" class="snapshot-link">
+                <img src="{{ snapshot.thumbnail }}" alt="{{ snapshot.date.format('d/m/Y H:i:s') }}" class="box">
+            </a>
+        {% endfor %}
+    </div>
+
+    <div id="snapshot-view"></div>
+
+    <template id="snapshot-template">
+        <div class="modal is-active">
+            <div class="modal-background"></div>
+            <div class="modal-content" controls>
+                <video controls class="image">
+                    <source src="{src}" type="video/mp4" />
+                </video>
+            </div>
+            <button class="modal-close is-large" aria-label="close"></button>
+        </div>
+    </template>
+{% endblock %}