waybar looks like cosmic panel

.config/waybar/config

@@ -1,10 +1,37 @@
 [
 	{
 		"layer": "top",
+		"position": "bottom",
+		"height": 40,
+		"modules-center": ["wlr/taskbar"],
+
+		"wlr/taskbar": {
+		    "format": "{icon}",
+		    "icon-size": 30,
+		    "icon-theme": "Gruvbox-Dark",
+		    "tooltip-format": "{title}",
+		    "on-click": "activate",
+		    "on-click-right": "minimize",
+		    "on-click-middle": "close",
+		    "ignore-list": [
+		       "Alacritty"
+		    ],
+		    "app_ids-mapping": {
+		      "firefoxdeveloperedition": "firefox-developer-edition"
+		    },
+		    "rewrite": {
+			"Firefox Web Browser": "Firefox",
+			"Foot Server": "Terminal"
+		    }
+		}
+	},
+	{
+		"layer": "top",
+		"position": "top",
 		"height": 30,
-		"modules-left": ["hyprland/workspaces", "custom/temperature", "cpu", "memory"],
-		"modules-center": ["custom/time", "hyprland/window"],
-		"modules-right": ["clock", "tray"],
+		"modules-left": ["hyprland/workspaces", "custom/temperature", "cpu", "memory", "custom/time"],
+		"modules-center": ["clock"],
+		"modules-right": ["pulseaudio/slider","pulseaudio", "tray"],
 		"hyprland/workspaces": {
 			"disable-scroll": true,
 			"show-special": true,
@@ -15,12 +42,37 @@
 			"format-active": "[{name}]",
 			"format-icons": {
 				"urgent": "!",
-				"active": "*",
+				"active": "",
 				"default": ""
 			}
 		},
+		"pulseaudio/slider": {
+		    "min": 0,
+		    "max": 100,
+		    "orientation": "horizontal"
+		},
+		"pulseaudio": {
+		    "format": "{icon}",
+		    "format-bluetooth": "{volume}% {icon}",
+		    "format-muted": "",
+		    "format-icons": {
+			"alsa_output.pci-0000_00_1f.3.analog-stereo": "",
+			"alsa_output.pci-0000_00_1f.3.analog-stereo-muted": "",
+			"headphone": "",
+			"hands-free": "",
+			"headset": "",
+			"phone": "",
+			"phone-muted": "",
+			"portable": "",
+			"car": "",
+			"default": ["", ""]
+		    },
+		    "scroll-step": 5,
+		    "on-click": "pavucontrol",
+		    "ignored-sinks": ["Easy Effects Sink"]
+		},
 		"clock": {
-			"format": "{:%a, %d %b %Y %H:%M:%S}",
+			"format": "{:%a, %d %b %Y %H:%M:%S %p}",
 			"interval": 1
 		},
 		"custom/temperature": {

.config/waybar/style.css

@@ -1,3 +1,28 @@
+* {
+	font-family: 'VictorMono';
+}
+#pulseaudio-slider slider {
+    min-height: 0px;
+    min-width: 0px;
+    background-image: none;
+    border: none;
+    box-shadow: none;
+    background-color:  #ebdbb2;
+}
+#pulseaudio-slider trough {
+    min-height: 10px;
+    min-width: 80px;
+    border-radius: 5px;
+    background-color: #282828;
+}
+#pulseaudio-slider highlight {
+    min-width: 10px;
+    border-radius: 5px;
+    background-color: #b8bb26;
+}
+#taskbar button.active {
+	background-color: #8ec07c;
+}
 window#waybar.screenBorder {
 	border: 2px solid #b8bb26;
 	background-color: transparent;
@@ -12,14 +37,17 @@ window#waybar.left {
 	background-color: transparent;
 }
 #workspaces button {
-	padding: 0px;
-	color: #ebdbb2;
+	padding: 0px 5px 0px 5px;
+	color: #282828;
+	background: #b8bb26;
+	margin: 5px;
 }
 #workspaces button:hover {
 	color: #b8bb26;
 }
 #workspaces button.active {
-	color: #8ec07c;
+	color: #282828;
+	background: #8ec07c;
 }
 #workspaces button.focuced {
 	color: #282828;
@@ -45,10 +73,10 @@ window#waybar.left {
 #tray,
 #custom-server-cava {
 	color: #ebdbb2;
-	background: #282828;
-	border: 2px solid #b8bb26;
+	background: transparent;
+	/*border: 2px solid #b8bb26;
 	border-radius: 15;
-	/*box-shadow: 12px 12px 0px 2px #282828;*/
+	box-shadow: 12px 12px 0px 2px #282828;*/
 	padding-left: 3px;
 	padding-right: 3px;
 	margin: 6px;