diff --git a/src/lib/assets/favicon.svg b/src/lib/assets/favicon.svg
index cc5dc66..d4fa1dc 100644
--- a/src/lib/assets/favicon.svg
+++ b/src/lib/assets/favicon.svg
@@ -1 +1,47 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="107" height="128" viewBox="0 0 107 128"><title>svelte-logo</title><path d="M94.157 22.819c-10.4-14.885-30.94-19.297-45.792-9.835L22.282 29.608A29.92 29.92 0 0 0 8.764 49.65a31.5 31.5 0 0 0 3.108 20.231 30 30 0 0 0-4.477 11.183 31.9 31.9 0 0 0 5.448 24.116c10.402 14.887 30.942 19.297 45.791 9.835l26.083-16.624A29.92 29.92 0 0 0 98.235 78.35a31.53 31.53 0 0 0-3.105-20.232 30 30 0 0 0 4.474-11.182 31.88 31.88 0 0 0-5.447-24.116" style="fill:#ff3e00"/><path d="M45.817 106.582a20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.503 18 18 0 0 1 .624-2.435l.49-1.498 1.337.981a33.6 33.6 0 0 0 10.203 5.098l.97.294-.09.968a5.85 5.85 0 0 0 1.052 3.878 6.24 6.24 0 0 0 6.695 2.485 5.8 5.8 0 0 0 1.603-.704L69.27 76.28a5.43 5.43 0 0 0 2.45-3.631 5.8 5.8 0 0 0-.987-4.371 6.24 6.24 0 0 0-6.698-2.487 5.7 5.7 0 0 0-1.6.704l-9.953 6.345a19 19 0 0 1-5.296 2.326 20.72 20.72 0 0 1-22.237-8.243 19.17 19.17 0 0 1-3.277-14.502 17.99 17.99 0 0 1 8.13-12.052l26.081-16.623a19 19 0 0 1 5.3-2.329 20.72 20.72 0 0 1 22.237 8.243 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-.624 2.435l-.49 1.498-1.337-.98a33.6 33.6 0 0 0-10.203-5.1l-.97-.294.09-.968a5.86 5.86 0 0 0-1.052-3.878 6.24 6.24 0 0 0-6.696-2.485 5.8 5.8 0 0 0-1.602.704L37.73 51.72a5.42 5.42 0 0 0-2.449 3.63 5.79 5.79 0 0 0 .986 4.372 6.24 6.24 0 0 0 6.698 2.486 5.8 5.8 0 0 0 1.602-.704l9.952-6.342a19 19 0 0 1 5.295-2.328 20.72 20.72 0 0 1 22.237 8.242 19.17 19.17 0 0 1 3.277 14.503 18 18 0 0 1-8.13 12.053l-26.081 16.622a19 19 0 0 1-5.3 2.328" style="fill:#fff"/></svg>
\ No newline at end of file
+<svg width="400" height="400" viewbox="0 0 400 400" xmlns="http://www.w3.org/2000/svg">
+
+			<!-- Axes -->
+			<line x1="50" y1="350" x2="350" y2="350" stroke="black" stroke-width="8" />
+			<!-- X-axis -->
+			<line x1="50" y1="350" x2="50" y2="50" stroke="black" stroke-width="8" />
+			<!-- Y-axis -->
+
+			<!-- Axis Labels -->
+			<text x="340" y="370" font-size="16" fill="black">x</text>
+			<text x="35" y="60" font-size="16" fill="black">y</text>
+
+			<!-- Tick Marks and Labels -->
+			<g font-size="12" fill="black">
+				<!-- X-axis ticks -->
+				<line x1="100" y1="345" x2="100" y2="355" stroke="black" />
+				<text x="95" y="370">1</text>
+
+				<line x1="150" y1="345" x2="150" y2="355" stroke="black" />
+				<text x="145" y="370">2</text>
+
+				<line x1="200" y1="345" x2="200" y2="355" stroke="black" />
+				<text x="195" y="370">3</text>
+
+				<line x1="250" y1="345" x2="250" y2="355" stroke="black" />
+				<text x="245" y="370">4</text>
+
+				<line x1="300" y1="345" x2="300" y2="355" stroke="black" />
+				<text x="295" y="370">5</text>
+
+				<!-- Y-axis ticks -->
+				<line x1="45" y1="300" x2="55" y2="300" stroke="black" />
+				<text x="60" y="305">1</text>
+
+				<line x1="45" y1="250" x2="55" y2="250" stroke="black" />
+				<text x="60" y="255">2</text>
+
+				<line x1="45" y1="200" x2="55" y2="200" stroke="black" />
+				<text x="60" y="205">3</text>
+
+				<line x1="45" y1="150" x2="55" y2="150" stroke="black" />
+				<text x="60" y="155">4</text>
+
+				<line x1="45" y1="100" x2="55" y2="100" stroke="black" />
+				<text x="60" y="105">5</text>
+			</g>
+		</svg>
diff --git a/src/lib/components/chartDisplay.svelte b/src/lib/components/chartDisplay.svelte
deleted file mode 100644
index f51d1c9..0000000
--- a/src/lib/components/chartDisplay.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script>
-	export let chart;
-	console.log(chart, chart.x != [''], chart.x);
-</script>
-
-<div class="chart-display">
-	{#if chart.x.length > 1}
-		<div class="axis">
-			<div class="axis-label">X-Axis (Horizontal)</div>
-			<div>{chart.x[0]} ↔ {chart.x[1]}</div>
-		</div>
-		<div class="axis">
-			<div class="axis-label">Y-Axis (Vertical)</div>
-			<div>{chart.y[0]} ↔ {chart.y[1]}</div>
-		</div>
-	{:else}
-		<div class="empty-state">Click Generate!</div>
-	{/if}
-</div>
-
-<style>
-	.axis {
-		margin: 10px 0;
-		padding: 10px;
-		border: 1px solid currentColor;
-		opacity: 0.9;
-	}
-
-	.axis-label {
-		font-weight: bold;
-		margin-bottom: 5px;
-		font-size: 11px;
-		text-transform: uppercase;
-	}
-</style>
diff --git a/src/lib/components/diceRoller.svelte b/src/lib/components/diceRoller.svelte
deleted file mode 100644
index d23d815..0000000
--- a/src/lib/components/diceRoller.svelte
+++ /dev/null
@@ -1,90 +0,0 @@
-<script>
-  export let roll;
-</script>
-
-<div class="dice-display">
-  <div class="dice-result">X: {roll.x} | Y: {roll.y}</div>
-  
-  <div class="chart-container">
-    <svg viewBox="0 0 240 240">
-      <!-- Grid -->
-      {#each {length: 11} as _, i}
-        <line x1={20 + i * 20} y1="20" x2={20 + i * 20} y2="220" stroke="currentColor" stroke-width="0.5" opacity="0.2" />
-        <line x1="20" y1={20 + i * 20} x2="220" y2={20 + i * 20} stroke="currentColor" stroke-width="0.5" opacity="0.2" />
-      {/each}
-      
-      <!-- Axes -->
-      <line x1="20" y1="220" x2="220" y2="220" stroke="currentColor" stroke-width="2" />
-      <line x1="20" y1="20" x2="20" y2="220" stroke="currentColor" stroke-width="2" />
-
-      <!-- Quadrent lines -->
-      <line x1="20" y1="120" x2="220" y2="120" stroke="currentColor" stroke-width="2" />
-      <line x1="120" y1="20" x2="120" y2="220" stroke="currentColor" stroke-width="2" />
-      
-      <!-- Numbers -->
-      {#each {length: 11} as _, i}
-        <text x={20 + i * 20} y="235" text-anchor="middle" font-size="10" fill="currentColor">{i-5}</text>
-        <text x="8" y={225 - i * 20} text-anchor="end" font-size="10" fill="currentColor">{i-5}</text>
-      {/each}
-      
-      <!-- Crosshairs -->
-      <line 
-        x1={120 + roll.x * 20} 
-        y1="20" 
-        x2={120 + roll.x * 20} 
-        y2="220" 
-        stroke="currentColor" 
-        stroke-width="1" 
-        stroke-dasharray="3,3" 
-        opacity="0.4"
-      />
-      <line 
-        x1="20" 
-        y1={120 - roll.y * 20} 
-        x2="220" 
-        y2={120 - roll.y * 20} 
-        stroke="currentColor" 
-        stroke-width="1" 
-        stroke-dasharray="3,3" 
-        opacity="0.4"
-      />
-      
-      <!-- Point -->
-      <circle 
-        cx={120 + roll.x * 20} 
-        cy={120 - roll.y * 20} 
-        r="6" 
-        class="point"
-      />
-    </svg>
-  </div>
-</div>
-
-<style>
-  .dice-result {
-    font-size: 28px;
-    font-weight: bold;
-    margin-top: 10px;
-    text-align: center;
-    margin-bottom: 20px;
-  }
-
-  .chart-container {
-    display: flex;
-    justify-content: center;
-    margin-top: 20px;
-  }
-
-  svg {
-    display: flex;
-    justify-content: center;
-    overflow: visible;
-    max-width: 75%;
-    height: auto;
-  }
-
-  .point {
-    fill: currentColor;
-    stroke: none;
-  }
-</style>
\ No newline at end of file
diff --git a/src/lib/components/generator.svelte b/src/lib/components/gameboard.svelte
similarity index 85%
rename from src/lib/components/generator.svelte
rename to src/lib/components/gameboard.svelte
index 5bf099e..39b1a88 100644
--- a/src/lib/components/generator.svelte
+++ b/src/lib/components/gameboard.svelte
@@ -1,22 +1,23 @@
 <script>
 	export let chart;
 	export let roll;
+	console.log(chart);
 </script>
 
 <div class="unified-chart">
 	<div class="main-row">
 		<!-- Y-axis vertical on left -->
 		<div class="y-axis-container">
-			<div class="y-extreme" class:placeholder={chart.x.length === 1}>
-				{#if chart.x.length > 1}
+			<div class="y-extreme" class:placeholder={chart.empty}>
+				{#if !chart.empty}
 					{chart.y[1]}
 				{:else}
 					(Top Value)
 				{/if}
 			</div>
 			<div class="y-arrow">↕</div>
-			<div class="y-extreme" class:placeholder={chart.x.length === 1}>
-				{#if chart.x.length > 1}
+			<div class="y-extreme" class:placeholder={chart.empty}>
+				{#if !chart.empty}
 					{chart.y[0]}
 				{:else}
 					(Bottom Value)
@@ -54,8 +55,24 @@
 				<line x1="20" y1="40" x2="20" y2="220" stroke="currentColor" stroke-width="2" />
 
 				<!-- Center lines (between 5 and 6) -->
-				<line x1="20" y1="130" x2="200" y2="130" stroke="currentColor" stroke-width="20" opacity="0.2" />
-				<line x1="110" y1="40" x2="110" y2="220" stroke="currentColor" stroke-width="20" opacity="0.2" />
+				<line
+					x1="20"
+					y1="130"
+					x2="200"
+					y2="130"
+					stroke="currentColor"
+					stroke-width="20"
+					opacity="0.2"
+				/>
+				<line
+					x1="110"
+					y1="40"
+					x2="110"
+					y2="220"
+					stroke="currentColor"
+					stroke-width="20"
+					opacity="0.2"
+				/>
 
 				<!-- Axis Numbers (1-10) -->
 				{#each { length: 10 } as _, i}
@@ -78,7 +95,7 @@
 				{/each}
 
 				<!-- Crosshairs (only show when roll exists) -->
-				{#if roll.x !== 0 && roll.y !== 0}
+				{#if !roll.empty}
 					<line
 						x1={20 + (roll.x - 1) * 20}
 						y1="40"
@@ -109,16 +126,16 @@
 
 	<!-- X-axis horizontal below chart (always visible) -->
 	<div class="x-axis-container">
-		<div class="x-extreme" class:placeholder={chart.x.length === 1}>
-			{#if chart.x.length > 1}
+		<div class="x-extreme" class:placeholder={chart.empty}>
+			{#if !chart.empty}
 				{chart.x[0]}
 			{:else}
 				(Left Value)
 			{/if}
 		</div>
 		<div class="x-arrow">↔</div>
-		<div class="x-extreme" class:placeholder={chart.x.length === 1}>
-			{#if chart.x.length > 1}
+		<div class="x-extreme" class:placeholder={chart.empty}>
+			{#if !chart.empty}
 				{chart.x[1]}
 			{:else}
 				(Right Value)
@@ -127,8 +144,8 @@
 	</div>
 
 	<!-- Coordinates Display (always visible) -->
-	<div class="coordinates" class:placeholder={roll.x === 0 && roll.y === 0}>
-		{#if roll.x === 0 && roll.y === 0}
+	<div class="coordinates" class:placeholder={roll.empty}>
+		{#if roll.empty}
 			(X, Y)
 		{:else}
 			({roll.x}, {roll.y})
@@ -215,7 +232,7 @@
 	.chart-wrapper {
 		display: flex;
 		justify-content: center;
-		flex: .9;
+		flex: 0.9;
 	}
 
 	.chart-svg {
@@ -273,4 +290,5 @@
 			font-size: 20px;
 		}
 	}
-</style>
\ No newline at end of file
+</style>
+
diff --git a/src/lib/components/themeSelector.svelte b/src/lib/components/themeSelector.svelte
index 9dda69e..b2c55e4 100644
--- a/src/lib/components/themeSelector.svelte
+++ b/src/lib/components/themeSelector.svelte
@@ -25,6 +25,39 @@
 			width: 45%;
 		}
 	}
+
+	.theme-chalkboard {
+		background: rgba(245, 245, 220, 0.15);
+		border-color: #f5f5dc;
+		color: #f5f5dc;
+		font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
+		text-transform: uppercase;
+		&:hover {
+			background: rgba(245, 245, 220, 0.25);
+			box-shadow: 0 0 10px rgba(245, 245, 220, 0.3);
+		}
+	}
+	.theme-classroom {
+		background: #f44336;
+		border-color: #d32f2f;
+		border-radius: 12px;
+		color: #fff;
+		font-family: 'Comic Sans MS', cursive;
+		text-transform: uppercase;
+		font-weight: bold;
+		box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
+
+		&:hover {
+			background: #e53935;
+			transform: translate(-2px, -2px);
+			box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.2);
+		}
+
+		&:active {
+			transform: translate(2px, 2px);
+			box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
+		}
+	}
 	.theme-cyberpunk {
 		background: transparent;
 		border: 2px solid #ff00ff;
diff --git a/src/lib/styles/classroom.css b/src/lib/styles/classroom.css
index 5b6f8ba..09c447f 100644
--- a/src/lib/styles/classroom.css
+++ b/src/lib/styles/classroom.css
@@ -131,4 +131,4 @@
     fill: #333;
     font-weight: bold;
   }
-}
\ No newline at end of file
+}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index dfcb5dd..5304fc2 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import '$lib/styles/themes.js';
+	import favicon from '$lib/assets/favicon.svg';
 	import { writable } from 'svelte/store';
 	import { setContext } from 'svelte';
 	import { page } from '$app/state';
@@ -13,6 +14,11 @@
 	});
 </script>
 
+<svelte:head>
+	<link rel="icon" href="$lib/assests/favicon.ico" sizes="any" />
+	<link rel="icon" href={favicon} type="image/svg+xml" />
+</svelte:head>
+
 <div class="theme-{currentTheme} app-container">
 	<div class="window">
 		<div class="title-bar">
@@ -67,7 +73,6 @@
 	}
 
 	@media screen and (min-width: 450px) {
-
 	}
 
 	:global {
@@ -137,4 +142,5 @@
 			opacity: 0.7;
 		}
 	}
-</style>
\ No newline at end of file
+</style>
+
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 8f9bd66..2526f76 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -11,6 +11,7 @@
 <svelte:head>
 	<title>On the Spectrum</title>
 </svelte:head>
+
 <div class="home-content">
 	<h1 class="title">On the Spectrum!</h1>
 	<p class="subtitle">Well.. are ya?</p>
diff --git a/src/routes/play/+page.svelte b/src/routes/play/+page.svelte
index 199b080..a3adb79 100644
--- a/src/routes/play/+page.svelte
+++ b/src/routes/play/+page.svelte
@@ -1,10 +1,10 @@
 <script>
 	import { xAxes, yAxes } from '$lib';
-	import Generator from '$components/generator.svelte';
+	import Gameboard from '$components/gameboard.svelte';
 
 	let adultMode = $state(false);
-	let currentChart = $state({ x: [''], y: [''] });
-	let diceRoll = $state({ x: 0, y: 0 });
+	let currentChart = $state({ x: [''], y: [''], empty: true });
+	let diceRoll = $state({ x: 0, y: 0, empty: true });
 
 	function generateChart() {
 		const availableXAxes = adultMode ? xAxes : xAxes.filter((axis) => !axis.adult);
@@ -15,19 +15,22 @@
 
 		currentChart = {
 			x: randomX.values,
-			y: randomY.values
+			y: randomY.values,
+			empty: false
 		};
 
 		// Reset dice roll when generating new chart
-		diceRoll = { x: 0, y: 0 };
+		diceRoll = { x: 0, y: 0, empty: true };
 	}
 
 	function rollDice() {
 		diceRoll = {
 			x: Math.floor(Math.random() * 10) + 1,
-			y: Math.floor(Math.random() * 10) + 1
+			y: Math.floor(Math.random() * 10) + 1,
+			empty: false
 		};
 	}
+	// $inspect(currentChart, diceRoll);
 </script>
 
 <svelte:head>
@@ -37,10 +40,10 @@
 <div class="container">
 	<fieldset>
 		<legend>On The Spectrum</legend>
-		<Generator chart={currentChart} roll={diceRoll} />
+		<Gameboard chart={currentChart} roll={diceRoll} />
 		<div class="button-row">
 			<button onclick={generateChart}>Generate Axes</button>
-			<button onclick={rollDice} disabled={currentChart.x.length === 1}>Roll Dice</button>
+			<button onclick={rollDice} disabled={currentChart.empty}>Roll Dice</button>
 		</div>
 	</fieldset>
 </div>
@@ -80,4 +83,5 @@
 		opacity: 0.5;
 		cursor: not-allowed;
 	}
-</style>
\ No newline at end of file
+</style>
+