diff --git a/home/apps/waybar/config b/home/apps/waybar/config
index 2c642fd..b5510fa 100644
--- a/home/apps/waybar/config
+++ b/home/apps/waybar/config
@@ -4,6 +4,7 @@
   "position": "top",
   "height": 32,
   "spacing": 4,
+  "margin": 5,
   "modules-left": ["wlr/workspaces"],
   "modules-center": [
     "hyprland/window"
diff --git a/home/apps/waybar/style.css b/home/apps/waybar/style.css
index b8a016d..021c064 100644
--- a/home/apps/waybar/style.css
+++ b/home/apps/waybar/style.css
@@ -1,30 +1,57 @@
+@define-color red #f38ba8;
+@define-color pink #f5c2e7;
+@define-color crust #11111c;
+@define-color base #1e1e2e;
+@define-color text #cdd6f4;
+@define-color surface0 #313244;
+@define-color surface2 #585b70;
+
 * {
-  font-family: Symbols Nerd Font, Berkeley Mono;
+  font-family: Symbols Nerd Font, IBM Plex Sans;
   font-size: 16px;
-  color: #cdd6f4;
+  color: @text;
 }
 
 window#waybar {
-  background-color: #000;
+  background-color: @base;
+  border: 2px solid @crust;
+  border-radius: 5px;
+}
+
+#workspaces button:first-child {
+  padding: 0 5px;
+  border-radius: 5px 0 0 5px;
+  border-left: 2px solid @crust;
+}
+#workspaces button.active:first-child {
+  padding: 0 5px;
+  box-shadow: unset;
+  border-radius: 5px 0 0 5px;
+  border-left: 2px solid @pink;
+  border-top: 2px solid @pink;
+  border-bottom: 2px solid @pink;
 }
 
 #workspaces button {
   padding: 0 5px;
   border-radius: 0;
+  border-top: 2px solid @crust;
+  border-bottom: 2px solid @crust;
 }
 
 #workspaces button:hover {
-  background: #313244;
+  background: @surface2;
 }
 
 #workspaces button.active {
-  color: #f5c2e7;
-  background: #585b70;
-  box-shadow: inset 0 -3px #f5c2e7;
+  color: @pink;
+  background: @surface0;
+  border-top: 2px solid @pink;
+  border-bottom: 2px solid @pink;
 }
 
 #workspaces button.urgent {
-  background-color: #f38ba8;
+  background-color: @red;
 }
 
 #clock,