diff --git a/front/assets/court/court.svg b/front/assets/court/court.svg
new file mode 100644
index 0000000..e01fd58
--- /dev/null
+++ b/front/assets/court/court.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink"
+     version="1.1"
+     width="100"
+     height="50"
+     viewBox="7.5 18.5 85.5 56"
+     style="enable-background:new 7.5 18.5 85.5 56;"
+     xml:space="preserve">
+
+    <style type="text/css">
+        .st0{fill:none;stroke:#000000;stroke-miterlimit:10;}
+        .st1{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-dasharray:1.4358,1.4358;}
+        .st2{fill:none;stroke:#000000;stroke-width:0.5;stroke-miterlimit:10;}
+        .st3{fill:none;stroke:#000000;stroke-miterlimit:10;stroke-dasharray:1.4407,1.4407;}
+    </style>
+    <polygon class="st0" points="92.1,72.1 50.1,72.1 8.1,72.1 8.1,21.2 50.1,21.2 92.1,21.2 "/>
+    <line class="st0" x1="50.1" y1="21.2" x2="50.1" y2="72.1"/>
+    <circle class="st0" cx="50.1" cy="46.6" r="6.4"/>
+    <path class="st0" d="M8.1,66h7.2c10.1,0,18.2-8.7,18.2-19.3s-8.2-19.3-18.2-19.3H8.1"/>
+    <path class="st0" d="M8.1,40.2h19c3.6,0,6.4,2.9,6.4,6.4s-2.9,6.4-6.4,6.4h-19"/>
+    <line class="st0" x1="27.1" y1="40.2" x2="27.1" y2="53.1"/>
+    <g>
+        <g><path class="st0" d="M27.4,40.3c-0.3,0-0.5,0-0.7,0"/>
+            <path class="st1"
+                  d="M25.3,40.7c-2.5,0.9-4.3,3.3-4.3,6.1c0,3,2.2,5.6,5,6.2"/>
+            <path
+                    class="st0" d="M26.7,53c0.2,0,0.5,0,0.7,0"/>
+        </g>
+    </g>
+    <line class="st0" x1="16.2" y1="53.1" x2="16.2" y2="54.1"/>
+    <line class="st2" x1="19.3" y1="53.1" x2="19.3" y2="54.1"/>
+    <line class="st2" x1="22.4" y1="53.1" x2="22.4" y2="54.1"/>
+    <line class="st2" x1="25.7" y1="53.1" x2="25.7" y2="54.1"/>
+    <line class="st0" x1="16.1" y1="39.2" x2="16.1" y2="40.2"/>
+    <line class="st2" x1="19.2" y1="39.2" x2="19.2" y2="40.2"/>
+    <line class="st2" x1="22.3" y1="39.2" x2="22.3" y2="40.2"/>
+    <line class="st2" x1="25.6" y1="39.2" x2="25.6" y2="40.2"/>
+    <line class="st0" x1="27.1" y1="40.2" x2="27.1" y2="53.1"/>
+    <path class="st0" d="M92.1,66.1h-7.2c-10.1,0-18.2-8.7-18.2-19.3s8.2-19.3,18.2-19.3h7.2"/>
+    <path class="st0" d="M92.1,40.3h-19c-3.6,0-6.4,2.9-6.4,6.4s2.9,6.4,6.4,6.4h19"/>
+    <line class="st0" x1="84" y1="53.2" x2="84" y2="54.1"/>
+    <line class="st2" x1="80.9" y1="53.2" x2="80.9" y2="54.1"/>
+    <line class="st2" x1="77.9" y1="53.2" x2="77.9" y2="54.1"/>
+    <line class="st2" x1="74.5" y1="53.2" x2="74.5" y2="54.1"/>
+    <line class="st0" x1="84.1" y1="39.3" x2="84.1" y2="40.3"/>
+    <line class="st2" x1="81" y1="39.3" x2="81" y2="40.3"/>
+    <line class="st2" x1="77.9" y1="39.3" x2="77.9" y2="40.3"/>
+    <line class="st2" x1="74.6" y1="39.3" x2="74.6" y2="40.3"/>
+    <line class="st0" x1="73.1" y1="40.3" x2="73.1" y2="53.2"/>
+    <line class="st2" x1="36.2" y1="70" x2="36.2" y2="74.1"/>
+    <line class="st2" x1="63.5" y1="70" x2="63.5" y2="74.1"/>
+    <line class="st2" x1="36.2" y1="19.1" x2="36.2" y2="23.2"/>
+    <line class="st2" x1="63.5" y1="19.1" x2="63.5" y2="23.2"/>
+    <g xmlns="http://www.w3.org/2000/svg">
+        <g>
+            <path class="st0" d="M72.9,40.3c0.3,0,0.5,0,0.7,0"/>
+            <path class="st3"
+                  d="M75,40.7c2.5,0.9,4.3,3.3,4.3,6.1c0,3-2.2,5.6-5.1,6.2"/>
+            <path
+                    class="st0" d="M73.5,53.1c-0.2,0-0.5,0-0.7,0"/>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/front/tactic/Ball.ts b/front/tactic/Ball.ts
new file mode 100644
index 0000000..443e4f9
--- /dev/null
+++ b/front/tactic/Ball.ts
@@ -0,0 +1,11 @@
+export interface Ball {
+    /**
+     * Percentage of the player's position to the bottom (0 means top, 1 means bottom, 0.5 means middle)
+     */
+    bottom_percentage: number
+
+    /**
+     * Percentage of the player's position to the right (0 means left, 1 means right, 0.5 means middle)
+     */
+    right_percentage: number
+}