diff --git a/src/features/helpers/Helpers.js b/src/features/helpers/Helpers.js
index 68ed6a6..190e5df 100644
--- a/src/features/helpers/Helpers.js
+++ b/src/features/helpers/Helpers.js
@@ -1,8 +1,10 @@
 import React from 'react';
+import styles from './Helpers.module.css';
 
 const Slider = (props) => {
     return (
         <input
+            className={styles.slider}
             type="range"
             min={props.min}
             max={props.max}
@@ -20,6 +22,7 @@ const SelectList = (props) => {
     ));
     return (
         <select
+            className={styles.dropdown}
             value={props.value}
             onChange={(e) => props.onChange(e.target.value)}>
             {options}
diff --git a/src/features/helpers/Helpers.module.css b/src/features/helpers/Helpers.module.css
new file mode 100644
index 0000000..d7ab940
--- /dev/null
+++ b/src/features/helpers/Helpers.module.css
@@ -0,0 +1,21 @@
+.slider {
+    -webkit-appearance: none;
+    appearance: none;
+    outline: none;
+    height: 5px;
+    background-color: lightgray;
+    border-radius: 10px;
+    position: relative;
+}
+.slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    background: slategray;
+    height: 15px;
+    width: 15px;
+    border-radius: 50%;
+    transition: background 0.15s ease-in-out;
+}
+.slider::-webkit-slider-thumb:hover {
+    background: slateblue;
+}