diff --git a/.changeset/scss-layers-other-bundles.md b/.changeset/scss-layers-other-bundles.md
new file mode 100644
index 000000000..7eedfbf98
--- /dev/null
+++ b/.changeset/scss-layers-other-bundles.md
@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+---
+
+Updated `tabler-vendors.css`, `tabler-themes.css`, and `tabler-marketing.css` to use CSS Cascade Layers (`@layer`) for predictable cascade ordering.
+
diff --git a/.cursor/rules/scss-layers.mdc b/.cursor/rules/scss-layers.mdc
index f89601308..50d37074c 100644
--- a/.cursor/rules/scss-layers.mdc
+++ b/.cursor/rules/scss-layers.mdc
@@ -1,7 +1,52 @@
+---
+alwaysApply: false
+---
+
 ## SCSS Cascade Layers Guidelines
 
 Use CSS Cascade Layers (`@layer`) to make the cascade predictable across modules (reboot/layout/forms/components/helpers/utilities), without relying on import order or widespread `!important`.
 
+### 0. Inventory: SCSS entrypoints → CSS bundles → consumers
+
+This repo produces multiple CSS bundles from multiple SCSS entrypoints. Before moving rules into layers, keep this mapping handy so you can reason about bundle-level ordering and who consumes what.
+
+#### `@tabler/core` (published bundles)
+
+- **Build tool**: Sass CLI (not Vite) compiles `core/scss/` → `core/dist/css/` via `sass scss/:dist/css/`
+- **Entrypoints (non-partials)**:
+  - `core/scss/tabler.scss` → `core/dist/css/tabler.css` (+ `tabler.min.css`, `tabler.rtl.css`, `tabler.rtl.min.css`)
+    - **Consumers**:
+      - `shared/includes/layout/css.html` (preview pages, mandatory styles)
+      - `shared/layouts/docs/default.html` (docs site)
+      - `core/package.json` exposes it via `style: dist/css/tabler.css` and `sass: scss/tabler.scss`
+  - `core/scss/tabler-flags.scss` → `core/dist/css/tabler-flags.css` (+ `.min`, `.rtl`, `.rtl.min`)
+  - `core/scss/tabler-socials.scss` → `core/dist/css/tabler-socials.css` (+ `.min`, `.rtl`, `.rtl.min`)
+  - `core/scss/tabler-payments.scss` → `core/dist/css/tabler-payments.css` (+ `.min`, `.rtl`, `.rtl.min`)
+  - `core/scss/tabler-vendors.scss` → `core/dist/css/tabler-vendors.css` (+ `.min`, `.rtl`, `.rtl.min`)
+  - `core/scss/tabler-marketing.scss` → `core/dist/css/tabler-marketing.css` (+ `.min`, `.rtl`, `.rtl.min`)
+  - `core/scss/tabler-themes.scss` → `core/dist/css/tabler-themes.css` (+ `.min`, `.rtl`, `.rtl.min`)
+  - `core/scss/tabler-props.scss` → `core/dist/css/tabler-props.css` (+ `.min`, `.rtl`, `.rtl.min`)
+    - **Note**: currently not included by default layouts (it exists as a separate bundle and is covered by SRI generation).
+- **Plugin consumers**:
+  - Preview pages: `shared/includes/layout/css.html` loads `tabler-{{ plugin }}` for each plugin in `shared/data/site.json` (`cssPlugins`).
+  - Docs site: `shared/layouts/docs/default.html` loads the same plugin list.
+- **Copying into static sites**:
+  - `preview/eleventy.config.mjs` and `docs/eleventy.config.mjs` both `addPassthroughCopy({ "node_modules/@tabler/core/dist": "dist" })`, so core bundles are available at `/dist/css/...` in those sites.
+
+#### `@tabler/preview` (preview-only bundle)
+
+- **Build tool**: Sass CLI compiles `preview/scss/` → `preview/dist/preview/css/` via `sass scss/:dist/preview/css/`
+- **Entrypoints**:
+  - `preview/scss/demo.scss` → `preview/dist/preview/css/demo.css` (+ `.min`)
+    - **Consumer**: `shared/includes/layout/css.html` loads it as `/preview/css/demo...`
+
+#### `@tabler/docs` (docs-only bundle)
+
+- **Build tool**: Sass CLI compiles `docs/scss/` → `docs/dist/css/` via `sass scss/:dist/css/`
+- **Entrypoints**:
+  - `docs/scss/docs.scss` → `docs/dist/css/docs.css` (+ `.min`)
+    - **Consumer**: `shared/layouts/docs/default.html` loads it as `/css/docs...`
+
 ### 1. Canonical layer order (single source of truth)
 
 - Define the layer order exactly once in the main entrypoint (e.g. the file that builds the final CSS bundle).
diff --git a/core/scss/_bootstrap-components.scss b/core/scss/_bootstrap-components.scss
index 9d7cb3e9a..7cb41666d 100644
--- a/core/scss/_bootstrap-components.scss
+++ b/core/scss/_bootstrap-components.scss
@@ -1,30 +1,48 @@
-// Layout & components
-@import 'bootstrap/scss/root';
-@import 'bootstrap/scss/reboot';
-@import 'bootstrap/scss/type';
-@import 'bootstrap/scss/images';
-@import 'bootstrap/scss/containers';
-@import 'bootstrap/scss/grid';
-@import 'bootstrap/scss/tables';
-@import 'bootstrap/scss/forms';
-@import 'bootstrap/scss/buttons';
-@import 'bootstrap/scss/transitions';
-@import 'bootstrap/scss/dropdown';
-@import 'bootstrap/scss/button-group';
-@import 'bootstrap/scss/nav';
-@import 'bootstrap/scss/navbar';
-@import 'bootstrap/scss/card';
-@import 'bootstrap/scss/pagination';
-@import 'bootstrap/scss/progress';
-@import 'bootstrap/scss/list-group';
-@import 'bootstrap/scss/toasts';
-@import 'bootstrap/scss/modal';
-@import 'bootstrap/scss/tooltip';
-@import 'bootstrap/scss/popover';
-@import 'bootstrap/scss/carousel';
-@import 'bootstrap/scss/spinners';
-@import 'bootstrap/scss/offcanvas';
-@import 'bootstrap/scss/placeholders';
+// Bootstrap (CSS Cascade Layers)
+@layer root {
+  @import 'bootstrap/scss/root';
+}
 
-// Utilities
-@import 'bootstrap/scss/utilities/api';
+@layer reboot {
+  @import 'bootstrap/scss/reboot';
+}
+
+@layer content {
+  @import 'bootstrap/scss/type';
+  @import 'bootstrap/scss/images';
+  @import 'bootstrap/scss/tables';
+}
+
+@layer layout {
+  @import 'bootstrap/scss/containers';
+  @import 'bootstrap/scss/grid';
+  @import 'bootstrap/scss/nav';
+  @import 'bootstrap/scss/navbar';
+}
+
+@layer forms {
+  @import 'bootstrap/scss/forms';
+}
+
+@layer components {
+  @import 'bootstrap/scss/buttons';
+  @import 'bootstrap/scss/transitions';
+  @import 'bootstrap/scss/dropdown';
+  @import 'bootstrap/scss/button-group';
+  @import 'bootstrap/scss/card';
+  @import 'bootstrap/scss/pagination';
+  @import 'bootstrap/scss/progress';
+  @import 'bootstrap/scss/list-group';
+  @import 'bootstrap/scss/toasts';
+  @import 'bootstrap/scss/modal';
+  @import 'bootstrap/scss/tooltip';
+  @import 'bootstrap/scss/popover';
+  @import 'bootstrap/scss/carousel';
+  @import 'bootstrap/scss/spinners';
+  @import 'bootstrap/scss/offcanvas';
+  @import 'bootstrap/scss/placeholders';
+}
+
+@layer utilities {
+  @import 'bootstrap/scss/utilities/api';
+}
diff --git a/core/scss/_layers.scss b/core/scss/_layers.scss
new file mode 100644
index 000000000..4cee6b561
--- /dev/null
+++ b/core/scss/_layers.scss
@@ -0,0 +1,3 @@
+// Canonical CSS Cascade Layers order.
+// Keep in sync with `.cursor/rules/scss-layers.mdc`.
+@layer colors, theme, config, root, reboot, layout, content, forms, components, helpers, custom, utilities;
diff --git a/core/scss/_props.scss b/core/scss/_props.scss
index 3f1a65f5f..641899ec7 100644
--- a/core/scss/_props.scss
+++ b/core/scss/_props.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @import 'config';
 
+@layer root {
 :root,
 :host {
   /** Fonts */
@@ -91,3 +92,4 @@
   --#{$prefix}backdrop-blur: #{$backdrop-blur};
   --#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
 }
+}
diff --git a/core/scss/fonts/_geist.scss b/core/scss/fonts/_geist.scss
index 9184f5b73..fecc434fe 100644
--- a/core/scss/fonts/_geist.scss
+++ b/core/scss/fonts/_geist.scss
@@ -1,3 +1,4 @@
+@layer root {
 // Geist Sans Font Family
 @font-face {
   font-family: 'Geist';
@@ -201,3 +202,5 @@
   font-style: normal;
   font-display: swap;
 }
+
+}
diff --git a/core/scss/helpers/_index.scss b/core/scss/helpers/_index.scss
index b03015818..18b0f3971 100644
--- a/core/scss/helpers/_index.scss
+++ b/core/scss/helpers/_index.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer helpers {
 //
 // Clearfix
 //
@@ -142,3 +143,4 @@
   // By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
   box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
 }
+}
diff --git a/core/scss/layout/_animations.scss b/core/scss/layout/_animations.scss
index eb946ed0a..3c299eaaf 100644
--- a/core/scss/layout/_animations.scss
+++ b/core/scss/layout/_animations.scss
@@ -1,3 +1,4 @@
+@layer layout {
 @keyframes pulse {
   0% {
     transform: scale(1);
@@ -96,3 +97,4 @@
     transform: scaleX(1);
   }
 }
+}
diff --git a/core/scss/layout/_core.scss b/core/scss/layout/_core.scss
index f851a8ac0..fdeabd6ee 100644
--- a/core/scss/layout/_core.scss
+++ b/core/scss/layout/_core.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer layout {
 html {
   scrollbar-gutter: stable;
 
@@ -74,3 +75,4 @@ body {
     }
   }
 }
+}
diff --git a/core/scss/layout/_dark.scss b/core/scss/layout/_dark.scss
index 5a4267681..d681e09e6 100644
--- a/core/scss/layout/_dark.scss
+++ b/core/scss/layout/_dark.scss
@@ -2,6 +2,7 @@
 
 // stylelint-disable declaration-no-important
 
+@layer layout {
 @if $enable-dark-mode {
   :root {
     &:not(.theme-dark):not([data-bs-theme='dark']) {
@@ -67,3 +68,4 @@
     @extend [data-bs-theme='dark'];
   }
 }
+}
diff --git a/core/scss/layout/_footer.scss b/core/scss/layout/_footer.scss
index 43671dca8..0c1bcb526 100644
--- a/core/scss/layout/_footer.scss
+++ b/core/scss/layout/_footer.scss
@@ -1,3 +1,4 @@
+@layer layout {
 .footer {
   border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
   background-color: $footer-bg;
@@ -14,3 +15,4 @@
   background-color: transparent;
   border-top: 0;
 }
+}
diff --git a/core/scss/layout/_navbar.scss b/core/scss/layout/_navbar.scss
index bb5bcccbb..485e669da 100644
--- a/core/scss/layout/_navbar.scss
+++ b/core/scss/layout/_navbar.scss
@@ -76,6 +76,7 @@
   }
 }
 
+@layer layout {
 /**
 Navbar
  */
@@ -391,3 +392,4 @@ Navbar vertical
     box-shadow: inherit;
   }
 }
+}
diff --git a/core/scss/layout/_page.scss b/core/scss/layout/_page.scss
index 06eac431a..2fbb88616 100644
--- a/core/scss/layout/_page.scss
+++ b/core/scss/layout/_page.scss
@@ -1,3 +1,4 @@
+@layer layout {
 .page {
   display: flex;
   flex-direction: column;
@@ -167,3 +168,4 @@
     margin-top: 0;
   }
 }
+}
diff --git a/core/scss/layout/_root.scss b/core/scss/layout/_root.scss
index 85bfa4807..3ff8b9814 100644
--- a/core/scss/layout/_root.scss
+++ b/core/scss/layout/_root.scss
@@ -1,3 +1,4 @@
+@layer root {
 :root,
 :host {
   font-size: 16px;
@@ -60,3 +61,4 @@
     --#{$prefix}page-padding: #{$page-padding-sm};
   }
 }
+}
diff --git a/core/scss/marketing/_browser.scss b/core/scss/marketing/_browser.scss
index b6cd54dd5..7a5d77f5c 100644
--- a/core/scss/marketing/_browser.scss
+++ b/core/scss/marketing/_browser.scss
@@ -1,69 +1,71 @@
 //
 // Browser
 //
-.browser {
-  border-radius: var(--#{$prefix}border-radius-lg);
-  box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
-  background: var(--#{$prefix}bg-surface-secondary);
-  overflow: hidden;
-}
+@layer components {
+  .browser {
+    border-radius: var(--#{$prefix}border-radius-lg);
+    box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
+    background: var(--#{$prefix}bg-surface-secondary);
+    overflow: hidden;
+  }
 
-.browser-header {
-  padding: 0.25rem 1rem;
-  background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
-  border-bottom: 1px solid var(--#{$prefix}border-color);
-  border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
-}
+  .browser-header {
+    padding: 0.25rem 1rem;
+    background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
+    border-bottom: 1px solid var(--#{$prefix}border-color);
+    border-radius: calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0;
+  }
 
-.browser-dots {
-  margin-inline-end: 3rem;
-  display: flex;
-}
+  .browser-dots {
+    margin-inline-end: 3rem;
+    display: flex;
+  }
+
+  .browser-dots-colored {
+    .browser-dot {
+      &:nth-child(1) {
+        background: #fb6058;
+      }
+
+      &:nth-child(2) {
+        background: #fcbe3b;
+      }
+
+      &:nth-child(3) {
+        background: #2ccb4c;
+      }
+    }
+  }
 
-.browser-dots-colored {
   .browser-dot {
-    &:nth-child(1) {
-      background: #fb6058;
-    }
-
-    &:nth-child(2) {
-      background: #fcbe3b;
-    }
-
-    &:nth-child(3) {
-      background: #2ccb4c;
-    }
+    margin-inline-end: 0.5rem;
+    width: 0.75rem;
+    min-width: 0.75rem;
+    height: 0.75rem;
+    background: var(--#{$prefix}border-color);
+    border-radius: 50%;
+    border: 1px solid var(--#{$prefix}border-color-dark);
   }
-}
 
-.browser-dot {
-  margin-inline-end: 0.5rem;
-  width: 0.75rem;
-  min-width: 0.75rem;
-  height: 0.75rem;
-  background: var(--#{$prefix}border-color);
-  border-radius: 50%;
-  border: 1px solid var(--#{$prefix}border-color-dark);
-}
-
-.browser-input {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-decoration: none;
-  padding: 0.25rem;
-  color: var(--#{$prefix}secondary);
-  font-size: var(--#{$prefix}font-size-h5);
-  border-radius: var(--#{$prefix}border-radius);
-  line-height: 1;
-  cursor: pointer;
-  box-shadow:
-    0 0 0 1px rgba(0, 0, 0, 0.05),
-    0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
-
-  &:hover {
+  .browser-input {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     text-decoration: none;
+    padding: 0.25rem;
+    color: var(--#{$prefix}secondary);
+    font-size: var(--#{$prefix}font-size-h5);
+    border-radius: var(--#{$prefix}border-radius);
+    line-height: 1;
+    cursor: pointer;
+    box-shadow:
+      0 0 0 1px rgba(0, 0, 0, 0.05),
+      0 1px 2px 0 rgba(0, 0, 0, 0.05);
+    background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
+
+    &:hover {
+      text-decoration: none;
+    }
   }
 }
diff --git a/core/scss/marketing/_core.scss b/core/scss/marketing/_core.scss
index 5e56706bd..e5f4bce32 100644
--- a/core/scss/marketing/_core.scss
+++ b/core/scss/marketing/_core.scss
@@ -1,8 +1,10 @@
-.body-marketing {
-  --#{$prefix}body-font-size: 1rem;
-  --#{$prefix}body-line-height: 1.75;
-}
+@layer components {
+  .body-marketing {
+    --#{$prefix}body-font-size: 1rem;
+    --#{$prefix}body-line-height: 1.75;
+  }
 
-.body-gradient {
-  background: var(--#{$prefix}bg-surface) linear-gradient(to bottom, var(--#{$prefix}bg-surface-secondary) 12%, var(--#{$prefix}bg-surface) 99%) repeat-x top center/100% 100vh;
+  .body-gradient {
+    background: var(--#{$prefix}bg-surface) linear-gradient(to bottom, var(--#{$prefix}bg-surface-secondary) 12%, var(--#{$prefix}bg-surface) 99%) repeat-x top center/100% 100vh;
+  }
 }
diff --git a/core/scss/marketing/_hero.scss b/core/scss/marketing/_hero.scss
index 0b6ccc984..227fd9873 100644
--- a/core/scss/marketing/_hero.scss
+++ b/core/scss/marketing/_hero.scss
@@ -1,69 +1,71 @@
 //
 // Hero
 //
-.hero {
-  text-align: center;
-  padding: 6.5rem 0;
-}
-
-.hero-title {
-  font-size: 3rem;
-  font-weight: var(--#{$prefix}font-weight-black);
-  letter-spacing: $spacing-tight;
-  line-height: $headings-line-height;
-
-  @include media-breakpoint-down(md) {
-    font-size: 2rem;
+@layer components {
+  .hero {
+    text-align: center;
+    padding: 6.5rem 0;
   }
-}
 
-.hero-description {
-  color: var(--#{$prefix}secondary);
-  font-size: var(--#{$prefix}font-size-h2);
-  line-height: 1.5;
-  margin: 0 auto;
-  max-width: 45rem;
+  .hero-title {
+    font-size: 3rem;
+    font-weight: var(--#{$prefix}font-weight-black);
+    letter-spacing: $spacing-tight;
+    line-height: $headings-line-height;
 
-  @include media-breakpoint-down(sm) {
-    font-size: var(--#{$prefix}font-size-h3);
+    @include media-breakpoint-down(md) {
+      font-size: 2rem;
+    }
   }
-}
 
-.hero-description-wide {
-  max-width: 61.875rem;
-}
+  .hero-description {
+    color: var(--#{$prefix}secondary);
+    font-size: var(--#{$prefix}font-size-h2);
+    line-height: 1.5;
+    margin: 0 auto;
+    max-width: 45rem;
 
-//
-// Hero subheader
-//
-.hero-subheader {
-  @include subheader;
-  margin-bottom: 0.5rem;
-}
+    @include media-breakpoint-down(sm) {
+      font-size: var(--#{$prefix}font-size-h3);
+    }
+  }
 
-.hero-img {
-  margin: 4rem auto;
-  max-width: 65rem;
-  border-radius: $border-radius-lg;
-  position: relative;
-  z-index: 1;
-  //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
-  //  0 4px 6px -2px rgba($color-text, 0.05);
+  .hero-description-wide {
+    max-width: 61.875rem;
+  }
 
-  img,
-  svg {
-    max-width: 100%;
-    height: auto;
-    display: block;
+  //
+  // Hero subheader
+  //
+  .hero-subheader {
+    @include subheader;
+    margin-bottom: 0.5rem;
+  }
+
+  .hero-img {
+    margin: 4rem auto;
+    max-width: 65rem;
+    border-radius: $border-radius-lg;
     position: relative;
+    z-index: 1;
+    //box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
+    //  0 4px 6px -2px rgba($color-text, 0.05);
+
+    img,
+    svg {
+      max-width: 100%;
+      height: auto;
+      display: block;
+      position: relative;
+    }
   }
+  //
+  //.hero-img-side {
+  //  img,
+  //  svg {
+  //    max-width: 100%;
+  //    height: auto;
+  //    display: block;
+  //  }
+  //}
 }
-//
-//.hero-img-side {
-//  img,
-//  svg {
-//    max-width: 100%;
-//    height: auto;
-//    display: block;
-//  }
-//}
diff --git a/core/scss/marketing/_pricing.scss b/core/scss/marketing/_pricing.scss
index 7491f5122..b88e36a4e 100644
--- a/core/scss/marketing/_pricing.scss
+++ b/core/scss/marketing/_pricing.scss
@@ -1,111 +1,113 @@
 $pricing-card-width: 22rem;
 
-.pricing {
-  display: flex;
-  flex-direction: column;
-  margin: 0 auto;
-  justify-content: center;
-
-  @include media-breakpoint-up(md) {
-    flex-direction: row;
-  }
-}
-
-.pricing-card {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  background: var(--#{$prefix}bg-surface);
-  border: 1px solid $border-color;
-  padding: 2rem;
-  margin: 0 0 1rem;
-  position: relative;
-  box-shadow: $box-shadow-card;
-  text-align: center;
-  border-radius: $border-radius-lg;
-
-  @include media-breakpoint-up(md) {
-    margin: 1rem -1px;
-    max-width: $pricing-card-width;
-
-    &:first-child {
-      border-radius: $border-radius-lg 0 0 $border-radius-lg;
-    }
-
-    &:last-child {
-      border-radius: 0 $border-radius-lg $border-radius-lg 0;
-    }
-  }
-
-  &.featured {
-    z-index: 1;
-    border: 2px solid var(--#{$prefix}primary);
-    order: -1;
+@layer components {
+  .pricing {
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    justify-content: center;
 
     @include media-breakpoint-up(md) {
-      order: unset;
-      margin-top: 0;
-      margin-bottom: 0;
-      box-shadow: $box-shadow-card;
-      border-radius: $border-radius-lg;
+      flex-direction: row;
+    }
+  }
+
+  .pricing-card {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: var(--#{$prefix}bg-surface);
+    border: 1px solid $border-color;
+    padding: 2rem;
+    margin: 0 0 1rem;
+    position: relative;
+    box-shadow: $box-shadow-card;
+    text-align: center;
+    border-radius: $border-radius-lg;
+
+    @include media-breakpoint-up(md) {
+      margin: 1rem -1px;
+      max-width: $pricing-card-width;
+
+      &:first-child {
+        border-radius: $border-radius-lg 0 0 $border-radius-lg;
+      }
+
+      &:last-child {
+        border-radius: 0 $border-radius-lg $border-radius-lg 0;
+      }
+    }
+
+    &.featured {
+      z-index: 1;
+      border: 2px solid var(--#{$prefix}primary);
+      order: -1;
+
+      @include media-breakpoint-up(md) {
+        order: unset;
+        margin-top: 0;
+        margin-bottom: 0;
+        box-shadow: $box-shadow-card;
+        border-radius: $border-radius-lg;
+      }
+    }
+  }
+
+  .pricing-title {
+    font-size: $h2-font-size;
+    line-height: $h2-line-height;
+  }
+
+  .pricing-label {
+    position: absolute;
+    top: 0;
+    inset-inline-start: 0;
+    transform: translateY(-50%);
+    vertical-align: bottom;
+    inset-inline-end: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .pricing-btn {
+    margin-top: auto;
+    padding-top: 2rem;
+  }
+
+  .pricing-price {
+    display: flex;
+    justify-content: center;
+    font-size: 2.5rem;
+    line-height: 1;
+    font-weight: $font-weight-semibold;
+    margin: 0.75rem 0;
+  }
+
+  .pricing-price-currency {
+    font-size: $h2-font-size;
+    line-height: 1.5;
+    margin-inline-end: 0.25rem;
+    font-weight: $font-weight-semibold;
+  }
+
+  .pricing-price-description {
+    font-size: $h4-font-size;
+    line-height: $h4-line-height;
+    font-weight: $font-weight-normal;
+    color: $text-secondary;
+    align-self: center;
+    margin-inline-start: 0.5rem;
+  }
+
+  .pricing-features {
+    margin: 1rem 0 0;
+    padding: 0;
+    list-style: none;
+    text-align: start;
+
+    > li:not(:first-child) {
+      margin-top: 0.25rem;
     }
   }
 }
-
-.pricing-title {
-  font-size: $h2-font-size;
-  line-height: $h2-line-height;
-}
-
-.pricing-label {
-  position: absolute;
-  top: 0;
-  inset-inline-start: 0;
-  transform: translateY(-50%);
-  vertical-align: bottom;
-  inset-inline-end: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.pricing-btn {
-  margin-top: auto;
-  padding-top: 2rem;
-}
-
-.pricing-price {
-  display: flex;
-  justify-content: center;
-  font-size: 2.5rem;
-  line-height: 1;
-  font-weight: $font-weight-semibold;
-  margin: 0.75rem 0;
-}
-
-.pricing-price-currency {
-  font-size: $h2-font-size;
-  line-height: 1.5;
-  margin-inline-end: 0.25rem;
-  font-weight: $font-weight-semibold;
-}
-
-.pricing-price-description {
-  font-size: $h4-font-size;
-  line-height: $h4-line-height;
-  font-weight: $font-weight-normal;
-  color: $text-secondary;
-  align-self: center;
-  margin-inline-start: 0.5rem;
-}
-
-.pricing-features {
-  margin: 1rem 0 0;
-  padding: 0;
-  list-style: none;
-  text-align: start;
-
-  > li:not(:first-child) {
-    margin-top: 0.25rem;
-  }
-}
diff --git a/core/scss/marketing/_sections.scss b/core/scss/marketing/_sections.scss
index 31380e47c..d4e31f736 100644
--- a/core/scss/marketing/_sections.scss
+++ b/core/scss/marketing/_sections.scss
@@ -1,124 +1,126 @@
-@keyframes move-forever1 {
-  0% {
-    transform: translate(85px, 0%);
+@layer components {
+  @keyframes move-forever1 {
+    0% {
+      transform: translate(85px, 0%);
+    }
+
+    100% {
+      transform: translate(-90px, 0%);
+    }
   }
 
-  100% {
-    transform: translate(-90px, 0%);
-  }
-}
+  @keyframes move-forever2 {
+    0% {
+      transform: translate(-90px, 0%);
+    }
 
-@keyframes move-forever2 {
-  0% {
-    transform: translate(-90px, 0%);
+    100% {
+      transform: translate(85px, 0%);
+    }
   }
 
-  100% {
-    transform: translate(85px, 0%);
-  }
-}
+  @keyframes move-forever3 {
+    0% {
+      transform: translate(-90px, 0%);
+    }
 
-@keyframes move-forever3 {
-  0% {
-    transform: translate(-90px, 0%);
+    100% {
+      transform: translate(85px, 0%);
+    }
   }
 
-  100% {
-    transform: translate(85px, 0%);
-  }
-}
-
-//
-// Sections
-//
-.section {
-  --section-bg: transparent;
-  background: var(--section-bg);
-  position: relative;
-  padding: 5rem 0;
-}
-
-.section-sm {
-  padding: 4rem 0;
-}
-
-.section-white {
-  --section-bg: var(--#{$prefix}bg-surface);
-}
-
-.section-light {
-  --section-bg: var(--#{$prefix}bg-surface-secondary);
-}
-
-.section-primary {
-  --section-bg: var(--#{$prefix}primary);
-  color: $white;
-}
-
-.section-dark {
-  --section-bg: var(--#{$prefix}dark);
-  color: $white;
-}
-
-.section-header {
-  text-align: center;
-  max-width: 45rem;
-  margin: 0 auto 5rem;
-
-  @at-root .section-sm & {
-    margin-bottom: 4rem;
-  }
-}
-
-.section-title {
-  font-size: var(--#{$prefix}font-size-h1);
-  font-weight: var(--#{$prefix}font-weight-semibold);
-  line-height: 1.2;
-}
-
-.section-title-lg {
-  font-size: 2rem;
-}
-
-.section-description {
-  color: var(--#{$prefix}secondary);
-  font-size: var(--#{$prefix}font-size-h3);
-  line-height: var(--#{$prefix}line-height-h3);
-  margin-top: 1rem;
-}
-
-//
-// Section divider
-//
-.section-divider {
-  position: absolute;
-  bottom: 100%;
-  pointer-events: none;
-  height: 5rem;
-  width: 100%;
-
-  path {
-    fill: var(--section-bg);
+  //
+  // Sections
+  //
+  .section {
+    --section-bg: transparent;
+    background: var(--section-bg);
+    position: relative;
+    padding: 5rem 0;
   }
 
-  .wave-1 {
-    animation: move-forever1 30s linear infinite;
-    animation-delay: -2s;
+  .section-sm {
+    padding: 4rem 0;
   }
 
-  .wave-2 {
-    animation: move-forever2 24s linear infinite;
-    opacity: 0.5;
-    animation-delay: -2s;
+  .section-white {
+    --section-bg: var(--#{$prefix}bg-surface);
   }
 
-  .wave-3 {
-    animation: move-forever3 18s linear infinite;
-    opacity: 0.3;
-    animation-delay: -2s;
+  .section-light {
+    --section-bg: var(--#{$prefix}bg-surface-secondary);
+  }
+
+  .section-primary {
+    --section-bg: var(--#{$prefix}primary);
+    color: $white;
+  }
+
+  .section-dark {
+    --section-bg: var(--#{$prefix}dark);
+    color: $white;
+  }
+
+  .section-header {
+    text-align: center;
+    max-width: 45rem;
+    margin: 0 auto 5rem;
+
+    @at-root .section-sm & {
+      margin-bottom: 4rem;
+    }
+  }
+
+  .section-title {
+    font-size: var(--#{$prefix}font-size-h1);
+    font-weight: var(--#{$prefix}font-weight-semibold);
+    line-height: 1.2;
+  }
+
+  .section-title-lg {
+    font-size: 2rem;
+  }
+
+  .section-description {
+    color: var(--#{$prefix}secondary);
+    font-size: var(--#{$prefix}font-size-h3);
+    line-height: var(--#{$prefix}line-height-h3);
+    margin-top: 1rem;
+  }
+
+  //
+  // Section divider
+  //
+  .section-divider {
+    position: absolute;
+    bottom: 100%;
+    pointer-events: none;
+    height: 5rem;
+    width: 100%;
+
+    path {
+      fill: var(--section-bg);
+    }
+
+    .wave-1 {
+      animation: move-forever1 30s linear infinite;
+      animation-delay: -2s;
+    }
+
+    .wave-2 {
+      animation: move-forever2 24s linear infinite;
+      opacity: 0.5;
+      animation-delay: -2s;
+    }
+
+    .wave-3 {
+      animation: move-forever3 18s linear infinite;
+      opacity: 0.3;
+      animation-delay: -2s;
+    }
+  }
+
+  .section-divider-auto {
+    height: auto;
   }
 }
-
-.section-divider-auto {
-  height: auto;
-}
diff --git a/core/scss/marketing/_shape.scss b/core/scss/marketing/_shape.scss
index 319b45abc..f7e407623 100644
--- a/core/scss/marketing/_shape.scss
+++ b/core/scss/marketing/_shape.scss
@@ -1,33 +1,35 @@
 @use 'sass:map';
 
-.shape {
-  --#{$prefix}shape-size: #{$avatar-size};
-  --#{$prefix}shape-icon-size: #{$avatar-icon-size};
-  background-color: var(--#{$prefix}primary-lt);
-  color: var(--#{$prefix}primary);
-  border-radius: 35%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  height: var(--#{$prefix}shape-size);
-  width: var(--#{$prefix}shape-size);
+@layer components {
+  .shape {
+    --#{$prefix}shape-size: #{$avatar-size};
+    --#{$prefix}shape-icon-size: #{$avatar-icon-size};
+    background-color: var(--#{$prefix}primary-lt);
+    color: var(--#{$prefix}primary);
+    border-radius: 35%;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: var(--#{$prefix}shape-size);
+    width: var(--#{$prefix}shape-size);
 
-  .icon {
-    width: var(--#{$prefix}shape-icon-size);
-    height: var(--#{$prefix}shape-icon-size);
-  }
-}
-
-@each $avatar-size, $size in $avatar-sizes {
-  .shape-#{$avatar-size} {
-    --#{$prefix}shape-size: #{map.get($size, size)};
-    --#{$prefix}shape-icon-size: #{map.get($size, icon-size)};
-  }
-}
-
-@each $name, $color in $colors {
-  .shape-#{$name} {
-    background: var(--#{$prefix}#{$name}-lt);
-    color: var(--#{$prefix}#{$name});
+    .icon {
+      width: var(--#{$prefix}shape-icon-size);
+      height: var(--#{$prefix}shape-icon-size);
+    }
+  }
+
+  @each $avatar-size, $size in $avatar-sizes {
+    .shape-#{$avatar-size} {
+      --#{$prefix}shape-size: #{map.get($size, size)};
+      --#{$prefix}shape-icon-size: #{map.get($size, icon-size)};
+    }
+  }
+
+  @each $name, $color in $colors {
+    .shape-#{$name} {
+      background: var(--#{$prefix}#{$name}-lt);
+      color: var(--#{$prefix}#{$name});
+    }
   }
 }
diff --git a/core/scss/tabler-flags.scss b/core/scss/tabler-flags.scss
index 6b3d00c90..c2093fb4c 100644
--- a/core/scss/tabler-flags.scss
+++ b/core/scss/tabler-flags.scss
@@ -1 +1,3 @@
+@use 'layers';
+
 @import 'ui/flags';
diff --git a/core/scss/tabler-marketing.scss b/core/scss/tabler-marketing.scss
index cbef804f6..1f7b83f36 100644
--- a/core/scss/tabler-marketing.scss
+++ b/core/scss/tabler-marketing.scss
@@ -1,3 +1,5 @@
+@use 'layers';
+
 @import 'config';
 @import 'variables';
 @import 'utilities-marketing';
@@ -10,4 +12,6 @@
 @import 'marketing/pricing';
 @import 'marketing/shape';
 
-@import 'bootstrap/scss/utilities/api';
+@layer utilities {
+  @import 'bootstrap/scss/utilities/api';
+}
diff --git a/core/scss/tabler-payments.scss b/core/scss/tabler-payments.scss
index 0aed94244..684cf37ae 100644
--- a/core/scss/tabler-payments.scss
+++ b/core/scss/tabler-payments.scss
@@ -1 +1,3 @@
+@use 'layers';
+
 @forward 'ui/payments';
diff --git a/core/scss/tabler-props.scss b/core/scss/tabler-props.scss
index d13474ffc..d54cfc090 100644
--- a/core/scss/tabler-props.scss
+++ b/core/scss/tabler-props.scss
@@ -1 +1,3 @@
+@use 'layers';
+
 @import 'props';
diff --git a/core/scss/tabler-socials.scss b/core/scss/tabler-socials.scss
index 9d2277856..be68daa05 100644
--- a/core/scss/tabler-socials.scss
+++ b/core/scss/tabler-socials.scss
@@ -1 +1,3 @@
+@use 'layers';
+
 @import 'ui/social';
diff --git a/core/scss/tabler-themes.scss b/core/scss/tabler-themes.scss
index f16e16f29..6607755f2 100644
--- a/core/scss/tabler-themes.scss
+++ b/core/scss/tabler-themes.scss
@@ -1,121 +1,125 @@
+@use 'layers';
+
 @import 'config';
 
-[data-bs-theme-base='slate'] {
-  --#{$prefix}gray-50: #f8fafc;
-  --#{$prefix}gray-100: #f1f5f9;
-  --#{$prefix}gray-200: #e2e8f0;
-  --#{$prefix}gray-300: #cbd5e1;
-  --#{$prefix}gray-400: #94a3b8;
-  --#{$prefix}gray-500: #64748b;
-  --#{$prefix}gray-600: #475569;
-  --#{$prefix}gray-700: #334155;
-  --#{$prefix}gray-800: #1e293b;
-  --#{$prefix}gray-900: #0f172a;
-  --#{$prefix}gray-950: #020617;
-}
-
-[data-bs-theme-base='gray'] {
-  --#{$prefix}gray-50: $gray-50;
-  --#{$prefix}gray-100: $gray-100;
-  --#{$prefix}gray-200: $gray-200;
-  --#{$prefix}gray-300: $gray-300;
-  --#{$prefix}gray-400: $gray-400;
-  --#{$prefix}gray-500: $gray-500;
-  --#{$prefix}gray-600: $gray-600;
-  --#{$prefix}gray-700: $gray-700;
-  --#{$prefix}gray-800: $gray-800;
-  --#{$prefix}gray-900: $gray-900;
-  --#{$prefix}gray-950: $gray-950;
-}
-
-[data-bs-theme-base='zinc'] {
-  --#{$prefix}gray-50: #fafafa;
-  --#{$prefix}gray-100: #f4f4f5;
-  --#{$prefix}gray-200: #e4e4e7;
-  --#{$prefix}gray-300: #d4d4d8;
-  --#{$prefix}gray-400: #a1a1aa;
-  --#{$prefix}gray-500: #71717a;
-  --#{$prefix}gray-600: #52525b;
-  --#{$prefix}gray-700: #3f3f46;
-  --#{$prefix}gray-800: #27272a;
-  --#{$prefix}gray-900: #18181b;
-  --#{$prefix}gray-950: #09090b;
-}
-
-[data-bs-theme-base='neutral'] {
-  --#{$prefix}gray-50: #fafafa;
-  --#{$prefix}gray-100: #f5f5f5;
-  --#{$prefix}gray-200: #e5e5e5;
-  --#{$prefix}gray-300: #d4d4d4;
-  --#{$prefix}gray-400: #a3a3a3;
-  --#{$prefix}gray-500: #737373;
-  --#{$prefix}gray-600: #525252;
-  --#{$prefix}gray-700: #404040;
-  --#{$prefix}gray-800: #262626;
-  --#{$prefix}gray-900: #171717;
-  --#{$prefix}gray-950: #0a0a0a;
-}
-
-[data-bs-theme-base='stone'] {
-  --#{$prefix}gray-50: #fafaf9;
-  --#{$prefix}gray-100: #f5f5f4;
-  --#{$prefix}gray-200: #e7e5e4;
-  --#{$prefix}gray-300: #d6d3d1;
-  --#{$prefix}gray-400: #a8a29e;
-  --#{$prefix}gray-500: #78716c;
-  --#{$prefix}gray-600: #57534e;
-  --#{$prefix}gray-700: #44403c;
-  --#{$prefix}gray-800: #292524;
-  --#{$prefix}gray-900: #1c1917;
-  --#{$prefix}gray-950: #0c0a09;
-}
-
-[data-bs-theme-base='pink'] {
-  --#{$prefix}gray-50: #fdf2f8;
-  --#{$prefix}gray-100: #fce7f3;
-  --#{$prefix}gray-200: #fbcfe8;
-  --#{$prefix}gray-300: #f9a8d4;
-  --#{$prefix}gray-400: #f472b6;
-  --#{$prefix}gray-500: #ec4899;
-  --#{$prefix}gray-600: #db2777;
-  --#{$prefix}gray-700: #be185d;
-  --#{$prefix}gray-800: #9d174d;
-  --#{$prefix}gray-900: #831843;
-  --#{$prefix}gray-950: #500724;
-}
-
-@each $name, $value in $extra-colors {
-  [data-bs-theme-primary='#{$name}'] {
-    --#{$prefix}primary: #{$value};
-    --#{$prefix}primary-rgb: #{to-rgb($value)};
+@layer theme {
+  [data-bs-theme-base='slate'] {
+    --#{$prefix}gray-50: #f8fafc;
+    --#{$prefix}gray-100: #f1f5f9;
+    --#{$prefix}gray-200: #e2e8f0;
+    --#{$prefix}gray-300: #cbd5e1;
+    --#{$prefix}gray-400: #94a3b8;
+    --#{$prefix}gray-500: #64748b;
+    --#{$prefix}gray-600: #475569;
+    --#{$prefix}gray-700: #334155;
+    --#{$prefix}gray-800: #1e293b;
+    --#{$prefix}gray-900: #0f172a;
+    --#{$prefix}gray-950: #020617;
   }
-}
 
-@each $value in (0, 0.5, 1, 1.5, 2) {
-  [data-bs-theme-radius='#{$value}'] {
-    --#{$prefix}border-radius-scale: #{$value};
+  [data-bs-theme-base='gray'] {
+    --#{$prefix}gray-50: $gray-50;
+    --#{$prefix}gray-100: $gray-100;
+    --#{$prefix}gray-200: $gray-200;
+    --#{$prefix}gray-300: $gray-300;
+    --#{$prefix}gray-400: $gray-400;
+    --#{$prefix}gray-500: $gray-500;
+    --#{$prefix}gray-600: $gray-600;
+    --#{$prefix}gray-700: $gray-700;
+    --#{$prefix}gray-800: $gray-800;
+    --#{$prefix}gray-900: $gray-900;
+    --#{$prefix}gray-950: $gray-950;
   }
-}
 
-[data-bs-theme-primary='inverted'] {
-  --#{$prefix}primary: var(--#{$prefix}gray-800);
-  --#{$prefix}primary-fg: var(--#{$prefix}light);
-  --#{$prefix}primary-rgb: #{to-rgb($dark)};
-
-  &[data-bs-theme='dark'],
-  [data-bs-theme='dark'] {
-    --#{$prefix}primary: #{$light};
-    --#{$prefix}primary-fg: var(--#{$prefix}dark);
-    --#{$prefix}primary-rgb: #{to-rgb($light)};
+  [data-bs-theme-base='zinc'] {
+    --#{$prefix}gray-50: #fafafa;
+    --#{$prefix}gray-100: #f4f4f5;
+    --#{$prefix}gray-200: #e4e4e7;
+    --#{$prefix}gray-300: #d4d4d8;
+    --#{$prefix}gray-400: #a1a1aa;
+    --#{$prefix}gray-500: #71717a;
+    --#{$prefix}gray-600: #52525b;
+    --#{$prefix}gray-700: #3f3f46;
+    --#{$prefix}gray-800: #27272a;
+    --#{$prefix}gray-900: #18181b;
+    --#{$prefix}gray-950: #09090b;
   }
-}
 
-@each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
-  [data-bs-theme-font='#{$name}'] {
-    --#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
+  [data-bs-theme-base='neutral'] {
+    --#{$prefix}gray-50: #fafafa;
+    --#{$prefix}gray-100: #f5f5f5;
+    --#{$prefix}gray-200: #e5e5e5;
+    --#{$prefix}gray-300: #d4d4d4;
+    --#{$prefix}gray-400: #a3a3a3;
+    --#{$prefix}gray-500: #737373;
+    --#{$prefix}gray-600: #525252;
+    --#{$prefix}gray-700: #404040;
+    --#{$prefix}gray-800: #262626;
+    --#{$prefix}gray-900: #171717;
+    --#{$prefix}gray-950: #0a0a0a;
+  }
 
-    @if $name == 'monospace' {
-      --#{$prefix}body-font-size: 80%;
+  [data-bs-theme-base='stone'] {
+    --#{$prefix}gray-50: #fafaf9;
+    --#{$prefix}gray-100: #f5f5f4;
+    --#{$prefix}gray-200: #e7e5e4;
+    --#{$prefix}gray-300: #d6d3d1;
+    --#{$prefix}gray-400: #a8a29e;
+    --#{$prefix}gray-500: #78716c;
+    --#{$prefix}gray-600: #57534e;
+    --#{$prefix}gray-700: #44403c;
+    --#{$prefix}gray-800: #292524;
+    --#{$prefix}gray-900: #1c1917;
+    --#{$prefix}gray-950: #0c0a09;
+  }
+
+  [data-bs-theme-base='pink'] {
+    --#{$prefix}gray-50: #fdf2f8;
+    --#{$prefix}gray-100: #fce7f3;
+    --#{$prefix}gray-200: #fbcfe8;
+    --#{$prefix}gray-300: #f9a8d4;
+    --#{$prefix}gray-400: #f472b6;
+    --#{$prefix}gray-500: #ec4899;
+    --#{$prefix}gray-600: #db2777;
+    --#{$prefix}gray-700: #be185d;
+    --#{$prefix}gray-800: #9d174d;
+    --#{$prefix}gray-900: #831843;
+    --#{$prefix}gray-950: #500724;
+  }
+
+  @each $name, $value in $extra-colors {
+    [data-bs-theme-primary='#{$name}'] {
+      --#{$prefix}primary: #{$value};
+      --#{$prefix}primary-rgb: #{to-rgb($value)};
+    }
+  }
+
+  @each $value in (0, 0.5, 1, 1.5, 2) {
+    [data-bs-theme-radius='#{$value}'] {
+      --#{$prefix}border-radius-scale: #{$value};
+    }
+  }
+
+  [data-bs-theme-primary='inverted'] {
+    --#{$prefix}primary: var(--#{$prefix}gray-800);
+    --#{$prefix}primary-fg: var(--#{$prefix}light);
+    --#{$prefix}primary-rgb: #{to-rgb($dark)};
+
+    &[data-bs-theme='dark'],
+    [data-bs-theme='dark'] {
+      --#{$prefix}primary: #{$light};
+      --#{$prefix}primary-fg: var(--#{$prefix}dark);
+      --#{$prefix}primary-rgb: #{to-rgb($light)};
+    }
+  }
+
+  @each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
+    [data-bs-theme-font='#{$name}'] {
+      --#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
+
+      @if $name == 'monospace' {
+        --#{$prefix}body-font-size: 80%;
+      }
     }
   }
 }
diff --git a/core/scss/tabler-vendors.scss b/core/scss/tabler-vendors.scss
index e7894b6e7..d8517f341 100644
--- a/core/scss/tabler-vendors.scss
+++ b/core/scss/tabler-vendors.scss
@@ -1,16 +1,20 @@
+@use 'layers';
+
 @import 'config';
 
-@import 'vendor/nouislider';
-@import 'vendor/litepicker';
-@import 'vendor/tom-select';
-@import 'vendor/apexcharts';
-@import 'vendor/jsvectormap';
-@import 'vendor/dropzone';
-@import 'vendor/fslightbox';
-@import 'vendor/plyr';
-@import 'vendor/wysiwyg';
-@import 'vendor/stars-rating';
-@import 'vendor/coloris';
-@import 'vendor/typed';
-@import 'vendor/turbo';
-@import 'vendor/fullcalendar';
+@layer components {
+  @import 'vendor/nouislider';
+  @import 'vendor/litepicker';
+  @import 'vendor/tom-select';
+  @import 'vendor/apexcharts';
+  @import 'vendor/jsvectormap';
+  @import 'vendor/dropzone';
+  @import 'vendor/fslightbox';
+  @import 'vendor/plyr';
+  @import 'vendor/wysiwyg';
+  @import 'vendor/stars-rating';
+  @import 'vendor/coloris';
+  @import 'vendor/typed';
+  @import 'vendor/turbo';
+  @import 'vendor/fullcalendar';
+}
diff --git a/core/scss/tabler.scss b/core/scss/tabler.scss
index 2686b9694..db7d0a860 100644
--- a/core/scss/tabler.scss
+++ b/core/scss/tabler.scss
@@ -1 +1,3 @@
+@use 'layers';
+
 @import 'core';
diff --git a/core/scss/ui/_accordion.scss b/core/scss/ui/_accordion.scss
index d7acca5e7..a565d4729 100644
--- a/core/scss/ui/_accordion.scss
+++ b/core/scss/ui/_accordion.scss
@@ -1,3 +1,4 @@
+@layer components {
 .accordion {
   --#{$prefix}accordion-color: var(--#{$prefix}body-color);
   --#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
@@ -175,3 +176,4 @@
     margin-inline-start: 0;
   }
 }
+}
diff --git a/core/scss/ui/_alerts.scss b/core/scss/ui/_alerts.scss
index 293547d69..16bd7930f 100644
--- a/core/scss/ui/_alerts.scss
+++ b/core/scss/ui/_alerts.scss
@@ -1,3 +1,4 @@
+@layer components {
 .alert {
   --#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
   --#{$prefix}alert-color: var(--#{$prefix}alert-variant-color);
@@ -99,3 +100,4 @@
     --#{$prefix}alert-variant-color: var(--#{$prefix}#{$name});
   }
 }
+}
diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss
index 6193d1bb7..6c9c87d53 100644
--- a/core/scss/ui/_avatars.scss
+++ b/core/scss/ui/_avatars.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer components {
 .avatar {
   --#{$prefix}avatar-size: var(--#{$prefix}avatar-list-size, #{$avatar-size});
   --#{$prefix}avatar-status-size: #{$avatar-status-size};
@@ -162,3 +163,4 @@
   border-radius: var(--#{$prefix}border-radius);
   border: 1px solid var(--#{$prefix}border-color);
 }
+}
diff --git a/core/scss/ui/_badges.scss b/core/scss/ui/_badges.scss
index 6c613c736..283d8b49f 100644
--- a/core/scss/ui/_badges.scss
+++ b/core/scss/ui/_badges.scss
@@ -1,3 +1,4 @@
+@layer components {
 .badge {
   --#{$prefix}badge-padding-x: #{$badge-padding-x};
   --#{$prefix}badge-padding-y: #{$badge-padding-y};
@@ -111,3 +112,4 @@
 .badge-icononly {
   --#{$prefix}badge-padding-x: 0;
 }
+}
diff --git a/core/scss/ui/_breadcrumbs.scss b/core/scss/ui/_breadcrumbs.scss
index e267e7282..1c2b0d3f7 100644
--- a/core/scss/ui/_breadcrumbs.scss
+++ b/core/scss/ui/_breadcrumbs.scss
@@ -1,3 +1,4 @@
+@layer components {
 .breadcrumb {
   --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
   --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
@@ -79,3 +80,4 @@
     --#{$prefix}breadcrumb-divider: '#{quote($symbol)}';
   }
 }
+}
diff --git a/core/scss/ui/_button-group.scss b/core/scss/ui/_button-group.scss
index d712f0751..26bc1e913 100644
--- a/core/scss/ui/_button-group.scss
+++ b/core/scss/ui/_button-group.scss
@@ -1,3 +1,4 @@
+@layer components {
 .btn-group,
 .btn-group-vertical {
   box-shadow: $input-box-shadow;
@@ -14,3 +15,4 @@
     z-index: 1;
   }
 }
+}
diff --git a/core/scss/ui/_buttons.scss b/core/scss/ui/_buttons.scss
index f88101171..8ab4f017f 100644
--- a/core/scss/ui/_buttons.scss
+++ b/core/scss/ui/_buttons.scss
@@ -1,6 +1,7 @@
 @use 'sass:color';
 @use 'sass:map';
 
+@layer components {
 //
 // Button
 //
@@ -359,3 +360,4 @@
     }
   }
 }
+}
diff --git a/core/scss/ui/_calendars.scss b/core/scss/ui/_calendars.scss
index 53064832d..e072802aa 100644
--- a/core/scss/ui/_calendars.scss
+++ b/core/scss/ui/_calendars.scss
@@ -1,3 +1,4 @@
+@layer components {
 .calendar {
   display: block;
   font-size: $font-size-sm;
@@ -102,3 +103,4 @@
     inset-inline-end: 50%;
   }
 }
+}
diff --git a/core/scss/ui/_cards.scss b/core/scss/ui/_cards.scss
index d572c1ef2..798904d9c 100644
--- a/core/scss/ui/_cards.scss
+++ b/core/scss/ui/_cards.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer components {
 @property --tblr-card-gradient-direction {
   syntax: '<angle>';
   inherits: true;
@@ -735,3 +736,4 @@ Card gradient
 .card-gradient-start {
   --#{$prefix}card-gradient-direction: 90deg;
 }
+}
diff --git a/core/scss/ui/_carousel.scss b/core/scss/ui/_carousel.scss
index 372660ef4..532995a35 100644
--- a/core/scss/ui/_carousel.scss
+++ b/core/scss/ui/_carousel.scss
@@ -1,3 +1,4 @@
+@layer components {
 .carousel {
 }
 
@@ -65,3 +66,4 @@
   height: 90%;
   background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0));
 }
+}
diff --git a/core/scss/ui/_charts.scss b/core/scss/ui/_charts.scss
index fd6e757a1..0848d99f3 100644
--- a/core/scss/ui/_charts.scss
+++ b/core/scss/ui/_charts.scss
@@ -1,3 +1,4 @@
+@layer components {
 .chart {
   display: block;
   min-height: 10rem;
@@ -59,3 +60,4 @@ Chart sparkline
     font-size: 1rem;
   }
 }
+}
diff --git a/core/scss/ui/_chat.scss b/core/scss/ui/_chat.scss
index bbb93fd44..dd65962be 100644
--- a/core/scss/ui/_chat.scss
+++ b/core/scss/ui/_chat.scss
@@ -1,3 +1,4 @@
+@layer components {
 .chat {
 }
 
@@ -36,3 +37,4 @@
     margin-bottom: 0;
   }
 }
+}
diff --git a/core/scss/ui/_close.scss b/core/scss/ui/_close.scss
index 61d91a29e..51639e21f 100644
--- a/core/scss/ui/_close.scss
+++ b/core/scss/ui/_close.scss
@@ -1,3 +1,4 @@
+@layer components {
 .btn-close {
   --#{$prefix}btn-close-color: currentColor;
   --#{$prefix}btn-close-bg: #{escape-svg($btn-close-bg)};
@@ -63,3 +64,5 @@
 //     @include btn-close-white();
 //   }
 // }
+
+}
diff --git a/core/scss/ui/_datagrid.scss b/core/scss/ui/_datagrid.scss
index 094246bc0..d7501e4d3 100644
--- a/core/scss/ui/_datagrid.scss
+++ b/core/scss/ui/_datagrid.scss
@@ -2,6 +2,7 @@
 // Base styles
 //
 
+@layer components {
 .datagrid {
   --#{$prefix}datagrid-padding: #{$datagrid-padding};
   --#{$prefix}datagrid-item-width: #{$datagrid-item-width};
@@ -15,3 +16,5 @@
   @include subheader;
   margin-bottom: 0.25rem;
 }
+
+}
diff --git a/core/scss/ui/_dropdowns.scss b/core/scss/ui/_dropdowns.scss
index 0533945c1..9fc9b7284 100644
--- a/core/scss/ui/_dropdowns.scss
+++ b/core/scss/ui/_dropdowns.scss
@@ -1,3 +1,4 @@
+@layer components {
 .dropdown-menu {
   --#{$prefix}dropdown-item-gap: 0.5rem;
   --#{$prefix}dropdown-item-icon-size: #{$icon-size};
@@ -119,3 +120,5 @@
     box-shadow: none;
   }
 }
+
+}
diff --git a/core/scss/ui/_empty.scss b/core/scss/ui/_empty.scss
index 2fbea95b8..9a3f398cd 100644
--- a/core/scss/ui/_empty.scss
+++ b/core/scss/ui/_empty.scss
@@ -1,3 +1,4 @@
+@layer components {
 .empty {
   display: flex;
   flex-direction: column;
@@ -57,3 +58,5 @@
   border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
   border-radius: var(--#{$prefix}border-radius);
 }
+
+}
diff --git a/core/scss/ui/_flags.scss b/core/scss/ui/_flags.scss
index 6df080455..00fdc46b5 100644
--- a/core/scss/ui/_flags.scss
+++ b/core/scss/ui/_flags.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../config';
 
+@layer components {
 .flag {
   position: relative;
   display: inline-block;
@@ -32,3 +33,4 @@
     }
   }
 }
+}
diff --git a/core/scss/ui/_forms.scss b/core/scss/ui/_forms.scss
index 11d8e1cd9..4ebe9d4b3 100644
--- a/core/scss/ui/_forms.scss
+++ b/core/scss/ui/_forms.scss
@@ -1,3 +1,4 @@
+@layer forms {
 textarea {
   &[cols] {
     height: auto;
@@ -249,3 +250,4 @@ Forms on mobile devices
     font-size: 1rem;
   }
 }
+}
diff --git a/core/scss/ui/_grid.scss b/core/scss/ui/_grid.scss
index 77a164c6d..76db3cd70 100644
--- a/core/scss/ui/_grid.scss
+++ b/core/scss/ui/_grid.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer components {
 .row > * {
   min-width: 0;
 }
@@ -131,3 +132,4 @@
     flex-direction: column;
   }
 }
+}
diff --git a/core/scss/ui/_icons.scss b/core/scss/ui/_icons.scss
index 109688137..4b48d4fc2 100644
--- a/core/scss/ui/_icons.scss
+++ b/core/scss/ui/_icons.scss
@@ -1,6 +1,7 @@
 //
 // Icon component
 //
+@layer components {
 .icon {
   --#{$prefix}icon-size: #{$font-size-base * $line-height-base};
   width: var(--#{$prefix}icon-size);
@@ -70,3 +71,5 @@
   animation: rotate-360 3s linear infinite;
   animation-fill-mode: both;
 }
+
+}
diff --git a/core/scss/ui/_images.scss b/core/scss/ui/_images.scss
index 293021c5f..46441075f 100644
--- a/core/scss/ui/_images.scss
+++ b/core/scss/ui/_images.scss
@@ -1,5 +1,6 @@
 @use 'sass:math';
 
+@layer components {
 .img-responsive {
   --#{$prefix}img-responsive-ratio: #{math.percentage(0.75)};
   background: no-repeat center/cover;
@@ -19,3 +20,4 @@
 .img-bg {
   background: no-repeat center/cover;
 }
+}
diff --git a/core/scss/ui/_legend.scss b/core/scss/ui/_legend.scss
index 03a8e5023..23eecb8a9 100644
--- a/core/scss/ui/_legend.scss
+++ b/core/scss/ui/_legend.scss
@@ -1,6 +1,7 @@
 /**
 Legend
  */
+@layer components {
 .legend {
   --#{$prefix}legend-size: #{$legend-size};
   display: inline-block;
@@ -10,3 +11,5 @@ Legend
   border-radius: $legend-border-radius;
   border: 1px solid var(--#{$prefix}border-color-translucent);
 }
+
+}
diff --git a/core/scss/ui/_lists.scss b/core/scss/ui/_lists.scss
index 4f64faee3..4d8c118f0 100644
--- a/core/scss/ui/_lists.scss
+++ b/core/scss/ui/_lists.scss
@@ -1,3 +1,4 @@
+@layer components {
 .list-group {
   margin-inline-start: 0;
   margin-inline-end: 0;
@@ -120,3 +121,5 @@ Inline list
     margin-inline-end: $list-inline-padding;
   }
 }
+
+}
diff --git a/core/scss/ui/_loaders.scss b/core/scss/ui/_loaders.scss
index c085be40a..1eacaa970 100644
--- a/core/scss/ui/_loaders.scss
+++ b/core/scss/ui/_loaders.scss
@@ -1,3 +1,4 @@
+@layer components {
 .loader {
   position: relative;
   display: block;
@@ -69,3 +70,5 @@ Dimmer
     animation: animated-dots 1.2s steps(4, jump-none) infinite;
   }
 }
+
+}
diff --git a/core/scss/ui/_markdown.scss b/core/scss/ui/_markdown.scss
index 654b58e8b..ba489b157 100644
--- a/core/scss/ui/_markdown.scss
+++ b/core/scss/ui/_markdown.scss
@@ -1,6 +1,7 @@
 $markdown-font-size: var(--#{$prefix}font-size-h3) !default;
 $markdown-line-height: var(--#{$prefix}line-height-lg) !default;
 
+@layer components {
 /**
 Markdown
  */
@@ -64,3 +65,5 @@ Markdown
     max-height: 20rem;
   }
 }
+
+}
diff --git a/core/scss/ui/_modals.scss b/core/scss/ui/_modals.scss
index 6d50391d6..9c8b2cde2 100644
--- a/core/scss/ui/_modals.scss
+++ b/core/scss/ui/_modals.scss
@@ -1,3 +1,4 @@
+@layer components {
 .modal-content,
 .modal-header {
   > .btn-close {
@@ -72,3 +73,5 @@
     display: none !important;
   }
 }
+
+}
diff --git a/core/scss/ui/_nav.scss b/core/scss/ui/_nav.scss
index be7bd5a4c..616d60f08 100644
--- a/core/scss/ui/_nav.scss
+++ b/core/scss/ui/_nav.scss
@@ -1,3 +1,4 @@
+@layer components {
 .nav {
   --#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
 }
@@ -108,3 +109,5 @@
     }
   }
 }
+
+}
diff --git a/core/scss/ui/_offcanvas.scss b/core/scss/ui/_offcanvas.scss
index d40862050..e9f0e49d5 100644
--- a/core/scss/ui/_offcanvas.scss
+++ b/core/scss/ui/_offcanvas.scss
@@ -1,3 +1,4 @@
+@layer components {
 .offcanvas {
   @include media-print {
     display: none;
@@ -21,3 +22,5 @@
 .offcanvas-narrow {
   width: 20rem;
 }
+
+}
diff --git a/core/scss/ui/_pagination.scss b/core/scss/ui/_pagination.scss
index 48a8fede4..3b92fab2b 100644
--- a/core/scss/ui/_pagination.scss
+++ b/core/scss/ui/_pagination.scss
@@ -1,3 +1,4 @@
+@layer components {
 .pagination {
   margin: 0;
   --#{$prefix}pagination-gap: 0.25rem;
@@ -73,3 +74,5 @@
 .pagination-circle {
   --#{$prefix}pagination-border-radius: var(--tblr-border-radius-pill);
 }
+
+}
diff --git a/core/scss/ui/_payments.scss b/core/scss/ui/_payments.scss
index d1d7a6623..541ea2a16 100644
--- a/core/scss/ui/_payments.scss
+++ b/core/scss/ui/_payments.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../config';
 
+@layer components {
 .payment {
   height: config.$avatar-size;
   aspect-ratio: 1.66666;
@@ -27,3 +28,4 @@
     height: map.get($size, size);
   }
 }
+}
diff --git a/core/scss/ui/_placeholder.scss b/core/scss/ui/_placeholder.scss
index d83446bdf..6fcb96922 100644
--- a/core/scss/ui/_placeholder.scss
+++ b/core/scss/ui/_placeholder.scss
@@ -1,3 +1,4 @@
+@layer components {
 .placeholder {
   &:not(.btn):not([class*='bg-']) {
     background-color: currentColor !important;
@@ -7,3 +8,5 @@
     border-radius: var(--#{$prefix}border-radius);
   }
 }
+
+}
diff --git a/core/scss/ui/_popovers.scss b/core/scss/ui/_popovers.scss
index 85fccb2c5..2973e1b3a 100644
--- a/core/scss/ui/_popovers.scss
+++ b/core/scss/ui/_popovers.scss
@@ -1,5 +1,8 @@
+@layer components {
 .popover {
   @include media-print {
     display: none;
   }
 }
+
+}
diff --git a/core/scss/ui/_progress.scss b/core/scss/ui/_progress.scss
index b1399479e..8f62913c1 100644
--- a/core/scss/ui/_progress.scss
+++ b/core/scss/ui/_progress.scss
@@ -1,3 +1,4 @@
+@layer components {
 @keyframes progress-indeterminate {
   0% {
     inset-inline-end: 100%;
@@ -38,6 +39,8 @@ Progress
   }
 }
 
+}
+
 .progress-sm {
   height: 0.25rem;
 }
diff --git a/core/scss/ui/_ribbons.scss b/core/scss/ui/_ribbons.scss
index b26798b6d..7086f9535 100644
--- a/core/scss/ui/_ribbons.scss
+++ b/core/scss/ui/_ribbons.scss
@@ -1,5 +1,6 @@
 // stylelint-disable declaration-no-important
 
+@layer components {
 .ribbon {
   --#{$prefix}ribbon-margin: #{$card-ribbon-margin};
   --#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
@@ -154,3 +155,5 @@
     }
   }
 }
+
+}
diff --git a/core/scss/ui/_segmented.scss b/core/scss/ui/_segmented.scss
index 79fd4e5d4..9a007e748 100644
--- a/core/scss/ui/_segmented.scss
+++ b/core/scss/ui/_segmented.scss
@@ -1,3 +1,4 @@
+@layer components {
 .nav-segmented {
   --#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
   --#{$prefix}nav-padding: 2px;
@@ -75,6 +76,8 @@
   }
 }
 
+}
+
 .nav-segmented-vertical {
   flex-direction: column;
 
diff --git a/core/scss/ui/_signature.scss b/core/scss/ui/_signature.scss
index 68d7d31b1..a4808f652 100644
--- a/core/scss/ui/_signature.scss
+++ b/core/scss/ui/_signature.scss
@@ -1,3 +1,4 @@
+@layer components {
 .signature {
   --#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
   --#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
@@ -13,3 +14,5 @@
   cursor: crosshair;
   width: 100%;
 }
+
+}
diff --git a/core/scss/ui/_social.scss b/core/scss/ui/_social.scss
index 49706565b..4bb75e62d 100644
--- a/core/scss/ui/_social.scss
+++ b/core/scss/ui/_social.scss
@@ -1,6 +1,7 @@
 @use 'sass:map';
 @use '../config';
 
+@layer components {
 .social {
   position: relative;
   display: inline-block;
@@ -25,3 +26,4 @@
     height: map.get($size, size);
   }
 }
+}
diff --git a/core/scss/ui/_stars.scss b/core/scss/ui/_stars.scss
index 7f4831c82..e1b67d822 100644
--- a/core/scss/ui/_stars.scss
+++ b/core/scss/ui/_stars.scss
@@ -1,3 +1,4 @@
+@layer components {
 .stars {
   display: inline-flex;
   color: $gray-400;
@@ -7,3 +8,5 @@
     margin-inline-start: 0.25rem;
   }
 }
+
+}
diff --git a/core/scss/ui/_status.scss b/core/scss/ui/_status.scss
index 0ce0557c0..cb3f00423 100644
--- a/core/scss/ui/_status.scss
+++ b/core/scss/ui/_status.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer components {
 @keyframes status-pulsate-main {
   40% {
     transform: scale(1.25, 1.25);
@@ -163,3 +164,4 @@
     }
   }
 }
+}
diff --git a/core/scss/ui/_steps.scss b/core/scss/ui/_steps.scss
index 954a3883e..882952ee1 100644
--- a/core/scss/ui/_steps.scss
+++ b/core/scss/ui/_steps.scss
@@ -1,6 +1,7 @@
 //
 // Steps
 //
+@layer components {
 .steps {
   --#{$prefix}steps-color: #{$steps-color};
   --#{$prefix}steps-inactive-color: #{$steps-inactive-color};
@@ -98,6 +99,8 @@
   }
 }
 
+}
+
 //
 // Steps counter
 //
diff --git a/core/scss/ui/_switch-icon.scss b/core/scss/ui/_switch-icon.scss
index 6a42e252f..03465a47e 100644
--- a/core/scss/ui/_switch-icon.scss
+++ b/core/scss/ui/_switch-icon.scss
@@ -1,3 +1,4 @@
+@layer components {
 .switch-icon {
   display: inline-block;
   line-height: 1;
@@ -62,6 +63,8 @@
   }
 }
 
+}
+
 // Scale variant
 .switch-icon-scale {
   .switch-icon-a,
diff --git a/core/scss/ui/_tables.scss b/core/scss/ui/_tables.scss
index 7a4d2da18..c262ae4ab 100644
--- a/core/scss/ui/_tables.scss
+++ b/core/scss/ui/_tables.scss
@@ -1,3 +1,4 @@
+@layer components {
 .table {
   font: inherit;
 
@@ -42,6 +43,8 @@
   }
 }
 
+}
+
 .table-center {
   > :not(caption) > * > * {
     text-align: center;
diff --git a/core/scss/ui/_tags.scss b/core/scss/ui/_tags.scss
index dc0ab7c8f..530933192 100644
--- a/core/scss/ui/_tags.scss
+++ b/core/scss/ui/_tags.scss
@@ -1,3 +1,4 @@
+@layer components {
 .tag {
   --#{$prefix}tag-height: 1.5rem;
   border: $border-width solid var(--#{$prefix}border-color);
@@ -35,6 +36,8 @@
   margin-inline-start: -0.25rem;
 }
 
+}
+
 .tag-icon {
   color: var(--#{$prefix}secondary);
   margin-inline-end: -0.125rem;
diff --git a/core/scss/ui/_timeline.scss b/core/scss/ui/_timeline.scss
index 72c7c8c95..909b9e5e8 100644
--- a/core/scss/ui/_timeline.scss
+++ b/core/scss/ui/_timeline.scss
@@ -1,6 +1,7 @@
 //
 // Timeline
 //
+@layer components {
 .timeline {
   --#{$prefix}timeline-icon-size: #{$avatar-size};
   position: relative;
@@ -30,6 +31,8 @@
   }
 }
 
+}
+
 .timeline-event-icon {
   position: absolute;
   display: flex;
diff --git a/core/scss/ui/_toasts.scss b/core/scss/ui/_toasts.scss
index 6813d002c..406186153 100644
--- a/core/scss/ui/_toasts.scss
+++ b/core/scss/ui/_toasts.scss
@@ -1,3 +1,4 @@
+@layer components {
 .toast {
   border: $alert-border-width var(--#{$prefix}border-style) $alert-border-color;
   box-shadow: $alert-shadow;
@@ -20,3 +21,5 @@
     --#{$prefix}toast-color: #{$value};
   }
 }
+
+}
diff --git a/core/scss/ui/_toolbar.scss b/core/scss/ui/_toolbar.scss
index ba332b057..4ff0fe2f3 100644
--- a/core/scss/ui/_toolbar.scss
+++ b/core/scss/ui/_toolbar.scss
@@ -1,3 +1,4 @@
+@layer components {
 .toolbar {
   display: flex;
   flex-wrap: nowrap;
@@ -12,3 +13,5 @@
     display: none;
   }
 }
+
+}
diff --git a/core/scss/ui/_tracking.scss b/core/scss/ui/_tracking.scss
index 3da3a58e9..11c208baf 100644
--- a/core/scss/ui/_tracking.scss
+++ b/core/scss/ui/_tracking.scss
@@ -1,3 +1,4 @@
+@layer components {
 .tracking {
   --#{$prefix}tracking-height: #{$tracking-height};
   --#{$prefix}tracking-gap-width: #{$tracking-gap-width};
@@ -27,3 +28,5 @@
   min-width: 0.25rem;
   background: var(--#{$prefix}border-color);
 }
+
+}
diff --git a/core/scss/ui/_type.scss b/core/scss/ui/_type.scss
index 0753dbfb6..438005bfd 100644
--- a/core/scss/ui/_type.scss
+++ b/core/scss/ui/_type.scss
@@ -1,3 +1,4 @@
+@layer components {
 @import 'typo/hr';
 
 .lead {
@@ -81,6 +82,8 @@ b {
   font-weight: $headings-font-weight;
 }
 
+}
+
 blockquote {
   padding: 1rem 1rem 1rem;
   border-inline-start: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color);
diff --git a/core/scss/ui/forms/_form-check.scss b/core/scss/ui/forms/_form-check.scss
index 2379ca1db..23402698f 100644
--- a/core/scss/ui/forms/_form-check.scss
+++ b/core/scss/ui/forms/_form-check.scss
@@ -1,3 +1,4 @@
+@layer forms {
 /*
 Form check
  */
@@ -83,3 +84,4 @@ Form switch
     padding-top: 0.125rem;
   }
 }
+}
diff --git a/core/scss/ui/forms/_form-colorinput.scss b/core/scss/ui/forms/_form-colorinput.scss
index 229085fee..70e251383 100644
--- a/core/scss/ui/forms/_form-colorinput.scss
+++ b/core/scss/ui/forms/_form-colorinput.scss
@@ -1,3 +1,4 @@
+@layer forms {
 /*
 Color Input
  */
@@ -52,3 +53,4 @@ Color Input
     }
   }
 }
+}
diff --git a/core/scss/ui/forms/_form-custom.scss b/core/scss/ui/forms/_form-custom.scss
index e32e9b670..26b98f60e 100644
--- a/core/scss/ui/forms/_form-custom.scss
+++ b/core/scss/ui/forms/_form-custom.scss
@@ -1,3 +1,4 @@
+@layer forms {
 /**
 Bootstrap color input
  */
@@ -26,3 +27,4 @@ Form control dark theme fix
     background-color: var(--#{$prefix}btn-color, #{$form-file-button-hover-bg});
   }
 }
+}
diff --git a/core/scss/ui/forms/_form-icon.scss b/core/scss/ui/forms/_form-icon.scss
index 0a5b87e86..651dd836c 100644
--- a/core/scss/ui/forms/_form-icon.scss
+++ b/core/scss/ui/forms/_form-icon.scss
@@ -1,3 +1,4 @@
+@layer forms {
 /**
 Icon input
  */
@@ -35,3 +36,4 @@ Icon input
     inset-inline-start: auto;
   }
 }
+}
diff --git a/core/scss/ui/forms/_form-imagecheck.scss b/core/scss/ui/forms/_form-imagecheck.scss
index 4d4a4085a..449667b96 100644
--- a/core/scss/ui/forms/_form-imagecheck.scss
+++ b/core/scss/ui/forms/_form-imagecheck.scss
@@ -1,3 +1,4 @@
+@layer forms {
 /**
 Image check
  */
@@ -103,3 +104,4 @@ Image check
     color: var(--#{$prefix}body-color);
   }
 }
+}
diff --git a/core/scss/ui/forms/_form-selectgroup.scss b/core/scss/ui/forms/_form-selectgroup.scss
index 2f9524f19..587e88ed0 100644
--- a/core/scss/ui/forms/_form-selectgroup.scss
+++ b/core/scss/ui/forms/_form-selectgroup.scss
@@ -1,3 +1,4 @@
+@layer forms {
 /*
 Select group
  */
@@ -152,3 +153,4 @@ Select group
     border-radius: 50px;
   }
 }
+}
diff --git a/core/scss/ui/forms/_validation.scss b/core/scss/ui/forms/_validation.scss
index 4996bd2db..5410068c5 100644
--- a/core/scss/ui/forms/_validation.scss
+++ b/core/scss/ui/forms/_validation.scss
@@ -1,3 +1,4 @@
+@layer forms {
 %validation-lite {
   border-color: var(--#{$prefix}border-color) !important;
 }
@@ -11,3 +12,4 @@
     @extend %validation-lite;
   }
 }
+}
diff --git a/core/scss/ui/typo/_hr.scss b/core/scss/ui/typo/_hr.scss
index a78b823c8..376a64568 100644
--- a/core/scss/ui/typo/_hr.scss
+++ b/core/scss/ui/typo/_hr.scss
@@ -1,3 +1,4 @@
+@layer components {
 /**
 Horizontal rules
  */
@@ -74,3 +75,4 @@ Hr text
 .hr-text-spaceless {
   margin: -0.5rem 0;
 }
+}
diff --git a/core/scss/utils/_background.scss b/core/scss/utils/_background.scss
index 3bc761d28..973a7e74f 100644
--- a/core/scss/utils/_background.scss
+++ b/core/scss/utils/_background.scss
@@ -1,3 +1,4 @@
+@layer utilities {
 .bg-white-overlay {
   color: $white;
   background-color: rgba($light, 0.24);
@@ -13,3 +14,4 @@
   background-size: cover;
   background-position: center;
 }
+}
diff --git a/core/scss/utils/_colors.scss b/core/scss/utils/_colors.scss
index 126297c92..78b135306 100644
--- a/core/scss/utils/_colors.scss
+++ b/core/scss/utils/_colors.scss
@@ -1,5 +1,6 @@
 @use 'sass:map';
 
+@layer utilities {
 // All colors
 @each $color,
   $value
@@ -108,3 +109,4 @@
 .bg-surface-backdrop {
   background-color: color-transparent($modal-backdrop-bg, $modal-backdrop-opacity) !important;
 }
+}
diff --git a/core/scss/utils/_hover.scss b/core/scss/utils/_hover.scss
index a4c00c8d4..ff43d3798 100644
--- a/core/scss/utils/_hover.scss
+++ b/core/scss/utils/_hover.scss
@@ -1,3 +1,4 @@
+@layer utilities {
 %hover-animation {
   transition: transform 0.3s ease;
 
@@ -45,3 +46,4 @@
     transform: rotate(-4deg);
   }
 }
+}
diff --git a/core/scss/utils/_opacity.scss b/core/scss/utils/_opacity.scss
index ee570ce04..e1edd516f 100644
--- a/core/scss/utils/_opacity.scss
+++ b/core/scss/utils/_opacity.scss
@@ -1,3 +1,4 @@
+@layer utilities {
 // stylelint-disable declaration-no-important
 
 @for $i from 0 through 20 {
@@ -5,3 +6,4 @@
     opacity: calc(#{$i * 5} / 100) !important;
   }
 }
+}
diff --git a/core/scss/utils/_scroll.scss b/core/scss/utils/_scroll.scss
index f0ab2ac93..5680840c9 100644
--- a/core/scss/utils/_scroll.scss
+++ b/core/scss/utils/_scroll.scss
@@ -1,3 +1,4 @@
+@layer utilities {
 /*
 Scrollable
 */
@@ -43,3 +44,4 @@ Scrollable
 .no-scroll {
   overflow: hidden;
 }
+}
diff --git a/core/scss/utils/_shadow.scss b/core/scss/utils/_shadow.scss
index 17cc2a732..c91e14e68 100644
--- a/core/scss/utils/_shadow.scss
+++ b/core/scss/utils/_shadow.scss
@@ -1,3 +1,4 @@
+@layer utilities {
 // stylelint-disable declaration-no-important
 
 .hover-shadow-sm:hover {
@@ -15,3 +16,4 @@
 .hover-shadow-none:hover {
   box-shadow: none !important;
 }
+}
diff --git a/core/scss/utils/_sizing.scss b/core/scss/utils/_sizing.scss
index 11bbe6848..7d3970964 100644
--- a/core/scss/utils/_sizing.scss
+++ b/core/scss/utils/_sizing.scss
@@ -1,3 +1,4 @@
+@layer utilities {
 // stylelint-disable declaration-no-important
 
 @each $size-name, $size in map_merge($spacers, $size-spacers) {
@@ -8,3 +9,4 @@
     height: $size !important;
   }
 }
+}
diff --git a/core/scss/utils/_text.scss b/core/scss/utils/_text.scss
index 9a754da3d..af779907d 100644
--- a/core/scss/utils/_text.scss
+++ b/core/scss/utils/_text.scss
@@ -1,3 +1,4 @@
+@layer utilities {
 // stylelint-disable declaration-no-important
 
 /**
@@ -12,3 +13,4 @@ Antialiasing
   -webkit-font-smoothing: auto;
   -moz-osx-font-smoothing: auto;
 }
+}