diff --git a/packages/main/package.json b/packages/main/package.json
index e36b6a2a68c..8553eddd832 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -68,14 +68,14 @@
       "types": "./dist/components/MessageBox/index.d.ts",
       "default": "./dist/components/MessageBox/index.js"
     },
+    "./MessageItem": {
+      "types": "./dist/components/MessageItem/index.d.ts",
+      "default": "./dist/components/MessageItem/index.js"
+    },
     "./MessageView": {
       "types": "./dist/components/MessageView/index.d.ts",
       "default": "./dist/components/MessageView/index.js"
     },
-    "./MessageItem": {
-      "types": "./dist/components/MessageView/MessageItem.d.ts",
-      "default": "./dist/components/MessageView/MessageItem.js"
-    },
     "./MessageViewButton": {
       "types": "./dist/components/MessageViewButton/index.d.ts",
       "default": "./dist/components/MessageViewButton/index.js"
@@ -132,14 +132,14 @@
       "types": "./dist/components/ThemeProvider/index.d.ts",
       "default": "./dist/components/ThemeProvider/index.js"
     },
+    "./VariantItem": {
+      "types": "./dist/components/VariantItem/index.d.ts",
+      "default": "./dist/components/VariantItem/index.js"
+    },
     "./VariantManagement": {
       "types": "./dist/components/VariantManagement/index.d.ts",
       "default": "./dist/components/VariantManagement/index.js"
     },
-    "./VariantItem": {
-      "types": "./dist/components/VariantManagement/VariantItem.d.ts",
-      "default": "./dist/components/VariantManagement/VariantItem.js"
-    },
     "./Avatar": {
       "types": "./dist/webComponents/Avatar/index.d.ts",
       "default": "./dist/webComponents/Avatar/index.js"
diff --git a/packages/main/src/components/FilterBar/FilterBar.cy.tsx b/packages/main/src/components/FilterBar/FilterBar.cy.tsx
index f55a7e92af2..1645b8c7ca0 100644
--- a/packages/main/src/components/FilterBar/FilterBar.cy.tsx
+++ b/packages/main/src/components/FilterBar/FilterBar.cy.tsx
@@ -11,8 +11,8 @@ import {
   Token,
 } from '../../webComponents/index.js';
 import { FilterGroupItem } from '../FilterGroupItem/index.js';
+import { VariantItem } from '../VariantItem/index.js';
 import { VariantManagement } from '../VariantManagement/index.js';
-import { VariantItem } from '../VariantManagement/VariantItem.js';
 import type { FilterBarPropTypes } from './index.js';
 import { FilterBar } from './index.js';
 import { cypressPassThroughTestsFactory, mountWithCustomTagName } from '@/cypress/support/utils';
diff --git a/packages/main/src/components/FilterBar/FilterBar.stories.tsx b/packages/main/src/components/FilterBar/FilterBar.stories.tsx
index 6b7217c3896..5e75849a3a2 100644
--- a/packages/main/src/components/FilterBar/FilterBar.stories.tsx
+++ b/packages/main/src/components/FilterBar/FilterBar.stories.tsx
@@ -27,8 +27,8 @@ import {
 import { Text } from '../../webComponents/Text/index.js';
 import { FilterGroupItem } from '../FilterGroupItem/index.js';
 import { FlexBox } from '../FlexBox/index.js';
+import { VariantItem } from '../VariantItem/index.js';
 import { VariantManagement } from '../VariantManagement/index.js';
-import { VariantItem } from '../VariantManagement/VariantItem.js';
 import type { FilterBarPropTypes } from './index.js';
 import { FilterBar } from './index.js';
 
diff --git a/packages/main/src/components/MessageView/MessageItem.module.css b/packages/main/src/components/MessageItem/MessageItem.module.css
similarity index 100%
rename from packages/main/src/components/MessageView/MessageItem.module.css
rename to packages/main/src/components/MessageItem/MessageItem.module.css
diff --git a/packages/main/src/components/MessageView/MessageItem.tsx b/packages/main/src/components/MessageItem/index.tsx
similarity index 98%
rename from packages/main/src/components/MessageView/MessageItem.tsx
rename to packages/main/src/components/MessageItem/index.tsx
index 0383de590b4..271a4e7f3ce 100644
--- a/packages/main/src/components/MessageView/MessageItem.tsx
+++ b/packages/main/src/components/MessageItem/index.tsx
@@ -20,8 +20,8 @@ import type { LinkPropTypes } from '../../webComponents/Link/index.js';
 import type { ListItemCustomDomRef, ListItemCustomPropTypes } from '../../webComponents/ListItemCustom/index.js';
 import { ListItemCustom } from '../../webComponents/ListItemCustom/index.js';
 import { FlexBox } from '../FlexBox/index.js';
+import { getIconNameForType, getValueStateMap } from '../MessageView/utils.js';
 import { classNames, styleData } from './MessageItem.module.css.js';
-import { getIconNameForType, getValueStateMap } from './utils.js';
 
 export interface MessageItemPropTypes extends Pick<ListItemCustomPropTypes, 'accessibleName' | 'tooltip'>, CommonProps {
   /**
diff --git a/packages/main/src/components/MessageView/MessageView.cy.tsx b/packages/main/src/components/MessageView/MessageView.cy.tsx
index 3def72073e2..c0491855148 100644
--- a/packages/main/src/components/MessageView/MessageView.cy.tsx
+++ b/packages/main/src/components/MessageView/MessageView.cy.tsx
@@ -2,7 +2,7 @@ import WrappingType from '@ui5/webcomponents/dist/types/WrappingType.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import { Link } from '@ui5/webcomponents-react';
 import { useRef } from 'react';
-import { MessageItem } from './MessageItem';
+import { MessageItem } from '../MessageItem/index.js';
 import { MessageView } from './index.js';
 import { Dialog } from '../../webComponents/Dialog/index.js';
 
diff --git a/packages/main/src/components/MessageView/MessageView.mdx b/packages/main/src/components/MessageView/MessageView.mdx
index 77f013181e2..4d18db23517 100644
--- a/packages/main/src/components/MessageView/MessageView.mdx
+++ b/packages/main/src/components/MessageView/MessageView.mdx
@@ -2,7 +2,7 @@ import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/comp
 import { Canvas, Description, Markdown, Meta } from '@storybook/addon-docs/blocks';
 import * as ComponentStories from './MessageView.stories';
 import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
-import { MessageItem } from './MessageItem';
+import { MessageItem } from '../MessageItem/index';
 import { MessageViewButton } from '../MessageViewButton';
 
 <Meta of={ComponentStories} />
diff --git a/packages/main/src/components/MessageView/MessageView.stories.tsx b/packages/main/src/components/MessageView/MessageView.stories.tsx
index 84aa32a8e33..457ed414ee7 100644
--- a/packages/main/src/components/MessageView/MessageView.stories.tsx
+++ b/packages/main/src/components/MessageView/MessageView.stories.tsx
@@ -14,8 +14,8 @@ import { Link } from '../../webComponents/Link/index.js';
 import { ResponsivePopover } from '../../webComponents/ResponsivePopover/index.js';
 import { Title } from '../../webComponents/Title/index.js';
 import { FlexBox } from '../FlexBox/index.js';
+import { MessageItem } from '../MessageItem/index.js';
 import { MessageViewButton } from '../MessageViewButton/index.js';
-import { MessageItem } from './MessageItem.js';
 import type { MessageViewDomRef } from './index.js';
 import { MessageView } from './index.js';
 
diff --git a/packages/main/src/components/MessageView/index.tsx b/packages/main/src/components/MessageView/index.tsx
index dae4926db10..4612ba611a1 100644
--- a/packages/main/src/components/MessageView/index.tsx
+++ b/packages/main/src/components/MessageView/index.tsx
@@ -30,7 +30,7 @@ import type { SegmentedButtonPropTypes } from '../../webComponents/SegmentedButt
 import { SegmentedButtonItem } from '../../webComponents/SegmentedButtonItem/index.js';
 import { Title } from '../../webComponents/Title/index.js';
 import { FlexBox } from '../FlexBox/index.js';
-import type { MessageItemPropTypes } from './MessageItem.js';
+import type { MessageItemPropTypes } from '../MessageItem/index.js';
 import { classNames, styleData } from './MessageView.module.css.js';
 import { getIconNameForType, getValueStateMap } from './utils.js';
 
diff --git a/packages/main/src/components/VariantManagement/VariantItem.module.css b/packages/main/src/components/VariantItem/VariantItem.module.css
similarity index 100%
rename from packages/main/src/components/VariantManagement/VariantItem.module.css
rename to packages/main/src/components/VariantItem/VariantItem.module.css
diff --git a/packages/main/src/components/VariantManagement/VariantItem.tsx b/packages/main/src/components/VariantItem/index.tsx
similarity index 100%
rename from packages/main/src/components/VariantManagement/VariantItem.tsx
rename to packages/main/src/components/VariantItem/index.tsx
diff --git a/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx b/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx
index da6d8e05119..d6868c38473 100644
--- a/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx
+++ b/packages/main/src/components/VariantManagement/ManageViewsDialog.tsx
@@ -32,10 +32,10 @@ import type { TablePropTypes } from '../../webComponents/Table/index.js';
 import { TableHeaderCell } from '../../webComponents/TableHeaderCell/index.js';
 import { TableHeaderRow } from '../../webComponents/TableHeaderRow/index.js';
 import { FlexBox } from '../FlexBox/index.js';
+import type { VariantItemPropTypes } from '../VariantItem/index.js';
 import { classNames, styleData } from './ManageViewsDialog.module.css.js';
 import { ManageViewsTableRows } from './ManageViewsTableRows.js';
 import type { VariantManagementPropTypes } from './types.js';
-import type { VariantItemPropTypes } from './VariantItem.js';
 
 type ManageViewsDialogChildType = boolean | undefined | null | ReactElement<VariantItemPropTypes>;
 
diff --git a/packages/main/src/components/VariantManagement/ManageViewsTableRows.tsx b/packages/main/src/components/VariantManagement/ManageViewsTableRows.tsx
index a536691dc37..44c3343aa51 100644
--- a/packages/main/src/components/VariantManagement/ManageViewsTableRows.tsx
+++ b/packages/main/src/components/VariantManagement/ManageViewsTableRows.tsx
@@ -27,7 +27,7 @@ import { TableCell } from '../../webComponents/TableCell/index.js';
 import { TableRow } from '../../webComponents/TableRow/index.js';
 import { TableRowAction } from '../../webComponents/TableRowAction/index.js';
 import { Text } from '../../webComponents/Text/index.js';
-import type { VariantItemPropTypes } from './VariantItem.js';
+import type { VariantItemPropTypes } from '../VariantItem/index.js';
 
 interface ManageViewsTableRowsProps extends Partial<VariantItemPropTypes> {
   variantNames: string[];
diff --git a/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx b/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx
index 41a977ddafe..3905424265f 100644
--- a/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx
+++ b/packages/main/src/components/VariantManagement/VariantManagement.cy.tsx
@@ -1,8 +1,8 @@
 import TitleLevel from '@ui5/webcomponents/dist/types/TitleLevel.js';
 import ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js';
 import { useState } from 'react';
-import type { VariantItemPropTypes } from './VariantItem';
-import { VariantItem } from './VariantItem';
+import type { VariantItemPropTypes } from '../VariantItem/index.js';
+import { VariantItem } from '../VariantItem/index.js';
 import { WithCustomValidation as WithCustomValidationStory } from './VariantManagement.stories';
 import type { VariantManagementPropTypes } from './index.js';
 import { VariantManagement } from './index.js';
diff --git a/packages/main/src/components/VariantManagement/VariantManagement.mdx b/packages/main/src/components/VariantManagement/VariantManagement.mdx
index cc8609b6500..e3d0ca61c4c 100644
--- a/packages/main/src/components/VariantManagement/VariantManagement.mdx
+++ b/packages/main/src/components/VariantManagement/VariantManagement.mdx
@@ -2,7 +2,7 @@ import { ControlsWithNote, DocsHeader, Footer } from '@sb/components';
 import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
 import { ArgTypes, Canvas, Description, Markdown, Meta } from '@storybook/addon-docs/blocks';
 import { MessageStrip } from '../../webComponents/index';
-import { VariantItem } from './VariantItem';
+import { VariantItem } from '../VariantItem/index';
 import * as ComponentStories from './VariantManagement.stories';
 
 <Meta of={ComponentStories} />
diff --git a/packages/main/src/components/VariantManagement/VariantManagement.stories.tsx b/packages/main/src/components/VariantManagement/VariantManagement.stories.tsx
index 2e7a0658d38..33b5190e2b3 100644
--- a/packages/main/src/components/VariantManagement/VariantManagement.stories.tsx
+++ b/packages/main/src/components/VariantManagement/VariantManagement.stories.tsx
@@ -15,8 +15,8 @@ import { Select } from '../../webComponents/Select/index.js';
 import { Text } from '../../webComponents/Text/index.js';
 import { FilterBar } from '../FilterBar/index.js';
 import { FilterGroupItem } from '../FilterGroupItem/index.js';
-import type { VariantItemPropTypes } from './VariantItem.js';
-import { VariantItem } from './VariantItem.js';
+import type { VariantItemPropTypes } from '../VariantItem/index.js';
+import { VariantItem } from '../VariantItem/index.js';
 import { VariantManagement } from './index.js';
 
 const meta = {
diff --git a/packages/main/src/components/VariantManagement/index.tsx b/packages/main/src/components/VariantManagement/index.tsx
index e4680107975..706cb44a1df 100644
--- a/packages/main/src/components/VariantManagement/index.tsx
+++ b/packages/main/src/components/VariantManagement/index.tsx
@@ -39,11 +39,11 @@ import type { ResponsivePopoverDomRef } from '../../webComponents/ResponsivePopo
 import { ResponsivePopover } from '../../webComponents/ResponsivePopover/index.js';
 import { Title } from '../../webComponents/Title/index.js';
 import { FlexBox } from '../FlexBox/index.js';
+import type { VariantItemPropTypes } from '../VariantItem/index.js';
 import type { ManageViewsDialogPropTypes } from './ManageViewsDialog.js';
 import { ManageViewsDialog } from './ManageViewsDialog.js';
 import { SaveViewDialog } from './SaveViewDialog.js';
 import type { SelectedVariantWithStringBool, VariantManagementPropTypes } from './types.js';
-import type { VariantItemPropTypes } from './VariantItem.js';
 import { classNames, styleData } from './VariantManagement.module.css.js';
 
 const booleanProps = {
diff --git a/packages/main/src/components/VariantManagement/types.ts b/packages/main/src/components/VariantManagement/types.ts
index be6337e1414..3ad318c2a81 100644
--- a/packages/main/src/components/VariantManagement/types.ts
+++ b/packages/main/src/components/VariantManagement/types.ts
@@ -9,7 +9,7 @@ import type { InputDomRef } from '../../webComponents/Input/index.js';
 import type { ListDomRef } from '../../webComponents/List/index.js';
 import type { ResponsivePopoverPropTypes } from '../../webComponents/ResponsivePopover/index.js';
 import type { TitlePropTypes } from '../../webComponents/Title/index.js';
-import type { VariantItemPropTypes } from './VariantItem.js';
+import type { VariantItemPropTypes } from '../VariantItem/index.js';
 
 export interface SelectedVariantWithStringBool
   extends Omit<
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index bc0f0f22277..09af9552b51 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -14,8 +14,8 @@ export * from './components/FilterGroupItem/index.js';
 export * from './components/FlexBox/index.js';
 export * from './components/Grid/index.js';
 export * from './components/MessageBox/index.js';
+export * from './components/MessageItem/index.js';
 export * from './components/MessageView/index.js';
-export * from './components/MessageView/MessageItem.js';
 export * from './components/MessageViewButton/index.js';
 export * from './components/Modals/index.js';
 export * from './components/NumericSideIndicator/index.js';
@@ -28,8 +28,8 @@ export * from './components/SelectDialog/index.js';
 export * from './components/SplitterElement/index.js';
 export * from './components/SplitterLayout/index.js';
 export * from './components/ThemeProvider/index.js';
+export * from './components/VariantItem/index.js';
 export * from './components/VariantManagement/index.js';
-export * from './components/VariantManagement/VariantItem.js';
 export { withWebComponent } from './internal/withWebComponent.js';
 export type { WithWebComponentPropTypes } from './internal/withWebComponent.js';
 export * from './enums/index.js';
diff --git a/packages/main/src/internal/MessageViewContext.ts b/packages/main/src/internal/MessageViewContext.ts
index 870e620b25b..29bd81a3b79 100644
--- a/packages/main/src/internal/MessageViewContext.ts
+++ b/packages/main/src/internal/MessageViewContext.ts
@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import type { MessageItemPropTypes } from '../components/MessageView/MessageItem.js';
+import type { MessageItemPropTypes } from '../components/MessageItem/index.js';
 
 export type SelectedMessage = MessageItemPropTypes & { titleTextStr: string };
 
diff --git a/packages/main/src/internal/VariantManagementContext.ts b/packages/main/src/internal/VariantManagementContext.ts
index 15e13e6a1e4..9cb82782490 100644
--- a/packages/main/src/internal/VariantManagementContext.ts
+++ b/packages/main/src/internal/VariantManagementContext.ts
@@ -1,5 +1,5 @@
 import { createContext } from 'react';
-import type { VariantItemPropTypes } from '../components/VariantManagement/VariantItem.js';
+import type { VariantItemPropTypes } from '../components/VariantItem/index.js';
 import type { ListItemStandardDomRef } from '../webComponents/ListItemStandard/index.js';
 
 interface VariantManagementContextTypes {