diff --git a/README.md b/README.md
new file mode 100644
index 000000000..7e31ae00f
--- /dev/null
+++ b/README.md
@@ -0,0 +1,5 @@
+## Commands
+
+### Convert .png to .webp
+
+`cwebp -q 80 image.png -o image.webp`
diff --git a/Routes.tsx b/Routes.tsx
index fbdca2947..c42e58da2 100644
--- a/Routes.tsx
+++ b/Routes.tsx
@@ -1,5 +1,6 @@
 import { Routes as SolidAppRoutes, Route } from "solid-app-router";
 import { lazy } from "solid-js";
+import { MapPoolTab } from "./scenes/tournament/components/MapPoolTab";
 import TournamentData from "./scenes/tournament/TournamentPage.data";
 
 const TournamentsPage = lazy(
@@ -15,11 +16,11 @@ export function Routes() {
         // TODO: fix type error
         data={TournamentData as any}
       >
-        <Route path="/*all" element={() => <>overview</>} />
-        <Route path="/map-pool" element={() => <>map pool</>} />
+        <Route path="/map-pool" element={<MapPoolTab />} />
         <Route path="/bracket" element={() => <>bracket</>} />
         <Route path="/teams" element={() => <>teams</>} />
         <Route path="/streams" element={() => <>streams</>} />
+        <Route path="/*all" element={() => <>overview</>} />
       </Route>
       <Route path="/" element={() => <>home!</>} />
       <Route path="/*all" element={() => <>Not found</>} />
diff --git a/public/img/modes/CB.png b/public/img/modes/CB.png
deleted file mode 100644
index c51f3d65a..000000000
Binary files a/public/img/modes/CB.png and /dev/null differ
diff --git a/public/img/modes/CB.webp b/public/img/modes/CB.webp
new file mode 100644
index 000000000..a3d64d187
Binary files /dev/null and b/public/img/modes/CB.webp differ
diff --git a/public/img/modes/RM.png b/public/img/modes/RM.png
deleted file mode 100644
index 8035a41f4..000000000
Binary files a/public/img/modes/RM.png and /dev/null differ
diff --git a/public/img/modes/RM.webp b/public/img/modes/RM.webp
new file mode 100644
index 000000000..e578fb123
Binary files /dev/null and b/public/img/modes/RM.webp differ
diff --git a/public/img/modes/SZ.png b/public/img/modes/SZ.png
deleted file mode 100644
index 76a9bb741..000000000
Binary files a/public/img/modes/SZ.png and /dev/null differ
diff --git a/public/img/modes/SZ.webp b/public/img/modes/SZ.webp
new file mode 100644
index 000000000..7adf7143e
Binary files /dev/null and b/public/img/modes/SZ.webp differ
diff --git a/public/img/modes/TC.png b/public/img/modes/TC.png
deleted file mode 100644
index fb412ac28..000000000
Binary files a/public/img/modes/TC.png and /dev/null differ
diff --git a/public/img/modes/TC.webp b/public/img/modes/TC.webp
new file mode 100644
index 000000000..f40d011e9
Binary files /dev/null and b/public/img/modes/TC.webp differ
diff --git a/public/img/modes/TW.png b/public/img/modes/TW.png
deleted file mode 100644
index a25b89915..000000000
Binary files a/public/img/modes/TW.png and /dev/null differ
diff --git a/public/img/modes/TW.webp b/public/img/modes/TW.webp
new file mode 100644
index 000000000..9d228a050
Binary files /dev/null and b/public/img/modes/TW.webp differ
diff --git a/public/img/stages/ancho-v-games.png b/public/img/stages/ancho-v-games.png
deleted file mode 100644
index 87ff54963..000000000
Binary files a/public/img/stages/ancho-v-games.png and /dev/null differ
diff --git a/public/img/stages/ancho-v-games.webp b/public/img/stages/ancho-v-games.webp
new file mode 100644
index 000000000..d9f0b21d1
Binary files /dev/null and b/public/img/stages/ancho-v-games.webp differ
diff --git a/public/img/stages/arowana-mall.png b/public/img/stages/arowana-mall.png
deleted file mode 100644
index 492bea38a..000000000
Binary files a/public/img/stages/arowana-mall.png and /dev/null differ
diff --git a/public/img/stages/arowana-mall.webp b/public/img/stages/arowana-mall.webp
new file mode 100644
index 000000000..1ad7455c9
Binary files /dev/null and b/public/img/stages/arowana-mall.webp differ
diff --git a/public/img/stages/blackbelly-skatepark.png b/public/img/stages/blackbelly-skatepark.png
deleted file mode 100644
index fe3efc37d..000000000
Binary files a/public/img/stages/blackbelly-skatepark.png and /dev/null differ
diff --git a/public/img/stages/blackbelly-skatepark.webp b/public/img/stages/blackbelly-skatepark.webp
new file mode 100644
index 000000000..3a4854bce
Binary files /dev/null and b/public/img/stages/blackbelly-skatepark.webp differ
diff --git a/public/img/stages/camp-triggerfish.png b/public/img/stages/camp-triggerfish.png
deleted file mode 100644
index 463a7d3e2..000000000
Binary files a/public/img/stages/camp-triggerfish.png and /dev/null differ
diff --git a/public/img/stages/camp-triggerfish.webp b/public/img/stages/camp-triggerfish.webp
new file mode 100644
index 000000000..118b82fce
Binary files /dev/null and b/public/img/stages/camp-triggerfish.webp differ
diff --git a/public/img/stages/goby-arena.png b/public/img/stages/goby-arena.png
deleted file mode 100644
index 25b2d1689..000000000
Binary files a/public/img/stages/goby-arena.png and /dev/null differ
diff --git a/public/img/stages/goby-arena.webp b/public/img/stages/goby-arena.webp
new file mode 100644
index 000000000..78952a1b9
Binary files /dev/null and b/public/img/stages/goby-arena.webp differ
diff --git a/public/img/stages/humpback-pump-track.png b/public/img/stages/humpback-pump-track.png
deleted file mode 100644
index 6b5b014b4..000000000
Binary files a/public/img/stages/humpback-pump-track.png and /dev/null differ
diff --git a/public/img/stages/humpback-pump-track.webp b/public/img/stages/humpback-pump-track.webp
new file mode 100644
index 000000000..7a8c9ac18
Binary files /dev/null and b/public/img/stages/humpback-pump-track.webp differ
diff --git a/public/img/stages/inkblot-art-academy.png b/public/img/stages/inkblot-art-academy.png
deleted file mode 100644
index 04ae1878d..000000000
Binary files a/public/img/stages/inkblot-art-academy.png and /dev/null differ
diff --git a/public/img/stages/inkblot-art-academy.webp b/public/img/stages/inkblot-art-academy.webp
new file mode 100644
index 000000000..c079df332
Binary files /dev/null and b/public/img/stages/inkblot-art-academy.webp differ
diff --git a/public/img/stages/kelp-dome.png b/public/img/stages/kelp-dome.png
deleted file mode 100644
index a49b9e1f3..000000000
Binary files a/public/img/stages/kelp-dome.png and /dev/null differ
diff --git a/public/img/stages/kelp-dome.webp b/public/img/stages/kelp-dome.webp
new file mode 100644
index 000000000..dc5c941fb
Binary files /dev/null and b/public/img/stages/kelp-dome.webp differ
diff --git a/public/img/stages/makomart.png b/public/img/stages/makomart.png
deleted file mode 100644
index 20fed269e..000000000
Binary files a/public/img/stages/makomart.png and /dev/null differ
diff --git a/public/img/stages/makomart.webp b/public/img/stages/makomart.webp
new file mode 100644
index 000000000..b06a6c203
Binary files /dev/null and b/public/img/stages/makomart.webp differ
diff --git a/public/img/stages/manta-maria.png b/public/img/stages/manta-maria.png
deleted file mode 100644
index 24ec66410..000000000
Binary files a/public/img/stages/manta-maria.png and /dev/null differ
diff --git a/public/img/stages/manta-maria.webp b/public/img/stages/manta-maria.webp
new file mode 100644
index 000000000..3f9070300
Binary files /dev/null and b/public/img/stages/manta-maria.webp differ
diff --git a/public/img/stages/moray-towers.png b/public/img/stages/moray-towers.png
deleted file mode 100644
index bcf114965..000000000
Binary files a/public/img/stages/moray-towers.png and /dev/null differ
diff --git a/public/img/stages/moray-towers.webp b/public/img/stages/moray-towers.webp
new file mode 100644
index 000000000..b44359079
Binary files /dev/null and b/public/img/stages/moray-towers.webp differ
diff --git a/public/img/stages/musselforge-fitness.png b/public/img/stages/musselforge-fitness.png
deleted file mode 100644
index b9b7ec5ae..000000000
Binary files a/public/img/stages/musselforge-fitness.png and /dev/null differ
diff --git a/public/img/stages/musselforge-fitness.webp b/public/img/stages/musselforge-fitness.webp
new file mode 100644
index 000000000..baac1291e
Binary files /dev/null and b/public/img/stages/musselforge-fitness.webp differ
diff --git a/public/img/stages/new-albacore-hotel.png b/public/img/stages/new-albacore-hotel.png
deleted file mode 100644
index 4ffc67cea..000000000
Binary files a/public/img/stages/new-albacore-hotel.png and /dev/null differ
diff --git a/public/img/stages/new-albacore-hotel.webp b/public/img/stages/new-albacore-hotel.webp
new file mode 100644
index 000000000..31568d70d
Binary files /dev/null and b/public/img/stages/new-albacore-hotel.webp differ
diff --git a/public/img/stages/piranha-pit.png b/public/img/stages/piranha-pit.png
deleted file mode 100644
index 196eb5af7..000000000
Binary files a/public/img/stages/piranha-pit.png and /dev/null differ
diff --git a/public/img/stages/piranha-pit.webp b/public/img/stages/piranha-pit.webp
new file mode 100644
index 000000000..c9fb92959
Binary files /dev/null and b/public/img/stages/piranha-pit.webp differ
diff --git a/public/img/stages/port-mackerel.png b/public/img/stages/port-mackerel.png
deleted file mode 100644
index 6a9188f18..000000000
Binary files a/public/img/stages/port-mackerel.png and /dev/null differ
diff --git a/public/img/stages/port-mackerel.webp b/public/img/stages/port-mackerel.webp
new file mode 100644
index 000000000..86a8a159c
Binary files /dev/null and b/public/img/stages/port-mackerel.webp differ
diff --git a/public/img/stages/shellendorf-institute.png b/public/img/stages/shellendorf-institute.png
deleted file mode 100644
index 5f599a122..000000000
Binary files a/public/img/stages/shellendorf-institute.png and /dev/null differ
diff --git a/public/img/stages/shellendorf-institute.webp b/public/img/stages/shellendorf-institute.webp
new file mode 100644
index 000000000..5ff784bb0
Binary files /dev/null and b/public/img/stages/shellendorf-institute.webp differ
diff --git a/public/img/stages/skipper-pavilion.png b/public/img/stages/skipper-pavilion.png
deleted file mode 100644
index 386a4006f..000000000
Binary files a/public/img/stages/skipper-pavilion.png and /dev/null differ
diff --git a/public/img/stages/skipper-pavilion.webp b/public/img/stages/skipper-pavilion.webp
new file mode 100644
index 000000000..8732d0ae4
Binary files /dev/null and b/public/img/stages/skipper-pavilion.webp differ
diff --git a/public/img/stages/snapper-canal.png b/public/img/stages/snapper-canal.png
deleted file mode 100644
index fa9163475..000000000
Binary files a/public/img/stages/snapper-canal.png and /dev/null differ
diff --git a/public/img/stages/snapper-canal.webp b/public/img/stages/snapper-canal.webp
new file mode 100644
index 000000000..88f84f97b
Binary files /dev/null and b/public/img/stages/snapper-canal.webp differ
diff --git a/public/img/stages/starfish-mainstage.png b/public/img/stages/starfish-mainstage.png
deleted file mode 100644
index c9a72d9f7..000000000
Binary files a/public/img/stages/starfish-mainstage.png and /dev/null differ
diff --git a/public/img/stages/starfish-mainstage.webp b/public/img/stages/starfish-mainstage.webp
new file mode 100644
index 000000000..aabefce0f
Binary files /dev/null and b/public/img/stages/starfish-mainstage.webp differ
diff --git a/public/img/stages/sturgeon-shipyard.png b/public/img/stages/sturgeon-shipyard.png
deleted file mode 100644
index 8a18399ec..000000000
Binary files a/public/img/stages/sturgeon-shipyard.png and /dev/null differ
diff --git a/public/img/stages/sturgeon-shipyard.webp b/public/img/stages/sturgeon-shipyard.webp
new file mode 100644
index 000000000..cf1938f8a
Binary files /dev/null and b/public/img/stages/sturgeon-shipyard.webp differ
diff --git a/public/img/stages/the-reef.png b/public/img/stages/the-reef.png
deleted file mode 100644
index e098e25f9..000000000
Binary files a/public/img/stages/the-reef.png and /dev/null differ
diff --git a/public/img/stages/the-reef.webp b/public/img/stages/the-reef.webp
new file mode 100644
index 000000000..0b0f1f048
Binary files /dev/null and b/public/img/stages/the-reef.webp differ
diff --git a/public/img/stages/wahoo-world.png b/public/img/stages/wahoo-world.png
deleted file mode 100644
index f037a6f4f..000000000
Binary files a/public/img/stages/wahoo-world.png and /dev/null differ
diff --git a/public/img/stages/wahoo-world.webp b/public/img/stages/wahoo-world.webp
new file mode 100644
index 000000000..dbf5367e1
Binary files /dev/null and b/public/img/stages/wahoo-world.webp differ
diff --git a/public/img/stages/walleye-warehouse.png b/public/img/stages/walleye-warehouse.png
deleted file mode 100644
index 494810dd9..000000000
Binary files a/public/img/stages/walleye-warehouse.png and /dev/null differ
diff --git a/public/img/stages/walleye-warehouse.webp b/public/img/stages/walleye-warehouse.webp
new file mode 100644
index 000000000..e1f47cd20
Binary files /dev/null and b/public/img/stages/walleye-warehouse.webp differ
diff --git a/scenes/tournament/components/MapPoolTab.tsx b/scenes/tournament/components/MapPoolTab.tsx
new file mode 100644
index 000000000..3d28cc6f4
--- /dev/null
+++ b/scenes/tournament/components/MapPoolTab.tsx
@@ -0,0 +1,70 @@
+import { For, Show } from "solid-js";
+import { modesShort, stages } from "../../../utils/constants";
+import { useTournamentData } from "../TournamentPage.data";
+import s from "../styles/MapPoolTab.module.css";
+import type { Mode } from ".prisma/client";
+
+export function MapPoolTab() {
+  const tournament = useTournamentData(1);
+
+  return (
+    <Show when={tournament?.()}>
+      {({ mapPool }) => (
+        <div class={s.container}>
+          <div class={s.infoSquare}>
+            <span class={s.emphasizedText}>{mapPool.length} maps</span>
+          </div>
+          <For each={stages}>
+            {(stage) => (
+              <div class={s.stageImageContainer}>
+                <img
+                  class={s.stageImage}
+                  classList={{ [s.disabled]: !modesPerStage(mapPool)[stage] }}
+                  loading="lazy"
+                  alt={stage}
+                  src={`/img/stages/${stage
+                    .replaceAll(" ", "-")
+                    .toLowerCase()}.webp`}
+                />
+                {modesPerStage(mapPool)[stage] && (
+                  <div class={s.modeImagesContainer}>
+                    {modesShort.map((mode) => {
+                      if (
+                        !modesPerStage(mapPool)[stage]?.includes(mode as Mode)
+                      ) {
+                        return null;
+                      }
+                      return (
+                        <img
+                          class={s.modeImage}
+                          src={`/img/modes/${mode}.webp`}
+                          alt={mode}
+                        />
+                      );
+                    })}
+                  </div>
+                )}
+              </div>
+            )}
+          </For>
+        </div>
+      )}
+    </Show>
+  );
+}
+
+export function modesPerStage(
+  mapPool: {
+    name: string;
+    mode: Mode;
+  }[]
+) {
+  return mapPool.reduce((acc: Record<string, Mode[]>, { name, mode }) => {
+    if (!acc[name]) {
+      acc[name] = [];
+    }
+
+    acc[name].push(mode);
+    return acc;
+  }, {});
+}
diff --git a/scenes/tournament/styles/MapPoolTab.module.css b/scenes/tournament/styles/MapPoolTab.module.css
new file mode 100644
index 000000000..5d85be6bf
--- /dev/null
+++ b/scenes/tournament/styles/MapPoolTab.module.css
@@ -0,0 +1,62 @@
+.infoSquare {
+  display: grid;
+  place-items: center;
+  font-weight: var(--semi-bold);
+  font-size: var(--fonts-xl);
+  background-image: url(/svg/background-pattern.svg);
+  background-color: var(--bg-lighter);
+  border-radius: var(--rounded);
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+}
+
+@media screen and (min-width: 480px) {
+  .container {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media screen and (min-width: 640px) {
+  .container {
+    grid-template-columns: repeat(4, minmax(1px, 200px));
+  }
+}
+
+.emphasizedText {
+  font-weight: var(--bold);
+}
+
+.stageImageContainer {
+  position: relative;
+}
+
+.stageImage {
+  width: 100%;
+  height: 100%;
+  border-radius: var(--rounded);
+}
+
+.modeImage {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.disabled {
+  filter: grayscale(100%);
+}
+
+.modeImagesContainer {
+  display: flex;
+  position: absolute;
+  backdrop-filter: blur(5px) grayscale(25%);
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  padding: var(--s-1);
+  gap: var(--s-2);
+  border-start-start-radius: var(--rounded);
+  border-end-end-radius: var(--rounded);
+}