diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
index 59346512bdc..15a4f913de4 100644
--- a/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
+++ b/packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css
@@ -333,3 +333,256 @@
   min-width: unset;
   padding: 0;
 }
+
+/* ==========================================================================
+   Header styles
+   ========================================================================== */
+
+.thContainer {
+  &:first-child > [role='columnheader'] {
+    border-inline-start: var(--_ui5wcr-AnalyticalTable-OuterCellBorder);
+  }
+
+  &:last-child > [role='columnheader'] {
+    border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterCellBorder);
+  }
+}
+
+.verticalEndBorder:last-child > [role='columnheader'] {
+  border-inline-end: 1px solid var(--sapList_BorderColor);
+}
+
+.header {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  text-align: start;
+  font-family: var(--_ui5wcr-AnalyticalTable-HeaderFontFamily);
+  font-size: var(--sapFontSize);
+  font-weight: normal;
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100%;
+  position: relative;
+  width: 100%;
+  overflow-x: hidden;
+  overflow-y: hidden;
+  box-sizing: border-box;
+
+  & > span {
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow-x: hidden;
+    overflow-y: hidden;
+  }
+}
+
+.text {
+  cursor: inherit;
+  color: inherit;
+  font-family: inherit;
+  width: 100%;
+  text-align: start;
+}
+
+.iconContainer {
+  display: flex;
+  position: absolute;
+  color: var(--sapContent_IconColor);
+  inset-inline-end: 0.5rem;
+
+  & > [ui5-icon]:not(:first-child) {
+    margin-inline-start: 0.125rem;
+  }
+}
+
+.selectAllCheckBoxContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.icon {
+  height: 0.8125rem;
+  width: 0.8125rem;
+}
+
+/* ==========================================================================
+   Resizer styles
+   ========================================================================== */
+
+.resizer {
+  display: inline-block;
+  width: 3px;
+  height: 100%;
+  position: absolute;
+  inset-block-end: 0;
+  inset-block-start: 0;
+  z-index: 1;
+  cursor: col-resize;
+
+  &:hover,
+  &:active {
+    background-color: var(--sapContent_DragAndDropActiveColor);
+  }
+}
+
+/* ==========================================================================
+   ColumnHeaderModal styles
+   ========================================================================== */
+
+.popover {
+  font-weight: normal;
+
+  &::part(content) {
+    padding: 0;
+  }
+}
+
+.filterIcon {
+  padding-inline-end: 0.5rem;
+  color: var(--sapContent_NonInteractiveIconColor);
+}
+
+.filterText {
+  overflow: visible;
+  padding-inline-end: 0.5rem;
+}
+
+/* ==========================================================================
+   Expandable styles
+   ========================================================================== */
+
+.container {
+  height: var(--_ui5wcr-AnalyticalTableExpandButtonHeight);
+  margin-inline-end: 0.125rem;
+  flex-shrink: 0;
+}
+
+.expandableIcon {
+  color: var(--sapContent_IconColor);
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  &::part(root) {
+    padding: 0.375rem;
+    width: var(--_ui5wcr-AnalyticalTableExpandIconHeight);
+    height: var(--_ui5wcr-AnalyticalTableExpandIconHeight);
+  }
+}
+
+.button {
+  color: var(--sapTextColor);
+  height: 100%;
+  font-size: 0.75rem;
+}
+
+.nonExpandableCellSpacer {
+  width: var(--_ui5wcr-AnalyticalTableExpandIndicatorWidth);
+  flex-shrink: 0;
+}
+
+.withExpandableButton {
+  margin-inline-end: 0.5rem;
+}
+
+/* ==========================================================================
+   PopIn styles
+   ========================================================================== */
+
+.popInContainer {
+  width: 100%;
+}
+
+.defaultCell > :first-child {
+  padding-block-start: 0.25rem;
+}
+
+.popInHeader {
+  color: var(--sapContent_LabelColor);
+  height: 16px;
+}
+
+.gap {
+  gap: 0.5rem;
+}
+
+/* ==========================================================================
+   SubComponent styles
+   ========================================================================== */
+
+.subcomponent {
+  position: absolute;
+  width: 100%;
+  &:focus {
+    outline-offset: calc(-1 * var(--sapContent_FocusWidth));
+    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
+  }
+}
+
+/* ==========================================================================
+   VerticalResizer styles
+   ========================================================================== */
+
+.verticalResizerContainer {
+  overflow: hidden;
+  position: relative;
+  height: 5px;
+  text-align: center;
+  cursor: row-resize;
+  box-sizing: border-box;
+
+  &:hover {
+    background-color: var(--sapContent_DragAndDropActiveColor);
+    color: var(--sapHighlightTextColor);
+  }
+
+  &:before {
+    font-size: 10px;
+    font-family: var(--sapFontFamily);
+    inset-block-start: 0;
+    position: absolute;
+    content: '⦁⦁⦁⦁';
+    line-height: 5px;
+    pointer-events: none;
+  }
+}
+
+.verticalResizer {
+  position: absolute;
+  opacity: 0.5;
+  background-color: var(--sapContent_DragAndDropActiveColor);
+  height: 5px;
+}
+
+/* ==========================================================================
+   VerticalScrollbar styles
+   ========================================================================== */
+
+.headerSection {
+  box-sizing: border-box;
+  border-block-start: var(--_ui5wcr-AnalyticalTable-OuterBorderBlock);
+  border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterBorderInline);
+  border-block-end: var(--_ui5wcr-AnalyticalTable-HeaderBorderWidth) solid var(--sapList_HeaderBorderColor);
+  background-color: var(--sapList_HeaderBackground);
+  border-inline-start: 1px solid var(--sapList_BorderColor);
+  margin-inline-start: -1px;
+  width: calc(var(--sapScrollBar_Dimension) + 2px);
+}
+.scrollbar {
+  overflow-y: auto;
+  border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterBorderInline);
+  border-block-end: 1px solid var(--sapList_TableFooterBorder);
+  border-inline-start: 1px solid var(--sapList_BorderColor);
+  margin-inline-start: -1px;
+  box-sizing: border-box;
+}
+
+.bottomSection {
+  flex-grow: 1;
+  background-color: var(--sapList_FooterBackground);
+  box-sizing: border-box;
+  border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterBorderInline);
+}
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
deleted file mode 100644
index f5623b79dd4..00000000000
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeader.module.css
+++ /dev/null
@@ -1,69 +0,0 @@
-.thContainer {
-  &:first-child > [role='columnheader'] {
-    border-inline-start: var(--_ui5wcr-AnalyticalTable-OuterCellBorder);
-  }
-
-  &:last-child > [role='columnheader'] {
-    border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterCellBorder);
-  }
-}
-
-.verticalEndBorder:last-child > [role='columnheader'] {
-  border-inline-end: 1px solid var(--sapList_BorderColor);
-}
-
-.header {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  text-align: start;
-  font-family: var(--_ui5wcr-AnalyticalTable-HeaderFontFamily);
-  font-size: var(--sapFontSize);
-  font-weight: normal;
-  color: inherit;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 100%;
-  position: relative;
-  width: 100%;
-  overflow-x: hidden;
-  overflow-y: hidden;
-  box-sizing: border-box;
-
-  & > span {
-    width: 100%;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow-x: hidden;
-    overflow-y: hidden;
-  }
-}
-
-.text {
-  cursor: inherit;
-  color: inherit;
-  font-family: inherit;
-  width: 100%;
-  text-align: start;
-}
-
-.iconContainer {
-  display: flex;
-  position: absolute;
-  color: var(--sapContent_IconColor);
-  inset-inline-end: 0.5rem;
-
-  & > [ui5-icon]:not(:first-child) {
-    margin-inline-start: 0.125rem;
-  }
-}
-
-.selectAllCheckBoxContainer {
-  display: flex;
-  justify-content: center;
-}
-
-.icon {
-  height: 0.8125rem;
-  width: 0.8125rem;
-}
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
index 5be89db7cd1..e9d3c877718 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx
@@ -1,12 +1,11 @@
 import type { Virtualizer } from '@tanstack/react-virtual';
-import { useStylesheet } from '@ui5/webcomponents-react-base';
 import { forwardRef, Fragment } from 'react';
-import type { DivWithCustomScrollProp } from '../types/index.js';
+import type { ClassNames, DivWithCustomScrollProp } from '../types/index.js';
 import { RenderColumnTypes } from '../types/index.js';
-import { classNames, styleData } from './Resizer.module.css.js';
 import { ColumnHeader } from './index.js';
 
 interface ColumnHeaderContainerProps {
+  classNames: ClassNames;
   headerProps: Record<string, any>;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   headerGroup: Record<string, any>;
@@ -18,10 +17,16 @@ interface ColumnHeaderContainerProps {
 }
 
 export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderContainerProps>((props, ref) => {
-  const { headerProps, headerGroup, resizeInfo, isRtl, columnVirtualizer, uniqueId, showVerticalEndBorder } = props;
-
-  useStylesheet(styleData, 'Resizer');
-
+  const {
+    headerProps,
+    headerGroup,
+    resizeInfo,
+    isRtl,
+    columnVirtualizer,
+    uniqueId,
+    showVerticalEndBorder,
+    classNames
+  } = props;
   const { key, ...reactTableHeaderProps } = headerProps;
 
   return (
@@ -71,6 +76,7 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
               virtualColumn={virtualColumn}
               columnVirtualizer={columnVirtualizer}
               isRtl={isRtl}
+              classNames={classNames}
             >
               {column.render(RenderColumnTypes.Header)}
             </ColumnHeader>
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/Resizer.module.css b/packages/main/src/components/AnalyticalTable/ColumnHeader/Resizer.module.css
deleted file mode 100644
index b20f0efdecf..00000000000
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/Resizer.module.css
+++ /dev/null
@@ -1,15 +0,0 @@
-.resizer {
-  display: inline-block;
-  width: 3px;
-  height: 100%;
-  position: absolute;
-  inset-block-end: 0;
-  inset-block-start: 0;
-  z-index: 1;
-  cursor: col-resize;
-
-  &:hover,
-  &:active {
-    background-color: var(--sapContent_DragAndDropActiveColor);
-  }
-}
diff --git a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
index 9ae20f7931c..f3fd0229c7c 100644
--- a/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx
@@ -4,7 +4,7 @@ import iconFilter from '@ui5/webcomponents-icons/dist/filter.js';
 import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js';
 import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js';
 import iconSortDescending from '@ui5/webcomponents-icons/dist/sort-descending.js';
-import { ThemingParameters, useStylesheet } from '@ui5/webcomponents-react-base';
+import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type {
   AriaAttributes,
@@ -17,9 +17,8 @@ import type {
 import { useRef, useState } from 'react';
 import { Icon } from '../../../webComponents/Icon/index.js';
 import { Text } from '../../../webComponents/Text/index.js';
-import type { ColumnType, DivWithCustomScrollProp } from '../types/index.js';
+import type { ClassNames, ColumnType, DivWithCustomScrollProp } from '../types/index.js';
 import { RenderColumnTypes } from '../types/index.js';
-import { classNames, styleData } from './ColumnHeader.module.css.js';
 
 export interface ColumnHeaderProps {
   visibleColumnIndex: number;
@@ -37,6 +36,7 @@ export interface ColumnHeaderProps {
   children: ReactNode | ReactNode[];
   columnId?: string;
   showVerticalEndBorder: boolean;
+  classNames: ClassNames;
 
   //getHeaderProps()
   id: string;
@@ -54,7 +54,6 @@ export interface ColumnHeaderProps {
 }
 
 export const ColumnHeader = (props: ColumnHeaderProps) => {
-  useStylesheet(styleData, ColumnHeader.displayName);
   const {
     id,
     children,
@@ -82,7 +81,8 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
     title,
     'aria-label': ariaLabel,
     'aria-sort': ariaSort,
-    showVerticalEndBorder
+    showVerticalEndBorder,
+    classNames
   } = props;
 
   const columnIndex = virtualColumn.index;
diff --git a/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.module.css b/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.module.css
deleted file mode 100644
index 2516db7312d..00000000000
--- a/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.module.css
+++ /dev/null
@@ -1,8 +0,0 @@
-.subcomponent {
-  position: absolute;
-  width: 100%;
-  &:focus {
-    outline-offset: calc(-1 * var(--sapContent_FocusWidth));
-    outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
-  }
-}
diff --git a/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx b/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx
index 8b0b21c9100..dd35269c65b 100644
--- a/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx
+++ b/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx
@@ -1,8 +1,7 @@
 import type { VirtualItem } from '@tanstack/react-virtual';
-import { useStylesheet } from '@ui5/webcomponents-react-base';
 import type { ReactNode } from 'react';
 import { useEffect, useRef } from 'react';
-import { classNames, styleData } from './RowSubComponent.module.css.js';
+import type { ClassNames } from '../types/index.js';
 
 interface RowSubComponent {
   subComponentsHeight: Record<string, { rowId: string; subComponentHeight?: number }>;
@@ -14,6 +13,7 @@ interface RowSubComponent {
   rows: Record<string, unknown>[];
   alwaysShowSubComponent: boolean;
   rowIndex: number;
+  classNames: ClassNames;
 }
 
 export const RowSubComponent = (props: RowSubComponent) => {
@@ -26,12 +26,11 @@ export const RowSubComponent = (props: RowSubComponent) => {
     children,
     rows,
     alwaysShowSubComponent,
-    rowIndex
+    rowIndex,
+    classNames
   } = props;
   const subComponentRef = useRef(null);
 
-  useStylesheet(styleData, RowSubComponent.displayName);
-
   useEffect(() => {
     const subComponentHeightObserver = new ResizeObserver((entries) => {
       entries.forEach((entry) => {
diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
index 271bbc69279..8fe5423e4be 100644
--- a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
+++ b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
@@ -5,6 +5,7 @@ import { useEffect, useMemo, useRef } from 'react';
 import { AnalyticalTableSubComponentsBehavior } from '../../../enums/index.js';
 import type {
   AnalyticalTablePropTypes,
+  ClassNames,
   DivWithCustomScrollProp,
   ScrollToRefType,
   TableInstance,
@@ -16,7 +17,7 @@ import { EmptyRow } from './EmptyRow.js';
 import { RowSubComponent as SubComponent } from './RowSubComponent.js';
 
 interface VirtualTableBodyProps {
-  classes: Record<string, string>;
+  classes: ClassNames;
   prepareRow: TableInstance['prepareRow'];
   rows: TableInstance['rows'];
   isTreeTable?: AnalyticalTablePropTypes['isTreeTable'];
@@ -214,6 +215,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
                 rows={rows}
                 alwaysShowSubComponent={alwaysShowSubComponent}
                 rowIndex={visibleRowIndex + 1}
+                classNames={classes}
               >
                 {RowSubComponent}
               </SubComponent>
diff --git a/packages/main/src/components/AnalyticalTable/VerticalResizer.module.css b/packages/main/src/components/AnalyticalTable/VerticalResizer.module.css
deleted file mode 100644
index ebabb8fc15d..00000000000
--- a/packages/main/src/components/AnalyticalTable/VerticalResizer.module.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.container {
-  overflow: hidden;
-  position: relative;
-  height: 5px;
-  text-align: center;
-  cursor: row-resize;
-  box-sizing: border-box;
-
-  &:hover {
-    background-color: var(--sapContent_DragAndDropActiveColor);
-    color: var(--sapHighlightTextColor);
-  }
-
-  &:before {
-    font-size: 10px;
-    font-family: var(--sapFontFamily);
-    inset-block-start: 0;
-    position: absolute;
-    content: '⦁⦁⦁⦁';
-    line-height: 5px;
-    pointer-events: none;
-  }
-}
-
-.resizer {
-  position: absolute;
-  opacity: 0.5;
-  background-color: var(--sapContent_DragAndDropActiveColor);
-  height: 5px;
-}
diff --git a/packages/main/src/components/AnalyticalTable/VerticalResizer.tsx b/packages/main/src/components/AnalyticalTable/VerticalResizer.tsx
index 6fc313b031a..a07d2f3afc6 100644
--- a/packages/main/src/components/AnalyticalTable/VerticalResizer.tsx
+++ b/packages/main/src/components/AnalyticalTable/VerticalResizer.tsx
@@ -1,9 +1,9 @@
-import { useStylesheet, useI18nBundle } from '@ui5/webcomponents-react-base';
+import { useI18nBundle } from '@ui5/webcomponents-react-base';
 import type { MutableRefObject } from 'react';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { DRAG_TO_RESIZE } from '../../i18n/i18n-defaults.js';
-import { classNames, styleData } from './VerticalResizer.module.css.js';
+import type { ClassNames } from './types/index.js';
 
 interface VerticalResizerProps {
   analyticalTableRef: MutableRefObject<any>;
@@ -15,6 +15,7 @@ interface VerticalResizerProps {
   rowsLength: number;
   visibleRows: number;
   handleOnLoadMore: (e: Event) => void;
+  classNames: ClassNames;
 }
 
 const isTouchEvent = (e, touchEvent) => {
@@ -34,11 +35,10 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
     popInRowHeight,
     rowsLength,
     visibleRows,
-    handleOnLoadMore
+    handleOnLoadMore,
+    classNames
   } = props;
 
-  useStylesheet(styleData, VerticalResizer.displayName);
-
   const startY = useRef(null);
   const verticalResizerRef = useRef(null);
   const [resizerPosition, setResizerPosition] = useState(undefined);
@@ -147,7 +147,7 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
 
   return (
     <div
-      className={classNames.container}
+      className={classNames.verticalResizerContainer}
       ref={verticalResizerRef}
       onMouseDown={handleResizeStart}
       onTouchStart={handleResizeStart}
@@ -158,7 +158,7 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
         isDragging &&
         createPortal(
           <div
-            className={classNames.resizer}
+            className={classNames.verticalResizer}
             style={{ top: resizerPosition.top, left: resizerPosition.left, width: resizerPosition.width }}
           />,
           document.body
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.module.css b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.module.css
deleted file mode 100644
index c630b7f9bcb..00000000000
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.module.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.popover {
-  font-weight: normal;
-
-  &::part(content) {
-    padding: 0;
-  }
-}
-
-.filterIcon {
-  padding-inline-end: 0.5rem;
-  color: var(--sapContent_NonInteractiveIconColor);
-}
-
-.filterText {
-  overflow: visible;
-  padding-inline-end: 0.5rem;
-}
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx
index 42514db0ea8..088c55ca174 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx
@@ -7,7 +7,7 @@ import iconFilter from '@ui5/webcomponents-icons/dist/filter.js';
 import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js';
 import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js';
 import iconSortDescending from '@ui5/webcomponents-icons/dist/sort-descending.js';
-import { enrichEventWithDetails, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
+import { enrichEventWithDetails, useI18nBundle } from '@ui5/webcomponents-react-base';
 import { useEffect, useMemo, useRef } from 'react';
 import { FlexBoxAlignItems } from '../../../../enums/FlexBoxAlignItems.js';
 import { TextAlign } from '../../../../enums/TextAlign.js';
@@ -30,15 +30,13 @@ import { Popover } from '../../../../webComponents/Popover/index.js';
 import { Text } from '../../../../webComponents/Text/index.js';
 import { FlexBox } from '../../../FlexBox/index.js';
 import type { TableInstanceWithPopoverProps } from '../../types/index.js';
-import { classNames, styleData } from './ColumnHeaderModal.module.css.js';
 
 export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => {
   const { setOpen, openerRef } = instance.popoverProps;
   const { column, state, webComponentsReactProperties } = instance;
   const { isRtl, groupBy } = state;
-  const { onGroup, onSort } = webComponentsReactProperties;
+  const { onGroup, onSort, classes: classNames } = webComponentsReactProperties;
 
-  useStylesheet(styleData, ColumnHeaderModal.displayName);
   const showFilter = column.canFilter;
   const showGroup = column.canGroupBy;
   const showSort = column.canSort;
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.module.css b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.module.css
deleted file mode 100644
index 411447f1535..00000000000
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.module.css
+++ /dev/null
@@ -1,33 +0,0 @@
-.container {
-  height: var(--_ui5wcr-AnalyticalTableExpandButtonHeight);
-  margin-inline-end: 0.125rem;
-  flex-shrink: 0;
-}
-
-.icon {
-  color: var(--sapContent_IconColor);
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  &::part(root) {
-    padding: 0.375rem;
-    width: var(--_ui5wcr-AnalyticalTableExpandIconHeight);
-    height: var(--_ui5wcr-AnalyticalTableExpandIconHeight);
-  }
-}
-
-.button {
-  color: var(--sapTextColor);
-  height: 100%;
-  font-size: 0.75rem;
-}
-
-.nonExpandableCellSpacer {
-  width: var(--_ui5wcr-AnalyticalTableExpandIndicatorWidth);
-  flex-shrink: 0;
-}
-
-.withExpandableButton {
-  margin-inline-end: 0.5rem;
-}
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
index 149fa93585b..13dc35b807b 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/Expandable.tsx
@@ -2,11 +2,10 @@ import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
 import IconMode from '@ui5/webcomponents/dist/types/IconMode.js';
 import iconNavDownArrow from '@ui5/webcomponents-icons/dist/navigation-down-arrow.js';
 import iconNavRightArrow from '@ui5/webcomponents-icons/dist/navigation-right-arrow.js';
-import { CssSizeVariables, useCurrentTheme, useStylesheet } from '@ui5/webcomponents-react-base';
+import { CssSizeVariables, useCurrentTheme } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import { Button, Icon } from '../../../../webComponents/index.js';
 import { RenderColumnTypes } from '../../types/index.js';
-import { classNames, styleData } from './Expandable.module.css.js';
 
 const getPadding = (level) => {
   switch (level) {
@@ -25,9 +24,13 @@ const getPadding = (level) => {
 
 export const Expandable = (props) => {
   const { cell, row, column, visibleColumns: columns, webComponentsReactProperties } = props;
-  const { renderRowSubComponent, alwaysShowSubComponent, translatableTexts } = webComponentsReactProperties;
+  const {
+    renderRowSubComponent,
+    alwaysShowSubComponent,
+    translatableTexts,
+    classes: classNames
+  } = webComponentsReactProperties;
   const currentTheme = useCurrentTheme();
-  useStylesheet(styleData, Expandable.displayName);
   const shouldRenderButton = currentTheme === 'sap_horizon' || currentTheme === 'sap_horizon_dark';
   const tableColumns = columns.filter(
     ({ id }) =>
@@ -69,7 +72,7 @@ export const Expandable = (props) => {
                   mode={IconMode.Interactive}
                   name={row.isExpanded ? iconNavDownArrow : iconNavRightArrow}
                   data-component-name="AnalyticalTableExpandIcon"
-                  className={classNames.icon}
+                  className={classNames.expandableIcon}
                 />
               )}
             </span>
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/PopIn.module.css b/packages/main/src/components/AnalyticalTable/defaults/Column/PopIn.module.css
deleted file mode 100644
index f2498c57458..00000000000
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/PopIn.module.css
+++ /dev/null
@@ -1,16 +0,0 @@
-.container {
-  width: 100%;
-}
-
-.defaultCell > :first-child {
-  padding-block-start: 0.25rem;
-}
-
-.header {
-  color: var(--sapContent_LabelColor);
-  height: 16px;
-}
-
-.gap {
-  gap: 0.5rem;
-}
diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/PopIn.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/PopIn.tsx
index b94d964d325..b5a850722a0 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/Column/PopIn.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/Column/PopIn.tsx
@@ -1,4 +1,3 @@
-import { useStylesheet } from '@ui5/webcomponents-react-base';
 import { makeRenderer } from 'react-table';
 import { AnalyticalTablePopinDisplay } from '../../../../enums/AnalyticalTablePopinDisplay.js';
 import { FlexBoxAlignItems } from '../../../../enums/FlexBoxAlignItems.js';
@@ -8,14 +7,19 @@ import { Text } from '../../../../webComponents/Text/index.js';
 import { FlexBox } from '../../../FlexBox/index.js';
 import type { TableInstance } from '../../types/index.js';
 import { RenderColumnTypes } from '../../types/index.js';
-import { classNames, styleData } from './PopIn.module.css.js';
 
 export const PopIn = (instance: TableInstance) => {
-  const { state, contentToRender, cell, row, internalRowHeight } = instance;
-  useStylesheet(styleData, PopIn.displayName);
+  const {
+    state,
+    contentToRender,
+    cell,
+    row,
+    internalRowHeight,
+    webComponentsReactProperties: { classes: classNames }
+  } = instance;
 
   return (
-    <FlexBox direction={FlexBoxDirection.Column} className={classNames.container}>
+    <FlexBox direction={FlexBoxDirection.Column} className={classNames.popInContainer}>
       <FlexBox
         alignItems={
           contentToRender !== RenderColumnTypes.Grouped && contentToRender !== RenderColumnTypes.Expandable
@@ -71,7 +75,7 @@ export const PopIn = (instance: TableInstance) => {
               key={id}
             >
               {popinDisplay !== AnalyticalTablePopinDisplay.WithoutHeader && column?.Header && (
-                <div className={classNames.header} data-component-name="AnalyticalTablePopinHeaderContainer">
+                <div className={classNames.popInHeader} data-component-name="AnalyticalTablePopinHeaderContainer">
                   {renderHeader()}:
                 </div>
               )}
diff --git a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx
index 9929bfd968f..73a8a9a8dd2 100644
--- a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx
@@ -19,7 +19,7 @@ export const DefaultFilterComponent = ({ column }: FilterProps) => {
     }
   };
 
-  return <Input onInput={handleInput} value={column.filterValue} showClearIcon onKeyDown={handleKeyDown} />;
+  return <Input onInput={handleInput} value={column.filterValue ?? ''} showClearIcon onKeyDown={handleKeyDown} />;
 };
 
 DefaultFilterComponent.displayName = 'DefaultFilterComponent';
diff --git a/packages/main/src/components/AnalyticalTable/index.tsx b/packages/main/src/components/AnalyticalTable/index.tsx
index e1fa2fdcd80..e721df12090 100644
--- a/packages/main/src/components/AnalyticalTable/index.tsx
+++ b/packages/main/src/components/AnalyticalTable/index.tsx
@@ -767,6 +767,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
                     columnVirtualizer={columnVirtualizer}
                     uniqueId={uniqueId}
                     showVerticalEndBorder={showVerticalEndBorder}
+                    classNames={classNames}
                   />
                 )
               );
@@ -836,6 +837,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
               scrollContainerRef={scrollContainerRef}
               parentRef={parentRef}
               nativeScrollbar={className?.includes('ui5-content-native-scrollbars')}
+              classNames={classNames}
             />
           )}
         </FlexBox>
@@ -850,6 +852,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
             rowsLength={rows.length}
             visibleRows={internalVisibleRowCount}
             handleOnLoadMore={handleOnLoadMore}
+            classNames={classNames}
           />
         )}
       </div>
diff --git a/packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.module.css b/packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.module.css
deleted file mode 100644
index 42ff7f169f6..00000000000
--- a/packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.module.css
+++ /dev/null
@@ -1,25 +0,0 @@
-.headerSection {
-  box-sizing: border-box;
-  border-block-start: var(--_ui5wcr-AnalyticalTable-OuterBorderBlock);
-  border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterBorderInline);
-  border-block-end: var(--_ui5wcr-AnalyticalTable-HeaderBorderWidth) solid var(--sapList_HeaderBorderColor);
-  background-color: var(--sapList_HeaderBackground);
-  border-inline-start: 1px solid var(--sapList_BorderColor);
-  margin-inline-start: -1px;
-  width: calc(var(--sapScrollBar_Dimension) + 2px);
-}
-.scrollbar {
-  overflow-y: auto;
-  border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterBorderInline);
-  border-block-end: 1px solid var(--sapList_TableFooterBorder);
-  border-inline-start: 1px solid var(--sapList_BorderColor);
-  margin-inline-start: -1px;
-  box-sizing: border-box;
-}
-
-.bottomSection {
-  flex-grow: 1;
-  background-color: var(--sapList_FooterBackground);
-  box-sizing: border-box;
-  border-inline-end: var(--_ui5wcr-AnalyticalTable-OuterBorderInline);
-}
diff --git a/packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.tsx b/packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.tsx
index 801fe6acbc8..720143795fa 100644
--- a/packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.tsx
+++ b/packages/main/src/components/AnalyticalTable/scrollbars/VerticalScrollbar.tsx
@@ -1,10 +1,10 @@
-import { ThemingParameters, useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
+import { ThemingParameters, useSyncRef } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { MutableRefObject, RefObject } from 'react';
 import { forwardRef, useEffect, useRef } from 'react';
 import { FlexBoxDirection } from '../../../enums/index.js';
 import { FlexBox } from '../../FlexBox/index.js';
-import { classNames, styleData } from './VerticalScrollbar.module.css.js';
+import type { ClassNames } from '../types/index.js';
 
 interface VerticalScrollbarProps {
   internalRowHeight: number;
@@ -14,6 +14,7 @@ interface VerticalScrollbarProps {
   scrollContainerRef: MutableRefObject<HTMLDivElement>;
   parentRef: MutableRefObject<HTMLDivElement>;
   nativeScrollbar: boolean;
+  classNames: ClassNames;
 }
 
 export const VerticalScrollbar = forwardRef<HTMLDivElement, VerticalScrollbarProps>((props, ref) => {
@@ -24,11 +25,11 @@ export const VerticalScrollbar = forwardRef<HTMLDivElement, VerticalScrollbarPro
     tableBodyHeight,
     scrollContainerRef,
     nativeScrollbar,
-    parentRef
+    parentRef,
+    classNames
   } = props;
   const [componentRef, containerRef] = useSyncRef(ref);
   const scrollElementRef = useRef(null);
-  useStylesheet(styleData, VerticalScrollbar.displayName);
 
   const hasHorizontalScrollbar = tableRef?.current?.offsetWidth !== tableRef?.current?.scrollWidth;
 
diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts
index dd9bebd0a6d..5d0f49558cf 100644
--- a/packages/main/src/components/AnalyticalTable/types/index.ts
+++ b/packages/main/src/components/AnalyticalTable/types/index.ts
@@ -15,6 +15,9 @@ import type {
 } from '../../../enums/index.js';
 import type { CommonProps } from '../../../types/index.js';
 import type { PopoverDomRef } from '../../../webComponents/Popover/index.js';
+import type { classNames } from '../AnalyticalTable.module.css.js';
+
+export type ClassNames = typeof classNames;
 
 export enum RenderColumnTypes {
   Filter = 'Filter',
@@ -208,7 +211,7 @@ export interface WCRPropertiesType {
   tagNamesWhichShouldNotSelectARow: Set<string>;
   tableRef: MutableRefObject<DivWithCustomScrollProp>;
   selectionBehavior: AnalyticalTablePropTypes['selectionBehavior'];
-  classes: Record<string, string>;
+  classes: ClassNames;
   onAutoResize: AnalyticalTablePropTypes['onAutoResize'];
   onRowClick: AnalyticalTablePropTypes['onRowClick'];
   onRowExpandChange: AnalyticalTablePropTypes['onRowExpandChange'];