diff --git a/src/pages/drag/dragdrop_phonics.astro b/src/pages/drag/dragdrop_phonics.astro
index 87c8720..4764b79 100644
--- a/src/pages/drag/dragdrop_phonics.astro
+++ b/src/pages/drag/dragdrop_phonics.astro
@@ -423,7 +423,7 @@ import Layout from '../../layouts/Layout.astro';
         let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
 
         submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
         // submitButton = this.add.text(window.innerWidth / 2 - buttonWidth, window.innerHeight / 2 - buttonHeight, "Submit", {
diff --git a/src/pages/drag/index.astro b/src/pages/drag/index.astro
index 63c3b84..39c3751 100644
--- a/src/pages/drag/index.astro
+++ b/src/pages/drag/index.astro
@@ -412,7 +412,7 @@ const numberOfTimes = starNumberOfTime;
         let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
         this.add.image(displayW * 0.9-32, 170, "target1");
         // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 340, "target2");
diff --git a/src/pages/drag/match_phonics.astro b/src/pages/drag/match_phonics.astro
index dccc0bc..68b3626 100644
--- a/src/pages/drag/match_phonics.astro
+++ b/src/pages/drag/match_phonics.astro
@@ -385,7 +385,7 @@ import Layout from '../../layouts/Layout.astro';
         let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
         this.add.image(displayW * 0.9-32, 170, "target1");
         // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 340, "target2");
diff --git a/src/pages/drag/v2.astro b/src/pages/drag/v2.astro
index 02eb515..a168a91 100644
--- a/src/pages/drag/v2.astro
+++ b/src/pages/drag/v2.astro
@@ -387,7 +387,7 @@ import Layout from '../../layouts/Layout.astro';
         let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
         this.add.image(displayW * 0.9-32, 170, "target1");
         // this.add.image(displayW * 0.9-33, 170, "border").setAlpha(1).setScale(1).setDepth(-1);
         this.add.image(displayW * 0.9-32, 340, "target2");
diff --git a/src/pages/drag/v3.astro b/src/pages/drag/v3.astro
index 52fbed8..0a9d7a1 100644
--- a/src/pages/drag/v3.astro
+++ b/src/pages/drag/v3.astro
@@ -435,7 +435,7 @@ import Layout from '../../layouts/Layout.astro';
         let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
 
         submitNotic = this.add.text(window.innerWidth / 2 - noticeWidth, window.innerHeight / 2 - noticeHeight, 'Submitted Successfully', {font: '600 20px Quicksand', fill: '#FFFFFF', backgroundColor: '#004aad',padding: {left: 20,right: 20,top: 10,bottom: 10}}).setDepth(3).setVisible(false);
         if(audioFileId === true){
diff --git a/src/pages/drag/v4.astro b/src/pages/drag/v4.astro
index 13dc7d6..d75036f 100644
--- a/src/pages/drag/v4.astro
+++ b/src/pages/drag/v4.astro
@@ -416,7 +416,7 @@ import Layout from '../../layouts/Layout.astro';
         let soundButton = this.add.image(displayW / muteIconWidth, 30, "muteIcon").setScale();
         const retryButton = this.add.image(displayW / resetIconWidth, 30, "resetIcon").setScale();
         submitButton = this.add.image(displayW / tickIconWidth, 30, "tickIcon").setScale();
-        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale();
+        this.add.image(displayW / cancelIconWidth, 30, "cancelIcon").setScale().setInteractive().on('pointerdown', () => {history.back()});
         if(audioFileId === true){
             let instructionAudio = this.sound.add('instructAudio')
             soundButton.setInteractive().on('pointerdown', () => {
diff --git a/src/pages/drawing/drawing_phonics.astro b/src/pages/drawing/drawing_phonics.astro
index ab1c6cb..eb737ad 100644
--- a/src/pages/drawing/drawing_phonics.astro
+++ b/src/pages/drawing/drawing_phonics.astro
@@ -326,7 +326,16 @@ import Layout from '../../layouts/Layout.astro';
             }
             if(isMobile){
                 colorContainer.style.display = 'none';
+                colorContainer.style.flexDirection = 'row'; 
             }
+            colorContainer.style.backgroundColor = '#FFFFFF';
+            colorContainer.style.padding = '30px 20px';
+            colorContainer.style.borderRadius = '80px';
+            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
+            colorContainer.style.left = '0px';
+            colorContainer.style.top = '50%';
+            colorContainer.style.transform = 'translate(0, -50%)';
+            colorContainer.style.border = '1px solid #F9F9F9'; 
 
             let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
             if(!isMobile){
@@ -342,6 +351,14 @@ import Layout from '../../layouts/Layout.astro';
 
 
             // Create the color picker
+            let colorAndClearContainer = document.createElement('div');
+            colorAndClearContainer.style.display = 'flex';
+            colorAndClearContainer.flexDirection = 'row';
+            colorAndClearContainer.style.alignItems = 'center';
+            const clearButton = document.createElement('button');
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
+            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
+
             const colorPicker = document.createElement('input');
             colorPicker.type = 'color';
             colorPicker.value = selectedColor;
@@ -368,7 +385,10 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Append the color picker to the color container data
-            colorContainer.appendChild(colorPicker);
+
+            colorAndClearContainer.appendChild(colorPicker)
+            colorAndClearContainer.appendChild(clearButton)
+            colorContainer.appendChild(colorAndClearContainer);
             // const colors = data.colors;
             // var colors = colorList;
             var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@@ -596,20 +616,19 @@ import Layout from '../../layouts/Layout.astro';
             // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
             document.body.appendChild(buttonsContainer);
             // Create the Clear button
-            const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
+
             // clearButton.style.border = '3px solid blue';
             // clearButton.style.color = 'blue';
             // clearButton.style.width = 'fit-content';
             // clearButton.style.marginRight = '10px';
-            if(isMobile){
-                clearButton.style.padding = '2px 8px';
-                clearButton.style.display = 'none';
-                buttonsContainer.style.top = '9.5%';
-                buttonsContainer.style.marginLeft = '30px';
-            } else {
-                clearButton.style.padding = '5px 10px';
-            }        
+            // if(isMobile){
+            //     clearButton.style.padding = '2px 8px';
+            //     clearButton.style.display = 'none';
+            //     buttonsContainer.style.top = '9.5%';
+            //     buttonsContainer.style.marginLeft = '30px';
+            // } else {
+            //     clearButton.style.padding = '5px 10px';
+            // }        
             // clearButton.style.fontWeight = 'bold';
             // clearButton.style.borderRadius = '20%';
             // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
@@ -622,7 +641,7 @@ import Layout from '../../layouts/Layout.astro';
                 }else{
                     clearButton.style.display = 'block';
                 }
-            })
+            }) 
             // Create the Eraser button
             const eraserButton = document.createElement('button');
             // eraserButton.textContent = 'Eraser';
@@ -658,7 +677,7 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Add the Clear and Eraser buttons to the container
-            buttonsContainer.appendChild(clearButton);
+            // buttonsContainer.appendChild(clearButton);
             // colorPicker.appendChild(clearButton);
             // buttonsContainer.appendChild(eraserButton).setVisible;
             
diff --git a/src/pages/drawing/drawing_writo.astro b/src/pages/drawing/drawing_writo.astro
index c1cbe49..84d4ae4 100644
--- a/src/pages/drawing/drawing_writo.astro
+++ b/src/pages/drawing/drawing_writo.astro
@@ -337,7 +337,16 @@ import Layout from '../../layouts/Layout.astro';
             }
             if(isMobile){
                 colorContainer.style.display = 'none';
+                colorContainer.style.flexDirection = 'row';
             }
+            colorContainer.style.backgroundColor = '#FFFFFF';
+            colorContainer.style.padding = '30px 20px';
+            colorContainer.style.borderRadius = '80px';
+            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
+            colorContainer.style.left = '0px';
+            colorContainer.style.top = '50%';
+            colorContainer.style.transform = 'translate(0, -50%)';
+            colorContainer.style.border = '1px solid #F9F9F9'; 
 
             let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
             if(!isMobile){
@@ -351,6 +360,14 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
 
+            let colorAndClearContainer = document.createElement('div');
+            colorAndClearContainer.style.display = 'flex';
+            colorAndClearContainer.flexDirection = 'row';
+            colorAndClearContainer.style.alignItems = 'center';
+            const clearButton = document.createElement('button');
+            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
+            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
+
 
             // Create the color picker
             const colorPicker = document.createElement('input');
@@ -379,7 +396,9 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Append the color picker to the color container data
-            colorContainer.appendChild(colorPicker);
+            colorAndClearContainer.appendChild(colorPicker)
+            colorAndClearContainer.appendChild(clearButton)
+            colorContainer.appendChild(colorAndClearContainer);
             // const colors = data.colors;
             // var colors = colorList;
             var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@@ -605,22 +624,7 @@ import Layout from '../../layouts/Layout.astro';
             } 
             buttonsContainer.style.left = '20px';
             // buttonsContainer.style.left = `${window.innerWidth * 0.03}px`; // Position 5% from the left edge
-            document.body.appendChild(buttonsContainer);
-            // Create the Clear button
-            const clearButton = document.createElement('button');
-            clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            // clearButton.style.border = '3px solid blue';
-            // clearButton.style.color = 'blue';
-            // clearButton.style.width = 'fit-content';
-            // clearButton.style.marginRight = '10px';
-            if(isMobile){
-                clearButton.style.padding = '2px 8px';
-                clearButton.style.display = 'none';
-                buttonsContainer.style.top = '9.5%';
-                buttonsContainer.style.marginLeft = '30px';
-            } else {
-                clearButton.style.padding = '5px 10px';
-            }        
+            document.body.appendChild(buttonsContainer);       
             // clearButton.style.fontWeight = 'bold';
             // clearButton.style.borderRadius = '20%';
             // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
@@ -669,7 +673,7 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Add the Clear and Eraser buttons to the container
-            buttonsContainer.appendChild(clearButton);
+            // buttonsContainer.appendChild(clearButton);
             // colorPicker.appendChild(clearButton);
             // buttonsContainer.appendChild(eraserButton).setVisible;
             
diff --git a/src/pages/drawing/v2.astro b/src/pages/drawing/v2.astro
index 71334e8..2ceb22a 100644
--- a/src/pages/drawing/v2.astro
+++ b/src/pages/drawing/v2.astro
@@ -341,13 +341,6 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             const textStyle = {font: 'bold 40px quicksand', fill: '#05b3a4',};
-            if(!isMobile){
-                // this.add.text(customWidth / 10, 20, "Drawing", textStyle);
-                // this.add.image(customWidth / 2 * 1.6 - 0.5, 50, 'topLogo');
-            } else {
-                // this.add.text(customWidth / 30, 0, "Drawing", textStyle);
-                // this.add.image(customWidth / 2 * 1.6 - 0.5, 25, 'topLogo');
-            }
             
             if(isMobile){
                 outlineImage1.setDepth(-5).setScale(0.28);
@@ -364,31 +357,41 @@ import Layout from '../../layouts/Layout.astro';
             maskGraphics.fillRect(customWidth / 2 - customWidth / 2, 55, customWidth, customHeight);
             const mask = maskGraphics.createGeometryMask();
 
-
             graphics = this.add.graphics();
             graphics.setMask(mask);
             const colorContainer = document.createElement('div');
+            colorContainer.style.zIndex = '1';
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '13%';
-            if(isMobile){
-                colorContainer.style.marginTop = '13%';
-            }
             colorContainer.style.left = '10px';
             colorContainer.style.display = 'flex';
-            colorContainer.style.marginBottom = '15px';
+            colorContainer.style.marginBottom = '0';
             if(!isMobile){
-                colorContainer.style.top = '25%';
+                colorContainer.style.top = '10%';
                 colorContainer.style.flexDirection = 'column'; 
             }
-
             if(isMobile){
                 colorContainer.style.display = 'none';
+                colorContainer.style.flexDirection = 'row'; 
+                
             }
+            colorContainer.style.backgroundColor = '#FFFFFF';
+            colorContainer.style.padding = '30px 20px';
+            colorContainer.style.borderRadius = '80px';
+            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
+            colorContainer.style.left = '0px';
+            colorContainer.style.top = '50%';
+            colorContainer.style.transform = 'translate(0, -50%)';
+            colorContainer.style.border = '1px solid #F9F9F9'; 
 
+            let colorEraserCont = document.createElement('div');
+            colorEraserCont.style.display = 'flex';
+            colorEraserCont.style.flexDirection = 'row';
+
+            colorContainer.appendChild(colorEraserCont);
             let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
-            if(!isMobile){
-                colorViewButton.setVisible(false);
-            }
+            !isMobile ? colorViewButton.setVisible(false) : '';
+            // if(!isMobile){colorViewButton.setVisible(false);}
             
             colorViewButton.setInteractive().on('pointerdown', () => {
                 if(colorContainer.style.display === 'block') {
@@ -405,17 +408,47 @@ import Layout from '../../layouts/Layout.astro';
                     buttonsContainer.style.display = 'block';
                 }
             });
+            const eraserButton = document.createElement('button');
+            eraserButton.innerHTML = '<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22.1167 7.01651L16.1167 1.01651C15.897 0.796427 15.636 0.621831 15.3486 0.502706C15.0613 0.383582 14.7534 0.322266 14.4423 0.322266C14.1313 0.322266 13.8234 0.383582 13.5361 0.502706C13.2487 0.621831 12.9877 0.796427 12.768 1.01651L1.42422 12.3265C1.20414 12.5463 1.02955 12.8073 0.910421 13.0946C0.791296 13.3819 0.72998 13.6899 0.72998 14.0009C0.72998 14.3119 0.791296 14.6199 0.910421 14.9072C1.02955 15.1945 1.20414 15.4555 1.42422 15.6753L6.29922 20.5503H3.40047C3.25129 20.5503 3.10822 20.6095 3.00273 20.715C2.89724 20.8205 2.83797 20.9636 2.83797 21.1128C2.83797 21.2619 2.89724 21.405 3.00273 21.5105C3.10822 21.616 3.25129 21.6753 3.40047 21.6753H20.9167C21.0659 21.6753 21.209 21.616 21.3145 21.5105C21.42 21.405 21.4792 21.2619 21.4792 21.1128C21.4792 20.9636 21.42 20.8205 21.3145 20.715C21.209 20.6095 21.0659 20.5503 20.9167 20.5503H11.9392L22.1167 10.3653C22.5594 9.92043 22.8079 9.31843 22.8079 8.69088C22.8079 8.06334 22.5594 7.46133 22.1167 7.01651ZM10.3492 20.5428H7.87797L2.21922 14.8803C1.98725 14.6464 1.85708 14.3303 1.85708 14.0009C1.85708 13.6715 1.98725 13.3554 2.21922 13.1215L7.46922 7.87151L15.2617 15.6303L10.3492 20.5428Z" fill="#0348A8"/></svg>';
+            eraserButton.style.color = 'blue';
+            // eraserButton.style.border = '3px solid blue';
+            // eraserButton.style.color = 'white';
+            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 9px';
+                eraserButton.style.top = '50%';
+                eraserButton.style.marginBottom = '15px';
+            }
+            eraserButton.style.fontWeight = 'bold';
+            eraserButton.style.borderRadius = '20%';
+            eraserButton.style.boxShadow = '5px 10px 15px #7c4c2390';
+            eraserButton.addEventListener('click', () => {
+            isErasing = !isErasing;
+            erase = false;
+                if (isErasing) {
+                    erase = true;
+                    eraserButton.style.border = '3px solid #0348A8';
+                    eraserButton.style.backgroundColor = '#0348A820';
+                } else {
+                    // Return to drawing mode
+                    // eraserButton.style.backgroundColor = 'green'; // Restore eraser button color
+                    eraserButton.style.color = 'blue';
+                    eraserButton.style.border = 'none';
+                    eraserButton.style.backgroundColor = 'transparent';
+                }
+            });
             var colors = colorList;
             const buttonSize = 60;
             const buttonSpacing = 15;
             const clearEraserContainer = document.createElement('div');
             clearEraserContainer.style.display = 'flex';
             clearEraserContainer.style.flexDirection = 'row';
-            if(isMobile){
-                clearEraserContainer.style.marginTop = '-60px';
-            }else{
-                clearEraserContainer.style.marginTop = '40px';
-            }
+            isMobile ? clearEraserContainer.style.marginTop = '-60px' : clearEraserContainer.style.marginTop = '40px';
             const colorButtonsContainer = document.createElement('div');
             colorButtonsContainer.style.display = 'flex';
             colorButtonsContainer.style.flexDirection = 'column'; 
@@ -620,51 +653,15 @@ import Layout from '../../layouts/Layout.astro';
             // Create the Clear button
             const clearButton = document.createElement('button');
             clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            // // clearButton.style.border = '3px solid blue';
-            // clearButton.style.color = 'blue';
-            // clearButton.style.width = 'fit-content';
-            // clearButton.style.marginLeft = '30px';
-            if(isMobile){
-                clearButton.style.padding = '2px 8px';
-                buttonsContainer.style.top = '17%';
-            } else {
-                clearButton.style.padding = '5px 10px';
-            }        
-            // clearButton.style.fontWeight = 'bold';
-            // clearButton.style.borderRadius = '20%';
-            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
             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.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
-            clearEraserContainer.appendChild(eraserButton);
-            clearEraserContainer.appendChild(clearButton);
-            // buttonsContainer.appendChild(clearButton);
-            buttonsContainer.appendChild(clearEraserContainer);
+
+            colorEraserCont.append(eraserButton);
+            colorEraserCont.append(clearButton);
+            // buttonsContainer.appendChild(clearEraserContainer);
+
             
             const sliderContainer = document.createElement('div');
             sliderContainer.className = 'slider-container';
diff --git a/src/pages/drawing/v3.astro b/src/pages/drawing/v3.astro
index 5f0b323..95262da 100644
--- a/src/pages/drawing/v3.astro
+++ b/src/pages/drawing/v3.astro
@@ -357,13 +357,26 @@ import Layout from '../../layouts/Layout.astro';
 
             if(isMobile){
                 colorContainer.style.display = 'none';
+                colorContainer.style.flexDirection = 'row'; 
             }
 
             let colorViewButton = this.add.image(window.innerWidth / 7, window.innerHeight / 1.25, 'colorButton');
-            if(!isMobile){
-                colorViewButton.setVisible(false);
-            }
-            
+            !isMobile ? colorViewButton.setVisible(false) : '';
+
+            colorContainer.style.backgroundColor = '#FFFFFF';
+            colorContainer.style.padding = '30px 20px';
+            colorContainer.style.borderRadius = '80px';
+            colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
+            colorContainer.style.left = '0px';
+            colorContainer.style.top = '50%';
+            colorContainer.style.transform = 'translate(0, -50%)';
+            colorContainer.style.border = '1px solid #F9F9F9'; 
+
+            let colorEraserCont = document.createElement('div');
+            colorEraserCont.style.display = 'flex';
+            colorEraserCont.style.flexDirection = 'row';
+
+            colorContainer.appendChild(colorEraserCont);
             colorViewButton.setInteractive().on('pointerdown', () => {
                 if(colorContainer.style.display === 'block') {
                     colorContainer.style.display = 'none';
@@ -400,7 +413,8 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Append the color picker to the color container data
-            colorContainer.appendChild(colorPicker);
+            
+            // colorContainer.appendChild(colorPicker);
             // const colors = data.colors;
             // var colors = colorList;
             let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
@@ -624,39 +638,14 @@ import Layout from '../../layouts/Layout.astro';
             // Create the Clear button
             const clearButton = document.createElement('button');
             clearButton.innerHTML ='<img src="/assets/svg/clear.svg">';
-            // clearButton.style.border = '3px solid blue';
-            // clearButton.style.color = 'blue';
-            // clearButton.style.width = 'fit-content';
-            // clearButton.style.marginRight = '10px';
-            if(isMobile){
-                clearButton.style.padding = '2px 8px';
-                buttonsContainer.style.top = '100px';
-                buttonsContainer.style.marginLeft = '30px';
-                clearButton.style.marginTop = '-15px';
-                
-            }else if(isTab){
-                clearButton.style.marginTop = '-100px';
-            } else {
-                clearButton.style.padding = '5px 10px';
-                clearButton.style.marginTop = '-115px';
-            }        
-            // clearButton.style.fontWeight = 'bold';
-            // clearButton.style.borderRadius = '20%';
-            // clearButton.style.boxShadow = '5px 10px 30px #7c4c2390';
+            clearButton.style.marginTop = !isMobile ? `-10px` :`0px`;
+       
             clearButton.addEventListener('click', () => {
                 clearDrawing();
             }); 
 
-            if(isMobile){
-                clearButton.style.display = 'none';
-            }
-
             colorViewButton.setInteractive().on('pointerdown', () => {
-                if(clearButton.style.display === 'block') {
-                    clearButton.style.display = 'none';
-                }else{
-                    clearButton.style.display = 'block';
-                }
+                clearButton.style.display === 'block' ? clearButton.style.display = 'none' : clearButton.style.display = 'block'; 
             });
 
             // Create the Eraser button
@@ -694,7 +683,8 @@ import Layout from '../../layouts/Layout.astro';
                 }
             });
             // Add the Clear and Eraser buttons to the container
-            buttonsContainer.appendChild(clearButton);
+            colorEraserCont.append(colorPicker);
+            colorEraserCont.append(clearButton);
             // buttonsContainer.appendChild(eraserButton).setVisible;
             
             const sliderContainer = document.createElement('div');
diff --git a/task/27.11.2024.txt b/task/27.11.2024.txt
new file mode 100644
index 0000000..306ecfe
--- /dev/null
+++ b/task/27.11.2024.txt
@@ -0,0 +1,2 @@
+Gallery Implement in all drawing games?
+The new design for Buzzboard is hard to achieve so its need to develope from base lavel
\ No newline at end of file