diff --git a/front/style/visualizer.css b/front/style/visualizer.css
new file mode 100644
index 0000000..3798147
--- /dev/null
+++ b/front/style/visualizer.css
@@ -0,0 +1,22 @@
+#main {
+    height: 100%;
+    width: 100%;
+    background-color: var(--background-color);
+}
+
+#topbar {
+    display: flex;
+    background-color: var(--main-color);
+    justify-content: center;
+    align-items: center;
+}
+
+.h1 {
+    text-align: center;
+    margin-top: 0;
+}
+
+.id {
+    width: 1000px;
+    height: 1000px;
+}
diff --git a/front/views/Visualizer.tsx b/front/views/Visualizer.tsx
new file mode 100644
index 0000000..22d8fd9
--- /dev/null
+++ b/front/views/Visualizer.tsx
@@ -0,0 +1,16 @@
+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>
+            <img id="court" src={Court} style={style} alt="Basketball Court" />
+        </div>
+    );
+}
diff --git a/public/index.php b/public/index.php
index e81d098..c75755a 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]/view", 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..93a83db
--- /dev/null
+++ b/src/Controller/VisualizerController.php
@@ -0,0 +1,34 @@
+<?php
+
+namespace App\Controller;
+
+use App\Data\TacticInfo;
+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()]);
+
+    }
+
+}
\ No newline at end of file