diff --git a/src/renderer/src/_theme.scss b/src/renderer/src/_theme.scss
index 50113a69..7039a27b 100644
--- a/src/renderer/src/_theme.scss
+++ b/src/renderer/src/_theme.scss
@@ -18,4 +18,4 @@ $size-small: 12px;
 $z-index-toast: 5;
 $z-index-bottom-panel: 3;
 $z-index-title-bar: 4;
-$z-index-backdrop: 4;
+$z-index-backdrop: 4;
\ No newline at end of file
diff --git a/src/renderer/src/components/avatar/avatar.scss b/src/renderer/src/components/avatar/avatar.scss
index 2745d0ed..3e3533b6 100644
--- a/src/renderer/src/components/avatar/avatar.scss
+++ b/src/renderer/src/components/avatar/avatar.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .profile-avatar {
   border-radius: 4px;
diff --git a/src/renderer/src/components/backdrop/backdrop.scss b/src/renderer/src/components/backdrop/backdrop.scss
index b06cdf92..bc4eb94b 100644
--- a/src/renderer/src/components/backdrop/backdrop.scss
+++ b/src/renderer/src/components/backdrop/backdrop.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .backdrop {
   animation-name: backdrop-fade-in;
diff --git a/src/renderer/src/components/badge/badge.scss b/src/renderer/src/components/badge/badge.scss
index b1c35b7f..358bcbd6 100644
--- a/src/renderer/src/components/badge/badge.scss
+++ b/src/renderer/src/components/badge/badge.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .badge {
   color: $muted-color;
diff --git a/src/renderer/src/components/bottom-panel/bottom-panel.scss b/src/renderer/src/components/bottom-panel/bottom-panel.scss
index 4dfebb8a..10b295dd 100644
--- a/src/renderer/src/components/bottom-panel/bottom-panel.scss
+++ b/src/renderer/src/components/bottom-panel/bottom-panel.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .bottom-panel {
   width: 100%;
diff --git a/src/renderer/src/components/button/button.scss b/src/renderer/src/components/button/button.scss
index cf33bbe1..b86438ef 100644
--- a/src/renderer/src/components/button/button.scss
+++ b/src/renderer/src/components/button/button.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .button {
   padding: $spacing-unit $spacing-unit * 2;
diff --git a/src/renderer/src/components/checkbox-field/checkbox-field.scss b/src/renderer/src/components/checkbox-field/checkbox-field.scss
index d895d6d8..b7ca74dd 100644
--- a/src/renderer/src/components/checkbox-field/checkbox-field.scss
+++ b/src/renderer/src/components/checkbox-field/checkbox-field.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .checkbox-field {
   display: flex;
diff --git a/src/renderer/src/components/confirmation-modal/confirmation-modal.scss b/src/renderer/src/components/confirmation-modal/confirmation-modal.scss
index 8d816151..7b12b307 100644
--- a/src/renderer/src/components/confirmation-modal/confirmation-modal.scss
+++ b/src/renderer/src/components/confirmation-modal/confirmation-modal.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .confirmation-modal {
   display: flex;
diff --git a/src/renderer/src/components/dropdown-menu/dropdown-menu.scss b/src/renderer/src/components/dropdown-menu/dropdown-menu.scss
index 847ccfb7..f3a2781d 100644
--- a/src/renderer/src/components/dropdown-menu/dropdown-menu.scss
+++ b/src/renderer/src/components/dropdown-menu/dropdown-menu.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .dropdown-menu {
   &__content {
diff --git a/src/renderer/src/components/game-card/game-card.scss b/src/renderer/src/components/game-card/game-card.scss
index 060069ed..0ca93f7c 100644
--- a/src/renderer/src/components/game-card/game-card.scss
+++ b/src/renderer/src/components/game-card/game-card.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .game-card {
   width: 100%;
diff --git a/src/renderer/src/components/header/header.scss b/src/renderer/src/components/header/header.scss
index 44cb3f20..660ee816 100644
--- a/src/renderer/src/components/header/header.scss
+++ b/src/renderer/src/components/header/header.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .header {
   display: flex;
diff --git a/src/renderer/src/components/hero/hero.scss b/src/renderer/src/components/hero/hero.scss
index 4e30974a..bc85de0d 100644
--- a/src/renderer/src/components/hero/hero.scss
+++ b/src/renderer/src/components/hero/hero.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .hero {
   width: 100%;
diff --git a/src/renderer/src/components/link/link.scss b/src/renderer/src/components/link/link.scss
index 905edf1e..c911852f 100644
--- a/src/renderer/src/components/link/link.scss
+++ b/src/renderer/src/components/link/link.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .link {
   text-decoration: none;
diff --git a/src/renderer/src/components/modal/modal.scss b/src/renderer/src/components/modal/modal.scss
index 7082670d..965402e4 100644
--- a/src/renderer/src/components/modal/modal.scss
+++ b/src/renderer/src/components/modal/modal.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .modal {
   animation: scale-fade-in 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none
diff --git a/src/renderer/src/components/select-field/select-field.scss b/src/renderer/src/components/select-field/select-field.scss
index ef856c03..d2208dc9 100644
--- a/src/renderer/src/components/select-field/select-field.scss
+++ b/src/renderer/src/components/select-field/select-field.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .select-field {
   display: inline-flex;
diff --git a/src/renderer/src/components/sidebar/sidebar-profile.scss b/src/renderer/src/components/sidebar/sidebar-profile.scss
index a6014d70..5e805dab 100644
--- a/src/renderer/src/components/sidebar/sidebar-profile.scss
+++ b/src/renderer/src/components/sidebar/sidebar-profile.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .sidebar-profile {
   position: relative;
diff --git a/src/renderer/src/components/sidebar/sidebar.scss b/src/renderer/src/components/sidebar/sidebar.scss
index b5215da7..472e9b2d 100644
--- a/src/renderer/src/components/sidebar/sidebar.scss
+++ b/src/renderer/src/components/sidebar/sidebar.scss
@@ -1,30 +1,30 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .sidebar {
-  background-color: globals.$dark-background-color;
-  color: globals.$muted-color;
+  background-color: $dark-background-color;
+  color: $muted-color;
   flex-direction: column;
   display: flex;
   transition: opacity ease 0.2s;
-  border-right: solid 1px globals.$border-color;
+  border-right: solid 1px $border-color;
   position: relative;
   overflow: hidden;
-  padding-top: globals.$spacing-unit;
+  padding-top: $spacing-unit;
 
   &__resizing {
-    opacity: globals.$active-opacity;
+    opacity: $active-opacity;
     pointer-events: none;
   }
 
   &__darwin {
-    padding-top: calc(globals.$spacing-unit * 6);
+    padding-top: calc($spacing-unit * 6);
   }
 
   &__content {
     display: flex;
     flex-direction: column;
-    padding: calc(globals.$spacing-unit * 2);
-    gap: calc(globals.$spacing-unit * 2);
+    padding: calc($spacing-unit * 2);
+    gap: calc($spacing-unit * 2);
     width: 100%;
     overflow: auto;
   }
@@ -41,7 +41,7 @@
     list-style: none;
     padding: 0;
     margin: 0;
-    gap: calc(globals.$spacing-unit / 2);
+    gap: calc($spacing-unit / 2);
     display: flex;
     flex-direction: column;
     overflow: hidden;
@@ -52,7 +52,7 @@
     cursor: pointer;
     text-wrap: nowrap;
     display: flex;
-    color: globals.$muted-color;
+    color: $muted-color;
     border-radius: 4px;
     &:hover {
       background-color: rgba(255, 255, 255, 0.15);
@@ -63,7 +63,7 @@
     }
 
     &--muted {
-      opacity: globals.$disabled-opacity;
+      opacity: $disabled-opacity;
 
       &:hover {
         opacity: 1;
@@ -75,11 +75,11 @@
     color: inherit;
     display: flex;
     align-items: center;
-    gap: globals.$spacing-unit;
+    gap: $spacing-unit;
     cursor: pointer;
     overflow: hidden;
     width: 100%;
-    padding: 9px globals.$spacing-unit;
+    padding: 9px $spacing-unit;
   }
 
   &__menu-item-button-label {
@@ -102,20 +102,20 @@
   }
 
   &__section {
-    gap: calc(globals.$spacing-unit * 2);
+    gap: calc($spacing-unit * 2);
     display: flex;
     flex-direction: column;
-    padding-bottom: globals.$spacing-unit;
+    padding-bottom: $spacing-unit;
   }
 
   &__help-button {
-    color: globals.$muted-color;
-    padding: globals.$spacing-unit calc(globals.$spacing-unit * 2);
+    color: $muted-color;
+    padding: $spacing-unit calc($spacing-unit * 2);
     gap: 9px;
     display: flex;
     align-items: center;
     cursor: pointer;
-    border-top: solid 1px globals.$border-color;
+    border-top: solid 1px $border-color;
     transition: background-color ease 0.1s;
 
     &:hover {
diff --git a/src/renderer/src/components/text-field/text-field.scss b/src/renderer/src/components/text-field/text-field.scss
index ed2cdd50..fd7bba45 100644
--- a/src/renderer/src/components/text-field/text-field.scss
+++ b/src/renderer/src/components/text-field/text-field.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .text-field-container {
   flex: 1;
diff --git a/src/renderer/src/components/toast/toast.scss b/src/renderer/src/components/toast/toast.scss
index a34cc329..1e3438f8 100644
--- a/src/renderer/src/components/toast/toast.scss
+++ b/src/renderer/src/components/toast/toast.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 @keyframes slideIn {
   0% {
diff --git a/src/renderer/src/pages/achievements/achievement-panel.scss b/src/renderer/src/pages/achievements/achievement-panel.scss
index 0f048036..11eb3cb9 100644
--- a/src/renderer/src/pages/achievements/achievement-panel.scss
+++ b/src/renderer/src/pages/achievements/achievement-panel.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .achievement-panel {
   width: 100%;
diff --git a/src/renderer/src/pages/achievements/achievements.scss b/src/renderer/src/pages/achievements/achievements.scss
index c7d4239d..6c8b52ff 100644
--- a/src/renderer/src/pages/achievements/achievements.scss
+++ b/src/renderer/src/pages/achievements/achievements.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 $hero-height: 150px;
 $logo-height: 100px;
diff --git a/src/renderer/src/pages/catalogue/catalogue.scss b/src/renderer/src/pages/catalogue/catalogue.scss
index 5b3471cb..2a475734 100644
--- a/src/renderer/src/pages/catalogue/catalogue.scss
+++ b/src/renderer/src/pages/catalogue/catalogue.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .catalogue {
   overflow-y: auto;
diff --git a/src/renderer/src/pages/catalogue/game-item.scss b/src/renderer/src/pages/catalogue/game-item.scss
index 3c5aa23a..128e04e0 100644
--- a/src/renderer/src/pages/catalogue/game-item.scss
+++ b/src/renderer/src/pages/catalogue/game-item.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .game-item {
   background-color: $dark-background-color;
diff --git a/src/renderer/src/pages/downloads/delete-game-modal.scss b/src/renderer/src/pages/downloads/delete-game-modal.scss
index 7b1b25f6..aa7518c9 100644
--- a/src/renderer/src/pages/downloads/delete-game-modal.scss
+++ b/src/renderer/src/pages/downloads/delete-game-modal.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .delete-game-modal {
   &__actions-buttons-ctn {
diff --git a/src/renderer/src/pages/downloads/download-group.scss b/src/renderer/src/pages/downloads/download-group.scss
index 6eceb7f0..62cc5338 100644
--- a/src/renderer/src/pages/downloads/download-group.scss
+++ b/src/renderer/src/pages/downloads/download-group.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .download-group {
   &__title-wrapper {
diff --git a/src/renderer/src/pages/downloads/downloads.scss b/src/renderer/src/pages/downloads/downloads.scss
index 7dcf859e..a9ccde6d 100644
--- a/src/renderer/src/pages/downloads/downloads.scss
+++ b/src/renderer/src/pages/downloads/downloads.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .downloads {
   &__container {
diff --git a/src/renderer/src/pages/editor/editor.scss b/src/renderer/src/pages/editor/editor.scss
index 2b475175..7a62490a 100644
--- a/src/renderer/src/pages/editor/editor.scss
+++ b/src/renderer/src/pages/editor/editor.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .editor-header {
   width: 100%;
diff --git a/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss b/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss
index 84efd47e..7be0e94c 100644
--- a/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss
+++ b/src/renderer/src/pages/game-details/cloud-sync-files-modal/cloud-sync-files-modal.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .cloud-sync-files-modal {
   &__mapping-methods {
diff --git a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss b/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss
index cdc3296b..c2f4def1 100644
--- a/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss
+++ b/src/renderer/src/pages/game-details/cloud-sync-modal/cloud-sync-modal.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 @keyframes rotate {
   0% {
diff --git a/src/renderer/src/pages/game-details/description-header/description-header.scss b/src/renderer/src/pages/game-details/description-header/description-header.scss
index 0cb16361..591ca898 100644
--- a/src/renderer/src/pages/game-details/description-header/description-header.scss
+++ b/src/renderer/src/pages/game-details/description-header/description-header.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .description-header {
   width: 100%;
diff --git a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
index dbcd2c05..26f5093f 100644
--- a/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
+++ b/src/renderer/src/pages/game-details/gallery-slider/gallery-slider.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .gallery-slider {
   &__container {
diff --git a/src/renderer/src/pages/game-details/game-details.scss b/src/renderer/src/pages/game-details/game-details.scss
index 1ffa665d..874ee78b 100644
--- a/src/renderer/src/pages/game-details/game-details.scss
+++ b/src/renderer/src/pages/game-details/game-details.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 $hero-height: 300px;
 
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel-actions.scss b/src/renderer/src/pages/game-details/hero/hero-panel-actions.scss
index 2a514a86..7b37ed13 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel-actions.scss
+++ b/src/renderer/src/pages/game-details/hero/hero-panel-actions.scss
@@ -1,4 +1,4 @@
-@import "../../../scss/variables";
+@use "../../../scss/variables";
 
 .hero-panel-actions {
   &__action {
diff --git a/src/renderer/src/pages/game-details/hero/hero-panel.scss b/src/renderer/src/pages/game-details/hero/hero-panel.scss
index 0b1c07f6..bb4996b9 100644
--- a/src/renderer/src/pages/game-details/hero/hero-panel.scss
+++ b/src/renderer/src/pages/game-details/hero/hero-panel.scss
@@ -1,4 +1,4 @@
-@import "../../../scss/variables";
+@use "../../../scss/variables";
 
 .hero-panel {
   width: 100%;
diff --git a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
index cde352f5..3650fff5 100644
--- a/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/download-settings-modal.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .download-settings-modal {
   &__container {
diff --git a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss
index 687a95b7..77821930 100644
--- a/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/remove-from-library-modal.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .remove-from-library-modal {
   &__delete-actions-buttons-ctn {
diff --git a/src/renderer/src/pages/game-details/modals/repacks-modal.scss b/src/renderer/src/pages/game-details/modals/repacks-modal.scss
index e585db29..f8561ca5 100644
--- a/src/renderer/src/pages/game-details/modals/repacks-modal.scss
+++ b/src/renderer/src/pages/game-details/modals/repacks-modal.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .repacks-modal {
   &__repacks {
diff --git a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss
index 0890fedd..c84017b3 100644
--- a/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss
+++ b/src/renderer/src/pages/game-details/sidebar-section/sidebar-section.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .sidebar-section {
   &__button {
diff --git a/src/renderer/src/pages/game-details/sidebar/sidebar.scss b/src/renderer/src/pages/game-details/sidebar/sidebar.scss
index 499ddba9..615eb9eb 100644
--- a/src/renderer/src/pages/game-details/sidebar/sidebar.scss
+++ b/src/renderer/src/pages/game-details/sidebar/sidebar.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .sidebar {
   &__content {
diff --git a/src/renderer/src/pages/home/catalogue-home.scss b/src/renderer/src/pages/home/catalogue-home.scss
index 924c8850..aace3cb5 100644
--- a/src/renderer/src/pages/home/catalogue-home.scss
+++ b/src/renderer/src/pages/home/catalogue-home.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .catalogue-home {
   &__categories {
diff --git a/src/renderer/src/pages/home/home.scss b/src/renderer/src/pages/home/home.scss
index 8791d822..008f9093 100644
--- a/src/renderer/src/pages/home/home.scss
+++ b/src/renderer/src/pages/home/home.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .home {
   &__header {
diff --git a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss
index c1062f4d..a69bd72e 100644
--- a/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss
+++ b/src/renderer/src/pages/profile/edit-profile-modal/edit-profile-modal.scss
@@ -1,4 +1,4 @@
-@import "../../../scss/variables";
+@use "../../../scss/variables";
 
 .edit-profile-modal {
   &__profile-avatar-edit-container {
diff --git a/src/renderer/src/pages/profile/profile-content/locked-profile.scss b/src/renderer/src/pages/profile/profile-content/locked-profile.scss
index 01c31d1b..a151c8ba 100644
--- a/src/renderer/src/pages/profile/profile-content/locked-profile.scss
+++ b/src/renderer/src/pages/profile/profile-content/locked-profile.scss
@@ -1,4 +1,4 @@
-@import "../../../scss/variables";
+@use "../../../scss/variables";
 
 .locked-profile {
   &__container {
diff --git a/src/renderer/src/pages/profile/profile-content/profile-content.scss b/src/renderer/src/pages/profile/profile-content/profile-content.scss
index 5013c741..33e1be85 100644
--- a/src/renderer/src/pages/profile/profile-content/profile-content.scss
+++ b/src/renderer/src/pages/profile/profile-content/profile-content.scss
@@ -1,4 +1,4 @@
-@import "../../../scss/variables";
+@use "../../../scss/variables";
 
 .profile-content {
   &__game-cover {
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
index 34d93682..3f6584fe 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -1,4 +1,4 @@
-@import "../../../scss/variables";
+@use "../../../scss/variables";
 
 .profile-hero {
   &__content-box {
diff --git a/src/renderer/src/pages/profile/profile.scss b/src/renderer/src/pages/profile/profile.scss
index d3f0b5bb..99866a61 100644
--- a/src/renderer/src/pages/profile/profile.scss
+++ b/src/renderer/src/pages/profile/profile.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .profile {
   &__wrapper {
diff --git a/src/renderer/src/pages/profile/report-profile/report-profile.scss b/src/renderer/src/pages/profile/report-profile/report-profile.scss
index 63b61c67..fc2a6534 100644
--- a/src/renderer/src/pages/profile/report-profile/report-profile.scss
+++ b/src/renderer/src/pages/profile/report-profile/report-profile.scss
@@ -1,4 +1,4 @@
-@import "../../../scss/variables";
+@use "../../../scss/variables";
 
 .report-profile {
   &__report-button {
diff --git a/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss b/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss
index f8452eb2..a2c7003d 100644
--- a/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss
+++ b/src/renderer/src/pages/profile/upload-background-image-button/upload-background-image-button.scss
@@ -1,4 +1,4 @@
-@import "../../../scss/variables";
+@use "../../../scss/variables";
 
 .upload-background-image-button {
   position: absolute;
diff --git a/src/renderer/src/pages/settings/add-download-source-modal.scss b/src/renderer/src/pages/settings/add-download-source-modal.scss
index 539d8345..739cc3a5 100644
--- a/src/renderer/src/pages/settings/add-download-source-modal.scss
+++ b/src/renderer/src/pages/settings/add-download-source-modal.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .download-source {
   &__add-source {
diff --git a/src/renderer/src/pages/settings/settings-account.scss b/src/renderer/src/pages/settings/settings-account.scss
index b03d5c0e..b60278d8 100644
--- a/src/renderer/src/pages/settings/settings-account.scss
+++ b/src/renderer/src/pages/settings/settings-account.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .settings-account {
   &__form {
diff --git a/src/renderer/src/pages/settings/settings-download-sources.scss b/src/renderer/src/pages/settings/settings-download-sources.scss
index 0823d7bf..4e66a8f4 100644
--- a/src/renderer/src/pages/settings/settings-download-sources.scss
+++ b/src/renderer/src/pages/settings/settings-download-sources.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .settings-download-sources {
   &__download-sources {
diff --git a/src/renderer/src/pages/settings/settings-real-debrid.scss b/src/renderer/src/pages/settings/settings-real-debrid.scss
index ee0e1df8..d0d646f2 100644
--- a/src/renderer/src/pages/settings/settings-real-debrid.scss
+++ b/src/renderer/src/pages/settings/settings-real-debrid.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .settings-real-debrid {
   &__form {
diff --git a/src/renderer/src/pages/settings/settings.scss b/src/renderer/src/pages/settings/settings.scss
index faeed468..eaf2a151 100644
--- a/src/renderer/src/pages/settings/settings.scss
+++ b/src/renderer/src/pages/settings/settings.scss
@@ -1,4 +1,4 @@
-@import "../../scss/variables";
+@use "../../scss/variables";
 
 .settings {
   &__container {
diff --git a/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud.scss b/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud.scss
index b511ff13..58ea28ca 100644
--- a/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud.scss
+++ b/src/renderer/src/pages/shared-modals/hydra-cloud/hydra-cloud.scss
@@ -1,4 +1,4 @@
-@import "../../../scss/variables";
+@use "../../../scss/variables";
 
 .hydra-cloud {
   &__on-close {
diff --git a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
index 13e76819..9d2e9841 100644
--- a/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
+++ b/src/renderer/src/pages/shared-modals/user-friend-modal/user-friend-modal.scss
@@ -1,4 +1,4 @@
-@import "../../../scss/variables";
+@use "../../../scss/variables";
 
 .user-friend-modal {
   &__friend-list-display-name {