diff --git a/front/style/visualizer.css b/front/style/visualizer.css
new file mode 100644
index 0000000..2d1a73f
--- /dev/null
+++ b/front/style/visualizer.css
@@ -0,0 +1,30 @@
+#main {
+    height: 100vh;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+#topbar {
+    display: flex;
+    background-color: var(--main-color);
+    justify-content: center;
+    align-items: center;
+}
+
+h1 {
+    text-align: center;
+    margin-top: 0;
+}
+
+#court-container {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    background-color: var(--main-color);
+}
+
+#court {
+    max-width: 80%;
+    max-height: 80%;
+}
diff --git a/front/views/Visualizer.tsx b/front/views/Visualizer.tsx
new file mode 100644
index 0000000..ddf7fe2
--- /dev/null
+++ b/front/views/Visualizer.tsx
@@ -0,0 +1,24 @@
+import React, { CSSProperties, useState } from "react"
+import "../style/visualizer.css"
+import Court from "../assets/basketball_court.svg"
+
+
+export default function Visualizer({id, name}: { id: number; name: string }) {
+    const [style, setStyle] = useState<CSSProperties>({});
+
+    return (
+        <div id="main">
+            <div id="topbar">
+                <h1>{name}</h1>
+            </div>
+            <div id="court-container">
+                <img
+                    id="court"
+                    src={Court}
+                    style={style}
+                    alt="Basketball Court"
+                />
+            </div>
+        </div>
+    );
+}
diff --git a/public/index.php b/public/index.php
index e81d098..7f19f63 100644
--- a/public/index.php
+++ b/public/index.php
@@ -16,6 +16,7 @@ use App\Model\TacticModel;
 use Twig\Loader\FilesystemLoader;
 use App\Validation\ValidationFail;
 use App\Controller\ErrorController;
+use App\Controller\VisualizerController;
 
 $loader = new FilesystemLoader('../src/Views/');
 $twig = new \Twig\Environment($loader);
@@ -29,6 +30,7 @@ $router->setBasePath($basePath);
 
 $sampleFormController = new SampleFormController(new FormResultGateway($con));
 $editorController = new EditorController(new TacticModel(new TacticInfoGateway($con)));
+$visualizerController = new VisualizerController(new TacticModel(new TacticInfoGateway($con)));
 
 
 $router->map("GET", "/", fn() => $sampleFormController->displayFormReact());
@@ -37,6 +39,7 @@ $router->map("GET", "/twig", fn() => $sampleFormController->displayFormTwig());
 $router->map("POST", "/submit-twig", fn() => $sampleFormController->submitFormTwig($_POST));
 $router->map("GET", "/tactic/new", fn() => $editorController->makeNew());
 $router->map("GET", "/tactic/[i:id]/edit", fn(int $id) => $editorController->openEditorFor($id));
+$router->map("GET", "/tactic/[i:id]", fn(int $id) => $visualizerController->openVisualizer($id));
 
 $match = $router->match();
 
diff --git a/sql/.guard b/sql/.guard
new file mode 100644
index 0000000..e69de29
diff --git a/src/Controller/VisualizerController.php b/src/Controller/VisualizerController.php
new file mode 100644
index 0000000..3c8b55e
--- /dev/null
+++ b/src/Controller/VisualizerController.php
@@ -0,0 +1,32 @@
+<?php
+
+namespace App\Controller;
+
+use App\Http\HttpCodes;
+use App\Http\HttpResponse;
+use App\Http\JsonHttpResponse;
+use App\Http\ViewHttpResponse;
+use App\Model\TacticModel;
+
+class VisualizerController {
+    private TacticModel $tacticModel;
+
+    /**
+     * @param TacticModel $tacticModel
+     */
+
+    public function __construct(TacticModel $tacticModel) {
+        $this->tacticModel = $tacticModel;
+    }
+
+    public function openVisualizer(int $id): HttpResponse {
+        $tactic = $this->tacticModel->get($id);
+
+        if ($tactic == null) {
+            return new JsonHttpResponse("la tactique " . $id . " n'existe pas", HttpCodes::NOT_FOUND);
+        }
+
+        return ViewHttpResponse::react("views/Visualizer.tsx", ["name" => $tactic->getName()]);
+
+    }
+}