diff --git a/src/pages/drawing/index.astro b/src/pages/drawing/index.astro
index c4a1403..a764dbc 100644
--- a/src/pages/drawing/index.astro
+++ b/src/pages/drawing/index.astro
@@ -45,7 +45,7 @@ import Layout from '../../layouts/Layout.astro';
     let graphics;
     let isDrawing = false;
     let selectedColor = '#f00f0f'; // Default color
-    let brushSize = 40; // Default brush size
+    let brushSize = 10; // Default brush size
     let customCursor;
     const cursorSizeMultiplier = 1;
 
@@ -59,7 +59,6 @@ import Layout from '../../layouts/Layout.astro';
         fetch(`https://management.beanstalkedu.com/items/game_drawing/${encodeURIComponent(paramsID)}`)
             .then(response => response.json())
             .then(({ data }) => {
-
             const screenCenterX = this.cameras.main.worldView.x + this.cameras.main.width / 2;
             const baseFontSize = 60;
             const responsiveFontSize = (window.innerWidth / 950) * baseFontSize;
@@ -72,7 +71,8 @@ import Layout from '../../layouts/Layout.astro';
             .catch(error => {
             console.error('Error fetching initial data:', error);
             });
-        outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline').setScale(0.5);
+        const outlineImage = this.add.image(displayW / 2, displayH / 2, 'outline').setScale(0.5);
+        outlineImage.setDepth(1);
         graphics = this.add.graphics();
 
         const colorPicker = document.createElement('input');
@@ -105,7 +105,7 @@ import Layout from '../../layouts/Layout.astro';
 
             colors.forEach((color, index) => {
                 const y = paletteY + index * (buttonSize + buttonSpacing);
-                const button = this.add.circle(colorPaletteX, y, buttonSize / 2, Phaser.Display.Color.HexStringToColor(color).color);
+                const button = this.add.circle(colorPaletteX, y, buttonSize / 3, Phaser.Display.Color.HexStringToColor(color).color);
 
                 button.setInteractive();
                 button.on('pointerdown', function () {
@@ -128,8 +128,8 @@ import Layout from '../../layouts/Layout.astro';
         document.body.appendChild(sliderContainer);
 
         sliderContainer.style.position = 'absolute';
-        sliderContainer.style.top = '10%';
-        sliderContainer.style.right = '20px';
+        sliderContainer.style.top = '18%';
+        sliderContainer.style.left = '15%';
 
         const slider = document.createElement('input');
         slider.type = 'range';
@@ -164,6 +164,7 @@ import Layout from '../../layouts/Layout.astro';
             clearDrawing();
         });
 
+        
         this.input.on('pointerdown', () => {
             isDrawing = true;
             startDrawing(this.input.x, this.input.y);