diff --git a/.changeset/olive-rules-press.md b/.changeset/olive-rules-press.md
new file mode 100644
index 0000000000..fd0d3a6078
--- /dev/null
+++ b/.changeset/olive-rules-press.md
@@ -0,0 +1,5 @@
+---
+'@backstage/ui': minor
+---
+
+**BREAKING** Restructure Backstage UI component styling to use CSS Modules instead of pure CSS. We don't expect this to be an issue in practice but it is important to call out that all styles are now loaded through CSS modules with generated class names. We are still providing fixed class names for all components to allow anyone to style their Backstage instance.
diff --git a/packages/ui/css/styles.css b/packages/ui/css/styles.css
index 24c1573adc..43c15d811c 100644
--- a/packages/ui/css/styles.css
+++ b/packages/ui/css/styles.css
@@ -241,1611 +241,7 @@
   }
 }
 
-@layer components {
-  .bui-AvatarRoot {
-    vertical-align: middle;
-    user-select: none;
-    color: var(--bui-fg-primary);
-    background-color: var(--bui-bg-surface-2);
-    border-radius: 100%;
-    justify-content: center;
-    align-items: center;
-    width: 2rem;
-    height: 2rem;
-    font-size: 1rem;
-    font-weight: 500;
-    line-height: 1;
-    display: inline-flex;
-    overflow: hidden;
-  }
-
-  .bui-AvatarRoot[data-size="small"] {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-
-  .bui-AvatarRoot[data-size="medium"] {
-    width: 2rem;
-    height: 2rem;
-  }
-
-  .bui-AvatarRoot[data-size="large"] {
-    width: 3rem;
-    height: 3rem;
-  }
-
-  .bui-AvatarImage {
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-  }
-
-  .bui-AvatarFallback {
-    width: 100%;
-    height: 100%;
-    font-size: var(--bui-font-size-3);
-    font-weight: var(--bui-font-weight-regular);
-    box-shadow: inset 0 0 0 1px var(--bui-border);
-    border-radius: var(--bui-radius-full);
-    justify-content: center;
-    align-items: center;
-    display: flex;
-  }
-
-  .bui-Box {
-    font-family: var(--bui-font-regular);
-    font-weight: var(--bui-font-weight-regular);
-    color: var(--bui-fg-primary);
-  }
-
-  .bui-Button {
-    user-select: none;
-    font-family: var(--bui-font-regular);
-    font-weight: var(--bui-font-weight-bold);
-    cursor: pointer;
-    border-radius: var(--bui-radius-2);
-    justify-content: center;
-    align-items: center;
-    gap: var(--bui-space-1_5);
-    border: none;
-    flex-shrink: 0;
-    padding: 0;
-    display: inline-flex;
-
-    &[data-disabled="true"] {
-      cursor: not-allowed;
-    }
-  }
-
-  .bui-Button[data-variant="primary"] {
-    background-color: var(--bui-bg-solid);
-    color: var(--bui-fg-solid);
-
-    &:hover {
-      background-color: var(--bui-bg-solid-hover);
-      transition: background-color .15s;
-    }
-
-    &:active {
-      background-color: var(--bui-bg-solid-pressed);
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--bui-ring);
-      outline-offset: 2px;
-    }
-
-    &[data-disabled="true"] {
-      background-color: var(--bui-bg-solid-disabled);
-      color: var(--bui-fg-solid-disabled);
-    }
-  }
-
-  .bui-Button[data-variant="secondary"] {
-    background-color: var(--bui-bg-surface-1);
-    box-shadow: inset 0 0 0 1px var(--bui-border);
-    color: var(--bui-fg-primary);
-
-    &:hover {
-      box-shadow: inset 0 0 0 1px var(--bui-border-hover);
-      transition: box-shadow .15s;
-    }
-
-    &:active {
-      box-shadow: inset 0 0 0 1px var(--bui-border-pressed);
-    }
-
-    &:focus-visible {
-      box-shadow: inset 0 0 0 2px var(--bui-ring);
-      outline: none;
-      transition: none;
-    }
-
-    &[data-disabled="true"] {
-      box-shadow: inset 0 0 0 1px var(--bui-border-disabled);
-      color: var(--bui-fg-disabled);
-    }
-  }
-
-  .bui-Button[data-variant="tertiary"] {
-    color: var(--bui-fg-primary);
-    background-color: #0000;
-
-    &:hover {
-      background-color: var(--bui-bg-surface-1);
-      transition: background-color .2s;
-    }
-
-    &:active {
-      background-color: var(--bui-bg-surface-2);
-    }
-
-    &:focus-visible {
-      box-shadow: inset 0 0 0 2px var(--bui-ring);
-      outline: none;
-      transition: none;
-    }
-
-    &[data-disabled="true"] {
-      color: var(--bui-fg-disabled);
-      background-color: #0000;
-    }
-  }
-
-  .bui-Button[data-size="medium"] {
-    font-size: var(--bui-font-size-4);
-    padding: 0 var(--bui-space-3);
-    height: 2.5rem;
-  }
-
-  .bui-Button[data-size="small"] {
-    font-size: var(--bui-font-size-3);
-    padding: 0 var(--bui-space-2);
-    height: 2rem;
-  }
-
-  .bui-Button[data-size="small"] svg {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .bui-Button[data-size="medium"] svg {
-    width: 1.25rem;
-    height: 1.25rem;
-  }
-
-  .bui-ButtonIcon {
-    justify-content: center;
-    align-items: center;
-  }
-
-  .bui-ButtonIcon[data-size="small"] {
-    width: 2rem;
-    padding: 0;
-  }
-
-  .bui-ButtonIcon[data-size="medium"] {
-    width: 2.5rem;
-    padding: 0;
-  }
-
-  .bui-Card {
-    gap: var(--bui-space-3);
-    background-color: var(--bui-bg-surface-1);
-    border-radius: var(--bui-radius-3);
-    padding-block: var(--bui-space-3);
-    color: var(--bui-fg-primary);
-    border: 1px solid var(--bui-border);
-    flex-direction: column;
-    width: 100%;
-    min-height: 0;
-    display: flex;
-    overflow: hidden;
-  }
-
-  .bui-CardBody {
-    flex: 1;
-    min-height: 0;
-    overflow: auto;
-  }
-
-  .bui-CardHeader, .bui-CardFooter {
-    padding-inline: var(--bui-space-3);
-  }
-
-  .bui-CheckboxRoot {
-    width: 1rem;
-    height: 1rem;
-    box-shadow: inset 0 0 0 1px var(--bui-border);
-    cursor: pointer;
-    background-color: var(--bui-bg-surface-1);
-    border: none;
-    border-radius: 2px;
-    flex-shrink: 0;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-    transition: background-color .2s ease-in-out;
-    display: flex;
-  }
-
-  .bui-CheckboxRoot:focus-visible {
-    outline: 2px solid var(--bui-ring);
-    outline-offset: 2px;
-    transition: none;
-  }
-
-  .bui-CheckboxRoot[data-checked] {
-    background-color: var(--bui-bg-solid);
-    box-shadow: none;
-    color: var(--bui-fg-solid);
-  }
-
-  .bui-CheckboxLabel {
-    align-items: center;
-    gap: var(--bui-space-2);
-    font-size: var(--bui-font-size-3);
-    font-family: var(--bui-font-regular);
-    font-weight: var(--bui-font-weight-regular);
-    color: var(--bui-fg-primary);
-    user-select: none;
-    flex-direction: row;
-    display: flex;
-
-    &:hover {
-      & .bui-CheckboxRoot:not([data-checked]) {
-        box-shadow: inset 0 0 0 1px var(--bui-border-hover);
-      }
-    }
-  }
-
-  .bui-CheckboxIndicator {
-    color: var(--bui-fg-solid);
-    justify-content: center;
-    align-items: center;
-    display: flex;
-  }
-
-  .bui-CollapsiblePanel {
-    height: var(--collapsible-panel-height);
-    transition: all .15s ease-out;
-    display: flex;
-    overflow: hidden;
-
-    &[data-starting-style], &[data-ending-style] {
-      height: 0;
-    }
-  }
-
-  .bui-Container {
-    max-width: 120rem;
-    padding-inline: var(--bui-space-4);
-    margin-inline: auto;
-    transition: padding .2s ease-in-out;
-  }
-
-  @media (width >= 640px) {
-    .bui-Container {
-      padding-inline: var(--bui-space-5);
-    }
-  }
-
-  .bui-FieldError {
-    color: var(--bui-fg-danger);
-    font-size: var(--bui-font-size-2);
-    font-weight: var(--bui-font-weight-regular);
-    margin-top: var(--bui-space-2);
-    display: inline-block;
-  }
-
-  .bui-FieldLabelWrapper {
-    margin-bottom: var(--bui-space-3);
-    gap: var(--bui-space-1);
-    flex-direction: column;
-    display: flex;
-  }
-
-  .bui-FieldLabel {
-    color: var(--bui-fg-primary);
-    cursor: pointer;
-    font-weight: var(--bui-font-weight-regular);
-    font-size: var(--bui-font-size-2);
-    margin-right: auto;
-  }
-
-  .bui-FieldSecondaryLabel {
-    color: var(--bui-fg-secondary);
-    font-weight: var(--bui-font-weight-regular);
-    margin-left: var(--bui-space-1);
-  }
-
-  .bui-FieldDescription {
-    font-weight: var(--bui-font-weight-regular);
-    font-size: var(--bui-font-size-2);
-    color: var(--bui-fg-secondary);
-    margin: 0;
-  }
-
-  .bui-Flex {
-    min-width: 0;
-    display: flex;
-  }
-
-  .bui-Grid {
-    display: grid;
-  }
-
-  .bui-HeaderToolbar {
-    margin-bottom: var(--bui-space-6);
-
-    &:before {
-      content: "";
-      background-color: var(--bui-bg);
-      z-index: 0;
-      height: 16px;
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-    }
-
-    &[data-has-tabs="true"] {
-      margin-bottom: 0;
-    }
-  }
-
-  .bui-HeaderToolbarWrapper {
-    z-index: 1;
-    background-color: var(--bui-bg-surface-1);
-    padding-inline: var(--bui-space-5);
-    border-bottom: 1px solid var(--bui-border);
-    color: var(--bui-fg-primary);
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    height: 52px;
-    display: flex;
-    position: relative;
-  }
-
-  .bui-HeaderToolbarContent {
-    align-items: center;
-    gap: var(--bui-space-2);
-    flex-direction: row;
-    display: flex;
-  }
-
-  .bui-HeaderToolbarName {
-    align-items: center;
-    gap: var(--bui-space-2);
-    font-size: var(--bui-font-size-3);
-    font-weight: var(--bui-font-weight-regular);
-    flex-direction: row;
-    flex-shrink: 0;
-    display: flex;
-  }
-
-  .bui-HeaderToolbarIcon {
-    width: 16px;
-    height: 16px;
-    color: var(--bui-fg-primary);
-
-    & svg {
-      width: 100%;
-      height: 100%;
-    }
-  }
-
-  .bui-HeaderToolbarControls {
-    right: var(--bui-space-5);
-    align-items: center;
-    gap: var(--bui-space-2);
-    flex-direction: row;
-    display: flex;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-  }
-
-  .bui-HeaderTabsWrapper {
-    margin-bottom: var(--bui-space-4);
-    padding-inline: var(--bui-space-3);
-    border-bottom: 1px solid var(--bui-border);
-    background-color: var(--bui-bg-surface-1);
-  }
-
-  .bui-HeaderPage {
-    gap: var(--bui-space-1);
-    margin-top: var(--bui-space-6);
-    margin-bottom: var(--bui-space-6);
-    flex-direction: column;
-    display: flex;
-  }
-
-  .bui-HeaderPageContent {
-    flex-direction: row;
-    justify-content: space-between;
-    display: flex;
-  }
-
-  .bui-HeaderPageTabsWrapper {
-    margin-left: -8px;
-  }
-
-  .bui-HeaderPageControls, .bui-HeaderPageBreadcrumbs {
-    align-items: center;
-    gap: var(--bui-space-2);
-    flex-direction: row;
-    display: flex;
-  }
-
-  .bui-Icon {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .bui-Link {
-    font-family: var(--bui-font-regular);
-    cursor: pointer;
-    margin: 0;
-    padding: 0;
-    text-decoration-line: none;
-    display: inline-block;
-
-    &:hover {
-      text-underline-offset: calc(.025em + 2px);
-      text-decoration-line: underline;
-      text-decoration-style: solid;
-      text-decoration-thickness: min(2px, max(1px, .05em));
-      text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
-    }
-  }
-
-  .bui-Popover {
-    background-color: var(--bui-bg-surface-1);
-    border: 1px solid var(--bui-border);
-    border-radius: var(--bui-radius-3);
-    padding-block: var(--bui-space-1);
-    margin-right: 12px;
-    overflow: scroll;
-    box-shadow: 0 4px 12px #0000001a;
-  }
-
-  .bui-RadioGroup {
-    color: var(--bui-fg-primary);
-    flex-direction: column;
-    display: flex;
-  }
-
-  .bui-RadioGroup[data-orientation="horizontal"] .bui-RadioGroupContent {
-    gap: var(--bui-space-4);
-    flex-direction: row;
-  }
-
-  .bui-RadioGroupContent {
-    gap: var(--bui-space-2);
-    flex-direction: column;
-    display: flex;
-  }
-
-  .bui-Radio {
-    align-items: center;
-    gap: var(--bui-space-2);
-    font-size: var(--bui-font-size-2);
-    color: var(--bui-fg-primary);
-    forced-color-adjust: none;
-    display: flex;
-    position: relative;
-
-    &:before {
-      content: "";
-      box-sizing: border-box;
-      border: .125rem solid var(--bui-border);
-      background: var(--bui-gray-1);
-      border-radius: var(--bui-radius-full);
-      width: 1rem;
-      height: 1rem;
-      transition: all .2s;
-      display: block;
-    }
-
-    &[data-pressed]:before {
-      border-color: var(--bui-border);
-    }
-
-    &[data-selected] {
-      &:before {
-        border-color: var(--bui-bg-solid);
-        border-width: .25rem;
-      }
-
-      &[data-pressed]:before {
-        border-color: var(--bui-bg-solid);
-      }
-    }
-
-    &[data-focus-visible]:before {
-      outline: 2px solid var(--bui-ring);
-      outline-offset: 2px;
-    }
-
-    &[data-disabled] {
-      cursor: not-allowed;
-      color: var(--bui-fg-disabled);
-
-      &:before {
-        border-color: var(--bui-border-disabled);
-        background: var(--bui-bg-disabled);
-      }
-
-      &[data-selected]:before {
-        border-color: var(--bui-border-disabled);
-      }
-    }
-
-    &[data-invalid]:before, &[data-invalid][data-selected]:before {
-      border-color: var(--bui-border-danger);
-    }
-
-    &[data-disabled][data-invalid] {
-      color: var(--bui-fg-disabled);
-
-      &:before {
-        border-color: var(--bui-border-disabled);
-        background: var(--bui-bg-disabled);
-      }
-
-      &[data-selected]:before {
-        border-color: var(--bui-border-disabled);
-      }
-    }
-  }
-
-  .bui-Table {
-    caption-side: bottom;
-    border-collapse: collapse;
-    width: 100%;
-  }
-
-  .bui-TableHeader {
-    border-bottom: 1px solid var(--bui-border);
-    transition: color .2s ease-in-out;
-  }
-
-  .bui-TableHead {
-    text-align: left;
-    padding: var(--bui-space-3);
-    font-size: var(--bui-font-size-3);
-    color: var(--bui-fg-primary);
-
-    &:hover {
-      & .bui-TableHeadSortButton {
-        opacity: 1;
-      }
-    }
-  }
-
-  .bui-TableHeadContent {
-    align-items: center;
-    gap: var(--bui-space-1);
-    flex-direction: row;
-    display: flex;
-  }
-
-  .bui-TableHeadSortButton {
-    cursor: pointer;
-    user-select: none;
-    align-items: center;
-    gap: var(--bui-space-1);
-    opacity: 0;
-    color: var(--bui-fg-secondary);
-    transition: opacity .1s ease-in-out;
-    display: inline-flex;
-
-    & svg {
-      transition: transform .1s ease-in-out;
-    }
-
-    &[data-sort-order="asc"] svg {
-      opacity: 1;
-      transform: rotate(0);
-    }
-
-    &[data-sort-order="desc"] svg {
-      opacity: 1;
-      transform: rotate(180deg);
-    }
-  }
-
-  .bui-TableBody {
-    color: var(--bui-fg-primary);
-  }
-
-  .bui-TableRow {
-    border-bottom: 1px solid var(--bui-border);
-    transition: color .2s ease-in-out;
-
-    &[data-react-aria-pressable="true"] {
-      cursor: pointer;
-    }
-  }
-
-  .bui-TableBody .bui-TableRow:hover {
-    background-color: var(--bui-gray-2);
-  }
-
-  .bui-TableCell {
-    padding: var(--bui-space-3);
-    font-size: var(--bui-font-size-3);
-    padding: var(--bui-space-3);
-    font-size: var(--bui-font-size-3);
-  }
-
-  .bui-TableCellContentWrapper {
-    align-items: center;
-    gap: var(--bui-space-2);
-    flex-direction: row;
-    display: inline-flex;
-  }
-
-  .bui-TableCellIcon, .bui-TableCellIcon svg {
-    color: var(--bui-fg-primary);
-    align-items: center;
-    display: inline-flex;
-  }
-
-  .bui-TableCellContent {
-    gap: var(--bui-space-0_5);
-    flex-direction: column;
-    display: flex;
-  }
-
-  .bui-TableCellProfile {
-    gap: var(--bui-space-2);
-    flex-direction: row;
-    align-items: center;
-    display: flex;
-  }
-
-  .bui-TableCellProfileAvatar {
-    vertical-align: middle;
-    user-select: none;
-    color: var(--bui-fg-primary);
-    background-color: var(--bui-bg-surface-2);
-    border-radius: 100%;
-    justify-content: center;
-    align-items: center;
-    width: 1.25rem;
-    height: 1.25rem;
-    font-size: 1rem;
-    font-weight: 500;
-    line-height: 1;
-    display: inline-flex;
-    overflow: hidden;
-  }
-
-  .bui-TableCellProfileAvatarImage {
-    object-fit: cover;
-    width: 100%;
-    height: 100%;
-  }
-
-  .bui-TableCellProfileAvatarFallback {
-    width: 100%;
-    height: 100%;
-    font-size: var(--bui-font-size-2);
-    font-weight: var(--bui-font-weight-regular);
-    box-shadow: inset 0 0 0 1px var(--bui-border);
-    border-radius: var(--bui-radius-full);
-    justify-content: center;
-    align-items: center;
-    display: flex;
-  }
-
-  .bui-DataTablePagination {
-    padding-top: var(--bui-space-5);
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-  }
-
-  .bui-DataTablePagination--left {
-    justify-content: space-between;
-    align-items: center;
-    display: flex;
-  }
-
-  .bui-DataTablePagination--right {
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--bui-space-2);
-    display: flex;
-  }
-
-  .bui-DataTablePagination--select {
-    min-width: 10.5rem;
-  }
-
-  .bui-Tabs {
-    --active-tab-left: 0px;
-    --active-tab-right: 0px;
-    --active-tab-top: 0px;
-    --active-tab-bottom: 0px;
-    --active-tab-width: 0px;
-    --active-tab-height: 0px;
-    --active-transition-duration: 0s;
-    --hovered-tab-left: 0px;
-    --hovered-tab-right: 0px;
-    --hovered-tab-top: 0px;
-    --hovered-tab-bottom: 0px;
-    --hovered-tab-width: 0px;
-    --hovered-tab-height: 0px;
-    --hovered-tab-opacity: 0;
-    --hovered-transition-duration: 0s;
-  }
-
-  .bui-TabList {
-    flex-direction: row;
-    display: flex;
-  }
-
-  .bui-TabListWrapper {
-    position: relative;
-  }
-
-  .bui-Tab {
-    font-size: var(--bui-font-size-3);
-    font-family: var(--bui-font-regular);
-    font-weight: var(--bui-font-weight-regular);
-    color: var(--bui-fg-secondary);
-    cursor: pointer;
-    z-index: 2;
-    height: 36px;
-    padding-inline: var(--bui-space-2);
-    justify-content: center;
-    align-items: center;
-    display: flex;
-    position: relative;
-
-    &[data-selected="true"] {
-      color: var(--bui-fg-primary);
-    }
-  }
-
-  .bui-TabActive {
-    content: "";
-    left: calc(var(--active-tab-left)  + var(--bui-space-2));
-    width: calc(var(--active-tab-width)  - var(--bui-space-4));
-    background-color: var(--bui-fg-primary);
-    height: 1px;
-    transition: left var(--active-transition-duration) ease-out, opacity .15s ease-out, width var(--active-transition-duration) ease-out;
-    opacity: 1;
-    border-radius: 4px;
-    position: absolute;
-    bottom: -1px;
-  }
-
-  .bui-TabHovered {
-    content: "";
-    left: var(--hovered-tab-left);
-    top: calc(var(--hovered-tab-top)  + 4px);
-    width: var(--hovered-tab-width);
-    height: calc(var(--hovered-tab-height)  - 8px);
-    background-color: var(--bui-gray-2);
-    opacity: var(--hovered-tab-opacity);
-    transition: left var(--hovered-transition-duration) ease-out, top var(--hovered-transition-duration) ease-out, width var(--hovered-transition-duration) ease-out, height var(--hovered-transition-duration) ease-out, opacity .15s ease-out;
-    border-radius: 4px;
-    position: absolute;
-  }
-
-  .bui-TabPanel {
-    padding-inline: var(--bui-space-2);
-    padding-top: var(--bui-space-4);
-  }
-
-  .bui-TagList {
-    gap: var(--bui-space-2);
-    flex-wrap: wrap;
-    display: flex;
-  }
-
-  .bui-Tag {
-    color: var(--bui-fg-primary);
-    background-color: var(--bui-gray-2);
-    border-radius: var(--bui-radius-2);
-    font-weight: var(--bui-font-weight-regular);
-    justify-content: center;
-    align-items: center;
-    gap: var(--bui-space-1);
-    box-sizing: border-box;
-    transition-property: background-color, box-shadow, color;
-    transition-duration: .2s;
-    transition-timing-function: ease-in-out;
-    display: flex;
-  }
-
-  .bui-Tag[data-size="small"] {
-    height: 26px;
-    padding: 0 var(--bui-space-2);
-    font-size: var(--bui-font-size-1);
-  }
-
-  .bui-Tag[data-size="medium"] {
-    height: 32px;
-    padding: 0 var(--bui-space-2);
-    font-size: var(--bui-font-size-2);
-  }
-
-  .bui-Tag[data-hovered] {
-    background-color: var(--bui-gray-3);
-    cursor: pointer;
-  }
-
-  .bui-Tag[data-focus-visible] {
-    outline: 2px solid var(--bui-ring);
-    outline-offset: 1px;
-  }
-
-  .bui-Tag[data-selected] {
-    box-shadow: inset 0 0 0 1px var(--bui-gray-8);
-  }
-
-  .bui-Tag[data-disabled] {
-    color: var(--bui-fg-disabled);
-    cursor: not-allowed;
-  }
-
-  .bui-TagRemoveButton {
-    cursor: pointer;
-    color: var(--bui-fg-primary);
-    background-color: #0000;
-    border: none;
-    width: 1rem;
-    height: 1rem;
-    margin: 0;
-    padding: 0;
-  }
-
-  .bui-TagIcon {
-    justify-content: center;
-    align-items: center;
-    transition: color .2s ease-in-out;
-    display: flex;
-
-    & svg {
-      width: 1rem;
-      height: 1rem;
-    }
-  }
-
-  .bui-Text {
-    font-family: var(--bui-font-regular);
-    margin: 0;
-    padding: 0;
-  }
-
-  .bui-Text[data-variant="title-large"] {
-    font-size: var(--bui-font-size-8);
-    line-height: 140%;
-  }
-
-  .bui-Text[data-variant="title-medium"] {
-    font-size: var(--bui-font-size-7);
-    line-height: 140%;
-  }
-
-  .bui-Text[data-variant="title-small"] {
-    font-size: var(--bui-font-size-6);
-    line-height: 140%;
-  }
-
-  .bui-Text[data-variant="title-x-small"] {
-    font-size: var(--bui-font-size-5);
-    line-height: 140%;
-  }
-
-  .bui-Text[data-variant="body-large"] {
-    font-size: var(--bui-font-size-4);
-    line-height: 140%;
-  }
-
-  .bui-Text[data-variant="body-medium"] {
-    font-size: var(--bui-font-size-3);
-    line-height: 140%;
-  }
-
-  .bui-Text[data-variant="body-small"] {
-    font-size: var(--bui-font-size-2);
-    line-height: 140%;
-  }
-
-  .bui-Text[data-variant="body-x-small"] {
-    font-size: var(--bui-font-size-1);
-    line-height: 140%;
-  }
-
-  .bui-Text[data-weight="regular"] {
-    font-weight: var(--bui-font-weight-regular);
-  }
-
-  .bui-Text[data-weight="bold"] {
-    font-weight: var(--bui-font-weight-bold);
-  }
-
-  .bui-Text[data-color="primary"] {
-    color: var(--bui-fg-primary);
-  }
-
-  .bui-Text[data-color="secondary"] {
-    color: var(--bui-fg-secondary);
-  }
-
-  .bui-Text[data-color="danger"] {
-    color: var(--bui-fg-danger);
-  }
-
-  .bui-Text[data-color="warning"] {
-    color: var(--bui-fg-warning);
-  }
-
-  .bui-Text[data-color="success"] {
-    color: var(--bui-fg-success);
-  }
-
-  .bui-Text[data-truncate] {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  .bui-Text[data-as="span"], .bui-Text[data-as="label"], .bui-Text[data-as="strong"], .bui-Text[data-as="em"], .bui-Text[data-as="small"] {
-    display: inline-block;
-  }
-
-  .bui-TextField {
-    font-family: var(--bui-font-regular);
-    flex-direction: column;
-    flex-shrink: 0;
-    width: 100%;
-    display: flex;
-  }
-
-  .bui-InputWrapper {
-    position: relative;
-
-    &[data-size="small"] .bui-Input {
-      height: 2rem;
-    }
-
-    &[data-size="medium"] .bui-Input {
-      height: 2.5rem;
-    }
-
-    &[data-size="small"] .bui-Input[data-icon] {
-      padding-left: var(--bui-space-8);
-    }
-
-    &[data-size="medium"] .bui-Input[data-icon] {
-      padding-left: var(--bui-space-9);
-    }
-  }
-
-  .bui-InputIcon {
-    left: var(--bui-space-3);
-    margin-right: var(--bui-space-1);
-    color: var(--bui-fg-primary);
-    pointer-events: none;
-    flex-shrink: 0;
-    transition: left .2s ease-in-out;
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-
-    &[data-size="small"], &[data-size="small"] svg {
-      width: 1rem;
-      height: 1rem;
-    }
-
-    &[data-size="medium"], &[data-size="medium"] svg {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-  }
-
-  .bui-Input {
-    padding: 0 var(--bui-space-3);
-    border-radius: var(--bui-radius-2);
-    border: 1px solid var(--bui-border);
-    background-color: var(--bui-bg-surface-1);
-    font-size: var(--bui-font-size-3);
-    font-family: var(--bui-font-regular);
-    font-weight: var(--bui-font-weight-regular);
-    color: var(--bui-fg-primary);
-    width: 100%;
-    height: 100%;
-    cursor: inherit;
-    align-items: center;
-    transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
-    display: flex;
-
-    &::-webkit-search-cancel-button, &::-webkit-search-decoration {
-      -webkit-appearance: none;
-    }
-
-    &::placeholder {
-      color: var(--bui-fg-secondary);
-    }
-
-    &[data-focused] {
-      outline-color: var(--bui-border-pressed);
-      outline-width: 0;
-    }
-
-    &[data-hovered] {
-      border-color: var(--bui-border-hover);
-    }
-
-    &[data-focused] {
-      border-color: var(--bui-border-pressed);
-      outline-width: 0;
-    }
-
-    &[data-invalid] {
-      border-color: var(--bui-fg-danger);
-    }
-
-    &[data-disabled] {
-      opacity: .5;
-      cursor: not-allowed;
-      border: 1px solid var(--bui-border-disabled);
-    }
-  }
-
-  .bui-PasswordField {
-    font-family: var(--bui-font-regular);
-    --bui-passwordmanager-icon-width: var(--bui-space-1);
-    flex-direction: column;
-    flex-shrink: 0;
-    width: 100%;
-    display: flex;
-  }
-
-  .bui-InputVisibility {
-    right: var(--bui-passwordmanager-icon-width);
-    cursor: pointer;
-    color: var(--bui-fg-primary);
-    background-color: #0000;
-    border: none;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    display: flex;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-
-    &[data-size="small"] {
-      width: 2rem;
-      height: 2rem;
-    }
-
-    &[data-size="small"] svg {
-      width: 1rem;
-      height: 1rem;
-    }
-
-    &[data-size="medium"] {
-      width: 2.5rem;
-      height: 2.5rem;
-    }
-
-    &[data-size="medium"] svg {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-  }
-
-  .bui-PasswordField .bui-InputWrapper[data-size="small"] .bui-Input {
-    padding-right: calc(2rem + var(--bui-passwordmanager-icon-width));
-  }
-
-  .bui-PasswordField .bui-InputWrapper[data-size="medium"] .bui-Input {
-    padding-right: calc(2.5rem + var(--bui-passwordmanager-icon-width));
-  }
-
-  .bui-SearchField {
-    flex: 1 0;
-
-    &[data-empty] {
-      & .bui-InputClear {
-        display: none;
-      }
-    }
-
-    &[data-startCollapsed="true"] {
-      flex: 0 auto;
-      padding: 0;
-      transition: flex-basis .3s ease-in-out;
-
-      &[data-collapsed="true"] {
-        flex-basis: 200px;
-      }
-
-      &[data-collapsed="false"] {
-        cursor: pointer;
-
-        &[data-size="medium"] {
-          flex-basis: 2.5rem;
-          height: 2.5rem;
-        }
-
-        &[data-size="small"] {
-          flex-basis: 2rem;
-          height: 2rem;
-        }
-
-        &[data-size="medium"] .bui-Input {
-          &::placeholder {
-            opacity: 0;
-          }
-        }
-
-        &[data-size="small"] .bui-Input {
-          &::placeholder {
-            opacity: 0;
-          }
-        }
-
-        & .bui-InputWrapper {
-          & .bui-Input[data-icon] {
-            padding-right: 0;
-          }
-        }
-      }
-    }
-  }
-
-  .bui-SearchField .bui-Input {
-    transition: padding .3s ease-in-out, border-color .2s ease-in-out, outline-color .2s ease-in-out;
-
-    &[data-hovered] {
-      border-color: var(--bui-border-hover);
-    }
-
-    &[data-focused] {
-      border-color: var(--bui-border-pressed);
-      outline-width: 0;
-    }
-  }
-
-  .bui-SearchField .bui-InputWrapper {
-    & .bui-Input[data-icon] {
-      padding-right: var(--bui-space-6);
-    }
-  }
-
-  .bui-SearchField .bui-InputIcon {
-    justify-content: center;
-    display: flex;
-    left: 0;
-
-    &[data-size="small"] {
-      width: var(--bui-space-8);
-    }
-
-    &[data-size="medium"] {
-      width: var(--bui-space-10);
-    }
-  }
-
-  .bui-InputClear {
-    cursor: pointer;
-    color: var(--bui-fg-secondary);
-    background-color: #0000;
-    border: none;
-    justify-content: center;
-    align-items: center;
-    margin: 0;
-    padding: 0;
-    transition: color .2s ease-in-out;
-    display: flex;
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    right: 0;
-  }
-
-  .bui-InputClear:hover {
-    color: var(--bui-fg-primary);
-  }
-
-  .bui-InputClear[data-size="small"] {
-    width: 2rem;
-    height: 2rem;
-  }
-
-  .bui-InputClear[data-size="medium"] {
-    width: 2.5rem;
-    height: 2.5rem;
-  }
-
-  .bui-InputClear svg {
-    width: 1rem;
-    height: 1rem;
-  }
-
-  .bui-Skeleton {
-    animation: var(--bui-animate-pulse);
-    background-color: var(--bui-bg-surface-2);
-    border-radius: var(--bui-radius-2);
-  }
-
-  .bui-Skeleton[data-rounded="true"] {
-    border-radius: var(--bui-radius-full);
-  }
-
-  .bui-Tooltip {
-    background: var(--bui-bg-surface-1);
-    border: 1px solid var(--bui-gray-3);
-    forced-color-adjust: none;
-    padding: var(--bui-space-2) var(--bui-space-3);
-    max-width: 240px;
-    font-size: var(--bui-font-size-3);
-    font-family: var(--bui-font-regular);
-    color: var(--bui-fg-primary);
-    border-radius: 4px;
-    outline: none;
-    transition: transform .2s, opacity .2s;
-    transform: translate3d(0, 0, 0);
-    box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
-
-    &[data-entering], &[data-exiting] {
-      transform: var(--origin);
-      opacity: 0;
-    }
-
-    --tooltip-offset: var(--bui-space-3);
-
-    &[data-placement="top"] {
-      margin-bottom: var(--tooltip-offset);
-      --origin: translateY(4px);
-    }
-
-    &[data-placement="right"] {
-      margin-left: var(--tooltip-offset);
-      --origin: translateX(-4px);
-    }
-
-    &[data-placement="bottom"] {
-      margin-top: var(--tooltip-offset);
-      --origin: translateY(-4px);
-    }
-
-    &[data-placement="left"] {
-      margin-right: var(--tooltip-offset);
-      --origin: translateX(4px);
-    }
-  }
-
-  .bui-TooltipArrow {
-    & svg {
-      display: block;
-
-      & path:first-child {
-        fill: var(--bui-bg-surface-1);
-      }
-
-      & path:nth-child(2) {
-        fill: var(--bui-gray-3);
-      }
-
-      --tooltip-arrow-overlap: -2px;
-    }
-
-    &[data-placement="top"] svg {
-      margin-top: var(--tooltip-arrow-overlap);
-    }
-
-    &[data-placement="bottom"] svg {
-      margin-bottom: var(--tooltip-arrow-overlap);
-      transform: rotate(180deg);
-    }
-
-    &[data-placement="right"] svg {
-      margin-right: var(--tooltip-arrow-overlap);
-      transform: rotate(90deg);
-    }
-
-    &[data-placement="left"] svg {
-      margin-left: var(--tooltip-arrow-overlap);
-      transform: rotate(-90deg);
-    }
-  }
-
-  [data-theme="dark"] {
-    & .bui-Tooltip {
-      background: var(--bui-bg-surface-2);
-      box-shadow: none;
-      border: 1px solid var(--bui-gray-4);
-    }
-
-    & .bui-TooltipArrow {
-      & svg path:first-child {
-        fill: var(--bui-bg-surface-2);
-      }
-
-      & svg path:nth-child(2) {
-        fill: var(--bui-gray-4);
-      }
-    }
-  }
-
-  .bui-ScrollAreaRoot {
-    box-sizing: border-box;
-    width: 100%;
-  }
-
-  .bui-ScrollAreaViewport {
-    overscroll-behavior: contain;
-    height: 100%;
-  }
-
-  .bui-ScrollAreaContent {
-    padding-block: .75rem;
-    flex-direction: column;
-    gap: 1rem;
-    padding-left: 1rem;
-    padding-right: 1.5rem;
-    display: flex;
-  }
-
-  .bui-ScrollAreaScrollbar {
-    background-color: var(--bui-scrollbar);
-    opacity: 0;
-    border-radius: .375rem;
-    justify-content: center;
-    width: .25rem;
-    margin: .5rem;
-    transition: opacity .15s .3s;
-    display: flex;
-
-    &[data-hovering], &[data-scrolling] {
-      opacity: 1;
-      transition-duration: 75ms;
-      transition-delay: 0s;
-    }
-
-    &:before {
-      content: "";
-      width: 1.25rem;
-      height: 100%;
-      position: absolute;
-    }
-  }
-
-  .bui-ScrollAreaThumb {
-    border-radius: inherit;
-    background-color: var(--bui-scrollbar-thumb);
-    width: 100%;
-  }
-
-  .bui-Select[data-invalid] {
-    & .bui-SelectTrigger {
-      border-color: var(--bui-fg-danger);
-    }
-  }
-
-  .bui-SelectTrigger {
-    box-sizing: border-box;
-    border-radius: var(--bui-radius-3);
-    border: 1px solid var(--bui-border);
-    background-color: var(--bui-bg-surface-1);
-    cursor: pointer;
-    justify-content: space-between;
-    align-items: center;
-    gap: var(--bui-space-2);
-    width: 100%;
-    display: flex;
-
-    & svg {
-      color: var(--bui-fg-secondary);
-      flex-shrink: 0;
-    }
-
-    &[data-size="small"] {
-      height: 2rem;
-      padding-inline: var(--bui-space-3);
-    }
-
-    &[data-size="medium"] {
-      height: 3rem;
-      padding-inline: var(--bui-space-4);
-    }
-
-    &[data-size="small"] svg {
-      width: 1rem;
-      height: 1rem;
-    }
-
-    &[data-size="medium"] svg {
-      width: 1.25rem;
-      height: 1.25rem;
-    }
-
-    &::placeholder {
-      color: var(--bui-fg-secondary);
-    }
-
-    &:hover {
-      border-color: var(--bui-border-hover);
-      transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
-    }
-
-    &:focus-visible {
-      border-color: var(--bui-border-pressed);
-      outline: 0;
-    }
-
-    &[data-invalid] {
-      border-color: var(--bui-fg-danger);
-    }
-
-    &[data-invalid]:hover, &[data-invalid]:focus-visible {
-      border-width: 2px;
-    }
-
-    &[disabled] {
-      cursor: not-allowed;
-      border-color: var(--bui-border-disabled);
-      color: var(--bui-fg-disabled);
-    }
-
-    &[disabled] .bui-SelectValue {
-      color: var(--bui-fg-disabled);
-    }
-
-    &[data-popup-open] .bui-SelectIcon {
-      transform: rotate(180deg);
-    }
-  }
-
-  .bui-SelectValue {
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    width: 100%;
-    font-size: var(--bui-font-size-3);
-    font-family: var(--bui-font-regular);
-    font-weight: var(--bui-font-weight-regular);
-    color: var(--bui-fg-primary);
-    text-align: left;
-    overflow: hidden;
-
-    & .bui-SelectItemIndicator {
-      display: none;
-    }
-
-    &[disabled] {
-      color: var(--bui-fg-disabled);
-    }
-  }
-
-  .bui-SelectItem {
-    width: var(--anchor-width);
-    padding-block: var(--bui-space-2);
-    padding-left: var(--bui-space-3);
-    padding-right: var(--bui-space-4);
-    color: var(--bui-fg-primary);
-    border-radius: var(--bui-radius-3);
-    cursor: pointer;
-    user-select: none;
-    font-size: var(--bui-font-size-3);
-    align-items: center;
-    gap: var(--bui-space-1);
-    outline: none;
-    grid-template-columns: 1rem 1fr;
-    grid-template-areas: "icon text";
-    display: grid;
-    position: relative;
-
-    &[data-focused] {
-      z-index: 0;
-      color: var(--bui-fg-primary);
-      position: relative;
-    }
-
-    &[data-focused]:before {
-      content: "";
-      z-index: -1;
-      background-color: var(--bui-bg-tint-hover);
-      border-radius: .25rem;
-      position: absolute;
-      inset-block: 0;
-      inset-inline: .25rem;
-    }
-
-    &[data-disabled] {
-      cursor: not-allowed;
-      color: var(--bui-fg-disabled);
-    }
-
-    &[data-selected] .bui-SelectItemIndicator {
-      opacity: 1;
-    }
-  }
-
-  .bui-SelectItemIndicator {
-    opacity: 0;
-    grid-area: icon;
-    justify-content: center;
-    align-items: center;
-    transition: opacity .2s ease-in-out;
-    display: flex;
-  }
-
-  .bui-SelectItemLabel {
-    flex: 1;
-    grid-area: text;
-  }
-
-  .bui-Switch {
-    align-items: center;
-    gap: var(--bui-space-3);
-    font-size: var(--bui-font-size-3);
-    color: var(--bui-fg-primary);
-    cursor: pointer;
-    display: flex;
-    position: relative;
-
-    &[data-pressed] .bui-SwitchIndicator {
-      &:before {
-        background: var(--bui-fg-solid);
-      }
-    }
-
-    &[data-selected] {
-      & .bui-SwitchIndicator {
-        background: var(--bui-bg-solid);
-
-        &:before {
-          background: var(--bui-fg-solid);
-          transform: translateX(100%);
-        }
-      }
-
-      &[data-pressed] {
-        & .indicator {
-          background: var(--bui-gray-3);
-        }
-      }
-    }
-
-    &[data-focus-visible] .bui-SwitchIndicator {
-      outline-offset: 2px;
-      outline: 2px solid;
-    }
-  }
-
-  .bui-SwitchIndicator {
-    background: var(--bui-gray-3);
-    border: 2px;
-    border-radius: 1.143rem;
-    width: 2rem;
-    height: 1.143rem;
-    transition: all .2s;
-
-    &:before {
-      content: "";
-      background: var(--bui-fg-solid);
-      border-radius: 16px;
-      width: .857rem;
-      height: .857rem;
-      margin: .143rem;
-      transition: all .2s;
-      display: block;
-    }
-  }
-}
+@layer components;
 
 @layer utilities {
   .bui-p {
@@ -10848,364 +9244,3 @@
 }
 
 @layer legacy;
-
-.bui-DialogOverlay {
-  z-index: 1000;
-  background: #e8e8e8cc;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-
-[data-theme="dark"] .bui-Dialog {
-  background: #00000080;
-}
-
-.bui-DialogOverlay[data-entering] {
-  animation: .2s ease-out forwards fade-in;
-}
-
-.bui-DialogOverlay[data-exiting] {
-  animation: .15s ease-out forwards fade-out;
-}
-
-.bui-Dialog {
-  background: var(--bui-bg-surface-1);
-  border: 1px solid var(--bui-border);
-  color: var(--bui-fg-primary);
-  width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));
-  max-width: calc(100vw - 3rem);
-  height: min(var(--bui-dialog-min-height, auto), calc(100vh - 3rem));
-  border-radius: .5rem;
-  outline: none;
-  flex-direction: column;
-  max-height: calc(100vh - 3rem);
-  display: flex;
-  position: relative;
-}
-
-.bui-DialogOverlay[data-entering] .bui-Dialog {
-  animation: .15s ease-out forwards dialog-enter;
-}
-
-.bui-DialogOverlay[data-exiting] .bui-Dialog {
-  animation: .15s ease-out forwards dialog-exit;
-}
-
-.bui-DialogHeader {
-  padding-inline: var(--bui-space-3);
-  padding-block: var(--bui-space-2);
-  border-bottom: 1px solid var(--bui-border);
-  justify-content: space-between;
-  align-items: center;
-  display: flex;
-}
-
-.bui-DialogHeaderTitle {
-  font-size: var(--bui-font-size-3);
-  font-weight: var(--bui-font-weight-bold);
-  margin: 0;
-}
-
-.bui-DialogFooter {
-  justify-content: end;
-  align-items: center;
-  gap: var(--bui-space-2);
-  padding-inline: var(--bui-space-3);
-  padding-block: var(--bui-space-3);
-  border-top: 1px solid var(--bui-border);
-  display: flex;
-}
-
-.bui-DialogBody {
-  padding: var(--bui-space-3);
-  flex: 1;
-  overflow-y: auto;
-}
-
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes dialog-enter {
-  from {
-    opacity: .5;
-    transform: scale(.8);
-  }
-
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes dialog-exit {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  to {
-    opacity: 0;
-    transform: scale(.95);
-  }
-}
-
-.bui-MenuPopover {
-  border: 1px solid var(--bui-border);
-  border-radius: var(--bui-radius-2);
-  background: var(--bui-bg-surface-1);
-  color: var(--bui-fg-primary);
-  outline: none;
-  flex-direction: column;
-  min-height: 0;
-  transition: transform .2s, opacity .2s;
-  display: flex;
-  overflow: hidden;
-
-  &[data-entering], &[data-exiting] {
-    transform: var(--origin);
-    opacity: 0;
-  }
-
-  &[data-placement="top"] {
-    --origin: translateY(8px);
-  }
-
-  &[data-placement="bottom"] {
-    --origin: translateY(-8px);
-  }
-
-  &[data-placement="right"] {
-    --origin: translateX(-8px);
-  }
-
-  &[data-placement="left"] {
-    --origin: translateX(8px);
-  }
-}
-
-.bui-MenuContent {
-  max-height: inherit;
-  box-sizing: border-box;
-  min-width: 150px;
-  padding-block: var(--bui-space-1);
-  outline: none;
-  overflow: auto;
-}
-
-.bui-MenuPopover .bui-ScrollAreaRoot {
-  flex-direction: column;
-  flex: 1;
-  height: 100%;
-  min-height: 0;
-  display: flex;
-}
-
-.bui-MenuPopover .bui-ScrollAreaScrollbar {
-  margin-inline: var(--bui-space-1_5);
-}
-
-.bui-MenuItem {
-  padding-inline: var(--bui-space-1);
-  display: block;
-
-  &[data-focused] .bui-MenuItemWrapper, &[data-open] .bui-MenuItemWrapper {
-    background: var(--bui-bg-surface-2);
-    color: var(--bui-fg-primary);
-  }
-
-  &[data-color="danger"] .bui-MenuItemWrapper {
-    color: var(--bui-fg-danger);
-  }
-
-  &[data-color="danger"][data-focused] .bui-MenuItemWrapper {
-    background: var(--bui-bg-danger);
-    color: var(--bui-fg-danger);
-  }
-
-  &[data-has-submenu] {
-    & > .bui-MenuItemWrapper > .bui-MenuItemArrow {
-      display: block;
-    }
-  }
-}
-
-.bui-MenuItemWrapper {
-  height: 2rem;
-  padding-inline: var(--bui-space-2);
-  border-radius: var(--bui-radius-2);
-  cursor: default;
-  color: var(--bui-fg-primary);
-  font-size: var(--bui-font-size-3);
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--bui-space-6);
-  outline: none;
-  display: flex;
-}
-
-.bui-MenuItemListBox {
-  padding-inline: var(--bui-space-1);
-  display: block;
-
-  &:hover .bui-MenuItemWrapper {
-    background: var(--bui-bg-surface-2);
-    color: var(--bui-fg-primary);
-  }
-
-  &[data-selected] .bui-MenuItemListBoxCheck {
-    & > svg {
-      opacity: 1;
-      color: var(--bui-fg-primary);
-    }
-  }
-}
-
-.bui-MenuItemListBoxCheck {
-  justify-content: center;
-  align-items: center;
-  width: 1rem;
-  height: 1rem;
-  display: flex;
-
-  & > svg {
-    opacity: 0;
-    width: 1rem;
-    height: 1rem;
-  }
-}
-
-.bui-MenuItemContent {
-  align-items: center;
-  gap: var(--bui-space-2);
-  display: flex;
-
-  & > svg {
-    width: 1rem;
-    height: 1rem;
-  }
-}
-
-.bui-MenuItemArrow {
-  width: 1rem;
-  height: 1rem;
-  display: none;
-
-  & > svg {
-    width: 1rem;
-    height: 1rem;
-  }
-}
-
-.bui-MenuSection {
-  &:first-child .bui-MenuSectionHeader {
-    padding-top: 0;
-  }
-}
-
-.bui-MenuSectionHeader {
-  height: 2rem;
-  padding-top: var(--bui-space-3);
-  padding-left: var(--bui-space-3);
-  color: var(--bui-fg-primary);
-  font-size: var(--bui-font-size-1);
-  letter-spacing: .05rem;
-  text-transform: uppercase;
-  align-items: center;
-  font-weight: bold;
-  display: flex;
-}
-
-.bui-MenuSeparator {
-  background: var(--bui-border);
-  height: 1px;
-  margin-inline: var(--bui-space-1_5);
-  margin-block: var(--bui-space-1);
-}
-
-.bui-MenuSearchField {
-  font-family: var(--bui-font-regular);
-  flex-shrink: 0;
-  width: 100%;
-  position: relative;
-
-  &[data-empty] {
-    & .bui-MenuSearchFieldClear {
-      display: none;
-    }
-  }
-}
-
-.bui-MenuSearchFieldInput {
-  padding: 0 var(--bui-space-3);
-  border: none;
-  border-bottom: 1px solid var(--bui-border);
-  background-color: var(--bui-bg-surface-1);
-  font-size: var(--bui-font-size-3);
-  font-family: var(--bui-font-regular);
-  font-weight: var(--bui-font-weight-regular);
-  color: var(--bui-fg-primary);
-  width: 100%;
-  height: 2rem;
-  cursor: inherit;
-  outline: none;
-  align-items: center;
-  display: flex;
-
-  &::-webkit-search-cancel-button, &::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-}
-
-.bui-MenuSearchFieldClear {
-  right: var(--bui-space-2);
-  cursor: pointer;
-  color: var(--bui-fg-secondary);
-  background-color: #0000;
-  border: none;
-  justify-content: center;
-  align-items: center;
-  margin: 0;
-  padding: 0;
-  transition: color .2s ease-in-out;
-  display: flex;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-
-  & > svg {
-    width: 1rem;
-    height: 1rem;
-  }
-}
-
-.bui-MenuEmptyState {
-  padding-inline: var(--bui-space-3);
-  padding-block: var(--bui-space-2);
-  color: var(--bui-fg-secondary);
-  font-size: var(--bui-font-size-3);
-  font-family: var(--bui-font-regular);
-  font-weight: var(--bui-font-weight-regular);
-}
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index 0f0ac5a8d8..738b35e047 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -481,6 +481,11 @@ export const componentDefinitions: {
       readonly footer: 'bui-DialogFooter';
     };
   };
+  readonly FieldError: {
+    readonly classNames: {
+      readonly root: 'bui-FieldError';
+    };
+  };
   readonly FieldLabel: {
     readonly classNames: {
       readonly root: 'bui-FieldLabelWrapper';
@@ -700,6 +705,14 @@ export const componentDefinitions: {
       readonly cellProfileLink: 'bui-TableCellProfileLink';
     };
   };
+  readonly TablePagination: {
+    readonly classNames: {
+      readonly root: 'bui-TablePagination';
+      readonly left: 'bui-TablePaginationLeft';
+      readonly right: 'bui-TablePaginationRight';
+      readonly select: 'bui-TablePaginationSelect';
+    };
+  };
   readonly Tabs: {
     readonly classNames: {
       readonly tabs: 'bui-Tabs';
diff --git a/packages/ui/src/components/Avatar/Avatar.styles.css b/packages/ui/src/components/Avatar/Avatar.module.css
similarity index 100%
rename from packages/ui/src/components/Avatar/Avatar.styles.css
rename to packages/ui/src/components/Avatar/Avatar.module.css
diff --git a/packages/ui/src/components/Avatar/Avatar.tsx b/packages/ui/src/components/Avatar/Avatar.tsx
index 4e899170de..de69ff24fa 100644
--- a/packages/ui/src/components/Avatar/Avatar.tsx
+++ b/packages/ui/src/components/Avatar/Avatar.tsx
@@ -19,6 +19,7 @@ import { Avatar as AvatarPrimitive } from '@base-ui-components/react/avatar';
 import clsx from 'clsx';
 import { AvatarProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Avatar.module.css';
 
 /** @public */
 export const Avatar = forwardRef<
@@ -33,12 +34,17 @@ export const Avatar = forwardRef<
   return (
     <AvatarPrimitive.Root
       ref={ref}
-      className={clsx(classNames.root, className)}
+      className={clsx(classNames.root, styles[classNames.root], className)}
       data-size={size}
       {...rest}
     >
-      <AvatarPrimitive.Image className={classNames.image} src={src} />
-      <AvatarPrimitive.Fallback className={classNames.fallback}>
+      <AvatarPrimitive.Image
+        className={clsx(classNames.image, styles[classNames.image])}
+        src={src}
+      />
+      <AvatarPrimitive.Fallback
+        className={clsx(classNames.fallback, styles[classNames.fallback])}
+      >
         {(name || '')
           .split(' ')
           .map(word => word[0])
diff --git a/packages/ui/src/components/Box/styles.css b/packages/ui/src/components/Box/Box.module.css
similarity index 100%
rename from packages/ui/src/components/Box/styles.css
rename to packages/ui/src/components/Box/Box.module.css
diff --git a/packages/ui/src/components/Box/Box.tsx b/packages/ui/src/components/Box/Box.tsx
index 2bb4e3cd15..fdcee3d382 100644
--- a/packages/ui/src/components/Box/Box.tsx
+++ b/packages/ui/src/components/Box/Box.tsx
@@ -18,6 +18,7 @@ import { createElement, forwardRef } from 'react';
 import { BoxProps } from './types';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Box.module.css';
 
 /** @public */
 export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
@@ -32,7 +33,12 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
     as,
     {
       ref,
-      className: clsx(classNames.root, utilityClasses, className),
+      className: clsx(
+        classNames.root,
+        styles[classNames.root],
+        utilityClasses,
+        className,
+      ),
       style,
       ...rest,
     },
diff --git a/packages/ui/src/components/Button/styles.css b/packages/ui/src/components/Button/Button.module.css
similarity index 100%
rename from packages/ui/src/components/Button/styles.css
rename to packages/ui/src/components/Button/Button.module.css
diff --git a/packages/ui/src/components/Button/Button.tsx b/packages/ui/src/components/Button/Button.tsx
index 610f29b9b0..d22a3036e6 100644
--- a/packages/ui/src/components/Button/Button.tsx
+++ b/packages/ui/src/components/Button/Button.tsx
@@ -19,6 +19,7 @@ import { forwardRef, Ref } from 'react';
 import { Button as RAButton } from 'react-aria-components';
 import type { ButtonProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Button.module.css';
 
 /** @public */
 export const Button = forwardRef(
@@ -33,7 +34,7 @@ export const Button = forwardRef(
 
     return (
       <RAButton
-        className={clsx(classNames.root, className)}
+        className={clsx(classNames.root, styles[classNames.root], className)}
         ref={ref}
         {...dataAttributes}
         {...rest}
diff --git a/packages/ui/src/components/ButtonIcon/styles.css b/packages/ui/src/components/ButtonIcon/ButtonIcon.module.css
similarity index 100%
rename from packages/ui/src/components/ButtonIcon/styles.css
rename to packages/ui/src/components/ButtonIcon/ButtonIcon.module.css
diff --git a/packages/ui/src/components/ButtonIcon/ButtonIcon.tsx b/packages/ui/src/components/ButtonIcon/ButtonIcon.tsx
index 19ed2de3f3..2e6a96c4c1 100644
--- a/packages/ui/src/components/ButtonIcon/ButtonIcon.tsx
+++ b/packages/ui/src/components/ButtonIcon/ButtonIcon.tsx
@@ -19,6 +19,8 @@ import { forwardRef, Ref } from 'react';
 import { Button as RAButton } from 'react-aria-components';
 import type { ButtonIconProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
+import stylesButtonIcon from './ButtonIcon.module.css';
+import stylesButton from '../Button/Button.module.css';
 
 /** @public */
 export const ButtonIcon = forwardRef(
@@ -35,7 +37,13 @@ export const ButtonIcon = forwardRef(
 
     return (
       <RAButton
-        className={clsx(classNames.root, classNamesButtonIcon.root, className)}
+        className={clsx(
+          classNames.root,
+          classNamesButtonIcon.root,
+          stylesButton[classNames.root],
+          stylesButtonIcon[classNamesButtonIcon.root],
+          className,
+        )}
         ref={ref}
         {...dataAttributes}
         {...rest}
diff --git a/packages/ui/src/components/ButtonLink/ButtonLink.tsx b/packages/ui/src/components/ButtonLink/ButtonLink.tsx
index 5c621bc057..70d216b3d8 100644
--- a/packages/ui/src/components/ButtonLink/ButtonLink.tsx
+++ b/packages/ui/src/components/ButtonLink/ButtonLink.tsx
@@ -21,6 +21,7 @@ import { useNavigate, useHref } from 'react-router-dom';
 import type { ButtonLinkProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
 import { isExternalLink } from '../../utils/isExternalLink';
+import stylesButton from '../Button/Button.module.css';
 
 /** @public */
 export const ButtonLink = forwardRef(
@@ -47,6 +48,7 @@ export const ButtonLink = forwardRef(
           className={clsx(
             classNames.root,
             classNamesButtonLink.root,
+            stylesButton[classNames.root],
             className,
           )}
           ref={ref}
@@ -68,6 +70,7 @@ export const ButtonLink = forwardRef(
           className={clsx(
             classNames.root,
             classNamesButtonLink.root,
+            stylesButton[classNames.root],
             className,
           )}
           ref={ref}
diff --git a/packages/ui/src/components/Card/Card.styles.css b/packages/ui/src/components/Card/Card.module.css
similarity index 100%
rename from packages/ui/src/components/Card/Card.styles.css
rename to packages/ui/src/components/Card/Card.module.css
diff --git a/packages/ui/src/components/Card/Card.tsx b/packages/ui/src/components/Card/Card.tsx
index 7af09d3ec2..715666e53d 100644
--- a/packages/ui/src/components/Card/Card.tsx
+++ b/packages/ui/src/components/Card/Card.tsx
@@ -24,6 +24,7 @@ import type {
   CardBodyProps,
   CardFooterProps,
 } from './types';
+import styles from './Card.module.css';
 
 /**
  * Card component.
@@ -35,7 +36,11 @@ export const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
   const { classNames } = useStyles('Card');
 
   return (
-    <div ref={ref} className={clsx(classNames.root, className)} {...rest} />
+    <div
+      ref={ref}
+      className={clsx(classNames.root, styles[classNames.root], className)}
+      {...rest}
+    />
   );
 });
 
@@ -50,7 +55,15 @@ export const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
     const { classNames } = useStyles('Card');
 
     return (
-      <div ref={ref} className={clsx(classNames.header, className)} {...rest} />
+      <div
+        ref={ref}
+        className={clsx(
+          classNames.header,
+          styles[classNames.header],
+          className,
+        )}
+        {...rest}
+      />
     );
   },
 );
@@ -68,7 +81,7 @@ export const CardBody = forwardRef<HTMLDivElement, CardBodyProps>(
     return (
       <ScrollArea.Root
         ref={ref}
-        className={clsx(classNames.body, className)}
+        className={clsx(classNames.body, styles[classNames.body], className)}
         {...rest}
       >
         <ScrollArea.Viewport style={{ paddingInline: 'var(--bui-space-3)' }}>
@@ -96,7 +109,15 @@ export const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
     const { classNames } = useStyles('Card');
 
     return (
-      <div ref={ref} className={clsx(classNames.footer, className)} {...rest} />
+      <div
+        ref={ref}
+        className={clsx(
+          classNames.footer,
+          styles[classNames.footer],
+          className,
+        )}
+        {...rest}
+      />
     );
   },
 );
diff --git a/packages/ui/src/components/Checkbox/styles.css b/packages/ui/src/components/Checkbox/Checkbox.module.css
similarity index 100%
rename from packages/ui/src/components/Checkbox/styles.css
rename to packages/ui/src/components/Checkbox/Checkbox.module.css
diff --git a/packages/ui/src/components/Checkbox/Checkbox.tsx b/packages/ui/src/components/Checkbox/Checkbox.tsx
index 51f1fad4de..a2e22fb9e8 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.tsx
+++ b/packages/ui/src/components/Checkbox/Checkbox.tsx
@@ -20,6 +20,7 @@ import { Icon } from '../..';
 import type { CheckboxProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
 import clsx from 'clsx';
+import styles from './Checkbox.module.css';
 
 /** @public */
 export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
@@ -41,7 +42,7 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
     const checkboxElement = (
       <CheckboxPrimitive.Root
         ref={ref}
-        className={clsx(classNames.root, className)}
+        className={clsx(classNames.root, styles[classNames.root], className)}
         checked={checked}
         onCheckedChange={onChange}
         disabled={disabled}
@@ -50,14 +51,16 @@ export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(
         value={value}
         style={style}
       >
-        <CheckboxPrimitive.Indicator className={classNames.indicator}>
+        <CheckboxPrimitive.Indicator
+          className={clsx(classNames.indicator, styles[classNames.indicator])}
+        >
           <Icon name="check" size={12} />
         </CheckboxPrimitive.Indicator>
       </CheckboxPrimitive.Root>
     );
 
     return label ? (
-      <label className={classNames.label}>
+      <label className={clsx(classNames.label, styles[classNames.label])}>
         {checkboxElement}
         {label}
       </label>
diff --git a/packages/ui/src/components/Collapsible/Collapsible.styles.css b/packages/ui/src/components/Collapsible/Collapsible.module.css
similarity index 100%
rename from packages/ui/src/components/Collapsible/Collapsible.styles.css
rename to packages/ui/src/components/Collapsible/Collapsible.module.css
diff --git a/packages/ui/src/components/Collapsible/Collapsible.tsx b/packages/ui/src/components/Collapsible/Collapsible.tsx
index 64d55bdffc..e132de09a9 100644
--- a/packages/ui/src/components/Collapsible/Collapsible.tsx
+++ b/packages/ui/src/components/Collapsible/Collapsible.tsx
@@ -18,6 +18,7 @@ import { forwardRef } from 'react';
 import { Collapsible as CollapsiblePrimitive } from '@base-ui-components/react/collapsible';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Collapsible.module.css';
 
 const CollapsibleRoot = forwardRef<
   React.ElementRef<typeof CollapsiblePrimitive.Root>,
@@ -28,7 +29,7 @@ const CollapsibleRoot = forwardRef<
   return (
     <CollapsiblePrimitive.Root
       ref={ref}
-      className={clsx(classNames.root, className)}
+      className={clsx(classNames.root, styles[classNames.root], className)}
       {...props}
     />
   );
@@ -44,7 +45,11 @@ const CollapsibleTrigger = forwardRef<
   return (
     <CollapsiblePrimitive.Trigger
       ref={ref}
-      className={clsx(classNames.trigger, className)}
+      className={clsx(
+        classNames.trigger,
+        styles[classNames.trigger],
+        className,
+      )}
       {...props}
     />
   );
@@ -60,7 +65,7 @@ const CollapsiblePanel = forwardRef<
   return (
     <CollapsiblePrimitive.Panel
       ref={ref}
-      className={clsx(classNames.panel, className)}
+      className={clsx(classNames.panel, styles[classNames.panel], className)}
       {...props}
     />
   );
diff --git a/packages/ui/src/components/Container/styles.css b/packages/ui/src/components/Container/Container.module.css
similarity index 100%
rename from packages/ui/src/components/Container/styles.css
rename to packages/ui/src/components/Container/Container.module.css
diff --git a/packages/ui/src/components/Container/Container.tsx b/packages/ui/src/components/Container/Container.tsx
index f313f95eaa..9b15cd162e 100644
--- a/packages/ui/src/components/Container/Container.tsx
+++ b/packages/ui/src/components/Container/Container.tsx
@@ -18,6 +18,7 @@ import { forwardRef } from 'react';
 import { ContainerProps } from './types';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Container.module.css';
 
 /** @public */
 export const Container = forwardRef<HTMLDivElement, ContainerProps>(
@@ -32,7 +33,12 @@ export const Container = forwardRef<HTMLDivElement, ContainerProps>(
     return (
       <div
         ref={ref}
-        className={clsx(classNames.root, utilityClasses, className)}
+        className={clsx(
+          classNames.root,
+          utilityClasses,
+          styles[classNames.root],
+          className,
+        )}
         style={style}
         {...rest}
       />
diff --git a/packages/ui/src/components/Dialog/Dialog.module.css b/packages/ui/src/components/Dialog/Dialog.module.css
new file mode 100644
index 0000000000..a8c90f9039
--- /dev/null
+++ b/packages/ui/src/components/Dialog/Dialog.module.css
@@ -0,0 +1,139 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@layer components {
+  .bui-DialogOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(232, 232, 232, 0.8);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  [data-theme='dark'] .bui-Dialog {
+    background: rgba(0, 0, 0, 0.5);
+  }
+
+  .bui-DialogOverlay[data-entering] {
+    animation: fade-in 200ms ease-out forwards;
+  }
+
+  .bui-DialogOverlay[data-exiting] {
+    animation: fade-out 150ms ease-out forwards;
+  }
+
+  .bui-Dialog {
+    background: var(--bui-bg-surface-1);
+    border-radius: 0.5rem;
+    border: 1px solid var(--bui-border);
+    color: var(--bui-fg-primary);
+    position: relative;
+    width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));
+    max-width: calc(100vw - 3rem);
+    height: min(var(--bui-dialog-min-height, auto), calc(100vh - 3rem));
+    max-height: calc(100vh - 3rem);
+    display: flex;
+    flex-direction: column;
+    outline: none;
+  }
+
+  /* Dialog entering animation */
+  .bui-DialogOverlay[data-entering] .bui-Dialog {
+    animation: dialog-enter 150ms ease-out forwards;
+  }
+
+  /* Dialog exiting animation */
+  .bui-DialogOverlay[data-exiting] .bui-Dialog {
+    animation: dialog-exit 150ms ease-out forwards;
+  }
+
+  .bui-DialogHeader {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-inline: var(--bui-space-3);
+    padding-block: var(--bui-space-2);
+    border-bottom: 1px solid var(--bui-border);
+  }
+
+  .bui-DialogHeaderTitle {
+    font-size: var(--bui-font-size-3);
+    font-weight: var(--bui-font-weight-bold);
+    margin: 0;
+  }
+
+  .bui-DialogFooter {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: var(--bui-space-2);
+    padding-inline: var(--bui-space-3);
+    padding-block: var(--bui-space-3);
+    border-top: 1px solid var(--bui-border);
+  }
+
+  .bui-DialogBody {
+    padding: var(--bui-space-3);
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  /* Keyframe animations */
+  @keyframes fade-in {
+    from {
+      opacity: 0;
+    }
+    to {
+      opacity: 1;
+    }
+  }
+
+  @keyframes fade-out {
+    from {
+      opacity: 1;
+    }
+    to {
+      opacity: 0;
+    }
+  }
+
+  @keyframes dialog-enter {
+    from {
+      opacity: 0.5;
+      transform: scale(0.8);
+    }
+    to {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  @keyframes dialog-exit {
+    from {
+      opacity: 1;
+      transform: scale(1);
+    }
+    to {
+      opacity: 0;
+      transform: scale(0.95);
+    }
+  }
+}
diff --git a/packages/ui/src/components/Dialog/Dialog.styles.css b/packages/ui/src/components/Dialog/Dialog.styles.css
deleted file mode 100644
index 9a2ffc52ca..0000000000
--- a/packages/ui/src/components/Dialog/Dialog.styles.css
+++ /dev/null
@@ -1,122 +0,0 @@
-/* Backdrop */
-.bui-DialogOverlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background: rgba(232, 232, 232, 0.8);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-[data-theme='dark'] .bui-Dialog {
-  background: rgba(0, 0, 0, 0.5);
-}
-
-.bui-DialogOverlay[data-entering] {
-  animation: fade-in 200ms ease-out forwards;
-}
-
-.bui-DialogOverlay[data-exiting] {
-  animation: fade-out 150ms ease-out forwards;
-}
-
-.bui-Dialog {
-  background: var(--bui-bg-surface-1);
-  border-radius: 0.5rem;
-  border: 1px solid var(--bui-border);
-  color: var(--bui-fg-primary);
-  position: relative;
-  width: min(var(--bui-dialog-min-width, 400px), calc(100vw - 3rem));
-  max-width: calc(100vw - 3rem);
-  height: min(var(--bui-dialog-min-height, auto), calc(100vh - 3rem));
-  max-height: calc(100vh - 3rem);
-  display: flex;
-  flex-direction: column;
-  outline: none;
-}
-
-/* Dialog entering animation */
-.bui-DialogOverlay[data-entering] .bui-Dialog {
-  animation: dialog-enter 150ms ease-out forwards;
-}
-
-/* Dialog exiting animation */
-.bui-DialogOverlay[data-exiting] .bui-Dialog {
-  animation: dialog-exit 150ms ease-out forwards;
-}
-
-.bui-DialogHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding-inline: var(--bui-space-3);
-  padding-block: var(--bui-space-2);
-  border-bottom: 1px solid var(--bui-border);
-}
-
-.bui-DialogHeaderTitle {
-  font-size: var(--bui-font-size-3);
-  font-weight: var(--bui-font-weight-bold);
-  margin: 0;
-}
-
-.bui-DialogFooter {
-  display: flex;
-  align-items: center;
-  justify-content: end;
-  gap: var(--bui-space-2);
-  padding-inline: var(--bui-space-3);
-  padding-block: var(--bui-space-3);
-  border-top: 1px solid var(--bui-border);
-}
-
-.bui-DialogBody {
-  padding: var(--bui-space-3);
-  flex: 1;
-  overflow-y: auto;
-}
-
-/* Keyframe animations */
-@keyframes fade-in {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes dialog-enter {
-  from {
-    opacity: 0.5;
-    transform: scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes dialog-exit {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95);
-  }
-}
diff --git a/packages/ui/src/components/Dialog/Dialog.tsx b/packages/ui/src/components/Dialog/Dialog.tsx
index 49eeac1508..543c3fe94e 100644
--- a/packages/ui/src/components/Dialog/Dialog.tsx
+++ b/packages/ui/src/components/Dialog/Dialog.tsx
@@ -28,11 +28,11 @@ import type {
   DialogProps,
   DialogBodyProps,
 } from './types';
-import './Dialog.styles.css';
 import { RiCloseLine } from '@remixicon/react';
 import { Button } from '../Button';
 import { useStyles } from '../../hooks/useStyles';
 import { Flex } from '../Flex';
+import styles from './Dialog.module.css';
 
 /** @public */
 export const DialogTrigger = (props: DialogTriggerProps) => {
@@ -47,13 +47,17 @@ export const Dialog = forwardRef<React.ElementRef<typeof Modal>, DialogProps>(
     return (
       <Modal
         ref={ref}
-        className={clsx(classNames.overlay)}
+        className={clsx(classNames.overlay, styles[classNames.overlay])}
         isDismissable
         isKeyboardDismissDisabled={false}
         {...props}
       >
         <RADialog
-          className={clsx(classNames.dialog, className)}
+          className={clsx(
+            classNames.dialog,
+            styles[classNames.dialog],
+            className,
+          )}
           style={{
             ['--bui-dialog-min-width' as keyof React.CSSProperties]:
               typeof width === 'number' ? `${width}px` : width || '400px',
@@ -82,8 +86,15 @@ export const DialogHeader = forwardRef<
   const { classNames } = useStyles('Dialog');
 
   return (
-    <Flex ref={ref} className={clsx(classNames.header, className)} {...props}>
-      <Heading slot="title" className={classNames.headerTitle}>
+    <Flex
+      ref={ref}
+      className={clsx(classNames.header, styles[classNames.header], className)}
+      {...props}
+    >
+      <Heading
+        slot="title"
+        className={clsx(classNames.headerTitle, styles[classNames.headerTitle])}
+      >
         {children}
       </Heading>
       <Button name="close" aria-label="Close" variant="tertiary" slot="close">
@@ -100,7 +111,11 @@ export const DialogBody = forwardRef<React.ElementRef<'div'>, DialogBodyProps>(
     const { classNames } = useStyles('Dialog');
 
     return (
-      <div className={clsx(classNames.body, className)} ref={ref} {...props}>
+      <div
+        className={clsx(classNames.body, styles[classNames.body], className)}
+        ref={ref}
+        {...props}
+      >
         {children}
       </div>
     );
@@ -117,7 +132,11 @@ export const DialogFooter = forwardRef<
   const { classNames } = useStyles('Dialog');
 
   return (
-    <div ref={ref} className={clsx(classNames.footer, className)} {...props}>
+    <div
+      ref={ref}
+      className={clsx(classNames.footer, styles[classNames.footer], className)}
+      {...props}
+    >
       {children}
     </div>
   );
diff --git a/packages/ui/src/components/FieldError/FieldError.styles.css b/packages/ui/src/components/FieldError/FieldError.module.css
similarity index 100%
rename from packages/ui/src/components/FieldError/FieldError.styles.css
rename to packages/ui/src/components/FieldError/FieldError.module.css
diff --git a/packages/ui/src/components/FieldError/FieldError.tsx b/packages/ui/src/components/FieldError/FieldError.tsx
index f216cd6bb8..7d74a6da71 100644
--- a/packages/ui/src/components/FieldError/FieldError.tsx
+++ b/packages/ui/src/components/FieldError/FieldError.tsx
@@ -20,15 +20,19 @@ import {
   type FieldErrorProps,
 } from 'react-aria-components';
 import clsx from 'clsx';
+import styles from './FieldError.module.css';
+import { useStyles } from '../../hooks/useStyles';
 
 /** @public */
 export const FieldError = forwardRef<HTMLDivElement, FieldErrorProps>(
   (props: FieldErrorProps, ref) => {
     const { className, ...rest } = props;
 
+    const { classNames } = useStyles('FieldError');
+
     return (
       <AriaFieldError
-        className={clsx('bui-FieldError', className)}
+        className={clsx(classNames.root, styles[classNames.root], className)}
         ref={ref}
         {...rest}
       />
diff --git a/packages/ui/src/components/FieldLabel/FieldLabel.styles.css b/packages/ui/src/components/FieldLabel/FieldLabel.module.css
similarity index 100%
rename from packages/ui/src/components/FieldLabel/FieldLabel.styles.css
rename to packages/ui/src/components/FieldLabel/FieldLabel.module.css
diff --git a/packages/ui/src/components/FieldLabel/FieldLabel.tsx b/packages/ui/src/components/FieldLabel/FieldLabel.tsx
index df0735389a..a93eba20b5 100644
--- a/packages/ui/src/components/FieldLabel/FieldLabel.tsx
+++ b/packages/ui/src/components/FieldLabel/FieldLabel.tsx
@@ -17,6 +17,8 @@ import { Label } from 'react-aria-components';
 import { forwardRef } from 'react';
 import type { FieldLabelProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './FieldLabel.module.css';
+import clsx from 'clsx';
 
 /** @public */
 export const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(
@@ -28,19 +30,40 @@ export const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(
     if (!label) return null;
 
     return (
-      <div className={classNames.root} {...rest} ref={ref}>
+      <div
+        className={clsx(classNames.root, styles[classNames.root])}
+        {...rest}
+        ref={ref}
+      >
         {label && (
-          <Label className={classNames.label} htmlFor={htmlFor} id={id}>
+          <Label
+            className={clsx(classNames.label, styles[classNames.label])}
+            htmlFor={htmlFor}
+            id={id}
+          >
             {label}
             {secondaryLabel && (
-              <span aria-hidden="true" className={classNames.secondaryLabel}>
+              <span
+                aria-hidden="true"
+                className={clsx(
+                  classNames.secondaryLabel,
+                  styles[classNames.secondaryLabel],
+                )}
+              >
                 ({secondaryLabel})
               </span>
             )}
           </Label>
         )}
         {description && (
-          <div className={classNames.description}>{description}</div>
+          <div
+            className={clsx(
+              classNames.description,
+              styles[classNames.description],
+            )}
+          >
+            {description}
+          </div>
         )}
       </div>
     );
diff --git a/packages/ui/src/components/Flex/styles.css b/packages/ui/src/components/Flex/Flex.module.css
similarity index 100%
rename from packages/ui/src/components/Flex/styles.css
rename to packages/ui/src/components/Flex/Flex.module.css
diff --git a/packages/ui/src/components/Flex/Flex.tsx b/packages/ui/src/components/Flex/Flex.tsx
index b1f5913c06..27564539bd 100644
--- a/packages/ui/src/components/Flex/Flex.tsx
+++ b/packages/ui/src/components/Flex/Flex.tsx
@@ -18,6 +18,7 @@ import { forwardRef } from 'react';
 import { FlexProps } from './types';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Flex.module.css';
 
 /** @public */
 export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
@@ -31,7 +32,12 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
   return (
     <div
       ref={ref}
-      className={clsx(classNames.root, utilityClasses, className)}
+      className={clsx(
+        classNames.root,
+        utilityClasses,
+        styles[classNames.root],
+        className,
+      )}
       style={style}
       {...rest}
     />
diff --git a/packages/ui/src/components/Grid/styles.css b/packages/ui/src/components/Grid/Grid.module.css
similarity index 100%
rename from packages/ui/src/components/Grid/styles.css
rename to packages/ui/src/components/Grid/Grid.module.css
diff --git a/packages/ui/src/components/Grid/Grid.tsx b/packages/ui/src/components/Grid/Grid.tsx
index 6ef72e381b..61cd2fb7c7 100644
--- a/packages/ui/src/components/Grid/Grid.tsx
+++ b/packages/ui/src/components/Grid/Grid.tsx
@@ -18,6 +18,7 @@ import { forwardRef } from 'react';
 import clsx from 'clsx';
 import type { GridItemProps, GridProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Grid.module.css';
 
 const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   const { classNames, utilityClasses, style, cleanedProps } = useStyles(
@@ -30,7 +31,12 @@ const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
   return (
     <div
       ref={ref}
-      className={clsx(classNames.root, utilityClasses, className)}
+      className={clsx(
+        classNames.root,
+        utilityClasses,
+        styles[classNames.root],
+        className,
+      )}
       style={style}
       {...rest}
     />
@@ -48,7 +54,12 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
   return (
     <div
       ref={ref}
-      className={clsx(classNames.root, utilityClasses, className)}
+      className={clsx(
+        classNames.root,
+        utilityClasses,
+        styles[classNames.root],
+        className,
+      )}
       style={style}
       {...rest}
     />
diff --git a/packages/ui/src/components/Header/Header.styles.css b/packages/ui/src/components/Header/Header.module.css
similarity index 100%
rename from packages/ui/src/components/Header/Header.styles.css
rename to packages/ui/src/components/Header/Header.module.css
diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx
index 4d17bfa705..b1eca53ce7 100644
--- a/packages/ui/src/components/Header/Header.tsx
+++ b/packages/ui/src/components/Header/Header.tsx
@@ -19,6 +19,8 @@ import { HeaderToolbar } from './HeaderToolbar';
 import { Tabs, TabList, Tab } from '../Tabs';
 import { useStyles } from '../../hooks/useStyles';
 import { type NavigateOptions } from 'react-router-dom';
+import styles from './Header.module.css';
+import clsx from 'clsx';
 
 declare module 'react-aria-components' {
   interface RouterConfig {
@@ -49,7 +51,12 @@ export const Header = (props: HeaderProps) => {
         hasTabs={hasTabs}
       />
       {tabs && (
-        <div className={classNames.tabsWrapper}>
+        <div
+          className={clsx(
+            classNames.tabsWrapper,
+            styles[classNames.tabsWrapper],
+          )}
+        >
           <Tabs onSelectionChange={onTabSelectionChange}>
             <TabList>
               {tabs?.map(tab => (
diff --git a/packages/ui/src/components/Header/HeaderToolbar.tsx b/packages/ui/src/components/Header/HeaderToolbar.tsx
index 6892d04682..3007ae3397 100644
--- a/packages/ui/src/components/Header/HeaderToolbar.tsx
+++ b/packages/ui/src/components/Header/HeaderToolbar.tsx
@@ -21,6 +21,8 @@ import { RiShapesLine } from '@remixicon/react';
 import type { HeaderToolbarProps } from './types';
 import { Text } from '../Text';
 import { useNavigate, useHref } from 'react-router-dom';
+import styles from './Header.module.css';
+import clsx from 'clsx';
 
 /**
  * A component that renders a toolbar.
@@ -39,27 +41,65 @@ export const HeaderToolbar = (props: HeaderToolbarProps) => {
 
   const titleContent = (
     <>
-      <div className={classNames.toolbarIcon}>{icon || <RiShapesLine />}</div>
+      <div
+        className={clsx(classNames.toolbarIcon, styles[classNames.toolbarIcon])}
+      >
+        {icon || <RiShapesLine />}
+      </div>
       <Text variant="body-medium">{title || 'Your plugin'}</Text>
     </>
   );
 
   return (
     <RouterProvider navigate={navigate} useHref={useHref}>
-      <div className={classNames.toolbar} data-has-tabs={hasTabs}>
-        <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>
-          <div className={classNames.toolbarContent} ref={toolbarContentRef}>
+      <div
+        className={clsx(classNames.toolbar, styles[classNames.toolbar])}
+        data-has-tabs={hasTabs}
+      >
+        <div
+          className={clsx(
+            classNames.toolbarWrapper,
+            styles[classNames.toolbarWrapper],
+          )}
+          ref={toolbarWrapperRef}
+        >
+          <div
+            className={clsx(
+              classNames.toolbarContent,
+              styles[classNames.toolbarContent],
+            )}
+            ref={toolbarContentRef}
+          >
             <Text as="h1" variant="body-medium">
               {titleLink ? (
-                <Link className={classNames.toolbarName} href={titleLink}>
+                <Link
+                  className={clsx(
+                    classNames.toolbarName,
+                    styles[classNames.toolbarName],
+                  )}
+                  href={titleLink}
+                >
                   {titleContent}
                 </Link>
               ) : (
-                <div className={classNames.toolbarName}>{titleContent}</div>
+                <div
+                  className={clsx(
+                    classNames.toolbarName,
+                    styles[classNames.toolbarName],
+                  )}
+                >
+                  {titleContent}
+                </div>
               )}
             </Text>
           </div>
-          <div className={classNames.toolbarControls} ref={toolbarControlsRef}>
+          <div
+            className={clsx(
+              classNames.toolbarControls,
+              styles[classNames.toolbarControls],
+            )}
+            ref={toolbarControlsRef}
+          >
             {customActions}
           </div>
         </div>
diff --git a/packages/ui/src/components/HeaderPage/HeaderPage.styles.css b/packages/ui/src/components/HeaderPage/HeaderPage.module.css
similarity index 100%
rename from packages/ui/src/components/HeaderPage/HeaderPage.styles.css
rename to packages/ui/src/components/HeaderPage/HeaderPage.module.css
diff --git a/packages/ui/src/components/HeaderPage/HeaderPage.tsx b/packages/ui/src/components/HeaderPage/HeaderPage.tsx
index 80050815fd..2ca1f17378 100644
--- a/packages/ui/src/components/HeaderPage/HeaderPage.tsx
+++ b/packages/ui/src/components/HeaderPage/HeaderPage.tsx
@@ -22,6 +22,8 @@ import { useStyles } from '../../hooks/useStyles';
 import { Container } from '../Container';
 import { Link } from '../Link';
 import { Fragment } from 'react/jsx-runtime';
+import styles from './HeaderPage.module.css';
+import clsx from 'clsx';
 
 /**
  * A component that renders a header page.
@@ -33,9 +35,14 @@ export const HeaderPage = (props: HeaderPageProps) => {
   const { classNames } = useStyles('HeaderPage');
 
   return (
-    <Container className={classNames.root}>
-      <div className={classNames.content}>
-        <div className={classNames.breadcrumbs}>
+    <Container className={clsx(classNames.root, styles[classNames.root])}>
+      <div className={clsx(classNames.content, styles[classNames.content])}>
+        <div
+          className={clsx(
+            classNames.breadcrumbs,
+            styles[classNames.breadcrumbs],
+          )}
+        >
           {breadcrumbs &&
             breadcrumbs.map(breadcrumb => (
               <Fragment key={breadcrumb.label}>
@@ -56,10 +63,17 @@ export const HeaderPage = (props: HeaderPageProps) => {
             {title}
           </Text>
         </div>
-        <div className={classNames.controls}>{customActions}</div>
+        <div className={clsx(classNames.controls, styles[classNames.controls])}>
+          {customActions}
+        </div>
       </div>
       {tabs && (
-        <div className={classNames.tabsWrapper}>
+        <div
+          className={clsx(
+            classNames.tabsWrapper,
+            styles[classNames.tabsWrapper],
+          )}
+        >
           <Tabs>
             <TabList>
               {tabs.map(tab => (
diff --git a/packages/ui/src/components/Icon/styles.css b/packages/ui/src/components/Icon/Icon.module.css
similarity index 100%
rename from packages/ui/src/components/Icon/styles.css
rename to packages/ui/src/components/Icon/Icon.module.css
diff --git a/packages/ui/src/components/Icon/Icon.tsx b/packages/ui/src/components/Icon/Icon.tsx
index 6f1e3d9c72..bdadefc1d5 100644
--- a/packages/ui/src/components/Icon/Icon.tsx
+++ b/packages/ui/src/components/Icon/Icon.tsx
@@ -19,6 +19,7 @@ import { useIcons } from './context';
 import type { IconProps } from './types';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Icon.module.css';
 
 /** @public */
 export const Icon = (props: IconProps) => {
@@ -36,7 +37,7 @@ export const Icon = (props: IconProps) => {
 
   return (
     <BckstageIcon
-      className={clsx(classNames.root, className)}
+      className={clsx(classNames.root, styles[classNames.root], className)}
       style={{
         ...(size ? { width: size, height: size } : {}),
         ...style,
diff --git a/packages/ui/src/components/Link/styles.css b/packages/ui/src/components/Link/Link.module.css
similarity index 100%
rename from packages/ui/src/components/Link/styles.css
rename to packages/ui/src/components/Link/Link.module.css
diff --git a/packages/ui/src/components/Link/Link.tsx b/packages/ui/src/components/Link/Link.tsx
index cf2686ba81..bfccd6a8b6 100644
--- a/packages/ui/src/components/Link/Link.tsx
+++ b/packages/ui/src/components/Link/Link.tsx
@@ -21,6 +21,8 @@ import { useStyles } from '../../hooks/useStyles';
 import type { LinkProps } from './types';
 import { useNavigate, useHref } from 'react-router-dom';
 import { isExternalLink } from '../../utils/isExternalLink';
+import stylesLink from './Link.module.css';
+import stylesText from '../Text/Text.module.css';
 
 /** @public */
 export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
@@ -50,7 +52,13 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
     return (
       <AriaLink
         ref={ref}
-        className={clsx(textClassNames.root, linkClassNames.root, className)}
+        className={clsx(
+          textClassNames.root,
+          linkClassNames.root,
+          stylesText[textClassNames.root],
+          stylesLink[linkClassNames.root],
+          className,
+        )}
         data-truncate={truncate}
         href={href}
         {...textDataAttributes}
@@ -64,7 +72,13 @@ export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
     <RouterProvider navigate={navigate} useHref={useHref}>
       <AriaLink
         ref={ref}
-        className={clsx(textClassNames.root, linkClassNames.root, className)}
+        className={clsx(
+          textClassNames.root,
+          linkClassNames.root,
+          stylesText[textClassNames.root],
+          stylesLink[linkClassNames.root],
+          className,
+        )}
         data-truncate={truncate}
         {...textDataAttributes}
         href={href}
diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css
new file mode 100644
index 0000000000..ab733edb5b
--- /dev/null
+++ b/packages/ui/src/components/Menu/Menu.module.css
@@ -0,0 +1,268 @@
+/*
+ * Copyright 2025 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+@layer components {
+  .bui-MenuPopover {
+    display: flex;
+    flex-direction: column;
+    border: 1px solid var(--bui-border);
+    border-radius: var(--bui-radius-2);
+    background: var(--bui-bg-surface-1);
+    color: var(--bui-fg-primary);
+    outline: none;
+    transition: transform 200ms, opacity 200ms;
+    /* Let React Aria handle height constraints naturally */
+    min-height: 0;
+    /* Remove overflow from popover since ScrollArea will handle it */
+    overflow: hidden;
+
+    &[data-entering],
+    &[data-exiting] {
+      transform: var(--origin);
+      opacity: 0;
+    }
+
+    &[data-placement='top'] {
+      --origin: translateY(8px);
+    }
+
+    &[data-placement='bottom'] {
+      --origin: translateY(-8px);
+    }
+
+    &[data-placement='right'] {
+      --origin: translateX(-8px);
+    }
+
+    &[data-placement='left'] {
+      --origin: translateX(8px);
+    }
+  }
+
+  .bui-MenuContent {
+    max-height: inherit;
+    box-sizing: border-box;
+    overflow: auto;
+    min-width: 150px;
+    box-sizing: border-box;
+    outline: none;
+    padding-block: var(--bui-space-1);
+  }
+
+  /* Ensure ScrollArea works properly within MenuRA popover */
+  .bui-MenuPopover .bui-ScrollAreaRoot {
+    /* Take full height of popover */
+    height: 100%;
+    min-height: 0;
+    flex: 1;
+    /* Ensure the root container has proper height constraints */
+    display: flex;
+    flex-direction: column;
+  }
+
+  .bui-MenuPopover .bui-ScrollAreaScrollbar {
+    margin-inline: var(--bui-space-1_5);
+  }
+
+  .bui-MenuItem {
+    padding-inline: var(--bui-space-1);
+    display: block;
+
+    &[data-focused] .bui-MenuItemWrapper {
+      background: var(--bui-bg-surface-2);
+      color: var(--bui-fg-primary);
+    }
+
+    &[data-open] .bui-MenuItemWrapper {
+      background: var(--bui-bg-surface-2);
+      color: var(--bui-fg-primary);
+    }
+
+    &[data-color='danger'] .bui-MenuItemWrapper {
+      color: var(--bui-fg-danger);
+    }
+
+    &[data-color='danger'][data-focused] .bui-MenuItemWrapper {
+      background: var(--bui-bg-danger);
+      color: var(--bui-fg-danger);
+    }
+
+    &[data-has-submenu] {
+      & > .bui-MenuItemWrapper > .bui-MenuItemArrow {
+        display: block;
+      }
+    }
+  }
+
+  .bui-MenuItemWrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 2rem;
+    padding-inline: var(--bui-space-2);
+    border-radius: var(--bui-radius-2);
+    outline: none;
+    cursor: default;
+    color: var(--bui-fg-primary);
+    font-size: var(--bui-font-size-3);
+    gap: var(--bui-space-6);
+  }
+
+  .bui-MenuItemListBox {
+    padding-inline: var(--bui-space-1);
+    display: block;
+
+    &:hover .bui-MenuItemWrapper {
+      background: var(--bui-bg-surface-2);
+      color: var(--bui-fg-primary);
+    }
+
+    &[data-selected] .bui-MenuItemListBoxCheck {
+      & > svg {
+        opacity: 1;
+        color: var(--bui-fg-primary);
+      }
+    }
+  }
+
+  .bui-MenuItemListBoxCheck {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+
+    & > svg {
+      opacity: 0;
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  .bui-MenuItemContent {
+    display: flex;
+    align-items: center;
+    gap: var(--bui-space-2);
+
+    & > svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  .bui-MenuItemArrow {
+    display: none;
+    width: 1rem;
+    height: 1rem;
+
+    & > svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  .bui-MenuSection {
+    &:first-child .bui-MenuSectionHeader {
+      padding-top: 0;
+    }
+  }
+
+  .bui-MenuSectionHeader {
+    height: 2rem;
+    display: flex;
+    align-items: center;
+    padding-top: var(--bui-space-3);
+    padding-left: var(--bui-space-3);
+    color: var(--bui-fg-primary);
+    font-size: var(--bui-font-size-1);
+    font-weight: bold;
+    letter-spacing: 0.05rem;
+    text-transform: uppercase;
+  }
+
+  .bui-MenuSeparator {
+    height: 1px;
+    background: var(--bui-border);
+    margin-inline: var(--bui-space-1_5);
+    margin-block: var(--bui-space-1);
+  }
+
+  .bui-MenuSearchField {
+    position: relative;
+    font-family: var(--bui-font-regular);
+    width: 100%;
+    flex-shrink: 0;
+
+    &[data-empty] {
+      .bui-MenuSearchFieldClear {
+        display: none;
+      }
+    }
+  }
+
+  .bui-MenuSearchFieldInput {
+    display: flex;
+    align-items: center;
+    padding: 0 var(--bui-space-3);
+    border: none;
+    border-bottom: 1px solid var(--bui-border);
+    background-color: var(--bui-bg-surface-1);
+    font-size: var(--bui-font-size-3);
+    font-family: var(--bui-font-regular);
+    font-weight: var(--bui-font-weight-regular);
+    color: var(--bui-fg-primary);
+    width: 100%;
+    height: 2rem;
+    cursor: inherit;
+    outline: none;
+
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration {
+      -webkit-appearance: none;
+    }
+  }
+
+  .bui-MenuSearchFieldClear {
+    position: absolute;
+    right: var(--bui-space-2);
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    cursor: pointer;
+    color: var(--bui-fg-secondary);
+    transition: color 0.2s ease-in-out;
+
+    & > svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  .bui-MenuEmptyState {
+    padding-inline: var(--bui-space-3);
+    padding-block: var(--bui-space-2);
+    color: var(--bui-fg-secondary);
+    font-size: var(--bui-font-size-3);
+    font-family: var(--bui-font-regular);
+    font-weight: var(--bui-font-weight-regular);
+  }
+}
diff --git a/packages/ui/src/components/Menu/Menu.styles.css b/packages/ui/src/components/Menu/Menu.styles.css
deleted file mode 100644
index 1e930e95b6..0000000000
--- a/packages/ui/src/components/Menu/Menu.styles.css
+++ /dev/null
@@ -1,266 +0,0 @@
-/*
- * Copyright 2025 The Backstage Authors
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-.bui-MenuPopover {
-  display: flex;
-  flex-direction: column;
-  border: 1px solid var(--bui-border);
-  border-radius: var(--bui-radius-2);
-  background: var(--bui-bg-surface-1);
-  color: var(--bui-fg-primary);
-  outline: none;
-  transition: transform 200ms, opacity 200ms;
-  /* Let React Aria handle height constraints naturally */
-  min-height: 0;
-  /* Remove overflow from popover since ScrollArea will handle it */
-  overflow: hidden;
-
-  &[data-entering],
-  &[data-exiting] {
-    transform: var(--origin);
-    opacity: 0;
-  }
-
-  &[data-placement='top'] {
-    --origin: translateY(8px);
-  }
-
-  &[data-placement='bottom'] {
-    --origin: translateY(-8px);
-  }
-
-  &[data-placement='right'] {
-    --origin: translateX(-8px);
-  }
-
-  &[data-placement='left'] {
-    --origin: translateX(8px);
-  }
-}
-
-.bui-MenuContent {
-  max-height: inherit;
-  box-sizing: border-box;
-  overflow: auto;
-  min-width: 150px;
-  box-sizing: border-box;
-  outline: none;
-  padding-block: var(--bui-space-1);
-}
-
-/* Ensure ScrollArea works properly within MenuRA popover */
-.bui-MenuPopover .bui-ScrollAreaRoot {
-  /* Take full height of popover */
-  height: 100%;
-  min-height: 0;
-  flex: 1;
-  /* Ensure the root container has proper height constraints */
-  display: flex;
-  flex-direction: column;
-}
-
-.bui-MenuPopover .bui-ScrollAreaScrollbar {
-  margin-inline: var(--bui-space-1_5);
-}
-
-.bui-MenuItem {
-  padding-inline: var(--bui-space-1);
-  display: block;
-
-  &[data-focused] .bui-MenuItemWrapper {
-    background: var(--bui-bg-surface-2);
-    color: var(--bui-fg-primary);
-  }
-
-  &[data-open] .bui-MenuItemWrapper {
-    background: var(--bui-bg-surface-2);
-    color: var(--bui-fg-primary);
-  }
-
-  &[data-color='danger'] .bui-MenuItemWrapper {
-    color: var(--bui-fg-danger);
-  }
-
-  &[data-color='danger'][data-focused] .bui-MenuItemWrapper {
-    background: var(--bui-bg-danger);
-    color: var(--bui-fg-danger);
-  }
-
-  &[data-has-submenu] {
-    & > .bui-MenuItemWrapper > .bui-MenuItemArrow {
-      display: block;
-    }
-  }
-}
-
-.bui-MenuItemWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 2rem;
-  padding-inline: var(--bui-space-2);
-  border-radius: var(--bui-radius-2);
-  outline: none;
-  cursor: default;
-  color: var(--bui-fg-primary);
-  font-size: var(--bui-font-size-3);
-  gap: var(--bui-space-6);
-}
-
-.bui-MenuItemListBox {
-  padding-inline: var(--bui-space-1);
-  display: block;
-
-  &:hover .bui-MenuItemWrapper {
-    background: var(--bui-bg-surface-2);
-    color: var(--bui-fg-primary);
-  }
-
-  &[data-selected] .bui-MenuItemListBoxCheck {
-    & > svg {
-      opacity: 1;
-      color: var(--bui-fg-primary);
-    }
-  }
-}
-
-.bui-MenuItemListBoxCheck {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1rem;
-  height: 1rem;
-
-  & > svg {
-    opacity: 0;
-    width: 1rem;
-    height: 1rem;
-  }
-}
-
-.bui-MenuItemContent {
-  display: flex;
-  align-items: center;
-  gap: var(--bui-space-2);
-
-  & > svg {
-    width: 1rem;
-    height: 1rem;
-  }
-}
-
-.bui-MenuItemArrow {
-  display: none;
-  width: 1rem;
-  height: 1rem;
-
-  & > svg {
-    width: 1rem;
-    height: 1rem;
-  }
-}
-
-.bui-MenuSection {
-  &:first-child .bui-MenuSectionHeader {
-    padding-top: 0;
-  }
-}
-
-.bui-MenuSectionHeader {
-  height: 2rem;
-  display: flex;
-  align-items: center;
-  padding-top: var(--bui-space-3);
-  padding-left: var(--bui-space-3);
-  color: var(--bui-fg-primary);
-  font-size: var(--bui-font-size-1);
-  font-weight: bold;
-  letter-spacing: 0.05rem;
-  text-transform: uppercase;
-}
-
-.bui-MenuSeparator {
-  height: 1px;
-  background: var(--bui-border);
-  margin-inline: var(--bui-space-1_5);
-  margin-block: var(--bui-space-1);
-}
-
-.bui-MenuSearchField {
-  position: relative;
-  font-family: var(--bui-font-regular);
-  width: 100%;
-  flex-shrink: 0;
-
-  &[data-empty] {
-    .bui-MenuSearchFieldClear {
-      display: none;
-    }
-  }
-}
-
-.bui-MenuSearchFieldInput {
-  display: flex;
-  align-items: center;
-  padding: 0 var(--bui-space-3);
-  border: none;
-  border-bottom: 1px solid var(--bui-border);
-  background-color: var(--bui-bg-surface-1);
-  font-size: var(--bui-font-size-3);
-  font-family: var(--bui-font-regular);
-  font-weight: var(--bui-font-weight-regular);
-  color: var(--bui-fg-primary);
-  width: 100%;
-  height: 2rem;
-  cursor: inherit;
-  outline: none;
-
-  &::-webkit-search-cancel-button,
-  &::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-}
-
-.bui-MenuSearchFieldClear {
-  position: absolute;
-  right: var(--bui-space-2);
-  top: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: transparent;
-  border: none;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  color: var(--bui-fg-secondary);
-  transition: color 0.2s ease-in-out;
-
-  & > svg {
-    width: 1rem;
-    height: 1rem;
-  }
-}
-
-.bui-MenuEmptyState {
-  padding-inline: var(--bui-space-3);
-  padding-block: var(--bui-space-2);
-  color: var(--bui-fg-secondary);
-  font-size: var(--bui-font-size-3);
-  font-family: var(--bui-font-regular);
-  font-weight: var(--bui-font-weight-regular);
-}
diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
index 696fb7997e..727fcf3bac 100644
--- a/packages/ui/src/components/Menu/Menu.tsx
+++ b/packages/ui/src/components/Menu/Menu.tsx
@@ -56,6 +56,8 @@ import {
 import { useNavigate, useHref } from 'react-router-dom';
 import { isExternalLink } from '../../utils/isExternalLink';
 import { useRef, useEffect, useContext } from 'react';
+import styles from './Menu.module.css';
+import clsx from 'clsx';
 
 // The height will be used for virtualized menus. It should match the size set in CSS for each menu item.
 const rowHeight = 32;
@@ -63,7 +65,11 @@ const rowHeight = 32;
 const MenuEmptyState = () => {
   const { classNames } = useStyles('Menu');
 
-  return <div className={classNames.emptyState}>No results found.</div>;
+  return (
+    <div className={clsx(classNames.emptyState, styles[classNames.emptyState])}>
+      No results found.
+    </div>
+  );
 };
 
 /** @public */
@@ -118,7 +124,7 @@ export const Menu = (props: MenuProps<object>) => {
 
   const menuContent = (
     <RAMenu
-      className={classNames.content}
+      className={clsx(classNames.content, styles[classNames.content])}
       renderEmptyState={() => <MenuEmptyState />}
       style={{ width: newMaxWidth, maxHeight }}
       {...rest}
@@ -128,7 +134,7 @@ export const Menu = (props: MenuProps<object>) => {
   return (
     <RAPopover
       ref={popoverRef}
-      className={classNames.popover}
+      className={clsx(classNames.popover, styles[classNames.popover])}
       placement={placement}
       isNonModal={true}
       isKeyboardDismissDisabled={false}
@@ -166,7 +172,7 @@ export const MenuListBox = (props: MenuListBoxProps<object>) => {
 
   const listBoxContent = (
     <RAListBox
-      className={classNames.content}
+      className={clsx(classNames.content, styles[classNames.content])}
       selectionMode={selectionMode}
       style={{ width: newMaxWidth, maxHeight }}
       {...rest}
@@ -174,7 +180,10 @@ export const MenuListBox = (props: MenuListBoxProps<object>) => {
   );
 
   return (
-    <RAPopover className={classNames.popover} placement={placement}>
+    <RAPopover
+      className={clsx(classNames.popover, styles[classNames.popover])}
+      placement={placement}
+    >
       {virtualized ? (
         <Virtualizer
           layout={ListLayout}
@@ -207,7 +216,7 @@ export const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {
 
   const menuContent = (
     <RAMenu
-      className={classNames.content}
+      className={clsx(classNames.content, styles[classNames.content])}
       renderEmptyState={() => <MenuEmptyState />}
       style={{ width: newMaxWidth, maxHeight }}
       {...rest}
@@ -215,16 +224,32 @@ export const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {
   );
 
   return (
-    <RAPopover className={classNames.popover} placement={placement}>
+    <RAPopover
+      className={clsx(classNames.popover, styles[classNames.popover])}
+      placement={placement}
+    >
       <RouterProvider navigate={navigate} useHref={useHref}>
         <RAAutocomplete filter={contains}>
-          <RASearchField className={classNames.searchField}>
+          <RASearchField
+            className={clsx(
+              classNames.searchField,
+              styles[classNames.searchField],
+            )}
+          >
             <RAInput
-              className={classNames.searchFieldInput}
+              className={clsx(
+                classNames.searchFieldInput,
+                styles[classNames.searchFieldInput],
+              )}
               aria-label="Search"
               placeholder={props.placeholder || 'Search...'}
             />
-            <RAButton className={classNames.searchFieldClear}>
+            <RAButton
+              className={clsx(
+                classNames.searchFieldClear,
+                styles[classNames.searchFieldClear],
+              )}
+            >
               <RiCloseCircleLine />
             </RAButton>
           </RASearchField>
@@ -264,7 +289,7 @@ export const MenuAutocompleteListbox = (
 
   const listBoxContent = (
     <RAListBox
-      className={classNames.content}
+      className={clsx(classNames.content, styles[classNames.content])}
       renderEmptyState={() => <MenuEmptyState />}
       selectionMode={selectionMode}
       style={{ width: newMaxWidth, maxHeight }}
@@ -273,15 +298,31 @@ export const MenuAutocompleteListbox = (
   );
 
   return (
-    <RAPopover className={classNames.popover} placement={placement}>
+    <RAPopover
+      className={clsx(classNames.popover, styles[classNames.popover])}
+      placement={placement}
+    >
       <RAAutocomplete filter={contains}>
-        <RASearchField className={classNames.searchField}>
+        <RASearchField
+          className={clsx(
+            classNames.searchField,
+            styles[classNames.searchField],
+          )}
+        >
           <RAInput
-            className={classNames.searchFieldInput}
+            className={clsx(
+              classNames.searchFieldInput,
+              styles[classNames.searchFieldInput],
+            )}
             aria-label="Search"
             placeholder={props.placeholder || 'Search...'}
           />
-          <RAButton className={classNames.searchFieldClear}>
+          <RAButton
+            className={clsx(
+              classNames.searchFieldClear,
+              styles[classNames.searchFieldClear],
+            )}
+          >
             <RiCloseCircleLine />
           </RAButton>
         </RASearchField>
@@ -313,18 +354,30 @@ export const MenuItem = (props: MenuItemProps) => {
   if (isLink && isExternal) {
     return (
       <RAMenuItem
-        className={classNames.item}
+        className={clsx(classNames.item, styles[classNames.item])}
         data-color={color}
         textValue={typeof children === 'string' ? children : undefined}
         onAction={() => window.open(href, '_blank', 'noopener,noreferrer')}
         {...rest}
       >
-        <div className={classNames.itemWrapper}>
-          <div className={classNames.itemContent}>
+        <div
+          className={clsx(
+            classNames.itemWrapper,
+            styles[classNames.itemWrapper],
+          )}
+        >
+          <div
+            className={clsx(
+              classNames.itemContent,
+              styles[classNames.itemContent],
+            )}
+          >
             {iconStart}
             {children}
           </div>
-          <div className={classNames.itemArrow}>
+          <div
+            className={clsx(classNames.itemArrow, styles[classNames.itemArrow])}
+          >
             <RiArrowRightSLine />
           </div>
         </div>
@@ -334,18 +387,27 @@ export const MenuItem = (props: MenuItemProps) => {
 
   return (
     <RAMenuItem
-      className={classNames.item}
+      className={clsx(classNames.item, styles[classNames.item])}
       data-color={color}
       href={href}
       textValue={typeof children === 'string' ? children : undefined}
       {...rest}
     >
-      <div className={classNames.itemWrapper}>
-        <div className={classNames.itemContent}>
+      <div
+        className={clsx(classNames.itemWrapper, styles[classNames.itemWrapper])}
+      >
+        <div
+          className={clsx(
+            classNames.itemContent,
+            styles[classNames.itemContent],
+          )}
+        >
           {iconStart}
           {children}
         </div>
-        <div className={classNames.itemArrow}>
+        <div
+          className={clsx(classNames.itemArrow, styles[classNames.itemArrow])}
+        >
           <RiArrowRightSLine />
         </div>
       </div>
@@ -363,12 +425,24 @@ export const MenuListBoxItem = (props: MenuListBoxItemProps) => {
       textValue={
         typeof props.children === 'string' ? props.children : undefined
       }
-      className={classNames.itemListBox}
+      className={clsx(classNames.itemListBox, styles[classNames.itemListBox])}
       {...rest}
     >
-      <div className={classNames.itemWrapper}>
-        <div className={classNames.itemContent}>
-          <div className={classNames.itemListBoxCheck}>
+      <div
+        className={clsx(classNames.itemWrapper, styles[classNames.itemWrapper])}
+      >
+        <div
+          className={clsx(
+            classNames.itemContent,
+            styles[classNames.itemContent],
+          )}
+        >
+          <div
+            className={clsx(
+              classNames.itemListBoxCheck,
+              styles[classNames.itemListBoxCheck],
+            )}
+          >
             <RiCheckLine />
           </div>
           {children}
@@ -383,8 +457,16 @@ export const MenuSection = (props: MenuSectionProps<object>) => {
   const { classNames } = useStyles('Menu');
 
   return (
-    <RAMenuSection className={classNames.section} {...props}>
-      <RAMenuHeader className={classNames.sectionHeader}>
+    <RAMenuSection
+      className={clsx(classNames.section, styles[classNames.section])}
+      {...props}
+    >
+      <RAMenuHeader
+        className={clsx(
+          classNames.sectionHeader,
+          styles[classNames.sectionHeader],
+        )}
+      >
         {props.title}
       </RAMenuHeader>
       {props.children}
@@ -396,5 +478,10 @@ export const MenuSection = (props: MenuSectionProps<object>) => {
 export const MenuSeparator = (props: MenuSeparatorProps) => {
   const { classNames } = useStyles('Menu');
 
-  return <RAMenuSeparator className={classNames.separator} {...props} />;
+  return (
+    <RAMenuSeparator
+      className={clsx(classNames.separator, styles[classNames.separator])}
+      {...props}
+    />
+  );
 };
diff --git a/packages/ui/src/components/PasswordField/PasswordField.styles.css b/packages/ui/src/components/PasswordField/PasswordField.module.css
similarity index 100%
rename from packages/ui/src/components/PasswordField/PasswordField.styles.css
rename to packages/ui/src/components/PasswordField/PasswordField.module.css
diff --git a/packages/ui/src/components/PasswordField/PasswordField.tsx b/packages/ui/src/components/PasswordField/PasswordField.tsx
index 8701d50652..4317a9efab 100644
--- a/packages/ui/src/components/PasswordField/PasswordField.tsx
+++ b/packages/ui/src/components/PasswordField/PasswordField.tsx
@@ -27,6 +27,8 @@ import { FieldError } from '../FieldError';
 import type { PasswordFieldProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
 import { RiEyeLine, RiEyeOffLine } from '@remixicon/react';
+import stylesPasswordField from './PasswordField.module.css';
+import stylesTextField from '../TextField/TextField.module.css';
 
 /** @public */
 export const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(
@@ -76,7 +78,11 @@ export const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(
 
     return (
       <AriaTextField
-        className={clsx(passwordFieldClassNames.root, className)}
+        className={clsx(
+          passwordFieldClassNames.root,
+          stylesPasswordField[passwordFieldClassNames.root],
+          className,
+        )}
         {...dataAttributes}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
@@ -91,19 +97,30 @@ export const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(
           description={description}
         />
         <div
-          className={textFieldClassNames.inputWrapper}
+          className={clsx(
+            textFieldClassNames.inputWrapper,
+            stylesTextField[textFieldClassNames.inputWrapper],
+          )}
           data-size={dataAttributes['data-size']}
         >
           {icon && (
             <div
-              className={textFieldClassNames.inputIcon}
+              className={clsx(
+                textFieldClassNames.inputIcon,
+                stylesTextField[textFieldClassNames.inputIcon],
+              )}
               data-size={dataAttributes['data-size']}
               aria-hidden="true"
             >
               {icon}
             </div>
           )}
-          <div className={textFieldClassNames.inputAction}>
+          <div
+            className={clsx(
+              textFieldClassNames.inputAction,
+              stylesTextField[textFieldClassNames.inputAction],
+            )}
+          >
             <RAButton
               data-size={dataAttributes['data-size']}
               data-variant={'tertiary'}
@@ -111,13 +128,19 @@ export const PasswordField = forwardRef<HTMLDivElement, PasswordFieldProps>(
               aria-controls={isVisible ? 'text' : 'password'}
               aria-expanded={isVisible}
               onPress={() => setIsVisible(v => !v)}
-              className={passwordFieldClassNames.inputVisibility}
+              className={clsx(
+                passwordFieldClassNames.inputVisibility,
+                stylesPasswordField[passwordFieldClassNames.inputVisibility],
+              )}
             >
               {isVisible ? <RiEyeLine /> : <RiEyeOffLine />}
             </RAButton>
           </div>
           <Input
-            className={textFieldClassNames.input}
+            className={clsx(
+              textFieldClassNames.input,
+              stylesTextField[textFieldClassNames.input],
+            )}
             {...(icon && { 'data-icon': true })}
             placeholder={placeholder}
             type={isVisible ? 'text' : 'password'}
diff --git a/packages/ui/src/components/Popover/Popover.styles.css b/packages/ui/src/components/Popover/Popover.module.css
similarity index 100%
rename from packages/ui/src/components/Popover/Popover.styles.css
rename to packages/ui/src/components/Popover/Popover.module.css
diff --git a/packages/ui/src/components/RadioGroup/RadioGroup.styles.css b/packages/ui/src/components/RadioGroup/RadioGroup.module.css
similarity index 100%
rename from packages/ui/src/components/RadioGroup/RadioGroup.styles.css
rename to packages/ui/src/components/RadioGroup/RadioGroup.module.css
diff --git a/packages/ui/src/components/RadioGroup/RadioGroup.tsx b/packages/ui/src/components/RadioGroup/RadioGroup.tsx
index 4363477c1a..1937e3d8f4 100644
--- a/packages/ui/src/components/RadioGroup/RadioGroup.tsx
+++ b/packages/ui/src/components/RadioGroup/RadioGroup.tsx
@@ -23,6 +23,7 @@ import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel';
 import { FieldError } from '../FieldError';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './RadioGroup.module.css';
 
 import type { RadioGroupProps, RadioProps } from './types';
 
@@ -57,7 +58,7 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
 
     return (
       <AriaRadioGroup
-        className={clsx(classNames.root, className)}
+        className={clsx(classNames.root, styles[classNames.root], className)}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
         {...rest}
@@ -68,7 +69,9 @@ export const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
           secondaryLabel={secondaryLabelText}
           description={description}
         />
-        <div className={classNames.content}>{children}</div>
+        <div className={clsx(classNames.content, styles[classNames.content])}>
+          {children}
+        </div>
         <FieldError />
       </AriaRadioGroup>
     );
@@ -85,7 +88,7 @@ export const Radio = forwardRef<HTMLLabelElement, RadioProps>((props, ref) => {
 
   return (
     <AriaRadio
-      className={clsx(classNames.radio, className)}
+      className={clsx(classNames.radio, styles[classNames.radio], className)}
       {...rest}
       ref={ref}
     />
diff --git a/packages/ui/src/components/ScrollArea/ScrollArea.styles.css b/packages/ui/src/components/ScrollArea/ScrollArea.module.css
similarity index 100%
rename from packages/ui/src/components/ScrollArea/ScrollArea.styles.css
rename to packages/ui/src/components/ScrollArea/ScrollArea.module.css
diff --git a/packages/ui/src/components/ScrollArea/ScrollArea.tsx b/packages/ui/src/components/ScrollArea/ScrollArea.tsx
index 44722fbd12..e182ba8c99 100644
--- a/packages/ui/src/components/ScrollArea/ScrollArea.tsx
+++ b/packages/ui/src/components/ScrollArea/ScrollArea.tsx
@@ -18,6 +18,7 @@ import { forwardRef } from 'react';
 import { ScrollArea as ScrollAreaPrimitive } from '@base-ui-components/react/scroll-area';
 import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './ScrollArea.module.css';
 
 const ScrollAreaRoot = forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -28,7 +29,7 @@ const ScrollAreaRoot = forwardRef<
   return (
     <ScrollAreaPrimitive.Root
       ref={ref}
-      className={clsx(classNames.root, className)}
+      className={clsx(classNames.root, styles[classNames.root], className)}
       {...props}
     />
   );
@@ -44,7 +45,11 @@ const ScrollAreaViewport = forwardRef<
   return (
     <ScrollAreaPrimitive.Viewport
       ref={ref}
-      className={clsx(classNames.viewport, className)}
+      className={clsx(
+        classNames.viewport,
+        styles[classNames.viewport],
+        className,
+      )}
       {...props}
     />
   );
@@ -60,7 +65,11 @@ const ScrollAreaScrollbar = forwardRef<
   return (
     <ScrollAreaPrimitive.Scrollbar
       ref={ref}
-      className={clsx(classNames.scrollbar, className)}
+      className={clsx(
+        classNames.scrollbar,
+        styles[classNames.scrollbar],
+        className,
+      )}
       {...props}
     />
   );
@@ -76,7 +85,7 @@ const ScrollAreaThumb = forwardRef<
   return (
     <ScrollAreaPrimitive.Thumb
       ref={ref}
-      className={clsx(classNames.thumb, className)}
+      className={clsx(classNames.thumb, styles[classNames.thumb], className)}
       {...props}
     />
   );
diff --git a/packages/ui/src/components/SearchField/SearchField.styles.css b/packages/ui/src/components/SearchField/SearchField.module.css
similarity index 100%
rename from packages/ui/src/components/SearchField/SearchField.styles.css
rename to packages/ui/src/components/SearchField/SearchField.module.css
diff --git a/packages/ui/src/components/SearchField/SearchField.tsx b/packages/ui/src/components/SearchField/SearchField.tsx
index cb0eb41eda..820ceb42b9 100644
--- a/packages/ui/src/components/SearchField/SearchField.tsx
+++ b/packages/ui/src/components/SearchField/SearchField.tsx
@@ -25,6 +25,8 @@ import { FieldLabel } from '../FieldLabel';
 import { FieldError } from '../FieldError';
 import { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';
 import { useStyles } from '../../hooks/useStyles';
+import stylesSearchField from './SearchField.module.css';
+import stylesTextField from '../TextField/TextField.module.css';
 
 import type { SearchFieldProps } from './types';
 
@@ -102,6 +104,8 @@ export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
         className={clsx(
           textFieldClassNames.root,
           searchFieldClassNames.root,
+          stylesTextField[textFieldClassNames.root],
+          stylesSearchField[searchFieldClassNames.root],
           className,
         )}
         {...dataAttributes}
@@ -120,12 +124,18 @@ export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
           description={description}
         />
         <div
-          className={textFieldClassNames.inputWrapper}
+          className={clsx(
+            textFieldClassNames.inputWrapper,
+            stylesTextField[textFieldClassNames.inputWrapper],
+          )}
           data-size={dataAttributes['data-size']}
         >
           {icon !== false && (
             <div
-              className={textFieldClassNames.inputIcon}
+              className={clsx(
+                textFieldClassNames.inputIcon,
+                stylesTextField[textFieldClassNames.inputIcon],
+              )}
               data-size={dataAttributes['data-size']}
               aria-hidden="true"
             >
@@ -133,12 +143,18 @@ export const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
             </div>
           )}
           <Input
-            className={textFieldClassNames.input}
+            className={clsx(
+              textFieldClassNames.input,
+              stylesTextField[textFieldClassNames.input],
+            )}
             {...(icon !== false && { 'data-icon': true })}
             placeholder={placeholder}
           />
           <Button
-            className={searchFieldClassNames.clear}
+            className={clsx(
+              searchFieldClassNames.clear,
+              stylesSearchField[searchFieldClassNames.clear],
+            )}
             data-size={dataAttributes['data-size']}
           >
             <RiCloseCircleLine />
diff --git a/packages/ui/src/components/Select/Select.styles.css b/packages/ui/src/components/Select/Select.module.css
similarity index 100%
rename from packages/ui/src/components/Select/Select.styles.css
rename to packages/ui/src/components/Select/Select.module.css
diff --git a/packages/ui/src/components/Select/Select.tsx b/packages/ui/src/components/Select/Select.tsx
index f38311b117..7bb9e477e4 100644
--- a/packages/ui/src/components/Select/Select.tsx
+++ b/packages/ui/src/components/Select/Select.tsx
@@ -30,6 +30,8 @@ import { useStyles } from '../../hooks/useStyles';
 import { FieldLabel } from '../FieldLabel';
 import { Icon } from '../Icon';
 import { FieldError } from '../FieldError';
+import styles from './Select.module.css';
+import stylesPopover from '../Popover/Popover.module.css';
 
 /** @public */
 export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
@@ -67,7 +69,7 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
 
   return (
     <AriaSelect
-      className={clsx(classNames.root, className)}
+      className={clsx(classNames.root, styles[classNames.root], className)}
       {...dataAttributes}
       ref={ref}
       aria-label={ariaLabel}
@@ -80,26 +82,44 @@ export const Select = forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
         description={description}
       />
       <Button
-        className={classNames.trigger}
+        className={clsx(classNames.trigger, styles[classNames.trigger])}
         data-size={dataAttributes['data-size']}
       >
         {icon}
-        <SelectValue className={classNames.value} />
+        <SelectValue
+          className={clsx(classNames.value, styles[classNames.value])}
+        />
         <Icon aria-hidden="true" name="chevron-down" />
       </Button>
       <FieldError />
-      <Popover className={popoverClassNames.root}>
-        <ListBox className={classNames.list}>
+      <Popover
+        className={clsx(
+          popoverClassNames.root,
+          stylesPopover[popoverClassNames.root],
+        )}
+      >
+        <ListBox className={clsx(classNames.list, styles[classNames.list])}>
           {options?.map(option => (
             <ListBoxItem
               key={option.value}
               id={option.value}
-              className={classNames.item}
+              className={clsx(classNames.item, styles[classNames.item])}
             >
-              <div className={classNames.itemIndicator}>
+              <div
+                className={clsx(
+                  classNames.itemIndicator,
+                  styles[classNames.itemIndicator],
+                )}
+              >
                 <Icon name="check" />
               </div>
-              <Text slot="label" className={classNames.itemLabel}>
+              <Text
+                slot="label"
+                className={clsx(
+                  classNames.itemLabel,
+                  styles[classNames.itemLabel],
+                )}
+              >
                 {option.label}
               </Text>
             </ListBoxItem>
diff --git a/packages/ui/src/components/Skeleton/Skeleton.styles.css b/packages/ui/src/components/Skeleton/Skeleton.module.css
similarity index 100%
rename from packages/ui/src/components/Skeleton/Skeleton.styles.css
rename to packages/ui/src/components/Skeleton/Skeleton.module.css
diff --git a/packages/ui/src/components/Skeleton/Skeleton.tsx b/packages/ui/src/components/Skeleton/Skeleton.tsx
index 772a69bc28..f867f7fff7 100644
--- a/packages/ui/src/components/Skeleton/Skeleton.tsx
+++ b/packages/ui/src/components/Skeleton/Skeleton.tsx
@@ -16,6 +16,8 @@
 
 import { useStyles } from '../../hooks/useStyles';
 import { SkeletonProps } from './types';
+import styles from './Skeleton.module.css';
+import clsx from 'clsx';
 
 /** @public */
 export const Skeleton = (props: SkeletonProps) => {
@@ -24,7 +26,7 @@ export const Skeleton = (props: SkeletonProps) => {
 
   return (
     <div
-      className={classNames.root}
+      className={clsx(classNames.root, styles[classNames.root])}
       data-rounded={rounded}
       style={{
         width,
diff --git a/packages/ui/src/components/Switch/Switch.styles.css b/packages/ui/src/components/Switch/Switch.module.css
similarity index 100%
rename from packages/ui/src/components/Switch/Switch.styles.css
rename to packages/ui/src/components/Switch/Switch.module.css
diff --git a/packages/ui/src/components/Switch/Switch.tsx b/packages/ui/src/components/Switch/Switch.tsx
index 70890ca3a0..a475a83d39 100644
--- a/packages/ui/src/components/Switch/Switch.tsx
+++ b/packages/ui/src/components/Switch/Switch.tsx
@@ -18,6 +18,8 @@ import { forwardRef } from 'react';
 import { Switch as AriaSwitch } from 'react-aria-components';
 import type { SwitchProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Switch.module.css';
+import clsx from 'clsx';
 
 /** @public */
 export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
@@ -25,8 +27,14 @@ export const Switch = forwardRef<HTMLLabelElement, SwitchProps>(
     const { classNames } = useStyles('Switch');
 
     return (
-      <AriaSwitch className={classNames.root} ref={ref} {...props}>
-        <div className={classNames.indicator} />
+      <AriaSwitch
+        className={clsx(classNames.root, styles[classNames.root])}
+        ref={ref}
+        {...props}
+      >
+        <div
+          className={clsx(classNames.indicator, styles[classNames.indicator])}
+        />
         {label}
       </AriaSwitch>
     );
diff --git a/packages/ui/src/components/Table/Table.styles.css b/packages/ui/src/components/Table/Table.module.css
similarity index 100%
rename from packages/ui/src/components/Table/Table.styles.css
rename to packages/ui/src/components/Table/Table.module.css
diff --git a/packages/ui/src/components/Table/components/Cell.tsx b/packages/ui/src/components/Table/components/Cell.tsx
index d511ed21cb..e7f5fad0e8 100644
--- a/packages/ui/src/components/Table/components/Cell.tsx
+++ b/packages/ui/src/components/Table/components/Cell.tsx
@@ -20,6 +20,7 @@ import { Link } from '../../Link';
 import { Cell as ReactAriaCell } from 'react-aria-components';
 import type { CellProps } from '../types';
 import { useStyles } from '../../../hooks/useStyles';
+import styles from '../Table.module.css';
 
 /** @public */
 const Cell = (props: CellProps) => {
@@ -36,12 +37,29 @@ const Cell = (props: CellProps) => {
   const { classNames } = useStyles('Table');
 
   return (
-    <ReactAriaCell className={clsx(classNames.cell, className)} {...rest}>
-      <div className={classNames.cellContentWrapper}>
-        {leadingIcon && (
-          <div className={classNames.cellIcon}>{leadingIcon}</div>
+    <ReactAriaCell
+      className={clsx(classNames.cell, styles[classNames.cell], className)}
+      {...rest}
+    >
+      <div
+        className={clsx(
+          classNames.cellContentWrapper,
+          styles[classNames.cellContentWrapper],
         )}
-        <div className={classNames.cellContent}>
+      >
+        {leadingIcon && (
+          <div
+            className={clsx(classNames.cellIcon, styles[classNames.cellIcon])}
+          >
+            {leadingIcon}
+          </div>
+        )}
+        <div
+          className={clsx(
+            classNames.cellContent,
+            styles[classNames.cellContent],
+          )}
+        >
           {href ? (
             <Link href={href} variant="body-medium" color={color}>
               {title}
diff --git a/packages/ui/src/components/Table/components/CellProfile.tsx b/packages/ui/src/components/Table/components/CellProfile.tsx
index 4e4906046d..89bb9234f9 100644
--- a/packages/ui/src/components/Table/components/CellProfile.tsx
+++ b/packages/ui/src/components/Table/components/CellProfile.tsx
@@ -21,6 +21,7 @@ import { Link } from '../../Link/Link';
 import { Avatar } from '@base-ui-components/react/avatar';
 import { useStyles } from '../../../hooks/useStyles';
 import { Cell as ReactAriaCell } from 'react-aria-components';
+import styles from '../Table.module.css';
 
 /** @public */
 export const CellProfile = (props: CellProfileProps) => {
@@ -36,18 +37,39 @@ export const CellProfile = (props: CellProfileProps) => {
   const { classNames } = useStyles('Table');
 
   return (
-    <ReactAriaCell className={clsx(classNames.cell, className)} {...rest}>
-      <div className={classNames.cellContentWrapper}>
-        <div className={classNames.cellIcon}>
+    <ReactAriaCell
+      className={clsx(classNames.cell, styles[classNames.cell], className)}
+      {...rest}
+    >
+      <div
+        className={clsx(
+          classNames.cellContentWrapper,
+          styles[classNames.cellContentWrapper],
+        )}
+      >
+        <div className={clsx(classNames.cellIcon, styles[classNames.cellIcon])}>
           {src && (
-            <Avatar.Root className={classNames.cellProfileAvatar}>
+            <Avatar.Root
+              className={clsx(
+                classNames.cellProfileAvatar,
+                styles[classNames.cellProfileAvatar],
+              )}
+            >
               <Avatar.Image
                 src={src}
                 width="20"
                 height="20"
-                className={classNames.cellProfileAvatarImage}
+                className={clsx(
+                  classNames.cellProfileAvatarImage,
+                  styles[classNames.cellProfileAvatarImage],
+                )}
               />
-              <Avatar.Fallback className={classNames.cellProfileAvatarFallback}>
+              <Avatar.Fallback
+                className={clsx(
+                  classNames.cellProfileAvatarFallback,
+                  styles[classNames.cellProfileAvatarFallback],
+                )}
+              >
                 {(name || '')
                   .split(' ')
                   .map(word => word[0])
@@ -58,7 +80,12 @@ export const CellProfile = (props: CellProfileProps) => {
             </Avatar.Root>
           )}
         </div>
-        <div className={classNames.cellContent}>
+        <div
+          className={clsx(
+            classNames.cellContent,
+            styles[classNames.cellContent],
+          )}
+        >
           {name && href ? (
             <Link href={href}>{name}</Link>
           ) : (
diff --git a/packages/ui/src/components/Table/components/Column.tsx b/packages/ui/src/components/Table/components/Column.tsx
index 7b9241edc9..dcc408b1ed 100644
--- a/packages/ui/src/components/Table/components/Column.tsx
+++ b/packages/ui/src/components/Table/components/Column.tsx
@@ -20,6 +20,8 @@ import {
 } from 'react-aria-components';
 import { Icon } from '../../Icon';
 import { useStyles } from '../../../hooks/useStyles';
+import styles from '../Table.module.css';
+import clsx from 'clsx';
 
 /** @public */
 export const Column = (
@@ -28,12 +30,26 @@ export const Column = (
   const { classNames } = useStyles('Table');
 
   return (
-    <ReactAriaColumn className={classNames.head} {...props}>
+    <ReactAriaColumn
+      className={clsx(classNames.head, styles[classNames.head])}
+      {...props}
+    >
       {({ allowsSorting, sortDirection }) => (
-        <div className={classNames.headContent}>
+        <div
+          className={clsx(
+            classNames.headContent,
+            styles[classNames.headContent],
+          )}
+        >
           {props.children}
           {allowsSorting && (
-            <span aria-hidden="true" className={classNames.headSortButton}>
+            <span
+              aria-hidden="true"
+              className={clsx(
+                classNames.headSortButton,
+                styles[classNames.headSortButton],
+              )}
+            >
               {sortDirection === 'ascending' ? (
                 <Icon name="arrow-up" size={16} />
               ) : (
diff --git a/packages/ui/src/components/Table/components/Row.tsx b/packages/ui/src/components/Table/components/Row.tsx
index e0d5bcc34d..dbb6c1f0d9 100644
--- a/packages/ui/src/components/Table/components/Row.tsx
+++ b/packages/ui/src/components/Table/components/Row.tsx
@@ -27,6 +27,8 @@ import { useStyles } from '../../../hooks/useStyles';
 import { useNavigate } from 'react-router-dom';
 import { useHref } from 'react-router-dom';
 import { isExternalLink } from '../../../utils/isExternalLink';
+import styles from '../Table.module.css';
+import clsx from 'clsx';
 
 /** @public */
 export function Row<T extends object>({
@@ -55,7 +57,11 @@ export function Row<T extends object>({
 
   if (isExternal) {
     return (
-      <ReactAriaRow id={id} className={classNames.row} {...otherProps}>
+      <ReactAriaRow
+        id={id}
+        className={clsx(classNames.row, styles[classNames.row])}
+        {...otherProps}
+      >
         {content}
       </ReactAriaRow>
     );
@@ -65,7 +71,7 @@ export function Row<T extends object>({
     <RouterProvider navigate={navigate} useHref={useHref}>
       <ReactAriaRow
         id={id}
-        className={classNames.row}
+        className={clsx(classNames.row, styles[classNames.row])}
         data-react-aria-pressable="true"
         {...otherProps}
       >
diff --git a/packages/ui/src/components/Table/components/Table.tsx b/packages/ui/src/components/Table/components/Table.tsx
index 0ad22a85b8..b7f09265d5 100644
--- a/packages/ui/src/components/Table/components/Table.tsx
+++ b/packages/ui/src/components/Table/components/Table.tsx
@@ -19,6 +19,8 @@ import {
   Table as ReactAriaTable,
   type TableProps,
 } from 'react-aria-components';
+import styles from '../Table.module.css';
+import clsx from 'clsx';
 
 /** @public */
 export const Table = (props: TableProps) => {
@@ -26,7 +28,7 @@ export const Table = (props: TableProps) => {
 
   return (
     <ReactAriaTable
-      className={classNames.table}
+      className={clsx(classNames.table, styles[classNames.table])}
       aria-label="Data table"
       {...props}
     />
diff --git a/packages/ui/src/components/Table/components/TableBody.tsx b/packages/ui/src/components/Table/components/TableBody.tsx
index 64e960167b..97952a3387 100644
--- a/packages/ui/src/components/Table/components/TableBody.tsx
+++ b/packages/ui/src/components/Table/components/TableBody.tsx
@@ -19,10 +19,17 @@ import {
   type TableBodyProps,
 } from 'react-aria-components';
 import { useStyles } from '../../../hooks/useStyles';
+import styles from '../Table.module.css';
+import clsx from 'clsx';
 
 /** @public */
 export const TableBody = <T extends object>(props: TableBodyProps<T>) => {
   const { classNames } = useStyles('Table');
 
-  return <ReactAriaTableBody className={classNames.body} {...props} />;
+  return (
+    <ReactAriaTableBody
+      className={clsx(classNames.body, styles[classNames.body])}
+      {...props}
+    />
+  );
 };
diff --git a/packages/ui/src/components/Table/components/TableHeader.tsx b/packages/ui/src/components/Table/components/TableHeader.tsx
index 7802cd0327..a92b69d5ec 100644
--- a/packages/ui/src/components/Table/components/TableHeader.tsx
+++ b/packages/ui/src/components/Table/components/TableHeader.tsx
@@ -22,6 +22,8 @@ import {
 import { Collection, useTableOptions } from 'react-aria-components';
 import { Column } from './Column';
 import { useStyles } from '../../../hooks/useStyles';
+import styles from '../Table.module.css';
+import clsx from 'clsx';
 
 /** @public */
 export const TableHeader = <T extends object>({
@@ -33,7 +35,9 @@ export const TableHeader = <T extends object>({
   const { classNames } = useStyles('Table');
 
   return (
-    <ReactAriaTableHeader className={classNames.header}>
+    <ReactAriaTableHeader
+      className={clsx(classNames.header, styles[classNames.header])}
+    >
       {/* Add extra columns for drag and drop and selection. */}
       {allowsDragging && <Column />}
       {selectionBehavior === 'toggle' && (
diff --git a/packages/ui/src/components/TablePagination/TablePagination.styles.css b/packages/ui/src/components/TablePagination/TablePagination.module.css
similarity index 87%
rename from packages/ui/src/components/TablePagination/TablePagination.styles.css
rename to packages/ui/src/components/TablePagination/TablePagination.module.css
index e305967ebe..9ad580e774 100644
--- a/packages/ui/src/components/TablePagination/TablePagination.styles.css
+++ b/packages/ui/src/components/TablePagination/TablePagination.module.css
@@ -15,27 +15,27 @@
  */
 
 @layer components {
-  .bui-DataTablePagination {
+  .bui-TablePagination {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding-top: var(--bui-space-5);
   }
 
-  .bui-DataTablePagination--left {
+  .bui-TablePaginationLeft {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
 
-  .bui-DataTablePagination--right {
+  .bui-TablePaginationRight {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: var(--bui-space-2);
   }
 
-  .bui-DataTablePagination--select {
+  .bui-TablePaginationSelect {
     min-width: 10.5rem;
   }
 }
diff --git a/packages/ui/src/components/TablePagination/TablePagination.tsx b/packages/ui/src/components/TablePagination/TablePagination.tsx
index e7827e6ab9..33f32ad281 100644
--- a/packages/ui/src/components/TablePagination/TablePagination.tsx
+++ b/packages/ui/src/components/TablePagination/TablePagination.tsx
@@ -17,6 +17,8 @@
 import clsx from 'clsx';
 import { Text, ButtonIcon, Select, Icon } from '../..';
 import type { TablePaginationProps } from './types';
+import { useStyles } from '../../hooks/useStyles';
+import styles from './TablePagination.module.css';
 
 /**
  * Pagination controls for Table components with page navigation and size selection.
@@ -38,6 +40,8 @@ export function TablePagination(props: TablePaginationProps) {
     ...rest
   } = props;
 
+  const { classNames } = useStyles('TablePagination');
+
   const currentOffset = offset ?? 0;
   const currentPageSize = pageSize ?? 10;
 
@@ -65,8 +69,11 @@ export function TablePagination(props: TablePaginationProps) {
   };
 
   return (
-    <div className={clsx('bui-DataTablePagination', className)} {...rest}>
-      <div className="bui-DataTablePagination--left">
+    <div
+      className={clsx(classNames.root, styles[classNames.root], className)}
+      {...rest}
+    >
+      <div className={clsx(classNames.left, styles[classNames.left])}>
         {showPageSizeOptions && (
           <Select
             name="pageSize"
@@ -86,11 +93,11 @@ export function TablePagination(props: TablePaginationProps) {
               setPageSize?.(newPageSize);
               onPageSizeChange?.(newPageSize);
             }}
-            className="bui-DataTablePagination--select"
+            className={clsx(classNames.select, styles[classNames.select])}
           />
         )}
       </div>
-      <div className="bui-DataTablePagination--right">
+      <div className={clsx(classNames.right, styles[classNames.right])}>
         <Text
           as="p"
           variant="body-medium"
diff --git a/packages/ui/src/components/Tabs/Tabs.styles.css b/packages/ui/src/components/Tabs/Tabs.module.css
similarity index 100%
rename from packages/ui/src/components/Tabs/Tabs.styles.css
rename to packages/ui/src/components/Tabs/Tabs.module.css
diff --git a/packages/ui/src/components/Tabs/Tabs.tsx b/packages/ui/src/components/Tabs/Tabs.tsx
index 371de4ef41..53d1a02eab 100644
--- a/packages/ui/src/components/Tabs/Tabs.tsx
+++ b/packages/ui/src/components/Tabs/Tabs.tsx
@@ -41,8 +41,9 @@ import {
   RouterProvider,
   TabProps as AriaTabProps,
 } from 'react-aria-components';
-
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Tabs.module.css';
+import clsx from 'clsx';
 
 const TabsContext = createContext<TabsContextValue | undefined>(undefined);
 
@@ -148,7 +149,7 @@ export const Tabs = (props: TabsProps) => {
     <TabsContext.Provider value={contextValue}>
       <RouterProvider navigate={navigate} useHref={useHref}>
         <AriaTabs
-          className={classNames.tabs}
+          className={clsx(classNames.tabs, styles[classNames.tabs])}
           keyboardActivation="manual"
           selectedKey={computedSelectedKey}
           ref={tabsRef}
@@ -188,9 +189,14 @@ export const TabList = (props: TabListProps) => {
   });
 
   return (
-    <div className={classNames.tabListWrapper}>
+    <div
+      className={clsx(
+        classNames.tabListWrapper,
+        styles[classNames.tabListWrapper],
+      )}
+    >
       <AriaTabList
-        className={classNames.tabList}
+        className={clsx(classNames.tabList, styles[classNames.tabList])}
         aria-label="Toolbar tabs"
         {...rest}
       >
@@ -219,7 +225,7 @@ export const Tab = (props: TabProps) => {
   return (
     <AriaTab
       id={id}
-      className={classNames.tab}
+      className={clsx(classNames.tab, styles[classNames.tab])}
       ref={el => setTabRef(id as string, el as HTMLDivElement)}
       href={href}
       {...rest}
@@ -239,7 +245,10 @@ export const TabPanel = (props: TabPanelProps) => {
   const { classNames } = useStyles('Tabs');
 
   return (
-    <AriaTabPanel className={classNames.panel} {...rest}>
+    <AriaTabPanel
+      className={clsx(classNames.panel, styles[classNames.panel])}
+      {...rest}
+    >
       {children}
     </AriaTabPanel>
   );
diff --git a/packages/ui/src/components/Tabs/TabsIndicators.tsx b/packages/ui/src/components/Tabs/TabsIndicators.tsx
index fa2e29300d..6347c5c55c 100644
--- a/packages/ui/src/components/Tabs/TabsIndicators.tsx
+++ b/packages/ui/src/components/Tabs/TabsIndicators.tsx
@@ -18,6 +18,8 @@ import { TabListStateContext } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles';
 import { useContext, useEffect, useCallback, useRef } from 'react';
 import type { TabsIndicatorsProps } from './types';
+import styles from './Tabs.module.css';
+import clsx from 'clsx';
 
 /**
  * A component that renders the indicators for the toolbar.
@@ -184,8 +186,12 @@ export const TabsIndicators = (props: TabsIndicatorsProps) => {
 
   return (
     <>
-      <div className={classNames.tabActive} />
-      <div className={classNames.tabHovered} />
+      <div
+        className={clsx(classNames.tabActive, styles[classNames.tabActive])}
+      />
+      <div
+        className={clsx(classNames.tabHovered, styles[classNames.tabHovered])}
+      />
     </>
   );
 };
diff --git a/packages/ui/src/components/TagGroup/TagGroup.styles.css b/packages/ui/src/components/TagGroup/TagGroup.module.css
similarity index 100%
rename from packages/ui/src/components/TagGroup/TagGroup.styles.css
rename to packages/ui/src/components/TagGroup/TagGroup.module.css
diff --git a/packages/ui/src/components/TagGroup/TagGroup.tsx b/packages/ui/src/components/TagGroup/TagGroup.tsx
index 1726577064..2444aae72f 100644
--- a/packages/ui/src/components/TagGroup/TagGroup.tsx
+++ b/packages/ui/src/components/TagGroup/TagGroup.tsx
@@ -28,6 +28,7 @@ import clsx from 'clsx';
 import { useStyles } from '../../hooks/useStyles';
 import { isExternalLink } from '../../utils/isExternalLink';
 import { useNavigate, useHref } from 'react-router-dom';
+import styles from './TagGroup.module.css';
 
 /**
  * A component that renders a list of tags.
@@ -42,9 +43,12 @@ export const TagGroup = <T extends object>({
 }: TagGroupProps<T>) => {
   const { classNames } = useStyles('TagGroup');
   return (
-    <ReactAriaTagGroup className={classNames.group} {...props}>
+    <ReactAriaTagGroup
+      className={clsx(classNames.group, styles[classNames.group])}
+      {...props}
+    >
       <ReactAriaTagList
-        className={classNames.list}
+        className={clsx(classNames.list, styles[classNames.list])}
         items={items}
         renderEmptyState={renderEmptyState}
       >
@@ -70,18 +74,27 @@ export const Tag = (props: TagProps) => {
   const content = (
     <ReactAriaTag
       textValue={textValue}
-      className={clsx(classNames.tag, className)}
+      className={clsx(classNames.tag, styles[classNames.tag], className)}
       data-size={size}
       href={href}
       {...rest}
     >
       {({ allowsRemoving }) => (
         <>
-          {icon && <span className={classNames.tagIcon}>{icon}</span>}
+          {icon && (
+            <span
+              className={clsx(classNames.tagIcon, styles[classNames.tagIcon])}
+            >
+              {icon}
+            </span>
+          )}
           {children as ReactNode}
           {allowsRemoving && (
             <ReactAriaButton
-              className={classNames.tagRemoveButton}
+              className={clsx(
+                classNames.tagRemoveButton,
+                styles[classNames.tagRemoveButton],
+              )}
               slot="remove"
             >
               <RiCloseCircleLine size={16} />
diff --git a/packages/ui/src/components/Text/styles.css b/packages/ui/src/components/Text/Text.module.css
similarity index 100%
rename from packages/ui/src/components/Text/styles.css
rename to packages/ui/src/components/Text/Text.module.css
diff --git a/packages/ui/src/components/Text/Text.tsx b/packages/ui/src/components/Text/Text.tsx
index 533baa6067..358200d47c 100644
--- a/packages/ui/src/components/Text/Text.tsx
+++ b/packages/ui/src/components/Text/Text.tsx
@@ -19,6 +19,7 @@ import clsx from 'clsx';
 import type { ElementType } from 'react';
 import type { TextProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Text.module.css';
 
 function TextComponent<T extends ElementType = 'span'>(
   {
@@ -44,7 +45,7 @@ function TextComponent<T extends ElementType = 'span'>(
   return (
     <Component
       ref={ref}
-      className={clsx(classNames.root, className)}
+      className={clsx(classNames.root, styles[classNames.root], className)}
       data-truncate={truncate}
       data-as={as}
       {...dataAttributes}
diff --git a/packages/ui/src/components/TextField/TextField.styles.css b/packages/ui/src/components/TextField/TextField.module.css
similarity index 100%
rename from packages/ui/src/components/TextField/TextField.styles.css
rename to packages/ui/src/components/TextField/TextField.module.css
diff --git a/packages/ui/src/components/TextField/TextField.tsx b/packages/ui/src/components/TextField/TextField.tsx
index 84b4642d93..632f5e9f86 100644
--- a/packages/ui/src/components/TextField/TextField.tsx
+++ b/packages/ui/src/components/TextField/TextField.tsx
@@ -19,9 +19,9 @@ import { Input, TextField as AriaTextField } from 'react-aria-components';
 import clsx from 'clsx';
 import { FieldLabel } from '../FieldLabel';
 import { FieldError } from '../FieldError';
-
 import type { TextFieldProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './TextField.module.css';
 
 /** @public */
 export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
@@ -64,7 +64,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
 
     return (
       <AriaTextField
-        className={clsx(classNames.root, className)}
+        className={clsx(classNames.root, styles[classNames.root], className)}
         {...dataAttributes}
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
@@ -78,12 +78,18 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
           description={description}
         />
         <div
-          className={classNames.inputWrapper}
+          className={clsx(
+            classNames.inputWrapper,
+            styles[classNames.inputWrapper],
+          )}
           data-size={dataAttributes['data-size']}
         >
           {icon && (
             <div
-              className={classNames.inputIcon}
+              className={clsx(
+                classNames.inputIcon,
+                styles[classNames.inputIcon],
+              )}
               data-size={dataAttributes['data-size']}
               aria-hidden="true"
             >
@@ -91,7 +97,7 @@ export const TextField = forwardRef<HTMLDivElement, TextFieldProps>(
             </div>
           )}
           <Input
-            className={classNames.input}
+            className={clsx(classNames.input, styles[classNames.input])}
             {...(icon && { 'data-icon': true })}
             placeholder={placeholder}
           />
diff --git a/packages/ui/src/components/Tooltip/Tooltip.styles.css b/packages/ui/src/components/Tooltip/Tooltip.module.css
similarity index 100%
rename from packages/ui/src/components/Tooltip/Tooltip.styles.css
rename to packages/ui/src/components/Tooltip/Tooltip.module.css
diff --git a/packages/ui/src/components/Tooltip/Tooltip.tsx b/packages/ui/src/components/Tooltip/Tooltip.tsx
index 4503a1ce90..25c2692cb1 100644
--- a/packages/ui/src/components/Tooltip/Tooltip.tsx
+++ b/packages/ui/src/components/Tooltip/Tooltip.tsx
@@ -24,6 +24,7 @@ import {
 import clsx from 'clsx';
 import { TooltipProps } from './types';
 import { useStyles } from '../../hooks/useStyles';
+import styles from './Tooltip.module.css';
 
 /** @public */
 export const TooltipTrigger = (props: TooltipTriggerComponentProps) => {
@@ -39,11 +40,17 @@ export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
 
     return (
       <AriaTooltip
-        className={clsx(classNames.tooltip, className)}
+        className={clsx(
+          classNames.tooltip,
+          styles[classNames.tooltip],
+          className,
+        )}
         {...rest}
         ref={ref}
       >
-        <OverlayArrow className={classNames.arrow}>
+        <OverlayArrow
+          className={clsx(classNames.arrow, styles[classNames.arrow])}
+        >
           <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
             <path d="M10.3356 7.39793L15.1924 3.02682C15.9269 2.36577 16.8801 2 17.8683 2H20V7.94781e-07L1.74846e-07 -9.53674e-07L0 2L1.4651 2C2.4532 2 3.4064 2.36577 4.1409 3.02682L8.9977 7.39793C9.378 7.7402 9.9553 7.74021 10.3356 7.39793Z" />
             <path d="M11.0046 8.14124C10.2439 8.82575 9.08939 8.82578 8.32869 8.14122L3.47189 3.77011C2.92109 3.27432 2.20619 2.99999 1.46509 2.99999L4.10999 3L8.99769 7.39793C9.37799 7.7402 9.95529 7.7402 10.3356 7.39793L15.2226 3L17.8683 2.99999C17.1271 2.99999 16.4122 3.27432 15.8614 3.77011L11.0046 8.14124Z" />
diff --git a/packages/ui/src/css/styles.css b/packages/ui/src/css/styles.css
index 3f9c83f39f..94847931d5 100644
--- a/packages/ui/src/css/styles.css
+++ b/packages/ui/src/css/styles.css
@@ -23,41 +23,6 @@
 @import './normalize.css';
 @import './core.css';
 
-/* Components */
-@import '../components/Avatar/Avatar.styles.css';
-@import '../components/Box/styles.css';
-@import '../components/Button/styles.css';
-@import '../components/ButtonIcon/styles.css';
-@import '../components/Card/Card.styles.css';
-@import '../components/Checkbox/styles.css';
-@import '../components/Collapsible/Collapsible.styles.css';
-@import '../components/Container/styles.css';
-@import '../components/Dialog/Dialog.styles.css';
-@import '../components/FieldError/FieldError.styles.css';
-@import '../components/FieldLabel/FieldLabel.styles.css';
-@import '../components/Flex/styles.css';
-@import '../components/Grid/styles.css';
-@import '../components/Header/Header.styles.css';
-@import '../components/HeaderPage/HeaderPage.styles.css';
-@import '../components/Icon/styles.css';
-@import '../components/Link/styles.css';
-@import '../components/Menu/Menu.styles.css';
-@import '../components/Popover/Popover.styles.css';
-@import '../components/RadioGroup/RadioGroup.styles.css';
-@import '../components/Table/Table.styles.css';
-@import '../components/TablePagination/TablePagination.styles.css';
-@import '../components/Tabs/Tabs.styles.css';
-@import '../components/TagGroup/TagGroup.styles.css';
-@import '../components/Text/styles.css';
-@import '../components/TextField/TextField.styles.css';
-@import '../components/PasswordField/PasswordField.styles.css';
-@import '../components/SearchField/SearchField.styles.css';
-@import '../components/Skeleton/Skeleton.styles.css';
-@import '../components/Tooltip/Tooltip.styles.css';
-@import '../components/ScrollArea/ScrollArea.styles.css';
-@import '../components/Select/Select.styles.css';
-@import '../components/Switch/Switch.styles.css';
-
 /* Utilities */
 
 /* Padding */
diff --git a/packages/ui/src/utils/componentDefinitions.ts b/packages/ui/src/utils/componentDefinitions.ts
index 730ffca0a4..8a4f3c8ad7 100644
--- a/packages/ui/src/utils/componentDefinitions.ts
+++ b/packages/ui/src/utils/componentDefinitions.ts
@@ -120,6 +120,11 @@ export const componentDefinitions = {
       footer: 'bui-DialogFooter',
     },
   },
+  FieldError: {
+    classNames: {
+      root: 'bui-FieldError',
+    },
+  },
   FieldLabel: {
     classNames: {
       root: 'bui-FieldLabelWrapper',
@@ -339,6 +344,14 @@ export const componentDefinitions = {
       cellProfileLink: 'bui-TableCellProfileLink',
     },
   },
+  TablePagination: {
+    classNames: {
+      root: 'bui-TablePagination',
+      left: 'bui-TablePaginationLeft',
+      right: 'bui-TablePaginationRight',
+      select: 'bui-TablePaginationSelect',
+    },
+  },
   Tabs: {
     classNames: {
       tabs: 'bui-Tabs',