diff --git a/docs/taskbar.md b/docs/taskbar.md
index 8b89edd..5dd5630 100644
--- a/docs/taskbar.md
+++ b/docs/taskbar.md
@@ -13,6 +13,12 @@ The taskbar is composed of the following components:
 
 ## Properties
 
+### Variants
+The menu bar variant can be changed by adding the following classes to the menu bar element:
+
+* `taskbar--floating` - A floating taskbar
+
+
 ### Position
 The taskbar can be positioned by setting the `position` property in the HTML.
 
diff --git a/src/css/taskbar.css b/src/css/taskbar.css
index 43e8710..7d43867 100644
--- a/src/css/taskbar.css
+++ b/src/css/taskbar.css
@@ -2,25 +2,24 @@
     --taskbar-bg-color: #1c1c1c;
 }
 
-#taskbar {
-    height: 50px;
-    background-color: var(--taskbar-bg-color);
-
-    position: absolute;
-    bottom: 0;
 
-    width: 100vw;
-    height: 55px;
-    padding: 8px;
 
+.taskbar {
     display: flex;
     align-items: center;
     justify-content: space-around;
+    background-color: var(--taskbar-bg-color);
+    position: absolute;
+    bottom: 0;
+    width: 100vw;
+    height: 55px;
+    padding: 8px;    
 }
 
 
+
 /* APPS */
-#taskbar .apps {
+.taskbar__apps {
     display: flex;
     align-items: center;
     align-content: flex-start;
@@ -30,36 +29,41 @@
     width: 100%;
 }
 
-#taskbar .apps taskbar-app {
+.taskbar__apps taskbar-app {
     height: 100%;
 }
 
-#taskbar .apps .separator {
+.taskbar__separator {
     height: 100%;
     width: 1px;
     background-color: #333;
 }
 
 
+
 /* APPLETS */
-#taskbar .applets {
+.taskbar__applets {
     display: flex;
 }
 
 
+
 /* WEATHER APPLET */
-#taskbar .weather {
+.taskbar__weather {
     display: none;
 }
 
+
+
 /* TIME & DATE */
-#taskbar .time-date {
+.taskbar__time-date {
     display: none;
 }
 
 
-/* ##### FLOAT Variant ##### */
-#taskbar[design="float"] {
+
+/* ##### FLOATING Variant ##### */
+.taskbar--floating {
     margin: 6px;
     border-radius: 12px;
     width: unset;
@@ -67,15 +71,15 @@
     transform: translateX(-50%);
 }
 
-#taskbar[position="bottom"][design="float"] .applets {
+.taskbar[position="bottom"].taskbar--floating .taskbar__applets {
     display: none;
 }
 
 
 
 /* ##### SIDE Variant ##### */
-#taskbar[position="left"],
-#taskbar[position="right"] {
+.taskbar[position="left"],
+.taskbar[position="right"] {
     transform: none;
     height: 80vh;
     width: 50px;
@@ -86,41 +90,41 @@
 }
 
 
-#taskbar[position="left"] {
+.taskbar[position="left"] {
     left: 0;
     right: unset;
 }
-#taskbar[position="right"] { 
+.taskbar[position="right"] { 
     right: 0;
     left: unset;
 }
 
 
-#taskbar[position="left"] > *,
-#taskbar[position="right"] > * {
+.taskbar[position="left"] > *,
+.taskbar[position="right"] > * {
     width: 100%;
     height: unset;   
 }
 
-#taskbar[position="left"] .apps taskbar-app,
-#taskbar[position="right"] .apps taskbar-app {
+.taskbar[position="left"] .taskbar__apps taskbar-app,
+.taskbar[position="right"] .taskbar__apps taskbar-app {
     width: 100%;
     height: unset;
 }
 
-#taskbar[position="left"] .apps .separator,
-#taskbar[position="right"] .apps .separator {
+.taskbar[position="left"] .taskbar__separator,
+.taskbar[position="right"] .taskbar__separator {
     width: 100%;
     height: 1px;
 }
 
-#taskbar[position="left"] .applets,
-#taskbar[position="right"] .applets {
+.taskbar[position="left"] .taskbar__applets,
+.taskbar[position="right"] .taskbar__applets {
     display: unset;
 }
 
-#taskbar[position="left"] .applets *,
-#taskbar[position="right"] .applets * {
+.taskbar[position="left"] .taskbar__applets *,
+.taskbar[position="right"] .taskbar__applets * {
     width: 100%;
     height: block;
 }
@@ -129,7 +133,7 @@
 
 
 /* ### BOTTOM Variant ### */
-#taskbar[position="bottom"] {
+.taskbar[position="bottom"] {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -137,15 +141,15 @@
     height: 50px;
 }
 
-#taskbar[position="bottom"] > * {
+.taskbar[position="bottom"] > * {
     height: 80%;
 }
-#taskbar[position="bottom"] > * > * {
+.taskbar[position="bottom"] > * > * {
     height: 100%;
 }
 
 
-#taskbar[position="bottom"] .apps {
+.taskbar[position="bottom"] .taskbar__apps {
     /* center the apps in the middle of the taskbar (ignoring other elements) */
     /*
     position: absolute;
@@ -163,34 +167,32 @@
 
 
 /* hide power button */
-#taskbar[position="bottom"] .applets button-power {
+.taskbar[position="bottom"] .taskbar__applets button-power {
     display: none;
 }
 
 
 
 
-#taskbar[position="bottom"] .weather {
+.taskbar[position="bottom"] .taskbar__weather {
     display: unset;
 }
 
 
 /* ## TASKBAR TIME ## */
-#taskbar[position="bottom"] .time-date {
+.taskbar[position="bottom"] .taskbar__time-date {
     display: flex;
 }
 
-#taskbar .time-date {
+.taskbar__time-date {
+    justify-content: center;
+    flex-direction: column;
     color: white;
     text-align: right;
     font-size: 14px;
-
-    justify-content: center;
-    flex-direction: column;
-
     user-select: none;
 }
 
-#taskbar .time-date * {
+.taskbar__time-date * {
     height: unset;
 }
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index c296ad1..36be963 100644
--- a/src/index.html
+++ b/src/index.html
@@ -68,7 +68,7 @@
     <link rel="stylesheet" href="/css/push-notifications.css">
 
     <link rel="stylesheet" href="/css/action-menu.css">
-    <script src="/js/taskbar/action-menu.js"></script>
+    <script defer src="/js/taskbar/action-menu.js"></script>
     
     <script src="/js/context-menu.js"></script>
     <link rel="stylesheet" href="/css/context-menu.css">
@@ -160,23 +160,23 @@ <h3>Notifications</h3>
     </div>
 
     <!-- Taskbar -->
-    <div id="taskbar" position="bottom" design="center">
-        <div class="weather">
+    <div class="taskbar" position="bottom">
+        <div class="taskbar__weather">
             <widget-weather></widget-weather>
         </div>
-        <div class="apps">
-            <taskbar-app name="App Menu" icon="/assets/app-menu.svg"></taskbar-app>
-            <div class="separator"></div>
+        <div class="taskbar__apps">
+            <taskbar-app class="taskbar__app--menu" name="App Menu" icon="/assets/app-menu.svg"></taskbar-app>
+            <div class="taskbar__separator"></div>
             <taskbar-app name="fullscreen" icon="/assets/expand-arrows.svg"></taskbar-app>
             <taskbar-app name="about" icon="/assets/apps/about.svg"></taskbar-app>
         </div>
-        <div class="applets">
-            <applet-network></applet-network>
-            <applet-sound></applet-sound>
-            <applet-battery></applet-battery>
-            <button-power></button-power>
+        <div class="taskbar__applets">
+            <applet-network class="taskbar__applet"></applet-network>
+            <applet-sound class="taskbar__applet"></applet-sound>
+            <applet-battery class="taskbar__applet"></applet-battery>
+            <button-power class="taskbar__applet"></button-power>
         </div>
-        <div class="time-date">
+        <div class="taskbar__time-date">
             <taskbar-clock></taskbar-clock>
         </div>
     </div>
diff --git a/src/js/taskbar/action-menu.js b/src/js/taskbar/action-menu.js
index 5b0076a..6593cf4 100644
--- a/src/js/taskbar/action-menu.js
+++ b/src/js/taskbar/action-menu.js
@@ -1,14 +1,25 @@
-document.addEventListener('DOMContentLoaded', function() {
-    const taskbarTime = document.querySelector('#taskbar .time-date');
+(function () {
+    const taskbarTimeWidgets = document.querySelectorAll('.taskbar__time-date');
     const actionMenu = document.querySelector('#action-menu');
 
-    taskbarTime.addEventListener('click', function() {
-        actionMenu.classList.toggle('open');
-    });
+    taskbarTimeWidgets.forEach((taskbarTime) => {
+        taskbarTime.addEventListener('click', function () {
+            actionMenu.classList.toggle('open');
+        });
 
-    document.addEventListener('mousedown', function(event) {
-        if (!actionMenu.contains(event.target) && !taskbarTime.contains(event.target)) {
-            actionMenu.classList.remove('open');
-        }
+        document.addEventListener('mousedown', function (event) {
+            if (!actionMenu.contains(event.target)) {
+                let shouldClose = true;
+                taskbarTimeWidgets.forEach((element) => {
+                    if (element.contains(event.target)) {
+                        shouldClose = false;
+                    }
+                });
+                
+                if (shouldClose) {
+                    actionMenu.classList.remove('open');
+                }
+            }
+        });
     });
-});
\ No newline at end of file
+})();
\ No newline at end of file