From 5e437618759c6d5740028cc136996da044ea667a Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Sun, 31 Dec 2023 01:12:29 +0700
Subject: [PATCH] ags: sync

---
 .config/ags/config.js                         |   35 +-
 .config/ags/data/keyboardlayouts.js           |    2 +-
 .config/ags/data/sourceviewtheme.xml          |    2 +-
 .config/ags/lib/advancedrevealers.js          |   81 ++
 .config/ags/lib/configwidgets.js              |   86 +-
 .config/ags/lib/doublerevealer.js             |   24 -
 .config/ags/lib/md2pango.js                   |   19 +-
 .config/ags/lib/notification.js               |  316 +++--
 .config/ags/lib/popupwindow.js                |   12 +-
 .config/ags/lib/statusicons.js                |   82 +-
 .../generate_colors_material.py               |    7 +-
 .config/ags/scripts/record-script.sh          |    8 +-
 .../scripts/templates/gradience/preset.json   |   30 +-
 .../ags/scripts/templates/hypr/colors.conf    |    5 +-
 .config/ags/scss/_bar.scss                    |  260 ++--
 .config/ags/scss/_colors.scss                 |   82 +-
 .config/ags/scss/_common.scss                 |   71 +-
 .config/ags/scss/_lib_classes.scss            |  108 +-
 .config/ags/scss/_lib_mixins.scss             |   13 +
 .config/ags/scss/_material.scss               |   46 +-
 .config/ags/scss/_music.scss                  |   11 +-
 .config/ags/scss/_musicmaterial.scss          |   30 +-
 .config/ags/scss/_musicwal.scss               |   25 +
 .config/ags/scss/_notifications.scss          |   76 +-
 .config/ags/scss/_osd.scss                    |   16 +-
 .config/ags/scss/_overview.scss               |    4 +
 .config/ags/scss/_sidebars.scss               |   65 +-
 .config/ags/scss/main.scss                    |    6 +
 .config/ags/services/chatgpt.js               |    6 +
 .config/ags/services/waifus.js                |  170 +++
 .config/ags/style.css                         | 1143 ++++++++++-------
 .config/ags/widgets/bar/leftspace.js          |   12 +-
 .config/ags/widgets/bar/main.js               |   10 +-
 .config/ags/widgets/bar/music.js              |    6 +-
 .config/ags/widgets/bar/rightspace.js         |    4 +-
 .config/ags/widgets/bar/system.js             |  233 ++--
 .config/ags/widgets/bar/tray.js               |   21 +-
 .config/ags/widgets/bar/workspaces.js         |  249 ++--
 .config/ags/widgets/cheatsheet/main.js        |    2 +-
 .../ags/widgets/desktopbackground/system.js   |   10 +-
 .../desktopbackground/timeandlaunches.js      |   14 +-
 .config/ags/widgets/dock/dock.js              |   48 +-
 .config/ags/widgets/indicators/colorscheme.js |    8 +-
 .../ags/widgets/indicators/indicatorvalues.js |   25 +-
 .config/ags/widgets/indicators/main.js        |    3 +
 .../ags/widgets/indicators/musiccontrols.js   |   16 +-
 .../widgets/indicators/notificationpopups.js  |   20 +-
 .../onscreenkeyboard/onscreenkeyboard.js      |    4 +-
 .config/ags/widgets/overview/main.js          |    2 +-
 .config/ags/widgets/overview/overview.js      |   45 +-
 .config/ags/widgets/screencorners/main.js     |    4 +-
 .config/ags/widgets/sideleft/apis/chatgpt.js  |  158 ++-
 .../sideleft/apis/chatgpt_chatmessage.js      |   29 +-
 .config/ags/widgets/sideleft/apis/waifu.js    |   72 ++
 .config/ags/widgets/sideleft/apiwidgets.js    |   60 +-
 .config/ags/widgets/sideleft/main.js          |    1 +
 .config/ags/widgets/sideleft/module.js        |    3 +
 .config/ags/widgets/sideleft/quickscripts.js  |    1 -
 .config/ags/widgets/sideleft/sideleft.js      |  190 ++-
 .config/ags/widgets/sideright/calendar.js     |   10 +-
 .config/ags/widgets/sideright/quicktoggles.js |   40 +-
 .config/ags/widgets/sideright/sideright.js    |   15 +-
 62 files changed, 2688 insertions(+), 1468 deletions(-)
 create mode 100644 .config/ags/lib/advancedrevealers.js
 delete mode 100644 .config/ags/lib/doublerevealer.js
 create mode 100644 .config/ags/services/waifus.js
 create mode 100644 .config/ags/widgets/sideleft/apis/waifu.js

diff --git a/.config/ags/config.js b/.config/ags/config.js
index d5614b7d0..25df63fbc 100644
--- a/.config/ags/config.js
+++ b/.config/ags/config.js
@@ -1,12 +1,11 @@
 "strict mode";
 // Import
 import { App, Utils } from './imports.js';
-import { firstRunWelcome } from './services/messages.js';
 // Widgets
 import Bar from './widgets/bar/main.js';
 import Cheatsheet from './widgets/cheatsheet/main.js';
-import DesktopBackground from './widgets/desktopbackground/main.js';
-import Dock from './widgets/dock/main.js';
+// import DesktopBackground from './widgets/desktopbackground/main.js';
+// import Dock from './widgets/dock/main.js';
 import { CornerTopleft, CornerTopright, CornerBottomleft, CornerBottomright } from './widgets/screencorners/main.js';
 import Indicator from './widgets/indicators/main.js';
 import Osk from './widgets/onscreenkeyboard/main.js';
@@ -15,18 +14,20 @@ import Session from './widgets/session/main.js';
 import SideLeft from './widgets/sideleft/main.js';
 import SideRight from './widgets/sideright/main.js';
 
-// Longer than actual anim time (see styles) to make sure widgets animate fully
-const CLOSE_ANIM_TIME = 210;
+const CLOSE_ANIM_TIME = 210; // Longer than actual anim time (see styles) to make sure widgets animate fully
 
-// Init cache and check first run
+// Init cache
 Utils.exec(`bash -c 'mkdir -p ~/.cache/ags/user/colorschemes'`);
-
 // SCSS compilation
 Utils.exec(`bash -c 'echo "" > ${App.configDir}/scss/_musicwal.scss'`); // reset music styles
 Utils.exec(`bash -c 'echo "" > ${App.configDir}/scss/_musicmaterial.scss'`); // reset music styles
-Utils.exec(`sassc ${App.configDir}/scss/main.scss ${App.configDir}/style.css`);
-App.resetCss();
-App.applyCss(`${App.configDir}/style.css`);
+function applyStyle() {
+    Utils.exec(`sassc ${App.configDir}/scss/main.scss ${App.configDir}/style.css`);
+    App.resetCss();
+    App.applyCss(`${App.configDir}/style.css`);
+    console.log('[LOG] Styles loaded')
+}
+applyStyle();
 
 // Config object
 export default {
@@ -38,13 +39,12 @@ export default {
         'osk': CLOSE_ANIM_TIME,
     },
     windows: [
-        // Bar() is below
         CornerTopleft(),
         CornerTopright(),
         CornerBottomleft(),
         CornerBottomright(),
-        DesktopBackground(),
-        Dock(), // Buggy
+        // DesktopBackground(),
+        // Dock(), // Buggy
         Overview(),
         Indicator(),
         Cheatsheet(),
@@ -52,13 +52,6 @@ export default {
         SideRight(),
         Osk(), // On-screen keyboard
         Session(), // Power menu, if that's what you like to call it
+        Bar(),
     ],
 };
-
-// We don't want context menus of the bar's tray go under the rounded corner below,
-// So bar is returned after 1ms, making it get spawned after the corner
-// And having an Utils.timeout in that window array just gives an error
-// Not having it in default export is fine since we don't need to toggle it
-Bar(); 
-
-// uwu
\ No newline at end of file
diff --git a/.config/ags/data/keyboardlayouts.js b/.config/ags/data/keyboardlayouts.js
index f58e378a4..26cb23d63 100644
--- a/.config/ags/data/keyboardlayouts.js
+++ b/.config/ags/data/keyboardlayouts.js
@@ -111,4 +111,4 @@ export const oskLayouts = {
             ]
         ]
     }
-}
\ No newline at end of file
+}
diff --git a/.config/ags/data/sourceviewtheme.xml b/.config/ags/data/sourceviewtheme.xml
index cecf966b8..61b3324d1 100644
--- a/.config/ags/data/sourceviewtheme.xml
+++ b/.config/ags/data/sourceviewtheme.xml
@@ -29,7 +29,7 @@
   <style name="current-line"                background="#3E3D32"/>
   <style name="current-line-number"         background="#eeeeec"/>
   <style name="draw-spaces"                 foreground="#babdb6"/>
-  <style name="background-pattern"          background="#rgba(0,0,0,0)"/>
+  <style name="background-pattern"          background="#000000"/>
 
   <!-- Bracket Matching -->
   <!-- <style name="bracket-match"               foreground="white" background="grey"/> -->
diff --git a/.config/ags/lib/advancedrevealers.js b/.config/ags/lib/advancedrevealers.js
new file mode 100644
index 000000000..cab2d4ca6
--- /dev/null
+++ b/.config/ags/lib/advancedrevealers.js
@@ -0,0 +1,81 @@
+const { Gdk, Gtk } = imports.gi;
+import { App, SCREEN_WIDTH, SCREEN_HEIGHT, Service, Utils, Variable, Widget } from '../imports.js';
+const { Box, Button, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
+
+export const MarginRevealer = ({
+    transition = 'slide_down',
+    child,
+    revealChild,
+    showClass = 'element-show', // These are for animation curve, they don't really hide
+    hideClass = 'element-hide', // Don't put margins in these classes!
+    extraProperties = [],
+    ...rest
+}) => {
+    const widget = Scrollable({
+        ...rest,
+        css: `min-height: 0px;`,
+        properties: [
+            ['revealChild', true], // It'll be set to false after init if it's supposed to hide
+            ['transition', transition],
+            ['show', (self) => {
+                if (self._revealChild) return;
+                self.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.NEVER);
+                child.toggleClassName(hideClass, false);
+                child.toggleClassName(showClass, true);
+                self._revealChild = true;
+                child.css = 'margin: 0px;';
+            }],
+            ['hide', (self) => {
+                if (!self._revealChild) return;
+                child.toggleClassName(hideClass, true);
+                child.toggleClassName(showClass, false);
+                self._revealChild = false;
+                if (self._transition == 'slide_left')
+                    child.css = `margin-right: -${child.get_allocated_width()}px;`;
+                else if (self._transition == 'slide_right')
+                    child.css = `margin-left: -${child.get_allocated_width()}px;`;
+                else if (self._transition == 'slide_up')
+                    child.css = `margin-bottom: -${child.get_allocated_height()}px;`;
+                else if (self._transition == 'slide_down')
+                    child.css = `margin-top: -${child.get_allocated_height()}px;`;
+            }],
+            ['toggle', (self) => {
+                console.log('toggle');
+                if (self._revealChild) self._hide(self);
+                else self._show(self);
+            }],
+            ...extraProperties,
+        ],
+        setup: (self) => {
+            if (!revealChild)
+                self.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS);
+            else
+                self.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.NEVER);
+            self.child = child;
+        },
+    });
+    child.toggleClassName(`${revealChild ? showClass : hideClass}`, true);
+    return widget;
+}
+
+// TODO: Allow reveal update. Currently this just helps at declaration
+export const DoubleRevealer = ({
+    transition1 = 'slide_right',
+    transition2 = 'slide_left',
+    duration1 = 150,
+    duration2 = 150,
+    child,
+    revealChild,
+}) => {
+    return Revealer({
+        transition: transition1,
+        transitionDuration: duration1,
+        revealChild: revealChild,
+        child: Revealer({
+            transition: transition2,
+            transitionDuration: duration2,
+            revealChild: revealChild,
+            child: child,
+        })
+    })
+}
diff --git a/.config/ags/lib/configwidgets.js b/.config/ags/lib/configwidgets.js
index c152d8b9d..c9cde2982 100644
--- a/.config/ags/lib/configwidgets.js
+++ b/.config/ags/lib/configwidgets.js
@@ -4,7 +4,7 @@ import { MaterialIcon } from './materialicon.js';
 import { setupCursorHover } from './cursorhover.js';
 const { Box, Button, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
 
-export const ConfigToggle = ({ icon, name, desc = '', initValue, onChange, ...props }) => {
+export const ConfigToggle = ({ icon, name, desc = '', initValue, onChange, ...rest }) => {
     let value = initValue;
     const toggleIcon = Label({
         className: `icon-material txt-bold ${value ? '' : 'txt-poof'}`,
@@ -37,25 +37,87 @@ export const ConfigToggle = ({ icon, name, desc = '', initValue, onChange, ...pr
         ]
     });
     const interactionWrapper = Button({
-        ...props,
         child: widgetContent,
-        setup: setupCursorHover,
         onClicked: () => { // mouse up/kb press
             value = !value;
             toggleIcon.toggleClassName('switch-fg-toggling-false', false);
-            toggleIcon.label = `${value ? 'check' : ''}`;
-            toggleIcon.toggleClassName('txt-poof', !value);
+            if (!value) {
+                toggleIcon.label = '';
+                toggleIcon.toggleClassName('txt-poof', true);
+            }
             toggleButtonIndicator.toggleClassName('switch-fg-true', value);
             toggleButton.toggleClassName('switch-bg-true', value);
+            if(value) Utils.timeout(1, () => {
+                toggleIcon.label = 'check';
+                toggleIcon.toggleClassName('txt-poof', false);
+            })
             onChange(interactionWrapper, value);
         },
         setup: (button) => {
-            button.connect('pressed', () => { // mouse down
-                toggleIcon.toggleClassName('txt-poof', true);
-                toggleIcon.toggleClassName('switch-fg-true', false);
-                if(!value) toggleIcon.toggleClassName('switch-fg-toggling-false', true);
-            });
-        }
+            setupCursorHover(button),
+                button.connect('pressed', () => { // mouse down
+                    toggleIcon.toggleClassName('txt-poof', true);
+                    toggleIcon.toggleClassName('switch-fg-true', false);
+                    if (!value) toggleIcon.toggleClassName('switch-fg-toggling-false', true);
+                });
+        },
+        ...rest,
     });
     return interactionWrapper;
-}
\ No newline at end of file
+}
+
+export const ConfigSegmentedSelection = ({
+    icon, name, desc = '',
+    options = [{ name: 'Option 1', value: 0 }, { name: 'Option 2', value: 1 }],
+    initIndex = 0,
+    onChange,
+    ...rest
+}) => {
+    let lastSelected = initIndex;
+    let value = options[initIndex].value;
+    const widget = Box({
+        tooltipText: desc,
+        className: 'segment-container',
+        // homogeneous: true,
+        children: options.map((option, id) => {
+            const selectedIcon = Revealer({
+                revealChild: id == initIndex,
+                transition: 'slide_right',
+                transitionDuration: 150,
+                child: MaterialIcon('check', 'norm')
+            });
+            return Button({
+                setup: setupCursorHover,
+                className: `segment-btn ${id == initIndex ? 'segment-btn-enabled' : ''}`,
+                child: Box({
+                    hpack: 'center',
+                    className: 'spacing-h-5',
+                    children: [
+                        selectedIcon,
+                        Label({
+                            label: option.name,
+                        })
+                    ]
+                }),
+                onClicked: (self) => {
+                    value = option.value;
+                    const kids = widget.get_children();
+                    kids[lastSelected].toggleClassName('segment-btn-enabled', false);
+                    kids[lastSelected].get_children()[0].get_children()[0].revealChild = false;
+                    lastSelected = id;
+                    self.toggleClassName('segment-btn-enabled', true);
+                    selectedIcon.revealChild = true;
+                    onChange(option.value, option.name);
+                }
+            })
+        }),
+        ...rest,
+    });
+    return widget;
+
+}
+
+export const ConfigGap = ({ vertical = true, size = 5, ...rest }) => Box({
+    className: `gap-${vertical ? 'v' : 'h'}-${size}`,
+    ...rest,
+})
\ No newline at end of file
diff --git a/.config/ags/lib/doublerevealer.js b/.config/ags/lib/doublerevealer.js
deleted file mode 100644
index fe2855dc4..000000000
--- a/.config/ags/lib/doublerevealer.js
+++ /dev/null
@@ -1,24 +0,0 @@
-const { Gdk, Gtk } = imports.gi;
-import { App, Service, Utils, Variable, Widget } from '../imports.js';
-
-// TODO: Allow reveal update. Currently this just helps at declaration
-export const DoubleRevealer = ({
-    transition1 = 'slide_right',
-    transition2 = 'slide_left',
-    duration1 = 150,
-    duration2 = 150,
-    child,
-    revealChild,
-}) => {
-    return Widget.Revealer({
-        transition: transition1,
-        transitionDuration: duration1,
-        revealChild: revealChild,
-        child: Widget.Revealer({
-            transition: transition2,
-            transitionDuration: duration2,
-            revealChild: revealChild,
-            child: child,
-        })
-    })
-}
\ No newline at end of file
diff --git a/.config/ags/lib/md2pango.js b/.config/ags/lib/md2pango.js
index 828be71fd..e14a5cb60 100644
--- a/.config/ags/lib/md2pango.js
+++ b/.config/ags/lib/md2pango.js
@@ -12,12 +12,11 @@ let sub_h1, sub_h2, sub_h3, sub_h4, sub_h5
 // m2p_sections defines how to detect special markdown sections.
 // These expressions scan the full line to detect headings, lists, and code.
 const m2p_sections = [
-    //                                             h1 is actually 210% on github, but it's unecessary large imo
-    sub_h1 = { name: H1, re: /^(#\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='150%'>$2</span>" },
-    sub_h2 = { name: H2, re: /^(##\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='125%'>$2</span>" },
-    sub_h3 = { name: H3, re: /^(###\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='100%'>$2</span>" },
-    sub_h4 = { name: H4, re: /^(####\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='90%'>$2</span>" },
-    sub_h5 = { name: H5, re: /^(#####\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='80%'>$2</span>" },
+    sub_h1 = { name: H1, re: /^(#\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='170%'>$2</span>" },
+    sub_h2 = { name: H2, re: /^(##\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='150%'>$2</span>" },
+    sub_h3 = { name: H3, re: /^(###\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='125%'>$2</span>" },
+    sub_h4 = { name: H4, re: /^(####\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='100%'>$2</span>" },
+    sub_h5 = { name: H5, re: /^(#####\s+)(.*)(\s*)$/, sub: "<span font_weight='bold' size='90%'>$2</span>" },
     { name: BULLET, re: /^(\s*)([\*\-]\s)(.*)(\s*)$/, sub: "$1• $3" },
     { name: NUMBERING, re: /^(\s*[0-9]+\.\s)(.*)(\s*)$/, sub: " $1$2" },
 ]
@@ -29,7 +28,7 @@ const m2p_styles = [
     { name: EMPH, re: /\*(\S.*?\S)\*/g, sub: "<i>$1</i>" },
     // { name: EMPH, re: /_(\S.*?\S)_/g, sub: "<i>$1</i>" },
     { name: HEXCOLOR, re: /#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})/g, sub: `<span bgcolor='#$1' fgcolor='#000000' font_family='${monospaceFonts}'> #$1 </span>` },
-    { name: INLCODE, re: /(`)([^`]*)(`)/g, sub: `<span font_weight='bold' font_family='${monospaceFonts}' bgcolor='#000000' fgcolor='#ffffff'> $2 </span>` },
+    { name: INLCODE, re: /(`)([^`]*)(`)/g, sub: `<span font_weight='bold' font_family='${monospaceFonts}'> $2 </span>` },
     // { name: UND, re: /(__|\*\*)(\S[\s\S]*?\S)(__|\*\*)/g, sub: "<u>$2</u>" },
 ]
 
@@ -226,7 +225,11 @@ if (__is_nodejs_main) {
         console.log(`Usage: ${process.argv[1]} FILE [FILE...]`)
         process.exit(0)
     }
-    args.forEach((f) => process.stdout.write(convert(readFile(f))))
+    for (let i = 0; i < args.length; i++) {
+        const f = args[i];
+        process.stdout.write(convert(readFile(f)));
+    }
+
 }
 
 export const markdownTest = `# Heading 1
diff --git a/.config/ags/lib/notification.js b/.config/ags/lib/notification.js
index a7decbcf2..e3adcc62c 100644
--- a/.config/ags/lib/notification.js
+++ b/.config/ags/lib/notification.js
@@ -7,6 +7,7 @@ const { Box, EventBox, Icon, Overlay, Label, Button, Revealer } = Widget;
 import { MaterialIcon } from "./materialicon.js";
 import { setupCursorHover } from "./cursorhover.js";
 import { AnimatedCircProg } from "./animatedcircularprogress.js";
+import { MarginRevealer } from './advancedrevealers.js';
 
 function guessMessageType(summary) {
     if (summary.includes('recording')) return 'screen_record';
@@ -43,21 +44,20 @@ const NotificationIcon = (notifObject) => {
         icon = notifObject.appEntry;
 
     return Box({
-        valign: Gtk.Align.CENTER,
+        vpack: 'center',
         hexpand: false,
         className: `notif-icon notif-icon-material-${notifObject.urgency}`,
         homogeneous: true,
         children: [
             (icon != 'NO_ICON' ?
                 Icon({
+                    vpack: 'center',
                     icon: icon,
-                    halign: Gtk.Align.CENTER, hexpand: true,
-                    valign: Gtk.Align.CENTER,
                     setup: (self) => Utils.timeout(1, () => {
                         const styleContext = self.get_parent().get_style_context();
                         const width = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
                         const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
-                        self.size = Math.max(width * 0.9, height * 0.9, 1); // im too lazy to add another box lol
+                        self.size = Math.max(width * 0.7, height * 0.7, 1); // im too lazy to add another box lol
                     }),
                 })
                 :
@@ -81,7 +81,7 @@ export default ({
     )
     const destroyWithAnims = () => {
         widget.sensitive = false;
-        notificationBox.setCss(rightAnim1);
+        notificationBox.setCss(middleClickClose);
         Utils.timeout(200, () => {
             wholeThing.revealChild = false;
         });
@@ -125,103 +125,153 @@ export default ({
     });
 
     const display = Gdk.Display.get_default();
+    const notifTextPreview = Revealer({
+        transition: 'slide_down',
+        transitionDuration: 120,
+        revealChild: true,
+        child: Label({
+            xalign: 0,
+            className: `txt-smallie notif-body-${notifObject.urgency}`,
+            useMarkup: true,
+            xalign: 0,
+            justify: Gtk.Justification.LEFT,
+            maxWidthChars: 24,
+            truncate: 'end',
+            label: notifObject.body.split("\n")[0],
+        }),
+    });
+    const notifTextExpanded = Revealer({
+        transition: 'slide_up',
+        transitionDuration: 120,
+        revealChild: false,
+        child: Box({
+            vertical: true,
+            className: 'spacing-v-10',
+            children: [
+                Label({
+                    xalign: 0,
+                    className: `txt-smallie notif-body-${notifObject.urgency}`,
+                    useMarkup: true,
+                    xalign: 0,
+                    justify: Gtk.Justification.LEFT,
+                    maxWidthChars: 24,
+                    wrap: true,
+                    label: notifObject.body,
+                }),
+                Box({
+                    homogeneous: true,
+                    className: 'notif-actions',
+                    children: [
+                        Button({
+                            className: `notif-action notif-action-${notifObject.urgency}`,
+                            label: 'Close',
+                            onClicked: () => destroyWithAnims(),
+                        }),
+                        ...notifObject.actions.map(action => Widget.Button({
+                            className: `notif-action notif-action-${notifObject.urgency}`,
+                            onClicked: () => notifObject.invoke(action.id),
+                            label: action.label,
+                        }))
+                    ],
+                })
+            ]
+        }),
+    });
+    const notifIcon = Box({
+        vpack: 'start',
+        homogeneous: true,
+        children: [
+            Overlay({
+                child: NotificationIcon(notifObject),
+                overlays: isPopup ? [AnimatedCircProg({
+                    className: `notif-circprog-${notifObject.urgency}`,
+                    vpack: 'center', hpack: 'center',
+                    initFrom: (isPopup ? 100 : 0),
+                    initTo: 0,
+                    initAnimTime: popupTimeout,
+                })] : [],
+            }),
+        ]
+    });
+    let notifTime = '';
+    const messageTime = GLib.DateTime.new_from_unix_local(notifObject.time);
+    if (messageTime.get_day_of_year() == GLib.DateTime.new_now_local().get_day_of_year())
+        notifTime = messageTime.format('%H:%M');
+    else if (messageTime.get_day_of_year() == GLib.DateTime.new_now_local().get_day_of_year() - 1)
+        notifTime = 'Yesterday';
+    else
+        notifTime = messageTime.format('%d/%m');
+    const notifText = Box({
+        valign: Gtk.Align.CENTER,
+        vertical: true,
+        hexpand: true,
+        children: [
+            Box({
+                children: [
+                    Label({
+                        xalign: 0,
+                        className: 'txt-small txt-semibold titlefont',
+                        justify: Gtk.Justification.LEFT,
+                        hexpand: true,
+                        maxWidthChars: 24,
+                        truncate: 'end',
+                        ellipsize: 3,
+                        useMarkup: notifObject.summary.startsWith('<'),
+                        label: notifObject.summary,
+                    }),
+                    Label({
+                        vpack: 'center',
+                        justification: 'right',
+                        className: 'txt-smaller txt-semibold',
+                        label: notifTime,
+                    }),
+                ]
+            }),
+            notifTextPreview,
+            notifTextExpanded,
+        ]
+    });
+    const notifExpandButton = Button({
+        vpack: 'start',
+        className: 'notif-expand-btn',
+        onClicked: (self) => {
+            if (notifTextPreview.revealChild) { // Expanding...
+                notifTextPreview.revealChild = false;
+                notifTextExpanded.revealChild = true;
+                self.child.label = 'expand_less';
+                expanded = true;
+            }
+            else {
+                notifTextPreview.revealChild = true;
+                notifTextExpanded.revealChild = false;
+                self.child.label = 'expand_more';
+                expanded = false;
+            }
+        },
+        child: MaterialIcon('expand_more', 'norm', {
+            vpack: 'center',
+        }),
+        setup: setupCursorHover,
+    });
     const notificationContent = Box({
         ...props,
         className: `${isPopup ? 'popup-' : ''}notif-${notifObject.urgency} spacing-h-10`,
         children: [
-            NotificationIcon(notifObject),
-            Box({
-                valign: Gtk.Align.CENTER,
-                vertical: true,
-                hexpand: true,
-                children: [
-                    Box({
-                        children: [
-                            Label({
-                                xalign: 0,
-                                className: 'txt-small txt-semibold titlefont',
-                                justify: Gtk.Justification.LEFT,
-                                hexpand: true,
-                                maxWidthChars: 24,
-                                truncate: 'end',
-                                ellipsize: 3,
-                                wrap: true,
-                                useMarkup: notifObject.summary.startsWith('<'),
-                                label: notifObject.summary,
-                            }),
-                            Label({
-                                valign: Gtk.Align.CENTER,
-                                className: 'txt-smaller txt-semibold',
-                                justify: Gtk.Justification.RIGHT,
-                                setup: (label) => {
-                                    // Let's ignore how it won't work for Jan1 cuz I'm lazy
-                                    const messageTime = GLib.DateTime.new_from_unix_local(notifObject.time);
-                                    if (messageTime.get_day_of_year() == GLib.DateTime.new_now_local().get_day_of_year()) {
-                                        label.label = messageTime.format('%H:%M');
-                                    }
-                                    else if (messageTime.get_day_of_year() == GLib.DateTime.new_now_local().get_day_of_year() - 1) {
-                                        label.label = messageTime.format('Yesterday');
-                                    }
-                                    else {
-                                        label.label = messageTime.format('%d/%m');
-                                    }
-                                }
-                            }),
-                        ]
-                    }),
-                    Label({
-                        xalign: 0,
-                        className: `txt-smallie notif-body-${notifObject.urgency}`,
-                        useMarkup: true,
-                        xalign: 0,
-                        justify: Gtk.Justification.LEFT,
-                        wrap: true,
-                        label: notifObject.body,
-                    }),
-                ]
-            }),
-            Overlay({
-                child: AnimatedCircProg({
-                    className: `notif-circprog-${notifObject.urgency}`,
-                    valign: Gtk.Align.CENTER,
-                    initFrom: (isPopup ? 100 : 0),
-                    initTo: 0,
-                    initAnimTime: popupTimeout,
-                }),
-                overlays: [
-                    Button({
-                        className: 'notif-close-btn',
-                        onClicked: () => {
-                            destroyWithAnims()
-                        },
-                        child: MaterialIcon('close', 'large', {
-                            valign: Gtk.Align.CENTER,
-                        }),
-                        setup: setupCursorHover,
-                    }),
-                ]
-            }),
-
-            // what is this? i think it should be at the bottom not on the right
-            // Box({
-            //     className: 'actions',
-            //     children: actions.map(action => Button({
-            //         className: 'action-button',
-            //         onClicked: () => Notifications.invoke(id, action.id),
-            //         hexpand: true,
-            //         child: Label(action.label),
-            //     })),
-            // }),
+            notifIcon,
+            notifText,
+            notifExpandButton,
         ]
     })
 
     // Gesture stuff
-
     const gesture = Gtk.GestureDrag.new(widget);
-    var initialDir = 0;
+    var initDirX = 0;
+    var initDirVertical = -1; // -1: unset, 0: horizontal, 1: vertical
+    var expanded = false;
     // in px
     const startMargin = 0;
-    const dragThreshold = 100;
+    const MOVE_THRESHOLD = 10;
+    const DRAG_CONFIRM_THRESHOLD = 100;
     // in rem
     const maxOffset = 10.227;
     const endMargin = 20.455;
@@ -236,57 +286,83 @@ export default ({
                         margin-right: -${Number(maxOffset + endMargin)}rem;
                         opacity: 0;`;
 
+    const middleClickClose = `transition: 200ms cubic-bezier(0.85, 0, 0.15, 1);
+                              margin-left:   ${Number(maxOffset + endMargin)}rem;
+                              margin-right: -${Number(maxOffset + endMargin)}rem;
+                              opacity: 0;`;
+
     const notificationBox = Box({
-        properties: [
-            ['leftAnim1', leftAnim1],
-            ['rightAnim1', rightAnim1],
-            ['ready', false],
-        ],
+        attribute: {
+            'leftAnim1': leftAnim1,
+            'rightAnim1': rightAnim1,
+            'middleClickClose': middleClickClose,
+            'ready': false,
+        },
         homogeneous: true,
         children: [notificationContent],
-        connections: [
-            [gesture, self => {
-                var offset = gesture.get_offset()[1];
-                if (initialDir == 0 && offset != 0)
-                    initialDir = (offset > 0 ? 1 : -1)
+        setup: (self) => self
+            .hook(gesture, self => {
+                var offset_x = gesture.get_offset()[1];
+                var offset_y = gesture.get_offset()[2];
+                if (initDirVertical == -1) {
+                    if (Math.abs(offset_y) > MOVE_THRESHOLD)
+                        initDirVertical = 1;
+                    if (initDirX == 0 && Math.abs(offset_x) > MOVE_THRESHOLD) {
+                        initDirVertical = 0;
+                        initDirX = (offset_x > 0 ? 1 : -1);
+                    }
+                }
 
-                if (offset > 0) {
-                    if (initialDir < 0)
+                if (initDirVertical == 0 && offset_x > MOVE_THRESHOLD) {
+                    if (initDirX < 0)
                         self.setCss(`margin-left: 0px; margin-right: 0px;`);
                     else
                         self.setCss(`
-                            margin-left:   ${Number(offset + startMargin)}px;
-                            margin-right: -${Number(offset + startMargin)}px;
+                            margin-left:   ${Number(offset_x + startMargin - MOVE_THRESHOLD)}px;
+                            margin-right: -${Number(offset_x + startMargin - MOVE_THRESHOLD)}px;
                         `);
                 }
-                else if (offset < 0) {
-                    if (initialDir > 0)
+                else if (initDirVertical == 0 && offset_x < -MOVE_THRESHOLD) {
+                    if (initDirX > 0)
                         self.setCss(`margin-left: 0px; margin-right: 0px;`);
                     else {
-                        offset = Math.abs(offset);
+                        offset_x = Math.abs(offset_x);
                         self.setCss(`
-                            margin-right: ${Number(offset + startMargin)}px;
-                            margin-left: -${Number(offset + startMargin)}px;
+                            margin-right: ${Number(offset_x + startMargin - MOVE_THRESHOLD)}px;
+                            margin-left: -${Number(offset_x + startMargin - MOVE_THRESHOLD)}px;
                         `);
                     }
                 }
 
-                wholeThing._dragging = Math.abs(offset) > 10;
+                wholeThing._dragging = Math.abs(offset_x) > 10;
 
                 if (widget.window)
                     widget.window.set_cursor(Gdk.Cursor.new_from_name(display, 'grabbing'));
-            }, 'drag-update'],
 
-            [gesture, self => {
+                if (initDirVertical == 1 && offset_y > MOVE_THRESHOLD && !expanded) {
+                    notifTextPreview.revealChild = false;
+                    notifTextExpanded.revealChild = true;
+                    expanded = true;
+                    notifExpandButton.child.label = 'expand_less';
+                }
+                else if (initDirVertical == 1 && offset_y < -MOVE_THRESHOLD && expanded) {
+                    notifTextPreview.revealChild = true;
+                    notifTextExpanded.revealChild = false;
+                    expanded = false;
+                    notifExpandButton.child.label = 'expand_more';
+                }
+
+            }, 'drag-update')
+            .hook(gesture, self => {
                 if (!self._ready) {
                     wholeThing.revealChild = true;
                     self._ready = true;
                     return;
                 }
-                const offset = gesture.get_offset()[1];
+                const offset_h = gesture.get_offset()[1];
 
-                if (Math.abs(offset) > dragThreshold && offset * initialDir > 0) {
-                    if (offset > 0) {
+                if (Math.abs(offset_h) > DRAG_CONFIRM_THRESHOLD && offset_h * initDirX > 0) {
+                    if (offset_h > 0) {
                         self.setCss(rightAnim1);
                         widget.sensitive = false;
                     }
@@ -313,10 +389,10 @@ export default ({
 
                     wholeThing._dragging = false;
                 }
-                initialDir = 0;
-            }, 'drag-end'],
-
-        ],
+                initDirX = 0;
+                initDirVertical = -1;
+            }, 'drag-end')
+        ,
     })
     widget.add(notificationBox);
     wholeThing.child.children = [widget];
diff --git a/.config/ags/lib/popupwindow.js b/.config/ags/lib/popupwindow.js
index e4a29c16f..4f7e63d2e 100644
--- a/.config/ags/lib/popupwindow.js
+++ b/.config/ags/lib/popupwindow.js
@@ -17,11 +17,13 @@ export default ({
 
     child: Box({
         className: `${showClassName} ${hideClassName}`,
-        connections: [[App, (self, currentName, visible) => {
-            if (currentName === name) {
-                self.toggleClassName(hideClassName, !visible);
-            }
-        }]],
+        setup: (self) => self
+            .hook(App, (self, currentName, visible) => {
+                if (currentName === name) {
+                    self.toggleClassName(hideClassName, !visible);
+                }
+            })
+        ,
         child: child,
     }),
 });
\ No newline at end of file
diff --git a/.config/ags/lib/statusicons.js b/.config/ags/lib/statusicons.js
index 21eebe2db..48c0bce47 100644
--- a/.config/ags/lib/statusicons.js
+++ b/.config/ags/lib/statusicons.js
@@ -27,18 +27,18 @@ export const NotificationIndicator = (notifCenterName = 'sideright') => {
         transition: 150,
         transition: 'slide_left',
         revealChild: false,
-        connections: [
-            [Notifications, (self, id) => {
+        setup: (self) => self
+            .hook(Notifications, (self, id) => {
                 if (!id || Notifications.dnd) return;
                 if (!Notifications.getNotification(id)) return;
                 self.revealChild = true;
-            }, 'notified'],
-            [App, (self, currentName, visible) => {
+            }, 'notified')
+            .hook(App, (self, currentName, visible) => {
                 if (visible && currentName === notifCenterName) {
                     self.revealChild = false;
                 }
-            }],
-        ],
+            })
+        ,
         child: Widget.Box({
             children: [
                 MaterialIcon('notifications', 'norm'),
@@ -50,20 +50,20 @@ export const NotificationIndicator = (notifCenterName = 'sideright') => {
                         ['update', (self) => self.label = `${self._unreadCount}`],
                         ['unreadCount', 0],
                     ],
-                    connections: [
-                        [Notifications, (self, id) => {
+                    setup: (self) => self
+                        .hook(Notifications, (self, id) => {
                             if (!id || Notifications.dnd) return;
                             if (!Notifications.getNotification(id)) return;
                             self._increment(self);
                             self._update(self);
-                        }, 'notified'],
-                        [App, (self, currentName, visible) => {
+                        }, 'notified')
+                        .hook(App, (self, currentName, visible) => {
                             if (visible && currentName === notifCenterName) {
                                 self._markread(self);
                                 self._update(self);
                             }
-                        }],
-                    ]
+                        })
+                    ,
                 })
             ]
         })
@@ -77,7 +77,11 @@ export const BluetoothIndicator = () => Widget.Stack({
         ['true', Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth' })],
         ['false', Widget.Label({ className: 'txt-norm icon-material', label: 'bluetooth_disabled' })],
     ],
-    connections: [[Bluetooth, stack => { stack.shown = String(Bluetooth.enabled); }]],
+    setup: (self) => self
+        .hook(Bluetooth, stack => {
+            stack.shown = String(Bluetooth.enabled);
+        })
+    ,
 });
 
 
@@ -90,7 +94,7 @@ const NetworkWiredIndicator = () => Widget.Stack({
         ['connected', Widget.Label({ className: 'txt-norm icon-material', label: 'lan' })],
         ['connecting', Widget.Label({ className: 'txt-norm icon-material', label: 'settings_ethernet' })],
     ],
-    connections: [[Network, stack => {
+    setup: (self) => self.hook(Network, stack => {
         if (!Network.wired)
             return;
 
@@ -101,15 +105,15 @@ const NetworkWiredIndicator = () => Widget.Stack({
             stack.shown = 'disconnected';
         else
             stack.shown = 'fallback';
-    }]],
+    }),
 });
 
 const SimpleNetworkIndicator = () => Widget.Icon({
-    connections: [[Network, self => {
+    setup: (self) => self.hook(Network, self => {
         const icon = Network[Network.primary || 'wifi']?.iconName;
         self.icon = icon || '';
         self.visible = icon;
-    }]],
+    }),
 });
 
 const NetworkWifiIndicator = () => Widget.Stack({
@@ -124,7 +128,7 @@ const NetworkWifiIndicator = () => Widget.Stack({
         ['3', Widget.Label({ className: 'txt-norm icon-material', label: 'network_wifi_3_bar' })],
         ['4', Widget.Label({ className: 'txt-norm icon-material', label: 'signal_wifi_4_bar' })],
     ],
-    connections: [[Network, (stack) => {
+    setup: (self) => self.hook(Network, (stack) => {
         if (!Network.wifi) {
             return;
         }
@@ -134,7 +138,7 @@ const NetworkWifiIndicator = () => Widget.Stack({
         else if (Network.wifi.internet == 'disconnected' || Network.wifi.internet == 'connecting') {
             stack.shown = Network.wifi.internet;
         }
-    }]],
+    }),
 });
 
 export const NetworkIndicator = () => Widget.Stack({
@@ -144,13 +148,17 @@ export const NetworkIndicator = () => Widget.Stack({
         ['wifi', NetworkWifiIndicator()],
         ['wired', NetworkWiredIndicator()],
     ],
-    connections: [[Network, stack => {
-        let primary = Network.primary || 'fallback';
+    setup: (self) => self.hook(Network, stack => {
+        if (!Network.primary) {
+            stack.shown = 'wifi';
+            return;
+        }
+        const primary = Network.primary || 'fallback';
         if (primary == 'wifi' || primary == 'wired')
             stack.shown = primary;
         else
             stack.shown = 'fallback';
-    }]],
+    }),
 });
 
 const KeyboardLayout = ({ useFlag } = {}) => {
@@ -188,22 +196,20 @@ const KeyboardLayout = ({ useFlag } = {}) => {
             ...languageStackArray,
             ['undef', Widget.Label({ label: '?' })]
         ],
-        connections: [
-            [Hyprland, (stack, kbName, layoutName) => {
-                if (!kbName) {
-                    return;
-                }
-                var lang = languages.find(lang => layoutName.includes(lang.name));
-                if (lang) {
-                    widgetContent.shown = lang.layout;
-                }
-                else { // Attempt to support langs not listed
-                    lang = languageStackArray.find(lang => isLanguageMatch(lang[0], layoutName));
-                    if (!lang) stack.shown = 'undef';
-                    else stack.shown = lang[0];
-                }
-            }, 'keyboard-layout']
-        ],
+        setup: (self) => self.hook(Hyprland, (stack, kbName, layoutName) => {
+            if (!kbName) {
+                return;
+            }
+            var lang = languages.find(lang => layoutName.includes(lang.name));
+            if (lang) {
+                widgetContent.shown = lang.layout;
+            }
+            else { // Attempt to support langs not listed
+                lang = languageStackArray.find(lang => isLanguageMatch(lang[0], layoutName));
+                if (!lang) stack.shown = 'undef';
+                else stack.shown = lang[0];
+            }
+        }, 'keyboard-layout'),
     });
     widgetRevealer.child = widgetContent;
     return widgetRevealer;
diff --git a/.config/ags/scripts/color_generation/generate_colors_material.py b/.config/ags/scripts/color_generation/generate_colors_material.py
index 99e5bd8ab..e649b4f80 100755
--- a/.config/ags/scripts/color_generation/generate_colors_material.py
+++ b/.config/ags/scripts/color_generation/generate_colors_material.py
@@ -50,7 +50,9 @@ else:
     #     exit()
 
 colorscheme=0
+darkmode = True
 if("-l" in sys.argv):
+    darkmode = False
     colorscheme = newtheme.get('schemes').get('light')
     print('$darkmode: false;')
 else:
@@ -85,8 +87,9 @@ inverseSurface = hexFromArgb(colorscheme.get_inverseSurface())
 inverseOnSurface = hexFromArgb(colorscheme.get_inverseOnSurface())
 inversePrimary = hexFromArgb(colorscheme.get_inversePrimary())
 
-# post proccessing
-background = darken(background, 0.6)
+# make material less boring
+if darkmode:
+    background = darken(background, 0.6)
 
 print('$primary: ' + primary + ';')
 print('$onPrimary: ' + onPrimary + ';')
diff --git a/.config/ags/scripts/record-script.sh b/.config/ags/scripts/record-script.sh
index ddcef8071..904b98f80 100755
--- a/.config/ags/scripts/record-script.sh
+++ b/.config/ags/scripts/record-script.sh
@@ -8,13 +8,13 @@ cd ~/Videos || exit
 if [[ "$(pidof wf-recorder)" == "" ]]; then
     notify-send "Starting recording" 'recording_'"$(getdate)"'.mp4' -a 'record-script.sh'
     if [[ "$1" == "--sound" ]]; then
-        wf-recorder -f './recording_'"$(getdate)"'.mp4' -t --geometry "$(slurp)" --audio=alsa_output.pci-0000_08_00.6.analog-stereo.monitor
+        wf-recorder --pixel-format yuv420p -f './recording_'"$(getdate)"'.mp4' -t --geometry "$(slurp)" --audio=alsa_output.pci-0000_08_00.6.analog-stereo.monitor & disown
     elif [[ "$1" == "--fullscreen-sound" ]]; then
-        wf-recorder -f './recording_'"$(getdate)"'.mp4' -t --audio=alsa_output.pci-0000_08_00.6.analog-stereo.monitor
+        wf-recorder --pixel-format yuv420p -f './recording_'"$(getdate)"'.mp4' -t --audio=alsa_output.pci-0000_08_00.6.analog-stereo.monitor & disown
     elif [[ "$1" == "--fullscreen" ]]; then
-        wf-recorder -f './recording_'"$(getdate)"'.mp4' -t
+        wf-recorder --pixel-format yuv420p -f './recording_'"$(getdate)"'.mp4' -t & disown
     else 
-        wf-recorder -f './recording_'"$(getdate)"'.mp4' -t --geometry "$(slurp)" 
+        wf-recorder --pixel-format yuv420p -f './recording_'"$(getdate)"'.mp4' -t --geometry "$(slurp)" & disown
     fi
 else
     /usr/bin/kill --signal SIGINT wf-recorder
diff --git a/.config/ags/scripts/templates/gradience/preset.json b/.config/ags/scripts/templates/gradience/preset.json
index 02486710a..8591b87f8 100644
--- a/.config/ags/scripts/templates/gradience/preset.json
+++ b/.config/ags/scripts/templates/gradience/preset.json
@@ -87,9 +87,9 @@
         "BLACK_500": "#393634",
         "BLACK_700": "#33302F",
         "BLACK_900": "#2B2928",
-        "accent_bg_color": "#c4c0ff",
-        "accent_fg_color": "#251a8c",
-        "accent_color": "#c4c0ff",
+        "accent_bg_color": "#ffabf1",
+        "accent_fg_color": "#551251",
+        "accent_color": "#ffabf1",
         "destructive_bg_color": "#ffb4a9",
         "destructive_fg_color": "#680003",
         "destructive_color": "#ffb4a9",
@@ -99,22 +99,22 @@
         "warning_fg_color": "rgba(0, 0, 0, 0.87)",
         "error_bg_color": "#ffb4a9",
         "error_fg_color": "#680003",
-        "window_bg_color": "#101012",
-        "window_fg_color": "#e5e1e6",
-        "view_bg_color": "#1c1b1f",
-        "view_fg_color": "#e5e1e6",
+        "window_bg_color": "#120F11",
+        "window_fg_color": "#eae0e4",
+        "view_bg_color": "#1f1a1d",
+        "view_fg_color": "#eae0e4",
         "headerbar_bg_color": "mix(@dialog_bg_color, @window_bg_color, 0.5)",
-        "headerbar_fg_color": "#e3dff9",
-        "headerbar_border_color": "#464559",
+        "headerbar_fg_color": "#f8daee",
+        "headerbar_border_color": "#554050",
         "headerbar_backdrop_color": "@headerbar_bg_color",
         "headerbar_shade_color": "rgba(0, 0, 0, 0.09)",
-        "card_bg_color": "#101012",
-        "card_fg_color": "#e3dff9",
+        "card_bg_color": "#120F11",
+        "card_fg_color": "#f8daee",
         "card_shade_color": "rgba(0, 0, 0, 0.09)",
-        "dialog_bg_color": "#464559",
-        "dialog_fg_color": "#e3dff9",
-        "popover_bg_color": "#464559",
-        "popover_fg_color": "#e3dff9",
+        "dialog_bg_color": "#554050",
+        "dialog_fg_color": "#f8daee",
+        "popover_bg_color": "#554050",
+        "popover_fg_color": "#f8daee",
         "thumbnail_bg_color": "#1a1b26",
         "thumbnail_fg_color": "#AEE5FA",
         "shade_color": "rgba(0, 0, 0, 0.36)",
diff --git a/.config/ags/scripts/templates/hypr/colors.conf b/.config/ags/scripts/templates/hypr/colors.conf
index 232c664ee..f62ab7a71 100755
--- a/.config/ags/scripts/templates/hypr/colors.conf
+++ b/.config/ags/scripts/templates/hypr/colors.conf
@@ -1,6 +1,7 @@
-# Auto generated color theme for image at: [Local wallpaper]
+$SLURP_COMMAND="$(slurp -d -c {{ $onSecondaryContainer }}BB -b {{ $secondaryContainer }}22 -s 00000000)"
+
 general {
-    col.active_border = rgba({{ $primaryContainer }}FF)
+    col.active_border = rgba({{ $onPrimary }}FF)
     col.inactive_border = rgba({{ $secondaryContainer }}CC)
 }
 
diff --git a/.config/ags/scss/_bar.scss b/.config/ags/scss/_bar.scss
index 7ba2303b4..dfde74374 100644
--- a/.config/ags/scss/_bar.scss
+++ b/.config/ags/scss/_bar.scss
@@ -1,27 +1,20 @@
 // Made to be pixel-perfect with 11pt font size
 // 1rem = 11pt = 14.6666666667px
 
-// Init
 $black: black;
 $white: white;
-$notchSecondaryContainer: $secondaryContainer;
-$notchOnSecondaryContainer: $onSecondaryContainer;
-$notchPrimary: $primary;
-$notchOnPrimary: $onPrimary;
-
-// Check dark mode. Set colors accordingly for the fake snotch that's always black
+$bar_ws_width: 1.774rem;
+$bar_subgroup_bg: mix($surfaceVariant, $primary, 89%);
 @if $darkmode ==true {
-    $notchSecondaryContainer: $secondaryContainer;
-    $notchOnSecondaryContainer: $onSecondaryContainer;
-    $notchPrimary: $primary;
-    $notchOnPrimary: $onPrimary;
+    $bar_subgroup_bg: $surfaceVariant;
 }
 
-@else {
-    $notchSecondaryContainer: $onSecondaryContainer;
-    $notchOnSecondaryContainer: $secondaryContainer;
-    $notchPrimary: $primaryContainer;
-    $notchOnPrimary: $onPrimaryContainer;
+@mixin bar-group-rounding {
+    @include small-rounding;
+}
+
+.bar-height {
+    min-height: 2.727rem;
 }
 
 .bar-bg {
@@ -34,31 +27,17 @@ $notchOnPrimary: $onPrimary;
 }
 
 .bar-group-margin {
-    padding: 0.2rem;
+    padding: 0.273rem 0rem;
 }
 
 .bar-group {
-    // @include elevation-border;
-    background-color: $t_surface;
-}
-
-.bar-group-center {
-    border-bottom-left-radius: 1.364rem;
-    border-bottom-right-radius: 1.364rem;
-    padding: 0.2rem;
-    // background-color: $t_surface;
-    background-color: $black; // Hard code: fake notch
-}
-
-.corner-bar-group {
-    border-radius: 1.364rem; // Half of bar height
-    border-width: 0.068rem;
-    // background-color: $t_surface;
-    background-color: $black; // Hard code: fake notch
+    background-color: $l_l_t_surfaceVariant;
 }
 
 .bar-group-pad {
-    padding: 0rem 1.023rem;
+    // padding: 0rem 1.023rem;
+    padding: 0.205rem;
+    // padding-left: 0.341rem;
 }
 
 .bar-group-pad-less {
@@ -67,12 +46,12 @@ $notchOnPrimary: $onPrimary;
 
 .bar-group-pad-system {
     padding-left: 1.023rem;
-    padding-right: 0.547rem;
+    padding-right: 0.341rem;
 }
 
 .bar-group-pad-music {
     padding-right: 1.023rem;
-    // padding-left: 0.273rem;
+    padding-left: 0.341rem;
 }
 
 .bar-group-pad-left {
@@ -94,7 +73,7 @@ $notchOnPrimary: $onPrimary;
 }
 
 .bar-group-standalone {
-    border-radius: 1.364rem;
+    @include bar-group-rounding;
     -gtk-outline-radius: 1.364rem;
 }
 
@@ -123,7 +102,25 @@ $notchOnPrimary: $onPrimary;
 }
 
 .bar-ws-width {
-    min-width: 18.614rem;
+    min-width: 18.341rem;
+}
+
+.bar-ws {
+    min-width: $bar_ws_width;
+    color: mix($onBackground, $background, 40%);
+    @if $darkmode ==true {
+        color: mix($onBackground, $background, 45%);
+    }
+}
+
+.bar-ws-active {
+    background-color: $secondaryContainer;
+    color: $onSecondaryContainer;
+}
+
+.bar-ws-occupied {
+    background-color: $bar_subgroup_bg;
+    color: $onSurfaceVariant;
 }
 
 .bar-separator {
@@ -137,7 +134,6 @@ $notchOnPrimary: $onPrimary;
 .bar-clock {
     @include titlefont;
     font-size: 1.2727rem;
-    color: $onBackground;
 }
 
 .bar-date {
@@ -146,95 +142,13 @@ $notchOnPrimary: $onPrimary;
     color: $onBackground;
 }
 
-.bar-ws {
-    min-height: 1.636rem;
-    min-width: 1.772rem;
-    font-size: 1.091rem;
-    @include mainfont;
-    border-top: 0.068rem solid;
-    border-bottom: 0.068rem solid;
-    border-color: transparent;
-    color: $white;
-}
-
-.bar-ws-active-box {
-    transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
-}
-
-.bar-ws-active {
-    min-height: 1.5rem;
-    min-width: 1.5rem;
-    font-size: 1.091rem;
-    @include mainfont;
-
-    background-color: $notchPrimary;
-    color: $notchOnPrimary;
-    border-radius: 999px;
-    margin: 0.068rem;
-    // background-color: red;
-}
-
-.bar-ws-active-middledecor {
-    min-width: 0.682rem;
-    min-height: 0.682rem;
-    border-radius: 9999px;
-    background-color: $black;
-    margin: 0rem 0.409rem;
-}
-
-.bar-ws-occupied {
-    background-color: $notchSecondaryContainer;
-    color: $notchOnSecondaryContainer;
-    min-width: 1.772rem;
-    border-top: 0.068rem solid $notchOnSecondaryContainer;
-    border-bottom: 0.068rem solid $notchOnSecondaryContainer;
-}
-
-.bar-ws-occupied-left {
-    background-color: $notchSecondaryContainer;
-    color: $notchOnSecondaryContainer;
-    min-width: 1.704rem;
-    border-top-left-radius: 999px;
-    border-bottom-left-radius: 999px;
-
-    border-left: 0.068rem solid $notchOnSecondaryContainer;
-    border-top: 0.068rem solid $notchOnSecondaryContainer;
-    border-bottom: 0.068rem solid $notchOnSecondaryContainer;
-    border-right: 0px solid transparent;
-}
-
-.bar-ws-occupied-right {
-    background-color: $notchSecondaryContainer;
-    color: $notchOnSecondaryContainer;
-    min-width: 1.704rem;
-    border-top-right-radius: 999px;
-    border-bottom-right-radius: 999px;
-
-    border-right: 0.068rem solid $notchOnSecondaryContainer;
-    border-top: 0.068rem solid $notchOnSecondaryContainer;
-    border-bottom: 0.068rem solid $notchOnSecondaryContainer;
-    border-left: 0px solid transparent;
-}
-
-.bar-ws-occupied-left-right {
-    @include full-rounding;
-    background-color: $notchSecondaryContainer;
-    color: $notchOnSecondaryContainer;
-    min-width: 1.636rem;
-    border: 0.068rem solid $notchOnSecondaryContainer;
-}
-
-.bar-ws-empty {
-    color: $onBackground;
-    border-color: transparent;
-}
-
 .bar-batt {
     @include full-rounding;
-    padding: 0rem 0.341rem;
-    background-color: $t_secondaryContainer;
-    color: $t_onSecondaryContainer;
-    // border: 1px solid $onSecondaryContainer;
+    min-height: 1.77rem;
+    min-width: 1.77rem;
+    border-radius: 10rem;
+    background-color: $secondaryContainer;
+    color: $onSecondaryContainer;
 }
 
 .bar-sidemodule {
@@ -251,19 +165,36 @@ $notchOnPrimary: $onPrimary;
     color: $onSuccessContainer;
 }
 
-.bar-batt-prog-low {
+.bar-batt-circprog {
+    @include fluent_decel_long;
+    min-width: 0.068rem; // line width
+    min-height: 1.636rem;
+    padding: 0rem;
+    background-color: $secondaryContainer;
+    color: $onSecondaryContainer;
+}
+
+.bar-batt-circprog-low {
+    @include fluent_decel_long;
+    min-width: 0.068rem; // line width
+    min-height: 1.636rem;
+    padding: 0rem;
     background-color: $error;
     color: $errorContainer;
 }
 
-.bar-batt-prog-full {
+.bar-batt-circprog-full {
+    @include fluent_decel_long;
+    min-width: 0.068rem; // line width
+    min-height: 1.636rem;
+    padding: 0rem;
     background-color: $successContainer;
     color: $onSuccessContainer;
 }
 
 .bar-music-playstate {
-    min-height: 1.770rem;
-    min-width: 1.770rem;
+    min-height: 1.77rem;
+    min-width: 1.77rem;
     border-radius: 10rem;
     background-color: $secondaryContainer;
     color: $onSecondaryContainer;
@@ -272,15 +203,15 @@ $notchOnPrimary: $onPrimary;
 .bar-music-circprog {
     @include fluent_decel_long;
     min-width: 0.068rem; // line width
-    min-height: 1.770rem;
+    min-height: 1.636rem;
     padding: 0rem;
     background-color: $secondaryContainer;
     color: $onSecondaryContainer;
 }
 
 .bar-music-playstate-playing {
-    min-height: 1.770rem;
-    min-width: 1.770rem;
+    min-height: 1.77rem;
+    min-width: 1.77rem;
     border-radius: 10rem;
     background-color: $secondaryContainer;
     color: $onSecondaryContainer;
@@ -363,8 +294,8 @@ $notchOnPrimary: $onPrimary;
     }
 
     progress {
-        min-height: 0.680rem;
-        min-width: 0.680rem;
+        min-height: 0.68rem;
+        min-width: 0.68rem;
         margin: 0rem 0.137rem;
         border-radius: 10rem;
         background-color: $t_onSecondaryContainer;
@@ -392,30 +323,14 @@ $notchOnPrimary: $onPrimary;
     border-radius: 10rem;
     min-width: 0.681rem;
     min-height: 0.681rem;
-    background-color: $t_onSecondaryContainer;
-    color: $secondaryContainer;
+    background-color: $onSurfaceVariant;
 }
 
 .bar-batt-chargestate-charging-smaller {
     border-radius: 10rem;
     min-width: 0.409rem;
     min-height: 0.409rem;
-    background-color: $t_onSecondaryContainer;
-    color: $secondaryContainer;
-}
-
-.bar-batt-chargestate-low {
-    background-color: $errorContainer;
-}
-
-.bar-batt-chargestate-full {
-    background-color: $onSuccessContainer;
-}
-
-.bar-batt-percentage {
-    font-size: 1rem;
-    margin-top: -0.068rem;
-    font-weight: 500;
+    background-color: $onSurfaceVariant;
 }
 
 .corner {
@@ -424,7 +339,7 @@ $notchOnPrimary: $onPrimary;
 }
 
 .corner-black {
-    background-color: $black; // Hard code because fake screen corner
+    background-color: $black; // Hard code: fake screen corner
     @include large-rounding;
 }
 
@@ -438,17 +353,17 @@ $notchOnPrimary: $onPrimary;
     padding: 0.341rem;
 }
 
-.bar-space-button>box:first-child {
+.bar-space-button > box:first-child {
     @include full-rounding;
     padding: 0rem 0.682rem;
 }
 
-.bar-space-button:hover>box:first-child,
-.bar-space-button:focus>box:first-child {
+.bar-space-button:hover > box:first-child,
+.bar-space-button:focus > box:first-child {
     background-color: $hovercolor;
 }
 
-.bar-space-button:active>box:first-child {
+.bar-space-button:active > box:first-child {
     background-color: $activecolor;
 }
 
@@ -458,25 +373,26 @@ $notchOnPrimary: $onPrimary;
     }
 }
 
-.bar-space-area-rightmost>box {
+.bar-space-area-rightmost > box {
     padding-right: 2.386rem;
 }
 
 .bar-systray {
     @include full-rounding;
-    min-height: 1.909rem;
-    min-width: 1.909rem;
+    margin: 0.137rem 0rem;
+    padding: 0rem 0.682rem;
 }
 
 .bar-systray-item {
     @include full-rounding;
-    min-width: 1.909rem;
+    min-height: 1.032rem;
+    min-width: 1.032rem;
 }
 
 .bar-statusicons {
     @include full-rounding;
     @include menu_decel;
-    margin: 0.2rem;
+    margin: 0.273rem;
     padding: 0rem 0.614rem;
 }
 
@@ -486,4 +402,20 @@ $notchOnPrimary: $onPrimary;
 
 .bar-statusicons-active {
     background-color: mix($t_background, $t_onBackground, 80%);
+}
+
+.bar-util-btn {
+    @include full-rounding;
+    min-height: 1.77rem;
+    min-width: 1.77rem;
+    background-color: $bar_subgroup_bg;
+}
+
+.bar-util-btn:hover,
+.bar-util-btn:focus {
+    background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 90%);
+}
+
+.bar-util-btn:active {
+    background-color: mix($bar_subgroup_bg, $onSurfaceVariant, 80%);
 }
\ No newline at end of file
diff --git a/.config/ags/scss/_colors.scss b/.config/ags/scss/_colors.scss
index 4c1317cd6..6aa9424f3 100755
--- a/.config/ags/scss/_colors.scss
+++ b/.config/ags/scss/_colors.scss
@@ -5,15 +5,18 @@ $transparency_enabled: false;
 
 @if $transparency_enabled ==false {
     @if $darkmode ==true {
+        $primary: mix($primary, white, 70%);
+        $primaryContainer: mix($primaryContainer, white, 90%);
         $background: mix(mix($background, $primary, 94%), #000000, 50%);
         $surface: mix($surface, $primaryContainer, 98%);
-        $surfaceVariant: mix($surfaceVariant, #000000, 55%);
+        $surfaceVariant: mix($surfaceVariant, #000000, 75%);
+        // $secondaryContainer: mix($secondaryContainer, $primaryContainer, 90%);
     }
 
     @if $darkmode ==false {
         $background: mix($background, $primary, 87%);
         $surface: mix($surface, $primary, 93%);
-        $surfaceVariant: mix($surfaceVariant, #FFFFFF, 55%);
+        $surfaceVariant: mix($surfaceVariant, #ffffff, 25%);
     }
 }
 
@@ -27,7 +30,7 @@ $transparency_enabled: false;
     @if $darkmode ==false {
         $background: mix($background, $primary, 94%);
         $surface: mix($surface, $primary, 93%);
-        $surfaceVariant: mix($surfaceVariant, #FFFFFF, 55%);
+        $surfaceVariant: mix($surfaceVariant, #ffffff, 55%);
     }
 }
 
@@ -37,7 +40,8 @@ $transparentize_surface_amount_less: 0.6;
 $transparentize_surface_amount_less_less: 0.55;
 $transparentize_surface_amount: 0.7;
 $transparentize_surface_amount_more: 0.8;
-$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
+$transparentize_surface_amount_subtract_surface: $transparentize_surface_amount -
+    $transparentize_amount;
 
 @if $darkmode ==true {
     // Less transparency
@@ -46,7 +50,8 @@ $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount
     $transparentize_surface_amount_less_less: 0.55;
     $transparentize_surface_amount: 0.69;
     $transparentize_surface_amount_more: 0.9;
-    $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount - $transparentize_amount;
+    $transparentize_surface_amount_subtract_surface: $transparentize_surface_amount -
+        $transparentize_amount;
 }
 
 @if $transparency_enabled ==false {
@@ -71,33 +76,69 @@ $onSuccessContainer: #0c1f13;
 $t_primary: transparentize($primary, $transparentize_amount);
 $t_onPrimary: transparentize($onPrimary, $transparentize_amount);
 $t_primaryContainer: transparentize($primaryContainer, $transparentize_amount);
-$t_onPrimaryContainer: transparentize($onPrimaryContainer, $transparentize_amount);
+$t_onPrimaryContainer: transparentize(
+    $onPrimaryContainer,
+    $transparentize_amount
+);
 $t_secondary: transparentize($secondary, $transparentize_amount);
 $t_onSecondary: transparentize($onSecondary, $transparentize_amount);
-$t_secondaryContainer: transparentize($secondaryContainer, $transparentize_amount);
-$l_t_secondaryContainer: transparentize($secondaryContainer, $transparentize_surface_amount_less);
-$t_onSecondaryContainer: transparentize($onSecondaryContainer, $transparentize_amount);
+$t_secondaryContainer: transparentize(
+    $secondaryContainer,
+    $transparentize_amount
+);
+$l_t_secondaryContainer: transparentize(
+    $secondaryContainer,
+    $transparentize_surface_amount_less
+);
+$t_onSecondaryContainer: transparentize(
+    $onSecondaryContainer,
+    $transparentize_amount
+);
 $t_t_t_onSecondaryContainer: transparentize($onSecondaryContainer, 0.93);
 $t_tertiary: transparentize($tertiary, $transparentize_amount);
 $t_onTertiary: transparentize($onTertiary, $transparentize_amount);
-$t_tertiaryContainer: transparentize($tertiaryContainer, $transparentize_amount);
-$t_onTertiaryContainer: transparentize($onTertiaryContainer, $transparentize_amount);
+$t_tertiaryContainer: transparentize(
+    $tertiaryContainer,
+    $transparentize_amount
+);
+$t_onTertiaryContainer: transparentize(
+    $onTertiaryContainer,
+    $transparentize_amount
+);
 $t_error: transparentize($error, $transparentize_amount);
 $t_onError: transparentize($onError, $transparentize_amount);
 $t_errorContainer: transparentize($errorContainer, $transparentize_amount);
 $t_onErrorContainer: transparentize($onErrorContainer, $transparentize_amount);
 $t_colorbarbg: transparentize($colorbarbg, $transparentize_amount);
 $t_background: transparentize($background, $transparentize_amount);
-$t_t_background: transparentize($background, $transparentize_surface_amount_more);
+$t_t_background: transparentize(
+    $background,
+    $transparentize_surface_amount_more
+);
 $t_onBackground: transparentize($onBackground, $transparentize_amount);
 $t_surface: transparentize($surface, $transparentize_surface_amount);
 $t_t_surface: transparentize($surface, $transparentize_surface_amount_more);
 $t_onSurface: transparentize($onSurface, $transparentize_surface_amount);
-$t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount);
-$t_onSurfaceVariant: transparentize($onSurfaceVariant, $transparentize_surface_amount);
-$t_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_more);
-$l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less);
-$l_l_t_surfaceVariant: transparentize($surfaceVariant, $transparentize_surface_amount_less_less);
+$t_surfaceVariant: transparentize(
+    $surfaceVariant,
+    $transparentize_surface_amount
+);
+$t_onSurfaceVariant: transparentize(
+    $onSurfaceVariant,
+    $transparentize_surface_amount
+);
+$t_t_surfaceVariant: transparentize(
+    $surfaceVariant,
+    $transparentize_surface_amount_more
+);
+$l_t_surfaceVariant: transparentize(
+    $surfaceVariant,
+    $transparentize_surface_amount_less
+);
+$l_l_t_surfaceVariant: transparentize(
+    $surfaceVariant,
+    $transparentize_surface_amount_less_less
+);
 $t_outline: transparentize($outline, $transparentize_amount);
 $t_shadow: transparentize($shadow, $transparentize_amount);
 $t_inverseSurface: transparentize($inverseSurface, $transparentize_amount);
@@ -107,7 +148,10 @@ $t_inversePrimary: transparentize($inversePrimary, $transparentize_amount);
 $t_success: transparentize($error, $transparentize_amount);
 $t_onSuccess: transparentize($onError, $transparentize_amount);
 $t_successContainer: transparentize($errorContainer, $transparentize_amount);
-$t_onSuccessContainer: transparentize($onErrorContainer, $transparentize_amount);
+$t_onSuccessContainer: transparentize(
+    $onErrorContainer,
+    $transparentize_amount
+);
 
 // Others
 $hovercolor: mix($t_surface, $t_onSurface, 50%);
@@ -125,4 +169,4 @@ $term3: $onPrimaryContainer;
 $term4: $onPrimaryContainer;
 $term5: $onSecondaryContainer;
 $term6: $primary;
-$term7: $onSurfaceVariant;
\ No newline at end of file
+$term7: $onSurfaceVariant;
diff --git a/.config/ags/scss/_common.scss b/.config/ags/scss/_common.scss
index 8799d9e2c..8332cb62e 100644
--- a/.config/ags/scss/_common.scss
+++ b/.config/ags/scss/_common.scss
@@ -42,7 +42,7 @@ menu {
     -gtk-outline-radius: 1.159rem;
 
     animation-name: appear;
-    animation-duration: 100ms;
+    animation-duration: 40ms;
     animation-timing-function: ease-out;
     animation-iteration-count: 1;
 }
@@ -81,12 +81,11 @@ tooltip {
 }
 
 .configtoggle-box {
-    padding: 0.205rem;
+    padding: 0.205rem 0.341rem;
     border: 0.136rem solid transparent;
 }
 
 .configtoggle-box:focus {
-    padding: 0.205rem;
     border: 0.136rem solid mix($onSurface, $surface, 40%);
 }
 
@@ -126,4 +125,70 @@ tooltip {
     @include menu_decel;
     min-width: 1.636rem;
     min-height: 0.819rem;
+}
+
+.segment-container {
+    @include full-rounding;
+    border: 0.068rem solid $outline;
+}
+
+.segment-container>*:first-child {
+    border-top-left-radius: 9999px;
+    border-bottom-left-radius: 9999px;
+}
+
+.segment-container>* {
+    border-right: 0.068rem solid $outline;
+    padding: 0.341rem 0.682rem;
+}
+
+.segment-container>*:last-child {
+    border-right: 0rem solid transparent;
+    border-top-right-radius: 9999px;
+    border-bottom-right-radius: 9999px;
+}
+
+.segment-btn {
+    color: $onSurface;
+}
+
+.segment-btn:focus,
+.segment-btn:hover {
+    background-color: $surfaceVariant;
+    color: $onSurfaceVariant;
+}
+
+.segment-btn-enabled {
+    background-color: $secondaryContainer; 
+    color: $onSecondaryContainer;
+}
+
+.segment-btn-enabled:hover,
+.segment-btn-enabled:focus {
+    background-color: $secondaryContainer; 
+    color: $onSecondaryContainer;
+}
+
+.gap-v-5 {
+    min-height: 0.341rem;
+}
+
+.gap-h-5 {
+    min-width: 0.341rem;
+}
+
+.gap-v-10 {
+    min-height: 0.682rem;
+}
+
+.gap-h-10 {
+    min-width: 0.682rem;
+}
+
+.gap-v-15 {
+    min-height: 1.023rem;
+}
+
+.gap-h-15 {
+    min-width: 1.023rem;
 }
\ No newline at end of file
diff --git a/.config/ags/scss/_lib_classes.scss b/.config/ags/scss/_lib_classes.scss
index 4b7e0ca7c..ad586d2aa 100644
--- a/.config/ags/scss/_lib_classes.scss
+++ b/.config/ags/scss/_lib_classes.scss
@@ -69,6 +69,10 @@
     color: $onSecondaryContainer;
 }
 
+.txt-onSurfaceVariant {
+    color: $onSurfaceVariant;
+}
+
 .txt-shadow {
     text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
     margin: 10px;
@@ -214,6 +218,14 @@
     margin-right: 0rem;
 }
 
+.spacing-h-15>scrolledwindow>* {
+    margin-right: 1.023rem;
+}
+
+.spacing-h-15>scrolledwindow:last-child>* {
+    margin-right: 0rem;
+}
+
 .spacing-v-5>box {
     margin-bottom: 0.341rem;
 }
@@ -238,6 +250,22 @@
     margin-bottom: 0rem;
 }
 
+.spacing-v-5-revealer>scrolledwindow>* {
+    margin-bottom: 0.341rem;
+}
+
+.spacing-v-5-revealer>scrolledwindow:last-child>* {
+    margin-bottom: 0rem;
+}
+
+.spacing-h-4>* {
+    margin-right: 0.273rem;
+}
+
+.spacing-h-4>*:last-child {
+    margin-right: 0rem;
+}
+
 .spacing-h-5>* {
     margin-right: 0.341rem;
 }
@@ -262,6 +290,14 @@
     margin-right: 0rem;
 }
 
+.spacing-h-5>scrolledwindow>* {
+    margin-right: 0.341rem;
+}
+
+.spacing-h-5>scrolledwindow:last-child>* {
+    margin-right: 0rem;
+}
+
 .spacing-v-minus5>* {
     margin-bottom: -0.341rem;
 }
@@ -286,6 +322,14 @@
     margin-right: 0rem;
 }
 
+.spacing-h-10>scrolledwindow>* {
+    margin-right: 0.682rem;
+}
+
+.spacing-h-10>scrolledwindow:last-child>* {
+    margin-right: 0rem;
+}
+
 .spacing-h-10>flowboxchild>* {
     margin-right: 0.682rem;
 }
@@ -393,43 +437,43 @@
     margin-right: 0rem;
 }
 
-.spacing-v--5>box {
+.spacing-v--5>* {
     margin-bottom: -0.341rem;
 }
 
-.spacing-v--5>box:last-child {
+.spacing-v--5>*:last-child {
     margin-bottom: 0rem;
 }
 
-.spacing-v--5>label {
-    margin-bottom: -0.341rem;
-}
-
-.spacing-v--5>label:last-child {
-    margin-bottom: 0rem;
-}
-
-.spacing-v--10>box {
-    margin-bottom: -0.682rem;
-}
-
-.spacing-v--10>box:last-child {
-    margin-bottom: 0rem;
-}
-
-.spacing-v--10>label {
-    margin-bottom: -0.682rem;
-}
-
-.spacing-v--10>label:last-child {
-    margin-bottom: 0rem;
-}
-
-.spacing-h--20>box {
+.spacing-h--10>* {
     margin-left: -1.364rem;
 }
 
-.spacing-h--20>box:first-child {
+.spacing-h--10>*:first-child {
+    margin-left: 0rem;
+}
+
+.spacing-v--10>* {
+    margin-bottom: -0.682rem;
+}
+
+.spacing-v--10>*:last-child {
+    margin-bottom: 0rem;
+}
+
+.spacing-v--10>* {
+    margin-bottom: -0.682rem;
+}
+
+.spacing-v--10>*:last-child {
+    margin-bottom: 0rem;
+}
+
+.spacing-h--20>* {
+    margin-left: -1.364rem;
+}
+
+.spacing-h--20>*:first-child {
     margin-left: 0rem;
 }
 
@@ -439,4 +483,12 @@
 
 .menu-decel {
     @include menu_decel;
+}
+
+.element-show {
+    @include element_easeInOut;
+}
+
+.element-hide {
+    @include element_easeInOut;
 }
\ No newline at end of file
diff --git a/.config/ags/scss/_lib_mixins.scss b/.config/ags/scss/_lib_mixins.scss
index 67406eb65..b43dc52e1 100644
--- a/.config/ags/scss/_lib_mixins.scss
+++ b/.config/ags/scss/_lib_mixins.scss
@@ -40,6 +40,7 @@ $rounding_large: 1.705rem;
 @mixin mainfont {
     // Other clean sans-serif
     font-family:
+        'Rubik',
         'Geist',
         'AR One Sans',
         'Reddit Sans',
@@ -160,6 +161,18 @@ $elevation_margin: 0.476rem;
     transition: 150ms cubic-bezier(0.3, 0, 0.8, 0.15);
 }
 
+@mixin element_decel {
+    transition: 300ms cubic-bezier(0, 0.55, 0.45, 1);
+}
+
+@mixin element_accel {
+    transition: 300ms cubic-bezier(0.55, 0, 1, 0.45);
+}
+
+@mixin element_easeInOut {
+    transition: 300ms cubic-bezier(0.85, 0, 0.15, 1);
+}
+
 @function tint($color, $percentage) {
     @return mix(rgb(245, 250, 255), $color, $percentage);
 }
diff --git a/.config/ags/scss/_material.scss b/.config/ags/scss/_material.scss
index 24ab7d4b5..4b1ab4eee 100755
--- a/.config/ags/scss/_material.scss
+++ b/.config/ags/scss/_material.scss
@@ -1,29 +1,29 @@
 $darkmode: true;
-$primary: #c4c0ff;
-$onPrimary: #251a8c;
-$primaryContainer: #3d36a2;
-$onPrimaryContainer: #e3dfff;
-$secondary: #c7c4dd;
-$onSecondary: #2f2e42;
-$secondaryContainer: #464559;
-$onSecondaryContainer: #e3dff9;
-$tertiary: #eab9d1;
-$onTertiary: #472639;
-$tertiaryContainer: #603c50;
-$onTertiaryContainer: #ffd8eb;
+$primary: #ffabf1;
+$onPrimary: #551251;
+$primaryContainer: #702c69;
+$onPrimaryContainer: #ffd6f5;
+$secondary: #dbbed2;
+$onSecondary: #3d2b39;
+$secondaryContainer: #554050;
+$onSecondaryContainer: #f8daee;
+$tertiary: #f5b9a6;
+$onTertiary: #4c2619;
+$tertiaryContainer: #663c2e;
+$onTertiaryContainer: #ffdbcf;
 $error: #ffb4a9;
 $onError: #680003;
 $errorContainer: #930006;
 $onErrorContainer: #ffb4a9;
-$colorbarbg: #101012;
-$background: #101012;
-$onBackground: #e5e1e6;
-$surface: #1c1b1f;
-$onSurface: #e5e1e6;
-$surfaceVariant: #47464f;
-$onSurfaceVariant: #c8c5d0;
-$outline: #928f9a;
+$colorbarbg: #120F11;
+$background: #120F11;
+$onBackground: #eae0e4;
+$surface: #1f1a1d;
+$onSurface: #eae0e4;
+$surfaceVariant: #4e444b;
+$onSurfaceVariant: #d1c2cb;
+$outline: #9a8d95;
 $shadow: #000000;
-$inverseSurface: #e5e1e6;
-$inverseOnSurface: #313033;
-$inversePrimary: #5550bb;
+$inverseSurface: #eae0e4;
+$inverseOnSurface: #342f32;
+$inversePrimary: #8c4483;
diff --git a/.config/ags/scss/_music.scss b/.config/ags/scss/_music.scss
index 8f98091c2..d96441c99 100644
--- a/.config/ags/scss/_music.scss
+++ b/.config/ags/scss/_music.scss
@@ -4,11 +4,11 @@
 @import './musicwal';
 @import './colors';
 @import './lib_mixins';
-$music_gradient1: mix($color1, $background, 30%);
+$music_gradient1: mix($color1, $background, 50%);
 
-@if $darkmode ==true {
-    $music_gradient1: mix($color1, $background, 30%);
-}
+// @if $darkmode ==true {
+//     $music_gradient1: mix($color1, $background, 30%);
+// }
 
 $music_gradient2: $color3;
 $music_gradient3: $color5;
@@ -17,6 +17,9 @@ $music_extra_transparentize: 0.15;
 
 $secondaryContainer: transparentize(mix(mix($background, $color2, 50%), $color6, 80%), 0.5);
 $onSecondaryContainer: mix($color7, $color2, 90%);
+@if $darkmode ==false {
+    $onSecondaryContainer: mix($onSecondaryContainer, black, 50%);
+}
 
 .osd-music {
     @include menu_decel;
diff --git a/.config/ags/scss/_musicmaterial.scss b/.config/ags/scss/_musicmaterial.scss
index 8b1378917..0c924dc64 100755
--- a/.config/ags/scss/_musicmaterial.scss
+++ b/.config/ags/scss/_musicmaterial.scss
@@ -1 +1,29 @@
-
+$darkmode: true;
+$primary: #ecb1ff;
+$onPrimary: #4f076e;
+$primaryContainer: #682886;
+$onPrimaryContainer: #f9d8ff;
+$secondary: #d4c0d8;
+$onSecondary: #392c3d;
+$secondaryContainer: #504254;
+$onSecondaryContainer: #f1dcf4;
+$tertiary: #f5b7b5;
+$onTertiary: #4c2525;
+$tertiaryContainer: #663b3a;
+$onTertiaryContainer: #ffdad8;
+$error: #ffb4a9;
+$onError: #680003;
+$errorContainer: #930006;
+$onErrorContainer: #ffb4a9;
+$colorbarbg: #120F12;
+$background: #120F12;
+$onBackground: #e8e0e5;
+$surface: #1e1a1e;
+$onSurface: #e8e0e5;
+$surfaceVariant: #4c444d;
+$onSurfaceVariant: #cec3cd;
+$outline: #978e97;
+$shadow: #000000;
+$inverseSurface: #e8e0e5;
+$inverseOnSurface: #332f33;
+$inversePrimary: #8342a1;
diff --git a/.config/ags/scss/_musicwal.scss b/.config/ags/scss/_musicwal.scss
index 8b1378917..f96182baf 100644
--- a/.config/ags/scss/_musicwal.scss
+++ b/.config/ags/scss/_musicwal.scss
@@ -1 +1,26 @@
+// SCSS Variables
+// Generated by 'wal'
+$wallpaper: "/home/end/.cache/ags/media/c77cd3721bb54437609b42bd5254d1a16437f855";
 
+// Special
+$background: #0C0820;
+$foreground: #e5c7e7;
+$cursor: #e5c7e7;
+
+// Colors
+$color0: #0C0820;
+$color1: #3F26DE;
+$color2: #671AD9;
+$color3: #A152BD;
+$color4: #9E1EEA;
+$color5: #E424F5;
+$color6: #E65BF0;
+$color7: #e5c7e7;
+$color8: #a08ba1;
+$color9: #3F26DE;
+$color10: #671AD9;
+$color11: #A152BD;
+$color12: #9E1EEA;
+$color13: #E424F5;
+$color14: #E65BF0;
+$color15: #e5c7e7;
diff --git a/.config/ags/scss/_notifications.scss b/.config/ags/scss/_notifications.scss
index 38e6b397d..40bb15fa6 100644
--- a/.config/ags/scss/_notifications.scss
+++ b/.config/ags/scss/_notifications.scss
@@ -93,17 +93,18 @@ $notif_surface: $t_background;
     color: $secondaryContainer;
 }
 
-.notif-close-btn {
+.notif-expand-btn {
     @include notif-rounding;
-    padding: 0rem 0.136rem;
+    min-width: 1.841rem;
+    min-height: 1.841rem;
 }
 
-.notif-close-btn:hover,
-.notif-close-btn:focus {
+.notif-expand-btn:hover,
+.notif-expand-btn:focus {
     background: $hovercolor;
 }
 
-.notif-close-btn:active {
+.notif-expand-btn:active {
     background: $activecolor;
 }
 
@@ -123,14 +124,17 @@ $notif_surface: $t_background;
 
 .osd-notif {
     @include notif-rounding;
-    background-color: transparentize($background, $transparentize_surface_amount_subtract_surface);
+    background-color: transparentize(
+        $background,
+        $transparentize_surface_amount_subtract_surface
+    );
     min-width: 30.682rem;
 }
 
 .notif-circprog-low {
     transition: 0ms linear;
     min-width: 0.136rem; // line width
-    min-height: 1.770rem;
+    min-height: 3.136rem;
     padding: 0rem;
     color: $onSecondaryContainer;
 }
@@ -138,7 +142,7 @@ $notif_surface: $t_background;
 .notif-circprog-normal {
     transition: 0ms linear;
     min-width: 0.136rem; // line width
-    min-height: 1.770rem;
+    min-height: 3.136rem;
     padding: 0rem;
     color: $onSecondaryContainer;
 }
@@ -146,7 +150,57 @@ $notif_surface: $t_background;
 .notif-circprog-critical {
     transition: 0ms linear;
     min-width: 0.136rem; // line width
-    min-height: 1.770rem;
+    min-height: 3.136rem;
     padding: 0rem;
-    color: $onSecondaryContainer;
-}
\ No newline at end of file
+    color: $secondaryContainer;
+}
+
+.notif-actions {
+    min-height: 2.045rem;
+}
+
+.notif-action {
+    @include small-rounding;
+}
+
+.notif-action-low {
+    background-color: mix($t_onSurfaceVariant, $t_surface, 10%);
+    color: $onSurfaceVariant;
+}
+
+.notif-action-low:focus,
+.notif-action-low:hover {
+    background-color: mix($t_onSurfaceVariant, $t_surface, 18%);
+}
+
+.notif-action-low:active {
+    background-color: mix($t_onSurfaceVariant, $t_surface, 23%);
+}
+
+.notif-action-normal {
+    background-color: mix($t_onSurfaceVariant, $t_surface, 10%);
+    color: $onSurfaceVariant;
+}
+
+.notif-action-normal:focus,
+.notif-action-normal:hover {
+    background-color: mix($t_onSurfaceVariant, $t_surface, 18%);
+}
+
+.notif-action-normal:active {
+    background-color: mix($t_onSurfaceVariant, $t_surface, 23%);
+}
+
+.notif-action-critical {
+    background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 10%);
+    color: $onSurfaceVariant;
+}
+
+.notif-action-critical:focus,
+.notif-action-critical:hover {
+    background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 18%);
+}
+
+.notif-action-critical:active {
+    background-color: mix($t_onSecondaryContainer, $t_secondaryContainer, 23%);
+}
diff --git a/.config/ags/scss/_osd.scss b/.config/ags/scss/_osd.scss
index 6c6e2dde2..15119a785 100644
--- a/.config/ags/scss/_osd.scss
+++ b/.config/ags/scss/_osd.scss
@@ -1,15 +1,19 @@
+// .osd-window {
+    // margin-top: 2.727rem;
+// }
+
 .osd-bg {
     min-width: 8.864rem;
     min-height: 3.409rem;
 }
 
 .osd-value {
+    @include elevation-border;
+    @include elevation2;
     background-color: $t_background;
     border-radius: 1.023rem;
     padding: 0.625rem 1.023rem;
     padding-top: 0.313rem;
-    margin: 10px;
-    @include elevation2;
 }
 
 .osd-progress {
@@ -113,4 +117,12 @@
     background-color: $background;
     color: $onBackground;
     box { background-color: $onBackground; }
+}
+
+.osd-show {
+    transition: 200ms cubic-bezier(0.1, 1, 0, 1);
+}
+
+.osd-hide {
+    transition: 190ms cubic-bezier(0.85, 0, 0.15, 1);
 }
\ No newline at end of file
diff --git a/.config/ags/scss/_overview.scss b/.config/ags/scss/_overview.scss
index 5f3f98e75..8cea4d76f 100644
--- a/.config/ags/scss/_overview.scss
+++ b/.config/ags/scss/_overview.scss
@@ -1,3 +1,7 @@
+.overview-window {
+    margin-top: 2.727rem;
+}
+
 .overview-search-box {
     @include menu_decel;
     @include large-rounding;
diff --git a/.config/ags/scss/_sidebars.scss b/.config/ags/scss/_sidebars.scss
index 30d4a7c66..6eb0abb24 100644
--- a/.config/ags/scss/_sidebars.scss
+++ b/.config/ags/scss/_sidebars.scss
@@ -12,7 +12,7 @@ $onChatgpt: $onPrimary;
     @include menu_decel;
     @include elevation-border;
     @include elevation2;
-    border-radius: $rounding_large - $elevation_margin;
+    border-radius: $rounding_large - $elevation_margin + 0.068rem;
     min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
     // min-height: 29.591rem;
     background-color: $t_background;
@@ -33,7 +33,7 @@ $onChatgpt: $onPrimary;
     @include menu_decel;
     @include elevation-border;
     @include elevation2;
-    border-radius: $rounding_large - $elevation_margin;
+    border-radius: $rounding_large - $elevation_margin + 0.068rem;
     min-width: 27.818rem; // COMMENT THIS LATER IF TEXT WRAP IS USED
     // min-height: 29.591rem;
     background-color: $t_background;
@@ -332,7 +332,7 @@ $onChatgpt: $onPrimary;
 
 .sidebar-selector-tab {
     @include small-rounding;
-    transition: 0ms;
+    @include menu_decel;
     min-height: 2.5rem;
     color: $onSurface;
 }
@@ -500,9 +500,28 @@ $onChatgpt: $onPrimary;
     min-height: 1.705rem;
 }
 
+.sidebar-chat-apiswitcher {
+    @include full-rounding;
+    @include group-padding;
+    background-color: $t_surface;
+}
+
+.sidebar-chat-apiswitcher-icon {
+    @include menu_decel;
+    @include full-rounding;
+    min-width:  2.182rem;
+    min-height: 2.182rem;
+    color: $onSurface;
+}
+
+.sidebar-chat-apiswitcher-icon-enabled {
+    background-color: $secondaryContainer;
+    color: $onSecondaryContainer;
+}
+
 .sidebar-chat-viewport {
     @include menu_decel;
-    margin: 0.682rem 0rem;
+    // margin: 0.682rem 0rem;
     padding: 0.682rem 0rem;
 }
 
@@ -645,7 +664,7 @@ $onChatgpt: $onPrimary;
     margin: 0rem 3.409rem;
 }
 
-.sidebar-chat-settings {
+.sidebar-chat-settings-toggles {
     margin: 0rem 5.455rem;
 }
 
@@ -687,4 +706,38 @@ $onChatgpt: $onPrimary;
 .sidebar-chat-chip-action-active {
     color: $sidebar_chat_textboxareaColor;
     border: 0.068rem solid $sidebar_chat_textboxareaColor;
-}
\ No newline at end of file
+}
+
+.sidebar-pin {
+    @include small-rounding;
+    @include menu_decel;
+    min-height: 2.386rem;
+    min-width: 2.386rem;
+    color: $onSurface;
+}
+
+.sidebar-pin:hover,
+.sidebar-pin:focus {
+    background-color: mix($t_surfaceVariant, $onSurfaceVariant, 90%);
+}
+
+.sidebar-pin:active {
+    background-color: mix($surfaceVariant, $onSurfaceVariant, 75%);
+}
+
+.sidebar-pin-enabled {
+    background-color: $primary;
+    label {
+        color: $onPrimary;
+    }
+}
+
+.sidebar-pin-enabled:hover,
+.sidebar-pin-enabled:focus {
+    background-color: mix($primary, $onPrimary, 90%);
+}
+
+.sidebar-pin-enabled:active {
+    background-color: mix($primary, $onPrimary, 80%);
+}
+
diff --git a/.config/ags/scss/main.scss b/.config/ags/scss/main.scss
index e6228c0bf..034f91bff 100644
--- a/.config/ags/scss/main.scss
+++ b/.config/ags/scss/main.scss
@@ -32,3 +32,9 @@
 .fadingRadial {
     transition: 50ms cubic-bezier(0.2, 0.0, 0, 1.0);
 }
+.sidebar-pinned {
+    margin: 0rem;
+    border-radius: 0rem;
+    border-bottom-right-radius: $rounding_large;
+    border: 0rem solid;
+}
\ No newline at end of file
diff --git a/.config/ags/services/chatgpt.js b/.config/ags/services/chatgpt.js
index 43db05ed4..28729f8d4 100644
--- a/.config/ags/services/chatgpt.js
+++ b/.config/ags/services/chatgpt.js
@@ -121,6 +121,7 @@ class ChatGPTService extends Service {
     _assistantPrompt = false;
     _messages = [];
     _cycleModels = true;
+    _temperature = 0.5;
     _requestCount = 0;
     _modelIndex = 0;
     _key = '';
@@ -159,6 +160,9 @@ class ChatGPTService extends Service {
         }
     }
 
+    get temperature() { return this._temperature }
+    set temperature(value) { this._temperature = value; }
+
     get messages() { return this._messages }
     get lastMessage() { return this._messages[this._messages.length - 1] }
 
@@ -218,6 +222,8 @@ class ChatGPTService extends Service {
         const body = {
             model: CHAT_MODELS[this._modelIndex],
             messages: this._messages.map(msg => { let m = { role: msg.role, content: msg.content }; return m; }),
+            temperature: this._temperature,
+            // temperature: 2, // <- Nuts
             stream: true,
         };
 
diff --git a/.config/ags/services/waifus.js b/.config/ags/services/waifus.js
new file mode 100644
index 000000000..3674713e6
--- /dev/null
+++ b/.config/ags/services/waifus.js
@@ -0,0 +1,170 @@
+import { Utils, Widget } from '../imports.js';
+import Service from 'resource:///com/github/Aylur/ags/service.js';
+import Gio from 'gi://Gio';
+import GLib from 'gi://GLib';
+import Soup from 'gi://Soup?version=3.0';
+import { fileExists } from './messages.js';
+
+class WaifuResponse extends Service {
+    static {
+        Service.register(this,
+            {
+                'delta': ['string'],
+            },
+            {
+                'content': ['string'],
+                'thinking': ['boolean'],
+                'done': ['boolean'],
+            });
+    }
+
+    _role = '';
+    _content = '';
+    _thinking = false;
+    _done = false;
+
+    constructor(role, content, thinking = false, done = false) {
+        super();
+        this._role = role;
+        this._content = content;
+        this._thinking = thinking;
+        this._done = done;
+    }
+
+    get done() { return this._done }
+    set done(isDone) { this._done = isDone; this.notify('done') }
+
+    get role() { return this._role }
+    set role(role) { this._role = role; this.emit('changed') }
+
+    get content() { return this._content }
+    set content(content) {
+        this._content = content;
+        this.notify('content')
+        this.emit('changed')
+    }
+
+    get label() { return this._parserState.parsed + this._parserState.stack.join('') }
+
+    get thinking() { return this._thinking }
+    set thinking(thinking) {
+        this._thinking = thinking;
+        this.notify('thinking')
+        this.emit('changed')
+    }
+
+    addDelta(delta) {
+        if (this.thinking) {
+            this.thinking = false;
+            this.content = delta;
+        }
+        else {
+            this.content += delta;
+        }
+        this.emit('delta', delta);
+    }
+}
+
+class WaifuService extends Service {
+    _endpoints = {
+        'im': 'https://api.waifu.im/search',
+        'nekos': 'https://nekos.life/api/neko',
+        'pics': 'https://api.waifu.pics/sfw/',
+    }
+    _headers = {
+        'im': { 'Accept-Version': 'v5' },
+        'nekos': {},
+        'pics': {},
+    }
+    _url = 'https://api.waifu.im/search';
+    _mode = 'im'; // Allowed: im
+    _responses = [];
+    _nsfw = false;
+    _minHeight = 600;
+
+    static {
+        Service.register(this, {
+            'initialized': [],
+            'clear': [],
+            'newResponse': ['string'],
+        });
+    }
+
+    constructor() {
+        super();
+        this.emit('initialized');
+    }
+
+    clear() {
+        this._responses = [];
+        this.emit('clear');
+    }
+
+    get mode() { return this._mode }
+    set mode(value) {
+        this._mode = value;
+        this._url = this._endpoints[this._mode];
+    }
+    get nsfw() { return this._nsfw }
+    set nsfw(value) { this._nsfw = value }
+    get responses() { return this._responses }
+
+    readResponseRecursive(stream, response) {
+        stream.read_line_async(
+            0, null,
+            (stream, res) => {
+                if (!stream) return;
+                const [bytes] = stream.read_line_finish(res);
+                const line = this._decoder.decode(bytes);
+                if (line && line != '') {
+                    let data = line.substr(6);
+                    if (data == '[DONE]') return;
+                    try {
+                        const result = JSON.parse(data);
+                        if (result.choices[0].finish_reason === 'stop') {
+                            response.done = true;
+                            return;
+                        }
+                        response.addDelta(result.choices[0].delta.content);
+                    }
+                    catch {
+                        response.addDelta(line + '\n');
+                    }
+                }
+                this.readResponseRecursive(stream, response);
+            });
+    }
+
+    fetch(msg) {
+        const taglist = msg.split(' ');
+        this.emit('newResponse', msg);
+        this._responses.push(msg);
+
+        const params = {
+            'included_tags': taglist,
+            'height': `>=${this._minHeight}`,
+            'nsfw': this._nsfw,
+        };
+
+        const session = new Soup.Session();
+        const message = new Soup.Message({
+            method: 'GET',
+            uri: GLib.Uri.parse(this._url, GLib.UriFlags.NONE),
+        });
+        session.send_message(message, (session, message) => {
+            if (message.status_code === 200) {
+                const responseBody = message.response_body.data;
+                const data = JSON.parse(responseBody);
+                // Process the response data as needed
+                console.log(data);
+                log(data);
+            } else {
+                logError('Request failed with status code: ' + message.status_code);
+            }
+        });
+
+    }
+}
+
+export default new WaifuService();
+
diff --git a/.config/ags/style.css b/.config/ags/style.css
index e82621801..c50978b5c 100644
--- a/.config/ags/style.css
+++ b/.config/ags/style.css
@@ -41,70 +41,73 @@
   transition: 0ms; }
 
 .txt {
-  color: #e5e1e6; }
+  color: #eae0e4; }
 
 .txt-primary {
-  color: #c4c0ff; }
+  color: #ffc4f5; }
 
 .txt-onSecondaryContainer {
-  color: #e3dff9; }
+  color: #f8daee; }
+
+.txt-onSurfaceVariant {
+  color: #d1c2cb; }
 
 .txt-shadow {
   text-shadow: 1px 2px 8px rgba(0, 0, 0, 0.69);
   margin: 10px; }
 
 .txt-badonkers {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   font-size: 3rem; }
 
 .txt-tiddies {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   font-size: 2.7273rem; }
 
 .txt-hugerass {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   font-size: 2.045rem; }
 
 .txt-hugeass {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   font-size: 1.8182rem; }
 
 .txt-larger {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   font-size: 1.6363rem; }
 
 .txt-large {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   font-size: 1.4545rem; }
 
 .txt-norm {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   font-size: 1.2727rem; }
 
 .txt-small {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   font-size: 1.0909rem; }
 
 .txt-smallie {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   font-size: 1rem; }
 
 .txt-smaller {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   font-size: 0.9091rem; }
 
 .txt-tiny {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   font-size: 0.7273rem; }
 
 .txt-poof {
   font-size: 0px; }
 
 .txt-subtext {
-  color: #a5a2a6; }
+  color: #a9a1a4; }
 
 .txt-action {
-  color: #c5c1c6; }
+  color: #c9c0c4; }
 
 .txt-semibold {
   font-weight: 500; }
@@ -119,7 +122,7 @@
   font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif; }
 
 .mainfont {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif; }
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif; }
 
 .icon-material {
   font-family: 'Material Symbols Rounded', 'Material Symbols Outlined', 'Material Symbols Sharp'; }
@@ -130,7 +133,7 @@
 .separator-circle {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  background-color: #e5e1e6;
+  background-color: #eae0e4;
   margin: 0rem 0.682rem;
   min-width: 0.545rem;
   min-height: 0.545rem; }
@@ -159,6 +162,12 @@
 .spacing-h-15 > revealer:last-child > * {
   margin-right: 0rem; }
 
+.spacing-h-15 > scrolledwindow > * {
+  margin-right: 1.023rem; }
+
+.spacing-h-15 > scrolledwindow:last-child > * {
+  margin-right: 0rem; }
+
 .spacing-v-5 > box {
   margin-bottom: 0.341rem; }
 
@@ -177,6 +186,18 @@
 .spacing-v-5-revealer > revealer:last-child > * {
   margin-bottom: 0rem; }
 
+.spacing-v-5-revealer > scrolledwindow > * {
+  margin-bottom: 0.341rem; }
+
+.spacing-v-5-revealer > scrolledwindow:last-child > * {
+  margin-bottom: 0rem; }
+
+.spacing-h-4 > * {
+  margin-right: 0.273rem; }
+
+.spacing-h-4 > *:last-child {
+  margin-right: 0rem; }
+
 .spacing-h-5 > * {
   margin-right: 0.341rem; }
 
@@ -195,6 +216,12 @@
 .spacing-h-5 > revealer:last-child > * {
   margin-right: 0rem; }
 
+.spacing-h-5 > scrolledwindow > * {
+  margin-right: 0.341rem; }
+
+.spacing-h-5 > scrolledwindow:last-child > * {
+  margin-right: 0rem; }
+
 .spacing-v-minus5 > * {
   margin-bottom: -0.341rem; }
 
@@ -213,6 +240,12 @@
 .spacing-h-10 > revealer:last-child > * {
   margin-right: 0rem; }
 
+.spacing-h-10 > scrolledwindow > * {
+  margin-right: 0.682rem; }
+
+.spacing-h-10 > scrolledwindow:last-child > * {
+  margin-right: 0rem; }
+
 .spacing-h-10 > flowboxchild > * {
   margin-right: 0.682rem; }
 
@@ -294,34 +327,34 @@
 .spacing-h--5 > box:last-child {
   margin-right: 0rem; }
 
-.spacing-v--5 > box {
+.spacing-v--5 > * {
   margin-bottom: -0.341rem; }
 
-.spacing-v--5 > box:last-child {
+.spacing-v--5 > *:last-child {
   margin-bottom: 0rem; }
 
-.spacing-v--5 > label {
-  margin-bottom: -0.341rem; }
-
-.spacing-v--5 > label:last-child {
-  margin-bottom: 0rem; }
-
-.spacing-v--10 > box {
-  margin-bottom: -0.682rem; }
-
-.spacing-v--10 > box:last-child {
-  margin-bottom: 0rem; }
-
-.spacing-v--10 > label {
-  margin-bottom: -0.682rem; }
-
-.spacing-v--10 > label:last-child {
-  margin-bottom: 0rem; }
-
-.spacing-h--20 > box {
+.spacing-h--10 > * {
   margin-left: -1.364rem; }
 
-.spacing-h--20 > box:first-child {
+.spacing-h--10 > *:first-child {
+  margin-left: 0rem; }
+
+.spacing-v--10 > * {
+  margin-bottom: -0.682rem; }
+
+.spacing-v--10 > *:last-child {
+  margin-bottom: 0rem; }
+
+.spacing-v--10 > * {
+  margin-bottom: -0.682rem; }
+
+.spacing-v--10 > *:last-child {
+  margin-bottom: 0rem; }
+
+.spacing-h--20 > * {
+  margin-left: -1.364rem; }
+
+.spacing-h--20 > *:first-child {
   margin-left: 0rem; }
 
 .instant {
@@ -330,11 +363,17 @@
 .menu-decel {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1); }
 
+.element-show {
+  transition: 300ms cubic-bezier(0.85, 0, 0.15, 1); }
+
+.element-hide {
+  transition: 300ms cubic-bezier(0.85, 0, 0.15, 1); }
+
 * {
-  caret-color: #c4c0ff; }
+  caret-color: #ffc4f5; }
   * selection {
-    background-color: #c7c4dd;
-    color: #2f2e42; }
+    background-color: #dbbed2;
+    color: #3d2b39; }
 
 @keyframes appear {
   from {
@@ -349,17 +388,17 @@ tooltip {
   animation-iteration-count: 1; }
 
 menu {
-  border-top: 1px solid rgba(58, 57, 63, 0.121);
-  border-left: 1px solid rgba(58, 57, 63, 0.121);
-  border-right: 1px solid rgba(44, 43, 49, 0.1105);
-  border-bottom: 1px solid rgba(44, 43, 49, 0.1105);
+  border-top: 1px solid rgba(62, 56, 60, 0.121);
+  border-left: 1px solid rgba(62, 56, 60, 0.121);
+  border-right: 1px solid rgba(48, 42, 46, 0.1105);
+  border-bottom: 1px solid rgba(48, 42, 46, 0.1105);
   padding: 0.681rem;
-  background: #27272b;
-  color: #c8c5d0;
+  background: #3b3338;
+  color: #d1c2cb;
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
   animation-name: appear;
-  animation-duration: 100ms;
+  animation-duration: 40ms;
   animation-timing-function: ease-out;
   animation-iteration-count: 1; }
 
@@ -378,54 +417,53 @@ menu > menuitem {
 
 menu > menuitem:hover,
 menu > menuitem:focus {
-  background-color: #37373c; }
+  background-color: #4a4147; }
 
 .separator-line {
-  background-color: #27272b;
+  background-color: #3b3338;
   min-width: 0.068rem;
   min-height: 0.068rem; }
 
 tooltip {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
-  background-color: #27272b;
-  color: #c8c5d0;
-  border: 1px solid #c8c5d0; }
+  background-color: #3b3338;
+  color: #d1c2cb;
+  border: 1px solid #d1c2cb; }
 
 .configtoggle-box {
-  padding: 0.205rem;
+  padding: 0.205rem 0.341rem;
   border: 0.136rem solid transparent; }
 
 .configtoggle-box:focus {
-  padding: 0.205rem;
-  border: 0.136rem solid #6d6b70; }
+  border: 0.136rem solid #716a6e; }
 
 .switch-bg {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  background-color: #161519;
-  border: 0.136rem solid #e5e1e6;
+  background-color: #191418;
+  border: 0.136rem solid #eae0e4;
   min-width: 2.864rem;
   min-height: 1.637rem; }
 
 .switch-bg-true {
-  background-color: #c4c0ff;
-  border: 0.136rem solid #c4c0ff; }
+  background-color: #ffc4f5;
+  border: 0.136rem solid #ffc4f5; }
 
 .switch-fg {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
-  background-color: #e5e1e6;
-  color: #1d1c22;
+  background-color: #eae0e4;
+  color: #211b1f;
   min-width: 0.819rem;
   min-height: 0.819rem;
   margin-left: 0.477rem; }
 
 .switch-fg-true {
-  background-color: #251a8c;
-  color: #c4c0ff;
+  background-color: #551251;
+  color: #ffc4f5;
   min-width: 1.431rem;
   min-height: 1.431rem;
   margin-left: 1.431rem; }
@@ -435,42 +473,88 @@ tooltip {
   min-width: 1.636rem;
   min-height: 0.819rem; }
 
+.segment-container {
+  border-radius: 9999px;
+  -gtk-outline-radius: 9999px;
+  border: 0.068rem solid #9a8d95; }
+
+.segment-container > *:first-child {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px; }
+
+.segment-container > * {
+  border-right: 0.068rem solid #9a8d95;
+  padding: 0.341rem 0.682rem; }
+
+.segment-container > *:last-child {
+  border-right: 0rem solid transparent;
+  border-top-right-radius: 9999px;
+  border-bottom-right-radius: 9999px; }
+
+.segment-btn {
+  color: #eae0e4; }
+
+.segment-btn:focus,
+.segment-btn:hover {
+  background-color: #3b3338;
+  color: #d1c2cb; }
+
+.segment-btn-enabled {
+  background-color: #554050;
+  color: #f8daee; }
+
+.segment-btn-enabled:hover,
+.segment-btn-enabled:focus {
+  background-color: #554050;
+  color: #f8daee; }
+
+.gap-v-5 {
+  min-height: 0.341rem; }
+
+.gap-h-5 {
+  min-width: 0.341rem; }
+
+.gap-v-10 {
+  min-height: 0.682rem; }
+
+.gap-h-10 {
+  min-width: 0.682rem; }
+
+.gap-v-15 {
+  min-height: 1.023rem; }
+
+.gap-h-15 {
+  min-width: 1.023rem; }
+
+.bar-height {
+  min-height: 2.727rem; }
+
 .bar-bg {
-  background-color: #0e0e10;
+  background-color: #100d10;
   min-height: 2.727rem; }
 
 .bar-sidespace {
   min-width: 1.5rem; }
 
 .bar-group-margin {
-  padding: 0.2rem; }
+  padding: 0.273rem 0rem; }
 
 .bar-group {
-  background-color: rgba(29, 28, 34, 0.31); }
-
-.bar-group-center {
-  border-bottom-left-radius: 1.364rem;
-  border-bottom-right-radius: 1.364rem;
-  padding: 0.2rem;
-  background-color: black; }
-
-.corner-bar-group {
-  border-radius: 1.364rem;
-  border-width: 0.068rem;
-  background-color: black; }
+  background-color: rgba(59, 51, 56, 0.45); }
 
 .bar-group-pad {
-  padding: 0rem 1.023rem; }
+  padding: 0.205rem; }
 
 .bar-group-pad-less {
   padding: 0rem 0.681rem; }
 
 .bar-group-pad-system {
   padding-left: 1.023rem;
-  padding-right: 0.547rem; }
+  padding-right: 0.341rem; }
 
 .bar-group-pad-music {
-  padding-right: 1.023rem; }
+  padding-right: 1.023rem;
+  padding-left: 0.341rem; }
 
 .bar-group-pad-left {
   padding-left: 1.364rem;
@@ -487,7 +571,8 @@ tooltip {
   padding-right: 0.681rem; }
 
 .bar-group-standalone {
-  border-radius: 1.364rem;
+  border-radius: 0.818rem;
+  -gtk-outline-radius: 0.818rem;
   -gtk-outline-radius: 1.364rem; }
 
 .bar-group-round {
@@ -511,103 +596,46 @@ tooltip {
   border-bottom-right-radius: 1.364rem; }
 
 .bar-ws-width {
-  min-width: 18.614rem; }
+  min-width: 18.341rem; }
+
+.bar-ws {
+  min-width: 1.774rem;
+  color: #676165;
+  color: #726c6f; }
+
+.bar-ws-active {
+  background-color: #554050;
+  color: #f8daee; }
+
+.bar-ws-occupied {
+  background-color: #3b3338;
+  color: #d1c2cb; }
 
 .bar-separator {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   min-width: 0.341rem;
   min-height: 0.341rem;
-  background-color: rgba(49, 48, 54, 0.31);
+  background-color: rgba(53, 47, 51, 0.31);
   margin: 0rem 0.341rem; }
 
 .bar-clock {
   font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
-  font-size: 1.2727rem;
-  color: #e5e1e6; }
+  font-size: 1.2727rem; }
 
 .bar-date {
   font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
   font-size: 1rem;
-  color: #e5e1e6; }
-
-.bar-ws {
-  min-height: 1.636rem;
-  min-width: 1.772rem;
-  font-size: 1.091rem;
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
-  border-top: 0.068rem solid;
-  border-bottom: 0.068rem solid;
-  border-color: transparent;
-  color: white; }
-
-.bar-ws-active-box {
-  transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1); }
-
-.bar-ws-active {
-  min-height: 1.5rem;
-  min-width: 1.5rem;
-  font-size: 1.091rem;
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
-  background-color: #c4c0ff;
-  color: #251a8c;
-  border-radius: 999px;
-  margin: 0.068rem; }
-
-.bar-ws-active-middledecor {
-  min-width: 0.682rem;
-  min-height: 0.682rem;
-  border-radius: 9999px;
-  background-color: black;
-  margin: 0rem 0.409rem; }
-
-.bar-ws-occupied {
-  background-color: #464559;
-  color: #e3dff9;
-  min-width: 1.772rem;
-  border-top: 0.068rem solid #e3dff9;
-  border-bottom: 0.068rem solid #e3dff9; }
-
-.bar-ws-occupied-left {
-  background-color: #464559;
-  color: #e3dff9;
-  min-width: 1.704rem;
-  border-top-left-radius: 999px;
-  border-bottom-left-radius: 999px;
-  border-left: 0.068rem solid #e3dff9;
-  border-top: 0.068rem solid #e3dff9;
-  border-bottom: 0.068rem solid #e3dff9;
-  border-right: 0px solid transparent; }
-
-.bar-ws-occupied-right {
-  background-color: #464559;
-  color: #e3dff9;
-  min-width: 1.704rem;
-  border-top-right-radius: 999px;
-  border-bottom-right-radius: 999px;
-  border-right: 0.068rem solid #e3dff9;
-  border-top: 0.068rem solid #e3dff9;
-  border-bottom: 0.068rem solid #e3dff9;
-  border-left: 0px solid transparent; }
-
-.bar-ws-occupied-left-right {
-  border-radius: 9999px;
-  -gtk-outline-radius: 9999px;
-  background-color: #464559;
-  color: #e3dff9;
-  min-width: 1.636rem;
-  border: 0.068rem solid #e3dff9; }
-
-.bar-ws-empty {
-  color: #e5e1e6;
-  border-color: transparent; }
+  color: #eae0e4; }
 
 .bar-batt {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  padding: 0rem 0.341rem;
-  background-color: #464559;
-  color: #e3dff9; }
+  min-height: 1.77rem;
+  min-width: 1.77rem;
+  border-radius: 10rem;
+  background-color: #554050;
+  color: #f8daee; }
 
 .bar-sidemodule {
   min-width: 26rem; }
@@ -620,35 +648,51 @@ tooltip {
   background-color: #374b3e;
   color: #d1e9d6; }
 
-.bar-batt-prog-low {
+.bar-batt-circprog {
+  transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
+  min-width: 0.068rem;
+  min-height: 1.636rem;
+  padding: 0rem;
+  background-color: #554050;
+  color: #f8daee; }
+
+.bar-batt-circprog-low {
+  transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
+  min-width: 0.068rem;
+  min-height: 1.636rem;
+  padding: 0rem;
   background-color: #ffb4a9;
   color: #930006; }
 
-.bar-batt-prog-full {
+.bar-batt-circprog-full {
+  transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
+  min-width: 0.068rem;
+  min-height: 1.636rem;
+  padding: 0rem;
   background-color: #374b3e;
   color: #d1e9d6; }
 
 .bar-music-playstate {
-  min-height: 1.770rem;
-  min-width: 1.770rem;
+  min-height: 1.77rem;
+  min-width: 1.77rem;
   border-radius: 10rem;
-  background-color: #464559;
-  color: #e3dff9; }
+  background-color: #554050;
+  color: #f8daee; }
 
 .bar-music-circprog {
   transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
   min-width: 0.068rem;
-  min-height: 1.770rem;
+  min-height: 1.636rem;
   padding: 0rem;
-  background-color: #464559;
-  color: #e3dff9; }
+  background-color: #554050;
+  color: #f8daee; }
 
 .bar-music-playstate-playing {
-  min-height: 1.770rem;
-  min-width: 1.770rem;
+  min-height: 1.77rem;
+  min-width: 1.77rem;
   border-radius: 10rem;
-  background-color: #464559;
-  color: #e3dff9; }
+  background-color: #554050;
+  color: #f8daee; }
 
 .bar-music-playstate-txt {
   transition: 100ms cubic-bezier(0.05, 0.7, 0.1, 1);
@@ -712,11 +756,11 @@ tooltip {
     min-width: 0.068rem;
     border-radius: 10rem; }
   .bar-prog-batt progress {
-    min-height: 0.680rem;
-    min-width: 0.680rem;
+    min-height: 0.68rem;
+    min-width: 0.68rem;
     margin: 0rem 0.137rem;
     border-radius: 10rem;
-    background-color: #e3dff9; }
+    background-color: #f8daee; }
 
 .bar-prog-batt-low progress {
   background-color: #930006; }
@@ -732,29 +776,16 @@ tooltip {
   border-radius: 10rem;
   min-width: 0.681rem;
   min-height: 0.681rem;
-  background-color: #e3dff9;
-  color: #464559; }
+  background-color: #d1c2cb; }
 
 .bar-batt-chargestate-charging-smaller {
   border-radius: 10rem;
   min-width: 0.409rem;
   min-height: 0.409rem;
-  background-color: #e3dff9;
-  color: #464559; }
-
-.bar-batt-chargestate-low {
-  background-color: #930006; }
-
-.bar-batt-chargestate-full {
-  background-color: #d1e9d6; }
-
-.bar-batt-percentage {
-  font-size: 1rem;
-  margin-top: -0.068rem;
-  font-weight: 500; }
+  background-color: #d1c2cb; }
 
 .corner {
-  background-color: #0e0e10;
+  background-color: #100d10;
   border-radius: 1.705rem;
   -gtk-outline-radius: 1.705rem; }
 
@@ -766,7 +797,7 @@ tooltip {
 .bar-topdesc {
   margin-top: -0.136rem;
   margin-bottom: -0.341rem;
-  color: #a5a2a6; }
+  color: #a9a1a4; }
 
 .bar-space-button {
   padding: 0.341rem; }
@@ -792,38 +823,53 @@ tooltip {
 .bar-systray {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  min-height: 1.909rem;
-  min-width: 1.909rem; }
+  margin: 0.137rem 0rem;
+  padding: 0rem 0.682rem; }
 
 .bar-systray-item {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  min-width: 1.909rem; }
+  min-height: 1.032rem;
+  min-width: 1.032rem; }
 
 .bar-statusicons {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
-  margin: 0.2rem;
+  margin: 0.273rem;
   padding: 0rem 0.614rem; }
 
 .bar-statusicons-hover {
-  background-color: #242325; }
+  background-color: #262225; }
 
 .bar-statusicons-active {
-  background-color: #39383b; }
+  background-color: #3c373a; }
+
+.bar-util-btn {
+  border-radius: 9999px;
+  -gtk-outline-radius: 9999px;
+  min-height: 1.77rem;
+  min-width: 1.77rem;
+  background-color: #3b3338; }
+
+.bar-util-btn:hover,
+.bar-util-btn:focus {
+  background-color: #4a4147; }
+
+.bar-util-btn:active {
+  background-color: #595055; }
 
 .cheatsheet-bg {
   border-radius: 1.705rem;
   -gtk-outline-radius: 1.705rem;
-  border-top: 1px solid rgba(165, 162, 167, 0.19);
-  border-left: 1px solid rgba(165, 162, 167, 0.19);
-  border-right: 1px solid rgba(129, 127, 132, 0.145);
-  border-bottom: 1px solid rgba(129, 127, 132, 0.145);
+  border-top: 1px solid rgba(169, 161, 165, 0.19);
+  border-left: 1px solid rgba(169, 161, 165, 0.19);
+  border-right: 1px solid rgba(134, 126, 130, 0.145);
+  border-bottom: 1px solid rgba(134, 126, 130, 0.145);
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.45);
   margin: 0.476rem;
   margin-bottom: 0.682rem;
-  background-color: #0e0e10;
+  background-color: #100d10;
   padding: 1.364rem; }
 
 .cheatsheet-key {
@@ -834,16 +880,16 @@ tooltip {
   padding: 0.136rem 0.205rem;
   border-radius: 0.409rem;
   -gtk-outline-radius: 0.409rem;
-  color: #c4c0ff;
-  border: 0.068rem solid #c4c0ff;
-  box-shadow: 0rem 0.136rem 0rem #c4c0ff;
+  color: #ffc4f5;
+  border: 0.068rem solid #ffc4f5;
+  box-shadow: 0rem 0.136rem 0rem #ffc4f5;
   font-weight: 500; }
 
 .cheatsheet-key-notkey {
   min-height: 1.364rem;
   padding: 0.136rem 0.205rem;
   margin: 0.17rem;
-  color: #e3dfff; }
+  color: #ffd6f5; }
 
 .cheatsheet-closebtn {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
@@ -854,10 +900,10 @@ tooltip {
 
 .cheatsheet-closebtn:hover,
 .cheatsheet-closebtn:focus {
-  background-color: #27272b; }
+  background-color: #3b3338; }
 
 .cheatsheet-closebtn:active {
-  background-color: #57565d; }
+  background-color: #685e64; }
 
 .cheatsheet-category-title {
   font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
@@ -872,12 +918,12 @@ tooltip {
 .bg-time-clock {
   font-family: 'Gabarito';
   font-size: 5.795rem;
-  color: #e5e1e6; }
+  color: #eae0e4; }
 
 .bg-time-date {
   font-family: 'Gabarito';
   font-size: 2.591rem;
-  color: #e5e1e6; }
+  color: #eae0e4; }
 
 .bg-distro-box {
   border-radius: 1.705rem;
@@ -888,12 +934,12 @@ tooltip {
 .bg-distro-txt {
   font-family: 'Gabarito';
   font-size: 1.432rem;
-  color: #e5e1e6; }
+  color: #eae0e4; }
 
 .bg-distro-name {
   font-family: 'Gabarito';
   font-size: 1.432rem;
-  color: #e3dff9; }
+  color: #f8daee; }
 
 .bg-graph {
   color: rgba(255, 255, 255, 0.5);
@@ -901,26 +947,26 @@ tooltip {
   border: 0.682rem solid; }
 
 .bg-quicklaunch-title {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
-  color: #c8c5d0; }
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  color: #d1c2cb; }
 
 .bg-quicklaunch-btn {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  background-color: #27272b;
-  color: #c8c5d0;
-  border: 0.068rem solid #a5a2a6;
+  background-color: #3b3338;
+  color: #d1c2cb;
+  border: 0.068rem solid #a9a1a4;
   min-width: 4.432rem;
   min-height: 2.045rem;
   padding: 0.273rem 0.682rem; }
 
 .bg-quicklaunch-btn:hover,
 .bg-quicklaunch-btn:focus {
-  background-color: #2f2f33; }
+  background-color: #433a3f; }
 
 .bg-quicklaunch-btn:active {
-  background-color: #37373c; }
+  background-color: #4a4147; }
 
 .bg-system-bg {
   border-radius: 1.159rem;
@@ -932,14 +978,14 @@ tooltip {
   min-height: 4.091rem;
   font-size: 0px;
   padding: 0rem;
-  background-color: #27272b; }
+  background-color: #3b3338; }
 
 .dock-bg {
   border-radius: 1.705rem;
   -gtk-outline-radius: 1.705rem;
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.45);
   margin: 0.476rem;
-  background-color: #0e0e10;
+  background-color: #100d10;
   padding: 0.682rem; }
 
 .dock-app-btn {
@@ -949,10 +995,10 @@ tooltip {
 
 .dock-app-btn:hover,
 .dock-app-btn:focus {
-  background-color: rgba(39, 38, 44, 0.31); }
+  background-color: rgba(43, 37, 41, 0.31); }
 
 .dock-app-btn:active {
-  background-color: rgba(59, 58, 63, 0.31); }
+  background-color: rgba(63, 57, 61, 0.31); }
 
 .dock-app-icon {
   min-width: 3.409rem;
@@ -960,20 +1006,23 @@ tooltip {
 
 .dock-separator {
   min-width: 0.068rem;
-  background-color: #27272b; }
+  background-color: #3b3338; }
 
 .osd-bg {
   min-width: 8.864rem;
   min-height: 3.409rem; }
 
 .osd-value {
-  background-color: #0e0e10;
+  border-top: 1px solid rgba(169, 161, 165, 0.19);
+  border-left: 1px solid rgba(169, 161, 165, 0.19);
+  border-right: 1px solid rgba(134, 126, 130, 0.145);
+  border-bottom: 1px solid rgba(134, 126, 130, 0.145);
+  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.45);
+  margin: 0.476rem;
+  background-color: #100d10;
   border-radius: 1.023rem;
   padding: 0.625rem 1.023rem;
-  padding-top: 0.313rem;
-  margin: 10px;
-  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.45);
-  margin: 0.476rem; }
+  padding-top: 0.313rem; }
 
 .osd-progress {
   min-height: 0.955rem;
@@ -985,36 +1034,36 @@ tooltip {
     min-height: 0.954rem;
     min-width: 0.068rem;
     border-radius: 10rem;
-    background-color: #464559; }
+    background-color: #554050; }
   .osd-progress progress {
     transition: 200ms cubic-bezier(0.1, 1, 0, 1);
     min-height: 0.680rem;
     min-width: 0.680rem;
     margin: 0rem 0.137rem;
     border-radius: 10rem;
-    background-color: #e3dff9; }
+    background-color: #f8daee; }
 
 .osd-icon {
-  color: #e3dfff; }
+  color: #ffd6f5; }
 
 .osd-label {
   font-size: 1.023rem;
   font-weight: 500;
-  color: #e5e1e6;
+  color: #eae0e4;
   margin-top: 0.341rem; }
 
 .osd-value-txt {
   font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
   font-size: 1.688rem;
   font-weight: 500;
-  color: #e5e1e6; }
+  color: #eae0e4; }
 
 .osd-notifs {
   padding-top: 0.313rem; }
 
 .osd-colorscheme {
   border-radius: 1.023rem;
-  background-color: #0e0e10;
+  background-color: #100d10;
   padding: 1.023rem;
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.45);
   margin: 0.476rem; }
@@ -1032,74 +1081,83 @@ tooltip {
     margin: 0.409rem; }
 
 .osd-color-primary {
-  background-color: #c4c0ff;
-  color: #251a8c; }
+  background-color: #ffc4f5;
+  color: #551251; }
   .osd-color-primary box {
-    background-color: #251a8c; }
+    background-color: #551251; }
 
 .osd-color-primaryContainer {
-  background-color: #3d36a2;
-  color: #e3dfff; }
+  background-color: #7e4178;
+  color: #ffd6f5; }
   .osd-color-primaryContainer box {
-    background-color: #e3dfff; }
+    background-color: #ffd6f5; }
 
 .osd-color-secondary {
-  background-color: #c7c4dd;
-  color: #2f2e42; }
+  background-color: #dbbed2;
+  color: #3d2b39; }
   .osd-color-secondary box {
-    background-color: #2f2e42; }
+    background-color: #3d2b39; }
 
 .osd-color-secondaryContainer {
-  background-color: #464559;
-  color: #e3dff9; }
+  background-color: #554050;
+  color: #f8daee; }
   .osd-color-secondaryContainer box {
-    background-color: #e3dff9; }
+    background-color: #f8daee; }
 
 .osd-color-surfaceVariant {
-  background-color: #27272b;
-  color: #c8c5d0; }
+  background-color: #3b3338;
+  color: #d1c2cb; }
   .osd-color-surfaceVariant box {
-    background-color: #c8c5d0; }
+    background-color: #d1c2cb; }
 
 .osd-color-surface {
-  background-color: #1d1c22;
-  color: #e5e1e6; }
+  background-color: #211b1f;
+  color: #eae0e4; }
   .osd-color-surface box {
-    background-color: #e5e1e6; }
+    background-color: #eae0e4; }
 
 .osd-color-background {
-  background-color: #0e0e10;
-  color: #e5e1e6; }
+  background-color: #100d10;
+  color: #eae0e4; }
   .osd-color-background box {
-    background-color: #e5e1e6; }
+    background-color: #eae0e4; }
+
+.osd-show {
+  transition: 200ms cubic-bezier(0.1, 1, 0, 1); }
+
+.osd-hide {
+  transition: 190ms cubic-bezier(0.85, 0, 0.15, 1); }
+
+.overview-window {
+  margin-top: 2.727rem; }
 
 .overview-search-box {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
   border-radius: 1.705rem;
   -gtk-outline-radius: 1.705rem;
-  border-top: 1px solid rgba(165, 162, 167, 0.19);
-  border-left: 1px solid rgba(165, 162, 167, 0.19);
-  border-right: 1px solid rgba(129, 127, 132, 0.145);
-  border-bottom: 1px solid rgba(129, 127, 132, 0.145);
+  border-top: 1px solid rgba(169, 161, 165, 0.19);
+  border-left: 1px solid rgba(169, 161, 165, 0.19);
+  border-right: 1px solid rgba(134, 126, 130, 0.145);
+  border-bottom: 1px solid rgba(134, 126, 130, 0.145);
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.45);
   margin: 0.476rem;
   min-width: 13.636rem;
   min-height: 3.409rem;
   padding: 0rem 1.364rem;
   padding-right: 2.864rem;
-  background-color: #0e0e10;
-  color: #e5e1e6;
+  background-color: #100d10;
+  color: #eae0e4;
   caret-color: transparent; }
   .overview-search-box selection {
-    background-color: #c7c4dd;
-    color: #2f2e42; }
+    background-color: #dbbed2;
+    color: #3d2b39; }
 
 .overview-search-box-extended {
   min-width: 25.909rem;
-  caret-color: #e3dff9; }
+  caret-color: #f8daee; }
 
 .overview-search-prompt {
-  color: #a5a2a6; }
+  color: #a9a1a4; }
 
 .overview-search-icon {
   margin: 0rem 1.023rem; }
@@ -1115,16 +1173,16 @@ tooltip {
 .overview-search-results {
   border-radius: 1.705rem;
   -gtk-outline-radius: 1.705rem;
-  border-top: 1px solid rgba(165, 162, 167, 0.19);
-  border-left: 1px solid rgba(165, 162, 167, 0.19);
-  border-right: 1px solid rgba(129, 127, 132, 0.145);
-  border-bottom: 1px solid rgba(129, 127, 132, 0.145);
+  border-top: 1px solid rgba(169, 161, 165, 0.19);
+  border-left: 1px solid rgba(169, 161, 165, 0.19);
+  border-right: 1px solid rgba(134, 126, 130, 0.145);
+  border-bottom: 1px solid rgba(134, 126, 130, 0.145);
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.45);
   margin: 0.476rem;
   min-width: 28.773rem;
   padding: 0.682rem;
-  background-color: #0e0e10;
-  color: #e5e1e6; }
+  background-color: #100d10;
+  color: #eae0e4; }
 
 .overview-search-results-icon {
   margin: 0rem 0.682rem;
@@ -1158,43 +1216,43 @@ tooltip {
 .overview-tasks {
   border-radius: 1.705rem;
   -gtk-outline-radius: 1.705rem;
-  border-top: 1px solid rgba(165, 162, 167, 0.19);
-  border-left: 1px solid rgba(165, 162, 167, 0.19);
-  border-right: 1px solid rgba(129, 127, 132, 0.145);
-  border-bottom: 1px solid rgba(129, 127, 132, 0.145);
+  border-top: 1px solid rgba(169, 161, 165, 0.19);
+  border-left: 1px solid rgba(169, 161, 165, 0.19);
+  border-right: 1px solid rgba(134, 126, 130, 0.145);
+  border-bottom: 1px solid rgba(134, 126, 130, 0.145);
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.45);
   margin: 0.476rem;
   padding: 0.341rem;
-  background-color: #0e0e10;
-  color: #e5e1e6; }
+  background-color: #100d10;
+  color: #eae0e4; }
 
 .overview-tasks-workspace {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
   margin: 0.341rem;
-  background-color: rgba(50, 48, 54, 0.1147); }
+  background-color: rgba(54, 47, 51, 0.1147); }
 
 .overview-tasks-workspace-number {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
-  color: rgba(215, 211, 216, 0.31); }
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  color: rgba(220, 210, 214, 0.31); }
 
 .overview-tasks-window {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
-  background-color: rgba(70, 69, 89, 0.5);
-  color: #e3dff9;
-  border: 0.068rem solid rgba(227, 223, 249, 0.07); }
+  background-color: rgba(85, 64, 80, 0.5);
+  color: #f8daee;
+  border: 0.068rem solid rgba(248, 218, 238, 0.07); }
 
 .overview-tasks-window:hover,
 .overview-tasks-window:focus {
-  background-color: rgba(87, 86, 112, 0.525); }
+  background-color: rgba(108, 82, 103, 0.525); }
 
 .overview-tasks-window:active {
-  background-color: rgba(102, 100, 131, 0.55); }
+  background-color: rgba(128, 97, 121, 0.55); }
 
 .overview-tasks-window-selected {
-  background-color: rgba(102, 100, 131, 0.55); }
+  background-color: rgba(128, 97, 121, 0.55); }
 
 .overview-tasks-window-dragging {
   opacity: 0.2; }
@@ -1202,13 +1260,13 @@ tooltip {
 .osk-window {
   border-radius: 1.705rem;
   -gtk-outline-radius: 1.705rem;
-  border-top: 1px solid rgba(165, 162, 167, 0.19);
-  border-left: 1px solid rgba(165, 162, 167, 0.19);
-  border-right: 1px solid rgba(129, 127, 132, 0.145);
-  border-bottom: 1px solid rgba(129, 127, 132, 0.145);
+  border-top: 1px solid rgba(169, 161, 165, 0.19);
+  border-left: 1px solid rgba(169, 161, 165, 0.19);
+  border-right: 1px solid rgba(134, 126, 130, 0.145);
+  border-bottom: 1px solid rgba(134, 126, 130, 0.145);
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.45);
   margin: 0.476rem;
-  background-color: #0e0e10; }
+  background-color: #100d10; }
 
 .osk-body {
   padding: 1.023rem;
@@ -1225,7 +1283,7 @@ tooltip {
 .osk-dragline {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  background-color: #27272b;
+  background-color: #3b3338;
   min-height: 0.273rem;
   min-width: 10.227rem;
   margin-top: 0.545rem;
@@ -1233,22 +1291,22 @@ tooltip {
 
 .osk-key {
   border-radius: 0.682rem;
-  background-color: rgba(39, 39, 43, 0.31);
-  color: #c8c5d0;
+  background-color: rgba(59, 51, 56, 0.31);
+  color: #d1c2cb;
   padding: 0.188rem;
   font-weight: 500;
   font-size: 1.091rem; }
 
 .osk-key:hover,
 .osk-key:focus {
-  background-color: rgba(55, 55, 60, 0.31); }
+  background-color: rgba(74, 65, 71, 0.31); }
 
 .osk-key:active {
-  background-color: rgba(87, 86, 93, 0.31);
+  background-color: rgba(104, 94, 100, 0.31);
   font-size: 1.091rem; }
 
 .osk-key-active {
-  background-color: rgba(87, 86, 93, 0.31); }
+  background-color: rgba(104, 94, 100, 0.31); }
 
 .osk-key-normal {
   min-width: 2.5rem;
@@ -1276,31 +1334,31 @@ tooltip {
 
 .osk-control-button {
   border-radius: 0.682rem;
-  background-color: rgba(39, 39, 43, 0.31);
-  color: #c8c5d0;
+  background-color: rgba(59, 51, 56, 0.31);
+  color: #d1c2cb;
   font-weight: 500;
   font-size: 1.091rem;
   padding: 0.682rem; }
 
 .osk-control-button:hover,
 .osk-control-button:focus {
-  background-color: rgba(55, 55, 60, 0.31); }
+  background-color: rgba(74, 65, 71, 0.31); }
 
 .osk-control-button:active {
-  background-color: rgba(87, 86, 93, 0.31);
+  background-color: rgba(104, 94, 100, 0.31);
   font-size: 1.091rem; }
 
 .sidebar-right {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
-  border-top: 1px solid rgba(165, 162, 167, 0.19);
-  border-left: 1px solid rgba(165, 162, 167, 0.19);
-  border-right: 1px solid rgba(129, 127, 132, 0.145);
-  border-bottom: 1px solid rgba(129, 127, 132, 0.145);
+  border-top: 1px solid rgba(169, 161, 165, 0.19);
+  border-left: 1px solid rgba(169, 161, 165, 0.19);
+  border-right: 1px solid rgba(134, 126, 130, 0.145);
+  border-bottom: 1px solid rgba(134, 126, 130, 0.145);
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.45);
   margin: 0.476rem;
-  border-radius: 1.229rem;
+  border-radius: 1.297rem;
   min-width: 27.818rem;
-  background-color: #0e0e10;
+  background-color: #100d10;
   padding: 1.023rem; }
 
 .sideright-show {
@@ -1312,15 +1370,15 @@ tooltip {
 
 .sidebar-left {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
-  border-top: 1px solid rgba(165, 162, 167, 0.19);
-  border-left: 1px solid rgba(165, 162, 167, 0.19);
-  border-right: 1px solid rgba(129, 127, 132, 0.145);
-  border-bottom: 1px solid rgba(129, 127, 132, 0.145);
+  border-top: 1px solid rgba(169, 161, 165, 0.19);
+  border-left: 1px solid rgba(169, 161, 165, 0.19);
+  border-right: 1px solid rgba(134, 126, 130, 0.145);
+  border-bottom: 1px solid rgba(134, 126, 130, 0.145);
   box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.45);
   margin: 0.476rem;
-  border-radius: 1.229rem;
+  border-radius: 1.297rem;
   min-width: 27.818rem;
-  background-color: #0e0e10;
+  background-color: #100d10;
   padding: 1.023rem; }
 
 .sideleft-show {
@@ -1334,12 +1392,12 @@ tooltip {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
   padding: 0.341rem;
-  background-color: rgba(29, 28, 34, 0.31); }
+  background-color: rgba(33, 27, 31, 0.31); }
 
 .sidebar-group-nopad {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
-  background-color: rgba(29, 28, 34, 0.31); }
+  background-color: rgba(33, 27, 31, 0.31); }
 
 .sidebar-group-invisible {
   padding: 0.341rem; }
@@ -1351,47 +1409,47 @@ tooltip {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   padding: 0.341rem;
-  background-color: rgba(29, 28, 34, 0.31); }
+  background-color: rgba(33, 27, 31, 0.31); }
 
 .sidebar-iconbutton {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
-  color: #e5e1e6;
+  color: #eae0e4;
   min-width: 2.727rem;
   min-height: 2.727rem; }
 
 .sidebar-iconbutton:hover,
 .sidebar-iconbutton:focus {
-  background-color: #656479; }
+  background-color: #765f70; }
 
 .sidebar-iconbutton:active {
-  background-color: #858399; }
+  background-color: #967e8f; }
 
 .sidebar-button {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
   padding: 0rem 0.818rem;
-  background-color: #464559;
-  color: #e3dff9; }
+  background-color: #554050;
+  color: #f8daee; }
 
 .sidebar-button-nopad {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
-  background-color: #464559;
-  color: #e3dff9; }
+  background-color: #554050;
+  color: #f8daee; }
 
 .sidebar-button:hover,
 .sidebar-button:focus {
-  background-color: #656479; }
+  background-color: #765f70; }
 
 .sidebar-button:active {
-  background-color: #858399; }
+  background-color: #967e8f; }
 
 .sidebar-button-nopad:hover,
 .sidebar-button-nopad:focus {
-  background-color: #656479; }
+  background-color: #765f70; }
 
 .sidebar-button-nopad:active {
-  background-color: #858399; }
+  background-color: #967e8f; }
 
 .sidebar-button-left {
   border-top-left-radius: 0.818rem;
@@ -1410,20 +1468,20 @@ tooltip {
   -gtk-outline-radius: 0.818rem; }
 
 .sidebar-button-active {
-  background-color: #c4c0ff;
-  color: #251a8c; }
+  background-color: #ffc4f5;
+  color: #551251; }
 
 .sidebar-button-active:hover,
 .sidebar-button-active:focus {
-  background-color: rgba(195, 191, 253, 0.93); }
+  background-color: rgba(253, 195, 243, 0.93); }
 
 .sidebar-button-active:active {
-  background-color: rgba(191, 188, 246, 0.79); }
+  background-color: rgba(246, 191, 237, 0.79); }
 
 .sidebar-buttons-separator {
   min-width: 0.068rem;
   min-height: 0.068rem;
-  background-color: #c8c5d0; }
+  background-color: #d1c2cb; }
 
 .sidebar-navrail {
   padding: 0rem 1.159rem; }
@@ -1435,19 +1493,19 @@ tooltip {
 
 .sidebar-navrail-btn:hover > box > label:first-child,
 .sidebar-navrail-btn:focus > box > label:first-child {
-  background-color: rgba(100, 99, 105, 0.379); }
+  background-color: rgba(116, 105, 111, 0.379); }
 
 .sidebar-navrail-btn:active > box > label:first-child {
-  background-color: #4f4f54; }
+  background-color: #61575d; }
 
 .sidebar-navrail-btn-active > box > label:first-child {
-  background-color: #464559;
-  color: #e3dff9; }
+  background-color: #554050;
+  color: #f8daee; }
 
 .sidebar-navrail-btn-active:hover > box > label:first-child,
 .sidebar-navrail-btn-active:focus > box > label:first-child {
-  background-color: rgba(71, 70, 90, 0.93);
-  color: rgba(225, 221, 247, 0.93); }
+  background-color: rgba(86, 65, 81, 0.93);
+  color: rgba(246, 216, 236, 0.93); }
 
 .sidebar-sysinfo-grouppad {
   padding: 1.159rem; }
@@ -1457,8 +1515,8 @@ tooltip {
   min-width: 0.818rem;
   min-height: 4.091rem;
   padding: 0.409rem;
-  background-color: #464559;
-  color: #e3dff9;
+  background-color: #554050;
+  color: #f8daee;
   font-size: 0px; }
 
 .sidebar-memory-swap-circprog {
@@ -1467,16 +1525,16 @@ tooltip {
   min-height: 2.255rem;
   padding: 0.409rem;
   margin: 0.918rem;
-  background-color: #464559;
-  color: #e3dff9;
+  background-color: #554050;
+  color: #f8daee;
   font-size: 0px; }
 
 .sidebar-cpu-circprog {
   min-width: 0.818rem;
   min-height: 3.409rem;
   padding: 0.409rem;
-  background-color: #464559;
-  color: #e3dff9;
+  background-color: #554050;
+  color: #f8daee;
   transition: 1000ms cubic-bezier(0.1, 1, 0, 1);
   font-size: 0px; }
 
@@ -1491,14 +1549,14 @@ tooltip {
   -gtk-outline-radius: 9999px;
   min-width: 0.273rem;
   min-height: 2.045rem;
-  background-color: rgba(200, 197, 208, 0.31); }
+  background-color: rgba(209, 194, 203, 0.31); }
 
 .sidebar-scrollbar slider:hover,
 .sidebar-scrollbar slider:focus {
-  background-color: rgba(200, 197, 208, 0.448); }
+  background-color: rgba(209, 194, 203, 0.448); }
 
 .sidebar-scrollbar slider:active {
-  background-color: #78767e; }
+  background-color: #867b82; }
 
 .sidebar-calendar-btn {
   border-radius: 9999px;
@@ -1506,7 +1564,7 @@ tooltip {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
   min-height: 2.523rem;
   min-width: 2.523rem;
-  color: #e5e1e6; }
+  color: #eae0e4; }
 
 .sidebar-calendar-btn:hover,
 .sidebar-calendar-btn:focus {
@@ -1520,18 +1578,18 @@ tooltip {
   margin-right: -10.341rem; }
 
 .sidebar-calendar-btn-today {
-  background-color: #c4c0ff;
-  color: #251a8c; }
+  background-color: #ffc4f5;
+  color: #551251; }
 
 .sidebar-calendar-btn-today:hover,
 .sidebar-calendar-btn-today:focus {
-  background-color: rgba(195, 191, 253, 0.93); }
+  background-color: rgba(253, 195, 243, 0.93); }
 
 .sidebar-calendar-btn-today:active {
-  background-color: rgba(191, 188, 246, 0.79); }
+  background-color: rgba(246, 191, 237, 0.79); }
 
 .sidebar-calendar-btn-othermonth {
-  color: #817f84; }
+  color: #867e82; }
 
 .sidebar-calendar-header {
   margin: 0.341rem; }
@@ -1540,50 +1598,50 @@ tooltip {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   padding: 0rem 0.682rem;
-  background-color: rgba(39, 39, 43, 0.31);
-  color: #c8c5d0; }
+  background-color: rgba(59, 51, 56, 0.31);
+  color: #d1c2cb; }
 
 .sidebar-calendar-monthyear-btn:hover,
 .sidebar-calendar-monthyear-btn:focus {
-  background-color: rgba(75, 74, 80, 0.3445);
-  color: #c0bdc8; }
+  background-color: rgba(92, 83, 89, 0.3445);
+  color: #cabbc4; }
 
 .sidebar-calendar-monthyear-btn:active {
-  background-color: #3f3f44;
-  color: #b0adb7; }
+  background-color: #52484e;
+  color: #bbadb5; }
 
 .sidebar-calendar-monthshift-btn {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   min-width: 2.045rem;
   min-height: 2.045rem;
-  background-color: rgba(39, 39, 43, 0.31);
-  color: #c8c5d0; }
+  background-color: rgba(59, 51, 56, 0.31);
+  color: #d1c2cb; }
 
 .sidebar-calendar-monthshift-btn:hover {
-  background-color: rgba(75, 74, 80, 0.3445);
-  color: #c0bdc8; }
+  background-color: rgba(92, 83, 89, 0.3445);
+  color: #cabbc4; }
 
 .sidebar-calendar-monthshift-btn:active {
-  background-color: #3f3f44;
-  color: #b0adb7; }
+  background-color: #52484e;
+  color: #bbadb5; }
 
 .sidebar-selector-tab {
   border-radius: 0.818rem;
   -gtk-outline-radius: 0.818rem;
-  transition: 0ms;
+  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
   min-height: 2.5rem;
-  color: #e5e1e6; }
+  color: #eae0e4; }
 
 .sidebar-selector-tab:hover,
 .sidebar-selector-tab:focus {
-  background-color: rgba(100, 99, 105, 0.379); }
+  background-color: rgba(116, 105, 111, 0.379); }
 
 .sidebar-selector-tab:active {
-  background-color: #4f4f54; }
+  background-color: #61575d; }
 
 .sidebar-selector-tab-active > box > label {
-  color: #c4c0ff; }
+  color: #ffc4f5; }
 
 .sidebar-selector-highlight-offset {
   margin-top: -0.205rem;
@@ -1591,14 +1649,14 @@ tooltip {
 
 .sidebar-selector-highlight {
   transition: 180ms ease-in-out;
-  color: #c4c0ff;
+  color: #ffc4f5;
   min-height: 0.205rem; }
 
 .sidebar-todo-item {
   padding-right: 0.545rem; }
 
 .sidebar-todo-item-even {
-  background-color: rgba(39, 39, 43, 0.1); }
+  background-color: rgba(59, 51, 56, 0.1); }
 
 .sidebar-todo-item-action {
   border-radius: 9999px;
@@ -1607,17 +1665,17 @@ tooltip {
 
 .sidebar-todo-item-action:hover,
 .sidebar-todo-item-action:focus {
-  background-color: rgba(69, 67, 73, 0.31); }
+  background-color: rgba(73, 66, 70, 0.31); }
 
 .sidebar-todo-item-action:active {
-  background-color: rgba(99, 97, 103, 0.31); }
+  background-color: rgba(103, 96, 100, 0.31); }
 
 .sidebar-todo-crosser {
   transition: margin 200ms cubic-bezier(0.1, 1, 0, 1), background-color 0ms;
   min-width: 0rem; }
 
 .sidebar-todo-crosser-crossed {
-  background-color: #e5e1e6; }
+  background-color: #eae0e4; }
 
 .sidebar-todo-crosser-removed {
   background-color: #ffb4a9; }
@@ -1626,30 +1684,30 @@ tooltip {
   border-radius: 0.818rem;
   min-height: 2.045rem;
   padding: 0.341rem;
-  background-color: #464559;
-  color: #e3dff9; }
+  background-color: #554050;
+  color: #f8daee; }
 
 .sidebar-clipboard-item:hover,
 .sidebar-clipboard-item:focus {
-  background-color: #565469; }
+  background-color: #654f60; }
 
 .sidebar-clipboard-item:active {
-  background-color: #656479; }
+  background-color: #765f70; }
 
 .sidebar-todo-new {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
-  color: #e3dff9;
+  color: #f8daee;
   margin: 0.341rem;
   padding: 0.205rem 0.545rem;
-  border: 0.068rem solid #e5e1e6; }
+  border: 0.068rem solid #eae0e4; }
 
 .sidebar-todo-new:hover,
 .sidebar-todo-new:focus {
-  background-color: #4b4a5e; }
+  background-color: #5a4555; }
 
 .sidebar-todo-new:active {
-  background-color: #656479; }
+  background-color: #765f70; }
 
 .sidebar-todo-add {
   border-radius: 9999px;
@@ -1657,15 +1715,15 @@ tooltip {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
   min-width: 1.705rem;
   min-height: 1.705rem;
-  color: #e3dff9;
-  border: 0.068rem solid #e5e1e6; }
+  color: #f8daee;
+  border: 0.068rem solid #eae0e4; }
 
 .sidebar-todo-add:hover,
 .sidebar-todo-add:focus {
-  background-color: #4b4a5e; }
+  background-color: #5a4555; }
 
 .sidebar-todo-add:active {
-  background-color: #656479; }
+  background-color: #765f70; }
 
 .sidebar-todo-add-available {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
@@ -1673,61 +1731,78 @@ tooltip {
   -gtk-outline-radius: 9999px;
   min-width: 1.705rem;
   min-height: 1.705rem;
-  background-color: #c4c0ff;
-  color: #251a8c;
-  border: 0.068rem solid #c4c0ff; }
+  background-color: #ffc4f5;
+  color: #551251;
+  border: 0.068rem solid #ffc4f5; }
 
 .sidebar-todo-add-available:hover,
 .sidebar-todo-add-available:focus {
-  background-color: #bfbbfc; }
+  background-color: #fabff0; }
 
 .sidebar-todo-add-available:active {
-  background-color: #a49fe8; }
+  background-color: #dda0d4; }
 
 .sidebar-todo-entry {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
   border-radius: 0.818rem;
   -gtk-outline-radius: 0.818rem;
-  background-color: #27272b;
-  color: #c8c5d0;
-  caret-color: #c8c5d0;
+  background-color: #3b3338;
+  color: #d1c2cb;
+  caret-color: #d1c2cb;
   margin: 0rem 0.341rem;
   min-height: 1.773rem;
   min-width: 0rem;
   padding: 0.205rem 0.682rem;
-  border: 0.068rem solid #78767e; }
+  border: 0.068rem solid #867b82; }
 
 .sidebar-todo-entry:focus {
-  border: 0.068rem solid #b8b5c0; }
+  border: 0.068rem solid #c2b4bc; }
 
 .sidebar-module {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
   padding: 0.341rem;
-  background-color: rgba(29, 28, 34, 0.31); }
+  background-color: rgba(33, 27, 31, 0.31); }
 
 .sidebar-module-btn-arrow {
   border-radius: 9999px;
   -gtk-outline-radius: 9999px;
   font-family: 'Material Symbols Rounded', 'Material Symbols Outlined', 'Material Symbols Sharp';
-  background-color: rgba(39, 39, 43, 0.31);
+  background-color: rgba(59, 51, 56, 0.31);
   min-width: 1.705rem;
   min-height: 1.705rem; }
 
+.sidebar-chat-apiswitcher {
+  border-radius: 9999px;
+  -gtk-outline-radius: 9999px;
+  padding: 0.341rem;
+  background-color: rgba(33, 27, 31, 0.31); }
+
+.sidebar-chat-apiswitcher-icon {
+  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  border-radius: 9999px;
+  -gtk-outline-radius: 9999px;
+  min-width: 2.182rem;
+  min-height: 2.182rem;
+  color: #eae0e4; }
+
+.sidebar-chat-apiswitcher-icon-enabled {
+  background-color: #554050;
+  color: #f8daee; }
+
 .sidebar-chat-viewport {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
-  margin: 0.682rem 0rem;
   padding: 0.682rem 0rem; }
 
 .sidebar-chat-textarea {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
-  border: 0.068rem solid #67666d;
+  border: 0.068rem solid #776c73;
   padding: 0.682rem; }
 
 .sidebar-chat-entry {
-  color: #c8c5d0;
-  caret-color: #c8c5d0;
+  color: #d1c2cb;
+  caret-color: #d1c2cb;
   min-height: 1.773rem;
   min-width: 0rem; }
 
@@ -1736,25 +1811,25 @@ tooltip {
   min-width: 1.705rem;
   min-height: 1.705rem;
   border-radius: 0.478rem;
-  background-color: #67666d; }
+  background-color: #776c73; }
 
 .sidebar-chat-send:hover,
 .sidebar-chat-send:focus {
-  background-color: #6b6a71; }
+  background-color: #7b6f77; }
 
 .sidebar-chat-send:active {
-  background-color: #807e89; }
+  background-color: #91828c; }
 
 .sidebar-chat-send-available {
-  background-color: #c4c0ff;
-  color: #251a8c; }
+  background-color: #ffc4f5;
+  color: #551251; }
 
 .sidebar-chat-send-available:hover,
 .sidebar-chat-send-available:focus {
-  background-color: #bfbbfc; }
+  background-color: #fabff0; }
 
 .sidebar-chat-send-available:active {
-  background-color: #a49fe8; }
+  background-color: #dda0d4; }
 
 .sidebar-chat-message {
   margin: 0.682rem; }
@@ -1765,13 +1840,13 @@ tooltip {
   min-width: 0.136rem; }
 
 .sidebar-chat-indicator-user {
-  background-color: #e5e1e6; }
+  background-color: #eae0e4; }
 
 .sidebar-chat-indicator-bot {
-  background-color: #c4c0ff; }
+  background-color: #ffc4f5; }
 
 .sidebar-chat-indicator-System {
-  background-color: #c7c4dd; }
+  background-color: #dbbed2; }
 
 .sidebar-chat-name {
   font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
@@ -1791,19 +1866,19 @@ tooltip {
 .sidebar-chat-codeblock {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
-  background-color: rgba(71, 71, 76, 0.31);
-  color: #c8c5d0;
+  background-color: rgba(89, 80, 85, 0.31);
+  color: #d1c2cb;
   margin: 0rem 0.682rem;
-  border: 0.068rem solid rgba(227, 223, 249, 0.07); }
+  border: 0.068rem solid rgba(248, 218, 238, 0.07); }
 
 .sidebar-chat-codeblock-topbar {
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   margin: 0.273rem;
   margin-bottom: 0rem;
-  background-color: #464559;
-  color: #e3dff9;
+  background-color: #554050;
+  color: #f8daee;
   border-radius: 0.886rem;
-  border: 0.068rem solid #565469;
+  border: 0.068rem solid #654f60;
   border-top-left-radius: 0.886rem;
   border-top-right-radius: 0.886rem;
   padding: 0.341rem 0.477rem; }
@@ -1820,10 +1895,10 @@ tooltip {
 
 .sidebar-chat-codeblock-topbar-btn:hover,
 .sidebar-chat-codeblock-topbar-btn:focus {
-  background-color: #656479; }
+  background-color: #765f70; }
 
 .sidebar-chat-codeblock-topbar-btn:active {
-  background-color: #858399; }
+  background-color: #967e8f; }
 
 .sidebar-chat-codeblock-code {
   font-family: 'JetBrains Mono NF', 'JetBrains Mono Nerd Font', 'JetBrains Mono NL', 'SpaceMono NF', 'SpaceMono Nerd Font', monospace;
@@ -1831,13 +1906,13 @@ tooltip {
 
 .sidebar-chat-divider {
   min-height: 1px;
-  background-color: #67666d;
+  background-color: #776c73;
   margin: 0rem 0.545rem; }
 
 .sidebar-chat-welcome-txt {
   margin: 0rem 3.409rem; }
 
-.sidebar-chat-settings {
+.sidebar-chat-settings-toggles {
   margin: 0rem 5.455rem; }
 
 .sidebar-chat-welcome-icon {
@@ -1862,40 +1937,67 @@ tooltip {
   padding: 0.341rem 0.477rem; }
 
 .sidebar-chat-chip-action {
-  border: 0.068rem solid #67666d; }
+  border: 0.068rem solid #776c73; }
 
 .sidebar-chat-chip-action:hover,
 .sidebar-chat-chip-action:focus {
-  background-color: #67666d; }
+  background-color: #776c73; }
 
 .sidebar-chat-chip-action:active {
-  background-color: #84838b;
-  color: #545359; }
+  background-color: #92868d;
+  color: #655b61; }
 
 .sidebar-chat-chip-action-active {
-  color: #67666d;
-  border: 0.068rem solid #67666d; }
+  color: #776c73;
+  border: 0.068rem solid #776c73; }
+
+.sidebar-pin {
+  border-radius: 0.818rem;
+  -gtk-outline-radius: 0.818rem;
+  transition: 300ms cubic-bezier(0.1, 1, 0, 1);
+  min-height: 2.386rem;
+  min-width: 2.386rem;
+  color: #eae0e4; }
+
+.sidebar-pin:hover,
+.sidebar-pin:focus {
+  background-color: rgba(116, 105, 111, 0.379); }
+
+.sidebar-pin:active {
+  background-color: #61575d; }
+
+.sidebar-pin-enabled {
+  background-color: #ffc4f5; }
+  .sidebar-pin-enabled label {
+    color: #551251; }
+
+.sidebar-pin-enabled:hover,
+.sidebar-pin-enabled:focus {
+  background-color: #eeb2e5; }
+
+.sidebar-pin-enabled:active {
+  background-color: #dda0d4; }
 
 .session-bg {
   margin-top: -2.727rem;
-  background-color: rgba(14, 14, 16, 0.64); }
+  background-color: rgba(16, 13, 16, 0.64); }
 
 .session-button {
   border-radius: 1.705rem;
   -gtk-outline-radius: 1.705rem;
   min-width: 8.182rem;
   min-height: 8.182rem;
-  background-color: #27272b;
-  color: #c8c5d0;
+  background-color: #3b3338;
+  color: #d1c2cb;
   font-size: 3rem; }
 
 .session-button-focused {
-  background-color: #464559;
-  color: #e3dff9; }
+  background-color: #554050;
+  color: #f8daee; }
 
 .session-button-desc {
-  background-color: #222227;
-  color: #d7d3db;
+  background-color: #2e272c;
+  color: #ded1d8;
   border-bottom-left-radius: 1.705rem;
   border-bottom-right-radius: 1.705rem;
   padding: 0.205rem 0.341rem;
@@ -1906,31 +2008,31 @@ tooltip {
   -gtk-outline-radius: 1.705rem;
   min-width: 8.182rem;
   min-height: 5.455rem;
-  background-color: #27272b;
-  color: #c8c5d0;
+  background-color: #3b3338;
+  color: #d1c2cb;
   font-size: 3rem; }
 
 .notif-low {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
-  background-color: rgba(39, 39, 43, 0.45);
-  color: #c8c5d0;
+  background-color: rgba(59, 51, 56, 0.45);
+  color: #d1c2cb;
   padding: 0.818rem;
   padding-right: 1.363rem; }
 
 .notif-normal {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
-  background-color: rgba(39, 39, 43, 0.45);
-  color: #c8c5d0;
+  background-color: rgba(59, 51, 56, 0.45);
+  color: #d1c2cb;
   padding: 0.818rem;
   padding-right: 1.363rem; }
 
 .notif-critical {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
-  background-color: #464559;
-  color: #e3dff9;
+  background-color: #554050;
+  color: #f8daee;
   padding: 0.818rem;
   padding-right: 1.363rem; }
 
@@ -1938,8 +2040,8 @@ tooltip {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
   min-width: 30.682rem;
-  background-color: #0e0e10;
-  color: #c8c5d0;
+  background-color: #100d10;
+  color: #d1c2cb;
   padding: 0.818rem;
   padding-right: 1.363rem; }
 
@@ -1947,8 +2049,8 @@ tooltip {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
   min-width: 30.682rem;
-  background-color: #0e0e10;
-  color: #c8c5d0;
+  background-color: #100d10;
+  color: #d1c2cb;
   padding: 0.818rem;
   padding-right: 1.363rem; }
 
@@ -1956,19 +2058,19 @@ tooltip {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
   min-width: 30.682rem;
-  background-color: #464559;
-  color: #e3dff9;
+  background-color: #554050;
+  color: #f8daee;
   padding: 0.818rem;
   padding-right: 1.363rem; }
 
 .notif-body-low {
-  color: #93919a; }
+  color: #a0939a; }
 
 .notif-body-normal {
-  color: #93919a; }
+  color: #a0939a; }
 
 .notif-body-critical {
-  color: #afacc4; }
+  color: #c2a7ba; }
 
 .notif-icon {
   border-radius: 9999px;
@@ -1977,31 +2079,32 @@ tooltip {
   min-height: 3.409rem; }
 
 .notif-icon-material {
-  background-color: #464559;
-  color: #e3dff9; }
+  background-color: #554050;
+  color: #f8daee; }
 
 .notif-icon-material-low {
-  background-color: #464559;
-  color: #e3dff9; }
+  background-color: #554050;
+  color: #f8daee; }
 
 .notif-icon-material-normal {
-  background-color: #464559;
-  color: #e3dff9; }
+  background-color: #554050;
+  color: #f8daee; }
 
 .notif-icon-material-critical {
-  background-color: #e3dff9;
-  color: #464559; }
+  background-color: #f8daee;
+  color: #554050; }
 
-.notif-close-btn {
+.notif-expand-btn {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
-  padding: 0rem 0.136rem; }
+  min-width: 1.841rem;
+  min-height: 1.841rem; }
 
-.notif-close-btn:hover,
-.notif-close-btn:focus {
+.notif-expand-btn:hover,
+.notif-expand-btn:focus {
   background: rgba(128, 128, 128, 0.3); }
 
-.notif-close-btn:active {
+.notif-expand-btn:active {
   background: rgba(128, 128, 128, 0.7); }
 
 .notif-closeall-btn {
@@ -2019,29 +2122,69 @@ tooltip {
 .osd-notif {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
-  background-color: rgba(14, 14, 16, 0.46);
+  background-color: rgba(16, 13, 16, 0.46);
   min-width: 30.682rem; }
 
 .notif-circprog-low {
   transition: 0ms linear;
   min-width: 0.136rem;
-  min-height: 1.770rem;
+  min-height: 3.136rem;
   padding: 0rem;
-  color: #e3dff9; }
+  color: #f8daee; }
 
 .notif-circprog-normal {
   transition: 0ms linear;
   min-width: 0.136rem;
-  min-height: 1.770rem;
+  min-height: 3.136rem;
   padding: 0rem;
-  color: #e3dff9; }
+  color: #f8daee; }
 
 .notif-circprog-critical {
   transition: 0ms linear;
   min-width: 0.136rem;
-  min-height: 1.770rem;
+  min-height: 3.136rem;
   padding: 0rem;
-  color: #e3dff9; }
+  color: #554050; }
+
+.notif-actions {
+  min-height: 2.045rem; }
+
+.notif-action {
+  border-radius: 0.818rem;
+  -gtk-outline-radius: 0.818rem; }
+
+.notif-action-low {
+  background-color: rgba(51, 44, 48, 0.31);
+  color: #d1c2cb; }
+
+.notif-action-low:focus,
+.notif-action-low:hover {
+  background-color: rgba(65, 57, 62, 0.31); }
+
+.notif-action-low:active {
+  background-color: rgba(73, 65, 71, 0.31); }
+
+.notif-action-normal {
+  background-color: rgba(51, 44, 48, 0.31);
+  color: #d1c2cb; }
+
+.notif-action-normal:focus,
+.notif-action-normal:hover {
+  background-color: rgba(65, 57, 62, 0.31); }
+
+.notif-action-normal:active {
+  background-color: rgba(73, 65, 71, 0.31); }
+
+.notif-action-critical {
+  background-color: #654f60;
+  color: #d1c2cb; }
+
+.notif-action-critical:focus,
+.notif-action-critical:hover {
+  background-color: #725c6c; }
+
+.notif-action-critical:active {
+  background-color: #7a6374; }
 
 .osd-music {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
@@ -2051,9 +2194,9 @@ tooltip {
   border-radius: 1.159rem;
   -gtk-outline-radius: 1.159rem;
   min-width: 29.659rem;
-  background-color: #0e0e10;
+  background-color: #100d10;
   padding: 0rem 1.023rem;
-  background: linear-gradient(127deg, rgba(31, 31, 35, 0.7), rgba(31, 31, 35, 0.55) 70.71%), linear-gradient(217deg, rgba(71, 70, 79, 0.7), rgba(71, 70, 79, 0.55) 70.71%), radial-gradient(circle at 0% 100%, #464559 13%, rgba(0, 0, 0, 0) 100%), linear-gradient(336deg, rgba(70, 69, 89, 0.7), rgba(70, 69, 89, 0.55) 70.71%), linear-gradient(#0e0e10, #0e0e10); }
+  background: linear-gradient(127deg, rgba(47, 41, 46, 0.7), rgba(47, 41, 46, 0.55) 70.71%), linear-gradient(217deg, rgba(78, 68, 75, 0.7), rgba(78, 68, 75, 0.55) 70.71%), radial-gradient(circle at 0% 100%, #554050 13%, rgba(0, 0, 0, 0) 100%), linear-gradient(336deg, rgba(85, 64, 80, 0.7), rgba(85, 64, 80, 0.55) 70.71%), linear-gradient(#100d10, #100d10); }
 
 .osd-music-cover-fallback {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
@@ -2061,8 +2204,8 @@ tooltip {
   -gtk-outline-radius: 0.818rem;
   min-width: 7.5rem;
   min-height: 7.5rem;
-  background-color: rgba(29, 28, 34, 0.31);
-  color: #d5d2d7; }
+  background-color: rgba(33, 27, 31, 0.31);
+  color: #dad0d5; }
 
 .osd-music-cover {
   border-radius: 0.818rem;
@@ -2088,13 +2231,13 @@ tooltip {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
   font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
   font-size: 1.364rem;
-  color: #d5d2d7; }
+  color: #dad0d5; }
 
 .osd-music-artists {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
-  font-family: 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
+  font-family: 'Rubik', 'Geist', 'AR One Sans', 'Reddit Sans', 'Inter', 'Roboto', 'Ubuntu', 'Noto Sans', sans-serif;
   font-size: 0.955rem;
-  color: rgba(200, 197, 203, 0.9); }
+  color: rgba(205, 196, 201, 0.9); }
 
 .osd-music-pill {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
@@ -2103,8 +2246,8 @@ tooltip {
   font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
   min-width: 1.833rem;
   padding: 0.273rem 0.682rem;
-  background-color: rgba(48, 47, 56, 0.5);
-  color: #d5d2d7; }
+  background-color: rgba(55, 46, 53, 0.5);
+  color: #dad0d5; }
 
 .osd-music-controls {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
@@ -2113,8 +2256,8 @@ tooltip {
   font-family: 'Gabarito', 'Poppins', 'Lexend', sans-serif;
   min-width: 1.833rem;
   padding: 0.205rem;
-  background-color: rgba(48, 47, 56, 0.5);
-  color: #d5d2d7; }
+  background-color: rgba(55, 46, 53, 0.5);
+  color: #dad0d5; }
 
 .osd-music-controlbtn {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
@@ -2125,10 +2268,10 @@ tooltip {
 
 .osd-music-controlbtn:hover,
 .osd-music-controlbtn:focus {
-  background-color: rgba(89, 88, 96, 0.55); }
+  background-color: rgba(96, 87, 93, 0.55); }
 
 .osd-music-controlbtn:active {
-  background-color: rgba(105, 103, 111, 0.575); }
+  background-color: rgba(111, 102, 108, 0.575); }
 
 .osd-music-controlbtn-txt {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
@@ -2142,15 +2285,15 @@ tooltip {
   min-width: 0.409rem;
   min-height: 3.068rem;
   padding: 0.273rem;
-  color: #d5d2d7; }
+  color: #dad0d5; }
 
 .osd-music-playstate {
   transition: 300ms cubic-bezier(0.1, 1, 0, 1);
   min-height: 3.068rem;
   min-width: 3.068rem;
   border-radius: 10rem;
-  background-color: rgba(48, 47, 56, 0.5);
-  color: #d5d2d7; }
+  background-color: rgba(55, 46, 53, 0.5);
+  color: #dad0d5; }
 
 .osd-music-playstate-btn > label {
   transition: 50ms cubic-bezier(0.05, 0.7, 0.1, 1);
@@ -2163,3 +2306,9 @@ tooltip {
 
 .fadingRadial {
   transition: 50ms cubic-bezier(0.2, 0, 0, 1); }
+
+.sidebar-pinned {
+  margin: 0rem;
+  border-radius: 0rem;
+  border-bottom-right-radius: 1.705rem;
+  border: 0rem solid; }
diff --git a/.config/ags/widgets/bar/leftspace.js b/.config/ags/widgets/bar/leftspace.js
index 42002be4a..16df27325 100644
--- a/.config/ags/widgets/bar/leftspace.js
+++ b/.config/ags/widgets/bar/leftspace.js
@@ -74,18 +74,16 @@ export const ModuleLeftSpace = () => Widget.EventBox({
                                             Widget.Label({
                                                 xalign: 0,
                                                 className: 'txt-smaller bar-topdesc txt',
-                                                connections: [[Hyprland.active.client, label => { // Hyprland.active.client
+                                                setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
                                                     label.label = Hyprland.active.client._class.length === 0 ? 'Desktop' : Hyprland.active.client._class;
-                                                }]],
+                                                }),
                                             }),
                                             Widget.Label({
                                                 xalign: 0,
                                                 className: 'txt txt-smallie',
-                                                connections: [
-                                                    [Hyprland.active.client, label => { // Hyprland.active.client
-                                                        label.label = Hyprland.active.client._title.length === 0 ? `Workspace ${Hyprland.active.workspace.id}` : truncateTitle(Hyprland.active.client._title);
-                                                    }]
-                                                ],
+                                                setup: (self) => self.hook(Hyprland.active.client, label => { // Hyprland.active.client
+                                                    label.label = Hyprland.active.client._title.length === 0 ? `Workspace ${Hyprland.active.workspace.id}` : truncateTitle(Hyprland.active.client._title);
+                                                }),
                                             })
                                         ]
                                     })
diff --git a/.config/ags/widgets/bar/main.js b/.config/ags/widgets/bar/main.js
index 25e5405d4..aefc3a173 100644
--- a/.config/ags/widgets/bar/main.js
+++ b/.config/ags/widgets/bar/main.js
@@ -6,19 +6,19 @@ import { ModuleLeftSpace } from "./leftspace.js";
 import { ModuleMusic } from "./music.js";
 import { ModuleRightSpace } from "./rightspace.js";
 import { ModuleSystem } from "./system.js";
-import { ModuleWorkspaces } from "./workspaces.js";
+import ModuleWorkspaces from "./workspaces.js";
 import { RoundedCorner } from "../../lib/roundedcorner.js";
 
 const left = Widget.Box({
     className: 'bar-sidemodule',
-    children: [ModuleMusic()],
+    children: [
+        ModuleMusic()
+    ],
 });
 
 const center = Widget.Box({
     children: [
-        RoundedCorner('topright', { className: 'corner-bar-group' }),
         ModuleWorkspaces(),
-        RoundedCorner('topleft', { className: 'corner-bar-group' }),
     ],
 });
 
@@ -36,7 +36,7 @@ export default () => Widget.Window({
         className: 'bar-bg',
         startWidget: ModuleLeftSpace(),
         centerWidget: Widget.Box({
-            className: 'spacing-h--20',
+            className: 'spacing-h-4',
             children: [
                 left,
                 center,
diff --git a/.config/ags/widgets/bar/music.js b/.config/ags/widgets/bar/music.js
index 32b4a6888..0c2c496a6 100644
--- a/.config/ags/widgets/bar/music.js
+++ b/.config/ags/widgets/bar/music.js
@@ -9,12 +9,12 @@ const TrackProgress = () => {
     const _updateProgress = (circprog) => {
         const mpris = Mpris.getPlayer('');
         if (!mpris) return;
-        // Set circular progress (font size cuz that's how this hacky circprog works)
+        // Set circular progress value
         circprog.css = `font-size: ${Math.max(mpris.position / mpris.length * 100, 0)}px;`
     }
     return AnimatedCircProg({
         className: 'bar-music-circprog',
-        vpack: 'center',
+        vpack: 'center', hpack: 'center',
         connections: [ // Update on change/once every 3 seconds
             [Mpris, _updateProgress],
             [3000, _updateProgress]
@@ -65,7 +65,7 @@ export const ModuleMusic = () => Widget.EventBox({
                     Widget.Scrollable({
                         hexpand: true,
                         child: Widget.Label({
-                            className: 'txt txt-smallie',
+                            className: 'txt-smallie txt-onSurfaceVariant',
                             connections: [[Mpris, label => {
                                 const mpris = Mpris.getPlayer('');
                                 if (mpris)
diff --git a/.config/ags/widgets/bar/rightspace.js b/.config/ags/widgets/bar/rightspace.js
index 713935880..9a7687ff4 100644
--- a/.config/ags/widgets/bar/rightspace.js
+++ b/.config/ags/widgets/bar/rightspace.js
@@ -11,11 +11,11 @@ export const ModuleRightSpace = () => {
     const barTray = Tray();
     const barStatusIcons = StatusIcons({
         className: 'bar-statusicons',
-        connections: [[App, (self, currentName, visible) => {
+        setup: (self) => self.hook(App, (self, currentName, visible) => {
             if (currentName === 'sideright') {
                 self.toggleClassName('bar-statusicons-active', visible);
             }
-        }]],
+        }),
     });
 
     return Widget.EventBox({
diff --git a/.config/ags/widgets/bar/system.js b/.config/ags/widgets/bar/system.js
index a2e7a24e1..c90ba4ba2 100644
--- a/.config/ags/widgets/bar/system.js
+++ b/.config/ags/widgets/bar/system.js
@@ -1,146 +1,173 @@
 // This is for the right pill of the bar. 
 // For the cool memory indicator on the sidebar, see sysinfo.js
 import { Service, Utils, Widget } from '../../imports.js';
+const { Box, Label, Button, Overlay, Revealer, Scrollable, Stack, EventBox } = Widget;
 const { exec, execAsync } = Utils;
 const { GLib } = imports.gi;
 import Battery from 'resource:///com/github/Aylur/ags/service/battery.js';
 import { MaterialIcon } from '../../lib/materialicon.js';
+import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
 
 const BATTERY_LOW = 20;
 
+const BatBatteryProgress = () => {
+    const _updateProgress = (circprog) => { // Set circular progress value
+        circprog.css = `font-size: ${Battery.percent}px;`
+
+        circprog.toggleClassName('bar-batt-circprog-low', Battery.percent <= BATTERY_LOW);
+        circprog.toggleClassName('bar-batt-circprog-full', Battery.charged);
+    }
+    return AnimatedCircProg({
+        className: 'bar-batt-circprog',
+        vpack: 'center', hpack: 'center',
+        connections: [
+            [Battery, _updateProgress],
+        ],
+    })
+}
+
 const BarClock = () => Widget.Box({
     vpack: 'center',
-    className: 'spacing-h-5',
+    className: 'spacing-h-5 txt-onSurfaceVariant',
     children: [
         Widget.Label({
             className: 'bar-clock',
-            connections: [[5000, label => {
+            label: GLib.DateTime.new_now_local().format("%H:%M"),
+            setup: (self) => self.poll(5000, label => {
                 label.label = GLib.DateTime.new_now_local().format("%H:%M");
-            }]],
+            }),
         }),
         Widget.Label({
-            className: 'txt-norm txt',
+            className: 'txt-norm',
             label: '•',
         }),
         Widget.Label({
-            className: 'txt-smallie txt',
-            connections: [[5000, label => {
+            className: 'txt-smallie',
+            label: GLib.DateTime.new_now_local().format("%A, %d/%m"),
+            setup: (self) => self.poll(5000, label => {
                 label.label = GLib.DateTime.new_now_local().format("%A, %d/%m");
-            }]],
+            }),
         }),
     ],
 });
 
-const BarBattery = () => {
-    const BarResourceValue = (name, icon, command) => Widget.Box({
-        vpack: 'center',
-        className: 'bar-batt spacing-h-5',
-        children: [
-            MaterialIcon(icon, 'small'),
-            Widget.ProgressBar({ // Progress
-                vpack: 'center', hexpand: true,
-                className: 'bar-prog-batt',
-                connections: [[5000, (progress) => execAsync(['bash', '-c', command])
-                    .then((output) => {
-                        progress.value = Number(output) / 100;
-                        progress.tooltipText = `${name}: ${Number(output)}%`
-                    })
-                    .catch(print)
-                ]],
-            }),
-        ]
-    });
-    const batteryWidget = Widget.Box({
-        vpack: 'center',
-        hexpand: true,
-        className: 'spacing-h-5 bar-batt',
-        connections: [[Battery, box => {
-            box.toggleClassName('bar-batt-low', Battery.percent <= BATTERY_LOW);
-            box.toggleClassName('bar-batt-full', Battery.charged);
-        }]],
-        children: [
-            MaterialIcon('settings_heart', 'small'),
-            Widget.Label({ // Percentage
-                className: 'bar-batt-percentage',
-                connections: [[Battery, label => {
-                    label.label = `${Battery.percent}`;
-                }]],
-            }),
-            Widget.ProgressBar({ // Progress
-                vpack: 'center',
-                hexpand: true,
-                className: 'bar-prog-batt',
-                connections: [[Battery, progress => {
-                    progress.value = Math.abs(Battery.percent / 100); // battery could be initially negative wtf
-                    progress.toggleClassName('bar-prog-batt-low', Battery.percent <= BATTERY_LOW);
-                    progress.toggleClassName('bar-prog-batt-full', Battery.charged);
-                    batteryWidget.tooltipText = `Battery: ${Battery.percent}%`
-                }]],
-            }),
-            Widget.Revealer({ // A dot for charging state
-                transitionDuration: 150,
-                revealChild: false,
-                transition: 'slide_left',
-                child: Widget.Box({
-                    className: 'spacing-h-3',
-                    children: [
-                        Widget.Box({
-                            vpack: 'center',
-                            className: 'bar-batt-chargestate-charging-smaller',
-                            connections: [[Battery, box => {
-                                box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
-                                box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
-                            }]],
-                        }),
-                        Widget.Box({
-                            vpack: 'center',
-                            className: 'bar-batt-chargestate-charging',
-                            connections: [[Battery, box => {
-                                box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
-                                box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
-                            }]],
-                        }),
-                    ]
-                }),
-                connections: [[Battery, revealer => {
-                    revealer.revealChild = Battery.charging;
-                }]],
-            }),
-        ],
-    });
-    const memUsage = Widget.Box({
+const UtilButton = ({ name, icon, onClicked }) => Button({
+    vpack: 'center',
+    tooltipText: name,
+    onClicked: onClicked,
+    className: 'bar-util-btn icon-material txt-norm',
+    label: `${icon}`,
+})
+
+const Utilities = () => Scrollable({
+    hexpand: true,
+    child: Box({
+        hpack: 'center',
         className: 'spacing-h-5',
         children: [
-            BarResourceValue('RAM usage', 'memory', `free | awk '/^Mem/ {printf("%.2f\\n", ($3/$2) * 100)}'`),
-            BarResourceValue('Swap usage', 'swap_horiz', `free | awk '/^Swap/ {printf("%.2f\\n", ($3/$2) * 100)}'`),
+            UtilButton({
+                name: 'Screen snip', icon: 'screenshot_region', onClicked: () => {
+                    Utils.execAsync(['bash', '-c', `grim -g "$(slurp -d -c e2e2e2BB -b 31313122 -s 00000000)" - | wl-copy &`])
+                        .catch(print)
+                }
+            }),
+            UtilButton({
+                name: 'Color picker', icon: 'colorize', onClicked: () => {
+                    Utils.execAsync(['hyprpicker', '-a']).catch(print)
+                }
+            }),
+            UtilButton({
+                name: 'Toggle on-screen keyboard', icon: 'keyboard', onClicked: () => {
+                    App.toggleWindow('osk');
+                }
+            }),
         ]
     })
-    const widgetStack = Widget.Stack({
-        transition: 'slide_up_down',
-        vpack: 'center',
-        hexpand: true,
-        items: [
-            ['fallback', memUsage],
-            ['battery', batteryWidget],
-        ],
-        setup: (stack) => Utils.timeout(1, () => {
-            if (Battery.available) stack.shown = 'battery';
-            else stack.shown = 'fallback';
-        })
-    })
-    return widgetStack;
-}
+})
+
+const BarBattery = () => Box({
+    className: 'spacing-h-4 txt-onSurfaceVariant',
+    children: [
+        // Revealer({ // A dot for charging state
+        //     transitionDuration: 150,
+        //     revealChild: false,
+        //     transition: 'crossfade',
+        //     child: Widget.Box({
+        //         className: 'spacing-h-3',
+        //         children: [
+        //             Widget.Box({
+        //                 vpack: 'center',
+        //                 className: 'bar-batt-chargestate-charging-smaller',
+        //                 setup: (self) => self.hook(Battery, box => {
+        //                     box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
+        //                     box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
+        //                 }),
+        //             }),
+        //             Widget.Box({
+        //                 vpack: 'center',
+        //                 className: 'bar-batt-chargestate-charging',
+        //                 setup: (self) => self.hook(Battery, box => {
+        //                     box.toggleClassName('bar-batt-chargestate-low', Battery.percent <= BATTERY_LOW);
+        //                     box.toggleClassName('bar-batt-chargestate-full', Battery.charged);
+        //                 }),
+        //             }),
+        //         ]
+        //     }),
+        //     setup: (self) => self.hook(Battery, revealer => {
+        //         revealer.revealChild = Battery.charging;
+        //     }),
+        // }),
+        Stack({
+            transition: 'slide_up_down',
+            items: [
+                ['discharging', Widget.Label({
+                    className: 'txt-norm txt',
+                    label: '•',
+                }),],
+                ['charging', MaterialIcon('bolt', 'norm')],
+            ],
+            setup: (self) => self.hook(Battery, revealer => {
+                self.shown = Battery.charging ? 'charging' : 'discharging';
+            }),
+        }),
+        Label({
+            className: 'txt-smallie txt-onSurfaceVariant',
+            setup: (self) => self.hook(Battery, label => {
+                label.label = `${Battery.percent}%`;
+            }),
+        }),
+        Overlay({
+            child: Widget.Box({
+                vpack: 'center',
+                className: 'bar-batt',
+                homogeneous: true,
+                children: [
+                    MaterialIcon('settings_heart', 'small'),
+                ],
+                setup: (self) => self.hook(Battery, box => {
+                    box.toggleClassName('bar-batt-low', Battery.percent <= BATTERY_LOW);
+                    box.toggleClassName('bar-batt-full', Battery.charged);
+                }),
+            }),
+            overlays: [
+                BatBatteryProgress(),
+            ]
+        }),
+    ]
+});
 
 export const ModuleSystem = () => Widget.EventBox({
     onScrollUp: () => execAsync('hyprctl dispatch workspace -1'),
     onScrollDown: () => execAsync('hyprctl dispatch workspace +1'),
+    onPrimaryClick: () => App.toggleWindow('sideright'),
     child: Widget.Box({
         className: 'bar-group-margin bar-sides',
         children: [
             Widget.Box({
-                className: 'bar-group bar-group-standalone bar-group-pad-system spacing-h-15',
+                className: 'bar-group bar-group-standalone bar-group-pad-system spacing-h-5',
                 children: [
                     BarClock(),
+                    Utilities(),
                     BarBattery(),
                 ],
             }),
diff --git a/.config/ags/widgets/bar/tray.js b/.config/ags/widgets/bar/tray.js
index 0d0ded80d..34720765a 100644
--- a/.config/ags/widgets/bar/tray.js
+++ b/.config/ags/widgets/bar/tray.js
@@ -10,7 +10,13 @@ const SysTrayItem = item => Button({
     className: 'bar-systray-item',
     child: Icon({
         hpack: 'center',
-        binds: [['icon', item, 'icon']]
+        binds: [['icon', item, 'icon']],
+        setup: (self) => Utils.timeout(1, () => {
+            const styleContext = self.get_parent().get_style_context();
+            const width = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
+            const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
+            self.size = Math.max(width, height, 1); // im too lazy to add another box lol
+        }),
     }),
     binds: [['tooltipMarkup', item, 'tooltip-markup']],
     onClicked: btn => item.menu.popup_at_widget(btn, Gravity.SOUTH, Gravity.NORTH, null),
@@ -19,8 +25,7 @@ const SysTrayItem = item => Button({
 
 export const Tray = (props = {}) => {
     const trayContent = Box({
-        vpack: 'center',
-        className: 'bar-systray bar-group',
+        className: 'bar-systray spacing-h-10',
         properties: [
             ['items', new Map()],
             ['onAdded', (box, id) => {
@@ -31,7 +36,7 @@ export const Tray = (props = {}) => {
                     return;
                 const widget = SysTrayItem(item);
                 box._items.set(id, widget);
-                box.pack_start(widget, false, false, 0);
+                box.add(widget);
                 box.show_all();
                 if (box._items.size === 1)
                     trayRevealer.revealChild = true;
@@ -46,10 +51,10 @@ export const Tray = (props = {}) => {
                     trayRevealer.revealChild = false;
             }],
         ],
-        connections: [
-            [SystemTray, (box, id) => box._onAdded(box, id), 'added'],
-            [SystemTray, (box, id) => box._onRemoved(box, id), 'removed'],
-        ],
+        setup: (self) => self
+            .hook(SystemTray, (box, id) => box._onAdded(box, id), 'added')
+            .hook(SystemTray, (box, id) => box._onRemoved(box, id), 'removed')
+        ,
     });
     const trayRevealer = Widget.Revealer({
         revealChild: false,
diff --git a/.config/ags/widgets/bar/workspaces.js b/.config/ags/widgets/bar/workspaces.js
index fff8c11e6..b3be638f8 100644
--- a/.config/ags/widgets/bar/workspaces.js
+++ b/.config/ags/widgets/bar/workspaces.js
@@ -1,100 +1,169 @@
 const { GLib, Gdk, Gtk } = imports.gi;
+const Lang = imports.lang;
+const Cairo = imports.cairo;
+const Pango = imports.gi.Pango;
+const PangoCairo = imports.gi.PangoCairo;
 import { App, Service, Utils, Widget } from '../../imports.js';
+const { Box, DrawingArea, EventBox } = Widget;
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 
-const WORKSPACE_SIDE_PAD = 0.546; // rem
 const NUM_OF_WORKSPACES = 10;
-let lastWorkspace = 0;
+const dummyWs = Box({ className: 'bar-ws' }); // Not shown. Only for getting size props
+const dummyActiveWs = Box({ className: 'bar-ws bar-ws-active' }); // Not shown. Only for getting size props
+const dummyOccupiedWs = Box({ className: 'bar-ws bar-ws-occupied' }); // Not shown. Only for getting size props
 
-const activeWorkspaceIndicator = Widget.Box({
-    css: `
-        padding: 0rem ${WORKSPACE_SIDE_PAD}rem;
-    `,
-    children: [
-        Widget.Box({
-            vpack: 'center',
-            hpack: 'start',
-            className: 'bar-ws-active-box',
-            connections: [
-                [Hyprland.active.workspace, (box) => {
-                    const ws = Hyprland.active.workspace.id;
-                    box.setCss(`
-                        margin-left: ${1.774 * (ws - 1) + 0.068}rem;
-                    `);
-                    lastWorkspace = ws;
-                }],
-            ],
-            children: [
-                Widget.Label({
-                    vpack: 'center',
-                    className: 'bar-ws-active',
-                    label: `•`,
-                })
-            ]
-        })
-    ]
-});
+// Font size = workspace id
+const WorkspaceContents = (count = 10) => {
+    return DrawingArea({
+        properties: [
+            ['workspaceMask', 0],
+        ],
+        css: `transition: 500ms cubic-bezier(0.1, 1, 0, 1);`,
+        setup: (area) => area
+            .hook(Hyprland.active.workspace, (area) =>
+                area.setCss(`font-size: ${Hyprland.active.workspace.id}px;`)
+            )
+            .hook(Hyprland, (area) => {
+                const workspaces = Hyprland.workspaces;
+                let workspaceMask = 0;
+                for (let i = 0; i < workspaces.length; i++) {
+                    const ws = workspaces[i];
+                    if (ws.id < 0) continue; // Ignore scratchpads
+                    if (ws.id > count) return; // Not rendered
+                    if (workspaces[i].windows > 0) {
+                        workspaceMask |= (1 << ws.id);
+                    }
+                }
+                area._workspaceMask = workspaceMask;
+            }, 'notify::workspaces')
+            .on('draw', Lang.bind(area, (area, cr) => {
+                const allocation = area.get_allocation();
+                const { width, height } = allocation;
 
-export const ModuleWorkspaces = () => Widget.EventBox({
-    onScrollUp: () => Utils.execAsync(['bash', '-c', 'hyprctl dispatch workspace -1 &']),
-    onScrollDown: () => Utils.execAsync(['bash', '-c', 'hyprctl dispatch workspace +1 &']),
+                const workspaceStyleContext = dummyWs.get_style_context();
+                const workspaceDiameter = workspaceStyleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
+                const workspaceRadius = workspaceDiameter / 2;
+                const workspaceFontSize = workspaceStyleContext.get_property('font-size', Gtk.StateFlags.NORMAL) / 4 * 3;
+                const workspaceFontFamily = workspaceStyleContext.get_property('font-family', Gtk.StateFlags.NORMAL);
+                const wsbg = workspaceStyleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
+                const wsfg = workspaceStyleContext.get_property('color', Gtk.StateFlags.NORMAL);
+
+                const occupiedWorkspaceStyleContext = dummyOccupiedWs.get_style_context();
+                const occupiedbg = occupiedWorkspaceStyleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
+                const occupiedfg = occupiedWorkspaceStyleContext.get_property('color', Gtk.StateFlags.NORMAL);
+
+                const activeWorkspaceStyleContext = dummyActiveWs.get_style_context();
+                const activebg = activeWorkspaceStyleContext.get_property('background-color', Gtk.StateFlags.NORMAL);
+                const activefg = activeWorkspaceStyleContext.get_property('color', Gtk.StateFlags.NORMAL);
+                area.set_size_request(workspaceDiameter * count, -1);
+                const widgetStyleContext = area.get_style_context();
+                const activeWs = widgetStyleContext.get_property('font-size', Gtk.StateFlags.NORMAL);
+
+                const activeWsCenterX = -(workspaceDiameter / 2) + (workspaceDiameter * activeWs);
+                const activeWsCenterY = height / 2;
+
+                // Font
+                const layout = PangoCairo.create_layout(cr);
+                const fontDesc = Pango.font_description_from_string(`${workspaceFontFamily[0]} ${workspaceFontSize}`);
+                layout.set_font_description(fontDesc);
+                cr.setAntialias(Cairo.Antialias.BEST);
+                // Get kinda min radius for number indicators
+                layout.set_text("0".repeat(count.toString().length), -1);
+                const [layoutWidth, layoutHeight] = layout.get_pixel_size();
+                const indicatorRadius = Math.max(layoutWidth, layoutHeight) / 2 * 1.2; // a bit smaller than sqrt(2)*radius
+                const indicatorGap = workspaceRadius - indicatorRadius;
+
+                // Draw workspace numbers
+                for (let i = 1; i <= count; i++) {
+                    if (area._workspaceMask & (1 << i)) {
+                        // Draw bg highlight
+                        cr.setSourceRGBA(occupiedbg.red, occupiedbg.green, occupiedbg.blue, occupiedbg.alpha);
+                        const wsCenterX = -(workspaceRadius) + (workspaceDiameter * i);
+                        const wsCenterY = height / 2;
+                        if (!(area._workspaceMask & (1 << (i - 1)))) { // Left
+                            cr.arc(wsCenterX, wsCenterY, workspaceRadius, 0.5 * Math.PI, 1.5 * Math.PI);
+                            cr.fill();
+                        }
+                        else {
+                            cr.rectangle(wsCenterX - workspaceRadius, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
+                            cr.fill();
+                        }
+                        if (!(area._workspaceMask & (1 << (i + 1)))) { // Right
+                            cr.arc(wsCenterX, wsCenterY, workspaceRadius, -0.5 * Math.PI, 0.5 * Math.PI);
+                            cr.fill();
+                        }
+                        else {
+                            cr.rectangle(wsCenterX, wsCenterY - workspaceRadius, workspaceRadius, workspaceRadius * 2)
+                            cr.fill();
+                        }
+
+                        // Set color for text
+                        cr.setSourceRGBA(occupiedfg.red, occupiedfg.green, occupiedfg.blue, occupiedfg.alpha);
+                    }
+                    else
+                        cr.setSourceRGBA(wsfg.red, wsfg.green, wsfg.blue, wsfg.alpha);
+                    layout.set_text(`${i}`, -1);
+                    const [layoutWidth, layoutHeight] = layout.get_pixel_size();
+                    const x = -workspaceRadius + (workspaceDiameter * i) - (layoutWidth / 2);
+                    const y = (height - layoutHeight) / 2;
+                    cr.moveTo(x, y);
+                    // cr.showText(text);
+                    PangoCairo.show_layout(cr, layout);
+                    cr.stroke();
+                }
+
+                // Draw active ws
+                // base
+                cr.setSourceRGBA(activebg.red, activebg.green, activebg.blue, activebg.alpha);
+                cr.arc(activeWsCenterX, activeWsCenterY, indicatorRadius, 0, 2 * Math.PI);
+                cr.fill();
+                // inner decor
+                cr.setSourceRGBA(activefg.red, activefg.green, activefg.blue, activefg.alpha);
+                cr.arc(activeWsCenterX, activeWsCenterY, indicatorRadius * 0.2, 0, 2 * Math.PI);
+                cr.fill();
+            }))
+        ,
+    })
+}
+
+export default () => EventBox({
+    onScrollUp: () => Hyprland.sendMessage(`dispatch workspace -1`),
+    onScrollDown: () => Hyprland.sendMessage(`dispatch workspace +1`),
     onMiddleClickRelease: () => App.toggleWindow('overview'),
     onSecondaryClickRelease: () => App.toggleWindow('osk'),
-    child: Widget.Box({
+    properties: [
+        ['clicked', false],
+    ],
+    child: Box({
         homogeneous: true,
-        className: 'bar-ws-width',
-        children: [
-            Widget.Overlay({
-                passThrough: true,
-                child: Widget.Box({
-                    homogeneous: true,
-                    className: 'bar-group-center',
-                    children: [Widget.Box({
-                        className: 'bar-group-standalone bar-group-pad',
-                    })]
-                }),
-                overlays: [
-                    Widget.Overlay({
-                        setup: (self) => self.set_overlay_pass_through(self.get_children()[1], true),
-                        child: Widget.Box({
-                            hpack: 'center',
-                            css: `
-                                padding: 0rem ${WORKSPACE_SIDE_PAD}rem;
-                            `,
-                            // homogeneous: true,
-                            children: Array.from({ length: NUM_OF_WORKSPACES }, (_, i) => i + 1).map(i => Widget.Button({
-                                onPrimaryClick: () => Utils.execAsync(['bash', '-c', `hyprctl dispatch workspace ${i} &`]).catch(print),
-                                child: Widget.Label({
-                                    vpack: 'center',
-                                    label: `${i}`,
-                                    className: 'bar-ws txt',
-                                }),
-                            })),
-                            connections: [
-                                [Hyprland, (box) => {
-                                    // console.log('update');
-                                    const kids = box.children;
-                                    kids.forEach((child, i) => {
-                                        child.child.toggleClassName('bar-ws-occupied', false);
-                                        child.child.toggleClassName('bar-ws-occupied-left', false);
-                                        child.child.toggleClassName('bar-ws-occupied-right', false);
-                                        child.child.toggleClassName('bar-ws-occupied-left-right', false);
-                                    });
-                                    const occupied = Array.from({ length: NUM_OF_WORKSPACES }, (_, i) => Hyprland.getWorkspace(i + 1)?.windows > 0);
-                                    for (let i = 0; i < occupied.length; i++) {
-                                        if (!occupied[i]) continue;
-                                        const child = kids[i];
-                                        child.child.toggleClassName(`bar-ws-occupied${!occupied[i - 1] ? '-left' : ''}${!occupied[i + 1] ? '-right' : ''}`, true);
-                                    }
-                                }, 'notify::workspaces'],
-                            ],
-                        }),
-                        overlays: [
-                            activeWorkspaceIndicator,
-                        ]
-                    })
-                ],
-            })
-        ]
-    })
-});
+        className: 'bar-group-margin',
+        children: [Box({
+            className: 'bar-group bar-group-standalone bar-group-pad',
+            css: 'min-width: 2px;',
+            children: [
+                WorkspaceContents(10),
+            ]
+        })]
+    }),
+    setup: (self) => {
+        self.add_events(Gdk.EventMask.POINTER_MOTION_MASK);
+        self.on('motion-notify-event', (self, event) => {
+            if (!self._clicked) return;
+            console.log('switching move');
+            const [_, cursorX, cursorY] = event.get_coords();
+            const widgetWidth = self.get_allocation().width;
+            const wsId = Math.ceil(cursorX * NUM_OF_WORKSPACES / widgetWidth);
+            Hyprland.sendMessage(`dispatch workspace ${wsId}`)
+        })
+        self.on('button-press-event', (self, event) => {
+            if (!(event.get_button()[1] === 1)) return; // We're only interested in left-click here
+            console.log('switching');
+            self._clicked = true;
+            const [_, cursorX, cursorY] = event.get_coords();
+            const widgetWidth = self.get_allocation().width;
+            const wsId = Math.ceil(cursorX * NUM_OF_WORKSPACES / widgetWidth);
+            Hyprland.sendMessage(`dispatch workspace ${wsId}`);
+        })
+        self.on('button-release-event', (self) => self._clicked = false);
+    }
+})
diff --git a/.config/ags/widgets/cheatsheet/main.js b/.config/ags/widgets/cheatsheet/main.js
index a6c25b8ec..21887de7d 100644
--- a/.config/ags/widgets/cheatsheet/main.js
+++ b/.config/ags/widgets/cheatsheet/main.js
@@ -69,7 +69,7 @@ const clickOutsideToClose = Widget.EventBox({
 
 export default () => Widget.Window({
     name: 'cheatsheet',
-    exclusivity: 'normal',
+    exclusivity: 'ignore',
     focusable: true,
     popup: true,
     visible: false,
diff --git a/.config/ags/widgets/desktopbackground/system.js b/.config/ags/widgets/desktopbackground/system.js
index f375c8f24..e6dcf6461 100644
--- a/.config/ags/widgets/desktopbackground/system.js
+++ b/.config/ags/widgets/desktopbackground/system.js
@@ -138,10 +138,12 @@ export default () => Box({
             }),
             onPrimaryClickRelease: () => {
                 const kids = resources.get_children();
-
-                kids.forEach((child, i) => {
-                    child.get_children()[0].revealChild = !child.get_children()[0].revealChild;
-                });
+                for (let i = 0; i < kids.length; i++) {
+                    const child = kids[i];
+                    const firstChild = child.get_children()[0];
+                    firstChild.revealChild = !firstChild.revealChild;
+                }
+                
             },
         })
     ],
diff --git a/.config/ags/widgets/desktopbackground/timeandlaunches.js b/.config/ags/widgets/desktopbackground/timeandlaunches.js
index ec3fe0b0e..1f9b01305 100644
--- a/.config/ags/widgets/desktopbackground/timeandlaunches.js
+++ b/.config/ags/widgets/desktopbackground/timeandlaunches.js
@@ -14,16 +14,18 @@ const TimeAndDate = () => Box({
         Label({
             className: 'bg-time-clock',
             xalign: 0,
-            connections: [[5000, label => {
+            label: GLib.DateTime.new_now_local().format("%H:%M"),
+            setup: (self) => self.poll(5000, label => {
                 label.label = GLib.DateTime.new_now_local().format("%H:%M");
-            }]],
+            }),
         }),
         Label({
             className: 'bg-time-date',
             xalign: 0,
-            connections: [[5000, label => {
+            label: GLib.DateTime.new_now_local().format("%A, %d/%m/%Y"),
+            setup: (self) => self.poll(5000, label => {
                 label.label = GLib.DateTime.new_now_local().format("%A, %d/%m/%Y");
-            }]],
+            }),
         }),
     ]
 })
@@ -46,7 +48,7 @@ const QuickLaunches = () => Box({
                 },
                 className: 'bg-quicklaunch-btn',
                 child: Label({
-                    label: `${ item["name"]}`,
+                    label: `${item["name"]}`,
                 }),
                 setup: (self) => {
                     setupCursorHover(self);
@@ -60,7 +62,7 @@ export default () => Box({
     hpack: 'start',
     vpack: 'end',
     vertical: true,
-    className: 'bg-time-box spacing-v-20',
+    className: 'bg-time-box spacing-h--10',
     children: [
         TimeAndDate(),
         // QuickLaunches(),
diff --git a/.config/ags/widgets/dock/dock.js b/.config/ags/widgets/dock/dock.js
index 448eadfbb..4714d268b 100644
--- a/.config/ags/widgets/dock/dock.js
+++ b/.config/ags/widgets/dock/dock.js
@@ -86,7 +86,8 @@ const Taskbar = () => Widget.Box({
             return a._workspace > b._workspace;
         }],
         ['update', (box) => {
-            Hyprland.clients.forEach(client => {
+            for (let i = 0; i < Hyprland.clients.length; i++) {
+                const client = Hyprland.clients[i];
                 if (client["pid"] == -1) return;
                 const appClass = substitute(client.class);
                 for (const appName of pinnedApps) {
@@ -101,11 +102,11 @@ const Taskbar = () => Widget.Box({
                 newButton._workspace = client.workspace.id;
                 newButton.revealChild = true;
                 box._map.set(client.address, newButton);
-            })
+            }
             box.children = Array.from(box._map.values());
         }],
         ['add', (box, address) => {
-            if (!address) { // Since the first active emit is undefined
+            if (!address) { // First active emit is undefined
                 box._update(box);
                 return;
             }
@@ -137,14 +138,11 @@ const Taskbar = () => Widget.Box({
             })
         }],
     ],
-    connections: [
-        // [Hyprland, (box) => box._update(box)],
-        [Hyprland, (box, address) => box._add(box, address), 'client-added'],
-        [Hyprland, (box, address) => box._remove(box, address), 'client-removed'],
-    ],
     setup: (self) => {
+        self.hook(Hyprland, (box, address) => box._add(box, address), 'client-added')
+            .hook(Hyprland, (box, address) => box._remove(box, address), 'client-removed')
         Utils.timeout(100, () => self._update(self));
-    }
+    },
 });
 
 const PinnedApps = () => Widget.Box({
@@ -165,18 +163,18 @@ const PinnedApps = () => Widget.Box({
                     app.launch();
                 },
                 onMiddleClick: () => app.launch(),
+                tooltipText: app.name,
                 setup: (self) => {
                     self.revealChild = true;
-                },
-                tooltipText: app.name,
-                connections: [[Hyprland, button => {
-                    const running = Hyprland.clients
-                        .find(client => client.class.toLowerCase().includes(term)) || false;
+                    self.hook(Hyprland, button => {
+                        const running = Hyprland.clients
+                            .find(client => client.class.toLowerCase().includes(term)) || false;
 
-                    button.toggleClassName('nonrunning', !running);
-                    button.toggleClassName('focused', Hyprland.active.client.address == running.address);
-                    button.set_tooltip_text(running ? running.title : app.name);
-                }, 'notify::clients']],
+                        button.toggleClassName('notrunning', !running);
+                        button.toggleClassName('focused', Hyprland.active.client.address == running.address);
+                        button.set_tooltip_text(running ? running.title : app.name);
+                    }, 'notify::clients')
+                },
             })
             newButton.revealChild = true;
             return newButton;
@@ -237,13 +235,13 @@ export default () => {
         transition: 'slide_up',
         transitionDuration: 200,
         child: dockContent,
-        connections: [
-            // [Hyprland, (self) => self._updateShow(self)],
-            // [Hyprland.active.workspace, (self) => self._updateShow(self)],
-            // [Hyprland.active.client, (self) => self._updateShow(self)],
-            // [Hyprland, (self) => self._updateShow(self), 'client-added'],
-            // [Hyprland, (self) => self._updateShow(self), 'client-removed'],
-        ],
+        // setup: (self) => self
+        //     .hook(Hyprland, (self) => self._updateShow(self))
+        //     .hook(Hyprland.active.workspace, (self) => self._updateShow(self))
+        //     .hook(Hyprland.active.client, (self) => self._updateShow(self))
+        //     .hook(Hyprland, (self) => self._updateShow(self), 'client-added')
+        //     .hook(Hyprland, (self) => self._updateShow(self), 'client-removed')
+        // ,
     })
     return EventBox({
         onHover: () => {
diff --git a/.config/ags/widgets/indicators/colorscheme.js b/.config/ags/widgets/indicators/colorscheme.js
index 18bd51f8c..02cde92a0 100644
--- a/.config/ags/widgets/indicators/colorscheme.js
+++ b/.config/ags/widgets/indicators/colorscheme.js
@@ -50,9 +50,7 @@ export default () => Widget.Revealer({
     transition: 'slide_down',
     transitionDuration: 200,
     child: colorschemeContent,
-    connections: [
-        [showColorScheme, (revealer) => {
-            revealer.revealChild = showColorScheme.value;
-        }],
-    ],
+    setup: (self) => self.hook(showColorScheme, (revealer) => {
+        revealer.revealChild = showColorScheme.value;
+    }),
 })
diff --git a/.config/ags/widgets/indicators/indicatorvalues.js b/.config/ags/widgets/indicators/indicatorvalues.js
index e4d587809..236f65c12 100644
--- a/.config/ags/widgets/indicators/indicatorvalues.js
+++ b/.config/ags/widgets/indicators/indicatorvalues.js
@@ -2,34 +2,33 @@
 const { GLib, Gtk } = imports.gi;
 import { App, Service, Utils, Widget } from '../../imports.js';
 import Audio from 'resource:///com/github/Aylur/ags/service/audio.js';
-import Notifications from 'resource:///com/github/Aylur/ags/service/notifications.js';
-const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget;
+const { Box, Label, ProgressBar, Revealer } = Widget;
+import { MarginRevealer } from '../../lib/advancedrevealers.js';
 import Brightness from '../../services/brightness.js';
 import Indicator from '../../services/indicator.js';
-import Notification from '../../lib/notification.js';
 
-const OsdValue = (name, labelConnections, progressConnections, props = {}) => Widget.Box({ // Volume
+const OsdValue = (name, labelConnections, progressConnections, props = {}) => Box({ // Volume
     ...props,
     vertical: true,
     className: 'osd-bg osd-value',
     hexpand: true,
     children: [
-        Widget.Box({
+        Box({
             vexpand: true,
             children: [
-                Widget.Label({
+                Label({
                     xalign: 0, yalign: 0, hexpand: true,
                     className: 'osd-label',
                     label: `${name}`,
                 }),
-                Widget.Label({
+                Label({
                     hexpand: false, className: 'osd-value-txt',
                     label: '100',
                     connections: labelConnections,
                 }),
             ]
         }),
-        Widget.ProgressBar({
+        ProgressBar({
             className: 'osd-progress',
             hexpand: true,
             vertical: false,
@@ -58,16 +57,20 @@ const volumeIndicator = OsdValue('Volume',
     }]],
 );
 
-export default () => Widget.Revealer({
+export default () => MarginRevealer({
     transition: 'slide_down',
+    showClass: 'osd-show',
+    hideClass: 'osd-hide',
     connections: [
         [Indicator, (revealer, value) => {
-            revealer.revealChild = (value > -1);
+            if(value > -1) revealer._show(revealer);
+            else revealer._hide(revealer);
         }, 'popup'],
     ],
-    child: Widget.Box({
+    child: Box({
         hpack: 'center',
         vertical: false,
+        className: 'spacing-h--10',
         children: [
             brightnessIndicator,
             volumeIndicator,
diff --git a/.config/ags/widgets/indicators/main.js b/.config/ags/widgets/indicators/main.js
index ee74f8a56..b2204a15b 100644
--- a/.config/ags/widgets/indicators/main.js
+++ b/.config/ags/widgets/indicators/main.js
@@ -10,6 +10,7 @@ export default (monitor) => Widget.Window({
     monitor,
     className: 'indicator',
     layer: 'overlay',
+    // exclusivity: 'ignore',
     visible: true,
     anchor: ['top'],
     child: Widget.EventBox({
@@ -18,6 +19,7 @@ export default (monitor) => Widget.Window({
         },
         child: Widget.Box({
             vertical: true,
+            className: 'osd-window',
             css: 'min-height: 2px;',
             children: [
                 IndicatorValues(),
@@ -28,3 +30,4 @@ export default (monitor) => Widget.Window({
         })
     }),
 });
+
diff --git a/.config/ags/widgets/indicators/musiccontrols.js b/.config/ags/widgets/indicators/musiccontrols.js
index 3262f4222..7e59f5a50 100644
--- a/.config/ags/widgets/indicators/musiccontrols.js
+++ b/.config/ags/widgets/indicators/musiccontrols.js
@@ -4,6 +4,7 @@ const { exec, execAsync } = Utils;
 import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
 
 const { Box, EventBox, Icon, Scrollable, Label, Button, Revealer } = Widget;
+import { MarginRevealer } from '../../lib/advancedrevealers.js';
 import { AnimatedCircProg } from "../../lib/animatedcircularprogress.js";
 import { MaterialIcon } from '../../lib/materialicon.js';
 import { showMusicControls } from '../../variables.js';
@@ -343,9 +344,11 @@ const MusicControlsWidget = (player) => Box({
     ]
 })
 
-export default () => Widget.Revealer({
+export default () => MarginRevealer({
     transition: 'slide_down',
-    transitionDuration: 170,
+    revealChild: false,
+    showClass: 'osd-show',
+    hideClass: 'osd-hide',
     child: Box({
         connections: [[Mpris, box => {
             let foundPlayer = false;
@@ -360,14 +363,19 @@ export default () => Widget.Revealer({
 
             if (!foundPlayer) {
                 box._player = null;
-                box.get_children().forEach(ch => ch.destroy());
+                const children = box.get_children();
+                for (let i = 0; i < children.length; i++) {
+                    const child = children[i];
+                    child.destroy();
+                }
                 return;
             }
         }, 'notify::players']],
     }),
     connections: [
         [showMusicControls, (revealer) => {
-            revealer.revealChild = showMusicControls.value;
+            if(showMusicControls.value) revealer._show(revealer);
+            else revealer._hide(revealer);
         }],
     ],
 })
diff --git a/.config/ags/widgets/indicators/notificationpopups.js b/.config/ags/widgets/indicators/notificationpopups.js
index fea31bafd..84ac48e97 100644
--- a/.config/ags/widgets/indicators/notificationpopups.js
+++ b/.config/ags/widgets/indicators/notificationpopups.js
@@ -30,12 +30,10 @@ const PopupNotification = (notifObject) => Widget.Box({
 const naiveNotifPopupList = Widget.Box({
     vertical: true,
     className: 'spacing-v-5',
-    connections: [
-        [Notifications, (box) => {
-            box.children = Notifications.popups.reverse()
-                .map(notifItem => PopupNotification(notifItem));
-        }],
-    ],
+    setup: (self) => self.hook(Notifications, (box) => {
+        box.children = Notifications.popups.reverse()
+            .map(notifItem => PopupNotification(notifItem));
+    }),
 })
 
 const notifPopupList = Box({
@@ -72,11 +70,11 @@ const notifPopupList = Box({
             // box.children = Array.from(box._map.values()).reverse();
         }],
     ],
-    connections: [
-        [Notifications, (box, id) => box._notify(box, id), 'notified'],
-        [Notifications, (box, id) => box._dismiss(box, id), 'dismissed'],
-        [Notifications, (box, id) => box._dismiss(box, id, true), 'closed'],
-    ],
+    setup: (self) => self
+        .hook(Notifications, (box, id) => box._notify(box, id), 'notified')
+        .hook(Notifications, (box, id) => box._dismiss(box, id), 'dismissed')
+        .hook(Notifications, (box, id) => box._dismiss(box, id, true), 'closed')
+    ,
 });
 
 export default () => notifPopupList;
\ No newline at end of file
diff --git a/.config/ags/widgets/onscreenkeyboard/onscreenkeyboard.js b/.config/ags/widgets/onscreenkeyboard/onscreenkeyboard.js
index db793eb10..a347408f9 100644
--- a/.config/ags/widgets/onscreenkeyboard/onscreenkeyboard.js
+++ b/.config/ags/widgets/onscreenkeyboard/onscreenkeyboard.js
@@ -133,11 +133,11 @@ const keyboardWindow = Box({
             ],
         })
     ],
-    connections: [[App, (box, name, visible) => { // Update on open
+    setup: (self) => self.hook(App, (box, name, visible) => { // Update on open
         if (name == 'osk' && visible) {
             keyboardWindow.setCss(`margin-bottom: -0px;`);
         }
-    }],],
+    }),
 });
 
 const gestureEvBox = EventBox({ child: keyboardWindow })
diff --git a/.config/ags/widgets/overview/main.js b/.config/ags/widgets/overview/main.js
index 36e44719a..9dde483a5 100644
--- a/.config/ags/widgets/overview/main.js
+++ b/.config/ags/widgets/overview/main.js
@@ -3,7 +3,7 @@ import { SearchAndWindows } from "./overview.js";
 
 export default () => Widget.Window({
     name: 'overview',
-    exclusivity: 'normal',
+    exclusivity: 'ignore',
     focusable: true,
     popup: true,
     visible: false,
diff --git a/.config/ags/widgets/overview/overview.js b/.config/ags/widgets/overview/overview.js
index 54262a10c..f4deac393 100644
--- a/.config/ags/widgets/overview/overview.js
+++ b/.config/ags/widgets/overview/overview.js
@@ -4,7 +4,7 @@ import Applications from 'resource:///com/github/Aylur/ags/service/applications.
 import Hyprland from 'resource:///com/github/Aylur/ags/service/hyprland.js';
 const { execAsync, exec } = Utils;
 import { setupCursorHover, setupCursorHoverGrab } from "../../lib/cursorhover.js";
-import { DoubleRevealer } from "../../lib/doublerevealer.js";
+import { DoubleRevealer } from "../../lib/advancedrevealers.js";
 import { execAndClose, expandTilde, hasUnterminatedBackslash, startsWithNumber, launchCustomCommand, ls } from './miscfunctions.js';
 import {
     CalculationResultButton, CustomCommandButton, DirectoryButton,
@@ -257,7 +257,7 @@ const workspace = index => {
             child: fixed,
         })],
     });
-    widget.update = clients => {
+    widget.update = (clients) => {
         clients = clients.filter(({ workspace: { id } }) => id === index);
 
         // this is for my monitor layout
@@ -269,9 +269,22 @@ const workspace = index => {
             return client;
         });
 
-        fixed.get_children().forEach(ch => ch.destroy());
+        const children = fixed.get_children();
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            child.destroy();
+        }
         fixed.put(WorkspaceNumber(index), 0, 0);
-        clients.forEach(c => c.mapped && fixed.put(client(c), c.at[0] * OVERVIEW_SCALE, c.at[1] * OVERVIEW_SCALE));
+
+        for (let i = 0; i < clients.length; i++) {
+            const c = clients[i];
+            if (c.mapped) {
+                fixed.put(client(c), c.at[0] * OVERVIEW_SCALE, c.at[1] * OVERVIEW_SCALE);
+            }
+        }
+
+
+
         fixed.show_all();
     };
     return widget;
@@ -290,7 +303,12 @@ const OverviewRow = ({ startWorkspace, workspaces, windowName = 'overview' }) =>
     properties: [['update', box => {
         execAsync('hyprctl -j clients').then(clients => {
             const json = JSON.parse(clients);
-            box.get_children().forEach(ch => ch.update(json));
+            const children = box.get_children();
+            for (let i = 0; i < children.length; i++) {
+                const ch = children[i];
+                ch.update(json)
+            }
+
         }).catch(print);
     }]],
     setup: (box) => box._update(box),
@@ -312,7 +330,8 @@ const OverviewRow = ({ startWorkspace, workspaces, windowName = 'overview' }) =>
 export const SearchAndWindows = () => {
     var _appSearchResults = [];
 
-    const clickOutsideToClose = Widget.EventBox({
+    const ClickToClose = ({ ...props }) => Widget.EventBox({
+        ...props,
         onPrimaryClick: () => App.closeWindow('overview'),
         onSecondaryClick: () => App.closeWindow('overview'),
         onMiddleClick: () => App.closeWindow('overview'),
@@ -375,7 +394,7 @@ export const SearchAndWindows = () => {
         hpack: 'center',
         onAccept: (self) => { // This is when you hit Enter
             const text = self.text;
-            if(text.length == 0) return;
+            if (text.length == 0) return;
             const isAction = text.startsWith('>');
             const isDir = (entry.text[0] == '/' || entry.text[0] == '~');
 
@@ -423,7 +442,11 @@ export const SearchAndWindows = () => {
             ['notify::text', (entry) => { // This is when you type
                 const isAction = entry.text[0] == '>';
                 const isDir = (entry.text[0] == '/' || entry.text[0] == '~');
-                resultsBox.get_children().forEach(ch => ch.destroy());
+                const children = resultsBox.get_children();
+                for (let i = 0; i < children.length; i++) {
+                    const child = children[i];
+                    child.destroy();
+                }
                 // check empty if so then dont do stuff
                 if (entry.text == '') {
                     resultsRevealer.set_reveal_child(false);
@@ -485,7 +508,11 @@ export const SearchAndWindows = () => {
     return Widget.Box({
         vertical: true,
         children: [
-            clickOutsideToClose,
+            ClickToClose({ // Top margin. Also works as a click-outside-to-close thing
+                child: Widget.Box({
+                    className: 'bar-height',
+                })
+            }),
             Widget.Box({
                 hpack: 'center',
                 children: [
diff --git a/.config/ags/widgets/screencorners/main.js b/.config/ags/widgets/screencorners/main.js
index f2f412d6f..1c6c61b38 100644
--- a/.config/ags/widgets/screencorners/main.js
+++ b/.config/ags/widgets/screencorners/main.js
@@ -21,7 +21,7 @@ export const CornerBottomleft = () => Widget.Window({
     name: 'cornerbl',
     layer: 'top',
     anchor: ['bottom', 'left'],
-    exclusivity: 'normal',
+    exclusivity: 'ignore',
     visible: true,
     child: RoundedCorner('bottomleft', { className: 'corner-black', }),
 });
@@ -29,7 +29,7 @@ export const CornerBottomright = () => Widget.Window({
     name: 'cornerbr',
     layer: 'top',
     anchor: ['bottom', 'right'],
-    exclusivity: 'normal',
+    exclusivity: 'ignore',
     visible: true,
     child: RoundedCorner('bottomright', { className: 'corner-black', }),
 });
diff --git a/.config/ags/widgets/sideleft/apis/chatgpt.js b/.config/ags/widgets/sideleft/apis/chatgpt.js
index 9a51539bd..898a6a3fb 100644
--- a/.config/ags/widgets/sideleft/apis/chatgpt.js
+++ b/.config/ags/widgets/sideleft/apis/chatgpt.js
@@ -6,22 +6,20 @@ import ChatGPT from '../../../services/chatgpt.js';
 import { MaterialIcon } from "../../../lib/materialicon.js";
 import { setupCursorHover, setupCursorHoverInfo } from "../../../lib/cursorhover.js";
 import { SystemMessage, ChatMessage } from "./chatgpt_chatmessage.js";
-import { ConfigToggle } from '../../../lib/configwidgets.js';
+import { ConfigToggle, ConfigSegmentedSelection, ConfigGap } from '../../../lib/configwidgets.js';
 import { markdownTest } from '../../../lib/md2pango.js';
+import { MarginRevealer } from '../../../lib/advancedrevealers.js';
 
-const chatGPTTabIcon = Icon({
+export const chatGPTTabIcon = Box({
     hpack: 'center',
-    className: 'sidebar-chat-welcome-logo',
-    icon: `${App.configDir}/assets/openai-logomark.svg`,
-    setup: (self) => Utils.timeout(1, () => {
-        const styleContext = self.get_style_context();
-        const width = styleContext.get_property('min-width', Gtk.StateFlags.NORMAL);
-        const height = styleContext.get_property('min-height', Gtk.StateFlags.NORMAL);
-        self.size = Math.max(width, height, 1) * 116 / 180; // Why such a specific proportion? See https://openai.com/brand#logos
-    })
+    className: 'sidebar-chat-apiswitcher-icon',
+    homogeneous: true,
+    children: [
+        MaterialIcon('forum', 'norm'),
+    ],
 });
 
-export const chatGPTInfo = Box({
+const chatGPTInfo = Box({
     vertical: true,
     className: 'spacing-v-15',
     children: [
@@ -63,41 +61,62 @@ export const chatGPTInfo = Box({
     ]
 })
 
-export const chatGPTSettings = Revealer({
+export const chatGPTSettings = MarginRevealer({
     transition: 'slide_down',
-    transitionDuration: 150,
     revealChild: true,
     connections: [
-        [ChatGPT, (self) => {
-            self.revealChild = false;
-        }, 'newMsg'],
-        [ChatGPT, (self) => {
-            self.revealChild = true;
-        }, 'clear'],
+        [ChatGPT, (self) => Utils.timeout(200, () => {
+            self._hide(self);
+        }), 'newMsg'],
+        [ChatGPT, (self) => Utils.timeout(200, () => {
+            self._show(self);
+        }), 'clear'],
     ],
     child: Box({
         vertical: true,
-        hpack: 'fill',
         className: 'sidebar-chat-settings',
         children: [
-            ConfigToggle({
-                icon: 'cycle',
-                name: 'Cycle models',
-                desc: 'Helps avoid exceeding the API rate of 3 messages per minute.\nTurn this on if you message rapidly.',
-                initValue: ChatGPT.cycleModels,
-                onChange: (self, newValue) => {
-                    ChatGPT.cycleModels = newValue;
-                },
-            }),
-            ConfigToggle({
-                icon: 'description',
-                name: 'Assistant prompt',
-                desc: 'Tells ChatGPT\n  1. It\'s a sidebar assistant on Linux\n  2. Be short and concise\n  3. Use markdown features extensively\nLeave this off for a vanilla ChatGPT experience.',
-                initValue: ChatGPT.assistantPrompt,
-                onChange: (self, newValue) => {
-                    ChatGPT.assistantPrompt = newValue;
+            ConfigSegmentedSelection({
+                hpack: 'center',
+                icon: 'casino',
+                name: 'Randomness',
+                desc: 'ChatGPT\'s temperature value.\n  Precise = 0\n  Balanced = 0.5\n  Creative = 1',
+                options: [
+                    { value: 0.00, name: 'Precise', },
+                    { value: 0.50, name: 'Balanced', },
+                    { value: 1.00, name: 'Creative', },
+                ],
+                initIndex: 1,
+                onChange: (value, name) => {
+                    ChatGPT.temperature = value;
                 },
             }),
+            ConfigGap({ vertical: true, size: 10 }), // Note: size can only be 5, 10, or 15 
+            Box({
+                vertical: true,
+                hpack: 'fill',
+                className: 'sidebar-chat-settings-toggles',
+                children: [
+                    ConfigToggle({
+                        icon: 'cycle',
+                        name: 'Cycle models',
+                        desc: 'Helps avoid exceeding the API rate of 3 messages per minute.\nTurn this on if you message rapidly.',
+                        initValue: ChatGPT.cycleModels,
+                        onChange: (self, newValue) => {
+                            ChatGPT.cycleModels = newValue;
+                        },
+                    }),
+                    ConfigToggle({
+                        icon: 'description',
+                        name: 'Assistant prompt',
+                        desc: 'Tells ChatGPT\n  1. It\'s a sidebar assistant on Linux\n  2. Be short and concise\n  3. Use markdown features extensively\nLeave this off for a vanilla ChatGPT experience.',
+                        initValue: ChatGPT.assistantPrompt,
+                        onChange: (self, newValue) => {
+                            ChatGPT.assistantPrompt = newValue;
+                        },
+                    }),
+                ]
+            })
         ]
     })
 });
@@ -136,7 +155,7 @@ export const chatGPTWelcome = Box({
         children: [
             chatGPTInfo,
             openaiApiKeyInstructions,
-            chatGPTSettings,
+            chatGPTSettings, ``
         ]
     })
 });
@@ -148,27 +167,37 @@ export const chatContent = Box({
         [ChatGPT, (box, id) => {
             const message = ChatGPT.messages[id];
             if (!message) return;
-            box.add(ChatMessage(message))
+            box.add(ChatMessage(message, chatGPTView))
         }, 'newMsg'],
-        [ChatGPT, (box) => {
-            box.children = [chatGPTWelcome];
-        }, 'clear'],
-        [ChatGPT, (box) => {
-            box.children = [chatGPTWelcome];
-        }, 'initialized'],
     ]
 });
 
+const clearChat = () => {
+    ChatGPT.clear();
+    const children = chatContent.get_children();
+    for (let i = 0; i < children.length; i++) {
+        const child = children[i];
+        child.destroy();
+    }
+}
+
 export const chatGPTView = Scrollable({
     className: 'sidebar-chat-viewport',
     vexpand: true,
-    child: chatContent,
+    child: Box({
+        vertical: true,
+        children: [
+            chatGPTWelcome,
+            chatContent,
+        ]
+    }),
     setup: (scrolledWindow) => {
+        // Show scrollbar
         scrolledWindow.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
         const vScrollbar = scrolledWindow.get_vscrollbar();
         vScrollbar.get_style_context().add_class('sidebar-scrollbar');
-
-        Utils.timeout(1, () => { // Fix click-to-scroll-widget-to-view behavior
+        // Avoid click-to-scroll-widget-to-view behavior
+        Utils.timeout(1, () => { 
             const viewport = scrolledWindow.child;
             viewport.set_focus_vadjustment(new Gtk.Adjustment(undefined));
         })
@@ -183,7 +212,8 @@ export const chatGPTCommands = Box({
             className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
             onClicked: () => chatContent.add(SystemMessage(
                 `Key stored in:\n\`${ChatGPT.keyPath}\`\nTo update this key, type \`/key YOUR_API_KEY\``,
-                '/key')),
+                '/key',
+                chatGPTView)),
             setup: setupCursorHover,
             label: '/key',
         }),
@@ -191,14 +221,15 @@ export const chatGPTCommands = Box({
             className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
             onClicked: () => chatContent.add(SystemMessage(
                 `Currently using \`${ChatGPT.modelName}\``,
-                '/model'
+                '/model',
+                chatGPTView
             )),
             setup: setupCursorHover,
             label: '/model',
         }),
         Button({
             className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
-            onClicked: () => ChatGPT.clear(),
+            onClicked: () => clearChat(),
             setup: setupCursorHover,
             label: '/clear',
         }),
@@ -210,26 +241,39 @@ export const chatGPTSendMessage = (text) => {
     if (text.length == 0) return;
     if (ChatGPT.key.length == 0) {
         ChatGPT.key = text;
-        chatContent.add(SystemMessage(`Key saved to\n\`${ChatGPT.keyPath}\``, 'API Key'));
+        chatContent.add(SystemMessage(`Key saved to\n\`${ChatGPT.keyPath}\``, 'API Key', chatGPTView));
         text = '';
         return;
     }
     // Commands
     if (text.startsWith('/')) {
-        if (text.startsWith('/clear')) ChatGPT.clear();
-        else if (text.startsWith('/model')) chatContent.add(SystemMessage(`Currently using \`${ChatGPT.modelName}\``, '/model'))
+        if (text.startsWith('/clear')) clearChat();
+        else if (text.startsWith('/model')) chatContent.add(SystemMessage(`Currently using \`${ChatGPT.modelName}\``, '/model', chatGPTView))
+        else if (text.startsWith('/prompt')) {
+            const firstSpaceIndex = text.indexOf(' ');
+            const prompt = text.slice(firstSpaceIndex + 1);
+            if (firstSpaceIndex == -1 || prompt.length < 1) {
+                chatContent.add(SystemMessage(`Usage: \`/prompt MESSAGE\``, '/prompt', chatGPTView))
+            }
+            else {
+                ChatGPT.addMessage('user', prompt)
+            }
+        }
         else if (text.startsWith('/key')) {
             const parts = text.split(' ');
-            if (parts.length == 1) chatContent.add(SystemMessage(`Key stored in:\n\`${ChatGPT.keyPath}\`\nTo update this key, type \`/key YOUR_API_KEY\``, '/key'));
+            if (parts.length == 1) chatContent.add(SystemMessage(
+                `Key stored in:\n\`${ChatGPT.keyPath}\`\nTo update this key, type \`/key YOUR_API_KEY\``,
+                '/key',
+                chatGPTView));
             else {
                 ChatGPT.key = parts[1];
-                chatContent.add(SystemMessage(`Updated API Key at\n\`${ChatGPT.keyPath}\``, '/key'));
+                chatContent.add(SystemMessage(`Updated API Key at\n\`${ChatGPT.keyPath}\``, '/key', chatGPTView));
             }
         }
         else if (text.startsWith('/test'))
-            chatContent.add(SystemMessage(markdownTest, `Markdown test`));
+            chatContent.add(SystemMessage(markdownTest, `Markdown test`, chatGPTView));
         else
-            chatContent.add(SystemMessage(`Invalid command.`, 'Error'))
+            chatContent.add(SystemMessage(`Invalid command.`, 'Error', chatGPTView))
     }
     else {
         ChatGPT.send(text);
diff --git a/.config/ags/widgets/sideleft/apis/chatgpt_chatmessage.js b/.config/ags/widgets/sideleft/apis/chatgpt_chatmessage.js
index 65170f199..99faf5368 100644
--- a/.config/ags/widgets/sideleft/apis/chatgpt_chatmessage.js
+++ b/.config/ags/widgets/sideleft/apis/chatgpt_chatmessage.js
@@ -9,7 +9,7 @@ import GtkSource from "gi://GtkSource?version=3.0";
 const CUSTOM_SOURCEVIEW_SCHEME_PATH = `${App.configDir}/data/sourceviewtheme.xml`;
 const CUSTOM_SCHEME_ID = 'custom';
 const USERNAME = GLib.get_user_name();
-const CHATGPT_CURSOR = '  >> ';
+const CHATGPT_CURSOR = '  (o) ';
 const MESSAGE_SCROLL_DELAY = 13; // In milliseconds, the time before an updated message scrolls to bottom
 
 /////////////////////// Custom source view colorscheme /////////////////////////
@@ -92,10 +92,6 @@ const CodeBlock = (content = '', lang = 'txt') => {
             }),
             Button({
                 className: 'sidebar-chat-codeblock-topbar-btn',
-                onClicked: (self) => {
-                    // execAsync(['bash', '-c', `wl-copy '${content}'`, `&`]).catch(print);
-                    execAsync([`wl-copy`, `${sourceView.label}`]).catch(print);
-                },
                 child: Box({
                     className: 'spacing-h-5',
                     children: [
@@ -104,8 +100,13 @@ const CodeBlock = (content = '', lang = 'txt') => {
                             label: 'Copy',
                         })
                     ]
-                })
-            })
+                }),
+                onClicked: (self) => {
+                    const copyContent = sourceView.get_buffer().get_text(0, 0, 0); // TODO: fix this
+                    console.log(copyContent);
+                    execAsync([`wl-copy`, `${copyContent}`]).catch(print);
+                },
+            }),
         ]
     })
     // Source view
@@ -148,7 +149,11 @@ const MessageContent = (content) => {
         properties: [
             ['fullUpdate', (self, content, useCursor = false) => {
                 // Clear and add first text widget
-                contentBox.get_children().forEach(ch => ch.destroy());
+                const children = contentBox.get_children();
+                for (let i = 0; i < children.length; i++) {
+                    const child = children[i];
+                    child.destroy();
+                }
                 contentBox.add(TextBlock())
                 // Loop lines. Put normal text in markdown parser 
                 // and put code into code highlighter (TODO)
@@ -214,7 +219,7 @@ const MessageContent = (content) => {
     return contentBox;
 }
 
-export const ChatMessage = (message) => {
+export const ChatMessage = (message, scrolledWindow) => {
     const messageContentBox = MessageContent(message.content);
     const thisMessage = Box({
         className: 'sidebar-chat-message',
@@ -243,7 +248,7 @@ export const ChatMessage = (message) => {
                     [message, (self) => { // Message update
                         messageContentBox._fullUpdate(messageContentBox, message.content, message.role != 'user');
                         Utils.timeout(MESSAGE_SCROLL_DELAY, () => {
-                            const scrolledWindow = thisMessage.get_parent().get_parent();
+                            if (!scrolledWindow) return;
                             var adjustment = scrolledWindow.get_vadjustment();
                             adjustment.set_value(adjustment.get_upper() - adjustment.get_page_size());
                         });
@@ -258,7 +263,7 @@ export const ChatMessage = (message) => {
     return thisMessage;
 }
 
-export const SystemMessage = (content, commandName) => {
+export const SystemMessage = (content, commandName, scrolledWindow) => {
     const messageContentBox = MessageContent(content);
     const thisMessage = Box({
         className: 'sidebar-chat-message',
@@ -282,7 +287,7 @@ export const SystemMessage = (content, commandName) => {
             })
         ],
         setup: (self) => Utils.timeout(MESSAGE_SCROLL_DELAY, () => {
-            const scrolledWindow = thisMessage.get_parent().get_parent();
+            if (!scrolledWindow) return;
             var adjustment = scrolledWindow.get_vadjustment();
             adjustment.set_value(adjustment.get_upper() - adjustment.get_page_size());
         })
diff --git a/.config/ags/widgets/sideleft/apis/waifu.js b/.config/ags/widgets/sideleft/apis/waifu.js
new file mode 100644
index 000000000..e4e7dd631
--- /dev/null
+++ b/.config/ags/widgets/sideleft/apis/waifu.js
@@ -0,0 +1,72 @@
+const { Gdk, GLib, Gtk, Pango } = imports.gi;
+import { App, Utils, Widget } from '../../../imports.js';
+const { Box, Button, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
+const { execAsync, exec } = Utils;
+import { MaterialIcon } from "../../../lib/materialicon.js";
+import { setupCursorHover, setupCursorHoverInfo } from "../../../lib/cursorhover.js";
+import WaifuService from '../../../services/waifus.js';
+
+export const waifuTabIcon = Box({
+    hpack: 'center',
+    className: 'sidebar-chat-apiswitcher-icon',
+    homogeneous: true,
+    children: [
+        MaterialIcon('photo_library', 'norm'),
+    ]
+});
+
+const waifuContent = Box({
+    className: 'spacing-v-15',
+    vertical: true,
+    connections: [
+        [WaifuService, (box, id) => {
+            const message = WaifuService.responses[id];
+            if (!message) return;
+            box.add(Label({
+                label: message,
+            }))
+        }, 'newResponse'],
+    ]
+});
+
+export const waifuView = Scrollable({
+    className: 'sidebar-chat-viewport',
+    vexpand: true,
+    child: Box({
+        vertical: true,
+        children: [
+            waifuContent,
+        ]
+    }),
+    setup: (scrolledWindow) => {
+        // Show scrollbar
+        scrolledWindow.set_policy(Gtk.PolicyType.NEVER, Gtk.PolicyType.AUTOMATIC);
+        const vScrollbar = scrolledWindow.get_vscrollbar();
+        vScrollbar.get_style_context().add_class('sidebar-scrollbar');
+        // Avoid click-to-scroll-widget-to-view behavior
+        Utils.timeout(1, () => {
+            const viewport = scrolledWindow.child;
+            viewport.set_focus_vadjustment(new Gtk.Adjustment(undefined));
+        })
+    }
+});
+
+export const waifuCommands = Box({
+    className: 'spacing-h-5',
+    children: [
+        Box({ hexpand: true }),
+        Button({
+            className: 'sidebar-chat-chip sidebar-chat-chip-action txt txt-small',
+            onClicked: () => {
+                // command do something
+            },
+            setup: setupCursorHover,
+            label: '/call',
+        }),
+    ]
+});
+
+export const waifuCallAPI = (text) => {
+    // Do something on send
+    WaifuService.fetch(text);
+}
\ No newline at end of file
diff --git a/.config/ags/widgets/sideleft/apiwidgets.js b/.config/ags/widgets/sideleft/apiwidgets.js
index c44ef2b39..573b65dab 100644
--- a/.config/ags/widgets/sideleft/apiwidgets.js
+++ b/.config/ags/widgets/sideleft/apiwidgets.js
@@ -1,10 +1,12 @@
+const { Gtk, Gdk } = imports.gi;
 import { App, Utils, Widget } from '../../imports.js';
 const { Box, Button, Entry, EventBox, Icon, Label, Revealer, Scrollable, Stack } = Widget;
 const { execAsync, exec } = Utils;
 import { setupCursorHover, setupCursorHoverInfo } from "../../lib/cursorhover.js";
 // APIs
 import ChatGPT from '../../services/chatgpt.js';
-import { chatGPTView, chatGPTCommands, chatGPTSendMessage } from './apis/chatgpt.js';
+import { chatGPTView, chatGPTCommands, chatGPTSendMessage, chatGPTTabIcon } from './apis/chatgpt.js';
+import { waifuView, waifuCommands, waifuCallAPI, waifuTabIcon } from './apis/waifu.js';
 
 const APIS = [
     {
@@ -12,20 +14,20 @@ const APIS = [
         sendCommand: chatGPTSendMessage,
         contentWidget: chatGPTView,
         commandBar: chatGPTCommands,
-        tabIcon: Box({}),
-    }
+        tabIcon: chatGPTTabIcon,
+        placeholderText: 'Message ChatGPT',
+    },
+    {
+        name: 'Waifus',
+        sendCommand: waifuCallAPI,
+        contentWidget: waifuView,
+        commandBar: waifuCommands,
+        tabIcon: waifuTabIcon,
+        placeholderText: 'Enter tags',
+    },
 ];
 let currentApiId = 0;
-
-const apiSwitcher = Box({
-    vertical: true,
-    children: [
-        Box({
-            homogeneous: true,
-            children: APIS.map(api => api.tabIcon),
-        }),
-    ]
-})
+APIS[currentApiId].tabIcon.toggleClassName('sidebar-chat-apiswitcher-icon-enabled', true);
 
 export const chatEntry = Entry({
     className: 'sidebar-chat-entry',
@@ -75,7 +77,37 @@ const apiCommandStack = Stack({
     items: APIS.map(api => [api.name, api.commandBar]),
 })
 
+function switchToTab(id) {
+    APIS[currentApiId].tabIcon.toggleClassName('sidebar-chat-apiswitcher-icon-enabled', false);
+    APIS[id].tabIcon.toggleClassName('sidebar-chat-apiswitcher-icon-enabled', true);
+    apiContentStack.shown = APIS[id].name;
+    apiCommandStack.shown = APIS[id].name;
+    chatEntry.placeholderText = APIS[id].placeholderText,
+    currentApiId = id;
+}
+const apiSwitcher = Box({
+    homogeneous: true,
+    children: [
+        Box({
+            className: 'sidebar-chat-apiswitcher spacing-h-5',
+            hpack: 'center',
+            children: APIS.map((api, id) => Button({
+                child: api.tabIcon,
+                tooltipText: api.name,
+                setup: setupCursorHover,
+                onClicked: () => {
+                    switchToTab(id);
+                }
+            })),
+        }),
+    ]
+})
+
 export default Widget.Box({
+    properties: [
+        ['nextTab', () => switchToTab(Math.min(currentApiId + 1, APIS.length - 1))],
+        ['prevTab', () => switchToTab(Math.max(0, currentApiId-1))],
+    ],
     vertical: true,
     className: 'spacing-v-10',
     homogeneous: false,
@@ -84,5 +116,5 @@ export default Widget.Box({
         apiContentStack,
         apiCommandStack,
         textboxArea,
-    ]
+    ],
 });
diff --git a/.config/ags/widgets/sideleft/main.js b/.config/ags/widgets/sideleft/main.js
index b3889727e..1e78578ad 100644
--- a/.config/ags/widgets/sideleft/main.js
+++ b/.config/ags/widgets/sideleft/main.js
@@ -5,6 +5,7 @@ export default () => PopupWindow({
     focusable: true,
     anchor: ['left', 'top', 'bottom'],
     name: 'sideleft',
+    // exclusivity: 'exclusive',
     showClassName: 'sideleft-show',
     hideClassName: 'sideleft-hide',
     child: SidebarLeft(),
diff --git a/.config/ags/widgets/sideleft/module.js b/.config/ags/widgets/sideleft/module.js
index f9f3ce674..b4acaa8e2 100644
--- a/.config/ags/widgets/sideleft/module.js
+++ b/.config/ags/widgets/sideleft/module.js
@@ -18,6 +18,9 @@ export const SidebarModule = ({
                             className: 'txt-small txt',
                             label: `${name}`,
                         }),
+                        Box({
+                            hexpand: true,
+                        }),
                         Label({
                             className: 'sidebar-module-btn-arrow',
                         })
diff --git a/.config/ags/widgets/sideleft/quickscripts.js b/.config/ags/widgets/sideleft/quickscripts.js
index 85b4c2a73..c2df1a708 100644
--- a/.config/ags/widgets/sideleft/quickscripts.js
+++ b/.config/ags/widgets/sideleft/quickscripts.js
@@ -7,6 +7,5 @@ import { SidebarModule } from './module.js';
 export const QuickScripts = () => SidebarModule({
     name: 'Quick scripts',
     child: Box({
-
     })
 })
\ No newline at end of file
diff --git a/.config/ags/widgets/sideleft/sideleft.js b/.config/ags/widgets/sideleft/sideleft.js
index 184e7d129..a335eb276 100644
--- a/.config/ags/widgets/sideleft/sideleft.js
+++ b/.config/ags/widgets/sideleft/sideleft.js
@@ -7,77 +7,137 @@ import { setupCursorHover } from "../../lib/cursorhover.js";
 import { NavigationIndicator } from "../../lib/navigationindicator.js";
 import toolBox from './toolbox.js';
 import apiWidgets from './apiwidgets.js';
-import { chatEntry } from './apiwidgets.js';
+import apiwidgets, { chatEntry } from './apiwidgets.js';
 
-const SidebarTabButton = (stack, stackItem, navIndicator, navIndex, icon, label) => Widget.Button({
+const contents = [
+    {
+        name: 'apis',
+        content: apiWidgets,
+        materialIcon: 'api',
+        friendlyName: 'APIs',
+    },
+    {
+        name: 'tools',
+        content: toolBox,
+        materialIcon: 'home_repair_service',
+        friendlyName: 'Tools',
+    },
+]
+let currentTabId = 0;
+
+const contentStack = Stack({
+    vexpand: true,
+    transition: 'slide_left_right',
+    items: contents.map(item => [item.name, item.content]),
+})
+
+function switchToTab(id) {
+    const allTabs = navTabs.get_children();
+    const tabButton = allTabs[id];
+    allTabs[currentTabId].toggleClassName('sidebar-selector-tab-active', false);
+    allTabs[id].toggleClassName('sidebar-selector-tab-active', true);
+    contentStack.shown = contents[id].name;
+    if (tabButton) {
+        // Fancy highlighter line width
+        const buttonWidth = tabButton.get_allocated_width();
+        const highlightWidth = tabButton.get_children()[0].get_allocated_width();
+        navIndicator.css = `
+            font-size: ${id}px; 
+            padding: 0px ${(buttonWidth - highlightWidth) / 2}px;
+        `;
+    }
+    currentTabId = id;
+}
+const SidebarTabButton = (navIndex) => Widget.Button({
     // hexpand: true,
     className: 'sidebar-selector-tab',
     onClicked: (self) => {
-        stack.shown = stackItem;
-        // Add active class to self and remove for others
-        const allTabs = self.get_parent().get_children();
-        for (let i = 0; i < allTabs.length; i++) {
-            if (allTabs[i] != self) allTabs[i].toggleClassName('sidebar-selector-tab-active', false);
-            else self.toggleClassName('sidebar-selector-tab-active', true);
-        }
-        // Fancy highlighter line width
-        const buttonWidth = self.get_allocated_width();
-        const highlightWidth = self.get_children()[0].get_allocated_width();
-        navIndicator.css = `
-            font-size: ${navIndex}px; 
-            padding: 0px ${(buttonWidth - highlightWidth) / 2}px;
-        `;
+        switchToTab(navIndex);
     },
     child: Box({
         hpack: 'center',
         className: 'spacing-h-5',
         children: [
-            MaterialIcon(icon, 'larger'),
+            MaterialIcon(contents[navIndex].materialIcon, 'larger'),
             Label({
                 className: 'txt txt-smallie',
-                label: label,
+                label: `${contents[navIndex].friendlyName}`,
             })
         ]
     }),
     setup: (button) => Utils.timeout(1, () => {
         setupCursorHover(button);
-        button.toggleClassName('sidebar-selector-tab-active', defaultTab === stackItem);
+        button.toggleClassName('sidebar-selector-tab-active', currentTabId == navIndex);
     }),
 });
 
-const defaultTab = 'apis';
-const contentStack = Stack({
-    vexpand: true,
-    transition: 'slide_left_right',
-    items: [
-        ['apis', apiWidgets],
-        ['tools', toolBox],
-    ],
-})
+const navTabs = Box({
+    homogeneous: true,
+    children: contents.map((item, id) =>
+        SidebarTabButton(id, item.materialIcon, item.friendlyName)
+    ),
+});
 
 const navIndicator = NavigationIndicator(2, false, { // The line thing
     className: 'sidebar-selector-highlight',
-    css: 'font-size: 0px; padding: 0rem 4.773rem;', // Shushhhh
-})
+    css: 'font-size: 0px; padding: 0rem 4.160rem;', // Shushhhh
+});
 
 const navBar = Box({
     vertical: true,
+    hexpand: true,
     children: [
-        Box({
-            homogeneous: true,
-            children: [
-                SidebarTabButton(contentStack, 'apis', navIndicator, 0, 'api', 'APIs'),
-                SidebarTabButton(contentStack, 'tools', navIndicator, 1, 'home_repair_service', 'Tools'),
-            ]
-        }),
+        navTabs,
         navIndicator,
     ]
+});
+
+const pinButton = Button({
+    properties: [
+        ['enabled', false],
+        ['toggle', (self) => {
+            self._enabled = !self._enabled;
+            self.toggleClassName('sidebar-pin-enabled', self._enabled);
+
+            const sideleftWindow = App.getWindow('sideleft');
+            const barWindow = App.getWindow('bar');
+            const cornerTopLeftWindow = App.getWindow('cornertl');
+            const sideleftContent = sideleftWindow.get_children()[0].get_children()[0].get_children()[1];
+
+            sideleftContent.toggleClassName('sidebar-pinned', self._enabled);
+
+            if (self._enabled) {
+                sideleftWindow.layer = 'bottom';
+                barWindow.layer = 'bottom';
+                cornerTopLeftWindow.layer = 'bottom';
+                sideleftWindow.exclusivity = 'exclusive';
+            }
+            else {
+                sideleftWindow.layer = 'top';
+                barWindow.layer = 'top';
+                cornerTopLeftWindow.layer = 'top';
+                sideleftWindow.exclusivity = 'normal';
+            }
+        }],
+    ],
+    vpack: 'start',
+    className: 'sidebar-pin',
+    child: MaterialIcon('push_pin', 'larger'),
+    tooltipText: 'Pin sidebar',
+    onClicked: (self) => self._toggle(self),
+    // QoL: Focus Pin button on open. Hit keybind -> space/enter = toggle pin state
+    connections: [[App, (self, currentName, visible) => {
+        if (currentName === 'sideleft' && visible) {
+            self.grab_focus();
+        }
+    }]]
 })
 
 export default () => Box({
     // vertical: true,
     vexpand: true,
     hexpand: true,
+    css: 'min-width: 2px;',
     children: [
         EventBox({
             onPrimaryClick: () => App.closeWindow('sideleft'),
@@ -87,23 +147,65 @@ export default () => Box({
         Box({
             vertical: true,
             vexpand: true,
-            className: 'sidebar-left',
+            className: 'sidebar-left spacing-v-10',
             children: [
-                navBar,
+                Box({
+                    className: 'spacing-h-10',
+                    children: [
+                        navBar,
+                        pinButton,
+                    ]
+                }),
                 contentStack,
-            ]
+            ],
+            connections: [[App, (self, currentName, visible) => {
+                if (currentName === 'sideleft') {
+                    self.toggleClassName('sidebar-pinned', pinButton._enabled && visible);
+                }
+            }]]
         }),
     ],
     connections: [
-        ['key-press-event', (widget, event) => { // Typing
-            if (event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 &&
-                widget != chatEntry && event.get_keyval()[1] != Gdk.KEY_space) {
-                if (contentStack.shown == 'apis') {
+        ['key-press-event', (widget, event) => { // Handle keybinds
+            if (event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) {
+                // Pin sidebar
+                if (event.get_keyval()[1] == Gdk.KEY_p)
+                    pinButton._toggle(pinButton);
+                // Switch sidebar tab
+                else if (event.get_keyval()[1] === Gdk.KEY_Tab)
+                    switchToTab((currentTabId + 1) % contents.length);
+                else if (event.get_keyval()[1] === Gdk.KEY_Page_Up)
+                    switchToTab(Math.max(currentTabId - 1), 0);
+                else if (event.get_keyval()[1] === Gdk.KEY_Page_Down)
+                    switchToTab(Math.min(currentTabId + 1), contents.length);
+            }
+            if (contentStack.shown == 'apis') { // If api tab is focused
+                // Automatically focus entry when typing
+                if ((
+                    !(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
+                    event.get_keyval()[1] >= 32 && event.get_keyval()[1] <= 126 &&
+                    widget != chatEntry && event.get_keyval()[1] != Gdk.KEY_space)
+                    ||
+                    ((event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) && 
+                    event.get_keyval()[1] === Gdk.KEY_v)
+                ) {
                     chatEntry.grab_focus();
                     chatEntry.set_text(chatEntry.text + String.fromCharCode(event.get_keyval()[1]));
                     chatEntry.set_position(-1);
                 }
+                // Switch API type
+                else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
+                    event.get_keyval()[1] === Gdk.KEY_Page_Down) {
+                    const toSwitchTab = contentStack.get_visible_child();
+                    toSwitchTab._nextTab();
+                }
+                else if (!(event.get_state()[1] & Gdk.ModifierType.CONTROL_MASK) &&
+                    event.get_keyval()[1] === Gdk.KEY_Page_Up) {
+                    const toSwitchTab = contentStack.get_visible_child();
+                    toSwitchTab._prevTab();
+                }
             }
+
         }],
     ],
 });
diff --git a/.config/ags/widgets/sideright/calendar.js b/.config/ags/widgets/sideright/calendar.js
index b4d897578..391d0599f 100644
--- a/.config/ags/widgets/sideright/calendar.js
+++ b/.config/ags/widgets/sideright/calendar.js
@@ -65,12 +65,14 @@ const CalendarWidget = () => {
         }
     });
     const addCalendarChildren = (box, calendarJson) => {
+        const children = box.get_children();
+        for (let i = 0; i < children.length; i++) {
+            const child = children[i];
+            child.destroy();
+        }
         box.children = calendarJson.map((row, i) => Widget.Box({
-            // homogeneous: true,
             className: 'spacing-h-5',
-            children: row.map((day, i) =>
-                CalendarDay(day.day, day.today)
-            )
+            children: row.map((day, i) => CalendarDay(day.day, day.today)),
         }))
     }
     function shiftCalendarXMonths(x) {
diff --git a/.config/ags/widgets/sideright/quicktoggles.js b/.config/ags/widgets/sideright/quicktoggles.js
index b0d786857..263fcb52f 100644
--- a/.config/ags/widgets/sideright/quicktoggles.js
+++ b/.config/ags/widgets/sideright/quicktoggles.js
@@ -29,17 +29,15 @@ export const ToggleIconWifi = (props = {}) => Widget.Button({
 export const ToggleIconBluetooth = (props = {}) => Widget.Button({
     className: 'txt-small sidebar-iconbutton',
     tooltipText: 'Bluetooth | Right-click to configure',
-    onClicked: () => { // Provided service doesn't work hmmm
+    onClicked: () => {
         const status = Bluetooth?.enabled;
-        if (status) {
+        if (status) 
             exec('rfkill block bluetooth');
-        }
-        else {
+        else 
             exec('rfkill unblock bluetooth');
-        }
     },
     onSecondaryClickRelease: () => {
-        execAsync(['bash', '-c', 'XDG_CURRENT_DESKTOP="gnome" gnome-control-center bluetooth', '&']);
+        execAsync(['bash', '-c', 'blueberry &']);
     },
     child: BluetoothIndicator(),
     connections: [
@@ -70,24 +68,28 @@ export const HyprToggleIcon = (icon, name, hyprlandConfigValue, props = {}) => W
     ...props,
 })
 
-export const ModuleNightLight = (props = {}) => Widget.Button({
+export const ModuleNightLight = (props = {}) => Widget.Button({ // TODO: Make this work
+    properties: [
+        ['enabled', false],
+        ['yellowlight', undefined],
+    ],
     className: 'txt-small sidebar-iconbutton',
     tooltipText: 'Night Light',
-    onClicked: (button) => {
-        const shaderPath = JSON.parse(exec('hyprctl -j getoption decoration:screen_shader')).str;
-        if (shaderPath != "[[EMPTY]]" && shaderPath != "") {
-            execAsync(['bash', '-c', `hyprctl keyword decoration:screen_shader ''`]).catch(print);
-            button.toggleClassName('sidebar-button-active', false);
-        }
-        else {
-            execAsync(['bash', '-c', `hyprctl keyword decoration:screen_shader ~/.config/hypr/shaders/extradark.frag`]).catch(print);
-            button.toggleClassName('sidebar-button-active', true);
-        }
+    onClicked: (self) => {
+        self._enabled = !self._enabled;
+        self.toggleClassName('sidebar-button-active', self._enabled);
+        // if (self._enabled) Utils.execAsync(['bash', '-c', 'wlsunset & disown'])
+        if (self._enabled) Utils.execAsync('wlsunset')
+        else Utils.execAsync('pkill wlsunset');
     },
     child: MaterialIcon('nightlight', 'norm'),
-    setup: setupCursorHover,
+    setup: (self) => {
+        setupCursorHover(self);
+        self._enabled = !!exec('pidof wlsunset');
+        self.toggleClassName('sidebar-button-active', self._enabled);
+    },
     ...props,
-})
+});
 
 export const ModuleInvertColors = (props = {}) => Widget.Button({
     className: 'txt-small sidebar-iconbutton',
diff --git a/.config/ags/widgets/sideright/sideright.js b/.config/ags/widgets/sideright/sideright.js
index 89a71900f..3c14cd51b 100644
--- a/.config/ags/widgets/sideright/sideright.js
+++ b/.config/ags/widgets/sideright/sideright.js
@@ -41,18 +41,18 @@ import { ModuleCalendar } from "./calendar.js";
 const timeRow = Box({
     className: 'spacing-h-5 sidebar-group-invisible-morehorizpad',
     children: [
-        Widget.Label({
-            className: 'txt-title txt',
-            connections: [[5000, label => {
-                label.label = GLib.DateTime.new_now_local().format("%H:%M");
-            }]],
-        }),
+        // Widget.Label({
+        //     className: 'txt-title txt',
+        //     connections: [[5000, label => {
+        //         label.label = GLib.DateTime.new_now_local().format("%H:%M");
+        //     }]],
+        // }),
         Widget.Label({
             hpack: 'center',
             className: 'txt-small txt',
             connections: [[5000, label => {
                 execAsync(['bash', '-c', `uptime -p | sed -e 's/up //;s/ hours,/h/;s/ minutes/m/'`]).then(upTimeString => {
-                    label.label = `• up: ${upTimeString}`;
+                    label.label = `System uptime: ${upTimeString}`;
                 }).catch(print);
             }]],
         }),
@@ -81,6 +81,7 @@ const togglesBox = Widget.Box({
 export default () => Box({
     vexpand: true,
     hexpand: true,
+    css: 'min-width: 2px;',
     children: [
         EventBox({
             onPrimaryClick: () => App.closeWindow('sideright'),