diff --git a/src/pages/drawing/game_drawing_jpg.astro b/src/pages/drawing/game_drawing_jpg.astro
index e7495e4..ff867c1 100644
--- a/src/pages/drawing/game_drawing_jpg.astro
+++ b/src/pages/drawing/game_drawing_jpg.astro
@@ -136,8 +136,10 @@ import Layout from '../../layouts/Layout.astro';
             clipArt.classList.add('show');
         }, 100);
     }
-    const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
-    const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
+    const isMobile = window.innerWidth <= 768;
+    const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
+    const isSmallLaptop = window.innerWidth > 1024 && window.innerWidth <= 1366;
+    const isDesktop = window.innerWidth > 1366;
     const drawingZone = {
         // x: isMobile ? 0 : window.innerWidth / 4, // Set x to 0 on mobile, else 1/4 of screen width
         // y: window.innerHeight / 4,
@@ -171,14 +173,21 @@ import Layout from '../../layouts/Layout.astro';
         tickIconWidth = 1.21;
         cancelIconWidth = 1.08;
         galleryIconWidth = 2;
-    }else if(isTab){
+    } else if (isTablet) { // Combined tablet and small laptop handling
         topLogoWidth = 4.5;
         muteIconWidth = 1.6;
         resetIconWidth = 1.43;
         tickIconWidth = 1.29;
         cancelIconWidth = 1.18;
         galleryIconWidth = 1.81;
-    }else{
+    } else if(isSmallLaptop){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+        galleryIconWidth = 1.81;
+    } else { // Desktop
         topLogoWidth = 6;
         muteIconWidth = 1.3;
         resetIconWidth = 1.26;
@@ -303,7 +312,7 @@ import Layout from '../../layouts/Layout.astro';
                 } else{
                     wrapWidth = 200;
                 }
-                const descrptText = this.add.text(screenCenterX, 110, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).setOrigin(0.5);
+                const descrptText = this.add.text(screenCenterX, 80, data.description, { font: `${responsiveFontSize}px quicksand`, fill: '#60C6CB', align: "center", wordWrap: {width: window.innerWidth-wrapWidth}}, ).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)
             })
@@ -410,8 +419,10 @@ import Layout from '../../layouts/Layout.astro';
             // }
             if(isMobile){
                 outlineImage.setDepth(-1).setScale(0.28 );
-            }else if(isTab){
-                outlineImage.setDepth(-1).setScale(0.26);
+            }else if(isTablet){
+                outlineImage.setDepth(-1).setScale(0.30);
+            } else if(isSmallLaptop){
+                outlineImage.setDepth(-1).setScale(0.26);  
             } else{
                 outlineImage.setDepth(-1).setScale(0.4);   
             }
@@ -442,7 +453,7 @@ import Layout from '../../layouts/Layout.astro';
             !isMobile ? colorViewButton.setVisible(false) : '';
 
             colorContainer.style.backgroundColor = '#FFFFFF';
-            colorContainer.style.padding = '30px 20px';
+            colorContainer.style.padding = '30px 15px';
             colorContainer.style.borderRadius = '80px';
             colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
             colorContainer.style.left = '0px';
@@ -471,7 +482,8 @@ import Layout from '../../layouts/Layout.astro';
             colorPicker.className = 'color-picker';
             colorPicker.style.marginBottom = '0px';
             colorPicker.style.marginTop = '-0px';
-            colorPicker.style.marginRight = '15px';
+            colorPicker.style.marginLeft = '15px';
+            colorPicker.style.marginRight = '10px';
             // colorPicker.style.padding = '1px 1px';
             // colorPicker.style.outline = 'none';
             if (!isMobile) {
@@ -498,8 +510,8 @@ import Layout from '../../layouts/Layout.astro';
             let colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
             // const colors = ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#FFA500', '#A52A2A', '#800080', '#FFC0CB', '#C0C0C0', '#FFD700'];
             // const colors = ['#ff0000'];
-            const buttonSize = 60;
-            const buttonSpacing = 15;
+            const buttonSize = 45;
+            const buttonSpacing = 10;
             // Create a container div for the color buttons
             const colorButtonsContainer = document.createElement('div');
             colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally
diff --git a/src/pages/drawing/game_drawing_png.astro b/src/pages/drawing/game_drawing_png.astro
index e166562..bb3459f 100644
--- a/src/pages/drawing/game_drawing_png.astro
+++ b/src/pages/drawing/game_drawing_png.astro
@@ -153,8 +153,10 @@ import Layout from '../../layouts/Layout.astro';
         }, 100);
     }
 
-    const isMobile = window.innerWidth <= 768; // Define your mobile breakpoint as needed
-    const isTab = window.innerWidth > 768 && window.innerWidth <= 1416;
+    const isMobile = window.innerWidth <= 768;
+    const isTablet = window.innerWidth > 768 && window.innerWidth <= 1024;
+    const isSmallLaptop = window.innerWidth > 1024 && window.innerWidth <= 1366;
+    const isDesktop = window.innerWidth > 1366;
 
     const drawingZone = {
         x: 0,
@@ -184,6 +186,7 @@ import Layout from '../../layouts/Layout.astro';
     let audioData;
     let audioFileId = false;
     let isPlaying = false;
+
     if(isMobile){
         topLogoWidth = 4.5;
         muteIconWidth = 1.65;
@@ -191,14 +194,21 @@ import Layout from '../../layouts/Layout.astro';
         tickIconWidth = 1.21;
         cancelIconWidth = 1.08;
         galleryIconWidth = 2;
-    }else if(isTab){
+    } else if (isTablet) { // Combined tablet and small laptop handling
         topLogoWidth = 4.5;
         muteIconWidth = 1.6;
         resetIconWidth = 1.43;
         tickIconWidth = 1.29;
         cancelIconWidth = 1.18;
         galleryIconWidth = 1.81;
-    }else{
+    } else if(isSmallLaptop){
+        topLogoWidth = 4.5;
+        muteIconWidth = 1.6;
+        resetIconWidth = 1.43;
+        tickIconWidth = 1.29;
+        cancelIconWidth = 1.18;
+        galleryIconWidth = 1.81;
+    } else { // Desktop
         topLogoWidth = 6;
         muteIconWidth = 1.3;
         resetIconWidth = 1.26;
@@ -406,11 +416,13 @@ import Layout from '../../layouts/Layout.astro';
             }
             const outlineImage = this.add.image(customWidth / 2, customHeight / 2, 'outline');
             if(isMobile){
-                outlineImage.setDepth(1).setScale(0.2);
-            }else if(isTab){
-                outlineImage.setDepth(1).setScale(0.35);
+                outlineImage.setDepth(-1).setScale(0.28 );
+            }else if(isTablet){
+                outlineImage.setDepth(-1).setScale(0.30);
+            } else if(isSmallLaptop){
+                outlineImage.setDepth(-1).setScale(0.23);  
             } else{
-                outlineImage.setDepth(1).setScale(0.34);   
+                outlineImage.setDepth(-1).setScale(0.4);   
             }
             
             const maskGraphics = this.make.graphics();
@@ -437,7 +449,7 @@ import Layout from '../../layouts/Layout.astro';
                 
             }
             colorContainer.style.backgroundColor = '#FFFFFF';
-            colorContainer.style.padding = '30px 20px';
+            colorContainer.style.padding = '30px 15px';
             colorContainer.style.borderRadius = '80px';
             colorContainer.style.boxShadow = '2px 6px 12.4px 4px #D2D1D170';
             colorContainer.style.left = '0px';
@@ -471,7 +483,8 @@ import Layout from '../../layouts/Layout.astro';
             colorPicker.className = 'color-picker';
             colorPicker.style.marginBottom = '0px';
             colorPicker.style.marginTop = '-0px';
-            colorPicker.style.marginRight = '15px';
+            colorPicker.style.marginLeft = '15px';
+            colorPicker.style.marginRight = '10px';
             // colorPicker.style.padding = '1px 1px';
             // colorPicker.style.outline = 'none';
             if (!isMobile) {
@@ -497,8 +510,8 @@ import Layout from '../../layouts/Layout.astro';
             var colors = isMobile ? ['#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB', '#FFD700'] : ['#FF0000', '#FFFF00', '#0000FF', '#008000', '#A52A2A', '#800080', '#FFC0CB'];
             // 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;
+            const buttonSize = 45;
+            const buttonSpacing = 10;
             // Create a container div for the color buttons
             const colorButtonsContainer = document.createElement('div');
             colorButtonsContainer.style.display = 'flex'; // Display color buttons horizontally