diff --git a/registry/nextjs/components/badge/badge.css b/registry/nextjs/components/badge/badge.css
index c415a101..ec4132a9 100644
--- a/registry/nextjs/components/badge/badge.css
+++ b/registry/nextjs/components/badge/badge.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="badge"] {
   display: inline-flex;
   padding: var(--lk-size-xs);
@@ -147,3 +148,4 @@
   z-index: 0;
   opacity: 0.1;
 }
+}
diff --git a/registry/nextjs/components/button/button.css b/registry/nextjs/components/button/button.css
index 56af399c..8a2d3af3 100644
--- a/registry/nextjs/components/button/button.css
+++ b/registry/nextjs/components/button/button.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="button"] {
   /* DEFAULTS */
   --button-font-size: var(--body-font-size);
@@ -81,3 +82,4 @@
   background: transparent !important;
   border: 1px solid var(--lk-outlinevariant);
 }
+}
diff --git a/registry/nextjs/components/card/card.css b/registry/nextjs/components/card/card.css
index bd99b974..1de806fa 100644
--- a/registry/nextjs/components/card/card.css
+++ b/registry/nextjs/components/card/card.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="card"] {
   display: block;
   overflow: hidden;
@@ -189,3 +190,4 @@
 }
 
 /* TODO: Consider adding a 'tint' prop which would let you combine frosted glass effects with a slight color */
+}
diff --git a/registry/nextjs/components/column/column.css b/registry/nextjs/components/column/column.css
index 133da6f9..1ab3d3a3 100644
--- a/registry/nextjs/components/column/column.css
+++ b/registry/nextjs/components/column/column.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="column"] {
   display: flex;
   flex-direction: column;
@@ -84,4 +85,5 @@
 
 [data-lk-column-gap="4xl"] {
   gap: var(--lk-size-4xl);
-}
\ No newline at end of file
+}
+}
diff --git a/registry/nextjs/components/container/container.css b/registry/nextjs/components/container/container.css
index 17818711..5d01b6e3 100644
--- a/registry/nextjs/components/container/container.css
+++ b/registry/nextjs/components/container/container.css
@@ -1,6 +1,8 @@
+@layer lk {
 [lk-component="container"] {
   margin-left: auto;
   margin-right: auto;
   width: 100%;
   max-width: var(--lk-container-max-width, 100%);
 }
+}
diff --git a/registry/nextjs/components/dropdown/dropdown.css b/registry/nextjs/components/dropdown/dropdown.css
index 7594032b..f0ae099b 100644
--- a/registry/nextjs/components/dropdown/dropdown.css
+++ b/registry/nextjs/components/dropdown/dropdown.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="dropdown-menu"] {
   position: absolute;
   z-index: 1000;
@@ -33,3 +34,4 @@
 
   }
 }
+}
diff --git a/registry/nextjs/components/grid/grid.css b/registry/nextjs/components/grid/grid.css
index e11c0550..5f192437 100644
--- a/registry/nextjs/components/grid/grid.css
+++ b/registry/nextjs/components/grid/grid.css
@@ -1,3 +1,4 @@
+@layer lk {
 /* ============================================= */
 /* Component: Grid                               */
 /* Description: Basic responsive grid container  */
@@ -256,3 +257,4 @@
   grid-template-columns: 0.5fr 1fr 0.5fr 2fr 0.5fr;
 
 }
+}
diff --git a/registry/nextjs/components/heading/heading.css b/registry/nextjs/components/heading/heading.css
index 72052ab6..d93ed976 100644
--- a/registry/nextjs/components/heading/heading.css
+++ b/registry/nextjs/components/heading/heading.css
@@ -1,4 +1,6 @@
+@layer lk {
 [data-lk-component="heading"] {
   display: block;
   margin: 0;
 }
+}
diff --git a/registry/nextjs/components/icon-button/icon-button.css b/registry/nextjs/components/icon-button/icon-button.css
index 01e861bf..2849048a 100644
--- a/registry/nextjs/components/icon-button/icon-button.css
+++ b/registry/nextjs/components/icon-button/icon-button.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="icon-button"] {
   display: inline-flex;
   align-items: center;
@@ -185,3 +186,4 @@
 [data-lk-icon-button-variant="text"] {
   background-color: transparent;
 }
+}
diff --git a/registry/nextjs/components/icon/icon.css b/registry/nextjs/components/icon/icon.css
index 301923f9..1859dcd9 100644
--- a/registry/nextjs/components/icon/icon.css
+++ b/registry/nextjs/components/icon/icon.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="icon"] {
   width: calc(1em * var(--lk-halfstep));
   aspect-ratio: 1;
@@ -236,3 +237,4 @@
 [data-lk-icon-offset="true"] {
   margin-top: calc(-1 * calc(1em * var(--lk-quarterstep-dec)));
 }
+}
diff --git a/registry/nextjs/components/image/image.css b/registry/nextjs/components/image/image.css
index f7950946..63fb008c 100644
--- a/registry/nextjs/components/image/image.css
+++ b/registry/nextjs/components/image/image.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="image"] {
   display: block;
   width: 100%;
@@ -349,3 +350,4 @@ Include inherit, initial, unset?
 [data-lk-image-aspect="4/5"] {
   aspect-ratio: 4 / 5;
 }
+}
diff --git a/registry/nextjs/components/menu-item/menu-item.css b/registry/nextjs/components/menu-item/menu-item.css
index 961dc2f6..2381be83 100644
--- a/registry/nextjs/components/menu-item/menu-item.css
+++ b/registry/nextjs/components/menu-item/menu-item.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="menu-item"] {
   --py: calc(var(--lk-size-lg) * var(--lk-halfstep-dec));
   --gap: calc(var(--py) / var(--lk-eighthstep));
@@ -51,4 +52,4 @@
 
 [data-lk-component="dropdown-menu"] [data-lk-component="menu-item"] {
   font-size: inherit !important;
-}
\ No newline at end of file
+}}
diff --git a/registry/nextjs/components/navbar/navbar.css b/registry/nextjs/components/navbar/navbar.css
index 3a1749d6..0b2eba7e 100644
--- a/registry/nextjs/components/navbar/navbar.css
+++ b/registry/nextjs/components/navbar/navbar.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="navbar"] {
   position: sticky;
   top: 0;
@@ -71,3 +72,4 @@
 [data-lk-navbar-material="glass"] {
   border-bottom: 1px solid var(--lk-outlinevariant);
 }
+}
diff --git a/registry/nextjs/components/placeholder-block/placeholder-block.css b/registry/nextjs/components/placeholder-block/placeholder-block.css
index 9af7de4b..7385874b 100644
--- a/registry/nextjs/components/placeholder-block/placeholder-block.css
+++ b/registry/nextjs/components/placeholder-block/placeholder-block.css
@@ -1,6 +1,8 @@
+@layer lk {
 [data-lk-component="placeholder-block"] {
   display: block;
   border: 1px dashed var(--lk-info);
   background-color: var(--lk-infocontainer);
   padding: var(--lk-size-md);
 }
+}
diff --git a/registry/nextjs/components/row/row.css b/registry/nextjs/components/row/row.css
index 6d42ffc7..1303e37e 100644
--- a/registry/nextjs/components/row/row.css
+++ b/registry/nextjs/components/row/row.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="row"] {
   display: flex;
   flex-direction: row;
@@ -115,3 +116,4 @@
 [data-lk-row-default-child-behavior="ignoreIntrinsicSize"]>* {
   flex-basis: 0;
 }
+}
diff --git a/registry/nextjs/components/section/section.css b/registry/nextjs/components/section/section.css
index d1d6386a..17414ead 100644
--- a/registry/nextjs/components/section/section.css
+++ b/registry/nextjs/components/section/section.css
@@ -1,5 +1,5 @@
 /* Component selector: [data-lk-component="section"] */
-
+@layer lk {
 [data-lk-component="section"] {
   display: block;
   position: relative;
@@ -203,3 +203,4 @@
     padding-right: var(--lk-size-md);
   }
 }
+}
diff --git a/registry/nextjs/components/select/select.css b/registry/nextjs/components/select/select.css
index 3e2e3b05..d0535104 100644
--- a/registry/nextjs/components/select/select.css
+++ b/registry/nextjs/components/select/select.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="select-menu"] {
   position: absolute;
   z-index: 1000;
@@ -87,4 +88,4 @@
 
 [data-lk-component="dropdown-menu"] [data-lk-component="menu-item"] {
   font-size: inherit !important;
-}
\ No newline at end of file
+}}
diff --git a/registry/nextjs/components/snackbar/snackbar.css b/registry/nextjs/components/snackbar/snackbar.css
index 63181357..4c6a6476 100644
--- a/registry/nextjs/components/snackbar/snackbar.css
+++ b/registry/nextjs/components/snackbar/snackbar.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="snackbar"] {
   display: inline-flex;
   align-items: center;
@@ -31,3 +32,4 @@
   }
 
 }
+}
diff --git a/registry/nextjs/components/state-layer/state-layer.css b/registry/nextjs/components/state-layer/state-layer.css
index edf00d46..059b56e5 100644
--- a/registry/nextjs/components/state-layer/state-layer.css
+++ b/registry/nextjs/components/state-layer/state-layer.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="state-layer"] {
   z-index: 1;
   opacity: 0;
@@ -44,3 +45,4 @@ li:focus > [data-lk-component="state-layer"] {
 [data-lk-forced-state="active"] {
   opacity: 0.12 !important;
 }
+}
diff --git a/registry/nextjs/components/sticker/sticker.css b/registry/nextjs/components/sticker/sticker.css
index 2bb4ab98..a915f15c 100644
--- a/registry/nextjs/components/sticker/sticker.css
+++ b/registry/nextjs/components/sticker/sticker.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="sticker"] {
   display: inline-block;
   padding: var(--lk-size-xs) var(--lk-size-sm);
@@ -7,3 +8,4 @@
   line-height: var(--label-line-height);
   font-size: var(--label-font-size);
 }
+}
diff --git a/registry/nextjs/components/switch/switch.css b/registry/nextjs/components/switch/switch.css
index 51a55813..e5fabd4e 100644
--- a/registry/nextjs/components/switch/switch.css
+++ b/registry/nextjs/components/switch/switch.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="switch"] {
   position: relative;
   display: block;
@@ -29,3 +30,4 @@
 [data-lk-switch-state="on"] [data-lk-component="switch-thumb"] {
   left: calc(100% - calc(var(--lk-size-md) + var(--lk-size-2xs)));
 }
+}
diff --git a/registry/nextjs/components/tab-link/tab-link.css b/registry/nextjs/components/tab-link/tab-link.css
index 1972ab72..c5ead6cc 100644
--- a/registry/nextjs/components/tab-link/tab-link.css
+++ b/registry/nextjs/components/tab-link/tab-link.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="tab-link"] {
   display: inline-flex;
   position: relative;
@@ -18,3 +19,4 @@
 [data-lk-tab-link-selected="true"]>.lk-indicator {
   opacity: 1;
 }
+}
diff --git a/registry/nextjs/components/tab-menu/tab-menu.css b/registry/nextjs/components/tab-menu/tab-menu.css
index 620ea6e4..88bbf9cc 100644
--- a/registry/nextjs/components/tab-menu/tab-menu.css
+++ b/registry/nextjs/components/tab-menu/tab-menu.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="tab-menu"] {
   display: flex;
   flex-direction: row;
@@ -10,3 +11,4 @@
   border-bottom: 1px solid var(--lk-outlinevariant);
   flex: 0 0 auto;
 }
+}
diff --git a/registry/nextjs/components/tabs/tabs.css b/registry/nextjs/components/tabs/tabs.css
index 3837d45c..30790695 100644
--- a/registry/nextjs/components/tabs/tabs.css
+++ b/registry/nextjs/components/tabs/tabs.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="tabs"] {
   display: flex;
   flex-direction: column;
@@ -22,3 +23,4 @@
   scrollbar-width: thin;
 }
 
+}
diff --git a/registry/nextjs/components/text-input/text-input.css b/registry/nextjs/components/text-input/text-input.css
index f02e54da..91d1efdc 100644
--- a/registry/nextjs/components/text-input/text-input.css
+++ b/registry/nextjs/components/text-input/text-input.css
@@ -1,3 +1,4 @@
+@layer lk {
 [data-lk-component="text-input"] {
   display: flex;
   flex-flow: column nowrap;
@@ -101,3 +102,4 @@ div[data-lk-text-input-label-position="on-input"] > [data-lk-text-input-el="inpu
   margin-bottom: var(--lk-size-xs);
   color: var(--lk-outline);
 }
+}
diff --git a/registry/nextjs/components/theme-controller/theme-controller.css b/registry/nextjs/components/theme-controller/theme-controller.css
index e69de29b..8c452bcd 100644
--- a/registry/nextjs/components/theme-controller/theme-controller.css
+++ b/registry/nextjs/components/theme-controller/theme-controller.css
@@ -0,0 +1,2 @@
+@layer lk {
+}
diff --git a/registry/nextjs/components/theme/theme.css b/registry/nextjs/components/theme/theme.css
index e69de29b..8c452bcd 100644
--- a/registry/nextjs/components/theme/theme.css
+++ b/registry/nextjs/components/theme/theme.css
@@ -0,0 +1,2 @@
+@layer lk {
+}
diff --git a/registry/universal/lib/css/index.css b/registry/universal/lib/css/index.css
index 477708ff..8820f245 100644
--- a/registry/universal/lib/css/index.css
+++ b/registry/universal/lib/css/index.css
@@ -1,35 +1,35 @@
-@import "./liftkit-core.css";
-@import "./align-items.css";
-@import "./align-self.css";
-@import "./aspect-ratios.css";
-@import "./border-radius.css";
-@import "./column-span.css";
-@import "./display.css";
-@import "./text-color.css";
-@import "./flexboxes.css";
-@import "./gaps.css";
-@import "./justify-content.css";
-@import "./margins.css";
-@import "./opacity.css";
-@import "./overflow.css";
-@import "./padding.css";
-@import "./position.css";
-@import "./scale.css";
-@import "./shadows.css";
-@import "./text-alignment.css";
-@import "./typography.css";
-@import "./width.css";
-@import "./height.css";
-@import "./text-columns.css";
-@import "./borders.css";
-@import "./pointer-events.css";
-@import "./scrim.css";
-@import "./z-index.css";
-@import "./cursor.css";
-@import "./breaks.css";
-@import "./background-colors.css";
-@import "./whitespace.css";
-@import "./border-color.css";
-@import "./border-style.css";
-@import "./border-width.css";
-@import "@csstools/normalize.css";
+@import "./liftkit-core.css" layer(lk);
+@import "./align-items.css" layer(lk);
+@import "./align-self.css" layer(lk);
+@import "./aspect-ratios.css" layer(lk);
+@import "./border-radius.css" layer(lk);
+@import "./column-span.css" layer(lk);
+@import "./display.css" layer(lk);
+@import "./text-color.css" layer(lk);
+@import "./flexboxes.css" layer(lk);
+@import "./gaps.css" layer(lk);
+@import "./justify-content.css" layer(lk);
+@import "./margins.css" layer(lk);
+@import "./opacity.css" layer(lk);
+@import "./overflow.css" layer(lk);
+@import "./padding.css" layer(lk);
+@import "./position.css" layer(lk);
+@import "./scale.css" layer(lk);
+@import "./shadows.css" layer(lk);
+@import "./text-alignment.css" layer(lk);
+@import "./typography.css" layer(lk);
+@import "./width.css" layer(lk);
+@import "./height.css" layer(lk);
+@import "./text-columns.css" layer(lk);
+@import "./borders.css" layer(lk);
+@import "./pointer-events.css" layer(lk);
+@import "./scrim.css" layer(lk);
+@import "./z-index.css" layer(lk);
+@import "./cursor.css" layer(lk);
+@import "./breaks.css" layer(lk);
+@import "./background-colors.css" layer(lk);
+@import "./whitespace.css" layer(lk);
+@import "./border-color.css" layer(lk);
+@import "./border-style.css" layer(lk);
+@import "./border-width.css" layer(lk);
+@import "@csstools/normalize.css" layer(lk);
diff --git a/registry/universal/lib/css/liftkitvars.css b/registry/universal/lib/css/liftkitvars.css
index 0e0a07f9..e631301d 100644
--- a/registry/universal/lib/css/liftkitvars.css
+++ b/registry/universal/lib/css/liftkitvars.css
@@ -1,4 +1,6 @@
+@layer lk {
 :root {
+
   font-size: 16px;
 
   --lk-scalefactor: 1.618;
@@ -376,3 +378,4 @@
     --lk-primary: var(--dark__primary_lkv);
   }
 }
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 651594bc..ba779dc9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1 +1,2 @@
-@import "../../registry/universal/lib/css/index.css"
\ No newline at end of file
+@layer lk;
+@import "../../registry/universal/lib/css/index.css";