diff --git a/assets/js/app.js b/assets/js/app.js
index 7f88668..b6d8f5d 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -1,8 +1,23 @@
-import {Socket} from "phoenix"
-import {LiveSocket} from "phoenix_live_view"
+import { Socket } from "phoenix"
+import { LiveSocket } from "phoenix_live_view"
+import Alpine from "alpinejs"
+import focus from "@alpinejs/focus"
+
+window.Alpine = Alpine
+Alpine.plugin(focus)
+Alpine.start()
 
 let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
-let liveSocket = new LiveSocket("/live", Socket, {params: {_csrf_token: csrfToken}})
+let liveSocket = new LiveSocket("/live", Socket, {
+  params: { _csrf_token: csrfToken },
+  dom: {
+    onBeforeElUpdated(from, to) {
+      if (from._x_dataStack) {
+        window.Alpine.clone(from, to)
+      }
+    }
+  }
+})
 
 // Connect if there are any LiveViews on the page
 liveSocket.connect()
diff --git a/assets/package.json b/assets/package.json
index c0eebd1..6c45be9 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -10,7 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "alpinejs": "^3.12.3"
+    "@alpinejs/focus": "^3.13.3",
+    "alpinejs": "^3.13.3"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",
diff --git a/assets/yarn.lock b/assets/yarn.lock
index 7d80288..a5e0ebc 100644
--- a/assets/yarn.lock
+++ b/assets/yarn.lock
@@ -7,6 +7,14 @@
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
+"@alpinejs/focus@^3.13.3":
+  version "3.13.3"
+  resolved "https://registry.yarnpkg.com/@alpinejs/focus/-/focus-3.13.3.tgz#fd06d055175ff64b07a7e4a64fa01a4ad85104dd"
+  integrity sha512-fTRX/9wOfysyZ1PJ4gHeUnmiNTIgqBDIqKxeP5iMvj1UHD3TFLDXllvoIKH3ezqcsyQZqxd/q1MFM7dlIhkmeg==
+  dependencies:
+    focus-trap "^6.9.4"
+    tabbable "^5.3.3"
+
 "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz#7e02e6eb5df901aaedb08514203b096614024098"
@@ -87,10 +95,10 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.1.5.tgz#74ee3aad995d0a3996a6bb9533d4d280514ede03"
   integrity sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA==
 
-alpinejs@^3.12.3:
-  version "3.12.3"
-  resolved "https://registry.yarnpkg.com/alpinejs/-/alpinejs-3.12.3.tgz#d7f311b39318c5144e99205ab69557c0d90a552a"
-  integrity sha512-fLz2dfYQ3xCk7Ip8LiIpV2W+9brUyex2TAE7Z0BCvZdUDklJE+n+a8gCgLWzfZ0GzZNZu7HUP8Z0z6Xbm6fsSA==
+alpinejs@^3.13.3:
+  version "3.13.3"
+  resolved "https://registry.yarnpkg.com/alpinejs/-/alpinejs-3.13.3.tgz#92eb7e869b99ff548e7a55044e45660597cf530b"
+  integrity sha512-WZ6WQjkAOl+WdW/jukzNHq9zHFDNKmkk/x6WF7WdyNDD6woinrfXCVsZXm0galjbco+pEpYmJLtwlZwcOfIVdg==
   dependencies:
     "@vue/reactivity" "~3.1.1"
 
@@ -272,6 +280,13 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
+focus-trap@^6.9.4:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-6.9.4.tgz#436da1a1d935c48b97da63cd8f361c6f3aa16444"
+  integrity sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==
+  dependencies:
+    tabbable "^5.3.3"
+
 fraction.js@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
@@ -628,6 +643,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+tabbable@^5.3.3:
+  version "5.3.3"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"
+  integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==
+
 tailwindcss@^3, tailwindcss@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.3.2.tgz#2f9e35d715fdf0bbf674d90147a0684d7054a2d3"
diff --git a/config/config.exs b/config/config.exs
index 4c697fb..16d1e7d 100644
--- a/config/config.exs
+++ b/config/config.exs
@@ -9,7 +9,7 @@ import Config
 config :esbuild,
   path: System.get_env("MIX_ESBUILD_PATH"),
   default: [
-    args: ~w(js/app.js --bundle --target=es2016 --outdir=../priv/static/js --external:/images/*),
+    args: ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/js --external:/images/*),
     cd: Path.expand("../assets", __DIR__),
     env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
   ]
diff --git a/lib/lanpartyseating_web/components/cancellation_modal.ex b/lib/lanpartyseating_web/components/cancellation_modal.ex
index b530608..dc6827e 100644
--- a/lib/lanpartyseating_web/components/cancellation_modal.ex
+++ b/lib/lanpartyseating_web/components/cancellation_modal.ex
@@ -10,110 +10,133 @@ defmodule CancellationModalComponent do
     case assigns.status do
       :available ->
         ~H"""
-          <!-- The button to open modal -->
-          <label for={"station-modal-#{@station.station_number}"} class="btn btn-info"><%= @station.station_number %></label>
-
-          <!-- Put this part before </body> tag -->
-          <input type="checkbox" id={"station-modal-#{@station.station_number}"} class="modal-toggle" />
-          <div class="modal modal-bottom sm:modal-middle">
-            <div class="modal-box">
-
-              <h3 class="text-lg font-bold">You have selected station <%= @station.station_number %></h3>
-              <p class="py-4">Do you want to close this station?</p>
-
-              <form phx-submit="close_station">
-                <input type="hidden" name="station_number" value={"#{@station.station_number}"}>
-
-                <%= if !is_nil(@error) do %>
-                  <p class="text-error"><%= @error %></p>
-                <% end %>
-                <br/><br/>
-
-                <div class="modal-action">
-                  <label for={"station-modal-#{@station.station_number}"} class="btn btn-error">X</label>
-                  <button for={"station-modal-#{@station.station_number}"} class="btn btn-success" type="submit">✓</button>
-                </div>
-              </form>
-            </div>
+          <div class="flex flex-col h-14 flex-1 grow mx-1 " x-data="">
+            <!-- The button to open modal -->
+            <label
+              class="btn btn-info"
+              x-on:click={"$refs.open_station_modal_#{@station.station_number}.showModal()"}>
+              <%= @station.station_number %>
+            </label>
+
+            <dialog class="modal" x-ref={"open_station_modal_#{@station.station_number}"}>
+              <div class="modal-box">
+                <h3 class="text-lg font-bold">You have selected station <%= @station.station_number %></h3>
+                <p class="py-4">Do you want to close this station?</p>
+                <form method="dialog">
+                  <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+                </form>
+                <form phx-submit="close_station">
+                  <input type="hidden" name="station_number" value={"#{@station.station_number}"}>
+
+                  <%= if !is_nil(@error) do %>
+                    <p class="text-error"><%= @error %></p>
+                  <% end %>
+                  <br/><br/>
+
+                  <div class="modal-action">
+                    <button class="btn btn-success" type="submit">✓</button>
+                  </div>
+                </form>
+              </div>
+            </dialog>
           </div>
         """
 
       :occupied ->
         ~H"""
-          <!-- The button to open modal -->
-        <label for={"station-modal-#{@station.station_number}"} class="btn btn-warning flex flex-col" >
-          <div >
-            <%= @station.station_number %>
-          </div>
-          Until <%= Calendar.strftime(
-            List.first(@station.reservations).end_date |> Timex.to_datetime("America/Montreal"),
-                "%H:%M"
-              ) %>
-        </label>
-
-          <!-- Put this part before </body> tag -->
-          <input type="checkbox" id={"station-modal-#{@station.station_number}"} class="modal-toggle" />
-          <div class="modal modal-bottom sm:modal-middle">
-            <div class="modal-box">
-
-              <h3 class="text-lg font-bold">You have selected station <%= @station.station_number %></h3>
-              <p class="py-4">Occupied by badge <b>#<%= @reservation.badge %></b> *REPLACE WITH NAME*</p>
-              <p>The reservation will end at
-              <b><%= Calendar.strftime(
-                @reservation.end_date |> Timex.to_datetime("America/Montreal"),
-                "%H:%M"
-              ) %> *REPLACE WITH COUNTDOWN*</b>
-              </p>
-              <p class="py-4">Enter a reason for canceling the reservation</p>
-
-              <form phx-submit="cancel_station">
-                <input type="hidden" name="station_id" value={"#{@station.id}"}>
-                <input type="hidden" name="station_number" value={"#{@station.station_number}"}>
-                <input type="text" placeholder="Reason" value="Leaving early" class="w-full max-w-xs input input-bordered" name="cancel_reason"/>
-
-                <div class="modal-action">
-                  <label for={"station-modal-#{@station.station_number}"} class="btn btn-error">Close</label>
-                  <button for={"station-modal-#{@station.station_number}"} class="btn btn-success" type="submit" onclick={"document.getElementById('station-modal-#{@station.station_number}').checked=false"}>Confirm cancelation</button>
-                </div>
-              </form>
-            </div>
+          <div class="flex flex-col h-14 flex-1 grow mx-1 " x-data="">
+            <!-- The button to open modal -->
+            <label
+              class="btn btn-warning flex flex-col"
+              x-on:click={"$refs.open_station_modal_#{@station.station_number}.showModal()"}>
+              <div >
+                <%= @station.station_number %>
+              </div>
+              Until <%= Calendar.strftime(
+                List.first(@station.reservations).end_date |> Timex.to_datetime("America/Montreal"),
+                    "%H:%M"
+                  ) %>
+            </label>
+
+            <!-- Put this part before </body> tag -->
+            <dialog class="modal" x-ref={"open_station_modal_#{@station.station_number}"}>
+              <div class="modal-box">
+                <h3 class="text-lg font-bold">You have selected station <%= @station.station_number %></h3>
+                <p class="py-4">Occupied by badge <b>#<%= @reservation.badge %></b> *REPLACE WITH NAME*</p>
+                <p>The reservation will end at
+                <b><%= Calendar.strftime(
+                  @reservation.end_date |> Timex.to_datetime("America/Montreal"),
+                  "%H:%M"
+                ) %> *REPLACE WITH COUNTDOWN*</b>
+                </p>
+                <p class="py-4">Enter a reason for canceling the reservation</p>
+                <form method="dialog">
+                  <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+                </form>
+
+                <form phx-submit="cancel_station">
+                  <input type="hidden" name="station_id" value={"#{@station.id}"}>
+                  <input type="hidden" name="station_number" value={"#{@station.station_number}"}>
+                  <input type="text" placeholder="Reason" value="Leaving early" class="w-full max-w-xs input input-bordered" name="cancel_reason"/>
+
+                  <div class="modal-action">
+                    <button class="btn btn-success" type="submit" x-on:click="$refs.new_tournament_modal.close()">Confirm cancelation</button>
+                  </div>
+                </form>
+              </div>
+            </dialog>
           </div>
         """
 
       :broken ->
         ~H"""
-          <!-- The button to open modal -->
-          <label for={"station-modal-#{@station.station_number}"} class="btn btn-error"><%= @station.station_number %></label>
-
-          <!-- Put this part before </body> tag -->
-          <input type="checkbox" id={"station-modal-#{@station.station_number}"} class="modal-toggle" />
-          <div class="modal modal-bottom sm:modal-middle">
-            <div class="modal-box">
-
-              <h3 class="text-lg font-bold">You have selected station <%= @station.station_number %></h3>
-              <p class="py-4">Do you want to re-open this station?</p>
-
-              <form phx-submit="open_station">
-                <input type="hidden" name="station_number" value={"#{@station.station_number}"}>
-
-                <%= if !is_nil(@error) do %>
-                  <p class="text-error"><%= @error %></p>
-                <% end %>
-                <br/><br/>
-
-                <div class="modal-action">
-                  <label for={"station-modal-#{@station.station_number}"} class="btn btn-error">X</label>
-                  <button for={"station-modal-#{@station.station_number}"} class="btn btn-success" type="submit">✓</button>
-                </div>
-              </form>
-            </div>
+          <div class="flex flex-col h-14 flex-1 grow mx-1 " x-data="">
+            <!-- The button to open modal -->
+            <label
+              class="btn btn-error"
+              x-on:click={"$refs.open_station_modal_#{@station.station_number}.showModal()"}>
+              <%= @station.station_number %>
+            </label>
+
+            <!-- Put this part before </body> tag -->
+            <input type="checkbox" id={"station-modal-#{@station.station_number}"} class="modal-toggle" />
+            <dialog class="modal" x-ref={"open_station_modal_#{@station.station_number}"}>
+              <div class="modal-box">
+
+                <h3 class="text-lg font-bold">You have selected station <%= @station.station_number %></h3>
+                <p class="py-4">Do you want to re-open this station?</p>
+                <form method="dialog">
+                  <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+                </form>
+
+                <form phx-submit="open_station">
+                  <input type="hidden" name="station_number" value={"#{@station.station_number}"}>
+
+                  <%= if !is_nil(@error) do %>
+                    <p class="text-error"><%= @error %></p>
+                  <% end %>
+                  <br/><br/>
+
+                  <div class="modal-action">
+                    <label class="btn btn-error">X</label>
+                    <button class="btn btn-success" type="submit">✓</button>
+                  </div>
+                </form>
+              </div>
+            </dialog>
           </div>
         """
 
       :reserved ->
         ~H"""
-          <!-- The button to open modal -->
-          <label for={"seat-modal-#{@station.station_number}"} class="btn btn-active"><%= @station.station_number %></label>
+          <div class="flex flex-col h-14 flex-1 grow mx-1 " x-data="">
+            <!-- The button to open modal -->
+            <label
+              class="btn btn-active"
+              x-on:click={"$refs.open_station_modal_#{@station.station_number}.showModal()"}>
+              <%= @station.station_number %>
+            </label>
+          </div>
         """
     end
   end
diff --git a/lib/lanpartyseating_web/components/display_modal.ex b/lib/lanpartyseating_web/components/display_modal.ex
index 5f742de..c4faf53 100644
--- a/lib/lanpartyseating_web/components/display_modal.ex
+++ b/lib/lanpartyseating_web/components/display_modal.ex
@@ -19,33 +19,33 @@ defmodule DisplayModalComponent do
       :available ->
         ~H"""
           <!-- The button to open modal -->
-          <label for={"seat-modal-#{assigns.station.station_number}"} class="btn btn-info"><%= assigns.station.station_number %></label>
+          <label class="btn btn-info"><%= assigns.station.station_number %></label>
         """
 
       :occupied ->
         ~H"""
-        <!-- The button to open modal -->
-        <label class="btn btn-warning flex flex-col">
-          <div >
-            <%= assigns.station.station_number %>
-          </div>
-          Until <%= Calendar.strftime(
-            List.first(assigns.station.reservations).end_date |> Timex.to_datetime("America/Montreal"),
-                "%H:%M"
-              ) %>
-        </label>
+          <!-- The button to open modal -->
+          <label class="btn btn-warning flex flex-col">
+            <div >
+              <%= assigns.station.station_number %>
+            </div>
+            Until <%= Calendar.strftime(
+              List.first(assigns.station.reservations).end_date |> Timex.to_datetime("America/Montreal"),
+                  "%H:%M"
+                ) %>
+          </label>
         """
 
       :broken ->
         ~H"""
           <!-- The button to open modal -->
-          <label for={"seat-modal-#{assigns.station.station_number}"} class="btn btn-error"><%= assigns.station.station_number %></label>
+          <label class="btn btn-error"><%= assigns.station.station_number %></label>
         """
 
       :reserved ->
         ~H"""
           <!-- The button to open modal -->
-          <label for={"seat-modal-#{assigns.station.station_number}"} class="btn btn-active"><%= assigns.station.station_number %></label>
+          <label class="btn btn-active"><%= assigns.station.station_number %></label>
         """
     end
   end
diff --git a/lib/lanpartyseating_web/components/selfsign_modal.ex b/lib/lanpartyseating_web/components/selfsign_modal.ex
index 2148405..6d45287 100644
--- a/lib/lanpartyseating_web/components/selfsign_modal.ex
+++ b/lib/lanpartyseating_web/components/selfsign_modal.ex
@@ -18,74 +18,89 @@ defmodule SelfSignModalComponent do
     case assigns.status do
       :available ->
         ~H"""
-        <!-- The button to open modal -->
-        <label for={"station-modal-#{@station.station_number}"} class="btn btn-info">
-          <%= @station.station_number %>
-        </label>
-        <!-- Put this part before </body> tag -->
-        <input type="checkbox" id={"station-modal-#{@station.station_number}"} class="modal-toggle" />
-        <div class="modal modal-bottom sm:modal-middle">
-          <div class="modal-box">
-            <h3 class="text-lg font-bold">Station #<%= @station.station_number %></h3>
-            <p>Once your badge is scanned, a 45 min session will start at the chosen station</p>
-            <br />
-            <p>Une fois votre badge scanné, une session de 45 min commencera à la station choisie</p>
+          <div class="flex flex-col h-14 flex-1 grow mx-1" x-data="">
+            <!-- The button to open modal -->
+            <label
+              x-on:click={"$refs.open_station_modal_#{@station.station_number}.showModal()"}
+              class="btn btn-info">
+              <%= @station.station_number %>
+            </label>
+            <dialog class="modal" x-ref={"open_station_modal_#{@station.station_number}"}>
+              <div class="modal-box">
+                <h3 class="text-lg font-bold">Station #<%= @station.station_number %></h3>
+                <p>Once your badge is scanned, a 45 min session will start at the chosen station</p>
+                <br />
+                <p>Une fois votre badge scanné, une session de 45 min commencera à la station choisie</p>
+                <form method="dialog">
+                  <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+                </form>
+                <form phx-submit="reserve_station">
+                  <input type="hidden" name="station_number" value={"#{@station.station_number}"} />
 
-            <form phx-submit="reserve_station">
-              <input type="hidden" name="station_number" value={"#{@station.station_number}"} />
+                  <%= if !is_nil(@error) do %>
+                    <p class="text-error"><%= @error %></p>
+                  <% end %>
+                  <%!-- <p>@error</p> --%>
+                  <br /><br />
+                  <input
+                    type="text"
+                    placeholder="Badge number / Numéro de badge"
+                    class="w-full max-w-xs input input-bordered"
+                    name="uid"
+                    autofocus
+                  />
 
-              <%= if !is_nil(@error) do %>
-                <p class="text-error"><%= @error %></p>
-              <% end %>
-              <%!-- <p>@error</p> --%>
-              <br /><br />
-              <input
-                type="text"
-                placeholder="Badge number / Numéro de badge"
-                class="w-full max-w-xs input input-bordered"
-                name="uid"
-                autofocus
-              />
-
-              <div class="modal-action">
-                <label for={"station-modal-#{@station.station_number}"} class="btn btn-error">X</label>
-                <button for={"station-modal-#{@station.station_number}"} class="btn btn-success" type="submit">
-                ✓
-                </button>
+                  <div class="modal-action">
+                    <button for={"station-modal-#{@station.station_number}"} class="btn btn-success" type="submit">
+                    ✓
+                    </button>
+                  </div>
+                </form>
               </div>
-            </form>
+            </dialog>
           </div>
-        </div>
         """
 
       :occupied ->
         ~H"""
-        <!-- The button to open modal -->
-        <div class="btn btn-warning flex flex-col">
-          <div >
-            <%= @station.station_number %>
+          <div class="flex flex-col h-14 flex-1 grow mx-1" x-data="">
+            <!-- The button to open modal -->
+            <div
+              class="btn btn-warning flex flex-col"
+              x-on:click={"$refs.open_station_modal_#{@station.station_number}.showModal()"}>
+              <div >
+                <%= @station.station_number %>
+              </div>
+              Until <%= Calendar.strftime(
+                List.first(@station.reservations).end_date |> Timex.to_datetime("America/Montreal"),
+                    "%H:%M"
+                  ) %>
+            </div>
           </div>
-          Until <%= Calendar.strftime(
-            List.first(@station.reservations).end_date |> Timex.to_datetime("America/Montreal"),
-                "%H:%M"
-              ) %>
-        </div>
         """
 
       :broken ->
         ~H"""
-        <!-- The button to open modal -->
-        <label class="btn btn-error">
-          <%= @station.station_number %>
-        </label>
+          <div class="flex flex-col h-14 flex-1 grow mx-1" x-data="">
+            <!-- The button to open modal -->
+            <label
+              class="btn btn-error"
+              x-on:click={"$refs.open_station_modal_#{@station.station_number}.showModal()"}>
+              <%= @station.station_number %>
+            </label>
+          </div>
         """
 
       :reserved ->
         ~H"""
-        <!-- The button to open modal -->
-        <label class="btn btn-active">
-          <%= @station.station_number %>
-        </label>
+          <div class="flex flex-col h-14 flex-1 grow mx-1" x-data="">
+            <!-- The button to open modal -->
+            <label
+              class="btn btn-active"
+              x-on:click={"$refs.open_station_modal_#{@station.station_number}.showModal()"}>
+              <%= @station.station_number %>
+            </label>
+          </div>
         """
     end
   end
diff --git a/lib/lanpartyseating_web/components/tournament_modal.ex b/lib/lanpartyseating_web/components/tournament_modal.ex
index 2e7d8f7..3a17d54 100644
--- a/lib/lanpartyseating_web/components/tournament_modal.ex
+++ b/lib/lanpartyseating_web/components/tournament_modal.ex
@@ -3,47 +3,48 @@ defmodule TournamentModalComponent do
 
   def tournament_modal(assigns) do
     ~H"""
-    <label for="tournament-modal" class="btn btn-info">ADD NEW</label>
-    <!-- Put this part before </body> tag -->
-    <input type="checkbox" id="tournament-modal" class="modal-toggle" />
-    <div class="modal modal-bottom sm:modal-middle">
-      <div class="modal-box">
-        <h3 class="text-lg font-bold">Creating new tournament</h3>
+      <div class="" x-data="">
+        <label for="tournament-modal" x-on:click="$refs.new_tournament_modal.showModal()" class="btn btn-info">ADD NEW</label>
+        <dialog class="modal" x-ref="new_tournament_modal">
+          <div class="modal-box">
+            <h3 class="text-lg font-bold">Creating new tournament</h3>
+            <form method="dialog">
+              <button class="btn btn-sm btn-circle btn-ghost absolute right-2 top-2">✕</button>
+            </form>
+            <form phx-submit="create_tournament">
+              <label for="name" class="">Name:</label>
+              <input
+                type="text"
+                placeholder="Tournament Name"
+                class="w-full max-w-xs input input-bordered"
+                name="name"
+              />
+              <br />
+              <label for="start_time" class="">Start time:</label>
+              <input
+                type="datetime-local"
+                class="w-full max-w-xs input input-bordered"
+                name="start_time"
+              />
+              <br />
+              <label for="duration" class="">Duration:</label>
+              <input id="duration" name="duration" class=" input input-bordered" type="number" />
 
-        <form phx-submit="create_tournament">
-          <label for="name" class="">Name:</label>
-          <input
-            type="text"
-            placeholder="Tournament Name"
-            class="w-full max-w-xs input input-bordered"
-            name="name"
-          />
-          <br />
-          <label for="start_time" class="">Start time:</label>
-          <input
-            type="datetime-local"
-            class="w-full max-w-xs input input-bordered"
-            name="start_time"
-          />
-          <br />
-          <label for="duration" class="">Duration:</label>
-          <input id="duration" name="duration" class=" input input-bordered" type="number" />
+              <br />
+              <label for="start_station" class="">Starting Station:</label>
+              <input id="start_station" name="start_station" class=" input input-bordered" type="number" />
 
-          <br />
-          <label for="start_station" class="">Starting Station:</label>
-          <input id="start_station" name="start_station" class=" input input-bordered" type="number" />
+              <br />
+              <label for="end_station" class="">Last Station:</label>
+              <input id="end_station" name="end_station" class=" input input-bordered" type="number" />
 
-          <br />
-          <label for="end_station" class="">Last Station:</label>
-          <input id="end_station" name="end_station" class=" input input-bordered" type="number" />
-
-          <div class="modal-action">
-            <label for="tournament-modal" class="btn">Close</label>
-            <button for="tournament-modal" class="btn" type="submit">Create</button>
+              <div class="modal-action">
+                <button for="tournament-modal" class="btn" type="submit">Create</button>
+              </div>
+            </form>
           </div>
-        </form>
+        </dialog>
       </div>
-    </div>
     """
   end
 end