diff --git a/line-segment-intersection/src/App.svelte b/line-segment-intersection/src/App.svelte
index e0664a9..a0ad125 100644
--- a/line-segment-intersection/src/App.svelte
+++ b/line-segment-intersection/src/App.svelte
@@ -50,8 +50,15 @@
     const width = Math.abs(corner2.x - corner1.x);
     const height = Math.abs(corner2.y - corner1.y);
 
+    ctx.beginPath();
+    ctx.roundRect(x, y, width, height, 1);
     ctx.fillStyle = color;
-    ctx.fillRect(x, y, width, height);
+    ctx.fill();
+
+    // Add border
+    ctx.strokeStyle = color.replace('0.3', '0.8'); // Make border more opaque
+    ctx.lineWidth = 2;
+    ctx.stroke();
   }
 
   function handleMouseMove(event) {
@@ -59,7 +66,11 @@
     const mouseX = event.clientX - rect.left;
     const mouseY = event.clientY - rect.top;
 
-    userPoint = toCartesianCoords(mouseX, mouseY);
+    // Add half grid unit offset for snapping to closest grid intersection
+    userPoint = {
+      x: Math.floor((mouseX + GRID_SIZE / 2) / GRID_SIZE),
+      y: Math.floor((HEIGHT - mouseY + GRID_SIZE / 2) / GRID_SIZE)
+    };
   }
 
   function toCanvasCoords(x, y) {
@@ -199,22 +210,22 @@
 
   <div class="calculations">
     <h2>Rectangle Areas</h2>
-    <p class="point-c">Point B: ({userPoint.x.toFixed(2)}, {userPoint.y.toFixed(2)})</p>
+    <p class="point-c">Point B: ({userPoint.x}, {userPoint.y})</p>
 
     <div class="rect-calc blue" class:largest={blueArea > redArea}>
       <h3>Blue Rectangle</h3>
       <p>Corner: ({blueRect.x1}, {blueRect.y1})</p>
-      <p>Width = |{blueRect.x1} - {userPoint.x.toFixed(2)}| = {blueWidth.toFixed(2)}</p>
-      <p>Height = |{blueRect.y1} - {userPoint.y.toFixed(2)}| = {blueHeight.toFixed(2)}</p>
-      <p class="area">Area = {blueWidth.toFixed(2)} x {blueHeight.toFixed(2)} = <strong>{blueArea.toFixed(2)}</strong></p>
+      <p>Width = |{blueRect.x1} - {userPoint.x}| = {blueWidth}</p>
+      <p>Height = |{blueRect.y1} - {userPoint.y}| = {blueHeight}</p>
+      <p class="area">Area = {blueWidth} x {blueHeight} = <strong>{blueArea}</strong></p>
     </div>
 
     <div class="rect-calc red" class:largest={redArea > blueArea}>
       <h3>Red Rectangle</h3>
       <p>Corner: ({redRect.x1}, {redRect.y1})</p>
-      <p>Width = |{redRect.x1} - {userPoint.x.toFixed(2)}| = {redWidth.toFixed(2)}</p>
-      <p>Height = |{redRect.y1} - {userPoint.y.toFixed(2)}| = {redHeight.toFixed(2)}</p>
-      <p class="area">Area = {redWidth.toFixed(2)} x {redHeight.toFixed(2)} = <strong>{redArea.toFixed(2)}</strong></p>
+      <p>Width = |{redRect.x1} - {userPoint.x}| = {redWidth}</p>
+      <p>Height = |{redRect.y1} - {userPoint.y}| = {redHeight}</p>
+      <p class="area">Area = {redWidth} x {redHeight} = <strong>{redArea}</strong></p>
     </div>
   </div>
 </main>