diff --git a/.gitignore b/.gitignore
index 6cc13dc..3ddb5a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,2 @@
 node_modules/*
-js/*
\ No newline at end of file
+js/da*
\ No newline at end of file
diff --git a/js/tm.js b/js/tm.js
new file mode 100644
index 0000000..ce60597
--- /dev/null
+++ b/js/tm.js
@@ -0,0 +1,185 @@
+var icon = "";
+var realtimediv = "";
+var starttime_view = false;
+var startbreaktime_view = false;
+var isbreak = false;
+var breaktime = 0;
+
+function loadTMIcon(){
+    var baseUrl = OC.generateUrl('/svg/core/actions/user-admin');
+    icon = $('<a href="#" class="header-menu"><img src="'+baseUrl+'"></a>');
+    $('.header-right').prepend(icon);
+}
+
+function parseDate(input) {
+    var today = new Date();
+    newdate = new Date(today.getFullYear(), today.getMonth(), today.getDate(), parseInt(input.split(":")[0]), parseInt(input.split(":")[1]));
+    return newdate;
+}
+
+function addTMDiv(){
+    //Realtime-DIV
+    realtimediv = $("<div style='position: fixed; z-index: 2000;top: 50px;right: 0;box-sizing: border-box;margin: 0;border-radius: 0 0 var(--border-radius) var(--border-radius);background-color: var(--color-main-background);filter: drop-shadow(0 1px 5px var(--color-box-shadow));'></div>");
+    realtimediv.html(html_content);
+    realtimediv.css("width", "300px");
+    realtimediv.css("height", "250px");
+    realtimediv.css("right", "50px");
+    realtimediv.css("position", "fixed");
+    realtimediv.css("overflow", "hidden");
+    realtimediv.css("display", "none");
+    realtimediv.css("text-align", "center");
+    $('.header-right').append(realtimediv);
+
+    // Adding Listener
+    $("#startWorkDay").click(function(){
+        startWorkDay();
+        $("#activeDay").show();
+        $("#start_workday").hide();
+    })
+
+    $("#end_workday").click(function(){
+        endWorkDay();
+    })
+
+    // ACTUAL TIME INFO
+    // Load Time
+    $.ajax({
+        url: "/apps/da_agency/loadtime",
+        type: 'GET',
+    }).success(function (response) {
+        responsedata = JSON.parse(response);
+        $("#actualTime").html(responsedata['actualtime']);
+        // No workday found
+        if(responsedata['workdaydata_workday'] == 0){
+            starttime_view = false;
+            startbreaktime_view = false;
+            isbreak = false;
+            breaktime = 0;
+            $("#breaksum").html("00:00:00");
+        }
+        // Workday found
+        else{
+            isbreak = false;				
+            start = responsedata['workdaydata_workday'];	
+			startbreaktime_view = 0;
+            starttime_view = parseDate(responsedata['workdaydata_workday']);			
+            console.log(starttime_view);
+			$("#start_workday").hide();
+			$("#activeDay").show();
+			$("#starttime").html(responsedata['workdaydata_starttime']);
+
+        }
+    });
+
+    // ICON CLICK
+    icon.click(function(){
+        if(realtimediv.css("display") == "none"){
+            realtimediv.css("display", "block");
+        }
+        else {
+            realtimediv.css("display", "none");
+        }
+    })
+}
+
+
+
+window.setInterval(function(){
+    if(starttime_view != false && isbreak == false){
+        realTimeClock();
+    }	  
+    else if(isbreak == true){
+        realTimeBreakClock();
+    }
+}, 1000);
+
+function convertMS(ms) {
+    var d, h, m, s;
+    s = Math.floor(ms / 1000);
+    m = Math.floor(s / 60);
+    s = s % 60;
+    h = Math.floor(m / 60);
+    m = m % 60;
+    d = Math.floor(h / 24);
+    h = h % 24;
+    h += d * 24;
+
+    if(s < 10){
+        s = "0" + s;
+    }
+    if(m < 10){
+        m = "0" + m;
+    }
+    if(h < 10){
+        h = "0" + h;
+    }
+
+    return h + ':' + m + ':' + s;
+}
+
+start = false;
+
+function realTimeClock()
+{
+    if(start != false){			
+        startDate = Date.parse(start);			
+        starttime_view = startDate;
+        start = false;
+        realTimeClock();			
+    }
+    else{
+        now = new Date();
+        viewtime = now - starttime_view - breaktime;
+        $("#realtimeclock").html(convertMS(viewtime));
+    }
+}
+
+$(document).ready(function(){
+    loadTMIcon();
+    addTMDiv();
+})
+function startWorkDay(){
+    $.ajax({
+        url: "/apps/da_agency/startday",
+        type: 'GET',
+    }).success(function (response) {
+        responsedata = JSON.parse(response);
+        
+        if(responsedata["success"]){
+            $("#starttime").html(responsedata["wd_starttime"])
+            $("#endtime").html("00:00:00");
+            $("#breaksum").html("00:00:00");
+        }
+        start = responsedata["wd_starttime_complete"];
+        realTimeClock();
+    });
+}
+
+function endWorkDay(){
+    $.ajax({
+        url: "/apps/da_agency/endday",
+        type: 'GET',
+    }).success(function (response) {
+        responsedata = JSON.parse(response);
+        if(responsedata["success"]){
+            $("#breaktimeclock").hide();
+            $("#realtimeclock").show();
+            $("#end_break").hide();
+            $("#start_break").show();
+            $("#worktime").show();
+
+            $("#endtime").html(responsedata["wd_endtime"]);
+            $("#activeDay").hide();
+            $("#start_workday").show();
+            $("#breaksum").html(convertMS(responsedata["actualbreaktime"]));
+            starttime_view = false;
+            isbreak = false;
+            start = false;
+            breaktime = 0;
+        }
+        realTimeClock();
+    });
+
+}
+
+var html_content = '<style>hr.hr_style { border: 1px solid #dadada; margin: 10px;  }</style><div id="activeDay" style="display: none;"><span id="worktime"><h3>Heutiger Arbeitstag</h3><h2 id="realtimeclock">00:00</h2><hr class="hr_style"></span><span id="breaktimeclock" style="display: none"><h3>Aktuelle Pause</h3><h2 id="realtimeclock_break">00:00</h2><hr class="hr_style"></span><span><button onclick="javascript:endBreak()"  type="button" id="end_break" class="btn btn-success" style="display: none;"><i class="fas fa-play"></i></button><button onclick="javascript:startBreak()"  type="button" id="start_break" class="btn btn-primary">Pause</button><button type="button" id="end_workday" class="btn btn-secondary">Beenden</button></span><hr class="hr_style"></div><div>Arbeitsbeginn: <span id="starttime">00:00:00</span><br />	Arbeitsende: <span id="endtime">00:00:00</span><br />Pausenzeit: <span id="breaksum">00:00:00</span>	</div><div id="start_workday"><hr class="hr_style"><button type="button" id="startWorkDay" class="btn btn-success">Arbeitstag starten</button><hr class="hr_style">Gleitzeitkonto: <b><span id="actualTime">Lade...</span>&nbsp;Stunden</b></div>';
\ No newline at end of file