diff --git a/public/assets/beanie.astro b/public/assets/beanie.astro
new file mode 100644
index 0000000..6accf39
--- /dev/null
+++ b/public/assets/beanie.astro
@@ -0,0 +1,10 @@
+<main>
+    <div>
+        <model-viewer src="/assets/new_beanie.glb" ar ar-modes="webxr scene-viewer quick-look" camera-controls poster="poster.webp" shadow-intensity="1" autoplay>
+            <div class="progress-bar hide" slot="progress-bar">
+                <div class="update-bar"></div>
+            </div>
+        </model-viewer>        
+    </div>
+</main>
+<script is:inline type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.1.1/model-viewer.min.js"></script>
\ No newline at end of file
diff --git a/public/assets/beanieImage.png b/public/assets/beanieImage.png
new file mode 100755
index 0000000..05547aa
Binary files /dev/null and b/public/assets/beanieImage.png differ
diff --git a/public/assets/canvas3.png b/public/assets/canvas3.png
deleted file mode 100644
index 7f03203..0000000
Binary files a/public/assets/canvas3.png and /dev/null differ
diff --git a/public/assets/new_beanie.glb b/public/assets/new_beanie.glb
new file mode 100755
index 0000000..53d8ac7
Binary files /dev/null and b/public/assets/new_beanie.glb differ
diff --git a/src/pages/guided-tracing/A.astro b/src/pages/guided-tracing/A.astro
index eb84cff..76e22f1 100644
--- a/src/pages/guided-tracing/A.astro
+++ b/src/pages/guided-tracing/A.astro
@@ -71,9 +71,9 @@ import Layout from "../../layouts/Layout.astro";
       sunWidth = 200;
       sunHeight = 100;
       parrotScale = 0.4;
-      parrotScalePlus = 0.44;
+      parrotScalePlus = 0.50;
       parrotWidth = 200;
-      parrotHeight = 245;
+      parrotHeight = 255;
       animatedAHeight = 20;
       animatedAScale = 0.73;
     }
@@ -93,7 +93,8 @@ 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('parrot', '/assets/parrot.png');
+    // this.load.image('parrot', '/assets/parrot.png');
+    this.load.image('parrot', '/assets/beanieImage.png');
     this.load.image('sun', '/assets/sun.png');
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
@@ -218,8 +219,7 @@ import Layout from "../../layouts/Layout.astro";
     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.
+        // add function after end video;
     });
 
     let textX, textY;
@@ -345,9 +345,6 @@ import Layout from "../../layouts/Layout.astro";
         graphics.lineTo(pointer.x, pointer.y);
         graphics.strokePath();
       });
-
-      // Start Position 626 317
-
   }
 
 function update() {
diff --git a/src/pages/guided-tracing/tt.astro b/src/pages/guided-tracing/tt.astro
index 64a8305..6097ffe 100644
--- a/src/pages/guided-tracing/tt.astro
+++ b/src/pages/guided-tracing/tt.astro
@@ -9,372 +9,47 @@ import Layout from "../../layouts/Layout.astro";
     </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.23
-      canvasHeight = 154; 
-      letterHeight = 70;
-      backgroundScale = 0.8;
-      sunScale = 0.1;
-      sunScalePlus = 0.15;
-      sunWidth = 70;
-      sunHeight = 70;
-    } else{
-      cloudeSize = 500;
-      cloudHeight = 250;
-      canvasScale = 0.27;
-      canvasHeight = 160;
-      letterHeight = 50;
-      backgroundScale = 1;
-      sunScale  = 0.2;
-      sunScalePlus = 0.25;
-      sunWidth = 200;
-      sunHeight = 100;
-    }
-  // let hideButton;
+ // Define the sprite sheet properties
+const frameWidth = 32;   // Adjust based on your sprite sheet
+const frameHeight = 32;  // Adjust based on your sprite sheet
+const numFrames = 8;     // Adjust based on the number of frames in your sprite sheet
+const frameRate = 10;    // Adjust the speed of the animation
 
+  // Preload function to load assets
   function preload() {
-    this.load.video('animatedA', '/assets/animated-letter/a.mp4');
-    this.load.svg('letterA', '/assets/capital-letter/a.svg');
-    this.load.svg('layer1', '/assets/capital-letter/a_l1.svg');
-    this.load.svg('layer2', '/assets/capital-letter/a_l2.svg');
-    this.load.svg('layer3', '/assets/capital-letter/a_l3.svg');
-    this.load.audio('slantLeft', '/assets/audio/slant-left.mp3');
-    this.load.audio('slantRight', '/assets/audio/slant-right.mp3');
-    this.load.audio('slide', '/assets/audio/slide.mp3');
-    this.load.image('topLogo', '/assets/top_logo.png');
-    this.load.svg('succesImage', '/assets/svg/tick.svg');
-    this.load.svg('handPointer', '/assets/svg/hand.svg');
-    // this.load.image('backgroundImage', '/assets/backgroundImage2.png');
-    this.load.image('backgroundImage', '/assets/bg6.png');
-    this.load.image('cloud', '/assets/cloud.png');
-    this.load.image('canvas', '/assets/canvas2.png');
-    this.load.image('sun', '/assets/sun.png');
-    this.load.image('bgMobile', '/assets/bgMobile.png');
+    this.load.spritesheet('playerWalk', '/assets/beanieImage.png', {
+        frameWidth: frameWidth,
+        frameHeight: frameHeight
+    });
   }
 
-// bgMobile.png
-  function create() {
-    this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-    this.add.text(customWidth / 10, 20, "Letter : A", { font: '700 40px quicksand', fill: '#05b3a4', });
-    // 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 sun = this.add.sprite(customWidth - sunWidth, sunHeight, 'sun').setScale(sunScale).setDepth(-1.9);
-    const scrollSpeed = 0.5;
-    this.time.addEvent({
-    loop: true,
-    callback: () => {
-      cloud.tilePositionX += scrollSpeed;
-    },
-    delay: 16, // Adjust the delay for the desired scrolling speed
+// Create function to set up the game
+function create() {
+  // Create an animation using the loaded sprite sheet
+  this.anims.create({
+    key: 'walk',
+    frames: this.anims.generateFrameNumbers('playerWalk', { start: 0, end: numFrames }),
+    frameRate: frameRate,
+    repeat: -1
   });
-  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, customHeight / 2 + letterHeight, 'letterA').setAlpha(0.2).setDepth(0.5);
-    const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'letterA').setDepth(2);
-    // const firstScreen = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'animatedA').setDepth(2);
-    this.add.image(customWidth / 2, customHeight / 2 + canvasHeight, 'canvas').setScale(canvasScale);
-    firstScreen.setVisible(false);
-    
-
-    let hideButton = this.add.text(customWidth / 2 - 65, customHeight / 1.1, "Let`s Do", { font: '900 24px quicksand', fill: '#05b3a4', backgroundColor: '#7c4c23'}).setPadding(20, 10);
-    hideButton.setInteractive().on('pointerdown', () => {
-      isDemoButtonClicked = false;
-      firstScreen.setVisible(false);
-      hideButton.setVisible(false);  // Hide the "Hide" button
-      demoButton.setVisible(true);   // Show the "Demo" button
-      graphics.setVisible(true);
-      handPointerLeft.setVisible(false);
-      handPointerRight.setVisible(false);
-      handPointeSlide.setVisible(false);
-      animatedLetter.setVisible(false);
-    });
-    hideButton.setVisible(false);
-    
-    let demoButton = this.add.text(customWidth / 2 - 50, customHeight / 1.1, "Help!", { font: '900 24px quicksand', fill: '#05b3a4', backgroundColor: '#7c4c23'}).setPadding(20, 10);
-    // demoButton.style.borderRadius = "25px";
-    // demoButton.style.set('borderRadius', '15px');
-
-    demoButton.setInteractive().on('pointerdown', () => {
-      graphics.setVisible(false);
-      firstScreen.setVisible(true);
-      demoButton.setVisible(false);  // Hide the "Demo" button
-      hideButton.setVisible(true);   // Show the "Hide" button
-      handPointerLeft.setVisible(false);
-      handPointerRight.setVisible(false);
-      handPointeSlide.setVisible(false);
-      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 : A', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
-    const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + 20, 'animatedA').setDepth(2).setScale(0.82);
-
-    // Play the video
-    animatedLetter.play();
-    animatedLetter.setVisible(false);
-
-    // You can set additional properties for the video, such as loop and mute:
-    animatedLetter.setLoop(true); // Loop the video
-    animatedLetter.setMute(false); // Unmute the video
-      animatedLetter.on('complete', function () {
-      // Video playback is complete
-      // You can add your code here for what to do when the video finishes.
-    });
-
-    let textX, textY;
-
-      firstLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer1');
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      textY = isMobile ? customHeight / 5 : customHeight / 2;
-      const firstTextLayer = this.add.text(textX, textY, '1. Slant Left',{ font: '700 40px quicksand', fill: '#05b3a4'});
-      const slantLeftAudio = this.sound.add('slantLeft');
-      slantLeftAudio.play();
-      firstLayer.setDepth(1);
-      firstLayer.setAlpha(0.5);
-      firstLayer.setInteractive({ draggable: true });
-
-      secondLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer2');
-      textX = isMobile ? customWidth / 4 : customWidth * 0.75;
-      const secondTextLayer = this.add.text(textX, textY, '2. Slant Right',{ font: '700 40px quicksand', fill: '#05b3a4'});
-      const slantRightAudio = this.sound.add('slantRight');
-      secondTextLayer.setVisible(false);
-      secondLayer.setDepth(1);
-      secondLayer.setAlpha(0.5);
-      secondLayer.setInteractive({ draggable: true });
-      secondLayer.setVisible(false);
-
-      thirdLayer = this.add.image(customWidth / 2, customHeight / 2 + letterHeight, 'layer3');
-      textX = isMobile ? customWidth / 3 : customWidth * 0.75;
-      const thirdTextLayer = this.add.text(textX, textY, '3. Slide', { font: '700 40px quicksand', fill: '#05b3a4'});
-      const slideAudio = this.sound.add('slide');
-      thirdTextLayer.setVisible(false);
-      thirdLayer.setDepth(1.1);
-      // thirdLayer.setScale(1.15);
-      thirdLayer.setAlpha(0.5);
-      thirdLayer.setInteractive({ draggable: true });
-      thirdLayer.setVisible(false);
-
-        // Add these variables to keep track of start points
-        let firstDragStartPoint = { x: 0, y: 0 };
-        let secondDragStartPoint = { x: 0, y: 0 };
-        let thirdDragStartPoint = { x: 0, y: 0 };
-
-        // ...
-
-        // Add this code for firstLayer
-        firstLayer.on('dragstart', (pointer) => {
-        firstDragStartPoint.x = pointer.x;
-        firstDragStartPoint.y = pointer.y;
-        });
-
-        firstLayer.on('drag', (pointer) => {
-        const distance = Phaser.Math.Distance.Between(firstDragStartPoint.x, firstDragStartPoint.y, pointer.x, pointer.y);
-
-        if (distance >= 100) {
-            firstTextLayer.setVisible(false);
-            secondTextLayer.setVisible(true);
-            slantRightAudio.play();
-            secondLayer.setVisible(true);
-            firstLayer.setAlpha(1);
-            secondLayer.setAlpha(0.5);
-            thirdLayer.setAlpha(0.5);
-        } else {
-            firstLayer.setAlpha(0.5);
-        }
-        });
-
-        // Repeat the above code for secondLayer and thirdLayer
-
-        // Add this code for secondLayer
-        secondLayer.on('dragstart', (pointer) => {
-        secondDragStartPoint.x = pointer.x;
-        secondDragStartPoint.y = pointer.y;
-        });
-
-        secondLayer.on('drag', (pointer) => {
-        const distance = Phaser.Math.Distance.Between(secondDragStartPoint.x, secondDragStartPoint.y, pointer.x, pointer.y);
-
-        if (distance >= 100) {
-            secondTextLayer.setVisible(false);
-            thirdTextLayer.setVisible(true);
-            slideAudio.play();
-            thirdLayer.setVisible(true);
-            secondLayer.setAlpha(1);
-            thirdLayer.setAlpha(0.5);
-        } else {
-            secondLayer.setAlpha(0.5);
-        }
-        });
-
-        // Add this code for thirdLayer
-        thirdLayer.on('dragstart', (pointer) => {
-        thirdDragStartPoint.x = pointer.x;
-        thirdDragStartPoint.y = pointer.y;
-        });
-
-        thirdLayer.on('drag', (pointer) => {
-        const distance = Phaser.Math.Distance.Between(thirdDragStartPoint.x, thirdDragStartPoint.y, pointer.x, pointer.y);
-
-        if (distance >= 100) {
-            thirdLayer.setAlpha(1);
-            thirdTextLayer.setVisible(false);
-        } else {
-            thirdLayer.setAlpha(0.5);
-        }
-        });
-
-
-      graphics = this.add.graphics();
-      graphics.lineStyle(15, 0xFFFFFF, 2).setDepth(2); // Set line style (width, color, alpha)
-
-      this.input.on('pointerdown', function (pointer) {
-        isDrawing = true;
-        graphics.moveTo(pointer.x, pointer.y);
-        console.log("Start Position", pointer.x, pointer.y)
-      });
-
-      this.input.on('pointerup', function () {
-        isDrawing = false;
-      });
-
-      this.input.on('pointermove', function (pointer) {
-        if (!isDrawing) return;
-
-        graphics.lineTo(pointer.x, pointer.y);
-        graphics.strokePath();
-      });
-      
-        const handPointerLeft = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
-        const startHeightLeft = customHeight /2 - 100; // Starting y position
-        const endHeightLeft = customHeight / 2 + 170;   // Ending y position
-        const startWidthLeft = customWidth / 2 + 22;
-        const endWidthLeft = customWidth / 2 - 70;
-        //   handPointer.setOrigin(0.5, 0.5);
-        handPointerLeft.setScale(0.5).setDepth(2); // Adjust scale as needed
-        // Define the bounce animation
-        this.tweens.add({
-          targets: handPointerLeft,
-          x: {
-              getStart: () => startWidthLeft,
-              getEnd: () => endWidthLeft,
-          }, // End x position
-          y: {
-            getStart: () => startHeightLeft,
-            getEnd: () => endHeightLeft,
-          },
-          duration: 3000, // Duration of each bounce
-          ease: 'Sine.easeInOut',
-          yoyo: false,
-          repeat: -1 // -1 means it will repeat indefinitely
-        });
-        const handPointerRight = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
-        const startHeightRight = customHeight /2 - 100; // Starting y position
-        const endHeightRight = customHeight / 2 + 170;   // Ending y position
-        const startWidthRight = customWidth / 2 + 20;
-        const endWidthRight = customWidth / 2 + 107;
-        //   handPointer.setOrigin(0.5, 0.5);
-        handPointerRight.setScale(0.5).setDepth(2).setAngle(360); // Adjust scale as needed
-        // Define the bounce animation
-        this.tweens.add({
-          targets: handPointerRight,
-          x: {
-              getStart: () => startWidthRight,
-              getEnd: () => endWidthRight,
-          }, // End x position
-          y: {
-            getStart: () => startHeightRight,
-            getEnd: () => endHeightRight,
-          },
-          duration: 3000, // Duration of each bounce
-          ease: 'Sine.easeInOut',
-          yoyo: false,
-          repeat: -1 // -1 means it will repeat indefinitely
-        });
-        const handPointeSlide = this.add.sprite(customWidth / 2, customHeight / 2, 'handPointer');
-        const startHeightSlide = customHeight / 2 + 70; // Starting y position
-        const endHeightSlide = customHeight / 2 + 70;   // Ending y position
-
-        const startWidthSlide = customWidth / 2 - 60;
-        const endWidthSlide = customWidth / 2 + 55;
-        //   handPointer.setOrigin(0.5, 0.5);
-        handPointeSlide.setScale(0.5).setDepth(2).setAngle(45); // Adjust scale as needed
-        // Define the bounce animation
-        this.tweens.add({
-          targets: handPointeSlide,
-          x: {
-              getStart: () => startWidthSlide,
-              getEnd: () => endWidthSlide,
-          }, // End x position
-          y: {
-            getStart: () => startHeightSlide,
-            getEnd: () => endHeightSlide,
-          },
-          duration: 3000, // Duration of each bounce
-          ease: 'Sine.easeInOut',
-          yoyo: false,
-          repeat: -1 // -1 means it will repeat indefinitely
-        });
-        handPointerLeft.setVisible(false);
-        handPointerRight.setVisible(false);
-        handPointeSlide.setVisible(false);
-
-      // Start Position 626 317
-
-  }
-
-function update() {
 
+  // Create a sprite and play the animation
+  const player = this.add.sprite(100, 100, 'playerWalk');
+  player.play('walk');
 }
 
+// Load the Phaser game
+const config = {
+  type: Phaser.AUTO,
+  width: 800,
+  height: 600,
+  scene: {
+    preload,
+    create
+  }
+};
+
+const game = new Phaser.Game(config);
+
+
 </script>
\ No newline at end of file