diff --git a/src/app/@theme/components/footer/footer.component.scss b/src/app/@theme/components/footer/footer.component.scss
index c56f5d89..3dbed78b 100644
--- a/src/app/@theme/components/footer/footer.component.scss
+++ b/src/app/@theme/components/footer/footer.component.scss
@@ -1,6 +1,6 @@
-@import '../../styles/themes';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '~bootstrap/scss/mixins/breakpoints';
+@use '../../styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   width: 100%;
diff --git a/src/app/@theme/components/header/header.component.scss b/src/app/@theme/components/header/header.component.scss
index 20d9e872..04d71cc6 100644
--- a/src/app/@theme/components/header/header.component.scss
+++ b/src/app/@theme/components/header/header.component.scss
@@ -1,6 +1,6 @@
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '../../styles/themes';
+@use '../../styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   display: flex;
diff --git a/src/app/@theme/layouts/one-column/one-column.layout.scss b/src/app/@theme/layouts/one-column/one-column.layout.scss
index 448cb738..44575461 100644
--- a/src/app/@theme/layouts/one-column/one-column.layout.scss
+++ b/src/app/@theme/layouts/one-column/one-column.layout.scss
@@ -1,6 +1,4 @@
-@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../styles/themes' as *;
 
 @include nb-install-component() {
   .menu-sidebar ::ng-deep .scrollable {
diff --git a/src/app/@theme/layouts/three-columns/three-columns.layout.scss b/src/app/@theme/layouts/three-columns/three-columns.layout.scss
index 448cb738..351ea3fb 100644
--- a/src/app/@theme/layouts/three-columns/three-columns.layout.scss
+++ b/src/app/@theme/layouts/three-columns/three-columns.layout.scss
@@ -1,6 +1,6 @@
-@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   .menu-sidebar ::ng-deep .scrollable {
diff --git a/src/app/@theme/layouts/two-columns/two-columns.layout.scss b/src/app/@theme/layouts/two-columns/two-columns.layout.scss
index 448cb738..44575461 100644
--- a/src/app/@theme/layouts/two-columns/two-columns.layout.scss
+++ b/src/app/@theme/layouts/two-columns/two-columns.layout.scss
@@ -1,6 +1,4 @@
-@import '../../styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../styles/themes' as *;
 
 @include nb-install-component() {
   .menu-sidebar ::ng-deep .scrollable {
diff --git a/src/app/@theme/styles/_layout.scss b/src/app/@theme/styles/_layout.scss
index 83263033..97b76662 100644
--- a/src/app/@theme/styles/_layout.scss
+++ b/src/app/@theme/styles/_layout.scss
@@ -1,3 +1,5 @@
+@use '@nebular/theme/styles/globals' as *;
+
 @mixin ngx-layout() {
   @include media-breakpoint-down(is) {
     .row {
diff --git a/src/app/@theme/styles/_overrides.scss b/src/app/@theme/styles/_overrides.scss
index acf7d8ac..6c17d79e 100644
--- a/src/app/@theme/styles/_overrides.scss
+++ b/src/app/@theme/styles/_overrides.scss
@@ -1,5 +1,3 @@
-@import './themes';
-
 @mixin nb-overrides() {
   nb-select.size-medium button {
     padding: 0.4375rem 2.2rem 0.4375rem 1.125rem !important;
diff --git a/src/app/@theme/styles/styles.scss b/src/app/@theme/styles/styles.scss
index b35d980d..a9e1b8db 100644
--- a/src/app/@theme/styles/styles.scss
+++ b/src/app/@theme/styles/styles.scss
@@ -1,22 +1,23 @@
-@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
-
+@use 'sass:meta';
 // themes - our custom or/and out of the box themes
-@import 'themes';
+@use 'themes' as *;
 
 // framework component themes (styles tied to theme variables)
-@import '~@nebular/theme/styles/globals';
-@import '~@nebular/auth/styles/globals';
-
-@import '~bootstrap/scss/functions';
-@import '~bootstrap/scss/variables';
-@import '~bootstrap/scss/mixins';
-@import '~bootstrap/scss/grid';
+@use '@nebular/theme/styles/globals' as *;
+@use '@nebular/auth/styles/globals' as *;
 
 // loading progress bar theme
-@import './pace.theme';
+@use 'pace.theme' as *;
 
-@import './layout';
-@import './overrides';
+@use 'layout' as *;
+@use 'overrides' as *;
+
+@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');
+
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/grid';
 
 // install the framework and custom global styles
 @include nb-install() {
diff --git a/src/app/@theme/styles/themes.scss b/src/app/@theme/styles/themes.scss
index c5d5aa8d..d38be118 100644
--- a/src/app/@theme/styles/themes.scss
+++ b/src/app/@theme/styles/themes.scss
@@ -1,7 +1,8 @@
+@forward '@nebular/theme/styles/theming';
 // @nebular theming framework
-@import '~@nebular/theme/styles/theming';
+@use '@nebular/theme/styles/theming' as *;
 // @nebular out of the box themes
-@import '~@nebular/theme/styles/themes';
+@use '@nebular/theme/styles/themes';
 
 $nb-themes: nb-register-theme((
   layout-padding-top: 2.25rem,
diff --git a/src/app/pages/charts/chartjs/chartjs.component.scss b/src/app/pages/charts/chartjs/chartjs.component.scss
index 6c4e1891..e7896781 100644
--- a/src/app/pages/charts/chartjs/chartjs.component.scss
+++ b/src/app/pages/charts/chartjs/chartjs.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   ngx-chartjs-pie,
diff --git a/src/app/pages/charts/d3/d3.component.scss b/src/app/pages/charts/d3/d3.component.scss
index 3ddb4e8f..9ae62ecc 100644
--- a/src/app/pages/charts/d3/d3.component.scss
+++ b/src/app/pages/charts/d3/d3.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   ngx-d3-bar,
diff --git a/src/app/pages/charts/echarts/echarts.component.scss b/src/app/pages/charts/echarts/echarts.component.scss
index 6f3cb3c8..68f95775 100644
--- a/src/app/pages/charts/echarts/echarts.component.scss
+++ b/src/app/pages/charts/echarts/echarts.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   ngx-echarts-pie,
diff --git a/src/app/pages/dashboard/contacts/contacts.component.scss b/src/app/pages/dashboard/contacts/contacts.component.scss
index 787ed0be..18febc83 100644
--- a/src/app/pages/dashboard/contacts/contacts.component.scss
+++ b/src/app/pages/dashboard/contacts/contacts.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-card {
diff --git a/src/app/pages/dashboard/dashboard.component.scss b/src/app/pages/dashboard/dashboard.component.scss
index c9e3499f..1119de46 100644
--- a/src/app/pages/dashboard/dashboard.component.scss
+++ b/src/app/pages/dashboard/dashboard.component.scss
@@ -1,6 +1,6 @@
-@import '../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   .solar-card nb-card-header {
diff --git a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss
index 3debfa43..a20bc831 100644
--- a/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss
+++ b/src/app/pages/dashboard/electricity/electricity-chart/electricity-chart.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/dashboard/electricity/electricity.component.scss b/src/app/pages/dashboard/electricity/electricity.component.scss
index 6c976689..7710979d 100644
--- a/src/app/pages/dashboard/electricity/electricity.component.scss
+++ b/src/app/pages/dashboard/electricity/electricity.component.scss
@@ -1,6 +1,6 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/dashboard/kitten/kitten.component.scss b/src/app/pages/dashboard/kitten/kitten.component.scss
index 5aa67881..7020f80f 100644
--- a/src/app/pages/dashboard/kitten/kitten.component.scss
+++ b/src/app/pages/dashboard/kitten/kitten.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/dashboard/rooms/player/player.component.scss b/src/app/pages/dashboard/rooms/player/player.component.scss
index bbe30efd..6511d7d4 100644
--- a/src/app/pages/dashboard/rooms/player/player.component.scss
+++ b/src/app/pages/dashboard/rooms/player/player.component.scss
@@ -1,6 +1,6 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   height: 100%;
diff --git a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
index d66ebb20..fc25906f 100644
--- a/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
+++ b/src/app/pages/dashboard/rooms/room-selector/room-selector.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/dashboard/rooms/rooms.component.scss b/src/app/pages/dashboard/rooms/rooms.component.scss
index 10869126..1d3f5241 100644
--- a/src/app/pages/dashboard/rooms/rooms.component.scss
+++ b/src/app/pages/dashboard/rooms/rooms.component.scss
@@ -1,6 +1,6 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   ngx-room-selector {
diff --git a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
index 567b323a..f1e370a9 100644
--- a/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
+++ b/src/app/pages/dashboard/security-cameras/security-cameras.component.scss
@@ -1,6 +1,6 @@
-@import '../../../@theme/styles/themes';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '~bootstrap/scss/mixins/breakpoints';
+@use '../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/dashboard/solar/solar.component.scss b/src/app/pages/dashboard/solar/solar.component.scss
index ff36cdf6..babcd681 100644
--- a/src/app/pages/dashboard/solar/solar.component.scss
+++ b/src/app/pages/dashboard/solar/solar.component.scss
@@ -1,6 +1,4 @@
-@import '../../../@theme/styles/themes';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '~bootstrap/scss/mixins/breakpoints';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/dashboard/status-card/status-card.component.scss b/src/app/pages/dashboard/status-card/status-card.component.scss
index 03be02f5..489ee864 100644
--- a/src/app/pages/dashboard/status-card/status-card.component.scss
+++ b/src/app/pages/dashboard/status-card/status-card.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-card {
diff --git a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
index 0fa12c1a..55a5557a 100644
--- a/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature-dragger/temperature-dragger.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   position: relative;
diff --git a/src/app/pages/dashboard/temperature/temperature.component.scss b/src/app/pages/dashboard/temperature/temperature.component.scss
index cb447c11..4fb9a4cd 100644
--- a/src/app/pages/dashboard/temperature/temperature.component.scss
+++ b/src/app/pages/dashboard/temperature/temperature.component.scss
@@ -1,6 +1,4 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/dashboard/traffic/traffic.component.scss b/src/app/pages/dashboard/traffic/traffic.component.scss
index abe930ee..97c320c5 100644
--- a/src/app/pages/dashboard/traffic/traffic.component.scss
+++ b/src/app/pages/dashboard/traffic/traffic.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/dashboard/weather/weather.component.scss b/src/app/pages/dashboard/weather/weather.component.scss
index 2ac7e097..2cb3007b 100644
--- a/src/app/pages/dashboard/weather/weather.component.scss
+++ b/src/app/pages/dashboard/weather/weather.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
index 52cb2cab..b789cb26 100644
--- a/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
+++ b/src/app/pages/e-commerce/charts-panel/chart-panel-header/chart-panel-header.component.scss
@@ -1,6 +1,6 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   padding: 1.5rem 4.5rem;
diff --git a/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss b/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss
index dd8509a1..e7a270b8 100644
--- a/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss
+++ b/src/app/pages/e-commerce/charts-panel/chart-panel-summary/chart-panel-summary.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   .summary-container {
diff --git a/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss b/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss
index acf1a902..0eef1f75 100644
--- a/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss
+++ b/src/app/pages/e-commerce/charts-panel/charts-panel.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 $legend-all-orders-color: #00977e;
 $legend-payment-color: #6935ca;
diff --git a/src/app/pages/e-commerce/charts-panel/charts/charts-common.component.scss b/src/app/pages/e-commerce/charts-panel/charts/charts-common.component.scss
index 744a2377..2b49c218 100644
--- a/src/app/pages/e-commerce/charts-panel/charts/charts-common.component.scss
+++ b/src/app/pages/e-commerce/charts-panel/charts/charts-common.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   flex: 1;
diff --git a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss b/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss
index f323ef34..9e46b375 100644
--- a/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss
+++ b/src/app/pages/e-commerce/country-orders/chart/country-orders-chart.component.scss
@@ -1,6 +1,6 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   display: flex;
diff --git a/src/app/pages/e-commerce/country-orders/country-orders.component.scss b/src/app/pages/e-commerce/country-orders/country-orders.component.scss
index c5f8e697..41e375c6 100644
--- a/src/app/pages/e-commerce/country-orders/country-orders.component.scss
+++ b/src/app/pages/e-commerce/country-orders/country-orders.component.scss
@@ -1,6 +1,6 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss b/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
index 4971ddec..b309920a 100644
--- a/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
+++ b/src/app/pages/e-commerce/country-orders/map/country-orders-map.component.scss
@@ -1,6 +1,6 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss b/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss
index 231576c8..e42c4f34 100644
--- a/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss
+++ b/src/app/pages/e-commerce/earning-card/back-side/earning-card-back.component.scss
@@ -1,6 +1,6 @@
-@import '../../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   ngx-earning-pie-chart,
diff --git a/src/app/pages/e-commerce/earning-card/earning-card.component.scss b/src/app/pages/e-commerce/earning-card/earning-card.component.scss
index 293d2717..f09cb0c8 100644
--- a/src/app/pages/e-commerce/earning-card/earning-card.component.scss
+++ b/src/app/pages/e-commerce/earning-card/earning-card.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-card {
diff --git a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss
index f825da3d..e08a6f09 100644
--- a/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss
+++ b/src/app/pages/e-commerce/earning-card/front-side/earning-card-front.component.scss
@@ -1,5 +1,4 @@
-@import '../../../../@theme/styles/themes';
-@import '~@nebular/theme/styles/global/typography/typography';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   display: flex;
diff --git a/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss b/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss
index c8a6dfe6..bf3c493b 100644
--- a/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss
+++ b/src/app/pages/e-commerce/legend-chart/legend-chart.component.scss
@@ -1,6 +1,4 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   display: flex;
diff --git a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss
index 23f37b27..0d2f0738 100644
--- a/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss
+++ b/src/app/pages/e-commerce/profit-card/back-side/stats-card-back.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   display: flex;
diff --git a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss
index 03c74d66..e29ddebe 100644
--- a/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss
+++ b/src/app/pages/e-commerce/profit-card/front-side/stats-card-front.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   display: flex;
diff --git a/src/app/pages/e-commerce/profit-card/profit-card.component.scss b/src/app/pages/e-commerce/profit-card/profit-card.component.scss
index 70121041..a0affb2e 100644
--- a/src/app/pages/e-commerce/profit-card/profit-card.component.scss
+++ b/src/app/pages/e-commerce/profit-card/profit-card.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   .flip-icon {
diff --git a/src/app/pages/e-commerce/progress-section/progress-section.component.scss b/src/app/pages/e-commerce/progress-section/progress-section.component.scss
index 769aef6b..7bfd77c1 100644
--- a/src/app/pages/e-commerce/progress-section/progress-section.component.scss
+++ b/src/app/pages/e-commerce/progress-section/progress-section.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 $shadow-green: #00977e;
 
diff --git a/src/app/pages/e-commerce/slide-out/slide-out.component.scss b/src/app/pages/e-commerce/slide-out/slide-out.component.scss
index 4b232674..efa67431 100644
--- a/src/app/pages/e-commerce/slide-out/slide-out.component.scss
+++ b/src/app/pages/e-commerce/slide-out/slide-out.component.scss
@@ -1,6 +1,6 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   $slide-out-container-width: 40%;
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
index 00e2406e..17b628e8 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/back-side/traffic-back-card.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   display: flex;
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss
index 424bbb40..c0c4062a 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-bar/traffic-bar.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../../@theme/styles/themes';
+@use '../../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   display: flex;
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss
index 835388ad..0a366d7c 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/front-side/traffic-front-card.component.scss
@@ -1,6 +1,6 @@
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   overflow: auto;
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss
index b92c1db3..45e21e92 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-cards-header/traffic-cards-header.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-card-header {
diff --git a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
index 42f55746..e7374d72 100644
--- a/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
+++ b/src/app/pages/e-commerce/traffic-reveal-card/traffic-reveal-card.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   .toggle-icon {
diff --git a/src/app/pages/e-commerce/user-activity/user-activity.component.scss b/src/app/pages/e-commerce/user-activity/user-activity.component.scss
index 52c59a08..61ca15f7 100644
--- a/src/app/pages/e-commerce/user-activity/user-activity.component.scss
+++ b/src/app/pages/e-commerce/user-activity/user-activity.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-card-header {
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss
index 677d9baf..ece0b0ba 100644
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss
+++ b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics-chart/visitors-analytics-chart.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   display: block;
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
index b8af1e7b..00bc2362 100644
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
+++ b/src/app/pages/e-commerce/visitors-analytics/visitors-analytics.component.scss
@@ -1,6 +1,6 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   position: relative;
diff --git a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss
index 1d1c70db..a201c07d 100644
--- a/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss
+++ b/src/app/pages/e-commerce/visitors-analytics/visitors-statistics/visitors-statistics.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/extra-components/calendar-kit/calendar-kit.component.scss b/src/app/pages/extra-components/calendar-kit/calendar-kit.component.scss
index beb36ccb..ea38335d 100644
--- a/src/app/pages/extra-components/calendar-kit/calendar-kit.component.scss
+++ b/src/app/pages/extra-components/calendar-kit/calendar-kit.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-card-header {
diff --git a/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.scss b/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.scss
index 21a02e7f..7c28254c 100644
--- a/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.scss
+++ b/src/app/pages/extra-components/calendar-kit/month-cell/month-cell.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   padding: 1rem;
diff --git a/src/app/pages/extra-components/calendar/calendar.component.scss b/src/app/pages/extra-components/calendar/calendar.component.scss
index 3212c52d..d57f0bb5 100644
--- a/src/app/pages/extra-components/calendar/calendar.component.scss
+++ b/src/app/pages/extra-components/calendar/calendar.component.scss
@@ -1,6 +1,6 @@
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   .calendars {
diff --git a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss
index 4054a847..ce9dc999 100644
--- a/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss
+++ b/src/app/pages/extra-components/calendar/day-cell/day-cell.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   text-align: center;
diff --git a/src/app/pages/extra-components/chat/chat.component.scss b/src/app/pages/extra-components/chat/chat.component.scss
index eaf111da..2a57c808 100644
--- a/src/app/pages/extra-components/chat/chat.component.scss
+++ b/src/app/pages/extra-components/chat/chat.component.scss
@@ -1,7 +1,6 @@
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   ::ng-deep nb-layout-column {
diff --git a/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.scss b/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.scss
index ca85fb92..a29e8a45 100644
--- a/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.scss
+++ b/src/app/pages/extra-components/form-inputs/nebular-form-inputs.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   .inputs-group-margin-bottom {
diff --git a/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.scss b/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.scss
index 43809838..d06ac925 100644
--- a/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.scss
+++ b/src/app/pages/extra-components/form-inputs/nebular-select/nebular-select.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-select {
diff --git a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss
index c44ec134..493826e7 100644
--- a/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss
+++ b/src/app/pages/extra-components/progress-bar/interactive-progress-bar/interactive-progress-bar.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   .container {
diff --git a/src/app/pages/extra-components/progress-bar/progress-bar.component.scss b/src/app/pages/extra-components/progress-bar/progress-bar.component.scss
index 3fdcd622..c55e11e2 100644
--- a/src/app/pages/extra-components/progress-bar/progress-bar.component.scss
+++ b/src/app/pages/extra-components/progress-bar/progress-bar.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-progress-bar ~ nb-progress-bar {
diff --git a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.scss b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.scss
index a3c1c461..4017998c 100644
--- a/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.scss
+++ b/src/app/pages/extra-components/spinner/spinner-in-buttons/spinner-in-buttons.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   button {
diff --git a/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.scss b/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.scss
index 17bf08e4..7cc76dfb 100644
--- a/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.scss
+++ b/src/app/pages/extra-components/spinner/spinner-in-tabs/spinner-in-tabs.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-tab {
diff --git a/src/app/pages/extra-components/spinner/spinner.component.scss b/src/app/pages/extra-components/spinner/spinner.component.scss
index a8b9883e..4e86f77e 100644
--- a/src/app/pages/extra-components/spinner/spinner.component.scss
+++ b/src/app/pages/extra-components/spinner/spinner.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   button {
diff --git a/src/app/pages/forms/buttons/buttons.component.scss b/src/app/pages/forms/buttons/buttons.component.scss
index 71df8954..0283781b 100644
--- a/src/app/pages/forms/buttons/buttons.component.scss
+++ b/src/app/pages/forms/buttons/buttons.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   .buttons-row {
diff --git a/src/app/pages/forms/datepicker/datepicker.component.scss b/src/app/pages/forms/datepicker/datepicker.component.scss
index 96f55076..f10687bf 100644
--- a/src/app/pages/forms/datepicker/datepicker.component.scss
+++ b/src/app/pages/forms/datepicker/datepicker.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-card-body {
diff --git a/src/app/pages/layout/accordion/accordion.component.scss b/src/app/pages/layout/accordion/accordion.component.scss
index 33607860..a1b3e962 100644
--- a/src/app/pages/layout/accordion/accordion.component.scss
+++ b/src/app/pages/layout/accordion/accordion.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   .accordion-container:first-child {
diff --git a/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.scss b/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.scss
index e04756de..e224e580 100644
--- a/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.scss
+++ b/src/app/pages/layout/infinite-list/news-post-placeholder/news-post-placeholder.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 :host {
   display: block;
diff --git a/src/app/pages/layout/list/list.component.scss b/src/app/pages/layout/list/list.component.scss
index 683ca368..1866a954 100644
--- a/src/app/pages/layout/list/list.component.scss
+++ b/src/app/pages/layout/list/list.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   .list-card {
diff --git a/src/app/pages/maps/bubble/bubble-map.component.scss b/src/app/pages/maps/bubble/bubble-map.component.scss
index 7a090fc9..df6992d4 100644
--- a/src/app/pages/maps/bubble/bubble-map.component.scss
+++ b/src/app/pages/maps/bubble/bubble-map.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/maps/gmaps/gmaps.component.scss b/src/app/pages/maps/gmaps/gmaps.component.scss
index b6694cbf..4ed3e503 100644
--- a/src/app/pages/maps/gmaps/gmaps.component.scss
+++ b/src/app/pages/maps/gmaps/gmaps.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/maps/leaflet/leaflet.component.scss b/src/app/pages/maps/leaflet/leaflet.component.scss
index a953150c..875fa8ba 100644
--- a/src/app/pages/maps/leaflet/leaflet.component.scss
+++ b/src/app/pages/maps/leaflet/leaflet.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/maps/search-map/map/map.component.scss b/src/app/pages/maps/search-map/map/map.component.scss
index 13783ab3..f5066898 100644
--- a/src/app/pages/maps/search-map/map/map.component.scss
+++ b/src/app/pages/maps/search-map/map/map.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
 
diff --git a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.scss b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.scss
index 4839f6dc..d2fca164 100644
--- a/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.scss
+++ b/src/app/pages/modal-overlays/dialog/dialog-name-prompt/dialog-name-prompt.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   input {
diff --git a/src/app/pages/modal-overlays/dialog/dialog.component.scss b/src/app/pages/modal-overlays/dialog/dialog.component.scss
index 3941f022..358001f1 100644
--- a/src/app/pages/modal-overlays/dialog/dialog.component.scss
+++ b/src/app/pages/modal-overlays/dialog/dialog.component.scss
@@ -1,7 +1,6 @@
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   nb-card-body {
diff --git a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.scss b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.scss
index e6546040..da67fe10 100644
--- a/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.scss
+++ b/src/app/pages/modal-overlays/dialog/showcase-dialog/showcase-dialog.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-card {
diff --git a/src/app/pages/modal-overlays/popovers/popovers.component.scss b/src/app/pages/modal-overlays/popovers/popovers.component.scss
index cfc7a60c..0905afb4 100644
--- a/src/app/pages/modal-overlays/popovers/popovers.component.scss
+++ b/src/app/pages/modal-overlays/popovers/popovers.component.scss
@@ -1,5 +1,3 @@
-@import '~@nebular/theme/styles/core/mixins';
-
 nb-card-body {
   margin: 0 -0.5rem;
 
diff --git a/src/app/pages/modal-overlays/toastr/toastr.component.scss b/src/app/pages/modal-overlays/toastr/toastr.component.scss
index 1cfeca42..5e41f5eb 100644
--- a/src/app/pages/modal-overlays/toastr/toastr.component.scss
+++ b/src/app/pages/modal-overlays/toastr/toastr.component.scss
@@ -1,6 +1,4 @@
-@import '../../../@theme/styles/themes';
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   .position-select {
diff --git a/src/app/pages/modal-overlays/tooltip/tooltip.component.scss b/src/app/pages/modal-overlays/tooltip/tooltip.component.scss
index e4c650dd..7a598671 100644
--- a/src/app/pages/modal-overlays/tooltip/tooltip.component.scss
+++ b/src/app/pages/modal-overlays/tooltip/tooltip.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-card-body {
diff --git a/src/app/pages/modal-overlays/window/window-form/window-form.component.scss b/src/app/pages/modal-overlays/window/window-form/window-form.component.scss
index 9ef1b9a0..702b17a0 100644
--- a/src/app/pages/modal-overlays/window/window-form/window-form.component.scss
+++ b/src/app/pages/modal-overlays/window/window-form/window-form.component.scss
@@ -1,4 +1,4 @@
-@import '../../../../@theme/styles/themes';
+@use '../../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   ::ng-deep .form {
diff --git a/src/app/pages/modal-overlays/window/window.component.scss b/src/app/pages/modal-overlays/window/window.component.scss
index 1d412141..e2fd74d8 100644
--- a/src/app/pages/modal-overlays/window/window.component.scss
+++ b/src/app/pages/modal-overlays/window/window.component.scss
@@ -1,7 +1,6 @@
-@import '~bootstrap/scss/mixins/breakpoints';
-@import '~@nebular/theme/styles/global/breakpoints';
-
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
+@use '@nebular/theme/styles/global/breakpoints' as *;
+@import 'bootstrap/scss/mixins/breakpoints';
 
 @include nb-install-component() {
   button + button {
diff --git a/src/app/pages/pages.component.scss b/src/app/pages/pages.component.scss
index 69198093..2d5991cc 100755
--- a/src/app/pages/pages.component.scss
+++ b/src/app/pages/pages.component.scss
@@ -1,4 +1,4 @@
-@import '../@theme/styles/themes';
+@use '../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   ::ng-deep router-outlet + * {
diff --git a/src/app/pages/tables/smart-table/smart-table.component.scss b/src/app/pages/tables/smart-table/smart-table.component.scss
index cdfde5b5..fa63a3a4 100644
--- a/src/app/pages/tables/smart-table/smart-table.component.scss
+++ b/src/app/pages/tables/smart-table/smart-table.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-card {
diff --git a/src/app/pages/tables/tree-grid/tree-grid.component.scss b/src/app/pages/tables/tree-grid/tree-grid.component.scss
index 755b885b..eb8be248 100644
--- a/src/app/pages/tables/tree-grid/tree-grid.component.scss
+++ b/src/app/pages/tables/tree-grid/tree-grid.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   button[nbTreeGridRowToggle] {
diff --git a/src/app/pages/ui-features/grid/grid.component.scss b/src/app/pages/ui-features/grid/grid.component.scss
index 668b68a0..419ca930 100644
--- a/src/app/pages/ui-features/grid/grid.component.scss
+++ b/src/app/pages/ui-features/grid/grid.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   .show-grid {
diff --git a/src/app/pages/ui-features/icons/icons.component.scss b/src/app/pages/ui-features/icons/icons.component.scss
index 786e7cd6..67c76fa4 100644
--- a/src/app/pages/ui-features/icons/icons.component.scss
+++ b/src/app/pages/ui-features/icons/icons.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {
   nb-card-body {
diff --git a/src/app/pages/ui-features/typography/typography.component.scss b/src/app/pages/ui-features/typography/typography.component.scss
index 18f3a73f..4c28c872 100644
--- a/src/app/pages/ui-features/typography/typography.component.scss
+++ b/src/app/pages/ui-features/typography/typography.component.scss
@@ -1,4 +1,4 @@
-@import '../../../@theme/styles/themes';
+@use '../../../@theme/styles/themes' as *;
 
 @include nb-install-component() {