diff --git a/public/assets/audio/down-hook.mp3 b/public/assets/audio/down-hook.mp3
new file mode 100755
index 0000000..954a7a0
Binary files /dev/null and b/public/assets/audio/down-hook.mp3 differ
diff --git a/public/assets/audio/hook-arround-close.mp3 b/public/assets/audio/hook-around-close.mp3
similarity index 100%
rename from public/assets/audio/hook-arround-close.mp3
rename to public/assets/audio/hook-around-close.mp3
diff --git a/src/pages/capital-letter/O.astro b/src/pages/capital-letter/O.astro
index e8316db..72af4de 100644
--- a/src/pages/capital-letter/O.astro
+++ b/src/pages/capital-letter/O.astro
@@ -81,7 +81,7 @@ import Layout from "../../layouts/Layout.astro";
     this.load.video('animatedO', '/assets/animated-letter/capital_o.mp4');
     this.load.svg('letterO', '/assets/capital-letter/o.svg');
     this.load.svg('layer1', '/assets/capital-letter/o.svg');
-    this.load.audio('audioOne', '/assets/audio/hook-arround-close.mp3');
+    this.load.audio('audioOne', '/assets/audio/hook-around-close.mp3');
     this.load.image('topLogo', '/assets/top_logo.png');
     this.load.svg('succesImage', '/assets/svg/tick.svg');
     this.load.svg('hintImage', '/assets/svg/hint.svg');
@@ -246,7 +246,7 @@ import Layout from "../../layouts/Layout.astro";
         firstLayer.on('drag', (pointer) => {
         const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
 
-        if (distance >= 50) {
+        if (distance >= 0) {
           
             firstTextLayer.setVisible(false);
             firstLayer.setAlpha(1);
diff --git a/src/pages/small-letter/n.astro b/src/pages/small-letter/n.astro
new file mode 100644
index 0000000..4885623
--- /dev/null
+++ b/src/pages/small-letter/n.astro
@@ -0,0 +1,320 @@
+---
+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
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterNeight = 50;
+      letterScale = 1.4;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+      beanieScale = 0.35;
+      beanieScalePlus = 0.38;
+      beanieWidth = 135;
+      beanieHeight = 170;
+      animatedVideoScale = 0.63;
+      animatedNHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterNeight = 30;
+      letterScale = 1.5;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+      beanieScale = 0.4;
+      beanieScalePlus = 0.44;
+      beanieWidth = 200;
+      beanieHeight = 245;
+      animatedVideoScale = 0.7;
+      animatedNHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedN', '/assets/animated-letter/small_n.mp4');
+    this.load.svg('letterN', '/assets/small-letter/ns.svg');
+    this.load.svg('layer1', '/assets/small-letter/ns_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/ns_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/small-down.mp3');
+    this.load.audio('audioTwo', '/assets/audio/roll-down.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+    this.load.image('beanie', '/assets/beanieImage.png');
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : n", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
+
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const beanieduration = 2500;
+  this.tweens.add({
+    targets: beanie,
+    scaleX: beaniescaleFactor + 0.004,
+    scaleY: beaniescaleFactor,
+    duration: beanieduration,
+    ease: 'Redial',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 + 45, customHeight / 2 + letterNeight, 'letterN').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 + 45, customHeight / 2 + letterNeight, 'letterN').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterNeight, 'animatedN').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    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);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.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 : n', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedVideoScale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 + 45, customHeight / 2 + letterNeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 + 45, customHeight / 2 + letterNeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Roll Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=100) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", 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();
+      });
+  }
+
+function update() {
+
+}
+
+</script>
\ No newline at end of file
diff --git a/src/pages/small-letter/o.astro b/src/pages/small-letter/o.astro
new file mode 100644
index 0000000..fb16e65
--- /dev/null
+++ b/src/pages/small-letter/o.astro
@@ -0,0 +1,286 @@
+---
+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
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 40;
+      letterScale = 1.3;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+      beanieScale = 0.35;
+      beanieScalePlus = 0.38;
+      beanieWidth = 135;
+      beanieHeight = 170;
+      animatedOHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 30;
+      letterScale = 1.5;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+      beanieScale = 0.4;
+      beanieScalePlus = 0.44;
+      beanieWidth = 200;
+      beanieHeight = 245;
+      animatedOHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedO', '/assets/animated-letter/small_o.mp4');
+    this.load.svg('letterO', '/assets/small-letter/os.svg');
+    this.load.svg('layer1', '/assets/small-letter/os.svg');
+    this.load.audio('audioOne', '/assets/audio/hook-around-close.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+    this.load.image('beanie', '/assets/beanieImage.png');
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : o", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
+
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const beanieduration = 2500;
+  this.tweens.add({
+    targets: beanie,
+    scaleX: beaniescaleFactor + 0.004,
+    scaleY: beaniescaleFactor,
+    duration: beanieduration,
+    ease: 'Redial',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterO').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 + 90, customHeight / 2 + letterHeight, 'letterO').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedO').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    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);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.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 : o', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(0.73);
+
+      // Play the video
+      animatedLetter.play();
+      animatedLetter.setVisible(false);
+
+      // You can set additional properties for the video, such as loop and mute:
+      animatedLetter.setLoop(true); // Loop the video
+      animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+      });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Close',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 0) {
+          
+            firstTextLayer.setVisible(false);
+            firstLayer.setAlpha(1);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+       
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 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();
+      });
+
+
+  }
+
+function update() {
+
+}
+
+</script>
\ No newline at end of file
diff --git a/src/pages/small-letter/p.astro b/src/pages/small-letter/p.astro
new file mode 100644
index 0000000..07b7dc1
--- /dev/null
+++ b/src/pages/small-letter/p.astro
@@ -0,0 +1,320 @@
+---
+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
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterPeight = 20;
+      letterScale = 0.8;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+      beanieScale = 0.35;
+      beanieScalePlus = 0.38;
+      beanieWidth = 135;
+      beanieHeight = 170;
+      animatedVideoScale = 0.63;
+      animatedPHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterPeight = -10;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+      beanieScale = 0.4;
+      beanieScalePlus = 0.44;
+      beanieWidth = 200;
+      beanieHeight = 245;
+      animatedVideoScale = 0.7;
+      animatedPHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedP', '/assets/animated-letter/small_p.mp4');
+    this.load.svg('letterP', '/assets/small-letter/ps.svg');
+    this.load.svg('layer1', '/assets/small-letter/ps_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/ps_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/down-tail.mp3');
+    this.load.audio('audioTwo', '/assets/audio/roll-around.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+    this.load.image('beanie', '/assets/beanieImage.png');
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : p", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
+
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const beanieduration = 2500;
+  this.tweens.add({
+    targets: beanie,
+    scaleX: beaniescaleFactor + 0.004,
+    scaleY: beaniescaleFactor,
+    duration: beanieduration,
+    ease: 'Redial',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'letterP').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'letterP').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterPeight, 'animatedP').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    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);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.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 : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Roll Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=100) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", 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();
+      });
+  }
+
+function update() {
+
+}
+
+</script>
\ No newline at end of file
diff --git a/src/pages/small-letter/q.astro b/src/pages/small-letter/q.astro
new file mode 100644
index 0000000..61a2277
--- /dev/null
+++ b/src/pages/small-letter/q.astro
@@ -0,0 +1,320 @@
+---
+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
+    }
+  };
+  // backgroundImage.png
+  const game = new Phaser.Game(config);
+  const customWidth = window.innerWidth;
+  const customHeight = window.innerHeight;
+  let firstLayer, secondLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterQeight = 20;
+      letterScale = 0.8;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+      beanieScale = 0.35;
+      beanieScalePlus = 0.38;
+      beanieWidth = 135;
+      beanieHeight = 170;
+      animatedVideoScale = 0.63;
+      animatedQHeight = 32;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterQeight = -10;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+      beanieScale = 0.4;
+      beanieScalePlus = 0.44;
+      beanieWidth = 200;
+      beanieHeight = 245;
+      animatedVideoScale = 0.7;
+      animatedQHeight = 20;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedQ', '/assets/animated-letter/small_q.mp4');
+    this.load.svg('letterQ', '/assets/small-letter/qs.svg');
+    this.load.svg('layer1', '/assets/small-letter/qs_l1.svg');
+    this.load.svg('layer2', '/assets/small-letter/qs_l2.svg');
+    this.load.audio('audioOne', '/assets/audio/hook-around.mp3');
+    this.load.audio('audioTwo', '/assets/audio/down-hook.mp3');
+    this.load.image('topLogo', '/assets/top_logo.png');
+    this.load.svg('succesImage', '/assets/svg/tick.svg');
+    this.load.svg('hintImage', '/assets/svg/hint.svg');
+    this.load.svg('handPointer', '/assets/svg/hand.svg');
+    this.load.image('backgroundImage', '/assets/bg6.png');
+    this.load.image('cloud', '/assets/cloud.png');
+    this.load.image('canvas', '/assets/canvas4.png');
+    this.load.image('beanie', '/assets/beanieImage.png');
+    this.load.image('sun', '/assets/sun.png');
+    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.image('canvasStand', '/assets/stand2.png');
+  }
+
+  function create() {
+    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+    this.add.text(customWidth / 10, 20, "Letter : q", { font: '700 40px quicksand', fill: '#05b3a4', });
+    // this.add.image(customWidth / 2, 50, 'cloud').setDepth(1.9);
+  
+    const cloud = this.add.tileSprite(customWidth / 2, customHeight / 2 - cloudHeight, customWidth, cloudeSize, 'cloud').setAlpha(0.9);
+    cloud.setDepth(-1.8);
+    const scrollSpeed = 0.5;
+    this.time.addEvent({
+      loop: true,
+      callback: () => {
+        cloud.tilePositionX += scrollSpeed;
+      },
+      delay: 16, // Adjust the delay for the desired scrolling speed
+    });
+
+    const sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
+    const beanie = this.add.sprite(customWidth / 2 - beanieWidth, customHeight / 2 - beanieHeight, 'beanie').setScale(beanieScale).setDepth(1.9);
+
+  
+  const scaleFactor = sunScalePlus; // Scale factor (2 means double the size)
+  const duration = 3000; // Duration of the animation in milliseconds
+
+  // Create a scaling tween
+  this.tweens.add({
+    targets: sun,
+    scaleX: scaleFactor,
+    scaleY: scaleFactor,
+    duration: duration,
+    ease: 'Linear',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+  const beaniescaleFactor = beanieScalePlus; // Scale factor (2 means double the size)
+  const beanieduration = 2500;
+  this.tweens.add({
+    targets: beanie,
+    scaleX: beaniescaleFactor + 0.004,
+    scaleY: beaniescaleFactor,
+    duration: beanieduration,
+    ease: 'Redial',
+    yoyo: true, // Makes the animation play in reverse
+    repeat: -1 // Repeat indefinitely
+  });
+    const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'letterQ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'letterQ').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'animatedQ').setDepth(2); canvasStand
+    firstScreen.setVisible(false);
+    // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    const canvas = this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
+    // Set up a mask for the drawing area based on the canvas dimensions
+    const maskGraphics = this.make.graphics()
+    maskGraphics.fillRect(customWidth / 2 - (canvas.width * canvasScale) / 2, customHeight / 2 + canvasHeight - (canvas.height * canvasScale) / 2, canvas.width * canvasScale, canvas.height * canvasScale);
+    const mask = maskGraphics.createGeometryMask();
+
+ 
+
+    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+    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);
+      animatedLetter.setVisible(false);
+    });
+      hideButton.setVisible(false);
+      let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", {
+        font: '900 24px quicksand',
+        fill: '#05b3a4',
+        backgroundColor: '#7c4c23',
+        padding: { x: 20, y: 10 },
+        borderRadius: '15px', // Border radius
+        shadow: {
+            offsetX: 2, // X offset for the shadow
+            offsetY: 2, // Y offset for the shadow
+            color: '#000', // Shadow color
+            blur: 5, // Shadow blur
+            fill: true // Apply shadow to fill (background color)
+        }
+      });
+
+    demoButton.setInteractive().on('pointerdown', () => {
+      graphics.setVisible(false);
+      firstScreen.setVisible(true);
+      demoButton.setVisible(false);  // Hide the "Demo" button
+      hideButton.setVisible(true);   // Show the "Hide" button
+      animatedLetter.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 : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);
+
+    // Play the video
+    animatedLetter.play();
+    animatedLetter.setVisible(false);
+
+    // You can set additional properties for the video, such as loop and mute:
+    animatedLetter.setLoop(true); // Loop the video
+    animatedLetter.setMute(false); // Unmute the video
+      animatedLetter.on('complete', function () {
+      // Video playback is complete
+      // You can add your code here for what to do when the video finishes.
+    });
+
+    let textX, textY;
+
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2;
+      const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioOneAudio = this.sound.add('audioOne');
+      audioOneAudio.play();
+      firstLayer.setDepth(1);
+      firstLayer.setAlpha(0.5);
+      firstLayer.setInteractive({ draggable: true });
+
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterQeight, 'layer2').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      const secondTextLayer = this.add.text(textX, textY, '2. Down Hook',{ font: '700 40px quicksand', fill: '#05b3a4'});
+      const audioTwoAudio = this.sound.add('audioTwo');
+      secondTextLayer.setVisible(false);
+      secondLayer.setDepth(1);
+      secondLayer.setAlpha(0.5);
+      secondLayer.setInteractive({ draggable: true });
+      secondLayer.setVisible(false);
+
+        // Add these variables to keep track of start points
+        let firstDragStartPoint = { x: 0, y: 0 };
+        let secondDragStartPoint = { x: 0, y: 0 };
+
+        // ...
+
+        // Add this code for firstLayer
+        firstLayer.on('dragstart', (pointer) => {
+        firstDragStartPoint.x = pointer.x;
+        firstDragStartPoint.y = pointer.y;
+        });
+
+        firstLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >= 100) {
+          
+            firstTextLayer.setVisible(false);
+            secondTextLayer.setVisible(true);
+            audioTwoAudio.play();
+            secondLayer.setVisible(true);
+            firstLayer.setAlpha(1);
+            secondLayer.setAlpha(0.5);
+        } else {
+            firstLayer.setAlpha(0.5);
+        }
+        });
+``
+        // Repeat the above code for secondLayer and thirdLayer
+
+        // Add this code for secondLayer
+        secondLayer.on('dragstart', (pointer) => {
+          secondDragStartPoint.x = pointer.x;
+          secondDragStartPoint.y = pointer.y;
+        });
+
+        secondLayer.on('drag', (pointer) => {
+        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
+
+        if (distance >=100) {
+            secondTextLayer.setVisible(false);
+            secondLayer.setAlpha(1);
+        } else {
+            secondLayer.setAlpha(0.5);
+        }
+        });
+
+
+      graphics = this.add.graphics();
+      graphics.setMask(mask);
+      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
+      this.input.on('pointerdown', function (pointer) {
+        isDrawing = true;
+        graphics.moveTo(pointer.x, pointer.y);
+        console.log("Start Position", 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();
+      });
+  }
+
+function update() {
+
+}
+
+</script>
\ No newline at end of file