diff --git a/src/pages/capital-letter/tt.astro b/src/pages/capital-letter/tt.astro
deleted file mode 100644
index 6097ffe..0000000
--- a/src/pages/capital-letter/tt.astro
+++ /dev/null
@@ -1,55 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
----
-<Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
-</Layout>
-<script is:inline>
- // Define the sprite sheet properties
-const frameWidth = 32;   // Adjust based on your sprite sheet
-const frameHeight = 32;  // Adjust based on your sprite sheet
-const numFrames = 8;     // Adjust based on the number of frames in your sprite sheet
-const frameRate = 10;    // Adjust the speed of the animation
-
-  // Preload function to load assets
-  function preload() {
-    this.load.spritesheet('playerWalk', '/assets/beanieImage.png', {
-        frameWidth: frameWidth,
-        frameHeight: frameHeight
-    });
-  }
-
-// Create function to set up the game
-function create() {
-  // Create an animation using the loaded sprite sheet
-  this.anims.create({
-    key: 'walk',
-    frames: this.anims.generateFrameNumbers('playerWalk', { start: 0, end: numFrames }),
-    frameRate: frameRate,
-    repeat: -1
-  });
-
-  // Create a sprite and play the animation
-  const player = this.add.sprite(100, 100, 'playerWalk');
-  player.play('walk');
-}
-
-// Load the Phaser game
-const config = {
-  type: Phaser.AUTO,
-  width: 800,
-  height: 600,
-  scene: {
-    preload,
-    create
-  }
-};
-
-const game = new Phaser.Game(config);
-
-
-</script>
\ No newline at end of file
diff --git a/src/pages/drawing/temp.astro b/src/pages/drawing/temp.astro
deleted file mode 100644
index 67123a3..0000000
--- a/src/pages/drawing/temp.astro
+++ /dev/null
@@ -1,65 +0,0 @@
-<main>
-    <div>
-
-    </div>
-    <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-</main>
-<script is:inline>
-    var config = {
-        type: Phaser.AUTO,
-        width: window.innerWidth,
-        height: window.innerHeight,
-        backgroundColor : 0xffffff,
-        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');
-    }   
-    function create() {
-        graphics = this.add.graphics();
-        // Set line style for the dragging line
-        graphics.lineStyle(60, 0x5e17eb); // Blue color, 20px width
-
-        // Add the image to the scene
-        image = this.add.image(window.innerWidth / 2, window.innerHeight / 2, 'image');
-        image.setInteractive();
-
-        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;
-
-                // Bring the graphics to the front
-                this.children.bringToTop(graphics);
-
-                graphics.beginPath();
-                graphics.moveTo(pointer.x, pointer.y);
-            }
-        }, this);
-
-        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
deleted file mode 100644
index 0efe84c..0000000
--- a/src/pages/drawing/temp2.astro
+++ /dev/null
@@ -1,85 +0,0 @@
----
-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/src/pages/numeric/0.astro b/src/pages/guided-tracing/0.astro
similarity index 100%
rename from src/pages/numeric/0.astro
rename to src/pages/guided-tracing/0.astro
diff --git a/src/pages/numeric/1.astro b/src/pages/guided-tracing/1.astro
similarity index 100%
rename from src/pages/numeric/1.astro
rename to src/pages/guided-tracing/1.astro
diff --git a/src/pages/numeric/2.astro b/src/pages/guided-tracing/2.astro
similarity index 100%
rename from src/pages/numeric/2.astro
rename to src/pages/guided-tracing/2.astro
diff --git a/src/pages/numeric/3.astro b/src/pages/guided-tracing/3.astro
similarity index 100%
rename from src/pages/numeric/3.astro
rename to src/pages/guided-tracing/3.astro
diff --git a/src/pages/numeric/4.astro b/src/pages/guided-tracing/4.astro
similarity index 100%
rename from src/pages/numeric/4.astro
rename to src/pages/guided-tracing/4.astro
diff --git a/src/pages/numeric/5.astro b/src/pages/guided-tracing/5.astro
similarity index 100%
rename from src/pages/numeric/5.astro
rename to src/pages/guided-tracing/5.astro
diff --git a/src/pages/numeric/6.astro b/src/pages/guided-tracing/6.astro
similarity index 100%
rename from src/pages/numeric/6.astro
rename to src/pages/guided-tracing/6.astro
diff --git a/src/pages/numeric/7.astro b/src/pages/guided-tracing/7.astro
similarity index 100%
rename from src/pages/numeric/7.astro
rename to src/pages/guided-tracing/7.astro
diff --git a/src/pages/numeric/8.astro b/src/pages/guided-tracing/8.astro
similarity index 100%
rename from src/pages/numeric/8.astro
rename to src/pages/guided-tracing/8.astro
diff --git a/src/pages/numeric/9.astro b/src/pages/guided-tracing/9.astro
similarity index 100%
rename from src/pages/numeric/9.astro
rename to src/pages/guided-tracing/9.astro
diff --git a/src/pages/capital-letter/A.astro b/src/pages/guided-tracing/A.astro
similarity index 100%
rename from src/pages/capital-letter/A.astro
rename to src/pages/guided-tracing/A.astro
diff --git a/src/pages/capital-letter/B.astro b/src/pages/guided-tracing/B.astro
similarity index 100%
rename from src/pages/capital-letter/B.astro
rename to src/pages/guided-tracing/B.astro
diff --git a/src/pages/capital-letter/C.astro b/src/pages/guided-tracing/C.astro
similarity index 100%
rename from src/pages/capital-letter/C.astro
rename to src/pages/guided-tracing/C.astro
diff --git a/src/pages/capital-letter/D.astro b/src/pages/guided-tracing/D.astro
similarity index 100%
rename from src/pages/capital-letter/D.astro
rename to src/pages/guided-tracing/D.astro
diff --git a/src/pages/capital-letter/E.astro b/src/pages/guided-tracing/E.astro
similarity index 100%
rename from src/pages/capital-letter/E.astro
rename to src/pages/guided-tracing/E.astro
diff --git a/src/pages/capital-letter/F.astro b/src/pages/guided-tracing/F.astro
similarity index 100%
rename from src/pages/capital-letter/F.astro
rename to src/pages/guided-tracing/F.astro
diff --git a/src/pages/capital-letter/G.astro b/src/pages/guided-tracing/G.astro
similarity index 100%
rename from src/pages/capital-letter/G.astro
rename to src/pages/guided-tracing/G.astro
diff --git a/src/pages/capital-letter/H.astro b/src/pages/guided-tracing/H.astro
similarity index 100%
rename from src/pages/capital-letter/H.astro
rename to src/pages/guided-tracing/H.astro
diff --git a/src/pages/capital-letter/I.astro b/src/pages/guided-tracing/I.astro
similarity index 100%
rename from src/pages/capital-letter/I.astro
rename to src/pages/guided-tracing/I.astro
diff --git a/src/pages/capital-letter/J.astro b/src/pages/guided-tracing/J.astro
similarity index 100%
rename from src/pages/capital-letter/J.astro
rename to src/pages/guided-tracing/J.astro
diff --git a/src/pages/capital-letter/K.astro b/src/pages/guided-tracing/K.astro
similarity index 100%
rename from src/pages/capital-letter/K.astro
rename to src/pages/guided-tracing/K.astro
diff --git a/src/pages/capital-letter/L.astro b/src/pages/guided-tracing/L.astro
similarity index 100%
rename from src/pages/capital-letter/L.astro
rename to src/pages/guided-tracing/L.astro
diff --git a/src/pages/capital-letter/M.astro b/src/pages/guided-tracing/M.astro
similarity index 100%
rename from src/pages/capital-letter/M.astro
rename to src/pages/guided-tracing/M.astro
diff --git a/src/pages/capital-letter/N.astro b/src/pages/guided-tracing/N.astro
similarity index 100%
rename from src/pages/capital-letter/N.astro
rename to src/pages/guided-tracing/N.astro
diff --git a/src/pages/capital-letter/O.astro b/src/pages/guided-tracing/O.astro
similarity index 100%
rename from src/pages/capital-letter/O.astro
rename to src/pages/guided-tracing/O.astro
diff --git a/src/pages/capital-letter/P.astro b/src/pages/guided-tracing/P.astro
similarity index 100%
rename from src/pages/capital-letter/P.astro
rename to src/pages/guided-tracing/P.astro
diff --git a/src/pages/capital-letter/Q.astro b/src/pages/guided-tracing/Q.astro
similarity index 100%
rename from src/pages/capital-letter/Q.astro
rename to src/pages/guided-tracing/Q.astro
diff --git a/src/pages/capital-letter/R.astro b/src/pages/guided-tracing/R.astro
similarity index 100%
rename from src/pages/capital-letter/R.astro
rename to src/pages/guided-tracing/R.astro
diff --git a/src/pages/capital-letter/S.astro b/src/pages/guided-tracing/S.astro
similarity index 100%
rename from src/pages/capital-letter/S.astro
rename to src/pages/guided-tracing/S.astro
diff --git a/src/pages/capital-letter/T.astro b/src/pages/guided-tracing/T.astro
similarity index 100%
rename from src/pages/capital-letter/T.astro
rename to src/pages/guided-tracing/T.astro
diff --git a/src/pages/capital-letter/U.astro b/src/pages/guided-tracing/U.astro
similarity index 100%
rename from src/pages/capital-letter/U.astro
rename to src/pages/guided-tracing/U.astro
diff --git a/src/pages/capital-letter/V.astro b/src/pages/guided-tracing/V.astro
similarity index 100%
rename from src/pages/capital-letter/V.astro
rename to src/pages/guided-tracing/V.astro
diff --git a/src/pages/capital-letter/W.astro b/src/pages/guided-tracing/W.astro
similarity index 100%
rename from src/pages/capital-letter/W.astro
rename to src/pages/guided-tracing/W.astro
diff --git a/src/pages/capital-letter/X.astro b/src/pages/guided-tracing/X.astro
similarity index 100%
rename from src/pages/capital-letter/X.astro
rename to src/pages/guided-tracing/X.astro
diff --git a/src/pages/capital-letter/Y.astro b/src/pages/guided-tracing/Y.astro
similarity index 100%
rename from src/pages/capital-letter/Y.astro
rename to src/pages/guided-tracing/Y.astro
diff --git a/src/pages/capital-letter/Z.astro b/src/pages/guided-tracing/Z.astro
similarity index 100%
rename from src/pages/capital-letter/Z.astro
rename to src/pages/guided-tracing/Z.astro
diff --git a/src/pages/small-letter/a.astro b/src/pages/guided-tracing/a.astro
similarity index 100%
rename from src/pages/small-letter/a.astro
rename to src/pages/guided-tracing/a.astro
diff --git a/src/pages/small-letter/b.astro b/src/pages/guided-tracing/b.astro
similarity index 100%
rename from src/pages/small-letter/b.astro
rename to src/pages/guided-tracing/b.astro
diff --git a/src/pages/small-letter/c.astro b/src/pages/guided-tracing/c.astro
similarity index 100%
rename from src/pages/small-letter/c.astro
rename to src/pages/guided-tracing/c.astro
diff --git a/src/pages/small-letter/d.astro b/src/pages/guided-tracing/d.astro
similarity index 100%
rename from src/pages/small-letter/d.astro
rename to src/pages/guided-tracing/d.astro
diff --git a/src/pages/small-letter/e.astro b/src/pages/guided-tracing/e.astro
similarity index 100%
rename from src/pages/small-letter/e.astro
rename to src/pages/guided-tracing/e.astro
diff --git a/src/pages/small-letter/f.astro b/src/pages/guided-tracing/f.astro
similarity index 100%
rename from src/pages/small-letter/f.astro
rename to src/pages/guided-tracing/f.astro
diff --git a/src/pages/small-letter/g.astro b/src/pages/guided-tracing/g.astro
similarity index 100%
rename from src/pages/small-letter/g.astro
rename to src/pages/guided-tracing/g.astro
diff --git a/src/pages/small-letter/h.astro b/src/pages/guided-tracing/h.astro
similarity index 100%
rename from src/pages/small-letter/h.astro
rename to src/pages/guided-tracing/h.astro
diff --git a/src/pages/small-letter/i.astro b/src/pages/guided-tracing/i.astro
similarity index 100%
rename from src/pages/small-letter/i.astro
rename to src/pages/guided-tracing/i.astro
diff --git a/src/pages/small-letter/j.astro b/src/pages/guided-tracing/j.astro
similarity index 100%
rename from src/pages/small-letter/j.astro
rename to src/pages/guided-tracing/j.astro
diff --git a/src/pages/small-letter/k.astro b/src/pages/guided-tracing/k.astro
similarity index 100%
rename from src/pages/small-letter/k.astro
rename to src/pages/guided-tracing/k.astro
diff --git a/src/pages/small-letter/l.astro b/src/pages/guided-tracing/l.astro
similarity index 100%
rename from src/pages/small-letter/l.astro
rename to src/pages/guided-tracing/l.astro
diff --git a/src/pages/small-letter/m.astro b/src/pages/guided-tracing/m.astro
similarity index 100%
rename from src/pages/small-letter/m.astro
rename to src/pages/guided-tracing/m.astro
diff --git a/src/pages/small-letter/n.astro b/src/pages/guided-tracing/n.astro
similarity index 100%
rename from src/pages/small-letter/n.astro
rename to src/pages/guided-tracing/n.astro
diff --git a/src/pages/small-letter/o.astro b/src/pages/guided-tracing/o.astro
similarity index 100%
rename from src/pages/small-letter/o.astro
rename to src/pages/guided-tracing/o.astro
diff --git a/src/pages/small-letter/p.astro b/src/pages/guided-tracing/p.astro
similarity index 100%
rename from src/pages/small-letter/p.astro
rename to src/pages/guided-tracing/p.astro
diff --git a/src/pages/small-letter/q.astro b/src/pages/guided-tracing/q.astro
similarity index 100%
rename from src/pages/small-letter/q.astro
rename to src/pages/guided-tracing/q.astro
diff --git a/src/pages/small-letter/r.astro b/src/pages/guided-tracing/r.astro
similarity index 100%
rename from src/pages/small-letter/r.astro
rename to src/pages/guided-tracing/r.astro
diff --git a/src/pages/small-letter/s.astro b/src/pages/guided-tracing/s.astro
similarity index 100%
rename from src/pages/small-letter/s.astro
rename to src/pages/guided-tracing/s.astro
diff --git a/src/pages/small-letter/t.astro b/src/pages/guided-tracing/t.astro
similarity index 100%
rename from src/pages/small-letter/t.astro
rename to src/pages/guided-tracing/t.astro
diff --git a/src/pages/small-letter/u.astro b/src/pages/guided-tracing/u.astro
similarity index 100%
rename from src/pages/small-letter/u.astro
rename to src/pages/guided-tracing/u.astro
diff --git a/src/pages/small-letter/v.astro b/src/pages/guided-tracing/v.astro
similarity index 100%
rename from src/pages/small-letter/v.astro
rename to src/pages/guided-tracing/v.astro
diff --git a/src/pages/small-letter/w.astro b/src/pages/guided-tracing/w.astro
similarity index 100%
rename from src/pages/small-letter/w.astro
rename to src/pages/guided-tracing/w.astro
diff --git a/src/pages/small-letter/x.astro b/src/pages/guided-tracing/x.astro
similarity index 100%
rename from src/pages/small-letter/x.astro
rename to src/pages/guided-tracing/x.astro
diff --git a/src/pages/small-letter/y.astro b/src/pages/guided-tracing/y.astro
similarity index 100%
rename from src/pages/small-letter/y.astro
rename to src/pages/guided-tracing/y.astro
diff --git a/src/pages/small-letter/z.astro b/src/pages/guided-tracing/z.astro
similarity index 100%
rename from src/pages/small-letter/z.astro
rename to src/pages/guided-tracing/z.astro
diff --git a/src/pages/tracing/animate-pointer.astro b/src/pages/tracing/animate-pointer.astro
deleted file mode 100644
index 0b9f4a0..0000000
--- a/src/pages/tracing/animate-pointer.astro
+++ /dev/null
@@ -1,112 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
----
-<Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
-</Layout>
-<script is:inline>
-  const config = {
-    type: Phaser.AUTO,
-    width: window.innerWidth,
-    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
-    scale: {
-      mode: Phaser.Scale.FIT,
-      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
-    },
-    scene: {
-      preload: preload,
-      create: create,
-    }
-  };
-
-  const game = new Phaser.Game(config);
-  const customWidth = window.innerWidth;
-  const customHeight = window.innerHeight;
-
-function preload() {
-  // Preload your assets here
-  this.load.image('letterA', '/assets/capital-letter/a.svg');
-  this.load.svg('handPointer', '/assets/svg/hand.svg');
-  // Load other assets as needed
-}
-
-function create() {
-  const firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
-  const secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
-  const thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
-  const ball = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
-//   ball.setVisible(false);
-    const startHeight = customHeight /2 - 140; // Starting y position
-    const endHeight = 567;   // Ending y position
-    const startWidth = customWidth / 2 + 20;
-    const endWidth = customWidth / 2 - 65;
-
-//   ball.setOrigin(0.5, 0.5);
-  ball.setScale(0.5); // Adjust scale as needed
-
-  // Define the bounce animation
-  this.tweens.add({
-    targets: ball,
-    x: {
-        getStart: () => startWidth,
-        getEnd: () => endWidth,
-    }, // End x position
-    y: {
-      getStart: () => startHeight,
-      getEnd: () => endHeight,
-    },
-    duration: 3000, // Duration of each bounce
-    ease: 'Sine.easeInOut',
-    yoyo: false,
-    repeat: -1 // -1 means it will repeat indefinitely
-  });
-  
-  // Set initial visibility and alpha values
-  firstLayer.setVisible(true);
-  secondLayer.setVisible(false);
-  thirdLayer.setVisible(false);
-  firstLayer.setAlpha(1);
-  secondLayer.setAlpha(0.5);
-  thirdLayer.setAlpha(0.5);
-
-  firstLayer.setInteractive({ draggable: true });
-
-  firstLayer.on('drag', (pointer, dragX, dragY) => {
-    // Dragging logic
-
-    // const pointerX = ( pointer.x = 394);
-    // const pointerY = (pointer.y = 139); 
-    //   if(pointerX && pointerY){
-    //     console.log("Its start Position")
-    //   }
-    if (pointer.isDown) {
-      firstLayer.setAlpha(1);
-      secondLayer.setAlpha(0.5);
-      thirdLayer.setAlpha(0.5);
-   
-    //   console.log('its drag start', pointer.x, pointer.y)
-    }
-    console.log(pointer.x, pointer.y)
-  });
-
-  firstLayer.on('dragend', (pointer) => {
-    // Drag end logic
-    firstLayer.setAlpha(0.5);
-    const pointerX = (pointer.x = 309);
-    const pointerY = (pointer.y = 390);
-     
-    if(pointerX && pointerY){
-        console.log("Its End Position")
-    }
-    // console.log(pointer.x, pointer.y)
-    
-    // Add any actions you want to perform when drag ends here 394 139 / 309 390
-  });
-}
-
-</script>
\ No newline at end of file
diff --git a/src/pages/tracing/half-round.astro b/src/pages/tracing/half-round.astro
deleted file mode 100644
index eee7073..0000000
--- a/src/pages/tracing/half-round.astro
+++ /dev/null
@@ -1,57 +0,0 @@
-<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-<!-- this.load.image('handPointer', '/assets/svg/hand.svg'); -->
-<script is:inline>
- const config = {
-  type: Phaser.AUTO,
-  width: window.innerWidth,
-  height: window.innerHeight,
-  scene: {
-    preload: preload,
-    create: create,
-    update: update
-  }
-};
-
-  const game = new Phaser.Game(config);
-  const customWidth = window.innerWidth;
-  const customHeight = window.innerHeight;
-  let ellipseCenter;
-  let ellipseRadiusX = 74;
-  let ellipseRadiusY = 100;
-  let angle = 0;
-  let rotationSpeed = 0.02; // Adjust rotation speed as needed
-  let rotatingObject;
-
-function preload(){
-    this.load.image('handPointer', '/assets/svg/hand.svg');
-    this.load.image('letterO', '/assets/capital-letter/o.svg')
-}
-function create() {
-    this.add.image(customWidth / 2, customHeight / 2, 'letterO');
-    // Create an ellipse (in this case, a visual representation)
-    // const graphics = this.add.graphics();
-    // graphics.lineStyle(2, 0xffffff);
-    // graphics.strokeEllipse(customWidth / 2, customHeight / 2, ellipseRadiusX * 2, ellipseRadiusY * 2);
-
-    ellipseCenter = new Phaser.Math.Vector2(customWidth / 2, customHeight / 2); // Center of the ellipse
-    rotatingObject = this.add.sprite(ellipseCenter.x + ellipseRadiusX, ellipseCenter.y, 'handPointer');
-    rotatingObject.setScale(0.5).setDepth(2); // Adjust scale as needed 
-}
-
-function update() {
-    // Update the angle for rotation
-    angle -= rotationSpeed;
-
-    // Calculate new position based on the angle and radii
-    const radius = Math.max(ellipseRadiusX, ellipseRadiusY);
-    const x = ellipseCenter.x + radius * Math.cos(angle);
-    const y = ellipseCenter.y + radius * Math.sin(angle);
-
-    rotatingObject.x = x;
-    rotatingObject.y = y;
-
-    // Rotate the object based on the angle (optional)
-    rotatingObject.rotation = angle;
-}
-
-</script>
\ No newline at end of file
diff --git a/src/pages/tracing/round.astro b/src/pages/tracing/round.astro
deleted file mode 100644
index fede780..0000000
--- a/src/pages/tracing/round.astro
+++ /dev/null
@@ -1,56 +0,0 @@
-<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-<!-- this.load.image('handPointer', '/assets/svg/hand.svg'); -->
-<script is:inline>
- const config = {
-  type: Phaser.AUTO,
-  width: window.innerWidth,
-  height: window.innerHeight,
-  scene: {
-    preload: preload,
-    create: create,
-    update: update
-  }
-};
-
-const game = new Phaser.Game(config);
-const customWidth = window.innerWidth;
-const customHeight = window.innerHeight;
-let ellipseCenter;
-let ellipseRadiusX = 74;
-let ellipseRadiusY = 100;
-let angle = 0;
-let rotationSpeed = 0.02; // Adjust rotation speed as needed
-let rotatingObject;
-
-function preload(){
-    this.load.image('handPointer', '/assets/svg/hand.svg');
-    this.load.image('letterO', '/assets/capital-letter/o.svg')
-}
-function create() {
-    this.add.image(customWidth / 2, customHeight / 2, 'letterO');
-    // Create an ellipse (in this case, a visual representation)
-    // const graphics = this.add.graphics();
-    // graphics.lineStyle(2, 0xffffff);
-    // graphics.strokeEllipse(customWidth / 2, customHeight / 2, ellipseRadiusX * 2, ellipseRadiusY * 2);
-
-    ellipseCenter = new Phaser.Math.Vector2(customWidth / 2, customHeight / 2); // Center of the ellipse
-    rotatingObject = this.add.sprite(ellipseCenter.x + ellipseRadiusX, ellipseCenter.y, 'handPointer');
-    rotatingObject.setScale(0.5).setDepth(2); // Adjust scale as needed 
-}
-
-function update() {
-    // Update the angle for rotation
-  angle -= rotationSpeed;
-
-// Calculate new position based on the angle and radii
-const x = ellipseCenter.x + ellipseRadiusX * Math.cos(angle);
-const y = ellipseCenter.y + ellipseRadiusY * Math.sin(angle);
-
-rotatingObject.x = x;
-rotatingObject.y = y;
-
-// Rotate the object based on the angle (optional)
-rotatingObject.rotation = angle;
-}
-
-</script>
\ No newline at end of file
diff --git a/src/pages/tracing/snapshot.astro b/src/pages/tracing/snapshot.astro
deleted file mode 100644
index 21b6da2..0000000
--- a/src/pages/tracing/snapshot.astro
+++ /dev/null
@@ -1,136 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
----
-<Layout title="">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-      </main>
-</Layout>
-<script is:inline>
-  class Example extends Phaser.Scene {
-    isKeyDown = false;
-    isMouseDown = false;
-    graphicsPath = [];
-    graphics;
-    snapHistory = [];
-    time = 0;
-    div = document.createElement('div');
-
-    preload() {
-        this.load.image('myImage', 'assets/sprites/phaser1.png');
-        this.load.glsl('shader0', 'assets/shaders/shader0.frag');
-    }
-
-    create() {
-        this.div.innerHTML = 'PRESS SPACE TO TAKE SNAPSHOT<br>';
-        document.body.appendChild(this.div);
-
-        for (let i = 0; i < 5; ++i) {
-            const image = this.add.image(Math.random() * 800, Math.random() * 600, 'myImage');
-        }
-
-        this.graphics = this.add.graphics({ x: 0, y: 0 });
-
-        game.canvas.onmousedown = (e) => {
-            this.isMouseDown = true;
-            this.graphics.clear();
-            this.graphicsPath.length = 0;
-        };
-        game.canvas.onmouseup = (e) => {
-            this.isMouseDown = false;
-        };
-        game.canvas.onmousemove = (e) => {
-            const mouseX = e.clientX - game.canvas.offsetLeft;
-            const mouseY = e.clientY - game.canvas.offsetTop;
-            if (this.isMouseDown) {
-                this.graphicsPath.push({ x: mouseX, y: mouseY });
-            }
-        };
-        window.onkeydown = (e) => {
-            if (e.keyCode === 32 && !this.isKeyDown) {
-                game.renderer.snapshot((image) => {
-                    image.style.width = '160px';
-                    image.style.height = '120px';
-                    image.style.paddingLeft = '2px';
-                    this.snapHistory.push(image);
-                    console.log('snap!');
-                    document.body.appendChild(image);
-                });
-                this.isKeyDown = true;
-            }
-        };
-        window.onkeyup = (e) => {
-            if (e.keyCode === 32) {
-                this.isKeyDown = false;
-            }
-        };
-
-        // Create a "Save Now" button
-        const saveButton = this.add.text(650, 10, 'Save Now', { fill: '#05b3a4' });
-        saveButton.setInteractive();
-        saveButton.on('pointerdown', () => {
-            // Hide the "Save Now" text
-            saveButton.visible = false;
-
-            // Trigger the snapshot
-            game.renderer.snapshot((image) => {
-                image.style.width = '160px';
-                image.style.height = '120px';
-                image.style.paddingLeft = '2px';
-                this.snapHistory.push(image);
-                console.log('snap!');
-                document.body.appendChild(image);
-
-                // Download the snapshot as an image
-                const link = document.createElement('a');
-                link.href = image.src;
-                link.download = 'snapshot.png';
-                link.click();
-                document.body.removeChild(image);  // Remove the image after download
-
-                // Disable snapshot preview
-                this.graphics.clear();
-                this.graphicsPath = [];
-
-                // Show the "Save Now" text again
-                saveButton.visible = true;
-            });
-        });
-    }
-
-    update() {
-        const length = this.graphicsPath.length;
-
-        this.graphics.clear();
-        this.graphics.lineStyle(10.0, 0xffff00, 1.0);
-        this.graphics.beginPath();
-        for (let i = 0; i < length; ++i) {
-            const node = this.graphicsPath[i];
-
-            if (i !== 0) {
-                this.graphics.lineTo(node.x, node.y);
-            } else {
-                this.graphics.moveTo(node.x, node.y);
-            }
-        }
-        this.graphics.strokePath();
-        this.graphics.closePath();
-
-        this.time += 0.01;
-    }
-}
-
-const config = {
-    type: Phaser.WEBGL,
-    width: 800,
-    height: 600,
-    backgroundColor: '#2d2d2d',
-    parent: 'phaser-example',
-    scene: Example,
-};
-
-const game = new Phaser.Game(config);
-
-</script>
\ No newline at end of file
diff --git a/src/pages/tracing/temp.astro b/src/pages/tracing/temp.astro
deleted file mode 100644
index 9f8e6d3..0000000
--- a/src/pages/tracing/temp.astro
+++ /dev/null
@@ -1,131 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
----
-<Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
-</Layout>
-<script is:inline>
-  const isMobile = window.innerWidth <= 768;
-  const config = {
-    type: Phaser.AUTO,
-    width: window.innerWidth,
-    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
-    scale: {
-      mode: Phaser.Scale.FIT,
-      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
-    },
-    scene: {
-      preload: preload,
-      create: create,
-      update: update
-    }
-  };
-  const game = new Phaser.Game(config);
-  
-  const customWidth = window.innerWidth;
-  const customHeight = window.innerHeight;
-  let firstLayer, secondLayer, thirdLayer;
-  let graphics;
-
-
-  function preload() {
-    this.load.svg('letterA', '/assets/letter/a.svg');
-    this.load.svg('layer1', '/assets/letter/a_l1.svg');
-    this.load.svg('layer2', '/assets/letter/a_l2.svg');
-    this.load.svg('layer3', '/assets/letter/a_l3.svg');
-    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
-    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
-    this.load.audio('slide', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png')
-  }
-
-  function create() {
-
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo')
-    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-    this.time.delayedCall(2000, () => {
-      firstScreen.setVisible(false);
-      showLayers.call(this);
-    }, [], this);
-    
-  }
-
-  function showLayers() {
-    let textX, textY;
-
-    firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1').setInteractive({ draggable: true });
-    textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-          textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-    const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
-    const slantLeftAudio = this.sound.add('slantLeft');
-    slantLeftAudio.play();
-    firstLayer.setDepth(1);
-    firstLayer.setAlpha(0.5);
-    firstLayer.setInteractive({ draggable: true });
-
-    secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2').setInteractive({ draggable: true });
-    textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-    const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
-    const slantRightAudio = this.sound.add('slantRight');
-    secondTextLayer.setVisible(false);
-    secondLayer.setDepth(1);
-    secondLayer.setAlpha(0.5);
-    secondLayer.setInteractive({ draggable: true });
-    secondLayer.setVisible(false);
-
-    thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3').setInteractive({ draggable: true });
-    textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-    const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
-    const slideAudio = this.sound.add('slide');
-    thirdTextLayer.setVisible(false);
-    thirdLayer.setDepth(1.1);
-    thirdLayer.setAlpha(0.5);
-    thirdLayer.setInteractive({ draggable: true });
-    thirdLayer.setVisible(false);
-
-    graphics = this.add.graphics();
-    graphics.lineStyle(5, 0xFF0000).setDepth(2); // Set the line style to red
-
-    // Create a variable to track if drawing is in progress
-    let isDrawing = false;
-
-    // Event for starting to draw
-    firstLayer.on('pointerdown', (pointer) => {
-        isDrawing = true;
-        graphics.beginPath();
-        graphics.moveTo(pointer.x, pointer.y);
-    });
-
-    // Event for drawing while dragging
-    firstLayer.on('pointermove', (pointer) => {
-        if (isDrawing) {
-            graphics.lineTo(pointer.x, pointer.y);
-            graphics.strokePath();
-        }
-    });
-
-    // Event for stopping drawing
-    firstLayer.on('pointerup', () => {
-        isDrawing = false;
-    });
-    
-
-    
-    
-  }
-
-  function update() {
-    // Update any game logic if needed
-  }
-
-</script>
\ No newline at end of file
diff --git a/src/pages/tracing/temp2.astro b/src/pages/tracing/temp2.astro
deleted file mode 100644
index 98dbd54..0000000
--- a/src/pages/tracing/temp2.astro
+++ /dev/null
@@ -1,196 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
----
-<Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
-</Layout>
-<script is:inline>
-  const isMobile = window.innerWidth <= 768;
-  const drawingZone = {
-      x: isMobile ? 0 : window.innerWidth / 4,
-      y: window.innerHeight / 4,
-      width: isMobile ? window.innerWidth : window.innerWidth / 2,
-      height: window.innerHeight / 2,
-    };
-    let draggingAllowed = false;
-
-  const config = {
-    type: Phaser.AUTO,
-    width: window.innerWidth,
-    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
-    scale: {
-      mode: Phaser.Scale.FIT,
-      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
-    },
-    scene: {
-      preload: preload,
-      create: create,
-      update: update
-    }
-  };
-
-  const game = new Phaser.Game(config);
-  const customWidth = window.innerWidth;
-  const customHeight = window.innerHeight;
-  let firstLayer, secondLayer, thirdLayer;
-  let isDragging =  false;
-  let lineStartPosition =  {x:0 , y:0};
-  let draggingLine;
-
-  function preload() {
-    this.load.svg('letterA', '/assets/letter/a.svg');
-    this.load.svg('layer1', '/assets/letter/a_l1.svg');
-    this.load.svg('layer2', '/assets/letter/a_l2.svg');
-    this.load.svg('layer3', '/assets/letter/a_l3.svg');
-    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
-    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
-    this.load.audio('slide', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
-    this.load.image('succesImage', '/assets/svg/tick.svg');
-  }
-
-  function create() {
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-
-    this.time.delayedCall(2000, () => {
-      firstScreen.setVisible(false);
-      showLayers.call(this);
-    }, [], this);
-    this.add.rectangle(drawingZone.x, drawingZone.y, drawingZone.width, drawingZone.height, 0x000000, 0.2);
-    
-    draggingLine = this.add.graphics();
-    draggingLine.lineStyle(10, 0xff0000).setDepth(1.5);
-
-    // draggingLine = this.add.graphics();
-    // draggingLine.lineStyle(10, 0xff0000).setDepth(1.5);   //o\\ 5 is the line width, 0xff0000 is the color (red)
-  }
-
-  function showLayers() {
-    let textX, textY;
-
-      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slantLeftAudio = this.sound.add('slantLeft');
-      slantLeftAudio.play();
-      firstLayer.setDepth(1);
-      firstLayer.setAlpha(0.5);
-      firstLayer.setInteractive({ draggable: true });
-
-      secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slantRightAudio = this.sound.add('slantRight');
-      secondTextLayer.setVisible(false);
-      secondLayer.setDepth(1);
-      secondLayer.setAlpha(0.5);
-      secondLayer.setInteractive({ draggable: true });
-      secondLayer.setVisible(false);
-
-      thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slideAudio = this.sound.add('slide');
-      thirdTextLayer.setVisible(false);
-      thirdLayer.setDepth(1.1);
-      // thirdLayer.setScale(1.15);
-      thirdLayer.setAlpha(0.5);
-      thirdLayer.setInteractive({ draggable: true });
-      thirdLayer.setVisible(false);
-
-      firstLayer.on('drag', (pointer) => {
-        if (pointer.isDown && isWithinDrawingZone(pointer)) {
-          firstTextLayer.setVisible(false);
-          secondTextLayer.setVisible(true);
-          slantRightAudio.play();
-          secondLayer.setVisible(true);
-          firstLayer.setAlpha(1);
-          secondLayer.setAlpha(0.5);
-          thirdLayer.setAlpha(0.5);
-          draggingAllowed = true;
-        } else {
-          firstLayer.setAlpha(0.5);
-          draggingAllowed = false;
-        }
-      });
-  
-      secondLayer.on('drag', (pointer) => {
-        if (pointer.isDown && isWithinDrawingZone(pointer)) {
-          secondTextLayer.setVisible(false);
-          thirdTextLayer.setVisible(true);
-          slideAudio.play();
-          thirdLayer.setVisible(true);
-          secondLayer.setAlpha(1);
-          thirdLayer.setAlpha(0.5);
-          draggingAllowed = true;
-        } else {
-          secondLayer.setAlpha(0.5);
-          draggingAllowed = false;
-        }
-      });
-  
-      thirdLayer.on('drag', (pointer) => {
-        if (pointer.isDown && isWithinDrawingZone(pointer)) {
-          thirdLayer.setAlpha(1);
-          thirdTextLayer.setVisible(false);
-          draggingAllowed = true;
-        } else {
-          thirdLayer.setAlpha(0.5);
-          draggingAllowed = false;
-        }
-      });
-  
-      this.input.on('pointerdown',  dragStart);
-      this.input.on('pointerup',    dragEnd);
-      this.input.on('pointermove',  drag);
-  }
-
-  function dragStart(pointer) {
-      if (pointer.isDown && isWithinDrawingZone(pointer) && draggingAllowed) {
-        isDragging = true;
-        lineStartPosition.x = pointer.x;
-        lineStartPosition.y = pointer.y;
-      }
-    }
-  
-    function drag(pointer) {
-      if (isDragging) {
-        // draggingLine.clear();
-        draggingLine.beginPath();
-        draggingLine.moveTo(lineStartPosition.x, lineStartPosition.y);
-        draggingLine.lineTo(pointer.x, pointer.y);
-        draggingLine.strokePath();
-      }
-    }
-  
-    function dragEnd() {
-      isDragging = false;
-    }
-  
-    function update() {
-      // Update any game logic if needed
-    }
-  
-    function isWithinDrawingZone(pointer) {
-      return (
-        pointer.x >= drawingZone.x &&
-        pointer.x <= drawingZone.x + drawingZone.width &&
-        pointer.y >= drawingZone.y &&
-        pointer.y <= drawingZone.y + drawingZone.height
-      );
-    }
-
-
-</script>
\ No newline at end of file
diff --git a/src/pages/tracing/temp4.astro b/src/pages/tracing/temp4.astro
deleted file mode 100644
index b32ac89..0000000
--- a/src/pages/tracing/temp4.astro
+++ /dev/null
@@ -1,158 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
----
-<Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
-</Layout>
-<script is:inline>
-  const isMobile = window.innerWidth <= 768;
-  const drawingZone = {
-    x: isMobile ? 0 : window.innerWidth / 4,
-    y: window.innerHeight / 4,
-    width: isMobile ? window.innerWidth : window.innerWidth / 2,
-    height: window.innerHeight / 2,
-  };
-
-  const config = {
-    type: Phaser.AUTO,
-    width: window.innerWidth,
-    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
-    scale: {
-      mode: Phaser.Scale.FIT,
-      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
-    },
-    scene: {
-      preload: preload,
-      create: create,
-      update: update
-    }
-  };
-
-  const game = new Phaser.Game(config);
-  const customWidth = window.innerWidth;
-  const customHeight = window.innerHeight;
-  let firstLayer, secondLayer, thirdLayer;
-  let isDragging =  false;
-  let lineStartPosition =  {x:0 , y:0};
-  let draggingLine;
-
-  function preload() {
-    this.load.svg('letterA', '/assets/letter/a.svg');
-    this.load.svg('layer1', '/assets/letter/a_l1.svg');
-    this.load.svg('layer2', '/assets/letter/a_l2.svg');
-    this.load.svg('layer3', '/assets/letter/a_l3.svg');
-    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
-    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
-    this.load.audio('slide', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
-  }
-
-  function create() {
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-
-    this.time.delayedCall(2000, () => {
-      firstScreen.setVisible(false);
-      showLayers.call(this);
-    }, [], this);
-  }
-
-  function showLayers() {
-    let textX, textY;
-
-      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slantLeftAudio = this.sound.add('slantLeft');
-      slantLeftAudio.play();
-      firstLayer.setDepth(1);
-      firstLayer.setAlpha(0.5);
-      firstLayer.setInteractive({ draggable: true });
-
-      secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slantRightAudio = this.sound.add('slantRight');
-      secondTextLayer.setVisible(false);
-      secondLayer.setDepth(1);
-      secondLayer.setAlpha(0.5);
-      secondLayer.setInteractive({ draggable: true });
-      secondLayer.setVisible(false);
-
-      thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slideAudio = this.sound.add('slide');
-      thirdTextLayer.setVisible(false);
-      thirdLayer.setDepth(1.1);
-      // thirdLayer.setScale(1.15);
-      thirdLayer.setAlpha(0.5);
-      thirdLayer.setInteractive({ draggable: true });
-      thirdLayer.setVisible(false);
-
-      let isDrawing = false;
-
-      firstLayer.on('drag', (pointer) => {
-        isDrawing = true;
-        graphics.beginPath();
-        graphics.moveTo(pointer.x, pointer.y);
-        if (pointer.isDown) {
-          firstTextLayer.setVisible(false);
-          secondTextLayer.setVisible(true);
-          slantRightAudio.play();
-          secondLayer.setVisible(true);
-          firstLayer.setAlpha(1);
-          secondLayer.setAlpha(0.5);
-          thirdLayer.setAlpha(0.5);
-        } else {
-          firstLayer.setAlpha(0.5);
-        }
-      });
-      firstLayer.on('pointermove', (pointer) => {
-        if (isDrawing) {
-            graphics.lineTo(pointer.x, pointer.y);
-            graphics.strokePath();
-        }
-    });
-
-      secondLayer.on('drag', (pointer) => {
-        if (pointer.isDown) {
-          secondTextLayer.setVisible(false);
-          thirdTextLayer.setVisible(true);
-          slideAudio.play();
-          thirdLayer.setVisible(true);
-          secondLayer.setAlpha(1);
-          thirdLayer.setAlpha(0.5);
-        } else {
-          secondLayer.setAlpha(0.5);
-        }
-      });
-
-      thirdLayer.on('drag', (pointer) => {
-        if (pointer.isDown) {
-          thirdLayer.setAlpha(1);
-          thirdTextLayer.setVisible(false);
-          this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
-        } else {
-          thirdLayer.setAlpha(0.5);
-        }
-      });
-  }
-
-  function update() {
-    // Update any game logic if needed
-  }
-
-
-</script>
\ No newline at end of file
diff --git a/src/pages/tracing/test.astro b/src/pages/tracing/test.astro
deleted file mode 100644
index 4cac65c..0000000
--- a/src/pages/tracing/test.astro
+++ /dev/null
@@ -1,266 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
----
-<Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
-</Layout>
-<script is:inline>
-  const isMobile = window.innerWidth <= 768;
-  const drawingZone = {
-    x: isMobile ? 0 : window.innerWidth / 4,
-    y: window.innerHeight / 4,
-    width: isMobile ? window.innerWidth : window.innerWidth / 2,
-    height: window.innerHeight / 2,
-  };
-
-  const config = {
-    type: Phaser.AUTO,
-    width: window.innerWidth,
-    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
-    scale: {
-      mode: Phaser.Scale.FIT,
-      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
-    },
-    scene: {
-      preload: preload,
-      create: create,
-      update: update
-    }
-  };
-  const game = new Phaser.Game(config);
-  const customWidth = window.innerWidth;
-  const customHeight = window.innerHeight;
-  let firstLayer, secondLayer, thirdLayer;
-  let graphics;
-  let isDrawing = false;
-  // let hideButton;
-
-  function preload() {
-    this.load.svg('letterA', '/assets/capital-letter/a.svg');
-    this.load.svg('layer1', '/assets/capital-letter/a_l1.svg');
-    this.load.svg('layer2', '/assets/capital-letter/a_l2.svg');
-    this.load.svg('layer3', '/assets/capital-letter/a_l3.svg');
-    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
-    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
-    this.load.audio('slide', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
-    this.load.svg('succesImage', '/assets/svg/tick.svg');
-    this.load.svg('handPointer', '/assets/svg/hand.svg');
-  }
-
-  function create() {
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
-
-    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
-    firstScreen.setVisible(false);
-
-    let hideButton = this.add.text(customWidth / 2, customHeight / 1.1, "Let`s Do", { font: '24px quicksand', fill: '#05b3a4' });
-    hideButton.setInteractive().on('pointerdown', () => {
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      handPointerLeft.setVisible(false);
-      handPointerRight.setVisible(false);
-      handPointeSlide.setVisible(false);
-    });
-    hideButton.setVisible(false);
-    
-    let demoButton = this.add.text(customWidth / 2, customHeight / 1.1, "Help", { font: '24px quicksand', fill: '#05b3a4' });
-    demoButton.setInteractive().on('pointerdown', () => {
-      graphics.setVisible(false);
-      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      handPointerLeft.setVisible(true);
-      handPointerRight.setVisible(true);
-      handPointeSlide.setVisible(true);
-    });
-
-
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-
-    let textX, textY;
-
-      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slantLeftAudio = this.sound.add('slantLeft');
-      slantLeftAudio.play();
-      firstLayer.setDepth(1);
-      firstLayer.setAlpha(0.5);
-      firstLayer.setInteractive({ draggable: true });
-
-      secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slantRightAudio = this.sound.add('slantRight');
-      secondTextLayer.setVisible(false);
-      secondLayer.setDepth(1);
-      secondLayer.setAlpha(0.5);
-      secondLayer.setInteractive({ draggable: true });
-      secondLayer.setVisible(false);
-
-      thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slideAudio = this.sound.add('slide');
-      thirdTextLayer.setVisible(false);
-      thirdLayer.setDepth(1.1);
-      // thirdLayer.setScale(1.15);
-      thirdLayer.setAlpha(0.5);
-      thirdLayer.setInteractive({ draggable: true });
-      thirdLayer.setVisible(false);
-
-      firstLayer.on('drag', (pointer) => {
-        if (pointer.isDown) {
-          firstTextLayer.setVisible(false);
-          secondTextLayer.setVisible(true);
-          slantRightAudio.play();
-          secondLayer.setVisible(true);
-          firstLayer.setAlpha(1);
-          secondLayer.setAlpha(0.5);
-          thirdLayer.setAlpha(0.5);
-        } else {
-          firstLayer.setAlpha(0.5);
-        }
-      });
-
-      secondLayer.on('drag', (pointer) => {
-        if (pointer.isDown) {
-          secondTextLayer.setVisible(false);
-          thirdTextLayer.setVisible(true);
-          slideAudio.play();
-          thirdLayer.setVisible(true);
-          secondLayer.setAlpha(1);
-          thirdLayer.setAlpha(0.5);
-        } else {
-          secondLayer.setAlpha(0.5);
-        }
-      });
-
-      thirdLayer.on('drag', (pointer) => {
-        if (pointer.isDown) {
-          thirdLayer.setAlpha(1);
-          thirdTextLayer.setVisible(false);
-          // const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
-          // succesImage.setAlpha(0.2);
-          // this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
-        } else {
-          thirdLayer.setAlpha(0.5);
-        }
-      });
-      graphics = this.add.graphics();
-      graphics.lineStyle(15, 0x05b3a4, 2).setDepth(2); // Set line style (width, color, alpha)
-
-      this.input.on('pointerdown', function (pointer) {
-        isDrawing = true;
-        graphics.moveTo(pointer.x, pointer.y);
-       });
-
-      this.input.on('pointerup', function () {
-        isDrawing = false;
-      });
-
-      this.input.on('pointermove', function (pointer) {
-        if (!isDrawing) return;
-
-        graphics.lineTo(pointer.x, pointer.y);
-        graphics.strokePath();
-      });
-        const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
-        const startHeightLeft = customHeight /2 - 140; // Starting y position
-        const endHeightLeft = 567;   // Ending y position
-        const startWidthLeft = customWidth / 2 + 20;
-        const endWidthLeft = customWidth / 2 - 65;
-        //   handPointer.setOrigin(0.5, 0.5);
-        handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed
-        // Define the bounce animation
-        this.tweens.add({
-          targets: handPointerLeft,
-          x: {
-              getStart: () => startWidthLeft,
-              getEnd: () => endWidthLeft,
-          }, // End x position
-          y: {
-            getStart: () => startHeightLeft,
-            getEnd: () => endHeightLeft,
-          },
-          duration: 3000, // Duration of each bounce
-          ease: 'Sine.easeInOut',
-          yoyo: false,
-          repeat: -1 // -1 means it will repeat indefinitely
-        });
-        const handPointerRight = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
-        const startHeightRight = customHeight /2 - 140; // Starting y position
-        const endHeightRight = 567;   // Ending y position
-        const startWidthRight = customWidth / 2 + 20;
-        const endWidthRight = customWidth - 530;
-        //   handPointer.setOrigin(0.5, 0.5);
-        handPointerRight.setScale(0.5).setDepth(2).setAngle(360); // Adjust scale as needed
-        // Define the bounce animation
-        this.tweens.add({
-          targets: handPointerRight,
-          x: {
-              getStart: () => startWidthRight,
-              getEnd: () => endWidthRight,
-          }, // End x position
-          y: {
-            getStart: () => startHeightRight,
-            getEnd: () => endHeightRight,
-          },
-          duration: 3000, // Duration of each bounce
-          ease: 'Sine.easeInOut',
-          yoyo: false,
-          repeat: -1 // -1 means it will repeat indefinitely
-        });
-        const handPointeSlide = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
-        const startHeightSlide = customHeight / 2 + 17; // Starting y position
-        const endHeightSlide = customHeight / 2 + 17;   // Ending y position
-
-        const startWidthSlide = customWidth / 2 - 60;
-        const endWidthSlide = customWidth / 2 + 55;
-        //   handPointer.setOrigin(0.5, 0.5);
-        handPointeSlide.setScale(0.5).setDepth(2).setAngle(45); // Adjust scale as needed
-        // Define the bounce animation
-        this.tweens.add({
-          targets: handPointeSlide,
-          x: {
-              getStart: () => startWidthSlide,
-              getEnd: () => endWidthSlide,
-          }, // End x position
-          y: {
-            getStart: () => startHeightSlide,
-            getEnd: () => endHeightSlide,
-          },
-          duration: 3000, // Duration of each bounce
-          ease: 'Sine.easeInOut',
-          yoyo: false,
-          repeat: -1 // -1 means it will repeat indefinitely
-        });
-        handPointerLeft.setVisible(false);
-        handPointerRight.setVisible(false);
-        handPointeSlide.setVisible(false);
-
-      // Start Position 626 317
-
-  }
-  // function showLayersWithFadeIn() {    
-      
-  // }
-
-  function update() {
-    // Update any game logic if needed
-  }
-</script>
\ No newline at end of file
diff --git a/src/pages/tracing/test3.astro b/src/pages/tracing/test3.astro
deleted file mode 100644
index a2cb78f..0000000
--- a/src/pages/tracing/test3.astro
+++ /dev/null
@@ -1,23 +0,0 @@
-<script is:inline>
- function create() {
-  const startX = 100;  // X coordinate for the start point
-  const startY = 300;  // Y coordinate for the start point
-  const endY = 500;    // Y coordinate for the end point
-
-  const ball = this.add.sprite(startX, startY, 'ball');
-  ball.setScale(0.5); // Adjust scale as needed
-  ball.setOrigin(0.5, 0.5);
-
-  // Define the bounce animation
-  this.tweens.add({
-    targets: ball,
-    y: endY,         // End point Y coordinate
-    duration: 1000,  // Duration of each bounce
-    ease: 'Sine.easeInOut',
-    yoyo: true,
-    repeat: -1       // -1 means it will repeat indefinitely
-  });
-}
-
-
-</script>
\ No newline at end of file
diff --git a/src/pages/tracing/tracing-importeat.astro b/src/pages/tracing/tracing-importeat.astro
deleted file mode 100644
index 36c512b..0000000
--- a/src/pages/tracing/tracing-importeat.astro
+++ /dev/null
@@ -1,193 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
----
-<Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
-</Layout>
-<script is:inline>
-  const isMobile = window.innerWidth <= 768;
-  const drawingZone = {
-    x: isMobile ? 0 : window.innerWidth / 4,
-    y: window.innerHeight / 4,
-    width: isMobile ? window.innerWidth : window.innerWidth / 2,
-    height: window.innerHeight / 2,
-  };
-
-  const config = {
-    type: Phaser.AUTO,
-    width: window.innerWidth,
-    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
-    scale: {
-      mode: Phaser.Scale.FIT,
-      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
-    },
-    scene: {
-      preload: preload,
-      create: create,
-      update: update
-    }
-  };
-
-  const game = new Phaser.Game(config);
-  const customWidth = window.innerWidth;
-  const customHeight = window.innerHeight;
-  let firstLayer, secondLayer, thirdLayer;
-  let isDragging =  false;
-  let lineStartPosition =  {x:0 , y:0};
-  let draggingLine;
-
-  function preload() {
-    this.load.svg('letterA', '/assets/letter/a.svg');
-    this.load.svg('layer1', '/assets/letter/a_l1.svg');
-    this.load.svg('layer2', '/assets/letter/a_l2.svg');
-    this.load.svg('layer3', '/assets/letter/a_l3.svg');
-    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
-    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
-    this.load.audio('slide', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
-    this.load.svg('succesImage', '/assets/svg/tick.svg');
-  }
-
-
-  function create() {
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-
-    this.time.delayedCall(2000, () => {
-      this.tweens.add({
-        targets: firstScreen,
-        alpha: 0,
-        scaleX: 0.5,
-        scaleY: 0.5,
-        duration: 1000,
-        onComplete: () => {
-          firstScreen.setVisible(false);
-          firstScreen.setScale(1);
-          showLayersWithFadeIn.call(this);
-        }
-      });
-    }, [], this);
-
-    draggingLine = this.add.graphics();
-    draggingLine.lineStyle(10, 0x05b3a4).setDepth(1.5);   //o\\ 5 is the line width, 0xff0000 is the color (red)
-  }
-  function showLayersWithFadeIn() {
-    this.tweens.add({
-      targets: [firstLayer, secondLayer, thirdLayer],
-      alpha: 1,
-      duration: 1000, // Duration of the tween in milliseconds
-      delay: 500, // Delay before the fade-in starts
-      ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
-    });
-    let textX, textY;
-
-      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slantLeftAudio = this.sound.add('slantLeft');
-      slantLeftAudio.play();
-      firstLayer.setDepth(1);
-      firstLayer.setAlpha(0.5);
-      firstLayer.setInteractive({ draggable: true });
-
-      secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slantRightAudio = this.sound.add('slantRight');
-      secondTextLayer.setVisible(false);
-      secondLayer.setDepth(1);
-      secondLayer.setAlpha(0.5);
-      secondLayer.setInteractive({ draggable: true });
-      secondLayer.setVisible(false);
-
-      thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slideAudio = this.sound.add('slide');
-      thirdTextLayer.setVisible(false);
-      thirdLayer.setDepth(1.1);
-      // thirdLayer.setScale(1.15);
-      thirdLayer.setAlpha(0.5);
-      thirdLayer.setInteractive({ draggable: true });
-      thirdLayer.setVisible(false);
-
-      firstLayer.on('drag', (pointer) => {
-        if (pointer.isDown) {
-          firstTextLayer.setVisible(false);
-          secondTextLayer.setVisible(true);
-          slantRightAudio.play();
-          secondLayer.setVisible(true);
-          firstLayer.setAlpha(1);
-          secondLayer.setAlpha(0.5);
-          thirdLayer.setAlpha(0.5);
-        } else {
-          firstLayer.setAlpha(0.5);
-        }
-      });
-
-      secondLayer.on('drag', (pointer) => {
-        if (pointer.isDown) {
-          secondTextLayer.setVisible(false);
-          thirdTextLayer.setVisible(true);
-          slideAudio.play();
-          thirdLayer.setVisible(true);
-          secondLayer.setAlpha(1);
-          thirdLayer.setAlpha(0.5);
-        } else {
-          secondLayer.setAlpha(0.5);
-        }
-      });
-
-      thirdLayer.on('drag', (pointer) => {
-        if (pointer.isDown) {
-          thirdLayer.setAlpha(1);
-          thirdTextLayer.setVisible(false);
-          // const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
-          // succesImage.setAlpha(0.2);
-          // this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
-        } else {
-          thirdLayer.setAlpha(0.5);
-        }
-      });
-    this.input.on('pointerdown',  dragStart);
-    this.input.on('pointerup',    dragEnd);
-    this.input.on('pointermove',  drag);
-  }
-
-  function dragStart(pointer) {
-    if (pointer.isDown) {
-      isDragging = true;
-      lineStartPosition.x = pointer.x;
-      lineStartPosition.y = pointer.y;
-    }
-  }
-
-  function drag(pointer) {
-    if (isDragging) {
-      // draggingLine.clear();
-      draggingLine.beginPath();
-      draggingLine.moveTo(lineStartPosition.x, lineStartPosition.y);
-      draggingLine.lineTo(pointer.x, pointer.y);
-      draggingLine.strokePath();
-    }
-  }
-
-  function dragEnd() {
-    isDragging = false;
-  }
-
-  function update() {
-    // Update any game logic if needed
-  }
-</script>
\ No newline at end of file
diff --git a/src/pages/tracing/tracing2.astro b/src/pages/tracing/tracing2.astro
deleted file mode 100644
index d7742d7..0000000
--- a/src/pages/tracing/tracing2.astro
+++ /dev/null
@@ -1,134 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
----
-<Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
-</Layout>
-<script is:inline>
-const config = {
-  type: Phaser.AUTO,
-  width: 800,
-  height: 600,
-  scene: {
-    create: create,
-    update: update
-  }
-};
-
-const game = new Phaser.Game(config);
-
-let predefinedPath;
-let dragGraphics;
-let isDragging = false;
-
-function create() {
-  // Define the predefined path (letter 'A' in this example)
-  predefinedPath = new Phaser.Curves.Path(100, 300);
-  predefinedPath.lineTo(300, 100);
-  predefinedPath.lineTo(500, 300);
-  predefinedPath.moveTo(200, 200);
-  predefinedPath.lineTo(400, 200);
-
-  // Create graphics for the predefined path (letter 'A' in this example)
-  const graphics = this.add.graphics();
-  graphics.lineStyle(2, 0x00ff00);  // Green color for the predefined path
-  predefinedPath.draw(graphics);
-
-  dragGraphics = this.add.graphics();
-  this.input.on('pointerdown', startDragging);
-  this.input.on('pointerup', stopDragging);
-  this.input.on('pointermove', dragWithinPath);
-}
-
-function calculateSpacedPoints(curve, spacing) {
-  const spacedPoints = [];
-
-  for (let t = 0; t <= 1; t += spacing) {
-    const point = curve.getPoint(t);
-    spacedPoints.push({ x: point.x, y: point.y });
-  }
-
-  return spacedPoints;
-}
-function dragWithinPath(pointer) {
-  if (isDragging) {
-    const dragX = pointer.x;
-    const dragY = pointer.y;
-
-    // Check if the dragged point is inside the predefined path
-    const isInsidePath = predefinedPath.contains(dragX, dragY);
-
-    if (isInsidePath) {
-      // Draw a line to represent the dragged path
-      dragGraphics.lineTo(dragX, dragY);
-      dragGraphics.strokePath();
-    }
-  }
-}
-
-function startDragging(pointer) {
-  if (!isDragging && predefinedPath) {
-    const spacing = 0.02; // Adjust this value as needed
-    const distanceThreshold = 10; // Adjust this value as needed
-    let isNearPath = false;
-
-    // Iterate through the curves of the predefined path
-    for (let i = 0; i < predefinedPath.curves.length; i++) {
-      const curve = predefinedPath.curves[i];
-      const spacedPoints = calculateSpacedPoints(curve, spacing);
-
-      // Check if the pointer is within a certain distance to any of the spaced points
-      for (let j = 0; j < spacedPoints.length; j++) {
-        const point = spacedPoints[j];
-        const distance = Phaser.Math.Distance.Between(point.x, point.y, pointer.x, pointer.y);
-
-        if (distance < distanceThreshold) {
-          isNearPath = true;
-          break;
-        }
-      }
-
-      if (isNearPath) {
-        break;
-      }
-    }
-
-    if (isNearPath) {
-      isDragging = true;
-      dragGraphics.clear();
-      dragGraphics.lineStyle(4, 0xff0000); // Red color for the dragging path
-      dragGraphics.beginPath();
-      dragGraphics.moveTo(pointer.x, pointer.y);
-    }
-  }
-}
-
-function stopDragging() {
-  if (isDragging) {
-    isDragging = false;
-    isDraggingInsidePath = false;  // Reset the flag when dragging stops
-    dragGraphics.closePath();
-  }
-}
-
-function dragWithinPath(pointer) {
-  if (isDragging) {
-    // TODO: Fill the dragged area within the predefined path with red color
-    // You can add the logic to fill the dragged area within the predefined path with red color here.
-    // The logic will depend on how you want to fill the area.
-    // For simplicity, you can just draw a line as shown below:
-    dragGraphics.lineTo(pointer.x, pointer.y);
-    dragGraphics.strokePath();
-  }
-}
-
-function update() {
-  // TODO: Update any game logic if needed
-}
-
-
-</script>
\ No newline at end of file
diff --git a/src/pages/tracing/tracing3.astro b/src/pages/tracing/tracing3.astro
deleted file mode 100644
index 36c512b..0000000
--- a/src/pages/tracing/tracing3.astro
+++ /dev/null
@@ -1,193 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
----
-<Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
-</Layout>
-<script is:inline>
-  const isMobile = window.innerWidth <= 768;
-  const drawingZone = {
-    x: isMobile ? 0 : window.innerWidth / 4,
-    y: window.innerHeight / 4,
-    width: isMobile ? window.innerWidth : window.innerWidth / 2,
-    height: window.innerHeight / 2,
-  };
-
-  const config = {
-    type: Phaser.AUTO,
-    width: window.innerWidth,
-    height: window.innerHeight,
-    backgroundColor: 0xFFFFFF,
-    scale: {
-      mode: Phaser.Scale.FIT,
-      autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
-    },
-    scene: {
-      preload: preload,
-      create: create,
-      update: update
-    }
-  };
-
-  const game = new Phaser.Game(config);
-  const customWidth = window.innerWidth;
-  const customHeight = window.innerHeight;
-  let firstLayer, secondLayer, thirdLayer;
-  let isDragging =  false;
-  let lineStartPosition =  {x:0 , y:0};
-  let draggingLine;
-
-  function preload() {
-    this.load.svg('letterA', '/assets/letter/a.svg');
-    this.load.svg('layer1', '/assets/letter/a_l1.svg');
-    this.load.svg('layer2', '/assets/letter/a_l2.svg');
-    this.load.svg('layer3', '/assets/letter/a_l3.svg');
-    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
-    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
-    this.load.audio('slide', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
-    this.load.svg('succesImage', '/assets/svg/tick.svg');
-  }
-
-
-  function create() {
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
-    const firstScreen = this.add.image(customWidth / 2, customHeight / 2, 'letterA');
-    const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
-    const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
-    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn to write letter : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-
-    this.time.delayedCall(2000, () => {
-      this.tweens.add({
-        targets: firstScreen,
-        alpha: 0,
-        scaleX: 0.5,
-        scaleY: 0.5,
-        duration: 1000,
-        onComplete: () => {
-          firstScreen.setVisible(false);
-          firstScreen.setScale(1);
-          showLayersWithFadeIn.call(this);
-        }
-      });
-    }, [], this);
-
-    draggingLine = this.add.graphics();
-    draggingLine.lineStyle(10, 0x05b3a4).setDepth(1.5);   //o\\ 5 is the line width, 0xff0000 is the color (red)
-  }
-  function showLayersWithFadeIn() {
-    this.tweens.add({
-      targets: [firstLayer, secondLayer, thirdLayer],
-      alpha: 1,
-      duration: 1000, // Duration of the tween in milliseconds
-      delay: 500, // Delay before the fade-in starts
-      ease: 'Power2', // Easing function (e.g., 'Linear', 'Cubic', 'Elastic', etc.)
-    });
-    let textX, textY;
-
-      firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant Left', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slantLeftAudio = this.sound.add('slantLeft');
-      slantLeftAudio.play();
-      firstLayer.setDepth(1);
-      firstLayer.setAlpha(0.5);
-      firstLayer.setInteractive({ draggable: true });
-
-      secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant Right', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slantRightAudio = this.sound.add('slantRight');
-      secondTextLayer.setVisible(false);
-      secondLayer.setDepth(1);
-      secondLayer.setAlpha(0.5);
-      secondLayer.setInteractive({ draggable: true });
-      secondLayer.setVisible(false);
-
-      thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slideAudio = this.sound.add('slide');
-      thirdTextLayer.setVisible(false);
-      thirdLayer.setDepth(1.1);
-      // thirdLayer.setScale(1.15);
-      thirdLayer.setAlpha(0.5);
-      thirdLayer.setInteractive({ draggable: true });
-      thirdLayer.setVisible(false);
-
-      firstLayer.on('drag', (pointer) => {
-        if (pointer.isDown) {
-          firstTextLayer.setVisible(false);
-          secondTextLayer.setVisible(true);
-          slantRightAudio.play();
-          secondLayer.setVisible(true);
-          firstLayer.setAlpha(1);
-          secondLayer.setAlpha(0.5);
-          thirdLayer.setAlpha(0.5);
-        } else {
-          firstLayer.setAlpha(0.5);
-        }
-      });
-
-      secondLayer.on('drag', (pointer) => {
-        if (pointer.isDown) {
-          secondTextLayer.setVisible(false);
-          thirdTextLayer.setVisible(true);
-          slideAudio.play();
-          thirdLayer.setVisible(true);
-          secondLayer.setAlpha(1);
-          thirdLayer.setAlpha(0.5);
-        } else {
-          secondLayer.setAlpha(0.5);
-        }
-      });
-
-      thirdLayer.on('drag', (pointer) => {
-        if (pointer.isDown) {
-          thirdLayer.setAlpha(1);
-          thirdTextLayer.setVisible(false);
-          // const succesImage = this.add.image(customWidth / 2, customHeight / 2, 'succesImage').setDepth(2);
-          // succesImage.setAlpha(0.2);
-          // this.add.text(customWidth / 2, customHeight / 2, 'OK', { font: '700 40px quicksand', fill: '#05b3a4'}).setDepth(2);
-        } else {
-          thirdLayer.setAlpha(0.5);
-        }
-      });
-    this.input.on('pointerdown',  dragStart);
-    this.input.on('pointerup',    dragEnd);
-    this.input.on('pointermove',  drag);
-  }
-
-  function dragStart(pointer) {
-    if (pointer.isDown) {
-      isDragging = true;
-      lineStartPosition.x = pointer.x;
-      lineStartPosition.y = pointer.y;
-    }
-  }
-
-  function drag(pointer) {
-    if (isDragging) {
-      // draggingLine.clear();
-      draggingLine.beginPath();
-      draggingLine.moveTo(lineStartPosition.x, lineStartPosition.y);
-      draggingLine.lineTo(pointer.x, pointer.y);
-      draggingLine.strokePath();
-    }
-  }
-
-  function dragEnd() {
-    isDragging = false;
-  }
-
-  function update() {
-    // Update any game logic if needed
-  }
-</script>
\ No newline at end of file
diff --git a/src/pages/tracing/tracing4.astro b/src/pages/tracing/tracing4.astro
deleted file mode 100644
index c7a2789..0000000
--- a/src/pages/tracing/tracing4.astro
+++ /dev/null
@@ -1,146 +0,0 @@
----
-import Layout from "../../layouts/Layout.astro";
----
-<Layout title="Guided Letter Tracing Game">
-    <main>
-        <div>
-        </div>
-        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
-    </main>
-</Layout>
-<script is:inline>
-const config = {
-  type: Phaser.AUTO,
-  width: window.innerWidth,
-  height: window.innerHeight,
-  backgroundColor: 0xffffff,
-  scene: {
-    preload: preload,
-    create: create,
-    update: update
-  }
-};
-
-const game = new Phaser.Game(config);
-
-const customWidth = window.innerWidth;
-const customHeight = window.innerHeight;
-
-let predefinedPath;
-let dragGraphics;
-let isDragging = false;
-
-function preload() {
-  this.load.svg('layer1', '/assets/a_l1.svg');
-  this.load.svg('layer2', '/assets/a_l2.svg');
-  this.load.svg('layer3', '/assets/a_l3.svg');
-}
-function create() {
-    firstLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer1');
-    firstLayer.setDepth(1);
-    firstLayer.setAlpha(0.5);
-    firstLayer.setInteractive();
-
-    secondLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer2');
-    secondLayer.setDepth(1);
-    secondLayer.setAlpha(0.5);
-    secondLayer.setInteractive();
-
-    thirdLayer = this.add.image(customWidth / 2, customHeight / 2, 'layer3');
-    thirdLayer.setDepth(1.1);
-    thirdLayer.setScale(1.15);
-    thirdLayer.setAlpha(0.5);
-    thirdLayer.setInteractive();
-    
-    dragGraphics = this.add.graphics();
-    this.input.on('pointerdown',  startDragging);
-    this.input.on('pointerup',    stopDragging);
-    this.input.on('pointermove',  dragWithinPath);
-}
-
-function calculateSpacedPoints(curve, spacing) {
-  const spacedPoints = [];
-
-  for (let t = 0; t <= 1; t += spacing) {
-    const point = curve.getPoint(t);
-    spacedPoints.push({ x: point.x, y: point.y });
-  }
-
-  return spacedPoints;
-}
-function dragWithinPath(pointer) {
-  if (isDragging) {
-    const dragX = pointer.x;
-    const dragY = pointer.y;
-
-    // Check if the dragged point is inside the predefined path
-    const isInsidePath = predefinedPath.contains(dragX, dragY);
-
-    if (isInsidePath) {
-      // Draw a line to represent the dragged path
-      dragGraphics.lineTo(dragX, dragY);
-      dragGraphics.strokePath();
-    }
-  }
-}
-
-function startDragging(pointer) {
-  if (!isDragging && predefinedPath) {
-    firstLayer.setAlpha(1);
-      let isNearPath = false;
-
-    // Iterate through the curves of the predefined path
-    for (let i = 0; i < predefinedPath.curves.length; i++) {
-      const curve = predefinedPath.curves[i];
-      const spacedPoints = calculateSpacedPoints(curve, spacing);
-
-      // Check if the pointer is within a certain distance to any of the spaced points
-      for (let j = 0; j < spacedPoints.length; j++) {
-        const point = spacedPoints[j];
-        const distance = Phaser.Math.Distance.Between(point.x, point.y, pointer.x, pointer.y);
-
-        if (distance < distanceThreshold) {
-          isNearPath = true;
-          break;
-        }
-      }
-
-      if (isNearPath) {
-        break;
-      }
-    }
-
-    if (isNearPath) {
-      isDragging = true;
-      dragGraphics.clear();
-      dragGraphics.beginPath();
-      dragGraphics.moveTo(pointer.x, pointer.y);
-    }
-  }
-}
-
-function stopDragging() {
-  if (isDragging) {
-    isDragging = false;
-    isDraggingInsidePath = false;  // Reset the flag when dragging stops
-    dragGraphics.closePath();
-  }
-}
-
-function dragWithinPath(pointer) {
-  if (isDragging) {
-    // TODO: Fill the dragged area within the predefined path with red color
-    // You can add the logic to fill the dragged area within the predefined path with red color here.
-    // The logic will depend on how you want to fill the area.
-    // For simplicity, you can just draw a line as shown below:
-    dragGraphics.lineTo(pointer.x, pointer.y);
-    dragGraphics.strokePath();
-  }
-}
-
-function update() {
-  // TODO: Update any game logic if needed
-}
-
-
-</script>
\ No newline at end of file