diff --git a/firmware/data/bottom.js b/firmware/data/bottom.js
index 44ccb05..4062715 100644
--- a/firmware/data/bottom.js
+++ b/firmware/data/bottom.js
@@ -49,14 +49,6 @@ var channel1 = [];
 var channel2 = [];
 var channel3 = [];
 var channel4 = [];
-parseData(data, time, channel1, channel2, channel3, channel4, currenttime);
-var index = getIndex(currenttime, time);
-var indexFloat = getIndexFloat(index, currenttime, time);
-adjustIndex(indexFloat, index, currenttime, time);
-createGraph(time, channel1, channel2, channel3, channel4, index);
-});
-}
-function parseData(data, time, channel1, channel2, channel3, channel4, currenttime) {
 for (var i = 0; i < data['tcdata'].length; i++) {
 time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
 channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
@@ -66,16 +58,9 @@ channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
 }
 currenttime.push(data['currenttime']['hour']);
 currenttime.push(data['currenttime']['min']);
-}
-function getIndex(currenttime, time) {
 var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
 var index = time.indexOf(currentTimeStr);
 if (index === -1) {
-index = findIndex(currenttime, time);
-}
-return index;
-}
-function findIndex(currenttime, time) {
 var lowerIndex = -1;
 var upperIndex = -1;
 for (var i = 0; i < time.length - 1; i++) {
@@ -101,21 +86,15 @@ var tmp1 = time[0].split(':');
 currenttime[0] = tmp1[0];
 currenttime[1] = tmp1[1];
 }
-return lowerIndex;
-}
-function getIndexFloat(index, currenttime, time) {
-var lowerTime = time[index].split(":");
-var upperTime = time[index + 1].split(":");
+var lowerTime = time[lowerIndex].split(":");
+var upperTime = time[upperIndex].split(":");
 var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
-var indexFloat = index + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
-return indexFloat;
+var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
+} else {
 }
-function adjustIndex(indexFloat, index, currenttime, time) {
 if (indexFloat > index) {
 index = indexFloat;
 }
-}
-function createGraph(time, channel1, channel2, channel3, channel4, index) {
 var trace1 = {
 x: time,
 y: channel1,
@@ -168,8 +147,9 @@ dash: 'dot'
 }]
 };
 Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
+});
 }
-setInterval(loadGraphData, 60000);
+setInterval(loadGraphData, 10000);
 loadGraphData();
 function loadTCGraphData() {
 console.log('----> generate tc data graph <----');
@@ -180,11 +160,104 @@ var channel1 = [];
 var channel2 = [];
 var channel3 = [];
 var channel4 = [];
-parseData(data, time, channel1, channel2, channel3, channel4, currenttime);
-var index = getIndex(currenttime, time);
-var indexFloat = getIndexFloat(index, currenttime, time);
-adjustIndex(indexFloat, index, currenttime, time);
-createGraph(time, channel1, channel2, channel3, channel4, index);
+for (var i = 0; i < data['tcdata'].length; i++) {
+time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
+channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
+channel2.push(data['tcdata'][i]['ch2'] * 100 / 255);
+channel3.push(data['tcdata'][i]['ch3'] * 100 / 255);
+channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
+}
+currenttime.push(data['currenttime']['hour']);
+currenttime.push(data['currenttime']['min']);
+var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
+var index = time.indexOf(currentTimeStr);
+if (index === -1) {
+var lowerIndex = -1;
+var upperIndex = -1;
+for (var i = 0; i < time.length - 1; i++) {
+const currentDate = new Date();
+const year = currentDate.getFullYear();
+const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+const day = currentDate.getDate().toString().padStart(2, '0');
+const dateString = `${year}-${month}-${day}`;
+const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
+const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
+const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
+if (curr.isBetween(start, end)) {
+lowerIndex = i;
+upperIndex = i + 1;
+break;
+}
+}
+if (lowerIndex === -1 || upperIndex === -1) {
+console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
+lowerIndex = 0;
+upperIndex = 1;
+var tmp1 = time[0].split(':');
+currenttime[0] = tmp1[0];
+currenttime[1] = tmp1[1];
+}
+var lowerTime = time[lowerIndex].split(":");
+var upperTime = time[upperIndex].split(":");
+var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
+var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
+} else {
+}
+if (indexFloat > index) {
+index = indexFloat;
+}
+var trace1 = {
+x: time,
+y: channel1,
+name: 'Channel 1',
+type: 'scatter',
+mode: 'lines+markers',
+};
+var trace2 = {
+x: time,
+y: channel2,
+name: 'Channel 2',
+type: 'scatter',
+mode: 'lines+markers',
+};
+var trace3 = {
+x: time,
+y: channel3,
+name: 'Channel 3',
+type: 'scatter',
+mode: 'lines+markers',
+};
+var trace4 = {
+x: time,
+y: channel4,
+name: 'Channel 4',
+type: 'scatter',
+mode: 'lines+markers',
+};
+var layout = {
+title: 'Timing Control Data Blocks',
+xaxis: {
+title: 'Time',
+tickangle: -45,
+},
+yaxis: {
+title: 'Brightness',
+range: [0, 100],
+},
+shapes: [{
+type: 'line',
+x0: index,
+y0: 0,
+x1: index,
+y1: 255,
+line: {
+color: 'lightgrey',
+width: 3,
+dash: 'dot'
+}
+}]
+};
+Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
 var plot = document.getElementById('tc_plot_chart');
 }
 function rgbaToHex(rgba) {
diff --git a/firmware/html/bottom.js b/firmware/html/bottom.js
index 425a944..c87e348 100644
--- a/firmware/html/bottom.js
+++ b/firmware/html/bottom.js
@@ -64,15 +64,131 @@ function loadGraphData() {
         var channel2 = [];
         var channel3 = [];
         var channel4 = [];
-        parseData(data, time, channel1, channel2, channel3, channel4, currenttime);
-        var index = getIndex(currenttime, time);
-        var indexFloat = getIndexFloat(index, currenttime, time);
-        adjustIndex(indexFloat, index, currenttime, time);
-        createGraph(time, channel1, channel2, channel3, channel4, index);
+        for (var i = 0; i < data['tcdata'].length; i++) {
+            time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
+            channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
+            channel2.push(data['tcdata'][i]['ch2'] * 100 / 255);
+            channel3.push(data['tcdata'][i]['ch3'] * 100 / 255);
+            channel4.push(data['tcdata'][i]['ch4'] * 100 / 255);
+        }
+        currenttime.push(data['currenttime']['hour']);
+        currenttime.push(data['currenttime']['min']);
+        //console.log(currenttime);
+        var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
+        var index = time.indexOf(currentTimeStr);
+        if (index === -1) {
+            var lowerIndex = -1;
+            var upperIndex = -1;
+            for (var i = 0; i < time.length - 1; i++) {
+                //console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
+                const currentDate = new Date();
+                const year = currentDate.getFullYear();
+                const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+                const day = currentDate.getDate().toString().padStart(2, '0');
+                const dateString = `${year}-${month}-${day}`;
+                const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
+                const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
+                const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
+                //console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
+                //console.log(curr.isBetween(start, end));
+                if (curr.isBetween(start, end)) {
+                    lowerIndex = i;
+                    upperIndex = i + 1;
+                    break;
+                }
+            }
+            //console.log('lowerIndex=' + lowerIndex);
+            //console.log('upperIndex=' + upperIndex);
+            if (lowerIndex === -1 || upperIndex === -1) {
+                console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
+                lowerIndex = 0;
+                upperIndex = 1;
+                var tmp1 = time[0].split(':');
+                //console.log('tmp1 = ' + tmp1);
+                currenttime[0] = tmp1[0];
+                currenttime[1] = tmp1[1];
+            }
+            var lowerTime = time[lowerIndex].split(":");
+            var upperTime = time[upperIndex].split(":");
+            var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
+            var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
+            //console.log("Index (float): " + indexFloat);
+        } else {
+            //console.log("Index (integer): " + index);
+            //console.log("Index (float): " + index);
+        }
+        if (indexFloat > index) {
+            index = indexFloat;
+        }
+        //console.log("index in graph >>>" + index);
+        var trace1 = {
+            x: time,
+            y: channel1,
+            name: 'Channel 1',
+            type: 'scatter',
+            mode: 'lines+markers',
+        };
+        var trace2 = {
+            x: time,
+            y: channel2,
+            name: 'Channel 2',
+            type: 'scatter',
+            mode: 'lines+markers',
+        };
+        var trace3 = {
+            x: time,
+            y: channel3,
+            name: 'Channel 3',
+            type: 'scatter',
+            mode: 'lines+markers',
+        };
+        var trace4 = {
+            x: time,
+            y: channel4,
+            name: 'Channel 4',
+            type: 'scatter',
+            mode: 'lines+markers',
+        };
+        var layout = {
+            title: 'Timing Control Data Blocks',
+            xaxis: {
+                title: 'Time',
+                tickangle: -45,
+            },
+            yaxis: {
+                title: 'Brightness',
+                range: [0, 100],
+            },
+            shapes: [{
+                type: 'line',
+                x0: index,
+                y0: 0,
+                x1: index,
+                y1: 255,
+                line: {
+                    color: 'lightgrey',
+                    width: 3,
+                    dash: 'dot'
+                }
+            }]
+        };
+        Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
     });
 }
+setInterval(loadGraphData, 10000);
+loadGraphData();
 
-function parseData(data, time, channel1, channel2, channel3, channel4, currenttime) {
+function loadTCGraphData() {
+    console.log('----> generate tc data graph <----');
+
+    var data = JSON.parse(createJsonFromTable());
+    //console.log(data);
+    var currenttime = [];
+    var time = [];
+    var channel1 = [];
+    var channel2 = [];
+    var channel3 = [];
+    var channel4 = [];
     for (var i = 0; i < data['tcdata'].length; i++) {
         time.push(data['tcdata'][i]['hour'] + ':' + (data['tcdata'][i]['min'] < 10 ? '0' : '') + data['tcdata'][i]['min']);
         channel1.push(data['tcdata'][i]['ch1'] * 100 / 255);
@@ -82,61 +198,54 @@ function parseData(data, time, channel1, channel2, channel3, channel4, currentti
     }
     currenttime.push(data['currenttime']['hour']);
     currenttime.push(data['currenttime']['min']);
-}
-
-function getIndex(currenttime, time) {
+    //console.log(currenttime);
     var currentTimeStr = currenttime[0] + ':' + (currenttime[1] < 10 ? '0' : '') + currenttime[1];
     var index = time.indexOf(currentTimeStr);
     if (index === -1) {
-        index = findIndex(currenttime, time);
-    }
-    return index;
-}
-
-function findIndex(currenttime, time) {
-    var lowerIndex = -1;
-    var upperIndex = -1;
-    for (var i = 0; i < time.length - 1; i++) {
-        const currentDate = new Date();
-        const year = currentDate.getFullYear();
-        const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
-        const day = currentDate.getDate().toString().padStart(2, '0');
-        const dateString = `${year}-${month}-${day}`;
-        const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
-        const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
-        const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
-        if (curr.isBetween(start, end)) {
-            lowerIndex = i;
-            upperIndex = i + 1;
-            break;
+        var lowerIndex = -1;
+        var upperIndex = -1;
+        for (var i = 0; i < time.length - 1; i++) {
+            //console.log(time[i] + ' <= ' + currentTimeStr + ' >= ' + time[i + 1]);
+            const currentDate = new Date();
+            const year = currentDate.getFullYear();
+            const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
+            const day = currentDate.getDate().toString().padStart(2, '0');
+            const dateString = `${year}-${month}-${day}`;
+            const start = moment(dateString + ' ' + time[i], 'YYYY-MM-DD HH:mm');
+            const curr = moment(dateString + ' ' + currentTimeStr, 'YYYY-MM-DD HH:mm');
+            const end = moment(dateString + ' ' + time[i + 1], 'YYYY-MM-DD HH:mm');
+            //console.log(start.format('YYYY-MM-DD HH:mm') + ' <= ' + curr.format('YYYY-MM-DD HH:mm') + ' >= ' + end.format('YYYY-MM-DD HH:mm'));
+            //console.log(curr.isBetween(start, end));
+            if (curr.isBetween(start, end)) {
+                lowerIndex = i;
+                upperIndex = i + 1;
+                break;
+            }
         }
+        //console.log('lowerIndex=' + lowerIndex);
+        //console.log('upperIndex=' + upperIndex);
+        if (lowerIndex === -1 || upperIndex === -1) {
+            console.log("Warning: Current time not found in time array and not between two elements in time array. Fixing it...");
+            lowerIndex = 0;
+            upperIndex = 1;
+            var tmp1 = time[0].split(':');
+            //console.log('tmp1 = ' + tmp1);
+            currenttime[0] = tmp1[0];
+            currenttime[1] = tmp1[1];
+        }
+        var lowerTime = time[lowerIndex].split(":");
+        var upperTime = time[upperIndex].split(":");
+        var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
+        var indexFloat = lowerIndex + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
+        //console.log("Index (float): " + indexFloat);
+    } else {
+        //console.log("Index (integer): " + index);
+        //console.log("Index (float): " + index);
     }
-    if (lowerIndex === -1 || upperIndex === -1) {
-        console.log("Error: Current time not found in time array and not between two elements in time array. Fixing it...");
-        lowerIndex = 0;
-        upperIndex = 1;
-        var tmp1 = time[0].split(':');
-        currenttime[0] = tmp1[0];
-        currenttime[1] = tmp1[1];
-    }
-    return lowerIndex;
-}
-
-function getIndexFloat(index, currenttime, time) {
-    var lowerTime = time[index].split(":");
-    var upperTime = time[index + 1].split(":");
-    var timeDiff = (currenttime[0] - lowerTime[0]) + ((currenttime[1] - lowerTime[1]) / 60);
-    var indexFloat = index + timeDiff / ((upperTime[0] - lowerTime[0]) + ((upperTime[1] - lowerTime[1]) / 60));
-    return indexFloat;
-}
-
-function adjustIndex(indexFloat, index, currenttime, time) {
     if (indexFloat > index) {
         index = indexFloat;
     }
-}
-
-function createGraph(time, channel1, channel2, channel3, channel4, index) {
+    //console.log("index in graph >>>" + index);
     var trace1 = {
         x: time,
         y: channel1,
@@ -188,28 +297,9 @@ function createGraph(time, channel1, channel2, channel3, channel4, index) {
             }
         }]
     };
-    Plotly.newPlot('plot_chart', [trace1, trace2, trace3, trace4], layout);
-}
-setInterval(loadGraphData, 60000);
-loadGraphData();
+    Plotly.newPlot('tc_plot_chart', [trace1, trace2, trace3, trace4], layout);
 
-function loadTCGraphData() {
-    console.log('----> generate tc data graph <----');
-
-    var data = JSON.parse(createJsonFromTable());
-    var currenttime = [];
-    var time = [];
-    var channel1 = [];
-    var channel2 = [];
-    var channel3 = [];
-    var channel4 = [];
-    parseData(data, time, channel1, channel2, channel3, channel4, currenttime);
-    var index = getIndex(currenttime, time);
-    var indexFloat = getIndexFloat(index, currenttime, time);
-    adjustIndex(indexFloat, index, currenttime, time);
-    createGraph(time, channel1, channel2, channel3, channel4, index);
-
-    var plot = document.getElementById('tc_plot_chart');
+    var plot = document.getElementById('tc_plot_chart'); // Das HTML-Div-Element, in dem der Plot angezeigt wird
 }
 
 function rgbaToHex(rgba) {