diff --git a/roles/ags/files/.eslintrc.yml b/roles/ags/files/.eslintrc.yml
new file mode 100644
index 0000000..ff96a83
--- /dev/null
+++ b/roles/ags/files/.eslintrc.yml
@@ -0,0 +1,130 @@
+env:
+  es2022: true
+extends:
+  - "eslint:recommended"
+  - "plugin:@typescript-eslint/recommended"
+parser: "@typescript-eslint/parser"
+parserOptions:
+  ecmaVersion: 2022
+  sourceType: "module"
+  project: "./tsconfig.json"
+  warnOnUnsupportedTypeScriptVersion: false
+root: true
+ignorePatterns:
+  - types/
+plugins:
+  - "@typescript-eslint"
+rules:
+  "@typescript-eslint/ban-ts-comment":
+    - "off"
+  "@typescript-eslint/no-non-null-assertion":
+    - "off"
+  # "@typescript-eslint/no-explicit-any":
+  #   - "off"
+  "@typescript-eslint/no-unused-vars":
+    - error
+    - varsIgnorePattern: (^unused|_$)
+      argsIgnorePattern: ^(unused|_)
+  "@typescript-eslint/no-empty-interface":
+    - "off"
+
+  arrow-parens:
+    - error
+    - as-needed
+  comma-dangle:
+    - error
+    - always-multiline
+  comma-spacing:
+    - error
+    - before: false
+      after: true
+  comma-style:
+    - error
+    - last
+  curly:
+    - error
+    - multi-or-nest
+    - consistent
+  dot-location:
+    - error
+    - property
+  eol-last:
+    - error
+  eqeqeq:
+    - error
+    - always
+  indent:
+    - error
+    - 4
+    - SwitchCase: 1
+  keyword-spacing:
+    - error
+    - before: true
+  lines-between-class-members:
+    - error
+    - always
+    - exceptAfterSingleLine: true
+  padded-blocks:
+    - error
+    - never
+    - allowSingleLineBlocks: false
+  prefer-const:
+    - error
+  quotes:
+    - error
+    - double
+    - avoidEscape: true
+  semi:
+    - error
+    - never
+  nonblock-statement-body-position:
+    - error
+    - below
+  no-trailing-spaces:
+    - error
+  no-useless-escape:
+    - off
+  max-len:
+    - error
+    - code: 100
+  func-call-spacing:
+    - error
+  array-bracket-spacing:
+    - error
+  space-before-function-paren:
+    - error
+    - anonymous: never
+      named: never
+      asyncArrow: ignore
+  space-before-blocks:
+    - error
+  key-spacing:
+    - error
+  object-curly-spacing:
+    - error
+    - always
+globals:
+  Widget: readonly
+  Utils: readonly
+  App: readonly
+  Variable: readonly
+  Service: readonly
+  pkg: readonly
+  ARGV: readonly
+  Debugger: readonly
+  GIRepositoryGType: readonly
+  globalThis: readonly
+  imports: readonly
+  Intl: readonly
+  log: readonly
+  logError: readonly
+  print: readonly
+  printerr: readonly
+  window: readonly
+  TextEncoder: readonly
+  TextDecoder: readonly
+  console: readonly
+  setTimeout: readonly
+  setInterval: readonly
+  clearTimeout: readonly
+  clearInterval: readonly
diff --git a/roles/ags/files/lib/hyprland.ts b/roles/ags/files/lib/hyprland.ts
index b121ed7..9bfe169 100644
--- a/roles/ags/files/lib/hyprland.ts
+++ b/roles/ags/files/lib/hyprland.ts
@@ -2,79 +2,73 @@ import options from "options"
 const { messageAsync } = await Service.import("hyprland")
 
 const {
-    hyprland,
-    theme: {
-        spacing,
-        radius,
-        border: { width },
-        blur,
-        shadows,
-        dark: {
-            primary: { bg: darkActive },
-        },
-        light: {
-            primary: { bg: lightActive },
-        },
-        scheme,
+  hyprland,
+  theme: {
+    radius,
+    blur,
+    shadows,
+    dark: {
+      primary: { bg: darkActive },
     },
+    light: {
+      primary: { bg: lightActive },
+    },
+    scheme,
+  },
 } = options
 
 const deps = [
-    "hyprland",
-    spacing.id,
-    radius.id,
-    blur.id,
-    width.id,
-    shadows.id,
-    darkActive.id,
-    lightActive.id,
-    scheme.id,
+  "hyprland",
+  radius.id,
+  blur.id,
+  shadows.id,
+  darkActive.id,
+  lightActive.id,
+  scheme.id,
 ]
 
 function activeBorder() {
-    const color = scheme.value === "dark"
-        ? darkActive.value
-        : lightActive.value
+  const color = scheme.value === "dark"
+    ? darkActive.value
+    : lightActive.value
 
-    return color.replace("#", "")
+  return color.replace("#", "")
 }
 
 function sendBatch(batch: string[]) {
-    const cmd = batch
-        .filter(x => !!x)
-        .map(x => `keyword ${x}`)
-        .join("; ")
+  const cmd = batch
+    .filter(x => !!x)
+    .map(x => `keyword ${x}`)
+    .join("; ")
 
-    return messageAsync(`[[BATCH]]/${cmd}`)
+  return messageAsync(`[[BATCH]]/${cmd}`)
 }
 
 async function setupHyprland() {
-    const wm_gaps = Math.floor(hyprland.gaps.value * spacing.value)
+  sendBatch([
+    `general:border_size ${hyprland.borderSize.value}`,
+    `general:gaps_out ${hyprland.gapsOut.value}`,
+    `general:gaps_in ${hyprland.gapsIn.value}`,
+    `general:col.active_border rgba(${activeBorder()}ff)`,
+    `general:col.inactive_border rgba(${hyprland.inactiveBorder.value})`,
+    `decoration:rounding ${radius}`,
+    `decoration:drop_shadow ${shadows.value ? "yes" : "no"}`,
+    `dwindle:no_gaps_when_only ${hyprland.gapsWhenOnly.value ? 0 : 1}`,
+    `master:no_gaps_when_only ${hyprland.gapsWhenOnly.value ? 0 : 1}`,
+  ])
 
-    sendBatch([
-        `general:border_size ${width}`,
-        `general:gaps_out ${wm_gaps}`,
-        `general:gaps_in ${Math.floor(wm_gaps / 2)}`,
-        `general:col.active_border rgba(${activeBorder()}ff)`,
-        `general:col.inactive_border rgba(${hyprland.inactiveBorder.value})`,
-        `decoration:rounding ${radius}`,
-        `decoration:drop_shadow ${shadows.value ? "yes" : "no"}`,
-        `dwindle:no_gaps_when_only ${hyprland.gapsWhenOnly.value ? 0 : 1}`,
-        `master:no_gaps_when_only ${hyprland.gapsWhenOnly.value ? 0 : 1}`,
-    ])
+  await sendBatch(App.windows.map(({ name }) => `layerrule unset, ${name}`))
 
-    await sendBatch(App.windows.map(({ name }) => `layerrule unset, ${name}`))
-
-    if (blur.value > 0) {
-        sendBatch(App.windows.flatMap(({ name }) => [
-            `layerrule unset, ${name}`,
-            `layerrule blur, ${name}`,
-            `layerrule ignorealpha ${/* based on shadow color */.29}, ${name}`,
-        ]))
-    }
+  if (blur.value > 0) {
+    sendBatch(App.windows.flatMap(({ name }) => [
+      `layerrule unset, ${name}`,
+      `layerrule blur, ${name}`,
+      `layerrule ignorealpha ${/* based on shadow color */.29}, ${name}`,
+    ]))
+  }
 }
 
 export default function init() {
-    options.handler(deps, setupHyprland)
-    setupHyprland()
+  options.handler(deps, setupHyprland)
+  setupHyprland()
 }
diff --git a/roles/ags/files/lib/option.ts b/roles/ags/files/lib/option.ts
index e2e34fb..de60835 100644
--- a/roles/ags/files/lib/option.ts
+++ b/roles/ags/files/lib/option.ts
@@ -71,8 +71,8 @@ export function mkOptions<T extends object>(cacheFile: string, object: T) {
 
   Utils.ensureDirectory(cacheFile.split("/").slice(0, -1).join("/"))
 
-  const configFile = `${TMP}/config.json`
-  console.log(configFile)
+  const configFile = `${App.configDir}/config.json`
+  console.log("Config file: " + configFile)
   const values = getOptions(object).reduce((obj, { id, value }) => ({ [id]: value, ...obj }), {})
   Utils.writeFileSync(JSON.stringify(values, null, 2), configFile)
   Utils.monitorFile(configFile, () => {
diff --git a/roles/ags/files/options.ts b/roles/ags/files/options.ts
index 88d6d04..2e2f74a 100644
--- a/roles/ags/files/options.ts
+++ b/roles/ags/files/options.ts
@@ -4,7 +4,7 @@ import { icon } from "lib/utils"
 import icons from "lib/icons"
 
 const options = mkOptions(OPTIONS, {
-  autotheme: opt(false),
+  autotheme: opt(true),
 
   wallpaper: {
     resolution: opt<import("service/wallpaper").Resolution>(1920),
@@ -52,14 +52,14 @@ const options = mkOptions(OPTIONS, {
     shadows: opt(true),
     padding: opt(7),
     spacing: opt(12),
-    radius: opt(11),
+    radius: opt(14),
   },
 
   transition: opt(200),
 
   font: {
-    size: opt(13),
-    name: opt("Ubuntu Nerd Font"),
+    size: opt(12),
+    name: opt("CaskaydiaCove Nerd Font"),
   },
 
   bar: {
@@ -69,7 +69,7 @@ const options = mkOptions(OPTIONS, {
     layout: {
       start: opt<Array<import("widget/bar/Bar").BarWidget>>([
         "launcher",
-        //"workspaces",
+        "workspaces",
         "taskbar",
         "expander",
         "messages",
@@ -83,8 +83,8 @@ const options = mkOptions(OPTIONS, {
         "systray",
         "colorpicker",
         "screenrecord",
-        "system",
         "battery",
+        "system",
         "powermenu",
       ]),
     },
@@ -95,12 +95,12 @@ const options = mkOptions(OPTIONS, {
       },
       label: {
         colored: opt(false),
-        label: opt(" Applications"),
+        label: opt(""),
       },
       action: opt(() => App.toggleWindow("launcher")),
     },
     date: {
-      format: opt("%H:%M - %A %e."),
+      format: opt("%H:%M - %d.%m.%Y"),
       action: opt(() => App.toggleWindow("datemenu")),
     },
     battery: {
@@ -116,7 +116,7 @@ const options = mkOptions(OPTIONS, {
     },
     taskbar: {
       iconSize: opt(0),
-      monochrome: opt(true),
+      monochrome: opt(false),
       exclusive: opt(false),
     },
     messages: {
@@ -129,7 +129,7 @@ const options = mkOptions(OPTIONS, {
       ]),
     },
     media: {
-      monochrome: opt(true),
+      monochrome: opt(false),
       preferred: opt("spotify"),
       direction: opt<"left" | "right">("right"),
       format: opt("{artists} - {title}"),
@@ -140,7 +140,6 @@ const options = mkOptions(OPTIONS, {
       action: opt(() => App.toggleWindow("powermenu")),
     },
   },
-
   launcher: {
     width: opt(0),
     margin: opt(80),
@@ -156,12 +155,9 @@ const options = mkOptions(OPTIONS, {
       max: opt(6),
       favorites: opt([
         [
-          "firefox",
-          "org.gnome.Nautilus",
+          "brave",
           "org.gnome.Calendar",
           "obsidian",
-          "discord",
-          "spotify",
         ],
       ]),
     },
@@ -170,7 +166,7 @@ const options = mkOptions(OPTIONS, {
   overview: {
     scale: opt(9),
     workspaces: opt(7),
-    monochromeIcon: opt(true),
+    monochromeIcon: opt(false),
   },
 
   powermenu: {
@@ -189,9 +185,9 @@ const options = mkOptions(OPTIONS, {
     },
     width: opt(380),
     position: opt<"left" | "center" | "right">("right"),
-    networkSettings: opt("gtk-launch gnome-control-center"),
+    networkSettings: opt("nm-connection-editor"),
     media: {
-      monochromeIcon: opt(true),
+      monochromeIcon: opt(false),
       coverSize: opt(100),
     },
   },
@@ -228,12 +224,15 @@ const options = mkOptions(OPTIONS, {
 
   notifications: {
     position: opt<Array<"top" | "bottom" | "left" | "right">>(["top", "right"]),
-    blacklist: opt(["Spotify"]),
+    blacklist: opt([""]),
     width: opt(440),
   },
 
   hyprland: {
     gaps: opt(2.4),
+    gapsIn: opt(2),
+    gapsOut: opt(3),
+    borderSize: opt(1),
     inactiveBorder: opt("333333ff"),
     gapsWhenOnly: opt(false),
   },
diff --git a/roles/ags/files/package.json b/roles/ags/files/package.json
new file mode 100644
index 0000000..bc86b1b
--- /dev/null
+++ b/roles/ags/files/package.json
@@ -0,0 +1,19 @@
+{
+    "name": "ags-dotfiles",
+    "author": "Aylur",
+    "kofi": "https://ko-fi.com/aylur",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/Aylur/dotfiles.git"
+    },
+    "devDependencies": {
+        "@girs/accountsservice-1.0": "^1.0.0-3.2.7",
+        "@typescript-eslint/eslint-plugin": "^6.20.0",
+        "eslint": "^8.56.0",
+        "eslint-config-standard-with-typescript": "^43.0.1",
+        "eslint-plugin-import": "^2.29.1",
+        "eslint-plugin-n": "^16.6.2",
+        "eslint-plugin-promise": "^6.1.1",
+        "typescript": "^5.3.3"
+    }
+}
diff --git a/roles/ags/files/service/wallpaper.ts b/roles/ags/files/service/wallpaper.ts
index 0e4bdda..263a9e1 100644
--- a/roles/ags/files/service/wallpaper.ts
+++ b/roles/ags/files/service/wallpaper.ts
@@ -3,96 +3,96 @@ import { dependencies, sh } from "lib/utils"
 
 export type Resolution = 1920 | 1366 | 3840
 export type Market =
-    | "random"
-    | "en-US"
-    | "ja-JP"
-    | "en-AU"
-    | "en-GB"
-    | "de-DE"
-    | "en-NZ"
-    | "en-CA"
+  | "random"
+  | "en-US"
+  | "ja-JP"
+  | "en-AU"
+  | "en-GB"
+  | "de-DE"
+  | "en-NZ"
+  | "en-CA"
 
 const WP = `${Utils.HOME}/.config/background`
 const Cache = `${Utils.HOME}/Pictures/Wallpapers/Bing`
 
 class Wallpaper extends Service {
-    static {
-        Service.register(this, {}, {
-            "wallpaper": ["string"],
-        })
+  static {
+    Service.register(this, {}, {
+      "wallpaper": ["string"],
+    })
+  }
+
+  #blockMonitor = false
+
+  #wallpaper() {
+    if (!dependencies("swww"))
+      return
+
+    sh("hyprctl cursorpos").then(pos => {
+      sh([
+        "swww", "img",
+        "--transition-type", "grow",
+        "--transition-pos", pos.replace(" ", ""),
+        WP,
+      ]).then(() => {
+        this.changed("wallpaper")
+      })
+    })
+  }
+
+  async #setWallpaper(path: string) {
+    this.#blockMonitor = true
+
+    await sh(`cp ${path} ${WP}`)
+    this.#wallpaper()
+
+    this.#blockMonitor = false
+  }
+
+  async #fetchBing() {
+    const res = await Utils.fetch("https://bing.biturl.top/", {
+      params: {
+        resolution: options.wallpaper.resolution.value,
+        format: "json",
+        image_format: "png",
+        index: "random",
+        mkt: options.wallpaper.market.value,
+      },
+    }).then(res => res.text())
+
+    if (!res.startsWith("{"))
+      return console.warn("bing api", res)
+
+    const { url } = JSON.parse(res)
+    const file = `${Cache}/${url.replace("https://www.bing.com/th?id=", "")}`
+
+    if (dependencies("curl")) {
+      Utils.ensureDirectory(Cache)
+      await sh(`curl "${url}" --output ${file}`)
+      this.#setWallpaper(file)
     }
+  }
 
-    #blockMonitor = false
+  readonly random = () => { this.#fetchBing() }
+  readonly set = (path: string) => { this.#setWallpaper(path) }
+  get wallpaper() { return WP }
 
-    #wallpaper() {
-        if (!dependencies("swww"))
-            return
+  constructor() {
+    super()
 
-        sh("hyprctl cursorpos").then(pos => {
-            sh([
-                "swww", "img",
-                "--transition-type", "grow",
-                "--transition-pos", pos.replace(" ", ""),
-                WP,
-            ]).then(() => {
-                this.changed("wallpaper")
-            })
-        })
-    }
+    if (!dependencies("swww"))
+      return this
 
-    async #setWallpaper(path: string) {
-        this.#blockMonitor = true
-
-        await sh(`cp ${path} ${WP}`)
+    // gtk portal
+    Utils.monitorFile(WP, () => {
+      if (!this.#blockMonitor)
         this.#wallpaper()
+    })
 
-        this.#blockMonitor = false
-    }
-
-    async #fetchBing() {
-        const res = await Utils.fetch("https://bing.biturl.top/", {
-            params: {
-                resolution: options.wallpaper.resolution.value,
-                format: "json",
-                image_format: "jpg",
-                index: "random",
-                mkt: options.wallpaper.market.value,
-            },
-        }).then(res => res.text())
-
-        if (!res.startsWith("{"))
-            return console.warn("bing api", res)
-
-        const { url } = JSON.parse(res)
-        const file = `${Cache}/${url.replace("https://www.bing.com/th?id=", "")}`
-
-        if (dependencies("curl")) {
-            Utils.ensureDirectory(Cache)
-            await sh(`curl "${url}" --output ${file}`)
-            this.#setWallpaper(file)
-        }
-    }
-
-    readonly random = () => { this.#fetchBing() }
-    readonly set = (path: string) => { this.#setWallpaper(path) }
-    get wallpaper() { return WP }
-
-    constructor() {
-        super()
-
-        if (!dependencies("swww"))
-            return this
-
-        // gtk portal
-        Utils.monitorFile(WP, () => {
-            if (!this.#blockMonitor)
-                this.#wallpaper()
-        })
-
-        Utils.execAsync("swww-daemon")
-            .then(this.#wallpaper)
-            .catch(() => null)
-    }
+    Utils.execAsync("swww init")
+      .then(() => this.#wallpaper)
+      .catch((e) => console.warn(e))
+  }
 }
 
 export default new Wallpaper
diff --git a/roles/ags/files/tsconfig.json b/roles/ags/files/tsconfig.json
new file mode 100644
index 0000000..d7be857
--- /dev/null
+++ b/roles/ags/files/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": [
+      "ES2022"
+    ],
+    "allowJs": true,
+    "checkJs": true,
+    "strict": true,
+    "noImplicitAny": false,
+    "baseUrl": ".",
+    "typeRoots": [
+      "./types",
+      "./node_modules/@girs"
+    ],
+    "skipLibCheck": true
+  }
+}
\ No newline at end of file
diff --git a/roles/ags/files/widget/bar/buttons/SystemIndicators.ts b/roles/ags/files/widget/bar/buttons/SystemIndicators.ts
index d2cdd47..ea77296 100644
--- a/roles/ags/files/widget/bar/buttons/SystemIndicators.ts
+++ b/roles/ags/files/widget/bar/buttons/SystemIndicators.ts
@@ -59,12 +59,6 @@ const BluetoothIndicator = () => Widget.Overlay({
     icon: icons.bluetooth.enabled,
     visible: bluetooth.bind("enabled"),
   }),
-  overlay: Widget.Label({
-    hpack: "end",
-    vpack: "start",
-    label: bluetooth.bind("connected_devices").as(c => `${c.length}`),
-    visible: bluetooth.bind("connected_devices").as(c => c.length > 0),
-  }),
 })
 
 const NetworkIndicator = () => Widget.Icon().hook(network, self => {
diff --git a/roles/ags/files/widget/settings/layout.ts b/roles/ags/files/widget/settings/layout.ts
index 2b45810..22c37ad 100644
--- a/roles/ags/files/widget/settings/layout.ts
+++ b/roles/ags/files/widget/settings/layout.ts
@@ -7,141 +7,144 @@ import options from "options"
 import icons from "lib/icons"
 
 const {
-    autotheme: at,
-    font,
-    theme,
-    bar: b,
-    launcher: l,
-    overview: ov,
-    powermenu: pm,
-    quicksettings: qs,
-    osd,
-    hyprland: h,
+  autotheme: at,
+  font,
+  theme,
+  bar: b,
+  launcher: l,
+  overview: ov,
+  powermenu: pm,
+  quicksettings: qs,
+  osd,
+  hyprland: h,
 } = options
 
 const {
-    dark,
-    light,
-    blur,
-    scheme,
-    padding,
-    spacing,
-    radius,
-    shadows,
-    widget,
-    border,
+  dark,
+  light,
+  blur,
+  scheme,
+  padding,
+  spacing,
+  radius,
+  shadows,
+  widget,
+  border,
 } = theme
 
 export default [
-    Page("Theme", icons.ui.themes,
-        Group("",
-            Wallpaper() as ReturnType<typeof Row>,
-            Row({ opt: at, title: "Auto Generate Color Scheme" }),
-            Row({ opt: scheme, title: "Color Scheme", type: "enum", enums: ["dark", "light"] }),
-        ),
-        Group("Dark Colors",
-            Row({ opt: dark.bg, title: "Background", type: "color" }),
-            Row({ opt: dark.fg, title: "Foreground", type: "color" }),
-            Row({ opt: dark.primary.bg, title: "Primary", type: "color" }),
-            Row({ opt: dark.primary.fg, title: "On Primary", type: "color" }),
-            Row({ opt: dark.error.bg, title: "Error", type: "color" }),
-            Row({ opt: dark.error.fg, title: "On Error", type: "color" }),
-            Row({ opt: dark.widget, title: "Widget", type: "color" }),
-            Row({ opt: dark.border, title: "Border", type: "color" }),
-        ),
-        Group("Light Colors",
-            Row({ opt: light.bg, title: "Background", type: "color" }),
-            Row({ opt: light.fg, title: "Foreground", type: "color" }),
-            Row({ opt: light.primary.bg, title: "Primary", type: "color" }),
-            Row({ opt: light.primary.fg, title: "On Primary", type: "color" }),
-            Row({ opt: light.error.bg, title: "Error", type: "color" }),
-            Row({ opt: light.error.fg, title: "On Error", type: "color" }),
-            Row({ opt: light.widget, title: "Widget", type: "color" }),
-            Row({ opt: light.border, title: "Border", type: "color" }),
-        ),
-        Group("Theme",
-            Row({ opt: shadows, title: "Shadows" }),
-            Row({ opt: widget.opacity, title: "Widget Opacity", max: 100 }),
-            Row({ opt: border.opacity, title: "Border Opacity", max: 100 }),
-            Row({ opt: border.width, title: "Border Width" }),
-            Row({ opt: blur, title: "Blur", note: "0 to disable", max: 70 }),
-        ),
-        Group("UI",
-            Row({ opt: padding, title: "Padding" }),
-            Row({ opt: spacing, title: "Spacing" }),
-            Row({ opt: radius, title: "Roundness" }),
-            Row({ opt: font.size, title: "Font Size" }),
-            Row({ opt: font.name, title: "Font Name", type: "font" }),
-        ),
+  Page("Theme", icons.ui.themes,
+    Group("",
+      Wallpaper() as ReturnType<typeof Row>,
+      Row({ opt: at, title: "Auto Generate Color Scheme" }),
+      Row({ opt: scheme, title: "Color Scheme", type: "enum", enums: ["dark", "light"] }),
     ),
-    Page("Bar", icons.ui.toolbars,
-        Group("General",
-            Row({ opt: b.flatButtons, title: "Flat Buttons" }),
-            Row({ opt: b.position, title: "Position", type: "enum", enums: ["top", "bottom"] }),
-            Row({ opt: b.corners, title: "Corners" }),
-        ),
-        Group("Launcher",
-            Row({ opt: b.launcher.icon.icon, title: "Icon" }),
-            Row({ opt: b.launcher.icon.colored, title: "Colored Icon" }),
-            Row({ opt: b.launcher.label.label, title: "Label" }),
-            Row({ opt: b.launcher.label.colored, title: "Colored Label" }),
-        ),
-        Group("Workspaces",
-            Row({ opt: b.workspaces.workspaces, title: "Number of Workspaces", note: "0 to make it dynamic" }),
-        ),
-        Group("Taskbar",
-            Row({ opt: b.taskbar.iconSize, title: "Icon Size" }),
-            Row({ opt: b.taskbar.monochrome, title: "Monochrome" }),
-            Row({ opt: b.taskbar.exclusive, title: "Exclusive to workspaces" }),
-        ),
-        Group("Date",
-            Row({ opt: b.date.format, title: "Date Format" }),
-        ),
-        Group("Media",
-            Row({ opt: b.media.monochrome, title: "Monochrome" }),
-            Row({ opt: b.media.preferred, title: "Preferred Player" }),
-            Row({ opt: b.media.direction, title: "Slide Direction", type: "enum", enums: ["left", "right"] }),
-            Row({ opt: b.media.format, title: "Format of the Label" }),
-            Row({ opt: b.media.length, title: "Max Length of Label" }),
-        ),
-        Group("Battery",
-            Row({ opt: b.battery.bar, title: "Style", type: "enum", enums: ["hidden", "regular", "whole"] }),
-            Row({ opt: b.battery.blocks, title: "Number of Blocks" }),
-            Row({ opt: b.battery.width, title: "Width of Bar" }),
-            Row({ opt: b.battery.charging, title: "Charging Color", type: "color" }),
-        ),
-        Group("Powermenu",
-            Row({ opt: b.powermenu.monochrome, title: "Monochrome" }),
-        ),
+    Group("Dark Colors",
+      Row({ opt: dark.bg, title: "Background", type: "color" }),
+      Row({ opt: dark.fg, title: "Foreground", type: "color" }),
+      Row({ opt: dark.primary.bg, title: "Primary", type: "color" }),
+      Row({ opt: dark.primary.fg, title: "On Primary", type: "color" }),
+      Row({ opt: dark.error.bg, title: "Error", type: "color" }),
+      Row({ opt: dark.error.fg, title: "On Error", type: "color" }),
+      Row({ opt: dark.widget, title: "Widget", type: "color" }),
+      Row({ opt: dark.border, title: "Border", type: "color" }),
     ),
-    Page("General", icons.ui.settings,
-        Group("Hyprland",
-            Row({ opt: h.gapsWhenOnly, title: "Gaps When Only" }),
-        ),
-        Group("Launcher",
-            Row({ opt: l.width, title: "Width" }),
-            Row({ opt: l.apps.iconSize, title: "Icon Size" }),
-            Row({ opt: l.apps.max, title: "Max Items" }),
-        ),
-        Group("Overview",
-            Row({ opt: ov.scale, title: "Scale", max: 100 }),
-            Row({ opt: ov.workspaces, title: "Workspaces", max: 11, note: "set this to 0 to make it dynamic" }),
-            Row({ opt: ov.monochromeIcon, title: "Monochrome Icons" }),
-        ),
-        Group("Powermenu",
-            Row({ opt: pm.layout, title: "Layout", type: "enum", enums: ["box", "line"] }),
-            Row({ opt: pm.labels, title: "Show Labels" }),
-        ),
-        Group("Quicksettings",
-            Row({ opt: qs.avatar.image, title: "Avatar", type: "img" }),
-            Row({ opt: qs.avatar.size, title: "Avatar Size" }),
-            Row({ opt: qs.media.monochromeIcon, title: "Media Monochrome Icons" }),
-            Row({ opt: qs.media.coverSize, title: "Media Cover Art Size" }),
-        ),
-        Group("On Screen Indicator",
-            Row({ opt: osd.progress.vertical, title: "Vertical" }),
-            Row({ opt: osd.progress.pack.h, title: "Horizontal Alignment", type: "enum", enums: ["start", "center", "end"] }),
-            Row({ opt: osd.progress.pack.v, title: "Vertical Alignment", type: "enum", enums: ["start", "center", "end"] }),
-        ),
+    Group("Light Colors",
+      Row({ opt: light.bg, title: "Background", type: "color" }),
+      Row({ opt: light.fg, title: "Foreground", type: "color" }),
+      Row({ opt: light.primary.bg, title: "Primary", type: "color" }),
+      Row({ opt: light.primary.fg, title: "On Primary", type: "color" }),
+      Row({ opt: light.error.bg, title: "Error", type: "color" }),
+      Row({ opt: light.error.fg, title: "On Error", type: "color" }),
+      Row({ opt: light.widget, title: "Widget", type: "color" }),
+      Row({ opt: light.border, title: "Border", type: "color" }),
     ),
+    Group("Theme",
+      Row({ opt: shadows, title: "Shadows" }),
+      Row({ opt: widget.opacity, title: "Widget Opacity", max: 100 }),
+      Row({ opt: border.opacity, title: "Border Opacity", max: 100 }),
+      Row({ opt: border.width, title: "Border Width" }),
+      Row({ opt: blur, title: "Blur", note: "0 to disable", max: 70 }),
+    ),
+    Group("UI",
+      Row({ opt: padding, title: "Padding" }),
+      Row({ opt: spacing, title: "Spacing" }),
+      Row({ opt: radius, title: "Roundness" }),
+      Row({ opt: font.size, title: "Font Size" }),
+      Row({ opt: font.name, title: "Font Name", type: "font" }),
+    ),
+  ),
+  Page("Bar", icons.ui.toolbars,
+    Group("General",
+      Row({ opt: b.flatButtons, title: "Flat Buttons" }),
+      Row({ opt: b.position, title: "Position", type: "enum", enums: ["top", "bottom"] }),
+      Row({ opt: b.corners, title: "Corners" }),
+    ),
+    Group("Launcher",
+      Row({ opt: b.launcher.icon.icon, title: "Icon" }),
+      Row({ opt: b.launcher.icon.colored, title: "Colored Icon" }),
+      Row({ opt: b.launcher.label.label, title: "Label" }),
+      Row({ opt: b.launcher.label.colored, title: "Colored Label" }),
+    ),
+    Group("Workspaces",
+      Row({ opt: b.workspaces.workspaces, title: "Number of Workspaces", note: "0 to make it dynamic" }),
+    ),
+    Group("Taskbar",
+      Row({ opt: b.taskbar.iconSize, title: "Icon Size" }),
+      Row({ opt: b.taskbar.monochrome, title: "Monochrome" }),
+      Row({ opt: b.taskbar.exclusive, title: "Exclusive to workspaces" }),
+    ),
+    Group("Date",
+      Row({ opt: b.date.format, title: "Date Format" }),
+    ),
+    Group("Media",
+      Row({ opt: b.media.monochrome, title: "Monochrome" }),
+      Row({ opt: b.media.preferred, title: "Preferred Player" }),
+      Row({ opt: b.media.direction, title: "Slide Direction", type: "enum", enums: ["left", "right"] }),
+      Row({ opt: b.media.format, title: "Format of the Label" }),
+      Row({ opt: b.media.length, title: "Max Length of Label" }),
+    ),
+    Group("Battery",
+      Row({ opt: b.battery.bar, title: "Style", type: "enum", enums: ["hidden", "regular", "whole"] }),
+      Row({ opt: b.battery.blocks, title: "Number of Blocks" }),
+      Row({ opt: b.battery.width, title: "Width of Bar" }),
+      Row({ opt: b.battery.charging, title: "Charging Color", type: "color" }),
+    ),
+    Group("Powermenu",
+      Row({ opt: b.powermenu.monochrome, title: "Monochrome" }),
+    ),
+  ),
+  Page("General", icons.ui.settings,
+    Group("Hyprland",
+      Row({ opt: h.gapsIn, title: "Gaps Inside" }),
+      Row({ opt: h.gapsOut, title: "Gaps Outside" }),
+      Row({ opt: h.borderSize, title: "Border Size" }),
+      Row({ opt: h.gapsWhenOnly, title: "Gaps When Only" }),
+    ),
+    Group("Launcher",
+      Row({ opt: l.width, title: "Width" }),
+      Row({ opt: l.apps.iconSize, title: "Icon Size" }),
+      Row({ opt: l.apps.max, title: "Max Items" }),
+    ),
+    Group("Overview",
+      Row({ opt: ov.scale, title: "Scale", max: 100 }),
+      Row({ opt: ov.workspaces, title: "Workspaces", max: 11, note: "set this to 0 to make it dynamic" }),
+      Row({ opt: ov.monochromeIcon, title: "Monochrome Icons" }),
+    ),
+    Group("Powermenu",
+      Row({ opt: pm.layout, title: "Layout", type: "enum", enums: ["box", "line"] }),
+      Row({ opt: pm.labels, title: "Show Labels" }),
+    ),
+    Group("Quicksettings",
+      Row({ opt: qs.avatar.image, title: "Avatar", type: "img" }),
+      Row({ opt: qs.avatar.size, title: "Avatar Size" }),
+      Row({ opt: qs.media.monochromeIcon, title: "Media Monochrome Icons" }),
+      Row({ opt: qs.media.coverSize, title: "Media Cover Art Size" }),
+    ),
+    Group("On Screen Indicator",
+      Row({ opt: osd.progress.vertical, title: "Vertical" }),
+      Row({ opt: osd.progress.pack.h, title: "Horizontal Alignment", type: "enum", enums: ["start", "center", "end"] }),
+      Row({ opt: osd.progress.pack.v, title: "Vertical Alignment", type: "enum", enums: ["start", "center", "end"] }),
+    ),
+  ),
 ] as const