diff --git a/users/templates/users/base.html b/users/templates/users/base.html
index 4e563de..96359ae 100644
--- a/users/templates/users/base.html
+++ b/users/templates/users/base.html
@@ -352,18 +352,23 @@
 
           </script>
           {% endif %}
-
+          <script type="text/javascript">
+            function toggleDropDown(){
+              $("#timemanagement_clock").toggle();
+            }
+          </script>
           <!-- Topbar Navbar -->
           <ul class="navbar-nav ml-auto ">
               {% if request.user.usertime.usetime and user.usertime.usetime_start != None %}
               <li class="nav-item dropdown no-arrow mx-1">
-                <a class="nav-link dropdown-toggle" onclick="" id="timemanagement_realtime" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <a class="nav-link dropdown-toggle" id="timemanagement_realtime" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="javascript:toggleDropDown()">
                   <i class="far fa-clock"></i>
                 </a>
 
                 <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown" id="timemanagement_clock" name="timemanagement_clock" aria-role="static">
                 <h6 class="dropdown-header  text-white">
                   Zeiterfassung
+                  <span style="float: right"><button onclick="javascript:toggleDropDown()" class="btn btn-small" style="margin-top: -15px; margin-right: -20px;">x</button></span>
                 </h6>
                 <div>
                   {% block timemanagement_content_realtime %}