From dc2a3f848242b0c68d4a460b1646415aa047138a Mon Sep 17 00:00:00 2001
From: Dev 1 <dev@siliconpin.com>
Date: Wed, 18 Oct 2023 13:43:58 +0530
Subject: [PATCH] complete all letters and numbers button new position and add
 start button

---
 src/pages/small-letter/a.astro |  39 ++++-
 src/pages/small-letter/b.astro |  37 +++-
 src/pages/small-letter/c.astro |  37 +++-
 src/pages/small-letter/d.astro |  33 +++-
 src/pages/small-letter/e.astro |  45 ++++-
 src/pages/small-letter/f.astro |  39 ++++-
 src/pages/small-letter/g.astro |  37 +++-
 src/pages/small-letter/h.astro |  34 +++-
 src/pages/small-letter/i.astro |  40 ++++-
 src/pages/small-letter/j.astro |  44 ++++-
 src/pages/small-letter/k.astro |  36 +++-
 src/pages/small-letter/l.astro | 300 +++++++++++++++++++++++++++++++++
 src/pages/small-letter/m.astro |  52 ++++--
 src/pages/small-letter/n.astro |  42 ++++-
 src/pages/small-letter/o.astro |  34 +++-
 src/pages/small-letter/p.astro |  52 ++++--
 src/pages/small-letter/q.astro |  54 ++++--
 src/pages/small-letter/r.astro |  48 ++++--
 src/pages/small-letter/s.astro |  38 ++++-
 src/pages/small-letter/t.astro |  47 ++++--
 src/pages/small-letter/u.astro |  31 +++-
 src/pages/small-letter/v.astro |  39 ++++-
 src/pages/small-letter/w.astro |  35 +++-
 src/pages/small-letter/x.astro |  39 ++++-
 src/pages/small-letter/y.astro |  48 ++++--
 src/pages/small-letter/z.astro |  36 +++-
 26 files changed, 1155 insertions(+), 161 deletions(-)
 create mode 100644 src/pages/small-letter/l.astro

diff --git a/src/pages/small-letter/a.astro b/src/pages/small-letter/a.astro
index 097c433..d8a3e04 100644
--- a/src/pages/small-letter/a.astro
+++ b/src/pages/small-letter/a.astro
@@ -52,8 +52,13 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-         
+      animatedVideoScale = 0.6;
       animatedAHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -66,8 +71,13 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-          
+      animatedVideoScale = 0.7;
       animatedAHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -189,7 +199,7 @@ import Layout from "../../layouts/Layout.astro";
     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);
-    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(0.73);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);
 
     // Play the video
     animatedLetter.play();
@@ -206,11 +216,11 @@ import Layout from "../../layouts/Layout.astro";
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textX = isMobile ? customWidth / 6 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -291,6 +301,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/b.astro b/src/pages/small-letter/b.astro
index f7c2d40..668d13a 100644
--- a/src/pages/small-letter/b.astro
+++ b/src/pages/small-letter/b.astro
@@ -53,7 +53,13 @@ import Layout from "../../layouts/Layout.astro";
       sunWidth = 70;
       sunHeight = 70;
          
+      animatedVideoScale = 0.6;
       animatedBHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -66,8 +72,13 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-          
+      animatedVideoScale = 0.7;
       animatedBHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -85,7 +96,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -189,7 +199,7 @@ import Layout from "../../layouts/Layout.astro";
     const baseFontSize = 20;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : b', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(0.73);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);
 
     // Play the video
     animatedLetter.play();
@@ -210,7 +220,7 @@ import Layout from "../../layouts/Layout.astro";
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -291,6 +301,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/c.astro b/src/pages/small-letter/c.astro
index 7f315f7..9e93e55 100644
--- a/src/pages/small-letter/c.astro
+++ b/src/pages/small-letter/c.astro
@@ -53,7 +53,13 @@ import Layout from "../../layouts/Layout.astro";
       sunWidth = 70;
       sunHeight = 70;
          
+      animatedVideoScale = 0.6;
       animatedCHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -67,7 +73,13 @@ import Layout from "../../layouts/Layout.astro";
       sunWidth = 200;
       sunHeight = 100;
           
+      animatedVideoScale = 0.7;
       animatedCHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -187,7 +199,7 @@ import Layout from "../../layouts/Layout.astro";
       const baseFontSize = 20;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : c', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-      const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(0.73);
+      const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale);
 
       // Play the video
       animatedLetter.play();
@@ -204,11 +216,11 @@ import Layout from "../../layouts/Layout.astro";
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textX = isMobile ? customWidth / 7 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -258,6 +270,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
 
 
   }
diff --git a/src/pages/small-letter/d.astro b/src/pages/small-letter/d.astro
index 633fd85..a9bfea3 100644
--- a/src/pages/small-letter/d.astro
+++ b/src/pages/small-letter/d.astro
@@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
          
       animatedVideScale = 0.6
       animatedDHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -68,8 +73,13 @@ import Layout from "../../layouts/Layout.astro";
       sunWidth = 200;
       sunHeight = 100;
           
-      animatedVideScale = 0.9;
+      animatedVideScale = 0.7;
       animatedDHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -212,7 +222,7 @@ import Layout from "../../layouts/Layout.astro";
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -293,6 +303,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/e.astro b/src/pages/small-letter/e.astro
index eab40f0..ea7c826 100644
--- a/src/pages/small-letter/e.astro
+++ b/src/pages/small-letter/e.astro
@@ -46,28 +46,40 @@ import Layout from "../../layouts/Layout.astro";
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 30;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
+      animatedVideoScale = 0.57;
       animatedEHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 20;
-      letterScale = 1;
+      letterScale = 1.3;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
+      animatedVideoScale = 0.7;
       animatedEHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -93,7 +105,7 @@ import Layout from "../../layouts/Layout.astro";
 
   function create() {
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : b", { font: '700 40px quicksand', fill: '#05b3a4', });
+    this.add.text(customWidth / 10, 20, "Letter : e", { 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);
@@ -188,8 +200,8 @@ import Layout from "../../layouts/Layout.astro";
     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 : b', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73);
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : e', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(animatedVideoScale);
 
     // Play the video
     animatedLetter.play();
@@ -206,11 +218,11 @@ import Layout from "../../layouts/Layout.astro";
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textX = isMobile ? customWidth / 6 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -291,6 +303,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/f.astro b/src/pages/small-letter/f.astro
index 38a269f..94c1190 100644
--- a/src/pages/small-letter/f.astro
+++ b/src/pages/small-letter/f.astro
@@ -52,8 +52,13 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-         
+      animatedVideoScale = 0.57;   
       animatedFHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -66,8 +71,13 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-          
+      animatedVideoScale = 0.65;    
       animatedFHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -189,7 +199,7 @@ import Layout from "../../layouts/Layout.astro";
     const baseFontSize = 20;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : f', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(0.73);
+    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedVideoScale);
 
     // Play the video
     animatedLetter.play();
@@ -206,11 +216,11 @@ import Layout from "../../layouts/Layout.astro";
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2 + 15, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textX = isMobile ? customWidth / 6 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Hook Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -291,6 +301,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/g.astro b/src/pages/small-letter/g.astro
index 2ce31d7..90ac22c 100644
--- a/src/pages/small-letter/g.astro
+++ b/src/pages/small-letter/g.astro
@@ -53,8 +53,13 @@ import Layout from "../../layouts/Layout.astro";
       sunWidth = 70;
       sunHeight = 70;
          
-      animatedVideoScale = 0.63;
+      animatedVideoScale = 0.62;
       animatedGHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -68,8 +73,13 @@ import Layout from "../../layouts/Layout.astro";
       sunWidth = 200;
       sunHeight = 100;
           
-      animatedVideoScale = 0.7;
+      animatedVideoScale = 0.65;
       animatedGHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -208,8 +218,8 @@ import Layout from "../../layouts/Layout.astro";
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+      textX = isMobile ? customWidth / 6 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
       audioOneAudio.play();
@@ -293,6 +303,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/h.astro b/src/pages/small-letter/h.astro
index afe9909..956b55f 100644
--- a/src/pages/small-letter/h.astro
+++ b/src/pages/small-letter/h.astro
@@ -53,8 +53,13 @@ import Layout from "../../layouts/Layout.astro";
       sunWidth = 70;
       sunHeight = 70;
          
-      animatedVideoScale = 0.63;
+      animatedVideoScale = 0.58;
       animatedHHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -68,8 +73,13 @@ import Layout from "../../layouts/Layout.astro";
       sunWidth = 200;
       sunHeight = 100;
           
-      animatedVideoScale = 0.7;
+      animatedVideoScale = 0.6;
       animatedHHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -87,7 +97,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -293,6 +302,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/i.astro b/src/pages/small-letter/i.astro
index 3093384..d908c54 100644
--- a/src/pages/small-letter/i.astro
+++ b/src/pages/small-letter/i.astro
@@ -46,7 +46,7 @@ import Layout from "../../layouts/Layout.astro";
       canvasScale = 0.14
       canvasHeight = 35; 
       letterIeight = 50;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
@@ -55,13 +55,18 @@ import Layout from "../../layouts/Layout.astro";
          
       animatedVideoScale = 0.5;
       animatedIHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterIeight = 30;
-      letterScale = 1;
+      letterScale = 1.3;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
@@ -69,7 +74,12 @@ import Layout from "../../layouts/Layout.astro";
       sunHeight = 100;
           
       animatedVideoScale = 0.55;
-      animatedIHeight = 20;
+      animatedIHeight = 10;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -208,11 +218,11 @@ import Layout from "../../layouts/Layout.astro";
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterIeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      textX = isMobile ? customWidth / 5.5 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -254,7 +264,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -293,6 +302,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/j.astro b/src/pages/small-letter/j.astro
index fffddeb..993b19b 100644
--- a/src/pages/small-letter/j.astro
+++ b/src/pages/small-letter/j.astro
@@ -23,7 +23,7 @@ import Layout from "../../layouts/Layout.astro";
     height: window.innerHeight,
     backgroundColor: 0xFFFFFF,
     scale: {
-      mode: Phaser.Scale.FIT,
+      mode: Phaser.Scale.FIT, 
       autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
     },
     scene: {
@@ -53,15 +53,20 @@ import Layout from "../../layouts/Layout.astro";
       sunWidth = 70;
       sunHeight = 70;
          
-      animatedVideoScale = 0.5;
+      animatedVideoScale = 0.6;
       animatedJHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.195;
       canvasHeight = 20;
-      letterJeight = 0;
-      letterScale = 1;
+      letterJeight = - 10;
+      letterScale = 1.1;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animatedVideoScale = 0.7;
       animatedJHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -87,7 +97,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -95,7 +104,7 @@ import Layout from "../../layouts/Layout.astro";
 
   function create() {
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : i", { font: '700 40px quicksand', fill: '#05b3a4', });
+    this.add.text(customWidth / 10, 20, "Letter : j", { 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);
@@ -190,7 +199,7 @@ import Layout from "../../layouts/Layout.astro";
     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 : i', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+    const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : j', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
     const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);
 
     // Play the video
@@ -212,7 +221,7 @@ import Layout from "../../layouts/Layout.astro";
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -293,6 +302,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/k.astro b/src/pages/small-letter/k.astro
index 0e49498..c1d469c 100644
--- a/src/pages/small-letter/k.astro
+++ b/src/pages/small-letter/k.astro
@@ -58,7 +58,12 @@ import Layout from "../../layouts/Layout.astro";
       sunHeight = 70;
        
       animatedKHeight = 35;
-      animatedKScale = 0.65;
+      animatedKScale = 0.6;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -73,7 +78,12 @@ import Layout from "../../layouts/Layout.astro";
       sunHeight = 100;
         
       animatedKHeight = 20;
-      animatedKScale = 0.8;
+      animatedKScale = 0.75;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   function preload() {
     this.load.video('animatedK', '/assets/animated-letter/small_k.mp4');
@@ -210,10 +220,10 @@ import Layout from "../../layouts/Layout.astro";
 
       firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -325,6 +335,24 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/l.astro b/src/pages/small-letter/l.astro
new file mode 100644
index 0000000..3cf03ef
--- /dev/null
+++ b/src/pages/small-letter/l.astro
@@ -0,0 +1,300 @@
+---
+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, thirdLayer;
+  let graphics;
+  let isDrawing = false;
+
+    if(isMobile){
+      cloudeSize = 200;
+      cloudHeight = 340;
+      canvasScale = 0.14
+      canvasHeight = 35; 
+      letterHeight = 55;
+      letterScale = 0.85;
+      backgroundScale = 0.8;
+      sunScale = 0.1;
+      sunScalePlus = 0.15;
+      sunWidth = 70;
+      sunHeight = 70;
+         
+      animatedVideoScale = 0.6;
+      animatedLHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
+    } else{
+      cloudeSize = 500;
+      cloudHeight = 250;
+      canvasScale = 0.195;
+      canvasHeight = 20;
+      letterHeight = 30;
+      letterScale = 1;
+      backgroundScale = 1;
+      sunScale  = 0.2;
+      sunScalePlus = 0.25;
+      sunWidth = 200;
+      sunHeight = 100;
+          
+      animatedVideoScale = 0.7;
+      animatedLHeight = 0;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
+    }
+  // let hideButton;
+
+  function preload() {
+    this.load.video('animatedL', '/assets/animated-letter/small_l.mp4');
+    this.load.svg('letterL', '/assets/small-letter/ls.svg');
+    this.load.svg('layer1', '/assets/small-letter/ls.svg');
+    this.load.audio('audioOne', '/assets/audio/tall-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('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 : l", { 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 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 backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
+    this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'letterL').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 + 50, customHeight / 2 + letterHeight, 'letterL').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedL').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(helpButtonWidth, helpButtonHeight, "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(helpButtonWidth, helpButtonHeight, "Demo", {
+        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 : l', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
+      const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').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 + 50, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+      const firstTextLayer = this.add.text(textX, textY, '1. Tall 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 });
+
+
+
+        // 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 >= 50) {
+          
+            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();
+      });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+
+    })
+
+
+  }
+
+function update() {
+
+}
+
+</script>
\ No newline at end of file
diff --git a/src/pages/small-letter/m.astro b/src/pages/small-letter/m.astro
index 1005c49..5efc026 100644
--- a/src/pages/small-letter/m.astro
+++ b/src/pages/small-letter/m.astro
@@ -50,30 +50,38 @@ import Layout from "../../layouts/Layout.astro";
       canvasScale = 0.14
       canvasHeight = 35; 
       letterHeight = 50;
-      letterScale = 1;
+      letterScale = 1.1;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-       
       animatedMHeight = 35;
       animatedMScale = 0.5;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterHeight = 40;
-      letterScale = 1.2;
+      letterScale = 1.3;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-        
       animatedMHeight = 20;
-      animatedMScale = 0.66;
+      animatedMScale = 0.6;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   function preload() {
     this.load.video('animatedM', '/assets/animated-letter/small_m.mp4');
@@ -90,8 +98,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
- 
-     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -129,7 +135,7 @@ import Layout from "../../layouts/Layout.astro";
   });
    
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
-    this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'letterM').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterM').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
     const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterM').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedM').setDepth(2); canvasStand
     firstScreen.setVisible(false);
@@ -207,17 +213,17 @@ import Layout from "../../layouts/Layout.astro";
 
     let textX, textY;
 
-      firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 5 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
 
-      secondLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer2').setScale(letterScale);
+      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, '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');
@@ -227,7 +233,7 @@ import Layout from "../../layouts/Layout.astro";
       secondLayer.setInteractive({ draggable: true });
       secondLayer.setVisible(false);
 
-      thirdLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
+      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3').setScale(letterScale);
       textX = isMobile ? customWidth / 3 : customWidth * 0.75;
       const thirdTextLayer = this.add.text(textX, textY, '3. Roll Down', { font: '700 40px quicksand', fill: '#05b3a4'});
       const audioThreeAudio = this.sound.add('audioTwo');
@@ -324,6 +330,24 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/n.astro b/src/pages/small-letter/n.astro
index b036c0d..2e4c34c 100644
--- a/src/pages/small-letter/n.astro
+++ b/src/pages/small-letter/n.astro
@@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
          
       animatedVideoScale = 0.63;
       animatedNHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animatedVideoScale = 0.7;
       animatedNHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -127,8 +137,8 @@ import Layout from "../../layouts/Layout.astro";
   });
    
     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);
+    this.add.image(customWidth / 2 + 60, customHeight / 2 + letterNeight, 'letterN').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 + 60, 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);
@@ -207,17 +217,17 @@ import Layout from "../../layouts/Layout.astro";
 
     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.4;
+      firstLayer = this.add.image(customWidth / 2 + 60, customHeight / 2 + letterNeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 5 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // 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);
+      secondLayer = this.add.image(customWidth / 2 + 60, 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');
@@ -293,6 +303,24 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/o.astro b/src/pages/small-letter/o.astro
index 3ae107b..c8f922c 100644
--- a/src/pages/small-letter/o.astro
+++ b/src/pages/small-letter/o.astro
@@ -52,8 +52,13 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-         
+      animatedVideoScale = 0.61;   
       animatedOHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -66,8 +71,13 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-          
+      animatedVideoScale = 0.7;    
       animatedOHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -187,7 +197,7 @@ import Layout from "../../layouts/Layout.astro";
       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);
+      const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);
 
       // Play the video
       animatedLetter.play();
@@ -258,6 +268,24 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
 
 
   }
diff --git a/src/pages/small-letter/p.astro b/src/pages/small-letter/p.astro
index 0bba890..6ec9dc4 100644
--- a/src/pages/small-letter/p.astro
+++ b/src/pages/small-letter/p.astro
@@ -45,16 +45,20 @@ import Layout from "../../layouts/Layout.astro";
       cloudHeight = 340;
       canvasScale = 0.14
       canvasHeight = 35; 
-      letterPeight = 20;
-      letterScale = 0.8;
+      letterPeight = 10;
+      letterScale = 0.9;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
-         
-      animatedVideoScale = 0.63;
-      animatedPHeight = 32;
+      animatedVideoScale = 0.58;
+      animatedPHeight = 40;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -67,9 +71,13 @@ import Layout from "../../layouts/Layout.astro";
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
-          
-      animatedVideoScale = 0.7;
+      animatedVideoScale = 0.63;
       animatedPHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -87,7 +95,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -127,8 +134,8 @@ import Layout from "../../layouts/Layout.astro";
   });
    
     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);
+    this.add.image(customWidth / 2 + 30, customHeight / 2 + letterPeight, 'letterP').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 + 30, 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);
@@ -207,17 +214,17 @@ import Layout from "../../layouts/Layout.astro";
 
     let textX, textY;
 
-      firstLayer = this.add.image(customWidth / 2 + 20, customHeight / 2 + letterPeight, 'layer1').setScale(letterScale);
+      firstLayer = this.add.image(customWidth / 2 + 30, customHeight / 2 + letterPeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Down Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // 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);
+      secondLayer = this.add.image(customWidth / 2 + 30, 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');
@@ -254,7 +261,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -293,6 +299,24 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/q.astro b/src/pages/small-letter/q.astro
index 562d558..5cd3712 100644
--- a/src/pages/small-letter/q.astro
+++ b/src/pages/small-letter/q.astro
@@ -45,16 +45,21 @@ import Layout from "../../layouts/Layout.astro";
       cloudHeight = 340;
       canvasScale = 0.14
       canvasHeight = 35; 
-      letterQeight = 20;
-      letterScale = 0.8;
+      letterQeight = 0;
+      letterScale = 0.9;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animatedVideoScale = 0.63;
+      animatedVideoScale = 0.6;
       animatedQHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -68,8 +73,13 @@ import Layout from "../../layouts/Layout.astro";
       sunWidth = 200;
       sunHeight = 100;
           
-      animatedVideoScale = 0.7;
+      animatedVideoScale = 0.65;
       animatedQHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -87,7 +97,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('backgroundImage', '/assets/bg6.png');
     this.load.image('cloud', '/assets/cloud.png');
     this.load.image('canvas', '/assets/canvas4.png');
-     
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -127,8 +136,8 @@ import Layout from "../../layouts/Layout.astro";
   });
    
     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);
+    this.add.image(customWidth / 2 - 45, customHeight / 2 + letterQeight, 'letterQ').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 - 45, 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);
@@ -205,19 +214,19 @@ import Layout from "../../layouts/Layout.astro";
       // You can add your code here for what to do when the video finishes.
     });
 
-    let textX, textY;
+    let textX, textY; - 35
 
-      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.4;
+      firstLayer = this.add.image(customWidth / 2 - 45, customHeight / 2 + letterQeight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 6.5 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Hook Around',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // 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);
+      secondLayer = this.add.image(customWidth / 2 - 45, 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');
@@ -254,7 +263,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -293,6 +301,24 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/r.astro b/src/pages/small-letter/r.astro
index c39368a..a613c11 100644
--- a/src/pages/small-letter/r.astro
+++ b/src/pages/small-letter/r.astro
@@ -46,30 +46,40 @@ import Layout from "../../layouts/Layout.astro";
       canvasScale = 0.14
       canvasHeight = 35; 
       letterReight = 20;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
       sunWidth = 70;
       sunHeight = 70;
          
-      animatedVideoScale = 0.63;
+      animatedVideoScale = 0.5;
       animatedRHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterReight = -10;
-      letterScale = 1;
+      letterScale = 1.2;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
-      animatedVideoScale = 0.7;
+      animatedVideoScale = 0.6;
       animatedRHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -127,8 +137,8 @@ import Layout from "../../layouts/Layout.astro";
   });
    
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
-    this.add.image(customWidth / 2 + 30, customHeight / 2 + letterReight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
-    const firstScreen = this.add.image(customWidth / 2  + 30, customHeight / 2 + letterReight, 'letterR').setDepth(2).setScale(letterScale);
+    this.add.image(customWidth / 2 + 40, customHeight / 2 + letterReight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2  + 40, customHeight / 2 + letterReight, 'letterR').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterReight, 'animatedR').setDepth(2); canvasStand
     firstScreen.setVisible(false);
     // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@@ -207,17 +217,17 @@ import Layout from "../../layouts/Layout.astro";
 
     let textX, textY;
 
-      firstLayer = this.add.image(customWidth / 2  + 30, customHeight / 2 + letterReight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
+      firstLayer = this.add.image(customWidth / 2  + 40, customHeight / 2 + letterReight, 'layer1').setScale(letterScale);
+      textX = isMobile ? customWidth / 5 : customWidth * 0.75;
             textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Small Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
 
-      secondLayer = this.add.image(customWidth / 2  + 30, customHeight / 2 + letterReight, 'layer2').setScale(letterScale);
+      secondLayer = this.add.image(customWidth / 2  + 40, customHeight / 2 + letterReight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
       const secondTextLayer = this.add.text(textX, textY, '2. Roll',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioTwoAudio = this.sound.add('audioTwo');
@@ -293,6 +303,24 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/s.astro b/src/pages/small-letter/s.astro
index b7a3459..f991f30 100644
--- a/src/pages/small-letter/s.astro
+++ b/src/pages/small-letter/s.astro
@@ -45,7 +45,7 @@ import Layout from "../../layouts/Layout.astro";
       cloudHeight = 340;
       canvasScale = 0.14
       canvasHeight = 35; 
-      letterHeight = 40;
+      letterHeight = 35;
       letterScale = 1.3;
       backgroundScale = 0.8;
       sunScale = 0.1;
@@ -55,12 +55,17 @@ import Layout from "../../layouts/Layout.astro";
          
       animatedVideoScale = 0.6;
       animatedSHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.195;
       canvasHeight = 20;
-      letterHeight = 30;
+      letterHeight = 20;
       letterScale = 1.5;
       backgroundScale = 1;
       sunScale  = 0.2;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animatedVideoScale = 0.73;
       animatedSHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
 
   function preload() {
@@ -206,10 +216,10 @@ import Layout from "../../layouts/Layout.astro";
 
       firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 13 : customWidth * 0.75;
-textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Hook Around Snake',{ font: '700 35px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -239,8 +249,6 @@ textY = isMobile ? customHeight / 5 : customHeight / 2.4;
         }
         });
        
-
-
       graphics = this.add.graphics();
       graphics.setMask(mask);
       graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
@@ -259,6 +267,24 @@ textY = isMobile ? customHeight / 5 : customHeight / 2.4;
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
 
 
   }
diff --git a/src/pages/small-letter/t.astro b/src/pages/small-letter/t.astro
index 08c8368..e4cd223 100644
--- a/src/pages/small-letter/t.astro
+++ b/src/pages/small-letter/t.astro
@@ -45,7 +45,7 @@ import Layout from "../../layouts/Layout.astro";
       cloudHeight = 340;
       canvasScale = 0.14
       canvasHeight = 35; 
-      letterReight = 50;
+      letterTeight = 60;
       letterScale = 1.3;
       backgroundScale = 0.8;
       sunScale = 0.1;
@@ -55,12 +55,17 @@ import Layout from "../../layouts/Layout.astro";
          
       animatedVideoScale = 0.63;
       animatedTHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.195;
       canvasHeight = 20;
-      letterReight = 45;
+      letterTeight = 35;
       letterScale = 1.3;
       backgroundScale = 1;
       sunScale  = 0.2;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animatedVideoScale = 0.7;
       animatedTHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -127,9 +137,9 @@ import Layout from "../../layouts/Layout.astro";
   });
    
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
-    this.add.image(customWidth / 2, customHeight / 2 + letterReight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
-    const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterReight, 'letterR').setDepth(2).setScale(letterScale);
-    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterReight, 'animatedT').setDepth(2); canvasStand
+    this.add.image(customWidth / 2, customHeight / 2 + letterTeight, 'letterR').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterTeight, 'letterR').setDepth(2).setScale(letterScale);
+    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterTeight, 'animatedT').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);
@@ -207,17 +217,17 @@ import Layout from "../../layouts/Layout.astro";
 
     let textX, textY;
 
-      firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterReight, 'layer1').setScale(letterScale);
+      firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterTeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Tall Down',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
 
-      secondLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterReight, 'layer2').setScale(letterScale);
+      secondLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterTeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
       const secondTextLayer = this.add.text(textX, textY, '2. Cross',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioTwoAudio = this.sound.add('audioTwo');
@@ -254,7 +264,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -293,6 +302,24 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/u.astro b/src/pages/small-letter/u.astro
index 1b3f870..10c6381 100644
--- a/src/pages/small-letter/u.astro
+++ b/src/pages/small-letter/u.astro
@@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
          
       animatedVideoScale = 0.63;
       animatedUHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animatedVideoScale = 0.7;
       animatedUHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -212,7 +222,7 @@ import Layout from "../../layouts/Layout.astro";
       textY = isMobile ? customHeight / 6 : customHeight / 2;
       const firstTextLayer = this.add.text(textX, textY, '1. Small Down Curve Up',{ font: '700 35px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -254,7 +264,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -293,6 +302,24 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/v.astro b/src/pages/small-letter/v.astro
index 1922583..fbf8b61 100644
--- a/src/pages/small-letter/v.astro
+++ b/src/pages/small-letter/v.astro
@@ -46,7 +46,7 @@ import Layout from "../../layouts/Layout.astro";
       canvasScale = 0.14
       canvasHeight = 35; 
       letterVHeight = 35;
-      letterScale = 1.3;
+      letterScale = 1.5;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
@@ -55,13 +55,18 @@ import Layout from "../../layouts/Layout.astro";
          
       animatedVideoScale = 0.63;
       animatedVHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterVHeight = 20;
-      letterScale = 1.3;
+      letterScale = 1.5;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animatedVideoScale = 0.7;
       animatedVHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -207,11 +217,11 @@ import Layout from "../../layouts/Layout.astro";
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterVHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+      textX = isMobile ? customWidth / 4 + 30 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -253,7 +263,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -292,6 +301,24 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/w.astro b/src/pages/small-letter/w.astro
index 6f29218..224b4aa 100644
--- a/src/pages/small-letter/w.astro
+++ b/src/pages/small-letter/w.astro
@@ -55,6 +55,11 @@ import Layout from "../../layouts/Layout.astro";
          
       animatedVideoScale = 0.6;
       animatedWHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animatedVideoScale = 0.73;
       animatedWHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   function preload() {
     this.load.video('animatedW', '/assets/animated-letter/small_w.mp4');
@@ -207,11 +217,11 @@ import Layout from "../../layouts/Layout.astro";
     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.4;
+      textX = isMobile ? customWidth / 4 + 40: customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -357,8 +367,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
 
-      // Start Position 626 317
 
   }
 
diff --git a/src/pages/small-letter/x.astro b/src/pages/small-letter/x.astro
index b6fbad7..5422ae8 100644
--- a/src/pages/small-letter/x.astro
+++ b/src/pages/small-letter/x.astro
@@ -46,7 +46,7 @@ import Layout from "../../layouts/Layout.astro";
       canvasScale = 0.14
       canvasHeight = 35; 
       letterXHeight = 35;
-      letterScale = 1.3;
+      letterScale = 1.5;
       backgroundScale = 0.8;
       sunScale = 0.1;
       sunScalePlus = 0.15;
@@ -55,21 +55,31 @@ import Layout from "../../layouts/Layout.astro";
          
       animatedXideoScale = 0.63;
       animatedXHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.195;
       canvasHeight = 20;
       letterXHeight = 20;
-      letterScale = 1.3;
+      letterScale = 1.5;
       backgroundScale = 1;
       sunScale  = 0.2;
       sunScalePlus = 0.25;
       sunWidth = 200;
       sunHeight = 100;
           
-      animatedXideoScale = 0.7;
+      animatedXideoScale = 0.6;
       animatedXHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -209,10 +219,10 @@ import Layout from "../../layouts/Layout.astro";
 
       firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterXHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Slant',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -254,7 +264,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -293,6 +302,24 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
   }
 
 function update() {
diff --git a/src/pages/small-letter/y.astro b/src/pages/small-letter/y.astro
index 791177c..06aa67b 100644
--- a/src/pages/small-letter/y.astro
+++ b/src/pages/small-letter/y.astro
@@ -45,7 +45,7 @@ import Layout from "../../layouts/Layout.astro";
       cloudHeight = 340;
       canvasScale = 0.14
       canvasHeight = 35; 
-      letterYHeight = - 10;
+      letterYHeight = - 20;
       letterScale = 1;
       backgroundScale = 0.8;
       sunScale = 0.1;
@@ -53,14 +53,19 @@ import Layout from "../../layouts/Layout.astro";
       sunWidth = 70;
       sunHeight = 70;
          
-      animatedYideoScale = 0.63;
+      animatedYideoScale = 0.6;
       animatedYHeight = 32;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
       canvasScale = 0.195;
       canvasHeight = 20;
-      letterYHeight = - 30;
+      letterYHeight = - 40;
       letterScale = 1.2;
       backgroundScale = 1;
       sunScale  = 0.2;
@@ -70,6 +75,11 @@ import Layout from "../../layouts/Layout.astro";
           
       animatedYideoScale = 0.7;
       animatedYHeight = 20;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   // let hideButton;
 
@@ -127,8 +137,8 @@ import Layout from "../../layouts/Layout.astro";
   });
    
     const backgroundImages = this.add.image(customWidth / 2, customHeight /2, 'backgroundImage').setDepth(-2).setScale(backgroundScale);
-    this.add.image(customWidth / 2, customHeight / 2 + letterYHeight, 'letterY').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
-    const firstScreen = this.add.image(customWidth / 2 , customHeight / 2 + letterYHeight, 'letterY').setDepth(2).setScale(letterScale);
+    this.add.image(customWidth / 2 - 10, customHeight / 2 + letterYHeight, 'letterY').setAlpha(0.2).setDepth(0.5).setScale(letterScale);
+    const firstScreen = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterYHeight, 'letterY').setDepth(2).setScale(letterScale);
     // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterYHeight, 'animatedY').setDepth(2); canvasStand
     firstScreen.setVisible(false);
     // this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
@@ -207,17 +217,17 @@ import Layout from "../../layouts/Layout.astro";
 
     let textX, textY;
 
-      firstLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterYHeight, 'layer1').setScale(letterScale);
+      firstLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterYHeight, 'layer1').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
 
-      secondLayer = this.add.image(customWidth / 2 , customHeight / 2 + letterYHeight, 'layer2').setScale(letterScale);
+      secondLayer = this.add.image(customWidth / 2 - 10, customHeight / 2 + letterYHeight, 'layer2').setScale(letterScale);
       textX = isMobile ? customWidth / 4 : customWidth * 0.75;
       const secondTextLayer = this.add.text(textX, textY, '2. Slant Tail',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioTwoAudio = this.sound.add('audioTwo');
@@ -254,7 +264,6 @@ import Layout from "../../layouts/Layout.astro";
             firstLayer.setAlpha(0.5);
         }
         });
-``
         // Repeat the above code for secondLayer and thirdLayer
 
         // Add this code for secondLayer
@@ -293,6 +302,25 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
+      
   }
 
 function update() {
diff --git a/src/pages/small-letter/z.astro b/src/pages/small-letter/z.astro
index ccc3666..d610cda 100644
--- a/src/pages/small-letter/z.astro
+++ b/src/pages/small-letter/z.astro
@@ -58,7 +58,12 @@ import Layout from "../../layouts/Layout.astro";
       sunHeight = 70;
        
       animatedZHeight = 35;
-      animatedZScale = 0.5;
+      animatedZScale = 0.6;
+      helpButtonHeight = customHeight / 1.1;
+      helpButtonWidth = customWidth / 2 + 10; 
+
+      startButtonHeight = customHeight / 1.1;
+      startButtonWidth = customWidth / 2 - 100;
     } else{
       cloudeSize = 500;
       cloudHeight = 250;
@@ -74,6 +79,11 @@ import Layout from "../../layouts/Layout.astro";
         
       animatedZHeight = 20;
       animatedZScale = 0.66;
+      helpButtonHeight = customHeight / 2 + 40;
+      helpButtonWidth = customWidth / 1.32;
+
+      startButtonHeight = customHeight / 2 - 20;
+      startButtonWidth = customWidth / 1.32;
     }
   function preload() {
     this.load.video('animatedZ', '/assets/animated-letter/small_z.mp4');
@@ -208,11 +218,11 @@ import Layout from "../../layouts/Layout.astro";
     let textX, textY;
 
       firstLayer = this.add.image(customWidth / 2 - 20, customHeight / 2 + letterHeight, 'layer1').setScale(letterScale);
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-            textY = isMobile ? customHeight / 5 : customHeight / 2.4;
+      textX = isMobile ? customWidth / 4 + 40 : customWidth * 0.75;
+      textY = isMobile ? customHeight / 5 : customHeight / 2.4;
       const firstTextLayer = this.add.text(textX, textY, '1. Slide',{ font: '700 40px quicksand', fill: '#05b3a4'});
       const audioOneAudio = this.sound.add('audioOne');
-      audioOneAudio.play();
+      // audioOneAudio.play();
       firstLayer.setDepth(1);
       firstLayer.setAlpha(0.5);
       firstLayer.setInteractive({ draggable: true });
@@ -324,6 +334,24 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
+      let startButton = this.add.text(startButtonWidth, startButtonHeight, "Start", {
+      font: '900 24px Quicksand',
+      fill: '#05b3a4',
+      backgroundColor : '#7c4c23',
+      padding: {x: 20, y: 10},
+      shadow: {
+        offsetX : 2, 
+        offsetY : 2, 
+        color: '#000',
+        blur: 5,
+        fill: true
+      }
+    })
+    firstTextLayer.setVisible(false);
+    startButton.setInteractive().on('pointerdown', () => {
+      audioOneAudio.play();
+      firstTextLayer.setVisible(true);
+    })
   }
 
 function update() {