diff --git a/public/assets/svg/button-icon.svg b/public/assets/svg/button-icon.svg
index 10eb6c0..17a6e4c 100644
--- a/public/assets/svg/button-icon.svg
+++ b/public/assets/svg/button-icon.svg
@@ -1 +1 @@
-<svg width="64px" height="64px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="#eceaea" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#ff0000" stroke-width="0.048"></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#0000FF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
\ No newline at end of file
+<svg width="50px" height="50px" viewBox="-2.4 -2.4 28.80 28.80" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(0,0), scale(1)"><rect x="-2.4" y="-2.4" width="28.80" height="28.80" rx="14.4" fill="" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="2" stroke-width=""></g><g id="SVGRepo_iconCarrier"> <path d="M8 12L12 16M12 16L16 12M12 16V8M22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12Z" stroke="#BB4D6A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
diff --git a/public/assets/svg/clear.svg b/public/assets/svg/clear.svg
new file mode 100644
index 0000000..d075449
--- /dev/null
+++ b/public/assets/svg/clear.svg
@@ -0,0 +1,4 @@
+<svg width="35" height="35" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="12" fill="#F5F5F5"/>
+<path d="M13.0528 5.25134C9.23531 5.14634 6.10781 8.21384 6.10781 12.0013H4.76531C4.42781 12.0013 4.26281 12.4063 4.50281 12.6388L6.59531 14.7313C6.74531 14.8813 6.97781 14.8813 7.12781 14.7313L9.22031 12.6388C9.45281 12.4063 9.28781 12.0013 8.95031 12.0013H7.60781C7.60781 9.07634 9.99281 6.71384 12.9328 6.75134C15.7228 6.78884 18.0703 9.13634 18.1078 11.9263C18.1453 14.8588 15.7828 17.2513 12.8578 17.2513C11.9203 17.2513 11.0428 16.9963 10.2778 16.5688C9.98531 16.4038 9.62531 16.4638 9.39281 16.7038C9.04781 17.0488 9.11531 17.6413 9.54281 17.8813C10.5253 18.4288 11.6503 18.7513 12.8578 18.7513C16.6453 18.7513 19.7128 15.6238 19.6078 11.8063C19.5103 8.28884 16.5703 5.34884 13.0528 5.25134Z" fill="#8D8D8D"/>
+</svg>
diff --git a/public/assets/svg/pointer.svg b/public/assets/svg/pointer.svg
new file mode 100644
index 0000000..93f3f1d
--- /dev/null
+++ b/public/assets/svg/pointer.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="12" fill="#D9D9D9"/>
+</svg>
diff --git a/public/saveGameData.js b/public/saveGameData.js
new file mode 100644
index 0000000..99d83a4
--- /dev/null
+++ b/public/saveGameData.js
@@ -0,0 +1,85 @@
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const userId = urlParams.get('userid');
+const gameId = urlParams.get('id');
+
+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];
+
+
+
+
+function submitUserData(drawingZone) {
+    const endTime = Date.now();
+    const timeDifference = endTime - startTime;
+    const timeDifferenceInSeconds = timeDifference / 1000;
+    // console.log(`Time difference: ${timeDifferenceInSeconds} seconds`);
+
+    let imageCode;
+    let gameScore;
+    let scoreTotal=0;
+    if(scoreTotal){
+        gameScore = scoreTotal;
+    }else{
+        gameScore = 0;
+    }
+    // console.log('This is from main point', scoreTotal);
+    drawingZone.renderer.snapshot((image) => {
+        if(gameType[0] == 'drawing'){
+            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 = {
+            'gameName': gameVersion,
+            'gameID': gameId,
+            'screenShot': imageCode,
+            'userId' : userId,
+            'gameTime' : timeDifferenceInSeconds,
+            'score' : scoreTotal
+            // 'starts': formattedDateTime,
+            // 'game_start' : gameStartTime,
+        };
+        console.log(userData);
+
+        fetch(`http://192.168.0.166:3000/save-data`, {
+        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();
+        });        
+};
\ No newline at end of file
diff --git a/src/pages/cross/cross_phonics_v1.astro b/src/pages/cross/cross_phonics_v1.astro
index dc177bb..482b675 100644
--- a/src/pages/cross/cross_phonics_v1.astro
+++ b/src/pages/cross/cross_phonics_v1.astro
@@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
     <main>
         <div>
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
-                <div class="container mx-auto px-4">
-                    <div class="flex flex-row place-content-between pt-6">
-                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
-                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                <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">
+                            <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">
                     <!-- <div class="flex flex-col">
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
@@ -59,7 +69,7 @@ import Layout from "../../layouts/Layout.astro";
                         </div>
                         <div class="flex flex-col place-items-center justify-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>
@@ -191,12 +201,11 @@ import Layout from "../../layouts/Layout.astro";
     input[type="checkbox"]{
         -webkit-appearance: initial;
         appearance: initial;
-        border: 1px solid gray;
+        border: 1px solid rgb(128, 128, 128);
         border-radius: 5px;
         /* background: gray; */
         width: 40px;
         height: 40px;
-        
         position: relative;
     }
     input[type="checkbox"]:checked {
diff --git a/src/pages/cross/cross_phonics_v2.astro b/src/pages/cross/cross_phonics_v2.astro
index e0212ea..4d1a120 100644
--- a/src/pages/cross/cross_phonics_v2.astro
+++ b/src/pages/cross/cross_phonics_v2.astro
@@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
     <main>
         <div>
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
-                <div class="container mx-auto px-4">
-                    <div class="flex flex-row place-content-between pt-6">
-                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
-                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                <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">
+                            <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">
                     <!-- <div class="flex flex-col">
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
@@ -77,7 +87,7 @@ import Layout from "../../layouts/Layout.astro";
                         </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>
diff --git a/src/pages/cross/v1.astro b/src/pages/cross/v1.astro
index ae1cc8c..bd4eadb 100644
--- a/src/pages/cross/v1.astro
+++ b/src/pages/cross/v1.astro
@@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
     <main>
         <div>
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
-                <div class="container mx-auto px-4">
-                    <div class="flex flex-row place-content-between pt-6">
-                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
-                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                <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">
+                            <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">
                     <!-- <div class="flex flex-col">
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
@@ -59,7 +69,7 @@ import Layout from "../../layouts/Layout.astro";
                         </div>
                         <div class="flex flex-col place-items-center justify-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>
diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro
index a13c3e7..1d1fde9 100644
--- a/src/pages/cross/v2.astro
+++ b/src/pages/cross/v2.astro
@@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
     <main>
         <div>
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
-                <div class="container mx-auto px-4">
-                    <div class="flex flex-row place-content-between pt-6">
-                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
-                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                <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">
+                            <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">
                     <!-- <div class="flex flex-col">
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
diff --git a/src/pages/cross/v3.astro b/src/pages/cross/v3.astro
index ccadb6e..ce283ea 100644
--- a/src/pages/cross/v3.astro
+++ b/src/pages/cross/v3.astro
@@ -6,11 +6,21 @@ import Layout from "../../layouts/Layout.astro";
     <main>
         <div class="">
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
-                <div class="container mx-auto px-4">
-                    <div class="flex flex-row place-content-between pt-2">
-                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
-                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                <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">
+                            <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">
                     <div class="flex flex-col">
                         <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
                         <!-- <p id="LearningSubArea"></p> -->
@@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-4">
                             <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>
diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro
index 51bac51..27e0e54 100644
--- a/src/pages/drag/dragdrop_phonics.astro
+++ b/src/pages/drag/dragdrop_phonics.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 = {
@@ -57,7 +58,24 @@ import Layout from '../../layouts/Layout.astro';
       width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
       height: window.innerHeight / 2,
   };
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let scoreTotal = 0;
+  let resultView;
+  let topLogoWidth;
+  let muteIconWidth;
+  let resetIconWidth;
+  let tickIconWidth;
+  let cancelIconWidth;
+  let retryButton;
+  let blockMatches;
   if(isMobile){
+      topLogoWidth = 5;
+      muteIconWidth = 2;
+      resetIconWidth = 1.6;
+      tickIconWidth = 1.34;
+      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -67,6 +85,11 @@ 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;
@@ -76,13 +99,6 @@ import Layout from '../../layouts/Layout.astro';
       leftTargetZoneW = window.innerWidth / 6;
       rightTargetZoneW = window.innerWidth * 0.9 - 172;
     }
-  let submitButton;
-  let formattedDateTime;
-  let shortUniqueID;
-  let retryButton;
-  let blockMatches;
-  let scoreTotal  = 0;
-  let resultView; // scoreTotal resultView
   gameResult = [];
   window.onload = function() {
     // Get the current date and time
@@ -228,8 +244,11 @@ import Layout from '../../layouts/Layout.astro';
         }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image("topLogo", "/assets/top_logo.jpg");
-        this.load.image("tick", '/assets/tick.png');
-        this.load.image("retryIcon", "/assets/svg/retry.svg")
+        this.load.image("tickIcon", '/assets/svg/tick2.svg');
+        this.load.image("muteIcon", '/assets/svg/mute.svg');
+        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+        this.load.image("resetIcon", '/assets/svg/reset.svg');
+
         this.load.image("border", '/assets/squar.png');
           this.load.spritesheet("blocks1", assetsList.element5,{
           frameWidth: 100,
@@ -326,6 +345,16 @@ import Layout from '../../layouts/Layout.astro';
                 }
             ];
             // console.log(data)
+            const graphics = this.add.graphics();
+            const x = 0; const y = 54;
+            const lineWidth = window.innerWidth;
+            graphics.lineStyle(1, 0x0348A8);
+            graphics.setAlpha(0.2);
+            graphics.beginPath();
+            graphics.moveTo(x, y);
+            graphics.lineTo(x + lineWidth, y);
+            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`})
@@ -337,78 +366,79 @@ import Layout from '../../layouts/Layout.astro';
                 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: `#7C4C23`});
-                this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
+                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`});
             } else{
-                this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
-                this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
+                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;
-            // Base font size for your text
-            const baseFontSize = 22;
-            // Calculate responsive font size based on screen width
-            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
-            const descrptText = this.add.text(screenCenterX, 95, data.description, {
-              font: ` ${responsiveFontSize}px Quicksand`,
-              fill: '#7c4c23',
-            }).setOrigin(0.5);
+                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);
           })
           .catch(error => {
             console.error('Error fetching initial data:', error);
           });
         const displayW = window.innerWidth;
-        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)
-          }); 
-        };
+        // 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
 
+        this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
+        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
+        submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+
         const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
             font: '600 20px Quicksand',
             fill: 'blue'
           }).setDepth(1);
           submitNotic.setVisible(false);
-        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
-          font: '600 30px Quicksand',
-          fill: '#fff',
-          backgroundColor: 'blue',
-          padding: { x: 20, y: 10 },
-        }).setDepth(1);
-        submitButton.setVisible(false);
+        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+        //   font: '600 30px Quicksand',
+        //   fill: '#fff',
+        //   backgroundColor: 'blue',
+        //   padding: { x: 20, y: 10 },
+        // }).setDepth(1);
+        // submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
+          // submitButton.setVisible(false);
           submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
-        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
-        this.add.image(displayW / 6, 30, "topMatch").setScale();
-        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
+
         const blocks = [
             {
                 x: displayW / 2 - 200,
@@ -465,7 +495,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).setScale(borderScale);
+          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.05).setScale(borderScale);
           targetZoneBorders.push(targetBorder);
           targetZone.block = null;
         }),
@@ -524,11 +554,11 @@ import Layout from '../../layouts/Layout.astro';
 
 
         });
-        retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
+        // retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
         retryButton.setInteractive().on('pointerdown', () => {
           window.location.reload();
         })
-        retryButton.setVisible(false);
+        // retryButton.setVisible(false);
         let score = 0;
         let counter = 0;
         const isMatch = (blockName, targetName) => {
diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index 0047571..339f28b 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.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 = {
@@ -85,7 +86,7 @@ import Layout from '../../layouts/Layout.astro';
       muteIconWidth = 1.3;
       resetIconWidth = 1.26;
       tickIconWidth = 1.222;
-      cancelIconWidth = 1.185
+      cancelIconWidth = 1.185;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 100;
@@ -312,11 +313,11 @@ import Layout from '../../layouts/Layout.astro';
           .then(({ data }) => {
             // console.log(data)
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-            // Base font size for your text
-            const baseFontSize = 30;
-            // Calculate responsive font size based on screen width
-            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
-            const descrptText = this.add.text(screenCenterX, 85, data.description, {font: ` ${responsiveFontSize}px Quicksand`, fill: '#60C6CB',}).setOrigin(0.5);
+            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);
              blockMatches = [
               {
                 blockName: "blocks1",
@@ -353,33 +354,33 @@ import Layout from '../../layouts/Layout.astro';
             console.error('Error fetching initial data:', error);
           });
         const displayW = window.innerWidth;
-        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)
-          }); 
-        };
+        // 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 graphics = this.add.graphics();
@@ -449,7 +450,7 @@ import Layout from '../../layouts/Layout.astro';
           submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         });
 
         const droppedBlocks = [];
diff --git a/src/pages/drag/match_phonics.astro b/src/pages/drag/match_phonics.astro
index e8cf9f4..1cef4bc 100644
--- a/src/pages/drag/match_phonics.astro
+++ b/src/pages/drag/match_phonics.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 = {
@@ -57,7 +58,22 @@ import Layout from '../../layouts/Layout.astro';
       width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
       height: window.innerHeight / 2,
   };
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let scoreTotal = 0;
+  let resultView;
+  let topLogoWidth;
+  let muteIconWidth;
+  let resetIconWidth;
+  let tickIconWidth;
+  let cancelIconWidth;
   if(isMobile){
+      topLogoWidth = 5;
+      muteIconWidth = 2;
+      resetIconWidth = 1.6;
+      tickIconWidth = 1.34;
+      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -65,6 +81,11 @@ 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;
@@ -72,13 +93,6 @@ import Layout from '../../layouts/Layout.astro';
       retryButtonWidth = window.innerWidth / 2 - 50;
       retryButtonHeight = window.innerHeight - 70;
   }
-  let submitButton;
-  let formattedDateTime;
-  let shortUniqueID;
-  let blockMatches;
-  let resultView;
-  let scoreTotal = 0;
-
   gameResult = [];
   window.onload = function() {
     // Get the current date and time
@@ -100,6 +114,7 @@ import Layout from '../../layouts/Layout.astro';
       return result;
   };
   shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
+  let blockMatches;
 
   const targetZones = [
     {
@@ -233,12 +248,13 @@ import Layout from '../../layouts/Layout.astro';
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image("topLogo", "/assets/top_logo.jpg");
         this.load.image("tick", '/assets/tick.png');
-        // this.load.image("bg", '/assets/bgwhite.jpg');
-        // this.load.image("target1", assetsList.right_image1);
-        // this.load.image("target2", '/assets/hay.png');
-        // this.load.image("target3", '/assets/mat.png');
-        // this.load.image("target4", '/assets/star.png');
-        this.load.image("border", '/assets/squar.png');
+        this.load.image("topMatch", "/assets/top_match.jpg");
+        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image("tickIcon", '/assets/svg/tick2.svg');
+        this.load.image("muteIcon", '/assets/svg/mute.svg');
+        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+        this.load.image("resetIcon", '/assets/svg/reset.svg');
+        this.load.image("border", '/assets/svg/pointer.svg');
         this.load.spritesheet("target1", assetsList.right_image1,{
           frameWidth: 100,
           frameHeight: 100,
@@ -298,15 +314,12 @@ import Layout from '../../layouts/Layout.astro';
                   targetName: `target${data.right_match4}`,
                 },
               ];
-            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-            // Base font size for your text
-            const baseFontSize = 20
-            // Calculate responsive font size based on screen width
-            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
-            const descrptText = this.add.text(screenCenterX, 76, data.description, {
-              font: ` ${responsiveFontSize}px Quicksand`,
-              fill: '#7c4c23',
-            }).setOrigin(0.5);
+              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);
             // 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
@@ -325,104 +338,122 @@ import Layout from '../../layouts/Layout.astro';
             console.error('Error fetching initial data:', error);
           });
         const displayW = window.innerWidth;
-        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 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)
+        //   }); 
+        // };
+        this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
+        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
+        submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW * 0.9-32, 170, "target1");
+        // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
+        this.add.image(displayW * 0.9-32, 340, "target2");
+        // this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1);
+        this.add.image(displayW * 0.9-32, 510, "target3");
+        // this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
+        this.add.image(displayW * 0.9-32, 680, "target4");
+        // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
 
+
+        const graphics = this.add.graphics();
+        const x = 0; const y = 54;
+        const lineWidth = window.innerWidth;
+        graphics.lineStyle(1, 0x0348A8);
+        graphics.setAlpha(0.2);
+        graphics.beginPath();
+        graphics.moveTo(x, y);
+        graphics.lineTo(x + lineWidth, y);
+        graphics.strokePath();
         const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
             font: '600 20px Quicksand',
             fill: 'blue'
           }).setDepth(1);
           submitNotic.setVisible(false);
-        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
-          font: '600 30px Quicksand',
-          fill: '#fff',
-          backgroundColor: 'blue',
-          padding: { x: 20, y: 10 },
-        }).setDepth(1);
-        submitButton.setVisible(false);
+        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+        //   font: '600 30px Quicksand',
+        //   fill: '#fff',
+        //   backgroundColor: 'blue',
+        //   padding: { x: 20, y: 10 },
+        // }).setDepth(1);
+        // submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
+          // submitButton.setVisible(false);
           submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
-        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
-        this.add.image(displayW / 6, 30, "topMatch").setScale();
-        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
-        this.add.image(displayW * 0.9-32, 170, "target1"),
-        this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
-        this.add.image(displayW * 0.9-32, 340, "target2"),
-        this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
-        this.add.image(displayW * 0.9-32, 510, "target3"),
-        this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
-        this.add.image(displayW * 0.9-32, 680, "target4"),
-        this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
+       
         const blocks = [
           {
             x: displayW / 15 - 15,
             y: 120,
             textureKey: "blocks1",
             id: "block1",
+            blockPointer: 'border',
           },
           {
             x: displayW / 15 - 15,
             y: 280,
             textureKey: "blocks2",
             id: "block2",
+            blockPointer: 'border',
           },
           {
             x: displayW / 15 - 15,
             y: 460,
             textureKey: "blocks3",
             id: "block3",
+            blockPointer: 'border',
           },
           {
             x: displayW / 15 - 15,
             y: 640,
             textureKey: "blocks4",
             id: "block4",
+            blockPointer: 'border',
           },
         ];
         this.graphics = this.add.graphics();
         const droppedBlocks = [];
         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 = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
+          // const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
+          const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1);
           targetZoneBorders.push(targetBorder);
           targetZone.block = null;
         }),
 
         blocks.forEach((block, index) => {
           const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
+          this.add.sprite(block.x+100, block.y+35, block.blockPointer, 1).setOrigin(0, 0).setInteractive({ draggable: true });
+
           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);
@@ -451,7 +482,7 @@ import Layout from '../../layouts/Layout.astro';
             if (droppedOnTargetZone) {
                 // Draw a line from the dragged block to the targetZone
                 this.graphics.lineStyle(6, 0xFF0000); // Red color
-                this.graphics.moveTo(block.x + 50, block.y + 50);
+                this.graphics.moveTo(block.x + 105, block.y + 47);
                 this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
                 this.graphics.strokePath();
 
@@ -473,12 +504,12 @@ import Layout from '../../layouts/Layout.astro';
             }
         });
         }); 
-        let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
-          font: '600 30px Quicksand',
-          fill: '#fff',
-          backgroundColor: 'blue',
-          padding: { x: 20, y: 10 },
-        })
+        // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
+        //   font: '600 30px Quicksand',
+        //   fill: '#fff',
+        //   backgroundColor: 'blue',
+        //   padding: { x: 20, y: 10 },
+        // })
         retryButton.setInteractive().on('pointerdown', () => {
           window.location.reload();
         })
diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro
index e0a9e3b..8089a48 100644
--- a/src/pages/drag/v2.astro
+++ b/src/pages/drag/v2.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 = {
@@ -57,7 +58,22 @@ import Layout from '../../layouts/Layout.astro';
       width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
       height: window.innerHeight / 2,
   };
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let scoreTotal = 0;
+  let resultView;
+  let topLogoWidth;
+  let muteIconWidth;
+  let resetIconWidth;
+  let tickIconWidth;
+  let cancelIconWidth;
   if(isMobile){
+      topLogoWidth = 5;
+      muteIconWidth = 2;
+      resetIconWidth = 1.6;
+      tickIconWidth = 1.34;
+      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -65,6 +81,11 @@ 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;
@@ -72,13 +93,6 @@ import Layout from '../../layouts/Layout.astro';
       retryButtonWidth = window.innerWidth / 2 - 50;
       retryButtonHeight = window.innerHeight - 70;
   }
-  let submitButton;
-  let formattedDateTime;
-  let shortUniqueID;
-  let blockMatches;
-  let resultView;
-  let scoreTotal = 0;
-
   gameResult = [];
   window.onload = function() {
     // Get the current date and time
@@ -100,6 +114,7 @@ import Layout from '../../layouts/Layout.astro';
       return result;
   };
   shortUniqueID = generateShortUniqueID(10); // Change 10 to the desired length
+  let blockMatches;
 
   const targetZones = [
     {
@@ -233,12 +248,13 @@ import Layout from '../../layouts/Layout.astro';
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image("topLogo", "/assets/top_logo.jpg");
         this.load.image("tick", '/assets/tick.png');
-        // this.load.image("bg", '/assets/bgwhite.jpg');
-        // this.load.image("target1", assetsList.right_image1);
-        // this.load.image("target2", '/assets/hay.png');
-        // this.load.image("target3", '/assets/mat.png');
-        // this.load.image("target4", '/assets/star.png');
-        this.load.image("border", '/assets/squar.png');
+        this.load.image("topMatch", "/assets/top_match.jpg");
+        this.load.image("topLogo", "/assets/top_logo.jpg");
+        this.load.image("tickIcon", '/assets/svg/tick2.svg');
+        this.load.image("muteIcon", '/assets/svg/mute.svg');
+        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+        this.load.image("resetIcon", '/assets/svg/reset.svg');
+        this.load.image("border", '/assets/svg/pointer.svg');
         this.load.spritesheet("target1", assetsList.right_image1,{
           frameWidth: 100,
           frameHeight: 100,
@@ -298,15 +314,12 @@ import Layout from '../../layouts/Layout.astro';
                   targetName: `target${data.right_match4}`,
                 },
               ];
-            const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-            // Base font size for your text
-            const baseFontSize = 20
-            // Calculate responsive font size based on screen width
-            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
-            const descrptText = this.add.text(screenCenterX, 76, data.description, {
-              font: ` ${responsiveFontSize}px Quicksand`,
-              fill: '#7c4c23',
-            }).setOrigin(0.5);
+              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);
             // 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
@@ -325,104 +338,122 @@ import Layout from '../../layouts/Layout.astro';
             console.error('Error fetching initial data:', error);
           });
         const displayW = window.innerWidth;
-        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 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)
+        //   }); 
+        // };
+        this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
+        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
+        submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW * 0.9-32, 170, "target1");
+        // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
+        this.add.image(displayW * 0.9-32, 340, "target2");
+        // this.add.image(displayW * 0.9-33, 340, "border").setAlpha(1).setScale(1).setDepth(-1);
+        this.add.image(displayW * 0.9-32, 510, "target3");
+        // this.add.image(displayW * 0.9-33, 510, "border").setAlpha(1).setScale(1).setDepth(-1);
+        this.add.image(displayW * 0.9-32, 680, "target4");
+        // this.add.image(displayW * 0.9-33, 680, "border").setAlpha(1).setScale(1).setDepth(-1);
 
+
+        const graphics = this.add.graphics();
+        const x = 0; const y = 54;
+        const lineWidth = window.innerWidth;
+        graphics.lineStyle(1, 0x0348A8);
+        graphics.setAlpha(0.2);
+        graphics.beginPath();
+        graphics.moveTo(x, y);
+        graphics.lineTo(x + lineWidth, y);
+        graphics.strokePath();
         const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
             font: '600 20px Quicksand',
             fill: 'blue'
           }).setDepth(1);
           submitNotic.setVisible(false);
-        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
-          font: '600 30px Quicksand',
-          fill: '#fff',
-          backgroundColor: 'blue',
-          padding: { x: 20, y: 10 },
-        }).setDepth(1);
-        submitButton.setVisible(false);
+        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+        //   font: '600 30px Quicksand',
+        //   fill: '#fff',
+        //   backgroundColor: 'blue',
+        //   padding: { x: 20, y: 10 },
+        // }).setDepth(1);
+        // submitButton.setVisible(false);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
+          // submitButton.setVisible(false);
           submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
-        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
-        this.add.image(displayW / 6, 30, "topMatch").setScale();
-        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
-        this.add.image(displayW * 0.9-32, 170, "target1"),
-        this.add.image(displayW * 0.9-43, 170, "border").setAlpha(0.4).setScale(0.65),
-        this.add.image(displayW * 0.9-32, 340, "target2"),
-        this.add.image(displayW * 0.9-43, 340, "border").setAlpha(0.4).setScale(0.65),
-        this.add.image(displayW * 0.9-32, 510, "target3"),
-        this.add.image(displayW * 0.9-43, 510, "border").setAlpha(0.4).setScale(0.65),
-        this.add.image(displayW * 0.9-32, 680, "target4"),
-        this.add.image(displayW * 0.9-43, 680, "border").setAlpha(0.4).setScale(0.65);
+       
         const blocks = [
           {
             x: displayW / 15 - 15,
             y: 120,
             textureKey: "blocks1",
             id: "block1",
+            blockPointer: 'border',
           },
           {
             x: displayW / 15 - 15,
             y: 280,
             textureKey: "blocks2",
             id: "block2",
+            blockPointer: 'border',
           },
           {
             x: displayW / 15 - 15,
             y: 460,
             textureKey: "blocks3",
             id: "block3",
+            blockPointer: 'border',
           },
           {
             x: displayW / 15 - 15,
             y: 640,
             textureKey: "blocks4",
             id: "block4",
+            blockPointer: 'border',
           },
         ];
         this.graphics = this.add.graphics();
         const droppedBlocks = [];
         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 = displayW * 0.9 - 172, targetZone.y, "border").setAlpha(0.2).setScale(0.65);
+          // const targetImage = this.add.image(targetZone.x, targetZone.y, targetZone.name).setAlpha(1);
+          const targetBorder = this.add.image(targetZone.x = displayW * 0.9 - 140, targetZone.y, "border").setAlpha(1).setScale(1);
           targetZoneBorders.push(targetBorder);
           targetZone.block = null;
         }),
 
         blocks.forEach((block, index) => {
           const newBlock = this.add.sprite(block.x, block.y, block.textureKey, 1).setOrigin(0, 0).setInteractive({ draggable: true });
+          this.add.sprite(block.x+100, block.y+35, block.blockPointer, 1).setOrigin(0, 0).setInteractive({ draggable: true });
+
           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);
@@ -451,7 +482,7 @@ import Layout from '../../layouts/Layout.astro';
             if (droppedOnTargetZone) {
                 // Draw a line from the dragged block to the targetZone
                 this.graphics.lineStyle(6, 0xFF0000); // Red color
-                this.graphics.moveTo(block.x + 50, block.y + 50);
+                this.graphics.moveTo(block.x + 105, block.y + 47);
                 this.graphics.lineTo(targetZoneMatched.x, targetZoneMatched.y);
                 this.graphics.strokePath();
 
@@ -473,12 +504,12 @@ import Layout from '../../layouts/Layout.astro';
             }
         });
         }); 
-        let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
-          font: '600 30px Quicksand',
-          fill: '#fff',
-          backgroundColor: 'blue',
-          padding: { x: 20, y: 10 },
-        })
+        // let retryButton = this.add.text(retryButtonWidth, retryButtonHeight, 'Reset', {
+        //   font: '600 30px Quicksand',
+        //   fill: '#fff',
+        //   backgroundColor: 'blue',
+        //   padding: { x: 20, y: 10 },
+        // })
         retryButton.setInteractive().on('pointerdown', () => {
           window.location.reload();
         })
diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro
index a5b72bc..1f79091 100644
--- a/src/pages/drag/v3.astro
+++ b/src/pages/drag/v3.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 = {
@@ -57,7 +58,24 @@ import Layout from '../../layouts/Layout.astro';
       width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
       height: window.innerHeight / 2,
   };
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let scoreTotal = 0;
+  let resultView;
+  let topLogoWidth;
+  let muteIconWidth;
+  let resetIconWidth;
+  let tickIconWidth;
+  let cancelIconWidth;
+  let retryButton;
+  let blockMatches;
   if(isMobile){
+      topLogoWidth = 5;
+      muteIconWidth = 2;
+      resetIconWidth = 1.6;
+      tickIconWidth = 1.34;
+      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -67,6 +85,11 @@ import Layout from '../../layouts/Layout.astro';
       leftTargetZoneW = window.innerWidth * 0.9 - 40;
       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;
@@ -76,13 +99,7 @@ import Layout from '../../layouts/Layout.astro';
       leftTargetZoneW = window.innerWidth * 0.9 - 172;
       rightTargetZoneW = window.innerWidth / 6;
     }
-  let submitButton;
-  let formattedDateTime;
-  let shortUniqueID;
-  let retryButton;
-  let blockMatches;
-  let resultView;
-  let scoreTotal = 0; // resultView scoreTotal
+
   gameResult = [];
   window.onload = function() {
     // Get the current date and time
@@ -260,8 +277,13 @@ import Layout from '../../layouts/Layout.astro';
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image("topLogo", "/assets/top_logo.jpg");
         this.load.image("tick", '/assets/tick.png');
-        this.load.image("retryIcon", "/assets/svg/retry.svg")
-        this.load.image("border", '/assets/squar.png');
+        this.load.image("tickIcon", '/assets/svg/tick2.svg');
+        this.load.image("muteIcon", '/assets/svg/mute.svg');
+        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+        this.load.image("resetIcon", '/assets/svg/reset.svg');
+        
+        // this.load.image("retryIcon", "/assets/svg/retry.svg")
+        this.load.image("border", '/assets/svg/border.svg');
           this.load.spritesheet("blocks1", assetsList.element5,{
           frameWidth: 100,
           frameHeight: 100,
@@ -339,71 +361,81 @@ import Layout from '../../layouts/Layout.astro';
             ];
             // console.log(data)
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
-            // Base font size for your text
-            const baseFontSize = 30;
-            // Calculate responsive font size based on screen width
-            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
-            const descrptText = this.add.text(screenCenterX, 95, data.description, {
-              font: ` ${responsiveFontSize}px Quicksand`,
-              fill: '#7c4c23',
-            }).setOrigin(0.5);
+            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);
           })
           .catch(error => {
             console.error('Error fetching initial data:', error);
           });
         const displayW = window.innerWidth;
-        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)
-          }); 
-        };
+        // 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 graphics = this.add.graphics();
+        const x = 0; const y = 54;
+        const lineWidth = window.innerWidth;
+        graphics.lineStyle(1, 0x0348A8);
+        graphics.setAlpha(0.2);
+        graphics.beginPath();
+        graphics.moveTo(x, y);
+        graphics.lineTo(x + lineWidth, y);
+        graphics.strokePath();
+
+        this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
+        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
+        submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+
         const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
             font: '600 20px Quicksand',
             fill: 'blue'
           }).setDepth(1);
           submitNotic.setVisible(false);
-        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
-          font: '600 30px Quicksand',
-          fill: '#fff',
-          backgroundColor: 'blue',
-          padding: { x: 20, y: 10 },
-        }).setDepth(1);
-        submitButton.setVisible(false);
+        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+        //   font: '600 30px Quicksand',
+        //   fill: '#fff',
+        //   backgroundColor: 'blue',
+        //   padding: { x: 20, y: 10 },
+        // }).setDepth(1);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
           submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
-        // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
-        this.add.image(displayW / 6, 30, "topMatch").setScale();
-        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
+
+        
         const blocks = [
             {
                 x: displayW / 2-400,
@@ -459,8 +491,8 @@ import Layout from '../../layouts/Layout.astro';
         const targetZoneBorders = [];
         targetZones.forEach((targetZone, index) => {
           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.2).setScale(0.65);
-          const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#7c4c23`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
+          const targetBorder = this.add.image(targetZone.x, targetZone.y, "border").setAlpha(0.7).setScale(1);
+          const targetIndex = this.add.text(targetZone.x, targetZone.y, index+1, {fill: `#60C6CB`, font: `30px`}).setOrigin(0.5, 0.5).setAlpha(0.7)
           targetZoneBorders.push(targetBorder);
           targetZone.block = null;
         }),
@@ -508,11 +540,11 @@ import Layout from '../../layouts/Layout.astro';
             }
           });
         });
-        retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
+        // retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
         retryButton.setInteractive().on('pointerdown', () => {
           window.location.reload();
         })
-        retryButton.setVisible(false);
+        // retryButton.setVisible(false);
         let score = 0;
         let counter = 0;
 
diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro
index d7a293e..33ddb27 100644
--- a/src/pages/drag/v4.astro
+++ b/src/pages/drag/v4.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 = {
@@ -57,7 +58,24 @@ import Layout from '../../layouts/Layout.astro';
       width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
       height: window.innerHeight / 2,
   };
+  let submitButton;
+  let formattedDateTime;
+  let shortUniqueID;
+  let scoreTotal = 0;
+  let resultView;
+  let topLogoWidth;
+  let muteIconWidth;
+  let resetIconWidth;
+  let tickIconWidth;
+  let cancelIconWidth;
+  let retryButton;
+  let blockMatches;
   if(isMobile){
+      topLogoWidth = 5;
+      muteIconWidth = 2;
+      resetIconWidth = 1.6;
+      tickIconWidth = 1.34;
+      cancelIconWidth = 1.16;
       noticeWidth = 100;
       noticeHeight = 0;
       buttonWidth = 67;
@@ -67,6 +85,11 @@ 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;
@@ -76,13 +99,6 @@ import Layout from '../../layouts/Layout.astro';
       leftTargetZoneW = window.innerWidth / 6;
       rightTargetZoneW = window.innerWidth * 0.9 - 172;
     }
-  let submitButton;
-  let formattedDateTime;
-  let shortUniqueID;
-  let retryButton;
-  let blockMatches;
-  let scoreTotal  = 0;
-  let resultView; // scoreTotal resultView
   gameResult = [];
   window.onload = function() {
     // Get the current date and time
@@ -228,9 +244,17 @@ import Layout from '../../layouts/Layout.astro';
         }
         this.load.image("topMatch", "/assets/top_match.jpg");
         this.load.image("topLogo", "/assets/top_logo.jpg");
-        this.load.image("tick", '/assets/tick.png');
-        this.load.image("retryIcon", "/assets/svg/retry.svg")
+        // this.load.image("tick", '/assets/tick.png');
+
+        this.load.image("tickIcon", '/assets/svg/tick2.svg');
+        this.load.image("muteIcon", '/assets/svg/mute.svg');
+        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+        this.load.image("resetIcon", '/assets/svg/reset.svg');
+
+        // this.load.image("retryIcon", "/assets/svg/retry.svg")
         this.load.image("border", '/assets/squar.png');
+
+
           this.load.spritesheet("blocks1", assetsList.element5,{
           frameWidth: 100,
           frameHeight: 100,
@@ -266,25 +290,6 @@ import Layout from '../../layouts/Layout.astro';
     }
     
     create() {
-        // const borderGraphics = this.add.graphics();
-        // const borderThickness = 6;
-        // borderGraphics.lineStyle(borderThickness, 0x7c4c23); // Border color: 0x000000 (black), Border thickness: 2
-        // const borderX = window.innerWidth / 2 - borderThickness / 2; // Center the border on the screen
-        // borderGraphics.beginPath();
-        // borderGraphics.moveTo(borderX, 130);
-        // borderGraphics.lineTo(borderX, window.innerHeight - 260);
-        // borderGraphics.strokePath();
-        // borderGraphics.closePath();
-
-        // const borderGraphicsX = this.add.graphics();
-        // const borderThicknessX = 6;
-        // borderGraphicsX.lineStyle(borderThicknessX, 0x7c4c23); // Border color: 0x7c4c23, Border thickness: 6
-        // const borderY = window.innerHeight / 5 - borderThickness / 2; // Center the border vertically on the screen
-        // borderGraphicsX.beginPath();
-        // borderGraphicsX.moveTo(0, borderY);
-        // borderGraphicsX.lineTo(window.innerWidth, borderY);
-        // borderGraphicsX.strokePath();
-        // borderGraphicsX.closePath();
 
       const params = new URLSearchParams(window.location.search);
         const paramsID = params.get('id');
@@ -337,78 +342,90 @@ import Layout from '../../layouts/Layout.astro';
                 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: `#7C4C23`});
-                this.add.text(rightTargetZoneW - 120, window.innerHeight / 6, data.right_label, {font:`13px`, fill: `#7C4C23`});
+                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`});
             } else{
-                this.add.text(leftTargetZoneW - 100, window.innerHeight / 6, data.left_label, {font: `20px`, fill: `#7C4C23`});
-                this.add.text(rightTargetZoneW - 165, window.innerHeight / 6, data.right_label, {font: `20px`, fill: `#7C4C23`});
+                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;
-            // Base font size for your text
-            const baseFontSize = 22;
-            // Calculate responsive font size based on screen width
-            const responsiveFontSize = (window.innerWidth / 950) * baseFontSize; // Adjust 800 to your desired reference width
-            const descrptText = this.add.text(screenCenterX, 95, data.description, {
-              font: ` ${responsiveFontSize}px Quicksand`,
-              fill: '#7c4c23',
-            }).setOrigin(0.5);
+              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);
           })
           .catch(error => {
             console.error('Error fetching initial data:', error);
           });
         const displayW = window.innerWidth;
-        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)
-          }); 
-        };
+        // 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 graphics = this.add.graphics();
+        const x = 0; const y = 54;
+        const lineWidth = window.innerWidth;
+        graphics.lineStyle(1, 0x0348A8);
+        graphics.setAlpha(0.2);
+        graphics.beginPath();
+        graphics.moveTo(x, y);
+        graphics.lineTo(x + lineWidth, y);
+        graphics.strokePath();
+        
+        this.add.image(displayW / topLogoWidth, 30, "topLogo").setScale();
+        this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
+        const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
+        submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+
         const submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {
             font: '600 20px Quicksand',
             fill: 'blue'
           }).setDepth(1);
           submitNotic.setVisible(false);
-        submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
-          font: '600 30px Quicksand',
-          fill: '#fff',
-          backgroundColor: 'blue',
-          padding: { x: 20, y: 10 },
-        }).setDepth(1);
-        submitButton.setVisible(false);
+        // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
+        //   font: '600 30px Quicksand',
+        //   fill: '#fff',
+        //   backgroundColor: 'blue',
+        //   padding: { x: 20, y: 10 },
+        // }).setDepth(1);
         submitButton.setInteractive().on('pointerdown', () => {
           // console.log('Clicked');
-          submitButton.setVisible(false);
           submitNotic.setVisible(true);
           // window.location.reload();
           // windowLoad();
-          submitUserData();
+          submitUserData(this);
         })
         // this.add.image(displayW / 2, displayH / 2, "bg").setScale(2.4);
-        this.add.image(displayW / 6, 30, "topMatch").setScale();
-        this.add.image(displayW * 0.80-5, 30, "topLogo").setScale();
+
+
+
         const blocks = [
             {
                 x: displayW / 2 - 200,
@@ -486,7 +503,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, 50, 25)
                     )
                 ) {
                     // newBlock.setPosition(targetZone.x - 50, targetZone.y - 50); //backgroundColor:`#FF0000`
@@ -524,11 +541,10 @@ import Layout from '../../layouts/Layout.astro';
 
 
         });
-        retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
+        // retryButton = this.add.image(retryButtonWidth, retryButtonHeight, 'retryIcon')
         retryButton.setInteractive().on('pointerdown', () => {
           window.location.reload();
         })
-        retryButton.setVisible(false);
         let score = 0;
         let counter = 0;
         const isMatch = (blockName, targetName) => {
diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro
index eb1b525..3180342 100644
--- a/src/pages/drawing/drawing_phonics.astro
+++ b/src/pages/drawing/drawing_phonics.astro
@@ -9,15 +9,32 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     </main>
 </Layout>
+<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: 0,
         y: 0,
         width: window.innerWidth,
         height: window.innerHeight,
-    };
+    }; 
+    let topLogoWidth;
+    let muteIconWidth;
+    let resetIconWidth;
+    let tickIconWidth;
+    let cancelIconWidth;
+    var assetsList = {}
+    var snapshotButton;
+    let submitButton;
+    let formattedDateTime;
+    let shortUniqueID;
     if(isMobile){
+        topLogoWidth = 5;
+        muteIconWidth = 2;
+        resetIconWidth = 1.6;
+        tickIconWidth = 1.34;
+        cancelIconWidth = 1.16;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -27,6 +44,11 @@ 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;
@@ -36,11 +58,7 @@ import Layout from '../../layouts/Layout.astro';
         learningWidth = 450;
         learningHeight = 400
     }
-    var assetsList = {}
-    var snapshotButton;
-    let submitButton;
-    let formattedDateTime;
-    let shortUniqueID;
+
     gameResult = [];
     window.onload = function() {
         currentDate = new Date();
@@ -105,6 +123,10 @@ import Layout from '../../layouts/Layout.astro';
     function preload() {
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.image("tickIcon", '/assets/svg/tick2.svg');
+        this.load.image("muteIcon", '/assets/svg/mute.svg');
+        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+        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');
     }
@@ -117,61 +139,82 @@ 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 = 22;
-                const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
-                const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
+                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);
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
             })
             .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)
-            }); 
-            };
+            // 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();
+            const x = 0; const y = 54;
+            const lineWidth = window.innerWidth;
+            borderBottom.lineStyle(1, 0x0348A8);
+            borderBottom.setAlpha(0.2);
+            borderBottom.beginPath();
+            borderBottom.moveTo(x, y);
+            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'
             }).setDepth(1);
             submitNotic.setVisible(false);
-            submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
-            font: '600 30px Quicksand',
-            fill: '#fff',
-            backgroundColor: 'blue',
-            padding: { x: 20, y: 10 },
-            });
+            // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
+            // font: '600 30px Quicksand',
+            // fill: '#fff',
+            // backgroundColor: 'blue',
+            // padding: { x: 20, y: 10 },
+            // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
             // console.log('Clicked');
             submitButton.setVisible(false);
             submitNotic.setVisible(true);
             // windowLoad();
-            submitUserData();
+            submitUserData(this);
             })
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
@@ -181,12 +224,16 @@ 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');
+            let outlineImagePosition;
+            isMobile ? outlineImagePosition = 0 : outlineImagePosition = 45;
+            const outlineImage = this.add.image(customWidth / 2 + outlineImagePosition, customHeight / 2, 'outline');
             if(isMobile){
-                outlineImage.setDepth(1).setScale(0.31);
+                outlineImage.setDepth(1).setScale(0.33);
+            }else if(isTab){
+                outlineImage.setDepth(1).setScale(0.38);
             } else{
                 outlineImage.setDepth(1).setScale(0.5);   
-            }
+            }  
 
             graphics = this.add.graphics();
             const colorContainer = document.createElement('div');
@@ -227,9 +274,10 @@ 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 = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#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;
             const buttonSpacing = 5;
@@ -331,20 +379,20 @@ import Layout from '../../layouts/Layout.astro';
             document.body.appendChild(buttonsContainer);
             // Create the Clear button
             const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
             // clearButton.style.border = '3px solid blue';
-            clearButton.style.color = 'blue';
-            clearButton.style.width = 'fit-content';
-            clearButton.style.marginRight = '10px';
+            // clearButton.style.color = 'blue';
+            // clearButton.style.width = 'fit-content';
+            // clearButton.style.marginRight = '10px';
             if(isMobile){
                 clearButton.style.padding = '2px 8px';
                 buttonsContainer.style.top = '17%';
             } else {
                 clearButton.style.padding = '5px 10px';
             }        
-            clearButton.style.fontWeight = 'bold';
-            clearButton.style.borderRadius = '20%';
-            clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            // clearButton.style.fontWeight = 'bold';
+            // clearButton.style.borderRadius = '20%';
+            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
             clearButton.addEventListener('click', () => {
                 clearDrawing();
             }); 
@@ -453,13 +501,13 @@ import Layout from '../../layouts/Layout.astro';
             };
             // Add a "Save Snapshot" button
             if(isMobile){
-                snapWidth = 50;
+                snapWidth = 70;
                 snapHeight = 70;
             } else {
                 snapWidth = 200;
                 snapHeight = 70;
             }
-            snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
+            snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
             // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
             snapshotButton.setInteractive();
             snapshotButton.on('pointerdown', () => {
diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro
index 4d33c58..6355d33 100644
--- a/src/pages/drawing/drawing_writo.astro
+++ b/src/pages/drawing/drawing_writo.astro
@@ -9,15 +9,33 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     </main>
 </Layout>
+<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: 0,
         y: 0,
         width: window.innerWidth,
         height: window.innerHeight,
     };
+    let topLogoWidth;
+    let muteIconWidth;
+    let resetIconWidth;
+    let tickIconWidth;
+    let cancelIconWidth;
+    var assetsList = {}
+    var snapshotButton;
+    let submitButton;
+    let formattedDateTime;
+    let shortUniqueID;
+
     if(isMobile){
+        topLogoWidth = 5;
+        muteIconWidth = 2;
+        resetIconWidth = 1.6;
+        tickIconWidth = 1.34;
+        cancelIconWidth = 1.16;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -27,6 +45,11 @@ 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;
@@ -36,11 +59,7 @@ import Layout from '../../layouts/Layout.astro';
         learningWidth = 450;
         learningHeight = 400
     }
-    var assetsList = {}
-    var snapshotButton;
-    let submitButton;
-    let formattedDateTime;
-    let shortUniqueID;
+
     gameResult = [];
     window.onload = function() {
         currentDate = new Date();
@@ -105,6 +124,10 @@ import Layout from '../../layouts/Layout.astro';
     function preload() {
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.image("tickIcon", '/assets/svg/tick2.svg');
+        this.load.image("muteIcon", '/assets/svg/mute.svg');
+        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+        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');
     }
@@ -117,61 +140,80 @@ 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 = 18;
-                const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
-                const descrptText = this.add.text(screenCenterX, 50, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
+                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);
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
             })
             .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)
-            }); 
-            };
+            // 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();
+            const x = 0; const y = 54;
+            const lineWidth = window.innerWidth;
+            borderBottom.lineStyle(1, 0x0348A8);
+            borderBottom.setAlpha(0.2);
+            borderBottom.beginPath();
+            borderBottom.moveTo(x, y);
+            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");
+
             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',
-            fill: '#fff',
-            backgroundColor: 'blue',
-            padding: { x: 20, y: 10 },
-            });
+            // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
+            // font: '600 30px Quicksand',
+            // fill: '#fff',
+            // backgroundColor: 'blue',
+            // padding: { x: 20, y: 10 },
+            // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
             // console.log('Clicked');
             submitButton.setVisible(false);
             submitNotic.setVisible(true);
             // windowLoad();
-            submitUserData();
+                submitUserData(this);
             })
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
@@ -181,12 +223,15 @@ 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+0, 'outline');
+            let outlineImagePosition; isMobile ? outlineImagePosition = 0 : outlineImagePosition = 45;
+            const outlineImage = this.add.image(customWidth / 2 + outlineImagePosition, customHeight / 2+0, 'outline');
             if(isMobile){
-                outlineImage.setDepth(1).setScale(0.33);
+                outlineImage.setDepth(1).setScale(0.21);
+            }else if(isTab){
+                outlineImage.setDepth(1).setScale(0.32);
             } else{
                 outlineImage.setDepth(1).setScale(0.45);   
-            }
+            }  
 
             graphics = this.add.graphics();
             const colorContainer = document.createElement('div');
@@ -205,7 +250,7 @@ import Layout from '../../layouts/Layout.astro';
             colorPicker.value = selectedColor;
             colorPicker.className = 'color-picker';
             colorPicker.style.marginBottom = '0px';
-            colorPicker.style.marginTop = '-0px';
+            colorPicker.style.marginTop = '25px';
             colorPicker.style.marginRight = '15px';
             // colorPicker.style.padding = '1px 1px';
             // colorPicker.style.outline = 'none';
@@ -227,9 +272,10 @@ 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 = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#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;
             const buttonSpacing = 5;
@@ -293,7 +339,7 @@ import Layout from '../../layouts/Layout.astro';
                         button.style.marginTop = '5px';
                         button.style.marginBottom = '5px';
                     } else{
-                         button.style.border = "2px solid";
+                        button.style.border = "2px solid";
                         button.style.borderColor = color;
                         button.style.boxShadow = '5px 10px 30px #7c4c2390';
                         button.style.borderRadius = '20%';
@@ -321,7 +367,7 @@ import Layout from '../../layouts/Layout.astro';
             buttonsContainer.style.marginTop = '30px';
             if(!isMobile){
                 // buttonsContainer.style.position = 'fixed';
-                buttonsContainer.style.top = '10%';
+                buttonsContainer.style.top = '12%';
                 buttonsContainer.style.flexDirection = 'column';
                 buttonsContainer.style.marginLeft = '60px';
                 buttonsContainer.style.marginTop = '0%';
@@ -331,20 +377,20 @@ import Layout from '../../layouts/Layout.astro';
             document.body.appendChild(buttonsContainer);
             // Create the Clear button
             const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
             // clearButton.style.border = '3px solid blue';
-            clearButton.style.color = 'blue';
-            clearButton.style.width = 'fit-content';
-            clearButton.style.marginRight = '10px';
+            // clearButton.style.color = 'blue';
+            // clearButton.style.width = 'fit-content';
+            // clearButton.style.marginRight = '10px';
             if(isMobile){
                 clearButton.style.padding = '2px 8px';
                 buttonsContainer.style.top = '17%';
             } else {
                 clearButton.style.padding = '5px 10px';
             }        
-            clearButton.style.fontWeight = 'bold';
-            clearButton.style.borderRadius = '20%';
-            clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            // clearButton.style.fontWeight = 'bold';
+            // clearButton.style.borderRadius = '20%';
+            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
             clearButton.addEventListener('click', () => {
                 clearDrawing();
             }); 
@@ -453,13 +499,13 @@ import Layout from '../../layouts/Layout.astro';
             };
             // Add a "Save Snapshot" button
             if(isMobile){
-                snapWidth = 50;
+                snapWidth = 70;
                 snapHeight = 70;
             } else {
                 snapWidth = 200;
                 snapHeight = 70;
             }
-            snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
+            snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
             // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
             snapshotButton.setInteractive();
             snapshotButton.on('pointerdown', () => {
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 65cd33c..046f930 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -9,15 +9,34 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     </main>
 </Layout>
+<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: 0,
         y: 0,
         width: window.innerWidth,
         height: window.innerHeight,
     };
+    let topLogoWidth;
+    let muteIconWidth;
+    let resetIconWidth;
+    let tickIconWidth;
+    let cancelIconWidth;
+    var assetsList = {}
+    var snapshotButton;
+    let submitButton;
+    let formattedDateTime;
+    let shortUniqueID;
+    let scoreTotal = 0;
     if(isMobile){
+        topLogoWidth = 5;
+        muteIconWidth = 2;
+        resetIconWidth = 1.6;
+        tickIconWidth = 1.34;
+        cancelIconWidth = 1.16;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -27,6 +46,11 @@ 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;
@@ -36,11 +60,7 @@ import Layout from '../../layouts/Layout.astro';
         learningWidth = 450;
         learningHeight = 400
     }
-    var assetsList = {}
-    var snapshotButton;
-    let submitButton;
-    let formattedDateTime;
-    let shortUniqueID;
+
     gameResult = [];
     window.onload = function() {
         currentDate = new Date();
@@ -105,6 +125,10 @@ import Layout from '../../layouts/Layout.astro';
     function preload() {
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.image("tickIcon", '/assets/svg/tick2.svg');
+        this.load.image("muteIcon", '/assets/svg/mute.svg');
+        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+        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');
     }
@@ -117,9 +141,11 @@ 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 = 22;
-                const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
-                const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
+                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);
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
             })
@@ -127,21 +153,41 @@ import Layout from '../../layouts/Layout.astro';
                 console.error('Error fetching initial data:', error);
             });
             // window.load
+
+            const borderBottom = this.add.graphics();
+            const x = 0; const y = 54;
+            const lineWidth = window.innerWidth;
+            borderBottom.lineStyle(1, 0x0348A8);
+            borderBottom.setAlpha(0.2);
+            borderBottom.beginPath();
+            borderBottom.moveTo(x, y);
+            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'
             }).setDepth(1);
             submitNotic.setVisible(false);
-            submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
-            font: '600 30px Quicksand',
-            fill: '#fff',
-            backgroundColor: 'blue',
-            padding: { x: 20, y: 10 },
-            });
+            // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
+            // font: '600 30px Quicksand',
+            // fill: '#fff',
+            // backgroundColor: 'blue',
+            // padding: { x: 20, y: 10 },
+            // });
             submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
-                submitButton.setVisible(false);
                 submitNotic.setVisible(true);
+                submitNotic.setVisible(false);
                 // windowLoad();
                 submitUserData(this);
             });
@@ -157,10 +203,11 @@ import Layout from '../../layouts/Layout.astro';
             const outlineImage = this.add.image(customWidth / 2, customHeight / 2, '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';
@@ -202,7 +249,8 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
+            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;
             const buttonSpacing = 5;
@@ -304,20 +352,20 @@ import Layout from '../../layouts/Layout.astro';
             document.body.appendChild(buttonsContainer);
             // Create the Clear button
             const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
             // clearButton.style.border = '3px solid blue';
-            clearButton.style.color = 'blue';
-            clearButton.style.width = 'fit-content';
-            clearButton.style.marginRight = '10px';
+            // clearButton.style.color = 'blue';
+            // clearButton.style.width = 'fit-content';
+            // clearButton.style.marginRight = '10px';
             if(isMobile){
                 clearButton.style.padding = '2px 8px';
                 buttonsContainer.style.top = '17%';
             } else {
                 clearButton.style.padding = '5px 10px';
             }        
-            clearButton.style.fontWeight = 'bold';
-            clearButton.style.borderRadius = '20%';
-            clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            // clearButton.style.fontWeight = 'bold';
+            // clearButton.style.borderRadius = '20%';
+            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
             clearButton.addEventListener('click', () => {
                 clearDrawing();
             }); 
@@ -426,27 +474,26 @@ import Layout from '../../layouts/Layout.astro';
             };
             // Add a "Save Snapshot" button
             if(isMobile){
-                snapWidth = 50;
+                snapWidth = 70;
                 snapHeight = 70;
             } else {
                 snapWidth = 200;
                 snapHeight = 70;
             }
-            snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
+            snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
             // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
             snapshotButton.setInteractive();
             snapshotButton.on('pointerdown', () => {
-                // submitUserData(this);
+                captureSnapshot(this);
             });
             snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'});
             snapNotice.setVisible(false);
     }
-    const url = window.location.href;
-    const gameName = url.split('/');
-    const gameType = gameName[3].split('?id=');        
-    function submitUserData(drawingZone) {
-        let imageCode;
-        console.log(drawingZone);
+    function captureSnapshot(drawingZone) {
+        // snapNotice.setVisible(true);
+        submitButton.setVisible(false);
+        snapshotButton.setVisible(false);
+        customCursor.setVisible(false);
         drawingZone.renderer.snapshot((image) => {
             submitButton.setVisible(true);
             snapshotButton.setVisible(true);
@@ -461,41 +508,66 @@ import Layout from '../../layouts/Layout.astro';
             link.download = 'my_drawing.png';
             link.click();
             document.body.removeChild(image);
-            imageCode = image.src;
+            // 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);
+    //         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)
-            }); 
+    //         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();
-            });        
-    };
+    //             // Clear the drawing
+    //             // graphics.clear();
+    //         });        
+    // };
     // function captureSnapshot(drawingZone) {
     //     submitButton.setVisible(false);
     //     // snapNotice.setVisible(true);
diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro
index db73b32..04a2d9c 100644
--- a/src/pages/drawing/v2.astro
+++ b/src/pages/drawing/v2.astro
@@ -9,15 +9,34 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     </main>
 </Layout>
+<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 / 1,
     //     width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
     //     height: window.innerHeight / 2,
     // };
+    let topLogoWidth;
+    let muteIconWidth;
+    let resetIconWidth;
+    let tickIconWidth;
+    let cancelIconWidth;
+    var assetsList = {}
+    var snapshotButton;
+    let submitButton;
+    let formattedDateTime;
+    let shortUniqueID;
+    let defaultColor;
+
     if(isMobile){
+        topLogoWidth = 5;
+        muteIconWidth = 2;
+        resetIconWidth = 1.6;
+        tickIconWidth = 1.34;
+        cancelIconWidth = 1.16;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -33,6 +52,11 @@ import Layout from '../../layouts/Layout.astro';
         image2Height = 2;
         image2Bottom = 110;
     } else {
+        topLogoWidth = 6;
+        muteIconWidth = 1.3;
+        resetIconWidth = 1.26;
+        tickIconWidth = 1.222;
+        cancelIconWidth = 1.185;
         submitWidth = 380;
         submitHeight = 95;
         noticeWidth = 0;
@@ -41,19 +65,14 @@ import Layout from '../../layouts/Layout.astro';
         downloadHeight = 70;
         learningWidth = 450;
         learningHeight = 350;
-        image1Width = 4;
+        image1Width = 3;
         image1Height = 1.8;
         image2Width = 2;
-        image2Right = 400;
+        image2Right = 250;
         image2Height = 1.8;
         image2Bottom = 0;
     }
-    var assetsList = {}
-    var snapshotButton;
-    let submitButton;
-    let formattedDateTime;
-    let shortUniqueID;
-    let defaultColor;
+    
     gameResult = [];
     window.onload = function() {
         currentDate = new Date();
@@ -118,10 +137,13 @@ import Layout from '../../layouts/Layout.astro';
         this.load.image('image1', assetsList.image1);
         this.load.image('image2', assetsList.image2);
         this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.image("tickIcon", '/assets/svg/tick2.svg');
+        this.load.image("muteIcon", '/assets/svg/mute.svg');
+        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+        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('waxTexture', '/assets/texture.png');
-
     }
 
     function create() {
@@ -132,61 +154,86 @@ 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 = 22;
-                const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
-                const descrptText = this.add.text(screenCenterX, 55, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
+                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);
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
             })
             .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)
-            }); 
-            };
+ 
+            // console.log(gameType[0]);
+            // 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();
+            const x = 0; const y = 54;
+            const lineWidth = window.innerWidth;
+            borderBottom.lineStyle(1, 0x0348A8);
+            borderBottom.setAlpha(0.2);
+            borderBottom.beginPath();
+            borderBottom.moveTo(x, y);
+            borderBottom.lineTo(x + lineWidth, y);
+            borderBottom.strokePath();
+
+            const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
+            const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
+
+            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'
             }).setDepth(1);
             submitNotic.setVisible(false);
-            submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
-            font: '600 30px Quicksand',
-            fill: '#fff',
-            backgroundColor: 'blue',
-            padding: { x: 20, y: 10 },
-            });
-            submitButton.setVisible(true);
+            // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
+            // font: '600 30px Quicksand',
+            // fill: '#fff',
+            // backgroundColor: 'blue',
+            // padding: { x: 20, y: 10 },
+            // });
             submitButton.setInteractive().on('pointerdown', () => {
             // console.log('Clicked');
-            submitButton.setVisible(false);
             submitNotic.setVisible(true);
             // windowLoad();
-            submitUserData();
+            // submitUserData();
+            submitUserData(this);
             })
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
             if(!isMobile){
@@ -196,14 +243,16 @@ 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 outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
-            const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
+            
             if(isMobile){
                 outlineImage1.setDepth(1).setScale(0.28);
                 outlineImage2.setDepth(1).setScale(0.28);
+            }else if(isTab){
+                outlineImage1.setDepth(1).setScale(0.34);
+                outlineImage2.setDepth(1).setScale(0.34);
             } else{
-                outlineImage1.setDepth(1).setScale(0.65);
-                outlineImage2.setDepth(1).setScale(0.65);   
+                outlineImage1.setDepth(1).setScale(0.60);
+                outlineImage2.setDepth(1).setScale(0.60);   
             }
             graphics = this.add.graphics();
             const colorContainer = document.createElement('div');
@@ -305,10 +354,10 @@ import Layout from '../../layouts/Layout.astro';
             document.body.appendChild(buttonsContainer);
             // Create the Clear button
             const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
-            // clearButton.style.border = '3px solid blue';
-            clearButton.style.color = 'blue';
-            clearButton.style.width = 'fit-content';
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
+            // // clearButton.style.border = '3px solid blue';
+            // clearButton.style.color = 'blue';
+            // clearButton.style.width = 'fit-content';
             clearButton.style.marginLeft = '30px';
             if(isMobile){
                 clearButton.style.padding = '2px 8px';
@@ -316,9 +365,9 @@ import Layout from '../../layouts/Layout.astro';
             } else {
                 clearButton.style.padding = '5px 10px';
             }        
-            clearButton.style.fontWeight = 'bold';
-            clearButton.style.borderRadius = '20%';
-            clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            // clearButton.style.fontWeight = 'bold';
+            // clearButton.style.borderRadius = '20%';
+            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
             clearButton.addEventListener('click', () => {
                 clearDrawing();
             }); 
@@ -410,13 +459,14 @@ import Layout from '../../layouts/Layout.astro';
             const borderGraphics = this.add.graphics();
             borderGraphics.lineStyle(borderThickness, borderColor);
             if(isMobile){
-                snapWidth = 50;
+                snapWidth = 70;
                 snapHeight = 70;
             } else {
                 snapWidth = 200;
                 snapHeight = 70;
             }
-            snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
+            // snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
+            snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
             snapshotButton.setInteractive();
             snapshotButton.on('pointerdown', () => {
                 captureSnapshot(this);
diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro
index 23287e4..4b225b0 100644
--- a/src/pages/drawing/v3.astro
+++ b/src/pages/drawing/v3.astro
@@ -9,15 +9,34 @@ import Layout from '../../layouts/Layout.astro';
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
     </main>
 </Layout>
+<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,
         // width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
         // height: window.innerHeight / 2,
     };
+    var assetsList = {}
+    var snapshotButton;
+    let submitButton;
+    let formattedDateTime;
+    let shortUniqueID;
+    let scoreTotal = 0;
+    let resultView;
+    let topLogoWidth;
+    let muteIconWidth;
+    let resetIconWidth;
+    let tickIconWidth;
+    let cancelIconWidth; 
     if(isMobile){
+        topLogoWidth = 5;
+        muteIconWidth = 2;
+        resetIconWidth = 1.6;
+        tickIconWidth = 1.34;
+        cancelIconWidth = 1.16;
         submitWidth = 250;
         submitHeight = 110;
         noticeWidth = 100;
@@ -27,6 +46,11 @@ 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;
@@ -36,11 +60,7 @@ import Layout from '../../layouts/Layout.astro';
         learningWidth = 450;
         learningHeight = 400
     }
-    var assetsList = {}
-    var snapshotButton;
-    let submitButton;
-    let formattedDateTime;
-    let shortUniqueID;
+
     gameResult = [];
     window.onload = function() {
         currentDate = new Date();
@@ -105,6 +125,10 @@ import Layout from '../../layouts/Layout.astro';
     function preload() {
         this.load.image('outline', assetsList.image);
         this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.image("tickIcon", '/assets/svg/tick2.svg');
+        this.load.image("muteIcon", '/assets/svg/mute.svg');
+        this.load.image("cancelIcon", '/assets/svg/cancel.svg');
+        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');
     }
@@ -117,73 +141,98 @@ 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 = 22;
-                const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
-                const descrptText = this.add.text(screenCenterX, 70, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
+                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);
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
                 // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
             })
             .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)
-            }); 
-            };
+            // 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();
+            const x = 0; const y = 54;
+            const lineWidth = window.innerWidth;
+            borderBottom.lineStyle(1, 0x0348A8);
+            borderBottom.setAlpha(0.2);
+            borderBottom.beginPath();
+            borderBottom.moveTo(x, y);
+            borderBottom.lineTo(x + lineWidth, y);
+            borderBottom.strokePath();
+
+            const outlineImage = this.add.image(customWidth / 2, customHeight / 2 + 20, 'outline');
+            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'
             }).setDepth(1);
             submitNotic.setVisible(false);
-            submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
-            font: '600 30px Quicksand',
-            fill: '#fff',
-            backgroundColor: 'blue',
-            padding: { x: 20, y: 10 },
-            });
-            submitButton.setVisible(true);
+            // submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
+            // font: '600 30px Quicksand',
+            // fill: '#fff',
+            // backgroundColor: 'blue',
+            // padding: { x: 20, y: 10 },
+            // });
+            // submitButton.setVisible(true);
             submitButton.setInteractive().on('pointerdown', () => {
             // console.log('Clicked');
-            submitButton.setVisible(false);
+            // submitButton.setVisible(false);
             submitNotic.setVisible(true);
             // windowLoad();
-            submitUserData();
+            submitUserData(this);
             })
-            const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
-            if(!isMobile){
-                this.add.text(customWidth / 10, 20, "Drawing", textStyle);
-                this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-            } else {
-                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 textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
+            // if(!isMobile){
+            //     this.add.text(customWidth / 10, 20, "Drawing", textStyle);
+            //     this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+            // } else {
+            //     this.add.text(customWidth / 30, 0, "Drawing", textStyle);
+            //     this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
+            // }
             if(isMobile){
-                outlineImage.setDepth(-1).setScale(0.65);
+                outlineImage.setDepth(-1).setScale(0.40);
+            }else if(isTab){
+                outlineImage.setDepth(-1).setScale(0.90);
             } else{
                 outlineImage.setDepth(-1).setScale(1);   
             }
@@ -229,7 +278,8 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            const colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
+            let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#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;
             const buttonSpacing = 15;
@@ -271,6 +321,8 @@ import Layout from '../../layouts/Layout.astro';
                 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.style.marginRight = `${buttonSpacing}px`; 
@@ -293,7 +345,7 @@ import Layout from '../../layouts/Layout.astro';
                         button.style.marginTop = '5px';
                         button.style.marginBottom = '5px';
                     } else{
-                         button.style.border = "2px solid";
+                        button.style.border = "2px solid";
                         button.style.borderColor = color;
                         button.style.boxShadow = '5px 10px 30px #7c4c2390';
                         button.style.borderRadius = '20%';
@@ -331,20 +383,20 @@ import Layout from '../../layouts/Layout.astro';
             document.body.appendChild(buttonsContainer);
             // Create the Clear button
             const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
             // clearButton.style.border = '3px solid blue';
-            clearButton.style.color = 'blue';
-            clearButton.style.width = 'fit-content';
-            clearButton.style.marginRight = '10px';
+            // clearButton.style.color = 'blue';
+            // clearButton.style.width = 'fit-content';
+            // clearButton.style.marginRight = '10px';
             if(isMobile){
                 clearButton.style.padding = '2px 8px';
                 buttonsContainer.style.top = '17%';
             } else {
                 clearButton.style.padding = '5px 10px';
             }        
-            clearButton.style.fontWeight = 'bold';
-            clearButton.style.borderRadius = '20%';
-            clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            // clearButton.style.fontWeight = 'bold';
+            // clearButton.style.borderRadius = '20%';
+            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
             clearButton.addEventListener('click', () => {
                 clearDrawing();
             }); 
@@ -409,7 +461,6 @@ import Layout from '../../layouts/Layout.astro';
                 slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
                 slider.style.backgroundColor = '#05b3a4';
             });
-
             sliderContainer.appendChild(slider);
             buttonsContainer.appendChild(sliderContainer);
             
@@ -459,7 +510,8 @@ import Layout from '../../layouts/Layout.astro';
                 snapWidth = 200;
                 snapHeight = 70;
             }
-            snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
+            // snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
+            snapshotButton = this.add.image(customWidth / cancelIconWidth, 30, "buttonIcons");
             // snapshotButton = this.add.text(150, 80, 'SAVE', { fill: '#7c4c23', backgroundColor : '#5e17eb', font: '600 30px quicksand', borderRadius: '20px'}).setPadding(10, 10);
             snapshotButton.setInteractive();
             snapshotButton.on('pointerdown', () => {
@@ -571,9 +623,4 @@ import Layout from '../../layouts/Layout.astro';
     //     this.customCursor.y = this.input.y;
     // }
 </script>
-<style>
-    .clear-button {
-        background-color: blue;
-    }
-</style>
 <!-- <svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M11.4001 18.1612L11.4001 18.1612L18.796 10.7653C17.7894 10.3464 16.5972 9.6582 15.4697 8.53068C14.342 7.40298 13.6537 6.21058 13.2348 5.2039L5.83882 12.5999L5.83879 12.5999C5.26166 13.1771 4.97307 13.4657 4.7249 13.7838C4.43213 14.1592 4.18114 14.5653 3.97634 14.995C3.80273 15.3593 3.67368 15.7465 3.41556 16.5208L2.05445 20.6042C1.92743 20.9852 2.0266 21.4053 2.31063 21.6894C2.59466 21.9734 3.01478 22.0726 3.39584 21.9456L7.47918 20.5844C8.25351 20.3263 8.6407 20.1973 9.00498 20.0237C9.43469 19.8189 9.84082 19.5679 10.2162 19.2751C10.5343 19.0269 10.823 18.7383 11.4001 18.1612Z" fill="#1C274C"></path> <path d="M20.8482 8.71306C22.3839 7.17735 22.3839 4.68748 20.8482 3.15178C19.3125 1.61607 16.8226 1.61607 15.2869 3.15178L14.3999 4.03882C14.4121 4.0755 14.4246 4.11268 14.4377 4.15035C14.7628 5.0875 15.3763 6.31601 16.5303 7.47002C17.6843 8.62403 18.9128 9.23749 19.85 9.56262C19.8875 9.57563 19.9245 9.58817 19.961 9.60026L20.8482 8.71306Z" fill="#1C274C"></path> </g></svg> -->
\ No newline at end of file
diff --git a/src/pages/tick/tick_phonics_v1.astro b/src/pages/tick/tick_phonics_v1.astro
index 68d163e..05a05b6 100644
--- a/src/pages/tick/tick_phonics_v1.astro
+++ b/src/pages/tick/tick_phonics_v1.astro
@@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
     <main>
         <div>
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
-                <div class="container mx-auto px-4">
-                    <div class="flex flex-row place-content-between pt-6">
-                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
-                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                <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">
+                            <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">
                     <!-- <div class="flex flex-col">
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
@@ -71,7 +81,7 @@ import Layout from "../../layouts/Layout.astro";
                         </div>
                         <div class="flex flex-col place-items-center justify-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>
diff --git a/src/pages/tick/tick_phonics_v2.astro b/src/pages/tick/tick_phonics_v2.astro
index f29ef3d..7908b99 100644
--- a/src/pages/tick/tick_phonics_v2.astro
+++ b/src/pages/tick/tick_phonics_v2.astro
@@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
     <main>
         <div>
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
-                <div class="container mx-auto px-4">
-                    <div class="flex flex-row place-content-between pt-6">
-                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
-                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                <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">
+                            <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">
                     <!-- <div class="flex flex-col">
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
@@ -95,7 +105,7 @@ import Layout from "../../layouts/Layout.astro";
                         </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>
diff --git a/src/pages/tick/tick_phonics_v3.astro b/src/pages/tick/tick_phonics_v3.astro
index 9a851bb..fed84a9 100644
--- a/src/pages/tick/tick_phonics_v3.astro
+++ b/src/pages/tick/tick_phonics_v3.astro
@@ -6,11 +6,21 @@ import Layout from "../../layouts/Layout.astro";
     <main>
         <div class="">
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
-                <div class="container mx-auto px-4">
-                    <div class="flex flex-row place-content-between pt-2">
-                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
-                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                <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">
+                            <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">
                     <div class="flex flex-col">
                         <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
                         <!-- <p id="LearningSubArea"></p> -->
@@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-4">
                             <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>
diff --git a/src/pages/tick/v1.astro b/src/pages/tick/v1.astro
index ad81930..86edb4c 100644
--- a/src/pages/tick/v1.astro
+++ b/src/pages/tick/v1.astro
@@ -83,6 +83,11 @@ 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>
     </main>
 </Layout>
diff --git a/src/pages/tick/v12.astro b/src/pages/tick/v12.astro
deleted file mode 100644
index 7ad1a6b..0000000
--- a/src/pages/tick/v12.astro
+++ /dev/null
@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <style>
-        @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
-
-        body {
-            font-family: Quicksand;
-        }
-
-        input.largerCheckbox {
-            width: 40px;
-            height: 40px;
-            cursor: pointer;
-            accent-color: red; /* Change the accent color to red */
-        }
-
-        .greenBorder {
-            border: 4px solid #008000;
-            border-radius: 10%;
-            transition: border 0.5s, border-color 0.3s, transform 6s;
-        }
-
-        .redBorder {
-            border: 4px solid red;
-            border-radius: 10%;
-            transition: border 0.5s, border-color 0.3s, transform 6s;
-        }
-
-        #image1, #image2, #image3, #image4, #image5, #image6 {
-            width: 150px;
-        }
-
-        #label1, #label2, #label3, #label4, #label5, #label6 {
-            text-align: center;
-            font-weight: bold;
-            color: #17A1A7;
-            font-size: 20px;
-            padding-top: 10px;
-        }
-
-        #LearningArea, #LearningSubArea_copy {
-            font-size: 20px;
-            color: #7C4C23;
-            font-weight: bold;
-        }
-
-        .round-checkbox-label {
-            display: inline-block;
-            cursor: pointer;
-            position: relative;
-            transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
-            width: 150px; /* Adjust to the width of your images */
-            text-align: center;
-        }
-
-        .round-checkbox-label::before {
-            content: "";
-            display: inline-block;
-            width: 100%;
-            height: 100%;
-            background-color: rgba(255, 0, 0, 0.5); /* Red background with 0.5 opacity */
-            position: absolute;
-            top: 0;
-            left: 0;
-            border-radius: 30%;
-            opacity: 0;
-            transition: opacity 0.3s;
-            z-index: -1;
-        }
-
-        input.round-checkbox-input:checked + .round-checkbox-label::before {
-            opacity: 1;
-        }
-    </style>
-</head>
-<body>
-    <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">
-                    <div class="flex flex-col place-items-center">
-                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
-                        <p id="label1"></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">
-                    <div class="flex flex-col place-items-center">
-                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
-                        <p id="label2"></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">
-                    <div class="flex flex-col place-items-center">
-                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
-                        <p id="label3"></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">
-                    <div class="flex flex-col place-items-center">
-                        <img id="image4" src="" alt="" draggable="false" class="select-none" />
-                        <p id="label4"></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">
-                    <div class="flex flex-col place-items-center">
-                        <img id="image5" src="" alt="" draggable="false" class="select-none" />
-                        <p id="label5"></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">
-                    <div class="flex flex-col place-items-center">
-                        <img id="image6" src="" alt="" draggable="false" class="select-none" />
-                        <p id="label6"></p>
-                    </div>
-                </label>
-                <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox largerCheckbox" value="a6"/>
-            </div>
-        </div>
-        <div class="flex flex-col place-items-center justify-center pt-8">
-            <p id="savedMessage"></p>
-        </div>
-    </form>
-</body>
-</html>
diff --git a/src/pages/tick/v2.astro b/src/pages/tick/v2.astro
index 9592638..536a2cf 100644
--- a/src/pages/tick/v2.astro
+++ b/src/pages/tick/v2.astro
@@ -5,11 +5,21 @@ import Layout from "../../layouts/Layout.astro";
     <main>
         <div>
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
-                <div class="container mx-auto px-4">
-                    <div class="flex flex-row place-content-between pt-6">
-                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
-                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                <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">
+                            <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">
                     <!-- <div class="flex flex-col">
                         <p id="LearningArea"></p>
                         <p id="LearningSubArea_copy"></p>
@@ -95,7 +105,7 @@ import Layout from "../../layouts/Layout.astro";
                         </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>
@@ -238,173 +248,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{
diff --git a/src/pages/tick/v3.astro b/src/pages/tick/v3.astro
index 6653014..84b02eb 100644
--- a/src/pages/tick/v3.astro
+++ b/src/pages/tick/v3.astro
@@ -6,11 +6,21 @@ import Layout from "../../layouts/Layout.astro";
     <main>
         <div class="">
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
-                <div class="container mx-auto px-4">
-                    <div class="flex flex-row place-content-between pt-2">
-                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
-                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                <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">
+                            <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">
                     <div class="flex flex-col">
                         <p class="text-center text-lg md:text-2xl lg:text-3xl text-[#7C4C23]" id="gameDescription"></p>
                         <!-- <p id="LearningSubArea"></p> -->
@@ -47,7 +57,7 @@ import Layout from "../../layouts/Layout.astro";
                         </div>
                         <div class="flex flex-col place-items-center justify-center pt-4">
                             <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>
diff --git a/src/pages/tst.astro b/src/pages/tst.astro
new file mode 100644
index 0000000..7702ba5
--- /dev/null
+++ b/src/pages/tst.astro
@@ -0,0 +1,25 @@
+---
+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
diff --git a/src/pages/tst2.astro b/src/pages/tst2.astro
new file mode 100644
index 0000000..e69de29