diff --git a/app.ts b/app.ts
index b901b12..18ed607 100644
--- a/app.ts
+++ b/app.ts
@@ -1,6 +1,6 @@
 import app from "ags/gtk4/app";
 import GLib from "gi://GLib";
-import style from "./style.scss";
+import style from "./style/main.scss";
 import windows from "./windows";
 
 const icons = `${GLib.get_user_config_dir()}/tpanel/assets/icons`;
diff --git a/style.scss b/style.scss
deleted file mode 100644
index d060a90..0000000
--- a/style.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-$accent: #54cdb3;
-$fg-color: #fff;
-$bg-color: #0e0e0e;
-$inactive-color: #252525;
-$rounded: 8px;
-$font-size: 1rem;
-
-* {
-  all: unset;
-  font-family: FiraCode Nerd Font Bold;
-}
-
-// bar
-@import "./widgets/bar/style.scss";
-
-// launcher
-@import "./widgets/launcher/style.scss";
-
-// notifications
-@import "./widgets/notifications/style.scss";
diff --git a/widgets/bar/style.scss b/style/_bar.scss
similarity index 97%
rename from widgets/bar/style.scss
rename to style/_bar.scss
index fd92554..38d7657 100644
--- a/widgets/bar/style.scss
+++ b/style/_bar.scss
@@ -1,3 +1,4 @@
+@use "./_variable.scss" as *;
 @use "sass:math";
 @use "sass:list";
 
diff --git a/style/_base.scss b/style/_base.scss
new file mode 100644
index 0000000..75e79cc
--- /dev/null
+++ b/style/_base.scss
@@ -0,0 +1,4 @@
+* {
+  all: unset;
+  font-family: FiraCode Nerd Font Bold;
+}
diff --git a/widgets/launcher/style.scss b/style/_launcher.scss
similarity index 94%
rename from widgets/launcher/style.scss
rename to style/_launcher.scss
index 4835306..b1b866a 100644
--- a/widgets/launcher/style.scss
+++ b/style/_launcher.scss
@@ -1,3 +1,5 @@
+@use "./_variable.scss" as *;
+
 window.launcher {
   background: $bg-color;
   border-radius: $rounded;
diff --git a/widgets/notifications/style.scss b/style/_notification.scss
similarity index 90%
rename from widgets/notifications/style.scss
rename to style/_notification.scss
index 2950214..3f126b9 100644
--- a/widgets/notifications/style.scss
+++ b/style/_notification.scss
@@ -1,3 +1,4 @@
+@use "./_variable.scss" as *;
 @use "sass:math";
 @use "sass:list";
 
@@ -15,7 +16,7 @@ window.notifications {
       border: 1px solid rgba(red, 0.5);
     }
 
-    &.low {
+    &.normal {
       border: 1px solid rgba(yellow, 0.5);
     }
 
diff --git a/style/_variable.scss b/style/_variable.scss
new file mode 100644
index 0000000..f90146e
--- /dev/null
+++ b/style/_variable.scss
@@ -0,0 +1,6 @@
+$accent: #54cdb3;
+$fg-color: #fff;
+$bg-color: #0e0e0e;
+$inactive-color: #252525;
+$rounded: 8px;
+$font-size: 1rem;
diff --git a/style/main.scss b/style/main.scss
new file mode 100644
index 0000000..bf73e20
--- /dev/null
+++ b/style/main.scss
@@ -0,0 +1,11 @@
+// base
+@use "./_base.scss";
+
+// bar
+@use "./_bar.scss";
+
+// launcher
+@use "./_launcher.scss";
+
+// notifications
+@use "./_notification.scss";