diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
new file mode 100644
index 0000000..40a90e9
--- /dev/null
+++ b/.github/workflows/docker.yml
@@ -0,0 +1,47 @@
+name: Docker
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  docker:
+    name: Build and push Docker image
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Log in to Docker registry
+        uses: docker/login-action@v3
+        with:
+          registry: ${{ vars.DOCKER_REGISTRY }}
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      - name: Extract metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ${{ vars.DOCKER_REGISTRY }}/${{ vars.DOCKER_IMAGE }}
+          tags: |
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+            type=semver,pattern={{major}}
+
+      - name: Build and push
+        uses: docker/build-push-action@v6
+        with:
+          context: .
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
diff --git a/src/routes/emotes.rs b/src/routes/emotes.rs
index 736e233..2e87e30 100644
--- a/src/routes/emotes.rs
+++ b/src/routes/emotes.rs
@@ -1,7 +1,7 @@
 use axum::{
     extract::{Multipart, Path, State},
     http::StatusCode,
-    response::{IntoResponse, Json},
+    response::{Html, IntoResponse, Json},
 };
 use serde_json::json;
 
@@ -11,9 +11,9 @@ use crate::{
 };
 
 /// GET /
-/// Returns a simple health-check message.
+/// Serves an HTML page that dynamically loads and displays emotes from /json.
 pub async fn root() -> impl IntoResponse {
-    Json(json!({"status": "ok", "message": "mikebase server is running"}))
+    Html(include_str!("../templates/index.html"))
 }
 
 /// GET /json
diff --git a/src/templates/index.html b/src/templates/index.html
new file mode 100644
index 0000000..e18bfe3
--- /dev/null
+++ b/src/templates/index.html
@@ -0,0 +1,142 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>MIKEBASE</title>
+<style>
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body { font-family: system-ui, -apple-system, sans-serif; background: #222222; color: #ffffff; }
+  nav {
+    height: 60px; display: flex; align-items: center; padding: 0 24px;
+    background: #171717; border-bottom: 2px solid #4a0000;
+    box-shadow: 0 2px 12px rgba(74, 0, 0, 0.5);
+    position: relative; z-index: 10;
+  }
+  nav .logo { font-size: 1.5rem; letter-spacing: 0.08em; color: #ffffff; }
+  nav .logo strong { font-weight: 700; color: #ff4d4d; text-shadow: 0 0 8px rgba(74, 0, 0, 0.8); }
+  nav .logo span { font-weight: 300; }
+  @keyframes fadeInUp {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .grid { display: flex; flex-wrap: wrap; gap: 14px; padding: 24px; justify-content: center; }
+  .emote {
+    display: flex; flex-direction: column; align-items: center;
+    cursor: pointer; padding: 10px; border-radius: 10px;
+    border: 1px solid transparent;
+    transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease;
+    animation: fadeInUp 0.4s ease both;
+  }
+  .emote:hover {
+    background: rgba(74, 0, 0, 0.15);
+    border-color: #4a0000;
+    box-shadow: 0 0 14px rgba(74, 0, 0, 0.6);
+    transform: translateY(-2px);
+  }
+  .emote:active {
+    transform: scale(0.95);
+    box-shadow: 0 0 20px rgba(74, 0, 0, 0.9);
+  }
+  .emote img {
+    width: 64px; height: 64px; object-fit: contain;
+    transition: filter 0.25s ease, transform 0.25s ease;
+  }
+  .emote:hover img {
+    filter: drop-shadow(0 0 6px rgba(74, 0, 0, 0.7));
+    transform: scale(1.08);
+  }
+  .emote .code {
+    font-size: 0.7rem; margin-top: 6px; color: #999;
+    max-width: 80px; overflow: hidden; text-overflow: ellipsis;
+    white-space: nowrap; text-align: center;
+    transition: color 0.25s ease;
+  }
+  .emote:hover .code { color: #ff4d4d; }
+  .toast {
+    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px);
+    background: #4a0000; color: #ffffff; padding: 10px 20px; border-radius: 8px;
+    font-size: 0.85rem; opacity: 0;
+    box-shadow: 0 0 16px rgba(74, 0, 0, 0.7);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    pointer-events: none;
+  }
+  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+</style>
+</head>
+<body>
+<nav>
+  <div class="logo"><strong>MIKE</strong><span>BASE</span></div>
+</nav>
+<div class="grid" id="grid"></div>
+<div class="toast" id="toast">Copied!</div>
+<script>
+(function(){
+  var toast = document.getElementById('toast');
+  var timer;
+
+  function showToast(text) {
+    toast.textContent = text;
+    toast.classList.add('show');
+    clearTimeout(timer);
+    timer = setTimeout(function(){ toast.classList.remove('show'); }, 1500);
+  }
+
+  function copyCode(code) {
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(code).then(function(){
+        showToast('Copied ' + code);
+      });
+    } else {
+      var ta = document.createElement('textarea');
+      ta.value = code;
+      ta.style.position = 'fixed';
+      ta.style.opacity = '0';
+      document.body.appendChild(ta);
+      ta.select();
+      document.execCommand('copy');
+      document.body.removeChild(ta);
+      showToast('Copied ' + code);
+    }
+  }
+
+  fetch('/json')
+    .then(function(r){
+      if (!r.ok) throw new Error('HTTP ' + r.status);
+      return r.json();
+    })
+    .then(function(data){
+      var grid = document.getElementById('grid');
+      var emotes = data.emotes || [];
+      emotes.forEach(function(emote){
+        var code = ':' + emote.name + ':';
+        var card = document.createElement('div');
+        card.className = 'emote';
+        card.title = code;
+        card.addEventListener('click', function(){ copyCode(code); });
+
+        var img = document.createElement('img');
+        img.alt = emote.name;
+        img.loading = 'lazy';
+        img.width = 64;
+        img.height = 64;
+        img.src = emote.url;
+
+        var span = document.createElement('span');
+        span.className = 'code';
+        span.textContent = code;
+
+        card.appendChild(img);
+        card.appendChild(span);
+        grid.appendChild(card);
+      });
+    })
+    .catch(function(err){
+      var grid = document.getElementById('grid');
+      grid.textContent = 'Failed to load emotes: ' + err.message;
+      grid.style.color = '#f66';
+    });
+})();
+</script>
+</body>
+</html>
