diff --git a/zkgm-dev/src/app.css b/zkgm-dev/src/app.css
index 01efd155d0..76fcadcc01 100644
--- a/zkgm-dev/src/app.css
+++ b/zkgm-dev/src/app.css
@@ -1,3 +1,3 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
-@import 'tailwindcss/utilities'
+@import "tailwindcss/utilities";
diff --git a/zkgm-dev/src/app.html b/zkgm-dev/src/app.html
index 77a5ff52c9..6bdcf6731c 100644
--- a/zkgm-dev/src/app.html
+++ b/zkgm-dev/src/app.html
@@ -1,12 +1,26 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="bg-black scroll-smooth max-h-screen touch-none overflow-hidden">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="%sveltekit.assets%" />
+    <meta property="og:title" content="ZKGM" />
+    <meta property="og:description" content="BY UNION" />
+    <meta property="og:image" content="%sveltekit.assets%/zkgm.png" />
+
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="%sveltekit.assets%" />
+    <meta name="twitter:title" content="ZKGM" />
+    <meta name="twitter:description" content="BY UNION" />
+    <meta name="twitter:image" content="%sveltekit.assets%/zkgm.png" />
+
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover">
+	<body data-sveltekit-preload-data="hover" class="overflow-hidden">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
diff --git a/zkgm-dev/src/lib/components/Agents.svelte b/zkgm-dev/src/lib/components/Agents.svelte
new file mode 100644
index 0000000000..4349be376e
--- /dev/null
+++ b/zkgm-dev/src/lib/components/Agents.svelte
@@ -0,0 +1,118 @@
+<script>
+import { onMount, onDestroy } from "svelte"
+import { browser } from "$app/environment"
+
+let containerWidth
+let containerRef
+
+let characters = [
+  { id: "omar", x: 10, direction: 1, speed: 2 },
+  { id: "lukas", x: 300, direction: -1, speed: 3 },
+  { id: "ben", x: 600, direction: 1, speed: 1.5 },
+  { id: "cor", x: 900, direction: -1, speed: 2.5 }
+]
+
+const CHARACTER_WIDTH = 48
+const COLLISION_THRESHOLD = 2
+const MIN_SPEED = 1
+const MAX_SPEED = 4
+let animationFrameId
+
+function getRandomSpeed() {
+  return MIN_SPEED + Math.random() * (MAX_SPEED - MIN_SPEED)
+}
+
+function handleResize() {
+  if (containerRef) {
+    containerWidth = containerRef.offsetWidth
+  }
+}
+
+function updatePositions() {
+  const newPositions = characters.map(char => {
+    const newX = char.x + char.speed * char.direction
+    return { ...char, newX }
+  })
+
+  characters = newPositions.map((char, index) => {
+    let finalX = char.newX
+    let newDirection = char.direction
+    let newSpeed = char.speed
+
+    if (finalX <= 0) {
+      newDirection = 1
+      finalX = 0
+      newSpeed = getRandomSpeed()
+    } else if (finalX >= containerWidth - CHARACTER_WIDTH) {
+      newDirection = -1
+      finalX = containerWidth - CHARACTER_WIDTH
+      newSpeed = getRandomSpeed()
+    }
+
+    for (let i = 0; i < newPositions.length; i++) {
+      if (i !== index) {
+        const other = newPositions[i]
+
+        const distance =
+          char.direction > 0
+            ? other.newX - (char.newX + CHARACTER_WIDTH)
+            : char.newX - (other.newX + CHARACTER_WIDTH)
+
+        const isApproaching =
+          (char.direction > 0 && other.direction < 0) || (char.direction < 0 && other.direction > 0)
+
+        if (isApproaching && Math.abs(distance) <= COLLISION_THRESHOLD) {
+          finalX = char.x
+          newDirection *= -1
+          newSpeed = getRandomSpeed()
+          break
+        }
+      }
+    }
+
+    return {
+      ...char,
+      x: finalX,
+      direction: newDirection,
+      speed: newSpeed
+    }
+  })
+
+  animationFrameId = browser ? requestAnimationFrame(updatePositions) : null
+}
+
+onMount(() => {
+  if (browser) {
+    handleResize()
+    window.addEventListener("resize", handleResize)
+    animationFrameId = requestAnimationFrame(updatePositions)
+  }
+})
+
+onDestroy(() => {
+  if (browser) {
+    window.removeEventListener("resize", handleResize)
+    if (animationFrameId) {
+      cancelAnimationFrame(animationFrameId)
+    }
+  }
+})
+</script>
+
+<div
+        bind:this={containerRef}
+        class="relative w-full h-full bg-transparent overflow-hidden"
+>
+  {#each characters as char (char.id)}
+    <div
+            class="absolute bottom-0 transition-transform duration-100 ease-linear"
+            style="transform: translateX({char.x}px) scaleX({char.direction > 0 ? 1 : -1})"
+    >
+      <img
+              src="/agents/{char.id}.png"
+              alt="Agent {char.id}"
+              class="h-16 w-16 flex-shrink-0"
+      />
+    </div>
+  {/each}
+</div>
\ No newline at end of file
diff --git a/zkgm-dev/src/lib/components/Bar.svelte b/zkgm-dev/src/lib/components/Bar.svelte
new file mode 100644
index 0000000000..8d1f007a7b
--- /dev/null
+++ b/zkgm-dev/src/lib/components/Bar.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+import Blink from "$lib/components/Blink.svelte"
+</script>
+
+<div class="w-full bg-transparent p-4 flex items-center justify-between">
+  <img src="/logo.svg" alt="union logo" class="h-10 w-auto">
+  <p class="show-430 font-supermolot font-bold text-white">
+    <Blink/>
+  </p>
+  <a href="https://union.build" class="font-mono font-bold text-white">[MAIN SITE]</a>
+</div>
+
+<style lang="postcss">
+  .show-430 {
+    display: none;
+  }
+
+  @media screen and (min-width: 430px) {
+    .show-430 {
+      display: block;
+    }
+  }
+</style>
diff --git a/zkgm-dev/src/lib/components/Blink.svelte b/zkgm-dev/src/lib/components/Blink.svelte
new file mode 100644
index 0000000000..e5ddf48cc7
--- /dev/null
+++ b/zkgm-dev/src/lib/components/Blink.svelte
@@ -0,0 +1,87 @@
+<script lang="ts">
+type Props = {
+  loading?: boolean
+  sleep?: boolean
+  love?: boolean
+}
+
+let { loading = false, sleep = false, love = false }: Props = $props()
+
+let eye = $state(sleep ? "-" : love ? "♡" : "0")
+let blinkInterval: number | NodeJS.Timeout
+
+function blinkEye() {
+  if (!(sleep || love)) {
+    eye = "-"
+    setTimeout(() => {
+      eye = "0"
+    }, 100)
+  }
+}
+
+function startRandomBlinking() {
+  blinkInterval = setInterval(() => {
+    if (!(sleep || love) && Math.random() < 0.08) {
+      blinkEye()
+    }
+  }, 200)
+}
+
+$effect(() => {
+  if (sleep) {
+    eye = "×"
+    clearInterval(blinkInterval)
+  } else if (love) {
+    eye = "♡"
+    clearInterval(blinkInterval)
+  } else {
+    eye = "0"
+    startRandomBlinking()
+  }
+
+  return () => {
+    clearInterval(blinkInterval)
+  }
+})
+</script>
+
+<span>
+  {eye}<span class:wobble={loading && !sleep}><span>_</span><span>_</span><span>_</span><span>_</span><span>_</span><span>_</span><span>_</span></span>{eye}
+</span>
+
+<style>
+    .wobble {
+        display: inline-block;
+    }
+
+    .wobble span {
+        display: inline-block;
+        animation: wobble 1s infinite ease-in-out;
+    }
+
+    @keyframes wobble {
+        0% {
+            transform: translateY(0);
+        }
+        25% {
+            transform: translateY(-3px);
+        }
+        50% {
+            transform: translateY(0);
+        }
+        75% {
+            transform: translateY(3px);
+        }
+        100% {
+            transform: translateY(0);
+        }
+    }
+
+    .wobble span:nth-child(1) { animation-delay: 0s; }
+    .wobble span:nth-child(2) { animation-delay: 0.1s; }
+    .wobble span:nth-child(3) { animation-delay: 0.2s; }
+    .wobble span:nth-child(4) { animation-delay: 0.3s; }
+    .wobble span:nth-child(5) { animation-delay: 0.4s; }
+    .wobble span:nth-child(6) { animation-delay: 0.5s; }
+    .wobble span:nth-child(7) { animation-delay: 0.6s; }
+</style>
\ No newline at end of file
diff --git a/zkgm-dev/src/lib/components/Glitch.svelte b/zkgm-dev/src/lib/components/Glitch.svelte
new file mode 100644
index 0000000000..6604c27238
--- /dev/null
+++ b/zkgm-dev/src/lib/components/Glitch.svelte
@@ -0,0 +1,408 @@
+<script lang="ts">
+let { text } = $props()
+</script>
+
+<div class="hero-container">
+  <h2 class="hero glitch layers font-bold font-supermolot text-7xl mix-blend-difference " data-text={text}><span>{text}</span></h2>
+</div>
+
+<style>
+  .hero-container {
+    position: relative;
+    text-align: center;
+  }
+
+  .hero {
+    font-size: clamp(100px, 20vw, 200px);
+    line-height: 1;
+    display: inline-block;
+    color: #fff;
+    z-index: 2;
+    letter-spacing: 10px;
+    filter: drop-shadow(0 1px 3px);
+  }
+
+  .layers {
+    position: relative;
+  }
+
+  .layers::before,
+  .layers::after {
+    content: attr(data-text);
+    position: absolute;
+    width: 110%;
+    z-index: -1;
+  }
+
+  .layers::before {
+    top: 10px;
+    left: 15px;
+    color: #e0287d;
+  }
+
+  .layers::after {
+    top: 5px;
+    left: -10px;
+    color: #1bc7fb;
+  }
+
+  .glitch span {
+    animation: paths 5s step-end infinite;
+  }
+
+  .glitch::before {
+    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
+    font 8s step-end infinite, movement 10s step-end infinite;
+  }
+
+  .glitch::after {
+    animation: paths 5s step-end infinite, opacity 5s step-end infinite,
+    font 7s step-end infinite, movement 8s step-end infinite;
+  }
+
+  @keyframes paths {
+    0% {
+      clip-path: polygon(
+          0% 43%,
+          83% 43%,
+          83% 22%,
+          23% 22%,
+          23% 24%,
+          91% 24%,
+          91% 26%,
+          18% 26%,
+          18% 83%,
+          29% 83%,
+          29% 17%,
+          41% 17%,
+          41% 39%,
+          18% 39%,
+          18% 82%,
+          54% 82%,
+          54% 88%,
+          19% 88%,
+          19% 4%,
+          39% 4%,
+          39% 14%,
+          76% 14%,
+          76% 52%,
+          23% 52%,
+          23% 35%,
+          19% 35%,
+          19% 8%,
+          36% 8%,
+          36% 31%,
+          73% 31%,
+          73% 16%,
+          1% 16%,
+          1% 56%,
+          50% 56%,
+          50% 8%
+      );
+    }
+
+    5% {
+      clip-path: polygon(
+          0% 29%,
+          44% 29%,
+          44% 83%,
+          94% 83%,
+          94% 56%,
+          11% 56%,
+          11% 64%,
+          94% 64%,
+          94% 70%,
+          88% 70%,
+          88% 32%,
+          18% 32%,
+          18% 96%,
+          10% 96%,
+          10% 62%,
+          9% 62%,
+          9% 84%,
+          68% 84%,
+          68% 50%,
+          52% 50%,
+          52% 55%,
+          35% 55%,
+          35% 87%,
+          25% 87%,
+          25% 39%,
+          15% 39%,
+          15% 88%,
+          52% 88%
+      );
+    }
+
+    30% {
+      clip-path: polygon(
+          0% 53%,
+          93% 53%,
+          93% 62%,
+          68% 62%,
+          68% 37%,
+          97% 37%,
+          97% 89%,
+          13% 89%,
+          13% 45%,
+          51% 45%,
+          51% 88%,
+          17% 88%,
+          17% 54%,
+          81% 54%,
+          81% 75%,
+          79% 75%,
+          79% 76%,
+          38% 76%,
+          38% 28%,
+          61% 28%,
+          61% 12%,
+          55% 12%,
+          55% 62%,
+          68% 62%,
+          68% 51%,
+          0% 51%,
+          0% 92%,
+          63% 92%,
+          63% 4%,
+          65% 4%
+      );
+    }
+
+    45% {
+      clip-path: polygon(
+          0% 33%,
+          2% 33%,
+          2% 69%,
+          58% 69%,
+          58% 94%,
+          55% 94%,
+          55% 25%,
+          33% 25%,
+          33% 85%,
+          16% 85%,
+          16% 19%,
+          5% 19%,
+          5% 20%,
+          79% 20%,
+          79% 96%,
+          93% 96%,
+          93% 50%,
+          5% 50%,
+          5% 74%,
+          55% 74%,
+          55% 57%,
+          96% 57%,
+          96% 59%,
+          87% 59%,
+          87% 65%,
+          82% 65%,
+          82% 39%,
+          63% 39%,
+          63% 92%,
+          4% 92%,
+          4% 36%,
+          24% 36%,
+          24% 70%,
+          1% 70%,
+          1% 43%,
+          15% 43%,
+          15% 28%,
+          23% 28%,
+          23% 71%,
+          90% 71%,
+          90% 86%,
+          97% 86%,
+          97% 1%,
+          60% 1%,
+          60% 67%,
+          71% 67%,
+          71% 91%,
+          17% 91%,
+          17% 14%,
+          39% 14%,
+          39% 30%,
+          58% 30%,
+          58% 11%,
+          52% 11%,
+          52% 83%,
+          68% 83%
+      );
+    }
+
+    76% {
+      clip-path: polygon(
+          0% 26%,
+          15% 26%,
+          15% 73%,
+          72% 73%,
+          72% 70%,
+          77% 70%,
+          77% 75%,
+          8% 75%,
+          8% 42%,
+          4% 42%,
+          4% 61%,
+          17% 61%,
+          17% 12%,
+          26% 12%,
+          26% 63%,
+          73% 63%,
+          73% 43%,
+          90% 43%,
+          90% 67%,
+          50% 67%,
+          50% 41%,
+          42% 41%,
+          42% 46%,
+          50% 46%,
+          50% 84%,
+          96% 84%,
+          96% 78%,
+          49% 78%,
+          49% 25%,
+          63% 25%,
+          63% 14%
+      );
+    }
+
+    90% {
+      clip-path: polygon(
+          0% 41%,
+          13% 41%,
+          13% 6%,
+          87% 6%,
+          87% 93%,
+          10% 93%,
+          10% 13%,
+          89% 13%,
+          89% 6%,
+          3% 6%,
+          3% 8%,
+          16% 8%,
+          16% 79%,
+          0% 79%,
+          0% 99%,
+          92% 99%,
+          92% 90%,
+          5% 90%,
+          5% 60%,
+          0% 60%,
+          0% 48%,
+          89% 48%,
+          89% 13%,
+          80% 13%,
+          80% 43%,
+          95% 43%,
+          95% 19%,
+          80% 19%,
+          80% 85%,
+          38% 85%,
+          38% 62%
+      );
+    }
+
+    1%,
+    7%,
+    33%,
+    47%,
+    78%,
+    93% {
+      clip-path: none;
+    }
+  }
+
+  @keyframes movement {
+    0% {
+      top: 0px;
+      left: -20px;
+    }
+
+    15% {
+      top: 10px;
+      left: 10px;
+    }
+
+    60% {
+      top: 5px;
+      left: -10px;
+    }
+
+    75% {
+      top: -5px;
+      left: 20px;
+    }
+
+    100% {
+      top: 10px;
+      left: 5px;
+    }
+  }
+
+  @keyframes opacity {
+    0% {
+      opacity: 0.1;
+    }
+
+    5% {
+      opacity: 0.7;
+    }
+
+    30% {
+      opacity: 0.4;
+    }
+
+    45% {
+      opacity: 0.6;
+    }
+
+    76% {
+      opacity: 0.4;
+    }
+
+    90% {
+      opacity: 0.8;
+    }
+
+    1%,
+    7%,
+    33%,
+    47%,
+    78%,
+    93% {
+      opacity: 0;
+    }
+  }
+
+  @keyframes font {
+    0% {
+      font-weight: 100;
+      color: #e0287d;
+      filter: blur(3px);
+    }
+
+    20% {
+      font-weight: 500;
+      color: #fff;
+      filter: blur(0);
+    }
+
+    50% {
+      font-weight: 300;
+      color: #1bc7fb;
+      filter: blur(2px);
+    }
+
+    60% {
+      font-weight: 700;
+      color: #fff;
+      filter: blur(0);
+    }
+
+    90% {
+      font-weight: 500;
+      color: #e0287d;
+      filter: blur(6px);
+    }
+  }
+</style>
\ No newline at end of file
diff --git a/zkgm-dev/src/lib/index.ts b/zkgm-dev/src/lib/index.ts
deleted file mode 100644
index 856f2b6c38..0000000000
--- a/zkgm-dev/src/lib/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.
diff --git a/zkgm-dev/src/routes/+layout.svelte b/zkgm-dev/src/routes/+layout.svelte
index 00e937fb18..75b753ab0b 100644
--- a/zkgm-dev/src/routes/+layout.svelte
+++ b/zkgm-dev/src/routes/+layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 import "../app.css"
+
 let { children } = $props()
 </script>
 
-{@render children()}
+{@render children()}
\ No newline at end of file
diff --git a/zkgm-dev/src/routes/+page.svelte b/zkgm-dev/src/routes/+page.svelte
index cc88df0ea3..36ee0dafe0 100644
--- a/zkgm-dev/src/routes/+page.svelte
+++ b/zkgm-dev/src/routes/+page.svelte
@@ -1,2 +1,125 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+<script lang="ts">
+import Glitch from "$lib/components/Glitch.svelte"
+import { fade } from "svelte/transition"
+import Agents from "$lib/components/Agents.svelte"
+import Bar from "$lib/components/Bar.svelte"
+
+let isPlaying: boolean = $state(false)
+let isLoading: boolean = $state(false)
+let video: HTMLVideoElement | null = $state(null)
+let overlay: boolean = $state(true)
+
+function handleTouch() {
+  if (!isPlaying) {
+    startVideo()
+  }
+}
+
+async function startVideo() {
+  if (video) {
+    isLoading = true
+    // Reset video state
+    video.muted = true
+    video.currentTime = 0
+    video.playsInline = true
+    video.load()
+
+    try {
+      await video.play()
+      setTimeout(() => {
+        if (video) {
+          video.muted = false
+          isPlaying = true
+          overlay = false
+          isLoading = false
+        }
+      }, 100)
+    } catch (error) {
+      console.error("Error playing video:", error)
+      isPlaying = false
+      overlay = true
+      isLoading = false
+    }
+  }
+}
+</script>
+
+<div
+        role="presentation"
+        ontouchstart={handleTouch}
+        class="w-full h-full"
+>
+  <video
+          bind:this={video}
+          id="glitch-video"
+          loop
+          playsinline
+          muted
+          preload="auto"
+          class="fixed inset-0 w-full h-full object-cover -z-10"
+          data-video="glitch"
+  >
+    <source
+            src="https://pub-32dd1494f0fa423cb1013941269ecce9.r2.dev/zkgm-v1.mp4"
+            type="video/mp4"
+    />
+  </video>
+
+  {#if overlay}
+    <div class="fixed inset-0 bg-black flex items-center justify-center">
+      <button
+              class="text-union-accent-500 relative"
+              onclick={startVideo}
+              aria-label="Play video"
+              disabled={isLoading}
+      >
+        {#if isLoading}
+          <svg
+                  class="animate-spin size-24"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+          >
+            <circle
+                    class="opacity-25"
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    stroke="currentColor"
+                    stroke-width="4"
+            />
+            <path
+                    class="opacity-75"
+                    fill="currentColor"
+                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            />
+          </svg>
+        {:else}
+          <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill="none"
+                  viewBox="0 0 24 24"
+                  stroke-width="1.5"
+                  stroke="currentColor"
+                  class="size-24"
+          >
+            <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15.91 11.672a.375.375 0 0 1 0 .656l-5.603 3.113a.375.375 0 0 1-.557-.328V8.887c0-.286.307-.466.557-.327l5.603 3.112Z" />
+          </svg>
+        {/if}
+      </button>
+    </div>
+  {/if}
+
+  {#if isPlaying}
+    <div class="h-svh w-full flex flex-col justify-between items-center relative" in:fade>
+      <Bar/>
+      <div class="flex-grow flex items-center">
+        <Glitch text="ZKGM"/>
+      </div>
+      <div class="h-24 w-full flex-shrink-0">
+        <Agents/>
+      </div>
+    </div>
+  {/if}
+</div>
\ No newline at end of file
diff --git a/zkgm-dev/static/agents/ben.png b/zkgm-dev/static/agents/ben.png
new file mode 100644
index 0000000000..58d4e8ea97
--- /dev/null
+++ b/zkgm-dev/static/agents/ben.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:b3be3cd75ae26509585bad6346c00cd980b14d6990e9e8a9d5305cb4ad23f874
+size 241602
diff --git a/zkgm-dev/static/agents/cor.png b/zkgm-dev/static/agents/cor.png
new file mode 100644
index 0000000000..e38a39d7d0
--- /dev/null
+++ b/zkgm-dev/static/agents/cor.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:afe5954bf4860d6fcaf744eb4d71322e1f625ed55f0a90f18806c29ff812e442
+size 250564
diff --git a/zkgm-dev/static/agents/lukas.png b/zkgm-dev/static/agents/lukas.png
new file mode 100644
index 0000000000..3521dd92b4
--- /dev/null
+++ b/zkgm-dev/static/agents/lukas.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3963baecd1f768925d95f8ec887cbf7a37860d35aa3ce173cefdb4f75a279b68
+size 251530
diff --git a/zkgm-dev/static/agents/omar.png b/zkgm-dev/static/agents/omar.png
new file mode 100644
index 0000000000..5a80f5ebcb
--- /dev/null
+++ b/zkgm-dev/static/agents/omar.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:972d29dcd025fd83c221812a5ceaf058a69428e97af5241a35063497707a7251
+size 370157
diff --git a/zkgm-dev/static/favicon.svg b/zkgm-dev/static/favicon.svg
new file mode 100644
index 0000000000..c3d72a1cce
--- /dev/null
+++ b/zkgm-dev/static/favicon.svg
@@ -0,0 +1,13 @@
+<svg width="192" height="192" viewBox="0 0 192 192" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M136 128C136 163.346 107.346 192 72 192C36.6538 192 8 163.346 8 128H40C40 145.673 54.3269 160 72 160C89.6731 160 104 145.673 104 128H136Z" fill="#1b1b1d"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M40 80H8V112H40V80ZM136 80H104V112H136V80Z" fill="#1b1b1d"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M152 112L184 112L184 80L152 80L152 112ZM56 112L88 112L88 80L56 80L56 112Z" fill="#1b1b1d"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M56 64C56 28.6538 84.6538 -8.68512e-06 120 -5.59506e-06C155.346 -2.50499e-06 184 28.6538 184 64L152 64C152 46.3269 137.673 32 120 32C102.327 32 88 46.3269 88 64L56 64Z" fill="#1b1b1d"/>
+
+  <style>
+    @media (prefers-color-scheme: dark) {
+      path { fill: #ffffff }
+    }
+  </style>
+</svg>
+
diff --git a/zkgm-dev/static/logo.svg b/zkgm-dev/static/logo.svg
new file mode 100644
index 0000000000..b738297879
--- /dev/null
+++ b/zkgm-dev/static/logo.svg
@@ -0,0 +1,20 @@
+<svg width="556" height="172" viewBox="0 0 556 172" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_199_693)">
+<path d="M490 119H471V43H491L522 90V90L521 76V43H540V119H520L489 72V72L490 86V119Z" fill="white"/>
+<path d="M404 120C398.261 120 393.598 118.961 390 116C386.488 112.967 385 108.839 385 104V58C385 53.0889 386.488 48.9611 390 46C393.598 43.0389 398.261 42 404 42H435C440.825 42 445.488 43.0389 449 46C452.512 48.9611 454 53.0889 454 58V104C454 108.839 452.512 112.967 449 116C445.488 118.961 440.825 120 435 120H404ZM428 105C430.056 105 431.886 104.939 433 104C434.199 103.061 435 101.733 435 100V62C435 60.2667 434.199 58.9389 433 58C431.886 57.0611 430.056 57 428 57H411C408.858 57 407.114 57.0611 406 58C404.886 58.9389 404 60.2667 404 62V100C404 101.733 404.886 103.061 406 104C407.114 104.939 408.858 105 411 105H428Z" fill="white"/>
+<path d="M368 119H349V43H368V119Z" fill="white"/>
+<path d="M280 119H261V43H281L312 90V90L311 76V43H330V119H310L279 72V72L280 86V119Z" fill="white"/>
+<path d="M195 120C189.269 120 184.592 118.964 181 116C177.493 112.963 176 108.844 176 104V43H195V100C195 101.735 195.888 103.06 197 104C198.112 104.94 199.862 105 202 105H218C220.138 105 221.888 104.94 223 104C224.112 103.06 225 101.735 225 100V43H244V104C244 108.844 242.507 112.963 239 116C235.493 118.964 230.816 120 225 120H195Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M114 106C114 133.062 92.0618 155 65 155C37.9381 155 16 133.062 16 106H40C40 119.531 51.469 130.5 65 130.5C78.5309 130.5 90 119.531 90 106H114Z" fill="white"/>
+<path d="M127 93H151V69H127V93Z" fill="white"/>
+<path d="M114 69H90V93H114V69Z" fill="white"/>
+<path d="M53 93H77V69H53V93Z" fill="white"/>
+<path d="M40 69H16V93H40V69Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M53 57C53 29.9381 74.9382 8 102 8C129.062 8 151 29.9381 151 57H127C127 43.469 115.531 32.5 102 32.5C88.4691 32.5 77 43.469 77 57H53Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_199_693">
+<rect width="556" height="172" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/zkgm-dev/static/zkgm.png b/zkgm-dev/static/zkgm.png
new file mode 100644
index 0000000000..8ccb2caa74
--- /dev/null
+++ b/zkgm-dev/static/zkgm.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:87aa6027090e3dae8507718fead9df9063b8798ffbab916b3e3def283305cf91
+size 302531
diff --git a/zkgm-dev/tailwind.config.ts b/zkgm-dev/tailwind.config.ts
index 1b3458a004..37880d54d2 100644
--- a/zkgm-dev/tailwind.config.ts
+++ b/zkgm-dev/tailwind.config.ts
@@ -4,7 +4,37 @@ export default {
   content: ["./src/**/*.{html,js,svelte,ts}"],
 
   theme: {
-    extend: {}
+    extend: {
+      colors: {
+        union: {
+          accent: {
+            50: "#FAFEFF",
+            100: "#F0FCFF",
+            200: "#DCF8FE",
+            300: "#C8F4FE",
+            400: "#B4F0FD",
+            500: "#A0ECFD",
+            600: "#5FDFFC",
+            700: "#1ED2FA",
+            800: "#04ACD2",
+            900: "#037791",
+            950: "#025C70"
+          },
+          text: {
+            primary: "#FFFFFF"
+          },
+          heading: {
+            primary: "#FFFFFF"
+          },
+          background: {
+            primary: "#000000",
+            secondary: "#1C1C1C",
+            black: "#000000",
+            white: "#FFFFFF"
+          }
+        }
+      }
+    }
   },
 
   plugins: []
