diff --git a/src/lib/components/diceRoller.svelte b/src/lib/components/diceRoller.svelte
index 6bad9d7..09edbd0 100644
--- a/src/lib/components/diceRoller.svelte
+++ b/src/lib/components/diceRoller.svelte
@@ -3,65 +3,61 @@
 </script>
 
 <div class="dice-display">
-  {#if roll && roll.x && roll.y}
-    <div class="dice-result">X: {roll.x} | Y: {roll.y}</div>
-    
-    <div class="chart-container">
-      <svg viewBox="0 20 200 240">
-        <!-- Grid -->
-        {#each {length: 10} as _, i}
-          <line x1={20 + i * 20} y1="40" x2={20 + i * 20} y2="220" stroke="currentColor" stroke-width="0.5" opacity="0.2" />
-          <line x1="20" y1={20 + (i+1) * 20} x2="200" y2={20 + (i+1) * 20} stroke="currentColor" stroke-width="0.5" opacity="0.2" />
-        {/each}
-        
-        <!-- 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" />
+  <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="130" x2="200" y2="130" stroke="currentColor" stroke-width="2" />
-        <line x1="110" y1="40" x2="110" y2="220" stroke="currentColor" stroke-width="2" />
-        
-        <!-- Numbers -->
-        {#each {length: 10} as _, i}
-          <text x={20 + i * 20} y="235" text-anchor="middle" font-size="10" fill="currentColor">{i+1}</text>
-          <text x="8" y={225 - i * 20} text-anchor="middle" font-size="10" fill="currentColor">{i+1}</text>
-        {/each}
-        
-        <!-- Crosshairs -->
-        <line 
-          x1={roll.x * 20} 
-          y1="40" 
-          x2={roll.x * 20} 
-          y2="220" 
-          stroke="currentColor" 
-          stroke-width="1" 
-          stroke-dasharray="3,3" 
-          opacity="0.4"
-        />
-        <line 
-          x1="20" 
-          y1={240 - roll.y * 20} 
-          x2="200" 
-          y2={240 - roll.y * 20} 
-          stroke="currentColor" 
-          stroke-width="1" 
-          stroke-dasharray="3,3" 
-          opacity="0.4"
-        />
-        
-        <!-- Point -->
-        <circle 
-          cx={roll.x * 20} 
-          cy={240 - roll.y * 20} 
-          r="6" 
-          class="point"
-        />
-      </svg>
-    </div>
-  {:else}
-    <div class="empty-state">Click Roll!</div>
-  {/if}
+      <!-- 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>
@@ -70,12 +66,13 @@
     font-weight: bold;
     margin-top: 10px;
     text-align: center;
+    margin-bottom: 20px;
   }
 
   .chart-container {
     display: flex;
-    justify-content:center;
-    margin-top: 0px;
+    justify-content: center;
+    margin-top: 20px;
   }
 
   svg {
diff --git a/src/routes/play/+page.svelte b/src/routes/play/+page.svelte
index 6ffc64e..b5dc9da 100644
--- a/src/routes/play/+page.svelte
+++ b/src/routes/play/+page.svelte
@@ -22,8 +22,8 @@
 
 	function rollDice() {
 		diceRoll = {
-			x: Math.floor(Math.random() * 10) + 1,
-			y: Math.floor(Math.random() * 10) + 1
+			x: Math.floor(Math.random() * 11) - 5,
+			y: Math.floor(Math.random() * 11) - 5
 		};
 	}
 </script>