diff --git a/script.js b/script.js
index 870741b..94828db 100644
--- a/script.js
+++ b/script.js
@@ -49,7 +49,7 @@ rangeKnob.addEventListener("mousedown", (e) => {
 function resetGrid() {
     gridSlider.value = gridSlider.defaultValue;
     container.style.backgroundColor = "rgb(180, 254, 235)";
-    backColorPicker.value = "#ffffff";
+    backColorPicker.value = "#b4feeb";
     colorPicker.value = "#000000";
     colorValue = "black";
     rangeKnob.style.transform = `rotate(${gridSlider.value}deg)`;
@@ -67,7 +67,7 @@ function rotateKnob(e) {
     let angle = Math.atan2(e.clientX - knobCenter.x, -(e.clientY - knobCenter.y)) * (180 / Math.PI);
 
     rangeKnob.style.transform = `rotate(${angle}deg)`;
-    
+
     updateGridSlider(angle);
 }
 
diff --git a/style.css b/style.css
index d088df5..d60f448 100644
--- a/style.css
+++ b/style.css
@@ -42,6 +42,11 @@ footer {
     opacity: .8;
 }
 
+button, .container, .color-input, .knob {
+    box-shadow: 1px 2px 10px 1px #555;
+    cursor: pointer;
+}
+
 .pen-input, .grid-input {
     display: flex;
     flex-direction: column;
@@ -56,15 +61,6 @@ footer {
     align-items: center;
 }
 
-@media screen and (max-width: 900px) {
-    .pen-color, .pen-tools, .grid-tools {
-      flex-direction: row; /* Switch to a row layout when wrapping occurs */
-      align-items: flex-end;
-      justify-content: center;
-      flex-wrap: wrap;
-    }
-  }
-
 .col-picker, .background-col-picker {
     margin: 5px;
     width: 100px;
@@ -78,11 +74,14 @@ footer {
 
 .color-input {
     width: 120%;
+    height: 25px;
+
 }
 
 button {
     display: block;
     width: 120px;
+    height: 25px;
     margin: 5px;
     font-size: 18px;
 }
@@ -94,6 +93,19 @@ button {
     display: flex;
     flex-wrap: wrap;
     background: rgb(180, 254, 235);
+    will-change: contents;
+}
+
+.grid {
+    box-sizing: border-box;
+}
+
+.grid-on {
+    border: 1px solid #bbb;
+}
+
+.grid-off {
+    border: none;
 }
 
 .slider {
@@ -112,11 +124,11 @@ button {
     width: 95px;
     height: 95px;
     border-radius: 50%;
-    border: 1px solid #111;
     cursor: pointer;
     background: #bbb;
-    box-shadow: 1px 2px 10px 1px #555;
     margin-top: 5px;
+    transform-style: preserve-3d;
+    will-change: transform, box-shadow;
 }
 
 .knotch {
@@ -125,20 +137,23 @@ button {
     border-radius: 50%;
     cursor: pointer;
     background: #111;
+    box-shadow: 1px 2px 1px 1px #555;
     position: relative;
     top: 15%;
     left: 50%;
     transform: translate(-50%, -50%);
+    box-shadow: 1px 1px 1px #555;
 }
 
-.grid {
-    box-sizing: border-box;
-}
-
-.grid-on {
-    border: 1px solid #bbb;
-}
-
-.grid-off {
-    border: none;
-}
\ No newline at end of file
+@media screen and (max-width: 900px) {
+    .pen-color, .pen-tools, .grid-tools {
+      flex-direction: row; /* Switch to a row layout when wrapping occurs */
+      align-items: flex-end;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+    .knob {
+        width: 50px;
+        height: 50px;
+    }
+  }
\ No newline at end of file