diff --git a/packages/components/src/components/bal-accordion/bal-accordion.sass b/packages/components/src/components/bal-accordion/bal-accordion.sass
index 0930e97b62..3ba3d623bb 100644
--- a/packages/components/src/components/bal-accordion/bal-accordion.sass
+++ b/packages/components/src/components/bal-accordion/bal-accordion.sass
@@ -1,77 +1,6 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 bal-accordion,
 .bal-accordion
   position: static
   display: block
-
-  // bal-accordion {
-//   display: block;
-//   border-radius: $radius-large;
-
-//   & > bal-button,
-//   & bal-button > button {
-//     border-radius: $radius-large;
-//   }
-
-//   span.trigger-label {
-//     display: flex;
-//     justify-content: center;
-//     align-items: center;
-
-//     span.label {
-//       font-size: $size-normal;
-//       line-height: $size-normal;
-//     }
-//   }
-
-//   bal-icon {
-//     margin-right: 8px;
-//   }
-
-//   .accordion-content.is-info {
-//     border-top: 1px solid $blue-2;
-//   }
-
-//   .accordion-content {
-//     border-bottom-left-radius: $radius-large;
-//     border-bottom-right-radius: $radius-large;
-//   }
-
-//   &.bal-accordion-light {
-//     border-bottom: 2px solid $blue;
-//     border-radius: 0;
-
-//     button {
-//       padding-left: 0;
-//       padding-right: 0;
-//       border: none !important;
-
-//       span.button-label {
-//         flex: 1;
-//         text-align: left;
-//       }
-
-//       bal-icon.icon-right {
-//         margin-right: 0px !important;
-//       }
-
-//       &:hover,
-//       &.is-hovered,
-//       &:focus,
-//       &:focus-visible,
-//       &.is-focused,
-//       &:active,
-//       &.is-active {
-//         background: transparent !important;
-//       }
-//     }
-//   }
-
-//   &:not(.bal-accordion-light) {
-//     .accordion-content {
-//       & > .p-5 {
-//         padding-top: 0 !important;
-//         margin-bottom: 0 !important;
-//       }
-//     }
-//   }
-// }
diff --git a/packages/components/src/components/bal-accordion/bal-accordion.tsx b/packages/components/src/components/bal-accordion/bal-accordion.tsx
index 3b8a06327b..92107f5132 100644
--- a/packages/components/src/components/bal-accordion/bal-accordion.tsx
+++ b/packages/components/src/components/bal-accordion/bal-accordion.tsx
@@ -4,6 +4,9 @@ import { Events } from '../../types'
 
 @Component({
   tag: 'bal-accordion',
+  styleUrls: {
+    css: 'bal-accordion.sass',
+  },
 })
 export class Accordion {
   private didInit = false
diff --git a/packages/components/src/components/bal-button/bal-button.sass b/packages/components/src/components/bal-button/bal-button.sass
index 2c7ec52c8b..d59beb085e 100644
--- a/packages/components/src/components/bal-button/bal-button.sass
+++ b/packages/components/src/components/bal-button/bal-button.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 bal-button,
 .bal-button
   display: inline-block
diff --git a/packages/components/src/components/bal-button/bal-button.tsx b/packages/components/src/components/bal-button/bal-button.tsx
index 005dfad217..54a00e5d4c 100644
--- a/packages/components/src/components/bal-button/bal-button.tsx
+++ b/packages/components/src/components/bal-button/bal-button.tsx
@@ -3,6 +3,9 @@ import { Props } from '../../types'
 
 @Component({
   tag: 'bal-button',
+  styleUrls: {
+    css: 'bal-button.sass',
+  },
 })
 export class Button implements ComponentInterface {
   @Element() el!: HTMLElement
diff --git a/packages/components/src/components/bal-card/bal-card.sass b/packages/components/src/components/bal-card/bal-card.sass
index e0b75a147e..33bfd550d0 100644
--- a/packages/components/src/components/bal-card/bal-card.sass
+++ b/packages/components/src/components/bal-card/bal-card.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 =card-spacing($spacing: 1rem)
   & > :not(bal-badge):not(bal-tag):first-child
     padding-top: $spacing
diff --git a/packages/components/src/components/bal-card/bal-card.tsx b/packages/components/src/components/bal-card/bal-card.tsx
index bad695b4cb..485a92a920 100644
--- a/packages/components/src/components/bal-card/bal-card.tsx
+++ b/packages/components/src/components/bal-card/bal-card.tsx
@@ -4,6 +4,9 @@ import { Props } from '../../types'
 
 @Component({
   tag: 'bal-card',
+  styleUrls: {
+    css: 'bal-card.sass',
+  },
 })
 export class BalCard {
   /**
diff --git a/packages/components/src/components/bal-close/bal-close.sass b/packages/components/src/components/bal-close/bal-close.sass
index dafc66dc86..b5bc57d9d1 100644
--- a/packages/components/src/components/bal-close/bal-close.sass
+++ b/packages/components/src/components/bal-close/bal-close.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(close)
   position: static
   display: inline-block
diff --git a/packages/components/src/components/bal-close/bal-close.tsx b/packages/components/src/components/bal-close/bal-close.tsx
index ed428686d3..370b16de75 100644
--- a/packages/components/src/components/bal-close/bal-close.tsx
+++ b/packages/components/src/components/bal-close/bal-close.tsx
@@ -5,6 +5,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-close',
+  styleUrls: {
+    css: 'bal-close.sass',
+  },
 })
 export class Close implements ComponentInterface {
   @Element() el!: HTMLElement
diff --git a/packages/components/src/components/bal-data/bal-data.sass b/packages/components/src/components/bal-data/bal-data.sass
index 9122a9ce56..e841ad6a59 100644
--- a/packages/components/src/components/bal-data/bal-data.sass
+++ b/packages/components/src/components/bal-data/bal-data.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(data)
   position: relative
   display: flex
diff --git a/packages/components/src/components/bal-data/bal-data.tsx b/packages/components/src/components/bal-data/bal-data.tsx
index e176b526fb..49f1a815bd 100644
--- a/packages/components/src/components/bal-data/bal-data.tsx
+++ b/packages/components/src/components/bal-data/bal-data.tsx
@@ -3,6 +3,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-data',
+  styleUrls: {
+    css: 'bal-data.sass',
+  },
 })
 export class Data {
   @Element() element!: HTMLElement
diff --git a/packages/components/src/components/bal-footer/bal-footer.sass b/packages/components/src/components/bal-footer/bal-footer.sass
index b7a6e43681..21dd3faa76 100644
--- a/packages/components/src/components/bal-footer/bal-footer.sass
+++ b/packages/components/src/components/bal-footer/bal-footer.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(footer)
   +unselectable
   display: block
diff --git a/packages/components/src/components/bal-footer/bal-footer.tsx b/packages/components/src/components/bal-footer/bal-footer.tsx
index a88e6abadd..5027ba9ed8 100644
--- a/packages/components/src/components/bal-footer/bal-footer.tsx
+++ b/packages/components/src/components/bal-footer/bal-footer.tsx
@@ -14,6 +14,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-footer',
+  styleUrls: {
+    css: 'bal-footer.sass',
+  },
 })
 export class Footer implements BalConfigObserver {
   @State() links: FooterLink[] = []
diff --git a/packages/components/src/components/bal-heading/bal-heading.sass b/packages/components/src/components/bal-heading/bal-heading.sass
index aaeba4fa33..93b8a8eaef 100644
--- a/packages/components/src/components/bal-heading/bal-heading.sass
+++ b/packages/components/src/components/bal-heading/bal-heading.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 bal-heading,
 .bal-heading
   display: block
diff --git a/packages/components/src/components/bal-heading/bal-heading.tsx b/packages/components/src/components/bal-heading/bal-heading.tsx
index bacab67df4..5bb121e56d 100644
--- a/packages/components/src/components/bal-heading/bal-heading.tsx
+++ b/packages/components/src/components/bal-heading/bal-heading.tsx
@@ -3,6 +3,9 @@ import { Props } from '../../types'
 
 @Component({
   tag: 'bal-heading',
+  styleUrls: {
+    css: 'bal-heading.sass',
+  },
 })
 export class Heading {
   /**
diff --git a/packages/components/src/components/bal-hint/bal-hint.sass b/packages/components/src/components/bal-hint/bal-hint.sass
index 7bf34bedf2..ccc5ce0697 100644
--- a/packages/components/src/components/bal-hint/bal-hint.sass
+++ b/packages/components/src/components/bal-hint/bal-hint.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(hint)
   +unselectable
   display: inline-block
diff --git a/packages/components/src/components/bal-hint/bal-hint.tsx b/packages/components/src/components/bal-hint/bal-hint.tsx
index 3ffbd864b2..4775e7df43 100644
--- a/packages/components/src/components/bal-hint/bal-hint.tsx
+++ b/packages/components/src/components/bal-hint/bal-hint.tsx
@@ -8,6 +8,9 @@ import { ResizeHandler } from '../../utils/resize'
 
 @Component({
   tag: 'bal-hint',
+  styleUrls: {
+    css: 'bal-hint.sass',
+  },
 })
 export class Hint implements BalConfigObserver {
   @Element() element!: HTMLElement
diff --git a/packages/components/src/components/bal-icon/bal-icon.sass b/packages/components/src/components/bal-icon/bal-icon.sass
index 48560bb437..c24c48176b 100644
--- a/packages/components/src/components/bal-icon/bal-icon.sass
+++ b/packages/components/src/components/bal-icon/bal-icon.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 =iconSize($size: 1rem)
   width: $size
   max-height: $size
diff --git a/packages/components/src/components/bal-icon/bal-icon.tsx b/packages/components/src/components/bal-icon/bal-icon.tsx
index d8bbba09b3..317d4fe82a 100644
--- a/packages/components/src/components/bal-icon/bal-icon.tsx
+++ b/packages/components/src/components/bal-icon/bal-icon.tsx
@@ -7,6 +7,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-icon',
+  styleUrls: {
+    css: 'bal-icon.sass',
+  },
 })
 export class Icon {
   /**
diff --git a/packages/components/src/components/bal-list/bal-list.sass b/packages/components/src/components/bal-list/bal-list.sass
index 7014c886d2..b9869f1cce 100644
--- a/packages/components/src/components/bal-list/bal-list.sass
+++ b/packages/components/src/components/bal-list/bal-list.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 .bal-list,
 .bal-list__item,
 .bal-list__item > a,
diff --git a/packages/components/src/components/bal-list/bal-list.tsx b/packages/components/src/components/bal-list/bal-list.tsx
index c240a8c0b7..bb6703a94d 100644
--- a/packages/components/src/components/bal-list/bal-list.tsx
+++ b/packages/components/src/components/bal-list/bal-list.tsx
@@ -4,6 +4,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-list',
+  styleUrls: {
+    css: 'bal-list.sass',
+  },
 })
 export class List {
   /**
diff --git a/packages/components/src/components/bal-navbar/bal-navbar.sass b/packages/components/src/components/bal-navbar/bal-navbar.sass
index f1302c024e..be98641759 100644
--- a/packages/components/src/components/bal-navbar/bal-navbar.sass
+++ b/packages/components/src/components/bal-navbar/bal-navbar.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(navbar)
   +unselectable
   position: relative
diff --git a/packages/components/src/components/bal-navbar/bal-navbar.tsx b/packages/components/src/components/bal-navbar/bal-navbar.tsx
index 9cf3a77679..7ffa8cf28e 100644
--- a/packages/components/src/components/bal-navbar/bal-navbar.tsx
+++ b/packages/components/src/components/bal-navbar/bal-navbar.tsx
@@ -4,6 +4,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-navbar',
+  styleUrls: {
+    css: 'bal-navbar.sass',
+  },
 })
 export class Navbar {
   @Element() element!: HTMLElement
diff --git a/packages/components/src/components/bal-navigation/bal-navigation.sass b/packages/components/src/components/bal-navigation/bal-navigation.sass
index 15918c5f3e..69677abc61 100644
--- a/packages/components/src/components/bal-navigation/bal-navigation.sass
+++ b/packages/components/src/components/bal-navigation/bal-navigation.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 :root
   --bal-nav-main-mobile-height: 100vh
 
diff --git a/packages/components/src/components/bal-navigation/bal-navigation.tsx b/packages/components/src/components/bal-navigation/bal-navigation.tsx
index 8079aeb448..84618b4807 100644
--- a/packages/components/src/components/bal-navigation/bal-navigation.tsx
+++ b/packages/components/src/components/bal-navigation/bal-navigation.tsx
@@ -10,6 +10,9 @@ import { ResizeHandler } from '../../utils/resize'
 
 @Component({
   tag: 'bal-navigation',
+  styleUrls: {
+    css: 'bal-navigation.sass',
+  },
 })
 export class Navigation implements ComponentInterface {
   @Element() el!: HTMLElement
diff --git a/packages/components/src/components/bal-pagination/bal-pagination.sass b/packages/components/src/components/bal-pagination/bal-pagination.sass
index 5b29549473..72f7cbdfca 100644
--- a/packages/components/src/components/bal-pagination/bal-pagination.sass
+++ b/packages/components/src/components/bal-pagination/bal-pagination.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(pagination)
   +unselectable
   display: block
@@ -76,7 +78,7 @@
 
       +element(tab)
         flex: 1
-    
+
       &.is-disabled
         li
           pointer-events: none
diff --git a/packages/components/src/components/bal-pagination/bal-pagination.tsx b/packages/components/src/components/bal-pagination/bal-pagination.tsx
index bcf17c14a5..5fde7e1e5c 100644
--- a/packages/components/src/components/bal-pagination/bal-pagination.tsx
+++ b/packages/components/src/components/bal-pagination/bal-pagination.tsx
@@ -4,6 +4,9 @@ import { Props } from '../../types'
 
 @Component({
   tag: 'bal-pagination',
+  styleUrls: {
+    css: 'bal-pagination.sass',
+  },
 })
 export class Pagination {
   @Element() el!: HTMLBalPaginationElement
diff --git a/packages/components/src/components/bal-popover/bal-popover.sass b/packages/components/src/components/bal-popover/bal-popover.sass
index 595a8906e9..3694417b75 100644
--- a/packages/components/src/components/bal-popover/bal-popover.sass
+++ b/packages/components/src/components/bal-popover/bal-popover.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 :root
   --bal-popover-backdrop-height: 100vh
   --bal-popover-content-height-top-nav: 100vh
@@ -126,4 +128,4 @@
       font-family: var(--bal-font-family-text)
       font-size: var(--bal-size-small)
       .bal-popover__content__inner
-        padding: var(--bal-space-x-small)
\ No newline at end of file
+        padding: var(--bal-space-x-small)
diff --git a/packages/components/src/components/bal-popover/bal-popover.tsx b/packages/components/src/components/bal-popover/bal-popover.tsx
index bbf662f03c..8f30c821d7 100644
--- a/packages/components/src/components/bal-popover/bal-popover.tsx
+++ b/packages/components/src/components/bal-popover/bal-popover.tsx
@@ -15,6 +15,9 @@ export interface PopoverPresentOptions {
 
 @Component({
   tag: 'bal-popover',
+  styleUrls: {
+    css: 'bal-popover.sass',
+  },
 })
 export class Popover {
   private popoverId = `bal-po-${PopoverIds++}`
diff --git a/packages/components/src/components/bal-shape/bal-shape.sass b/packages/components/src/components/bal-shape/bal-shape.sass
index 24bef1f109..c15644b49b 100644
--- a/packages/components/src/components/bal-shape/bal-shape.sass
+++ b/packages/components/src/components/bal-shape/bal-shape.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(shape)
   display: block
   overflow: hidden
@@ -19,4 +21,4 @@
   +modifier(is-rotation-180)
     transform: rotate(180deg)
   +modifier(is-rotation-270)
-    transform: rotate(270deg)
\ No newline at end of file
+    transform: rotate(270deg)
diff --git a/packages/components/src/components/bal-shape/bal-shape.tsx b/packages/components/src/components/bal-shape/bal-shape.tsx
index c08460d785..33944e8e92 100644
--- a/packages/components/src/components/bal-shape/bal-shape.tsx
+++ b/packages/components/src/components/bal-shape/bal-shape.tsx
@@ -5,6 +5,9 @@ import { BaloiseDesignToken } from '@baloise/design-system-tokens'
 
 @Component({
   tag: 'bal-shape',
+  styleUrls: {
+    css: 'bal-shape.sass',
+  },
 })
 export class Shape implements ComponentInterface {
   @Element() el!: HTMLElement
diff --git a/packages/components/src/components/bal-spinner/bal-spinner.tsx b/packages/components/src/components/bal-spinner/bal-spinner.tsx
index 5322b9211e..4643a16c65 100644
--- a/packages/components/src/components/bal-spinner/bal-spinner.tsx
+++ b/packages/components/src/components/bal-spinner/bal-spinner.tsx
@@ -6,6 +6,9 @@ import { flatten } from 'lottie-colorify'
 
 @Component({
   tag: 'bal-spinner',
+  styleUrls: {
+    css: 'bal-spinner.sass',
+  },
 })
 export class Spinner {
   animation!: AnimationItem
diff --git a/packages/components/src/components/bal-stage/bal-stage.sass b/packages/components/src/components/bal-stage/bal-stage.sass
index b4abed0331..b75a2f73e6 100644
--- a/packages/components/src/components/bal-stage/bal-stage.sass
+++ b/packages/components/src/components/bal-stage/bal-stage.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(stage)
   display: block
   position: relative
diff --git a/packages/components/src/components/bal-stage/bal-stage.tsx b/packages/components/src/components/bal-stage/bal-stage.tsx
index 964a4bb35b..d2e937f734 100644
--- a/packages/components/src/components/bal-stage/bal-stage.tsx
+++ b/packages/components/src/components/bal-stage/bal-stage.tsx
@@ -4,6 +4,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-stage',
+  styleUrls: {
+    css: 'bal-stage.sass',
+  },
 })
 export class Stage implements ComponentInterface {
   /**
diff --git a/packages/components/src/components/bal-table/bal-table.sass b/packages/components/src/components/bal-table/bal-table.sass
index 4a85e740a3..53ce6849f2 100644
--- a/packages/components/src/components/bal-table/bal-table.sass
+++ b/packages/components/src/components/bal-table/bal-table.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(table)
   display: block
   position: static
diff --git a/packages/components/src/components/bal-table/bal-table.tsx b/packages/components/src/components/bal-table/bal-table.tsx
index af1b4c2fa8..82d176ac28 100644
--- a/packages/components/src/components/bal-table/bal-table.tsx
+++ b/packages/components/src/components/bal-table/bal-table.tsx
@@ -3,6 +3,9 @@ import { BEM } from '../../utils/bem'
 
 @Component({
   tag: 'bal-table',
+  styleUrls: {
+    css: 'bal-table.sass',
+  },
 })
 export class Table implements ComponentInterface {
   @Element() el!: HTMLElement
diff --git a/packages/components/src/components/bal-tabs/bal-tabs.sass b/packages/components/src/components/bal-tabs/bal-tabs.sass
index 40dfb2be14..4ff9d3a4f7 100644
--- a/packages/components/src/components/bal-tabs/bal-tabs.sass
+++ b/packages/components/src/components/bal-tabs/bal-tabs.sass
@@ -1,3 +1,4 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
 @import './bal-tabs__steps'
 
 +block(tabs)
diff --git a/packages/components/src/components/bal-tabs/bal-tabs.tsx b/packages/components/src/components/bal-tabs/bal-tabs.tsx
index 80b51e2066..32c2d9152a 100644
--- a/packages/components/src/components/bal-tabs/bal-tabs.tsx
+++ b/packages/components/src/components/bal-tabs/bal-tabs.tsx
@@ -12,6 +12,9 @@ import { ResizeHandler } from '../../utils/resize'
 
 @Component({
   tag: 'bal-tabs',
+  styleUrls: {
+    css: 'bal-tabs.sass',
+  },
 })
 export class Tabs {
   @Element() el!: HTMLElement
diff --git a/packages/components/src/components/bal-tabs/bal-tabs__steps.sass b/packages/components/src/components/bal-tabs/bal-tabs__steps.sass
index 0e89fb8d19..d955f60f73 100644
--- a/packages/components/src/components/bal-tabs/bal-tabs__steps.sass
+++ b/packages/components/src/components/bal-tabs/bal-tabs__steps.sass
@@ -112,7 +112,7 @@
             color: var(--bal-color-text-disabled)
           +tablet
             display: block
-            font-family: $title-family
+            font-family: var(--bal-font-family-title)
             font-weight: 700
             text-align: center
             width: 100%
diff --git a/packages/components/src/components/bal-text/bal-text.sass b/packages/components/src/components/bal-text/bal-text.sass
index a1b187150c..5c19400d07 100644
--- a/packages/components/src/components/bal-text/bal-text.sass
+++ b/packages/components/src/components/bal-text/bal-text.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 bal-text,
 .bal-text
   box-sizing: content-box
diff --git a/packages/components/src/components/bal-text/bal-text.tsx b/packages/components/src/components/bal-text/bal-text.tsx
index 1054a73723..7767c97589 100644
--- a/packages/components/src/components/bal-text/bal-text.tsx
+++ b/packages/components/src/components/bal-text/bal-text.tsx
@@ -3,6 +3,9 @@ import { Props } from '../../types'
 
 @Component({
   tag: 'bal-text',
+  styleUrls: {
+    css: 'bal-text.sass',
+  },
 })
 export class Text {
   /**
diff --git a/packages/components/src/components/form/bal-datepicker/bal-datepicker.sass b/packages/components/src/components/form/bal-datepicker/bal-datepicker.sass
index c0d1bce082..afb4348bb0 100644
--- a/packages/components/src/components/form/bal-datepicker/bal-datepicker.sass
+++ b/packages/components/src/components/form/bal-datepicker/bal-datepicker.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(datepicker)
   display: block
   font-family: var(--bal-font-family-text)
diff --git a/packages/components/src/components/form/bal-datepicker/bal-datepicker.tsx b/packages/components/src/components/form/bal-datepicker/bal-datepicker.tsx
index ff86eb7946..3792ea4361 100644
--- a/packages/components/src/components/form/bal-datepicker/bal-datepicker.tsx
+++ b/packages/components/src/components/form/bal-datepicker/bal-datepicker.tsx
@@ -71,6 +71,9 @@ import { ResizeHandler } from '../../../utils/resize'
 
 @Component({
   tag: 'bal-datepicker',
+  styleUrls: {
+    css: 'bal-datepicker.sass',
+  },
 })
 export class Datepicker implements ComponentInterface, BalConfigObserver, FormInput<string | undefined> {
   private inputId = `bal-dp-${datepickerIds++}`
diff --git a/packages/components/src/components/form/bal-field/bal-field.sass b/packages/components/src/components/form/bal-field/bal-field.sass
index 28c2d17091..3412cd962d 100644
--- a/packages/components/src/components/form/bal-field/bal-field.sass
+++ b/packages/components/src/components/form/bal-field/bal-field.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +blocks(field, field-label, field-control, field-message, field-hint)
   display: block
   position: relative
diff --git a/packages/components/src/components/form/bal-field/bal-field.tsx b/packages/components/src/components/form/bal-field/bal-field.tsx
index 7bb3449338..2ffeb8fe88 100644
--- a/packages/components/src/components/form/bal-field/bal-field.tsx
+++ b/packages/components/src/components/form/bal-field/bal-field.tsx
@@ -3,6 +3,9 @@ import { observeItems } from '../../../utils/observer'
 
 @Component({
   tag: 'bal-field',
+  styleUrls: {
+    css: 'bal-field.sass',
+  },
 })
 export class Field {
   @Element() el!: HTMLElement
diff --git a/packages/components/src/components/form/bal-file-upload/bal-file-upload.sass b/packages/components/src/components/form/bal-file-upload/bal-file-upload.sass
index 47d68b623f..7f05a568d9 100644
--- a/packages/components/src/components/form/bal-file-upload/bal-file-upload.sass
+++ b/packages/components/src/components/form/bal-file-upload/bal-file-upload.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(file-upload)
   display: block
   position: static
diff --git a/packages/components/src/components/form/bal-file-upload/bal-file-upload.tsx b/packages/components/src/components/form/bal-file-upload/bal-file-upload.tsx
index 1eb86b2c41..4ba842c328 100644
--- a/packages/components/src/components/form/bal-file-upload/bal-file-upload.tsx
+++ b/packages/components/src/components/form/bal-file-upload/bal-file-upload.tsx
@@ -14,6 +14,9 @@ import {
 
 @Component({
   tag: 'bal-file-upload',
+  styleUrls: {
+    css: 'bal-file-upload.sass',
+  },
 })
 export class FileUpload implements FormInput<File[]> {
   @Element() el!: HTMLElement
diff --git a/packages/components/src/components/form/bal-form-grid/bal-form-grid.sass b/packages/components/src/components/form/bal-form-grid/bal-form-grid.sass
index 2bbfedfe7d..ac9837c939 100644
--- a/packages/components/src/components/form/bal-form-grid/bal-form-grid.sass
+++ b/packages/components/src/components/form/bal-form-grid/bal-form-grid.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(form-grid)
   display: flex
   flex-direction: column
diff --git a/packages/components/src/components/form/bal-form-grid/bal-form-grid.tsx b/packages/components/src/components/form/bal-form-grid/bal-form-grid.tsx
index 3eb07503d7..be2de2fd5e 100644
--- a/packages/components/src/components/form/bal-form-grid/bal-form-grid.tsx
+++ b/packages/components/src/components/form/bal-form-grid/bal-form-grid.tsx
@@ -2,6 +2,9 @@ import { Component, h, ComponentInterface, Host } from '@stencil/core'
 
 @Component({
   tag: 'bal-form-grid',
+  styleUrls: {
+    css: 'bal-form-grid.sass',
+  },
 })
 export class FormGrid implements ComponentInterface {
   render() {
diff --git a/packages/components/src/components/form/bal-input-group/bal-input-group.sass b/packages/components/src/components/form/bal-input-group/bal-input-group.sass
index 13c04710dd..6c5496abfe 100644
--- a/packages/components/src/components/form/bal-input-group/bal-input-group.sass
+++ b/packages/components/src/components/form/bal-input-group/bal-input-group.sass
@@ -1,3 +1,4 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
 @import './bal-input-group.mixins'
 
 +block(input-group)
diff --git a/packages/components/src/components/form/bal-input-group/bal-input-group.tsx b/packages/components/src/components/form/bal-input-group/bal-input-group.tsx
index 6ee0dbfb19..54dc1e3f45 100644
--- a/packages/components/src/components/form/bal-input-group/bal-input-group.tsx
+++ b/packages/components/src/components/form/bal-input-group/bal-input-group.tsx
@@ -3,6 +3,9 @@ import { BEM } from '../../../utils/bem'
 
 @Component({
   tag: 'bal-input-group',
+  styleUrls: {
+    css: 'bal-input-group.sass',
+  },
 })
 export class InputGroup implements ComponentInterface {
   @Element() el!: HTMLElement
diff --git a/packages/components/src/components/form/bal-input-slider/bal-input-slider.sass b/packages/components/src/components/form/bal-input-slider/bal-input-slider.sass
index 497780b18f..73b47bd992 100644
--- a/packages/components/src/components/form/bal-input-slider/bal-input-slider.sass
+++ b/packages/components/src/components/form/bal-input-slider/bal-input-slider.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(input-slider)
   display: block
   position: relative
diff --git a/packages/components/src/components/form/bal-input-slider/bal-input-slider.tsx b/packages/components/src/components/form/bal-input-slider/bal-input-slider.tsx
index aa61e7f289..685b6dff53 100644
--- a/packages/components/src/components/form/bal-input-slider/bal-input-slider.tsx
+++ b/packages/components/src/components/form/bal-input-slider/bal-input-slider.tsx
@@ -7,6 +7,9 @@ import { BEM } from '../../../utils/bem'
 
 @Component({
   tag: 'bal-input-slider',
+  styleUrls: {
+    css: 'bal-input-slider.sass',
+  },
 })
 export class InputSlider {
   @Element() el!: HTMLElement
diff --git a/packages/components/src/components/form/bal-input-stepper/bal-input-stepper.sass b/packages/components/src/components/form/bal-input-stepper/bal-input-stepper.sass
index a598d30868..8edea8f6e5 100644
--- a/packages/components/src/components/form/bal-input-stepper/bal-input-stepper.sass
+++ b/packages/components/src/components/form/bal-input-stepper/bal-input-stepper.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(input-stepper)
   +unselectable
   position: static
diff --git a/packages/components/src/components/form/bal-input-stepper/bal-input-stepper.tsx b/packages/components/src/components/form/bal-input-stepper/bal-input-stepper.tsx
index bde7b715ef..81539d90b2 100644
--- a/packages/components/src/components/form/bal-input-stepper/bal-input-stepper.tsx
+++ b/packages/components/src/components/form/bal-input-stepper/bal-input-stepper.tsx
@@ -31,6 +31,9 @@ import { Events } from '../../../types'
 
 @Component({
   tag: 'bal-input-stepper',
+  styleUrls: {
+    css: 'bal-input-stepper.sass',
+  },
 })
 export class InputStepper implements ComponentInterface, BalConfigObserver, FormInput<number | undefined> {
   private inputId = `bal-input-stepper${InputStepperIds++}`
diff --git a/packages/components/src/components/form/bal-input/bal-input.sass b/packages/components/src/components/form/bal-input/bal-input.sass
index 353ec09484..4c82bff7a6 100644
--- a/packages/components/src/components/form/bal-input/bal-input.sass
+++ b/packages/components/src/components/form/bal-input/bal-input.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(input)
   +unselectable
   display: block
@@ -5,4 +7,4 @@
   width: 100%
   flex: 1
   font-family: var(--bal-family-primary)
-  padding: 0
\ No newline at end of file
+  padding: 0
diff --git a/packages/components/src/components/form/bal-input/bal-input.tsx b/packages/components/src/components/form/bal-input/bal-input.tsx
index 0b6f64b8a3..9717d3e342 100644
--- a/packages/components/src/components/form/bal-input/bal-input.tsx
+++ b/packages/components/src/components/form/bal-input/bal-input.tsx
@@ -43,6 +43,9 @@ import { BEM } from '../../../utils/bem'
 
 @Component({
   tag: 'bal-input',
+  styleUrls: {
+    css: 'bal-input.sass',
+  },
 })
 export class Input implements ComponentInterface, FormInput<string | undefined> {
   private inputId = `bal-input-${InputIds++}`
diff --git a/packages/components/src/components/form/bal-number-input/bal-number-input.sass b/packages/components/src/components/form/bal-number-input/bal-number-input.sass
index d256f3680a..914aa7fa4a 100644
--- a/packages/components/src/components/form/bal-number-input/bal-number-input.sass
+++ b/packages/components/src/components/form/bal-number-input/bal-number-input.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(number-input)
   +unselectable
   display: block
@@ -6,4 +8,4 @@
   align-items: center
   width: 100%
   padding: 0
-  font-family: var(--bal-family-primary)
\ No newline at end of file
+  font-family: var(--bal-family-primary)
diff --git a/packages/components/src/components/form/bal-number-input/bal-number-input.tsx b/packages/components/src/components/form/bal-number-input/bal-number-input.tsx
index c1b235a5d4..40dade76e1 100644
--- a/packages/components/src/components/form/bal-number-input/bal-number-input.tsx
+++ b/packages/components/src/components/form/bal-number-input/bal-number-input.tsx
@@ -48,6 +48,9 @@ import { BEM } from '../../../utils/bem'
 
 @Component({
   tag: 'bal-number-input',
+  styleUrls: {
+    css: 'bal-number-input.sass',
+  },
 })
 export class NumberInput implements ComponentInterface, BalConfigObserver, FormInput<number | undefined> {
   private inputId = `bal-number-input-${numberInputIds++}`
diff --git a/packages/components/src/components/form/bal-select/bal-select.sass b/packages/components/src/components/form/bal-select/bal-select.sass
index 2a1f7ee3a3..5dbf901d82 100644
--- a/packages/components/src/components/form/bal-select/bal-select.sass
+++ b/packages/components/src/components/form/bal-select/bal-select.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +component(select-option)
   display: none !important
 
diff --git a/packages/components/src/components/form/bal-select/bal-select.tsx b/packages/components/src/components/form/bal-select/bal-select.tsx
index f257123658..ee4fa57e4d 100644
--- a/packages/components/src/components/form/bal-select/bal-select.tsx
+++ b/packages/components/src/components/form/bal-select/bal-select.tsx
@@ -37,6 +37,9 @@ export interface BalOptionController extends BalOptionValue {
 
 @Component({
   tag: 'bal-select',
+  styleUrls: {
+    css: 'bal-select.sass',
+  },
 })
 export class Select {
   @Element() private el!: HTMLElement
diff --git a/packages/components/src/components/form/bal-textarea/bal-textarea.sass b/packages/components/src/components/form/bal-textarea/bal-textarea.sass
index 7f0baed7f6..8f529c2e1c 100644
--- a/packages/components/src/components/form/bal-textarea/bal-textarea.sass
+++ b/packages/components/src/components/form/bal-textarea/bal-textarea.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(textarea)
   +unselectable
   display: block
@@ -21,4 +23,4 @@
     appearance: none
     &::placeholder
       @include padding(0)
-      font-family: inherit
\ No newline at end of file
+      font-family: inherit
diff --git a/packages/components/src/components/form/bal-textarea/bal-textarea.tsx b/packages/components/src/components/form/bal-textarea/bal-textarea.tsx
index a66d9f26a6..27d51e1ca8 100644
--- a/packages/components/src/components/form/bal-textarea/bal-textarea.tsx
+++ b/packages/components/src/components/form/bal-textarea/bal-textarea.tsx
@@ -32,6 +32,9 @@ import { Props, Events } from '../../../types'
 
 @Component({
   tag: 'bal-textarea',
+  styleUrls: {
+    css: 'bal-textarea.sass',
+  },
 })
 export class Textarea implements ComponentInterface, FormInput<string | undefined> {
   private inputId = `bal-textarea-${TextareaIds++}`
diff --git a/packages/components/src/components/notice/bal-modal/bal-modal.sass b/packages/components/src/components/notice/bal-modal/bal-modal.sass
index f8ba9c62a4..bbf06c111b 100644
--- a/packages/components/src/components/notice/bal-modal/bal-modal.sass
+++ b/packages/components/src/components/notice/bal-modal/bal-modal.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 $modal-breakpoint: $tablet !default
 
 =modalPadding($size: 1rem)
diff --git a/packages/components/src/components/notice/bal-modal/bal-modal.tsx b/packages/components/src/components/notice/bal-modal/bal-modal.tsx
index a6a886370b..2bbd049bf7 100644
--- a/packages/components/src/components/notice/bal-modal/bal-modal.tsx
+++ b/packages/components/src/components/notice/bal-modal/bal-modal.tsx
@@ -9,8 +9,9 @@ import { BodyScrollBlocker } from '../../../utils/toggle-scrolling-body'
 
 @Component({
   tag: 'bal-modal',
-  scoped: true,
-  shadow: false,
+  styleUrls: {
+    css: 'bal-modal.sass',
+  },
 })
 export class Modal implements OverlayInterface {
   private usersElement?: HTMLElement
diff --git a/packages/components/src/components/notice/bal-sheet/bal-sheet.sass b/packages/components/src/components/notice/bal-sheet/bal-sheet.sass
index f8b7494449..803ea7431b 100644
--- a/packages/components/src/components/notice/bal-sheet/bal-sheet.sass
+++ b/packages/components/src/components/notice/bal-sheet/bal-sheet.sass
@@ -1,3 +1,5 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
+
 +block(sheet)
   --bal-sheet-position-bottom: .5rem
   display: block
diff --git a/packages/components/src/components/notice/bal-sheet/bal-sheet.tsx b/packages/components/src/components/notice/bal-sheet/bal-sheet.tsx
index 1aa29b937c..5a84e58427 100644
--- a/packages/components/src/components/notice/bal-sheet/bal-sheet.tsx
+++ b/packages/components/src/components/notice/bal-sheet/bal-sheet.tsx
@@ -4,6 +4,9 @@ import { BEM } from '../../../utils/bem'
 
 @Component({
   tag: 'bal-sheet',
+  styleUrls: {
+    css: 'bal-sheet.sass',
+  },
 })
 export class Sheet {
   /**
diff --git a/packages/components/src/components/notice/bal-snackbar/bal-snackbar.sass b/packages/components/src/components/notice/bal-snackbar/bal-snackbar.sass
index 5521526832..c6e13d1d3c 100644
--- a/packages/components/src/components/notice/bal-snackbar/bal-snackbar.sass
+++ b/packages/components/src/components/notice/bal-snackbar/bal-snackbar.sass
@@ -1,3 +1,4 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
 @import '../../../styles/mixins/_all'
 
 +block(snackbar)
diff --git a/packages/components/src/components/notice/bal-snackbar/bal-snackbar.tsx b/packages/components/src/components/notice/bal-snackbar/bal-snackbar.tsx
index d73c291b2a..ab2aab7dbf 100644
--- a/packages/components/src/components/notice/bal-snackbar/bal-snackbar.tsx
+++ b/packages/components/src/components/notice/bal-snackbar/bal-snackbar.tsx
@@ -3,6 +3,9 @@ import { Props } from '../../../types'
 
 @Component({
   tag: 'bal-snackbar',
+  styleUrls: {
+    css: 'bal-snackbar.sass',
+  },
 })
 export class Snackbar {
   @Element() element!: HTMLElement
diff --git a/packages/components/src/components/notice/bal-toast/bal-toast.sass b/packages/components/src/components/notice/bal-toast/bal-toast.sass
index 30b8827441..6b60f6be56 100644
--- a/packages/components/src/components/notice/bal-toast/bal-toast.sass
+++ b/packages/components/src/components/notice/bal-toast/bal-toast.sass
@@ -1,3 +1,4 @@
+@import '~@baloise/design-system-css/scss/baloise-design-system.utilities'
 @import '../../../styles/mixins/_all'
 
 +block(toast)
diff --git a/packages/components/src/components/notice/bal-toast/bal-toast.tsx b/packages/components/src/components/notice/bal-toast/bal-toast.tsx
index 976dee6e24..30055c02e9 100644
--- a/packages/components/src/components/notice/bal-toast/bal-toast.tsx
+++ b/packages/components/src/components/notice/bal-toast/bal-toast.tsx
@@ -3,6 +3,9 @@ import { Props } from '../../../types'
 
 @Component({
   tag: 'bal-toast',
+  styleUrls: {
+    css: 'bal-toast.sass',
+  },
 })
 export class Toast {
   @Element() element!: HTMLBalToastElement