diff --git a/home/waybar/assets/nixos.png b/home/waybar/assets/nixos.png
new file mode 100644
index 0000000..acbaad4
Binary files /dev/null and b/home/waybar/assets/nixos.png differ
diff --git a/home/waybar/default.nix b/home/waybar/default.nix
index d7fff4a..a4d1633 100644
--- a/home/waybar/default.nix
+++ b/home/waybar/default.nix
@@ -1,40 +1,48 @@
 {
+  inputs,
+  pkgs,
+  lib,
   ...
-}:
-
-{
+}: 
+  let
+  compileSCSS = name: source: "${pkgs.runCommandLocal name {} ''
+    mkdir -p $out
+    ${lib.getExe pkgs.sassc} -t expanded '${source}' > $out/${name}.css
+  ''}/${name}.css";
+ in {
   programs.waybar = {
     enable = true;
+    package = inputs.hyprland.packages.${pkgs.system}.waybar-hyprland;
     settings = {
       mainBar = {
         output = "DP-3";
         layer = "top";
         position = "top";
         height = 35;
-        width = 1879;
+        width = 1880;
         spacing = 10;
         margin-top = 8;
         modules-left = [
          "image/nixos"
          "user"
+         "wlr/workspaces"
         ];
         modules-center = [
           "hyprland/window"
         ];
         modules-right = [
-          "pulseaudio"
           "cpu"
           "memory"
           "clock"
           "tray"
           "custom/wlogout"
         ];
-        "image/nixos" ={
-          path = "/home/notoh/Pictures/icons/nixos.png";
+        "image/nixos" = {
+          path = "/home/notoh/snowflake/home/waybar/assets/nixos.png";
           size = 24;
         };
-        "user" ={
-          format = "{user} (up {work_d} days, {work_H} hrs ↑)";
+        "user" = {
+          format = "{user} up {work_d} days | {work_H} hrs | {work_M} min ↑";
           interval = 60;
           icon = false;
         };
@@ -43,19 +51,16 @@
           seperate-outputs = true;
           max-length = 35;
         };
-        "pulseaudio" = {
-          format = "{volume}% {icon} {format_source}";
-          format-muted = " {format_source}";
-          format-source = "{volume}% ";
-          format-source-muted = "";
+        "wlr/workspaces" = {
+          format = "{icon}";
+          on-click = "activate";
+          all-outputs = true;
           format-icons = {
-            "headphone" = "";
-            "hands-free" = "";
-            "headset" = "";
-            "phone" = "";
-            "portable" = "";
-            "car" = "";
-            "default" = ["" "" ""];
+            "1" = "";
+            "2" = "";
+            "3" = "";
+            "4" = "";
+            "5" = "";
           };
         };
         "cpu" = {
@@ -80,235 +85,6 @@
         };
       };
     };
-    style = ''
-* {
-    /* `otf-font-awesome` is required to be installed for icons */
-    font-family: FontAwesome, JetBrainsMono Nerd Font, JetBrains Mono, Helvetica, Arial, sans-serif;
-    font-size: 14px;
-    border-radius: 6px;
-    padding-bottom: 3px;
-    padding-right: 7px;
-    padding-left: 7px;
-    padding-top: 3px;
-    min-height: 0px;
-  }
-
-window#waybar {
-    background-color: rgb(30, 30, 46);
-    border-radius: 21px;
-    border-bottom: 3px solid rgb(245, 194, 231);
-    border-left: 3px solid rgb(245, 194, 231);
-    border-right: 3px solid rgb(245, 194, 231);
-    border-top: 3px solid rgb(245, 194, 231);
-    color: #ffffff;
-    transition-property: background-color;
-    transition-duration: .5s;
-}
-
-window#waybar.hidden {
-    opacity: 0.2;
-}
-
-/*
-window#waybar.empty {
-    background-color: transparent;
-}
-window#waybar.solo {
-    background-color: #FFFFFF;
-}
-*/
-
-window#waybar.termite {
-    background-color: #3F3F3F;
-}
-
-window#waybar.chromium {
-    background-color: #000000;
-    border: none;
-}
-
-button {
-    /* Use box-shadow instead of border so the text isn't offset */
-    box-shadow: inset 0 -3px transparent;
-    /* Avoid rounded borders under each button name */
-    border: none;
-    border-radius: 0;
-}
-
-/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
-button:hover {
-    background: inherit;
-    box-shadow: inset 0 -3px #ffffff;
-}
-
-#workspaces button {
-    padding: 0 5px;
-    background-color: transparent;
-    color: #ffffff;
-}
-
-#workspaces button:hover {
-    background: rgba(0, 0, 0, 0.2);
-}
-
-#workspaces button.focused {
-    background-color: #64727D;
-    box-shadow: inset 0 -3px #ffffff;
-}
-
-#workspaces button.urgent {
-    background-color: #eb4d4b;
-}
-
-#mode {
-    background-color: #64727D;
-    border-bottom: 3px solid #ffffff;
-}
-
-#clock,
-#battery,
-#cpu,
-#memory,
-#disk,
-#temperature,
-#network,
-#pulseaudio,
-#wireplumber,
-#custom-media,
-#tray,
-#mode {
-    padding: 0 5px;
-    color: #ffffff;
-
-}
-
-#window,
-#workspaces {
-    margin: 0 4px;
-}
-
-/* If workspaces is the leftmost module, omit left margin */
-.modules-left > widget:first-child > #workspaces {
-    margin-left: 0;
-}
-
-/* If workspaces is the rightmost module, omit right margin */
-.modules-right > widget:last-child > #workspaces {
-    margin-right: 0;
-}
-
-#clock {
-    background-color: #cba6f7;
-    color: black;
-}
-
-label:focus {
-    background-color: #000000;
-}
-
-#cpu {
-    background-color: #eba0ac;
-    color: #000000;
-}
-
-#memory {
-    background-color: #f38ba8;
-    color: black;
-}
-
-#disk {
-    background-color: #964B00;
-}
-
-#network {
-    background-color: #2980b9;
-}
-
-#network.disconnected {
-    background-color: #f53c3c;
-}
-
-#pulseaudio {
-    background-color: #f9e2af;
-    color: #000000;
-}
-
-#pulseaudio.muted {
-    background-color: #90b1b1;
-    color: #2a5c45;
-}
-
-#wireplumber {
-    background-color: #fff0f5;
-    color: #000000;
-}
-
-#wireplumber.muted {
-    background-color: #f53c3c;
-}
-
-#custom-media {
-    background-color: #66cc99;
-    color: #2a5c45;
-    min-width: 100px;
-}
-
-#custom-media.custom-spotify {
-    background-color: #66cc99;
-}
-
-#custom-media.custom-vlc {
-    background-color: #ffa000;
-}
-
-#temperature {
-    background-color: #fab387;
-    color: black;
-}
-
-#temperature.critical {
-    background-color: #eb4d4b;
-}
-
-#tray {
-    background-color: transparent;
-}
-
-#tray > .passive {
-    -gtk-icon-effect: dim;
-}
-
-#tray > .needs-attention {
-    -gtk-icon-effect: highlight;
-    background-color: #eb4d4b;
-}
-
-#language {
-    background: #00b093;
-    color: #740864;
-    padding: 0 5px;
-    margin: 0 5px;
-    min-width: 16px;
-}
-
-#window {
-    background: #f5c2e7;
-    color: black;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-#user {
-    background: #f5c2e7;
-    color: black;
-    padding-left: 10px;
-    padding-right: 10px;
-}
-
-#custom-wlogout {
-  font-size: 15px;
-}
-
-  '';
+    style = builtins.readFile (compileSCSS "waybar-style" ./style.scss);
   };
 }
\ No newline at end of file
diff --git a/home/waybar/style.scss b/home/waybar/style.scss
new file mode 100644
index 0000000..c24628e
--- /dev/null
+++ b/home/waybar/style.scss
@@ -0,0 +1,117 @@
+/* catppuccin mocha variables */
+
+$rosewater:   #f5e0dc;
+$flamingo:    #f2cdcd;
+$pink:        #f5c2e7;
+$mauve:       #cba6f7;
+$red:         #f38ba8;
+$maroon:      #eba0ac;
+$peach:       #fab387;
+$yellow:      #f9e2af;
+$green:       #a6e3a1;
+$teal:        #94e2d5;
+$sky:         #89dceb;
+$sapphire:    #74c7ec;
+$blue:        #89b4fa;
+$lavender:    #b4befe;
+
+$text:        #cdd6f4;
+$subtext1:    #bac2de;
+$subtext0:    #a6adc8;
+$overlay2:    #9399b2;
+$overlay1:    #7f849c;
+$overlay0:    #6c7086;
+
+$surface2:    #585b70;
+$surface1:    #45475a;
+$surface0:    #313244;
+
+$base:        #1e1e2e;
+$mantle:      #181825;
+$crust:       #11111b;
+
+/* init main bar config */
+
+* {
+  all: unset;
+  font-family: FontAwesome, JetBrainsMono Nerd Font;
+  font-size: 13px;
+  font-weight: bold;
+  color: $text;
+}
+
+window#waybar {
+  background-color: transparent;
+}
+
+#user,
+#workspaces,
+#window,
+#cpu,
+#memory,
+#clock,
+#tray,
+#custom-wlogout {
+  border-radius: 8px;
+  background: $base;
+  padding: 0.5rem;
+}
+
+tooltip {
+  background-color: transparent;
+  border: none;
+}
+
+tooltip label {
+  color: $text;
+  background-color: $base;
+  padding: 0.5rem;
+  border-radius: 8px;
+  border: 3px solid $overlay1;
+}
+
+image {
+  background: $base;
+  border-radius: 8px;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+#user {
+  border: 3px solid $pink;
+}
+
+#workspaces {
+  button {
+    min-width: 28px;
+  }
+  button.active {
+    border-bottom: 1px solid $red;
+  }
+  border: 3px solid $red;
+}
+
+#window {
+  border-radius: 16px;
+  border: 3px solid $peach;
+}
+
+#cpu {
+  border: 3px solid $red;
+}
+
+#memory {
+  border: 3px solid $mauve;
+}
+
+#clock {
+  border: 3px solid $yellow;
+}
+
+#tray {
+  border: 3px solid $overlay1;
+}
+
+#custom-wlogout {
+  border: 3px solid $overlay1;
+}
\ No newline at end of file