diff --git a/code/components/jomjol_fileserver_ota/server_help.cpp b/code/components/jomjol_fileserver_ota/server_help.cpp
index 3123b3c90..256579e64 100644
--- a/code/components/jomjol_fileserver_ota/server_help.cpp
+++ b/code/components/jomjol_fileserver_ota/server_help.cpp
@@ -63,8 +63,10 @@ esp_err_t send_file(httpd_req_t *req, std::string filename)
         endsWith(filename, ".jpg") ||
         endsWith(filename, ".jpeg") ||
         endsWith(filename, ".ico") ||
-        endsWith(filename, ".png")) {
-
+        endsWith(filename, ".gif") ||
+        endsWith(filename, ".svg") ||
+        endsWith(filename, ".png"))
+    {
     	if (filename == "/sdcard/html/setup.html") {    
             httpd_resp_set_hdr(req, "Clear-Site-Data", "\"*\"");
         }
diff --git a/sd-card/demo/leer.txt b/sd-card/demo/leer.txt
deleted file mode 100644
index e69de29bb..000000000
diff --git a/sd-card/firmware/leer.txt b/sd-card/firmware/leer.txt
deleted file mode 100644
index e69de29bb..000000000
diff --git a/sd-card/html/common.js b/sd-card/html/common.js
index e7c389d41..c9a52f704 100644
--- a/sd-card/html/common.js
+++ b/sd-card/html/common.js
@@ -77,7 +77,7 @@ function LoadFwVersion() {
         if (xhttp.status >= 200 && xhttp.status < 300) {
             fwVersion = xhttp.responseText;
             document.getElementById("Version").innerHTML  = "Slider0007 Fork | " + fwVersion;
-            console.log(fwVersion);
+            //console.log(fwVersion);
             compareVersions();
         } 
         else {
@@ -104,7 +104,7 @@ function LoadWebUiVersion() {
     xhttp.addEventListener('load', function(event) {
         if (xhttp.status >= 200 && xhttp.status < 300) {
             webUiVersion = xhttp.responseText;
-            console.log("Web UI Version: " + webUiVersion);
+            //console.log("Web UI Version: " + webUiVersion);
             compareVersions();
         } 
         else {
@@ -115,7 +115,7 @@ function LoadWebUiVersion() {
 
     try {
         url = _domainname + '/info?type=HTMLVersion';     
-        console.log("url");
+        //console.log("url: " + url);
         xhttp.open("GET", url, true);
         xhttp.send();
     }
@@ -134,7 +134,7 @@ function compareVersions() {
     fWGitHash = arr[arr.length - 1].substring(0, 7);
     arr = webUiVersion.split(" ");
     webUiHash = arr[arr.length - 1].substring(0, 7);
-    console.log("FW Hash: " + fWGitHash + ", Web UI Hash: " + webUiHash);
+    //console.log("FW Hash: " + fWGitHash + ", Web UI Hash: " + webUiHash);
     
     if (fWGitHash != webUiHash) {
         firework.launch("The version of the web interface (" + webUiHash + 
diff --git a/sd-card/html/graph.html b/sd-card/html/graph.html
index 95568858a..8f3c5ef44 100644
--- a/sd-card/html/graph.html
+++ b/sd-card/html/graph.html
@@ -28,14 +28,44 @@
             vertical-align: middle;
         }
 
+        input[type=number] {
+            width: 45px;
+            min-width: 45px;
+            max-width: 45px;
+            margin-right: 0px;
+            padding: 3px 5px;
+            display: inline-block;
+            border: 1px solid #ccc;
+            font-size: 16px;
+            vertical-align: middle;
+        }
+
         .button {
             padding: 5px 10px;
             width: 160px;
             font-size: 16px;
         }
+
+        input:out-of-range {
+            background-color: rgba(255, 0, 0, 0.25);
+            border: 1px solid red;
+        }
+
+        input:invalid {
+            background-color: rgba(255, 0, 0, 0.25);
+            border: 1px solid red;
+        }
     </style>
 
     <script>
+	function addZero(i)
+	{
+        if (i < 10) {
+            i = "0" + i;
+        }
+        return i;
+	}
+
     function run() {
         datefile = document.getElementById("datafiles").value;
         numbername = document.getElementById("numbers").value;
@@ -159,7 +189,7 @@
 
                 var layout = {
                     showlegend: true,
-                    colorway: ['green', 'black', 'blue', 'black'],
+                    colorway: ['green', 'black', 'blue', 'magenta', 'cyan'],
 
                     yaxis: {title: 'Value'},
                     yaxis2: {
@@ -185,6 +215,13 @@
 
                 document.getElementById("chart").innerHTML = "";
                 Plotly.newPlot('chart', data, layout, {displayModeBar: true});
+
+                // Update refresh timestamp
+                var d = new Date();
+		        var h = addZero(d.getHours());
+		        var m = addZero(d.getMinutes());
+		        var s = addZero(d.getSeconds());
+                $('#timestamp').html("Last Refresh: " + (h + ":" + m + ":" + s));
             });
         }).catch((error) => {
             // handle the error
@@ -199,15 +236,25 @@
 
 <body>
     <h2>Data Graph</h2>
-    <div id='chart'><p>Loading...<br></p></div>
-    Number sequence:
-    <select id="numbers" onchange="run();"></select>
-    Day:
-    <select id="datafiles" onchange="run();"></select>
-    <input type="checkbox" id="showRelativeValues" onclick = 'run();' unchecked ><label for="showRelativeValues">Show relative values</label><br><br>
-    <button class="button" onclick="run();">Refresh</button>
-    <button class="button" onClick="window.location.href = 'data.html?v=$COMMIT_HASH'">Show Data Viewer</button>
-    <button class="button" onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show Data Files</button>
+    <div style="margin-top:20px;margin-bottom:0px;">
+        Number sequence: <select id="numbers" onchange="run();"></select>
+        Day: <select id="datafiles" onchange="run();"></select>
+        <input type="checkbox" id="showRelativeValues" onclick = 'run();' unchecked ><label for="showRelativeValues">Show relative values</label><br><br>
+    </div>
+    <div>
+        <input type="checkbox" id="AutoRefreshEnabled" value="1" onchange="AutoRefreshContent();">
+        <label for=AutoRefreshEnabled><class id="AutoRefreshEnabled" style="color:black;">Auto Refresh</class></label>
+        <input required type="number" style="margin-left: 18px;" name="AutoRefreshTime" id="AutoRefreshTime" size="13" min="1" step="1" value="60" 
+                oninput="(!validity.rangeUnderflow||(value=1));" onchange="AutoRefreshContent();"> s
+        <output style="margin-left:48px" id="timestamp" >Last Refresh:</output>
+    </div>
+    <div style="margin-top:10px;margin-bottom:20px">       
+        <button class="button" onclick="run();">Refresh</button>
+        <button class="button" onClick="window.location.href = 'data.html?v=$COMMIT_HASH'">Show Data Viewer</button>
+        <button class="button" onClick="window.location.href = getDomainname() + '/fileserver/log/data/'">Show Data Files</button>
+    </div>
+    <div id='chart'><p>Loading graph...<br></p></div>
+
 
 <script>
     function WriteDataFiles()
@@ -248,18 +295,49 @@ <h2>Data Graph</h2>
         }
     }
 
-    WriteDataFiles();
-    WriteNumbers();
 
-    function Refresh() {
-        setTimeout (function() {
-            run();
-            Refresh();
-        }, 300000);
-    }
+	function AutoRefreshContent()
+	{	
+		if (document.getElementById("AutoRefreshEnabled").checked == true) { // Activated -> Set timeout
+
+			if (autoRefreshTimeoutHandle) { // Clear actual timeout handle
+				clearTimeout(autoRefreshTimeoutHandle);
+				autoRefreshTimeoutHandle = null;
+			}
+
+			var autoRefreshTime = document.getElementById("AutoRefreshTime").value * 1000;
+
+            if (autoRefreshTime == null || autoRefreshTime == 0) { // If no value is set or value is zero, reset checkbox
+				document.getElementById("AutoRefreshEnabled").checked = false;
+			}
+			else {
+                autoRefreshTimeoutHandle = setTimeout(function() {
+                    run();
+                    AutoRefreshContent();
+                }, autoRefreshTime);
+            }
+		}
+		else { // Deactivated -> Reset running timeout
+			if (autoRefreshTimeoutHandle) {
+				clearTimeout(autoRefreshTimeoutHandle);
+				autoRefreshTimeout = null;
+			}
+		}
+	}
+
+
+    function init()
+	{
+        autoRefreshTimeoutHandle = null; // Init auto refresh handle
+		document.getElementById("AutoRefreshEnabled").checked = false; // Reset auto refresh checkbox at page init
+        WriteDataFiles();
+        WriteNumbers();
+        run();
+	}
+
+	
+	init();
 
-    run();
-    Refresh();
 </script>
 </body>
 </html>
diff --git a/sd-card/html/img_loading.gif b/sd-card/html/img_loading.gif
new file mode 100644
index 000000000..68dbf4b64
Binary files /dev/null and b/sd-card/html/img_loading.gif differ
diff --git a/sd-card/html/img_not_available.png b/sd-card/html/img_not_available.png
new file mode 100644
index 000000000..c3d7c5c2e
Binary files /dev/null and b/sd-card/html/img_not_available.png differ
diff --git a/sd-card/html/index.html b/sd-card/html/index.html
index 0a0211db0..9763b0e27 100644
--- a/sd-card/html/index.html
+++ b/sd-card/html/index.html
@@ -32,7 +32,7 @@
             if (streamPopup)   // Ensure that stream popup is closed because it's blocking web interface
                 streamPopup.close();
 
-            console.log("loadPage(" + page + ")");
+            //console.log("loadPage(" + page + ")");
             document.cookie = "page="+page + "; path=/";
             document.getElementById('maincontent').src = page;
 
@@ -81,24 +81,6 @@ <h3 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
 <div class="menu" onmouseover="resetMenu()">
   <ul>
     <li><a href="#" onclick="loadPage('overview.html?v=$COMMIT_HASH');">Overview</a></li>
-    <li><a>Settings <i class="arrow down"></i></a>
-      <ul class="submenu">
-        <li><a href="#" onclick="loadPage('set_fallbackvalue.html?v=$COMMIT_HASH');">Set "Fallback Value"</a></li>
-        <li><a href="#" onclick="loadPage('edit_config_param.html?v=$COMMIT_HASH');">Configuration</a></li>
-        <li><a>Alignment <i class="arrow right"></i></a>
-            <ul>
-                <li><a href="#" onclick="loadPage('edit_reference.html?v=$COMMIT_HASH');">Reference Image</a></li>
-                <li><a href="#" onclick="loadPage('edit_alignment.html?v=$COMMIT_HASH');">Alignment Marker</a></li>
-            </ul>
-        </li>
-        <li><a><strong>R</strong>egions <strong>O</strong>f <strong>I</strong>nterest <i class="arrow right"></i></a>
-            <ul>
-                <li><a href="#" onclick="loadPage('edit_digits.html?v=$COMMIT_HASH');">Digit ROI</a></li>
-                <li><a href="#" onclick="loadPage('edit_analog.html?v=$COMMIT_HASH');">Analog ROI</a></li>
-            </ul>
-        </li>
-      </ul>
-
 
     <li><a>Data<i class="arrow down"></i></a>
         <ul class="submenu">
@@ -109,6 +91,24 @@ <h3 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
         </ul>
     </li>
 
+    <li><a>Settings <i class="arrow down"></i></a>
+        <ul class="submenu">
+          <li><a href="#" onclick="loadPage('set_fallbackvalue.html?v=$COMMIT_HASH');">Set "Fallback Value"</a></li>
+          <li><a href="#" onclick="loadPage('edit_config_param.html?v=$COMMIT_HASH');">Configuration</a></li>
+          <li><a>Alignment <i class="arrow right"></i></a>
+              <ul>
+                  <li><a href="#" onclick="loadPage('edit_reference.html?v=$COMMIT_HASH');">Reference Image</a></li>
+                  <li><a href="#" onclick="loadPage('edit_alignment.html?v=$COMMIT_HASH');">Alignment Marker</a></li>
+              </ul>
+          </li>
+          <li><a><strong>R</strong>egions <strong>O</strong>f <strong>I</strong>nterest <i class="arrow right"></i></a>
+              <ul>
+                  <li><a href="#" onclick="loadPage('edit_digits.html?v=$COMMIT_HASH');">Digit ROI</a></li>
+                  <li><a href="#" onclick="loadPage('edit_analog.html?v=$COMMIT_HASH');">Analog ROI</a></li>
+              </ul>
+          </li>
+        </ul>
+      </li>
 
     <li><a>System <i class="arrow down"></i></a>
         <ul class="submenu">
@@ -125,6 +125,7 @@ <h3 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
             <li><a href="#" onclick="loadPage('info.html?v=$COMMIT_HASH');">Info</a></li>
         </ul>
     </li>
+
     <li><a>Manual Control <i class="arrow down"></i></a>
         <ul class="submenu">
             <li><a href="#" onclick="flow_start()">Start Round</a></li>
@@ -147,7 +148,7 @@ <h3 style="margin-top: 0px; margin-bottom: 10px">A Neural Network Recognition Sy
     if (getCookie("page") == "" || getCookie("page") == "reboot_page.html?v=$COMMIT_HASH") {
     document.cookie = "page=overview.html?v=$COMMIT_HASH" + "; path=/";
     }
-    console.log("Loading page: " + getCookie("page"));
+    //console.log("Loading page: " + getCookie("page"));
     document.getElementById('maincontent').src = getCookie("page");
 
     
diff --git a/sd-card/html/log.html b/sd-card/html/log.html
index 503941f41..d41ff09b3 100644
--- a/sd-card/html/log.html
+++ b/sd-card/html/log.html
@@ -44,13 +44,13 @@
     <body>
         <div class="box">
             <div class="row header">
-                <button class="button" onClick="reload();">Reload</button>
+                <button class="button" onClick="reload();">Refresh</button>
                 <button class="button" onClick="window.open(getDomainname() + '/logfileact');">Show Full Log</button>
                 <button class="button" onClick="window.location.href = getDomainname() + '/fileserver/log/message/'">Show Older Log Files</button>
             </div>
             <div class="row content" id="log"><br><br><br><b>Loading logfile, please wait...</b></div>
             <div class="row footer">
-                <button class="button" onClick="reload();">Reload</button>
+                <button class="button" onClick="reload();">Refresh</button>
                 <button class="button" onClick="window.open(getDomainname() + '/logfileact');">Show Full Log</button>
                 <button class="button" onClick="window.location.href = getDomainname() + '/fileserver/log/message/'">Show Older Log Files</button>
             </div>
diff --git a/sd-card/html/overview.html b/sd-card/html/overview.html
index 3960b0d27..2e3dddb71 100644
--- a/sd-card/html/overview.html
+++ b/sd-card/html/overview.html
@@ -5,13 +5,45 @@
 <meta charset="UTF-8" />
 
 <style>
-.tg  {border-collapse:collapse;border-spacing:0;width:100%;min-width:600px;height:100%;color:darkslategray;}
-.tg th{min-width:325px;width:325px;height:20px;font-size:18px;text-align:left;font-weight:bold;padding:5px 10px 5px 10px;;overflow:hidden;word-break:normal;background-color:lightgrey;}
-.tg td{font-size:15px;padding:5px 10px 5px 10px;overflow:hidden;word-break:normal;}
-.tg .tg-1{font-size:15px;vertical-align: top; font-family:Arial, Helvetica, sans-serif !important;}
-.tg .tg-2{height:52px;font-size:15px;padding:3px 0px 3px 10px;vertical-align:middle;font-family:Arial, Helvetica, sans-serif !important;}
-.tg .tg-3{height:45px;font-size:15px;padding:3px 10px 3px 10px;vertical-align:middle;font-family:Arial, Helvetica, sans-serif !important;}
-.tg .tg-4{height:fit-content;font-size:15px;padding:5px 10px 5px 10px;vertical-align:text-top;font-family:Arial, Helvetica, sans-serif !important;}
+	.tg  {border-collapse:collapse;border-spacing:0;width:100%;min-width:600px;height:100%;color:darkslategray;}
+	.tg th{min-width:325px;width:325px;height:20px;font-size:medium;text-align:left;font-weight:bold;padding:5px 10px 5px 10px;
+				overflow:hidden;word-break:normal;background-color:lightgrey;}
+	.tg td{font-size:15px;padding:5px 10px 5px 10px;overflow:hidden;word-break:normal;}
+	.tg .tg-1{font-size:15px;vertical-align: top; padding-top:0px; font-family:Arial, Helvetica, sans-serif !important;}
+	.tg .tg-2{height:52px;font-size:15px;padding:3px 0px 3px 10px;vertical-align:middle;font-family:Arial, Helvetica, sans-serif !important;}
+	.tg .tg-3{height:45px;font-size:15px;padding:3px 10px 3px 10px;vertical-align:middle;font-family:Arial, Helvetica, sans-serif !important;}
+	.tg .tg-4{height:70px;font-size:15px;padding:5px 10px 5px 10px;vertical-align:text-top;font-family:Arial, Helvetica, sans-serif !important;}
+	.tg .tg-5{height:fit-content;font-size:15px;padding:5px 10px 5px 10px;vertical-align:text-top;font-family:Arial, Helvetica, sans-serif !important;}
+
+	input[type=number] {
+        width: 45px;
+        min-width: 45px;
+        max-width: 45px;
+		margin-left:10px;
+        margin-right: 0px;
+        padding: 3px 5px;
+        display: inline-block;
+        border: 1px solid #ccc;
+        font-size: 16px;
+        vertical-align: middle;
+    }
+
+	.button {
+		padding: 5px 10px;
+		width: 90px;
+		font-size: 16px;
+	}
+
+	input:out-of-range {
+        background-color: rgba(255, 0, 0, 0.25);
+        border: 1px solid red;
+    }
+
+    input:invalid {
+        background-color: rgba(255, 0, 0, 0.25);
+        border: 1px solid red;
+    }
+
 </style>
 
 </head>
@@ -20,11 +52,36 @@
 
 	<table class="tg">
 		<tr>
-			<th class="th">Actual Value</th>
-			<td class="tg-1" rowspan="13">
-				<img style="padding-left: 5px; padding-top: 0px; max-width: 100%; width: auto; height: auto;" id="img" src="">
+			<td style="padding:0px">
+				<table style="table-layout: fixed;border-collapse: collapse;">
+					<tr>
+						<td rowspan="2" style="width:120px; padding-bottom:10px">
+							<button id="RefreshButton" class="button" onclick="ManualRefreshContent();">Refresh</button>
+							<img style="display:none; width:16px; height:16px;" id="manual_refresh_img_loading">
+						</td>
+						<td style="padding:0px;">
+							<input type="checkbox" id="AutoRefreshEnabled" value="1" onchange="AutoRefreshContent();">
+							<label for=AutoRefreshEnabled><class id="AutoRefreshEnabled" style="color:black;">Auto Refresh</class></label>
+
+						</td>
+						<td style="padding:0px;">
+							<input required type="number" name="AutoRefreshTime" id="AutoRefreshTime" size="13" min="1" step="1" value="10" 
+							oninput="(!validity.rangeUnderflow||(value=2));" onchange="AutoRefreshContent();"> s
+						</td>
+					</tr>
+					<tr>
+						<td style="float:right;padding-right:0px">Last Refresh</td>
+						<td><output id="timestamp"></output></td>
+					</tr>
+				</table>
 			</td>
-		</tr>	 
+			<td class="tg-1" rowspan="14">
+				<img style="padding-left: 5px; padding-top: 0px; max-width: 100%; width: auto; height: auto;" id="img">
+			</td>
+		</tr>
+		<tr>
+			<th class="th">Actual Value</th>
+		</tr> 
 		<tr>	
 			<td class="tg-2">
 				<div id="value"></div>
@@ -67,12 +124,13 @@
 			<th class="th">System Info</th>
 		</tr>	
 		<tr>	
-			<td class="tg-4">
-				<div id="timestamp" ></div>	
-				<div id="cputemp" ></div>	
-				<div id="rssi" ></div>
-				<div id="uptime" ></div>
-				<div id="round" ></div>
+			<td>
+				<table>
+					<tr><td style="padding: 0px;">Uptime</td><td style="padding: 0px 20px"><output id="uptime"></output></td></tr>
+					<tr><td style="padding: 0px;">Round Counter</td><td style="padding: 0px 20px"><output id="round"></output></td></tr>
+					<tr><td style="padding: 0px;">WIFI Signal</td><td style="padding: 0px 20px"><output id="rssi"></output></td></tr>
+					<tr><td style="padding: 0px;">CPU Temp</td><td style="padding: 0px 20px"><output id="cputemp"></output></td></tr>
+				</table>
 			</td>
 		</tr>
 	</table>
@@ -93,31 +151,53 @@
 	}
 
 
-	$(document).ready(function(){
-		LoadProcessData();
-		LoadROIImage();
-	});
+	function LoadProcessData()
+	{
+		url = domainname + '/process_data';     
+		var xhttp = new XMLHttpRequest();
+		xhttp.onreadystatechange = function() {
+			if (this.readyState == 4 && this.status == 200) {
+				const _jsonData = JSON.parse(xhttp.responseText);			
+				loadValue(_jsonData.actual_value, "value", "border-collapse: collapse; width: 100%");
+				loadValue(_jsonData.fallback_value, "fallback", "border-collapse: collapse; width: 100%");
+				loadValue(_jsonData.raw_value, "raw", "border-collapse: collapse; width: 100%");
+				loadValue(_jsonData.value_status, "status", "border-collapse: collapse; width: 100%");
+				$('#statusflow').html(_jsonData.process_state);
+				loadProcessError(_jsonData.process_error);
+				$('#uptime').html(_jsonData.uptime);
+				$('#round').html(_jsonData.round_counter);
+				loadRSSI(_jsonData.rssi);
+				$('#cputemp').html(_jsonData.temperature + "°C");
+			}
+		}
+		xhttp.open("GET", url, true);
+		xhttp.send();
+	}
 
 
 	function LoadROIImage()
 	{
 		var d = new Date();
-		var timestamp = d.getTime();
 		var h = addZero(d.getHours());
 		var m = addZero(d.getMinutes());
 		var s = addZero(d.getSeconds());
-		document.getElementById("img").src = getDomainname() + '/img_tmp/alg_roi.jpg?timestamp=' + timestamp;
-		$('#timestamp').html("Last Page Refresh: " + (h + ":" + m + ":" + s));
-	}
+		$('#timestamp').html(h + ":" + m + ":" + s);
 
+		// Create temporary image container
+		var loadImage = new Image();
 
-	function Refresh()
-	{
-		setTimeout (function() {
-			LoadProcessData();
-			LoadROIImage();
-			Refresh();
-		}, 300000);
+		// Prepare event handler
+		// If image is completely loaded, hand over image to html img (Be aware: If caching is deactivated, image going to be loaded again)
+		loadImage.onload = function() {
+    		document.getElementById("img").src = this.src;
+		};
+ 		// Handler called, if image loading failed
+		loadImage.onerror = function() {
+			document.getElementById("img").src = "img_not_available.png?v=$COMMIT_HASH"
+		};
+
+ 		// Load image to temp image container
+		loadImage.src = domainname + '/img_tmp/alg_roi.jpg?timestamp=' + d.getTime(); // Load image with additional timestamp to avoid loading outdated cached image
 	}
 
 
@@ -205,51 +285,80 @@
 	function loadRSSI(_value)
 	{		
 		if (_value >= -55) {
-			$('#rssi').html("WIFI Signal: Excellent (" + _value + "dBm)");
+			$('#rssi').html("Excellent (" + _value + "dBm)");
 		}
 		else if (_value < -55 && _value >= -67) {
-			$('#rssi').html("WIFI Signal: Good (" + _value + "dBm)");
+			$('#rssi').html("Good (" + _value + "dBm)");
 		}
 		else if (_value < -67 && _value >= -78) {
-			$('#rssi').html("WIFI Signal: Fair (" + _value + "dBm)");
+			$('#rssi').html("Fair (" + _value + "dBm)");
 		}
 		else if (_value < -78 && _value >= -85) {
-			$('#rssi').html("WIFI Signal: Weak (" + _value + "dBm)");
+			$('#rssi').html("Weak (" + _value + "dBm)");
 		}
 		else {
-			$('#rssi').html("WIFI Signal: Unreliable (" + _value + "dBm)");
+			$('#rssi').html("Unreliable (" + _value + "dBm)");
 		}
 	}
 
 
-	function LoadProcessData()
-	{
-		url = domainname + '/process_data';     
-		var xhttp = new XMLHttpRequest();
-		xhttp.onreadystatechange = function() {
-			if (this.readyState == 4 && this.status == 200) {
-				const _jsonData = JSON.parse(xhttp.responseText);			
-				loadValue(_jsonData.actual_value, "value", "border-collapse: collapse; width: 100%");
-				loadValue(_jsonData.fallback_value, "fallback", "border-collapse: collapse; width: 100%");
-				loadValue(_jsonData.raw_value, "raw", "border-collapse: collapse; width: 100%");
-				loadValue(_jsonData.value_status, "status", "border-collapse: collapse; width: 100%");
-				$('#statusflow').html(_jsonData.process_state);
-				loadProcessError(_jsonData.process_error);
-				$('#cputemp').html("CPU Temperature: " + _jsonData.temperature + "°C");
-				loadRSSI(_jsonData.rssi);
-				$('#uptime').html("Uptime: " + _jsonData.uptime);
-				$('#round').html("Round Counter: " + _jsonData.round_counter);
+	function ManualRefreshContent()
+	{	
+		document.getElementById("manual_refresh_img_loading").style.display=""; // Display loading spinner as visual feedback
+
+		LoadProcessData();
+		LoadROIImage();
+		
+		setTimeout(function() { // Show loading spinner at least for 200ms
+			document.getElementById("manual_refresh_img_loading").style.display="none";
+		}, 200);
+	}
+
+
+	function AutoRefreshContent()
+	{	
+		if (document.getElementById("AutoRefreshEnabled").checked == true) { // Activated -> Set timeout
+
+			if (autoRefreshTimeoutHandle) { // Clear actual timeout handle
+				clearTimeout(autoRefreshTimeoutHandle);
+				autoRefreshTimeoutHandle = null;
+			}
+
+			var autoRefreshTime = document.getElementById("AutoRefreshTime").value * 1000; // Refresh time in ms
+
+			if (autoRefreshTime == null || autoRefreshTime == 0) { // If no value is set or value is zero, reset checkbox
+				document.getElementById("AutoRefreshEnabled").checked = false;
+			}
+			else {
+				autoRefreshTimeoutHandle = setTimeout(function() {
+					LoadProcessData();
+					LoadROIImage();
+					AutoRefreshContent();
+				}, autoRefreshTime);
+			}
+		}
+		else { // Deactivated -> Reset running timeout
+			if (autoRefreshTimeoutHandle) {
+				clearTimeout(autoRefreshTimeoutHandle);
+				autoRefreshTimeout = null;
 			}
 		}
-		xhttp.open("GET", url, true);
-		xhttp.send();
 	}
 
 
+	$(document).ready(function(){
+		LoadProcessData();
+		LoadROIImage();
+	});
+
+
 	function init()
 	{
 		domainname = getDomainname();
-		Refresh();
+		document.getElementById("img").src = domainname + '/img_loading.gif?v=$COMMIT_HASH'; // Preset with loading indicator
+		document.getElementById("manual_refresh_img_loading").src = domainname + '/img_loading.gif?v=$COMMIT_HASH'; // Preset with loading indicator
+		autoRefreshTimeoutHandle = null; // Init auto refresh handle
+		document.getElementById("AutoRefreshEnabled").checked = false; // Reset auto refresh checkbox at page init
 	}
 
 	
diff --git a/sd-card/img_tmp/leer.txt b/sd-card/img_tmp/leer.txt
deleted file mode 100644
index e69de29bb..000000000
diff --git a/sd-card/log/analog/leer.txt b/sd-card/log/analog/leer.txt
deleted file mode 100644
index e69de29bb..000000000
diff --git a/sd-card/log/digit/leer.txt b/sd-card/log/digit/leer.txt
deleted file mode 100644
index e69de29bb..000000000
diff --git a/sd-card/log/message/leer.txt b/sd-card/log/message/leer.txt
deleted file mode 100644
index e69de29bb..000000000
diff --git a/sd-card/log/source/leer.txt b/sd-card/log/source/leer.txt
deleted file mode 100644
index e69de29bb..000000000