diff --git a/index.html b/index.html
index 2940da2..e4675d8 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,7 @@
 
 <body>
     <div id="menu">
-        <select id="color">
+        <select id="colorSelect">
             <option value="green">Zielony</option>
             <option value="red">Czerwony</option>
             <option value="yellow">Żółty</option>
@@ -20,8 +20,10 @@
             <option value="black">Czarny</option>
             <option value="lime">Limonkowy</option>
         </select>
-        <input type="range" min="5" max="40" value="5" id="weight"/>
-        <button id="clear">Wyczyść rysunek!</button>
+        <label for="colorSelect">Wybierz kolor: </label>
+        <input type="range" min="5" max="40" value="5" id="weightSlider"/>
+        <label for="weightSlider">Wybierz grubość linii: </label>
+        <button id="clearButton">Wyczyść rysunek!</button>
     </div>
     <canvas id="canvas"></canvas>
 </body>
diff --git a/script.js b/script.js
index b4f31c9..048c558 100644
--- a/script.js
+++ b/script.js
@@ -4,12 +4,7 @@ document.addEventListener('mouseup', stopPainting);
 document.addEventListener('mousemove', draw);
 window.addEventListener('resize', resize);
 
-const colorSelector = document.getElementById('color');
-const weightSlider = document.getElementById('weight');
-const clearButton = document.getElementById('clear');
-const canvas = document.getElementById('canvas');
 const ctx = canvas.getContext('2d');
-
 let color = 'green';
 let weight = 5;
 
@@ -28,6 +23,7 @@ document.addEventListener('wheel', e => {
 clearButton.addEventListener('click', () => ctx.clearRect(0, 0, canvas.width, canvas.height))
 weightSlider.addEventListener('change', e => weight = e.target.value)
 colorSelector.addEventListener('change', e => color = e.target.value)
+
 resize();
 
 function resize() {
