diff --git a/src/pages/cross/v1.astro b/src/pages/cross/v1.astro
index 10759c8..93cebc8 100644
--- a/src/pages/cross/v1.astro
+++ b/src/pages/cross/v1.astro
@@ -7,7 +7,7 @@ import Layout from "../../layouts/Layout.astro";
             <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
                 <div class="container mx-auto px-4">
                     <div class="flex flex-row place-content-between pt-6">
-                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Tick</p>
+                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
                         <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
                     </div>
                     <div class="flex flex-col">
@@ -72,7 +72,7 @@ import Layout from "../../layouts/Layout.astro";
     const paramsID = params.get('id');
     let gameData = null;
 
-    fetch(`https://management.beanstalkedu.com/items/game_tick_variant1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient1/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
         .then(res => res.json())
         .then(data => {
             gameData = data.data;
@@ -99,7 +99,7 @@ import Layout from "../../layouts/Layout.astro";
             document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
             document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
 
-            const assetsURL = 'https://management.beanstalkedu.com/assets/';
+            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
             for (let i = 1; i <= 6; i++) {
                 const imageId = `image${i}`;
                 document.getElementById(imageId).src = assetsURL + gameData[imageId];
@@ -112,12 +112,12 @@ import Layout from "../../layouts/Layout.astro";
 
         if (checkbox.checked) {
             if (gameData[id.replace('image', 'a')] === true) {
-                element.classList.add('redBorder');
-            } else {
                 element.classList.add('greenBorder');
+            } else {
+                element.classList.add('redBorder');
             }
         } else {
-            element.classList.remove('redBorder', 'greenBorder');
+            element.classList.remove('greenBorder', 'redBorder');
         }
     }
     let url = window.location.href;
diff --git a/src/pages/cross/v2.astro b/src/pages/cross/v2.astro
new file mode 100644
index 0000000..ff31de7
--- /dev/null
+++ b/src/pages/cross/v2.astro
@@ -0,0 +1,269 @@
+---
+import Layout from "../../layouts/Layout.astro";
+---
+<Layout title="">
+    <main>
+        <div>
+            <section class="bg-white bg-center bg-no-repeat bg-cover h-screen">
+                <div class="container mx-auto px-4">
+                    <div class="flex flex-row place-content-between pt-6">
+                        <p class="text-5xl text-[#5ac6c8] font-bold select-none">Cross</p>
+                        <img src="/assets/top_logo.png" alt="" draggable="false" class="select-none">
+                    </div>
+                    <div class="flex flex-col">
+                        <p id="LearningArea"></p>
+                        <p id="LearningSubArea_copy"></p>
+                    </div>
+                    <p class="text-4xl text-center font-[600] text-[#7c4c23] mb-4 select-none" id="gameDescription"></p>
+                    <form id="contactForm">
+                        <div id="" class="flex flex-row place-content-between gap-4">
+                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
+                                <label for="a1" class="round-checkbox-label">
+                                    <img id="image1" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label1"></p>
+                                </label>
+                                <input onclick="checkResult2('image1');" type="checkbox" id="a1" class="round-checkbox-input myCheckbox" value="a1"/>
+    
+                                <label for="a2" class="round-checkbox-label">
+                                    <img id="image2" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label2"></p>
+                                </label>
+                                <input onclick="checkResult2('image2');" type="checkbox" id="a2" class="round-checkbox-input myCheckbox" value="a2"/>
+    
+                                <label for="a3" class="round-checkbox-label">
+                                    <img id="image3" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label3"></p>
+                                </label>
+                                <input onclick="checkResult2('image3');" type="checkbox" id="a3" class="round-checkbox-input myCheckbox" value="a3"/>
+                            </div>
+                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
+                                <label for="a4" class="round-checkbox-label">
+                                    <img id="image4" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label4"></p>
+                                </label>
+                                <input onclick="checkResult2('image4');" type="checkbox" id="a4" class="round-checkbox-input myCheckbox" value="a4"/>
+    
+                                <label for="a5" class="round-checkbox-label">
+                                    <img id="image5" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label5"></p>
+                                </label>
+                                <input onclick="checkResult2('image5');" type="checkbox" id="a5" class="round-checkbox-input myCheckbox" value="a5"/>
+    
+                                <label for="a6" class="round-checkbox-label">
+                                    <img id="image6" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label6"></p>
+                                </label>
+                                <input onclick="checkResult2('image6');" type="checkbox" id="a6" class="round-checkbox-input myCheckbox" value="a6"/>
+                            </div>
+                            <div class="flex flex-col gap-x-6 gap-y-2 place-items-center">
+                                <label for="a7" class="round-checkbox-label">
+                                    <img id="image7" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label7"></p>
+                                </label>
+                                <input onclick="checkResult2('image7');" type="checkbox" id="a7" class="round-checkbox-input myCheckbox" value="a7"/>
+    
+                                <label for="a8" class="round-checkbox-label">
+                                    <img id="image8" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label8"></p>
+                                </label>
+                                <input onclick="checkResult2('image8');" type="checkbox" id="a8" class="round-checkbox-input myCheckbox" value="a8"/>
+    
+                                <label for="a9" class="round-checkbox-label">
+                                    <img id="image9" src="" alt="" draggable="false" class="select-none" />
+                                    <p id="label9"></p>
+                                </label>
+                                <input onclick="checkResult2('image9');" type="checkbox" id="a9" class="round-checkbox-input myCheckbox" value="a9"/>
+                            </div>
+                        </div>
+                        <div class="flex flex-col justify-center place-items-center pt-8">
+                            <p id="savedMessage"></p>
+                            <input onclick="saveUserData();" class="bg-blue-700 px-8 py-2 rounded-lg shadow-lg font-bold text-white cursor-pointer" type="submit" value="Submit">
+                        </div>
+                    </form>
+                </div>
+            </section>
+        </div>
+    </main>
+</Layout>
+<script is:inline>
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    
+    fetch(`https://game-du.teachertrainingkolkata.in/items/game_cross_varient2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+        .then(res => res.json())
+        .then(data => {
+            gameData = data.data;
+            // console.log(gameData)
+            document.getElementById("gameDescription").innerHTML = gameData.description;
+            if(gameData.label1){
+                document.getElementById("label1").innerHTML = gameData.label1;
+            }
+            if(gameData.label2){
+                document.getElementById("label2").innerHTML = gameData.label2;
+            }
+            if(gameData.label3){
+                document.getElementById("label3").innerHTML = gameData.label3;
+            }
+            if(gameData.label4){
+                document.getElementById("label4").innerHTML = gameData.label4;
+            }
+            if(gameData.label5){
+                document.getElementById("label5").innerHTML = gameData.label5;
+            }
+            if(gameData.label6){
+                document.getElementById("label6").innerHTML = gameData.label6;
+            }
+            if(gameData.label7){
+                document.getElementById("label7").innerHTML = gameData.label7;
+            }
+            if(gameData.label8){
+                document.getElementById("label8").innerHTML = gameData.label8;
+            }
+            if(gameData.label9){
+                document.getElementById("label9").innerHTML = gameData.label9;
+            }
+            document.getElementById('LearningArea').innerHTML = gameData.LearningArea;
+            document.getElementById('LearningSubArea_copy').innerHTML = gameData.LearningSubArea_copy;
+            const assetsURL = 'https://game-du.teachertrainingkolkata.in/assets/';
+            for (let i = 1; i <= 9; i++) {
+                const imageId = `image${i}`;
+                document.getElementById(imageId).src = assetsURL + gameData[imageId];
+            }
+        });
+
+    function checkResult2(id) {
+        const checkbox = document.getElementById('a' + id.slice(-1));
+        const element = document.getElementById(id);
+
+        if (checkbox.checked) {
+            if (gameData[id.replace('image', 'a')] === true) {
+                element.classList.add('redBorder');
+            } else {
+                element.classList.add('greenBorder');
+            }
+        } else {
+            element.classList.remove('redBorder', 'greenBorder');
+        }
+    }
+
+    let url = window.location.href;
+    let urlSplit = url.split('/');
+    let gameName = urlSplit[3] + '-' + urlSplit[4];
+    let formatedDateTime;
+
+    window.onload = function () {
+        let currentTime = new Date();
+        formatedDateTime = currentTime.toLocaleString();
+    };
+
+    function saveUserData() {
+        // const checkboxValues = {
+        //     a1: document.getElementById('a1').checked,
+        //     a2: document.getElementById('a2').checked,
+        //     a3: document.getElementById('a3').checked,
+        //     a4: document.getElementById('a4').checked,
+        //     a5: document.getElementById('a5').checked,
+        //     a6: document.getElementById('a6').checked,
+        //     a7: document.getElementById('a7').checked,
+        //     a8: document.getElementById('a8').checked,
+        //     a9: document.getElementById('a9').checked,
+        // };
+        const checkboxes = ['a1', 'a2', 'a3', 'a4', 'a5', 'a6', 'a7', 'a8', 'a9'];
+        const checkboxValues = checkboxes.map(id => {
+            const checkbox = document.getElementById(id);
+            const element = document.getElementById('image' + id.slice(-1));
+            return {
+                id: id,
+                checked: checkbox.checked,
+                element: element
+            };
+        });
+
+        // Count points based on checkbox values and "greenBorder" class
+        let totalPoints = 0;
+        checkboxValues.forEach(checkbox => {
+            if (checkbox.checked && checkbox.element.classList.contains('greenBorder')) {
+                totalPoints += 1;
+            }
+        });
+        let userData = {
+            'user': 'tick-v2@beanstalkedu.com',
+            'game_name': gameName,
+            'starts': formatedDateTime,
+            // 'game_start' : gameStartTime,
+            'score' : totalPoints,
+        };
+
+        fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(userData)
+        })
+            .then(response => {
+                if (response.ok) {
+                    document.getElementById('savedMessage').innerHTML = 'Saved Successfully';
+                } else {
+                    console.log('Something Wrong', response);
+                }
+            })
+            .catch(error => {
+                console.error('An error occurred', error);
+            });
+    }
+
+    document.addEventListener('DOMContentLoaded', function () {
+        const contactForm = document.getElementById('contactForm');
+        contactForm.addEventListener('submit', async function (event) {
+            event.preventDefault();
+        });
+    });
+</script>
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Lobster&family=Quicksand:wght@500;700&display=swap');
+    body{
+        font-family: Quicksand;
+    }
+    .greenBorder{
+        border: 4px solid #008000;
+        border-radius: 10%;
+        transition: border 0.5s, border-color 0.3s, transform 6s;
+    }
+    .redBorder{
+        border: 4px solid red;
+        border-radius: 10%;
+    }
+    #image1, #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9{
+        width: 150px;
+    }
+    #label1, #label2, #label3, #label4, #label5, #label6, #label7, #label8, #label9{
+        text-align: center;
+        font-weight: bold;
+        color: #7C4C23;
+        font-size: 20px;
+        padding-top: 10px;
+    }
+    #LearningArea, #LearningSubArea_copy{
+        font-size: 20px;
+        color: #7C4C23;
+        font-weight: bold;
+    }
+    .round-checkbox-label {
+        display: inline-block;
+        cursor: pointer;
+        position: relative;
+        transition: background-color 0.3s, border-color 0.3s, transform 0.3s;
+    }
+    .round-checkbox-input:checked + .round-checkbox-label {
+        border-radius: 30%;
+    }
+    .round-checkbox-input:checked + .round-checkbox-label::after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        font-size: 40px;
+        display: block;
+    }
+</style>
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 67db276..d8ad63c 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -259,7 +259,7 @@ import Layout from '../../layouts/Layout.astro';
                 // ${color}
                 // Create the SVG element with dynamic fill color
                 if (!isMobile) {
-                    pencilSize = '40px';
+                    pencilSize = '150px';
                     button.style.width = `${buttonSize}px`; 
                     button.style.height = `${buttonSize}px`;
                 } else {
@@ -267,10 +267,12 @@ import Layout from '../../layouts/Layout.astro';
                     button.style.width = `45px`;
                     button.style.height = `45px`;
                 }
-                button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
-                button.style.boxShadow = '5px 10px 30px #7c4c2390';
-                button.style.borderRadius = '20%';
-                button.style.marginRight = `${buttonSpacing}px`;   
+                if(isMobile){
+                    button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
+                } else{
+                    button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+                }
+                button.style.marginRight = `${buttonSpacing}px`; 
                     button.addEventListener('click', () => {
                     // Remove the border from the previously selected button, if any
                     if (selectedButton) {
@@ -283,14 +285,17 @@ import Layout from '../../layouts/Layout.astro';
                     // Set the new selected color
                     selectedColor = color;
                     // Add a border or tick mark to indicate the selected color to the current button
-                    button.style.border = "2px solid";
-                    button.style.borderColor = color;
                     button.style.scale = '1.1';
                     if(!isMobile){
                         button.style.transform = 'translateX(0.75rem)'; 
                         button.style.transition = 'transform 0.6s ease'; // Add this line for a 0.3 second duration
                         button.style.marginTop = '5px';
                         button.style.marginBottom = '5px';
+                    } else{
+                         button.style.border = "2px solid";
+                        button.style.borderColor = color;
+                        button.style.boxShadow = '5px 10px 30px #7c4c2390';
+                        button.style.borderRadius = '20%';
                     }
                     // Update the selectedButton variable to the current button
                     selectedButton = button;