diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro
new file mode 100644
index 0000000..db73b32
--- /dev/null
+++ b/src/pages/drawing/drawing_phonics.astro
@@ -0,0 +1,499 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title='Drawing Game'>
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+    </main>
+</Layout>
+<script is:inline>
+    const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+    // const drawingZone = {
+    //     x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+    //     y: window.innerHeight / 1,
+    //     width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+    //     height: window.innerHeight / 2,
+    // };
+    if(isMobile){
+        submitWidth = 250;
+        submitHeight = 110;
+        noticeWidth = 100;
+        noticeHeight = 0;
+        downloadWidth = 67;
+        downloadHeight = 200;
+        learningWidth = 200;
+        learningHeight = 365
+        image1Width = 3.7;
+        image1Height = 2.5;
+        image2Width = 2;
+        image2Right = 65;
+        image2Height = 2;
+        image2Bottom = 110;
+    } else {
+        submitWidth = 380;
+        submitHeight = 95;
+        noticeWidth = 0;
+        noticeHeight = 0;
+        downloadWidth = 180;
+        downloadHeight = 70;
+        learningWidth = 450;
+        learningHeight = 350;
+        image1Width = 4;
+        image1Height = 1.8;
+        image2Width = 2;
+        image2Right = 400;
+        image2Height = 1.8;
+        image2Bottom = 0;
+    }
+    var assetsList = {}
+    var snapshotButton;
+    let submitButton;
+    let formattedDateTime;
+    let shortUniqueID;
+    let defaultColor;
+    gameResult = [];
+    window.onload = function() {
+        currentDate = new Date();
+        formattedDateTime = currentDate.toLocaleString();
+        // console.log("Page loaded on: " + formattedDateTime);
+    };
+    function generateShortUniqueID(length) {
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let result = '';
+        for (let i = 0; i < length; i++) {
+            const randomIndex = Math.floor(Math.random() * characters.length);
+            result += characters.charAt(randomIndex);
+        }
+        return result;
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    .then(response => response.json())
+    .then(({data}) => {
+        colorList = data.colors;
+        defaultColor = colorList[0];
+    const {image1, image2} = data;
+    assetsList.image1 = "https://game-du.teachertrainingkolkata.in/assets/" + image1; // + "?width=450";
+    assetsList.image2 = "https://game-du.teachertrainingkolkata.in/assets/" + image2; // + "?width=450";
+    // console.log('Here is image -1', "https://game-du.teachertrainingkolkata.in/assets/" + image1)
+    const config = {
+        type: Phaser.AUTO,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        backgroundColor: '#ffffff',
+        scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+        },
+        scene: {
+            preload: preload,
+            create: create,
+            update: update,
+        },
+    };
+      const game = new Phaser.Game(config);    
+    })
+    .catch(error => {
+      console.error('Error fetching initial data:', error);
+    });
+    const customWidth = window.innerWidth;
+    const customHeight = window.innerHeight;
+    let graphics;
+    let isDrawing = false;
+    let selectedColor = '#FF0000'; // Default 
+    // console.log(colorList)
+    let brushSize = 10; // Default brush size
+    let customCursor;
+    const cursorSizeMultiplier = 1;
+    let isErasing = false;
+    let snapNotice;
+    let colorList;
+
+    function preload() {
+        this.load.image('image1', assetsList.image1);
+        this.load.image('image2', assetsList.image2);
+        this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
+        this.load.svg('cursorImage', '/assets/svg/pencil.svg');
+        this.load.image('waxTexture', '/assets/texture.png');
+
+    }
+
+    function create() {
+        const params = new URLSearchParams(window.location.search);
+        const paramsID = params.get('id');
+        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+            .then(response => response.json())
+            .then(({ data }) => {
+                // console.log(data.colors)
+                const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+                const baseFontSize = 22;
+                const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
+                const descrptText = this.add.text(screenCenterX, 55, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
+                // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
+                // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
+            })
+            .catch(error => {
+                console.error('Error fetching initial data:', error);
+            });
+            const URL = window.location.href;
+            const gameName = URL.split('/');
+            let userData = {
+                'user': 'drawing@beanstalkedu.com',
+                'game_name': gameName[3],
+                'starts': formattedDateTime,
+                // 'game_start' : gameStartTime,
+            };
+            function submitUserData() {
+            fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+                method: 'POST',
+                headers: {
+                'Content-Type' : 'application/json'
+                },
+                body: JSON.stringify(userData)
+            })
+            .then(response => {
+                if(response.ok){
+                // console.log('Data Saved', response)
+                } else{
+                // console.log('Something Wrong', response)
+                }
+            })
+            .catch(error => {
+                console.error('An error occured', error)
+            }); 
+            };
+            // window.load
+            const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
+                font: '600 20px Quicksand',
+                fill: 'blue'
+            }).setDepth(1);
+            submitNotic.setVisible(false);
+            submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
+            font: '600 30px Quicksand',
+            fill: '#fff',
+            backgroundColor: 'blue',
+            padding: { x: 20, y: 10 },
+            });
+            submitButton.setVisible(true);
+            submitButton.setInteractive().on('pointerdown', () => {
+            // console.log('Clicked');
+            submitButton.setVisible(false);
+            submitNotic.setVisible(true);
+            // windowLoad();
+            submitUserData();
+            })
+            const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
+            if(!isMobile){
+                // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
+                // this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+            } else {
+                // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
+                // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
+            }
+            const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
+            const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
+            if(isMobile){
+                outlineImage1.setDepth(1).setScale(0.28);
+                outlineImage2.setDepth(1).setScale(0.28);
+            } else{
+                outlineImage1.setDepth(1).setScale(0.65);
+                outlineImage2.setDepth(1).setScale(0.65);   
+            }
+            graphics = this.add.graphics();
+            const colorContainer = document.createElement('div');
+            colorContainer.style.position = 'absolute';
+            colorContainer.style.top = '13%';
+            colorContainer.style.left = '10px';
+            colorContainer.style.display = 'flex';
+            colorContainer.style.marginBottom = '15px';
+            if(!isMobile){
+                colorContainer.style.top = '25%';
+                colorContainer.style.flexDirection = 'column'; 
+            }
+                var colors = colorList;
+            const buttonSize = 60;
+            const buttonSpacing = 15;
+            const colorButtonsContainer = document.createElement('div');
+            colorButtonsContainer.style.display = 'flex';
+            if(!isMobile){
+                colorButtonsContainer.style.flexDirection = 'column'; 
+            }
+            const buttonX = 300;
+            // const colorPaletteY = drawingZone.y - 20;
+            let selectedButton = null;
+
+            colors.forEach((color, index) => {
+                const x = buttonX + index * (buttonSize + buttonSpacing);
+                const button = document.createElement('button');
+
+                button.style.backgroundColor = 'transparent';
+
+                button.style.border = 'none';
+                button.style.outline = 'none';
+                if (!isMobile) {
+                    pencilSize = '40px';
+                    button.style.width = `${buttonSize}px`; 
+                    button.style.height = `${buttonSize}px`;
+                } else {
+                    pencilSize = '40px';
+                    button.style.width = `45px`;
+                    button.style.height = `45px`;
+                }
+                if(isMobile){
+                    button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
+                    button.style.boxShadow = '5px 10px 30px #7c4c2390';
+                    button.style.borderRadius = '20%';
+                } else{
+                    button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+                }
+                button.style.marginRight = `${buttonSpacing}px`;   
+                button.addEventListener('click', () => {
+                    if (selectedButton) {
+                        selectedButton.style.border = 'none';
+                        selectedButton.style.scale = '1';
+                        selectedButton.style.transform = 'translateX(0px)';
+                        selectedButton.style.marginTop = '0px';
+                        selectedButton.style.marginBottom = '0px';
+                    }
+                    if(isMobile){
+                        button.style.border = "2px solid";
+                        button.style.borderColor = color;
+                    }
+                    defaultColor = color;
+                    button.style.scale = '1.1';
+                    if(!isMobile){
+                        button.style.transform = 'translateX(0.75rem)'; 
+                        button.style.transition = 'transform 0.6s ease';
+                        // button.style.marginTop = '5px';
+                        // button.style.marginBottom = '5px';
+                    }
+                    selectedButton = button;
+                });
+                colorButtonsContainer.appendChild(button);
+            });
+            const colorPreview = document.createElement('div');
+            colorPreview.style.width = '40px';
+            colorPreview.style.height = '40px';
+            colorPreview.style.backgroundColor = 'blue';
+            // Append the color buttons container to the color container
+            colorContainer.appendChild(colorButtonsContainer);
+            // Append the color container to the document body
+            document.body.appendChild(colorContainer);
+            // Create a container div for both buttons
+            const buttonsContainer = document.createElement('div');
+            buttonsContainer.style.position = 'absolute';
+            buttonsContainer.style.display = 'flex'; 
+            buttonsContainer.style.flexDirection = 'row';
+            buttonsContainer.style.top = '0%'; 
+            buttonsContainer.style.marginTop = '30px';
+            if(!isMobile){
+                // buttonsContainer.style.position = 'fixed';
+                buttonsContainer.style.top = '13%';
+                buttonsContainer.style.flexDirection = 'column';
+                buttonsContainer.style.marginLeft = '-20px';
+                buttonsContainer.style.marginTop = '0%';
+            } else{
+                buttonsContainer.style.left = '-20px';
+            }
+            
+            document.body.appendChild(buttonsContainer);
+            // Create the Clear button
+            const clearButton = document.createElement('button');
+            clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
+            // clearButton.style.border = '3px solid blue';
+            clearButton.style.color = 'blue';
+            clearButton.style.width = 'fit-content';
+            clearButton.style.marginLeft = '30px';
+            if(isMobile){
+                clearButton.style.padding = '2px 8px';
+                buttonsContainer.style.top = '17%';
+            } else {
+                clearButton.style.padding = '5px 10px';
+            }        
+            clearButton.style.fontWeight = 'bold';
+            clearButton.style.borderRadius = '20%';
+            clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            clearButton.addEventListener('click', () => {
+                clearDrawing();
+            }); 
+            // Create the Eraser button
+            const eraserButton = document.createElement('button');
+            // eraserButton.textContent = 'Eraser';
+            eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
+            eraserButton.style.color = 'blue';
+            eraserButton.style.width = 'fit-content';
+            eraserButton.style.marginRight = '15px';
+            // eraserButton.style.marginTop = '0px';
+            eraserButton.style.marginBottom = '0px';
+            if(isMobile){
+                eraserButton.style.padding = '4px 4px';
+            } else {
+                eraserButton.style.padding = '5px 5px';
+                eraserButton.style.marginTop = '15px';
+                eraserButton.style.marginBottom = '15px';
+                eraserButton.style.marginLeft = '30px';
+            }
+            eraserButton.style.fontWeight = 'bold';
+            eraserButton.style.borderRadius = '20%';
+            eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
+            eraserButton.addEventListener('click', () => {
+            isErasing = !isErasing;
+                if (isErasing) {
+                    // eraserButton.style.backgroundColor = 'red';
+                    eraserButton.style.color = 'red';
+                    eraserButton.style.border = '3px solid red';
+                } else {
+                    // Return to drawing mode
+                    // eraserButton.style.backgroundColor = 'green';
+                    eraserButton.style.color = 'blue';
+                    eraserButton.style.border = 'none';
+                }
+            });
+            // Add the Clear and Eraser buttons to the container
+            buttonsContainer.appendChild(clearButton);
+            buttonsContainer.appendChild(eraserButton);
+            
+            const sliderContainer = document.createElement('div');
+            sliderContainer.className = 'slider-container';
+            // sliderContainer.style.position = 'absolute';
+            if(isMobile){
+                sliderContainer.style.marginTop = '10px';
+            } else{
+                sliderContainer.style.marginLeft = '20px';
+            }
+            sliderContainer.style.left = '100%';
+
+            // Create the slider
+            const slider = document.createElement('input');
+            slider.type = 'range';
+            slider.min = '2';
+            slider.max = '80';
+            slider.value = brushSize.toString();
+            slider.className = 'slider';
+            // slider.style.width = `${window.innerWidth / 2}px`;
+            slider.addEventListener('input', (event) => {
+                brushSize = parseInt(event.target.value);
+                slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
+                slider.style.backgroundColor = '#05b3a4';
+            });
+
+            sliderContainer.appendChild(slider);
+            buttonsContainer.appendChild(sliderContainer);
+            
+            this.input.on('pointerdown', () => {
+                isDrawing = true;
+                startDrawing(this.input.x, this.input.y);
+            });
+
+            this.input.on('pointermove', () => {
+                if (isDrawing) {
+                    continueDrawing(this.input.x, this.input.y);
+                }
+            });
+            this.input.on('pointerup', () => {
+                if (isDrawing) {
+                    finishDrawing();
+                }
+                isDrawing = false;
+            });
+            customCursor = this.add.graphics();
+            customCursor.setDepth(2)
+            this.input.setDefaultCursor('none');
+            const borderThickness = 0;
+            const borderColor = 0xffffff; // White color (you can customize this)
+            const borderGraphics = this.add.graphics();
+            borderGraphics.lineStyle(borderThickness, borderColor);
+            if(isMobile){
+                snapWidth = 50;
+                snapHeight = 70;
+            } else {
+                snapWidth = 200;
+                snapHeight = 70;
+            }
+            snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
+            snapshotButton.setInteractive();
+            snapshotButton.on('pointerdown', () => {
+                captureSnapshot(this);
+            });
+            snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'});
+            snapNotice.setVisible(false);
+    }
+    function captureSnapshot(drawingZone) {
+        // snapNotice.setVisible(true);
+        submitButton.setVisible(false);
+        snapshotButton.setVisible(false);
+        customCursor.setVisible(false);
+        drawingZone.renderer.snapshot((image) => {
+            submitButton.setVisible(true);
+            snapshotButton.setVisible(true);
+            customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            const link = document.createElement('a');
+            link.href = image.src;
+            link.download = 'my_drawing.png';
+            link.click();
+            document.body.removeChild(image);
+            // Clear the drawing
+            // graphics.clear();
+        });
+    }
+
+    function startDrawing(x, y, t) {
+        if (!isErasing) {
+            graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(defaultColor).color);
+        } else {
+            graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
+        }
+        graphics.beginPath();
+        graphics.moveTo(x, y);
+    }
+
+    function continueDrawing(x, y) {
+        if (!isErasing) {
+            graphics.lineTo(x, y); // Drawing
+        } else {
+            graphics.lineTo(x, y); // Erasing by drawing with a white line
+        }
+        graphics.strokePath();
+    }
+
+    function finishDrawing() {
+        // No need for additional actions here
+    }
+
+    function clearDrawing() {
+        graphics.clear();
+    }
+    function update() {
+        const slider = document.querySelector('input[type="range"]');
+        if (slider && !isDrawing) {
+            const sliderValue = parseInt(slider.value);
+            const max = parseInt(slider.max);
+            const width = slider.offsetWidth;
+            const offsetX = (sliderValue - 2) / (max - 2) * width;
+            slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
+        };
+        const cursorSize = brushSize * cursorSizeMultiplier;
+        customCursor.clear(); // Clear the previous frame
+        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.strokeCircle(0, 0, cursorSize);
+        // Position the cursor at the current mouse pointer coordinates
+        customCursor.x = this.input.x;
+        customCursor.y = this.input.y;
+    }
+</script>
+<style>
+    .clear-button {
+        background-color: blue;
+    }
+</style>
diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro
new file mode 100644
index 0000000..db73b32
--- /dev/null
+++ b/src/pages/drawing/drawing_writo.astro
@@ -0,0 +1,499 @@
+---
+import Layout from '../../layouts/Layout.astro';
+---
+<Layout title='Drawing Game'>
+    <main>
+        <div>
+        </div>
+        <script is:inline src="/assets/js/phaser_3.60.0.js"></script>
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
+    </main>
+</Layout>
+<script is:inline>
+    const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
+    // const drawingZone = {
+    //     x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
+    //     y: window.innerHeight / 1,
+    //     width: isMobile ? window.innerWidth : window.innerWidth / 2, // Full width on mobile, else 1/2 of screen width
+    //     height: window.innerHeight / 2,
+    // };
+    if(isMobile){
+        submitWidth = 250;
+        submitHeight = 110;
+        noticeWidth = 100;
+        noticeHeight = 0;
+        downloadWidth = 67;
+        downloadHeight = 200;
+        learningWidth = 200;
+        learningHeight = 365
+        image1Width = 3.7;
+        image1Height = 2.5;
+        image2Width = 2;
+        image2Right = 65;
+        image2Height = 2;
+        image2Bottom = 110;
+    } else {
+        submitWidth = 380;
+        submitHeight = 95;
+        noticeWidth = 0;
+        noticeHeight = 0;
+        downloadWidth = 180;
+        downloadHeight = 70;
+        learningWidth = 450;
+        learningHeight = 350;
+        image1Width = 4;
+        image1Height = 1.8;
+        image2Width = 2;
+        image2Right = 400;
+        image2Height = 1.8;
+        image2Bottom = 0;
+    }
+    var assetsList = {}
+    var snapshotButton;
+    let submitButton;
+    let formattedDateTime;
+    let shortUniqueID;
+    let defaultColor;
+    gameResult = [];
+    window.onload = function() {
+        currentDate = new Date();
+        formattedDateTime = currentDate.toLocaleString();
+        // console.log("Page loaded on: " + formattedDateTime);
+    };
+    function generateShortUniqueID(length) {
+        const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
+        let result = '';
+        for (let i = 0; i < length; i++) {
+            const randomIndex = Math.floor(Math.random() * characters.length);
+            result += characters.charAt(randomIndex);
+        }
+        return result;
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const paramsID = params.get('id');
+    const data =       fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+    .then(response => response.json())
+    .then(({data}) => {
+        colorList = data.colors;
+        defaultColor = colorList[0];
+    const {image1, image2} = data;
+    assetsList.image1 = "https://game-du.teachertrainingkolkata.in/assets/" + image1; // + "?width=450";
+    assetsList.image2 = "https://game-du.teachertrainingkolkata.in/assets/" + image2; // + "?width=450";
+    // console.log('Here is image -1', "https://game-du.teachertrainingkolkata.in/assets/" + image1)
+    const config = {
+        type: Phaser.AUTO,
+        width: window.innerWidth,
+        height: window.innerHeight,
+        backgroundColor: '#ffffff',
+        scale: {
+            mode: Phaser.Scale.FIT,
+            autoCenter: Phaser.Scale.CENTER_HORIZONTALLY,
+        },
+        scene: {
+            preload: preload,
+            create: create,
+            update: update,
+        },
+    };
+      const game = new Phaser.Game(config);    
+    })
+    .catch(error => {
+      console.error('Error fetching initial data:', error);
+    });
+    const customWidth = window.innerWidth;
+    const customHeight = window.innerHeight;
+    let graphics;
+    let isDrawing = false;
+    let selectedColor = '#FF0000'; // Default 
+    // console.log(colorList)
+    let brushSize = 10; // Default brush size
+    let customCursor;
+    const cursorSizeMultiplier = 1;
+    let isErasing = false;
+    let snapNotice;
+    let colorList;
+
+    function preload() {
+        this.load.image('image1', assetsList.image1);
+        this.load.image('image2', assetsList.image2);
+        this.load.image('topLogo', '/assets/top_logo.png');
+        this.load.svg('buttonIcons', '/assets/svg/button-icon.svg');
+        this.load.svg('cursorImage', '/assets/svg/pencil.svg');
+        this.load.image('waxTexture', '/assets/texture.png');
+
+    }
+
+    function create() {
+        const params = new URLSearchParams(window.location.search);
+        const paramsID = params.get('id');
+        fetch(`https://game-du.teachertrainingkolkata.in/items/game_drawing_v2/${encodeURIComponent(paramsID)}?filter[status][_eq]=published`)
+            .then(response => response.json())
+            .then(({ data }) => {
+                // console.log(data.colors)
+                const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
+                const baseFontSize = 22;
+                const responsiveFontSize = (window.innerWidth / 800) * baseFontSize;
+                const descrptText = this.add.text(screenCenterX, 55, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#7c4c23', }).setOrigin(0.5);
+                // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight, data.LearningArea, {font: `20px`}).setTint(0X7C4C23)
+                // this.add.text(customWidth / 2 - learningWidth, customHeight / 2 - learningHeight + 20, data.LearningSubArea, {font: `20px`}).setTint(0X7C4C23)
+            })
+            .catch(error => {
+                console.error('Error fetching initial data:', error);
+            });
+            const URL = window.location.href;
+            const gameName = URL.split('/');
+            let userData = {
+                'user': 'drawing@beanstalkedu.com',
+                'game_name': gameName[3],
+                'starts': formattedDateTime,
+                // 'game_start' : gameStartTime,
+            };
+            function submitUserData() {
+            fetch(`https://2016.dev2-cs.siliconpin.com/save/`, {
+                method: 'POST',
+                headers: {
+                'Content-Type' : 'application/json'
+                },
+                body: JSON.stringify(userData)
+            })
+            .then(response => {
+                if(response.ok){
+                // console.log('Data Saved', response)
+                } else{
+                // console.log('Something Wrong', response)
+                }
+            })
+            .catch(error => {
+                console.error('An error occured', error)
+            }); 
+            };
+            // window.load
+            const submitNotic = this.add.text(window.innerWidth * 0.5 - noticeWidth, window.innerHeight * 0.85 - noticeHeight, 'Submitted Successfully', {
+                font: '600 20px Quicksand',
+                fill: 'blue'
+            }).setDepth(1);
+            submitNotic.setVisible(false);
+            submitButton = this.add.text(window.innerWidth - submitWidth, window.innerHeight - submitHeight, "Submit", {
+            font: '600 30px Quicksand',
+            fill: '#fff',
+            backgroundColor: 'blue',
+            padding: { x: 20, y: 10 },
+            });
+            submitButton.setVisible(true);
+            submitButton.setInteractive().on('pointerdown', () => {
+            // console.log('Clicked');
+            submitButton.setVisible(false);
+            submitNotic.setVisible(true);
+            // windowLoad();
+            submitUserData();
+            })
+            const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
+            if(!isMobile){
+                // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
+                // this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
+            } else {
+                // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
+                // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
+            }
+            const outlineImage1 = this.add.image(customWidth / image1Width, customHeight / image1Height, 'image1');
+            const outlineImage2 = this.add.image(customWidth / image2Width + image2Right, customHeight / image2Height + image2Bottom, 'image2');
+            if(isMobile){
+                outlineImage1.setDepth(1).setScale(0.28);
+                outlineImage2.setDepth(1).setScale(0.28);
+            } else{
+                outlineImage1.setDepth(1).setScale(0.65);
+                outlineImage2.setDepth(1).setScale(0.65);   
+            }
+            graphics = this.add.graphics();
+            const colorContainer = document.createElement('div');
+            colorContainer.style.position = 'absolute';
+            colorContainer.style.top = '13%';
+            colorContainer.style.left = '10px';
+            colorContainer.style.display = 'flex';
+            colorContainer.style.marginBottom = '15px';
+            if(!isMobile){
+                colorContainer.style.top = '25%';
+                colorContainer.style.flexDirection = 'column'; 
+            }
+                var colors = colorList;
+            const buttonSize = 60;
+            const buttonSpacing = 15;
+            const colorButtonsContainer = document.createElement('div');
+            colorButtonsContainer.style.display = 'flex';
+            if(!isMobile){
+                colorButtonsContainer.style.flexDirection = 'column'; 
+            }
+            const buttonX = 300;
+            // const colorPaletteY = drawingZone.y - 20;
+            let selectedButton = null;
+
+            colors.forEach((color, index) => {
+                const x = buttonX + index * (buttonSize + buttonSpacing);
+                const button = document.createElement('button');
+
+                button.style.backgroundColor = 'transparent';
+
+                button.style.border = 'none';
+                button.style.outline = 'none';
+                if (!isMobile) {
+                    pencilSize = '40px';
+                    button.style.width = `${buttonSize}px`; 
+                    button.style.height = `${buttonSize}px`;
+                } else {
+                    pencilSize = '40px';
+                    button.style.width = `45px`;
+                    button.style.height = `45px`;
+                }
+                if(isMobile){
+                    button.innerHTML = `<svg height="${pencilSize}" width="${pencilSize}" version="1.1" id="_x36_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" fill="#000000" transform="rotate(90)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <g> <polygon style="fill:#FBE6B7;" points="180.006,414.017 171.785,422.16 115.097,478.926 115.019,478.926 113.923,480.023 113.844,479.945 113.375,479.474 113.297,479.474 73.6,439.701 72.895,439.074 72.19,438.29 32.494,398.671 31.867,398.046 97.95,331.961 "></polygon> <path style="fill:#FFFFFF;" d="M511.439,67.631c-0.627,2.739-2.036,5.402-4.15,7.516l-35.938,35.937l-7.673,7.673l-4.15,4.15 c-6.264,6.264-16.599,6.264-22.941,0l-23.724-23.724L389.06,75.38c-6.342-6.341-6.342-16.676,0-22.941l4.15-4.15l7.673-7.673 l9.552-9.552L436.743,4.68c2.114-2.114,4.776-3.525,7.595-4.15c5.324-1.409,11.275,0,15.425,4.15l23.724,23.803l23.802,23.722 C511.439,56.355,512.848,62.305,511.439,67.631z"></path> <polygon style="fill:#FEF9E7;" points="477.145,116.88 404.72,189.306 363.692,148.276 322.664,107.248 395.089,34.823 471.351,111.085 "></polygon> <polygon style="fill:${color};" points="486.697,107.248 477.145,116.88 469.472,124.473 463.678,118.757 393.21,48.29 387.416,42.498 404.641,25.271 480.903,101.533 "></polygon> <polygon style="fill:${color};" points="417.874,176.072 404.72,189.306 309.901,284.123 180.006,414.017 171.785,422.16 130.835,381.134 89.808,340.105 97.95,331.961 227.845,202.067 322.664,107.248 335.818,94.095 376.846,135.122 "></polygon> <path style="fill:#FBE6B7;" d="M115.019,478.926l-1.096,0.314l-0.548,0.235h-0.078l-72.112,20.907 c-0.078-0.157-0.157-0.237-0.157-0.392c-3.132-6.029-7.125-11.745-12.214-16.835c-5.089-5.089-10.805-9.16-16.912-12.215 c-0.078-0.076-0.235-0.076-0.313-0.157l20.906-72.112l0.235-0.703l0.314-1.097l0.861,0.862L74.07,437.9l1.488,1.487l38.601,38.6 L115.019,478.926z"></path> <path style="fill:${color};" d="M41.654,499.833l-0.626,0.157l-0.078,0.078l-26.543,7.751L0,511.969l4.15-14.407l7.751-26.622 l0.235-0.703c6.186,3.131,12.058,7.203,17.226,12.372C34.529,487.775,38.601,493.647,41.654,499.833z"></path> <polygon style="fill:${color};" points="309.901,284.123 180.006,414.017 115.097,478.926 113.766,480.258 113.844,479.945 113.923,479.239 114.158,477.987 122.457,431.087 75.557,439.387 73.6,439.701 71.955,440.012 71.877,440.012 72.19,438.29 72.504,436.333 80.803,389.432 33.903,397.732 32.728,397.968 31.945,398.124 31.789,398.124 97.95,331.961 227.845,202.067 "></polygon> </g> <path style="opacity:0.08;fill:#040000;" d="M480.94,101.506l26.324-26.324c6.315-6.315,6.314-16.646,0-22.961L483.5,28.457 L0.016,511.941l40.964-11.888c0.056,0.11,0.124,0.215,0.178,0.325l72.172-20.943l0.49,0.49l-0.056,0.317l0.187-0.187l57.868-57.868 l8.176-8.176l129.927-129.927l94.799-94.799l13.182-13.182l51.598-51.598l7.613-7.613l9.608-9.608L480.94,101.506z"></path> </g> </g></svg>`;
+                    button.style.boxShadow = '5px 10px 30px #7c4c2390';
+                    button.style.borderRadius = '20%';
+                } else{
+                    button.innerHTML = `<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 460.001 460.001" xml:space="preserve" width="100px" height="100px" fill="#000000" transform="rotate(45)matrix(-1, 0, 0, -1, 0, 0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path style="fill:${color};" d="M1.35,437.277c0,0-4.663,10.019,3.345,18.028c8.01,8.008,18.028,3.347,18.028,3.347l87.552-41.408 l-67.518-67.519L1.35,437.277z"></path> <rect x="29.322" y="354.193" transform="matrix(0.7071 0.7071 -0.7071 0.7071 288.549 46.0853)" style="fill:#C8523B;" width="118.645" height="34.318"></rect> <path style="fill:${color};" d="M58.835,317.271L363.22,12.885c22.554-22.554,45.385-12.601,65.603,7.618L439.5,31.178 c20.215,20.217,30.17,43.049,7.616,65.603L142.731,401.167L58.835,317.271z"></path> <path style="fill:#ffffff;" d="M241.765,166.821c-45.835,45.837-71.485,94.505-57.289,108.702 c14.201,14.199,62.867-11.452,108.702-57.289c45.837-45.837,71.488-94.503,57.289-108.7 C336.271,95.336,287.604,120.986,241.765,166.821z"></path> <path style="fill:#000000;" d="M363.22,12.886c2.483-2.483,4.968-4.549,7.453-6.273l82.716,82.716 c-1.724,2.485-3.791,4.971-6.273,7.453l-6.861,6.861l-83.896-83.896L363.22,12.886z"></path> <rect x="68.867" y="322.107" transform="matrix(0.7071 0.7071 -0.7071 0.7071 272.1719 6.5421)" style="fill:#000000;" width="118.645" height="19.409"></rect> <path style="opacity:0.3;fill:#000000;enable-background:new ;" d="M118.463,425.432l-8.188-8.188l-87.552,41.408 c0,0-10.017,4.66-18.027-3.346L434.161,25.84l5.339,5.338c18.533,18.535,28.422,39.269,12.562,59.97 c-0.038,0.049-0.077,0.098-0.115,0.148c-0.43,0.556-0.87,1.112-1.337,1.668c-0.167,0.2-0.348,0.4-0.52,0.6 c-0.365,0.423-0.726,0.846-1.113,1.268c-0.594,0.65-1.211,1.299-1.861,1.948l-6.861,6.861L142.731,401.167L118.463,425.432z"></path> </g></svg>`  
+                }
+                button.style.marginRight = `${buttonSpacing}px`;   
+                button.addEventListener('click', () => {
+                    if (selectedButton) {
+                        selectedButton.style.border = 'none';
+                        selectedButton.style.scale = '1';
+                        selectedButton.style.transform = 'translateX(0px)';
+                        selectedButton.style.marginTop = '0px';
+                        selectedButton.style.marginBottom = '0px';
+                    }
+                    if(isMobile){
+                        button.style.border = "2px solid";
+                        button.style.borderColor = color;
+                    }
+                    defaultColor = color;
+                    button.style.scale = '1.1';
+                    if(!isMobile){
+                        button.style.transform = 'translateX(0.75rem)'; 
+                        button.style.transition = 'transform 0.6s ease';
+                        // button.style.marginTop = '5px';
+                        // button.style.marginBottom = '5px';
+                    }
+                    selectedButton = button;
+                });
+                colorButtonsContainer.appendChild(button);
+            });
+            const colorPreview = document.createElement('div');
+            colorPreview.style.width = '40px';
+            colorPreview.style.height = '40px';
+            colorPreview.style.backgroundColor = 'blue';
+            // Append the color buttons container to the color container
+            colorContainer.appendChild(colorButtonsContainer);
+            // Append the color container to the document body
+            document.body.appendChild(colorContainer);
+            // Create a container div for both buttons
+            const buttonsContainer = document.createElement('div');
+            buttonsContainer.style.position = 'absolute';
+            buttonsContainer.style.display = 'flex'; 
+            buttonsContainer.style.flexDirection = 'row';
+            buttonsContainer.style.top = '0%'; 
+            buttonsContainer.style.marginTop = '30px';
+            if(!isMobile){
+                // buttonsContainer.style.position = 'fixed';
+                buttonsContainer.style.top = '13%';
+                buttonsContainer.style.flexDirection = 'column';
+                buttonsContainer.style.marginLeft = '-20px';
+                buttonsContainer.style.marginTop = '0%';
+            } else{
+                buttonsContainer.style.left = '-20px';
+            }
+            
+            document.body.appendChild(buttonsContainer);
+            // Create the Clear button
+            const clearButton = document.createElement('button');
+            clearButton.innerHTML ='<i class="fa fa-remove" style="font-size:30px"></i>';
+            // clearButton.style.border = '3px solid blue';
+            clearButton.style.color = 'blue';
+            clearButton.style.width = 'fit-content';
+            clearButton.style.marginLeft = '30px';
+            if(isMobile){
+                clearButton.style.padding = '2px 8px';
+                buttonsContainer.style.top = '17%';
+            } else {
+                clearButton.style.padding = '5px 10px';
+            }        
+            clearButton.style.fontWeight = 'bold';
+            clearButton.style.borderRadius = '20%';
+            clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            clearButton.addEventListener('click', () => {
+                clearDrawing();
+            }); 
+            // Create the Eraser button
+            const eraserButton = document.createElement('button');
+            // eraserButton.textContent = 'Eraser';
+            eraserButton.innerHTML = '<i class="fa fa-eraser" style="font-size:30px"></i>';
+            eraserButton.style.color = 'blue';
+            eraserButton.style.width = 'fit-content';
+            eraserButton.style.marginRight = '15px';
+            // eraserButton.style.marginTop = '0px';
+            eraserButton.style.marginBottom = '0px';
+            if(isMobile){
+                eraserButton.style.padding = '4px 4px';
+            } else {
+                eraserButton.style.padding = '5px 5px';
+                eraserButton.style.marginTop = '15px';
+                eraserButton.style.marginBottom = '15px';
+                eraserButton.style.marginLeft = '30px';
+            }
+            eraserButton.style.fontWeight = 'bold';
+            eraserButton.style.borderRadius = '20%';
+            eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
+            eraserButton.addEventListener('click', () => {
+            isErasing = !isErasing;
+                if (isErasing) {
+                    // eraserButton.style.backgroundColor = 'red';
+                    eraserButton.style.color = 'red';
+                    eraserButton.style.border = '3px solid red';
+                } else {
+                    // Return to drawing mode
+                    // eraserButton.style.backgroundColor = 'green';
+                    eraserButton.style.color = 'blue';
+                    eraserButton.style.border = 'none';
+                }
+            });
+            // Add the Clear and Eraser buttons to the container
+            buttonsContainer.appendChild(clearButton);
+            buttonsContainer.appendChild(eraserButton);
+            
+            const sliderContainer = document.createElement('div');
+            sliderContainer.className = 'slider-container';
+            // sliderContainer.style.position = 'absolute';
+            if(isMobile){
+                sliderContainer.style.marginTop = '10px';
+            } else{
+                sliderContainer.style.marginLeft = '20px';
+            }
+            sliderContainer.style.left = '100%';
+
+            // Create the slider
+            const slider = document.createElement('input');
+            slider.type = 'range';
+            slider.min = '2';
+            slider.max = '80';
+            slider.value = brushSize.toString();
+            slider.className = 'slider';
+            // slider.style.width = `${window.innerWidth / 2}px`;
+            slider.addEventListener('input', (event) => {
+                brushSize = parseInt(event.target.value);
+                slider.style.backgroundSize = `calc(${(brushSize - 2) * 100 / 18}% + 20px) 100%`;
+                slider.style.backgroundColor = '#05b3a4';
+            });
+
+            sliderContainer.appendChild(slider);
+            buttonsContainer.appendChild(sliderContainer);
+            
+            this.input.on('pointerdown', () => {
+                isDrawing = true;
+                startDrawing(this.input.x, this.input.y);
+            });
+
+            this.input.on('pointermove', () => {
+                if (isDrawing) {
+                    continueDrawing(this.input.x, this.input.y);
+                }
+            });
+            this.input.on('pointerup', () => {
+                if (isDrawing) {
+                    finishDrawing();
+                }
+                isDrawing = false;
+            });
+            customCursor = this.add.graphics();
+            customCursor.setDepth(2)
+            this.input.setDefaultCursor('none');
+            const borderThickness = 0;
+            const borderColor = 0xffffff; // White color (you can customize this)
+            const borderGraphics = this.add.graphics();
+            borderGraphics.lineStyle(borderThickness, borderColor);
+            if(isMobile){
+                snapWidth = 50;
+                snapHeight = 70;
+            } else {
+                snapWidth = 200;
+                snapHeight = 70;
+            }
+            snapshotButton = this.add.image(window.innerWidth - downloadWidth, window.innerHeight - downloadHeight, 'buttonIcons');
+            snapshotButton.setInteractive();
+            snapshotButton.on('pointerdown', () => {
+                captureSnapshot(this);
+            });
+            snapNotice = this.add.text(customWidth / 2, customHeight / 2, 'Succecfully Downloaded', {font :'700 30px Quicksand', fill: '#05b3a4'});
+            snapNotice.setVisible(false);
+    }
+    function captureSnapshot(drawingZone) {
+        // snapNotice.setVisible(true);
+        submitButton.setVisible(false);
+        snapshotButton.setVisible(false);
+        customCursor.setVisible(false);
+        drawingZone.renderer.snapshot((image) => {
+            submitButton.setVisible(true);
+            snapshotButton.setVisible(true);
+            customCursor.setVisible(true);
+            image.style.width = '160px';
+            image.style.height = '120px';
+            image.style.paddingLeft = '2px';
+            document.body.appendChild(image);
+            // Download the snapshot as an image
+            const link = document.createElement('a');
+            link.href = image.src;
+            link.download = 'my_drawing.png';
+            link.click();
+            document.body.removeChild(image);
+            // Clear the drawing
+            // graphics.clear();
+        });
+    }
+
+    function startDrawing(x, y, t) {
+        if (!isErasing) {
+            graphics.lineStyle(brushSize * 2, Phaser.Display.Color.HexStringToColor(defaultColor).color);
+        } else {
+            graphics.lineStyle(brushSize * 2, 0xffffff, 1); // Set a white color to clear lines (full opacity)
+        }
+        graphics.beginPath();
+        graphics.moveTo(x, y);
+    }
+
+    function continueDrawing(x, y) {
+        if (!isErasing) {
+            graphics.lineTo(x, y); // Drawing
+        } else {
+            graphics.lineTo(x, y); // Erasing by drawing with a white line
+        }
+        graphics.strokePath();
+    }
+
+    function finishDrawing() {
+        // No need for additional actions here
+    }
+
+    function clearDrawing() {
+        graphics.clear();
+    }
+    function update() {
+        const slider = document.querySelector('input[type="range"]');
+        if (slider && !isDrawing) {
+            const sliderValue = parseInt(slider.value);
+            const max = parseInt(slider.max);
+            const width = slider.offsetWidth;
+            const offsetX = (sliderValue - 2) / (max - 2) * width;
+            slider.style.background = `linear-gradient(to right, #000 0%, #000 ${offsetX}px, #fff ${offsetX}px, #fff 100%)`;
+        };
+        const cursorSize = brushSize * cursorSizeMultiplier;
+        customCursor.clear(); // Clear the previous frame
+        customCursor.lineStyle(3, 0x000000); // Set the line style (2 is the line thickness, 0x000000 is black color)
+        customCursor.strokeCircle(0, 0, cursorSize);
+        // Position the cursor at the current mouse pointer coordinates
+        customCursor.x = this.input.x;
+        customCursor.y = this.input.y;
+    }
+</script>
+<style>
+    .clear-button {
+        background-color: blue;
+    }
+</style>
diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index aea961f..ec1ff28 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -194,9 +194,9 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.style.top = '13%';
             colorContainer.style.left = '10px';
             colorContainer.style.display = 'flex';
-            colorContainer.style.marginBottom = '15px';
+            colorContainer.style.marginBottom = '0';
             if(!isMobile){
-                colorContainer.style.top = '25%';
+                colorContainer.style.top = '10%';
                 colorContainer.style.flexDirection = 'column'; 
             }
             // Create the color picker
@@ -229,7 +229,8 @@ import Layout from '../../layouts/Layout.astro';
             colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
-            const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
+            var colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#FFFFFF', '#000000', '#C0C0C0', '#FFD700'];
+            // const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
             const buttonSize = 60;
             const buttonSpacing = 5;
             // Create a container div for the color buttons
@@ -320,7 +321,7 @@ import Layout from '../../layouts/Layout.astro';
             buttonsContainer.style.marginTop = '30px';
             if(!isMobile){
                 // buttonsContainer.style.position = 'fixed';
-                buttonsContainer.style.top = '25%';
+                buttonsContainer.style.top = '10%';
                 buttonsContainer.style.flexDirection = 'column';
                 buttonsContainer.style.marginLeft = '60px';
                 buttonsContainer.style.marginTop = '0%';