diff --git a/config/ags/config.js b/config/ags/config.js
index 2b983594..1f87cf1e 100644
--- a/config/ags/config.js
+++ b/config/ags/config.js
@@ -15,20 +15,53 @@ const date = Variable("", {
 // so to make a reuseable widget, make it a function
 // then you can simply instantiate one by calling it
 
-function Workspaces() {
-    const activeId = hyprland.active.workspace.bind("id")
-    const workspaces = hyprland.bind("workspaces")
-        .as(ws => ws.map(({ id }) => Widget.Button({
-            on_clicked: () => hyprland.messageAsync(`dispatch workspace ${id}`),
-            child: Widget.Label(`${id}`),
-            class_name: activeId.as(i => `${i === id ? "focused" : ""}`),
-        })))
+// function Workspaces() {
+//     const activeId = hyprland.active.workspace.bind("id")
+//     const workspaces = hyprland.bind("workspaces")
+//         .as(ws => 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,
-    })
-}
+//     return Widget.Box({
+//         class_name: "workspaces",
+//         children: workspaces,
+//     })
+// }
+
+const dispatch = ws => hyprland.sendMessage(`dispatch workspace ${ws}`);
+
+export const Workspaces = () => Widget.EventBox({
+    child: Widget.Box({
+        children: Array.from({ length: 10 }, (_, i) => i + 1).map(i => Widget.Button({
+            class_name: "workspace-buttons",
+            attribute: i,
+            // Keeps button from expanding to fit its container
+            onClicked: () => dispatch(i),
+            child: Widget.Box({
+                class_name: "workspace-indicator",
+                // vpack: "start",
+                vpack: "center",
+                hpack: "center",
+                children: [
+                    Widget.Label({
+                        label: `${i}`,
+                        justification: "center",
+                    })
+                ],
+                setup: self => self.hook(hyprland, () => {
+                    // The "?" is used here to return "undefined" if the workspace doesn't exist
+                    self.toggleClassName('workspace-inactive', (hyprland.getWorkspace(i)?.windows || 0) === 0);
+                    self.toggleClassName('workspace-occupied', (hyprland.getWorkspace(i)?.windows || 0) > 0);
+                    self.toggleClassName('workspace-active', hyprland.active.workspace.id === i);
+                    // self.toggleClassName('workspace-large', (hyprland.getWorkspace(i)?.windows || 0) > 1);
+                }),
+            }),
+
+        })),
+    }),
+});
 
 
 function ClientTitle() {
diff --git a/config/ags/style.css b/config/ags/style.css
index c099733a..8e6d1cc5 100644
--- a/config/ags/style.css
+++ b/config/ags/style.css
@@ -13,7 +13,6 @@ button {
     padding-bottom: 0;
     border: none;
     background-color: transparent;
-    border-bottom: 3px solid transparent;
 }
 
 button:active {
@@ -21,7 +20,7 @@ button:active {
 }
 
 button:hover {
-    border-bottom: 3px solid @theme_fg_color;
+    border-bottom: 1px solid @theme_fg_color;
 }
 
 label {
@@ -29,7 +28,7 @@ label {
 }
 
 .workspaces button.focused {
-    border-bottom: 3px solid @theme_selected_bg_color;
+    border-bottom: 1px solid @theme_selected_bg_color;
 }
 
 .client-title {
@@ -40,6 +39,31 @@ label {
     color: yellow;
 }
 
+
+.workspace-buttons {
+    min-width: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    outline-width: 0;
+    border: none;
+    background-color: transparent;
+}
+
+.workspace-inactive {
+  opacity: 0.5;
+  border-bottom: 3px transparent;
+}
+
+.workspace-occupied {
+  opacity: 1;
+  border-bottom: 3px transparent;
+}
+
+.workspace-active {
+  outline-width: 0;
+  border-bottom: 3px solid @theme_selected_bg_color;
+}
+
 levelbar block,
 highlight {
     min-height: 10px;