diff --git a/user/configs/wayland/ags/ags-config/js/panel/widgets/sysTray.js b/user/configs/wayland/ags/ags-config/js/panel/widgets/sysTray.js
index c765f15..a7c9d9c 100644
--- a/user/configs/wayland/ags/ags-config/js/panel/widgets/sysTray.js
+++ b/user/configs/wayland/ags/ags-config/js/panel/widgets/sysTray.js
@@ -6,7 +6,7 @@ export default () => Box({
     connections: [
         [SystemTray, box => {
             box.children = SystemTray.items.map(item => Button({
-                className: 'tray-icon',
+                className: 'tray-icons',
                 child: Icon(),
                 onPrimaryClick: (_, event) => item.activate(event),
                 onSecondaryClick: (_, event) => item.openMenu(event),
diff --git a/user/configs/wayland/ags/ags-config/scss/panel.scss b/user/configs/wayland/ags/ags-config/scss/panel.scss
index 618f99b..728b834 100644
--- a/user/configs/wayland/ags/ags-config/scss/panel.scss
+++ b/user/configs/wayland/ags/ags-config/scss/panel.scss
@@ -1,9 +1,3 @@
-@import './themes/gruvbox.scss';
-
-* {
-  min-height: unset;
-}
-
 .bar {
   min-height: 33px;
   font-family: "JetBrainsMono Nerd Font";
@@ -11,70 +5,3 @@
   background-color: $bg;
   color: $fg;
 }
-
-.workspaces {
-  background-color: $box-bg;
-  border-radius: $box-border-radius;
-  margin: 5px 0px 5px 10px;
-  font-size: 0px;
-}
-
-.workspaces button {
-  border-radius: 0;
-  background-color: $wsbg;
-  font-size: 10px;
-}
-
-.workspaces button.focused {
-  border-radius: 0px;
-  background-color: $activewsbg;
-}
-
-.workspaces button:first-child {
-  border-radius: $box-border-radius 0px 0px $box-border-radius;
-}
-
-.workspaces button:last-child {
-  border-radius: 0px $box-border-radius $box-border-radius 0px;
-}
-
-.windowTitle {
-  background-color: $box-bg;
-  border-radius: $box-border-radius;
-  padding: 0px 10px 0px 10px;
-  margin: 5px 0px 5px 10px;
-}
-
-.volume {
-  background-color: $box-bg;
-  border-radius: $box-border-radius;
-  padding: 0px 10px 0px 10px;
-  margin: 5px 5px 5px 0px;
-}
-
-.media {
-  background-color: $box-bg;
-  border-radius: $box-border-radius;
-  padding: 0px 10px 0px 10px;
-  margin: 5px 10px 5px 0px;
-}
-
-.date {
-  background-color: $box-bg;
-  padding: 0px 10px 0px 10px;
-  border-radius: $box-border-radius;
-  margin: 5px 10px 5px 0px;
-};
-
-.tray {
-  background-color: $box-bg;
-  padding: 0px 10px 0px 10px;
-  border-radius: $box-border-radius;
-  margin: 5px 10px 5px 0px;
-}
-
-.tray-icon {
-  font-size: 18px;
-  background-color: $box-bg;
-  padding: 2px;
-}
diff --git a/user/configs/wayland/ags/ags-config/scss/panel/panel.scss b/user/configs/wayland/ags/ags-config/scss/panel/panel.scss
new file mode 100644
index 0000000..8eb3b2e
--- /dev/null
+++ b/user/configs/wayland/ags/ags-config/scss/panel/panel.scss
@@ -0,0 +1,45 @@
+@import './themes/gruvbox.scss';
+
+@import './widgets/workspaces.scss';
+@import './widgets/windowTitle.scss';
+@import './widgets/volume.scss';
+
+* {
+  min-height: unset;
+}
+
+.bar {
+  min-height: 33px;
+  font-family: "JetBrainsMono Nerd Font";
+  font-size: 12px;
+  background-color: $bg;
+  color: $fg;
+}
+
+
+.media {
+  background-color: $box-bg;
+  border-radius: $box-border-radius;
+  padding: 0px 10px 0px 10px;
+  margin: 5px 10px 5px 0px;
+}
+
+.date {
+  background-color: $box-bg;
+  padding: 0px 10px 0px 10px;
+  border-radius: $box-border-radius;
+  margin: 5px 10px 5px 0px;
+};
+
+.tray {
+  background-color: $box-bg;
+  padding: 0px 10px 0px 10px;
+  border-radius: $box-border-radius;
+  margin: 5px 10px 5px 0px;
+}
+
+.tray-icon {
+  font-size: 18px;
+  background-color: $box-bg;
+  padding: 2px;
+}
diff --git a/user/configs/wayland/ags/ags-config/scss/panel/widgets/clock.scss b/user/configs/wayland/ags/ags-config/scss/panel/widgets/clock.scss
new file mode 100644
index 0000000..a2aff87
--- /dev/null
+++ b/user/configs/wayland/ags/ags-config/scss/panel/widgets/clock.scss
@@ -0,0 +1,6 @@
+.date {
+  background-color: $box-bg;
+  padding: 0px 10px 0px 10px;
+  border-radius: $box-border-radius;
+  margin: 5px 10px 5px 0px;
+};
diff --git a/user/configs/wayland/ags/ags-config/scss/panel/widgets/mpris.scss b/user/configs/wayland/ags/ags-config/scss/panel/widgets/mpris.scss
new file mode 100644
index 0000000..9da5b95
--- /dev/null
+++ b/user/configs/wayland/ags/ags-config/scss/panel/widgets/mpris.scss
@@ -0,0 +1,6 @@
+.media {
+  background-color: $box-bg;
+  border-radius: $box-border-radius;
+  padding: 0px 10px 0px 10px;
+  margin: 5px 10px 5px 0px;
+}
diff --git a/user/configs/wayland/ags/ags-config/scss/panel/widgets/sysTray.scss b/user/configs/wayland/ags/ags-config/scss/panel/widgets/sysTray.scss
new file mode 100644
index 0000000..8999bd7
--- /dev/null
+++ b/user/configs/wayland/ags/ags-config/scss/panel/widgets/sysTray.scss
@@ -0,0 +1,12 @@
+.tray {
+  background-color: $box-bg;
+  padding: 0px 10px 0px 10px;
+  border-radius: $box-border-radius;
+  margin: 5px 10px 5px 0px;
+}
+
+.tray .tray-icons {
+  font-size: 18px;
+  background-color: $box-bg;
+  padding: 2px;
+}
diff --git a/user/configs/wayland/ags/ags-config/scss/panel/widgets/volume.scss b/user/configs/wayland/ags/ags-config/scss/panel/widgets/volume.scss
new file mode 100644
index 0000000..3e8ba74
--- /dev/null
+++ b/user/configs/wayland/ags/ags-config/scss/panel/widgets/volume.scss
@@ -0,0 +1,6 @@
+.volume {
+  background-color: $box-bg;
+  border-radius: $box-border-radius;
+  padding: 0px 10px 0px 10px;
+  margin: 5px 5px 5px 0px;
+}
diff --git a/user/configs/wayland/ags/ags-config/scss/panel/widgets/windowTitle.scss b/user/configs/wayland/ags/ags-config/scss/panel/widgets/windowTitle.scss
new file mode 100644
index 0000000..3a07a0e
--- /dev/null
+++ b/user/configs/wayland/ags/ags-config/scss/panel/widgets/windowTitle.scss
@@ -0,0 +1,6 @@
+.windowTitle {
+  background-color: $box-bg;
+  border-radius: $box-border-radius;
+  padding: 0px 10px 0px 10px;
+  margin: 5px 0px 5px 10px;
+}
diff --git a/user/configs/wayland/ags/ags-config/scss/panel/widgets/workspaces.scss b/user/configs/wayland/ags/ags-config/scss/panel/widgets/workspaces.scss
new file mode 100644
index 0000000..b8475a0
--- /dev/null
+++ b/user/configs/wayland/ags/ags-config/scss/panel/widgets/workspaces.scss
@@ -0,0 +1,27 @@
+.workspaces {
+  background-color: $box-bg;
+  border-radius: $box-border-radius;
+  margin: 5px 0px 5px 10px;
+  font-size: 0px;
+}
+
+.workspaces button {
+  border-radius: 0;
+  background-color: $wsbg;
+  font-size: 10px;
+}
+
+.workspaces button.focused {
+  border-radius: 0px;
+  background-color: $activewsbg;
+}
+
+.workspaces button:first-child {
+  border-radius: $box-border-radius 0px 0px $box-border-radius;
+}
+
+.workspaces button:last-child {
+  border-radius: 0px $box-border-radius $box-border-radius 0px;
+}
+
+
diff --git a/user/configs/wayland/ags/ags-config/style.scss b/user/configs/wayland/ags/ags-config/style.scss
index 631df5c..df8bfaa 100644
--- a/user/configs/wayland/ags/ags-config/style.scss
+++ b/user/configs/wayland/ags/ags-config/style.scss
@@ -1 +1,15 @@
+@import './scss/themes/gruvbox.scss';
+
 @import './scss/panel.scss';
+@import './scss/panel/widgets/workspaces.scss';
+@import './scss/panel/widgets/windowTitle.scss';
+@import './scss/panel/widgets/volume.scss';
+@import './scss/panel/widgets/mpris.scss';
+@import './scss/panel/widgets/clock.scss';
+@import './scss/panel/widgets/sysTray.scss';
+
+
+* {
+  min-height: unset;
+}
+