diff --git a/dashboard/src/lib/components/Card.svelte b/dashboard/src/lib/components/Card.svelte
index dfb0e54..8023ab5 100644
--- a/dashboard/src/lib/components/Card.svelte
+++ b/dashboard/src/lib/components/Card.svelte
@@ -11,14 +11,21 @@
 
 	$: back = side === "corp" ? BACK_CORPORATION : BACK_RUNNER;
 
-	$: url = code ? `https://card-images.netrunnerdb.com/v1/large/{code}.jpg`.replace("{code}", code) : false;
+	$: url = code
+		? `https://card-images.netrunnerdb.com/v1/large/{code}.jpg`.replace(
+				"{code}",
+				code,
+			)
+		: false;
 </script>
 
 <div
 	class="aspect-[64/89] [transform-style:preserve-3d] flex transition-transform [transform:var(--transform)] {glow
 		? 'card--glow'
 		: ''} {$$props['class']}"
-	style="transform: {flip ? 'rotateY(-180deg)' : 'rotateY(0deg)' }; transition-duration: 480ms; transition-delay: var(--transition-delay, 0ms);"
+	style="transform: {flip
+		? 'rotateY(-180deg)'
+		: 'rotateY(0deg)'}; transition-duration: 480ms; transition-delay: var(--transition-delay, 0ms);"
 >
 	<div
 		class="face {glow
diff --git a/dashboard/src/lib/components/dashboard/Connection.svelte b/dashboard/src/lib/components/dashboard/Connection.svelte
index b81014f..0f8b5bb 100644
--- a/dashboard/src/lib/components/dashboard/Connection.svelte
+++ b/dashboard/src/lib/components/dashboard/Connection.svelte
@@ -2,17 +2,26 @@
 	import { PUBLIC_WEBSOCKET_CONNECTION } from "$env/static/public";
 	import { globalData } from "$lib/store";
 	import Loading from "$components/Loading.svelte";
+	import { Button } from "$lib/components/ui/button";
+	import { Check } from "lucide-svelte";
 
 	$: connection = $globalData.websocket.status;
 </script>
 
 {#if PUBLIC_WEBSOCKET_CONNECTION.toLowerCase() === "true"}
-	<p class="flex flex-row gap-2 items-center">
+	<Button
+		variant="outline"
+		class="flex flex-row gap-2 items-center {connection
+			? 'bg-green-500/10 border-green-500 hover:bg-transparent cursor-default'
+			: 'bg-red-500/10 border-red-500'}"
+		disabled={!connection}
+	>
 		{#if connection}
-			Connected to websocket
+			<Check slot="icon-before" size={16} class="mt-0.5" />
+			WebSocket Connected
 		{:else}
-			<Loading size={1.5} />
-			Connecting to websocket
+			<Loading slot="icon-before" size={0.75} />
+			Connecting
 		{/if}
-	</p>
+	</Button>
 {/if}
diff --git a/dashboard/src/lib/components/dashboard/Counter.svelte b/dashboard/src/lib/components/dashboard/Counter.svelte
index 5d759d5..b8a50fa 100644
--- a/dashboard/src/lib/components/dashboard/Counter.svelte
+++ b/dashboard/src/lib/components/dashboard/Counter.svelte
@@ -3,7 +3,6 @@
 	import { createEventDispatcher } from "svelte";
 	import { Button } from "$lib/components/ui/button";
 	import { Input } from "$lib/components/ui/input";
-	import { Label } from "$lib/components/ui/label";
 
 	const dispatch = createEventDispatcher();
 
diff --git a/dashboard/src/lib/components/dashboard/Country.svelte b/dashboard/src/lib/components/dashboard/Country.svelte
index 44e7116..c737385 100644
--- a/dashboard/src/lib/components/dashboard/Country.svelte
+++ b/dashboard/src/lib/components/dashboard/Country.svelte
@@ -13,9 +13,10 @@
 	let open = false;
 	let value = "";
 
-	$: selected =
-		JSON_COUNTRIES.find((f: any) => f.alpha2 === value) ??
-		"Select a country";
+	$: selected = JSON_COUNTRIES.find((f: any) => f.alpha2 === value) ?? {
+		name: "Select a country",
+		alpha2: "",
+	};
 
 	// We want to refocus the trigger button when the user selects
 	// an item from the list so users can continue navigating the
diff --git a/dashboard/src/lib/components/dashboard/GlobalSettings.svelte b/dashboard/src/lib/components/dashboard/GlobalSettings.svelte
index 4da69e8..fe446e3 100644
--- a/dashboard/src/lib/components/dashboard/GlobalSettings.svelte
+++ b/dashboard/src/lib/components/dashboard/GlobalSettings.svelte
@@ -2,15 +2,11 @@
 	import { createEventDispatcher } from "svelte";
 	import Card from "$components/dashboard/ui/Card.svelte";
 	import { globalData, deploy } from "$lib/store";
-	import Heading from "$components/dashboard/ui/Heading.svelte";
 	import * as Dialog from "$lib/components/ui/dialog";
 
 	// Icons
-	import ICON_CLICKS from "$lib/assets/icons/NSG_CLICK.svg";
-	import ICON_CREDITS from "$lib/assets/icons/NSG_CREDIT.svg";
-	import ICON_AGENDAS from "$lib/assets/icons/NSG_AGENDA.svg";
 	import { Settings } from "lucide-svelte";
-	import { Button, buttonVariants } from "$lib/components/ui/button";
+	import { buttonVariants } from "$lib/components/ui/button";
 	import Column from "./ui/Column.svelte";
 	import { Label } from "$lib/components/ui/label";
 	import { Switch } from "$lib/components/ui/switch";
@@ -19,15 +15,14 @@
 	import type { GlobalData as TGlobalData } from "$lib/types";
 	import { Slider } from "$lib/components/ui/slider";
 	import { Input } from "$lib/components/ui/input";
-	import * as Select from "$lib/components/ui/select";
 
 	let global: TGlobalData = $globalData;
 	let deployType: boolean = $deploy.type !== "automatic";
 
 	const icons: Record<string, string> = {
-		clicks: ICON_CLICKS,
-		credits: ICON_CREDITS,
-		agendas: ICON_AGENDAS,
+		clicks: "/NSG_CLICK.svg",
+		credits: "/NSG_CREDIT.svg",
+		agendas: "/NSG_AGENDA.svg",
 	};
 
 	const dispatch = createEventDispatcher();
@@ -43,32 +38,39 @@
 			<Dialog.Title>{$t("global_settings")}</Dialog.Title>
 		</Dialog.Header>
 		<div>
-			<Card title="Deploy method" outline={false} uid="display">
-				<Column columns={3}>
-					<Column span="1/-1">
-						<CardNew.Root>
-							<CardNew.Header>Deployment type</CardNew.Header>
-							<CardNew.Content class="switch-group">
-								<Switch
-									id="deploy-type"
-									bind:checked={deployType}
-									on:click={(event) => {
-										$deploy.type = deployType
-											? "automatic"
-											: "manual";
-										$deploy.proceed =
-											$deploy.type === "automatic";
-									}}
-								/>
-								<Label for="deploy-type">
-									{$deploy.type === "manual"
-										? "Manual"
-										: "Automatic (instant)"}
-								</Label>
-							</CardNew.Content>
-						</CardNew.Root>
-					</Column>
+			<Card outline={false} uid="display">
+				<Column>
+					<CardNew.Root>
+						<CardNew.Header>Deployment type</CardNew.Header>
+						<CardNew.Content class="switch-group">
+							<Switch
+								id="deploy-type"
+								bind:checked={deployType}
+								on:click={(event) => {
+									$deploy.type = deployType
+										? "automatic"
+										: "manual";
+									$deploy.proceed =
+										$deploy.type === "automatic";
+								}}
+							/>
+							<Label for="deploy-type">
+								{$deploy.type === "manual"
+									? "Manual"
+									: "Automatic (instant)"}
+							</Label>
+						</CardNew.Content>
+					</CardNew.Root>
+				</Column>
+			</Card>
+		</div>
 
+		<Dialog.Header>
+			<Dialog.Title>{$t("global_settings")}</Dialog.Title>
+		</Dialog.Header>
+		<div>
+			<Card>
+				<Column columns={3}>
 					<!-- <Column span="1/-1">
 						<CardNew.Root>
 							<CardNew.Header
@@ -146,7 +148,7 @@
 						</CardNew.Header>
 					</CardNew.Root>
 
-					<CardNew.Root>
+					<CardNew.Root class="col-[auto/span_2]">
 						<CardNew.Header class="switch-group justify-between">
 							<Label for="commentators">Commentators</Label>
 						</CardNew.Header>
@@ -188,7 +190,6 @@
 							</Select.Root>
 						</CardNew.Content>
 					</CardNew.Root> -->
-					
 				</Column>
 			</Card>
 		</div>
diff --git a/dashboard/src/lib/components/dashboard/Header.svelte b/dashboard/src/lib/components/dashboard/Header.svelte
index 62f8071..4cb41b5 100644
--- a/dashboard/src/lib/components/dashboard/Header.svelte
+++ b/dashboard/src/lib/components/dashboard/Header.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from "svelte";
 	import Preview from "$components/dashboard/Preview.svelte";
 	import ResetState from "$components/dashboard/ResetState.svelte";
 	import FlipPlayers from "$components/dashboard/FlipPlayers.svelte";
@@ -24,6 +23,7 @@
 	import { Button } from "$lib/components/ui/button";
 
 	export let update: Function;
+	export let deploy_data: Function;
 
 	let global: TGlobalData = $globalData;
 	let timer: TTimerData = $timerData;
@@ -153,30 +153,32 @@
 	</Actions>
 	<Actions>
 		<Connection />
-
 		{#if $deploy.type === "manual"}
 			<Button
 				variant="default"
+				disabled={!$deploy.proceed}
 				on:click={() => {
-					$deploy.proceed = true;
 					update({
 						type: "global",
-						data: global,
+						data: $globalData,
 					});
 					update({
 						type: "timer",
-						data: timer,
+						data: $timerData,
 					});
 					update({
 						type: "playerOne",
-						data: playerOneData,
+						data: $playerOneData,
 					});
 					update({
 						type: "playerTwo",
-						data: playerTwoData,
+						data: $playerTwoData,
 					});
-				}}>Deploy</Button
+					deploy_data();
+				}}
 			>
+				{$deploy.proceed ? "Deploy" : "Waiting for changes"}
+			</Button>
 		{/if}
 	</Actions>
 </header>
diff --git a/dashboard/src/lib/components/dashboard/Player.svelte b/dashboard/src/lib/components/dashboard/Player.svelte
index b8ff11f..b19775c 100644
--- a/dashboard/src/lib/components/dashboard/Player.svelte
+++ b/dashboard/src/lib/components/dashboard/Player.svelte
@@ -8,9 +8,6 @@
 	} from "$lib/types";
 	import { globalData, playerOneData, playerTwoData } from "$lib/store";
 	import Search from "$components/dashboard/Search.svelte";
-	import ICON_CLICKS from "$lib/assets/icons/NSG_CLICK.svg";
-	import ICON_CREDITS from "$lib/assets/icons/NSG_CREDIT.svg";
-	import ICON_AGENDAS from "$lib/assets/icons/NSG_AGENDA.svg";
 	import Counter from "./Counter.svelte";
 	import { find_faction_by_id } from "$lib/utils";
 	import SearchIdentity from "$components/dashboard/SearchIdentity.svelte";
@@ -46,14 +43,6 @@
 	const togglePlayerID = (active: TGameSide) => {
 		let opposite: TGameSide = active === "corp" ? "runner" : "corp";
 
-		// console.log('================================================', {
-		// 	currentPlayer: name,
-		// 	selected: {
-		// 		active: active,
-		// 		inactive: opposite,
-		// 	},
-		// })
-
 		dispatch("swap_deck", {
 			currentPlayer: name,
 			selected: {
@@ -75,17 +64,17 @@
 		{
 			name: "Clicks",
 			type: "clicks",
-			icon: ICON_CLICKS,
+			icon: "/NSG_CLICK.svg",
 		},
 		{
 			name: "Credits",
 			type: "credits",
-			icon: ICON_CREDITS,
+			icon: "/NSG_CREDIT.svg",
 		},
 		{
 			name: "Agendas",
 			type: "agendas",
-			icon: ICON_AGENDAS,
+			icon: "/NSG_AGENDA.svg",
 		},
 	];
 </script>
@@ -142,7 +131,7 @@
 			<Card.Content class="grid gap-2">
 				<!-- svelte-ignore a11y-label-has-associated-control -->
 				<label data-uid="side-corp" class="grid gap-1">
-					<span>{$t("corporation")} ID</span>
+					<span>{$t("corporation")} {$t("identity")}</span>
 					<div
 						class="id-selection grid grid-cols-[auto,1fr] gap-2 items-center"
 					>
@@ -158,7 +147,6 @@
 							}}
 						/>
 						<SearchIdentity
-							player={name}
 							side="corp"
 							on:change={(e) => {
 								playerCurrent.decks.corp.id = e.detail;
@@ -169,7 +157,7 @@
 				</label>
 				<!-- svelte-ignore a11y-label-has-associated-control -->
 				<label data-uid="side-runner" class="grid gap-1">
-					<span>{$t("runner")} ID</span>
+					<span>{$t("runner")} {$t("identity")}</span>
 					<div
 						class="id-selection grid grid-cols-[auto,1fr] gap-2 items-center"
 					>
@@ -185,7 +173,6 @@
 							}}
 						/>
 						<SearchIdentity
-							player={name}
 							side="runner"
 							on:change={(e) => {
 								playerCurrent.decks.runner.id = e.detail;
@@ -211,6 +198,7 @@
 					type="text"
 					bind:value={playerCurrent.player.name}
 					on:input={deploy}
+					maxlength={30}
 				/>
 
 				<Label data-uid="pronouns" class="side__item" for="pronouns"
@@ -222,6 +210,7 @@
 					bind:value={playerCurrent.player.pronoun}
 					on:input={deploy}
 					placeholder="they/them"
+					maxlength={20}
 				/>
 
 				<!-- Wins -->
@@ -236,7 +225,7 @@
 								? "primary"
 								: "outline"}
 							align="center"
-							{value}
+							value={value.toString()}
 							name="wins_{name}"
 							on:click={(event) => {
 								playerCurrent.player.wins = value;
@@ -294,14 +283,27 @@
 						<div slot="action" class="switch-group">
 							<Switch
 								id="{name}-display-card"
-								bind:checked={playerCurrent.highlight[type].active}
+								bind:checked={playerCurrent.highlight[type]
+									.active}
 								on:click={(event) => {
-									playerCurrent.highlight[type].active = !playerCurrent.highlight[type].active;
-									console.log(playerCurrent.highlight[type].active);
+									playerCurrent.highlight[type].active =
+										!playerCurrent.highlight[type].active;
+
+									if (
+										type === "primary" &&
+										!playerCurrent.highlight[type].active
+									) {
+										playerCurrent.highlight.secondary.active = false;
+									}
+
 									deploy();
 								}}
+								disabled={type === "secondary" &&
+									!playerCurrent.highlight?.primary.active}
 							/>
-							<Label for="{name}-display-card">{$t("display")}</Label>
+							<Label for="{name}-display-card"
+								>{$t("display")}</Label
+							>
 						</div>
 					</Card.Title>
 				</Card.Header>
@@ -309,7 +311,7 @@
 					<Search
 						{name}
 						side={playerCurrent.side}
-						type={type}
+						{type}
 						on:card={(e) => {
 							playerCurrent.highlight[type].current = e.detail;
 							deploy();
@@ -318,6 +320,5 @@
 				</Card.Content>
 			</Card.Root>
 		{/each}
-
 	</Card.Content>
 </Card.Root>
diff --git a/dashboard/src/lib/components/dashboard/Preview.svelte b/dashboard/src/lib/components/dashboard/Preview.svelte
index 5aa4052..65fd8c6 100644
--- a/dashboard/src/lib/components/dashboard/Preview.svelte
+++ b/dashboard/src/lib/components/dashboard/Preview.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Eye } from "lucide-svelte";
-	import { Button, buttonVariants } from "$lib/components/ui/button";
+	import { buttonVariants } from "$lib/components/ui/button";
 	import * as Dialog from "$lib/components/ui/dialog";
 
 	export let title: string;
diff --git a/dashboard/src/lib/components/dashboard/SaveConfig.svelte b/dashboard/src/lib/components/dashboard/SaveConfig.svelte
index 8bb1dfd..a6666f1 100644
--- a/dashboard/src/lib/components/dashboard/SaveConfig.svelte
+++ b/dashboard/src/lib/components/dashboard/SaveConfig.svelte
@@ -7,7 +7,6 @@
 	import { Label } from "$lib/components/ui/label";
 	import * as Alert from "$lib/components/ui/alert";
 	import * as Card from "$lib/components/ui/card";
-	import Header from "./Header.svelte";
 
 	const dispatch = createEventDispatcher();
 
diff --git a/dashboard/src/lib/components/dashboard/Search.svelte b/dashboard/src/lib/components/dashboard/Search.svelte
index cba6b6f..fc9ec5c 100644
--- a/dashboard/src/lib/components/dashboard/Search.svelte
+++ b/dashboard/src/lib/components/dashboard/Search.svelte
@@ -2,15 +2,12 @@
 	import { createEventDispatcher } from "svelte";
 	import { netrunnerDB, playerOneData, playerTwoData } from "$lib/store";
 	import type {
-		Card as TCard,
-		PlayerAttributes as TPlayerAttributes,
 		GameSide as TGameSide,
 		PlayerSide as TPlayerSide,
 	} from "$lib/types";
 	import Card from "../Card.svelte";
 	import Fuse from "fuse.js";
 	import { Input } from "$lib/components/ui/input";
-	import { Label } from "$lib/components/ui/label";
 
 	const dispatch = createEventDispatcher();
 
@@ -31,17 +28,24 @@
 	let selected: string[] = [];
 
 	const filter = () => {
-		results = new Fuse($netrunnerDB.data.filter((i: any) => true), {
-			keys: ["attributes.title", "attributes.stripped_title"]
-		})
-		.search(searchText)
-		.slice(0, 8);
-	}
+		results = new Fuse(
+			$netrunnerDB.data.filter((i: boolean) => true),
+			{
+				keys: ["attributes.title", "attributes.stripped_title"],
+			},
+		)
+			.search(searchText)
+			.slice(0, 8);
+	};
 </script>
 
 <section class="grid grid-cols-[1fr,3fr] gap-6">
 	<div>
-		<Card code={player.highlight[type].current} glow={false} class="sticky top-16" />
+		<Card
+			code={player.highlight[type].current}
+			glow={false}
+			class="sticky top-16"
+		/>
 	</div>
 	<div class="grid gap-4">
 		<Input
@@ -59,15 +63,18 @@
 					)
 						? 'result--active'
 						: ''}"
-					on:click={() => dispatch("card", card.attributes.latest_printing_id)}
+					on:click={() =>
+						dispatch("card", card.attributes.latest_printing_id)}
 				>
 					<Card
 						code={card.attributes.latest_printing_id}
 						glow={false}
 					/>
-					<p class="text-left line-clamp-2">{card.attributes.stripped_title}</p>
+					<p class="text-left line-clamp-2">
+						{card.attributes.stripped_title}
+					</p>
 				</button>
 			{/each}
 		</div>
 	</div>
-</section>
\ No newline at end of file
+</section>
diff --git a/dashboard/src/lib/components/dashboard/SearchIdentity.svelte b/dashboard/src/lib/components/dashboard/SearchIdentity.svelte
index 6b971e9..45649af 100644
--- a/dashboard/src/lib/components/dashboard/SearchIdentity.svelte
+++ b/dashboard/src/lib/components/dashboard/SearchIdentity.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import { Check, ChevronsUpDown } from "lucide-svelte";
+	import { ChevronsUpDown } from "lucide-svelte";
 	import * as Command from "$lib/components/ui/command";
 	import * as Popover from "$lib/components/ui/popover";
 	import { Button } from "$lib/components/ui/button";
@@ -10,7 +10,6 @@
 	import { find_faction_by_id, slugify } from "$lib/utils";
 	import { t } from "$lib/translations";
 
-	export let player: TPlayerSide;
 	export let side: TGameSide;
 
 	const dispatch = createEventDispatcher();
diff --git a/dashboard/src/lib/components/dashboard/Timer.svelte b/dashboard/src/lib/components/dashboard/Timer.svelte
index 55aefd8..dd4c6e3 100644
--- a/dashboard/src/lib/components/dashboard/Timer.svelte
+++ b/dashboard/src/lib/components/dashboard/Timer.svelte
@@ -5,6 +5,7 @@
 	import { Timer } from "lucide-svelte";
 	import { Button, buttonVariants } from "$lib/components/ui/button";
 	import * as Dialog from "$lib/components/ui/dialog";
+	import { Input } from "$lib/components/ui/input";
 
 	let timer: TTimerData = $timerData;
 
@@ -14,7 +15,6 @@
 	const dispatch = createEventDispatcher();
 
 	const deploy = () => {
-		// console.log(timer);
 		dispatch("timer", timer);
 	};
 
@@ -42,41 +42,11 @@
 		<Dialog.Header>
 			<Dialog.Title>Timer</Dialog.Title>
 		</Dialog.Header>
-		<div>
-			<h2>Timer</h2>
-			<label>
-				<span>Timer (minutes)</span>
-				<input type="number" bind:value={timer.count} />
-			</label>
-
-			{#if timer.action === "set"}
-				<svg id="animated" viewBox="0 0 100 100">
-					<circle cx="50" cy="50" r="45" fill="#FDB900"></circle>
-					<path
-						bind:this={svgCounter}
-						id="progress"
-						stroke-linecap="round"
-						stroke-width="5"
-						stroke="#fff"
-						fill="none"
-						d="M50 10
-           a 40 40 0 0 1 0 80
-           a 40 40 0 0 1 0 -80"
-					>
-					</path>
-					<text
-						id="count"
-						x="50"
-						y="50"
-						text-anchor="middle"
-						dy="7"
-						font-size="20"
-						bind:this={svgText}
-					></text>
-					<desc>Created with Snap</desc><defs></defs></svg
-				>
-			{/if}
-
+		<label>
+			<span>Timer (minutes)</span>
+			<Input bind:value={timer.count} type="number" />
+		</label>
+		<Dialog.Footer>
 			<Button
 				on:click={() => {
 					timer.action = "set";
@@ -94,6 +64,6 @@
 				style="background: #242424; border: #242424; color: #fff;"
 				>Clear timer</Button
 			>
-		</div>
+		</Dialog.Footer>
 	</Dialog.Content>
 </Dialog.Root>
diff --git a/dashboard/src/lib/components/dashboard/_SearchIdentity.svelte b/dashboard/src/lib/components/dashboard/_SearchIdentity.svelte
deleted file mode 100644
index adf396f..0000000
--- a/dashboard/src/lib/components/dashboard/_SearchIdentity.svelte
+++ /dev/null
@@ -1,84 +0,0 @@
-<script lang="ts">
-	import { createEventDispatcher } from "svelte";
-	import { netrunnerDB } from "$lib/store";
-	import type {
-		PlayerSide as TPlayerSide,
-		GameSide as TGameSide,
-		Card as TCard,
-	} from "$lib/types";
-	import Card from "../Card.svelte";
-	import Fuse from "fuse.js";
-	import { find_faction_by_id } from "$lib/utils";
-
-	const dispatch = createEventDispatcher();
-
-	export let player: TPlayerSide;
-	export let side: TGameSide;
-
-	let idListActive: boolean = false;
-	let previous_side = side;
-
-	// If user swaps side, empty results array
-	$: if (previous_side !== side) {
-		results = [];
-	}
-
-	let searchText: string = "";
-	let results: any = [];
-	let selected: any;
-
-	function filterItems() {
-		idListActive = true;
-
-		results = new Fuse(
-			$netrunnerDB.data.filter(
-				(card: TCard) =>
-					card.attributes.side_id === side &&
-					card.attributes.card_type_id === `${side}_identity`,
-			),
-			{
-				// Filter by title and stripped_title
-				keys: ["attributes.title", "attributes.stripped_title"],
-			},
-		)
-			.search(searchText)
-			.slice(0, 8);
-	}
-</script>
-
-<section class="search">
-	<div class="search__wrapper">
-		<input
-			type="text"
-			bind:value={searchText}
-			placeholder="Search..."
-			on:input={filterItems}
-		/>
-
-		<div class="id {idListActive ? 'id--active' : ''}">
-			{#each results as { item: card }}
-				<div class="id__item">
-					<input
-						type="radio"
-						name="id_{player}_{side}"
-						bind:group={selected}
-						on:change={() => {
-							dispatch("change", selected);
-						}}
-						value={card.attributes.stripped_title}
-					/>
-					<div class="id__item__count">
-						<!-- svelte-ignore a11y-missing-attribute -->
-						<img
-							class="id__item__logo"
-							src={find_faction_by_id(
-								card.attributes.stripped_title,
-							)?.logo}
-						/>
-						{card.attributes.stripped_title}
-					</div>
-				</div>
-			{/each}
-		</div>
-	</div>
-</section>
diff --git a/dashboard/src/lib/components/dashboard/ui/Heading.svelte b/dashboard/src/lib/components/dashboard/ui/Heading.svelte
index 6f31763..b6f9758 100644
--- a/dashboard/src/lib/components/dashboard/ui/Heading.svelte
+++ b/dashboard/src/lib/components/dashboard/ui/Heading.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	export let title: string = "";
-	export let level: 2 | 3 | 4 | 5 | 6 = 2;
+	export let level: 1 | 2 | 3 | 4 | 5 | 6 = 2;
 	export let icon: string | null = null;
 </script>
 
diff --git a/dashboard/src/lib/components/overlay/CardHighlight.svelte b/dashboard/src/lib/components/overlay/CardHighlight.svelte
index 5460042..2785b2c 100644
--- a/dashboard/src/lib/components/overlay/CardHighlight.svelte
+++ b/dashboard/src/lib/components/overlay/CardHighlight.svelte
@@ -1,50 +1,82 @@
 <script lang="ts">
 	import Card from "../Card.svelte";
-	import type { Highlight as THighlight, PlayerSide as TPlayerSide, GameSide as TGameSide } from "$lib/types";
+	import type {
+		Highlight as THighlight,
+		PlayerSide as TPlayerSide,
+		GameSide as TGameSide,
+	} from "$lib/types";
 
 	export let player: TPlayerSide;
 	export let data: {
-		[key in 'primary' | 'secondary']: THighlight;
+		[key in "primary" | "secondary"]: THighlight;
 	};
 	export let side: TGameSide;
 	export let width: number = 12;
 
-	$: align = player === "playerOne" ? 'left' : 'right';
+	$: align = player === "playerOne" ? "left" : "right";
 
 	let classes = {
 		wrapper: {
-			left: `left-0 ml-[var(--padding)] justify-start`,
-			right: `right-0 mr-[var(--padding)] justify-end`
+			base: "aspect-video flex flex-row items-center relative bottom-0 h-full items-center",
+			left: `left-0 justify-start`,
+			right: `right-0 justify-end`,
 		},
 		card: {
 			primary: {
 				shared: {
-					default: 'w-[var(--width)] z-10 bottom-0',
-					inactive: '50vw'
+					default: "z-10 h-[90%]",
+					inactive: "50vw",
 				},
-				left: 'left-0 origin-bottom-left -rotate-2',
-				right: 'right-0 origin-bottom-right rotate-2'
+				left: "left-[2.5%] origin-bottom-left",
+				right: "right-[2.5%] origin-bottom-right",
 			},
 			secondary: {
 				shared: {
-					default: 'w-[calc(var(--width)-2rem)] bottom-8',
-					inactive: '-50vw'
+					default: "h-[80%] -mt-4",
+					inactive: "-50vw",
 				},
-				left: 'left-[calc(var(--width)-4rem)] origin-bottom-left rotate-3',
-				right: 'right-[calc(var(--width)-4rem)] origin-bottom-right -rotate-3'
+				left: "left-[35%] origin-bottom-left",
+				right: "right-[35%] origin-bottom-right",
 			},
-		}
-	}
+		},
+	};
 </script>
 
-<div class="flex flex-col mb-[calc((var(--padding)*2)+100px)] relative bottom-0 {classes.wrapper[align]}" style="--width: {width}vw">
-	{#each ['primary', 'secondary'] as type}
-		<div 
-			id="{player}-card-{type}" 
-			class="absolute {classes.card[type].shared.default} {classes.card[type][align]}"
-			style="transform: translateX({data[type].active ? '0' : (player === "playerOne" ? '-300' : '300')}%); transition: transform 200ms ease-in-out 260ms; --transition-delay: {data[type].active ? '480ms' : '0ms'}"
+<div class="{classes.wrapper.base} {$$props.class ?? ''}">
+	{#each ["primary", "secondary"] as type}
+		<div
+			id="{player}-card-{type}"
+			class="h-full absolute flex flex-row translate-x-[var(--translate-x)] rotate-[var(--rotate)] {classes
+				.wrapper[align]} {classes.card[type].shared.default} {classes
+				.card[type][align]}"
+			style="--translate-x: {data[type].active
+				? '0'
+				: player === 'playerOne'
+					? '-300'
+					: '300'}%; transition: transform 200ms ease-in-out 260ms; --transition-delay: {data[
+				type
+			].active
+				? '480ms'
+				: '0ms'};
+				--rotate: {type === 'primary'
+				? data[type].active
+					? player === 'playerOne'
+						? '-2'
+						: '2'
+					: '0'
+				: data[type].active
+					? player === 'playerOne'
+						? '2'
+						: '-2'
+					: '0'}deg
+			"
 		>
-			<Card code={data[type].current} flip={!data[type].active} {side} />
+			<Card
+				code={data[type].current}
+				flip={!data[type].active}
+				{side}
+				class="h-full"
+			/>
 		</div>
 	{/each}
 </div>
diff --git a/dashboard/src/lib/components/overlay/MetaSide.svelte b/dashboard/src/lib/components/overlay/MetaSide.svelte
index 8c62a11..a89062c 100644
--- a/dashboard/src/lib/components/overlay/MetaSide.svelte
+++ b/dashboard/src/lib/components/overlay/MetaSide.svelte
@@ -4,9 +4,6 @@
 		PlayerSide as TPlayerSide,
 		ThemeClasses as TThemeClasses,
 	} from "$lib/types";
-	import ICON_CLICK from "$lib/assets/icons/NSG_CLICK.svg";
-	import ICON_CREDIT from "$lib/assets/icons/NSG_CREDIT.svg";
-	import ICON_AGENDA from "$lib/assets/icons/NSG_AGENDA.svg";
 	import Wins from "./Wins.svelte";
 	import Counter from "./Counter.svelte";
 	import { find_faction_by_id, get_flag_by_iso_code } from "$lib/utils";
@@ -28,7 +25,8 @@
 </script>
 
 <section
-	class="{theme.meta.wrapper} flex flex-row items-center justify-start max-w-[50vw] w-[var(--width)] h-[100px] mb-[var(--padding)] outline-offset-[5px] text-[#fff] [text-shadow:2px_2px_black] bottom-[0] absolute grid-cols-[auto_1fr_auto] {align ===
+	class="{theme.meta
+		.wrapper} flex flex-row items-center justify-start w-full max-h-[100px] h-full outline-offset-[5px] text-[#fff] [text-shadow:2px_2px_black] grid-cols-[auto_1fr_auto] {align ===
 	'left'
 		? left
 		: right}"
@@ -96,7 +94,7 @@
 		{#if global?.clicks}
 			<div class="item">
 				<!-- svelte-ignore a11y-missing-attribute -->
-				<img class="icon" src={ICON_CLICK} />
+				<img class="icon" src="/NSG_CLICK.svg" />
 				<Counter count={data.clicks.amount} {align} />
 			</div>
 		{/if}
@@ -104,7 +102,7 @@
 		{#if global?.credits}
 			<div class="item">
 				<!-- svelte-ignore a11y-missing-attribute -->
-				<img class="icon" src={ICON_CREDIT} />
+				<img class="icon" src="/NSG_CREDIT.svg" />
 				<Counter count={data.credits.amount} {align} />
 			</div>
 		{/if}
@@ -112,7 +110,7 @@
 		{#if global?.agendas}
 			<div class="item {theme.meta.agendas}">
 				<!-- svelte-ignore a11y-missing-attribute -->
-				<img class="icon" src={ICON_AGENDA} />
+				<img class="icon" src="/NSG_AGENDA.svg" />
 				<Counter count={data.agendas.amount} {align} />
 			</div>
 		{/if}
diff --git a/dashboard/src/lib/components/overlay/Wrapper.svelte b/dashboard/src/lib/components/overlay/Wrapper.svelte
index 1ffbc2e..2827a0e 100644
--- a/dashboard/src/lib/components/overlay/Wrapper.svelte
+++ b/dashboard/src/lib/components/overlay/Wrapper.svelte
@@ -1,3 +1,6 @@
-<main class="grid grid-cols-2 grid-rows-[1fr_auto] w-screen h-screen overflow-hidden relative" style="--padding: 2.5vw;">
-    <slot />
-</main>
\ No newline at end of file
+<main
+	class="w-screen h-screen overflow-hidden relative {$$props.class ?? ''}"
+	style="--padding: 2.5vw"
+>
+	<slot />
+</main>
diff --git a/dashboard/src/lib/components/ui/button/button.svelte b/dashboard/src/lib/components/ui/button/button.svelte
index 6b677e8..4248826 100644
--- a/dashboard/src/lib/components/ui/button/button.svelte
+++ b/dashboard/src/lib/components/ui/button/button.svelte
@@ -16,10 +16,7 @@
 
 <ButtonPrimitive.Root
 	{builders}
-	class={cn(
-		buttonVariants({ variant, size, className }),
-		"grid grid-cols-[1fr,auto]",
-	)}
+	class={cn(buttonVariants({ variant, size, className }))}
 	type="button"
 	{...$$restProps}
 	on:click
diff --git a/dashboard/src/lib/data/api.json b/dashboard/src/lib/data/api.json
index 23cc178..f0f7d26 100644
--- a/dashboard/src/lib/data/api.json
+++ b/dashboard/src/lib/data/api.json
@@ -1,6 +1,6 @@
 {
-	"endpoint": "https://api-preview.netrunnerdb.com/api/v3/public",
+	"endpoint": "https://api.netrunnerdb.com/api/v3/public",
 	"cards": "/cards?page[limit]=2000",
 	"factions": "/factions",
 	"identities": "/cards?filter[card_type_id]=corp_identity&runner_identity&page[limit]=1000"
-}
+}
\ No newline at end of file
diff --git a/dashboard/src/lib/store.ts b/dashboard/src/lib/store.ts
index 1184466..7b7058b 100644
--- a/dashboard/src/lib/store.ts
+++ b/dashboard/src/lib/store.ts
@@ -4,6 +4,7 @@ import type {
 	PlayerData,
 	TimerData,
 	PlayerAttributes,
+	Card
 } from "./types";
 
 // JSON
@@ -15,7 +16,18 @@ import DefaultTimer from "$lib/data/default/timer.json";
 export const websocketToken = writable<string>();
 
 // API data
-export const netrunnerDB = writable<Map<string, any>>(new Map());
+export const netrunnerDB = writable<{
+	data: Card[];
+	links: {
+		first: string;
+		last?: string;
+	};
+}>({
+	data: [],
+	links: {
+		first: ""
+	}
+});
 
 // Websocket data
 export const globalData = writable<GlobalData>(DefaultGlobal);
diff --git a/dashboard/src/lib/utils.ts b/dashboard/src/lib/utils.ts
index 8d3bda1..a6d3fea 100644
--- a/dashboard/src/lib/utils.ts
+++ b/dashboard/src/lib/utils.ts
@@ -144,9 +144,7 @@ export const fetch_cards = async () => {
 	try {
 		const response = await fetch(api.endpoint + api.cards);
 
-		netrunnerDB.subscribe((value) => {
-			// console.log(value);
-		});
+		netrunnerDB.subscribe((value) => { });
 
 		if (!response.ok) {
 			throw new Error("Network response was not ok");
diff --git a/dashboard/src/routes/+layout.svelte b/dashboard/src/routes/+layout.svelte
index 0eb926b..45b64ee 100644
--- a/dashboard/src/routes/+layout.svelte
+++ b/dashboard/src/routes/+layout.svelte
@@ -15,12 +15,13 @@
 	import { page } from "$app/stores";
 	import { fetch_cards } from "$lib/utils";
 	import { t } from "$lib/translations";
+	import JSON_FACTIONS from "$lib/data/factions.json";
 
 	let socket: WebSocket;
 	let storage_keys: string[] = ["global", "playerOne", "playerTwo", "timer"];
 
 	onMount(async () => {
-		console.info("✔️ Window loaded");
+		console.info(`%c Loaded %cWindow`, "background: gray");
 
 		if (!localStorage.getItem("language")) {
 			localStorage.setItem(
@@ -45,18 +46,20 @@
 		// Persistant storage
 		storage_keys.forEach((type) => {
 			if (
-				JSON.parse(localStorage.getItem(type)) !== null &&
+				localStorage.getItem(type) !== "undefined" &&
+				localStorage.getItem(type) !== null &&
 				Object.keys(JSON.parse(localStorage.getItem(type))).length === 0
-			)
+			) {
 				return;
+			}
 
 			const store = JSON.parse(localStorage.getItem(type));
 
 			if (store && typeof store === "object") {
-				// console.info(
-				// 	`✔️ Loaded %c${type}%cdata from localStorage`,
-				// 	"background: blue",
-				// );
+				console.info(
+					`%c Loaded %c${type} data from localStorage`,
+					"background: gray",
+				);
 
 				// Update svelte store with cached (localStorage) data
 				if (store) {
@@ -89,7 +92,8 @@
 
 			socket.addEventListener("message", (event) => {
 				console.log(
-					"recieving websocket connection...",
+					"%c WEBSOCKET %c Message recieved",
+					"background: blue",
 					JSON.parse(event.data),
 				);
 
@@ -98,16 +102,12 @@
 				delete data["_type"];
 
 				if (type === "playerOne") {
-					// localStorage.setItem("playerOne", JSON.stringify(data));
 					$playerOneData = data;
 				} else if (type === "playerTwo") {
-					// localStorage.setItem("playerTwo", JSON.stringify(data));
 					$playerTwoData = data;
 				} else if (type === "timer") {
-					// localStorage.setItem("timer", JSON.stringify(data));
 					$timerData = data;
 				} else if (type === "global") {
-					// localStorage.setItem("global", JSON.stringify(data));
 					$globalData = data;
 				}
 			});
@@ -155,6 +155,12 @@
 <svelte:head>
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<link rel="preconnect" href="https://static.nrdbassets.com/" />
+	{#each JSON_FACTIONS as faction}
+		<link rel="preload" href={faction.logo} as="image" />
+	{/each}
+	<link rel="preload" href="/NSG_CLICK.svg" as="image" />
+	<link rel="preload" href="/NSG_CREDIT.svg" as="image" />
+	<link rel="preload" href="/NSG_AGENDA.svg" as="image" />
 </svelte:head>
 
 {#await fetch_cards()}
diff --git a/dashboard/src/routes/dashboard/+page.svelte b/dashboard/src/routes/dashboard/+page.svelte
index 336c1e0..27e307b 100644
--- a/dashboard/src/routes/dashboard/+page.svelte
+++ b/dashboard/src/routes/dashboard/+page.svelte
@@ -21,14 +21,6 @@
 	import Header from "$components/dashboard/Header.svelte";
 
 	let socket: WebSocket;
-	let global: TGlobalData = $globalData;
-
-	let players: {
-		[key in "one" | "two"]: TPlayerSide;
-	} = {
-		one: "playerOne",
-		two: "playerTwo",
-	};
 
 	let websocket = PUBLIC_WEBSOCKET_CONNECTION.toLowerCase() === "true";
 
@@ -94,61 +86,77 @@
 		// Store data locally
 		localStorage.setItem(`hold_${type}`, JSON.stringify(data));
 
-		// Return early if proceed is not true, it will always be true for automatic, and only true for manual when the deploy button is clicked
-		if ($deploy.proceed !== true) return;
-
-		// Deploy data (taken from held localStorage data)
-		deploy_data();
+		if ($deploy.type === "manual") {
+			$deploy.proceed = true;
+		} else {
+			deploy_data();
+		}
 	};
 
 	const deploy_data = () => {
-		// console.clear();
-
-		["global", "playerOne", "playerTwo", "timer"].forEach((type) => {
-			// Return if hold_ value does not exist in localStorage
-			if (
-				localStorage.getItem(`hold_${type}`) === "undefined" ||
-				localStorage.getItem(`hold_${type}`) === null ||
-				Object.keys(JSON.parse(localStorage.getItem(`hold_${type}`)))
-					.length === 0
-			) {
-				console.info(`Skipping ${type}`);
-				return;
-			}
-
-			const hold = JSON.parse(localStorage.getItem(`hold_${type}`));
-			console.info(`Deploying ${type} data:`, hold);
-
-			if (websocket) {
+		["global", "playerOne", "playerTwo", "timer"].forEach(
+			(type: string) => {
+				const hold_key = `hold_${type}`;
+				const raw_data = localStorage.getItem(hold_key);
+
+				if (!raw_data) {
+					console.warn(`No data found for ${hold_key}, skipping`);
+					return;
+				}
+
+				let hold;
 				try {
-					socket.send(
-						JSON.stringify({
-							_type: type,
-							...hold,
-						}),
-					);
+					hold = JSON.parse(raw_data);
 				} catch (error) {
-					alert("Failed to update data via websocket");
+					console.error(`Error parsing data for ${hold_key}:`, error);
+					return;
+				}
+
+				if (
+					typeof hold !== "object" ||
+					hold === null ||
+					Object.keys(hold).length === 0
+				) {
+					console.warn(
+						`Invalid or empty hold data for ${type}, skipping deployment`,
+					);
+					return;
 				}
-			}
 
-			// Update the real value
-			localStorage.setItem(type, JSON.stringify(hold));
+				if (websocket) {
+					try {
+						socket.send(JSON.stringify({ _type: type, ...hold }));
+					} catch (error) {
+						console.error(
+							`Failed to update ${type} data via WebSocket:`,
+							error,
+						);
+						alert(`Failed to update ${type} data via WebSocket`);
+					}
+				}
+
+				console.info(
+					`%c DEPLOYED %c${type}'s' data`,
+					"background: DarkGreen",
+				);
+
+				// Update the real value
+				localStorage.setItem(type, JSON.stringify(hold));
 
-			// Remove hold value
-			localStorage.removeItem(`hold_${type}`);
+				// Remove hold value
+				localStorage.removeItem(hold_key);
+			},
+		);
 
-			// Set deploy proceed state to false after a manual deployment
-			if ($deploy.type === "manual") {
-				$deploy.proceed = false;
-			}
-		});
+		$deploy.proceed = false;
 	};
 </script>
 
-<main class="bg-[#101010] text-foreground w-screen min-h-screen grid grid-rows-[auto_1fr]">
+<main
+	class="bg-[#101010] text-foreground w-screen min-h-screen grid grid-rows-[auto_1fr]"
+>
 	<!-- Pass the deploy_data function as a property to header, so we can utilise the socket, without having to create a new WebSocket -->
-	<Header update={store_data} />
+	<Header update={store_data} {deploy_data} />
 	<section class="grid grid-cols-1 md:grid-cols-2 p-4 gap-4">
 		<Player
 			update={store_data}
diff --git a/dashboard/src/routes/overlay/+page.svelte b/dashboard/src/routes/overlay/+page.svelte
index 93e2637..127942f 100644
--- a/dashboard/src/routes/overlay/+page.svelte
+++ b/dashboard/src/routes/overlay/+page.svelte
@@ -16,32 +16,44 @@
 	const theme: TThemeClasses = layout[$globalData.overlay.layout];
 
 	$: {
-		import(`$lib/styles/${$globalData.overlay.layout}.css`)
-			.catch(error => {
+		import(`$lib/styles/${$globalData.overlay.layout}.css`).catch(
+			(error) => {
 				console.error(`Failed to import CSS file: ${error}`);
-			});
+			},
+		);
 	}
 </script>
 
 {#if $netrunnerDB && $playerOneData && $playerTwoData}
-	<Wrapper>
-		<Commentators />
-		<CardHighlight
-			player="playerOne"
-			data={$playerOneData.highlight}
-			side={$playerOneData.side}
-		/>
-		<CardHighlight
-			player="playerTwo"
-			data={$playerTwoData.highlight}
-			side={$playerTwoData.side}
-		/>
-		<section
-			class="absolute bottom-0 left-0 right-0 col-[1/-1] flex flex-row justify-between items-center"
-		>
+	<Wrapper
+		class="grid gap-[calc(var(--padding)/2)] grid-cols-2 grid-rows-[auto_1fr_auto] items-end py-[var(--padding)]"
+	>
+		<div class="col-span-2">
+			<Commentators />
+		</div>
+		<div class="flex flex-row justify-start pl-[var(--padding)]">
+			<CardHighlight
+				class="h-[40vh]"
+				player="playerOne"
+				data={$playerOneData.highlight}
+				side={$playerOneData.side}
+			/>
+		</div>
+		<div class="flex flex-row justify-end pr-[var(--padding)]">
+			<CardHighlight
+				class="h-[40vh]"
+				player="playerTwo"
+				data={$playerTwoData.highlight}
+				side={$playerTwoData.side}
+			/>
+		</div>
+
+		<div class=" bottom-0 left-0 w-[50vw]">
 			<Side player="playerOne" {theme} />
+		</div>
+		<div class=" bottom-0 right-0 w-[50vw]">
 			<Side player="playerTwo" {theme} />
-		</section>
+		</div>
 	</Wrapper>
 {:else}
 	<main
@@ -50,4 +62,4 @@
 		<Loading />
 		<p>Awaiting data...</p>
 	</main>
-{/if}
\ No newline at end of file
+{/if}
diff --git a/dashboard/src/routes/overlay/player/[slug]/cards/+page.svelte b/dashboard/src/routes/overlay/player/[slug]/cards/+page.svelte
index e84e7a0..3365990 100644
--- a/dashboard/src/routes/overlay/player/[slug]/cards/+page.svelte
+++ b/dashboard/src/routes/overlay/player/[slug]/cards/+page.svelte
@@ -1,32 +1,34 @@
 <script lang="ts">
-    import type { PageData } from './$types';
-    export let data: PageData;
+	import type { PageData } from "./$types";
+	export let data: PageData;
 	import {
-		globalData,
+		// globalData,
 		playerOneData,
 		playerTwoData,
 	} from "$lib/store";
 	import CardHighlight from "$components/overlay/CardHighlight.svelte";
-	import layout from "$lib/data/layout.json";
+	// import layout from "$lib/data/layout.json";
 	import Wrapper from "$components/overlay/Wrapper.svelte";
 
-    let side = data.slug;
+	let side = data.slug;
 </script>
 
-<Wrapper>
-    {#if side === "left"}
-        <CardHighlight
-            player="playerOne"
-            data={$playerOneData.highlight}
-            side={$playerOneData.side}
-        />
-        <div/>
-    {:else if side === "right"}
-        <div/>
-        <CardHighlight
-            player="playerTwo"
-            data={$playerTwoData.highlight}
-            side={$playerTwoData.side}
-        />
-    {/if}
-</Wrapper>
\ No newline at end of file
+<Wrapper
+	class="flex flex-row {side === 'left' ? 'justify-start' : 'justify-end'}"
+>
+	{#if side === "left"}
+		<CardHighlight
+			player="playerOne"
+			data={$playerOneData.highlight}
+			side={$playerOneData.side}
+			width={100}
+		/>
+	{:else if side === "right"}
+		<CardHighlight
+			player="playerTwo"
+			data={$playerTwoData.highlight}
+			side={$playerTwoData.side}
+			width={40}
+		/>
+	{/if}
+</Wrapper>
diff --git a/dashboard/src/routes/overlay/player/[slug]/details/+page.svelte b/dashboard/src/routes/overlay/player/[slug]/details/+page.svelte
index 65f63f6..f174850 100644
--- a/dashboard/src/routes/overlay/player/[slug]/details/+page.svelte
+++ b/dashboard/src/routes/overlay/player/[slug]/details/+page.svelte
@@ -1,27 +1,25 @@
 <script lang="ts">
-    import type { PageData } from '../cards copy/$types';
-    export let data: PageData;
-	import {
-		globalData,
-	} from "$lib/store";
+	import type { PageData } from "../cards copy/$types";
+	export let data: PageData;
+	import { globalData } from "$lib/store";
 	import layout from "$lib/data/layout.json";
 	import { default as Side } from "$components/overlay/MetaSide.svelte";
 	import type { ThemeClasses as TThemeClasses } from "$lib/types";
 	import Wrapper from "$components/overlay/Wrapper.svelte";
 
-    let side = data.slug;
+	let side = data.slug;
 
 	const theme: TThemeClasses = layout[$globalData.overlay.layout];
 </script>
 
-<Wrapper>
-	<section
-		class="absolute bottom-0 left-0 right-0 col-[1/-1] flex flex-row justify-between items-center"
-	>
-		{#if side === "left"}
-			<Side player="playerOne" {theme} />
-		{:else if side === "right"}
-			<Side player="playerTwo" {theme} />
-		{/if}
-	</section>
-</Wrapper>
\ No newline at end of file
+<Wrapper
+	class="grid items-end {side === 'left'
+		? 'justify-start'
+		: 'justify-end'} py-[var(--padding)]"
+>
+	{#if side === "left"}
+		<Side player="playerOne" {theme} />
+	{:else if side === "right"}
+		<Side player="playerTwo" {theme} />
+	{/if}
+</Wrapper>
diff --git a/dashboard/static/NSG_AGENDA.svg b/dashboard/static/NSG_AGENDA.svg
new file mode 100644
index 0000000..e20c89d
--- /dev/null
+++ b/dashboard/static/NSG_AGENDA.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 5867 5867" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M1789.19,1722.06l0,-1062.42l1138.31,-659.635l1132.47,659.635l-0,1074.1l1634.49,-741.36l-1424.35,1056.58l881.459,513.698l0,1313.43l-1132.47,659.635l-893.134,-519.535l-192.637,1850.48l-192.636,-1856.32l-910.647,525.373l-1132.47,-659.635l-0,-1313.43l893.134,-519.535l-1418.51,-1050.75l1616.98,729.685Zm-87.562,402.786l-881.459,507.861l-0,1173.33l1009.88,583.748l898.972,-519.535l-64.213,-595.423c-159.557,-58.375 -288.955,-157.612 -388.192,-297.712c-99.237,-140.099 -148.856,-299.657 -148.856,-478.673l0,-52.537l-426.136,-321.062Zm2457.58,5.838l-420.299,315.224l0,52.537c0,179.016 -49.618,338.574 -148.855,478.673c-99.237,140.1 -226.689,239.337 -382.355,297.712l-64.212,607.098l875.621,507.86l1009.88,-583.748l0,-1173.33l-869.784,-502.023Zm531.211,682.985l233.499,-99.237l-0,1056.58l-910.647,502.023l-0,-251.012l677.148,-396.948l-0,-811.41Zm-3706.8,904.809l0,-1056.58l233.499,99.237l0,811.409l671.311,396.949l-0,251.012l-904.81,-502.024Zm2947.93,-1926.37l0,-1062.42l-1004.05,-583.748l-1009.88,583.748l-0,1050.75l402.786,186.8c163.449,-190.691 368.734,-286.037 615.854,-286.037c247.12,0 450.459,95.346 610.017,286.037l385.273,-175.125Zm-1897.18,-974.859l904.809,-513.698l893.134,525.373l-192.637,163.449l-706.335,-408.623l-694.66,367.761l-204.311,-134.262Z" fill="#FFF" style="fill-rule:nonzero;"/></svg>
\ No newline at end of file
diff --git a/dashboard/static/NSG_Archives_Icon.svg b/dashboard/static/NSG_Archives_Icon.svg
new file mode 100644
index 0000000..c612ba5
--- /dev/null
+++ b/dashboard/static/NSG_Archives_Icon.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path d="M180,152.5C180,148.361 176.639,145 172.5,145L28.263,145C24.123,145 20.763,148.361 20.763,152.5L20.763,167.5C20.763,171.639 24.123,175 28.263,175L172.5,175C176.639,175 180,171.639 180,167.5L180,152.5ZM58,152C62.415,152 66,155.585 66,160C66,164.415 62.415,168 58,168C53.585,168 50,164.415 50,160C50,155.585 53.585,152 58,152ZM36,152C40.415,152 44,155.585 44,160C44,164.415 40.415,168 36,168C31.585,168 28,164.415 28,160C28,155.585 31.585,152 36,152ZM102,152C106.415,152 110,155.585 110,160C110,164.415 106.415,168 102,168C97.585,168 94,164.415 94,160C94,155.585 97.585,152 102,152ZM80,152C84.415,152 88,155.585 88,160C88,164.415 84.415,168 80,168C75.585,168 72,164.415 72,160C72,155.585 75.585,152 80,152ZM180,112.5C180,108.361 176.639,105 172.5,105L28.263,105C24.123,105 20.763,108.361 20.763,112.5L20.763,127.5C20.763,131.639 24.123,135 28.263,135L172.5,135C176.639,135 180,131.639 180,127.5L180,112.5ZM70,112C74.415,112 78,115.585 78,120C78,124.415 74.415,128 70,128C65.585,128 62,124.415 62,120C62,115.585 65.585,112 70,112ZM125,112C129.415,112 133,115.585 133,120C133,124.415 129.415,128 125,128C120.585,128 117,124.415 117,120C117,115.585 120.585,112 125,112ZM109.5,116.75C109.5,114.956 108.044,113.5 106.25,113.5L87.25,113.5C85.456,113.5 84,114.956 84,116.75L84,123.25C84,125.044 85.456,126.5 87.25,126.5L106.25,126.5C108.044,126.5 109.5,125.044 109.5,123.25L109.5,116.75ZM54.5,116.75C54.5,114.956 53.044,113.5 51.25,113.5L32.25,113.5C30.456,113.5 29,114.956 29,116.75L29,123.25C29,125.044 30.456,126.5 32.25,126.5L51.25,126.5C53.044,126.5 54.5,125.044 54.5,123.25L54.5,116.75ZM179.619,72.5C179.619,68.361 176.258,65 172.119,65L27.881,65C23.742,65 20.381,68.361 20.381,72.5L20.381,87.5C20.381,91.639 23.742,95 27.881,95L172.119,95C176.258,95 179.619,91.639 179.619,87.5L179.619,72.5ZM91,72C95.415,72 99,75.585 99,80C99,84.415 95.415,88 91,88C86.585,88 83,84.415 83,80C83,75.585 86.585,72 91,72ZM36,72C40.415,72 44,75.585 44,80C44,84.415 40.415,88 36,88C31.585,88 28,84.415 28,80C28,75.585 31.585,72 36,72ZM75.5,76.75C75.5,74.956 74.044,73.5 72.25,73.5L53.25,73.5C51.456,73.5 50,74.956 50,76.75L50,83.25C50,85.044 51.456,86.5 53.25,86.5L72.25,86.5C74.044,86.5 75.5,85.044 75.5,83.25L75.5,76.75ZM180,32.5C180,28.361 176.639,25 172.5,25L28.263,25C24.123,25 20.763,28.361 20.763,32.5L20.763,47.5C20.763,51.639 24.123,55 28.263,55L172.5,55C176.639,55 180,51.639 180,47.5L180,32.5ZM36,32C40.415,32 44,35.585 44,40C44,44.415 40.415,48 36,48C31.585,48 28,44.415 28,40C28,35.585 31.585,32 36,32ZM75.5,36.75C75.5,34.956 74.044,33.5 72.25,33.5L53.25,33.5C51.456,33.5 50,34.956 50,36.75L50,43.25C50,45.044 51.456,46.5 53.25,46.5L72.25,46.5C74.044,46.5 75.5,45.044 75.5,43.25L75.5,36.75Z"/>
+</svg>
diff --git a/dashboard/static/NSG_CLICK.svg b/dashboard/static/NSG_CLICK.svg
new file mode 100644
index 0000000..6e831b0
--- /dev/null
+++ b/dashboard/static/NSG_CLICK.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 5867 5867" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M3797.94,557.186c-2551.07,3050.27 -2551.07,3050.27 0,-0Zm1768.85,1409.18c23.584,322.323 -27.516,658.403 -153.3,1008.24c-220.123,601.407 -605.338,1130.1 -1155.64,1586.06l-147.404,-176.884c522.792,-428.454 886.388,-923.73 1090.79,-1485.83c117.923,-322.322 165.093,-626.957 141.508,-913.902c-19.654,-275.154 -102.2,-514.931 -247.638,-719.33c-263.361,-377.354 -674.126,-573.892 -1232.3,-589.615l-82.546,259.43c255.5,27.516 479.553,104.166 672.161,229.95c243.707,165.092 412.73,389.146 507.068,672.161l-424.522,141.507c-62.892,-184.745 -171.971,-330.184 -327.236,-436.314c-155.266,-106.131 -346.89,-163.127 -574.875,-170.989l-412.73,1255.88c23.585,23.584 43.238,49.134 58.961,76.65c35.377,74.684 35.377,155.265 0,241.742c-31.446,90.407 -90.407,167.057 -176.884,229.949c-86.477,62.893 -174.919,94.339 -265.327,94.339c-23.584,-0 -47.169,-3.931 -70.753,-11.793l-1261.78,896.215c78.615,82.546 172.954,149.369 283.015,200.469c110.062,51.1 235.846,82.546 377.354,94.338l-35.377,442.211c-491.346,-39.307 -854.942,-241.742 -1090.79,-607.303c-125.784,-196.538 -195.555,-420.592 -209.313,-672.161c-13.757,-251.569 26.533,-510.999 120.871,-778.291c106.131,-290.877 269.258,-566.03 489.38,-825.461l341.977,288.911c-184.746,220.123 -320.357,450.073 -406.834,689.85c-137.577,373.422 -139.542,695.745 -5.896,966.968l1185.12,-949.28c0,-43.238 7.862,-86.477 23.585,-129.715c47.169,-133.646 139.542,-229.95 277.119,-288.911l477.588,-1202.81c-483.484,70.753 -929.626,298.738 -1338.43,683.953l-306.599,-324.288c267.292,-251.569 562.099,-450.073 884.422,-595.511c318.392,-141.508 634.818,-216.192 949.279,-224.054l94.339,-241.742c-424.523,31.446 -851.011,167.058 -1279.46,406.834l-112.027,-194.573c530.653,-298.738 1055.41,-448.107 1574.27,-448.107c322.323,0 611.234,59.944 866.734,179.833c255.5,119.888 461.865,291.859 619.096,515.913c165.092,235.845 259.43,510.999 283.015,825.46Zm-2494.07,908.007c11.793,-31.446 11.793,-56.996 0,-76.65c-3.93,-7.862 -11.792,-13.758 -23.584,-17.688c-7.862,-3.931 -17.689,-5.897 -29.481,-5.897c-15.723,0 -31.446,1.966 -47.169,5.897c-94.339,27.515 -157.231,82.546 -188.677,165.092c-11.792,35.377 -11.792,62.892 0,82.546c7.862,11.792 25.55,17.688 53.065,17.688c47.17,0 93.356,-17.688 138.56,-53.065c45.204,-35.377 77.632,-74.685 97.286,-117.923Zm-1002.35,2323.08c577.823,-0 1153.68,-192.608 1727.57,-577.823l123.82,188.677c-613.2,408.8 -1230.33,613.2 -1851.39,613.2c-322.323,-0 -611.234,-59.945 -866.733,-179.833c-255.5,-119.888 -461.865,-289.894 -619.096,-510.017c-165.092,-239.776 -259.43,-516.895 -283.015,-831.356c-27.515,-318.392 23.585,-652.507 153.3,-1002.35c125.784,-349.838 316.426,-681.987 571.926,-996.448c243.708,-302.669 528.688,-567.996 854.942,-795.98l129.715,182.78c-310.531,216.192 -581.753,467.761 -813.669,754.707c-235.845,294.807 -414.695,605.338 -536.549,931.591c-113.992,318.392 -159.196,621.061 -135.611,908.007c19.653,275.154 100.234,514.93 241.742,719.33c137.576,192.608 317.409,340.011 539.497,442.211c222.088,102.2 476.605,153.3 763.551,153.3Zm2836.05,-2211.05c-184.746,503.138 -512.965,935.522 -984.656,1297.15c-467.762,365.561 -959.107,567.996 -1474.04,607.303l-35.377,-442.211c428.453,-35.377 843.149,-208.33 1244.09,-518.861c400.938,-310.53 676.091,-676.091 825.461,-1096.68c86.476,-231.915 117.922,-450.073 94.338,-654.473l442.211,-47.169c31.446,271.223 -5.896,556.204 -112.027,854.942Z" fill="#FFF" style="fill-rule:nonzero;"/></svg>
\ No newline at end of file
diff --git a/dashboard/static/NSG_CREDIT.svg b/dashboard/static/NSG_CREDIT.svg
new file mode 100644
index 0000000..4597fe1
--- /dev/null
+++ b/dashboard/static/NSG_CREDIT.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 32595 32595" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M16296.3,0.006l8549.41,8549.41l0,15493.8l-8549.41,8549.41l-8549.41,-8549.41l-0,-15493.8l8549.41,-8549.41Zm-6059.93,23027.7l6059.93,6059.93l-0,-12709.5l6059.92,-6059.92l-0,-753.396l-6059.92,-6059.93l-6059.93,6059.93l0,13462.9Z" fill="#FFF" style="fill-rule:nonzero;"/></svg>
\ No newline at end of file
diff --git a/dashboard/static/NSG_HQ_Icon.svg b/dashboard/static/NSG_HQ_Icon.svg
new file mode 100644
index 0000000..4bdf400
--- /dev/null
+++ b/dashboard/static/NSG_HQ_Icon.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(0.031193,0,0,0.031193,-6.84211,-6.13738)">
+        <path d="M5350.79,5912.77L5350.79,844.948C5350.79,609.368 5183.6,418.106 4977.67,418.106L1945.85,418.106C1739.92,418.106 1572.73,609.368 1572.73,844.948L1572.73,5912.77L1299.21,5912.77C1234.03,5912.77 1181.1,5965.7 1181.1,6030.88L1181.1,6387.1L5669.29,6387.1L5669.29,6030.88C5669.29,5965.7 5616.37,5912.77 5551.18,5912.77L5350.79,5912.77ZM2764.77,1207.78C2764.77,1143.67 2712.72,1091.62 2648.6,1091.62L2416.27,1091.62C2352.16,1091.62 2300.11,1143.67 2300.11,1207.78L2300.11,4955.6C2300.11,5019.71 2352.16,5071.76 2416.27,5071.76L2648.6,5071.76C2712.72,5071.76 2764.77,5019.71 2764.77,4955.6L2764.77,1207.78ZM3694.09,3514.69C3694.09,3450.58 3642.04,3398.53 3577.92,3398.53L3345.59,3398.53C3281.48,3398.53 3229.43,3450.58 3229.43,3514.69L3229.43,4955.6C3229.43,5019.71 3281.48,5071.76 3345.59,5071.76L3577.92,5071.76C3642.04,5071.76 3694.09,5019.71 3694.09,4955.6L3694.09,3514.69ZM4623.41,1207.78C4623.41,1143.67 4571.36,1091.62 4507.24,1091.62L4274.91,1091.62C4210.8,1091.62 4158.75,1143.67 4158.75,1207.78L4158.75,4955.6C4158.75,5019.71 4210.8,5071.76 4274.91,5071.76L4507.24,5071.76C4571.36,5071.76 4623.41,5019.71 4623.41,4955.6L4623.41,1207.78ZM3694.09,1207.78C3694.09,1143.67 3642.04,1091.62 3577.92,1091.62L3345.59,1091.62C3281.48,1091.62 3229.43,1143.67 3229.43,1207.78L3229.43,2757.02C3229.43,2821.14 3281.48,2873.19 3345.59,2873.19L3577.92,2873.19C3642.04,2873.19 3694.09,2821.14 3694.09,2757.02L3694.09,1207.78Z"/>
+    </g>
+</svg>
diff --git a/dashboard/static/NSG_INTERRUPT.svg b/dashboard/static/NSG_INTERRUPT.svg
new file mode 100644
index 0000000..7b71b19
--- /dev/null
+++ b/dashboard/static/NSG_INTERRUPT.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 5867 5867" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M5350.75,819.564l-336.081,0c-314.461,636.784 -471.691,959.107 -471.691,966.969l318.392,-0l-448.108,919.799l-701.641,-0l-0,229.949l583.718,0l-1214.61,2441.01l-377.353,-760.603c-86.477,3.931 -191.625,5.897 -315.444,5.897l-698.694,-0c-94.338,-137.577 -161.161,-237.812 -200.469,-300.704l742.915,0l-347.873,-595.511l371.457,0c-90.407,-180.815 -145.438,-290.876 -165.092,-330.184l-1031.83,-0c-90.407,-137.577 -155.265,-237.811 -194.572,-300.704l1079,0c-51.1,-106.13 -214.227,-432.384 -489.381,-978.76l725.226,-0l0,-206.365l-1303.05,-0c-43.239,-82.546 -74.685,-139.542 -94.338,-170.989l949.279,0l0,-165.092l-1043.62,0l-336.08,-560.134l560.134,0l-265.327,-524.757l4870.22,0l-165.092,330.184Zm-1874.98,23.585l-849.045,0c-7.862,161.161 -7.862,361.63 -0,601.407c7.861,239.777 17.688,440.246 29.48,601.407c11.793,161.162 25.55,361.631 41.273,601.407c15.723,239.777 25.55,440.246 29.481,601.407l648.576,0c7.862,-184.746 22.602,-437.297 44.221,-757.655c21.62,-320.357 38.325,-615.164 50.118,-884.422c11.792,-269.257 13.757,-523.774 5.896,-763.551Zm-849.045,3278.26l849.045,0l-0,-424.523l-849.045,0l-0,424.523Z" fill="#FFF" style="fill-rule:nonzero;"/></svg>
\ No newline at end of file
diff --git a/dashboard/static/NSG_LINK.svg b/dashboard/static/NSG_LINK.svg
new file mode 100644
index 0000000..a76ae56
--- /dev/null
+++ b/dashboard/static/NSG_LINK.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 5867 5867" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M4663.85,5474.57l-4410.32,-0l0,-3225.19l719.33,0l0,448.107l-271.222,0l-0,2334.88l3514.1,-0l0,-2334.88l-2346.67,0l-0,-448.107l2794.77,0l-0,3225.19Zm949.279,-1857.29l-725.226,0l0,-448.107l277.119,0l0,-2328.98l-3520,0l0,2328.98l2352.56,0l-0,448.107l-2800.67,0l-0,-3225.19l4416.21,-0l0,3225.19Z" fill="#FFF" style="fill-rule:nonzero;"/></svg>
\ No newline at end of file
diff --git a/dashboard/static/NSG_Mu.svg b/dashboard/static/NSG_Mu.svg
new file mode 100644
index 0000000..5dd4174
--- /dev/null
+++ b/dashboard/static/NSG_Mu.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 5867 5867" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M731.122,1344.32l4404.42,-0l0,2694.54l-790.083,-0l-678.057,483.484l-2936.28,0l0,-3178.02Zm4103.72,477.588l-0,-176.885l-383.25,0l0,176.885l383.25,-0Zm-383.25,1261.78l0,182.781l383.25,-0l-0,-182.781l-383.25,0Zm0,-483.484l0,182.781l383.25,-0l-0,-182.781l-383.25,0Zm0,-477.588l0,182.781l383.25,-0l-0,-182.781l-383.25,0Zm-878.526,2099.03l577.823,-406.835l-0,-2169.78l-3119.06,0l-0,2576.62l2541.24,-0Zm878.526,-660.369l0,182.781l383.25,-0l-0,-182.781l-383.25,0Z" fill="#FFF" style="fill-rule:nonzero;"/></svg>
\ No newline at end of file
diff --git a/dashboard/static/NSG_RD_Icon.svg b/dashboard/static/NSG_RD_Icon.svg
new file mode 100644
index 0000000..e82b4a7
--- /dev/null
+++ b/dashboard/static/NSG_RD_Icon.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <path id="path3029" d="M176.141,155.946C180.299,162.553 181.097,168.214 178.535,172.929C175.974,177.643 170.759,180 162.889,180L34.601,180C26.731,180 21.516,177.643 18.954,172.929C16.393,168.214 17.191,162.553 21.349,155.946L77.364,67.636L77.364,23.203L70.236,23.203C68.306,23.203 66.636,22.498 65.225,21.087C63.815,19.677 63.109,18.006 63.109,16.076C63.109,14.146 63.815,12.475 65.225,11.065C66.636,9.654 68.306,8.949 70.236,8.949L127.253,8.949C129.184,8.949 130.854,9.654 132.265,11.065C133.675,12.475 134.381,14.146 134.381,16.076C134.381,18.006 133.675,19.677 132.265,21.087C130.854,22.498 129.184,23.203 127.253,23.203L120.126,23.203L120.126,67.636L176.141,155.946ZM89.391,75.209L53.744,132.722C59.37,134.795 74.689,121.421 96.223,125.803C117.835,130.2 134.365,142.762 138.39,122.983L108.099,75.209L105.872,71.757L105.872,23.203L91.618,23.203L91.618,71.757L89.391,75.209ZM117.043,109C120.636,109.024 123.534,111.961 123.51,115.553C123.486,119.146 120.55,122.044 116.957,122.02C113.364,121.996 110.466,119.06 110.49,115.467C110.514,111.874 113.45,108.976 117.043,109ZM96.745,94C101.301,94 105,97.699 105,102.255C105,106.811 101.301,110.51 96.745,110.51C92.189,110.51 88.49,106.811 88.49,102.255C88.49,97.699 92.189,94 96.745,94Z" style="fill-rule:nonzero;stroke:white;stroke-width:1px;"/>
+</svg>
diff --git a/dashboard/static/NSG_RECURRING_CREDIT.svg b/dashboard/static/NSG_RECURRING_CREDIT.svg
new file mode 100644
index 0000000..8e1fbcf
--- /dev/null
+++ b/dashboard/static/NSG_RECURRING_CREDIT.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 5867 5867" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M3838.39,143.024c617.13,165.092 1200.85,530.653 1751.16,1096.68l-253.535,247.638c-503.138,-518.861 -1033.79,-851.01 -1591.96,-996.449c-444.177,-117.923 -896.215,-113.992 -1356.11,11.793c-373.423,98.269 -737.019,273.188 -1090.79,524.757l489.381,229.95l-1509.41,383.249l636.784,-1420.97l147.404,536.549c43.238,-31.446 84.511,-58.961 123.819,-82.546c357.699,-239.777 727.191,-412.73 1108.48,-518.861c522.792,-141.508 1037.72,-145.438 1544.79,-11.792Zm-2099.03,1774.74l1373.8,-1379.7l1379.7,1379.7l0,2523.55l-1379.7,1379.7l-1373.8,-1379.7l0,-2523.55Zm2399.73,253.534l0,-106.13l-1025.93,-1020.03l-1020.03,1020.03l0,2228.74l1020.03,1025.93l-0,-2128.51l1025.93,-1020.03Z" fill="#FFF" style="fill-rule:nonzero;"/></svg>
\ No newline at end of file
diff --git a/dashboard/static/NSG_REZ_COST.svg b/dashboard/static/NSG_REZ_COST.svg
new file mode 100644
index 0000000..6d371c0
--- /dev/null
+++ b/dashboard/static/NSG_REZ_COST.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 5867 5867" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M1530.05,2267.07l-241.742,-100.235l0,-766.499l241.742,241.742l0,624.992Zm-843.149,748.81l341.977,0l442.211,436.315l-241.742,100.235l-542.446,-536.55Zm3891.46,-1609.65l0,760.603l-241.742,100.235l0,-624.992l241.742,-235.846Zm-878.526,-117.923l766.5,0l-241.742,235.846l-619.096,0l94.338,-235.846Zm878.526,2411.52l0,766.5l-241.742,-241.742l0,-624.992l241.742,100.234Zm-2411.52,878.526l-766.499,0l241.742,-235.845l624.992,-0l-100.235,235.845Zm-878.526,-112.026l0,-766.5l241.742,-100.234l0,624.992l-241.742,241.742Zm3891.46,-1450.45l-536.549,536.55l-241.742,-100.235l442.211,-436.315l336.08,0Zm-1574.27,1326.63l619.096,-0l241.742,235.845l-766.5,0l-94.338,-235.845Zm1574.27,-1491.73l-341.976,0l-442.211,-436.315l241.742,-100.234l542.445,536.549Zm-2328.98,-1827.81l-436.315,442.211l-100.234,-241.742l536.549,-536.55l0,336.081Zm-536.549,3614.34l100.234,-241.742l436.315,442.211l0,341.976l-536.549,-542.445Zm1238.19,-3407.97l-100.235,241.742l-436.315,-442.211l0,-341.977l536.55,542.446Zm-536.55,3950.42l0,-336.08l436.315,-442.211l100.235,241.742l-536.55,536.549Zm-748.81,-3655.61l-624.992,0l-241.742,-235.846l766.499,0l100.235,235.846Zm-1043.62,790.084l241.742,100.234l-442.211,436.315l-336.081,0l536.55,-536.549Zm-760.603,701.641l607.303,601.407l-241.742,100.235l-707.538,-701.642l341.977,0Zm1686.3,2022.38l100.234,-241.742l601.407,607.303l0,341.977l-701.641,-707.538Zm-1020.03,-3797.12l0,860.838l-241.742,-100.235l0,-996.449l241.742,235.846Zm2588.41,-412.73l-100.235,241.742l-601.407,-607.303l0,-341.977l701.642,707.538Zm-2653.27,1415.08l-607.304,607.303l-336.08,0l701.642,-701.641l241.742,94.338Zm3673.3,2382.04l0,-860.838l241.742,100.235l0,996.449l-241.742,-235.846Zm-3608.44,-860.838l0,860.838l-241.742,241.742l0,-1002.35l241.742,-100.235Zm3608.44,-1662.71l0,-860.838l241.742,-235.846l0,996.449l-241.742,100.235Zm672.161,913.902l336.081,0l-701.642,701.642l-241.742,-94.338l607.303,-607.304Zm-4410.32,1963.42l241.742,-241.742l854.941,0l-94.338,241.742l-1002.35,0Zm2016.48,430.419l607.304,-607.303l94.338,241.742l-701.642,701.642l0,-336.081Zm754.707,-672.161l854.942,0l241.742,241.742l-996.449,0l-100.235,-241.742Zm1633.23,-1886.77l-607.303,-601.407l241.742,-100.234l707.538,701.641l-341.977,0Zm-3307.74,-1721.67l-854.941,0l-241.742,-241.742l996.449,0l100.234,241.742Zm2771.19,-241.742l-241.742,241.742l-854.942,0l100.235,-241.742l996.449,0Zm-2016.48,-430.419l-607.303,607.304l-94.338,-241.742l701.641,-701.642l0,336.08Zm1326.63,3726.37l-725.226,-0l-518.861,512.964l-518.861,-512.964l-725.226,-0l0,-731.123l-518.861,-512.965l518.861,-518.86l0,-731.123l725.226,0l518.861,-512.965l518.861,512.965l725.226,0l0,731.123l518.861,518.86l-518.861,512.965l0,731.123Z" fill="#FFF" style="fill-rule:nonzero;"/></svg>
\ No newline at end of file
diff --git a/dashboard/static/NSG_SUBROUTINE.svg b/dashboard/static/NSG_SUBROUTINE.svg
new file mode 100644
index 0000000..d2293a9
--- /dev/null
+++ b/dashboard/static/NSG_SUBROUTINE.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 5867 5867" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M5743.67,3576.01l-1621.44,1533l-0,-1232.3l-3867.87,-0l-0,-2818.36l583.718,0l0,2216.95l3284.16,-0l-0,-1232.3l1621.44,1533Z" fill="#FFF" style="fill-rule:nonzero;"/></svg>
\ No newline at end of file
diff --git a/dashboard/static/NSG_TRASH_ABILITY.svg b/dashboard/static/NSG_TRASH_ABILITY.svg
new file mode 100644
index 0000000..1fffe1f
--- /dev/null
+++ b/dashboard/static/NSG_TRASH_ABILITY.svg
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 5867 5867" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M4916.32,1855.6c3.931,3.931 5.896,9.827 5.896,17.688l0,2877.32c0,35.377 -11.792,66.823 -35.377,94.339c-23.584,27.515 -55.031,45.203 -94.338,53.065l-878.526,129.715l-448.107,70.754l94.338,-241.742c43.238,-110.062 55.031,-224.054 35.377,-341.977c-27.515,-184.746 -114.975,-332.149 -262.379,-442.211c-147.403,-110.061 -313.478,-151.334 -498.224,-123.819c-117.923,19.654 -222.088,64.858 -312.496,135.612l-170.988,135.611l-159.196,-524.757l-53.066,-165.092l-501.172,-0l-0,-147.404l454.003,-0l-58.961,-182.781l-1090.79,0l-0,-153.299l1043.62,-0l-141.508,-454.004l-683.953,0l0,-147.403l636.784,-0l-29.481,-100.235c-3.931,-3.931 -5.896,-9.827 -5.896,-17.688l-41.273,-271.223c-47.169,-35.377 -76.65,-82.546 -88.442,-141.508l-35.377,-235.846l147.404,-23.584l-147.404,23.584l-11.792,-88.442c-7.862,-58.961 6.878,-113.009 44.221,-162.144c37.342,-49.134 85.494,-79.598 144.455,-91.39l117.923,-17.689l94.339,-11.792l47.169,-94.338l41.273,-100.235c43.238,-90.407 115.957,-143.473 218.157,-159.196l88.443,-11.792l1544.79,-235.846l82.546,-11.792c102.2,-11.793 184.746,17.688 247.638,88.442l147.404,165.092l123.819,-23.584l88.442,-11.793c62.893,-7.861 118.906,5.896 168.041,41.273c49.134,35.377 77.632,82.546 85.494,141.508l11.792,70.754l-147.404,23.584l147.404,-23.584l41.273,253.534c7.862,62.892 -5.896,117.923 -41.273,165.092l35.377,271.223Zm-3024.72,-235.846l0,11.792l23.585,165.092l2700.43,-406.834l-29.48,-170.988l-11.793,-0l-23.584,-147.404l23.584,147.404l-288.911,47.169l-206.365,-229.95l112.027,-100.234l-112.027,100.234l-35.377,-41.273l-76.65,5.896l-17.688,-129.715l17.688,129.715l-1538.89,235.846l-82.546,11.793l-153.3,330.184l-300.704,41.273Zm2004.69,3113.17l725.227,-112.027l-0,-2735.81l-29.481,-188.677l-2564.82,383.249l23.584,188.677l58.962,176.885l471.692,-0l-0,147.403l-424.523,0l141.507,454.004l530.654,-0l-0,153.299l-483.484,0l58.961,182.781l347.873,-0l-0,147.404l-300.704,-0l64.858,212.261c86.477,-43.238 178.85,-72.719 277.119,-88.442c263.361,-39.308 502.155,20.636 716.382,179.832c214.226,159.196 340.994,370.475 380.301,633.836c15.723,86.477 17.689,174.919 5.896,265.327Zm-1067.2,-595.511c141.507,-19.654 270.24,12.775 386.197,97.286c115.958,84.512 184.746,198.504 206.366,341.977c21.619,143.473 -10.81,272.205 -97.287,386.198c-86.477,113.992 -200.469,182.78 -341.976,206.365l-88.443,5.896l-1079,-0l0,-147.404l725.227,0c-82.547,-82.546 -131.681,-182.78 -147.404,-300.703c-23.585,-141.508 7.861,-270.24 94.338,-386.198c86.477,-115.958 200.469,-183.763 341.977,-203.417Zm294.807,483.484c-7.861,-62.892 -35.377,-112.027 -82.546,-147.404c-43.238,-31.446 -88.442,-47.169 -135.611,-47.169c-11.793,0 -23.585,1.965 -35.377,5.896c-39.308,3.931 -74.685,18.671 -106.131,44.221c-31.446,25.55 -54.048,56.996 -67.806,94.339c-13.757,37.342 -16.705,75.667 -8.844,114.975c7.862,58.961 36.36,107.113 85.494,144.455c49.135,37.342 104.166,52.083 165.092,44.221c60.927,-7.861 110.062,-37.342 147.404,-88.442c37.342,-51.1 50.117,-106.131 38.325,-165.092Zm-1792.43,554.238l0,-147.404l277.119,0l0,147.404l-277.119,-0Z" fill="#FFF" style="fill-rule:nonzero;"/></svg>
\ No newline at end of file
diff --git a/dashboard/static/NSG_TRASH_COST bw.svg b/dashboard/static/NSG_TRASH_COST bw.svg
new file mode 100644
index 0000000..5fdb25f
--- /dev/null
+++ b/dashboard/static/NSG_TRASH_COST bw.svg	
@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 101859 101859" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;"><path d="M32761.5,38913.2l0,-5279.5l41114.4,0l0,5476.92l-5930.38,39928.8l-29069.1,0l-6114.92,-40126.2" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:2500px;"/><path d="M32761.5,33633.7c-855.554,-0 -1011.98,-189.584 -1044.45,-1044.44l0,-4420.5c0,-755.208 176.042,-1163.02 1163.02,-1163.02l4163.02,0l1911.29,-3033.33c485.762,-760.242 1272.92,-1154.17 2175.17,-1154.17l24092.9,0c1143.92,37.675 1595.31,227.258 2169.79,1067.01l2088.02,3077.43l3990.28,-0c1038.71,-0 1277.25,448.783 1277.25,1277.25l0,4251.75c0,704.167 -444.27,1125.7 -1148.09,1148.09l-40838.2,-6.079l0.02,-0Z" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:2500px;stroke-linecap:square;"/><path d="M34799.4,54931.7l-6786.08,-0" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:2500px;stroke-linecap:square;"/><path d="M34088,50199.6l-15832.2,0" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:2500px;stroke-linecap:square;"/><path d="M32761.5,41767.1l-11364.9,0" style="fill:none;fill-rule:nonzero;stroke:#000;stroke-width:2500px;stroke-linecap:square;"/></svg>
\ No newline at end of file
diff --git a/dashboard/tests/test.ts b/dashboard/tests/test.ts
new file mode 100644
index 0000000..414ab7a
--- /dev/null
+++ b/dashboard/tests/test.ts
@@ -0,0 +1,50 @@
+import { test, expect } from "@playwright/test";
+
+test("home has dashboard button", async ({ page }) => {
+	await page.goto("/");
+	// await expect(page.waitForSelector('button[href="/overlay"]')).toBeVisible();
+	await page.isVisible("a.button[href='/overlay']");
+});
+
+test("Increment agendas", async ({ page }) => {
+	// Create two pages
+	const dashboard = await page.context().newPage();
+	const overlay = await page.context().newPage();
+
+	// Load pages in parallel to ensure the overlay recieves a websocket connection
+	await Promise.all([dashboard.goto("/dashboard"), overlay.goto("/overlay")]);
+
+	await dashboard.waitForTimeout(1000);
+
+	const elements = [
+		{
+			query: "#counter-agendas-playerOne button:last-of-type",
+			clicks: 4,
+		},
+	];
+
+	elements.forEach(({ query, clicks }) => {
+		for (let i = 0; i < clicks; i++) {
+			dashboard.click(query);
+		}
+	});
+
+	await dashboard.waitForTimeout(1000);
+
+	dashboard.click("#counter-agendas-playerOne button:first-of-type"); // Remove one point
+
+	await dashboard.waitForTimeout(1000);
+
+	// Step 5: Check if the value matches
+	const count = await overlay.$eval(
+		".side.side--left .counter__number:last-of-type",
+		(element) => {
+			return element.textContent;
+		}
+	);
+
+	expect(count).toBe("3");
+
+	// console.info("counterNumber:", counterNumber);
+	// console.info(counterNumber === "4");
+});
diff --git a/server/package.json b/server/package.json
index 585b351..a67bb08 100644
--- a/server/package.json
+++ b/server/package.json
@@ -2,7 +2,7 @@
   "name": "server",
   "version": "1.0.0",
   "description": "",
-  "main": "websocket.mjjs",
+  "main": "websocket.mjs",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -11,4 +11,4 @@
   "dependencies": {
     "ws": "^8.17.0"
   }
-}
+}
\ No newline at end of file