diff --git a/info.txt b/info.txt
new file mode 100644
index 0000000..1d7ca1a
--- /dev/null
+++ b/info.txt
@@ -0,0 +1 @@
+1. Auto brake line Drag v4 Left & Right Heading.
\ No newline at end of file
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/public/saveGameData.js b/public/saveGameData.js
index 99d83a4..1069d54 100644
--- a/public/saveGameData.js
+++ b/public/saveGameData.js
@@ -1,7 +1,7 @@
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
 const userId = urlParams.get('userid');
-const gameId = urlParams.get('id');
+let gameId;
 
 let startTime = Date.now();
 
@@ -9,9 +9,20 @@ let startTime = Date.now();
 const url = window.location.href;
 const gameName = url.split('/');
 const gameType = gameName[3].split('?id=');
-const gameVersion = gameType[0] + '-' + gameName[4];
+let gameVersion;
 
 
+if(gameType[0] == "guided-tracing"){
+    gameVersion = gameType[0].split('?')[0];
+    gameId = gameName[4];
+} else if(gameName.length == 5){
+    gameVersion = gameName[3];
+    gameId = urlParams.get('id');
+}else if(gameName.length == 6){
+    gameVersion = gameType[0] + '-' + gameName[4];
+    gameId = urlParams.get('id');
+}
+
 
 
 function submitUserData(drawingZone) {
@@ -22,7 +33,7 @@ function submitUserData(drawingZone) {
 
     let imageCode;
     let gameScore;
-    let scoreTotal=0;
+
     if(scoreTotal){
         gameScore = scoreTotal;
     }else{
@@ -45,6 +56,21 @@ function submitUserData(drawingZone) {
             link.click();
             document.body.removeChild(image);
             imageCode = image.src;
+        }else if( gameType[0] == "guided-tracing"){
+            // submitButton.setVisible(true);
+            // snapshotButton.setVisible(true);
+            // customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            const link = document.createElement('a');
+            link.href = image.src;
+            link.download = `guided-tracing-${gameId}.png`;
+            link.click();
+            document.body.removeChild(image);
+            imageCode = image.src;
         }
         
         
@@ -59,9 +85,9 @@ function submitUserData(drawingZone) {
             // 'starts': formattedDateTime,
             // 'game_start' : gameStartTime,
         };
-        console.log(userData);
+        // console.log(userData);
 
-        fetch(`http://192.168.0.166:3000/save-data`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
         method: 'POST',
         headers: {
             'Content-Type' : 'application/json'
@@ -70,7 +96,7 @@ function submitUserData(drawingZone) {
         })
         .then(response => {
             if(response.ok){
-            console.log('Data Saved', response)
+            // console.log('Data Saved', response)
             } else{
             // console.log('Something Wrong', response)
             }
diff --git a/src/pages/cross/cross_phonics_v1.astro b/src/pages/cross/cross_phonics_v1.astro
index 482b675..b8681f2 100644
--- a/src/pages/cross/cross_phonics_v1.astro
+++ b/src/pages/cross/cross_phonics_v1.astro
@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,45 +24,45 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="itemForm" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a1" class="round-checkbox-label">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label1"></p>
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
                                 
-                                <label for="a2" class="round-checkbox-label">
-                                    <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label2"></p>
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a3" class="round-checkbox-label">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label3"></p>
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                                 
-                                <label for="a4" class="round-checkbox-label">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label4"></p>
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a5" class="round-checkbox-label">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label5"></p>
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
                                 
-                                <label for="a6" class="round-checkbox-label">
-                                    <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label6"></p>
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
@@ -79,10 +79,12 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -133,14 +135,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
@@ -156,20 +156,22 @@ import Layout from "../../layouts/Layout.astro";
         // Count points based on checkbox values and "greenBorder" class
         let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
 
         // Move the userData object creation inside the saveUserData function if needed
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
         // console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -257,7 +259,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{
diff --git a/src/pages/cross/cross_phonics_v2.astro b/src/pages/cross/cross_phonics_v2.astro
index 4d1a120..584741e 100644
--- a/src/pages/cross/cross_phonics_v2.astro
+++ b/src/pages/cross/cross_phonics_v2.astro
@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,63 +24,63 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a1" class="round-checkbox-label">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label1"></p>
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
     
-                                <label for="a2" class="round-checkbox-label">
-                                    <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label2"></p>
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
     
-                                <label for="a3" class="round-checkbox-label">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label3"></p>
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a4" class="round-checkbox-label">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label4"></p>
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
     
-                                <label for="a5" class="round-checkbox-label">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label5"></p>
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
     
-                                <label for="a6" class="round-checkbox-label">
-                                    <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label6"></p>
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a7" class="round-checkbox-label">
-                                    <img id="image7" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label7"></p>
+                                <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label7" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
     
-                                <label for="a8" class="round-checkbox-label">
-                                    <img id="image8" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label8"></p>
+                                <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label8" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
     
-                                <label for="a9" class="round-checkbox-label">
-                                    <img id="image9" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label9"></p>
+                                <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label9" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
                             </div>
@@ -97,9 +97,11 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     
-    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -147,26 +149,23 @@ import Layout from "../../layouts/Layout.astro";
 
         if (checkbox.checked) {
             if (gameData[id.replace('image', 'a')] === true) {
-                element.classList.add('greenBorder');
-            } else {
                 element.classList.add('redBorder');
+            } else {
+                element.classList.add('greenBorder');
             }
         } else {
-            element.classList.remove('greenBorder', 'redBorder');
+            element.classList.remove('redBorder', 'greenBorder');
         }
     }
 
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -192,19 +191,20 @@ import Layout from "../../layouts/Layout.astro";
         // Count points based on checkbox values and "greenBorder" class
         let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            // 'game_start' : gameStartTime,
-            'score' : totalPoints,
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
+        // console.log(userData);
 
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -292,7 +292,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{
diff --git a/src/pages/cross/v1.astro b/src/pages/cross/v1.astro
index bd4eadb..b315a1b 100644
--- a/src/pages/cross/v1.astro
+++ b/src/pages/cross/v1.astro
@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,45 +24,45 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="itemForm" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-6 place-items-center">
                                 <label for="a1" class="round-checkbox-label">
                                     <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label1"></p>
+                                    <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
                                 
                                 <label for="a2" class="round-checkbox-label">
                                     <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label2"></p>
+                                    <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
                                 <label for="a3" class="round-checkbox-label">
                                     <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label3"></p>
+                                    <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                                 
                                 <label for="a4" class="round-checkbox-label">
                                     <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label4"></p>
+                                    <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
                                 <label for="a5" class="round-checkbox-label">
                                     <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label5"></p>
+                                    <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
                                 
                                 <label for="a6" class="round-checkbox-label">
                                     <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label6"></p>
+                                    <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
@@ -79,10 +79,12 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -133,14 +135,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
@@ -163,13 +163,14 @@ import Layout from "../../layouts/Layout.astro";
 
         // Move the userData object creation inside the saveUserData function if needed
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
         // console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -188,7 +189,6 @@ import Layout from "../../layouts/Layout.astro";
             });
     }
 
-
     document.addEventListener('DOMContentLoaded', function () {
         const contactForm = document.getElementById('contactForm');
         contactForm.addEventListener('submit', async function (event) {
@@ -258,7 +258,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{
diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro
index 1d1fde9..4fc8a39 100644
--- a/src/pages/cross/v2.astro
+++ b/src/pages/cross/v2.astro
@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,70 +24,70 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a1" class="round-checkbox-label">
-                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label1"></p>
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
     
-                                <label for="a2" class="round-checkbox-label">
-                                    <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label2"></p>
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
     
-                                <label for="a3" class="round-checkbox-label">
-                                    <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label3"></p>
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a4" class="round-checkbox-label">
-                                    <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label4"></p>
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
     
-                                <label for="a5" class="round-checkbox-label">
-                                    <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label5"></p>
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
     
-                                <label for="a6" class="round-checkbox-label">
-                                    <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label6"></p>
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a7" class="round-checkbox-label">
-                                    <img id="image7" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label7"></p>
+                                <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label7" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
     
-                                <label for="a8" class="round-checkbox-label">
-                                    <img id="image8" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label8"></p>
+                                <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label8" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
     
-                                <label for="a9" class="round-checkbox-label">
-                                    <img id="image9" src="" alt="" draggable="false" class="select-none" />
-                                    <p id="label9"></p>
+                                <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
+                                    <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                    <p id="label9" class="h-[50px] overflow-y-auto"></p>
                                 </label>
                                 <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
                             <p id="savedMessage"></p>
-                            <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
+                            <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
                         </div>
                     </form>
                 </div>
@@ -97,9 +97,11 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -147,26 +149,24 @@ import Layout from "../../layouts/Layout.astro";
 
         if (checkbox.checked) {
             if (gameData[id.replace('image', 'a')] === true) {
-                element.classList.add('greenBorder');
-            } else {
                 element.classList.add('redBorder');
+            } else {
+                element.classList.add('greenBorder');
             }
         } else {
-            element.classList.remove('greenBorder', 'redBorder');
+            element.classList.remove('redBorder', 'greenBorder');
         }
     }
 
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -192,19 +192,20 @@ import Layout from "../../layouts/Layout.astro";
         // Count points based on checkbox values and "greenBorder" class
         let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            // 'game_start' : gameStartTime,
-            'score' : totalPoints,
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
+        // console.log(userData);
 
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -292,7 +293,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{
diff --git a/src/pages/cross/v3.astro b/src/pages/cross/v3.astro
index ce283ea..cee3a6f 100644
--- a/src/pages/cross/v3.astro
+++ b/src/pages/cross/v3.astro
@@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -22,11 +22,11 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
                 <div class="container mx-auto px-4">
                     <div class="flex flex-col">
-                        <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
+                        <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                         <!-- <p id="LearningSubArea"></p> -->
                     </div>
                     <div class="flex flex-col justify-center place-items-center ">
-                        <img class="lg:w-[50%]"  draggable="false" id="descImage" src="" alt="" />
+                        <img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
                         <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
                     </div>
                     <form id="contactForm" class="">
@@ -67,10 +67,12 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -110,25 +112,22 @@ import Layout from "../../layouts/Layout.astro";
 
         if (checkbox.checked) {
             if (gameData[id.replace('image', 'a')] === true) {
-                element.classList.add('greenBorder');
-            } else {
                 element.classList.add('redBorder');
+            } else {
+                element.classList.add('greenBorder');
             }
         } else {
-            element.classList.remove('greenBorder', 'redBorder');
+            element.classList.remove('redBorder', 'greenBorder');
         }
     }
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3'];
         const checkboxValues = checkboxes.map(id => {
@@ -144,19 +143,20 @@ import Layout from "../../layouts/Layout.astro";
         // Count points based on checkbox values and "greenBorder" class
         let totalPoints = 0;
         checkboxValues.forEach(checkbox => {
-            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+            if (checkbox.checked && checkbox.element.classList.contains('redBorder')) {
                 totalPoints += 1;
             }
         });
 
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
         // console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -245,7 +245,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea{
diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro
index 27e0e54..be61ef9 100644
--- a/src/pages/drag/dragdrop_phonics.astro
+++ b/src/pages/drag/dragdrop_phonics.astro
@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -70,12 +71,28 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
   let retryButton;
   let blockMatches;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -85,11 +102,6 @@ import Layout from '../../layouts/Layout.astro';
       leftTargetZoneW = window.innerWidth / 6;
       rightTargetZoneW = window.innerWidth * 0.9 - 40;
     } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -147,7 +159,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 +368,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 +450,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 +529,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 +550,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 +569,7 @@ import Layout from '../../layouts/Layout.astro';
 
                         droppedOnTargetZone = true;
                         targetZoneBorders[targetIndex].setVisible(true);
-                        targetZoneBorders[targetIndex].setAlpha(0);
+                        targetZoneBorders[targetIndex].setAlpha(0.5);
                         return;
                     }
             });
@@ -571,7 +605,7 @@ import Layout from '../../layouts/Layout.astro';
           if(match !== undefined){
             scoreTotal++;
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)
diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index 339f28b..4536e0f 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -70,11 +71,25 @@ import Layout from '../../layouts/Layout.astro';
   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;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+  if(isMobile){
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -82,11 +97,6 @@ import Layout from '../../layouts/Layout.astro';
       retryButtonWidth = window.innerWidth / 2 - 50;
       retryButtonHeight = window.innerHeight - 70;
   } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -313,11 +323,12 @@ 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 responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
+            const baseFontSize = 24;
+            let textSizeScale; if(isMobile){textSizeScale = 540}else{textSizeScale = 940};
+            const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
             let wrapWidth;
             if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
-            const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+            const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
              blockMatches = [
               {
                 blockName: "blocks1",
@@ -541,10 +552,10 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`});
             resultView.setVisible(false);
           }
diff --git a/src/pages/drag/match_phonics.astro b/src/pages/drag/match_phonics.astro
index 1cef4bc..ccb429c 100644
--- a/src/pages/drag/match_phonics.astro
+++ b/src/pages/drag/match_phonics.astro
@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -68,12 +69,28 @@ import Layout from '../../layouts/Layout.astro';
   let resetIconWidth;
   let tickIconWidth;
   let cancelIconWidth;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -81,11 +98,6 @@ import Layout from '../../layouts/Layout.astro';
       retryButtonWidth = window.innerWidth / 2 - 50;
       retryButtonHeight = window.innerHeight - 70;
   } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -314,12 +326,20 @@ import Layout from '../../layouts/Layout.astro';
                   targetName: `target${data.right_match4}`,
                 },
               ];
-              const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-              const baseFontSize = 20;
-              const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
               let wrapWidth;
-              if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
-              const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+              let textSizeScale; 
+              if(isMobile){
+                wrapWidth = 10;
+                textSizeScale = 540
+              }else{
+                wrapWidth = 200;
+                textSizeScale = 940
+              };
+
+              const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+              const baseFontSize = 24;
+              const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
+              const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
             // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
             // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
             // Left Image Name
@@ -522,10 +542,10 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
           }
           if(counter === 4){
diff --git a/src/pages/drag/testv3.astro b/src/pages/drag/testv3.astro
index e972652..6401c5e 100644
--- a/src/pages/drag/testv3.astro
+++ b/src/pages/drag/testv3.astro
@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {
diff --git a/src/pages/drag/tmp.astro b/src/pages/drag/tmp.astro
index 6e5beb8..0bdbbce 100644
--- a/src/pages/drag/tmp.astro
+++ b/src/pages/drag/tmp.astro
@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {
@@ -450,7 +451,7 @@ import Layout from '../../layouts/Layout.astro';
           targetZone.block = null;
         }),
         blocks.forEach((block, index) => {
-          console.log(index+1)
+          // console.log(index+1)
           const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
           // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
           newBlock.on("drag", (pointer, dragX, dragY) => {
@@ -521,7 +522,7 @@ import Layout from '../../layouts/Layout.astro';
           if(match !== undefined){
             scoreTotal++;
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)
diff --git a/src/pages/drag/tmp2.astro b/src/pages/drag/tmp2.astro
index 83afa36..891a094 100644
--- a/src/pages/drag/tmp2.astro
+++ b/src/pages/drag/tmp2.astro
@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {
@@ -544,11 +545,11 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)
diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro
index 8089a48..3f6d196 100644
--- a/src/pages/drag/v2.astro
+++ b/src/pages/drag/v2.astro
@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -68,12 +69,28 @@ import Layout from '../../layouts/Layout.astro';
   let resetIconWidth;
   let tickIconWidth;
   let cancelIconWidth;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -81,11 +98,6 @@ import Layout from '../../layouts/Layout.astro';
       retryButtonWidth = window.innerWidth / 2 - 50;
       retryButtonHeight = window.innerHeight - 70;
   } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -314,12 +326,20 @@ import Layout from '../../layouts/Layout.astro';
                   targetName: `target${data.right_match4}`,
                 },
               ];
-              const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-                const baseFontSize = 20;
-                const responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
+              
                 let wrapWidth;
-                if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
-                const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+                let textSizeScale;
+                if(isMobile){
+                  wrapWidth = 10;
+                  textSizeScale = 540
+                } else{
+                  wrapWidth = 200;
+                  textSizeScale = 940
+                }
+                const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+                const baseFontSize = 24;
+                const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
+                const descrptText = this.add.text(screenCenterX, 90, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
             // this.add.text(displayW / 14 - 15, 50, data.LearningArea, {font: `20px`}).setTint(0x7c4c23);
             // this.add.text(displayW / 14 - 15, 70, data.LearningSubArea_copy, {font: `19px`}).setTint(0x7c4c23);
             // Left Image Name
@@ -522,10 +542,10 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
           }
           if(counter === 4){
diff --git a/src/pages/drag/v20.astro b/src/pages/drag/v20.astro
index 1ea9beb..4984cc0 100644
--- a/src/pages/drag/v20.astro
+++ b/src/pages/drag/v20.astro
@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {
@@ -491,10 +492,10 @@ import Layout from '../../layouts/Layout.astro';
             // console.log(counter)
           }
           const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-          console.log(match)
+          // console.log(match)
           if(match !== undefined){
             scoreTotal++;
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`,{font: `24px`, fill: `#7c4c23`}).setVisible(false);
           }
           if(counter === 4){
diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro
index 1f79091..4d21789 100644
--- a/src/pages/drag/v3.astro
+++ b/src/pages/drag/v3.astro
@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -70,26 +71,39 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
   let retryButton;
   let blockMatches;
+  let retryButtonWidth;
+  let leftTargetZoneW;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
       buttonHeight = 0;
       retryButtonWidth = window.innerWidth / 2 - 140;
       retryButtonHeight = window.innerHeight - 50;
-      leftTargetZoneW = window.innerWidth * 0.9 - 40;
+      leftTargetZoneW = window.innerWidth * 0.9 - 30;
       rightTargetZoneW = window.innerWidth / 6;
     } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -131,19 +145,19 @@ import Layout from '../../layouts/Layout.astro';
     },
     {
       x: rightTargetZoneW,
-      y: 340,
+      y: 330,
       name: "target2",
       block: null,
     },
     {
       x: rightTargetZoneW,
-      y: 510,
+      y: 480,
       name: "target3",
       block: null,
     },
     {
       x: rightTargetZoneW,
-      y: 680,
+      y: 650,
       name: "target4",
       block: null,
     },
@@ -155,19 +169,19 @@ import Layout from '../../layouts/Layout.astro';
     },
     {
       x: leftTargetZoneW,
-      y: 340,
+      y: 330,
       name: "target6",
       block: null,
     },
     {
       x: leftTargetZoneW,
-      y: 510,
+      y: 480,
       name: "target7",
       block: null,
     },
     {
       x: leftTargetZoneW,
-      y: 680,
+      y: 650,
       name: "target8",
       block: null,
     },
@@ -324,7 +338,7 @@ import Layout from '../../layouts/Layout.astro';
         fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
-            console.log(data)
+            // console.log(data)
             blockMatches = [
               {
                 blockName: "blocks1",
@@ -360,12 +374,21 @@ 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 responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
+
+
             let wrapWidth;
-            if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
-            const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+            let textSizeScale;
+            if(isMobile){
+              wrapWidth = 10;
+              textSizeScale = 540;
+            } else{
+              wrapWidth = 200;
+              textSizeScale = 940
+            }
+            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+            const baseFontSize = 24;
+            const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
+            const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
           })
           .catch(error => {
             console.error('Error fetching initial data:', error);
@@ -555,7 +578,7 @@ import Layout from '../../layouts/Layout.astro';
         }
         //resultView scoreTotal
         const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-        console.log(match)
+        // console.log(match)
         if(match){
           scoreTotal++;
           resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
diff --git a/src/pages/drag/v30.astro b/src/pages/drag/v30.astro
index a5b72bc..7896f4f 100644
--- a/src/pages/drag/v30.astro
+++ b/src/pages/drag/v30.astro
@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {
@@ -302,7 +303,7 @@ import Layout from '../../layouts/Layout.astro';
         fetch(`https://game-du.teachertrainingkolkata.in/items/game_drag_v3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
           .then(response => response.json())
           .then(({ data }) => {
-            console.log(data)
+            // console.log(data)
             blockMatches = [
               {
                 blockName: "blocks1",
@@ -523,7 +524,7 @@ import Layout from '../../layouts/Layout.astro';
         }
         //resultView scoreTotal
         const match = blockMatches.find((m) => m.blockName === blockName && m.targetName === targetName);
-        console.log(match)
+        // console.log(match)
         if(match){
           scoreTotal++;
           resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro
index 33ddb27..bba10ed 100644
--- a/src/pages/drag/v4.astro
+++ b/src/pages/drag/v4.astro
@@ -52,6 +52,7 @@ import Layout from '../../layouts/Layout.astro';
 <script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+  const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
   const drawingZone = {
       x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
       y: window.innerHeight / 4,
@@ -70,12 +71,31 @@ import Layout from '../../layouts/Layout.astro';
   let cancelIconWidth;
   let retryButton;
   let blockMatches;
+  let leftTargetZoneW;
+  let rightTargetZoneW;
+  let retryButtonWidth;
+
+  if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    
   if(isMobile){
-      topLogoWidth = 5;
-      muteIconWidth = 2;
-      resetIconWidth = 1.6;
-      tickIconWidth = 1.34;
-      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -85,11 +105,6 @@ import Layout from '../../layouts/Layout.astro';
       leftTargetZoneW = window.innerWidth / 6;
       rightTargetZoneW = window.innerWidth * 0.9 - 40;
     } else {
-      topLogoWidth = 6;
-      muteIconWidth = 1.3;
-      resetIconWidth = 1.26;
-      tickIconWidth = 1.222;
-      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -146,11 +161,7 @@ import Layout from '../../layouts/Layout.astro';
       .then(response => response.json())
       .then(({data}) => {
         const {image1, image2, image3, image4, image5, image6, image7, image8} = data;
-        if(isMobile){
-          imageCustomWidth = "?width=100";
-        } else{
-          imageCustomWidth = "?width=100";
-        }
+        if(isMobile){imageCustomWidth = "?width=100";} else{imageCustomWidth = "?width=100";};
         const assetsURL = "https://game-du.teachertrainingkolkata.in/assets/"
         assetsList.element1 = assetsURL + image1   + imageCustomWidth;
         assetsList.element2 = assetsURL + image2   + imageCustomWidth;
@@ -332,28 +343,38 @@ import Layout from '../../layouts/Layout.astro';
             ];
             // console.log(data)
             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 - 20, data.label1, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 - 80, window.innerHeight - 20, data.label2, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 30, window.innerHeight - 20, data.label3, {font:`15px`, fill: `#7c4c23`})
+                this.add.text(window.innerWidth / 2 + 125, window.innerHeight - 20, 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 - 80, 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`})
             }
             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(window.innerWidth / 18, window.innerHeight / 4, data.left_label+'!', {font:`10px`, fill: `#60C6CB`});
+                this.add.text(window.innerWidth / 1.8, window.innerHeight / 4, data.right_label, {font:`10px`, fill: `#60C6CB`});
+            } else if(isTab){
+                this.add.text(window.innerWidth / 17, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`});
+                this.add.text(window.innerWidth / 1.8, window.innerHeight / 6, data.right_label, {font: `20px`, 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`});
+                this.add.text(window.innerWidth / 9, window.innerHeight / 6, data.left_label+'!', {font: `20px`, fill: `#60C6CB`});
+                this.add.text(window.innerWidth / 1.39, 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 responsiveFontSize = (window.innerWidth / 940) * baseFontSize;
               let wrapWidth;
-              if(isMobile){wrapWidth = 10;} else{wrapWidth = 200;}
-              const descrptText = this.add.text(screenCenterX, 100, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+              let textSizeScale;
+              if(isMobile){
+                wrapWidth = 10;
+                textSizeScale = 540
+              } else{
+                wrapWidth = 200;
+                textSizeScale = 940
+              }
+              const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+              const baseFontSize = 24;
+              const responsiveFontSize = (window.innerWidth / textSizeScale) * baseFontSize;
+              const descrptText = this.add.text(screenCenterX, 85, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
           })
           .catch(error => {
             console.error('Error fetching initial data:', error);
@@ -482,35 +503,52 @@ 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, "border").setAlpha(0.05).setScale(borderScale);
           targetZoneBorders.push(targetBorder);
           targetZone.block = null;
         }),
         blocks.forEach((block, index) => {
-          const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(1);
+          let blocksScale;
+          
+          if(isMobile){
+            blocksScale = 0.75;
+          } else{
+            blocksScale = 1;
+          }
+          const newBlock = this.add.sprite(block.x + 10, block.y, block.textureKey, 0).setOrigin(0, 0).setInteractive({ draggable: true }).setScale(blocksScale);
           // this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setAlpha(0.3);
           newBlock.on("drag", (pointer, dragX, dragY) => {
-            newBlock.setScale(1.3);
+            newBlock.setScale(blocksScale+.3);
             newBlock.x = dragX;
             newBlock.y = dragY;
         });
 
         newBlock.on("dragend", () => {
-            newBlock.setScale(1.0).setDepth(-2);
+            newBlock.setScale(blocksScale).setDepth(-2);
             let droppedOnTargetZone = false;
 
             targetZones.forEach((targetZone, targetIndex) => {
+              let phaserGeomX, phaserGeomY, blockSetPosition;
+              if(isMobile){
+                phaserGeomX = 50;
+                phaserGeomY = 25;
+                blockSetPosition = 40;
+              }else{
+                phaserGeomX = 200;
+                phaserGeomY = 100;
+                blockSetPosition = 50;
+              }
                 if (
                     Phaser.Geom.Intersects.RectangleToRectangle(
                         newBlock.getBounds(),
-                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, 50, 25)
+                        new Phaser.Geom.Rectangle(targetZone.x, targetZone.y, phaserGeomX, phaserGeomY)
                     )
                 ) {
-                    // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
+                    // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50);
                     const col = counter % 2;
                     const row = Math.floor(counter / 2);
 
-                        newBlock.setPosition(targetZone.x - 50, targetZone.y -50);
+                        newBlock.setPosition(targetZone.x - blockSetPosition, targetZone.y - blockSetPosition);
                         newBlock.disableInteractive();
                         targetZone.block = newBlock;
                         droppedBlocks.push(newBlock);
@@ -557,7 +595,7 @@ import Layout from '../../layouts/Layout.astro';
           if(match !== undefined){
             scoreTotal++;
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)
diff --git a/src/pages/drag/v40.astro b/src/pages/drag/v40.astro
index d48b3c2..4d8f68e 100644
--- a/src/pages/drag/v40.astro
+++ b/src/pages/drag/v40.astro
@@ -49,6 +49,7 @@ import Layout from '../../layouts/Layout.astro';
 		<script is:inline src="/assets/js/phaser_3.60.0.js"></script>
 	</main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
   const drawingZone = {
@@ -539,7 +540,7 @@ import Layout from '../../layouts/Layout.astro';
           if(match !== undefined){
             scoreTotal++;
             resultView = this.add.text(window.innerWidth / 2 - 100, window.innerHeight / 2 - 100, `Your Score: ${scoreTotal}`, {font: `24px`, fill: `#7c4c23`}).setVisible(false);
-            console.log("Score Total", scoreTotal)
+            // console.log("Score Total", scoreTotal)
           }
           if(counter === 8){
               // console.log(counter)
diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro
index 3180342..f039eb2 100644
--- a/src/pages/drawing/drawing_phonics.astro
+++ b/src/pages/drawing/drawing_phonics.astro
@@ -13,12 +13,13 @@ import Layout from '../../layouts/Layout.astro';
 <script is:inline>
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
+
     const drawingZone = {
         x: 0,
         y: 0,
         width: window.innerWidth,
         height: window.innerHeight,
-    }; 
+    };
     let topLogoWidth;
     let muteIconWidth;
     let resetIconWidth;
@@ -29,12 +30,28 @@ import Layout from '../../layouts/Layout.astro';
     let submitButton;
     let formattedDateTime;
     let shortUniqueID;
+    let scoreTotal = 0;
+
+    if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
     if(isMobile){
-        topLogoWidth = 5;
-        muteIconWidth = 2;
-        resetIconWidth = 1.6;
-        tickIconWidth = 1.34;
-        cancelIconWidth = 1.16;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -44,11 +61,6 @@ import Layout from '../../layouts/Layout.astro';
         learningWidth = 200;
         learningHeight = 400
     } else {
-        topLogoWidth = 6;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;
@@ -129,6 +141,7 @@ import Layout from '../../layouts/Layout.astro';
         this.load.image("resetIcon", '/assets/svg/reset.svg');
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
+        this.load.image('colorButton', '/assets/color_button.png');
     }
 
     function create() {
@@ -139,7 +152,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;}
@@ -150,33 +163,6 @@ import Layout from '../../layouts/Layout.astro';
             .catch(error => {
                 console.error('Error fetching initial data:', error);
             });
-            // const URL = window.location.href;
-            // const gameName = URL.split('/');
-            // let userData = {
-            //     'user': 'drawing@beanstalkedu.com',
-            //     'game_name': gameName[3],
-            //     'starts': formattedDateTime,
-            //     // 'game_start' : gameStartTime,
-            // };
-            // function submitUserData() {
-            // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            //     method: 'POST',
-            //     headers: {
-            //     'Content-Type' : 'application/json'
-            //     },
-            //     body: JSON.stringify(userData)
-            // })
-            // .then(response => {
-            //     if(response.ok){
-            //     // console.log('Data Saved', response)
-            //     } else{
-            //     // console.log('Something Wrong', response)
-            //     }
-            // })
-            // .catch(error => {
-            //     console.error('An error occured', error)
-            // }); 
-            // };
             // window.load
 
             const borderBottom = this.add.graphics();
@@ -194,6 +180,7 @@ import Layout from '../../layouts/Layout.astro';
             const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
 
+
             retryButton.setInteractive().on('pointerdown', () => {
                 window.location.reload();
             });
@@ -210,12 +197,12 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-            // console.log('Clicked');
-            submitButton.setVisible(false);
-            submitNotic.setVisible(true);
-            // windowLoad();
-            submitUserData(this);
-            })
+                submitNotic.setVisible(true);
+                submitNotic.setVisible(false);
+                // windowLoad();
+                submitUserData(this);
+            });
+
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
                 // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@@ -228,9 +215,9 @@ import Layout from '../../layouts/Layout.astro';
             isMobile ? outlineImagePosition = 0 : outlineImagePosition = 45;
             const outlineImage = this.add.image(customWidth / 2 + outlineImagePosition, customHeight / 2, 'outline');
             if(isMobile){
-                outlineImage.setDepth(1).setScale(0.33);
+                outlineImage.setDepth(1).setScale(0.2);
             }else if(isTab){
-                outlineImage.setDepth(1).setScale(0.38);
+                outlineImage.setDepth(1).setScale(0.3);
             } else{
                 outlineImage.setDepth(1).setScale(0.5);   
             }  
@@ -246,6 +233,23 @@ import Layout from '../../layouts/Layout.astro';
                 colorContainer.style.top = '10%';
                 colorContainer.style.flexDirection = 'column'; 
             }
+            if(isMobile){
+                colorContainer.style.display = 'none';
+            }
+
+            let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
+            if(!isMobile){
+                colorViewButton.setVisible(false);
+            }
+            colorViewButton.setInteractive().on('pointerdown', () => {
+                if(colorContainer.style.display === 'block') {
+                    colorContainer.style.display = 'none';
+                }else{
+                    colorContainer.style.display = 'block';
+                }
+            });
+
+
             // Create the color picker
             const colorPicker = document.createElement('input');
             colorPicker.type = 'color';
@@ -274,9 +278,9 @@ import Layout from '../../layouts/Layout.astro';
             });
             // Append the color picker to the color container data
             colorContainer.appendChild(colorPicker);
-            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
             // const colors = data.colors;
             // var colors = colorList;
+            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
             // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 60;
@@ -284,6 +288,7 @@ import Layout from '../../layouts/Layout.astro';
             // Create a container div for the color buttons
             const colorButtonsContainer = document.createElement('div');
             colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
+            colorButtonsContainer.style.flexDirection = 'column'; //** */
             if(!isMobile){
                 colorButtonsContainer.style.flexDirection = 'column'; 
             }
@@ -308,19 +313,137 @@ import Layout from '../../layouts/Layout.astro';
                 // ${color}
                 // Create the SVG element with dynamic fill color
                 if (!isMobile) {
-                    pencilSize = '150px';
+                    // pencilSize = '150px';
                     button.style.width = `${buttonSize}px`; 
                     button.style.height = `${buttonSize}px`;
                 } else {
-                    pencilSize = '40px';
+                    // pencilSize = '150px';
+                    // button.style.width = `${buttonSize}px`; 
+                    // button.style.height = `${buttonSize}px`;
+                    // pencilSize = '40px';
                     button.style.width = `45px`;
                     button.style.height = `45px`;
                 }
-                if(isMobile){
-                    button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
-                } else{
-                    button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
-                }
+                button.innerHTML = `
+                                <svg width="125" height="24" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M121.521 12.0599C121.821 10.2699 122.901 10.5299 122.901 10.5299C122.901 10.5299 123.821 11.3399 124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.611 15.3799 121.231 13.7699 121.521 12.0599Z" fill="${color}"/>
+                                    <g style="mix-blend-mode:multiply">
+                                    <path d="M124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.811 15.3199 121.861 14.4199 121.571 13.2199C123.241 13.6699 124.161 12.3899 124.161 12.3899Z" fill="url(#paint1_linear_3573_1528)"/>
+                                    </g>
+                                    <g style="mix-blend-mode:screen" opacity="0.6">
+                                    <path d="M122.791 10.5199C122.791 10.5199 121.651 10.4399 121.491 12.3699C121.491 12.3699 121.591 10.9699 122.791 10.5199Z" fill="#F8F8F7"/>
+                                    </g>
+                                    <path d="M-33.199 19.2499C-34.279 17.1299 -35.079 14.9299 -34.989 12.5199C-34.939 11.0099 -34.659 8.80989 -33.869 7.47989C-33.869 7.47989 -30.569 1.92989 -26.809 1.39989L95.731 0.839893C95.731 0.839893 88.811 5.8299 90.831 14.2499C92.581 21.5899 95.611 23.1699 95.611 23.1699C95.611 23.1699 -27.549 23.9999 -27.699 23.9999C-30.259 24.0199 -32.189 21.2099 -33.199 19.2499Z" fill="${color}"/>
+                                    <path d="M90.8307 14.2499C88.8107 5.82992 95.7307 0.839922 95.7307 0.839922C95.7307 0.839922 96.5407 0.649921 97.0507 1.30992C97.5507 1.96992 96.9307 22.8199 96.9307 22.8199C96.9307 22.8199 96.1707 23.1699 95.6207 23.1699C95.6207 23.1699 92.5907 21.5899 90.8407 14.2499H90.8307Z" fill="#ffffff"/>
+                                    <path d="M92.4112 13.1799C91.3612 6.26989 97.0512 1.30989 97.0512 1.29988L122.901 10.5299C122.901 10.5299 121.821 10.2699 121.521 12.0599C121.231 13.7699 122.611 15.3799 123.471 15.1399C123.351 15.2599 123.221 15.3799 123.071 15.4699C122.231 15.9699 102.251 21.3799 96.9212 22.8199C96.0312 21.9799 93.2812 18.9599 92.4112 13.1799Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:screen" opacity="0.7" d="M94.4812 1.94991L-30.1688 3.0899C-29.1588 2.2499 -28.0088 1.5699 -26.8188 1.3999L95.7212 0.839905C95.7212 0.839905 95.2012 1.21991 94.4912 1.93991C94.4912 1.93991 94.4812 1.93991 94.4712 1.94991H94.4812Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:multiply" d="M92.5108 19.1599C94.0408 22.3399 95.6108 23.1699 95.6108 23.1699C95.6108 23.1699 -27.5492 23.9999 -27.6992 23.9999C-30.2592 24.0199 -32.1892 21.2099 -33.1992 19.2499L92.5108 19.1599Z" fill="url(#paint6_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" opacity="0.8" d="M92.5209 19.1599C93.9909 19.8999 94.2509 19.0799 94.2509 19.0799C95.2909 21.1199 96.4109 22.3299 96.9209 22.8199C96.9209 22.8199 96.1609 23.1699 95.6109 23.1699C95.6109 23.1699 94.0509 22.3399 92.5109 19.1599H92.5209Z" fill="url(#paint7_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" d="M94.251 19.0799L121.591 13.2999C121.901 14.4599 122.831 15.3199 123.481 15.1399C123.361 15.2599 123.231 15.3799 123.081 15.4699C122.241 15.9699 102.261 21.3799 96.931 22.8199C96.421 22.3299 95.291 21.1199 94.261 19.0799H94.251Z" fill="url(#paint8_linear_3573_1528)"/>
+                                    <g style="mix-blend-mode:screen" opacity="0.1">
+                                    <path d="M95.9608 2.42987C95.9608 2.42987 95.0908 1.32987 94.5008 1.92987C95.2108 1.20987 95.7308 0.82987 95.7308 0.82987C95.7308 0.82987 96.5408 0.639869 97.0508 1.29987C97.0508 1.29987 96.5908 1.70987 95.9708 2.42987H95.9608Z" fill="${color}"/>
+                                    </g>
+                                    <path opacity="0.4" d="M95.9609 2.42987C96.5909 1.70987 97.0409 1.29987 97.0409 1.29987L122.901 10.5299C122.901 10.5299 122.271 10.3899 121.841 11.1199L121.651 11.0799L95.9609 2.43987V2.42987Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:overlay" opacity="0.8" d="M93.0608 7.24991L91.4508 6.39991L-34.4192 8.76991C-34.2692 8.29991 -34.0892 7.84991 -33.8692 7.47991C-33.8692 7.47991 -33.4192 6.72991 -32.6692 5.74991L92.3308 4.69991L93.8808 5.44991L121.521 12.0599C121.461 12.4199 121.481 12.7699 121.551 13.0999L93.0608 7.24991Z" fill="url(#paint10_linear_3573_1528)"/>
+                                    <path d="M77.6709 0.759924L81.1909 0.739923C78.8909 3.42992 72.7809 12.3099 80.8009 23.3399C79.8809 23.3399 78.9309 23.3499 77.9509 23.3599C69.8509 12.6599 75.1409 3.90992 77.6709 0.759924Z" fill="url(#paint11_linear_3573_1528)"/>
+                                    <path d="M-1.92906 1.1199L77.6809 0.759903C75.1509 3.9199 69.8609 12.6699 77.9609 23.3599C56.9909 23.4999 21.8709 23.7399 -2.36906 23.8999C-10.7591 12.5699 -3.86906 3.3299 -1.92906 1.1199Z" fill="${color}"/>
+                                    <path opacity="0.6" d="M6.38071 11.5899L58.1407 10.6999C58.1407 10.6999 65.4307 9.98993 66.7607 14.0799C66.7607 14.0799 67.9207 18.5799 62.8807 19.4999L5.36071 19.6799C5.36071 19.6799 2.74072 19.7899 1.57072 18.0199C0.400719 16.2499 1.20071 12.3099 6.38071 11.5999V11.5899Z" fill="#ffffff"/>
+                                    <path d="M7.50074 11.4999L56.8107 10.6499C56.8107 10.6499 63.7607 9.97992 65.0207 13.8699C65.0207 13.8699 66.1207 18.1599 61.3207 19.0299L6.53074 19.1999C6.53074 19.1999 4.04074 19.2999 2.92074 17.6199C1.80074 15.9299 2.57074 12.1799 7.50074 11.4999Z" fill="#ffffff70"/>
+                                    <g opacity="0.6">
+                                    <g style="mix-blend-mode:screen" opacity="0.8">
+                                    <path d="M94.1011 2.33987C94.1011 2.33987 89.2511 6.86987 90.7611 13.9899C90.7611 13.9899 89.4911 7.60987 94.1011 2.33987Z" fill="#F8F8F7"/>
+                                    </g>
+                                    <g style="mix-blend-mode:screen" opacity="0.8">
+                                    <path d="M94.7212 4.03987C94.7212 4.03987 91.3312 8.57987 92.4612 13.5499C92.4612 13.5499 91.2712 10.2599 94.7212 4.03987Z" fill="#F8F8F7"/>
+                                    </g>
+                                    </g>
+                                    <path style="mix-blend-mode:screen" opacity="0.8" d="M79.6012 2.07988C79.6012 2.07988 77.3112 4.52988 76.5512 7.60988C76.5512 7.60988 76.4412 9.19988 74.3912 9.06988C72.3412 8.94988 -5.1188 10.3099 -5.1188 10.3099C-5.1188 10.3099 -7.9988 10.9699 -8.3088 8.83988C-8.6088 6.70988 -6.1188 2.34988 -4.29881 2.04988C-2.47881 1.75988 78.1912 1.50988 78.1912 1.50988C78.1912 1.50988 80.2512 1.28988 79.6012 2.06988V2.07988Z" fill="url(#paint14_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" d="M74.5509 17.1199C75.2209 19.0999 76.3109 21.1899 77.9609 23.3699C56.9909 23.5099 21.8709 23.7499 -2.36906 23.9099C-4.14906 21.5099 -5.23907 19.1999 -5.82907 17.0299L74.5609 17.1199H74.5509Z" fill="url(#paint15_linear_3573_1528)"/>
+                                    <defs>
+                                    <linearGradient id="paint0_linear_3573_1528" x1="123.151" y1="13.9754" x2="122.087" y2="9.86632" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CA3418"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint1_linear_3573_1528" x1="124.053" y1="23.1306" x2="122.178" y2="6.751" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint2_linear_3573_1528" x1="30.7266" y1="22.0303" x2="30.1754" y2="0.66354" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.11" stop-color="#5E1104"/>
+                                    <stop offset="0.55" stop-color="#DE3313"/>
+                                    <stop offset="1" stop-color="#EA562A"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint3_linear_3573_1528" x1="98.7993" y1="14.0938" x2="90.164" y2="7.46254" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CC361A"/>
+                                    <stop offset="0.59" stop-color="#DA4727"/>
+                                    <stop offset="0.65" stop-color="#E35330"/>
+                                    <stop offset="0.74" stop-color="#E95A35"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint4_linear_3573_1528" x1="106.626" y1="23.7951" x2="109.063" y2="2.27873" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CA3418"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint5_linear_3573_1528" x1="32.7047" y1="1.02997" x2="33.1363" y2="8.59623" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.1" stop-color="white"/>
+                                    <stop offset="0.72" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint6_linear_3573_1528" x1="31.0748" y1="27.8663" x2="31.2566" y2="15.6366" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint7_linear_3573_1528" x1="95.4797" y1="23.146" x2="93.4037" y2="17.3432" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint8_linear_3573_1528" x1="109.97" y1="21.5463" x2="107.895" y2="13.3528" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint9_linear_3573_1528" x1="109.12" y1="7.20142" x2="109.703" y2="5.67219" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.28" stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint10_linear_3573_1528" x1="44.6929" y1="-6.07285" x2="42.3312" y2="28.5009" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint11_linear_3573_1528" x1="76.7851" y1="25.5965" x2="78.0173" y2="0.368542" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#6D6D6C"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint12_linear_3573_1528" x1="35.6096" y1="26.5751" x2="36.1045" y2="-8.47478" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.11" stop-color="#5E1104"/>
+                                    <stop offset="0.55" stop-color="#CF0F14"/>
+                                    <stop offset="1" stop-color="#E40426"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint13_linear_3573_1528" x1="34.2885" y1="23.4606" x2="32.9234" y2="2.31828" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#6D6D6C"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint14_linear_3573_1528" x1="35.7513" y1="-3.06963" x2="35.62" y2="10.0918" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint15_linear_3573_1528" x1="36.0594" y1="24.0621" x2="36.0012" y2="15.0485" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#9D3D3D"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    </defs>
+                                </svg>`;
+                // button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+                // if(isMobile){
+                //     button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
+                // } else{
+                //     button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+                // } //** */
                 button.style.marginRight = `${buttonSpacing}px`; 
                     button.addEventListener('click', () => {
                     // Remove the border from the previously selected button, if any
@@ -341,10 +464,14 @@ import Layout from '../../layouts/Layout.astro';
                         button.style.marginTop = '5px';
                         button.style.marginBottom = '5px';
                     } else{
-                         button.style.border = "2px solid";
-                        button.style.borderColor = color;
-                        button.style.boxShadow = '5px 10px 30px #7c4c2390';
-                        button.style.borderRadius = '20%';
+                        button.style.transform = 'translateX(0.75rem)'; 
+                        button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration
+                        button.style.marginTop = '5px';
+                        button.style.marginBottom = '5px';
+                        //  button.style.border = "2px solid";
+                        // button.style.borderColor = color;
+                        // button.style.boxShadow = '5px 10px 30px #7c4c2390';
+                        // button.style.borderRadius = '20%';
                     }
                     // Update the selectedButton variable to the current button
                     selectedButton = button;
@@ -358,7 +485,7 @@ import Layout from '../../layouts/Layout.astro';
             colorPreview.style.backgroundColor = 'blue';
             // Append the color buttons container to the color container
             colorContainer.appendChild(colorButtonsContainer);
-            // Append the color container to the document body
+            // Append the color container to the document body 
             document.body.appendChild(colorContainer);
             // Create a container div for both buttons
             const buttonsContainer = document.createElement('div');
@@ -386,7 +513,9 @@ import Layout from '../../layouts/Layout.astro';
             // clearButton.style.marginRight = '10px';
             if(isMobile){
                 clearButton.style.padding = '2px 8px';
-                buttonsContainer.style.top = '17%';
+                clearButton.style.display = 'none';
+                buttonsContainer.style.top = '9.5%';
+                buttonsContainer.style.marginLeft = '30px';
             } else {
                 clearButton.style.padding = '5px 10px';
             }        
@@ -396,6 +525,13 @@ import Layout from '../../layouts/Layout.astro';
             clearButton.addEventListener('click', () => {
                 clearDrawing();
             }); 
+            colorViewButton.setInteractive().on('pointerdown', () => {
+                if(clearButton.style.display === 'block') {
+                    clearButton.style.display = 'none';
+                }else{
+                    clearButton.style.display = 'block';
+                }
+            })
             // Create the Eraser button
             const eraserButton = document.createElement('button');
             // eraserButton.textContent = 'Eraser';
@@ -409,7 +545,7 @@ import Layout from '../../layouts/Layout.astro';
             eraserButton.style.marginBottom = '0px';
             if(isMobile){
                 eraserButton.style.padding = '4px 4px';
-            } else {
+            }else{
                 eraserButton.style.padding = '5px 5px';
                 eraserButton.style.marginTop = '15px';
                 eraserButton.style.marginBottom = '15px';
@@ -432,34 +568,38 @@ import Layout from '../../layouts/Layout.astro';
             });
             // Add the Clear and Eraser buttons to the container
             buttonsContainer.appendChild(clearButton);
+            // colorPicker.appendChild(clearButton);
             // buttonsContainer.appendChild(eraserButton).setVisible;
             
             const sliderContainer = document.createElement('div');
+            sliderContainer.style.backgroundColor = '#fff';
+
             sliderContainer.className = 'slider-container';
             // sliderContainer.style.position = 'absolute';
             // sliderContainer.style.top = '25%';
             sliderContainer.style.left = '100%';
-            if(!isMobile){
-                sliderContainer.style.marginLeft = '-75px'
-                sliderContainer.style.marginTop = '15px'
-            }
-
             // Create the slider
             const slider = document.createElement('input');
             slider.type = 'range';
             slider.min = '2';
             slider.max = '80';
             slider.value = brushSize.toString();
-            slider.className = 'slider';
+            slider.style.transform = 'rotate(-90deg)';
+            slider.style.marginTop = '80px';
+            slider.style.marginLeft = '-40px';
+            if(isMobile){
+
+            }
             // slider.style.width = `${window.innerWidth / 2}px`;
             slider.addEventListener('input', (event) => {
                 brushSize = parseInt(event.target.value);
                 slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
                 slider.style.backgroundColor = '#05b3a4';
             });
-
-            sliderContainer.appendChild(slider);
-            buttonsContainer.appendChild(sliderContainer);
+            // colorContainer colorButtonsContainer
+            colorButtonsContainer.appendChild(slider);
+            // sliderContainer.appendChild(slider);
+            // buttonsContainer.appendChild(sliderContainer);
             
             this.input.on('pointerdown', () => {
                 isDrawing = true;
@@ -517,8 +657,8 @@ import Layout from '../../layouts/Layout.astro';
             snapNotice.setVisible(false);
     }
     function captureSnapshot(drawingZone) {
-        submitButton.setVisible(false);
         // snapNotice.setVisible(true);
+        submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
         drawingZone.renderer.snapshot((image) => {
@@ -535,11 +675,90 @@ import Layout from '../../layouts/Layout.astro';
             link.download = 'my_drawing.png';
             link.click();
             document.body.removeChild(image);
-            
             // Clear the drawing
             // graphics.clear();
         });
     }
+
+    // const url = window.location.href;
+    // const gameName = url.split('/');
+    // const gameType = gameName[3].split('?id=');        
+    // function submitUserData(drawingZone) {
+    //     let imageCode;
+    //     // console.log(drawingZone);
+    //     drawingZone.renderer.snapshot((image) => {
+    //         submitButton.setVisible(true);
+    //         snapshotButton.setVisible(true);
+    //         customCursor.setVisible(true);
+    //         image.style.width = '160px';
+    //         image.style.height = '120px';
+    //         image.style.paddingLeft = '2px';
+    //         document.body.appendChild(image);
+    //         // Download the snapshot as an image
+    //         const link = document.createElement('a');
+    //         link.href = image.src;
+    //         link.download = 'my_drawing.png';
+    //         link.click();
+    //         document.body.removeChild(image);
+    //         imageCode = image.src;
+            
+
+    //         let userData = {
+    //         'userID': 'drawing@beanstalkedu.com',
+    //         'gameType': gameType[0],
+    //         'gameID': gameType[1],
+    //         'screenShot': imageCode
+    //         // 'starts': formattedDateTime,
+    //         // 'game_start' : gameStartTime,
+    //         };
+    //         console.log(userData);
+
+    //         fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
+    //         method: 'POST',
+    //         headers: {
+    //             'Content-Type' : 'application/json'
+    //         },
+    //         body: JSON.stringify(userData)
+    //         })
+    //         .then(response => {
+    //             if(response.ok){
+    //             console.log('Data Saved', response)
+    //             } else{
+    //             // console.log('Something Wrong', response)
+    //             }
+    //         })
+    //         .catch(error => {
+    //             console.error('An error occured', error)
+    //         }); 
+                
+    //             // Clear the drawing
+    //             // graphics.clear();
+    //         });        
+    // };
+    // function captureSnapshot(drawingZone) {
+    //     submitButton.setVisible(false);
+    //     // snapNotice.setVisible(true);
+    //     snapshotButton.setVisible(false);
+    //     customCursor.setVisible(false);
+    //     drawingZone.renderer.snapshot((image) => {
+    //         submitButton.setVisible(true);
+    //         snapshotButton.setVisible(true);
+    //         customCursor.setVisible(true);
+    //         image.style.width = '160px';
+    //         image.style.height = '120px';
+    //         image.style.paddingLeft = '2px';
+    //         document.body.appendChild(image);
+    //         // Download the snapshot as an image
+    //         const link = document.createElement('a');
+    //         link.href = image.src;
+    //         link.download = 'my_drawing.png';
+    //         link.click();
+    //         document.body.removeChild(image);
+            
+    //         // Clear the drawing
+    //         // graphics.clear();
+    //     });
+    // }
     function startDrawing(x, y) {
         if (!isErasing) {
             graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro
index 6355d33..ddae878 100644
--- a/src/pages/drawing/drawing_writo.astro
+++ b/src/pages/drawing/drawing_writo.astro
@@ -13,6 +13,7 @@ import Layout from '../../layouts/Layout.astro';
 <script is:inline>
     const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
     const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
+
     const drawingZone = {
         x: 0,
         y: 0,
@@ -29,13 +30,28 @@ import Layout from '../../layouts/Layout.astro';
     let submitButton;
     let formattedDateTime;
     let shortUniqueID;
-
+    let scoreTotal = 0;
+    if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    
     if(isMobile){
-        topLogoWidth = 5;
-        muteIconWidth = 2;
-        resetIconWidth = 1.6;
-        tickIconWidth = 1.34;
-        cancelIconWidth = 1.16;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -45,11 +61,6 @@ import Layout from '../../layouts/Layout.astro';
         learningWidth = 200;
         learningHeight = 400
     } else {
-        topLogoWidth = 6;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;
@@ -130,6 +141,7 @@ import Layout from '../../layouts/Layout.astro';
         this.load.image("resetIcon", '/assets/svg/reset.svg');
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
+        this.load.image('colorButton', '/assets/color_button.png');
     }
 
     function create() {
@@ -140,7 +152,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;}
@@ -151,33 +163,6 @@ import Layout from '../../layouts/Layout.astro';
             .catch(error => {
                 console.error('Error fetching initial data:', error);
             });
-            // const URL = window.location.href;
-            // const gameName = URL.split('/');
-            // let userData = {
-            //     'user': 'drawing@beanstalkedu.com',
-            //     'game_name': gameName[3],
-            //     'starts': formattedDateTime,
-            //     // 'game_start' : gameStartTime,
-            // };
-            // function submitUserData() {
-            // fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            //     method: 'POST',
-            //     headers: {
-            //     'Content-Type' : 'application/json'
-            //     },
-            //     body: JSON.stringify(userData)
-            // })
-            // .then(response => {
-            //     if(response.ok){
-            //     // console.log('Data Saved', response)
-            //     } else{
-            //     // console.log('Something Wrong', response)
-            //     }
-            // })
-            // .catch(error => {
-            //     console.error('An error occured', error)
-            // }); 
-            // };
             // window.load
 
             const borderBottom = this.add.graphics();
@@ -190,12 +175,15 @@ import Layout from '../../layouts/Layout.astro';
             borderBottom.lineTo(x + lineWidth, y);
             borderBottom.strokePath();
 
-
             this.add.image(customWidth / topLogoWidth, 30, "topLogo");
             this.add.image(customWidth / muteIconWidth, 30, "muteIcon");
             const retryButton = this.add.image(customWidth / resetIconWidth, 30, "resetIcon");
             submitButton = this.add.image(customWidth / tickIconWidth, 30, "tickIcon");
 
+
+            retryButton.setInteractive().on('pointerdown', () => {
+                window.location.reload();
+            });
             const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
                 font: '600 20px Quicksand',
                 fill: 'blue'
@@ -209,12 +197,12 @@ import Layout from '../../layouts/Layout.astro';
             // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-            // console.log('Clicked');
-            submitButton.setVisible(false);
-            submitNotic.setVisible(true);
-            // windowLoad();
+                submitNotic.setVisible(true);
+                submitNotic.setVisible(false);
+                // windowLoad();
                 submitUserData(this);
-            })
+            });
+
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
                 // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
@@ -233,6 +221,15 @@ import Layout from '../../layouts/Layout.astro';
                 outlineImage.setDepth(1).setScale(0.45);   
             }  
 
+
+            // const outlineImage = this.add.image(customWidth / 2, customHeight / 3, 'outline');
+            // if(isMobile){
+            //     outlineImage.setDepth(1).setScale(0.33);
+            // }else if(isTab){
+            //     outlineImage.setDepth(1).setScale(0.40);
+            // } else{
+            //     outlineImage.setDepth(1).setScale(0.65);   
+            // }  
             graphics = this.add.graphics();
             const colorContainer = document.createElement('div');
             colorContainer.style.position = 'absolute';
@@ -244,13 +241,30 @@ import Layout from '../../layouts/Layout.astro';
                 colorContainer.style.top = '10%';
                 colorContainer.style.flexDirection = 'column'; 
             }
+            if(isMobile){
+                colorContainer.style.display = 'none';
+            }
+
+            let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
+            if(!isMobile){
+                colorViewButton.setVisible(false);
+            }
+            colorViewButton.setInteractive().on('pointerdown', () => {
+                if(colorContainer.style.display === 'block') {
+                    colorContainer.style.display = 'none';
+                }else{
+                    colorContainer.style.display = 'block';
+                }
+            });
+
+
             // Create the color picker
             const colorPicker = document.createElement('input');
             colorPicker.type = 'color';
             colorPicker.value = selectedColor;
             colorPicker.className = 'color-picker';
             colorPicker.style.marginBottom = '0px';
-            colorPicker.style.marginTop = '25px';
+            colorPicker.style.marginTop = '-0px';
             colorPicker.style.marginRight = '15px';
             // colorPicker.style.padding = '1px 1px';
             // colorPicker.style.outline = 'none';
@@ -272,9 +286,9 @@ import Layout from '../../layouts/Layout.astro';
             });
             // Append the color picker to the color container data
             colorContainer.appendChild(colorPicker);
-            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
             // const colors = data.colors;
             // var colors = colorList;
+            var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
             // var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 60;
@@ -282,6 +296,7 @@ import Layout from '../../layouts/Layout.astro';
             // Create a container div for the color buttons
             const colorButtonsContainer = document.createElement('div');
             colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
+            colorButtonsContainer.style.flexDirection = 'column'; //** */
             if(!isMobile){
                 colorButtonsContainer.style.flexDirection = 'column'; 
             }
@@ -306,19 +321,137 @@ import Layout from '../../layouts/Layout.astro';
                 // ${color}
                 // Create the SVG element with dynamic fill color
                 if (!isMobile) {
-                    pencilSize = '150px';
+                    // pencilSize = '150px';
                     button.style.width = `${buttonSize}px`; 
                     button.style.height = `${buttonSize}px`;
                 } else {
-                    pencilSize = '40px';
+                    // pencilSize = '150px';
+                    // button.style.width = `${buttonSize}px`; 
+                    // button.style.height = `${buttonSize}px`;
+                    // pencilSize = '40px';
                     button.style.width = `45px`;
                     button.style.height = `45px`;
                 }
-                if(isMobile){
-                    button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
-                } else{
-                    button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
-                }
+                button.innerHTML = `
+                                <svg width="125" height="24" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M121.521 12.0599C121.821 10.2699 122.901 10.5299 122.901 10.5299C122.901 10.5299 123.821 11.3399 124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.611 15.3799 121.231 13.7699 121.521 12.0599Z" fill="${color}"/>
+                                    <g style="mix-blend-mode:multiply">
+                                    <path d="M124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.811 15.3199 121.861 14.4199 121.571 13.2199C123.241 13.6699 124.161 12.3899 124.161 12.3899Z" fill="url(#paint1_linear_3573_1528)"/>
+                                    </g>
+                                    <g style="mix-blend-mode:screen" opacity="0.6">
+                                    <path d="M122.791 10.5199C122.791 10.5199 121.651 10.4399 121.491 12.3699C121.491 12.3699 121.591 10.9699 122.791 10.5199Z" fill="#F8F8F7"/>
+                                    </g>
+                                    <path d="M-33.199 19.2499C-34.279 17.1299 -35.079 14.9299 -34.989 12.5199C-34.939 11.0099 -34.659 8.80989 -33.869 7.47989C-33.869 7.47989 -30.569 1.92989 -26.809 1.39989L95.731 0.839893C95.731 0.839893 88.811 5.8299 90.831 14.2499C92.581 21.5899 95.611 23.1699 95.611 23.1699C95.611 23.1699 -27.549 23.9999 -27.699 23.9999C-30.259 24.0199 -32.189 21.2099 -33.199 19.2499Z" fill="${color}"/>
+                                    <path d="M90.8307 14.2499C88.8107 5.82992 95.7307 0.839922 95.7307 0.839922C95.7307 0.839922 96.5407 0.649921 97.0507 1.30992C97.5507 1.96992 96.9307 22.8199 96.9307 22.8199C96.9307 22.8199 96.1707 23.1699 95.6207 23.1699C95.6207 23.1699 92.5907 21.5899 90.8407 14.2499H90.8307Z" fill="#ffffff"/>
+                                    <path d="M92.4112 13.1799C91.3612 6.26989 97.0512 1.30989 97.0512 1.29988L122.901 10.5299C122.901 10.5299 121.821 10.2699 121.521 12.0599C121.231 13.7699 122.611 15.3799 123.471 15.1399C123.351 15.2599 123.221 15.3799 123.071 15.4699C122.231 15.9699 102.251 21.3799 96.9212 22.8199C96.0312 21.9799 93.2812 18.9599 92.4112 13.1799Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:screen" opacity="0.7" d="M94.4812 1.94991L-30.1688 3.0899C-29.1588 2.2499 -28.0088 1.5699 -26.8188 1.3999L95.7212 0.839905C95.7212 0.839905 95.2012 1.21991 94.4912 1.93991C94.4912 1.93991 94.4812 1.93991 94.4712 1.94991H94.4812Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:multiply" d="M92.5108 19.1599C94.0408 22.3399 95.6108 23.1699 95.6108 23.1699C95.6108 23.1699 -27.5492 23.9999 -27.6992 23.9999C-30.2592 24.0199 -32.1892 21.2099 -33.1992 19.2499L92.5108 19.1599Z" fill="url(#paint6_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" opacity="0.8" d="M92.5209 19.1599C93.9909 19.8999 94.2509 19.0799 94.2509 19.0799C95.2909 21.1199 96.4109 22.3299 96.9209 22.8199C96.9209 22.8199 96.1609 23.1699 95.6109 23.1699C95.6109 23.1699 94.0509 22.3399 92.5109 19.1599H92.5209Z" fill="url(#paint7_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" d="M94.251 19.0799L121.591 13.2999C121.901 14.4599 122.831 15.3199 123.481 15.1399C123.361 15.2599 123.231 15.3799 123.081 15.4699C122.241 15.9699 102.261 21.3799 96.931 22.8199C96.421 22.3299 95.291 21.1199 94.261 19.0799H94.251Z" fill="url(#paint8_linear_3573_1528)"/>
+                                    <g style="mix-blend-mode:screen" opacity="0.1">
+                                    <path d="M95.9608 2.42987C95.9608 2.42987 95.0908 1.32987 94.5008 1.92987C95.2108 1.20987 95.7308 0.82987 95.7308 0.82987C95.7308 0.82987 96.5408 0.639869 97.0508 1.29987C97.0508 1.29987 96.5908 1.70987 95.9708 2.42987H95.9608Z" fill="${color}"/>
+                                    </g>
+                                    <path opacity="0.4" d="M95.9609 2.42987C96.5909 1.70987 97.0409 1.29987 97.0409 1.29987L122.901 10.5299C122.901 10.5299 122.271 10.3899 121.841 11.1199L121.651 11.0799L95.9609 2.43987V2.42987Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:overlay" opacity="0.8" d="M93.0608 7.24991L91.4508 6.39991L-34.4192 8.76991C-34.2692 8.29991 -34.0892 7.84991 -33.8692 7.47991C-33.8692 7.47991 -33.4192 6.72991 -32.6692 5.74991L92.3308 4.69991L93.8808 5.44991L121.521 12.0599C121.461 12.4199 121.481 12.7699 121.551 13.0999L93.0608 7.24991Z" fill="url(#paint10_linear_3573_1528)"/>
+                                    <path d="M77.6709 0.759924L81.1909 0.739923C78.8909 3.42992 72.7809 12.3099 80.8009 23.3399C79.8809 23.3399 78.9309 23.3499 77.9509 23.3599C69.8509 12.6599 75.1409 3.90992 77.6709 0.759924Z" fill="url(#paint11_linear_3573_1528)"/>
+                                    <path d="M-1.92906 1.1199L77.6809 0.759903C75.1509 3.9199 69.8609 12.6699 77.9609 23.3599C56.9909 23.4999 21.8709 23.7399 -2.36906 23.8999C-10.7591 12.5699 -3.86906 3.3299 -1.92906 1.1199Z" fill="${color}"/>
+                                    <path opacity="0.6" d="M6.38071 11.5899L58.1407 10.6999C58.1407 10.6999 65.4307 9.98993 66.7607 14.0799C66.7607 14.0799 67.9207 18.5799 62.8807 19.4999L5.36071 19.6799C5.36071 19.6799 2.74072 19.7899 1.57072 18.0199C0.400719 16.2499 1.20071 12.3099 6.38071 11.5999V11.5899Z" fill="#ffffff"/>
+                                    <path d="M7.50074 11.4999L56.8107 10.6499C56.8107 10.6499 63.7607 9.97992 65.0207 13.8699C65.0207 13.8699 66.1207 18.1599 61.3207 19.0299L6.53074 19.1999C6.53074 19.1999 4.04074 19.2999 2.92074 17.6199C1.80074 15.9299 2.57074 12.1799 7.50074 11.4999Z" fill="#ffffff70"/>
+                                    <g opacity="0.6">
+                                    <g style="mix-blend-mode:screen" opacity="0.8">
+                                    <path d="M94.1011 2.33987C94.1011 2.33987 89.2511 6.86987 90.7611 13.9899C90.7611 13.9899 89.4911 7.60987 94.1011 2.33987Z" fill="#F8F8F7"/>
+                                    </g>
+                                    <g style="mix-blend-mode:screen" opacity="0.8">
+                                    <path d="M94.7212 4.03987C94.7212 4.03987 91.3312 8.57987 92.4612 13.5499C92.4612 13.5499 91.2712 10.2599 94.7212 4.03987Z" fill="#F8F8F7"/>
+                                    </g>
+                                    </g>
+                                    <path style="mix-blend-mode:screen" opacity="0.8" d="M79.6012 2.07988C79.6012 2.07988 77.3112 4.52988 76.5512 7.60988C76.5512 7.60988 76.4412 9.19988 74.3912 9.06988C72.3412 8.94988 -5.1188 10.3099 -5.1188 10.3099C-5.1188 10.3099 -7.9988 10.9699 -8.3088 8.83988C-8.6088 6.70988 -6.1188 2.34988 -4.29881 2.04988C-2.47881 1.75988 78.1912 1.50988 78.1912 1.50988C78.1912 1.50988 80.2512 1.28988 79.6012 2.06988V2.07988Z" fill="url(#paint14_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" d="M74.5509 17.1199C75.2209 19.0999 76.3109 21.1899 77.9609 23.3699C56.9909 23.5099 21.8709 23.7499 -2.36906 23.9099C-4.14906 21.5099 -5.23907 19.1999 -5.82907 17.0299L74.5609 17.1199H74.5509Z" fill="url(#paint15_linear_3573_1528)"/>
+                                    <defs>
+                                    <linearGradient id="paint0_linear_3573_1528" x1="123.151" y1="13.9754" x2="122.087" y2="9.86632" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CA3418"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint1_linear_3573_1528" x1="124.053" y1="23.1306" x2="122.178" y2="6.751" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint2_linear_3573_1528" x1="30.7266" y1="22.0303" x2="30.1754" y2="0.66354" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.11" stop-color="#5E1104"/>
+                                    <stop offset="0.55" stop-color="#DE3313"/>
+                                    <stop offset="1" stop-color="#EA562A"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint3_linear_3573_1528" x1="98.7993" y1="14.0938" x2="90.164" y2="7.46254" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CC361A"/>
+                                    <stop offset="0.59" stop-color="#DA4727"/>
+                                    <stop offset="0.65" stop-color="#E35330"/>
+                                    <stop offset="0.74" stop-color="#E95A35"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint4_linear_3573_1528" x1="106.626" y1="23.7951" x2="109.063" y2="2.27873" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CA3418"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint5_linear_3573_1528" x1="32.7047" y1="1.02997" x2="33.1363" y2="8.59623" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.1" stop-color="white"/>
+                                    <stop offset="0.72" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint6_linear_3573_1528" x1="31.0748" y1="27.8663" x2="31.2566" y2="15.6366" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint7_linear_3573_1528" x1="95.4797" y1="23.146" x2="93.4037" y2="17.3432" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint8_linear_3573_1528" x1="109.97" y1="21.5463" x2="107.895" y2="13.3528" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint9_linear_3573_1528" x1="109.12" y1="7.20142" x2="109.703" y2="5.67219" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.28" stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint10_linear_3573_1528" x1="44.6929" y1="-6.07285" x2="42.3312" y2="28.5009" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint11_linear_3573_1528" x1="76.7851" y1="25.5965" x2="78.0173" y2="0.368542" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#6D6D6C"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint12_linear_3573_1528" x1="35.6096" y1="26.5751" x2="36.1045" y2="-8.47478" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.11" stop-color="#5E1104"/>
+                                    <stop offset="0.55" stop-color="#CF0F14"/>
+                                    <stop offset="1" stop-color="#E40426"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint13_linear_3573_1528" x1="34.2885" y1="23.4606" x2="32.9234" y2="2.31828" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#6D6D6C"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint14_linear_3573_1528" x1="35.7513" y1="-3.06963" x2="35.62" y2="10.0918" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint15_linear_3573_1528" x1="36.0594" y1="24.0621" x2="36.0012" y2="15.0485" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#9D3D3D"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    </defs>
+                                </svg>`;
+                // button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+                // if(isMobile){
+                //     button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
+                // } else{
+                //     button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+                // } //** */
                 button.style.marginRight = `${buttonSpacing}px`; 
                     button.addEventListener('click', () => {
                     // Remove the border from the previously selected button, if any
@@ -339,10 +472,14 @@ import Layout from '../../layouts/Layout.astro';
                         button.style.marginTop = '5px';
                         button.style.marginBottom = '5px';
                     } else{
-                        button.style.border = "2px solid";
-                        button.style.borderColor = color;
-                        button.style.boxShadow = '5px 10px 30px #7c4c2390';
-                        button.style.borderRadius = '20%';
+                        button.style.transform = 'translateX(0.75rem)'; 
+                        button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration
+                        button.style.marginTop = '5px';
+                        button.style.marginBottom = '5px';
+                        //  button.style.border = "2px solid";
+                        // button.style.borderColor = color;
+                        // button.style.boxShadow = '5px 10px 30px #7c4c2390';
+                        // button.style.borderRadius = '20%';
                     }
                     // Update the selectedButton variable to the current button
                     selectedButton = button;
@@ -356,7 +493,7 @@ import Layout from '../../layouts/Layout.astro';
             colorPreview.style.backgroundColor = 'blue';
             // Append the color buttons container to the color container
             colorContainer.appendChild(colorButtonsContainer);
-            // Append the color container to the document body
+            // Append the color container to the document body 
             document.body.appendChild(colorContainer);
             // Create a container div for both buttons
             const buttonsContainer = document.createElement('div');
@@ -367,7 +504,7 @@ import Layout from '../../layouts/Layout.astro';
             buttonsContainer.style.marginTop = '30px';
             if(!isMobile){
                 // buttonsContainer.style.position = 'fixed';
-                buttonsContainer.style.top = '12%';
+                buttonsContainer.style.top = '10%';
                 buttonsContainer.style.flexDirection = 'column';
                 buttonsContainer.style.marginLeft = '60px';
                 buttonsContainer.style.marginTop = '0%';
@@ -384,7 +521,9 @@ import Layout from '../../layouts/Layout.astro';
             // clearButton.style.marginRight = '10px';
             if(isMobile){
                 clearButton.style.padding = '2px 8px';
-                buttonsContainer.style.top = '17%';
+                clearButton.style.display = 'none';
+                buttonsContainer.style.top = '9.5%';
+                buttonsContainer.style.marginLeft = '30px';
             } else {
                 clearButton.style.padding = '5px 10px';
             }        
@@ -394,6 +533,13 @@ import Layout from '../../layouts/Layout.astro';
             clearButton.addEventListener('click', () => {
                 clearDrawing();
             }); 
+            colorViewButton.setInteractive().on('pointerdown', () => {
+                if(clearButton.style.display === 'block') {
+                    clearButton.style.display = 'none';
+                }else{
+                    clearButton.style.display = 'block';
+                }
+            })
             // Create the Eraser button
             const eraserButton = document.createElement('button');
             // eraserButton.textContent = 'Eraser';
@@ -407,7 +553,7 @@ import Layout from '../../layouts/Layout.astro';
             eraserButton.style.marginBottom = '0px';
             if(isMobile){
                 eraserButton.style.padding = '4px 4px';
-            } else {
+            }else{
                 eraserButton.style.padding = '5px 5px';
                 eraserButton.style.marginTop = '15px';
                 eraserButton.style.marginBottom = '15px';
@@ -430,34 +576,38 @@ import Layout from '../../layouts/Layout.astro';
             });
             // Add the Clear and Eraser buttons to the container
             buttonsContainer.appendChild(clearButton);
+            // colorPicker.appendChild(clearButton);
             // buttonsContainer.appendChild(eraserButton).setVisible;
             
             const sliderContainer = document.createElement('div');
+            sliderContainer.style.backgroundColor = '#fff';
+
             sliderContainer.className = 'slider-container';
             // sliderContainer.style.position = 'absolute';
             // sliderContainer.style.top = '25%';
             sliderContainer.style.left = '100%';
-            if(!isMobile){
-                sliderContainer.style.marginLeft = '-75px'
-                sliderContainer.style.marginTop = '15px'
-            }
-
             // Create the slider
             const slider = document.createElement('input');
             slider.type = 'range';
             slider.min = '2';
             slider.max = '80';
             slider.value = brushSize.toString();
-            slider.className = 'slider';
+            slider.style.transform = 'rotate(-90deg)';
+            slider.style.marginTop = '80px';
+            slider.style.marginLeft = '-40px';
+            if(isMobile){
+
+            }
             // slider.style.width = `${window.innerWidth / 2}px`;
             slider.addEventListener('input', (event) => {
                 brushSize = parseInt(event.target.value);
                 slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
                 slider.style.backgroundColor = '#05b3a4';
             });
-
-            sliderContainer.appendChild(slider);
-            buttonsContainer.appendChild(sliderContainer);
+            // colorContainer colorButtonsContainer
+            colorButtonsContainer.appendChild(slider);
+            // sliderContainer.appendChild(slider);
+            // buttonsContainer.appendChild(sliderContainer);
             
             this.input.on('pointerdown', () => {
                 isDrawing = true;
@@ -515,8 +665,8 @@ import Layout from '../../layouts/Layout.astro';
             snapNotice.setVisible(false);
     }
     function captureSnapshot(drawingZone) {
-        submitButton.setVisible(false);
         // snapNotice.setVisible(true);
+        submitButton.setVisible(false);
         snapshotButton.setVisible(false);
         customCursor.setVisible(false);
         drawingZone.renderer.snapshot((image) => {
@@ -533,11 +683,90 @@ import Layout from '../../layouts/Layout.astro';
             link.download = 'my_drawing.png';
             link.click();
             document.body.removeChild(image);
-            
             // Clear the drawing
             // graphics.clear();
         });
     }
+
+    // const url = window.location.href;
+    // const gameName = url.split('/');
+    // const gameType = gameName[3].split('?id=');        
+    // function submitUserData(drawingZone) {
+    //     let imageCode;
+    //     // console.log(drawingZone);
+    //     drawingZone.renderer.snapshot((image) => {
+    //         submitButton.setVisible(true);
+    //         snapshotButton.setVisible(true);
+    //         customCursor.setVisible(true);
+    //         image.style.width = '160px';
+    //         image.style.height = '120px';
+    //         image.style.paddingLeft = '2px';
+    //         document.body.appendChild(image);
+    //         // Download the snapshot as an image
+    //         const link = document.createElement('a');
+    //         link.href = image.src;
+    //         link.download = 'my_drawing.png';
+    //         link.click();
+    //         document.body.removeChild(image);
+    //         imageCode = image.src;
+            
+
+    //         let userData = {
+    //         'userID': 'drawing@beanstalkedu.com',
+    //         'gameType': gameType[0],
+    //         'gameID': gameType[1],
+    //         'screenShot': imageCode
+    //         // 'starts': formattedDateTime,
+    //         // 'game_start' : gameStartTime,
+    //         };
+    //         console.log(userData);
+
+    //         fetch(`https://save-game-data.teachertrainingchennai.in/saveGameData`, {
+    //         method: 'POST',
+    //         headers: {
+    //             'Content-Type' : 'application/json'
+    //         },
+    //         body: JSON.stringify(userData)
+    //         })
+    //         .then(response => {
+    //             if(response.ok){
+    //             console.log('Data Saved', response)
+    //             } else{
+    //             // console.log('Something Wrong', response)
+    //             }
+    //         })
+    //         .catch(error => {
+    //             console.error('An error occured', error)
+    //         }); 
+                
+    //             // Clear the drawing
+    //             // graphics.clear();
+    //         });        
+    // };
+    // function captureSnapshot(drawingZone) {
+    //     submitButton.setVisible(false);
+    //     // snapNotice.setVisible(true);
+    //     snapshotButton.setVisible(false);
+    //     customCursor.setVisible(false);
+    //     drawingZone.renderer.snapshot((image) => {
+    //         submitButton.setVisible(true);
+    //         snapshotButton.setVisible(true);
+    //         customCursor.setVisible(true);
+    //         image.style.width = '160px';
+    //         image.style.height = '120px';
+    //         image.style.paddingLeft = '2px';
+    //         document.body.appendChild(image);
+    //         // Download the snapshot as an image
+    //         const link = document.createElement('a');
+    //         link.href = image.src;
+    //         link.download = 'my_drawing.png';
+    //         link.click();
+    //         document.body.removeChild(image);
+            
+    //         // Clear the drawing
+    //         // graphics.clear();
+    //     });
+    // }
     function startDrawing(x, y) {
         if (!isErasing) {
             graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(selectedColor).color);
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 046f930..71c58b6 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -31,12 +31,29 @@ import Layout from '../../layouts/Layout.astro';
     let formattedDateTime;
     let shortUniqueID;
     let scoreTotal = 0;
+    let noticeWidth;
+    let noticeHeight;
+    if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    
     if(isMobile){
-        topLogoWidth = 5;
-        muteIconWidth = 2;
-        resetIconWidth = 1.6;
-        tickIconWidth = 1.34;
-        cancelIconWidth = 1.16;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -45,12 +62,7 @@ import Layout from '../../layouts/Layout.astro';
         downloadHeight = 200;
         learningWidth = 200;
         learningHeight = 400
-    } else {
-        topLogoWidth = 6;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
+    }else {
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;
@@ -131,6 +143,7 @@ import Layout from '../../layouts/Layout.astro';
         this.load.image("resetIcon", '/assets/svg/reset.svg');
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
+        this.load.image('colorButton', '/assets/color_button.png');
     }
 
     function create() {
@@ -141,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){wrapWidth = 10;} else{wrapWidth = 200;}
@@ -200,7 +213,7 @@ import Layout from '../../layouts/Layout.astro';
                 // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
                 // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
             }
-            const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
+            const outlineImage = this.add.image(customWidth / 2, customHeight / 3, 'outline');
             if(isMobile){
                 outlineImage.setDepth(1).setScale(0.33);
             }else if(isTab){
@@ -219,6 +232,23 @@ import Layout from '../../layouts/Layout.astro';
                 colorContainer.style.top = '10%';
                 colorContainer.style.flexDirection = 'column'; 
             }
+            if(isMobile){
+                colorContainer.style.display = 'none';
+            }
+
+            let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
+            if(!isMobile){
+                colorViewButton.setVisible(false);
+            }
+            colorViewButton.setInteractive().on('pointerdown', () => {
+                if(colorContainer.style.display === 'block') {
+                    colorContainer.style.display = 'none';
+                }else{
+                    colorContainer.style.display = 'block';
+                }
+            });
+
+
             // Create the color picker
             const colorPicker = document.createElement('input');
             colorPicker.type = 'color';
@@ -257,6 +287,7 @@ import Layout from '../../layouts/Layout.astro';
             // Create a container div for the color buttons
             const colorButtonsContainer = document.createElement('div');
             colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
+            colorButtonsContainer.style.flexDirection = 'column'; //** */
             if(!isMobile){
                 colorButtonsContainer.style.flexDirection = 'column'; 
             }
@@ -281,19 +312,137 @@ import Layout from '../../layouts/Layout.astro';
                 // ${color}
                 // Create the SVG element with dynamic fill color
                 if (!isMobile) {
-                    pencilSize = '150px';
+                    // pencilSize = '150px';
                     button.style.width = `${buttonSize}px`; 
                     button.style.height = `${buttonSize}px`;
                 } else {
-                    pencilSize = '40px';
+                    // pencilSize = '150px';
+                    // button.style.width = `${buttonSize}px`; 
+                    // button.style.height = `${buttonSize}px`;
+                    // pencilSize = '40px';
                     button.style.width = `45px`;
                     button.style.height = `45px`;
                 }
-                if(isMobile){
-                    button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
-                } else{
-                    button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
-                }
+                button.innerHTML = `
+                                <svg width="125" height="24" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M121.521 12.0599C121.821 10.2699 122.901 10.5299 122.901 10.5299C122.901 10.5299 123.821 11.3399 124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.611 15.3799 121.231 13.7699 121.521 12.0599Z" fill="${color}"/>
+                                    <g style="mix-blend-mode:multiply">
+                                    <path d="M124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.811 15.3199 121.861 14.4199 121.571 13.2199C123.241 13.6699 124.161 12.3899 124.161 12.3899Z" fill="url(#paint1_linear_3573_1528)"/>
+                                    </g>
+                                    <g style="mix-blend-mode:screen" opacity="0.6">
+                                    <path d="M122.791 10.5199C122.791 10.5199 121.651 10.4399 121.491 12.3699C121.491 12.3699 121.591 10.9699 122.791 10.5199Z" fill="#F8F8F7"/>
+                                    </g>
+                                    <path d="M-33.199 19.2499C-34.279 17.1299 -35.079 14.9299 -34.989 12.5199C-34.939 11.0099 -34.659 8.80989 -33.869 7.47989C-33.869 7.47989 -30.569 1.92989 -26.809 1.39989L95.731 0.839893C95.731 0.839893 88.811 5.8299 90.831 14.2499C92.581 21.5899 95.611 23.1699 95.611 23.1699C95.611 23.1699 -27.549 23.9999 -27.699 23.9999C-30.259 24.0199 -32.189 21.2099 -33.199 19.2499Z" fill="${color}"/>
+                                    <path d="M90.8307 14.2499C88.8107 5.82992 95.7307 0.839922 95.7307 0.839922C95.7307 0.839922 96.5407 0.649921 97.0507 1.30992C97.5507 1.96992 96.9307 22.8199 96.9307 22.8199C96.9307 22.8199 96.1707 23.1699 95.6207 23.1699C95.6207 23.1699 92.5907 21.5899 90.8407 14.2499H90.8307Z" fill="#ffffff"/>
+                                    <path d="M92.4112 13.1799C91.3612 6.26989 97.0512 1.30989 97.0512 1.29988L122.901 10.5299C122.901 10.5299 121.821 10.2699 121.521 12.0599C121.231 13.7699 122.611 15.3799 123.471 15.1399C123.351 15.2599 123.221 15.3799 123.071 15.4699C122.231 15.9699 102.251 21.3799 96.9212 22.8199C96.0312 21.9799 93.2812 18.9599 92.4112 13.1799Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:screen" opacity="0.7" d="M94.4812 1.94991L-30.1688 3.0899C-29.1588 2.2499 -28.0088 1.5699 -26.8188 1.3999L95.7212 0.839905C95.7212 0.839905 95.2012 1.21991 94.4912 1.93991C94.4912 1.93991 94.4812 1.93991 94.4712 1.94991H94.4812Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:multiply" d="M92.5108 19.1599C94.0408 22.3399 95.6108 23.1699 95.6108 23.1699C95.6108 23.1699 -27.5492 23.9999 -27.6992 23.9999C-30.2592 24.0199 -32.1892 21.2099 -33.1992 19.2499L92.5108 19.1599Z" fill="url(#paint6_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" opacity="0.8" d="M92.5209 19.1599C93.9909 19.8999 94.2509 19.0799 94.2509 19.0799C95.2909 21.1199 96.4109 22.3299 96.9209 22.8199C96.9209 22.8199 96.1609 23.1699 95.6109 23.1699C95.6109 23.1699 94.0509 22.3399 92.5109 19.1599H92.5209Z" fill="url(#paint7_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" d="M94.251 19.0799L121.591 13.2999C121.901 14.4599 122.831 15.3199 123.481 15.1399C123.361 15.2599 123.231 15.3799 123.081 15.4699C122.241 15.9699 102.261 21.3799 96.931 22.8199C96.421 22.3299 95.291 21.1199 94.261 19.0799H94.251Z" fill="url(#paint8_linear_3573_1528)"/>
+                                    <g style="mix-blend-mode:screen" opacity="0.1">
+                                    <path d="M95.9608 2.42987C95.9608 2.42987 95.0908 1.32987 94.5008 1.92987C95.2108 1.20987 95.7308 0.82987 95.7308 0.82987C95.7308 0.82987 96.5408 0.639869 97.0508 1.29987C97.0508 1.29987 96.5908 1.70987 95.9708 2.42987H95.9608Z" fill="${color}"/>
+                                    </g>
+                                    <path opacity="0.4" d="M95.9609 2.42987C96.5909 1.70987 97.0409 1.29987 97.0409 1.29987L122.901 10.5299C122.901 10.5299 122.271 10.3899 121.841 11.1199L121.651 11.0799L95.9609 2.43987V2.42987Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:overlay" opacity="0.8" d="M93.0608 7.24991L91.4508 6.39991L-34.4192 8.76991C-34.2692 8.29991 -34.0892 7.84991 -33.8692 7.47991C-33.8692 7.47991 -33.4192 6.72991 -32.6692 5.74991L92.3308 4.69991L93.8808 5.44991L121.521 12.0599C121.461 12.4199 121.481 12.7699 121.551 13.0999L93.0608 7.24991Z" fill="url(#paint10_linear_3573_1528)"/>
+                                    <path d="M77.6709 0.759924L81.1909 0.739923C78.8909 3.42992 72.7809 12.3099 80.8009 23.3399C79.8809 23.3399 78.9309 23.3499 77.9509 23.3599C69.8509 12.6599 75.1409 3.90992 77.6709 0.759924Z" fill="url(#paint11_linear_3573_1528)"/>
+                                    <path d="M-1.92906 1.1199L77.6809 0.759903C75.1509 3.9199 69.8609 12.6699 77.9609 23.3599C56.9909 23.4999 21.8709 23.7399 -2.36906 23.8999C-10.7591 12.5699 -3.86906 3.3299 -1.92906 1.1199Z" fill="${color}"/>
+                                    <path opacity="0.6" d="M6.38071 11.5899L58.1407 10.6999C58.1407 10.6999 65.4307 9.98993 66.7607 14.0799C66.7607 14.0799 67.9207 18.5799 62.8807 19.4999L5.36071 19.6799C5.36071 19.6799 2.74072 19.7899 1.57072 18.0199C0.400719 16.2499 1.20071 12.3099 6.38071 11.5999V11.5899Z" fill="#ffffff"/>
+                                    <path d="M7.50074 11.4999L56.8107 10.6499C56.8107 10.6499 63.7607 9.97992 65.0207 13.8699C65.0207 13.8699 66.1207 18.1599 61.3207 19.0299L6.53074 19.1999C6.53074 19.1999 4.04074 19.2999 2.92074 17.6199C1.80074 15.9299 2.57074 12.1799 7.50074 11.4999Z" fill="#ffffff70"/>
+                                    <g opacity="0.6">
+                                    <g style="mix-blend-mode:screen" opacity="0.8">
+                                    <path d="M94.1011 2.33987C94.1011 2.33987 89.2511 6.86987 90.7611 13.9899C90.7611 13.9899 89.4911 7.60987 94.1011 2.33987Z" fill="#F8F8F7"/>
+                                    </g>
+                                    <g style="mix-blend-mode:screen" opacity="0.8">
+                                    <path d="M94.7212 4.03987C94.7212 4.03987 91.3312 8.57987 92.4612 13.5499C92.4612 13.5499 91.2712 10.2599 94.7212 4.03987Z" fill="#F8F8F7"/>
+                                    </g>
+                                    </g>
+                                    <path style="mix-blend-mode:screen" opacity="0.8" d="M79.6012 2.07988C79.6012 2.07988 77.3112 4.52988 76.5512 7.60988C76.5512 7.60988 76.4412 9.19988 74.3912 9.06988C72.3412 8.94988 -5.1188 10.3099 -5.1188 10.3099C-5.1188 10.3099 -7.9988 10.9699 -8.3088 8.83988C-8.6088 6.70988 -6.1188 2.34988 -4.29881 2.04988C-2.47881 1.75988 78.1912 1.50988 78.1912 1.50988C78.1912 1.50988 80.2512 1.28988 79.6012 2.06988V2.07988Z" fill="url(#paint14_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" d="M74.5509 17.1199C75.2209 19.0999 76.3109 21.1899 77.9609 23.3699C56.9909 23.5099 21.8709 23.7499 -2.36906 23.9099C-4.14906 21.5099 -5.23907 19.1999 -5.82907 17.0299L74.5609 17.1199H74.5509Z" fill="url(#paint15_linear_3573_1528)"/>
+                                    <defs>
+                                    <linearGradient id="paint0_linear_3573_1528" x1="123.151" y1="13.9754" x2="122.087" y2="9.86632" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CA3418"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint1_linear_3573_1528" x1="124.053" y1="23.1306" x2="122.178" y2="6.751" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint2_linear_3573_1528" x1="30.7266" y1="22.0303" x2="30.1754" y2="0.66354" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.11" stop-color="#5E1104"/>
+                                    <stop offset="0.55" stop-color="#DE3313"/>
+                                    <stop offset="1" stop-color="#EA562A"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint3_linear_3573_1528" x1="98.7993" y1="14.0938" x2="90.164" y2="7.46254" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CC361A"/>
+                                    <stop offset="0.59" stop-color="#DA4727"/>
+                                    <stop offset="0.65" stop-color="#E35330"/>
+                                    <stop offset="0.74" stop-color="#E95A35"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint4_linear_3573_1528" x1="106.626" y1="23.7951" x2="109.063" y2="2.27873" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CA3418"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint5_linear_3573_1528" x1="32.7047" y1="1.02997" x2="33.1363" y2="8.59623" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.1" stop-color="white"/>
+                                    <stop offset="0.72" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint6_linear_3573_1528" x1="31.0748" y1="27.8663" x2="31.2566" y2="15.6366" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint7_linear_3573_1528" x1="95.4797" y1="23.146" x2="93.4037" y2="17.3432" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint8_linear_3573_1528" x1="109.97" y1="21.5463" x2="107.895" y2="13.3528" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint9_linear_3573_1528" x1="109.12" y1="7.20142" x2="109.703" y2="5.67219" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.28" stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint10_linear_3573_1528" x1="44.6929" y1="-6.07285" x2="42.3312" y2="28.5009" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint11_linear_3573_1528" x1="76.7851" y1="25.5965" x2="78.0173" y2="0.368542" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#6D6D6C"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint12_linear_3573_1528" x1="35.6096" y1="26.5751" x2="36.1045" y2="-8.47478" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.11" stop-color="#5E1104"/>
+                                    <stop offset="0.55" stop-color="#CF0F14"/>
+                                    <stop offset="1" stop-color="#E40426"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint13_linear_3573_1528" x1="34.2885" y1="23.4606" x2="32.9234" y2="2.31828" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#6D6D6C"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint14_linear_3573_1528" x1="35.7513" y1="-3.06963" x2="35.62" y2="10.0918" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint15_linear_3573_1528" x1="36.0594" y1="24.0621" x2="36.0012" y2="15.0485" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#9D3D3D"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    </defs>
+                                </svg>`;
+                // button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+                // if(isMobile){
+                //     button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
+                // } else{
+                //     button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+                // } //** */
                 button.style.marginRight = `${buttonSpacing}px`; 
                     button.addEventListener('click', () => {
                     // Remove the border from the previously selected button, if any
@@ -314,10 +463,14 @@ import Layout from '../../layouts/Layout.astro';
                         button.style.marginTop = '5px';
                         button.style.marginBottom = '5px';
                     } else{
-                         button.style.border = "2px solid";
-                        button.style.borderColor = color;
-                        button.style.boxShadow = '5px 10px 30px #7c4c2390';
-                        button.style.borderRadius = '20%';
+                        button.style.transform = 'translateX(0.75rem)'; 
+                        button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration
+                        button.style.marginTop = '5px';
+                        button.style.marginBottom = '5px';
+                        //  button.style.border = "2px solid";
+                        // button.style.borderColor = color;
+                        // button.style.boxShadow = '5px 10px 30px #7c4c2390';
+                        // button.style.borderRadius = '20%';
                     }
                     // Update the selectedButton variable to the current button
                     selectedButton = button;
@@ -331,7 +484,7 @@ import Layout from '../../layouts/Layout.astro';
             colorPreview.style.backgroundColor = 'blue';
             // Append the color buttons container to the color container
             colorContainer.appendChild(colorButtonsContainer);
-            // Append the color container to the document body
+            // Append the color container to the document body 
             document.body.appendChild(colorContainer);
             // Create a container div for both buttons
             const buttonsContainer = document.createElement('div');
@@ -359,7 +512,9 @@ import Layout from '../../layouts/Layout.astro';
             // clearButton.style.marginRight = '10px';
             if(isMobile){
                 clearButton.style.padding = '2px 8px';
-                buttonsContainer.style.top = '17%';
+                clearButton.style.display = 'none';
+                buttonsContainer.style.top = '9.5%';
+                buttonsContainer.style.marginLeft = '30px';
             } else {
                 clearButton.style.padding = '5px 10px';
             }        
@@ -369,6 +524,13 @@ import Layout from '../../layouts/Layout.astro';
             clearButton.addEventListener('click', () => {
                 clearDrawing();
             }); 
+            colorViewButton.setInteractive().on('pointerdown', () => {
+                if(clearButton.style.display === 'block') {
+                    clearButton.style.display = 'none';
+                }else{
+                    clearButton.style.display = 'block';
+                }
+            })
             // Create the Eraser button
             const eraserButton = document.createElement('button');
             // eraserButton.textContent = 'Eraser';
@@ -382,7 +544,7 @@ import Layout from '../../layouts/Layout.astro';
             eraserButton.style.marginBottom = '0px';
             if(isMobile){
                 eraserButton.style.padding = '4px 4px';
-            } else {
+            }else{
                 eraserButton.style.padding = '5px 5px';
                 eraserButton.style.marginTop = '15px';
                 eraserButton.style.marginBottom = '15px';
@@ -405,34 +567,38 @@ import Layout from '../../layouts/Layout.astro';
             });
             // Add the Clear and Eraser buttons to the container
             buttonsContainer.appendChild(clearButton);
+            // colorPicker.appendChild(clearButton);
             // buttonsContainer.appendChild(eraserButton).setVisible;
             
             const sliderContainer = document.createElement('div');
+            sliderContainer.style.backgroundColor = '#fff';
+
             sliderContainer.className = 'slider-container';
             // sliderContainer.style.position = 'absolute';
             // sliderContainer.style.top = '25%';
             sliderContainer.style.left = '100%';
-            if(!isMobile){
-                sliderContainer.style.marginLeft = '-75px'
-                sliderContainer.style.marginTop = '15px'
-            }
-
             // Create the slider
             const slider = document.createElement('input');
             slider.type = 'range';
             slider.min = '2';
             slider.max = '80';
             slider.value = brushSize.toString();
-            slider.className = 'slider';
+            slider.style.transform = 'rotate(-90deg)';
+            slider.style.marginTop = '80px';
+            slider.style.marginLeft = '-40px';
+            if(isMobile){
+
+            }
             // slider.style.width = `${window.innerWidth / 2}px`;
             slider.addEventListener('input', (event) => {
                 brushSize = parseInt(event.target.value);
                 slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
                 slider.style.backgroundColor = '#05b3a4';
             });
-
-            sliderContainer.appendChild(slider);
-            buttonsContainer.appendChild(sliderContainer);
+            // colorContainer colorButtonsContainer
+            colorButtonsContainer.appendChild(slider);
+            // sliderContainer.appendChild(slider);
+            // buttonsContainer.appendChild(sliderContainer);
             
             this.input.on('pointerdown', () => {
                 isDrawing = true;
diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro
index 04a2d9c..63ef898 100644
--- a/src/pages/drawing/v2.astro
+++ b/src/pages/drawing/v2.astro
@@ -30,13 +30,36 @@ import Layout from '../../layouts/Layout.astro';
     let formattedDateTime;
     let shortUniqueID;
     let defaultColor;
+    let scoreTotal = 0;
+    let image1Width;
+    let image1Height;
+    let image2Width;
+    let image2Height;
+    let image2Right;
+    let image2Bottom;
+    let noticeWidth;
+    let noticeHeight;
 
     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;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+    if(isMobile){
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -45,18 +68,13 @@ 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;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;
@@ -144,6 +162,7 @@ import Layout from '../../layouts/Layout.astro';
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
         this.load.image('waxTexture', '/assets/texture.png');
+        this.load.image('colorButton', '/assets/color_button.png');
     }
 
     function create() {
@@ -154,7 +173,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){
@@ -258,6 +277,9 @@ import Layout from '../../layouts/Layout.astro';
             const colorContainer = document.createElement('div');
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';
+            if(isMobile){
+                colorContainer.style.marginTop = '13%';
+            }
             colorContainer.style.left = '10px';
             colorContainer.style.display = 'flex';
             colorContainer.style.marginBottom = '15px';
@@ -265,14 +287,48 @@ import Layout from '../../layouts/Layout.astro';
                 colorContainer.style.top = '25%';
                 colorContainer.style.flexDirection = 'column'; 
             }
-                var colors = colorList;
+
+            if(isMobile){
+                colorContainer.style.display = 'none';
+            }
+
+            let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
+            if(!isMobile){
+                colorViewButton.setVisible(false);
+            }
+            
+            colorViewButton.setInteractive().on('pointerdown', () => {
+                if(colorContainer.style.display === 'block') {
+                    colorContainer.style.display = 'none';
+                }else{
+                    colorContainer.style.display = 'block';
+                }
+            });
+
+            colorViewButton.setInteractive().on('pointerdown', () => {
+                if(buttonsContainer.style.display === 'block') {
+                    buttonsContainer.style.display = 'none';
+                }else{
+                    buttonsContainer.style.display = 'block';
+                }
+            });
+            var colors = colorList;
             const buttonSize = 60;
             const buttonSpacing = 15;
+            const clearEraserContainer = document.createElement('div');
+            clearEraserContainer.style.display = 'flex';
+            clearEraserContainer.style.flexDirection = 'row';
+            if(isMobile){
+                clearEraserContainer.style.marginTop = '-60px';
+            }else{
+                clearEraserContainer.style.marginTop = '40px';
+            }
             const colorButtonsContainer = document.createElement('div');
             colorButtonsContainer.style.display = 'flex';
-            if(!isMobile){
-                colorButtonsContainer.style.flexDirection = 'column'; 
-            }
+            colorButtonsContainer.style.flexDirection = 'column'; 
+            // if(!isMobile){
+            //     colorButtonsContainer.style.flexDirection = 'column'; 
+            // }
             const buttonX = 300;
             // const colorPaletteY = drawingZone.y - 20;
             let selectedButton = null;
@@ -286,21 +342,135 @@ import Layout from '../../layouts/Layout.astro';
                 button.style.border = 'none';
                 button.style.outline = 'none';
                 if (!isMobile) {
-                    pencilSize = '40px';
+                    // pencilSize = '40px';
                     button.style.width = `${buttonSize}px`; 
                     button.style.height = `${buttonSize}px`;
                 } else {
-                    pencilSize = '40px';
+                    // pencilSize = '40px';
                     button.style.width = `45px`;
                     button.style.height = `45px`;
                 }
-                if(isMobile){
-                    button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
-                    button.style.boxShadow = '5px 10px 30px #7c4c2390';
-                    button.style.borderRadius = '20%';
-                } else{
-                    button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
-                }
+                button.innerHTML = `
+                                <svg width="125" height="24" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M121.521 12.0599C121.821 10.2699 122.901 10.5299 122.901 10.5299C122.901 10.5299 123.821 11.3399 124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.611 15.3799 121.231 13.7699 121.521 12.0599Z" fill="${color}"/>
+                                    <g style="mix-blend-mode:multiply">
+                                    <path d="M124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.811 15.3199 121.861 14.4199 121.571 13.2199C123.241 13.6699 124.161 12.3899 124.161 12.3899Z" fill="url(#paint1_linear_3573_1528)"/>
+                                    </g>
+                                    <g style="mix-blend-mode:screen" opacity="0.6">
+                                    <path d="M122.791 10.5199C122.791 10.5199 121.651 10.4399 121.491 12.3699C121.491 12.3699 121.591 10.9699 122.791 10.5199Z" fill="#F8F8F7"/>
+                                    </g>
+                                    <path d="M-33.199 19.2499C-34.279 17.1299 -35.079 14.9299 -34.989 12.5199C-34.939 11.0099 -34.659 8.80989 -33.869 7.47989C-33.869 7.47989 -30.569 1.92989 -26.809 1.39989L95.731 0.839893C95.731 0.839893 88.811 5.8299 90.831 14.2499C92.581 21.5899 95.611 23.1699 95.611 23.1699C95.611 23.1699 -27.549 23.9999 -27.699 23.9999C-30.259 24.0199 -32.189 21.2099 -33.199 19.2499Z" fill="${color}"/>
+                                    <path d="M90.8307 14.2499C88.8107 5.82992 95.7307 0.839922 95.7307 0.839922C95.7307 0.839922 96.5407 0.649921 97.0507 1.30992C97.5507 1.96992 96.9307 22.8199 96.9307 22.8199C96.9307 22.8199 96.1707 23.1699 95.6207 23.1699C95.6207 23.1699 92.5907 21.5899 90.8407 14.2499H90.8307Z" fill="#ffffff"/>
+                                    <path d="M92.4112 13.1799C91.3612 6.26989 97.0512 1.30989 97.0512 1.29988L122.901 10.5299C122.901 10.5299 121.821 10.2699 121.521 12.0599C121.231 13.7699 122.611 15.3799 123.471 15.1399C123.351 15.2599 123.221 15.3799 123.071 15.4699C122.231 15.9699 102.251 21.3799 96.9212 22.8199C96.0312 21.9799 93.2812 18.9599 92.4112 13.1799Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:screen" opacity="0.7" d="M94.4812 1.94991L-30.1688 3.0899C-29.1588 2.2499 -28.0088 1.5699 -26.8188 1.3999L95.7212 0.839905C95.7212 0.839905 95.2012 1.21991 94.4912 1.93991C94.4912 1.93991 94.4812 1.93991 94.4712 1.94991H94.4812Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:multiply" d="M92.5108 19.1599C94.0408 22.3399 95.6108 23.1699 95.6108 23.1699C95.6108 23.1699 -27.5492 23.9999 -27.6992 23.9999C-30.2592 24.0199 -32.1892 21.2099 -33.1992 19.2499L92.5108 19.1599Z" fill="url(#paint6_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" opacity="0.8" d="M92.5209 19.1599C93.9909 19.8999 94.2509 19.0799 94.2509 19.0799C95.2909 21.1199 96.4109 22.3299 96.9209 22.8199C96.9209 22.8199 96.1609 23.1699 95.6109 23.1699C95.6109 23.1699 94.0509 22.3399 92.5109 19.1599H92.5209Z" fill="url(#paint7_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" d="M94.251 19.0799L121.591 13.2999C121.901 14.4599 122.831 15.3199 123.481 15.1399C123.361 15.2599 123.231 15.3799 123.081 15.4699C122.241 15.9699 102.261 21.3799 96.931 22.8199C96.421 22.3299 95.291 21.1199 94.261 19.0799H94.251Z" fill="url(#paint8_linear_3573_1528)"/>
+                                    <g style="mix-blend-mode:screen" opacity="0.1">
+                                    <path d="M95.9608 2.42987C95.9608 2.42987 95.0908 1.32987 94.5008 1.92987C95.2108 1.20987 95.7308 0.82987 95.7308 0.82987C95.7308 0.82987 96.5408 0.639869 97.0508 1.29987C97.0508 1.29987 96.5908 1.70987 95.9708 2.42987H95.9608Z" fill="${color}"/>
+                                    </g>
+                                    <path opacity="0.4" d="M95.9609 2.42987C96.5909 1.70987 97.0409 1.29987 97.0409 1.29987L122.901 10.5299C122.901 10.5299 122.271 10.3899 121.841 11.1199L121.651 11.0799L95.9609 2.43987V2.42987Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:overlay" opacity="0.8" d="M93.0608 7.24991L91.4508 6.39991L-34.4192 8.76991C-34.2692 8.29991 -34.0892 7.84991 -33.8692 7.47991C-33.8692 7.47991 -33.4192 6.72991 -32.6692 5.74991L92.3308 4.69991L93.8808 5.44991L121.521 12.0599C121.461 12.4199 121.481 12.7699 121.551 13.0999L93.0608 7.24991Z" fill="url(#paint10_linear_3573_1528)"/>
+                                    <path d="M77.6709 0.759924L81.1909 0.739923C78.8909 3.42992 72.7809 12.3099 80.8009 23.3399C79.8809 23.3399 78.9309 23.3499 77.9509 23.3599C69.8509 12.6599 75.1409 3.90992 77.6709 0.759924Z" fill="url(#paint11_linear_3573_1528)"/>
+                                    <path d="M-1.92906 1.1199L77.6809 0.759903C75.1509 3.9199 69.8609 12.6699 77.9609 23.3599C56.9909 23.4999 21.8709 23.7399 -2.36906 23.8999C-10.7591 12.5699 -3.86906 3.3299 -1.92906 1.1199Z" fill="${color}"/>
+                                    <path opacity="0.6" d="M6.38071 11.5899L58.1407 10.6999C58.1407 10.6999 65.4307 9.98993 66.7607 14.0799C66.7607 14.0799 67.9207 18.5799 62.8807 19.4999L5.36071 19.6799C5.36071 19.6799 2.74072 19.7899 1.57072 18.0199C0.400719 16.2499 1.20071 12.3099 6.38071 11.5999V11.5899Z" fill="#ffffff"/>
+                                    <path d="M7.50074 11.4999L56.8107 10.6499C56.8107 10.6499 63.7607 9.97992 65.0207 13.8699C65.0207 13.8699 66.1207 18.1599 61.3207 19.0299L6.53074 19.1999C6.53074 19.1999 4.04074 19.2999 2.92074 17.6199C1.80074 15.9299 2.57074 12.1799 7.50074 11.4999Z" fill="#ffffff70"/>
+                                    <g opacity="0.6">
+                                    <g style="mix-blend-mode:screen" opacity="0.8">
+                                    <path d="M94.1011 2.33987C94.1011 2.33987 89.2511 6.86987 90.7611 13.9899C90.7611 13.9899 89.4911 7.60987 94.1011 2.33987Z" fill="#F8F8F7"/>
+                                    </g>
+                                    <g style="mix-blend-mode:screen" opacity="0.8">
+                                    <path d="M94.7212 4.03987C94.7212 4.03987 91.3312 8.57987 92.4612 13.5499C92.4612 13.5499 91.2712 10.2599 94.7212 4.03987Z" fill="#F8F8F7"/>
+                                    </g>
+                                    </g>
+                                    <path style="mix-blend-mode:screen" opacity="0.8" d="M79.6012 2.07988C79.6012 2.07988 77.3112 4.52988 76.5512 7.60988C76.5512 7.60988 76.4412 9.19988 74.3912 9.06988C72.3412 8.94988 -5.1188 10.3099 -5.1188 10.3099C-5.1188 10.3099 -7.9988 10.9699 -8.3088 8.83988C-8.6088 6.70988 -6.1188 2.34988 -4.29881 2.04988C-2.47881 1.75988 78.1912 1.50988 78.1912 1.50988C78.1912 1.50988 80.2512 1.28988 79.6012 2.06988V2.07988Z" fill="url(#paint14_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" d="M74.5509 17.1199C75.2209 19.0999 76.3109 21.1899 77.9609 23.3699C56.9909 23.5099 21.8709 23.7499 -2.36906 23.9099C-4.14906 21.5099 -5.23907 19.1999 -5.82907 17.0299L74.5609 17.1199H74.5509Z" fill="url(#paint15_linear_3573_1528)"/>
+                                    <defs>
+                                    <linearGradient id="paint0_linear_3573_1528" x1="123.151" y1="13.9754" x2="122.087" y2="9.86632" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CA3418"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint1_linear_3573_1528" x1="124.053" y1="23.1306" x2="122.178" y2="6.751" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint2_linear_3573_1528" x1="30.7266" y1="22.0303" x2="30.1754" y2="0.66354" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.11" stop-color="#5E1104"/>
+                                    <stop offset="0.55" stop-color="#DE3313"/>
+                                    <stop offset="1" stop-color="#EA562A"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint3_linear_3573_1528" x1="98.7993" y1="14.0938" x2="90.164" y2="7.46254" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CC361A"/>
+                                    <stop offset="0.59" stop-color="#DA4727"/>
+                                    <stop offset="0.65" stop-color="#E35330"/>
+                                    <stop offset="0.74" stop-color="#E95A35"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint4_linear_3573_1528" x1="106.626" y1="23.7951" x2="109.063" y2="2.27873" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CA3418"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint5_linear_3573_1528" x1="32.7047" y1="1.02997" x2="33.1363" y2="8.59623" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.1" stop-color="white"/>
+                                    <stop offset="0.72" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint6_linear_3573_1528" x1="31.0748" y1="27.8663" x2="31.2566" y2="15.6366" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint7_linear_3573_1528" x1="95.4797" y1="23.146" x2="93.4037" y2="17.3432" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint8_linear_3573_1528" x1="109.97" y1="21.5463" x2="107.895" y2="13.3528" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint9_linear_3573_1528" x1="109.12" y1="7.20142" x2="109.703" y2="5.67219" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.28" stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint10_linear_3573_1528" x1="44.6929" y1="-6.07285" x2="42.3312" y2="28.5009" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint11_linear_3573_1528" x1="76.7851" y1="25.5965" x2="78.0173" y2="0.368542" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#6D6D6C"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint12_linear_3573_1528" x1="35.6096" y1="26.5751" x2="36.1045" y2="-8.47478" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.11" stop-color="#5E1104"/>
+                                    <stop offset="0.55" stop-color="#CF0F14"/>
+                                    <stop offset="1" stop-color="#E40426"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint13_linear_3573_1528" x1="34.2885" y1="23.4606" x2="32.9234" y2="2.31828" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#6D6D6C"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint14_linear_3573_1528" x1="35.7513" y1="-3.06963" x2="35.62" y2="10.0918" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint15_linear_3573_1528" x1="36.0594" y1="24.0621" x2="36.0012" y2="15.0485" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#9D3D3D"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    </defs>
+                                </svg>`;
+                // if(isMobile){
+                //     button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
+                //     button.style.boxShadow = '5px 10px 30px #7c4c2390';
+                //     button.style.borderRadius = '20%';
+                // } else{
+                //     button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+                // }
                 button.style.marginRight = `${buttonSpacing}px`;   
                 button.addEventListener('click', () => {
                     if (selectedButton) {
@@ -310,10 +480,9 @@ import Layout from '../../layouts/Layout.astro';
                         selectedButton.style.marginTop = '0px';
                         selectedButton.style.marginBottom = '0px';
                     }
-                    if(isMobile){
-                        button.style.border = "2px solid";
-                        button.style.borderColor = color;
-                    }
+                    // if(isMobile){
+                    //     button.style.border = `2px solid ${color}`;
+                    // }
                     defaultColor = color;
                     button.style.scale = '1.1';
                     if(!isMobile){
@@ -338,7 +507,7 @@ import Layout from '../../layouts/Layout.astro';
             const buttonsContainer = document.createElement('div');
             buttonsContainer.style.position = 'absolute';
             buttonsContainer.style.display = 'flex'; 
-            buttonsContainer.style.flexDirection = 'row';
+            buttonsContainer.style.flexDirection = 'column';
             buttonsContainer.style.top = '0%'; 
             buttonsContainer.style.marginTop = '30px';
             if(!isMobile){
@@ -350,6 +519,9 @@ import Layout from '../../layouts/Layout.astro';
             } else{
                 buttonsContainer.style.left = '-20px';
             }
+            if(isMobile){
+                buttonsContainer.style.display = 'none';
+            }
             
             document.body.appendChild(buttonsContainer);
             // Create the Clear button
@@ -358,7 +530,7 @@ import Layout from '../../layouts/Layout.astro';
             // // clearButton.style.border = '3px solid blue';
             // clearButton.style.color = 'blue';
             // clearButton.style.width = 'fit-content';
-            clearButton.style.marginLeft = '30px';
+            // clearButton.style.marginLeft = '30px';
             if(isMobile){
                 clearButton.style.padding = '2px 8px';
                 buttonsContainer.style.top = '17%';
@@ -377,17 +549,8 @@ import Layout from '../../layouts/Layout.astro';
             eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
             eraserButton.style.color = 'blue';
             eraserButton.style.width = 'fit-content';
-            eraserButton.style.marginRight = '15px';
-            // eraserButton.style.marginTop = '0px';
-            eraserButton.style.marginBottom = '0px';
-            if(isMobile){
-                eraserButton.style.padding = '4px 4px';
-            } else {
-                eraserButton.style.padding = '5px 5px';
-                eraserButton.style.marginTop = '15px';
-                eraserButton.style.marginBottom = '15px';
-                eraserButton.style.marginLeft = '30px';
-            }
+            eraserButton.style.marginLeft = '30px';
+           
             eraserButton.style.fontWeight = 'bold';
             eraserButton.style.borderRadius = '20%';
             eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
@@ -405,8 +568,10 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Add the Clear and Eraser buttons to the container
-            buttonsContainer.appendChild(clearButton);
-            buttonsContainer.appendChild(eraserButton);
+            clearEraserContainer.appendChild(eraserButton);
+            clearEraserContainer.appendChild(clearButton);
+            // buttonsContainer.appendChild(clearButton);
+            buttonsContainer.appendChild(clearEraserContainer);
             
             const sliderContainer = document.createElement('div');
             sliderContainer.className = 'slider-container';
@@ -414,7 +579,7 @@ import Layout from '../../layouts/Layout.astro';
             if(isMobile){
                 sliderContainer.style.marginTop = '10px';
             } else{
-                sliderContainer.style.marginLeft = '20px';
+                sliderContainer.style.marginLeft = '10px';
             }
             sliderContainer.style.left = '100%';
 
@@ -425,6 +590,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.max = '80';
             slider.value = brushSize.toString();
             slider.className = 'slider';
+            slider.style.transform = 'rotate(-90deg)';
+            slider.style.marginTop = '80px';
+            slider.style.marginLeft = '-40px';
             // slider.style.width = `${window.innerWidth / 2}px`;
             slider.addEventListener('input', (event) => {
                 brushSize = parseInt(event.target.value);
@@ -432,8 +600,9 @@ import Layout from '../../layouts/Layout.astro';
                 slider.style.backgroundColor = '#05b3a4';
             });
 
-            sliderContainer.appendChild(slider);
-            buttonsContainer.appendChild(sliderContainer);
+            // sliderContainer.appendChild(slider);
+            // buttonsContainer.appendChild(sliderContainer);
+            colorButtonsContainer.appendChild(slider);
             
             this.input.on('pointerdown', () => {
                 isDrawing = true;
diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro
index 4b225b0..75600aa 100644
--- a/src/pages/drawing/v3.astro
+++ b/src/pages/drawing/v3.astro
@@ -31,12 +31,28 @@ import Layout from '../../layouts/Layout.astro';
     let resetIconWidth;
     let tickIconWidth;
     let cancelIconWidth; 
+    
+    if(isMobile){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.8;
+        resetIconWidth = 1.47;
+        tickIconWidth = 1.24;
+        cancelIconWidth = 1.08;
+    }else if(isTab){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+    }else{
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
+    }
+
     if(isMobile){
-        topLogoWidth = 5;
-        muteIconWidth = 2;
-        resetIconWidth = 1.6;
-        tickIconWidth = 1.34;
-        cancelIconWidth = 1.16;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -46,11 +62,6 @@ import Layout from '../../layouts/Layout.astro';
         learningWidth = 200;
         learningHeight = 400
     } else {
-        topLogoWidth = 6;
-        muteIconWidth = 1.3;
-        resetIconWidth = 1.26;
-        tickIconWidth = 1.222;
-        cancelIconWidth = 1.185;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;
@@ -131,6 +142,7 @@ import Layout from '../../layouts/Layout.astro';
         this.load.image("resetIcon", '/assets/svg/reset.svg');
         this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
         this.load.svg('cursorImage', '/assets/svg/pencil.svg');
+        this.load.image('colorButton', '/assets/color_button.png');
     }
 
     function create() {
@@ -141,7 +153,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){
@@ -202,10 +214,7 @@ import Layout from '../../layouts/Layout.astro';
             retryButton.setInteractive().on('pointerdown', () => {
                 window.location.reload();
             })
-            const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
-                font: '600 20px Quicksand',
-                fill: 'blue'
-            }).setDepth(1);
+            const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: 'blue'}).setDepth(1);
             submitNotic.setVisible(false);
             // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
             // font: '600 30px Quicksand',
@@ -230,7 +239,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{
@@ -245,9 +254,28 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.style.display = 'flex';
             colorContainer.style.marginBottom = '15px';
             if(!isMobile){
-                colorContainer.style.top = '25%';
+                // colorContainer.style.top = '25%';
                 colorContainer.style.flexDirection = 'column'; 
             }
+
+            if(isMobile){
+                colorContainer.style.display = 'none';
+            }
+
+            let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
+            if(!isMobile){
+                colorViewButton.setVisible(false);
+            }
+            
+            colorViewButton.setInteractive().on('pointerdown', () => {
+                if(colorContainer.style.display === 'block') {
+                    colorContainer.style.display = 'none';
+                }else{
+                    colorContainer.style.display = 'block';
+                }
+            });
+            
+            
             // Create the color picker
             const colorPicker = document.createElement('input');
             colorPicker.type = 'color';
@@ -278,7 +306,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;
@@ -286,8 +314,9 @@ import Layout from '../../layouts/Layout.astro';
             // Create a container div for the color buttons
             const colorButtonsContainer = document.createElement('div');
             colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
+            colorButtonsContainer.style.flexDirection = 'column'; 
             if(!isMobile){
-                colorButtonsContainer.style.flexDirection = 'column'; 
+                // colorButtonsContainer.style.flexDirection = 'column'; 
             }
             // Align the color buttons to the left of the viewport
             const buttonX = 30; // Adjusted position (e.g., 10px from the left)
@@ -318,13 +347,127 @@ import Layout from '../../layouts/Layout.astro';
                     button.style.width = `45px`;
                     button.style.height = `45px`;
                 }
-                if(isMobile){
-                    button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
-                } else{
-                    // button.innerHTML = `<svg height="100px" width="100px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(45)matrix(1, 0, 0, 1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#EDF0F2;" d="M448.017,158.39l-47.207,47.207c-6.488,6.487-17.064,6.541-23.603,0l-70.81-70.81 c-6.57-6.569-6.57-17.146,0-23.603l47.207-47.207L448.017,158.39z"></path> <path style="fill:#DAE1E6;" d="M448.017,158.39l-47.207-47.207l-59.008,59.009l35.404,35.405c6.54,6.541,17.115,6.486,23.603,0 L448.017,158.39z"></path> <path style="fill:#61DAF2;" d="M75.704,507.103L4.889,436.295c-6.493-6.493-6.535-17.086,0.011-23.632l47.318-47.209 c6.523-6.502,17.081-6.508,23.605,0.017l70.815,70.809c6.493,6.493,6.535,17.086-0.011,23.632l-47.318,47.209 C92.774,513.633,82.229,513.627,75.704,507.103z"></path> <path style="fill:#45C7E6;" d="M75.704,507.103c6.523,6.523,17.07,6.529,23.605,0.017l47.318-47.209 c6.547-6.547,6.504-17.139,0.011-23.632l-35.463-35.46l-70.879,70.879L75.704,507.103z"></path> <path style="fill:${color};" d="M134.833,471.704l-94.431-94.424L318.197,99.367l94.418,94.425L134.833,471.704z"></path> <polygon style="fill:#05b3a470;" points="134.833,471.703 412.616,193.792 365.412,146.584 87.56,424.434 "></polygon> <path style="fill:${color};" d="M511.925,18.105c-0.223,3.451-8.016,84.393-63.907,140.285l-94.414-94.414 C409.495,8.085,490.437,0.291,493.888,0.067c5.011-0.445,9.798,1.337,13.25,4.789C510.7,8.307,512.37,13.206,511.925,18.105z"></path> <path style="fill:#05b3a40;" d="M448.017,158.39c55.891-55.891,63.685-136.833,63.907-140.285c0.445-4.899-1.225-9.798-4.786-13.249 L400.812,111.183L448.017,158.39z"></path> </g></svg>`;
+                button.innerHTML = `
+                                <svg width="125" height="24" viewBox="0 0 125 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                    <path d="M121.521 12.0599C121.821 10.2699 122.901 10.5299 122.901 10.5299C122.901 10.5299 123.821 11.3399 124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.611 15.3799 121.231 13.7699 121.521 12.0599Z" fill="${color}"/>
+                                    <g style="mix-blend-mode:multiply">
+                                    <path d="M124.161 12.3899C124.441 13.2899 124.161 14.4499 123.471 15.1399C122.811 15.3199 121.861 14.4199 121.571 13.2199C123.241 13.6699 124.161 12.3899 124.161 12.3899Z" fill="url(#paint1_linear_3573_1528)"/>
+                                    </g>
+                                    <g style="mix-blend-mode:screen" opacity="0.6">
+                                    <path d="M122.791 10.5199C122.791 10.5199 121.651 10.4399 121.491 12.3699C121.491 12.3699 121.591 10.9699 122.791 10.5199Z" fill="#F8F8F7"/>
+                                    </g>
+                                    <path d="M-33.199 19.2499C-34.279 17.1299 -35.079 14.9299 -34.989 12.5199C-34.939 11.0099 -34.659 8.80989 -33.869 7.47989C-33.869 7.47989 -30.569 1.92989 -26.809 1.39989L95.731 0.839893C95.731 0.839893 88.811 5.8299 90.831 14.2499C92.581 21.5899 95.611 23.1699 95.611 23.1699C95.611 23.1699 -27.549 23.9999 -27.699 23.9999C-30.259 24.0199 -32.189 21.2099 -33.199 19.2499Z" fill="${color}"/>
+                                    <path d="M90.8307 14.2499C88.8107 5.82992 95.7307 0.839922 95.7307 0.839922C95.7307 0.839922 96.5407 0.649921 97.0507 1.30992C97.5507 1.96992 96.9307 22.8199 96.9307 22.8199C96.9307 22.8199 96.1707 23.1699 95.6207 23.1699C95.6207 23.1699 92.5907 21.5899 90.8407 14.2499H90.8307Z" fill="#ffffff"/>
+                                    <path d="M92.4112 13.1799C91.3612 6.26989 97.0512 1.30989 97.0512 1.29988L122.901 10.5299C122.901 10.5299 121.821 10.2699 121.521 12.0599C121.231 13.7699 122.611 15.3799 123.471 15.1399C123.351 15.2599 123.221 15.3799 123.071 15.4699C122.231 15.9699 102.251 21.3799 96.9212 22.8199C96.0312 21.9799 93.2812 18.9599 92.4112 13.1799Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:screen" opacity="0.7" d="M94.4812 1.94991L-30.1688 3.0899C-29.1588 2.2499 -28.0088 1.5699 -26.8188 1.3999L95.7212 0.839905C95.7212 0.839905 95.2012 1.21991 94.4912 1.93991C94.4912 1.93991 94.4812 1.93991 94.4712 1.94991H94.4812Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:multiply" d="M92.5108 19.1599C94.0408 22.3399 95.6108 23.1699 95.6108 23.1699C95.6108 23.1699 -27.5492 23.9999 -27.6992 23.9999C-30.2592 24.0199 -32.1892 21.2099 -33.1992 19.2499L92.5108 19.1599Z" fill="url(#paint6_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" opacity="0.8" d="M92.5209 19.1599C93.9909 19.8999 94.2509 19.0799 94.2509 19.0799C95.2909 21.1199 96.4109 22.3299 96.9209 22.8199C96.9209 22.8199 96.1609 23.1699 95.6109 23.1699C95.6109 23.1699 94.0509 22.3399 92.5109 19.1599H92.5209Z" fill="url(#paint7_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" d="M94.251 19.0799L121.591 13.2999C121.901 14.4599 122.831 15.3199 123.481 15.1399C123.361 15.2599 123.231 15.3799 123.081 15.4699C122.241 15.9699 102.261 21.3799 96.931 22.8199C96.421 22.3299 95.291 21.1199 94.261 19.0799H94.251Z" fill="url(#paint8_linear_3573_1528)"/>
+                                    <g style="mix-blend-mode:screen" opacity="0.1">
+                                    <path d="M95.9608 2.42987C95.9608 2.42987 95.0908 1.32987 94.5008 1.92987C95.2108 1.20987 95.7308 0.82987 95.7308 0.82987C95.7308 0.82987 96.5408 0.639869 97.0508 1.29987C97.0508 1.29987 96.5908 1.70987 95.9708 2.42987H95.9608Z" fill="${color}"/>
+                                    </g>
+                                    <path opacity="0.4" d="M95.9609 2.42987C96.5909 1.70987 97.0409 1.29987 97.0409 1.29987L122.901 10.5299C122.901 10.5299 122.271 10.3899 121.841 11.1199L121.651 11.0799L95.9609 2.43987V2.42987Z" fill="${color}"/>
+                                    <path style="mix-blend-mode:overlay" opacity="0.8" d="M93.0608 7.24991L91.4508 6.39991L-34.4192 8.76991C-34.2692 8.29991 -34.0892 7.84991 -33.8692 7.47991C-33.8692 7.47991 -33.4192 6.72991 -32.6692 5.74991L92.3308 4.69991L93.8808 5.44991L121.521 12.0599C121.461 12.4199 121.481 12.7699 121.551 13.0999L93.0608 7.24991Z" fill="url(#paint10_linear_3573_1528)"/>
+                                    <path d="M77.6709 0.759924L81.1909 0.739923C78.8909 3.42992 72.7809 12.3099 80.8009 23.3399C79.8809 23.3399 78.9309 23.3499 77.9509 23.3599C69.8509 12.6599 75.1409 3.90992 77.6709 0.759924Z" fill="url(#paint11_linear_3573_1528)"/>
+                                    <path d="M-1.92906 1.1199L77.6809 0.759903C75.1509 3.9199 69.8609 12.6699 77.9609 23.3599C56.9909 23.4999 21.8709 23.7399 -2.36906 23.8999C-10.7591 12.5699 -3.86906 3.3299 -1.92906 1.1199Z" fill="${color}"/>
+                                    <path opacity="0.6" d="M6.38071 11.5899L58.1407 10.6999C58.1407 10.6999 65.4307 9.98993 66.7607 14.0799C66.7607 14.0799 67.9207 18.5799 62.8807 19.4999L5.36071 19.6799C5.36071 19.6799 2.74072 19.7899 1.57072 18.0199C0.400719 16.2499 1.20071 12.3099 6.38071 11.5999V11.5899Z" fill="#ffffff"/>
+                                    <path d="M7.50074 11.4999L56.8107 10.6499C56.8107 10.6499 63.7607 9.97992 65.0207 13.8699C65.0207 13.8699 66.1207 18.1599 61.3207 19.0299L6.53074 19.1999C6.53074 19.1999 4.04074 19.2999 2.92074 17.6199C1.80074 15.9299 2.57074 12.1799 7.50074 11.4999Z" fill="#ffffff70"/>
+                                    <g opacity="0.6">
+                                    <g style="mix-blend-mode:screen" opacity="0.8">
+                                    <path d="M94.1011 2.33987C94.1011 2.33987 89.2511 6.86987 90.7611 13.9899C90.7611 13.9899 89.4911 7.60987 94.1011 2.33987Z" fill="#F8F8F7"/>
+                                    </g>
+                                    <g style="mix-blend-mode:screen" opacity="0.8">
+                                    <path d="M94.7212 4.03987C94.7212 4.03987 91.3312 8.57987 92.4612 13.5499C92.4612 13.5499 91.2712 10.2599 94.7212 4.03987Z" fill="#F8F8F7"/>
+                                    </g>
+                                    </g>
+                                    <path style="mix-blend-mode:screen" opacity="0.8" d="M79.6012 2.07988C79.6012 2.07988 77.3112 4.52988 76.5512 7.60988C76.5512 7.60988 76.4412 9.19988 74.3912 9.06988C72.3412 8.94988 -5.1188 10.3099 -5.1188 10.3099C-5.1188 10.3099 -7.9988 10.9699 -8.3088 8.83988C-8.6088 6.70988 -6.1188 2.34988 -4.29881 2.04988C-2.47881 1.75988 78.1912 1.50988 78.1912 1.50988C78.1912 1.50988 80.2512 1.28988 79.6012 2.06988V2.07988Z" fill="url(#paint14_linear_3573_1528)"/>
+                                    <path style="mix-blend-mode:multiply" d="M74.5509 17.1199C75.2209 19.0999 76.3109 21.1899 77.9609 23.3699C56.9909 23.5099 21.8709 23.7499 -2.36906 23.9099C-4.14906 21.5099 -5.23907 19.1999 -5.82907 17.0299L74.5609 17.1199H74.5509Z" fill="url(#paint15_linear_3573_1528)"/>
+                                    <defs>
+                                    <linearGradient id="paint0_linear_3573_1528" x1="123.151" y1="13.9754" x2="122.087" y2="9.86632" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CA3418"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint1_linear_3573_1528" x1="124.053" y1="23.1306" x2="122.178" y2="6.751" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint2_linear_3573_1528" x1="30.7266" y1="22.0303" x2="30.1754" y2="0.66354" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.11" stop-color="#5E1104"/>
+                                    <stop offset="0.55" stop-color="#DE3313"/>
+                                    <stop offset="1" stop-color="#EA562A"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint3_linear_3573_1528" x1="98.7993" y1="14.0938" x2="90.164" y2="7.46254" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CC361A"/>
+                                    <stop offset="0.59" stop-color="#DA4727"/>
+                                    <stop offset="0.65" stop-color="#E35330"/>
+                                    <stop offset="0.74" stop-color="#E95A35"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint4_linear_3573_1528" x1="106.626" y1="23.7951" x2="109.063" y2="2.27873" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.12" stop-color="#881913"/>
+                                    <stop offset="0.53" stop-color="#CA3418"/>
+                                    <stop offset="1" stop-color="#EB5C37"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint5_linear_3573_1528" x1="32.7047" y1="1.02997" x2="33.1363" y2="8.59623" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.1" stop-color="white"/>
+                                    <stop offset="0.72" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint6_linear_3573_1528" x1="31.0748" y1="27.8663" x2="31.2566" y2="15.6366" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint7_linear_3573_1528" x1="95.4797" y1="23.146" x2="93.4037" y2="17.3432" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint8_linear_3573_1528" x1="109.97" y1="21.5463" x2="107.895" y2="13.3528" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="#721C0D"/>
+                                    <stop offset="0.35" stop-color="#491C0E"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint9_linear_3573_1528" x1="109.12" y1="7.20142" x2="109.703" y2="5.67219" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.28" stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint10_linear_3573_1528" x1="44.6929" y1="-6.07285" x2="42.3312" y2="28.5009" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint11_linear_3573_1528" x1="76.7851" y1="25.5965" x2="78.0173" y2="0.368542" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#6D6D6C"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint12_linear_3573_1528" x1="35.6096" y1="26.5751" x2="36.1045" y2="-8.47478" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.11" stop-color="#5E1104"/>
+                                    <stop offset="0.55" stop-color="#CF0F14"/>
+                                    <stop offset="1" stop-color="#E40426"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint13_linear_3573_1528" x1="34.2885" y1="23.4606" x2="32.9234" y2="2.31828" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#6D6D6C"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint14_linear_3573_1528" x1="35.7513" y1="-3.06963" x2="35.62" y2="10.0918" gradientUnits="userSpaceOnUse">
+                                    <stop stop-color="white"/>
+                                    <stop offset="0.9" stop-color="white"/>
+                                    </linearGradient>
+                                    <linearGradient id="paint15_linear_3573_1528" x1="36.0594" y1="24.0621" x2="36.0012" y2="15.0485" gradientUnits="userSpaceOnUse">
+                                    <stop offset="0.03" stop-color="#9D3D3D"/>
+                                    <stop offset="0.89" stop-color="white"/>
+                                    </linearGradient>
+                                    </defs>
+                                </svg>`;
+                // if(isMobile){
+                //     button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
+                // } else{
+                //     // button.innerHTML = `<svg height="100px" width="100px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(45)matrix(1, 0, 0, 1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:#EDF0F2;" d="M448.017,158.39l-47.207,47.207c-6.488,6.487-17.064,6.541-23.603,0l-70.81-70.81 c-6.57-6.569-6.57-17.146,0-23.603l47.207-47.207L448.017,158.39z"></path> <path style="fill:#DAE1E6;" d="M448.017,158.39l-47.207-47.207l-59.008,59.009l35.404,35.405c6.54,6.541,17.115,6.486,23.603,0 L448.017,158.39z"></path> <path style="fill:#61DAF2;" d="M75.704,507.103L4.889,436.295c-6.493-6.493-6.535-17.086,0.011-23.632l47.318-47.209 c6.523-6.502,17.081-6.508,23.605,0.017l70.815,70.809c6.493,6.493,6.535,17.086-0.011,23.632l-47.318,47.209 C92.774,513.633,82.229,513.627,75.704,507.103z"></path> <path style="fill:#45C7E6;" d="M75.704,507.103c6.523,6.523,17.07,6.529,23.605,0.017l47.318-47.209 c6.547-6.547,6.504-17.139,0.011-23.632l-35.463-35.46l-70.879,70.879L75.704,507.103z"></path> <path style="fill:${color};" d="M134.833,471.704l-94.431-94.424L318.197,99.367l94.418,94.425L134.833,471.704z"></path> <polygon style="fill:#05b3a470;" points="134.833,471.703 412.616,193.792 365.412,146.584 87.56,424.434 "></polygon> <path style="fill:${color};" d="M511.925,18.105c-0.223,3.451-8.016,84.393-63.907,140.285l-94.414-94.414 C409.495,8.085,490.437,0.291,493.888,0.067c5.011-0.445,9.798,1.337,13.25,4.789C510.7,8.307,512.37,13.206,511.925,18.105z"></path> <path style="fill:#05b3a40;" d="M448.017,158.39c55.891-55.891,63.685-136.833,63.907-140.285c0.445-4.899-1.225-9.798-4.786-13.249 L400.812,111.183L448.017,158.39z"></path> </g></svg>`;
 
-                    button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
-                }
+                //     button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+                // }
                 button.style.marginRight = `${buttonSpacing}px`; 
                     button.addEventListener('click', () => {
                     // Remove the border from the previously selected button, if any
@@ -345,10 +488,10 @@ import Layout from '../../layouts/Layout.astro';
                         button.style.marginTop = '5px';
                         button.style.marginBottom = '5px';
                     } else{
-                        button.style.border = "2px solid";
-                        button.style.borderColor = color;
-                        button.style.boxShadow = '5px 10px 30px #7c4c2390';
-                        button.style.borderRadius = '20%';
+                        // button.style.border = "2px solid";
+                        // button.style.borderColor = color;
+                        // button.style.boxShadow = '5px 10px 30px #7c4c2390';
+                        // button.style.borderRadius = '20%';
                     }
                     // Update the selectedButton variable to the current button
                     selectedButton = button;
@@ -390,9 +533,15 @@ import Layout from '../../layouts/Layout.astro';
             // clearButton.style.marginRight = '10px';
             if(isMobile){
                 clearButton.style.padding = '2px 8px';
-                buttonsContainer.style.top = '17%';
+                buttonsContainer.style.top = '100px';
+                buttonsContainer.style.marginLeft = '30px';
+                clearButton.style.marginTop = '-15px';
+                
+            }else if(isTab){
+                clearButton.style.marginTop = '-100px';
             } else {
                 clearButton.style.padding = '5px 10px';
+                clearButton.style.marginTop = '-115px';
             }        
             // clearButton.style.fontWeight = 'bold';
             // clearButton.style.borderRadius = '20%';
@@ -400,6 +549,19 @@ import Layout from '../../layouts/Layout.astro';
             clearButton.addEventListener('click', () => {
                 clearDrawing();
             }); 
+
+            if(isMobile){
+                clearButton.style.display = 'none';
+            }
+
+            colorViewButton.setInteractive().on('pointerdown', () => {
+                if(clearButton.style.display === 'block') {
+                    clearButton.style.display = 'none';
+                }else{
+                    clearButton.style.display = 'block';
+                }
+            });
+
             // Create the Eraser button
             const eraserButton = document.createElement('button');
             // eraserButton.textContent = 'Eraser';
@@ -444,7 +606,7 @@ import Layout from '../../layouts/Layout.astro';
             // sliderContainer.style.top = '25%';
             sliderContainer.style.left = '100%';
             if(!isMobile){
-                sliderContainer.style.marginLeft = '-75px'
+                // sliderContainer.style.marginLeft = '-75px'
                 sliderContainer.style.marginTop = '15px'
             }
 
@@ -455,6 +617,9 @@ import Layout from '../../layouts/Layout.astro';
             slider.max = '80';
             slider.value = brushSize.toString();
             slider.className = 'slider';
+            slider.style.transform = 'rotate(-90deg)';
+            slider.style.marginTop = '70px';
+            slider.style.marginLeft = '-30px';
             // slider.style.width = `${window.innerWidth / 2}px`;
             slider.addEventListener('input', (event) => {
                 brushSize = parseInt(event.target.value);
@@ -462,7 +627,8 @@ import Layout from '../../layouts/Layout.astro';
                 slider.style.backgroundColor = '#05b3a4';
             });
             sliderContainer.appendChild(slider);
-            buttonsContainer.appendChild(sliderContainer);
+            // buttonsContainer.appendChild(sliderContainer);
+            colorContainer.appendChild(sliderContainer);
             
             this.input.on('pointerdown', () => {
                 isDrawing = true;
diff --git a/src/pages/guided-tracing/0.astro b/src/pages/guided-tracing/0.astro
index 6087e4a..162f86c 100644
--- a/src/pages/guided-tracing/0.astro
+++ b/src/pages/guided-tracing/0.astro
@@ -8,8 +8,9 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
-<script is:inline>
-  const isMobile = window.innerWidth <= 768;
+<script src="/saveGameData.js" is:inline></script>
+<script is:inline> 
+  const isMobile = window.innerWidth <= 768; 
   const drawingZone = {
     x: isMobile ? 0 : window.innerWidth / 4,
     y: window.innerHeight / 4,
@@ -41,7 +42,13 @@ import Layout from "../../layouts/Layout.astro";
   let isDrawing = false;
   let formattedDateTime;
   let animatedLetter;
-  let gameStartTime = "stat timr here";
+  let scoreTotal = 0;
+  
+  // const urls = window.location.href;
+  // const gameNames = urls.split('/');
+  // const gameTypes = gameNames[3].split('?id=');
+  // console.log(gameTypes[0]);
+
 
     if(isMobile){
       cloudeSize = 200;
@@ -120,35 +127,6 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('canvasStand', '/assets/stand2.png');
   }
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,10 +149,8 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
-        submitNotic.setVisible(true);
-        // windowLoad();
-        submitUserData();
+        submitNotic.setVisible(false);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 0", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -270,7 +246,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..256ab63 100644
--- a/src/pages/guided-tracing/1.astro
+++ b/src/pages/guided-tracing/1.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "stat timr here";
 
@@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -165,13 +138,11 @@ import Layout from "../../layouts/Layout.astro";
         }
       });
 
-      submitButton.setVisible(false);
+       submitButton.setVisible(false);
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
-        submitButton.setVisible(false);
-        submitNotic.setVisible(true);
-        // windowLoad();
-        submitUserData();
+        submitNotic.setVisible(false);
+        submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 1", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -270,7 +241,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..cbfc4d4 100644
--- a/src/pages/guided-tracing/2.astro
+++ b/src/pages/guided-tracing/2.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 2", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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..318a8de 100644
--- a/src/pages/guided-tracing/3.astro
+++ b/src/pages/guided-tracing/3.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 3", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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..eeda7ee 100644
--- a/src/pages/guided-tracing/4.astro
+++ b/src/pages/guided-tracing/4.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -124,35 +125,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -175,9 +148,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 4", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -274,7 +247,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..9fe949d 100644
--- a/src/pages/guided-tracing/5.astro
+++ b/src/pages/guided-tracing/5.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -125,35 +126,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -176,9 +149,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 5", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -275,7 +248,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..139ced9 100644
--- a/src/pages/guided-tracing/6.astro
+++ b/src/pages/guided-tracing/6.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 6", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -272,7 +245,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..8d6c9e4 100644
--- a/src/pages/guided-tracing/7.astro
+++ b/src/pages/guided-tracing/7.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 7", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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..27c84b7 100644
--- a/src/pages/guided-tracing/8.astro
+++ b/src/pages/guided-tracing/8.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 8", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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..3cb7f7d 100644
--- a/src/pages/guided-tracing/9.astro
+++ b/src/pages/guided-tracing/9.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Number : 9", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -272,7 +245,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..66977f3 100644
--- a/src/pages/guided-tracing/A.astro
+++ b/src/pages/guided-tracing/A.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
   
@@ -122,35 +123,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -173,9 +146,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });
@@ -264,7 +237,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..6a57c3a 100644
--- a/src/pages/guided-tracing/B.astro
+++ b/src/pages/guided-tracing/B.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : B", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -269,7 +242,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..ab7d337 100644
--- a/src/pages/guided-tracing/C.astro
+++ b/src/pages/guided-tracing/C.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : C", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -265,7 +238,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..a8ffbe4 100644
--- a/src/pages/guided-tracing/D.astro
+++ b/src/pages/guided-tracing/D.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -168,9 +141,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : D", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -268,7 +241,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..295f956 100644
--- a/src/pages/guided-tracing/E.astro
+++ b/src/pages/guided-tracing/E.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,9 +140,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : E", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -267,7 +240,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..9ef3ef4 100644
--- a/src/pages/guided-tracing/F.astro
+++ b/src/pages/guided-tracing/F.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : F", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -268,7 +241,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..be8c046 100644
--- a/src/pages/guided-tracing/G.astro
+++ b/src/pages/guided-tracing/G.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -110,41 +111,8 @@ import Layout from "../../layouts/Layout.astro";
     this.load.image('bgMobile', '/assets/bgMobile.png');
     this.load.image('canvasStand', '/assets/stand2.png');
   }
-  window.onload = function() {
-    currentDate = new Date();
-    formattedDateTime = currentDate.toLocaleString();
-    // console.log("Page loaded on: " + formattedDateTime);
-  };
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,9 +135,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : G", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -267,7 +235,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..d2fa5a1 100644
--- a/src/pages/guided-tracing/H.astro
+++ b/src/pages/guided-tracing/H.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : H", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -269,7 +242,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..5d6289e 100644
--- a/src/pages/guided-tracing/I.astro
+++ b/src/pages/guided-tracing/I.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+     
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : I", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -269,7 +242,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..6262196 100644
--- a/src/pages/guided-tracing/J.astro
+++ b/src/pages/guided-tracing/J.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+     
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -166,9 +139,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : J", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -264,7 +237,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..b57ce6e 100644
--- a/src/pages/guided-tracing/K.astro
+++ b/src/pages/guided-tracing/K.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-        };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : K", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -269,7 +242,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..b5cfe5e 100644
--- a/src/pages/guided-tracing/L.astro
+++ b/src/pages/guided-tracing/L.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-        };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : L", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -266,7 +239,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..c0e5ea7 100644
--- a/src/pages/guided-tracing/M.astro
+++ b/src/pages/guided-tracing/M.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-        };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : M", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -268,7 +241,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..438ce1d 100644
--- a/src/pages/guided-tracing/N.astro
+++ b/src/pages/guided-tracing/N.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -121,35 +122,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-        };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -168,13 +141,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : N", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -270,7 +243,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..4e0e4c9 100644
--- a/src/pages/guided-tracing/O.astro
+++ b/src/pages/guided-tracing/O.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-        };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -162,13 +135,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : O", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -266,7 +239,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..093866e 100644
--- a/src/pages/guided-tracing/P.astro
+++ b/src/pages/guided-tracing/P.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : P", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -268,7 +241,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..29f8575 100644
--- a/src/pages/guided-tracing/Q.astro
+++ b/src/pages/guided-tracing/Q.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-      const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+       
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : Q", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -268,7 +241,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..9081e1e 100644
--- a/src/pages/guided-tracing/R.astro
+++ b/src/pages/guided-tracing/R.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -123,35 +124,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,13 +143,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : R", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -272,7 +245,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..dcb5fc2 100644
--- a/src/pages/guided-tracing/S.astro
+++ b/src/pages/guided-tracing/S.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -162,13 +135,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : S", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -266,7 +239,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..b36e285 100644
--- a/src/pages/guided-tracing/T.astro
+++ b/src/pages/guided-tracing/T.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : T", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -266,7 +239,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..5f2b617 100644
--- a/src/pages/guided-tracing/U.astro
+++ b/src/pages/guided-tracing/U.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -115,35 +116,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -162,13 +135,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : U", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -265,7 +238,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..305c325 100644
--- a/src/pages/guided-tracing/V.astro
+++ b/src/pages/guided-tracing/V.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : V", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -267,7 +240,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..fe6bef3 100644
--- a/src/pages/guided-tracing/W.astro
+++ b/src/pages/guided-tracing/W.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : W", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -267,7 +240,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..c1b7505 100644
--- a/src/pages/guided-tracing/X.astro
+++ b/src/pages/guided-tracing/X.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : X", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -267,7 +240,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..7bc0fda 100644
--- a/src/pages/guided-tracing/Y.astro
+++ b/src/pages/guided-tracing/Y.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -121,35 +122,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -168,13 +141,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : Y", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -269,7 +242,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..eeb922e 100644
--- a/src/pages/guided-tracing/Z.astro
+++ b/src/pages/guided-tracing/Z.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : Z", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -268,7 +241,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..bfed82c 100644
--- a/src/pages/guided-tracing/a.astro
+++ b/src/pages/guided-tracing/a.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     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', });
@@ -270,7 +243,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..e860922 100644
--- a/src/pages/guided-tracing/b.astro
+++ b/src/pages/guided-tracing/b.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : b", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -270,7 +243,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..c95fd2b 100644
--- a/src/pages/guided-tracing/c.astro
+++ b/src/pages/guided-tracing/c.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : c", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -270,7 +243,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..db52ce9 100644
--- a/src/pages/guided-tracing/d.astro
+++ b/src/pages/guided-tracing/d.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : d", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -272,7 +245,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..dcb44c8 100644
--- a/src/pages/guided-tracing/e.astro
+++ b/src/pages/guided-tracing/e.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : e", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -272,7 +245,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..54fac0b 100644
--- a/src/pages/guided-tracing/f.astro
+++ b/src/pages/guided-tracing/f.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -169,9 +142,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : f", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -270,7 +243,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..bdf9f26 100644
--- a/src/pages/guided-tracing/g.astro
+++ b/src/pages/guided-tracing/g.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : g", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -272,7 +245,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..6ee5903 100644
--- a/src/pages/guided-tracing/h.astro
+++ b/src/pages/guided-tracing/h.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-        // console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+    
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : h", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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..f60e802 100644
--- a/src/pages/guided-tracing/i.astro
+++ b/src/pages/guided-tracing/i.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+     
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,9 +144,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : i", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -272,7 +245,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..5c0e2e2 100644
--- a/src/pages/guided-tracing/j.astro
+++ b/src/pages/guided-tracing/j.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+     
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -170,9 +143,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : j", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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..9c050e8 100644
--- a/src/pages/guided-tracing/k.astro
+++ b/src/pages/guided-tracing/k.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -122,35 +123,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-      fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-          method: 'POST',
-          headers: {
-          'Content-Type' : 'application/json'
-          },
-          body: JSON.stringify(userData)
-      })
-      .then(response => {
-          if(response.ok){
-          // console.log('Data Saved', response)
-          } else{
-          // console.log('Something Wrong', response)
-          }
-      })
-      .catch(error => {
-          console.error('An error occured', error)
-      }); 
-      };
+     
       const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -173,9 +146,9 @@ import Layout from "../../layouts/Layout.astro";
       submitButton.setInteractive().on('pointerdown', () => {
         // console.log('Clicked');
         submitButton.setVisible(false);
-        submitNotic.setVisible(true);
+        submitNotic.setVisible(false);
         // windowLoad();
-        submitUserData();
+submitUserData(this);
       })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : k", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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..df55921 100644
--- a/src/pages/guided-tracing/l.astro
+++ b/src/pages/guided-tracing/l.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -117,35 +118,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-        };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -164,13 +137,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : l", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -269,7 +242,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..e4a28cd 100644
--- a/src/pages/guided-tracing/m.astro
+++ b/src/pages/guided-tracing/m.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-        };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : m", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -269,7 +242,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..feef64c 100644
--- a/src/pages/guided-tracing/n.astro
+++ b/src/pages/guided-tracing/n.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-        };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : n", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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..71c846b 100644
--- a/src/pages/guided-tracing/o.astro
+++ b/src/pages/guided-tracing/o.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-        };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : o", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -268,7 +241,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..e63056e 100644
--- a/src/pages/guided-tracing/p.astro
+++ b/src/pages/guided-tracing/p.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -38,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : p", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -268,7 +241,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..52152cf 100644
--- a/src/pages/guided-tracing/q.astro
+++ b/src/pages/guided-tracing/q.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -38,7 +39,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -118,35 +119,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -165,13 +138,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : q", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -270,7 +243,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..b2a8a07 100644
--- a/src/pages/guided-tracing/r.astro
+++ b/src/pages/guided-tracing/r.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : r", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -272,7 +245,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..90994d6 100644
--- a/src/pages/guided-tracing/s.astro
+++ b/src/pages/guided-tracing/s.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -116,35 +117,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -163,13 +136,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : s", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -268,7 +241,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..8ce9485 100644
--- a/src/pages/guided-tracing/t.astro
+++ b/src/pages/guided-tracing/t.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : t", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -272,7 +245,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..7820e27 100644
--- a/src/pages/guided-tracing/u.astro
+++ b/src/pages/guided-tracing/u.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : u", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -270,7 +243,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..5b0faa3 100644
--- a/src/pages/guided-tracing/v.astro
+++ b/src/pages/guided-tracing/v.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : v", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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..49c0b64 100644
--- a/src/pages/guided-tracing/w.astro
+++ b/src/pages/guided-tracing/w.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer, fourthLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : w", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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..9952932 100644
--- a/src/pages/guided-tracing/x.astro
+++ b/src/pages/guided-tracing/x.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -120,35 +121,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -167,13 +140,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : x", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -272,7 +245,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..7e01d33 100644
--- a/src/pages/guided-tracing/y.astro
+++ b/src/pages/guided-tracing/y.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 
@@ -119,35 +120,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -166,13 +139,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : y", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -271,7 +244,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..167a22b 100644
--- a/src/pages/guided-tracing/z.astro
+++ b/src/pages/guided-tracing/z.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
     </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
   const isMobile = window.innerWidth <= 768;
   const drawingZone = {
@@ -39,7 +40,7 @@ import Layout from "../../layouts/Layout.astro";
   let firstLayer, secondLayer, thirdLayer;
   let graphics;
   let animatedLetter;
-  let isDrawing = false;
+let scoreTotal = 0;  let isDrawing = false;
   let formattedDateTime;
   let gameStartTime = "start time here";
 //   let x = 100;
@@ -124,35 +125,7 @@ import Layout from "../../layouts/Layout.astro";
   }
 
   function create() {
-    const URL = window.location.href;
-      const urlSplit = URL.split('/');
-      const gameName = urlSplit[3] + '-' + urlSplit[4]
-      let userData = {
-                'user': 'guided-tracing@beanstalkedu.com',
-        'game_name': gameName,
-        'starts': formattedDateTime,
-        'game_start' : gameStartTime,
-      };
-      function submitUserData() {
-       //  console.log(userData)
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-            'Content-Type' : 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if(response.ok){
-            // console.log('Data Saved', response)
-            } else{
-            // console.log('Something Wrong', response)
-            }
-        })
-        .catch(error => {
-            console.error('An error occured', error)
-        }); 
-      };
+     
         const submitNotic = this.add.text(noticeWidth, noticeHeight, 'Submitted Successfully', {
           font: '600 20px Quicksand',
           fill: '#05b3a4'
@@ -171,13 +144,13 @@ import Layout from "../../layouts/Layout.astro";
             fill: true
           }
         });
-        submitButton.setVisible(false);
+         submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
           submitButton.setVisible(false);
-          submitNotic.setVisible(true);
+          submitNotic.setVisible(false);
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
     this.add.text(customWidth / 10, 20, "Letter : z", { font: '700 40px quicksand', fill: '#05b3a4', });
@@ -273,7 +246,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/tick/tick_phonics_v1.astro b/src/pages/tick/tick_phonics_v1.astro
index 05a05b6..dfcf5a6 100644
--- a/src/pages/tick/tick_phonics_v1.astro
+++ b/src/pages/tick/tick_phonics_v1.astro
@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,56 +24,56 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] my-6 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="itemForm" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a1" class="round-checkbox-label">
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label1"></p>
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
                                 
-                                <label for="a2" class="round-checkbox-label">
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label2"></p>
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a3" class="round-checkbox-label">
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label3"></p>
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                                 
-                                <label for="a4" class="round-checkbox-label">
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label4"></p>
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
                             </div>
                             <div class="flex flex-col gap-6 place-items-center">
-                                <label for="a5" class="round-checkbox-label">
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label5"></p>
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
                                 
-                                <label for="a6" class="round-checkbox-label">
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label6"></p>
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
@@ -91,14 +91,16 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_6/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            console.log(gameData)
+            // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
                 document.getElementById("label1").innerHTML = gameData.label1;
@@ -145,14 +147,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
@@ -175,13 +175,14 @@ import Layout from "../../layouts/Layout.astro";
 
         // Move the userData object creation inside the saveUserData function if needed
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        // console.log(userData);
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -192,7 +193,7 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
@@ -386,7 +387,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{
diff --git a/src/pages/tick/tick_phonics_v2.astro b/src/pages/tick/tick_phonics_v2.astro
index 7908b99..f6c6372 100644
--- a/src/pages/tick/tick_phonics_v2.astro
+++ b/src/pages/tick/tick_phonics_v2.astro
@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,80 +24,80 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm" class="flex flex-col justify-center">
                         <div id="" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a1" class="round-checkbox-label">
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label1"></p>
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
     
-                                <label for="a2" class="round-checkbox-label">
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label2"></p>
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
     
-                                <label for="a3" class="round-checkbox-label">
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label3"></p>
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a4" class="round-checkbox-label">
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label4"></p>
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
     
-                                <label for="a5" class="round-checkbox-label">
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label5"></p>
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
     
-                                <label for="a6" class="round-checkbox-label">
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label6"></p>
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
                             <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a7" class="round-checkbox-label">
+                                <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image7" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label7"></p>
+                                        <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label7" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
     
-                                <label for="a8" class="round-checkbox-label">
+                                <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image8" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label8"></p>
+                                        <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label8" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
     
-                                <label for="a9" class="round-checkbox-label">
+                                <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image9" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label9"></p>
+                                        <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label9" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
@@ -115,9 +115,11 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     
-    fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/tick_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -177,14 +179,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
 
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
+    function saveUserData(){
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
 
-    function saveUserData() {
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -215,14 +215,15 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            // 'game_start' : gameStartTime,
-            'score' : totalPoints,
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
+        // console.log(userData);
 
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -233,7 +234,7 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
@@ -248,173 +249,6 @@ import Layout from "../../layouts/Layout.astro";
         });
     });
 </script>
-<!-- <script is:inline>
-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
-    fetch(`https://management.beanstalkedu.com/items/game_tick_variant2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
-    .then(res => res.json())
-    .then(data => {
-        gameData = data.data;
-        // console.log(gameData);  
-        document.getElementById("gameDescription").innerHTML = gameData.description;
-        const assetsURL = 'https://management.beanstalkedu.com/assets/';
-        document.getElementById("image1").src = assetsURL + gameData.image1;
-        document.getElementById("image2").src = assetsURL + gameData.image2;
-        document.getElementById("image3").src = assetsURL + gameData.image3;
-        document.getElementById("image4").src = assetsURL + gameData.image4;
-        document.getElementById("image5").src = assetsURL + gameData.image5;
-        document.getElementById("image6").src = assetsURL + gameData.image6;
-        document.getElementById("image7").src = assetsURL + gameData.image7;
-        document.getElementById("image8").src = assetsURL + gameData.image8;
-        document.getElementById("image9").src = assetsURL + gameData.image9;
-    });
-    function checkResult2(id){
-        // alert("Matched")
-        if(id == 'image1'){
-            // console.log(gameData.a1)
-            if(gameData.a1 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image2'){
-            if(gameData.a2 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image3'){
-            if(gameData.a3 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image4'){
-            if(gameData.a4 == true){
-                var element = document.getElementById(id);
-                element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image5'){
-            if(gameData.a5 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image6'){
-            if(gameData.a6 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image7'){
-            if(gameData.a7 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image8'){
-            if(gameData.a8 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-        if(id == 'image9'){
-            if(gameData.a9 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-            }
-        };
-       
-    };
-    let url = window.location.href;
-    let urlSplit = url.split('/')
-    let gameName = urlSplit[3] +`-`+ urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-        // console.log(formatedDateTime);
-
-        // Create userData object inside the onload event
-        let userData = {
-            'f2': formatedDateTime,
-        };
-        // console.log(userData); // Now, f1 and f2 should have values
-    };
-    function generateShortUniqueID(length) {
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        let result = '';
-        for (let i = 0; i < length; i++) {
-            const randomIndex = Math.floor(Math.random() * characters.length);
-            result += characters.charAt(randomIndex);
-        }
-        return result;
-    }
-    const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
-    // console.log(shortUniqueID);
-    function saveUserData() {
-        let userData = {
-            'status' : 'published',
-            'user_id': 'tick-v2@beanstalkedu.com',
-            'game_name': gameName,
-            'game_open': formatedDateTime,
-        };
-
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if (response.ok) {
-                document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
-                // console.log('Data Saved', response);
-            } else {
-                // console.log('Something Wrong', response);
-            }
-        })
-        .catch(error => {
-            console.error('An error occurred', error);
-        });
-    }
-    document.addEventListener('DOMContentLoaded', function () {
-      const contactForm = document.getElementById('contactForm');
-      contactForm.addEventListener('submit', async function (event) {
-        event.preventDefault();
-      });
-    });
-</script> -->
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
     body{
@@ -441,7 +275,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{
diff --git a/src/pages/tick/tick_phonics_v3.astro b/src/pages/tick/tick_phonics_v3.astro
index fed84a9..3e520fd 100644
--- a/src/pages/tick/tick_phonics_v3.astro
+++ b/src/pages/tick/tick_phonics_v3.astro
@@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -22,11 +22,11 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
                 <div class="container mx-auto px-4">
                     <div class="flex flex-col">
-                        <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
+                        <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                         <!-- <p id="LearningSubArea"></p> -->
                     </div>
                     <div class="flex flex-col justify-center place-items-center">
-                        <img class="lg:w-[50%]" draggable="false" id="descImage" src="" alt="" />
+                        <img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
                         <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
                     </div>
                     <form id="contactForm" class="">
@@ -67,14 +67,16 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_v3_phonics/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_v3_phonics/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            console.log(gameData)
+            // console.log(gameData)
             document.getElementById("gameLabel").innerHTML = gameData.label;
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1, gameData.label2, gameData.label3){
@@ -82,18 +84,6 @@ import Layout from "../../layouts/Layout.astro";
                 document.getElementById("label2").innerHTML = gameData.label2;
                 document.getElementById("label3").innerHTML = gameData.label3;
             }
-            // if(gameData.label1){
-            //     document.getElementById("label1").innerHTML = gameData.label1;
-            // }
-            // if(gameData.label2){
-            //     document.getElementById("label2").innerHTML = gameData.label2;
-            // }
-            // if(gameData.label3){
-            //     document.getElementById("label3").innerHTML = gameData.label3;
-            // }
-            // document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
-            // document.getElementById('LearningSubArea').innerHTML = gameData.LearningSubArea;
-
             const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
             document.getElementById('descImage').src = assetsURL + gameData.descript_img;
             for (let i = 1; i <= 3; i++) {
@@ -121,14 +111,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+        
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3'];
         const checkboxValues = checkboxes.map(id => {
@@ -150,13 +138,14 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        // console.log(userData);
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -167,7 +156,7 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
diff --git a/src/pages/tick/v1.astro b/src/pages/tick/v1.astro
index 86edb4c..f3ef7f1 100644
--- a/src/pages/tick/v1.astro
+++ b/src/pages/tick/v1.astro
@@ -3,26 +3,25 @@ import Layout from "../../layouts/Layout.astro";
 ---
 <Layout title="">
     <main>
-        <div>
+        <div class="specific">
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
                 <div class="shadow-md">
                     <div class="container mx-auto px-4 flex flex-row place-content-between pt-6">
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
                             <button><img src="/assets/svg/cancel.svg" alt=""></button>
                         </div>
                     </div>
-                    
                     <!-- <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit"> -->
 
                 </div>
                 <div class="container mx-auto px-4">
-                    <p class="text-2xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-6 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm">
                         <div id="itemForm" class="flex flex-row place-content-between gap-4">
                             <div class="flex flex-col gap-6 place-items-center">
@@ -83,24 +82,21 @@ import Layout from "../../layouts/Layout.astro";
                     </form>
                 </div>
             </section>
-            <section class="">
-                <div class="container mx-auto px-4 flex flex-row place-content-between">
-                    <p>All rights reserved. Copyright@akademy.interakto2024</p>
-                </div>
-            </section>
-        </div>
+        </div>          
     </main>
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            console.log(gameData)
+            // console.log(gameData)
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1){
                 document.getElementById("label1").innerHTML = gameData.label1;
@@ -147,14 +143,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
-
+    
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+        
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkboxValues = checkboxes.map(id => {
@@ -174,16 +168,16 @@ import Layout from "../../layouts/Layout.astro";
                 totalPoints += 1;
             }
         });
-
         // Move the userData object creation inside the saveUserData function if needed
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        // console.log(userData);
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -194,7 +188,7 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
@@ -210,157 +204,6 @@ import Layout from "../../layouts/Layout.astro";
         });
     });
 </script>
-<!-- <script is:inline>
-
-    const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
-    fetch(`https://management.beanstalkedu.com/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
-    .then(res => res.json())
-    .then(data => {
-        gameData = data.data;
-        // console.log(gameData);  
-        document.getElementById("gameDescription").innerHTML = gameData.game_description;
-        const assetsURL = 'https://management.beanstalkedu.com/assets/';
-        document.getElementById("image1").src = assetsURL + gameData.image1;
-        document.getElementById("image2").src = assetsURL + gameData.image2;
-        document.getElementById("image3").src = assetsURL + gameData.image3;
-        document.getElementById("image4").src = assetsURL + gameData.image4;
-        document.getElementById("image5").src = assetsURL + gameData.image5;
-        document.getElementById("image6").src = assetsURL + gameData.image6;
-    });
-    function checkResult2(id){
-        // console.log(gameData.a1)
-        // alert("Matched")
-        if(id == 'image1'){
-            if( gameData.a1 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            // console.log('Value True')
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-                // console.log('Value False')
-            }
-        };
-        if(id == 'image2'){
-            if(gameData.a2 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            // console.log('Value True')
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-                // console.log('Value False')
-            }
-        };
-        if(id == 'image3'){
-            if(gameData.a3 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            // console.log('Value True')
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-                // console.log('Value False')
-            }
-        };
-        if(id == 'image4'){
-            if(gameData.a4 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            // console.log('Value True')
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-                // console.log('Value False')
-            }
-        };
-        if(id == 'image5'){
-            if(gameData.a5 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            // console.log('Value True')
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-                // console.log('Value False')
-            }
-        };
-        if(id == 'image6'){
-            if(gameData.a6 == true){
-            var element = document.getElementById(id);
-            element.classList.add("greenBorder");
-            // console.log('Value True')
-            } else{
-                var element = document.getElementById(id);
-                element.classList.add("redBorder");
-                // console.log('Value False')
-            }
-        }
-       
-    };
-    let url = window.location.href;
-    let urlSplit = url.split('/')
-    let gameName = urlSplit[3] +`-`+ urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-        // console.log(formatedDateTime);
-
-        // Create userData object inside the onload event
-        let userData = {
-            'f2': formatedDateTime,
-        };
-        // console.log(userData); // Now, f1 and f2 should have values
-    };
-    function generateShortUniqueID(length) {
-        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
-        let result = '';
-        for (let i = 0; i < length; i++) {
-            const randomIndex = Math.floor(Math.random() * characters.length);
-            result += characters.charAt(randomIndex);
-        }
-        return result;
-    }
-    const shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
-    // console.log(shortUniqueID);
-    function saveUserData() {
-        // Move the userData object creation inside the saveUserData function if needed
-        let userData = {
-            'status' : 'published',
-            'user_id': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'game_open': formatedDateTime,
-        };
-
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(userData)
-        })
-        .then(response => {
-            if (response.ok) {
-                document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
-                // console.log('Data Saved', response);
-            } else {
-                // console.log('Something Wrong', response);
-            }
-        })
-        .catch(error => {
-            console.error('An error occurred', error);
-        });
-    }
-    document.addEventListener('DOMContentLoaded', function () {
-      const contactForm = document.getElementById('contactForm');
-      contactForm.addEventListener('submit', async function (event) {
-        event.preventDefault();
-      });
-    });
-</script> -->
 <style>
     @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
     body{
@@ -388,7 +231,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{
diff --git a/src/pages/tick/v2.astro b/src/pages/tick/v2.astro
index 536a2cf..4a6c26d 100644
--- a/src/pages/tick/v2.astro
+++ b/src/pages/tick/v2.astro
@@ -10,7 +10,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -24,80 +24,80 @@ import Layout from "../../layouts/Layout.astro";
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
                     </div> -->
-                    <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
+                    <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center  font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                     <form id="contactForm" class="flex flex-col justify-center">
                         <div id="" class="flex flex-row place-content-between gap-4">
-                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a1" class="round-checkbox-label">
+                            <div class="flex flex-col gap-x-6 gap-y-2  place-items-center">
+                                <label for="a1" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label1"></p>
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label1" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
     
-                                <label for="a2" class="round-checkbox-label">
+                                <label for="a2" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label2"></p>
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label2" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
     
-                                <label for="a3" class="round-checkbox-label">
+                                <label for="a3" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label3"></p>
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label3" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
                             </div>
-                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a4" class="round-checkbox-label">
+                            <div class="flex flex-col gap-x-6 gap-y-2  place-items-center">
+                                <label for="a4" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label4"></p>
+                                        <img id="image4" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label4" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox largerCheckbox" value="a4"/>
     
-                                <label for="a5" class="round-checkbox-label">
+                                <label for="a5" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label5"></p>
+                                        <img id="image5" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label5" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox largerCheckbox" value="a5"/>
     
-                                <label for="a6" class="round-checkbox-label">
+                                <label for="a6" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label6"></p>
+                                        <img id="image6" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label6" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
                             </div>
-                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
-                                <label for="a7" class="round-checkbox-label">
+                            <div class="flex flex-col gap-x-6 gap-y-2  place-items-center">
+                                <label for="a7" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image7" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label7"></p>
+                                        <img id="image7" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label7" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox largerCheckbox" value="a7"/>
     
-                                <label for="a8" class="round-checkbox-label">
+                                <label for="a8" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image8" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label8"></p>
+                                        <img id="image8" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label8" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox largerCheckbox" value="a8"/>
     
-                                <label for="a9" class="round-checkbox-label">
+                                <label for="a9" class="round-checkbox-label text-[14px] md:text-2xl">
                                     <div class="flex flex-col place-items-center">
-                                        <img id="image9" src="" alt="" draggable="false" class="select-none" />
-                                        <p id="label9"></p>
+                                        <img id="image9" src="" alt="" draggable="false" class="select-none sm:w-[100px] h-[120px]" />
+                                        <p id="label9" class="h-[50px] overflow-y-auto"></p>
                                     </div>
                                 </label>
                                 <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox largerCheckbox" value="a9"/>
@@ -115,9 +115,11 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_variant2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -177,14 +179,11 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
         // const checkboxValues = {
         //     a1: document.getElementById('a1').checked,
         //     a2: document.getElementById('a2').checked,
@@ -215,14 +214,14 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
         let userData = {
-            'user': 'tick-v2@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            // 'game_start' : gameStartTime,
-            'score' : totalPoints,
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        // console.log(userData);
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -233,7 +232,7 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
@@ -274,7 +273,6 @@ import Layout from "../../layouts/Layout.astro";
         text-align: center;
         font-weight: bold;
         color: #7C4C23;
-        font-size: 20px;
         padding-top: 10px;
     }
     #LearningArea, #LearningSubArea_copy{
diff --git a/src/pages/tick/v3.astro b/src/pages/tick/v3.astro
index 84b02eb..19564d1 100644
--- a/src/pages/tick/v3.astro
+++ b/src/pages/tick/v3.astro
@@ -11,7 +11,7 @@ import Layout from "../../layouts/Layout.astro";
                         <div>
                             <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                         </div>
-                        <div class="flex flex-row space-x-2 pb-2">
+                        <div class="flex flex-row space-x-1 pb-2">
                             <button><img src="/assets/svg/mute.svg" alt=""></button>
                             <button><img src="/assets/svg/reset.svg" alt=""></button>
                             <button onclick="saveUserData();"><img src="/assets/svg/tick2.svg" alt=""></button>
@@ -22,33 +22,33 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
                 <div class="container mx-auto px-4">
                     <div class="flex flex-col">
-                        <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
+                        <p class="sm:text-2xl md:text-3xl lg:text-4xl text-center font-[600] text-[#60C6CB] my-4 select-none" id="gameDescription"></p>
                         <!-- <p id="LearningSubArea"></p> -->
                     </div>
                     <div class="flex flex-col justify-center place-items-center">
-                        <img class="lg:w-[50%]" draggable="false" id="descImage" src="" alt="" />
+                        <img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
                         <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
                     </div>
                     <form id="contactForm" class="">
                         <div id="itemForm" class="">
-                            <div class="flex flex-row gap-x-4 place-content-between">
+                            <div class="flex flex-row gap-x-4 place-content-between"> 
                                 <div class="flex flex-col">
                                     <label for="a1" class="round-checkbox-label">
-                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none w-[70%]" />
                                         <p id="label1"></p>
                                     </label>
                                     <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
                                 </div>
                                 <div class="flex flex-col">
                                     <label for="a2" class="round-checkbox-label">
-                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none w-[70%]" />
                                         <p id="label2"></p>
                                     </label>
                                     <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
                                 </div>
                                 <div class="flex flex-col">
                                     <label for="a3" class="round-checkbox-label">
-                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none w-[70%]" />
                                         <p id="label3"></p>
                                     </label>
                                     <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
@@ -67,14 +67,16 @@ import Layout from "../../layouts/Layout.astro";
 </Layout>
 <script is:inline>
     const params = new URLSearchParams(window.location.search);
-    const paramsID = params.get('id');
+    const gameId = params.get('id');
+    const userId = params.get('userid');
+    let startTime = Date.now();
     let gameData = null;
 
-    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_varient3/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_tick_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
-            console.log(gameData)
+            // console.log(gameData)
             document.getElementById("gameLabel").innerHTML = gameData.label;
             document.getElementById("gameDescription").innerHTML = gameData.description;
             if(gameData.label1, gameData.label2, gameData.label3){
@@ -121,14 +123,12 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4];
-    let formatedDateTime;
-
-    window.onload = function () {
-        let currentTime = new Date();
-        formatedDateTime = currentTime.toLocaleString();
-    };
 
     function saveUserData() {
+        const endTime = Date.now();
+        const timeDifference = endTime - startTime;
+        const timeDifferenceInSeconds = timeDifference / 1000;
+        
          // Get checkbox values and corresponding elements
         const checkboxes = ['a1', 'a2', 'a3'];
         const checkboxValues = checkboxes.map(id => {
@@ -150,13 +150,15 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         let userData = {
-            'user': 'tick-v1@beanstalkedu.com',
-            'game_name': gameName,
-            'starts': formatedDateTime,
-            'score': totalPoints, // Include the totalPoints in the userData
+            'gameName': gameName,
+            'gameID': gameId,
+            'userId': userId,
+            'gameTime': timeDifferenceInSeconds,
+            'score': totalPoints,
         };
-        console.log(userData);
-        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+        // console.log(userData);
+
+        fetch(`https://phaser-game-api.s38.siliconpin.com/save-data`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -167,7 +169,7 @@ import Layout from "../../layouts/Layout.astro";
                 if (response.ok) {
                     document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
                 } else {
-                    console.log('Something Wrong', response);
+                    // console.log('Something Wrong', response);
                 }
             })
             .catch(error => {
diff --git a/src/pages/tracing/index.astro b/src/pages/tracing/index.astro
index ac87607..c09ff7a 100644
--- a/src/pages/tracing/index.astro
+++ b/src/pages/tracing/index.astro
@@ -8,6 +8,7 @@ import Layout from "../../layouts/Layout.astro";
         <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
       </main>
 </Layout>
+<script src="/saveGameData.js" is:inline></script>
 <script is:inline>
 const isMobile = window.innerWidth <= 768;
 const drawingZone = {
@@ -69,7 +70,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', };
diff --git a/src/pages/tst.astro b/src/pages/tst.astro
deleted file mode 100644
index 7702ba5..0000000
--- a/src/pages/tst.astro
+++ /dev/null
@@ -1,25 +0,0 @@
----
-import Layout from "../layouts/Layout.astro";
----
-<Layout title="">
-    <div>
-        <a id="fullscreen-btn" href="/tst2" target="_blank">Next</a>
-    </div>
-</Layout>
-<script is:inline>
-     document.getElementById('fullscreen-btn').addEventListener('click', function() {
-            if (document.documentElement.requestFullscreen) {
-                document.documentElement.requestFullscreen();
-            } else if (document.documentElement.mozRequestFullScreen) { // Firefox
-                document.documentElement.mozRequestFullScreen();
-            } else if (document.documentElement.webkitRequestFullscreen) { // Chrome, Safari, and Opera
-                document.documentElement.webkitRequestFullscreen();
-            } else if (document.documentElement.msRequestFullscreen) { // IE/Edge
-                document.documentElement.msRequestFullscreen();
-            }
-        });
-
-        window.addEventListener('load', function() {
-            alert('Please click the button to go fullscreen.');
-        });
-</script>
\ No newline at end of file