diff --git a/.gitignore b/.gitignore
index 0ecea57..6f0fbb9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,4 +1,7 @@
 .weather.json
 node_modules
+prepare
 
 @girs
+
+**/.claude/settings.local.json
diff --git a/app.ts b/app.ts
index 4b7f175..aa9ea1d 100644
--- a/app.ts
+++ b/app.ts
@@ -1,31 +1,27 @@
 import './src/lib/session';
-import './src/scss/style';
-import './src/shared/useTheme';
-import './src/shared/wallpaper';
-import './src/shared/systray';
-import './src/shared/dropdown';
-import './src/shared/utilities';
-import './src/components/bar/utils/sideEffects';
-
+import './src/style';
+import 'src/core/behaviors/bar';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
-const hyprland = AstalHyprland.get_default();
-
 import { Bar } from './src/components/bar';
-import { DropdownMenus, StandardWindows } from './src/components/menus/exports';
 import Notifications from './src/components/notifications';
 import SettingsDialog from './src/components/settings/index';
-import { bash, forMonitors } from 'src/lib/utils';
-import options from 'src/options';
 import OSD from 'src/components/osd/index';
 import { App } from 'astal/gtk3';
 import { execAsync } from 'astal';
-import { handleRealization } from 'src/components/menus/shared/dropdown/helpers';
-import { isDropdownMenu } from 'src/lib/constants/options.js';
-import { initializeSystemBehaviors } from 'src/lib/behaviors';
-import { runCLI } from 'src/cli/commander';
+import { handleRealization } from 'src/components/menus/shared/dropdown/helpers/helpers';
+import { isDropdownMenu } from 'src/components/settings/constants.js';
+import { initializeSystemBehaviors } from 'src/core/behaviors';
+import { runCLI } from 'src/services/cli/commander';
+import { DropdownMenus, StandardWindows } from 'src/components/menus';
+import { forMonitors } from 'src/components/bar/utils/monitors';
+import options from 'src/configuration';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
 
+const hyprland = AstalHyprland.get_default();
 const initializeStartupScripts = (): void => {
-    execAsync(`python3 ${SRC_DIR}/scripts/bluetooth.py`).catch((err) => console.error(err));
+    execAsync(`python3 ${SRC_DIR}/scripts/bluetooth.py`).catch((err) =>
+        console.error('Failed to initialize bluetooth script:', err),
+    );
 };
 
 const initializeMenus = (): void => {
@@ -38,7 +34,10 @@ const initializeMenus = (): void => {
     });
 
     DropdownMenus.forEach((window) => {
-        const windowName = window.name.replace('_default', '').concat('menu').toLowerCase();
+        const windowName = window.name
+            .replace(/_default.*/, '')
+            .concat('menu')
+            .toLowerCase();
 
         if (!isDropdownMenu(windowName)) {
             return;
@@ -54,18 +53,22 @@ App.start({
         runCLI(request, res);
     },
     async main() {
-        initializeStartupScripts();
+        try {
+            initializeStartupScripts();
 
-        Notifications();
-        OSD();
+            Notifications();
+            OSD();
 
-        const barsForMonitors = await forMonitors(Bar);
-        barsForMonitors.forEach((bar: JSX.Element) => bar);
+            const barsForMonitors = await forMonitors(Bar);
+            barsForMonitors.forEach((bar: JSX.Element) => bar);
 
-        SettingsDialog();
-        initializeMenus();
+            SettingsDialog();
+            initializeMenus();
 
-        initializeSystemBehaviors();
+            initializeSystemBehaviors();
+        } catch (error) {
+            console.error('Error during application initialization:', error);
+        }
     },
 });
 
@@ -73,6 +76,6 @@ hyprland.connect('monitor-added', () => {
     const { restartCommand } = options.hyprpanel;
 
     if (options.hyprpanel.restartAgs.get()) {
-        bash(restartCommand.get());
+        SystemUtilities.bash(restartCommand.get());
     }
 });
diff --git a/assets/tokyo-night.xml b/assets/tokyo-night.xml
new file mode 100644
index 0000000..0b597a7
--- /dev/null
+++ b/assets/tokyo-night.xml
@@ -0,0 +1,139 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+ Tokyo Night color scheme for GtkSourceView
+ Ported for HyprPanel
+-->
+
+<style-scheme id="tokyo-night" name="Tokyo Night" version="1.0">
+  <author>HyprPanel - Jas Singh</author>
+  <description>Tokyo Night color scheme for GtkSourceView</description>
+
+  <!-- Global Settings -->
+  <style name="text"                        foreground="#c0caf5" background="#1a1b26"/>
+  <style name="selection"                   foreground="#c0caf5" background="#283457"/>
+  <style name="cursor"                      foreground="#c0caf5"/>
+  <style name="secondary-cursor"            foreground="#c0caf5"/>
+  <style name="current-line"                background="#292e42"/>
+  <style name="line-numbers"                foreground="#565f89" background="#16161e"/>
+  <style name="draw-spaces"                 foreground="#565f89"/>
+  <style name="background-pattern"          background="#292e42"/>
+  <style name="bracket-match"               foreground="#c0caf5" background="#3d59a1" bold="true"/>
+  <style name="bracket-mismatch"            foreground="#1a1b26" background="#f7768e" bold="true"/>
+  <style name="right-margin"                foreground="#565f89" background="#16161e"/>
+  <style name="search-match"                foreground="#1a1b26" background="#ff9e64"/>
+
+  <!-- Syntax Highlighting -->
+  <!-- Comments -->
+  <style name="def:comment"                 foreground="#565f89" italic="true"/>
+  <style name="def:shebang"                 foreground="#565f89" bold="true"/>
+  <style name="def:doc-comment-element"     foreground="#565f89" italic="true"/>
+
+  <!-- Constants -->
+  <style name="def:constant"                foreground="#ff9e64"/>
+  <style name="def:string"                  foreground="#9ece6a"/>
+  <style name="def:special-char"            foreground="#7dcfff"/>
+  <style name="def:special-constant"        foreground="#bb9af7"/>
+  <style name="def:number"                  foreground="#ff9e64"/>
+  <style name="def:floating-point"          foreground="#ff9e64"/>
+  <style name="def:decimal"                 foreground="#ff9e64"/>
+  <style name="def:base-n-integer"          foreground="#ff9e64"/>
+  <style name="def:boolean"                 foreground="#bb9af7"/>
+  <style name="def:character"               foreground="#9ece6a"/>
+
+  <!-- Identifiers -->
+  <style name="def:identifier"              foreground="#c0caf5"/>
+  <style name="def:function"                foreground="#7aa2f7"/>
+  <style name="def:builtin"                 foreground="#7dcfff"/>
+
+  <!-- Statements -->
+  <style name="def:statement"               foreground="#bb9af7"/>
+  <style name="def:operator"                foreground="#89ddff"/>
+  <style name="def:keyword"                 foreground="#bb9af7" bold="true"/>
+  <style name="def:type"                    foreground="#7dcfff"/>
+  <style name="def:reserved"                foreground="#bb9af7"/>
+
+  <!-- Types -->
+  <style name="def:type"                    foreground="#7dcfff"/>
+
+  <!-- Others -->
+  <style name="def:preprocessor"            foreground="#bb9af7"/>
+  <style name="def:error"                   foreground="#f7768e" underline="error"/>
+  <style name="def:warning"                 foreground="#e0af68" underline="error"/>
+  <style name="def:note"                    foreground="#7aa2f7" underline="error"/>
+  <style name="def:net-address-in-comment"  foreground="#7dcfff" underline="true"/>
+  <style name="def:underlined"              underline="single"/>
+
+  <!-- Language specific -->
+  <!-- XML & HTML -->
+  <style name="xml:attribute-name"          foreground="#7aa2f7"/>
+  <style name="xml:element-name"            foreground="#f7768e"/>
+  <style name="xml:entity"                  foreground="#bb9af7"/>
+  <style name="xml:namespace"               foreground="#f7768e" underline="true"/>
+  <style name="xml:tag"                     foreground="#f7768e"/>
+  <style name="xml:doctype"                 foreground="#bb9af7"/>
+  <style name="xml:cdata-delim"             foreground="#8c8c8c" bold="true"/>
+  <style name="html:dtd"                    foreground="#bb9af7"/>
+  <style name="html:tag"                    foreground="#f7768e"/>
+
+  <!-- CSS -->
+  <style name="css:keyword"                 foreground="#7aa2f7"/>
+  <style name="css:at-rules"                foreground="#bb9af7"/>
+  <style name="css:color"                   foreground="#ff9e64"/>
+  <style name="css:string"                  foreground="#9ece6a"/>
+
+  <!-- Diff -->
+  <style name="diff:added-line"             foreground="#9ece6a"/>
+  <style name="diff:removed-line"           foreground="#f7768e"/>
+  <style name="diff:changed-line"           foreground="#e0af68"/>
+  <style name="diff:special-case"           foreground="#bb9af7"/>
+  <style name="diff:location"               foreground="#7aa2f7" bold="true"/>
+  <style name="diff:diff-file"              foreground="#e0af68" bold="true"/>
+
+  <!-- JSON specific -->
+  <style name="json:keyname"                foreground="#7aa2f7"/>
+  <style name="json:special-char"           foreground="#89ddff"/>
+  <style name="json:string"                 foreground="#9ece6a"/>
+  <style name="json:boolean"                foreground="#ff9e64"/>
+  <style name="json:null-value"             foreground="#bb9af7"/>
+  <style name="json:float"                  foreground="#ff9e64"/>
+  <style name="json:decimal"                foreground="#ff9e64"/>
+  <style name="json:error"                  foreground="#f7768e" underline="error"/>
+
+  <!-- JavaScript -->
+  <style name="js:function"                 foreground="#7aa2f7"/>
+  <style name="js:string"                   foreground="#9ece6a"/>
+  <style name="js:regex"                    foreground="#7dcfff"/>
+
+  <!-- Python -->
+  <style name="python:builtin-constant"     foreground="#bb9af7"/>
+  <style name="python:builtin-function"     foreground="#7aa2f7"/>
+  <style name="python:module-handler"       foreground="#bb9af7"/>
+  <style name="python:special-variable"     foreground="#bb9af7"/>
+  <style name="python:string-conversion"    foreground="#7dcfff"/>
+  <style name="python:format"               foreground="#7dcfff"/>
+  <style name="python:decorator"            foreground="#bb9af7"/>
+
+  <!-- C/C++ -->
+  <style name="c:preprocessor"              foreground="#bb9af7"/>
+  <style name="c:common-defines"            foreground="#bb9af7"/>
+  <style name="c:included-file"             foreground="#9ece6a"/>
+  <style name="c:char"                      foreground="#9ece6a"/>
+
+  <!-- Markdown -->
+  <style name="markdown:header"             foreground="#f7768e" bold="true"/>
+  <style name="markdown:list-marker"        foreground="#ff9e64" bold="true"/>
+  <style name="markdown:code"               foreground="#9ece6a"/>
+  <style name="markdown:emphasis"           foreground="#e0af68" italic="true"/>
+  <style name="markdown:strong-emphasis"    foreground="#e0af68" bold="true"/>
+  <style name="markdown:url"                foreground="#7aa2f7" underline="true"/>
+  <style name="markdown:link-text"          foreground="#bb9af7"/>
+  <style name="markdown:backslash-escape"   foreground="#ff9e64"/>
+  <style name="markdown:line-break"         foreground="#565f89"/>
+
+  <!-- Others -->
+  <style name="def:variable"                foreground="#c0caf5"/>
+  <style name="def:class"                   foreground="#7aa2f7" bold="true"/>
+  <style name="def:interface"               foreground="#7aa2f7" italic="true"/>
+  <style name="def:method"                  foreground="#7aa2f7"/>
+  <style name="def:namespace"               foreground="#bb9af7" underline="true"/>
+</style-scheme>
diff --git a/meson.build b/meson.build
index ed85f1f..2c1befb 100644
--- a/meson.build
+++ b/meson.build
@@ -41,4 +41,4 @@ configure_file(
 install_subdir('scripts', install_dir: datadir)
 install_subdir('themes', install_dir: datadir)
 install_subdir('assets', install_dir: datadir)
-install_subdir('src/scss', install_dir: datadir / 'src')
+install_subdir('src/style', install_dir: datadir / 'src')
diff --git a/package-lock.json b/package-lock.json
index 879017c..a54c579 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,13 +12,14 @@
                 "astal": "/usr/share/astal/gjs"
             },
             "devDependencies": {
-                "@types/node": "^22.5.4",
+                "@types/node": "^22.15.17",
                 "@typescript-eslint/eslint-plugin": "^8.5.0",
                 "@typescript-eslint/parser": "^8.5.0",
                 "eslint": "^8.57.0",
                 "eslint-config-prettier": "^9.1.0",
                 "eslint-plugin-import": "^2.30.0",
                 "eslint-plugin-prettier": "^5.2.1",
+                "knip": "^5.55.1",
                 "prettier": "^3.3.3",
                 "tsconfig-paths": "^4.2.0",
                 "typescript": "5.7.3"
@@ -28,11 +29,46 @@
             "name": "astal",
             "license": "LGPL-2.1"
         },
+        "node_modules/@emnapi/core": {
+            "version": "1.4.3",
+            "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.3.tgz",
+            "integrity": "sha512-4m62DuCE07lw01soJwPiBGC0nAww0Q+RY70VZ+n49yDIO13yyinhbWCeNnaob0lakDtWQzSdtNWzJeOJt2ma+g==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "@emnapi/wasi-threads": "1.0.2",
+                "tslib": "^2.4.0"
+            }
+        },
+        "node_modules/@emnapi/runtime": {
+            "version": "1.4.3",
+            "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.4.3.tgz",
+            "integrity": "sha512-pBPWdu6MLKROBX05wSNKcNb++m5Er+KQ9QkB+WVM+pW2Kx9hoSrVTnu3BdkI5eBLZoKu/J6mW/B6i6bJB2ytXQ==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "tslib": "^2.4.0"
+            }
+        },
+        "node_modules/@emnapi/wasi-threads": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.0.2.tgz",
+            "integrity": "sha512-5n3nTJblwRi8LlXkJ9eBzu+kZR8Yxcc7ubakyQTFzPMtIhFpUBRbsnc2Dv88IZDIbCDlBiWrknhB4Lsz7mg6BA==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "tslib": "^2.4.0"
+            }
+        },
         "node_modules/@eslint-community/eslint-utils": {
             "version": "4.7.0",
             "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
             "integrity": "sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "eslint-visitor-keys": "^3.4.3"
             },
@@ -51,6 +87,7 @@
             "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.1.tgz",
             "integrity": "sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
             }
@@ -60,6 +97,7 @@
             "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz",
             "integrity": "sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "ajv": "^6.12.4",
                 "debug": "^4.3.2",
@@ -83,16 +121,28 @@
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
             "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
             }
         },
+        "node_modules/@eslint/eslintrc/node_modules/ignore": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+            "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4"
+            }
+        },
         "node_modules/@eslint/eslintrc/node_modules/minimatch": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "brace-expansion": "^1.1.7"
             },
@@ -105,6 +155,7 @@
             "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.57.1.tgz",
             "integrity": "sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             }
@@ -115,6 +166,7 @@
             "integrity": "sha512-DZLEEqFWQFiyK6h5YIeynKx7JlvCYWL0cImfSRXZ9l4Sg2efkFGTuFf6vzXjK1cq6IYkU+Eg/JizXw+TD2vRNw==",
             "deprecated": "Use @eslint/config-array instead",
             "dev": true,
+            "license": "Apache-2.0",
             "dependencies": {
                 "@humanwhocodes/object-schema": "^2.0.3",
                 "debug": "^4.3.1",
@@ -129,6 +181,7 @@
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
             "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -139,6 +192,7 @@
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "brace-expansion": "^1.1.7"
             },
@@ -151,6 +205,7 @@
             "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
             "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
             "dev": true,
+            "license": "Apache-2.0",
             "engines": {
                 "node": ">=12.22"
             },
@@ -164,13 +219,28 @@
             "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.3.tgz",
             "integrity": "sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==",
             "deprecated": "Use @eslint/object-schema instead",
-            "dev": true
+            "dev": true,
+            "license": "BSD-3-Clause"
+        },
+        "node_modules/@napi-rs/wasm-runtime": {
+            "version": "0.2.10",
+            "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.10.tgz",
+            "integrity": "sha512-bCsCyeZEwVErsGmyPNSzwfwFn4OdxBj0mmv6hOFucB/k81Ojdu68RbZdxYsRQUPc9l6SU5F/cG+bXgWs3oUgsQ==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "@emnapi/core": "^1.4.3",
+                "@emnapi/runtime": "^1.4.3",
+                "@tybys/wasm-util": "^0.9.0"
+            }
         },
         "node_modules/@nodelib/fs.scandir": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
             "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "@nodelib/fs.stat": "2.0.5",
                 "run-parallel": "^1.1.9"
@@ -184,6 +254,7 @@
             "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
             "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 8"
             }
@@ -193,6 +264,7 @@
             "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
             "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "@nodelib/fs.scandir": "2.1.5",
                 "fastq": "^1.6.0"
@@ -201,11 +273,197 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/@oxc-resolver/binding-darwin-arm64": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-darwin-arm64/-/binding-darwin-arm64-9.0.2.tgz",
+            "integrity": "sha512-MVyRgP2gzJJtAowjG/cHN3VQXwNLWnY+FpOEsyvDepJki1SdAX/8XDijM1yN6ESD1kr9uhBKjGelC6h3qtT+rA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@oxc-resolver/binding-darwin-x64": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-darwin-x64/-/binding-darwin-x64-9.0.2.tgz",
+            "integrity": "sha512-7kV0EOFEZ3sk5Hjy4+bfA6XOQpCwbDiDkkHN4BHHyrBHsXxUR05EcEJPPL1WjItefg+9+8hrBmoK0xRoDs41+A==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "darwin"
+            ]
+        },
+        "node_modules/@oxc-resolver/binding-freebsd-x64": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-freebsd-x64/-/binding-freebsd-x64-9.0.2.tgz",
+            "integrity": "sha512-6OvkEtRXrt8sJ4aVfxHRikjain9nV1clIsWtJ1J3J8NG1ZhjyJFgT00SCvqxbK+pzeWJq6XzHyTCN78ML+lY2w==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "freebsd"
+            ]
+        },
+        "node_modules/@oxc-resolver/binding-linux-arm-gnueabihf": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm-gnueabihf/-/binding-linux-arm-gnueabihf-9.0.2.tgz",
+            "integrity": "sha512-aYpNL6o5IRAUIdoweW21TyLt54Hy/ZS9tvzNzF6ya1ckOQ8DLaGVPjGpmzxdNja9j/bbV6aIzBH7lNcBtiOTkQ==",
+            "cpu": [
+                "arm"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@oxc-resolver/binding-linux-arm64-gnu": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm64-gnu/-/binding-linux-arm64-gnu-9.0.2.tgz",
+            "integrity": "sha512-RGFW4vCfKMFEIzb9VCY0oWyyY9tR1/o+wDdNePhiUXZU4SVniRPQaZ1SJ0sUFI1k25pXZmzQmIP6cBmazi/Dew==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@oxc-resolver/binding-linux-arm64-musl": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-arm64-musl/-/binding-linux-arm64-musl-9.0.2.tgz",
+            "integrity": "sha512-lxx/PibBfzqYvut2Y8N2D0Ritg9H8pKO+7NUSJb9YjR/bfk2KRmP8iaUz3zB0JhPtf/W3REs65oKpWxgflGToA==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@oxc-resolver/binding-linux-riscv64-gnu": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-riscv64-gnu/-/binding-linux-riscv64-gnu-9.0.2.tgz",
+            "integrity": "sha512-yD28ptS/OuNhwkpXRPNf+/FvrO7lwURLsEbRVcL1kIE0GxNJNMtKgIE4xQvtKDzkhk6ZRpLho5VSrkkF+3ARTQ==",
+            "cpu": [
+                "riscv64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@oxc-resolver/binding-linux-s390x-gnu": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-s390x-gnu/-/binding-linux-s390x-gnu-9.0.2.tgz",
+            "integrity": "sha512-WBwEJdspoga2w+aly6JVZeHnxuPVuztw3fPfWrei2P6rNM5hcKxBGWKKT6zO1fPMCB4sdDkFohGKkMHVV1eryQ==",
+            "cpu": [
+                "s390x"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@oxc-resolver/binding-linux-x64-gnu": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-x64-gnu/-/binding-linux-x64-gnu-9.0.2.tgz",
+            "integrity": "sha512-a2z3/cbOOTUq0UTBG8f3EO/usFcdwwXnCejfXv42HmV/G8GjrT4fp5+5mVDoMByH3Ce3iVPxj1LmS6OvItKMYQ==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@oxc-resolver/binding-linux-x64-musl": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-linux-x64-musl/-/binding-linux-x64-musl-9.0.2.tgz",
+            "integrity": "sha512-bHZF+WShYQWpuswB9fyxcgMIWVk4sZQT0wnwpnZgQuvGTZLkYJ1JTCXJMtaX5mIFHf69ngvawnwPIUA4Feil0g==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "linux"
+            ]
+        },
+        "node_modules/@oxc-resolver/binding-wasm32-wasi": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-wasm32-wasi/-/binding-wasm32-wasi-9.0.2.tgz",
+            "integrity": "sha512-I5cSgCCh5nFozGSHz+PjIOfrqW99eUszlxKLgoNNzQ1xQ2ou9ZJGzcZ94BHsM9SpyYHLtgHljmOZxCT9bgxYNA==",
+            "cpu": [
+                "wasm32"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "@napi-rs/wasm-runtime": "^0.2.9"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            }
+        },
+        "node_modules/@oxc-resolver/binding-win32-arm64-msvc": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-win32-arm64-msvc/-/binding-win32-arm64-msvc-9.0.2.tgz",
+            "integrity": "sha512-5IhoOpPr38YWDWRCA5kP30xlUxbIJyLAEsAK7EMyUgqygBHEYLkElaKGgS0X5jRXUQ6l5yNxuW73caogb2FYaw==",
+            "cpu": [
+                "arm64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
+        "node_modules/@oxc-resolver/binding-win32-x64-msvc": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/@oxc-resolver/binding-win32-x64-msvc/-/binding-win32-x64-msvc-9.0.2.tgz",
+            "integrity": "sha512-Qc40GDkaad9rZksSQr2l/V9UubigIHsW69g94Gswc2sKYB3XfJXfIfyV8WTJ67u6ZMXsZ7BH1msSC6Aen75mCg==",
+            "cpu": [
+                "x64"
+            ],
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "os": [
+                "win32"
+            ]
+        },
         "node_modules/@pkgr/core": {
             "version": "0.2.4",
             "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.4.tgz",
             "integrity": "sha512-ROFF39F6ZrnzSUEmQQZUar0Jt4xVoP9WnDRdWwF4NNcXs3xBTLgBUDoOwW141y1jP+S8nahIbdxbFC7IShw9Iw==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
             },
@@ -217,36 +475,51 @@
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
             "integrity": "sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/@tybys/wasm-util": {
+            "version": "0.9.0",
+            "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.9.0.tgz",
+            "integrity": "sha512-6+7nlbMVX/PVDCwaIQ8nTOPveOcFLSt8GcXdx8hD0bt39uWxYT88uXzqTd4fTvqta7oeUJqudepapKNt2DYJFw==",
+            "dev": true,
+            "license": "MIT",
+            "optional": true,
+            "dependencies": {
+                "tslib": "^2.4.0"
+            }
         },
         "node_modules/@types/json5": {
             "version": "0.0.29",
             "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
             "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/@types/node": {
-            "version": "22.15.17",
-            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.17.tgz",
-            "integrity": "sha512-wIX2aSZL5FE+MR0JlvF87BNVrtFWf6AE6rxSE9X7OwnVvoyCQjpzSRJ+M87se/4QCkCiebQAqrJ0y6fwIyi7nw==",
+            "version": "22.15.21",
+            "resolved": "https://registry.npmjs.org/@types/node/-/node-22.15.21.tgz",
+            "integrity": "sha512-EV/37Td6c+MgKAbkcLG6vqZ2zEYHD7bvSrzqqs2RIhbA6w3x+Dqz8MZM3sP6kGTeLrdoOgKZe+Xja7tUB2DNkQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "undici-types": "~6.21.0"
             }
         },
         "node_modules/@typescript-eslint/eslint-plugin": {
-            "version": "8.32.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.32.0.tgz",
-            "integrity": "sha512-/jU9ettcntkBFmWUzzGgsClEi2ZFiikMX5eEQsmxIAWMOn4H3D4rvHssstmAHGVvrYnaMqdWWWg0b5M6IN/MTQ==",
+            "version": "8.32.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.32.1.tgz",
+            "integrity": "sha512-6u6Plg9nP/J1GRpe/vcjjabo6Uc5YQPAMxsgQyGC/I0RuukiG1wIe3+Vtg3IrSCVJDmqK3j8adrtzXSENRtFgg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "@eslint-community/regexpp": "^4.10.0",
-                "@typescript-eslint/scope-manager": "8.32.0",
-                "@typescript-eslint/type-utils": "8.32.0",
-                "@typescript-eslint/utils": "8.32.0",
-                "@typescript-eslint/visitor-keys": "8.32.0",
+                "@typescript-eslint/scope-manager": "8.32.1",
+                "@typescript-eslint/type-utils": "8.32.1",
+                "@typescript-eslint/utils": "8.32.1",
+                "@typescript-eslint/visitor-keys": "8.32.1",
                 "graphemer": "^1.4.0",
-                "ignore": "^5.3.1",
+                "ignore": "^7.0.0",
                 "natural-compare": "^1.4.0",
                 "ts-api-utils": "^2.1.0"
             },
@@ -264,15 +537,16 @@
             }
         },
         "node_modules/@typescript-eslint/parser": {
-            "version": "8.32.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.32.0.tgz",
-            "integrity": "sha512-B2MdzyWxCE2+SqiZHAjPphft+/2x2FlO9YBx7eKE1BCb+rqBlQdhtAEhzIEdozHd55DXPmxBdpMygFJjfjjA9A==",
+            "version": "8.32.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.32.1.tgz",
+            "integrity": "sha512-LKMrmwCPoLhM45Z00O1ulb6jwyVr2kr3XJp+G+tSEZcbauNnScewcQwtJqXDhXeYPDEjZ8C1SjXm015CirEmGg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/scope-manager": "8.32.0",
-                "@typescript-eslint/types": "8.32.0",
-                "@typescript-eslint/typescript-estree": "8.32.0",
-                "@typescript-eslint/visitor-keys": "8.32.0",
+                "@typescript-eslint/scope-manager": "8.32.1",
+                "@typescript-eslint/types": "8.32.1",
+                "@typescript-eslint/typescript-estree": "8.32.1",
+                "@typescript-eslint/visitor-keys": "8.32.1",
                 "debug": "^4.3.4"
             },
             "engines": {
@@ -288,13 +562,14 @@
             }
         },
         "node_modules/@typescript-eslint/scope-manager": {
-            "version": "8.32.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.32.0.tgz",
-            "integrity": "sha512-jc/4IxGNedXkmG4mx4nJTILb6TMjL66D41vyeaPWvDUmeYQzF3lKtN15WsAeTr65ce4mPxwopPSo1yUUAWw0hQ==",
+            "version": "8.32.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.32.1.tgz",
+            "integrity": "sha512-7IsIaIDeZn7kffk7qXC3o6Z4UblZJKV3UBpkvRNpr5NSyLji7tvTcvmnMNYuYLyh26mN8W723xpo3i4MlD33vA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.32.0",
-                "@typescript-eslint/visitor-keys": "8.32.0"
+                "@typescript-eslint/types": "8.32.1",
+                "@typescript-eslint/visitor-keys": "8.32.1"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -305,13 +580,14 @@
             }
         },
         "node_modules/@typescript-eslint/type-utils": {
-            "version": "8.32.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.32.0.tgz",
-            "integrity": "sha512-t2vouuYQKEKSLtJaa5bB4jHeha2HJczQ6E5IXPDPgIty9EqcJxpr1QHQ86YyIPwDwxvUmLfP2YADQ5ZY4qddZg==",
+            "version": "8.32.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.32.1.tgz",
+            "integrity": "sha512-mv9YpQGA8iIsl5KyUPi+FGLm7+bA4fgXaeRcFKRDRwDMu4iwrSHeDPipwueNXhdIIZltwCJv+NkxftECbIZWfA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/typescript-estree": "8.32.0",
-                "@typescript-eslint/utils": "8.32.0",
+                "@typescript-eslint/typescript-estree": "8.32.1",
+                "@typescript-eslint/utils": "8.32.1",
                 "debug": "^4.3.4",
                 "ts-api-utils": "^2.1.0"
             },
@@ -328,10 +604,11 @@
             }
         },
         "node_modules/@typescript-eslint/types": {
-            "version": "8.32.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.32.0.tgz",
-            "integrity": "sha512-O5Id6tGadAZEMThM6L9HmVf5hQUXNSxLVKeGJYWNhhVseps/0LddMkp7//VDkzwJ69lPL0UmZdcZwggj9akJaA==",
+            "version": "8.32.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.32.1.tgz",
+            "integrity": "sha512-YmybwXUJcgGqgAp6bEsgpPXEg6dcCyPyCSr0CAAueacR/CCBi25G3V8gGQ2kRzQRBNol7VQknxMs9HvVa9Rvfg==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
@@ -341,13 +618,14 @@
             }
         },
         "node_modules/@typescript-eslint/typescript-estree": {
-            "version": "8.32.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.32.0.tgz",
-            "integrity": "sha512-pU9VD7anSCOIoBFnhTGfOzlVFQIA1XXiQpH/CezqOBaDppRwTglJzCC6fUQGpfwey4T183NKhF1/mfatYmjRqQ==",
+            "version": "8.32.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.32.1.tgz",
+            "integrity": "sha512-Y3AP9EIfYwBb4kWGb+simvPaqQoT5oJuzzj9m0i6FCY6SPvlomY2Ei4UEMm7+FXtlNJbor80ximyslzaQF6xhg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.32.0",
-                "@typescript-eslint/visitor-keys": "8.32.0",
+                "@typescript-eslint/types": "8.32.1",
+                "@typescript-eslint/visitor-keys": "8.32.1",
                 "debug": "^4.3.4",
                 "fast-glob": "^3.3.2",
                 "is-glob": "^4.0.3",
@@ -367,15 +645,16 @@
             }
         },
         "node_modules/@typescript-eslint/utils": {
-            "version": "8.32.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.32.0.tgz",
-            "integrity": "sha512-8S9hXau6nQ/sYVtC3D6ISIDoJzS1NsCK+gluVhLN2YkBPX+/1wkwyUiDKnxRh15579WoOIyVWnoyIf3yGI9REw==",
+            "version": "8.32.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.32.1.tgz",
+            "integrity": "sha512-DsSFNIgLSrc89gpq1LJB7Hm1YpuhK086DRDJSNrewcGvYloWW1vZLHBTIvarKZDcAORIy/uWNx8Gad+4oMpkSA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.7.0",
-                "@typescript-eslint/scope-manager": "8.32.0",
-                "@typescript-eslint/types": "8.32.0",
-                "@typescript-eslint/typescript-estree": "8.32.0"
+                "@typescript-eslint/scope-manager": "8.32.1",
+                "@typescript-eslint/types": "8.32.1",
+                "@typescript-eslint/typescript-estree": "8.32.1"
             },
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -390,12 +669,13 @@
             }
         },
         "node_modules/@typescript-eslint/visitor-keys": {
-            "version": "8.32.0",
-            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.32.0.tgz",
-            "integrity": "sha512-1rYQTCLFFzOI5Nl0c8LUpJT8HxpwVRn9E4CkMsYfuN6ctmQqExjSTzzSk0Tz2apmXy7WU6/6fyaZVVA/thPN+w==",
+            "version": "8.32.1",
+            "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.32.1.tgz",
+            "integrity": "sha512-ar0tjQfObzhSaW3C3QNmTc5ofj0hDoNQ5XWrCy6zDyabdr0TWhCkClp+rywGNj/odAFBVzzJrK4tEq5M4Hmu4w==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
-                "@typescript-eslint/types": "8.32.0",
+                "@typescript-eslint/types": "8.32.1",
                 "eslint-visitor-keys": "^4.2.0"
             },
             "engines": {
@@ -411,6 +691,7 @@
             "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
             "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
             "dev": true,
+            "license": "Apache-2.0",
             "engines": {
                 "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
             },
@@ -422,13 +703,15 @@
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.3.0.tgz",
             "integrity": "sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==",
-            "dev": true
+            "dev": true,
+            "license": "ISC"
         },
         "node_modules/acorn": {
             "version": "8.14.1",
             "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.1.tgz",
             "integrity": "sha512-OvQ/2pUDKmgfCg++xsTX1wGxfTaszcHVcTctW4UJB4hibJx2HXxxO5UmVgyjMa+ZDsiaf5wWLXYpRWMmBI0QHg==",
             "dev": true,
+            "license": "MIT",
             "bin": {
                 "acorn": "bin/acorn"
             },
@@ -441,6 +724,7 @@
             "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
             "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
             "dev": true,
+            "license": "MIT",
             "peerDependencies": {
                 "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
             }
@@ -450,6 +734,7 @@
             "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
             "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "fast-deep-equal": "^3.1.1",
                 "fast-json-stable-stringify": "^2.0.0",
@@ -466,6 +751,7 @@
             "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
             "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=8"
             }
@@ -475,6 +761,7 @@
             "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
             "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "color-convert": "^2.0.1"
             },
@@ -489,13 +776,15 @@
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
             "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
-            "dev": true
+            "dev": true,
+            "license": "Python-2.0"
         },
         "node_modules/array-buffer-byte-length": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/array-buffer-byte-length/-/array-buffer-byte-length-1.0.2.tgz",
             "integrity": "sha512-LHE+8BuR7RYGDKvnrmcuSq3tDcKv9OFEXQt/HpbZhY7V6h0zlUXutnAD82GiFx9rdieCMjkvtcsPqBwgUl1Iiw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3",
                 "is-array-buffer": "^3.0.5"
@@ -512,6 +801,7 @@
             "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.8.tgz",
             "integrity": "sha512-itaWrbYbqpGXkGhZPGUulwnhVf5Hpy1xiCFsGqyIGglbBxmG5vSjxQen3/WGOjPpNEv1RtBLKxbmVXm8HpJStQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.7",
                 "define-properties": "^1.2.1",
@@ -532,6 +822,7 @@
             "resolved": "https://registry.npmjs.org/array.prototype.findlastindex/-/array.prototype.findlastindex-1.2.6.tgz",
             "integrity": "sha512-F/TKATkzseUExPlfvmwQKGITM3DGTK+vkAsCZoDc5daVygbJBnjEUCbgkAvVFsgfXfX4YIqZ/27G3k3tdXrTxQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "call-bound": "^1.0.4",
@@ -553,6 +844,7 @@
             "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
             "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "define-properties": "^1.2.1",
@@ -571,6 +863,7 @@
             "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
             "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "define-properties": "^1.2.1",
@@ -589,6 +882,7 @@
             "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
             "integrity": "sha512-BNoCY6SXXPQ7gF2opIP4GBE+Xw7U+pHMYKuzjgCN3GwiaIR09UUeKfheyIry77QtrCBlC0KK0q5/TER/tYh3PQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "array-buffer-byte-length": "^1.0.1",
                 "call-bind": "^1.0.8",
@@ -614,6 +908,7 @@
             "resolved": "https://registry.npmjs.org/async-function/-/async-function-1.0.0.tgz",
             "integrity": "sha512-hsU18Ae8CDTR6Kgu9DYf0EbCr/a5iGL0rytQDobUcdpYOKokk8LEjVphnXkDkgpi0wYVsqrXuP0bZxJaTqdgoA==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             }
@@ -623,6 +918,7 @@
             "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
             "integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "possible-typed-array-names": "^1.0.0"
             },
@@ -637,13 +933,15 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
             "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/brace-expansion": {
             "version": "2.0.1",
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
             "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0"
             }
@@ -653,6 +951,7 @@
             "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
             "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "fill-range": "^7.1.1"
             },
@@ -665,6 +964,7 @@
             "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
             "integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind-apply-helpers": "^1.0.0",
                 "es-define-property": "^1.0.0",
@@ -683,6 +983,7 @@
             "resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
             "integrity": "sha512-Sp1ablJ0ivDkSzjcaJdxEunN5/XvksFJ2sMBFfq6x0ryhQV/2b/KwFe21cMpmHtPOSij8K99/wSfoEuTObmuMQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0",
                 "function-bind": "^1.1.2"
@@ -696,6 +997,7 @@
             "resolved": "https://registry.npmjs.org/call-bound/-/call-bound-1.0.4.tgz",
             "integrity": "sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind-apply-helpers": "^1.0.2",
                 "get-intrinsic": "^1.3.0"
@@ -712,6 +1014,7 @@
             "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
             "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=6"
             }
@@ -721,6 +1024,7 @@
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
             "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "ansi-styles": "^4.1.0",
                 "supports-color": "^7.1.0"
@@ -737,6 +1041,7 @@
             "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
             "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "color-name": "~1.1.4"
             },
@@ -748,19 +1053,22 @@
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
             "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/concat-map": {
             "version": "0.0.1",
             "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
             "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/cross-spawn": {
             "version": "7.0.6",
             "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
             "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "path-key": "^3.1.0",
                 "shebang-command": "^2.0.0",
@@ -775,6 +1083,7 @@
             "resolved": "https://registry.npmjs.org/data-view-buffer/-/data-view-buffer-1.0.2.tgz",
             "integrity": "sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3",
                 "es-errors": "^1.3.0",
@@ -792,6 +1101,7 @@
             "resolved": "https://registry.npmjs.org/data-view-byte-length/-/data-view-byte-length-1.0.2.tgz",
             "integrity": "sha512-tuhGbE6CfTM9+5ANGf+oQb72Ky/0+s3xKUpHvShfiz2RxMFgFPjsXuRLBVMtvMs15awe45SRb83D6wH4ew6wlQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3",
                 "es-errors": "^1.3.0",
@@ -809,6 +1119,7 @@
             "resolved": "https://registry.npmjs.org/data-view-byte-offset/-/data-view-byte-offset-1.0.1.tgz",
             "integrity": "sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.2",
                 "es-errors": "^1.3.0",
@@ -822,10 +1133,11 @@
             }
         },
         "node_modules/debug": {
-            "version": "4.4.0",
-            "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
-            "integrity": "sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==",
+            "version": "4.4.1",
+            "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+            "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "ms": "^2.1.3"
             },
@@ -842,13 +1154,15 @@
             "version": "0.1.4",
             "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
             "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/define-data-property": {
             "version": "1.1.4",
             "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
             "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "es-define-property": "^1.0.0",
                 "es-errors": "^1.3.0",
@@ -866,6 +1180,7 @@
             "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
             "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "define-data-property": "^1.0.1",
                 "has-property-descriptors": "^1.0.0",
@@ -883,6 +1198,7 @@
             "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
             "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
             "dev": true,
+            "license": "Apache-2.0",
             "dependencies": {
                 "esutils": "^2.0.2"
             },
@@ -895,6 +1211,7 @@
             "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
             "integrity": "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind-apply-helpers": "^1.0.1",
                 "es-errors": "^1.3.0",
@@ -905,27 +1222,28 @@
             }
         },
         "node_modules/es-abstract": {
-            "version": "1.23.9",
-            "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.9.tgz",
-            "integrity": "sha512-py07lI0wjxAC/DcfK1S6G7iANonniZwTISvdPzk9hzeH0IZIshbuuFxLIU96OyF89Yb9hiqWn8M/bY83KY5vzA==",
+            "version": "1.23.10",
+            "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.23.10.tgz",
+            "integrity": "sha512-MtUbM072wlJNyeYAe0mhzrD+M6DIJa96CZAOBBrhDbgKnB4MApIKefcyAB1eOdYn8cUNZgvwBvEzdoAYsxgEIw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "array-buffer-byte-length": "^1.0.2",
                 "arraybuffer.prototype.slice": "^1.0.4",
                 "available-typed-arrays": "^1.0.7",
                 "call-bind": "^1.0.8",
-                "call-bound": "^1.0.3",
+                "call-bound": "^1.0.4",
                 "data-view-buffer": "^1.0.2",
                 "data-view-byte-length": "^1.0.2",
                 "data-view-byte-offset": "^1.0.1",
                 "es-define-property": "^1.0.1",
                 "es-errors": "^1.3.0",
-                "es-object-atoms": "^1.0.0",
+                "es-object-atoms": "^1.1.1",
                 "es-set-tostringtag": "^2.1.0",
                 "es-to-primitive": "^1.3.0",
                 "function.prototype.name": "^1.1.8",
-                "get-intrinsic": "^1.2.7",
-                "get-proto": "^1.0.0",
+                "get-intrinsic": "^1.3.0",
+                "get-proto": "^1.0.1",
                 "get-symbol-description": "^1.1.0",
                 "globalthis": "^1.0.4",
                 "gopd": "^1.2.0",
@@ -941,13 +1259,13 @@
                 "is-shared-array-buffer": "^1.0.4",
                 "is-string": "^1.1.1",
                 "is-typed-array": "^1.1.15",
-                "is-weakref": "^1.1.0",
+                "is-weakref": "^1.1.1",
                 "math-intrinsics": "^1.1.0",
-                "object-inspect": "^1.13.3",
+                "object-inspect": "^1.13.4",
                 "object-keys": "^1.1.1",
                 "object.assign": "^4.1.7",
                 "own-keys": "^1.0.1",
-                "regexp.prototype.flags": "^1.5.3",
+                "regexp.prototype.flags": "^1.5.4",
                 "safe-array-concat": "^1.1.3",
                 "safe-push-apply": "^1.0.0",
                 "safe-regex-test": "^1.1.0",
@@ -960,7 +1278,7 @@
                 "typed-array-byte-offset": "^1.0.4",
                 "typed-array-length": "^1.0.7",
                 "unbox-primitive": "^1.1.0",
-                "which-typed-array": "^1.1.18"
+                "which-typed-array": "^1.1.19"
             },
             "engines": {
                 "node": ">= 0.4"
@@ -974,6 +1292,7 @@
             "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
             "integrity": "sha512-e3nRfgfUZ4rNGL232gUgX06QNyyez04KdjFrF+LTRoOXmrOgFKDg4BCdsjW8EnT69eqdYGmRpJwiPVYNrCaW3g==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             }
@@ -983,6 +1302,7 @@
             "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
             "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             }
@@ -992,6 +1312,7 @@
             "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
             "integrity": "sha512-FGgH2h8zKNim9ljj7dankFPcICIK9Cp5bm+c2gQSYePhpaG5+esrLODihIorn+Pe6FGJzWhXQotPv73jTaldXA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0"
             },
@@ -1004,6 +1325,7 @@
             "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.1.0.tgz",
             "integrity": "sha512-j6vWzfrGVfyXxge+O0x5sh6cvxAog0a/4Rdd2K36zCMV5eJ+/+tOAngRO8cODMNWbVRdVlmGZQL2YS3yR8bIUA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0",
                 "get-intrinsic": "^1.2.6",
@@ -1019,6 +1341,7 @@
             "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
             "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "hasown": "^2.0.2"
             },
@@ -1031,6 +1354,7 @@
             "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
             "integrity": "sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "is-callable": "^1.2.7",
                 "is-date-object": "^1.0.5",
@@ -1048,6 +1372,7 @@
             "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
             "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=10"
             },
@@ -1061,6 +1386,7 @@
             "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
             "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "@eslint-community/eslint-utils": "^4.2.0",
                 "@eslint-community/regexpp": "^4.6.1",
@@ -1116,6 +1442,7 @@
             "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz",
             "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==",
             "dev": true,
+            "license": "MIT",
             "bin": {
                 "eslint-config-prettier": "bin/cli.js"
             },
@@ -1128,6 +1455,7 @@
             "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz",
             "integrity": "sha512-WFj2isz22JahUv+B788TlO3N6zL3nNJGU8CcZbPZvVEkBPaJdCV4vy5wyghty5ROFbCRnm132v8BScu5/1BQ8g==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "debug": "^3.2.7",
                 "is-core-module": "^2.13.0",
@@ -1139,6 +1467,7 @@
             "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
             "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "ms": "^2.1.1"
             }
@@ -1148,6 +1477,7 @@
             "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.12.0.tgz",
             "integrity": "sha512-wALZ0HFoytlyh/1+4wuZ9FJCD/leWHQzzrxJ8+rebyReSLk7LApMyd3WJaLVoN+D5+WIdJyDK1c6JnE65V4Zyg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "debug": "^3.2.7"
             },
@@ -1165,6 +1495,7 @@
             "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
             "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "ms": "^2.1.1"
             }
@@ -1174,6 +1505,7 @@
             "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
             "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "@rtsao/scc": "^1.1.0",
                 "array-includes": "^3.1.8",
@@ -1207,6 +1539,7 @@
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
             "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -1217,6 +1550,7 @@
             "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
             "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "ms": "^2.1.1"
             }
@@ -1226,6 +1560,7 @@
             "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
             "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
             "dev": true,
+            "license": "Apache-2.0",
             "dependencies": {
                 "esutils": "^2.0.2"
             },
@@ -1238,6 +1573,7 @@
             "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
             "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "minimist": "^1.2.0"
             },
@@ -1250,6 +1586,7 @@
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "brace-expansion": "^1.1.7"
             },
@@ -1262,6 +1599,7 @@
             "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
             "integrity": "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==",
             "dev": true,
+            "license": "ISC",
             "bin": {
                 "semver": "bin/semver.js"
             }
@@ -1271,6 +1609,7 @@
             "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.15.0.tgz",
             "integrity": "sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "@types/json5": "^0.0.29",
                 "json5": "^1.0.2",
@@ -1283,6 +1622,7 @@
             "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.4.0.tgz",
             "integrity": "sha512-BvQOvUhkVQM1i63iMETK9Hjud9QhqBnbtT1Zc642p9ynzBuCe5pybkOnvqZIBypXmMlsGcnU4HZ8sCTPfpAexA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "prettier-linter-helpers": "^1.0.0",
                 "synckit": "^0.11.0"
@@ -1313,6 +1653,7 @@
             "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
             "integrity": "sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==",
             "dev": true,
+            "license": "BSD-2-Clause",
             "dependencies": {
                 "esrecurse": "^4.3.0",
                 "estraverse": "^5.2.0"
@@ -1329,6 +1670,7 @@
             "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
             "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
             "dev": true,
+            "license": "Apache-2.0",
             "engines": {
                 "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
             },
@@ -1341,16 +1683,28 @@
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
             "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
             }
         },
+        "node_modules/eslint/node_modules/ignore": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
+            "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">= 4"
+            }
+        },
         "node_modules/eslint/node_modules/minimatch": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "brace-expansion": "^1.1.7"
             },
@@ -1363,6 +1717,7 @@
             "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
             "integrity": "sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==",
             "dev": true,
+            "license": "BSD-2-Clause",
             "dependencies": {
                 "acorn": "^8.9.0",
                 "acorn-jsx": "^5.3.2",
@@ -1380,6 +1735,7 @@
             "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.6.0.tgz",
             "integrity": "sha512-ca9pw9fomFcKPvFLXhBKUK90ZvGibiGOvRJNbjljY7s7uq/5YO4BOzcYtJqExdx99rF6aAcnRxHmcUHcz6sQsg==",
             "dev": true,
+            "license": "BSD-3-Clause",
             "dependencies": {
                 "estraverse": "^5.1.0"
             },
@@ -1392,6 +1748,7 @@
             "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
             "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
             "dev": true,
+            "license": "BSD-2-Clause",
             "dependencies": {
                 "estraverse": "^5.2.0"
             },
@@ -1404,6 +1761,7 @@
             "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
             "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
             "dev": true,
+            "license": "BSD-2-Clause",
             "engines": {
                 "node": ">=4.0"
             }
@@ -1413,6 +1771,7 @@
             "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
             "integrity": "sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==",
             "dev": true,
+            "license": "BSD-2-Clause",
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -1421,19 +1780,22 @@
             "version": "3.1.3",
             "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
             "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/fast-diff": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
             "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
-            "dev": true
+            "dev": true,
+            "license": "Apache-2.0"
         },
         "node_modules/fast-glob": {
             "version": "3.3.3",
             "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
             "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "@nodelib/fs.stat": "^2.0.2",
                 "@nodelib/fs.walk": "^1.2.3",
@@ -1450,6 +1812,7 @@
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
             "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "is-glob": "^4.0.1"
             },
@@ -1461,28 +1824,42 @@
             "version": "2.1.0",
             "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
             "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/fast-levenshtein": {
             "version": "2.0.6",
             "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
             "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/fastq": {
             "version": "1.19.1",
             "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.19.1.tgz",
             "integrity": "sha512-GwLTyxkCXjXbxqIhTsMI2Nui8huMPtnxg7krajPJAjnEG/iiOS7i+zCtWGZR9G0NBKbXKh6X9m9UIsYX/N6vvQ==",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "reusify": "^1.0.4"
             }
         },
+        "node_modules/fd-package-json": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/fd-package-json/-/fd-package-json-1.2.0.tgz",
+            "integrity": "sha512-45LSPmWf+gC5tdCQMNH4s9Sr00bIkiD9aN7dc5hqkrEw1geRYyDQS1v1oMHAW3ysfxfndqGsrDREHHjNNbKUfA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "walk-up-path": "^3.0.1"
+            }
+        },
         "node_modules/file-entry-cache": {
             "version": "6.0.1",
             "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
             "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "flat-cache": "^3.0.4"
             },
@@ -1495,6 +1872,7 @@
             "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
             "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "to-regex-range": "^5.0.1"
             },
@@ -1507,6 +1885,7 @@
             "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
             "integrity": "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "locate-path": "^6.0.0",
                 "path-exists": "^4.0.0"
@@ -1523,6 +1902,7 @@
             "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
             "integrity": "sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "flatted": "^3.2.9",
                 "keyv": "^4.5.3",
@@ -1536,13 +1916,15 @@
             "version": "3.3.3",
             "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.3.tgz",
             "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
-            "dev": true
+            "dev": true,
+            "license": "ISC"
         },
         "node_modules/for-each": {
             "version": "0.3.5",
             "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
             "integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "is-callable": "^1.2.7"
             },
@@ -1553,17 +1935,35 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/formatly": {
+            "version": "0.2.3",
+            "resolved": "https://registry.npmjs.org/formatly/-/formatly-0.2.3.tgz",
+            "integrity": "sha512-WH01vbXEjh9L3bqn5V620xUAWs32CmK4IzWRRY6ep5zpa/mrisL4d9+pRVuETORVDTQw8OycSO1WC68PL51RaA==",
+            "dev": true,
+            "license": "MIT",
+            "dependencies": {
+                "fd-package-json": "^1.2.0"
+            },
+            "bin": {
+                "formatly": "bin/index.mjs"
+            },
+            "engines": {
+                "node": ">=18.3.0"
+            }
+        },
         "node_modules/fs.realpath": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
             "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
-            "dev": true
+            "dev": true,
+            "license": "ISC"
         },
         "node_modules/function-bind": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
             "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
             "dev": true,
+            "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
             }
@@ -1573,6 +1973,7 @@
             "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.8.tgz",
             "integrity": "sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "call-bound": "^1.0.3",
@@ -1593,6 +1994,7 @@
             "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
             "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
             "dev": true,
+            "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
             }
@@ -1602,6 +2004,7 @@
             "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.3.0.tgz",
             "integrity": "sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind-apply-helpers": "^1.0.2",
                 "es-define-property": "^1.0.1",
@@ -1626,6 +2029,7 @@
             "resolved": "https://registry.npmjs.org/get-proto/-/get-proto-1.0.1.tgz",
             "integrity": "sha512-sTSfBjoXBp89JvIKIefqw7U2CCebsc74kiY6awiGogKtoSGbgjYE/G/+l9sF3MWFPNc9IcoOC4ODfKHfxFmp0g==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "dunder-proto": "^1.0.1",
                 "es-object-atoms": "^1.0.0"
@@ -1639,6 +2043,7 @@
             "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.1.0.tgz",
             "integrity": "sha512-w9UMqWwJxHNOvoNzSJ2oPF5wvYcvP7jUvYzhp67yEhTi17ZDBBC1z9pTdGuzjD+EFIqLSYRweZjqfiPzQ06Ebg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3",
                 "es-errors": "^1.3.0",
@@ -1657,6 +2062,7 @@
             "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
             "deprecated": "Glob versions prior to v9 are no longer supported",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "fs.realpath": "^1.0.0",
                 "inflight": "^1.0.4",
@@ -1677,6 +2083,7 @@
             "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
             "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "is-glob": "^4.0.3"
             },
@@ -1689,6 +2096,7 @@
             "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
             "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "balanced-match": "^1.0.0",
                 "concat-map": "0.0.1"
@@ -1699,6 +2107,7 @@
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
             "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "brace-expansion": "^1.1.7"
             },
@@ -1711,6 +2120,7 @@
             "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
             "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "type-fest": "^0.20.2"
             },
@@ -1726,6 +2136,7 @@
             "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
             "integrity": "sha512-DpLKbNU4WylpxJykQujfCcwYWiV/Jhm50Goo0wrVILAv5jOr9d+H+UR3PhSCD2rCCEIg0uc+G+muBTwD54JhDQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "define-properties": "^1.2.1",
                 "gopd": "^1.0.1"
@@ -1742,6 +2153,7 @@
             "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.2.0.tgz",
             "integrity": "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             },
@@ -1753,13 +2165,15 @@
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz",
             "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/has-bigints": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
             "integrity": "sha512-R3pbpkcIqv2Pm3dUwgjclDRVmWpTJW2DcMzcIhEXEx1oh/CEMObMm3KLmRJOdvhM7o4uQBnwr8pzRK2sJWIqfg==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             },
@@ -1772,6 +2186,7 @@
             "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
             "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=8"
             }
@@ -1781,6 +2196,7 @@
             "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
             "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "es-define-property": "^1.0.0"
             },
@@ -1793,6 +2209,7 @@
             "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.2.0.tgz",
             "integrity": "sha512-KIL7eQPfHQRC8+XluaIw7BHUwwqL19bQn4hzNgdr+1wXoU0KKj6rufu47lhY7KbJR2C6T6+PfyN0Ea7wkSS+qQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "dunder-proto": "^1.0.0"
             },
@@ -1808,6 +2225,7 @@
             "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
             "integrity": "sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             },
@@ -1820,6 +2238,7 @@
             "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
             "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "has-symbols": "^1.0.3"
             },
@@ -1835,6 +2254,7 @@
             "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
             "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "function-bind": "^1.1.2"
             },
@@ -1843,10 +2263,11 @@
             }
         },
         "node_modules/ignore": {
-            "version": "5.3.2",
-            "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
-            "integrity": "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g==",
+            "version": "7.0.4",
+            "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.4.tgz",
+            "integrity": "sha512-gJzzk+PQNznz8ysRrC0aOkBNVRBDtE1n53IqyqEf3PXrYwomFs5q4pGMizBMJF+ykh03insJ27hB8gSrD2Hn8A==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 4"
             }
@@ -1856,6 +2277,7 @@
             "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
             "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "parent-module": "^1.0.0",
                 "resolve-from": "^4.0.0"
@@ -1872,6 +2294,7 @@
             "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
             "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=0.8.19"
             }
@@ -1882,6 +2305,7 @@
             "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
             "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "once": "^1.3.0",
                 "wrappy": "1"
@@ -1891,13 +2315,15 @@
             "version": "2.0.4",
             "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
             "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
-            "dev": true
+            "dev": true,
+            "license": "ISC"
         },
         "node_modules/internal-slot": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
             "integrity": "sha512-4gd7VpWNQNB4UKKCFFVcp1AVv+FMOgs9NKzjHKusc8jTMhd5eL1NqQqOpE0KzMds804/yHlglp3uxgluOqAPLw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0",
                 "hasown": "^2.0.2",
@@ -1912,6 +2338,7 @@
             "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
             "integrity": "sha512-DDfANUiiG2wC1qawP66qlTugJeL5HyzMpfr8lLK+jMQirGzNod0B12cFB/9q838Ru27sBwfw78/rdoU7RERz6A==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "call-bound": "^1.0.3",
@@ -1929,6 +2356,7 @@
             "resolved": "https://registry.npmjs.org/is-async-function/-/is-async-function-2.1.1.tgz",
             "integrity": "sha512-9dgM/cZBnNvjzaMYHVoxxfPj2QXt22Ev7SuuPrs+xav0ukGB0S6d4ydZdEiM48kLx5kDV+QBPrpVnFyefL8kkQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "async-function": "^1.0.0",
                 "call-bound": "^1.0.3",
@@ -1948,6 +2376,7 @@
             "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.1.0.tgz",
             "integrity": "sha512-n4ZT37wG78iz03xPRKJrHTdZbe3IicyucEtdRsV5yglwc3GyUfbAfpSeD0FJ41NbUNSt5wbhqfp1fS+BgnvDFQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "has-bigints": "^1.0.2"
             },
@@ -1963,6 +2392,7 @@
             "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.2.2.tgz",
             "integrity": "sha512-wa56o2/ElJMYqjCjGkXri7it5FbebW5usLw/nPmCMs5DeZ7eziSYZhSmPRn0txqeW4LnAmQQU7FgqLpsEFKM4A==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3",
                 "has-tostringtag": "^1.0.2"
@@ -1979,6 +2409,7 @@
             "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
             "integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             },
@@ -1991,6 +2422,7 @@
             "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
             "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "hasown": "^2.0.2"
             },
@@ -2006,6 +2438,7 @@
             "resolved": "https://registry.npmjs.org/is-data-view/-/is-data-view-1.0.2.tgz",
             "integrity": "sha512-RKtWF8pGmS87i2D6gqQu/l7EYRlVdfzemCJN/P3UOs//x1QE7mfhvzHIApBTRf7axvT6DMGwSwBXYCT0nfB9xw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.2",
                 "get-intrinsic": "^1.2.6",
@@ -2023,6 +2456,7 @@
             "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.1.0.tgz",
             "integrity": "sha512-PwwhEakHVKTdRNVOw+/Gyh0+MzlCl4R6qKvkhuvLtPMggI1WAHt9sOwZxQLSGpUaDnrdyDsomoRgNnCfKNSXXg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.2",
                 "has-tostringtag": "^1.0.2"
@@ -2039,6 +2473,7 @@
             "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
             "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -2048,6 +2483,7 @@
             "resolved": "https://registry.npmjs.org/is-finalizationregistry/-/is-finalizationregistry-1.1.1.tgz",
             "integrity": "sha512-1pC6N8qWJbWoPtEjgcL2xyhQOP491EQjeUo3qTKcmV8YSDDJrOepfG8pcC7h/QgnQHYSv0mJ3Z/ZWxmatVrysg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3"
             },
@@ -2063,6 +2499,7 @@
             "resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
             "integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3",
                 "get-proto": "^1.0.0",
@@ -2081,6 +2518,7 @@
             "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
             "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "is-extglob": "^2.1.1"
             },
@@ -2093,6 +2531,7 @@
             "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.3.tgz",
             "integrity": "sha512-1Qed0/Hr2m+YqxnM09CjA2d/i6YZNfF6R2oRAOj36eUdS6qIV/huPJNSEpKbupewFs+ZsJlxsjjPbc0/afW6Lw==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             },
@@ -2105,6 +2544,7 @@
             "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
             "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=0.12.0"
             }
@@ -2114,6 +2554,7 @@
             "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.1.1.tgz",
             "integrity": "sha512-lZhclumE1G6VYD8VHe35wFaIif+CTy5SJIi5+3y4psDgWu4wPDoBhF8NxUOinEc7pHgiTsT6MaBb92rKhhD+Xw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3",
                 "has-tostringtag": "^1.0.2"
@@ -2130,6 +2571,7 @@
             "resolved": "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz",
             "integrity": "sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=8"
             }
@@ -2139,6 +2581,7 @@
             "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
             "integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.2",
                 "gopd": "^1.2.0",
@@ -2157,6 +2600,7 @@
             "resolved": "https://registry.npmjs.org/is-set/-/is-set-2.0.3.tgz",
             "integrity": "sha512-iPAjerrse27/ygGLxw+EBR9agv9Y6uLeYVJMu+QNCoouJ1/1ri0mGrcWpfCqFZuzzx3WjtwxG098X+n4OuRkPg==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             },
@@ -2169,6 +2613,7 @@
             "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.4.tgz",
             "integrity": "sha512-ISWac8drv4ZGfwKl5slpHG9OwPNty4jOWPRIhBpxOoD+hqITiwuipOQ2bNthAzwA3B4fIjO4Nln74N0S9byq8A==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3"
             },
@@ -2184,6 +2629,7 @@
             "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.1.1.tgz",
             "integrity": "sha512-BtEeSsoaQjlSPBemMQIrY1MY0uM6vnS1g5fmufYOtnxLGUZM2178PKbhsk7Ffv58IX+ZtcvoGwccYsh0PglkAA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3",
                 "has-tostringtag": "^1.0.2"
@@ -2200,6 +2646,7 @@
             "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.1.1.tgz",
             "integrity": "sha512-9gGx6GTtCQM73BgmHQXfDmLtfjjTUDSyoxTCbp5WtoixAhfgsDirWIcVQ/IHpvI5Vgd5i/J5F7B9cN/WlVbC/w==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.2",
                 "has-symbols": "^1.1.0",
@@ -2217,6 +2664,7 @@
             "resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
             "integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "which-typed-array": "^1.1.16"
             },
@@ -2232,6 +2680,7 @@
             "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
             "integrity": "sha512-K5pXYOm9wqY1RgjpL3YTkF39tni1XajUIkawTLUo9EZEVUFga5gSQJF8nNS7ZwJQ02y+1YCNYcMh+HIf1ZqE+w==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             },
@@ -2244,6 +2693,7 @@
             "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.1.1.tgz",
             "integrity": "sha512-6i9mGWSlqzNMEqpCp93KwRS1uUOodk2OJ6b+sq7ZPDSy2WuI5NFIxp/254TytR8ftefexkWn5xNiHUNpPOfSew==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3"
             },
@@ -2259,6 +2709,7 @@
             "resolved": "https://registry.npmjs.org/is-weakset/-/is-weakset-2.0.4.tgz",
             "integrity": "sha512-mfcwb6IzQyOKTs84CQMrOwW4gQcaTOAWJ0zzJCl2WSPDrWk/OzDaImWFH3djXhb24g4eudZfLRozAvPGw4d9hQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3",
                 "get-intrinsic": "^1.2.6"
@@ -2274,19 +2725,32 @@
             "version": "2.0.5",
             "resolved": "https://registry.npmjs.org/isarray/-/isarray-2.0.5.tgz",
             "integrity": "sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/isexe": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
             "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-            "dev": true
+            "dev": true,
+            "license": "ISC"
+        },
+        "node_modules/jiti": {
+            "version": "2.4.2",
+            "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.4.2.tgz",
+            "integrity": "sha512-rg9zJN+G4n2nfJl5MW3BMygZX56zKPNVEYYqq7adpmMh4Jn2QNEwhvQlFy6jPVdcod7txZtKHWnyZiA3a0zP7A==",
+            "dev": true,
+            "license": "MIT",
+            "bin": {
+                "jiti": "lib/jiti-cli.mjs"
+            }
         },
         "node_modules/js-yaml": {
             "version": "4.1.0",
             "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
             "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "argparse": "^2.0.1"
             },
@@ -2298,25 +2762,29 @@
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
             "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/json-schema-traverse": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
             "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/json-stable-stringify-without-jsonify": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
             "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/json5": {
             "version": "2.2.3",
             "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
             "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==",
             "dev": true,
+            "license": "MIT",
             "bin": {
                 "json5": "lib/cli.js"
             },
@@ -2329,15 +2797,77 @@
             "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
             "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "json-buffer": "3.0.1"
             }
         },
+        "node_modules/knip": {
+            "version": "5.58.1",
+            "resolved": "https://registry.npmjs.org/knip/-/knip-5.58.1.tgz",
+            "integrity": "sha512-9FKnuGhGFZ8wDgcjEYQ6btMmtGHa7dkvNU2ZHuMcv2NaxL7xDeFXZKjETbaiJBjWnLytrDXrh7a58lGXcE0Zfw==",
+            "dev": true,
+            "funding": [
+                {
+                    "type": "github",
+                    "url": "https://github.com/sponsors/webpro"
+                },
+                {
+                    "type": "opencollective",
+                    "url": "https://opencollective.com/knip"
+                },
+                {
+                    "type": "polar",
+                    "url": "https://polar.sh/webpro-nl"
+                }
+            ],
+            "license": "ISC",
+            "dependencies": {
+                "@nodelib/fs.walk": "^1.2.3",
+                "fast-glob": "^3.3.3",
+                "formatly": "^0.2.3",
+                "jiti": "^2.4.2",
+                "js-yaml": "^4.1.0",
+                "minimist": "^1.2.8",
+                "oxc-resolver": "^9.0.2",
+                "picocolors": "^1.1.0",
+                "picomatch": "^4.0.1",
+                "smol-toml": "^1.3.1",
+                "strip-json-comments": "5.0.1",
+                "zod": "^3.22.4",
+                "zod-validation-error": "^3.0.3"
+            },
+            "bin": {
+                "knip": "bin/knip.js",
+                "knip-bun": "bin/knip-bun.js"
+            },
+            "engines": {
+                "node": ">=18.18.0"
+            },
+            "peerDependencies": {
+                "@types/node": ">=18",
+                "typescript": ">=5.0.4"
+            }
+        },
+        "node_modules/knip/node_modules/strip-json-comments": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-5.0.1.tgz",
+            "integrity": "sha512-0fk9zBqO67Nq5M/m45qHCJxylV/DhBlIOVExqgOMiCCrzrhU6tCibRXNqE3jwJLftzE9SNuZtYbpzcO+i9FiKw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=14.16"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/sindresorhus"
+            }
+        },
         "node_modules/levn": {
             "version": "0.4.1",
             "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
             "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "prelude-ls": "^1.2.1",
                 "type-check": "~0.4.0"
@@ -2351,6 +2881,7 @@
             "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
             "integrity": "sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "p-locate": "^5.0.0"
             },
@@ -2365,13 +2896,15 @@
             "version": "4.6.2",
             "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
             "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/math-intrinsics": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
             "integrity": "sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             }
@@ -2381,6 +2914,7 @@
             "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
             "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 8"
             }
@@ -2390,6 +2924,7 @@
             "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
             "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "braces": "^3.0.3",
                 "picomatch": "^2.3.1"
@@ -2398,11 +2933,25 @@
                 "node": ">=8.6"
             }
         },
+        "node_modules/micromatch/node_modules/picomatch": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=8.6"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/jonschlinkert"
+            }
+        },
         "node_modules/minimatch": {
             "version": "9.0.5",
             "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
             "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "brace-expansion": "^2.0.1"
             },
@@ -2418,6 +2967,7 @@
             "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
             "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
             "dev": true,
+            "license": "MIT",
             "funding": {
                 "url": "https://github.com/sponsors/ljharb"
             }
@@ -2426,19 +2976,22 @@
             "version": "2.1.3",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
             "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/natural-compare": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
             "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/object-inspect": {
             "version": "1.13.4",
             "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.4.tgz",
             "integrity": "sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             },
@@ -2451,6 +3004,7 @@
             "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
             "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             }
@@ -2460,6 +3014,7 @@
             "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.7.tgz",
             "integrity": "sha512-nK28WOo+QIjBkDduTINE4JkF/UJJKyf2EJxvJKfblDpyg0Q+pkOHNTL0Qwy6NP6FhE/EnzV73BxxqcJaXY9anw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "call-bound": "^1.0.3",
@@ -2480,6 +3035,7 @@
             "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
             "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.7",
                 "define-properties": "^1.2.1",
@@ -2498,6 +3054,7 @@
             "resolved": "https://registry.npmjs.org/object.groupby/-/object.groupby-1.0.3.tgz",
             "integrity": "sha512-+Lhy3TQTuzXI5hevh8sBGqbmurHbbIjAi0Z4S63nthVLmLxfbj4T54a4CfZrXIrt9iP4mVAPYMo/v99taj3wjQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.7",
                 "define-properties": "^1.2.1",
@@ -2512,6 +3069,7 @@
             "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
             "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "call-bound": "^1.0.3",
@@ -2530,6 +3088,7 @@
             "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
             "integrity": "sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "wrappy": "1"
             }
@@ -2539,6 +3098,7 @@
             "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
             "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "deep-is": "^0.1.3",
                 "fast-levenshtein": "^2.0.6",
@@ -2556,6 +3116,7 @@
             "resolved": "https://registry.npmjs.org/own-keys/-/own-keys-1.0.1.tgz",
             "integrity": "sha512-qFOyK5PjiWZd+QQIh+1jhdb9LpxTF0qs7Pm8o5QHYZ0M3vKqSqzsZaEB6oWlxZ+q2sJBMI/Ktgd2N5ZwQoRHfg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "get-intrinsic": "^1.2.6",
                 "object-keys": "^1.1.1",
@@ -2568,11 +3129,37 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/oxc-resolver": {
+            "version": "9.0.2",
+            "resolved": "https://registry.npmjs.org/oxc-resolver/-/oxc-resolver-9.0.2.tgz",
+            "integrity": "sha512-w838ygc1p7rF+7+h5vR9A+Y9Fc4imy6C3xPthCMkdFUgFvUWkmABeNB8RBDQ6+afk44Q60/UMMQ+gfDUW99fBA==",
+            "dev": true,
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/Boshen"
+            },
+            "optionalDependencies": {
+                "@oxc-resolver/binding-darwin-arm64": "9.0.2",
+                "@oxc-resolver/binding-darwin-x64": "9.0.2",
+                "@oxc-resolver/binding-freebsd-x64": "9.0.2",
+                "@oxc-resolver/binding-linux-arm-gnueabihf": "9.0.2",
+                "@oxc-resolver/binding-linux-arm64-gnu": "9.0.2",
+                "@oxc-resolver/binding-linux-arm64-musl": "9.0.2",
+                "@oxc-resolver/binding-linux-riscv64-gnu": "9.0.2",
+                "@oxc-resolver/binding-linux-s390x-gnu": "9.0.2",
+                "@oxc-resolver/binding-linux-x64-gnu": "9.0.2",
+                "@oxc-resolver/binding-linux-x64-musl": "9.0.2",
+                "@oxc-resolver/binding-wasm32-wasi": "9.0.2",
+                "@oxc-resolver/binding-win32-arm64-msvc": "9.0.2",
+                "@oxc-resolver/binding-win32-x64-msvc": "9.0.2"
+            }
+        },
         "node_modules/p-limit": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
             "integrity": "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "yocto-queue": "^0.1.0"
             },
@@ -2588,6 +3175,7 @@
             "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz",
             "integrity": "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "p-limit": "^3.0.2"
             },
@@ -2603,6 +3191,7 @@
             "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
             "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "callsites": "^3.0.0"
             },
@@ -2615,6 +3204,7 @@
             "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
             "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=8"
             }
@@ -2624,6 +3214,7 @@
             "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
             "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -2633,6 +3224,7 @@
             "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
             "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=8"
             }
@@ -2641,15 +3233,24 @@
             "version": "1.0.7",
             "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
             "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
+        },
+        "node_modules/picocolors": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+            "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+            "dev": true,
+            "license": "ISC"
         },
         "node_modules/picomatch": {
-            "version": "2.3.1",
-            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-            "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
+            "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
             "dev": true,
+            "license": "MIT",
             "engines": {
-                "node": ">=8.6"
+                "node": ">=12"
             },
             "funding": {
                 "url": "https://github.com/sponsors/jonschlinkert"
@@ -2660,6 +3261,7 @@
             "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
             "integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             }
@@ -2669,6 +3271,7 @@
             "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
             "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.8.0"
             }
@@ -2678,6 +3281,7 @@
             "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.5.3.tgz",
             "integrity": "sha512-QQtaxnoDJeAkDvDKWCLiwIXkTgRhwYDEQCghU9Z6q03iyek/rxRh/2lC3HB7P8sWT2xC/y5JDctPLBIGzHKbhw==",
             "dev": true,
+            "license": "MIT",
             "bin": {
                 "prettier": "bin/prettier.cjs"
             },
@@ -2693,6 +3297,7 @@
             "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
             "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "fast-diff": "^1.1.2"
             },
@@ -2705,6 +3310,7 @@
             "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
             "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=6"
             }
@@ -2727,13 +3333,15 @@
                     "type": "consulting",
                     "url": "https://feross.org/support"
                 }
-            ]
+            ],
+            "license": "MIT"
         },
         "node_modules/reflect.getprototypeof": {
             "version": "1.0.10",
             "resolved": "https://registry.npmjs.org/reflect.getprototypeof/-/reflect.getprototypeof-1.0.10.tgz",
             "integrity": "sha512-00o4I+DVrefhv+nX0ulyi3biSHCPDe+yLv5o/p6d/UVlirijB8E16FtfwSAi4g3tcqrQ4lRAqQSoFEZJehYEcw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "define-properties": "^1.2.1",
@@ -2756,6 +3364,7 @@
             "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz",
             "integrity": "sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "define-properties": "^1.2.1",
@@ -2776,6 +3385,7 @@
             "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
             "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "is-core-module": "^2.16.0",
                 "path-parse": "^1.0.7",
@@ -2796,6 +3406,7 @@
             "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
             "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=4"
             }
@@ -2805,6 +3416,7 @@
             "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
             "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "iojs": ">=1.0.0",
                 "node": ">=0.10.0"
@@ -2816,6 +3428,7 @@
             "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
             "deprecated": "Rimraf versions prior to v4 are no longer supported",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "glob": "^7.1.3"
             },
@@ -2845,6 +3458,7 @@
                     "url": "https://feross.org/support"
                 }
             ],
+            "license": "MIT",
             "dependencies": {
                 "queue-microtask": "^1.2.2"
             }
@@ -2854,6 +3468,7 @@
             "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
             "integrity": "sha512-AURm5f0jYEOydBj7VQlVvDrjeFgthDdEF5H1dP+6mNpoXOMo1quQqJ4wvJDyRZ9+pO3kGWoOdmV08cSv2aJV6Q==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "call-bound": "^1.0.2",
@@ -2873,6 +3488,7 @@
             "resolved": "https://registry.npmjs.org/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
             "integrity": "sha512-iKE9w/Z7xCzUMIZqdBsp6pEQvwuEebH4vdpjcDWnyzaI6yl6O9FHvVpmGelvEHNsoY6wGblkxR6Zty/h00WiSA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0",
                 "isarray": "^2.0.5"
@@ -2889,6 +3505,7 @@
             "resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
             "integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.2",
                 "es-errors": "^1.3.0",
@@ -2902,10 +3519,11 @@
             }
         },
         "node_modules/semver": {
-            "version": "7.7.1",
-            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.1.tgz",
-            "integrity": "sha512-hlq8tAfn0m/61p4BVRcPzIGr6LKiMwo4VM6dGi6pt4qcRkmNzTcWq6eCEjEh+qXjkMDvPlOFFSGwQjoEa6gyMA==",
+            "version": "7.7.2",
+            "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+            "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
             "dev": true,
+            "license": "ISC",
             "bin": {
                 "semver": "bin/semver.js"
             },
@@ -2918,6 +3536,7 @@
             "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
             "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "define-data-property": "^1.1.4",
                 "es-errors": "^1.3.0",
@@ -2935,6 +3554,7 @@
             "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
             "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "define-data-property": "^1.1.4",
                 "es-errors": "^1.3.0",
@@ -2950,6 +3570,7 @@
             "resolved": "https://registry.npmjs.org/set-proto/-/set-proto-1.0.0.tgz",
             "integrity": "sha512-RJRdvCo6IAnPdsvP/7m6bsQqNnn1FCBX5ZNtFL98MmFF/4xAIJTIg1YbHW5DC2W5SKZanrC6i4HsJqlajw/dZw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "dunder-proto": "^1.0.1",
                 "es-errors": "^1.3.0",
@@ -2964,6 +3585,7 @@
             "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
             "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "shebang-regex": "^3.0.0"
             },
@@ -2976,6 +3598,7 @@
             "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
             "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=8"
             }
@@ -2985,6 +3608,7 @@
             "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
             "integrity": "sha512-ZX99e6tRweoUXqR+VBrslhda51Nh5MTQwou5tnUDgbtyM0dBgmhEDtWGP/xbKn6hqfPRHujUNwz5fy/wbbhnpw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0",
                 "object-inspect": "^1.13.3",
@@ -3004,6 +3628,7 @@
             "resolved": "https://registry.npmjs.org/side-channel-list/-/side-channel-list-1.0.0.tgz",
             "integrity": "sha512-FCLHtRD/gnpCiCHEiJLOwdmFP+wzCmDEkc9y7NsYxeF4u7Btsn1ZuwgwJGxImImHicJArLP4R0yX4c2KCrMrTA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "es-errors": "^1.3.0",
                 "object-inspect": "^1.13.3"
@@ -3020,6 +3645,7 @@
             "resolved": "https://registry.npmjs.org/side-channel-map/-/side-channel-map-1.0.1.tgz",
             "integrity": "sha512-VCjCNfgMsby3tTdo02nbjtM/ewra6jPHmpThenkTYh8pG9ucZ/1P8So4u4FGBek/BjpOVsDCMoLA/iuBKIFXRA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.2",
                 "es-errors": "^1.3.0",
@@ -3038,6 +3664,7 @@
             "resolved": "https://registry.npmjs.org/side-channel-weakmap/-/side-channel-weakmap-1.0.2.tgz",
             "integrity": "sha512-WPS/HvHQTYnHisLo9McqBHOJk2FkHO/tlpvldyrnem4aeQp4hai3gythswg6p01oSoTl58rcpiFAjF2br2Ak2A==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.2",
                 "es-errors": "^1.3.0",
@@ -3052,11 +3679,25 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/smol-toml": {
+            "version": "1.3.4",
+            "resolved": "https://registry.npmjs.org/smol-toml/-/smol-toml-1.3.4.tgz",
+            "integrity": "sha512-UOPtVuYkzYGee0Bd2Szz8d2G3RfMfJ2t3qVdZUAozZyAk+a0Sxa+QKix0YCwjL/A1RR0ar44nCxaoN9FxdJGwA==",
+            "dev": true,
+            "license": "BSD-3-Clause",
+            "engines": {
+                "node": ">= 18"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/cyyynthia"
+            }
+        },
         "node_modules/string.prototype.trim": {
             "version": "1.2.10",
             "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
             "integrity": "sha512-Rs66F0P/1kedk5lyYyH9uBzuiI/kNRmwJAR9quK6VOtIpZ2G+hMZd+HQbbv25MgCA6gEffoMZYxlTod4WcdrKA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "call-bound": "^1.0.2",
@@ -3078,6 +3719,7 @@
             "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.9.tgz",
             "integrity": "sha512-G7Ok5C6E/j4SGfyLCloXTrngQIQU3PWtXGst3yM7Bea9FRURf1S42ZHlZZtsNque2FN2PoUhfZXYLNWwEr4dLQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "call-bound": "^1.0.2",
@@ -3096,6 +3738,7 @@
             "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.8.tgz",
             "integrity": "sha512-UXSH262CSZY1tfu3G3Secr6uGLCFVPMhIqHjlgCUtCCcgihYc/xKs9djMTMUOb2j1mVSeU8EU6NWc/iQKU6Gfg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.7",
                 "define-properties": "^1.2.1",
@@ -3113,6 +3756,7 @@
             "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
             "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "ansi-regex": "^5.0.1"
             },
@@ -3125,6 +3769,7 @@
             "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
             "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=4"
             }
@@ -3134,6 +3779,7 @@
             "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
             "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=8"
             },
@@ -3146,6 +3792,7 @@
             "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
             "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "has-flag": "^4.0.0"
             },
@@ -3158,6 +3805,7 @@
             "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
             "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">= 0.4"
             },
@@ -3166,13 +3814,13 @@
             }
         },
         "node_modules/synckit": {
-            "version": "0.11.4",
-            "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.4.tgz",
-            "integrity": "sha512-Q/XQKRaJiLiFIBNN+mndW7S/RHxvwzuZS6ZwmRzUBqJBv/5QIKCEwkBC8GBf8EQJKYnaFs0wOZbKTXBPj8L9oQ==",
+            "version": "0.11.6",
+            "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.6.tgz",
+            "integrity": "sha512-2pR2ubZSV64f/vqm9eLPz/KOvR9Dm+Co/5ChLgeHl0yEDRc6h5hXHoxEQH8Y5Ljycozd3p1k5TTSVdzYGkPvLw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
-                "@pkgr/core": "^0.2.3",
-                "tslib": "^2.8.1"
+                "@pkgr/core": "^0.2.4"
             },
             "engines": {
                 "node": "^14.18.0 || >=16.0.0"
@@ -3185,13 +3833,15 @@
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
             "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/to-regex-range": {
             "version": "5.0.1",
             "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
             "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "is-number": "^7.0.0"
             },
@@ -3204,6 +3854,7 @@
             "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
             "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=18.12"
             },
@@ -3216,6 +3867,7 @@
             "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.2.0.tgz",
             "integrity": "sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "json5": "^2.2.2",
                 "minimist": "^1.2.6",
@@ -3229,13 +3881,16 @@
             "version": "2.8.1",
             "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
             "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-            "dev": true
+            "dev": true,
+            "license": "0BSD",
+            "optional": true
         },
         "node_modules/type-check": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
             "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "prelude-ls": "^1.2.1"
             },
@@ -3248,6 +3903,7 @@
             "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
             "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
             "dev": true,
+            "license": "(MIT OR CC0-1.0)",
             "engines": {
                 "node": ">=10"
             },
@@ -3260,6 +3916,7 @@
             "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
             "integrity": "sha512-nAYYwfY3qnzX30IkA6AQZjVbtK6duGontcQm1WSG1MD94YLqK0515GNApXkoxKOWMusVssAHWLh9SeaoefYFGw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3",
                 "es-errors": "^1.3.0",
@@ -3274,6 +3931,7 @@
             "resolved": "https://registry.npmjs.org/typed-array-byte-length/-/typed-array-byte-length-1.0.3.tgz",
             "integrity": "sha512-BaXgOuIxz8n8pIq3e7Atg/7s+DpiYrxn4vdot3w9KbnBhcRQq6o3xemQdIfynqSeXeDrF32x+WvfzmOjPiY9lg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.8",
                 "for-each": "^0.3.3",
@@ -3293,6 +3951,7 @@
             "resolved": "https://registry.npmjs.org/typed-array-byte-offset/-/typed-array-byte-offset-1.0.4.tgz",
             "integrity": "sha512-bTlAFB/FBYMcuX81gbL4OcpH5PmlFHqlCCpAl8AlEzMz5k53oNDvN8p1PNOWLEmI2x4orp3raOFB51tv9X+MFQ==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "available-typed-arrays": "^1.0.7",
                 "call-bind": "^1.0.8",
@@ -3314,6 +3973,7 @@
             "resolved": "https://registry.npmjs.org/typed-array-length/-/typed-array-length-1.0.7.tgz",
             "integrity": "sha512-3KS2b+kL7fsuk/eJZ7EQdnEmQoaho/r6KUef7hxvltNA5DR8NAUM+8wJMbJyZ4G9/7i3v5zPBIMN5aybAh2/Jg==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bind": "^1.0.7",
                 "for-each": "^0.3.3",
@@ -3334,6 +3994,7 @@
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.7.3.tgz",
             "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
             "dev": true,
+            "license": "Apache-2.0",
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -3347,6 +4008,7 @@
             "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
             "integrity": "sha512-nWJ91DjeOkej/TA8pXQ3myruKpKEYgqvpw9lz4OPHj/NWFNluYrjbz9j01CJ8yKQd2g4jFoOkINCTW2I5LEEyw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.3",
                 "has-bigints": "^1.0.2",
@@ -3364,22 +4026,32 @@
             "version": "6.21.0",
             "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
             "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-            "dev": true
+            "dev": true,
+            "license": "MIT"
         },
         "node_modules/uri-js": {
             "version": "4.4.1",
             "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
             "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
             "dev": true,
+            "license": "BSD-2-Clause",
             "dependencies": {
                 "punycode": "^2.1.0"
             }
         },
+        "node_modules/walk-up-path": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/walk-up-path/-/walk-up-path-3.0.1.tgz",
+            "integrity": "sha512-9YlCL/ynK3CTlrSRrDxZvUauLzAswPCrsaCgilqFevUYpeEW0/3ScEjaa3kbW/T0ghhkEr7mv+fpjqn1Y1YuTA==",
+            "dev": true,
+            "license": "ISC"
+        },
         "node_modules/which": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
             "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
             "dev": true,
+            "license": "ISC",
             "dependencies": {
                 "isexe": "^2.0.0"
             },
@@ -3395,6 +4067,7 @@
             "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.1.1.tgz",
             "integrity": "sha512-TbX3mj8n0odCBFVlY8AxkqcHASw3L60jIuF8jFP78az3C2YhmGvqbHBpAjTRH2/xqYunrJ9g1jSyjCjpoWzIAA==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "is-bigint": "^1.1.0",
                 "is-boolean-object": "^1.2.1",
@@ -3414,6 +4087,7 @@
             "resolved": "https://registry.npmjs.org/which-builtin-type/-/which-builtin-type-1.2.1.tgz",
             "integrity": "sha512-6iBczoX+kDQ7a3+YJBnh3T+KZRxM/iYNPXicqk66/Qfm1b93iu+yOImkg0zHbj5LNOcNv1TEADiZ0xa34B4q6Q==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "call-bound": "^1.0.2",
                 "function.prototype.name": "^1.1.6",
@@ -3441,6 +4115,7 @@
             "resolved": "https://registry.npmjs.org/which-collection/-/which-collection-1.0.2.tgz",
             "integrity": "sha512-K4jVyjnBdgvc86Y6BkaLZEN933SwYOuBFkdmBu9ZfkcAbdVbpITnDmjvZ/aQjRXQrv5EPkTnD1s39GiiqbngCw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "is-map": "^2.0.3",
                 "is-set": "^2.0.3",
@@ -3459,6 +4134,7 @@
             "resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
             "integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
             "dev": true,
+            "license": "MIT",
             "dependencies": {
                 "available-typed-arrays": "^1.0.7",
                 "call-bind": "^1.0.8",
@@ -3480,6 +4156,7 @@
             "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
             "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=0.10.0"
             }
@@ -3488,19 +4165,44 @@
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
             "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
-            "dev": true
+            "dev": true,
+            "license": "ISC"
         },
         "node_modules/yocto-queue": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
             "integrity": "sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==",
             "dev": true,
+            "license": "MIT",
             "engines": {
                 "node": ">=10"
             },
             "funding": {
                 "url": "https://github.com/sponsors/sindresorhus"
             }
+        },
+        "node_modules/zod": {
+            "version": "3.25.30",
+            "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.30.tgz",
+            "integrity": "sha512-VolhdEtu6TJr/fzGuHA/SZ5ixvXqA6ADOG9VRcQ3rdOKmF5hkmcJbyaQjUH5BgmpA9gej++zYRX7zjSmdReIwA==",
+            "dev": true,
+            "license": "MIT",
+            "funding": {
+                "url": "https://github.com/sponsors/colinhacks"
+            }
+        },
+        "node_modules/zod-validation-error": {
+            "version": "3.4.1",
+            "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-3.4.1.tgz",
+            "integrity": "sha512-1KP64yqDPQ3rupxNv7oXhf7KdhHHgaqbKuspVoiN93TT0xrBjql+Svjkdjq/Qh/7GSMmgQs3AfvBT0heE35thw==",
+            "dev": true,
+            "license": "MIT",
+            "engines": {
+                "node": ">=18.0.0"
+            },
+            "peerDependencies": {
+                "zod": "^3.24.4"
+            }
         }
     }
 }
diff --git a/package.json b/package.json
index f91aa79..e107332 100644
--- a/package.json
+++ b/package.json
@@ -6,7 +6,8 @@
     "scripts": {
         "lint": "eslint --config .eslintrc.json .",
         "lint:fix": "eslint --config .eslintrc.json . --fix",
-        "format": "prettier --write 'modules/**/*.ts'"
+        "format": "prettier --write 'modules/**/*.ts'",
+        "knip": "knip"
     },
     "keywords": [],
     "author": "",
@@ -15,13 +16,14 @@
         "astal": "/usr/share/astal/gjs"
     },
     "devDependencies": {
-        "@types/node": "^22.5.4",
+        "@types/node": "^22.15.17",
         "@typescript-eslint/eslint-plugin": "^8.5.0",
         "@typescript-eslint/parser": "^8.5.0",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
         "eslint-plugin-import": "^2.30.0",
         "eslint-plugin-prettier": "^5.2.1",
+        "knip": "^5.55.1",
         "prettier": "^3.3.3",
         "tsconfig-paths": "^4.2.0",
         "typescript": "5.7.3"
diff --git a/src/cli/utils/BarVisibility.ts b/src/cli/utils/BarVisibility.ts
deleted file mode 100644
index 1b8ff12..0000000
--- a/src/cli/utils/BarVisibility.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { BarToggleStates } from 'src/lib/types/cli.types';
-
-export class BarVisibility {
-    private static _toggleStates: BarToggleStates = {};
-
-    public static get(barName: string): boolean {
-        return this._toggleStates[barName] ?? true;
-    }
-
-    public static set(barName: string, isVisible: boolean): void {
-        this._toggleStates[barName] = isVisible;
-    }
-}
diff --git a/src/components/bar/custom_modules/CustomModules.ts b/src/components/bar/customModules/index.ts
similarity index 94%
rename from src/components/bar/custom_modules/CustomModules.ts
rename to src/components/bar/customModules/index.ts
index 4297c1e..9d64de2 100644
--- a/src/components/bar/custom_modules/CustomModules.ts
+++ b/src/components/bar/customModules/index.ts
@@ -1,8 +1,7 @@
 import { Gio, readFileAsync } from 'astal';
-import { CustomBarModule } from './types';
+import { CustomBarModule, WidgetMap } from './types';
 import { ModuleContainer } from './module_container';
-import { WidgetContainer } from '../shared/WidgetContainer';
-import { WidgetMap } from '..';
+import { WidgetContainer } from '../shared/widgetContainer';
 
 export class CustomModules {
     constructor() {}
diff --git a/src/components/bar/custom_modules/module_container/helpers/icon.ts b/src/components/bar/customModules/module_container/helpers/icon.ts
similarity index 98%
rename from src/components/bar/custom_modules/module_container/helpers/icon.ts
rename to src/components/bar/customModules/module_container/helpers/icon.ts
index 72680f8..8bc67e8 100644
--- a/src/components/bar/custom_modules/module_container/helpers/icon.ts
+++ b/src/components/bar/customModules/module_container/helpers/icon.ts
@@ -1,4 +1,4 @@
-import { isPrimitive } from 'src/lib/utils';
+import { isPrimitive } from 'src/lib/validation/types';
 import { CustomBarModuleIcon } from '../../types';
 import { parseCommandOutputJson } from './utils';
 
diff --git a/src/components/bar/custom_modules/module_container/helpers/label.ts b/src/components/bar/customModules/module_container/helpers/label.ts
similarity index 98%
rename from src/components/bar/custom_modules/module_container/helpers/label.ts
rename to src/components/bar/customModules/module_container/helpers/label.ts
index 3235f53..c6068c5 100644
--- a/src/components/bar/custom_modules/module_container/helpers/label.ts
+++ b/src/components/bar/customModules/module_container/helpers/label.ts
@@ -1,4 +1,4 @@
-import { isPrimitive } from 'src/lib/utils';
+import { isPrimitive } from 'src/lib/validation/types';
 
 /**
  * Generates a label based on module command output and a template configuration.
diff --git a/src/components/bar/custom_modules/module_container/helpers/utils.ts b/src/components/bar/customModules/module_container/helpers/utils.ts
similarity index 100%
rename from src/components/bar/custom_modules/module_container/helpers/utils.ts
rename to src/components/bar/customModules/module_container/helpers/utils.ts
diff --git a/src/components/bar/custom_modules/module_container/index.tsx b/src/components/bar/customModules/module_container/index.tsx
similarity index 95%
rename from src/components/bar/custom_modules/module_container/index.tsx
rename to src/components/bar/customModules/module_container/index.tsx
index c0f3067..2bd3244 100644
--- a/src/components/bar/custom_modules/module_container/index.tsx
+++ b/src/components/bar/customModules/module_container/index.tsx
@@ -1,11 +1,11 @@
 import { CustomBarModule } from '../types';
-import { Module } from '../../shared/Module';
+import { Module } from '../../shared/module';
 import { Astal } from 'astal/gtk3';
 import { bind, Variable } from 'astal';
 import { getIcon } from './helpers/icon';
 import { getLabel } from './helpers/label';
 import { initActionListener, initCommandPoller, setupModuleInteractions } from './setup';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
 
 export const ModuleContainer = (moduleName: string, moduleMetadata: CustomBarModule): BarBoxChild => {
     const {
diff --git a/src/components/bar/custom_modules/module_container/setup.ts b/src/components/bar/customModules/module_container/setup.ts
similarity index 93%
rename from src/components/bar/custom_modules/module_container/setup.ts
rename to src/components/bar/customModules/module_container/setup.ts
index dd80f2e..9b071a8 100644
--- a/src/components/bar/custom_modules/module_container/setup.ts
+++ b/src/components/bar/customModules/module_container/setup.ts
@@ -2,7 +2,9 @@ import { Variable, bind, execAsync } from 'astal';
 import { Astal } from 'astal/gtk3';
 import { BashPoller } from 'src/lib/poller/BashPoller';
 import { CustomBarModule } from '../types';
-import { inputHandler } from '../../utils/helpers';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+
+const inputHandler = InputHandlerService.getInstance();
 
 export function initCommandPoller(
     commandOutput: Variable<string>,
@@ -51,7 +53,7 @@ export function setupModuleInteractions(
     moduleScrollThreshold: number,
 ): void {
     const scrollThreshold = moduleScrollThreshold >= 0 ? moduleScrollThreshold : 1;
-    inputHandler(
+    inputHandler.attachHandlers(
         element,
         {
             onPrimaryClick: {
diff --git a/src/components/bar/custom_modules/types.ts b/src/components/bar/customModules/types.ts
similarity index 81%
rename from src/components/bar/custom_modules/types.ts
rename to src/components/bar/customModules/types.ts
index 07d112d..6f0ba68 100644
--- a/src/components/bar/custom_modules/types.ts
+++ b/src/components/bar/customModules/types.ts
@@ -1,4 +1,4 @@
-export type CustomBarModuleActions = {
+type CustomBarModuleActions = {
     onLeftClick?: string;
     onRightClick?: string;
     onMiddleClick?: string;
@@ -18,3 +18,7 @@ export type CustomBarModule = {
     actions?: CustomBarModuleActions;
 };
 export type CustomBarModuleIcon = string | string[] | Record<string, string>;
+
+export type WidgetMap = {
+    [key in string]: (monitor: number) => JSX.Element;
+};
diff --git a/src/components/bar/exports.ts b/src/components/bar/exports.ts
deleted file mode 100644
index 530078d..0000000
--- a/src/components/bar/exports.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Menu } from './modules/menu';
-import { Workspaces } from '../../components/bar/modules/workspaces/index';
-import { ClientTitle } from '../../components/bar/modules/window_title/index';
-import { Media } from '../../components/bar/modules/media/index';
-import { Notifications } from '../../components/bar/modules/notifications/index';
-import { Volume } from '../../components/bar/modules/volume/index';
-import { Network } from '../../components/bar/modules/network/index';
-import { Bluetooth } from '../../components/bar/modules/bluetooth/index';
-import { BatteryLabel } from '../../components/bar/modules/battery/index';
-import { Clock } from '../../components/bar/modules/clock/index';
-import { SysTray } from '../../components/bar/modules/systray/index';
-
-// Basic Modules
-import { Microphone } from '../../components/bar/modules/microphone/index';
-import { Ram } from '../../components/bar/modules/ram/index';
-import { Cpu } from '../../components/bar/modules/cpu/index';
-import { CpuTemp } from '../../components/bar/modules/cputemp/index';
-import { Storage } from '../../components/bar/modules/storage/index';
-import { Netstat } from '../../components/bar/modules/netstat/index';
-import { KbInput } from '../../components/bar/modules/kblayout/index';
-import { Updates } from '../../components/bar/modules/updates/index';
-import { Submap } from '../../components/bar/modules/submap/index';
-import { Weather } from '../../components/bar/modules/weather/index';
-import { Power } from '../../components/bar/modules/power/index';
-import { Hyprsunset } from '../../components/bar/modules/hyprsunset/index';
-import { Hypridle } from '../../components/bar/modules/hypridle/index';
-import { Cava } from '../../components/bar/modules/cava/index';
-import { WorldClock } from '../../components/bar/modules/worldclock/index';
-
-import { ModuleSeparator } from './modules/separator';
-
-export {
-    Menu,
-    Workspaces,
-    ClientTitle,
-    Media,
-    Notifications,
-    Volume,
-    Network,
-    Bluetooth,
-    BatteryLabel,
-    Clock,
-    SysTray,
-
-    // Basic Modules
-    Microphone,
-    Ram,
-    Cpu,
-    CpuTemp,
-    Storage,
-    Netstat,
-    KbInput,
-    Updates,
-    Submap,
-    Weather,
-    Power,
-    Hyprsunset,
-    Hypridle,
-    Cava,
-    WorldClock,
-    ModuleSeparator,
-};
diff --git a/src/components/bar/index.tsx b/src/components/bar/index.tsx
index 6cb4429..bfcc164 100644
--- a/src/components/bar/index.tsx
+++ b/src/components/bar/index.tsx
@@ -1,198 +1,19 @@
-import {
-    Menu,
-    Workspaces,
-    ClientTitle,
-    Media,
-    Notifications,
-    Volume,
-    Network,
-    Bluetooth,
-    BatteryLabel,
-    Clock,
-    SysTray,
-    Microphone,
-    Ram,
-    Cpu,
-    CpuTemp,
-    Storage,
-    Netstat,
-    KbInput,
-    Updates,
-    Submap,
-    Weather,
-    Power,
-    Hyprsunset,
-    Hypridle,
-    Cava,
-    WorldClock,
-    ModuleSeparator,
-} from './exports';
+import { GdkMonitorService } from 'src/services/display/monitor';
+import { BarLayout } from './layout/BarLayout';
+import { getCoreWidgets } from './layout/coreWidgets';
+import { WidgetRegistry } from './layout/WidgetRegistry';
 
-import { WidgetContainer } from './shared/WidgetContainer';
-import options from 'src/options';
-import { App, Gtk } from 'astal/gtk3';
-
-import Astal from 'gi://Astal?version=3.0';
-import { bind, Variable } from 'astal';
-import { getLayoutForMonitor, isLayoutEmpty } from './utils/monitors';
-import { GdkMonitorMapper } from './utils/GdkMonitorMapper';
-import { CustomModules } from './custom_modules/CustomModules';
-import { idleInhibit } from 'src/shared/utilities';
-
-const { layouts } = options.bar;
-const { location } = options.theme.bar;
-const { location: borderLocation } = options.theme.bar.border;
-
-let widgets: WidgetMap = {
-    battery: () => WidgetContainer(BatteryLabel()),
-    dashboard: () => WidgetContainer(Menu()),
-    workspaces: (monitor: number) => WidgetContainer(Workspaces(monitor)),
-    windowtitle: () => WidgetContainer(ClientTitle()),
-    media: () => WidgetContainer(Media()),
-    notifications: () => WidgetContainer(Notifications()),
-    volume: () => WidgetContainer(Volume()),
-    network: () => WidgetContainer(Network()),
-    bluetooth: () => WidgetContainer(Bluetooth()),
-    clock: () => WidgetContainer(Clock()),
-    systray: () => WidgetContainer(SysTray()),
-    microphone: () => WidgetContainer(Microphone()),
-    ram: () => WidgetContainer(Ram()),
-    cpu: () => WidgetContainer(Cpu()),
-    cputemp: () => WidgetContainer(CpuTemp()),
-    storage: () => WidgetContainer(Storage()),
-    netstat: () => WidgetContainer(Netstat()),
-    kbinput: () => WidgetContainer(KbInput()),
-    updates: () => WidgetContainer(Updates()),
-    submap: () => WidgetContainer(Submap()),
-    weather: () => WidgetContainer(Weather()),
-    power: () => WidgetContainer(Power()),
-    hyprsunset: () => WidgetContainer(Hyprsunset()),
-    hypridle: () => WidgetContainer(Hypridle()),
-    cava: () => WidgetContainer(Cava()),
-    worldclock: () => WidgetContainer(WorldClock()),
-    separator: () => ModuleSeparator(),
-};
-
-const gdkMonitorMapper = new GdkMonitorMapper();
+const gdkMonitorService = new GdkMonitorService();
+const widgetRegistry = new WidgetRegistry(getCoreWidgets());
 
+/**
+ * Factory function to create a Bar for a specific monitor
+ */
 export const Bar = async (monitor: number): Promise<JSX.Element> => {
-    try {
-        const customWidgets = await CustomModules.build();
-        widgets = {
-            ...widgets,
-            ...customWidgets,
-        };
-    } catch (error) {
-        console.error(error);
-    }
-    const hyprlandMonitor = gdkMonitorMapper.mapGdkToHyprland(monitor);
+    await widgetRegistry.initialize();
 
-    const computeVisibility = bind(layouts).as(() => {
-        const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.get());
-        return !isLayoutEmpty(foundLayout);
-    });
+    const hyprlandMonitor = gdkMonitorService.mapGdkToHyprland(monitor);
+    const barLayout = new BarLayout(monitor, hyprlandMonitor, widgetRegistry);
 
-    const computeClassName = bind(layouts).as(() => {
-        const foundLayout = getLayoutForMonitor(hyprlandMonitor, layouts.get());
-        return !isLayoutEmpty(foundLayout) ? 'bar' : '';
-    });
-
-    const computeAnchor = bind(location).as((loc) => {
-        if (loc === 'bottom') {
-            return Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT;
-        }
-
-        return Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT;
-    });
-
-    const computeLayer = Variable.derive(
-        [bind(options.theme.bar.layer), bind(options.tear)],
-        (barLayer, tear) => {
-            if (tear && barLayer === 'overlay') {
-                return Astal.Layer.TOP;
-            }
-            const layerMap = {
-                overlay: Astal.Layer.OVERLAY,
-                top: Astal.Layer.TOP,
-                bottom: Astal.Layer.BOTTOM,
-                background: Astal.Layer.BACKGROUND,
-            };
-
-            return layerMap[barLayer];
-        },
-    );
-
-    const computeBorderLocation = bind(borderLocation).as((brdrLcn) =>
-        brdrLcn !== 'none' ? 'bar-panel withBorder' : 'bar-panel',
-    );
-
-    const leftBinding = Variable.derive([bind(layouts)], (currentLayouts) => {
-        const foundLayout = getLayoutForMonitor(hyprlandMonitor, currentLayouts);
-
-        return foundLayout.left
-            .filter((mod) => Object.keys(widgets).includes(mod))
-            .map((w) => widgets[w](hyprlandMonitor));
-    });
-    const middleBinding = Variable.derive([bind(layouts)], (currentLayouts) => {
-        const foundLayout = getLayoutForMonitor(hyprlandMonitor, currentLayouts);
-
-        return foundLayout.middle
-            .filter((mod) => Object.keys(widgets).includes(mod))
-            .map((w) => widgets[w](hyprlandMonitor));
-    });
-    const rightBinding = Variable.derive([bind(layouts)], (currentLayouts) => {
-        const foundLayout = getLayoutForMonitor(hyprlandMonitor, currentLayouts);
-
-        return foundLayout.right
-            .filter((mod) => Object.keys(widgets).includes(mod))
-            .map((w) => widgets[w](hyprlandMonitor));
-    });
-
-    return (
-        <window
-            inhibit={bind(idleInhibit)}
-            name={`bar-${hyprlandMonitor}`}
-            namespace={`bar-${hyprlandMonitor}`}
-            className={computeClassName}
-            application={App}
-            monitor={monitor}
-            visible={computeVisibility}
-            anchor={computeAnchor}
-            layer={computeLayer()}
-            exclusivity={Astal.Exclusivity.EXCLUSIVE}
-            onDestroy={() => {
-                computeLayer.drop();
-                leftBinding.drop();
-                middleBinding.drop();
-                rightBinding.drop();
-            }}
-        >
-            <box className={'bar-panel-container'}>
-                <centerbox
-                    css={'padding: 1px;'}
-                    hexpand
-                    className={computeBorderLocation}
-                    startWidget={
-                        <box className={'box-left'} hexpand>
-                            {leftBinding()}
-                        </box>
-                    }
-                    centerWidget={
-                        <box className={'box-center'} halign={Gtk.Align.CENTER}>
-                            {middleBinding()}
-                        </box>
-                    }
-                    endWidget={
-                        <box className={'box-right'} halign={Gtk.Align.END}>
-                            {rightBinding()}
-                        </box>
-                    }
-                />
-            </box>
-        </window>
-    );
-};
-
-export type WidgetMap = {
-    [K in string]: (monitor: number) => JSX.Element;
+    return barLayout.render();
 };
diff --git a/src/components/bar/layout/BarLayout.tsx b/src/components/bar/layout/BarLayout.tsx
new file mode 100644
index 0000000..814fe2e
--- /dev/null
+++ b/src/components/bar/layout/BarLayout.tsx
@@ -0,0 +1,185 @@
+import { App, Gtk } from 'astal/gtk3';
+import Astal from 'gi://Astal?version=3.0';
+import { bind, Binding, Variable } from 'astal';
+import { idleInhibit } from 'src/lib/window/visibility';
+import { WidgetRegistry } from './WidgetRegistry';
+import { getLayoutForMonitor, isLayoutEmpty } from '../utils/monitors';
+import options from 'src/configuration';
+
+/**
+ * Responsible for the bar UI layout and positioning
+ */
+export class BarLayout {
+    private _hyprlandMonitor: number;
+    private _gdkMonitor: number;
+    private _widgetRegistry: WidgetRegistry;
+
+    private _visibilityVar: Variable<boolean>;
+    private _classNameVar: Variable<string>;
+    private _anchorVar: Variable<Astal.WindowAnchor>;
+    private _layerVar: Variable<Astal.Layer>;
+    private _borderLocationVar: Binding<string>;
+    private _barSectionsVar: {
+        left: Variable<JSX.Element[]>;
+        middle: Variable<JSX.Element[]>;
+        right: Variable<JSX.Element[]>;
+    };
+
+    constructor(gdkMonitor: number, hyprlandMonitor: number, widgetRegistry: WidgetRegistry) {
+        this._gdkMonitor = gdkMonitor;
+        this._hyprlandMonitor = hyprlandMonitor;
+        this._widgetRegistry = widgetRegistry;
+
+        this._visibilityVar = Variable(true);
+        this._classNameVar = Variable('bar');
+        this._anchorVar = Variable(
+            Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT,
+        );
+        this._layerVar = Variable(Astal.Layer.TOP);
+        this._borderLocationVar = Variable('bar-panel')();
+        this._barSectionsVar = {
+            left: Variable([]),
+            middle: Variable([]),
+            right: Variable([]),
+        };
+
+        this._initializeReactiveVariables();
+    }
+
+    public render(): JSX.Element {
+        return (
+            <window
+                inhibit={bind(idleInhibit)}
+                name={`bar-${this._hyprlandMonitor}`}
+                namespace={`bar-${this._hyprlandMonitor}`}
+                className={this._classNameVar()}
+                application={App}
+                monitor={this._gdkMonitor}
+                visible={this._visibilityVar()}
+                anchor={this._anchorVar()}
+                layer={this._layerVar()}
+                exclusivity={Astal.Exclusivity.EXCLUSIVE}
+                onDestroy={() => this._cleanup()}
+            >
+                <box className="bar-panel-container">
+                    <centerbox
+                        css="padding: 1px;"
+                        hexpand
+                        className={this._borderLocationVar}
+                        startWidget={
+                            <box className="box-left" hexpand>
+                                {this._barSectionsVar.left()}
+                            </box>
+                        }
+                        centerWidget={
+                            <box className="box-center" halign={Gtk.Align.CENTER}>
+                                {this._barSectionsVar.middle()}
+                            </box>
+                        }
+                        endWidget={
+                            <box className="box-right" halign={Gtk.Align.END}>
+                                {this._barSectionsVar.right()}
+                            </box>
+                        }
+                    />
+                </box>
+            </window>
+        );
+    }
+
+    private _initializeReactiveVariables(): void {
+        this._initializeVisibilityVariables();
+        this._initializePositionVariables();
+        this._initializeAppearanceVariables();
+        this._initializeSectionVariables();
+    }
+
+    private _initializeVisibilityVariables(): void {
+        const { layouts } = options.bar;
+
+        this._visibilityVar = Variable.derive([bind(layouts)], (currentLayouts) => {
+            const foundLayout = getLayoutForMonitor(this._hyprlandMonitor, currentLayouts);
+            return !isLayoutEmpty(foundLayout);
+        });
+
+        this._classNameVar = Variable.derive([bind(layouts)], (currentLayouts) => {
+            const foundLayout = getLayoutForMonitor(this._hyprlandMonitor, currentLayouts);
+            return !isLayoutEmpty(foundLayout) ? 'bar' : '';
+        });
+    }
+
+    /**
+     * Initialize variables related to bar positioning
+     */
+    private _initializePositionVariables(): void {
+        const { location } = options.theme.bar;
+
+        this._anchorVar = Variable.derive([bind(location)], (loc) => {
+            if (loc === 'bottom') {
+                return Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT;
+            }
+            return Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT | Astal.WindowAnchor.RIGHT;
+        });
+    }
+
+    private _initializeAppearanceVariables(): void {
+        const { location: borderLocation } = options.theme.bar.border;
+
+        this._layerVar = this._createLayerVariable();
+
+        this._borderLocationVar = bind(borderLocation).as((brdrLcn) =>
+            brdrLcn !== 'none' ? 'bar-panel withBorder' : 'bar-panel',
+        );
+    }
+
+    private _createLayerVariable(): Variable<Astal.Layer> {
+        return Variable.derive([bind(options.theme.bar.layer), bind(options.tear)], (barLayer, tear) => {
+            if (tear && barLayer === 'overlay') {
+                return Astal.Layer.TOP;
+            }
+
+            return this._getLayerFromConfig(barLayer);
+        });
+    }
+
+    private _getLayerFromConfig(barLayer: string): Astal.Layer {
+        const layerMap: Record<string, Astal.Layer> = {
+            overlay: Astal.Layer.OVERLAY,
+            top: Astal.Layer.TOP,
+            bottom: Astal.Layer.BOTTOM,
+            background: Astal.Layer.BACKGROUND,
+        };
+
+        return layerMap[barLayer] ?? Astal.Layer.TOP;
+    }
+
+    private _initializeSectionVariables(): void {
+        this._barSectionsVar = {
+            left: this._createSectionBinding('left'),
+            middle: this._createSectionBinding('middle'),
+            right: this._createSectionBinding('right'),
+        };
+    }
+
+    private _createSectionBinding(section: 'left' | 'middle' | 'right'): Variable<JSX.Element[]> {
+        const { layouts } = options.bar;
+
+        return Variable.derive([bind(layouts)], (currentLayouts) => {
+            const foundLayout = getLayoutForMonitor(this._hyprlandMonitor, currentLayouts);
+            return foundLayout[section]
+                .filter((mod) => this._widgetRegistry.hasWidget(mod))
+                .map((widget) => this._widgetRegistry.createWidget(widget, this._hyprlandMonitor));
+        });
+    }
+
+    private _cleanup(): void {
+        this._visibilityVar.drop();
+        this._classNameVar.drop();
+        this._anchorVar.drop();
+        this._layerVar.drop();
+
+        this._barSectionsVar.left.drop();
+        this._barSectionsVar.middle.drop();
+        this._barSectionsVar.right.drop();
+    }
+}
diff --git a/src/components/bar/layout/WidgetRegistry.tsx b/src/components/bar/layout/WidgetRegistry.tsx
new file mode 100644
index 0000000..e21f6b5
--- /dev/null
+++ b/src/components/bar/layout/WidgetRegistry.tsx
@@ -0,0 +1,55 @@
+import { CustomModules } from '../customModules';
+
+export type WidgetFactory = (monitor: number) => JSX.Element;
+
+/**
+ * Manages registration and creation of widgets
+ */
+export class WidgetRegistry {
+    private _widgets: Record<string, WidgetFactory> = {};
+    private _initialized = false;
+
+    constructor(coreWidgets: Record<string, WidgetFactory>) {
+        this._widgets = { ...coreWidgets };
+    }
+
+    /**
+     * Initialize the registry with core and custom widgets
+     */
+    public async initialize(): Promise<void> {
+        if (this._initialized) return;
+
+        try {
+            const customWidgets = await CustomModules.build();
+
+            this._widgets = {
+                ...this._widgets,
+                ...customWidgets,
+            };
+
+            this._initialized = true;
+        } catch (error) {
+            console.error('Failed to initialize widget registry:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Check if a widget is registered
+     */
+    public hasWidget(name: string): boolean {
+        return Object.keys(this._widgets).includes(name);
+    }
+
+    /**
+     * Create an instance of a widget
+     */
+    public createWidget(name: string, monitor: number): JSX.Element {
+        if (!this.hasWidget(name)) {
+            console.error(`Widget "${name}" not found`);
+            return <box />;
+        }
+
+        return this._widgets[name](monitor);
+    }
+}
diff --git a/src/components/bar/layout/coreWidgets.tsx b/src/components/bar/layout/coreWidgets.tsx
new file mode 100644
index 0000000..f3be40e
--- /dev/null
+++ b/src/components/bar/layout/coreWidgets.tsx
@@ -0,0 +1,61 @@
+import { BatteryLabel } from '../modules/battery';
+import { Bluetooth } from '../modules/bluetooth';
+import { Cava } from '../modules/cava';
+import { Clock } from '../modules/clock';
+import { Cpu } from '../modules/cpu';
+import { CpuTemp } from '../modules/cputemp';
+import { Hypridle } from '../modules/hypridle';
+import { Hyprsunset } from '../modules/hyprsunset';
+import { KbInput } from '../modules/kblayout';
+import { Media } from '../modules/media';
+import { Menu } from '../modules/menu';
+import { Microphone } from '../modules/microphone';
+import { Netstat } from '../modules/netstat';
+import { Network } from '../modules/network';
+import { Notifications } from '../modules/notifications';
+import { Power } from '../modules/power';
+import { Ram } from '../modules/ram';
+import { ModuleSeparator } from '../modules/separator';
+import { Storage } from '../modules/storage';
+import { Submap } from '../modules/submap';
+import { SysTray } from '../modules/systray';
+import { Updates } from '../modules/updates';
+import { Volume } from '../modules/volume';
+import { Weather } from '../modules/weather';
+import { ClientTitle } from '../modules/window_title';
+import { Workspaces } from '../modules/workspaces';
+import { WorldClock } from '../modules/worldclock';
+import { WidgetContainer } from '../shared/widgetContainer';
+import { WidgetFactory } from './WidgetRegistry';
+
+export function getCoreWidgets(): Record<string, WidgetFactory> {
+    return {
+        battery: () => WidgetContainer(BatteryLabel()),
+        dashboard: () => WidgetContainer(Menu()),
+        workspaces: (monitor: number) => WidgetContainer(Workspaces(monitor)),
+        windowtitle: () => WidgetContainer(ClientTitle()),
+        media: () => WidgetContainer(Media()),
+        notifications: () => WidgetContainer(Notifications()),
+        volume: () => WidgetContainer(Volume()),
+        network: () => WidgetContainer(Network()),
+        bluetooth: () => WidgetContainer(Bluetooth()),
+        clock: () => WidgetContainer(Clock()),
+        systray: () => WidgetContainer(SysTray()),
+        microphone: () => WidgetContainer(Microphone()),
+        ram: () => WidgetContainer(Ram()),
+        cpu: () => WidgetContainer(Cpu()),
+        cputemp: () => WidgetContainer(CpuTemp()),
+        storage: () => WidgetContainer(Storage()),
+        netstat: () => WidgetContainer(Netstat()),
+        kbinput: () => WidgetContainer(KbInput()),
+        updates: () => WidgetContainer(Updates()),
+        submap: () => WidgetContainer(Submap()),
+        weather: () => WidgetContainer(Weather()),
+        power: () => WidgetContainer(Power()),
+        hyprsunset: () => WidgetContainer(Hyprsunset()),
+        hypridle: () => WidgetContainer(Hypridle()),
+        cava: () => WidgetContainer(Cava()),
+        worldclock: () => WidgetContainer(WorldClock()),
+        separator: () => ModuleSeparator(),
+    };
+}
diff --git a/src/components/bar/modules/battery/helpers/index.ts b/src/components/bar/modules/battery/helpers/index.ts
index a620cbf..900cccb 100644
--- a/src/components/bar/modules/battery/helpers/index.ts
+++ b/src/components/bar/modules/battery/helpers/index.ts
@@ -1,4 +1,4 @@
-import { BatteryIconKeys, BatteryIcons } from 'src/lib/types/battery.types';
+import { BatteryIcons, BatteryIconKeys } from './types';
 
 const batteryIcons: BatteryIcons = {
     0: '󰂎',
diff --git a/src/lib/types/battery.types.ts b/src/components/bar/modules/battery/helpers/types.ts
similarity index 100%
rename from src/lib/types/battery.types.ts
rename to src/components/bar/modules/battery/helpers/types.ts
diff --git a/src/components/bar/modules/battery/index.tsx b/src/components/bar/modules/battery/index.tsx
index 719d216..f61f7f5 100644
--- a/src/components/bar/modules/battery/index.tsx
+++ b/src/components/bar/modules/battery/index.tsx
@@ -1,15 +1,17 @@
 import AstalBattery from 'gi://AstalBattery?version=0.1';
 import { Astal } from 'astal/gtk3';
-import { openMenu } from '../../utils/menu';
-import options from 'src/options';
-import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
+import { openDropdownMenu } from '../../utils/menu';
 import Variable from 'astal/variable';
 import { bind } from 'astal';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers';
 import { getBatteryIcon } from './helpers';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import options from 'src/configuration';
+import { throttledScrollHandler } from '../../utils/input/throttle';
+import { runAsyncCommand } from '../../utils/input/commandExecutor';
 
 const batteryService = AstalBattery.get_default();
+
 const {
     label: show_label,
     rightClick,
@@ -136,7 +138,7 @@ const BatteryLabel = (): BarBoxChild => {
 
                         disconnectFunctions.push(
                             onPrimaryClick(self, (clicked, event) => {
-                                openMenu(clicked, event, 'energymenu');
+                                openDropdownMenu(clicked, event, 'energymenu');
                             }),
                         );
 
diff --git a/src/components/bar/modules/bluetooth/index.tsx b/src/components/bar/modules/bluetooth/index.tsx
index 7318ac5..0ef28af 100644
--- a/src/components/bar/modules/bluetooth/index.tsx
+++ b/src/components/bar/modules/bluetooth/index.tsx
@@ -1,11 +1,12 @@
-import options from 'src/options.js';
-import { openMenu } from '../../utils/menu.js';
-import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
 import { Variable, bind } from 'astal';
-import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
 import AstalBluetooth from 'gi://AstalBluetooth?version=0.1';
 import { Astal } from 'astal/gtk3';
-import { BarBoxChild } from 'src/lib/types/bar.types.js';
+import { BarBoxChild } from 'src/components/bar/types.js';
+import options from 'src/configuration';
+import { runAsyncCommand } from '../../utils/input/commandExecutor';
+import { throttledScrollHandler } from '../../utils/input/throttle';
+import { openDropdownMenu } from '../../utils/menu';
+import { onPrimaryClick, onSecondaryClick, onMiddleClick, onScroll } from 'src/lib/shared/eventHandlers';
 
 const bluetoothService = AstalBluetooth.get_default();
 
@@ -90,7 +91,7 @@ const Bluetooth = (): BarBoxChild => {
 
                         disconnectFunctions.push(
                             onPrimaryClick(self, (clicked, event) => {
-                                openMenu(clicked, event, 'bluetoothmenu');
+                                openDropdownMenu(clicked, event, 'bluetoothmenu');
                             }),
                         );
 
diff --git a/src/components/bar/modules/cava/helpers.ts b/src/components/bar/modules/cava/helpers.ts
index d79607e..d713647 100644
--- a/src/components/bar/modules/cava/helpers.ts
+++ b/src/components/bar/modules/cava/helpers.ts
@@ -1,9 +1,8 @@
 import { bind, Variable } from 'astal';
 import AstalCava from 'gi://AstalCava?version=0.1';
 import AstalMpris from 'gi://AstalMpris?version=0.1';
-import options from 'src/options';
+import options from 'src/configuration';
 
-const mprisService = AstalMpris.get_default();
 const {
     showActiveOnly,
     bars,
@@ -24,6 +23,7 @@ const {
  */
 export function initVisibilityTracker(isVis: Variable<boolean>): Variable<void> {
     const cavaService = AstalCava.get_default();
+    const mprisService = AstalMpris.get_default();
 
     return Variable.derive([bind(showActiveOnly), bind(mprisService, 'players')], (showActive, players) => {
         isVis.set(cavaService !== null && (!showActive || players?.length > 0));
diff --git a/src/components/bar/modules/cava/index.tsx b/src/components/bar/modules/cava/index.tsx
index 9ef0142..c614ff7 100644
--- a/src/components/bar/modules/cava/index.tsx
+++ b/src/components/bar/modules/cava/index.tsx
@@ -1,11 +1,13 @@
 import { Variable, bind } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { Module } from '../../shared/Module';
-import { inputHandler } from '../../utils/helpers';
-import options from 'src/options';
+import { Module } from '../../shared/module';
 import { initSettingsTracker, initVisibilityTracker } from './helpers';
 import AstalCava from 'gi://AstalCava?version=0.1';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import options from 'src/configuration';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+
+const inputHandler = InputHandlerService.getInstance();
 
 const {
     icon,
@@ -45,6 +47,8 @@ export const Cava = (): BarBoxChild => {
         );
     }
 
+    let inputHandlerBindings: Variable<void>;
+
     return Module({
         isVis: bind(isVis),
         label: labelBinding(),
@@ -53,7 +57,7 @@ export const Cava = (): BarBoxChild => {
         boxClass: 'cava',
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         cmd: leftClick,
                     },
@@ -72,9 +76,10 @@ export const Cava = (): BarBoxChild => {
                 });
             },
             onDestroy: () => {
+                inputHandlerBindings.drop();
+                settingsTracker?.drop();
                 labelBinding.drop();
                 visTracker.drop();
-                settingsTracker?.drop();
             },
         },
     });
diff --git a/src/components/bar/modules/clock/index.tsx b/src/components/bar/modules/clock/index.tsx
index 1b985a0..8cd6cf6 100644
--- a/src/components/bar/modules/clock/index.tsx
+++ b/src/components/bar/modules/clock/index.tsx
@@ -1,11 +1,12 @@
-import { openMenu } from '../../utils/menu';
-import options from 'src/options';
-import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
+import { openDropdownMenu } from '../../utils/menu';
 import { bind, Variable } from 'astal';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers';
 import { Astal } from 'astal/gtk3';
-import { systemTime } from 'src/shared/time';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { systemTime } from 'src/lib/units/time';
+import { BarBoxChild } from 'src/components/bar/types';
+import options from 'src/configuration';
+import { runAsyncCommand } from '../../utils/input/commandExecutor';
+import { throttledScrollHandler } from '../../utils/input/throttle';
 
 const { format, icon, showIcon, showTime, rightClick, middleClick, scrollUp, scrollDown } = options.bar.clock;
 const { style } = options.theme.bar.buttons;
@@ -83,7 +84,7 @@ const Clock = (): BarBoxChild => {
 
                         disconnectFunctions.push(
                             onPrimaryClick(self, (clicked, event) => {
-                                openMenu(clicked, event, 'calendarmenu');
+                                openDropdownMenu(clicked, event, 'calendarmenu');
                             }),
                         );
 
diff --git a/src/components/bar/modules/cpu/helpers/index.ts b/src/components/bar/modules/cpu/helpers/index.ts
deleted file mode 100644
index 6fbf669..0000000
--- a/src/components/bar/modules/cpu/helpers/index.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import GTop from 'gi://GTop';
-
-let previousCpuData = new GTop.glibtop_cpu();
-GTop.glibtop_get_cpu(previousCpuData);
-
-/**
- * Computes the CPU usage percentage.
- *
- * This function calculates the CPU usage percentage by comparing the current CPU data with the previous CPU data.
- * It calculates the differences in total and idle CPU times and uses these differences to compute the usage percentage.
- *
- * @returns The CPU usage percentage as a number.
- */
-export const computeCPU = (): number => {
-    const currentCpuData = new GTop.glibtop_cpu();
-    GTop.glibtop_get_cpu(currentCpuData);
-
-    const totalDiff = currentCpuData.total - previousCpuData.total;
-    const idleDiff = currentCpuData.idle - previousCpuData.idle;
-
-    const cpuUsagePercentage = totalDiff > 0 ? ((totalDiff - idleDiff) / totalDiff) * 100 : 0;
-
-    previousCpuData = currentCpuData;
-
-    return cpuUsagePercentage;
-};
diff --git a/src/components/bar/modules/cpu/index.tsx b/src/components/bar/modules/cpu/index.tsx
index e87a035..b111702 100644
--- a/src/components/bar/modules/cpu/index.tsx
+++ b/src/components/bar/modules/cpu/index.tsx
@@ -1,25 +1,29 @@
-import { Module } from '../../shared/Module';
-import options from 'src/options';
-import { inputHandler } from 'src/components/bar/utils/helpers';
-import { computeCPU } from './helpers';
-import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
+import { Module } from '../../shared/module';
 import { bind, Variable } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import options from 'src/configuration';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+import CpuUsageService from 'src/services/system/cpuUsage';
+
+const inputHandler = InputHandlerService.getInstance();
 
 const { label, round, leftClick, rightClick, middleClick, scrollUp, scrollDown, pollingInterval, icon } =
     options.bar.customModules.cpu;
 
-export const cpuUsage = Variable(0);
-
-const cpuPoller = new FunctionPoller<number, []>(cpuUsage, [bind(round)], bind(pollingInterval), computeCPU);
-
-cpuPoller.initialize('cpu');
+const cpuService = new CpuUsageService({ frequency: pollingInterval });
 
 export const Cpu = (): BarBoxChild => {
-    const labelBinding = Variable.derive([bind(cpuUsage), bind(round)], (cpuUsg: number, round: boolean) => {
-        return round ? `${Math.round(cpuUsg)}%` : `${cpuUsg.toFixed(2)}%`;
-    });
+    cpuService.initialize();
+
+    const labelBinding = Variable.derive(
+        [bind(cpuService.cpu), bind(round)],
+        (cpuUsg: number, round: boolean) => {
+            return round ? `${Math.round(cpuUsg)}%` : `${cpuUsg.toFixed(2)}%`;
+        },
+    );
+
+    let inputHandlerBindings: Variable<void>;
 
     const cpuModule = Module({
         textIcon: bind(icon),
@@ -29,7 +33,7 @@ export const Cpu = (): BarBoxChild => {
         showLabelBinding: bind(label),
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         cmd: leftClick,
                     },
@@ -48,7 +52,9 @@ export const Cpu = (): BarBoxChild => {
                 });
             },
             onDestroy: () => {
+                inputHandlerBindings.drop();
                 labelBinding.drop();
+                cpuService.destroy();
             },
         },
     });
diff --git a/src/components/bar/modules/cputemp/helpers/index.ts b/src/components/bar/modules/cputemp/helpers/index.ts
index 2f493b1..c4153f6 100644
--- a/src/components/bar/modules/cputemp/helpers/index.ts
+++ b/src/components/bar/modules/cputemp/helpers/index.ts
@@ -1,44 +1,108 @@
-import { Variable } from 'astal';
+import { bind, Binding } from 'astal';
+import CpuTempService from 'src/services/system/cputemp';
+import { TemperatureConverter } from 'src/lib/units/temperature';
+import { CpuTempSensorDiscovery } from 'src/services/system/cputemp/sensorDiscovery';
+import options from 'src/configuration';
 import GLib from 'gi://GLib?version=2.0';
-import { convertCelsiusToFahrenheit } from 'src/shared/weather';
-import options from 'src/options';
-import { UnitType } from 'src/lib/types/weather.types';
-const { sensor } = options.bar.customModules.cpuTemp;
+
+const { pollingInterval, sensor } = options.bar.customModules.cpuTemp;
 
 /**
- * Retrieves the current CPU temperature.
- *
- * This function reads the CPU temperature from the specified sensor file and converts it to the desired unit (Celsius or Fahrenheit).
- * It also handles rounding the temperature value based on the provided `round` variable.
- *
- * @param round A Variable<boolean> indicating whether to round the temperature value.
- * @param unit A Variable<UnitType> indicating the desired unit for the temperature (Celsius or Fahrenheit).
- *
- * @returns The current CPU temperature as a number. Returns 0 if an error occurs or the sensor file is empty.
+ * Creates a tooltip for the CPU temperature module showing sensor details
  */
-export const getCPUTemperature = (round: Variable<boolean>, unit: Variable<UnitType>): number => {
-    try {
-        if (sensor.get().length === 0) {
-            return 0;
+export function getCpuTempTooltip(cpuTempService: CpuTempService): Binding<string> {
+    return bind(cpuTempService.temperature).as((temp) => {
+        const currentPath = cpuTempService.currentSensorPath;
+        const configuredSensor = sensor.get();
+        const isAuto = configuredSensor === 'auto' || configuredSensor === '';
+
+        const tempC = TemperatureConverter.fromCelsius(temp).formatCelsius();
+        const tempF = TemperatureConverter.fromCelsius(temp).formatFahrenheit();
+
+        const lines = [
+            'CPU Temperature',
+            '─────────────────────────',
+            `Current: ${tempC} (${tempF})`,
+            '',
+            'Sensor Information',
+            '─────────────────────────',
+        ];
+
+        if (currentPath) {
+            const sensorType = getSensorType(currentPath);
+            const sensorName = getSensorName(currentPath);
+            const chipName = getChipName(currentPath);
+
+            lines.push(`Mode: ${isAuto ? 'Auto-discovered' : 'User-configured'}`, `Type: ${sensorType}`);
+
+            if (chipName) {
+                lines.push(`Chip: ${chipName}`);
+            }
+
+            lines.push(`Device: ${sensorName}`, `Path: ${currentPath}`);
+        } else {
+            lines.push('Status: No sensor found', 'Try setting a manual sensor path');
         }
 
-        const [success, tempInfoBytes] = GLib.file_get_contents(sensor.get());
-        const tempInfo = new TextDecoder('utf-8').decode(tempInfoBytes);
+        const interval = pollingInterval.get();
+        lines.push('', `Update interval: ${interval}ms`);
 
-        if (!success || tempInfoBytes === null) {
-            console.error(`Failed to read ${sensor.get()} or file content is null.`);
-            return 0;
+        const allSensors = CpuTempSensorDiscovery.getAllSensors();
+        if (allSensors.length > 1) {
+            lines.push('', `Available sensors: ${allSensors.length}`);
         }
 
-        let decimalTemp = parseInt(tempInfo, 10) / 1000;
+        return lines.join('\n');
+    });
+}
 
-        if (unit.get() === 'imperial') {
-            decimalTemp = convertCelsiusToFahrenheit(decimalTemp);
-        }
+/**
+ * Determines sensor type from path
+ */
+function getSensorType(path: string): string {
+    if (path.includes('/sys/class/hwmon/')) return 'Hardware Monitor';
+    if (path.includes('/sys/class/thermal/')) return 'Thermal Zone';
+    return 'Unknown';
+}
 
-        return round.get() ? Math.round(decimalTemp) : parseFloat(decimalTemp.toFixed(2));
-    } catch (error) {
-        console.error('Error calculating CPU Temp:', error);
-        return 0;
+/**
+ * Extracts sensor name from path
+ */
+function getSensorName(path: string): string {
+    if (path.includes('/sys/class/hwmon/')) {
+        const match = path.match(/hwmon(\d+)/);
+        return match ? `hwmon${match[1]}` : 'Unknown';
     }
-};
+
+    if (path.includes('/sys/class/thermal/')) {
+        const match = path.match(/thermal_zone(\d+)/);
+        return match ? `thermal_zone${match[1]}` : 'Unknown';
+    }
+
+    return 'Unknown';
+}
+
+/**
+ * Gets the actual chip name for hwmon sensors
+ */
+function getChipName(path: string): string | undefined {
+    if (!path.includes('/sys/class/hwmon/')) return undefined;
+
+    try {
+        const match = path.match(/\/sys\/class\/hwmon\/hwmon\d+/);
+        if (!match) return undefined;
+
+        const nameFile = `${match[0]}/name`;
+        const [success, bytes] = GLib.file_get_contents(nameFile);
+
+        if (success && bytes) {
+            return new TextDecoder('utf-8').decode(bytes).trim();
+        }
+    } catch (error) {
+        if (error instanceof Error) {
+            console.debug(`Failed to get chip name: ${error.message}`);
+        }
+    }
+
+    return undefined;
+}
diff --git a/src/components/bar/modules/cputemp/index.tsx b/src/components/bar/modules/cputemp/index.tsx
index d21eca6..805b5bc 100644
--- a/src/components/bar/modules/cputemp/index.tsx
+++ b/src/components/bar/modules/cputemp/index.tsx
@@ -1,12 +1,14 @@
-import options from 'src/options';
-import { Module } from '../../shared/Module';
-import { inputHandler } from 'src/components/bar/utils/helpers';
-import { getCPUTemperature } from './helpers';
-import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
+import { Module } from '../../shared/module';
 import { bind, Variable } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { UnitType } from 'src/lib/types/weather.types';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+import CpuTempService from 'src/services/system/cputemp';
+import options from 'src/configuration';
+import { TemperatureConverter } from 'src/lib/units/temperature';
+import { getCpuTempTooltip } from './helpers';
+
+const inputHandler = InputHandlerService.getInstance();
 
 const {
     label,
@@ -23,37 +25,51 @@ const {
     icon,
 } = options.bar.customModules.cpuTemp;
 
-export const cpuTemp = Variable(0);
-
-const cpuTempPoller = new FunctionPoller<number, [Variable<boolean>, Variable<UnitType>]>(
-    cpuTemp,
-    [bind(sensor), bind(round), bind(unit)],
-    bind(pollingInterval),
-    getCPUTemperature,
-    round,
-    unit,
-);
-
-cpuTempPoller.initialize('cputemp');
+const cpuTempService = new CpuTempService({ frequency: pollingInterval, sensor });
 
 export const CpuTemp = (): BarBoxChild => {
+    cpuTempService.initialize();
+
+    const bindings = Variable.derive([bind(sensor), bind(round), bind(unit)], (sensorName) => {
+        cpuTempService.refresh();
+
+        if (cpuTempService.sensor.get() !== sensorName) {
+            cpuTempService.updateSensor(sensorName);
+        }
+    });
+
     const labelBinding = Variable.derive(
-        [bind(cpuTemp), bind(unit), bind(showUnit), bind(round)],
-        (cpuTmp, tempUnit, shwUnit) => {
-            const unitLabel = tempUnit === 'imperial' ? 'F' : 'C';
-            const unit = shwUnit ? ` ${unitLabel}` : '';
-            return `${cpuTmp.toString()}°${unit}`;
+        [bind(cpuTempService.temperature), bind(unit), bind(showUnit), bind(round)],
+        (cpuTemp, tempUnit, showUnit, roundValue) => {
+            const tempConverter = TemperatureConverter.fromCelsius(cpuTemp);
+            const isImperial = tempUnit === 'imperial';
+            const precision = roundValue ? 0 : 2;
+
+            if (showUnit) {
+                return isImperial
+                    ? tempConverter.formatFahrenheit(precision)
+                    : tempConverter.formatCelsius(precision);
+            }
+
+            const temp = isImperial
+                ? tempConverter.toFahrenheit(precision)
+                : tempConverter.toCelsius(precision);
+
+            return temp.toString();
         },
     );
+
+    let inputHandlerBindings: Variable<void>;
+
     const cpuTempModule = Module({
         textIcon: bind(icon),
         label: labelBinding(),
-        tooltipText: 'CPU Temperature',
+        tooltipText: getCpuTempTooltip(cpuTempService),
         boxClass: 'cpu-temp',
         showLabelBinding: bind(label),
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         cmd: leftClick,
                     },
@@ -72,7 +88,10 @@ export const CpuTemp = (): BarBoxChild => {
                 });
             },
             onDestroy: () => {
+                inputHandlerBindings.drop();
+                cpuTempService.destroy();
                 labelBinding.drop();
+                bindings.drop();
             },
         },
     });
diff --git a/src/components/bar/modules/hypridle/index.tsx b/src/components/bar/modules/hypridle/index.tsx
index c226c1d..c01ea1d 100644
--- a/src/components/bar/modules/hypridle/index.tsx
+++ b/src/components/bar/modules/hypridle/index.tsx
@@ -1,11 +1,13 @@
-import options from 'src/options';
-import { Module } from '../../shared/Module';
-import { inputHandler } from '../../utils/helpers';
+import { Module } from '../../shared/module';
 import Variable from 'astal/variable';
 import { bind } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { idleInhibit } from 'src/shared/utilities';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { idleInhibit } from 'src/lib/window/visibility';
+import { BarBoxChild } from 'src/components/bar/types';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+import options from 'src/configuration';
+
+const inputHandler = InputHandlerService.getInstance();
 
 const { label, onIcon, offIcon, onLabel, offLabel, rightClick, middleClick, scrollUp, scrollDown } =
     options.bar.customModules.hypridle;
@@ -29,6 +31,8 @@ export const Hypridle = (): BarBoxChild => {
         },
     );
 
+    let inputHandlerBindings: Variable<void>;
+
     const hypridleModule = Module({
         textIcon: iconBinding(),
         tooltipText: bind(idleInhibit).as(
@@ -39,7 +43,7 @@ export const Hypridle = (): BarBoxChild => {
         showLabelBinding: bind(label),
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         fn: () => {
                             toggleInhibit();
@@ -60,6 +64,7 @@ export const Hypridle = (): BarBoxChild => {
                 });
             },
             onDestroy: () => {
+                inputHandlerBindings.drop();
                 iconBinding.drop();
                 labelBinding.drop();
             },
diff --git a/src/components/bar/modules/hyprsunset/helpers/index.ts b/src/components/bar/modules/hyprsunset/helpers/index.ts
index 11c25da..7992390 100644
--- a/src/components/bar/modules/hyprsunset/helpers/index.ts
+++ b/src/components/bar/modules/hyprsunset/helpers/index.ts
@@ -1,5 +1,5 @@
 import { execAsync, Variable } from 'astal';
-import options from 'src/options';
+import options from 'src/configuration';
 
 const { temperature } = options.bar.customModules.hyprsunset;
 
@@ -9,7 +9,7 @@ const { temperature } = options.bar.customModules.hyprsunset;
  * This command checks if the hyprsunset process is currently running by using the `pgrep` command.
  * It returns 'yes' if the process is found and 'no' otherwise.
  */
-export const isActiveCommand = "bash -c \"pgrep -x 'hyprsunset' > /dev/null && echo 'yes' || echo 'no'\"";
+const isActiveCommand = "bash -c \"pgrep -x 'hyprsunset' > /dev/null && echo 'yes' || echo 'no'\"";
 
 /**
  * A variable to track the active state of the hyprsunset process.
diff --git a/src/components/bar/modules/hyprsunset/index.tsx b/src/components/bar/modules/hyprsunset/index.tsx
index 293c51a..86f7865 100644
--- a/src/components/bar/modules/hyprsunset/index.tsx
+++ b/src/components/bar/modules/hyprsunset/index.tsx
@@ -1,11 +1,14 @@
-import options from 'src/options';
-import { Module } from '../../shared/Module';
-import { inputHandler, throttleInput } from 'src/components/bar/utils/helpers';
+import { Module } from '../../shared/module';
 import { checkSunsetStatus, isActive, toggleSunset } from './helpers';
 import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
 import { bind, Variable } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+import options from 'src/configuration';
+import { throttleInput } from '../../utils/input/throttle';
+
+const inputHandler = InputHandlerService.getInstance();
 
 const {
     label,
@@ -55,6 +58,8 @@ export const Hyprsunset = (): BarBoxChild => {
         },
     );
 
+    let inputHandlerBindings: Variable<void>;
+
     const hyprsunsetModule = Module({
         textIcon: iconBinding(),
         tooltipText: tooltipBinding(),
@@ -63,7 +68,7 @@ export const Hyprsunset = (): BarBoxChild => {
         showLabelBinding: bind(label),
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         fn: () => {
                             throttledToggleSunset();
@@ -84,6 +89,7 @@ export const Hyprsunset = (): BarBoxChild => {
                 });
             },
             onDestroy: () => {
+                inputHandlerBindings.drop();
                 iconBinding.drop();
                 tooltipBinding.drop();
                 labelBinding.drop();
diff --git a/src/components/bar/modules/kblayout/helpers/index.ts b/src/components/bar/modules/kblayout/helpers/index.ts
index 9965dd5..9d7538d 100644
--- a/src/components/bar/modules/kblayout/helpers/index.ts
+++ b/src/components/bar/modules/kblayout/helpers/index.ts
@@ -1,9 +1,5 @@
-import {
-    HyprctlDeviceLayout,
-    HyprctlKeyboard,
-    KbLabelType,
-} from 'src/lib/types/customModules/kbLayout.types.js';
 import { LayoutKeys, layoutMap, LayoutValues } from './layouts';
+import { KbLabelType, HyprctlDeviceLayout, HyprctlKeyboard } from './types';
 
 /**
  * Retrieves the keyboard layout from a given JSON string and format.
diff --git a/src/components/bar/modules/kblayout/helpers/layouts.ts b/src/components/bar/modules/kblayout/helpers/layouts.ts
index d280823..7f76165 100644
--- a/src/components/bar/modules/kblayout/helpers/layouts.ts
+++ b/src/components/bar/modules/kblayout/helpers/layouts.ts
@@ -1,4 +1,3 @@
-// Create a const object with all layouts
 const layoutMapObj = {
     'Abkhazian (Russia)': 'RU (Ab)',
     Akan: 'GH (Akan)',
diff --git a/src/lib/types/customModules/kbLayout.types.ts b/src/components/bar/modules/kblayout/helpers/types.ts
similarity index 94%
rename from src/lib/types/customModules/kbLayout.types.ts
rename to src/components/bar/modules/kblayout/helpers/types.ts
index 8ca7985..c653475 100644
--- a/src/lib/types/customModules/kbLayout.types.ts
+++ b/src/components/bar/modules/kblayout/helpers/types.ts
@@ -12,7 +12,7 @@ export type HyprctlKeyboard = {
     main: boolean;
 };
 
-export type HyprctlMouse = {
+type HyprctlMouse = {
     address: string;
     name: string;
     defaultSpeed: number;
diff --git a/src/components/bar/modules/kblayout/index.tsx b/src/components/bar/modules/kblayout/index.tsx
index 539a31c..ca4800f 100644
--- a/src/components/bar/modules/kblayout/index.tsx
+++ b/src/components/bar/modules/kblayout/index.tsx
@@ -1,12 +1,14 @@
-import options from 'src/options';
-import { Module } from '../../shared/Module';
-import { inputHandler } from 'src/components/bar/utils/helpers';
+import { Module } from '../../shared/module';
 import { getKeyboardLayout } from './helpers';
-import { bind } from 'astal';
+import { bind, Variable } from 'astal';
 import { useHook } from 'src/lib/shared/hookHandler';
 import { Astal } from 'astal/gtk3';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+import options from 'src/configuration';
+
+const inputHandler = InputHandlerService.getInstance();
 
 const hyprlandService = AstalHyprland.get_default();
 const { label, labelType, icon, leftClick, rightClick, middleClick, scrollUp, scrollDown } =
@@ -22,6 +24,8 @@ function setLabel(self: Astal.Label): void {
 }
 
 export const KbInput = (): BarBoxChild => {
+    let inputHandlerBindings: Variable<void>;
+
     const keyboardModule = Module({
         textIcon: bind(icon),
         tooltipText: '',
@@ -43,7 +47,7 @@ export const KbInput = (): BarBoxChild => {
         showLabelBinding: bind(label),
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         cmd: leftClick,
                     },
@@ -61,6 +65,9 @@ export const KbInput = (): BarBoxChild => {
                     },
                 });
             },
+            onDestroy: () => {
+                inputHandlerBindings.drop();
+            },
         },
     });
 
diff --git a/src/components/bar/modules/media/helpers/index.ts b/src/components/bar/modules/media/helpers/index.ts
index 4f41165..4525480 100644
--- a/src/components/bar/modules/media/helpers/index.ts
+++ b/src/components/bar/modules/media/helpers/index.ts
@@ -1,7 +1,7 @@
 import AstalMpris from 'gi://AstalMpris?version=0.1';
 import { Variable } from 'astal';
-import { MediaTags } from 'src/lib/types/audio.types';
 import { Opt } from 'src/lib/options';
+import { MediaTags } from './types';
 
 /**
  * Retrieves the icon for a given media player.
@@ -106,7 +106,10 @@ export const generateMediaLabel = (
             if (!isValidMediaTag(p1)) {
                 return '';
             }
-            const value = p1 !== undefined ? mediaTags[p1] : '';
+            let value = p1 !== undefined ? mediaTags[p1] : '';
+
+            value = value?.replace(/\r?\n/g, ' ') ?? '';
+
             const suffix = p2 !== undefined && p2.length > 0 ? p2.slice(1) : '';
             return value ? value + suffix : '';
         },
diff --git a/src/lib/types/audio.types.ts b/src/components/bar/modules/media/helpers/types.ts
similarity index 100%
rename from src/lib/types/audio.types.ts
rename to src/components/bar/modules/media/helpers/types.ts
diff --git a/src/components/bar/modules/media/index.tsx b/src/components/bar/modules/media/index.tsx
index 042ae51..61ec291 100644
--- a/src/components/bar/modules/media/index.tsx
+++ b/src/components/bar/modules/media/index.tsx
@@ -1,13 +1,14 @@
-import { openMenu } from '../../utils/menu.js';
-import options from 'src/options.js';
-import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
 import { generateMediaLabel } from './helpers/index.js';
-import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
+import { onPrimaryClick, onSecondaryClick, onMiddleClick, onScroll } from 'src/lib/shared/eventHandlers';
 import { bind, Variable } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { activePlayer, mediaAlbum, mediaArtist, mediaTitle } from 'src/shared/media.js';
 import AstalMpris from 'gi://AstalMpris?version=0.1';
-import { BarBoxChild } from 'src/lib/types/bar.types.js';
+import { BarBoxChild } from 'src/components/bar/types.js';
+import { activePlayer, mediaTitle, mediaAlbum, mediaArtist } from 'src/services/media';
+import options from 'src/configuration';
+import { runAsyncCommand } from '../../utils/input/commandExecutor';
+import { throttledScrollHandler } from '../../utils/input/throttle';
+import { openDropdownMenu } from '../../utils/menu';
 
 const mprisService = AstalMpris.get_default();
 const {
@@ -103,7 +104,7 @@ const Media = (): BarBoxChild => {
 
                         disconnectFunctions.push(
                             onPrimaryClick(self, (clicked, event) => {
-                                openMenu(clicked, event, 'mediamenu');
+                                openDropdownMenu(clicked, event, 'mediamenu');
                             }),
                         );
 
diff --git a/src/components/bar/modules/menu/index.tsx b/src/components/bar/modules/menu/index.tsx
index 85f7c9c..4781edb 100644
--- a/src/components/bar/modules/menu/index.tsx
+++ b/src/components/bar/modules/menu/index.tsx
@@ -1,18 +1,20 @@
-import { runAsyncCommand, throttledScrollHandler } from '../../utils/helpers.js';
-import options from '../../../../options.js';
-import { openMenu } from '../../utils/menu.js';
-import { getDistroIcon } from '../../../../lib/utils.js';
 import { Variable, bind } from 'astal';
-import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
+import { onPrimaryClick, onSecondaryClick, onMiddleClick, onScroll } from 'src/lib/shared/eventHandlers';
 import { Astal } from 'astal/gtk3';
-import { BarBoxChild } from 'src/lib/types/bar.types.js';
+import { BarBoxChild } from 'src/components/bar/types.js';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+import options from 'src/configuration';
+import { runAsyncCommand } from '../../utils/input/commandExecutor';
+import { throttledScrollHandler } from '../../utils/input/throttle';
+import { openDropdownMenu } from '../../utils/menu';
 
 const { rightClick, middleClick, scrollUp, scrollDown, autoDetectIcon, icon } = options.bar.launcher;
 
 const Menu = (): BarBoxChild => {
     const iconBinding = Variable.derive(
         [autoDetectIcon, icon],
-        (autoDetect: boolean, iconValue: string): string => (autoDetect ? getDistroIcon() : iconValue),
+        (autoDetect: boolean, iconValue: string): string =>
+            autoDetect ? SystemUtilities.getDistroIcon() : iconValue,
     );
 
     const componentClassName = bind(options.theme.bar.buttons.style).as((style: string) => {
@@ -60,7 +62,7 @@ const Menu = (): BarBoxChild => {
 
                         disconnectFunctions.push(
                             onPrimaryClick(self, (clicked, event) => {
-                                openMenu(clicked, event, 'dashboardmenu');
+                                openDropdownMenu(clicked, event, 'dashboardmenu');
                             }),
                         );
 
diff --git a/src/components/bar/modules/microphone/index.tsx b/src/components/bar/modules/microphone/index.tsx
index 6ac8dd6..64bd489 100644
--- a/src/components/bar/modules/microphone/index.tsx
+++ b/src/components/bar/modules/microphone/index.tsx
@@ -1,10 +1,12 @@
-import options from 'src/options';
-import { Module } from '../../shared/Module';
+import { Module } from '../../shared/module';
 import { bind, Variable } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { inputHandler } from '../../utils/helpers';
 import AstalWp from 'gi://AstalWp?version=0.1';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+import options from 'src/configuration';
+
+const inputHandler = InputHandlerService.getInstance();
 
 const wireplumber = AstalWp.get_default() as AstalWp.Wp;
 const audioService = wireplumber.audio;
@@ -43,6 +45,9 @@ export const Microphone = (): BarBoxChild => {
             return `${icon} ${description}`;
         },
     );
+
+    let inputHandlerBindings: Variable<void>;
+
     const microphoneModule = Module({
         textIcon: iconBinding(),
         label: bind(audioService.defaultMicrophone, 'volume').as((vol) => `${Math.round(vol * 100)}%`),
@@ -51,7 +56,7 @@ export const Microphone = (): BarBoxChild => {
         showLabelBinding: bind(label),
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         cmd: leftClick,
                     },
@@ -69,6 +74,9 @@ export const Microphone = (): BarBoxChild => {
                     },
                 });
             },
+            onDestroy: () => {
+                inputHandlerBindings.drop();
+            },
         },
     });
 
diff --git a/src/components/bar/modules/netstat/helpers.ts b/src/components/bar/modules/netstat/helpers.ts
new file mode 100644
index 0000000..b390f6d
--- /dev/null
+++ b/src/components/bar/modules/netstat/helpers.ts
@@ -0,0 +1,34 @@
+import NetworkUsageService from 'src/services/system/networkUsage';
+import { bind, Variable } from 'astal';
+import options from 'src/configuration';
+
+const { networkInterface, rateUnit, round, pollingInterval } = options.bar.customModules.netstat;
+
+export const setupNetworkServiceBindings = (): void => {
+    const networkService = new NetworkUsageService();
+
+    Variable.derive([bind(pollingInterval)], (interval) => {
+        networkService.updateTimer(interval);
+    })();
+
+    Variable.derive([bind(networkInterface)], (interfaceName) => {
+        networkService.setInterface(interfaceName);
+    })();
+
+    Variable.derive([bind(rateUnit)], (unit) => {
+        networkService.setRateUnit(unit);
+    })();
+
+    Variable.derive([bind(round)], (shouldRound) => {
+        networkService.setShouldRound(shouldRound);
+    })();
+};
+
+export const cycleArray = <T>(array: T[], current: T, direction: 'next' | 'prev'): T => {
+    const currentIndex = array.indexOf(current);
+    const nextIndex =
+        direction === 'next'
+            ? (currentIndex + 1) % array.length
+            : (currentIndex - 1 + array.length) % array.length;
+    return array[nextIndex];
+};
diff --git a/src/components/bar/modules/netstat/helpers/index.ts b/src/components/bar/modules/netstat/helpers/index.ts
deleted file mode 100644
index 1c397bf..0000000
--- a/src/components/bar/modules/netstat/helpers/index.ts
+++ /dev/null
@@ -1,168 +0,0 @@
-import GLib from 'gi://GLib';
-import { Variable } from 'astal';
-import { RateUnit } from 'src/lib/types/bar.types';
-import { NetworkResourceData } from 'src/lib/types/customModules/network.types';
-import { getDefaultNetstatData } from 'src/lib/types/defaults/netstat.types';
-
-let previousNetUsage = { rx: 0, tx: 0, time: 0 };
-
-interface NetworkUsage {
-    name: string;
-    rx: number;
-    tx: number;
-}
-
-/**
- * Formats the network rate based on the provided rate, type, and rounding option.
- *
- * This function converts the network rate to the appropriate unit (KiB/s, MiB/s, GiB/s, or bytes/s) based on the provided type.
- * It also rounds the rate to the specified number of decimal places.
- *
- * @param rate The network rate to format.
- * @param type The unit type for the rate (KiB, MiB, GiB).
- * @param round A boolean indicating whether to round the rate.
- *
- * @returns The formatted network rate as a string.
- */
-const formatRate = (rate: number, type: string, round: boolean): string => {
-    const fixed = round ? 0 : 2;
-
-    switch (true) {
-        case type === 'KiB':
-            return `${(rate / 1e3).toFixed(fixed)} KiB/s`;
-        case type === 'MiB':
-            return `${(rate / 1e6).toFixed(fixed)} MiB/s`;
-        case type === 'GiB':
-            return `${(rate / 1e9).toFixed(fixed)} GiB/s`;
-        case rate >= 1e9:
-            return `${(rate / 1e9).toFixed(fixed)} GiB/s`;
-        case rate >= 1e6:
-            return `${(rate / 1e6).toFixed(fixed)} MiB/s`;
-        case rate >= 1e3:
-            return `${(rate / 1e3).toFixed(fixed)} KiB/s`;
-        default:
-            return `${rate.toFixed(fixed)} bytes/s`;
-    }
-};
-
-/**
- * Parses a line of network interface data.
- *
- * This function parses a line of network interface data from the /proc/net/dev file.
- * It extracts the interface name, received bytes, and transmitted bytes.
- *
- * @param line The line of network interface data to parse.
- *
- * @returns An object containing the interface name, received bytes, and transmitted bytes, or null if the line is invalid.
- */
-const parseInterfaceData = (line: string): NetworkUsage | null => {
-    const trimmedLine = line.trim();
-    if (!trimmedLine || trimmedLine.startsWith('Inter-') || trimmedLine.startsWith('face')) {
-        return null;
-    }
-
-    const [iface, rx, , , , , , , , tx] = trimmedLine.split(/\s+/);
-    const rxValue = parseInt(rx, 10);
-    const txValue = parseInt(tx, 10);
-    const cleanedIface = iface.replace(':', '');
-
-    return { name: cleanedIface, rx: rxValue, tx: txValue };
-};
-
-/**
- * Validates a network interface.
- *
- * This function checks if the provided network interface is valid based on the interface name and received/transmitted bytes.
- *
- * @param iface The network interface to validate.
- * @param interfaceName The name of the interface to check.
- *
- * @returns True if the interface is valid, false otherwise.
- */
-const isValidInterface = (iface: NetworkUsage | null, interfaceName: string): boolean => {
-    if (!iface) return false;
-    if (interfaceName) return iface.name === interfaceName;
-    return iface.name !== 'lo' && iface.rx > 0 && iface.tx > 0;
-};
-
-/**
- * Retrieves the network usage for a specified interface.
- *
- * This function reads the /proc/net/dev file to get the network usage data for the specified interface.
- * If no interface name is provided, it returns the usage data for the first valid interface found.
- *
- * @param interfaceName The name of the interface to get the usage data for. Defaults to an empty string.
- *
- * @returns An object containing the interface name, received bytes, and transmitted bytes.
- */
-const getNetworkUsage = (interfaceName: string = ''): NetworkUsage => {
-    const [success, data] = GLib.file_get_contents('/proc/net/dev');
-    const defaultStats = { name: '', rx: 0, tx: 0 };
-
-    if (!success) {
-        console.error('Failed to read /proc/net/dev');
-        return defaultStats;
-    }
-
-    const lines = new TextDecoder('utf-8').decode(data).split('\n');
-
-    for (const line of lines) {
-        const iface = parseInterfaceData(line);
-
-        if (isValidInterface(iface, interfaceName)) {
-            return iface ?? defaultStats;
-        }
-    }
-
-    return { name: '', rx: 0, tx: 0 };
-};
-
-/**
- * Computes the network usage data.
- *
- * This function calculates the network usage data based on the provided rounding option, interface name, and data type.
- * It returns an object containing the formatted received and transmitted rates.
- *
- * @param round A Variable<boolean> indicating whether to round the rates.
- * @param interfaceNameVar A Variable<string> containing the name of the interface to get the usage data for.
- * @param dataType A Variable<RateUnit> containing the unit type for the rates.
- *
- * @returns An object containing the formatted received and transmitted rates.
- */
-export const computeNetwork = (
-    round: Variable<boolean>,
-    interfaceNameVar: Variable<string>,
-    dataType: Variable<RateUnit>,
-): NetworkResourceData => {
-    const rateUnit = dataType.get();
-    const interfaceName = interfaceNameVar.get();
-
-    const DEFAULT_NETSTAT_DATA = getDefaultNetstatData(rateUnit);
-    try {
-        const { rx, tx, name } = getNetworkUsage(interfaceName);
-        const currentTime = Date.now();
-
-        if (!name) {
-            return DEFAULT_NETSTAT_DATA;
-        }
-
-        if (previousNetUsage.time === 0) {
-            previousNetUsage = { rx, tx, time: currentTime };
-            return DEFAULT_NETSTAT_DATA;
-        }
-
-        const timeDiff = Math.max((currentTime - previousNetUsage.time) / 1000, 1);
-        const rxRate = (rx - previousNetUsage.rx) / timeDiff;
-        const txRate = (tx - previousNetUsage.tx) / timeDiff;
-
-        previousNetUsage = { rx, tx, time: currentTime };
-
-        return {
-            in: formatRate(rxRate, rateUnit, round.get()),
-            out: formatRate(txRate, rateUnit, round.get()),
-        };
-    } catch (error) {
-        console.error('Error calculating network usage:', error);
-        return DEFAULT_NETSTAT_DATA;
-    }
-};
diff --git a/src/components/bar/modules/netstat/index.tsx b/src/components/bar/modules/netstat/index.tsx
index fe9f2d4..7f93f91 100644
--- a/src/components/bar/modules/netstat/index.tsx
+++ b/src/components/bar/modules/netstat/index.tsx
@@ -1,91 +1,87 @@
-import options from 'src/options';
-import { Module } from '../../shared/Module';
-import { inputHandler } from 'src/components/bar/utils/helpers';
-import { computeNetwork } from './helpers';
-import { NETWORK_LABEL_TYPES } from 'src/lib/types/defaults/bar.types';
-import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
+import { Module } from '../../shared/module';
+import NetworkUsageService from 'src/services/system/networkUsage';
 import { bind, Variable } from 'astal';
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
 import { Astal } from 'astal/gtk3';
-import { RateUnit, BarBoxChild, NetstatLabelType } from 'src/lib/types/bar.types';
-import { NetworkResourceData } from 'src/lib/types/customModules/network.types';
-import { getDefaultNetstatData } from 'src/lib/types/defaults/netstat.types';
+import { BarBoxChild } from '../../types';
+import { NetstatLabelType } from 'src/services/system/types';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+import options from 'src/configuration';
+import { cycleArray, setupNetworkServiceBindings } from './helpers';
+
+const inputHandler = InputHandlerService.getInstance();
+const astalNetworkService = AstalNetwork.get_default();
+
+const NETWORK_LABEL_TYPES: NetstatLabelType[] = ['full', 'in', 'out'];
 
-const networkService = AstalNetwork.get_default();
 const {
     label,
     labelType,
-    networkInterface,
-    rateUnit,
     dynamicIcon,
     icon,
     networkInLabel,
     networkOutLabel,
-    round,
     leftClick,
     rightClick,
     middleClick,
     pollingInterval,
 } = options.bar.customModules.netstat;
 
-export const networkUsage = Variable<NetworkResourceData>(getDefaultNetstatData(rateUnit.get()));
+setupNetworkServiceBindings();
 
-const netstatPoller = new FunctionPoller<
-    NetworkResourceData,
-    [round: Variable<boolean>, interfaceNameVar: Variable<string>, dataType: Variable<RateUnit>]
->(
-    networkUsage,
-    [bind(rateUnit), bind(networkInterface), bind(round)],
-    bind(pollingInterval),
-    computeNetwork,
-    round,
-    networkInterface,
-    rateUnit,
-);
-
-netstatPoller.initialize('netstat');
+const networkService = new NetworkUsageService({ frequency: pollingInterval });
 
 export const Netstat = (): BarBoxChild => {
-    const renderNetworkLabel = (lblType: NetstatLabelType, networkService: NetworkResourceData): string => {
+    networkService.initialize();
+
+    const renderNetworkLabel = (
+        lblType: NetstatLabelType,
+        networkData: { in: string; out: string },
+    ): string => {
         switch (lblType) {
             case 'in':
-                return `${networkInLabel.get()} ${networkService.in}`;
+                return `${networkInLabel.get()} ${networkData.in}`;
             case 'out':
-                return `${networkOutLabel.get()} ${networkService.out}`;
+                return `${networkOutLabel.get()} ${networkData.out}`;
             default:
-                return `${networkInLabel.get()} ${networkService.in} ${networkOutLabel.get()} ${networkService.out}`;
+                return `${networkInLabel.get()} ${networkData.in} ${networkOutLabel.get()} ${networkData.out}`;
         }
     };
 
     const iconBinding = Variable.derive(
-        [bind(networkService, 'primary'), bind(networkService, 'wifi'), bind(networkService, 'wired')],
-        (pmry, wfi, wrd) => {
-            if (pmry === AstalNetwork.Primary.WIRED) {
-                return wrd?.icon_name;
+        [
+            bind(astalNetworkService, 'primary'),
+            bind(astalNetworkService, 'wifi'),
+            bind(astalNetworkService, 'wired'),
+        ],
+        (primary, wifi, wired) => {
+            if (primary === AstalNetwork.Primary.WIRED) {
+                return wired?.icon_name;
             }
-            return wfi?.icon_name;
+            return wifi?.icon_name;
         },
     );
 
     const labelBinding = Variable.derive(
-        [bind(networkUsage), bind(labelType)],
-        (networkService: NetworkResourceData, lblTyp: NetstatLabelType) =>
-            renderNetworkLabel(lblTyp, networkService),
+        [bind(networkService.network), bind(labelType)],
+        (networkData, lblType: NetstatLabelType) => renderNetworkLabel(lblType, networkData),
     );
 
+    let inputHandlerBindings: Variable<void>;
+
     const netstatModule = Module({
         useTextIcon: bind(dynamicIcon).as((useDynamicIcon) => !useDynamicIcon),
         icon: iconBinding(),
         textIcon: bind(icon),
         label: labelBinding(),
-        tooltipText: bind(labelType).as((lblTyp) => {
-            return lblTyp === 'full' ? 'Ingress / Egress' : lblTyp === 'in' ? 'Ingress' : 'Egress';
+        tooltipText: bind(labelType).as((lblType) => {
+            return lblType === 'full' ? 'Ingress / Egress' : lblType === 'in' ? 'Ingress' : 'Egress';
         }),
         boxClass: 'netstat',
         showLabelBinding: bind(label),
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         cmd: leftClick,
                     },
@@ -97,31 +93,23 @@ export const Netstat = (): BarBoxChild => {
                     },
                     onScrollUp: {
                         fn: () => {
-                            labelType.set(
-                                NETWORK_LABEL_TYPES[
-                                    (NETWORK_LABEL_TYPES.indexOf(labelType.get()) + 1) %
-                                        NETWORK_LABEL_TYPES.length
-                                ] as NetstatLabelType,
-                            );
+                            const nextLabelType = cycleArray(NETWORK_LABEL_TYPES, labelType.get(), 'next');
+                            labelType.set(nextLabelType);
                         },
                     },
                     onScrollDown: {
                         fn: () => {
-                            labelType.set(
-                                NETWORK_LABEL_TYPES[
-                                    (NETWORK_LABEL_TYPES.indexOf(labelType.get()) -
-                                        1 +
-                                        NETWORK_LABEL_TYPES.length) %
-                                        NETWORK_LABEL_TYPES.length
-                                ] as NetstatLabelType,
-                            );
+                            const prevLabelType = cycleArray(NETWORK_LABEL_TYPES, labelType.get(), 'prev');
+                            labelType.set(prevLabelType);
                         },
                     },
                 });
             },
             onDestroy: () => {
+                inputHandlerBindings.drop();
                 labelBinding.drop();
                 iconBinding.drop();
+                networkService.destroy();
             },
         },
     });
diff --git a/src/components/bar/modules/network/index.tsx b/src/components/bar/modules/network/index.tsx
index 0ebd44d..3cc14ec 100644
--- a/src/components/bar/modules/network/index.tsx
+++ b/src/components/bar/modules/network/index.tsx
@@ -1,12 +1,13 @@
-import options from 'src/options';
-import { openMenu } from '../../utils/menu';
-import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
+import { openDropdownMenu } from '../../utils/menu';
 import { bind, Variable } from 'astal';
 import { onPrimaryClick, onSecondaryClick, onMiddleClick, onScroll } from 'src/lib/shared/eventHandlers';
 import { Astal, Gtk } from 'astal/gtk3';
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
 import { formatWifiInfo, wiredIcon, wirelessIcon } from './helpers';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import options from 'src/configuration';
+import { runAsyncCommand } from '../../utils/input/commandExecutor';
+import { throttledScrollHandler } from '../../utils/input/throttle';
 
 const networkService = AstalNetwork.get_default();
 const { label, truncation, truncation_size, rightClick, middleClick, scrollDown, scrollUp, showWifiInfo } =
@@ -46,10 +47,7 @@ const Network = (): BarBoxChild => {
                 );
             }
             const networkWifi = networkService.wifi;
-            if (networkWifi != null) {
-                // Astal doesn't reset the wifi attributes on disconnect, only on a valid connection
-                // so we need to check if both the WiFi is enabled and if there is an active access
-                // point
+            if (networkWifi !== null) {
                 if (!networkWifi.enabled) {
                     return <label className={'bar-button-label network-label'} label="Off" />;
                 }
@@ -127,7 +125,7 @@ const Network = (): BarBoxChild => {
 
                         disconnectFunctions.push(
                             onPrimaryClick(self, (clicked, event) => {
-                                openMenu(clicked, event, 'networkmenu');
+                                openDropdownMenu(clicked, event, 'networkmenu');
                             }),
                         );
 
diff --git a/src/components/bar/modules/notifications/index.tsx b/src/components/bar/modules/notifications/index.tsx
index f928235..922117c 100644
--- a/src/components/bar/modules/notifications/index.tsx
+++ b/src/components/bar/modules/notifications/index.tsx
@@ -1,12 +1,13 @@
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
 import { Astal, Gtk } from 'astal/gtk3';
-import { openMenu } from '../../utils/menu';
-import options from 'src/options';
-import { filterNotifications } from 'src/lib/shared/notifications.js';
-import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
+import { openDropdownMenu } from '../../utils/menu';
 import { bind, Variable } from 'astal';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import options from 'src/configuration';
+import { runAsyncCommand } from '../../utils/input/commandExecutor';
+import { throttledScrollHandler } from '../../utils/input/throttle';
+import { filterNotifications } from 'src/lib/shared/notifications';
 
 const notifdService = AstalNotifd.get_default();
 const { show_total, rightClick, middleClick, scrollUp, scrollDown, hideCountWhenZero } =
@@ -107,7 +108,7 @@ export const Notifications = (): BarBoxChild => {
 
                         disconnectFunctions.push(
                             onPrimaryClick(self, (clicked, event) => {
-                                openMenu(clicked, event, 'notificationsmenu');
+                                openDropdownMenu(clicked, event, 'notificationsmenu');
                             }),
                         );
 
diff --git a/src/components/bar/modules/power/index.tsx b/src/components/bar/modules/power/index.tsx
index ea09ed4..a7158f3 100644
--- a/src/components/bar/modules/power/index.tsx
+++ b/src/components/bar/modules/power/index.tsx
@@ -1,13 +1,17 @@
-import options from 'src/options';
-import { Module } from '../../shared/Module';
-import { inputHandler } from 'src/components/bar/utils/helpers';
+import { Module } from '../../shared/module';
 import { bind, Variable } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+import options from 'src/configuration';
+
+const inputHandler = InputHandlerService.getInstance();
 
 const { icon, leftClick, rightClick, middleClick, scrollUp, scrollDown } = options.bar.customModules.power;
 
 export const Power = (): BarBoxChild => {
+    let inputHandlerBindings: Variable<void>;
+
     const powerModule = Module({
         tooltipText: 'Power Menu',
         textIcon: bind(icon),
@@ -15,7 +19,7 @@ export const Power = (): BarBoxChild => {
         boxClass: 'powermodule',
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         cmd: leftClick,
                     },
@@ -33,6 +37,9 @@ export const Power = (): BarBoxChild => {
                     },
                 });
             },
+            onDestroy: () => {
+                inputHandlerBindings.drop();
+            },
         },
     });
 
diff --git a/src/components/bar/modules/ram/helpers/index.ts b/src/components/bar/modules/ram/helpers/index.ts
deleted file mode 100644
index e334bce..0000000
--- a/src/components/bar/modules/ram/helpers/index.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { divide } from 'src/components/bar/utils/helpers';
-import { GLib, Variable } from 'astal';
-import { GenericResourceData } from 'src/lib/types/customModules/generic.types';
-
-/**
- * Calculates the RAM usage.
- *
- * This function reads the memory information from the /proc/meminfo file and calculates the total, used, and available RAM.
- * It returns an object containing these values along with the percentage of used RAM.
- *
- * @param round A Variable<boolean> indicating whether to round the percentage value.
- *
- * @returns An object containing the total, used, free RAM in bytes, and the percentage of used RAM.
- */
-export const calculateRamUsage = (round: Variable<boolean>): GenericResourceData => {
-    try {
-        const [success, meminfoBytes] = GLib.file_get_contents('/proc/meminfo');
-
-        if (!success || meminfoBytes === null) {
-            throw new Error('Failed to read /proc/meminfo or file content is null.');
-        }
-
-        const meminfo = new TextDecoder('utf-8').decode(meminfoBytes);
-
-        const totalMatch = meminfo.match(/MemTotal:\s+(\d+)/);
-        const availableMatch = meminfo.match(/MemAvailable:\s+(\d+)/);
-
-        if (!totalMatch || !availableMatch) {
-            throw new Error('Failed to parse /proc/meminfo for memory values.');
-        }
-
-        const totalRamInBytes = parseInt(totalMatch[1], 10) * 1024;
-        const availableRamInBytes = parseInt(availableMatch[1], 10) * 1024;
-
-        let usedRam = totalRamInBytes - availableRamInBytes;
-        usedRam = isNaN(usedRam) || usedRam < 0 ? 0 : usedRam;
-
-        return {
-            percentage: divide([totalRamInBytes, usedRam], round.get()),
-            total: totalRamInBytes,
-            used: usedRam,
-            free: availableRamInBytes,
-        };
-    } catch (error) {
-        console.error('Error calculating RAM usage:', error);
-        return { total: 0, used: 0, percentage: 0, free: 0 };
-    }
-};
diff --git a/src/components/bar/modules/ram/index.tsx b/src/components/bar/modules/ram/index.tsx
index ba1b03d..5a4da22 100644
--- a/src/components/bar/modules/ram/index.tsx
+++ b/src/components/bar/modules/ram/index.tsx
@@ -1,33 +1,25 @@
-import options from 'src/options';
-import { Module } from '../../shared/Module';
-import { calculateRamUsage } from './helpers';
-import { formatTooltip, inputHandler, renderResourceLabel } from 'src/components/bar/utils/helpers';
-import { LABEL_TYPES } from 'src/lib/types/defaults/bar.types';
-import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
+import { Module } from '../../shared/module';
 import { bind, Variable } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { BarBoxChild, ResourceLabelType } from 'src/lib/types/bar.types';
-import { GenericResourceData } from 'src/lib/types/customModules/generic.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import options from 'src/configuration';
+import { renderResourceLabel, formatTooltip } from '../../utils/systemResource';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+import { GenericResourceData, ResourceLabelType, LABEL_TYPES } from 'src/services/system/types';
+import RamUsageService from 'src/services/system/ramUsage';
+
+const inputHandler = InputHandlerService.getInstance();
 
 const { label, labelType, round, leftClick, rightClick, middleClick, pollingInterval, icon } =
     options.bar.customModules.ram;
 
-const defaultRamData: GenericResourceData = { total: 0, used: 0, percentage: 0, free: 0 };
-const ramUsage = Variable<GenericResourceData>(defaultRamData);
-
-const ramPoller = new FunctionPoller<GenericResourceData, [Variable<boolean>]>(
-    ramUsage,
-    [bind(round)],
-    bind(pollingInterval),
-    calculateRamUsage,
-    round,
-);
-
-ramPoller.initialize('ram');
+const ramService = new RamUsageService({ frequency: pollingInterval });
 
 export const Ram = (): BarBoxChild => {
+    ramService.initialize();
+
     const labelBinding = Variable.derive(
-        [bind(ramUsage), bind(labelType), bind(round)],
+        [bind(ramService.ram), bind(labelType), bind(round)],
         (rmUsg: GenericResourceData, lblTyp: ResourceLabelType, round: boolean) => {
             const returnValue = renderResourceLabel(lblTyp, rmUsg, round);
 
@@ -35,6 +27,8 @@ export const Ram = (): BarBoxChild => {
         },
     );
 
+    let inputHandlerBindings: Variable<void>;
+
     const ramModule = Module({
         textIcon: bind(icon),
         label: labelBinding(),
@@ -45,7 +39,7 @@ export const Ram = (): BarBoxChild => {
         showLabelBinding: bind(label),
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         cmd: leftClick,
                     },
@@ -77,7 +71,9 @@ export const Ram = (): BarBoxChild => {
                 });
             },
             onDestroy: () => {
+                inputHandlerBindings.drop();
                 labelBinding.drop();
+                ramService.destroy();
             },
         },
     });
diff --git a/src/components/bar/modules/storage/helpers/index.ts b/src/components/bar/modules/storage/helpers/index.ts
deleted file mode 100644
index fb40f04..0000000
--- a/src/components/bar/modules/storage/helpers/index.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import GTop from 'gi://GTop';
-
-import { divide } from 'src/components/bar/utils/helpers';
-import { Variable } from 'astal';
-import { GenericResourceData } from 'src/lib/types/customModules/generic.types';
-
-/**
- * Computes the storage usage for the root filesystem.
- *
- * This function calculates the total, used, and available storage for the root filesystem.
- * It returns an object containing these values along with the percentage of used storage.
- *
- * @param round A Variable<boolean> indicating whether to round the percentage value.
- *
- * @returns An object containing the total, used, free storage in bytes, and the percentage of used storage.
- *
- * FIX: Consolidate with Storage service class
- */
-export const computeStorage = (round: Variable<boolean>): GenericResourceData => {
-    try {
-        const currentFsUsage = new GTop.glibtop_fsusage();
-
-        GTop.glibtop_get_fsusage(currentFsUsage, '/');
-
-        const total = currentFsUsage.blocks * currentFsUsage.block_size;
-        const available = currentFsUsage.bavail * currentFsUsage.block_size;
-        const used = total - available;
-
-        return {
-            total,
-            used,
-            free: available,
-            percentage: divide([total, used], round.get()),
-        };
-    } catch (error) {
-        console.error('Error calculating RAM usage:', error);
-        return { total: 0, used: 0, percentage: 0, free: 0 };
-    }
-};
diff --git a/src/components/bar/modules/storage/helpers/tooltipFormatters.ts b/src/components/bar/modules/storage/helpers/tooltipFormatters.ts
new file mode 100644
index 0000000..6eb19cf
--- /dev/null
+++ b/src/components/bar/modules/storage/helpers/tooltipFormatters.ts
@@ -0,0 +1,90 @@
+import { DriveStorageData } from 'src/services/system/storage/types';
+import StorageService from 'src/services/system/storage';
+import { renderResourceLabel } from 'src/components/bar/utils/systemResource';
+import { SizeUnit } from 'src/lib/units/size/types';
+
+export type TooltipStyle = 'percentage-bar' | 'tree' | 'simple';
+
+/**
+ * Formats storage tooltip information based on the selected style
+ * @param paths - Array of mount paths to display
+ * @param storageService - The storage service instance
+ * @param style - The tooltip formatting style
+ * @param lblTyp - The label type for resource display
+ * @param round - Whether to round values
+ * @param sizeUnits - The size unit to use
+ */
+export function formatStorageTooltip(
+    paths: string[],
+    storageService: StorageService,
+    style: TooltipStyle,
+    round: boolean,
+    sizeUnits?: SizeUnit,
+): string {
+    const driveData = paths
+        .map((path) => storageService.getDriveInfo(path))
+        .filter((usage): usage is DriveStorageData => usage !== undefined);
+
+    switch (style) {
+        case 'percentage-bar':
+            return formatPercentageBarStyle(driveData, round, sizeUnits);
+        case 'tree':
+            return formatTreeStyle(driveData, round, sizeUnits);
+        case 'simple':
+        default:
+            return formatSimpleStyle(driveData, round, sizeUnits);
+    }
+}
+
+/**
+ * Creates a visual percentage bar using Unicode characters
+ * @param percentage - The percentage value (0-100)
+ */
+function generatePercentBar(percentage: number): string {
+    const filledBlocks = Math.round(percentage / 10);
+    const emptyBlocks = 10 - filledBlocks;
+    return '▰'.repeat(filledBlocks) + '▱'.repeat(emptyBlocks);
+}
+
+/**
+ * Formats tooltip with visual percentage bars
+ */
+function formatPercentageBarStyle(drives: DriveStorageData[], round: boolean, sizeUnits?: SizeUnit): string {
+    return drives
+        .map((usage) => {
+            const lbl = renderResourceLabel('used/total', usage, round, sizeUnits);
+            const percentBar = generatePercentBar(usage.percentage);
+            const displayName = usage.path === '/' ? '◉ System' : `◉ ${usage.name}`;
+
+            return `${displayName}\n    ${percentBar}  ${usage.percentage.toFixed(1)}%\n    ${lbl}`;
+        })
+        .join('\n\n');
+}
+
+/**
+ * Formats tooltip with tree-like structure
+ */
+function formatTreeStyle(drives: DriveStorageData[], round: boolean, sizeUnits?: SizeUnit): string {
+    return drives
+        .map((usage) => {
+            const lbl = renderResourceLabel('used/total', usage, round, sizeUnits);
+            const displayName = usage.path === '/' ? 'System' : usage.name;
+
+            return `• ${displayName}: ${usage.percentage.toFixed(1)}%\n  └─ ${lbl}`;
+        })
+        .join('\n');
+}
+
+/**
+ * Formats tooltip with simple text layout
+ */
+function formatSimpleStyle(drives: DriveStorageData[], round: boolean, sizeUnits?: SizeUnit): string {
+    return drives
+        .map((usage) => {
+            const lbl = renderResourceLabel('used/total', usage, round, sizeUnits);
+            const displayName = usage.path === '/' ? 'System' : usage.name;
+
+            return `[${displayName}]: ${lbl}`;
+        })
+        .join('\n');
+}
diff --git a/src/components/bar/modules/storage/index.tsx b/src/components/bar/modules/storage/index.tsx
index adc3fdd..c56004e 100644
--- a/src/components/bar/modules/storage/index.tsx
+++ b/src/components/bar/modules/storage/index.tsx
@@ -1,49 +1,68 @@
-import options from 'src/options';
-import { Module } from '../../shared/Module';
-import { formatTooltip, inputHandler, renderResourceLabel } from 'src/components/bar/utils/helpers';
-import { computeStorage } from './helpers';
-import { LABEL_TYPES } from 'src/lib/types/defaults/bar.types';
-import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
+import { Module } from '../../shared/module';
 import { bind, Variable } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { BarBoxChild, ResourceLabelType } from 'src/lib/types/bar.types';
-import { GenericResourceData } from 'src/lib/types/customModules/generic.types';
+import options from 'src/configuration';
+import { renderResourceLabel } from '../../utils/systemResource';
+import { LABEL_TYPES, ResourceLabelType } from 'src/services/system/types';
+import { BarBoxChild } from '../../types';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+import StorageService from 'src/services/system/storage';
+import { formatStorageTooltip } from './helpers/tooltipFormatters';
 
-const { label, labelType, icon, round, leftClick, rightClick, middleClick, pollingInterval } =
-    options.bar.customModules.storage;
+const inputHandler = InputHandlerService.getInstance();
 
-const defaultStorageData = { total: 0, used: 0, percentage: 0, free: 0 };
-
-const storageUsage = Variable<GenericResourceData>(defaultStorageData);
-
-const storagePoller = new FunctionPoller<GenericResourceData, [Variable<boolean>]>(
-    storageUsage,
-    [bind(round)],
-    bind(pollingInterval),
-    computeStorage,
+const {
+    label,
+    labelType,
+    icon,
     round,
-);
+    leftClick,
+    rightClick,
+    middleClick,
+    pollingInterval,
+    units,
+    tooltipStyle,
+    paths,
+} = options.bar.customModules.storage;
 
-storagePoller.initialize('storage');
+const storageService = new StorageService({ frequency: pollingInterval, round, pathsToMonitor: paths });
 
 export const Storage = (): BarBoxChild => {
+    const tooltipText = Variable('');
+
+    storageService.initialize();
+
     const labelBinding = Variable.derive(
-        [bind(storageUsage), bind(labelType), bind(round)],
-        (storage, lblTyp, round) => {
-            return renderResourceLabel(lblTyp, storage, round);
+        [bind(storageService.storage), bind(labelType), bind(paths), bind(tooltipStyle)],
+        (storage, lblTyp, filePaths) => {
+            const storageUnitToUse = units.get();
+            const sizeUnits = storageUnitToUse !== 'auto' ? storageUnitToUse : undefined;
+
+            const tooltipFormatted = formatStorageTooltip(
+                filePaths,
+                storageService,
+                tooltipStyle.get(),
+                round.get(),
+                sizeUnits,
+            );
+
+            tooltipText.set(tooltipFormatted);
+
+            return renderResourceLabel(lblTyp, storage, round.get(), sizeUnits);
         },
     );
+
+    let inputHandlerBindings: Variable<void>;
+
     const storageModule = Module({
         textIcon: bind(icon),
         label: labelBinding(),
-        tooltipText: bind(labelType).as((lblTyp) => {
-            return formatTooltip('Storage', lblTyp);
-        }),
+        tooltipText: bind(tooltipText),
         boxClass: 'storage',
         showLabelBinding: bind(label),
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         cmd: leftClick,
                     },
@@ -75,6 +94,7 @@ export const Storage = (): BarBoxChild => {
                 });
             },
             onDestroy: () => {
+                inputHandlerBindings.drop();
                 labelBinding.drop();
             },
         },
diff --git a/src/components/bar/modules/submap/index.tsx b/src/components/bar/modules/submap/index.tsx
index 0faff05..1a74164 100644
--- a/src/components/bar/modules/submap/index.tsx
+++ b/src/components/bar/modules/submap/index.tsx
@@ -1,12 +1,14 @@
-import options from 'src/options';
-import { Module } from '../../shared/Module';
-import { inputHandler } from 'src/components/bar/utils/helpers';
-import { capitalizeFirstLetter } from 'src/lib/utils';
+import { Module } from '../../shared/module';
 import { getInitialSubmap, isSubmapEnabled } from './helpers';
 import { bind, Variable } from 'astal';
 import { Astal } from 'astal/gtk3';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import options from 'src/configuration';
+import { capitalizeFirstLetter } from 'src/lib/string/formatters';
+import { BarBoxChild } from 'src/components/bar/types';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+
+const inputHandler = InputHandlerService.getInstance();
 
 const hyprlandService = AstalHyprland.get_default();
 const {
@@ -52,6 +54,8 @@ export const Submap = (): BarBoxChild => {
         },
     );
 
+    let inputHandlerBindings: Variable<void>;
+
     const submapModule = Module({
         textIcon: submapIcon(),
         tooltipText: submapLabel(),
@@ -60,7 +64,7 @@ export const Submap = (): BarBoxChild => {
         boxClass: 'submap',
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         cmd: leftClick,
                     },
@@ -79,6 +83,7 @@ export const Submap = (): BarBoxChild => {
                 });
             },
             onDestroy: () => {
+                inputHandlerBindings.drop();
                 submapLabel.drop();
                 submapIcon.drop();
             },
diff --git a/src/components/bar/modules/systray/index.tsx b/src/components/bar/modules/systray/index.tsx
index 8154223..4c13fb0 100644
--- a/src/components/bar/modules/systray/index.tsx
+++ b/src/components/bar/modules/systray/index.tsx
@@ -1,14 +1,14 @@
-import { isMiddleClick, isPrimaryClick, isSecondaryClick, Notify } from '../../../../lib/utils';
-import options from '../../../../options';
 import AstalTray from 'gi://AstalTray?version=0.1';
 import { bind, Gio, Variable } from 'astal';
 import { Gdk, Gtk } from 'astal/gtk3';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import options from 'src/configuration';
+import { isPrimaryClick, isSecondaryClick, isMiddleClick } from 'src/lib/events/mouse';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
 
 const systemtray = AstalTray.get_default();
 const { ignore, customIcons } = options.bar.systray;
 
-//TODO: Connect to `notify::menu-model` and `notify::action-group` to have up to date menu and action group
 const createMenu = (menuModel: Gio.MenuModel, actionGroup: Gio.ActionGroup | null): Gtk.Menu => {
     const menu = Gtk.Menu.new_from_model(menuModel);
     menu.insert_action_group('dbusmenu', actionGroup);
@@ -31,7 +31,7 @@ const MenuDefaultIcon = ({ item }: MenuEntryProps): JSX.Element => {
     return (
         <icon
             className={'systray-icon'}
-            gIcon={bind(item, 'gicon')}
+            gicon={bind(item, 'gicon')}
             tooltipMarkup={bind(item, 'tooltipMarkup')}
         />
     );
@@ -67,7 +67,7 @@ const MenuEntry = ({ item, child }: MenuEntryProps): JSX.Element => {
                 }
 
                 if (isMiddleClick(event)) {
-                    Notify({ summary: 'App Name', body: item.id });
+                    SystemUtilities.notify({ summary: 'App Name', body: item.id });
                 }
             }}
             onDestroy={() => {
diff --git a/src/components/bar/modules/updates/index.tsx b/src/components/bar/modules/updates/index.tsx
index 5b29d5a..8f30ad6 100644
--- a/src/components/bar/modules/updates/index.tsx
+++ b/src/components/bar/modules/updates/index.tsx
@@ -1,10 +1,12 @@
-import options from 'src/options';
-import { Module } from '../../shared/Module';
-import { inputHandler } from 'src/components/bar/utils/helpers';
+import { Module } from '../../shared/module';
 import { BashPoller } from 'src/lib/poller/BashPoller';
 import { bind, Variable } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import options from 'src/configuration';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+
+const inputHandler = InputHandlerService.getInstance();
 
 const {
     updateCommand,
@@ -71,6 +73,8 @@ const updatesIcon = Variable.derive(
 );
 
 export const Updates = (): BarBoxChild => {
+    let inputHandlerBindings: Variable<void>;
+
     const updatesModule = Module({
         textIcon: updatesIcon(),
         tooltipText: bind(pendingUpdatesTooltip),
@@ -80,7 +84,7 @@ export const Updates = (): BarBoxChild => {
         showLabelBinding: bind(label),
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(
+                inputHandlerBindings = inputHandler.attachHandlers(
                     self,
                     {
                         onPrimaryClick: {
@@ -102,6 +106,9 @@ export const Updates = (): BarBoxChild => {
                     postInputUpdater,
                 );
             },
+            onDestroy: () => {
+                inputHandlerBindings.drop();
+            },
         },
     });
 
diff --git a/src/components/bar/modules/volume/index.tsx b/src/components/bar/modules/volume/index.tsx
index 7b0e3f8..1a4e366 100644
--- a/src/components/bar/modules/volume/index.tsx
+++ b/src/components/bar/modules/volume/index.tsx
@@ -1,12 +1,13 @@
-import { openMenu } from '../../utils/menu.js';
-import options from 'src/options';
-import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers.js';
 import { bind, Variable } from 'astal';
-import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers.js';
+import { onPrimaryClick, onSecondaryClick, onMiddleClick, onScroll } from 'src/lib/shared/eventHandlers';
 import { getIcon } from './helpers/index.js';
 import { Astal } from 'astal/gtk3';
 import AstalWp from 'gi://AstalWp?version=0.1';
-import { BarBoxChild } from 'src/lib/types/bar.types.js';
+import { BarBoxChild } from 'src/components/bar/types.js';
+import options from 'src/configuration';
+import { runAsyncCommand } from '../../utils/input/commandExecutor';
+import { throttledScrollHandler } from '../../utils/input/throttle';
+import { openDropdownMenu } from '../../utils/menu';
 
 const wireplumber = AstalWp.get_default() as AstalWp.Wp;
 const audioService = wireplumber?.audio;
@@ -102,7 +103,7 @@ const Volume = (): BarBoxChild => {
 
                         disconnectFunctions.push(
                             onPrimaryClick(self, (clicked, event) => {
-                                openMenu(clicked, event, 'audiomenu');
+                                openDropdownMenu(clicked, event, 'audiomenu');
                             }),
                         );
 
diff --git a/src/components/bar/modules/weather/index.tsx b/src/components/bar/modules/weather/index.tsx
index 5ab5633..4e71daa 100644
--- a/src/components/bar/modules/weather/index.tsx
+++ b/src/components/bar/modules/weather/index.tsx
@@ -1,37 +1,41 @@
-import options from 'src/options';
-import { Module } from '../../shared/Module';
-import { inputHandler } from 'src/components/bar/utils/helpers';
-import { getWeatherStatusTextIcon, globalWeatherVar } from 'src/shared/weather';
+import { Module } from '../../shared/module';
 import { bind, Variable } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import WeatherService from 'src/services/weather';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+import options from 'src/configuration';
+import { toTitleCase } from 'src/lib/string/formatters';
+
+const inputHandler = InputHandlerService.getInstance();
+
+const weatherService = WeatherService.getInstance();
 
 const { label, unit, leftClick, rightClick, middleClick, scrollUp, scrollDown } =
     options.bar.customModules.weather;
 
 export const Weather = (): BarBoxChild => {
-    const iconBinding = Variable.derive([bind(globalWeatherVar)], (wthr) => {
-        const weatherStatusIcon = getWeatherStatusTextIcon(wthr);
-        return weatherStatusIcon;
+    const iconBinding = Variable.derive([bind(weatherService.statusIcon)], (icon) => {
+        return icon;
     });
 
-    const labelBinding = Variable.derive([bind(globalWeatherVar), bind(unit)], (wthr, unt) => {
-        if (unt === 'imperial') {
-            return `${Math.ceil(wthr.current.temp_f)}° F`;
-        } else {
-            return `${Math.ceil(wthr.current.temp_c)}° C`;
-        }
+    const labelBinding = Variable.derive([bind(weatherService.temperature), bind(unit)], (temp) => {
+        return temp;
     });
 
+    let inputHandlerBindings: Variable<void>;
+
     const weatherModule = Module({
         textIcon: iconBinding(),
-        tooltipText: bind(globalWeatherVar).as((v) => `Weather Status: ${v.current.condition.text}`),
+        tooltipText: bind(weatherService.weatherData).as(
+            (wthr) => `Weather Status: ${toTitleCase(wthr.current.condition.text)}`,
+        ),
         boxClass: 'weather-custom',
         label: labelBinding(),
         showLabelBinding: bind(label),
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         cmd: leftClick,
                     },
@@ -50,6 +54,7 @@ export const Weather = (): BarBoxChild => {
                 });
             },
             onDestroy: () => {
+                inputHandlerBindings.drop();
                 iconBinding.drop();
                 labelBinding.drop();
             },
diff --git a/src/lib/constants/appIcons.ts b/src/components/bar/modules/window_title/helpers/appIcons.ts
similarity index 100%
rename from src/lib/constants/appIcons.ts
rename to src/components/bar/modules/window_title/helpers/appIcons.ts
diff --git a/src/components/bar/modules/window_title/helpers/title.ts b/src/components/bar/modules/window_title/helpers/title.ts
index 2803262..8fc42af 100644
--- a/src/components/bar/modules/window_title/helpers/title.ts
+++ b/src/components/bar/modules/window_title/helpers/title.ts
@@ -1,8 +1,8 @@
-import options from 'src/options';
-import { capitalizeFirstLetter } from 'src/lib/utils';
-import { defaultWindowTitleMap } from 'src/lib/constants/appIcons';
+import { defaultWindowTitleMap } from 'src/components/bar/modules/window_title/helpers/appIcons';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
 import { bind, Variable } from 'astal';
+import options from 'src/configuration';
+import { capitalizeFirstLetter } from 'src/lib/string/formatters';
 
 const { title_map: userDefinedTitles } = options.bar.windowtitle;
 
diff --git a/src/components/bar/modules/window_title/index.tsx b/src/components/bar/modules/window_title/index.tsx
index 27198ff..823d93a 100644
--- a/src/components/bar/modules/window_title/index.tsx
+++ b/src/components/bar/modules/window_title/index.tsx
@@ -1,11 +1,12 @@
-import { runAsyncCommand, throttledScrollHandler } from 'src/components/bar/utils/helpers';
-import options from 'src/options';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
 import { onMiddleClick, onPrimaryClick, onScroll, onSecondaryClick } from 'src/lib/shared/eventHandlers';
 import { bind, Variable } from 'astal';
 import { clientTitle, getTitle, getWindowMatch, truncateTitle } from './helpers/title';
 import { Astal } from 'astal/gtk3';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { BarBoxChild } from 'src/components/bar/types';
+import options from 'src/configuration';
+import { runAsyncCommand } from '../../utils/input/commandExecutor';
+import { throttledScrollHandler } from '../../utils/input/throttle';
 
 const hyprlandService = AstalHyprland.get_default();
 const { leftClick, rightClick, middleClick, scrollDown, scrollUp } = options.bar.windowtitle;
diff --git a/src/components/bar/modules/workspaces/helpers/index.ts b/src/components/bar/modules/workspaces/helpers/index.ts
index 2a0b525..807dfdd 100644
--- a/src/components/bar/modules/workspaces/helpers/index.ts
+++ b/src/components/bar/modules/workspaces/helpers/index.ts
@@ -1,406 +1,278 @@
-import { Variable } from 'astal';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
-import { MonitorMap, WorkspaceMonitorMap, WorkspaceRule } from 'src/lib/types/workspace.types';
-import { range } from 'src/lib/utils';
-import options from 'src/options';
+import options from 'src/configuration';
+import { defaultApplicationIconMap } from 'src/components/bar/modules/window_title/helpers/appIcons';
+import { isValidGjsColor } from 'src/lib/validation/colors';
+import { AppIconOptions } from './types';
+import { WorkspaceIconMap } from '../types';
+import { unique } from 'src/lib/array/helpers';
 
 const hyprlandService = AstalHyprland.get_default();
-const { workspaces, reverse_scroll, ignored } = options.bar.workspaces;
+const { monochrome, background } = options.theme.bar.buttons;
+const { background: wsBackground, active } = options.theme.bar.buttons.workspaces;
+
+const { showWsIcons, showAllActive, numbered_active_indicator: wsActiveIndicator } = options.bar.workspaces;
 
 /**
- * A Variable that holds the current map of monitors to the workspace numbers assigned to them.
+ * Determines if a workspace is active on a given monitor.
+ *
+ * This function checks if the workspace with the specified index is currently active on the given monitor.
+ * It uses the `showAllActive` setting and the `hyprlandService` to determine the active workspace on the monitor.
+ *
+ * @param monitor The index of the monitor to check.
+ * @param i The index of the workspace to check.
+ *
+ * @returns True if the workspace is active on the monitor, false otherwise.
  */
-export const workspaceRules = Variable(getWorkspaceMonitorMap());
-
-/**
- * A Variable used to force UI or other updates when relevant workspace events occur.
- */
-export const forceUpdater = Variable(true);
-
-/**
- * Retrieves the workspace numbers associated with a specific monitor.
- *
- * If only one monitor exists, this will simply return a list of all possible workspaces.
- * Otherwise, it will consult the workspace rules to determine which workspace numbers
- * belong to the specified monitor.
- *
- * @param monitorId - The numeric identifier of the monitor.
- *
- * @returns An array of workspace numbers belonging to the specified monitor.
- */
-export function getWorkspacesForMonitor(monitorId: number): number[] {
-    const allMonitors = hyprlandService.get_monitors();
-
-    if (allMonitors.length === 1) {
-        return Array.from({ length: workspaces.get() }, (_, index) => index + 1);
-    }
-
-    const workspaceMonitorRules = getWorkspaceMonitorMap();
-
-    const monitorNameMap: MonitorMap = {};
-    allMonitors.forEach((monitorInstance) => {
-        monitorNameMap[monitorInstance.id] = monitorInstance.name;
-    });
-
-    const currentMonitorName = monitorNameMap[monitorId];
-
-    return workspaceMonitorRules[currentMonitorName];
-}
-
-/**
- * Checks whether a given workspace is valid (assigned) for the specified monitor.
- *
- * This function inspects the workspace rules object to determine if the current workspace belongs
- * to the target monitor. If no workspace rules exist, the function defaults to returning `true`.
- *
- * @param workspaceId - The number representing the current workspace.
- * @param workspaceMonitorRules - The map of monitor names to assigned workspace numbers.
- * @param monitorId - The numeric identifier for the monitor.
- * @param workspaceList - A list of Hyprland workspace objects.
- * @param monitorList - A list of Hyprland monitor objects.
- *
- * @returns `true` if the workspace is assigned to the monitor or if no rules exist. Otherwise, `false`.
- */
-function isWorkspaceValidForMonitor(
-    workspaceId: number,
-    workspaceMonitorRules: WorkspaceMonitorMap,
-    monitorId: number,
-    workspaceList: AstalHyprland.Workspace[],
-    monitorList: AstalHyprland.Monitor[],
-): boolean {
-    const monitorNameMap: MonitorMap = {};
-    const allWorkspaceInstances = workspaceList ?? [];
-
-    const workspaceMonitorReferences = allWorkspaceInstances
-        .filter((workspaceInstance) => workspaceInstance !== null)
-        .map((workspaceInstance) => {
-            return {
-                id: workspaceInstance.monitor?.id,
-                name: workspaceInstance.monitor?.name,
-            };
-        });
-
-    const mergedMonitorInstances = [
-        ...new Map(
-            [...workspaceMonitorReferences, ...monitorList].map((monitorCandidate) => [
-                monitorCandidate.id,
-                monitorCandidate,
-            ]),
-        ).values(),
-    ];
-
-    mergedMonitorInstances.forEach((monitorInstance) => {
-        monitorNameMap[monitorInstance.id] = monitorInstance.name;
-    });
-
-    const currentMonitorName = monitorNameMap[monitorId];
-    const currentMonitorWorkspaceRules = workspaceMonitorRules[currentMonitorName] ?? [];
-    const activeWorkspaceIds = new Set(allWorkspaceInstances.map((ws) => ws.id));
-    const filteredWorkspaceRules = currentMonitorWorkspaceRules.filter((ws) => !activeWorkspaceIds.has(ws));
-
-    if (filteredWorkspaceRules === undefined) {
-        return false;
-    }
-
-    return filteredWorkspaceRules.includes(workspaceId);
-}
-
-/**
- * Fetches a map of monitors to the workspace numbers that belong to them.
- *
- * This function communicates with the Hyprland service to retrieve workspace rules in JSON format.
- * Those rules are parsed, and a map of monitor names to lists of assigned workspace numbers is constructed.
- *
- * @returns An object where each key is a monitor name, and each value is an array of workspace numbers.
- */
-function getWorkspaceMonitorMap(): WorkspaceMonitorMap {
-    try {
-        const rulesResponse = hyprlandService.message('j/workspacerules');
-        const workspaceMonitorRules: WorkspaceMonitorMap = {};
-        const parsedWorkspaceRules = JSON.parse(rulesResponse);
-
-        parsedWorkspaceRules.forEach((rule: WorkspaceRule) => {
-            const workspaceNumber = parseInt(rule.workspaceString, 10);
-
-            if (rule.monitor === undefined || isNaN(workspaceNumber)) {
-                return;
-            }
-
-            const doesMonitorExistInRules = Object.hasOwnProperty.call(workspaceMonitorRules, rule.monitor);
-
-            if (doesMonitorExistInRules) {
-                workspaceMonitorRules[rule.monitor].push(workspaceNumber);
-            } else {
-                workspaceMonitorRules[rule.monitor] = [workspaceNumber];
-            }
-        });
-
-        return workspaceMonitorRules;
-    } catch (error) {
-        console.error(error);
-        return {};
-    }
-}
-
-/**
- * Checks if a workspace number should be ignored based on a regular expression.
- *
- * @param ignoredWorkspacesVariable - A Variable object containing a string pattern of ignored workspaces.
- * @param workspaceNumber - The numeric representation of the workspace to check.
- *
- * @returns `true` if the workspace should be ignored, otherwise `false`.
- */
-function isWorkspaceIgnored(ignoredWorkspacesVariable: Variable<string>, workspaceNumber: number): boolean {
-    if (ignoredWorkspacesVariable.get() === '') {
-        return false;
-    }
-
-    const ignoredWorkspacesRegex = new RegExp(ignoredWorkspacesVariable.get());
-    return ignoredWorkspacesRegex.test(workspaceNumber.toString());
-}
-
-/**
- * Changes the active workspace in the specified direction ('next' or 'prev').
- *
- * This function uses the current monitor's set of active or assigned workspaces and
- * cycles through them in the chosen direction. It also respects the list of ignored
- * workspaces, skipping any that match the ignored pattern.
- *
- * @param direction - The direction to navigate ('next' or 'prev').
- * @param currentMonitorWorkspacesVariable - A Variable containing an array of workspace numbers for the current monitor.
- * @param onlyActiveWorkspaces - Whether to only include active (occupied) workspaces when navigating.
- * @param ignoredWorkspacesVariable - A Variable that contains the ignored workspaces pattern.
- */
-function navigateWorkspace(direction: 'next' | 'prev', ignoredWorkspacesVariable: Variable<string>): void {
-    const allHyprlandWorkspaces = hyprlandService.get_workspaces() ?? [];
-
-    const activeWorkspaceIds = allHyprlandWorkspaces
-        .filter((workspaceInstance) => hyprlandService.focusedMonitor.id === workspaceInstance.monitor?.id)
-        .map((workspaceInstance) => workspaceInstance.id);
-
-    const assignedOrOccupiedWorkspaces = activeWorkspaceIds.sort((a, b) => a - b);
-
-    if (assignedOrOccupiedWorkspaces.length === 0) {
-        return;
-    }
-
-    const workspaceIndex = assignedOrOccupiedWorkspaces.indexOf(hyprlandService.focusedWorkspace?.id);
-    const step = direction === 'next' ? 1 : -1;
-
-    let newIndex =
-        (workspaceIndex + step + assignedOrOccupiedWorkspaces.length) % assignedOrOccupiedWorkspaces.length;
-    let attempts = 0;
-
-    while (attempts < assignedOrOccupiedWorkspaces.length) {
-        const targetWorkspaceNumber = assignedOrOccupiedWorkspaces[newIndex];
-        if (!isWorkspaceIgnored(ignoredWorkspacesVariable, targetWorkspaceNumber)) {
-            hyprlandService.dispatch('workspace', targetWorkspaceNumber.toString());
-            return;
-        }
-        newIndex =
-            (newIndex + step + assignedOrOccupiedWorkspaces.length) % assignedOrOccupiedWorkspaces.length;
-        attempts++;
-    }
-}
-
-/**
- * Navigates to the next workspace in the current monitor.
- *
- * @param currentMonitorWorkspacesVariable - A Variable containing workspace numbers for the current monitor.
- * @param onlyActiveWorkspaces - Whether to only navigate among active (occupied) workspaces.
- * @param ignoredWorkspacesVariable - A Variable that contains the ignored workspaces pattern.
- */
-export function goToNextWorkspace(ignoredWorkspacesVariable: Variable<string>): void {
-    navigateWorkspace('next', ignoredWorkspacesVariable);
-}
-
-/**
- * Navigates to the previous workspace in the current monitor.
- *
- * @param currentMonitorWorkspacesVariable - A Variable containing workspace numbers for the current monitor.
- * @param onlyActiveWorkspaces - Whether to only navigate among active (occupied) workspaces.
- * @param ignoredWorkspacesVariable - A Variable that contains the ignored workspaces pattern.
- */
-export function goToPreviousWorkspace(ignoredWorkspacesVariable: Variable<string>): void {
-    navigateWorkspace('prev', ignoredWorkspacesVariable);
-}
-
-/**
- * Limits the execution rate of a given function to prevent it from being called too often.
- *
- * @param func - The function to be throttled.
- * @param limit - The time limit (in milliseconds) during which calls to `func` are disallowed after the first call.
- *
- * @returns The throttled version of the input function.
- */
-export function throttle<T extends (...args: unknown[]) => void>(func: T, limit: number): T {
-    let isThrottleActive: boolean;
-
-    return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
-        if (!isThrottleActive) {
-            func.apply(this, args);
-            isThrottleActive = true;
-
-            setTimeout(() => {
-                isThrottleActive = false;
-            }, limit);
-        }
-    } as T;
-}
-
-/**
- * Creates throttled scroll handlers that navigate workspaces upon scrolling, respecting the configured scroll speed.
- *
- * @param scrollSpeed - The factor by which the scroll navigation is throttled.
- * @param onlyActiveWorkspaces - Whether to only navigate among active (occupied) workspaces.
- *
- * @returns An object containing two functions (`throttledScrollUp` and `throttledScrollDown`), both throttled.
- */
-export function initThrottledScrollHandlers(scrollSpeed: number): ThrottledScrollHandlers {
-    const throttledScrollUp = throttle(() => {
-        if (reverse_scroll.get()) {
-            goToPreviousWorkspace(ignored);
-        } else {
-            goToNextWorkspace(ignored);
-        }
-    }, 200 / scrollSpeed);
-
-    const throttledScrollDown = throttle(() => {
-        if (reverse_scroll.get()) {
-            goToNextWorkspace(ignored);
-        } else {
-            goToPreviousWorkspace(ignored);
-        }
-    }, 200 / scrollSpeed);
-
-    return { throttledScrollUp, throttledScrollDown };
-}
-
-/**
- * Computes which workspace numbers should be rendered for a given monitor.
- *
- * This function consolidates both active and all possible workspaces (based on rules),
- * then filters them by the selected monitor if `isMonitorSpecific` is set to `true`.
- *
- * @param totalWorkspaces - The total number of workspaces (a fallback if workspace rules are not enforced).
- * @param workspaceInstances - A list of Hyprland workspace objects.
- * @param workspaceMonitorRules - The map of monitor names to assigned workspace numbers.
- * @param monitorId - The numeric identifier of the monitor.
- * @param isMonitorSpecific - If `true`, only include the workspaces that match this monitor.
- * @param hyprlandMonitorInstances - A list of Hyprland monitor objects.
- *
- * @returns An array of workspace numbers that should be shown.
- */
-export function getWorkspacesToRender(
-    totalWorkspaces: number,
-    workspaceInstances: AstalHyprland.Workspace[],
-    workspaceMonitorRules: WorkspaceMonitorMap,
-    monitorId: number,
-    isMonitorSpecific: boolean,
-    hyprlandMonitorInstances: AstalHyprland.Monitor[],
-): number[] {
-    let allPotentialWorkspaces = range(totalWorkspaces || 8);
-    const allWorkspaceInstances = workspaceInstances ?? [];
-
-    const activeWorkspaceIds = allWorkspaceInstances.map((workspaceInstance) => workspaceInstance.id);
-
-    const monitorReferencesForActiveWorkspaces = allWorkspaceInstances.map((workspaceInstance) => {
-        return {
-            id: workspaceInstance.monitor?.id ?? -1,
-            name: workspaceInstance.monitor?.name ?? '',
-        };
-    });
-
-    const currentMonitorInstance =
-        hyprlandMonitorInstances.find((monitorObj) => monitorObj.id === monitorId) ||
-        monitorReferencesForActiveWorkspaces.find((monitorObj) => monitorObj.id === monitorId);
-
-    const allWorkspacesWithRules = Object.keys(workspaceMonitorRules).reduce(
-        (accumulator: number[], monitorName: string) => {
-            return [...accumulator, ...workspaceMonitorRules[monitorName]];
-        },
-        [],
-    );
-
-    const activeWorkspacesForCurrentMonitor = activeWorkspaceIds.filter((workspaceId) => {
-        const metadataForWorkspace = allWorkspaceInstances.find(
-            (workspaceObj) => workspaceObj.id === workspaceId,
-        );
-
-        if (metadataForWorkspace) {
-            return metadataForWorkspace?.monitor?.id === monitorId;
-        }
-
-        if (
-            currentMonitorInstance &&
-            Object.hasOwnProperty.call(workspaceMonitorRules, currentMonitorInstance.name) &&
-            allWorkspacesWithRules.includes(workspaceId)
-        ) {
-            return workspaceMonitorRules[currentMonitorInstance.name].includes(workspaceId);
-        }
-
-        return false;
-    });
-
-    if (isMonitorSpecific) {
-        const validWorkspaceNumbers = range(totalWorkspaces).filter((workspaceNumber) => {
-            return isWorkspaceValidForMonitor(
-                workspaceNumber,
-                workspaceMonitorRules,
-                monitorId,
-                allWorkspaceInstances,
-                hyprlandMonitorInstances,
-            );
-        });
-
-        allPotentialWorkspaces = [
-            ...new Set([...activeWorkspacesForCurrentMonitor, ...validWorkspaceNumbers]),
-        ];
-    } else {
-        allPotentialWorkspaces = [...new Set([...allPotentialWorkspaces, ...activeWorkspaceIds])];
-    }
-
-    return allPotentialWorkspaces
-        .filter((workspace) => !isWorkspaceIgnored(ignored, workspace))
-        .sort((a, b) => a - b);
-}
-
-/**
- * Subscribes to Hyprland service events related to workspaces to keep the local state updated.
- *
- * When certain events occur (like a configuration reload or a client being moved/added/removed),
- * this function updates the workspace rules or toggles the `forceUpdater` variable to ensure
- * that any dependent UI or logic is re-rendered or re-run.
- */
-export function initWorkspaceEvents(): void {
-    hyprlandService.connect('config-reloaded', () => {
-        workspaceRules.set(getWorkspaceMonitorMap());
-    });
-
-    hyprlandService.connect('client-moved', () => {
-        forceUpdater.set(!forceUpdater.get());
-    });
-
-    hyprlandService.connect('client-added', () => {
-        forceUpdater.set(!forceUpdater.get());
-    });
-
-    hyprlandService.connect('client-removed', () => {
-        forceUpdater.set(!forceUpdater.get());
-    });
-}
-
-/**
- * Throttled scroll handler functions for navigating workspaces.
- */
-type ThrottledScrollHandlers = {
-    /**
-     * Scroll up throttled handler.
-     */
-    throttledScrollUp: () => void;
-
-    /**
-     * Scroll down throttled handler.
-     */
-    throttledScrollDown: () => void;
+const isWorkspaceActiveOnMonitor = (monitor: number, i: number): boolean => {
+    return showAllActive.get() && hyprlandService.get_monitor(monitor)?.activeWorkspace?.id === i;
+};
+
+/**
+ * Retrieves the icon for a given workspace.
+ *
+ * This function returns the icon associated with a workspace from the provided workspace icon map.
+ * If no icon is found, it returns the workspace index as a string.
+ *
+ * @param wsIconMap The map of workspace icons where keys are workspace indices and values are icons or icon objects.
+ * @param i The index of the workspace for which to retrieve the icon.
+ *
+ * @returns The icon for the workspace as a string. If no icon is found, returns the workspace index as a string.
+ */
+const getWsIcon = (wsIconMap: WorkspaceIconMap, i: number): string => {
+    const iconEntry = wsIconMap[i];
+    const defaultIcon = `${i}`;
+
+    if (iconEntry === undefined) {
+        return defaultIcon;
+    }
+
+    if (typeof iconEntry === 'string' && iconEntry !== '') {
+        return iconEntry;
+    }
+
+    const hasIcon = typeof iconEntry === 'object' && 'icon' in iconEntry && iconEntry.icon !== '';
+
+    if (hasIcon) {
+        return iconEntry.icon;
+    }
+
+    return defaultIcon;
+};
+
+/**
+ * Retrieves the color for a given workspace.
+ *
+ * This function determines the color styling for a workspace based on the provided workspace icon map,
+ * smart highlighting settings, and the monitor index. It returns a CSS string for the color and background.
+ *
+ * @param wsIconMap The map of workspace icons where keys are workspace indices and values are icon objects.
+ * @param i The index of the workspace for which to retrieve the color.
+ * @param smartHighlight A boolean indicating whether smart highlighting is enabled.
+ * @param monitor The index of the monitor to check for active workspaces.
+ *
+ * @returns A CSS string representing the color and background for the workspace. If no color is found, returns an empty string.
+ */
+export const getWsColor = (
+    wsIconMap: WorkspaceIconMap,
+    i: number,
+    smartHighlight: boolean,
+    monitor: number,
+): string => {
+    const iconEntry = wsIconMap[i];
+    const hasColor =
+        typeof iconEntry === 'object' && 'color' in iconEntry && isValidGjsColor(iconEntry.color);
+
+    if (iconEntry === undefined) {
+        return '';
+    }
+
+    if (
+        showWsIcons.get() &&
+        smartHighlight &&
+        wsActiveIndicator.get() === 'highlight' &&
+        (hyprlandService.focusedWorkspace?.id === i || isWorkspaceActiveOnMonitor(monitor, i))
+    ) {
+        const iconColor = monochrome.get() ? background.get() : wsBackground.get();
+        const iconBackground = hasColor && isValidGjsColor(iconEntry.color) ? iconEntry.color : active.get();
+        const colorCss = `color: ${iconColor};`;
+        const backgroundCss = `background: ${iconBackground};`;
+
+        return colorCss + backgroundCss;
+    }
+
+    if (hasColor && isValidGjsColor(iconEntry.color)) {
+        return `color: ${iconEntry.color}; border-bottom-color: ${iconEntry.color};`;
+    }
+
+    return '';
+};
+
+/**
+ * Retrieves the application icon for a given workspace.
+ *
+ * This function returns the appropriate application icon for the specified workspace index.
+ * It considers user-defined icons, default icons, and the option to remove duplicate icons.
+ *
+ * @param workspaceIndex The index of the workspace for which to retrieve the application icon.
+ * @param removeDuplicateIcons A boolean indicating whether to remove duplicate icons.
+ * @param options An object containing user-defined icon map, default icon, and empty icon.
+ *
+ * @returns The application icon for the workspace as a string. If no icons are found, returns the default or empty icon.
+ */
+export const getAppIcon = (
+    workspaceIndex: number,
+    removeDuplicateIcons: boolean,
+    { iconMap: userDefinedIconMap, defaultIcon, emptyIcon }: AppIconOptions,
+): string => {
+    const workspaceClients = hyprlandService
+        .get_clients()
+        .filter((client) => client?.workspace?.id === workspaceIndex)
+        .map((client) => [client.class, client.title]);
+
+    if (!workspaceClients.length) {
+        return emptyIcon;
+    }
+
+    const findIconForClient = (clientClass: string, clientTitle: string): string | undefined => {
+        const appIconMap = { ...userDefinedIconMap, ...defaultApplicationIconMap };
+
+        const iconEntry = Object.entries(appIconMap).find(([matcher]) => {
+            if (matcher.startsWith('class:')) {
+                return new RegExp(matcher.substring(6)).test(clientClass);
+            }
+
+            if (matcher.startsWith('title:')) {
+                return new RegExp(matcher.substring(6)).test(clientTitle);
+            }
+
+            return new RegExp(matcher, 'i').test(clientClass);
+        });
+
+        return iconEntry?.[1] ?? defaultIcon;
+    };
+
+    let icons = workspaceClients.reduce((iconAccumulator, [clientClass, clientTitle]) => {
+        const icon = findIconForClient(clientClass, clientTitle);
+
+        if (icon !== undefined) {
+            iconAccumulator.push(icon);
+        }
+
+        return iconAccumulator;
+    }, []);
+
+    if (icons.length) {
+        if (removeDuplicateIcons) {
+            icons = unique(icons);
+        }
+
+        return icons.join(' ');
+    }
+
+    return defaultIcon;
+};
+
+/**
+ * Renders the class names for a workspace.
+ *
+ * This function generates the appropriate class names for a workspace based on various settings such as
+ * whether to show icons, numbered workspaces, workspace icons, and smart highlighting.
+ *
+ * @param showIcons A boolean indicating whether to show icons.
+ * @param showNumbered A boolean indicating whether to show numbered workspaces.
+ * @param numberedActiveIndicator The indicator for active numbered workspaces.
+ * @param showWsIcons A boolean indicating whether to show workspace icons.
+ * @param smartHighlight A boolean indicating whether smart highlighting is enabled.
+ * @param monitor The index of the monitor to check for active workspaces.
+ * @param i The index of the workspace for which to render class names.
+ *
+ * @returns The class names for the workspace as a string.
+ */
+export const renderClassnames = (
+    showIcons: boolean,
+    showNumbered: boolean,
+    numberedActiveIndicator: string,
+    showWsIcons: boolean,
+    smartHighlight: boolean,
+    monitor: number,
+    i: number,
+): string => {
+    const isWorkspaceActive =
+        hyprlandService.focusedWorkspace?.id === i || isWorkspaceActiveOnMonitor(monitor, i);
+    const isActive = isWorkspaceActive ? 'active' : '';
+
+    if (showIcons) {
+        return `workspace-icon txt-icon bar ${isActive}`;
+    }
+
+    if (showNumbered || showWsIcons) {
+        const numActiveInd = isWorkspaceActive ? numberedActiveIndicator : '';
+
+        const wsIconClass = showWsIcons ? 'txt-icon' : '';
+        const smartHighlightClass = smartHighlight ? 'smart-highlight' : '';
+
+        const className = `workspace-number can_${numberedActiveIndicator} ${numActiveInd} ${wsIconClass} ${smartHighlightClass} ${isActive}`;
+
+        return className.trim();
+    }
+
+    return `default ${isActive}`;
+};
+
+/**
+ * Renders the label for a workspace.
+ *
+ * This function generates the appropriate label for a workspace based on various settings such as
+ * whether to show icons, application icons, workspace icons, and workspace indicators.
+ *
+ * @param showIcons A boolean indicating whether to show icons.
+ * @param availableIndicator The indicator for available workspaces.
+ * @param activeIndicator The indicator for active workspaces.
+ * @param occupiedIndicator The indicator for occupied workspaces.
+ * @param showAppIcons A boolean indicating whether to show application icons.
+ * @param appIcons The application icons as a string.
+ * @param workspaceMask A boolean indicating whether to mask the workspace.
+ * @param showWorkspaceIcons A boolean indicating whether to show workspace icons.
+ * @param wsIconMap The map of workspace icons where keys are workspace indices and values are icons or icon objects.
+ * @param i The index of the workspace for which to render the label.
+ * @param index The index of the workspace in the list.
+ * @param monitor The index of the monitor to check for active workspaces.
+ *
+ * @returns The label for the workspace as a string.
+ */
+export const renderLabel = (
+    showIcons: boolean,
+    availableIndicator: string,
+    activeIndicator: string,
+    occupiedIndicator: string,
+    showAppIcons: boolean,
+    appIcons: string,
+    workspaceMask: boolean,
+    showWorkspaceIcons: boolean,
+    wsIconMap: WorkspaceIconMap,
+    i: number,
+    index: number,
+    monitor: number,
+): string => {
+    if (showAppIcons) {
+        return appIcons;
+    }
+
+    if (showIcons) {
+        if (hyprlandService.focusedWorkspace?.id === i || isWorkspaceActiveOnMonitor(monitor, i)) {
+            return activeIndicator;
+        }
+        if ((hyprlandService.get_workspace(i)?.get_clients().length || 0) > 0) {
+            return occupiedIndicator;
+        }
+        if (monitor !== -1) {
+            return availableIndicator;
+        }
+    }
+
+    if (showWorkspaceIcons) {
+        return getWsIcon(wsIconMap, i);
+    }
+
+    return workspaceMask ? `${index + 1}` : `${i}`;
 };
diff --git a/src/components/bar/modules/workspaces/helpers/types.ts b/src/components/bar/modules/workspaces/helpers/types.ts
new file mode 100644
index 0000000..01d2694
--- /dev/null
+++ b/src/components/bar/modules/workspaces/helpers/types.ts
@@ -0,0 +1,7 @@
+import { ApplicationIcons } from '../types';
+
+export type AppIconOptions = {
+    iconMap: ApplicationIcons;
+    defaultIcon: string;
+    emptyIcon: string;
+};
diff --git a/src/components/bar/modules/workspaces/helpers/utils.ts b/src/components/bar/modules/workspaces/helpers/utils.ts
index cc1773e..f09196f 100644
--- a/src/components/bar/modules/workspaces/helpers/utils.ts
+++ b/src/components/bar/modules/workspaces/helpers/utils.ts
@@ -1,276 +1,99 @@
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
-import { defaultApplicationIconMap } from 'src/lib/constants/appIcons';
-import { WorkspaceIconMap, AppIconOptions } from 'src/lib/types/workspace.types';
-import { isValidGjsColor } from 'src/lib/utils';
-import options from 'src/options';
+import options from 'src/configuration';
+import { WorkspaceService } from 'src/services/workspace';
+
+const workspaceService = WorkspaceService.getInstance();
 
 const hyprlandService = AstalHyprland.get_default();
-const { monochrome, background } = options.theme.bar.buttons;
-const { background: wsBackground, active } = options.theme.bar.buttons.workspaces;
-
-const { showWsIcons, showAllActive, numbered_active_indicator: wsActiveIndicator } = options.bar.workspaces;
+const { reverse_scroll } = options.bar.workspaces;
 
 /**
- * Determines if a workspace is active on a given monitor.
+ * Limits the execution rate of a given function to prevent it from being called too often.
  *
- * This function checks if the workspace with the specified index is currently active on the given monitor.
- * It uses the `showAllActive` setting and the `hyprlandService` to determine the active workspace on the monitor.
+ * @param func - The function to be throttled.
+ * @param limit - The time limit (in milliseconds) during which calls to `func` are disallowed after the first call.
  *
- * @param monitor The index of the monitor to check.
- * @param i The index of the workspace to check.
- *
- * @returns True if the workspace is active on the monitor, false otherwise.
+ * @returns The throttled version of the input function.
  */
-const isWorkspaceActiveOnMonitor = (monitor: number, i: number): boolean => {
-    return showAllActive.get() && hyprlandService.get_monitor(monitor)?.activeWorkspace?.id === i;
-};
+function throttle<T extends (...args: unknown[]) => void>(func: T, limit: number): T {
+    let isThrottleActive: boolean;
 
-/**
- * Retrieves the icon for a given workspace.
- *
- * This function returns the icon associated with a workspace from the provided workspace icon map.
- * If no icon is found, it returns the workspace index as a string.
- *
- * @param wsIconMap The map of workspace icons where keys are workspace indices and values are icons or icon objects.
- * @param i The index of the workspace for which to retrieve the icon.
- *
- * @returns The icon for the workspace as a string. If no icon is found, returns the workspace index as a string.
- */
-const getWsIcon = (wsIconMap: WorkspaceIconMap, i: number): string => {
-    const iconEntry = wsIconMap[i];
-    const defaultIcon = `${i}`;
+    return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
+        if (!isThrottleActive) {
+            func.apply(this, args);
+            isThrottleActive = true;
 
-    if (iconEntry === undefined) {
-        return defaultIcon;
-    }
-
-    if (typeof iconEntry === 'string' && iconEntry !== '') {
-        return iconEntry;
-    }
-
-    const hasIcon = typeof iconEntry === 'object' && 'icon' in iconEntry && iconEntry.icon !== '';
-
-    if (hasIcon) {
-        return iconEntry.icon;
-    }
-
-    return defaultIcon;
-};
-
-/**
- * Retrieves the color for a given workspace.
- *
- * This function determines the color styling for a workspace based on the provided workspace icon map,
- * smart highlighting settings, and the monitor index. It returns a CSS string for the color and background.
- *
- * @param wsIconMap The map of workspace icons where keys are workspace indices and values are icon objects.
- * @param i The index of the workspace for which to retrieve the color.
- * @param smartHighlight A boolean indicating whether smart highlighting is enabled.
- * @param monitor The index of the monitor to check for active workspaces.
- *
- * @returns A CSS string representing the color and background for the workspace. If no color is found, returns an empty string.
- */
-export const getWsColor = (
-    wsIconMap: WorkspaceIconMap,
-    i: number,
-    smartHighlight: boolean,
-    monitor: number,
-): string => {
-    const iconEntry = wsIconMap[i];
-    const hasColor =
-        typeof iconEntry === 'object' && 'color' in iconEntry && isValidGjsColor(iconEntry.color);
-
-    if (iconEntry === undefined) {
-        return '';
-    }
-
-    if (
-        showWsIcons.get() &&
-        smartHighlight &&
-        wsActiveIndicator.get() === 'highlight' &&
-        (hyprlandService.focusedWorkspace?.id === i || isWorkspaceActiveOnMonitor(monitor, i))
-    ) {
-        const iconColor = monochrome.get() ? background.get() : wsBackground.get();
-        const iconBackground = hasColor && isValidGjsColor(iconEntry.color) ? iconEntry.color : active.get();
-        const colorCss = `color: ${iconColor};`;
-        const backgroundCss = `background: ${iconBackground};`;
-
-        return colorCss + backgroundCss;
-    }
-
-    if (hasColor && isValidGjsColor(iconEntry.color)) {
-        return `color: ${iconEntry.color}; border-bottom-color: ${iconEntry.color};`;
-    }
-
-    return '';
-};
-
-/**
- * Retrieves the application icon for a given workspace.
- *
- * This function returns the appropriate application icon for the specified workspace index.
- * It considers user-defined icons, default icons, and the option to remove duplicate icons.
- *
- * @param workspaceIndex The index of the workspace for which to retrieve the application icon.
- * @param removeDuplicateIcons A boolean indicating whether to remove duplicate icons.
- * @param options An object containing user-defined icon map, default icon, and empty icon.
- *
- * @returns The application icon for the workspace as a string. If no icons are found, returns the default or empty icon.
- */
-export const getAppIcon = (
-    workspaceIndex: number,
-    removeDuplicateIcons: boolean,
-    { iconMap: userDefinedIconMap, defaultIcon, emptyIcon }: AppIconOptions,
-): string => {
-    const workspaceClients = hyprlandService
-        .get_clients()
-        .filter((client) => client?.workspace?.id === workspaceIndex)
-        .map((client) => [client.class, client.title]);
-
-    if (!workspaceClients.length) {
-        return emptyIcon;
-    }
-
-    const findIconForClient = (clientClass: string, clientTitle: string): string | undefined => {
-        const appIconMap = { ...userDefinedIconMap, ...defaultApplicationIconMap };
-
-        const iconEntry = Object.entries(appIconMap).find(([matcher]) => {
-            if (matcher.startsWith('class:')) {
-                return new RegExp(matcher.substring(6)).test(clientClass);
-            }
-
-            if (matcher.startsWith('title:')) {
-                return new RegExp(matcher.substring(6)).test(clientTitle);
-            }
-
-            return new RegExp(matcher, 'i').test(clientClass);
-        });
-
-        return iconEntry?.[1] ?? defaultIcon;
-    };
-
-    let icons = workspaceClients.reduce((iconAccumulator, [clientClass, clientTitle]) => {
-        const icon = findIconForClient(clientClass, clientTitle);
-
-        if (icon !== undefined) {
-            iconAccumulator.push(icon);
+            setTimeout(() => {
+                isThrottleActive = false;
+            }, limit);
         }
-
-        return iconAccumulator;
-    }, []);
-
-    if (icons.length) {
-        if (removeDuplicateIcons) {
-            icons = [...new Set(icons)];
-        }
-
-        return icons.join(' ');
-    }
-
-    return defaultIcon;
-};
+    } as T;
+}
 
 /**
- * Renders the class names for a workspace.
+ * Creates throttled scroll handlers that navigate workspaces upon scrolling, respecting the configured scroll speed.
  *
- * This function generates the appropriate class names for a workspace based on various settings such as
- * whether to show icons, numbered workspaces, workspace icons, and smart highlighting.
+ * @param scrollSpeed - The factor by which the scroll navigation is throttled.
+ * @param onlyActiveWorkspaces - Whether to only navigate among active (occupied) workspaces.
  *
- * @param showIcons A boolean indicating whether to show icons.
- * @param showNumbered A boolean indicating whether to show numbered workspaces.
- * @param numberedActiveIndicator The indicator for active numbered workspaces.
- * @param showWsIcons A boolean indicating whether to show workspace icons.
- * @param smartHighlight A boolean indicating whether smart highlighting is enabled.
- * @param monitor The index of the monitor to check for active workspaces.
- * @param i The index of the workspace for which to render class names.
- *
- * @returns The class names for the workspace as a string.
+ * @returns An object containing two functions (`throttledScrollUp` and `throttledScrollDown`), both throttled.
  */
-export const renderClassnames = (
-    showIcons: boolean,
-    showNumbered: boolean,
-    numberedActiveIndicator: string,
-    showWsIcons: boolean,
-    smartHighlight: boolean,
-    monitor: number,
-    i: number,
-): string => {
-    const isWorkspaceActive =
-        hyprlandService.focusedWorkspace?.id === i || isWorkspaceActiveOnMonitor(monitor, i);
-    const isActive = isWorkspaceActive ? 'active' : '';
+export function initThrottledScrollHandlers(scrollSpeed: number): ThrottledScrollHandlers {
+    const throttledScrollUp = throttle(() => {
+        if (reverse_scroll.get()) {
+            workspaceService.goToPreviousWorkspace();
+        } else {
+            workspaceService.goToNextWorkspace();
+        }
+    }, 200 / scrollSpeed);
 
-    if (showIcons) {
-        return `workspace-icon txt-icon bar ${isActive}`;
-    }
+    const throttledScrollDown = throttle(() => {
+        if (reverse_scroll.get()) {
+            workspaceService.goToNextWorkspace();
+        } else {
+            workspaceService.goToPreviousWorkspace();
+        }
+    }, 200 / scrollSpeed);
 
-    if (showNumbered || showWsIcons) {
-        const numActiveInd = isWorkspaceActive ? numberedActiveIndicator : '';
-
-        const wsIconClass = showWsIcons ? 'txt-icon' : '';
-        const smartHighlightClass = smartHighlight ? 'smart-highlight' : '';
-
-        const className = `workspace-number can_${numberedActiveIndicator} ${numActiveInd} ${wsIconClass} ${smartHighlightClass} ${isActive}`;
-
-        return className.trim();
-    }
-
-    return `default ${isActive}`;
-};
+    return { throttledScrollUp, throttledScrollDown };
+}
 
 /**
- * Renders the label for a workspace.
+ * Subscribes to Hyprland service events related to workspaces to keep the local state updated.
  *
- * This function generates the appropriate label for a workspace based on various settings such as
- * whether to show icons, application icons, workspace icons, and workspace indicators.
- *
- * @param showIcons A boolean indicating whether to show icons.
- * @param availableIndicator The indicator for available workspaces.
- * @param activeIndicator The indicator for active workspaces.
- * @param occupiedIndicator The indicator for occupied workspaces.
- * @param showAppIcons A boolean indicating whether to show application icons.
- * @param appIcons The application icons as a string.
- * @param workspaceMask A boolean indicating whether to mask the workspace.
- * @param showWorkspaceIcons A boolean indicating whether to show workspace icons.
- * @param wsIconMap The map of workspace icons where keys are workspace indices and values are icons or icon objects.
- * @param i The index of the workspace for which to render the label.
- * @param index The index of the workspace in the list.
- * @param monitor The index of the monitor to check for active workspaces.
- *
- * @returns The label for the workspace as a string.
+ * When certain events occur (like a configuration reload or a client being moved/added/removed),
+ * this function updates the workspace rules or toggles the `forceUpdater` variable to ensure
+ * that any dependent UI or logic is re-rendered or re-run.
  */
-export const renderLabel = (
-    showIcons: boolean,
-    availableIndicator: string,
-    activeIndicator: string,
-    occupiedIndicator: string,
-    showAppIcons: boolean,
-    appIcons: string,
-    workspaceMask: boolean,
-    showWorkspaceIcons: boolean,
-    wsIconMap: WorkspaceIconMap,
-    i: number,
-    index: number,
-    monitor: number,
-): string => {
-    if (showAppIcons) {
-        return appIcons;
-    }
+export function initWorkspaceEvents(): void {
+    hyprlandService.connect('config-reloaded', () => {
+        workspaceService.refreshWorkspaceRules();
+    });
 
-    if (showIcons) {
-        if (hyprlandService.focusedWorkspace?.id === i || isWorkspaceActiveOnMonitor(monitor, i)) {
-            return activeIndicator;
-        }
-        if ((hyprlandService.get_workspace(i)?.get_clients().length || 0) > 0) {
-            return occupiedIndicator;
-        }
-        if (monitor !== -1) {
-            return availableIndicator;
-        }
-    }
+    hyprlandService.connect('client-moved', () => {
+        workspaceService.forceAnUpdate();
+    });
 
-    if (showWorkspaceIcons) {
-        return getWsIcon(wsIconMap, i);
-    }
+    hyprlandService.connect('client-added', () => {
+        workspaceService.forceAnUpdate();
+    });
 
-    return workspaceMask ? `${index + 1}` : `${i}`;
+    hyprlandService.connect('client-removed', () => {
+        workspaceService.forceAnUpdate();
+    });
+}
+
+/**
+ * Throttled scroll handler functions for navigating workspaces.
+ */
+type ThrottledScrollHandlers = {
+    /**
+     * Scroll up throttled handler.
+     */
+    throttledScrollUp: () => void;
+
+    /**
+     * Scroll down throttled handler.
+     */
+    throttledScrollDown: () => void;
 };
diff --git a/src/components/bar/modules/workspaces/index.tsx b/src/components/bar/modules/workspaces/index.tsx
index bf33a1c..0d83e0b 100644
--- a/src/components/bar/modules/workspaces/index.tsx
+++ b/src/components/bar/modules/workspaces/index.tsx
@@ -1,11 +1,10 @@
-import options from 'src/options';
-import { initThrottledScrollHandlers } from './helpers';
+import { initThrottledScrollHandlers } from './helpers/utils';
 import { WorkspaceModule } from './workspaces';
 import { bind, Variable } from 'astal';
 import { Astal, Gdk } from 'astal/gtk3';
-import { isScrollDown, isScrollUp } from 'src/lib/utils';
-import { BarBoxChild } from 'src/lib/types/bar.types';
-import { GtkWidget } from 'src/lib/types/widget.types';
+import options from 'src/configuration';
+import { isScrollUp, isScrollDown } from 'src/lib/events/mouse';
+import { BarBoxChild, GtkWidget } from 'src/components/bar/types';
 
 const { scroll_speed } = options.bar.workspaces;
 
diff --git a/src/components/bar/modules/workspaces/types.ts b/src/components/bar/modules/workspaces/types.ts
new file mode 100644
index 0000000..b52badd
--- /dev/null
+++ b/src/components/bar/modules/workspaces/types.ts
@@ -0,0 +1,15 @@
+export type WorkspaceIcons = {
+    [key: string]: string;
+};
+
+export type WorkspaceIconsColored = {
+    [key: string]: {
+        color: string;
+        icon: string;
+    };
+};
+export type ApplicationIcons = {
+    [key: string]: string;
+};
+
+export type WorkspaceIconMap = WorkspaceIcons | WorkspaceIconsColored;
diff --git a/src/components/bar/modules/workspaces/workspaces.tsx b/src/components/bar/modules/workspaces/workspaces.tsx
index 8be5a2c..8b1fe17 100644
--- a/src/components/bar/modules/workspaces/workspaces.tsx
+++ b/src/components/bar/modules/workspaces/workspaces.tsx
@@ -1,11 +1,14 @@
-import options from 'src/options';
-import { forceUpdater, getWorkspacesToRender, initWorkspaceEvents, workspaceRules } from './helpers';
-import { getAppIcon, getWsColor, renderClassnames, renderLabel } from './helpers/utils';
+import { initWorkspaceEvents } from './helpers/utils';
+import { getAppIcon, getWsColor, renderClassnames, renderLabel } from './helpers';
 import { bind, Variable } from 'astal';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
 import { Gtk } from 'astal/gtk3';
-import { isPrimaryClick } from 'src/lib/utils';
-import { WorkspaceIconMap, ApplicationIcons } from 'src/lib/types/workspace.types';
+import { WorkspaceService } from 'src/services/workspace';
+import options from 'src/configuration';
+import { isPrimaryClick } from 'src/lib/events/mouse';
+import { WorkspaceIconMap, ApplicationIcons } from './types';
+
+const workspaceService = WorkspaceService.getInstance();
 
 const hyprlandService = AstalHyprland.get_default();
 const {
@@ -61,8 +64,8 @@ export const WorkspaceModule = ({ monitor }: WorkspaceModuleProps): JSX.Element
             bind(ignored),
             bind(showAllActive),
             bind(hyprlandService, 'focusedWorkspace'),
-            bind(workspaceRules),
-            bind(forceUpdater),
+            bind(workspaceService.workspaceRules),
+            bind(workspaceService.forceUpdater),
         ],
         (
             isMonitorSpecific: boolean,
@@ -88,10 +91,11 @@ export const WorkspaceModule = ({ monitor }: WorkspaceModuleProps): JSX.Element
             clients: AstalHyprland.Client[],
             monitorList: AstalHyprland.Monitor[],
         ) => {
-            const workspacesToRender = getWorkspacesToRender(
+            const wsRules = workspaceService.workspaceRules.get();
+            const workspacesToRender = workspaceService.getWorkspaces(
                 totalWorkspaces,
                 workspaceList,
-                workspaceRules.get(),
+                wsRules,
                 monitor,
                 isMonitorSpecific,
                 monitorList,
diff --git a/src/components/bar/modules/worldclock/index.tsx b/src/components/bar/modules/worldclock/index.tsx
index 8693108..ae0cd51 100644
--- a/src/components/bar/modules/worldclock/index.tsx
+++ b/src/components/bar/modules/worldclock/index.tsx
@@ -1,11 +1,13 @@
-import options from 'src/options';
-import { inputHandler } from 'src/components/bar/utils/helpers.js';
 import { bind, Variable } from 'astal';
 import { Astal } from 'astal/gtk3';
-import { systemTime } from 'src/shared/time';
+import { systemTime } from 'src/lib/units/time';
 import { GLib } from 'astal';
-import { Module } from '../../shared/Module';
-import { BarBoxChild } from 'src/lib/types/bar.types';
+import { Module } from '../../shared/module';
+import { BarBoxChild } from 'src/components/bar/types';
+import options from 'src/configuration';
+import { InputHandlerService } from '../../utils/input/inputHandler';
+
+const inputHandler = InputHandlerService.getInstance();
 
 const {
     format,
@@ -51,13 +53,15 @@ export const WorldClock = (): BarBoxChild => {
                 .join(timeDivider),
     );
 
+    let inputHandlerBindings: Variable<void>;
+
     const microphoneModule = Module({
         textIcon: iconBinding(),
         label: timeBinding(),
         boxClass: 'worldclock',
         props: {
             setup: (self: Astal.Button) => {
-                inputHandler(self, {
+                inputHandlerBindings = inputHandler.attachHandlers(self, {
                     onPrimaryClick: {
                         cmd: leftClick,
                     },
@@ -75,6 +79,11 @@ export const WorldClock = (): BarBoxChild => {
                     },
                 });
             },
+            onDestroy: () => {
+                inputHandlerBindings.drop();
+                timeBinding.drop();
+                iconBinding.drop();
+            },
         },
     });
 
diff --git a/src/components/bar/settings/config.tsx b/src/components/bar/settings/config.tsx
index 35bfd1b..9f9d036 100644
--- a/src/components/bar/settings/config.tsx
+++ b/src/components/bar/settings/config.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
-import options from 'src/options';
 import { Gtk } from 'astal/gtk3';
+import options from 'src/configuration';
 
 export const CustomModuleSettings = (): JSX.Element => {
     return (
@@ -176,6 +176,12 @@ export const CustomModuleSettings = (): JSX.Element => {
 
                 {/* Storage Section */}
                 <Header title="Storage" />
+                <Option
+                    opt={options.bar.customModules.storage.paths}
+                    title="Paths to Monitor"
+                    subtitle="Paths must be absolute paths"
+                    type="object"
+                />
                 <Option
                     opt={options.theme.bar.buttons.modules.storage.enableBorder}
                     title="Button Border"
@@ -194,6 +200,19 @@ export const CustomModuleSettings = (): JSX.Element => {
                     type="enum"
                     enums={['used/total', 'used', 'free', 'percentage']}
                 />
+                <Option
+                    opt={options.bar.customModules.storage.units}
+                    title="Unit of measurement"
+                    type="enum"
+                    enums={['auto', 'bytes', 'kibibytes', 'mebibytes', 'gibibytes', 'tebibytes']}
+                />
+                <Option
+                    opt={options.bar.customModules.storage.tooltipStyle}
+                    title="Tooltip Style"
+                    subtitle="Choose how drive information is displayed in the tooltip"
+                    type="enum"
+                    enums={['percentage-bar', 'tree', 'simple']}
+                />
                 <Option opt={options.bar.customModules.storage.round} title="Round" type="boolean" />
                 <Option
                     opt={options.bar.customModules.storage.pollingInterval}
diff --git a/src/components/bar/settings/theme.tsx b/src/components/bar/settings/theme.tsx
index aa015cf..1014859 100644
--- a/src/components/bar/settings/theme.tsx
+++ b/src/components/bar/settings/theme.tsx
@@ -1,8 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
-
-import options from 'src/options';
 import { Gtk } from 'astal/gtk3';
+import options from 'src/configuration';
 
 export const CustomModuleTheme = (): JSX.Element => {
     return (
diff --git a/src/components/bar/shared/Module.tsx b/src/components/bar/shared/module/index.tsx
similarity index 94%
rename from src/components/bar/shared/Module.tsx
rename to src/components/bar/shared/module/index.tsx
index add7fbb..cdb6fbf 100644
--- a/src/components/bar/shared/Module.tsx
+++ b/src/components/bar/shared/module/index.tsx
@@ -1,7 +1,7 @@
 import { bind, Variable } from 'astal';
-import { BarBoxChild, BarModuleProps } from 'src/lib/types/bar.types';
-import { BarButtonStyles } from 'src/lib/options/options.types';
-import options from 'src/options';
+import { BarBoxChild, BarModuleProps } from 'src/components/bar/types';
+import { BarButtonStyles } from 'src/lib/options/types';
+import options from 'src/configuration';
 
 const { style } = options.theme.bar.buttons;
 
diff --git a/src/components/bar/shared/WidgetContainer.tsx b/src/components/bar/shared/widgetContainer/index.tsx
similarity index 92%
rename from src/components/bar/shared/WidgetContainer.tsx
rename to src/components/bar/shared/widgetContainer/index.tsx
index 2c25c56..8070543 100644
--- a/src/components/bar/shared/WidgetContainer.tsx
+++ b/src/components/bar/shared/widgetContainer/index.tsx
@@ -1,6 +1,6 @@
-import { BarBoxChild } from 'src/lib/types/bar.types';
-import options from '../../../options';
+import { BarBoxChild } from 'src/components/bar/types';
 import { bind, Binding } from 'astal';
+import options from 'src/configuration';
 
 const computeVisible = (child: BarBoxChild): Binding<boolean> | boolean => {
     if (child.isVis !== undefined) {
diff --git a/src/lib/types/bar.types.ts b/src/components/bar/types.ts
similarity index 50%
rename from src/lib/types/bar.types.ts
rename to src/components/bar/types.ts
index a951a02..36f08cb 100644
--- a/src/lib/types/bar.types.ts
+++ b/src/components/bar/types.ts
@@ -1,7 +1,6 @@
-import { Widget } from 'astal/gtk3';
-import { Binding, Variable } from 'astal';
+import { Astal, Gdk, Gtk, Widget } from 'astal/gtk3';
+import { Binding } from 'astal';
 import { Connectable } from 'astal/binding';
-import { BoxWidget } from './widget.types';
 import { Label } from 'astal/gtk3/widget';
 
 export type BarBoxChild = {
@@ -13,8 +12,8 @@ export type BarBoxChild = {
     tooltip_text?: string | Binding<string>;
 } & ({ isBox: true; props: Widget.EventBoxProps } | { isBox?: false; props: Widget.ButtonProps });
 
-export type BoxHook = (self: BoxWidget) => void;
-export type LabelHook = (self: Label) => void;
+type BoxHook = (self: Gtk.Box) => void;
+type LabelHook = (self: Label) => void;
 
 export type BarModuleProps = {
     icon?: string | Binding<string>;
@@ -35,7 +34,24 @@ export type BarModuleProps = {
     connection?: Binding<Connectable>;
 };
 
-export type ResourceLabelType = 'used/total' | 'used' | 'percentage' | 'free';
+interface WidgetProps {
+    onPrimaryClick?: (clicked: GtkWidget, event: Gdk.EventButton) => void;
+    onSecondaryClick?: (clicked: GtkWidget, event: Gdk.EventButton) => void;
+    onMiddleClick?: (clicked: GtkWidget, event: Gdk.EventButton) => void;
+    onScrollUp?: (clicked: GtkWidget, event: Gdk.EventScroll) => void;
+    onScrollDown?: (clicked: GtkWidget, event: Gdk.EventScroll) => void;
+    setup?: (self: GtkWidget) => void;
+}
 
-export type NetstatLabelType = 'full' | 'in' | 'out';
-export type RateUnit = 'GiB' | 'MiB' | 'KiB' | 'auto';
+interface GtkWidgetExtended extends Gtk.Widget {
+    props?: WidgetProps;
+    component?: JSX.Element;
+    primaryClick?: (clicked: GtkWidget, event: Astal.ClickEvent) => void;
+    isVisible?: boolean;
+    boxClass?: string;
+    isVis?: {
+        bind: (key: string) => Binding<boolean>;
+    };
+}
+
+export type GtkWidget = GtkWidgetExtended;
diff --git a/src/components/bar/utils/helpers.ts b/src/components/bar/utils/helpers.ts
deleted file mode 100644
index 5705c30..0000000
--- a/src/components/bar/utils/helpers.ts
+++ /dev/null
@@ -1,422 +0,0 @@
-import { bind, Binding, execAsync, Variable } from 'astal';
-import { openMenu } from 'src/components/bar/utils/menu';
-import options from 'src/options';
-import { Gdk } from 'astal/gtk3';
-import { onMiddleClick, onPrimaryClick, onSecondaryClick } from 'src/lib/shared/eventHandlers';
-import { isScrollDown, isScrollUp } from 'src/lib/utils';
-import { ResourceLabelType } from 'src/lib/types/bar.types';
-import { UpdateHandlers, Postfix, GenericResourceData } from 'src/lib/types/customModules/generic.types';
-import {
-    RunAsyncCommand,
-    InputHandlerEvents,
-    InputHandlerEventArgs,
-} from 'src/lib/types/customModules/utils.types';
-import { ThrottleFn } from 'src/lib/types/utils.types';
-import { GtkWidget } from 'src/lib/types/widget.types';
-
-const { scrollSpeed } = options.bar.customModules;
-
-const dummyVar = Variable('');
-
-/**
- * Handles the post input updater by toggling its value.
- *
- * This function checks if the `postInputUpdater` variable is defined. If it is, it toggles its value.
- *
- * @param postInputUpdater An optional Variable<boolean> that tracks the post input update state.
- */
-const handlePostInputUpdater = (postInputUpdater?: Variable<boolean>): void => {
-    if (postInputUpdater !== undefined) {
-        postInputUpdater.set(!postInputUpdater.get());
-    }
-};
-
-/**
- * Executes an asynchronous command and handles the result.
- *
- * This function runs a given command asynchronously using `execAsync`. If the command starts with 'menu:', it opens the specified menu.
- * Otherwise, it executes the command in a bash shell. After execution, it handles the post input updater and calls the provided callback function with the command output.
- *
- * @param cmd The command to execute.
- * @param events An object containing the clicked widget and event information.
- * @param fn An optional callback function to handle the command output.
- * @param postInputUpdater An optional Variable<boolean> that tracks the post input update state.
- */
-export const runAsyncCommand: RunAsyncCommand = (
-    cmd,
-    events,
-    fn,
-    postInputUpdater?: Variable<boolean>,
-): void => {
-    if (cmd.startsWith('menu:')) {
-        const menuName = cmd.split(':')[1].trim().toLowerCase();
-        openMenu(events.clicked, events.event, `${menuName}menu`);
-        handlePostInputUpdater(postInputUpdater);
-        return;
-    }
-
-    execAsync(['bash', '-c', cmd])
-        .then((output) => {
-            handlePostInputUpdater(postInputUpdater);
-            if (fn !== undefined) {
-                fn(output);
-            }
-        })
-        .catch((err) => console.error(`Error running command "${cmd}": ${err})`));
-};
-
-/*
- * NOTE: Added a throttle since spamming a button yields duplicate events
- * which undo the toggle.
- */
-const throttledAsyncCommand = throttleInput(
-    (cmd, events, fn, postInputUpdater?: Variable<boolean>) =>
-        runAsyncCommand(cmd, events, fn, postInputUpdater),
-    50,
-);
-
-/**
- * Generic throttle function to limit the rate at which a function can be called.
- *
- * This function creates a throttled version of the provided function that can only be called once within the specified limit.
- *
- * @param func The function to throttle.
- * @param limit The time limit in milliseconds.
- *
- * @returns The throttled function.
- */
-export function throttleInput<T extends ThrottleFn>(func: T, limit: number): T {
-    let inThrottle = false;
-    return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
-        if (!inThrottle) {
-            func.apply(this, args);
-            inThrottle = true;
-            setTimeout(() => {
-                inThrottle = false;
-            }, limit);
-        }
-    } as T;
-}
-
-/**
- * Creates a throttled scroll handler with the given interval.
- *
- * This function returns a throttled version of the `runAsyncCommand` function that can be called with the specified interval.
- *
- * @param interval The interval in milliseconds.
- *
- * @returns The throttled scroll handler function.
- */
-export const throttledScrollHandler = (interval: number): ThrottleFn =>
-    throttleInput((cmd: string, args, fn, postInputUpdater) => {
-        throttledAsyncCommand(cmd, args, fn, postInputUpdater);
-    }, 200 / interval);
-
-/**
- * Handles input events for a GtkWidget.
- *
- * This function sets up event handlers for primary, secondary, and middle clicks, as well as scroll events.
- * It uses the provided input handler events and post input updater to manage the input state.
- *
- * @param self The GtkWidget instance to handle input events for.
- * @param inputHandlerEvents An object containing the input handler events for primary, secondary, and middle clicks, as well as scroll up and down.
- * @param postInputUpdater An optional Variable<boolean> that tracks the post input update state.
- */
-export const inputHandler = (
-    self: GtkWidget,
-    {
-        onPrimaryClick: onPrimaryClickInput,
-        onSecondaryClick: onSecondaryClickInput,
-        onMiddleClick: onMiddleClickInput,
-        onScrollUp: onScrollUpInput,
-        onScrollDown: onScrollDownInput,
-    }: InputHandlerEvents,
-    postInputUpdater?: Variable<boolean>,
-    customScrollThreshold?: number,
-): void => {
-    const sanitizeInput = (input?: Variable<string>): string => {
-        if (input === undefined) {
-            return '';
-        }
-        return input.get();
-    };
-
-    const updateHandlers = (): UpdateHandlers => {
-        const interval = customScrollThreshold ?? scrollSpeed.get();
-        const throttledHandler = throttledScrollHandler(interval);
-
-        const disconnectPrimaryClick = onPrimaryClick(self, (clicked: GtkWidget, event: Gdk.Event) => {
-            throttledAsyncCommand(
-                sanitizeInput(onPrimaryClickInput?.cmd || dummyVar),
-                { clicked, event },
-                onPrimaryClickInput?.fn,
-                postInputUpdater,
-            );
-        });
-
-        const disconnectSecondaryClick = onSecondaryClick(self, (clicked: GtkWidget, event: Gdk.Event) => {
-            throttledAsyncCommand(
-                sanitizeInput(onSecondaryClickInput?.cmd || dummyVar),
-                { clicked, event },
-                onSecondaryClickInput?.fn,
-                postInputUpdater,
-            );
-        });
-
-        const disconnectMiddleClick = onMiddleClick(self, (clicked: GtkWidget, event: Gdk.Event) => {
-            throttledAsyncCommand(
-                sanitizeInput(onMiddleClickInput?.cmd || dummyVar),
-                { clicked, event },
-                onMiddleClickInput?.fn,
-                postInputUpdater,
-            );
-        });
-
-        const id = self.connect('scroll-event', (self: GtkWidget, event: Gdk.Event) => {
-            const handleScroll = (input?: InputHandlerEventArgs): void => {
-                if (input) {
-                    throttledHandler(
-                        sanitizeInput(input.cmd),
-                        { clicked: self, event },
-                        input.fn,
-                        postInputUpdater,
-                    );
-                }
-            };
-
-            if (isScrollUp(event)) {
-                handleScroll(onScrollUpInput);
-            }
-
-            if (isScrollDown(event)) {
-                handleScroll(onScrollDownInput);
-            }
-        });
-
-        return {
-            disconnectPrimary: disconnectPrimaryClick,
-            disconnectSecondary: disconnectSecondaryClick,
-            disconnectMiddle: disconnectMiddleClick,
-            disconnectScroll: () => self.disconnect(id),
-        };
-    };
-
-    updateHandlers();
-
-    const sanitizeVariable = (someVar?: Variable<string>): Binding<string> => {
-        if (someVar === undefined) {
-            return bind(dummyVar);
-        }
-        return bind(someVar);
-    };
-
-    Variable.derive(
-        [
-            bind(scrollSpeed),
-            sanitizeVariable(onPrimaryClickInput?.cmd),
-            sanitizeVariable(onSecondaryClickInput?.cmd),
-            sanitizeVariable(onMiddleClickInput?.cmd),
-            sanitizeVariable(onScrollUpInput?.cmd),
-            sanitizeVariable(onScrollDownInput?.cmd),
-        ],
-        () => {
-            const handlers = updateHandlers();
-
-            handlers.disconnectPrimary();
-            handlers.disconnectSecondary();
-            handlers.disconnectMiddle();
-            handlers.disconnectScroll();
-        },
-    )();
-};
-
-/**
- * Calculates the percentage of used resources.
- *
- * This function calculates the percentage of used resources based on the total and used values.
- * It can optionally round the result to the nearest integer.
- *
- * @param totalUsed An array containing the total and used values.
- * @param round A boolean indicating whether to round the result.
- *
- * @returns The percentage of used resources as a number.
- */
-export const divide = ([total, used]: number[], round: boolean): number => {
-    const percentageTotal = (used / total) * 100;
-    if (round) {
-        return total > 0 ? Math.round(percentageTotal) : 0;
-    }
-    return total > 0 ? parseFloat(percentageTotal.toFixed(2)) : 0;
-};
-
-/**
- * Formats a size in bytes to KiB.
- *
- * This function converts a size in bytes to kibibytes (KiB) and optionally rounds the result.
- *
- * @param sizeInBytes The size in bytes to format.
- * @param round A boolean indicating whether to round the result.
- *
- * @returns The size in KiB as a number.
- */
-export const formatSizeInKiB = (sizeInBytes: number, round: boolean): number => {
-    const sizeInGiB = sizeInBytes / 1024 ** 1;
-    return round ? Math.round(sizeInGiB) : parseFloat(sizeInGiB.toFixed(2));
-};
-
-/**
- * Formats a size in bytes to MiB.
- *
- * This function converts a size in bytes to mebibytes (MiB) and optionally rounds the result.
- *
- * @param sizeInBytes The size in bytes to format.
- * @param round A boolean indicating whether to round the result.
- *
- * @returns The size in MiB as a number.
- */
-export const formatSizeInMiB = (sizeInBytes: number, round: boolean): number => {
-    const sizeInGiB = sizeInBytes / 1024 ** 2;
-    return round ? Math.round(sizeInGiB) : parseFloat(sizeInGiB.toFixed(2));
-};
-
-/**
- * Formats a size in bytes to GiB.
- *
- * This function converts a size in bytes to gibibytes (GiB) and optionally rounds the result.
- *
- * @param sizeInBytes The size in bytes to format.
- * @param round A boolean indicating whether to round the result.
- *
- * @returns The size in GiB as a number.
- */
-export const formatSizeInGiB = (sizeInBytes: number, round: boolean): number => {
-    const sizeInGiB = sizeInBytes / 1024 ** 3;
-    return round ? Math.round(sizeInGiB) : parseFloat(sizeInGiB.toFixed(2));
-};
-
-/**
- * Formats a size in bytes to TiB.
- *
- * This function converts a size in bytes to tebibytes (TiB) and optionally rounds the result.
- *
- * @param sizeInBytes The size in bytes to format.
- * @param round A boolean indicating whether to round the result.
- *
- * @returns The size in TiB as a number.
- */
-export const formatSizeInTiB = (sizeInBytes: number, round: boolean): number => {
-    const sizeInGiB = sizeInBytes / 1024 ** 4;
-    return round ? Math.round(sizeInGiB) : parseFloat(sizeInGiB.toFixed(2));
-};
-
-/**
- * Automatically formats a size in bytes to the appropriate unit.
- *
- * This function converts a size in bytes to the most appropriate unit (TiB, GiB, MiB, KiB, or bytes) and optionally rounds the result.
- *
- * @param sizeInBytes The size in bytes to format.
- * @param round A boolean indicating whether to round the result.
- *
- * @returns The formatted size as a number.
- */
-export const autoFormatSize = (sizeInBytes: number, round: boolean): number => {
-    // auto convert to GiB, MiB, KiB, TiB, or bytes
-    if (sizeInBytes >= 1024 ** 4) return formatSizeInTiB(sizeInBytes, round);
-    if (sizeInBytes >= 1024 ** 3) return formatSizeInGiB(sizeInBytes, round);
-    if (sizeInBytes >= 1024 ** 2) return formatSizeInMiB(sizeInBytes, round);
-    if (sizeInBytes >= 1024 ** 1) return formatSizeInKiB(sizeInBytes, round);
-
-    return sizeInBytes;
-};
-
-/**
- * Retrieves the appropriate postfix for a size in bytes.
- *
- * This function returns the appropriate postfix (TiB, GiB, MiB, KiB, or B) for a given size in bytes.
- *
- * @param sizeInBytes The size in bytes to determine the postfix for.
- *
- * @returns The postfix as a string.
- */
-export const getPostfix = (sizeInBytes: number): Postfix => {
-    if (sizeInBytes >= 1024 ** 4) return 'TiB';
-    if (sizeInBytes >= 1024 ** 3) return 'GiB';
-    if (sizeInBytes >= 1024 ** 2) return 'MiB';
-    if (sizeInBytes >= 1024 ** 1) return 'KiB';
-
-    return 'B';
-};
-
-/**
- * Renders a resource label based on the label type and resource data.
- *
- * This function generates a resource label string based on the provided label type, resource data, and rounding option.
- * It formats the used, total, and free resource values and calculates the percentage if needed.
- *
- * @param lblType The type of label to render (used/total, used, free, or percentage).
- * @param rmUsg An object containing the resource usage data (used, total, percentage, and free).
- * @param round A boolean indicating whether to round the values.
- *
- * @returns The rendered resource label as a string.
- */
-export const renderResourceLabel = (
-    lblType: ResourceLabelType,
-    rmUsg: GenericResourceData,
-    round: boolean,
-): string => {
-    const { used, total, percentage, free } = rmUsg;
-
-    const formatFunctions = {
-        TiB: formatSizeInTiB,
-        GiB: formatSizeInGiB,
-        MiB: formatSizeInMiB,
-        KiB: formatSizeInKiB,
-        B: (size: number): number => size,
-    };
-
-    // Get the data in proper GiB, MiB, KiB, TiB, or bytes
-    const totalSizeFormatted = autoFormatSize(total, round);
-    // get the postfix: one of [TiB, GiB, MiB, KiB, B]
-    const postfix = getPostfix(total);
-
-    // Determine which format function to use
-    const formatUsed = formatFunctions[postfix] ?? formatFunctions['B'];
-    const usedSizeFormatted = formatUsed(used, round);
-
-    if (lblType === 'used/total') {
-        return `${usedSizeFormatted}/${totalSizeFormatted} ${postfix}`;
-    }
-    if (lblType === 'used') {
-        return `${autoFormatSize(used, round)} ${getPostfix(used)}`;
-    }
-    if (lblType === 'free') {
-        return `${autoFormatSize(free, round)} ${getPostfix(free)}`;
-    }
-
-    return `${percentage}%`;
-};
-
-/**
- * Formats a tooltip based on the data type and label type.
- *
- * This function generates a tooltip string based on the provided data type and label type.
- *
- * @param dataType The type of data to include in the tooltip.
- * @param lblTyp The type of label to format the tooltip for (used, free, used/total, or percentage).
- *
- * @returns The formatted tooltip as a string.
- */
-export const formatTooltip = (dataType: string, lblTyp: ResourceLabelType): string => {
-    switch (lblTyp) {
-        case 'used':
-            return `Used ${dataType}`;
-        case 'free':
-            return `Free ${dataType}`;
-        case 'used/total':
-            return `Used/Total ${dataType}`;
-        case 'percentage':
-            return `Percentage ${dataType} Usage`;
-        default:
-            return '';
-    }
-};
diff --git a/src/components/bar/utils/input/commandExecutor.ts b/src/components/bar/utils/input/commandExecutor.ts
new file mode 100644
index 0000000..66f72bf
--- /dev/null
+++ b/src/components/bar/utils/input/commandExecutor.ts
@@ -0,0 +1,53 @@
+import { execAsync, Variable } from 'astal';
+import { openDropdownMenu } from '../menu';
+import { EventArgs } from './types';
+
+/**
+ * Executes an asynchronous command and handles the result.
+ *
+ * This function runs a given command asynchronously using `execAsync`. If the command starts with 'menu:', it opens the specified menu.
+ * Otherwise, it executes the command in a bash shell. After execution, it handles the post input updater and calls the provided callback function with the command output.
+ *
+ * @param cmd The command to execute.
+ * @param events An object containing the clicked widget and event information.
+ * @param fn An optional callback function to handle the command output.
+ * @param postInputUpdater An optional Variable<boolean> that tracks the post input update state.
+ */
+export function runAsyncCommand(
+    cmd: string,
+    events: EventArgs,
+    fn?: (output: string) => void,
+    postInputUpdater?: Variable<boolean>,
+): void {
+    if (cmd.startsWith('menu:')) {
+        const menuName = cmd.split(':')[1].trim().toLowerCase();
+
+        openDropdownMenu(events.clicked, events.event, `${menuName}menu`);
+        handlePostInputUpdater(postInputUpdater);
+
+        return;
+    }
+
+    execAsync(['bash', '-c', cmd])
+        .then((output) => {
+            handlePostInputUpdater(postInputUpdater);
+
+            if (fn !== undefined) {
+                fn(output);
+            }
+        })
+        .catch((err) => console.error(`Error running command "${cmd}": ${err})`));
+}
+
+/**
+ * Handles the post input updater by toggling its value.
+ *
+ * This function checks if the `postInputUpdater` variable is defined. If it is, it toggles its value.
+ *
+ * @param postInputUpdater An optional Variable<boolean> that tracks the post input update state.
+ */
+function handlePostInputUpdater(postInputUpdater?: Variable<boolean>): void {
+    if (postInputUpdater !== undefined) {
+        postInputUpdater.set(!postInputUpdater.get());
+    }
+}
diff --git a/src/components/bar/utils/input/inputHandler.ts b/src/components/bar/utils/input/inputHandler.ts
new file mode 100644
index 0000000..c6502de
--- /dev/null
+++ b/src/components/bar/utils/input/inputHandler.ts
@@ -0,0 +1,228 @@
+import { bind, Binding, Variable } from 'astal';
+import { onMiddleClick, onPrimaryClick, onSecondaryClick } from 'src/lib/shared/eventHandlers';
+import { Gdk } from 'astal/gtk3';
+import { isScrollDown, isScrollUp } from 'src/lib/events/mouse';
+import { throttledAsyncCommand, throttledScrollHandler } from './throttle';
+import options from 'src/configuration';
+import { InputHandlerEventArgs, InputHandlerEvents, UpdateHandlers } from './types';
+import { GtkWidget } from '../../types';
+
+type EventType = 'primary' | 'secondary' | 'middle';
+type ClickHandler = typeof onPrimaryClick | typeof onSecondaryClick | typeof onMiddleClick;
+
+interface EventConfig {
+    event?: InputHandlerEventArgs;
+    handler: ClickHandler;
+}
+
+/**
+ * Service responsible for managing input userDefinedActions for widgets
+ */
+export class InputHandlerService {
+    private static _instance: InputHandlerService;
+    private readonly _EMPTY_CMD = Variable('');
+    private readonly _scrollSpeed = options.bar.customModules.scrollSpeed;
+
+    private constructor() {}
+
+    public static getInstance(): InputHandlerService {
+        if (this._instance === undefined) {
+            this._instance = new InputHandlerService();
+        }
+
+        return this._instance;
+    }
+
+    /**
+     * Attaches input handlers to a widget and manages their lifecycle
+     */
+    public attachHandlers(
+        widget: GtkWidget,
+        userDefinedActions: InputHandlerEvents,
+        postInputUpdater?: Variable<boolean>,
+        customScrollThreshold?: number,
+    ): Variable<void> {
+        const eventHandlers = this._createEventHandlers(
+            widget,
+            userDefinedActions,
+            postInputUpdater,
+            customScrollThreshold,
+        );
+
+        return this._setupBindings(
+            widget,
+            userDefinedActions,
+            eventHandlers,
+            postInputUpdater,
+            customScrollThreshold,
+        );
+    }
+
+    /**
+     * Creates event handlers for the widget
+     */
+    private _createEventHandlers(
+        widget: GtkWidget,
+        userDefinedActions: InputHandlerEvents,
+        postInputUpdater?: Variable<boolean>,
+        customScrollThreshold?: number,
+    ): UpdateHandlers {
+        const clickHandlers = this._createClickHandlers(widget, userDefinedActions, postInputUpdater);
+        const scrollHandler = this._createScrollHandler(
+            widget,
+            userDefinedActions,
+            postInputUpdater,
+            customScrollThreshold,
+        );
+
+        return {
+            ...clickHandlers,
+            ...scrollHandler,
+        };
+    }
+
+    /**
+     * Creates click event handlers (primary, secondary, middle)
+     */
+    private _createClickHandlers(
+        widget: GtkWidget,
+        userDefinedActions: InputHandlerEvents,
+        postInputUpdater?: Variable<boolean>,
+    ): Pick<UpdateHandlers, 'disconnectPrimary' | 'disconnectSecondary' | 'disconnectMiddle'> {
+        const eventConfigs: Record<EventType, EventConfig> = {
+            primary: { event: userDefinedActions.onPrimaryClick, handler: onPrimaryClick },
+            secondary: { event: userDefinedActions.onSecondaryClick, handler: onSecondaryClick },
+            middle: { event: userDefinedActions.onMiddleClick, handler: onMiddleClick },
+        };
+
+        return {
+            disconnectPrimary: this._createClickHandler(widget, eventConfigs.primary, postInputUpdater),
+            disconnectSecondary: this._createClickHandler(widget, eventConfigs.secondary, postInputUpdater),
+            disconnectMiddle: this._createClickHandler(widget, eventConfigs.middle, postInputUpdater),
+        };
+    }
+
+    /**
+     * Creates a single click handler
+     */
+    private _createClickHandler(
+        widget: GtkWidget,
+        config: EventConfig,
+        postInputUpdater?: Variable<boolean>,
+    ): () => void {
+        return config.handler(widget, (clicked: GtkWidget, event: Gdk.Event) => {
+            throttledAsyncCommand(
+                this._sanitizeInput(config.event?.cmd),
+                { clicked, event },
+                config.event?.fn,
+                postInputUpdater,
+            );
+        });
+    }
+
+    /**
+     * Creates scroll event handler
+     */
+    private _createScrollHandler(
+        widget: GtkWidget,
+        userDefinedActions: InputHandlerEvents,
+        postInputUpdater?: Variable<boolean>,
+        customScrollThreshold?: number,
+    ): Pick<UpdateHandlers, 'disconnectScroll'> {
+        const interval = customScrollThreshold ?? this._scrollSpeed.get();
+        const throttledHandler = throttledScrollHandler(interval);
+
+        const id = widget.connect('scroll-event', (self: GtkWidget, event: Gdk.Event) => {
+            const scrollAction = this._getScrollAction(event, userDefinedActions);
+
+            if (scrollAction) {
+                throttledHandler(
+                    this._sanitizeInput(scrollAction.cmd),
+                    { clicked: self, event },
+                    scrollAction.fn,
+                    postInputUpdater,
+                );
+            }
+        });
+
+        return {
+            disconnectScroll: () => widget.disconnect(id),
+        };
+    }
+
+    /**
+     * Determines which scroll configuration to use based on event
+     */
+    private _getScrollAction(
+        event: Gdk.Event,
+        userDefinedActions: InputHandlerEvents,
+    ): InputHandlerEventArgs | undefined {
+        if (isScrollUp(event)) {
+            return userDefinedActions.onScrollUp;
+        }
+
+        if (isScrollDown(event)) {
+            return userDefinedActions.onScrollDown;
+        }
+    }
+
+    /**
+     * Sets up reactive bindings that recreate handlers when dependencies change
+     */
+    private _setupBindings(
+        widget: GtkWidget,
+        userDefinedActions: InputHandlerEvents,
+        handlers: UpdateHandlers,
+        postInputUpdater?: Variable<boolean>,
+        customScrollThreshold?: number,
+    ): Variable<void> {
+        const eventCommands = [
+            userDefinedActions.onPrimaryClick?.cmd,
+            userDefinedActions.onSecondaryClick?.cmd,
+            userDefinedActions.onMiddleClick?.cmd,
+            userDefinedActions.onScrollUp?.cmd,
+            userDefinedActions.onScrollDown?.cmd,
+        ];
+
+        const eventCommandBindings = eventCommands.map((cmd) => this._sanitizeVariable(cmd));
+
+        return Variable.derive([bind(this._scrollSpeed), ...eventCommandBindings], () => {
+            this._disconnectHandlers(handlers);
+
+            const newHandlers = this._createEventHandlers(
+                widget,
+                userDefinedActions,
+                postInputUpdater,
+                customScrollThreshold,
+            );
+
+            Object.assign(handlers, newHandlers);
+        });
+    }
+
+    /**
+     * Disconnects all event handlers
+     */
+    private _disconnectHandlers(handlers: UpdateHandlers): void {
+        handlers.disconnectPrimary();
+        handlers.disconnectSecondary();
+        handlers.disconnectMiddle();
+        handlers.disconnectScroll();
+    }
+
+    /**
+     * Sanitizes a variable input to a string
+     */
+    private _sanitizeInput(input?: Variable<string> | undefined): string {
+        if (!input) return '';
+
+        return input.get();
+    }
+
+    /**
+     * Sanitizes a variable for binding
+     */
+    private _sanitizeVariable(variable?: Variable<string> | undefined): Binding<string> {
+        return bind(variable ?? this._EMPTY_CMD);
+    }
+}
diff --git a/src/components/bar/utils/input/throttle.ts b/src/components/bar/utils/input/throttle.ts
new file mode 100644
index 0000000..73c22a3
--- /dev/null
+++ b/src/components/bar/utils/input/throttle.ts
@@ -0,0 +1,50 @@
+import { Variable } from 'astal';
+import { runAsyncCommand } from './commandExecutor';
+import { ThrottleFn } from 'src/lib/shared/eventHandlers/types';
+
+/**
+ * Generic throttle function to limit the rate at which a function can be called.
+ *
+ * This function creates a throttled version of the provided function that can only be called once within the specified limit.
+ *
+ * @param func The function to throttle.
+ * @param limit The time limit in milliseconds.
+ *
+ * @returns The throttled function.
+ */
+export function throttleInput<T extends ThrottleFn>(func: T, limit: number): T {
+    let inThrottle = false;
+    return function (this: ThisParameterType<T>, ...args: Parameters<T>) {
+        if (!inThrottle) {
+            func.apply(this, args);
+            inThrottle = true;
+            setTimeout(() => {
+                inThrottle = false;
+            }, limit);
+        }
+    } as T;
+}
+
+/**
+ * Creates a throttled scroll handler with the given interval.
+ *
+ * This function returns a throttled version of the `runAsyncCommand` function that can be called with the specified interval.
+ *
+ * @param interval The interval in milliseconds.
+ *
+ * @returns The throttled scroll handler function.
+ */
+export const throttledScrollHandler = (interval: number): ThrottleFn =>
+    throttleInput((cmd: string, args, fn, postInputUpdater) => {
+        throttledAsyncCommand(cmd, args, fn, postInputUpdater);
+    }, 200 / interval);
+
+/*
+ * NOTE: Added a throttle since spamming a button yields duplicate events
+ * which undo the toggle.
+ */
+export const throttledAsyncCommand = throttleInput(
+    (cmd, events, fn, postInputUpdater?: Variable<boolean>) =>
+        runAsyncCommand(cmd, events, fn, postInputUpdater),
+    50,
+);
diff --git a/src/lib/types/customModules/utils.types.ts b/src/components/bar/utils/input/types.ts
similarity index 57%
rename from src/lib/types/customModules/utils.types.ts
rename to src/components/bar/utils/input/types.ts
index aaefc92..927da2a 100644
--- a/src/lib/types/customModules/utils.types.ts
+++ b/src/components/bar/utils/input/types.ts
@@ -1,6 +1,19 @@
 import { Variable } from 'astal';
-import { EventArgs } from '../widget.types';
+import { Gdk } from 'astal/gtk3';
 import { Opt } from 'src/lib/options';
+import { GtkWidget } from '../../types';
+
+export type EventArgs = {
+    clicked: GtkWidget;
+    event: Gdk.Event;
+};
+
+export type UpdateHandlers = {
+    disconnectPrimary: () => void;
+    disconnectSecondary: () => void;
+    disconnectMiddle: () => void;
+    disconnectScroll: () => void;
+};
 
 export type InputHandlerEventArgs = {
     cmd?: Opt<string> | Variable<string>;
@@ -13,10 +26,3 @@ export type InputHandlerEvents = {
     onScrollUp?: InputHandlerEventArgs;
     onScrollDown?: InputHandlerEventArgs;
 };
-
-export type RunAsyncCommand = (
-    cmd: string,
-    args: EventArgs,
-    fn?: (output: string) => void,
-    postInputUpdater?: Variable<boolean>,
-) => void;
diff --git a/src/components/bar/utils/menu.ts b/src/components/bar/utils/menu/index.ts
similarity index 53%
rename from src/components/bar/utils/menu.ts
rename to src/components/bar/utils/menu/index.ts
index 9e2e222..bdc28c7 100644
--- a/src/components/bar/utils/menu.ts
+++ b/src/components/bar/utils/menu/index.ts
@@ -1,41 +1,24 @@
 import { App, Gdk } from 'astal/gtk3';
-import { GtkWidget } from 'src/lib/types/widget.types';
-import { calculateMenuPosition } from 'src/components/menus/shared/dropdown/locationHandler';
-
-export const closeAllMenus = (): void => {
-    const menuWindows = App.get_windows()
-        .filter((w) => {
-            if (w.name) {
-                return /.*menu/.test(w.name);
-            }
-
-            return false;
-        })
-        .map((window) => window.name);
-
-    menuWindows.forEach((window) => {
-        if (window) {
-            App.get_window(window)?.set_visible(false);
-        }
-    });
-};
-
-export const openMenu = async (clicked: GtkWidget, event: Gdk.Event, window: string): Promise<void> => {
-    /*
-     * NOTE: We have to make some adjustments so the menu pops up relatively
-     * to the center of the button clicked. We don't want the menu to spawn
-     * offcenter depending on which edge of the button you click on.
-     * -------------
-     * To fix this, we take the x coordinate of the click within the button's bounds.
-     * If you click the left edge of a 100 width button, then the x axis will be 0
-     * and if you click the right edge then the x axis will be 100.
-     * -------------
-     * Then we divide the width of the button by 2 to get the center of the button and then get
-     * the offset by subtracting the clicked x coordinate. Then we can apply that offset
-     * to the x coordinate of the click relative to the screen to get the center of the
-     * icon click.
-     */
+import { calculateMenuPosition } from 'src/components/menus/shared/dropdown/helpers/locationHandler';
+import { GtkWidget } from '../../types';
 
+/**
+ * Opens a dropdown menu centered relative to the clicked button
+ *
+ * This function handles the positioning logic to ensure menus appear centered
+ * relative to the button that was clicked, regardless of where on the button
+ * the click occurred. It calculates the offset needed to center the menu
+ * based on the click position within the button's bounds.
+ *
+ * @param clicked - The widget that was clicked to trigger the menu
+ * @param event - The click event containing position information
+ * @param window - The name of the menu window to open
+ */
+export const openDropdownMenu = async (
+    clicked: GtkWidget,
+    event: Gdk.Event,
+    window: string,
+): Promise<void> => {
     try {
         const middleOfButton = Math.floor(clicked.get_allocated_width() / 2);
         const xAxisOfButtonClick = clicked.get_pointer()[0];
@@ -57,3 +40,28 @@ export const openMenu = async (clicked: GtkWidget, event: Gdk.Event, window: str
         }
     }
 };
+
+/**
+ * Closes all currently open menu windows
+ *
+ * This function finds all windows whose names contain "menu" and
+ * hides them. It's used to ensure only one menu is open at a time
+ * when opening a new dropdown menu.
+ */
+function closeAllMenus(): void {
+    const menuWindows = App.get_windows()
+        .filter((w) => {
+            if (w.name) {
+                return /.*menu/.test(w.name);
+            }
+
+            return false;
+        })
+        .map((window) => window.name);
+
+    menuWindows.forEach((window) => {
+        if (window) {
+            App.get_window(window)?.set_visible(false);
+        }
+    });
+}
diff --git a/src/components/bar/utils/monitors.ts b/src/components/bar/utils/monitors/index.ts
similarity index 66%
rename from src/components/bar/utils/monitors.ts
rename to src/components/bar/utils/monitors/index.ts
index 18cd8d6..462b0dd 100644
--- a/src/components/bar/utils/monitors.ts
+++ b/src/components/bar/utils/monitors/index.ts
@@ -1,4 +1,6 @@
-import { BarLayout, BarLayouts } from 'src/lib/options/options.types';
+import { Gdk } from 'astal/gtk3';
+import { range } from 'src/lib/array/helpers';
+import { BarLayout, BarLayouts } from 'src/lib/options/types';
 
 /**
  * Returns the bar layout configuration for a specific monitor
@@ -39,3 +41,19 @@ export const isLayoutEmpty = (layout: BarLayout): boolean => {
 
     return isLeftSectionEmpty && isRightSectionEmpty && isMiddleSectionEmpty;
 };
+
+/**
+ * Generates an array of JSX elements for each monitor.
+ *
+ * This function creates an array of JSX elements by calling the provided widget function for each monitor.
+ * It uses the number of monitors available in the default Gdk display.
+ *
+ * @param widget A function that takes a monitor index and returns a JSX element.
+ *
+ * @returns An array of JSX elements, one for each monitor.
+ */
+export async function forMonitors(widget: (monitor: number) => Promise<JSX.Element>): Promise<JSX.Element[]> {
+    const n = Gdk.Display.get_default()?.get_n_monitors() ?? 1;
+
+    return Promise.all(range(n, 0).map(widget));
+}
diff --git a/src/components/bar/utils/sideEffects.ts b/src/components/bar/utils/sideEffects.ts
deleted file mode 100644
index 6e1b3ce..0000000
--- a/src/components/bar/utils/sideEffects.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import options from '../../../options';
-
-const { showIcon, showTime } = options.bar.clock;
-
-showIcon.subscribe(() => {
-    if (!showTime.get() && !showIcon.get()) {
-        showTime.set(true);
-    }
-});
-
-showTime.subscribe(() => {
-    if (!showTime.get() && !showIcon.get()) {
-        showIcon.set(true);
-    }
-});
-
-const { label, icon } = options.bar.windowtitle;
-
-label.subscribe(() => {
-    if (!label.get() && !icon.get()) {
-        icon.set(true);
-    }
-});
-
-icon.subscribe(() => {
-    if (!label.get() && !icon.get()) {
-        label.set(true);
-    }
-});
diff --git a/src/components/bar/utils/systemResource/index.ts b/src/components/bar/utils/systemResource/index.ts
new file mode 100644
index 0000000..747841e
--- /dev/null
+++ b/src/components/bar/utils/systemResource/index.ts
@@ -0,0 +1,93 @@
+import { SizeConverter } from 'src/lib/units/size';
+import { SizeUnit } from 'src/lib/units/size/types';
+import { ResourceLabelType, GenericResourceData } from 'src/services/system/types';
+
+/**
+ * Renders a resource label based on the label type and resource data.
+ *
+ * This function generates a resource label string based on the provided label type, resource data, and rounding option.
+ * It formats the used, total, and free resource values and calculates the percentage if needed.
+ *
+ * @param lblType The type of label to render (used/total, used, free, or percentage).
+ * @param resourceUsage An object containing the resource usage data (used, total, percentage, and free).
+ * @param round A boolean indicating whether to round the values.
+ *
+ * @returns The rendered resource label as a string.
+ */
+export const renderResourceLabel = (
+    lblType: ResourceLabelType,
+    resourceUsage: GenericResourceData,
+    round: boolean,
+    unitType?: SizeUnit,
+): string => {
+    const { used, total, percentage, free } = resourceUsage;
+    const precision = round ? 0 : 2;
+
+    if (lblType === 'used/total') {
+        const totalConverter = SizeConverter.fromBytes(total);
+        const usedConverter = SizeConverter.fromBytes(used);
+        const { unit } = totalConverter.toAuto();
+        const sizeUnit: SizeUnit = unitType ?? unit;
+
+        let usedValue: number;
+        let totalValue: string;
+
+        switch (sizeUnit) {
+            case 'tebibytes':
+                usedValue = usedConverter.toTiB(precision);
+                totalValue = totalConverter.formatTiB(precision);
+                return `${usedValue}/${totalValue}`;
+            case 'gibibytes':
+                usedValue = usedConverter.toGiB(precision);
+                totalValue = totalConverter.formatGiB(precision);
+                return `${usedValue}/${totalValue}`;
+            case 'mebibytes':
+                usedValue = usedConverter.toMiB(precision);
+                totalValue = totalConverter.formatMiB(precision);
+                return `${usedValue}/${totalValue}`;
+            case 'kibibytes':
+                usedValue = usedConverter.toKiB(precision);
+                totalValue = totalConverter.formatKiB(precision);
+                return `${usedValue}/${totalValue}`;
+            default:
+                usedValue = usedConverter.toBytes(precision);
+                totalValue = totalConverter.formatBytes(precision);
+                return `${usedValue}/${totalValue}`;
+        }
+    }
+
+    if (lblType === 'used') {
+        return SizeConverter.fromBytes(used).formatAuto(precision);
+    }
+
+    if (lblType === 'free') {
+        return SizeConverter.fromBytes(free).formatAuto(precision);
+    }
+
+    return `${percentage}%`;
+};
+
+/**
+ * Formats a tooltip based on the data type and label type.
+ *
+ * This function generates a tooltip string based on the provided data type and label type.
+ *
+ * @param dataType The type of data to include in the tooltip.
+ * @param lblTyp The type of label to format the tooltip for (used, free, used/total, or percentage).
+ *
+ * @returns The formatted tooltip as a string.
+ */
+export const formatTooltip = (dataType: string, lblTyp: ResourceLabelType): string => {
+    switch (lblTyp) {
+        case 'used':
+            return `Used ${dataType}`;
+        case 'free':
+            return `Free ${dataType}`;
+        case 'used/total':
+            return `Used/Total ${dataType}`;
+        case 'percentage':
+            return `Percentage ${dataType} Usage`;
+        default:
+            return '';
+    }
+};
diff --git a/src/components/menus/audio/active/index.tsx b/src/components/menus/audio/active/index.tsx
index 102a58d..f601526 100644
--- a/src/components/menus/audio/active/index.tsx
+++ b/src/components/menus/audio/active/index.tsx
@@ -2,7 +2,7 @@ import { Gtk } from 'astal/gtk3';
 import { ActiveDevices } from './devices/index.js';
 import { ActivePlaybacks } from './playbacks/index.js';
 import { bind, Variable } from 'astal';
-import { isPrimaryClick } from 'src/lib/utils.js';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export enum ActiveDeviceMenu {
     DEVICES = 'devices',
diff --git a/src/components/menus/audio/active/sliderItem/Slider.tsx b/src/components/menus/audio/active/sliderItem/Slider.tsx
index f4a33b3..3bf4183 100644
--- a/src/components/menus/audio/active/sliderItem/Slider.tsx
+++ b/src/components/menus/audio/active/sliderItem/Slider.tsx
@@ -1,8 +1,9 @@
 import { bind } from 'astal';
 import { Gdk, Gtk } from 'astal/gtk3';
 import AstalWp from 'gi://AstalWp?version=0.1';
-import { capitalizeFirstLetter, isScrollDown, isScrollUp } from 'src/lib/utils';
-import options from 'src/options';
+import options from 'src/configuration';
+import { isScrollUp, isScrollDown } from 'src/lib/events/mouse';
+import { capitalizeFirstLetter } from 'src/lib/string/formatters';
 
 const { raiseMaximumVolume } = options.menus.volume;
 
diff --git a/src/components/menus/audio/active/sliderItem/SliderIcon.tsx b/src/components/menus/audio/active/sliderItem/SliderIcon.tsx
index 4e7067a..94e58f7 100644
--- a/src/components/menus/audio/active/sliderItem/SliderIcon.tsx
+++ b/src/components/menus/audio/active/sliderItem/SliderIcon.tsx
@@ -1,8 +1,8 @@
 import { bind, Variable } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { isPrimaryClick } from 'src/lib/utils';
 import { getIcon } from '../../utils';
 import AstalWp from 'gi://AstalWp?version=0.1';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const SliderIcon = ({ type, device }: SliderIconProps): JSX.Element => {
     const iconBinding = Variable.derive([bind(device, 'volume'), bind(device, 'mute')], (volume, isMuted) => {
diff --git a/src/components/menus/audio/available/Device.tsx b/src/components/menus/audio/available/Device.tsx
index 775c3ea..fac47f4 100644
--- a/src/components/menus/audio/available/Device.tsx
+++ b/src/components/menus/audio/available/Device.tsx
@@ -1,7 +1,7 @@
 import { Gtk } from 'astal/gtk3';
 import AstalWp from 'gi://AstalWp?version=0.1';
-import { isPrimaryClick } from 'src/lib/utils';
 import { bind } from 'astal';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 const DeviceIcon = ({ device, type, icon }: AudioDeviceProps): JSX.Element => {
     return (
diff --git a/src/components/menus/audio/index.tsx b/src/components/menus/audio/index.tsx
index 50fa948..76cc814 100644
--- a/src/components/menus/audio/index.tsx
+++ b/src/components/menus/audio/index.tsx
@@ -1,10 +1,10 @@
 import DropdownMenu from '../shared/dropdown/index.js';
 import { VolumeSliders } from './active/index.js';
-import options from 'src/options.js';
 import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
 import { AvailableDevices } from './available/index.js';
-import { RevealerTransitionMap } from 'src/lib/constants/options.js';
+import { RevealerTransitionMap } from 'src/components/settings/constants.js';
+import options from 'src/configuration';
 
 export default (): JSX.Element => {
     return (
diff --git a/src/components/menus/bluetooth/devices/controls/ConnectButton.tsx b/src/components/menus/bluetooth/devices/controls/ConnectButton.tsx
index d97b5e6..5117c47 100644
--- a/src/components/menus/bluetooth/devices/controls/ConnectButton.tsx
+++ b/src/components/menus/bluetooth/devices/controls/ConnectButton.tsx
@@ -1,7 +1,7 @@
 import { bind } from 'astal';
 import { ActionButton } from './ActionButton';
-import { isPrimaryClick } from 'src/lib/utils';
 import AstalBluetooth from 'gi://AstalBluetooth?version=0.1';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const ConnectButton = ({ device }: ConnectButtonProps): JSX.Element => {
     return (
diff --git a/src/components/menus/bluetooth/devices/controls/ForgetButton.tsx b/src/components/menus/bluetooth/devices/controls/ForgetButton.tsx
index 0659680..f828af1 100644
--- a/src/components/menus/bluetooth/devices/controls/ForgetButton.tsx
+++ b/src/components/menus/bluetooth/devices/controls/ForgetButton.tsx
@@ -1,7 +1,7 @@
 import { ActionButton } from './ActionButton';
-import { isPrimaryClick } from 'src/lib/utils';
 import AstalBluetooth from 'gi://AstalBluetooth?version=0.1';
 import { forgetBluetoothDevice } from '../helpers';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const ForgetButton = ({ device }: ForgetButtonProps): JSX.Element => {
     return (
diff --git a/src/components/menus/bluetooth/devices/controls/PairButton.tsx b/src/components/menus/bluetooth/devices/controls/PairButton.tsx
index d517682..87d55b5 100644
--- a/src/components/menus/bluetooth/devices/controls/PairButton.tsx
+++ b/src/components/menus/bluetooth/devices/controls/PairButton.tsx
@@ -1,7 +1,7 @@
 import { bind } from 'astal';
 import { ActionButton } from './ActionButton';
-import { isPrimaryClick } from 'src/lib/utils';
 import AstalBluetooth from 'gi://AstalBluetooth?version=0.1';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const PairButton = ({ device }: PairButtonProps): JSX.Element => {
     return (
diff --git a/src/components/menus/bluetooth/devices/controls/TrustButton.tsx b/src/components/menus/bluetooth/devices/controls/TrustButton.tsx
index 8dfe818..de569b3 100644
--- a/src/components/menus/bluetooth/devices/controls/TrustButton.tsx
+++ b/src/components/menus/bluetooth/devices/controls/TrustButton.tsx
@@ -1,7 +1,7 @@
 import { bind } from 'astal';
 import { ActionButton } from './ActionButton';
-import { isPrimaryClick } from 'src/lib/utils';
 import AstalBluetooth from 'gi://AstalBluetooth?version=0.1';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const TrustButton = ({ device }: TrustButtonProps): JSX.Element => {
     return (
diff --git a/src/components/menus/bluetooth/devices/device/index.tsx b/src/components/menus/bluetooth/devices/device/index.tsx
index b9c33db..151a5e0 100644
--- a/src/components/menus/bluetooth/devices/device/index.tsx
+++ b/src/components/menus/bluetooth/devices/device/index.tsx
@@ -1,11 +1,11 @@
 import { Gtk } from 'astal/gtk3';
 import AstalBluetooth from 'gi://AstalBluetooth?version=0.1';
 import Spinner from 'src/components/shared/Spinner';
-import { isPrimaryClick } from 'src/lib/utils';
 import { bind } from 'astal';
 import { DeviceIcon } from './DeviceIcon';
 import { DeviceName } from './DeviceName';
 import { DeviceStatus } from './DeviceStatus';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const BluetoothDevice = ({ device, connectedDevices }: BluetoothDeviceProps): JSX.Element => {
     const IsConnectingSpinner = (): JSX.Element => {
diff --git a/src/components/menus/bluetooth/header/Controls/DiscoverButton.tsx b/src/components/menus/bluetooth/header/Controls/DiscoverButton.tsx
index 17c4f9d..63b8fe0 100644
--- a/src/components/menus/bluetooth/header/Controls/DiscoverButton.tsx
+++ b/src/components/menus/bluetooth/header/Controls/DiscoverButton.tsx
@@ -1,8 +1,8 @@
 import { Gtk } from 'astal/gtk3';
-import { isPrimaryClick } from 'src/lib/utils';
 import { bind, timeout } from 'astal';
 import { isDiscovering } from './helper';
 import AstalBluetooth from 'gi://AstalBluetooth?version=0.1';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 const bluetoothService = AstalBluetooth.get_default();
 
diff --git a/src/components/menus/bluetooth/index.tsx b/src/components/menus/bluetooth/index.tsx
index 362d98c..d0e74f2 100644
--- a/src/components/menus/bluetooth/index.tsx
+++ b/src/components/menus/bluetooth/index.tsx
@@ -1,10 +1,10 @@
+import options from 'src/configuration';
 import DropdownMenu from '../shared/dropdown/index.js';
 import { BluetoothDevices } from './devices/index.js';
 import { Header } from './header/index.js';
-import options from 'src/options.js';
 import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { RevealerTransitionMap } from 'src/lib/constants/options.js';
+import { RevealerTransitionMap } from 'src/components/settings/constants.js';
 
 export default (): JSX.Element => {
     return (
diff --git a/src/components/menus/calendar/index.tsx b/src/components/menus/calendar/index.tsx
index 49fc4c0..d3b8dae 100644
--- a/src/components/menus/calendar/index.tsx
+++ b/src/components/menus/calendar/index.tsx
@@ -2,9 +2,9 @@ import DropdownMenu from '../shared/dropdown/index.js';
 import { TimeWidget } from './time/index';
 import { CalendarWidget } from './CalendarWidget.js';
 import { WeatherWidget } from './weather/index';
-import options from 'src/options';
 import { bind } from 'astal';
-import { RevealerTransitionMap } from 'src/lib/constants/options.js';
+import { RevealerTransitionMap } from 'src/components/settings/constants.js';
+import options from 'src/configuration';
 
 const { transition } = options.menus;
 const { enabled: weatherEnabled } = options.menus.clock.weather;
diff --git a/src/components/menus/calendar/time/MilitaryTime.tsx b/src/components/menus/calendar/time/MilitaryTime.tsx
index 3c5953f..06dec9c 100644
--- a/src/components/menus/calendar/time/MilitaryTime.tsx
+++ b/src/components/menus/calendar/time/MilitaryTime.tsx
@@ -1,7 +1,7 @@
-import options from 'src/options';
 import { bind, Variable } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { systemTime } from 'src/shared/time';
+import options from 'src/configuration';
+import { systemTime } from 'src/lib/units/time';
 
 const { military, hideSeconds } = options.menus.clock.time;
 
diff --git a/src/components/menus/calendar/time/StandardTime.tsx b/src/components/menus/calendar/time/StandardTime.tsx
index 3434ba5..d93b448 100644
--- a/src/components/menus/calendar/time/StandardTime.tsx
+++ b/src/components/menus/calendar/time/StandardTime.tsx
@@ -1,7 +1,7 @@
-import options from 'src/options';
 import { bind, GLib, Variable } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { systemTime } from 'src/shared/time';
+import options from 'src/configuration';
+import { systemTime } from 'src/lib/units/time';
 
 const { military, hideSeconds } = options.menus.clock.time;
 
diff --git a/src/components/menus/calendar/weather/hourly/helpers.ts b/src/components/menus/calendar/weather/hourly/helpers.ts
index bb80500..9d6c07f 100644
--- a/src/components/menus/calendar/weather/hourly/helpers.ts
+++ b/src/components/menus/calendar/weather/hourly/helpers.ts
@@ -1,64 +1,51 @@
-import { Weather, WeatherIconTitle } from 'src/lib/types/weather.types';
-import { isValidWeatherIconTitle } from 'src/shared/weather';
+import { Weather, WeatherIcon, WeatherStatus } from 'src/services/weather/types';
 
 /**
- * Retrieves the next epoch time for weather data.
+ * Calculates the target hour for weather data lookup
  *
- * This function calculates the next epoch time based on the current weather data and the specified number of hours from now.
- * It ensures that the prediction remains within the current day by rewinding the time if necessary.
- *
- * @param wthr The current weather data.
- * @param hoursFromNow The number of hours from now to calculate the next epoch time.
- *
- * @returns The next epoch time as a number.
+ * @param baseTime - The base time to calculate from
+ * @param hoursFromNow - Number of hours to add
+ * @returns A Date object set to the start of the target hour
  */
-export const getNextEpoch = (wthr: Weather, hoursFromNow: number): number => {
-    const currentEpoch = wthr.location.localtime_epoch;
-    const epochAtHourStart = currentEpoch - (currentEpoch % 3600);
-    let nextEpoch = 3600 * hoursFromNow + epochAtHourStart;
+export const getTargetHour = (baseTime: Date, hoursFromNow: number): Date => {
+    const targetTime = new Date(baseTime);
+    const newHour = targetTime.getHours() + hoursFromNow;
+    targetTime.setHours(newHour);
+    targetTime.setMinutes(0, 0, 0);
 
-    const curHour = new Date(currentEpoch * 1000).getHours();
-
-    /*
-     * NOTE: Since the API is only capable of showing the current day; if
-     * the hours left in the day are less than 4 (aka spilling into the next day),
-     * then rewind to contain the prediction within the current day.
-     */
-    if (curHour > 19) {
-        const hoursToRewind = curHour - 19;
-        nextEpoch = 3600 * hoursFromNow + epochAtHourStart - hoursToRewind * 3600;
+    const currentHour = baseTime.getHours();
+    if (currentHour > 19) {
+        const hoursToRewind = currentHour - 19;
+        targetTime.setHours(targetTime.getHours() - hoursToRewind);
     }
-    return nextEpoch;
+
+    return targetTime;
 };
 
 /**
- * Retrieves the weather icon query for a specific time in the future.
+ * Retrieves the weather icon for a specific hour in the future
  *
- * This function calculates the next epoch time and retrieves the corresponding weather data.
- * It then generates a weather icon query based on the weather condition and time of day.
- *
- * @param weather The current weather data.
- * @param hoursFromNow The number of hours from now to calculate the weather icon query.
- *
- * @returns The weather icon query as a string.
+ * @param weather - The current weather data
+ * @param hoursFromNow - Number of hours from now to get the icon for
+ * @returns The appropriate weather icon
  */
-export const getIconQuery = (weather: Weather, hoursFromNow: number): WeatherIconTitle => {
-    const nextEpoch = getNextEpoch(weather, hoursFromNow);
-    const weatherAtEpoch = weather.forecast.forecastday[0].hour.find((h) => h.time_epoch === nextEpoch);
-
-    if (weatherAtEpoch === undefined) {
-        return 'warning';
+export const getHourlyWeatherIcon = (weather: Weather, hoursFromNow: number): WeatherIcon => {
+    if (!weather?.forecast?.[0]?.hourly) {
+        return WeatherIcon.WARNING;
     }
 
-    let iconQuery = weatherAtEpoch.condition.text.trim().toLowerCase().replaceAll(' ', '_');
+    const targetHour = getTargetHour(weather.lastUpdated, hoursFromNow);
+    const targetTime = targetHour.getTime();
 
-    if (!weatherAtEpoch?.is_day && iconQuery === 'partly_cloudy') {
-        iconQuery = 'partly_cloudy_night';
+    const weatherAtHour = weather.forecast[0].hourly.find((hour) => {
+        const hourTime = hour.time.getTime();
+        return hourTime === targetTime;
+    });
+
+    if (!weatherAtHour) {
+        return WeatherIcon.WARNING;
     }
 
-    if (isValidWeatherIconTitle(iconQuery)) {
-        return iconQuery;
-    } else {
-        return 'warning';
-    }
+    const iconQuery: WeatherStatus = weatherAtHour.condition?.text ?? 'WARNING';
+    return WeatherIcon[iconQuery];
 };
diff --git a/src/components/menus/calendar/weather/hourly/icon/index.tsx b/src/components/menus/calendar/weather/hourly/icon/index.tsx
index 7699681..c361f24 100644
--- a/src/components/menus/calendar/weather/hourly/icon/index.tsx
+++ b/src/components/menus/calendar/weather/hourly/icon/index.tsx
@@ -1,18 +1,18 @@
 import { bind } from 'astal';
-import { globalWeatherVar } from 'src/shared/weather';
 import { Gtk } from 'astal/gtk3';
-import { weatherIcons } from 'src/lib/icons/weather.js';
-import { getIconQuery } from '../helpers';
+import WeatherService from 'src/services/weather';
+import { getHourlyWeatherIcon } from '../helpers';
+
+const weatherService = WeatherService.getInstance();
 
 export const HourlyIcon = ({ hoursFromNow }: HourlyIconProps): JSX.Element => {
     return (
         <box halign={Gtk.Align.CENTER}>
             <label
                 className={'hourly-weather-icon txt-icon'}
-                label={bind(globalWeatherVar).as((weather) => {
-                    const iconQuery = getIconQuery(weather, hoursFromNow);
-                    const weatherIcn = weatherIcons[iconQuery] || weatherIcons['warning'];
-                    return weatherIcn;
+                label={bind(weatherService.weatherData).as((weather) => {
+                    const weatherIcon = getHourlyWeatherIcon(weather, hoursFromNow);
+                    return weatherIcon;
                 })}
                 halign={Gtk.Align.CENTER}
             />
diff --git a/src/components/menus/calendar/weather/hourly/temperature/index.tsx b/src/components/menus/calendar/weather/hourly/temperature/index.tsx
index 0f056d2..f0e28c9 100644
--- a/src/components/menus/calendar/weather/hourly/temperature/index.tsx
+++ b/src/components/menus/calendar/weather/hourly/temperature/index.tsx
@@ -1,24 +1,33 @@
-import options from 'src/options';
-import { globalWeatherVar } from 'src/shared/weather';
-import { getNextEpoch } from '../helpers';
 import { bind, Variable } from 'astal';
+import options from 'src/configuration';
+import WeatherService from 'src/services/weather';
+import { getTargetHour } from '../helpers';
+import { TemperatureConverter } from 'src/lib/units/temperature';
+
+const weatherService = WeatherService.getInstance();
 
 const { unit } = options.menus.clock.weather;
 
 export const HourlyTemp = ({ hoursFromNow }: HourlyTempProps): JSX.Element => {
-    const weatherBinding = Variable.derive([bind(globalWeatherVar), bind(unit)], (weather, unitType) => {
-        if (!Object.keys(weather).length) {
-            return '-';
-        }
+    const weatherBinding = Variable.derive(
+        [bind(weatherService.weatherData), bind(unit)],
+        (weather, unitType) => {
+            if (!Object.keys(weather).length || !weather?.forecast?.[0]?.hourly) {
+                return '-';
+            }
 
-        const nextEpoch = getNextEpoch(weather, hoursFromNow);
-        const weatherAtEpoch = weather.forecast.forecastday[0].hour.find((h) => h.time_epoch === nextEpoch);
+            const targetHour = getTargetHour(new Date(), hoursFromNow);
+            const weatherAtTargetHour = weather.forecast[0].hourly.find(
+                (h) => h.time.getTime() === targetHour.getTime(),
+            );
+            const temperatureAtTargetHour = weatherAtTargetHour?.temperature ?? 0;
 
-        if (unitType === 'imperial') {
-            return `${weatherAtEpoch ? Math.ceil(weatherAtEpoch.temp_f) : '-'}° F`;
-        }
-        return `${weatherAtEpoch ? Math.ceil(weatherAtEpoch.temp_c) : '-'}° C`;
-    });
+            const tempConverter = TemperatureConverter.fromCelsius(temperatureAtTargetHour);
+            const isImperial = unitType === 'imperial';
+
+            return isImperial ? tempConverter.formatFahrenheit() : tempConverter.formatCelsius();
+        },
+    );
 
     return (
         <label
diff --git a/src/components/menus/calendar/weather/hourly/time/index.tsx b/src/components/menus/calendar/weather/hourly/time/index.tsx
index a0a0b4b..e7505d7 100644
--- a/src/components/menus/calendar/weather/hourly/time/index.tsx
+++ b/src/components/menus/calendar/weather/hourly/time/index.tsx
@@ -1,29 +1,32 @@
-import options from 'src/options';
-import { globalWeatherVar } from 'src/shared/weather';
-import { getNextEpoch } from '../helpers';
 import { bind, Variable } from 'astal';
+import options from 'src/configuration';
+import WeatherService from 'src/services/weather';
+import { getTargetHour } from '../helpers';
 
+const weatherService = WeatherService.getInstance();
 const { military } = options.menus.clock.time;
 
 export const HourlyTime = ({ hoursFromNow }: HourlyTimeProps): JSX.Element => {
-    const weatherBinding = Variable.derive([bind(globalWeatherVar), bind(military)], (weather, military) => {
-        if (!Object.keys(weather).length) {
-            return '-';
-        }
+    const weatherBinding = Variable.derive(
+        [bind(weatherService.weatherData), bind(military)],
+        (weather, military) => {
+            if (!Object.keys(weather).length) {
+                return '-';
+            }
 
-        const nextEpoch = getNextEpoch(weather, hoursFromNow);
-        const dateAtEpoch = new Date(nextEpoch * 1000);
+            const targetHour = getTargetHour(new Date(), hoursFromNow);
 
-        let hours = dateAtEpoch.getHours();
+            let hours = targetHour.getHours();
 
-        if (military) {
-            return `${hours}:00`;
-        }
+            if (military) {
+                return `${hours}:00`;
+            }
 
-        const ampm = hours >= 12 ? 'PM' : 'AM';
-        hours = hours % 12 || 12;
-        return `${hours}${ampm}`;
-    });
+            const ampm = hours >= 12 ? 'PM' : 'AM';
+            hours = hours % 12 || 12;
+            return `${hours}${ampm}`;
+        },
+    );
 
     return (
         <label
diff --git a/src/components/menus/calendar/weather/icon/index.tsx b/src/components/menus/calendar/weather/icon/index.tsx
index 549d06d..9397957 100644
--- a/src/components/menus/calendar/weather/icon/index.tsx
+++ b/src/components/menus/calendar/weather/icon/index.tsx
@@ -1,6 +1,8 @@
 import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { getWeatherStatusTextIcon, globalWeatherVar } from 'src/shared/weather';
+import WeatherService from 'src/services/weather';
+
+const weatherService = WeatherService.getInstance();
 
 export const TodayIcon = (): JSX.Element => {
     return (
@@ -11,7 +13,7 @@ export const TodayIcon = (): JSX.Element => {
         >
             <label
                 className={'calendar-menu-weather today icon txt-icon'}
-                label={bind(globalWeatherVar).as((weather) => getWeatherStatusTextIcon(weather))}
+                label={bind(weatherService.statusIcon)}
             />
         </box>
     );
diff --git a/src/components/menus/calendar/weather/stats/index.tsx b/src/components/menus/calendar/weather/stats/index.tsx
index 39797a1..5be0836 100644
--- a/src/components/menus/calendar/weather/stats/index.tsx
+++ b/src/components/menus/calendar/weather/stats/index.tsx
@@ -1,31 +1,27 @@
-import { getTemperature, globalWeatherVar } from 'src/shared/weather';
-import options from 'src/options';
-import { getRainChance } from 'src/shared/weather';
 import { Gtk } from 'astal/gtk3';
-import { bind, Variable } from 'astal';
+import { bind } from 'astal';
+import WeatherService from 'src/services/weather';
 
-const { unit } = options.menus.clock.weather;
+const weatherService = WeatherService.getInstance();
 
 export const TodayStats = (): JSX.Element => {
-    const temperatureBinding = Variable.derive([bind(globalWeatherVar), bind(unit)], getTemperature);
-
     return (
         <box
             className={'calendar-menu-weather today stats container'}
             halign={Gtk.Align.END}
             valign={Gtk.Align.CENTER}
             vertical
-            onDestroy={() => {
-                temperatureBinding.drop();
-            }}
         >
             <box className={'weather wind'}>
                 <label className={'weather wind icon txt-icon'} label={''} />
-                <label className={'weather wind label'} label={temperatureBinding()} />
+                <label className={'weather wind label'} label={bind(weatherService.windCondition)} />
             </box>
             <box className={'weather precip'}>
                 <label className={'weather precip icon txt-icon'} label={''} />
-                <label className={'weather precip label'} label={bind(globalWeatherVar).as(getRainChance)} />
+                <label
+                    className={'weather precip label'}
+                    label={bind(weatherService.rainChance).as((chanceOfRain) => `${chanceOfRain}%`)}
+                />
             </box>
         </box>
     );
diff --git a/src/components/menus/calendar/weather/temperature/index.tsx b/src/components/menus/calendar/weather/temperature/index.tsx
index 493968c..733ea98 100644
--- a/src/components/menus/calendar/weather/temperature/index.tsx
+++ b/src/components/menus/calendar/weather/temperature/index.tsx
@@ -1,43 +1,48 @@
-import options from 'src/options';
-import { globalWeatherVar } from 'src/shared/weather';
-import { getTemperature, getWeatherIcon } from 'src/shared/weather';
 import { Gtk } from 'astal/gtk3';
-import { bind, Variable } from 'astal';
+import { bind } from 'astal';
+import WeatherService from 'src/services/weather';
+import options from 'src/configuration';
+import { toTitleCase } from 'src/lib/string/formatters';
+
 const { unit } = options.menus.clock.weather;
+const weatherService = WeatherService.getInstance();
+
+unit.subscribe((unitType) => (weatherService.unit = unitType));
 
 const WeatherStatus = (): JSX.Element => {
     return (
         <box halign={Gtk.Align.CENTER}>
             <label
-                className={bind(globalWeatherVar).as(
-                    (weather) =>
-                        `calendar-menu-weather today condition label ${getWeatherIcon(Math.ceil(weather.current.temp_f)).color}`,
+                className={bind(weatherService.gaugeIcon).as(
+                    (gauge) => `calendar-menu-weather today condition label ${gauge.color}`,
+                )}
+                label={bind(weatherService.weatherData).as((weather) =>
+                    toTitleCase(weather.current.condition.text),
                 )}
-                label={bind(globalWeatherVar).as((weather) => weather.current.condition.text)}
                 truncate
-                tooltipText={bind(globalWeatherVar).as((weather) => weather.current.condition.text)}
+                tooltipText={bind(weatherService.weatherData).as((weather) => weather.current.condition.text)}
             />
         </box>
     );
 };
 
 const Temperature = (): JSX.Element => {
-    const labelBinding = Variable.derive([bind(globalWeatherVar), bind(unit)], getTemperature);
-
     const TemperatureLabel = (): JSX.Element => {
-        return <label className={'calendar-menu-weather today temp label'} label={labelBinding()} />;
+        return (
+            <label
+                className={'calendar-menu-weather today temp label'}
+                label={bind(weatherService.temperature)}
+            />
+        );
     };
 
     const ThermometerIcon = (): JSX.Element => {
         return (
             <label
-                className={bind(globalWeatherVar).as(
-                    (weather) =>
-                        `calendar-menu-weather today temp label icon txt-icon ${getWeatherIcon(Math.ceil(weather.current.temp_f)).color}`,
-                )}
-                label={bind(globalWeatherVar).as(
-                    (weather) => getWeatherIcon(Math.ceil(weather.current.temp_f)).icon,
+                className={bind(weatherService.gaugeIcon).as(
+                    (gauge) => `calendar-menu-weather today temp label icon txt-icon ${gauge.color}`,
                 )}
+                label={bind(weatherService.gaugeIcon).as((gauge) => gauge.icon)}
             />
         );
     };
@@ -47,9 +52,6 @@ const Temperature = (): JSX.Element => {
             className={'calendar-menu-weather today temp container'}
             valign={Gtk.Align.CENTER}
             vertical={false}
-            onDestroy={() => {
-                labelBinding.drop();
-            }}
             hexpand
         >
             <box halign={Gtk.Align.CENTER} hexpand>
diff --git a/src/components/menus/dashboard/controls/ControlButtons.tsx b/src/components/menus/dashboard/controls/ControlButtons.tsx
index d63dd97..5403d25 100644
--- a/src/components/menus/dashboard/controls/ControlButtons.tsx
+++ b/src/components/menus/dashboard/controls/ControlButtons.tsx
@@ -1,10 +1,10 @@
 import { bind } from 'astal';
-import { isPrimaryClick } from 'src/lib/utils';
 import { isWifiEnabled } from './helpers';
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
 import AstalBluetooth from 'gi://AstalBluetooth?version=0.1';
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
 import AstalWp from 'gi://AstalWp?version=0.1';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 const wireplumber = AstalWp.get_default() as AstalWp.Wp;
 const audioService = wireplumber.audio;
diff --git a/src/components/menus/dashboard/controls/index.tsx b/src/components/menus/dashboard/controls/index.tsx
index f715fdf..4ea47be 100644
--- a/src/components/menus/dashboard/controls/index.tsx
+++ b/src/components/menus/dashboard/controls/index.tsx
@@ -6,8 +6,9 @@ import {
     PlaybackButton,
     WifiButton,
 } from './ControlButtons';
+import { JSXElement } from 'src/core/types';
 
-export const Controls = ({ isEnabled }: ControlsProps): JSX.Element => {
+export const Controls = ({ isEnabled }: ControlsProps): JSXElement => {
     if (!isEnabled) {
         return null;
     }
diff --git a/src/components/menus/dashboard/directories/DirectoryLinks.tsx b/src/components/menus/dashboard/directories/DirectoryLinks.tsx
index 17e8ab5..ee3f158 100644
--- a/src/components/menus/dashboard/directories/DirectoryLinks.tsx
+++ b/src/components/menus/dashboard/directories/DirectoryLinks.tsx
@@ -1,7 +1,7 @@
 import { bind, execAsync, Variable } from 'astal';
 import { App, Gtk, Widget } from 'astal/gtk3';
-import { isPrimaryClick } from 'src/lib/utils';
-import options from 'src/options';
+import options from 'src/configuration';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 const { left, right } = options.menus.dashboard.directories;
 
diff --git a/src/components/menus/dashboard/directories/index.tsx b/src/components/menus/dashboard/directories/index.tsx
index 24443ce..b2542f7 100644
--- a/src/components/menus/dashboard/directories/index.tsx
+++ b/src/components/menus/dashboard/directories/index.tsx
@@ -1,8 +1,9 @@
 import { Gtk } from 'astal/gtk3';
 import { LeftSection, RightSection } from './Sections';
 import { LeftLink1, LeftLink2, LeftLink3, RightLink1, RightLink2, RightLink3 } from './DirectoryLinks';
+import { JSXElement } from 'src/core/types';
 
-export const Directories = ({ isEnabled }: DirectoriesProps): JSX.Element => {
+export const Directories = ({ isEnabled }: DirectoriesProps): JSXElement => {
     if (!isEnabled) {
         return null;
     }
diff --git a/src/components/menus/dashboard/index.tsx b/src/components/menus/dashboard/index.tsx
index b03c576..f89cfa8 100644
--- a/src/components/menus/dashboard/index.tsx
+++ b/src/components/menus/dashboard/index.tsx
@@ -4,9 +4,9 @@ import { Shortcuts } from './shortcuts/index.js';
 import { Controls } from './controls/index.js';
 import { Stats } from './stats/index.js';
 import { Directories } from './directories/index.js';
-import options from 'src/options.js';
 import { bind, Variable } from 'astal';
-import { RevealerTransitionMap } from 'src/lib/constants/options.js';
+import { RevealerTransitionMap } from 'src/components/settings/constants.js';
+import options from 'src/configuration';
 
 const { controls, shortcuts, stats, directories } = options.menus.dashboard;
 const { transition } = options.menus;
diff --git a/src/components/menus/dashboard/profile/PowerButtons.tsx b/src/components/menus/dashboard/profile/PowerButtons.tsx
index d0c4de0..2402d8d 100644
--- a/src/components/menus/dashboard/profile/PowerButtons.tsx
+++ b/src/components/menus/dashboard/profile/PowerButtons.tsx
@@ -1,6 +1,6 @@
-import { isPrimaryClick } from 'src/lib/utils';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 import { handleClick } from './helpers';
-import { PowerOptions } from 'src/lib/options/options.types';
+import { PowerOptions } from 'src/lib/options/types';
 
 const PowerActionButton = (icon: string, tooltip: string, action: PowerOptions): JSX.Element => {
     return (
diff --git a/src/components/menus/dashboard/profile/Profile.tsx b/src/components/menus/dashboard/profile/Profile.tsx
index cd44a3e..91d3e8c 100644
--- a/src/components/menus/dashboard/profile/Profile.tsx
+++ b/src/components/menus/dashboard/profile/Profile.tsx
@@ -1,7 +1,8 @@
 import { bind, GLib } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import options from 'src/options.js';
-import { normalizePath, isAnImage } from 'src/lib/utils.js';
+import options from 'src/configuration';
+import { normalizeToAbsolutePath } from 'src/lib/path/helpers';
+import { isAnImage } from 'src/lib/validation/images';
 
 const { image, name } = options.menus.dashboard.powermenu.avatar;
 
@@ -12,7 +13,7 @@ const ProfilePicture = (): JSX.Element => {
             halign={Gtk.Align.CENTER}
             css={bind(image).as((img) => {
                 if (isAnImage(img)) {
-                    return `background-image: url("${normalizePath(img)}")`;
+                    return `background-image: url("${normalizeToAbsolutePath(img)}")`;
                 }
 
                 return `background-image: url("${SRC_DIR}/assets/hyprpanel.png")`;
diff --git a/src/components/menus/dashboard/profile/helpers.ts b/src/components/menus/dashboard/profile/helpers.ts
index e78b82e..6572a16 100644
--- a/src/components/menus/dashboard/profile/helpers.ts
+++ b/src/components/menus/dashboard/profile/helpers.ts
@@ -1,8 +1,8 @@
 import { App } from 'astal/gtk3';
 import powermenu from '../../power/helpers/actions.js';
 import { execAsync } from 'astal';
-import options from 'src/options';
-import { PowerOptions } from 'src/lib/options/options.types.js';
+import { PowerOptions } from 'src/lib/options/types.js';
+import options from 'src/configuration';
 
 const { confirmation, shutdown, logout, sleep, reboot } = options.menus.dashboard.powermenu;
 
diff --git a/src/components/menus/dashboard/shortcuts/buttons/ShortcutButtons.tsx b/src/components/menus/dashboard/shortcuts/buttons/ShortcutButtons.tsx
index 9ef7a58..36f32c7 100644
--- a/src/components/menus/dashboard/shortcuts/buttons/ShortcutButtons.tsx
+++ b/src/components/menus/dashboard/shortcuts/buttons/ShortcutButtons.tsx
@@ -1,8 +1,8 @@
 import { Widget } from 'astal/gtk3';
-import { isPrimaryClick } from 'src/lib/utils';
 import { handleClick, hasCommand } from '../helpers';
-import options from 'src/options';
-import { ShortcutVariable } from 'src/lib/types/dashboard.types';
+import options from 'src/configuration';
+import { isPrimaryClick } from 'src/lib/events/mouse';
+import { ShortcutVariable } from '../types';
 
 const { left, right } = options.menus.dashboard.shortcuts;
 
diff --git a/src/components/menus/dashboard/shortcuts/helpers.ts b/src/components/menus/dashboard/shortcuts/helpers.ts
index 6578c58..27502ae 100644
--- a/src/components/menus/dashboard/shortcuts/helpers.ts
+++ b/src/components/menus/dashboard/shortcuts/helpers.ts
@@ -1,11 +1,16 @@
 import { bind, execAsync, timeout, Variable } from 'astal';
 import { App } from 'astal/gtk3';
+import options from 'src/configuration';
 import { BashPoller } from 'src/lib/poller/BashPoller';
-import { ShortcutVariable } from 'src/lib/types/dashboard.types';
-import options from 'src/options';
+import { ShortcutVariable } from './types';
 
 const { left } = options.menus.dashboard.shortcuts;
 
+/**
+ * A variable representing the polling interval in milliseconds.
+ */
+const pollingInterval = Variable(1000);
+
 /**
  * Retrieves the latest recording path from options.
  *
@@ -27,19 +32,6 @@ export const executeCommand = async (command: string): Promise<void> => {
     }
 };
 
-/**
- * Handles the recorder status based on the command output.
- *
- * This function checks if the command output indicates that recording is in progress.
- *
- * @param commandOutput The output of the command to check.
- *
- * @returns True if the command output is 'recording', false otherwise.
- */
-export const handleRecorder = (commandOutput: string): boolean => {
-    return commandOutput === 'recording';
-};
-
 /**
  * Handles the click action for a shortcut.
  *
@@ -82,11 +74,6 @@ export const leftCardHidden = Variable(
     ),
 );
 
-/**
- * A variable representing the polling interval in milliseconds.
- */
-export const pollingInterval = Variable(1000);
-
 /**
  * A variable indicating whether recording is in progress.
  */
@@ -105,3 +92,16 @@ export const recordingPoller = new BashPoller<boolean, []>(
     `${SRC_DIR}/scripts/screen_record.sh status`,
     handleRecorder,
 );
+
+/**
+ * Handles the recorder status based on the command output.
+ *
+ * This function checks if the command output indicates that recording is in progress.
+ *
+ * @param commandOutput The output of the command to check.
+ *
+ * @returns True if the command output is 'recording', false otherwise.
+ */
+function handleRecorder(commandOutput: string): boolean {
+    return commandOutput === 'recording';
+}
diff --git a/src/components/menus/dashboard/shortcuts/index.tsx b/src/components/menus/dashboard/shortcuts/index.tsx
index a6825a4..e7f90cd 100644
--- a/src/components/menus/dashboard/shortcuts/index.tsx
+++ b/src/components/menus/dashboard/shortcuts/index.tsx
@@ -1,13 +1,14 @@
 import { Gtk } from 'astal/gtk3';
 import { LeftShortcuts, RightShortcuts } from './sections/Section';
 import { recordingPoller } from './helpers';
+import { JSXElement } from 'src/core/types';
 
-export const Shortcuts = ({ isEnabled }: ShortcutsProps): JSX.Element => {
-    recordingPoller.initialize();
-
+export const Shortcuts = ({ isEnabled }: ShortcutsProps): JSXElement => {
     if (!isEnabled) {
+        recordingPoller.stop();
         return null;
     }
+    recordingPoller.initialize();
 
     return (
         <box className={'shortcuts-container'} halign={Gtk.Align.FILL} hexpand>
diff --git a/src/components/menus/dashboard/shortcuts/sections/Section.tsx b/src/components/menus/dashboard/shortcuts/sections/Section.tsx
index 6975cbf..10eb30a 100644
--- a/src/components/menus/dashboard/shortcuts/sections/Section.tsx
+++ b/src/components/menus/dashboard/shortcuts/sections/Section.tsx
@@ -1,5 +1,4 @@
 import { bind, Variable } from 'astal';
-import options from 'src/options';
 import { hasCommand, isRecording, leftCardHidden } from '../helpers';
 import {
     LeftShortcut1,
@@ -12,6 +11,7 @@ import {
 import { LeftColumn, RightColumn } from './Column';
 import { SettingsButton } from '../buttons/SettingsButton';
 import { RecordingButton } from '../buttons/RecordingButton';
+import options from 'src/configuration';
 
 const { left, right } = options.menus.dashboard.shortcuts;
 
diff --git a/src/lib/types/dashboard.types.ts b/src/components/menus/dashboard/shortcuts/types.ts
similarity index 51%
rename from src/lib/types/dashboard.types.ts
rename to src/components/menus/dashboard/shortcuts/types.ts
index 4d34784..c9432b6 100644
--- a/src/lib/types/dashboard.types.ts
+++ b/src/components/menus/dashboard/shortcuts/types.ts
@@ -1,17 +1,8 @@
 import { Variable } from 'astal';
 
-export type ShortcutFixed = {
-    tooltip: string;
-    command: string;
-    icon: string;
-    configurable: false;
-};
-
 export type ShortcutVariable = {
     tooltip: Variable<string>;
     command: Variable<string>;
     icon: Variable<string>;
     configurable?: true;
 };
-
-export type Shortcut = ShortcutFixed | ShortcutVariable;
diff --git a/src/components/menus/dashboard/stats/StatBars.tsx b/src/components/menus/dashboard/stats/StatBars.tsx
index 0df9f54..c84c995 100644
--- a/src/components/menus/dashboard/stats/StatBars.tsx
+++ b/src/components/menus/dashboard/stats/StatBars.tsx
@@ -1,11 +1,10 @@
 import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { isPrimaryClick } from 'src/lib/utils';
-import options from 'src/options';
-import { handleClick } from './helpers';
+import { cpuService, gpuService, handleClick, ramService, storageService } from './helpers';
 import { Binding } from 'astal';
-import { cpuService, gpuService, ramService, storageService } from '.';
-import { renderResourceLabel } from 'src/components/bar/utils/helpers';
+import { renderResourceLabel } from 'src/components/bar/utils/systemResource';
+import options from 'src/configuration';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 const { enable_gpu } = options.menus.dashboard.stats;
 
@@ -41,12 +40,14 @@ export const GpuStat = (): JSX.Element => {
                     return <box />;
                 }
 
+                gpuService.initialize();
+
                 return (
                     <StatBar
                         icon={'󰢮'}
                         stat={'gpu'}
-                        value={bind(gpuService.gpuUsage)}
-                        label={bind(gpuService.gpuUsage).as((gpuUsage) => `${Math.floor(gpuUsage * 100)}%`)}
+                        value={bind(gpuService.gpu)}
+                        label={bind(gpuService.gpu).as((gpuUsage) => `${Math.floor(gpuUsage * 100)}%`)}
                     />
                 );
             })}
@@ -55,6 +56,8 @@ export const GpuStat = (): JSX.Element => {
 };
 
 export const CpuStat = (): JSX.Element => {
+    cpuService.initialize();
+
     return (
         <StatBar
             icon={''}
@@ -66,6 +69,8 @@ export const CpuStat = (): JSX.Element => {
 };
 
 export const RamStat = (): JSX.Element => {
+    ramService.initialize();
+
     return (
         <StatBar
             icon={''}
@@ -79,6 +84,8 @@ export const RamStat = (): JSX.Element => {
 };
 
 export const StorageStat = (): JSX.Element => {
+    storageService.initialize();
+
     return (
         <StatBar
             icon={'󰋊'}
diff --git a/src/components/menus/dashboard/stats/helpers.ts b/src/components/menus/dashboard/stats/helpers.ts
index ee4293e..590e1fe 100644
--- a/src/components/menus/dashboard/stats/helpers.ts
+++ b/src/components/menus/dashboard/stats/helpers.ts
@@ -1,13 +1,19 @@
 import { execAsync } from 'astal';
 import { App } from 'astal/gtk3';
-import options from 'src/options';
-import Cpu from 'src/services/Cpu';
-import Gpu from 'src/services/Gpu';
-import Ram from 'src/services/Ram';
-import Storage from 'src/services/Storage';
+import options from 'src/configuration';
+import CpuUsageService from 'src/services/system/cpuUsage';
+import GpuUsageService from 'src/services/system/gpuUsage';
+import RamUsageService from 'src/services/system/ramUsage';
+import StorageService from 'src/services/system/storage';
 
 const { terminal } = options;
 const { interval, enabled, enable_gpu } = options.menus.dashboard.stats;
+const { paths } = options.bar.customModules.storage;
+
+export const gpuService = new GpuUsageService();
+export const cpuService = new CpuUsageService();
+export const ramService = new RamUsageService();
+export const storageService = new StorageService({ pathsToMonitor: paths });
 
 /**
  * Handles the click event for the dashboard menu.
@@ -24,16 +30,12 @@ export const handleClick = (): void => {
  * Monitors the interval for updating CPU, RAM, and storage services.
  *
  * This function subscribes to the interval setting and updates the timers for the CPU, RAM, and storage services accordingly.
- *
- * @param cpuService The CPU service instance.
- * @param ramService The RAM service instance.
- * @param storageService The storage service instance.
  */
-const monitorInterval = (cpuService: Cpu, ramService: Ram, storageService: Storage): void => {
+const monitorInterval = (): void => {
     interval.subscribe(() => {
         ramService.updateTimer(interval.get());
         cpuService.updateTimer(interval.get());
-        storageService.updateTimer(interval.get());
+        storageService.frequency = interval.get();
     });
 };
 
@@ -41,18 +43,8 @@ const monitorInterval = (cpuService: Cpu, ramService: Ram, storageService: Stora
  * Monitors the enabled state for CPU, RAM, GPU, and storage services.
  *
  * This function subscribes to the enabled setting and starts or stops the pollers for the CPU, RAM, GPU, and storage services based on the enabled state.
- *
- * @param cpuService The CPU service instance.
- * @param ramService The RAM service instance.
- * @param gpuService The GPU service instance.
- * @param storageService The storage service instance.
  */
-const monitorStatsEnabled = (
-    cpuService: Cpu,
-    ramService: Ram,
-    gpuService: Gpu,
-    storageService: Storage,
-): void => {
+const monitorStatsEnabled = (): void => {
     enabled.subscribe(() => {
         if (!enabled.get()) {
             ramService.stopPoller();
@@ -76,10 +68,8 @@ const monitorStatsEnabled = (
  * Monitors the GPU tracking enabled state.
  *
  * This function subscribes to the GPU tracking enabled setting and starts or stops the GPU poller based on the enabled state.
- *
- * @param gpuService The GPU service instance.
  */
-const monitorGpuTrackingEnabled = (gpuService: Gpu): void => {
+const monitorGpuTrackingEnabled = (): void => {
     enable_gpu.subscribe((gpuEnabled) => {
         if (gpuEnabled) {
             return gpuService.startPoller();
@@ -90,24 +80,12 @@ const monitorGpuTrackingEnabled = (gpuService: Gpu): void => {
 };
 
 /**
- * Initializes the pollers for CPU, RAM, GPU, and storage services.
+ * Sets up dashboard monitoring for CPU, RAM, GPU, and storage services.
  *
- * This function sets up the initial state for the CPU, RAM, GPU, and storage services, including starting the pollers if enabled.
- * It also sets up monitoring for interval changes, enabled state changes, and GPU tracking enabled state.
- *
- * @param cpuService The CPU service instance.
- * @param ramService The RAM service instance.
- * @param gpuService The GPU service instance.
- * @param storageService The storage service instance.
+ * This function sets up the initial state for the services and monitoring for interval changes, enabled state changes, and GPU tracking enabled state.
  */
-export const initializePollers = (
-    cpuService: Cpu,
-    ramService: Ram,
-    gpuService: Gpu,
-    storageService: Storage,
-): void => {
-    ramService.setShouldRound(true);
-    storageService.setShouldRound(true);
+export const setupDashboardMonitoring = (): void => {
+    storageService.round = true;
 
     if (enabled.get()) {
         ramService.startPoller();
@@ -121,7 +99,7 @@ export const initializePollers = (
         gpuService.stopPoller();
     }
 
-    monitorInterval(cpuService, ramService, storageService);
-    monitorStatsEnabled(cpuService, ramService, gpuService, storageService);
-    monitorGpuTrackingEnabled(gpuService);
+    monitorInterval();
+    monitorStatsEnabled();
+    monitorGpuTrackingEnabled();
 };
diff --git a/src/components/menus/dashboard/stats/index.tsx b/src/components/menus/dashboard/stats/index.tsx
index 54e612c..ebd01e8 100644
--- a/src/components/menus/dashboard/stats/index.tsx
+++ b/src/components/menus/dashboard/stats/index.tsx
@@ -1,23 +1,15 @@
 import { Gtk } from 'astal/gtk3';
 import { CpuStat, GpuStat, RamStat, StorageStat } from './StatBars';
-import { initializePollers } from './helpers';
-import Gpu from 'src/services/Gpu';
-import Ram from 'src/services/Ram';
-import Cpu from 'src/services/Cpu';
-import Storage from 'src/services/Storage';
+import { setupDashboardMonitoring } from './helpers';
+import { JSXElement } from 'src/core/types';
 
-export const ramService = new Ram();
-export const cpuService = new Cpu();
-export const storageService = new Storage();
-export const gpuService = new Gpu();
-
-initializePollers(cpuService, ramService, gpuService, storageService);
-
-export const Stats = ({ isEnabled }: StatsProps): JSX.Element => {
+export const Stats = ({ isEnabled }: StatsProps): JSXElement => {
     if (!isEnabled) {
         return null;
     }
 
+    setupDashboardMonitoring();
+
     return (
         <box
             className={'dashboard-card stats-container'}
diff --git a/src/components/menus/energy/brightness/Percentage.tsx b/src/components/menus/energy/brightness/Percentage.tsx
index 9b2d336..8e107b2 100644
--- a/src/components/menus/energy/brightness/Percentage.tsx
+++ b/src/components/menus/energy/brightness/Percentage.tsx
@@ -1,8 +1,8 @@
 import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import Brightness from 'src/services/Brightness';
+import BrightnessService from 'src/services/system/brightness';
 
-const brightnessService = Brightness.get_default();
+const brightnessService = BrightnessService.getInstance();
 
 export const BrightnessPercentage = (): JSX.Element => {
     return (
diff --git a/src/components/menus/energy/brightness/Slider.tsx b/src/components/menus/energy/brightness/Slider.tsx
index d95120e..ede7b80 100644
--- a/src/components/menus/energy/brightness/Slider.tsx
+++ b/src/components/menus/energy/brightness/Slider.tsx
@@ -1,8 +1,8 @@
 import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import Brightness from 'src/services/Brightness';
+import BrightnessService from 'src/services/system/brightness';
 
-const brightnessService = Brightness.get_default();
+const brightnessService = BrightnessService.getInstance();
 
 export const BrightnessSlider = (): JSX.Element => {
     return (
diff --git a/src/components/menus/energy/index.tsx b/src/components/menus/energy/index.tsx
index 42bd098..e60e34d 100644
--- a/src/components/menus/energy/index.tsx
+++ b/src/components/menus/energy/index.tsx
@@ -1,10 +1,10 @@
 import DropdownMenu from '../shared/dropdown/index.js';
 import { EnergyProfiles } from './profiles/index.js';
 import { Brightness } from './brightness/index.js';
-import options from 'src/options.js';
 import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { RevealerTransitionMap } from 'src/lib/constants/options.js';
+import { RevealerTransitionMap } from 'src/components/settings/constants.js';
+import options from 'src/configuration';
 
 const { transition } = options.menus;
 
diff --git a/src/components/menus/energy/profiles/Header.tsx b/src/components/menus/energy/profiles/Header.tsx
index eb675af..0bb9d5e 100644
--- a/src/components/menus/energy/profiles/Header.tsx
+++ b/src/components/menus/energy/profiles/Header.tsx
@@ -1,7 +1,7 @@
 import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { uptime } from 'src/lib/variables.js';
 import { renderUptime } from './helpers';
+import { uptime } from 'src/services/system/uptime';
 
 export const PowerProfileHeader = (): JSX.Element => {
     return (
diff --git a/src/components/menus/energy/profiles/Profile.tsx b/src/components/menus/energy/profiles/Profile.tsx
index 51af4f8..2e811a6 100644
--- a/src/components/menus/energy/profiles/Profile.tsx
+++ b/src/components/menus/energy/profiles/Profile.tsx
@@ -1,13 +1,12 @@
 import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
 import AstalPowerProfiles from 'gi://AstalPowerProfiles?version=0.1';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 import icons from 'src/lib/icons/icons';
-import { ProfileType } from 'src/lib/types/powerprofiles.types';
-import { isPrimaryClick } from 'src/lib/utils';
-
-const powerProfilesService = AstalPowerProfiles.get_default();
+import { ProfileType } from './types';
 
 export const PowerProfiles = (): JSX.Element => {
+    const powerProfilesService = AstalPowerProfiles.get_default();
     const powerProfiles = powerProfilesService.get_profiles();
 
     return (
diff --git a/src/lib/types/powerprofiles.types.ts b/src/components/menus/energy/profiles/types.ts
similarity index 100%
rename from src/lib/types/powerprofiles.types.ts
rename to src/components/menus/energy/profiles/types.ts
diff --git a/src/components/menus/exports.ts b/src/components/menus/index.ts
similarity index 100%
rename from src/components/menus/exports.ts
rename to src/components/menus/index.ts
diff --git a/src/components/menus/media/components/controls/Modes.tsx b/src/components/menus/media/components/controls/Modes.tsx
index 54597f4..9b425a8 100644
--- a/src/components/menus/media/components/controls/Modes.tsx
+++ b/src/components/menus/media/components/controls/Modes.tsx
@@ -1,12 +1,10 @@
 import icons from 'src/lib/icons/icons';
 import { Astal, Gtk, Widget } from 'astal/gtk3';
-import { isPrimaryClick } from 'src/lib/utils';
 import { bind } from 'astal';
 import { isLoopActive, isShuffleActive, loopIconMap, loopTooltipMap } from './helpers';
 import AstalMpris from 'gi://AstalMpris?version=0.1';
-import { activePlayer, loopStatus, shuffleStatus } from 'src/shared/media';
-
-export type LoopStatus = 'none' | 'track' | 'playlist';
+import { loopStatus, activePlayer, shuffleStatus } from 'src/services/media';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const Loop = (): JSX.Element => {
     const className = bind(loopStatus).as((status) => {
diff --git a/src/components/menus/media/components/controls/PlayPause.tsx b/src/components/menus/media/components/controls/PlayPause.tsx
index bc52135..0f30d72 100644
--- a/src/components/menus/media/components/controls/PlayPause.tsx
+++ b/src/components/menus/media/components/controls/PlayPause.tsx
@@ -1,9 +1,9 @@
 import { Astal, Gtk, Widget } from 'astal/gtk3';
-import { isPrimaryClick } from 'src/lib/utils';
 import { bind } from 'astal';
 import { getPlaybackIcon } from './helpers';
 import AstalMpris from 'gi://AstalMpris?version=0.1';
-import { activePlayer, canPlay, playbackStatus } from 'src/shared/media';
+import { canPlay, playbackStatus, activePlayer } from 'src/services/media';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const PlayPause = (): JSX.Element => {
     const className = bind(canPlay).as((canPlay) => {
diff --git a/src/components/menus/media/components/controls/Players.tsx b/src/components/menus/media/components/controls/Players.tsx
index cb4f841..efd7e78 100644
--- a/src/components/menus/media/components/controls/Players.tsx
+++ b/src/components/menus/media/components/controls/Players.tsx
@@ -1,8 +1,8 @@
 import { bind } from 'astal';
 import { Astal, Gtk, Widget } from 'astal/gtk3';
-import { isPrimaryClick } from 'src/lib/utils';
 import { getNextPlayer, getPreviousPlayer } from './helpers';
 import AstalMpris from 'gi://AstalMpris?version=0.1';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 const mprisService = AstalMpris.get_default();
 
diff --git a/src/components/menus/media/components/controls/Tracks.tsx b/src/components/menus/media/components/controls/Tracks.tsx
index bd1e8b1..3d9ab78 100644
--- a/src/components/menus/media/components/controls/Tracks.tsx
+++ b/src/components/menus/media/components/controls/Tracks.tsx
@@ -1,8 +1,8 @@
 import icons from 'src/lib/icons/icons';
 import { Astal, Gtk, Widget } from 'astal/gtk3';
-import { isPrimaryClick } from 'src/lib/utils';
 import { bind } from 'astal';
-import { activePlayer, canGoNext, canGoPrevious } from 'src/shared/media';
+import { canGoNext, activePlayer, canGoPrevious } from 'src/services/media';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const NextTrack = (): JSX.Element => {
     const className = bind(canGoNext).as((skippable) => {
diff --git a/src/components/menus/media/components/controls/helpers.ts b/src/components/menus/media/components/controls/helpers.ts
index f81e341..f4d2ef9 100644
--- a/src/components/menus/media/components/controls/helpers.ts
+++ b/src/components/menus/media/components/controls/helpers.ts
@@ -1,7 +1,7 @@
 import AstalMpris from 'gi://AstalMpris?version=0.1';
-import { activePlayer } from 'src/shared/media';
-import icons2 from 'src/lib/icons/icons2';
-import { PlaybackIconMap } from 'src/lib/types/mpris.types';
+import icons2 from 'src/lib/icons/icons';
+import { activePlayer } from 'src/services/media';
+import { PlaybackIconMap } from './types';
 
 const mprisService = AstalMpris.get_default();
 
diff --git a/src/lib/types/mpris.types.ts b/src/components/menus/media/components/controls/types.ts
similarity index 60%
rename from src/lib/types/mpris.types.ts
rename to src/components/menus/media/components/controls/types.ts
index 6ce710e..772c895 100644
--- a/src/lib/types/mpris.types.ts
+++ b/src/components/menus/media/components/controls/types.ts
@@ -1,4 +1,4 @@
-import AstalMpris from 'gi://AstalMpris?version=0.1';
+import AstalMpris from 'gi://AstalMpris';
 
 export type PlaybackIconMap = {
     [key in AstalMpris.PlaybackStatus]: string;
diff --git a/src/components/menus/media/components/helpers.ts b/src/components/menus/media/components/helpers.ts
index 49c413b..50ca91c 100644
--- a/src/components/menus/media/components/helpers.ts
+++ b/src/components/menus/media/components/helpers.ts
@@ -1,13 +1,23 @@
 import { Binding } from 'astal';
 import { bind, Variable } from 'astal';
-import AstalMpris from 'gi://AstalMpris?version=0.1';
-import { mediaArtUrl } from 'src/shared/media';
-import options from 'src/options';
+import options from 'src/configuration';
+import { mediaArtUrl } from 'src/services/media';
 
-const mprisService = AstalMpris.get_default();
 const { tint, color } = options.theme.bar.menus.menu.media.card;
 
-const curPlayer = Variable('');
+/**
+ * Retrieves the background binding for the media card.
+ *
+ * This function sets up a derived variable that updates the background CSS for the media card
+ * based on the current theme settings for color, tint, and media art URL.
+ *
+ * @returns A Binding<string> representing the background CSS for the media card.
+ */
+export const getBackground = (): Binding<string> => {
+    return Variable.derive([bind(color), bind(tint), bind(mediaArtUrl)], (_, __, artUrl) => {
+        return generateAlbumArt(artUrl);
+    })();
+};
 
 /**
  * Generates CSS for album art with a tinted background.
@@ -19,7 +29,7 @@ const curPlayer = Variable('');
  *
  * @returns A CSS string for the album art background.
  */
-export const generateAlbumArt = (imageUrl: string): string => {
+function generateAlbumArt(imageUrl: string): string {
     const userTint = tint.get();
     const userHexColor = color.get();
 
@@ -36,50 +46,4 @@ export const generateAlbumArt = (imageUrl: string): string => {
             ), url("${imageUrl}");`;
 
     return css;
-};
-
-/**
- * Initializes the active player hook.
- *
- * This function sets up a listener for changes in the MPRIS service.
- * It updates the current player based on the playback status and the order of players.
- */
-export const initializeActivePlayerHook = (): void => {
-    mprisService.connect('changed', () => {
-        const statusOrder = {
-            [AstalMpris.PlaybackStatus.PLAYING]: 1,
-            [AstalMpris.PlaybackStatus.PAUSED]: 2,
-            [AstalMpris.PlaybackStatus.STOPPED]: 3,
-        };
-
-        const isPlaying = mprisService
-            .get_players()
-            .find((p) => p['playbackStatus'] === AstalMpris.PlaybackStatus.PLAYING);
-
-        const playerStillExists = mprisService
-            .get_players()
-            .some((player) => curPlayer.get() === player.busName);
-
-        const nextPlayerUp = mprisService
-            .get_players()
-            .sort((a, b) => statusOrder[a.playbackStatus] - statusOrder[b.playbackStatus])[0].bus_name;
-
-        if (isPlaying || !playerStillExists) {
-            curPlayer.set(nextPlayerUp);
-        }
-    });
-};
-
-/**
- * Retrieves the background binding for the media card.
- *
- * This function sets up a derived variable that updates the background CSS for the media card
- * based on the current theme settings for color, tint, and media art URL.
- *
- * @returns A Binding<string> representing the background CSS for the media card.
- */
-export const getBackground = (): Binding<string> => {
-    return Variable.derive([bind(color), bind(tint), bind(mediaArtUrl)], (_, __, artUrl) => {
-        return generateAlbumArt(artUrl);
-    })();
-};
+}
diff --git a/src/components/menus/media/components/timebar/helpers.ts b/src/components/menus/media/components/timebar/helpers.ts
index 6afea36..e954aea 100644
--- a/src/components/menus/media/components/timebar/helpers.ts
+++ b/src/components/menus/media/components/timebar/helpers.ts
@@ -27,7 +27,7 @@ export const getTimeStamp = (position: number, totalLength: number): string => {
  *
  * @returns A formatted time string in the format "HH:MM:SS" or "MM:SS".
  */
-export const getFormattedTime = (time: number): string => {
+function getFormattedTime(time: number): string {
     const curHour = Math.floor(time / 3600);
     const curMin = Math.floor((time % 3600) / 60);
     const curSec = Math.floor(time % 60);
@@ -41,4 +41,4 @@ export const getFormattedTime = (time: number): string => {
     };
 
     return `${formatHour(curHour)}${formatTime(curMin)}:${formatTime(curSec)}`;
-};
+}
diff --git a/src/components/menus/media/components/timebar/index.tsx b/src/components/menus/media/components/timebar/index.tsx
index 482af11..8d84e52 100644
--- a/src/components/menus/media/components/timebar/index.tsx
+++ b/src/components/menus/media/components/timebar/index.tsx
@@ -1,7 +1,7 @@
-import options from 'src/options';
 import { bind, Variable } from 'astal';
 import { Widget } from 'astal/gtk3';
-import { activePlayer, currentPosition, timeStamp } from 'src/shared/media';
+import options from 'src/configuration';
+import { activePlayer, currentPosition, timeStamp } from 'src/services/media';
 
 const { displayTimeTooltip } = options.menus.media;
 
diff --git a/src/components/menus/media/components/timelabel/index.tsx b/src/components/menus/media/components/timelabel/index.tsx
index 73b7730..1fe758f 100644
--- a/src/components/menus/media/components/timelabel/index.tsx
+++ b/src/components/menus/media/components/timelabel/index.tsx
@@ -1,6 +1,6 @@
-import options from 'src/options';
 import { bind } from 'astal';
-import { timeStamp } from 'src/shared/media';
+import options from 'src/configuration';
+import { timeStamp } from 'src/services/media';
 
 const { displayTime } = options.menus.media;
 
diff --git a/src/components/menus/media/components/title/SongAlbum.tsx b/src/components/menus/media/components/title/SongAlbum.tsx
index 5458613..742cd67 100644
--- a/src/components/menus/media/components/title/SongAlbum.tsx
+++ b/src/components/menus/media/components/title/SongAlbum.tsx
@@ -1,7 +1,7 @@
-import options from 'src/options';
 import { Gtk } from 'astal/gtk3';
 import { bind } from 'astal';
-import { mediaAlbum } from 'src/shared/media';
+import { mediaAlbum } from 'src/services/media';
+import options from 'src/configuration';
 
 const { hideAlbum } = options.menus.media;
 
diff --git a/src/components/menus/media/components/title/SongAuthor.tsx b/src/components/menus/media/components/title/SongAuthor.tsx
index 6bf8f28..4a2dc8c 100644
--- a/src/components/menus/media/components/title/SongAuthor.tsx
+++ b/src/components/menus/media/components/title/SongAuthor.tsx
@@ -1,7 +1,7 @@
-import options from 'src/options';
 import { Gtk } from 'astal/gtk3';
 import { bind } from 'astal';
-import { mediaArtist } from 'src/shared/media';
+import { mediaArtist } from 'src/services/media';
+import options from 'src/configuration';
 
 const { hideAuthor } = options.menus.media;
 
diff --git a/src/components/menus/media/components/title/SongName.tsx b/src/components/menus/media/components/title/SongName.tsx
index 38bdf1c..ae23a0e 100644
--- a/src/components/menus/media/components/title/SongName.tsx
+++ b/src/components/menus/media/components/title/SongName.tsx
@@ -1,6 +1,6 @@
 import { Gtk } from 'astal/gtk3';
 import { bind } from 'astal';
-import { mediaTitle } from 'src/shared/media';
+import { mediaTitle } from 'src/services/media';
 
 export const SongName = (): JSX.Element => {
     return (
diff --git a/src/components/menus/media/index.tsx b/src/components/menus/media/index.tsx
index 8745a04..ae8bc4f 100644
--- a/src/components/menus/media/index.tsx
+++ b/src/components/menus/media/index.tsx
@@ -1,12 +1,12 @@
 import { bind } from 'astal';
 import DropdownMenu from '../shared/dropdown/index.js';
-import options from 'src/options.js';
+import options from 'src/configuration';
 import { MediaContainer } from './components/MediaContainer.js';
 import { MediaInfo } from './components/title/index.js';
 import { MediaControls } from './components/controls/index.js';
 import { MediaSlider } from './components/timebar/index.js';
 import { MediaTimeStamp } from './components/timelabel/index.js';
-import { RevealerTransitionMap } from 'src/lib/constants/options.js';
+import { RevealerTransitionMap } from 'src/components/settings/constants.js';
 
 const { transition } = options.menus;
 
diff --git a/src/components/menus/network/ethernet/helpers.ts b/src/components/menus/network/ethernet/helpers.ts
deleted file mode 100644
index 5e87ca7..0000000
--- a/src/components/menus/network/ethernet/helpers.ts
+++ /dev/null
@@ -1,105 +0,0 @@
-import { bind, Variable } from 'astal';
-import AstalNetwork from 'gi://AstalNetwork?version=0.1';
-
-const networkService = AstalNetwork.get_default();
-
-/*******************************************
- *                 Values                  *
- *******************************************/
-export const wiredState: Variable<AstalNetwork.DeviceState> = Variable(AstalNetwork.DeviceState.UNKNOWN);
-export const wiredInternet: Variable<AstalNetwork.Internet> = Variable(AstalNetwork.Internet.DISCONNECTED);
-export const wiredIcon: Variable<string> = Variable('');
-export const wiredSpeed: Variable<number> = Variable(0);
-
-/*******************************************
- *                Bindings                 *
- *******************************************/
-let wiredStateBinding: Variable<void> | undefined;
-let wiredInternetBinding: Variable<void> | undefined;
-let wiredIconBinding: Variable<void> | undefined;
-let wiredSpeedBinding: Variable<void> | undefined;
-
-/**
- * Retrieves the current state of the wired network.
- *
- * This function sets up a binding to the `state` property of the wired network service.
- * If the wired network service is available, it updates the `wiredState` variable with the current state.
- */
-const getWiredState = (): void => {
-    wiredStateBinding?.drop();
-    wiredStateBinding = undefined;
-
-    if (networkService.wired === null) {
-        wiredState.set(AstalNetwork.DeviceState.UNAVAILABLE);
-        return;
-    }
-
-    wiredStateBinding = Variable.derive([bind(networkService.wired, 'state')], (state) => {
-        wiredState.set(state);
-    });
-};
-
-/**
- * Retrieves the current internet status of the wired network.
- *
- * This function sets up a binding to the `internet` property of the wired network service.
- * If the wired network service is available, it updates the `wiredInternet` variable with the current internet status.
- */
-const getWiredInternet = (): void => {
-    wiredInternetBinding?.drop();
-    wiredInternetBinding = undefined;
-
-    if (networkService.wired === null) {
-        return;
-    }
-
-    wiredInternetBinding = Variable.derive([bind(networkService.wired, 'internet')], (internet) => {
-        wiredInternet.set(internet);
-    });
-};
-
-/**
- * Retrieves the current icon for the wired network.
- *
- * This function sets up a binding to the `iconName` property of the wired network service.
- * If the wired network service is available, it updates the `wiredIcon` variable with the current icon name.
- */
-const getWiredIcon = (): void => {
-    wiredIconBinding?.drop();
-    wiredIconBinding = undefined;
-
-    if (networkService.wired === null) {
-        wiredIcon.set('network-wired-symbolic');
-        return;
-    }
-
-    wiredIconBinding = Variable.derive([bind(networkService.wired, 'iconName')], (icon) => {
-        wiredIcon.set(icon);
-    });
-};
-
-/**
- * Retrieves the current speed of the wired network.
- *
- * This function sets up a binding to the `speed` property of the wired network service.
- * If the wired network service is available, it updates the `wiredSpeed` variable with the current speed.
- */
-const getWiredSpeed = (): void => {
-    wiredSpeedBinding?.drop();
-    wiredSpeedBinding = undefined;
-
-    if (networkService.wired === null) {
-        return;
-    }
-
-    wiredSpeedBinding = Variable.derive([bind(networkService.wired, 'speed')], (speed) => {
-        wiredSpeed.set(speed);
-    });
-};
-
-Variable.derive([bind(networkService, 'wired')], () => {
-    getWiredState();
-    getWiredInternet();
-    getWiredIcon();
-    getWiredSpeed();
-});
diff --git a/src/components/menus/network/ethernet/index.tsx b/src/components/menus/network/ethernet/index.tsx
index 3ed955d..34fa773 100644
--- a/src/components/menus/network/ethernet/index.tsx
+++ b/src/components/menus/network/ethernet/index.tsx
@@ -1,8 +1,10 @@
 import { Gtk } from 'astal/gtk3';
 import { bind } from 'astal/binding';
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
-import { DEVICE_STATES } from 'src/lib/constants/network';
-import { wiredIcon, wiredInternet, wiredSpeed, wiredState } from './helpers';
+import { DEVICE_STATES } from 'src/services/network/types';
+import { NetworkService } from 'src/services/network';
+
+const networkService = NetworkService.getInstance();
 
 export const Ethernet = (): JSX.Element => {
     return (
@@ -15,13 +17,13 @@ export const Ethernet = (): JSX.Element => {
                     <box className={'network-element-item'}>
                         <box halign={Gtk.Align.START}>
                             <icon
-                                className={bind(wiredState).as((state) => {
+                                className={bind(networkService.ethernet.wiredState).as((state) => {
                                     return `network-icon ethernet ${state === AstalNetwork.DeviceState.ACTIVATED ? 'active' : ''}`;
                                 })}
-                                tooltipText={bind(wiredInternet).as((internet) => {
+                                tooltipText={bind(networkService.ethernet.wiredInternet).as((internet) => {
                                     return internet.toString();
                                 })}
-                                icon={bind(wiredIcon)}
+                                icon={bind(networkService.ethernet.wiredIcon)}
                             />
                             <box className={'connection-container'} vertical>
                                 <label
@@ -29,7 +31,7 @@ export const Ethernet = (): JSX.Element => {
                                     halign={Gtk.Align.START}
                                     truncate
                                     wrap
-                                    label={bind(wiredSpeed).as((speed) => {
+                                    label={bind(networkService.ethernet.wiredSpeed).as((speed) => {
                                         return `Ethernet Connection (${speed} Mbps)`;
                                     })}
                                 />
@@ -38,7 +40,7 @@ export const Ethernet = (): JSX.Element => {
                                     halign={Gtk.Align.START}
                                     truncate
                                     wrap
-                                    label={bind(wiredState).as((state) => {
+                                    label={bind(networkService.ethernet.wiredState).as((state) => {
                                         return DEVICE_STATES[state];
                                     })}
                                 />
diff --git a/src/components/menus/network/index.tsx b/src/components/menus/network/index.tsx
index db2571d..63f65c7 100644
--- a/src/components/menus/network/index.tsx
+++ b/src/components/menus/network/index.tsx
@@ -1,11 +1,11 @@
 import DropdownMenu from '../shared/dropdown/index.js';
 import { Ethernet } from './ethernet/index.js';
 import { Wifi } from './wifi/index.js';
-import options from 'src/options.js';
 import { bind } from 'astal';
 import { NoWifi } from './wifi/WirelessAPs/NoWifi.js';
-import { RevealerTransitionMap } from 'src/lib/constants/options.js';
+import { RevealerTransitionMap } from 'src/components/settings/constants.js';
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
+import options from 'src/configuration';
 
 const networkService = AstalNetwork.get_default();
 
diff --git a/src/components/menus/network/types.ts b/src/components/menus/network/types.ts
new file mode 100644
index 0000000..fe8d999
--- /dev/null
+++ b/src/components/menus/network/types.ts
@@ -0,0 +1 @@
+export type WifiIcon = '󰤩' | '󰤨' | '󰤪' | '󰤨' | '󰤩' | '󰤮' | '󰤨' | '󰤥' | '󰤢' | '󰤟' | '󰤯';
diff --git a/src/components/menus/network/utils.ts b/src/components/menus/network/utils.ts
deleted file mode 100644
index 42821f6..0000000
--- a/src/components/menus/network/utils.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { WifiIcon } from 'src/lib/types/network.types';
-
-/**
- * Retrieves the appropriate WiFi icon based on the provided icon name.
- *
- * This function returns a WiFi icon based on the given icon name. If the icon name is not provided,
- * it returns a default icon. It uses a predefined mapping of device icon names to WiFi icons.
- *
- * @param iconName The name of the icon to look up. If not provided, a default icon is returned.
- *
- * @returns The corresponding WiFi icon as a string.
- */
-const getWifiIcon = (iconName?: string): WifiIcon => {
-    if (iconName === undefined) {
-        return '󰤫' as WifiIcon;
-    }
-    const deviceIconMap: [string, WifiIcon][] = [
-        ['network-wireless-acquiring', '󰤩'],
-        ['network-wireless-connected', '󰤨'],
-        ['network-wireless-encrypted', '󰤪'],
-        ['network-wireless-hotspot', '󰤨'],
-        ['network-wireless-no-route', '󰤩'],
-        ['network-wireless-offline', '󰤮'],
-        ['network-wireless-signal-excellent', '󰤨'],
-        ['network-wireless-signal-good', '󰤥'],
-        ['network-wireless-signal-ok', '󰤢'],
-        ['network-wireless-signal-weak', '󰤟'],
-        ['network-wireless-signal-none', '󰤯'],
-    ];
-
-    const foundMatch = deviceIconMap.find((icon) => RegExp(icon[0]).test(iconName.toLowerCase()));
-
-    return foundMatch ? foundMatch[1] : '󰤨';
-};
-
-export { getWifiIcon };
diff --git a/src/components/menus/network/wifi/APStaging/PasswordInput.tsx b/src/components/menus/network/wifi/APStaging/PasswordInput.tsx
index db86b87..8d49d3a 100644
--- a/src/components/menus/network/wifi/APStaging/PasswordInput.tsx
+++ b/src/components/menus/network/wifi/APStaging/PasswordInput.tsx
@@ -1,10 +1,11 @@
-import { Gdk, Gtk } from 'astal/gtk3';
-import { isPrimaryClick, Notify } from 'src/lib/utils';
+import { Gtk } from 'astal/gtk3';
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
-import { execAsync, Variable } from 'astal';
+import { Variable } from 'astal';
+import { isPrimaryClick } from 'src/lib/events/mouse';
+import { handlePasswordInput } from './helpers';
 
 export const PasswordInput = ({ connecting, staging }: PasswordInputProps): JSX.Element => {
-    const shouldMaskPassword = true;
+    const showPassword = true;
 
     return (
         <box className="network-password-input-container" halign={Gtk.Align.FILL} hexpand>
@@ -12,33 +13,13 @@ export const PasswordInput = ({ connecting, staging }: PasswordInputProps): JSX.
                 className="network-password-input"
                 hexpand
                 halign={Gtk.Align.START}
-                visibility={shouldMaskPassword}
+                visibility={!showPassword}
                 placeholderText="Enter Password"
                 onKeyPressEvent={(self, event) => {
-                    const keyPressed = event.get_keyval()[1];
-
-                    if (keyPressed === Gdk.KEY_Return) {
-                        connecting.set(staging.get()?.bssid ?? '');
-
-                        const connectCommand = `nmcli device wifi connect "${staging.get()?.ssid}" password "${self.text}"`;
-
-                        execAsync(connectCommand)
-                            .catch((err) => {
-                                connecting.set('');
-
-                                Notify({
-                                    summary: 'Network',
-                                    body: err.message,
-                                });
-                            })
-                            .then(() => {
-                                connecting.set('');
-
-                                staging.set({} as AstalNetwork.AccessPoint);
-                            });
-
-                        self.text = '';
-                    }
+                    handlePasswordInput(self, event, staging);
+                }}
+                setup={(self) => {
+                    setTimeout(() => self.grab_focus(), 100);
                 }}
             />
             <button
@@ -47,7 +28,7 @@ export const PasswordInput = ({ connecting, staging }: PasswordInputProps): JSX.
                 onClick={(_, event) => {
                     if (isPrimaryClick(event)) {
                         connecting.set('');
-                        staging.set({} as AstalNetwork.AccessPoint);
+                        staging.set(undefined);
                     }
                 }}
             >
diff --git a/src/components/menus/network/wifi/APStaging/helpers/index.ts b/src/components/menus/network/wifi/APStaging/helpers/index.ts
new file mode 100644
index 0000000..a5067df
--- /dev/null
+++ b/src/components/menus/network/wifi/APStaging/helpers/index.ts
@@ -0,0 +1,35 @@
+import { Variable } from 'astal';
+import { Gdk } from 'astal/gtk3';
+import { Entry } from 'astal/gtk3/widget';
+import AstalNetwork from 'gi://AstalNetwork?version=0.1';
+import { NetworkService } from 'src/services/network';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+
+const networkService = NetworkService.getInstance();
+
+export function handlePasswordInput(
+    self: Entry,
+    event: Gdk.Event,
+    staging: Variable<AstalNetwork.AccessPoint | undefined>,
+): void {
+    const keyPressed = event.get_keyval()[1];
+    const accessPoint = staging.get();
+    const password = self.text;
+
+    if (keyPressed !== Gdk.KEY_Return || password.length === 0 || !accessPoint) {
+        return;
+    }
+
+    networkService.wifi.connectToAPWithPassword(accessPoint, password).catch((err) => {
+        if (self.is_visible() && self.get_realized()) {
+            self.grab_focus();
+        }
+
+        SystemUtilities.notify({
+            summary: 'Network',
+            body: err.message,
+        });
+
+        self.text = '';
+    });
+}
diff --git a/src/components/menus/network/wifi/APStaging/index.tsx b/src/components/menus/network/wifi/APStaging/index.tsx
index 2486f34..45d9455 100644
--- a/src/components/menus/network/wifi/APStaging/index.tsx
+++ b/src/components/menus/network/wifi/APStaging/index.tsx
@@ -2,24 +2,34 @@ import { bind } from 'astal/binding';
 import { Variable } from 'astal';
 import { AccessPoint } from './AccessPoint';
 import { PasswordInput } from './PasswordInput';
-import { connecting, staging } from '../WirelessAPs/helpers';
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
+import { NetworkService } from 'src/services/network';
 
-const networkService = AstalNetwork.get_default();
+const networkService = NetworkService.getInstance();
+const astalNetwork = AstalNetwork.get_default();
 
 export const APStaging = (): JSX.Element => {
-    const stagingBinding = Variable.derive([bind(networkService, 'wifi'), bind(staging)], () => {
-        if (staging.get()?.ssid === undefined) {
-            return <box />;
-        }
+    const stagingBinding = Variable.derive(
+        [bind(astalNetwork, 'wifi'), bind(networkService.wifi.staging)],
+        () => {
+            if (networkService.wifi.staging.get()?.ssid === undefined) {
+                return <box />;
+            }
 
-        return (
-            <box className="network-element-item staging" vertical>
-                <AccessPoint connecting={connecting} staging={staging} />
-                <PasswordInput connecting={connecting} staging={staging} />
-            </box>
-        );
-    });
+            return (
+                <box className="network-element-item staging" vertical>
+                    <AccessPoint
+                        connecting={networkService.wifi.connecting}
+                        staging={networkService.wifi.staging}
+                    />
+                    <PasswordInput
+                        connecting={networkService.wifi.connecting}
+                        staging={networkService.wifi.staging}
+                    />
+                </box>
+            );
+        },
+    );
     return (
         <box
             className="wap-staging"
diff --git a/src/components/menus/network/wifi/Controls/RefreshButton.tsx b/src/components/menus/network/wifi/Controls/RefreshButton.tsx
index 7161ab0..7d9b928 100644
--- a/src/components/menus/network/wifi/Controls/RefreshButton.tsx
+++ b/src/components/menus/network/wifi/Controls/RefreshButton.tsx
@@ -1,10 +1,11 @@
 import { Gtk } from 'astal/gtk3';
 import { bind } from 'astal';
-import { isPrimaryClick } from 'src/lib/utils';
-import { isScanning } from './helpers';
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
+import { isPrimaryClick } from 'src/lib/events/mouse';
+import { NetworkService } from 'src/services/network';
 
-const networkService = AstalNetwork.get_default();
+const networkService = NetworkService.getInstance();
+const astalNetwork = AstalNetwork.get_default();
 
 export const RefreshButton = (): JSX.Element => {
     return (
@@ -14,12 +15,14 @@ export const RefreshButton = (): JSX.Element => {
             halign={Gtk.Align.END}
             onClick={(_, event) => {
                 if (isPrimaryClick(event)) {
-                    networkService.wifi?.scan();
+                    astalNetwork.wifi?.scan();
                 }
             }}
         >
             <icon
-                className={bind(isScanning).as((scanning) => (scanning ? 'spinning-icon' : ''))}
+                className={bind(networkService.wifi.isScanning).as((scanning) =>
+                    scanning ? 'spinning-icon' : '',
+                )}
                 icon="view-refresh-symbolic"
             />
         </button>
diff --git a/src/components/menus/network/wifi/Controls/helpers.ts b/src/components/menus/network/wifi/Controls/helpers.ts
deleted file mode 100644
index 7cf69f9..0000000
--- a/src/components/menus/network/wifi/Controls/helpers.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { bind, Variable } from 'astal';
-import AstalNetwork from 'gi://AstalNetwork?version=0.1';
-
-const networkService = AstalNetwork.get_default();
-
-export const isScanning: Variable<boolean> = Variable(false);
-let scanningBinding: Variable<void> | undefined;
-
-Variable.derive([bind(networkService, 'wifi')], () => {
-    scanningBinding?.drop();
-    scanningBinding = undefined;
-
-    if (networkService.wifi === null) {
-        return;
-    }
-
-    scanningBinding = Variable.derive([bind(networkService.wifi, 'scanning')], (scanning) => {
-        isScanning.set(scanning);
-    });
-});
diff --git a/src/components/menus/network/wifi/WirelessAPs/AccessPoint.tsx b/src/components/menus/network/wifi/WirelessAPs/AccessPoint.tsx
index e02be69..1766b43 100644
--- a/src/components/menus/network/wifi/WirelessAPs/AccessPoint.tsx
+++ b/src/components/menus/network/wifi/WirelessAPs/AccessPoint.tsx
@@ -1,19 +1,19 @@
 import { Variable } from 'astal';
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
-import { getWifiIcon } from '../../utils';
-import { connectToAP, getWifiStatus, isDisconnecting, isApEnabled, isApActive } from './helpers';
+import { NetworkService } from 'src/services/network';
 import { Gtk } from 'astal/gtk3';
 import Spinner from 'src/components/shared/Spinner';
 
-const networkService = AstalNetwork.get_default();
+const networkService = NetworkService.getInstance();
+const astalNetwork = AstalNetwork.get_default();
 
 export const AccessPoint = ({ connecting, accessPoint }: AccessPointProps): JSX.Element => {
     const ConnectionIcon = (): JSX.Element => {
         return (
             <label
                 valign={Gtk.Align.START}
-                className={`network-icon wifi ${isApActive(accessPoint) ? 'active' : ''} txt-icon`}
-                label={getWifiIcon(accessPoint.iconName)}
+                className={`network-icon wifi ${networkService.wifi.isApActive(accessPoint) ? 'active' : ''} txt-icon`}
+                label={networkService.getWifiIcon(accessPoint.iconName)}
             />
         );
     };
@@ -28,11 +28,16 @@ export const AccessPoint = ({ connecting, accessPoint }: AccessPointProps): JSX.
                     wrap
                     label={accessPoint.ssid ?? ''}
                 />
-                <revealer revealChild={isApActive(accessPoint) && isApEnabled(networkService.wifi?.state)}>
+                <revealer
+                    revealChild={
+                        networkService.wifi.isApActive(accessPoint) &&
+                        networkService.wifi.isApEnabled(astalNetwork.wifi?.state)
+                    }
+                >
                     <label
                         className="connection-status dim"
                         halign={Gtk.Align.START}
-                        label={getWifiStatus()}
+                        label={networkService.wifi.getWifiStatus()}
                     />
                 </revealer>
             </box>
@@ -44,7 +49,9 @@ export const AccessPoint = ({ connecting, accessPoint }: AccessPointProps): JSX.
             <revealer
                 halign={Gtk.Align.END}
                 valign={Gtk.Align.CENTER}
-                revealChild={accessPoint.bssid === connecting.get() || isDisconnecting(accessPoint)}
+                revealChild={
+                    accessPoint.bssid === connecting.get() || networkService.wifi.isDisconnecting(accessPoint)
+                }
             >
                 <Spinner
                     className="spinner wap"
@@ -62,7 +69,7 @@ export const AccessPoint = ({ connecting, accessPoint }: AccessPointProps): JSX.
         <button
             className="network-element-item"
             onClick={(_, event) => {
-                connectToAP(accessPoint, event);
+                networkService.wifi.connectToAP(accessPoint, event);
             }}
         >
             <box hexpand>
diff --git a/src/components/menus/network/wifi/WirelessAPs/Controls.tsx b/src/components/menus/network/wifi/WirelessAPs/Controls.tsx
index 8ba65d1..92fd1e7 100644
--- a/src/components/menus/network/wifi/WirelessAPs/Controls.tsx
+++ b/src/components/menus/network/wifi/WirelessAPs/Controls.tsx
@@ -1,7 +1,9 @@
 import { Variable } from 'astal';
-import { disconnectFromAP, forgetAP, isApActive } from './helpers';
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
 import { Gtk } from 'astal/gtk3';
+import { NetworkService } from 'src/services/network';
+
+const networkService = NetworkService.getInstance();
 
 export const Controls = ({ connecting, accessPoint }: ControlsProps): JSX.Element => {
     const DisconnectButton = (): JSX.Element => {
@@ -9,7 +11,7 @@ export const Controls = ({ connecting, accessPoint }: ControlsProps): JSX.Elemen
             <button
                 className="menu-icon-button network disconnect"
                 onClick={(_, event) => {
-                    disconnectFromAP(accessPoint, event);
+                    networkService.wifi.disconnectFromAP(accessPoint, event);
                 }}
             >
                 <label
@@ -27,7 +29,7 @@ export const Controls = ({ connecting, accessPoint }: ControlsProps): JSX.Elemen
                 className="menu-icon-button network disconnect"
                 tooltipText="Delete/Forget Network"
                 onClick={(_, event) => {
-                    forgetAP(accessPoint, event);
+                    networkService.wifi.forgetAP(accessPoint, event);
                 }}
             >
                 <label className="txt-icon delete-network" label="󰚃" />
@@ -37,7 +39,9 @@ export const Controls = ({ connecting, accessPoint }: ControlsProps): JSX.Elemen
 
     return (
         <revealer
-            revealChild={accessPoint.bssid !== connecting.get() && isApActive(accessPoint)}
+            revealChild={
+                accessPoint.bssid !== connecting.get() && networkService.wifi.isApActive(accessPoint)
+            }
             valign={Gtk.Align.START}
         >
             <box className={'network-element-controls-container'}>
diff --git a/src/components/menus/network/wifi/WirelessAPs/helpers.ts b/src/components/menus/network/wifi/WirelessAPs/helpers.ts
deleted file mode 100644
index 9644f5e..0000000
--- a/src/components/menus/network/wifi/WirelessAPs/helpers.ts
+++ /dev/null
@@ -1,318 +0,0 @@
-import { bind, execAsync, Variable } from 'astal';
-import { Astal } from 'astal/gtk3';
-import AstalNetwork from 'gi://AstalNetwork?version=0.1';
-import { DEVICE_STATES } from 'src/lib/constants/network';
-import { isPrimaryClick, Notify } from 'src/lib/utils';
-
-const networkService = AstalNetwork.get_default();
-
-export const isWifiEnabled: Variable<boolean> = Variable(false);
-export const wifiAccessPoints: Variable<AstalNetwork.AccessPoint[]> = Variable([]);
-
-let wifiEnabledBinding: Variable<void> | undefined;
-let accessPointBinding: Variable<void> | undefined;
-
-export const staging = Variable<AstalNetwork.AccessPoint | undefined>(undefined);
-export const connecting = Variable<string>('');
-
-/**
- * Checks if WiFi is enabled and updates the `isWifiEnabled` variable.
- *
- * This function sets up a binding to the `enabled` property of the WiFi service.
- * If the WiFi service is available, it updates the `isWifiEnabled` variable based on the enabled state.
- */
-const wifiEnabled = (): void => {
-    wifiEnabledBinding?.drop();
-    wifiEnabledBinding = undefined;
-
-    if (networkService.wifi === null) {
-        return;
-    }
-
-    wifiEnabledBinding = Variable.derive([bind(networkService.wifi, 'enabled')], (isEnabled) => {
-        isWifiEnabled.set(isEnabled);
-    });
-};
-
-/**
- * Updates the list of WiFi access points.
- *
- * This function sets up a binding to the `accessPoints` property of the WiFi service.
- * If the WiFi service is available, it updates the `wifiAccessPoints` variable with the list of access points.
- */
-const accessPoints = (): void => {
-    accessPointBinding?.drop();
-    accessPointBinding = undefined;
-
-    if (networkService.wifi === null) {
-        return;
-    }
-
-    Variable.derive([bind(networkService.wifi, 'accessPoints')], (axsPoints) => {
-        wifiAccessPoints.set(axsPoints);
-    });
-};
-
-/**
- * Removes duplicate access points based on their SSID.
- *
- * This function iterates through the list of access points and removes duplicates based on their SSID.
- * It returns an array of deduplicated access points.
- *
- * @returns An array of deduplicated access points.
- */
-const dedupeWAPs = (): AstalNetwork.AccessPoint[] => {
-    if (networkService.wifi === null) {
-        return [];
-    }
-
-    const WAPs = networkService.wifi.get_access_points();
-    const dedupMap: Record<string, AstalNetwork.AccessPoint> = {};
-
-    WAPs.forEach((item: AstalNetwork.AccessPoint) => {
-        if (item.ssid !== null && !Object.prototype.hasOwnProperty.call(dedupMap, item.ssid)) {
-            dedupMap[item.ssid] = item;
-        }
-    });
-
-    return Object.keys(dedupMap).map((itm) => dedupMap[itm]);
-};
-
-/**
- * Determines if a given access point is currently in the staging area.
- *
- * This function checks if the provided access point is in the staging area by comparing its BSSID with the BSSID of the staged access point.
- *
- * @param wap The access point to check.
- *
- * @returns True if the access point is in staging; otherwise, false.
- */
-const isInStaging = (wap: AstalNetwork.AccessPoint): boolean => {
-    const wapInStaging = staging.get();
-    if (wapInStaging === undefined) {
-        return false;
-    }
-
-    return wap.bssid === wapInStaging.bssid;
-};
-
-/**
- * Retrieves a list of filtered wireless access points by removing duplicates and excluding specific entries.
- *
- * This function filters the list of access points by removing duplicates and excluding access points with the SSID 'Unknown' or those in the staging area.
- * It also sorts the access points by their signal strength and active status.
- *
- * @returns A filtered array of wireless access points.
- */
-export const getFilteredWirelessAPs = (): AstalNetwork.AccessPoint[] => {
-    const dedupedWAPs = dedupeWAPs();
-
-    const filteredWAPs = dedupedWAPs
-        .filter((ap: AstalNetwork.AccessPoint) => {
-            return ap.ssid !== 'Unknown' && !isInStaging(ap);
-        })
-        .sort((a: AstalNetwork.AccessPoint, b: AstalNetwork.AccessPoint) => {
-            if (isApActive(a)) {
-                return -1;
-            }
-
-            if (isApActive(b)) {
-                return 1;
-            }
-
-            return b.strength - a.strength;
-        });
-
-    return filteredWAPs;
-};
-
-/**
- * Determines whether the device is in an active state.
- *
- * This function checks if the provided device state is active by comparing it with the disconnected, unavailable, and failed states.
- *
- * @param state The current state of the device.
- *
- * @returns True if the device is in an active state; otherwise, false.
- */
-export const isApEnabled = (state: AstalNetwork.DeviceState | undefined): boolean => {
-    if (state == null) {
-        return false;
-    }
-
-    return !(
-        state === AstalNetwork.DeviceState.DISCONNECTED ||
-        state === AstalNetwork.DeviceState.UNAVAILABLE ||
-        state === AstalNetwork.DeviceState.FAILED
-    );
-};
-
-/**
- * Checks if the given access point is the currently active one.
- *
- * This function compares the SSID of the provided access point with the SSID of the active access point in the WiFi service.
- *
- * @param accessPoint The access point to check.
- *
- * @returns True if the access point is active; otherwise, false.
- */
-export const isApActive = (accessPoint: AstalNetwork.AccessPoint): boolean => {
-    return accessPoint.ssid === networkService.wifi?.activeAccessPoint?.ssid;
-};
-
-/**
- * Checks if the specified access point is in the process of disconnecting.
- *
- * This function checks if the provided access point is the active one and if the WiFi service state is deactivating.
- *
- * @param accessPoint The access point to check.
- *
- * @returns True if the access point is disconnecting; otherwise, false.
- */
-export const isDisconnecting = (accessPoint: AstalNetwork.AccessPoint): boolean => {
-    if (isApActive(accessPoint)) {
-        return networkService.wifi?.state === AstalNetwork.DeviceState.DEACTIVATING;
-    }
-    return false;
-};
-
-/**
- * Extracts the connection ID associated with a given SSID from the `nmcli` command output.
- *
- * This function parses the output of the `nmcli` command to find the connection ID associated with the provided SSID.
- *
- * @param ssid The SSID of the network.
- * @param nmcliOutput The output string from the `nmcli` command.
- *
- * @returns The connection ID if found; otherwise, undefined.
- */
-export const getIdFromSsid = (ssid: string, nmcliOutput: string): string | undefined => {
-    const lines = nmcliOutput.trim().split('\n');
-    for (const line of lines) {
-        const columns = line.trim().split(/\s{2,}/);
-        if (columns[0].includes(ssid)) {
-            return columns[1];
-        }
-    }
-};
-
-/**
- * Retrieves the current Wi-Fi status based on the network service state.
- *
- * This function returns a string representing the current Wi-Fi status based on the state of the WiFi service.
- *
- * @returns A string representing the current Wi-Fi status.
- */
-export const getWifiStatus = (): string => {
-    const wifiState = networkService.wifi?.state;
-
-    if (wifiState !== null) {
-        return DEVICE_STATES[wifiState];
-    }
-    return DEVICE_STATES[AstalNetwork.DeviceState.UNKNOWN];
-};
-
-/**
- * Initiates a connection to the specified access point.
- *
- * This function attempts to connect to the provided access point using the `nmcli` command.
- * It handles connection attempts, updates the `connecting` variable, and manages errors.
- *
- * @param accessPoint The access point to connect to.
- * @param event The click event triggering the connection.
- */
-export const connectToAP = (accessPoint: AstalNetwork.AccessPoint, event: Astal.ClickEvent): void => {
-    if (accessPoint.bssid === connecting.get() || isApActive(accessPoint) || !isPrimaryClick(event)) {
-        return;
-    }
-
-    connecting.set(accessPoint.bssid || '');
-    execAsync(`nmcli device wifi connect ${accessPoint.bssid}`)
-        .then(() => {
-            connecting.set('');
-            staging.set({} as AstalNetwork.AccessPoint);
-        })
-        .catch((err: Error) => {
-            connecting.set('');
-            if (err.message.toLowerCase().includes('secrets were required, but not provided')) {
-                staging.set(accessPoint);
-            } else {
-                Notify({
-                    summary: 'Network',
-                    body: err.message,
-                });
-            }
-        });
-};
-
-/**
- * Disconnects from the specified access point.
- *
- * This function attempts to disconnect from the provided access point using the `nmcli` command.
- * It handles disconnection attempts, updates the `connecting` variable, and manages errors.
- *
- * @param accessPoint The access point to disconnect from.
- * @param event The click event triggering the disconnection.
- */
-export const disconnectFromAP = (accessPoint: AstalNetwork.AccessPoint, event: Astal.ClickEvent): void => {
-    if (!isPrimaryClick(event)) {
-        return;
-    }
-
-    connecting.set(accessPoint.bssid || '');
-    execAsync('nmcli connection show --active').then((res: string) => {
-        const connectionId = getIdFromSsid(accessPoint.ssid || '', res);
-
-        if (connectionId === undefined) {
-            console.error(`Error while disconnecting "${accessPoint.ssid}": Connection ID not found`);
-            return;
-        }
-
-        execAsync(`nmcli connection down ${connectionId} "${accessPoint.ssid}"`)
-            .then(() => {
-                connecting.set('');
-            })
-            .catch((err: unknown) => {
-                connecting.set('');
-                console.error(`Error while disconnecting "${accessPoint.ssid}": ${err}`);
-            });
-    });
-};
-
-/**
- * Forgets the specified access point by deleting its connection.
- *
- * This function attempts to forget the provided access point by deleting its connection using the `nmcli` command.
- * It handles the forget action, updates the `connecting` variable, and manages errors.
- *
- * @param accessPoint The access point to forget.
- * @param event The click event triggering the forget action.
- */
-export const forgetAP = (accessPoint: AstalNetwork.AccessPoint, event: Astal.ClickEvent): void => {
-    if (!isPrimaryClick(event)) {
-        return;
-    }
-    connecting.set(accessPoint.bssid || '');
-    execAsync('nmcli connection show --active').then((res: string) => {
-        const connectionId = getIdFromSsid(accessPoint.ssid || '', res);
-
-        if (connectionId === undefined) {
-            console.error(`Error while forgetting "${accessPoint.ssid}": Connection ID not found`);
-            return;
-        }
-
-        execAsync(`nmcli connection delete ${connectionId} "${accessPoint.ssid}"`)
-            .then(() => {
-                connecting.set('');
-            })
-            .catch((err: unknown) => {
-                connecting.set('');
-                console.error(`Error while forgetting "${accessPoint.ssid}": ${err}`);
-            });
-    });
-};
-
-Variable.derive([bind(networkService, 'wifi')], () => {
-    wifiEnabled();
-    accessPoints();
-});
diff --git a/src/components/menus/network/wifi/WirelessAPs/index.tsx b/src/components/menus/network/wifi/WirelessAPs/index.tsx
index 8b2751a..6f9f10f 100644
--- a/src/components/menus/network/wifi/WirelessAPs/index.tsx
+++ b/src/components/menus/network/wifi/WirelessAPs/index.tsx
@@ -1,18 +1,25 @@
 import { Gtk } from 'astal/gtk3';
 import { bind } from 'astal/binding';
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
-import { connecting, getFilteredWirelessAPs, isWifiEnabled, staging, wifiAccessPoints } from './helpers';
 import { AccessPoint } from './AccessPoint';
 import { Controls } from './Controls';
 import { Variable } from 'astal';
+import { NetworkService } from 'src/services/network';
+
+const networkService = NetworkService.getInstance();
 
 export const WirelessAPs = (): JSX.Element => {
     const wapBinding = Variable.derive(
-        [bind(staging), bind(connecting), bind(wifiAccessPoints), bind(isWifiEnabled)],
+        [
+            bind(networkService.wifi.staging),
+            bind(networkService.wifi.connecting),
+            bind(networkService.wifi.wifiAccessPoints),
+            bind(networkService.wifi.isWifiEnabled),
+        ],
         () => {
-            const filteredWAPs = getFilteredWirelessAPs();
+            const filteredWAPs = networkService.wifi.getFilteredWirelessAPs();
 
-            if (filteredWAPs.length <= 0 && staging.get() === undefined) {
+            if (filteredWAPs.length <= 0 && networkService.wifi.staging.get() === undefined) {
                 return (
                     <label
                         className={'waps-not-found dim'}
@@ -30,8 +37,11 @@ export const WirelessAPs = (): JSX.Element => {
                         {filteredWAPs.map((ap: AstalNetwork.AccessPoint) => {
                             return (
                                 <box className={'network-element-item'}>
-                                    <AccessPoint connecting={connecting} accessPoint={ap} />
-                                    <Controls connecting={connecting} accessPoint={ap} />
+                                    <AccessPoint
+                                        connecting={networkService.wifi.connecting}
+                                        accessPoint={ap}
+                                    />
+                                    <Controls connecting={networkService.wifi.connecting} accessPoint={ap} />
                                 </box>
                             );
                         })}
diff --git a/src/components/menus/notifications/controls/ClearNotificationsButton.tsx b/src/components/menus/notifications/controls/ClearNotificationsButton.tsx
index 94bdfed..d886f12 100644
--- a/src/components/menus/notifications/controls/ClearNotificationsButton.tsx
+++ b/src/components/menus/notifications/controls/ClearNotificationsButton.tsx
@@ -1,8 +1,8 @@
 import { bind } from 'astal';
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
-import { clearNotifications, removingNotifications } from 'src/shared/notification';
-import { isPrimaryClick } from 'src/lib/utils';
-import options from 'src/options';
+import options from 'src/configuration';
+import { isPrimaryClick } from 'src/lib/events/mouse';
+import { clearNotifications, removingNotifications } from 'src/lib/shared/notifications';
 
 const notifdService = AstalNotifd.get_default();
 
diff --git a/src/components/menus/notifications/helpers.ts b/src/components/menus/notifications/helpers.ts
index 6a88ee3..76666b1 100644
--- a/src/components/menus/notifications/helpers.ts
+++ b/src/components/menus/notifications/helpers.ts
@@ -1,6 +1,6 @@
 import { bind, Variable } from 'astal';
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
-import options from 'src/options';
+import options from 'src/configuration';
 
 const { displayedTotal } = options.notifications;
 const notifdService = AstalNotifd.get_default();
diff --git a/src/components/menus/notifications/index.tsx b/src/components/menus/notifications/index.tsx
index 1377b72..cc4702b 100644
--- a/src/components/menus/notifications/index.tsx
+++ b/src/components/menus/notifications/index.tsx
@@ -2,10 +2,10 @@ import DropdownMenu from '../shared/dropdown/index.js';
 import { Controls } from './controls/index.js';
 import { NotificationsContainer } from './notification/index.js';
 import { NotificationPager } from './pager/index.js';
-import options from 'src/options.js';
 import { handlePageBoundaries } from './helpers.js';
 import { bind, Variable } from 'astal';
-import { RevealerTransitionMap } from 'src/lib/constants/options.js';
+import { RevealerTransitionMap } from 'src/components/settings/constants.js';
+import options from 'src/configuration';
 
 const { transition } = options.menus;
 
diff --git a/src/components/menus/notifications/notification/index.tsx b/src/components/menus/notifications/notification/index.tsx
index e5bbd64..6229820 100644
--- a/src/components/menus/notifications/notification/index.tsx
+++ b/src/components/menus/notifications/notification/index.tsx
@@ -1,10 +1,10 @@
-import options from 'src/options.js';
-import { filterNotifications } from 'src/lib/shared/notifications.js';
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
 import { Gtk } from 'astal/gtk3';
 import { bind, Variable } from 'astal';
-import { NotificationCard } from 'src/components/notifications/Notification.js';
 import { Placeholder } from './Placeholder';
+import { NotificationCard } from 'src/components/notifications/Notification';
+import options from 'src/configuration';
+import { filterNotifications } from 'src/lib/shared/notifications';
 
 const notifdService = AstalNotifd.get_default();
 
diff --git a/src/components/menus/notifications/pager/Buttons.tsx b/src/components/menus/notifications/pager/Buttons.tsx
index 23e5006..30aee15 100644
--- a/src/components/menus/notifications/pager/Buttons.tsx
+++ b/src/components/menus/notifications/pager/Buttons.tsx
@@ -1,7 +1,7 @@
 import { Variable } from 'astal';
 import { Gtk } from 'astal/gtk3';
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
-import { isPrimaryClick } from 'src/lib/utils';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const FirstPageButton = ({ curPage, currentPage }: FirstPageButtonProps): JSX.Element => {
     return (
diff --git a/src/components/menus/notifications/pager/index.tsx b/src/components/menus/notifications/pager/index.tsx
index ed71263..6523eb9 100644
--- a/src/components/menus/notifications/pager/index.tsx
+++ b/src/components/menus/notifications/pager/index.tsx
@@ -1,8 +1,8 @@
 import { bind, Variable } from 'astal';
 import { Gtk } from 'astal/gtk3';
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
-import options from 'src/options';
 import { FirstPageButton, LastPageButton, NextPageButton, PreviousPageButton } from './Buttons';
+import options from 'src/configuration';
 
 const notifdService = AstalNotifd.get_default();
 
diff --git a/src/components/menus/power/helpers/actions.ts b/src/components/menus/power/helpers/actions.ts
index 71de829..2cd36e1 100644
--- a/src/components/menus/power/helpers/actions.ts
+++ b/src/components/menus/power/helpers/actions.ts
@@ -1,7 +1,7 @@
-import options from 'src/options';
 import { execAsync, GObject, property, register } from 'astal';
 import { App } from 'astal/gtk3';
-import { Action } from 'src/lib/types/power.types';
+import options from 'src/configuration';
+import { Action } from '../types';
 const { sleep, reboot, logout, shutdown } = options.menus.dashboard.powermenu;
 
 @register({ GTypeName: 'PowerMenu' })
diff --git a/src/components/menus/power/index.tsx b/src/components/menus/power/index.tsx
index c7d5650..2890ed1 100644
--- a/src/components/menus/power/index.tsx
+++ b/src/components/menus/power/index.tsx
@@ -1,12 +1,12 @@
 import PopupWindow from '../shared/popup/index.js';
 import powermenu from './helpers/actions.js';
-import options from 'src/options.js';
-import { isPrimaryClick } from 'src/lib/utils.js';
 import icons from 'src/lib/icons/icons.js';
 import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { RevealerTransitionMap } from 'src/lib/constants/options.js';
-import { Action } from 'src/lib/types/power.types.js';
+import { RevealerTransitionMap } from 'src/components/settings/constants.js';
+import options from 'src/configuration';
+import { isPrimaryClick } from 'src/lib/events/mouse';
+import { Action } from './types';
 
 const { transition } = options.menus;
 
diff --git a/src/lib/types/power.types.ts b/src/components/menus/power/types.ts
similarity index 100%
rename from src/lib/types/power.types.ts
rename to src/components/menus/power/types.ts
diff --git a/src/components/menus/powerDropdown/button.tsx b/src/components/menus/powerDropdown/button.tsx
index fff46ec..fa69030 100644
--- a/src/components/menus/powerDropdown/button.tsx
+++ b/src/components/menus/powerDropdown/button.tsx
@@ -1,9 +1,9 @@
-import { capitalizeFirstLetter } from 'src/lib/utils';
-import options from 'src/options';
+import options from 'src/configuration';
 import powermenu from '../power/helpers/actions';
 import { App, Gtk } from 'astal/gtk3';
 import { bind, execAsync } from 'astal';
-import { PowerOptions } from 'src/lib/options/options.types';
+import { PowerOptions } from 'src/lib/options/types';
+import { capitalizeFirstLetter } from 'src/lib/string/formatters';
 
 const { confirmation, shutdown, logout, sleep, reboot, showLabel } = options.menus.power;
 
diff --git a/src/components/menus/powerDropdown/index.tsx b/src/components/menus/powerDropdown/index.tsx
index 3b0e31a..bafb2a1 100644
--- a/src/components/menus/powerDropdown/index.tsx
+++ b/src/components/menus/powerDropdown/index.tsx
@@ -1,8 +1,8 @@
 import { bind } from 'astal';
 import DropdownMenu from '../shared/dropdown/index.js';
 import { PowerButton } from './button.js';
-import options from 'src/options.js';
-import { RevealerTransitionMap } from 'src/lib/constants/options.js';
+import options from 'src/configuration';
+import { RevealerTransitionMap } from 'src/components/settings/constants.js';
 
 export default (): JSX.Element => {
     return (
diff --git a/src/components/menus/shared/dropdown/eventBoxes/index.tsx b/src/components/menus/shared/dropdown/helpers/eventBoxes.tsx
similarity index 94%
rename from src/components/menus/shared/dropdown/eventBoxes/index.tsx
rename to src/components/menus/shared/dropdown/helpers/eventBoxes.tsx
index 65dd34f..9299729 100644
--- a/src/components/menus/shared/dropdown/eventBoxes/index.tsx
+++ b/src/components/menus/shared/dropdown/helpers/eventBoxes.tsx
@@ -1,5 +1,5 @@
 import { App } from 'astal/gtk3';
-import { BarEventMarginsProps, EventBoxPaddingProps } from '../types';
+import { BarEventMarginsProps, EventBoxPaddingProps } from './types';
 
 const EventBoxPadding = ({ className, windowName }: EventBoxPaddingProps): JSX.Element => {
     return (
diff --git a/src/components/menus/shared/dropdown/helpers.ts b/src/components/menus/shared/dropdown/helpers/helpers.ts
similarity index 95%
rename from src/components/menus/shared/dropdown/helpers.ts
rename to src/components/menus/shared/dropdown/helpers/helpers.ts
index 05cede8..bb1551e 100644
--- a/src/components/menus/shared/dropdown/helpers.ts
+++ b/src/components/menus/shared/dropdown/helpers/helpers.ts
@@ -1,6 +1,6 @@
-import { DropdownMenuList } from 'src/lib/options/options.types';
-import { calculateMenuPosition } from './locationHandler';
+import { DropdownMenuList } from 'src/lib/options/types';
 import { App, Gtk } from 'astal/gtk3';
+import { calculateMenuPosition } from './locationHandler';
 
 /**
  * Handles the realization of a dropdown menu.
diff --git a/src/components/menus/shared/dropdown/locationHandler/index.ts b/src/components/menus/shared/dropdown/helpers/locationHandler.ts
similarity index 98%
rename from src/components/menus/shared/dropdown/locationHandler/index.ts
rename to src/components/menus/shared/dropdown/helpers/locationHandler.ts
index 4bd1fda..62bb691 100644
--- a/src/components/menus/shared/dropdown/locationHandler/index.ts
+++ b/src/components/menus/shared/dropdown/helpers/locationHandler.ts
@@ -1,5 +1,5 @@
-import options from 'src/options';
-import { globalEventBoxes } from 'src/shared/dropdown';
+import options from 'src/configuration';
+import { globalEventBoxes } from 'src/lib/events/dropdown';
 import { GLib } from 'astal';
 import { EventBox } from 'astal/gtk3/widget';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
diff --git a/src/components/menus/shared/dropdown/helpers/types.ts b/src/components/menus/shared/dropdown/helpers/types.ts
new file mode 100644
index 0000000..b8ef43f
--- /dev/null
+++ b/src/components/menus/shared/dropdown/helpers/types.ts
@@ -0,0 +1,11 @@
+import { BarLocation } from 'src/lib/options/types';
+
+export type EventBoxPaddingProps = {
+    className: string;
+    windowName: string;
+};
+
+export type BarEventMarginsProps = {
+    windowName: string;
+    location?: BarLocation;
+};
diff --git a/src/components/menus/shared/dropdown/index.tsx b/src/components/menus/shared/dropdown/index.tsx
index 33cd679..f594930 100644
--- a/src/components/menus/shared/dropdown/index.tsx
+++ b/src/components/menus/shared/dropdown/index.tsx
@@ -1,11 +1,10 @@
-import options from 'src/options';
-import { BarEventMargins } from './eventBoxes/index';
-import { globalEventBoxes } from 'src/shared/dropdown';
+import options from 'src/configuration';
+import { BarEventMargins } from './helpers/eventBoxes';
+import { globalEventBoxes } from 'src/lib/events/dropdown';
 import { bind } from 'astal';
 import { App, Astal, Gdk, Gtk } from 'astal/gtk3';
 import { Revealer } from 'astal/gtk3/widget';
-import { locationMap } from 'src/lib/types/defaults/bar.types';
-import { DropdownMenuProps } from 'src/lib/types/dropdownmenu.types';
+import { DropdownMenuProps, LocationMap } from './types';
 
 const { location } = options.theme.bar;
 
@@ -16,6 +15,11 @@ export default ({
     exclusivity = Astal.Exclusivity.IGNORE,
     ...props
 }: DropdownMenuProps): JSX.Element => {
+    const locationMap: LocationMap = {
+        top: Astal.WindowAnchor.TOP,
+        bottom: Astal.WindowAnchor.BOTTOM,
+    };
+
     return (
         <window
             name={name}
diff --git a/src/components/menus/shared/dropdown/types.ts b/src/components/menus/shared/dropdown/types.ts
index 42a68f5..86e09ad 100644
--- a/src/components/menus/shared/dropdown/types.ts
+++ b/src/components/menus/shared/dropdown/types.ts
@@ -1,11 +1,17 @@
-import { BarLocation } from 'src/lib/options/options.types';
+import { Astal, Gtk } from 'astal/gtk3';
+import { Binding } from 'astal';
+import { BarLocation } from 'src/lib/options/types';
 
-export type EventBoxPaddingProps = {
-    className: string;
-    windowName: string;
-};
+export interface DropdownMenuProps {
+    name: string;
+    child?: JSX.Element | JSX.Element[] | Binding<JSX.Element | undefined>;
+    layout?: string;
+    transition?: Gtk.RevealerTransitionType | Binding<Gtk.RevealerTransitionType>;
+    exclusivity?: Astal.Exclusivity;
+    fixed?: boolean;
+    onDestroy?: () => void;
+}
 
-export type BarEventMarginsProps = {
-    windowName: string;
-    location?: BarLocation;
+export type LocationMap = {
+    [key in BarLocation]: Astal.WindowAnchor;
 };
diff --git a/src/components/menus/shared/popup/index.tsx b/src/components/menus/shared/popup/index.tsx
index a70d4b1..422acc2 100644
--- a/src/components/menus/shared/popup/index.tsx
+++ b/src/components/menus/shared/popup/index.tsx
@@ -1,15 +1,9 @@
 import { App, Astal, Gdk, Gtk } from 'astal/gtk3';
-import { WINDOW_LAYOUTS } from 'src/shared/window';
+import { POPUP_LAYOUTS } from 'src/components/menus/shared/popup/layouts';
 import { EventBox, Revealer } from 'astal/gtk3/widget';
-import {
-    PaddingProps,
-    PopupRevealerProps,
-    LayoutFunction,
-    PopupWindowProps,
-} from 'src/lib/types/popupwindow.types';
-import { Layouts } from 'src/lib/types/widget.types';
+import { LayoutFunction, Layouts, PaddingProps, PopupRevealerProps, PopupWindowProps } from './types';
 
-export const Padding = ({ name, opts }: PaddingProps): JSX.Element => (
+const Padding = ({ name, opts }: PaddingProps): JSX.Element => (
     <eventbox
         className={opts?.className ?? ''}
         hexpand
@@ -119,7 +113,7 @@ const Layout: LayoutFunction = (name, child, transition) => ({
 });
 
 const isValidLayout = (layout: string): layout is Layouts => {
-    return WINDOW_LAYOUTS.includes(layout);
+    return POPUP_LAYOUTS.includes(layout);
 };
 
 export default ({
diff --git a/src/shared/window.ts b/src/components/menus/shared/popup/layouts.ts
similarity index 76%
rename from src/shared/window.ts
rename to src/components/menus/shared/popup/layouts.ts
index ae823bb..da1e854 100644
--- a/src/shared/window.ts
+++ b/src/components/menus/shared/popup/layouts.ts
@@ -1,4 +1,4 @@
-export const WINDOW_LAYOUTS: string[] = [
+export const POPUP_LAYOUTS: string[] = [
     'center',
     'top',
     'top-right',
diff --git a/src/lib/types/popupwindow.types.ts b/src/components/menus/shared/popup/types.ts
similarity index 95%
rename from src/lib/types/popupwindow.types.ts
rename to src/components/menus/shared/popup/types.ts
index 9ff9ea8..c7e9c9a 100644
--- a/src/lib/types/popupwindow.types.ts
+++ b/src/components/menus/shared/popup/types.ts
@@ -1,7 +1,17 @@
-import { Astal, Gtk } from 'astal/gtk3';
 import { Binding } from 'astal';
+import { Gtk, Astal } from 'astal/gtk3';
 import { WindowProps } from 'astal/gtk3/widget';
 
+export type Layouts =
+    | 'center'
+    | 'top'
+    | 'top-right'
+    | 'top-center'
+    | 'top-left'
+    | 'bottom-left'
+    | 'bottom-center'
+    | 'bottom-right';
+
 export interface PopupWindowProps extends WindowProps {
     name: string;
     child?: JSX.Element;
@@ -24,17 +34,8 @@ export type LayoutFunction = (
     'bottom-center': () => JSX.Element;
     'bottom-right': () => JSX.Element;
 };
-export type Layouts =
-    | 'center'
-    | 'top'
-    | 'top-right'
-    | 'top-center'
-    | 'top-left'
-    | 'bottom-left'
-    | 'bottom-center'
-    | 'bottom-right';
 
-export type Opts = {
+type Opts = {
     className: string;
     vexpand: boolean;
 };
diff --git a/src/components/notifications/Actions.tsx b/src/components/notifications/Actions/index.tsx
similarity index 97%
rename from src/components/notifications/Actions.tsx
rename to src/components/notifications/Actions/index.tsx
index bd7a24b..a2d5721 100644
--- a/src/components/notifications/Actions.tsx
+++ b/src/components/notifications/Actions/index.tsx
@@ -1,7 +1,7 @@
 import { execAsync } from 'astal';
 import { Gtk } from 'astal/gtk3';
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
-import { isPrimaryClick } from 'src/lib/utils';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 const ActionButton = ({ notification, action }: ActionButtonProps): JSX.Element => {
     return (
diff --git a/src/components/notifications/Body.tsx b/src/components/notifications/Body/index.tsx
similarity index 95%
rename from src/components/notifications/Body.tsx
rename to src/components/notifications/Body/index.tsx
index bf802d9..b879b94 100644
--- a/src/components/notifications/Body.tsx
+++ b/src/components/notifications/Body/index.tsx
@@ -1,6 +1,6 @@
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
 import { Gtk } from 'astal/gtk3';
-import { notifHasImg } from './helpers';
+import { notifHasImg } from '../helpers';
 
 export const Body = ({ notification }: BodyProps): JSX.Element => {
     return (
diff --git a/src/components/notifications/CloseButton.tsx b/src/components/notifications/CloseButton/index.tsx
similarity index 100%
rename from src/components/notifications/CloseButton.tsx
rename to src/components/notifications/CloseButton/index.tsx
diff --git a/src/components/notifications/Header.tsx b/src/components/notifications/Header/index.tsx
similarity index 84%
rename from src/components/notifications/Header.tsx
rename to src/components/notifications/Header/index.tsx
index 29882c7..3a057e5 100644
--- a/src/components/notifications/Header.tsx
+++ b/src/components/notifications/Header/index.tsx
@@ -1,13 +1,23 @@
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
-import options from 'src/options.js';
+import options from 'src/configuration';
 import { GLib } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { getNotificationIcon } from 'src/shared/notification.js';
-import { notifHasImg } from './helpers';
+import { notifHasImg } from '../helpers';
+import { getNotificationIcon } from 'src/lib/shared/notifications';
 
 const { military } = options.menus.clock.time;
 
-export const NotificationIcon = ({ notification }: HeaderProps): JSX.Element => {
+export const Header = ({ notification }: HeaderProps): JSX.Element => {
+    return (
+        <box vertical={false} hexpand>
+            <NotificationIcon notification={notification} />
+            <SummaryLabel notification={notification} />
+            <TimeLabel notification={notification} />
+        </box>
+    );
+};
+
+const NotificationIcon = ({ notification }: HeaderProps): JSX.Element => {
     const { appName, appIcon, desktopEntry } = notification;
 
     return (
@@ -22,7 +32,7 @@ export const NotificationIcon = ({ notification }: HeaderProps): JSX.Element =>
     );
 };
 
-export const SummaryLabel = ({ notification }: HeaderProps): JSX.Element => {
+const SummaryLabel = ({ notification }: HeaderProps): JSX.Element => {
     return (
         <box className={'notification-card-header'} halign={Gtk.Align.START} valign={Gtk.Align.START} hexpand>
             <label
@@ -40,7 +50,7 @@ export const SummaryLabel = ({ notification }: HeaderProps): JSX.Element => {
     );
 };
 
-export const TimeLabel = ({ notification }: HeaderProps): JSX.Element => {
+const TimeLabel = ({ notification }: HeaderProps): JSX.Element => {
     const time = (time: number, format = '%I:%M %p'): string => {
         return GLib.DateTime.new_from_unix_local(time).format(military.get() ? '%H:%M' : format) ?? '--';
     };
@@ -57,16 +67,6 @@ export const TimeLabel = ({ notification }: HeaderProps): JSX.Element => {
     );
 };
 
-export const Header = ({ notification }: HeaderProps): JSX.Element => {
-    return (
-        <box vertical={false} hexpand>
-            <NotificationIcon notification={notification} />
-            <SummaryLabel notification={notification} />
-            <TimeLabel notification={notification} />
-        </box>
-    );
-};
-
 interface HeaderProps {
     notification: AstalNotifd.Notification;
 }
diff --git a/src/components/notifications/Image.tsx b/src/components/notifications/Image/index.tsx
similarity index 92%
rename from src/components/notifications/Image.tsx
rename to src/components/notifications/Image/index.tsx
index 8828953..020ce49 100644
--- a/src/components/notifications/Image.tsx
+++ b/src/components/notifications/Image/index.tsx
@@ -1,7 +1,7 @@
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
 import { Gtk } from 'astal/gtk3';
-import { notifHasImg } from './helpers';
-import { isAnImage } from 'src/lib/utils';
+import { isAnImage } from 'src/lib/validation/images';
+import { notifHasImg } from '../helpers';
 
 const ImageItem = ({ notification }: ImageProps): JSX.Element => {
     if (notification.appIcon && !isAnImage(notification.appIcon)) {
diff --git a/src/components/notifications/Notification.tsx b/src/components/notifications/Notification/index.tsx
similarity index 87%
rename from src/components/notifications/Notification.tsx
rename to src/components/notifications/Notification/index.tsx
index 565bb14..6764bdc 100644
--- a/src/components/notifications/Notification.tsx
+++ b/src/components/notifications/Notification/index.tsx
@@ -1,12 +1,12 @@
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
-import { Actions } from './Actions';
-import { Body } from './Body';
-import { CloseButton } from './CloseButton';
-import { Header } from './Header';
-import { Image } from './Image';
 import { Gtk, Widget } from 'astal/gtk3';
-import { isSecondaryClick } from 'src/lib/utils';
-import { notifHasImg } from './helpers';
+import { isSecondaryClick } from 'src/lib/events/mouse';
+import { Actions } from '../Actions';
+import { Body } from '../Body';
+import { CloseButton } from '../CloseButton';
+import { Header } from '../Header';
+import { notifHasImg } from '../helpers';
+import { Image } from '../Image';
 
 const NotificationContent = ({ actionBox, notification }: NotificationContentProps): JSX.Element => {
     return (
diff --git a/src/components/notifications/helpers.ts b/src/components/notifications/helpers.ts
index 0fda0c8..748f17f 100644
--- a/src/components/notifications/helpers.ts
+++ b/src/components/notifications/helpers.ts
@@ -1,6 +1,6 @@
 import { bind, timeout, Variable } from 'astal';
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
-import options from 'src/options';
+import options from 'src/configuration';
 import { isNotificationIgnored } from 'src/lib/shared/notifications';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
 
diff --git a/src/components/notifications/index.tsx b/src/components/notifications/index.tsx
index e335de0..2742892 100644
--- a/src/components/notifications/index.tsx
+++ b/src/components/notifications/index.tsx
@@ -1,12 +1,12 @@
-import options from 'src/options.js';
-import { getPosition } from 'src/lib/utils.js';
+import options from 'src/configuration';
 import { bind, Variable } from 'astal';
 import { trackActiveMonitor, trackAutoTimeout, trackPopupNotifications } from './helpers.js';
 import { Astal } from 'astal/gtk3';
-import { NotificationCard } from './Notification.js';
 import AstalNotifd from 'gi://AstalNotifd?version=0.1';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
-import { GdkMonitorMapper } from '../bar/utils/GdkMonitorMapper';
+import { GdkMonitorService } from 'src/services/display/monitor/index.js';
+import { getPosition } from 'src/lib/window/positioning.js';
+import { NotificationCard } from './Notification';
 
 const hyprlandService = AstalHyprland.get_default();
 const { position, monitor, active_monitor, showActionsOnHover, displayedTotal } = options.notifications;
@@ -20,7 +20,7 @@ trackPopupNotifications(popupNotifications);
 trackAutoTimeout();
 
 export default (): JSX.Element => {
-    const gdkMonitorMapper = new GdkMonitorMapper();
+    const gdkMonitorMapper = new GdkMonitorService();
 
     const windowLayer = bind(tear).as((tear) => (tear ? Astal.Layer.TOP : Astal.Layer.OVERLAY));
     const windowAnchor = bind(position).as(getPosition);
diff --git a/src/components/osd/bar/helpers.ts b/src/components/osd/bar/helpers.ts
index f23b93b..838932c 100644
--- a/src/components/osd/bar/helpers.ts
+++ b/src/components/osd/bar/helpers.ts
@@ -1,13 +1,13 @@
 import { bind, Variable } from 'astal';
 import AstalWp from 'gi://AstalWp?version=0.1';
 import LevelBar from 'src/components/shared/LevelBar';
-import Brightness from 'src/services/Brightness';
-import options from 'src/options';
+import options from 'src/configuration';
+import BrightnessService from 'src/services/system/brightness';
 
 const wireplumber = AstalWp.get_default() as AstalWp.Wp;
 const audioService = wireplumber.audio;
 
-const brightnessService = Brightness.get_default();
+const brightnessService = BrightnessService.getInstance();
 
 /**
  * Sets up the OSD bar for a LevelBar instance.
diff --git a/src/components/osd/bar/index.tsx b/src/components/osd/bar/index.tsx
index 0003bf0..e3a4874 100644
--- a/src/components/osd/bar/index.tsx
+++ b/src/components/osd/bar/index.tsx
@@ -1,7 +1,7 @@
 import { Gtk } from 'astal/gtk3';
 import LevelBar from 'src/components/shared/LevelBar';
 import { setupOsdBar } from './helpers';
-import { OSDOrientation } from 'src/lib/options/options.types';
+import { OSDOrientation } from 'src/lib/options/types';
 
 export const OSDBar = ({ orientation }: OSDBarProps): JSX.Element => {
     const barOrientation = orientation === 'vertical' ? Gtk.Orientation.VERTICAL : Gtk.Orientation.HORIZONTAL;
diff --git a/src/components/osd/helpers.ts b/src/components/osd/helpers.ts
index 3c04c54..5c90c7a 100644
--- a/src/components/osd/helpers.ts
+++ b/src/components/osd/helpers.ts
@@ -2,13 +2,13 @@ import { bind, timeout, Variable } from 'astal';
 import { Widget } from 'astal/gtk3';
 import AstalHyprland from 'gi://AstalHyprland?version=0.1';
 import AstalWp from 'gi://AstalWp?version=0.1';
-import options from 'src/options';
-import Brightness from 'src/services/Brightness';
-import { GdkMonitorMapper } from '../bar/utils/GdkMonitorMapper';
+import options from 'src/configuration';
+import { GdkMonitorService } from 'src/services/display/monitor';
+import BrightnessService from 'src/services/system/brightness';
 
 const wireplumber = AstalWp.get_default() as AstalWp.Wp;
 const audioService = wireplumber.audio;
-const brightnessService = Brightness.get_default();
+const brightnessService = BrightnessService.getInstance();
 const hyprlandService = AstalHyprland.get_default();
 
 const { enable, duration, active_monitor, monitor } = options.theme.osd;
@@ -31,7 +31,7 @@ timeout(3000, () => {
  * @param self The Widget.Revealer or Widget.Window instance.
  * @param property The property to check, either 'revealChild' or 'visible'.
  */
-export const handleReveal = (self: Widget.Revealer): void => {
+const handleReveal = (self: Widget.Revealer): void => {
     if (isStartingUp) {
         return;
     }
@@ -60,7 +60,7 @@ export const handleReveal = (self: Widget.Revealer): void => {
  * @returns A Variable<number> representing the monitor index for the OSD.
  */
 export const getOsdMonitor = (): Variable<number> => {
-    const gdkMonitorMapper = new GdkMonitorMapper();
+    const gdkMonitorMapper = new GdkMonitorService();
 
     return Variable.derive(
         [bind(hyprlandService, 'focusedMonitor'), bind(monitor), bind(active_monitor)],
diff --git a/src/components/osd/icon/helpers.ts b/src/components/osd/icon/helpers.ts
index 0f61d80..3a69caa 100644
--- a/src/components/osd/icon/helpers.ts
+++ b/src/components/osd/icon/helpers.ts
@@ -1,11 +1,11 @@
 import { bind, Variable } from 'astal';
 import { Widget } from 'astal/gtk3';
 import AstalWp from 'gi://AstalWp?version=0.1';
-import Brightness from 'src/services/Brightness';
+import BrightnessService from 'src/services/system/brightness';
 
 const wireplumber = AstalWp.get_default() as AstalWp.Wp;
 const audioService = wireplumber.audio;
-const brightnessService = Brightness.get_default();
+const brightnessService = BrightnessService.getInstance();
 
 type OSDIcon = {
     micVariable: Variable<unknown>;
diff --git a/src/components/osd/index.tsx b/src/components/osd/index.tsx
index 746578b..9c0cd34 100644
--- a/src/components/osd/index.tsx
+++ b/src/components/osd/index.tsx
@@ -1,9 +1,9 @@
-import options from 'src/options';
-import { getPosition } from 'src/lib/utils';
+import options from 'src/configuration';
 import { bind } from 'astal';
 import { Astal } from 'astal/gtk3';
 import { getOsdMonitor } from './helpers';
-import { OsdRevealer } from './OsdRevealer';
+import { getPosition } from 'src/lib/window/positioning';
+import { OsdRevealer } from './revealer';
 
 const { location } = options.theme.osd;
 
diff --git a/src/components/osd/label/helpers.ts b/src/components/osd/label/helpers.ts
index 91c8e80..a4d4e75 100644
--- a/src/components/osd/label/helpers.ts
+++ b/src/components/osd/label/helpers.ts
@@ -1,12 +1,12 @@
 import { bind, Variable } from 'astal';
 import { Widget } from 'astal/gtk3';
 import AstalWp from 'gi://AstalWp?version=0.1';
-import Brightness from 'src/services/Brightness';
-import options from 'src/options';
+import options from 'src/configuration';
+import BrightnessService from 'src/services/system/brightness';
 
 const wireplumber = AstalWp.get_default() as AstalWp.Wp;
 const audioService = wireplumber.audio;
-const brightnessService = Brightness.get_default();
+const brightnessService = BrightnessService.getInstance();
 
 /**
  * Sets up the OSD label for a given widget.
diff --git a/src/components/osd/OsdRevealer.tsx b/src/components/osd/revealer/index.tsx
similarity index 83%
rename from src/components/osd/OsdRevealer.tsx
rename to src/components/osd/revealer/index.tsx
index cb04197..55ea4cc 100644
--- a/src/components/osd/OsdRevealer.tsx
+++ b/src/components/osd/revealer/index.tsx
@@ -1,11 +1,11 @@
-import options from 'src/options';
-import { OSDLabel } from './label/index';
-import { OSDBar } from './bar/index';
-import { OSDIcon } from './icon/index';
-import { revealerSetup } from './helpers';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 import { bind } from 'astal';
-import { OSDOrientation } from 'src/lib/options/options.types';
+import { OSDOrientation } from 'src/lib/options/types';
+import { OSDBar } from '../bar';
+import { revealerSetup } from '../helpers';
+import { OSDIcon } from '../icon';
+import { OSDLabel } from '../label';
 
 const { orientation } = options.theme.osd;
 
diff --git a/src/components/settings/Header.tsx b/src/components/settings/Header.tsx
index c7bdb52..fa3f3ad 100644
--- a/src/components/settings/Header.tsx
+++ b/src/components/settings/Header.tsx
@@ -1,7 +1,7 @@
 import { App, Gtk } from 'astal/gtk3';
 import icons from 'src/lib/icons/icons';
-import { isPrimaryClick } from 'src/lib/utils';
-import options from 'src/options';
+import options from 'src/configuration';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const Header = (): JSX.Element => {
     return (
diff --git a/src/components/settings/PageContainer.tsx b/src/components/settings/PageContainer.tsx
index fd32049..ac05493 100644
--- a/src/components/settings/PageContainer.tsx
+++ b/src/components/settings/PageContainer.tsx
@@ -1,8 +1,8 @@
 import { bind, Variable } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { StackTransitionMap } from 'src/lib/constants/options';
-import options from 'src/options';
-import { isPrimaryClick } from 'src/lib/utils';
+import { StackTransitionMap } from 'src/components/settings/constants';
+import options from 'src/configuration';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 import { ThemesMenu } from './pages/theme';
 import { SettingsPage, settingsPages } from './helpers';
 import { SettingsMenu } from './pages/config';
diff --git a/src/lib/constants/options.ts b/src/components/settings/constants.ts
similarity index 93%
rename from src/lib/constants/options.ts
rename to src/components/settings/constants.ts
index be3083c..0c68c9b 100644
--- a/src/lib/constants/options.ts
+++ b/src/components/settings/constants.ts
@@ -1,5 +1,5 @@
 import { Gtk } from 'astal/gtk3';
-import { DropdownMenuList } from '../options/options.types';
+import { DropdownMenuList } from '../../lib/options/types';
 
 export const StackTransitionMap = {
     none: Gtk.StackTransitionType.NONE,
@@ -8,7 +8,7 @@ export const StackTransitionMap = {
     slide_left: Gtk.StackTransitionType.SLIDE_LEFT,
     slide_up: Gtk.StackTransitionType.SLIDE_UP,
     slide_down: Gtk.StackTransitionType.SLIDE_DOWN,
-};
+} as const;
 
 export const RevealerTransitionMap = {
     none: Gtk.RevealerTransitionType.NONE,
@@ -17,7 +17,7 @@ export const RevealerTransitionMap = {
     slide_left: Gtk.RevealerTransitionType.SLIDE_LEFT,
     slide_up: Gtk.RevealerTransitionType.SLIDE_UP,
     slide_down: Gtk.RevealerTransitionType.SLIDE_DOWN,
-};
+} as const;
 
 export const dropdownMenuList = [
     'dashboardmenu',
diff --git a/src/components/settings/pages/config/bar/index.tsx b/src/components/settings/pages/config/bar/index.tsx
index c45f113..b6377c4 100644
--- a/src/components/settings/pages/config/bar/index.tsx
+++ b/src/components/settings/pages/config/bar/index.tsx
@@ -1,5 +1,5 @@
 import { Header } from 'src/components/settings/shared/Header';
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 import { Option } from 'src/components/settings/shared/Option';
 
diff --git a/src/components/settings/pages/config/general/index.tsx b/src/components/settings/pages/config/general/index.tsx
index d14e11c..9e804d3 100644
--- a/src/components/settings/pages/config/general/index.tsx
+++ b/src/components/settings/pages/config/general/index.tsx
@@ -1,6 +1,6 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const BarGeneral = (): JSX.Element => {
diff --git a/src/components/settings/pages/config/index.tsx b/src/components/settings/pages/config/index.tsx
index bc2199d..de73f2c 100644
--- a/src/components/settings/pages/config/index.tsx
+++ b/src/components/settings/pages/config/index.tsx
@@ -1,8 +1,8 @@
-import options from 'src/options';
+import options from 'src/configuration';
 import { bind, Variable } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { isPrimaryClick } from 'src/lib/utils';
-import { StackTransitionMap } from 'src/lib/constants/options';
+import { isPrimaryClick } from 'src/lib/events/mouse';
+import { StackTransitionMap } from 'src/components/settings/constants';
 import { ConfigPage, configPages } from '../../helpers';
 import { BarGeneral } from './general';
 import { BarSettings } from './bar';
@@ -19,6 +19,7 @@ const { transition, transitionTime } = options.menus;
 
 const CurrentPage = Variable<ConfigPage>('General');
 
+// TODO: Rework the settings menu, it's shit
 export const SettingsMenu = (): JSX.Element => {
     return (
         <box name={'Configuration'} halign={Gtk.Align.FILL} hexpand vertical>
diff --git a/src/components/settings/pages/config/menus/clock.tsx b/src/components/settings/pages/config/menus/clock.tsx
index 671f5b8..641ebf0 100644
--- a/src/components/settings/pages/config/menus/clock.tsx
+++ b/src/components/settings/pages/config/menus/clock.tsx
@@ -1,6 +1,6 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const ClockMenuSettings = (): JSX.Element => {
@@ -16,7 +16,7 @@ export const ClockMenuSettings = (): JSX.Element => {
                 <Option
                     opt={options.menus.clock.weather.location}
                     title="Location"
-                    subtitle="Zip Code, Postal Code, City, etc."
+                    subtitle="<Zip Code>, <Postal Code>, <City>, <lat, long>, etc."
                     type="string"
                 />
                 <Option
diff --git a/src/components/settings/pages/config/menus/dashboard.tsx b/src/components/settings/pages/config/menus/dashboard.tsx
index a9b94ec..a459f7c 100644
--- a/src/components/settings/pages/config/menus/dashboard.tsx
+++ b/src/components/settings/pages/config/menus/dashboard.tsx
@@ -1,6 +1,6 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const DashboardMenuSettings = (): JSX.Element => {
diff --git a/src/components/settings/pages/config/menus/media.tsx b/src/components/settings/pages/config/menus/media.tsx
index 98cf596..f80208b 100644
--- a/src/components/settings/pages/config/menus/media.tsx
+++ b/src/components/settings/pages/config/menus/media.tsx
@@ -1,6 +1,6 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const MediaMenuSettings = (): JSX.Element => {
diff --git a/src/components/settings/pages/config/menus/power.tsx b/src/components/settings/pages/config/menus/power.tsx
index b3251e5..6a6b127 100644
--- a/src/components/settings/pages/config/menus/power.tsx
+++ b/src/components/settings/pages/config/menus/power.tsx
@@ -1,6 +1,6 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const PowerMenuSettings = (): JSX.Element => {
diff --git a/src/components/settings/pages/config/menus/volume.tsx b/src/components/settings/pages/config/menus/volume.tsx
index 2b11037..17f646c 100644
--- a/src/components/settings/pages/config/menus/volume.tsx
+++ b/src/components/settings/pages/config/menus/volume.tsx
@@ -1,6 +1,6 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const VolumeMenuSettings = (): JSX.Element => {
diff --git a/src/components/settings/pages/config/notifications/index.tsx b/src/components/settings/pages/config/notifications/index.tsx
index bec15cc..bcc3a6c 100644
--- a/src/components/settings/pages/config/notifications/index.tsx
+++ b/src/components/settings/pages/config/notifications/index.tsx
@@ -1,6 +1,6 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const NotificationSettings = (): JSX.Element => {
diff --git a/src/components/settings/pages/config/osd/index.tsx b/src/components/settings/pages/config/osd/index.tsx
index 269e753..b592a57 100644
--- a/src/components/settings/pages/config/osd/index.tsx
+++ b/src/components/settings/pages/config/osd/index.tsx
@@ -1,6 +1,6 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const OSDSettings = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/bar/index.tsx b/src/components/settings/pages/theme/bar/index.tsx
index 9c02e5b..7d5c9f6 100644
--- a/src/components/settings/pages/theme/bar/index.tsx
+++ b/src/components/settings/pages/theme/bar/index.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const BarTheme = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/index.tsx b/src/components/settings/pages/theme/index.tsx
index 06a02d3..08a918b 100644
--- a/src/components/settings/pages/theme/index.tsx
+++ b/src/components/settings/pages/theme/index.tsx
@@ -1,8 +1,8 @@
-import options from 'src/options';
+import options from 'src/configuration';
 import { bind, Variable } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { isPrimaryClick } from 'src/lib/utils';
-import { StackTransitionMap } from 'src/lib/constants/options';
+import { isPrimaryClick } from 'src/lib/events/mouse';
+import { StackTransitionMap } from 'src/components/settings/constants';
 import { MenuTheme } from './menus';
 import { Matugen } from './menus/matugen';
 import { BarTheme } from './bar';
diff --git a/src/components/settings/pages/theme/menus/battery.tsx b/src/components/settings/pages/theme/menus/battery.tsx
index b12bf62..9dac3a8 100644
--- a/src/components/settings/pages/theme/menus/battery.tsx
+++ b/src/components/settings/pages/theme/menus/battery.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const BatteryMenuTheme = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/menus/bluetooth.tsx b/src/components/settings/pages/theme/menus/bluetooth.tsx
index 4f04fb3..fa468dc 100644
--- a/src/components/settings/pages/theme/menus/bluetooth.tsx
+++ b/src/components/settings/pages/theme/menus/bluetooth.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const BluetoothMenuTheme = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/menus/clock.tsx b/src/components/settings/pages/theme/menus/clock.tsx
index 46625c4..4fe588b 100644
--- a/src/components/settings/pages/theme/menus/clock.tsx
+++ b/src/components/settings/pages/theme/menus/clock.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const ClockMenuTheme = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/menus/dashboard.tsx b/src/components/settings/pages/theme/menus/dashboard.tsx
index 85804f6..7720e49 100644
--- a/src/components/settings/pages/theme/menus/dashboard.tsx
+++ b/src/components/settings/pages/theme/menus/dashboard.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const DashboardMenuTheme = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/menus/index.tsx b/src/components/settings/pages/theme/menus/index.tsx
index 4b703fb..39c8917 100644
--- a/src/components/settings/pages/theme/menus/index.tsx
+++ b/src/components/settings/pages/theme/menus/index.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 import { bind } from 'astal';
 
diff --git a/src/components/settings/pages/theme/menus/matugen.tsx b/src/components/settings/pages/theme/menus/matugen.tsx
index 80cecc2..ffff31a 100644
--- a/src/components/settings/pages/theme/menus/matugen.tsx
+++ b/src/components/settings/pages/theme/menus/matugen.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const Matugen = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/menus/media.tsx b/src/components/settings/pages/theme/menus/media.tsx
index 48a016d..029d77f 100644
--- a/src/components/settings/pages/theme/menus/media.tsx
+++ b/src/components/settings/pages/theme/menus/media.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const MediaMenuTheme = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/menus/network.tsx b/src/components/settings/pages/theme/menus/network.tsx
index b14c033..5fabc5d 100644
--- a/src/components/settings/pages/theme/menus/network.tsx
+++ b/src/components/settings/pages/theme/menus/network.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const NetworkMenuTheme = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/menus/notifications.tsx b/src/components/settings/pages/theme/menus/notifications.tsx
index 5326062..6060e85 100644
--- a/src/components/settings/pages/theme/menus/notifications.tsx
+++ b/src/components/settings/pages/theme/menus/notifications.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const NotificationsMenuTheme = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/menus/power.tsx b/src/components/settings/pages/theme/menus/power.tsx
index 624fa04..209beb4 100644
--- a/src/components/settings/pages/theme/menus/power.tsx
+++ b/src/components/settings/pages/theme/menus/power.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const PowerMenuTheme = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/menus/systray.tsx b/src/components/settings/pages/theme/menus/systray.tsx
index 625e2a5..f7e7f18 100644
--- a/src/components/settings/pages/theme/menus/systray.tsx
+++ b/src/components/settings/pages/theme/menus/systray.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const SystrayMenuTheme = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/menus/volume.tsx b/src/components/settings/pages/theme/menus/volume.tsx
index 890287e..2d47146 100644
--- a/src/components/settings/pages/theme/menus/volume.tsx
+++ b/src/components/settings/pages/theme/menus/volume.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const VolumeMenuTheme = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/notifications/index.tsx b/src/components/settings/pages/theme/notifications/index.tsx
index 5b201dd..67f9880 100644
--- a/src/components/settings/pages/theme/notifications/index.tsx
+++ b/src/components/settings/pages/theme/notifications/index.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const NotificationsTheme = (): JSX.Element => {
diff --git a/src/components/settings/pages/theme/osd/index.tsx b/src/components/settings/pages/theme/osd/index.tsx
index 8abca7e..69b9eca 100644
--- a/src/components/settings/pages/theme/osd/index.tsx
+++ b/src/components/settings/pages/theme/osd/index.tsx
@@ -1,7 +1,7 @@
 import { Option } from 'src/components/settings/shared/Option';
 import { Header } from 'src/components/settings/shared/Header';
 
-import options from 'src/options';
+import options from 'src/configuration';
 import { Gtk } from 'astal/gtk3';
 
 export const OsdTheme = (): JSX.Element => {
diff --git a/src/components/settings/shared/FileChooser.ts b/src/components/settings/shared/FileChooser.ts
index 181a8d3..46dc38a 100644
--- a/src/components/settings/shared/FileChooser.ts
+++ b/src/components/settings/shared/FileChooser.ts
@@ -1,11 +1,11 @@
-import options from '../../../options';
 import Gtk from 'gi://Gtk?version=3.0';
 import Gio from 'gi://Gio';
-import { bash, Notify } from '../../../lib/utils';
 import icons from '../../../lib/icons/icons';
-import { Config } from '../../../lib/types/filechooser.types';
-import { hexColorPattern } from '../../../shared/useTheme';
-import { isHexColor } from '../../../shared/variables';
+import { hexColorPattern } from '../../../lib/theme/useTheme';
+import options from 'src/configuration';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+import { isHexColor } from 'src/lib/validation/colors';
+import { Config } from './types';
 
 const { restartCommand } = options.hyprpanel;
 const whiteListedThemeProp = ['theme.bar.buttons.style'];
@@ -68,28 +68,6 @@ export const filterConfigForThemeOnly = (config: Config): Config => {
     return filteredConfig;
 };
 
-/**
- * Filters the given configuration object to exclude theme-related properties.
- * Theme-related properties are identified by their keys matching a hex color pattern or being in the whitelist.
- *
- * @param config - The configuration object to be filtered.
- * @returns A new configuration object excluding theme-related properties.
- */
-export const filterConfigForNonTheme = (config: Config): Config => {
-    const filteredConfig: Config = {};
-    for (const key in config) {
-        if (whiteListedThemeProp.includes(key)) {
-            continue;
-        }
-
-        const value = config[key];
-        if (!(typeof value === 'string' && hexColorPattern.test(value))) {
-            filteredConfig[key] = config[key];
-        }
-    }
-    return filteredConfig;
-};
-
 /**
  * Opens a file save dialog to save the current configuration to a specified file path.
  * The configuration can be filtered to include only theme-related properties if the themeOnly flag is set.
@@ -199,7 +177,7 @@ export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
 
                 dataOutputStream.close(null);
 
-                Notify({
+                SystemUtilities.notify({
                     summary: 'File Saved Successfully',
                     body: `At ${finalFilePath}.`,
                     iconName: icons.ui.info,
@@ -216,7 +194,7 @@ export const saveFileDialog = (filePath: string, themeOnly: boolean): void => {
         const errorMessage = error instanceof Error ? error.message : String(error);
         dialog.destroy();
 
-        Notify({
+        SystemUtilities.notify({
             summary: `${themeOnly ? 'Theme' : 'Config'} Export Failed`,
             body: errorMessage ?? 'An unknown error occurred.',
             iconName: icons.ui.warning,
@@ -253,7 +231,7 @@ export const importFiles = (themeOnly: boolean = false): void => {
             const filePath: string | null = dialog.get_filename();
 
             if (filePath === null) {
-                Notify({
+                SystemUtilities.notify({
                     summary: 'Failed to import',
                     body: 'No file selected.',
                     iconName: icons.ui.warning,
@@ -268,7 +246,7 @@ export const importFiles = (themeOnly: boolean = false): void => {
                 return;
             }
 
-            Notify({
+            SystemUtilities.notify({
                 summary: `Importing ${themeOnly ? 'Theme' : 'Config'}`,
                 body: `Importing: ${filePath}`,
                 iconName: icons.ui.info,
@@ -294,15 +272,37 @@ export const importFiles = (themeOnly: boolean = false): void => {
             saveConfigToFile(optionsConfig, CONFIG_FILE);
         }
         dialog.destroy();
-        bash(restartCommand.get());
+        SystemUtilities.bash(restartCommand.get());
     } catch (error) {
         const errorMessage = error instanceof Error ? error.message : String(error);
         dialog.destroy();
 
-        Notify({
+        SystemUtilities.notify({
             summary: `${themeOnly ? 'Theme' : 'Config'} Import Failed`,
             body: errorMessage ?? 'An unknown error occurred.',
             iconName: icons.ui.warning,
         });
     }
 };
+
+/**
+ * Filters the given configuration object to exclude theme-related properties.
+ * Theme-related properties are identified by their keys matching a hex color pattern or being in the whitelist.
+ *
+ * @param config - The configuration object to be filtered.
+ * @returns A new configuration object excluding theme-related properties.
+ */
+function filterConfigForNonTheme(config: Config): Config {
+    const filteredConfig: Config = {};
+    for (const key in config) {
+        if (whiteListedThemeProp.includes(key)) {
+            continue;
+        }
+
+        const value = config[key];
+        if (!(typeof value === 'string' && hexColorPattern.test(value))) {
+            filteredConfig[key] = config[key];
+        }
+    }
+    return filteredConfig;
+}
diff --git a/src/components/settings/shared/Inputter.tsx b/src/components/settings/shared/Inputter.tsx
index 51f359f..5e0ad0f 100644
--- a/src/components/settings/shared/Inputter.tsx
+++ b/src/components/settings/shared/Inputter.tsx
@@ -1,5 +1,5 @@
 import { NumberInputter } from './inputs/number';
-import { ObjectInputter } from './inputs/object';
+import { FloatInputter } from './inputs/float';
 import { StringInputter } from './inputs/string';
 import { BooleanInputter } from './inputs/boolean';
 import { ImageInputter } from './inputs/image';
@@ -10,7 +10,8 @@ import { EnumInputter } from './inputs/enum';
 import { FontInputter } from './inputs/font';
 import { Variable } from 'astal';
 import { Gtk } from 'astal/gtk3';
-import { RowProps } from 'src/lib/options/options.types';
+import { RowProps } from 'src/lib/options/types';
+import { ObjectInputter } from './inputs/object';
 
 const InputField = <T extends string | number | boolean | object>({
     opt,
@@ -33,6 +34,7 @@ const InputField = <T extends string | number | boolean | object>({
                 <NumberInputter opt={opt} min={min} max={max} increment={increment} isUnsaved={isUnsaved} />
             );
         case 'float':
+            return <FloatInputter opt={opt} isUnsaved={isUnsaved} className={className} />;
         case 'object':
             return <ObjectInputter opt={opt} isUnsaved={isUnsaved} className={className} />;
         case 'string':
@@ -77,7 +79,8 @@ export const Inputter = <T extends string | number | boolean | object>({
     return (
         <box
             className={/export|import/.test(type || '') ? '' : 'inputter-container'}
-            valign={Gtk.Align.CENTER}
+            valign={Gtk.Align.START}
+            halign={Gtk.Align.END}
         >
             <InputField
                 type={type}
diff --git a/src/components/settings/shared/Option/PropertyLabel.tsx b/src/components/settings/shared/Option/PropertyLabel.tsx
index ff213ab..cd89454 100644
--- a/src/components/settings/shared/Option/PropertyLabel.tsx
+++ b/src/components/settings/shared/Option/PropertyLabel.tsx
@@ -3,7 +3,7 @@ import { Label, LabelSettingProps } from '../Label';
 
 export const PropertyLabel = ({ title, subtitle, subtitleLink }: LabelSettingProps): JSX.Element => {
     return (
-        <box halign={Gtk.Align.START} valign={Gtk.Align.CENTER} hexpand>
+        <box halign={Gtk.Align.START} valign={Gtk.Align.START} hexpand>
             <Label title={title} subtitle={subtitle} subtitleLink={subtitleLink} />
         </box>
     );
diff --git a/src/components/settings/shared/Option/ResetButton.tsx b/src/components/settings/shared/Option/ResetButton.tsx
index 061d4ec..d6b2f0e 100644
--- a/src/components/settings/shared/Option/ResetButton.tsx
+++ b/src/components/settings/shared/Option/ResetButton.tsx
@@ -1,8 +1,8 @@
 import { bind } from 'astal';
 import { Gtk } from 'astal/gtk3';
 import icons from 'src/lib/icons/icons';
-import { RowProps } from 'src/lib/options/options.types';
-import { isPrimaryClick } from 'src/lib/utils';
+import { RowProps } from 'src/lib/options/types';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const ResetButton = <T extends string | number | boolean | object>({
     ...props
@@ -16,7 +16,7 @@ export const ResetButton = <T extends string | number | boolean | object>({
                 }
             }}
             sensitive={bind(props.opt).as((v) => v !== props.opt.initial)}
-            valign={Gtk.Align.CENTER}
+            valign={Gtk.Align.START}
         >
             <icon icon={icons.ui.refresh} />
         </button>
diff --git a/src/components/settings/shared/Option/SettingInput.tsx b/src/components/settings/shared/Option/SettingInput.tsx
index db9f406..48668fd 100644
--- a/src/components/settings/shared/Option/SettingInput.tsx
+++ b/src/components/settings/shared/Option/SettingInput.tsx
@@ -1,6 +1,6 @@
 import { Variable } from 'astal';
 import { Inputter } from '../Inputter';
-import { RowProps } from 'src/lib/options/options.types';
+import { RowProps } from 'src/lib/options/types';
 
 export const SettingInput = <T extends string | number | boolean | object>({
     className,
diff --git a/src/components/settings/shared/Option/index.tsx b/src/components/settings/shared/Option/index.tsx
index 9dac338..8916404 100644
--- a/src/components/settings/shared/Option/index.tsx
+++ b/src/components/settings/shared/Option/index.tsx
@@ -2,7 +2,7 @@ import { Variable } from 'astal';
 import { PropertyLabel } from './PropertyLabel';
 import { ResetButton } from './ResetButton';
 import { SettingInput } from './SettingInput';
-import { RowProps } from 'src/lib/options/options.types';
+import { RowProps } from 'src/lib/options/types';
 
 export const Option = <T extends string | number | boolean | object>({
     className,
@@ -11,7 +11,7 @@ export const Option = <T extends string | number | boolean | object>({
     const isUnsaved = Variable(false);
     return (
         <box
-            className={'option-item'}
+            className="option-item"
             hexpand
             onDestroy={() => {
                 isUnsaved.drop();
diff --git a/src/components/settings/shared/inputs/boolean.tsx b/src/components/settings/shared/inputs/boolean.tsx
index 809e97a..a0565d6 100644
--- a/src/components/settings/shared/inputs/boolean.tsx
+++ b/src/components/settings/shared/inputs/boolean.tsx
@@ -1,9 +1,8 @@
 import { Binding } from 'astal';
 import { bind, Variable } from 'astal';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
 import { Opt } from 'src/lib/options';
 
-import { dependencies as checkDependencies } from 'src/lib/utils';
-
 export const BooleanInputter = <T extends string | number | boolean | object>({
     opt,
     disabledBinding,
@@ -21,7 +20,7 @@ export const BooleanInputter = <T extends string | number | boolean | object>({
                 if (
                     self.active &&
                     dependencies !== undefined &&
-                    !dependencies.every((dep) => checkDependencies(dep))
+                    !dependencies.every((dep) => SystemUtilities.checkDependencies(dep))
                 ) {
                     self.active = false;
                     return;
diff --git a/src/components/settings/shared/inputs/color.tsx b/src/components/settings/shared/inputs/color.tsx
index 8a70121..fcf4609 100644
--- a/src/components/settings/shared/inputs/color.tsx
+++ b/src/components/settings/shared/inputs/color.tsx
@@ -8,20 +8,22 @@ export const ColorInputter = <T extends string | number | boolean | object>({
 }: ColorInputterProps<T>): JSX.Element => {
     return (
         <ColorButton
+            useAlpha={false}
             setup={(self) => {
                 useHook(self, opt, () => {
                     const rgba = new Gdk.RGBA();
                     rgba.parse(opt.get() as string);
-                    self.rgba = rgba;
+                    self.set_rgba(rgba);
                 });
 
-                self.connect('color-set', ({ rgba: { red, green, blue } }) => {
+                self.connect('color-set', () => {
+                    const rgba = self.get_rgba();
                     const hex = (n: number): string => {
                         const c = Math.floor(255 * n).toString(16);
                         return c.length === 1 ? `0${c}` : c;
                     };
 
-                    opt.set(`#${hex(red)}${hex(green)}${hex(blue)}` as T);
+                    opt.set(`#${hex(rgba.red)}${hex(rgba.green)}${hex(rgba.blue)}` as T);
                 });
             }}
         />
diff --git a/src/components/settings/shared/inputs/enum.tsx b/src/components/settings/shared/inputs/enum.tsx
index cc71a5f..1b24efd 100644
--- a/src/components/settings/shared/inputs/enum.tsx
+++ b/src/components/settings/shared/inputs/enum.tsx
@@ -1,6 +1,6 @@
 import icons from 'src/lib/icons/icons';
 import { bind } from 'astal';
-import { isPrimaryClick } from 'src/lib/utils';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 import { Opt } from 'src/lib/options';
 
 export const EnumInputter = <T extends string | number | boolean | object>({
diff --git a/src/components/settings/shared/inputs/object.tsx b/src/components/settings/shared/inputs/float.tsx
similarity index 71%
rename from src/components/settings/shared/inputs/object.tsx
rename to src/components/settings/shared/inputs/float.tsx
index eded225..b0019fd 100644
--- a/src/components/settings/shared/inputs/object.tsx
+++ b/src/components/settings/shared/inputs/float.tsx
@@ -2,7 +2,7 @@ import { bind, Variable } from 'astal';
 import icons from 'src/lib/icons/icons';
 import { Opt } from 'src/lib/options';
 
-export const ObjectInputter = <T extends string | number | boolean | object>({
+export const FloatInputter = <T extends string | number | boolean | object>({
     opt,
     isUnsaved,
     className,
@@ -27,26 +27,26 @@ export const ObjectInputter = <T extends string | number | boolean | object>({
             <entry
                 className={className}
                 onChanged={(self) => {
-                    const currentText = self.text;
-                    const serializedOpt = JSON.stringify(opt.get());
+                    const currentText = parseFloat(self.text);
+                    const serializedOpt = parseFloat(opt.get().toString());
                     isUnsaved.set(currentText !== serializedOpt);
                 }}
                 onActivate={(self) => {
                     try {
-                        const parsedValue = JSON.parse(self.text || '{}');
-                        opt.set(parsedValue);
+                        const parsedValue = parseFloat(self.text);
+                        opt.set(parsedValue as unknown as T);
                         isUnsaved.set(false);
                     } catch (error) {
                         console.error('Invalid JSON input:', error);
                     }
                 }}
                 setup={(self) => {
-                    self.text = JSON.stringify(opt.get());
-                    isUnsaved.set(self.text !== JSON.stringify(opt.get()));
+                    self.text = opt.get().toString();
+                    isUnsaved.set(self.text !== opt.get().toString());
 
                     self.hook(opt, () => {
-                        self.text = JSON.stringify(opt.get());
-                        isUnsaved.set(self.text !== JSON.stringify(opt.get()));
+                        self.text = opt.get().toString();
+                        isUnsaved.set(self.text !== opt.get().toString());
                     });
                 }}
             />
diff --git a/src/components/settings/shared/inputs/font/utils.ts b/src/components/settings/shared/inputs/font/utils.ts
index 8f81340..fdc9353 100644
--- a/src/components/settings/shared/inputs/font/utils.ts
+++ b/src/components/settings/shared/inputs/font/utils.ts
@@ -1,23 +1,8 @@
 import Pango from 'gi://Pango?version=1.0';
 
 export type FontStyle = 'normal' | 'italic' | 'oblique';
-export type FontVariant = 'normal' | 'small-caps';
-export type FontWeight =
-    | 'thin'
-    | 'ultralight'
-    | 'light'
-    | 'semilight'
-    | 'book'
-    | 'normal'
-    | 'medium'
-    | 'semibold'
-    | 'bold'
-    | 'ultrabold'
-    | 'heavy';
 
 const DEFAULT_FONT_STYLE: FontStyle = 'normal';
-const DEFAULT_FONT_VARIANT: FontVariant = 'normal';
-const DEFAULT_FONT_WEIGHT: FontWeight = 'normal';
 
 const styleMap: Record<Pango.Style, FontStyle> = {
     [Pango.Style.NORMAL]: 'normal',
@@ -25,25 +10,6 @@ const styleMap: Record<Pango.Style, FontStyle> = {
     [Pango.Style.OBLIQUE]: 'oblique',
 };
 
-const variantMap: Record<Pango.Variant, FontVariant> = {
-    [Pango.Variant.NORMAL]: 'normal',
-    [Pango.Variant.SMALL_CAPS]: 'small-caps',
-};
-
-const weightMap: Record<Pango.Weight, FontWeight> = {
-    [Pango.Weight.THIN]: 'thin',
-    [Pango.Weight.ULTRALIGHT]: 'ultralight',
-    [Pango.Weight.LIGHT]: 'light',
-    [Pango.Weight.SEMILIGHT]: 'semilight',
-    [Pango.Weight.BOOK]: 'book',
-    [Pango.Weight.NORMAL]: 'normal',
-    [Pango.Weight.MEDIUM]: 'medium',
-    [Pango.Weight.SEMIBOLD]: 'semibold',
-    [Pango.Weight.BOLD]: 'bold',
-    [Pango.Weight.ULTRABOLD]: 'ultrabold',
-    [Pango.Weight.HEAVY]: 'heavy',
-};
-
 /**
  * Converts a Pango.Style enum to a FontStyle string.
  * @param styleEnum - The Pango.Style enum value.
@@ -52,21 +18,3 @@ const weightMap: Record<Pango.Weight, FontWeight> = {
 export function styleToString(styleEnum: Pango.Style): FontStyle {
     return styleMap[styleEnum] ?? DEFAULT_FONT_STYLE;
 }
-
-/**
- * Converts a Pango.Variant enum to a FontVariant string.
- * @param variantEnum - The Pango.Variant enum value.
- * @returns The corresponding FontVariant string.
- */
-export function variantToString(variantEnum: Pango.Variant): FontVariant {
-    return variantMap[variantEnum] ?? DEFAULT_FONT_VARIANT;
-}
-
-/**
- * Converts a Pango.Weight enum to a FontWeight string.
- * @param weightEnum - The Pango.Weight enum value.
- * @returns The corresponding FontWeight string.
- */
-export function weightToString(weightEnum: Pango.Weight): FontWeight {
-    return weightMap[weightEnum] ?? DEFAULT_FONT_WEIGHT;
-}
diff --git a/src/components/settings/shared/inputs/import.tsx b/src/components/settings/shared/inputs/import.tsx
index 6da8808..975d8ed 100644
--- a/src/components/settings/shared/inputs/import.tsx
+++ b/src/components/settings/shared/inputs/import.tsx
@@ -1,6 +1,6 @@
-import { ThemeExportData } from 'src/lib/options/options.types';
+import { ThemeExportData } from 'src/lib/options/types';
 import { importFiles, saveFileDialog } from '../FileChooser';
-import { isPrimaryClick } from 'src/lib/utils';
+import { isPrimaryClick } from 'src/lib/events/mouse';
 
 export const ImportInputter = ({ exportData }: ImportInputterProps): JSX.Element => {
     return (
diff --git a/src/components/settings/shared/inputs/object/EditorControls.tsx b/src/components/settings/shared/inputs/object/EditorControls.tsx
new file mode 100644
index 0000000..43436a8
--- /dev/null
+++ b/src/components/settings/shared/inputs/object/EditorControls.tsx
@@ -0,0 +1,33 @@
+import { bind } from 'astal';
+import { Gtk } from 'astal/gtk3';
+import { EditorControlsProps } from './types';
+
+export const EditorControls = ({ jsonError, onSave }: EditorControlsProps): JSX.Element => {
+    return (
+        <box vertical className="editor-controls">
+            <revealer
+                revealChild={bind(jsonError).as((err) => err.length > 0)}
+                transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
+            >
+                <label
+                    className="error-message"
+                    halign={Gtk.Align.START}
+                    label={bind(jsonError)}
+                    wrap
+                    wrapMode={Gtk.WrapMode.WORD}
+                    maxWidthChars={50}
+                />
+            </revealer>
+
+            <box className="controls-row">
+                <label label="Press Ctrl+Enter to save" className="hint-text" halign={Gtk.Align.START} />
+                <box hexpand />
+                <button className="save-button" onClick={onSave}>
+                    <box>
+                        <label label="Save" />
+                    </box>
+                </button>
+            </box>
+        </box>
+    );
+};
diff --git a/src/components/settings/shared/inputs/object/JsonEditor.tsx b/src/components/settings/shared/inputs/object/JsonEditor.tsx
new file mode 100644
index 0000000..03129fd
--- /dev/null
+++ b/src/components/settings/shared/inputs/object/JsonEditor.tsx
@@ -0,0 +1,26 @@
+import { Gtk } from 'astal/gtk3';
+import { JsonEditorProps } from './types';
+import SourceView from 'src/components/shared/SourceView';
+import { handleKeyPress, setupSourceView } from './helpers';
+
+export const JsonEditor = ({ editorText, onSave, onTextChange }: JsonEditorProps): JSX.Element => {
+    return (
+        <scrollable
+            vscroll={Gtk.PolicyType.AUTOMATIC}
+            hscroll={Gtk.PolicyType.AUTOMATIC}
+            className="json-editor-scrollable-container"
+        >
+            <SourceView
+                className="json-editor-sourceview"
+                monospace
+                editable={true}
+                canFocus={true}
+                wrapMode={Gtk.WrapMode.NONE}
+                showLineNumbers={true}
+                highlightCurrentLine={true}
+                onKeyPressEvent={(self, event) => handleKeyPress(self, event, onSave)}
+                setup={(self) => setupSourceView(self, editorText, onTextChange)}
+            />
+        </scrollable>
+    );
+};
diff --git a/src/components/settings/shared/inputs/object/JsonPreview.tsx b/src/components/settings/shared/inputs/object/JsonPreview.tsx
new file mode 100644
index 0000000..38acb1f
--- /dev/null
+++ b/src/components/settings/shared/inputs/object/JsonPreview.tsx
@@ -0,0 +1,27 @@
+import { Gtk } from 'astal/gtk3';
+import { JsonPreviewProps } from './types';
+import { bind } from 'astal';
+
+export const JsonPreview = ({ value, onClick, isExpanded }: JsonPreviewProps): JSX.Element => {
+    return (
+        <eventbox onClick={onClick}>
+            <box
+                className={bind(isExpanded).as((expanded) => `json-preview ${expanded ? 'expanded' : ''}`)}
+                hexpand
+            >
+                <label
+                    className="preview-text"
+                    label={value.as((val) => JSON.stringify(val))}
+                    halign={Gtk.Align.START}
+                    truncate
+                    hexpand
+                    maxWidthChars={55}
+                />
+                <label
+                    className="preview-icon txt-icon"
+                    label={bind(isExpanded).as((expanded) => (expanded ? '󰅖' : '󰏫'))}
+                />
+            </box>
+        </eventbox>
+    );
+};
diff --git a/src/components/settings/shared/inputs/object/helpers/index.ts b/src/components/settings/shared/inputs/object/helpers/index.ts
new file mode 100644
index 0000000..db4d3a0
--- /dev/null
+++ b/src/components/settings/shared/inputs/object/helpers/index.ts
@@ -0,0 +1,3 @@
+export { handleKeyPress } from './keyHandler';
+export { setupSourceView } from './sourceViewSetup';
+export { useJsonEditor } from './useJsonEditor';
diff --git a/src/components/settings/shared/inputs/object/helpers/keyHandler.ts b/src/components/settings/shared/inputs/object/helpers/keyHandler.ts
new file mode 100644
index 0000000..7b520db
--- /dev/null
+++ b/src/components/settings/shared/inputs/object/helpers/keyHandler.ts
@@ -0,0 +1,24 @@
+import { Gdk } from 'astal/gtk3';
+import SourceView from 'src/components/shared/SourceView';
+
+/**
+ * Handles key press events for the JSON editor.
+ * Triggers save on Ctrl+Enter combination.
+ * @param self - The SourceView instance
+ * @param event - The key press event
+ * @param onSave - Callback to save the content
+ */
+export function handleKeyPress(self: SourceView, event: Gdk.Event, onSave: (text: string) => void): boolean {
+    const [, keyval] = event.get_keyval();
+    const modifiers = event.get_state()[1];
+
+    const ENTER_KEY = 65293;
+    if (keyval === ENTER_KEY && modifiers & Gdk.ModifierType.CONTROL_MASK) {
+        const buffer = self.get_buffer();
+        const [start, end] = buffer.get_bounds();
+        const text = buffer.get_text(start, end, true);
+        onSave(text);
+        return true;
+    }
+    return false;
+}
diff --git a/src/components/settings/shared/inputs/object/helpers/sourceViewSetup.ts b/src/components/settings/shared/inputs/object/helpers/sourceViewSetup.ts
new file mode 100644
index 0000000..0613249
--- /dev/null
+++ b/src/components/settings/shared/inputs/object/helpers/sourceViewSetup.ts
@@ -0,0 +1,111 @@
+import { Variable } from 'astal';
+import SourceView from 'src/components/shared/SourceView';
+import GtkSource from 'gi://GtkSource?version=3.0';
+
+/**
+ * Sets up the SourceView with JSON syntax highlighting and text change handling.
+ * Configures the buffer, applies JSON language highlighting, and sets up event handlers
+ * for text changes and synchronization with the editorText variable.
+ * @param self - The SourceView instance
+ * @param editorText - Variable containing the JSON text
+ * @param onTextChange - Callback for text changes
+ */
+export function setupSourceView(
+    self: SourceView,
+    editorText: Variable<string>,
+    onTextChange: (text: string) => void,
+): void {
+    const buffer = self.get_buffer();
+
+    setupSyntaxHighlighting(buffer);
+    setupTheme(buffer);
+    setupTextHandling(self, buffer, editorText, onTextChange);
+    setupEditorPreferences(self);
+
+    setTimeout(() => self.grab_focus(), 100);
+}
+
+/**
+ * Configures JSON syntax highlighting for the buffer
+ * @param buffer - The GtkSource buffer
+ */
+function setupSyntaxHighlighting(buffer: GtkSource.Buffer): void {
+    const langManager = GtkSource.LanguageManager.get_default();
+    const jsonLang = langManager.get_language('json');
+
+    if (jsonLang) {
+        buffer.set_language(jsonLang);
+    }
+}
+
+/**
+ * Loads and applies the Tokyo Night theme
+ * @param buffer - The GtkSource buffer
+ */
+function setupTheme(buffer: GtkSource.Buffer): void {
+    const styleManager = GtkSource.StyleSchemeManager.get_default();
+
+    const currentSearchPath = styleManager.get_search_path();
+    const assetsPath = `${SRC}/assets`;
+    styleManager.set_search_path([assetsPath, ...currentSearchPath]);
+
+    const tokyoNight = styleManager.get_scheme('tokyo-night');
+
+    if (tokyoNight) {
+        buffer.set_style_scheme(tokyoNight);
+    } else {
+        const fallbackSchemes = ['solarized-dark', 'cobalt', 'oblivion'];
+        for (const schemeName of fallbackSchemes) {
+            const scheme = styleManager.get_scheme(schemeName);
+            if (scheme) {
+                buffer.set_style_scheme(scheme);
+                console.debug(`Tokyo Night theme not found, using fallback: ${schemeName}`);
+                break;
+            }
+        }
+    }
+}
+
+/**
+ * Sets up text handling and synchronization
+ * @param self - The SourceView instance
+ * @param buffer - The GtkSource buffer
+ * @param editorText - Variable containing the JSON text
+ * @param onTextChange - Callback for text changes
+ */
+function setupTextHandling(
+    self: SourceView,
+    buffer: GtkSource.Buffer,
+    editorText: Variable<string>,
+    onTextChange: (text: string) => void,
+): void {
+    buffer.set_text(editorText.get(), -1);
+
+    buffer.connect('changed', () => {
+        const [start, end] = buffer.get_bounds();
+        const currentText = buffer.get_text(start, end, true);
+        onTextChange(currentText);
+    });
+
+    self.hook(editorText, () => {
+        const currentBuffer = self.get_buffer();
+        const [start, end] = currentBuffer.get_bounds();
+        const currentText = currentBuffer.get_text(start, end, true);
+
+        if (currentText !== editorText.get()) {
+            currentBuffer.set_text(editorText.get(), -1);
+        }
+    });
+}
+
+/**
+ * Configures editor preferences like tab settings and indentation
+ * @param self - The SourceView instance
+ */
+function setupEditorPreferences(self: SourceView): void {
+    self.set_tab_width(2);
+    self.set_insert_spaces_instead_of_tabs(true);
+    self.set_auto_indent(true);
+    self.set_smart_backspace(true);
+    self.set_smart_home_end(GtkSource.SmartHomeEndType.AFTER);
+}
diff --git a/src/components/settings/shared/inputs/object/helpers/useJsonEditor.ts b/src/components/settings/shared/inputs/object/helpers/useJsonEditor.ts
new file mode 100644
index 0000000..6485236
--- /dev/null
+++ b/src/components/settings/shared/inputs/object/helpers/useJsonEditor.ts
@@ -0,0 +1,85 @@
+import { Variable } from 'astal';
+import { Opt } from 'src/lib/options';
+import { JsonEditorHook } from '../types';
+
+/**
+ * Custom hook for managing JSON editor state and logic
+ *
+ * Handles JSON parsing, validation, and synchronization
+ * between the editor and the option value
+ */
+export function useJsonEditor<T>(opt: Opt<T>, isUnsaved: Variable<boolean>): JsonEditorHook {
+    const jsonError = Variable<string>('');
+    const showEditor = Variable<boolean>(false);
+    const editorText = Variable<string>(JSON.stringify(opt.get(), null, 2));
+
+    /**
+     * Validates JSON and updates error state
+     */
+    const validateJson = (text: string): boolean => {
+        try {
+            JSON.parse(text || '{}');
+            jsonError.set('');
+            return true;
+        } catch (error) {
+            if (error instanceof Error) {
+                jsonError.set(`Invalid JSON: ${error.message}`);
+            }
+            return false;
+        }
+    };
+
+    /**
+     * Opens the editor and syncs current value
+     */
+    const handleOpen = (): void => {
+        editorText.set(JSON.stringify(opt.get(), null, 2));
+        showEditor.set(!showEditor.get());
+        jsonError.set('');
+    };
+
+    /**
+     * Saves valid JSON and closes editor
+     */
+    const handleSave = (): void => {
+        const text = editorText.get();
+        if (validateJson(text)) {
+            try {
+                const parsedValue = JSON.parse(text || '{}');
+                opt.set(parsedValue);
+                isUnsaved.set(false);
+                showEditor.set(false);
+            } catch (error) {
+                console.error('Unexpected error saving JSON:', error);
+            }
+        }
+    };
+
+    /**
+     * Handles text changes in the editor
+     */
+    const handleTextChange = (text: string): void => {
+        editorText.set(text);
+        validateJson(text);
+
+        const serializedOpt = JSON.stringify(opt.get(), null, 2);
+        isUnsaved.set(text !== serializedOpt);
+    };
+
+    opt.subscribe(() => {
+        const newText = JSON.stringify(opt.get(), null, 2);
+        editorText.set(newText);
+        isUnsaved.set(false);
+        jsonError.set('');
+    });
+
+    return {
+        jsonError,
+        showEditor,
+        editorText,
+        handleOpen,
+        handleSave,
+        handleTextChange,
+        validateJson,
+    };
+}
diff --git a/src/components/settings/shared/inputs/object/index.tsx b/src/components/settings/shared/inputs/object/index.tsx
new file mode 100644
index 0000000..264bf09
--- /dev/null
+++ b/src/components/settings/shared/inputs/object/index.tsx
@@ -0,0 +1,56 @@
+import { bind } from 'astal';
+import { Gtk } from 'astal/gtk3';
+import icons from 'src/lib/icons/icons';
+import { ObjectInputterProps } from './types';
+import { JsonPreview } from './JsonPreview';
+import { JsonEditor } from './JsonEditor';
+import { EditorControls } from './EditorControls';
+import { useJsonEditor } from './helpers';
+
+export const ObjectInputter = <T extends string | number | boolean | object>({
+    opt,
+    isUnsaved,
+    className,
+}: ObjectInputterProps<T>): JSX.Element => {
+    const { jsonError, showEditor, editorText, handleOpen, handleSave, handleTextChange } = useJsonEditor(
+        opt,
+        isUnsaved,
+    );
+
+    return (
+        <box className="object-input-container" vertical>
+            <box className="unsaved-icon-container">
+                {bind(isUnsaved).as((unsaved) =>
+                    unsaved ? (
+                        <icon
+                            className="unsaved-icon"
+                            icon={icons.ui.warning}
+                            tooltipText="Unsaved changes"
+                        />
+                    ) : (
+                        <box />
+                    ),
+                )}
+                <JsonPreview value={bind(opt)} onClick={handleOpen} isExpanded={bind(showEditor)} />
+            </box>
+
+            <revealer
+                revealChild={bind(showEditor)}
+                transitionType={Gtk.RevealerTransitionType.SLIDE_DOWN}
+                transitionDuration={200}
+            >
+                <box className="json-editor-wrapper" vertical>
+                    <JsonEditor
+                        editorText={editorText}
+                        jsonError={jsonError}
+                        onSave={handleSave}
+                        onTextChange={handleTextChange}
+                        className={className}
+                    />
+
+                    <EditorControls jsonError={jsonError} onSave={handleSave} />
+                </box>
+            </revealer>
+        </box>
+    );
+};
diff --git a/src/components/settings/shared/inputs/object/types.ts b/src/components/settings/shared/inputs/object/types.ts
new file mode 100644
index 0000000..4d57cf2
--- /dev/null
+++ b/src/components/settings/shared/inputs/object/types.ts
@@ -0,0 +1,40 @@
+import { Binding, Variable } from 'astal';
+import { Opt } from 'src/lib/options';
+
+export interface ObjectInputterProps<T> {
+    opt: Opt<T>;
+    isUnsaved: Variable<boolean>;
+    className: string;
+}
+
+export interface JsonEditorState {
+    jsonError: Variable<string>;
+    showEditor: Variable<boolean>;
+    editorText: Variable<string>;
+}
+
+export interface JsonEditorHook extends JsonEditorState {
+    handleOpen: () => void;
+    handleSave: () => void;
+    handleTextChange: (text: string) => void;
+    validateJson: (text: string) => boolean;
+}
+
+export interface JsonPreviewProps {
+    value: Binding<unknown>;
+    onClick: () => void;
+    isExpanded: Binding<boolean>;
+}
+
+export interface JsonEditorProps {
+    editorText: Variable<string>;
+    jsonError: Variable<string>;
+    onSave: (text: string) => void;
+    onTextChange: (text: string) => void;
+    className?: string;
+}
+
+export interface EditorControlsProps {
+    jsonError: Variable<string>;
+    onSave: () => void;
+}
diff --git a/src/components/settings/shared/inputs/wallpaper.tsx b/src/components/settings/shared/inputs/wallpaper.tsx
index 69b740d..1433dc3 100644
--- a/src/components/settings/shared/inputs/wallpaper.tsx
+++ b/src/components/settings/shared/inputs/wallpaper.tsx
@@ -1,7 +1,9 @@
 import FileChooserButton from 'src/components/shared/FileChooserButton';
-import Wallpaper from 'src/services/Wallpaper';
-import options from 'src/options';
+import options from 'src/configuration';
 import { Opt } from 'src/lib/options';
+import { WallpaperService } from 'src/services/wallpaper';
+
+const wallpaperService = WallpaperService.getInstance();
 
 export const WallpaperInputter = <T extends string | number | boolean | object>({
     opt,
@@ -22,7 +24,7 @@ export const WallpaperInputter = <T extends string | number | boolean | object>(
                     opt.set(filePath as T);
 
                     if (options.wallpaper.enable.get()) {
-                        Wallpaper.setWallpaper(filePath);
+                        wallpaperService.setWallpaper(filePath);
                     }
                 }}
             />
diff --git a/src/lib/types/filechooser.types.ts b/src/components/settings/shared/types.ts
similarity index 100%
rename from src/lib/types/filechooser.types.ts
rename to src/components/settings/shared/types.ts
diff --git a/src/components/settings/side_effects/index.ts b/src/components/settings/side_effects/index.ts
index 75c492b..fb158d5 100644
--- a/src/components/settings/side_effects/index.ts
+++ b/src/components/settings/side_effects/index.ts
@@ -1,5 +1,5 @@
 import { Opt } from 'src/lib/options';
-import options from 'src/options';
+import options from 'src/configuration';
 
 const { show_numbered, show_icons, showWsIcons, showApplicationIcons } = options.bar.workspaces;
 const { monochrome: monoBar } = options.theme.bar.buttons;
diff --git a/src/components/shared/SourceView.tsx b/src/components/shared/SourceView.tsx
new file mode 100644
index 0000000..21db13e
--- /dev/null
+++ b/src/components/shared/SourceView.tsx
@@ -0,0 +1,34 @@
+import { astalify, ConstructProps } from 'astal/gtk3';
+import { GObject } from 'astal';
+import GtkSource from 'gi://GtkSource?version=3.0';
+
+/**
+ * SourceView component that extends GtkSource.View.
+ *
+ * @class Window
+ * @extends {astalify(GtkSource.View)}
+ */
+class SourceView extends astalify(GtkSource.View) {
+    static {
+        GObject.registerClass(this);
+    }
+
+    /**
+     * Creates an instance of SourceView.
+     * @param props - The properties for the SourceView component
+     */
+    constructor(props: ConstructProps<SourceView, GtkSource.View.ConstructorProps>) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        super(props as any);
+    }
+
+    /**
+     * Gets the GtkSource.Buffer associated with this view.
+     * Overrides the base method to return the correct type.
+     */
+    public get_buffer(): GtkSource.Buffer {
+        return super.get_buffer() as GtkSource.Buffer;
+    }
+}
+
+export default SourceView;
diff --git a/src/components/shared/TextView.tsx b/src/components/shared/TextView.tsx
new file mode 100644
index 0000000..b80f61f
--- /dev/null
+++ b/src/components/shared/TextView.tsx
@@ -0,0 +1,26 @@
+import { Gtk, astalify, ConstructProps } from 'astal/gtk3';
+import { GObject } from 'astal';
+
+/**
+ * TextView component that extends Gtk.TextView.
+ *
+ * @class TextView
+ * @extends {astalify(Gtk.TextView)}
+ */
+class TextView extends astalify(Gtk.TextView) {
+    static {
+        GObject.registerClass(this);
+    }
+
+    /**
+     * Creates an instance of TextView.
+     * @param props - The properties for the TextView component.
+     * @memberof TextView
+     */
+    constructor(props: ConstructProps<TextView, Gtk.TextView.ConstructorProps>) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        super(props as any);
+    }
+}
+
+export default TextView;
diff --git a/src/configuration/index.ts b/src/configuration/index.ts
new file mode 100644
index 0000000..2e9d8ee
--- /dev/null
+++ b/src/configuration/index.ts
@@ -0,0 +1,10 @@
+import { mkOptions } from 'src/lib/options';
+import theme from './modules/theme';
+import config from './modules/config';
+
+const options = mkOptions({
+    theme: theme,
+    ...config,
+});
+
+export default options;
diff --git a/src/configuration/modules/config/bar/battery/index.ts b/src/configuration/modules/config/bar/battery/index.ts
new file mode 100644
index 0000000..ae569cd
--- /dev/null
+++ b/src/configuration/modules/config/bar/battery/index.ts
@@ -0,0 +1,10 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    label: opt(true),
+    hideLabelWhenFull: opt(false),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/bluetooth/index.ts b/src/configuration/modules/config/bar/bluetooth/index.ts
new file mode 100644
index 0000000..7c8212c
--- /dev/null
+++ b/src/configuration/modules/config/bar/bluetooth/index.ts
@@ -0,0 +1,9 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    label: opt(true),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/cava/index.ts b/src/configuration/modules/config/bar/cava/index.ts
new file mode 100644
index 0000000..a74bf40
--- /dev/null
+++ b/src/configuration/modules/config/bar/cava/index.ts
@@ -0,0 +1,23 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    showIcon: opt(true),
+    icon: opt(''),
+    spaceCharacter: opt(' '),
+    barCharacters: opt(['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█']),
+    showActiveOnly: opt(false),
+    bars: opt(10),
+    channels: opt(2),
+    framerate: opt(60),
+    samplerate: opt(44100),
+    autoSensitivity: opt(true),
+    lowCutoff: opt(50),
+    highCutoff: opt(10000),
+    noiseReduction: opt(0.77),
+    stereo: opt(false),
+    leftClick: opt(''),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/clock/index.ts b/src/configuration/modules/config/bar/clock/index.ts
new file mode 100644
index 0000000..bf41171
--- /dev/null
+++ b/src/configuration/modules/config/bar/clock/index.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    icon: opt('󰸗'),
+    showIcon: opt(true),
+    showTime: opt(true),
+    format: opt('%a %b %d  %I:%M:%S %p'),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/cpu/index.ts b/src/configuration/modules/config/bar/cpu/index.ts
new file mode 100644
index 0000000..860eeae
--- /dev/null
+++ b/src/configuration/modules/config/bar/cpu/index.ts
@@ -0,0 +1,13 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    icon: opt(''),
+    label: opt(true),
+    round: opt(true),
+    pollingInterval: opt(2000),
+    leftClick: opt(''),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/cpuTemp/index.ts b/src/configuration/modules/config/bar/cpuTemp/index.ts
new file mode 100644
index 0000000..af9507d
--- /dev/null
+++ b/src/configuration/modules/config/bar/cpuTemp/index.ts
@@ -0,0 +1,17 @@
+import { opt } from 'src/lib/options';
+import { UnitType } from 'src/lib/units/temperature/types';
+
+export default {
+    icon: opt(''),
+    sensor: opt('auto'),
+    label: opt(true),
+    round: opt(true),
+    showUnit: opt(true),
+    unit: opt<UnitType>('metric'),
+    pollingInterval: opt(2000),
+    leftClick: opt(''),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/hypridle/index.ts b/src/configuration/modules/config/bar/hypridle/index.ts
new file mode 100644
index 0000000..f089f88
--- /dev/null
+++ b/src/configuration/modules/config/bar/hypridle/index.ts
@@ -0,0 +1,14 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    label: opt(true),
+    onIcon: opt('󰒳'),
+    offIcon: opt('󰒲'),
+    onLabel: opt('On'),
+    offLabel: opt('Off'),
+    pollingInterval: opt(1000 * 2),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/hyprsunset/index.ts b/src/configuration/modules/config/bar/hyprsunset/index.ts
new file mode 100644
index 0000000..cea1d16
--- /dev/null
+++ b/src/configuration/modules/config/bar/hyprsunset/index.ts
@@ -0,0 +1,15 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    temperature: opt('6000k'),
+    label: opt(true),
+    onIcon: opt('󱩌'),
+    offIcon: opt('󰛨'),
+    onLabel: opt('On'),
+    offLabel: opt('Off'),
+    pollingInterval: opt(1000 * 2),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/index.ts b/src/configuration/modules/config/bar/index.ts
new file mode 100644
index 0000000..6ce587e
--- /dev/null
+++ b/src/configuration/modules/config/bar/index.ts
@@ -0,0 +1,64 @@
+import { opt } from 'src/lib/options';
+import { AutoHide } from 'src/lib/options/types';
+import battery from './battery';
+import bluetooth from './bluetooth';
+import cava from './cava';
+import clock from './clock';
+import cpu from './cpu';
+import cpuTemp from './cpuTemp';
+import hypridle from './hypridle';
+import hyprsunset from './hyprsunset';
+import kbLayout from './kbLayout';
+import launcher from './launcher';
+import layouts from './layouts';
+import media from './media';
+import microphone from './microphone';
+import netstat from './netstat';
+import network from './network';
+import notifications from './notifications';
+import power from './power';
+import ram from './ram';
+import storage from './storage';
+import submap from './submap';
+import systray from './systray';
+import updates from './updates';
+import volume from './volume';
+import weather from './weather';
+import windowtitle from './windowtitle';
+import workspaces from './workspaces';
+import worldclock from './worldclock';
+
+export default {
+    scrollSpeed: opt(5),
+    autoHide: opt<AutoHide>('never'),
+    layouts,
+    launcher,
+    windowtitle,
+    workspaces,
+    volume,
+    network,
+    bluetooth,
+    battery,
+    systray,
+    clock,
+    media,
+    notifications,
+    customModules: {
+        scrollSpeed: opt(5),
+        microphone,
+        ram,
+        cpu,
+        cpuTemp,
+        storage,
+        netstat,
+        kbLayout,
+        updates,
+        submap,
+        weather,
+        power,
+        hyprsunset,
+        hypridle,
+        cava,
+        worldclock,
+    },
+};
diff --git a/src/configuration/modules/config/bar/kbLayout/index.ts b/src/configuration/modules/config/bar/kbLayout/index.ts
new file mode 100644
index 0000000..b96915b
--- /dev/null
+++ b/src/configuration/modules/config/bar/kbLayout/index.ts
@@ -0,0 +1,13 @@
+import { KbLabelType } from 'src/components/bar/modules/kblayout/helpers/types';
+import { opt } from 'src/lib/options';
+
+export default {
+    label: opt(true),
+    labelType: opt<KbLabelType>('code'),
+    icon: opt('󰌌'),
+    leftClick: opt(''),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/launcher/index.ts b/src/configuration/modules/config/bar/launcher/index.ts
new file mode 100644
index 0000000..98683a1
--- /dev/null
+++ b/src/configuration/modules/config/bar/launcher/index.ts
@@ -0,0 +1,10 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    icon: opt('󰣇'),
+    autoDetectIcon: opt(false),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/layouts/index.ts b/src/configuration/modules/config/bar/layouts/index.ts
new file mode 100644
index 0000000..e7f03f0
--- /dev/null
+++ b/src/configuration/modules/config/bar/layouts/index.ts
@@ -0,0 +1,20 @@
+import { opt } from 'src/lib/options';
+import { BarLayouts } from 'src/lib/options/types';
+
+export default opt<BarLayouts>({
+    '1': {
+        left: ['dashboard', 'workspaces', 'windowtitle'],
+        middle: ['media'],
+        right: ['volume', 'clock', 'notifications'],
+    },
+    '2': {
+        left: ['dashboard', 'workspaces', 'windowtitle'],
+        middle: ['media'],
+        right: ['volume', 'clock', 'notifications'],
+    },
+    '0': {
+        left: ['dashboard', 'workspaces', 'windowtitle'],
+        middle: ['media'],
+        right: ['volume', 'network', 'bluetooth', 'battery', 'systray', 'clock', 'notifications'],
+    },
+});
diff --git a/src/configuration/modules/config/bar/media/index.ts b/src/configuration/modules/config/bar/media/index.ts
new file mode 100644
index 0000000..ef3b638
--- /dev/null
+++ b/src/configuration/modules/config/bar/media/index.ts
@@ -0,0 +1,13 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    format: opt('{artist: - }{title}'),
+    truncation: opt(true),
+    show_label: opt(true),
+    truncation_size: opt(30),
+    show_active_only: opt(false),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/microphone/index.ts b/src/configuration/modules/config/bar/microphone/index.ts
new file mode 100644
index 0000000..97ec41e
--- /dev/null
+++ b/src/configuration/modules/config/bar/microphone/index.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    label: opt(true),
+    mutedIcon: opt('󰍭'),
+    unmutedIcon: opt('󰍬'),
+    leftClick: opt('menu:audio'),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/netstat/index.ts b/src/configuration/modules/config/bar/netstat/index.ts
new file mode 100644
index 0000000..20ca857
--- /dev/null
+++ b/src/configuration/modules/config/bar/netstat/index.ts
@@ -0,0 +1,18 @@
+import { opt } from 'src/lib/options';
+import { NetstatLabelType, RateUnit } from 'src/services/system/types';
+
+export default {
+    label: opt(true),
+    networkInterface: opt(''),
+    dynamicIcon: opt(false),
+    icon: opt('󰖟'),
+    networkInLabel: opt('↓'),
+    networkOutLabel: opt('↑'),
+    round: opt(true),
+    labelType: opt<NetstatLabelType>('full'),
+    rateUnit: opt<RateUnit>('auto'),
+    pollingInterval: opt(2000),
+    leftClick: opt(''),
+    rightClick: opt(''),
+    middleClick: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/network/index.ts b/src/configuration/modules/config/bar/network/index.ts
new file mode 100644
index 0000000..64565a4
--- /dev/null
+++ b/src/configuration/modules/config/bar/network/index.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    truncation: opt(true),
+    showWifiInfo: opt(false),
+    truncation_size: opt(7),
+    label: opt(true),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/notifications/index.ts b/src/configuration/modules/config/bar/notifications/index.ts
new file mode 100644
index 0000000..b8a4602
--- /dev/null
+++ b/src/configuration/modules/config/bar/notifications/index.ts
@@ -0,0 +1,10 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    show_total: opt(false),
+    hideCountWhenZero: opt(false),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/power/index.ts b/src/configuration/modules/config/bar/power/index.ts
new file mode 100644
index 0000000..f81ddd7
--- /dev/null
+++ b/src/configuration/modules/config/bar/power/index.ts
@@ -0,0 +1,11 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    icon: opt(''),
+    showLabel: opt(true),
+    leftClick: opt('menu:powerdropdown'),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/ram/index.ts b/src/configuration/modules/config/bar/ram/index.ts
new file mode 100644
index 0000000..a15b28e
--- /dev/null
+++ b/src/configuration/modules/config/bar/ram/index.ts
@@ -0,0 +1,13 @@
+import { opt } from 'src/lib/options';
+import { ResourceLabelType } from 'src/services/system/types';
+
+export default {
+    icon: opt(''),
+    label: opt(true),
+    labelType: opt<ResourceLabelType>('percentage'),
+    round: opt(true),
+    pollingInterval: opt(2000),
+    leftClick: opt(''),
+    rightClick: opt(''),
+    middleClick: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/storage/index.ts b/src/configuration/modules/config/bar/storage/index.ts
new file mode 100644
index 0000000..f415376
--- /dev/null
+++ b/src/configuration/modules/config/bar/storage/index.ts
@@ -0,0 +1,18 @@
+import { opt } from 'src/lib/options';
+import { ResourceLabelType } from 'src/services/system/types';
+import { StorageUnit } from './types';
+import { TooltipStyle } from 'src/components/bar/modules/storage/helpers/tooltipFormatters';
+
+export default {
+    paths: opt(['/']),
+    label: opt(true),
+    icon: opt('󰋊'),
+    round: opt(false),
+    units: opt<StorageUnit>('auto'),
+    labelType: opt<ResourceLabelType>('percentage'),
+    tooltipStyle: opt<TooltipStyle>('percentage-bar'),
+    pollingInterval: opt(2000),
+    leftClick: opt(''),
+    rightClick: opt(''),
+    middleClick: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/storage/types.ts b/src/configuration/modules/config/bar/storage/types.ts
new file mode 100644
index 0000000..ec75053
--- /dev/null
+++ b/src/configuration/modules/config/bar/storage/types.ts
@@ -0,0 +1,3 @@
+import { SizeUnit } from 'src/lib/units/size/types';
+
+export type StorageUnit = SizeUnit | 'auto';
diff --git a/src/configuration/modules/config/bar/submap/index.ts b/src/configuration/modules/config/bar/submap/index.ts
new file mode 100644
index 0000000..c289988
--- /dev/null
+++ b/src/configuration/modules/config/bar/submap/index.ts
@@ -0,0 +1,15 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    label: opt(true),
+    showSubmapName: opt(true),
+    enabledIcon: opt('󰌐'),
+    disabledIcon: opt('󰌌'),
+    enabledText: opt('Submap On'),
+    disabledText: opt('Submap off'),
+    leftClick: opt(''),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/systray/index.ts b/src/configuration/modules/config/bar/systray/index.ts
new file mode 100644
index 0000000..2feebfd
--- /dev/null
+++ b/src/configuration/modules/config/bar/systray/index.ts
@@ -0,0 +1,7 @@
+import { opt } from 'src/lib/options';
+import { SystrayIconMap } from './types';
+
+export default {
+    ignore: opt<string[]>([]),
+    customIcons: opt<SystrayIconMap>({}),
+};
diff --git a/src/lib/types/systray.types.ts b/src/configuration/modules/config/bar/systray/types.ts
similarity index 100%
rename from src/lib/types/systray.types.ts
rename to src/configuration/modules/config/bar/systray/types.ts
diff --git a/src/configuration/modules/config/bar/updates/index.ts b/src/configuration/modules/config/bar/updates/index.ts
new file mode 100644
index 0000000..4509a17
--- /dev/null
+++ b/src/configuration/modules/config/bar/updates/index.ts
@@ -0,0 +1,20 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    updateCommand: opt(`${SRC_DIR}/scripts/checkUpdates.sh -arch`),
+    updateTooltipCommand: opt(`${SRC_DIR}/scripts/checkUpdates.sh -arch -tooltip`),
+    extendedTooltip: opt(false),
+    label: opt(true),
+    padZero: opt(true),
+    autoHide: opt(false),
+    icon: {
+        pending: opt('󰏗'),
+        updated: opt('󰏖'),
+    },
+    pollingInterval: opt(1000 * 60 * 60 * 6),
+    leftClick: opt(`$TERMINAL -e ${SRC_DIR}/scripts/runUpdates.sh -arch`),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/volume/index.ts b/src/configuration/modules/config/bar/volume/index.ts
new file mode 100644
index 0000000..017bcd3
--- /dev/null
+++ b/src/configuration/modules/config/bar/volume/index.ts
@@ -0,0 +1,9 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    label: opt(true),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt('hyprpanel vol +5'),
+    scrollDown: opt('hyprpanel vol -5'),
+};
diff --git a/src/configuration/modules/config/bar/weather/index.ts b/src/configuration/modules/config/bar/weather/index.ts
new file mode 100644
index 0000000..885c4c7
--- /dev/null
+++ b/src/configuration/modules/config/bar/weather/index.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { UnitType } from 'src/lib/units/temperature/types';
+
+export default {
+    label: opt(true),
+    unit: opt<UnitType>('imperial'),
+    leftClick: opt(''),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/windowtitle/index.ts b/src/configuration/modules/config/bar/windowtitle/index.ts
new file mode 100644
index 0000000..d83be1a
--- /dev/null
+++ b/src/configuration/modules/config/bar/windowtitle/index.ts
@@ -0,0 +1,16 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    custom_title: opt(true),
+    title_map: opt([]),
+    class_name: opt(true),
+    label: opt(true),
+    icon: opt(true),
+    truncation: opt(true),
+    truncation_size: opt(50),
+    leftClick: opt(''),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+};
diff --git a/src/configuration/modules/config/bar/workspaces/index.ts b/src/configuration/modules/config/bar/workspaces/index.ts
new file mode 100644
index 0000000..119f39d
--- /dev/null
+++ b/src/configuration/modules/config/bar/workspaces/index.ts
@@ -0,0 +1,33 @@
+import {
+    ApplicationIcons,
+    WorkspaceIcons,
+    WorkspaceIconsColored,
+} from 'src/components/bar/modules/workspaces/types';
+import { opt } from 'src/lib/options';
+import { ActiveWsIndicator } from 'src/lib/options/types';
+
+export default {
+    show_icons: opt(false),
+    showAllActive: opt(true),
+    ignored: opt(''),
+    show_numbered: opt(false),
+    showWsIcons: opt(false),
+    showApplicationIcons: opt(false),
+    applicationIconOncePerWorkspace: opt(true),
+    applicationIconMap: opt<ApplicationIcons>({}),
+    applicationIconFallback: opt('󰣆'),
+    applicationIconEmptyWorkspace: opt(''),
+    numbered_active_indicator: opt<ActiveWsIndicator>('underline'),
+    icons: {
+        available: opt(''),
+        active: opt(''),
+        occupied: opt(''),
+    },
+    workspaceIconMap: opt<WorkspaceIcons | WorkspaceIconsColored>({}),
+    workspaces: opt(5),
+    spacing: opt(1),
+    monitorSpecific: opt(true),
+    workspaceMask: opt(false),
+    reverse_scroll: opt(false),
+    scroll_speed: opt(5),
+};
diff --git a/src/configuration/modules/config/bar/worldclock/index.ts b/src/configuration/modules/config/bar/worldclock/index.ts
new file mode 100644
index 0000000..3c308d8
--- /dev/null
+++ b/src/configuration/modules/config/bar/worldclock/index.ts
@@ -0,0 +1,15 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    icon: opt('󱉊'),
+    showIcon: opt(true),
+    format: opt('%I:%M:%S %p %Z'),
+    formatDiffDate: opt('%a %b %d  %I:%M:%S %p %Z'),
+    divider: opt('  '),
+    leftClick: opt('menu:calendar'),
+    rightClick: opt(''),
+    middleClick: opt(''),
+    scrollUp: opt(''),
+    scrollDown: opt(''),
+    tz: opt(['America/New_York', 'Europe/Paris', 'Asia/Tokyo']),
+};
diff --git a/src/configuration/modules/config/index.ts b/src/configuration/modules/config/index.ts
new file mode 100644
index 0000000..e6f560d
--- /dev/null
+++ b/src/configuration/modules/config/index.ts
@@ -0,0 +1,24 @@
+import { opt } from 'src/lib/options';
+import { ScalingPriority } from 'src/lib/options/types';
+import bar from './bar';
+import notifications from './notifications';
+import menus from './menus';
+
+export default {
+    scalingPriority: opt<ScalingPriority>('gdk'),
+    terminal: opt('$TERM'),
+    tear: opt(false),
+    wallpaper: {
+        enable: opt(true),
+        image: opt(''),
+        pywal: opt(false),
+    },
+    hyprpanel: {
+        restartAgs: opt(true),
+        restartCommand: opt('hyprpanel -q; hyprpanel'),
+    },
+    dummy: opt(true),
+    bar,
+    menus,
+    notifications,
+};
diff --git a/src/configuration/modules/config/menus/clock/index.ts b/src/configuration/modules/config/menus/clock/index.ts
new file mode 100644
index 0000000..9f7ad78
--- /dev/null
+++ b/src/configuration/modules/config/menus/clock/index.ts
@@ -0,0 +1,16 @@
+import { opt } from 'src/lib/options';
+import { UnitType } from 'src/lib/units/temperature/types';
+
+export default {
+    time: {
+        military: opt(false),
+        hideSeconds: opt(false),
+    },
+    weather: {
+        enabled: opt(true),
+        interval: opt(60000),
+        unit: opt<UnitType>('imperial'),
+        location: opt('Los Angeles'),
+        key: opt<string>(''),
+    },
+};
diff --git a/src/configuration/modules/config/menus/dashboard/index.ts b/src/configuration/modules/config/menus/dashboard/index.ts
new file mode 100644
index 0000000..7c233a1
--- /dev/null
+++ b/src/configuration/modules/config/menus/dashboard/index.ts
@@ -0,0 +1,94 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    powermenu: {
+        confirmation: opt(true),
+        sleep: opt('systemctl suspend'),
+        reboot: opt('systemctl reboot'),
+        logout: opt('hyprctl dispatch exit'),
+        shutdown: opt('systemctl poweroff'),
+        avatar: {
+            image: opt('~/.face.icon'),
+            name: opt<'system' | string>('system'),
+        },
+    },
+    stats: {
+        enabled: opt(true),
+        interval: opt(2000),
+        enable_gpu: opt(false),
+    },
+    recording: {
+        path: opt('$HOME/Videos/Screencasts'),
+    },
+    controls: {
+        enabled: opt(true),
+    },
+    shortcuts: {
+        enabled: opt(true),
+        left: {
+            shortcut1: {
+                icon: opt('󰇩'),
+                tooltip: opt('Microsoft Edge'),
+                command: opt('microsoft-edge-stable'),
+            },
+            shortcut2: {
+                icon: opt(''),
+                tooltip: opt('Spotify'),
+                command: opt('spotify-launcher'),
+            },
+            shortcut3: {
+                icon: opt(''),
+                tooltip: opt('Discord'),
+                command: opt('discord'),
+            },
+            shortcut4: {
+                icon: opt(''),
+                tooltip: opt('Search Apps'),
+                command: opt('rofi -show drun'),
+            },
+        },
+        right: {
+            shortcut1: {
+                icon: opt(''),
+                tooltip: opt('Color Picker'),
+                command: opt('sleep 0.5 && hyprpicker -a'),
+            },
+            shortcut3: {
+                icon: opt('󰄀'),
+                tooltip: opt('Screenshot'),
+                command: opt(`bash -c "${SRC_DIR}/scripts/snapshot.sh"`),
+            },
+        },
+    },
+    directories: {
+        enabled: opt(true),
+        left: {
+            directory1: {
+                label: opt('󰉍 Downloads'),
+                command: opt('bash -c "xdg-open $HOME/Downloads/"'),
+            },
+            directory2: {
+                label: opt('󰉏 Videos'),
+                command: opt('bash -c "xdg-open $HOME/Videos/"'),
+            },
+            directory3: {
+                label: opt('󰚝 Projects'),
+                command: opt('bash -c "xdg-open $HOME/Projects/"'),
+            },
+        },
+        right: {
+            directory1: {
+                label: opt('󱧶 Documents'),
+                command: opt('bash -c "xdg-open $HOME/Documents/"'),
+            },
+            directory2: {
+                label: opt('󰉏 Pictures'),
+                command: opt('bash -c "xdg-open $HOME/Pictures/"'),
+            },
+            directory3: {
+                label: opt('󱂵 Home'),
+                command: opt('bash -c "xdg-open $HOME/"'),
+            },
+        },
+    },
+};
diff --git a/src/configuration/modules/config/menus/index.ts b/src/configuration/modules/config/menus/index.ts
new file mode 100644
index 0000000..04e61ac
--- /dev/null
+++ b/src/configuration/modules/config/menus/index.ts
@@ -0,0 +1,17 @@
+import { opt } from 'src/lib/options';
+import clock from './clock';
+import dashboard from './dashboard';
+import media from './media';
+import power from './power';
+import volume from './volume';
+import { Transition } from './types';
+
+export default {
+    transition: opt<Transition>('crossfade'),
+    transitionTime: opt(200),
+    media,
+    volume,
+    power,
+    dashboard,
+    clock,
+};
diff --git a/src/configuration/modules/config/menus/media/index.ts b/src/configuration/modules/config/menus/media/index.ts
new file mode 100644
index 0000000..6e7ddf7
--- /dev/null
+++ b/src/configuration/modules/config/menus/media/index.ts
@@ -0,0 +1,9 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    hideAuthor: opt(false),
+    hideAlbum: opt(false),
+    displayTime: opt(false),
+    displayTimeTooltip: opt(false),
+    noMediaText: opt('No Media Currently Playing'),
+};
diff --git a/src/configuration/modules/config/menus/power/index.ts b/src/configuration/modules/config/menus/power/index.ts
new file mode 100644
index 0000000..087f8f7
--- /dev/null
+++ b/src/configuration/modules/config/menus/power/index.ts
@@ -0,0 +1,16 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    lowBatteryNotification: opt(false),
+    lowBatteryThreshold: opt(20),
+    lowBatteryNotificationTitle: opt('Warning: Low battery'),
+    lowBatteryNotificationText: opt(
+        'Your battery is running low ($POWER_LEVEL %).\n\nPlease plug in your charger.',
+    ),
+    showLabel: opt(true),
+    confirmation: opt(true),
+    sleep: opt('systemctl suspend'),
+    reboot: opt('systemctl reboot'),
+    logout: opt('hyprctl dispatch exit'),
+    shutdown: opt('systemctl poweroff'),
+};
diff --git a/src/configuration/modules/config/menus/types.ts b/src/configuration/modules/config/menus/types.ts
new file mode 100644
index 0000000..63432d0
--- /dev/null
+++ b/src/configuration/modules/config/menus/types.ts
@@ -0,0 +1 @@
+export type Transition = 'none' | 'crossfade' | 'slide_right' | 'slide_left' | 'slide_up' | 'slide_down';
diff --git a/src/configuration/modules/config/menus/volume/index.ts b/src/configuration/modules/config/menus/volume/index.ts
new file mode 100644
index 0000000..93dc21f
--- /dev/null
+++ b/src/configuration/modules/config/menus/volume/index.ts
@@ -0,0 +1,5 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    raiseMaximumVolume: opt(false),
+};
diff --git a/src/configuration/modules/config/notifications/index.ts b/src/configuration/modules/config/notifications/index.ts
new file mode 100644
index 0000000..8f33805
--- /dev/null
+++ b/src/configuration/modules/config/notifications/index.ts
@@ -0,0 +1,15 @@
+import { opt } from 'src/lib/options';
+import { NotificationAnchor } from 'src/lib/options/types';
+
+export default {
+    position: opt<NotificationAnchor>('top right'),
+    ignore: opt<string[]>([]),
+    displayedTotal: opt(10),
+    monitor: opt(0),
+    active_monitor: opt(true),
+    showActionsOnHover: opt(false),
+    timeout: opt(7000),
+    autoDismiss: opt(false),
+    cache_actions: opt(true),
+    clearDelay: opt(100),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/battery.ts b/src/configuration/modules/theme/bar/buttons/battery.ts
new file mode 100644
index 0000000..cf5990f
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/battery.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.yellow),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.yellow),
+    icon: opt(primaryColors.yellow),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/bluetooth.ts b/src/configuration/modules/theme/bar/buttons/bluetooth.ts
new file mode 100644
index 0000000..7726948
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/bluetooth.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.sky),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.sky),
+    icon: opt(primaryColors.sky),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/cava.ts b/src/configuration/modules/theme/bar/buttons/cava.ts
new file mode 100644
index 0000000..2a28838
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/cava.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.teal),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.teal),
+    icon: opt(primaryColors.teal),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/clock.ts b/src/configuration/modules/theme/bar/buttons/clock.ts
new file mode 100644
index 0000000..2de7e61
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/clock.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.pink),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.pink),
+    icon: opt(primaryColors.pink),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/cpu.ts b/src/configuration/modules/theme/bar/buttons/cpu.ts
new file mode 100644
index 0000000..72c2cce
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/cpu.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.red),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.red),
+    icon: opt(primaryColors.red),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/cpuTemp.ts b/src/configuration/modules/theme/bar/buttons/cpuTemp.ts
new file mode 100644
index 0000000..f838174
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/cpuTemp.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.peach),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.peach),
+    icon: opt(primaryColors.peach),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/dashboard.ts b/src/configuration/modules/theme/bar/buttons/dashboard.ts
new file mode 100644
index 0000000..08c8f24
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/dashboard.ts
@@ -0,0 +1,10 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    background: opt(primaryColors.base2),
+    enableBorder: opt(false),
+    border: opt(primaryColors.yellow),
+    icon: opt(primaryColors.yellow),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/hypridle.ts b/src/configuration/modules/theme/bar/buttons/hypridle.ts
new file mode 100644
index 0000000..c547f40
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/hypridle.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.pink),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.pink),
+    icon: opt(primaryColors.pink),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.45em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/hyprsunset.ts b/src/configuration/modules/theme/bar/buttons/hyprsunset.ts
new file mode 100644
index 0000000..0689427
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/hyprsunset.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.peach),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.peach),
+    icon: opt(primaryColors.peach),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.45em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/index.ts b/src/configuration/modules/theme/bar/buttons/index.ts
new file mode 100644
index 0000000..d7e5b86
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/index.ts
@@ -0,0 +1,81 @@
+import { opt } from 'src/lib/options';
+import { BarButtonStyles } from 'src/lib/options/types';
+import { primaryColors } from '../../colors/primary';
+import dashboard from './dashboard';
+import workspaces from './workspaces';
+import windowtitle from './windowtitle';
+import media from './media';
+import volume from './volume';
+import network from './network';
+import bluetooth from './bluetooth';
+import systray from './systray';
+import battery from './battery';
+import clock from './clock';
+import notifications from './notifications';
+import separator from './separator';
+import worldclock from './worldclock';
+import cava from './cava';
+import hypridle from './hypridle';
+import hyprsunset from './hyprsunset';
+import submap from './submap';
+import power from './power';
+import weather from './weather';
+import updates from './updates';
+import kbLayout from './kbLayout';
+import netstat from './netstat';
+import storage from './storage';
+import cpuTemp from './cpuTemp';
+import cpu from './cpu';
+import ram from './ram';
+import microphone from './microphone';
+
+export default {
+    style: opt<BarButtonStyles>('default'),
+    enableBorders: opt(false),
+    borderSize: opt('0.1em'),
+    borderColor: opt(primaryColors.lavender),
+    monochrome: opt(false),
+    spacing: opt('0.25em'),
+    padding_x: opt('0.7rem'),
+    padding_y: opt('0.2rem'),
+    y_margins: opt('0.4em'),
+    radius: opt('0.3em'),
+    innerRadiusMultiplier: opt('0.4'),
+    opacity: opt(100),
+    background_opacity: opt(100),
+    background_hover_opacity: opt(100),
+    background: opt(primaryColors.base2),
+    icon_background: opt(primaryColors.base2),
+    hover: opt(primaryColors.surface1),
+    text: opt(primaryColors.lavender),
+    icon: opt(primaryColors.lavender),
+    dashboard: dashboard,
+    workspaces: workspaces,
+    windowtitle: windowtitle,
+    media: media,
+    volume: volume,
+    network: network,
+    bluetooth: bluetooth,
+    systray: systray,
+    battery: battery,
+    clock: clock,
+    notifications: notifications,
+    separator: separator,
+    modules: {
+        microphone: microphone,
+        ram: ram,
+        cpu: cpu,
+        cpuTemp: cpuTemp,
+        storage: storage,
+        netstat: netstat,
+        kbLayout: kbLayout,
+        updates: updates,
+        weather: weather,
+        power: power,
+        submap: submap,
+        hyprsunset: hyprsunset,
+        hypridle: hypridle,
+        cava: cava,
+        worldclock: worldclock,
+    },
+};
diff --git a/src/configuration/modules/theme/bar/buttons/kbLayout.ts b/src/configuration/modules/theme/bar/buttons/kbLayout.ts
new file mode 100644
index 0000000..387cd8c
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/kbLayout.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.sky),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.sky),
+    icon: opt(primaryColors.sky),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.45em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/media.ts b/src/configuration/modules/theme/bar/buttons/media.ts
new file mode 100644
index 0000000..a325c5a
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/media.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.lavender),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.lavender),
+    icon: opt(primaryColors.lavender),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/microphone.ts b/src/configuration/modules/theme/bar/buttons/microphone.ts
new file mode 100644
index 0000000..79c93e5
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/microphone.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.green),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.green),
+    icon: opt(primaryColors.green),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.45em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/netstat.ts b/src/configuration/modules/theme/bar/buttons/netstat.ts
new file mode 100644
index 0000000..79c93e5
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/netstat.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.green),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.green),
+    icon: opt(primaryColors.green),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.45em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/network.ts b/src/configuration/modules/theme/bar/buttons/network.ts
new file mode 100644
index 0000000..b44315d
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/network.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.mauve),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.mauve),
+    icon: opt(primaryColors.mauve),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/notifications.ts b/src/configuration/modules/theme/bar/buttons/notifications.ts
new file mode 100644
index 0000000..613b219
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/notifications.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.lavender),
+    background: opt(primaryColors.base2),
+    icon: opt(primaryColors.lavender),
+    icon_background: opt(primaryColors.base2),
+    total: opt(primaryColors.lavender),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/power.ts b/src/configuration/modules/theme/bar/buttons/power.ts
new file mode 100644
index 0000000..7afd936
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/power.ts
@@ -0,0 +1,11 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.red),
+    background: opt(primaryColors.base2),
+    icon: opt(primaryColors.red),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.45em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/ram.ts b/src/configuration/modules/theme/bar/buttons/ram.ts
new file mode 100644
index 0000000..f527040
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/ram.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.yellow),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.yellow),
+    icon: opt(primaryColors.yellow),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.45em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/separator.ts b/src/configuration/modules/theme/bar/buttons/separator.ts
new file mode 100644
index 0000000..98bf1aa
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/separator.ts
@@ -0,0 +1,8 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    color: opt(primaryColors.surface2),
+    margins: opt('0.15em'),
+    width: opt('0.1em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/storage.ts b/src/configuration/modules/theme/bar/buttons/storage.ts
new file mode 100644
index 0000000..c547f40
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/storage.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.pink),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.pink),
+    icon: opt(primaryColors.pink),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.45em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/submap.ts b/src/configuration/modules/theme/bar/buttons/submap.ts
new file mode 100644
index 0000000..644d937
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/submap.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.teal),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.teal),
+    icon: opt(primaryColors.teal),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.45em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/systray.ts b/src/configuration/modules/theme/bar/buttons/systray.ts
new file mode 100644
index 0000000..856815a
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/systray.ts
@@ -0,0 +1,10 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    customIcon: opt(primaryColors.text),
+    border: opt(primaryColors.lavender),
+    background: opt(primaryColors.base2),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/updates.ts b/src/configuration/modules/theme/bar/buttons/updates.ts
new file mode 100644
index 0000000..1785248
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/updates.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.mauve),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.mauve),
+    icon: opt(primaryColors.mauve),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.45em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/volume.ts b/src/configuration/modules/theme/bar/buttons/volume.ts
new file mode 100644
index 0000000..d183c1b
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/volume.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.maroon),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.maroon),
+    icon: opt(primaryColors.maroon),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/weather.ts b/src/configuration/modules/theme/bar/buttons/weather.ts
new file mode 100644
index 0000000..d769af7
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/weather.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.lavender),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.lavender),
+    icon: opt(primaryColors.lavender),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.45em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/windowtitle.ts b/src/configuration/modules/theme/bar/buttons/windowtitle.ts
new file mode 100644
index 0000000..10b62c7
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/windowtitle.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    background: opt(primaryColors.base2),
+    enableBorder: opt(false),
+    border: opt(primaryColors.pink),
+    text: opt(primaryColors.pink),
+    icon: opt(primaryColors.pink),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/buttons/workspaces.ts b/src/configuration/modules/theme/bar/buttons/workspaces.ts
new file mode 100644
index 0000000..63e9f85
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/workspaces.ts
@@ -0,0 +1,26 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    background: opt(primaryColors.base2),
+    enableBorder: opt(false),
+    smartHighlight: opt(true),
+    border: opt(primaryColors.pink),
+    available: opt(primaryColors.sky),
+    occupied: opt(primaryColors.flamingo),
+    active: opt(primaryColors.pink),
+    hover: opt(primaryColors.pink),
+    numbered_active_highlight_border: opt('0.2em'),
+    numbered_active_highlight_padding: opt('0.2em'),
+    numbered_inactive_padding: opt('0.2em'),
+    numbered_active_highlighted_text_color: opt(primaryColors.mantle),
+    numbered_active_underline_color: opt(primaryColors.pink),
+    spacing: opt('0.5em'),
+    fontSize: opt('1.2em'),
+    pill: {
+        radius: opt('1.9rem * 0.6'),
+        height: opt('4em'),
+        width: opt('4em'),
+        active_width: opt('12em'),
+    },
+};
diff --git a/src/configuration/modules/theme/bar/buttons/worldclock.ts b/src/configuration/modules/theme/bar/buttons/worldclock.ts
new file mode 100644
index 0000000..cf5990f
--- /dev/null
+++ b/src/configuration/modules/theme/bar/buttons/worldclock.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+
+export default {
+    enableBorder: opt(false),
+    border: opt(primaryColors.yellow),
+    background: opt(primaryColors.base2),
+    text: opt(primaryColors.yellow),
+    icon: opt(primaryColors.yellow),
+    icon_background: opt(primaryColors.base2),
+    spacing: opt('0.5em'),
+};
diff --git a/src/configuration/modules/theme/bar/index.ts b/src/configuration/modules/theme/bar/index.ts
new file mode 100644
index 0000000..3f6cb72
--- /dev/null
+++ b/src/configuration/modules/theme/bar/index.ts
@@ -0,0 +1,32 @@
+import { opt } from 'src/lib/options';
+import { BarLocation, WindowLayer, BorderLocation } from 'src/lib/options/types';
+import buttons from './buttons';
+import menus from './menus';
+import { primaryColors } from '../colors/primary';
+
+export default {
+    scaling: opt(100),
+    floating: opt(false),
+    location: opt<BarLocation>('top'),
+    layer: opt<WindowLayer>('top'),
+    margin_top: opt('0.5em'),
+    opacity: opt(100),
+    enableShadow: opt(false),
+    shadow: opt('0px 1px 2px 1px #16161e'),
+    shadowMargins: opt('0px 0px 4px 0px'),
+    margin_bottom: opt('0em'),
+    margin_sides: opt('0.5em'),
+    border_radius: opt('0.4em'),
+    outer_spacing: opt('1.6em'),
+    label_spacing: opt('0.5em'),
+    transparent: opt(false),
+    dropdownGap: opt('2.9em'),
+    background: opt(primaryColors.crust),
+    border: {
+        location: opt<BorderLocation>('none'),
+        width: opt('0.15em'),
+        color: opt(primaryColors.lavender),
+    },
+    buttons: buttons,
+    menus,
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/border.ts b/src/configuration/modules/theme/bar/menus/components/border.ts
new file mode 100644
index 0000000..71d924b
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/border.ts
@@ -0,0 +1,8 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+
+export default {
+    size: opt('0.13em'),
+    radius: opt('0.7em'),
+    color: opt(primaryColors.surface0),
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/buttons.ts b/src/configuration/modules/theme/bar/menus/components/buttons.ts
new file mode 100644
index 0000000..2503eb2
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/buttons.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    default: opt(primaryColors.lavender),
+    active: opt(secondaryColors.pink),
+    disabled: opt(tertiaryColors.surface2),
+    text: opt(secondaryColors.mantle),
+    radius: opt('0.4em'),
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/checkRadioButton.ts b/src/configuration/modules/theme/bar/menus/components/checkRadioButton.ts
new file mode 100644
index 0000000..0e703f2
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/checkRadioButton.ts
@@ -0,0 +1,8 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    background: opt(primaryColors.surface1),
+    active: opt(tertiaryColors.lavender),
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/dropdownmenu.ts b/src/configuration/modules/theme/bar/menus/components/dropdownmenu.ts
new file mode 100644
index 0000000..5be99f6
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/dropdownmenu.ts
@@ -0,0 +1,8 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+
+export default {
+    background: opt(primaryColors.crust),
+    text: opt(primaryColors.text),
+    divider: opt(primaryColors.base),
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/iconbuttons.ts b/src/configuration/modules/theme/bar/menus/components/iconbuttons.ts
new file mode 100644
index 0000000..4804b41
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/iconbuttons.ts
@@ -0,0 +1,8 @@
+import { opt } from 'src/lib/options';
+import { secondaryColors } from '../../../colors/secondary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    passive: opt(secondaryColors.text),
+    active: opt(tertiaryColors.lavender),
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/icons.ts b/src/configuration/modules/theme/bar/menus/components/icons.ts
new file mode 100644
index 0000000..a35493c
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/icons.ts
@@ -0,0 +1,7 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+
+export default {
+    passive: opt(primaryColors.surface2),
+    active: opt(primaryColors.lavender),
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/index.ts b/src/configuration/modules/theme/bar/menus/components/index.ts
new file mode 100644
index 0000000..7d08edd
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/index.ts
@@ -0,0 +1,29 @@
+import border from './border';
+import buttons from './buttons';
+import checkRadioButton from './checkRadioButton';
+import dropdownmenu from './dropdownmenu';
+import iconbuttons from './iconbuttons';
+import icons from './icons';
+import listitems from './listitems';
+import popover from './popover';
+import progressbar from './progressbar';
+import scroller from './scroller';
+import slider from './slider';
+import switchSettings from './switch';
+import tooltip from './tooltip';
+
+export default {
+    border,
+    popover,
+    listitems,
+    icons,
+    switch: switchSettings,
+    check_radio_button: checkRadioButton,
+    buttons,
+    iconbuttons,
+    progressbar,
+    slider,
+    scroller,
+    dropdownmenu,
+    tooltip,
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/listitems.ts b/src/configuration/modules/theme/bar/menus/components/listitems.ts
new file mode 100644
index 0000000..6296be9
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/listitems.ts
@@ -0,0 +1,8 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+
+export default {
+    passive: opt(primaryColors.text),
+    active: opt(secondaryColors.lavender),
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/popover.ts b/src/configuration/modules/theme/bar/menus/components/popover.ts
new file mode 100644
index 0000000..ac949d3
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/popover.ts
@@ -0,0 +1,11 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+
+export default {
+    scaling: opt(100),
+    radius: opt('0.4em'),
+    text: opt(primaryColors.lavender),
+    background: opt(secondaryColors.mantle),
+    border: opt(secondaryColors.mantle),
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/progressbar.ts b/src/configuration/modules/theme/bar/menus/components/progressbar.ts
new file mode 100644
index 0000000..1d4d5d6
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/progressbar.ts
@@ -0,0 +1,8 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+
+export default {
+    foreground: opt(primaryColors.lavender),
+    background: opt(primaryColors.surface1),
+    radius: opt('0.3rem'),
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/scroller.ts b/src/configuration/modules/theme/bar/menus/components/scroller.ts
new file mode 100644
index 0000000..f1cd11a
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/scroller.ts
@@ -0,0 +1,6 @@
+import { opt } from 'src/lib/options';
+
+export default {
+    radius: opt('0.7em'),
+    width: opt('0.25em'),
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/slider.ts b/src/configuration/modules/theme/bar/menus/components/slider.ts
new file mode 100644
index 0000000..8ad0a23
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/slider.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    primary: opt(primaryColors.lavender),
+    background: opt(tertiaryColors.surface2),
+    backgroundhover: opt(primaryColors.surface1),
+    puck: opt(primaryColors.overlay0),
+    slider_radius: opt('0.3rem'),
+    progress_radius: opt('0.3rem'),
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/switch.ts b/src/configuration/modules/theme/bar/menus/components/switch.ts
new file mode 100644
index 0000000..3bc3690
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/switch.ts
@@ -0,0 +1,12 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    enabled: opt(primaryColors.lavender),
+    disabled: opt(tertiaryColors.surface0),
+    puck: opt(secondaryColors.surface1),
+    radius: opt('0.2em'),
+    slider_radius: opt('0.2em'),
+};
diff --git a/src/configuration/modules/theme/bar/menus/components/tooltip.ts b/src/configuration/modules/theme/bar/menus/components/tooltip.ts
new file mode 100644
index 0000000..aef5961
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/components/tooltip.ts
@@ -0,0 +1,9 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    radius: opt('0.3em'),
+    background: opt(primaryColors.crust),
+    text: opt(tertiaryColors.lavender),
+};
diff --git a/src/configuration/modules/theme/bar/menus/index.ts b/src/configuration/modules/theme/bar/menus/index.ts
new file mode 100644
index 0000000..d8172f9
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/index.ts
@@ -0,0 +1,41 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../colors/primary';
+import components from './components';
+import media from './modules/media';
+import volume from './modules/volume';
+import network from './modules/network';
+import bluetooth from './modules/bluetooth';
+import systray from './modules/systray';
+import battery from './modules/battery';
+import clock from './modules/clock';
+import dashboard from './modules/dashboard';
+import power from './modules/power';
+import notifications from './modules/notifications';
+
+export default {
+    monochrome: opt(false),
+    background: opt(primaryColors.crust),
+    opacity: opt(100),
+    cards: opt(primaryColors.base),
+    card_radius: opt('0.4em'),
+    enableShadow: opt(false),
+    shadow: opt('0px 0px 3px 1px #16161e'),
+    shadowMargins: opt('5px 5px'),
+    text: opt(primaryColors.text),
+    dimtext: opt(primaryColors.surface2),
+    feinttext: opt(primaryColors.surface0),
+    label: opt(primaryColors.lavender),
+    ...components,
+    menu: {
+        media,
+        volume,
+        network,
+        bluetooth,
+        systray,
+        battery,
+        clock,
+        dashboard,
+        power,
+        notifications,
+    },
+};
diff --git a/src/configuration/modules/theme/bar/menus/modules/battery.ts b/src/configuration/modules/theme/bar/menus/modules/battery.ts
new file mode 100644
index 0000000..53c3e39
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/modules/battery.ts
@@ -0,0 +1,35 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    scaling: opt(100),
+    card: {
+        color: opt(primaryColors.base),
+    },
+    background: {
+        color: opt(primaryColors.crust),
+    },
+    border: {
+        color: opt(primaryColors.surface0),
+    },
+    label: {
+        color: opt(primaryColors.yellow),
+    },
+    text: opt(primaryColors.text),
+    listitems: {
+        passive: opt(secondaryColors.text),
+        active: opt(primaryColors.yellow),
+    },
+    icons: {
+        passive: opt(primaryColors.overlay2),
+        active: opt(primaryColors.yellow),
+    },
+    slider: {
+        primary: opt(primaryColors.yellow),
+        background: opt(tertiaryColors.surface2),
+        backgroundhover: opt(primaryColors.surface1),
+        puck: opt(primaryColors.overlay0),
+    },
+};
diff --git a/src/configuration/modules/theme/bar/menus/modules/bluetooth.ts b/src/configuration/modules/theme/bar/menus/modules/bluetooth.ts
new file mode 100644
index 0000000..53318b7
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/modules/bluetooth.ts
@@ -0,0 +1,43 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    scaling: opt(100),
+    card: {
+        color: opt(primaryColors.base),
+    },
+    background: {
+        color: opt(primaryColors.crust),
+    },
+    border: {
+        color: opt(primaryColors.surface0),
+    },
+    label: {
+        color: opt(primaryColors.sky),
+    },
+    scroller: {
+        color: opt(primaryColors.sky),
+    },
+    text: opt(primaryColors.text),
+    status: opt(primaryColors.overlay0),
+    switch_divider: opt(primaryColors.surface1),
+    switch: {
+        enabled: opt(primaryColors.sky),
+        disabled: opt(tertiaryColors.surface0),
+        puck: opt(secondaryColors.surface1),
+    },
+    listitems: {
+        passive: opt(primaryColors.text),
+        active: opt(secondaryColors.sky),
+    },
+    icons: {
+        passive: opt(primaryColors.overlay2),
+        active: opt(primaryColors.sky),
+    },
+    iconbutton: {
+        passive: opt(primaryColors.text),
+        active: opt(primaryColors.sky),
+    },
+};
diff --git a/src/configuration/modules/theme/bar/menus/modules/clock.ts b/src/configuration/modules/theme/bar/menus/modules/clock.ts
new file mode 100644
index 0000000..62989a8
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/modules/clock.ts
@@ -0,0 +1,47 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+
+export default {
+    scaling: opt(100),
+    card: {
+        color: opt(primaryColors.base),
+    },
+    background: {
+        color: opt(primaryColors.crust),
+    },
+    border: {
+        color: opt(primaryColors.surface0),
+    },
+    text: opt(primaryColors.text),
+    time: {
+        time: opt(primaryColors.pink),
+        timeperiod: opt(primaryColors.teal),
+    },
+    calendar: {
+        yearmonth: opt(primaryColors.teal),
+        weekdays: opt(primaryColors.pink),
+        paginator: opt(secondaryColors.pink),
+        currentday: opt(primaryColors.pink),
+        days: opt(primaryColors.text),
+        contextdays: opt(primaryColors.surface2),
+    },
+    weather: {
+        icon: opt(primaryColors.pink),
+        temperature: opt(primaryColors.text),
+        status: opt(primaryColors.teal),
+        stats: opt(primaryColors.pink),
+        thermometer: {
+            extremelyhot: opt(primaryColors.red),
+            hot: opt(primaryColors.peach),
+            moderate: opt(primaryColors.lavender),
+            cold: opt(primaryColors.blue),
+            extremelycold: opt(primaryColors.sky),
+        },
+        hourly: {
+            time: opt(primaryColors.pink),
+            icon: opt(primaryColors.pink),
+            temperature: opt(primaryColors.pink),
+        },
+    },
+};
diff --git a/src/configuration/modules/theme/bar/menus/modules/dashboard.ts b/src/configuration/modules/theme/bar/menus/modules/dashboard.ts
new file mode 100644
index 0000000..a0c40bc
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/modules/dashboard.ts
@@ -0,0 +1,114 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    scaling: opt(100),
+    confirmation_scaling: opt(100),
+    card: {
+        color: opt(primaryColors.base),
+    },
+    background: {
+        color: opt(primaryColors.crust),
+    },
+    border: {
+        color: opt(primaryColors.surface0),
+    },
+    profile: {
+        name: opt(primaryColors.pink),
+        size: opt('8.5em'),
+        radius: opt('0.4em'),
+    },
+    powermenu: {
+        shutdown: opt(primaryColors.red),
+        restart: opt(primaryColors.peach),
+        logout: opt(primaryColors.green),
+        sleep: opt(primaryColors.sky),
+        confirmation: {
+            card: opt(primaryColors.base),
+            background: opt(primaryColors.crust),
+            border: opt(primaryColors.surface0),
+            label: opt(primaryColors.lavender),
+            body: opt(primaryColors.text),
+            confirm: opt(primaryColors.green),
+            deny: opt(primaryColors.red),
+            button_text: opt(secondaryColors.crust),
+        },
+    },
+    shortcuts: {
+        background: opt(primaryColors.lavender),
+        text: opt(secondaryColors.mantle),
+        recording: opt(primaryColors.green),
+    },
+    controls: {
+        disabled: opt(primaryColors.surface2),
+        wifi: {
+            background: opt(primaryColors.mauve),
+            text: opt(secondaryColors.mantle),
+        },
+        bluetooth: {
+            background: opt(primaryColors.sky),
+            text: opt(secondaryColors.mantle),
+        },
+        notifications: {
+            background: opt(primaryColors.yellow),
+            text: opt(secondaryColors.mantle),
+        },
+        volume: {
+            background: opt(primaryColors.maroon),
+            text: opt(secondaryColors.mantle),
+        },
+        input: {
+            background: opt(primaryColors.pink),
+            text: opt(secondaryColors.mantle),
+        },
+    },
+    directories: {
+        left: {
+            top: {
+                color: opt(primaryColors.pink),
+            },
+            middle: {
+                color: opt(primaryColors.yellow),
+            },
+            bottom: {
+                color: opt(primaryColors.maroon),
+            },
+        },
+        right: {
+            top: {
+                color: opt(primaryColors.teal),
+            },
+            middle: {
+                color: opt(primaryColors.mauve),
+            },
+            bottom: {
+                color: opt(primaryColors.lavender),
+            },
+        },
+    },
+    monitors: {
+        bar_background: opt(primaryColors.surface1),
+        cpu: {
+            icon: opt(primaryColors.maroon),
+            bar: opt(tertiaryColors.maroon),
+            label: opt(primaryColors.maroon),
+        },
+        ram: {
+            icon: opt(primaryColors.yellow),
+            bar: opt(tertiaryColors.yellow),
+            label: opt(primaryColors.yellow),
+        },
+        gpu: {
+            icon: opt(primaryColors.green),
+            bar: opt(tertiaryColors.green),
+            label: opt(primaryColors.green),
+        },
+        disk: {
+            icon: opt(primaryColors.pink),
+            bar: opt(tertiaryColors.pink),
+            label: opt(primaryColors.pink),
+        },
+    },
+};
diff --git a/src/configuration/modules/theme/bar/menus/modules/media.ts b/src/configuration/modules/theme/bar/menus/modules/media.ts
new file mode 100644
index 0000000..0ac0b15
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/modules/media.ts
@@ -0,0 +1,34 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    scaling: opt(100),
+    song: opt(tertiaryColors.lavender),
+    artist: opt(tertiaryColors.teal),
+    album: opt(tertiaryColors.pink),
+    timestamp: opt(primaryColors.text),
+    background: {
+        color: opt(primaryColors.crust),
+    },
+    card: {
+        color: opt(primaryColors.base),
+        tint: opt(85),
+    },
+    border: {
+        color: opt(primaryColors.surface0),
+    },
+    buttons: {
+        inactive: opt(primaryColors.surface2),
+        enabled: opt(secondaryColors.teal),
+        background: opt(tertiaryColors.lavender),
+        text: opt(primaryColors.crust),
+    },
+    slider: {
+        primary: opt(primaryColors.pink),
+        background: opt(tertiaryColors.surface2),
+        backgroundhover: opt(primaryColors.surface1),
+        puck: opt(primaryColors.overlay0),
+    },
+};
diff --git a/src/configuration/modules/theme/bar/menus/modules/network.ts b/src/configuration/modules/theme/bar/menus/modules/network.ts
new file mode 100644
index 0000000..73eae63
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/modules/network.ts
@@ -0,0 +1,44 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    scaling: opt(100),
+    card: {
+        color: opt(primaryColors.base),
+    },
+    background: {
+        color: opt(primaryColors.crust),
+    },
+    border: {
+        color: opt(primaryColors.surface0),
+    },
+    label: {
+        color: opt(primaryColors.mauve),
+    },
+    scroller: {
+        color: opt(primaryColors.mauve),
+    },
+    text: opt(primaryColors.text),
+    status: {
+        color: opt(primaryColors.overlay0),
+    },
+    listitems: {
+        passive: opt(primaryColors.text),
+        active: opt(secondaryColors.mauve),
+    },
+    icons: {
+        passive: opt(primaryColors.overlay2),
+        active: opt(primaryColors.mauve),
+    },
+    iconbuttons: {
+        passive: opt(primaryColors.text),
+        active: opt(primaryColors.mauve),
+    },
+    switch: {
+        enabled: opt(primaryColors.mauve),
+        disabled: opt(tertiaryColors.surface0),
+        puck: opt(secondaryColors.surface1),
+    },
+};
diff --git a/src/configuration/modules/theme/bar/menus/modules/notifications.ts b/src/configuration/modules/theme/bar/menus/modules/notifications.ts
new file mode 100644
index 0000000..4124022
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/modules/notifications.ts
@@ -0,0 +1,32 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    scaling: opt(100),
+    height: opt('58em'),
+    label: opt(primaryColors.lavender),
+    no_notifications_label: opt(primaryColors.surface0),
+    background: opt(primaryColors.crust),
+    card: opt(primaryColors.base),
+    border: opt(primaryColors.surface0),
+    switch_divider: opt(primaryColors.surface1),
+    clear: opt(primaryColors.red),
+    switch: {
+        enabled: opt(primaryColors.lavender),
+        disabled: opt(tertiaryColors.surface0),
+        puck: opt(secondaryColors.surface1),
+    },
+    pager: {
+        show: opt(true),
+        background: opt(primaryColors.crust),
+        button: opt(primaryColors.lavender),
+        label: opt(primaryColors.overlay2),
+    },
+    scrollbar: {
+        color: opt(primaryColors.lavender),
+        width: opt('0.35em'),
+        radius: opt('0.2em'),
+    },
+};
diff --git a/src/configuration/modules/theme/bar/menus/modules/power.ts b/src/configuration/modules/theme/bar/menus/modules/power.ts
new file mode 100644
index 0000000..c236270
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/modules/power.ts
@@ -0,0 +1,40 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+
+export default {
+    scaling: opt(90),
+    radius: opt('0.4em'),
+    background: {
+        color: opt(primaryColors.crust),
+    },
+    border: {
+        color: opt(primaryColors.surface0),
+    },
+    buttons: {
+        shutdown: {
+            background: opt(primaryColors.base),
+            icon_background: opt(secondaryColors.red),
+            text: opt(primaryColors.red),
+            icon: opt(secondaryColors.mantle),
+        },
+        restart: {
+            background: opt(primaryColors.base),
+            icon_background: opt(secondaryColors.peach),
+            text: opt(primaryColors.peach),
+            icon: opt(secondaryColors.mantle),
+        },
+        logout: {
+            background: opt(primaryColors.base),
+            icon_background: opt(secondaryColors.green),
+            text: opt(primaryColors.green),
+            icon: opt(secondaryColors.mantle),
+        },
+        sleep: {
+            background: opt(primaryColors.base),
+            icon_background: opt(secondaryColors.sky),
+            text: opt(primaryColors.sky),
+            icon: opt(secondaryColors.mantle),
+        },
+    },
+};
diff --git a/src/configuration/modules/theme/bar/menus/modules/systray.ts b/src/configuration/modules/theme/bar/menus/modules/systray.ts
new file mode 100644
index 0000000..f3c672c
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/modules/systray.ts
@@ -0,0 +1,10 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+
+export default {
+    dropdownmenu: {
+        background: opt(primaryColors.crust),
+        text: opt(primaryColors.text),
+        divider: opt(primaryColors.base),
+    },
+};
diff --git a/src/configuration/modules/theme/bar/menus/modules/volume.ts b/src/configuration/modules/theme/bar/menus/modules/volume.ts
new file mode 100644
index 0000000..92719e9
--- /dev/null
+++ b/src/configuration/modules/theme/bar/menus/modules/volume.ts
@@ -0,0 +1,48 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../../../colors/primary';
+import { secondaryColors } from '../../../colors/secondary';
+import { tertiaryColors } from '../../../colors/tertiary';
+
+export default {
+    scaling: opt(100),
+    card: {
+        color: opt(primaryColors.base),
+    },
+    background: {
+        color: opt(primaryColors.crust),
+    },
+    border: {
+        color: opt(primaryColors.surface0),
+    },
+    label: {
+        color: opt(primaryColors.maroon),
+    },
+    text: opt(primaryColors.text),
+    scroller: {
+        color: opt(primaryColors.maroon),
+    },
+    listitems: {
+        passive: opt(primaryColors.text),
+        active: opt(secondaryColors.maroon),
+    },
+    iconbutton: {
+        passive: opt(primaryColors.text),
+        active: opt(primaryColors.maroon),
+    },
+    icons: {
+        passive: opt(primaryColors.overlay2),
+        active: opt(primaryColors.maroon),
+    },
+    audio_slider: {
+        primary: opt(primaryColors.maroon),
+        background: opt(tertiaryColors.surface2),
+        backgroundhover: opt(primaryColors.surface1),
+        puck: opt(primaryColors.surface2),
+    },
+    input_slider: {
+        primary: opt(primaryColors.maroon),
+        background: opt(tertiaryColors.surface2),
+        backgroundhover: opt(primaryColors.surface1),
+        puck: opt(primaryColors.surface2),
+    },
+};
diff --git a/src/configuration/modules/theme/colors/primary.ts b/src/configuration/modules/theme/colors/primary.ts
new file mode 100644
index 0000000..5d39e93
--- /dev/null
+++ b/src/configuration/modules/theme/colors/primary.ts
@@ -0,0 +1,29 @@
+export const primaryColors = {
+    rosewater: '#f5e0dc',
+    flamingo: '#f2cdcd',
+    pink: '#f5c2e7',
+    mauve: '#cba6f7',
+    red: '#f38ba8',
+    maroon: '#eba0ac',
+    peach: '#fab387',
+    yellow: '#f9e2af',
+    green: '#a6e3a1',
+    teal: '#94e2d5',
+    sky: '#89dceb',
+    sapphire: '#74c7ec',
+    blue: '#89b4fa',
+    lavender: '#b4befe',
+    text: '#cdd6f4',
+    subtext1: '#bac2de',
+    subtext2: '#a6adc8',
+    overlay2: '#9399b2',
+    overlay1: '#7f849c',
+    overlay0: '#6c7086',
+    surface2: '#585b70',
+    surface1: '#45475a',
+    surface0: '#313244',
+    base2: '#242438',
+    base: '#1e1e2e',
+    mantle: '#181825',
+    crust: '#11111b',
+};
diff --git a/src/configuration/modules/theme/colors/secondary.ts b/src/configuration/modules/theme/colors/secondary.ts
new file mode 100644
index 0000000..9f469a5
--- /dev/null
+++ b/src/configuration/modules/theme/colors/secondary.ts
@@ -0,0 +1,19 @@
+export const secondaryColors = {
+    text: '#cdd6f3',
+    pink: '#f5c2e6',
+    red: '#f38ba7',
+    peach: '#fab386',
+    mantle: '#181824',
+    surface1: '#454759',
+    surface0: '#313243',
+    overlay1: '#7f849b',
+    lavender: '#b4befd',
+    mauve: '#cba6f6',
+    green: '#a6e3a0',
+    sky: '#89dcea',
+    teal: '#94e2d4',
+    yellow: '#f9e2ad',
+    maroon: '#eba0ab',
+    crust: '#11111a',
+    surface2: '#585b69',
+};
diff --git a/src/configuration/modules/theme/colors/tertiary.ts b/src/configuration/modules/theme/colors/tertiary.ts
new file mode 100644
index 0000000..054b334
--- /dev/null
+++ b/src/configuration/modules/theme/colors/tertiary.ts
@@ -0,0 +1,16 @@
+export const tertiaryColors = {
+    pink: '#f5c2e8',
+    red: '#f38ba9',
+    mantle: '#181826',
+    surface0: '#313245',
+    overlay1: '#7f849d',
+    lavender: '#b4beff',
+    mauve: '#cba6f8',
+    green: '#a6e3a2',
+    sky: '#89dcec',
+    teal: '#94e2d6',
+    yellow: '#f9e2ae',
+    maroon: '#eba0ad',
+    crust: '#11111c',
+    surface2: '#585b71',
+};
diff --git a/src/configuration/modules/theme/general/index.ts b/src/configuration/modules/theme/general/index.ts
new file mode 100644
index 0000000..170d4fa
--- /dev/null
+++ b/src/configuration/modules/theme/general/index.ts
@@ -0,0 +1,23 @@
+import { FontStyle } from 'src/components/settings/shared/inputs/font/utils';
+import { opt } from 'src/lib/options';
+import { MatugenTheme, MatugenScheme, MatugenVariations } from 'src/lib/options/types';
+
+export default {
+    tooltip: {
+        scaling: opt(100),
+    },
+    matugen: opt(false),
+    matugen_settings: {
+        mode: opt<MatugenTheme>('dark'),
+        scheme_type: opt<MatugenScheme>('tonal-spot'),
+        variation: opt<MatugenVariations>('standard_1'),
+        contrast: opt(0.0),
+    },
+    font: {
+        size: opt('1.2rem'),
+        name: opt('Ubuntu Nerd Font'),
+        style: opt<FontStyle>('normal'),
+        label: opt('Ubuntu Nerd Font'),
+        weight: opt(600),
+    },
+};
diff --git a/src/configuration/modules/theme/index.ts b/src/configuration/modules/theme/index.ts
new file mode 100644
index 0000000..360ecd6
--- /dev/null
+++ b/src/configuration/modules/theme/index.ts
@@ -0,0 +1,11 @@
+import bar from './bar';
+import general from './general';
+import notification from './notification';
+import osd from './osd';
+
+export default {
+    ...general,
+    notification,
+    osd,
+    bar,
+};
diff --git a/src/configuration/modules/theme/notification/index.ts b/src/configuration/modules/theme/notification/index.ts
new file mode 100644
index 0000000..196442b
--- /dev/null
+++ b/src/configuration/modules/theme/notification/index.ts
@@ -0,0 +1,27 @@
+import { opt } from 'src/lib/options';
+import { primaryColors } from '../colors/primary';
+import { secondaryColors } from '../colors/secondary';
+import { tertiaryColors } from '../colors/tertiary';
+
+export default {
+    scaling: opt(100),
+    background: opt(tertiaryColors.mantle),
+    opacity: opt(100),
+    actions: {
+        background: opt(secondaryColors.lavender),
+        text: opt(primaryColors.mantle),
+    },
+    label: opt(primaryColors.lavender),
+    border: opt(secondaryColors.surface0),
+    border_radius: opt('0.6em'),
+    enableShadow: opt(false),
+    shadow: opt('0px 1px 2px 1px #16161e'),
+    shadowMargins: opt('4px 4px'),
+    time: opt(secondaryColors.overlay1),
+    text: opt(primaryColors.text),
+    labelicon: opt(primaryColors.lavender),
+    close_button: {
+        background: opt(secondaryColors.red),
+        label: opt(primaryColors.crust),
+    },
+};
diff --git a/src/configuration/modules/theme/osd/index.ts b/src/configuration/modules/theme/osd/index.ts
new file mode 100644
index 0000000..971ac8d
--- /dev/null
+++ b/src/configuration/modules/theme/osd/index.ts
@@ -0,0 +1,32 @@
+import { opt } from 'src/lib/options';
+import { OSDOrientation, OSDAnchor } from 'src/lib/options/types';
+import { primaryColors } from '../colors/primary';
+import { secondaryColors } from '../colors/secondary';
+import { tertiaryColors } from '../colors/tertiary';
+
+export default {
+    scaling: opt(100),
+    duration: opt(2500),
+    enable: opt(true),
+    orientation: opt<OSDOrientation>('vertical'),
+    opacity: opt(100),
+    border: {
+        size: opt('0em'),
+        color: opt(primaryColors.lavender),
+    },
+    bar_container: opt(primaryColors.crust),
+    icon_container: opt(tertiaryColors.lavender),
+    bar_color: opt(tertiaryColors.lavender),
+    bar_empty_color: opt(primaryColors.surface0),
+    bar_overflow_color: opt(secondaryColors.red),
+    icon: opt(primaryColors.crust),
+    label: opt(tertiaryColors.lavender),
+    monitor: opt(0),
+    active_monitor: opt(true),
+    radius: opt('0.4em'),
+    margins: opt('7px 7px 7px 7px'),
+    enableShadow: opt(false),
+    shadow: opt('0px 0px 3px 2px #16161e'),
+    location: opt<OSDAnchor>('right'),
+    muted_zero: opt(false),
+};
diff --git a/src/core/behaviors/bar/clock.ts b/src/core/behaviors/bar/clock.ts
new file mode 100644
index 0000000..25afc75
--- /dev/null
+++ b/src/core/behaviors/bar/clock.ts
@@ -0,0 +1,15 @@
+import options from 'src/configuration';
+
+const { showIcon, showTime } = options.bar.clock;
+
+showIcon.subscribe(() => {
+    if (!showTime.get() && !showIcon.get()) {
+        showTime.set(true);
+    }
+});
+
+showTime.subscribe(() => {
+    if (!showTime.get() && !showIcon.get()) {
+        showIcon.set(true);
+    }
+});
diff --git a/src/core/behaviors/bar/index.ts b/src/core/behaviors/bar/index.ts
new file mode 100644
index 0000000..86aa13f
--- /dev/null
+++ b/src/core/behaviors/bar/index.ts
@@ -0,0 +1,2 @@
+export * from './clock';
+export * from './windowTitle';
diff --git a/src/core/behaviors/bar/windowTitle.ts b/src/core/behaviors/bar/windowTitle.ts
new file mode 100644
index 0000000..1ebf7b0
--- /dev/null
+++ b/src/core/behaviors/bar/windowTitle.ts
@@ -0,0 +1,15 @@
+import options from 'src/configuration';
+
+const { label, icon } = options.bar.windowtitle;
+
+label.subscribe(() => {
+    if (!label.get() && !icon.get()) {
+        icon.set(true);
+    }
+});
+
+icon.subscribe(() => {
+    if (!label.get() && !icon.get()) {
+        label.set(true);
+    }
+});
diff --git a/src/lib/behaviors/batteryWarning.ts b/src/core/behaviors/batteryWarning.ts
similarity index 90%
rename from src/lib/behaviors/batteryWarning.ts
rename to src/core/behaviors/batteryWarning.ts
index c48130f..7ad5e4e 100644
--- a/src/lib/behaviors/batteryWarning.ts
+++ b/src/core/behaviors/batteryWarning.ts
@@ -1,7 +1,7 @@
 import AstalBattery from 'gi://AstalBattery?version=0.1';
-import icons from '../icons/icons';
-import { Notify } from '../utils';
-import options from 'src/options';
+import icons from 'src/lib/icons/icons';
+import options from 'src/configuration';
+import { SystemUtilities } from '../system/SystemUtilities';
 
 const batteryService = AstalBattery.get_default();
 const {
@@ -44,7 +44,7 @@ export function warnOnLowBattery(): void {
         }
 
         if (sendNotification) {
-            Notify({
+            SystemUtilities.notify({
                 summary: lowBatteryNotificationTitle
                     .get()
                     .replaceAll('$POWER_LEVEL', batteryPercentage.toString()),
diff --git a/src/lib/behaviors/hyprlandRules.ts b/src/core/behaviors/hyprlandRules.ts
similarity index 100%
rename from src/lib/behaviors/hyprlandRules.ts
rename to src/core/behaviors/hyprlandRules.ts
diff --git a/src/lib/behaviors/index.ts b/src/core/behaviors/index.ts
similarity index 51%
rename from src/lib/behaviors/index.ts
rename to src/core/behaviors/index.ts
index e28895a..37dcfa0 100644
--- a/src/lib/behaviors/index.ts
+++ b/src/core/behaviors/index.ts
@@ -1,10 +1,12 @@
-import './autoHide';
-import { initializeAutoHide } from './autoHide';
+import '../../services/display/bar/autoHide';
 import { warnOnLowBattery } from './batteryWarning';
 import { hyprlandSettings } from './hyprlandRules';
+import { BarAutoHideService } from '../../services/display/bar/autoHide';
+
+const autoHide = BarAutoHideService.getInstance();
 
 export const initializeSystemBehaviors = (): void => {
     warnOnLowBattery();
-    initializeAutoHide();
+    autoHide.initialize();
     hyprlandSettings();
 };
diff --git a/src/core/errors/handler.ts b/src/core/errors/handler.ts
new file mode 100644
index 0000000..127001e
--- /dev/null
+++ b/src/core/errors/handler.ts
@@ -0,0 +1,16 @@
+/**
+ * Central error handling utilities
+ */
+
+/**
+ * Handles errors by throwing a new Error with a message
+ * @param error - The error to handle
+ * @throws Throws a new error with the provided message or a default message
+ */
+export function errorHandler(error: unknown): never {
+    if (error instanceof Error) {
+        throw new Error(error.message);
+    }
+
+    throw new Error(String(error));
+}
diff --git a/src/core/system/SystemUtilities.ts b/src/core/system/SystemUtilities.ts
new file mode 100644
index 0000000..52bec2a
--- /dev/null
+++ b/src/core/system/SystemUtilities.ts
@@ -0,0 +1,225 @@
+import AstalNotifd from 'gi://AstalNotifd';
+import { exec, execAsync, GLib } from 'astal';
+import icons from 'src/lib/icons/icons';
+import { distroIcons } from 'src/core/system/distroIcons';
+import { distro } from 'src/core/system/osInfo';
+import { CommandResult, NotificationArgs, ServiceStatus } from './types';
+
+AstalNotifd.get_default();
+
+export class SystemUtilities {
+    /*******************************************
+     *                 Notify                  *
+     *******************************************/
+    /**
+     * Sends a notification using the `notify-send` command.
+     *
+     * This function constructs a notification command based on the provided notification arguments and executes it asynchronously.
+     * It logs an error if the notification fails to send.
+     *
+     * @param notifPayload The notification arguments containing summary, body, appName, iconName, urgency, timeout, category, transient, and id.
+     */
+    public static notify(notifPayload: NotificationArgs): void {
+        SystemUtilities._notify(notifPayload);
+    }
+
+    /*******************************************
+     *           Depndency Checking            *
+     *******************************************/
+
+    /**
+     * Checks if all specified dependencies are available
+     * @param bins - The list of binaries to check
+     * @returns True if all dependencies are found, false otherwise
+     */
+    public static checkDependencies(...bins: string[]): boolean {
+        const missing = bins.filter((bin) => {
+            try {
+                exec(`which ${bin}`);
+                return false;
+            } catch (e) {
+                console.debug(e);
+                return true;
+            }
+        });
+
+        if (missing.length > 0) {
+            console.warn(Error(`missing dependencies: ${missing.join(', ')}`));
+            this._notify({
+                summary: 'Dependencies not found!',
+                body: `The following dependencies are missing: ${missing.join(', ')}`,
+                iconName: icons.ui.warning,
+            });
+        }
+
+        return missing.length === 0;
+    }
+
+    /**
+     * Checks if any of the given executables is installed by using `which`.
+     *
+     * @description Iterates through a list of executables and returns true if any are found.
+     *
+     * @param executables - The list of executables to check.
+     */
+    public static checkExecutable(executables: string[]): boolean {
+        for (const exe of executables) {
+            const { exitCode } = this._runCommand(`which ${exe}`);
+
+            if (exitCode === 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Checks if any of the given libraries is installed using `pkg-config`.
+     *
+     * @description Uses `pkg-config --exists <lib>` to determine if a library is installed.
+     *
+     * @param libraries - The list of libraries to check.
+     */
+    public static checkLibrary(libraries: string[]): boolean {
+        for (const lib of libraries) {
+            const { exitCode, stdout } = this._runCommand(`sh -c "ldconfig -p | grep ${lib}"`);
+
+            if (exitCode === 0 && stdout.length > 0) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    /**
+     * Checks the status of a service.
+     *
+     * @description Determines if a service is ACTIVE, INSTALLED (but not running), DISABLED, or MISSING.
+     *
+     * @param services - The list of services to check.
+     */
+    public static checkServiceStatus(services: string[]): ServiceStatus {
+        for (const svc of services) {
+            const activeResult = SystemUtilities.runCommand(`systemctl is-active ${svc}`);
+            const activeStatus = activeResult.stdout;
+
+            if (activeStatus === 'active') {
+                return 'ACTIVE';
+            }
+
+            if (activeStatus === 'inactive' || activeStatus === 'failed') {
+                const enabledResult = SystemUtilities.runCommand(`systemctl is-enabled ${svc}`);
+                const enabledStatus = enabledResult.stdout;
+
+                if (
+                    enabledResult !== undefined &&
+                    (enabledStatus === 'enabled' || enabledStatus === 'static')
+                ) {
+                    return 'INSTALLED';
+                } else if (enabledResult !== undefined && enabledStatus === 'disabled') {
+                    return 'DISABLED';
+                } else {
+                    return 'MISSING';
+                }
+            }
+
+            if (activeStatus === 'unknown' || activeResult.exitCode !== 0) {
+                continue;
+            }
+        }
+
+        return 'MISSING';
+    }
+
+    /*******************************************
+     *            Command Execution            *
+     *******************************************/
+
+    /**
+     * Executes a bash command asynchronously
+     * @param strings - The command to execute as a template string or a regular string
+     * @param values - Additional values to interpolate into the command
+     * @returns A promise that resolves to the command output as a string
+     */
+    public static async bash(strings: TemplateStringsArray | string, ...values: unknown[]): Promise<string> {
+        const stringsIsString = typeof strings === 'string';
+
+        const cmd = stringsIsString
+            ? strings
+            : strings.flatMap((str, i) => str + `${values[i] ?? ''}`).join('');
+
+        return execAsync(['bash', '-c', cmd]).catch((err) => {
+            console.error(cmd, err);
+            return '';
+        });
+    }
+
+    /**
+     * Executes a shell command asynchronously
+     * @param cmd - The command to execute as a string or an array of strings
+     * @returns A promise that resolves to the command output as a string
+     */
+    public static async sh(cmd: string | string[]): Promise<string> {
+        return execAsync(cmd).catch((err) => {
+            console.error(typeof cmd === 'string' ? cmd : cmd.join(' '), err);
+            return '';
+        });
+    }
+
+    /*******************************************
+     *               System Info               *
+     *******************************************/
+
+    /**
+     * Retrieves the icon for the current distribution
+     * @returns The icon for the current distribution as a string
+     */
+    public static getDistroIcon(): string {
+        const icon = distroIcons.find(([id]) => id === distro.id);
+        return icon ? icon[1] : '';
+    }
+
+    /**
+     * Spawns a command line synchronously and returns the exit code and output.
+     *
+     * @description Executes a shell command using GLib.spawn_command_line_sync and extracts the exit code, stdout, and stderr.
+     *
+     * @param command - The command to execute.
+     */
+    public static runCommand(command: string): CommandResult {
+        return this._runCommand(command);
+    }
+
+    private static _runCommand(command: string): CommandResult {
+        const decoder = new TextDecoder();
+        const decodeOutput = (output: Uint8Array): string => decoder.decode(output).trim();
+
+        const [, out, err, exitCode] = GLib.spawn_command_line_sync(command);
+        const stdout = out ? decodeOutput(out) : '';
+        const stderr = err ? decodeOutput(err) : '';
+        return {
+            exitCode,
+            stdout,
+            stderr,
+        };
+    }
+
+    private static _notify(notifPayload: NotificationArgs): void {
+        let command = 'notify-send';
+
+        command += ` "${notifPayload.summary} "`;
+
+        if (notifPayload.body !== undefined) command += ` "${notifPayload.body}" `;
+        if (notifPayload.appName !== undefined) command += ` -a "${notifPayload.appName}"`;
+        if (notifPayload.iconName !== undefined) command += ` -i "${notifPayload.iconName}"`;
+        if (notifPayload.urgency !== undefined) command += ` -u "${notifPayload.urgency}"`;
+        if (notifPayload.timeout !== undefined) command += ` -t ${notifPayload.timeout}`;
+        if (notifPayload.category !== undefined) command += ` -c "${notifPayload.category}"`;
+        if (notifPayload.transient !== undefined) command += ' -e';
+        if (notifPayload.id !== undefined) command += ` -r ${notifPayload.id}`;
+
+        execAsync(command).catch((err) => {
+            console.error(`Failed to send notification: ${err.message}`);
+        });
+    }
+}
diff --git a/src/lib/constants/distro.ts b/src/core/system/distroIcons.ts
similarity index 100%
rename from src/lib/constants/distro.ts
rename to src/core/system/distroIcons.ts
diff --git a/src/core/system/osInfo.ts b/src/core/system/osInfo.ts
new file mode 100644
index 0000000..55d0f8d
--- /dev/null
+++ b/src/core/system/osInfo.ts
@@ -0,0 +1,6 @@
+import { GLib } from 'astal';
+
+export const distro = {
+    id: GLib.get_os_info('ID'),
+    logo: GLib.get_os_info('LOGO'),
+};
diff --git a/src/lib/types/notification.types.ts b/src/core/system/types.ts
similarity index 57%
rename from src/lib/types/notification.types.ts
rename to src/core/system/types.ts
index 9b1d0eb..315d5a0 100644
--- a/src/lib/types/notification.types.ts
+++ b/src/core/system/types.ts
@@ -1,4 +1,10 @@
-import icons from 'src/lib/icons/icons2';
+export type CommandResult = {
+    exitCode: number;
+    stdout: string;
+    stderr: string;
+};
+
+export type ServiceStatus = 'ACTIVE' | 'INSTALLED' | 'DISABLED' | 'MISSING';
 
 export interface NotificationArgs {
     appName?: string;
@@ -11,5 +17,3 @@ export interface NotificationArgs {
     timeout?: number;
     transient?: boolean;
 }
-
-export type NotificationIcon = keyof typeof icons.notifications;
diff --git a/src/core/types/index.ts b/src/core/types/index.ts
new file mode 100644
index 0000000..04ae81c
--- /dev/null
+++ b/src/core/types/index.ts
@@ -0,0 +1 @@
+export type JSXElement = JSX.Element | null;
diff --git a/src/lib/array/helpers.ts b/src/lib/array/helpers.ts
new file mode 100644
index 0000000..12728fb
--- /dev/null
+++ b/src/lib/array/helpers.ts
@@ -0,0 +1,18 @@
+/**
+ * Generates an array of numbers within a specified range
+ * @param length - The length of the array to generate
+ * @param start - The starting value of the range. Defaults to 1
+ * @returns An array of numbers within the specified range
+ */
+export function range(length: number, start = 1): number[] {
+    return Array.from({ length }, (_, i) => i + start);
+}
+
+/**
+ * Removes duplicate values from an array
+ * @param array - The array to deduplicate
+ * @returns A new array with unique values
+ */
+export function unique<T>(array: T[]): T[] {
+    return [...new Set(array)];
+}
diff --git a/src/lib/bar/helpers.ts b/src/lib/bar/helpers.ts
new file mode 100644
index 0000000..57b3bf9
--- /dev/null
+++ b/src/lib/bar/helpers.ts
@@ -0,0 +1,40 @@
+import options from 'src/configuration';
+import { BarLayouts, BarModule } from '../options/types';
+import { unique } from '../array/helpers';
+
+/**
+ * Retrieves all unique layout items from the bar options.
+ *
+ * This function extracts all unique layout items from the bar options defined in the `options` object.
+ * It iterates through the layouts for each monitor and collects items from the left, middle, and right sections.
+ *
+ * @returns An array of unique layout items.
+ */
+export function getLayoutItems(): BarModule[] {
+    const { layouts } = options.bar;
+
+    const itemsInLayout: BarModule[] = [];
+
+    Object.keys(layouts.get()).forEach((monitor) => {
+        const leftItems = layouts.get()[monitor].left;
+        const rightItems = layouts.get()[monitor].right;
+        const middleItems = layouts.get()[monitor].middle;
+
+        itemsInLayout.push(...leftItems);
+        itemsInLayout.push(...middleItems);
+        itemsInLayout.push(...rightItems);
+    });
+
+    return unique(itemsInLayout);
+}
+
+export function setLayout(layout: BarLayouts): string {
+    try {
+        const { layouts } = options.bar;
+
+        layouts.set(layout);
+        return 'Successfully updated layout.';
+    } catch (error) {
+        return `Failed to set layout: ${error}`;
+    }
+}
diff --git a/src/lib/behaviors/autoHide.ts b/src/lib/behaviors/autoHide.ts
deleted file mode 100644
index 51397eb..0000000
--- a/src/lib/behaviors/autoHide.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-import { bind, Variable } from 'astal';
-import { App } from 'astal/gtk3';
-import AstalHyprland from 'gi://AstalHyprland?version=0.1';
-import { BarVisibility } from 'src/cli/utils/BarVisibility';
-import { forceUpdater } from 'src/components/bar/modules/workspaces/helpers';
-import options from 'src/options';
-
-const hyprlandService = AstalHyprland.get_default();
-const { autoHide } = options.bar;
-
-/**
- * Sets bar visibility for a specific monitor
- *
- * @param monitorId - The ID of the monitor
- * @param isVisible - Whether the bar should be visible
- */
-function setBarVisibility(monitorId: number, isVisible: boolean): void {
-    const barName = `bar-${monitorId}`;
-
-    if (BarVisibility.get(barName)) {
-        App.get_window(barName)?.set_visible(isVisible);
-    }
-}
-
-/**
- * Handles bar visibility when a client's fullscreen state changes
- *
- * @param client - The Hyprland client that gained focus
- */
-function handleFullscreenClientVisibility(client: AstalHyprland.Client): void {
-    if (client === null) {
-        return;
-    }
-
-    const fullscreenBinding = bind(client, 'fullscreen');
-
-    Variable.derive([bind(fullscreenBinding)], (isFullScreen) => {
-        if (autoHide.get() === 'fullscreen') {
-            setBarVisibility(client.monitor.id, !Boolean(isFullScreen));
-        }
-    });
-}
-
-/**
- * Shows bars on all monitors
- */
-function showAllBars(): void {
-    const monitors = hyprlandService.get_monitors();
-
-    monitors.forEach((monitor) => {
-        if (BarVisibility.get(`bar-${monitor.id}`)) {
-            setBarVisibility(monitor.id, true);
-        }
-    });
-}
-
-/**
- * Updates bar visibility based on workspace window count
- */
-function updateBarVisibilityByWindowCount(): void {
-    const monitors = hyprlandService.get_monitors();
-    const activeWorkspaces = monitors.map((monitor) => monitor.active_workspace);
-
-    activeWorkspaces.forEach((workspace) => {
-        const hasOneClient = workspace.get_clients().length !== 1;
-        setBarVisibility(workspace.monitor.id, hasOneClient);
-    });
-}
-
-/**
- * Updates bar visibility based on workspace fullscreen state
- */
-function updateBarVisibilityByFullscreen(): void {
-    hyprlandService.get_workspaces().forEach((workspace) => {
-        setBarVisibility(workspace.monitor.id, !workspace.hasFullscreen);
-    });
-}
-
-/**
- * Initializes the auto-hide behavior for bars
- * Manages visibility based on window count, fullscreen state, and user preferences
- */
-export function initializeAutoHide(): void {
-    Variable.derive(
-        [
-            bind(autoHide),
-            bind(hyprlandService, 'workspaces'),
-            bind(forceUpdater),
-            bind(hyprlandService, 'focusedWorkspace'),
-        ],
-        (hideMode) => {
-            if (hideMode === 'never') {
-                showAllBars();
-            } else if (hideMode === 'single-window') {
-                updateBarVisibilityByWindowCount();
-            }
-        },
-    );
-
-    Variable.derive([bind(hyprlandService, 'focusedClient')], (currentClient) => {
-        handleFullscreenClientVisibility(currentClient);
-    });
-
-    Variable.derive([bind(autoHide)], (hideMode) => {
-        if (hideMode === 'fullscreen') {
-            updateBarVisibilityByFullscreen();
-        }
-    });
-}
diff --git a/src/shared/dropdown.ts b/src/lib/events/dropdown.ts
similarity index 99%
rename from src/shared/dropdown.ts
rename to src/lib/events/dropdown.ts
index 5b75d7a..0c181ed 100644
--- a/src/shared/dropdown.ts
+++ b/src/lib/events/dropdown.ts
@@ -4,4 +4,5 @@ import Variable from 'astal/variable';
 type GlobalEventBoxes = {
     [key: string]: EventBox;
 };
+
 export const globalEventBoxes: Variable<GlobalEventBoxes> = Variable({});
diff --git a/src/lib/events/mouse.ts b/src/lib/events/mouse.ts
new file mode 100644
index 0000000..b8a4ee1
--- /dev/null
+++ b/src/lib/events/mouse.ts
@@ -0,0 +1,62 @@
+import { Astal, Gdk } from 'astal/gtk3';
+
+/**
+ * Checks if an event is a primary click
+ * @param event - The click event to check
+ * @returns True if the event is a primary click, false otherwise
+ */
+export const isPrimaryClick = (event: Astal.ClickEvent): boolean => event.button === Gdk.BUTTON_PRIMARY;
+
+/**
+ * Checks if an event is a secondary click
+ * @param event - The click event to check
+ * @returns True if the event is a secondary click, false otherwise
+ */
+export const isSecondaryClick = (event: Astal.ClickEvent): boolean => event.button === Gdk.BUTTON_SECONDARY;
+
+/**
+ * Checks if an event is a middle click
+ * @param event - The click event to check
+ * @returns True if the event is a middle click, false otherwise
+ */
+export const isMiddleClick = (event: Astal.ClickEvent): boolean => event.button === Gdk.BUTTON_MIDDLE;
+
+/**
+ * Checks if an event is a scroll up
+ * @param event - The scroll event to check
+ * @returns True if the event is a scroll up, false otherwise
+ */
+export const isScrollUp = (event: Gdk.Event): boolean => {
+    const [directionSuccess, direction] = event.get_scroll_direction();
+    const [deltaSuccess, , yScroll] = event.get_scroll_deltas();
+
+    if (directionSuccess && direction === Gdk.ScrollDirection.UP) {
+        return true;
+    }
+
+    if (deltaSuccess && yScroll < 0) {
+        return true;
+    }
+
+    return false;
+};
+
+/**
+ * Checks if an event is a scroll down
+ * @param event - The scroll event to check
+ * @returns True if the event is a scroll down, false otherwise
+ */
+export const isScrollDown = (event: Gdk.Event): boolean => {
+    const [directionSuccess, direction] = event.get_scroll_direction();
+    const [deltaSuccess, , yScroll] = event.get_scroll_deltas();
+
+    if (directionSuccess && direction === Gdk.ScrollDirection.DOWN) {
+        return true;
+    }
+
+    if (deltaSuccess && yScroll > 0) {
+        return true;
+    }
+
+    return false;
+};
diff --git a/src/lib/httpClient/HttpError.ts b/src/lib/httpClient/HttpError.ts
new file mode 100644
index 0000000..f1f365c
--- /dev/null
+++ b/src/lib/httpClient/HttpError.ts
@@ -0,0 +1,27 @@
+import { HttpErrorOptions } from './types';
+
+/**
+ * Custom error class for HTTP request failures
+ * Provides status code and response data for error handling
+ */
+export class HttpError extends Error {
+    public status: number;
+    public data?: unknown;
+    public url?: string;
+    public method?: string;
+
+    constructor(options: HttpErrorOptions) {
+        const { status, message, data, url, method } = options;
+
+        const errorMessage = message ? `: ${message}` : '';
+        const response = `HTTP ${status}${errorMessage}`;
+
+        super(response);
+        this.name = 'HttpError';
+
+        this.status = status;
+        this.data = data;
+        this.url = url;
+        this.method = method;
+    }
+}
diff --git a/src/lib/httpClient/index.ts b/src/lib/httpClient/index.ts
new file mode 100644
index 0000000..8f789cc
--- /dev/null
+++ b/src/lib/httpClient/index.ts
@@ -0,0 +1,268 @@
+import { GLib } from 'astal';
+import Soup from 'gi://Soup?version=3.0';
+import { HttpError } from './HttpError';
+import { RequestOptions, RestResponse } from './types';
+import { errorHandler } from 'src/core/errors/handler';
+
+/**
+ * HTTP client wrapper for Soup.Session providing a Promise-based API
+ * Handles authentication, timeouts, and JSON parsing automatically
+ */
+class HttpClient {
+    private _session: Soup.Session;
+    constructor(defaultTimeout = 30) {
+        this._session = new Soup.Session();
+        this._session.timeout = defaultTimeout;
+        this._session.user_agent = 'HyprPanel/1.0';
+    }
+
+    /*******************************************
+     *              HTTP Methods               *
+     *******************************************/
+
+    /**
+     * Performs an HTTP GET request
+     * @param url - Target URL for the request
+     * @param options - Optional configuration for the request
+     */
+    public async get(url: string, options?: RequestOptions): Promise<RestResponse> {
+        return this._request('GET', url, options);
+    }
+
+    /**
+     * Performs an HTTP POST request
+     * @param url - Target URL for the request
+     * @param data - Request payload to send
+     * @param options - Optional configuration for the request
+     */
+    public async post(
+        url: string,
+        data?: Record<string, unknown>,
+        options?: RequestOptions,
+    ): Promise<RestResponse> {
+        return this._request('POST', url, { ...options, body: data });
+    }
+
+    /**
+     * Performs an HTTP PUT request
+     * @param url - Target URL for the request
+     * @param data - Request payload to send
+     * @param options - Optional configuration for the request
+     */
+    public async put(
+        url: string,
+        data?: Record<string, unknown>,
+        options?: RequestOptions,
+    ): Promise<RestResponse> {
+        return this._request('PUT', url, { ...options, body: data });
+    }
+
+    /**
+     * Performs an HTTP PATCH request
+     * @param url - Target URL for the request
+     * @param data - Request payload with partial updates
+     * @param options - Optional configuration for the request
+     */
+    public async patch(
+        url: string,
+        data?: Record<string, unknown>,
+        options?: RequestOptions,
+    ): Promise<RestResponse> {
+        return this._request('PATCH', url, { ...options, body: data });
+    }
+
+    /**
+     * Performs an HTTP DELETE request
+     * @param url - Target URL for the request
+     * @param options - Optional configuration for the request
+     */
+    public async delete(url: string, options?: RequestOptions): Promise<RestResponse> {
+        return this._request('DELETE', url, options);
+    }
+
+    /*******************************************
+     *           SOUP Infrastructure           *
+     *******************************************/
+
+    /**
+     * Internal request handler for all HTTP methods
+     * @param method - HTTP method to use
+     * @param url - Target URL for the request
+     * @param options - Configuration options for the request
+     * @private
+     */
+    private async _request(method: string, url: string, options: RequestOptions = {}): Promise<RestResponse> {
+        const requestPromise = new Promise<RestResponse>((resolve, reject) => {
+            const message = Soup.Message.new(method, url);
+
+            if (!message) {
+                return reject(new Error(`Failed to create request for ${url}`));
+            }
+
+            this._assignHeaders(message, options);
+            this._constructBodyIfExists(method, options, message);
+
+            if (options.timeout) {
+                this._session.timeout = options.timeout / 1000;
+            }
+
+            this._sendRequest(resolve, reject, message, options);
+        });
+
+        return requestPromise;
+    }
+
+    /**
+     * Constructs and sets the request body for HTTP methods that support it
+     * @param method - HTTP method being used
+     * @param options - Request options containing the body
+     * @param message - Soup message to attach the body to
+     */
+    private _constructBodyIfExists(method: string, options: RequestOptions, message: Soup.Message): void {
+        const canContainBody = ['POST', 'PUT', 'PATCH'].includes(method);
+        if (options.body && canContainBody) {
+            let body: string;
+            let contentType = options.headers?.['Content-Type'] || 'application/json';
+
+            if (typeof options.body === 'object') {
+                body = JSON.stringify(options.body);
+            } else {
+                body = options.body;
+                contentType = contentType || 'text/plain';
+            }
+
+            const textEncoder = new TextEncoder();
+            const bytes = new GLib.Bytes(textEncoder.encode(body));
+            message.set_request_body_from_bytes(contentType, bytes);
+        }
+    }
+
+    /**
+     * Assigns headers to the request message
+     * @param message - Soup message to add headers to
+     * @param options - Request options containing headers
+     */
+    private _assignHeaders(message: Soup.Message, options: RequestOptions): Soup.MessageHeaders {
+        const headers = message.get_request_headers();
+
+        if (options.headers) {
+            Object.entries(options.headers).forEach(([key, value]) => {
+                headers.append(key, value);
+            });
+        }
+
+        return headers;
+    }
+
+    /**
+     * Sends the HTTP request and handles the response
+     * @param resolve - Promise resolve callback
+     * @param reject - Promise reject callback
+     * @param message - Prepared Soup message to send
+     * @param options - Request configuration options
+     */
+    private _sendRequest(
+        resolve: (value: RestResponse | PromiseLike<RestResponse>) => void,
+        reject: (reason?: unknown) => void,
+        message: Soup.Message,
+        options: RequestOptions,
+    ): void {
+        const cancellable = options.signal ?? null;
+
+        try {
+            const bytes = this._session.send_and_read(message, cancellable);
+
+            const {
+                response: responseText,
+                headers: responseHeaders,
+                status,
+            } = this._decodeResponseSync(message, bytes);
+
+            const responseData = this._parseReponseData(options, responseText);
+
+            const response: RestResponse = {
+                data: responseData,
+                status,
+                headers: responseHeaders,
+            };
+
+            if (status >= 400) {
+                const httpError = new HttpError({
+                    status,
+                    data: responseData,
+                    url: message.get_uri().to_string(),
+                    method: message.get_method(),
+                });
+
+                return reject(httpError);
+            }
+
+            return resolve(response);
+        } catch (error) {
+            reject(error);
+        }
+    }
+
+    /**
+     * Decodes the response bytes into text and extracts response metadata
+     * @param message - Soup message containing the response
+     * @param bytes - Response bytes from the sync request
+     */
+    private _decodeResponseSync(
+        message: Soup.Message,
+        bytes: GLib.Bytes | null,
+    ): {
+        response: string;
+        status: Soup.Status;
+        headers: Record<string, string>;
+    } {
+        if (!bytes) {
+            throw new Error('No response received');
+        }
+
+        const decoder = new TextDecoder();
+        const byteData = bytes.get_data();
+
+        const responseText = byteData ? decoder.decode(byteData) : '';
+        const status = message.get_status();
+
+        const responseHeaders: Record<string, string> = {};
+
+        message.get_response_headers().foreach((name, value) => {
+            responseHeaders[name] = value;
+        });
+
+        return {
+            response: responseText,
+            status,
+            headers: responseHeaders,
+        };
+    }
+
+    /**
+     * Parses response text based on the expected response type
+     * @param options - Request options containing responseType preference
+     * @param responseText - Raw response text to parse
+     */
+    private _parseReponseData(
+        options: RequestOptions,
+        responseText: string,
+    ): string | Record<string, unknown> {
+        if (!responseText) {
+            return '';
+        }
+
+        if (options.responseType === 'text') {
+            return responseText;
+        }
+
+        try {
+            const parsedResponseText = JSON.parse(responseText);
+            return parsedResponseText;
+        } catch (e) {
+            errorHandler(`Failed to parse JSON response: ${e}`);
+        }
+    }
+}
+
+export const httpClient = new HttpClient();
diff --git a/src/lib/httpClient/types.ts b/src/lib/httpClient/types.ts
new file mode 100644
index 0000000..866a401
--- /dev/null
+++ b/src/lib/httpClient/types.ts
@@ -0,0 +1,23 @@
+import { Gio } from 'astal';
+
+export interface RequestOptions {
+    headers?: Record<string, string>;
+    body?: string | object;
+    timeout?: number;
+    responseType?: 'json' | 'text';
+    signal?: Gio.Cancellable;
+}
+
+export interface RestResponse {
+    data: unknown;
+    status: number;
+    headers: Record<string, string>;
+}
+
+export interface HttpErrorOptions {
+    status: number;
+    message?: string;
+    data?: unknown;
+    url?: string;
+    method?: string;
+}
diff --git a/src/lib/icons/helpers.ts b/src/lib/icons/helpers.ts
new file mode 100644
index 0000000..ce8d4d6
--- /dev/null
+++ b/src/lib/icons/helpers.ts
@@ -0,0 +1,32 @@
+import { Gtk } from 'astal/gtk3';
+
+/**
+ * Looks up an icon by name and size
+ * @param name - The name of the icon to look up
+ * @param size - The size of the icon to look up. Defaults to 16
+ * @returns The Gtk.IconInfo object if the icon is found, or null if not found
+ */
+export function lookUpIcon(name?: string, size = 16): Gtk.IconInfo | null {
+    if (name === undefined) return null;
+
+    return Gtk.IconTheme.get_default().lookup_icon(name, size, Gtk.IconLookupFlags.USE_BUILTIN);
+}
+
+/**
+ * Checks if an icon exists in the theme
+ * @param name - The name of the icon to check
+ * @returns True if the icon exists, false otherwise
+ */
+export function iconExists(name: string): boolean {
+    return lookUpIcon(name) !== null;
+}
+
+/**
+ * Gets an icon name with fallback
+ * @param primary - The primary icon name to try
+ * @param fallback - The fallback icon name if primary doesn't exist
+ * @returns The primary icon if it exists, otherwise the fallback
+ */
+export function getIconWithFallback(primary: string, fallback: string): string {
+    return iconExists(primary) ? primary : fallback;
+}
diff --git a/src/lib/icons/icons.ts b/src/lib/icons/icons.ts
index 7835f2e..2d2dd25 100644
--- a/src/lib/icons/icons.ts
+++ b/src/lib/icons/icons.ts
@@ -1,17 +1,3 @@
-export const substitutes = {
-    'transmission-gtk': 'transmission',
-    'blueberry.py': 'blueberry',
-    Caprine: 'facebook-messenger',
-    'com.raggesilver.BlackBox-symbolic': 'terminal-symbolic',
-    'org.wezfurlong.wezterm-symbolic': 'terminal-symbolic',
-    'audio-headset-bluetooth': 'audio-headphones-symbolic',
-    'audio-card-analog-usb': 'audio-speakers-symbolic',
-    'audio-card-analog-pci': 'audio-card-symbolic',
-    'preferences-system': 'emblem-system-symbolic',
-    'com.github.Aylur.ags-symbolic': 'controls-symbolic',
-    'com.github.Aylur.ags': 'controls-symbolic',
-} as const;
-
 export default {
     missing: 'image-missing-symbolic',
     nix: {
@@ -141,4 +127,59 @@ export default {
         dark: 'dark-mode-symbolic',
         light: 'light-mode-symbolic',
     },
-};
+    weather: {
+        warning: 'dialog-warning-symbolic',
+        sunny: 'weather-clear-symbolic',
+        clear: 'weather-clear-night-symbolic',
+        partly_cloudy: 'weather-few-clouds-symbolic',
+        partly_cloudy_night: 'weather-few-clouds-night-symbolic',
+        cloudy: 'weather-overcast-symbolic',
+        overcast: 'weather-overcast-symbolic',
+        mist: 'weather-overcast-symbolic',
+        patchy_rain_nearby: 'weather-showers-scattered-symbolic',
+        patchy_rain_possible: 'weather-showers-scattered-symbolic',
+        patchy_snow_possible: 'weather-snow-symbolic',
+        patchy_sleet_possible: 'weather-snow-symbolic',
+        patchy_freezing_drizzle_possible: 'weather-showers-scattered-symbolic',
+        thundery_outbreaks_possible: 'weather-overcast-symbolic',
+        blowing_snow: 'weather-snow-symbolic',
+        blizzard: 'weather-snow-symbolic',
+        fog: 'weather-fog-symbolic',
+        freezing_fog: 'weather-fog-symbolic',
+        patchy_light_drizzle: 'weather-showers-scattered-symbolic',
+        light_drizzle: 'weather-showers-symbolic',
+        freezing_drizzle: 'weather-showers-symbolic',
+        heavy_freezing_drizzle: 'weather-showers-symbolic',
+        patchy_light_rain: 'weather-showers-scattered-symbolic',
+        light_rain: 'weather-showers-symbolic',
+        moderate_rain_at_times: 'weather-showers-symbolic',
+        moderate_rain: 'weather-showers-symbolic',
+        heavy_rain_at_times: 'weather-showers-symbolic',
+        heavy_rain: 'weather-showers-symbolic',
+        light_freezing_rain: 'weather-showers-symbolic',
+        moderate_or_heavy_freezing_rain: 'weather-showers-symbolic',
+        light_sleet: 'weather-snow-symbolic',
+        moderate_or_heavy_sleet: 'weather-snow-symbolic',
+        patchy_light_snow: 'weather-snow-symbolic',
+        light_snow: 'weather-snow-symbolic',
+        patchy_moderate_snow: 'weather-snow-symbolic',
+        moderate_snow: 'weather-snow-symbolic',
+        patchy_heavy_snow: 'weather-snow-symbolic',
+        heavy_snow: 'weather-snow-symbolic',
+        ice_pellets: 'weather-showers-symbolic',
+        light_rain_shower: 'weather-showers-symbolic',
+        moderate_or_heavy_rain_shower: 'weather-showers-symbolic',
+        torrential_rain_shower: 'weather-showers-symbolic',
+        light_sleet_showers: 'weather-showers-symbolic',
+        moderate_or_heavy_sleet_showers: 'weather-showers-symbolic',
+        light_snow_showers: 'weather-snow-symbolic',
+        moderate_or_heavy_snow_showers: 'weather-snow-symbolic',
+        light_showers_of_ice_pellets: 'weather-showers-symbolic',
+        moderate_or_heavy_showers_of_ice_pellets: 'weather-showers-symbolic',
+        patchy_light_rain_with_thunder: 'weather-showers-scattered-symbolic',
+        moderate_or_heavy_rain_with_thunder: 'weather-showers-symbolic',
+        moderate_or_heavy_rain_in_area_with_thunder: 'weather-showers-symbolic',
+        patchy_light_snow_with_thunder: 'weather-snow-symbolic',
+        moderate_or_heavy_snow_with_thunder: 'weather-snow-symbolic',
+    },
+} as const;
diff --git a/src/lib/icons/icons2.ts b/src/lib/icons/icons2.ts
deleted file mode 100644
index 0c4c053..0000000
--- a/src/lib/icons/icons2.ts
+++ /dev/null
@@ -1,199 +0,0 @@
-export const substitutes = {
-    'transmission-gtk': 'transmission',
-    'blueberry.py': 'blueberry',
-    Caprine: 'facebook-messenger',
-    'com.raggesilver.BlackBox-symbolic': 'terminal-symbolic',
-    'org.wezfurlong.wezterm-symbolic': 'terminal-symbolic',
-    'audio-headset-bluetooth': 'audio-headphones-symbolic',
-    'audio-card-analog-usb': 'audio-speakers-symbolic',
-    'audio-card-analog-pci': 'audio-card-symbolic',
-    'preferences-system': 'emblem-system-symbolic',
-    'com.github.Aylur.ags-symbolic': 'controls-symbolic',
-    'com.github.Aylur.ags': 'controls-symbolic',
-};
-
-export default {
-    missing: 'image-missing-symbolic',
-    nix: {
-        nix: 'nix-snowflake-symbolic',
-    },
-    app: {
-        terminal: 'terminal-symbolic',
-    },
-    fallback: {
-        executable: 'application-x-executable',
-        notification: 'dialog-information-symbolic',
-        video: 'video-x-generic-symbolic',
-        audio: 'audio-x-generic-symbolic',
-    },
-    ui: {
-        close: 'window-close-symbolic',
-        colorpicker: 'color-select-symbolic',
-        info: 'info-symbolic',
-        link: 'external-link-symbolic',
-        lock: 'system-lock-screen-symbolic',
-        menu: 'open-menu-symbolic',
-        refresh: 'view-refresh-symbolic',
-        search: 'system-search-symbolic',
-        settings: 'emblem-system-symbolic',
-        themes: 'preferences-desktop-theme-symbolic',
-        tick: 'object-select-symbolic',
-        time: 'hourglass-symbolic',
-        toolbars: 'toolbars-symbolic',
-        warning: 'dialog-warning-symbolic',
-        arrow: {
-            right: 'pan-end-symbolic',
-            left: 'pan-start-symbolic',
-            down: 'pan-down-symbolic',
-            up: 'pan-up-symbolic',
-        },
-    },
-    audio: {
-        mic: {
-            muted: 'microphone-disabled-symbolic',
-            low: 'microphone-sensitivity-low-symbolic',
-            medium: 'microphone-sensitivity-medium-symbolic',
-            high: 'microphone-sensitivity-high-symbolic',
-        },
-        volume: {
-            muted: 'audio-volume-muted-symbolic',
-            low: 'audio-volume-low-symbolic',
-            medium: 'audio-volume-medium-symbolic',
-            high: 'audio-volume-high-symbolic',
-            overamplified: 'audio-volume-overamplified-symbolic',
-        },
-        type: {
-            headset: 'audio-headphones-symbolic',
-            speaker: 'audio-speakers-symbolic',
-            card: 'audio-card-symbolic',
-        },
-        mixer: 'mixer-symbolic',
-    },
-    powerprofile: {
-        balanced: 'power-profile-balanced-symbolic',
-        'power-saver': 'power-profile-power-saver-symbolic',
-        performance: 'power-profile-performance-symbolic',
-    },
-    asusctl: {
-        profile: {
-            Balanced: 'power-profile-balanced-symbolic',
-            Quiet: 'power-profile-power-saver-symbolic',
-            Performance: 'power-profile-performance-symbolic',
-        },
-        mode: {
-            Integrated: 'processor-symbolic',
-            Hybrid: 'controller-symbolic',
-        },
-    },
-    battery: {
-        charging: 'battery-flash-symbolic',
-        warning: 'battery-empty-symbolic',
-    },
-    bluetooth: {
-        enabled: 'bluetooth-active-symbolic',
-        disabled: 'bluetooth-disabled-symbolic',
-    },
-    brightness: {
-        indicator: 'display-brightness-symbolic',
-        keyboard: 'keyboard-brightness-symbolic',
-        screen: 'display-brightness-symbolic',
-    },
-    powermenu: {
-        sleep: 'weather-clear-night-symbolic',
-        reboot: 'system-reboot-symbolic',
-        logout: 'system-log-out-symbolic',
-        shutdown: 'system-shutdown-symbolic',
-    },
-    recorder: {
-        recording: 'media-record-symbolic',
-    },
-    notifications: {
-        noisy: 'org.gnome.Settings-notifications-symbolic',
-        silent: 'notifications-disabled-symbolic',
-        message: 'chat-bubbles-symbolic',
-    },
-    trash: {
-        full: 'user-trash-full-symbolic',
-        empty: 'user-trash-symbolic',
-    },
-    mpris: {
-        shuffle: {
-            enabled: 'media-playlist-shuffle-symbolic',
-            disabled: 'media-playlist-consecutive-symbolic',
-        },
-        loop: {
-            none: 'media-playlist-repeat-symbolic',
-            track: 'media-playlist-repeat-song-symbolic',
-            playlist: 'media-playlist-repeat-symbolic',
-        },
-        playing: 'media-playback-pause-symbolic',
-        paused: 'media-playback-start-symbolic',
-        stopped: 'media-playback-start-symbolic',
-        prev: 'media-skip-backward-symbolic',
-        next: 'media-skip-forward-symbolic',
-    },
-    system: {
-        cpu: 'org.gnome.SystemMonitor-symbolic',
-        ram: 'drive-harddisk-solidstate-symbolic',
-        temp: 'temperature-symbolic',
-    },
-    color: {
-        dark: 'dark-mode-symbolic',
-        light: 'light-mode-symbolic',
-    },
-    weather: {
-        warning: 'dialog-warning-symbolic',
-        sunny: 'weather-clear-symbolic',
-        clear: 'weather-clear-night-symbolic',
-        partly_cloudy: 'weather-few-clouds-symbolic',
-        partly_cloudy_night: 'weather-few-clouds-night-symbolic',
-        cloudy: 'weather-overcast-symbolic',
-        overcast: 'weather-overcast-symbolic',
-        mist: 'weather-overcast-symbolic',
-        patchy_rain_nearby: 'weather-showers-scattered-symbolic',
-        patchy_rain_possible: 'weather-showers-scattered-symbolic',
-        patchy_snow_possible: 'weather-snow-symbolic',
-        patchy_sleet_possible: 'weather-snow-symbolic',
-        patchy_freezing_drizzle_possible: 'weather-showers-scattered-symbolic',
-        thundery_outbreaks_possible: 'weather-overcast-symbolic',
-        blowing_snow: 'weather-snow-symbolic',
-        blizzard: 'weather-snow-symbolic',
-        fog: 'weather-fog-symbolic',
-        freezing_fog: 'weather-fog-symbolic',
-        patchy_light_drizzle: 'weather-showers-scattered-symbolic',
-        light_drizzle: 'weather-showers-symbolic',
-        freezing_drizzle: 'weather-showers-symbolic',
-        heavy_freezing_drizzle: 'weather-showers-symbolic',
-        patchy_light_rain: 'weather-showers-scattered-symbolic',
-        light_rain: 'weather-showers-symbolic',
-        moderate_rain_at_times: 'weather-showers-symbolic',
-        moderate_rain: 'weather-showers-symbolic',
-        heavy_rain_at_times: 'weather-showers-symbolic',
-        heavy_rain: 'weather-showers-symbolic',
-        light_freezing_rain: 'weather-showers-symbolic',
-        moderate_or_heavy_freezing_rain: 'weather-showers-symbolic',
-        light_sleet: 'weather-snow-symbolic',
-        moderate_or_heavy_sleet: 'weather-snow-symbolic',
-        patchy_light_snow: 'weather-snow-symbolic',
-        light_snow: 'weather-snow-symbolic',
-        patchy_moderate_snow: 'weather-snow-symbolic',
-        moderate_snow: 'weather-snow-symbolic',
-        patchy_heavy_snow: 'weather-snow-symbolic',
-        heavy_snow: 'weather-snow-symbolic',
-        ice_pellets: 'weather-showers-symbolic',
-        light_rain_shower: 'weather-showers-symbolic',
-        moderate_or_heavy_rain_shower: 'weather-showers-symbolic',
-        torrential_rain_shower: 'weather-showers-symbolic',
-        light_sleet_showers: 'weather-showers-symbolic',
-        moderate_or_heavy_sleet_showers: 'weather-showers-symbolic',
-        light_snow_showers: 'weather-snow-symbolic',
-        moderate_or_heavy_snow_showers: 'weather-snow-symbolic',
-        light_showers_of_ice_pellets: 'weather-showers-symbolic',
-        moderate_or_heavy_showers_of_ice_pellets: 'weather-showers-symbolic',
-        patchy_light_rain_with_thunder: 'weather-showers-scattered-symbolic',
-        moderate_or_heavy_rain_with_thunder: 'weather-showers-symbolic',
-        moderate_or_heavy_rain_in_area_with_thunder: 'weather-showers-symbolic',
-        patchy_light_snow_with_thunder: 'weather-snow-symbolic',
-        moderate_or_heavy_snow_with_thunder: 'weather-snow-symbolic',
-    },
-} as const;
diff --git a/src/lib/icons/weather.ts b/src/lib/icons/weather.ts
deleted file mode 100644
index 57302ee..0000000
--- a/src/lib/icons/weather.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-export const weatherIcons = {
-    warning: '󰼯',
-    sunny: '󰖙',
-    clear: '󰖔',
-    partly_cloudy: '󰖕',
-    partly_cloudy_night: '󰼱',
-    cloudy: '󰖐',
-    overcast: '󰖕',
-    mist: '󰖑',
-    patchy_rain_nearby: '󰼳',
-    patchy_rain_possible: '󰼳',
-    patchy_snow_possible: '󰼴',
-    patchy_sleet_possible: '󰙿',
-    patchy_freezing_drizzle_possible: '󰙿',
-    thundery_outbreaks_possible: '󰙾',
-    blowing_snow: '󰼶',
-    blizzard: '󰼶',
-    fog: '󰖑',
-    freezing_fog: '󰖑',
-    patchy_light_drizzle: '󰼳',
-    light_drizzle: '󰼳',
-    freezing_drizzle: '󰙿',
-    heavy_freezing_drizzle: '󰙿',
-    patchy_light_rain: '󰼳',
-    light_rain: '󰼳',
-    moderate_rain_at_times: '󰖗',
-    moderate_rain: '󰼳',
-    heavy_rain_at_times: '󰖖',
-    heavy_rain: '󰖖',
-    light_freezing_rain: '󰙿',
-    moderate_or_heavy_freezing_rain: '󰙿',
-    light_sleet: '󰙿',
-    moderate_or_heavy_sleet: '󰙿',
-    patchy_light_snow: '󰼴',
-    light_snow: '󰼴',
-    patchy_moderate_snow: '󰼴',
-    moderate_snow: '󰼶',
-    patchy_heavy_snow: '󰼶',
-    heavy_snow: '󰼶',
-    ice_pellets: '󰖒',
-    light_rain_shower: '󰖖',
-    moderate_or_heavy_rain_shower: '󰖖',
-    torrential_rain_shower: '󰖖',
-    light_sleet_showers: '󰼵',
-    moderate_or_heavy_sleet_showers: '󰼵',
-    light_snow_showers: '󰼵',
-    moderate_or_heavy_snow_showers: '󰼵',
-    light_showers_of_ice_pellets: '󰖒',
-    moderate_or_heavy_showers_of_ice_pellets: '󰖒',
-    patchy_light_rain_with_thunder: '󰙾',
-    moderate_or_heavy_rain_with_thunder: '󰙾',
-    moderate_or_heavy_rain_in_area_with_thunder: '󰙾',
-    patchy_light_snow_with_thunder: '󰼶',
-    moderate_or_heavy_snow_with_thunder: '󰼶',
-} as const;
diff --git a/src/lib/options/ConfigManager.ts b/src/lib/options/ConfigManager.ts
deleted file mode 100644
index 57dabd8..0000000
--- a/src/lib/options/ConfigManager.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-import { readFile, writeFile, monitorFile } from 'astal/file';
-import { errorHandler, Notify } from '../utils';
-import { ensureDirectory } from '../session';
-import icons from '../icons/icons';
-
-/**
- * Manages configuration file operations including reading, writing, and change monitoring
- *
- * The ConfigManager centralizes all configuration persistence operations and provides
- * utilities for working with nested configuration structures.
- */
-export class ConfigManager {
-    private _configPath: string;
-    private _changeCallbacks: Array<() => void> = [];
-
-    /**
-     * Creates a new configuration manager for a specific config file
-     *
-     * @param configPath - Path to the configuration file to manage
-     */
-    constructor(configPath: string) {
-        this._configPath = configPath;
-        this._ensureConfigDirectory();
-        this._setupConfigMonitor();
-    }
-
-    /**
-     * Updates a single option in the configuration file
-     *
-     * @param id - Dot-notation path of the option to update
-     * @param value - New value to store for the option
-     */
-    public updateOption(id: string, value: unknown): void {
-        const config = this.readConfig();
-        config[id] = value;
-        this.writeConfig(config);
-    }
-
-    /**
-     * Retrieves a value from a nested object using a path
-     *
-     * @param dataObject - The object to search within
-     * @param path - Dot-notation path or array of path segments
-     * @returns The value at the specified path or undefined if not found
-     */
-    public getNestedValue(dataObject: Record<string, unknown>, path: string | string[]): unknown {
-        const pathArray = typeof path === 'string' ? path.split('.') : path;
-        return this._findValueByPath(dataObject, pathArray);
-    }
-
-    /**
-     * Reads the current configuration from disk
-     *
-     * @returns The parsed configuration object or an empty object if the file doesn't exist
-     */
-    public readConfig(): Record<string, unknown> {
-        const raw = readFile(this._configPath);
-        if (!raw || raw.trim() === '') {
-            return {};
-        }
-        try {
-            return JSON.parse(raw);
-        } catch (error) {
-            this._handleConfigError(error);
-            return {};
-        }
-    }
-
-    /**
-     * Writes configuration to disk
-     *
-     * @param config - The configuration object to serialize and save
-     */
-    public writeConfig(config: Record<string, unknown>): void {
-        writeFile(this._configPath, JSON.stringify(config, null, 2));
-    }
-
-    /**
-     * Registers a callback to be called when the config file changes
-     *
-     * @param callback - Function to execute when config file changes are detected
-     */
-    public onConfigChanged(callback: () => void): void {
-        this._changeCallbacks.push(callback);
-    }
-
-    /**
-     * Recursively navigates an object to find a value at the specified path
-     *
-     * @param currentObject - The object currently being traversed
-     * @param pathKeys - Remaining path segments to navigate
-     * @returns The value at the path or undefined if not found
-     */
-    private _findValueByPath(currentObject: Record<string, unknown>, pathKeys: string[]): unknown {
-        const currentKey = pathKeys.shift();
-        if (currentKey === undefined) {
-            return currentObject;
-        }
-        if (!this._isObject(currentObject)) {
-            return;
-        }
-        const propertyPath = [currentKey, ...pathKeys].join('.');
-        if (propertyPath in currentObject) {
-            return currentObject[propertyPath];
-        }
-        if (!(currentKey in currentObject)) {
-            return;
-        }
-        const currentKeyValue = currentObject[currentKey];
-        if (!this._isObject(currentKeyValue)) {
-            return;
-        }
-        return this._findValueByPath(currentKeyValue, pathKeys);
-    }
-
-    /**
-     * Ensures the directory for the config file exists
-     */
-    private _ensureConfigDirectory(): void {
-        ensureDirectory(this._configPath.split('/').slice(0, -1).join('/'));
-    }
-
-    /**
-     * Sets up file monitoring to detect external changes to the config file
-     */
-    private _setupConfigMonitor(): void {
-        const debounceTimeMs = 200;
-        let lastEventTime = Date.now();
-        monitorFile(this._configPath, () => {
-            if (Date.now() - lastEventTime < debounceTimeMs) {
-                return;
-            }
-            lastEventTime = Date.now();
-            this._notifyConfigChanged();
-        });
-    }
-
-    /**
-     * Notifies all registered callbacks about config file changes
-     */
-    private _notifyConfigChanged(): void {
-        this._changeCallbacks.forEach((callback) => callback());
-    }
-
-    /**
-     * Handles configuration parsing errors with appropriate logging and notification
-     *
-     * @param error - The error that occurred during config parsing
-     */
-    private _handleConfigError(error: unknown): void {
-        console.error(`Failed to load config file: ${error}`);
-        Notify({
-            summary: 'Failed to load config file',
-            body: `${error}`,
-            iconName: icons.ui.warning,
-        });
-        errorHandler(error);
-    }
-
-    /**
-     * Type guard that checks if a value is a non-null object
-     *
-     * @param value - The value to check
-     * @returns True if the value is a non-null object
-     */
-    private _isObject(value: unknown): value is Record<string, unknown> {
-        return typeof value === 'object' && value !== null;
-    }
-}
diff --git a/src/lib/options/configManager/index.ts b/src/lib/options/configManager/index.ts
new file mode 100644
index 0000000..7bdb31b
--- /dev/null
+++ b/src/lib/options/configManager/index.ts
@@ -0,0 +1,271 @@
+import { readFile, writeFile, monitorFile, Gio } from 'astal/file';
+import { ensureDirectory } from '../../session';
+import icons from '../../icons/icons';
+import { errorHandler } from 'src/core/errors/handler';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+
+/**
+ * Manages configuration file operations including reading, writing, and change monitoring
+ *
+ * Flow:
+ * 1. Constructor creates config directory and starts file monitoring
+ * 2. File monitor watches for external changes and triggers callbacks
+ * 3. When writing config, monitor is canceled and recreated after delay
+ * 4. External changes are debounced to prevent rapid callbacks
+ * 5. Callbacks notify all registered listeners when config changes
+ * 6. getNestedValue allows accessing deeply nested config values with dot notation
+ */
+export class ConfigManager {
+    private static readonly _DEBOUNCE_DELAY_MS = 200;
+    private static readonly _MONITOR_RESTART_DELAY_MS = 300;
+
+    private readonly _configPath: string;
+    private readonly _changeCallbacks: Array<() => void> = [];
+    private _fileMonitor: Gio.FileMonitor | null = null;
+    private _lastChangeTime = 0;
+
+    /**
+     * Creates a new configuration manager for a specific config file
+     *
+     * @param configPath - Full path to the configuration JSON file
+     */
+    constructor(configPath: string) {
+        this._configPath = configPath;
+        this._createConfigDirectory();
+        this._startConfigMonitoring();
+    }
+
+    /**
+     * Updates a single option in the configuration file
+     *
+     * @param id - The option key to update
+     * @param value - The new value to set
+     */
+    public updateOption(id: string, value: unknown): void {
+        const config = this.readConfig();
+        config[id] = value;
+        this.writeConfig(config);
+    }
+
+    /**
+     * Retrieves a value from a nested object using a path
+     *
+     * @param dataObject - The object to traverse
+     * @param path - Dot-notation path (e.g., 'theme.colors.primary') or array of keys
+     */
+    public getNestedValue(dataObject: Record<string, unknown>, path: string | string[]): unknown {
+        const pathSegments = Array.isArray(path) ? path : path.split('.');
+        return this._navigateToValue(dataObject, pathSegments);
+    }
+
+    /**
+     * Reads the current configuration from disk
+     */
+    public readConfig(): Record<string, unknown> {
+        const fileContent = readFile(this._configPath);
+
+        if (this._isEmptyOrMissing(fileContent)) {
+            return {};
+        }
+
+        return this._parseConfigSafely(fileContent);
+    }
+
+    /**
+     * Writes configuration to disk
+     *
+     * @param config - The configuration object to save
+     */
+    public writeConfig(config: Record<string, unknown>): void {
+        writeFile(this._configPath, JSON.stringify(config, null, 2));
+    }
+
+    /**
+     * Registers a callback to be called when the config file changes
+     *
+     * @param callback - Function to call when config changes
+     */
+    public onConfigChanged(callback: () => void): void {
+        this._changeCallbacks.push(callback);
+    }
+
+    private _createConfigDirectory(): void {
+        const directoryPath = this._getDirectoryPath();
+        ensureDirectory(directoryPath);
+    }
+
+    /**
+     * Extracts the directory path from the full config file path
+     */
+    private _getDirectoryPath(): string {
+        return this._configPath.split('/').slice(0, -1).join('/');
+    }
+
+    /**
+     * Sets up file monitoring to detect external changes to the config file
+     */
+    private _startConfigMonitoring(): void {
+        this._createFileMonitor();
+        this._overrideWriteConfigForMonitoring();
+    }
+
+    /**
+     * Creates a new file monitor, canceling any existing one first
+     *
+     * We must recreate the monitor after writes because the file system
+     * monitor can become invalid when the file is replaced during write operations
+     */
+    private _createFileMonitor(): void {
+        this._cleanupExistingMonitor();
+
+        this._fileMonitor = monitorFile(this._configPath, () => {
+            this._handleFileChange();
+        });
+    }
+
+    private _cleanupExistingMonitor(): void {
+        if (!this._fileMonitor) return;
+
+        try {
+            this._fileMonitor.cancel();
+        } catch (error) {
+            console.debug('Error canceling file monitor:', error);
+        }
+
+        this._fileMonitor = null;
+    }
+
+    /**
+     * Processes file change events with debouncing to prevent rapid updates
+     */
+    private _handleFileChange(): void {
+        const now = Date.now();
+
+        if (this._shouldIgnoreChange(now)) {
+            return;
+        }
+
+        this._lastChangeTime = now;
+        this._notifyAllCallbacks();
+    }
+
+    private _shouldIgnoreChange(currentTime: number): boolean {
+        return currentTime - this._lastChangeTime < ConfigManager._DEBOUNCE_DELAY_MS;
+    }
+
+    /**
+     * Wraps writeConfig to automatically restart the file monitor after writes
+     *
+     * This ensures we don't miss external changes that occur immediately after
+     * our own writes, which would otherwise be lost when the monitor is invalidated
+     */
+    private _overrideWriteConfigForMonitoring(): void {
+        const originalWriteConfig = this.writeConfig.bind(this);
+
+        this.writeConfig = (config: Record<string, unknown>): void => {
+            originalWriteConfig(config);
+            this._restartMonitoringAfterWrite();
+        };
+    }
+
+    /**
+     * Schedules monitor recreation after a write operation
+     *
+     * The delay ensures the file system has finished processing the write
+     * before we attach a new monitor, preventing race conditions
+     */
+    private _restartMonitoringAfterWrite(): void {
+        setTimeout(() => {
+            this._createFileMonitor();
+        }, ConfigManager._MONITOR_RESTART_DELAY_MS);
+    }
+
+    private _isEmptyOrMissing(content: string): boolean {
+        return !content || content.trim() === '';
+    }
+
+    private _parseConfigSafely(content: string): Record<string, unknown> {
+        try {
+            return JSON.parse(content);
+        } catch (error) {
+            this._handleParsingError(error);
+            return {};
+        }
+    }
+
+    /**
+     * Recursively navigates an object to find a value at the specified path
+     *
+     * @param currentObject - The object to navigate
+     * @param pathSegments - Array of keys representing the path
+     */
+    private _navigateToValue(currentObject: Record<string, unknown>, pathSegments: string[]): unknown {
+        if (pathSegments.length === 0) {
+            return currentObject;
+        }
+
+        if (!this._isValidObject(currentObject)) {
+            return undefined;
+        }
+
+        const [currentKey, ...remainingPath] = pathSegments;
+        const fullPath = [currentKey, ...remainingPath].join('.');
+
+        if (fullPath in currentObject) {
+            return currentObject[fullPath];
+        }
+
+        if (!(currentKey in currentObject)) {
+            return undefined;
+        }
+
+        const nextValue = currentObject[currentKey];
+
+        if (!this._isValidObject(nextValue)) {
+            return undefined;
+        }
+
+        return this._navigateToValue(nextValue, remainingPath);
+    }
+
+    /**
+     * Notifies all registered callbacks about config file changes
+     */
+    private _notifyAllCallbacks(): void {
+        this._changeCallbacks.forEach((callback) => {
+            try {
+                callback();
+            } catch (error) {
+                console.error('Error in config change callback:', error);
+            }
+        });
+    }
+
+    /**
+     * Handles configuration parsing errors with appropriate logging and notification
+     *
+     * @param error - The parsing error that occurred
+     */
+    private _handleParsingError(error: unknown): void {
+        const errorMessage = `Failed to load config file: ${error}`;
+
+        console.error(errorMessage);
+
+        SystemUtilities.notify({
+            summary: 'Configuration Error',
+            body: errorMessage,
+            iconName: icons.ui.warning,
+        });
+
+        errorHandler(error);
+    }
+
+    /**
+     * Type guard that checks if a value is a valid object for navigation
+     *
+     * @param value - The value to check
+     */
+    private _isValidObject(value: unknown): value is Record<string, unknown> {
+        return typeof value === 'object' && value !== null && !Array.isArray(value);
+    }
+}
diff --git a/src/lib/options/index.ts b/src/lib/options/index.ts
index 6bdc682..9692b12 100644
--- a/src/lib/options/index.ts
+++ b/src/lib/options/index.ts
@@ -1,7 +1,7 @@
-import { ConfigManager } from './ConfigManager';
-import { Opt, OptProps } from './Opt';
-import { OptionRegistry } from './OptionRegistry';
-import { MkOptionsResult, OptionsObject } from './options.types';
+import { ConfigManager } from './configManager';
+import { Opt, OptProps } from './opt';
+import { OptionRegistry } from './optionRegistry';
+import { MkOptionsResult, OptionsObject } from './types';
 
 const CONFIG_PATH = CONFIG_FILE;
 
@@ -19,7 +19,8 @@ export function opt<T>(initial: T, props?: OptProps): Opt<T> {
  */
 export function mkOptions<T extends OptionsObject>(optionsObj: T): T & MkOptionsResult {
     const registry = new OptionRegistry(optionsObj, configManager);
+
     return registry.createEnhancedOptions();
 }
 
-export { Opt, OptProps, ConfigManager, OptionRegistry };
+export { Opt };
diff --git a/src/lib/options/Opt.ts b/src/lib/options/opt/index.ts
similarity index 96%
rename from src/lib/options/Opt.ts
rename to src/lib/options/opt/index.ts
index c442e24..122c567 100644
--- a/src/lib/options/Opt.ts
+++ b/src/lib/options/opt/index.ts
@@ -1,19 +1,5 @@
 import Variable from 'astal/variable';
-import { ConfigManager } from './ConfigManager';
-
-/**
- * Properties that can be passed when creating an option
- */
-export interface OptProps {
-    persistent?: boolean;
-}
-
-/**
- * Options for set operations
- */
-export interface WriteOptions {
-    writeDisk?: boolean;
-}
+import { ConfigManager } from '../configManager';
 
 /**
  * A managed application option with persistence capabilities
@@ -96,3 +82,17 @@ export class Opt<T = unknown> extends Variable<T> {
         return currentValue !== initialValue;
     }
 }
+
+/**
+ * Properties that can be passed when creating an option
+ */
+export interface OptProps {
+    persistent?: boolean;
+}
+
+/**
+ * Options for set operations
+ */
+interface WriteOptions {
+    writeDisk?: boolean;
+}
diff --git a/src/lib/options/OptionRegistry.ts b/src/lib/options/optionRegistry/index.ts
similarity index 93%
rename from src/lib/options/OptionRegistry.ts
rename to src/lib/options/optionRegistry/index.ts
index acdf571..d94db2e 100644
--- a/src/lib/options/OptionRegistry.ts
+++ b/src/lib/options/optionRegistry/index.ts
@@ -1,7 +1,7 @@
-import { Opt } from './Opt';
-import { ConfigManager } from './ConfigManager';
-import { MkOptionsResult, OptionsObject } from './options.types';
-import { errorHandler } from '../utils';
+import { Opt } from '../opt';
+import { ConfigManager } from '../configManager';
+import { MkOptionsResult, OptionsObject } from '../types';
+import { errorHandler } from 'src/core/errors/handler';
 
 /**
  * Creates and manages a registry of application options
@@ -74,7 +74,11 @@ export class OptionRegistry<T extends OptionsObject> {
             }
 
             const oldVal = opt.get();
-            if (newVal !== oldVal) {
+
+            const newValueStringified = JSON.stringify(newVal, null, 2);
+            const oldValueStringified = JSON.stringify(oldVal, null, 2);
+
+            if (newValueStringified !== oldValueStringified) {
                 opt.set(newVal, { writeDisk: false });
             }
         }
diff --git a/src/lib/options/options.types.ts b/src/lib/options/types.ts
similarity index 91%
rename from src/lib/options/options.types.ts
rename to src/lib/options/types.ts
index b3ca79b..bafb6c1 100644
--- a/src/lib/options/options.types.ts
+++ b/src/lib/options/types.ts
@@ -1,10 +1,10 @@
 import { Astal } from 'astal/gtk3';
-import { dropdownMenuList } from '../constants/options';
+import { dropdownMenuList } from '../../components/settings/constants';
 import { FontStyle } from 'src/components/settings/shared/inputs/font/utils';
 import { Variable } from 'astal';
-import { defaultColorMap } from '../types/defaults/options.types';
 import { LabelSettingProps } from 'src/components/settings/shared/Label';
-import { Opt } from './Opt';
+import { Opt } from './opt';
+import { defaultColorMap } from 'src/services/matugen/defaults';
 
 export interface MkOptionsResult {
     toArray: () => Opt[];
@@ -12,17 +12,6 @@ export interface MkOptionsResult {
     handler: (optionsToWatch: string[], callback: () => void) => void;
 }
 
-export type RecursiveOptionsObject = {
-    [key: string]:
-        | RecursiveOptionsObject
-        | Opt<string>
-        | Opt<number>
-        | Opt<boolean>
-        | Variable<string>
-        | Variable<number>
-        | Variable<boolean>;
-};
-
 export type OptionsObject = Record<string, unknown>;
 
 export type BarLocation = 'top' | 'bottom';
@@ -62,7 +51,6 @@ export type BarLayouts = {
     [key: string]: BarLayout;
 };
 
-export type Unit = 'imperial' | 'metric';
 export type PowerOptions = 'sleep' | 'reboot' | 'logout' | 'shutdown';
 export type NotificationAnchor =
     | 'top'
@@ -88,7 +76,7 @@ export type ThemeExportData = {
     filePath: string;
     themeOnly: boolean;
 };
-export type InputType =
+type InputType =
     | 'number'
     | 'color'
     | 'float'
@@ -266,12 +254,9 @@ export type MatugenVariations =
     | 'vivid_3';
 
 export type ColorMapKey = keyof typeof defaultColorMap;
-export type ColorMapValue = (typeof defaultColorMap)[ColorMapKey];
 
 export type ScalingPriority = 'gdk' | 'hyprland' | 'both';
 
-export type BluetoothBatteryState = 'paired' | 'connected' | 'always';
-
 export type BorderLocation =
     | 'none'
     | 'top'
diff --git a/src/lib/path/helpers.ts b/src/lib/path/helpers.ts
new file mode 100644
index 0000000..7889588
--- /dev/null
+++ b/src/lib/path/helpers.ts
@@ -0,0 +1,32 @@
+import { GLib } from 'astal';
+
+/**
+ * Normalize a path to the absolute representation of the path
+ * Note: This will only expand '~' if present. Path traversal is not supported
+ * @param path - The path to normalize
+ * @returns The normalized path
+ */
+export function normalizeToAbsolutePath(path: string): string {
+    if (path.charAt(0) === '~') {
+        return path.replace('~', GLib.get_home_dir());
+    }
+
+    return path;
+}
+
+/**
+ * Gets the home directory path
+ * @returns The home directory path
+ */
+export function getHomeDir(): string {
+    return GLib.get_home_dir();
+}
+
+/**
+ * Joins path segments
+ * @param segments - Path segments to join
+ * @returns The joined path
+ */
+export function joinPath(...segments: string[]): string {
+    return segments.join('/').replace(/\/+/g, '/');
+}
diff --git a/src/lib/poller/BashPoller.ts b/src/lib/poller/BashPoller.ts
index 50bbaea..599de96 100644
--- a/src/lib/poller/BashPoller.ts
+++ b/src/lib/poller/BashPoller.ts
@@ -1,7 +1,7 @@
-import { GenericFunction } from '../types/customModules/generic.types';
-import { BarModule } from '../options/options.types';
+import { BarModule } from '../options/types';
 import { Poller } from './Poller';
 import { Binding, execAsync, Variable } from 'astal';
+import { GenericFunction } from './types';
 
 /**
  * A class that manages polling of a variable by executing a bash command at specified intervals.
diff --git a/src/lib/poller/FunctionPoller.ts b/src/lib/poller/FunctionPoller.ts
index 0857560..800a256 100644
--- a/src/lib/poller/FunctionPoller.ts
+++ b/src/lib/poller/FunctionPoller.ts
@@ -1,7 +1,7 @@
-import { GenericFunction } from '../types/customModules/generic.types';
-import { BarModule } from '../options/options.types';
+import { BarModule } from '../options/types';
 import { Poller } from './Poller';
 import { Binding, Variable } from 'astal';
+import { GenericFunction } from './types';
 
 /**
  * A class that manages polling of a variable by executing a generic function at specified intervals.
diff --git a/src/lib/poller/Poller.ts b/src/lib/poller/Poller.ts
index 2998d8e..99165bd 100644
--- a/src/lib/poller/Poller.ts
+++ b/src/lib/poller/Poller.ts
@@ -1,7 +1,7 @@
-import { getLayoutItems } from 'src/lib/utils';
 import { AstalIO, Binding, interval, Variable } from 'astal';
-import options from 'src/options';
-import { BarModule } from '../options/options.types';
+import options from 'src/configuration';
+import { BarModule } from '../options/types';
+import { getLayoutItems } from '../bar/helpers';
 
 const { layouts } = options.bar;
 
diff --git a/src/lib/poller/types.ts b/src/lib/poller/types.ts
new file mode 100644
index 0000000..5523209
--- /dev/null
+++ b/src/lib/poller/types.ts
@@ -0,0 +1,3 @@
+export type GenericFunction<Value, Parameters extends unknown[]> = (
+    ...args: Parameters
+) => Promise<Value> | Value;
diff --git a/src/lib/session.ts b/src/lib/session/index.ts
similarity index 93%
rename from src/lib/session.ts
rename to src/lib/session/index.ts
index b6711c7..53bece3 100644
--- a/src/lib/session.ts
+++ b/src/lib/session/index.ts
@@ -16,7 +16,7 @@ export function ensureDirectory(path: string): void {
     }
 }
 
-export function ensureJsonFile(path: string): void {
+function ensureJsonFile(path: string): void {
     const file = Gio.File.new_for_path(path);
     const parent = file.get_parent();
 
@@ -30,7 +30,7 @@ export function ensureJsonFile(path: string): void {
     }
 }
 
-export function ensureFile(path: string): void {
+function ensureFile(path: string): void {
     const file = Gio.File.new_for_path(path);
     const parent = file.get_parent();
 
diff --git a/src/lib/shared/eventHandlers.ts b/src/lib/shared/eventHandlers/index.ts
similarity index 96%
rename from src/lib/shared/eventHandlers.ts
rename to src/lib/shared/eventHandlers/index.ts
index 5d23482..e394dcb 100644
--- a/src/lib/shared/eventHandlers.ts
+++ b/src/lib/shared/eventHandlers/index.ts
@@ -1,6 +1,6 @@
 import { Gdk } from 'astal/gtk3';
-import { ThrottleFn } from '../types/utils.types';
-import { GtkWidget } from '../types/widget.types';
+import { GtkWidget } from 'src/components/bar/types';
+import { ThrottleFn } from './types';
 
 /**
  * Connects a primary click handler and returns a disconnect function.
diff --git a/src/lib/shared/eventHandlers/types.ts b/src/lib/shared/eventHandlers/types.ts
new file mode 100644
index 0000000..9513349
--- /dev/null
+++ b/src/lib/shared/eventHandlers/types.ts
@@ -0,0 +1,9 @@
+import { Variable } from 'astal';
+import { EventArgs } from 'src/components/bar/utils/input/types';
+
+export type ThrottleFn = (
+    cmd: string,
+    args: EventArgs,
+    fn?: (output: string) => void,
+    postInputUpdated?: Variable<boolean>,
+) => void;
diff --git a/src/lib/shared/hookHandler.ts b/src/lib/shared/hookHandler/index.ts
similarity index 100%
rename from src/lib/shared/hookHandler.ts
rename to src/lib/shared/hookHandler/index.ts
diff --git a/src/lib/shared/media.ts b/src/lib/shared/media.ts
deleted file mode 100644
index ed9e880..0000000
--- a/src/lib/shared/media.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-import AstalMpris from 'gi://AstalMpris?version=0.1';
-
-const mprisService = AstalMpris.get_default();
-
-export const getCurrentPlayer = (
-    activePlayer: AstalMpris.Player = mprisService.get_players()[0],
-): AstalMpris.Player => {
-    const statusOrder = {
-        [AstalMpris.PlaybackStatus.PLAYING]: 1,
-        [AstalMpris.PlaybackStatus.PAUSED]: 2,
-        [AstalMpris.PlaybackStatus.STOPPED]: 3,
-    };
-
-    const mprisPlayers = mprisService.get_players();
-    if (mprisPlayers.length === 0) {
-        return mprisPlayers[0];
-    }
-
-    const isPlaying = mprisPlayers.some(
-        (p: AstalMpris.Player) => p.playbackStatus === AstalMpris.PlaybackStatus.PLAYING,
-    );
-
-    const playerStillExists = mprisPlayers.some((p) => activePlayer.bus_name === p.bus_name);
-
-    const nextPlayerUp = mprisPlayers.sort(
-        (a: AstalMpris.Player, b: AstalMpris.Player) =>
-            statusOrder[a.playbackStatus] - statusOrder[b.playbackStatus],
-    )[0];
-
-    if (isPlaying || !playerStillExists) {
-        return nextPlayerUp;
-    }
-
-    return activePlayer;
-};
diff --git a/src/lib/shared/notifications.ts b/src/lib/shared/notifications.ts
deleted file mode 100644
index d95ab03..0000000
--- a/src/lib/shared/notifications.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import AstalNotifd from 'gi://AstalNotifd?version=0.1';
-
-const normalizeName = (name: string): string => name.toLowerCase().replace(/\s+/g, '_');
-
-export const isNotificationIgnored = (notification: AstalNotifd.Notification, filter: string[]): boolean => {
-    const notificationFilters = new Set(filter.map(normalizeName));
-    const normalizedAppName = normalizeName(notification.app_name);
-
-    return notificationFilters.has(normalizedAppName);
-};
-
-export const filterNotifications = (
-    notifications: AstalNotifd.Notification[],
-    filter: string[],
-): AstalNotifd.Notification[] => {
-    const filteredNotifications = notifications.filter((notif: AstalNotifd.Notification) => {
-        return !isNotificationIgnored(notif, filter);
-    });
-
-    return filteredNotifications;
-};
diff --git a/src/lib/shared/notifications/index.ts b/src/lib/shared/notifications/index.ts
new file mode 100644
index 0000000..64573a3
--- /dev/null
+++ b/src/lib/shared/notifications/index.ts
@@ -0,0 +1,65 @@
+import AstalNotifd from 'gi://AstalNotifd?version=0.1';
+import { Variable } from 'astal';
+import { iconExists } from 'src/lib/icons/helpers';
+import icons from 'src/lib/icons/icons';
+
+const normalizeName = (name: string): string => name.toLowerCase().replace(/\s+/g, '_');
+
+export const removingNotifications = Variable(false);
+
+export const isNotificationIgnored = (
+    notification: AstalNotifd.Notification | null,
+    filter: string[],
+): boolean => {
+    if (!notification) {
+        return false;
+    }
+
+    const notificationFilters = new Set(filter.map(normalizeName));
+    const normalizedAppName = normalizeName(notification.app_name);
+
+    return notificationFilters.has(normalizedAppName);
+};
+
+export const filterNotifications = (
+    notifications: AstalNotifd.Notification[],
+    filter: string[],
+): AstalNotifd.Notification[] => {
+    const filteredNotifications = notifications.filter((notif: AstalNotifd.Notification) => {
+        return !isNotificationIgnored(notif, filter);
+    });
+
+    return filteredNotifications;
+};
+
+export const getNotificationIcon = (app_name: string, app_icon: string, app_entry: string): string => {
+    const icon = icons.fallback.notification;
+
+    if (iconExists(app_name)) {
+        return app_name;
+    } else if (app_name && iconExists(app_name.toLowerCase())) {
+        return app_name.toLowerCase();
+    }
+
+    if (app_icon && iconExists(app_icon)) {
+        return app_icon;
+    }
+
+    if (app_entry && iconExists(app_entry)) {
+        return app_entry;
+    }
+
+    return icon;
+};
+
+export const clearNotifications = async (
+    notifications: AstalNotifd.Notification[],
+    delay: number,
+): Promise<void> => {
+    removingNotifications.set(true);
+    for (const notification of notifications) {
+        notification.dismiss();
+        await new Promise((resolve) => setTimeout(resolve, delay));
+    }
+    removingNotifications.set(false);
+};
diff --git a/src/lib/string/formatters.ts b/src/lib/string/formatters.ts
new file mode 100644
index 0000000..4fdce45
--- /dev/null
+++ b/src/lib/string/formatters.ts
@@ -0,0 +1,92 @@
+/**
+ * Capitalizes the first letter of a string
+ * @param str - The string to capitalize
+ * @returns The input string with the first letter capitalized
+ */
+export function capitalizeFirstLetter(str: string): string {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+/**
+ * Converts a string to camelCase
+ * @param str - The string to convert
+ * @returns The camelCase version of the string
+ */
+export function toCamelCase(str: string): string {
+    return str
+        .replace(/[-_\s]+(.)?/g, (_, char) => (char ? char.toUpperCase() : ''))
+        .replace(/^(.)/, (char) => char.toLowerCase());
+}
+
+/**
+ * Converts a string to kebab-case
+ * @param str - The string to convert
+ * @returns The kebab-case version of the string
+ */
+export function toKebabCase(str: string): string {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1-$2')
+        .replace(/[\s_]+/g, '-')
+        .toLowerCase();
+}
+
+/**
+ * Converts a string to Title Case
+ * @param str - The string to convert
+ * @returns The Title Case version of the string
+ */
+export function toTitleCase(str: string): string {
+    return str
+        .toLowerCase()
+        .replace(/(?:^|\s|-|_)\w/g, (match) => match.toUpperCase())
+        .replace(/[-_]/g, ' ');
+}
+
+/**
+ * Converts a string to snake_case
+ * @param str - The string to convert
+ * @returns The snake_case version of the string
+ */
+export function toSnakeCase(str: string): string {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1_$2')
+        .replace(/[-\s]+/g, '_')
+        .toLowerCase();
+}
+
+/**
+ * Converts a string to PascalCase
+ * @param str - The string to convert
+ * @returns The PascalCase version of the string
+ */
+export function toPascalCase(str: string): string {
+    return str
+        .replace(/[-_\s]+(.)?/g, (_, char) => (char ? char.toUpperCase() : ''))
+        .replace(/^(.)/, (char) => char.toUpperCase());
+}
+
+/**
+ * Converts a string to CONSTANT_CASE
+ * @param str - The string to convert
+ * @returns The CONSTANT_CASE version of the string
+ */
+export function toConstantCase(str: string): string {
+    return str
+        .replace(/([a-z])([A-Z])/g, '$1_$2')
+        .replace(/[-\s]+/g, '_')
+        .toUpperCase();
+}
+
+/**
+ * Converts a string to sentence case
+ * @param str - The string to convert
+ * @returns The sentence case version of the string
+ */
+export function toSentenceCase(str: string): string {
+    return str
+        .toLowerCase()
+        .replace(/[-_]/g, ' ')
+        .replace(/^\w/, (char) => char.toUpperCase())
+        .replace(/\s+/g, ' ')
+        .trim();
+}
diff --git a/src/shared/useTheme.ts b/src/lib/theme/useTheme.ts
similarity index 78%
rename from src/shared/useTheme.ts
rename to src/lib/theme/useTheme.ts
index e2791a0..a209a3d 100644
--- a/src/shared/useTheme.ts
+++ b/src/lib/theme/useTheme.ts
@@ -1,11 +1,12 @@
-import options from '../options';
 import Gio from 'gi://Gio';
-import { bash, errorHandler } from '../lib/utils';
 import {
     filterConfigForThemeOnly,
     loadJsonFile,
     saveConfigToFile,
-} from '../components/settings/shared/FileChooser';
+} from '../../components/settings/shared/FileChooser';
+import options from 'src/configuration';
+import { errorHandler } from 'src/core/errors/handler';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
 
 const { restartCommand } = options.hyprpanel;
 export const hexColorPattern = /^#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$/;
@@ -32,7 +33,7 @@ export function useTheme(filePath: string): void {
         optionsConfig = { ...optionsConfig, ...filteredConfig };
 
         saveConfigToFile(optionsConfig, CONFIG_FILE);
-        bash(restartCommand.get());
+        SystemUtilities.bash(restartCommand.get());
     } catch (error) {
         errorHandler(error);
     }
diff --git a/src/lib/types/customModules/generic.types.ts b/src/lib/types/customModules/generic.types.ts
deleted file mode 100644
index adab4e8..0000000
--- a/src/lib/types/customModules/generic.types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export type GenericFunction<Value, Parameters extends unknown[]> = (...args: Parameters) => Promise<Value> | Value;
-
-export type GenericResourceMetrics = {
-    total: number;
-    used: number;
-    percentage: number;
-};
-
-export type GenericResourceData = GenericResourceMetrics & {
-    free: number;
-};
-
-export type Postfix = 'TiB' | 'GiB' | 'MiB' | 'KiB' | 'B';
-
-export type UpdateHandlers = {
-    disconnectPrimary: () => void;
-    disconnectSecondary: () => void;
-    disconnectMiddle: () => void;
-    disconnectScroll: () => void;
-};
diff --git a/src/lib/types/customModules/network.types.ts b/src/lib/types/customModules/network.types.ts
deleted file mode 100644
index dbef13f..0000000
--- a/src/lib/types/customModules/network.types.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export type NetworkResourceData = {
-    in: string;
-    out: string;
-};
diff --git a/src/lib/types/defaults/bar.types.ts b/src/lib/types/defaults/bar.types.ts
deleted file mode 100644
index 2fef17e..0000000
--- a/src/lib/types/defaults/bar.types.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Astal } from 'astal/gtk3';
-import { NetstatLabelType, ResourceLabelType } from '../bar.types';
-import { BarLocation } from '../../options/options.types';
-
-export const LABEL_TYPES: ResourceLabelType[] = ['used/total', 'used', 'free', 'percentage'];
-
-export const NETWORK_LABEL_TYPES: NetstatLabelType[] = ['full', 'in', 'out'];
-
-type LocationMap = {
-    [key in BarLocation]: Astal.WindowAnchor;
-};
-export const locationMap: LocationMap = {
-    top: Astal.WindowAnchor.TOP,
-    bottom: Astal.WindowAnchor.BOTTOM,
-};
diff --git a/src/lib/types/defaults/netstat.types.ts b/src/lib/types/defaults/netstat.types.ts
deleted file mode 100644
index 8dd9cba..0000000
--- a/src/lib/types/defaults/netstat.types.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { RateUnit } from '../bar.types';
-import { NetworkResourceData } from '../customModules/network.types';
-
-export const getDefaultNetstatData = (dataType: RateUnit): NetworkResourceData => {
-    if (dataType === 'auto') {
-        return { in: `0 Kib/s`, out: `0 Kib/s` };
-    }
-
-    return { in: `0 ${dataType}/s`, out: `0 ${dataType}/s` };
-};
diff --git a/src/lib/types/defaults/weather.types.ts b/src/lib/types/defaults/weather.types.ts
deleted file mode 100644
index cde95e3..0000000
--- a/src/lib/types/defaults/weather.types.ts
+++ /dev/null
@@ -1,1053 +0,0 @@
-export const DEFAULT_WEATHER = {
-    location: {
-        name: 'Tahiti',
-        region: 'Somewhere',
-        country: 'United States of America',
-        lat: 0,
-        lon: 0,
-        tz_id: 'Tahiti',
-        localtime_epoch: 1721981457,
-        localtime: '2024-07-26 1:10',
-    },
-    current: {
-        last_updated_epoch: 1721980800,
-        last_updated: '2024-07-26 01:00',
-        temp_c: 0,
-        temp_f: 0,
-        is_day: 0,
-        condition: {
-            text: 'Clear',
-            icon: '//cdn.weatherapi.com/weather/64x64/night/113.png',
-            code: 1000,
-        },
-        wind_mph: 0,
-        wind_kph: 0,
-        wind_degree: 0,
-        wind_dir: 'NW',
-        pressure_mb: 0,
-        pressure_in: 0,
-        precip_mm: 0.0,
-        precip_in: 0.0,
-        humidity: 0,
-        cloud: 0,
-        feelslike_c: 0,
-        feelslike_f: 0,
-        windchill_c: 0,
-        windchill_f: 0,
-        heatindex_c: 0,
-        heatindex_f: 0,
-        dewpoint_c: 0,
-        dewpoint_f: 0,
-        vis_km: 0,
-        vis_miles: 0,
-        uv: 0,
-        gust_mph: 0,
-        gust_kph: 0,
-    },
-    forecast: {
-        forecastday: [
-            {
-                date: '2024-07-26',
-                date_epoch: 1721952000,
-                day: {
-                    maxtemp_c: 0,
-                    maxtemp_f: 0,
-                    mintemp_c: 0,
-                    mintemp_f: 0,
-                    avgtemp_c: 0,
-                    avgtemp_f: 0,
-                    maxwind_mph: 0,
-                    maxwind_kph: 0,
-                    totalprecip_mm: 0,
-                    totalprecip_in: 0,
-                    totalsnow_cm: 0,
-                    avgvis_km: 0,
-                    avgvis_miles: 0,
-                    avghumidity: 0,
-                    daily_will_it_rain: 0,
-                    daily_chance_of_rain: 0,
-                    daily_will_it_snow: 0,
-                    daily_chance_of_snow: 0,
-                    condition: {
-                        text: 'Sunny',
-                        icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                        code: 1000,
-                    },
-                    uv: 0,
-                },
-                astro: {
-                    sunrise: '06:01 AM',
-                    sunset: '08:10 PM',
-                    moonrise: '11:32 PM',
-                    moonset: '12:01 PM',
-                    moon_phase: 'Waning Gibbous',
-                    moon_illumination: 0,
-                    is_moon_up: 0,
-                    is_sun_up: 0,
-                },
-                hour: [
-                    {
-                        time_epoch: 1721977200,
-                        time: '2024-07-26 00:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 0,
-                        condition: {
-                            text: 'Clear ',
-                            icon: '//cdn.weatherapi.com/weather/64x64/night/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 0,
-                    },
-                    {
-                        time_epoch: 1721980800,
-                        time: '2024-07-26 01:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 0,
-                        condition: {
-                            text: 'Clear ',
-                            icon: '//cdn.weatherapi.com/weather/64x64/night/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 0,
-                    },
-                    {
-                        time_epoch: 1721984400,
-                        time: '2024-07-26 02:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 0,
-                        condition: {
-                            text: 'Clear ',
-                            icon: '//cdn.weatherapi.com/weather/64x64/night/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 0,
-                    },
-                    {
-                        time_epoch: 1721988000,
-                        time: '2024-07-26 03:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 0,
-                        condition: {
-                            text: 'Clear ',
-                            icon: '//cdn.weatherapi.com/weather/64x64/night/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 0,
-                    },
-                    {
-                        time_epoch: 1721991600,
-                        time: '2024-07-26 04:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 0,
-                        condition: {
-                            text: 'Clear ',
-                            icon: '//cdn.weatherapi.com/weather/64x64/night/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 0,
-                    },
-                    {
-                        time_epoch: 1721995200,
-                        time: '2024-07-26 05:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 0,
-                        condition: {
-                            text: 'Clear ',
-                            icon: '//cdn.weatherapi.com/weather/64x64/night/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 0,
-                    },
-                    {
-                        time_epoch: 1721998800,
-                        time: '2024-07-26 06:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 0,
-                        condition: {
-                            text: 'Clear ',
-                            icon: '//cdn.weatherapi.com/weather/64x64/night/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 0,
-                    },
-                    {
-                        time_epoch: 1722002400,
-                        time: '2024-07-26 07:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 7.0,
-                    },
-                    {
-                        time_epoch: 1722006000,
-                        time: '2024-07-26 08:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 7.0,
-                    },
-                    {
-                        time_epoch: 1722009600,
-                        time: '2024-07-26 09:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 8.0,
-                    },
-                    {
-                        time_epoch: 1722013200,
-                        time: '2024-07-26 10:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 8.0,
-                    },
-                    {
-                        time_epoch: 1722016800,
-                        time: '2024-07-26 11:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 9.0,
-                    },
-                    {
-                        time_epoch: 1722020400,
-                        time: '2024-07-26 12:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 9.0,
-                    },
-                    {
-                        time_epoch: 1722024000,
-                        time: '2024-07-26 13:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 9.0,
-                    },
-                    {
-                        time_epoch: 1722027600,
-                        time: '2024-07-26 14:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 10.0,
-                    },
-                    {
-                        time_epoch: 1722031200,
-                        time: '2024-07-26 15:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 10.0,
-                    },
-                    {
-                        time_epoch: 1722034800,
-                        time: '2024-07-26 16:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 10.0,
-                    },
-                    {
-                        time_epoch: 1722038400,
-                        time: '2024-07-26 17:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 10.0,
-                    },
-                    {
-                        time_epoch: 1722042000,
-                        time: '2024-07-26 18:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 9.0,
-                    },
-                    {
-                        time_epoch: 1722045600,
-                        time: '2024-07-26 19:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 9.0,
-                    },
-                    {
-                        time_epoch: 1722049200,
-                        time: '2024-07-26 20:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 1,
-                        condition: {
-                            text: 'Sunny',
-                            icon: '//cdn.weatherapi.com/weather/64x64/day/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 8.0,
-                    },
-                    {
-                        time_epoch: 1722052800,
-                        time: '2024-07-26 21:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 0,
-                        condition: {
-                            text: 'Clear ',
-                            icon: '//cdn.weatherapi.com/weather/64x64/night/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 0,
-                    },
-                    {
-                        time_epoch: 1722056400,
-                        time: '2024-07-26 22:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 0,
-                        condition: {
-                            text: 'Clear ',
-                            icon: '//cdn.weatherapi.com/weather/64x64/night/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 0,
-                    },
-                    {
-                        time_epoch: 1722060000,
-                        time: '2024-07-26 23:00',
-                        temp_c: 0,
-                        temp_f: 0,
-                        is_day: 0,
-                        condition: {
-                            text: 'Clear ',
-                            icon: '//cdn.weatherapi.com/weather/64x64/night/113.png',
-                            code: 1000,
-                        },
-                        wind_mph: 0,
-                        wind_kph: 0,
-                        wind_degree: 0,
-                        wind_dir: 'N',
-                        pressure_mb: 0,
-                        pressure_in: 0,
-                        precip_mm: 0,
-                        precip_in: 0,
-                        snow_cm: 0,
-                        humidity: 0,
-                        cloud: 0,
-                        feelslike_c: 0,
-                        feelslike_f: 0,
-                        windchill_c: 0,
-                        windchill_f: 0,
-                        heatindex_c: 0,
-                        heatindex_f: 0,
-                        dewpoint_c: 0,
-                        dewpoint_f: 0,
-                        will_it_rain: 0,
-                        chance_of_rain: 0,
-                        will_it_snow: 0,
-                        chance_of_snow: 0,
-                        vis_km: 0,
-                        vis_miles: 0,
-                        gust_mph: 0,
-                        gust_kph: 0,
-                        uv: 0,
-                    },
-                ],
-            },
-        ],
-    },
-};
diff --git a/src/lib/types/dropdownmenu.types.ts b/src/lib/types/dropdownmenu.types.ts
deleted file mode 100644
index 987daaf..0000000
--- a/src/lib/types/dropdownmenu.types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Astal, Gtk } from 'astal/gtk3';
-import { Binding } from 'astal';
-import { WindowProps } from 'astal/gtk3/widget';
-
-export interface DropdownMenuProps {
-    name: string;
-    child?: JSX.Element | JSX.Element[] | Binding<JSX.Element | undefined>;
-    layout?: string;
-    transition?: Gtk.RevealerTransitionType | Binding<Gtk.RevealerTransitionType>;
-    exclusivity?: Astal.Exclusivity;
-    fixed?: boolean;
-    onDestroy?: () => void;
-}
diff --git a/src/lib/types/network.types.ts b/src/lib/types/network.types.ts
deleted file mode 100644
index b41152f..0000000
--- a/src/lib/types/network.types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export type AccessPoint = {
-    bssid: string | null;
-    address: string | null;
-    lastSeen: number;
-    ssid: string | null;
-    active: boolean;
-    strength: number;
-    frequency: number;
-    iconName: string | undefined;
-};
-
-export type WifiIcon = '󰤩' | '󰤨' | '󰤪' | '󰤨' | '󰤩' | '󰤮' | '󰤨' | '󰤥' | '󰤢' | '󰤟' | '󰤯';
diff --git a/src/lib/types/utils.types.ts b/src/lib/types/utils.types.ts
deleted file mode 100644
index 39b5298..0000000
--- a/src/lib/types/utils.types.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Variable } from 'astal';
-import { EventArgs } from './widget.types';
-
-export type ThrottleFn = (
-    cmd: string,
-    args: EventArgs,
-    fn?: (output: string) => void,
-    postInputUpdated?: Variable<boolean>,
-) => void;
-
-export type ThrottleFnCallback = ((output: string) => void) | undefined;
-
-export type Primitive = string | number | boolean | symbol | null | undefined | bigint;
diff --git a/src/lib/types/weather.types.ts b/src/lib/types/weather.types.ts
deleted file mode 100644
index 646a7f8..0000000
--- a/src/lib/types/weather.types.ts
+++ /dev/null
@@ -1,118 +0,0 @@
-import { weatherIcons } from 'src/lib/icons/weather';
-
-export type UnitType = 'imperial' | 'metric';
-
-export type Weather = {
-    location: Location;
-    current: Current;
-    forecast: Forecast;
-};
-
-export type Current = {
-    last_updated_epoch?: number;
-    last_updated?: string;
-    temp_c: number;
-    temp_f: number;
-    is_day: number;
-    condition: Condition;
-    wind_mph: number;
-    wind_kph: number;
-    wind_degree: number;
-    wind_dir: string;
-    pressure_mb: number;
-    pressure_in: number;
-    precip_mm: number;
-    precip_in: number;
-    humidity: number;
-    cloud: number;
-    feelslike_c: number;
-    feelslike_f: number;
-    windchill_c: number;
-    windchill_f: number;
-    heatindex_c: number;
-    heatindex_f: number;
-    dewpoint_c: number;
-    dewpoint_f: number;
-    vis_km: number;
-    vis_miles: number;
-    uv: number;
-    gust_mph: number;
-    gust_kph: number;
-    time_epoch?: number;
-    time?: string;
-    snow_cm?: number;
-    will_it_rain?: number;
-    chance_of_rain?: number;
-    will_it_snow?: number;
-    chance_of_snow?: number;
-};
-
-export type Condition = {
-    text: string;
-    icon: string;
-    code: number;
-};
-
-export type Forecast = {
-    forecastday: Forecastday[];
-};
-
-export type Forecastday = {
-    date: string;
-    date_epoch: number;
-    day: Day;
-    astro: Astro;
-    hour: Current[];
-};
-
-export type Astro = {
-    sunrise: string;
-    sunset: string;
-    moonrise: string;
-    moonset: string;
-    moon_phase: string;
-    moon_illumination: number;
-    is_moon_up: number;
-    is_sun_up: number;
-};
-
-export type Day = {
-    maxtemp_c: number;
-    maxtemp_f: number;
-    mintemp_c: number;
-    mintemp_f: number;
-    avgtemp_c: number;
-    avgtemp_f: number;
-    maxwind_mph: number;
-    maxwind_kph: number;
-    totalprecip_mm: number;
-    totalprecip_in: number;
-    totalsnow_cm: number;
-    avgvis_km: number;
-    avgvis_miles: number;
-    avghumidity: number;
-    daily_will_it_rain: number;
-    daily_chance_of_rain: number;
-    daily_will_it_snow: number;
-    daily_chance_of_snow: number;
-    condition: Condition;
-    uv: number;
-};
-
-export type Location = {
-    name: string;
-    region: string;
-    country: string;
-    lat: number;
-    lon: number;
-    tz_id: string;
-    localtime_epoch: number;
-    localtime: string;
-};
-
-export type TemperatureIconColorMap = {
-    [key: number]: string;
-};
-
-export type WeatherIconTitle = keyof typeof weatherIcons;
-export type WeatherIcon = (typeof weatherIcons)[WeatherIconTitle];
diff --git a/src/lib/types/widget.types.ts b/src/lib/types/widget.types.ts
deleted file mode 100644
index 36eec85..0000000
--- a/src/lib/types/widget.types.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { Binding } from 'astal';
-import { Astal, Gdk, Gtk } from 'astal/gtk3';
-
-export type Anchor = 'left' | 'right' | 'top' | 'down';
-export type Transition = 'none' | 'crossfade' | 'slide_right' | 'slide_left' | 'slide_up' | 'slide_down';
-
-export type Layouts =
-    | 'center'
-    | 'top'
-    | 'top-right'
-    | 'top-center'
-    | 'top-left'
-    | 'bottom-left'
-    | 'bottom-center'
-    | 'bottom-right';
-
-export type Attribute = unknown;
-export type Child = Gtk.Widget;
-export type BoxWidget = Gtk.Box;
-export type GdkEvent = Gdk.Event;
-
-export type EventHandler<Self> = (self: Self, event: Gdk.Event) => boolean | unknown;
-export type EventArgs = {
-    clicked: GtkWidget;
-    event: Gdk.Event;
-};
-
-export interface WidgetProps {
-    onPrimaryClick?: (clicked: GtkWidget, event: Gdk.EventButton) => void;
-    onSecondaryClick?: (clicked: GtkWidget, event: Gdk.EventButton) => void;
-    onMiddleClick?: (clicked: GtkWidget, event: Gdk.EventButton) => void;
-    onScrollUp?: (clicked: GtkWidget, event: Gdk.EventScroll) => void;
-    onScrollDown?: (clicked: GtkWidget, event: Gdk.EventScroll) => void;
-    setup?: (self: GtkWidget) => void;
-}
-
-export interface GtkWidgetExtended extends Gtk.Widget {
-    props?: WidgetProps;
-    component?: JSX.Element;
-    primaryClick?: (clicked: GtkWidget, event: Astal.ClickEvent) => void;
-    isVisible?: boolean;
-    boxClass?: string;
-    isVis?: {
-        bind: (key: string) => Binding<boolean>;
-    };
-}
-
-export type GtkWidget = GtkWidgetExtended;
diff --git a/src/lib/types/workspace.types.ts b/src/lib/types/workspace.types.ts
deleted file mode 100644
index 83a6c97..0000000
--- a/src/lib/types/workspace.types.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-export type WorkspaceRule = {
-    workspaceString: string;
-    monitor: string;
-};
-
-export type WorkspaceMonitorMap = {
-    [key: string]: number[];
-};
-
-export type MonitorMap = {
-    [key: number]: string;
-};
-
-export type ApplicationIcons = {
-    [key: string]: string;
-};
-
-export type WorkspaceIcons = {
-    [key: string]: string;
-};
-
-export type AppIconOptions = {
-    iconMap: ApplicationIcons;
-    defaultIcon: string;
-    emptyIcon: string;
-};
-export type ClientAttributes = [className: string, title: string];
-
-export type WorkspaceIconsColored = {
-    [key: string]: {
-        color: string;
-        icon: string;
-    };
-};
-
-export type WorkspaceIconMap = WorkspaceIcons | WorkspaceIconsColored;
diff --git a/src/lib/units/length/index.ts b/src/lib/units/length/index.ts
new file mode 100644
index 0000000..b9e5077
--- /dev/null
+++ b/src/lib/units/length/index.ts
@@ -0,0 +1,196 @@
+import { LengthUnit } from './types';
+
+export class LengthConverter {
+    private readonly _value: number;
+    private readonly _unit: LengthUnit;
+
+    private static readonly _TO_METERS: Record<LengthUnit, number> = {
+        mm: 0.001,
+        cm: 0.01,
+        m: 1,
+        km: 1000,
+        in: 0.0254,
+        ft: 0.3048,
+        mi: 1609.344,
+    };
+
+    private constructor(value: number, unit: LengthUnit) {
+        this._value = value;
+        this._unit = unit;
+    }
+
+    /**
+     * Creates a converter from millimeters
+     * @param value - Value in millimeters
+     */
+    public static fromMm(value: number): LengthConverter {
+        return new LengthConverter(value, 'mm');
+    }
+
+    /**
+     * Creates a converter from centimeters
+     * @param value - Value in centimeters
+     */
+    public static fromCm(value: number): LengthConverter {
+        return new LengthConverter(value, 'cm');
+    }
+
+    /**
+     * Creates a converter from meters
+     * @param value - Value in meters
+     */
+    public static fromMeters(value: number): LengthConverter {
+        return new LengthConverter(value, 'm');
+    }
+
+    /**
+     * Creates a converter from kilometers
+     * @param value - Value in kilometers
+     */
+    public static fromKm(value: number): LengthConverter {
+        return new LengthConverter(value, 'km');
+    }
+
+    /**
+     * Creates a converter from inches
+     * @param value - Value in inches
+     */
+    public static fromInches(value: number): LengthConverter {
+        return new LengthConverter(value, 'in');
+    }
+
+    /**
+     * Creates a converter from feet
+     * @param value - Value in feet
+     */
+    public static fromFeet(value: number): LengthConverter {
+        return new LengthConverter(value, 'ft');
+    }
+
+    /**
+     * Creates a converter from miles
+     * @param value - Value in miles
+     */
+    public static fromMiles(value: number): LengthConverter {
+        return new LengthConverter(value, 'mi');
+    }
+
+    /**
+     * Converts to meters (base unit)
+     */
+    private _toBaseUnit(): number {
+        return this._value * LengthConverter._TO_METERS[this._unit];
+    }
+
+    /**
+     * Converts from meters to target unit
+     */
+    private _fromBaseUnit(targetUnit: LengthUnit): number {
+        return this._toBaseUnit() / LengthConverter._TO_METERS[targetUnit];
+    }
+
+    /**
+     * Converts to millimeters
+     */
+    public toMm(): number {
+        return this._fromBaseUnit('mm');
+    }
+
+    /**
+     * Converts to centimeters
+     */
+    public toCm(): number {
+        return this._fromBaseUnit('cm');
+    }
+
+    /**
+     * Converts to meters
+     */
+    public toMeters(): number {
+        return this._toBaseUnit();
+    }
+
+    /**
+     * Converts to kilometers
+     */
+    public toKm(): number {
+        return this._fromBaseUnit('km');
+    }
+
+    /**
+     * Converts to inches
+     */
+    public toInches(): number {
+        return this._fromBaseUnit('in');
+    }
+
+    /**
+     * Converts to feet
+     */
+    public toFeet(): number {
+        return this._fromBaseUnit('ft');
+    }
+
+    /**
+     * Converts to miles
+     */
+    public toMiles(): number {
+        return this._fromBaseUnit('mi');
+    }
+
+    /**
+     * Formats to millimeters
+     * @param precision - Number of decimal places
+     */
+    public formatMm(precision = 0): string {
+        return `${this.toMm().toFixed(precision)} mm`;
+    }
+
+    /**
+     * Formats to centimeters
+     * @param precision - Number of decimal places
+     */
+    public formatCm(precision = 1): string {
+        return `${this.toCm().toFixed(precision)} cm`;
+    }
+
+    /**
+     * Formats to meters
+     * @param precision - Number of decimal places
+     */
+    public formatMeters(precision = 2): string {
+        return `${this.toMeters().toFixed(precision)} m`;
+    }
+
+    /**
+     * Formats to kilometers
+     * @param precision - Number of decimal places
+     */
+    public formatKm(precision = 1): string {
+        return `${this.toKm().toFixed(precision)} km`;
+    }
+
+    /**
+     * Formats to inches
+     * @param precision - Number of decimal places
+     */
+    public formatInches(precision = 1): string {
+        return `${this.toInches().toFixed(precision)} in`;
+    }
+
+    /**
+     * Formats to feet
+     * @param precision - Number of decimal places
+     */
+    public formatFeet(precision = 0): string {
+        return `${this.toFeet().toFixed(precision)} ft`;
+    }
+
+    /**
+     * Formats to miles
+     * @param precision - Number of decimal places
+     */
+    public formatMiles(precision = 1): string {
+        return `${this.toMiles().toFixed(precision)} mi`;
+    }
+}
diff --git a/src/lib/units/length/types.ts b/src/lib/units/length/types.ts
new file mode 100644
index 0000000..d633bbc
--- /dev/null
+++ b/src/lib/units/length/types.ts
@@ -0,0 +1 @@
+export type LengthUnit = 'mm' | 'cm' | 'm' | 'km' | 'in' | 'ft' | 'mi';
diff --git a/src/lib/units/pressure/index.ts b/src/lib/units/pressure/index.ts
new file mode 100644
index 0000000..d4c2381
--- /dev/null
+++ b/src/lib/units/pressure/index.ts
@@ -0,0 +1,148 @@
+import { PressureUnit } from './types';
+
+export class PressureConverter {
+    private readonly _value: number;
+    private readonly _unit: PressureUnit;
+
+    private static readonly _TO_PA: Record<PressureUnit, number> = {
+        pa: 1,
+        hpa: 100,
+        mb: 100,
+        inHg: 3386.39,
+        psi: 6894.76,
+    };
+
+    private constructor(value: number, unit: PressureUnit) {
+        this._value = value;
+        this._unit = unit;
+    }
+
+    /**
+     * Creates a converter from pascals
+     * @param value - Value in pascals
+     */
+    public static fromPa(value: number): PressureConverter {
+        return new PressureConverter(value, 'pa');
+    }
+
+    /**
+     * Creates a converter from hectopascals
+     * @param value - Value in hectopascals
+     */
+    public static fromHPa(value: number): PressureConverter {
+        return new PressureConverter(value, 'hpa');
+    }
+
+    /**
+     * Creates a converter from millibars
+     * @param value - Value in millibars
+     */
+    public static fromMb(value: number): PressureConverter {
+        return new PressureConverter(value, 'mb');
+    }
+
+    /**
+     * Creates a converter from inches of mercury
+     * @param value - Value in inches of mercury
+     */
+    public static fromInHg(value: number): PressureConverter {
+        return new PressureConverter(value, 'inHg');
+    }
+
+    /**
+     * Creates a converter from pounds per square inch
+     * @param value - Value in PSI
+     */
+    public static fromPsi(value: number): PressureConverter {
+        return new PressureConverter(value, 'psi');
+    }
+
+    /**
+     * Converts to pascals (base unit)
+     */
+    private _toBaseUnit(): number {
+        return this._value * PressureConverter._TO_PA[this._unit];
+    }
+
+    /**
+     * Converts from pascals to target unit
+     */
+    private _fromBaseUnit(targetUnit: PressureUnit): number {
+        return this._toBaseUnit() / PressureConverter._TO_PA[targetUnit];
+    }
+
+    /**
+     * Converts to pascals
+     */
+    public toPa(): number {
+        return this._toBaseUnit();
+    }
+
+    /**
+     * Converts to hectopascals
+     */
+    public toHPa(): number {
+        return this._fromBaseUnit('hpa');
+    }
+
+    /**
+     * Converts to millibars
+     */
+    public toMb(): number {
+        return this._fromBaseUnit('mb');
+    }
+
+    /**
+     * Converts to inches of mercury
+     */
+    public toInHg(): number {
+        return this._fromBaseUnit('inHg');
+    }
+
+    /**
+     * Converts to pounds per square inch
+     */
+    public toPsi(): number {
+        return this._fromBaseUnit('psi');
+    }
+
+    /**
+     * Formats to pascals
+     * @param precision - Number of decimal places
+     */
+    public formatPa(precision = 0): string {
+        return `${this.toPa().toFixed(precision)} Pa`;
+    }
+
+    /**
+     * Formats to hectopascals
+     * @param precision - Number of decimal places
+     */
+    public formatHPa(precision = 0): string {
+        return `${this.toHPa().toFixed(precision)} hPa`;
+    }
+
+    /**
+     * Formats to millibars
+     * @param precision - Number of decimal places
+     */
+    public formatMb(precision = 0): string {
+        return `${this.toMb().toFixed(precision)} mb`;
+    }
+
+    /**
+     * Formats to inches of mercury
+     * @param precision - Number of decimal places
+     */
+    public formatInHg(precision = 2): string {
+        return `${this.toInHg().toFixed(precision)} inHg`;
+    }
+
+    /**
+     * Formats to pounds per square inch
+     * @param precision - Number of decimal places
+     */
+    public formatPsi(precision = 1): string {
+        return `${this.toPsi().toFixed(precision)} PSI`;
+    }
+}
diff --git a/src/lib/units/pressure/types.ts b/src/lib/units/pressure/types.ts
new file mode 100644
index 0000000..d045b7e
--- /dev/null
+++ b/src/lib/units/pressure/types.ts
@@ -0,0 +1 @@
+export type PressureUnit = 'pa' | 'hpa' | 'mb' | 'inHg' | 'psi';
diff --git a/src/lib/units/size/index.ts b/src/lib/units/size/index.ts
new file mode 100644
index 0000000..b1d8157
--- /dev/null
+++ b/src/lib/units/size/index.ts
@@ -0,0 +1,225 @@
+import { SizeUnit } from './types';
+
+export class SizeConverter {
+    private readonly _value: number;
+    private readonly _unit: SizeUnit;
+
+    private constructor(value: number, unit: SizeUnit) {
+        this._value = value;
+        this._unit = unit;
+    }
+
+    /**
+     * Creates a converter from bytes
+     * @param value - Size in bytes
+     */
+    public static fromBytes(value: number): SizeConverter {
+        return new SizeConverter(value, 'bytes');
+    }
+
+    /**
+     * Creates a converter from kibibytes
+     * @param value - Size in KiB
+     */
+    public static fromKiB(value: number): SizeConverter {
+        return new SizeConverter(value, 'kibibytes');
+    }
+
+    /**
+     * Creates a converter from mebibytes
+     * @param value - Size in MiB
+     */
+    public static fromMiB(value: number): SizeConverter {
+        return new SizeConverter(value, 'mebibytes');
+    }
+
+    /**
+     * Creates a converter from gibibytes
+     * @param value - Size in GiB
+     */
+    public static fromGiB(value: number): SizeConverter {
+        return new SizeConverter(value, 'gibibytes');
+    }
+
+    /**
+     * Creates a converter from tebibytes
+     * @param value - Size in TiB
+     */
+    public static fromTiB(value: number): SizeConverter {
+        return new SizeConverter(value, 'tebibytes');
+    }
+
+    /**
+     * Converts the size to bytes (base unit)
+     */
+    private _toBaseUnit(): number {
+        switch (this._unit) {
+            case 'bytes':
+                return this._value;
+            case 'kibibytes':
+                return this._value * 1024;
+            case 'mebibytes':
+                return this._value * 1024 ** 2;
+            case 'gibibytes':
+                return this._value * 1024 ** 3;
+            case 'tebibytes':
+                return this._value * 1024 ** 4;
+        }
+    }
+
+    /**
+     * Converts to bytes
+     * @param precision - Number of decimal places (optional)
+     */
+    public toBytes(precision?: number): number {
+        const value = this._toBaseUnit();
+        return precision !== undefined ? Number(value.toFixed(precision)) : value;
+    }
+
+    /**
+     * Converts to kibibytes
+     * @param precision - Number of decimal places (optional)
+     */
+    public toKiB(precision?: number): number {
+        const bytes = this._toBaseUnit();
+        const value = bytes / 1024;
+        return precision !== undefined ? Number(value.toFixed(precision)) : value;
+    }
+
+    /**
+     * Converts to mebibytes
+     * @param precision - Number of decimal places (optional)
+     */
+    public toMiB(precision?: number): number {
+        const bytes = this._toBaseUnit();
+        const value = bytes / 1024 ** 2;
+        return precision !== undefined ? Number(value.toFixed(precision)) : value;
+    }
+
+    /**
+     * Converts to gibibytes
+     * @param precision - Number of decimal places (optional)
+     */
+    public toGiB(precision?: number): number {
+        const bytes = this._toBaseUnit();
+        const value = bytes / 1024 ** 3;
+        return precision !== undefined ? Number(value.toFixed(precision)) : value;
+    }
+
+    /**
+     * Converts to tebibytes
+     * @param precision - Number of decimal places (optional)
+     */
+    public toTiB(precision?: number): number {
+        const bytes = this._toBaseUnit();
+        const value = bytes / 1024 ** 4;
+        return precision !== undefined ? Number(value.toFixed(precision)) : value;
+    }
+
+    /**
+     * Automatically converts to the most appropriate unit
+     * @param precision - Number of decimal places (optional)
+     */
+    public toAuto(precision?: number): { value: number; unit: SizeUnit } {
+        const bytes = this._toBaseUnit();
+
+        if (bytes >= 1024 ** 4) {
+            return { value: this.toTiB(precision), unit: 'tebibytes' };
+        }
+        if (bytes >= 1024 ** 3) {
+            return { value: this.toGiB(precision), unit: 'gibibytes' };
+        }
+        if (bytes >= 1024 ** 2) {
+            return { value: this.toMiB(precision), unit: 'mebibytes' };
+        }
+        if (bytes >= 1024) {
+            return { value: this.toKiB(precision), unit: 'kibibytes' };
+        }
+
+        return { value: this.toBytes(precision), unit: 'bytes' };
+    }
+
+    /**
+     * Formats the size with a specific unit and precision
+     * @param unit - Target unit
+     * @param precision - Number of decimal places (default: 2)
+     */
+    public format(unit: SizeUnit, precision = 2): string {
+        let value: number;
+        let symbol: string;
+
+        switch (unit) {
+            case 'bytes':
+                value = this.toBytes();
+                symbol = 'B';
+                break;
+            case 'kibibytes':
+                value = this.toKiB();
+                symbol = 'KiB';
+                break;
+            case 'mebibytes':
+                value = this.toMiB();
+                symbol = 'MiB';
+                break;
+            case 'gibibytes':
+                value = this.toGiB();
+                symbol = 'GiB';
+                break;
+            case 'tebibytes':
+                value = this.toTiB();
+                symbol = 'TiB';
+                break;
+        }
+
+        return `${value.toFixed(precision)} ${symbol}`;
+    }
+
+    /**
+     * Formats to bytes
+     * @param precision - Number of decimal places
+     */
+    public formatBytes(precision = 0): string {
+        return this.format('bytes', precision);
+    }
+
+    /**
+     * Formats to kibibytes
+     * @param precision - Number of decimal places
+     */
+    public formatKiB(precision = 2): string {
+        return this.format('kibibytes', precision);
+    }
+
+    /**
+     * Formats to mebibytes
+     * @param precision - Number of decimal places
+     */
+    public formatMiB(precision = 2): string {
+        return this.format('mebibytes', precision);
+    }
+
+    /**
+     * Formats to gibibytes
+     * @param precision - Number of decimal places
+     */
+    public formatGiB(precision = 2): string {
+        return this.format('gibibytes', precision);
+    }
+
+    /**
+     * Formats to tebibytes
+     * @param precision - Number of decimal places
+     */
+    public formatTiB(precision = 2): string {
+        return this.format('tebibytes', precision);
+    }
+
+    /**
+     * Automatically formats to the most appropriate unit
+     * @param precision - Number of decimal places
+     */
+    public formatAuto(precision = 2): string {
+        const { unit } = this.toAuto();
+        return this.format(unit, precision);
+    }
+}
diff --git a/src/lib/units/size/types.ts b/src/lib/units/size/types.ts
new file mode 100644
index 0000000..f81e9f4
--- /dev/null
+++ b/src/lib/units/size/types.ts
@@ -0,0 +1 @@
+export type SizeUnit = 'bytes' | 'kibibytes' | 'mebibytes' | 'gibibytes' | 'tebibytes';
diff --git a/src/lib/units/speed/index.ts b/src/lib/units/speed/index.ts
new file mode 100644
index 0000000..36d6517
--- /dev/null
+++ b/src/lib/units/speed/index.ts
@@ -0,0 +1,131 @@
+import { SpeedUnit } from './types';
+
+export class SpeedConverter {
+    private readonly _value: number;
+    private readonly _unit: SpeedUnit;
+
+    private static readonly _TO_MPS: Record<SpeedUnit, number> = {
+        mps: 1,
+        kph: 0.277778,
+        mph: 0.44704,
+        knots: 0.514444,
+    };
+
+    private static readonly _LABELS: Record<SpeedUnit, string> = {
+        mps: 'm/s',
+        kph: 'km/h',
+        mph: 'mph',
+        knots: 'kn',
+    };
+
+    private constructor(value: number, unit: SpeedUnit) {
+        this._value = value;
+        this._unit = unit;
+    }
+
+    /**
+     * Creates a converter from meters per second
+     * @param value - Value in m/s
+     */
+    public static fromMps(value: number): SpeedConverter {
+        return new SpeedConverter(value, 'mps');
+    }
+
+    /**
+     * Creates a converter from kilometers per hour
+     * @param value - Value in km/h
+     */
+    public static fromKph(value: number): SpeedConverter {
+        return new SpeedConverter(value, 'kph');
+    }
+
+    /**
+     * Creates a converter from miles per hour
+     * @param value - Value in mph
+     */
+    public static fromMph(value: number): SpeedConverter {
+        return new SpeedConverter(value, 'mph');
+    }
+
+    /**
+     * Creates a converter from knots
+     * @param value - Value in knots
+     */
+    public static fromKnots(value: number): SpeedConverter {
+        return new SpeedConverter(value, 'knots');
+    }
+
+    /**
+     * Converts to m/s (base unit)
+     */
+    private _toBaseUnit(): number {
+        return this._value * SpeedConverter._TO_MPS[this._unit];
+    }
+
+    /**
+     * Converts from m/s to target unit
+     */
+    private _fromBaseUnit(targetUnit: SpeedUnit): number {
+        return this._toBaseUnit() / SpeedConverter._TO_MPS[targetUnit];
+    }
+
+    /**
+     * Converts to meters per second
+     */
+    public toMps(): number {
+        return this._toBaseUnit();
+    }
+
+    /**
+     * Converts to kilometers per hour
+     */
+    public toKph(): number {
+        return this._fromBaseUnit('kph');
+    }
+
+    /**
+     * Converts to miles per hour
+     */
+    public toMph(): number {
+        return this._fromBaseUnit('mph');
+    }
+
+    /**
+     * Converts to knots
+     */
+    public toKnots(): number {
+        return this._fromBaseUnit('knots');
+    }
+
+    /**
+     * Formats to meters per second
+     * @param precision - Number of decimal places
+     */
+    public formatMps(precision = 1): string {
+        return `${this.toMps().toFixed(precision)} ${SpeedConverter._LABELS.mps}`;
+    }
+
+    /**
+     * Formats to kilometers per hour
+     * @param precision - Number of decimal places
+     */
+    public formatKph(precision = 0): string {
+        return `${this.toKph().toFixed(precision)} ${SpeedConverter._LABELS.kph}`;
+    }
+
+    /**
+     * Formats to miles per hour
+     * @param precision - Number of decimal places
+     */
+    public formatMph(precision = 0): string {
+        return `${this.toMph().toFixed(precision)} ${SpeedConverter._LABELS.mph}`;
+    }
+
+    /**
+     * Formats to knots
+     * @param precision - Number of decimal places
+     */
+    public formatKnots(precision = 0): string {
+        return `${this.toKnots().toFixed(precision)} ${SpeedConverter._LABELS.knots}`;
+    }
+}
diff --git a/src/lib/units/speed/types.ts b/src/lib/units/speed/types.ts
new file mode 100644
index 0000000..8605fd7
--- /dev/null
+++ b/src/lib/units/speed/types.ts
@@ -0,0 +1 @@
+export type SpeedUnit = 'mps' | 'kph' | 'mph' | 'knots';
diff --git a/src/lib/units/temperature/index.ts b/src/lib/units/temperature/index.ts
new file mode 100644
index 0000000..4903c19
--- /dev/null
+++ b/src/lib/units/temperature/index.ts
@@ -0,0 +1,129 @@
+import { TemperatureUnit } from './types';
+
+export class TemperatureConverter {
+    private readonly _value: number;
+    private readonly _unit: TemperatureUnit;
+
+    private constructor(value: number, unit: TemperatureUnit) {
+        this._value = value;
+        this._unit = unit;
+    }
+
+    /**
+     * Creates a converter from Celsius
+     * @param value - Temperature in Celsius
+     */
+    public static fromCelsius(value: number): TemperatureConverter {
+        return new TemperatureConverter(value, 'celsius');
+    }
+
+    /**
+     * Creates a converter from Fahrenheit
+     * @param value - Temperature in Fahrenheit
+     */
+    public static fromFahrenheit(value: number): TemperatureConverter {
+        return new TemperatureConverter(value, 'fahrenheit');
+    }
+
+    /**
+     * Creates a converter from Kelvin
+     * @param value - Temperature in Kelvin
+     */
+    public static fromKelvin(value: number): TemperatureConverter {
+        return new TemperatureConverter(value, 'kelvin');
+    }
+
+    /**
+     * Converts the temperature to Celsius (base unit)
+     */
+    private _toBaseUnit(): number {
+        switch (this._unit) {
+            case 'celsius':
+                return this._value;
+            case 'fahrenheit':
+                return ((this._value - 32) * 5) / 9;
+            case 'kelvin':
+                return this._value - 273.15;
+        }
+    }
+
+    /**
+     * Converts to Celsius
+     * @param precision - Number of decimal places (optional)
+     */
+    public toCelsius(precision?: number): number {
+        const value = this._toBaseUnit();
+        return precision !== undefined ? Number(value.toFixed(precision)) : value;
+    }
+
+    /**
+     * Converts to Fahrenheit
+     * @param precision - Number of decimal places (optional)
+     */
+    public toFahrenheit(precision?: number): number {
+        const celsius = this._toBaseUnit();
+        const value = (celsius * 9) / 5 + 32;
+        return precision !== undefined ? Number(value.toFixed(precision)) : value;
+    }
+
+    /**
+     * Converts to Kelvin
+     * @param precision - Number of decimal places (optional)
+     */
+    public toKelvin(precision?: number): number {
+        const celsius = this._toBaseUnit();
+        const value = celsius + 273.15;
+        return precision !== undefined ? Number(value.toFixed(precision)) : value;
+    }
+
+    /**
+     * Formats the temperature with a specific unit and precision
+     * @param unit - Target unit
+     * @param precision - Number of decimal places (default: 0)
+     */
+    public format(unit: TemperatureUnit, precision = 0): string {
+        let value: number;
+        let symbol: string;
+
+        switch (unit) {
+            case 'celsius':
+                value = this.toCelsius();
+                symbol = '° C';
+                break;
+            case 'fahrenheit':
+                value = this.toFahrenheit();
+                symbol = '° F';
+                break;
+            case 'kelvin':
+                value = this.toKelvin();
+                symbol = ' K';
+                break;
+        }
+
+        return `${value.toFixed(precision)}${symbol}`;
+    }
+
+    /**
+     * Formats to Celsius
+     * @param precision - Number of decimal places
+     */
+    public formatCelsius(precision = 0): string {
+        return this.format('celsius', precision);
+    }
+
+    /**
+     * Formats to Fahrenheit
+     * @param precision - Number of decimal places
+     */
+    public formatFahrenheit(precision = 0): string {
+        return this.format('fahrenheit', precision);
+    }
+
+    /**
+     * Formats to Kelvin
+     * @param precision - Number of decimal places
+     */
+    public formatKelvin(precision = 0): string {
+        return this.format('kelvin', precision);
+    }
+}
diff --git a/src/lib/units/temperature/types.ts b/src/lib/units/temperature/types.ts
new file mode 100644
index 0000000..a0ffd82
--- /dev/null
+++ b/src/lib/units/temperature/types.ts
@@ -0,0 +1,2 @@
+export type UnitType = 'imperial' | 'metric';
+export type TemperatureUnit = 'celsius' | 'fahrenheit' | 'kelvin';
diff --git a/src/shared/time.ts b/src/lib/units/time/index.ts
similarity index 100%
rename from src/shared/time.ts
rename to src/lib/units/time/index.ts
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
deleted file mode 100644
index 5907d52..0000000
--- a/src/lib/utils.ts
+++ /dev/null
@@ -1,425 +0,0 @@
-import { BarModule, NotificationAnchor, PositionAnchor } from './options/options.types';
-import { OSDAnchor } from './options/options.types';
-import icons from './icons/icons';
-import GLib from 'gi://GLib?version=2.0';
-import GdkPixbuf from 'gi://GdkPixbuf';
-import { NotificationArgs } from './types/notification.types';
-import { namedColors } from './constants/colors';
-import { distroIcons } from './constants/distro';
-import { distro } from './variables';
-import options from '../options';
-import { Astal, Gdk, Gtk } from 'astal/gtk3';
-import { exec, execAsync } from 'astal/process';
-import AstalNotifd from 'gi://AstalNotifd?version=0.1';
-import { Primitive } from './types/utils.types';
-
-const notifdService = AstalNotifd.get_default();
-
-/**
- * Checks if a value is a primitive type.
- *
- * @param value - The value to check
- * @returns True if the value is a primitive (null, undefined, string, number, boolean, symbol, or bigint)
- */
-export function isPrimitive(value: unknown): value is Primitive {
-    return value === null || (typeof value !== 'object' && typeof value !== 'function');
-}
-
-/**
- * Handles errors by throwing a new Error with a message.
- *
- * This function takes an error object and throws a new Error with the provided message or a default message.
- * If the error is an instance of Error, it uses the error's message. Otherwise, it converts the error to a string.
- *
- * @param error The error to handle.
- *
- * @throws Throws a new error with the provided message or a default message.
- */
-export function errorHandler(error: unknown): never {
-    if (error instanceof Error) {
-        throw new Error(error.message);
-    }
-
-    throw new Error(String(error));
-}
-
-/**
- * Looks up an icon by name and size.
- *
- * This function retrieves an icon from the default icon theme based on the provided name and size.
- * If the name is not provided, it returns null.
- *
- * @param name The name of the icon to look up.
- * @param size The size of the icon to look up. Defaults to 16.
- *
- * @returns The Gtk.IconInfo object if the icon is found, or null if not found.
- */
-export function lookUpIcon(name?: string, size = 16): Gtk.IconInfo | null {
-    if (name === undefined) return null;
-
-    return Gtk.IconTheme.get_default().lookup_icon(name, size, Gtk.IconLookupFlags.USE_BUILTIN);
-}
-
-/**
- * Retrieves all unique layout items from the bar options.
- *
- * This function extracts all unique layout items from the bar options defined in the `options` object.
- * It iterates through the layouts for each monitor and collects items from the left, middle, and right sections.
- *
- * @returns An array of unique layout items.
- */
-export function getLayoutItems(): BarModule[] {
-    const { layouts } = options.bar;
-
-    const itemsInLayout: BarModule[] = [];
-
-    Object.keys(layouts.get()).forEach((monitor) => {
-        const leftItems = layouts.get()[monitor].left;
-        const rightItems = layouts.get()[monitor].right;
-        const middleItems = layouts.get()[monitor].middle;
-
-        itemsInLayout.push(...leftItems);
-        itemsInLayout.push(...middleItems);
-        itemsInLayout.push(...rightItems);
-    });
-
-    return [...new Set(itemsInLayout)];
-}
-
-/**
- * Executes a bash command asynchronously.
- *
- * This function runs a bash command using `execAsync` and returns the output as a string.
- * It handles errors by logging them and returning an empty string.
- *
- * @param strings The command to execute as a template string or a regular string.
- * @param values Additional values to interpolate into the command.
- *
- * @returns A promise that resolves to the command output as a string.
- */
-export async function bash(strings: TemplateStringsArray | string, ...values: unknown[]): Promise<string> {
-    const stringsIsString = typeof strings === 'string';
-    const cmd = stringsIsString ? strings : strings.flatMap((str, i) => str + `${values[i] ?? ''}`).join('');
-
-    return execAsync(['bash', '-c', cmd]).catch((err) => {
-        console.error(cmd, err);
-        return '';
-    });
-}
-
-/**
- * Executes a shell command asynchronously.
- *
- * This function runs a shell command using `execAsync` and returns the output as a string.
- * It handles errors by logging them and returning an empty string.
- *
- * @param cmd The command to execute as a string or an array of strings.
- *
- * @returns A promise that resolves to the command output as a string.
- */
-export async function sh(cmd: string | string[]): Promise<string> {
-    return execAsync(cmd).catch((err) => {
-        console.error(typeof cmd === 'string' ? cmd : cmd.join(' '), err);
-        return '';
-    });
-}
-
-/**
- * Generates an array of JSX elements for each monitor.
- *
- * This function creates an array of JSX elements by calling the provided widget function for each monitor.
- * It uses the number of monitors available in the default Gdk display.
- *
- * @param widget A function that takes a monitor index and returns a JSX element.
- *
- * @returns An array of JSX elements, one for each monitor.
- */
-export async function forMonitors(widget: (monitor: number) => Promise<JSX.Element>): Promise<JSX.Element[]> {
-    const n = Gdk.Display.get_default()?.get_n_monitors() ?? 1;
-
-    return Promise.all(range(n, 0).map(widget));
-}
-
-/**
- * Generates an array of numbers within a specified range.
- *
- * This function creates an array of numbers starting from the `start` value up to the specified `length`.
- *
- * @param length The length of the array to generate.
- * @param start The starting value of the range. Defaults to 1.
- *
- * @returns An array of numbers within the specified range.
- */
-export function range(length: number, start = 1): number[] {
-    return Array.from({ length }, (_, i) => i + start);
-}
-
-/**
- * Checks if all specified dependencies are available.
- *
- * This function verifies the presence of the specified binaries using the `which` command.
- * It logs a warning and sends a notification if any dependencies are missing.
- *
- * @param bins The list of binaries to check.
- *
- * @returns True if all dependencies are found, false otherwise.
- */
-export function dependencies(...bins: string[]): boolean {
-    const missing = bins.filter((bin) => {
-        try {
-            exec(`which ${bin}`);
-            return false;
-        } catch (e) {
-            console.error(e);
-            return true;
-        }
-    });
-
-    if (missing.length > 0) {
-        console.warn(Error(`missing dependencies: ${missing.join(', ')}`));
-        Notify({
-            summary: 'Dependencies not found!',
-            body: `The following dependencies are missing: ${missing.join(', ')}`,
-            iconName: icons.ui.warning,
-        });
-    }
-
-    return missing.length === 0;
-}
-
-/**
- * Checks if the provided filepath is a valid image.
- *
- * This function attempts to load an image from the specified filepath using GdkPixbuf.
- * If the image is successfully loaded, it returns true. Otherwise, it logs an error and returns false.
- *
- * Note: Unlike GdkPixbuf, this function will normalize the given path.
- *
- * @param imgFilePath The path to the image file.
- *
- * @returns True if the filepath is a valid image, false otherwise.
- */
-export function isAnImage(imgFilePath: string): boolean {
-    try {
-        GdkPixbuf.Pixbuf.new_from_file(normalizePath(imgFilePath));
-        return true;
-    } catch (error) {
-        console.info(error);
-        return false;
-    }
-}
-
-/**
- * Normalize a path to the absolute representation of the path.
- *
- * Note: This will only expand '~' if present. Path traversal is not supported.
- *
- * @param path The path to normalize.
- *
- * @returns The normalized path.
- */
-export function normalizePath(path: string): string {
-    if (path.charAt(0) == '~') {
-        // Replace will only replace the first match, in this case, the first character
-        return path.replace('~', GLib.get_home_dir());
-    }
-
-    return path;
-}
-
-/**
- * Sends a notification using the `notify-send` command.
- *
- * This function constructs a notification command based on the provided notification arguments and executes it asynchronously.
- * It logs an error if the notification fails to send.
- *
- * @param notifPayload The notification arguments containing summary, body, appName, iconName, urgency, timeout, category, transient, and id.
- */
-export function Notify(notifPayload: NotificationArgs): void {
-    // This line does nothing useful at runtime, but when bundling, it
-    // ensures that notifdService has been instantiated and, as such,
-    // that the notification daemon is active and the notification
-    // will be handled
-    notifdService; // eslint-disable-line @typescript-eslint/no-unused-expressions
-
-    let command = 'notify-send';
-    command += ` "${notifPayload.summary} "`;
-    if (notifPayload.body !== undefined) command += ` "${notifPayload.body}" `;
-    if (notifPayload.appName !== undefined) command += ` -a "${notifPayload.appName}"`;
-    if (notifPayload.iconName !== undefined) command += ` -i "${notifPayload.iconName}"`;
-    if (notifPayload.urgency !== undefined) command += ` -u "${notifPayload.urgency}"`;
-    if (notifPayload.timeout !== undefined) command += ` -t ${notifPayload.timeout}`;
-    if (notifPayload.category !== undefined) command += ` -c "${notifPayload.category}"`;
-    if (notifPayload.transient !== undefined) command += ' -e';
-    if (notifPayload.id !== undefined) command += ` -r ${notifPayload.id}`;
-
-    execAsync(command)
-        .then()
-        .catch((err) => {
-            console.error(`Failed to send notification: ${err.message}`);
-        });
-}
-
-/**
- * Maps a notification or OSD anchor position to an Astal window anchor.
- *
- * This function converts a position anchor from the notification or OSD settings to the corresponding Astal window anchor.
- *
- * @param pos The position anchor to convert.
- *
- * @returns The corresponding Astal window anchor.
- */
-export function getPosition(pos: NotificationAnchor | OSDAnchor): Astal.WindowAnchor {
-    const positionMap: PositionAnchor = {
-        top: Astal.WindowAnchor.TOP,
-        'top right': Astal.WindowAnchor.TOP | Astal.WindowAnchor.RIGHT,
-        'top left': Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT,
-        bottom: Astal.WindowAnchor.BOTTOM,
-        'bottom right': Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.RIGHT,
-        'bottom left': Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.LEFT,
-        right: Astal.WindowAnchor.RIGHT,
-        left: Astal.WindowAnchor.LEFT,
-    };
-
-    return positionMap[pos] ?? Astal.WindowAnchor.TOP;
-}
-
-/**
- * Validates if a string is a valid GJS color.
- *
- * This function checks if the provided string is a valid color in GJS.
- * It supports named colors, hex colors, RGB, and RGBA formats.
- *
- * @param color The color string to validate.
- *
- * @returns True if the color is valid, false otherwise.
- */
-export function isValidGjsColor(color: string): boolean {
-    const colorLower = color.toLowerCase().trim();
-
-    if (namedColors.has(colorLower)) {
-        return true;
-    }
-
-    const hexColorRegex = /^#(?:[a-fA-F0-9]{3,4}|[a-fA-F0-9]{6,8})$/;
-
-    const rgbRegex = /^rgb\(\s*(\d{1,3}%?\s*,\s*){2}\d{1,3}%?\s*\)$/;
-    const rgbaRegex = /^rgba\(\s*(\d{1,3}%?\s*,\s*){3}(0|1|0?\.\d+)\s*\)$/;
-
-    if (hexColorRegex.test(color)) {
-        return true;
-    }
-
-    if (rgbRegex.test(colorLower) || rgbaRegex.test(colorLower)) {
-        return true;
-    }
-
-    return false;
-}
-
-/**
- * Capitalizes the first letter of a string.
- *
- * This function takes a string and returns a new string with the first letter capitalized.
- *
- * @param str The string to capitalize.
- *
- * @returns The input string with the first letter capitalized.
- */
-export function capitalizeFirstLetter(str: string): string {
-    return str.charAt(0).toUpperCase() + str.slice(1);
-}
-
-/**
- * Retrieves the icon for the current distribution.
- *
- * This function returns the icon associated with the current distribution based on the `distroIcons` array.
- * If no icon is found, it returns a default icon.
- *
- * @returns The icon for the current distribution as a string.
- */
-export function getDistroIcon(): string {
-    const icon = distroIcons.find(([id]) => id === distro.id);
-    return icon ? icon[1] : ''; // default icon if not found
-}
-
-/**
- * Checks if an event is a primary click.
- *
- * This function determines if the provided event is a primary click based on the button property.
- *
- * @param event The click event to check.
- *
- * @returns True if the event is a primary click, false otherwise.
- */
-export const isPrimaryClick = (event: Astal.ClickEvent): boolean => event.button === Gdk.BUTTON_PRIMARY;
-
-/**
- * Checks if an event is a secondary click.
- *
- * This function determines if the provided event is a secondary click based on the button property.
- *
- * @param event The click event to check.
- *
- * @returns True if the event is a secondary click, false otherwise.
- */
-export const isSecondaryClick = (event: Astal.ClickEvent): boolean => event.button === Gdk.BUTTON_SECONDARY;
-
-/**
- * Checks if an event is a middle click.
- *
- * This function determines if the provided event is a middle click based on the button property.
- *
- * @param event The click event to check.
- *
- * @returns True if the event is a middle click, false otherwise.
- */
-export const isMiddleClick = (event: Astal.ClickEvent): boolean => event.button === Gdk.BUTTON_MIDDLE;
-
-/**
- * Checks if an event is a scroll up.
- *
- * This function determines if the provided event is a scroll up based on the direction property.
- *
- * @param event The scroll event to check.
- *
- * @returns True if the event is a scroll up, false otherwise.
- */
-export const isScrollUp = (event: Gdk.Event): boolean => {
-    const [directionSuccess, direction] = event.get_scroll_direction();
-    const [deltaSuccess, , yScroll] = event.get_scroll_deltas();
-
-    if (directionSuccess && direction === Gdk.ScrollDirection.UP) {
-        return true;
-    }
-
-    if (deltaSuccess && yScroll < 0) {
-        return true;
-    }
-
-    return false;
-};
-
-/**
- * Checks if an event is a scroll down.
- *
- * This function determines if the provided event is a scroll down based on the direction property.
- *
- * @param event The scroll event to check.
- *
- * @returns True if the event is a scroll down, false otherwise.
- */
-export const isScrollDown = (event: Gdk.Event): boolean => {
-    const [directionSuccess, direction] = event.get_scroll_direction();
-    const [deltaSuccess, , yScroll] = event.get_scroll_deltas();
-
-    if (directionSuccess && direction === Gdk.ScrollDirection.DOWN) {
-        return true;
-    }
-
-    if (deltaSuccess && yScroll > 0) {
-        return true;
-    }
-
-    return false;
-};
diff --git a/src/lib/constants/colors.ts b/src/lib/validation/colorNames.ts
similarity index 100%
rename from src/lib/constants/colors.ts
rename to src/lib/validation/colorNames.ts
diff --git a/src/lib/validation/colors.ts b/src/lib/validation/colors.ts
new file mode 100644
index 0000000..2e98d6c
--- /dev/null
+++ b/src/lib/validation/colors.ts
@@ -0,0 +1,34 @@
+import { namedColors } from './colorNames';
+import { HexColor } from '../options/types';
+
+/**
+ * Validates if a string is a valid GJS color
+ * Supports named colors, hex colors, RGB, and RGBA formats
+ * @param color - The color string to validate
+ * @returns True if the color is valid, false otherwise
+ */
+export function isValidGjsColor(color: string): boolean {
+    const colorLower = color.toLowerCase().trim();
+
+    if (namedColors.has(colorLower)) {
+        return true;
+    }
+
+    const hexColorRegex = /^#(?:[a-fA-F0-9]{3,4}|[a-fA-F0-9]{6,8})$/;
+    const rgbRegex = /^rgb\(\s*(\d{1,3}%?\s*,\s*){2}\d{1,3}%?\s*\)$/;
+    const rgbaRegex = /^rgba\(\s*(\d{1,3}%?\s*,\s*){3}(0|1|0?\.\d+)\s*\)$/;
+
+    if (hexColorRegex.test(color)) {
+        return true;
+    }
+
+    if (rgbRegex.test(colorLower) || rgbaRegex.test(colorLower)) {
+        return true;
+    }
+
+    return false;
+}
+
+export const isHexColor = (val: unknown): val is HexColor => {
+    return typeof val === 'string' && /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(val);
+};
diff --git a/src/lib/validation/images.ts b/src/lib/validation/images.ts
new file mode 100644
index 0000000..d3fb5d8
--- /dev/null
+++ b/src/lib/validation/images.ts
@@ -0,0 +1,18 @@
+import GdkPixbuf from 'gi://GdkPixbuf';
+import { normalizeToAbsolutePath } from '../path/helpers';
+
+/**
+ * Checks if the provided filepath is a valid image
+ * Note: Unlike GdkPixbuf, this function will normalize the given path
+ * @param imgFilePath - The path to the image file
+ * @returns True if the filepath is a valid image, false otherwise
+ */
+export function isAnImage(imgFilePath: string): boolean {
+    try {
+        GdkPixbuf.Pixbuf.new_from_file(normalizeToAbsolutePath(imgFilePath));
+        return true;
+    } catch (error) {
+        console.info(error);
+        return false;
+    }
+}
diff --git a/src/lib/validation/types.ts b/src/lib/validation/types.ts
new file mode 100644
index 0000000..67826f0
--- /dev/null
+++ b/src/lib/validation/types.ts
@@ -0,0 +1,10 @@
+export type Primitive = string | number | boolean | symbol | null | undefined | bigint;
+
+/**
+ * Checks if a value is a primitive type
+ * @param value - The value to check
+ * @returns True if the value is a primitive (null, undefined, string, number, boolean, symbol, or bigint)
+ */
+export function isPrimitive(value: unknown): value is Primitive {
+    return value === null || (typeof value !== 'object' && typeof value !== 'function');
+}
diff --git a/src/lib/variables.ts b/src/lib/variables.ts
deleted file mode 100644
index 6fc1467..0000000
--- a/src/lib/variables.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Variable } from 'astal';
-import GLib from 'gi://GLib';
-
-export const clock = Variable(GLib.DateTime.new_now_local()).poll(
-    1000,
-    (): GLib.DateTime => GLib.DateTime.new_now_local(),
-);
-
-export const uptime = Variable(0).poll(
-    60_00,
-    'cat /proc/uptime',
-    (line): number => Number.parseInt(line.split('.')[0]) / 60,
-);
-
-export const distro = {
-    id: GLib.get_os_info('ID'),
-    logo: GLib.get_os_info('LOGO'),
-};
diff --git a/src/lib/window/positioning.ts b/src/lib/window/positioning.ts
new file mode 100644
index 0000000..0952c2a
--- /dev/null
+++ b/src/lib/window/positioning.ts
@@ -0,0 +1,22 @@
+import { Astal } from 'astal/gtk3';
+import { NotificationAnchor, OSDAnchor, PositionAnchor } from 'src/lib/options/types';
+
+/**
+ * Maps a notification or OSD anchor position to an Astal window anchor
+ * @param pos - The position anchor to convert
+ * @returns The corresponding Astal window anchor
+ */
+export function getPosition(pos: NotificationAnchor | OSDAnchor): Astal.WindowAnchor {
+    const positionMap: PositionAnchor = {
+        top: Astal.WindowAnchor.TOP,
+        'top right': Astal.WindowAnchor.TOP | Astal.WindowAnchor.RIGHT,
+        'top left': Astal.WindowAnchor.TOP | Astal.WindowAnchor.LEFT,
+        bottom: Astal.WindowAnchor.BOTTOM,
+        'bottom right': Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.RIGHT,
+        'bottom left': Astal.WindowAnchor.BOTTOM | Astal.WindowAnchor.LEFT,
+        right: Astal.WindowAnchor.RIGHT,
+        left: Astal.WindowAnchor.LEFT,
+    };
+
+    return positionMap[pos] ?? Astal.WindowAnchor.TOP;
+}
diff --git a/src/shared/utilities.ts b/src/lib/window/visibility.ts
similarity index 52%
rename from src/shared/utilities.ts
rename to src/lib/window/visibility.ts
index 00aa6b2..58049d5 100644
--- a/src/shared/utilities.ts
+++ b/src/lib/window/visibility.ts
@@ -1,7 +1,5 @@
 import { App } from 'astal/gtk3';
-import options from '../options';
 import { Variable } from 'astal';
-import { BarLayouts } from 'src/lib/options/options.types';
 
 export function isWindowVisible(windowName: string): boolean {
     const appWindow = App.get_window(windowName);
@@ -13,15 +11,4 @@ export function isWindowVisible(windowName: string): boolean {
     return appWindow.visible;
 }
 
-export function setLayout(layout: BarLayouts): string {
-    try {
-        const { layouts } = options.bar;
-
-        layouts.set(layout);
-        return 'Successfully updated layout.';
-    } catch (error) {
-        return `Failed to set layout: ${error}`;
-    }
-}
-
 export const idleInhibit = Variable(false);
diff --git a/src/options.ts b/src/options.ts
deleted file mode 100644
index 9132042..0000000
--- a/src/options.ts
+++ /dev/null
@@ -1,1434 +0,0 @@
-import { FontStyle } from './components/settings/shared/inputs/font/utils';
-import { NetstatLabelType, RateUnit, ResourceLabelType } from './lib/types/bar.types';
-import { KbLabelType } from './lib/types/customModules/kbLayout.types';
-import {
-    ActiveWsIndicator,
-    AutoHide,
-    BarButtonStyles,
-    BarLayouts,
-    BarLocation,
-    BorderLocation,
-    NotificationAnchor,
-    OSDAnchor,
-    OSDOrientation,
-    ScalingPriority,
-    WindowLayer,
-} from './lib/options/options.types';
-import { MatugenScheme, MatugenTheme, MatugenVariations } from './lib/options/options.types';
-import { SystrayIconMap } from './lib/types/systray.types';
-import { UnitType } from './lib/types/weather.types';
-import { Transition } from './lib/types/widget.types';
-import { ApplicationIcons, WorkspaceIcons, WorkspaceIconsColored } from './lib/types/workspace.types';
-import { mkOptions, opt } from './lib/options';
-
-// WARN: CHANGING THESE VALUES WILL PREVENT MATUGEN COLOR GENERATION FOR THE CHANGED VALUE
-export const colors = {
-    rosewater: '#f5e0dc',
-    flamingo: '#f2cdcd',
-    pink: '#f5c2e7',
-    mauve: '#cba6f7',
-    red: '#f38ba8',
-    maroon: '#eba0ac',
-    peach: '#fab387',
-    yellow: '#f9e2af',
-    green: '#a6e3a1',
-    teal: '#94e2d5',
-    sky: '#89dceb',
-    sapphire: '#74c7ec',
-    blue: '#89b4fa',
-    lavender: '#b4befe',
-    text: '#cdd6f4',
-    subtext1: '#bac2de',
-    subtext2: '#a6adc8',
-    overlay2: '#9399b2',
-    overlay1: '#7f849c',
-    overlay0: '#6c7086',
-    surface2: '#585b70',
-    surface1: '#45475a',
-    surface0: '#313244',
-    base2: '#242438',
-    base: '#1e1e2e',
-    mantle: '#181825',
-    crust: '#11111b',
-};
-
-// WARN: CHANGING THESE VALUES WILL PREVENT MATUGEN COLOR GENERATION FOR THE CHANGED VALUE
-const secondary_colors = {
-    text: '#cdd6f3',
-    pink: '#f5c2e6',
-    red: '#f38ba7',
-    peach: '#fab386',
-    mantle: '#181824',
-    surface1: '#454759',
-    surface0: '#313243',
-    overlay1: '#7f849b',
-    lavender: '#b4befd',
-    mauve: '#cba6f6',
-    green: '#a6e3a0',
-    sky: '#89dcea',
-    teal: '#94e2d4',
-    yellow: '#f9e2ad',
-    maroon: '#eba0ab',
-    crust: '#11111a',
-    surface2: '#585b69',
-};
-
-const tertiary_colors = {
-    pink: '#f5c2e8',
-    red: '#f38ba9',
-    mantle: '#181826',
-    surface0: '#313245',
-    overlay1: '#7f849d',
-    lavender: '#b4beff',
-    mauve: '#cba6f8',
-    green: '#a6e3a2',
-    sky: '#89dcec',
-    teal: '#94e2d6',
-    yellow: '#f9e2ae',
-    maroon: '#eba0ad',
-    crust: '#11111c',
-    surface2: '#585b71',
-};
-
-const options = mkOptions({
-    theme: {
-        tooltip: {
-            scaling: opt(100),
-        },
-        matugen: opt(false),
-        matugen_settings: {
-            mode: opt<MatugenTheme>('dark'),
-            scheme_type: opt<MatugenScheme>('tonal-spot'),
-            variation: opt<MatugenVariations>('standard_1'),
-            contrast: opt(0.0),
-        },
-        font: {
-            size: opt('1.2rem'),
-            name: opt('Ubuntu Nerd Font'),
-            style: opt<FontStyle>('normal'),
-            label: opt('Ubuntu Nerd Font'),
-            weight: opt(600),
-        },
-        notification: {
-            scaling: opt(100),
-            background: opt(tertiary_colors.mantle),
-            opacity: opt(100),
-            actions: {
-                background: opt(secondary_colors.lavender),
-                text: opt(colors.mantle),
-            },
-            label: opt(colors.lavender),
-            border: opt(secondary_colors.surface0),
-            border_radius: opt('0.6em'),
-            enableShadow: opt(false),
-            shadow: opt('0px 1px 2px 1px #16161e'),
-            shadowMargins: opt('4px 4px'),
-            time: opt(secondary_colors.overlay1),
-            text: opt(colors.text),
-            labelicon: opt(colors.lavender),
-            close_button: {
-                background: opt(secondary_colors.red),
-                label: opt(colors.crust),
-            },
-        },
-        osd: {
-            scaling: opt(100),
-            duration: opt(2500),
-            enable: opt(true),
-            orientation: opt<OSDOrientation>('vertical'),
-            opacity: opt(100),
-            border: {
-                size: opt('0em'),
-                color: opt(colors.lavender),
-            },
-            bar_container: opt(colors.crust),
-            icon_container: opt(tertiary_colors.lavender),
-            bar_color: opt(tertiary_colors.lavender),
-            bar_empty_color: opt(colors.surface0),
-            bar_overflow_color: opt(secondary_colors.red),
-            icon: opt(colors.crust),
-            label: opt(tertiary_colors.lavender),
-            monitor: opt(0),
-            active_monitor: opt(true),
-            radius: opt('0.4em'),
-            margins: opt('7px 7px 7px 7px'),
-            enableShadow: opt(false),
-            shadow: opt('0px 0px 3px 2px #16161e'),
-            location: opt<OSDAnchor>('right'),
-            muted_zero: opt(false),
-        },
-        bar: {
-            scaling: opt(100),
-            floating: opt(false),
-            location: opt<BarLocation>('top'),
-            layer: opt<WindowLayer>('top'),
-            margin_top: opt('0.5em'),
-            opacity: opt(100),
-            enableShadow: opt(false),
-            shadow: opt('0px 1px 2px 1px #16161e'),
-            shadowMargins: opt('0px 0px 4px 0px'),
-            margin_bottom: opt('0em'),
-            margin_sides: opt('0.5em'),
-            border_radius: opt('0.4em'),
-            outer_spacing: opt('1.6em'),
-            label_spacing: opt('0.5em'),
-            transparent: opt(false),
-            dropdownGap: opt('2.9em'),
-            background: opt(colors.crust),
-            border: {
-                location: opt<BorderLocation>('none'),
-                width: opt('0.15em'),
-                color: opt(colors.lavender),
-            },
-            buttons: {
-                style: opt<BarButtonStyles>('default'),
-                enableBorders: opt(false),
-                borderSize: opt('0.1em'),
-                borderColor: opt(colors.lavender),
-                monochrome: opt(false),
-                spacing: opt('0.25em'),
-                padding_x: opt('0.7rem'),
-                padding_y: opt('0.2rem'),
-                y_margins: opt('0.4em'),
-                radius: opt('0.3em'),
-                innerRadiusMultiplier: opt('0.4'),
-                opacity: opt(100),
-                background_opacity: opt(100),
-                background_hover_opacity: opt(100),
-                background: opt(colors.base2),
-                icon_background: opt(colors.base2),
-                hover: opt(colors.surface1),
-                text: opt(colors.lavender),
-                icon: opt(colors.lavender),
-                dashboard: {
-                    background: opt(colors.base2),
-                    enableBorder: opt(false),
-                    border: opt(colors.yellow),
-                    icon: opt(colors.yellow),
-                    spacing: opt('0.5em'),
-                },
-                workspaces: {
-                    background: opt(colors.base2),
-                    enableBorder: opt(false),
-                    smartHighlight: opt(true),
-                    border: opt(colors.pink),
-                    available: opt(colors.sky),
-                    occupied: opt(colors.flamingo),
-                    active: opt(colors.pink),
-                    hover: opt(colors.pink),
-                    numbered_active_highlight_border: opt('0.2em'),
-                    numbered_active_highlight_padding: opt('0.2em'),
-                    numbered_inactive_padding: opt('0.2em'),
-                    numbered_active_highlighted_text_color: opt(colors.mantle),
-                    numbered_active_underline_color: opt(colors.pink),
-                    spacing: opt('0.5em'),
-                    fontSize: opt('1.2em'),
-                    pill: {
-                        radius: opt('1.9rem * 0.6'),
-                        height: opt('4em'),
-                        width: opt('4em'),
-                        active_width: opt('12em'),
-                    },
-                },
-                windowtitle: {
-                    background: opt(colors.base2),
-                    enableBorder: opt(false),
-                    border: opt(colors.pink),
-                    text: opt(colors.pink),
-                    icon: opt(colors.pink),
-                    icon_background: opt(colors.base2),
-                    spacing: opt('0.5em'),
-                },
-                media: {
-                    enableBorder: opt(false),
-                    border: opt(colors.lavender),
-                    background: opt(colors.base2),
-                    text: opt(colors.lavender),
-                    icon: opt(colors.lavender),
-                    icon_background: opt(colors.base2),
-                    spacing: opt('0.5em'),
-                },
-                volume: {
-                    enableBorder: opt(false),
-                    border: opt(colors.maroon),
-                    background: opt(colors.base2),
-                    text: opt(colors.maroon),
-                    icon: opt(colors.maroon),
-                    icon_background: opt(colors.base2),
-                    spacing: opt('0.5em'),
-                },
-                network: {
-                    enableBorder: opt(false),
-                    border: opt(colors.mauve),
-                    background: opt(colors.base2),
-                    text: opt(colors.mauve),
-                    icon: opt(colors.mauve),
-                    icon_background: opt(colors.base2),
-                    spacing: opt('0.5em'),
-                },
-                bluetooth: {
-                    enableBorder: opt(false),
-                    border: opt(colors.sky),
-                    background: opt(colors.base2),
-                    text: opt(colors.sky),
-                    icon: opt(colors.sky),
-                    icon_background: opt(colors.base2),
-                    spacing: opt('0.5em'),
-                },
-                systray: {
-                    enableBorder: opt(false),
-                    customIcon: opt(colors.text),
-                    border: opt(colors.lavender),
-                    background: opt(colors.base2),
-                    spacing: opt('0.5em'),
-                },
-                battery: {
-                    enableBorder: opt(false),
-                    border: opt(colors.yellow),
-                    background: opt(colors.base2),
-                    text: opt(colors.yellow),
-                    icon: opt(colors.yellow),
-                    icon_background: opt(colors.base2),
-                    spacing: opt('0.5em'),
-                },
-                clock: {
-                    enableBorder: opt(false),
-                    border: opt(colors.pink),
-                    background: opt(colors.base2),
-                    text: opt(colors.pink),
-                    icon: opt(colors.pink),
-                    icon_background: opt(colors.base2),
-                    spacing: opt('0.5em'),
-                },
-                notifications: {
-                    enableBorder: opt(false),
-                    border: opt(colors.lavender),
-                    background: opt(colors.base2),
-                    icon: opt(colors.lavender),
-                    icon_background: opt(colors.base2),
-                    total: opt(colors.lavender),
-                    spacing: opt('0.5em'),
-                },
-                separator: {
-                    color: opt(colors.surface2),
-                    margins: opt('0.15em'),
-                    width: opt('0.1em'),
-                },
-                modules: {
-                    microphone: {
-                        enableBorder: opt(false),
-                        border: opt(colors.green),
-                        background: opt(colors.base2),
-                        text: opt(colors.green),
-                        icon: opt(colors.green),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.45em'),
-                    },
-                    ram: {
-                        enableBorder: opt(false),
-                        border: opt(colors.yellow),
-                        background: opt(colors.base2),
-                        text: opt(colors.yellow),
-                        icon: opt(colors.yellow),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.45em'),
-                    },
-                    cpu: {
-                        enableBorder: opt(false),
-                        border: opt(colors.red),
-                        background: opt(colors.base2),
-                        text: opt(colors.red),
-                        icon: opt(colors.red),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.5em'),
-                    },
-                    cpuTemp: {
-                        enableBorder: opt(false),
-                        border: opt(colors.peach),
-                        background: opt(colors.base2),
-                        text: opt(colors.peach),
-                        icon: opt(colors.peach),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.5em'),
-                    },
-                    storage: {
-                        enableBorder: opt(false),
-                        border: opt(colors.pink),
-                        background: opt(colors.base2),
-                        text: opt(colors.pink),
-                        icon: opt(colors.pink),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.45em'),
-                    },
-                    netstat: {
-                        enableBorder: opt(false),
-                        border: opt(colors.green),
-                        background: opt(colors.base2),
-                        text: opt(colors.green),
-                        icon: opt(colors.green),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.45em'),
-                    },
-                    kbLayout: {
-                        enableBorder: opt(false),
-                        border: opt(colors.sky),
-                        background: opt(colors.base2),
-                        text: opt(colors.sky),
-                        icon: opt(colors.sky),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.45em'),
-                    },
-                    updates: {
-                        enableBorder: opt(false),
-                        border: opt(colors.mauve),
-                        background: opt(colors.base2),
-                        text: opt(colors.mauve),
-                        icon: opt(colors.mauve),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.45em'),
-                    },
-                    weather: {
-                        enableBorder: opt(false),
-                        border: opt(colors.lavender),
-                        background: opt(colors.base2),
-                        text: opt(colors.lavender),
-                        icon: opt(colors.lavender),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.45em'),
-                    },
-                    power: {
-                        enableBorder: opt(false),
-                        border: opt(colors.red),
-                        background: opt(colors.base2),
-                        icon: opt(colors.red),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.45em'),
-                    },
-                    submap: {
-                        enableBorder: opt(false),
-                        border: opt(colors.teal),
-                        background: opt(colors.base2),
-                        text: opt(colors.teal),
-                        icon: opt(colors.teal),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.45em'),
-                    },
-                    hyprsunset: {
-                        enableBorder: opt(false),
-                        border: opt(colors.peach),
-                        background: opt(colors.base2),
-                        text: opt(colors.peach),
-                        icon: opt(colors.peach),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.45em'),
-                    },
-                    hypridle: {
-                        enableBorder: opt(false),
-                        border: opt(colors.pink),
-                        background: opt(colors.base2),
-                        text: opt(colors.pink),
-                        icon: opt(colors.pink),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.45em'),
-                    },
-                    cava: {
-                        enableBorder: opt(false),
-                        border: opt(colors.teal),
-                        background: opt(colors.base2),
-                        text: opt(colors.teal),
-                        icon: opt(colors.teal),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.5em'),
-                    },
-                    worldclock: {
-                        enableBorder: opt(false),
-                        border: opt(colors.yellow),
-                        background: opt(colors.base2),
-                        text: opt(colors.yellow),
-                        icon: opt(colors.yellow),
-                        icon_background: opt(colors.base2),
-                        spacing: opt('0.5em'),
-                    },
-                },
-            },
-            menus: {
-                monochrome: opt(false),
-                background: opt(colors.crust),
-                opacity: opt(100),
-                cards: opt(colors.base),
-                card_radius: opt('0.4em'),
-                border: {
-                    size: opt('0.13em'),
-                    radius: opt('0.7em'),
-                    color: opt(colors.surface0),
-                },
-                enableShadow: opt(false),
-                shadow: opt('0px 0px 3px 1px #16161e'),
-                shadowMargins: opt('5px 5px'),
-                text: opt(colors.text),
-                dimtext: opt(colors.surface2),
-                feinttext: opt(colors.surface0),
-                label: opt(colors.lavender),
-                popover: {
-                    scaling: opt(100),
-                    radius: opt('0.4em'),
-                    text: opt(colors.lavender),
-                    background: opt(secondary_colors.mantle),
-                    border: opt(secondary_colors.mantle),
-                },
-                listitems: {
-                    passive: opt(colors.text),
-                    active: opt(secondary_colors.lavender),
-                },
-                icons: {
-                    passive: opt(colors.surface2),
-                    active: opt(colors.lavender),
-                },
-                switch: {
-                    enabled: opt(colors.lavender),
-                    disabled: opt(tertiary_colors.surface0),
-                    puck: opt(secondary_colors.surface1),
-                    radius: opt('0.2em'),
-                    slider_radius: opt('0.2em'),
-                },
-                check_radio_button: {
-                    background: opt(colors.surface1),
-                    active: opt(tertiary_colors.lavender),
-                },
-                buttons: {
-                    default: opt(colors.lavender),
-                    active: opt(secondary_colors.pink),
-                    disabled: opt(tertiary_colors.surface2),
-                    text: opt(secondary_colors.mantle),
-                    radius: opt('0.4em'),
-                },
-                iconbuttons: {
-                    passive: opt(secondary_colors.text),
-                    active: opt(tertiary_colors.lavender),
-                },
-                progressbar: {
-                    foreground: opt(colors.lavender),
-                    background: opt(colors.surface1),
-                    radius: opt('0.3rem'),
-                },
-                slider: {
-                    primary: opt(colors.lavender),
-                    background: opt(tertiary_colors.surface2),
-                    backgroundhover: opt(colors.surface1),
-                    puck: opt(colors.overlay0),
-                    slider_radius: opt('0.3rem'),
-                    progress_radius: opt('0.3rem'),
-                },
-                scroller: {
-                    radius: opt('0.7em'),
-                    width: opt('0.25em'),
-                },
-                dropdownmenu: {
-                    background: opt(colors.crust),
-                    text: opt(colors.text),
-                    divider: opt(colors.base),
-                },
-                tooltip: {
-                    radius: opt('0.3em'),
-                    background: opt(colors.crust),
-                    text: opt(tertiary_colors.lavender),
-                },
-                menu: {
-                    media: {
-                        scaling: opt(100),
-                        song: opt(tertiary_colors.lavender),
-                        artist: opt(tertiary_colors.teal),
-                        album: opt(tertiary_colors.pink),
-                        timestamp: opt(colors.text),
-                        background: {
-                            color: opt(colors.crust),
-                        },
-                        card: {
-                            color: opt(colors.base),
-                            tint: opt(85),
-                        },
-                        border: {
-                            color: opt(colors.surface0),
-                        },
-                        buttons: {
-                            inactive: opt(colors.surface2),
-                            enabled: opt(secondary_colors.teal),
-                            background: opt(tertiary_colors.lavender),
-                            text: opt(colors.crust),
-                        },
-                        slider: {
-                            primary: opt(colors.pink),
-                            background: opt(tertiary_colors.surface2),
-                            backgroundhover: opt(colors.surface1),
-                            puck: opt(colors.overlay0),
-                        },
-                    },
-                    volume: {
-                        scaling: opt(100),
-                        card: {
-                            color: opt(colors.base),
-                        },
-                        background: {
-                            color: opt(colors.crust),
-                        },
-                        border: {
-                            color: opt(colors.surface0),
-                        },
-                        label: {
-                            color: opt(colors.maroon),
-                        },
-                        text: opt(colors.text),
-                        scroller: {
-                            color: opt(colors.maroon),
-                        },
-                        listitems: {
-                            passive: opt(colors.text),
-                            active: opt(secondary_colors.maroon),
-                        },
-                        iconbutton: {
-                            passive: opt(colors.text),
-                            active: opt(colors.maroon),
-                        },
-                        icons: {
-                            passive: opt(colors.overlay2),
-                            active: opt(colors.maroon),
-                        },
-                        audio_slider: {
-                            primary: opt(colors.maroon),
-                            background: opt(tertiary_colors.surface2),
-                            backgroundhover: opt(colors.surface1),
-                            puck: opt(colors.surface2),
-                        },
-                        input_slider: {
-                            primary: opt(colors.maroon),
-                            background: opt(tertiary_colors.surface2),
-                            backgroundhover: opt(colors.surface1),
-                            puck: opt(colors.surface2),
-                        },
-                    },
-                    network: {
-                        scaling: opt(100),
-                        card: {
-                            color: opt(colors.base),
-                        },
-                        background: {
-                            color: opt(colors.crust),
-                        },
-                        border: {
-                            color: opt(colors.surface0),
-                        },
-                        label: {
-                            color: opt(colors.mauve),
-                        },
-                        scroller: {
-                            color: opt(colors.mauve),
-                        },
-                        text: opt(colors.text),
-                        status: {
-                            color: opt(colors.overlay0),
-                        },
-                        listitems: {
-                            passive: opt(colors.text),
-                            active: opt(secondary_colors.mauve),
-                        },
-                        icons: {
-                            passive: opt(colors.overlay2),
-                            active: opt(colors.mauve),
-                        },
-                        iconbuttons: {
-                            passive: opt(colors.text),
-                            active: opt(colors.mauve),
-                        },
-                        switch: {
-                            enabled: opt(colors.mauve),
-                            disabled: opt(tertiary_colors.surface0),
-                            puck: opt(secondary_colors.surface1),
-                        },
-                    },
-                    bluetooth: {
-                        scaling: opt(100),
-                        card: {
-                            color: opt(colors.base),
-                        },
-                        background: {
-                            color: opt(colors.crust),
-                        },
-                        border: {
-                            color: opt(colors.surface0),
-                        },
-                        label: {
-                            color: opt(colors.sky),
-                        },
-                        scroller: {
-                            color: opt(colors.sky),
-                        },
-                        text: opt(colors.text),
-                        status: opt(colors.overlay0),
-                        switch_divider: opt(colors.surface1),
-                        switch: {
-                            enabled: opt(colors.sky),
-                            disabled: opt(tertiary_colors.surface0),
-                            puck: opt(secondary_colors.surface1),
-                        },
-                        listitems: {
-                            passive: opt(colors.text),
-                            active: opt(secondary_colors.sky),
-                        },
-                        icons: {
-                            passive: opt(colors.overlay2),
-                            active: opt(colors.sky),
-                        },
-                        iconbutton: {
-                            passive: opt(colors.text),
-                            active: opt(colors.sky),
-                        },
-                    },
-                    systray: {
-                        dropdownmenu: {
-                            background: opt(colors.crust),
-                            text: opt(colors.text),
-                            divider: opt(colors.base),
-                        },
-                    },
-                    battery: {
-                        scaling: opt(100),
-                        card: {
-                            color: opt(colors.base),
-                        },
-                        background: {
-                            color: opt(colors.crust),
-                        },
-                        border: {
-                            color: opt(colors.surface0),
-                        },
-                        label: {
-                            color: opt(colors.yellow),
-                        },
-                        text: opt(colors.text),
-                        listitems: {
-                            passive: opt(secondary_colors.text),
-                            active: opt(colors.yellow),
-                        },
-                        icons: {
-                            passive: opt(colors.overlay2),
-                            active: opt(colors.yellow),
-                        },
-                        slider: {
-                            primary: opt(colors.yellow),
-                            background: opt(tertiary_colors.surface2),
-                            backgroundhover: opt(colors.surface1),
-                            puck: opt(colors.overlay0),
-                        },
-                    },
-                    clock: {
-                        scaling: opt(100),
-                        card: {
-                            color: opt(colors.base),
-                        },
-                        background: {
-                            color: opt(colors.crust),
-                        },
-                        border: {
-                            color: opt(colors.surface0),
-                        },
-                        text: opt(colors.text),
-                        time: {
-                            time: opt(colors.pink),
-                            timeperiod: opt(colors.teal),
-                        },
-                        calendar: {
-                            yearmonth: opt(colors.teal),
-                            weekdays: opt(colors.pink),
-                            paginator: opt(secondary_colors.pink),
-                            currentday: opt(colors.pink),
-                            days: opt(colors.text),
-                            contextdays: opt(colors.surface2),
-                        },
-                        weather: {
-                            icon: opt(colors.pink),
-                            temperature: opt(colors.text),
-                            status: opt(colors.teal),
-                            stats: opt(colors.pink),
-                            thermometer: {
-                                extremelyhot: opt(colors.red),
-                                hot: opt(colors.peach),
-                                moderate: opt(colors.lavender),
-                                cold: opt(colors.blue),
-                                extremelycold: opt(colors.sky),
-                            },
-                            hourly: {
-                                time: opt(colors.pink),
-                                icon: opt(colors.pink),
-                                temperature: opt(colors.pink),
-                            },
-                        },
-                    },
-                    dashboard: {
-                        scaling: opt(100),
-                        confirmation_scaling: opt(100),
-                        card: {
-                            color: opt(colors.base),
-                        },
-                        background: {
-                            color: opt(colors.crust),
-                        },
-                        border: {
-                            color: opt(colors.surface0),
-                        },
-                        profile: {
-                            name: opt(colors.pink),
-                            size: opt('8.5em'),
-                            radius: opt('0.4em'),
-                        },
-                        powermenu: {
-                            shutdown: opt(colors.red),
-                            restart: opt(colors.peach),
-                            logout: opt(colors.green),
-                            sleep: opt(colors.sky),
-                            confirmation: {
-                                card: opt(colors.base),
-                                background: opt(colors.crust),
-                                border: opt(colors.surface0),
-                                label: opt(colors.lavender),
-                                body: opt(colors.text),
-                                confirm: opt(colors.green),
-                                deny: opt(colors.red),
-                                button_text: opt(secondary_colors.crust),
-                            },
-                        },
-                        shortcuts: {
-                            background: opt(colors.lavender),
-                            text: opt(secondary_colors.mantle),
-                            recording: opt(colors.green),
-                        },
-                        controls: {
-                            disabled: opt(colors.surface2),
-                            wifi: {
-                                background: opt(colors.mauve),
-                                text: opt(secondary_colors.mantle),
-                            },
-                            bluetooth: {
-                                background: opt(colors.sky),
-                                text: opt(secondary_colors.mantle),
-                            },
-                            notifications: {
-                                background: opt(colors.yellow),
-                                text: opt(secondary_colors.mantle),
-                            },
-                            volume: {
-                                background: opt(colors.maroon),
-                                text: opt(secondary_colors.mantle),
-                            },
-                            input: {
-                                background: opt(colors.pink),
-                                text: opt(secondary_colors.mantle),
-                            },
-                        },
-                        directories: {
-                            left: {
-                                top: {
-                                    color: opt(colors.pink),
-                                },
-                                middle: {
-                                    color: opt(colors.yellow),
-                                },
-                                bottom: {
-                                    color: opt(colors.maroon),
-                                },
-                            },
-                            right: {
-                                top: {
-                                    color: opt(colors.teal),
-                                },
-                                middle: {
-                                    color: opt(colors.mauve),
-                                },
-                                bottom: {
-                                    color: opt(colors.lavender),
-                                },
-                            },
-                        },
-                        monitors: {
-                            bar_background: opt(colors.surface1),
-                            cpu: {
-                                icon: opt(colors.maroon),
-                                bar: opt(tertiary_colors.maroon),
-                                label: opt(colors.maroon),
-                            },
-                            ram: {
-                                icon: opt(colors.yellow),
-                                bar: opt(tertiary_colors.yellow),
-                                label: opt(colors.yellow),
-                            },
-                            gpu: {
-                                icon: opt(colors.green),
-                                bar: opt(tertiary_colors.green),
-                                label: opt(colors.green),
-                            },
-                            disk: {
-                                icon: opt(colors.pink),
-                                bar: opt(tertiary_colors.pink),
-                                label: opt(colors.pink),
-                            },
-                        },
-                    },
-                    power: {
-                        scaling: opt(90),
-                        radius: opt('0.4em'),
-                        background: {
-                            color: opt(colors.crust),
-                        },
-                        border: {
-                            color: opt(colors.surface0),
-                        },
-                        buttons: {
-                            shutdown: {
-                                background: opt(colors.base),
-                                icon_background: opt(secondary_colors.red),
-                                text: opt(colors.red),
-                                icon: opt(secondary_colors.mantle),
-                            },
-                            restart: {
-                                background: opt(colors.base),
-                                icon_background: opt(secondary_colors.peach),
-                                text: opt(colors.peach),
-                                icon: opt(secondary_colors.mantle),
-                            },
-                            logout: {
-                                background: opt(colors.base),
-                                icon_background: opt(secondary_colors.green),
-                                text: opt(colors.green),
-                                icon: opt(secondary_colors.mantle),
-                            },
-                            sleep: {
-                                background: opt(colors.base),
-                                icon_background: opt(secondary_colors.sky),
-                                text: opt(colors.sky),
-                                icon: opt(secondary_colors.mantle),
-                            },
-                        },
-                    },
-                    notifications: {
-                        scaling: opt(100),
-                        height: opt('58em'),
-                        label: opt(colors.lavender),
-                        no_notifications_label: opt(colors.surface0),
-                        background: opt(colors.crust),
-                        card: opt(colors.base),
-                        border: opt(colors.surface0),
-                        switch_divider: opt(colors.surface1),
-                        clear: opt(colors.red),
-                        switch: {
-                            enabled: opt(colors.lavender),
-                            disabled: opt(tertiary_colors.surface0),
-                            puck: opt(secondary_colors.surface1),
-                        },
-                        pager: {
-                            show: opt(true),
-                            background: opt(colors.crust),
-                            button: opt(colors.lavender),
-                            label: opt(colors.overlay2),
-                        },
-                        scrollbar: {
-                            color: opt(colors.lavender),
-                            width: opt('0.35em'),
-                            radius: opt('0.2em'),
-                        },
-                    },
-                },
-            },
-        },
-    },
-
-    bar: {
-        scrollSpeed: opt(5),
-        autoHide: opt<AutoHide>('never'),
-        layouts: opt<BarLayouts>({
-            '1': {
-                left: ['dashboard', 'workspaces', 'windowtitle'],
-                middle: ['media'],
-                right: ['volume', 'clock', 'notifications'],
-            },
-            '2': {
-                left: ['dashboard', 'workspaces', 'windowtitle'],
-                middle: ['media'],
-                right: ['volume', 'clock', 'notifications'],
-            },
-            '0': {
-                left: ['dashboard', 'workspaces', 'windowtitle'],
-                middle: ['media'],
-                right: ['volume', 'network', 'bluetooth', 'battery', 'systray', 'clock', 'notifications'],
-            },
-        }),
-        launcher: {
-            icon: opt('󰣇'),
-            autoDetectIcon: opt(false),
-            rightClick: opt(''),
-            middleClick: opt(''),
-            scrollUp: opt(''),
-            scrollDown: opt(''),
-        },
-        windowtitle: {
-            custom_title: opt(true),
-            title_map: opt([]),
-            class_name: opt(true),
-            label: opt(true),
-            icon: opt(true),
-            truncation: opt(true),
-            truncation_size: opt(50),
-            leftClick: opt(''),
-            rightClick: opt(''),
-            middleClick: opt(''),
-            scrollUp: opt(''),
-            scrollDown: opt(''),
-        },
-        workspaces: {
-            show_icons: opt(false),
-            showAllActive: opt(true),
-            ignored: opt(''),
-            show_numbered: opt(false),
-            showWsIcons: opt(false),
-            showApplicationIcons: opt(false),
-            applicationIconOncePerWorkspace: opt(true),
-            applicationIconMap: opt<ApplicationIcons>({}),
-            applicationIconFallback: opt('󰣆'),
-            applicationIconEmptyWorkspace: opt(''),
-            numbered_active_indicator: opt<ActiveWsIndicator>('underline'),
-            icons: {
-                available: opt(''),
-                active: opt(''),
-                occupied: opt(''),
-            },
-            workspaceIconMap: opt<WorkspaceIcons | WorkspaceIconsColored>({}),
-            workspaces: opt(5),
-            spacing: opt(1),
-            monitorSpecific: opt(true),
-            workspaceMask: opt(false),
-            reverse_scroll: opt(false),
-            scroll_speed: opt(5),
-        },
-        volume: {
-            label: opt(true),
-            rightClick: opt(''),
-            middleClick: opt(''),
-            scrollUp: opt('hyprpanel vol +5'),
-            scrollDown: opt('hyprpanel vol -5'),
-        },
-        network: {
-            truncation: opt(true),
-            showWifiInfo: opt(false),
-            truncation_size: opt(7),
-            label: opt(true),
-            rightClick: opt(''),
-            middleClick: opt(''),
-            scrollUp: opt(''),
-            scrollDown: opt(''),
-        },
-        bluetooth: {
-            label: opt(true),
-            rightClick: opt(''),
-            middleClick: opt(''),
-            scrollUp: opt(''),
-            scrollDown: opt(''),
-        },
-        battery: {
-            label: opt(true),
-            hideLabelWhenFull: opt(false),
-            rightClick: opt(''),
-            middleClick: opt(''),
-            scrollUp: opt(''),
-            scrollDown: opt(''),
-        },
-        systray: {
-            ignore: opt<string[]>([]),
-            customIcons: opt<SystrayIconMap>({}),
-        },
-        clock: {
-            icon: opt('󰸗'),
-            showIcon: opt(true),
-            showTime: opt(true),
-            format: opt('%a %b %d  %I:%M:%S %p'),
-            rightClick: opt(''),
-            middleClick: opt(''),
-            scrollUp: opt(''),
-            scrollDown: opt(''),
-        },
-        media: {
-            format: opt('{artist: - }{title}'),
-            truncation: opt(true),
-            show_label: opt(true),
-            truncation_size: opt(30),
-            show_active_only: opt(false),
-            rightClick: opt(''),
-            middleClick: opt(''),
-            scrollUp: opt(''),
-            scrollDown: opt(''),
-        },
-        notifications: {
-            show_total: opt(false),
-            hideCountWhenZero: opt(false),
-            rightClick: opt(''),
-            middleClick: opt(''),
-            scrollUp: opt(''),
-            scrollDown: opt(''),
-        },
-        customModules: {
-            scrollSpeed: opt(5),
-            microphone: {
-                label: opt(true),
-                mutedIcon: opt('󰍭'),
-                unmutedIcon: opt('󰍬'),
-                leftClick: opt('menu:audio'),
-                rightClick: opt(''),
-                middleClick: opt(''),
-                scrollUp: opt(''),
-                scrollDown: opt(''),
-            },
-            ram: {
-                icon: opt(''),
-                label: opt(true),
-                labelType: opt<ResourceLabelType>('percentage'),
-                round: opt(true),
-                pollingInterval: opt(2000),
-                leftClick: opt(''),
-                rightClick: opt(''),
-                middleClick: opt(''),
-            },
-            cpu: {
-                icon: opt(''),
-                label: opt(true),
-                round: opt(true),
-                pollingInterval: opt(2000),
-                leftClick: opt(''),
-                rightClick: opt(''),
-                middleClick: opt(''),
-                scrollUp: opt(''),
-                scrollDown: opt(''),
-            },
-            cpuTemp: {
-                icon: opt(''),
-                sensor: opt(''),
-                label: opt(true),
-                round: opt(true),
-                showUnit: opt(true),
-                unit: opt<UnitType>('metric'),
-                pollingInterval: opt(2000),
-                leftClick: opt(''),
-                rightClick: opt(''),
-                middleClick: opt(''),
-                scrollUp: opt(''),
-                scrollDown: opt(''),
-            },
-            storage: {
-                label: opt(true),
-                icon: opt('󰋊'),
-                round: opt(false),
-                labelType: opt<ResourceLabelType>('percentage'),
-                pollingInterval: opt(2000),
-                leftClick: opt(''),
-                rightClick: opt(''),
-                middleClick: opt(''),
-            },
-            netstat: {
-                label: opt(true),
-                networkInterface: opt(''),
-                dynamicIcon: opt(false),
-                icon: opt('󰖟'),
-                networkInLabel: opt('↓'),
-                networkOutLabel: opt('↑'),
-                round: opt(true),
-                labelType: opt<NetstatLabelType>('full'),
-                rateUnit: opt<RateUnit>('auto'),
-                pollingInterval: opt(2000),
-                leftClick: opt(''),
-                rightClick: opt(''),
-                middleClick: opt(''),
-            },
-            kbLayout: {
-                label: opt(true),
-                labelType: opt<KbLabelType>('code'),
-                icon: opt('󰌌'),
-                leftClick: opt(''),
-                rightClick: opt(''),
-                middleClick: opt(''),
-                scrollUp: opt(''),
-                scrollDown: opt(''),
-            },
-            updates: {
-                updateCommand: opt(`${SRC_DIR}/scripts/checkUpdates.sh -arch`),
-                updateTooltipCommand: opt(`${SRC_DIR}/scripts/checkUpdates.sh -arch -tooltip`),
-                extendedTooltip: opt(false),
-                label: opt(true),
-                padZero: opt(true),
-                autoHide: opt(false),
-                icon: {
-                    pending: opt('󰏗'),
-                    updated: opt('󰏖'),
-                },
-                pollingInterval: opt(1000 * 60 * 60 * 6),
-                leftClick: opt(`$TERMINAL -e ${SRC_DIR}/scripts/runUpdates.sh -arch`),
-                rightClick: opt(''),
-                middleClick: opt(''),
-                scrollUp: opt(''),
-                scrollDown: opt(''),
-            },
-            submap: {
-                label: opt(true),
-                showSubmapName: opt(true),
-                enabledIcon: opt('󰌐'),
-                disabledIcon: opt('󰌌'),
-                enabledText: opt('Submap On'),
-                disabledText: opt('Submap off'),
-                leftClick: opt(''),
-                rightClick: opt(''),
-                middleClick: opt(''),
-                scrollUp: opt(''),
-                scrollDown: opt(''),
-            },
-            weather: {
-                label: opt(true),
-                unit: opt<UnitType>('imperial'),
-                leftClick: opt(''),
-                rightClick: opt(''),
-                middleClick: opt(''),
-                scrollUp: opt(''),
-                scrollDown: opt(''),
-            },
-            power: {
-                icon: opt(''),
-                showLabel: opt(true),
-                leftClick: opt('menu:powerdropdown'),
-                rightClick: opt(''),
-                middleClick: opt(''),
-                scrollUp: opt(''),
-                scrollDown: opt(''),
-            },
-            hyprsunset: {
-                temperature: opt('6000k'),
-                label: opt(true),
-                onIcon: opt('󱩌'),
-                offIcon: opt('󰛨'),
-                onLabel: opt('On'),
-                offLabel: opt('Off'),
-                pollingInterval: opt(1000 * 2),
-                rightClick: opt(''),
-                middleClick: opt(''),
-                scrollUp: opt(''),
-                scrollDown: opt(''),
-            },
-            hypridle: {
-                label: opt(true),
-                onIcon: opt('󰒳'),
-                offIcon: opt('󰒲'),
-                onLabel: opt('On'),
-                offLabel: opt('Off'),
-                pollingInterval: opt(1000 * 2),
-                rightClick: opt(''),
-                middleClick: opt(''),
-                scrollUp: opt(''),
-                scrollDown: opt(''),
-            },
-            cava: {
-                showIcon: opt(true),
-                icon: opt(''),
-                spaceCharacter: opt(' '),
-                barCharacters: opt(['▁', '▂', '▃', '▄', '▅', '▆', '▇', '█']),
-                showActiveOnly: opt(false),
-                bars: opt(10),
-                channels: opt(2),
-                framerate: opt(60),
-                samplerate: opt(44100),
-                autoSensitivity: opt(true),
-                lowCutoff: opt(50),
-                highCutoff: opt(10000),
-                noiseReduction: opt(0.77),
-                stereo: opt(false),
-                leftClick: opt(''),
-                rightClick: opt(''),
-                middleClick: opt(''),
-                scrollUp: opt(''),
-                scrollDown: opt(''),
-            },
-            worldclock: {
-                icon: opt('󱉊'),
-                showIcon: opt(true),
-                format: opt('%I:%M:%S %p %Z'),
-                formatDiffDate: opt('%a %b %d  %I:%M:%S %p %Z'),
-                divider: opt('  '),
-                leftClick: opt('menu:calendar'),
-                rightClick: opt(''),
-                middleClick: opt(''),
-                scrollUp: opt(''),
-                scrollDown: opt(''),
-                tz: opt(['America/New_York', 'Europe/Paris', 'Asia/Tokyo']),
-            },
-        },
-    },
-
-    menus: {
-        transition: opt<Transition>('crossfade'),
-        transitionTime: opt(200),
-        media: {
-            hideAuthor: opt(false),
-            hideAlbum: opt(false),
-            displayTime: opt(false),
-            displayTimeTooltip: opt(false),
-            noMediaText: opt('No Media Currently Playing'),
-        },
-        volume: {
-            raiseMaximumVolume: opt(false),
-        },
-        power: {
-            lowBatteryNotification: opt(false),
-            lowBatteryThreshold: opt(20),
-            lowBatteryNotificationTitle: opt('Warning: Low battery'),
-            lowBatteryNotificationText: opt(
-                'Your battery is running low ($POWER_LEVEL %).\n\nPlease plug in your charger.',
-            ),
-            showLabel: opt(true),
-            confirmation: opt(true),
-            sleep: opt('systemctl suspend'),
-            reboot: opt('systemctl reboot'),
-            logout: opt('hyprctl dispatch exit'),
-            shutdown: opt('systemctl poweroff'),
-        },
-        dashboard: {
-            powermenu: {
-                confirmation: opt(true),
-                sleep: opt('systemctl suspend'),
-                reboot: opt('systemctl reboot'),
-                logout: opt('hyprctl dispatch exit'),
-                shutdown: opt('systemctl poweroff'),
-                avatar: {
-                    image: opt('~/.face.icon'),
-                    name: opt<'system' | string>('system'),
-                },
-            },
-            stats: {
-                enabled: opt(true),
-                interval: opt(2000),
-                enable_gpu: opt(false),
-            },
-            recording: {
-                path: opt('$HOME/Videos/Screencasts'),
-            },
-            controls: {
-                enabled: opt(true),
-            },
-            shortcuts: {
-                enabled: opt(true),
-                left: {
-                    shortcut1: {
-                        icon: opt('󰇩'),
-                        tooltip: opt('Microsoft Edge'),
-                        command: opt('microsoft-edge-stable'),
-                    },
-                    shortcut2: {
-                        icon: opt(''),
-                        tooltip: opt('Spotify'),
-                        command: opt('spotify-launcher'),
-                    },
-                    shortcut3: {
-                        icon: opt(''),
-                        tooltip: opt('Discord'),
-                        command: opt('discord'),
-                    },
-                    shortcut4: {
-                        icon: opt(''),
-                        tooltip: opt('Search Apps'),
-                        command: opt('rofi -show drun'),
-                    },
-                },
-                right: {
-                    shortcut1: {
-                        icon: opt(''),
-                        tooltip: opt('Color Picker'),
-                        command: opt('sleep 0.5 && hyprpicker -a'),
-                    },
-                    shortcut3: {
-                        icon: opt('󰄀'),
-                        tooltip: opt('Screenshot'),
-                        command: opt(`bash -c "${SRC_DIR}/scripts/snapshot.sh"`),
-                    },
-                },
-            },
-            directories: {
-                enabled: opt(true),
-                left: {
-                    directory1: {
-                        label: opt('󰉍 Downloads'),
-                        command: opt('bash -c "xdg-open $HOME/Downloads/"'),
-                    },
-                    directory2: {
-                        label: opt('󰉏 Videos'),
-                        command: opt('bash -c "xdg-open $HOME/Videos/"'),
-                    },
-                    directory3: {
-                        label: opt('󰚝 Projects'),
-                        command: opt('bash -c "xdg-open $HOME/Projects/"'),
-                    },
-                },
-                right: {
-                    directory1: {
-                        label: opt('󱧶 Documents'),
-                        command: opt('bash -c "xdg-open $HOME/Documents/"'),
-                    },
-                    directory2: {
-                        label: opt('󰉏 Pictures'),
-                        command: opt('bash -c "xdg-open $HOME/Pictures/"'),
-                    },
-                    directory3: {
-                        label: opt('󱂵 Home'),
-                        command: opt('bash -c "xdg-open $HOME/"'),
-                    },
-                },
-            },
-        },
-        clock: {
-            time: {
-                military: opt(false),
-                hideSeconds: opt(false),
-            },
-            weather: {
-                enabled: opt(true),
-                interval: opt(60000),
-                unit: opt<UnitType>('imperial'),
-                location: opt('Los Angeles'),
-                key: opt<string>(''),
-            },
-        },
-    },
-
-    scalingPriority: opt<ScalingPriority>('gdk'),
-
-    terminal: opt('$TERM'),
-    tear: opt(false),
-
-    wallpaper: {
-        enable: opt(true),
-        image: opt(''),
-        pywal: opt(false),
-    },
-
-    notifications: {
-        position: opt<NotificationAnchor>('top right'),
-        ignore: opt<string[]>([]),
-        displayedTotal: opt(10),
-        monitor: opt(0),
-        active_monitor: opt(true),
-        showActionsOnHover: opt(false),
-        timeout: opt(7000),
-        autoDismiss: opt(false),
-        cache_actions: opt(true),
-        clearDelay: opt(100),
-    },
-
-    hyprpanel: {
-        restartAgs: opt(true),
-        restartCommand: opt('hyprpanel -q; hyprpanel'),
-    },
-
-    dummy: opt(true),
-});
-
-export default options;
diff --git a/src/scss/main.scss b/src/scss/main.scss
deleted file mode 100644
index 81c4e7c..0000000
--- a/src/scss/main.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-* {
-    all: unset;
-    font-family: $font-name;
-    font-style: $font-style;
-    font-size: $font-size;
-    font-weight: $font-weight;
-}
-
-//general
-@import 'style/common/common.scss';
-@import 'style/common/floating-widget.scss';
-@import 'style/common/widget-button.scss';
-@import 'style/common/popover_menu.scss';
-
-//general styles
-@import 'style/common/general';
-
-//modules - bar
-@import 'style/bar/bar';
-@import 'style/bar/menu';
-@import 'style/bar/audio';
-@import 'style/bar/media';
-@import 'style/bar/network';
-@import 'style/bar/bluetooth';
-@import 'style/bar/clock';
-@import 'style/bar/workspace';
-@import 'style/bar/window_title';
-@import 'style/bar/systray';
-@import 'style/bar/notifications';
-@import 'style/bar/battery';
-@import 'style/bar/style';
-
-//notifications
-@import 'style/notifications/popups';
-
-//modules - menus
-@import 'style/menus/menu';
-@import 'style/menus/power';
-@import 'style/menus/powerdropdown';
-@import 'style/menus/audiomenu';
-@import 'style/menus/network';
-@import 'style/menus/bluetooth';
-@import 'style/menus/media';
-@import 'style/menus/notifications';
-@import 'style/menus/calendar';
-@import 'style/menus/energy';
-@import 'style/menus/dashboard';
-
-//osd
-@import 'style/osd/index';
-
-//settings dialog
-@import 'style/settings/dialog';
-
-//bar separator
-@import 'style/bar/module-separator';
diff --git a/src/scss/utils/hotReload.ts b/src/scss/utils/hotReload.ts
deleted file mode 100644
index be989a5..0000000
--- a/src/scss/utils/hotReload.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { monitorFile } from 'astal';
-import { themeManager } from '../style';
-
-export const initializeHotReload = async (): Promise<void> => {
-    const monitorList = [
-        `${SRC_DIR}/src/scss/main.scss`,
-        `${SRC_DIR}/src/scss/style/bar`,
-        `${SRC_DIR}/src/scss/style/common`,
-        `${SRC_DIR}/src/scss/style/menus`,
-        `${SRC_DIR}/src/scss/style/notifications`,
-        `${SRC_DIR}/src/scss/style/osd`,
-        `${SRC_DIR}/src/scss/style/settings`,
-        `${SRC_DIR}/src/scss/style/colors.scss`,
-        `${SRC_DIR}/src/scss/style/highlights.scss`,
-        `${CONFIG_DIR}/modules.scss`,
-    ];
-
-    monitorList.forEach((file) => monitorFile(file, themeManager.applyCss.bind(themeManager)));
-};
diff --git a/src/services/Cpu.ts b/src/services/Cpu.ts
deleted file mode 100644
index 7c8dfd0..0000000
--- a/src/services/Cpu.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-// TODO: Convert to a real service
-
-import { bind, Variable } from 'astal';
-import GTop from 'gi://GTop';
-import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
-
-class Cpu {
-    private _updateFrequency = Variable(2000);
-    private _previousCpuData = new GTop.glibtop_cpu();
-    private _cpuPoller: FunctionPoller<number, []>;
-
-    public cpu = Variable(0);
-
-    constructor() {
-        GTop.glibtop_get_cpu(this._previousCpuData);
-
-        this.calculateUsage = this.calculateUsage.bind(this);
-
-        this._cpuPoller = new FunctionPoller<number, []>(
-            this.cpu,
-            [],
-            bind(this._updateFrequency),
-            this.calculateUsage,
-        );
-
-        this._cpuPoller.initialize();
-    }
-
-    public calculateUsage(): number {
-        const currentCpuData = new GTop.glibtop_cpu();
-        GTop.glibtop_get_cpu(currentCpuData);
-
-        // Calculate the differences from the previous to current data
-        const totalDiff = currentCpuData.total - this._previousCpuData.total;
-        const idleDiff = currentCpuData.idle - this._previousCpuData.idle;
-
-        const cpuUsagePercentage = totalDiff > 0 ? ((totalDiff - idleDiff) / totalDiff) * 100 : 0;
-
-        this._previousCpuData = currentCpuData;
-
-        return cpuUsagePercentage;
-    }
-
-    public updateTimer(timerInMs: number): void {
-        this._updateFrequency.set(timerInMs);
-    }
-
-    public stopPoller(): void {
-        this._cpuPoller.stop();
-    }
-
-    public startPoller(): void {
-        this._cpuPoller.start();
-    }
-}
-
-export default Cpu;
diff --git a/src/services/Gpu.ts b/src/services/Gpu.ts
deleted file mode 100644
index ff41633..0000000
--- a/src/services/Gpu.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-// TODO: Convert to a real service
-
-import { bind, exec, Variable } from 'astal';
-import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
-import { GPUStat } from 'src/lib/types/gpustat.types';
-
-class Gpu {
-    private _updateFrequency = Variable(2000);
-    private _gpuPoller: FunctionPoller<number, []>;
-
-    public gpuUsage = Variable<number>(0);
-
-    constructor() {
-        this.calculateUsage = this.calculateUsage.bind(this);
-
-        this._gpuPoller = new FunctionPoller<number, []>(
-            this.gpuUsage,
-            [],
-            bind(this._updateFrequency),
-            this.calculateUsage,
-        );
-
-        this._gpuPoller.initialize();
-    }
-
-    public calculateUsage(): number {
-        try {
-            const gpuStats = exec('gpustat --json');
-            if (typeof gpuStats !== 'string') {
-                return 0;
-            }
-
-            const data = JSON.parse(gpuStats);
-
-            const totalGpu = 100;
-            const usedGpu =
-                data.gpus.reduce((acc: number, gpu: GPUStat) => {
-                    return acc + gpu['utilization.gpu'];
-                }, 0) / data.gpus.length;
-
-            return this._divide([totalGpu, usedGpu]);
-        } catch (error) {
-            if (error instanceof Error) {
-                console.error('Error getting GPU stats:', error.message);
-            } else {
-                console.error('Unknown error getting GPU stats');
-            }
-            return 0;
-        }
-    }
-
-    private _divide([total, free]: number[]): number {
-        return free / total;
-    }
-
-    public updateTimer(timerInMs: number): void {
-        this._updateFrequency.set(timerInMs);
-    }
-
-    public stopPoller(): void {
-        this._gpuPoller.stop();
-    }
-
-    public startPoller(): void {
-        this._gpuPoller.start();
-    }
-}
-
-export default Gpu;
diff --git a/src/services/Ram.ts b/src/services/Ram.ts
deleted file mode 100644
index e8b962f..0000000
--- a/src/services/Ram.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-// TODO: Convert to a real service
-
-import { bind, GLib, Variable } from 'astal';
-import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
-import { GenericResourceData } from 'src/lib/types/customModules/generic.types';
-
-class Ram {
-    private _updateFrequency = Variable(2000);
-    private _shouldRound = false;
-    private _ramPoller: FunctionPoller<GenericResourceData, []>;
-
-    public ram = Variable<GenericResourceData>({ total: 0, used: 0, percentage: 0, free: 0 });
-
-    constructor() {
-        this.calculateUsage = this.calculateUsage.bind(this);
-        this._ramPoller = new FunctionPoller<GenericResourceData, []>(
-            this.ram,
-            [],
-            bind(this._updateFrequency),
-            this.calculateUsage,
-        );
-
-        this._ramPoller.initialize('ram');
-    }
-
-    public calculateUsage(): GenericResourceData {
-        try {
-            const [success, meminfoBytes] = GLib.file_get_contents('/proc/meminfo');
-
-            if (!success || meminfoBytes === undefined) {
-                throw new Error('Failed to read /proc/meminfo or file content is null.');
-            }
-
-            const meminfo = new TextDecoder('utf-8').decode(meminfoBytes);
-
-            const totalMatch = meminfo.match(/MemTotal:\s+(\d+)/);
-            const availableMatch = meminfo.match(/MemAvailable:\s+(\d+)/);
-
-            if (!totalMatch || !availableMatch) {
-                throw new Error('Failed to parse /proc/meminfo for memory values.');
-            }
-
-            const totalRamInBytes = parseInt(totalMatch[1], 10) * 1024;
-            const availableRamInBytes = parseInt(availableMatch[1], 10) * 1024;
-
-            let usedRam = totalRamInBytes - availableRamInBytes;
-            usedRam = isNaN(usedRam) || usedRam < 0 ? 0 : usedRam;
-
-            return {
-                percentage: this._divide([totalRamInBytes, usedRam]),
-                total: totalRamInBytes,
-                used: usedRam,
-                free: availableRamInBytes,
-            };
-        } catch (error) {
-            console.error('Error calculating RAM usage:', error);
-            return { total: 0, used: 0, percentage: 0, free: 0 };
-        }
-    }
-
-    public setShouldRound(round: boolean): void {
-        this._shouldRound = round;
-    }
-
-    private _divide([total, used]: number[]): number {
-        const percentageTotal = (used / total) * 100;
-
-        if (this._shouldRound) {
-            return total > 0 ? Math.round(percentageTotal) : 0;
-        }
-
-        return total > 0 ? parseFloat(percentageTotal.toFixed(2)) : 0;
-    }
-
-    public updateTimer(timerInMs: number): void {
-        this._updateFrequency.set(timerInMs);
-    }
-
-    public stopPoller(): void {
-        this._ramPoller.stop();
-    }
-
-    public startPoller(): void {
-        this._ramPoller.start();
-    }
-}
-
-export default Ram;
diff --git a/src/services/Storage.ts b/src/services/Storage.ts
deleted file mode 100644
index 07743b3..0000000
--- a/src/services/Storage.ts
+++ /dev/null
@@ -1,77 +0,0 @@
-// TODO: Convert to a real service
-
-import { bind, Variable } from 'astal';
-import GTop from 'gi://GTop';
-
-import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
-import { GenericResourceData } from 'src/lib/types/customModules/generic.types';
-
-class Storage {
-    private _updateFrequency = Variable(2000);
-    private _shouldRound = false;
-    private _storagePoller: FunctionPoller<GenericResourceData, []>;
-
-    public storage = Variable<GenericResourceData>({ total: 0, used: 0, percentage: 0, free: 0 });
-
-    constructor() {
-        this.calculateUsage = this.calculateUsage.bind(this);
-        this._storagePoller = new FunctionPoller<GenericResourceData, []>(
-            this.storage,
-            [],
-            bind(this._updateFrequency),
-            this.calculateUsage,
-        );
-
-        this._storagePoller.initialize();
-    }
-
-    public calculateUsage(): GenericResourceData {
-        try {
-            const currentFsUsage = new GTop.glibtop_fsusage();
-
-            GTop.glibtop_get_fsusage(currentFsUsage, '/');
-
-            const total = currentFsUsage.blocks * currentFsUsage.block_size;
-            const available = currentFsUsage.bavail * currentFsUsage.block_size;
-            const used = total - available;
-
-            return {
-                total,
-                used,
-                free: available,
-                percentage: this._divide([total, used]),
-            };
-        } catch (error) {
-            console.error('Error calculating Storage usage:', error);
-            return { total: 0, used: 0, percentage: 0, free: 0 };
-        }
-    }
-
-    public setShouldRound(round: boolean): void {
-        this._shouldRound = round;
-    }
-
-    private _divide([total, used]: number[]): number {
-        const percentageTotal = (used / total) * 100;
-
-        if (this._shouldRound) {
-            return total > 0 ? Math.round(percentageTotal) : 0;
-        }
-
-        return total > 0 ? parseFloat(percentageTotal.toFixed(2)) : 0;
-    }
-
-    public updateTimer(timerInMs: number): void {
-        this._updateFrequency.set(timerInMs);
-    }
-
-    public stopPoller(): void {
-        this._storagePoller.stop();
-    }
-
-    public startPoller(): void {
-        this._storagePoller.start();
-    }
-}
-
-export default Storage;
diff --git a/src/services/Wallpaper.ts b/src/services/Wallpaper.ts
deleted file mode 100644
index 27fcef6..0000000
--- a/src/services/Wallpaper.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import GObject, { GLib, property, register, signal } from 'astal/gobject';
-import { dependencies, sh } from '../lib/utils';
-import options from '../options';
-import { execAsync } from 'astal/process';
-import { monitorFile } from 'astal/file';
-import AstalHyprland from 'gi://AstalHyprland?version=0.1';
-
-const hyprlandService = AstalHyprland.get_default();
-const WP = `${GLib.get_home_dir()}/.config/background`;
-
-@register({ GTypeName: 'Wallpaper' })
-class Wallpaper extends GObject.Object {
-    #blockMonitor = false;
-    #isRunning = false;
-
-    #wallpaper(): void {
-        if (!dependencies('swww')) return;
-
-        try {
-            const cursorPosition = hyprlandService.message('cursorpos');
-            const transitionCmd = [
-                'swww',
-                'img',
-                '--invert-y',
-                '--transition-type',
-                'grow',
-                '--transition-duration',
-                '1.5',
-                '--transition-fps',
-                '60',
-                '--transition-pos',
-                cursorPosition.replace(' ', ''),
-                `"${WP}"`,
-            ].join(' ');
-
-            sh(transitionCmd)
-                .then(() => {
-                    this.notify('wallpaper');
-                    this.emit('changed', true);
-                })
-                .catch((err) => {
-                    console.error('Error setting wallpaper:', err);
-                });
-        } catch (err) {
-            console.error('Error getting cursor position:', err);
-        }
-    }
-
-    async #setWallpaper(path: string): Promise<void> {
-        this.#blockMonitor = true;
-
-        try {
-            await sh(`cp "${path}" "${WP}"`);
-            this.#wallpaper();
-        } catch (error) {
-            console.error('Error setting wallpaper:', error);
-        } finally {
-            this.#blockMonitor = false;
-        }
-    }
-
-    public setWallpaper(path: string): void {
-        this.#setWallpaper(path);
-    }
-
-    public isRunning(): boolean {
-        return this.#isRunning;
-    }
-
-    @property(String)
-    declare public wallpaper: string;
-
-    @signal(Boolean)
-    declare public changed: (event: boolean) => void;
-
-    constructor() {
-        super();
-
-        this.wallpaper = WP;
-
-        options.wallpaper.enable.subscribe(() => {
-            if (options.wallpaper.enable.get()) {
-                this.#isRunning = true;
-                execAsync('swww-daemon')
-                    .then(() => {
-                        this.#wallpaper();
-                    })
-                    .catch((err) => {
-                        console.error('Failed to start swww-daemon:', err);
-                    });
-            } else {
-                this.#isRunning = false;
-
-                execAsync('pkill swww-daemon')
-                    .then(() => {
-                        console.log('swww-daemon stopped.');
-                    })
-                    .catch((err) => {
-                        console.error('Failed to stop swww-daemon:', err);
-                    });
-            }
-        });
-
-        if (options.wallpaper.enable.get() && dependencies('swww')) {
-            this.#isRunning = true;
-
-            monitorFile(WP, () => {
-                if (!this.#blockMonitor) this.#wallpaper();
-            });
-
-            execAsync('swww-daemon')
-                .then(() => {
-                    this.#wallpaper();
-                })
-                .catch((err) => {
-                    console.error('Failed to start swww-daemon:', err);
-                });
-        }
-    }
-}
-
-export default new Wallpaper();
diff --git a/src/cli/commander/InitializeCommand.ts b/src/services/cli/commander/InitializeCommand.ts
similarity index 68%
rename from src/cli/commander/InitializeCommand.ts
rename to src/services/cli/commander/InitializeCommand.ts
index 6567dee..f88070d 100644
--- a/src/cli/commander/InitializeCommand.ts
+++ b/src/services/cli/commander/InitializeCommand.ts
@@ -2,8 +2,9 @@ import { CommandRegistry } from './Registry';
 import { Command } from './types';
 import { createExplainCommand } from './helpers';
 import { appearanceCommands } from './commands/appearance';
-import { utilityCommands } from './commands/utility';
+import { utilityCommands } from './commands/system';
 import { windowManagementCommands } from './commands/windowManagement';
+import { mediaCommands } from './commands/modules/media';
 
 /**
  * Initializes and registers commands in the provided CommandRegistry.
@@ -11,7 +12,12 @@ import { windowManagementCommands } from './commands/windowManagement';
  * @param registry - The command registry to register commands in.
  */
 export function initializeCommands(registry: CommandRegistry): void {
-    const commandList: Command[] = [...appearanceCommands, ...utilityCommands, ...windowManagementCommands];
+    const commandList: Command[] = [
+        ...appearanceCommands,
+        ...utilityCommands,
+        ...windowManagementCommands,
+        ...mediaCommands,
+    ];
 
     commandList.forEach((command) => registry.register(command));
 
diff --git a/src/cli/commander/Parser.ts b/src/services/cli/commander/Parser.ts
similarity index 100%
rename from src/cli/commander/Parser.ts
rename to src/services/cli/commander/Parser.ts
diff --git a/src/cli/commander/Registry.ts b/src/services/cli/commander/Registry.ts
similarity index 100%
rename from src/cli/commander/Registry.ts
rename to src/services/cli/commander/Registry.ts
diff --git a/src/cli/commander/RequestHandler.ts b/src/services/cli/commander/RequestHandler.ts
similarity index 100%
rename from src/cli/commander/RequestHandler.ts
rename to src/services/cli/commander/RequestHandler.ts
diff --git a/src/cli/commander/commands/appearance/index.ts b/src/services/cli/commander/commands/appearance/index.ts
similarity index 89%
rename from src/cli/commander/commands/appearance/index.ts
rename to src/services/cli/commander/commands/appearance/index.ts
index bb36549..cd4c3f9 100644
--- a/src/cli/commander/commands/appearance/index.ts
+++ b/src/services/cli/commander/commands/appearance/index.ts
@@ -1,9 +1,9 @@
-import { errorHandler } from 'src/lib/utils';
 import { Command } from '../../types';
-import { setWallpaper } from 'src/shared/wallpaper';
-import { useTheme } from 'src/shared/useTheme';
-import { setLayout } from 'src/shared/utilities';
-import { BarLayouts } from 'src/lib/options/options.types';
+import { setWallpaper } from 'src/services/cli/helpers/wallpaper';
+import { useTheme } from 'src/lib/theme/useTheme';
+import { BarLayouts } from 'src/lib/options/types';
+import { errorHandler } from 'src/core/errors/handler';
+import { setLayout } from 'src/lib/bar/helpers';
 
 export const appearanceCommands: Command[] = [
     {
diff --git a/src/services/cli/commander/commands/modules/media/index.ts b/src/services/cli/commander/commands/modules/media/index.ts
new file mode 100644
index 0000000..b7cfc2d
--- /dev/null
+++ b/src/services/cli/commander/commands/modules/media/index.ts
@@ -0,0 +1,26 @@
+import { errorHandler } from 'src/core/errors/handler';
+import { Command } from '../../../types';
+import { MediaPlayerService } from 'src/services/media';
+
+const mediaPlayerService = MediaPlayerService.getInstance();
+
+export const mediaCommands: Command[] = [
+    {
+        name: 'Play/Pause active media player',
+        aliases: ['pp'],
+        description: 'Plays or Pauses the active media player.',
+        category: 'Media',
+        args: [],
+        handler: (): string => {
+            try {
+                mediaPlayerService.activePlayer.get()?.play_pause();
+
+                const playbackStatus = mediaPlayerService.activePlayer.get()?.playback_status;
+
+                return playbackStatus === 0 ? 'Paused' : 'Playing';
+            } catch (error) {
+                errorHandler(error);
+            }
+        },
+    },
+];
diff --git a/src/cli/commander/commands/utility/checkDependencies.ts b/src/services/cli/commander/commands/system/checkDependencies.ts
similarity index 67%
rename from src/cli/commander/commands/utility/checkDependencies.ts
rename to src/services/cli/commander/commands/system/checkDependencies.ts
index 1405c8b..f70578a 100644
--- a/src/cli/commander/commands/utility/checkDependencies.ts
+++ b/src/services/cli/commander/commands/system/checkDependencies.ts
@@ -1,5 +1,6 @@
-import { GLib } from 'astal';
-import { errorHandler } from 'src/lib/utils';
+import { errorHandler } from 'src/core/errors/handler';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+import { ServiceStatus } from 'src/core/system/types';
 
 const RED = '\x1b[31m';
 const GREEN = '\x1b[32m';
@@ -12,36 +13,6 @@ const STATUS_ACTIVE = '(ACTIVE)';
 const STATUS_DISABLED = '(DISABLED)';
 const STATUS_MISSING = '(MISSING)';
 
-/**
- * Decodes a Uint8Array output into a trimmed UTF-8 string.
- *
- * @description Converts a Uint8Array output from a command execution into a human-readable string.
- *
- * @param output - The Uint8Array output to decode.
- */
-function decodeOutput(output: Uint8Array): string {
-    const decoder = new TextDecoder();
-    return decoder.decode(output).trim();
-}
-
-/**
- * Spawns a command line synchronously and returns the exit code and output.
- *
- * @description Executes a shell command using GLib.spawn_command_line_sync and extracts the exit code, stdout, and stderr.
- *
- * @param command - The command to execute.
- */
-function runCommand(command: string): CommandResult {
-    const [, out, err, exitCode] = GLib.spawn_command_line_sync(command);
-    const stdout = out ? decodeOutput(out) : '';
-    const stderr = err ? decodeOutput(err) : '';
-    return {
-        exitCode,
-        stdout,
-        stderr,
-    };
-}
-
 /**
  * Colors a given text using ANSI color codes.
  *
@@ -54,79 +25,6 @@ function colorText(text: string, color: string): string {
     return `${color}${text}${RESET}`;
 }
 
-/**
- * Checks if any of the given executables is installed by using `which`.
- *
- * @description Iterates through a list of executables and returns true if any are found.
- *
- * @param executables - The list of executables to check.
- */
-function checkExecutable(executables: string[]): boolean {
-    for (const exe of executables) {
-        const { exitCode } = runCommand(`which ${exe}`);
-
-        if (exitCode === 0) {
-            return true;
-        }
-    }
-    return false;
-}
-
-/**
- * Checks if any of the given libraries is installed using `pkg-config`.
- *
- * @description Uses `pkg-config --exists <lib>` to determine if a library is installed.
- *
- * @param libraries - The list of libraries to check.
- */
-function checkLibrary(libraries: string[]): boolean {
-    for (const lib of libraries) {
-        const { exitCode, stdout } = runCommand(`sh -c "ldconfig -p | grep ${lib}"`);
-
-        if (exitCode === 0 && stdout.length > 0) {
-            return true;
-        }
-    }
-    return false;
-}
-
-/**
- * Checks the status of a service.
- *
- * @description Determines if a service is ACTIVE, INSTALLED (but not running), DISABLED, or MISSING.
- *
- * @param services - The list of services to check.
- */
-function checkServiceStatus(services: string[]): ServiceStatus {
-    for (const svc of services) {
-        const activeResult = runCommand(`systemctl is-active ${svc}`);
-        const activeStatus = activeResult.stdout;
-
-        if (activeStatus === 'active') {
-            return 'ACTIVE';
-        }
-
-        if (activeStatus === 'inactive' || activeStatus === 'failed') {
-            const enabledResult = runCommand(`systemctl is-enabled ${svc}`);
-            const enabledStatus = enabledResult.stdout;
-
-            if (enabledResult !== undefined && (enabledStatus === 'enabled' || enabledStatus === 'static')) {
-                return 'INSTALLED';
-            } else if (enabledResult !== undefined && enabledStatus === 'disabled') {
-                return 'DISABLED';
-            } else {
-                return 'MISSING';
-            }
-        }
-
-        if (activeStatus === 'unknown' || activeResult.exitCode !== 0) {
-            continue;
-        }
-    }
-
-    return 'MISSING';
-}
-
 /**
  * Determines the status string and color for a dependency based on its type and checks.
  *
@@ -139,13 +37,13 @@ function getDependencyStatus(dep: Dependency): string {
 
     switch (dep.type) {
         case 'executable':
-            status = checkExecutable(dep.check) ? 'INSTALLED' : 'MISSING';
+            status = SystemUtilities.checkExecutable(dep.check) ? 'INSTALLED' : 'MISSING';
             break;
         case 'library':
-            status = checkLibrary(dep.check) ? 'INSTALLED' : 'MISSING';
+            status = SystemUtilities.checkLibrary(dep.check) ? 'INSTALLED' : 'MISSING';
             break;
         case 'service':
-            status = checkServiceStatus(dep.check);
+            status = SystemUtilities.checkServiceStatus(dep.check);
             break;
         default:
             status = 'MISSING';
@@ -348,16 +246,8 @@ export function checkDependencies(): string {
     }
 }
 
-type CommandResult = {
-    exitCode: number;
-    stdout: string;
-    stderr: string;
-};
-
 type DependencyType = 'executable' | 'library' | 'service';
 
-type ServiceStatus = 'ACTIVE' | 'INSTALLED' | 'DISABLED' | 'MISSING';
-
 type Dependency = {
     package: string;
     required: boolean;
diff --git a/src/cli/commander/commands/utility/index.ts b/src/services/cli/commander/commands/system/index.ts
similarity index 74%
rename from src/cli/commander/commands/utility/index.ts
rename to src/services/cli/commander/commands/system/index.ts
index 29184d8..aea7d18 100644
--- a/src/cli/commander/commands/utility/index.ts
+++ b/src/services/cli/commander/commands/system/index.ts
@@ -1,13 +1,17 @@
+import AstalNotifd from 'gi://AstalNotifd?version=0.1';
 import AstalWp from 'gi://AstalWp?version=0.1';
-import { errorHandler } from 'src/lib/utils';
 import { Command } from '../../types';
 import { execAsync, Gio, GLib } from 'astal';
 import { checkDependencies } from './checkDependencies';
-import options from 'src/options';
-import { clearAllNotifications } from 'src/shared/notification';
-import { getSystrayItems } from 'src/shared/systray';
-import { idleInhibit } from 'src/shared/utilities';
+import { getSystrayItems } from 'src/services/cli/helpers/systray';
+import { idleInhibit } from 'src/lib/window/visibility';
+import { errorHandler } from 'src/core/errors/handler';
+import { clearNotifications } from 'src/lib/shared/notifications';
+import options from 'src/configuration';
+import { listCpuTempSensors } from './listSensors';
 
+const { clearDelay } = options.notifications;
+const notifdService = AstalNotifd.get_default();
 const audio = AstalWp.get_default();
 
 export const utilityCommands: Command[] = [
@@ -15,7 +19,7 @@ export const utilityCommands: Command[] = [
         name: 'systrayItems',
         aliases: ['sti'],
         description: 'Gets a list of IDs for the current applications in the system tray.',
-        category: 'Utility',
+        category: 'System',
         args: [],
         handler: (): string => {
             try {
@@ -29,22 +33,40 @@ export const utilityCommands: Command[] = [
         name: 'clearNotifications',
         aliases: ['cno'],
         description: 'Clears all of the notifications that currently exist.',
-        category: 'Utility',
+        category: 'System',
         args: [],
         handler: (): string => {
             try {
-                clearAllNotifications();
+                const allNotifications = notifdService.get_notifications();
+                clearNotifications(allNotifications, clearDelay.get());
+
                 return 'Notifications cleared successfully.';
             } catch (error) {
                 errorHandler(error);
             }
         },
     },
+    {
+        name: 'toggleDnd',
+        aliases: ['dnd'],
+        description: 'Toggled the Do Not Disturb mode for notifications.',
+        category: 'System',
+        args: [],
+        handler: (): string => {
+            try {
+                notifdService.set_dont_disturb(!notifdService.dontDisturb);
+
+                return notifdService.dontDisturb ? 'Enabled' : 'Disabled';
+            } catch (error) {
+                errorHandler(error);
+            }
+        },
+    },
     {
         name: 'adjustVolume',
         aliases: ['vol'],
         description: 'Adjusts the volume of the default audio output device.',
-        category: 'Utility',
+        category: 'System',
         args: [
             {
                 name: 'volume',
@@ -79,7 +101,7 @@ export const utilityCommands: Command[] = [
         name: 'isInhibiting',
         aliases: ['isi'],
         description: 'Returns the status of the Idle Inhibitor.',
-        category: 'Utility',
+        category: 'System',
         args: [],
         handler: (): boolean => {
             try {
@@ -94,7 +116,7 @@ export const utilityCommands: Command[] = [
         aliases: ['idi'],
         description:
             'Enables/Disables the Idle Inhibitor. Toggles the Inhibitor if no parameter is provided.',
-        category: 'Utility',
+        category: 'System',
         args: [
             {
                 name: 'shouldInhibit',
@@ -118,7 +140,7 @@ export const utilityCommands: Command[] = [
         name: 'migrateConfig',
         aliases: ['mcfg'],
         description: 'Migrates the configuration file from the old location to the new one.',
-        category: 'Utility',
+        category: 'System',
         args: [],
         handler: (): string => {
             const oldPath = `${GLib.get_user_cache_dir()}/ags/hyprpanel/options.json`;
@@ -142,7 +164,7 @@ export const utilityCommands: Command[] = [
         name: 'checkDependencies',
         aliases: ['chd'],
         description: 'Checks the status of required and optional dependencies.',
-        category: 'Utility',
+        category: 'System',
         args: [],
         handler: (): string => {
             try {
@@ -152,11 +174,25 @@ export const utilityCommands: Command[] = [
             }
         },
     },
+    {
+        name: 'listCpuSensors',
+        aliases: ['lcs'],
+        description: 'Lists all available CPU temperature sensors and shows the current one.',
+        category: 'System',
+        args: [],
+        handler: (): string => {
+            try {
+                return listCpuTempSensors();
+            } catch (error) {
+                errorHandler(error);
+            }
+        },
+    },
     {
         name: 'restart',
         aliases: ['r'],
         description: 'Restarts HyprPanel.',
-        category: 'Utility',
+        category: 'System',
         args: [],
         handler: (): string => {
             try {
@@ -171,7 +207,7 @@ export const utilityCommands: Command[] = [
         name: 'quit',
         aliases: ['q'],
         description: 'Quits HyprPanel.',
-        category: 'Utility',
+        category: 'System',
         args: [],
         handler: (): string => {
             try {
diff --git a/src/services/cli/commander/commands/system/listSensors.ts b/src/services/cli/commander/commands/system/listSensors.ts
new file mode 100644
index 0000000..dd57f2b
--- /dev/null
+++ b/src/services/cli/commander/commands/system/listSensors.ts
@@ -0,0 +1,34 @@
+import { CpuTempSensorDiscovery } from 'src/services/system/cputemp/sensorDiscovery';
+import CpuTempService from 'src/services/system/cputemp';
+
+/**
+ * Lists all available CPU temperature sensors and shows which one is currently active
+ */
+export function listCpuTempSensors(): string {
+    const sensors = CpuTempSensorDiscovery.getAllSensors();
+    const cpuTempService = new CpuTempService();
+    cpuTempService.initialize();
+
+    const currentSensor = cpuTempService.currentSensorPath;
+
+    let outputMessage = '';
+    outputMessage += 'Available CPU Temperature Sensors:\n';
+    outputMessage += '==================================\n';
+
+    if (sensors.length === 0) {
+        outputMessage += 'No temperature sensors found on the system.\n';
+        return outputMessage;
+    }
+
+    for (const sensor of sensors) {
+        const isCurrent = sensor.path === currentSensor;
+        const marker = isCurrent ? ' [CURRENT]' : '';
+        outputMessage += `${sensor.type.padEnd(8)} | ${sensor.name.padEnd(20)} | ${sensor.path}${marker}\n`;
+    }
+
+    outputMessage += `Auto-discovered sensor: ${CpuTempSensorDiscovery.discover() || 'None'}\n`;
+
+    cpuTempService.destroy();
+
+    return outputMessage;
+}
diff --git a/src/cli/commander/commands/windowManagement/index.ts b/src/services/cli/commander/commands/windowManagement/index.ts
similarity index 92%
rename from src/cli/commander/commands/windowManagement/index.ts
rename to src/services/cli/commander/commands/windowManagement/index.ts
index c3783ee..ffd80c4 100644
--- a/src/cli/commander/commands/windowManagement/index.ts
+++ b/src/services/cli/commander/commands/windowManagement/index.ts
@@ -1,8 +1,8 @@
-import { errorHandler } from 'src/lib/utils';
 import { Command } from '../../types';
 import { App } from 'astal/gtk3';
-import { BarVisibility } from 'src/cli/utils/BarVisibility';
-import { isWindowVisible } from 'src/shared/utilities';
+import { isWindowVisible } from 'src/lib/window/visibility';
+import { BarVisibility } from 'src/services/display/bar';
+import { errorHandler } from 'src/core/errors/handler';
 
 export const windowManagementCommands: Command[] = [
     {
diff --git a/src/cli/commander/helpers/index.ts b/src/services/cli/commander/helpers/index.ts
similarity index 100%
rename from src/cli/commander/helpers/index.ts
rename to src/services/cli/commander/helpers/index.ts
diff --git a/src/cli/commander/index.ts b/src/services/cli/commander/index.ts
similarity index 98%
rename from src/cli/commander/index.ts
rename to src/services/cli/commander/index.ts
index fa1cce2..4f4d863 100644
--- a/src/cli/commander/index.ts
+++ b/src/services/cli/commander/index.ts
@@ -31,5 +31,3 @@ export function runCLI(input: string, response: ResponseCallback): void {
         response({ error: err instanceof Error ? err.message : String(err) });
     });
 }
-
-export { registry };
diff --git a/src/cli/commander/types.ts b/src/services/cli/commander/types.ts
similarity index 92%
rename from src/cli/commander/types.ts
rename to src/services/cli/commander/types.ts
index 4b41051..3e2d973 100644
--- a/src/cli/commander/types.ts
+++ b/src/services/cli/commander/types.ts
@@ -6,7 +6,7 @@ export interface PositionalArg {
     default?: string | number | boolean | Record<string, unknown>;
 }
 
-export type HandlerReturn = unknown | Promise<unknown>;
+type HandlerReturn = unknown | Promise<unknown>;
 
 export interface Command {
     name: string;
diff --git a/src/shared/systray.ts b/src/services/cli/helpers/systray.ts
similarity index 65%
rename from src/shared/systray.ts
rename to src/services/cli/helpers/systray.ts
index 69a2323..a7166fc 100644
--- a/src/shared/systray.ts
+++ b/src/services/cli/helpers/systray.ts
@@ -1,7 +1,12 @@
 import AstalTray from 'gi://AstalTray';
-import { errorHandler } from 'src/lib/utils';
+import { errorHandler } from 'src/core/errors/handler';
 const systemtray = AstalTray.get_default();
 
+/**
+ * Retrieves all system tray items and returns their IDs
+ *
+ * @returns A newline-separated string of system tray item IDs
+ */
 export function getSystrayItems(): string {
     try {
         const items = systemtray
diff --git a/src/shared/wallpaper.ts b/src/services/cli/helpers/wallpaper.ts
similarity index 60%
rename from src/shared/wallpaper.ts
rename to src/services/cli/helpers/wallpaper.ts
index ac54cdd..47d1ccb 100644
--- a/src/shared/wallpaper.ts
+++ b/src/services/cli/helpers/wallpaper.ts
@@ -1,10 +1,18 @@
 import GLib from 'gi://GLib?version=2.0';
-import options from '../options';
-import Wallpaper from 'src/services/Wallpaper';
+import options from 'src/configuration';
+import { WallpaperService } from 'src/services/wallpaper';
 
+const wallpaperService = WallpaperService.getInstance();
 const { EXISTS, IS_REGULAR } = GLib.FileTest;
 const { enable: enableWallpaper, image } = options.wallpaper;
 
+/**
+ * Sets the system wallpaper to the specified image file
+ *
+ * @param filePath - The absolute path to the wallpaper image file
+ * @throws Error if the file doesn't exist or is not a regular file
+ * @throws Error if setting the wallpaper fails
+ */
 export function setWallpaper(filePath: string): void {
     if (!(GLib.file_test(filePath, EXISTS) && GLib.file_test(filePath, IS_REGULAR))) {
         throw new Error('The input file is not a valid wallpaper.');
@@ -16,7 +24,7 @@ export function setWallpaper(filePath: string): void {
         return;
     }
     try {
-        Wallpaper.setWallpaper(filePath);
+        wallpaperService.setWallpaper(filePath);
     } catch (error) {
         if (error instanceof Error) {
             throw new Error(error.message);
diff --git a/src/services/cli/services/window/index.ts b/src/services/cli/services/window/index.ts
new file mode 100644
index 0000000..4bf7894
--- /dev/null
+++ b/src/services/cli/services/window/index.ts
@@ -0,0 +1,79 @@
+import { App } from 'astal/gtk3';
+
+/**
+ * Manages Astral's application windows, providing centralized control over visibility
+ * and state management for all UI windows in the HyprPanel system
+ */
+export class WindowService {
+    /**
+     * Determines whether a given window is currently displayed to the user
+     *
+     * @param windowName - The name identifier of the window to check
+     * @returns Whether the window is currently visible
+     */
+    public isWindowVisible(windowName: string): boolean {
+        return this._isWindowVisible(windowName);
+    }
+
+    /**
+     * Makes a window visible on screen, typically called when user interaction
+     * requires displaying a menu or dialog
+     *
+     * @param windowName - The name identifier of the window to show
+     */
+    public showWindow(windowName: string): void {
+        return this._showWindow(windowName);
+    }
+
+    /**
+     * Removes a window from display while preserving its state for later
+     * presentation, commonly used for menus that need to retain their data
+     *
+     * @param windowName - The name identifier of the window to hide
+     */
+    public hideWindow(windowName: string): void {
+        return this._hideWindow(windowName);
+    }
+
+    /**
+     * Swaps window visibility state based on current display status, useful for
+     * toggle buttons or keyboard shortcuts that control window appearance
+     *
+     * @param windowName - The name identifier of the window to toggle
+     */
+    public toggleWindow(windowName: string): void {
+        if (this._isWindowVisible(windowName)) {
+            this._hideWindow(windowName);
+        } else {
+            this._showWindow(windowName);
+        }
+    }
+
+    private _isWindowVisible(windowName: string): boolean {
+        const appWindow = App.get_window(windowName);
+
+        if (appWindow === undefined || appWindow === null) {
+            throw new Error(`Window with name "${windowName}" not found.`);
+        }
+
+        return appWindow.visible;
+    }
+
+    private _showWindow(windowName: string): void {
+        const window = App.get_window(windowName);
+        if (!window) {
+            throw new Error(`Window with name "${windowName}" not found.`);
+        }
+        window.show();
+    }
+
+    private _hideWindow(windowName: string): void {
+        const window = App.get_window(windowName);
+        if (!window) {
+            throw new Error(`Window with name "${windowName}" not found.`);
+        }
+        window.hide();
+    }
+}
+
+export const windowService = new WindowService();
diff --git a/src/services/display/bar/autoHide.ts b/src/services/display/bar/autoHide.ts
new file mode 100644
index 0000000..1f2b7c4
--- /dev/null
+++ b/src/services/display/bar/autoHide.ts
@@ -0,0 +1,152 @@
+import { bind, Variable } from 'astal';
+import { App } from 'astal/gtk3';
+import AstalHyprland from 'gi://AstalHyprland?version=0.1';
+import options from 'src/configuration';
+import { BarVisibility } from '.';
+import { WorkspaceService } from 'src/services/workspace';
+
+/**
+ * Service that manages auto-hide behavior for bars across monitors
+ */
+export class BarAutoHideService {
+    private static _instance: BarAutoHideService;
+
+    private _workspaceService = WorkspaceService.getInstance();
+    private _hyprlandService = AstalHyprland.get_default();
+    private _autoHide = options.bar.autoHide;
+
+    private _subscriptions: {
+        workspace: Variable<void> | undefined;
+        client: Variable<void> | undefined;
+        autoHide: Variable<void> | undefined;
+    } = {
+        workspace: undefined,
+        client: undefined,
+        autoHide: undefined,
+    };
+
+    private constructor() {}
+
+    /**
+     * Gets the singleton instance of the BarAutoHideService
+     */
+    public static getInstance(): BarAutoHideService {
+        if (!this._instance) {
+            this._instance = new BarAutoHideService();
+        }
+
+        return this._instance;
+    }
+
+    /**
+     * Initializes the auto-hide behavior for bars
+     * Manages visibility based on window count, fullscreen state, and user preferences
+     */
+    public initialize(): void {
+        this.destroy();
+
+        this._subscriptions.workspace = Variable.derive(
+            [
+                bind(this._autoHide),
+                bind(this._hyprlandService, 'workspaces'),
+                bind(this._workspaceService.forceUpdater),
+                bind(this._hyprlandService, 'focusedWorkspace'),
+            ],
+            (hideMode) => {
+                if (hideMode === 'never') {
+                    this._showAllBars();
+                } else if (hideMode === 'single-window') {
+                    this._updateBarVisibilityByWindowCount();
+                }
+            },
+        );
+
+        this._subscriptions.client = Variable.derive(
+            [bind(this._hyprlandService, 'focusedClient')],
+            (currentClient) => {
+                this._handleFullscreenClientVisibility(currentClient);
+            },
+        );
+
+        this._subscriptions.autoHide = Variable.derive([bind(this._autoHide)], (hideMode) => {
+            if (hideMode === 'fullscreen') {
+                this._updateBarVisibilityByFullscreen();
+            }
+        });
+    }
+
+    /**
+     * Cleanup subscriptions and reset state
+     */
+    public destroy(): void {
+        Object.values(this._subscriptions).forEach((sub) => sub?.drop());
+    }
+
+    /**
+     * Sets bar visibility for a specific monitor
+     *
+     * @param monitorId - The ID of the monitor whose bar visibility to set
+     * @param isVisible - Whether the bar should be visible
+     */
+    private _setBarVisibility(monitorId: number, isVisible: boolean): void {
+        const barName = `bar-${monitorId}`;
+
+        if (BarVisibility.get(barName)) {
+            App.get_window(barName)?.set_visible(isVisible);
+        }
+    }
+
+    /**
+     * Handles bar visibility when a client's fullscreen state changes
+     *
+     * @param client - The Hyprland client whose fullscreen state to monitor
+     */
+    private _handleFullscreenClientVisibility(client: AstalHyprland.Client): void {
+        if (client === null) {
+            return;
+        }
+
+        const fullscreenBinding = bind(client, 'fullscreen');
+
+        Variable.derive([bind(fullscreenBinding)], (isFullScreen) => {
+            if (this._autoHide.get() === 'fullscreen') {
+                this._setBarVisibility(client.monitor.id, !Boolean(isFullScreen));
+            }
+        });
+    }
+
+    /**
+     * Shows bars on all monitors
+     */
+    private _showAllBars(): void {
+        const monitors = this._hyprlandService.get_monitors();
+
+        monitors.forEach((monitor) => {
+            if (BarVisibility.get(`bar-${monitor.id}`)) {
+                this._setBarVisibility(monitor.id, true);
+            }
+        });
+    }
+
+    /**
+     * Updates bar visibility based on workspace window count
+     */
+    private _updateBarVisibilityByWindowCount(): void {
+        const monitors = this._hyprlandService.get_monitors();
+        const activeWorkspaces = monitors.map((monitor) => monitor.active_workspace);
+
+        activeWorkspaces.forEach((workspace) => {
+            const hasOneClient = workspace.get_clients().length !== 1;
+            this._setBarVisibility(workspace.monitor.id, hasOneClient);
+        });
+    }
+
+    /**
+     * Updates bar visibility based on workspace fullscreen state
+     */
+    private _updateBarVisibilityByFullscreen(): void {
+        this._hyprlandService.get_workspaces().forEach((workspace) => {
+            this._setBarVisibility(workspace.monitor.id, !workspace.hasFullscreen);
+        });
+    }
+}
diff --git a/src/services/display/bar/index.ts b/src/services/display/bar/index.ts
new file mode 100644
index 0000000..8713564
--- /dev/null
+++ b/src/services/display/bar/index.ts
@@ -0,0 +1,28 @@
+import { BarToggleStates } from './types';
+
+/**
+ * Service that manages the visibility state of bars across different monitors
+ */
+export class BarVisibility {
+    private static _toggleStates: BarToggleStates = {};
+
+    /**
+     * Gets the visibility state of a specific bar
+     *
+     * @param barName - The name identifier of the bar
+     * @returns Whether the bar is visible (defaults to true if not set)
+     */
+    public static get(barName: string): boolean {
+        return this._toggleStates[barName] ?? true;
+    }
+
+    /**
+     * Sets the visibility state of a specific bar
+     *
+     * @param barName - The name identifier of the bar
+     * @param isVisible - Whether the bar should be visible
+     */
+    public static set(barName: string, isVisible: boolean): void {
+        this._toggleStates[barName] = isVisible;
+    }
+}
diff --git a/src/lib/types/cli.types.ts b/src/services/display/bar/types.ts
similarity index 100%
rename from src/lib/types/cli.types.ts
rename to src/services/display/bar/types.ts
diff --git a/src/components/bar/utils/GdkMonitorMapper.ts b/src/services/display/monitor/index.ts
similarity index 94%
rename from src/components/bar/utils/GdkMonitorMapper.ts
rename to src/services/display/monitor/index.ts
index 77cc98c..c0eadda 100644
--- a/src/components/bar/utils/GdkMonitorMapper.ts
+++ b/src/services/display/monitor/index.ts
@@ -7,7 +7,7 @@ const hyprlandService = AstalHyprland.get_default();
  * The MonitorMapper class encapsulates the conversion logic between GDK and Hyprland monitor IDs.
  * It maintains internal state for monitors that have already been used so that duplicate assignments are avoided.
  */
-export class GdkMonitorMapper {
+export class GdkMonitorService {
     private _usedGdkMonitors: Set<number>;
     private _usedHyprlandMonitors: Set<number>;
 
@@ -27,7 +27,7 @@ export class GdkMonitorMapper {
     /**
      * Converts a GDK monitor id to the corresponding Hyprland monitor id.
      *
-     * @param monitor The GDK monitor id.
+     * @param monitor - The GDK monitor id.
      * @returns The corresponding Hyprland monitor id.
      */
     public mapGdkToHyprland(monitor: number): number {
@@ -53,7 +53,7 @@ export class GdkMonitorMapper {
     /**
      * Converts a Hyprland monitor id to the corresponding GDK monitor id.
      *
-     * @param monitor The Hyprland monitor id.
+     * @param monitor - The Hyprland monitor id.
      * @returns The corresponding GDK monitor id.
      */
     public mapHyprlandToGdk(monitor: number): number {
@@ -87,12 +87,12 @@ export class GdkMonitorMapper {
      *  2. A relaxed match (candidate matches the source, regardless of id).
      *  3. A fallback match (first candidate that hasn’t been used).
      *
-     * @param candidates Array of candidate monitors.
-     * @param source The source monitor object to match against.
-     * @param target The desired monitor id.
-     * @param usedMonitors A Set of already used candidate ids.
-     * @param getId Function to extract the id from a candidate.
-     * @param compare Function that determines if a candidate matches the source.
+     * @param candidates - Array of candidate monitors.
+     * @param source - The source monitor object to match against.
+     * @param target - The desired monitor id.
+     * @param usedMonitors - A Set of already used candidate ids.
+     * @param getId - Function to extract the id from a candidate.
+     * @param compare - Function that determines if a candidate matches the source.
      * @returns The chosen monitor id.
      */
     private _matchMonitor<T, U>(
diff --git a/src/lib/types/defaults/options.types.ts b/src/services/matugen/defaults.ts
similarity index 100%
rename from src/lib/types/defaults/options.types.ts
rename to src/services/matugen/defaults.ts
diff --git a/src/services/matugen/index.ts b/src/services/matugen/index.ts
index 2b04d3f..5d533d0 100644
--- a/src/services/matugen/index.ts
+++ b/src/services/matugen/index.ts
@@ -1,58 +1,59 @@
-import { ColorMapKey, HexColor, MatugenColors } from '../../lib/options/options.types';
+import { ColorMapKey, HexColor, MatugenColors } from '../../lib/options/types';
 import { getMatugenVariations } from './variations';
-import { bash, dependencies, Notify, isAnImage } from '../../lib/utils';
-import options from '../../options';
 import icons from '../../lib/icons/icons';
-import { defaultColorMap } from 'src/lib/types/defaults/options.types';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+import options from 'src/configuration';
+import { isAnImage } from 'src/lib/validation/images';
+import { defaultColorMap } from './defaults';
 
 const MATUGEN_ENABLED = options.theme.matugen;
 const MATUGEN_SETTINGS = options.theme.matugen_settings;
 
-interface SystemDependencies {
-    checkDependencies(dep: string): boolean;
-    executeCommand(cmd: string): Promise<string>;
-    notify(notification: { summary: string; body: string; iconName: string }): void;
-    isValidImage(path: string): boolean;
-}
+/**
+ * Service that integrates with Matugen to generate color schemes from wallpapers
+ */
+export class MatugenService {
+    private static _instance: MatugenService;
 
-class DefaultSystemDependencies implements SystemDependencies {
-    public checkDependencies(dep: string): boolean {
-        return dependencies(dep);
-    }
-
-    public async executeCommand(cmd: string): Promise<string> {
-        return bash(cmd);
-    }
-
-    public notify(notification: { summary: string; body: string; iconName: string }): void {
-        Notify(notification);
-    }
-
-    public isValidImage(path: string): boolean {
-        return isAnImage(path);
-    }
-}
-
-class MatugenService {
-    private _deps: SystemDependencies;
-
-    constructor(deps: SystemDependencies = new DefaultSystemDependencies()) {
-        this._deps = deps;
+    private constructor() {}
+
+    /**
+     * Gets the singleton instance of the MatugenService
+     *
+     * @returns The MatugenService instance
+     */
+    public static getInstance(): MatugenService {
+        if (this._instance === undefined) {
+            this._instance = new MatugenService();
+        }
+
+        return this._instance;
     }
 
+    /**
+     * Normalizes contrast value to be within Matugen's acceptable range
+     *
+     * @param contrast - The raw contrast value
+     * @returns Normalized contrast value between -1 and 1
+     */
     private _normalizeContrast(contrast: number): number {
         return Math.max(-1, Math.min(1, contrast));
     }
 
+    /**
+     * Generates a color scheme from the current wallpaper using Matugen
+     *
+     * @returns The generated color palette or undefined if generation fails
+     */
     public async generateMatugenColors(): Promise<MatugenColors | undefined> {
-        if (!MATUGEN_ENABLED.get() || !this._deps.checkDependencies('matugen')) {
+        if (!MATUGEN_ENABLED.get() || !SystemUtilities.checkDependencies('matugen')) {
             return;
         }
 
         const wallpaperPath = options.wallpaper.image.get();
 
-        if (!wallpaperPath || !this._deps.isValidImage(wallpaperPath)) {
-            this._deps.notify({
+        if (!wallpaperPath || !isAnImage(wallpaperPath)) {
+            SystemUtilities.notify({
                 summary: 'Matugen Failed',
                 body: "Please select a wallpaper in 'Theming > General' first.",
                 iconName: icons.ui.warning,
@@ -68,13 +69,13 @@ class MatugenService {
 
             const baseCommand = `matugen image -q "${wallpaperPath}" -t scheme-${schemeType} --contrast ${normalizedContrast}`;
 
-            const jsonResult = await this._deps.executeCommand(`${baseCommand} --dry-run --json hex`);
-            await this._deps.executeCommand(baseCommand);
+            const jsonResult = await SystemUtilities.bash(`${baseCommand} --dry-run --json hex`);
+            await SystemUtilities.bash(baseCommand);
 
             const parsedResult = JSON.parse(jsonResult);
             return parsedResult?.colors?.[mode];
         } catch (error) {
-            this._deps.notify({
+            SystemUtilities.notify({
                 summary: 'Matugen Error',
                 body: `An error occurred: ${error}`,
                 iconName: icons.ui.info,
@@ -84,10 +85,23 @@ class MatugenService {
         }
     }
 
+    /**
+     * Validates if a color string is a valid key in the default color map
+     *
+     * @param color - The color key to validate
+     * @returns Whether the color is a valid ColorMapKey
+     */
     public isColorKeyValid(color: string): color is ColorMapKey {
         return Object.prototype.hasOwnProperty.call(defaultColorMap, color);
     }
 
+    /**
+     * Maps a default color hex value to its Matugen-generated equivalent
+     *
+     * @param incomingHex - The original hex color to map
+     * @param matugenColors - The Matugen color palette to use for mapping
+     * @returns The mapped hex color or original if no mapping exists
+     */
     public getMatugenHex(incomingHex: HexColor, matugenColors?: MatugenColors): HexColor {
         if (!MATUGEN_ENABLED.get() || !matugenColors) {
             return incomingHex;
@@ -110,7 +124,3 @@ class MatugenService {
         return incomingHex;
     }
 }
-
-const matugenService = new MatugenService();
-
-export { matugenService };
diff --git a/src/services/matugen/variations.ts b/src/services/matugen/variations.ts
index fa427ad..27a74a6 100644
--- a/src/services/matugen/variations.ts
+++ b/src/services/matugen/variations.ts
@@ -1,10 +1,17 @@
-import { MatugenColors, MatugenVariations, MatugenVariation } from 'src/lib/options/options.types';
+import { MatugenColors, MatugenVariations, MatugenVariation } from 'src/lib/options/types';
 
 /*
  * NOTE: This maps the values of the default colors to the values generated by Matugen.
  * Each of the variations are carefully tested and curated to make sure that colors don't
  * have weird luminocity overlaps (light on light, dark on dark).
  */
+/**
+ * Maps Matugen color palette to predefined color variations for theme consistency
+ *
+ * @param matugenColors - The Matugen-generated color palette
+ * @param variation - The specific variation style to apply
+ * @returns Mapped color variation object
+ */
 export const getMatugenVariations = (
     matugenColors: MatugenColors,
     variation: MatugenVariations,
diff --git a/src/services/media/index.ts b/src/services/media/index.ts
new file mode 100644
index 0000000..ad71ee7
--- /dev/null
+++ b/src/services/media/index.ts
@@ -0,0 +1,526 @@
+import AstalMpris from 'gi://AstalMpris?version=0.1';
+import { bind, Variable } from 'astal';
+import { getTimeStamp } from 'src/components/menus/media/components/timebar/helpers';
+import { CurrentPlayer, MediaSubscriptionNames, MediaSubscriptions } from './types';
+import options from 'src/configuration';
+
+/**
+ * MediaManager handles media player state management across the application
+ *
+ * This class provides a centralized way to track and interact with media players.
+ * It handles connection/disconnection events, manages state variables, and keeps
+ * media information synchronized across the UI.
+ *
+ * Since Astal doesn't provide an intuitive way to bind to dynamically changing media
+ * players' properties, we have to handle that ourselves. This class will provide a collection
+ * of useful bindings to display the media info of the current media player.
+ */
+export class MediaPlayerService {
+    private static _instance: MediaPlayerService;
+    public activePlayer: Variable<CurrentPlayer> = Variable(undefined);
+
+    public timeStamp: Variable<string> = Variable('00:00');
+    public currentPosition: Variable<number> = Variable(0);
+
+    public loopStatus: Variable<AstalMpris.Loop> = Variable(AstalMpris.Loop.NONE);
+    public shuffleStatus: Variable<AstalMpris.Shuffle> = Variable(AstalMpris.Shuffle.OFF);
+    public playbackStatus: Variable<AstalMpris.PlaybackStatus> = Variable(AstalMpris.PlaybackStatus.STOPPED);
+
+    public canPlay: Variable<boolean> = Variable(false);
+    public canGoNext: Variable<boolean> = Variable(false);
+    public canGoPrevious: Variable<boolean> = Variable(false);
+
+    public mediaTitle: Variable<string> = Variable('');
+    public mediaAlbum: Variable<string> = Variable('-----');
+    public mediaArtist: Variable<string> = Variable('-----');
+    public mediaArtUrl: Variable<string> = Variable('');
+
+    private _mprisService: AstalMpris.Mpris;
+
+    private _subscriptions: MediaSubscriptions = {
+        position: undefined,
+        loop: undefined,
+        shuffle: undefined,
+        canPlay: undefined,
+        playbackStatus: undefined,
+        canGoNext: undefined,
+        canGoPrevious: undefined,
+        title: undefined,
+        album: undefined,
+        artist: undefined,
+        artUrl: undefined,
+    };
+
+    private constructor() {
+        this._mprisService = AstalMpris.get_default();
+        const { noMediaText } = options.menus.media;
+
+        this.mediaTitle.set(noMediaText.get());
+
+        this._mprisService.connect('player-closed', (_, closedPlayer) =>
+            this._handlePlayerClosed(closedPlayer),
+        );
+
+        this._mprisService.connect('player-added', (_, addedPlayer) => this._handlePlayerAdded(addedPlayer));
+
+        Variable.derive([bind(this.activePlayer)], (player) => {
+            this._updateAllMediaProperties(player);
+        });
+    }
+
+    public static getInstance(): MediaPlayerService {
+        if (this._instance === undefined) {
+            this._instance = new MediaPlayerService();
+        }
+
+        return this._instance;
+    }
+
+    /**
+     * Handles a new player being added
+     *
+     * Sets the new player as active if no player is currently active.
+     *
+     * @param addedPlayer The player that was added
+     */
+    private _handlePlayerAdded(addedPlayer: AstalMpris.Player): void {
+        if (this.activePlayer.get() === undefined) {
+            this.activePlayer.set(addedPlayer);
+        }
+    }
+
+    /**
+     * Handles a player being closed
+     *
+     * Switches to another player if available or clears the active player
+     * when the current player is closed.
+     *
+     * @param closedPlayer The player that was closed
+     */
+    private _handlePlayerClosed(closedPlayer: AstalMpris.Player): void {
+        if (
+            this._mprisService.get_players().length === 1 &&
+            closedPlayer.busName === this._mprisService.get_players()[0]?.busName
+        ) {
+            return this.activePlayer.set(undefined);
+        }
+
+        if (closedPlayer.busName === this.activePlayer.get()?.busName) {
+            const nextPlayer = this._mprisService
+                .get_players()
+                .find((player) => player.busName !== closedPlayer.busName);
+            this.activePlayer.set(nextPlayer);
+        }
+    }
+
+    /**
+     * Updates all media properties based on the current player
+     *
+     * This synchronizes all state variables with the current media player's state.
+     *
+     * @param player The current media player
+     */
+    private _updateAllMediaProperties(player: CurrentPlayer): void {
+        this._updatePosition(player);
+
+        this._updateLoop(player);
+        this._updateShuffle(player);
+        this._updatePlaybackStatus(player);
+
+        this._updateCanPlay(player);
+        this._updateCanGoNext(player);
+        this._updateCanGoPrevious(player);
+
+        this._updateTitle(player);
+        this._updateAlbum(player);
+        this._updateArtist(player);
+        this._updateArtUrl(player);
+    }
+
+    /**
+     * Updates the current playback position
+     *
+     * Tracks both the numeric position and formatted timestamp.
+     *
+     * @param player The current media player
+     */
+    private _updatePosition(player: CurrentPlayer): void {
+        this._resetSubscription('position');
+
+        if (player === undefined) {
+            this.timeStamp.set('00:00');
+            this.currentPosition.set(0);
+            return;
+        }
+
+        const positionBinding = bind(player, 'position');
+
+        this._subscriptions.position = Variable.derive(
+            [bind(positionBinding), bind(player, 'playbackStatus')],
+            (pos) => {
+                if (player?.length > 0) {
+                    this.timeStamp.set(getTimeStamp(pos, player.length));
+                    this.currentPosition.set(pos);
+                } else {
+                    this.timeStamp.set('00:00');
+                    this.currentPosition.set(0);
+                }
+            },
+        );
+
+        const initialPos = positionBinding.get();
+        this.timeStamp.set(getTimeStamp(initialPos, player.length));
+        this.currentPosition.set(initialPos);
+    }
+
+    /**
+     * Updates the loop status for the current player
+     *
+     * Tracks whether playback loops none, track, or playlist.
+     *
+     * @param player The current media player
+     */
+    private _updateLoop(player: CurrentPlayer): void {
+        this._resetSubscription('loop');
+
+        if (player === undefined) {
+            this.loopStatus.set(AstalMpris.Loop.NONE);
+            return;
+        }
+
+        const loopBinding = bind(player, 'loopStatus');
+
+        this._subscriptions.loop = Variable.derive(
+            [bind(loopBinding), bind(player, 'playbackStatus')],
+            (status) => {
+                if (player?.length > 0) {
+                    this.loopStatus.set(status);
+                } else {
+                    this.loopStatus.set(AstalMpris.Loop.NONE);
+                }
+            },
+        );
+
+        this.loopStatus.set(loopBinding.get());
+    }
+
+    /**
+     * Updates the shuffle status for the current player
+     *
+     * Tracks whether playback order is shuffled.
+     *
+     * @param player The current media player
+     */
+    private _updateShuffle(player: CurrentPlayer): void {
+        this._resetSubscription('shuffle');
+
+        if (player === undefined) {
+            this.shuffleStatus.set(AstalMpris.Shuffle.OFF);
+            return;
+        }
+
+        const shuffleBinding = bind(player, 'shuffleStatus');
+
+        this._subscriptions.shuffle = Variable.derive(
+            [bind(shuffleBinding), bind(player, 'playbackStatus')],
+            (status) => {
+                this.shuffleStatus.set(status ?? AstalMpris.Shuffle.OFF);
+            },
+        );
+
+        this.shuffleStatus.set(shuffleBinding.get());
+    }
+
+    /**
+     * Updates whether playback is possible with current player
+     *
+     * Used to enable/disable playback controls.
+     *
+     * @param player The current media player
+     */
+    private _updateCanPlay(player: CurrentPlayer): void {
+        this._resetSubscription('canPlay');
+
+        if (player === undefined) {
+            this.canPlay.set(false);
+            return;
+        }
+
+        const canPlayBinding = bind(player, 'canPlay');
+
+        this._subscriptions.canPlay = Variable.derive(
+            [canPlayBinding, bind(player, 'playbackStatus')],
+            (playable) => {
+                this.canPlay.set(playable ?? false);
+            },
+        );
+
+        this.canPlay.set(player.canPlay);
+    }
+
+    /**
+     * Updates the playback status (playing, paused, stopped)
+     *
+     * Used to show the correct playback status and control state.
+     *
+     * @param player The current media player
+     */
+    private _updatePlaybackStatus(player: CurrentPlayer): void {
+        this._resetSubscription('playbackStatus');
+
+        if (player === undefined) {
+            this.playbackStatus.set(AstalMpris.PlaybackStatus.STOPPED);
+            return;
+        }
+
+        const playbackStatusBinding = bind(player, 'playbackStatus');
+
+        this._subscriptions.playbackStatus = Variable.derive([playbackStatusBinding], (status) => {
+            this.playbackStatus.set(status ?? AstalMpris.PlaybackStatus.STOPPED);
+        });
+
+        this.playbackStatus.set(player.playbackStatus);
+    }
+
+    /**
+     * Updates whether the next track control is enabled
+     *
+     * Used to enable/disable skip forward controls.
+     *
+     * @param player The current media player
+     */
+    private _updateCanGoNext(player: CurrentPlayer): void {
+        this._resetSubscription('canGoNext');
+
+        if (player === undefined) {
+            this.canGoNext.set(false);
+            return;
+        }
+
+        const canGoNextBinding = bind(player, 'canGoNext');
+
+        this._subscriptions.canGoNext = Variable.derive(
+            [canGoNextBinding, bind(player, 'playbackStatus')],
+            (canNext) => {
+                this.canGoNext.set(canNext ?? false);
+            },
+        );
+
+        this.canGoNext.set(player.canGoNext);
+    }
+
+    /**
+     * Updates whether the previous track control is enabled
+     *
+     * Used to enable/disable skip backward controls.
+     *
+     * @param player The current media player
+     */
+    private _updateCanGoPrevious(player: CurrentPlayer): void {
+        this._resetSubscription('canGoPrevious');
+
+        if (player === undefined) {
+            this.canGoPrevious.set(false);
+            return;
+        }
+
+        const canGoPreviousBinding = bind(player, 'canGoPrevious');
+
+        this._subscriptions.canGoPrevious = Variable.derive(
+            [canGoPreviousBinding, bind(player, 'playbackStatus')],
+            (canPrev) => {
+                this.canGoPrevious.set(canPrev ?? false);
+            },
+        );
+
+        this.canGoPrevious.set(player.canGoPrevious);
+    }
+
+    /**
+     * Updates the media title display
+     *
+     * Shows title of current track or a placeholder when nothing is playing.
+     *
+     * @param player The current media player
+     */
+    private _updateTitle(player: CurrentPlayer): void {
+        this._resetSubscription('title');
+
+        const { noMediaText } = options.menus.media;
+
+        if (player === undefined) {
+            this.mediaTitle.set(noMediaText.get());
+            return;
+        }
+
+        const titleBinding = bind(player, 'title');
+
+        this._subscriptions.title = Variable.derive(
+            [titleBinding, bind(player, 'playbackStatus')],
+            (newTitle, pbStatus) => {
+                if (pbStatus === AstalMpris.PlaybackStatus.STOPPED) {
+                    return this.mediaTitle.set(noMediaText.get() ?? '-----');
+                }
+                this.mediaTitle.set(newTitle.length > 0 ? this._normalizeLabel(newTitle) : '-----');
+            },
+        );
+
+        const initialTitle = player.title;
+        this.mediaTitle.set(initialTitle.length > 0 ? this._normalizeLabel(initialTitle) : '-----');
+    }
+
+    /**
+     * Updates the album name display
+     *
+     * Shows album of current track or a placeholder when not available.
+     *
+     * @param player The current media player
+     */
+    private _updateAlbum(player: CurrentPlayer): void {
+        this._resetSubscription('album');
+
+        if (player === undefined) {
+            this.mediaAlbum.set('-----');
+            return;
+        }
+
+        const albumBinding = bind(player, 'album');
+
+        this._subscriptions.album = Variable.derive(
+            [albumBinding, bind(player, 'playbackStatus')],
+            (newAlbum) => {
+                this.mediaAlbum.set(newAlbum?.length > 0 ? this._normalizeLabel(newAlbum) : '-----');
+            },
+        );
+
+        const initialAlbum = player.album;
+        this.mediaAlbum.set(initialAlbum?.length > 0 ? this._normalizeLabel(initialAlbum) : '-----');
+    }
+
+    /**
+     * Updates the artist name display
+     *
+     * Shows artist of current track or a placeholder when not available.
+     *
+     * @param player The current media player
+     */
+    private _updateArtist(player: CurrentPlayer): void {
+        this._resetSubscription('artist');
+
+        if (player === undefined) {
+            this.mediaArtist.set('-----');
+            return;
+        }
+
+        const artistBinding = bind(player, 'artist');
+
+        this._subscriptions.artist = Variable.derive(
+            [artistBinding, bind(player, 'playbackStatus')],
+            (newArtist) => {
+                this.mediaArtist.set(newArtist?.length > 0 ? this._normalizeLabel(newArtist) : '-----');
+            },
+        );
+
+        const initialArtist = player.artist;
+        this.mediaArtist.set(initialArtist?.length > 0 ? this._normalizeLabel(initialArtist) : '-----');
+    }
+
+    /**
+     * Updates the album art URL
+     *
+     * Tracks the URL to the current album artwork if available.
+     *
+     * @param player The current media player
+     */
+    private _updateArtUrl(player: CurrentPlayer): void {
+        this._resetSubscription('artUrl');
+
+        if (player === undefined) {
+            this.mediaArtUrl.set('');
+            return;
+        }
+
+        const artUrlBinding = bind(player, 'artUrl');
+
+        this._subscriptions.artUrl = Variable.derive(
+            [artUrlBinding, bind(player, 'playbackStatus')],
+            (newArtUrl) => {
+                this.mediaArtUrl.set(newArtUrl ?? '');
+            },
+        );
+
+        this.mediaArtUrl.set(player.artUrl ?? '');
+    }
+
+    /**
+     * Normalizes a label by removing newlines
+     *
+     * Ensures text displays properly in the UI by converting newlines to spaces.
+     *
+     * @param label The label to normalize
+     * @returns Normalized label string
+     */
+    private _normalizeLabel(label: string): string {
+        return label.replace(/\r?\n/g, ' ');
+    }
+
+    /**
+     * Resets a subscription by dropping it and clearing its reference
+     *
+     * This helper method safely cleans up a specific subscription to prevent
+     * memory leaks and prepare for new subscription assignment. It's used
+     * when updating media properties to ensure proper cleanup of previous bindings.
+     *
+     * @param subscription - The key of the subscription to reset
+     */
+    private _resetSubscription(subscription: MediaSubscriptionNames): void {
+        this._subscriptions[subscription]?.drop();
+        this._subscriptions[subscription] = undefined;
+    }
+
+    /**
+     * Cleans up all subscriptions and bindings
+     *
+     * Should be called when the media manager is no longer needed
+     * to prevent memory leaks.
+     */
+    public dispose(): void {
+        Object.values(this._subscriptions).forEach((sub) => sub?.drop());
+
+        this.activePlayer.drop();
+
+        this.timeStamp.drop();
+        this.currentPosition.drop();
+
+        this.loopStatus.drop();
+        this.shuffleStatus.drop();
+        this.playbackStatus.drop();
+
+        this.canPlay.drop();
+        this.canGoNext.drop();
+        this.canGoPrevious.drop();
+
+        this.mediaTitle.drop();
+        this.mediaAlbum.drop();
+        this.mediaArtist.drop();
+        this.mediaArtUrl.drop();
+    }
+}
+
+const mediaPlayerManager = MediaPlayerService.getInstance();
+
+export const {
+    activePlayer,
+    timeStamp,
+    currentPosition,
+    loopStatus,
+    shuffleStatus,
+    canPlay,
+    playbackStatus,
+    canGoNext,
+    canGoPrevious,
+    mediaTitle,
+    mediaAlbum,
+    mediaArtist,
+    mediaArtUrl,
+} = mediaPlayerManager;
diff --git a/src/services/media/types.ts b/src/services/media/types.ts
new file mode 100644
index 0000000..f88ace6
--- /dev/null
+++ b/src/services/media/types.ts
@@ -0,0 +1,20 @@
+import { Variable } from 'astal';
+import AstalMpris from 'gi://AstalMpris?version=0.1';
+
+export interface MediaSubscriptions {
+    position: Variable<void> | undefined;
+    loop: Variable<void> | undefined;
+    shuffle: Variable<void> | undefined;
+    canPlay: Variable<void> | undefined;
+    playbackStatus: Variable<void> | undefined;
+    canGoNext: Variable<void> | undefined;
+    canGoPrevious: Variable<void> | undefined;
+    title: Variable<void> | undefined;
+    album: Variable<void> | undefined;
+    artist: Variable<void> | undefined;
+    artUrl: Variable<void> | undefined;
+}
+
+export type MediaSubscriptionNames = keyof MediaSubscriptions;
+
+export type CurrentPlayer = AstalMpris.Player | undefined;
diff --git a/src/services/network/ethernet.ts b/src/services/network/ethernet.ts
new file mode 100644
index 0000000..4157c12
--- /dev/null
+++ b/src/services/network/ethernet.ts
@@ -0,0 +1,102 @@
+import { bind, Variable } from 'astal';
+import AstalNetwork from 'gi://AstalNetwork?version=0.1';
+
+/**
+ * EthernetManager handles ethernet-related functionality for dropdowns
+ */
+export class EthernetManager {
+    private _astalNetwork: AstalNetwork.Network;
+
+    public wiredState: Variable<AstalNetwork.DeviceState> = Variable(AstalNetwork.DeviceState.UNKNOWN);
+    public wiredInternet: Variable<AstalNetwork.Internet> = Variable(AstalNetwork.Internet.DISCONNECTED);
+    public wiredIcon: Variable<string> = Variable('');
+    public wiredSpeed: Variable<number> = Variable(0);
+
+    private _wiredStateBinding: Variable<void> | undefined;
+    private _wiredInternetBinding: Variable<void> | undefined;
+    private _wiredIconBinding: Variable<void> | undefined;
+    private _wiredSpeedBinding: Variable<void> | undefined;
+
+    constructor(networkService: AstalNetwork.Network) {
+        this._astalNetwork = networkService;
+    }
+
+    /**
+     * Called when the wired service changes to update bindings
+     */
+    public onWiredServiceChanged(): void {
+        this._getWiredState();
+        this._getWiredInternet();
+        this._getWiredIcon();
+        this._getWiredSpeed();
+    }
+
+    /**
+     * Retrieves the current state of the wired network.
+     */
+    private _getWiredState(): void {
+        this._wiredStateBinding?.drop();
+        this._wiredStateBinding = undefined;
+
+        if (this._astalNetwork.wired === null) {
+            this.wiredState.set(AstalNetwork.DeviceState.UNAVAILABLE);
+            return;
+        }
+
+        this._wiredStateBinding = Variable.derive([bind(this._astalNetwork.wired, 'state')], (state) => {
+            this.wiredState.set(state);
+        });
+    }
+
+    /**
+     * Retrieves the current internet status of the wired network.
+     */
+    private _getWiredInternet(): void {
+        this._wiredInternetBinding?.drop();
+        this._wiredInternetBinding = undefined;
+
+        if (this._astalNetwork.wired === null) {
+            return;
+        }
+
+        this._wiredInternetBinding = Variable.derive(
+            [bind(this._astalNetwork.wired, 'internet')],
+            (internet) => {
+                this.wiredInternet.set(internet);
+            },
+        );
+    }
+
+    /**
+     * Retrieves the current icon for the wired network.
+     */
+    private _getWiredIcon(): void {
+        this._wiredIconBinding?.drop();
+        this._wiredIconBinding = undefined;
+
+        if (this._astalNetwork.wired === null) {
+            this.wiredIcon.set('network-wired-symbolic');
+            return;
+        }
+
+        this._wiredIconBinding = Variable.derive([bind(this._astalNetwork.wired, 'iconName')], (icon) => {
+            this.wiredIcon.set(icon);
+        });
+    }
+
+    /**
+     * Retrieves the current speed of the wired network.
+     */
+    private _getWiredSpeed(): void {
+        this._wiredSpeedBinding?.drop();
+        this._wiredSpeedBinding = undefined;
+
+        if (this._astalNetwork.wired === null) {
+            return;
+        }
+
+        this._wiredSpeedBinding = Variable.derive([bind(this._astalNetwork.wired, 'speed')], (speed) => {
+            this.wiredSpeed.set(speed);
+        });
+    }
+}
diff --git a/src/services/network/index.ts b/src/services/network/index.ts
new file mode 100644
index 0000000..fb055ad
--- /dev/null
+++ b/src/services/network/index.ts
@@ -0,0 +1,70 @@
+import { bind, Variable } from 'astal';
+import AstalNetwork from 'gi://AstalNetwork?version=0.1';
+import { WifiManager } from './wifi';
+import { EthernetManager } from './ethernet';
+import { WifiIcon, wifiIconMap } from './types';
+
+/**
+ * NetworkService consolidates all network-related functionality from various components
+ * into a single service for better organization and maintainability.
+ */
+export class NetworkService {
+    private static _instance: NetworkService;
+    private _astalNetwork: AstalNetwork.Network;
+
+    public wifi: WifiManager;
+    public ethernet: EthernetManager;
+
+    private constructor() {
+        this._astalNetwork = AstalNetwork.get_default();
+        this.wifi = new WifiManager(this._astalNetwork);
+        this.ethernet = new EthernetManager(this._astalNetwork);
+
+        this._setupBindings();
+    }
+
+    /**
+     * Gets the singleton instance of NetworkService
+     *
+     * @returns The NetworkService instance
+     */
+    public static getInstance(): NetworkService {
+        if (!this._instance) {
+            this._instance = new NetworkService();
+        }
+        return this._instance;
+    }
+
+    /**
+     * Sets up bindings to monitor network service changes
+     */
+    private _setupBindings(): void {
+        Variable.derive([bind(this._astalNetwork, 'wifi')], () => {
+            this.wifi.onWifiServiceChanged();
+        });
+
+        Variable.derive([bind(this._astalNetwork, 'wired')], () => {
+            this.ethernet.onWiredServiceChanged();
+        });
+    }
+
+    /**
+     * Retrieves the appropriate WiFi icon based on the provided icon name.
+     *
+     * @param iconName - The name of the icon to look up. If not provided, a default icon is returned.
+     * @returns The corresponding WiFi icon as a string.
+     */
+    public getWifiIcon(iconName?: string): WifiIcon {
+        if (iconName === undefined) {
+            return '󰤫';
+        }
+
+        const wifiIcon = wifiIconMap.get(iconName.toLowerCase());
+
+        if (wifiIcon) {
+            return wifiIcon;
+        }
+
+        return '󰤨';
+    }
+}
diff --git a/src/lib/constants/network.ts b/src/services/network/types.ts
similarity index 55%
rename from src/lib/constants/network.ts
rename to src/services/network/types.ts
index b345fd1..cf04922 100644
--- a/src/lib/constants/network.ts
+++ b/src/services/network/types.ts
@@ -1,5 +1,7 @@
 import AstalNetwork from 'gi://AstalNetwork?version=0.1';
 
+export type WifiIcon = '󰤩' | '󰤨' | '󰤪' | '󰤨' | '󰤩' | '󰤮' | '󰤨' | '󰤥' | '󰤢' | '󰤟' | '󰤯' | '󰤫';
+
 type DeviceSate = AstalNetwork.DeviceState;
 type DevceStates = {
     [key in DeviceSate]: string;
@@ -19,4 +21,23 @@ export const DEVICE_STATES: DevceStates = {
     [AstalNetwork.DeviceState.ACTIVATED]: 'Activated',
     [AstalNetwork.DeviceState.DEACTIVATING]: 'Deactivating',
     [AstalNetwork.DeviceState.FAILED]: 'Failed',
-};
+} as const;
+
+export const wifiIconMap = new Map<string, WifiIcon>([
+    ['network-wireless-acquiring', '󰤩'],
+    ['network-wireless-connected', '󰤨'],
+    ['network-wireless-encrypted', '󰤪'],
+    ['network-wireless-hotspot', '󰤨'],
+    ['network-wireless-no-route', '󰤩'],
+    ['network-wireless-offline', '󰤮'],
+    ['network-wireless-signal-excellent', '󰤨'],
+    ['network-wireless-signal-good', '󰤥'],
+    ['network-wireless-signal-ok', '󰤢'],
+    ['network-wireless-signal-weak', '󰤟'],
+    ['network-wireless-signal-none', '󰤯'],
+]);
+
+export const AP_FLAGS = {
+    NONE: 0,
+    PRIVACY: 1,
+} as const;
diff --git a/src/services/network/wifi.ts b/src/services/network/wifi.ts
new file mode 100644
index 0000000..e68eba6
--- /dev/null
+++ b/src/services/network/wifi.ts
@@ -0,0 +1,351 @@
+import { bind, execAsync, Variable } from 'astal';
+import { Astal } from 'astal/gtk3';
+import AstalNetwork from 'gi://AstalNetwork?version=0.1';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+import { isPrimaryClick } from 'src/lib/events/mouse';
+import { AP_FLAGS, DEVICE_STATES } from './types';
+
+/**
+ * WifiManager handles all WiFi-related functionality for staging and connecting to
+ * wireless networks
+ */
+export class WifiManager {
+    private _astalNetwork: AstalNetwork.Network;
+
+    public isWifiEnabled: Variable<boolean> = Variable(false);
+    public isScanning: Variable<boolean> = Variable(false);
+    public wifiAccessPoints: Variable<AstalNetwork.AccessPoint[]> = Variable([]);
+    public staging = Variable<AstalNetwork.AccessPoint | undefined>(undefined);
+    public connecting = Variable<string>('');
+
+    private _wifiEnabledBinding: Variable<void> | undefined;
+    private _scanningBinding: Variable<void> | undefined;
+    private _accessPointBinding: Variable<void> | undefined;
+
+    constructor(networkService: AstalNetwork.Network) {
+        this._astalNetwork = networkService;
+    }
+
+    /**
+     * Called when the WiFi service changes to update bindings
+     */
+    public onWifiServiceChanged(): void {
+        this._wifiEnabled();
+        this._scanningStatus();
+        this._accessPoints();
+    }
+
+    /**
+     * Checks if WiFi is enabled and updates the `isWifiEnabled` variable.
+     */
+    private _wifiEnabled(): void {
+        this._wifiEnabledBinding?.drop();
+        this._wifiEnabledBinding = undefined;
+
+        if (this._astalNetwork.wifi === null) {
+            return;
+        }
+
+        this._wifiEnabledBinding = Variable.derive(
+            [bind(this._astalNetwork.wifi, 'enabled')],
+            (isEnabled) => {
+                this.isWifiEnabled.set(isEnabled);
+            },
+        );
+    }
+
+    /**
+     * Updates the WiFi scanning status.
+     */
+    private _scanningStatus(): void {
+        this._scanningBinding?.drop();
+        this._scanningBinding = undefined;
+
+        if (this._astalNetwork.wifi === null) {
+            return;
+        }
+
+        this._scanningBinding = Variable.derive([bind(this._astalNetwork.wifi, 'scanning')], (scanning) => {
+            this.isScanning.set(scanning);
+        });
+    }
+
+    /**
+     * Updates the list of WiFi access points.
+     */
+    private _accessPoints(): void {
+        this._accessPointBinding?.drop();
+        this._accessPointBinding = undefined;
+
+        if (this._astalNetwork.wifi === null) {
+            return;
+        }
+
+        Variable.derive([bind(this._astalNetwork.wifi, 'accessPoints')], (axsPoints) => {
+            this.wifiAccessPoints.set(axsPoints);
+        });
+    }
+
+    /**
+     * Removes duplicate access points based on their SSID.
+     *
+     * @returns An array of deduplicated access points.
+     */
+    private _dedupeWAPs(): AstalNetwork.AccessPoint[] {
+        if (this._astalNetwork.wifi === null) {
+            return [];
+        }
+
+        const WAPs = this._astalNetwork.wifi.get_access_points();
+        const dedupMap: Record<string, AstalNetwork.AccessPoint> = {};
+
+        WAPs.forEach((item: AstalNetwork.AccessPoint) => {
+            if (item.ssid !== null && !Object.prototype.hasOwnProperty.call(dedupMap, item.ssid)) {
+                dedupMap[item.ssid] = item;
+            }
+        });
+
+        return Object.keys(dedupMap).map((itm) => dedupMap[itm]);
+    }
+
+    /**
+     * Determines if a given access point is currently in the staging area.
+     *
+     * @param wap - The access point to check.
+     * @returns True if the access point is in staging; otherwise, false.
+     */
+    private _isInStaging(wap: AstalNetwork.AccessPoint): boolean {
+        const wapInStaging = this.staging.get();
+        if (wapInStaging === undefined) {
+            return false;
+        }
+
+        return wap.bssid === wapInStaging.bssid;
+    }
+
+    /**
+     * Retrieves a list of filtered wireless access points by removing duplicates and excluding specific entries.
+     *
+     * @returns A filtered array of wireless access points.
+     */
+    public getFilteredWirelessAPs(): AstalNetwork.AccessPoint[] {
+        const dedupedWAPs = this._dedupeWAPs();
+
+        const filteredWAPs = dedupedWAPs
+            .filter((ap: AstalNetwork.AccessPoint) => {
+                return ap.ssid !== 'Unknown' && !this._isInStaging(ap);
+            })
+            .sort((a: AstalNetwork.AccessPoint, b: AstalNetwork.AccessPoint) => {
+                if (this.isApActive(a)) {
+                    return -1;
+                }
+
+                if (this.isApActive(b)) {
+                    return 1;
+                }
+
+                return b.strength - a.strength;
+            });
+
+        return filteredWAPs;
+    }
+
+    /**
+     * Determines whether the device is in an active state.
+     *
+     * @param state - The current state of the device.
+     * @returns True if the device is in an active state; otherwise, false.
+     */
+    public isApEnabled(state: AstalNetwork.DeviceState | undefined): boolean {
+        if (state === null) {
+            return false;
+        }
+
+        return !(
+            state === AstalNetwork.DeviceState.DISCONNECTED ||
+            state === AstalNetwork.DeviceState.UNAVAILABLE ||
+            state === AstalNetwork.DeviceState.FAILED
+        );
+    }
+
+    /**
+     * Checks if the given access point is the currently active one.
+     *
+     * @param accessPoint - The access point to check.
+     * @returns True if the access point is active; otherwise, false.
+     */
+    public isApActive(accessPoint: AstalNetwork.AccessPoint): boolean {
+        return accessPoint.ssid === this._astalNetwork.wifi?.activeAccessPoint?.ssid;
+    }
+
+    /**
+     * Checks if the specified access point is in the process of disconnecting.
+     *
+     * @param accessPoint - The access point to check.
+     * @returns True if the access point is disconnecting; otherwise, false.
+     */
+    public isDisconnecting(accessPoint: AstalNetwork.AccessPoint): boolean {
+        if (this.isApActive(accessPoint)) {
+            return this._astalNetwork.wifi?.state === AstalNetwork.DeviceState.DEACTIVATING;
+        }
+        return false;
+    }
+
+    /**
+     * Retrieves the current Wi-Fi status based on the network service state.
+     *
+     * @returns A string representing the current Wi-Fi status.
+     */
+    public getWifiStatus(): string {
+        const wifiState = this._astalNetwork.wifi?.state;
+
+        if (wifiState !== null) {
+            return DEVICE_STATES[wifiState];
+        }
+        return DEVICE_STATES[AstalNetwork.DeviceState.UNKNOWN];
+    }
+
+    /**
+     * Initiates a connection to the specified access point.
+     *
+     * @param accessPoint - The access point to connect to.
+     * @param event - The click event triggering the connection.
+     */
+    public connectToAP(accessPoint: AstalNetwork.AccessPoint, event: Astal.ClickEvent): void {
+        if (
+            accessPoint.bssid === this.connecting.get() ||
+            this.isApActive(accessPoint) ||
+            !isPrimaryClick(event)
+        ) {
+            return;
+        }
+
+        if (!accessPoint.flags || accessPoint.flags === AP_FLAGS.NONE) {
+            this.connecting.set(accessPoint.bssid ?? '');
+
+            execAsync(`nmcli device wifi connect ${accessPoint.bssid}`)
+                .then(() => {
+                    this.connecting.set('');
+                    this.staging.set({} as AstalNetwork.AccessPoint);
+                })
+                .catch((err: Error) => {
+                    this.connecting.set('');
+                    SystemUtilities.notify({
+                        summary: 'Network',
+                        body: err.message,
+                    });
+                });
+        } else {
+            this.staging.set(accessPoint);
+        }
+    }
+
+    /**
+     * Connects to a secured access point with a password.
+     *
+     * @param accessPoint - The access point to connect to.
+     * @param password - The password for the network.
+     */
+    public async connectToAPWithPassword(
+        accessPoint: AstalNetwork.AccessPoint,
+        password: string,
+    ): Promise<void> {
+        if (!accessPoint.ssid || !password) {
+            return Promise.reject(new Error('SSID and password are required'));
+        }
+
+        this.connecting.set(accessPoint.bssid || '');
+
+        const connectCommand = `nmcli device wifi connect "${accessPoint.ssid}" password "${password}"`;
+
+        return execAsync(connectCommand)
+            .then(() => {
+                this.connecting.set('');
+                this.staging.set(undefined);
+            })
+            .catch((err: Error) => {
+                this.connecting.set('');
+                throw err;
+            });
+    }
+
+    /**
+     * Disconnects from the specified access point.
+     *
+     * @param accessPoint - The access point to disconnect from.
+     * @param event - The click event triggering the disconnection.
+     */
+    public disconnectFromAP(accessPoint: AstalNetwork.AccessPoint, event: Astal.ClickEvent): void {
+        if (!isPrimaryClick(event)) {
+            return;
+        }
+
+        this.connecting.set(accessPoint.bssid || '');
+        execAsync('nmcli connection show --active').then((res: string) => {
+            const connectionId = this._getIdFromSsid(accessPoint.ssid || '', res);
+
+            if (connectionId === undefined) {
+                console.error(`Error while disconnecting "${accessPoint.ssid}": Connection ID not found`);
+                return;
+            }
+
+            execAsync(`nmcli connection down ${connectionId} "${accessPoint.ssid}"`)
+                .then(() => {
+                    this.connecting.set('');
+                })
+                .catch((err: unknown) => {
+                    this.connecting.set('');
+                    console.error(`Error while disconnecting "${accessPoint.ssid}": ${err}`);
+                });
+        });
+    }
+
+    /**
+     * Forgets the specified access point by deleting its connection.
+     *
+     * @param accessPoint - The access point to forget.
+     * @param event - The click event triggering the forget action.
+     */
+    public forgetAP(accessPoint: AstalNetwork.AccessPoint, event: Astal.ClickEvent): void {
+        if (!isPrimaryClick(event)) {
+            return;
+        }
+        this.connecting.set(accessPoint.bssid || '');
+        execAsync('nmcli connection show --active').then((res: string) => {
+            const connectionId = this._getIdFromSsid(accessPoint.ssid || '', res);
+
+            if (connectionId === undefined) {
+                console.error(`Error while forgetting "${accessPoint.ssid}": Connection ID not found`);
+                return;
+            }
+
+            execAsync(`nmcli connection delete ${connectionId} "${accessPoint.ssid}"`)
+                .then(() => {
+                    this.connecting.set('');
+                })
+                .catch((err: unknown) => {
+                    this.connecting.set('');
+                    console.error(`Error while forgetting "${accessPoint.ssid}": ${err}`);
+                });
+        });
+    }
+
+    /**
+     * Extracts the connection ID associated with a given SSID from the `nmcli` command output.
+     *
+     * @param ssid - The SSID of the network.
+     * @param nmcliOutput - The output string from the `nmcli` command.
+     * @returns The connection ID if found; otherwise, undefined.
+     */
+    private _getIdFromSsid(ssid: string, nmcliOutput: string): string | undefined {
+        const lines = nmcliOutput.trim().split('\n');
+
+        for (const line of lines) {
+            const columns = line.trim().split(/\s{2,}/);
+
+            if (columns[0].includes(ssid)) {
+                return columns[1];
+            }
+        }
+    }
+}
diff --git a/src/services/Brightness.ts b/src/services/system/brightness/index.ts
similarity index 55%
rename from src/services/Brightness.ts
rename to src/services/system/brightness/index.ts
index 12eef2e..1f3faa5 100644
--- a/src/services/Brightness.ts
+++ b/src/services/system/brightness/index.ts
@@ -1,59 +1,16 @@
 import { exec, GObject, monitorFile, property, readFileAsync, register } from 'astal';
-import { sh } from 'src/lib/utils';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
 
 const get = (args: string): number => Number(exec(`brightnessctl ${args}`));
 const screen = exec('bash -c "ls -w1 /sys/class/backlight | head -1"');
 const kbd = exec('bash -c "ls -w1 /sys/class/leds | grep \'::kbd_backlight$\' | head -1"');
 
+/**
+ * Service for managing screen and keyboard backlight brightness
+ */
 @register({ GTypeName: 'Brightness' })
-export default class Brightness extends GObject.Object {
-    public static instance: Brightness;
-
-    public static get_default(): Brightness {
-        if (Brightness.instance === undefined) {
-            Brightness.instance = new Brightness();
-        }
-        return Brightness.instance;
-    }
-
-    #kbdMax = kbd?.length ? get(`--device ${kbd} max`) : 0;
-    #kbd = kbd?.length ? get(`--device ${kbd} get`) : 0;
-    #screenMax = screen?.length ? get(`--device ${screen} max`) : 0;
-    #screen = screen?.length ? get(`--device ${screen} get`) / (get(`--device ${screen} max`) || 1) : 0;
-
-    @property(Number)
-    public get kbd(): number {
-        return this.#kbd;
-    }
-
-    @property(Number)
-    public get screen(): number {
-        return this.#screen;
-    }
-
-    public set kbd(value: number) {
-        if (value < 0 || value > this.#kbdMax || !kbd?.length) return;
-
-        sh(`brightnessctl -d ${kbd} s ${value} -q`).then(() => {
-            this.#kbd = value;
-            this.notify('kbd');
-        });
-    }
-
-    public set screen(percent: number) {
-        if (!screen?.length) return;
-
-        let brightnessPct = percent;
-
-        if (percent < 0) brightnessPct = 0;
-
-        if (percent > 1) brightnessPct = 1;
-
-        sh(`brightnessctl set ${Math.round(brightnessPct * 100)}% -d ${screen} -q`).then(() => {
-            this.#screen = brightnessPct;
-            this.notify('screen');
-        });
-    }
+export default class BrightnessService extends GObject.Object {
+    public static instance: BrightnessService;
 
     constructor() {
         super();
@@ -73,4 +30,77 @@ export default class Brightness extends GObject.Object {
             this.notify('kbd');
         });
     }
+
+    /**
+     * Gets the singleton instance of BrightnessService
+     *
+     * @returns The BrightnessService instance
+     */
+    public static getInstance(): BrightnessService {
+        if (BrightnessService.instance === undefined) {
+            BrightnessService.instance = new BrightnessService();
+        }
+        return BrightnessService.instance;
+    }
+
+    #kbdMax = kbd?.length ? get(`--device ${kbd} max`) : 0;
+    #kbd = kbd?.length ? get(`--device ${kbd} get`) : 0;
+    #screenMax = screen?.length ? get(`--device ${screen} max`) : 0;
+    #screen = screen?.length ? get(`--device ${screen} get`) / (get(`--device ${screen} max`) || 1) : 0;
+
+    /**
+     * Gets the keyboard backlight brightness level
+     *
+     * @returns The keyboard brightness as a number between 0 and the maximum value
+     */
+    @property(Number)
+    public get kbd(): number {
+        return this.#kbd;
+    }
+
+    /**
+     * Gets the screen brightness level
+     *
+     * @returns The screen brightness as a percentage (0-1)
+     */
+    @property(Number)
+    public get screen(): number {
+        return this.#screen;
+    }
+
+    /**
+     * Sets the keyboard backlight brightness level
+     *
+     * @param value - The brightness value to set (0 to maximum)
+     */
+    public set kbd(value: number) {
+        if (value < 0 || value > this.#kbdMax || !kbd?.length) return;
+
+        SystemUtilities.sh(`brightnessctl -d ${kbd} s ${value} -q`).then(() => {
+            this.#kbd = value;
+            this.notify('kbd');
+        });
+    }
+
+    /**
+     * Sets the screen brightness level
+     *
+     * @param percent - The brightness percentage to set (0-1)
+     */
+    public set screen(percent: number) {
+        if (!screen?.length) return;
+
+        let brightnessPct = percent;
+
+        if (percent < 0) brightnessPct = 0;
+
+        if (percent > 1) brightnessPct = 1;
+
+        SystemUtilities.sh(`brightnessctl set ${Math.round(brightnessPct * 100)}% -d ${screen} -q`).then(
+            () => {
+                this.#screen = brightnessPct;
+                this.notify('screen');
+            },
+        );
+    }
 }
diff --git a/src/services/system/cpuUsage/index.ts b/src/services/system/cpuUsage/index.ts
new file mode 100644
index 0000000..eb671e4
--- /dev/null
+++ b/src/services/system/cpuUsage/index.ts
@@ -0,0 +1,109 @@
+import { bind, Variable } from 'astal';
+import GTop from 'gi://GTop';
+import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
+import { CpuServiceCtor } from './types';
+
+/**
+ * Service for monitoring CPU usage percentage
+ */
+class CpuUsageService {
+    private _updateFrequency: Variable<number>;
+    private _previousCpuData = new GTop.glibtop_cpu();
+    private _cpuPoller: FunctionPoller<number, []>;
+    private _isInitialized = false;
+
+    private _cpu = Variable(0);
+
+    constructor({ frequency }: CpuServiceCtor = {}) {
+        this._updateFrequency = frequency ?? Variable(2000);
+        GTop.glibtop_get_cpu(this._previousCpuData);
+
+        this._calculateUsage = this._calculateUsage.bind(this);
+
+        this._cpuPoller = new FunctionPoller<number, []>(
+            this.cpu,
+            [bind(this._updateFrequency)],
+            bind(this._updateFrequency),
+            this._calculateUsage,
+        );
+    }
+
+    /**
+     * Manually refreshes the CPU usage reading
+     */
+    public refresh(): void {
+        this._cpu.set(this._calculateUsage());
+    }
+
+    /**
+     * Gets the CPU usage percentage variable
+     *
+     * @returns Variable containing CPU usage percentage (0-100)
+     */
+    public get cpu(): Variable<number> {
+        return this._cpu;
+    }
+
+    /**
+     * Calculates the current CPU usage percentage based on CPU time deltas
+     *
+     * @returns Current CPU usage percentage
+     */
+    private _calculateUsage(): number {
+        const currentCpuData = new GTop.glibtop_cpu();
+        GTop.glibtop_get_cpu(currentCpuData);
+
+        const totalDiff = currentCpuData.total - this._previousCpuData.total;
+        const idleDiff = currentCpuData.idle - this._previousCpuData.idle;
+
+        const cpuUsagePercentage = totalDiff > 0 ? ((totalDiff - idleDiff) / totalDiff) * 100 : 0;
+
+        this._previousCpuData = currentCpuData;
+
+        return cpuUsagePercentage;
+    }
+
+    /**
+     * Updates the polling frequency for CPU usage monitoring
+     *
+     * @param timerInMs - New polling interval in milliseconds
+     */
+    public updateTimer(timerInMs: number): void {
+        this._updateFrequency.set(timerInMs);
+    }
+
+    /**
+     * Initializes the CPU usage monitoring service
+     */
+    public initialize(): void {
+        if (!this._isInitialized) {
+            this._cpuPoller.initialize();
+            this._isInitialized = true;
+        }
+    }
+
+    /**
+     * Stops the CPU usage polling
+     */
+    public stopPoller(): void {
+        this._cpuPoller.stop();
+    }
+
+    /**
+     * Starts the CPU usage polling
+     */
+    public startPoller(): void {
+        this._cpuPoller.start();
+    }
+
+    /**
+     * Cleans up resources and stops monitoring
+     */
+    public destroy(): void {
+        this._cpuPoller.stop();
+        this._cpu.drop();
+        this._updateFrequency.drop();
+    }
+}
+
+export default CpuUsageService;
diff --git a/src/services/system/cpuUsage/types.ts b/src/services/system/cpuUsage/types.ts
new file mode 100644
index 0000000..3f3c2e5
--- /dev/null
+++ b/src/services/system/cpuUsage/types.ts
@@ -0,0 +1,5 @@
+import { Variable } from 'astal';
+
+export interface CpuServiceCtor {
+    frequency?: Variable<number>;
+}
diff --git a/src/services/system/cputemp/index.ts b/src/services/system/cputemp/index.ts
new file mode 100644
index 0000000..c49233a
--- /dev/null
+++ b/src/services/system/cputemp/index.ts
@@ -0,0 +1,163 @@
+import { bind, Variable } from 'astal';
+import GLib from 'gi://GLib?version=2.0';
+import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
+import { CpuTempServiceCtor } from './types';
+import { CpuTempSensorDiscovery } from './sensorDiscovery';
+
+/**
+ * Service for monitoring CPU temperature from system sensors
+ */
+class CpuTempService {
+    private _sensor: Variable<string>;
+    private _updateFrequency: Variable<number>;
+    private _tempPoller: FunctionPoller<number, []>;
+    private _isInitialized = false;
+    private _temperature = Variable(0);
+    private _resolvedSensorPath?: string;
+
+    constructor({ sensor, frequency }: CpuTempServiceCtor = {}) {
+        this._sensor = sensor ?? Variable('auto');
+        this._updateFrequency = frequency || Variable(2000);
+
+        this._readTemperature = this._readTemperature.bind(this);
+
+        this._tempPoller = new FunctionPoller<number, []>(
+            this._temperature,
+            [],
+            bind(this._updateFrequency),
+            this._readTemperature,
+        );
+
+        this._sensor.subscribe(() => this._resolveSensorPath());
+    }
+
+    /**
+     * Resolves the sensor path based on configuration
+     */
+    private _resolveSensorPath(): void {
+        const sensorValue = this._sensor.get();
+
+        if (sensorValue === 'auto' || sensorValue === '') {
+            this._resolvedSensorPath = CpuTempSensorDiscovery.discover();
+            if (!this._resolvedSensorPath) console.error('No CPU temperature sensor found');
+            return;
+        }
+
+        if (CpuTempSensorDiscovery.isValid(sensorValue)) {
+            this._resolvedSensorPath = sensorValue;
+            return;
+        }
+
+        console.error(`Invalid sensor: ${sensorValue}, falling back to auto-discovery`);
+        this._resolvedSensorPath = CpuTempSensorDiscovery.discover();
+    }
+
+    /**
+     * Reads CPU temperature from the sensor file and returns it in Celsius
+     */
+    private _readTemperature(): number {
+        if (!this._resolvedSensorPath) return 0;
+
+        try {
+            const [success, tempBytes] = GLib.file_get_contents(this._resolvedSensorPath);
+            if (!success || !tempBytes) return 0;
+
+            const tempInfo = new TextDecoder('utf-8').decode(tempBytes);
+            const tempValueMillidegrees = parseInt(tempInfo.trim(), 10);
+            return tempValueMillidegrees / 1000;
+        } catch (error) {
+            console.error('Error reading CPU temperature:', error);
+            return 0;
+        }
+    }
+
+    /**
+     * Gets the CPU temperature variable
+     *
+     * @returns Variable containing temperature in Celsius
+     */
+    public get temperature(): Variable<number> {
+        return this._temperature;
+    }
+
+    /**
+     * Gets the sensor configuration variable
+     *
+     * @returns Variable containing sensor path or 'auto'
+     */
+    public get sensor(): Variable<string> {
+        return this._sensor;
+    }
+
+    /**
+     * Gets the currently resolved sensor file path
+     *
+     * @returns The actual sensor path being used
+     */
+    public get currentSensorPath(): string | undefined {
+        return this._resolvedSensorPath;
+    }
+
+    /**
+     * Manually refreshes the temperature reading
+     */
+    public refresh(): void {
+        this._temperature.set(this._readTemperature());
+    }
+
+    /**
+     * Updates the sensor path and refreshes the temperature
+     *
+     * @param sensor - New sensor path or 'auto' for auto-discovery
+     */
+    public updateSensor(sensor: string): void {
+        this._sensor.set(sensor);
+        this.refresh();
+    }
+
+    /**
+     * Updates the polling frequency
+     *
+     * @param frequency - New polling interval in milliseconds
+     */
+    public updateFrequency(frequency: number): void {
+        this._updateFrequency.set(frequency);
+    }
+
+    /**
+     * Initializes the CPU temperature monitoring poller
+     */
+    public initialize(): void {
+        if (this._isInitialized) return;
+
+        this._resolveSensorPath();
+        this._tempPoller.initialize();
+        this._isInitialized = true;
+    }
+
+    /**
+     * Stops the temperature polling
+     */
+    public stopPoller(): void {
+        this._tempPoller.stop();
+    }
+
+    /**
+     * Starts the temperature polling
+     */
+    public startPoller(): void {
+        this._tempPoller.start();
+    }
+
+    /**
+     * Cleans up resources and stops monitoring
+     */
+    public destroy(): void {
+        this._tempPoller.stop();
+        this._temperature.drop();
+        this._sensor.drop();
+        this._updateFrequency.drop();
+    }
+}
+
+export default CpuTempService;
diff --git a/src/services/system/cputemp/sensorDiscovery.ts b/src/services/system/cputemp/sensorDiscovery.ts
new file mode 100644
index 0000000..c46b50e
--- /dev/null
+++ b/src/services/system/cputemp/sensorDiscovery.ts
@@ -0,0 +1,242 @@
+import GLib from 'gi://GLib?version=2.0';
+import { SensorInfo } from './types';
+
+export class CpuTempSensorDiscovery {
+    private static readonly _PRIORITY_SENSORS = [
+        /** Intel */
+        'coretemp',
+        /** AMD Ryzen */
+        'k10temp',
+    ];
+
+    private static readonly _HWMON_PATH = '/sys/class/hwmon';
+    private static readonly _THERMAL_PATH = '/sys/class/thermal';
+    private static readonly _THERMAL_FALLBACK = '/sys/class/thermal/thermal_zone0/temp';
+
+    /**
+     * Auto-discovers the best CPU temperature sensor available on the system
+     */
+    public static discover(): string | undefined {
+        const prioritySensor = this._findPrioritySensor();
+        if (prioritySensor) return prioritySensor;
+
+        if (this.isValid(this._THERMAL_FALLBACK)) return this._THERMAL_FALLBACK;
+
+        return;
+    }
+
+    /**
+     * Gets all available temperature sensors on the system
+     */
+    public static getAllSensors(): SensorInfo[] {
+        const hwmonSensors = this._getAllHwmonSensors();
+        const thermalSensors = this._getAllThermalSensors();
+
+        return [...hwmonSensors, ...thermalSensors];
+    }
+
+    /**
+     * Validates if sensor path exists and is readable
+     *
+     * @param path - Sensor file path to validate
+     */
+    public static isValid(path: string): boolean {
+        try {
+            const [success] = GLib.file_get_contents(path);
+            return success;
+        } catch {
+            return false;
+        }
+    }
+
+    /**
+     * Searches for priority CPU sensors (Intel coretemp, AMD k10temp) in order of preference
+     */
+    private static _findPrioritySensor(): string | undefined {
+        for (const sensorName of this._PRIORITY_SENSORS) {
+            const sensor = this._findHwmonSensor(sensorName);
+
+            if (!sensor || !this.isValid(sensor)) continue;
+
+            return sensor;
+        }
+
+        return;
+    }
+
+    /**
+     * Finds a specific hardware monitor sensor by chip name
+     *
+     * @param chipName - Name of the chip to search for (e.g., 'coretemp', 'k10temp')
+     */
+    private static _findHwmonSensor(chipName: string): string | undefined {
+        const dir = this._openDirectory(this._HWMON_PATH);
+        if (!dir) return;
+
+        try {
+            return this._searchDirectoryForChip(dir, chipName);
+        } finally {
+            dir.close();
+        }
+    }
+
+    /**
+     * Searches through a directory for a specific chip by name
+     *
+     * @param dir - Open directory handle to search through
+     * @param chipName - Name of the chip to find
+     */
+    private static _searchDirectoryForChip(dir: GLib.Dir, chipName: string): string | undefined {
+        let dirname: string | null;
+
+        while ((dirname = dir.read_name()) !== null) {
+            const sensor = this._checkHwmonDir(dirname, chipName);
+            if (sensor) return sensor;
+        }
+
+        return;
+    }
+
+    /**
+     * Checks if a hwmon directory contains the specified chip and returns its temp sensor path
+     *
+     * @param dirname - Directory name to check (e.g., 'hwmon0')
+     * @param chipName - Expected chip name to match against
+     */
+    private static _checkHwmonDir(dirname: string, chipName: string): string | undefined {
+        const nameFile = `${this._HWMON_PATH}/${dirname}/name`;
+        const name = this._readFileContent(nameFile);
+
+        if (!name || name !== chipName) return;
+
+        return `${this._HWMON_PATH}/${dirname}/temp1_input`;
+    }
+
+    /**
+     * Collects all hardware monitor sensors from the system
+     */
+    private static _getAllHwmonSensors(): SensorInfo[] {
+        const dir = this._openDirectory(this._HWMON_PATH);
+        if (!dir) return [];
+
+        try {
+            return this._collectHwmonSensors(dir);
+        } finally {
+            dir.close();
+        }
+    }
+
+    /**
+     * Iterates through hwmon directory entries and collects valid sensor information
+     *
+     * @param dir - Open hwmon directory handle
+     */
+    private static _collectHwmonSensors(dir: GLib.Dir): SensorInfo[] {
+        const sensors: SensorInfo[] = [];
+        let dirname: string | null;
+
+        while ((dirname = dir.read_name()) !== null) {
+            const sensor = this._createHwmonSensorInfo(dirname);
+            if (sensor) sensors.push(sensor);
+        }
+
+        return sensors;
+    }
+
+    /**
+     * Creates sensor info object for a hwmon device if it has valid temperature input
+     * @param dirname - hwmon directory name (e.g., 'hwmon0')
+     */
+    private static _createHwmonSensorInfo(dirname: string): SensorInfo | undefined {
+        const nameFile = `${this._HWMON_PATH}/${dirname}/name`;
+        const name = this._readFileContent(nameFile);
+
+        if (!name) return;
+
+        const tempPath = `${this._HWMON_PATH}/${dirname}/temp1_input`;
+        if (!this.isValid(tempPath)) return;
+
+        return {
+            path: tempPath,
+            name,
+            type: 'hwmon',
+        };
+    }
+
+    /**
+     * Collects all thermal zone sensors from the system
+     */
+    private static _getAllThermalSensors(): SensorInfo[] {
+        const dir = this._openDirectory(this._THERMAL_PATH);
+        if (!dir) return [];
+
+        try {
+            return this._collectThermalSensors(dir);
+        } finally {
+            dir.close();
+        }
+    }
+
+    /**
+     * Iterates through thermal zone entries and collects valid sensor information
+     *
+     * @param dir - Open thermal directory handle
+     */
+    private static _collectThermalSensors(dir: GLib.Dir): SensorInfo[] {
+        const sensors: SensorInfo[] = [];
+        let dirname: string | null;
+
+        while ((dirname = dir.read_name()) !== null) {
+            if (!dirname.startsWith('thermal_zone')) continue;
+
+            const sensor = this._createThermalSensorInfo(dirname);
+            if (sensor) sensors.push(sensor);
+        }
+
+        return sensors;
+    }
+
+    /**
+     * Creates sensor info object for a thermal zone if it has valid temperature file
+     *
+     * @param dirname - Thermal zone directory name (e.g., 'thermal_zone0')
+     */
+    private static _createThermalSensorInfo(dirname: string): SensorInfo | undefined {
+        const tempPath = `${this._THERMAL_PATH}/${dirname}/temp`;
+        if (!this.isValid(tempPath)) return;
+
+        return {
+            path: tempPath,
+            name: dirname,
+            type: 'thermal',
+        };
+    }
+
+    /**
+     * Safely opens a directory for reading, returns undefined on failure
+     *
+     * @param path - Full path to the directory to open
+     */
+    private static _openDirectory(path: string): GLib.Dir | undefined {
+        try {
+            return GLib.Dir.open(path, 0);
+        } catch {
+            return;
+        }
+    }
+
+    /**
+     * Reads and returns trimmed file content, returns undefined on failure
+     *
+     * @param path - Full path to the file to read
+     */
+    private static _readFileContent(path: string): string | undefined {
+        try {
+            const [success, bytes] = GLib.file_get_contents(path);
+            if (!success || !bytes) return;
+            return new TextDecoder('utf-8').decode(bytes).trim();
+        } catch {
+            return;
+        }
+    }
+}
diff --git a/src/services/system/cputemp/types.ts b/src/services/system/cputemp/types.ts
new file mode 100644
index 0000000..3affe2a
--- /dev/null
+++ b/src/services/system/cputemp/types.ts
@@ -0,0 +1,12 @@
+import { Variable } from 'astal';
+
+export interface CpuTempServiceCtor {
+    sensor?: Variable<string>;
+    frequency?: Variable<number>;
+}
+
+export interface SensorInfo {
+    path: string;
+    name: string;
+    type: 'hwmon' | 'thermal';
+}
diff --git a/src/services/system/gpuUsage/index.ts b/src/services/system/gpuUsage/index.ts
new file mode 100644
index 0000000..cfe0915
--- /dev/null
+++ b/src/services/system/gpuUsage/index.ts
@@ -0,0 +1,127 @@
+import { bind, exec, Variable } from 'astal';
+import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
+import { GpuServiceCtor, GPUStat } from './types';
+
+/**
+ * Service for monitoring GPU usage percentage using gpustat
+ */
+class GpuUsageService {
+    private _updateFrequency: Variable<number>;
+    private _gpuPoller: FunctionPoller<number, []>;
+    private _isInitialized = false;
+
+    public _gpu = Variable<number>(0);
+
+    constructor({ frequency }: GpuServiceCtor = {}) {
+        this._updateFrequency = frequency ?? Variable(2000);
+        this._calculateUsage = this._calculateUsage.bind(this);
+
+        this._gpuPoller = new FunctionPoller<number, []>(
+            this._gpu,
+            [],
+            bind(this._updateFrequency),
+            this._calculateUsage,
+        );
+    }
+
+    /**
+     * Manually refreshes the GPU usage reading
+     */
+    public refresh(): void {
+        this._gpu.set(this._calculateUsage());
+    }
+
+    /**
+     * Gets the GPU usage percentage variable
+     *
+     * @returns Variable containing GPU usage percentage (0-1)
+     */
+    public get gpu(): Variable<number> {
+        return this._gpu;
+    }
+
+    /**
+     * Calculates average GPU usage across all available GPUs
+     *
+     * @returns GPU usage as a decimal between 0 and 1
+     */
+    private _calculateUsage(): number {
+        try {
+            const gpuStats = exec('gpustat --json');
+            if (typeof gpuStats !== 'string') {
+                return 0;
+            }
+
+            const data = JSON.parse(gpuStats);
+
+            const totalGpu = 100;
+            const usedGpu =
+                data.gpus.reduce((acc: number, gpu: GPUStat) => {
+                    return acc + gpu['utilization.gpu'];
+                }, 0) / data.gpus.length;
+
+            return this._divide([totalGpu, usedGpu]);
+        } catch (error) {
+            if (error instanceof Error) {
+                console.error('Error getting GPU stats:', error.message);
+            } else {
+                console.error('Unknown error getting GPU stats');
+            }
+            return 0;
+        }
+    }
+
+    /**
+     * Converts usage percentage to decimal
+     *
+     * @param values - Tuple of [total, used] values
+     * @returns Usage as decimal between 0 and 1
+     */
+    private _divide([total, free]: number[]): number {
+        return free / total;
+    }
+
+    /**
+     * Updates the polling frequency
+     *
+     * @param timerInMs - New polling interval in milliseconds
+     */
+    public updateTimer(timerInMs: number): void {
+        this._updateFrequency.set(timerInMs);
+    }
+
+    /**
+     * Initializes the GPU usage monitoring poller
+     */
+    public initialize(): void {
+        if (!this._isInitialized) {
+            this._gpuPoller.initialize();
+            this._isInitialized = true;
+        }
+    }
+
+    /**
+     * Stops the GPU usage polling
+     */
+    public stopPoller(): void {
+        this._gpuPoller.stop();
+    }
+
+    /**
+     * Starts the GPU usage polling
+     */
+    public startPoller(): void {
+        this._gpuPoller.start();
+    }
+
+    /**
+     * Cleans up resources and stops monitoring
+     */
+    public destroy(): void {
+        this._gpuPoller.stop();
+        this._gpu.drop();
+        this._updateFrequency.drop();
+    }
+}
+
+export default GpuUsageService;
diff --git a/src/lib/types/gpustat.types.ts b/src/services/system/gpuUsage/types.ts
similarity index 61%
rename from src/lib/types/gpustat.types.ts
rename to src/services/system/gpuUsage/types.ts
index e3a5251..b9ca4c7 100644
--- a/src/lib/types/gpustat.types.ts
+++ b/src/services/system/gpuUsage/types.ts
@@ -1,14 +1,8 @@
-import { Process } from 'astal';
+import { Process, Variable } from 'astal';
 
-export type GPUStatProcess = {
-    username: string;
-    command: string;
-    full_command: string[];
-    gpu_memory_usage: number;
-    cpu_percent: number;
-    cpu_memory_usage: number;
-    pid: number;
-};
+export interface GpuServiceCtor {
+    frequency?: Variable<number>;
+}
 
 export type GPUStat = {
     index: number;
diff --git a/src/services/system/networkUsage/index.ts b/src/services/system/networkUsage/index.ts
new file mode 100644
index 0000000..fda3fa4
--- /dev/null
+++ b/src/services/system/networkUsage/index.ts
@@ -0,0 +1,277 @@
+import { bind, Variable } from 'astal';
+import GLib from 'gi://GLib';
+import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
+import { ByteMultiplier, NetworkResourceData, RateUnit } from '../types';
+import { NetworkServiceCtor, NetworkUsage } from './types';
+
+/**
+ * Service for monitoring network interface traffic and bandwidth usage
+ */
+class NetworkUsageService {
+    private _updateFrequency: Variable<number>;
+    private _shouldRound = false;
+    private _interfaceName = Variable('');
+    private _rateUnit = Variable<RateUnit>('auto');
+
+    private _previousNetUsage = { rx: 0, tx: 0, time: 0 };
+    private _networkPoller: FunctionPoller<NetworkResourceData, []>;
+    private _isInitialized = false;
+
+    public _network: Variable<NetworkResourceData>;
+
+    constructor({ frequency }: NetworkServiceCtor = {}) {
+        this._updateFrequency = frequency ?? Variable(2000);
+        const defaultNetstatData = this._getDefaultNetstatData(this._rateUnit.get());
+        this._network = Variable<NetworkResourceData>(defaultNetstatData);
+
+        this._calculateUsage = this._calculateUsage.bind(this);
+
+        this._networkPoller = new FunctionPoller<NetworkResourceData, []>(
+            this._network,
+            [],
+            bind(this._updateFrequency),
+            this._calculateUsage,
+        );
+    }
+
+    /**
+     * Manually refreshes the network usage statistics
+     */
+    public refresh(): void {
+        this._network.set(this._calculateUsage());
+    }
+
+    /**
+     * Gets the network usage data variable
+     *
+     * @returns Variable containing incoming and outgoing network rates
+     */
+    public get network(): Variable<NetworkResourceData> {
+        return this._network;
+    }
+
+    /**
+     * Calculates network usage rates for the configured interface
+     */
+    private _calculateUsage(): NetworkResourceData {
+        const rateUnit = this._rateUnit.get();
+        const interfaceName = this._interfaceName.get();
+
+        const DEFAULT_NETSTAT_DATA = this._getDefaultNetstatData(rateUnit);
+
+        try {
+            const { rx, tx, name } = this._getNetworkUsage(interfaceName);
+            const currentTime = Date.now();
+
+            if (!name) {
+                return DEFAULT_NETSTAT_DATA;
+            }
+
+            if (this._previousNetUsage.time === 0) {
+                this._previousNetUsage = { rx, tx, time: currentTime };
+                return DEFAULT_NETSTAT_DATA;
+            }
+
+            const timeDiff = Math.max((currentTime - this._previousNetUsage.time) / 1000, 1);
+            const rxRate = (rx - this._previousNetUsage.rx) / timeDiff;
+            const txRate = (tx - this._previousNetUsage.tx) / timeDiff;
+
+            this._previousNetUsage = { rx, tx, time: currentTime };
+
+            return {
+                in: this._formatRate(rxRate, rateUnit, this._shouldRound),
+                out: this._formatRate(txRate, rateUnit, this._shouldRound),
+            };
+        } catch (error) {
+            console.error('Error calculating network usage:', error);
+            return DEFAULT_NETSTAT_DATA;
+        }
+    }
+
+    /**
+     * Sets the network interface to monitor
+     *
+     * @param interfaceName - Name of the network interface (e.g., 'eth0', 'wlan0')
+     */
+    public setInterface(interfaceName: string): void {
+        this._interfaceName.set(interfaceName);
+        this._resetUsageHistory();
+    }
+
+    /**
+     * Sets the rate unit for formatting network speeds
+     *
+     * @param unit - Unit to display rates in ('auto', 'KiB', 'MiB', 'GiB')
+     */
+    public setRateUnit(unit: RateUnit): void {
+        this._rateUnit.set(unit);
+    }
+
+    /**
+     * Sets whether to round the rates to whole numbers
+     *
+     * @param round - Whether to round rates to integers
+     */
+    public setShouldRound(round: boolean): void {
+        this._shouldRound = round;
+    }
+
+    /**
+     * Updates the polling frequency
+     *
+     * @param timerInMs - New polling interval in milliseconds
+     */
+    public updateTimer(timerInMs: number): void {
+        this._updateFrequency.set(timerInMs);
+    }
+
+    /**
+     * Initializes the network usage monitoring poller
+     */
+    public initialize(): void {
+        if (!this._isInitialized) {
+            this._networkPoller.initialize();
+            this._isInitialized = true;
+        }
+    }
+
+    /**
+     * Stops the network monitoring poller
+     */
+    public stopPoller(): void {
+        this._networkPoller.stop();
+    }
+
+    /**
+     * Starts the network monitoring poller
+     */
+    public startPoller(): void {
+        this._networkPoller.start();
+    }
+
+    /**
+     * Resets the usage history for accurate rate calculation
+     */
+    private _resetUsageHistory(): void {
+        this._previousNetUsage = { rx: 0, tx: 0, time: 0 };
+    }
+
+    /**
+     * Formats the network rate based on the provided rate, type, and rounding option
+     *
+     * @param rate - Raw rate in bytes per second
+     * @param type - Unit type to format to
+     * @param round - Whether to round to whole numbers
+     * @returns Formatted rate string with unit suffix
+     */
+    private _formatRate(rate: number, type: RateUnit, round: boolean): string {
+        const fixed = round ? 0 : 2;
+
+        switch (true) {
+            case type === 'KiB':
+                return `${(rate / ByteMultiplier.KIBIBYTE).toFixed(fixed)} KiB/s`;
+            case type === 'MiB':
+                return `${(rate / ByteMultiplier.MEBIBYTE).toFixed(fixed)} MiB/s`;
+            case type === 'GiB':
+                return `${(rate / ByteMultiplier.GIBIBYTE).toFixed(fixed)} GiB/s`;
+            case rate >= ByteMultiplier.GIBIBYTE:
+                return `${(rate / ByteMultiplier.GIBIBYTE).toFixed(fixed)} GiB/s`;
+            case rate >= ByteMultiplier.MEBIBYTE:
+                return `${(rate / ByteMultiplier.MEBIBYTE).toFixed(fixed)} MiB/s`;
+            case rate >= ByteMultiplier.KIBIBYTE:
+                return `${(rate / ByteMultiplier.KIBIBYTE).toFixed(fixed)} KiB/s`;
+            case rate >= ByteMultiplier.BYTE:
+            default:
+                return `${rate.toFixed(fixed)} bytes/s`;
+        }
+    }
+
+    /**
+     * Parses a line of network interface data from /proc/net/dev
+     *
+     * @param line - Raw line from /proc/net/dev
+     * @returns Parsed network usage data or null if invalid
+     */
+    private _parseInterfaceData(line: string): NetworkUsage | null {
+        const trimmedLine = line.trim();
+        if (!trimmedLine || trimmedLine.startsWith('Inter-') || trimmedLine.startsWith('face')) {
+            return null;
+        }
+
+        const [iface, rx, , , , , , , , tx] = trimmedLine.split(/\s+/);
+        const rxValue = parseInt(rx, 10);
+        const txValue = parseInt(tx, 10);
+        const cleanedIface = iface.replace(':', '');
+
+        return { name: cleanedIface, rx: rxValue, tx: txValue };
+    }
+
+    /**
+     * Validates a network interface for monitoring
+     *
+     * @param iface - Interface data to validate
+     * @param interfaceName - Specific interface name to match (empty for auto)
+     * @returns Whether the interface is valid for monitoring
+     */
+    private _isValidInterface(iface: NetworkUsage | null, interfaceName: string): boolean {
+        if (!iface) return false;
+        if (interfaceName) return iface.name === interfaceName;
+
+        return iface.name !== 'lo' && iface.rx > 0 && iface.tx > 0;
+    }
+
+    /**
+     * Retrieves network usage for the specified interface from /proc/net/dev
+     *
+     * @param interfaceName - Name of interface to monitor (empty for auto-detect)
+     * @returns Network usage statistics
+     */
+    private _getNetworkUsage(interfaceName: string = ''): NetworkUsage {
+        const [success, data] = GLib.file_get_contents('/proc/net/dev');
+        const defaultStats = { name: '', rx: 0, tx: 0 };
+
+        if (!success) {
+            console.error('Failed to read /proc/net/dev');
+            return defaultStats;
+        }
+
+        const lines = new TextDecoder('utf-8').decode(data).split('\n');
+
+        for (const line of lines) {
+            const iface = this._parseInterfaceData(line);
+
+            if (this._isValidInterface(iface, interfaceName)) {
+                return iface ?? defaultStats;
+            }
+        }
+
+        return { name: '', rx: 0, tx: 0 };
+    }
+
+    /**
+     * Gets default network statistics data for initialization
+     *
+     * @param dataType - Rate unit type
+     * @returns Default network resource data
+     */
+    private _getDefaultNetstatData = (dataType: RateUnit): NetworkResourceData => {
+        if (dataType === 'auto') {
+            return { in: '0 Kib/s', out: '0 Kib/s' };
+        }
+
+        return { in: `0 ${dataType}/s`, out: `0 ${dataType}/s` };
+    };
+
+    /**
+     * Cleans up resources and stops monitoring
+     */
+    public destroy(): void {
+        this._networkPoller.stop();
+        this._network.drop();
+        this._interfaceName.drop();
+        this._rateUnit.drop();
+        this._updateFrequency.drop();
+    }
+}
+
+export default NetworkUsageService;
diff --git a/src/services/system/networkUsage/types.ts b/src/services/system/networkUsage/types.ts
new file mode 100644
index 0000000..0b4414f
--- /dev/null
+++ b/src/services/system/networkUsage/types.ts
@@ -0,0 +1,11 @@
+import { Variable } from 'astal';
+
+export interface NetworkServiceCtor {
+    frequency?: Variable<number>;
+}
+
+export interface NetworkUsage {
+    name: string;
+    rx: number;
+    tx: number;
+}
diff --git a/src/services/system/ramUsage/index.ts b/src/services/system/ramUsage/index.ts
new file mode 100644
index 0000000..0048e6e
--- /dev/null
+++ b/src/services/system/ramUsage/index.ts
@@ -0,0 +1,139 @@
+import { bind, GLib, Variable } from 'astal';
+import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
+import { GenericResourceData } from '../types';
+import { RamServiceCtor } from './types';
+
+/**
+ * Service for monitoring system RAM usage and statistics
+ */
+class RamUsageService {
+    private _updateFrequency: Variable<number>;
+    private _ramPoller: FunctionPoller<GenericResourceData, []>;
+    private _isInitialized = false;
+
+    private _ram = Variable<GenericResourceData>({ total: 0, used: 0, percentage: 0, free: 0 });
+
+    constructor({ frequency }: RamServiceCtor = {}) {
+        this._updateFrequency = frequency ?? Variable(2000);
+        this._calculateUsage = this._calculateUsage.bind(this);
+
+        this._ramPoller = new FunctionPoller<GenericResourceData, []>(
+            this._ram,
+            [bind(this._updateFrequency)],
+            bind(this._updateFrequency),
+            this._calculateUsage,
+        );
+    }
+
+    /**
+     * Manually refreshes the RAM usage statistics
+     */
+    public refresh(): void {
+        this._ram.set(this._calculateUsage());
+    }
+
+    /**
+     * Gets the RAM usage data variable
+     *
+     * @returns Variable containing RAM statistics (total, used, free, percentage)
+     */
+    public get ram(): Variable<GenericResourceData> {
+        return this._ram;
+    }
+
+    /**
+     * Calculates current RAM usage by parsing /proc/meminfo
+     *
+     * @returns RAM usage statistics including total, used, free, and percentage
+     */
+    private _calculateUsage(): GenericResourceData {
+        try {
+            const [success, meminfoBytes] = GLib.file_get_contents('/proc/meminfo');
+
+            if (!success || meminfoBytes === undefined) {
+                throw new Error('Failed to read /proc/meminfo or file content is null.');
+            }
+
+            const meminfo = new TextDecoder('utf-8').decode(meminfoBytes);
+
+            const totalMatch = meminfo.match(/MemTotal:\s+(\d+)/);
+            const availableMatch = meminfo.match(/MemAvailable:\s+(\d+)/);
+
+            if (!totalMatch || !availableMatch) {
+                throw new Error('Failed to parse /proc/meminfo for memory values.');
+            }
+
+            const totalRamInBytes = parseInt(totalMatch[1], 10) * 1024;
+            const availableRamInBytes = parseInt(availableMatch[1], 10) * 1024;
+
+            let usedRam = totalRamInBytes - availableRamInBytes;
+            usedRam = isNaN(usedRam) || usedRam < 0 ? 0 : usedRam;
+
+            return {
+                percentage: this._divide([totalRamInBytes, usedRam]),
+                total: totalRamInBytes,
+                used: usedRam,
+                free: availableRamInBytes,
+            };
+        } catch (error) {
+            console.error('Error calculating RAM usage:', error);
+            return { total: 0, used: 0, percentage: 0, free: 0 };
+        }
+    }
+
+    /**
+     * Calculates percentage of RAM used
+     *
+     * @param values - Tuple of [total, used] RAM values
+     * @returns RAM usage percentage with 2 decimal places
+     */
+    private _divide([total, used]: number[]): number {
+        const percentageTotal = (used / total) * 100;
+
+        return total > 0 ? parseFloat(percentageTotal.toFixed(2)) : 0;
+    }
+
+    /**
+     * Updates the polling frequency
+     *
+     * @param timerInMs - New polling interval in milliseconds
+     */
+    public updateTimer(timerInMs: number): void {
+        this._updateFrequency.set(timerInMs);
+    }
+
+    /**
+     * Initializes the RAM usage monitoring
+     */
+    public initialize(): void {
+        if (!this._isInitialized) {
+            this._ramPoller.initialize();
+            this._isInitialized = true;
+        }
+    }
+
+    /**
+     * Stops the RAM usage polling
+     */
+    public stopPoller(): void {
+        this._ramPoller.stop();
+    }
+
+    /**
+     * Starts the RAM usage polling
+     */
+    public startPoller(): void {
+        this._ramPoller.start();
+    }
+
+    /**
+     * Cleans up resources and stops monitoring
+     */
+    public destroy(): void {
+        this._ramPoller.stop();
+        this._ram.drop();
+        this._updateFrequency.drop();
+    }
+}
+
+export default RamUsageService;
diff --git a/src/services/system/ramUsage/types.ts b/src/services/system/ramUsage/types.ts
new file mode 100644
index 0000000..a494d2b
--- /dev/null
+++ b/src/services/system/ramUsage/types.ts
@@ -0,0 +1,5 @@
+import { Variable } from 'astal';
+
+export interface RamServiceCtor {
+    frequency?: Variable<number>;
+}
diff --git a/src/services/system/storage/index.ts b/src/services/system/storage/index.ts
new file mode 100644
index 0000000..d6230c5
--- /dev/null
+++ b/src/services/system/storage/index.ts
@@ -0,0 +1,255 @@
+import { bind, Variable } from 'astal';
+import GTop from 'gi://GTop';
+
+import { FunctionPoller } from 'src/lib/poller/FunctionPoller';
+import { GenericResourceData } from '../types';
+import { StorageServiceCtor, MultiDriveStorageData, DriveStorageData } from './types';
+import { unique } from 'src/lib/array/helpers';
+
+/**
+ * Monitors storage usage across multiple drives and provides real-time updates
+ *
+ * This service polls filesystem usage data for configured mount points and maintains
+ * both individual drive statistics and aggregated totals. The data updates automatically
+ * at the configured interval and supports dynamic path configuration.
+ */
+class StorageService {
+    private _updateFrequency: Variable<number>;
+    private _shouldRound: Variable<boolean>;
+    private _storagePoller: FunctionPoller<MultiDriveStorageData, []>;
+    private _pathsToMonitor: Variable<string[]>;
+    private _isInitialized = false;
+
+    private _storage = Variable<GenericResourceData>({ total: 0, used: 0, percentage: 0, free: 0 });
+    private _statBreakdown = Variable<MultiDriveStorageData>({
+        total: { total: 0, used: 0, percentage: 0, free: 0 },
+        drives: [],
+    });
+
+    /**
+     * Creates a new storage monitoring service
+     * @param frequency - Optional polling frequency variable
+     * @param round - Optional rounding preference variable
+     * @param pathsToMonitor - Optional array of mount paths to monitor
+     */
+    constructor({ frequency, round, pathsToMonitor }: StorageServiceCtor) {
+        this._updateFrequency = frequency ?? Variable(2000);
+        this._shouldRound = round ?? Variable(false);
+
+        this._pathsToMonitor = pathsToMonitor ?? Variable(['/']);
+        this._pathsToMonitor.set(unique(this._pathsToMonitor.get()));
+
+        this._storagePoller = new FunctionPoller<MultiDriveStorageData, []>(
+            this._statBreakdown,
+            [bind(this._updateFrequency), bind(this._pathsToMonitor), bind(this._shouldRound)],
+            bind(this._updateFrequency),
+            this._calculateMultiDriveUsage.bind(this),
+        );
+    }
+
+    /**
+     * Starts the storage monitoring poller and performs initial data collection
+     */
+    public initialize(): void {
+        if (!this._isInitialized) {
+            this._storagePoller.initialize();
+            this._isInitialized = true;
+
+            this._statBreakdown.subscribe(() => {
+                this._storage.set(this._statBreakdown.get().total);
+            });
+
+            this.refresh();
+        }
+    }
+
+    /**
+     * Manually triggers a storage data update outside the polling cycle
+     */
+    public refresh(): void {
+        const multiDriveData = this._calculateMultiDriveUsage();
+        this._statBreakdown.set(multiDriveData);
+        this._storage.set(multiDriveData.total);
+    }
+
+    /**
+     * Gets storage data for a specific drive by path
+     * @param path - The mount path of the drive
+     */
+    public getDriveInfo(path: string): DriveStorageData | undefined {
+        const data = this._statBreakdown.get();
+        return data.drives.find((drive) => drive.path === path);
+    }
+
+    /**
+     * Stops the automatic polling without destroying the service
+     */
+    public stopPoller(): void {
+        this._storagePoller.stop();
+    }
+
+    /**
+     * Resumes automatic polling after it has been stopped
+     */
+    public startPoller(): void {
+        this._storagePoller.start();
+    }
+
+    /**
+     * Cleans up all resources and stops monitoring
+     */
+    public destroy(): void {
+        this._storagePoller.stop();
+        this._storage.drop();
+        this._statBreakdown.drop();
+        this._pathsToMonitor.drop();
+        this._updateFrequency.drop();
+    }
+
+    /**
+     * Gets the aggregated storage data across all monitored drives
+     */
+    public get storage(): Variable<GenericResourceData> {
+        return this._storage;
+    }
+
+    /**
+     * Gets the detailed multi-drive storage data including individual drives
+     */
+    public get statBreakdown(): Variable<MultiDriveStorageData> {
+        return this._statBreakdown;
+    }
+
+    /**
+     * Updates the paths to monitor for storage usage
+     * @param paths - Array of mount paths to monitor
+     */
+    public set pathsToMonitor(paths: string[]) {
+        this._pathsToMonitor.set(unique(paths));
+    }
+
+    /**
+     * Sets whether percentage values should be rounded to whole numbers
+     * @param round - True to round percentages, false for 2 decimal places
+     */
+    public set round(round: boolean) {
+        this._shouldRound.set(round);
+    }
+
+    /**
+     * Updates the polling interval
+     * @param timerInMs - Interval in milliseconds between updates
+     */
+    public set frequency(timerInMs: number) {
+        this._updateFrequency.set(timerInMs);
+    }
+
+    /**
+     * Calculates storage usage for multiple drives and returns both individual and total data
+     */
+    private _calculateMultiDriveUsage(): MultiDriveStorageData {
+        try {
+            const paths = this._pathsToMonitor.get();
+            const drives = this._collectDriveData(paths);
+            const total = this._calculateTotalUsage(drives);
+
+            return { total, drives };
+        } catch (error) {
+            console.error('Error calculating multi-drive storage usage:', error);
+            return this._getEmptyStorageData();
+        }
+    }
+
+    /**
+     * Collects storage data for each monitored drive
+     * @param paths - Array of mount paths to monitor
+     */
+    private _collectDriveData(paths: string[]): DriveStorageData[] {
+        return paths
+            .map((path) => this._getDriveUsage(path))
+            .filter((drive): drive is DriveStorageData => drive !== null);
+    }
+
+    /**
+     * Gets storage usage for a single drive
+     * @param path - The mount path of the drive
+     */
+    private _getDriveUsage(path: string): DriveStorageData | null {
+        try {
+            const fsUsage = new GTop.glibtop_fsusage();
+            GTop.glibtop_get_fsusage(fsUsage, path);
+
+            const total = fsUsage.blocks * fsUsage.block_size;
+            const available = fsUsage.bavail * fsUsage.block_size;
+            const used = total - available;
+
+            if (total === 0) return null;
+
+            return {
+                path,
+                name: this._extractDriveName(path),
+                total,
+                used,
+                free: available,
+                percentage: this._calculatePercentage(total, used),
+            };
+        } catch (error) {
+            console.error(`Error getting storage info for ${path}:`, error);
+            return null;
+        }
+    }
+
+    /**
+     * Extracts a readable name from a mount path
+     * @param path - The mount path
+     */
+    private _extractDriveName(path: string): string {
+        return path.split('/').filter(Boolean).pop() || path;
+    }
+
+    /**
+     * Calculates total usage across all drives
+     * @param drives - Array of drive data
+     */
+    private _calculateTotalUsage(drives: DriveStorageData[]): GenericResourceData {
+        const totals = drives.reduce(
+            (acc, drive) => ({
+                total: acc.total + drive.total,
+                used: acc.used + drive.used,
+                free: acc.free + drive.free,
+            }),
+            { total: 0, used: 0, free: 0 },
+        );
+
+        return {
+            ...totals,
+            percentage: this._calculatePercentage(totals.total, totals.used),
+        };
+    }
+
+    /**
+     * Calculates percentage with rounding support
+     * @param total - Total amount
+     * @param used - Used amount
+     */
+    private _calculatePercentage(total: number, used: number): number {
+        if (total === 0) return 0;
+
+        const percentage = (used / total) * 100;
+        const shouldRound = this._shouldRound.get();
+
+        return shouldRound ? Math.round(percentage) : parseFloat(percentage.toFixed(2));
+    }
+
+    /**
+     * Returns empty storage data structure
+     */
+    private _getEmptyStorageData(): MultiDriveStorageData {
+        return {
+            total: { total: 0, used: 0, percentage: 0, free: 0 },
+            drives: [],
+        };
+    }
+}
+
+export default StorageService;
diff --git a/src/services/system/storage/types.ts b/src/services/system/storage/types.ts
new file mode 100644
index 0000000..fb6a160
--- /dev/null
+++ b/src/services/system/storage/types.ts
@@ -0,0 +1,18 @@
+import { Variable } from 'astal';
+import { GenericResourceData } from '../types';
+
+export interface StorageServiceCtor {
+    pathsToMonitor: Variable<string[]>;
+    frequency?: Variable<number>;
+    round?: Variable<boolean>;
+}
+
+export interface DriveStorageData extends GenericResourceData {
+    path: string;
+    name: string;
+}
+
+export interface MultiDriveStorageData {
+    total: GenericResourceData;
+    drives: DriveStorageData[];
+}
diff --git a/src/services/system/types.ts b/src/services/system/types.ts
new file mode 100644
index 0000000..285fd54
--- /dev/null
+++ b/src/services/system/types.ts
@@ -0,0 +1,47 @@
+export interface HardwarePollerInterface {
+    updateTimer(timerInMs: number): void;
+    stopPoller(): void;
+    startPoller(): void;
+}
+
+export interface ResourceUsageData {
+    total: number;
+    used: number;
+    percentage: number;
+    free: number;
+}
+
+export interface HardwareServiceConfig {
+    updateFrequency?: number;
+    shouldRound?: boolean;
+}
+
+type GenericResourceMetrics = {
+    total: number;
+    used: number;
+    percentage: number;
+};
+
+export type GenericResourceData = GenericResourceMetrics & {
+    free: number;
+};
+
+export type NetworkResourceData = {
+    in: string;
+    out: string;
+};
+
+export type ResourceLabelType = 'used/total' | 'used' | 'percentage' | 'free';
+
+export type NetstatLabelType = 'full' | 'in' | 'out';
+
+export type RateUnit = 'GiB' | 'MiB' | 'KiB' | 'auto';
+
+export enum ByteMultiplier {
+    BYTE = 1,
+    KIBIBYTE = 1024,
+    MEBIBYTE = 1024 * 1024,
+    GIBIBYTE = 1024 * 1024 * 1024,
+}
+
+export const LABEL_TYPES: ResourceLabelType[] = ['used/total', 'used', 'free', 'percentage'] as const;
diff --git a/src/services/system/uptime/index.ts b/src/services/system/uptime/index.ts
new file mode 100644
index 0000000..dc20287
--- /dev/null
+++ b/src/services/system/uptime/index.ts
@@ -0,0 +1,7 @@
+import { Variable } from 'astal';
+
+export const uptime = Variable(0).poll(
+    60_00,
+    'cat /proc/uptime',
+    (line): number => Number.parseInt(line.split('.')[0]) / 60,
+);
diff --git a/src/services/wallpaper/SwwwDaemon.ts b/src/services/wallpaper/SwwwDaemon.ts
new file mode 100644
index 0000000..41aa58e
--- /dev/null
+++ b/src/services/wallpaper/SwwwDaemon.ts
@@ -0,0 +1,136 @@
+import { execAsync } from 'astal/process';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+
+/**
+ * Manages the lifecycle of the swww daemon process
+ */
+export class SwwwDaemon {
+    private _isRunning = false;
+
+    /**
+     * Gets whether the daemon is currently running
+     */
+    public get isRunning(): boolean {
+        return this._isRunning;
+    }
+
+    /**
+     * Checks if swww is installed on the system
+     */
+    public isInstalled(): boolean {
+        return SystemUtilities.checkDependencies('swww');
+    }
+
+    /**
+     * Starts the swww daemon if not already running
+     */
+    public async start(): Promise<boolean> {
+        if (!this.isInstalled()) {
+            console.warn('swww is not installed, cannot start daemon');
+            return false;
+        }
+
+        const isAlreadyRunning = await this._checkIfRunning();
+        if (isAlreadyRunning) {
+            console.debug('swww-daemon is already running...');
+            this._isRunning = true;
+            return true;
+        }
+
+        return await this._startNewDaemon();
+    }
+
+    /**
+     * Stops the swww daemon
+     */
+    public async stop(): Promise<void> {
+        try {
+            await execAsync('swww kill');
+            this._isRunning = false;
+        } catch (err) {
+            await this._handleStopError(err);
+        }
+    }
+
+    /**
+     * Checks if the swww daemon is currently running
+     */
+    private async _checkIfRunning(): Promise<boolean> {
+        try {
+            await execAsync('swww query');
+            return true;
+        } catch {
+            return false;
+        }
+    }
+
+    /**
+     * Starts a new swww daemon instance
+     */
+    private async _startNewDaemon(): Promise<boolean> {
+        try {
+            await execAsync('swww-daemon');
+
+            const ready = await this._waitForReady();
+            this._isRunning = ready;
+
+            if (!ready) {
+                await this._cleanupFailedDaemon();
+                return false;
+            }
+
+            return ready;
+        } catch (err) {
+            console.error('Failed to start swww-daemon:', err);
+            this._isRunning = false;
+            return false;
+        }
+    }
+
+    /**
+     * Cleans up a failed daemon start attempt
+     */
+    private async _cleanupFailedDaemon(): Promise<void> {
+        try {
+            await execAsync('swww kill');
+        } catch {}
+        console.error('swww-daemon failed to become ready');
+    }
+
+    /**
+     * Handles errors when stopping the daemon
+     */
+    private async _handleStopError(err: unknown): Promise<void> {
+        const wasRunning = await this._checkIfRunning();
+
+        if (wasRunning) {
+            console.error('[SwwwDaemon] Failed to stop swww-daemon:', err);
+        } else {
+            console.debug('[SwwwDaemon] swww-daemon was not running');
+        }
+
+        this._isRunning = false;
+    }
+
+    /**
+     * Waits for swww daemon to be ready using exponential backoff
+     */
+    private async _waitForReady(): Promise<boolean> {
+        const maxAttempts = 10;
+        let delay = 50;
+
+        for (let i = 0; i < maxAttempts; i++) {
+            try {
+                await execAsync('swww query');
+                return true;
+            } catch {
+                if (i < maxAttempts - 1) {
+                    await new Promise((resolve) => setTimeout(resolve, delay));
+                    delay = Math.min(delay * 2, 1000);
+                }
+            }
+        }
+
+        return false;
+    }
+}
diff --git a/src/services/wallpaper/index.ts b/src/services/wallpaper/index.ts
new file mode 100644
index 0000000..39fa57e
--- /dev/null
+++ b/src/services/wallpaper/index.ts
@@ -0,0 +1,144 @@
+import GObject, { GLib, property, register, signal } from 'astal/gobject';
+import { monitorFile } from 'astal/file';
+import AstalHyprland from 'gi://AstalHyprland?version=0.1';
+import options from 'src/configuration';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+import { SwwwDaemon } from './SwwwDaemon';
+
+const hyprlandService = AstalHyprland.get_default();
+const WP = `${GLib.get_home_dir()}/.config/background`;
+
+/**
+ * Service for managing desktop wallpaper using swww daemon
+ */
+@register({ GTypeName: 'Wallpaper' })
+export class WallpaperService extends GObject.Object {
+    @property(String)
+    declare public wallpaper: string;
+
+    @signal(Boolean)
+    declare public changed: (event: boolean) => void;
+
+    private static _instance: WallpaperService;
+    private _blockMonitor = false;
+    private _daemon = new SwwwDaemon();
+
+    constructor() {
+        super();
+
+        this.wallpaper = WP;
+
+        monitorFile(WP, () => {
+            if (!this._blockMonitor && this._daemon.isRunning) {
+                this._wallpaper();
+            }
+        });
+
+        options.wallpaper.enable.subscribe(async (isWallpaperEnabled) => {
+            if (isWallpaperEnabled) {
+                const started = await this._daemon.start();
+                if (started) {
+                    this._wallpaper();
+                }
+            } else {
+                await this._daemon.stop();
+            }
+        });
+
+        if (options.wallpaper.enable.get()) {
+            this._daemon.start().then((started) => {
+                if (started) {
+                    this._wallpaper();
+                }
+            });
+        }
+    }
+
+    /**
+     * Gets the singleton instance of WallpaperService
+     *
+     * @returns The WallpaperService instance
+     */
+    public static getInstance(): WallpaperService {
+        if (this._instance === undefined) {
+            this._instance = new WallpaperService();
+        }
+
+        return this._instance;
+    }
+
+    /**
+     * Sets a new wallpaper from the specified file path
+     *
+     * @param path - Path to the wallpaper image file
+     */
+    public setWallpaper(path: string): void {
+        this._setWallpaper(path);
+    }
+
+    /**
+     * Checks if the wallpaper service is currently running
+     *
+     * @returns Whether swww daemon is active
+     */
+    public isRunning(): boolean {
+        return this._daemon.isRunning;
+    }
+
+    /**
+     * Applies the wallpaper using swww with a transition effect from cursor position
+     */
+    private _wallpaper(): void {
+        if (!this._daemon.isRunning) {
+            console.warn('Cannot set wallpaper: swww-daemon is not running');
+            return;
+        }
+
+        try {
+            const cursorPosition = hyprlandService.message('cursorpos');
+            const transitionCmd = [
+                'swww',
+                'img',
+                '--invert-y',
+                '--transition-type',
+                'grow',
+                '--transition-duration',
+                '1.5',
+                '--transition-fps',
+                '60',
+                '--transition-pos',
+                cursorPosition.replace(' ', ''),
+                `"${WP}"`,
+            ].join(' ');
+
+            SystemUtilities.sh(transitionCmd)
+                .then(() => {
+                    this.notify('wallpaper');
+                    this.emit('changed', true);
+                })
+                .catch((err) => {
+                    console.error('Error setting wallpaper:', err);
+                });
+        } catch (err) {
+            console.error('Error getting cursor position:', err);
+        }
+    }
+
+    /**
+     * Copies wallpaper to config location and applies it
+     *
+     * @param path - Path to the wallpaper image file
+     */
+    private async _setWallpaper(path: string): Promise<void> {
+        this._blockMonitor = true;
+
+        try {
+            await SystemUtilities.sh(`cp "${path}" "${WP}"`);
+            this._wallpaper();
+        } catch (error) {
+            console.error('Error setting wallpaper:', error);
+        } finally {
+            this._blockMonitor = false;
+        }
+    }
+}
diff --git a/src/services/weather/adapters/registry.ts b/src/services/weather/adapters/registry.ts
new file mode 100644
index 0000000..7b362b1
--- /dev/null
+++ b/src/services/weather/adapters/registry.ts
@@ -0,0 +1,31 @@
+import { WeatherProvider } from './types';
+import { WeatherApiAdapter } from './weatherApi';
+
+const weatherProviders: Record<string, WeatherProvider> = {
+    weatherapi: {
+        name: 'WeatherAPI.com',
+        baseUrl: 'https://api.weatherapi.com/v1',
+        adapter: new WeatherApiAdapter(),
+        formatUrl: (location: string, apiKey: string) =>
+            `https://api.weatherapi.com/v1/forecast.json?key=${apiKey}&q=${location}&days=1&aqi=no&alerts=no`,
+    },
+};
+
+/**
+ * Retrieves a weather provider configuration by its identifier
+ *
+ * @param providerId - Provider identifier (e.g., 'weatherapi', 'openweathermap')
+ * @returns Provider configuration or undefined if not found
+ */
+export function getWeatherProvider(providerId: string): WeatherProvider | undefined {
+    return weatherProviders[providerId];
+}
+
+/**
+ * Lists all available weather provider identifiers
+ *
+ * @returns Array of provider IDs
+ */
+export function getAvailableProviders(): string[] {
+    return Object.keys(weatherProviders);
+}
diff --git a/src/services/weather/adapters/types.ts b/src/services/weather/adapters/types.ts
new file mode 100644
index 0000000..54a6ec9
--- /dev/null
+++ b/src/services/weather/adapters/types.ts
@@ -0,0 +1,28 @@
+import { Weather } from '../types';
+
+export interface WeatherProvider {
+    /** Provider display name */
+    name: string;
+    /** Base API URL */
+    baseUrl?: string;
+    /** Adapter instance for data transformation */
+    adapter?: WeatherAdapter;
+    /** Function to construct API URL with parameters */
+    formatUrl?: (location: string, apiKey: string) => string;
+}
+
+export interface WeatherAdapter<T = unknown> {
+    /**
+     * Converts provider-specific response to standard Weather format
+     * @param data Raw data from weather provider
+     * @returns Standardized weather data
+     */
+    toStandardFormat(data: T): Weather;
+
+    /**
+     * Validates that required data is present in provider response
+     * @param data Raw data from weather provider
+     * @returns True if data contains all required fields
+     */
+    validate?(data: T): boolean;
+}
diff --git a/src/services/weather/adapters/weatherApi/index.ts b/src/services/weather/adapters/weatherApi/index.ts
new file mode 100644
index 0000000..c2480df
--- /dev/null
+++ b/src/services/weather/adapters/weatherApi/index.ts
@@ -0,0 +1,111 @@
+import type {
+    CurrentWeather,
+    DailyForecast,
+    HourlyForecast,
+    Weather,
+    WeatherLocation,
+    Wind,
+} from '../../types';
+import { WeatherAdapter } from '../types';
+import { WeatherApiStatusMapper } from './mapper';
+import type { WeatherApiForecastDay, WeatherApiHour, WeatherApiResponse } from './types';
+
+export class WeatherApiAdapter implements WeatherAdapter<WeatherApiResponse> {
+    private readonly _statusMapper: WeatherApiStatusMapper;
+
+    constructor() {
+        this._statusMapper = new WeatherApiStatusMapper();
+    }
+
+    /**
+     * Transforms WeatherAPI.com's response structure to the standard format
+     *
+     * @param data - Raw response from WeatherAPI.com
+     * @returns Normalized weather data
+     */
+    public toStandardFormat(data: WeatherApiResponse): Weather {
+        return {
+            location: this._mapLocation(data),
+            current: this._mapCurrentWeather(data),
+            forecast: data.forecast.forecastday.map(this._mapDailyForecast.bind(this)),
+            lastUpdated: new Date(),
+        };
+    }
+
+    /**
+     * Maps WeatherAPI location data to standard format
+     *
+     * @param data - WeatherAPI response data
+     * @returns Standardized location information
+     */
+    private _mapLocation(data: WeatherApiResponse): WeatherLocation {
+        const location = data.location;
+        return {
+            name: location.name,
+            region: location.region,
+        };
+    }
+
+    /**
+     * Maps current weather conditions to standard format
+     *
+     * @param data - WeatherAPI response data
+     * @returns Standardized current weather data
+     */
+    private _mapCurrentWeather(data: WeatherApiResponse): CurrentWeather {
+        const currentWeather = data.current;
+        const currentRainChance = data.forecast.forecastday[0].hour[0].chance_of_rain;
+
+        return {
+            temperature: currentWeather.temp_c,
+            condition: {
+                text: this._statusMapper.toStatus(currentWeather.condition.text),
+                isDay: currentWeather.is_day === 1,
+            },
+            wind: {
+                speed: currentWeather.wind_kph,
+                direction: currentWeather.wind_dir as Wind['direction'],
+            },
+            chanceOfRain: currentRainChance,
+            humidity: currentWeather.humidity,
+            feelsLike: currentWeather.feelslike_c,
+        };
+    }
+
+    /**
+     * Maps daily forecast data to standard format
+     *
+     * @param forecastDay - WeatherAPI forecast day data
+     * @returns Standardized daily forecast
+     */
+    private _mapDailyForecast(forecastDay: WeatherApiForecastDay): DailyForecast {
+        return {
+            date: new Date(forecastDay.date),
+            tempMin: forecastDay.day.mintemp_c,
+            tempMax: forecastDay.day.maxtemp_c,
+            condition: {
+                text: this._statusMapper.toStatus(forecastDay.day.condition.text),
+            },
+            chanceOfRain: forecastDay.day.daily_chance_of_rain,
+            hourly: forecastDay.hour.map(this._mapHourlyForecast.bind(this)),
+        };
+    }
+
+    /**
+     * Maps hourly forecast data to standard format
+     *
+     * @param hourlyForecast - WeatherAPI hourly forecast data
+     * @returns Standardized hourly forecast
+     */
+    private _mapHourlyForecast(hourlyForecast: WeatherApiHour): HourlyForecast {
+        return {
+            time: new Date(hourlyForecast.time),
+            temperature: hourlyForecast.temp_c,
+            condition: {
+                text: this._statusMapper.toStatus(hourlyForecast.condition.text.trim()),
+                isDay: hourlyForecast.is_day === 1,
+            },
+            chanceOfRain: hourlyForecast.chance_of_rain,
+        };
+    }
+}
diff --git a/src/services/weather/adapters/weatherApi/mapper.ts b/src/services/weather/adapters/weatherApi/mapper.ts
new file mode 100644
index 0000000..d22ad98
--- /dev/null
+++ b/src/services/weather/adapters/weatherApi/mapper.ts
@@ -0,0 +1,71 @@
+import { WeatherStatus } from '../../types';
+import { WeatherApiIcon } from './types';
+
+export class WeatherApiStatusMapper {
+    private readonly _WEATHER_API_STATUS_MAP: Record<WeatherApiIcon, WeatherStatus> = {
+        warning: 'WARNING',
+        sunny: 'SUNNY',
+        clear: 'CLEAR',
+        partly_cloudy: 'PARTLY CLOUDY',
+        partly_cloudy_night: 'PARTLY CLOUDY NIGHT',
+        cloudy: 'CLOUDY',
+        overcast: 'PARTLY CLOUDY',
+        mist: 'FOG',
+        patchy_rain_nearby: 'LIGHT RAIN',
+        patchy_rain_possible: 'LIGHT RAIN',
+        patchy_snow_possible: 'SNOW',
+        patchy_sleet_possible: 'SLEET',
+        patchy_freezing_drizzle_possible: 'SLEET',
+        thundery_outbreaks_possible: 'THUNDERSTORM',
+        blowing_snow: 'HEAVY SNOW',
+        blizzard: 'HEAVY SNOW',
+        fog: 'FOG',
+        freezing_fog: 'FOG',
+        patchy_light_drizzle: 'LIGHT RAIN',
+        light_drizzle: 'LIGHT RAIN',
+        freezing_drizzle: 'SLEET',
+        heavy_freezing_drizzle: 'SLEET',
+        patchy_light_rain: 'LIGHT RAIN',
+        light_rain: 'LIGHT RAIN',
+        moderate_rain_at_times: 'RAIN',
+        moderate_rain: 'LIGHT RAIN',
+        heavy_rain_at_times: 'HEAVY RAIN',
+        heavy_rain: 'HEAVY RAIN',
+        light_freezing_rain: 'SLEET',
+        moderate_or_heavy_freezing_rain: 'SLEET',
+        light_sleet: 'SLEET',
+        moderate_or_heavy_sleet: 'SLEET',
+        patchy_light_snow: 'SNOW',
+        light_snow: 'SNOW',
+        patchy_moderate_snow: 'SNOW',
+        moderate_snow: 'HEAVY SNOW',
+        patchy_heavy_snow: 'HEAVY SNOW',
+        heavy_snow: 'HEAVY SNOW',
+        ice_pellets: 'HAIL',
+        light_rain_shower: 'HEAVY RAIN',
+        moderate_or_heavy_rain_shower: 'HEAVY RAIN',
+        torrential_rain_shower: 'HEAVY RAIN',
+        light_sleet_showers: 'SLEET',
+        moderate_or_heavy_sleet_showers: 'SLEET',
+        light_snow_showers: 'SNOW',
+        moderate_or_heavy_snow_showers: 'SNOW',
+        light_showers_of_ice_pellets: 'HAIL',
+        moderate_or_heavy_showers_of_ice_pellets: 'HAIL',
+        patchy_light_rain_with_thunder: 'THUNDERSTORM',
+        moderate_or_heavy_rain_with_thunder: 'THUNDERSTORM',
+        moderate_or_heavy_rain_in_area_with_thunder: 'THUNDERSTORM',
+        patchy_light_snow_with_thunder: 'HEAVY SNOW',
+        moderate_or_heavy_snow_with_thunder: 'HEAVY SNOW',
+    };
+
+    /**
+     * Maps weather API status strings to standardized WeatherStatus
+     *
+     * @param status - The weather status string from the API
+     * @returns The mapped WeatherStatus
+     */
+    public toStatus(status: string): WeatherStatus {
+        const snakeCasedStatus = status.toLowerCase().replace(' ', '_');
+        return this._WEATHER_API_STATUS_MAP[snakeCasedStatus as WeatherApiIcon] ?? 'WARNING';
+    }
+}
diff --git a/src/services/weather/adapters/weatherApi/types.ts b/src/services/weather/adapters/weatherApi/types.ts
new file mode 100644
index 0000000..a7438d4
--- /dev/null
+++ b/src/services/weather/adapters/weatherApi/types.ts
@@ -0,0 +1,192 @@
+export interface WeatherApiResponse {
+    location: WeatherApiLocation;
+    current: WeatherApiCurrent;
+    forecast: WeatherApiForecast;
+}
+
+export interface WeatherApiLocation {
+    name: string;
+    region: string;
+    country: string;
+    lat: number;
+    lon: number;
+    tz_id: string;
+    localtime_epoch: number;
+    localtime: string;
+}
+
+export interface WeatherApiCurrent {
+    last_updated_epoch: number;
+    last_updated: string;
+    temp_c: number;
+    temp_f: number;
+    is_day: number;
+    condition: WeatherApiCondition;
+    wind_mph: number;
+    wind_kph: number;
+    wind_degree: number;
+    wind_dir: string;
+    pressure_mb: number;
+    pressure_in: number;
+    precip_mm: number;
+    precip_in: number;
+    humidity: number;
+    cloud: number;
+    feelslike_c: number;
+    feelslike_f: number;
+    windchill_c: number;
+    windchill_f: number;
+    heatindex_c: number;
+    heatindex_f: number;
+    dewpoint_c: number;
+    dewpoint_f: number;
+    vis_km: number;
+    vis_miles: number;
+    uv: number;
+    gust_mph: number;
+    gust_kph: number;
+}
+
+export interface WeatherApiCondition {
+    text: string;
+    icon: string;
+    code: number;
+}
+
+export interface WeatherApiForecast {
+    forecastday: WeatherApiForecastDay[];
+}
+
+export interface WeatherApiForecastDay {
+    date: string;
+    date_epoch: number;
+    day: WeatherApiDay;
+    astro: WeatherApiAstro;
+    hour: WeatherApiHour[];
+}
+
+export interface WeatherApiDay {
+    maxtemp_c: number;
+    maxtemp_f: number;
+    mintemp_c: number;
+    mintemp_f: number;
+    avgtemp_c: number;
+    avgtemp_f: number;
+    maxwind_mph: number;
+    maxwind_kph: number;
+    totalprecip_mm: number;
+    totalprecip_in: number;
+    totalsnow_cm: number;
+    avgvis_km: number;
+    avgvis_miles: number;
+    avghumidity: number;
+    daily_will_it_rain: number;
+    daily_chance_of_rain: number;
+    daily_will_it_snow: number;
+    daily_chance_of_snow: number;
+    condition: WeatherApiCondition;
+    uv: number;
+}
+
+export interface WeatherApiAstro {
+    sunrise: string;
+    sunset: string;
+    moonrise: string;
+    moonset: string;
+    moon_phase: string;
+    moon_illumination: number;
+    is_moon_up: number;
+    is_sun_up: number;
+}
+
+export interface WeatherApiHour {
+    time_epoch: number;
+    time: string;
+    temp_c: number;
+    temp_f: number;
+    is_day: number;
+    condition: WeatherApiCondition;
+    wind_mph: number;
+    wind_kph: number;
+    wind_degree: number;
+    wind_dir: string;
+    pressure_mb: number;
+    pressure_in: number;
+    precip_mm: number;
+    precip_in: number;
+    snow_cm: number;
+    humidity: number;
+    cloud: number;
+    feelslike_c: number;
+    feelslike_f: number;
+    windchill_c: number;
+    windchill_f: number;
+    heatindex_c: number;
+    heatindex_f: number;
+    dewpoint_c: number;
+    dewpoint_f: number;
+    will_it_rain: number;
+    chance_of_rain: number;
+    will_it_snow: number;
+    chance_of_snow: number;
+    vis_km: number;
+    vis_miles: number;
+    gust_mph: number;
+    gust_kph: number;
+    uv: number;
+}
+
+export type WeatherApiIcon =
+    | 'warning'
+    | 'sunny'
+    | 'clear'
+    | 'partly_cloudy'
+    | 'partly_cloudy_night'
+    | 'cloudy'
+    | 'overcast'
+    | 'mist'
+    | 'patchy_rain_nearby'
+    | 'patchy_rain_possible'
+    | 'patchy_snow_possible'
+    | 'patchy_sleet_possible'
+    | 'patchy_freezing_drizzle_possible'
+    | 'thundery_outbreaks_possible'
+    | 'blowing_snow'
+    | 'blizzard'
+    | 'fog'
+    | 'freezing_fog'
+    | 'patchy_light_drizzle'
+    | 'light_drizzle'
+    | 'freezing_drizzle'
+    | 'heavy_freezing_drizzle'
+    | 'patchy_light_rain'
+    | 'light_rain'
+    | 'moderate_rain_at_times'
+    | 'moderate_rain'
+    | 'heavy_rain_at_times'
+    | 'heavy_rain'
+    | 'light_freezing_rain'
+    | 'moderate_or_heavy_freezing_rain'
+    | 'light_sleet'
+    | 'moderate_or_heavy_sleet'
+    | 'patchy_light_snow'
+    | 'light_snow'
+    | 'patchy_moderate_snow'
+    | 'moderate_snow'
+    | 'patchy_heavy_snow'
+    | 'heavy_snow'
+    | 'ice_pellets'
+    | 'light_rain_shower'
+    | 'moderate_or_heavy_rain_shower'
+    | 'torrential_rain_shower'
+    | 'light_sleet_showers'
+    | 'moderate_or_heavy_sleet_showers'
+    | 'light_snow_showers'
+    | 'moderate_or_heavy_snow_showers'
+    | 'light_showers_of_ice_pellets'
+    | 'moderate_or_heavy_showers_of_ice_pellets'
+    | 'patchy_light_rain_with_thunder'
+    | 'moderate_or_heavy_rain_with_thunder'
+    | 'moderate_or_heavy_rain_in_area_with_thunder'
+    | 'patchy_light_snow_with_thunder'
+    | 'moderate_or_heavy_snow_with_thunder';
diff --git a/src/services/weather/default.ts b/src/services/weather/default.ts
new file mode 100644
index 0000000..2ee6a8a
--- /dev/null
+++ b/src/services/weather/default.ts
@@ -0,0 +1,38 @@
+import { Weather } from './types';
+
+export const DEFAULT_WEATHER: Weather = {
+    location: {
+        name: 'Unknown',
+        region: '',
+        country: '',
+    },
+    current: {
+        temperature: 0,
+        feelsLike: 0,
+        condition: {
+            text: 'WARNING',
+            isDay: true,
+        },
+        wind: {
+            speed: 0,
+            direction: 'N',
+            degree: 0,
+        },
+        humidity: 0,
+    },
+    forecast: [
+        {
+            date: new Date(),
+            tempMin: 0,
+            tempMax: 0,
+            condition: {
+                text: 'WARNING',
+                isDay: true,
+            },
+            chanceOfRain: 0,
+            hourly: [],
+        },
+    ],
+    lastUpdated: new Date(),
+    provider: 'none',
+};
diff --git a/src/services/weather/formatters/index.ts b/src/services/weather/formatters/index.ts
new file mode 100644
index 0000000..5a54ce8
--- /dev/null
+++ b/src/services/weather/formatters/index.ts
@@ -0,0 +1,40 @@
+import { WindDirection } from '../types';
+
+/**
+ * Converts wind degrees to compass direction
+ *
+ * @param degrees - Wind direction in degrees (0-360)
+ * @returns Compass direction
+ */
+export const windDegreesToDirection = (degrees: number): WindDirection => {
+    const directions: WindDirection[] = [
+        'N',
+        'NNE',
+        'NE',
+        'ENE',
+        'E',
+        'ESE',
+        'SE',
+        'SSE',
+        'S',
+        'SSW',
+        'SW',
+        'WSW',
+        'W',
+        'WNW',
+        'NW',
+        'NNW',
+    ];
+    const index = Math.round(degrees / 22.5) % 16;
+    return directions[index];
+};
+
+/**
+ * Normalizes weather condition codes to string format
+ *
+ * @param providerCode - Code from weather provider (string or number)
+ * @returns Normalized string code
+ */
+export const normalizeConditionCode = (providerCode: string | number): string => {
+    return String(providerCode);
+};
diff --git a/src/services/weather/index.ts b/src/services/weather/index.ts
new file mode 100644
index 0000000..f232137
--- /dev/null
+++ b/src/services/weather/index.ts
@@ -0,0 +1,332 @@
+import { AstalIO, bind, interval, Variable } from 'astal';
+import { getWeatherProvider } from 'src/services/weather/adapters/registry';
+import { WeatherApiKeyManager } from './keyManager';
+import options from 'src/configuration';
+import { Opt } from 'src/lib/options';
+import { httpClient } from 'src/lib/httpClient';
+import { GaugeIcon, Percentage, Weather, WeatherIcon } from './types';
+import { DEFAULT_WEATHER } from './default';
+import { WeatherProvider } from './adapters/types';
+import { TemperatureConverter } from 'src/lib/units/temperature';
+import { SpeedConverter } from 'src/lib/units/speed';
+import { UnitType } from 'src/lib/units/temperature/types';
+
+/**
+ * Service for fetching and managing weather data from various providers
+ */
+export default class WeatherService {
+    public static instance: WeatherService;
+
+    private _currentProvider = 'weatherapi';
+
+    private readonly _location: Opt<string>;
+
+    private readonly _intervalFrequency: Opt<number>;
+    private _interval: null | AstalIO.Time = null;
+    private _unitType: Variable<UnitType> = Variable('imperial');
+
+    private _weatherData: Variable<Weather> = Variable(DEFAULT_WEATHER);
+    private _temperature: Variable<string> = Variable(this._getTemperature());
+    private _rainChance: Variable<Percentage> = Variable(this._getRainChance());
+    private _windCondition: Variable<string> = Variable(this._getWindConditions());
+    private _statusIcon: Variable<WeatherIcon> = Variable(this._getWeatherStatusIcon());
+    private _gaugeIcon: Variable<GaugeIcon> = Variable(this._getGaugeIcon());
+
+    private constructor() {
+        const { interval, location } = options.menus.clock.weather;
+
+        this._intervalFrequency = interval;
+        this._location = location;
+
+        this._initializeConfigTracker();
+        this._initializeWeatherTracker();
+    }
+
+    /**
+     * Gets the singleton instance of WeatherService
+     *
+     * @returns The WeatherService instance
+     */
+    public static getInstance(): WeatherService {
+        if (WeatherService.instance === undefined) {
+            WeatherService.instance = new WeatherService();
+        }
+        return WeatherService.instance;
+    }
+
+    /**
+     * Changes the active weather provider
+     *
+     * @param providerId - Provider identifier (e.g., 'weatherapi', 'openweathermap')
+     */
+    public setProvider(providerId: string): void {
+        const provider = getWeatherProvider(providerId);
+        if (!provider) {
+            throw new Error(`Weather provider '${providerId}' not found`);
+        }
+
+        this._currentProvider = providerId;
+
+        const weatherKeyManager = new WeatherApiKeyManager();
+        const weatherKey = weatherKeyManager.weatherApiKey.get();
+        if (weatherKey && this._location.get()) {
+            this._initializeWeatherPolling(this._intervalFrequency.get(), this._location.get(), weatherKey);
+        }
+    }
+
+    /**
+     * Gets the complete weather data variable
+     *
+     * @returns Variable containing all weather information
+     */
+    public get weatherData(): Variable<Weather> {
+        return this._weatherData;
+    }
+
+    /**
+     * Gets the formatted temperature string variable
+     *
+     * @returns Variable containing temperature with unit
+     */
+    public get temperature(): Variable<string> {
+        return this._temperature;
+    }
+
+    /**
+     * Gets the rain probability percentage variable
+     *
+     * @returns Variable containing rain chance percentage
+     */
+    public get rainChance(): Variable<Percentage> {
+        return this._rainChance;
+    }
+
+    /**
+     * Gets the formatted wind conditions variable
+     *
+     * @returns Variable containing wind speed with unit
+     */
+    public get windCondition(): Variable<string> {
+        return this._windCondition;
+    }
+
+    /**
+     * Gets the weather condition icon variable
+     *
+     * @returns Variable containing weather icon enum value
+     */
+    public get statusIcon(): Variable<WeatherIcon> {
+        return this._statusIcon;
+    }
+
+    /**
+     * Gets the temperature gauge icon and color variable
+     *
+     * @returns Variable containing gauge icon and color class
+     */
+    public get gaugeIcon(): Variable<GaugeIcon> {
+        return this._gaugeIcon;
+    }
+
+    /**
+     * Gets the current temperature unit type
+     *
+     * @returns Current unit type ('imperial' or 'metric')
+     */
+    public get unit(): UnitType {
+        return this._unitType.get();
+    }
+
+    /**
+     * Sets the temperature unit type
+     *
+     * @param unitType - New unit type ('imperial' or 'metric')
+     */
+    public set unit(unitType: UnitType) {
+        this._unitType.set(unitType);
+    }
+
+    /**
+     * Gets the temperature from the weather data in the specified unit.
+     *
+     * @returns - The temperature formatted as a string with the appropriate unit.
+     */
+    private _getTemperature(): string {
+        const { temperature } = this.weatherData.get().current;
+
+        const tempConverter = TemperatureConverter.fromCelsius(temperature);
+        const isImperial = this._unitType.get() === 'imperial';
+
+        return isImperial ? tempConverter.formatFahrenheit() : tempConverter.formatCelsius();
+    }
+
+    /**
+     * Gets the appropriate weather icon for a condition
+     *
+     * @returns Weather icon
+     */
+    private _getWeatherStatusIcon(): WeatherIcon {
+        const { condition } = this.weatherData.get().current;
+
+        if (condition.text === 'PARTLY CLOUDY NIGHT' && !condition.isDay) {
+            return WeatherIcon['PARTLY CLOUDY NIGHT'];
+        }
+
+        return WeatherIcon[condition.text] ?? WeatherIcon.WARNING;
+    }
+
+    /**
+     * Returns the weather gauge icon and color class based on the temperature in Celsius.
+     *
+     * @returns - An object containing the weather icon and color class.
+     */
+    private _getGaugeIcon(): GaugeIcon {
+        const { temperature } = this.weatherData.get().current;
+        const icons = {
+            38: '',
+            24: '',
+            10: '',
+            [-4]: '',
+            [-18]: '',
+        } as const;
+
+        const colors = {
+            38: 'weather-color red',
+            24: 'weather-color orange',
+            10: 'weather-color lavender',
+            [-4]: 'weather-color blue',
+            [-18]: 'weather-color sky',
+        } as const;
+
+        type IconKeys = keyof typeof icons;
+
+        const threshold: IconKeys =
+            temperature < -18
+                ? -18
+                : (([38, 24, 10, -4, -18] as IconKeys[]).find((threshold) => threshold <= temperature) ?? 10);
+        const icon = icons[threshold || 10];
+        const color = colors[threshold || 10];
+
+        return {
+            icon,
+            color,
+        };
+    }
+
+    /**
+     * Gets the wind conditions from the weather data in the specified unit.
+     *
+     * @returns - The wind conditions formatted as a string with the appropriate unit.
+     */
+    private _getWindConditions(): string {
+        const windConditions = this.weatherData.get().current.wind;
+
+        const isImperial = this._unitType.get() === 'imperial';
+        const windSpeed = windConditions?.speed ?? 0;
+        const speedConverter = SpeedConverter.fromKph(windSpeed);
+
+        return isImperial ? speedConverter.formatMph() : speedConverter.formatKph();
+    }
+
+    /**
+     * Gets the chance of rain from the weather forecast data.
+     *
+     * @returns - The chance of rain formatted as a percentage string.
+     */
+    private _getRainChance(): number {
+        const chanceOfRain = this.weatherData.get().current.chanceOfRain;
+
+        if (!chanceOfRain) {
+            return 0;
+        }
+
+        return chanceOfRain;
+    }
+
+    /**
+     * Sets up configuration tracking for dynamic weather updates
+     */
+    private _initializeConfigTracker(): void {
+        const weatherKeyManager = new WeatherApiKeyManager();
+
+        Variable.derive(
+            [bind(weatherKeyManager.weatherApiKey), bind(this._intervalFrequency), bind(this._location)],
+            (weatherKey, weatherInterval, loc) => {
+                if (!weatherKey) {
+                    return this._weatherData.set(DEFAULT_WEATHER);
+                }
+
+                this._initializeWeatherPolling(weatherInterval, loc, weatherKey);
+            },
+        )();
+    }
+
+    /**
+     * Sets up weather data tracking to update derived values
+     */
+    private _initializeWeatherTracker(): void {
+        Variable.derive([bind(this._weatherData), bind(this._unitType)], () => {
+            this._statusIcon.set(this._getWeatherStatusIcon());
+            this._temperature.set(this._getTemperature());
+            this._rainChance.set(this._getRainChance());
+            this._windCondition.set(this._getWindConditions());
+            this._statusIcon.set(this._getWeatherStatusIcon());
+            this._gaugeIcon.set(this._getGaugeIcon());
+        });
+    }
+
+    /**
+     * Sets up a weather update interval function.
+     *
+     * @param weatherInterval - The interval in milliseconds at which to fetch weather updates
+     * @param loc - The location for which to fetch weather data
+     * @param weatherKey - The API key for accessing the weather service
+     */
+    private _initializeWeatherPolling(weatherInterval: number, loc: string, weatherKey: string): void {
+        if (this._interval !== null) {
+            this._interval.cancel();
+        }
+
+        const provider = getWeatherProvider(this._currentProvider);
+        if (!provider) {
+            console.error(`Weather provider '${this._currentProvider}' not found`);
+            return;
+        }
+
+        this._interval = interval(weatherInterval, async () => {
+            this._fetchWeatherData(provider, loc, weatherKey);
+        });
+    }
+
+    /**
+     * Fetches weather data from the specified provider
+     *
+     * @param provider - The weather provider to use
+     * @param loc - The location to fetch weather for
+     * @param weatherKey - The API key for authentication
+     */
+    private async _fetchWeatherData(
+        provider: WeatherProvider,
+        loc: string,
+        weatherKey: string,
+    ): Promise<void> {
+        const formattedLocation = loc.replaceAll(' ', '%20');
+        const url =
+            provider.formatUrl?.(formattedLocation, weatherKey) ||
+            `${provider.baseUrl}?location=${formattedLocation}&key=${weatherKey}`;
+
+        try {
+            const response = await httpClient.get(url);
+
+            if (response.data && provider.adapter) {
+                const transformedData = provider.adapter.toStandardFormat(response.data);
+                this._weatherData.set(transformedData);
+            } else {
+                this._weatherData.set(DEFAULT_WEATHER);
+            }
+        } catch (error) {
+            console.error(`Failed to fetch weather from ${provider.name}: ${error}`);
+            this._weatherData.set(DEFAULT_WEATHER);
+        }
+    }
+}
diff --git a/src/services/weather/keyManager/index.ts b/src/services/weather/keyManager/index.ts
new file mode 100644
index 0000000..b9d5ff1
--- /dev/null
+++ b/src/services/weather/keyManager/index.ts
@@ -0,0 +1,71 @@
+import { GLib, Variable } from 'astal';
+import options from 'src/configuration';
+
+const { EXISTS, IS_REGULAR } = GLib.FileTest;
+
+/**
+ * Manages weather API key retrieval and validation
+ * Supports loading keys from files or direct input
+ */
+export class WeatherApiKeyManager {
+    public weatherApiKey: Variable<string> = Variable('');
+
+    private readonly _apiKeyUserInput = options.menus.clock.weather.key;
+
+    constructor() {
+        this._mountWeatherKey(this._apiKeyUserInput.get());
+
+        this._apiKeyUserInput.subscribe((key) => {
+            this._mountWeatherKey(key);
+        });
+    }
+
+    /**
+     * Updates the weather API key variable with the processed key value
+     *
+     * @param key - The API key input which could be a direct key or file path
+     */
+    private _mountWeatherKey(key: string): void {
+        const fetchedKey = this._getWeatherKey(key);
+
+        this.weatherApiKey.set(fetchedKey);
+    }
+
+    /**
+     * Retrieves the weather API key from a file if it exists and is valid.
+     *
+     * @param apiKey - The path to the file containing the weather API key.
+     * @returns The weather API key if found, otherwise the original apiKey.
+     */
+    private _getWeatherKey(apiKey: string): string {
+        const weatherKey = apiKey;
+
+        const keyIsAFilePath = GLib.file_test(weatherKey, EXISTS) && GLib.file_test(weatherKey, IS_REGULAR);
+
+        if (!keyIsAFilePath) {
+            return apiKey;
+        }
+
+        try {
+            const fileContentArray = GLib.file_get_contents(weatherKey)[1];
+            const fileContent = new TextDecoder().decode(fileContentArray);
+
+            if (!fileContent) {
+                console.error('weather_api_key file is empty');
+                return '';
+            }
+
+            const parsedContent = JSON.parse(fileContent);
+
+            if (parsedContent.weather_api_key !== undefined) {
+                return parsedContent.weather_api_key;
+            }
+
+            console.error('weather_api_key is missing in the JSON content');
+            return '';
+        } catch (error) {
+            console.error(`Failed to read or parse weather key file: ${error}`);
+            return '';
+        }
+    }
+}
diff --git a/src/services/weather/types/index.ts b/src/services/weather/types/index.ts
new file mode 100644
index 0000000..9a555a1
--- /dev/null
+++ b/src/services/weather/types/index.ts
@@ -0,0 +1,127 @@
+export type WindDirection =
+    | 'N'
+    | 'NNE'
+    | 'NE'
+    | 'ENE'
+    | 'E'
+    | 'ESE'
+    | 'SE'
+    | 'SSE'
+    | 'S'
+    | 'SSW'
+    | 'SW'
+    | 'WSW'
+    | 'W'
+    | 'WNW'
+    | 'NW'
+    | 'NNW';
+
+export type Percentage = number;
+export type WeatherStatus = keyof typeof WeatherIcon;
+
+export interface Wind {
+    /** Wind speed in kilometers per hour */
+    speed: number;
+    /** Compass direction (16-point) */
+    direction?: WindDirection;
+    /** Wind direction in degrees (0-360) */
+    degree?: number;
+}
+
+export interface WeatherCondition {
+    /** Human-readable weather description */
+    text: WeatherStatus;
+    /** Whether it's daytime (for icon selection) */
+    isDay?: boolean;
+}
+
+export interface CurrentWeather {
+    /** Temperature value in Celsius */
+    temperature: number;
+    /** Feels like temperature in Celsius */
+    feelsLike?: number;
+    /** Weather condition */
+    condition: WeatherCondition;
+    /** Wind information */
+    wind?: Wind;
+    /** Chance of rain */
+    chanceOfRain?: Percentage;
+    /** Relative humidity (0-100) */
+    humidity?: Percentage;
+}
+
+export interface HourlyForecast {
+    /** Forecast time as Date */
+    time: Date;
+    /** Forecasted temperature in Celsius */
+    temperature: number;
+    /** Weather condition */
+    condition?: WeatherCondition;
+    /** Probability of rain (0-100) */
+    chanceOfRain?: Percentage;
+}
+
+export interface DailyForecast {
+    /** Forecast date as Date */
+    date: Date;
+    /** Minimum temperature for the day in Celsius */
+    tempMin: number;
+    /** Maximum temperature for the day in Celsius */
+    tempMax: number;
+    /** Predominant weather condition */
+    condition: WeatherCondition;
+    /** Daily rain probability (0-100) */
+    chanceOfRain?: Percentage;
+    /** Hourly breakdown (if available) */
+    hourly?: HourlyForecast[];
+}
+
+export interface WeatherLocation {
+    /** City/location name */
+    name: string;
+    /** State/province/region */
+    region?: string;
+    /** Country name */
+    country?: string;
+}
+
+export interface Weather {
+    /** Location information */
+    location: WeatherLocation;
+    /** Current weather conditions */
+    current: CurrentWeather;
+    /** Weather forecast (if available) */
+    forecast?: DailyForecast[];
+    /** Last update time as Date */
+    lastUpdated: Date;
+    /** Provider name for debugging */
+    provider?: string;
+}
+
+export enum WeatherIcon {
+    WARNING = '󰼯',
+    SUNNY = '󰖙',
+    CLEAR = '󰖔',
+    'PARTLY CLOUDY' = '󰖕',
+    'PARTLY CLOUDY NIGHT' = '󰼱',
+    CLOUDY = '󰖐',
+    FOG = '󰖑',
+    'LIGHT RAIN' = '󰼳',
+    RAIN = '󰖗',
+    'HEAVY RAIN' = '󰖖',
+    SNOW = '󰼴',
+    'HEAVY SNOW' = '󰼶',
+    SLEET = '󰙿',
+    HAIL = '󰖒',
+    THUNDERSTORM = '󰙾',
+}
+
+export interface GaugeIcon {
+    icon: '' | '' | '' | '' | '';
+    color:
+        | 'weather-color red'
+        | 'weather-color orange'
+        | 'weather-color lavender'
+        | 'weather-color blue'
+        | 'weather-color sky';
+}
diff --git a/src/services/weather/validators/index.ts b/src/services/weather/validators/index.ts
new file mode 100644
index 0000000..51ebb9d
--- /dev/null
+++ b/src/services/weather/validators/index.ts
@@ -0,0 +1,35 @@
+import { Percentage, WindDirection } from '../types';
+
+/**
+ * Type guard to check if a value is a valid percentage
+ *
+ * @param value - Number to check
+ * @returns True if value is between 0 and 100
+ */
+export const isValidPercentage = (value: number): value is Percentage => value >= 0 && value <= 100;
+
+/**
+ * Type guard to check if a string is a valid wind direction
+ *
+ * @param dir - String to check
+ * @returns True if string is a valid WindDirection
+ */
+export const isValidWindDirection = (dir: string): dir is WindDirection =>
+    [
+        'N',
+        'NNE',
+        'NE',
+        'ENE',
+        'E',
+        'ESE',
+        'SE',
+        'SSE',
+        'S',
+        'SSW',
+        'SW',
+        'WSW',
+        'W',
+        'WNW',
+        'NW',
+        'NNW',
+    ].includes(dir);
diff --git a/src/services/workspace/index.ts b/src/services/workspace/index.ts
new file mode 100644
index 0000000..cb23370
--- /dev/null
+++ b/src/services/workspace/index.ts
@@ -0,0 +1,309 @@
+import { Variable } from 'astal';
+import AstalHyprland from 'gi://AstalHyprland?version=0.1';
+import { range, unique } from 'src/lib/array/helpers';
+import options from 'src/configuration';
+import { WorkspaceMonitorMap, MonitorMap, WorkspaceRule } from './types';
+
+const hyprlandService = AstalHyprland.get_default();
+
+/**
+ * Manages Hyprland workspace operations and monitor relationships, providing centralized
+ * workspace navigation and rule management across the panel system
+ */
+export class WorkspaceService {
+    public static instance: WorkspaceService;
+    private _ignored = options.bar.workspaces.ignored;
+
+    public workspaceRules = Variable(this._getWorkspaceMonitorMap());
+    public forceUpdater = Variable(true);
+
+    private constructor() {}
+
+    /**
+     * Gets the singleton instance of WorkspaceService
+     *
+     * @returns The WorkspaceService instance
+     */
+    public static getInstance(): WorkspaceService {
+        if (WorkspaceService.instance === undefined) {
+            WorkspaceService.instance = new WorkspaceService();
+        }
+
+        return WorkspaceService.instance;
+    }
+
+    /** Computes which workspace numbers should be rendered for a given monitor.
+     *
+     * This function consolidates both active and all possible workspaces (based on rules),
+     * then filters them by the selected monitor if `isMonitorSpecific` is set to `true`.
+     *
+     * @param totalWorkspaces - The total number of workspaces (a fallback if workspace rules are not enforced).
+     * @param workspaceInstances - A list of Hyprland workspace objects.
+     * @param workspaceMonitorRules - The map of monitor names to assigned workspace numbers.
+     * @param monitorId - The numeric identifier of the monitor.
+     * @param isMonitorSpecific - If `true`, only include the workspaces that match this monitor.
+     * @param hyprlandMonitorInstances - A list of Hyprland monitor objects.
+     *
+     * @returns An array of workspace numbers that should be shown.
+     */
+    public getWorkspaces(
+        totalWorkspaces: number,
+        workspaceInstances: AstalHyprland.Workspace[],
+        workspaceMonitorRules: WorkspaceMonitorMap,
+        monitorId: number,
+        isMonitorSpecific: boolean,
+        hyprlandMonitorInstances: AstalHyprland.Monitor[],
+    ): number[] {
+        let allPotentialWorkspaces = range(totalWorkspaces || 8);
+        const allWorkspaceInstances = workspaceInstances ?? [];
+
+        const activeWorkspaceIds = allWorkspaceInstances.map((workspaceInstance) => workspaceInstance.id);
+
+        const monitorReferencesForActiveWorkspaces = allWorkspaceInstances.map((workspaceInstance) => {
+            return {
+                id: workspaceInstance.monitor?.id ?? -1,
+                name: workspaceInstance.monitor?.name ?? '',
+            };
+        });
+
+        const currentMonitorInstance =
+            hyprlandMonitorInstances.find((monitorObj) => monitorObj.id === monitorId) ||
+            monitorReferencesForActiveWorkspaces.find((monitorObj) => monitorObj.id === monitorId);
+
+        const allWorkspacesWithRules = Object.keys(workspaceMonitorRules).reduce(
+            (accumulator: number[], monitorName: string) => {
+                return [...accumulator, ...workspaceMonitorRules[monitorName]];
+            },
+            [],
+        );
+
+        const activeWorkspacesForCurrentMonitor = activeWorkspaceIds.filter((workspaceId) => {
+            const metadataForWorkspace = allWorkspaceInstances.find(
+                (workspaceObj) => workspaceObj.id === workspaceId,
+            );
+
+            if (metadataForWorkspace) {
+                return metadataForWorkspace?.monitor?.id === monitorId;
+            }
+
+            if (
+                currentMonitorInstance &&
+                Object.hasOwnProperty.call(workspaceMonitorRules, currentMonitorInstance.name) &&
+                allWorkspacesWithRules.includes(workspaceId)
+            ) {
+                return workspaceMonitorRules[currentMonitorInstance.name].includes(workspaceId);
+            }
+
+            return false;
+        });
+
+        if (isMonitorSpecific) {
+            const validWorkspaceNumbers = range(totalWorkspaces).filter((workspaceNumber) => {
+                return this._isWorkspaceValidForMonitor(
+                    workspaceNumber,
+                    workspaceMonitorRules,
+                    monitorId,
+                    allWorkspaceInstances,
+                    hyprlandMonitorInstances,
+                );
+            });
+
+            allPotentialWorkspaces = unique([...activeWorkspacesForCurrentMonitor, ...validWorkspaceNumbers]);
+        } else {
+            allPotentialWorkspaces = unique([...allPotentialWorkspaces, ...activeWorkspaceIds]);
+        }
+
+        return allPotentialWorkspaces
+            .filter((workspace) => !this._isWorkspaceIgnored(workspace))
+            .sort((a, b) => a - b);
+    }
+
+    /**
+     * Navigates to the next workspace in the current monitor.
+     */
+    public goToNextWorkspace(): void {
+        this._navigateWorkspace('next');
+    }
+
+    /**
+     * Navigates to the previous workspace in the current monitor.
+     */
+    public goToPreviousWorkspace(): void {
+        this._navigateWorkspace('prev');
+    }
+
+    /**
+     * Gets a new set of workspace rules. Used to update stale rules.
+     */
+    public refreshWorkspaceRules(): void {
+        this.workspaceRules.set(this._getWorkspaceMonitorMap());
+    }
+
+    /**
+     * Forces a UI update by toggling the forceUpdater variable
+     */
+    public forceAnUpdate(): void {
+        this.forceUpdater.set(!this.forceUpdater.get());
+    }
+    /**
+     * Checks whether a given workspace is valid (assigned) for the specified monitor.
+     *
+     * This function inspects the workspace rules object to determine if the current workspace belongs
+     * to the target monitor. If no workspace rules exist, the function defaults to returning `true`.
+     *
+     * @param workspaceId - The number representing the current workspace.
+     * @param workspaceMonitorRules - The map of monitor names to assigned workspace numbers.
+     * @param monitorId - The numeric identifier for the monitor.
+     * @param workspaceList - A list of Hyprland workspace objects.
+     * @param monitorList - A list of Hyprland monitor objects.
+     *
+     * @returns `true` if the workspace is assigned to the monitor or if no rules exist. Otherwise, `false`.
+     */
+    private _isWorkspaceValidForMonitor(
+        workspaceId: number,
+        workspaceMonitorRules: WorkspaceMonitorMap,
+        monitorId: number,
+        workspaceList: AstalHyprland.Workspace[],
+        monitorList: AstalHyprland.Monitor[],
+    ): boolean {
+        const monitorNameMap: MonitorMap = {};
+        const allWorkspaceInstances = workspaceList ?? [];
+
+        const workspaceMonitorReferences = allWorkspaceInstances
+            .filter((workspaceInstance) => workspaceInstance !== null)
+            .map((workspaceInstance) => {
+                return {
+                    id: workspaceInstance.monitor?.id,
+                    name: workspaceInstance.monitor?.name,
+                };
+            });
+
+        const mergedMonitorInstances = [
+            ...new Map(
+                [...workspaceMonitorReferences, ...monitorList].map((monitorCandidate) => [
+                    monitorCandidate.id,
+                    monitorCandidate,
+                ]),
+            ).values(),
+        ];
+
+        mergedMonitorInstances.forEach((monitorInstance) => {
+            monitorNameMap[monitorInstance.id] = monitorInstance.name;
+        });
+
+        const currentMonitorName = monitorNameMap[monitorId];
+        const currentMonitorWorkspaceRules = workspaceMonitorRules[currentMonitorName] ?? [];
+        const activeWorkspaceIds = new Set(allWorkspaceInstances.map((ws) => ws.id));
+        const filteredWorkspaceRules = currentMonitorWorkspaceRules.filter(
+            (ws) => !activeWorkspaceIds.has(ws),
+        );
+
+        if (filteredWorkspaceRules === undefined) {
+            return false;
+        }
+
+        return filteredWorkspaceRules.includes(workspaceId);
+    }
+
+    /**
+     * Changes the active workspace in the specified direction ('next' or 'prev').
+     *
+     * This function uses the current monitor's set of active or assigned workspaces and
+     * cycles through them in the chosen direction. It also respects the list of ignored
+     * workspaces, skipping any that match the ignored pattern.
+     *
+     * @param direction - The direction to navigate ('next' or 'prev').
+     * @param currentMonitorWorkspacesVariable - A Variable containing an array of workspace numbers for the current monitor.
+     * @param onlyActiveWorkspaces - Whether to only include active (occupied) workspaces when navigating.
+     * @param ignoredWorkspacesVariable - A Variable that contains the ignored workspaces pattern.
+     */
+    private _navigateWorkspace(direction: 'next' | 'prev'): void {
+        const allHyprlandWorkspaces = hyprlandService.get_workspaces() ?? [];
+
+        const activeWorkspaceIds = allHyprlandWorkspaces
+            .filter(
+                (workspaceInstance) => hyprlandService.focusedMonitor.id === workspaceInstance.monitor?.id,
+            )
+            .map((workspaceInstance) => workspaceInstance.id);
+
+        const assignedOrOccupiedWorkspaces = activeWorkspaceIds.sort((a, b) => a - b);
+
+        if (assignedOrOccupiedWorkspaces.length === 0) {
+            return;
+        }
+
+        const workspaceIndex = assignedOrOccupiedWorkspaces.indexOf(hyprlandService.focusedWorkspace?.id);
+        const step = direction === 'next' ? 1 : -1;
+
+        let newIndex =
+            (workspaceIndex + step + assignedOrOccupiedWorkspaces.length) %
+            assignedOrOccupiedWorkspaces.length;
+        let attempts = 0;
+
+        while (attempts < assignedOrOccupiedWorkspaces.length) {
+            const targetWorkspaceNumber = assignedOrOccupiedWorkspaces[newIndex];
+            if (!this._isWorkspaceIgnored(targetWorkspaceNumber)) {
+                hyprlandService.dispatch('workspace', targetWorkspaceNumber.toString());
+                return;
+            }
+            newIndex =
+                (newIndex + step + assignedOrOccupiedWorkspaces.length) % assignedOrOccupiedWorkspaces.length;
+            attempts++;
+        }
+    }
+
+    /**
+     * Fetches a map of monitors to the workspace numbers that belong to them.
+     *
+     * This function communicates with the Hyprland service to retrieve workspace rules in JSON format.
+     * Those rules are parsed, and a map of monitor names to lists of assigned workspace numbers is constructed.
+     *
+     * @returns An object where each key is a monitor name, and each value is an array of workspace numbers.
+     */
+    private _getWorkspaceMonitorMap(): WorkspaceMonitorMap {
+        try {
+            const rulesResponse = hyprlandService.message('j/workspacerules');
+            const workspaceMonitorRules: WorkspaceMonitorMap = {};
+            const parsedWorkspaceRules = JSON.parse(rulesResponse);
+
+            parsedWorkspaceRules.forEach((rule: WorkspaceRule) => {
+                const workspaceNumber = parseInt(rule.workspaceString, 10);
+
+                if (rule.monitor === undefined || isNaN(workspaceNumber)) {
+                    return;
+                }
+
+                const doesMonitorExistInRules = Object.hasOwnProperty.call(
+                    workspaceMonitorRules,
+                    rule.monitor,
+                );
+
+                if (doesMonitorExistInRules) {
+                    workspaceMonitorRules[rule.monitor].push(workspaceNumber);
+                } else {
+                    workspaceMonitorRules[rule.monitor] = [workspaceNumber];
+                }
+            });
+
+            return workspaceMonitorRules;
+        } catch (error) {
+            console.error(error);
+            return {};
+        }
+    }
+
+    /**
+     * Checks if a workspace number should be ignored based on a regular expression.
+     *
+     * @param workspaceNumber - The numeric representation of the workspace to check.
+     * @returns `true` if the workspace should be ignored, otherwise `false`.
+     */
+    private _isWorkspaceIgnored(workspaceNumber: number): boolean {
+        if (this._ignored.get() === '') {
+            return false;
+        }
+
+        const ignoredWorkspacesRegex = new RegExp(this._ignored.get());
+        return ignoredWorkspacesRegex.test(workspaceNumber.toString());
+    }
+}
diff --git a/src/services/workspace/types.ts b/src/services/workspace/types.ts
new file mode 100644
index 0000000..b8151c0
--- /dev/null
+++ b/src/services/workspace/types.ts
@@ -0,0 +1,12 @@
+export type WorkspaceRule = {
+    workspaceString: string;
+    monitor: string;
+};
+
+export type WorkspaceMonitorMap = {
+    [key: string]: number[];
+};
+
+export type MonitorMap = {
+    [key: number]: string;
+};
diff --git a/src/shared/media.ts b/src/shared/media.ts
deleted file mode 100644
index 6392154..0000000
--- a/src/shared/media.ts
+++ /dev/null
@@ -1,313 +0,0 @@
-import { bind, Variable } from 'astal';
-import AstalMpris from 'gi://AstalMpris?version=0.1';
-import { getTimeStamp } from 'src/components/menus/media/components/timebar/helpers';
-import options from 'src/options';
-
-const mprisService = AstalMpris.get_default();
-const { noMediaText } = options.menus.media;
-
-export const activePlayer = Variable<AstalMpris.Player | undefined>(undefined);
-
-const forceUpdate = Variable(false);
-
-mprisService.connect('player-closed', (_, closedPlayer) => {
-    if (
-        mprisService.get_players().length === 1 &&
-        closedPlayer.busName === mprisService.get_players()[0]?.busName
-    ) {
-        return activePlayer.set(undefined);
-    }
-
-    if (closedPlayer.busName === activePlayer.get()?.busName) {
-        const nextPlayer = mprisService
-            .get_players()
-            .find((player) => player.busName !== closedPlayer.busName);
-        activePlayer.set(nextPlayer);
-    }
-});
-
-mprisService.connect('player-added', (_, addedPlayer) => {
-    if (activePlayer.get() === undefined) {
-        activePlayer.set(addedPlayer);
-    }
-});
-
-export const timeStamp = Variable('00:00');
-export const currentPosition = Variable(0);
-
-export const loopStatus = Variable(AstalMpris.Loop.NONE);
-export const shuffleStatus = Variable(AstalMpris.Shuffle.OFF);
-
-export const canPlay = Variable(false);
-export const playbackStatus = Variable(AstalMpris.PlaybackStatus.STOPPED);
-
-export const canGoNext = Variable(false);
-export const canGoPrevious = Variable(false);
-
-export const mediaTitle = Variable(noMediaText.get());
-export const mediaAlbum = Variable('-----');
-export const mediaArtist = Variable('-----');
-export const mediaArtUrl = Variable('');
-
-let positionUnsub: Variable<void> | undefined;
-
-let loopUnsub: Variable<void> | undefined;
-let shuffleUnsub: Variable<void> | undefined;
-
-let canPlayUnsub: Variable<void> | undefined;
-let playbackStatusUnsub: Variable<void> | undefined;
-
-let canGoNextUnsub: Variable<void> | undefined;
-let canGoPreviousUnsub: Variable<void> | undefined;
-
-let titleUnsub: Variable<void> | undefined;
-let albumUnsub: Variable<void> | undefined;
-let artistUnsub: Variable<void> | undefined;
-let artUrlUnsub: Variable<void> | undefined;
-
-const updatePosition = (player: AstalMpris.Player | undefined): void => {
-    positionUnsub?.drop();
-    positionUnsub = undefined;
-
-    if (player === undefined) {
-        timeStamp.set('00:00');
-        currentPosition.set(0);
-        return;
-    }
-
-    const loopBinding = bind(player, 'position');
-
-    positionUnsub = Variable.derive([bind(loopBinding), bind(player, 'playbackStatus')], (pos) => {
-        if (player?.length > 0) {
-            timeStamp.set(getTimeStamp(pos, player.length));
-            currentPosition.set(pos);
-        } else {
-            timeStamp.set('00:00');
-            currentPosition.set(0);
-        }
-    });
-
-    const initialPos = loopBinding.get();
-
-    timeStamp.set(getTimeStamp(initialPos, player.length));
-    currentPosition.set(initialPos);
-};
-
-const updateLoop = (player: AstalMpris.Player | undefined): void => {
-    loopUnsub?.drop();
-    loopUnsub = undefined;
-
-    if (player === undefined) {
-        loopStatus.set(AstalMpris.Loop.NONE);
-        return;
-    }
-
-    const loopBinding = bind(player, 'loopStatus');
-
-    loopUnsub = Variable.derive([bind(loopBinding), bind(player, 'playbackStatus')], (status) => {
-        if (player?.length > 0) {
-            loopStatus.set(status);
-        } else {
-            currentPosition.set(AstalMpris.Loop.NONE);
-        }
-    });
-
-    const initialStatus = loopBinding.get();
-
-    loopStatus.set(initialStatus);
-};
-
-const updateShuffle = (player: AstalMpris.Player | undefined): void => {
-    shuffleUnsub?.drop();
-    shuffleUnsub = undefined;
-
-    if (player === undefined) {
-        shuffleStatus.set(AstalMpris.Shuffle.OFF);
-        return;
-    }
-
-    const shuffleBinding = bind(player, 'shuffleStatus');
-
-    shuffleUnsub = Variable.derive([bind(shuffleBinding), bind(player, 'playbackStatus')], (status) => {
-        shuffleStatus.set(status ?? AstalMpris.Shuffle.OFF);
-    });
-
-    const initialStatus = shuffleBinding.get();
-    shuffleStatus.set(initialStatus);
-};
-
-const updateCanPlay = (player: AstalMpris.Player | undefined): void => {
-    canPlayUnsub?.drop();
-    canPlayUnsub = undefined;
-
-    if (player === undefined) {
-        canPlay.set(false);
-        return;
-    }
-
-    const canPlayBinding = bind(player, 'canPlay');
-
-    canPlayUnsub = Variable.derive([canPlayBinding, bind(player, 'playbackStatus')], (playable) => {
-        canPlay.set(playable ?? false);
-    });
-
-    const initialCanPlay = canPlay.get();
-    canPlay.set(initialCanPlay);
-};
-
-const updatePlaybackStatus = (player: AstalMpris.Player | undefined): void => {
-    playbackStatusUnsub?.drop();
-    playbackStatusUnsub = undefined;
-
-    if (player === undefined) {
-        playbackStatus.set(AstalMpris.PlaybackStatus.STOPPED);
-        return;
-    }
-
-    const playbackStatusBinding = bind(player, 'playbackStatus');
-
-    playbackStatusUnsub = Variable.derive([playbackStatusBinding], (status) => {
-        playbackStatus.set(status ?? AstalMpris.PlaybackStatus.STOPPED);
-    });
-
-    const initialStatus = playbackStatus.get();
-
-    playbackStatus.set(initialStatus);
-};
-
-const updateCanGoNext = (player: AstalMpris.Player | undefined): void => {
-    canGoNextUnsub?.drop();
-    canGoNextUnsub = undefined;
-
-    if (player === undefined) {
-        canGoNext.set(false);
-        return;
-    }
-
-    const canGoNextBinding = bind(player, 'canGoNext');
-
-    canGoNextUnsub = Variable.derive([canGoNextBinding, bind(player, 'playbackStatus')], (canNext) => {
-        canGoNext.set(canNext ?? false);
-    });
-
-    const initialCanNext = canGoNext.get();
-    canGoNext.set(initialCanNext);
-};
-
-const updateCanGoPrevious = (player: AstalMpris.Player | undefined): void => {
-    canGoPreviousUnsub?.drop();
-    canGoPreviousUnsub = undefined;
-
-    if (player === undefined) {
-        canGoPrevious.set(false);
-        return;
-    }
-
-    const canGoPreviousBinding = bind(player, 'canGoPrevious');
-
-    canGoPreviousUnsub = Variable.derive(
-        [canGoPreviousBinding, bind(player, 'playbackStatus')],
-        (canPrev) => {
-            canGoPrevious.set(canPrev ?? false);
-        },
-    );
-
-    const initialCanPrev = canGoPrevious.get();
-    canGoPrevious.set(initialCanPrev);
-};
-
-const updateTitle = (player: AstalMpris.Player | undefined): void => {
-    titleUnsub?.drop();
-    titleUnsub = undefined;
-
-    if (player === undefined) {
-        mediaTitle.set(noMediaText.get());
-        return;
-    }
-
-    const titleBinding = bind(player, 'title');
-
-    titleUnsub = Variable.derive([titleBinding, bind(player, 'playbackStatus')], (newTitle, pbStatus) => {
-        if (pbStatus === AstalMpris.PlaybackStatus.STOPPED) {
-            return mediaTitle.set(noMediaText.get() ?? '-----');
-        }
-
-        mediaTitle.set(newTitle.length > 0 ? newTitle : '-----');
-    });
-
-    const initialTitle = mediaTitle.get();
-    mediaTitle.set(initialTitle.length > 0 ? initialTitle : '-----');
-};
-
-const updateAlbum = (player: AstalMpris.Player | undefined): void => {
-    albumUnsub?.drop();
-    albumUnsub = undefined;
-
-    if (player === undefined) {
-        mediaAlbum.set('-----');
-        return;
-    }
-
-    albumUnsub = Variable.derive([bind(player, 'album'), bind(player, 'playbackStatus')], (newAlbum) => {
-        mediaAlbum.set(newAlbum?.length > 0 ? newAlbum : '-----');
-    });
-
-    const initialAlbum = mediaAlbum.get();
-    mediaAlbum.set(initialAlbum.length > 0 ? initialAlbum : '-----');
-};
-
-const updateArtist = (player: AstalMpris.Player | undefined): void => {
-    artistUnsub?.drop();
-    artistUnsub = undefined;
-
-    if (player === undefined) {
-        mediaArtist.set('-----');
-        return;
-    }
-
-    const artistBinding = bind(player, 'artist');
-
-    artistUnsub = Variable.derive([artistBinding, bind(player, 'playbackStatus')], (newArtist) => {
-        mediaArtist.set(newArtist?.length > 0 ? newArtist : '-----');
-    });
-
-    const initialArtist = mediaArtist.get();
-    mediaArtist.set(initialArtist?.length > 0 ? initialArtist : '-----');
-};
-
-const updateArtUrl = (player: AstalMpris.Player | undefined): void => {
-    artUrlUnsub?.drop();
-    artUrlUnsub = undefined;
-
-    if (player === undefined) {
-        mediaArtUrl.set('');
-        return;
-    }
-
-    const artUrlBinding = bind(player, 'artUrl');
-
-    artUrlUnsub = Variable.derive([artUrlBinding, bind(player, 'playbackStatus')], (newArtUrl) => {
-        mediaArtUrl.set(newArtUrl ?? '');
-    });
-
-    const initialArtUrl = mediaArtUrl.get();
-    mediaArtUrl.set(initialArtUrl);
-};
-
-Variable.derive([bind(activePlayer), bind(forceUpdate)], (player) => {
-    updatePosition(player);
-
-    updateLoop(player);
-    updateShuffle(player);
-
-    updateCanPlay(player);
-    updatePlaybackStatus(player);
-
-    updateCanGoNext(player);
-    updateCanGoPrevious(player);
-
-    updateTitle(player);
-    updateAlbum(player);
-    updateArtist(player);
-    updateArtUrl(player);
-});
diff --git a/src/shared/notification.ts b/src/shared/notification.ts
deleted file mode 100644
index 62dc9ec..0000000
--- a/src/shared/notification.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import icons from 'src/lib/icons/icons2';
-import options from 'src/options';
-import { errorHandler, lookUpIcon } from 'src/lib/utils';
-import { Variable } from 'astal';
-import AstalNotifd from 'gi://AstalNotifd?version=0.1';
-
-const notifdService = AstalNotifd.get_default();
-const { clearDelay } = options.notifications;
-
-export const removingNotifications = Variable<boolean>(false);
-
-export const getNotificationIcon = (app_name: string, app_icon: string, app_entry: string): string => {
-    let icon: string = icons.fallback.notification;
-
-    if (lookUpIcon(app_name) || lookUpIcon(app_name.toLowerCase() || '')) {
-        icon = lookUpIcon(app_name)
-            ? app_name
-            : lookUpIcon(app_name.toLowerCase())
-              ? app_name.toLowerCase()
-              : '';
-    }
-
-    if (lookUpIcon(app_icon) && icon === '') {
-        icon = app_icon;
-    }
-
-    if (lookUpIcon(app_entry || '') && icon === '') {
-        icon = app_entry || '';
-    }
-
-    return icon;
-};
-
-export const clearNotifications = async (
-    notifications: AstalNotifd.Notification[],
-    delay: number,
-): Promise<void> => {
-    removingNotifications.set(true);
-    for (const notification of notifications) {
-        notification.dismiss();
-        await new Promise((resolve) => setTimeout(resolve, delay));
-    }
-    removingNotifications.set(false);
-};
-
-export async function clearAllNotifications(): Promise<void> {
-    try {
-        clearNotifications(notifdService.get_notifications(), clearDelay.get());
-    } catch (error) {
-        errorHandler(error);
-    }
-}
diff --git a/src/shared/variables.ts b/src/shared/variables.ts
deleted file mode 100644
index 804b5ff..0000000
--- a/src/shared/variables.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Opt } from 'src/lib/options';
-import { RecursiveOptionsObject, HexColor, MatugenTheme } from 'src/lib/options/options.types';
-
-export const isOpt = <T>(value: unknown): value is Opt<T> =>
-    typeof value === 'object' && value !== null && 'value' in value && value instanceof Opt;
-
-export const isOptString = (value: unknown): value is Opt<string> => {
-    return value instanceof Opt && typeof value.get() === 'string';
-};
-
-export const isOptNumber = (value: unknown): value is Opt<number> => {
-    return value instanceof Opt && typeof value.get() === 'number';
-};
-
-export const isOptBoolean = (value: unknown): value is Opt<boolean> => {
-    return value instanceof Opt && typeof value.get() === 'boolean';
-};
-
-export const isOptMatugenTheme = (value: unknown): value is Opt<MatugenTheme> => {
-    return value instanceof Opt && typeof value.get() === 'object' && 'specificProperty' in value.get();
-};
-
-export const isRecursiveOptionsObject = (value: unknown): value is RecursiveOptionsObject => {
-    return typeof value === 'object' && value !== null && !(value instanceof Opt);
-};
-
-export const isHexColor = (val: unknown): val is HexColor => {
-    return typeof val === 'string' && /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(val);
-};
diff --git a/src/shared/weather.ts b/src/shared/weather.ts
deleted file mode 100644
index 98312c9..0000000
--- a/src/shared/weather.ts
+++ /dev/null
@@ -1,223 +0,0 @@
-import options from 'src/options';
-import GLib from 'gi://GLib?version=2.0';
-import { weatherIcons } from 'src/lib/icons/weather.js';
-import { AstalIO, bind, execAsync, interval, Variable } from 'astal';
-import { DEFAULT_WEATHER } from 'src/lib/types/defaults/weather.types';
-import { Weather, UnitType, WeatherIconTitle, WeatherIcon } from 'src/lib/types/weather.types';
-
-const { EXISTS, IS_REGULAR } = GLib.FileTest;
-
-const { key, interval: weatherInterval, location } = options.menus.clock.weather;
-
-export const globalWeatherVar = Variable<Weather>(DEFAULT_WEATHER);
-
-let weatherIntervalInstance: null | AstalIO.Time = null;
-
-key.subscribe(() => {
-    const fetchedKey = getWeatherKey(key.get());
-    weatherApiKey.set(fetchedKey);
-});
-
-/**
- * Retrieves the weather API key from a file if it exists and is valid.
- *
- * @param apiKey - The path to the file containing the weather API key.
- * @returns - The weather API key if found, otherwise the original apiKey.
- */
-const getWeatherKey = (apiKey: string): string => {
-    const weatherKey = apiKey;
-
-    if (GLib.file_test(weatherKey, EXISTS) && GLib.file_test(weatherKey, IS_REGULAR)) {
-        try {
-            const fileContentArray = GLib.file_get_contents(weatherKey)[1];
-            const fileContent = new TextDecoder().decode(fileContentArray);
-
-            if (!fileContent) {
-                console.error('weather_api_key file is empty');
-                return '';
-            }
-
-            const parsedContent = JSON.parse(fileContent);
-
-            if (parsedContent.weather_api_key !== undefined) {
-                return parsedContent.weather_api_key;
-            } else {
-                console.error('weather_api_key is missing in the JSON content');
-                return '';
-            }
-        } catch (error) {
-            console.error(`Failed to read or parse weather key file: ${error}`);
-            return '';
-        }
-    }
-
-    return apiKey;
-};
-
-const fetchedApiKey = getWeatherKey(key.get());
-const weatherApiKey = Variable(fetchedApiKey);
-
-/**
- * Sets up a weather update interval function.
- *
- * @param weatherInterval - The interval in milliseconds at which to fetch weather updates.
- * @param loc - The location for which to fetch weather data.
- * @param weatherKey - The API key for accessing the weather service.
- */
-const weatherIntervalFn = (weatherInterval: number, loc: string, weatherKey: string): void => {
-    if (weatherIntervalInstance !== null) {
-        weatherIntervalInstance.cancel();
-    }
-
-    const formattedLocation = loc.replaceAll(' ', '%20');
-
-    weatherIntervalInstance = interval(weatherInterval, () => {
-        execAsync(
-            `curl "https://api.weatherapi.com/v1/forecast.json?key=${weatherKey}&q=${formattedLocation}&days=1&aqi=no&alerts=no"`,
-        )
-            .then((res) => {
-                try {
-                    if (typeof res !== 'string') {
-                        return globalWeatherVar.set(DEFAULT_WEATHER);
-                    }
-
-                    const parsedWeather = JSON.parse(res);
-
-                    if (Object.keys(parsedWeather).includes('error')) {
-                        return globalWeatherVar.set(DEFAULT_WEATHER);
-                    }
-
-                    return globalWeatherVar.set(parsedWeather);
-                } catch (error) {
-                    globalWeatherVar.set(DEFAULT_WEATHER);
-                    console.warn(`Failed to parse weather data: ${error}`);
-                }
-            })
-            .catch((err) => {
-                console.error(`Failed to fetch weather: ${err}`);
-                globalWeatherVar.set(DEFAULT_WEATHER);
-            });
-    });
-};
-
-Variable.derive(
-    [bind(weatherApiKey), bind(weatherInterval), bind(location)],
-    (weatherKey, weatherInterval, loc) => {
-        if (!weatherKey) {
-            return globalWeatherVar.set(DEFAULT_WEATHER);
-        }
-        weatherIntervalFn(weatherInterval, loc, weatherKey);
-    },
-)();
-
-/**
- * Gets the temperature from the weather data in the specified unit.
- *
- * @param weatherData - The weather data object.
- * @param unitType - The unit type, either 'imperial' or 'metric'.
- * @returns - The temperature formatted as a string with the appropriate unit.
- */
-export const getTemperature = (weatherData: Weather, unitType: UnitType): string => {
-    if (unitType === 'imperial') {
-        return `${Math.ceil(weatherData.current.temp_f)}° F`;
-    } else {
-        return `${Math.ceil(weatherData.current.temp_c)}° C`;
-    }
-};
-
-/**
- * Returns the appropriate weather icon and color class based on the temperature in Fahrenheit.
- *
- * @param fahrenheit - The temperature in Fahrenheit.
- * @returns - An object containing the weather icon and color class.
- */
-export const getWeatherIcon = (fahrenheit: number): Record<string, string> => {
-    const icons = {
-        100: '',
-        75: '',
-        50: '',
-        25: '',
-        0: '',
-    } as const;
-    const colors = {
-        100: 'weather-color red',
-        75: 'weather-color orange',
-        50: 'weather-color lavender',
-        25: 'weather-color blue',
-        0: 'weather-color sky',
-    } as const;
-
-    type IconKeys = keyof typeof icons;
-
-    const threshold: IconKeys =
-        fahrenheit < 0
-            ? 0
-            : (([100, 75, 50, 25, 0] as IconKeys[]).find((threshold) => threshold <= fahrenheit) ?? 0);
-
-    const icon = icons[threshold || 50];
-    const color = colors[threshold || 50];
-
-    return {
-        icon,
-        color,
-    };
-};
-
-/**
- * Gets the wind conditions from the weather data in the specified unit.
- *
- * @param weatherData - The weather data object.
- * @param unitType - The unit type, either 'imperial' or 'metric'.
- * @returns - The wind conditions formatted as a string with the appropriate unit.
- */
-export const getWindConditions = (weatherData: Weather, unitType: UnitType): string => {
-    if (unitType === 'imperial') {
-        return `${Math.floor(weatherData.current.wind_mph)} mph`;
-    }
-    return `${Math.floor(weatherData.current.wind_kph)} kph`;
-};
-
-/**
- * Gets the chance of rain from the weather forecast data.
- *
- * @param weatherData - The weather data object.
- * @returns - The chance of rain formatted as a percentage string.
- */
-export const getRainChance = (weatherData: Weather): string =>
-    `${weatherData.forecast.forecastday[0].day.daily_chance_of_rain}%`;
-
-/**
- * Type Guard
- * Checks if the given title is a valid weather icon title.
- *
- * @param title - The weather icon title to check.
- * @returns - True if the title is a valid weather icon title, false otherwise.
- */
-export const isValidWeatherIconTitle = (title: string): title is WeatherIconTitle => {
-    return title in weatherIcons;
-};
-
-/**
- * Gets the appropriate weather icon based on the weather status text.
- *
- * @param weatherData - The weather data object.
- * @returns - The weather icon corresponding to the weather status text.
- */
-export const getWeatherStatusTextIcon = (weatherData: Weather): WeatherIcon => {
-    let iconQuery = weatherData.current.condition.text.trim().toLowerCase().replaceAll(' ', '_');
-
-    if (!weatherData.current.is_day && iconQuery === 'partly_cloudy') {
-        iconQuery = 'partly_cloudy_night';
-    }
-
-    if (isValidWeatherIconTitle(iconQuery)) {
-        return weatherIcons[iconQuery];
-    } else {
-        console.warn(`Unknown weather icon title: ${iconQuery}`);
-        return weatherIcons['warning'];
-    }
-};
-
-export const convertCelsiusToFahrenheit = (celsiusValue: number): number => {
-    return (celsiusValue * 9) / 5 + 32;
-};
diff --git a/src/scss/style.ts b/src/style/index.ts
similarity index 92%
rename from src/scss/style.ts
rename to src/style/index.ts
index cedc394..e290298 100644
--- a/src/scss/style.ts
+++ b/src/style/index.ts
@@ -1,13 +1,15 @@
-import options from '../options';
-import { bash, dependencies } from '../lib/utils';
-import { MatugenColors } from '../lib/options/options.types';
+import { MatugenColors } from '../lib/options/types';
 import { initializeTrackers } from './optionsTrackers';
-import { isHexColor } from '../shared/variables';
 import { readFile, writeFile } from 'astal/file';
 import { App } from 'astal/gtk3';
 import { initializeHotReload } from './utils/hotReload';
-import { matugenService } from 'src/services/matugen';
 import { Opt } from 'src/lib/options';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+import options from 'src/configuration';
+import { MatugenService } from 'src/services/matugen';
+import { isHexColor } from 'src/lib/validation/colors';
+
+const matugenService = MatugenService.getInstance();
 
 /**
  * Central manager for theme styling throughout the application
@@ -19,7 +21,7 @@ class ThemeStyleManager {
      * Falls back to standard theme if Matugen is unavailable
      */
     public async applyCss(): Promise<void> {
-        if (!dependencies('sass')) return;
+        if (!SystemUtilities.checkDependencies('sass')) return;
 
         try {
             const variables = await this._generateThemeVariables();
@@ -163,7 +165,7 @@ class ThemeStyleManager {
      */
     private async _compileSass(themeVariables: string[]): Promise<void> {
         const themeVariablesPath = `${TMP}/variables.scss`;
-        const appScssPath = `${SRC_DIR}/src/scss/main.scss`;
+        const appScssPath = `${SRC_DIR}/src/style/main.scss`;
         const entryScssPath = `${TMP}/entry.scss`;
         const modulesScssPath = `${CONFIG_DIR}/modules.scss`;
         const compiledCssPath = `${TMP}/main.css`;
@@ -180,7 +182,9 @@ class ThemeStyleManager {
 
         writeFile(entryScssPath, combinedScss);
 
-        await bash(`sass --load-path=${SRC_DIR}/src/scss ${entryScssPath} ${compiledCssPath}`);
+        await SystemUtilities.bash(
+            `sass --load-path=${SRC_DIR}/src/style ${entryScssPath} ${compiledCssPath}`,
+        );
     }
 
     /**
diff --git a/src/style/main.scss b/src/style/main.scss
new file mode 100644
index 0000000..243a950
--- /dev/null
+++ b/src/style/main.scss
@@ -0,0 +1,57 @@
+* {
+    all: unset;
+    font-family: $font-name;
+    font-style: $font-style;
+    font-size: $font-size;
+    font-weight: $font-weight;
+}
+
+//general
+@import 'scss/common/common.scss';
+@import 'scss/common/floating-widget.scss';
+@import 'scss/common/widget-button.scss';
+@import 'scss/common/popover_menu.scss';
+
+//general scsss
+@import 'scss/common/general';
+
+//modules - bar
+@import 'scss/bar/bar';
+@import 'scss/bar/menu';
+@import 'scss/bar/audio';
+@import 'scss/bar/media';
+@import 'scss/bar/network';
+@import 'scss/bar/bluetooth';
+@import 'scss/bar/clock';
+@import 'scss/bar/workspace';
+@import 'scss/bar/window_title';
+@import 'scss/bar/systray';
+@import 'scss/bar/notifications';
+@import 'scss/bar/battery';
+@import 'scss/bar/style';
+
+//notifications
+@import 'scss/notifications/popups';
+
+//modules - menus
+@import 'scss/menus/menu';
+@import 'scss/menus/power';
+@import 'scss/menus/powerdropdown';
+@import 'scss/menus/audiomenu';
+@import 'scss/menus/network';
+@import 'scss/menus/bluetooth';
+@import 'scss/menus/media';
+@import 'scss/menus/notifications';
+@import 'scss/menus/calendar';
+@import 'scss/menus/energy';
+@import 'scss/menus/dashboard';
+
+//osd
+@import 'scss/osd/index';
+
+//settings dialog
+@import 'scss/settings/dialog';
+@import 'scss/settings/json-editor';
+
+//bar separator
+@import 'scss/bar/module-separator';
diff --git a/src/scss/optionsTrackers.ts b/src/style/optionsTrackers.ts
similarity index 56%
rename from src/scss/optionsTrackers.ts
rename to src/style/optionsTrackers.ts
index 53a004e..b7f3160 100644
--- a/src/scss/optionsTrackers.ts
+++ b/src/style/optionsTrackers.ts
@@ -1,15 +1,19 @@
+import options from 'src/configuration';
+import { normalizeToAbsolutePath } from 'src/lib/path/helpers';
 import icons from '../lib/icons/icons';
-import { bash, dependencies, Notify, isAnImage, normalizePath } from '../lib/utils';
-import options from '../options';
-import Wallpaper from 'src/services/Wallpaper';
+import { SystemUtilities } from 'src/core/system/SystemUtilities';
+import { WallpaperService } from 'src/services/wallpaper';
+import { isAnImage } from 'src/lib/validation/images';
+
+const wallpaperService = WallpaperService.getInstance();
 
 const { matugen } = options.theme;
 
 const ensureMatugenWallpaper = (): void => {
     const wallpaperPath = options.wallpaper.image.get();
 
-    if (matugen.get() && (!wallpaperPath.length || !isAnImage(normalizePath(wallpaperPath)))) {
-        Notify({
+    if (matugen.get() && (!wallpaperPath.length || !isAnImage(normalizeToAbsolutePath(wallpaperPath)))) {
+        SystemUtilities.notify({
             summary: 'Matugen Failed',
             body: "Please select a wallpaper in 'Theming > General' first.",
             iconName: icons.ui.warning,
@@ -23,7 +27,7 @@ export const initializeTrackers = (resetCssFunc: () => void): void => {
         ensureMatugenWallpaper();
     });
 
-    Wallpaper.connect('changed', () => {
+    wallpaperService.connect('changed', () => {
         console.info('Wallpaper changed, regenerating Matugen colors...');
         if (options.theme.matugen.get()) {
             resetCssFunc();
@@ -31,13 +35,16 @@ export const initializeTrackers = (resetCssFunc: () => void): void => {
     });
 
     options.wallpaper.image.subscribe(() => {
-        if ((!Wallpaper.isRunning() && options.theme.matugen.get()) || !options.wallpaper.enable.get()) {
+        if (
+            (!wallpaperService.isRunning() && options.theme.matugen.get()) ||
+            !options.wallpaper.enable.get()
+        ) {
             console.info('Wallpaper path changed, regenerating Matugen colors...');
             resetCssFunc();
         }
-        if (options.wallpaper.pywal.get() && dependencies('wal')) {
+        if (options.wallpaper.pywal.get() && SystemUtilities.checkDependencies('wal')) {
             const wallpaperPath = options.wallpaper.image.get();
-            bash(`wal -i "${wallpaperPath}"`);
+            SystemUtilities.bash(`wal -i "${wallpaperPath}"`);
         }
     });
 };
diff --git a/src/scss/style/bar/audio.scss b/src/style/scss/bar/audio.scss
similarity index 100%
rename from src/scss/style/bar/audio.scss
rename to src/style/scss/bar/audio.scss
diff --git a/src/scss/style/bar/bar.scss b/src/style/scss/bar/bar.scss
similarity index 100%
rename from src/scss/style/bar/bar.scss
rename to src/style/scss/bar/bar.scss
diff --git a/src/scss/style/bar/battery.scss b/src/style/scss/bar/battery.scss
similarity index 100%
rename from src/scss/style/bar/battery.scss
rename to src/style/scss/bar/battery.scss
diff --git a/src/scss/style/bar/bluetooth.scss b/src/style/scss/bar/bluetooth.scss
similarity index 100%
rename from src/scss/style/bar/bluetooth.scss
rename to src/style/scss/bar/bluetooth.scss
diff --git a/src/scss/style/bar/clock.scss b/src/style/scss/bar/clock.scss
similarity index 100%
rename from src/scss/style/bar/clock.scss
rename to src/style/scss/bar/clock.scss
diff --git a/src/scss/style/bar/media.scss b/src/style/scss/bar/media.scss
similarity index 100%
rename from src/scss/style/bar/media.scss
rename to src/style/scss/bar/media.scss
diff --git a/src/scss/style/bar/menu.scss b/src/style/scss/bar/menu.scss
similarity index 100%
rename from src/scss/style/bar/menu.scss
rename to src/style/scss/bar/menu.scss
diff --git a/src/scss/style/bar/module-separator.scss b/src/style/scss/bar/module-separator.scss
similarity index 100%
rename from src/scss/style/bar/module-separator.scss
rename to src/style/scss/bar/module-separator.scss
diff --git a/src/scss/style/bar/network.scss b/src/style/scss/bar/network.scss
similarity index 100%
rename from src/scss/style/bar/network.scss
rename to src/style/scss/bar/network.scss
diff --git a/src/scss/style/bar/notifications.scss b/src/style/scss/bar/notifications.scss
similarity index 100%
rename from src/scss/style/bar/notifications.scss
rename to src/style/scss/bar/notifications.scss
diff --git a/src/scss/style/bar/style.scss b/src/style/scss/bar/style.scss
similarity index 100%
rename from src/scss/style/bar/style.scss
rename to src/style/scss/bar/style.scss
diff --git a/src/scss/style/bar/systray.scss b/src/style/scss/bar/systray.scss
similarity index 100%
rename from src/scss/style/bar/systray.scss
rename to src/style/scss/bar/systray.scss
diff --git a/src/scss/style/bar/window_title.scss b/src/style/scss/bar/window_title.scss
similarity index 100%
rename from src/scss/style/bar/window_title.scss
rename to src/style/scss/bar/window_title.scss
diff --git a/src/scss/style/bar/workspace.scss b/src/style/scss/bar/workspace.scss
similarity index 100%
rename from src/scss/style/bar/workspace.scss
rename to src/style/scss/bar/workspace.scss
diff --git a/src/scss/style/colors.scss b/src/style/scss/colors.scss
similarity index 100%
rename from src/scss/style/colors.scss
rename to src/style/scss/colors.scss
diff --git a/src/scss/style/common/common.scss b/src/style/scss/common/common.scss
similarity index 100%
rename from src/scss/style/common/common.scss
rename to src/style/scss/common/common.scss
diff --git a/src/scss/style/common/floating-widget.scss b/src/style/scss/common/floating-widget.scss
similarity index 100%
rename from src/scss/style/common/floating-widget.scss
rename to src/style/scss/common/floating-widget.scss
diff --git a/src/scss/style/common/general.scss b/src/style/scss/common/general.scss
similarity index 100%
rename from src/scss/style/common/general.scss
rename to src/style/scss/common/general.scss
diff --git a/src/scss/style/common/popover_menu.scss b/src/style/scss/common/popover_menu.scss
similarity index 100%
rename from src/scss/style/common/popover_menu.scss
rename to src/style/scss/common/popover_menu.scss
diff --git a/src/scss/style/common/widget-button.scss b/src/style/scss/common/widget-button.scss
similarity index 100%
rename from src/scss/style/common/widget-button.scss
rename to src/style/scss/common/widget-button.scss
diff --git a/src/scss/style/highlights.scss b/src/style/scss/highlights.scss
similarity index 100%
rename from src/scss/style/highlights.scss
rename to src/style/scss/highlights.scss
diff --git a/src/scss/style/menus/audiomenu.scss b/src/style/scss/menus/audiomenu.scss
similarity index 100%
rename from src/scss/style/menus/audiomenu.scss
rename to src/style/scss/menus/audiomenu.scss
diff --git a/src/scss/style/menus/bluetooth.scss b/src/style/scss/menus/bluetooth.scss
similarity index 100%
rename from src/scss/style/menus/bluetooth.scss
rename to src/style/scss/menus/bluetooth.scss
diff --git a/src/scss/style/menus/calendar.scss b/src/style/scss/menus/calendar.scss
similarity index 100%
rename from src/scss/style/menus/calendar.scss
rename to src/style/scss/menus/calendar.scss
diff --git a/src/scss/style/menus/dashboard.scss b/src/style/scss/menus/dashboard.scss
similarity index 88%
rename from src/scss/style/menus/dashboard.scss
rename to src/style/scss/menus/dashboard.scss
index 650cc18..b0d64ac 100644
--- a/src/scss/style/menus/dashboard.scss
+++ b/src/style/scss/menus/dashboard.scss
@@ -52,7 +52,11 @@
             }
 
             label {
-                color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-text,
+                    $bar-menus-menu-dashboard-shortcuts-text
+                );
                 font-size: 1.7em;
             }
 
@@ -181,7 +185,11 @@
                     $bar-menus-buttons-default,
                     $bar-menus-menu-dashboard-shortcuts-background
                 );
-                color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-shortcuts-text);
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-text,
+                    $bar-menus-menu-dashboard-shortcuts-text
+                );
                 min-height: 3em;
 
                 label {
@@ -221,7 +229,11 @@
             min-width: 3.8em;
 
             label {
-                color: if($bar-menus-monochrome, $bar-menus-buttons-text, $bar-menus-menu-dashboard-controls-wifi-text);
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-buttons-text,
+                    $bar-menus-menu-dashboard-controls-wifi-text
+                );
                 font-size: 1.6em;
             }
 
@@ -473,19 +485,35 @@
             }
 
             &.cpu label {
-                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-cpu-icon);
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-icons-active,
+                    $bar-menus-menu-dashboard-monitors-cpu-icon
+                );
             }
 
             &.ram label {
-                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-ram-icon);
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-icons-active,
+                    $bar-menus-menu-dashboard-monitors-ram-icon
+                );
             }
 
             &.gpu label {
-                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-gpu-icon);
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-icons-active,
+                    $bar-menus-menu-dashboard-monitors-gpu-icon
+                );
             }
 
             &.storage label {
-                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-dashboard-monitors-disk-icon);
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-icons-active,
+                    $bar-menus-menu-dashboard-monitors-disk-icon
+                );
             }
 
             .stats-bar {
@@ -552,19 +580,35 @@
             font-size: 0.9em;
 
             &.cpu {
-                color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-cpu-label);
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-label,
+                    $bar-menus-menu-dashboard-monitors-cpu-label
+                );
             }
 
             &.ram {
-                color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-ram-label);
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-label,
+                    $bar-menus-menu-dashboard-monitors-ram-label
+                );
             }
 
             &.gpu {
-                color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-gpu-label);
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-label,
+                    $bar-menus-menu-dashboard-monitors-gpu-label
+                );
             }
 
             &.storage {
-                color: if($bar-menus-monochrome, $bar-menus-label, $bar-menus-menu-dashboard-monitors-disk-label);
+                color: if(
+                    $bar-menus-monochrome,
+                    $bar-menus-label,
+                    $bar-menus-menu-dashboard-monitors-disk-label
+                );
             }
         }
     }
diff --git a/src/scss/style/menus/energy.scss b/src/style/scss/menus/energy.scss
similarity index 100%
rename from src/scss/style/menus/energy.scss
rename to src/style/scss/menus/energy.scss
diff --git a/src/scss/style/menus/media.scss b/src/style/scss/menus/media.scss
similarity index 100%
rename from src/scss/style/menus/media.scss
rename to src/style/scss/menus/media.scss
diff --git a/src/scss/style/menus/menu.scss b/src/style/scss/menus/menu.scss
similarity index 100%
rename from src/scss/style/menus/menu.scss
rename to src/style/scss/menus/menu.scss
diff --git a/src/scss/style/menus/network.scss b/src/style/scss/menus/network.scss
similarity index 100%
rename from src/scss/style/menus/network.scss
rename to src/style/scss/menus/network.scss
diff --git a/src/scss/style/menus/notifications.scss b/src/style/scss/menus/notifications.scss
similarity index 100%
rename from src/scss/style/menus/notifications.scss
rename to src/style/scss/menus/notifications.scss
diff --git a/src/scss/style/menus/power.scss b/src/style/scss/menus/power.scss
similarity index 100%
rename from src/scss/style/menus/power.scss
rename to src/style/scss/menus/power.scss
diff --git a/src/scss/style/menus/powerdropdown.scss b/src/style/scss/menus/powerdropdown.scss
similarity index 100%
rename from src/scss/style/menus/powerdropdown.scss
rename to src/style/scss/menus/powerdropdown.scss
diff --git a/src/scss/style/notifications/popups.scss b/src/style/scss/notifications/popups.scss
similarity index 100%
rename from src/scss/style/notifications/popups.scss
rename to src/style/scss/notifications/popups.scss
diff --git a/src/scss/style/osd/index.scss b/src/style/scss/osd/index.scss
similarity index 100%
rename from src/scss/style/osd/index.scss
rename to src/style/scss/osd/index.scss
diff --git a/src/scss/style/settings/dialog.scss b/src/style/scss/settings/dialog.scss
similarity index 100%
rename from src/scss/style/settings/dialog.scss
rename to src/style/scss/settings/dialog.scss
diff --git a/src/style/scss/settings/json-editor.scss b/src/style/scss/settings/json-editor.scss
new file mode 100644
index 0000000..d4c7df8
--- /dev/null
+++ b/src/style/scss/settings/json-editor.scss
@@ -0,0 +1,86 @@
+.object-input-container {
+    min-width: 35em;
+    .unsaved-icon-container {
+        .unsaved-icon {
+            margin-right: 1em;
+            font-size: 1em;
+        }
+    }
+
+    .json-editor-wrapper {
+        margin-top: 1em;
+        padding: 1em;
+        background-color: transparentize($bar-menus-cards, 0.97);
+        border: 0.1em solid transparentize($bar-menus-border-color, 0.9);
+        border-radius: $bar-menus-border-radius;
+
+        .json-editor-scrollable-container {
+            padding: 1em;
+            min-height: 20em;
+            background-color: #1a1b26;
+
+            > widget,
+            > textview,
+            .json-editor-sourceview {
+                font-size: 0.95em;
+                font-weight: 500;
+            }
+        }
+
+        .editor-controls {
+            margin-top: 0.75em;
+
+            .error-message {
+                color: #f7768e;
+                font-size: 0.9em;
+                margin: 0.3em 0;
+            }
+
+            .controls-row {
+                .hint-text {
+                    color: transparentize($bar-menus-text, 0.5);
+                    font-size: 0.85em;
+                }
+            }
+
+            .save-button {
+                background-color: $bar-menus-buttons-default;
+                color: $bar-menus-buttons-text;
+                padding: 0.3em 0.75em;
+                border-radius: $bar-menus-buttons-radius * 0.5;
+                font-weight: 500;
+
+                &:hover {
+                    background-color: transparentize($bar-menus-buttons-default, 0.2);
+                }
+
+                &:active {
+                    background-color: $bar-menus-buttons-active;
+                }
+
+                &:disabled {
+                    background-color: $bar-menus-buttons-disabled;
+                    color: transparentize($bar-menus-buttons-text, 0.5);
+                }
+            }
+        }
+    }
+
+    .json-preview {
+        padding: 0.25em 0.75em;
+        background-color: transparentize($bar-menus-background, 0.3);
+        border-radius: $bar-menus-border-radius * 0.4;
+        transition: all 200ms ease;
+
+        .preview-text {
+            color: transparentize($bar-menus-text, 0.4);
+            font-size: 0.9em;
+        }
+
+        .preview-icon {
+            margin-left: 0.5em;
+            font-size: 1em;
+            color: $bar-menus-text;
+        }
+    }
+}
diff --git a/src/style/utils/hotReload.ts b/src/style/utils/hotReload.ts
new file mode 100644
index 0000000..84b3ab5
--- /dev/null
+++ b/src/style/utils/hotReload.ts
@@ -0,0 +1,19 @@
+import { monitorFile } from 'astal';
+import { themeManager } from '..';
+
+export const initializeHotReload = async (): Promise<void> => {
+    const monitorList = [
+        `${SRC_DIR}/src/style/main.scss`,
+        `${SRC_DIR}/src/style/scss/bar`,
+        `${SRC_DIR}/src/style/scss/common`,
+        `${SRC_DIR}/src/style/scss/menus`,
+        `${SRC_DIR}/src/style/scss/notifications`,
+        `${SRC_DIR}/src/style/scss/osd`,
+        `${SRC_DIR}/src/style/scss/settings`,
+        `${SRC_DIR}/src/style/scss/colors.scss`,
+        `${SRC_DIR}/src/style/scss/highlights.scss`,
+        `${CONFIG_DIR}/modules.scss`,
+    ];
+
+    monitorList.forEach((file) => monitorFile(file, themeManager.applyCss.bind(themeManager)));
+};