diff --git a/public/assets/color_button.png b/public/assets/color_button.png
new file mode 100644
index 0000000..6d11e5c
Binary files /dev/null and b/public/assets/color_button.png differ
diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro
index 27e0e54..21172ac 100644
--- a/src/pages/drag/dragdrop_phonics.astro
+++ b/src/pages/drag/dragdrop_phonics.astro
@@ -71,11 +71,11 @@ import Layout from '../../layouts/Layout.astro';
   let retryButton;
   let blockMatches;
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
+      topLogoWidth = 4.5;
+      muteIconWidth = 1.8;
+      resetIconWidth = 1.47;
+      tickIconWidth = 1.24;
+      cancelIconWidth = 1.08;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -147,7 +147,7 @@ import Layout from '../../layouts/Layout.astro';
       .then(({data}) => {
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
         if(isMobile){
-          imageCustomWidth = "?width=100";
+          imageCustomWidth = "?width=80";
         } else{
           imageCustomWidth = "?width=100";
         }
@@ -356,24 +356,24 @@ import Layout from '../../layouts/Layout.astro';
             graphics.strokePath();
 
             if(data.label1, data.label2, data.label3, data.label4, data.label5, data.label6, data.label7, data.label8){
-                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 30, data.label1, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 - 90, window.innerHeight - 30, data.label2, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 30, data.label3, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 30, data.label4, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 150, data.label5, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 - 50, window.innerHeight - 150, data.label6, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 150, data.label7, {font:`15px`, fill: `#7c4c23`})
-                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 150, data.label8, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 55, data.label1, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 55, data.label2, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 15, window.innerHeight - 55, data.label3, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 55, data.label4, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 170, window.innerHeight - 185, data.label5, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 185, data.label6, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 20, window.innerHeight - 185, data.label7, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 105, window.innerHeight - 185, data.label8, {font:`15px`, fill: `#7c4c23`})
             }
             if(isMobile){
-                this.add.text(leftTargetZoneW - 60, window.innerHeight / 6, data.left_label, {font:`13px`, fill: `#60C6CB`});
-                this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#60C6CB`});
+                this.add.text(leftTargetZoneW - 20, window.innerHeight / 4.5, data.left_label, {font:`10px`, fill: `#60C6CB`});
+                this.add.text(rightTargetZoneW - 100, window.innerHeight / 4.5, data.right_label, {font:`10px`, fill: `#60C6CB`});
             } else{
                 this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#60C6CB`});
                 this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
             }
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 20;
+                const baseFontSize = 24;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
@@ -438,53 +438,75 @@ import Layout from '../../layouts/Layout.astro';
           // windowLoad();
           submitUserData(this);
         })
+        let blocks1Width1, blocks1Width2, blocks1Width3, blocks1Width4, blocks1Width5, blocks1Width6, blocks1Width7, blocks1Width8;
 
+
+        if(isMobile){
+          blocks1Width1 = 180;
+          blocks1Width2 = 90;
+          blocks1Width3 = 2;
+          blocks1Width4 = 90;
+          blocks1Width5 = 180;
+          blocks1Width6 = 90;
+          blocks1Width7 = 2;
+          blocks1Width8 = 90;
+        } else{
+          blocks1Width1 = 200;
+          blocks1Width2 = 100;
+          blocks1Width3 = 2;
+          blocks1Width4 = 100;
+          blocks1Width5 = 200;
+          blocks1Width6 = 100;
+          blocks1Width7 = 2;
+          blocks1Width8 = 100;
+
+        }
         const blocks = [
             {
-                x: displayW / 2 - 200,
-                y: window.innerHeight - 250,
+                x: displayW / 2 - blocks1Width1,
+                y: window.innerHeight - 290,
                 textureKey: "blocks1",
                 id: "block1",
             },
             {
-                x: displayW / 2-100,
-                y: window.innerHeight - 250,
+                x: displayW / 2 - blocks1Width2,
+                y: window.innerHeight - 290,
                 textureKey: "blocks2",
                 id: "block2",
             },
             {
-                x: displayW / 2,
-                y: window.innerHeight - 250,
+                x: displayW / blocks1Width3,
+                y: window.innerHeight - 290,
                 textureKey: "blocks3",
                 id: "block3",
             },
             {
-                x: displayW / 2+100,
-                y: window.innerHeight - 250,
+                x: displayW / 2 + blocks1Width4,
+                y: window.innerHeight - 290,
                 textureKey: "blocks4",
                 id: "block4",
             },
             {
-                x: displayW / 2-200,
-                y: window.innerHeight - 120,
+                x: displayW / 2 - blocks1Width5,
+                y: window.innerHeight - 160,
                 textureKey: "blocks5",
                 id: "block5",
             },
             {
-                x: displayW / 2-100,
-                y: window.innerHeight - 120,
+                x: displayW / 2 - blocks1Width6,
+                y: window.innerHeight - 160,
                 textureKey: "blocks6",
                 id: "block6",
             },
             {
-                x: displayW / 2,
-                y: window.innerHeight - 120,
+                x: displayW / blocks1Width7,
+                y: window.innerHeight - 160,
                 textureKey: "blocks7",
                 id: "block7",
             },
             {
-                x: displayW / 2+100,
-                y: window.innerHeight - 120,
+                x: displayW / 2 + blocks1Width8,
+                y: window.innerHeight - 160,
                 textureKey: "blocks8",
                 id: "block8",
             },
@@ -495,7 +517,7 @@ import Layout from '../../layouts/Layout.astro';
         const targetZoneBorders = [];
         targetZones.forEach((targetZone) => {
           const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(0);
-          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.05).setScale(borderScale);
+          const targetBorder = this.add.image(targetZone.x, targetZone.y-20, "border").setAlpha(0.05).setScale(borderScale);
           targetZoneBorders.push(targetBorder);
           targetZone.block = null;
         }),
@@ -516,7 +538,7 @@ import Layout from '../../layouts/Layout.astro';
                 if (
                     Phaser.Geom.Intersects.RectangleToRectangle(
                         newBlock.getBounds(),
-                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 200, 100)
+                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 100, 50)
                     )
                 ) {
                     // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
@@ -535,7 +557,7 @@ import Layout from '../../layouts/Layout.astro';
 
                         droppedOnTargetZone = true;
                         targetZoneBorders[targetIndex].setVisible(true);
-                        targetZoneBorders[targetIndex].setAlpha(0);
+                        targetZoneBorders[targetIndex].setAlpha(0.5);
                         return;
                     }
             });
diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index 339f28b..f0c4921 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -313,7 +313,7 @@ import Layout from '../../layouts/Layout.astro';
           .then(({ data }) => {
             // console.log(data)
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-            const baseFontSize = 20;
+            const baseFontSize = 24;
             const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
             let wrapWidth;
             if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
diff --git a/src/pages/drag/match_phonics.astro b/src/pages/drag/match_phonics.astro
index 1cef4bc..9fc4eb8 100644
--- a/src/pages/drag/match_phonics.astro
+++ b/src/pages/drag/match_phonics.astro
@@ -315,7 +315,7 @@ import Layout from '../../layouts/Layout.astro';
                 },
               ];
               const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-              const baseFontSize = 20;
+              const baseFontSize = 24;
               const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
               let wrapWidth;
               if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro
index 8089a48..99b9eb5 100644
--- a/src/pages/drag/v2.astro
+++ b/src/pages/drag/v2.astro
@@ -315,7 +315,7 @@ import Layout from '../../layouts/Layout.astro';
                 },
               ];
               const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 20;
+                const baseFontSize = 24;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro
index 1f79091..25b5695 100644
--- a/src/pages/drag/v3.astro
+++ b/src/pages/drag/v3.astro
@@ -361,7 +361,7 @@ import Layout from '../../layouts/Layout.astro';
             ];
             // console.log(data)
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-            const baseFontSize = 20;
+            const baseFontSize = 24;
             const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
             let wrapWidth;
             if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro
index 33ddb27..b102504 100644
--- a/src/pages/drag/v4.astro
+++ b/src/pages/drag/v4.astro
@@ -349,7 +349,7 @@ import Layout from '../../layouts/Layout.astro';
                 this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#60C6CB`});
             }
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-              const baseFontSize = 20;
+              const baseFontSize = 24;
               const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
               let wrapWidth;
               if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro
index 3180342..29f68f9 100644
--- a/src/pages/drawing/drawing_phonics.astro
+++ b/src/pages/drawing/drawing_phonics.astro
@@ -30,11 +30,11 @@ import Layout from '../../layouts/Layout.astro';
     let formattedDateTime;
     let shortUniqueID;
     if(isMobile){
-        topLogoWidth = 5;
-        muteIconWidth = 2;
-        resetIconWidth = 1.6;
-        tickIconWidth = 1.34;
-        cancelIconWidth = 1.16;
+       topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -139,7 +139,7 @@ import Layout from '../../layouts/Layout.astro';
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 20;
+                const baseFontSize = 24;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro
index 6355d33..fa93452 100644
--- a/src/pages/drawing/drawing_writo.astro
+++ b/src/pages/drawing/drawing_writo.astro
@@ -31,11 +31,11 @@ import Layout from '../../layouts/Layout.astro';
     let shortUniqueID;
 
     if(isMobile){
-        topLogoWidth = 5;
-        muteIconWidth = 2;
-        resetIconWidth = 1.6;
-        tickIconWidth = 1.34;
-        cancelIconWidth = 1.16;
+       topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -140,7 +140,7 @@ import Layout from '../../layouts/Layout.astro';
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 20;
+                const baseFontSize = 24;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 046f930..386e59e 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -32,11 +32,11 @@ import Layout from '../../layouts/Layout.astro';
     let shortUniqueID;
     let scoreTotal = 0;
     if(isMobile){
-        topLogoWidth = 5;
-        muteIconWidth = 2;
-        resetIconWidth = 1.6;
-        tickIconWidth = 1.34;
-        cancelIconWidth = 1.16;
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -141,7 +141,7 @@ import Layout from '../../layouts/Layout.astro';
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 20;
+                const baseFontSize = 24;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro
index 04a2d9c..8ea4093 100644
--- a/src/pages/drawing/v2.astro
+++ b/src/pages/drawing/v2.astro
@@ -32,11 +32,11 @@ import Layout from '../../layouts/Layout.astro';
     let defaultColor;
 
     if(isMobile){
-        topLogoWidth = 5;
-        muteIconWidth = 2;
-        resetIconWidth = 1.6;
-        tickIconWidth = 1.34;
-        cancelIconWidth = 1.16;
+       topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -45,11 +45,11 @@ import Layout from '../../layouts/Layout.astro';
         downloadHeight = 200;
         learningWidth = 200;
         learningHeight = 365
-        image1Width = 3.7;
-        image1Height = 2.5;
+        image1Width = 3.5;
+        image1Height = 2.2;
         image2Width = 2;
         image2Right = 65;
-        image2Height = 2;
+        image2Height = 1.7;
         image2Bottom = 110;
     } else {
         topLogoWidth = 6;
@@ -154,7 +154,7 @@ import Layout from '../../layouts/Layout.astro';
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 20;
+                const baseFontSize = 24;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){
diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro
index 4b225b0..e8c4ab2 100644
--- a/src/pages/drawing/v3.astro
+++ b/src/pages/drawing/v3.astro
@@ -32,11 +32,11 @@ import Layout from '../../layouts/Layout.astro';
     let tickIconWidth;
     let cancelIconWidth; 
     if(isMobile){
-        topLogoWidth = 5;
-        muteIconWidth = 2;
-        resetIconWidth = 1.6;
-        tickIconWidth = 1.34;
-        cancelIconWidth = 1.16;
+       topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -141,7 +141,7 @@ import Layout from '../../layouts/Layout.astro';
             .then(({ data }) => {
                 // console.log(data.colors)
                 const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 20;
+                const baseFontSize = 24;
                 const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
                 let wrapWidth;
                 if(isMobile){
@@ -230,7 +230,7 @@ import Layout from '../../layouts/Layout.astro';
             //     this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
             // }
             if(isMobile){
-                outlineImage.setDepth(-1).setScale(0.40);
+                outlineImage.setDepth(-1).setScale(0.5);
             }else if(isTab){
                 outlineImage.setDepth(-1).setScale(0.90);
             } else{
@@ -278,7 +278,7 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
+            let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
             // const colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000'];
             const buttonSize = 60;
diff --git a/src/pages/guided-tracing/0.astro b/src/pages/guided-tracing/0.astro
index 6087e4a..7afe922 100644
--- a/src/pages/guided-tracing/0.astro
+++ b/src/pages/guided-tracing/0.astro
@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 0', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated0Height, 'animated0').setDepth(2).setScale(animated0videoScale);
diff --git a/src/pages/guided-tracing/1.astro b/src/pages/guided-tracing/1.astro
index f2e38c2..5d72ff9 100644
--- a/src/pages/guided-tracing/1.astro
+++ b/src/pages/guided-tracing/1.astro
@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 1', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated1Height, 'animated1').setDepth(2).setScale(animated1videoScale);
diff --git a/src/pages/guided-tracing/2.astro b/src/pages/guided-tracing/2.astro
index bc8adae..b17fe7a 100644
--- a/src/pages/guided-tracing/2.astro
+++ b/src/pages/guided-tracing/2.astro
@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 2', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
     const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated2Height, 'animated2').setDepth(2).setScale(animated2Scale);
diff --git a/src/pages/guided-tracing/3.astro b/src/pages/guided-tracing/3.astro
index b7fa87d..8947b0f 100644
--- a/src/pages/guided-tracing/3.astro
+++ b/src/pages/guided-tracing/3.astro
@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 3', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated3Height, 'animated3').setDepth(2).setScale(animated3Scale);
diff --git a/src/pages/guided-tracing/4.astro b/src/pages/guided-tracing/4.astro
index 3431974..20587c9 100644
--- a/src/pages/guided-tracing/4.astro
+++ b/src/pages/guided-tracing/4.astro
@@ -274,7 +274,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 4', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated4Height, 'animated4').setDepth(2).setScale(animated4Scale);
diff --git a/src/pages/guided-tracing/5.astro b/src/pages/guided-tracing/5.astro
index 9925f6b..acfe4c2 100644
--- a/src/pages/guided-tracing/5.astro
+++ b/src/pages/guided-tracing/5.astro
@@ -275,7 +275,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 5', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated5Height, 'animated5').setDepth(2).setScale(animated5Scale);
diff --git a/src/pages/guided-tracing/6.astro b/src/pages/guided-tracing/6.astro
index 3a88e31..ad53094 100644
--- a/src/pages/guided-tracing/6.astro
+++ b/src/pages/guided-tracing/6.astro
@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 6', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated6Height, 'animated6').setDepth(2).setScale(animated6Scale);
diff --git a/src/pages/guided-tracing/7.astro b/src/pages/guided-tracing/7.astro
index 3b3ab4a..f4a1faa 100644
--- a/src/pages/guided-tracing/7.astro
+++ b/src/pages/guided-tracing/7.astro
@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 7', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated7Height, 'animated7').setDepth(2).setScale(animated7Scale);
diff --git a/src/pages/guided-tracing/8.astro b/src/pages/guided-tracing/8.astro
index 80f0f62..c6cb622 100644
--- a/src/pages/guided-tracing/8.astro
+++ b/src/pages/guided-tracing/8.astro
@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 8', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated8Height, 'animated8').setDepth(2).setScale(animated8Scale);
diff --git a/src/pages/guided-tracing/9.astro b/src/pages/guided-tracing/9.astro
index 58a62ce..7c4ba00 100644
--- a/src/pages/guided-tracing/9.astro
+++ b/src/pages/guided-tracing/9.astro
@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write number : 9', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animated9Height, 'animated9').setDepth(2).setScale(animated9Scale);
diff --git a/src/pages/guided-tracing/A.astro b/src/pages/guided-tracing/A.astro
index 870c542..23008fa 100644
--- a/src/pages/guided-tracing/A.astro
+++ b/src/pages/guided-tracing/A.astro
@@ -264,7 +264,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     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);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedAScale);
diff --git a/src/pages/guided-tracing/B.astro b/src/pages/guided-tracing/B.astro
index 39b5d1e..8ee87c6 100644
--- a/src/pages/guided-tracing/B.astro
+++ b/src/pages/guided-tracing/B.astro
@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     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);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/C.astro b/src/pages/guided-tracing/C.astro
index a08c3a3..cb766fe 100644
--- a/src/pages/guided-tracing/C.astro
+++ b/src/pages/guided-tracing/C.astro
@@ -265,7 +265,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       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);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/D.astro b/src/pages/guided-tracing/D.astro
index a9f8bbb..710a7ea 100644
--- a/src/pages/guided-tracing/D.astro
+++ b/src/pages/guided-tracing/D.astro
@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : D', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/E.astro b/src/pages/guided-tracing/E.astro
index c25fd45..9db95d1 100644
--- a/src/pages/guided-tracing/E.astro
+++ b/src/pages/guided-tracing/E.astro
@@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     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);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(0.73);
diff --git a/src/pages/guided-tracing/F.astro b/src/pages/guided-tracing/F.astro
index c75a514..1196df5 100644
--- a/src/pages/guided-tracing/F.astro
+++ b/src/pages/guided-tracing/F.astro
@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     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);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedFScale);
diff --git a/src/pages/guided-tracing/G.astro b/src/pages/guided-tracing/G.astro
index c87b17a..a28ddd5 100644
--- a/src/pages/guided-tracing/G.astro
+++ b/src/pages/guided-tracing/G.astro
@@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : G', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/H.astro b/src/pages/guided-tracing/H.astro
index 1cfaaeb..174e674 100644
--- a/src/pages/guided-tracing/H.astro
+++ b/src/pages/guided-tracing/H.astro
@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : H', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedHScale);
diff --git a/src/pages/guided-tracing/I.astro b/src/pages/guided-tracing/I.astro
index 4e53a18..e7f429e 100644
--- a/src/pages/guided-tracing/I.astro
+++ b/src/pages/guided-tracing/I.astro
@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     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);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedIScale);
diff --git a/src/pages/guided-tracing/J.astro b/src/pages/guided-tracing/J.astro
index 9f50156..16f9c0d 100644
--- a/src/pages/guided-tracing/J.astro
+++ b/src/pages/guided-tracing/J.astro
@@ -264,7 +264,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       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);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/K.astro b/src/pages/guided-tracing/K.astro
index 88d5750..61122d6 100644
--- a/src/pages/guided-tracing/K.astro
+++ b/src/pages/guided-tracing/K.astro
@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : K', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale);
diff --git a/src/pages/guided-tracing/L.astro b/src/pages/guided-tracing/L.astro
index e682f37..5e465fe 100644
--- a/src/pages/guided-tracing/L.astro
+++ b/src/pages/guided-tracing/L.astro
@@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     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);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/M.astro b/src/pages/guided-tracing/M.astro
index b871abe..b67c2ec 100644
--- a/src/pages/guided-tracing/M.astro
+++ b/src/pages/guided-tracing/M.astro
@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : M', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/N.astro b/src/pages/guided-tracing/N.astro
index 52d98cd..0ebf390 100644
--- a/src/pages/guided-tracing/N.astro
+++ b/src/pages/guided-tracing/N.astro
@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : N', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedNScale);
diff --git a/src/pages/guided-tracing/O.astro b/src/pages/guided-tracing/O.astro
index a74c3af..18e5b0b 100644
--- a/src/pages/guided-tracing/O.astro
+++ b/src/pages/guided-tracing/O.astro
@@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       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);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/P.astro b/src/pages/guided-tracing/P.astro
index abf3145..426c78f 100644
--- a/src/pages/guided-tracing/P.astro
+++ b/src/pages/guided-tracing/P.astro
@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : P', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/Q.astro b/src/pages/guided-tracing/Q.astro
index 07ec2cc..caa9251 100644
--- a/src/pages/guided-tracing/Q.astro
+++ b/src/pages/guided-tracing/Q.astro
@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Q', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2, customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/R.astro b/src/pages/guided-tracing/R.astro
index 4dd944a..d89b14f 100644
--- a/src/pages/guided-tracing/R.astro
+++ b/src/pages/guided-tracing/R.astro
@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : R', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/S.astro b/src/pages/guided-tracing/S.astro
index f9aa0b9..feae8d6 100644
--- a/src/pages/guided-tracing/S.astro
+++ b/src/pages/guided-tracing/S.astro
@@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : S', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/T.astro b/src/pages/guided-tracing/T.astro
index 2927b21..749c36e 100644
--- a/src/pages/guided-tracing/T.astro
+++ b/src/pages/guided-tracing/T.astro
@@ -266,7 +266,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : T', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/U.astro b/src/pages/guided-tracing/U.astro
index cff9cce..a14d39b 100644
--- a/src/pages/guided-tracing/U.astro
+++ b/src/pages/guided-tracing/U.astro
@@ -265,7 +265,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : U', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/V.astro b/src/pages/guided-tracing/V.astro
index b806219..f2466d1 100644
--- a/src/pages/guided-tracing/V.astro
+++ b/src/pages/guided-tracing/V.astro
@@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : V', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/W.astro b/src/pages/guided-tracing/W.astro
index 4fceabc..4ac9867 100644
--- a/src/pages/guided-tracing/W.astro
+++ b/src/pages/guided-tracing/W.astro
@@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : W', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/X.astro b/src/pages/guided-tracing/X.astro
index 4abca82..2adbcfe 100644
--- a/src/pages/guided-tracing/X.astro
+++ b/src/pages/guided-tracing/X.astro
@@ -267,7 +267,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : X', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/Y.astro b/src/pages/guided-tracing/Y.astro
index d0dace4..d1f683c 100644
--- a/src/pages/guided-tracing/Y.astro
+++ b/src/pages/guided-tracing/Y.astro
@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYScale);
diff --git a/src/pages/guided-tracing/Z.astro b/src/pages/guided-tracing/Z.astro
index bd9938e..ae87f3a 100644
--- a/src/pages/guided-tracing/Z.astro
+++ b/src/pages/guided-tracing/Z.astro
@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : Z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);
diff --git a/src/pages/guided-tracing/a.astro b/src/pages/guided-tracing/a.astro
index 6f281b6..8026f7f 100644
--- a/src/pages/guided-tracing/a.astro
+++ b/src/pages/guided-tracing/a.astro
@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     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);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedAHeight, 'animatedA').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/b.astro b/src/pages/guided-tracing/b.astro
index b47557a..ceb4ba2 100644
--- a/src/pages/guided-tracing/b.astro
+++ b/src/pages/guided-tracing/b.astro
@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     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);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedBHeight, 'animatedB').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/c.astro b/src/pages/guided-tracing/c.astro
index 7a3babc..19314ae 100644
--- a/src/pages/guided-tracing/c.astro
+++ b/src/pages/guided-tracing/c.astro
@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       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);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedCHeight, 'animatedC').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/d.astro b/src/pages/guided-tracing/d.astro
index cf80cb1..8922bc7 100644
--- a/src/pages/guided-tracing/d.astro
+++ b/src/pages/guided-tracing/d.astro
@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : d', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedDHeight, 'animatedD').setDepth(2).setScale(animatedVideScale);
diff --git a/src/pages/guided-tracing/e.astro b/src/pages/guided-tracing/e.astro
index a99e20e..4dde5a1 100644
--- a/src/pages/guided-tracing/e.astro
+++ b/src/pages/guided-tracing/e.astro
@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     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);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedEHeight, 'animatedE').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/f.astro b/src/pages/guided-tracing/f.astro
index a5dd46c..cd0ea63 100644
--- a/src/pages/guided-tracing/f.astro
+++ b/src/pages/guided-tracing/f.astro
@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     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);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedFHeight, 'animatedF').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/g.astro b/src/pages/guided-tracing/g.astro
index 50d8d5e..6bf4f86 100644
--- a/src/pages/guided-tracing/g.astro
+++ b/src/pages/guided-tracing/g.astro
@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : g', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedGHeight, 'animatedG').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/h.astro b/src/pages/guided-tracing/h.astro
index 7b74f35..2d4953d 100644
--- a/src/pages/guided-tracing/h.astro
+++ b/src/pages/guided-tracing/h.astro
@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : h', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedHHeight, 'animatedH').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/i.astro b/src/pages/guided-tracing/i.astro
index 7cca21b..29bebf8 100644
--- a/src/pages/guided-tracing/i.astro
+++ b/src/pages/guided-tracing/i.astro
@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     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);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedIHeight, 'animatedI').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/j.astro b/src/pages/guided-tracing/j.astro
index d54be51..b75a909 100644
--- a/src/pages/guided-tracing/j.astro
+++ b/src/pages/guided-tracing/j.astro
@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     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);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedJHeight, 'animatedJ').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/k.astro b/src/pages/guided-tracing/k.astro
index 528e162..e2a90c3 100644
--- a/src/pages/guided-tracing/k.astro
+++ b/src/pages/guided-tracing/k.astro
@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : k', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedKHeight, 'animatedK').setDepth(2).setScale(animatedKScale);
diff --git a/src/pages/guided-tracing/l.astro b/src/pages/guided-tracing/l.astro
index 724655f..0c44bee 100644
--- a/src/pages/guided-tracing/l.astro
+++ b/src/pages/guided-tracing/l.astro
@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       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);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedLHeight, 'animatedL').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/m.astro b/src/pages/guided-tracing/m.astro
index 2e1f061..ae72bf0 100644
--- a/src/pages/guided-tracing/m.astro
+++ b/src/pages/guided-tracing/m.astro
@@ -269,7 +269,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : m', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedMHeight, 'animatedM').setDepth(2).setScale(animatedMScale);
diff --git a/src/pages/guided-tracing/n.astro b/src/pages/guided-tracing/n.astro
index d3b2f91..a4924cd 100644
--- a/src/pages/guided-tracing/n.astro
+++ b/src/pages/guided-tracing/n.astro
@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : n', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedNHeight, 'animatedN').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/o.astro b/src/pages/guided-tracing/o.astro
index ad8ca3a..f640613 100644
--- a/src/pages/guided-tracing/o.astro
+++ b/src/pages/guided-tracing/o.astro
@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       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);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedOHeight, 'animatedO').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/p.astro b/src/pages/guided-tracing/p.astro
index 06df2f1..10422a2 100644
--- a/src/pages/guided-tracing/p.astro
+++ b/src/pages/guided-tracing/p.astro
@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedPHeight, 'animatedP').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/q.astro b/src/pages/guided-tracing/q.astro
index 0906178..db6a061 100644
--- a/src/pages/guided-tracing/q.astro
+++ b/src/pages/guided-tracing/q.astro
@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : p', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
     const animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedQHeight, 'animatedQ').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/r.astro b/src/pages/guided-tracing/r.astro
index bb8ba7f..aabad51 100644
--- a/src/pages/guided-tracing/r.astro
+++ b/src/pages/guided-tracing/r.astro
@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : r', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedRHeight, 'animatedR').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/s.astro b/src/pages/guided-tracing/s.astro
index d2607c1..f5dacfb 100644
--- a/src/pages/guided-tracing/s.astro
+++ b/src/pages/guided-tracing/s.astro
@@ -268,7 +268,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
       const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-      const baseFontSize = 20;
+      const baseFontSize = 24;
       const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
       const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : s', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedSHeight, 'animatedS').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/t.astro b/src/pages/guided-tracing/t.astro
index 9a10fb7..af97673 100644
--- a/src/pages/guided-tracing/t.astro
+++ b/src/pages/guided-tracing/t.astro
@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : t', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedTHeight, 'animatedT').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/u.astro b/src/pages/guided-tracing/u.astro
index 13c38fe..041b4c8 100644
--- a/src/pages/guided-tracing/u.astro
+++ b/src/pages/guided-tracing/u.astro
@@ -270,7 +270,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : u', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedUHeight, 'animatedU').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/v.astro b/src/pages/guided-tracing/v.astro
index 3777201..7943db7 100644
--- a/src/pages/guided-tracing/v.astro
+++ b/src/pages/guided-tracing/v.astro
@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : v', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedVHeight, 'animatedV').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/w.astro b/src/pages/guided-tracing/w.astro
index 0988f23..7fb62e5 100644
--- a/src/pages/guided-tracing/w.astro
+++ b/src/pages/guided-tracing/w.astro
@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : w', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedWHeight, 'animatedW').setDepth(2).setScale(animatedVideoScale);
diff --git a/src/pages/guided-tracing/x.astro b/src/pages/guided-tracing/x.astro
index fc24d86..1e833ea 100644
--- a/src/pages/guided-tracing/x.astro
+++ b/src/pages/guided-tracing/x.astro
@@ -272,7 +272,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : x', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedXHeight, 'animatedX').setDepth(2).setScale(animatedXideoScale);
diff --git a/src/pages/guided-tracing/y.astro b/src/pages/guided-tracing/y.astro
index c60d818..f045b05 100644
--- a/src/pages/guided-tracing/y.astro
+++ b/src/pages/guided-tracing/y.astro
@@ -271,7 +271,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : y', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedYHeight, 'animatedY').setDepth(2).setScale(animatedYideoScale);
diff --git a/src/pages/guided-tracing/z.astro b/src/pages/guided-tracing/z.astro
index ff88a8e..7f8e004 100644
--- a/src/pages/guided-tracing/z.astro
+++ b/src/pages/guided-tracing/z.astro
@@ -273,7 +273,7 @@ import Layout from "../../layouts/Layout.astro";
     });
 
     const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-    const baseFontSize = 20;
+    const baseFontSize = 24;
     const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
     const descrptText = this.add.text(screenCenterX, 90, 'Let`s learn how to write letter : z', { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
           animatedLetter = this.add.video(customWidth / 2 , customHeight / 2 + animatedZHeight, 'animatedZ').setDepth(2).setScale(animatedZScale);
diff --git a/src/pages/tracing/index.astro b/src/pages/tracing/index.astro
index ac87607..ff89f42 100644
--- a/src/pages/tracing/index.astro
+++ b/src/pages/tracing/index.astro
@@ -69,7 +69,7 @@ function create() {
         .then(response => response.json())
         .then(({ data }) => {
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-            const baseFontSize = 20;
+            const baseFontSize = 24;
             const responsiveFontSize = (window.innerWidth / 480) * baseFontSize;
             const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', fontWeight : 'bold'}).setOrigin(0.5);
             const textStyle = { font: 'bold 40px quicksand', fill: '#05b3a4', };