diff --git a/sass/components/_buttons.scss b/sass/components/_buttons.scss
index d366c389f6..42ca1270f6 100644
--- a/sass/components/_buttons.scss
+++ b/sass/components/_buttons.scss
@@ -1,3 +1,6 @@
+@use './mixins.module.scss' as *;
+@use './variables' as *;
+
 :root {
   --btn-height: 40px;
   --btn-font-size-icon: 16px;
diff --git a/sass/components/_cards.scss b/sass/components/_cards.scss
index 3212be92ea..578f2a95d2 100644
--- a/sass/components/_cards.scss
+++ b/sass/components/_cards.scss
@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './mixins.module.scss' as *;
+
 .card-panel {
   transition: box-shadow .25s;
   padding: 24px;
@@ -8,10 +11,11 @@
 }
 
 .card {
-  overflow: hidden;
+  --background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
+
   position: relative;
   //margin: $element-top-margin 0 $element-bottom-margin 0;
-  background-color: var(--md-sys-color-surface);
+  background-color: var(--background-color);
   transition: box-shadow .25s;
   border-radius: 12px;
   @extend .z-depth-1;
@@ -172,28 +176,11 @@
 
   .card-action {
     padding: 0 1.6rem;
-    // position: relative;
-    // border-top: 1px solid var(--md-sys-color-outline-variant);
-    // background-color: inherit;
 
     &:last-child {
       border-radius: 0 0 2px 2px;
     }
     // Replaced card links with buttons (Accessibility, @see https://github.com/materializecss/materialize/issues/565)
-    /*a {
-      padding: 16px 24px;
-      display: inline-block;
-    }
-
-    a:not(.btn):not(.btn-large):not(.btn-floating) {
-      color: var(--md-sys-color-primary);
-      transition: color .3s ease;
-
-      &:hover {
-        background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
-      }
-    }*/
-
     a {
       @include btn(
         var(--btn-height),
diff --git a/sass/components/_chips.scss b/sass/components/_chips.scss
index bea9667d7b..367d56b81f 100644
--- a/sass/components/_chips.scss
+++ b/sass/components/_chips.scss
@@ -1,3 +1,5 @@
+@use './colors.module.scss' as *;
+
 .chip {
   --font-size: 14px;
   --font-size-icon: 18px;
diff --git a/sass/components/_collapsible.scss b/sass/components/_collapsible.scss
index 12886a0d06..9c0e7e212c 100644
--- a/sass/components/_collapsible.scss
+++ b/sass/components/_collapsible.scss
@@ -1,3 +1,7 @@
+@use './variables' as *;
+@use './colors.module.scss' as *;
+@use './global' as *;
+
 .collapsible {
   padding-left: 0;
   list-style-type: none;
diff --git a/sass/components/_collection.scss b/sass/components/_collection.scss
index 201e42c20c..ee17409f00 100644
--- a/sass/components/_collection.scss
+++ b/sass/components/_collection.scss
@@ -1,4 +1,5 @@
-// Collections
+@use './variables' as *;
+
 .collection {
   padding-left: 0;
   list-style-type: none;
@@ -55,10 +56,8 @@
         top: 16px;
         right: 16px;
       }
-
     }
 
-
     &:last-child {
       border-bottom: none;
     }
diff --git a/sass/components/_color-classes.scss b/sass/components/_color-classes.scss
deleted file mode 100644
index 155cecd120..0000000000
--- a/sass/components/_color-classes.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-// Color Classes
-
-@each $color_name, $color in $colors {
-  @each $color_type, $color_value in $color {
-    @if $color_type == "base" {
-      .#{$color_name} {
-        background-color: $color_value !important;
-      }
-      .#{$color_name}-text {
-        color: $color_value !important;
-      }
-    }
-    @else if $color_name != "shades" {
-      .#{$color_name}.#{$color_type} {
-        background-color: $color_value !important;
-      }
-      .#{$color_name}-text.text-#{$color_type} {
-        color: $color_value !important;
-      }
-    }
-  }
-}
-
-// Shade classes
-@each $color, $color_value in $shades {
-  .#{$color} {
-    background-color: $color_value !important;
-  }
-  .#{$color}-text {
-    color: $color_value !important;
-  }
-}
diff --git a/sass/components/_color-variables.scss b/sass/components/_color-variables.scss
index 062f6a56c0..184ad7ea39 100644
--- a/sass/components/_color-variables.scss
+++ b/sass/components/_color-variables.scss
@@ -355,10 +355,9 @@ $colors: (
 ) !default;
 
 
-// usage: color("name_of_color", "type_of_color")
+// usage: colorFunc("name_of_color", "type_of_color")
 // to avoid to repeating map-get($colors, ...)
-
-@function color($color, $type) {
+@function colorFunc($color, $type) {
   @if map-has-key($colors, $color) {
     $curr_color: map-get($colors, $color);
     @if map-has-key($curr_color, $type) {
@@ -368,3 +367,36 @@ $colors: (
   @warn "Unknown `#{$color}` - `#{$type}` in $colors.";
   @return null;
 }
+
+
+// Color Classes
+@each $color_name, $color in $colors {
+  @each $color_type, $color_value in $color {
+    @if $color_type == "base" {
+      .#{$color_name} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text {
+        color: $color_value !important;
+      }
+    }
+    @else if $color_name != "shades" {
+      .#{$color_name}.#{$color_type} {
+        background-color: $color_value !important;
+      }
+      .#{$color_name}-text.text-#{$color_type} {
+        color: $color_value !important;
+      }
+    }
+  }
+}
+
+// Shade classes
+@each $color, $color_value in $shades {
+  .#{$color} {
+    background-color: $color_value !important;
+  }
+  .#{$color}-text {
+    color: $color_value !important;
+  }
+}
diff --git a/sass/components/_datepicker.scss b/sass/components/_datepicker.scss
index a582def871..0af94e5ba8 100644
--- a/sass/components/_datepicker.scss
+++ b/sass/components/_datepicker.scss
@@ -261,29 +261,3 @@
   color: var(--md-sys-color-error);
 }
 
-
-/* Media Queries */
-@media #{$medium-and-up} {
-  // @removed since v2.2.1-dev regarding Material M3 standards
-  /*.datepicker-modal {
-    max-width: 625px;
-  }
-
-  .datepicker-container.modal-content {
-    flex-direction: row;
-  }
-
-  .datepicker-date-display {
-    flex: 0 1 270px;
-  }
-
-  .datepicker-controls,
-  .datepicker-table,
-  .datepicker-footer {
-    width: 320px;
-  }
-
-  .datepicker-day-button {
-    line-height: 44px;
-  }*/
-}
diff --git a/sass/components/_dropdown.scss b/sass/components/_dropdown.scss
index e20230aec6..b1478d6501 100644
--- a/sass/components/_dropdown.scss
+++ b/sass/components/_dropdown.scss
@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './global' as *;
+
 [popover] {
   outline: none;
   padding: 0;
diff --git a/sass/components/_global.scss b/sass/components/_global.scss
index 837c045609..96358b626b 100644
--- a/sass/components/_global.scss
+++ b/sass/components/_global.scss
@@ -1,3 +1,5 @@
+@use './_variables' as *;
+
 html {
   box-sizing: border-box;
 }
@@ -19,8 +21,10 @@ textarea {
   font-family: $font-stack;
 }
 
-a { color: $link-color; text-decoration: none;
-   -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
+a {
+  color: $link-color;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent; // Gets rid of tap active state
 }
 
 // Positioning
@@ -129,72 +133,6 @@ video.responsive-video {
   height: auto;
 }
 
-// moved to own component styling file @see https://github.com/materializecss/materialize/issues/566
-// Pagination
-/*.pagination {
-
-  li {
-    display: inline-block;
-    border-radius: 2px;
-    text-align: center;
-    vertical-align: top;
-    height: 30px;
-
-    a {
-      color: var(--md-sys-color-on-surface-variant);
-      display: inline-block;
-      font-size: 1.2rem;
-      padding: 0 10px;
-      line-height: 30px;
-    }
-
-    &:hover:not(.disabled) {
-      background-color: rgba(var(--md-sys-color-primary-numeric), 0.06);
-    }
-
-    &.active a {
-      color:  var(--md-sys-color-on-primary);
-    }
-
-    &.active,
-    &.active:hover {
-      background-color: var(--md-sys-color-primary);
-    }
-
-    &.disabled a {
-      cursor: default;
-      color: var(--md-sys-color-on-surface);
-    }
-
-    i {
-      font-size: 2rem;
-    }
-  }
-
-
-  li.pages ul li {
-    display: inline-block;
-    float: none;
-  }
-}
-
-@media #{$medium-and-down} {
-  .pagination {
-    width: 100%;
-
-    li.prev,
-    li.next {
-      width: 10%;
-    }
-
-    li.pages {
-      width: 80%;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
-}*/
-
 // Parallax
 .parallax-container {
   position: relative;
@@ -320,6 +258,7 @@ ul.staggered-list li { opacity: 0; }
     padding: 10px 0px;
   }
 }
+
 .page-footer ul {
   padding-left: 0;
   list-style-type: none;
diff --git a/sass/components/_grid.scss b/sass/components/_grid.scss
index 39a9a2f6d8..67517447a0 100644
--- a/sass/components/_grid.scss
+++ b/sass/components/_grid.scss
@@ -1,16 +1,18 @@
 @use "sass:math";
+@use './variables' as *;
 
-// Container
 .container {
   margin: 0 auto;
   max-width: 1280px;
   width: 90%;
 }
+
 @media #{$medium-and-up} {
   .container {
     width: 85%;
   }
 }
+
 @media #{$large-and-up} {
   .container {
     width: 70%;
diff --git a/sass/components/_modal.scss b/sass/components/_modal.scss
index 78cc6d2cdb..440f5543a4 100644
--- a/sass/components/_modal.scss
+++ b/sass/components/_modal.scss
@@ -1,9 +1,13 @@
+@use './variables' as *;
+@use './global' as *;
+
 // use with dialog html element
 .modal {
   --modal-footer-divider-height: 1px;
   --modal-border-radius: 28px;
   --modal-padding: 24px;
   --modal-padding-bottom: 16px;
+  --modal-background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
 
   @extend .z-depth-5;
   border: none;
@@ -13,7 +17,7 @@
   width: 55%;
   border-radius: var(--modal-border-radius);
   will-change: top, opacity;
-  background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
+  background-color: var(--modal-background-color);
 
   // Dialog open
   &[open] {
@@ -34,16 +38,21 @@
     padding: var(--modal-padding);
     padding-bottom: var(--modal-padding-bottom);
     flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    background-color: var(--modal-background-color);
   }
   .modal-content {
     padding: 0 var(--modal-padding);
-    overflow-y: auto;
   }
   .modal-footer {
     border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
     padding: var(--modal-padding);
     text-align: right;
     flex-shrink: 0;
+    position: sticky;
+    bottom: 0;
+    background-color: var(--modal-background-color);
   }
 
   .modal-close {
diff --git a/sass/components/_navbar.scss b/sass/components/_navbar.scss
index 00b8ffad87..358508708d 100644
--- a/sass/components/_navbar.scss
+++ b/sass/components/_navbar.scss
@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './global' as *;
+
 :root {
   --navbar-height: 64px;
   --navbar-height-mobile: 56px;
diff --git a/sass/components/_pagination.scss b/sass/components/_pagination.scss
index 1b74216609..c1b3af5cff 100644
--- a/sass/components/_pagination.scss
+++ b/sass/components/_pagination.scss
@@ -1,4 +1,6 @@
-// Pagination
+@use './variables' as *;
+@use './mixins.module.scss' as *;
+
 .pagination {
   li {
     display: inline-block;
diff --git a/sass/components/_preloader.scss b/sass/components/_preloader.scss
index 51ff4f7b02..004a3dcd28 100644
--- a/sass/components/_preloader.scss
+++ b/sass/components/_preloader.scss
@@ -1,4 +1,6 @@
-// Progress Bar
+@use './variables' as *;
+@use './colors.module.scss' as *;
+
 .progress {
   position: relative;
   height: 4px;
diff --git a/sass/components/_sidenav.scss b/sass/components/_sidenav.scss
index fa7f81c759..fae4863857 100644
--- a/sass/components/_sidenav.scss
+++ b/sass/components/_sidenav.scss
@@ -1,4 +1,6 @@
-/* This should be an UL-Element*/
+@use './variables' as *;
+@use './global' as *;
+
 .sidenav {
   --sidenav-width: 300px;
   --sidenav-font-size: 14px;
@@ -84,7 +86,6 @@
 
     &:not(.btn):not(.btn-flat):not(.btn-large):not(.btn-floating) {
       color: var(--md-sys-color-on-secondary-container);
-      //color: $sidenav-font-color;
       &:hover {
         //color: var(--md-sys-color-on-secondary-container);
         //md.sys.color.on-secondary-container
@@ -101,7 +102,6 @@
     & > .material-symbols-rounded, & > .material-symbols-sharp {
       display: inline-flex;
       vertical-align: middle;
-      //color: $sidenav-icon-color;
       margin-right: 12px;
     }
   }
@@ -113,7 +113,7 @@
   .subheader {
     cursor: initial;
     pointer-events: none;
-    color: red; //$sidenav-subheader-color;
+    color: red;
     font-size: var(--sidenav-font-size);
     font-weight: 500;
     line-height: var(--sidenav-line-height);
diff --git a/sass/components/_tabs.scss b/sass/components/_tabs.scss
index 83541792d9..50333425c7 100644
--- a/sass/components/_tabs.scss
+++ b/sass/components/_tabs.scss
@@ -1,3 +1,5 @@
+@use './variables' as *;
+
 .tabs {
   padding-left: 0;
   list-style-type: none;
diff --git a/sass/components/_timepicker.scss b/sass/components/_timepicker.scss
index cf7734d78c..6fdde9911b 100644
--- a/sass/components/_timepicker.scss
+++ b/sass/components/_timepicker.scss
@@ -1,9 +1,4 @@
-/* Timepicker Containers */
-/* modal removed as of v2.2.1 */
-/* .timepicker-modal {
-  max-width: 325px;
-  max-height: none;
-}*/
+@use './variables' as *;
 
 .timepicker-container {
   display: flex;
@@ -263,10 +258,6 @@ input[type=text].timepicker-input-minutes {
   }
 
   .timepicker-display-am-pm {
-    /*position: relative;
-    top: auto;
-    right: auto;
-    text-align: center;*/
     margin-top: 1.1rem;
   }
 
@@ -284,9 +275,6 @@ input[type=text].timepicker-input-minutes {
     padding-right: calc(var(--btn-padding) / .565);
     border-radius: var(--btn-border-radius);
     border: 1px solid var(--md-sys-color-outline);
-    /*line-height: inherit;
-    vertical-align: top;
-    text-align: inherit;*/
   }
 
   .timepicker-container .am-btn {
diff --git a/sass/components/_toast.scss b/sass/components/_toast.scss
index df0997b36b..e10a10cf36 100644
--- a/sass/components/_toast.scss
+++ b/sass/components/_toast.scss
@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './global' as *;
+
 #toast-container {
   display:block;
   position: fixed;
diff --git a/sass/components/_tooltip.scss b/sass/components/_tooltip.scss
index 61808d40f0..4610647552 100644
--- a/sass/components/_tooltip.scss
+++ b/sass/components/_tooltip.scss
@@ -1,36 +1,28 @@
 .material-tooltip {
   padding: 0 8px;  
   border-radius: 4px;
-  
   color: var(--md-sys-color-inverse-on-surface);
   background-color: var(--md-sys-color-inverse-surface);
-
   font-family: var(--md-sys-typescale-body-small-font-family-name);
   font-size: var(--md-sys-typescale-body-small-font-size);
   line-height: var(--md-sys-typescale-body-small-line-height);
   font-weight: var(--md-sys-typescale-body-small-font-weight);
-
   min-height: 24px;
   opacity: 0;
-
   padding-top: 6px;
   padding-bottom: 6px;
-
   font-size: 12px;
   line-height: 16px;
   font-weight: 400;
   letter-spacing: 0.4px;
-  
   position: absolute;
   max-width: 300px;
   overflow: hidden;
   left: 0;
   top: 0;
   pointer-events: none;
-
   display: flex;
   align-items: center;
-  
   visibility: hidden;
   z-index: 2000;
 }
diff --git a/sass/components/_typography.scss b/sass/components/_typography.scss
index d6db1ab3ea..c669a72804 100644
--- a/sass/components/_typography.scss
+++ b/sass/components/_typography.scss
@@ -1,5 +1,6 @@
 
 @use "sass:math";
+@use './variables' as *;
 
 a {
   text-decoration: none;
@@ -48,7 +49,7 @@ small { font-size: 75%; }
 .flow-text{
   $i: 0;
   @while $i <= $intervals {
-    @media only screen and (min-width : 360 + ($i * $interval-size)) {
+    @media only screen and (min-width : (360 + ($i * $interval-size))) {
       font-size: 1.2rem * (1 + (.02 * $i));
     }
     $i: $i + 1;
diff --git a/sass/components/_variables.scss b/sass/components/_variables.scss
index 22a73e0fc1..1299a319c6 100644
--- a/sass/components/_variables.scss
+++ b/sass/components/_variables.scss
@@ -2,10 +2,11 @@
 $md_sys_typescale_body-large_size: 16px;
 
 @use "sass:math";
+@use "./_color-variables";
 
 // Colors
-$success-color: color("green", "base") !default;
-$link-color: color("light-blue", "darken-1") !default;
+$success-color: colorFunc("green", "base") !default;
+$link-color: colorFunc("light-blue", "darken-1") !default;
 
 // Floating buttons
 $button-floating-background: var(--md-sys-color-secondary) !default;
diff --git a/sass/components/forms/_checkboxes.scss b/sass/components/forms/_checkboxes.scss
index 75075ca602..525e2e21f0 100644
--- a/sass/components/forms/_checkboxes.scss
+++ b/sass/components/forms/_checkboxes.scss
@@ -1,5 +1,4 @@
-/* Checkboxes
-   ========================================================================== */
+/* Checkboxes */
 
 /* Remove default checkbox */
 [type="checkbox"]:not(:checked),
diff --git a/sass/components/forms/_forms.scss b/sass/components/forms/_forms.scss
index e7cec0ec5b..d293f06f96 100644
--- a/sass/components/forms/_forms.scss
+++ b/sass/components/forms/_forms.scss
@@ -1,24 +1,18 @@
+@forward 'input-fields';
+@forward 'radio-buttons';
+@forward 'checkboxes';
+@forward 'switches';
+@forward 'select';
+@forward 'file-input';
+@forward 'range';
+
 // Remove Focus Boxes
 select:focus {
   outline: 1px solid var(--md-ref-palette-primary80);
 }
 
-/*
-button:focus {
-  outline: none;
-  background-color: $button-background-focus;
-}
-*/
-
 label {
   font-size: .8rem;
   color: var(--md-sys-color-on-surface-variant);
 }
 
-@import 'input-fields';
-@import 'radio-buttons';
-@import 'checkboxes';
-@import 'switches';
-@import 'select';
-@import 'file-input';
-@import 'range';
diff --git a/sass/components/forms/_input-fields.scss b/sass/components/forms/_input-fields.scss
index 962479805b..303a7a7330 100644
--- a/sass/components/forms/_input-fields.scss
+++ b/sass/components/forms/_input-fields.scss
@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 /* Style Placeholders */
 ::placeholder {
   color: var(--md-sys-color-on-surface-variant);
@@ -23,15 +25,18 @@ textarea.materialize-textarea {
   width: 100%;
   font-size: $md_sys_typescale_body-large_size; //16px; // => 16 dp
   height: 56px; // 56dp
+  background-color: transparent;
 }
 
 %invalid-input-style {
   border-bottom: 2px solid var(--md-sys-color-error);
   box-shadow: 0 1px 0 0 var(--md-sys-color-error);
 }
+
 %hidden-text > span {
   display: none
 }
+
 %custom-error-message {
   content: attr(data-error);
   color: var(--md-sys-color-error);
@@ -47,12 +52,9 @@ textarea.materialize-textarea {
 
   input, textarea {
     box-sizing: border-box; /* https://stackoverflow.com/questions/1377719/padding-within-inputs-breaks-width-100*/
-
     padding: 0 16px;
     padding-top: 20px;
-
-    background-color: var(--md-sys-color-surface);
-
+    //background-color: transparent; //background-color: var(--md-sys-color-surface);
     border: none; // reset
     border-radius: 4px; // md.sys.shape.corner.extra-small.top
     border-bottom: 1px solid var(--md-sys-color-on-surface-variant);
@@ -173,13 +175,14 @@ textarea.materialize-textarea {
 
   // Outlined
 
+  // todo: use this approach for floating labels with outline
+  // https://dev.to/icyjoseph/use-more-html-elements-floating-from-field-37o9
+
   &.outlined {
 
     input, textarea {
       padding-top: 0;
-
-      background-color: var(--md-sys-color-background);
-
+      background-color: transparent; //(--md-sys-color-background);
       border: 1px solid var(--md-sys-color-on-surface-variant);
       border-radius: 4px; // md.sys.shape.corner.extra-small
 
@@ -189,6 +192,7 @@ textarea.materialize-textarea {
         margin-left: -1px; // subtract border-width
 
       }
+
       // Label
       &:focus:not([readonly]) + label {
         color: var(--input-color);
@@ -200,14 +204,13 @@ textarea.materialize-textarea {
         left: 16px;
         margin-left: -4px;
         padding: 0 4px;
-        background-color: var(--md-sys-color-background);
+        background-color: transparent; //var(--md-sys-color-background);
       }
 
       &:disabled, &[readonly="readonly"] {
         color: rgba(var(--md_sys_color_on-surface), 0.38);
         border-color: rgba(var(--md_sys_color_on-surface), 0.12);
       }
-
     }
   }
 
@@ -238,7 +241,6 @@ textarea.materialize-textarea {
 .searchbar {
   .prefix {
     position: absolute;
-    //left: 12px;
     padding-left: 1rem;
     top: 0;
     user-select: none;
@@ -307,7 +309,6 @@ textarea {
   word-wrap: break-word;
   overflow-wrap: break-word; /* future version of deprecated 'word-wrap' */
   padding-top: 1.2rem; /* prevents text jump on Enter keypress */
-
   // Reduces repaints
   position: absolute;
   top: 0;
diff --git a/sass/components/forms/_range.scss b/sass/components/forms/_range.scss
index 1adf26ab48..47bfe9b7bf 100644
--- a/sass/components/forms/_range.scss
+++ b/sass/components/forms/_range.scss
@@ -1,3 +1,6 @@
+@use '../global' as *;
+@use '../colors.module.scss' as *;
+
 .range-field {
   position: relative;
 }
@@ -75,6 +78,7 @@ input[type=range] + .thumb {
 
 // WebKit
 input[type=range] {
+  appearance: none;
   -webkit-appearance: none;
 }
 
diff --git a/sass/components/forms/_select.scss b/sass/components/forms/_select.scss
index 37abfc7520..42376c3a86 100644
--- a/sass/components/forms/_select.scss
+++ b/sass/components/forms/_select.scss
@@ -1,3 +1,5 @@
+@use '../variables' as *;
+
 select.browser-default {
   opacity: 1;
   color: var(--md-sys-color-on-background);
@@ -14,67 +16,8 @@ select {
 }
 
 .select-wrapper {
-  /*
-  &.valid .helper-text[data-success],
-  &.invalid ~ .helper-text[data-error] {
-    @extend %hidden-text;
-  }
-
-  &.valid {
-    & > input.select-dropdown {
-      @extend %valid-input-style;
-    }
-    & ~ .helper-text:after {
-      //@extend %custom-success-message;
-    }
-  }
-
-  &.invalid {
-    & > input.select-dropdown,
-    & > input.select-dropdown:focus {
-      @extend %invalid-input-style;
-    }
-    & ~ .helper-text:after {
-      //@extend %custom-error-message;
-    }
-  }
-
-  &.valid + label,
-  &.invalid + label {
-    width: 100%;
-    pointer-events: none;
-  }
-  & + label:after {
-    //@extend %input-after-style;
-  }
-  */
-
   position: relative;
 
-  /*
-  input.select-dropdown {    
-    &:focus {
-      border-bottom: 1px solid var(--md-sys-color-primary);
-    }
-    position: relative;
-    cursor: pointer;
-    background-color: transparent;
-    border: none;
-    border-bottom: 2px solid var(--md-sys-color-on-surface-variant);
-    outline: none;
-    height: 3rem;
-    line-height: 3rem;
-    width: 100%;
-    font-size: 16px;
-    margin: 0 0 8px 0;
-    padding: 0;
-    display: block;
-    user-select:none;
-    z-index: 1;
-    color: var(--md-sys-color-on-background);
-  }
-  */
-
   .caret {
     position: absolute;
     right: 0;
@@ -127,43 +70,6 @@ select:disabled {
   //background-color: transparent;
 }
 
-/*
-body.keyboard-focused {
-  .select-dropdown.dropdown-content li:focus {
-    //background-color: $select-option-focus;
-  }
-}
-
-.select-dropdown.dropdown-content {
-  li {
-    &:hover:not(.disabled) {
-      //background-color: $select-option-hover;
-    }
-
-    &.selected:not(.disabled) {
-      //background-color: $select-option-selected;
-    }
-  }
-}
-*/
-
-/*
-// Prefix Icons
-.prefix ~ .select-wrapper {
-  margin-left: 3rem;
-  width: 92%;
-  width: calc(100% - 3rem);
-}
-.prefix ~ label { margin-left: 3rem; }
-// Suffix Icons
-.suffix ~ .select-wrapper {
-  margin-right: 3rem;
-  width: 92%;
-  width: calc(100% - 3rem);
-}
-.suffix ~ label { margin-right: 3rem; }
-*/
-
 // Icons
 .select-dropdown li {
   img {
@@ -187,9 +93,3 @@ body.keyboard-focused {
     padding-left: 1rem;
   }
 }
-
-/*
-.select-dropdown .selected {
-  color: red;
-}
-*/
diff --git a/sass/components/forms/_switches.scss b/sass/components/forms/_switches.scss
index 77d75372e8..72201f3d0c 100644
--- a/sass/components/forms/_switches.scss
+++ b/sass/components/forms/_switches.scss
@@ -1,3 +1,5 @@
+@use '../colors.module.scss' as *;
+
 .switch {
   --track-height: 32px;
   --track-width: 52px;
diff --git a/sass/components/mixins.module.scss b/sass/components/mixins.module.scss
index cdb9f469b6..465ae79bc1 100644
--- a/sass/components/mixins.module.scss
+++ b/sass/components/mixins.module.scss
@@ -1,3 +1,6 @@
+@use './variables' as *;
+@use './global' as *;
+
 @mixin btn(
   $height: var(--btn-height),
   $border-radius: var(--btn-border-radius),
diff --git a/sass/materialize.scss b/sass/materialize.scss
index ab2aea1bab..3828117358 100644
--- a/sass/materialize.scss
+++ b/sass/materialize.scss
@@ -1,50 +1,43 @@
 @charset "UTF-8";
 
-@import "components/tokens.module";
-@import "components/theme.module";
-//@import "components/_theme_variables";
-@import "components/colors.module";
-@import "components/typography.module";
-@import "components/mixins.module";
-
-// Color
-@import "components/color-variables";
-@import "components/color-classes";
-// Variables;
-@import "components/variables";
-
-// Reset
-@import "components/normalize";
+@forward "components/tokens.module";
+@forward "components/theme.module";
+//@forward "components/_theme_variables";
+@forward "components/colors.module";
+@forward "components/typography.module";
+@forward "components/mixins.module";
+@forward "components/color-variables";
+@forward "components/variables";
+@forward "components/normalize";
 
 // components
-@import "components/global";
-@import "components/buttons";
-@import "components/collection";
-@import "components/badges";
-@import "components/icons-material-design";
-@import "components/grid";
-@import "components/navbar";
-@import "components/typography";
-@import "components/transitions";
-@import "components/cards";
-@import "components/toast";
-@import "components/tabs";
-@import "components/tooltip";
-@import "components/dropdown";
-
-@import "components/modal";
-@import "components/collapsible";
-@import "components/chips";
-@import "components/materialbox";
-@import "components/forms/forms";
-@import "components/table_of_contents";
-@import "components/sidenav";
-@import "components/preloader";
-@import "components/slider";
-@import "components/carousel";
-@import "components/tapTarget";
-@import "components/pulse";
-@import "components/datepicker";
-@import "components/timepicker";
-@import "components/breadcrumb";
-@import "components/pagination";
+@forward "components/global";
+@forward "components/typography";
+@forward "components/buttons";
+@forward "components/collection";
+@forward "components/badges";
+@forward "components/icons-material-design";
+@forward "components/grid";
+@forward "components/navbar";
+@forward "components/transitions";
+@forward "components/cards";
+@forward "components/toast";
+@forward "components/tabs";
+@forward "components/tooltip";
+@forward "components/dropdown";
+@forward "components/modal";
+@forward "components/collapsible";
+@forward "components/chips";
+@forward "components/materialbox";
+@forward "components/forms/forms";
+@forward "components/table_of_contents";
+@forward "components/sidenav";
+@forward "components/preloader";
+@forward "components/slider";
+@forward "components/carousel";
+@forward "components/tapTarget";
+@forward "components/pulse";
+@forward "components/datepicker";
+@forward "components/timepicker";
+@forward "components/breadcrumb";
+@forward "components/pagination";
diff --git a/src/dropdown.ts b/src/dropdown.ts
index 5a4199dab1..32f26af5a1 100644
--- a/src/dropdown.ts
+++ b/src/dropdown.ts
@@ -128,7 +128,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
     this.el.ariaExpanded = 'false';
 
     // Move dropdown-content after dropdown-trigger
-    this._moveDropdown();
+    this._moveDropdownToElement();
     this._makeDropdownFocusable();
     this._setupEventHandlers();
   }
@@ -216,7 +216,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
 
   _handleClick = (e: MouseEvent) => {
     e.preventDefault();
-    this._moveDropdown((<HTMLElement>e.target).closest('li'));
+    //this._moveDropdown((<HTMLElement>e.target).closest('li'));
     if (this.isOpen) {
       this.close();
     } else {
@@ -224,8 +224,8 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
     }
   };
 
-  _handleMouseEnter = (e) => {
-    this._moveDropdown((<HTMLElement>e.target).closest('li'));
+  _handleMouseEnter = () => {
+    //this._moveDropdown((<HTMLElement>e.target).closest('li'));
     this.open();
   };
 
@@ -388,17 +388,16 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
     this.dropdownEl.style.transformOrigin = '';
   }
 
-  // Move dropdown after container or trigger
-  _moveDropdown(containerEl: HTMLElement = null) {
-    if (!!this.options.container) {
+  _moveDropdownToElement(containerEl: HTMLElement = null) {
+    if (this.options.container) {
       this.options.container.append(this.dropdownEl);
-    } else if (containerEl) {
-      if (!containerEl.contains(this.dropdownEl)) {
-        containerEl.append(this.dropdownEl);
-      }
-    } else {
-      this.el.after(this.dropdownEl);
+      return;
+    }
+    if (containerEl) {
+      if (!containerEl.contains(this.dropdownEl)) containerEl.append(this.dropdownEl);
+      return;
     }
+    this.el.after(this.dropdownEl);
   }
 
   _makeDropdownFocusable() {
@@ -584,7 +583,7 @@ export class Dropdown extends Component<DropdownOptions> implements Openable {
     if (getComputedStyle(closestOverflowParent).position === 'static')
       closestOverflowParent.style.position = 'relative';
 
-    this._moveDropdown(closestOverflowParent);
+    //this._moveDropdown(closestOverflowParent);
 
     // Set width before calculating positionInfo
     const idealWidth = this.options.constrainWidth
diff --git a/src/forms.ts b/src/forms.ts
index 3edc9bdb1a..a7ca5f0bcc 100644
--- a/src/forms.ts
+++ b/src/forms.ts
@@ -106,7 +106,7 @@ export class Forms {
       // So we set the height to the original one
       textarea.style.height = originalHeight + 'px';
     }
-    textarea.setAttribute('previous-length', textarea.value.length.toString());
+    textarea.setAttribute('previous-length', (textarea.value || '').length.toString());
   }
 
   static Init() {
@@ -158,9 +158,8 @@ export class Forms {
   static InitTextarea(textarea: HTMLTextAreaElement) {
     // Save Data in Element
     textarea.setAttribute('original-height', textarea.getBoundingClientRect().height.toString());
-    textarea.setAttribute('previous-length', textarea.value.length.toString());
+    textarea.setAttribute('previous-length', (textarea.value || '').length.toString());
     Forms.textareaAutoResize(textarea);
-
     textarea.addEventListener('keyup', (e) => Forms.textareaAutoResize(e.target));
     textarea.addEventListener('keydown', (e) => Forms.textareaAutoResize(e.target));
   }
diff --git a/src/select.ts b/src/select.ts
index 2a681624ff..963fa9f49e 100644
--- a/src/select.ts
+++ b/src/select.ts
@@ -57,7 +57,7 @@ export class FormSelect extends Component<FormSelectOptions> {
     };
 
     this.isMultiple = this.el.multiple;
-    this.nativeTabIndex = (this.el.tabIndex ?? -1);
+    this.nativeTabIndex = this.el.tabIndex ?? -1;
     this.el.tabIndex = -1;
     this._values = [];
     this._setupDropdown();
@@ -180,7 +180,6 @@ export class FormSelect extends Component<FormSelectOptions> {
 
   _setupDropdown() {
     this.labelEl = document.querySelector('[for="' + this.el.id + '"]');
-    if (this.labelEl) this.labelEl.style.display = 'none';
 
     this.wrapper = document.createElement('div');
     this.wrapper.classList.add('select-wrapper', 'input-field');
@@ -204,6 +203,7 @@ export class FormSelect extends Component<FormSelectOptions> {
     // Create dropdown
     this.dropdownOptions = document.createElement('ul');
     this.dropdownOptions.id = `select-options-${Utils.guid()}`;
+    this.dropdownOptions.setAttribute('popover', 'auto');
     this.dropdownOptions.classList.add('dropdown-content', 'select-dropdown');
     this.dropdownOptions.setAttribute('role', 'listbox');
     this.dropdownOptions.ariaMultiSelectable = this.isMultiple.toString();
@@ -290,7 +290,7 @@ export class FormSelect extends Component<FormSelectOptions> {
 
     // Initialize dropdown
     if (!this.el.disabled) {
-      const dropdownOptions = { ...this.options.dropdownOptions }; // TODO:
+      const dropdownOptions = { ...this.options.dropdownOptions };
       dropdownOptions.coverTrigger = false;
       const userOnOpenEnd = dropdownOptions.onOpenEnd;
       const userOnCloseEnd = dropdownOptions.onCloseEnd;
@@ -332,14 +332,8 @@ export class FormSelect extends Component<FormSelectOptions> {
     }
     // Add initial selections
     this._setSelectedStates();
-
-    // Add Label
-    if (this.labelEl) {
-      const label = document.createElement('label');
-      label.htmlFor = this.input.id;
-      label.innerText = this.labelEl.innerText;
-      this.input.after(label);
-    }
+    // move label
+    if (this.labelEl) this.input.after(this.labelEl);
   }
 
   _addOptionToValues(realOption: HTMLOptionElement, virtualOption: HTMLElement) {