diff --git a/src/routes/admin/new/+page.server.ts b/src/routes/admin/new/+page.server.ts
new file mode 100644
index 0000000..a811fbc
--- /dev/null
+++ b/src/routes/admin/new/+page.server.ts
@@ -0,0 +1,16 @@
+import { apiBaseUrl } from "$lib/components_custom/consts";
+import { redirect } from "@sveltejs/kit";
+
+export async function load({ cookies }) {
+  const auth = await (await fetch(apiBaseUrl + "/v3/auth", {
+    headers: {
+      'Content-Type': 'application/json',
+      'x-api-key': cookies.get("authToken") || ""
+    }
+  })).json();
+
+  /*if (!auth.admin && !auth.moderator) {
+    throw redirect(303, '/401');
+  }*/
+  console.log("WARNING: Admin Auth Check is disabled! DO NOT USE IN PRODUCTION")
+}
diff --git a/src/routes/admin/new/+page.svelte b/src/routes/admin/new/+page.svelte
new file mode 100644
index 0000000..b0c4bc8
--- /dev/null
+++ b/src/routes/admin/new/+page.svelte
@@ -0,0 +1,159 @@
+<svelte:options runes={true} />
+
+<script lang="ts">
+	import { Separator } from '$lib/components/ui/separator';
+	import * as Collapsible from "$lib/components/ui/collapsible";
+	import { Button } from '$lib/components/ui/button';
+	import { CaretDown, CaretRight } from 'radix-icons-svelte';
+	import { Checkbox } from '$lib/components/ui/checkbox';
+	import { Label } from '$lib/components/ui/label';
+
+	// Dummy Data, Replace with API fetch
+	function defaultGroups() {
+		return [
+			{
+				id: 0,
+				checked: false,
+				name: "Test Group 1"
+			},
+			{
+				id: 1,
+				checked: false,
+				name: "Test Group 2"
+			}
+		]
+	}
+
+	type Group = {
+		id: number,
+		checked: boolean,
+		name: string
+	}
+
+	type Game = {
+		id: number,
+		checked: boolean,
+		name: string,
+		groups: Array<Group>
+	}
+
+	let games: Array<Game> = $state([
+		{
+			id: 0,
+			checked: false,
+			name: "Test 1",
+			groups: defaultGroups()
+		},
+		{
+			id: 1,
+			checked: false,
+			name: "Test 2",
+			groups: defaultGroups()
+		},
+		{
+			id: 2,
+			checked: false,
+			name: "Test 3",
+			groups: defaultGroups()
+		},
+		{
+			id: 3,
+			checked: false,
+			name: "Test 4",
+			groups: defaultGroups()
+		}
+	])
+
+	$effect(() => {
+		console.log(games)
+	})
+
+
+	function toggleGame(id: number) {
+		games[id].checked = !games[id].checked;
+		games = games;
+	}
+
+	let test = $state([
+		true,
+		false,
+		true
+	])
+
+	let filterWidth = 90
+</script>
+
+<div class="h-full grid grid-cols-5">
+	<div class="p-2 flex flex-col items-center border-r-2 border-accent">
+		<h2 class="py-2">Editing Mode</h2>
+		<Separator orientation="horizontal" class="w-[{filterWidth}%]" />
+		<h2 class="py-2">Filters</h2>
+		<Separator orientation="horizontal" class="w-[{filterWidth}%]" />
+		<Collapsible.Root class="w-[{filterWidth}%] space-y-2 py-2">
+			<Collapsible.Trigger asChild let:builder>
+				<Button builders={[builder]} variant="ghost" size="sm" class="w-full p-0 justify-start">
+					{#if builder["data-state"] == "open"}
+						<CaretDown />
+					{:else}
+						<CaretRight />
+					{/if}
+					<h4 class="rounded-md text-sm font-semibold text-left align-middle">
+						Games
+					</h4>
+				</Button>
+			</Collapsible.Trigger>
+			<Collapsible.Content class="space-y-2">
+				{#each games as game}
+					<div class="pl-4 flex items-center space-x-2">
+						<Checkbox id="{game.id.toString()}" checked={game.checked} on:click={() => game.checked = !game.checked} />
+						<Label
+							for="{game.id.toString()}"
+							class=""
+						>
+							{game.name}
+						</Label>
+					</div>
+				{/each}
+			</Collapsible.Content>
+		</Collapsible.Root>
+		<Separator orientation="horizontal" class="w-[{filterWidth}%]" />
+		<Collapsible.Root class="w-[{filterWidth}%] space-y-2 py-2">
+			<Collapsible.Trigger asChild let:builder>
+				<Button builders={[builder]} variant="ghost" size="sm" class="w-full p-0 justify-start">
+					{#if builder["data-state"] == "open"}
+						<CaretDown />
+					{:else}
+						<CaretRight />
+					{/if}
+					<h4 class="rounded-md text-sm font-semibold text-left align-middle">
+						Groups
+					</h4>
+				</Button>
+			</Collapsible.Trigger>
+			<Collapsible.Content class="space-y-2">
+				{#if games.filter(value => value.checked == true).length == 0}
+					<div class="pl-4 flex flex-col items-center space-x-2 text-muted-foreground">
+						<Label class="text-center" >No Games Selected</Label>
+					</div>
+				{/if}
+				{#each games as game}
+					{#if game.checked}
+						{#each game.groups as group}
+							<div class="pl-4 flex items-center space-x-2">
+								<Checkbox id="{game.id}-{group.id}" checked={group.checked} on:click={() => {games[game.id].groups[group.id].checked = !group.checked}} />
+								<Label
+									for="{game.id}-{group.id}"
+									class=""
+								>
+									{game.name} {group.name}
+								</Label>
+							</div>
+						{/each}
+					{/if}
+				{/each}
+			</Collapsible.Content>
+		</Collapsible.Root>
+	</div>
+	<div class="col-span-2 border-r-2 border-accent">B</div>
+	<div class=""></div>
+</div>
\ No newline at end of file