diff --git a/src/_assets/derivative.ts b/src/_assets/derivative.ts
index cecdd62..b3cce67 100644
--- a/src/_assets/derivative.ts
+++ b/src/_assets/derivative.ts
@@ -1,4 +1,4 @@
-import { displayAlert } from './utils'
+import { displayAlert, setCoordinatesInBox } from './utils'
 import { DerivativeFxChart } from './fx/derivative_fx'
 import { FxChart } from './fx/fx'
 import { drawOffscreenAndTransferTo } from './canvas_utils'
@@ -60,6 +60,9 @@ export function init() {
   fxFgCtx.clearRect(0, 0, fxFgCtx.canvas.width, fxFgCtx.canvas.height)
   fx2FgCtx.clearRect(0, 0, fx2FgCtx.canvas.width, fx2FgCtx.canvas.height)
 
+  document.getElementById('fx-coordinates')!.innerText = ''
+  document.getElementById('fx2-coordinates')!.innerText = ''
+
   const resolution: [number, number] = [fxCtx.canvas.width, fxCtx.canvas.height]
 
   const fx = new FxChart(func, resolution, xMin, xMax, yMin, yMax)
@@ -150,9 +153,11 @@ function drawInteraction(x_px: number) {
 
     // Draw fx(x)
     fx.drawPointOnCanvas(ctx, x, fx.points![x_px]![1]!, { radius: 6 })
+    setCoordinatesInBox('fx-coordinates', x, fx.points![x_px]![1])
   })
 
   // Draw fx'(x)
   fx2FgCtx.clearRect(0, 0, fx2FgCtx.canvas.width, fx2FgCtx.canvas.height)
   fx2.drawPointOnCanvas(fx2FgCtx, x, y, { color, radius: 6 })
+  setCoordinatesInBox('fx2-coordinates', x, y)
 }
diff --git a/src/_assets/incremental_ratio.ts b/src/_assets/incremental_ratio.ts
index f2d08a6..56aa8cb 100644
--- a/src/_assets/incremental_ratio.ts
+++ b/src/_assets/incremental_ratio.ts
@@ -1,4 +1,4 @@
-import { displayAlert } from './utils'
+import { displayAlert, setCoordinatesInBox } from './utils'
 import { evaluate } from 'mathjs'
 import config from './config'
 import { FxChart } from './fx/fx'
@@ -51,6 +51,8 @@ export function init() {
   fxCtx.clearRect(0, 0, fxCtx.canvas.width, fxCtx.canvas.height)
   fxFgCtx.clearRect(0, 0, fxFgCtx.canvas.width, fxFgCtx.canvas.height)
 
+  document.getElementById('fx-coordinates')!.innerText = ''
+
   const resolution: [number, number] = [fxCtx.canvas.width, fxCtx.canvas.height]
   const fx = new FxChart(func, resolution, xMin, xMax, yMin, yMax)
 
@@ -143,6 +145,7 @@ export function drawInteraction(x: number) {
     }
     fx.drawPointOnCanvas(ctx, xMoving, yMoving)
     fx.drawPointOnCanvas(ctx, xFixed, yFixed)
+    setCoordinatesInBox('fx-coordinates', xMoving, yMoving)
   })
 }
 
diff --git a/src/_assets/sign.ts b/src/_assets/sign.ts
index 597f626..6bb211f 100644
--- a/src/_assets/sign.ts
+++ b/src/_assets/sign.ts
@@ -1,4 +1,4 @@
-import { displayAlert } from './utils'
+import { displayAlert, setCoordinatesInBox } from './utils'
 import { FxChart } from './fx/fx'
 import { DerivativeFxChart } from './fx/derivative_fx'
 import { evaluate } from 'mathjs'
@@ -61,6 +61,9 @@ export function init() {
   fxFgCtx.clearRect(0, 0, fxFgCtx.canvas.width, fxFgCtx.canvas.height)
   fx2FgCtx.clearRect(0, 0, fx2FgCtx.canvas.width, fx2FgCtx.canvas.height)
 
+  document.getElementById('fx-coordinates')!.innerText = ''
+  document.getElementById('fx2-coordinates')!.innerText = ''
+
   const resolution: [number, number] = [fxCtx.canvas.width, fxCtx.canvas.height]
 
   const fx = new FxChart(func, resolution, xMin, xMax, yMin, yMax)
@@ -154,9 +157,11 @@ function drawInteraction(x_px: number) {
 
     // Draw fx(x)
     fx.drawPointOnCanvas(ctx, x, fx.points![x_px]![1]!, { radius: 6 })
+    setCoordinatesInBox('fx-coordinates', x, fx.points![x_px]![1]!)
   })
 
   // Draw fx'(x)
   fx2FgCtx.clearRect(0, 0, fx2FgCtx.canvas.width, fx2FgCtx.canvas.height)
   fx2.drawPointOnCanvas(fx2FgCtx, x, y, { color, radius: 6 })
+  setCoordinatesInBox('fx2-coordinates', x, y)
 }
diff --git a/src/_assets/utils.ts b/src/_assets/utils.ts
index 6e2c28c..d45299d 100644
--- a/src/_assets/utils.ts
+++ b/src/_assets/utils.ts
@@ -75,3 +75,8 @@ export function copyLinkToClipboard() {
   const toast = new Toast(toastElement, { delay: 2000 })
   toast.show()
 }
+
+export function setCoordinatesInBox(id: string, x: number, y: number) {
+  const coordinatesBox = document.getElementById(id)!
+  coordinatesBox.innerText = `X: ${x.toFixed(2)}, Y: ${y.toFixed(2)}`
+}
diff --git a/src/functions/derivative.html b/src/functions/derivative.html
index 4cc1f5b..850146e 100644
--- a/src/functions/derivative.html
+++ b/src/functions/derivative.html
@@ -35,12 +35,14 @@
         </div>
     </div>
     <div class="col-md-9">
-        <div id="fx-canvas-container">
+        <div id="fx-canvas-container" class="position-relative">
+            <div id="fx-coordinates" class="position-absolute end-0 top-0 fst-italic me-1 mt-1 text-muted"></div>
             <canvas id="fx-layer-0" class="position-absolute border border-dark"></canvas>
             <canvas id="fx-layer-1" class="position-absolute border border-dark"></canvas>
         </div>
         <hr>
-        <div id="fx2-canvas-container">
+        <div id="fx2-canvas-container" class="position-relative">
+            <div id="fx2-coordinates" class="position-absolute end-0 top-0 fst-italic me-1 mt-1 text-muted"></div>
             <canvas id="fx2-layer-0" class="position-absolute border border-dark"></canvas>
             <canvas id="fx2-layer-1" class="position-absolute border border-dark"></canvas>
         </div>
diff --git a/src/functions/incremental_ratio.html b/src/functions/incremental_ratio.html
index 5376ccc..704d275 100644
--- a/src/functions/incremental_ratio.html
+++ b/src/functions/incremental_ratio.html
@@ -32,7 +32,8 @@
         </div>
     </div>
     <div class="col-md-9">
-        <div id="fx-canvas-container">
+        <div id="fx-canvas-container" class="position-relative">
+            <div id="fx-coordinates" class="position-absolute end-0 top-0 fst-italic me-1 mt-1 text-muted"></div>
             <canvas id="fx-layer-0" class="position-absolute border border-dark"></canvas>
             <canvas id="fx-layer-1" class="position-absolute border border-dark"></canvas>
         </div>
diff --git a/src/functions/sign.html b/src/functions/sign.html
index 07d15bc..f83a7d1 100644
--- a/src/functions/sign.html
+++ b/src/functions/sign.html
@@ -35,12 +35,14 @@
         </div>
     </div>
     <div class="col-md-9">
-        <div id="fx-canvas-container">
+        <div id="fx-canvas-container" class="position-relative">
+            <div id="fx-coordinates" class="position-absolute end-0 top-0 fst-italic me-1 mt-1 text-muted"></div>
             <canvas id="fx-layer-0" class="position-absolute border border-dark"></canvas>
             <canvas id="fx-layer-1" class="position-absolute border border-dark"></canvas>
         </div>
         <hr>
-        <div id="fx2-canvas-container">
+        <div id="fx2-canvas-container" class="position-relative">
+            <div id="fx2-coordinates" class="position-absolute end-0 top-0 fst-italic me-1 mt-1 text-muted"></div>
             <canvas id="fx2-layer-0" class="position-absolute border border-dark"></canvas>
             <canvas id="fx2-layer-1" class="position-absolute border border-dark"></canvas>
         </div>