diff --git a/src/app/App.scss b/src/app/App.scss
index 92a92b4f..11f0bc7a 100644
--- a/src/app/App.scss
+++ b/src/app/App.scss
@@ -1,26 +1,26 @@
-@import '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .app-container {
   height: 100%;
 }
 
 .app {
-  padding-top: $headerHeight;
+  padding-top: base.$headerHeight;
   height: 100%;
 }
 
 .shlink-wrapper {
   min-height: 100%;
-  padding-bottom: $footer-height + $footer-margin;
-  margin-bottom: -($footer-height + $footer-margin);
+  padding-bottom: base.$footer-height + base.$footer-margin;
+  margin-bottom: -(base.$footer-height + base.$footer-margin);
 }
 
 .shlink-footer {
-  height: $footer-height;
-  margin-top: $footer-margin;
+  height: base.$footer-height;
+  margin-top: base.$footer-margin;
   padding: 0;
 
-  @media (min-width: $mdMin) {
+  @media (min-width: base.$mdMin) {
     padding: 0 15px;
   }
 }
diff --git a/src/common/AppUpdateBanner.scss b/src/common/AppUpdateBanner.scss
index 66d2e9cc..5f84ca85 100644
--- a/src/common/AppUpdateBanner.scss
+++ b/src/common/AppUpdateBanner.scss
@@ -1,11 +1,11 @@
-@import '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@import '../utils/mixins/horizontal-align';
+@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../utils/mixins/horizontal-align';
 
 .app-update-banner.app-update-banner {
-  @include horizontal-align();
+  @include horizontal-align.horizontal-align();
 
   position: fixed;
-  top: $headerHeight - 25px;
+  top: base.$headerHeight - 25px;
   padding: 0 4rem 0 0;
   z-index: 1040;
   margin: 0;
diff --git a/src/common/Home.scss b/src/common/Home.scss
index 41c14047..04c8c21e 100644
--- a/src/common/Home.scss
+++ b/src/common/Home.scss
@@ -1,15 +1,15 @@
-@import '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .home__title {
   font-size: 1.75rem;
 
-  @media (min-width: $mdMin) {
+  @media (min-width: base.$mdMin) {
     font-size: 2.2rem;
   }
 }
 
 .home__servers-container {
-  @media (min-width: $mdMin) {
+  @media (min-width: base.$mdMin) {
     border-left: 1px solid var(--border-color);
   }
 }
diff --git a/src/common/MainHeader.scss b/src/common/MainHeader.scss
index 8f184bd5..43c7e4f6 100644
--- a/src/common/MainHeader.scss
+++ b/src/common/MainHeader.scss
@@ -1,5 +1,3 @@
-@import '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-
 .main-header.main-header {
   color: white;
   background-color: var(--brand-color) !important;
diff --git a/src/common/NoMenuLayout.scss b/src/common/NoMenuLayout.scss
index 17668dc2..a97be69e 100644
--- a/src/common/NoMenuLayout.scss
+++ b/src/common/NoMenuLayout.scss
@@ -1,9 +1,9 @@
-@import '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .no-menu-wrapper {
   padding: 15px 0 0;
 
-  @media (min-width: $mdMin) {
+  @media (min-width: base.$mdMin) {
     padding: 30px 20px 20px;
   }
 }
diff --git a/src/common/ShlinkVersionsContainer.scss b/src/common/ShlinkVersionsContainer.scss
index 74fca7b1..4bb9f3dc 100644
--- a/src/common/ShlinkVersionsContainer.scss
+++ b/src/common/ShlinkVersionsContainer.scss
@@ -1,9 +1,9 @@
-@import '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .shlink-versions-container--with-sidebar {
   margin-left: 0;
 
-  @media (min-width: $mdMin) {
-    margin-left: $asideMenuWidth;
+  @media (min-width: base.$mdMin) {
+    margin-left: base.$asideMenuWidth;
   }
 }
diff --git a/src/index.scss b/src/index.scss
index 10a99b29..cb81a301 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -1,4 +1,6 @@
-@import '../node_modules/@shlinkio/shlink-frontend-kit/dist/base'; // Before bootstrap stylesheet. Includes SASS var overrides
-@import '../node_modules/bootstrap/scss/bootstrap.scss';
-@import '../node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overwrites
-@import '../node_modules/@shlinkio/shlink-web-component/dist/index';
+@use '../node_modules/@shlinkio/shlink-frontend-kit/dist/base'; // Before bootstrap stylesheet
+@use '../node_modules/bootstrap/scss/bootstrap.scss' with (
+  $primary: base.$mainColor // Override bootstrap's primary color
+);
+@use '../node_modules/@shlinkio/shlink-frontend-kit/dist/index'; // After bootstrap. Includes CSS overrides
+@use '../node_modules/@shlinkio/shlink-web-component/dist/index' as c-index;
diff --git a/src/servers/ServersListGroup.scss b/src/servers/ServersListGroup.scss
index 2854b070..6e21e602 100644
--- a/src/servers/ServersListGroup.scss
+++ b/src/servers/ServersListGroup.scss
@@ -1,6 +1,6 @@
-@import '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
-@import '../utils/mixins/vertical-align';
-@import '../utils/mixins/thin-scroll';
+@use '../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../utils/mixins/vertical-align';
+@use '../utils/mixins/thin-scroll';
 
 .servers-list__list-group.servers-list__list-group {
   width: 100%;
@@ -18,7 +18,7 @@
 }
 
 .servers-list__server-item:not(:hover) {
-  color: $mainColor;
+  color: base.$mainColor;
 }
 
 .servers-list__server-item:hover {
@@ -26,7 +26,7 @@
 }
 
 .servers-list__server-item-icon {
-  @include vertical-align();
+  @include vertical-align.vertical-align();
 
   right: 1rem;
 }
@@ -35,11 +35,11 @@
   border-radius: 0;
   border-top: 1px solid var(--border-color);
 
-  @media (min-width: $mdMin) {
+  @media (min-width: base.$mdMin) {
     max-height: 220px;
     overflow-x: auto;
 
-    @include thin-scroll();
+    @include thin-scroll.thin-scroll();
   }
 
   .servers-list__server-item {
diff --git a/src/servers/helpers/ServerError.scss b/src/servers/helpers/ServerError.scss
index 70a8c74d..bd6dd061 100644
--- a/src/servers/helpers/ServerError.scss
+++ b/src/servers/helpers/ServerError.scss
@@ -1,4 +1,4 @@
-@import '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
+@use '../../../node_modules/@shlinkio/shlink-frontend-kit/dist/base';
 
 .server-error__container {
   text-align: center;
@@ -8,7 +8,7 @@
 }
 
 .server-error__delete-btn {
-  color: $dangerColor;
+  color: base.$dangerColor;
   font-weight: inherit;
 }