diff --git a/src/styles/app.scss b/src/styles/app.postcss
similarity index 61%
rename from src/styles/app.scss
rename to src/styles/app.postcss
index b3eaded..4460f7d 100644
--- a/src/styles/app.scss
+++ b/src/styles/app.postcss
@@ -1,15 +1,15 @@
+@import '@fontsource/roboto/index.css';
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import '@fontsource/roboto/index.css';
-
 html {
   -webkit-font-smoothing: antialiased;
 }
 body,
 html {
-  // Fix tailwindcss/daisyUI applying color to the body tag
+  /* Fix tailwindcss/daisyUI applying color to the body tag */
   background-color: transparent !important;
   @apply rounded-3xl overflow-hidden;
 }
@@ -18,7 +18,10 @@ html {
   @apply transition-all;
 }
 
-// Class is used for development purposes only.
-.dev {
-  border: 1px solid red;
+
+@layer utilities {
+  /* Class is used for development purposes only */
+  .dev {
+    border: 1px solid red;
+  }
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
deleted file mode 100644
index ca9fb5d..0000000
--- a/src/styles/variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-// Use this file for variable used in scss, this file will be imported into every single component