diff --git a/index.html b/index.html
index 01654f6..60ea2d2 100644
--- a/index.html
+++ b/index.html
@@ -11,37 +11,48 @@
 
 
     <div class="area">
-        <div class="user-input">
-            <button class="pen" id="rgbColor">RGB</button>
-            <button class="pen" id="blackColor">Black</button>
-            <button class="pen" id="whiteColor">White</button>
-            <button class="pen" id="shade">Shade</button>
-            <button class="pen" id="tint">Tint</button>
-            <button class="pen" id="opacity">Opacity</button>
-            <button class="pen" id="trans">Transparent</button>
-            <button class="pen" id="erase">Erase</button>
-            <button id="gridToggle">Grid</button>
-            <button id="reset">Reset</button>
+        <div class="pen-input">
+            <div class="pen-color">
+                <button class="pen" id="blackColor">Black</button>
+                <button class="pen" id="whiteColor">White</button>
+                <button class="pen" id="rgbColor">RGB</button>
 
-            <div id = "col-picker">
-                <label for="custom-color">Pick a color:</label>
-                <input type="color" id="custom-color" value="#ff0000">
+                <div class="col-picker">
+                    <label for="custom-color">Pen color:</label>
+                    <input type="color" id="custom-color" value="#ff0000">
+                </div>
+
+                <button class="pen" id="erase">Erase</button>
             </div>
 
-            <div id = "background-col-picker">
-                <label for="back-col-picker">Pick a color:</label>
-                <input type="color" id="back-col-picker" value="#ff0000">
-            </div>
-
-
-            <div class="slider">
-                <label for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
-                <input name="gridSlider" id="gridSlider" type="range" min="1" max="100" value="16">
+            <div class="pen-tools">
+                <button class="pen" id="shade">Shade</button>
+                <button class="pen" id="tint">Tint</button>
+                <button class="pen" id="opacity">Opacity</button>
+                <button class="pen" id="trans">Transparent</button>
             </div>
         </div>
         
-        <div class="container">
+        <div class="container"></div>
 
+        <div class="grid-input">
+            <div class="grid-tools">
+                <div class="slider">
+                    <label for="gridSlider">Grid Size: <span id="sliderLabel"></span></label>
+                    <input name="gridSlider" id="gridSlider" type="range" min="1" max="100" value="16">
+                    <div class="range-knob" id="knob">
+                        <div class="range-knotch" id="knotch"></div>
+                    </div>
+                </div>
+
+                <div class="background-col-picker">
+                    <label for="back-col-picker">Canvas color:</label>
+                    <input type="color" id="back-col-picker" value="#ff0000">
+                </div>
+
+                <button id="gridToggle">Grid</button>
+                <button id="reset">Reset</button>
+            </div>
         </div>
     </div>
     
diff --git a/script.js b/script.js
index ca24efe..a34c6c0 100644
--- a/script.js
+++ b/script.js
@@ -36,7 +36,7 @@ colorPicker.addEventListener("change", changeColor);
 backColorPicker.addEventListener("input", pickBackground);
 reset.addEventListener("click", resetGrid);
 gridSlider.addEventListener("input", getGridDimensions);
-
+gridSlider.addEventListener("change", getGridDimensions);
 
 
 function resetGrid() {
@@ -69,7 +69,6 @@ function createGrid() {
     sliderLabel.textContent = numGrid;
 
     grid.classList.add("grid", "grid-on");
-    //grid.classList.add("grid-on");
     grid.style.width = gridWidth + '%';
     grid.style.height = gridWidth + '%';
     grid.style.opacity = 0.9;
diff --git a/style.css b/style.css
index ca54a14..950186c 100644
--- a/style.css
+++ b/style.css
@@ -5,11 +5,18 @@ body{
 }
 .area{
     display: flex;
-    flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 90vh;
 }
+
+.pen-input, .grid-input {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin: 20px;
+}
+
 .container{
     border: 1px solid #bbb;
     height: 500px;
@@ -19,12 +26,6 @@ body{
     background: white;
 }
 
-.user-input {
-    display: flex;
-    justify-content: center;
-    margin: 20px;
-}
-
 .slider {
     display: flex;
     flex-direction: column;
@@ -32,6 +33,28 @@ body{
     align-items: center;
 }
 
+.range-knob {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    border: 1px solid #111;
+    cursor: pointer;
+    background: #bbb;
+    box-shadow: 1px 2px 10px 1px #555;
+}
+
+.range-knotch {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    cursor: pointer;
+    background: #111;
+    position: relative;
+    top: 15%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
 .grid {
     box-sizing: border-box;
 }