diff --git a/src/Python/flask/web/static/style.css b/src/Python/flask/web/static/style.css
index 1c989b5..b001428 100644
--- a/src/Python/flask/web/static/style.css
+++ b/src/Python/flask/web/static/style.css
@@ -73,47 +73,51 @@ body {
     transition: transform 0.2s ease, background-color 0.2s ease;
 }
 
-/* Middenknop */
-.btn:nth-child(1) {
+/* Direction buttons */
+.btn:nth-child(1) { /* Left */
     top: 50%;
     left: 50%;
-    transform: translate(-125%, -50%);
+    transform: translate(-160%, -50%);
 }
 
-/* Knop boven */
-.btn:nth-child(2) {
+.btn:nth-child(2) { /* Up */
     top: 0;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translate(-50%, -35%);
 }
 
-/* Knop rechts */
-.btn:nth-child(3) {
+.btn:nth-child(3) { /* Right */
     top: 50%;
     right: 0;
-    transform: translateY(-50%);
+    transform: translate(35%,-50%);
 }
 
-/* Knop onder */
-.btn:nth-child(4) {
+.btn:nth-child(4) { /* Down */
     bottom: 0;
     left: 50%;
-    transform: translateX(-50%);
+    transform: translate(-50%, 35%);
 }
 
-/* Knop links */
-.btn:nth-child(5) {
+.btn:nth-child(5) { /* Stop Button */
     top: 50%;
-    left: 0;
-    transform: translateY(-50%);
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: red; /* Distinct color for the stop button */
+    width: 60px; /* Slightly larger for emphasis */
+    height: 60px; /* Slightly larger for emphasis */
+    line-height: 60px; /* Center text vertically */
 }
 
+/* Hover effects */
 .btn:hover {
     background-color: #0056b3;
-    /* transform: scale(1.1); */
 }
 
 .btn:active {
     background-color: #004494;
 }
+
+.stop-button:hover {
+    background-color: darkred; /* Different hover color for the stop button */
+}
   
\ No newline at end of file
diff --git a/src/Python/flask/web/templates/index.html b/src/Python/flask/web/templates/index.html
index d92042a..eccf147 100644
--- a/src/Python/flask/web/templates/index.html
+++ b/src/Python/flask/web/templates/index.html
@@ -1,10 +1,15 @@
-{%extends 'base.html'%} {%block head%} {%endblock%} {%block content%}
+{% extends 'base.html' %}
+{% block head %}
+<link rel="stylesheet" href="../static/style.css" />
+{% endblock %}
+{% block content %}
 <!DOCTYPE html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Kobuki</title>
+    <link rel="stylesheet" href="../static/style.css" />
   </head>
   <body>
     <div class="container">
@@ -12,12 +17,12 @@
         <img src="kobuki.jpg" alt="Kobuki Robot" id="robot-image" />
       </div>
       <div class="button-section">
-        <form id = "form" action="/move" method="post">
+        <form id="form" action="/move" method="post">
           <button class="btn" name="direction" value="left">←</button>
           <button class="btn" name="direction" value="up">↑</button>
           <button class="btn" name="direction" value="right">→</button>
           <button class="btn" name="direction" value="down">↓</button>
-          <button class="btn" name="direction" value="stop">Stop</button>
+          <button class="btn stop-button" name="direction" value="stop">Stop</button>
         </form>
       </div>
     </div>
@@ -27,5 +32,4 @@
     <script src="../static/script.js"></script>
   </body>
 </html>
-
-{%endblock%}
+{% endblock %}
