diff --git a/home/ags/files/config.js b/home/ags/files/config.js
index 943125c..d2341ae 100644
--- a/home/ags/files/config.js
+++ b/home/ags/files/config.js
@@ -1,5 +1,159 @@
-App.config({
-    windows: [
-        // this is where window definitions will go
-    ]
+const hyprland = await Service.import("hyprland")
+const notifications = await Service.import("notifications")
+const mpris = await Service.import("mpris")
+const audio = await Service.import("audio")
+const battery = await Service.import("battery")
+const systemtray = await Service.import("systemtray")
+
+const date = Variable("", {
+  poll: [1000, 'date "+%H:%M:%S %b %e."'],
 })
+
+function Clients() {
+  const activeId = hyprland.active.client.bind("address")
+  const clients = hyprland.bind("clients")
+  .as(cl => {
+    return cl.filter(c => c.workspace.id === hyprland.active.workspace.id).map(({ address, title }) => Widget.Button({
+      child: Widget.Label(`${title}`),
+      class_name: activeId.as(i => `${i === address ? "focused" : ""}`),
+    }))
+  })
+
+  return Widget.Box({
+    class_name: "clients",
+    children: clients,
+  })
+}
+
+function Workspaces() {
+  const activeId = hyprland.active.workspace.bind("id")
+  const workspaces = hyprland.bind("workspaces")
+  .as(ws => {
+    ws.sort((a, b) => a.id - b.id)
+    return ws.map(({ id }) => Widget.Button({
+      on_clicked: () => hyprland.messageAsync(`dispatch workspace ${id}`),
+      child: Widget.Label(`${id}`),
+      class_name: activeId.as(i => `${i === id ? "focused" : ""}`),
+    }))
+  })
+
+  return Widget.Box({
+    class_name: "workspaces",
+    children: workspaces,
+  })
+}
+
+
+// function ClientTitle() {
+//   return Widget.Label({
+//     class_name: "client-title",
+//     label: hyprland.active.client.bind("title"),
+//   })
+// }
+
+
+function Clock() {
+  return Widget.Label({
+    class_name: "clock",
+    label: date.bind(),
+  })
+}
+
+
+// we don't need dunst or any other notification daemon
+// because the Notifications module is a notification daemon itself
+function Notification() {
+  const popups = notifications.bind("popups")
+  return Widget.Box({
+    class_name: "notification",
+    visible: popups.as(p => p.length > 0),
+    children: [
+      Widget.Icon({
+        icon: "preferences-system-notifications-symbolic",
+      }),
+      Widget.Label({
+        label: popups.as(p => p[0]?.summary || ""),
+      }),
+    ],
+  })
+}
+
+function SysTray() {
+  const items = systemtray.bind("items")
+  .as(items => items.map(item => Widget.Button({
+    child: Widget.Icon({
+      icon: item.bind("icon"),
+      css: "margin-left: 0.6em;margin-right: 0.6em;"
+    }),
+    on_primary_click: (_, event) => item.activate(event),
+    on_secondary_click: (_, event) => item.openMenu(event),
+    tooltip_markup: item.bind("tooltip_markup"),
+    css: "margin-left: 0.4em;",
+  })))
+
+  return Widget.Box({
+    children: items,
+  })
+}
+
+
+// layout of the bar
+function Left() {
+  return Widget.Box({
+    spacing: 8,
+    children: [
+      Clients(),
+      // ClientTitle(),
+    ],
+  })
+}
+
+function Center() {
+  return Widget.Box({
+    spacing: 8,
+    children: [
+      Workspaces(),
+      Notification(),
+    ],
+  })
+}
+
+function Right() {
+  return Widget.Box({
+    hpack: "end",
+    spacing: 8,
+    children: [
+      SysTray(),
+      Clock(),
+    ],
+  })
+}
+
+function Bar(monitor = 0) {
+  return Widget.Window({
+    name: `bar-${monitor}`, // name has to be unique
+    class_name: "bar",
+    monitor,
+    anchor: ["top", "left", "right"],
+    exclusivity: "exclusive",
+    child: Widget.CenterBox({
+      css: "margin-bottom: 0.2em;",
+      start_widget: Left(),
+      center_widget: Center(),
+      end_widget: Right(),
+    }),
+  })
+}
+
+App.config({
+  style: "./style.css",
+  windows: [
+    Bar(),
+
+    // you can call it, for each monitor
+    // Bar(0),
+    // Bar(1)
+  ],
+})
+
+export { }
diff --git a/home/ags/files/style.css b/home/ags/files/style.css
new file mode 100644
index 0000000..06c1c73
--- /dev/null
+++ b/home/ags/files/style.css
@@ -0,0 +1,36 @@
+window.bar {
+    background-color: rgba(0, 0, 0, 0.2);
+}
+
+label {
+    font-weight: bold;
+}
+
+.client-title, .clock {
+    background: #1f2430;
+    border-radius: 0.3em;
+    padding-left: 0.7em;
+    padding-right: 0.7em;
+}
+
+button {
+    background: #1f2430;
+    border:none;
+    padding: 0.2em;
+    border-radius: 0.3em;
+}
+
+button.focused, button:hover {
+    background: #023269;
+}
+
+.workspaces button {
+    padding-left: 0.4em;
+    padding-right: 0.4em;
+    margin-left: 0.2em;
+    margin-right: 0.2em;
+}
+
+.notification {
+    color: yellow;
+}