diff --git a/.agent/rules/website.md b/.agent/rules/website.md
index cfbe3b5e..bb643232 100644
--- a/.agent/rules/website.md
+++ b/.agent/rules/website.md
@@ -23,44 +23,18 @@ This repository is a monorepo containing multiple services. Please follow these
 ### `api/` & `github-service/` (NestJS)
 
 - **Build:** `pnpm build` (Runs `nest build`)
-- **Lint:** `pnpm lint` (Runs `eslint`)
 - **Format:** `pnpm format` (Runs `prettier`)
 - **Run Dev:** `pnpm start:dev`
-- **Test:** `pnpm test` (Runs `jest`)
-- **Run Single Test:**
-
-  ```bash
-  # Run a specific test file
-  npx jest src/path/to/file.spec.ts
-
-  # Run a specific test case by name
-  pnpm test -- -t "should do something"
-  ```
 
 ### `frontend/` (Next.js)
 
 - **Build:** `pnpm build` (Runs `next build`)
 - **Dev:** `pnpm dev`
-- **Lint:** `pnpm lint`
-- **Run Single Test:** (Assuming standard Jest/Vitest setup if present, otherwise rely on linting/build)
-  ```bash
-  pnpm test -- path/to/file
-  ```
 
 ### `k8s-service/` (Go)
 
 - **Build:** `make build` (compiles to `bin/server`)
 - **Run:** `make run`
-- **Test:** `make test` (Runs `go test -v ./...`)
-- **Run Single Test:**
-
-  ```bash
-  # Run tests in a specific package
-  go test -v ./internal/package_name
-
-  # Run a specific test function
-  go test -v ./internal/package_name -run TestName
-  ```
 
 ## 2. Code Style & Conventions
 
diff --git a/frontend/app/events/[id]/bracket/BracketRankingTable.tsx b/frontend/app/events/[id]/bracket/BracketRankingTable.tsx
new file mode 100644
index 00000000..e58e463f
--- /dev/null
+++ b/frontend/app/events/[id]/bracket/BracketRankingTable.tsx
@@ -0,0 +1,219 @@
+"use client";
+
+import type { Team } from "@/app/actions/team";
+import type { Match } from "@/app/actions/tournament-model";
+import { Award, Medal, Trophy } from "lucide-react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { useMemo } from "react";
+import { MatchHistoryBadges } from "@/components/match/MatchHistoryBadges";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { cn } from "@/lib/utils";
+
+interface RankingTableProps {
+  teams: Team[];
+  matches: Match[];
+  eventId: string;
+  isEventAdmin?: boolean;
+}
+
+export default function BracketRankingTable({
+  teams,
+  matches,
+  eventId,
+  isEventAdmin,
+}: RankingTableProps) {
+  const router = useRouter();
+
+  const searchParams = useSearchParams();
+  const shouldReveal
+    = isEventAdmin && searchParams.get("adminReveal") === "true";
+
+  const revealedMatches = useMemo(
+    () => matches.filter(m => m.isRevealed || shouldReveal),
+    [matches, shouldReveal],
+  );
+  const maxRound = useMemo(
+    () => Math.max(...matches.map(m => m.round), 1),
+    [matches],
+  );
+
+  const teamStatsMap = useMemo(() => {
+    const map = new Map<
+      string,
+      {
+        highestRound: number;
+        actualRank: number;
+        history: { id: string; result: string }[];
+        hasMatches: boolean;
+      }
+    >();
+    for (const team of teams) {
+      const teamId = team.id;
+      const teamMatches = revealedMatches.filter(m =>
+        m.teams.some(t => t.id === teamId),
+      );
+
+      const highestRound = Math.max(...teamMatches.map(m => m.round), 0);
+      const lastMatch = teamMatches.find(m => m.round === highestRound);
+
+      const isWinner = lastMatch?.winner?.id === teamId;
+      const hasWinner = !!lastMatch?.winner;
+
+      let actualRank = 0;
+      if (highestRound === maxRound && highestRound > 0) {
+        if (lastMatch?.isPlacementMatch) {
+          actualRank = isWinner ? 3 : hasWinner ? 4 : 3;
+        }
+        else {
+          actualRank = isWinner ? 1 : hasWinner ? 2 : 1;
+        }
+      }
+      else {
+        const effectiveRound = isWinner ? highestRound + 1 : highestRound;
+        actualRank = 2 ** (maxRound - effectiveRound) + 1;
+      }
+
+      const history = teamMatches
+        .filter(m => m.state === "FINISHED")
+        .sort((a, b) => a.round - b.round)
+        .map(m => ({
+          id: m.id!,
+          result: m.winner ? (m.winner.id === teamId ? "W" : "L") : "T",
+        }));
+
+      map.set(teamId, {
+        highestRound,
+        actualRank,
+        history,
+        hasMatches: teamMatches.length > 0,
+      });
+    }
+    return map;
+  }, [revealedMatches, maxRound, teams]);
+
+  const getTeamStats = (teamId: string) => teamStatsMap.get(teamId)!;
+
+  const swissRankMap = new Map(
+    [...teams]
+      .sort((a, b) =>
+        b.score !== a.score
+          ? b.score - a.score
+          : b.buchholzPoints - a.buchholzPoints,
+      )
+      .map((t, i) => [t.id, i + 1]),
+  );
+
+  const sortedTeams = teams
+    .map(team => ({
+      ...team,
+      swissRank: swissRankMap.get(team.id),
+      ...getTeamStats(team.id),
+    }))
+    .filter(team => team.hasMatches)
+    .sort((a, b) => {
+      if (a.actualRank !== b.actualRank)
+        return a.actualRank - b.actualRank;
+      if (b.score !== a.score)
+        return b.score - a.score;
+      return b.buchholzPoints - a.buchholzPoints;
+    });
+
+  return (
+    <div className="w-full">
+      <div className="overflow-hidden rounded-xl border bg-card/50 shadow-sm">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px] text-center">Standing</TableHead>
+              <TableHead className="w-[100px] text-center">
+                Swiss Rank
+              </TableHead>
+              <TableHead className="pl-8">Name</TableHead>
+              <TableHead className="pr-7 text-right">Match History</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {sortedTeams.length === 0
+              ? (
+                  <TableRow>
+                    <TableCell
+                      colSpan={4}
+                      className="h-24 text-center text-muted-foreground"
+                    >
+                      Matches will appear here once the bracket starts.
+                    </TableCell>
+                  </TableRow>
+                )
+              : (
+                  sortedTeams.map((team) => {
+                    const rank = team.actualRank;
+                    const isWinner = rank === 1;
+                    const isFinalist = rank === 2;
+                    const isSemi = rank === 3;
+
+                    return (
+                      <TableRow
+                        key={team.id}
+                        className={cn(
+                          "group cursor-pointer transition-all hover:bg-muted/40",
+                          isWinner
+                          && "bg-yellow-500/5 hover:bg-yellow-500/10 border-l-4 border-l-yellow-500",
+                          isFinalist
+                          && "bg-slate-500/5 hover:bg-slate-500/10 border-l-4 border-l-slate-400",
+                          isSemi && "border-l-4 border-l-amber-700/50",
+                          !isWinner
+                          && !isFinalist
+                          && !isSemi
+                          && "border-l-4 border-l-transparent border-b border-border/40",
+                        )}
+                        onClick={() =>
+                          router.push(`/events/${eventId}/teams/${team.id}`)}
+                      >
+                        <TableCell className="text-center">
+                          <div className="flex justify-center">
+                            {isWinner
+                              ? (
+                                  <Trophy className="h-6 w-6 text-yellow-500" />
+                                )
+                              : isFinalist
+                                ? (
+                                    <Medal className="h-6 w-6 text-slate-400" />
+                                  )
+                                : isSemi
+                                  ? (
+                                      <Award className="h-6 w-6 text-amber-700" />
+                                    )
+                                  : (
+                                      <span className="font-mono font-bold">{rank}</span>
+                                    )}
+                          </div>
+                        </TableCell>
+                        <TableCell className="text-center text-muted-foreground">
+                          {team.swissRank}
+                        </TableCell>
+                        <TableCell className="pl-8">{team.name}</TableCell>
+                        <TableCell className="pr-6 text-right">
+                          <div className="flex justify-end gap-1">
+                            <MatchHistoryBadges
+                              history={team.history}
+                              eventId={eventId}
+                            />
+                          </div>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })
+                )}
+          </TableBody>
+        </Table>
+      </div>
+    </div>
+  );
+}
diff --git a/frontend/app/events/[id]/bracket/BracketTabs.tsx b/frontend/app/events/[id]/bracket/BracketTabs.tsx
new file mode 100644
index 00000000..768d8650
--- /dev/null
+++ b/frontend/app/events/[id]/bracket/BracketTabs.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import type { Team } from "@/app/actions/team";
+import type { Match } from "@/app/actions/tournament-model";
+import { BarChart3, Network } from "lucide-react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useTabParam } from "@/hooks/useTabParam";
+import BracketRankingTable from "./BracketRankingTable";
+import GraphView from "./graphView";
+
+interface BracketTabsProps {
+  eventId: string;
+  matches: Match[];
+  teams: Team[];
+  isEventAdmin: boolean;
+  teamCount: number;
+}
+
+export default function BracketTabs({
+  eventId,
+  matches,
+  teams,
+  isEventAdmin,
+  teamCount,
+}: BracketTabsProps) {
+  const { currentTab, onTabChange } = useTabParam("graph");
+
+  return (
+    <Tabs value={currentTab} onValueChange={onTabChange} className="w-full">
+      <div className="mb-4 flex items-center justify-between">
+        <TabsList className="border bg-muted/50 p-1">
+          <TabsTrigger value="graph" className="gap-2 px-4">
+            <Network className="h-4 w-4" />
+            Graph
+          </TabsTrigger>
+          <TabsTrigger value="ranking" className="gap-2 px-4">
+            <BarChart3 className="h-4 w-4" />
+            Ranking
+          </TabsTrigger>
+        </TabsList>
+      </div>
+
+      <TabsContent value="graph" className="mt-0">
+        <div className="relative h-[60vh] min-h-[400px] overflow-hidden rounded-xl border bg-card/50 text-card-foreground shadow-sm md:h-[75vh] md:min-h-[600px] md:rounded-2xl">
+          <GraphView
+            matches={matches}
+            teamCount={teamCount}
+            isEventAdmin={isEventAdmin}
+          />
+        </div>
+      </TabsContent>
+
+      <TabsContent value="ranking" className="mt-0">
+        <BracketRankingTable
+          teams={teams}
+          matches={matches}
+          eventId={eventId}
+          isEventAdmin={isEventAdmin}
+        />
+      </TabsContent>
+    </Tabs>
+  );
+}
diff --git a/frontend/app/events/[id]/bracket/graphView.tsx b/frontend/app/events/[id]/bracket/graphView.tsx
index 3d91da3a..54a69533 100644
--- a/frontend/app/events/[id]/bracket/graphView.tsx
+++ b/frontend/app/events/[id]/bracket/graphView.tsx
@@ -139,6 +139,7 @@ export default function GraphView({
               height: MATCH_HEIGHT,
               showTargetHandle: roundIndex > 0,
               showSourceHandle: roundIndex < lastRoundIndex,
+              hideScore: true,
               onClick: (clickedMatch: Match) => {
                 if (
                   (match.state === MatchState.FINISHED || isEventAdmin)
@@ -173,6 +174,7 @@ export default function GraphView({
               height: MATCH_HEIGHT,
               showTargetHandle: false,
               showSourceHandle: false,
+              hideScore: true,
               onClick: (clickedMatch: Match) => {
                 if (
                   (placementMatch.state === MatchState.FINISHED
@@ -244,12 +246,7 @@ export default function GraphView({
         panOnDrag={true}
         proOptions={{ hideAttribution: true }}
       >
-        <Background
-          color="currentColor"
-          className="opacity-10"
-          gap={20}
-          variant={undefined}
-        />
+        <Background color="currentColor" className="opacity-10" gap={20} />
       </ReactFlow>
     </div>
   );
diff --git a/frontend/app/events/[id]/bracket/page.tsx b/frontend/app/events/[id]/bracket/page.tsx
index 72225661..54792aad 100644
--- a/frontend/app/events/[id]/bracket/page.tsx
+++ b/frontend/app/events/[id]/bracket/page.tsx
@@ -1,12 +1,12 @@
-import type { Match } from "@/app/actions/tournament-model";
 import { isActionError } from "@/app/actions/errors";
 import { isEventAdmin } from "@/app/actions/event";
+import { getTeamsForEventTable } from "@/app/actions/team";
 import {
   getTournamentMatches,
   getTournamentTeamCount,
 } from "@/app/actions/tournament";
 import Actions from "@/app/events/[id]/bracket/actions";
-import GraphView from "@/app/events/[id]/bracket/graphView";
+import BracketTabs from "@/app/events/[id]/bracket/BracketTabs";
 
 export const metadata = {
   title: "Tournament Bracket",
@@ -26,14 +26,14 @@ export default async function page({
     throw new Error("Failed to verify admin status");
   }
   const isAdminView = (await searchParams).adminReveal === "true";
-  const serializedMatches: Match[] = await getTournamentMatches(
-    eventId,
-    isAdminView,
-  );
-  const teamCount = await getTournamentTeamCount(eventId);
+  const [serializedMatches, teamCount, teams] = await Promise.all([
+    getTournamentMatches(eventId, isAdminView),
+    getTournamentTeamCount(eventId),
+    getTeamsForEventTable(eventId, undefined, "score", "desc", isAdminView),
+  ]);
 
   return (
-    <div className="flex flex-col gap-4 md:gap-8">
+    <div className="flex flex-col gap-4 pb-8 md:gap-8">
       <div className="flex flex-col justify-between gap-4 md:flex-row md:items-end">
         <div className="space-y-1.5 md:space-y-2">
           <h1 className="text-3xl font-bold tracking-tight md:text-4xl">
@@ -51,13 +51,13 @@ export default async function page({
         )}
       </div>
 
-      <div className="relative h-[60vh] min-h-[400px] overflow-hidden rounded-xl border bg-card/50 text-card-foreground shadow-sm md:h-[75vh] md:min-h-[600px] md:rounded-2xl">
-        <GraphView
-          matches={serializedMatches}
-          teamCount={teamCount}
-          isEventAdmin={eventAdmin}
-        />
-      </div>
+      <BracketTabs
+        eventId={eventId}
+        matches={serializedMatches}
+        teams={teams}
+        isEventAdmin={eventAdmin}
+        teamCount={teamCount}
+      />
     </div>
   );
 }
diff --git a/frontend/app/events/[id]/dashboard/dashboard.tsx b/frontend/app/events/[id]/dashboard/dashboard.tsx
index 6f4d3db8..8c81177c 100644
--- a/frontend/app/events/[id]/dashboard/dashboard.tsx
+++ b/frontend/app/events/[id]/dashboard/dashboard.tsx
@@ -17,8 +17,7 @@ import {
 
 import { useSession } from "next-auth/react";
 import Image from "next/image";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { toast } from "sonner";
 import { isActionError } from "@/app/actions/errors";
 import {
@@ -68,6 +67,7 @@ import {
 } from "@/components/ui/table";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Textarea } from "@/components/ui/textarea";
+import { useTabParam } from "@/hooks/useTabParam";
 import { cn } from "@/lib/utils";
 import { StarterTemplatesManagement } from "./components/StarterTemplatesManagement";
 
@@ -78,16 +78,7 @@ interface DashboardPageProps {
 export function DashboardPage({ eventId }: DashboardPageProps) {
   const session = useSession();
   const queryClient = useQueryClient();
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-  const currentTab = searchParams.get("tab") || "overview";
-
-  const handleTabChange = (value: string) => {
-    const params = new URLSearchParams(searchParams.toString());
-    params.set("tab", value);
-    router.push(`${pathname}?${params.toString()}`, { scroll: false });
-  };
+  const { currentTab, onTabChange: handleTabChange } = useTabParam("overview");
 
   const [teamAutoLockTime, setTeamAutoLockTime] = useState<string>("");
   const [userSearchQuery, setUserSearchQuery] = useState("");
diff --git a/frontend/app/events/[id]/groups/GroupPhaseTabs.tsx b/frontend/app/events/[id]/groups/GroupPhaseTabs.tsx
index 74494d98..6ff1fa77 100644
--- a/frontend/app/events/[id]/groups/GroupPhaseTabs.tsx
+++ b/frontend/app/events/[id]/groups/GroupPhaseTabs.tsx
@@ -3,8 +3,8 @@
 import type { Team } from "@/app/actions/team";
 import type { Match } from "@/app/actions/tournament-model";
 import { BarChart3, Network } from "lucide-react";
-import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useTabParam } from "@/hooks/useTabParam";
 import GraphView from "./graphView";
 import RankingTable from "./RankingTable";
 
@@ -23,17 +23,7 @@ export default function GroupPhaseTabs({
   isEventAdmin,
   advancementCount,
 }: GroupPhaseTabsProps) {
-  const router = useRouter();
-  const pathname = usePathname();
-  const searchParams = useSearchParams();
-
-  const currentTab = searchParams.get("tab") || "graph";
-
-  const onTabChange = (value: string) => {
-    const params = new URLSearchParams(searchParams.toString());
-    params.set("tab", value);
-    router.push(`${pathname}?${params.toString()}`, { scroll: false });
-  };
+  const { currentTab, onTabChange } = useTabParam("graph");
 
   return (
     <Tabs value={currentTab} onValueChange={onTabChange} className="w-full">
@@ -57,7 +47,7 @@ export default function GroupPhaseTabs({
       </TabsContent>
 
       <TabsContent value="ranking" className="mt-0">
-        <div className="overflow-hidden rounded-xl border bg-card/50 p-1 text-card-foreground shadow-sm md:rounded-2xl md:p-4">
+        <div className="overflow-hidden rounded-xl border bg-card/50 px-2 py-1 text-card-foreground shadow-sm md:rounded-2xl">
           <RankingTable
             teams={teams}
             matches={matches}
diff --git a/frontend/app/events/[id]/groups/RankingTable.tsx b/frontend/app/events/[id]/groups/RankingTable.tsx
index a58e5ed7..049e1665 100644
--- a/frontend/app/events/[id]/groups/RankingTable.tsx
+++ b/frontend/app/events/[id]/groups/RankingTable.tsx
@@ -2,8 +2,9 @@
 
 import type { Team } from "@/app/actions/team";
 import type { Match } from "@/app/actions/tournament-model";
-import Link from "next/link";
+import { useRouter } from "next/navigation";
 import { Fragment } from "react";
+import { MatchHistoryBadges } from "@/components/match/MatchHistoryBadges";
 import { Badge } from "@/components/ui/badge";
 import {
   Table,
@@ -13,7 +14,6 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { cn } from "@/lib/utils";
 
 interface RankingTableProps {
   teams: Team[];
@@ -28,6 +28,8 @@ export default function RankingTable({
   eventId,
   advancementCount,
 }: RankingTableProps) {
+  const router = useRouter();
+
   // Sort teams by score (desc), then buchholzPoints (desc)
   const sortedTeams = [...teams].sort((a, b) => {
     if (b.score !== a.score)
@@ -43,8 +45,11 @@ export default function RankingTable({
       .sort((a, b) => a.round - b.round)
       .map((m) => {
         if (!m.winner)
-          return "T"; // Tie (not really possible in currently implemented swiss but good for safety)
-        return m.winner.id === teamId ? "W" : "L";
+          return { id: m.id!, result: "T" };
+        return {
+          id: m.id!,
+          result: m.winner.id === teamId ? "W" : "L",
+        };
       });
   };
 
@@ -52,7 +57,7 @@ export default function RankingTable({
     <div className="w-full">
       <Table>
         <TableHeader>
-          <TableRow className="border-b border-border/50 hover:bg-transparent">
+          <TableRow>
             <TableHead className="w-[80px]">Rank</TableHead>
             <TableHead>Participant</TableHead>
             <TableHead className="text-center">Score</TableHead>
@@ -69,24 +74,17 @@ export default function RankingTable({
 
             return (
               <Fragment key={team.id}>
-                <TableRow className="group border-b border-border/40 transition-colors hover:bg-muted/30">
-                  <TableCell className="font-medium text-muted-foreground">
-                    {rank}
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-3">
-                      <Link
-                        href={`/events/${eventId}/teams/${team.id}`}
-                        className="max-w-[200px] truncate font-semibold transition-colors hover:text-primary"
-                      >
-                        {team.name}
-                      </Link>
-                    </div>
-                  </TableCell>
+                <TableRow
+                  className="cursor-pointer hover:bg-muted/50"
+                  onClick={() =>
+                    router.push(`/events/${eventId}/teams/${team.id}`)}
+                >
+                  <TableCell>{rank}</TableCell>
+                  <TableCell>{team.name}</TableCell>
                   <TableCell className="text-center font-bold">
                     {(team.score ?? 0).toFixed(1)}
                   </TableCell>
-                  <TableCell className="text-center text-muted-foreground">
+                  <TableCell className="text-center">
                     {(team.buchholzPoints ?? 0).toFixed(1)}
                   </TableCell>
                   <TableCell className="text-center">
@@ -96,33 +94,13 @@ export default function RankingTable({
                   </TableCell>
                   <TableCell className="text-right">
                     <div className="flex justify-end gap-1">
-                      {history.map((result, i) => (
-                        <div
-                          key={i}
-                          className={cn(
-                            "w-6 h-6 rounded flex items-center justify-center text-[11px] font-bold shadow-sm",
-                            result === "W" && "bg-emerald-500 text-white",
-                            result === "L" && "bg-destructive text-white",
-                            result === "T" && "bg-muted-foreground text-white",
-                          )}
-                        >
-                          {result}
-                        </div>
-                      ))}
-                      {history.length === 0 && (
-                        <span className="text-xs text-muted-foreground">
-                          No matches
-                        </span>
-                      )}
+                      <MatchHistoryBadges history={history} eventId={eventId} />
                     </div>
                   </TableCell>
                 </TableRow>
                 {isAtCutoff && index < sortedTeams.length - 1 && (
-                  <TableRow className="hover:bg-transparent">
-                    <TableCell
-                      colSpan={6}
-                      className="h-10 p-0 text-center align-middle"
-                    >
+                  <TableRow>
+                    <TableCell colSpan={6} className="text-center align-middle">
                       <div className="flex h-full w-full items-center gap-4 px-4">
                         <div className="h-px flex-1 bg-emerald-500/50" />
                         <span className="text-[10px] font-bold tracking-widest text-emerald-500/80 uppercase">
diff --git a/frontend/app/events/[id]/teams/TeamsTable.tsx b/frontend/app/events/[id]/teams/TeamsTable.tsx
index 1756510a..2bba8eec 100644
--- a/frontend/app/events/[id]/teams/TeamsTable.tsx
+++ b/frontend/app/events/[id]/teams/TeamsTable.tsx
@@ -114,7 +114,7 @@ export default function TeamsTable({ teams, eventId }: TeamsTableProps) {
               table.getRowModel().rows.map(row => (
                 <TableRow
                   key={row.id}
-                  className="cursor-pointer transition-colors hover:bg-muted/50"
+                  className="cursor-pointer hover:bg-muted/50"
                   onClick={() =>
                     router.push(`/events/${eventId}/teams/${row.original.id}`)}
                 >
diff --git a/frontend/components/match/MatchHistoryBadges.tsx b/frontend/components/match/MatchHistoryBadges.tsx
new file mode 100644
index 00000000..6b9e8ec5
--- /dev/null
+++ b/frontend/components/match/MatchHistoryBadges.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { cn } from "@/lib/utils";
+
+interface MatchResult {
+  id: string;
+  result: "W" | "L" | "T" | string;
+}
+
+interface MatchHistoryBadgesProps {
+  history: MatchResult[];
+  eventId: string;
+}
+
+export function MatchHistoryBadges({
+  history,
+  eventId,
+}: MatchHistoryBadgesProps) {
+  const router = useRouter();
+
+  if (history.length === 0) {
+    return <span className="text-xs text-muted-foreground">No matches</span>;
+  }
+
+  return (
+    <>
+      {history.map((match, i) => (
+        <div
+          key={i}
+          onClick={(e) => {
+            e.stopPropagation();
+            router.push(`/events/${eventId}/match/${match.id}`);
+          }}
+          className={cn(
+            "w-6 h-6 rounded flex items-center justify-center text-[11px] shadow-sm cursor-pointer hover:opacity-80 transition-opacity",
+            match.result === "W" && "bg-emerald-500 text-white",
+            match.result === "L" && "bg-destructive text-white",
+            match.result === "T" && "bg-muted-foreground text-white",
+          )}
+        >
+          {match.result}
+        </div>
+      ))}
+    </>
+  );
+}
diff --git a/frontend/components/match/MatchNode.tsx b/frontend/components/match/MatchNode.tsx
index 97f5531b..4085db8d 100644
--- a/frontend/components/match/MatchNode.tsx
+++ b/frontend/components/match/MatchNode.tsx
@@ -14,6 +14,7 @@ interface MatchNodeData {
   onClick?: (match: Match) => void;
   showTargetHandle?: boolean;
   showSourceHandle?: boolean;
+  hideScore?: boolean;
 }
 
 interface MatchNodeProps {
@@ -70,6 +71,7 @@ function MatchNode({ data }: MatchNodeProps) {
     onClick,
     showTargetHandle = false,
     showSourceHandle = false,
+    hideScore = false,
   } = data;
   const styles = getMatchStateStyles(match.state);
   const icon = getMatchStateIcon(match.state);
@@ -178,7 +180,8 @@ function MatchNode({ data }: MatchNodeProps) {
                           <span className="ml-1 text-green-600">👑</span>
                         )}
                       </div>
-                      {match.state === MatchState.FINISHED
+                      {!hideScore
+                        && match.state === MatchState.FINISHED
                         && team.score !== undefined && (
                         <span className="ml-2 text-xs">
                           {(match.results || []).find(
diff --git a/frontend/hooks/useTabParam.ts b/frontend/hooks/useTabParam.ts
new file mode 100644
index 00000000..229a4784
--- /dev/null
+++ b/frontend/hooks/useTabParam.ts
@@ -0,0 +1,17 @@
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+
+export function useTabParam(defaultTab: string = "graph") {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
+  const currentTab = searchParams.get("tab") || defaultTab;
+
+  const onTabChange = (value: string) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set("tab", value);
+    router.push(`${pathname}?${params.toString()}`, { scroll: false });
+  };
+
+  return { currentTab, onTabChange };
+}