diff --git a/src/styles/about.css b/src/styles/about.css
new file mode 100644
index 0000000..3d4e8a0
--- /dev/null
+++ b/src/styles/about.css
@@ -0,0 +1,78 @@
+#about-menu {
+  background-color: alpha(#000, 0.34);
+
+  box-shadow:
+    inset 0 -0.5px 0 0.5px alpha(#555, 0.7),
+    inset 0 0.5px 0 0.5px alpha(#777, 0.7);
+  border: 1px solid @border-subtle;
+  border-top: none;
+  border-radius: 1.25rem;
+  padding: 2rem;
+}
+
+#about-options {
+  background-color: alpha(#333, 0.9);
+  border-radius: apply(radius-md);
+  padding: 2rem;
+}
+
+#about-logo-box {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+#about-button-box {
+  padding: 1rem;
+}
+#vendor-label {
+  color: #999999;
+  margin-top: -1rem;
+}
+
+#info-label {
+  color: #888888;
+}
+#about-info-title-box {
+  padding-left: 4rem;
+}
+
+#about-name-label {
+  font-size: 24px;
+  margin: 0px;
+  font-weight: 600;
+}
+
+#about-date-label {
+  font-size: 11px;
+  margin: 0px;
+  color: #ddd;
+  font-weight: 400;
+  margin-bottom: 2rem;
+}
+
+#about-chip-title-label,
+#about-so-title-label,
+#about-mem-title-label {
+  font-size: 12px;
+  margin: 0px;
+  margin-right: 10px;
+  font-weight: 500;
+}
+
+#more-info-button {
+  background-color: #888888;
+  border-radius: apply(radius-xs);
+  padding: 0px 10px;
+  margin: 1px 2px;
+  transition: all 200ms ease-in-out;
+}
+#more-info-button:hover {
+  background-color: rgb(72, 130, 255);
+}
+
+#more-info-button label {
+  font-size: 12px;
+  margin: 0px;
+  font-weight: 400;
+  color: @text-main;
+}
diff --git a/src/styles/battery-widget.css b/src/styles/battery-widget.css
new file mode 100644
index 0000000..c042cd2
--- /dev/null
+++ b/src/styles/battery-widget.css
@@ -0,0 +1,157 @@
+#battery-window {
+  margin: 6px;
+  /* background-color: alpha(@text-main, 0.09); */
+  border: 1px solid @border-subtle;
+  box-shadow: inset 0 0 200px 0 @border-subtle;
+  border-radius: apply(radius-sm);
+}
+
+#battery-widget {
+  background: rgba(0, 0, 0, 0);
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.battery-main-title {
+  font-size: 16px;
+  font-weight: bold;
+
+  color: rgba(255, 255, 255, 0.95);
+  margin: 6px 10px;
+}
+
+.battery-power-source {
+  font-size: 0.9em;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.8);
+  margin: 0px 12px;
+}
+
+.battery-section-title {
+  font-size: 0.9em;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.9);
+  margin: 8px 12px 4px 12px;
+}
+
+.battery-energy-item {
+  margin: 4px 12px;
+  padding: 4px 0;
+}
+
+.battery-status-section {
+  /* background: rgba(255, 255, 255, 0.06); */
+  /* border-radius: apply(radius-md); */
+  padding: 2px;
+  /* margin: 8px 0; */
+  /* border: 1px solid rgba(255, 255, 255, 0.08); */
+}
+
+.battery-percentage {
+  font-size: 16px;
+  margin-right: 8px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.95);
+}
+
+#energy-mode-button-clickable {
+  background: transparent;
+  border: none;
+  border-radius: apply(radius-sm);
+  padding: 6px 12px;
+  margin: 1px 0;
+}
+
+#energy-mode-button-clickable:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+#energy-mode-icon {
+  border-radius: apply(radius-full);
+  padding: 4px;
+  margin-top: -2px;
+  margin-bottom: -2px;
+  margin-right: 6px;
+  margin-left: -6px;
+  background-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+#energy-mode-icon.connected {
+  background-color: @accent;
+  color: @text-main;
+}
+.battery-power-source {
+  font-size: 12px;
+  margin-bottom: -4px;
+  color: alpha(@text-main, 0.5);
+}
+.battery-section-title {
+  font-size: 14px;
+  color: alpha(@text-main, 0.7);
+  margin: 2px 0 0 8px;
+}
+.battery-power-mode {
+  font-size: 13px;
+}
+
+.battery-settings-button:hover {
+  margin-top: -5px;
+  background: alpha(@text-main, 0.1);
+  min-height: 30px;
+  border-radius: apply(radius-sm);
+}
+.battery-settings-button {
+  margin-top: -5px;
+  min-height: 30px;
+  border-radius: apply(radius-sm);
+}
+.battery-settings-button label {
+  font-weight: 500;
+  color: alpha(@text-main, 1);
+}
+#energy-mode-button:first-child {
+  margin-top: 0;
+}
+#energy-mode-button {
+  margin-top: -8px;
+  margin-bottom: 4px;
+  color: rgba(255, 255, 255, 0.85);
+}
+.gamemode-button {
+  font-size: 12px;
+  margin-left: -6px;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+#game-mode-button {
+  margin: 2px 0;
+}
+#game-mode-icon {
+  margin-left: -6px;
+}
+
+#game-mode-button-clickable {
+  background: transparent;
+  border: none;
+  border-radius: apply(radius-sm);
+  padding: 6px 12px;
+  margin: 1px 0;
+  /* min-height: 36px; */
+}
+
+#game-mode-button-clickable:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+#game-mode-icon {
+  border-radius: apply(radius-full);
+  padding: 4px;
+  margin-right: 8px;
+  background-color: rgba(255, 255, 255, 0.1);
+  color: rgba(255, 255, 255, 0.7);
+}
+
+#game-mode-icon.connected {
+  background-color: @accent;
+  color: @text-main;
+}
diff --git a/src/styles/constant.css b/src/styles/constant.css
new file mode 100644
index 0000000..8fe1a5a
--- /dev/null
+++ b/src/styles/constant.css
@@ -0,0 +1,31 @@
+@define-color bg alpha(#fff, 0.07);
+@define-color hover alpha(#fff, 0.1);
+@define-color border var(--outline);
+@define-color active alpha(#fff, 0.9);
+@define-color urgent alpha(var(--on-error), 0.7);
+
+/* New common colors */
+@define-color accent #007aff;
+@define-color accent-hover #0056cc;
+@define-color bg-lighter alpha(#fff, 0.12);
+@define-color bg-darker alpha(#000, 0.08);
+@define-color text-main #ffffff;
+@define-color text-secondary alpha(#fff, 0.6);
+@define-color text-dim #999;
+@define-color shadow-color alpha(#000, 0.3);
+
+/* Border and Shadow specific */
+@define-color border-subtle alpha(#111, 0.3);
+@define-color border-strong alpha(#111, 0.4);
+@define-color inner-shadow alpha(#000, 0.3);
+
+/* Constants */
+/* :vars replaced by defines */
+    @define radius-xs 4px;
+    @define radius-sm 8px;
+    @define radius-md 12px;
+    @define radius-lg 16px;
+    @define radius-xl 20px;
+    @define radius-full 999px;
+    @define transition-fast 0.15s;
+    @define transition-slow 0.3s;
diff --git a/src/styles/controlcenter.css b/src/styles/controlcenter.css
new file mode 100644
index 0000000..72fefa2
--- /dev/null
+++ b/src/styles/controlcenter.css
@@ -0,0 +1,1019 @@
+.title {
+  font-size: 16px;
+  font-family: "SF Pro Rounded";
+  font-weight: bold;
+}
+
+#control-center-menu {
+  background-color: transparent;
+  border-radius: apply(radius-md);
+  box-shadow: none;
+  margin: 0;
+}
+
+#separator {
+  min-height: 0.09rem;
+  margin: 3px 0;
+  background-color: alpha(@text-main, 0.2);
+  border-radius: apply(radius-sm);
+}
+
+/* #bluetooth-control-window { */
+/* #wifi-control-window, */
+#battery-control-window {
+  margin: 6px;
+  /* background-color: alpha(@text-main, 0.09); */
+  border: 1px solid @border-subtle;
+  box-shadow: inset 0 0 200px 0 @border-subtle;
+  border-radius: apply(radius-md);
+}
+
+#bluetooth-title,
+#wifi-title {
+  font-size: 16px;
+  font-weight: bold;
+}
+
+#control-center-widgets {
+  background-color: alpha(#010101, 0.01);
+  box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
+  /* border: 1px solid @border-strong; */
+  border-radius: apply(radius-md);
+  padding: 0.5rem;
+}
+
+#focus-widget {}
+
+#wb-widget,
+#brightness-menu {
+  background-color: @bg-darker;
+  box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
+  border: 1px solid @border-strong;
+  border-radius: apply(radius-md);
+}
+
+/* Widgets */
+#wifi-widget,
+#bluetooth-widget,
+#nightlight-widget {
+  min-width: 140px;
+  padding: 5px 0 0px 0;
+}
+
+.icon {
+  background-color: #2369ff;
+  font-size: 15px;
+  padding: 20px 20px;
+}
+
+#bluetooth-widget-label,
+#wifi-widget-label,
+#nightlight-widget-label {
+  font-size: 12px;
+  margin-left: 5px;
+  font-weight: 500;
+  color: @text-dim;
+}
+
+/* WiFi Password Dialog */
+#wifi-password-dialog {
+  background-color: transparent;
+}
+
+#wifi-dialog-background {
+  background-color: alpha(@text-main, 0.05);
+  border-radius: apply(radius-md);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 20px;
+  min-width: 450px;
+}
+
+#wifi-dialog-title-container {
+  /* margin-bottom: 12px; */
+}
+
+#wifi-dialog-icon {
+  color: @accent;
+  margin-right: 4px;
+}
+
+#wifi-dialog-title {
+  color: @text-main;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+#wifi-dialog-error {
+  color: #ff4444;
+  font-size: 12px;
+  font-weight: 500;
+  /* margin-bottom: 8px; */
+}
+
+#wifi-dialog-password-container {
+  margin: 5px 0;
+}
+
+#wifi-dialog-password-label {
+  color: @text-main;
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+#wifi-dialog-password-entry {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: apply(radius-xs);
+  padding: 8px 12px;
+  color: @text-main;
+  font-size: 13px;
+}
+
+#wifi-dialog-password-entry:focus {
+  border-color: @accent;
+  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+#wifi-dialog-show-password-box {
+  margin-top: 4px;
+}
+
+#wifi-dialog-show-password-button {
+  background-color: transparent;
+  border: none;
+  padding: 4px;
+  border-radius: apply(radius-xs);
+  min-width: 24px;
+  min-height: 24px;
+}
+
+#wifi-dialog-show-password-button:hover {
+  background-color: @hover;
+}
+
+#wifi-dialog-show-password-button image {
+  color: @text-main;
+}
+
+#wifi-dialog-show-password-label {
+  color: @text-main;
+  font-size: 12px;
+}
+
+#wifi-dialog-button-box {
+  margin-top: -15px;
+}
+
+#wifi-dialog-cancel-button,
+#wifi-dialog-join-button {
+  border-radius: apply(radius-xs);
+  font-size: 13px;
+  font-weight: 500;
+  min-width: 80px;
+  min-height: 30px;
+}
+
+#wifi-dialog-cancel-button {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: @text-main;
+}
+
+#wifi-dialog-cancel-button:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+#wifi-dialog-join-button {
+  background-color: @accent;
+  border: 1px solid @accent;
+  color: @text-main;
+}
+
+#wifi-dialog-join-button:hover {
+  background-color: @accent-hover;
+  border-color: @accent-hover;
+}
+
+#wifi-dialog-join-button.disabled {
+  opacity: 0.5;
+  background-color: #555555;
+  border-color: #555555;
+  color: #aaaaaa;
+}
+
+#wifi-dialog-join-button.disabled:hover {
+  background-color: #555555;
+  border-color: #555555;
+  color: #aaaaaa;
+}
+
+#bluetooth-widget-title {
+  font-size: 12px;
+  font-weight: 500;
+  color: @text-main;
+}
+
+/* #bluetooth-widget-top { */
+/*   padding-bottom: 10px; */
+/*   border-bottom: 1px solid alpha(#aaa, 0.3); */
+/* } */
+
+#device-icon {
+  border-radius: apply(radius-full);
+  padding: 5px;
+  margin-bottom: 2.5px;
+  margin-top: 2.5px;
+  margin-right: 10px;
+  background-color: #555;
+}
+
+#devices-title {
+  color: @text-secondary;
+}
+
+#device-icon.paired {
+  background-color: #888;
+}
+
+#device-icon.connected {
+  background-color: #2369ff;
+}
+
+#toggle-button {
+  min-width: 40px;
+  min-height: 20px;
+  background-color: #bababa;
+  border-radius: apply(radius-md);
+  padding: 2px;
+  transition: background-color 0.3s ease;
+}
+
+#toggle-button slider {
+  background-color: @text-main;
+  border-radius: apply(radius-full);
+  min-width: 16px;
+  min-height: 8px;
+  transition: background-color 0.1s cubic-bezier(0.5, 0.25, 0, 1.25);
+}
+
+#toggle-button:checked {
+  background-color: #4487f6;
+}
+
+/* #toggle-button:checked slider { */
+/*   background-color: @text-main; */
+/* } */
+/**/
+/* #toggle-button:checked image { */
+/*   opacity: 0; */
+/* } */
+
+.menu {
+  background-color: @bg-darker;
+  box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
+  border: 1px solid @border-strong;
+  border-radius: apply(radius-md);
+  margin: 5px;
+  /* background-color: alpha(@text-dim, 0.1); */
+  /* border: 0.5px solid alpha(#000, 0.4); */
+  /* border-radius: apply(radius-sm); */
+  padding: 1rem;
+}
+
+.title {
+  padding: 0;
+  font-weight: 500;
+  font-size: 12px;
+}
+
+#bluetooth-widget-name,
+#wifi-widget-name,
+#nightlight-widget-name {
+  margin-top: 6px;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.ct {
+  margin-left: 5px;
+}
+
+#vol-slider-box {
+  /* margin-bottom: 2px; */
+  margin-top: -10px;
+  /* border: 1px solid alpha(@text-main, 1); */
+}
+
+#volume-widget-slider {
+  /* margin-bottom: 2px; */
+}
+
+#volume-widget-icon {
+  font-size: 22px;
+  margin-top: -35px;
+  margin-right: -36px;
+  color: #000;
+}
+
+#brightness-widget-icon {
+  font-size: 15px;
+  margin-top: -27px;
+  margin-right: -29px;
+  color: #000;
+}
+
+#control-center-menu slider {
+  background: linear-gradient(135deg, @text-main 0%, #f0f1f2 100%);
+  border-color: #000;
+  min-width: 28px;
+  min-height: 28px;
+  margin: -2px;
+  border-radius: apply(radius-full);
+  /* background-image: none; */
+  /* background-color: transparent; */
+  /* min-width: 4px; */
+  /* min-height: 40px; */
+  /* margin: -9px; */
+}
+
+#control-center-menu slider:hover {
+  border-color: @text-dim;
+  min-width: 30px;
+  min-height: 30px;
+  margin: -3px;
+  border-radius: apply(radius-full);
+  /* background-image: none; */
+  /* background-color: transparent; */
+  /* min-width: 4px; */
+  /* min-height: 40px; */
+  /* margin: -9px; */
+}
+
+#control-center-menu scale {
+  background-color: transparent;
+  margin-top: 10px;
+  border-radius: apply(radius-xl);
+}
+
+#control-center-menu trough {
+  min-width: 25px;
+  border-radius: apply(radius-full);
+  background-color: alpha(#666, 0.5);
+  border: 1px solid alpha(#444, 0.3);
+}
+
+#control-center-menu highlight {
+  background: alpha(@text-main, 0.8);
+  border-radius: apply(radius-full);
+}
+
+#control-center-menu mark indicator {
+  background: none;
+  background-image: none;
+  color: alpha(@text-main, 0.2);
+}
+
+#control-center-menu mark label {
+  background: none;
+  background-image: none;
+  color: alpha(@text-main, 0.2);
+}
+
+/* Per-app volume control styles */
+#per-app-volume-control {
+  min-height: 140px;
+  min-width: 328px;
+  /* background-color: @shadow-color; */
+  /* background-color: alpha(@text-dim, 0.1); */
+  /* box-shadow: inset 0 0 200px 0 @border-subtle; */
+  /* border: 0.5px solid alpha(#000, 0.4); */
+  border-radius: apply(radius-sm);
+  padding: 1rem;
+
+  /* padding: 1rem; */
+}
+
+#apps-scrolled-container {
+  min-height: 120px;
+  min-width: 120px;
+}
+
+#back-button {
+  padding: 8px 12px;
+  background-color: @hover;
+  border-radius: apply(radius-sm);
+  border: none;
+  color: @text-main;
+  font-size: 13px;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
+}
+
+#back-button:hover {
+  background-color: alpha(@text-main, 0.18);
+}
+
+/* Apple-style app volume items */
+.apple-app-volume-item {
+  margin: 3px 0;
+  padding: 16px;
+  background-color: alpha(@text-main, 0.08);
+  border-radius: apply(radius-md);
+  border: 1px solid alpha(@text-main, 0.12);
+  transition: background-color apply(transition-fast);
+}
+
+.apple-app-volume-item:hover {
+  background-color: alpha(@text-main, 0.12);
+}
+
+.apple-app-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: @text-main;
+  margin-bottom: 4px;
+  letter-spacing: -0.01em;
+}
+
+/* Apple-style volume slider */
+#apple-volume-slider {
+  background-color: transparent;
+  margin-top: 4px;
+  margin-bottom: 4px;
+  min-height: 32px;
+}
+
+#apple-volume-slider trough {
+  min-width: 28px;
+  min-height: 6px;
+  border-radius: 3px;
+  background-color: alpha(@text-main, 0.25);
+  border: none;
+  box-shadow: inset 0 1px 2px alpha(#000, 0.2);
+}
+
+#apple-volume-slider highlight {
+  background: linear-gradient(90deg, @accent 0%, #0051d0 100%);
+  border-radius: 3px;
+  border: none;
+  box-shadow: 0 1px 3px alpha(@accent, 0.3);
+}
+
+#apple-volume-slider slider {
+  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
+  /* border: 2px solid alpha(@accent, 0.8); */
+  border-radius: apply(radius-full);
+  min-width: 20px;
+  min-height: 20px;
+  margin: -10px;
+  box-shadow:
+    0 2px 8px alpha(#000, 0.15),
+    0 1px 3px alpha(#000, 0.2);
+  transition: all 0.15s ease;
+}
+
+#apple-volume-slider slider:hover {
+  background: linear-gradient(135deg, @text-main 0%, #f0f1f2 100%);
+  border-color: @accent;
+  box-shadow:
+    0 4px 12px alpha(#000, 0.2),
+    0 2px 6px alpha(@accent, 0.3);
+  min-width: 22px;
+  min-height: 22px;
+  margin: -9px;
+}
+
+#apple-volume-slider slider:active {
+  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
+  min-width: 21px;
+  min-height: 21px;
+  margin: -9px;
+  box-shadow:
+    0 2px 6px alpha(#000, 0.25),
+    0 1px 3px alpha(@accent, 0.4);
+}
+
+/* Legacy app volume styles (fallback) */
+.app-volume-item {
+  margin: 8px 0;
+  padding: 8px;
+  background-color: alpha(@text-main, 0.05);
+  border-radius: apply(radius-xs);
+  border: 1px solid alpha(@text-main, 0.1);
+}
+
+.app-name {
+  font-size: 13px;
+  font-weight: 500;
+  color: @text-main;
+  margin-bottom: 5px;
+}
+
+#app-volume-slider {
+  background-color: transparent;
+  margin-top: 5px;
+}
+
+#app-volume-slider trough {
+  min-width: 20px;
+  border-radius: apply(radius-full);
+  background-color: alpha(#666, 0.5);
+  border: 1px solid alpha(#444, 0.3);
+}
+
+#app-volume-slider highlight {
+  background: alpha(#0078d4, 0.8);
+  border-radius: apply(radius-full);
+}
+
+#app-volume-slider slider {
+  background-color: @text-main;
+  padding: 2px;
+  min-width: 4px;
+  min-height: 18px;
+  border-radius: apply(radius-xl);
+}
+
+/* Circle button for per-app volume */
+#per-app-volume-button {
+  background-color: alpha(@text-main, 0.15);
+  border: 1px solid alpha(@text-dim, 0.6);
+  /* min-width: 33px; */
+  /* min-height: 30px; */
+  border-radius: apply(radius-full);
+}
+
+#per-app-volume-button:hover {
+  background-color: alpha(@text-main, 0.25);
+  /* border-color: @accent; */
+  box-shadow: 0 4px 12px alpha(#000, 0.2);
+}
+
+#per-app-volume-button:active {
+  background-color: alpha(@text-main, 0.2);
+  box-shadow: 0 1px 3px alpha(#000, 0.3);
+}
+
+#per-app-volume-icon {
+  background-color: alpha(@text-main, 0.15);
+
+  border: 2px solid alpha(@text-dim, 0.6);
+
+  border-radius: apply(radius-full);
+
+  min-width: 30px;
+}
+
+/* Apple-style seek bar for expanded player */
+#apple-seek-bar {
+  background-color: transparent;
+  margin-top: 8px;
+  margin-bottom: 4px;
+  min-height: 10px;
+}
+
+#apple-seek-bar trough {
+  min-width: 28px;
+  min-height: 3px;
+  border-radius: 1.5px;
+  background-color: alpha(@text-main, 0.3);
+  border: none;
+  box-shadow: inset 0 1px 1px alpha(#000, 0.1);
+}
+
+#apple-seek-bar highlight {
+  background: @accent;
+  border-radius: 1.5px;
+  border: none;
+  box-shadow: 0 0 2px alpha(@accent, 0.4);
+}
+
+#apple-seek-bar slider {
+  background: #ffffff;
+  border: 1px solid alpha(@accent, 0.8);
+  border-radius: apply(radius-full);
+  min-width: 12px;
+  min-height: 12px;
+  margin: -4.5px;
+  box-shadow:
+    0 1px 3px alpha(#000, 0.2),
+    0 0 0 1px alpha(@text-main, 0.8);
+  transition: all 0.1s ease;
+}
+
+#apple-seek-bar slider:hover {
+  background: @text-main;
+  border-color: @accent;
+  min-width: 14px;
+  min-height: 14px;
+  margin: -5.5px;
+  box-shadow:
+    0 2px 6px alpha(#000, 0.25),
+    0 0 0 2px alpha(@accent, 0.3);
+}
+
+#apple-seek-bar slider:active {
+  background: #f8f9fa;
+  min-width: 13px;
+  min-height: 13px;
+  margin: -5px;
+  box-shadow:
+    0 1px 3px alpha(#000, 0.3),
+    0 0 0 2px alpha(@accent, 0.5);
+}
+
+/* macOS-style expanded player - more compact */
+#macos-outer-player-box {
+  min-height: 80px;
+  /* Reduced height */
+  min-width: 345px;
+  /* Match the standard player width */
+  /* margin: 10px; */
+  padding: 10px;
+  /* background-color: alpha(#000, 0.4); */
+}
+
+#macos-main-section {
+  margin-left: 5px;
+}
+
+#macos-album-cover-image image {
+  min-width: 70px;
+  min-height: 70px;
+  border-radius: 9px;
+}
+
+#macos-album-image {
+  min-width: 70px;
+  min-height: 70px;
+  border-radius: 9px;
+  background-position: center;
+  background-size: cover;
+  box-shadow: 0 2px 8px alpha(#000, 0.3);
+}
+
+#macos-album-image-no {
+  min-width: 90px;
+  min-height: 90px;
+  border-radius: 9px;
+  margin-left: 12px;
+  background-position: center;
+  background-size: cover;
+  box-shadow: 0 2px 8px alpha(#000, 0.3);
+}
+
+#macos-album-image image {
+  min-width: 70px;
+  min-height: 70px;
+  border-radius: 9px;
+  box-shadow: 0 2px 8px alpha(#000, 0.3);
+}
+
+/* Track info container that expands to fill available space */
+#macos-track-info {
+  margin-top: 5px;
+  margin-left: 15px;
+  margin-right: 15px;
+}
+
+#macos-player-title {
+  font-weight: 600;
+  font-size: 16px;
+  color: @text-main;
+  margin-bottom: 2px;
+}
+
+#macos-player-artist {
+  font-weight: 400;
+  margin-top: -2px;
+  font-size: 13px;
+  color: alpha(@text-dim, 0.8);
+}
+
+#macos-player-album {
+  font-weight: 400;
+  margin-top: -4px;
+  font-size: 13px;
+  color: alpha(@text-dim, 0.8);
+  margin-bottom: 8px;
+}
+
+/* macOS seek bar styling */
+#macos-seek-bar {
+  background-color: transparent;
+  margin: 8px 0 4px 0;
+  min-height: 10px;
+}
+
+#macos-seek-bar trough {
+  min-width: 200px;
+
+  min-height: 2px;
+  border-radius: 2px;
+  background-color: alpha(@text-main, 0.25);
+  border: none;
+}
+
+#macos-seek-bar highlight {
+  background: @text-main;
+  border-radius: 2px;
+  border: none;
+}
+
+#macos-seek-bar slider {
+  background: #ffffff;
+  border: none;
+  border-radius: 20%;
+  min-width: 1px;
+  min-height: 8px;
+  margin: -3px;
+  box-shadow: 0 1px 3px alpha(#000, 0.3);
+  transition: all 0.1s ease;
+}
+
+#macos-seek-bar slider:hover {
+  min-width: 4px;
+  min-height: 14px;
+  margin: -5px;
+  box-shadow: 0 2px 6px alpha(#000, 0.4);
+}
+
+#macos-position-label,
+#macos-length-label {
+  font-size: 11px;
+  color: alpha(@text-dim, 0.9);
+  font-weight: 400;
+}
+
+/* macOS control buttons - more compact */
+#macos-button-box {
+  margin-top: -1px;
+  /* Reduced top margin */
+}
+
+#macos-control-button {
+  background: transparent;
+  border: none;
+  border-radius: apply(radius-full);
+  min-width: 28px;
+  /* Slightly smaller */
+  opacity: 0.7;
+  min-height: 28px;
+  padding: 5px;
+  /* Reduced padding */
+  color: @text-main;
+  transition: all apply(transition-fast) ease;
+}
+
+#macos-control-button:hover {
+  opacity: 1;
+}
+
+#macos-play-button {
+  background: transparent;
+  border: none;
+  border-radius: apply(radius-full);
+  min-width: 36px;
+  /* Slightly smaller */
+  opacity: 0.7;
+  min-height: 36px;
+  padding: 7px;
+  /* Reduced padding */
+  color: @text-main;
+  transition: all apply(transition-fast) ease;
+}
+
+#macos-play-button:hover {
+  opacity: 1;
+}
+
+/* macOS player switcher dots - compact horizontal layout */
+#macos-stack-buttons-box {
+  margin: 2px 5px;
+  /* Minimal margins */
+}
+
+.macos-switcher-dot {
+  background: alpha(@text-main, 0.3);
+  /* border: none; */
+  border-radius: apply(radius-full);
+  min-width: 12px;
+  /* Smaller dots */
+  min-height: 12px;
+  margin: 2px;
+  /* Reduced margins */
+  /* transition: all 0.2s ease; */
+}
+
+.macos-switcher-dot:hover {
+  background: alpha(@text-main, 0.5);
+}
+
+.macos-switcher-dot.active {
+  background: @text-main;
+  box-shadow: 0 0 0 1px alpha(@text-main, 0.3);
+  /* Smaller glow */
+}
+
+/* Per app-volume-item */
+
+.compact-app-volume-item {
+  padding-bottom: 5px;
+  padding-right: 14px;
+  border-bottom: 1px solid @hover;
+}
+
+#app-icon {
+  margin-top: 8px;
+}
+
+.app-name-compact {
+  font-size: 14px;
+  font-weight: bold;
+  margin-top: 8px;
+}
+
+#compact-app-volume-slider scale {
+  margin-right: 8px;
+  padding-right: 8px;
+}
+
+#expanded-seek-bar {
+  background-color: transparent;
+  margin: 8px 0 4px 0;
+  min-height: 10px;
+}
+
+#expanded-seek-bar trough {
+  min-width: 200px;
+
+  min-height: 2px;
+  border-radius: 2px;
+  background-color: alpha(@text-main, 0.25);
+  border: none;
+}
+
+#expanded-seek-bar highlight {
+  background: #ffffff;
+  border-radius: 2px;
+  border: none;
+}
+
+#expanded-seek-bar slider {
+  background: #ffffff;
+  border: none;
+  border-radius: 20%;
+  min-width: 1px;
+  min-height: 10px;
+  margin: -3px;
+  box-shadow: 0 1px 3px alpha(#000, 0.3);
+  transition: all 0.1s ease;
+}
+
+#expanded-seek-bar slider:hover {
+  min-width: 4px;
+  min-height: 14px;
+  margin: -5px;
+  box-shadow: 0 2px 6px alpha(#000, 0.4);
+}
+
+/* macOS-style WiFi interface */
+#wifi-connections,
+#bluetooth-connections {
+  /* background-color: rgba(255, 255, 255, 0.08); */
+  background-color: alpha(@text-main, 0.05);
+  box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
+  border: 1px solid @border-strong;
+  border-radius: apply(radius-sm);
+  /* padding: 0.5rem; */
+  /* border-radius: apply(radius-md); */
+  padding: 10px;
+}
+
+/* WiFi network slots - macOS style */
+#wifi-network-slot button {
+  border-radius: apply(radius-sm);
+  padding: 4px 4px;
+  /* min-width: 280px; */
+  margin: 2px 0;
+}
+
+#wifi-network-slot button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+/* WiFi-specific device icon styles */
+#wifi-connections #device-icon {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+#wifi-connections #device-icon.connected {
+  background-color: @accent;
+  color: @text-main;
+}
+
+#wifi-network-name {
+  color: @text-main;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+#wifi-lock-icon {
+  color: rgba(255, 255, 255, 0.6);
+  margin-left: 8px;
+}
+
+/* Other Networks and Settings buttons */
+#wifi-other-button {
+  background: transparent;
+  border: none;
+  padding: 8px 6px;
+  margin-bottom: -12px;
+  margin-top: -6px;
+  border-radius: apply(radius-sm);
+  /* transition: background-color 0.2s ease; */
+}
+
+#wifi-other-button:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+#wifi-other-button:last-child {
+  margin-bottom: 3px;
+}
+
+#device-button {
+  /* background-color: #000; */
+  border-radius: apply(radius-sm);
+}
+
+.device-slot:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.button-hovered {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+#wifi-other-device label,
+#wifi-other-button label {
+  font-size: 12px;
+  font-weight: bold;
+}
+
+#app-volume-header {
+  font-size: 16px;
+  padding-left: 5px;
+  margin-top: -2px;
+  font-weight: bold;
+  color: @text-main;
+}
+
+.wifi-icon-box {
+  background-color: #aaaaaa;
+  border-radius: apply(radius-full);
+  padding: 2px;
+  /* margin-right: 8px; */
+}
+
+.wifi-icon-box-connected {
+  background-color: @accent;
+  border-radius: apply(radius-full);
+  padding: 2px;
+  /* margin-right: 8px; */
+}
+
+/* #flight-icon { */
+/*   margin-left: -10px; */
+/* } */
+
+.title-widget {
+  /* margin-top: -14px; */
+  /* margin-left: 5px; */
+  font-size: 13px;
+  font-family: "SF Pro Rounded";
+  font-weight: bold;
+}
+
+.status-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: #aaa;
+  /* margin-top: -28px; */
+  /* margin-left: 5px; */
+  font-family: "SF Pro Rounded";
+  /* font-weight: bold; */
+  /* margin-bottom: 2px; */
+}
+
+#app-control-box {
+  min-width: 100px;
+}
+
+#caffeine-widget,
+#flight-widget {
+  padding: 0px 0 5px 0;
+  min-width: 50px;
+}
diff --git a/src/styles/dock.css b/src/styles/dock.css
new file mode 100644
index 0000000..304a33a
--- /dev/null
+++ b/src/styles/dock.css
@@ -0,0 +1,99 @@
+#dock {
+    background-color: @bg;
+    padding: 4px 4px;
+    margin: 4px 4px;
+    border: none;
+    border-radius: apply(radius-lg);
+    transition: all apply(transition-fast) cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+#dock.shown {
+    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+#dock_item_main_container {
+    transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1);
+}
+
+#dock_item.shown:hover #dock_item_main_container {
+    margin-top: -12px;
+}
+
+#dock_item.shown.semi_hovered #dock_item_main_container {
+    margin-top: -7px;
+}
+
+/**/
+/* #dock_item.shown.semi_hovered #dock_item_indicator { */
+/*   margin-top: 11px; */
+/* } */
+
+/* #dock_item.shown.activated:hover #dock_item_main_container { */
+/*   margin-top: -12px; */
+/* } */
+/**/
+/* #dock_item.shown.activated:hover #dock_item_indicator { */
+/*   margin-top: 16px; */
+/* } */
+/**/
+/* #dock_item.shown.activated #dock_item_main_container { */
+/*   margin-top: -4px; */
+/* } */
+
+#dock_item.shown.activated #dock_item_icon {
+    opacity: 1;
+    /* background-color: #01458e; */
+}
+
+/* #dock_item.shown.activated #dock_item_indicator { */
+/*   min-width: 4px; */
+/*   margin-top: 8px; */
+/*   background-color: #aac7ff; */
+/* } */
+
+#dock_item_icon {
+    border-radius: 13px;
+    opacity: 0.7;
+    transition: all apply(transition-fast) cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+/* #dock_item_indicator { */
+/*   transition: all 0.15s ease-out; */
+/*   min-height: 4px; */
+/*   border-radius: apply(radius-xs); */
+/* } */
+
+#dock_item {
+    transition: margin 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
+}
+
+#dock_item.shown {
+    padding-left: 4px;
+    opacity: 1;
+}
+
+#dock_item.shown:first-child {
+    padding-left: 0px;
+}
+
+.dock_separator {
+    transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
+    min-width: 1.5px;
+    min-height: 50px;
+    margin: 0px 4px;
+    border-radius: 2px;
+    background-color: @accent;
+}
+
+.dock_separator.hidden {
+    min-width: 0px;
+    background-color: transparent;
+    margin: 0px;
+}
+
+/* #dock_item.shown:not(.activated) { */
+/*   min-width: 0px; */
+/*   min-height: 0px; */
+/*   margin-top: 0px; */
+/*   background-color: transparent; */
+/* } */
\ No newline at end of file
diff --git a/src/styles/dropdown.css b/src/styles/dropdown.css
new file mode 100644
index 0000000..f788bbf
--- /dev/null
+++ b/src/styles/dropdown.css
@@ -0,0 +1,61 @@
+#dropdown-menu {
+  background-color: transparent;
+
+  border-radius: 0.75rem;
+  margin: 0;
+}
+
+#dropdown-options {
+  background-color: @shadow-color;
+  box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
+  border: 1px solid @border-strong;
+  border-radius: 0.75rem;
+  padding: 0.5rem;
+}
+
+#dropdown-option {
+  background-color: transparent;
+  border-radius: apply(radius-xs);
+  padding: 0px 10px;
+  margin: 1px 2px;
+  transition: all 0ms ease-in-out;
+}
+
+#dropdown-option:hover {
+  transition: all 20ms ease-in-out;
+  color: #222;
+  background-color: alpha(#2369ff, 1);
+}
+
+#dropdown-option-label {
+  font-size: 13px;
+  margin: 0px;
+  color: @text-main;
+  font-weight: 400;
+}
+
+#dropdown-option-label:first-child {
+  padding-right: 5rem;
+}
+
+#dropdown-option:hover #dropdown-option-keybind {
+  color: @text-main;
+}
+
+#dropdown-option-keybind {
+  font-weight: 500;
+  color: #aaa;
+}
+
+/* Divider */
+
+#dropdown-divider-box {
+  background-color: transparent;
+  border-radius: apply(radius-xs);
+  padding: 0px 10px;
+  margin: 2px;
+}
+#dropdown-divider {
+  border-bottom: 1px solid alpha(#aaa, 0.3);
+  margin: 2px 0;
+}
diff --git a/src/styles/launcher.css b/src/styles/launcher.css
new file mode 100644
index 0000000..ba899ca
--- /dev/null
+++ b/src/styles/launcher.css
@@ -0,0 +1,230 @@
+#launcher {
+    background-color: @shadow-color;
+    padding: 0;
+    border-radius: apply(radius-md);
+    min-width: 640px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+/* #launcher-search { */
+/*   color: #000; */
+/* } */
+#header_box {
+    padding: 0px 20px 0 20px;
+    color: #000;
+}
+
+#close-button,
+#config-button {
+    background-color: transparent;
+    border-radius: apply(radius-xs);
+    padding: 6px;
+    transition: all 0.15s ease;
+}
+
+#close-button:hover,
+#close-button:focus,
+#config-button:hover,
+#config-button:focus {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: apply(radius-xs);
+}
+
+#close-button.focused,
+#config-button.focused {
+    background-color: rgba(0, 122, 255, 0.2);
+    border-radius: apply(radius-xs);
+    box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.4);
+}
+
+#close-button.focused #close-label {
+    color: @accent;
+}
+
+#config-button.focused #config-label {
+    color: @accent;
+}
+
+#close-button:active {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: apply(radius-xs);
+}
+
+#close-label {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 18px;
+}
+
+#close-button:active #close-label {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+#config-button:active {
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: apply(radius-xs);
+}
+
+#config-label {
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 18px;
+}
+
+#config-button:active #config-label {
+    color: rgba(255, 255, 255, 0.9);
+}
+
+#launcher-icon-label {
+    font-size: 20px;
+    padding: 6px;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+#launcher-search {
+    font-weight: 400;
+    font-size: 36px;
+    background-color: transparent;
+    color: rgba(255, 255, 255, 0.95);
+    border: none;
+    border-radius: 0;
+    padding: 12px 0;
+    margin: 0;
+}
+
+#launcher-search:focus {
+    background-color: transparent;
+    box-shadow: none;
+    border: none;
+}
+
+#launcher-search selection {
+    color: white;
+    background-color: rgba(0, 122, 255, 0.8);
+}
+
+#launcher-results-scroll {
+    margin: 0;
+    border-radius: 0;
+    background: transparent;
+    padding: 0 20px 20px 20px;
+}
+
+#launcher-results-scroll scrollbar {
+    border-radius: 0;
+    background-color: transparent;
+    padding: 0;
+    margin: 0;
+    min-width: 0;
+}
+
+#launcher-results-scroll scrollbar slider {
+    border-radius: 2px;
+    min-width: 4px;
+    min-height: 20px;
+    background-color: rgba(255, 255, 255, 0.3);
+    margin: 0;
+}
+
+#launcher-results-scroll scrollbar:hover slider {
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+#launcher-results {
+    background: transparent;
+    margin-top: 8px;
+}
+
+#launcher-result-item {
+    border-radius: apply(radius-sm);
+    padding: 12px 16px;
+    margin: 2px 0;
+    min-height: 64px;
+    transition: all apply(transition-fast);
+    background: transparent;
+}
+
+@keyframes loadSlot {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}
+
+#launcher-result-item:focus,
+#launcher-result-item:selected,
+#launcher-result-item:hover,
+#launcher-result-item.selected {
+    border-radius: apply(radius-sm);
+    background-color: alpha(@accent, 0.8);
+    padding: 12px 16px;
+    margin: 2px 0;
+}
+
+#launcher-result-item.selected #result-item-title {
+    color: white;
+    font-weight: 600;
+}
+
+#launcher-result-item.selected #result-item-subtitle {
+    color: rgba(255, 255, 255, 0.8);
+}
+
+#launcher-result-item.selected #result-item-plugin {
+    color: rgba(255, 255, 255, 0.6);
+}
+
+#result-item-main {
+    min-height: 56px;
+}
+
+#launcher-result-item {
+    min-height: 56px;
+}
+
+#result-item-icon {
+    min-width: 56px;
+    min-height: 56px;
+    margin-right: 16px;
+    border-radius: apply(radius-md);
+}
+
+#result-item-title {
+    font-size: 18px;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.95);
+    margin-top: 4px;
+    margin-bottom: 2px;
+}
+
+#result-item-subtitle {
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.6);
+    margin-bottom: 4px;
+}
+
+#result-item-plugin {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.4);
+    font-style: normal;
+    margin-bottom: 4px;
+    opacity: 1;
+    font-weight: 400;
+}
+
+#network-password-entry {
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.05);
+    color: rgba(255, 255, 255, 0.9);
+    padding: 12px;
+    border-radius: apply(radius-sm);
+    margin-bottom: 8px;
+    font-size: 14px;
+}
+
+#network-password-entry:focus {
+    border: 1px solid alpha(@accent, 0.6);
+    background: rgba(255, 255, 255, 0.1);
+    box-shadow: 0 0 0 3px alpha(@accent, 0.2);
+}
diff --git a/src/styles/lock.css b/src/styles/lock.css
new file mode 100644
index 0000000..d3c8c71
--- /dev/null
+++ b/src/styles/lock.css
@@ -0,0 +1,66 @@
+#lockscreen-bg {
+  background-size: cover;
+}
+#indicator-box {
+  margin-right: 10px;
+  margin-top: 4px;
+}
+#container-box {
+  min-height: 50px;
+  min-width: 250px;
+  transition: all 0.7s ease-in-out;
+}
+#password-entry {
+  background-color: alpha(@text-main, 0.4);
+  border-radius: apply(radius-xl);
+  color: white;
+  min-width: 220px;
+  min-height: 40px;
+  padding-right: 5px;
+  padding-left: 5px;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.7s ease-in-out;
+}
+#profile-box {
+  margin-bottom: 10px;
+}
+#username {
+  font-size: 21px;
+  font-weight: bold;
+  margin-top: 5px;
+  transition: all 0.7s ease-in-out;
+}
+#lock-date label {
+  background-color: transparent;
+  color: alpha(@text-main, 0.6);
+  border: none;
+  font-size: 30px;
+  margin-top: 80px;
+  font-weight: bold;
+}
+#lock-clock label {
+  background-color: transparent;
+  color: alpha(@text-main, 0.6);
+  border: none;
+  font-size: 120px;
+  margin-top: -20px;
+  font-weight: bold;
+}
+
+#face-icon image {
+  margin-bottom: 10px;
+  border-radius: apply(radius-full);
+}
+#face-icon {
+  padding-bottom: 10px;
+}
+
+#unlock-box {
+  margin-bottom: 40px;
+}
+#unlock-text {
+  font-size: 15px;
+  color: alpha(@text-main, 0.6);
+  font-weight: bold;
+}
diff --git a/src/styles/main.css b/src/styles/main.css
new file mode 100644
index 0000000..e4abf1b
--- /dev/null
+++ b/src/styles/main.css
@@ -0,0 +1,27 @@
+@import url("./colors.css");
+@import url("./constant.css");
+@import url("./panel.css");
+@import url("./dock.css");
+@import url("./switcher.css");
+@import url("./osd.css");
+@import url("./controlcenter.css");
+@import url("./notification.css");
+@import url("./dropdown.css");
+@import url("./about.css");
+@import url("./notification-center.css");
+@import url("./player.css");
+@import url("./widgets.css");
+@import url("./tray.css");
+@import url("./battery-widget.css");
+@import url("./lock.css");
+@import url("./todo.css");
+@import url("./launcher.css");
+@import url("./switcher.css");
+@import url("./settings.css");
+
+* {
+    all: unset;
+    color: var(--foreground);
+    font-size: unset;
+    font-family: "SF Pro Rounded";
+}
\ No newline at end of file
diff --git a/src/styles/notification-center.css b/src/styles/notification-center.css
new file mode 100644
index 0000000..001b705
--- /dev/null
+++ b/src/styles/notification-center.css
@@ -0,0 +1,297 @@
+#noti-center-box {
+  background-color: transparent;
+
+  /* border: 1px solid @border-subtle; */
+  border-radius: apply(radius-xl);
+  margin-right: 10px;
+  /* padding: 20px; */
+  /* margin: 6px; */
+}
+
+#noti-clear-button {
+  /* min-width: 10px; */
+  background-color: alpha(#1c2328, 0.05);
+  min-height: 25px;
+  min-width: 70px;
+  border: 1px solid #525155;
+  border-radius: apply(radius-md);
+  margin-top: 10px;
+}
+
+#notif-clear-button label {
+  font-size: 15px;
+}
+
+#noti-clear-button:hover {
+  background-color: alpha(@text-main, 0.09);
+}
+
+/* Expandable notification group styles */
+#notification-group {
+  margin: 4px 0;
+}
+
+/* Single notification (no stacking) */
+#single-notification-content {
+  background-color: alpha(#1c2328, 0.05);
+  border: 1.5px solid #525155;
+  border-radius: apply(radius-md);
+  padding: 12px;
+  transition: all 0.2s ease;
+}
+
+#single-notification-content:hover {
+  background-color: alpha(@text-dim, 0.9);
+  border: 1.5px solid #525155;
+}
+
+/* Stacked notification container */
+#notification-stack-container {
+  background-color: transparent;
+  margin: 8px 0;
+}
+
+/* Bottom shadow layer (deepest) - offset to show stacking from below */
+#stack-shadow-bottom {
+  background-color: alpha(#1c2328, 0.05);
+  border-top: 1px solid #525155;
+  border-radius: apply(radius-md);
+  opacity: 1;
+  min-height: 16px;
+  margin-left: 20px;
+  margin-right: -4px;
+  margin-bottom: -10px;
+}
+
+/* Middle shadow layer */
+#stack-shadow-middle {
+  background-color: alpha(#1c2328, 0.05);
+
+  border-top: 1px solid #525155;
+  border-radius: apply(radius-md);
+  opacity: 1;
+  min-height: 20px;
+  margin-left: 10px;
+  margin-right: -2px;
+  margin-bottom: -14px;
+}
+
+/* Main notification content (top layer) */
+#stack-main-notification {
+  background-color: alpha(#1c2328, 0.05);
+
+  border: 1.2px solid #525155;
+  border-radius: apply(radius-md);
+  padding: 12px;
+  transition: all 0.2s ease;
+}
+
+/* Hover effects for stacked notifications */
+#notification-stack-container:hover #stack-main-notification {
+  background-color: alpha(#525155, 0.1);
+  border: 1px solid #525155;
+}
+
+#notification-stack-container:hover #stack-shadow-middle {
+  opacity: 0.7;
+}
+
+#notification-stack-container:hover #stack-shadow-bottom {
+  opacity: 0.5;
+}
+
+/* Collapsed notification state */
+#notification-content-collapsed {
+  background-color: alpha(#000, 0.05);
+  border: 1px solid #525155;
+  border-radius: apply(radius-md);
+  padding: 12px;
+  margin: 2px 0;
+  transition: all 0.2s ease;
+}
+
+#notification-content-collapsed:hover {
+  background-color: alpha(#525155, 0.1);
+  border: 1px solid #525155;
+}
+
+/* Notification count badge */
+#notification-count-label {
+  background-color: alpha(@text-main, 0.2);
+  color: rgba(255, 255, 255, 0.8);
+  border-radius: 10px;
+  padding: 2px 6px;
+  font-size: 10px;
+  font-weight: 500;
+  min-width: 16px;
+}
+
+/* Expanded notification group header */
+#notification-group-header {
+  background-color: alpha(#000, 0.05);
+  border: 1px solid #525155;
+  border-radius: 12px 12px 0 0;
+  padding: 8px 12px;
+  margin: 2px 0 0 0;
+}
+
+#notification-group-title {
+  color: @text-main;
+  font-weight: bold;
+  font-size: 14px;
+}
+
+#notification-show-less {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  border: 1px solid alpha(@text-main, 0.2);
+  border-radius: apply(radius-xs);
+  padding: 2px 8px;
+  font-size: 11px;
+  margin-right: 8px;
+}
+
+#notification-show-less:hover {
+  background-color: alpha(@text-dim, 0.7);
+  color: rgba(255, 255, 255, 0.9);
+}
+
+#notification-close-all {
+  background-color: transparent;
+  color: rgba(255, 255, 255, 0.7);
+  border: 1px solid alpha(@text-main, 0.2);
+  border-radius: apply(radius-xs);
+  padding: 2px 8px;
+  font-size: 12px;
+  min-width: 24px;
+}
+
+#notification-close-all:hover {
+  background-color: alpha(#ff5555, 0.2);
+  color: rgba(255, 255, 255, 0.9);
+  border-color: alpha(#ff5555, 0.4);
+}
+
+/* Expanded notification list */
+#notification-group-expanded {
+  border: 1px solid #525155;
+  border-top: none;
+  border-radius: 0 0 12px 12px;
+  /* background-color: alpha(#000, 0.02); */
+}
+
+/* Stacked notification group styles */
+.stacked-notification-group {
+  margin: 4px 0;
+}
+
+.stacked-notification-container {
+}
+
+.stacked-notification-item {
+  background-color: alpha(#000, 0.05);
+  border: 1px solid #525155;
+  border-radius: apply(radius-md);
+  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+}
+
+#notif-clear-btn {
+  border-radius: 10px;
+  font-size: 12px;
+  padding: 2px;
+}
+
+#notif-clear-btn:hover {
+  background-color: var(--surface-bright);
+}
+
+#stacked-notification-item:hover {
+  background-color: alpha(#525155, 0.1);
+  border: 1px solid #525155;
+}
+
+/* Stack count indicator */
+#stack-count-indicator {
+  font-size: 10px;
+  color: rgba(255, 255, 255, 0.7);
+  margin: 2px 8px;
+  font-weight: 500;
+}
+
+/* Expanded view styles - notifications use their default styling */
+#expanded-notification-list {
+  margin-top: 8px;
+}
+
+/* Make expanded notifications clickable with subtle hover effect */
+#expanded-notification-list:hover {
+  background-color: alpha(#111, 0.9);
+  border-radius: apply(radius-sm);
+  transition: background-color 0.2s ease;
+}
+
+#notification-group-title {
+  font-size: 19px;
+  margin: 10px;
+  font-weight: bold;
+}
+#notification-show-less {
+  background-color: alpha(#1c2328, 0.05);
+  font-size: 12px;
+  margin: 10px;
+  border-radius: apply(radius-md);
+}
+
+#notification-close-all {
+  margin: 10px 10px 10px 0;
+  background-color: alpha(#1c2328, 0.05);
+  border-radius: apply(radius-md);
+}
+
+#notif-close-button {
+  background-color: transparent;
+}
+
+#notification-group-expanded {
+  background-color: transparent;
+  border: none;
+}
+
+#notification-content {
+  background-color: transparent;
+}
+#notification-count-label {
+  background-color: transparent;
+  color: white;
+  font-size: 13px;
+}
+#notification-centre-notifs {
+  background-color: alpha(#1c2328, 0.05);
+  min-height: 40px;
+  padding: 10px;
+  border: 1px solid #525155;
+  border-radius: apply(radius-md);
+}
+
+#notification-centre-notifs:last-child {
+  margin-bottom: 10px;
+}
+
+#notification-close-header {
+  margin-right: 10px;
+}
+#notification-close,
+#notification-close-header {
+  min-width: 23px;
+  min-height: 23px;
+  border-radius: apply(radius-full);
+}
+#notification-close:hover {
+  background-color: alpha(#666, 0.8);
+  min-width: 23px;
+  min-height: 23px;
+  border-radius: apply(radius-full);
+}
+#notification-close-summery:hover .notification-close-header button {
+  background-color: transparent;
+}
diff --git a/src/styles/notification.css b/src/styles/notification.css
new file mode 100644
index 0000000..a9f91ed
--- /dev/null
+++ b/src/styles/notification.css
@@ -0,0 +1,88 @@
+#notification {
+  padding: 10px;
+  background-color: alpha(@text-main, 0.03);
+  border-radius: apply(radius-sm);
+  margin-top: 10px;
+  margin-right: 10px;
+  /* margin: 5px; */
+}
+
+#notification-close-button {
+  background-color: alpha(@text-dim, 0.3);
+  border-radius: apply(radius-sm);
+}
+#notification-close-button:hover {
+  background-color: alpha(@accent, 0.9);
+}
+
+#notification-action-buttons button {
+  background-color: alpha(@text-dim, 0.3);
+  padding: 4px;
+  border-radius: apply(radius-sm);
+  transition: background-color apply(transition-fast);
+}
+
+#notification-action-buttons button:hover {
+  background-color: alpha(@accent, 0.9);
+}
+
+#notification-action-buttons button:active {
+  background-color: var(--primary);
+}
+
+#notification-action-buttons button:active #button-label {
+  color: var(--shadow);
+}
+
+#notification-icon {
+  border-radius: apply(radius-lg);
+}
+
+#notification-image {
+  border-radius: apply(radius-lg);
+  color: var(--on-surface);
+}
+
+#notification-summary,
+#button-label {
+}
+
+#notification-summary {
+  font-weight: bold;
+  font-size: 16px;
+  /* color: var(--primary); */
+}
+
+#notification-app-name {
+  color: var(--outline);
+  font-weight: bold;
+}
+
+#action-button {
+  margin-top: 8px;
+}
+
+#notif-close-button {
+  background-color: var(--surface);
+  border-radius: apply(radius-lg);
+  padding: 4px;
+  transition: background-color apply(transition-fast);
+}
+
+#notif-close-button:hover,
+#notif-close-button:focus {
+  background-color: var(--surface-bright);
+}
+
+#notif-close-button:active {
+  background-color: var(--red-dim);
+}
+
+#notif-close-label {
+  color: var(--red-dim);
+  font-size: 20px;
+}
+
+#notif-close-button:active #notif-close-label {
+  color: var(--shadow);
+}
diff --git a/src/styles/osd.css b/src/styles/osd.css
new file mode 100644
index 0000000..f23d697
--- /dev/null
+++ b/src/styles/osd.css
@@ -0,0 +1,37 @@
+#osd-container {
+    background-color: alpha(@text-main, 0.09);
+    padding: 12px 20px;
+    margin: 70px;
+    min-width: 180px;
+    min-height: 200px;
+    border-radius: apply(radius-lg);
+}
+
+#osd-container scale {
+    min-width: 180px;
+}
+
+#osd-container trough {
+    background: var(--surface);
+    min-height: 15px;
+    margin-right: 4px;
+    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+    border-radius: apply(radius-lg);
+}
+
+#osd-container trough highlight {
+    border-radius: apply(radius-full);
+    background: var(--primary);
+    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+#osd-container.muted trough highlight,
+#osd-container.muted slider,
+#osd-container scale.muted trough highlight,
+#osd-container scale.muted slider {
+    background-color: var(--surface-bright);
+}
+
+#osd-image.muted {
+    color: var(--outline);
+}
\ No newline at end of file
diff --git a/src/styles/panel.css b/src/styles/panel.css
new file mode 100644
index 0000000..edb2f19
--- /dev/null
+++ b/src/styles/panel.css
@@ -0,0 +1,73 @@
+#panel {
+    background-color: @bg;
+    margin: -4px 0;
+    transition: all 120ms ease-in-out;
+}
+
+#modules-left,
+#modules-right {
+    margin: 0 5px;
+    padding: 2px 0;
+}
+
+#panel-button:hover,
+#panel-button.active,
+#battery-button:hover,
+#battery-button.active,
+#network-button:hover,
+#network-button.active,
+#bt-button:hover,
+#bt-button.active,
+#tray-button:hover,
+#tray-button.active,
+#global-menu:hover,
+#global-menu.active,
+#workspaces>button:hover {
+    background-color: @hover;
+}
+
+#panel-button,
+#battery-button,
+#network-button,
+#bt-button,
+#tray-button {
+    margin: 5px 0;
+    padding: 0 2px;
+    border-radius: apply(radius-sm);
+}
+
+#menubar label,
+#battery-label,
+#date-time {
+    font-weight: 500;
+}
+
+#global-menu {
+    margin: 5px 2px;
+    padding: 0 5px;
+    border-radius: apply(radius-xs);
+}
+
+#date-time {
+    margin: 0 4px;
+}
+
+#workspaces>button {
+    margin: 6px 0;
+    padding: 0 16px;
+    border-radius: apply(radius-sm);
+    min-width: 12px;
+    border: 1px solid @border;
+}
+
+#workspaces>button.active {
+    background-color: @active;
+}
+
+#workspaces>button.active label {
+    color: var(--shadow);
+}
+
+#workspaces>button.urgent {
+    background-color: @urgent;
+}
diff --git a/src/styles/password-dialog.css b/src/styles/password-dialog.css
new file mode 100644
index 0000000..c74ad74
--- /dev/null
+++ b/src/styles/password-dialog.css
@@ -0,0 +1,132 @@
+#wifi-password-dialog {
+  background-color: transparent;
+}
+
+#wifi-dialog-background {
+  background-color: alpha(@text-main, 0.05);
+  border-radius: apply(radius-md);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding: 20px;
+  min-width: 450px;
+}
+
+#wifi-dialog-title-container {
+  /* margin-bottom: 12px; */
+}
+
+#wifi-dialog-icon {
+  color: @accent;
+  margin-right: 4px;
+}
+
+#wifi-dialog-title {
+  color: @text-main;
+  font-size: 14px;
+  font-weight: 500;
+}
+
+#wifi-dialog-error {
+  color: #ff4444;
+  font-size: 12px;
+  font-weight: 500;
+  /* margin-bottom: 8px; */
+}
+
+#wifi-dialog-password-container {
+  margin: 5px 0;
+}
+
+#wifi-dialog-password-label {
+  color: @text-main;
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 4px;
+}
+
+#wifi-dialog-password-entry {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: apply(radius-xs);
+  padding: 8px 12px;
+  color: @text-main;
+  font-size: 13px;
+}
+
+#wifi-dialog-password-entry:focus {
+  border-color: @accent;
+  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.3);
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+#wifi-dialog-show-password-box {
+  margin-top: 4px;
+}
+
+#wifi-dialog-show-password-button {
+  background-color: transparent;
+  border: none;
+  padding: 4px;
+  border-radius: apply(radius-xs);
+  min-width: 24px;
+  min-height: 24px;
+}
+
+#wifi-dialog-show-password-button:hover {
+  background-color: alpha(@text-main, 0.1);
+}
+
+#wifi-dialog-show-password-button image {
+  color: @text-main;
+}
+
+#wifi-dialog-show-password-label {
+  color: @text-main;
+  font-size: 12px;
+}
+
+#wifi-dialog-button-box {
+  margin-top: -15px;
+}
+
+#wifi-dialog-cancel-button,
+#wifi-dialog-join-button {
+  border-radius: apply(radius-xs);
+  font-size: 13px;
+  font-weight: 500;
+  min-width: 80px;
+  min-height: 30px;
+}
+
+#wifi-dialog-cancel-button {
+  background-color: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  color: @text-main;
+}
+
+#wifi-dialog-cancel-button:hover {
+  background-color: rgba(255, 255, 255, 0.15);
+}
+
+#wifi-dialog-join-button {
+  background-color: @accent;
+  border: 1px solid @accent;
+  color: @text-main;
+}
+
+#wifi-dialog-join-button:hover {
+  background-color: @accent-hover;
+  border-color: @accent-hover;
+}
+
+#wifi-dialog-join-button.disabled {
+  opacity: 0.5;
+  background-color: #555555;
+  border-color: #555555;
+  color: #aaaaaa;
+}
+
+#wifi-dialog-join-button.disabled:hover {
+  background-color: #555555;
+  border-color: #555555;
+  color: #aaaaaa;
+}
diff --git a/src/styles/player.css b/src/styles/player.css
new file mode 100644
index 0000000..699858f
--- /dev/null
+++ b/src/styles/player.css
@@ -0,0 +1,178 @@
+#player-stack-button {
+  border-radius: apply(radius-xs);
+  min-width: 7px;
+  min-height: 7px;
+  margin: 10px 3px;
+}
+
+#button-box-c {
+  /* margin-left: -10px; */
+
+  padding-right: 15px;
+}
+
+#player-stack-button:hover {
+  background-color: #646464;
+  box-shadow: inset rgba(255, 255, 255, 0.5) 0 0 10px;
+}
+
+#player-stack-button.active {
+  border-radius: apply(radius-xs);
+  background-color: rgb(221.25, 221.25, 223.65);
+}
+
+#outer-player-box {
+  min-height: 110px;
+  min-width: 320px;
+  border-radius: apply(radius-sm);
+  margin: 0 6px;
+  background-color: @shadow-color;
+  box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4);
+}
+
+#outer-player-box-c {
+  min-height: 55px;
+  min-width: 245px;
+  border-radius: apply(radius-sm);
+  /* margin: 0 6px; */
+  /* background-color: @shadow-color; */
+  /* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
+}
+#outer-no-player-box-c {
+  min-height: 55px;
+  min-width: 345px;
+  border-radius: apply(radius-sm);
+  /* margin: 0 6px; */
+  /* background-color: @shadow-color; */
+  /* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
+}
+#box-c {
+  background-color: @bg-darker;
+  box-shadow: inset 0 0 0 0.5px alpha(@text-dim, 0.4);
+  border: 1px solid @border-strong;
+  border-radius: apply(radius-md);
+  margin-top: 0.5rem;
+  margin-left: 4px;
+  margin-right: 4px;
+  margin-bottom: 0.5rem;
+
+  min-height: 50px;
+  min-width: 330px;
+  /* border-radius: apply(radius-sm); */
+  /* margin: 0 6px 10px; */
+  /* border: 0.5px solid alpha(#000, 0.4); */
+  /* background-color: alpha(@text-dim, 0.1); */
+  /* box-shadow: inset 0 0 0 1px alpha(@text-dim, 0.4); */
+}
+#player-box:disabled highlight,
+#player-box:disabled progress {
+  background-color: rgba(205, 214, 244, 0.6);
+  background-image: none;
+}
+
+#player-info-box-c {
+  margin-left: 10px;
+}
+#player-info-box {
+  margin-left: 10px;
+}
+
+#player-title-c {
+  /* margin-top: 18px; */
+  font-weight: bold;
+  font-size: 14px;
+}
+#player-title {
+  margin-top: 18px;
+  font-weight: 700;
+  font-size: 16px;
+}
+#player-title-no {
+  font-weight: 700;
+  margin-left: 120px;
+  font-size: 16px;
+}
+#player-app-icon {
+  margin-bottom: 10px;
+}
+
+#player-artist-c {
+  margin-top: -5px;
+  color: @text-dim;
+  font-size: 12px;
+}
+#player-artist,
+#player-album {
+  font-weight: 500;
+  font-size: 12px;
+}
+
+#player-controls {
+  margin-top: 5px;
+  margin-bottom: 15px;
+}
+
+.player-icon {
+  font-size: 16px;
+}
+
+.player-button {
+  padding: 1px;
+}
+
+#player-box #player-controls #button-box .player-button:disabled {
+  color: #5f5f5f;
+}
+
+#player-button {
+  opacity: 0.5;
+}
+#player-button:hover {
+  opacity: 0.9;
+}
+
+#btn svg {
+  margin: 0 2px;
+}
+.album-image-c {
+  min-width: 50px;
+  min-height: 50px;
+  background-position: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  background-size: cover;
+  margin-left: 10px;
+  border-radius: apply(radius-xs);
+}
+.album-image {
+  min-width: 70px;
+  min-height: 70px;
+  background-position: center;
+  background-size: cover;
+  margin-left: 12px;
+  border-radius: 9px;
+}
+
+#seek-bar slider {
+  background-image: none;
+  background-color: transparent;
+  padding: 0px;
+}
+
+#seek-bar scale {
+  background-color: transparent;
+  margin-top: 10px;
+  border-radius: apply(radius-sm);
+}
+
+#seek-bar trough {
+  min-width: 10px;
+  border-radius: apply(radius-full);
+  background-color: alpha(#666, 0.5);
+  border: 1px solid alpha(#444, 0.3);
+}
+
+#seek-bar highlight {
+  background: alpha(@text-main, 0.8);
+  border-radius: apply(radius-full);
+}
diff --git a/src/styles/settings.css b/src/styles/settings.css
new file mode 100644
index 0000000..372f746
--- /dev/null
+++ b/src/styles/settings.css
@@ -0,0 +1,146 @@
+#settings-window {
+    background-color: var(--background);
+    border-radius: apply(radius-md);
+    border: 1px solid var(--border);
+    min-width: 850px;
+    min-height: 600px;
+}
+
+#settings-main-box {
+    padding: 0;
+}
+
+#settings-sidebar {
+    background-color: rgba(0, 0, 0, 0.05);
+    padding: 20px 10px;
+    min-width: 200px;
+    border-right: 1px solid var(--border);
+}
+
+#settings-sidebar-button {
+    padding: 10px 15px;
+    border-radius: apply(radius-sm);
+    margin-bottom: 2px;
+}
+
+#settings-sidebar-button:hover {
+    background-color: rgba(255, 255, 255, 0.05);
+}
+
+#settings-sidebar-button Label {
+    font-size: 14px;
+    font-weight: 500;
+}
+
+#settings-sidebar-button.active {
+    background-color: var(--accent);
+}
+
+#settings-sidebar-button.active Label {
+    color: var(--accent-foreground);
+}
+
+#settings-content-wrapper {
+    padding: 30px;
+}
+
+#settings-page-title {
+    font-size: 24px;
+    font-weight: 700;
+    margin-bottom: 20px;
+    color: var(--foreground);
+}
+
+#settings-row {
+    padding: 12px 15px;
+    border-radius: apply(radius-sm);
+    background-color: rgba(255, 255, 255, 0.03);
+    margin-bottom: 2px;
+}
+
+#settings-row-label {
+    font-size: 15px;
+    font-weight: 500;
+}
+
+#settings-row-description {
+    font-size: 12px;
+    color: var(--foreground-dim);
+}
+
+#settings-switch {
+    background-color: rgba(255, 255, 255, 0.1);
+    padding: 6px 12px;
+    border-radius: apply(radius-xl);
+    min-width: 50px;
+    transition: all 0.2s ease;
+}
+
+#settings-switch.active {
+    background-color: var(--accent);
+    color: var(--accent-foreground);
+}
+
+#settings-entry {
+    background-color: rgba(255, 255, 255, 0.05);
+    padding: 8px 12px;
+    border-radius: apply(radius-xs);
+    border: 1px solid var(--border);
+    min-width: 200px;
+    color: var(--foreground);
+}
+
+#settings-entry:focus {
+    border-color: var(--accent);
+}
+
+#settings-combo {
+    background-color: rgba(255, 255, 255, 0.05);
+    padding: 4px 8px;
+    border-radius: apply(radius-xs);
+    border: 1px solid var(--border);
+    min-width: 150px;
+    color: var(--foreground);
+}
+
+#settings-combo:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+}
+
+#settings-list-tags {
+    margin-bottom: 5px;
+}
+
+#settings-list-tag {
+    background-color: rgba(255, 255, 255, 0.08);
+    border-radius: apply(radius-md);
+    padding: 4px 10px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+}
+
+#settings-list-tag:hover {
+    background-color: rgba(255, 255, 255, 0.15);
+}
+
+#settings-list-tag Label {
+    font-size: 13px;
+}
+
+#settings-list-tag-close {
+    color: var(--foreground-dim);
+    font-size: 10px;
+    margin-left: 3px;
+}
+
+#settings-list-tag-close:hover {
+    color: var(--accent);
+}
+
+#settings-list-entry {
+    background-color: rgba(255, 255, 255, 0.03);
+    border: 1px dashed var(--border);
+    padding: 6px 12px;
+    border-radius: apply(radius-xs);
+    font-size: 13px;
+}
\ No newline at end of file
diff --git a/src/styles/switcher.css b/src/styles/switcher.css
new file mode 100644
index 0000000..98ea9e2
--- /dev/null
+++ b/src/styles/switcher.css
@@ -0,0 +1,48 @@
+#application-switcher-container {
+    background-color: var(--shadow);
+    border-radius: apply(radius-xl);
+    padding: 24px;
+}
+
+#application-switcher-view {
+    padding: 0px;
+    margin-bottom: 12px;
+}
+
+#switcher-button {
+    padding: 12px;
+    min-width: 100px;
+    transition: all 0.2s ease;
+}
+
+#window-button {
+    background-color: transparent;
+    border-radius: apply(radius-md);
+}
+
+#window-button.active {
+    background-color: var(--surface);
+}
+
+.switcher-selection-label {
+    color: var(--foreground);
+    font-size: 16px;
+    font-weight: 600;
+    margin-top: 8px;
+}
+
+.switcher-workspace-label {
+    color: var(--foreground);
+    opacity: 0.6;
+    font-size: 12px;
+    margin-top: 4px;
+}
+
+#switcher-icon-box {
+    border-radius: apply(radius-md);
+    padding: 4px;
+}
+
+#window-row {
+    padding: 0px;
+}
\ No newline at end of file
diff --git a/src/styles/todo.css b/src/styles/todo.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/tray.css b/src/styles/tray.css
new file mode 100644
index 0000000..dbeb333
--- /dev/null
+++ b/src/styles/tray.css
@@ -0,0 +1,50 @@
+tooltip {
+  border: #474747 solid 1px;
+  border-radius: 0.75rem;
+  background-color: alpha(@text-main, 0.05);
+}
+
+@keyframes tooltipShow {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+tooltip > * {
+  padding: 3px 10px;
+  border-radius: 0.75rem;
+}
+
+menu {
+  border: #474747 solid 1px;
+  border-radius: 0.75rem;
+  transition: all 100ms ease-in-out;
+  background-color: alpha(@text-main, 0.05);
+}
+
+menu > menuitem {
+  padding: 5px 10px;
+  margin: 1px 2px;
+  font-size: 13px;
+  border-bottom: #474747 solid 1px;
+}
+
+menu > menuitem:last-child {
+  border-bottom: none;
+}
+menu > menuitem:hover {
+  transition: all 20ms ease-in-out;
+  font-size: 13px;
+  border-radius: apply(radius-xs);
+  color: #222;
+  background-color: alpha(#2369ff, 1);
+}
+
+menu > menuitem:hover > label {
+  color: @text-main;
+  font-weight: 400;
+}
diff --git a/src/styles/widgets.css b/src/styles/widgets.css
new file mode 100644
index 0000000..81d9004
--- /dev/null
+++ b/src/styles/widgets.css
@@ -0,0 +1,305 @@
+#weather-container {
+  margin: 5px 5px 20px 5px;
+  min-width: 170px;
+  min-height: 170px;
+  border-radius: apply(radius-lg);
+  transition: all apply(transition-slow);
+  background: #202020;
+}
+
+/* Base Weather Layout */
+#weather-widget {
+  padding: 12px 14px;
+}
+
+#city {
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 600;
+  font-size: 18px;
+}
+
+#temperature {
+  font-size: 64px;
+  font-weight: 600;
+  color: white;
+  margin-top: -5px;
+  margin-bottom: -5px;
+}
+
+#condition-emoji {
+  margin-top: -2px;
+}
+
+#condition {
+  font-size: 16px;
+  font-weight: 600;
+  color: white;
+}
+
+#feels-like {
+  font-weight: 500;
+  font-size: 15px;
+  color: rgba(255, 255, 255, 0.8);
+}
+
+/* Weather Condition Gradients */
+.weather-clear {
+  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
+}
+
+.weather-mostly-clear {
+  background: linear-gradient(135deg, #439cfb 0%, #6bc1f9 100%);
+}
+
+.weather-partly-cloudy {
+  background: linear-gradient(135deg, #6a85b6 0%, #bac8e0 100%);
+}
+
+.weather-overcast {
+  background: linear-gradient(135deg, #485563 0%, #29323c 100%);
+}
+
+.weather-fog {
+  background: linear-gradient(135deg, #757f9a 0%, #d7dde8 100%);
+}
+
+.weather-light-rain {
+  background: linear-gradient(135deg, #4b6cb7 0%, #182848 100%);
+}
+
+.weather-rain {
+  background: linear-gradient(135deg, #2b5876 0%, #4e4376 100%);
+}
+
+.weather-heavy-rain {
+  background: linear-gradient(135deg, #141e30 0%, #243b55 100%);
+}
+
+.weather-snow,
+.weather-heavy-snow {
+  background: linear-gradient(135deg, #83a4d4 0%, #b6fbff 100%);
+}
+
+.weather-storm {
+  background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
+}
+
+/* # */
+
+/* Calendar Widget */
+#calendar-box-widget {
+  background: linear-gradient(to bottom, #202020, #141414);
+  margin: 5px 20px 20px 10px;
+  min-width: 170px;
+  min-height: 170px;
+  border-radius: apply(radius-lg);
+}
+
+#calendar-widget {
+  margin: 5px 10px 0px 10px;
+}
+
+#calendar-month {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--blue-dim);
+  margin-bottom: 6px;
+}
+
+#calendar-days-header {
+  margin-bottom: 4px;
+}
+
+#calendar-day-header {
+  font-size: 12px;
+  font-weight: 600;
+  color: @text-main;
+  min-width: 18px;
+  min-height: 10px;
+}
+
+#calendar-day-header-weekend {
+  font-size: 12px;
+  font-weight: 600;
+  color: #8e8d93;
+  min-width: 18px;
+  min-height: 10px;
+}
+
+#calendar-day {
+  font-size: 12px;
+  margin: 1.4px 0px 1.4px 0px;
+  font-weight: 500;
+  color: @text-main;
+  min-width: 18px;
+  min-height: 10px;
+}
+
+#calendar-day-weekend {
+  font-size: 12px;
+  font-weight: 500;
+  color: #8e8d93;
+  min-width: 18px;
+  min-height: 16px;
+}
+
+#calendar-day-today {
+  font-size: 12px;
+  font-weight: 700;
+  color: #191919;
+  background-color: var(--blue-dim);
+  border-radius: apply(radius-full);
+  min-width: 18px;
+  min-height: 16px;
+  padding: 2px;
+}
+
+#calendar-day-empty {
+  min-width: 18px;
+  min-height: 16px;
+}
+
+#calendar-grid {
+  margin-top: 2px;
+}
+
+/* Date Widget CSS */
+#date-widget label {
+  margin-top: 10px;
+}
+
+#day label,
+#month label {
+  color: var(--foreground);
+  padding: 5px;
+  margin-top: 10px;
+  font-size: 30px;
+  color: alpha(@text-main, 0.9);
+  font-weight: 600;
+}
+
+#date label {
+  color: alpha(@text-main, 0.9);
+
+  margin-top: -10px;
+  font-size: 90px;
+  font-weight: 600;
+}
+
+#day label {
+  color: alpha(var(--blue-dim), 0.9);
+}
+
+#date-container {
+  background: linear-gradient(to bottom, #202020, #141414);
+  margin: 5px 10px 20px 5px;
+  min-width: 170px;
+  min-height: 170px;
+  border-radius: apply(radius-lg);
+}
+
+/* System Info Widget CSS  */
+#info-box-widget {
+  background: linear-gradient(to bottom, #202020, #141414);
+  margin: 5px 5px 5px 5px;
+  min-width: 170px;
+  min-height: 170px;
+  border-radius: apply(radius-lg);
+}
+
+#ram-progress {
+  margin-left: 12px;
+  color: var(--foreground);
+}
+
+#progress-label {
+  font-weight: 600;
+  font-size: 13px;
+}
+
+#progress {
+  border: solid 8px var(--blue-dim);
+  color: alpha(#aaaaaa, 0.7);
+}
+
+/* Color indicators for memory usage */
+#used-color-indicator {
+  color: var(--blue-dim);
+  font-size: 10px;
+  font-weight: 900;
+}
+
+#free-color-indicator {
+  color: #7c7c7c;
+  font-size: 10px;
+  font-weight: 900;
+}
+
+#temp-color-indicator {
+  color: var(--blue-dim);
+  font-size: 10px;
+  font-weight: 900;
+}
+
+/* Info text styling */
+#info-text {
+  font-size: 13px;
+  font-weight: 500;
+  color: #8e8e8e;
+  min-width: 32px;
+}
+
+#info-value {
+  font-size: 12px;
+  font-weight: 600;
+  color: @text-main;
+}
+
+#info-container {
+  margin-left: -8px;
+  margin-top: 5px;
+}
+
+#info {
+  margin-left: -13px;
+  margin-top: 5px;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+#component-name {
+  font-size: 10px;
+}
+/* FlatScale styling */
+.flat-scale {
+    margin: 4px 0px;
+}
+.flat-scale slider {
+    background-color: @text-main;
+    min-height: 24px;
+    min-width: 24px;
+    border-radius: apply(radius-full);
+}
+.flat-scale trough {
+    background-color: alpha(#666, 0.5);
+    min-height: 25px;
+    border-radius: apply(radius-full);
+    border: 1px solid alpha(#444, 0.3);
+}
+.flat-scale highlight {
+    background-color: alpha(@text-main, 0.8);
+    min-height: 25px;
+    border-radius: apply(radius-full);
+}
+
+/* SmoothSwitch styling */
+.smooth-switch {
+    min-width: 44px;
+    min-height: 24px;
+    background-color: alpha(#666, 0.5);
+    color: @text-main;
+}
+.smooth-switch.checked {
+    background-color: alpha(@text-main, 0.8);
+    color: @background;
+}