diff --git a/package-lock.json b/package-lock.json
index 1e03aa898924721ac08ddccccb25e7824808e1ba..ebb7f242a4a0ba3bb7fba80996c657eff4a70a4b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,7 +17,7 @@
         "@types/react": "^18.3.3",
         "@types/react-dom": "^18.3.0",
         "@vitejs/plugin-react": "^4.3.1",
-        "eslint": "^9.9.0",
+        "eslint": "^9.10.0",
         "eslint-plugin-react": "^7.35.0",
         "eslint-plugin-react-hooks": "^5.1.0-rc.0",
         "eslint-plugin-react-refresh": "^0.4.9",
diff --git a/package.json b/package.json
index bce227a5d627e2725cd3703fe18a4a2fa3663b3c..2a9eb5277656a82d7d1d31c1684aefed5dfdef01 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^9.9.0",
+    "eslint": "^9.10.0",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^5.1.0-rc.0",
     "eslint-plugin-react-refresh": "^0.4.9",
diff --git a/src/BubbleSort.jsx b/src/BubbleSort.jsx
index 93f2dbeb87349ff7419127bf5c4ec4f9ec51b023..03b4c9da8fc6afeeaaf352e2be91221e9807c183 100644
--- a/src/BubbleSort.jsx
+++ b/src/BubbleSort.jsx
@@ -1,4 +1,4 @@
-async function BubbleSort(EingangsArray, updateBars, setColor){
+async function BubbleSort(EingangsArray, updateBars, setColor, sortSpeed){
     const len = EingangsArray.length;
     for(let i = 0; i< len -1; ++i){
         for(let k=0; k< len -1-i; k++){
@@ -13,7 +13,7 @@ async function BubbleSort(EingangsArray, updateBars, setColor){
                 EingangsArray[k+1] = tmp;
             }
             updateBars([...EingangsArray]);
-            await new Promise(resolve => setTimeout(resolve, 40)); //  Pause für Animation
+            await new Promise(resolve => setTimeout(resolve, sortSpeed)); //  Pause für Animation
         }
     }
     setColor([(len-len)]);
diff --git a/src/SortingVisualizer.css b/src/SortingVisualizer.css
index a82cfa2c993587504b4881bb124b180536d263aa..1fb138a020fcc0b1206ae24dc30d4206c5da8c04 100644
--- a/src/SortingVisualizer.css
+++ b/src/SortingVisualizer.css
@@ -1,4 +1,4 @@
-body{
+body {
     margin: 0;
 }
 
@@ -9,13 +9,13 @@ body{
 }
 
 
- .bar {
-     background-color: blue;
-     display: inline-block;
-     height: 100px;
-     flex: 1 1 20px;
-     min-width: 2px;
- }
+.bar {
+    background-color: blue;
+    display: inline-block;
+    height: 100px;
+    flex: 1 1 20px;
+    min-width: 2px;
+}
 
 .sorted {
     background-color: deeppink;
@@ -35,10 +35,10 @@ body{
 
 .range-slider {
     margin-top: -4px;
-    padding: 0 px;
+    padding: 0px;
 }
 
-.ToolBar {
+#ToolBar {
     height: 50px;
     width: 100%;
     background: aquamarine;
@@ -48,7 +48,45 @@ body{
     align-items: center;
 
 }
-.DivArray{
+
+.Button {
+    margin: 10px;
+    height: 60%;
+    width: 65px;
+    background: #66d6d6;
+    text-align: center;
+    display: grid;
+    place-items: center;
+    border-radius: 5px;
+    border: none;
+    color: #003d3d;
+    font-size: 14px;
+    font-family: Arial, sans-serif;
+    font-weight: bold;
+}
+
+#startButton {
+    height: 70%;
+    margin: 20px;
+    background: red;
+    width: 80px;
+    scale: 110%;
+    font-size: 12px;
+}
+
+button:active {
+    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.46);
+    transform: translateY(2px);
+}
+
+.SpeedLabel {
+    margin: 10px;
+    font-size: 15px;
+    font-weight: bold;
+    color: #003d3d;
+}
+
+.DivArray {
     transform: rotate(180deg);
     transform: scaleY(-1);
     display: flex;
diff --git a/src/SortingVisualizer.jsx b/src/SortingVisualizer.jsx
index fdcd7dbb6ffcdc7257fe35f3548a7925e642749e..2d4b98d8de4fa125c6f04bdd012f4eb526fc37b6 100644
--- a/src/SortingVisualizer.jsx
+++ b/src/SortingVisualizer.jsx
@@ -1,4 +1,4 @@
-import React, {useState, useEffect, useRef} from 'react';
+import {useState, useEffect} from 'react';
 import './SortingVisualizer.css'
 import BubbleSort from "./BubbleSort";
 import RangeSlider from 'react-bootstrap-range-slider';
@@ -14,7 +14,7 @@ function SortingVisualizer() {
     const [sorting, setSorting] = useState(false);
     const [alreadySorted, setAlreadySorted] = useState();
     const [isSorted, setIsSorted] = useState(false);
-    console.log((window.innerWidth / 23).toFixed(0) - moduloFive);
+    const [sortSpeed, setSortSpeed] = useState('40');
 
     const SliderWithInputFormControl = () => {
         const [sliderValue_intern, setSliderValue_intern] = useState(BarNumber);
@@ -41,22 +41,13 @@ function SortingVisualizer() {
     }
 
     function generateArray(numberBars) {
-
         return Array.from({length: numberBars}, () => getRandomArbitrary(50, 300));
-        console.log('bar length' + bars.length);
-        let ColoredBars = document.getElementsByClassName('sorted');
-        console.log(ColoredBars);
-        while (ColoredBars.length > 0) {
-            ColoredBars[0].className = 'bar';
-        }
-
-
     }
 
     async function handleSorting() {
         if (sorting) return;
         setSorting(true);
-        await BubbleSort(bars, setbars, setAlreadySorted);
+        await BubbleSort(bars, setbars, setAlreadySorted, sortSpeed);
         setSorting(false);
     }
 
@@ -101,7 +92,7 @@ function SortingVisualizer() {
     return (
         <>
             <div className='Container'>
-                <div className='ToolBar'>
+                <div id='ToolBar'>
                     <SliderWithInputFormControl style={{className: 'range-slider'}}/>
                     <input type='number' max={100} min={0}
                            onChange={changeEvent => {
@@ -111,10 +102,23 @@ function SortingVisualizer() {
                                setBarNumber(value);
                            }} defaultValue={BarNumber}
                            value={BarNumber} style={{width: '50px', margin: '10px'}}/>
-                    <button id='startButton' style={{margin: '20px'}} disabled={sorting} onClick={() => {
+                    <div style={{background: 'gray', height: '85%', width: '2px'}}></div>
+                    <div className="SpeedLabel">Sorting-Speed: </div>
+                    <button className="Button" disabled={sorting}
+                            style={{background: `${sortSpeed == 100 ? 'green' : ''}`}}
+                            onClick={() => setSortSpeed('100')}>Slow
+                    </button>
+                    <button className="Button" disabled={sorting}
+                            style={{background: `${sortSpeed == 40 ? 'green' : ''}`}}
+                            onClick={() => setSortSpeed('40')}>Medium
+                    </button>
+                    <button className="Button" disabled={sorting}
+                            style={{background: `${sortSpeed == 0 ? 'green' : ''}`}}
+                            onClick={() => setSortSpeed('0')}>Fast
+                    </button>
+                    <button id='startButton' className="Button" disabled={sorting} onClick={() => {
                         handleButton()
                     }}>{sorting ? 'Sorting...' : 'Sort'}</button>
-
                 </div>
                 <div className='DivArray'>
                     {bars.map((height, index) => (<div key={index} data-key={index}