diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index a764dbc..b6ef0e4 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -9,6 +9,12 @@ import Layout from '../../layouts/Layout.astro';
     </main>
 </Layout>
 <script is:inline>
+    const drawingZone = {
+        x: window.innerWidth / 4,    // X-coordinate of the drawing zone
+        y: window.innerHeight / 4,   // Y-coordinate of the drawing zone
+        width: window.innerWidth / 2, // Width of the drawing zone
+        height: window.innerHeight / 2, // Height of the drawing zone
+    };
     var assetsList = {}
     const params = new URLSearchParams(window.location.search);
     const paramsID = params.get('id');
@@ -16,7 +22,7 @@ import Layout from '../../layouts/Layout.astro';
     .then(response => response.json())
     .then(({data}) => {
     const {image} = data;
-    assetsList.image = "https://management.beanstalkedu.com/assets/" + image ; //+ "?width=450";
+    assetsList.image = "https://management.beanstalkedu.com/assets/" + image; // + "?width=450";
     const config = {
         type: Phaser.AUTO,
         width: window.innerWidth,
@@ -159,7 +165,6 @@ import Layout from '../../layouts/Layout.astro';
         clearButton.style.fontWeight = 'bold';
         clearButton.style.borderRadius = '50%';
         clearButton.style.boxShadow = "5px 20px 30px #7c4c2390";
-
         clearButton.addEventListener('click', () => {
             clearDrawing();
         });
@@ -175,7 +180,6 @@ import Layout from '../../layouts/Layout.astro';
                 continueDrawing(this.input.x, this.input.y);
             }
         });
-
         this.input.on('pointerup', () => {
             if (isDrawing) {
                 finishDrawing();
@@ -186,6 +190,27 @@ import Layout from '../../layouts/Layout.astro';
         
         // Disable the default cursor
         this.input.setDefaultCursor('none');
+
+
+        const borderThickness = 2;
+    const borderColor = 0x000000; // Black color (you can customize this)
+
+    const borderGraphics = this.add.graphics();
+    borderGraphics.lineStyle(borderThickness, borderColor);
+    borderGraphics.strokeRect(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height);
+        function continueDrawing(x, y) {
+            // Check if the pointer coordinates are within the drawing zone
+            if (
+                x >= drawingZone.x &&
+                x <= drawingZone.x + drawingZone.width &&
+                y >= drawingZone.y &&
+                y <= drawingZone.y + drawingZone.height
+            ) {
+                // The pointer is within the drawing zone, so continue drawing
+                graphics.lineTo(x, y);
+                graphics.strokePath();
+            }
+        }
     }
 
     function startDrawing(x, y) {