diff --git a/angular/README.md b/angular/README.md
index 64b6523..99216dc 100644
--- a/angular/README.md
+++ b/angular/README.md
@@ -28,3 +28,9 @@ Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To u
 ## Further help
 
 To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+
+# v12 Update
+
+## Steps
+
+- run `npm add @baloise/design-system-components-angular@12.x`
diff --git a/angular/package-lock.json b/angular/package-lock.json
index 7a60750..9e4b50a 100644
--- a/angular/package-lock.json
+++ b/angular/package-lock.json
@@ -17,7 +17,7 @@
         "@angular/platform-browser": "~13.2.0",
         "@angular/platform-browser-dynamic": "~13.2.0",
         "@angular/router": "~13.2.0",
-        "@baloise/design-system-components-angular": "^11.0.0",
+        "@baloise/design-system-components-angular": "^11.0.18",
         "@baloise/web-app-unsupported-browsers": "^3.0.0",
         "@baloise/web-app-validators-angular": "^3.6.1",
         "rxjs": "~7.5.0",
@@ -2426,21 +2426,22 @@
       }
     },
     "node_modules/@baloise/design-system-components": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@baloise/design-system-components/-/design-system-components-11.0.0.tgz",
-      "integrity": "sha512-gHQWIXYj2nEjRVYANhwn4UHvY3IGGCURjzL5z48+aupJvBlzQpP2Q2a0iR3/gRvhSkzVTOXU8k1WPf8jTLK1Jw==",
-      "dependencies": {
-        "@baloise/design-system-css": "11.0.0",
-        "@baloise/design-system-fonts": "11.0.0",
-        "@baloise/design-system-icons": "11.0.0",
-        "@baloise/design-system-tokens": "11.0.0",
-        "@baloise/web-app-utils": "~3.6.1",
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/@baloise/design-system-components/-/design-system-components-11.0.18.tgz",
+      "integrity": "sha512-m/BzHP8Eucdf6IEyvk5zWOyHZqdzij2urkiclIUDaQ6tvA8EWOWPzoa0/NotXdnHAIjQc6dyOoQaq9NWmOHOyw==",
+      "dependencies": {
+        "@baloise/design-system-css": "11.0.18",
+        "@baloise/design-system-fonts": "11.0.18",
+        "@baloise/design-system-icons": "11.0.18",
+        "@baloise/design-system-tokens": "11.0.18",
+        "@baloise/web-app-utils": "^3.8.0",
         "@popperjs/core": "~2.11.4",
         "@stencil/core": "~2.16.1",
         "big.js": "~6.2.1",
         "bulma": "~0.9.3",
         "date-fns": "~2.29.1",
         "filesize.js": "~2.0.0",
+        "hammerjs": "^2.0.8",
         "lodash.camelcase": "~4.3.0",
         "lodash.capitalize": "~4.2.1",
         "lodash.isarray": "~4.0.0",
@@ -2456,11 +2457,11 @@
       }
     },
     "node_modules/@baloise/design-system-components-angular": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@baloise/design-system-components-angular/-/design-system-components-angular-11.0.0.tgz",
-      "integrity": "sha512-eGlml1kMGjQJNtkt6aYpEbgT7FvUGQ2Ov0kYbVeFLXa2C6fuxoHBlX3Rcm8bGStR9BPU5iu3y6Hz7ID1KNxYuA==",
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/@baloise/design-system-components-angular/-/design-system-components-angular-11.0.18.tgz",
+      "integrity": "sha512-79CLerrBTWtCmpa5Mx5bQ45eDp+b7660/94F7CLeiHGxUnt3F+9IyiXJgg5vLOeF/L2z8ZNPqGD/ds9Ofxi6og==",
       "dependencies": {
-        "@baloise/design-system-components": "11.0.0",
+        "@baloise/design-system-components": "11.0.18",
         "tslib": "^2.2.0"
       },
       "peerDependencies": {
@@ -2473,28 +2474,28 @@
       }
     },
     "node_modules/@baloise/design-system-css": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@baloise/design-system-css/-/design-system-css-11.0.0.tgz",
-      "integrity": "sha512-Z43GgDqdcMOP3h+ArvU11zNelIUoXAJtH+CQJrjUWtgkPL0GjAK4Gdjismwof8KMN9tZm+oOO7m7B4AtomzeGA==",
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/@baloise/design-system-css/-/design-system-css-11.0.18.tgz",
+      "integrity": "sha512-WH8QX31UYazTEBLgWEwTQUfs+vSxKkJKiCIbx/ibqHZKFs6f88AKlO7/WAs9K/3l9vGkXzD7zLGtyD4TPHM4kw==",
       "dependencies": {
-        "@baloise/design-system-fonts": "11.0.0",
-        "@baloise/design-system-tokens": "11.0.0"
+        "@baloise/design-system-fonts": "11.0.18",
+        "@baloise/design-system-tokens": "11.0.18"
       }
     },
     "node_modules/@baloise/design-system-fonts": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@baloise/design-system-fonts/-/design-system-fonts-11.0.0.tgz",
-      "integrity": "sha512-bi+YgacjQ2SDHj3uNmzyNxIDFyuvYZLkEPm+h7MtQtJ6MX8wlMhccrKOSM2/p+kMqczj+43BZFLeWiDa4uJttA=="
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/@baloise/design-system-fonts/-/design-system-fonts-11.0.18.tgz",
+      "integrity": "sha512-4vwZZcKqC0TqdFdh/Y2T3/8t/+vWHXp03ZoAX6vVzPqu9eoNQD/UYGq91S4mrPmBz4m/AQ2PV1fzBZmlgpipRg=="
     },
     "node_modules/@baloise/design-system-icons": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@baloise/design-system-icons/-/design-system-icons-11.0.0.tgz",
-      "integrity": "sha512-8DiXo6mA74iiYvrxFtcwYz3Ob3mRuA+ngFOOskqYw6ijNj6q5wL4JWXTXoi1oEEx0M/P5W1UxEb7Cb7cM2W7Sg=="
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/@baloise/design-system-icons/-/design-system-icons-11.0.18.tgz",
+      "integrity": "sha512-u7Jz59GrAGVUwqVN6XQQLi6b0v/0sAOwkkeoQtO/reF+kKZLBxD+ZDiB7MFhZs1VxlF4E1VOTkD9f6pTVHNsCg=="
     },
     "node_modules/@baloise/design-system-tokens": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@baloise/design-system-tokens/-/design-system-tokens-11.0.0.tgz",
-      "integrity": "sha512-lsEI4Dlyp9LXrxMbFhZV3k5+mBAA/y+HJBkCYY+5AVVbjBLJlqmFbxpFAKteH9UAMWk1NfTmbzeLxLnA54IiJQ=="
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/@baloise/design-system-tokens/-/design-system-tokens-11.0.18.tgz",
+      "integrity": "sha512-dQojhdDPHBUtTnj95EHuuS/LWdzw1IPJzDGN0/kBPq5xZlIDge2WWoomXvZD/TNsDja5tWjvSFdvUpY31FLD8w=="
     },
     "node_modules/@baloise/web-app-unsupported-browsers": {
       "version": "3.6.2",
@@ -2503,9 +2504,9 @@
       "hasInstallScript": true
     },
     "node_modules/@baloise/web-app-utils": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/@baloise/web-app-utils/-/web-app-utils-3.6.2.tgz",
-      "integrity": "sha512-iz8vo/h6zL2mWHG6B72c9SRVF0aFP/WVY62PNUXGp063+iRm0EE/6h0lEAKd7IYKI3hNcCypd9eie29lL0Bqog==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@baloise/web-app-utils/-/web-app-utils-3.8.0.tgz",
+      "integrity": "sha512-xqEfk9rX3/VdyObrEH3HFnq2zjvYMgA/C3Sok5zLYeyd2Ec/wHwAvp9N9gy7nW5oWbIuUrpQUjCux/xwMer+kQ==",
       "dependencies": {
         "date-fns": "^2.28.0",
         "lodash.camelcase": "^4.3.0",
@@ -3026,9 +3027,9 @@
       "dev": true
     },
     "node_modules/@types/lodash": {
-      "version": "4.14.186",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.186.tgz",
-      "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw=="
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
     },
     "node_modules/@types/lodash.clonedeep": {
       "version": "4.5.7",
@@ -6430,6 +6431,14 @@
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
       "dev": true
     },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -14181,21 +14190,22 @@
       }
     },
     "@baloise/design-system-components": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@baloise/design-system-components/-/design-system-components-11.0.0.tgz",
-      "integrity": "sha512-gHQWIXYj2nEjRVYANhwn4UHvY3IGGCURjzL5z48+aupJvBlzQpP2Q2a0iR3/gRvhSkzVTOXU8k1WPf8jTLK1Jw==",
-      "requires": {
-        "@baloise/design-system-css": "11.0.0",
-        "@baloise/design-system-fonts": "11.0.0",
-        "@baloise/design-system-icons": "11.0.0",
-        "@baloise/design-system-tokens": "11.0.0",
-        "@baloise/web-app-utils": "~3.6.1",
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/@baloise/design-system-components/-/design-system-components-11.0.18.tgz",
+      "integrity": "sha512-m/BzHP8Eucdf6IEyvk5zWOyHZqdzij2urkiclIUDaQ6tvA8EWOWPzoa0/NotXdnHAIjQc6dyOoQaq9NWmOHOyw==",
+      "requires": {
+        "@baloise/design-system-css": "11.0.18",
+        "@baloise/design-system-fonts": "11.0.18",
+        "@baloise/design-system-icons": "11.0.18",
+        "@baloise/design-system-tokens": "11.0.18",
+        "@baloise/web-app-utils": "^3.8.0",
         "@popperjs/core": "~2.11.4",
         "@stencil/core": "~2.16.1",
         "big.js": "~6.2.1",
         "bulma": "~0.9.3",
         "date-fns": "~2.29.1",
         "filesize.js": "~2.0.0",
+        "hammerjs": "^2.0.8",
         "lodash.camelcase": "~4.3.0",
         "lodash.capitalize": "~4.2.1",
         "lodash.isarray": "~4.0.0",
@@ -14211,37 +14221,37 @@
       }
     },
     "@baloise/design-system-components-angular": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@baloise/design-system-components-angular/-/design-system-components-angular-11.0.0.tgz",
-      "integrity": "sha512-eGlml1kMGjQJNtkt6aYpEbgT7FvUGQ2Ov0kYbVeFLXa2C6fuxoHBlX3Rcm8bGStR9BPU5iu3y6Hz7ID1KNxYuA==",
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/@baloise/design-system-components-angular/-/design-system-components-angular-11.0.18.tgz",
+      "integrity": "sha512-79CLerrBTWtCmpa5Mx5bQ45eDp+b7660/94F7CLeiHGxUnt3F+9IyiXJgg5vLOeF/L2z8ZNPqGD/ds9Ofxi6og==",
       "requires": {
-        "@baloise/design-system-components": "11.0.0",
+        "@baloise/design-system-components": "11.0.18",
         "tslib": "^2.2.0"
       }
     },
     "@baloise/design-system-css": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@baloise/design-system-css/-/design-system-css-11.0.0.tgz",
-      "integrity": "sha512-Z43GgDqdcMOP3h+ArvU11zNelIUoXAJtH+CQJrjUWtgkPL0GjAK4Gdjismwof8KMN9tZm+oOO7m7B4AtomzeGA==",
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/@baloise/design-system-css/-/design-system-css-11.0.18.tgz",
+      "integrity": "sha512-WH8QX31UYazTEBLgWEwTQUfs+vSxKkJKiCIbx/ibqHZKFs6f88AKlO7/WAs9K/3l9vGkXzD7zLGtyD4TPHM4kw==",
       "requires": {
-        "@baloise/design-system-fonts": "11.0.0",
-        "@baloise/design-system-tokens": "11.0.0"
+        "@baloise/design-system-fonts": "11.0.18",
+        "@baloise/design-system-tokens": "11.0.18"
       }
     },
     "@baloise/design-system-fonts": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@baloise/design-system-fonts/-/design-system-fonts-11.0.0.tgz",
-      "integrity": "sha512-bi+YgacjQ2SDHj3uNmzyNxIDFyuvYZLkEPm+h7MtQtJ6MX8wlMhccrKOSM2/p+kMqczj+43BZFLeWiDa4uJttA=="
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/@baloise/design-system-fonts/-/design-system-fonts-11.0.18.tgz",
+      "integrity": "sha512-4vwZZcKqC0TqdFdh/Y2T3/8t/+vWHXp03ZoAX6vVzPqu9eoNQD/UYGq91S4mrPmBz4m/AQ2PV1fzBZmlgpipRg=="
     },
     "@baloise/design-system-icons": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@baloise/design-system-icons/-/design-system-icons-11.0.0.tgz",
-      "integrity": "sha512-8DiXo6mA74iiYvrxFtcwYz3Ob3mRuA+ngFOOskqYw6ijNj6q5wL4JWXTXoi1oEEx0M/P5W1UxEb7Cb7cM2W7Sg=="
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/@baloise/design-system-icons/-/design-system-icons-11.0.18.tgz",
+      "integrity": "sha512-u7Jz59GrAGVUwqVN6XQQLi6b0v/0sAOwkkeoQtO/reF+kKZLBxD+ZDiB7MFhZs1VxlF4E1VOTkD9f6pTVHNsCg=="
     },
     "@baloise/design-system-tokens": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/@baloise/design-system-tokens/-/design-system-tokens-11.0.0.tgz",
-      "integrity": "sha512-lsEI4Dlyp9LXrxMbFhZV3k5+mBAA/y+HJBkCYY+5AVVbjBLJlqmFbxpFAKteH9UAMWk1NfTmbzeLxLnA54IiJQ=="
+      "version": "11.0.18",
+      "resolved": "https://registry.npmjs.org/@baloise/design-system-tokens/-/design-system-tokens-11.0.18.tgz",
+      "integrity": "sha512-dQojhdDPHBUtTnj95EHuuS/LWdzw1IPJzDGN0/kBPq5xZlIDge2WWoomXvZD/TNsDja5tWjvSFdvUpY31FLD8w=="
     },
     "@baloise/web-app-unsupported-browsers": {
       "version": "3.6.2",
@@ -14249,9 +14259,9 @@
       "integrity": "sha512-tTxMk0Ou22I/6lHLaik5NiL2ztkN2v82dWnVV0zgT4rPVs7eeSSXhuvdsWXb8EUF+WTjdiMXN7UD/K5jtpg1eg=="
     },
     "@baloise/web-app-utils": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/@baloise/web-app-utils/-/web-app-utils-3.6.2.tgz",
-      "integrity": "sha512-iz8vo/h6zL2mWHG6B72c9SRVF0aFP/WVY62PNUXGp063+iRm0EE/6h0lEAKd7IYKI3hNcCypd9eie29lL0Bqog==",
+      "version": "3.8.0",
+      "resolved": "https://registry.npmjs.org/@baloise/web-app-utils/-/web-app-utils-3.8.0.tgz",
+      "integrity": "sha512-xqEfk9rX3/VdyObrEH3HFnq2zjvYMgA/C3Sok5zLYeyd2Ec/wHwAvp9N9gy7nW5oWbIuUrpQUjCux/xwMer+kQ==",
       "requires": {
         "date-fns": "^2.28.0",
         "lodash.camelcase": "^4.3.0",
@@ -14677,9 +14687,9 @@
       "dev": true
     },
     "@types/lodash": {
-      "version": "4.14.186",
-      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.186.tgz",
-      "integrity": "sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw=="
+      "version": "4.14.191",
+      "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
+      "integrity": "sha512-BdZ5BCCvho3EIXw6wUCXHe7rS53AIDPLE+JzwgT+OsJk53oBfbSmZZ7CX4VaRoN78N+TJpFi9QPlfIVNmJYWxQ=="
     },
     "@types/lodash.clonedeep": {
       "version": "4.5.7",
@@ -17215,6 +17225,11 @@
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==",
       "dev": true
     },
+    "hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ=="
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
diff --git a/angular/package.json b/angular/package.json
index 8ac1bc9..3c3682f 100644
--- a/angular/package.json
+++ b/angular/package.json
@@ -20,7 +20,7 @@
     "@angular/platform-browser": "~13.2.0",
     "@angular/platform-browser-dynamic": "~13.2.0",
     "@angular/router": "~13.2.0",
-    "@baloise/design-system-components-angular": "^11.0.0",
+    "@baloise/design-system-components-angular": "^11.0.18",
     "@baloise/web-app-unsupported-browsers": "^3.0.0",
     "@baloise/web-app-validators-angular": "^3.6.1",
     "rxjs": "~7.5.0",
diff --git a/angular/src/app/app.component.html b/angular/src/app/app.component.html
index f409fe5..f41621d 100644
--- a/angular/src/app/app.component.html
+++ b/angular/src/app/app.component.html
@@ -1,22 +1,14 @@
 <bal-app class="has-sticky-footer">
   <header>
     <bal-navbar>
-      <bal-navbar-brand simple>
-        <bal-logo color="white"></bal-logo>
-        <bal-text bold>Demo</bal-text>
-      </bal-navbar-brand>
+      <bal-navbar-brand simple></bal-navbar-brand>
     </bal-navbar>
-    <bal-stage color="blue" size="medium">
-      <bal-stage-image
-        src-set="https://www.baloise.com/.imaging/mte/baloise-theme/2880/dam/baloise-com/images/ueber-uns/wer-wir-sind/bilder-logos/frau-fotoapparat.jpg/jcr:content/frau-fotoapparat.jpg"
-      ></bal-stage-image>
+    <bal-stage color="green" size="small">
       <bal-stage-body>
         <div class="container is-compact">
-          <bal-heading space="none" data-testid="welcome-title">{{
-            title
-            }}</bal-heading>
+          <bal-heading space="none" data-testid="welcome-title">v12 Breaking changes</bal-heading>
           <bal-heading space="none" subtitle level="h2">
-            To the Baloise Design System
+            Lets update together
           </bal-heading>
         </div>
       </bal-stage-body>
@@ -24,45 +16,63 @@
   </header>
   <main class="container is-compact">
     <bal-card class="mt-6">
-      <bal-card-title>Property example</bal-card-title>
+      <bal-card-title>Load Custom Icons</bal-card-title>
       <bal-card-subtitle>
-        A little demonstration how to change properties of our
-        components
+        Not all icons are loaded from the beginning only the ones are used by the Design System. The
+        others need to be registered or directly used with the component.
       </bal-card-subtitle>
       <bal-card-content>
-        <app-property></app-property>
+        <div class="is-flex fg-large">
+          <bal-icon name="account" size="large"></bal-icon>
+          <bal-icon name="star-full" size="large"></bal-icon>
+        </div>
       </bal-card-content>
     </bal-card>
+
     <bal-card class="mt-6">
-      <bal-card-title>Event example</bal-card-title>
+      <bal-card-title>Lazy Loading Component Styles</bal-card-title>
       <bal-card-subtitle>
-        A short example how to use the events of our
-        components
+        The default is now that we load the component styles as a CSS file when they are used. Therefore, customization
+        with SASS variables could be broken.
       </bal-card-subtitle>
       <bal-card-content>
-        <app-event></app-event>
+        <bal-stage color="purple">Customized stage with SASS $variable. Should be purple.</bal-stage>
       </bal-card-content>
     </bal-card>
+
     <bal-card class="mt-6">
-      <bal-card-title>Method example</bal-card-title>
+      <bal-card-title>Design Token Reduction</bal-card-title>
       <bal-card-subtitle>
-        A tiny use case of how to call the components methods</bal-card-subtitle>
-      <bal-card-content>
-        <app-method></app-method>
-      </bal-card-content>
-    </bal-card>
-    <bal-card class="mt-6">
-      <bal-card-title>Reactive form</bal-card-title>
+        There has been a lot of duplications and aliases, which increased the css file by 66%.
+      </bal-card-subtitle>
       <bal-card-content>
-        <app-form-component [form]="form"></app-form-component>
+        <h1 class="title is-1">Typography Size Aliases</h1>
+        <br />
+        <div class="has-background-primary-light">Color Aliases</div>
+        <br />
+        <p class="has-text-invalid">Text-Color Aliases</p>
+        <br />
+        <div class="has-border-active">Border-Color Aliases</div>
+        <br />
+        <div class="has-border-primary has-radius">Radius</div>
+        <br />
+        <div class="has-background-grey-2 has-shadow">Shadow</div>
+        <br />
+        <div class="has-background-yellow-2">
+          <div class="has-background-green-2 p-4 m-6">Spacing</div>
+        </div>
       </bal-card-content>
     </bal-card>
+
     <bal-card class="mt-6">
-      <bal-card-title>Template form</bal-card-title>
+      <bal-card-title>Separation of bal-number-input & bal-input
+      </bal-card-title>
+      <bal-card-subtitle>
+        This feature was marked as deprecated at was finally removed. The number input has some dependencies and every
+        time we used a bal-input we also loaded all of that with us.
+      </bal-card-subtitle>
       <bal-card-content>
-        <bal-input [(ngModel)]="value">
-        </bal-input>
-        <bal-text>Value is adapted on: {{value}}</bal-text>
+        <bal-input number-input decimal="2" value="1234.56"></bal-input>
       </bal-card-content>
     </bal-card>
 
diff --git a/angular/src/app/app.component.scss b/angular/src/app/app.component.scss
index e69de29..406b81f 100644
--- a/angular/src/app/app.component.scss
+++ b/angular/src/app/app.component.scss
@@ -0,0 +1 @@
+@import "@baloise/design-system-components/src/styles/global.utilities";
diff --git a/angular/src/app/app.component.ts b/angular/src/app/app.component.ts
index 230466c..3ed82e2 100644
--- a/angular/src/app/app.component.ts
+++ b/angular/src/app/app.component.ts
@@ -1,7 +1,4 @@
-import {Component} from '@angular/core';
-import {EmailValidator, FormControl, FormGroup, RequiredValidator} from "@angular/forms";
-import {BalConfigState, BalSwissLanguage, onBalConfigChange} from '@baloise/design-system-components'
-import {BalValidators} from "@baloise/web-app-validators-angular";
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -9,38 +6,5 @@ import {BalValidators} from "@baloise/web-app-validators-angular";
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  title = 'Welcome';
-  language: BalSwissLanguage = 'en';
-  form = new FormGroup({
-    name: new FormControl('Example name'),
-    radioButton: new FormControl('yes'),
-    email: new FormControl(null, [BalValidators.isRequired(), BalValidators.isMinLength(4), BalValidators.isEmail()]),
-    status: new FormControl('Hans Muster'),
-    correct: new FormControl(true),
-    birthdate: new FormControl()
-  });
 
-  value = 'input template form'
-
-  constructor() {
-
-    onBalConfigChange((config: BalConfigState) => {
-      this.language = config.language as BalSwissLanguage;
-
-      switch (this.language) {
-        case 'de':
-          this.title = 'Willkommen';
-          break;
-        case 'it':
-          this.title = 'Benvenuta';
-          break;
-        case 'fr':
-          this.title = 'Bienvenue';
-          break;
-        default:
-          this.title = 'Welcome';
-          break;
-      }
-    });
-  }
 }
diff --git a/angular/src/app/app.module.ts b/angular/src/app/app.module.ts
index 6c05bc2..e76cfa8 100644
--- a/angular/src/app/app.module.ts
+++ b/angular/src/app/app.module.ts
@@ -1,22 +1,27 @@
+import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
-import {BalCoreModule, BalTextModule} from '@baloise/design-system-components-angular';
+import {
+  BalCoreModule,
+  BalLogoModule,
+  BalNavbarModule,
+  BalFooterModule,
+  BalStageModule,
+  BalCardModule,
+  BalHeadingModule,
+  BalTextModule,
+  BalInputModule,
+} from '@baloise/design-system-components-angular';
 import { AppComponent } from './app.component';
-import { PropertyComponent } from './property/property.component';
-import { EventComponent } from './event/event.component';
-import { MethodComponent } from './method/method.component';
-import { FormsSubModule } from './forms/forms-sub.module';
-import { SharedModule } from './shared/shared.module';
 
 @NgModule({
-  declarations: [
-    AppComponent,
-    PropertyComponent,
-    EventComponent,
-    MethodComponent,
-  ],
+  declarations: [AppComponent],
   imports: [
+    CommonModule,
     BrowserModule,
+    /**
+     * Design System Modules
+     */
     BalCoreModule.forRoot({
       defaults: {
         region: 'CH',
@@ -24,9 +29,14 @@ import { SharedModule } from './shared/shared.module';
         allowedLanguages: ['de', 'fr', 'it', 'en'],
       },
     }),
-    SharedModule,
-    FormsSubModule,
+    BalLogoModule,
+    BalNavbarModule,
+    BalFooterModule,
+    BalStageModule,
+    BalCardModule,
+    BalHeadingModule,
     BalTextModule,
+    BalInputModule,
   ],
   providers: [],
   bootstrap: [AppComponent],
diff --git a/angular/src/app/event/event.component.html b/angular/src/app/event/event.component.html
deleted file mode 100644
index c17d0bd..0000000
--- a/angular/src/app/event/event.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<bal-input
-  placeholder="Tell us your name"
-  [value]="myName"
-  (balInput)="updateName($event.detail)"
-></bal-input>
-<bal-text>My name is {{ myName }}</bal-text>
diff --git a/angular/src/app/event/event.component.spec.ts b/angular/src/app/event/event.component.spec.ts
deleted file mode 100644
index 72c4f57..0000000
--- a/angular/src/app/event/event.component.spec.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
-import { TestBed } from '@angular/core/testing';
-import {
-  BalInputModule,
-  BalTextModule,
-} from '@baloise/design-system-components-angular';
-import { EventComponent } from './event.component';
-
-describe('EventComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [EventComponent],
-      imports: [BalInputModule, BalTextModule],
-      schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    }).compileComponents();
-  });
-
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(EventComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
-
-  it(`should have as input 'gugus'`, async () => {
-    const fixture = TestBed.createComponent(EventComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-
-    const inputElement = compiled.querySelector('bal-input');
-    if (inputElement) {
-      inputElement.value = 'Gugus';
-      inputElement.dispatchEvent(
-        new CustomEvent('balInput', { detail: 'Gugus' })
-      );
-    }
-    fixture.detectChanges();
-    await fixture.whenStable();
-
-    expect(compiled.querySelector('bal-text')?.textContent).toContain(
-      'My name is Gugus'
-    );
-  });
-});
diff --git a/angular/src/app/event/event.component.ts b/angular/src/app/event/event.component.ts
deleted file mode 100644
index 301543e..0000000
--- a/angular/src/app/event/event.component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-event',
-  templateUrl: './event.component.html',
-})
-export class EventComponent {
-  myName?: string;
-
-  updateName(value: string | undefined) {
-    this.myName = value
-  }
-}
diff --git a/angular/src/app/forms/forms-component/form-component.component.html b/angular/src/app/forms/forms-component/form-component.component.html
deleted file mode 100644
index b10cc48..0000000
--- a/angular/src/app/forms/forms-component/form-component.component.html
+++ /dev/null
@@ -1,67 +0,0 @@
-<form *ngIf="form" [formGroup]="form">
-  <bal-field>
-    <bal-field-control>
-      <bal-input formControlName="name"></bal-input>
-    </bal-field-control>
-  </bal-field>
-  <bal-field>
-    email touched: {{form?.get('email')?.touched}}
-
-    <bal-field-control>
-      <bal-input formControlName="email"></bal-input>
-    </bal-field-control>
-    <bal-field-message color="danger">
-      <bal-ng-error controlName="email" error="isRequired"> Required error
-      </bal-ng-error>
-      <bal-ng-error controlName="email" error="isEmail"> Email error
-      </bal-ng-error>
-    </bal-field-message>
-  </bal-field>
-
-  <bal-field class="is-one-third" expanded>
-    <bal-field-control>
-      <bal-select data-test-id="status-dropdown" expanded formControlName="status">
-        <bal-select-option *ngFor="let status of statusOptions"
-                           [id]="'status-' + status.toLowerCase()"
-                           [label]="status"
-                           [value]="status">
-          {{ status}}
-        </bal-select-option>
-      </bal-select>
-    </bal-field-control>
-  </bal-field>
-  status touched: {{form?.get('status')?.touched}}
-
-  <bal-field>
-    <bal-field-label>Label</bal-field-label>
-    <bal-field-control>
-      <bal-radio-group interface="select-button" formControlName="radioButton">
-        <bal-radio name="select-button-example" value="yes">Yes</bal-radio>
-        <bal-radio name="select-button-example" value="no">No</bal-radio>
-      </bal-radio-group>
-    </bal-field-control>
-    <bal-field-message color="hint">Field Message</bal-field-message>
-  </bal-field>
-  radioButton touched: {{form?.get('radioButton')?.touched}}
-
-  <bal-field>
-    <bal-field-label>Is this form correct?</bal-field-label>
-    <bal-field-control>
-      <bal-checkbox-group >
-        <bal-checkbox formControlName="correct">
-          Label
-        </bal-checkbox>
-      </bal-checkbox-group>
-    </bal-field-control>
-    <bal-field-message color="hint">Field Message</bal-field-message>
-  </bal-field>
-  value is: {{form?.get('correct')?.value}}
-  
-  <bal-field class="is-full">
-    <bal-field-label>Birthdate</bal-field-label>
-    <bal-field-control>
-      <bal-datepicker formControlName="birthdate" name="birthdate" [defaultDate]="todayDateDatePickerValue" placeholder="Select your birthdate">
-      </bal-datepicker>
-    </bal-field-control>
-  </bal-field>
-</form>
diff --git a/angular/src/app/forms/forms-component/form-component.component.ts b/angular/src/app/forms/forms-component/form-component.component.ts
deleted file mode 100644
index 2a93104..0000000
--- a/angular/src/app/forms/forms-component/form-component.component.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import {ChangeDetectionStrategy, Component, Input, OnInit} from '@angular/core';
-import {FormGroup} from "@angular/forms";
-import {formatDateString} from "@baloise/web-app-utils";
-
-@Component({
-  selector: 'app-form-component',
-  templateUrl: './form-component.component.html',
-  changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class FormComponent implements OnInit {
-
-  constructor() {
-  }
-
-  statusOptions = ['John Doe', 'Hans Muster'];
-  todayDate = new Date();
-  todayDateDatePickerValue = formatDateString(new Date(new Date().setFullYear(this.todayDate.getFullYear() - 25)));
-
-  @Input()
-  form?: FormGroup
-
-  ngOnInit(): void {
-  }
-
-}
diff --git a/angular/src/app/forms/forms-sub.module.ts b/angular/src/app/forms/forms-sub.module.ts
deleted file mode 100644
index e1e350d..0000000
--- a/angular/src/app/forms/forms-sub.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import {NgModule} from '@angular/core';
-import {FormComponent} from "./forms-component/form-component.component";
-import {SharedModule} from "../shared/shared.module";
-
-
-@NgModule({
-  declarations: [FormComponent],
-  exports: [FormComponent],
-  imports: [
-    SharedModule
-  ]
-})
-export class FormsSubModule {
-}
diff --git a/angular/src/app/method/method.component.html b/angular/src/app/method/method.component.html
deleted file mode 100644
index 47726d7..0000000
--- a/angular/src/app/method/method.component.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<bal-select #mySelect placeholder="Choose your hobby">
-  <bal-select-option label="Tennis" value="tennis">Tennis</bal-select-option>
-  <bal-select-option label="Soccer" value="soccer">Soccer</bal-select-option>
-  <bal-select-option label="Other" value="other">Other</bal-select-option>
-</bal-select>
-<bal-button class="mt-4" (click)="chooseTennis()">Choose Tennis</bal-button>
diff --git a/angular/src/app/method/method.component.ts b/angular/src/app/method/method.component.ts
deleted file mode 100644
index 8aa24fb..0000000
--- a/angular/src/app/method/method.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Component, ViewChild } from '@angular/core';
-import type { Components } from '@baloise/design-system-components';
-// import { ProxyComponent } from '@baloise/design-system-components-angular';
-export interface ProxyComponent<T> {
-  el: T;
-}
-
-@Component({
-  selector: 'app-method',
-  templateUrl: './method.component.html',
-})
-export class MethodComponent {
-  @ViewChild('mySelect') mySelect!: ProxyComponent<Components.BalSelect>;
-
-  chooseTennis(): void {
-    this.mySelect.el.select('tennis');
-  }
-}
diff --git a/angular/src/app/property/property.component.html b/angular/src/app/property/property.component.html
deleted file mode 100644
index 59383ea..0000000
--- a/angular/src/app/property/property.component.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<bal-button-group>
-  <!-- Statically set property -->
-  <bal-button color="danger">My danger button</bal-button>
-
-  <!-- Properties of type boolean do not need a value. -->
-  <bal-button disabled>My disabled button</bal-button>
-
-  <!-- Dynamically set property -->
-  <bal-button [color]="myColor">My info button</bal-button>
-</bal-button-group>
diff --git a/angular/src/app/property/property.component.ts b/angular/src/app/property/property.component.ts
deleted file mode 100644
index 81ab0b2..0000000
--- a/angular/src/app/property/property.component.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { Component } from '@angular/core';
-import { Props } from '@baloise/design-system-components';
-
-@Component({
-  selector: 'app-property',
-  templateUrl: './property.component.html',
-})
-export class PropertyComponent {
-  myColor: Props.BalButtonColor = 'info';
-}
diff --git a/angular/src/app/shared/shared.module.ts b/angular/src/app/shared/shared.module.ts
deleted file mode 100644
index 0525b51..0000000
--- a/angular/src/app/shared/shared.module.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
-import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {
-  BalButtonModule,
-  BalCardModule,
-  BalCheckboxModule,
-  BalDatepickerModule,
-  BalFieldModule,
-  BalFooterModule,
-  BalHeadingModule,
-  BalInputModule,
-  BalLogoModule,
-  BalNavbarModule,
-  BalRadioModule,
-  BalSelectModule,
-  BalStageModule,
-  BalToastModule,
-} from '@baloise/design-system-components-angular';
-
-const commonModules = [
-  /**
-   * Angular Modules
-   */
-  CommonModule,
-  FormsModule,
-  ReactiveFormsModule,
-  /**
-   * Design System Modules
-   */
-  BalFieldModule,
-  BalInputModule,
-  BalSelectModule,
-  BalHeadingModule,
-  BalButtonModule,
-  BalFooterModule,
-  BalNavbarModule,
-  BalLogoModule,
-  BalStageModule,
-  BalCardModule,
-  BalToastModule,
-  BalCheckboxModule,
-  BalRadioModule,
-  BalDatepickerModule,
-];
-
-@NgModule({
-  declarations: [],
-  imports: [...commonModules],
-  exports: [...commonModules],
-})
-export class SharedModule {
-}
diff --git a/angular/src/polyfills.ts b/angular/src/polyfills.ts
index 429bb9e..9635091 100644
--- a/angular/src/polyfills.ts
+++ b/angular/src/polyfills.ts
@@ -41,12 +41,12 @@
  *  (window as any).__Zone_enable_cross_context_check = true;
  *
  */
+(window as any).__Zone_disable_customElements = true;
 
 /***************************************************************************************************
  * Zone JS is required by default for Angular itself.
  */
-import 'zone.js';  // Included with Angular CLI.
-
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS
diff --git a/angular/src/styles.scss b/angular/src/styles.scss
index c15280e..9803b1e 100644
--- a/angular/src/styles.scss
+++ b/angular/src/styles.scss
@@ -1,5 +1,8 @@
-$font-path: '~assets/fonts';
+$font-path: "~assets/fonts";
 
-@import 'node_modules/@baloise/design-system-components/src/styles/global';
+// customization
+$bal-color-purple-3: lime;
+
+@import "@baloise/design-system-components/src/styles/global";
 
 // add custom styles below