diff --git a/home/ags/config/.gitignore b/home/ags/config/.gitignore
new file mode 100644
index 0000000..ded35cd
--- /dev/null
+++ b/home/ags/config/.gitignore
@@ -0,0 +1,2 @@
+style.css
+style.css.map
\ No newline at end of file
diff --git a/home/ags/config/config.js b/home/ags/config/config.js
index 2ffc4b0..98002c5 100644
--- a/home/ags/config/config.js
+++ b/home/ags/config/config.js
@@ -1,13 +1,24 @@
-import Widget from 'resource:///com/github/Aylur/ags/widget.js';
+import { App, Utils } from './import.js';
+import { Bar } from './js/main.js'
 
-const myLabel = Widget.Label({
-    label: 'some example content',
-})
 
-const myBar = Widget.Window({
-    name: 'bar',
-    anchor: ['top', 'left', 'right'],
-    child: myLabel,
-})
+const scss = App.configDir + '/main.scss'
+const css = App.configDir + '/style.css'
 
-export default { windows: [myBar] }
+Utils.exec(`sass ${scss} ${css}`);
+
+function reloadCss() {
+    console.log("scss updating");
+    Utils.exec(`sass ${scss} ${css}`);
+    App.resetCss();
+    App.applyCss(css);
+}
+
+Utils.monitorFile(`${App.configDir}/scss`, reloadCss, "directory");
+
+export default {
+    style: css,
+    windows: [
+        Bar(2)
+    ]
+}
diff --git a/home/ags/config/import.js b/home/ags/config/import.js
new file mode 100644
index 0000000..aa7ddb2
--- /dev/null
+++ b/home/ags/config/import.js
@@ -0,0 +1,21 @@
+import App from "resource:///com/github/Aylur/ags/app.js";
+import * as Utils from "resource:///com/github/Aylur/ags/utils.js";
+import Service from "resource:///com/github/Aylur/ags/service.js";
+import Variable from "resource:///com/github/Aylur/ags/variable.js";
+import Widget from "resource:///com/github/Aylur/ags/widget.js";
+import Audio from "resource:///com/github/Aylur/ags/service/audio.js";
+import Hyprland from "resource:///com/github/Aylur/ags/service/hyprland.js";
+import Network from "resource:///com/github/Aylur/ags/service/network.js";
+import SystemTray from "resource:///com/github/Aylur/ags/service/systemtray.js";
+
+export {
+  App,
+  Audio,
+  Hyprland,
+  Network,
+  Service,
+  SystemTray,
+  Utils,
+  Variable,
+  Widget,
+};
\ No newline at end of file
diff --git a/home/ags/config/js/main.js b/home/ags/config/js/main.js
new file mode 100644
index 0000000..074f2a9
--- /dev/null
+++ b/home/ags/config/js/main.js
@@ -0,0 +1,32 @@
+import { Widget } from '../import.js';
+import { Time } from './widgets/time.js'
+
+const Start = () => Widget.Box({
+    hpack: "start",
+    children: []
+})
+const Center = () => Widget.Box({
+    children: []
+})
+const End = () => Widget.Box({
+    hpack: "end",
+    children: [
+        Time()
+    ]
+})
+
+const Bar = (monitor) => Widget.Window({
+    monitor,
+    name: `bar-${monitor}`,
+    anchor: ['top', 'left', 'right'],
+    exclusivity: 'exclusive',
+    child: Widget.CenterBox({
+        startWidget: Start(),
+        centerWidget: Center(),
+        endWidget: End(),
+    }),
+})
+
+export {
+    Bar
+}
\ No newline at end of file
diff --git a/home/ags/config/js/temp.js b/home/ags/config/js/temp.js
deleted file mode 100644
index e69de29..0000000
diff --git a/home/ags/config/js/widgets/time.js b/home/ags/config/js/widgets/time.js
new file mode 100644
index 0000000..91b3741
--- /dev/null
+++ b/home/ags/config/js/widgets/time.js
@@ -0,0 +1,18 @@
+import { Widget, Utils } from '../../import.js';
+
+
+const Time = () => Widget.EventBox({
+    child: Widget.Label({
+        className: "date"
+    }).poll(
+        1000,
+        (self) =>
+            Utils.execAsync(["date", "+%a %b %d  %H:%M"]).then((time) =>
+                self.label = time
+            ),
+    ),
+})
+
+export {
+    Time
+}
\ No newline at end of file
diff --git a/home/ags/config/main.scss b/home/ags/config/main.scss
new file mode 100644
index 0000000..e2cd945
--- /dev/null
+++ b/home/ags/config/main.scss
@@ -0,0 +1,2 @@
+@import 'scss/bar.scss';
+@import 'scss/time.scss';
\ No newline at end of file
diff --git a/home/ags/config/scss/bar.scss b/home/ags/config/scss/bar.scss
new file mode 100644
index 0000000..78616b6
--- /dev/null
+++ b/home/ags/config/scss/bar.scss
@@ -0,0 +1,9 @@
+* {
+    all: unset;
+    margin: 3px;
+    font-family: 'Monaspace Krypton';
+}
+
+window {
+    background-color: black;
+}
\ No newline at end of file
diff --git a/home/ags/config/scss/style.scss b/home/ags/config/scss/style.scss
deleted file mode 100644
index e69de29..0000000
diff --git a/home/ags/config/scss/time.scss b/home/ags/config/scss/time.scss
new file mode 100644
index 0000000..0593439
--- /dev/null
+++ b/home/ags/config/scss/time.scss
@@ -0,0 +1,3 @@
+.date {
+    color: #ffffff;
+}
\ No newline at end of file
diff --git a/home/ags/default.nix b/home/ags/default.nix
index 2311d51..05a4dc7 100644
--- a/home/ags/default.nix
+++ b/home/ags/default.nix
@@ -1,6 +1,16 @@
-_: {
+{
+  pkgs,
+  config,
+  ...
+}: let
+  configDir = "/home/notoh/snowflake/home/ags/config";
+in {
   programs.ags = {
     enable = true;
-    configDir = ./config;
+    extraPackages = with pkgs; [libsoup_3];
+  };
+  home.packages = with pkgs; [dart-sass];
+  xdg.configFile = {
+    "ags".source = config.lib.file.mkOutOfStoreSymlink "${configDir}";
   };
 }