diff --git a/package.json b/package.json
index 7ae1fe9..1dede21 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     "eslint": "^8.44.0",
     "flowbite": "^1.7.0",
     "flowbite-typography": "^1.0.3",
+    "phaser": "^3.60.0",
     "shiki": "^0.14.3",
     "tailwind-scrollbar": "^3.0.4",
     "tailwindcss": "^3.2.4",
diff --git a/public/assets/svg/letterA.svg b/public/assets/svg/letterA.svg
new file mode 100644
index 0000000..0296d74
--- /dev/null
+++ b/public/assets/svg/letterA.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--noto" preserveAspectRatio="xMidYMid meet" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M115.37 117.77L77.78 17.81a2.242 2.242 0 0 0-2.1-1.45H52.32c-.94 0-1.77.58-2.1 1.45l-37.59 99.96c-.26.69-.17 1.46.25 2.06s1.1.97 1.84.97h24.64c.96 0 1.82-.62 2.13-1.54l5.7-17.18H80.8l5.71 17.18c.3.92 1.16 1.54 2.13 1.54h24.64a2.236 2.236 0 0 0 2.09-3.03zm-61.14-36.9L64 51.45l9.77 29.43H54.23z" fill="#40C0E7"></path></g></svg>
\ No newline at end of file
diff --git a/src/pages/drawing/temp.astro b/src/pages/drawing/temp.astro
index 45321d4..55308dc 100644
--- a/src/pages/drawing/temp.astro
+++ b/src/pages/drawing/temp.astro
@@ -1,138 +1,67 @@
 <main>
     <div>
-        <canvas id=canvas></canvas>
 
     </div>
+    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 </main>
 <script is:inline>
-    new class Game {
-  constructor() {
-    this.c = document.querySelector('canvas')
-    this.cx = this.c.getContext('2d')
-    this.init()
-    this.c.addEventListener('mousedown', this.onmousedown.bind(this), false);
-    this.c.addEventListener('mouseup', this.onmouseup.bind(this), false);
-    this.c.addEventListener('mousemove', this.onmousemove.bind(this), false);
-  }
-  init() {
-    this.c.height = 190;
-    this.c.width = 140;
-    this.cx.fillStyle = 'rgb(200, 200, 250)';
-    this.drawletter('5');
-    this.cx.fillStyle = 'rgb(0, 0, 50)';
-    this.letterpixels = this.getpixelamount(200, 200, 250);
-  }
-  pixelthreshold() {
-    if (this.getpixelamount(0, 0, 50) / this.letterpixels > 0.75) {
-      console.log('you got it!');
-    }
-  }
-  showerror(error) {
-    this.mousedown = false;
-    console.log(error)
-  }
-  getpixelcolour(x, y) {
-    const pixels = this.cx.getImageData(0, 0, this.c.width, this.c.height);
-    const index = ((y * (pixels.width * 4)) + (x * 4));
-    return {
-      r: pixels.data[index],
-      g: pixels.data[index + 1],
-      b: pixels.data[index + 2],
-      a: pixels.data[index + 3]
-    };
-  }
-  paint(x, y) {
-    const colour = this.getpixelcolour(x, y);
-    if (colour.a === 0) {
-      this.showerror('you are outside');
-    } else {
-        const fillRange = 20;
-        const stack = [[x, y]];
-        while (stack.length > 0) {
-            const pixel = stack.pop();
-            if (pixel[0] < 0 || pixel[0] >= this.c.width) continue;
-            if (pixel[1] < 0 || pixel[1] >= this.c.height) continue;
-            if(((x - pixel[0]) ** 2 + (y - pixel[1]) ** 2) ** .5 > fillRange) continue;
-            const color = this.getpixelcolour(...pixel);
-            if (color.a === 0) continue;
-            if (color.r === 0 && color.g === 0 && color.b === 50) continue;
-
-            this.cx.fillRect(pixel[0], pixel[1], 1, 1);
-
-            if(pixel[0] >= x) stack.push([pixel[0] + 1, pixel[1]]);
-            if(pixel[0] <= x) stack.push([pixel[0] - 1, pixel[1]]);
-            if(pixel[1] >= y) stack.push([pixel[0], pixel[1] + 1]);
-            if(pixel[1] <= y) stack.push([pixel[0], pixel[1] - 1]);
+    var config = {
+        type: Phaser.AUTO,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        scene: {
+            preload: preload,
+            create: create,
+            update: update
         }
+    };
+
+    var graphics;
+    var isDragging = false;
+    var image;
+
+    var game = new Phaser.Game(config);
+
+    function preload() {
+        // Load the image asset
+        this.load.image('image', '/assets/A.png');
     }
-  }
-  onmousedown(ev) {
-    this.mousedown = true;
-    ev.preventDefault();
-  }
-  onmouseup(ev) {
-    this.mousedown = false;
-    this.pixelthreshold();
-    ev.preventDefault();
-  }
-  onmousemove(e) {
-    const x = Math.round(e.clientX - this.c.getBoundingClientRect().left);
-    const y = Math.round(e.clientY - this.c.getBoundingClientRect().top);
-    if (this.mousedown) {
-      this.paint(x, y);
-    } else {
-        // console.log(this.getpixelcolour(x, y));
-    }
-  }
-  getpixelamount(r, g, b) {
-    const pixels = this.cx.getImageData(0, 0, this.c.width, this.c.height);
-    const all = pixels.data.length;
-    let amount = 0;
-    for (let i = 0; i < all; i += 4) {
-      if (pixels.data[i] === r && pixels.data[i + 1] === g && pixels.data[i + 2] === b) {
-        amount++;
-      }
-    }
-    return amount;
-  }
-  drawletter(letter) {
-    const path = new Path2D('M60.4248047,180.541992 C73.445638,180.541992 84.9405924,177.693685 94.909668,171.99707 C104.878743,166.300456 112.508138,158.610026 117.797852,148.925781 C123.087565,139.241536 125.732422,128.499349 125.732422,116.699219 C125.732422,108.561198 124.267578,100.952148 121.337891,93.8720703 C118.408203,86.7919922 114.379883,80.6681315 109.25293,75.5004883 C104.125977,70.3328451 98.1648763,66.2841797 91.3696289,63.3544922 C84.5743815,60.4248047 77.2705078,58.9599609 69.4580078,58.9599609 C59.6923828,58.9599609 49.0315755,62.0524089 37.4755859,68.2373047 L37.4755859,68.2373047 L44.4335938,28.6865234 L102.416992,28.6865234 C108.439128,28.6865234 112.996419,27.3844401 116.088867,24.7802734 C119.181315,22.1761068 120.727539,18.758138 120.727539,14.5263672 C120.727539,4.8421224 114.379883,0 101.68457,0 L101.68457,0 L37.2314453,0 C30.2327474,0 25.1871745,1.58691406 22.0947266,4.76074219 C19.0022786,7.93457031 16.8863932,13.0208333 15.7470703,20.0195312 L15.7470703,20.0195312 L5.49316406,78.4912109 C4.59798177,83.6181641 4.15039062,86.3850911 4.15039062,86.7919922 C4.15039062,90.4541016 5.69661458,93.7296549 8.7890625,96.6186523 C11.8815104,99.5076497 15.4215495,100.952148 19.4091797,100.952148 C23.0712891,100.952148 27.730306,98.815918 33.3862305,94.543457 C39.0421549,90.2709961 43.375651,87.2802734 46.3867188,85.5712891 C49.3977865,83.8623047 54.4026693,83.0078125 61.4013672,83.0078125 C67.0979818,83.0078125 72.265625,84.370931 76.9042969,87.097168 C81.5429688,89.8234049 85.2457682,93.9534505 88.0126953,99.4873047 C90.7796224,105.021159 92.1630859,111.694336 92.1630859,119.506836 C92.1630859,126.749674 90.8813477,133.219401 88.3178711,138.916016 C85.7543945,144.61263 82.1126302,149.088542 77.3925781,152.34375 C72.672526,155.598958 67.179362,157.226562 60.9130859,157.226562 C54.0771484,157.226562 47.8922526,155.212402 42.3583984,151.184082 C36.8245443,147.155762 32.430013,141.520182 29.1748047,134.277344 C25.8382161,126.383464 20.7519531,122.436523 13.9160156,122.436523 C9.92838542,122.436523 6.61214193,123.860677 3.96728516,126.708984 C1.32242839,129.557292 0,132.568359 0,135.742188 C0,140.950521 1.89208984,147.033691 5.67626953,153.991699 C9.46044922,160.949707 15.8894857,167.114258 24.9633789,172.485352 C34.0372721,177.856445 45.8577474,180.541992 60.4248047,180.541992 Z');
-    this.cx.fill(path);
-  }
-}
-//     const config = {
-//     type: Phaser.AUTO,
-//     width: 800, // Set your default game width
-//     height: 600, // Set your default game height
-//     scene: {
-//         preload: preload,
-//         create: create,
-//     },
-// };
 
-// const game = new Phaser.Game(config);
+    function create() {
+        graphics = this.add.graphics();
 
-// function preload() {
-//     // Load your image assets here
-//     this.load.image('exampleImage', 'path/to/your/image.png');
-// }
+        // Set line style for the dragging line
+        graphics.lineStyle(60, 0x5e17eb); // Blue color, 20px width
 
-// function create() {
-//     const image = this.add.image(this.cameras.main.width / 2, this.cameras.main.height / 2, 'exampleImage');
+        // Add the image to the scene
+        image = this.add.image(window.innerWidth / 2, window.innerHeight / 2, 'image');
+        image.setInteractive();
 
-//     // Calculate the scale factor based on the screen size and desired aspect ratio
-//     const scaleFactor = Math.min(
-//         this.cameras.main.width / image.width,
-//         this.cameras.main.height / image.height
-//     );
+        this.input.on('pointerdown', function (pointer) {
+            if (image.getBounds().contains(pointer.x, pointer.y)) {
+                // Start dragging only if the pointer is over the image
+                isDragging = true;
 
-//     // Scale the image while preserving its aspect ratio
-//     image.setScale(scaleFactor);
+                // Bring the graphics to the front
+                this.children.bringToTop(graphics);
 
-//     // Center the image on the screen
-//     image.setOrigin(0.5);
+                graphics.beginPath();
+                graphics.moveTo(pointer.x, pointer.y);
+            }
+        }, this);
 
-//     // You can add more logic or resize other elements as needed
-// }
+        this.input.on('pointermove', function (pointer) {
+            if (isDragging) {
+                graphics.lineTo(pointer.x, pointer.y);
+                graphics.strokePath();
+            }
+        }, this);
+
+        this.input.on('pointerup', function () {
+            isDragging = false;
+            graphics.closePath();
+        }, this);
+    }      
+    function update() {}
 
 </script>
\ No newline at end of file
diff --git a/src/pages/drawing/temp2.astro b/src/pages/drawing/temp2.astro
new file mode 100644
index 0000000..0efe84c
--- /dev/null
+++ b/src/pages/drawing/temp2.astro
@@ -0,0 +1,85 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title='Drawing Game'>
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+    </main>
+</Layout>
+<script is:inline>
+var config = {
+    type: Phaser.AUTO,
+    width: 800,
+    height: 600,
+    scene: {
+        create: create,
+        update: update
+    }
+};
+
+var graphics;
+var isDragging = false;
+var pathPoints = [
+    { x: 100, y: 100 },
+    { x: 200, y: 100 },
+    { x: 150, y: 200 }
+];
+
+var drawnPoints = [];
+
+var game = new Phaser.Game(config);
+
+function create() {
+    graphics = this.add.graphics();
+
+    // Draw the predefined path filled with white color
+    graphics.fillStyle(0xffffff); // White color
+    graphics.beginPath();
+    graphics.moveTo(pathPoints[0].x, pathPoints[0].y);
+
+    for (var i = 1; i < pathPoints.length; i++) {
+        graphics.lineTo(pathPoints[i].x, pathPoints[i].y);
+    }
+
+    graphics.closePath();
+    graphics.fillPath();
+
+    // Add input events to detect dragging
+    this.input.on('pointerdown', function (pointer) {
+        isDragging = true;
+        drawnPoints = [];
+        drawnPoints.push({ x: pointer.x, y: pointer.y });
+    });
+
+    this.input.on('pointermove', function (pointer) {
+        if (isDragging) {
+            drawnPoints.push({ x: pointer.x, y: pointer.y });
+        }
+    });
+
+    this.input.on('pointerup', function () {
+        isDragging = false;
+    });
+}
+
+function update() {
+    // Continuously update the filled area while dragging
+    if (isDragging) {
+        graphics.fillStyle(0xff0000); // Red color
+        graphics.beginPath();
+        graphics.moveTo(drawnPoints[0].x, drawnPoints[0].y);
+
+        for (var i = 1; i < drawnPoints.length; i++) {
+            graphics.lineTo(drawnPoints[i].x, drawnPoints[i].y);
+        }
+
+        graphics.closePath();
+        graphics.fillPath();
+    }
+}
+
+
+</script>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 232fe62..0984d26 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2758,6 +2758,11 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
+eventemitter3@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
+  integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
+
 events@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
@@ -4669,6 +4674,13 @@ path-to-regexp@^6.2.1:
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-6.2.1.tgz#d54934d6798eb9e5ef14e7af7962c945906918e5"
   integrity sha512-JLyh7xT1kizaEvcaXOQwOc2/Yhw6KZOvPf1S8401UyLk86CU79LN3vl7ztXGm/pZ+YjoyAJ4rxmHwbkBXJX+yw==
 
+phaser@^3.60.0:
+  version "3.60.0"
+  resolved "https://registry.yarnpkg.com/phaser/-/phaser-3.60.0.tgz#8a555623e64c707482e6321485b4bda84604590d"
+  integrity sha512-IKUy35EnoEVcl2EmJ8WOyK4X8OoxHYdlhZLgRGpNrvD1fEagYffhVmwHcapE/tGiLgyrnezmXIo5RrH2NcrTHw==
+  dependencies:
+    eventemitter3 "^5.0.0"
+
 picocolors@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"