diff --git a/.gitignore b/.gitignore
index 3b462cb..ad4315b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@ node_modules
 .wrangler
 /.svelte-kit
 /build
+*.zip
 
 # OS
 .DS_Store
diff --git a/bun.lock b/bun.lock
index fbe6087..ae5e6f2 100644
--- a/bun.lock
+++ b/bun.lock
@@ -1,11 +1,11 @@
 {
   "lockfileVersion": 1,
-  "configVersion": 0,
   "workspaces": {
     "": {
       "name": "on-the-spectrum",
       "devDependencies": {
         "@sveltejs/adapter-auto": "^7.0.0",
+        "@sveltejs/adapter-static": "^3.0.10",
         "@sveltejs/kit": "^2.48.5",
         "@sveltejs/vite-plugin-svelte": "^6.2.1",
         "prettier": "^3.6.2",
@@ -132,6 +132,8 @@
 
     "@sveltejs/adapter-auto": ["@sveltejs/adapter-auto@7.0.0", "", { "peerDependencies": { "@sveltejs/kit": "^2.0.0" } }, "sha512-ImDWaErTOCkRS4Gt+5gZuymKFBobnhChXUZ9lhUZLahUgvA4OOvRzi3sahzYgbxGj5nkA6OV0GAW378+dl/gyw=="],
 
+    "@sveltejs/adapter-static": ["@sveltejs/adapter-static@3.0.10", "", { "peerDependencies": { "@sveltejs/kit": "^2.0.0" } }, "sha512-7D9lYFWJmB7zxZyTE/qxjksvMqzMuYrrsyh1f4AlZqeZeACPRySjbC3aFiY55wb1tWUaKOQG9PVbm74JcN2Iew=="],
+
     "@sveltejs/kit": ["@sveltejs/kit@2.49.1", "", { "dependencies": { "@standard-schema/spec": "^1.0.0", "@sveltejs/acorn-typescript": "^1.0.5", "@types/cookie": "^0.6.0", "acorn": "^8.14.1", "cookie": "^0.6.0", "devalue": "^5.3.2", "esm-env": "^1.2.2", "kleur": "^4.1.5", "magic-string": "^0.30.5", "mrmime": "^2.0.0", "sade": "^1.8.1", "set-cookie-parser": "^2.6.0", "sirv": "^3.0.0" }, "peerDependencies": { "@opentelemetry/api": "^1.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0 || ^4.0.0-next.1 || ^5.0.0 || ^6.0.0-next.0", "svelte": "^4.0.0 || ^5.0.0-next.0", "vite": "^5.0.3 || ^6.0.0 || ^7.0.0-beta.0" }, "optionalPeers": ["@opentelemetry/api"], "bin": { "svelte-kit": "svelte-kit.js" } }, "sha512-vByReCTTdlNM80vva8alAQC80HcOiHLkd8XAxIiKghKSHcqeNfyhp3VsYAV8VSiPKu4Jc8wWCfsZNAIvd1uCqA=="],
 
     "@sveltejs/vite-plugin-svelte": ["@sveltejs/vite-plugin-svelte@6.2.1", "", { "dependencies": { "@sveltejs/vite-plugin-svelte-inspector": "^5.0.0", "debug": "^4.4.1", "deepmerge": "^4.3.1", "magic-string": "^0.30.17", "vitefu": "^1.1.1" }, "peerDependencies": { "svelte": "^5.0.0", "vite": "^6.3.0 || ^7.0.0" } }, "sha512-YZs/OSKOQAQCnJvM/P+F1URotNnYNeU3P2s4oIpzm1uFaqUEqRxUB0g5ejMjEb5Gjb9/PiBI5Ktrq4rUUF8UVQ=="],
diff --git a/src/lib/components/chartDisplay.svelte b/src/lib/components/chartDisplay.svelte
index b800e77..f51d1c9 100644
--- a/src/lib/components/chartDisplay.svelte
+++ b/src/lib/components/chartDisplay.svelte
@@ -18,3 +18,18 @@
 	{/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/themeSelector.svelte b/src/lib/components/themeSelector.svelte
index 1b8bd66..cce6d79 100644
--- a/src/lib/components/themeSelector.svelte
+++ b/src/lib/components/themeSelector.svelte
@@ -17,9 +17,13 @@
 		gap: 1rem;
 		justify-content: center;
 		flex-wrap: wrap;
+		button {
+			width: 45%;
+		}
+	}
+	@media screen and (min-width: 450px) {
 		button {
 			width: 25%;
 		}
 	}
 </style>
-
diff --git a/src/lib/components/toggle.svelte b/src/lib/components/toggle.svelte
deleted file mode 100644
index e5a4671..0000000
--- a/src/lib/components/toggle.svelte
+++ /dev/null
@@ -1,58 +0,0 @@
-<!-- <script>
-  export let checked = false;
-</script>
-
-<div class="toggle-container">
-  <span>Family Friendly</span>
-  <div 
-    class="toggle-switch"
-    class:active={checked}
-    on:click={() => checked = !checked}
-    on:keypress={(e) => e.key === 'Enter' && (checked = !checked)}
-    role="switch"
-    aria-checked={checked}
-    tabindex="0"
-  >
-    <div class="toggle-slider"></div>
-  </div>
-  <span>Adult</span>
-</div>
-
-<style>
-  .toggle-container {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    justify-content: center;
-    margin: 10px 0;
-  }
-
-  .toggle-switch {
-    position: relative;
-    width: 50px;
-    height: 24px;
-    background: #ccc;
-    border-radius: 12px;
-    cursor: pointer;
-    transition: background 0.3s;
-  }
-
-  .toggle-switch.active {
-    background: #ff6b6b;
-  }
-
-  .toggle-slider {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 20px;
-    height: 20px;
-    background: white;
-    border-radius: 50%;
-    transition: transform 0.3s;
-  }
-
-  .toggle-switch.active .toggle-slider {
-    transform: translateX(26px);
-  }
-</style> -->
\ No newline at end of file
diff --git a/src/lib/styles/cyberPunk.css b/src/lib/styles/cyberPunk.css
index 66965fc..30d1f05 100644
--- a/src/lib/styles/cyberPunk.css
+++ b/src/lib/styles/cyberPunk.css
@@ -2,140 +2,101 @@
   font-family: 'Courier New', monospace;
   background: #0a0e27;
   color: #00ffff;
-}
 
-.theme-cyberpunk .window {
-  background: rgba(10, 14, 39, 0.95);
-  border: 2px solid #00ffff;
-  box-shadow: 0 0 20px #ff00ff;
-}
+  .window {
+    background: rgba(10, 14, 39, 0.95);
+    border: 2px solid #00ffff;
+    box-shadow: 0 0 20px #ff00ff;
+  }
 
-.theme-cyberpunk .title-bar {
-  background: linear-gradient(90deg, #ff00ff, #00ffff);
-  color: #000;
-  padding: 12px;
-  font-weight: bold;
-  text-transform: uppercase;
-}
+  .title-bar {
+    background: linear-gradient(90deg, #ff00ff, #00ffff);
+    color: #000;
+    padding: 12px;
+    font-weight: bold;
+    text-transform: uppercase;
+  }
 
-.theme-cyberpunk fieldset {
-  border: 1px solid #ff00ff;
-}
+  fieldset {
+    border: 1px solid #ff00ff;
+  }
 
-.theme-cyberpunk legend {
-  color: #ff00ff;
-  text-transform: uppercase;
-}
+  legend {
+    color: #ff00ff;
+    text-transform: uppercase;
+  }
 
-.theme-cyberpunk button {
-  background: transparent;
-  border: 2px solid #ff00ff;
-  color: #ff00ff;
-  font-family: 'Courier New', monospace;
-  text-transform: uppercase;
-  padding: 10px 25px;
-}
+  button {
+    background: transparent;
+    border: 2px solid #ff00ff;
+    color: #ff00ff;
+    font-family: 'Courier New', monospace;
+    text-transform: uppercase;
+    padding: 10px 25px;
+    &:hover {
+      background: #ff00ff;
+      color: #000;
+    }
+  }
 
-.theme-cyberpunk button:hover {
-  background: #ff00ff;
-  color: #000;
-}
+  .chart-display,
+  .dice-display {
+    background: rgba(0, 255, 255, 0.05);
+    border: 1px solid #00ffff;
+  }
 
-.theme-cyberpunk .chart-display,
-.theme-cyberpunk .dice-display {
-  background: rgba(0, 255, 255, 0.05);
-  border: 1px solid #00ffff;
-}
+  .title {
+    color: #00ffff;
+    text-shadow: 0 0 20px #00ffff;
+  }
 
-/* Home Page Styles */
-.theme-cyberpunk .home-wrapper {
-  background: #0a0e27;
-  color: #00ffff;
-}
+  .subtitle {
+    color: #ff00ff;
+  }
 
-.theme-cyberpunk .home-window {
-  background: rgba(10, 14, 39, 0.95);
-  border: 2px solid #00ffff;
-  box-shadow: 0 0 30px #ff00ff;
-}
+  .tab-button {
+    background: transparent;
+    border: 2px solid #ff00ff;
+    color: #ff00ff;
+    text-transform: uppercase;
+    &:hover {
+      background: #ff00ff;
+      color: #000;
+      box-shadow: 0 0 20px #ff00ff;
+    }
+  }
 
-.theme-cyberpunk .home-title-bar {
-  background: linear-gradient(90deg, #ff00ff, #00ffff);
-  color: #000;
-  padding: 12px;
-  font-weight: bold;
-  text-transform: uppercase;
-  text-align: center;
-  letter-spacing: 3px;
-}
+  .back-button {
+    background: transparent;
+    border: 1px solid #ff00ff;
+    color: #ff00ff;
+    &:hover {
+      background: #ff00ff;
+      color: #000;
+    }
+  }
 
-.theme-cyberpunk .home-content {
-  background: rgba(10, 14, 39, 0.5);
-}
+  h1 {
+    color: #00ffff;
+    text-shadow: 0 0 20px #00ffff;
+  }
 
-.theme-cyberpunk .title {
-  color: #00ffff;
-  text-shadow: 0 0 20px #00ffff;
-}
+  h2 {
+    color: #ff00ff;
+    text-shadow: 0 0 15px #ff00ff;
+  }
 
-.theme-cyberpunk .subtitle {
-  color: #ff00ff;
-}
+  h3 {
+    color: #00ffff;
+  }
 
-.theme-cyberpunk .tab-button {
-  background: transparent;
-  border: 2px solid #ff00ff;
-  color: #ff00ff;
-  text-transform: uppercase;
-}
+  p,
+  li {
+    color: #00ffff;
+  }
 
-.theme-cyberpunk .tab-button:hover {
-  background: #ff00ff;
-  color: #000;
-  box-shadow: 0 0 20px #ff00ff;
+  .point {
+    fill: #ff00ff;
+    filter: drop-shadow(0 0 5px #ff00ff);
+  }
 }
-
-/* Rules Page Styles */
-.theme-cyberpunk .rules-wrapper {
-  background: #0a0e27;
-  color: #00ffff;
-}
-
-.theme-cyberpunk .back-button {
-  background: transparent;
-  border: 1px solid #ff00ff;
-  color: #ff00ff;
-}
-
-.theme-cyberpunk .back-button:hover {
-  background: #ff00ff;
-  color: #000;
-}
-
-.theme-cyberpunk .rules-content {
-  color: #00ffff;
-}
-
-.theme-cyberpunk h1 {
-  color: #00ffff;
-  text-shadow: 0 0 20px #00ffff;
-}
-
-.theme-cyberpunk h2 {
-  color: #ff00ff;
-  text-shadow: 0 0 15px #ff00ff;
-}
-
-.theme-cyberpunk h3 {
-  color: #00ffff;
-}
-
-.theme-cyberpunk p,
-.theme-cyberpunk li {
-  color: #00ffff;
-}
-
-:global(.theme-cyberpunk) .point {
-  fill: #ff00ff;
-  filter: drop-shadow(0 0 5px #ff00ff);
-}
\ No newline at end of file
diff --git a/src/lib/styles/general.css b/src/lib/styles/general.css
deleted file mode 100644
index 7433606..0000000
--- a/src/lib/styles/general.css
+++ /dev/null
@@ -1,87 +0,0 @@
-/* Base styles that apply to all themes */
-.container {
-  padding: 2rem;
-}
-
-.window {
-  max-width: 800px;
-  margin: 0 auto;
-}
-
-.window-body {
-  padding: 20px;
-}
-
-.title-bar {
-  display: flex;
-  align-items: center;
-  span{
-    text-align: center; 
-    flex-grow: .75;
-  }
-}
-
-.home-button {
-  background: rgba(255, 255, 255, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  color: inherit;
-  padding: 5px 10px;
-  cursor: pointer;
-  border-radius: 4px;
-  font-size: 14px;
-}
-
-.home-button:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-fieldset {
-  padding: 15px;
-  margin: 15px 0;
-}
-
-legend {
-  font-weight: bold;
-  padding: 0 5px;
-}
-
-.button-row {
-  display: flex;
-  gap: 10px;
-  justify-content: center;
-  margin-top: 10px;
-  flex-wrap: wrap;
-}
-
-button {
-  padding: 8px 24px;
-  cursor: pointer;
-  font-weight: bold;
-}
-
-.chart-display,
-.dice-display {
-  padding: 20px;
-  min-height: 120px;
-  margin: 15px 0;
-}
-
-.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;
-}
-
-.empty-state {
-  font-style: italic;
-  text-align: center;
-  opacity: 0.7;
-}
diff --git a/src/lib/styles/nightmare.css b/src/lib/styles/nightmare.css
index 14dfffc..e8b627c 100644
--- a/src/lib/styles/nightmare.css
+++ b/src/lib/styles/nightmare.css
@@ -2,149 +2,112 @@
   font-family: 'Georgia', serif;
   background: #000000;
   color: #8b0000;
-}
 
-.theme-nightmare .window {
-  background: #0d0000;
-  border: 3px solid #8b0000;
-  box-shadow: 0 0 30px #ff0000;
-}
+  .window {
+    background: #0d0000;
+    border: 3px solid #8b0000;
+    box-shadow: 0 0 30px #ff0000;
+  }
 
-.theme-nightmare .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;
-}
+  .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;
+  }
 
-.theme-nightmare fieldset {
-  border: 2px solid #8b0000;
-}
+  fieldset {
+    border: 2px solid #8b0000;
+  }
 
-.theme-nightmare legend {
-  color: #ff0000;
-  text-shadow: 0 0 5px #ff0000;
-}
+  legend {
+    color: #ff0000;
+    text-shadow: 0 0 5px #ff0000;
+  }
 
-.theme-nightmare button {
-  background: #3a0000;
-  border: 2px solid #8b0000;
-  color: #ff0000;
-  font-family: 'Georgia', serif;
-  text-transform: uppercase;
-  padding: 10px 25px;
-}
+  button {
+    background: #3a0000;
+    border: 2px solid #8b0000;
+    color: #ff0000;
+    font-family: 'Georgia', serif;
+    text-transform: uppercase;
+    padding: 10px 25px;
+    &:hover {
+      background: #8b0000;
+    }
+  }
 
-.theme-nightmare button:hover {
-  background: #8b0000;
-}
+  .chart-display,
+  .dice-display {
+    background: #000000;
+    border: 2px solid #8b0000;
+  }
 
-.theme-nightmare .chart-display,
-.theme-nightmare .dice-display {
-  background: #000000;
-  border: 2px solid #8b0000;
-}
+  .title {
+    color: #ff0000;
+    text-shadow: 0 0 15px #ff0000;
+  }
 
-/* Home Page Styles */
-.theme-nightmare .home-wrapper {
-  background: #000000;
-  color: #8b0000;
-}
+  .subtitle {
+    color: #cc0000;
+    text-shadow: 0 0 10px #cc0000;
+  }
 
-.theme-nightmare .home-window {
-  background: #0d0000;
-  border: 3px solid #8b0000;
-  box-shadow: 0 0 30px #ff0000;
-}
+  .tab-button {
+    background: #3a0000;
+    border: 2px solid #8b0000;
+    color: #ff0000;
+    font-family: 'Georgia', serif;
+    text-transform: uppercase;
+    &:hover {
+      background: #8b0000;
+      box-shadow: 0 0 20px #ff0000;
+    }
+  }
 
-.theme-nightmare .home-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;
-  font-family: 'Georgia', serif;
-}
+  .back-button {
+    background: #3a0000;
+    border: 2px solid #8b0000;
+    color: #ff0000;
+    &:hover {
+      background: #8b0000;
+      box-shadow: 0 0 15px #ff0000;
+    }
+  }
 
-.theme-nightmare .home-content {
-  background: #0d0000;
-  font-family: 'Georgia', serif;
-}
+  .rules-content {
+    color: #8b0000;
+    font-family: 'Georgia', serif;
+  }
 
-.theme-nightmare .title {
-  color: #ff0000;
-  text-shadow: 0 0 15px #ff0000;
-}
+  h1 {
+    color: #ff0000;
+    text-shadow: 0 0 15px #ff0000;
+    font-family: 'Georgia', serif;
+  }
 
-.theme-nightmare .subtitle {
-  color: #cc0000;
-  text-shadow: 0 0 10px #cc0000;
-}
+  h2 {
+    color: #cc0000;
+    text-shadow: 0 0 10px #cc0000;
+    font-family: 'Georgia', serif;
+  }
 
-.theme-nightmare .tab-button {
-  background: #3a0000;
-  border: 2px solid #8b0000;
-  color: #ff0000;
-  font-family: 'Georgia', serif;
-  text-transform: uppercase;
-}
+  h3 {
+    color: #ff0000;
+    font-family: 'Georgia', serif;
+  }
 
-.theme-nightmare .tab-button:hover {
-  background: #8b0000;
-  box-shadow: 0 0 20px #ff0000;
-}
+  p,
+  li {
+    color: #8b0000;
+  }
 
-/* Rules Page Styles */
-.theme-nightmare .rules-wrapper {
-  background: #000000;
-  color: #8b0000;
+  .point {
+    fill: #ff0000;
+    stroke: #ff0000;
+    filter: drop-shadow(0 0 10px #ff0000);
+  }
 }
-
-.theme-nightmare .back-button {
-  background: #3a0000;
-  border: 2px solid #8b0000;
-  color: #ff0000;
-}
-
-.theme-nightmare .back-button:hover {
-  background: #8b0000;
-  box-shadow: 0 0 15px #ff0000;
-}
-
-.theme-nightmare .rules-content {
-  color: #8b0000;
-  font-family: 'Georgia', serif;
-}
-
-.theme-nightmare h1 {
-  color: #ff0000;
-  text-shadow: 0 0 15px #ff0000;
-  font-family: 'Georgia', serif;
-}
-
-.theme-nightmare h2 {
-  color: #cc0000;
-  text-shadow: 0 0 10px #cc0000;
-  font-family: 'Georgia', serif;
-}
-
-.theme-nightmare h3 {
-  color: #ff0000;
-  font-family: 'Georgia', serif;
-}
-
-.theme-nightmare p,
-.theme-nightmare li {
-  color: #8b0000;
-}
-
-:global(.theme-nightmare) .point {
-  fill: #ff0000;
-  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 b2b2413..70a4508 100644
--- a/src/lib/styles/nintendo.css
+++ b/src/lib/styles/nintendo.css
@@ -2,170 +2,126 @@
   font-family: 'Arial', sans-serif;
   background: #e60012;
   color: #fff;
-}
 
-.theme-nintendo .window {
-  background: #fff;
-  border: 8px solid #e60012;
-  border-radius: 20px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-}
+  .window {
+    background: #fff;
+    border: 8px solid #e60012;
+    border-radius: 20px;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
+    overflow: hidden;
+  }
 
-.theme-nintendo .title-bar {
-  background: #e60012;
-  color: #fff;
-  padding: 20px;
-  text-align: center;
-  font-weight: bold;
-  font-size: 24px;
-  letter-spacing: 2px;
-}
+  .title-bar {
+    background: #e60012;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 24px;
+    letter-spacing: 2px;
+  }
 
-.theme-nintendo .window-body {
-  color: #484848;
-}
 
-.theme-nintendo fieldset {
-  border: 3px solid #e60012;
-  border-radius: 15px;
-  background: #f7f7f7;
-}
+  fieldset {
+    border: 3px solid #e60012;
+    border-radius: 15px;
+    background: #f7f7f7;
+  }
 
-.theme-nintendo legend {
-  color: #e60012;
-}
+  legend {
+    color: #e60012;
+  }
 
-.theme-nintendo button {
-  background: #e60012;
-  border: none;
-  border-radius: 25px;
-  color: #fff;
-  text-transform: uppercase;
-  padding: 12px 30px;
-  box-shadow: 0 4px 0 #a00009;
-}
+  button {
+    background: #e60012;
+    border: none;
+    border-radius: 25px;
+    color: #fff;
+    text-transform: uppercase;
+    padding: 12px 30px;
+    box-shadow: 0 4px 0 #a00009;
 
-.theme-nintendo button:hover {
-  background: #ff0018;
-}
+    &:hover {
+      background: #ff0018;
+    }
 
-.theme-nintendo button:active {
-  box-shadow: 0 2px 0 #a00009;
-  transform: translateY(2px);
-}
+    &:active {
+      box-shadow: 0 2px 0 #a00009;
+      transform: translateY(2px);
+    }
+  }
 
-.theme-nintendo .chart-display,
-.theme-nintendo .dice-display {
-  background: #fff;
-  border: 3px solid #00a3e0;
-  border-radius: 10px;
-  color: #484848;
-}
+  .chart-display,
+  .dice-display {
+    background: #fff;
+    border: 3px solid #00a3e0;
+    border-radius: 10px;
+    color: #484848;
+  }
+ 
+  .title {
+    color: #e60012;
+  }
 
-/* Home Page Styles */
-.theme-nintendo .home-wrapper {
-  background: #e60012;
-  color: #fff;
-}
+  .subtitle {
+    color: #484848;
+  }
 
-.theme-nintendo .home-window {
-  background: #fff;
-  border: 8px solid #e60012;
-  border-radius: 20px;
-  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
-  overflow: hidden;
-}
+  .tab-button {
+    background: #e60012;
+    border: none;
+    border-radius: 25px;
+    color: #fff;
+    text-transform: uppercase;
+    box-shadow: 0 4px 0 #a00009;
+    &:hover {
+      background: #ff0018;
+      transform: translateY(-2px);
+    }
+    &:active {
+      box-shadow: 0 2px 0 #a00009;
+      transform: translateY(2px);
+    }
+  }
 
-.theme-nintendo .home-title-bar {
-  background: #e60012;
-  color: #fff;
-  padding: 20px;
-  text-align: center;
-  font-weight: bold;
-  font-size: 24px;
-  letter-spacing: 2px;
-}
+  .back-button {
+    background: #e60012;
+    border: none;
+    border-radius: 25px;
+    color: #fff;
+    box-shadow: 0 4px 0 #a00009;
+    padding: 8px 20px;
 
-.theme-nintendo .home-content {
-  background: #fff;
-  color: #484848;
-}
+    &:hover {
+      background: #ff0018;
+      transform: translateY(-2px);
+    }
 
-.theme-nintendo .title {
-  color: #e60012;
-}
+    &:active {
+      box-shadow: 0 2px 0 #a00009;
+      transform: translateY(2px);
+    }
+  }
 
-.theme-nintendo .subtitle {
-  color: #484848;
-}
+  h1 {
+    color: #e60012;
+  }
 
-.theme-nintendo .tab-button {
-  background: #e60012;
-  border: none;
-  border-radius: 25px;
-  color: #fff;
-  text-transform: uppercase;
-  box-shadow: 0 4px 0 #a00009;
-}
+  h2 {
+    color: #e60012;
+  }
 
-.theme-nintendo .tab-button:hover {
-  background: #ff0018;
-  transform: translateY(-2px);
-}
+  h3 {
+    color: #00a3e0;
+  }
 
-.theme-nintendo .tab-button:active {
-  box-shadow: 0 2px 0 #a00009;
-  transform: translateY(2px);
-}
+  p,
+  li {
+    color: #484848;
+  }
 
-/* Rules Page Styles */
-.theme-nintendo .rules-wrapper {
-  background: #e60012;
-  color: #fff;
+  .point {
+    fill: #e60012;
+    stroke: #e60012;
+  }
 }
-
-.theme-nintendo .back-button {
-  background: #e60012;
-  border: none;
-  border-radius: 25px;
-  color: #fff;
-  box-shadow: 0 4px 0 #a00009;
-  padding: 8px 20px;
-}
-
-.theme-nintendo .back-button:hover {
-  background: #ff0018;
-  transform: translateY(-2px);
-}
-
-.theme-nintendo .back-button:active {
-  box-shadow: 0 2px 0 #a00009;
-  transform: translateY(2px);
-}
-
-.theme-nintendo .rules-content {
-  color: #484848;
-}
-
-.theme-nintendo h1 {
-  color: #e60012;
-}
-
-.theme-nintendo h2 {
-  color: #e60012;
-}
-
-.theme-nintendo h3 {
-  color: #00a3e0;
-}
-
-.theme-nintendo p,
-.theme-nintendo li {
-  color: #484848;
-}
-
-:global(.theme-nintendo) .point {
-  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 4f800ad..bbb88db 100644
--- a/src/lib/styles/sludge.css
+++ b/src/lib/styles/sludge.css
@@ -2,158 +2,117 @@
   font-family: 'Arial', sans-serif;
   background: linear-gradient(180deg, #2a251a 0%, #3d372a 50%, #4a4235 100%);
   color: #c4b896;
-}
 
-.theme-sludge .window {
-  background: rgba(61, 55, 42, 0.95);
-  border: 4px solid #8b8555;
-  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.1);
-}
+  .window {
+    background: rgba(61, 55, 42, 0.95);
+    border: 4px solid #8b8555;
+    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.1);
+  }
 
-.theme-sludge .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);
-}
+  .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);
+  }
 
-.theme-sludge fieldset {
-  border: 3px solid #8b8555;
-  background: rgba(58, 52, 38, 0.5);
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
-}
+  fieldset {
+    border: 3px solid #8b8555;
+    background: rgba(58, 52, 38, 0.5);
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+  }
 
-.theme-sludge legend {
-  color: #c4b896;
-  text-transform: uppercase;
-  background: #4a4235;
-  padding: 2px 10px;
-  border: 2px solid #8b8555;
-}
+  legend {
+    color: #c4b896;
+    text-transform: uppercase;
+    background: #4a4235;
+    padding: 2px 10px;
+    border: 2px solid #8b8555;
+  }
 
-.theme-sludge button {
-  background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
-  border: 3px solid #8b8555;
-  border-bottom-width: 5px;
-  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);
-}
+  button {
+    background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
+    border: 3px solid #8b8555;
+    border-bottom-width: 5px;
+    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);
+    }
+  }
 
-.theme-sludge button:hover {
-  background: linear-gradient(180deg, #7a7558 0%, #6d6750 100%);
-  border-color: #9a9565;
-}
+  .chart-display,
+  .dice-display {
+    background: rgba(42, 37, 26, 0.8);
+    border: 3px solid #8b8555;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
+  }
 
-.theme-sludge button:active {
-  border-bottom-width: 3px;
-  transform: translateY(2px);
-}
+  .title {
+    color: #c4b896;
+  }
 
-.theme-sludge .chart-display,
-.theme-sludge .dice-display {
-  background: rgba(42, 37, 26, 0.8);
-  border: 3px solid #8b8555;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
-}
+  .subtitle {
+    color: #aaa67d;
+  }
 
-/* Home Page */
-.theme-sludge .home-wrapper {
-  background: linear-gradient(180deg, #2a251a 0%, #3d372a 50%, #4a4235 100%);
-  color: #c4b896;
-}
+  .tab-button {
+    background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
+    border: 3px solid #8b8555;
+    border-bottom-width: 5px;
+    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);
+    &:hover {
+      background: linear-gradient(180deg, #7a7558 0%, #6d6750 100%);
+      transform: translateY(-2px);
+      border-color: #9a9565;
+    }
+  }
 
-.theme-sludge .home-window {
-  background: rgba(61, 55, 42, 0.95);
-  border: 4px solid #8b8555;
-  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3), inset 0 2px 0 rgba(255, 255, 255, 0.1);
-}
+  .back-button {
+    background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
+    border: 3px solid #8b8555;
+    border-bottom-width: 5px;
+    color: #c4b896;
+    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%);
+      transform: translateY(-2px);
+    }
+  }
 
-.theme-sludge .home-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);
-}
+  h1 {
+    color: #c4b896;
+  }
 
-.theme-sludge .home-content {
-  background: rgba(58, 52, 38, 0.3);
-}
+  h2 {
+    color: #aaa67d;
+  }
 
-.theme-sludge .title {
-  color: #c4b896;
-}
+  h3 {
+    color: #8b8555;
+  }
 
-.theme-sludge .subtitle {
-  color: #aaa67d;
-}
+  p,
+  li {
+    color: #b5ad88;
+  }
 
-.theme-sludge .tab-button {
-  background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
-  border: 3px solid #8b8555;
-  border-bottom-width: 5px;
-  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);
+  .point {
+    fill: #b5ad88;
+    filter: drop-shadow(0 0 5px #b5ad88);
+    stroke-width: 3;
+  }
 }
-
-.theme-sludge .tab-button:hover {
-  background: linear-gradient(180deg, #7a7558 0%, #6d6750 100%);
-  transform: translateY(-2px);
-  border-color: #9a9565;
-}
-
-/* Rules Page */
-.theme-sludge .rules-wrapper {
-  background: linear-gradient(180deg, #2a251a 0%, #3d372a 50%, #4a4235 100%);
-  color: #c4b896;
-}
-
-.theme-sludge .back-button {
-  background: linear-gradient(180deg, #6d6750 0%, #5c5544 100%);
-  border: 3px solid #8b8555;
-  border-bottom-width: 5px;
-  color: #c4b896;
-  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
-}
-
-.theme-sludge .back-button:hover {
-  background: linear-gradient(180deg, #7a7558 0%, #6d6750 100%);
-  transform: translateY(-2px);
-}
-
-.theme-sludge .rules-content {
-  color: #c4b896;
-}
-
-.theme-sludge h1 {
-  color: #c4b896;
-}
-
-.theme-sludge h2 {
-  color: #aaa67d;
-}
-
-.theme-sludge h3 {
-  color: #8b8555;
-}
-
-.theme-sludge p,
-.theme-sludge li {
-  color: #b5ad88;
-}
-
-:global(.theme-sludge) .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 3aad99e..8c5fe27 100644
--- a/src/lib/styles/themes.js
+++ b/src/lib/styles/themes.js
@@ -17,4 +17,3 @@ import './typewriter.css';
 import './nightmare.css';
 import './sludge.css';
 import './nintendo.css';
-import './general.css';
\ No newline at end of file
diff --git a/src/lib/styles/typewriter.css b/src/lib/styles/typewriter.css
index 3e4e0b1..4f9f8db 100644
--- a/src/lib/styles/typewriter.css
+++ b/src/lib/styles/typewriter.css
@@ -2,120 +2,85 @@
   font-family: 'Courier', monospace;
   background: #f4e8d0;
   color: #2c2416;
-}
 
-.theme-typewriter .window {
-  background: #fffef7;
-  border: 3px double #2c2416;
-  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
-}
+  .window {
+    background: #fffef7;
+    border: 3px double #2c2416;
+    box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
+  }
 
-.theme-typewriter .title-bar {
-  background: #2c2416;
-  color: #f4e8d0;
-  padding: 12px;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 3px;
-}
+  .title-bar {
+    background: #2c2416;
+    color: #f4e8d0;
+    padding: 12px;
+    text-align: center;
+    text-transform: uppercase;
+    letter-spacing: 3px;
+  }
 
-.theme-typewriter fieldset {
-  border: 2px solid #2c2416;
-}
+  fieldset {
+    border: 2px solid #2c2416;
+  }
 
-.theme-typewriter legend {
-  font-weight: bold;
-  text-decoration: underline;
-}
+  legend {
+    font-weight: bold;
+    text-decoration: underline;
+  }
 
-.theme-typewriter button {
-  background: #2c2416;
-  border: 2px solid #2c2416;
-  color: #f4e8d0;
-  font-family: 'Courier', monospace;
-}
+  button {
+    background: #2c2416;
+    border: 2px solid #2c2416;
+    color: #f4e8d0;
+    font-family: 'Courier', monospace;
+  }
 
-.theme-typewriter .chart-display,
-.theme-typewriter .dice-display {
-  background: #fffef7;
-  border: 1px solid #2c2416;
-}
+  .chart-display,
+  .dice-display {
+    background: #fffef7;
+    border: 1px solid #2c2416;
+  }
 
-/* Home Page Styles */
-.theme-typewriter .home-wrapper {
-  background: #f4e8d0;
-  color: #2c2416;
-}
+  .home-content {
+    background: #fffef7;
+    font-family: 'Courier', monospace;
+  }
 
-.theme-typewriter .home-window {
-  background: #fffef7;
-  border: 3px double #2c2416;
-  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
-}
+  .title {
+    color: #2c2416;
+  }
 
-.theme-typewriter .home-title-bar {
-  background: #2c2416;
-  color: #f4e8d0;
-  padding: 12px;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 3px;
-  font-family: 'Courier', monospace;
-}
+  .subtitle {
+    color: #4a3a28;
+  }
 
-.theme-typewriter .home-content {
-  background: #fffef7;
-  font-family: 'Courier', monospace;
-}
+  .tab-button {
+    background: #2c2416;
+    border: 2px solid #2c2416;
+    color: #f4e8d0;
+    font-family: 'Courier', monospace;
+    &:hover {
+      background: #4a3a28;
+    }
+  }
 
-.theme-typewriter .title {
-  color: #2c2416;
-}
+  .back-button {
+    background: #2c2416;
+    color: #f4e8d0;
+    border: 2px solid #2c2416;
+    &:hover {
+      background: #4a3a28;
+    }
+  }
 
-.theme-typewriter .subtitle {
-  color: #4a3a28;
-}
+  h1,
+  h2,
+  h3 {
+    color: #2c2416;
+    font-family: 'Courier', monospace;
+  }
 
-.theme-typewriter .tab-button {
-  background: #2c2416;
-  border: 2px solid #2c2416;
-  color: #f4e8d0;
-  font-family: 'Courier', monospace;
+  .point {
+    fill: #2c2416;
+    stroke: #2c2416;
+  }
 }
-
-.theme-typewriter .tab-button:hover {
-  background: #4a3a28;
-}
-
-/* Rules Page Styles */
-.theme-typewriter .rules-wrapper {
-  background: #f4e8d0;
-  color: #2c2416;
-}
-
-.theme-typewriter .back-button {
-  background: #2c2416;
-  color: #f4e8d0;
-  border: 2px solid #2c2416;
-}
-
-.theme-typewriter .back-button:hover {
-  background: #4a3a28;
-}
-
-.theme-typewriter .rules-content {
-  color: #2c2416;
-  font-family: 'Courier', monospace;
-}
-
-.theme-typewriter h1,
-.theme-typewriter h2,
-.theme-typewriter h3 {
-  color: #2c2416;
-  font-family: 'Courier', monospace;
-}
-
-:global(.theme-typewriter) .point {
-  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 79bea80..a9d7309 100644
--- a/src/lib/styles/win95.css
+++ b/src/lib/styles/win95.css
@@ -1,111 +1,73 @@
 .theme-win95 {
   font-family: 'MS Sans Serif', Arial, sans-serif;
   background: #008080;
-}
+  .window {
+    background: #c0c0c0;
+    border: 2px solid;
+    border-color: #dfdfdf #808080 #808080 #dfdfdf;
+    box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
+  }
 
-.theme-win95 .window {
-  background: #c0c0c0;
-  border: 2px solid;
-  border-color: #dfdfdf #808080 #808080 #dfdfdf;
-  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;
+  }
 
-.theme-win95 .title-bar {
-  background: linear-gradient(to right, #000080, #1084d0);
-  color: white;
-  padding: 8px;
-  font-weight: bold;
-}
+  fieldset {
+    border: 2px groove #c0c0c0;
+  }
 
-.theme-win95 fieldset {
-  border: 2px groove #c0c0c0;
-}
+  button {
+    background: #c0c0c0;
+    border: 2px solid;
+    border-color: #ffffff #000000 #000000 #ffffff;
+    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;
+  }
 
-.theme-win95 button {
-  background: #c0c0c0;
-  border: 2px solid;
-  border-color: #ffffff #000000 #000000 #ffffff;
-  font-family: 'MS Sans Serif', Arial, sans-serif;
-}
+  .tab-button {
+    background: #c0c0c0;
+    border: 2px solid;
+    border-color: #ffffff #000000 #000000 #ffffff;
+    color: #000;
+  }
 
-.theme-win95 button:active {
-  border-color: #000000 #ffffff #ffffff #000000;
-}
+  .tab-button:hover {
+    background: #dfdfdf;
+  }
 
-.theme-win95 .chart-display,
-.theme-win95 .dice-display {
-  background: white;
-  border: 2px inset #808080;
-}
+  .tab-button:active {
+    border-color: #000000 #ffffff #ffffff #000000;
+  }
 
-/* Home Page Styles */
-.theme-win95 .home-wrapper {
-  background: #008080;
-}
+  .back-button {
+    background: rgba(255, 255, 255, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.3);
+  }
 
-.theme-win95 .home-window {
-  background: #c0c0c0;
-  border: 2px solid;
-  border-color: #dfdfdf #808080 #808080 #dfdfdf;
-  box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
-}
+  .back-button:hover {
+    background: rgba(255, 255, 255, 0.3);
+  }
+  h1,
+  h2 {
+    color: #000080;
+  }
 
-.theme-win95 .home-title-bar {
-  background: linear-gradient(to right, #000080, #1084d0);
-  color: white;
-  padding: 8px;
-  font-weight: bold;
-  text-align: center;
-}
+  h3 {
+    color: #1084d0;
+  }
 
-.theme-win95 .home-content {
-  background: #c0c0c0;
-  color: #000;
+  .point {
+    fill: #000080;
+    stroke: #000080;
+  }
 }
-
-.theme-win95 .tab-button {
-  background: #c0c0c0;
-  border: 2px solid;
-  border-color: #ffffff #000000 #000000 #ffffff;
-  color: #000;
-}
-
-.theme-win95 .tab-button:hover {
-  background: #dfdfdf;
-}
-
-.theme-win95 .tab-button:active {
-  border-color: #000000 #ffffff #ffffff #000000;
-}
-
-/* Rules Page Styles */
-.theme-win95 .rules-wrapper {
-  background: #008080;
-}
-
-.theme-win95 .back-button {
-  background: rgba(255, 255, 255, 0.2);
-  border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.theme-win95 .back-button:hover {
-  background: rgba(255, 255, 255, 0.3);
-}
-
-.theme-win95 .rules-content {
-  color: #000;
-}
-
-.theme-win95 h1,
-.theme-win95 h2 {
-  color: #000080;
-}
-
-.theme-win95 h3 {
-  color: #1084d0;
-}
-
-:global(.theme-win95) .point {
-  fill: #000080;
-  stroke: #000080;
-}
\ No newline at end of file
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 714ce50..0eed37a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,7 @@
 	import '$lib/styles/themes.js';
 	import { writable } from 'svelte/store';
 	import { setContext } from 'svelte';
-
+	import { page } from '$app/state';
 	// Create a theme store that persists across pages
 	const theme = writable('win95');
 	setContext('theme', theme);
@@ -13,25 +13,19 @@
 	});
 </script>
 
-<div class="app-container theme-{currentTheme}">
-	<div class="wrapper">
-		<div class="container">
-			<div class="window">
-				<div class="title-bar">
-					<a href="/" class="back-button">←Back</a>
-					<span>A Sludge & Friends game</span>
-				</div>
-				<slot />
-			</div>
+<div class="theme-{currentTheme} app-container">
+	<div class="window">
+		<div class="title-bar">
+			{#if page.url.pathname != '/'}
+				<a href="/" class="back-button">←Back</a>
+			{/if}
+			<span>A Sludge & Friends Game</span>
 		</div>
+		<slot />
 	</div>
 </div>
 
 <style>
-	:global(body) {
-		margin: 0;
-		padding: 0;
-	}
 	.back-button {
 		padding: 5px 15px;
 		cursor: pointer;
@@ -41,24 +35,79 @@
 		font-weight: bold;
 		transition: all 0.2s;
 	}
-	.wrapper {
+
+	.app-container {
 		min-height: 100vh;
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 20px;
-	}
-
-	.container {
-		width: 100%;
-		max-width: 700px;
+		padding: 0.25rem;
 	}
 
 	.window {
+		max-width: 55rem;
 		width: 100%;
+		margin: 0 auto;
 	}
-	.app-container {
-		min-height: 100vh;
+
+	.title-bar {
+		display: flex;
+		align-items: center;
+		span {
+			text-align: center;
+			flex-grow: 0.75;
+		}
+	}
+
+	@media screen and (min-width: 450px) {
+		.app-container {
+			padding: 2rem;
+		}
+	}
+
+	:global {
+		body {
+			margin: 0;
+			padding: 0;
+			min-height: 100vh;
+		}
+
+		fieldset {
+			padding: 15px;
+			margin: 15px 0;
+		}
+
+		legend {
+			font-weight: bold;
+			padding: 0 5px;
+		}
+
+		.button-row {
+			display: flex;
+			gap: 10px;
+			justify-content: center;
+			margin-top: 10px;
+			flex-wrap: wrap;
+		}
+
+		button {
+			padding: 8px 24px;
+			cursor: pointer;
+			font-weight: bold;
+		}
+
+		.chart-display,
+		.dice-display {
+			padding: 20px;
+			min-height: 120px;
+			margin: 15px 0;
+		}
+
+		.empty-state {
+			font-style: italic;
+			text-align: center;
+			opacity: 0.7;
+		}
 	}
 </style>
 
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 94c7b7e..8f9bd66 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,6 +8,9 @@
 	$: themeStore.set(currentTheme);
 </script>
 
+<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>
@@ -57,7 +60,7 @@
 	}
 
 	.tab-button {
-		border:color(from color srgb r g b);
+		border: color(from color srgb r g b);
 		border-radius: 10px;
 		padding: 25px 40px;
 		font-size: 1.3rem;
diff --git a/src/routes/play/+page.svelte b/src/routes/play/+page.svelte
index b5dc9da..ef404eb 100644
--- a/src/routes/play/+page.svelte
+++ b/src/routes/play/+page.svelte
@@ -28,22 +28,25 @@
 	}
 </script>
 
-<div class="container">
-		<fieldset>
-			<legend>Chart Generator</legend>
-			<ChartDisplay chart={currentChart} />
-			<div class="button-row">
-				<button onclick={generateChart}>Generate</button>
-			</div>
-		</fieldset>
+<svelte:head>
+	<title>Play On the Spectrum</title>
+</svelte:head>
 
-		<fieldset>
-			<legend>Position Roller</legend>
-			<DiceRoller roll={diceRoll} />
-			<div class="button-row">
-				<button onclick={rollDice}>Roll Dice</button>
-			</div>
-		</fieldset>
+<div class="container">
+	<fieldset>
+		<legend>Chart Generator</legend>
+		<ChartDisplay chart={currentChart} />
+		<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>
+		</div>
+	</fieldset>
 </div>
 
 <style>
@@ -70,4 +73,3 @@
 		font-weight: bold;
 	}
 </style>
-
diff --git a/src/routes/rules/+page.svelte b/src/routes/rules/+page.svelte
index d684fa5..5469e7a 100644
--- a/src/routes/rules/+page.svelte
+++ b/src/routes/rules/+page.svelte
@@ -8,6 +8,10 @@
 	$: themeStore.set(currentTheme);
 </script>
 
+<svelte:head>
+	<title>Rules For On the Spectrum</title>
+</svelte:head>
+
 <div class="window-body">
 	<div class="rules-content">
 		<h1>How to Play</h1>
@@ -19,12 +23,15 @@
 					<strong>Generate:</strong> Click "Generate" to create a random 2D spectrum with X and Y axes
 				</li>
 				<li>
-					<strong>Roll:</strong> Have the clue-giver roll 2d10 with one d10 being X and the other d10 being Y (The axes run 1-10 with 5 being the centerline on each). Try to select a phrase-person-vibe that fits the X,Y coordinates you just rolled and inform the other players.
+					<strong>Roll:</strong> Have the clue-giver roll 2d10 with one d10 being X and the other d10
+					being Y (The axes run 1-10 with 5 being the centerline on each). Try to select a phrase-person-vibe
+					that fits the X,Y coordinates you just rolled and inform the other players.
 				</li>
 				<li>
-					<strong>Guess:</strong> Guessers now argue about where the clue should be situated on the quadrant plot. They guess some coordinates and the clue giver reveals where the clue was.
+					<strong>Guess:</strong> Guessers now argue about where the clue should be situated on the quadrant
+					plot. They guess some coordinates and the clue giver reveals where the clue was.
 				</li>
-				<li><strong>Repeat:</strong> Generate a new spectrum and keep playing!</li >
+				<li><strong>Repeat:</strong> Generate a new spectrum and keep playing!</li>
 			</ol>
 		</section>
 
@@ -79,26 +86,24 @@
 				Hundreds! The X and Y axes are randomly combined, creating thousands of possible spectrums.
 			</p>
 
-			<p>
-				<strong>What if I'm perfectly neutral?</strong><br />
-				Mark yourself at 5 or 6 on that axis. True neutrality is rare and interesting!
-			</p>
-
 			<p>
 				<strong>Can we make our own rules?</strong><br />
 				Absolutely! These are guidelines. House rules are encouraged!
 			</p>
 		</section>
-	<fieldset>
-		<legend>Theme Selector</legend>
-		<ThemeSelector bind:currentTheme />
-	</fieldset>
+		<fieldset>
+			<legend>Theme Selector</legend>
+			<ThemeSelector bind:currentTheme />
+		</fieldset>
 	</div>
 </div>
 
 <style>
 	.rules-content {
-		padding: 0px 0;
+		margin: 0.5rem;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 	}
 
 	h1 {
@@ -108,17 +113,15 @@
 	}
 
 	h2 {
-		font-size: 1.8rem;
 		margin-top: 30px;
 		margin-bottom: 15px;
 	}
 
 	section {
-		margin-bottom: 30px;
+		width: 95%;
 	}
 
 	p {
-		line-height: 1.6;
 		margin-bottom: 10px;
 	}
 
diff --git a/tsconfig.json b/tsconfig.json
index 7037a45..a00163c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,21 +1,21 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"rewriteRelativeImportExtensions": true,
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true,
-		"moduleResolution": "bundler",
-		"noImplicitAny": false
-	}
-	// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
-	// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
-	//
-	// To make changes to top-level options such as include and exclude, we recommend extending
-	// the generated config; see https://svelte.dev/docs/kit/configuration#typescript
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "rewriteRelativeImportExtensions": true,
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "moduleResolution": "bundler",
+    "noImplicitAny": false
+  }
+  // Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
+  // except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
+  //
+  // To make changes to top-level options such as include and exclude, we recommend extending
+  // the generated config; see https://svelte.dev/docs/kit/configuration#typescript
 }