diff --git a/public/index.html b/public/index.html
index 863ce55f807478b515982a345b129c37ecde6a40..3102fc915fd60bf4acc078cdd411ebfee1d6d37d 100644
--- a/public/index.html
+++ b/public/index.html
@@ -76,6 +76,25 @@
                 <div id="rectangle"></div>
               </a>
             </div>
+            <div class="pen-body">
+              <div id="brush-colour">
+                <h3>Brush size</h3>
+              </div>
+              &nbsp;
+              <div class="slide-size">
+                <input
+                  type="range"
+                  min="1"
+                  max="100"
+                  value="50"
+                  class="slider"
+                  id="range"
+                />
+                <p style="text-align: center; margin: 0px">
+                  Size: <span id="value"></span>
+                </p>
+              </div>
+            </div>
           </div>
         </div>
         <div id="palette" class="properties" style="padding-top: 150px">
diff --git a/public/styles.css b/public/styles.css
index 067051c0e9aeea80bb3eb5826767c111626838e6..d0ccd4e1dd5bc7192e06fc80a1d4b83e902eb812 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -256,6 +256,40 @@ button.selected {
   text-align: center;
 }
 
-.properties:palette {
-  padding-top: 50px;
+.slide-size {
+  width: 90%;
+  height: 20%;
+}
+
+.slider {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: 25px;
+  background: #d3d3d3;
+  outline: none;
+  opacity: 0.7;
+  -webkit-transition: 0.2s;
+  transition: opacity 0.2s;
+  margin-top: 30px;
+}
+
+.slider:hover {
+  opacity: 1;
+}
+
+.slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 25px;
+  height: 25px;
+  background: #4f4f4f;
+  cursor: pointer;
+}
+
+.slider::-moz-range-thumb {
+  width: 25px;
+  height: 25px;
+  background: #4f4f4f;
+  cursor: pointer;
 }
diff --git a/src/app.js b/src/app.js
index 40f046eb207e012e24cbf7b9a020ec5ae62f25fa..ab232973c9ba7b79e667ebd03fa1b5358288f21e 100644
--- a/src/app.js
+++ b/src/app.js
@@ -101,6 +101,12 @@ for (var i = 1; i < svg.length; i++) {
   })
 }
 
+HTML.output.innerHTML = HTML.slider.value
+
+HTML.slider.oninput = function() {
+  HTML.output.innerHTML = this.value
+}
+
 HTML.eraserButton.addEventListener("click", () => {
   currentTool = tools.ERASER
   HTML.penButton.classList.remove("selected")
diff --git a/src/canvas.js b/src/canvas.js
index 7ea872de8af48046bb02ba8b0e637d910e6cb010..5edeaccf78ba6ee7b44cb39507a0ed8924d6be86 100644
--- a/src/canvas.js
+++ b/src/canvas.js
@@ -84,7 +84,6 @@ export const renderPath = (id, points) => {
       // Further split up segments based on thickness.
       const subpath_ = subpath.slice()
       let w = subpath_[0][2]
-      console.log(w)
       for (let i = 1; i < subpath_.length; i++) {
         if (subpath_[i][2] != w) {
           const d = lineFn([...subpath_.splice(0, i), subpath_[0]])
diff --git a/src/elements.js b/src/elements.js
index dc03849bff521e250947acef6b6fea3a802502fd..cf803c13e5cde3a69621e06c419941b1bb25453f 100644
--- a/src/elements.js
+++ b/src/elements.js
@@ -20,3 +20,5 @@ export const span = document.querySelectorAll(".close")
 export const palette = document.getElementById("palette")
 export const rectangle = document.getElementById("rectangle")
 export const wheel = document.getElementById("wheel")
+export const slider = document.getElementById("range")
+export const output = document.getElementById("value")