diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
new file mode 100644
index 0000000..a046d0b
--- /dev/null
+++ b/src/lib/components/Button.svelte
@@ -0,0 +1,6 @@
+<script lang="ts">
+	export let text: string;
+	export let action: any = () => {};
+</script>
+
+<button class="btn px-4 py-2 mx-2 rounded-token variant-ringed-primary hover:variant-filled-primary active:variant-filled-primary" on:click={action}>{text}</button>
diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
deleted file mode 100644
index f1e8d39..0000000
--- a/src/lib/components/Modal.svelte
+++ /dev/null
@@ -1,34 +0,0 @@
-<script>
-	export let showModal = false;
-	export let isPromo = false;
-</script>
-
-{#if showModal}
-	<div class="backdrop" class:promo={isPromo} on:click|self>
-		<div class="modal">
-			<slot />
-		</div>
-	</div>
-{/if}
-
-<style>
-	.backdrop {
-		z-index: 200;
-		width: 100%;
-		height: 100%;
-		position: fixed;
-		background-color: rgba(0, 0, 0, 0.8);
-	}
-	.modal {
-		padding: 10px;
-		border-radius: 10px;
-		max-width: 400px;
-		margin: 10% auto;
-		text-align: center;
-		background: #3f3f3f;
-	}
-	.promo .modal {
-		background: crimson;
-		color: white;
-	}
-</style>
diff --git a/src/lib/components/ModalExample.svelte b/src/lib/components/ModalExample.svelte
deleted file mode 100644
index 02b3dfa..0000000
--- a/src/lib/components/ModalExample.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-	import Modal from "$lib/components/Modal.svelte";
-
-  export let showSettings: boolean;
-
-  const toggleSettings = () => {
-    showSettings = !showSettings;
-  }
-
-  const handleSubmit = () => {
-    console.log("submitted ", gameGroupSettings);
-  }
-
-  let gameGroupSettings: [] = [];
-
-</script>
-
-<Modal showModal={showSettings} on:click={toggleSettings}>
-  <h3>Settings</h3>
-  <div class="settings-modal">
-    
-    <form on:submit|preventDefault={handleSubmit}>
-      <b>Show Game Groups:</b><br>
-      <input type="checkbox" bind:group={gameGroupSettings} value="a">Group A<br>
-      <input type="checkbox" bind:group={gameGroupSettings} value="b">Group B<br>
-      <input type="checkbox" bind:group={gameGroupSettings} value="-">Ungrouped<br>
-      
-      <div class="settings-modal-save">
-        <button>Save</button>
-      </div>
-    </form>
-  </div>
-
-  
-</Modal>
-
-<style>
-  .settings-modal {
-    text-align: left;
-  }
-
-  .settings-modal input {
-    margin-left: 1rem;
-  }
-
-  .settings-modal-save {
-    text-align: center;
-  }
-</style>
\ No newline at end of file
diff --git a/src/lib/components/consts.ts b/src/lib/components/consts.ts
index ee213af..de9f2a5 100644
--- a/src/lib/components/consts.ts
+++ b/src/lib/components/consts.ts
@@ -1,2 +1,2 @@
-export const apiBaseUrl = 'https://www.chellaris.net/api';
+export const apiBaseUrl = 'https://wip.chellaris.net/api';
 export const MACHINE_GROUP_ID = 12;
\ No newline at end of file
diff --git a/src/lib/stores/admin-page/GameStore.ts b/src/lib/stores/admin-page/GameStore.ts
index 76e92b8..4b277de 100644
--- a/src/lib/stores/admin-page/GameStore.ts
+++ b/src/lib/stores/admin-page/GameStore.ts
@@ -1,5 +1,5 @@
 import { writable, type Writable } from "svelte/store";
 
-const AdminSelectedGameStore: Writable<number> = writable(1);
+const AdminSelectedGameStore: Writable<number> = writable(0);
 
 export default AdminSelectedGameStore;
\ No newline at end of file
diff --git a/src/routes/admin/+page.svelte b/src/routes/admin/+page.svelte
index c3ec156..08820c1 100644
--- a/src/routes/admin/+page.svelte
+++ b/src/routes/admin/+page.svelte
@@ -264,190 +264,185 @@
 	<meta name="description" content="Admin Menu for managing Chellaris Sign-Ups" />
 </svelte:head>
 
-<div class="frame">
-	{#if loaded}
-		<List area="games" listTitle="Games">
-			{#each Object.values(gameList) as game}
-				<button class="list-card" class:active={game.id == $AdminSelectedGameStore ? 'active' : ''} on:click={() => setActiveGame(game.id)}>
-					<div class="card-content">{game.name}</div>
-					<button class="delete-box" on:click={() => deleteGame(game.id)}>
-						<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-							<path fill="none" d="M0 0 24 24 M24 0 0 24" />
-						</svg>
-					</button>
-				</button>
-			{/each}
-			{#if newGameForm}
-				<div class="list-card active">
-					<form on:submit={addGame}>
-						<input bind:value={newGameName} />
-						<input type="submit" value="Add Game" />
-					</form>
-				</div>
-			{:else if addingNewGame}
-				<div class="list-card loading">
-					<div class="card-content">{newGameName}</div>
-				</div>
-			{:else}
-				<button
-					class="list-card"
-					on:click={() => {
-						newGameForm = true;
-					}}
-				>
-					<div class="card-content button">+</div>
-				</button>
-			{/if}
-		</List>
-		<List area="groups" listTitle="Groups">
-			{#if loadingGameData}
-				<LoadingSpinnerLocal />
-			{:else}
-				{#each Object.values(groupList) as group}
-					<button
-						class="list-card"
-						class:active={$AdminSelectedGroupStore[$AdminSelectedGameStore]
-							? $AdminSelectedGroupStore[$AdminSelectedGameStore][group.id]
-								? 'active'
-								: ''
-							: ''}
-						on:click={() => toggleActiveGroup(group.id)}
-					>
-						<div class="card-content">{group.name}</div>
-						{#if group.name !== 'N/A'}
-							<button class="delete-box" on:click={() => deleteGroup(group.id)}>
-								<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-									<path fill="none" d="M0 0 24 24 M24 0 0 24" />
-								</svg>
-							</button>
-						{/if}
+<div class="container p-12 max-h-full min-w-full">
+	<div class="max-h-full min-w-full grid grid-rows-2 grid-cols-[20%,40%,40%] frame border border-white">
+		{#if loaded}
+			<List area="games" listTitle="Games">
+				{#each Object.values(gameList) as game}
+					<button class="list-card" class:active={game.id == $AdminSelectedGameStore ? 'active' : ''} on:click={() => setActiveGame(game.id)}>
+						<div class="card-content">{game.name}</div>
+						<button class="delete-box" on:click={() => deleteGame(game.id)}>
+							<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+								<path fill="none" d="M0 0 24 24 M24 0 0 24" />
+							</svg>
+						</button>
 					</button>
 				{/each}
-				{#if newGroupForm}
+				{#if newGameForm}
 					<div class="list-card active">
-						<form on:submit={addGroup}>
-							<input bind:value={newGroupName} />
-							<input type="submit" value="Add Group" />
+						<form on:submit={addGame}>
+							<input bind:value={newGameName} />
+							<input type="submit" value="Add Game" />
 						</form>
 					</div>
-				{:else if addingNewGroup}
+				{:else if addingNewGame}
 					<div class="list-card loading">
-						<div class="card-content">{newGroupName}</div>
+						<div class="card-content">{newGameName}</div>
 					</div>
 				{:else}
 					<button
 						class="list-card"
 						on:click={() => {
-							newGroupForm = true;
+							newGameForm = true;
 						}}
 					>
 						<div class="card-content button">+</div>
 					</button>
 				{/if}
-			{/if}
-		</List>
-		<List area="empires" listTitle="Empires">
-			<div class="empires-table">
-				<div class="table-headers">
-					<div class="table-header">Empire Name</div>
-					<div class="table-header">Discord User</div>
-				</div>
-				<div class="table-content">
-					{#if loadingGameData}
-						<LoadingSpinnerLocal />
-					{:else}
-						{#each Object.values(empireList) as empire}
-							<button
-								class="list-card"
-								class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}
-								on:click={() => setActiveEmpire(empire.id)}
-							>
-								<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>{empire.name}</div>
-								<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>
-									{empire.discord_user || 'N/A'}
-								</div>
-								<button class="delete-box" on:click={() => deleteEmpire(empire)}>
+			</List>
+			<List area="groups" listTitle="Groups">
+				{#if loadingGameData}
+					<LoadingSpinnerLocal />
+				{:else}
+					{#each Object.values(groupList) as group}
+						<button
+							class="list-card"
+							class:active={$AdminSelectedGroupStore[$AdminSelectedGameStore]
+								? $AdminSelectedGroupStore[$AdminSelectedGameStore][group.id]
+									? 'active'
+									: ''
+								: ''}
+							on:click={() => toggleActiveGroup(group.id)}
+						>
+							<div class="card-content">{group.name}</div>
+							{#if group.name !== 'N/A'}
+								<button class="delete-box" on:click={() => deleteGroup(group.id)}>
 									<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 										<path fill="none" d="M0 0 24 24 M24 0 0 24" />
 									</svg>
 								</button>
-							</button>
-						{:else}
-							<div class="list-card">
-								<div class="card-content">No Empires Present</div>
-							</div>
-						{/each}
-						{#if addingNewEmpire}
-							<div class="list-card loading">
-								<div class="card-content active">{empireData.name}</div>
-								<div class="card-content active">
-									{empireData.discord_user || 'N/A'}
-								</div>
-							</div>
-						{:else}
-							<button class="list-card" on:click={addEmpire}>
-								<div class="card-content button">+</div>
-							</button>
-						{/if}
+							{/if}
+						</button>
+					{/each}
+					{#if newGroupForm}
+						<div class="list-card active">
+							<form on:submit={addGroup}>
+								<input bind:value={newGroupName} />
+								<input type="submit" value="Add Group" />
+							</form>
+						</div>
+					{:else if addingNewGroup}
+						<div class="list-card loading">
+							<div class="card-content">{newGroupName}</div>
+						</div>
+					{:else}
+						<button
+							class="list-card"
+							on:click={() => {
+								newGroupForm = true;
+							}}
+						>
+							<div class="card-content button">+</div>
+						</button>
 					{/if}
+				{/if}
+			</List>
+			<List area="empires" listTitle="Empires">
+				<div class="empires-table">
+					<div class="table-headers">
+						<div class="table-header">Empire Name</div>
+						<div class="table-header">Discord User</div>
+					</div>
+					<div class="table-content">
+						{#if loadingGameData}
+							<LoadingSpinnerLocal />
+						{:else}
+							{#each Object.values(empireList) as empire}
+								<button
+									class="list-card"
+									class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}
+									on:click={() => setActiveEmpire(empire.id)}
+								>
+									<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>{empire.name}</div>
+									<div class="card-content" class:active={empire.id == $AdminSelectedEmpireStore[$AdminSelectedGameStore] ? 'active' : ''}>
+										{empire.discord_user || 'N/A'}
+									</div>
+									<button class="delete-box" on:click={() => deleteEmpire(empire)}>
+										<svg class="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+											<path fill="none" d="M0 0 24 24 M24 0 0 24" />
+										</svg>
+									</button>
+								</button>
+							{:else}
+								<div class="list-card">
+									<div class="card-content">No Empires Present</div>
+								</div>
+							{/each}
+							{#if addingNewEmpire}
+								<div class="list-card loading">
+									<div class="card-content active">{empireData.name}</div>
+									<div class="card-content active">
+										{empireData.discord_user || 'N/A'}
+									</div>
+								</div>
+							{:else}
+								<button class="list-card" on:click={addEmpire}>
+									<div class="card-content button">+</div>
+								</button>
+							{/if}
+						{/if}
+					</div>
 				</div>
-			</div>
-		</List>
-		<List area="details" listTitle="Empire Details">
-			{#if typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] === 'undefined'}
-			 <div>
-				Select Empire
-			 </div>
-			{:else if loadingEmpireData || loadingGameData}
-				<LoadingSpinnerLocal />
-			{:else if addingNewEmpire || typeof empireData.group !== 'undefined'}
-				<EmpireDetails
-					bind:empire={empireData}
-					groups={groupList}
-					{auth}
-					bind:newEmpire={addingNewEmpire}
-					on:updated={updateGameData}
-					on:created={finishAddNewEmpire}
-				/>
-			{/if}
-		</List>
-	{:else}
-		<List area="games" listTitle="Games">
-			<LoadingSpinnerLocal />
-		</List>
-		<List area="groups" listTitle="Groups">
-			<LoadingSpinnerLocal />
-		</List>
-		<List area="empires" listTitle="Empires">
-			<div class="empires-table">
-				<div class="table-headers">
-					<div class="table-header">Empire Name</div>
-					<div class="table-header">Discord User</div>
-				</div>
-				<div class="table-content">
+			</List>
+			<List area="details" listTitle="Empire Details">
+				{#if typeof $AdminSelectedEmpireStore[$AdminSelectedGameStore] === 'undefined'}
+				 <div>
+					Select Empire
+				 </div>
+				{:else if loadingEmpireData || loadingGameData}
 					<LoadingSpinnerLocal />
+				{:else if addingNewEmpire || typeof empireData.group !== 'undefined'}
+					<EmpireDetails
+						bind:empire={empireData}
+						groups={groupList}
+						{auth}
+						bind:newEmpire={addingNewEmpire}
+						on:updated={updateGameData}
+						on:created={finishAddNewEmpire}
+					/>
+				{/if}
+			</List>
+		{:else}
+			<List area="games" listTitle="Games">
+				<LoadingSpinnerLocal />
+			</List>
+			<List area="groups" listTitle="Groups">
+				<LoadingSpinnerLocal />
+			</List>
+			<List area="empires" listTitle="Empires">
+				<div class="empires-table">
+					<div class="table-headers">
+						<div class="table-header">Empire Name</div>
+						<div class="table-header">Discord User</div>
+					</div>
+					<div class="table-content">
+						<LoadingSpinnerLocal />
+					</div>
 				</div>
-			</div>
-		</List>
-		<List area="details" listTitle="Empire Details">
-			<LoadingSpinnerLocal />
-		</List>
-	{/if}
+			</List>
+			<List area="details" listTitle="Empire Details">
+				<LoadingSpinnerLocal />
+			</List>
+		{/if}
+	</div>
 </div>
 
+
 <style>
 	.frame {
-		display: grid;
 		grid-template-areas:
 			'games empires details'
 			'groups empires details';
-		grid-template-columns: 20% 40% 40%;
-		grid-template-rows: 50% 50%;
-		max-height: calc(100%);
-		overflow: hidden;
-		margin: 3rem;
-		box-sizing: border-box;
-		border: 1px solid white;
 	}
 
 	/* General Classes */
diff --git a/src/routes/admin/EmpireDetails.svelte b/src/routes/admin/EmpireDetails.svelte
index eb3b7f9..5b78bee 100644
--- a/src/routes/admin/EmpireDetails.svelte
+++ b/src/routes/admin/EmpireDetails.svelte
@@ -182,7 +182,8 @@
 	}
 </script>
 
-{#if newEmpire && newEmpirePrepared}
+<div>
+	{#if newEmpire && newEmpirePrepared}
 	<!-- <div>
 		ID: {empire.id}
 	</div>
@@ -378,6 +379,8 @@
 
 	<button on:click={updateEmpire}>Save</button>
 {/if}
+</div>
+
 
 <style>
 </style>
diff --git a/src/routes/admin/List.svelte b/src/routes/admin/List.svelte
index ea81b05..aa6ea19 100644
--- a/src/routes/admin/List.svelte
+++ b/src/routes/admin/List.svelte
@@ -3,7 +3,7 @@
 	export let listTitle = 'List';
 </script>
 
-<div class="container" style={'--area:' + area}>
+<div class="container grid min-h-none max-h-full" style={'grid-area:' + area}>
 	<div class="header">
 		{listTitle}
 	</div>
@@ -14,15 +14,11 @@
 
 <style>
 	.container {
-		grid-area: var(--area);
-		display: grid;
 		grid-template-areas:
 			'list-header'
 			'list-content';
 		grid-template-rows: 2rem calc(100% - 2rem);
 		grid-template-columns: 100%;
-		min-height: none;
-		max-height: 100%;
 	}
 
 	.header {
diff --git a/src/routes/graphs/+layout.svelte b/src/routes/graphs/+layout.svelte
index ba7bb97..bd82165 100644
--- a/src/routes/graphs/+layout.svelte
+++ b/src/routes/graphs/+layout.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
 	import SubNav from './SubNav.svelte';
-	import '../styles.css';
+	import '../../app.postcss';
 	import { goto } from "$app/navigation";
 	import { page } from "$app/stores";
 	import GraphsTabStore from '$lib/stores/GraphsTab';
 
-  let graphsTab = "tab";
+  let graphsTab = "excel-style";
   // Tab Detection
   GraphsTabStore.subscribe(tab => {
     graphsTab = tab;