diff --git a/home/ags/config/import.js b/home/ags/config/import.js
index aa7ddb2..e6b5813 100644
--- a/home/ags/config/import.js
+++ b/home/ags/config/import.js
@@ -7,6 +7,7 @@ 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";
+import Mpris from 'resource:///com/github/Aylur/ags/service/mpris.js';
 
 export {
   App,
@@ -18,4 +19,5 @@ export {
   Utils,
   Variable,
   Widget,
+  Mpris,
 };
\ No newline at end of file
diff --git a/home/ags/config/js/main.js b/home/ags/config/js/main.js
index b879778..00c1656 100644
--- a/home/ags/config/js/main.js
+++ b/home/ags/config/js/main.js
@@ -1,26 +1,31 @@
 import { Widget } from '../import.js';
 import { Time } from './widgets/time.js'
-import { nixosLogo } from './widgets/image.js';
+import { nixosLogo } from './widgets/images/image.js';
+import { Media } from './widgets/music.js';
+import { Workspaces } from './widgets/hyprland.js';
 
 const Start = () => Widget.Box({
     hpack: "start",
     children: [
-        nixosLogo()
+        nixosLogo(),
+        Workspaces(),
     ]
-})
+});
 const Center = () => Widget.Box({
-    children: []
-})
+    children: [
+        Media(),
+    ]
+});
 const End = () => Widget.Box({
     hpack: "end",
     children: [
-        Time()
+        Time(),
     ]
-})
+});
 
 const Bar = (monitor) => Widget.Window({
     monitor,
-    name: `bar-${monitor}`,
+    name: `bar`,
     anchor: ['top', 'left', 'right'],
     exclusivity: 'exclusive',
     child: Widget.CenterBox({
@@ -28,8 +33,8 @@ const Bar = (monitor) => Widget.Window({
         centerWidget: Center(),
         endWidget: End(),
     }),
-})
+});
 
 export {
     Bar
-}
\ No newline at end of file
+}
diff --git a/home/ags/config/js/widgets/hyprland.js b/home/ags/config/js/widgets/hyprland.js
new file mode 100644
index 0000000..930db18
--- /dev/null
+++ b/home/ags/config/js/widgets/hyprland.js
@@ -0,0 +1,17 @@
+import { Hyprland, Widget } from "../../import.js";
+
+const Workspaces = () => Widget.Box({
+    class_name: 'workspaces',
+    children: Hyprland.bind('workspaces').transform(ws => {
+        return ws.map(({ id }) => Widget.Button({
+            on_clicked: () => Hyprland.sendMessage(`dispatch workspace ${id}`),
+            child: Widget.Label(`${id}`),
+            class_name: Hyprland.active.workspace.bind('id')
+                .transform(i => `${i === id ? 'focused' : ''}`),
+        }));
+    }),
+});
+
+export {
+    Workspaces
+}
\ No newline at end of file
diff --git a/home/ags/config/js/widgets/image.js b/home/ags/config/js/widgets/image.js
deleted file mode 100644
index 23e1dd4..0000000
--- a/home/ags/config/js/widgets/image.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Widget } from '../../import.js';
-
-const nixosLogo = () => Widget.Icon({
-    icon: '/home/notoh/Pictures/icons/nixos.png'
-});
-
-export {
-    nixosLogo
-}
\ No newline at end of file
diff --git a/home/ags/config/js/widgets/images/image.js b/home/ags/config/js/widgets/images/image.js
new file mode 100644
index 0000000..bf3635a
--- /dev/null
+++ b/home/ags/config/js/widgets/images/image.js
@@ -0,0 +1,9 @@
+import { Widget } from '../../../import.js';
+
+const nixosLogo = () => Widget.Icon({
+    icon: '/home/notoh/snowflake/home/ags/config/js/widgets/images/static/nixos.png'
+});
+
+export {
+    nixosLogo
+}
\ No newline at end of file
diff --git a/home/ags/config/js/widgets/images/static/nixos.png b/home/ags/config/js/widgets/images/static/nixos.png
new file mode 100644
index 0000000..acbaad4
Binary files /dev/null and b/home/ags/config/js/widgets/images/static/nixos.png differ
diff --git a/home/ags/config/js/widgets/music.js b/home/ags/config/js/widgets/music.js
new file mode 100644
index 0000000..72ba717
--- /dev/null
+++ b/home/ags/config/js/widgets/music.js
@@ -0,0 +1,17 @@
+import { Widget, Mpris } from "../../import.js";
+
+const Media = () => Widget.Box({
+    class_name: 'media',
+    child: Widget.Label('-').hook(Mpris, self => {
+        if (Mpris.players[0]) {
+            const { track_artists, track_title } = Mpris.players[0];
+            self.label = `${track_artists.join(', ')} - ${track_title}`;
+        } else {
+            self.label = 'Nothing is playing';
+        }
+    }, 'player-changed'),
+});
+
+export {
+    Media
+}
\ No newline at end of file
diff --git a/home/ags/config/js/widgets/system.js b/home/ags/config/js/widgets/system.js
new file mode 100644
index 0000000..e69de29
diff --git a/home/ags/config/js/widgets/time.js b/home/ags/config/js/widgets/time.js
index 0518b83..e2e7f27 100644
--- a/home/ags/config/js/widgets/time.js
+++ b/home/ags/config/js/widgets/time.js
@@ -1,7 +1,7 @@
 import { Widget, Utils } from '../../import.js';
 
 
-const Time = () => Widget.EventBox({
+const Time = () => Widget.Box({
     child: Widget.Label({
         className: "date"
     }).poll(
diff --git a/home/ags/config/main.scss b/home/ags/config/main.scss
index 83a584f..2e31397 100644
--- a/home/ags/config/main.scss
+++ b/home/ags/config/main.scss
@@ -1,2 +1,9 @@
 @import 'scss/bar.scss';
-@import 'scss/general.scss';
\ No newline at end of file
+@import 'scss/general.scss';
+@import 'scss/widgets.scss';
+
+* {
+    all: unset;
+    margin: 3px;
+    font-family: 'Monaspace Krypton';
+}
\ No newline at end of file
diff --git a/home/ags/config/scss/bar.scss b/home/ags/config/scss/bar.scss
index 78616b6..0bfb0c4 100644
--- a/home/ags/config/scss/bar.scss
+++ b/home/ags/config/scss/bar.scss
@@ -1,9 +1,5 @@
-* {
-    all: unset;
-    margin: 3px;
-    font-family: 'Monaspace Krypton';
-}
+@import 'colors.scss';
 
 window {
-    background-color: black;
+    background-color: $background;
 }
\ No newline at end of file
diff --git a/home/ags/config/scss/colors.scss b/home/ags/config/scss/colors.scss
new file mode 100644
index 0000000..2e92c60
--- /dev/null
+++ b/home/ags/config/scss/colors.scss
@@ -0,0 +1,24 @@
+/* tokyonight */
+
+$red: #f7768e;
+$orange: #ff9e64;
+$yellow: #e0af68;
+$light-green: #9ece6a;
+$green: #73daca;
+$turquoise: #89ddff;
+$light-cyan: #b4f9f8;
+$teal: #2ac3de;
+$cyan: #7dcfff;
+$blue: #7aa2f7;
+$magenta: #bb9af7;
+$white: #c0caf5;
+$light-gray: #9aa5ce;
+$parameters: #cfc9c2;
+$comment: #565f89;
+$black: #414868;
+$foreground: #a9b1d6;
+$foreground-highlight: #c0caf5;
+$foreground-gutter: #363b54;
+$background: #1a1b26;
+$background-highlight: #30374b;
+$background-menu: #16161e;
\ No newline at end of file
diff --git a/home/ags/config/scss/general.scss b/home/ags/config/scss/general.scss
index ec4f763..e69de29 100644
--- a/home/ags/config/scss/general.scss
+++ b/home/ags/config/scss/general.scss
@@ -1,7 +0,0 @@
-.date {
-    color: #ffffff;
-}
-
-image {
-    font-size: 24px;
-}
\ No newline at end of file
diff --git a/home/ags/config/scss/widgets.scss b/home/ags/config/scss/widgets.scss
new file mode 100644
index 0000000..9730f6a
--- /dev/null
+++ b/home/ags/config/scss/widgets.scss
@@ -0,0 +1,21 @@
+@import 'colors.scss';
+
+@mixin widget {
+    color: $white
+};
+
+.date {
+    @include widget();
+}
+
+.workspaces {
+    @include widget();
+};
+
+.media {
+    @include widget();
+}
+
+image {
+    font-size: 24px;
+}
\ No newline at end of file
diff --git a/home/ags/default.nix b/home/ags/default.nix
index 05a4dc7..db78e95 100644
--- a/home/ags/default.nix
+++ b/home/ags/default.nix
@@ -7,7 +7,7 @@
 in {
   programs.ags = {
     enable = true;
-    extraPackages = with pkgs; [libsoup_3];
+    extraPackages = with pkgs; [libsoup_3 libdbusmenu-gtk3];
   };
   home.packages = with pkgs; [dart-sass];
   xdg.configFile = {