diff --git a/Webserver/Templates/dashboard.html b/Webserver/Templates/dashboard.html
index bcc3ff3..502b46c 100644
--- a/Webserver/Templates/dashboard.html
+++ b/Webserver/Templates/dashboard.html
@@ -114,10 +114,12 @@
                                 </tr>
                             {% endif %}
                             <tr>
-                                <td class="icon">
-                                    <span class="outer_dot">
-                                        <p  class="inner_icon">{{'A' if zone.autoMode else 'M'}}</p>
-                                    </span>
+                                <td>
+                                    <label class="toggle">
+                                        <input type="checkbox" {{ "checked" if zone.autoMode }} onchange="switchZoneMode(this.checked, {{ zone.number }})">
+                                        <span class="slider"></span>
+                                        <span class="labels" data-on="A" data-off="H"></span>
+                                    </label>
                                 </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>
diff --git a/Webserver/Templates/header.html b/Webserver/Templates/header.html
index 5dbb9bd..d1eb6a4 100644
--- a/Webserver/Templates/header.html
+++ b/Webserver/Templates/header.html
@@ -3,7 +3,9 @@
 <head>
     <link rel="stylesheet" href="{{ url_for('static', filename='Styles/header.css') }}">
     <link rel="stylesheet" href="{{ url_for('static', filename='Styles/main.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='Styles/switch.css') }}">
     <meta charset="UTF-8">
+    <meta http-equiv="refresh" content="5" >
 
     <script>
         function executeAction(command, index, value) {
@@ -13,6 +15,9 @@
             var value = document.getElementById(valueID).value * valueFactor;
             executeAction(command, index, value);
         }
+        function switchZoneMode(autoMode, zone) {
+            executeAction('switch_zone_mode' ,zone, (autoMode ? 'automatic' : 'manual'))
+        }
     </script>
 </head>
 <body>
@@ -29,11 +34,11 @@
             </ul>
         </nav>
 
-        <div class="heading">           
+        <a class="heading" href="{{ url_for('startPage')}}">           
             <img src="{{ url_for('static', filename='img/header/wassertropfen.png') }}" alt="" class="title-img">
 
             <h1>{{ translater.getTranslation("Irrigation") }}-<br>{{ translater.getTranslation("system") }}</h1>
-        </div>
+        </a>
 
         <img src="{{ url_for('static', filename='img/header/blumenbeet.jpg') }}" alt="" class="header-img">
         
diff --git a/Webserver/static/Styles/header.css b/Webserver/static/Styles/header.css
index 570ac50..690ed9e 100644
--- a/Webserver/static/Styles/header.css
+++ b/Webserver/static/Styles/header.css
@@ -45,7 +45,8 @@ nav ul li a:hover{
     background-color: darkblue;
     padding-top: 0px;
     padding-bottom: 0px;
-    margin: 0px;   
+    margin: 0px;  
+    text-decoration: none; 
 }   
 
 .heading h1{
diff --git a/Webserver/static/Styles/main.css b/Webserver/static/Styles/main.css
index 453347f..4ed0a3a 100644
--- a/Webserver/static/Styles/main.css
+++ b/Webserver/static/Styles/main.css
@@ -9,4 +9,9 @@ h2{
     font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
     text-transform: uppercase;
     margin-bottom: 2em;
+}
+
+h3{
+    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
+    text-transform: uppercase;
 }
\ No newline at end of file
