diff --git a/Webserver/Templates/dashboard.html b/Webserver/Templates/dashboard.html
index c657192..37d55c9 100644
--- a/Webserver/Templates/dashboard.html
+++ b/Webserver/Templates/dashboard.html
@@ -1,29 +1,29 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-    <link rel="stylesheet" href="../static/Styles/main.css">
-    <link rel="stylesheet" href="../static/Styles/dashboard.css">
-    <meta charset="UTF-8">
+    <link rel="stylesheet" href="{{ url_for('static', filename='Styles/dashboard.css') }}">
+
     <title>{{ translater.getTranslation("Irrigation") }}{{ translater.getTranslation("system") }}</title>
 
     <style>
         @media screen and (min-width: 2051px){
             #content{
-                grid-template-rows: repeat( {{ (zones|length / 3) + 1  }} , minmax(150px, auto));
+                grid-template-rows: repeat( {{ (zoneManager.zones|length / 3) + 1  }} , minmax(150px, auto));
             }
         }
         @media screen and (max-width: 2050px) and (min-width: 1351px){
             #content{
-                grid-template-rows: repeat( {{ (zones|length / 2) + 1  }} , minmax(150px, auto));
+                grid-template-rows: repeat( {{ (zoneManager.zones|length / 2) + 1  }} , minmax(150px, auto));
             }
         }
         @media screen and (max-width: 1350px){
             #content{
-                grid-template-rows: repeat( {{ zones|length }} , minmax(150px, auto));
+                grid-template-rows: repeat( {{ zoneManager.zones|length }} , minmax(150px, auto));
             }
         }
 
     </style>
+
 </head>
 <body>
     {% include "header.html" %}
@@ -34,7 +34,7 @@
         <h2>{{ translater.getTranslation("Dashboard") }}</h2>
 
         <div id="content">
-            {% for zone in zones %}
+            {% for zone in zoneManager.zones %}
                 <div id="zone_{{ zone.number }}" class="zone">
                     <a href="/zones/{{ zone.number}}">
                         <h3>{{ zone.name }}</h3>
@@ -48,9 +48,14 @@
                                     </span>
                                 </td>
                                 <td class="property">{{ translater.getTranslation("state") }}:</td>
-                                <td class="value">
-                                    <p class="state">{{ translater.getTranslation("switched on") if zone.state else translater.getTranslation("switched off") }}</p>
-                                    <p class="on_off" href="">{{ translater.getTranslation("turn off") if zone.state else translater.getTranslation("turn on") }}</p>
+                                <td class="value">{{ translater.getTranslation("switched on") if zone.state else translater.getTranslation("switched off") }}</td>
+                                <td>
+                                    <select id="duration_zone_{{ zone.number }}">
+                                        {% for option in zoneManager.systemSettings.webDurationOptions %}
+                                            <option value="{{ option }}">{{ option }} {{ translater.getTranslation("minutes") }}</option>
+                                        {% endfor %}
+                                    </select>
+                                    <button onclick="executeActionByValueID({{'"switch_zone_off"' if zone.state else '"switch_zone_on"'}},'{{ zone.number }}', 'duration_zone_{{ zone.number }}', 60)">{{ translater.getTranslation("turn off") if zone.state else translater.getTranslation("turn on") }}</button>
                                 </td>
                                 
                             </tr>
@@ -62,6 +67,9 @@
                                 </td>
                                 <td class="property">{{ translater.getTranslation("operating mode") }}:</td>
                                 <td class="value">{{translater.getTranslation("automatic mode") if zone.autoMode else translater.getTranslation("manual mode")}}</td>
+                                <td>
+                                    <button onclick="executeAction('switch_zone_mode','{{ zone.number }}', '{{ 'manual' if zone.autoMode else 'automatic' }}')">{{translater.getTranslation("switch to manual mode") if zone.autoMode else translater.getTranslation("switch to automatic mode")}}</button>
+                                </td>
                             </tr>
                             <tr>
                                 <td class="icon">
diff --git a/Webserver/Templates/header.html b/Webserver/Templates/header.html
index 8b87bdb..5dbb9bd 100644
--- a/Webserver/Templates/header.html
+++ b/Webserver/Templates/header.html
@@ -1,8 +1,19 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-    <link rel="stylesheet" href="../static/Styles/header.css">
+    <link rel="stylesheet" href="{{ url_for('static', filename='Styles/header.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='Styles/main.css') }}">
     <meta charset="UTF-8">
+
+    <script>
+        function executeAction(command, index, value) {
+            send_web_request('{{url_for("executeAction")}}/' + command + '/' + index + '/' + value, 'no', 'variable');
+        }
+        function executeActionByValueID(command, index, valueID, valueFactor){
+            var value = document.getElementById(valueID).value * valueFactor;
+            executeAction(command, index, value);
+        }
+    </script>
 </head>
 <body>
     <header>
@@ -19,13 +30,15 @@
         </nav>
 
         <div class="heading">           
-            <img src="../static/img/header/wassertropfen.png" alt="" class="title-img">
+            <img src="{{ url_for('static', filename='img/header/wassertropfen.png') }}" alt="" class="title-img">
 
             <h1>{{ translater.getTranslation("Irrigation") }}-<br>{{ translater.getTranslation("system") }}</h1>
         </div>
 
-        <img src="../static/img/header/blumenbeet.jpg" alt="" class="header-img">
+        <img src="{{ url_for('static', filename='img/header/blumenbeet.jpg') }}" alt="" class="header-img">
         
     </header>
+    <script src="{{ url_for('static', filename='js/webhook.js') }}"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
+
diff --git a/Webserver/Templates/system.html b/Webserver/Templates/system.html
index 4875170..58d6f66 100644
--- a/Webserver/Templates/system.html
+++ b/Webserver/Templates/system.html
@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-    <link rel="stylesheet" href="../static/Styles/main.css">
-    <meta charset="UTF-8">
+
     <title>{{ translater.getTranslation("Irrigation") }}{{ translater.getTranslation("system") }}</title>
 </head>
 <body>
diff --git a/Webserver/Templates/times.html b/Webserver/Templates/times.html
index a3b998b..f8f4c6b 100644
--- a/Webserver/Templates/times.html
+++ b/Webserver/Templates/times.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-    <link rel="stylesheet" href="../static/Styles/main.css">
-    <meta charset="UTF-8">
+
+
     <title>{{ translater.getTranslation("Irrigation") }}{{ translater.getTranslation("system") }}</title>
 </head>
 <body>
diff --git a/Webserver/Templates/zone.html b/Webserver/Templates/zone.html
index 7a1604f..36fbc27 100644
--- a/Webserver/Templates/zone.html
+++ b/Webserver/Templates/zone.html
@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-    <link rel="stylesheet" href="../static/Styles/main.css">
-    <meta charset="UTF-8">
+
     <title>{{ translater.getTranslation("Irrigation") }}{{ translater.getTranslation("system") }}</title>
 </head>
 <body>
diff --git a/Webserver/Templates/zones.html b/Webserver/Templates/zones.html
index 10d4e81..61d3c36 100644
--- a/Webserver/Templates/zones.html
+++ b/Webserver/Templates/zones.html
@@ -1,8 +1,8 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
-    <link rel="stylesheet" href="../static/Styles/main.css">
-    <meta charset="UTF-8">
+
+
     <title>{{ translater.getTranslation("Irrigation") }}{{ translater.getTranslation("system") }}</title>
 </head>
 <body>
diff --git a/Webserver/static/Styles/dashboard.css b/Webserver/static/Styles/dashboard.css
index 857f94e..5fee598 100644
--- a/Webserver/static/Styles/dashboard.css
+++ b/Webserver/static/Styles/dashboard.css
@@ -57,25 +57,6 @@ td.value{
     position: relative;
 }
 
-.state{
-    display: inline;
-}
-.on_off{
-    display: none;
-    color: green;
-    position: absolute;
-    background: #bbb;
-    padding-right: 50px;
-    padding-left: 5px;
-    top: -15px;
-    left: 0px;
-    z-index: 1;
-}
-.state:hover + .on_off, .on_off:hover{
-    display: inline;
-}
-
-
 
 
 .outer_dot {
