diff --git a/.gitignore b/.gitignore
index 6635cf5..beb22e8 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+static/
diff --git a/Makefile b/Makefile
index 247122f..b243d1c 100644
--- a/Makefile
+++ b/Makefile
@@ -1,4 +1,4 @@
-build/index.html: src/routes/+page.svelte src/routes/control/+page.svelte
+build/index.html: src/routes/+page.svelte src/routes/control/+page.svelte src/routes/admin/+page.svelte static/gifs/* static/robots/*
 	npm run build
 
 .PHONY: run dev iframe
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 31dc10b..c5aa6f7 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -59,7 +59,7 @@ let display_state = "init";
 /** @type {string} */
 let display_class = "side-display";
 
-const client = mqtt.connect("ws://127.0.0.1:8883");
+const client = mqtt.connect("ws://10.42.0.36:8883");
 
 
 client.on("connect", () => {
@@ -290,9 +290,37 @@ onMount(() => {
       </div>
     </div>
   {:else if (display_state == "pre-game")}
-    <div id="pre-game"></div>
+    <img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
+    <div class="pre-game">
+      <div class="pre-bot" id="pre-r1">
+        <p>{teams_red[0]}</p>
+	<object type="image/png" data="/robots/{teams_red[0]}.gif">
+          <img src="/robots/fallback.png">
+	</object>
+      </div>
+      <div class="pre-bot" id="pre-r2">
+        <p>{teams_red[1]}</p>
+	<object type="image/png" data="/robots/{teams_red[1]}.gif">
+          <img src="/robots/fallback.png">
+	</object>
+      </div>
+      <div id="pre-mid"><p>VS</p></div>
+      <div class="pre-bot" id="pre-b1">
+        <p>{teams_blue[0]}</p>
+	<object type="image/png" data="/robots/{teams_blue[0]}.gif">
+          <img src="/robots/fallback.png">
+	</object>
+      </div>
+      <div class="pre-bot" id="pre-b2">
+        <p>{teams_blue[1]}</p>
+        <object type="image/png" data="/robots/{teams_blue[1]}.gif">
+          <img src="/robots/fallback.png">
+	</object>
+      </div>
+    </div>
   {:else if (display_state == "event-name")}
-    <div class="banner"><p>{event_name}</p></div>
+    <img class="gif-background" alt="wavy" src="/gifs/wavy_background.gif">
+    <img class="gif-foreground" alt="Mecha Mayhem 2024" src="/gifs/mm2024.gif">
   {:else if (display_state == "alliance-selection")}
     <div class="banner"><p>210Y Selecting</p></div>
   {:else if (display_state == "break")}
@@ -375,6 +403,67 @@ p {
   height: 100%;
 }
 
+#pre-mid {
+  font-size: 7cqw;
+  grid-area: mid;
+}
+
+.pre-bot object {
+  height: 80cqh;
+  width: 80cqh;
+}
+
+.pre-bot object img {
+  height: 100%;
+  width: 100%;
+}
+
+.pre-bot {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+  flex-grow: 0;
+  flex-basis: min-content;
+  height: 100%;
+  width: 100%;
+}
+
+#pre-b1 {
+  font-size: 2cqw;
+  grid-area: b1;
+}
+
+#pre-b2 {
+  font-size: 2cqw;
+  grid-area: b2;
+}
+
+#pre-r1 {
+  font-size: 2cqw;
+  grid-area: r1;
+}
+
+#pre-r2 {
+  font-size: 2cqw;
+  grid-area: r2;
+}
+
+.pre-game {
+  z-index: 1;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+
+  display: grid;
+  justify-items: center;
+  align-items: center;
+  grid-template-columns: 22.5% 22.5% 10% 22.5% 22.5%;
+  grid-template-rows: 100%;
+  grid-template-areas: "r1 r2 mid b1 b2";
+}
+
 .gif-background {
   z-index: 0;
   position: absolute;
@@ -412,7 +501,18 @@ p {
   background-color: #ee0000;
 }
 
+.banner-gif {
+  z-index: 0;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+}
+
 .banner {
+  z-index: 1;
+  position: absolute;
+  top: 0;
   display: flex;
   font-size: 5cqw;
   align-items: center;
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index 49f9183..bd75a89 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -9,7 +9,7 @@ let led_sizes = {
   "side": { width: 896, height: 128 }
 }
 
-const client = mqtt.connect("ws://127.0.0.1:8883");
+const client = mqtt.connect("ws://10.42.0.36:8883");
 let displays = {};
 let division_names = {};
 let divisions = {};
@@ -82,7 +82,7 @@ client.on("message", (topic, message) => {
       <h2>{`${division_names[active_division]} Division`}</h2>
       {#each Object.entries(displays[active_division]) as [field, field_data] }
         <div class="field">
-          <h3>Field {field}</h3>
+          <h3>{field} - {field_data.name}</h3>
           <iframe src="/?field={active_division}/{field}" width={led_sizes[field_data.class].width} height={led_sizes[field_data.class].height} title="Field {active_division}/{field}"></iframe>
           <br />
           <select bind:value={field_data.class} on:change={() => client.publish(`display/${active_division}/${field}/class`, field_data.class, { retain: true })}>
diff --git a/src/routes/control/+page.svelte b/src/routes/control/+page.svelte
index be2e83a..18e459a 100644
--- a/src/routes/control/+page.svelte
+++ b/src/routes/control/+page.svelte
@@ -1,7 +1,7 @@
 <script>
 import mqtt from "mqtt";
 
-const client = mqtt.connect("ws://127.0.0.1:8883");
+const client = mqtt.connect("ws://10.42.0.36:8883");
 
 /**
 * @type any
diff --git a/static/favicon.png b/static/favicon.png
deleted file mode 100644
index 825b9e6..0000000
Binary files a/static/favicon.png and /dev/null differ
diff --git a/static/fonts/apple2.woff2 b/static/fonts/apple2.woff2
deleted file mode 100644
index 470b036..0000000
Binary files a/static/fonts/apple2.woff2 and /dev/null differ
diff --git a/static/gifs/ab_education.gif b/static/gifs/ab_education.gif
deleted file mode 100644
index fbf3e4f..0000000
Binary files a/static/gifs/ab_education.gif and /dev/null differ
diff --git a/static/gifs/ab_innovate.gif b/static/gifs/ab_innovate.gif
deleted file mode 100644
index 420d4b4..0000000
Binary files a/static/gifs/ab_innovate.gif and /dev/null differ
diff --git a/static/gifs/blue_win.gif b/static/gifs/blue_win.gif
deleted file mode 100644
index 8f7d8b8..0000000
Binary files a/static/gifs/blue_win.gif and /dev/null differ
diff --git a/static/gifs/canadaflag.gif b/static/gifs/canadaflag.gif
deleted file mode 100644
index ffdf1da..0000000
Binary files a/static/gifs/canadaflag.gif and /dev/null differ
diff --git a/static/gifs/encore.gif b/static/gifs/encore.gif
deleted file mode 100644
index 4009f05..0000000
Binary files a/static/gifs/encore.gif and /dev/null differ
diff --git a/static/gifs/prairies.gif b/static/gifs/prairies.gif
deleted file mode 100644
index ea9b9c7..0000000
Binary files a/static/gifs/prairies.gif and /dev/null differ
diff --git a/static/gifs/red_win.gif b/static/gifs/red_win.gif
deleted file mode 100644
index 2a76a70..0000000
Binary files a/static/gifs/red_win.gif and /dev/null differ
diff --git a/static/gifs/rockies.gif b/static/gifs/rockies.gif
deleted file mode 100644
index 3cc54cc..0000000
Binary files a/static/gifs/rockies.gif and /dev/null differ
diff --git a/static/gifs/tcenergy.gif b/static/gifs/tcenergy.gif
deleted file mode 100644
index 3fbaa03..0000000
Binary files a/static/gifs/tcenergy.gif and /dev/null differ
diff --git a/static/gifs/tourismcalgary.gif b/static/gifs/tourismcalgary.gif
deleted file mode 100644
index 49f6a3b..0000000
Binary files a/static/gifs/tourismcalgary.gif and /dev/null differ
diff --git a/static/gifs/wavy_background.gif b/static/gifs/wavy_background.gif
deleted file mode 100644
index f332123..0000000
Binary files a/static/gifs/wavy_background.gif and /dev/null differ
diff --git a/static/gifs/westmech.gif b/static/gifs/westmech.gif
deleted file mode 100644
index 50281dd..0000000
Binary files a/static/gifs/westmech.gif and /dev/null differ