diff --git a/.tool-versions b/.tool-versions
index f76b8a3..f1196e8 100644
--- a/.tool-versions
+++ b/.tool-versions
@@ -1 +1 @@
-bun 1.2.8
+bun latest
diff --git a/components/Svg.tsx b/components/Svg.tsx
new file mode 100644
index 0000000..cd5796f
--- /dev/null
+++ b/components/Svg.tsx
@@ -0,0 +1,8 @@
+interface SvgProps {
+	color?: string;
+	rotation?: number;
+}
+
+export function Svg({ color, rotation }: SvgProps) {
+	const svgPath = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" ${rotation && 'transform="rotate(180 12 12)"'} fill="none" stroke="${color || "#cac9c9"}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>`;
+}
diff --git a/style.scss b/style.scss
index 07bd278..95df98d 100644
--- a/style.scss
+++ b/style.scss
@@ -1,15 +1,16 @@
-$crust: #181926;
-$mantle: #1e2030;
-$base: #24273a;
+$primary: #1fb854;
+$secondary: #1eb88e;
+$accent: #1fb8ab;
+$neutral: #19362d;
+$base100: #1b1717;
+$base200: #161212;
+$base300: #110d0d;
+$basecontent: #cac9c9;
 
-$surface0: #363a4f;
-$surface1: #494d64;
-$surface2: #5b6078;
-
-$rosewater: #f4dbd6;
-$flamingo: #dd7878;
-$pink: #ea76cb;
-$mauve: #8839ef;
+$info: #00b5ff;
+$success: #00a96e;
+$warning: #ffbe00;
+$error: #ff5861;
 
 :root {
   font-family: JetBrainsMono Nerd Font;
@@ -22,14 +23,16 @@ button {
 
   label {
     transition:
-      border 0.5s,
-      background 0.5s;
-    background: $mantle;
+      border 0.35s,
+      background 0.35s,
+      color 0.35s;
+    background: $base100;
   }
 
   label:hover {
-    background: $crust;
-    border: 3px solid $rosewater;
+    background: $primary;
+    color: $base300;
+    // border: 3px solid $primary;
   }
 }
 
@@ -37,10 +40,10 @@ label {
   all: initial;
 
   font-family: inherit;
-  color: $rosewater;
-  padding: 2px 12px;
-  background: $crust;
-  border: 3px solid $crust;
+  font-size: 14px;
+  color: $basecontent;
+  padding: 0 12px;
+  // background: $base200;
   border-radius: 8px;
 }
 
@@ -49,53 +52,48 @@ popover > contents {
 
   padding: 4px 12px;
   border-radius: 8px;
-  border: 4px solid $crust;
-  background: rgba($color: $base, $alpha: 0.75);
+  border: 4px solid $base200;
+  background: rgba($color: $base100, $alpha: 0.98);
 }
 
 .no-styles {
   all: initial;
 
-  color: $rosewater;
+  color: $primary;
 }
 
 .active {
   label {
-    background: $crust;
+    background: $secondary;
+    color: $base300;
   }
 }
 
 .Arch {
-  -gtk-icon-size: 24px;
-  padding: 4px 8px;
-  border-radius: 8px;
-  border: 3px solid $crust;
-  background: $mantle;
-  transition:
-    border 0.5s,
-    background 0.5s;
-
-  &:hover {
-    background: $crust;
-    border: 3px solid $rosewater;
-  }
+  -gtk-icon-size: 22px;
+  padding: 0 6px;
 }
 
 .Pywal {
   label {
-    font-size: 18px;
-    padding: 6px 16px 6px 10px;
+    font-size: 16px;
+    padding: 4px 16px 4px 10px;
   }
 }
 
 .SwayNC {
   label {
+    font-size: 16px;
     padding: 0 12px;
   }
 }
 
 .Tray {
   margin: 0 4px;
+
+  arrow {
+    all: initial;
+  }
 }
 
 .Tray > * {
@@ -107,12 +105,11 @@ popover > contents {
 }
 
 .Workspaces {
-  background: $mantle;
-  border-radius: 8px;
-  border: 4px solid $crust;
+  // background: $base300;
+  // border-radius: 8px;
 
   > * {
-    margin: 2px;
+    margin: 0 2px;
   }
 }
 
@@ -132,14 +129,14 @@ popover > contents {
       margin: 4px;
       padding: 4px;
       border-radius: 8px;
-      background: $crust;
+      background: $base200;
       transition:
         border 0.5s,
         background 0.5s;
 
       &:hover {
-        color: $crust;
-        background: $rosewater;
+        color: $base300;
+        background: $primary;
       }
     }
 
@@ -148,15 +145,15 @@ popover > contents {
     }
 
     .today {
-      border: 3px solid $rosewater;
+      border: 3px solid $primary;
     }
 
     .other-month {
-      color: $surface0;
+      color: $accent;
       transition: border 0.5s;
 
       &:hover {
-        border: 3px solid $rosewater;
+        border: 3px solid $secondary;
       }
     }
   }
@@ -168,15 +165,19 @@ popover > contents {
 
 window.Bar {
   background: transparent;
+  padding: 4px;
 
   > centerbox {
-    background: rgba($color: $base, $alpha: 0.75);
-    border-bottom: 4px solid $crust;
+    border-radius: 8px;
+
+    background-color: $base300;
+    // background: rgba($color: $base300, $alpha: 0.75);
+    // border-bottom: 4px solid $base200;
 
     > box {
-      margin: 6px;
+      margin: 5px 2px;
       & > * {
-        margin: 0 4px;
+        margin: 0 3px;
       }
     }
   }
diff --git a/widget/Bar.tsx b/widget/Bar.tsx
index be9a691..7122fb6 100644
--- a/widget/Bar.tsx
+++ b/widget/Bar.tsx
@@ -13,37 +13,37 @@ import Tray from "./Tray";
 import WirePlumber from "./WirePlumber";
 
 export default function Bar(gdkmonitor: Gdk.Monitor) {
-  const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
+	const { TOP, LEFT, RIGHT } = Astal.WindowAnchor;
 
-  return (
-    <window
-      visible
-      cssClasses={["Bar"]}
-      gdkmonitor={gdkmonitor}
-      exclusivity={Astal.Exclusivity.EXCLUSIVE}
-      anchor={TOP | LEFT | RIGHT}
-      application={App}
-    >
-      <centerbox cssName="centerbox">
-        <box halign={Gtk.Align.START}>
-          <OS />
-          <Workspaces />
-          <Tray />
-          <Hyprland.Client />
-        </box>
-        <box halign={Gtk.Align.CENTER}>
-          <Mpris />
-        </box>
-        <box halign={Gtk.Align.END}>
-          <Pywal />
-          <WirePlumber />
-          <Internet />
-          <Bluetooth />
-          <Memory />
-          <Calendar />
-          <SwayNC />
-        </box>
-      </centerbox>
-    </window>
-  );
+	return (
+		<window
+			visible
+			cssClasses={["Bar"]}
+			gdkmonitor={gdkmonitor}
+			exclusivity={Astal.Exclusivity.EXCLUSIVE}
+			anchor={TOP | LEFT | RIGHT}
+			application={App}
+		>
+			<centerbox cssName="centerbox">
+				<box halign={Gtk.Align.START}>
+					<OS />
+					<Workspaces />
+					<Tray />
+					<Hyprland.Client />
+				</box>
+				<box halign={Gtk.Align.CENTER}>
+					<Mpris />
+				</box>
+				<box halign={Gtk.Align.END}>
+					<Pywal />
+					<WirePlumber />
+					<Bluetooth />
+					<Internet />
+					<Memory />
+					<Calendar />
+					<SwayNC />
+				</box>
+			</centerbox>
+		</window>
+	);
 }
diff --git a/widget/Bluetooth.tsx b/widget/Bluetooth.tsx
index 2a0540f..c865c5f 100644
--- a/widget/Bluetooth.tsx
+++ b/widget/Bluetooth.tsx
@@ -3,46 +3,47 @@ import { bind, derive } from "astal";
 import AstalBluetooth from "gi://AstalBluetooth";
 
 const DeviceList = function ({
-  devices,
+	devices,
 }: {
-  devices: Binding<AstalBluetooth.Device[]>;
+	devices: Binding<AstalBluetooth.Device[]>;
 }) {
-  return (
-    <box vertical>
-      {devices.as((devices) => {
-        return devices.map((device) => {
-          const name = bind(device, "name");
-          const connected = bind(device, "connected");
+	return (
+		<box vertical>
+			{devices.as((devices) => {
+				return devices.map((device) => {
+					const name = bind(device, "name");
+					const connected = bind(device, "connected");
 
-          return (
-            <button
-              label={bind(
-                derive(
-                  [name, connected],
-                  (name, connected) => `${connected ? "󰂱" : ""} ${name}`,
-                ),
-              )}
-            />
-          );
-        });
-      })}
-    </box>
-  );
+					return (
+						<button
+							label={bind(
+								derive(
+									[name, connected],
+									(name, connected) => `${connected ? "󰂱" : ""} ${name}`,
+								),
+							)}
+						/>
+					);
+				});
+			})}
+		</box>
+	);
 };
 
 const Bluetooth = function () {
-  const bluetooth = AstalBluetooth.get_default();
+	const bluetooth = AstalBluetooth.get_default();
 
-  const devices = bind(bluetooth, "devices");
+	const devices = bind(bluetooth, "devices");
+	const count = devices.as((devices) => devices.length);
 
-  return (
-    <menubutton>
-      <label label={"󰂯"} />
-      <popover>
-        <DeviceList devices={devices} />
-      </popover>
-    </menubutton>
-  );
+	return (
+		<menubutton>
+			<label label={devices.as((devices) => `󰂯 ${devices.length}`)} />
+			<popover>
+				<DeviceList devices={devices} />
+			</popover>
+		</menubutton>
+	);
 };
 
 export default Bluetooth;
diff --git a/widget/Hyprland/workspaces.tsx b/widget/Hyprland/workspaces.tsx
index a253f2b..6673c55 100644
--- a/widget/Hyprland/workspaces.tsx
+++ b/widget/Hyprland/workspaces.tsx
@@ -1,44 +1,58 @@
 import { bind } from "astal";
-import { Gdk } from "astal/gtk4";
+import { Gdk, Gtk } from "astal/gtk4";
 import Hyprland from "gi://AstalHyprland";
+import Rsvg from "gi://Rsvg?version=2.0";
 
 const Workspaces = function () {
-  const hyprland = Hyprland.get_default();
+	const hyprland = Hyprland.get_default();
 
-  const workspaces = bind(hyprland, "workspaces").as((workspaces) =>
-    workspaces
-      .filter((workspace) => workspace.id > 0)
-      .sort((a, b) => {
-        if (a.id > b.id) {
-          return 1;
-        } else if (a.id < b.id) {
-          return -1;
-        }
-        return 0;
-      }),
-  );
-  const focusedWorkspace = bind(hyprland, "focused_workspace");
-  const specialWorkspaces = bind(hyprland, "workspaces").as((workspaces) =>
-    workspaces.filter((workspace) => workspace.id < 0),
-  );
+	const workspaces = bind(hyprland, "workspaces").as((workspaces) =>
+		workspaces
+			.filter((workspace) => workspace.id > 0)
+			.sort((a, b) => {
+				if (a.id > b.id) {
+					return 1;
+				} else if (a.id < b.id) {
+					return -1;
+				}
+				return 0;
+			}),
+	);
+	const focusedWorkspace = bind(hyprland, "focused_workspace");
+	const specialWorkspaces = bind(hyprland, "workspaces").as((workspaces) =>
+		workspaces.filter((workspace) => workspace.id < 0),
+	);
 
-  return (
-    <box cssClasses={["Workspaces"]}>
-      {workspaces.as((workspaces) => {
-        return workspaces.map((workspace) => (
-          <button
-            cursor={Gdk.Cursor.new_from_name("pointer", null)}
-            cssClasses={focusedWorkspace.as((focused) => [
-              focused.id === workspace.id ? "active" : "",
-            ])}
-            onClicked={() => workspace.focus()}
-          >
-            {workspace?.name}
-          </button>
-        ));
-      })}
-    </box>
-  );
+	Gtk.Image.interface_install_property;
+
+	const activeTrianglePath =
+		'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#1fb854" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>';
+	const inactiveTrianglePath =
+		'<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" transform="rotate(180 12 12)" fill="none" stroke="#cac9c9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-icon lucide-triangle"><path d="M13.73 4a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/></svg>';
+
+	const activeTrianglePixBuf =
+		Rsvg.Handle.new_from_data(activeTrianglePath).get_pixbuf();
+	const inactiveTrianglePixBuf =
+		Rsvg.Handle.new_from_data(inactiveTrianglePath).get_pixbuf();
+
+	return (
+		<box cssClasses={["Workspaces"]}>
+			{workspaces.as((workspaces) => {
+				return workspaces.map((workspace) => (
+					<button
+						cursor={Gdk.Cursor.new_from_name("pointer", null)}
+						onClicked={() => workspace.focus()}
+					>
+						{focusedWorkspace.as((focused) =>
+							focused.id === workspace.id
+								? Gtk.Image.new_from_pixbuf(activeTrianglePixBuf)
+								: Gtk.Image.new_from_pixbuf(inactiveTrianglePixBuf),
+						)}
+					</button>
+				));
+			})}
+		</box>
+	);
 };
 
 export default Workspaces;
diff --git a/widget/Tray.tsx b/widget/Tray.tsx
index 15411a2..e3d9ac6 100644
--- a/widget/Tray.tsx
+++ b/widget/Tray.tsx
@@ -1,41 +1,30 @@
 import { bind } from "astal";
-import { Gdk } from "astal/gtk4";
+import { Gdk, Gtk } from "astal/gtk4";
 import AstalTray from "gi://AstalTray";
 
-const TrayItemPopover = function ({ item }: { item: AstalTray.TrayItem }) {
-  const actionGroup = bind(item, "actionGroup");
+const TrayItem = function ({ item }: { item: AstalTray.TrayItem }) {
+	const popover = Gtk.PopoverMenu.new_from_model(item.menu_model);
+	popover.insert_action_group("dbusmenu", item.action_group);
 
-  return (
-    <popover>
-      <box>{actionGroup.get()}</box>
-    </popover>
-  );
+	return (
+		<menubutton
+			cursor={Gdk.Cursor.new_from_name("pointer", null)}
+			icon_name={item.icon_name}
+			popover={popover}
+		/>
+	);
 };
 
 const Tray = function () {
-  const tray = AstalTray.get_default();
+	const tray = AstalTray.get_default();
 
-  const trayItems = bind(tray, "items");
-
-  return (
-    <box cssClasses={["Tray"]}>
-      {trayItems.as((items) =>
-        items.map((item) => {
-          return (
-            <menubutton cursor={Gdk.Cursor.new_from_name("pointer", null)}>
-              <image
-                tooltip_text={bind(item, "tooltip_markup")}
-                file={bind(item, "icon_name").as(
-                  (iconName) => iconName || "NONE",
-                )}
-              />
-              <TrayItemPopover item={item} />
-            </menubutton>
-          );
-        }),
-      )}
-    </box>
-  );
+	return (
+		<box cssClasses={["Tray"]}>
+			{bind(tray, "items").as((items) =>
+				items.map((item) => TrayItem({ item })),
+			)}
+		</box>
+	);
 };
 
 export default Tray;