diff --git a/shatter-web/src/components/BingoTable.tsx b/shatter-web/src/components/BingoTable.tsx
new file mode 100644
index 0000000..9b33770
--- /dev/null
+++ b/shatter-web/src/components/BingoTable.tsx
@@ -0,0 +1,40 @@
+interface BingoTableProps {
+    grid: string[][];
+    onChange: (row: number, col: number, value: string) => void;
+}
+
+export default function BingoTable({ grid, onChange }: BingoTableProps) {
+    const size = grid.length;
+
+    return (
+        <div>
+            <label className="block text-sm text-white font-body mb-3">
+                Bingo Grid ({size}x{size})
+                <span className="text-white/60 text-xs ml-2">
+                    Fill in each box with a question or trait
+                </span>
+            </label>
+
+            <div className={`grid gap-2 ${size === 3 ? "grid-cols-3" : "grid-cols-5"}`}>
+                {grid.map((row, rowIndex) =>
+                    row.map((cell, colIndex) => (
+                        <div key={`${rowIndex}-${colIndex}`} className="relative group">
+                            <input
+                                type="text"
+                                value={cell}
+                                onChange={(e) =>
+                                    onChange(rowIndex, colIndex, e.target.value)
+                                }
+                                placeholder={`${rowIndex + 1}-${colIndex + 1}`}
+                                className="w-full h-24 p-2 rounded-lg bg-white/5 border border-white/20 text-white text-xs placeholder-white/30 focus:outline-none focus:border-[#4DC4FF] focus:ring-2 focus:ring-[#4DC4FF]/20 transition-all font-body"
+                            />
+                            <div className="absolute -top-2 -left-2 w-5 h-5 rounded-full bg-[#4DC4FF]/80 text-white text-xs flex items-center justify-center font-bold opacity-0 group-hover:opacity-100 transition-opacity">
+                                {rowIndex * size + colIndex + 1}
+                            </div>
+                        </div>
+                    ))
+                )}
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/shatter-web/src/components/EventSpotlight.tsx b/shatter-web/src/components/EventSpotlight.tsx
new file mode 100644
index 0000000..6fe0be9
--- /dev/null
+++ b/shatter-web/src/components/EventSpotlight.tsx
@@ -0,0 +1,461 @@
+import { useEffect, useMemo, useState } from "react";
+import type { Participant } from "../types/participant";
+
+export interface Connection {
+  from: string; // participantId
+  to: string;   // participantId
+}
+
+export interface ActivityItem {
+  id: string;
+  type: "joined" | "connection";
+  participantName?: string;
+  fromName?: string;
+  toName?: string;
+  timestamp: number;
+}
+
+interface ConnectedUserResponse {
+  participantId: string | { toString(): string };
+  participantName?: string | null;
+  connectionDescription?: string | null;
+}
+
+interface EventSpotlightProps {
+  participants: Participant[];
+  eventId: string | null;
+  connections?: Connection[];
+  activity?: ActivityItem[];
+  /** Generate demo connections when API returns no connections */
+  useDemoConnections?: boolean;
+  /** Generate demo activity when none provided */
+  useDemoActivity?: boolean;
+}
+
+const BUBBLE_RADIUS = 32;
+const CONTAINER_PADDING = 60;
+
+function getBubblePosition(
+  index: number,
+  total: number,
+  centerX: number,
+  centerY: number,
+  radius: number
+): { x: number; y: number } {
+  if (total <= 0) return { x: centerX, y: centerY };
+  if (total === 1) return { x: centerX, y: centerY };
+  const angle = (index / total) * 2 * Math.PI - Math.PI / 2; // Start from top
+  return {
+    x: centerX + radius * Math.cos(angle),
+    y: centerY + radius * Math.sin(angle),
+  };
+}
+
+function getParticipantColor(index: number): string {
+  const hues = [200, 160, 280, 40, 320, 180, 260, 60]; // Cyan, teal, purple, orange, pink, etc.
+  const hue = hues[index % hues.length];
+  return `hsl(${hue}, 70%, 55%)`;
+}
+
+function normalizeId(id: string | { toString(): string }): string {
+  return typeof id === "string" ? id : id.toString();
+}
+
+export default function EventSpotlight({
+  participants,
+  eventId,
+  connections: connectionsProp = [],
+  activity = [],
+  useDemoConnections = false,
+  useDemoActivity = true,
+}: EventSpotlightProps) {
+  const [hoveredId, setHoveredId] = useState<string | null>(null);
+  const [fetchedConnections, setFetchedConnections] = useState<Connection[]>([]);
+  const [connectionsLoading, setConnectionsLoading] = useState(false);
+
+  // Fetch connections from GET /api/participantConnections/connected-users
+  useEffect(() => {
+    if (!eventId || participants.length === 0) {
+      setFetchedConnections([]);
+      return;
+    }
+
+    const token = localStorage.getItem("token");
+    if (!token) {
+      setFetchedConnections([]);
+      return;
+    }
+
+    const apiUrl = import.meta.env.VITE_API_URL;
+    const connectionSet = new Set<string>();
+    const conns: Connection[] = [];
+
+    const fetchAll = async () => {
+      setConnectionsLoading(true);
+      try {
+        const results = await Promise.all(
+          participants.map(async (p) => {
+            const url = `${apiUrl}/participantConnections/connected-users?eventId=${encodeURIComponent(eventId)}&participantId=${encodeURIComponent(p.participantId)}`;
+            const res = await fetch(url, {
+              headers: { Authorization: `Bearer ${token}` },
+            });
+            if (!res.ok) return [];
+            const data: ConnectedUserResponse[] = await res.json();
+            return data.map((item) => ({
+              from: p.participantId,
+              to: normalizeId(item.participantId),
+            }));
+          })
+        );
+
+        for (const list of results) {
+          for (const c of list) {
+            const key = [c.from, c.to].sort().join("|");
+            if (!connectionSet.has(key)) {
+              connectionSet.add(key);
+              conns.push(c);
+            }
+          }
+        }
+        setFetchedConnections(conns);
+      } catch {
+        setFetchedConnections([]);
+      } finally {
+        setConnectionsLoading(false);
+      }
+    };
+
+    fetchAll();
+  }, [eventId, participants]);
+
+  // Use prop connections if provided, else fetched connections
+  const connections = connectionsProp.length > 0 ? connectionsProp : fetchedConnections;
+
+  // Container dimensions
+  const size = 400;
+  const centerX = size / 2;
+  const centerY = size / 2;
+  const graphRadius = Math.min(size - CONTAINER_PADDING * 2, 280) / 2;
+
+  // Participant positions
+  const positions = useMemo(() => {
+    const map = new Map<string, { x: number; y: number; color: string }>();
+    participants.forEach((p, i) => {
+      const pos = getBubblePosition(i, participants.length, centerX, centerY, graphRadius);
+      map.set(p.participantId, {
+        ...pos,
+        color: getParticipantColor(i),
+      });
+    });
+    return map;
+  }, [participants, centerX, centerY, graphRadius]);
+
+  // Demo connections: connect participants in a fun pattern (every other, creating a star)
+  const effectiveConnections = useMemo(() => {
+    if (connections.length > 0) return connections;
+    if (!useDemoConnections || participants.length < 2) return [];
+
+    const demo: Connection[] = [];
+    const n = participants.length;
+    for (let i = 0; i < n; i++) {
+      const j = (i + 2) % n; // Skip one for star pattern
+      if (i < j) {
+        demo.push({ from: participants[i].participantId, to: participants[j].participantId });
+      }
+    }
+    return demo.slice(0, Math.min(demo.length, 8)); // Cap demo lines
+  }, [connections, participants, useDemoConnections]);
+
+  // Demo activity: join events + fake connection events
+  const effectiveActivity = useMemo(() => {
+    if (activity.length > 0) return activity;
+    if (!useDemoActivity) return [];
+
+    const items: ActivityItem[] = participants
+      .slice(0, 5)
+      .map((p, i) => ({
+        id: `join-${p.participantId}`,
+        type: "joined" as const,
+        participantName: p.name,
+        timestamp: Date.now() - (participants.length - i) * 60000,
+      }));
+
+    // Add some fake connection events
+    if (participants.length >= 2) {
+      items.push({
+        id: "conn-1",
+        type: "connection",
+        fromName: participants[0].name,
+        toName: participants[1].name,
+        timestamp: Date.now() - 120000,
+      });
+      if (participants.length >= 4) {
+        items.push({
+          id: "conn-2",
+          type: "connection",
+          fromName: participants[2].name,
+          toName: participants[3].name,
+          timestamp: Date.now() - 90000,
+        });
+      }
+    }
+
+    return items.sort((a, b) => b.timestamp - a.timestamp).slice(0, 8);
+  }, [activity, participants, useDemoActivity]);
+
+  // Leaderboard: count connections per participant — show ALL participants
+  const leaderboard = useMemo(() => {
+    const scores = new Map<string, { name: string; count: number }>();
+    participants.forEach((p) => scores.set(p.participantId, { name: p.name, count: 0 }));
+
+    effectiveConnections.forEach((c) => {
+      const from = scores.get(c.from);
+      const to = scores.get(c.to);
+      if (from) from.count++;
+      if (to) to.count++;
+    });
+
+    return Array.from(scores.entries())
+      .map(([id, { name, count }]) => ({ participantId: id, name, connections: count }))
+      .sort((a, b) => b.connections - a.connections);
+  }, [participants, effectiveConnections]);
+
+  const formatTimeAgo = (ts: number) => {
+    const sec = Math.floor((Date.now() - ts) / 1000);
+    if (sec < 60) return "just now";
+    const min = Math.floor(sec / 60);
+    if (min < 60) return `${min}m ago`;
+    const hr = Math.floor(min / 60);
+    return `${hr}h ago`;
+  };
+
+  if (participants.length === 0) {
+    return (
+      <div
+        className="backdrop-blur-lg border border-white/20 rounded-2xl p-8 text-center"
+        style={{ backgroundColor: "rgba(27, 37, 58, 0.5)" }}
+      >
+        <h3 className="text-xl font-heading font-semibold text-white mb-2">
+          Live Activity Spotlight
+        </h3>
+        <p className="text-white/60 font-body text-sm">
+          When participants join and make connections, you&apos;ll see them here as bubbles with lines between connected people.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="backdrop-blur-lg border border-white/20 rounded-2xl overflow-hidden"
+      style={{ backgroundColor: "rgba(27, 37, 58, 0.5)" }}
+    >
+      <div className="p-4 border-b border-white/10">
+        <h3 className="text-xl font-heading font-semibold text-white">
+          Live Activity Spotlight
+        </h3>
+        <p className="text-white/60 font-body text-sm mt-0.5">
+          See who&apos;s here and who&apos;s connecting
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-0">
+        {/* Network Graph */}
+        <div className="lg:col-span-2 p-4 flex items-center justify-center min-h-[360px]">
+          <svg
+            viewBox={`0 0 ${size} ${size}`}
+            className="overflow-visible w-full max-w-[400px] h-auto aspect-square"
+          >
+            {/* Connection lines */}
+            <g>
+              {effectiveConnections.map((conn, i) => {
+                const fromPos = positions.get(conn.from);
+                const toPos = positions.get(conn.to);
+                if (!fromPos || !toPos) return null;
+                return (
+                  <line
+                    key={`${conn.from}-${conn.to}-${i}`}
+                    x1={fromPos.x}
+                    y1={fromPos.y}
+                    x2={toPos.x}
+                    y2={toPos.y}
+                    stroke="rgba(77, 196, 255, 0.5)"
+                    strokeWidth={2}
+                    className="transition-opacity duration-200"
+                    style={{
+                      strokeDasharray: "6 4",
+                      animation: "dash 1s linear infinite",
+                    }}
+                  />
+                );
+              })}
+            </g>
+            {/* Participant bubbles */}
+            {participants.map((p, i) => {
+              const pos = positions.get(p.participantId);
+              if (!pos) return null;
+              const isHovered = hoveredId === p.participantId;
+              return (
+                <g
+                  key={p.participantId}
+                  onMouseEnter={() => setHoveredId(p.participantId)}
+                  onMouseLeave={() => setHoveredId(null)}
+                  style={{ cursor: "pointer" }}
+                >
+                  {/* Glow on hover */}
+                  {isHovered && (
+                    <circle
+                      cx={pos.x}
+                      cy={pos.y}
+                      r={BUBBLE_RADIUS + 8}
+                      fill={pos.color}
+                      opacity={0.3}
+                      className="animate-pulse"
+                    />
+                  )}
+                  <circle
+                    cx={pos.x}
+                    cy={pos.y}
+                    r={BUBBLE_RADIUS}
+                    fill={pos.color}
+                    stroke={isHovered ? "#4DC4FF" : "rgba(255,255,255,0.3)"}
+                    strokeWidth={isHovered ? 3 : 1}
+                    className="transition-all duration-200 drop-shadow-lg"
+                  />
+                  <text
+                    x={pos.x}
+                    y={pos.y}
+                    textAnchor="middle"
+                    dominantBaseline="middle"
+                    fill="white"
+                    fontSize={14}
+                    fontWeight="600"
+                    className="font-heading pointer-events-none select-none"
+                  >
+                    {p.name.charAt(0).toUpperCase()}
+                  </text>
+                  {/* Tooltip */}
+                  {isHovered && (
+                    <g>
+                      <rect
+                        x={pos.x - 40}
+                        y={pos.y - BUBBLE_RADIUS - 28}
+                        width={80}
+                        height={24}
+                        rx={4}
+                        fill="rgba(0,0,0,0.8)"
+                      />
+                      <text
+                        x={pos.x}
+                        y={pos.y - BUBBLE_RADIUS - 12}
+                        textAnchor="middle"
+                        fill="white"
+                        fontSize={12}
+                        className="font-body"
+                      >
+                        {p.name}
+                      </text>
+                    </g>
+                  )}
+                </g>
+              );
+            })}
+          </svg>
+          <style>{`
+            @keyframes dash {
+              to { stroke-dashoffset: -10; }
+            }
+          `}</style>
+        </div>
+
+        {/* Right: Activity + Leaderboard */}
+        <div className="lg:col-span-1 flex flex-col border-t lg:border-t-0 lg:border-l border-white/10">
+          {/* Activity Feed */}
+          <div className="p-4 flex-1 border-b lg:border-b-0 lg:border-b border-white/10">
+            <h4 className="text-sm font-heading font-semibold text-white/80 mb-3 uppercase tracking-wider">
+              Recent Activity
+            </h4>
+            <div className="space-y-2 max-h-36 overflow-y-auto">
+              {effectiveActivity.length === 0 ? (
+                <p className="text-white/50 text-sm font-body">No activity yet</p>
+              ) : (
+                effectiveActivity.map((item) => (
+                  <div
+                    key={item.id}
+                    className="flex items-start gap-2 text-sm font-body"
+                  >
+                    <span
+                      className="w-2 h-2 rounded-full flex-shrink-0 mt-1.5"
+                      style={{
+                        backgroundColor:
+                          item.type === "joined"
+                            ? "#4ade80"
+                            : "#4DC4FF",
+                      }}
+                    />
+                    <div>
+                      {item.type === "joined" ? (
+                        <span className="text-white/90">
+                          <span className="font-semibold text-white">{item.participantName}</span> joined
+                        </span>
+                      ) : (
+                        <span className="text-white/90">
+                          <span className="font-semibold text-white">{item.fromName}</span> connected with{" "}
+                          <span className="font-semibold text-white">{item.toName}</span>
+                        </span>
+                      )}
+                      <p className="text-white/50 text-xs mt-0.5">
+                        {formatTimeAgo(item.timestamp)}
+                      </p>
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+
+          {/* Leaderboard */}
+          <div className="p-4 flex-1 min-h-0 flex flex-col">
+            <h4 className="text-sm font-heading font-semibold text-white/80 mb-3 uppercase tracking-wider">
+              Connection Leaderboard
+            </h4>
+            <div className="space-y-2 overflow-y-auto max-h-48">
+              {leaderboard.map((entry, i) => (
+                <div
+                  key={entry.participantId}
+                  className="flex items-center gap-3 p-2 rounded-lg bg-white/5"
+                >
+                  <span
+                    className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold font-heading"
+                    style={{
+                      backgroundColor:
+                        i === 0
+                          ? "rgba(251, 191, 36, 0.3)"
+                          : i === 1
+                          ? "rgba(192, 192, 192, 0.3)"
+                          : i === 2
+                          ? "rgba(205, 127, 50, 0.3)"
+                          : "rgba(255,255,255,0.1)",
+                      color: "#fff",
+                    }}
+                  >
+                    {i + 1}
+                  </span>
+                  <span className="font-body text-white font-medium flex-1 truncate">
+                    {entry.name}
+                  </span>
+                  <span
+                    className="text-sm font-semibold"
+                    style={{ color: "#4DC4FF" }}
+                  >
+                    {entry.connections} {entry.connections === 1 ? "link" : "links"}
+                  </span>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/shatter-web/src/components/Hero.tsx b/shatter-web/src/components/Hero.tsx
index e581684..cbb921c 100644
--- a/shatter-web/src/components/Hero.tsx
+++ b/shatter-web/src/components/Hero.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react';
 import QRCard from './QRCard';
+import { ChevronDownIcon } from './icons';
 
 interface HeroProps {
   qrPayload?: string;
@@ -229,19 +230,7 @@ const Hero: React.FC<HeroProps> = ({ qrPayload = "hello" }) => {
 
       {/* Scroll Indicator */}
       <div className="absolute bottom-8 left-1/2 -translate-x-1/2 animate-bounce">
-        <svg
-          className="w-6 h-6 text-white/40"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M19 14l-7 7m0 0l-7-7m7 7V3"
-          />
-        </svg>
+        <ChevronDownIcon className="w-6 h-6 text-white/40" />
       </div>
 
       {/* Custom Animations */}
diff --git a/shatter-web/src/components/Navbar.tsx b/shatter-web/src/components/Navbar.tsx
index 5d6e5b3..38e634c 100644
--- a/shatter-web/src/components/Navbar.tsx
+++ b/shatter-web/src/components/Navbar.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 
 import logo from "../assets/ShatterLogo_White.png";
+import { BarsIcon, XIcon } from "./icons";
 
 export default function Navbar() {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -194,35 +195,9 @@ export default function Navbar() {
           aria-label="Toggle menu"
         >
           {isMenuOpen ? (
-            /* Close Icon */
-            <svg
-              className="w-6 h-6"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M6 18L18 6M6 6l12 12"
-              />
-            </svg>
+            <XIcon className="w-6 h-6" />
           ) : (
-            /* Hamburger Icon */
-            <svg
-              className="w-6 h-6"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={2}
-                d="M4 6h16M4 12h16M4 18h16"
-              />
-            </svg>
+            <BarsIcon className="w-6 h-6" />
           )}
         </button>
       </div>
diff --git a/shatter-web/src/components/icons/BarsIcon.tsx b/shatter-web/src/components/icons/BarsIcon.tsx
new file mode 100644
index 0000000..12787cc
--- /dev/null
+++ b/shatter-web/src/components/icons/BarsIcon.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "./types";
+
+export function BarsIcon({ className = "w-4 h-4", ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M4 6h16M4 12h16M4 18h16"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/CalendarIcon.tsx b/shatter-web/src/components/icons/CalendarIcon.tsx
new file mode 100644
index 0000000..ed1b0f9
--- /dev/null
+++ b/shatter-web/src/components/icons/CalendarIcon.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "./types";
+
+export function CalendarIcon({ className = "w-4 h-4", ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/ChevronDownIcon.tsx b/shatter-web/src/components/icons/ChevronDownIcon.tsx
new file mode 100644
index 0000000..53ef640
--- /dev/null
+++ b/shatter-web/src/components/icons/ChevronDownIcon.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "./types";
+
+export function ChevronDownIcon({ className = "w-4 h-4", ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M19 14l-7 7m0 0l-7-7m7 7V3"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/ClipboardCopyIcon.tsx b/shatter-web/src/components/icons/ClipboardCopyIcon.tsx
new file mode 100644
index 0000000..9f625c0
--- /dev/null
+++ b/shatter-web/src/components/icons/ClipboardCopyIcon.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "./types";
+
+export function ClipboardCopyIcon({ className = "w-4 h-4", ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/ClipboardIcon.tsx b/shatter-web/src/components/icons/ClipboardIcon.tsx
new file mode 100644
index 0000000..cc94921
--- /dev/null
+++ b/shatter-web/src/components/icons/ClipboardIcon.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "./types";
+
+export function ClipboardIcon({ className = "w-4 h-4", ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/ClockIcon.tsx b/shatter-web/src/components/icons/ClockIcon.tsx
new file mode 100644
index 0000000..da14c3b
--- /dev/null
+++ b/shatter-web/src/components/icons/ClockIcon.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "./types";
+
+export function ClockIcon({ className = "w-4 h-4", ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/GoogleIcon.tsx b/shatter-web/src/components/icons/GoogleIcon.tsx
new file mode 100644
index 0000000..1927800
--- /dev/null
+++ b/shatter-web/src/components/icons/GoogleIcon.tsx
@@ -0,0 +1,24 @@
+import type { IconProps } from "./types";
+
+export function GoogleIcon({ className = "w-5 h-5", ...props }: IconProps) {
+  return (
+    <svg className={className} viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+      />
+      <path
+        fill="currentColor"
+        d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+      />
+      <path
+        fill="currentColor"
+        d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+      />
+      <path
+        fill="currentColor"
+        d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/InformationCircleIcon.tsx b/shatter-web/src/components/icons/InformationCircleIcon.tsx
new file mode 100644
index 0000000..4d17882
--- /dev/null
+++ b/shatter-web/src/components/icons/InformationCircleIcon.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "./types";
+
+export function InformationCircleIcon({ className = "w-4 h-4", ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/KeyIcon.tsx b/shatter-web/src/components/icons/KeyIcon.tsx
new file mode 100644
index 0000000..da05a75
--- /dev/null
+++ b/shatter-web/src/components/icons/KeyIcon.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "./types";
+
+export function KeyIcon({ className = "w-4 h-4", ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/PlusIcon.tsx b/shatter-web/src/components/icons/PlusIcon.tsx
new file mode 100644
index 0000000..0ebfdeb
--- /dev/null
+++ b/shatter-web/src/components/icons/PlusIcon.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "./types";
+
+export function PlusIcon({ className = "w-4 h-4", ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M12 4v16m8-8H4"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/SearchIcon.tsx b/shatter-web/src/components/icons/SearchIcon.tsx
new file mode 100644
index 0000000..c1a2cd6
--- /dev/null
+++ b/shatter-web/src/components/icons/SearchIcon.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "./types";
+
+export function SearchIcon({ className = "w-4 h-4", ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/UsersIcon.tsx b/shatter-web/src/components/icons/UsersIcon.tsx
new file mode 100644
index 0000000..f506fa5
--- /dev/null
+++ b/shatter-web/src/components/icons/UsersIcon.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "./types";
+
+export function UsersIcon({ className = "w-4 h-4", ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/XIcon.tsx b/shatter-web/src/components/icons/XIcon.tsx
new file mode 100644
index 0000000..05fe53b
--- /dev/null
+++ b/shatter-web/src/components/icons/XIcon.tsx
@@ -0,0 +1,20 @@
+import type { IconProps } from "./types";
+
+export function XIcon({ className = "w-4 h-4", ...props }: IconProps) {
+  return (
+    <svg
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        d="M6 18L18 6M6 6l12 12"
+      />
+    </svg>
+  );
+}
diff --git a/shatter-web/src/components/icons/index.ts b/shatter-web/src/components/icons/index.ts
new file mode 100644
index 0000000..ffc696b
--- /dev/null
+++ b/shatter-web/src/components/icons/index.ts
@@ -0,0 +1,13 @@
+export { BarsIcon } from "./BarsIcon";
+export { CalendarIcon } from "./CalendarIcon";
+export { ChevronDownIcon } from "./ChevronDownIcon";
+export { ClipboardCopyIcon } from "./ClipboardCopyIcon";
+export { ClipboardIcon } from "./ClipboardIcon";
+export { ClockIcon } from "./ClockIcon";
+export { GoogleIcon } from "./GoogleIcon";
+export { InformationCircleIcon } from "./InformationCircleIcon";
+export { KeyIcon } from "./KeyIcon";
+export { PlusIcon } from "./PlusIcon";
+export { SearchIcon } from "./SearchIcon";
+export { UsersIcon } from "./UsersIcon";
+export { XIcon } from "./XIcon";
diff --git a/shatter-web/src/components/icons/types.ts b/shatter-web/src/components/icons/types.ts
new file mode 100644
index 0000000..a580585
--- /dev/null
+++ b/shatter-web/src/components/icons/types.ts
@@ -0,0 +1,6 @@
+import type { SVGProps } from "react";
+
+export interface IconProps extends SVGProps<SVGSVGElement> {
+  className?: string;
+  size?: number;
+}
diff --git a/shatter-web/src/hooks/useEventData.ts b/shatter-web/src/hooks/useEventData.ts
index 79d696e..c583998 100644
--- a/shatter-web/src/hooks/useEventData.ts
+++ b/shatter-web/src/hooks/useEventData.ts
@@ -1,4 +1,4 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import type { Participant } from "../types/participant";
 
 interface EventDetails {
@@ -11,6 +11,7 @@ interface EventDetails {
   maxParticipant: number;
   currentState: string;
   participantIds: Participant[];
+  createdBy?: string;
 }
 
 interface EventResponse {
@@ -25,17 +26,16 @@ export function useEventData(joinCode: string | undefined) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  useEffect(() => {
+  const fetchEvent = useCallback((signal?: AbortSignal) => {
     if (!joinCode) {
       setLoading(false);
       return;
     }
-
     setLoading(true);
     setError("");
-    
     fetch(`${import.meta.env.VITE_API_URL}/events/event/${joinCode}`, {
       cache: "no-store",
+      signal,
     })
       .then((res) => {
         if (!res.ok) {
@@ -45,9 +45,10 @@ export function useEventData(joinCode: string | undefined) {
       })
       .then((data: EventResponse) => {
         if (data.success && data.event) {
-          setEventId(data.event._id);
-          setEventDetails(data.event);
-          setParticipants(data.event.participantIds);
+          const ev = data.event;
+          setEventId(ev._id);
+          setEventDetails(ev);
+          setParticipants(ev.participantIds || []);
         } else {
           setEventId(null);
           setEventDetails(null);
@@ -55,6 +56,7 @@ export function useEventData(joinCode: string | undefined) {
         }
       })
       .catch((err) => {
+        if (err?.name === "AbortError") return;
         console.error("Error fetching event:", err);
         setEventId(null);
         setEventDetails(null);
@@ -63,5 +65,14 @@ export function useEventData(joinCode: string | undefined) {
       .finally(() => setLoading(false));
   }, [joinCode]);
 
-  return { eventId, eventDetails, participants, loading, error };
+  useEffect(() => {
+    if (!joinCode) return;
+    const controller = new AbortController();
+    fetchEvent(controller.signal);
+    return () => controller.abort();
+  }, [joinCode, fetchEvent]);
+
+  const refetch = () => fetchEvent();
+
+  return { eventId, eventDetails, participants, loading, error, refetch };
 }
diff --git a/shatter-web/src/pages/CreateEventPage.tsx b/shatter-web/src/pages/CreateEventPage.tsx
index effc0b2..6cce9c6 100644
--- a/shatter-web/src/pages/CreateEventPage.tsx
+++ b/shatter-web/src/pages/CreateEventPage.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-import { useEffect } from "react";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
+import BingoTable from "../components/BingoTable";
 import { CreateEvent } from "../service/CreateEvent";
 import { createBingoGame } from "../service/BingoGame"; // ✅ NEW
 import { useNavigate } from "react-router-dom";
@@ -16,7 +16,10 @@ function CreateEventPage() {
     );
 
     // ✅ NEW: Name Bingo selection
+    const createEmptyGrid = (size: number) => Array.from({ length: size }, () => Array(size).fill(""));
     const [nameBingoSelected, setNameBingoSelected] = useState(false);
+    const [bingoGrid, setBingoGrid] = useState<string[][]>(createEmptyGrid(3));
+    const [bingoDescription, setBingoDescription] = useState("");
 
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
@@ -28,6 +31,26 @@ function CreateEventPage() {
             setLoading(true);
             setError(null);
 
+            // ✅ Validate main form
+            if (!name.trim() || !description.trim() || !startDate || !maxParticipant || maxParticipant <= 0) {
+                throw new Error("Please fill in all required fields.");
+            }
+
+            // ✅ Validate bingo (if selected)
+            if (nameBingoSelected) {
+                const hasEmptyCells = bingoGrid.some(row =>
+                    row.some(cell => !cell.trim())
+                );
+
+                if (hasEmptyCells) {
+                    throw new Error("Please fill in all bingo grid cells.");
+                }
+
+                if (!bingoDescription.trim()) {
+                    throw new Error("Please add a bingo description.");
+                }
+            }
+
             // 1️⃣ Create event
             const { eventId, joinCode } = await CreateEvent({
                 name,
@@ -37,19 +60,36 @@ function CreateEventPage() {
                 maxParticipants: maxParticipant ?? 0,
             });
 
-            // 2️⃣ If Name Bingo selected, create bingo game
+            // 2️⃣ Create bingo (ONLY ONE CALL)
             if (nameBingoSelected) {
                 const token = localStorage.getItem("token");
-                if (!token) {
-                    throw new Error("Authentication required to create bingo game.");
-                }
+                if (!token) throw new Error("Authentication required.");
 
-                await createBingoGame(eventId, token);
+                const response = await fetch(`${import.meta.env.VITE_API_URL}/bingo/createBingo`, {
+                    method: "POST",
+                    headers: {
+                        "Content-Type": "application/json",
+                        Authorization: `Bearer ${token}`,
+                    },
+                    body: JSON.stringify({
+                        _eventId: eventId,
+                        description: bingoDescription,
+                        grid: bingoGrid,
+                    }),
+                });
+
+                if (!response.ok) {
+                    const errData = await response.json().catch(() => ({}));
+                    throw new Error(errData.message || "Failed to create bingo game.");
+                }
             }
 
-            // 3️⃣ Navigate to the newly created event page
+            // 3️⃣ Navigate
+            setLoading(false);
             navigate(`/events/${joinCode}`);
+
         } catch (err: any) {
+            console.error("Create event error:", err);
             setError(err.message || "Failed to create event. Please try again.");
             setLoading(false);
         }
@@ -74,6 +114,11 @@ function CreateEventPage() {
         maxParticipant !== undefined && 
         maxParticipant > 0;
 
+    const token = localStorage.getItem("token");
+    if (!token) {
+        navigate("/login");
+        return;
+    }
     return (
         <div
             className="min-h-screen text-white"
@@ -174,7 +219,10 @@ function CreateEventPage() {
                             placeholder="e.g., 50"
                             className="w-full p-3 rounded bg-white border border-gray-700 text-black font-body"
                             value={maxParticipant ?? ""}
-                            onChange={(e) => setMaxParticipant(Number(e.target.value))}
+                            onChange={(e) => {
+                                const val = e.target.value;
+                                setMaxParticipant(val === "" ? undefined : Number(val));
+                            }}
                             min="1"
                             disabled={loading}
                         />
@@ -239,6 +287,31 @@ function CreateEventPage() {
                     </div>
                 </div>
 
+                {/*Icebreaker Properties*/}
+                                        {nameBingoSelected && (
+                            <div className="mt-6 space-y-4">
+                                <div>
+                                    <label className="text-sm text-white mb-2 block">
+                                        Bingo Description
+                                    </label>
+                                    <input
+                                        value={bingoDescription}
+                                        onChange={(e) => setBingoDescription(e.target.value)}
+                                        className="w-full p-3 rounded bg-white border text-black"
+                                    />
+                                </div>
+
+                                <BingoTable
+                                    grid={bingoGrid}
+                                    onChange={(row, col, value) => {
+                                        const newGrid = bingoGrid.map(r => [...r]); // ✅ deep copy
+                                        newGrid[row][col] = value;
+                                        setBingoGrid(newGrid);
+                                    }}
+                                />
+                            </div>
+                        )}
+
                 {/* Action Buttons */}
                 <div className="flex flex-col sm:flex-row justify-end gap-4 mt-12">
                     <button
diff --git a/shatter-web/src/pages/DashboardPage.tsx b/shatter-web/src/pages/DashboardPage.tsx
index 42f6425..67e9487 100644
--- a/shatter-web/src/pages/DashboardPage.tsx
+++ b/shatter-web/src/pages/DashboardPage.tsx
@@ -2,7 +2,19 @@ import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
-
+import BingoTable from "../components/BingoTable";
+import { getBingo } from "../service/BingoGame";
+import {
+    CalendarIcon,
+    ClipboardIcon,
+    ClockIcon,
+    InformationCircleIcon,
+    KeyIcon,
+    PlusIcon,
+    SearchIcon,
+    UsersIcon,
+    XIcon,
+} from "../components/icons";
 interface Event {
   _id: string;
   name: string;
@@ -48,16 +60,12 @@ function DashboardPage() {
     currentState: "Upcoming",
   });
 
+  const createEmptyGrid = (size: number) => Array.from({ length: size }, () => Array(size).fill(""));
   const [selectedIcebreaker, setSelectedIcebreaker] = useState<string | null>(null);
-  const [bingoGrid, setBingoGrid] = useState<string[][]>([
-    ["", "", "", "", ""],
-    ["", "", "", "", ""],
-    ["", "", "", "", ""],
-    ["", "", "", "", ""],
-    ["", "", "", "", ""],
-  ]);
-  const [bingoDescription, setBingoDescription] = useState("");
+  const GRID_SIZE = 3;
+  const [bingoGrid, setBingoGrid] = useState<string[][]>(createEmptyGrid(GRID_SIZE));  const [bingoDescription, setBingoDescription] = useState("");
   const [isSavingBingo, setIsSavingBingo] = useState(false);
+  const [bingoSaveMessage, setBingoSaveMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
 
   const navigate = useNavigate();
 
@@ -75,6 +83,14 @@ function DashboardPage() {
     }
   }, [events, selectedEvent]);
 
+  // Load bingo data whenever selected event changes (incl. auto-select)
+  useEffect(() => {
+    if (selectedEvent) {
+      loadBingoData(selectedEvent._id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedEvent?._id]);
+
   const fetchUserEvents = async (signal?: AbortSignal) => {
     try {
       setLoading(true);
@@ -137,47 +153,17 @@ function DashboardPage() {
 
   const loadBingoData = async (eventId: string) => {
     try {
-      const response = await fetch(`${import.meta.env.VITE_API_URL}/bingo/getBingo`, {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ id: eventId }),
-      });
-
-      if (response.ok) {
-        const data = await response.json();
-        if (data.success && data.bingo) {
-          setBingoGrid(data.bingo.grid || [
-            ["", "", "", "", ""],
-            ["", "", "", "", ""],
-            ["", "", "", "", ""],
-            ["", "", "", "", ""],
-            ["", "", "", "", ""],
-          ]);
-          setBingoDescription(data.bingo.description || "");
-        }
+      const bingo = await getBingo(eventId);
+      if (bingo) {
+        setBingoGrid(bingo.grid);
+        setBingoDescription(bingo.description ?? "");
       } else {
-        // No bingo exists yet, reset to empty
-        setBingoGrid([
-          ["", "", "", "", ""],
-          ["", "", "", "", ""],
-          ["", "", "", "", ""],
-          ["", "", "", "", ""],
-          ["", "", "", "", ""],
-        ]);
+        setBingoGrid(createEmptyGrid(GRID_SIZE));
         setBingoDescription("");
       }
     } catch (err) {
       console.error("Error loading bingo data:", err);
-      // Reset to empty on error
-      setBingoGrid([
-        ["", "", "", "", ""],
-        ["", "", "", "", ""],
-        ["", "", "", "", ""],
-        ["", "", "", "", ""],
-        ["", "", "", "", ""],
-      ]);
+      setBingoGrid(createEmptyGrid(GRID_SIZE));
       setBingoDescription("");
     }
   };
@@ -233,12 +219,12 @@ function DashboardPage() {
 
       await fetchUserEvents();
       setIsEditing(false);
-      
-      // Update selected event with new data
-      const updatedEvent = events.find(e => e._id === selectedEvent._id);
-      if (updatedEvent) {
-        setSelectedEvent(updatedEvent);
-      }
+
+      // reselect AFTER fetch (using fresh data)
+      setSelectedEvent(prev => {
+          if (!prev) return prev;
+          return events.find(e => e._id === prev._id) || prev;
+      });
     } catch (err: any) {
       console.error("Error updating event:", err);
       alert(err?.message || "Failed to update event. The backend may not support updates yet.");
@@ -246,7 +232,7 @@ function DashboardPage() {
   };
 
   const handleBingoGridChange = (row: number, col: number, value: string) => {
-    const newGrid = [...bingoGrid];
+    const newGrid = bingoGrid.map(r => [...r]);
     newGrid[row][col] = value;
     setBingoGrid(newGrid);
   };
@@ -254,6 +240,8 @@ function DashboardPage() {
   const handleSaveBingo = async () => {
     if (!selectedEvent) return;
 
+    setBingoSaveMessage(null);
+
     try {
       setIsSavingBingo(true);
       const token = localStorage.getItem("token");
@@ -261,7 +249,7 @@ function DashboardPage() {
       // Check if all grid cells are filled
       const hasEmptyCells = bingoGrid.some(row => row.some(cell => !cell.trim()));
       if (hasEmptyCells) {
-        alert("Please fill in all bingo grid cells before saving.");
+        setBingoSaveMessage({ type: "error", text: "Please fill in all bingo grid cells before saving." });
         setIsSavingBingo(false);
         return;
       }
@@ -303,14 +291,16 @@ function DashboardPage() {
 
       const data = await response.json();
       if (data.success) {
-        alert("Bingo game saved successfully!");
-        setSelectedIcebreaker(null);
+        setBingoSaveMessage({ type: "success", text: "Bingo game saved successfully!" });
+        setTimeout(() => {
+          setSelectedIcebreaker(null);
+          setBingoSaveMessage(null);
+        }, 1500);
       } else {
         throw new Error(data.message || "Failed to save bingo game");
       }
     } catch (err: any) {
-      console.error("Error saving bingo:", err);
-      alert(err?.message || "Failed to save bingo game");
+      setBingoSaveMessage({ type: "error", text: err?.message || "Failed to save bingo game" });
     } finally {
       setIsSavingBingo(false);
     }
@@ -318,6 +308,7 @@ function DashboardPage() {
 
   const handleCancelBingo = () => {
     setSelectedIcebreaker(null);
+    setBingoSaveMessage(null);
     // Reload bingo data to reset any unsaved changes
     if (selectedEvent) {
       loadBingoData(selectedEvent._id);
@@ -337,6 +328,7 @@ function DashboardPage() {
   const getStatusColor = (state: string) => {
     switch (state) {
       case "ongoing":
+      case "In Progress":
         return { bg: "rgba(34, 197, 94, 0.2)", text: "#4ade80", border: "rgba(34, 197, 94, 0.3)" };
       case "Upcoming":
         return { bg: "rgba(59, 130, 246, 0.2)", text: "#60a5fa", border: "rgba(59, 130, 246, 0.3)" };
@@ -383,9 +375,7 @@ function DashboardPage() {
         {!loading && events.length === 0 && (
           <div className="backdrop-blur-lg border border-white/20 rounded-2xl p-12 text-center" style={{ backgroundColor: "rgba(27, 37, 58, 0.5)" }}>
             <div className="mb-6">
-              <svg className="w-24 h-24 mx-auto text-white/20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-              </svg>
+              <CalendarIcon className="w-24 h-24 mx-auto text-white/20" strokeWidth={1.5} />
             </div>
             <h2 className="text-2xl font-heading font-semibold text-white mb-3">No Events Yet</h2>
             <p className="text-white/60 font-body mb-6">You haven't created any events. Start by creating your first event!</p>
@@ -415,9 +405,7 @@ function DashboardPage() {
                     className="p-2 rounded-lg hover:bg-white/10 transition-colors"
                     title="Create new event"
                   >
-                    <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
-                    </svg>
+                    <PlusIcon className="w-5 h-5 text-white" />
                   </button>
                 </div>
 
@@ -447,9 +435,7 @@ function DashboardPage() {
                           </span>
                         </div>
                         <div className="flex items-center gap-2 text-xs text-white/60 font-body">
-                          <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                          </svg>
+                          <CalendarIcon className="w-3 h-3" />
                           {formatDate(event.startDate)}
                         </div>
                       </button>
@@ -606,9 +592,7 @@ function DashboardPage() {
                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                         <div className="p-4 rounded-lg bg-white/5 border border-white/10">
                           <div className="flex items-center gap-2 text-white/60 mb-1">
-                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                            </svg>
+                            <CalendarIcon className="w-4 h-4" />
                             <span className="text-sm font-body">Start Date</span>
                           </div>
                           <p className="text-white font-body font-semibold">{formatDate(selectedEvent.startDate)}</p>
@@ -617,9 +601,7 @@ function DashboardPage() {
 
                         <div className="p-4 rounded-lg bg-white/5 border border-white/10">
                           <div className="flex items-center gap-2 text-white/60 mb-1">
-                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
-                            </svg>
+                            <CalendarIcon className="w-4 h-4" />
                             <span className="text-sm font-body">End Date</span>
                           </div>
                           <p className="text-white font-body font-semibold">{formatDate(selectedEvent.endDate)}</p>
@@ -628,9 +610,7 @@ function DashboardPage() {
 
                         <div className="p-4 rounded-lg bg-white/5 border border-white/10">
                           <div className="flex items-center gap-2 text-white/60 mb-1">
-                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                            </svg>
+                            <UsersIcon className="w-4 h-4" />
                             <span className="text-sm font-body">Participants</span>
                           </div>
                           <p className="text-white font-body font-semibold">
@@ -640,9 +620,7 @@ function DashboardPage() {
 
                         <div className="p-4 rounded-lg bg-white/5 border border-white/10">
                           <div className="flex items-center gap-2 text-white/60 mb-1">
-                            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
-                            </svg>
+                            <KeyIcon className="w-4 h-4" />
                             <span className="text-sm font-body">Join Code</span>
                           </div>
                           <p className="text-white font-mono font-semibold text-lg">{selectedEvent.joinCode}</p>
@@ -656,15 +634,17 @@ function DashboardPage() {
                         
                         {!selectedIcebreaker && (
                           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                            <button 
-                              onClick={() => setSelectedIcebreaker('bingo')}
+                            <button
+                              onClick={() => {
+                                setBingoSaveMessage(null);
+                                setSelectedIcebreaker('bingo');
+                                if (selectedEvent) loadBingoData(selectedEvent._id);
+                              }}
                               className="p-4 rounded-xl border-2 border-white/20 hover:border-[#4DC4FF] bg-white/5 hover:bg-white/10 transition-all duration-200 text-left group"
                             >
                               <div className="flex items-center gap-3 mb-2">
                                 <div className="w-10 h-10 rounded-lg bg-[#4DC4FF]/20 flex items-center justify-center group-hover:bg-[#4DC4FF]/30 transition-colors">
-                                  <svg className="w-6 h-6 text-[#4DC4FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
-                                  </svg>
+                                  <ClipboardIcon className="w-6 h-6 text-[#4DC4FF]" />
                                 </div>
                                 <h4 className="font-heading font-semibold text-white">Name Bingo</h4>
                               </div>
@@ -674,9 +654,7 @@ function DashboardPage() {
                             <button className="p-4 rounded-xl border-2 border-white/20 hover:border-[#4DC4FF] bg-white/5 hover:bg-white/10 transition-all duration-200 text-left group opacity-50 cursor-not-allowed">
                               <div className="flex items-center gap-3 mb-2">
                                 <div className="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center">
-                                  <svg className="w-6 h-6 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
-                                  </svg>
+                                  <SearchIcon className="w-6 h-6 text-white/60" />
                                 </div>
                                 <h4 className="font-heading font-semibold text-white/60">Scavenger Hunt</h4>
                               </div>
@@ -686,9 +664,7 @@ function DashboardPage() {
                             <button className="p-4 rounded-xl border-2 border-white/20 hover:border-[#4DC4FF] bg-white/5 hover:bg-white/10 transition-all duration-200 text-left group opacity-50 cursor-not-allowed">
                               <div className="flex items-center gap-3 mb-2">
                                 <div className="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center">
-                                  <svg className="w-6 h-6 text-white/60" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                  </svg>
+                                  <ClockIcon className="w-6 h-6 text-white/60" />
                                 </div>
                                 <h4 className="font-heading font-semibold text-white/60">Speed Networking</h4>
                               </div>
@@ -703,9 +679,7 @@ function DashboardPage() {
                             <div className="flex items-center justify-between mb-4">
                               <div className="flex items-center gap-3">
                                 <div className="w-10 h-10 rounded-lg bg-[#4DC4FF]/20 flex items-center justify-center">
-                                  <svg className="w-6 h-6 text-[#4DC4FF]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
-                                  </svg>
+                                  <ClipboardIcon className="w-6 h-6 text-[#4DC4FF]" />
                                 </div>
                                 <h4 className="text-xl font-heading font-semibold text-white">Edit Name Bingo</h4>
                               </div>
@@ -713,9 +687,7 @@ function DashboardPage() {
                                 onClick={handleCancelBingo}
                                 className="text-white/60 hover:text-white transition-colors"
                               >
-                                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                                </svg>
+                                <XIcon className="w-6 h-6" />
                               </button>
                             </div>
 
@@ -731,40 +703,19 @@ function DashboardPage() {
                             </div>
 
                             <div>
-                              <label className="block text-sm text-white font-body mb-3">
-                                Bingo Grid (5x5)
-                                <span className="text-white/60 text-xs ml-2">Fill in each box with a question or trait</span>
-                              </label>
-                              
-                              <div className="grid grid-cols-5 gap-2">
-                                {bingoGrid.map((row, rowIndex) =>
-                                  row.map((cell, colIndex) => (
-                                    <div key={`${rowIndex}-${colIndex}`} className="relative group">
-                                      <input
-                                        type="text"
-                                        value={cell}
-                                        onChange={(e) => handleBingoGridChange(rowIndex, colIndex, e.target.value)}
-                                        placeholder={`${rowIndex + 1}-${colIndex + 1}`}
-                                        className="w-full h-24 p-2 rounded-lg bg-white/5 border border-white/20 text-white text-xs placeholder-white/30 focus:outline-none focus:border-[#4DC4FF] focus:ring-2 focus:ring-[#4DC4FF]/20 transition-all font-body resize-none"
-                                        style={{ 
-                                          fontSize: '0.75rem',
-                                          lineHeight: '1.2',
-                                        }}
-                                      />
-                                      <div className="absolute -top-2 -left-2 w-5 h-5 rounded-full bg-[#4DC4FF]/80 text-white text-xs flex items-center justify-center font-bold opacity-0 group-hover:opacity-100 transition-opacity">
-                                        {rowIndex * 5 + colIndex + 1}
-                                      </div>
-                                    </div>
-                                  ))
-                                )}
-                              </div>
+                            <BingoTable
+                              grid={bingoGrid}
+                              onChange={(row, col, value) => {
+                                const newGrid = bingoGrid.map(r => [...r]);
+                                newGrid[row][col] = value;
+                                setBingoGrid(newGrid);
+                              }}
+                            />
                             </div>
 
                             <div className="bg-[#4DC4FF]/10 border border-[#4DC4FF]/30 rounded-lg p-4">
                               <div className="flex items-start gap-3">
-                                <svg className="w-5 h-5 text-[#4DC4FF] flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
-                                </svg>
+                                <InformationCircleIcon className="w-5 h-5 text-[#4DC4FF] flex-shrink-0 mt-0.5" />
                                 <div className="text-sm text-white/80 font-body">
                                   <p className="font-semibold mb-1">Tips for creating good bingo questions:</p>
                                   <ul className="space-y-1 text-white/70">
@@ -777,6 +728,26 @@ function DashboardPage() {
                               </div>
                             </div>
 
+                            {bingoSaveMessage && (
+                              <div
+                                className={`mb-4 px-4 py-3 rounded-lg font-body text-sm flex items-center justify-between ${
+                                  bingoSaveMessage.type === "success"
+                                    ? "bg-green-500/20 border border-green-500/40 text-green-400"
+                                    : "bg-red-500/20 border border-red-500/40 text-red-400"
+                                }`}
+                              >
+                                <span>{bingoSaveMessage.text}</span>
+                                <button
+                                  type="button"
+                                  onClick={() => setBingoSaveMessage(null)}
+                                  className="text-white/60 hover:text-white ml-2"
+                                  aria-label="Dismiss"
+                                >
+                                  <XIcon className="w-4 h-4" />
+                                </button>
+                              </div>
+                            )}
+
                             <div className="flex gap-3 pt-2">
                               <button
                                 onClick={handleSaveBingo}
diff --git a/shatter-web/src/pages/EventPage.tsx b/shatter-web/src/pages/EventPage.tsx
index b92072e..eae2499 100644
--- a/shatter-web/src/pages/EventPage.tsx
+++ b/shatter-web/src/pages/EventPage.tsx
@@ -5,6 +5,8 @@ import { useState, useEffect } from "react";
 import QRCard from "../components/QRCard";
 import Navbar from "../components/Navbar";
 import Footer from "../components/Footer";
+import EventSpotlight from "../components/EventSpotlight";
+import { CalendarIcon, ClipboardCopyIcon } from "../components/icons";
 
 export default function EventPage() {
   const { joinCode } = useParams<{ joinCode: string }>();
@@ -15,8 +17,11 @@ export default function EventPage() {
     participants: initialParticipants,
     loading,
     error,
+    refetch,
   } = useEventData(joinCode);
 
+  const [isUpdatingStatus, setIsUpdatingStatus] = useState(false);
+
   const { participants } = useEventParticipants(
     eventId,
     initialParticipants
@@ -111,6 +116,83 @@ export default function EventPage() {
   // TODO: In the future, we could encode a URL or more complex data here
   const qrPayload = joinCode || "";
 
+  function getUserIdFromToken(token: string): string | null {
+    try {
+      const parts = token.split(".");
+      if (parts.length < 2) return null;
+      const base64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
+      const padded = base64.padEnd(base64.length + ((4 - (base64.length % 4)) % 4), "=");
+      const payload = JSON.parse(atob(padded));
+      return payload.userId || payload.id || payload.sub || null;
+    } catch {
+      return null;
+    }
+  }
+
+  const token = typeof window !== "undefined" ? localStorage.getItem("token") : null;
+  const userId = token ? getUserIdFromToken(token) : null;
+  const createdBy = eventDetails?.createdBy;
+  const createdByStr =
+    typeof createdBy === "string"
+      ? createdBy
+      : createdBy != null
+      ? String(createdBy)
+      : "";
+  const isHost = !!userId && !!createdByStr && userId === createdByStr;
+
+  const canStart = eventDetails?.currentState === "Upcoming" || eventDetails?.currentState === "upcoming";
+  const canEnd =
+    eventDetails?.currentState === "In Progress" ||
+    eventDetails?.currentState === "ongoing";
+
+  const handleStartEvent = async () => {
+    if (!eventId || !token) return;
+    setIsUpdatingStatus(true);
+    try {
+      const res = await fetch(`${import.meta.env.VITE_API_URL}/events/${eventId}/status`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ status: "In Progress" }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || `Failed to start event (${res.status})`);
+      }
+      await refetch();
+    } catch (err: unknown) {
+      alert(err instanceof Error ? err.message : "Failed to start event");
+    } finally {
+      setIsUpdatingStatus(false);
+    }
+  };
+
+  const handleEndEvent = async () => {
+    if (!eventId || !token) return;
+    setIsUpdatingStatus(true);
+    try {
+      const res = await fetch(`${import.meta.env.VITE_API_URL}/events/${eventId}/status`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify({ status: "Completed" }),
+      });
+      if (!res.ok) {
+        const data = await res.json().catch(() => ({}));
+        throw new Error(data.error || `Failed to end event (${res.status})`);
+      }
+      await refetch();
+    } catch (err: unknown) {
+      alert(err instanceof Error ? err.message : "Failed to end event");
+    } finally {
+      setIsUpdatingStatus(false);
+    }
+  };
+
   // Main render
   return (
     <div
@@ -128,36 +210,82 @@ export default function EventPage() {
             {eventDetails.name}
           </h1>
           
-          {/* Event Status Badge */}
-          <div className="flex items-center gap-3 mb-6">
+          {/* Event Status Badge and Host Actions */}
+          <div className="flex flex-wrap items-center gap-3 mb-6">
             <span
               className="px-4 py-1.5 rounded-full text-sm font-body font-semibold"
               style={{
                 backgroundColor:
-                  eventDetails.currentState === "ongoing"
+                  eventDetails.currentState === "ongoing" ||
+                  eventDetails.currentState === "In Progress"
                     ? "rgba(34, 197, 94, 0.2)"
-                    : eventDetails.currentState === "Upcoming"
+                    : eventDetails.currentState === "Upcoming" ||
+                      eventDetails.currentState === "upcoming"
                     ? "rgba(59, 130, 246, 0.2)"
                     : "rgba(156, 163, 175, 0.2)",
                 color:
-                  eventDetails.currentState === "ongoing"
+                  eventDetails.currentState === "ongoing" ||
+                  eventDetails.currentState === "In Progress"
                     ? "#4ade80"
-                    : eventDetails.currentState === "Upcoming"
+                    : eventDetails.currentState === "Upcoming" ||
+                      eventDetails.currentState === "upcoming"
                     ? "#60a5fa"
                     : "#9ca3af",
               }}
             >
-              {eventDetails.currentState.charAt(0).toUpperCase() +
-                eventDetails.currentState.slice(1)}
+              {eventDetails.currentState === "In Progress"
+                ? "In Progress"
+                : eventDetails.currentState === "ongoing"
+                ? "In Progress"
+                : eventDetails.currentState.charAt(0).toUpperCase() +
+                  eventDetails.currentState.slice(1)}
             </span>
-            
+
             {/* Join Code Display */}
             <span className="text-white/60 font-body text-sm">
               Join Code: <span className="font-mono font-semibold text-white">{joinCode}</span>
             </span>
+
+            {/* Start / End Event Buttons (host only) */}
+            {isHost && (
+              <div className="flex gap-2 ml-auto">
+                <button
+                  onClick={handleStartEvent}
+                  disabled={!canStart || isUpdatingStatus}
+                  className="px-4 py-2 rounded-full text-sm font-body font-semibold transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                  style={{
+                    backgroundColor: canStart ? "#22c55e" : "rgba(34, 197, 94, 0.3)",
+                    color: "#fff",
+                  }}
+                >
+                  {isUpdatingStatus ? "Updating..." : "Start Event"}
+                </button>
+                <button
+                  onClick={handleEndEvent}
+                  disabled={!canEnd || isUpdatingStatus}
+                  className="px-4 py-2 rounded-full text-sm font-body font-semibold transition-all disabled:opacity-50 disabled:cursor-not-allowed"
+                  style={{
+                    backgroundColor: canEnd ? "#ef4444" : "rgba(239, 68, 68, 0.3)",
+                    color: "#fff",
+                  }}
+                >
+                  {isUpdatingStatus ? "Updating..." : "End Event"}
+                </button>
+              </div>
+            )}
           </div>
         </div>
 
+        {/* Live Activity Spotlight */}
+        <div className="mb-12">
+          <EventSpotlight
+            participants={participants}
+            eventId={eventId}
+            useDemoConnections={false}
+            useDemoActivity={true}
+          />
+        </div>
+
         {/* Main Content Grid */}
         <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 mb-12">
           {/* Left Column - Event Details */}
@@ -188,20 +316,7 @@ export default function EventPage() {
                 {/* Start Date */}
                 <div className="flex items-start gap-3">
                   <div className="mt-1">
-                    {/* Calendar Icon */}
-                    <svg
-                      className="w-5 h-5 text-[#4DC4FF]"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                      />
-                    </svg>
+                    <CalendarIcon className="w-5 h-5 text-[#4DC4FF]" />
                   </div>
                   <div>
                     <p className="font-body text-white/60 text-sm">Start</p>
@@ -217,20 +332,7 @@ export default function EventPage() {
                 {/* End Date */}
                 <div className="flex items-start gap-3">
                   <div className="mt-1">
-                    {/* Calendar Icon */}
-                    <svg
-                      className="w-5 h-5 text-[#4DC4FF]"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
-                      />
-                    </svg>
+                    <CalendarIcon className="w-5 h-5 text-[#4DC4FF]" />
                   </div>
                   <div>
                     <p className="font-body text-white/60 text-sm">End</p>
@@ -328,19 +430,7 @@ export default function EventPage() {
                   className="w-full px-4 py-2.5 rounded-full font-semibold text-white hover:opacity-90 transition-opacity shadow-lg font-body flex items-center justify-center gap-2"
                   style={{ backgroundColor: "#4DC4FF" }}
                 >
-                  <svg
-                    className="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
-                    />
-                  </svg>
+                  <ClipboardCopyIcon className="w-4 h-4" />
                   Copy Join Code
                 </button>
               </div>
@@ -364,16 +454,23 @@ export default function EventPage() {
               Bingo game associated with this event.
             </p>
 
-            <div className="grid grid-cols-5 gap-3 max-w-md">
+            <div
+              className="w-fit mx-auto gap-3 max-w-xs"
+              style={{
+                display: "grid",
+                gridTemplateColumns: `repeat(${bingoGame.grid.length}, minmax(0, 1fr))`,
+                aspectRatio: "1",
+              }}
+            >
               {bingoGame.grid.flat().map((cell, index) => (
                 <div
                   key={index}
                   className="aspect-square flex items-center justify-center
                              border border-white/20 rounded-lg
-                             font-body font-semibold text-sm text-white"
+                             font-body font-semibold text-sm text-white p-2"
                   style={{ backgroundColor: "rgba(27, 37, 58, 0.6)" }}
                 >
-                  {cell}
+                  <span className="truncate text-center">{cell}</span>
                 </div>
               ))}
             </div>
diff --git a/shatter-web/src/pages/LoginPage.tsx b/shatter-web/src/pages/LoginPage.tsx
index fefc6ec..7caf7ef 100644
--- a/shatter-web/src/pages/LoginPage.tsx
+++ b/shatter-web/src/pages/LoginPage.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { GoogleIcon } from '../components/icons';
 
 export default function LoginPage() {
   const navigate = useNavigate();
@@ -280,12 +281,7 @@ export default function LoginPage() {
             type="button"
             className="w-full py-3 rounded-lg border border-white/20 bg-white/5 text-white hover:bg-white/10 transition-colors font-body flex items-center justify-center gap-3"
           >
-            <svg className="w-5 h-5" viewBox="0 0 24 24">
-              <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
-              <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
-              <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
-              <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
-            </svg>
+            <GoogleIcon className="w-5 h-5" />
             Continue with Google
           </button>
         </div>
diff --git a/shatter-web/src/service/BingoGame.ts b/shatter-web/src/service/BingoGame.ts
index 63226c3..3191de8 100644
--- a/shatter-web/src/service/BingoGame.ts
+++ b/shatter-web/src/service/BingoGame.ts
@@ -1,7 +1,6 @@
 // services/BingoGame.ts
 
-const CREATE_BINGO_URL =
-  "https://techstart-shatter-backend.vercel.app/api/bingo/createBingo";
+const BASE_URL = import.meta.env.VITE_API_URL ?? "https://techstart-shatter-backend.vercel.app/api";
 
 export interface BingoGame {
   _id: string;
@@ -10,11 +9,18 @@ export interface BingoGame {
   grid: string[][];
 }
 
+export async function getBingo(eventId: string): Promise<BingoGame | null> {
+  const res = await fetch(`${BASE_URL}/bingo/getBingo/${eventId}`);
+  const data = await res.json();
+  if (!res.ok || !data?.bingo) return null;
+  return data.bingo;
+}
+
 export async function createBingoGame(
   eventId: string,
   token: string
 ): Promise<BingoGame> {
-  const res = await fetch(CREATE_BINGO_URL, {
+  const res = await fetch(`${BASE_URL}/bingo/createBingo`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -24,11 +30,9 @@ export async function createBingoGame(
       _eventId: eventId, // ✅ THIS IS REQUIRED
       description: "Name Bingo",
       grid: [
-        ["A1", "B1", "C1", "D1", "E1"],
-        ["A2", "B2", "C2", "D2", "E2"],
-        ["A3", "B3", "C3", "D3", "E3"],
-        ["A4", "B4", "C4", "D4", "E4"],
-        ["A5", "B5", "C5", "D5", "E5"],
+        ["A1", "B1", "C1"],
+        ["A2", "B2", "C2"],
+        ["A3", "B3", "C3"]
       ],
     }),
   });