diff --git a/src/lib/components/generator.svelte b/src/lib/components/generator.svelte
new file mode 100644
index 0000000..5bf099e
--- /dev/null
+++ b/src/lib/components/generator.svelte
@@ -0,0 +1,276 @@
+<script>
+	export let chart;
+	export let roll;
+</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}
+					{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}
+					{chart.y[0]}
+				{:else}
+					(Bottom Value)
+				{/if}
+			</div>
+		</div>
+
+		<!-- Chart -->
+		<div class="chart-wrapper">
+			<svg viewBox="0 20 220 235" class="chart-svg">
+				<!-- Grid -->
+				{#each { length: 9 } as _, i}
+					<line
+						x1={40 + i * 20}
+						y1="40"
+						x2={40 + i * 20}
+						y2="220"
+						stroke="currentColor"
+						stroke-width="0.5"
+						opacity="0.2"
+					/>
+					<line
+						x1="20"
+						y1={40 + i * 20}
+						x2="200"
+						y2={40 + i * 20}
+						stroke="currentColor"
+						stroke-width="0.5"
+						opacity="0.2"
+					/>
+				{/each}
+
+				<!-- Main Axes -->
+				<line x1="20" y1="220" x2="200" y2="220" stroke="currentColor" stroke-width="2" />
+				<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" />
+
+				<!-- Axis Numbers (1-10) -->
+				{#each { length: 10 } as _, i}
+					<text
+						x={20 + i * 20}
+						y="238"
+						text-anchor="middle"
+						font-size="10"
+						fill="currentColor"
+						opacity="0.6">{i + 1}</text
+					>
+					<text
+						x="10"
+						y={224 - i * 20}
+						text-anchor="end"
+						font-size="10"
+						fill="currentColor"
+						opacity="0.6">{i + 1}</text
+					>
+				{/each}
+
+				<!-- Crosshairs (only show when roll exists) -->
+				{#if roll.x !== 0 && roll.y !== 0}
+					<line
+						x1={20 + (roll.x - 1) * 20}
+						y1="40"
+						x2={20 + (roll.x - 1) * 20}
+						y2="220"
+						stroke="currentColor"
+						stroke-width="1"
+						stroke-dasharray="3,3"
+						opacity="0.4"
+					/>
+					<line
+						x1="20"
+						y1={220 - (roll.y - 1) * 20}
+						x2="200"
+						y2={220 - (roll.y - 1) * 20}
+						stroke="currentColor"
+						stroke-width="1"
+						stroke-dasharray="3,3"
+						opacity="0.4"
+					/>
+
+					<!-- Point -->
+					<circle cx={20 + (roll.x - 1) * 20} cy={220 - (roll.y - 1) * 20} r="6" class="point" />
+				{/if}
+			</svg>
+		</div>
+	</div>
+
+	<!-- 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}
+				{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}
+				{chart.x[1]}
+			{:else}
+				(Right Value)
+			{/if}
+		</div>
+	</div>
+
+	<!-- Coordinates Display (always visible) -->
+	<div class="coordinates" class:placeholder={roll.x === 0 && roll.y === 0}>
+		{#if roll.x === 0 && roll.y === 0}
+			(X, Y)
+		{:else}
+			({roll.x}, {roll.y})
+		{/if}
+	</div>
+</div>
+
+<style>
+	.unified-chart {
+		padding-bottom: 20px;
+		min-height: 120px;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 15px;
+	}
+
+	.main-row {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		justify-content: center;
+	}
+
+	.y-axis-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 8px;
+		width: 150px;
+		flex-shrink: 0;
+	}
+
+	.y-extreme {
+		text-align: center;
+		font-weight: bold;
+		font-size: 14px;
+		line-height: 1.3;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+		hyphens: auto;
+		width: 100%;
+	}
+
+	.y-extreme.placeholder,
+	.x-extreme.placeholder {
+		opacity: 0.5;
+		font-style: italic;
+		font-weight: normal;
+	}
+
+	.y-arrow {
+		font-size: 28px;
+		opacity: 0.6;
+		flex-shrink: 0;
+	}
+
+	.x-axis-container {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 15px;
+		width: 100%;
+		max-width: 500px;
+	}
+
+	.x-extreme {
+		flex: 1;
+		text-align: center;
+		font-weight: bold;
+		font-size: 14px;
+		line-height: 1.3;
+		word-wrap: break-word;
+		overflow-wrap: break-word;
+		hyphens: auto;
+	}
+
+	.x-arrow {
+		font-size: 24px;
+		opacity: 0.6;
+		flex-shrink: 0;
+	}
+
+	.chart-wrapper {
+		display: flex;
+		justify-content: center;
+		flex: .9;
+	}
+
+	.chart-svg {
+		width: 100%;
+		max-width: 500px;
+		height: auto;
+		overflow: visible;
+	}
+
+	.coordinates {
+		font-size: 24px;
+		font-weight: bold;
+		text-align: center;
+		margin-top: 5px;
+	}
+
+	.coordinates.placeholder {
+		opacity: 0.5;
+		font-style: italic;
+		font-weight: normal;
+	}
+
+	.point {
+		fill: currentColor;
+		stroke: none;
+	}
+
+	@media (max-width: 768px) {
+		.main-row {
+			flex-direction: column;
+			gap: 10px;
+		}
+
+		.y-axis-container {
+			/* Keep vertical stacking on mobile */
+			width: 100%;
+			max-width: 500px;
+		}
+
+		.y-extreme {
+			width: 100%;
+		}
+
+		.y-extreme,
+		.x-extreme {
+			font-size: 12px;
+		}
+
+		.y-arrow,
+		.x-arrow {
+			font-size: 20px;
+		}
+
+		.coordinates {
+			font-size: 20px;
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/src/lib/styles/chalkboard.css b/src/lib/styles/chalkboard.css
new file mode 100644
index 0000000..e9afb4f
--- /dev/null
+++ b/src/lib/styles/chalkboard.css
@@ -0,0 +1,110 @@
+.theme-chalkboard {
+  font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
+  background: #1a3a1a;
+  color: #f5f5dc;
+
+  .window {
+    background: #2d4a2d;
+    border-color: #8b7355;
+    box-shadow: 
+      inset 0 0 100px rgba(0, 0, 0, 0.3),
+      0 4px 15px rgba(0, 0, 0, 0.5);
+  }
+
+  .title-bar {
+    background: #8b7355;
+    color: #f5f5dc;
+    text-align: center;
+    font-weight: bold;
+    border-bottom: 3px solid #6d5a45;
+  }
+
+  fieldset {
+    border-color: rgba(245, 245, 220, 0.5);
+    background: rgba(26, 58, 26, 0.3);
+  }
+
+  legend {
+    color: #f5f5dc;
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+
+  button {
+    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);
+    }
+  }
+
+  .chart-display,
+  .dice-display {
+    background: rgba(26, 58, 26, 0.5);
+    border-color: rgba(245, 245, 220, 0.4);
+  }
+
+  .title {
+    color: #f5f5dc;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  .subtitle {
+    color: #e8e8c8;
+  }
+
+  .tab-button {
+    background: rgba(245, 245, 220, 0.15);
+    border-color: #f5f5dc;
+    color: #f5f5dc;
+    text-transform: uppercase;
+    &:hover {
+      background: rgba(245, 245, 220, 0.25);
+      transform: translateY(-2px);
+    }
+  }
+
+  .back-button {
+    background: rgba(245, 245, 220, 0.15);
+    border-color: #f5f5dc;
+    color: #f5f5dc;
+    &:hover {
+      background: rgba(245, 245, 220, 0.25);
+    }
+  }
+
+  h1 {
+    color: #f5f5dc;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+  }
+
+  h2 {
+    color: #e8e8c8;
+    text-decoration: underline;
+  }
+
+  h3 {
+    color: #f5f5dc;
+  }
+
+  p,
+  li {
+    color: #f5f5dc;
+    line-height: 1.6;
+  }
+
+  .point {
+    fill: #ffeb3b;
+    stroke: #ffeb3b;
+  }
+
+  svg line,
+  svg text {
+    stroke: rgba(245, 245, 220, 0.7);
+    fill: rgba(245, 245, 220, 0.7);
+  }
+}
\ No newline at end of file
diff --git a/src/lib/styles/classroom.css b/src/lib/styles/classroom.css
new file mode 100644
index 0000000..5b6f8ba
--- /dev/null
+++ b/src/lib/styles/classroom.css
@@ -0,0 +1,134 @@
+.theme-classroom {
+  font-family: 'Comic Sans MS', 'Marker Felt', 'Bradley Hand', cursive;
+  background: #ffeb3b;
+  color: #333;
+
+  .window {
+    background: #ffffff;
+    border-color: #f44336;
+    box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.15);
+  }
+
+  .title-bar {
+    background: #f44336;
+    color: #fff;
+    text-align: center;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
+
+  fieldset {
+    border-color: #2196f3;
+    background: #fff;
+  }
+
+  legend {
+    color: #2196f3;
+    text-transform: uppercase;
+    font-weight: bold;
+    background: #fff;
+  }
+
+  button {
+    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);
+    }
+  }
+
+  .chart-display,
+  .dice-display {
+    background: #ffffff;
+    border-color: #2196f3;
+    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .title {
+    color: #f44336;
+    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  .subtitle {
+    color: #2196f3;
+    font-weight: bold;
+  }
+
+  .tab-button {
+    background: #2196f3;
+    border-color: #1976d2;
+    border-radius: 12px;
+    color: #fff;
+    text-transform: uppercase;
+    font-weight: bold;
+    box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
+    
+    &:hover {
+      background: #1e88e5;
+      transform: translate(-2px, -2px);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.2);
+    }
+  }
+
+  .back-button {
+    background: #ffeb3b;
+    border-color: #fbc02d;
+    border-radius: 8px;
+    color: #333;
+    font-weight: bold;
+    
+    &:hover {
+      background: #fdd835;
+      box-shadow: 0 0 10px rgba(255, 235, 59, 0.5);
+    }
+  }
+
+  h1 {
+    color: #f44336;
+    text-shadow: 4px 4px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  h2 {
+    color: #2196f3;
+  }
+
+  h3 {
+    color: #ffeb3b;
+    text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
+  }
+
+  p,
+  li {
+    color: #333;
+    font-weight: 500;
+  }
+
+  .point {
+    fill: #f44336;
+    stroke: #d32f2f;
+    filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.2));
+  }
+
+  svg line {
+    stroke: #2196f3;
+  }
+
+  svg text {
+    fill: #333;
+    font-weight: bold;
+  }
+}
\ No newline at end of file
diff --git a/src/lib/styles/cyberPunk.css b/src/lib/styles/cyberPunk.css
index 30d1f05..143659a 100644
--- a/src/lib/styles/cyberPunk.css
+++ b/src/lib/styles/cyberPunk.css
@@ -5,20 +5,19 @@
 
   .window {
     background: rgba(10, 14, 39, 0.95);
-    border: 2px solid #00ffff;
+    border-color: #00ffff;
     box-shadow: 0 0 20px #ff00ff;
   }
 
   .title-bar {
     background: linear-gradient(90deg, #ff00ff, #00ffff);
     color: #000;
-    padding: 12px;
     font-weight: bold;
     text-transform: uppercase;
   }
 
   fieldset {
-    border: 1px solid #ff00ff;
+    border-color: #ff00ff;
   }
 
   legend {
@@ -28,11 +27,10 @@
 
   button {
     background: transparent;
-    border: 2px solid #ff00ff;
+    border-color: #ff00ff;
     color: #ff00ff;
     font-family: 'Courier New', monospace;
     text-transform: uppercase;
-    padding: 10px 25px;
     &:hover {
       background: #ff00ff;
       color: #000;
@@ -42,7 +40,7 @@
   .chart-display,
   .dice-display {
     background: rgba(0, 255, 255, 0.05);
-    border: 1px solid #00ffff;
+    border-color: #00ffff;
   }
 
   .title {
@@ -56,7 +54,7 @@
 
   .tab-button {
     background: transparent;
-    border: 2px solid #ff00ff;
+    border-color: #ff00ff;
     color: #ff00ff;
     text-transform: uppercase;
     &:hover {
@@ -68,7 +66,7 @@
 
   .back-button {
     background: transparent;
-    border: 1px solid #ff00ff;
+    border-color: #ff00ff;
     color: #ff00ff;
     &:hover {
       background: #ff00ff;
@@ -99,4 +97,4 @@
     fill: #ff00ff;
     filter: drop-shadow(0 0 5px #ff00ff);
   }
-}
+}
\ No newline at end of file
diff --git a/src/lib/styles/nightmare.css b/src/lib/styles/nightmare.css
index e8b627c..c6af4dd 100644
--- a/src/lib/styles/nightmare.css
+++ b/src/lib/styles/nightmare.css
@@ -5,22 +5,20 @@
 
   .window {
     background: #0d0000;
-    border: 3px solid #8b0000;
+    border-color: #8b0000;
     box-shadow: 0 0 30px #ff0000;
   }
 
   .title-bar {
     background: linear-gradient(180deg, #3a0000, #000000);
     color: #ff0000;
-    padding: 15px;
     text-align: center;
     text-transform: uppercase;
-    letter-spacing: 5px;
     text-shadow: 0 0 10px #ff0000;
   }
 
   fieldset {
-    border: 2px solid #8b0000;
+    border-color: #8b0000;
   }
 
   legend {
@@ -30,11 +28,10 @@
 
   button {
     background: #3a0000;
-    border: 2px solid #8b0000;
+    border-color: #8b0000;
     color: #ff0000;
     font-family: 'Georgia', serif;
     text-transform: uppercase;
-    padding: 10px 25px;
     &:hover {
       background: #8b0000;
     }
@@ -43,7 +40,7 @@
   .chart-display,
   .dice-display {
     background: #000000;
-    border: 2px solid #8b0000;
+    border-color: #8b0000;
   }
 
   .title {
@@ -58,7 +55,7 @@
 
   .tab-button {
     background: #3a0000;
-    border: 2px solid #8b0000;
+    border-color: #8b0000;
     color: #ff0000;
     font-family: 'Georgia', serif;
     text-transform: uppercase;
@@ -70,7 +67,7 @@
 
   .back-button {
     background: #3a0000;
-    border: 2px solid #8b0000;
+    border-color: #8b0000;
     color: #ff0000;
     &:hover {
       background: #8b0000;
@@ -110,4 +107,4 @@
     stroke: #ff0000;
     filter: drop-shadow(0 0 10px #ff0000);
   }
-}
+}
\ No newline at end of file
diff --git a/src/lib/styles/nintendo.css b/src/lib/styles/nintendo.css
index 70a4508..6a090d2 100644
--- a/src/lib/styles/nintendo.css
+++ b/src/lib/styles/nintendo.css
@@ -1,11 +1,11 @@
 .theme-nintendo {
   font-family: 'Arial', sans-serif;
   background: #e60012;
-  color: #fff;
+  color: #a00009;
 
   .window {
     background: #fff;
-    border: 8px solid #e60012;
+    border-color: #e60012;
     border-radius: 20px;
     box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
     overflow: hidden;
@@ -14,49 +14,51 @@
   .title-bar {
     background: #e60012;
     color: #fff;
-    padding: 20px;
     text-align: center;
     font-weight: bold;
-    font-size: 24px;
-    letter-spacing: 2px;
   }
 
-
   fieldset {
-    border: 3px solid #e60012;
+    border-color: #e60012;
     border-radius: 15px;
     background: #f7f7f7;
   }
 
   legend {
     color: #e60012;
+    font-weight: bold;
+    background: #ffffff;
+    text-transform: uppercase;
+    font-size: 0.9em;
   }
 
   button {
     background: #e60012;
-    border: none;
-    border-radius: 25px;
-    color: #fff;
+    border-color: #b80010;
+    border-radius: 12px;
+    color: #ffffff;
+    font-weight: bold;
     text-transform: uppercase;
-    padding: 12px 30px;
-    box-shadow: 0 4px 0 #a00009;
+    box-shadow: 0 4px 0 #b80010;
 
     &:hover {
-      background: #ff0018;
+      background: #ff1a2e;
+      transform: translateY(-2px);
+      box-shadow: 0 6px 0 #b80010;
     }
 
     &:active {
-      box-shadow: 0 2px 0 #a00009;
       transform: translateY(2px);
+      box-shadow: 0 2px 0 #b80010;
     }
   }
 
   .chart-display,
   .dice-display {
-    background: #fff;
-    border: 3px solid #00a3e0;
-    border-radius: 10px;
-    color: #484848;
+    background: #ffffff;
+    border-color: #e0e0e0;
+    border-radius: 12px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   }
  
   .title {
@@ -64,7 +66,8 @@
   }
 
   .subtitle {
-    color: #484848;
+    color: #a00009;
+    font-weight: 600;
   }
 
   .tab-button {
@@ -90,7 +93,6 @@
     border-radius: 25px;
     color: #fff;
     box-shadow: 0 4px 0 #a00009;
-    padding: 8px 20px;
 
     &:hover {
       background: #ff0018;
@@ -124,4 +126,4 @@
     fill: #e60012;
     stroke: #e60012;
   }
-}
+}
\ No newline at end of file
diff --git a/src/lib/styles/sludge.css b/src/lib/styles/sludge.css
index bbb88db..bc5255e 100644
--- a/src/lib/styles/sludge.css
+++ b/src/lib/styles/sludge.css
@@ -5,23 +5,21 @@
 
   .window {
     background: rgba(61, 55, 42, 0.95);
-    border: 4px solid #8b8555;
+    border-color: #8b8555;
     box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.1);
   }
 
   .title-bar {
     background: linear-gradient(180deg, #8b8555 0%, #6d6750 100%);
     color: #c4b896;
-    padding: 15px;
     text-align: center;
     text-transform: uppercase;
-    letter-spacing: 4px;
     border-bottom: 3px solid rgba(0, 0, 0, 0.3);
     box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
   }
 
   fieldset {
-    border: 3px solid #8b8555;
+    border-color: #8b8555;
     background: rgba(58, 52, 38, 0.5);
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
   }
@@ -30,32 +28,25 @@
     color: #c4b896;
     text-transform: uppercase;
     background: #4a4235;
-    padding: 2px 10px;
     border: 2px solid #8b8555;
   }
 
   button {
     background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
-    border: 3px solid #8b8555;
-    border-bottom-width: 5px;
+    border-color: #8b8555;
     color: #c4b896;
     text-transform: uppercase;
-    padding: 12px 30px;
     box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
     &:hover {
       background: linear-gradient(180deg, #7a7558 0%, #6d6750 100%);
       border-color: #9a9565;
     }
-    &:active {
-      border-bottom-width: 3px;
-      transform: translateY(2px);
-    }
   }
 
   .chart-display,
   .dice-display {
     background: rgba(42, 37, 26, 0.8);
-    border: 3px solid #8b8555;
+    border-color: #8b8555;
     box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
   }
 
@@ -69,8 +60,7 @@
 
   .tab-button {
     background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
-    border: 3px solid #8b8555;
-    border-bottom-width: 5px;
+    border-color: #8b8555;
     color: #c4b896;
     text-transform: uppercase;
     box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
@@ -83,8 +73,7 @@
 
   .back-button {
     background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
-    border: 3px solid #8b8555;
-    border-bottom-width: 5px;
+    border-color: #8b8555;
     color: #c4b896;
     box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
     &:hover {
@@ -113,6 +102,5 @@
   .point {
     fill: #b5ad88;
     filter: drop-shadow(0 0 5px #b5ad88);
-    stroke-width: 3;
   }
-}
+}
\ No newline at end of file
diff --git a/src/lib/styles/themes.js b/src/lib/styles/themes.js
index 8c5fe27..b54c49d 100644
--- a/src/lib/styles/themes.js
+++ b/src/lib/styles/themes.js
@@ -1,19 +1,23 @@
-export const themeNames = ['win95', 'cyberpunk', 'typewriter', 'nightmare', 'sludge', 'nintendo'];
+export const themeNames = ['chalkboard', 'classroom', 'cyberpunk', 'nightmare', 'nintendo', 'sludge', 'typewriter', 'win95'];
 
 export const themeDisplayNames = {
-  win95: 'Win 95',
+  chalkboard: 'Chalkboard',
+  classroom: 'Classroom',
   cyberpunk: 'Cyberpunk',
-  typewriter: 'Typewriter',
   nightmare: 'Nightmare',
+  nintendo: 'Nintendo',
   sludge: 'Sludge',
-  nintendo: 'Nintendo'
+  typewriter: 'Typewriter',
+  win95: 'Win 95'
 };
 
 // Import all theme CSS files
 // These will be bundled and applied globally
-import './win95.css';
+import './chalkboard.css';
+import './classroom.css';
 import './cyberPunk.css';
-import './typewriter.css';
 import './nightmare.css';
-import './sludge.css';
 import './nintendo.css';
+import './sludge.css';
+import './typewriter.css';
+import './win95.css';
\ No newline at end of file
diff --git a/src/lib/styles/typewriter.css b/src/lib/styles/typewriter.css
index 4f9f8db..c8900c4 100644
--- a/src/lib/styles/typewriter.css
+++ b/src/lib/styles/typewriter.css
@@ -5,21 +5,20 @@
 
   .window {
     background: #fffef7;
-    border: 3px double #2c2416;
+    border-style: double;
+    border-color: #2c2416;
     box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
   }
 
   .title-bar {
     background: #2c2416;
     color: #f4e8d0;
-    padding: 12px;
     text-align: center;
     text-transform: uppercase;
-    letter-spacing: 3px;
   }
 
   fieldset {
-    border: 2px solid #2c2416;
+    border-color: #2c2416;
   }
 
   legend {
@@ -29,7 +28,7 @@
 
   button {
     background: #2c2416;
-    border: 2px solid #2c2416;
+    border-color: #2c2416;
     color: #f4e8d0;
     font-family: 'Courier', monospace;
   }
@@ -37,7 +36,7 @@
   .chart-display,
   .dice-display {
     background: #fffef7;
-    border: 1px solid #2c2416;
+    border-color: #2c2416;
   }
 
   .home-content {
@@ -55,7 +54,7 @@
 
   .tab-button {
     background: #2c2416;
-    border: 2px solid #2c2416;
+    border-color: #2c2416;
     color: #f4e8d0;
     font-family: 'Courier', monospace;
     &:hover {
@@ -66,7 +65,7 @@
   .back-button {
     background: #2c2416;
     color: #f4e8d0;
-    border: 2px solid #2c2416;
+    border-color: #2c2416;
     &:hover {
       background: #4a3a28;
     }
@@ -83,4 +82,4 @@
     fill: #2c2416;
     stroke: #2c2416;
   }
-}
+}
\ No newline at end of file
diff --git a/src/lib/styles/win95.css b/src/lib/styles/win95.css
index a9d7309..70ad5bc 100644
--- a/src/lib/styles/win95.css
+++ b/src/lib/styles/win95.css
@@ -1,43 +1,46 @@
 .theme-win95 {
   font-family: 'MS Sans Serif', Arial, sans-serif;
   background: #008080;
+  
   .window {
     background: #c0c0c0;
-    border: 2px solid;
     border-color: #dfdfdf #808080 #808080 #dfdfdf;
+    border-style: solid;
     box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
   }
 
   .title-bar {
     background: linear-gradient(to right, #000080, #1084d0);
     color: white;
-    padding: 8px;
     font-weight: bold;
   }
 
   fieldset {
-    border: 2px groove #c0c0c0;
+    border-style: groove;
+    border-color: #c0c0c0;
   }
 
   button {
     background: #c0c0c0;
-    border: 2px solid;
     border-color: #ffffff #000000 #000000 #ffffff;
+    border-style: solid;
     font-family: 'MS Sans Serif', Arial, sans-serif;
     &:active {
       border-color: #000000 #ffffff #ffffff #000000;
     }
   }
+  
   .chart-display,
   .dice-display {
     background: white;
-    border: 2px inset #808080;
+    border-style: inset;
+    border-color: #808080;
   }
 
   .tab-button {
     background: #c0c0c0;
-    border: 2px solid;
     border-color: #ffffff #000000 #000000 #ffffff;
+    border-style: solid;
     color: #000;
   }
 
@@ -51,12 +54,13 @@
 
   .back-button {
     background: rgba(255, 255, 255, 0.2);
-    border: 1px solid rgba(255, 255, 255, 0.3);
+    border-color: rgba(255, 255, 255, 0.3);
   }
 
   .back-button:hover {
     background: rgba(255, 255, 255, 0.3);
   }
+  
   h1,
   h2 {
     color: #000080;
@@ -70,4 +74,4 @@
     fill: #000080;
     stroke: #000080;
   }
-}
+}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 0eed37a..dfcb5dd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -4,7 +4,7 @@
 	import { setContext } from 'svelte';
 	import { page } from '$app/state';
 	// Create a theme store that persists across pages
-	const theme = writable('win95');
+	const theme = writable('chalkboard');
 	setContext('theme', theme);
 
 	let currentTheme;
@@ -27,6 +27,8 @@
 
 <style>
 	.back-button {
+		position: absolute;
+		left: 10px;
 		padding: 5px 15px;
 		cursor: pointer;
 		border-radius: 4px;
@@ -34,6 +36,7 @@
 		color: inherit;
 		font-weight: bold;
 		transition: all 0.2s;
+		border: 2px solid;
 	}
 
 	.app-container {
@@ -48,21 +51,23 @@
 		max-width: 55rem;
 		width: 100%;
 		margin: 0 auto;
+		border-width: 4px;
+		border-style: solid;
 	}
 
 	.title-bar {
+		position: relative;
 		display: flex;
 		align-items: center;
+		justify-content: center;
+		padding: 12px;
 		span {
 			text-align: center;
-			flex-grow: 0.75;
 		}
 	}
 
 	@media screen and (min-width: 450px) {
-		.app-container {
-			padding: 2rem;
-		}
+
 	}
 
 	:global {
@@ -75,6 +80,7 @@
 		fieldset {
 			padding: 15px;
 			margin: 15px 0;
+			border: 2px solid;
 		}
 
 		legend {
@@ -94,6 +100,27 @@
 			padding: 8px 24px;
 			cursor: pointer;
 			font-weight: bold;
+			border: 2px solid;
+		}
+
+		.tab-button {
+			border: 2px solid;
+			border-radius: 10px;
+			padding: 25px 40px;
+			font-size: 1.3rem;
+			font-weight: bold;
+			cursor: pointer;
+			transition: all 0.3s ease;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			gap: 10px;
+			min-width: 180px;
+			text-decoration: none;
+		}
+
+		.tab-icon {
+			font-size: 2.5rem;
 		}
 
 		.chart-display,
@@ -101,6 +128,7 @@
 			padding: 20px;
 			min-height: 120px;
 			margin: 15px 0;
+			border: 2px solid;
 		}
 
 		.empty-state {
@@ -109,5 +137,4 @@
 			opacity: 0.7;
 		}
 	}
-</style>
-
+</style>
\ No newline at end of file
diff --git a/src/routes/play/+page.svelte b/src/routes/play/+page.svelte
index ef404eb..199b080 100644
--- a/src/routes/play/+page.svelte
+++ b/src/routes/play/+page.svelte
@@ -1,7 +1,6 @@
 <script>
 	import { xAxes, yAxes } from '$lib';
-	import ChartDisplay from '$components/chartDisplay.svelte';
-	import DiceRoller from '$components/diceRoller.svelte';
+	import Generator from '$components/generator.svelte';
 
 	let adultMode = $state(false);
 	let currentChart = $state({ x: [''], y: [''] });
@@ -18,12 +17,15 @@
 			x: randomX.values,
 			y: randomY.values
 		};
+
+		// Reset dice roll when generating new chart
+		diceRoll = { x: 0, y: 0 };
 	}
 
 	function rollDice() {
 		diceRoll = {
-			x: Math.floor(Math.random() * 11) - 5,
-			y: Math.floor(Math.random() * 11) - 5
+			x: Math.floor(Math.random() * 10) + 1,
+			y: Math.floor(Math.random() * 10) + 1
 		};
 	}
 </script>
@@ -34,22 +36,20 @@
 
 <div class="container">
 	<fieldset>
-		<legend>Chart Generator</legend>
-		<ChartDisplay chart={currentChart} />
+		<legend>On The Spectrum</legend>
+		<Generator chart={currentChart} roll={diceRoll} />
 		<div class="button-row">
-			<button onclick={generateChart}>Generate</button>
-		</div>
-	</fieldset>
-	<fieldset>
-		<legend>Position Roller</legend>
-		<DiceRoller roll={diceRoll} />
-		<div class="button-row">
-			<button onclick={rollDice}>Roll Dice</button>
+			<button onclick={generateChart}>Generate Axes</button>
+			<button onclick={rollDice} disabled={currentChart.x.length === 1}>Roll Dice</button>
 		</div>
 	</fieldset>
 </div>
 
 <style>
+	.container {
+		padding: 1rem;
+	}
+
 	fieldset {
 		padding: 1.25rem;
 		margin: 0;
@@ -65,11 +65,19 @@
 		gap: 10px;
 		justify-content: center;
 		margin-top: 10px;
+		flex-wrap: wrap;
 	}
 
 	button {
 		padding: 0.5rem 1.75rem;
 		cursor: pointer;
 		font-weight: bold;
+		flex: 1;
+		min-width: 140px;
 	}
-</style>
+
+	button:disabled {
+		opacity: 0.5;
+		cursor: not-allowed;
+	}
+</style>
\ No newline at end of file