diff --git a/public/saveGameData.js b/public/saveGameData.js
index 880c051..f45cec7 100644
--- a/public/saveGameData.js
+++ b/public/saveGameData.js
@@ -96,8 +96,8 @@ function submitUserData(drawingZone) {
             starValue = 3;
         }
         let maxStarValue = 5;
-
         let progress = 0;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
         
         function progressIncrement() {
             const interval = setInterval(() => {
@@ -201,14 +201,14 @@ function submitUserData(drawingZone) {
         body: JSON.stringify(userData)
         })
         .then(response => {
-        setTimeout(() => {
+        setTimeout(() => { 
             if (response.ok) {
             if (response.status == 200) {
                 loadingMainContainer.style.display = 'none';
                 loadingDiv.style.display = 'none';
                 starContainer.style.display = 'flex';
                 starContainer.style.flexDirection = 'row';
-                document.getElementById('countStar').innerHTML = starValue;
+                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
                 for (let i = 0; i < starValue; i++) {
                     const starDiv = document.createElement('div');
                     starDiv.innerHTML = starSVG;
diff --git a/src/pages/cross/cross_phonics_v1.astro b/src/pages/cross/cross_phonics_v1.astro
index 9cd4fae..79fb968 100644
--- a/src/pages/cross/cross_phonics_v1.astro
+++ b/src/pages/cross/cross_phonics_v1.astro
@@ -68,13 +68,37 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
             </section>
         </div>
+        <div class="absolute inset-0" style="display: none;" id="allParentDiv">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
+            </div>
+            </div>
+            <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+                </div>
+                <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/clip-art.svg" alt="" />
+                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                </div>
+                <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                </div>
+              </div>
+            </div>
+            <div class="clip-art-container absolute bottom-0 right-0 hidden">
+                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
+            </div>
+        </div>
     </main>
 </Layout>
 <script is:inline>
@@ -89,6 +113,9 @@ import Layout from "../../layouts/Layout.astro";
     let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
     let wrongCount = 0;
     let starValue;
+    let maxStarValue = 5;
+    let progress = 0;
+    const progressBar = document.createElement('div');
 
     fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_6/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -124,6 +151,45 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
 
+        function showClipArt() {
+        const clipArtContainer = document.querySelector('.clip-art-container');
+
+        clipArtContainer.classList.remove('hidden');
+        clipArtContainer.classList.add('slide-in');
+    }
+
+    function addStarScalingStyles() {
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes scaleUp {
+                0% {
+                    transform: scale(1.5);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+            .star {
+                display: inline-block;
+                transform-origin: center;
+                transform: scale(0); /* Initial state before animation */
+                opacity: 0; /* Initial opacity */
+                animation: scaleUp 0.5s ease forwards;
+            }
+        `; 
+        document.head.appendChild(style);
+    }
+    function progressIncrement() {
+        const interval = setInterval(() => {
+            if (progress >= 100) {
+                clearInterval(interval);
+            } else {
+                progress += 10; 
+                progressBar.style.width = `${progress}%`;
+            }
+        }, 100);
+    }
+
     function checkResult2(id) {
         const checkbox = document.getElementById('a' + id.slice(-1));
         const element = document.getElementById(id);
@@ -143,11 +209,11 @@ import Layout from "../../layouts/Layout.astro";
     function saveUserData() {
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
-        if (checkedCount < 2) {
+        if (checkedCount < 0) {
             // Show error message if less than 3 checkboxes are checked
             let errorMessageSection = document.getElementById('errorMessage');
             errorMessageSection.style.display = "block";
-            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            errorMessageSection.innerHTML = 'Please select at least 1 options.';
             return;
         } else {
             // Hide error message if validation passes
@@ -178,6 +244,7 @@ import Layout from "../../layouts/Layout.astro";
 
         // Move the userData object creation inside the saveUserData function if needed
         wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
 
         let userData = {
             'gameName': gameName,
@@ -188,6 +255,58 @@ import Layout from "../../layouts/Layout.astro";
             'star': starValue
         };
         // console.log(userData);
+        progressIncrement();
+        addStarScalingStyles();
+        showClipArt();
+        const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
+        
+        const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
 
         fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
@@ -198,11 +317,36 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    if(response.status == 200){
-                        let savedMessageSection = document.getElementById('savedMessage');
-                        savedMessageSection.style.display = "block";
-                        savedMessageSection.innerHTML = 'Saved Successfully';
-                    }
+                    setTimeout(() => {
+                        if (response.ok) {
+                            if (response.status == 200) {
+                                document.getElementById('allParentDiv').style.display = 'block';
+                                loadingMainContainer.style.display = 'none';
+                                loadingDiv.style.display = 'none';
+                                starContainer.style.display = 'flex';
+                                starContainer.style.flexDirection = 'row';
+                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                for (let i = 0; i < starValue; i++) {
+                                    const starDiv = document.createElement('div');
+                                    starDiv.innerHTML = starSVG;
+                                    starDiv.classList.add('star');
+                                    starContainer.appendChild(starDiv);
+                                    setTimeout(() => {
+                                        starDiv.style.opacity = '1'; 
+                                        starDiv.style.animationDelay = `${i * 0.5}s`;
+                                    }, i * 500);
+                                }
+                                for (let i = 0; i < maxStarValue - starValue; i++) {
+                                    const starDiv = document.createElement('div');
+                                    starDiv.innerHTML = blankStar;
+                                    starContainer.appendChild(starDiv);
+                                }
+                                scoreBoard.style.display = 'flex';
+                            }
+                        } else {
+                        console.log('Something went wrong', response);
+                        }
+                    }, 100);
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -305,4 +449,24 @@ import Layout from "../../layouts/Layout.astro";
         font-size: 40px;
         display: block;
     }
+    .hidden {
+        display: none;
+        transform: translateX(100%);
+    }
+
+    .slide-in {
+        display: block;
+        animation: slideIn 0.5s forwards;
+    }
+
+    @keyframes slideIn {
+        0% {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
 </style>
diff --git a/src/pages/cross/cross_phonics_v2.astro b/src/pages/cross/cross_phonics_v2.astro
index 360e830..3b0b27c 100644
--- a/src/pages/cross/cross_phonics_v2.astro
+++ b/src/pages/cross/cross_phonics_v2.astro
@@ -86,13 +86,37 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
             </section>
         </div>
+        <div class="absolute inset-0" style="display: none;" id="allParentDiv">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
+            </div>
+            </div>
+            <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+                </div>
+                <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/clip-art.svg" alt="" />
+                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                </div>
+                <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                </div>
+              </div>
+            </div>
+            <div class="clip-art-container absolute bottom-0 right-0 hidden">
+                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
+            </div>
+        </div>     
     </main>
 </Layout>
 <script is:inline>
@@ -106,6 +130,9 @@ import Layout from "../../layouts/Layout.astro";
     let totalPoints = 0;
     let wrongCount = 0;
     let starValue;
+    let maxStarValue = 5;
+    let progress = 0;
+    const progressBar = document.createElement('div');
     
     fetch(`https://game-du.teachertrainingkolkata.in/items/cross_phonics_option_9/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -148,6 +175,44 @@ import Layout from "../../layouts/Layout.astro";
                 document.getElementById(imageId).src = assetsURL + gameData[imageId];
             }
         });
+        function showClipArt() {
+        const clipArtContainer = document.querySelector('.clip-art-container');
+
+        clipArtContainer.classList.remove('hidden');
+        clipArtContainer.classList.add('slide-in');
+    }
+
+    function addStarScalingStyles() {
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes scaleUp {
+                0% {
+                    transform: scale(1.5);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+            .star {
+                display: inline-block;
+                transform-origin: center;
+                transform: scale(0); /* Initial state before animation */
+                opacity: 0; /* Initial opacity */
+                animation: scaleUp 0.5s ease forwards;
+            }
+        `; 
+        document.head.appendChild(style);
+    }
+    function progressIncrement() {
+        const interval = setInterval(() => {
+            if (progress >= 100) {
+                clearInterval(interval);
+            } else {
+                progress += 10; 
+                progressBar.style.width = `${progress}%`;
+            }
+        }, 100);
+    }
 
     function checkResult2(id) {
         const checkbox = document.getElementById('a' + id.slice(-1));
@@ -169,13 +234,14 @@ import Layout from "../../layouts/Layout.astro";
 
 
     function saveUserData() {
+        document.getElementById('allParentDiv').style.display = 'block';
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
         const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
-        if (checkedCount < 3) {
+        if (checkedCount < 0) {
             // Show error message if less than 3 checkboxes are checked
             let errorMessageSection = document.getElementById('errorMessage');
             errorMessageSection.style.display = "block";
-            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            errorMessageSection.innerHTML = 'Please select at least 1 options.';
             return;
         } else {
             // Hide error message if validation passes
@@ -214,6 +280,7 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
@@ -223,6 +290,58 @@ import Layout from "../../layouts/Layout.astro";
             'star': starValue
         };
         // console.log(userData);
+        progressIncrement();
+        addStarScalingStyles();
+        showClipArt();
+        const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
+        
+        const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
 
         fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
@@ -233,11 +352,36 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    if(response.status == 200){
-                        let savedMessageSection = document.getElementById('savedMessage');
-                        savedMessageSection.style.display = "block";
-                        savedMessageSection.innerHTML = 'Saved Successfully';
-                    }
+                    setTimeout(() => {
+                        if (response.ok) {
+                            if (response.status == 200) {
+                                document.getElementById('allParentDiv').style.display = 'block';
+                                loadingMainContainer.style.display = 'none';
+                                loadingDiv.style.display = 'none';
+                                starContainer.style.display = 'flex';
+                                starContainer.style.flexDirection = 'row';
+                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                for (let i = 0; i < starValue; i++) {
+                                    const starDiv = document.createElement('div');
+                                    starDiv.innerHTML = starSVG;
+                                    starDiv.classList.add('star');
+                                    starContainer.appendChild(starDiv);
+                                    setTimeout(() => {
+                                        starDiv.style.opacity = '1'; 
+                                        starDiv.style.animationDelay = `${i * 0.5}s`;
+                                    }, i * 500);
+                                }
+                                for (let i = 0; i < maxStarValue - starValue; i++) {
+                                    const starDiv = document.createElement('div');
+                                    starDiv.innerHTML = blankStar;
+                                    starContainer.appendChild(starDiv);
+                                }
+                                scoreBoard.style.display = 'flex';
+                            }
+                        } else {
+                        console.log('Something went wrong', response);
+                        }
+                    }, 100);
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -340,4 +484,24 @@ import Layout from "../../layouts/Layout.astro";
         font-size: 40px;
         display: block;
     }
+    .hidden {
+        display: none;
+        transform: translateX(100%);
+    }
+
+    .slide-in {
+        display: block;
+        animation: slideIn 0.5s forwards;
+    }
+
+    @keyframes slideIn {
+        0% {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
 </style>
diff --git a/src/pages/cross/v1.astro b/src/pages/cross/v1.astro
index 26cd26b..77352c1 100644
--- a/src/pages/cross/v1.astro
+++ b/src/pages/cross/v1.astro
@@ -68,13 +68,37 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
             </section>
         </div>
+        <div class="absolute inset-0" style="display: none;" id="allParentDiv">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
+            </div>
+            </div>
+            <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+                </div>
+                <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/clip-art.svg" alt="" />
+                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                </div>
+                <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                </div>
+              </div>
+            </div>
+            <div class="clip-art-container absolute bottom-0 right-0 hidden">
+                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
+            </div>
+        </div>     
     </main>
 </Layout>
 <script is:inline>
@@ -89,6 +113,9 @@ import Layout from "../../layouts/Layout.astro";
     let totalPoints = 0;
     let wrongCount = 0;
     let starValue;
+    let maxStarValue = 5;
+    let progress = 0;
+    const progressBar = document.createElement('div');
 
 
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
@@ -125,6 +152,44 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
 
+        function showClipArt() {
+        const clipArtContainer = document.querySelector('.clip-art-container');
+
+        clipArtContainer.classList.remove('hidden');
+        clipArtContainer.classList.add('slide-in');
+    }
+
+    function addStarScalingStyles() {
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes scaleUp {
+                0% {
+                    transform: scale(1.5);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+            .star {
+                display: inline-block;
+                transform-origin: center;
+                transform: scale(0); /* Initial state before animation */
+                opacity: 0; /* Initial opacity */
+                animation: scaleUp 0.5s ease forwards;
+            }
+        `;
+        document.head.appendChild(style);
+    }
+    function progressIncrement() {
+        const interval = setInterval(() => {
+            if (progress >= 100) {
+                clearInterval(interval);
+            } else {
+                progress += 10; 
+                progressBar.style.width = `${progress}%`;
+            }
+        }, 100);
+    }
     function checkResult2(id) {
         const checkbox = document.getElementById('a' + id.slice(-1));
         const element = document.getElementById(id);
@@ -142,14 +207,15 @@ import Layout from "../../layouts/Layout.astro";
     }
  
     function saveUserData() {
+        document.getElementById('allParentDiv').style.display = 'block';
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
 
-        if (checkedCount < 2) {
+        if (checkedCount < 0) {
             // Show error message if less than 3 checkboxes are checked
             let errorMessageSection = document.getElementById('errorMessage');
             errorMessageSection.style.display = "block";
-            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            errorMessageSection.innerHTML = 'Please select at least 1 options.';
             return;
         } else {
             // Hide error message if validation passes
@@ -182,6 +248,7 @@ import Layout from "../../layouts/Layout.astro";
 
         // Move the userData object creation inside the saveUserData function if needed
         wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
@@ -190,6 +257,58 @@ import Layout from "../../layouts/Layout.astro";
             'score': totalPoints,
             'star': starValue
         };
+        progressIncrement();
+        addStarScalingStyles();
+        showClipArt();
+        const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
+        
+        const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
         // console.log(userData);
         fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
@@ -200,11 +319,36 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    if(response.status == 200){
-                        let savedMessageSection = document.getElementById('savedMessage');
-                        savedMessageSection.style.display = "block";
-                        savedMessageSection.innerHTML = 'Saved Successfully';
-                    }
+                    setTimeout(() => {
+                        if (response.ok) {
+                            if (response.status == 200) {
+                                document.getElementById('allParentDiv').style.display = 'block';
+                                loadingMainContainer.style.display = 'none';
+                                loadingDiv.style.display = 'none';
+                                starContainer.style.display = 'flex';
+                                starContainer.style.flexDirection = 'row';
+                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                for (let i = 0; i < starValue; i++) {
+                                    const starDiv = document.createElement('div');
+                                    starDiv.innerHTML = starSVG;
+                                    starDiv.classList.add('star');
+                                    starContainer.appendChild(starDiv);
+                                    setTimeout(() => {
+                                        starDiv.style.opacity = '1'; 
+                                        starDiv.style.animationDelay = `${i * 0.5}s`;
+                                    }, i * 500);
+                                }
+                                for (let i = 0; i < maxStarValue - starValue; i++) {
+                                    const starDiv = document.createElement('div');
+                                    starDiv.innerHTML = blankStar;
+                                    starContainer.appendChild(starDiv);
+                                }
+                                scoreBoard.style.display = 'flex';
+                            }
+                        } else {
+                        console.log('Something went wrong', response);
+                        }
+                    }, 100);
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -307,4 +451,24 @@ import Layout from "../../layouts/Layout.astro";
         font-size: 40px;
         display: block;
     }
+    .hidden {
+        display: none;
+        transform: translateX(100%);
+    }
+
+    .slide-in {
+        display: block;
+        animation: slideIn 0.5s forwards;
+    }
+
+    @keyframes slideIn {
+        0% {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
 </style>
diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro
index 0809db6..e56aa3b 100644
--- a/src/pages/cross/v2.astro
+++ b/src/pages/cross/v2.astro
@@ -81,13 +81,37 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
                 </div>
             </section>
         </div>
+        <div class="absolute inset-0" style="display: none;" id="allParentDiv">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
+            </div>
+            </div>
+            <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+                </div>
+                <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/clip-art.svg" alt="" />
+                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                </div>
+                <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                </div>
+              </div>
+            </div>
+            <div class="clip-art-container absolute bottom-0 right-0 hidden">
+                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
+            </div>
+        </div>
     </main>
 </Layout>
 <script is:inline>
@@ -102,6 +126,9 @@ import Layout from "../../layouts/Layout.astro";
     let maxPoint = 9;
     let starValue; 
     let totalPoints = 0;
+    let maxStarValue = 5;
+    let progress = 0;
+    const progressBar = document.createElement('div');
 
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -142,6 +169,44 @@ import Layout from "../../layouts/Layout.astro";
                 document.getElementById(imageId).src = assetsURL + gameData[imageId];
             }
         });
+        function showClipArt() {
+            const clipArtContainer = document.querySelector('.clip-art-container');
+
+            clipArtContainer.classList.remove('hidden');
+            clipArtContainer.classList.add('slide-in');
+        }
+
+        function addStarScalingStyles() {
+            const style = document.createElement('style');
+            style.innerHTML = `
+                @keyframes scaleUp {
+                    0% {
+                        transform: scale(1.5);
+                    }
+                    100% {
+                        transform: scale(1);
+                    }
+                }
+                .star {
+                    display: inline-block;
+                    transform-origin: center;
+                    transform: scale(0); /* Initial state before animation */
+                    opacity: 0; /* Initial opacity */
+                    animation: scaleUp 0.5s ease forwards;
+                }
+            `; 
+            document.head.appendChild(style);
+        }
+        function progressIncrement() {
+            const interval = setInterval(() => {
+                if (progress >= 100) {
+                    clearInterval(interval);
+                } else {
+                    progress += 10; 
+                    progressBar.style.width = `${progress}%`;
+                }
+            }, 100);
+        }
     
     function checkResult2(id) {
         const checkbox = document.getElementById('a' + id.slice(-1));
@@ -163,14 +228,15 @@ import Layout from "../../layouts/Layout.astro";
 
 
     function saveUserData() {
+        document.getElementById('allParentDiv').style.display = 'block';
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
         const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
 
-        if (checkedCount < 3) {
+        if (checkedCount < 0) {
             // Show error message if less than 3 checkboxes are checked
             let errorMessageSection = document.getElementById('errorMessage');
             errorMessageSection.style.display = "block";
-            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            errorMessageSection.innerHTML = 'Please select at least 1 options.';
             return;
         } else {
             // Hide error message if validation passes
@@ -199,6 +265,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
         wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
         
 
         let userData = {
@@ -209,6 +276,58 @@ import Layout from "../../layouts/Layout.astro";
             'score': totalPoints,
             'star': starValue
         };
+        progressIncrement();
+        addStarScalingStyles();
+        showClipArt();
+        const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
+        
+        const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
 
         fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
@@ -219,11 +338,36 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    if(response.status == 200){
-                        let savedMessageSection = document.getElementById('savedMessage');
-                        savedMessageSection.style.display = "block";
-                        savedMessageSection.innerHTML = 'Saved Successfully';
-                    }
+                    setTimeout(() => {
+                        if (response.ok) {
+                            if (response.status == 200) {
+                                document.getElementById('allParentDiv').style.display = 'block';
+                                loadingMainContainer.style.display = 'none';
+                                loadingDiv.style.display = 'none';
+                                starContainer.style.display = 'flex';
+                                starContainer.style.flexDirection = 'row';
+                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                for (let i = 0; i < starValue; i++) {
+                                    const starDiv = document.createElement('div');
+                                    starDiv.innerHTML = starSVG;
+                                    starDiv.classList.add('star');
+                                    starContainer.appendChild(starDiv);
+                                    setTimeout(() => {
+                                        starDiv.style.opacity = '1'; 
+                                        starDiv.style.animationDelay = `${i * 0.5}s`;
+                                    }, i * 500);
+                                }
+                                for (let i = 0; i < maxStarValue - starValue; i++) {
+                                    const starDiv = document.createElement('div');
+                                    starDiv.innerHTML = blankStar;
+                                    starContainer.appendChild(starDiv);
+                                }
+                                scoreBoard.style.display = 'flex';
+                            }
+                        } else {
+                        console.log('Something went wrong', response);
+                        }
+                    }, 100);
                 } else {
                     // Handle error
                 }
@@ -327,4 +471,24 @@ import Layout from "../../layouts/Layout.astro";
         font-size: 40px;
         display: block;
     }
+    .hidden {
+        display: none;
+        transform: translateX(100%);
+    }
+
+    .slide-in {
+        display: block;
+        animation: slideIn 0.5s forwards;
+    }
+
+    @keyframes slideIn {
+        0% {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
 </style>
diff --git a/src/pages/cross/v3.astro b/src/pages/cross/v3.astro
index 3db0449..75922c2 100644
--- a/src/pages/cross/v3.astro
+++ b/src/pages/cross/v3.astro
@@ -26,7 +26,7 @@ import Layout from "../../layouts/Layout.astro";
                         <!-- <p id="LearningSubArea"></p> -->
                     </div>
                     <div class="flex flex-col justify-center place-items-center ">
-                        <img class="md:w-[80%] lg:w-[35%]" draggable="false" id="descImage" src="" alt="" />
+                        <img class="sm:w-[70%] md:w-[30%] lg:w-[30%]" draggable="false" id="descImage" src="" alt="" />
                         <p class="text-2xl lg:text-4xl text-center font-[600] text-[#7c4c23] mb-0 select-none " id="gameLabel"></p>
                     </div>
                     <form id="contactForm" class="">
@@ -34,21 +34,21 @@ import Layout from "../../layouts/Layout.astro";
                             <div class="flex flex-row gap-4 place-content-between">
                                 <div class="flex flex-col place-items-center">
                                     <label for="a1" class="round-checkbox-label">
-                                        <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image1" src="" alt="" draggable="false" class="select-none" style="width: 170px;"/>
                                         <p id="label1"></p>
                                     </label>
                                     <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox largerCheckbox" value="a1"/>
                                 </div>
                                 <div class="flex flex-col place-items-center">
                                     <label for="a2" class="round-checkbox-label">
-                                        <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image2" src="" alt="" draggable="false" class="select-none" style="width: 170px;"/>
                                         <p id="label2"></p>
                                     </label>
                                     <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox largerCheckbox" value="a2"/>
                                 </div>
                                 <div class="flex flex-col place-items-center">
                                     <label for="a3" class="round-checkbox-label">
-                                        <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                        <img id="image3" src="" alt="" draggable="false" class="select-none" style="width: 170px;"/>
                                         <p id="label3"></p>
                                     </label>
                                     <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox largerCheckbox" value="a3"/>
@@ -63,6 +63,30 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
             </section>
         </div>
+        <div class="absolute inset-0" style="display: none;" id="allParentDiv">
+            <div id="loadingMainContainer" class="w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div id="loadingState" style="display: none;" class="bg-white flex text-[#000] absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] items-center space-y-2 w-full px-6 py-16">
+            </div>
+            </div>
+            <div id="scoreBoard" class=" w-full h-screen bg-[#00000070] absolute" style="display: none;">
+              <div class="flex absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 max-w-lg flex-col rounded-[8px] bg-white space-y-2 w-full p-6" >
+                <div class="flex flex-row space-x-4 items-center justify-center">
+                  <div id="star-container"></div>
+                </div>
+                <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
+                  <img class="z-10" src="/assets/clip-art.svg" alt="" />
+                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
+                </div>
+                <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
+                  <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
+                  <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
+                </div>
+              </div>
+            </div>
+            <div class="clip-art-container absolute bottom-0 right-0 hidden">
+                <img src="/assets/svg/clip-art2.svg" alt="Clip Art" class="clip-art">
+            </div>
+        </div>
     </main>
 </Layout>
 <script is:inline>
@@ -76,6 +100,9 @@ import Layout from "../../layouts/Layout.astro";
     let url = window.location.href;
     let urlSplit = url.split('/');
     let gameName = urlSplit[3] + '-' + urlSplit[4].split('?')[0];
+    let maxStarValue = 5;
+    let progress = 0;
+    const progressBar = document.createElement('div');
 
     fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient3/${encodeURIComponent(gameId)}?filter[status][_eq]=published`)
         .then(res => res.json())
@@ -110,6 +137,44 @@ import Layout from "../../layouts/Layout.astro";
                 }
             }
         });
+        function showClipArt() {
+        const clipArtContainer = document.querySelector('.clip-art-container');
+
+        clipArtContainer.classList.remove('hidden');
+        clipArtContainer.classList.add('slide-in');
+    }
+
+    function addStarScalingStyles() {
+        const style = document.createElement('style');
+        style.innerHTML = `
+            @keyframes scaleUp {
+                0% {
+                    transform: scale(1.5);
+                }
+                100% {
+                    transform: scale(1);
+                }
+            }
+            .star {
+                display: inline-block;
+                transform-origin: center;
+                transform: scale(0); /* Initial state before animation */
+                opacity: 0; /* Initial opacity */
+                animation: scaleUp 0.5s ease forwards;
+            }
+        `; 
+        document.head.appendChild(style);
+    }
+    function progressIncrement() {
+        const interval = setInterval(() => {
+            if (progress >= 100) {
+                clearInterval(interval);
+            } else {
+                progress += 10; 
+                progressBar.style.width = `${progress}%`;
+            }
+        }, 100);
+    }
 
     function checkResult2(id) {
         const checkbox = document.getElementById('a' + id.slice(-1));
@@ -128,6 +193,7 @@ import Layout from "../../layouts/Layout.astro";
 
 
     function saveUserData() {
+        document.getElementById('allParentDiv').style.display = 'block';
         const endTime = Date.now();
         const timeDifference = endTime - startTime;
         const timeDifferenceInSeconds = timeDifference / 1000;
@@ -152,7 +218,7 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         totalPoints === 1 ? starValue = 5 : starValue = 3;
-
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
 
         let userData = {
             'gameName': gameName,
@@ -162,6 +228,58 @@ import Layout from "../../layouts/Layout.astro";
             'score': totalPoints,
             'star': starValue
         };
+        progressIncrement();
+        addStarScalingStyles();
+        showClipArt();
+        const blankStar = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#E3E3E3"/></svg>`
+        
+        const starSVG = `<svg width="61" height="58" viewBox="0 0 61 58" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M60.0193 21.917C59.8274 21.3224 59.4648 20.7975 58.9767 20.4076C58.4885 20.0177 57.8964 19.7801 57.2741 19.7244L39.9564 18.1518L33.1086 2.12366C32.6035 0.949062 31.4537 0.188965 30.176 0.188965C28.8984 0.188965 27.7484 0.94918 27.2436 2.12659L20.3957 18.1519L3.07528 19.7244C2.45372 19.7813 1.86254 20.0194 1.37503 20.4092C0.887526 20.799 0.525135 21.3232 0.332789 21.917C-0.0622597 23.132 0.302554 24.4646 1.26527 25.3046L14.3555 36.7846L10.4954 53.7878C10.213 55.038 10.6982 56.3304 11.7355 57.0801C12.293 57.483 12.9454 57.6881 13.6032 57.6881C14.1704 57.6881 14.7329 57.5352 15.238 57.2331L30.176 48.305L45.1087 57.2331C46.2014 57.8905 47.5788 57.8304 48.6139 57.0801C49.1206 56.7134 49.5083 56.2057 49.7288 55.6204C49.9492 55.035 49.9928 54.3977 49.854 53.7878L45.9941 36.7846L59.0841 25.307C59.555 24.8957 59.8947 24.3552 60.0609 23.7525C60.2272 23.1498 60.2127 22.5115 60.0193 21.917Z" fill="#FECE00"/></svg>`;
+        const starContainer = document.getElementById('star-container');
+        let scoreBoard = document.getElementById('scoreBoard');
+        let loadingMainContainer = document.getElementById('loadingMainContainer');
+        loadingMainContainer.style.display = 'flex';
+
+        const loadingDiv = document.getElementById('loadingState');
+        loadingDiv.style.display = 'flex';
+
+        const containerDiv = document.createElement('div');
+        containerDiv.classList.add('w-full');
+        containerDiv.style.display = 'flex';
+        containerDiv.style.flexDirection = 'column';
+        containerDiv.style.justifyContent = 'center';
+        containerDiv.style.alignItems = 'center';
+
+        const paragraph = document.createElement('p');
+        paragraph.textContent = 'HOLD ON.';
+        paragraph.style.fontSize = '16px';
+        paragraph.style.fontWeight = '600';
+        paragraph.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(paragraph);
+
+        const progressBarContainer = document.createElement('div');
+        progressBarContainer.style.position = 'relative';
+        progressBarContainer.style.display = 'flex';
+        progressBarContainer.style.alignItems = 'center';
+        progressBarContainer.style.border = '1px solid #AFB8E6';
+        progressBarContainer.style.height = '10px'; 
+        progressBarContainer.style.width = '100%';
+        progressBarContainer.style.marginTop = '30px';
+        progressBarContainer.style.marginBottom = '30px';
+        containerDiv.appendChild(progressBarContainer);
+
+        progressBar.style.height = '10px';
+        progressBar.style.backgroundColor = '#D7DCF2';
+        progressBar.style.width = '0%';
+        progressBarContainer.appendChild(progressBar);
+
+        loadingDiv.appendChild(containerDiv);
+
+        const calculationText = document.createElement('p');
+        calculationText.textContent = 'Your stars are being calculated...';
+        calculationText.style.fontSize = '14px';
+        calculationText.style.fontWeight = '600';
+        calculationText.style.color = 'rgba(0, 0, 0, 0.38)';
+        containerDiv.appendChild(calculationText);
         // console.log(userData);
         fetch(`https://api.teachertrainingkolkata.in/api/saveGameScore`, {
             method: 'POST',
@@ -172,11 +290,36 @@ import Layout from "../../layouts/Layout.astro";
         })
             .then(response => {
                 if (response.ok) {
-                    if(response.status == 200){
-                        let savedMessageSection = document.getElementById('savedMessage');
-                        savedMessageSection.style.display = "block";
-                        savedMessageSection.innerHTML = 'Saved Successfully';
-                    }
+                    setTimeout(() => {
+                        if (response.ok) {
+                            if (response.status == 200) {
+                                document.getElementById('allParentDiv').style.display = 'block';
+                                loadingMainContainer.style.display = 'none';
+                                loadingDiv.style.display = 'none';
+                                starContainer.style.display = 'flex';
+                                starContainer.style.flexDirection = 'row';
+                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
+                                for (let i = 0; i < starValue; i++) {
+                                    const starDiv = document.createElement('div');
+                                    starDiv.innerHTML = starSVG;
+                                    starDiv.classList.add('star');
+                                    starContainer.appendChild(starDiv);
+                                    setTimeout(() => {
+                                        starDiv.style.opacity = '1'; 
+                                        starDiv.style.animationDelay = `${i * 0.5}s`;
+                                    }, i * 500);
+                                }
+                                for (let i = 0; i < maxStarValue - starValue; i++) {
+                                    const starDiv = document.createElement('div');
+                                    starDiv.innerHTML = blankStar;
+                                    starContainer.appendChild(starDiv);
+                                }
+                                scoreBoard.style.display = 'flex';
+                            }
+                        } else {
+                        console.log('Something went wrong', response);
+                        }
+                    }, 100);
                 } else {
                     // console.log('Something Wrong', response);
                 }
@@ -280,4 +423,24 @@ import Layout from "../../layouts/Layout.astro";
         font-size: 40px;
         display: block;
     }
+    .hidden {
+        display: none;
+        transform: translateX(100%);
+    }
+
+    .slide-in {
+        display: block;
+        animation: slideIn 0.5s forwards;
+    }
+
+    @keyframes slideIn {
+        0% {
+            transform: translateX(100%);
+            opacity: 0;
+        }
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
 </style>
diff --git a/src/pages/data-table.astro b/src/pages/data-table.astro
new file mode 100644
index 0000000..ec924e7
--- /dev/null
+++ b/src/pages/data-table.astro
@@ -0,0 +1,160 @@
+<div class="container mx-auto p-4">
+    <div class="flex justify-between items-center mb-4">
+      <input
+        type="text"
+        id="searchInput"
+        placeholder="Search..."
+        class="p-2 border border-gray-300 rounded"
+        onkeyup="searchTable()"
+      />
+      <select id="rowsPerPage" onchange="paginateTable()" class="p-2 border border-gray-300 rounded">
+        <option value="5">5 rows</option>
+        <option value="10">10 rows</option>
+        <option value="15">15 rows</option>
+      </select>
+      <button
+        class="p-2 bg-green-500 text-white rounded"
+        onclick="exportTableToCSV()"
+      >
+        Export to CSV
+      </button>
+    </div>
+  
+    <table class="min-w-full table-auto border-collapse border border-gray-300 text-sm">
+      <thead class="bg-gray-200">
+        <tr>
+          <th class="p-2 cursor-pointer" onclick="sortTable(0)">Name</th>
+          <th class="p-2 cursor-pointer" onclick="sortTable(1)">Age</th>
+          <th class="p-2 cursor-pointer" onclick="sortTable(2)">Country</th>
+        </tr>
+      </thead>
+      <tbody id="dataTable">
+        <!-- Table rows will be injected by JavaScript -->
+      </tbody>
+    </table>
+  
+    <div id="pagination" class="mt-4 flex justify-center space-x-2"></div>
+  </div>
+  
+  <script is:inline>
+    const tableData = [
+    { name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },
+    { name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Suvodip", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },{ name: "Alice", age: 25, country: "USA" },
+    { name: "Bob", age: 30, country: "UK" },
+    { name: "Charlie", age: 35, country: "Canada" },
+    // Add more data here
+    ];
+
+    let currentPage = 1;
+    let rowsPerPage = 5;
+    let currentData = [...tableData];
+
+    function renderTable(data) {
+    const tableBody = document.getElementById("dataTable");
+    tableBody.innerHTML = "";
+    
+    const start = (currentPage - 1) * rowsPerPage;
+    const paginatedData = data.slice(start, start + rowsPerPage);
+    
+    paginatedData.forEach(row => {
+        const tr = document.createElement("tr");
+        tr.classList.add("hover:bg-gray-100");
+        tr.innerHTML = `
+        <td class="border p-2">${row.name}</td>
+        <td class="border p-2">${row.age}</td>
+        <td class="border p-2">${row.country}</td>
+        `;
+        tableBody.appendChild(tr);
+    });
+
+    renderPagination(data.length);
+    }
+
+    function sortTable(colIndex) {
+    currentData.sort((a, b) => {
+        const column = Object.keys(a)[colIndex];
+        return a[column] > b[column] ? 1 : -1;
+    });
+    renderTable(currentData);
+    }
+
+    function searchTable() {
+    const query = document.getElementById("searchInput").value.toLowerCase();
+    currentData = tableData.filter(row => {
+        return Object.values(row).some(val => val.toString().toLowerCase().includes(query));
+    });
+    renderTable(currentData);
+    }
+
+    function paginateTable() {
+    rowsPerPage = parseInt(document.getElementById("rowsPerPage").value);
+    currentPage = 1;
+    renderTable(currentData);
+    }
+
+    function renderPagination(totalRows) {
+    const pagination = document.getElementById("pagination");
+    pagination.innerHTML = "";
+    const totalPages = Math.ceil(totalRows / rowsPerPage);
+
+    for (let i = 1; i <= totalPages; i++) {
+        const button = document.createElement("button");
+        button.classList.add("p-2", "border", "border-gray-300", "rounded");
+        if (i === currentPage) {
+        button.classList.add("bg-blue-500");
+        button.classList.add("text-white");
+        }
+        button.textContent = i;
+        button.onclick = () => {
+        currentPage = i;
+        renderTable(currentData);
+        };
+        pagination.appendChild(button);
+    }
+    }
+
+    // CSV Export Function
+    function exportTableToCSV() {
+    const csvRows = [];
+    const headers = Object.keys(tableData[0]);
+    csvRows.push(headers.join(","));
+
+    currentData.forEach(row => {
+        const values = headers.map(header => row[header]);
+        csvRows.push(values.join(","));
+    });
+
+    const csvContent = csvRows.join("\n");
+    const blob = new Blob([csvContent], { type: "text/csv" });
+    const url = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.setAttribute("hidden", "");
+    a.setAttribute("href", url);
+    a.setAttribute("download", "table_data.csv");
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    }
+
+    // Initialize table
+    paginateTable();
+
+
+
+  </script>
\ No newline at end of file
diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro
index 4234e53..a83232c 100644
--- a/src/pages/drag/dragdrop_phonics.astro
+++ b/src/pages/drag/dragdrop_phonics.astro
@@ -14,7 +14,7 @@ import Layout from '../../layouts/Layout.astro';
           </div>
           <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
             <img class="z-10" src="/assets/clip-art.svg" alt="" />
-            <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+            <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
             <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index 4253999..8e7bb87 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -19,7 +19,7 @@ const numberOfTimes = starNumberOfTime;
           </div>
           <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
             <img class="z-10" src="/assets/animate-clipart.gif" alt="" style="width: 90.21px; height: 86.24px;" />
-            <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+            <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
             <button onclick="" class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
diff --git a/src/pages/drag/match_phonics.astro b/src/pages/drag/match_phonics.astro
index 6fc33df..77faed3 100644
--- a/src/pages/drag/match_phonics.astro
+++ b/src/pages/drag/match_phonics.astro
@@ -15,7 +15,7 @@ import Layout from '../../layouts/Layout.astro';
           </div>
           <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
             <img class="z-10" src="/assets/clip-art.svg" alt="" />
-            <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+            <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
             <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro
index 42a41a3..b788bee 100644
--- a/src/pages/drag/v2.astro
+++ b/src/pages/drag/v2.astro
@@ -15,7 +15,7 @@ import Layout from '../../layouts/Layout.astro';
           </div>
           <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
             <img class="z-10" src="/assets/clip-art.svg" alt="" />
-            <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+            <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
             <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro
index 78b81fd..10e55be 100644
--- a/src/pages/drag/v3.astro
+++ b/src/pages/drag/v3.astro
@@ -15,7 +15,7 @@ import Layout from '../../layouts/Layout.astro';
           </div>
           <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
             <img class="z-10" src="/assets/clip-art.svg" alt="" />
-            <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+            <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
             <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro
index 083a1d3..dd8d672 100644
--- a/src/pages/drag/v4.astro
+++ b/src/pages/drag/v4.astro
@@ -14,7 +14,7 @@ import Layout from '../../layouts/Layout.astro';
           </div>
           <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
             <img class="z-10" src="/assets/clip-art.svg" alt="" />
-            <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+            <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
           </div>
           <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
             <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
diff --git a/src/pages/tick/tick_phonics_v1.astro b/src/pages/tick/tick_phonics_v1.astro
index 8e035fb..cde4917 100644
--- a/src/pages/tick/tick_phonics_v1.astro
+++ b/src/pages/tick/tick_phonics_v1.astro
@@ -80,7 +80,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
@@ -99,7 +99,7 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
                 <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
                   <img class="z-10" src="/assets/clip-art.svg" alt="" />
-                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
                   <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
@@ -221,11 +221,11 @@ import Layout from "../../layouts/Layout.astro";
         document.getElementById('allParentDiv').style.display = 'block';
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
-        if (checkedCount < 2) {
+        if (checkedCount < 0) {
             // Show error message if less than 3 checkboxes are checked
             let errorMessageSection = document.getElementById('errorMessage');
             errorMessageSection.style.display = "block";
-            errorMessageSection.innerHTML = 'Please select at least 2 options.';
+            errorMessageSection.innerHTML = 'Please select at least 1 options.';
             return;
         } else {
             // Hide error message if validation passes
@@ -257,6 +257,7 @@ import Layout from "../../layouts/Layout.astro";
         // Move the userData object creation inside the saveUserData function if needed
 
         wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
@@ -337,7 +338,7 @@ import Layout from "../../layouts/Layout.astro";
                                 loadingDiv.style.display = 'none';
                                 starContainer.style.display = 'flex';
                                 starContainer.style.flexDirection = 'row';
-                                document.getElementById('countStar').innerHTML = starValue;
+                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
                                 for (let i = 0; i < starValue; i++) {
                                     const starDiv = document.createElement('div');
                                     starDiv.innerHTML = starSVG;
diff --git a/src/pages/tick/tick_phonics_v2.astro b/src/pages/tick/tick_phonics_v2.astro
index b7edc62..0fc16ee 100644
--- a/src/pages/tick/tick_phonics_v2.astro
+++ b/src/pages/tick/tick_phonics_v2.astro
@@ -104,7 +104,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
@@ -123,7 +123,7 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
                 <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
                   <img class="z-10" src="/assets/clip-art.svg" alt="" />
-                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
                   <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
@@ -252,11 +252,11 @@ import Layout from "../../layouts/Layout.astro";
         document.getElementById('allParentDiv').style.display = 'block';
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
         const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
-        if (checkedCount < 3) {
+        if (checkedCount < 0) {
             // Show error message if less than 3 checkboxes are checked
             let errorMessageSection = document.getElementById('errorMessage');
             errorMessageSection.style.display = "block";
-            errorMessageSection.innerHTML = 'Please select at least 2 options.';
+            errorMessageSection.innerHTML = 'Please select at least 1 options.';
             return;
         } else {
             // Hide error message if validation passes
@@ -284,6 +284,7 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
         wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
         
         let userData = {
             'gameName': gameName,
@@ -366,7 +367,7 @@ import Layout from "../../layouts/Layout.astro";
                                 loadingDiv.style.display = 'none';
                                 starContainer.style.display = 'flex';
                                 starContainer.style.flexDirection = 'row';
-                                document.getElementById('countStar').innerHTML = starValue;
+                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
                                 for (let i = 0; i < starValue; i++) {
                                     const starDiv = document.createElement('div');
                                     starDiv.innerHTML = starSVG;
diff --git a/src/pages/tick/tick_phonics_v3.astro b/src/pages/tick/tick_phonics_v3.astro
index 5314aeb..6f448f4 100644
--- a/src/pages/tick/tick_phonics_v3.astro
+++ b/src/pages/tick/tick_phonics_v3.astro
@@ -81,7 +81,7 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
                 <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
                   <img class="z-10" src="/assets/clip-art.svg" alt="" />
-                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
                   <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
@@ -211,6 +211,7 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
         totalPoints === 1 ? starValue = 5 : starValue = 3;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
@@ -289,7 +290,7 @@ import Layout from "../../layouts/Layout.astro";
                                 loadingDiv.style.display = 'none';
                                 starContainer.style.display = 'flex';
                                 starContainer.style.flexDirection = 'row';
-                                document.getElementById('countStar').innerHTML = starValue;
+                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
                                 for (let i = 0; i < starValue; i++) {
                                     const starDiv = document.createElement('div');
                                     starDiv.innerHTML = starSVG;
diff --git a/src/pages/tick/v1.astro b/src/pages/tick/v1.astro
index 5dd1925..381960f 100644
--- a/src/pages/tick/v1.astro
+++ b/src/pages/tick/v1.astro
@@ -77,7 +77,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
                             <!-- <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p> -->
                         </div>
                     </form>
@@ -96,7 +96,7 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
                 <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
                   <img class="z-10" src="/assets/clip-art.svg" alt="" />
-                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
+                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>
                 </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
                   <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
@@ -185,7 +185,7 @@ import Layout from "../../layouts/Layout.astro";
                 opacity: 0; /* Initial opacity */
                 animation: scaleUp 0.5s ease forwards;
             }
-        `;
+        `; 
         document.head.appendChild(style);
     }
     function progressIncrement() {
@@ -219,11 +219,11 @@ import Layout from "../../layouts/Layout.astro";
         document.getElementById('allParentDiv').style.display = 'block';
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6'];
         const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
-        if (checkedCount < 2) {
+        if (checkedCount < 0) {
             // Show error message if less than 3 checkboxes are checked
             let errorMessageSection = document.getElementById('errorMessage');
             errorMessageSection.style.display = "block";
-            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            errorMessageSection.innerHTML = 'Please select at least 1 options.';
             return;
         } else {
             // Hide error message if validation passes
@@ -254,6 +254,7 @@ import Layout from "../../layouts/Layout.astro";
         });
         // Move the userData object creation inside the saveUserData function if needed
         wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
@@ -333,7 +334,7 @@ import Layout from "../../layouts/Layout.astro";
                                 loadingDiv.style.display = 'none';
                                 starContainer.style.display = 'flex';
                                 starContainer.style.flexDirection = 'row';
-                                document.getElementById('countStar').innerHTML = starValue;
+                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
                                 for (let i = 0; i < starValue; i++) {
                                     const starDiv = document.createElement('div');
                                     starDiv.innerHTML = starSVG;
diff --git a/src/pages/tick/v2.astro b/src/pages/tick/v2.astro
index 84fbd89..80a9b26 100644
--- a/src/pages/tick/v2.astro
+++ b/src/pages/tick/v2.astro
@@ -104,7 +104,7 @@ import Layout from "../../layouts/Layout.astro";
                             </div>
                         </div>
                         <div class="flex flex-col justify-center place-items-center pt-8">
-                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 3 options.</p>
+                            <p class="text-[20px] font-[600] text-[#FF0000] px-[20px] py-[10px]" style="display: none;" id="errorMessage">Please select at least 1 options.</p>
                             <p class="text-[20px] font-[600] text-[#FFFFFF] bg-[#004aad] px-[20px] py-[10px]" style="display: none;" id="savedMessage"></p>
                         </div>
                     </form>
@@ -123,8 +123,7 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
                 <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
                   <img class="z-10" src="/assets/clip-art.svg" alt="" />
-                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
-                </div>
+                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>                </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
                   <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
@@ -251,11 +250,11 @@ import Layout from "../../layouts/Layout.astro";
         document.getElementById('allParentDiv').style.display = 'block';
         const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
         const checkedCount = checkboxes.filter(id => document.getElementById(id).checked).length;
-        if (checkedCount < 3) {
+        if (checkedCount < 0) {
             // Show error message if less than 3 checkboxes are checked
             let errorMessageSection = document.getElementById('errorMessage');
             errorMessageSection.style.display = "block";
-            errorMessageSection.innerHTML = 'Please select at least 3 options.';
+            errorMessageSection.innerHTML = 'Please select at least 1 options.';
             return;
         } else {
             // Hide error message if validation passes
@@ -295,6 +294,7 @@ import Layout from "../../layouts/Layout.astro";
         });
 
         wrongCount === 0 ? starValue = 5 : wrongCount === 1 ? starValue = 4 : starValue = 3;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
@@ -374,7 +374,7 @@ import Layout from "../../layouts/Layout.astro";
                                     loadingDiv.style.display = 'none';
                                     starContainer.style.display = 'flex';
                                     starContainer.style.flexDirection = 'row';
-                                    document.getElementById('countStar').innerHTML = starValue;
+                                    document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
                                     for (let i = 0; i < starValue; i++) {
                                         const starDiv = document.createElement('div');
                                         starDiv.innerHTML = starSVG;
diff --git a/src/pages/tick/v3.astro b/src/pages/tick/v3.astro
index 02d3385..3179c13 100644
--- a/src/pages/tick/v3.astro
+++ b/src/pages/tick/v3.astro
@@ -82,8 +82,7 @@ import Layout from "../../layouts/Layout.astro";
                 </div>
                 <div class="flex flex-row" style="margin-top: 15px; margin-bottom: 15px;">
                   <img class="z-10" src="/assets/clip-art.svg" alt="" />
-                  <p class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);">Well done! <span id="countStar"></span> stars for your effort! <br> Keep pushing, you’ve got this!</p>
-                </div>
+                  <p id="starFeedbackMessage" class="text-[#0348A8] text-[12px] font-[700] p-6 rounded-[10px] -ml-[10px]" style="background: linear-gradient(270.05deg, #FFFFFF 4.67%, #DAEAFF 99.61%);"></p>                </div>
                 <div class="flex flex-col w-full max-w-sm items-center justify-center mx-auto gap-3">
                   <button class="rounded-[4px] bg-[#0348A8] text-[#FFF] text-[12px] font-[700] p-2.5 w-full border-[1px] border-[#0348A8]">Wow, Lets Go</button>
                   <button class="border-[1px] border-[#0348A8] p-2.5 rounded-[4px] text-[#0348A8] w-full">Try Again</button>
@@ -223,6 +222,7 @@ import Layout from "../../layouts/Layout.astro";
             }
         });
         totalPoints === 1 ? starValue = 5 : starValue = 3;
+        let feedbackMessage; starValue === 5 ? feedbackMessage = `Fantastic! You earned ${starValue} stars! <br> Keep up the amazing work – you're a superstar!` : starValue === 4 ? feedbackMessage = `Great job! ${starValue} stars – you're so close to <br> perfection! ` : starValue === 3 ? feedbackMessage = `Well done! ${starValue} stars for your effort! <br> Keep pushing, you’ve got this!` : '';
         let userData = {
             'gameName': gameName,
             'gameID': gameId,
@@ -301,7 +301,7 @@ import Layout from "../../layouts/Layout.astro";
                                 loadingDiv.style.display = 'none';
                                 starContainer.style.display = 'flex';
                                 starContainer.style.flexDirection = 'row';
-                                document.getElementById('countStar').innerHTML = starValue;
+                                document.getElementById('starFeedbackMessage').innerHTML = feedbackMessage;
                                 for (let i = 0; i < starValue; i++) {
                                     const starDiv = document.createElement('div');
                                     starDiv.innerHTML = starSVG;