diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index 03b51f6..0a098ad 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -95,7 +95,7 @@ import Layout from '../../layouts/Layout.astro';
             const colorContainer = document.createElement('div');
             colorContainer.style.position = 'absolute';
             colorContainer.style.top = '10%';
-            colorContainer.style.left = '20px';
+            colorContainer.style.left = '10px';
             colorContainer.style.display = 'flex';
             colorContainer.style.marginBottom = '15px';
             if(!isMobile){
@@ -149,28 +149,57 @@ import Layout from '../../layouts/Layout.astro';
             colors.forEach((color, index) => {
                 const x = buttonX + index * (buttonSize + buttonSpacing);
                 const button = document.createElement('button');
-                button.style.backgroundColor = color;
-                button.style.marginBottom = '15px';
+
+                // Make the button transparent
+                button.style.backgroundColor = 'transparent';
+
+                // Remove any border or outline styles
+                button.style.border = 'none';
+                button.style.outline = 'none';
+
+                // Other button styles remain the same
+
+                // Create the SVG element with dynamic fill color
+                button.innerHTML = `
+                    <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="${color}" transform="rotate(90)">
+                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                        <g id="SVGRepo_iconCarrier">
+                            <path d="M12.394 1.154h-.788l-4.574 12.17L7 23h1v-8.292l1.498 1.499 2.502-2.5 2.499 2.5 1.501-1.5V23h1v-9.5zM12 2.95L13.147 6h-2.294zm0 9.344l-2.502 2.5-1.417-1.418L10.477 7h3.046l2.396 6.374-1.42 1.419z"></path>
+                            <path fill="none" d="M0 0h24v24H0z"></path>
+                        </g>
+                    </svg>`;
+
                 if (!isMobile) {
-                    button.style.width = `${buttonSize}px`;
+                    button.style.width = `${buttonSize}px`; 
                     button.style.height = `${buttonSize}px`;
                 } else {
                     button.style.width = `40px`;
                     button.style.height = `40px`;
                 }
-                // button.style.border = '3px solid #05b3a4';
+
                 button.style.boxShadow = '5px 10px 30px #7c4c2390';
-                button.style.borderRadius = '50%';
+                button.style.borderRadius = '20%';
                 button.style.marginRight = `${buttonSpacing}px`;
+                button.style.transform = 'none';
+                
+
                 button.addEventListener('click', () => {
                     // Remove the border from the previously selected button, if any
-                    if(selectedButton) {
+                    if (selectedButton) {
                         selectedButton.style.border = 'none';
+                        selectedButton.style.scale = '1';
+                        button.style.transform = 'none';
                     }
                     // 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 = '3px solid #000'; // Add a black border (you can customize this)
+                    button.style.border = "2px solid"; // Add a black border (you can customize this)
+                    button.style.borderColor = color;
+                    button.style.scale = '1.2';
+                    if(!isMobile){
+                        button.style.transform = 'translateX(0.75rem)';    
+                    }
                     // Update the selectedButton variable to the current button
                     selectedButton = button;
                 });
@@ -182,7 +211,6 @@ import Layout from '../../layouts/Layout.astro';
             // 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'; 
diff --git a/src/pages/drawing/temp.astro b/src/pages/drawing/temp.astro
index 55308dc..67123a3 100644
--- a/src/pages/drawing/temp.astro
+++ b/src/pages/drawing/temp.astro
@@ -9,13 +9,13 @@
         type: Phaser.AUTO,
         width: window.innerWidth,
         height: window.innerHeight,
+        backgroundColor : 0xffffff,
         scene: {
             preload: preload,
             create: create,
             update: update
         }
     };
-
     var graphics;
     var isDragging = false;
     var image;
@@ -25,11 +25,9 @@
     function preload() {
         // Load the image asset
         this.load.image('image', '/assets/A.png');
-    }
-
+    }   
     function create() {
         graphics = this.add.graphics();
-
         // Set line style for the dragging line
         graphics.lineStyle(60, 0x5e17eb); // Blue color, 20px width