diff --git a/examples/basic-angular/src/app/app.component.scss b/examples/basic-angular/src/app/app.component.scss
index da634b26..7a6cb1c3 100644
--- a/examples/basic-angular/src/app/app.component.scss
+++ b/examples/basic-angular/src/app/app.component.scss
@@ -1,5 +1,5 @@
 
-@import '../style/abstracts/_variables';
+@use '../style/abstracts/variables' as *;
 
 
 .toolbar {
@@ -133,4 +133,4 @@
 
 .clickPoint__outerCircle {
     background-color: $color-grey-light;   
-  }
\ No newline at end of file
+  }
diff --git a/examples/basic-angular/src/app/history/history.component.scss b/examples/basic-angular/src/app/history/history.component.scss
index a641c0e5..b93836af 100644
--- a/examples/basic-angular/src/app/history/history.component.scss
+++ b/examples/basic-angular/src/app/history/history.component.scss
@@ -1,4 +1,4 @@
-@import '../../style/abstracts/_variables';
+@use '../../style/abstracts/variables' as *;
 
 .message-container {
     display: flex; 
@@ -58,4 +58,4 @@
 
         font-size: 1rem;
     }
-}
\ No newline at end of file
+}
diff --git a/examples/basic-angular/src/app/status/status.component.scss b/examples/basic-angular/src/app/status/status.component.scss
index a2765238..b52b029c 100644
--- a/examples/basic-angular/src/app/status/status.component.scss
+++ b/examples/basic-angular/src/app/status/status.component.scss
@@ -1,4 +1,4 @@
-@import '../../style/abstracts/_variables';
+@use '../../style/abstracts/variables' as *;
 
 :host {
     position: absolute;
diff --git a/examples/basic-angular/src/style/base/_base.scss b/examples/basic-angular/src/style/base/_base.scss
index 392cb5ef..94c909bf 100644
--- a/examples/basic-angular/src/style/base/_base.scss
+++ b/examples/basic-angular/src/style/base/_base.scss
@@ -1,3 +1,5 @@
+@use '../abstracts/variables' as *;
+
 /* reset browser-styles by using the universal selector */
 *,
 *::after,
@@ -25,4 +27,4 @@ body {
     line-height: 1.7;
     color: $color-grey-dark; 
     margin: 0;
-}
\ No newline at end of file
+}
diff --git a/examples/basic-angular/src/styles.scss b/examples/basic-angular/src/styles.scss
index ba8532ab..aa982c9b 100644
--- a/examples/basic-angular/src/styles.scss
+++ b/examples/basic-angular/src/styles.scss
@@ -1,4 +1,3 @@
-@import 'style/abstracts/_variables';
-@import 'style/base/typography';
-@import 'style/base/base';
-
+@use 'style/abstracts/variables';
+@use 'style/base/typography';
+@use 'style/base/base';
diff --git a/tools/emulator/src/app/canvas/canvas.component.sass b/tools/emulator/src/app/canvas/canvas.component.sass
index 04aede90..e0ada8de 100644
--- a/tools/emulator/src/app/canvas/canvas.component.sass
+++ b/tools/emulator/src/app/canvas/canvas.component.sass
@@ -1,4 +1,4 @@
-@import '../../styles'
+@use '../../styles' as *
 
 .canvas
   // background: $grey-darker
@@ -15,4 +15,3 @@
   opacity: 0.75
   z-index: -1
   background-color: #fff
-
diff --git a/tools/emulator/src/app/sidebar/sidebar.component.sass b/tools/emulator/src/app/sidebar/sidebar.component.sass
index c368bcf7..22b2752e 100644
--- a/tools/emulator/src/app/sidebar/sidebar.component.sass
+++ b/tools/emulator/src/app/sidebar/sidebar.component.sass
@@ -1,4 +1,4 @@
-@import '../../styles'
+@use '../../styles' as *
 
 .connection-indicator 
   position: absolute
@@ -145,7 +145,7 @@
   &__tooltip
     color: $grey
 
-@include media-breakpoint-down(sm) 
+@media (max-width: 767.98px)
 
   .sidebar
     &__container
@@ -170,4 +170,3 @@
 
 
   
-
diff --git a/tools/emulator/src/app/timeline/timeline-canvas/timeline-canvas.component.sass b/tools/emulator/src/app/timeline/timeline-canvas/timeline-canvas.component.sass
index 5505d025..48c6b11d 100644
--- a/tools/emulator/src/app/timeline/timeline-canvas/timeline-canvas.component.sass
+++ b/tools/emulator/src/app/timeline/timeline-canvas/timeline-canvas.component.sass
@@ -1,4 +1,4 @@
-@import '../../../styles'
+@use '../../../styles' as *
 
 :host
     height: calc(100% - #{$margin-default})
@@ -9,4 +9,4 @@
     box-sizing: border-box
     
     &::-webkit-scrollbar
-      display: none
\ No newline at end of file
+      display: none
diff --git a/tools/emulator/src/app/timeline/timeline.component.sass b/tools/emulator/src/app/timeline/timeline.component.sass
index 6c601792..adb11e9b 100644
--- a/tools/emulator/src/app/timeline/timeline.component.sass
+++ b/tools/emulator/src/app/timeline/timeline.component.sass
@@ -1,4 +1,4 @@
-@import '../../styles'
+@use '../../styles' as *
 
 .timeline
     &__container
@@ -21,4 +21,4 @@
         text-align: center
         line-height: 1
 
-            
\ No newline at end of file
+            
diff --git a/tools/emulator/src/styles.sass b/tools/emulator/src/styles.sass
index 6a1b92ab..5439e6f7 100644
--- a/tools/emulator/src/styles.sass
+++ b/tools/emulator/src/styles.sass
@@ -1,14 +1,5 @@
-@import 'bootstrap/dist/css/bootstrap.min.css'
-@import '@fortawesome/fontawesome-free/css/all.min.css'
-
-@import "bootstrap/scss/functions"
-@import "bootstrap/scss/variables"
-@import "bootstrap/scss/mixins/breakpoints"
-
-@include media-breakpoint-down(xs)
-@include media-breakpoint-down(sm)
-@include media-breakpoint-down(md)
-@include media-breakpoint-down(lg)
+@use 'bootstrap/dist/css/bootstrap.min.css'
+@use '@fortawesome/fontawesome-free/css/all.min.css'
 
 $white: #ffffff
 $grey-lightest: #f7f7f7
diff --git a/tools/gestenrecorder/src/styles.scss b/tools/gestenrecorder/src/styles.scss
index 9f7507e3..e97dc964 100644
--- a/tools/gestenrecorder/src/styles.scss
+++ b/tools/gestenrecorder/src/styles.scss
@@ -1,14 +1,20 @@
 @use 'reflex' as reflex;
-
-@import 'bootstrap/dist/css/bootstrap.min.css';
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
-@import 'bootstrap/scss/mixins/breakpoints';
-
-@include media-breakpoint-down(xs);
-@include media-breakpoint-down(sm);
-@include media-breakpoint-down(md);
-@include media-breakpoint-down(lg);
+@use 'bootstrap/dist/css/bootstrap.min.css';
+@use 'bootstrap/scss/mixins/breakpoints' as bootstrap-breakpoints;
+
+$bootstrap-grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1400px,
+);
+
+@include bootstrap-breakpoints.media-breakpoint-down(xs, $bootstrap-grid-breakpoints);
+@include bootstrap-breakpoints.media-breakpoint-down(sm, $bootstrap-grid-breakpoints);
+@include bootstrap-breakpoints.media-breakpoint-down(md, $bootstrap-grid-breakpoints);
+@include bootstrap-breakpoints.media-breakpoint-down(lg, $bootstrap-grid-breakpoints);
 
 $white: #ffffff;
 $grey-lightest: #f7f7f7;