diff --git a/flake.nix b/flake.nix
index 0c74b03..10cb05d 100644
--- a/flake.nix
+++ b/flake.nix
@@ -31,38 +31,56 @@
         src = ./.;
         name = "my-shell";
         entry = "app.ts";
+
+        # additional libraries and executables to add to gjs' runtime
+        extraPackages = [
+          # ags.packages.${system}.battery
+          # pkgs.fzf
+        ];
       };
     };
 
     devShells.${system} = {
       default = pkgs.mkShell {
         buildInputs = with pkgs; [
+          nodejs_23
+          gobject-introspection
+          json-glib
+          gjs
           # includes astal3 astal4 astal-io by default
           (ags.packages.${system}.default.override {
             extraPackages = builtins.attrValues {
               inherit
                 (astal.packages.${system})
-                io
-                astal4
-                battery
-                wireplumber
-                network
-                mpris
-                powerprofiles
-                tray
-                bluetooth
                 hyprland
+                tray
+                network
+                battery
                 ;
             };
           })
 
-          nodejs_23
-          meson
-          ninja
-          pkg-config
+          wrapGAppsHook
           gobject-introspection
-          wrapGAppsHook4
+          meson
+          pkg-config
+          ninja
+          vala
+          gtk3
+          gtk4
+          gtk-layer-shell
+          gtk4-layer-shell
+          json-glib
+          pam
+          gvfs
+          networkmanager
+          gdk-pixbuf
+          wireplumber
+          libdbusmenu-gtk3
+          wayland
           blueprint-compiler
+          libadwaita
+          wayland-scanner
           dart-sass
           esbuild
           gjs
diff --git a/nodemon.json b/nodemon.json
index a38bafe..060c9f5 100644
--- a/nodemon.json
+++ b/nodemon.json
@@ -1,5 +1,5 @@
 {
-  "watch": ["app.ts", "style.scss", "widget/"],
-  "ext": "ts, tsx, scss, css",
+  "watch": ["app.ts", "widget/"],
+  "ext": "ts, tsx",
   "exec": "ags run --gtk4 ."
 }
diff --git a/style.scss b/style.scss
index ec93789..4db19a6 100644
--- a/style.scss
+++ b/style.scss
@@ -1,97 +1,43 @@
 // https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
-// Colors:
-
-$fg-color: white;
-$active-color: #bdae93;
-$hover-color: #b8bb26;
-
+$fg-color: #{"@theme_fg_color"};
 $bg-color: #{"@theme_bg_color"};
-$corner-size: 7;
-
-* {
-  font-size: 18px;
-}
 
 window.Bar {
   background: transparent;
-  /* background: #fbf1c7; */
-  padding: 2px;
-  margin: 5px;
-  border-radius: 40px;
-  padding-left: 10px;
-
-
   color: $fg-color;
+  font-weight: bold;
+  font-size: 25px;
 
   >centerbox {
     background: $bg-color;
     border-radius: 10px;
+    margin: 8px;
   }
 
-
-  .AudioSlider {
-    min-width: 200px;
-  }
-
-}
-
-.Systray {
-  color: $fg-color;
-}
-
-.Workspaces {
-  $workspace-button-size: 8px;
-  $bar-button-border-radius: 25px;
-
-  margin: 0 60px 4px 60px;
-  margin: 0;
-
-  border: 2px solid black;
-  padding: 3px;
-  border-radius: 40px;
-  transition: all 1 linear;
-  transition-delay: 1s;
-
   button {
-    all: unset;
-    color: $fg-color;
-    transition: min-width 0.25s ease-out;
-    margin: 1em;
-    padding: $workspace-button-size;
-    margin: $workspace-button-size;
-    background-color: black;
-    border-radius: calc(nth($bar-button-border-radius, 1) * 1.5);
-    /* Hide non-occupied workspaces */
-    min-height: 0;
-    min-width: 0;
-    margin: 0;
-    opacity: 0;
-    padding: 0;
-    transition: 0;
+    border-radius: 8px;
+    margin: 2px;
+  }
 
-    &:hover {
-      color: $fg-color;
-      background-color: $fg-color;
+  .Workspaces {
+    button {
+      all: unset;
+      background-color: transparent;
+      margin: 2px;
+      padding: 2px;
+
+      &:hover label {
+        background-color: red;
+        border-color: $bg-color;
+      }
+
+      &:active label {
+        background-color: $fg-color;
+      }
+
+      .focused {
+        color: red;
+      }
     }
-
-    &.active,
-    &.occupied {
-
-      opacity: 1;
-      margin: 1rem;
-      padding: $workspace-button-size;
-      margin: $workspace-button-size;
-    }
-
-    &.active {
-      min-width: 2.5rem !important;
-      min-height: 0.95rem !important;
-    }
-
-    &.occupied {
-      min-height: 0.65em;
-      min-width: 0.65rem;
-    }
-
   }
 }
\ No newline at end of file
diff --git a/widget/Bar.tsx b/widget/Bar.tsx
index c2be237..0082bc0 100644
--- a/widget/Bar.tsx
+++ b/widget/Bar.tsx
@@ -1,10 +1,85 @@
-import { App, Astal, Gtk, Gdk, } from "astal/gtk4"
-import Workspaces from "./workspaces"
-import Systray from "./systray"
-import Battery from "./battery"
-import Time from "./time"
+import { App, Astal, Gtk, Gdk, Widget, astalify } from "astal/gtk4"
+import { GLib, Variable } from "astal"
+import Hyprland from "gi://AstalHyprland"
+import Tray from "gi://AstalTray"
+import Battery from "gi://AstalBattery"
+import Network from "gi://AstalNetwork"
+import AstalTray from "gi://AstalTray?version=0.1"
 
 
+type Workspace = {
+  id: number
+  focus: () => void
+}
+
+type Hyprland = {
+  workspaces: Workspace[]
+  focusedWorkspace: Workspace | null
+}
+
+function Bat() {
+  const bat = Battery.get_default()
+
+  return <box cssClasses={["Battery"]}>
+    Battery: {bat.get_percentage() * 100}%
+  </box>
+
+}
+
+function Net() {
+  const network = Network.get_default()
+
+  return <box cssClasses={["Network"]} >
+    {network.wifi.enabled}
+  </box>
+}
+
+function Workspaces() {
+  const hypr = Hyprland.get_default()
+
+  return <box cssClasses={["Workspaces"]} >
+    {
+      hypr.workspaces.filter(ws => !(ws.id >= -99 && ws.id < -2))
+        .sort((a, b) => a.id - b.id)
+        .map(ws => (
+          <button
+            cssClasses={
+              ws === hypr.focusedWorkspace ? ["focused"] : []}
+            onClicked={() => ws.focus()}>
+            {ws.id}
+          </button>
+        ))
+    }
+  </box >
+}
+
+function SysTray() {
+  const tray = AstalTray.get_default()
+
+  print(tray.get_items.length)
+
+  return <box
+    cssClasses={["SysTray"]}
+  >
+    {tray.get_items().map(item => (
+      <menubutton
+        tooltipMarkup={item.tooltipMarkup}
+        menuModel={item.menuModel}
+      >
+        <image gicon={item.get_gicon()} />
+      </menubutton>
+    ))}
+  </box>
+}
+
+function Time({ }) {
+  const time = Variable<string>("").poll(1000, () => GLib.DateTime.new_now_local().format("%H:%M")!)
+
+  return <label
+    cssName="Time"
+    onDestroy={() => time.drop()}
+    label={time()} />
+}
 export default function Bar(gdkmonitor: Gdk.Monitor) {
   const { TOP, LEFT, RIGHT } = Astal.WindowAnchor
 
@@ -17,14 +92,15 @@ export default function Bar(gdkmonitor: Gdk.Monitor) {
     application={App}>
     <centerbox>
       <box hexpand halign={Gtk.Align.START}>
-        <Battery />
+        <Bat />
+        <SysTray />
       </box>
       <box hexpand halign={Gtk.Align.CENTER}>
         <Workspaces />
       </box>
       <box hexpand halign={Gtk.Align.END}>
+        <Net />
         <Time />
-        <Systray />
       </box>
 
     </centerbox>
diff --git a/widget/battery.tsx b/widget/battery.tsx
deleted file mode 100644
index 57b23aa..0000000
--- a/widget/battery.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import { bind } from "astal"
-import Battery from "gi://AstalBattery"
-
-export default function BatteryLevel() {
-  const bat = Battery.get_default()
-
-  return <box
-    cssClasses={["Battery"]}
-    visible={bind(bat, "isPresent")}>
-    <image iconName={bind(bat, "batteryIconName")} />
-    <label label={bind(bat, "percentage").as(p => `${Math.floor(p * 100)}%`)} />
-  </box>
-
-}
diff --git a/widget/systray.tsx b/widget/systray.tsx
deleted file mode 100644
index 8c0b94b..0000000
--- a/widget/systray.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { bind } from "astal"
-import AstalTray from "gi://AstalTray?version=0.1"
-
-export default function Systray() {
-  const tray = AstalTray.get_default()
-
-  return <box cssClasses={["Systray"]} >
-    {
-      bind(tray, "items").as(items => items.map(item => (
-        <menubutton
-          tooltipMarkup={bind(item, "tooltipMarkup")}
-          menuModel={bind(item, "menuModel")}
-          setup={(self) => {
-            self.insert_action_group("dbusmenu", item.actionGroup)
-          }}
-        >
-          <image gicon={bind(item, "gicon")} />
-        </menubutton>
-      )))
-    }
-  </box >
-}
diff --git a/widget/time.tsx b/widget/time.tsx
deleted file mode 100644
index f1bbe15..0000000
--- a/widget/time.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { GLib, Variable, } from "astal"
-import { App, Gtk, Gdk } from "astal/gtk4";
-
-export default function Time({ }) {
-  const time = Variable<string>("").poll(1000, () => GLib.DateTime.new_now_local().format("%H:%M")!)
-
-
-  return <label
-    cssName="Time"
-    onDestroy={() => time.drop()}
-    label={time()}
-  />
-
-}
-
diff --git a/widget/workspaces.tsx b/widget/workspaces.tsx
deleted file mode 100644
index 72785f3..0000000
--- a/widget/workspaces.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import Hyprland from "gi://AstalHyprland"
-import { bind, Variable } from "astal"
-import { Gtk } from "astal/gtk4"
-
-function WorkspaceButton(ws: Hyprland.Workspace) {
-  const hypr = Hyprland.get_default()
-
-  const classNames = Variable.derive(
-    [bind(hypr, "focusedWorkspace"), bind(hypr, "clients")],
-    (fws, _) => {
-      const classes = []
-
-      const active = fws.id == ws.id
-
-      active && classes.push("active")
-
-      const occupied = hypr.get_workspace(ws.id)?.get_clients()?.length > 0;
-      occupied && classes.push("occupied");
-      return classes;
-    })
-
-  const classes = classNames()
-
-  return (
-
-    <button
-      cssClasses={classes}
-      onDestroy={() => classNames.drop()}
-      // visible={classes.as(cn => cn.includes("occupied") || cn.includes("active"))}
-      valign={Gtk.Align.CENTER}
-      halign={Gtk.Align.CENTER}
-      onClicked={() => ws.focus()}>
-    </button>
-  )
-
-}
-
-export default function Workspaces() {
-  const hypr = Hyprland.get_default()
-
-  return <box cssClasses={["Workspaces"]}>
-    {bind(hypr, "workspaces").as((workspaces) =>
-      workspaces
-        .filter(ws => !(ws.id >= -99 && ws.id < -2))
-        .sort((a, b) => a.id - b.id)
-        .map((ws) => (
-          WorkspaceButton(ws)
-        )),
-    )}
-  </box >
-
-}
-
-