diff --git a/modules/ags/config/binto.ts b/modules/ags/config/binto.ts
index 5e6b2050..5e0ef631 100644
--- a/modules/ags/config/binto.ts
+++ b/modules/ags/config/binto.ts
@@ -5,6 +5,7 @@ import Pointers from './services/pointers.ts';
 import AppLauncher from './ts/applauncher/main.ts';
 import Bar from './ts/bar/binto.ts';
 import Clipboard from './ts/clipboard/main.ts';
+import Calendar from './ts/date/binto.ts';
 import { NotifPopups, NotifCenter } from './ts/notifications/binto.ts';
 import OSD from './ts/osd/main.ts';
 import Powermenu from './ts/powermenu.ts';
@@ -26,6 +27,7 @@ App.config({
 
     windows: () => [
         AppLauncher(),
+        Calendar(),
         Clipboard(),
         NotifCenter(),
         Powermenu(),
diff --git a/modules/ags/config/scss/binto-widgets/applauncher.scss b/modules/ags/config/scss/binto-widgets/applauncher.scss
index 1ec07208..c4a141df 100644
--- a/modules/ags/config/scss/binto-widgets/applauncher.scss
+++ b/modules/ags/config/scss/binto-widgets/applauncher.scss
@@ -1,91 +1,95 @@
 .applauncher {
-  all: unset;
-  border: 2px solid $contrast-bg;
-  background-color: $bg;
-  color: #f8f8f2;
-  padding: 2px;
-
-  * {
-    font-size: 16px;
-  }
-
-  list, row {
     all: unset;
-  }
-
-  .header {
-    margin: 16.2px;
-    margin-bottom: 0;
-
-    image, entry {
-      all: unset;
-      border-radius: 9px;
-      color: #f8f8f2;
-      background-color: rgba(#44475a, 0.6);
-      border: 1px solid #44475a;
-      padding: 4.5px;
-    }
-
-    image {
-      margin-right: 9px;
-      -gtk-icon-transform: scale(0.8);
-      font-size: 25.6px;
-    }
-  }
-
-  scrolledwindow {
-    padding: 10px;
-    padding-bottom: 0;
-    min-width: 900px;
-    min-height: 650px;
-  }
-
-  .placeholder {
-    margin-top: 9px;
+    border: 2px solid $contrast-bg;
+    background-color: $bg;
     color: #f8f8f2;
-    font-size: 1.2em;
-  }
+    padding: 2px;
 
-  .app {
-    all: unset;
-    transition: 200ms;
-    border-radius: 9px;
-
-    label {
-      transition: 200ms;
-
-      &.title {
-        margin-top: 20px;
-        color: #f8f8f2;
-      }
-
-      &.description {
-        color: rgba(238, 238, 238, 0.7);
-      }
-    }
-
-    image {
-      transition: 200ms;
-      margin: 0 8px;
-    }
-
-    &:active {
-      background-color: rgba($contrast-bg, 0.5);
-      box-shadow: inset 0 0 0 3px rgba(238, 238, 238, 0.03);
-    }
-  }
-
-  *:selected, .app:hover, .app:focus {
     * {
-      font-weight: unset;
+        font-size: 16px;
     }
 
-    label.title {
-      color: $contrast-bg;
+    list,
+    row {
+        all: unset;
     }
 
-    image {
-      -gtk-icon-shadow: 2px 2px $contrast-bg;
+    .header {
+        margin: 16.2px;
+        margin-bottom: 0;
+
+        image,
+        entry {
+            all: unset;
+            border-radius: 9px;
+            color: #f8f8f2;
+            background-color: rgba(#44475a, 0.6);
+            border: 1px solid #44475a;
+            padding: 4.5px;
+        }
+
+        image {
+            margin-right: 9px;
+            -gtk-icon-transform: scale(0.8);
+            font-size: 25.6px;
+        }
+    }
+
+    scrolledwindow {
+        padding: 10px;
+        padding-bottom: 0;
+        min-width: 900px;
+        min-height: 650px;
+    }
+
+    .placeholder {
+        margin-top: 9px;
+        color: #f8f8f2;
+        font-size: 1.2em;
+    }
+
+    .app {
+        all: unset;
+        transition: 200ms;
+        border-radius: 9px;
+
+        label {
+            transition: 200ms;
+
+            &.title {
+                margin-top: 20px;
+                color: #f8f8f2;
+            }
+
+            &.description {
+                color: rgba(238, 238, 238, 0.7);
+            }
+        }
+
+        image {
+            transition: 200ms;
+            margin: 0 8px;
+        }
+
+        &:active {
+            background-color: rgba($contrast-bg, 0.5);
+            box-shadow: inset 0 0 0 3px rgba(238, 238, 238, 0.03);
+        }
+    }
+
+    *:selected,
+    .app:hover,
+    .app:focus {
+        * {
+            font-weight: unset;
+        }
+
+        label.title {
+            color: $contrast-bg;
+        }
+
+        image {
+            -gtk-icon-shadow: 2px 2px $contrast-bg;
+        }
     }
-  }
 }
diff --git a/modules/ags/config/scss/binto-widgets/bar.scss b/modules/ags/config/scss/binto-widgets/bar.scss
index 182e40ae..672b2e8c 100644
--- a/modules/ags/config/scss/binto-widgets/bar.scss
+++ b/modules/ags/config/scss/binto-widgets/bar.scss
@@ -2,11 +2,14 @@
 
     .clock,
     .notif-panel {
+        border: 2px solid $contrast-bg;
         padding: 4.5px 7px;
         background-color: $bgfull;
     }
 
     .sys-tray {
+        border: 2px solid $contrast-bg;
+
         menubar {
             background-color: $bgfull;
             padding: 2.5px;
@@ -30,6 +33,8 @@
     }
 
     .current-window {
+        border: 2px solid $contrast-bg;
+        font-size: 18px;
         padding-right: 7px;
         background-color: $bgfull;
     }
diff --git a/modules/ags/config/scss/binto-widgets/clipboard.scss b/modules/ags/config/scss/binto-widgets/clipboard.scss
index 6031a99c..36ab7007 100644
--- a/modules/ags/config/scss/binto-widgets/clipboard.scss
+++ b/modules/ags/config/scss/binto-widgets/clipboard.scss
@@ -1,56 +1,60 @@
 .clipboard {
-  all: unset;
-  border: 2px solid $contrast-bg;
-  background-color: $bg;
-  color: #f8f8f2;
-  padding: 2px;
-
-  * {
-    font-size: 16px;
-  }
-
-  list, row {
     all: unset;
-  }
+    border: 2px solid $contrast-bg;
+    background-color: $bg;
+    color: #f8f8f2;
+    padding: 2px;
 
-  .header {
-    margin: 16.2px;
-    margin-bottom: 0;
-
-    image, entry {
-      all: unset;
-      border-radius: 9px;
-      color: #f8f8f2;
-      background-color: rgba(#44475a, 0.6);
-      border: 1px solid #44475a;
-      padding: 4.5px;
+    * {
+        font-size: 16px;
     }
 
-    image {
-      margin-right: 9px;
-      -gtk-icon-transform: scale(0.8);
-      font-size: 25.6px;
+    list,
+    row {
+        all: unset;
     }
-  }
 
-  scrolledwindow {
-    padding: 10px;
-    padding-bottom: 0;
-    min-width: 900px;
-    min-height: 750px;
-  }
+    .header {
+        margin: 16.2px;
+        margin-bottom: 0;
 
-  .item {
-    all: unset;
-    transition: 200ms;
-    border-radius: 9px;
+        image,
+        entry {
+            all: unset;
+            border-radius: 9px;
+            color: #f8f8f2;
+            background-color: rgba(#44475a, 0.6);
+            border: 1px solid #44475a;
+            padding: 4.5px;
+        }
 
-    box {
-      padding: 10px;
+        image {
+            margin-right: 9px;
+            -gtk-icon-transform: scale(0.8);
+            font-size: 25.6px;
+        }
     }
-  }
 
-  *:selected .item, .item:hover, .item:focus {
-    background-color: #363449;
-  }
+    scrolledwindow {
+        padding: 10px;
+        padding-bottom: 0;
+        min-width: 900px;
+        min-height: 750px;
+    }
+
+    .item {
+        all: unset;
+        transition: 200ms;
+        border-radius: 9px;
+
+        box {
+            padding: 10px;
+        }
+    }
+
+    *:selected .item,
+    .item:hover,
+    .item:focus {
+        background-color: #363449;
+    }
 }
diff --git a/modules/ags/config/scss/binto-widgets/date.scss b/modules/ags/config/scss/binto-widgets/date.scss
new file mode 100644
index 00000000..967f5793
--- /dev/null
+++ b/modules/ags/config/scss/binto-widgets/date.scss
@@ -0,0 +1,74 @@
+.date {
+    background-color: $bg;
+    color: $fg;
+    border: 2px solid $contrast-bg;
+}
+
+.timebox {
+    margin: 30px 0;
+
+    .time-container {
+        .content {
+            font-weight: bolder;
+            font-size: 60px;
+        }
+
+        .divider {
+            margin: 8px 15px;
+            padding: 0 1px;
+            background: linear-gradient($red, $magenta, $blue, $cyan);
+        }
+    }
+
+    .date-container {
+        margin-top: 2px;
+    }
+}
+
+.cal-box {
+    border-radius: 30px;
+    padding: 0 1rem .2rem;
+    color: $fg;
+    background-color: $bgfull;
+    border-bottom: 2px solid $contrast-bg;
+    border-top: 2px solid $contrast-bg;
+    margin: 0 12px 18px;
+
+    .cal {
+        font-size: 20px;
+        background-color: inherit;
+        padding: .5rem .10rem 0;
+        margin-left: 10px;
+        border-radius: 30px;
+
+        &>* {
+            border: solid 0 transparent;
+        }
+
+        &.highlight {
+            padding: 10rem;
+        }
+    }
+}
+
+calendar:selected {
+    color: $cyan;
+}
+
+calendar.header {
+    color: $cyan;
+    font-weight: bold;
+}
+
+calendar.button {
+    color: $cyan;
+}
+
+calendar.highlight {
+    color: $green;
+    font-weight: bold;
+}
+
+calendar:indeterminate {
+    color: $lightblack;
+}
diff --git a/modules/ags/config/scss/binto-widgets/notification-center.scss b/modules/ags/config/scss/binto-widgets/notification-center.scss
index ec7eac78..e8e4a7e2 100644
--- a/modules/ags/config/scss/binto-widgets/notification-center.scss
+++ b/modules/ags/config/scss/binto-widgets/notification-center.scss
@@ -1,107 +1,109 @@
 .notification-center {
-  min-height: 700px;
-  min-width: 524px;
-  background: $bg;
-  padding: 0;
+    border: 2px solid $contrast-bg;
+    min-height: 700px;
+    min-width: 524px;
+    background: $bg;
+    padding: 0;
 
-  * {
-    font-size: 16px;
-  }
-
-  .header {
-    padding: 10px;
-    margin-top: 22px;
-    margin-bottom: 9px;
-
-    label {
-      font-size: 22px;
+    * {
+        font-size: 16px;
     }
 
-    .clear {
-      box {
-        all: unset;
-        transition: 200ms;
-        color: #eee;
-        background-color: #664C90;
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-        padding: 4.5px 9px;
-      }
+    .header {
+        padding: 10px;
+        margin-top: 22px;
+        margin-bottom: 9px;
 
-      &:hover box {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-        background-color: rgba(238, 238, 238, 0.154);
-        color: #f1f1f1;
-      }
-
-      &.disabled box {
-        box-shadow: none;
-        background-color: rgba(#664C90, 0.3);
-        color: rgba(238, 238, 238, 0.3);
-      }
-
-      label {
-        font-size: 1.2em;
-      }
-    }
-  }
-
-  .notification-list-box {
-    background: $bgfull;
-    padding: 0 12px;
-
-    scrollbar {
-      all: unset;
-      border-radius: 8px;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-
-      * {
-        all: unset;
-      }
-
-      &:hover {
-        border-radius: 8px;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-    }
-
-    scrollbar.vertical {
-      transition: 200ms;
-      background-color: rgba(23, 23, 23, 0.3);
-
-      &:hover {
-        background-color: rgba(23, 23, 23, 0.7);
-
-        slider {
-          background-color: rgba(238, 238, 238, 0.7);
-          min-width: .6em;
+        label {
+            font-size: 22px;
         }
-      }
 
-      slider {
-        background-color: rgba(238, 238, 238, 0.5);
-        border-radius: 9px;
-        min-width: .4em;
-        min-height: 2em;
-        transition: 200ms;
-      }
-    }
-  }
+        .clear {
+            box {
+                all: unset;
+                transition: 200ms;
+                color: #eee;
+                background-color: #664C90;
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+                padding: 4.5px 9px;
+            }
 
-  .placeholder {
-    color: white;
+            &:hover box {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+                background-color: rgba(238, 238, 238, 0.154);
+                color: #f1f1f1;
+            }
 
-    image {
-      font-size: 7em;
-      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-      -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+            &.disabled box {
+                box-shadow: none;
+                background-color: rgba(#664C90, 0.3);
+                color: rgba(238, 238, 238, 0.3);
+            }
+
+            label {
+                font-size: 1.2em;
+            }
+        }
     }
 
-    label {
-      font-size: 1.2em;
-      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-      -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+    .notification-list-box {
+        background: $bgfull;
+        padding: 0 12px;
+        border-top: 2px solid $contrast-bg;
+
+        scrollbar {
+            all: unset;
+            border-radius: 8px;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+
+            * {
+                all: unset;
+            }
+
+            &:hover {
+                border-radius: 8px;
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+
+        scrollbar.vertical {
+            transition: 200ms;
+            background-color: rgba(23, 23, 23, 0.3);
+
+            &:hover {
+                background-color: rgba(23, 23, 23, 0.7);
+
+                slider {
+                    background-color: rgba(238, 238, 238, 0.7);
+                    min-width: .6em;
+                }
+            }
+
+            slider {
+                background-color: rgba(238, 238, 238, 0.5);
+                border-radius: 9px;
+                min-width: .4em;
+                min-height: 2em;
+                transition: 200ms;
+            }
+        }
+    }
+
+    .placeholder {
+        color: white;
+
+        image {
+            font-size: 7em;
+            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+            -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+        }
+
+        label {
+            font-size: 1.2em;
+            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+            -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+        }
     }
-  }
 }
diff --git a/modules/ags/config/scss/binto-widgets/notification.scss b/modules/ags/config/scss/binto-widgets/notification.scss
index 9a4a1a5a..24d37863 100644
--- a/modules/ags/config/scss/binto-widgets/notification.scss
+++ b/modules/ags/config/scss/binto-widgets/notification.scss
@@ -10,197 +10,198 @@ $background-color-9: rgba(238, 238, 238, 0.7);
 $background-color-10: rgba(238, 238, 238, 0.5);
 
 .notification.critical {
-  >box {
-    box-shadow: inset 0 0 0.5em 0 #e67090;
-  }
+    >box {
+        box-shadow: inset 0 0 0.5em 0 #e67090;
+    }
 }
 
 .notification {
-  >box {
-    all: unset;
-    box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4);
-    margin: 9px 9px 0;
-    background-color: $bg;
-    padding: 16.2px;
+    >box {
+        all: unset;
+        box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.4);
+        margin: 9px 9px 0;
+        background-color: $bg;
+        padding: 16.2px;
+        border: 2px solid $contrast-bg;
 
-    * {
-      font-size: 16px;
-    }
-  }
-
-  &:hover {
-    .close-button {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      background-color: $background-color-1;
-      background-color: $background-color-2;
-    }
-  }
-
-  .title {
-    margin-right: 9px;
-    font-size: 1.1em;
-  }
-
-  .description {
-    font-size: .9em;
-    min-width: 350px;
-  }
-
-  .icon {
-    margin-right: 9px;
-  }
-
-  .icon.img {
-    border: 1px solid rgba(238, 238, 238, 0.03);
-  }
-
-  .actions {
-    button {
-      all: unset;
-      transition: all 500ms;
-      background-color: $background-color-3;
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      font-size: 1.2em;
-      padding: 4.5px 9px;
-      margin: 9px 4.5px 0;
-
-      * {
-        font-size: 16px;
-      }
-
-      &:focus {
-        box-shadow: inset 0 0 0 1px #51a4e7;
-        background-color: $background-color-1;
-      }
-
-      &:hover {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-        background-color: $background-color-1;
-      }
-
-      &:active {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-        background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-        background-color: $background-color-4;
-
-        &:hover {
-          box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+        * {
+            font-size: 16px;
         }
-      }
+    }
 
-      &:checked {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-        background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-        background-color: $background-color-4;
-
-        &:hover {
-          box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+    &:hover {
+        .close-button {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            background-color: $background-color-1;
+            background-color: $background-color-2;
         }
-      }
+    }
 
-      &:disabled {
-        box-shadow: none;
+    .title {
+        margin-right: 9px;
+        font-size: 1.1em;
+    }
+
+    .description {
+        font-size: .9em;
+        min-width: 350px;
+    }
+
+    .icon {
+        margin-right: 9px;
+    }
+
+    .icon.img {
+        border: 1px solid rgba(238, 238, 238, 0.03);
+    }
+
+    .actions {
+        button {
+            all: unset;
+            transition: all 500ms;
+            background-color: $background-color-3;
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            font-size: 1.2em;
+            padding: 4.5px 9px;
+            margin: 9px 4.5px 0;
+
+            * {
+                font-size: 16px;
+            }
+
+            &:focus {
+                box-shadow: inset 0 0 0 1px #51a4e7;
+                background-color: $background-color-1;
+            }
+
+            &:hover {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+                background-color: $background-color-1;
+            }
+
+            &:active {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+                background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+                background-color: $background-color-4;
+
+                &:hover {
+                    box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+                }
+            }
+
+            &:checked {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+                background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+                background-color: $background-color-4;
+
+                &:hover {
+                    box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+                }
+            }
+
+            &:disabled {
+                box-shadow: none;
+                background-color: $background-color-5;
+            }
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+
+        button.on {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+            background-color: $background-color-4;
+
+            &:hover {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+            }
+        }
+
+        button.active {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+            background-color: $background-color-4;
+
+            &:hover {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+            }
+        }
+    }
+
+    button.close-button {
+        all: unset;
+        transition: all 500ms;
         background-color: $background-color-5;
-      }
+        background-image: none;
+        box-shadow: none;
+        margin-left: 9px;
+        min-width: 1.2em;
+        min-height: 1.2em;
 
-      &:first-child {
-        margin-left: 0;
-      }
+        * {
+            font-size: 16px;
+        }
 
-      &:last-child {
-        margin-right: 0;
-      }
+        &:focus {
+            box-shadow: inset 0 0 0 1px #51a4e7;
+            background-color: $background-color-1;
+        }
+
+        &:hover {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            background-color: $background-color-1;
+            background-color: $background-color-2;
+        }
+
+        &:active {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            background-color: $background-color-4;
+            background-image: linear-gradient(#e67090, #e67090);
+
+            &:hover {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+            }
+        }
+
+        &:checked {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+            background-color: $background-color-4;
+
+            &:hover {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+            }
+        }
+
+        &:disabled {
+            box-shadow: none;
+            background-color: $background-color-5;
+        }
     }
 
-    button.on {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-      background-color: $background-color-4;
+    button.close-button.on {
+        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+        background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+        background-color: $background-color-4;
 
-      &:hover {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
-      }
+        &:hover {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+        }
     }
 
-    button.active {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-      background-color: $background-color-4;
+    button.close-button.active {
+        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+        background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+        background-color: $background-color-4;
 
-      &:hover {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
-      }
+        &:hover {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+        }
     }
-  }
-
-  button.close-button {
-    all: unset;
-    transition: all 500ms;
-    background-color: $background-color-5;
-    background-image: none;
-    box-shadow: none;
-    margin-left: 9px;
-    min-width: 1.2em;
-    min-height: 1.2em;
-
-    * {
-      font-size: 16px;
-    }
-
-    &:focus {
-      box-shadow: inset 0 0 0 1px #51a4e7;
-      background-color: $background-color-1;
-    }
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      background-color: $background-color-1;
-      background-color: $background-color-2;
-    }
-
-    &:active {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      background-color: $background-color-4;
-      background-image: linear-gradient(#e67090, #e67090);
-
-      &:hover {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
-      }
-    }
-
-    &:checked {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-      background-color: $background-color-4;
-
-      &:hover {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
-      }
-    }
-
-    &:disabled {
-      box-shadow: none;
-      background-color: $background-color-5;
-    }
-  }
-
-  button.close-button.on {
-    box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-    background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-    background-color: $background-color-4;
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
-    }
-  }
-
-  button.close-button.active {
-    box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-    background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-    background-color: $background-color-4;
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
-    }
-  }
 }
diff --git a/modules/ags/config/scss/binto-widgets/osd.scss b/modules/ags/config/scss/binto-widgets/osd.scss
index 26ecdb4c..ce667ce4 100644
--- a/modules/ags/config/scss/binto-widgets/osd.scss
+++ b/modules/ags/config/scss/binto-widgets/osd.scss
@@ -1,40 +1,40 @@
 .osd {
-  padding: 12px 20px;
-  background: rgba(40, 42, 54, 0.8);
-  border: 2px solid $contrast-bg;
+    padding: 12px 20px;
+    background: rgba(40, 42, 54, 0.8);
+    border: 2px solid $contrast-bg;
 
-  label {
-    min-width: 170px;
-  }
-
-  progressbar:disabled {
-    opacity: 0.5;
-  }
-
-  progressbar {
-    min-height: 6px;
-    min-width: 170px;
-    border-radius: 999px;
-    background: transparent;
-    border: none;
-
-    trough {
-      background: #363847;
-      min-height: inherit;
-      border: none;
+    label {
+        min-width: 170px;
     }
 
-    progress {
-      background: #79659f;
-      min-height: inherit;
-      border: none;
+    progressbar:disabled {
+        opacity: 0.5;
     }
-  }
 
-  image {
-    font-size: 2rem;
-    color: white;
-    margin-left: -0.4rem;
-    margin-right: 0.8rem;
-  }
+    progressbar {
+        min-height: 6px;
+        min-width: 170px;
+        border-radius: 999px;
+        background: transparent;
+        border: none;
+
+        trough {
+            background: #363847;
+            min-height: inherit;
+            border: none;
+        }
+
+        progress {
+            background: #79659f;
+            min-height: inherit;
+            border: none;
+        }
+    }
+
+    image {
+        font-size: 2rem;
+        color: white;
+        margin-left: -0.4rem;
+        margin-right: 0.8rem;
+    }
 }
diff --git a/modules/ags/config/scss/binto-widgets/powermenu.scss b/modules/ags/config/scss/binto-widgets/powermenu.scss
index ba8fa1b8..107eb4db 100644
--- a/modules/ags/config/scss/binto-widgets/powermenu.scss
+++ b/modules/ags/config/scss/binto-widgets/powermenu.scss
@@ -1,34 +1,48 @@
 .powermenu {
-  background-color: $bg;
-  color: $fg;
-  padding: 10px;
-  font-family: "MesloLGS NF";
+    background-color: $bg;
+    color: $fg;
+    padding: 10px;
+    font-family: "MesloLGS NF";
 
-  /* font-family: Iosevka Nerd Font; */
-  font-size: 70px;
-  border: 2px solid $contrast-bg;
+    font-size: 70px;
+    border: 2px solid $contrast-bg;
 
-  label {
-    min-width: 140px;
-    min-height: 130px;
-  }
-
-  .button {
-    margin: 5px 10px;
-    min-width: 80px;
-    transition: all ease .2s;
-    &:hover { background-color: $bg-secondary; }
-    &:active { background-color: $bg-secondary; }
-
-    .content {
-      padding: 0 15px;
+    label {
+        min-width: 140px;
+        min-height: 130px;
+    }
+
+    .button {
+        margin: 5px 10px;
+        min-width: 80px;
+        transition: all ease .2s;
+
+        &:hover {
+            background-color: $bg-secondary;
+        }
+
+        &:active {
+            background-color: $bg-secondary;
+        }
+
+        .content {
+            padding: 0 15px;
+        }
+    }
+
+    .shutdown {
+        color: $red;
+    }
+
+    .reboot {
+        color: $magenta;
+    }
+
+    .logout {
+        color: $yellow;
     }
-  }
-  .shutdown { color: $red; }
-  .reboot { color: $magenta; }
-  .logout { color: $yellow; }
 }
 
 .powermenu-clickhandler {
-  background-color: black;
+    background-color: black;
 }
diff --git a/modules/ags/config/scss/binto-widgets/screenshot.scss b/modules/ags/config/scss/binto-widgets/screenshot.scss
index 61b9634c..2bc191d6 100644
--- a/modules/ags/config/scss/binto-widgets/screenshot.scss
+++ b/modules/ags/config/scss/binto-widgets/screenshot.scss
@@ -1,66 +1,66 @@
 .screenshot {
-  background-color: $bg;
-  color: $fg;
-  border: 2px solid $contrast-bg;
+    background-color: $bg;
+    color: $fg;
+    border: 2px solid $contrast-bg;
 
-  label {
-    font-size: 20pt;
-  }
-
-  .header {
-    border-bottom: 2px solid $contrast-bg;
-
-    .header-btn {
-      transition: 200ms;
-
-      &:hover {
-        background-color: rgba(23, 23, 23, 0.7);
-
-        image {
-          -gtk-icon-shadow: 1px 1px $contrast-bg;
-        }
-      }
-
-      label {
-        margin: 10px;
-        font-weight: bold;
-      }
-
-      image {
-        font-size: 30px;
-      }
+    label {
+        font-size: 20pt;
     }
-  }
 
-  scrolledwindow {
-    min-height: 400px;
-    min-width: 800px;
-    padding: 0 10px;
+    .header {
+        border-bottom: 2px solid $contrast-bg;
 
-    box {
-      .item-btn {
-        transition: 200ms;
+        .header-btn {
+            transition: 200ms;
 
-        &:hover {
-          background-color: rgba(23, 23, 23, 0.7);
+            &:hover {
+                background-color: rgba(23, 23, 23, 0.7);
+
+                image {
+                    -gtk-icon-shadow: 1px 1px $contrast-bg;
+                }
+            }
+
+            label {
+                margin: 10px;
+                font-weight: bold;
+            }
+
+            image {
+                font-size: 30px;
+            }
+        }
+    }
+
+    scrolledwindow {
+        min-height: 400px;
+        min-width: 800px;
+        padding: 0 10px;
+
+        box {
+            .item-btn {
+                transition: 200ms;
+
+                &:hover {
+                    background-color: rgba(23, 23, 23, 0.7);
+                }
+            }
+
+            label {
+                padding: 5px;
+            }
+
+            image {
+                font-size: 30px;
+            }
+
+            &:first-child label {
+                padding-top: 10px;
+            }
+
+            &:last-child label {
+                padding-bottom: 10px;
+            }
         }
-      }
-
-      label {
-        padding: 5px;
-      }
-
-      image {
-        font-size: 30px;
-      }
-
-      &:first-child label {
-        padding-top: 10px;
-      }
-
-      &:last-child label {
-        padding-bottom: 10px;
-      }
     }
-  }
 }
diff --git a/modules/ags/config/scss/binto.scss b/modules/ags/config/scss/binto.scss
index 14ffa76d..c82b046e 100644
--- a/modules/ags/config/scss/binto.scss
+++ b/modules/ags/config/scss/binto.scss
@@ -11,9 +11,10 @@ undershoot {
 @import './common';
 @import './binto-widgets/applauncher';
 @import './binto-widgets/bar';
+@import './binto-widgets/clipboard';
+@import './binto-widgets/date';
 @import './binto-widgets/notification';
 @import './binto-widgets/notification-center';
 @import './binto-widgets/osd';
 @import './binto-widgets/powermenu';
-@import './binto-widgets/clipboard';
 @import './binto-widgets/screenshot';
diff --git a/modules/ags/config/scss/common.scss b/modules/ags/config/scss/common.scss
index 4ab58eed..81cef63b 100644
--- a/modules/ags/config/scss/common.scss
+++ b/modules/ags/config/scss/common.scss
@@ -34,30 +34,32 @@ $javacafe-blue: #86aaec;
 
 
 scrolledwindow {
-  scrollbar, scrollbar * {
-    all: unset;
-  }
 
-  scrollbar.vertical {
-    transition: 200ms;
-    background-color: rgba(23, 23, 23, 0.3);
-    margin: 20px 0;
-
-    &:hover {
-      background-color: rgba(23, 23, 23, 0.7);
-
-      slider {
-        background-color: rgba(238, 238, 238, 0.7);
-        min-width: .6em;
-      }
+    scrollbar,
+    scrollbar * {
+        all: unset;
     }
 
-    slider {
-      background-color: rgba(238, 238, 238, 0.5);
-      border-radius: 9px;
-      min-width: .4em;
-      min-height: 2em;
-      transition: 200ms;
+    scrollbar.vertical {
+        transition: 200ms;
+        background-color: rgba(23, 23, 23, 0.3);
+        margin: 20px 0;
+
+        &:hover {
+            background-color: rgba(23, 23, 23, 0.7);
+
+            slider {
+                background-color: rgba(238, 238, 238, 0.7);
+                min-width: .6em;
+            }
+        }
+
+        slider {
+            background-color: rgba(238, 238, 238, 0.5);
+            border-radius: 9px;
+            min-width: .4em;
+            min-height: 2em;
+            transition: 200ms;
+        }
     }
-  }
 }
diff --git a/modules/ags/config/scss/lockscreen.scss b/modules/ags/config/scss/lockscreen.scss
index 8f652516..8a428e53 100644
--- a/modules/ags/config/scss/lockscreen.scss
+++ b/modules/ags/config/scss/lockscreen.scss
@@ -1,10 +1,10 @@
 @import './common';
 
 window {
-  background-color: transparent;
+    background-color: transparent;
 }
 
 .clock {
-  font-size: 80pt;
-  font-family: 'Ubuntu Mono';
+    font-size: 80pt;
+    font-family: 'Ubuntu Mono';
 }
diff --git a/modules/ags/config/scss/wim-widgets/applauncher.scss b/modules/ags/config/scss/wim-widgets/applauncher.scss
index 1c7b904b..026098a2 100644
--- a/modules/ags/config/scss/wim-widgets/applauncher.scss
+++ b/modules/ags/config/scss/wim-widgets/applauncher.scss
@@ -1,91 +1,95 @@
 .applauncher {
-  all: unset;
-  border: 2px solid $contrast-bg;
-  border-radius: 25px;
-  background-color: $bg;
-  color: #f8f8f2;
-  padding: 2px;
-
-  * {
-    font-size: 16px;
-  }
-
-  list, row {
     all: unset;
-  }
-
-  .header {
-    margin: 16.2px;
-    margin-bottom: 0;
-
-    image, entry {
-      all: unset;
-      border-radius: 9px;
-      color: #f8f8f2;
-      background-color: rgba(#44475a, 0.6);
-      border: 1px solid #44475a;
-      padding: 4.5px;
-    }
-
-    image {
-      margin-right: 9px;
-      -gtk-icon-transform: scale(0.8);
-      font-size: 25.6px;
-    }
-  }
-
-  scrolledwindow {
-    padding: 10px;
-    padding-bottom: 0;
-    min-width: 700px;
-    min-height: 450px;
-  }
-
-  .placeholder {
-    margin-top: 9px;
+    border: 2px solid $contrast-bg;
+    border-radius: 25px;
+    background-color: $bg;
     color: #f8f8f2;
-    font-size: 1.2em;
-  }
+    padding: 2px;
 
-  .app {
-    all: unset;
-    transition: 200ms;
-    border-radius: 9px;
-
-    label {
-      transition: 200ms;
-
-      &.title {
-        color: #f8f8f2;
-      }
-
-      &.description {
-        color: rgba(238, 238, 238, 0.7);
-      }
-    }
-
-    image {
-      transition: 200ms;
-      margin: 0 8px;
-    }
-
-    &:active {
-      background-color: rgba($contrast-bg, 0.5);
-      box-shadow: inset 0 0 0 3px rgba(238, 238, 238, 0.03);
-    }
-  }
-
-  *:selected, .app:hover, .app:focus {
     * {
-      font-weight: unset;
+        font-size: 16px;
     }
 
-    label.title {
-      color: $contrast-bg;
+    list,
+    row {
+        all: unset;
     }
 
-    image {
-      -gtk-icon-shadow: 2px 2px $contrast-bg;
+    .header {
+        margin: 16.2px;
+        margin-bottom: 0;
+
+        image,
+        entry {
+            all: unset;
+            border-radius: 9px;
+            color: #f8f8f2;
+            background-color: rgba(#44475a, 0.6);
+            border: 1px solid #44475a;
+            padding: 4.5px;
+        }
+
+        image {
+            margin-right: 9px;
+            -gtk-icon-transform: scale(0.8);
+            font-size: 25.6px;
+        }
+    }
+
+    scrolledwindow {
+        padding: 10px;
+        padding-bottom: 0;
+        min-width: 700px;
+        min-height: 450px;
+    }
+
+    .placeholder {
+        margin-top: 9px;
+        color: #f8f8f2;
+        font-size: 1.2em;
+    }
+
+    .app {
+        all: unset;
+        transition: 200ms;
+        border-radius: 9px;
+
+        label {
+            transition: 200ms;
+
+            &.title {
+                color: #f8f8f2;
+            }
+
+            &.description {
+                color: rgba(238, 238, 238, 0.7);
+            }
+        }
+
+        image {
+            transition: 200ms;
+            margin: 0 8px;
+        }
+
+        &:active {
+            background-color: rgba($contrast-bg, 0.5);
+            box-shadow: inset 0 0 0 3px rgba(238, 238, 238, 0.03);
+        }
+    }
+
+    *:selected,
+    .app:hover,
+    .app:focus {
+        * {
+            font-weight: unset;
+        }
+
+        label.title {
+            color: $contrast-bg;
+        }
+
+        image {
+            -gtk-icon-shadow: 2px 2px $contrast-bg;
+        }
     }
-  }
 }
diff --git a/modules/ags/config/scss/wim-widgets/clipboard.scss b/modules/ags/config/scss/wim-widgets/clipboard.scss
index a8b1fce9..c316c854 100644
--- a/modules/ags/config/scss/wim-widgets/clipboard.scss
+++ b/modules/ags/config/scss/wim-widgets/clipboard.scss
@@ -1,57 +1,61 @@
 .clipboard {
-  all: unset;
-  border: 2px solid $contrast-bg;
-  border-radius: 25px;
-  background-color: $bg;
-  color: #f8f8f2;
-  padding: 2px;
-
-  * {
-    font-size: 16px;
-  }
-
-  list, row {
     all: unset;
-  }
+    border: 2px solid $contrast-bg;
+    border-radius: 25px;
+    background-color: $bg;
+    color: #f8f8f2;
+    padding: 2px;
 
-  .header {
-    margin: 16.2px;
-    margin-bottom: 0;
-
-    image, entry {
-      all: unset;
-      border-radius: 9px;
-      color: #f8f8f2;
-      background-color: rgba(#44475a, 0.6);
-      border: 1px solid #44475a;
-      padding: 4.5px;
+    * {
+        font-size: 16px;
     }
 
-    image {
-      margin-right: 9px;
-      -gtk-icon-transform: scale(0.8);
-      font-size: 25.6px;
+    list,
+    row {
+        all: unset;
     }
-  }
 
-  scrolledwindow {
-    padding: 10px;
-    padding-bottom: 0;
-    min-width: 900px;
-    min-height: 750px;
-  }
+    .header {
+        margin: 16.2px;
+        margin-bottom: 0;
 
-  .item {
-    all: unset;
-    transition: 200ms;
-    border-radius: 9px;
+        image,
+        entry {
+            all: unset;
+            border-radius: 9px;
+            color: #f8f8f2;
+            background-color: rgba(#44475a, 0.6);
+            border: 1px solid #44475a;
+            padding: 4.5px;
+        }
 
-    box {
-      padding: 10px;
+        image {
+            margin-right: 9px;
+            -gtk-icon-transform: scale(0.8);
+            font-size: 25.6px;
+        }
     }
-  }
 
-  *:selected .item, .item:hover, .item:focus {
-    background-color: #363449;
-  }
+    scrolledwindow {
+        padding: 10px;
+        padding-bottom: 0;
+        min-width: 900px;
+        min-height: 750px;
+    }
+
+    .item {
+        all: unset;
+        transition: 200ms;
+        border-radius: 9px;
+
+        box {
+            padding: 10px;
+        }
+    }
+
+    *:selected .item,
+    .item:hover,
+    .item:focus {
+        background-color: #363449;
+    }
 }
diff --git a/modules/ags/config/scss/wim-widgets/date.scss b/modules/ags/config/scss/wim-widgets/date.scss
index 4cf7c1e4..fc99e498 100644
--- a/modules/ags/config/scss/wim-widgets/date.scss
+++ b/modules/ags/config/scss/wim-widgets/date.scss
@@ -1,75 +1,75 @@
 .date {
-  background-color: $bg;
-  color: $fg;
-  border-radius: 30px;
-  border: 2px solid $contrast-bg;
+    background-color: $bg;
+    color: $fg;
+    border-radius: 30px;
+    border: 2px solid $contrast-bg;
 }
 
 .timebox {
-  margin: 30px 0;
+    margin: 30px 0;
 
-  .time-container {
-    .content {
-      font-weight: bolder;
-      font-size: 60px;
+    .time-container {
+        .content {
+            font-weight: bolder;
+            font-size: 60px;
+        }
+
+        .divider {
+            margin: 8px 15px;
+            padding: 0 1px;
+            background: linear-gradient($red, $magenta, $blue, $cyan);
+        }
     }
 
-    .divider {
-      margin: 8px 15px;
-      padding: 0 1px;
-      background: linear-gradient($red, $magenta, $blue, $cyan);
+    .date-container {
+        margin-top: 2px;
     }
-  }
-
-  .date-container {
-    margin-top: 2px;
-  }
 }
 
 .cal-box {
-  border-radius: 30px;
-  padding: 0 1rem .2rem;
-  color: $fg;
-  background-color: $bgfull;
-  border-bottom: 2px solid $contrast-bg;
-  border-top: 2px solid $contrast-bg;
-  margin: 0 12px 18px;
-
-  .cal {
-    font-size: 20px;
-    background-color: inherit;
-    padding: .5rem .10rem 0;
-    margin-left: 10px;
     border-radius: 30px;
+    padding: 0 1rem .2rem;
+    color: $fg;
+    background-color: $bgfull;
+    border-bottom: 2px solid $contrast-bg;
+    border-top: 2px solid $contrast-bg;
+    margin: 0 12px 18px;
 
-    & > * {
-      border: solid 0 transparent;
+    .cal {
+        font-size: 20px;
+        background-color: inherit;
+        padding: .5rem .10rem 0;
+        margin-left: 10px;
+        border-radius: 30px;
+
+        &>* {
+            border: solid 0 transparent;
+        }
+
+        &.highlight {
+            padding: 10rem;
+        }
     }
-    
-    &.highlight {
-      padding: 10rem;
-    }
-  }
 }
 
 calendar:selected {
-  color: $cyan;
+    color: $cyan;
 }
 
 calendar.header {
-  color: $cyan;
-  font-weight: bold;
+    color: $cyan;
+    font-weight: bold;
 }
 
 calendar.button {
-  color: $cyan;
+    color: $cyan;
 }
 
 calendar.highlight {
-  color: $green;
-  font-weight: bold;
+    color: $green;
+    font-weight: bold;
 }
 
 calendar:indeterminate {
-  color: $lightblack;
+    color: $lightblack;
 }
diff --git a/modules/ags/config/scss/wim-widgets/notification-center.scss b/modules/ags/config/scss/wim-widgets/notification-center.scss
index 78bd02dc..bc5bf3f4 100644
--- a/modules/ags/config/scss/wim-widgets/notification-center.scss
+++ b/modules/ags/config/scss/wim-widgets/notification-center.scss
@@ -1,113 +1,113 @@
 .notification-center {
-  min-height: 700px;
-  min-width: 524px;
-  background: $bg;
-  border-radius: 30px;
-  border-top-right-radius: 0;
-  border: 2px solid $contrast-bg;
-  padding: 0;
-
-  * {
-    font-size: 16px;
-  }
-
-  .header {
-    padding: 10px;
-    margin-top: 22px;
-    margin-bottom: 9px;
-
-    label {
-      font-size: 22px;
-    }
-
-    .clear {
-      box {
-        all: unset;
-        transition: 200ms;
-        border-radius: 9px;
-        color: #eee;
-        background-color: #664C90;
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-        padding: 4.5px 9px;
-      }
-
-      &:hover box {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-        background-color: rgba(238, 238, 238, 0.154);
-        color: #f1f1f1;
-      }
-
-      &.disabled box {
-        box-shadow: none;
-        background-color: rgba(#664C90, 0.3);
-        color: rgba(238, 238, 238, 0.3);
-      }
-
-      label {
-        font-size: 1.2em;
-      }
-    }
-  }
-
-  .notification-list-box {
-    background: $bgfull;
-    padding: 0 12px;
+    min-height: 700px;
+    min-width: 524px;
+    background: $bg;
     border-radius: 30px;
-    border-top: 2px solid $contrast-bg;
+    border-top-right-radius: 0;
+    border: 2px solid $contrast-bg;
+    padding: 0;
 
-    scrollbar {
-      all: unset;
-      border-radius: 8px;
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-
-      * {
-        all: unset;
-      }
-
-      &:hover {
-        border-radius: 8px;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
+    * {
+        font-size: 16px;
     }
 
-    scrollbar.vertical {
-      transition: 200ms;
-      background-color: rgba(23, 23, 23, 0.3);
+    .header {
+        padding: 10px;
+        margin-top: 22px;
+        margin-bottom: 9px;
 
-      &:hover {
-        background-color: rgba(23, 23, 23, 0.7);
-
-        slider {
-          background-color: rgba(238, 238, 238, 0.7);
-          min-width: .6em;
+        label {
+            font-size: 22px;
         }
-      }
 
-      slider {
-        background-color: rgba(238, 238, 238, 0.5);
-        border-radius: 9px;
-        min-width: .4em;
-        min-height: 2em;
-        transition: 200ms;
-      }
-    }
-  }
+        .clear {
+            box {
+                all: unset;
+                transition: 200ms;
+                border-radius: 9px;
+                color: #eee;
+                background-color: #664C90;
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+                padding: 4.5px 9px;
+            }
 
-  .placeholder {
-    color: white;
+            &:hover box {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+                background-color: rgba(238, 238, 238, 0.154);
+                color: #f1f1f1;
+            }
 
-    image {
-      font-size: 7em;
-      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-      -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+            &.disabled box {
+                box-shadow: none;
+                background-color: rgba(#664C90, 0.3);
+                color: rgba(238, 238, 238, 0.3);
+            }
+
+            label {
+                font-size: 1.2em;
+            }
+        }
     }
 
-    label {
-      font-size: 1.2em;
-      text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-      -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+    .notification-list-box {
+        background: $bgfull;
+        padding: 0 12px;
+        border-radius: 30px;
+        border-top: 2px solid $contrast-bg;
+
+        scrollbar {
+            all: unset;
+            border-radius: 8px;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+
+            * {
+                all: unset;
+            }
+
+            &:hover {
+                border-radius: 8px;
+                border-top-left-radius: 0;
+                border-bottom-left-radius: 0;
+            }
+        }
+
+        scrollbar.vertical {
+            transition: 200ms;
+            background-color: rgba(23, 23, 23, 0.3);
+
+            &:hover {
+                background-color: rgba(23, 23, 23, 0.7);
+
+                slider {
+                    background-color: rgba(238, 238, 238, 0.7);
+                    min-width: .6em;
+                }
+            }
+
+            slider {
+                background-color: rgba(238, 238, 238, 0.5);
+                border-radius: 9px;
+                min-width: .4em;
+                min-height: 2em;
+                transition: 200ms;
+            }
+        }
+    }
+
+    .placeholder {
+        color: white;
+
+        image {
+            font-size: 7em;
+            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+            -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+        }
+
+        label {
+            font-size: 1.2em;
+            text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+            -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+        }
     }
-  }
 }
diff --git a/modules/ags/config/scss/wim-widgets/notification.scss b/modules/ags/config/scss/wim-widgets/notification.scss
index 61759c67..f4349110 100644
--- a/modules/ags/config/scss/wim-widgets/notification.scss
+++ b/modules/ags/config/scss/wim-widgets/notification.scss
@@ -10,201 +10,201 @@ $background-color-9: rgba(238, 238, 238, 0.7);
 $background-color-10: rgba(238, 238, 238, 0.5);
 
 .notification.critical {
-  >box {
-    box-shadow: inset 0 0 0.5em 0 #e67090;
-  }
+    >box {
+        box-shadow: inset 0 0 0.5em 0 #e67090;
+    }
 }
 
 .notification {
-  >box {
-    all: unset;
-    margin: 9px 9px 0;
-    border: 2px solid $contrast-bg;
-    border-radius: 15px;
-    background-color: $bg;
-    padding: 16.2px;
+    >box {
+        all: unset;
+        margin: 9px 9px 0;
+        border: 2px solid $contrast-bg;
+        border-radius: 15px;
+        background-color: $bg;
+        padding: 16.2px;
 
-    * {
-      font-size: 16px;
-    }
-  }
-
-  &:hover {
-    .close-button {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      background-color: $background-color-1;
-      background-color: $background-color-2;
-    }
-  }
-
-  .title {
-    margin-right: 9px;
-    font-size: 1.1em;
-  }
-
-  .description {
-    font-size: .9em;
-    min-width: 350px;
-  }
-
-  .icon {
-    border-radius: 7.2px;
-    margin-right: 9px;
-  }
-
-  .icon.img {
-    border: 1px solid rgba(238, 238, 238, 0.03);
-  }
-
-  .actions {
-    button {
-      all: unset;
-      transition: all 500ms;
-      background-color: $background-color-3;
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      border-radius: 7.2px;
-      font-size: 1.2em;
-      padding: 4.5px 9px;
-      margin: 9px 4.5px 0;
-
-      * {
-        font-size: 16px;
-      }
-
-      &:focus {
-        box-shadow: inset 0 0 0 1px #51a4e7;
-        background-color: $background-color-1;
-      }
-
-      &:hover {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-        background-color: $background-color-1;
-      }
-
-      &:active {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-        background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-        background-color: $background-color-4;
-
-        &:hover {
-          box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+        * {
+            font-size: 16px;
         }
-      }
+    }
 
-      &:checked {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-        background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-        background-color: $background-color-4;
-
-        &:hover {
-          box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+    &:hover {
+        .close-button {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            background-color: $background-color-1;
+            background-color: $background-color-2;
         }
-      }
+    }
 
-      &:disabled {
-        box-shadow: none;
+    .title {
+        margin-right: 9px;
+        font-size: 1.1em;
+    }
+
+    .description {
+        font-size: .9em;
+        min-width: 350px;
+    }
+
+    .icon {
+        border-radius: 7.2px;
+        margin-right: 9px;
+    }
+
+    .icon.img {
+        border: 1px solid rgba(238, 238, 238, 0.03);
+    }
+
+    .actions {
+        button {
+            all: unset;
+            transition: all 500ms;
+            background-color: $background-color-3;
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            border-radius: 7.2px;
+            font-size: 1.2em;
+            padding: 4.5px 9px;
+            margin: 9px 4.5px 0;
+
+            * {
+                font-size: 16px;
+            }
+
+            &:focus {
+                box-shadow: inset 0 0 0 1px #51a4e7;
+                background-color: $background-color-1;
+            }
+
+            &:hover {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+                background-color: $background-color-1;
+            }
+
+            &:active {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+                background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+                background-color: $background-color-4;
+
+                &:hover {
+                    box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+                }
+            }
+
+            &:checked {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+                background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+                background-color: $background-color-4;
+
+                &:hover {
+                    box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+                }
+            }
+
+            &:disabled {
+                box-shadow: none;
+                background-color: $background-color-5;
+            }
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+
+        button.on {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+            background-color: $background-color-4;
+
+            &:hover {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+            }
+        }
+
+        button.active {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+            background-color: $background-color-4;
+
+            &:hover {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+            }
+        }
+    }
+
+    button.close-button {
+        all: unset;
+        transition: all 500ms;
         background-color: $background-color-5;
-      }
+        background-image: none;
+        box-shadow: none;
+        margin-left: 9px;
+        border-radius: 7.2px;
+        min-width: 1.2em;
+        min-height: 1.2em;
 
-      &:first-child {
-        margin-left: 0;
-      }
+        * {
+            font-size: 16px;
+        }
 
-      &:last-child {
-        margin-right: 0;
-      }
+        &:focus {
+            box-shadow: inset 0 0 0 1px #51a4e7;
+            background-color: $background-color-1;
+        }
+
+        &:hover {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            background-color: $background-color-1;
+            background-color: $background-color-2;
+        }
+
+        &:active {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            background-color: $background-color-4;
+            background-image: linear-gradient(#e67090, #e67090);
+
+            &:hover {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+            }
+        }
+
+        &:checked {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+            background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+            background-color: $background-color-4;
+
+            &:hover {
+                box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+            }
+        }
+
+        &:disabled {
+            box-shadow: none;
+            background-color: $background-color-5;
+        }
     }
 
-    button.on {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-      background-color: $background-color-4;
+    button.close-button.on {
+        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+        background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+        background-color: $background-color-4;
 
-      &:hover {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
-      }
+        &:hover {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+        }
     }
 
-    button.active {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-      background-color: $background-color-4;
+    button.close-button.active {
+        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+        background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+        background-color: $background-color-4;
 
-      &:hover {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
-      }
+        &:hover {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
+        }
     }
-  }
-
-  button.close-button {
-    all: unset;
-    transition: all 500ms;
-    background-color: $background-color-5;
-    background-image: none;
-    box-shadow: none;
-    margin-left: 9px;
-    border-radius: 7.2px;
-    min-width: 1.2em;
-    min-height: 1.2em;
-
-    * {
-      font-size: 16px;
-    }
-
-    &:focus {
-      box-shadow: inset 0 0 0 1px #51a4e7;
-      background-color: $background-color-1;
-    }
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      background-color: $background-color-1;
-      background-color: $background-color-2;
-    }
-
-    &:active {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      background-color: $background-color-4;
-      background-image: linear-gradient(#e67090, #e67090);
-
-      &:hover {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
-      }
-    }
-
-    &:checked {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-      background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-      background-color: $background-color-4;
-
-      &:hover {
-        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
-      }
-    }
-
-    &:disabled {
-      box-shadow: none;
-      background-color: $background-color-5;
-    }
-  }
-
-  button.close-button.on {
-    box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-    background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-    background-color: $background-color-4;
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
-    }
-  }
-
-  button.close-button.active {
-    box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
-    background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
-    background-color: $background-color-4;
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154);
-    }
-  }
 }
diff --git a/modules/ags/config/scss/wim-widgets/osd.scss b/modules/ags/config/scss/wim-widgets/osd.scss
index 335da1bb..a3a77cd6 100644
--- a/modules/ags/config/scss/wim-widgets/osd.scss
+++ b/modules/ags/config/scss/wim-widgets/osd.scss
@@ -1,43 +1,43 @@
 .osd {
-  padding: 12px 20px;
-  border-radius: 999px;
-  background: rgba(40, 42, 54, 0.8);
-  border: 2px solid $contrast-bg;
-
-  label {
-    min-width: 170px;
-  }
-
-  progressbar:disabled {
-    opacity: 0.5;
-  }
-
-  progressbar {
-    min-height: 6px;
-    min-width: 170px;
+    padding: 12px 20px;
     border-radius: 999px;
-    background: transparent;
-    border: none;
+    background: rgba(40, 42, 54, 0.8);
+    border: 2px solid $contrast-bg;
 
-    trough {
-      background: #363847;
-      min-height: inherit;
-      border-radius: inherit;
-      border: none;
+    label {
+        min-width: 170px;
     }
 
-    progress {
-      background: #79659f;
-      min-height: inherit;
-      border-radius: inherit;
-      border: none;
+    progressbar:disabled {
+        opacity: 0.5;
     }
-  }
 
-  image {
-    font-size: 2rem;
-    color: white;
-    margin-left: -0.4rem;
-    margin-right: 0.8rem;
-  }
+    progressbar {
+        min-height: 6px;
+        min-width: 170px;
+        border-radius: 999px;
+        background: transparent;
+        border: none;
+
+        trough {
+            background: #363847;
+            min-height: inherit;
+            border-radius: inherit;
+            border: none;
+        }
+
+        progress {
+            background: #79659f;
+            min-height: inherit;
+            border-radius: inherit;
+            border: none;
+        }
+    }
+
+    image {
+        font-size: 2rem;
+        color: white;
+        margin-left: -0.4rem;
+        margin-right: 0.8rem;
+    }
 }
diff --git a/modules/ags/config/scss/wim-widgets/osk.scss b/modules/ags/config/scss/wim-widgets/osk.scss
index f5e32777..85dd7332 100644
--- a/modules/ags/config/scss/wim-widgets/osk.scss
+++ b/modules/ags/config/scss/wim-widgets/osk.scss
@@ -1,95 +1,99 @@
 .thingy {
-  border-radius: 2rem 2rem 0 0;
-  min-height: 2.7rem;
-  min-width: 20rem;
+    border-radius: 2rem 2rem 0 0;
+    min-height: 2.7rem;
+    min-width: 20rem;
 
-  .settings {
-    padding: 0.5rem;
+    .settings {
+        padding: 0.5rem;
 
-    .button {
-      background-color: $bgfull;
-      border: 0.1rem solid $darkbg;
-      border-radius: 0.7rem;
-      padding: 0.3rem;
+        .button {
+            background-color: $bgfull;
+            border: 0.1rem solid $darkbg;
+            border-radius: 0.7rem;
+            padding: 0.3rem;
 
-      &.toggled {
-        background-color: $contrast-bg;
-      }
+            &.toggled {
+                background-color: $contrast-bg;
+            }
+        }
     }
-  }
 }
 
 .osk {
-  padding-top: 4px;
-  border-radius: 10px 10px 0;
+    padding-top: 4px;
+    border-radius: 10px 10px 0;
 
-  .side {
-    .key {
-      &:active label {
-        background-color: $contrast-bg;
-      }
+    .side {
+        .key {
+            &:active label {
+                background-color: $contrast-bg;
+            }
 
-      label {
-        background-color: $bg;
-        border: 0.08rem solid $darkbg;
-        border-radius: 0.7rem;
-        min-height: 3rem;
+            label {
+                background-color: $bg;
+                border: 0.08rem solid $darkbg;
+                border-radius: 0.7rem;
+                min-height: 3rem;
 
-        transition: background-color 0.2s ease-in-out,
+                transition: background-color 0.2s ease-in-out,
                     border-color 0.2s ease-in-out;
 
-        &.normal, &.Super {
-          min-width: 3rem;
+                &.normal,
+                &.Super {
+                    min-width: 3rem;
+                }
+
+                &.Tab,
+                &.Backspace {
+                    min-width: 7rem;
+                }
+
+                &.Enter,
+                &.Caps {
+                    min-width: 8rem;
+                }
+
+                &.Shift {
+                    min-width: 9rem;
+                }
+
+                &.Space {
+                    min-width: 20rem;
+                }
+
+                &.PrtSc,
+                &.AltGr {
+                    min-width: 3.2rem;
+                }
+
+                &.active {
+                    background-color: $darkbg;
+                }
+
+                &.altgr {
+                    border: 0.08rem solid blue;
+                }
+            }
         }
 
-        &.Tab, &.Backspace {
-          min-width: 7rem;
+        &.right-side {
+            .key .mod {
+                &.Ctrl {
+                    min-width: 2.4rem;
+                }
+            }
         }
 
-        &.Enter, &.Caps {
-          min-width: 8rem;
-        }
+        &.left-side {
+            .key .mod {
+                &.Alt {
+                    min-width: 3rem;
+                }
 
-        &.Shift {
-          min-width: 9rem;
+                &.Ctrl {
+                    min-width: 4rem;
+                }
+            }
         }
-
-        &.Space {
-          min-width: 20rem;
-        }
-
-        &.PrtSc, &.AltGr {
-          min-width: 3.2rem;
-        }
-
-        &.active {
-          background-color: $darkbg;
-        }
-
-        &.altgr {
-          border: 0.08rem solid blue;
-        }
-      }
     }
-
-    &.right-side {
-      .key .mod {
-        &.Ctrl {
-          min-width: 2.4rem;
-        }
-      }
-    }
-
-    &.left-side {
-      .key .mod {
-        &.Alt {
-          min-width: 3rem;
-        }
-
-        &.Ctrl {
-          min-width: 4rem;
-        }
-      }
-    }
-  }
 }
diff --git a/modules/ags/config/scss/wim-widgets/player.scss b/modules/ags/config/scss/wim-widgets/player.scss
index 2772b8fd..8b691590 100644
--- a/modules/ags/config/scss/wim-widgets/player.scss
+++ b/modules/ags/config/scss/wim-widgets/player.scss
@@ -1,117 +1,116 @@
 .arrow {
-  transition: -gtk-icon-transform 0.3s ease-in-out;
-  margin-bottom: 12px;
+    transition: -gtk-icon-transform 0.3s ease-in-out;
+    margin-bottom: 12px;
 }
 
 .media {
-  margin-top: 9px;
+    margin-top: 9px;
 }
 
 .player {
-  all: unset;
-  padding: 10px;
-  min-width: 400px;
-  min-height: 200px;
-  border-radius: 30px;
-  border-top: 2px solid $contrast-bg;
-  border-bottom: 2px solid $contrast-bg;
-  transition: background 250ms;
+    all: unset;
+    padding: 10px;
+    min-width: 400px;
+    min-height: 200px;
+    border-radius: 30px;
+    border-top: 2px solid $contrast-bg;
+    border-bottom: 2px solid $contrast-bg;
+    transition: background 250ms;
 
-  .top {
-    font-size: 23px;
-  }
-
-  .metadata {
-    .title{
-      font-weight: 500;
-      transition: text 250ms;
+    .top {
+        font-size: 23px;
     }
 
-    .artist{
-      font-weight: 400;
-      font-size: 15px;
-      transition: text 250ms;
+    .metadata {
+        .title {
+            font-weight: 500;
+            transition: text 250ms;
+        }
+
+        .artist {
+            font-weight: 400;
+            font-size: 15px;
+            transition: text 250ms;
+        }
     }
-  }
 
-  .bottom {
-    font-size: 30px;
-  }
+    .bottom {
+        font-size: 30px;
+    }
 
-  .pausebutton {
-    transition: background-color ease .2s,
-                color ease .2s;
-    font-size: 15px;
-    padding: 4px 4px 4px 7px;
-  }
+    .pausebutton {
+        transition: background-color ease .2s,
+            color ease .2s;
+        font-size: 15px;
+        padding: 4px 4px 4px 7px;
+    }
 
-  .playing {
-    transition: background-color ease .2s,
-                color ease .2s;
-    border-radius: 15px;
-  }
+    .playing {
+        transition: background-color ease .2s,
+            color ease .2s;
+        border-radius: 15px;
+    }
 
-  .stopped,
-  .paused {
-    transition: background-color ease .2s,
-                color ease .2s;
-    border-radius: 26px;
-    padding: 4px 4px 4px 10px;
-  }
+    .stopped,
+    .paused {
+        transition: background-color ease .2s,
+            color ease .2s;
+        border-radius: 26px;
+        padding: 4px 4px 4px 10px;
+    }
 
-  button label {
-    min-width: 35px;
-  }
+    button label {
+        min-width: 35px;
+    }
 }
 
 .position-indicator {
-  min-width: 18px;
-  margin: 7px;
-  background-color: rgba(255, 255, 255, 0.7);
-  box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.3);
-  border-radius: 100%;
+    min-width: 18px;
+    margin: 7px;
+    background-color: rgba(255, 255, 255, 0.7);
+    box-shadow: 0 0 5px 0 rgba(255, 255, 255, 0.3);
+    border-radius: 100%;
 }
 
 .previous,
 .next,
 .shuffle,
 .loop {
-  border-radius: 100%;
-  transition: color 200ms;
-
-  &:hover {
     border-radius: 100%;
-    background-color: rgba(127, 132, 156, 0.4);
     transition: color 200ms;
-  }
+
+    &:hover {
+        border-radius: 100%;
+        background-color: rgba(127, 132, 156, 0.4);
+        transition: color 200ms;
+    }
 }
 
 .loop {
-  label {
-    padding-right: 8px;
-  }
+    label {
+        padding-right: 8px;
+    }
 }
 
 .position-slider {
-  highlight {
-    margin: 0;
-    border-radius: 2em;
-  }
+    highlight {
+        margin: 0;
+        border-radius: 2em;
+    }
 
-  trough {
-    margin: 0 8px;
-    border-radius: 2em;
-  }
+    trough {
+        margin: 0 8px;
+        border-radius: 2em;
+    }
 
-  slider {
-    margin: -8px;
-    min-height: 20px;
-    border-radius: 10px;
-    transition: background-color 0.5s ease-in-out;
-  }
+    slider {
+        margin: -8px;
+        min-height: 20px;
+        border-radius: 10px;
+        transition: background-color 0.5s ease-in-out;
+    }
 
-  slider:hover {
-    transition: background-color 0.5s ease-in-out;
-  }
+    slider:hover {
+        transition: background-color 0.5s ease-in-out;
+    }
 }
-
diff --git a/modules/ags/config/scss/wim-widgets/powermenu.scss b/modules/ags/config/scss/wim-widgets/powermenu.scss
index 9cee5890..ad319269 100644
--- a/modules/ags/config/scss/wim-widgets/powermenu.scss
+++ b/modules/ags/config/scss/wim-widgets/powermenu.scss
@@ -1,37 +1,52 @@
 .powermenu {
-  background-color: $bg;
-  color: $fg;
-  padding: 10px;
-  font-family: "MesloLGS NF";
+    background-color: $bg;
+    color: $fg;
+    padding: 10px;
+    font-family: "MesloLGS NF";
 
-  /* font-family: Iosevka Nerd Font; */
-  font-size: 70px;
-  border-radius: 30px;
-  border: 2px solid $contrast-bg;
+    /* font-family: Iosevka Nerd Font; */
+    font-size: 70px;
+    border-radius: 30px;
+    border: 2px solid $contrast-bg;
 
-  label {
-    min-width: 140px;
-    min-height: 130px;
-  }
-
-  .button {
-    margin: 5px 10px;
-    border-radius: 12px;
-    min-width: 80px;
-    transition: all ease .2s;
-    &:hover { background-color: $bg-secondary; }
-    &:active { background-color: $bg-secondary; }
-
-    .content {
-      border-radius: 4px;
-      padding: 0 15px;
+    label {
+        min-width: 140px;
+        min-height: 130px;
+    }
+
+    .button {
+        margin: 5px 10px;
+        border-radius: 12px;
+        min-width: 80px;
+        transition: all ease .2s;
+
+        &:hover {
+            background-color: $bg-secondary;
+        }
+
+        &:active {
+            background-color: $bg-secondary;
+        }
+
+        .content {
+            border-radius: 4px;
+            padding: 0 15px;
+        }
+    }
+
+    .shutdown {
+        color: $red;
+    }
+
+    .reboot {
+        color: $magenta;
+    }
+
+    .logout {
+        color: $yellow;
     }
-  }
-  .shutdown { color: $red; }
-  .reboot { color: $magenta; }
-  .logout { color: $yellow; }
 }
 
 .powermenu-clickhandler {
-  background-color: black;
+    background-color: black;
 }
diff --git a/modules/ags/config/scss/wim-widgets/quick-settings.scss b/modules/ags/config/scss/wim-widgets/quick-settings.scss
index 44c86781..22a7386b 100644
--- a/modules/ags/config/scss/wim-widgets/quick-settings.scss
+++ b/modules/ags/config/scss/wim-widgets/quick-settings.scss
@@ -1,182 +1,184 @@
 .quick-settings {
-  font-size: 30px;
-  min-width: 500px;
-  padding: 0;
-  background-color: $bg;
-  border-radius: 30px 0 30px 30px;
-  border: 2px solid $contrast-bg;
+    font-size: 30px;
+    min-width: 500px;
+    padding: 0;
+    background-color: $bg;
+    border-radius: 30px 0 30px 30px;
+    border: 2px solid $contrast-bg;
 }
 
 .title {
-  font-size: 22px;
-  margin-top: 30px;
+    font-size: 22px;
+    margin-top: 30px;
 }
 
 .grid-label {
-  font-size: 30px;
-  margin-left: 15px;
-  margin-right: 10px;
-  min-width: 50px;
+    font-size: 30px;
+    margin-left: 15px;
+    margin-right: 10px;
+    min-width: 50px;
 }
 
 .scrolled-indicator {
-  margin: 5px 0;
+    margin: 5px 0;
 }
 
 .menu {
-  margin: 10px;
-  padding: 0;
-  border: 1.5px solid $contrast-bg;
-  border-radius: 10px;
-  font-size: 12px;
-
-  scrolledwindow {
-    padding: 3px;
-  }
-
-  row {
+    margin: 10px;
     padding: 0;
-    margin: 0;
-  }
+    border: 1.5px solid $contrast-bg;
+    border-radius: 10px;
+    font-size: 12px;
 
-  .menu-item {
-    margin: 5px;
-
-    label {
-      font-size: 16px;
-      margin-left: 5px;
+    scrolledwindow {
+        padding: 3px;
     }
 
-    image {
-      font-size: 20px;
+    row {
+        padding: 0;
+        margin: 0;
+    }
+
+    .menu-item {
+        margin: 5px;
+
+        label {
+            font-size: 16px;
+            margin-left: 5px;
+        }
+
+        image {
+            font-size: 20px;
+        }
     }
-  }
 }
 
 .sub-label {
-  font-size: 14px;
-  padding: 3px;
-  border: 2px solid $contrast-bg;
-  border-radius: 10px 20px 20px 10px;
-  min-width: 106px;
-  background: #1b1b1b;
-  margin-top: 5px;
+    font-size: 14px;
+    padding: 3px;
+    border: 2px solid $contrast-bg;
+    border-radius: 10px 20px 20px 10px;
+    min-width: 106px;
+    background: #1b1b1b;
+    margin-top: 5px;
 }
 
 .grid-chev {
-  margin-left: 10px;
-  margin-right: 12px;
-  font-size: 25px;
+    margin-left: 10px;
+    margin-right: 12px;
+    font-size: 25px;
 
-  transition: -gtk-icon-transform 0.3s ease-in-out;
+    transition: -gtk-icon-transform 0.3s ease-in-out;
 }
 
 .button-grid {
-  font-size: 10px;
-  min-width: 440px;
-  background-color: $bgfull;
-  border-top: 2px solid $contrast-bg;
-  border-bottom: 2px solid $contrast-bg;
-  border-radius: 15px;
-  padding: 10px 15px;
+    font-size: 10px;
+    min-width: 440px;
+    background-color: $bgfull;
+    border-top: 2px solid $contrast-bg;
+    border-bottom: 2px solid $contrast-bg;
+    border-radius: 15px;
+    padding: 10px 15px;
 }
 
 .grid-button {
-  min-height: 65px;
-  min-width: 70px;
+    min-height: 65px;
+    min-width: 70px;
 }
 
 .left-part {
-  background: #1b1b1b;
-  border-top-left-radius: 15px;
-  border-bottom-left-radius: 15px;
-  border-left: 2px solid $contrast-bg;
-  border-top: 2px solid $contrast-bg;
-  border-bottom: 2px solid $contrast-bg;
-  transition: all 0.5s ease-in-out;
+    background: #1b1b1b;
+    border-top-left-radius: 15px;
+    border-bottom-left-radius: 15px;
+    border-left: 2px solid $contrast-bg;
+    border-top: 2px solid $contrast-bg;
+    border-bottom: 2px solid $contrast-bg;
+    transition: all 0.5s ease-in-out;
 }
 
 .right-part {
-  background: #1b1b1b;
-  border-top-right-radius: 30px;
-  border-bottom-right-radius: 30px;
-  border-right: 2px solid $contrast-bg;
-  border-top: 2px solid $contrast-bg;
-  border-bottom: 2px solid $contrast-bg;
-  transition: all 0.5s ease-in-out;
+    background: #1b1b1b;
+    border-top-right-radius: 30px;
+    border-bottom-right-radius: 30px;
+    border-right: 2px solid $contrast-bg;
+    border-top: 2px solid $contrast-bg;
+    border-bottom: 2px solid $contrast-bg;
+    transition: all 0.5s ease-in-out;
 }
 
-.right-part:hover, .right-part:active {
-  color: $contrast-bg;
-  border: 2px solid $contrast-bg;
-  border-top-left-radius: 7px;
-  border-bottom-left-radius: 7px;
-  transition: all 0.5s ease-in-out;
+.right-part:hover,
+.right-part:active {
+    color: $contrast-bg;
+    border: 2px solid $contrast-bg;
+    border-top-left-radius: 7px;
+    border-bottom-left-radius: 7px;
+    transition: all 0.5s ease-in-out;
 }
 
-.left-part:hover, .left-part:active {
-  color: $contrast-bg;
-  border: 2px solid $contrast-bg;
-  border-top-right-radius: 7px;
-  border-bottom-right-radius: 7px;
-  transition: all 0.5s ease-in-out;
+.left-part:hover,
+.left-part:active {
+    color: $contrast-bg;
+    border: 2px solid $contrast-bg;
+    border-top-right-radius: 7px;
+    border-bottom-right-radius: 7px;
+    transition: all 0.5s ease-in-out;
 }
 
 .player {
-  margin-top: 6px;
-  min-height: 220px;
-  opacity: 0;
+    margin-top: 6px;
+    min-height: 220px;
+    opacity: 0;
 }
 
 .slider-box {
-  min-height: 100px;
-  min-width: 470px;
-  background-color: $bgfull;
-  border-top: 2px solid $contrast-bg;
-  border-bottom: 2px solid $contrast-bg;
-  border-radius: 15px;
-  margin-top: 30px;
-  margin-bottom: 20px;
+    min-height: 100px;
+    min-width: 470px;
+    background-color: $bgfull;
+    border-top: 2px solid $contrast-bg;
+    border-bottom: 2px solid $contrast-bg;
+    border-radius: 15px;
+    margin-top: 30px;
+    margin-bottom: 20px;
 
-  .slider-label {
-    font-size: 30px;
-    min-width: 40px;
-    margin-right: -20px;
-  }
-
-  .slider {
-    min-height: 55px;
-    margin-right: -15px;
-
-    scale {
-      min-width: 400px;
-      margin-left: 18px;
-      margin-right: 20px;
-
-      highlight {
-        margin: 0;
-        background-color: #79659f;
-        border-radius: 2em;
-      }
-
-      trough {
-        background-color: #363847;
-        border-radius: 2em;
-      }
-
-      slider {
-        margin: -4px;
-        min-width: 20px;
-        min-height: 20px;
-        background: #3e4153;
-        border-radius: 100%;
-        transition: background-color 0.5s ease-in-out;
-      }
-
-      slider:hover {
-        background-color: #303240;
-        transition: background-color 0.5s ease-in-out;
-      }
+    .slider-label {
+        font-size: 30px;
+        min-width: 40px;
+        margin-right: -20px;
+    }
+
+    .slider {
+        min-height: 55px;
+        margin-right: -15px;
+
+        scale {
+            min-width: 400px;
+            margin-left: 18px;
+            margin-right: 20px;
+
+            highlight {
+                margin: 0;
+                background-color: #79659f;
+                border-radius: 2em;
+            }
+
+            trough {
+                background-color: #363847;
+                border-radius: 2em;
+            }
+
+            slider {
+                margin: -4px;
+                min-width: 20px;
+                min-height: 20px;
+                background: #3e4153;
+                border-radius: 100%;
+                transition: background-color 0.5s ease-in-out;
+            }
+
+            slider:hover {
+                background-color: #303240;
+                transition: background-color 0.5s ease-in-out;
+            }
+        }
     }
-  }
 }
diff --git a/modules/ags/config/scss/wim-widgets/screenshot.scss b/modules/ags/config/scss/wim-widgets/screenshot.scss
index e0b0ffe1..b04bbcf3 100644
--- a/modules/ags/config/scss/wim-widgets/screenshot.scss
+++ b/modules/ags/config/scss/wim-widgets/screenshot.scss
@@ -1,75 +1,76 @@
 .screenshot {
-  background-color: $bg;
-  color: $fg;
-  border: 2px solid $contrast-bg;
-  border-radius: 25px;
+    background-color: $bg;
+    color: $fg;
+    border: 2px solid $contrast-bg;
+    border-radius: 25px;
 
-  label {
-    font-size: 20pt;
-  }
-
-  .header {
-    border-bottom: 2px solid $contrast-bg;
-
-    .header-btn {
-      transition: 200ms;
-
-      &:hover, &.active {
-        background-color: rgba(23, 23, 23, 0.7);
-
-        image {
-          -gtk-icon-shadow: 1px 1px $contrast-bg;
-        }
-      }
-
-      label {
-        margin: 10px;
-        font-weight: bold;
-      }
-
-      image {
-        font-size: 30px;
-      }
-
-      &:first-child {
-        border-top-left-radius: 25px;
-      }
-
-      &:last-child {
-        border-top-right-radius: 25px;
-      }
+    label {
+        font-size: 20pt;
     }
-  }
 
-  scrolledwindow {
-    min-height: 400px;
-    min-width: 800px;
-    padding: 0 10px;
+    .header {
+        border-bottom: 2px solid $contrast-bg;
 
-    box {
-      .item-btn {
-        transition: 200ms;
+        .header-btn {
+            transition: 200ms;
 
-        &:hover {
-          background-color: rgba(23, 23, 23, 0.7);
+            &:hover,
+            &.active {
+                background-color: rgba(23, 23, 23, 0.7);
+
+                image {
+                    -gtk-icon-shadow: 1px 1px $contrast-bg;
+                }
+            }
+
+            label {
+                margin: 10px;
+                font-weight: bold;
+            }
+
+            image {
+                font-size: 30px;
+            }
+
+            &:first-child {
+                border-top-left-radius: 25px;
+            }
+
+            &:last-child {
+                border-top-right-radius: 25px;
+            }
+        }
+    }
+
+    scrolledwindow {
+        min-height: 400px;
+        min-width: 800px;
+        padding: 0 10px;
+
+        box {
+            .item-btn {
+                transition: 200ms;
+
+                &:hover {
+                    background-color: rgba(23, 23, 23, 0.7);
+                }
+            }
+
+            label {
+                padding: 5px;
+            }
+
+            image {
+                font-size: 30px;
+            }
+
+            &:first-child label {
+                padding-top: 10px;
+            }
+
+            &:last-child label {
+                padding-bottom: 10px;
+            }
         }
-      }
-
-      label {
-        padding: 5px;
-      }
-
-      image {
-        font-size: 30px;
-      }
-
-      &:first-child label {
-        padding-top: 10px;
-      }
-
-      &:last-child label {
-        padding-bottom: 10px;
-      }
     }
-  }
 }
diff --git a/modules/ags/config/scss/wim-widgets/systray.scss b/modules/ags/config/scss/wim-widgets/systray.scss
index f83b83f4..6e6a1d1b 100644
--- a/modules/ags/config/scss/wim-widgets/systray.scss
+++ b/modules/ags/config/scss/wim-widgets/systray.scss
@@ -1,30 +1,33 @@
 .sys-tray {
-  padding: 5px;
-  background-color: $bg;
-  border-radius: 80px;
-  border: 2px solid $bg-secondary;
-  transition: background-color 0.5s ease-in-out,
-              border 0.5s ease-in-out;
+    padding: 5px;
+    background-color: $bg;
+    border-radius: 80px;
+    border: 2px solid $bg-secondary;
+    transition: background-color 0.5s ease-in-out,
+        border 0.5s ease-in-out;
 
-  menuitem {
-    image { color: #CBA6F7; }
-    background-color: transparent;
-    padding: 0 2px;
-    border-radius: 100%;
-    transition: all 0.5s ease-in-out;
+    menuitem {
+        image {
+            color: #CBA6F7;
+        }
 
-    &:hover {
-      border-radius: 100%;
-      transition: all 0.5s ease-in-out;
+        background-color: transparent;
+        padding: 0 2px;
+        border-radius: 100%;
+        transition: all 0.5s ease-in-out;
+
+        &:hover {
+            border-radius: 100%;
+            transition: all 0.5s ease-in-out;
+        }
+
+        * {
+            font-size: 25px;
+            border-radius: 10px;
+        }
     }
 
-    * {
-      font-size: 25px;
-      border-radius: 10px;
+    menubar {
+        background-color: transparent;
     }
-  }
-
-  menubar {
-    background-color: transparent;
-  }
 }
diff --git a/modules/ags/config/scss/wim-widgets/traybuttons.scss b/modules/ags/config/scss/wim-widgets/traybuttons.scss
index d0847db3..d418b6bc 100644
--- a/modules/ags/config/scss/wim-widgets/traybuttons.scss
+++ b/modules/ags/config/scss/wim-widgets/traybuttons.scss
@@ -1,117 +1,123 @@
 .bar {
-  margin: 5px;
+    margin: 5px;
+}
+
+.current-window {
+    color: #CBA6F7;
+    font-size: 18px;
 }
 
 .osk-toggle,
 .tablet-toggle,
 .heart-toggle {
-  font-size: 28px;
-  min-height: 40px;
-  min-width: 53px;
+    font-size: 28px;
+    min-height: 40px;
+    min-width: 53px;
 }
 
 .heart-toggle {
-  font-size: 28px;
-  min-height: 40px;
-  color: #CBA6F7;
+    font-size: 28px;
+    min-height: 40px;
+    color: #CBA6F7;
 }
 
 .notif-panel {
-  font-size: 20px;
-  min-height: 37px;
-  min-width: 105px;
+    font-size: 20px;
+    min-height: 37px;
+    min-width: 105px;
 }
 
 .quick-settings-toggle {
-  font-size: 24px;
-  min-height: 40px;
-  min-width: 40px;
-  padding-right: 4px;
-  margin-left: -3px;
+    font-size: 24px;
+    min-height: 40px;
+    min-width: 40px;
+    padding-right: 4px;
+    margin-left: -3px;
 }
 
 .toggle-off {
-  background-color: $bg;
-  color: #CBA6F7;
-  border-radius: 80px;
-  border: 2px solid $bg-secondary;
-  transition: background-color 0.5s ease-in-out,
-              border 0.5s ease-in-out;
+    background-color: $bg;
+    color: #CBA6F7;
+    border-radius: 80px;
+    border: 2px solid $bg-secondary;
+    transition: background-color 0.5s ease-in-out,
+        border 0.5s ease-in-out;
 }
 
 .toggle-on {
-  background-color: $bg;
-  color: #CBA6F7;
-  border-radius: 80px;
-  border: 2px solid $contrast-bg;
-  transition: background-color 0.5s ease-in-out,
-              border 0.5s ease-in-out;
+    background-color: $bg;
+    color: #CBA6F7;
+    border-radius: 80px;
+    border: 2px solid $contrast-bg;
+    transition: background-color 0.5s ease-in-out,
+        border 0.5s ease-in-out;
 }
 
-.toggle-on:hover, .toggle-off:hover {
-  background-color: rgba(127, 132, 156, 0.4);
-  transition: background-color 0.5s ease-in-out,
-              border 0.5s ease-in-out;
+.toggle-on:hover,
+.toggle-off:hover {
+    background-color: rgba(127, 132, 156, 0.4);
+    transition: background-color 0.5s ease-in-out,
+        border 0.5s ease-in-out;
 }
 
 .clock {
-  font-size: 20px;
-  padding: 0 15px;
+    font-size: 20px;
+    padding: 0 15px;
 }
 
 .audio,
 .bluetooth,
 .brightness,
 .keyboard {
-  padding: 0 10px;
-  font-size: 20px;
-  margin-right: -10px;
+    padding: 0 10px;
+    font-size: 20px;
+    margin-right: -10px;
 }
 
 .network {
-  padding: 0 10px;
-  font-size: 20px;
+    padding: 0 10px;
+    font-size: 20px;
 }
 
 .bg-text {
-  color: $bg;
-  font-weight: bold;
+    color: $bg;
+    font-weight: bold;
 }
 
 .battery {
-  padding: 0 10px;
-  font-size: 20px;
-
-  .battery-indicator {
-    &.charging {
-      color: green;
-    }
-
-    &.charged {
-      // TODO: charged battery style
-    }
-
-    &.low {
-      color: red;
-    }
-  }
-
-  icon {
-    .charging {
-      // TODO: charging battery style
-    }
-
-    .discharging {
-      // TODO: discharging battery style
-    }
-  }
-
-  label {
+    padding: 0 10px;
     font-size: 20px;
-  }
+
+    .battery-indicator {
+        &.charging {
+            color: green;
+        }
+
+        &.charged {
+            // TODO: charged battery style
+        }
+
+        &.low {
+            color: red;
+        }
+    }
+
+    icon {
+        .charging {
+            // TODO: charging battery style
+        }
+
+        .discharging {
+            // TODO: discharging battery style
+        }
+    }
+
+    label {
+        font-size: 20px;
+    }
 }
 
 tooltip {
-  background: rgba(0,0,0, 0.6);
-  border-radius: 5px;
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 5px;
 }
diff --git a/modules/ags/config/scss/wim-widgets/workspaces.scss b/modules/ags/config/scss/wim-widgets/workspaces.scss
index 9ca79a26..f897c8b6 100644
--- a/modules/ags/config/scss/wim-widgets/workspaces.scss
+++ b/modules/ags/config/scss/wim-widgets/workspaces.scss
@@ -1,34 +1,34 @@
 .bar {
-  .workspaces {
-    background-color: $bg;
-    border-radius: 80px;
-    border: 2px solid $bg-secondary;
-    padding: 3px 12px;
-  }
+    .workspaces {
+        background-color: $bg;
+        border-radius: 80px;
+        border: 2px solid $bg-secondary;
+        padding: 3px 12px;
+    }
 
 
-  .button {
-    margin: 0 2.5px;
-    min-height: 22px;
-    min-width: 22px;
-    border-radius: 100%;
-    border: 2px solid transparent;
-  }
+    .button {
+        margin: 0 2.5px;
+        min-height: 22px;
+        min-width: 22px;
+        border-radius: 100%;
+        border: 2px solid transparent;
+    }
 
-  .occupied {
-    border: 2px solid $bg;
-    background: $contrast-bg;
-    transition: background-color 0.6s ease-in-out;
-  }
+    .occupied {
+        border: 2px solid $bg;
+        background: $contrast-bg;
+        transition: background-color 0.6s ease-in-out;
+    }
 
-  .urgent {
-    border: 2px solid $bg;
-    background: red;
-    transition: background-color 0.6s ease-in-out;
-  }
+    .urgent {
+        border: 2px solid $bg;
+        background: red;
+        transition: background-color 0.6s ease-in-out;
+    }
 
-  .active {
-    border: 2px solid #50fa7b;
-    transition: margin-left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
+    .active {
+        border: 2px solid #50fa7b;
+        transition: margin-left 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+    }
 }
diff --git a/modules/ags/config/scss/wim.scss b/modules/ags/config/scss/wim.scss
index 4de87ac5..94fc2001 100644
--- a/modules/ags/config/scss/wim.scss
+++ b/modules/ags/config/scss/wim.scss
@@ -5,7 +5,7 @@ box,
 progressbar,
 trough,
 undershoot {
-  all: unset;
+    all: unset;
 }
 
 @import './common';
diff --git a/modules/ags/config/ts/bar/binto.ts b/modules/ags/config/ts/bar/binto.ts
index d96171b2..d7e376b8 100644
--- a/modules/ags/config/ts/bar/binto.ts
+++ b/modules/ags/config/ts/bar/binto.ts
@@ -5,7 +5,7 @@ import { get_gdkmonitor_from_desc } from '../lib.ts';
 
 import BarRevealer from './fullscreen.ts';
 
-import Clock from './items/clock.ts';
+import Clock from './items/cal-opener.ts';
 import CurrentWindow from './items/current-window';
 import NotifButton from './items/notif-button.ts';
 import SysTray from './items/systray.ts';
diff --git a/modules/ags/config/ts/bar/items/current-window.ts b/modules/ags/config/ts/bar/items/current-window.ts
index 56dbb105..3ce5bfd8 100644
--- a/modules/ags/config/ts/bar/items/current-window.ts
+++ b/modules/ags/config/ts/bar/items/current-window.ts
@@ -24,7 +24,6 @@ export default () => Box({
         Separator(SPACING),
 
         Label({
-            css: 'color: #CBA6F7; font-size: 18px',
             truncate: 'end',
             label: Hyprland.active.client.bind('title'),
         }),
diff --git a/modules/ags/config/ts/date/binto.ts b/modules/ags/config/ts/date/binto.ts
new file mode 100644
index 00000000..484bf8c8
--- /dev/null
+++ b/modules/ags/config/ts/date/binto.ts
@@ -0,0 +1,14 @@
+import PopupWindow from '../misc/popup.ts';
+import CalendarWidget from './main.ts';
+import { get_gdkmonitor_from_desc } from '../lib.ts';
+
+
+export default () => PopupWindow({
+    name: 'calendar',
+    anchor: ['bottom', 'right'],
+    margins: [0, 20, 0, 0],
+    transition: 'slide bottom',
+    gdkmonitor: get_gdkmonitor_from_desc('desc:Acer Technologies Acer K212HQL T3EAA0014201'),
+
+    child: CalendarWidget(),
+});
diff --git a/modules/ags/config/ts/date.ts b/modules/ags/config/ts/date/main.ts
similarity index 86%
rename from modules/ags/config/ts/date.ts
rename to modules/ags/config/ts/date/main.ts
index 10c5da7d..4d8efbde 100644
--- a/modules/ags/config/ts/date.ts
+++ b/modules/ags/config/ts/date/main.ts
@@ -2,8 +2,6 @@ const { Box, Calendar, Label } = Widget;
 
 const { new_now_local } = imports.gi.GLib.DateTime;
 
-import PopupWindow from './misc/popup.ts';
-
 
 const Divider = () => Box({
     class_name: 'divider',
@@ -83,20 +81,12 @@ const CalendarWidget = () => Box({
     }),
 });
 
-const TOP_MARGIN = 6;
+export default () => Box({
+    class_name: 'date',
+    vertical: true,
 
-export default () => PopupWindow({
-    name: 'calendar',
-    anchor: ['top'],
-    margins: [TOP_MARGIN, 0, 0, 0],
-
-    child: Box({
-        class_name: 'date',
-        vertical: true,
-
-        children: [
-            Time(),
-            CalendarWidget(),
-        ],
-    }),
+    children: [
+        Time(),
+        CalendarWidget(),
+    ],
 });
diff --git a/modules/ags/config/ts/date/wim.ts b/modules/ags/config/ts/date/wim.ts
new file mode 100644
index 00000000..6a2ecc59
--- /dev/null
+++ b/modules/ags/config/ts/date/wim.ts
@@ -0,0 +1,12 @@
+import PopupWindow from '../misc/popup.ts';
+import CalendarWidget from './main.ts';
+
+const TOP_MARGIN = 6;
+
+export default () => PopupWindow({
+    name: 'calendar',
+    anchor: ['top'],
+    margins: [TOP_MARGIN, 0, 0, 0],
+
+    child: CalendarWidget(),
+});
diff --git a/modules/ags/config/wim.ts b/modules/ags/config/wim.ts
index a19247d1..a7a9770d 100644
--- a/modules/ags/config/wim.ts
+++ b/modules/ags/config/wim.ts
@@ -2,7 +2,7 @@ import Setup from './ts/setup.ts';
 import AppLauncher from './ts/applauncher/main.ts';
 import Bar from './ts/bar/wim.ts';
 import BgFade from './ts/misc/background-fade.ts';
-import Calendar from './ts/date.ts';
+import Calendar from './ts/date/wim.ts';
 import Clipboard from './ts/clipboard/main.ts';
 import Corners from './ts/corners/main.ts';
 import { NotifPopups, NotifCenter } from './ts/notifications/wim.ts';