diff --git a/.storybook/components/DocsHeader.tsx b/.storybook/components/DocsHeader.tsx
index cc7de4195f7..2089938f787 100644
--- a/.storybook/components/DocsHeader.tsx
+++ b/.storybook/components/DocsHeader.tsx
@@ -1,15 +1,7 @@
 import { Description, DocsContext, Subtitle, Title } from '@storybook/addon-docs';
 import copyIcon from '@ui5/webcomponents-icons/dist/copy';
 import ButtonDesign from '@ui5/webcomponents/dist/types/ButtonDesign.js';
-import {
-  Button,
-  FlexBox,
-  FlexBoxAlignItems,
-  Label,
-  Link,
-  Text,
-  ThemeProvider
-} from '@ui5/webcomponents-react';
+import { Button, FlexBox, FlexBoxAlignItems, Label, Link, Text, ThemeProvider } from '@ui5/webcomponents-react';
 import { clsx } from 'clsx';
 import { useContext } from 'react';
 import { useGetSubComponentsOfModule } from '../utils';
diff --git a/docs/MigrationGuide.archive.md b/docs/MigrationGuide.archive.md
index c0377c0be5c..6d77c9787d3 100644
--- a/docs/MigrationGuide.archive.md
+++ b/docs/MigrationGuide.archive.md
@@ -1,5 +1,249 @@
 # Migration Guide Archive for older versions
 
+## From 0.28.x to 1.0.1
+
+### Removal of deprecated props
+
+The following props were deprecated in previous versions and have now been removed.
+
+**ActionSheet**
+
+The prop `alwaysShowHeader` has been removed as is not specified by the Fiori Design Guidelines. <br />
+In addition, the `a11yConfig.actionSheetMobileContent.ariaLabel` has been removed as well. You can use the `accessibleName` prop as replacement.
+
+**AnalyticalTable**
+
+The props `onRowSelected` and `onColumnsReordered` have been removed in favor for a more streamlined naming pattern. <br />
+Please use the new prop names `onRowSelect` and `onColumnsReorder`.
+
+**DynamicPageTitle**
+
+The props `actionsOverflowButton` and `navigationActionsOverflowButton` have been removed. <br />
+If needed, you can pass a custom overflow button for the respective toolbar by using the `actionsToolbarProps={{ overflowButton: <Button />}}` and `navigationActionsToolbarProps={{ overflowButton: <Button />}}` props.
+
+In addition, the `onToolbarOverflowChange` event has been removed as well. Previously, this event contained a property `origin` with the value of `actions` or `navigationActions` in order to distinguish between the toolbars. <br />
+Please use `onOverflowChange` of the respective toolbar props object instead (`actionsToolbarProps={{ onOverflowChange: yourHandler }}` and `navigationActionsToolbarProps={{ onOverflowChange: yourHandlerForNavigationActions }}`).
+
+### FilterBar: implement new design specification
+
+The Design for the `FilterBar` component had some major updates, so we've updated the component accordingly.
+One of these changes is, that the optional search field (passed via the `search` prop), is no longer available in the `Filters` dialog.
+
+**The following props are removed without replacement as they are no longer specified by the design:**
+
+- `showClearButton`
+- `showGo`
+- `onFiltersDialogClear`
+- `showSearchOnFiltersDialog`
+- `loading` <br />
+  In order to place a loading indicator on the `FilterBar`, please wrap it into the `BusyIndicator` component.
+
+**The following props have been renamed without further modifications:**
+
+- `variant` --> `header`
+- `showRestoreButton` --> `showResetButton`
+
+**The following props have been renamed and changed their logic for a more streamlined API:**
+
+- `filterBarExpanded` --> `filterBarCollapsed` <br />
+  Previously, `filterBarExpanded` was defaulted to `true`. This prop has been replaced by `filterBarCollapsed` (inactive by default).
+- `showFilterConfiguration` --> `hideFilterConfiguration` <br />
+  Previously, `showFilterConfiguration` was defaulted to `true`. This prop has been replaced by `hideFilterConfiguration` (inactive by default).
+- `useToolbar` --> `hideToolbar` <br />
+  If you wanted to hide the toolbar of the `FilterBar`, you could set the prop `useToolbar` to `false` in earlier versions. This prop has been replaced by `hideToolbar={true}`.
+
+**The following event handlers have changed their payload:**
+
+- `onFiltersDialogSelectionChange` <br />
+  The event type changed to `UI5CustomEvent` and the properties `elements` and `toggledElements` have been removed. <br />
+  You can now use `element` to access the most recently interacted row and `checked` to get the current selection state.
+  If you need to access all selected rows, you can use the `selectedRows` property.
+- `onRestore` and `onClear` <br />
+  The `dialogSearch` property has been removed from the event payload as the search field in the dialog is no longer available.
+- `onGo` <br />
+  The `toggledElements` property has been removed
+- `onFiltersDialogOpen` <br />
+  The property `dialog` has been removed. If you need to access the filter dialog HTML element, you might use the new prop `onAfterFiltersDialogOpen`
+  on the `FilterBar` which is fired after the filter dialog has been opened.
+
+**Migration Example (removed props and event handlers are not listed for brevity):**
+
+```jsx
+// component with 0.28.x
+<FilterBar
+    variant={<Title>Header</Title>}
+    showRestoreButton
+    filterBarExpanded={false}
+    showFilterConfiguration={false}
+    useToolbar={false}
+/>
+
+// becomes with 1.0.0
+<FilterBar
+    header={<Title>Header</Title>}
+    showResetButton
+    filterBarCollapsed
+    hideFilterConfiguration
+    hideToolbar
+/>
+```
+
+### VariantManagement: removed option to show the "Cancel" button
+
+The "Cancel" button is not part of the design guidelines anymore, so the prop `showCancelButton` has been removed without replacement.
+
+## From 0.27.x to 0.28.0
+
+### AnalyticalTable: Scaling the table
+
+Scaling the table via the CSS `scale()` function is now only supported if the abscissa (`sx`) is passed to the `scaleXFactor` prop. `scaleXFactor` only accepts values of type `number`.
+
+Before 0.28.0:
+
+```jsx
+<div style={{ transform: 'scale(0.5)' }}>
+  <AnalyticalTable data={data} columns={columns} />
+</div>
+```
+
+Now:
+
+```jsx
+<div style={{ transform: 'scale(0.5)' }}>
+  <AnalyticalTable data={data} columns={columns} scaleXFactor={0.5} />
+</div>
+```
+
+### MessageItem: new default value for `type`
+
+The default value `type` value of the `MessageItem` component has been changed from `ValueState.None` to `ValueState.Error`.
+
+### ObjectPage: `portalContainer` prop removed
+
+The prop `portalContainer` has been removed from the `ObjectPage` as it is not used anymore.
+
+## From 0.25.x to 0.26.0
+
+### Removed deprecated entrypoints
+
+In version 0.26.0, we have removed several legacy exports which have been deprecated a couple of months ago.
+This affects all exports using the following pattern:
+
+```js
+import { COMPONENT_NAME } from '@ui5/webcomponents-react/dist/COMPONENT_NAME';
+import { UTIL_NAME } from '@ui5/webcomponents-react-base/dist/UTIL_NAME';
+import { CHART_NAME } from '@ui5/webcomponents-react-charts/dist/CHART_NAME';
+```
+
+You can now shorten all your imports by removing the `/dist/NAME` part to match the following pattern:
+
+```js
+import { COMPONENT_NAME } from '@ui5/webcomponents-react';
+import { UTIL_NAME } from '@ui5/webcomponents-react-base';
+import { CHART_NAME } from '@ui5/webcomponents-react-charts';
+```
+
+In case the file you are trying to import is not available, please raise an [issue](https://github.com/SAP/ui5-webcomponents-react/issues/new?labels=bug&template=bug_report.md).
+
+### Removed polyfills
+
+In 0.26.0, we have removed the polyfill imports `@ui5/webcomponents-react-base/polyfill/Safari` (all features supported now) and `@ui5/webcomponents-react-base/polyfill/IE11` (end of life).
+As a consequence, the internal dependencies of `@ui5/webcomponents-react-base` are cleaned up as well,
+so you'll most likely need to install `resize-observer-polyfill` on your own for running tests with Jest (see next section).
+
+```shell
+npm install resize-observer-polyfill --save-dev
+# or if you are using yarn
+yarn add resize-observer-polyfill --dev
+```
+
+### Improved Jest Setup
+
+In order to run Tests with Jest, there has always been the need of adding additional polyfills to the Jest environment.
+With 0.26.0, things are changing a little:
+
+1. You have to install `resize-observer-polyfill` on your own because it's not longer a dependency of `@ui5/webcomponents-react-base`.
+
+```
+npm install resize-observer-polyfill --save-dev
+```
+
+2. We now offer an improved way of adding the additional APIs to the Jest environment by exposing a file which is setting up the
+   jest environment for you. You can import it via `import '@ui5/webcomponents-react/jestSetup.js';`.
+
+If you are using `create-react-app`, your simplified `src/setupTests.js` file looks like:
+
+```js
+import ResizeObserverPolyfill from 'resize-observer-polyfill';
+import '@ui5/webcomponents-react/jestSetup.js';
+
+window.ResizeObserver = ResizeObserverPolyfill;
+```
+
+### New API for `AnalyticalCardHeader`
+
+The `AnalyticalCardHeader` component has been refactored to match the latest design specifications.
+As a consequence, the API has changed:
+
+```jsx
+function OldApi() {
+  return (
+    <AnalyticalCardHeader
+      titleText="Title"
+      subtitleText="Subtitle"
+      arrowIndicator={DeviationIndicator.Up} // renamed to `trend`
+      showIndicator={true} // removed, please use `trend={DeviationIndicator.None}` in future
+      indicatorState={ValueState.Error} // removed without replacement
+      value="100"
+      unit="k" // renamed to `scale`
+      valueState={ValueState.Success} // renamed to `state`, allowed enum values coming from `ValueColor`
+      target="100" // replaced with `children`. Use the `NumericSideIndicator` component.
+      deviation="50" // replaced with `children`. Use the `NumericSideIndicator` component.
+      description="Additional Description"
+      counter="Hello Counter" // renamed to `status`
+      counterState={ValueState.Error} // removed without replacement
+      currency="CURRENCY" // renamed to `unitOfMeasurement`
+      onClick={(e) => {}}
+    />
+  );
+}
+
+// will become
+
+function NewAPI() {
+  return (
+    <AnalyticalCardHeader
+      titleText="Title"
+      subtitleText="Subtitle"
+      trend={DeviationIndicator.Up}
+      value="100"
+      scale="k"
+      state={ValueColor.Good}
+      description="Additional Description"
+      status="Hello Counter"
+      unitOfMeasurement="CURRENCY"
+      onClick={(e) => {}}
+    >
+      <NumericSideIndicator titleText="Target" number="100" />
+      <NumericSideIndicator titleText="Deviation" number="50" />
+    </AnalyticalCardHeader>
+  );
+}
+```
+
+## From 0.23.x to 0.24.0
+
+- The deprecated `tooltip` prop has been removed, please use the native `title` attribute instead. (This does not remove the `tooltip` prop of the `Button`, `ToggleButton` or `SegmentedButtonItem`.)
+- The deprecated `useConsolidatedRef` hook has been removed, please use `useSyncRef` instead.
+- The deprecated `StyleClassHelper` class has been removed, please use `clsx` instead or implement your own `className` constructor.
+
+## From 0.21.x to 0.22.0
+
+**useI18nBundle:** The `useI18nBundle` hook must now be used in the context of the `ThemeProvider`.
+
+You will not need to change anything in your app's code base, since all components should already be wrapped by the `ThemeProvider`, but now you have to make sure that even your test components are wrapped inside of it.
+Otherwise, translatable components will likely not render.
+
 ## From 0.19.x to 0.20.0
 
 ### Changed TypeScript `interfaces` for `ref`
diff --git a/docs/MigrationGuide.mdx b/docs/MigrationGuide.mdx
index ae50c0c5412..7a611839aec 100644
--- a/docs/MigrationGuide.mdx
+++ b/docs/MigrationGuide.mdx
@@ -3,264 +3,48 @@ import { Meta } from '@storybook/blocks';
 
 <Meta title="Migration Guide" />
 
-# Migration Guide
-
-<br />
+# Migration Guide (v1 to v2)
 
 _The most important breaking changes of the corresponding releases are outlined here.
 For a full list of all changes, please refer to [the list of releases](https://github.com/SAP/ui5-webcomponents-react/releases)
 or the [changelog](?path=/docs/change-log--page)._
 
+> **Older releases**  
+> This migration guide only covers breaking changes when updating from v1 to v2.
+> For migration guides for older releases, please refer to our [Migration Guide Archive](https://github.com/SAP/ui5-webcomponents-react/blob/main/docs/MigrationGuide.archive.md).
+
 <br />
 
 <TableOfContent headingSelector="h2" />
 
-## From 0.28.x to 1.0.1
-
-### Removal of deprecated props
-
-The following props were deprecated in previous versions and have now been removed.
-
-**ActionSheet**
-
-The prop `alwaysShowHeader` has been removed as is not specified by the Fiori Design Guidelines. <br />
-In addition, the `a11yConfig.actionSheetMobileContent.ariaLabel` has been removed as well. You can use the `accessibleName` prop as replacement.
-
-**AnalyticalTable**
-
-The props `onRowSelected` and `onColumnsReordered` have been removed in favor for a more streamlined naming pattern. <br />
-Please use the new prop names `onRowSelect` and `onColumnsReorder`.
-
-**DynamicPageTitle**
-
-The props `actionsOverflowButton` and `navigationActionsOverflowButton` have been removed. <br />
-If needed, you can pass a custom overflow button for the respective toolbar by using the `actionsToolbarProps={{ overflowButton: <Button />}}` and `navigationActionsToolbarProps={{ overflowButton: <Button />}}` props.
-
-In addition, the `onToolbarOverflowChange` event has been removed as well. Previously, this event contained a property `origin` with the value of `actions` or `navigationActions` in order to distinguish between the toolbars. <br />
-Please use `onOverflowChange` of the respective toolbar props object instead (`actionsToolbarProps={{ onOverflowChange: yourHandler }}` and `navigationActionsToolbarProps={{ onOverflowChange: yourHandlerForNavigationActions }}`).
-
-### FilterBar: implement new design specification
-
-The Design for the `FilterBar` component had some major updates, so we've updated the component accordingly.
-One of these changes is, that the optional search field (passed via the `search` prop), is no longer available in the `Filters` dialog.
-
-**The following props are removed without replacement as they are no longer specified by the design:**
-
-- `showClearButton`
-- `showGo`
-- `onFiltersDialogClear`
-- `showSearchOnFiltersDialog`
-- `loading` <br />
-  In order to place a loading indicator on the `FilterBar`, please wrap it into the `BusyIndicator` component.
-
-**The following props have been renamed without further modifications:**
-
-- `variant` --> `header`
-- `showRestoreButton` --> `showResetButton`
+## Replaced Components
 
-**The following props have been renamed and changed their logic for a more streamlined API:**
-
-- `filterBarExpanded` --> `filterBarCollapsed` <br />
-  Previously, `filterBarExpanded` was defaulted to `true`. This prop has been replaced by `filterBarCollapsed` (inactive by default).
-- `showFilterConfiguration` --> `hideFilterConfiguration` <br />
-  Previously, `showFilterConfiguration` was defaulted to `true`. This prop has been replaced by `hideFilterConfiguration` (inactive by default).
-- `useToolbar` --> `hideToolbar` <br />
-  If you wanted to hide the toolbar of the `FilterBar`, you could set the prop `useToolbar` to `false` in earlier versions. This prop has been replaced by `hideToolbar={true}`.
-
-**The following event handlers have changed their payload:**
-
-- `onFiltersDialogSelectionChange` <br />
-  The event type changed to `UI5CustomEvent` and the properties `elements` and `toggledElements` have been removed. <br />
-  You can now use `element` to access the most recently interacted row and `checked` to get the current selection state.
-  If you need to access all selected rows, you can use the `selectedRows` property.
-- `onRestore` and `onClear` <br />
-  The `dialogSearch` property has been removed from the event payload as the search field in the dialog is no longer available.
-- `onGo` <br />
-  The `toggledElements` property has been removed
-- `onFiltersDialogOpen` <br />
-  The property `dialog` has been removed. If you need to access the filter dialog HTML element, you might use the new prop `onAfterFiltersDialogOpen`
-  on the `FilterBar` which is fired after the filter dialog has been opened.
-
-**Migration Example (removed props and event handlers are not listed for brevity):**
-
-```jsx
-// component with 0.28.x
-<FilterBar
-    variant={<Title>Header</Title>}
-    showRestoreButton
-    filterBarExpanded={false}
-    showFilterConfiguration={false}
-    useToolbar={false}
-/>
-
-// becomes with 1.0.0
-<FilterBar
-    header={<Title>Header</Title>}
-    showResetButton
-    filterBarCollapsed
-    hideFilterConfiguration
-    hideToolbar
-/>
-```
-
-### VariantManagement: removed option to show the "Cancel" button
-
-The "Cancel" button is not part of the design guidelines anymore, so the prop `showCancelButton` has been removed without replacement.
-
-## From 0.27.x to 0.28.0
-
-### AnalyticalTable: Scaling the table
-
-Scaling the table via the CSS `scale()` function is now only supported if the abscissa (`sx`) is passed to the `scaleXFactor` prop. `scaleXFactor` only accepts values of type `number`.
-
-Before 0.28.0:
-
-```jsx
-<div style={{ transform: 'scale(0.5)' }}>
-  <AnalyticalTable data={data} columns={columns} />
-</div>
-```
-
-Now:
-
-```jsx
-<div style={{ transform: 'scale(0.5)' }}>
-  <AnalyticalTable data={data} columns={columns} scaleXFactor={0.5} />
-</div>
-```
+### AnalyticalCard
 
-### MessageItem: new default value for `type`
+The deprecated `AnalyticalCard` component has been replaced with the `Card` web component as a drop-in replacement:
 
-The default value `type` value of the `MessageItem` component has been changed from `ValueState.None` to `ValueState.Error`.
+```tsx
+// v1
+import { AnalyticalCard, AnalyticalCardHeader } from '@ui5/webcomponents-react';
 
-### ObjectPage: `portalContainer` prop removed
-
-The prop `portalContainer` has been removed from the `ObjectPage` as it is not used anymore.
-
-## From 0.25.x to 0.26.0
-
-### Removed deprecated entrypoints
-
-In version 0.26.0, we have removed several legacy exports which have been deprecated a couple of months ago.
-This affects all exports using the following pattern:
-
-```js
-import { COMPONENT_NAME } from '@ui5/webcomponents-react/dist/COMPONENT_NAME';
-import { UTIL_NAME } from '@ui5/webcomponents-react-base/dist/UTIL_NAME';
-import { CHART_NAME } from '@ui5/webcomponents-react-charts/dist/CHART_NAME';
-```
-
-You can now shorten all your imports by removing the `/dist/NAME` part to match the following pattern:
-
-```js
-import { COMPONENT_NAME } from '@ui5/webcomponents-react';
-import { UTIL_NAME } from '@ui5/webcomponents-react-base';
-import { CHART_NAME } from '@ui5/webcomponents-react-charts';
-```
-
-In case the file you are trying to import is not available, please raise an [issue](https://github.com/SAP/ui5-webcomponents-react/issues/new?labels=bug&template=bug_report.md).
-
-### Removed polyfills
-
-In 0.26.0, we have removed the polyfill imports `@ui5/webcomponents-react-base/polyfill/Safari` (all features supported now) and `@ui5/webcomponents-react-base/polyfill/IE11` (end of life).
-As a consequence, the internal dependencies of `@ui5/webcomponents-react-base` are cleaned up as well,
-so you'll most likely need to install `resize-observer-polyfill` on your own for running tests with Jest (see next section).
-
-```shell
-npm install resize-observer-polyfill --save-dev
-# or if you are using yarn
-yarn add resize-observer-polyfill --dev
-```
-
-### Improved Jest Setup
-
-In order to run Tests with Jest, there has always been the need of adding additional polyfills to the Jest environment.
-With 0.26.0, things are changing a little:
-
-1. You have to install `resize-observer-polyfill` on your own because it's not longer a dependency of `@ui5/webcomponents-react-base`.
-
-```
-npm install resize-observer-polyfill --save-dev
-```
-
-2. We now offer an improved way of adding the additional APIs to the Jest environment by exposing a file which is setting up the
-   jest environment for you. You can import it via `import '@ui5/webcomponents-react/jestSetup.js';`.
-
-If you are using `create-react-app`, your simplified `src/setupTests.js` file looks like:
-
-```js
-import ResizeObserverPolyfill from 'resize-observer-polyfill';
-import '@ui5/webcomponents-react/jestSetup.js';
-
-window.ResizeObserver = ResizeObserverPolyfill;
-```
-
-### New API for `AnalyticalCardHeader`
-
-The `AnalyticalCardHeader` component has been refactored to match the latest design specifications.
-As a consequence, the API has changed:
-
-```jsx
-function OldApi() {
+function MyComponent() {
   return (
-    <AnalyticalCardHeader
-      titleText="Title"
-      subtitleText="Subtitle"
-      arrowIndicator={DeviationIndicator.Up} // renamed to `trend`
-      showIndicator={true} // removed, please use `trend={DeviationIndicator.None}` in future
-      indicatorState={ValueState.Error} // removed without replacement
-      value="100"
-      unit="k" // renamed to `scale`
-      valueState={ValueState.Success} // renamed to `state`, allowed enum values coming from `ValueColor`
-      target="100" // replaced with `children`. Use the `NumericSideIndicator` component.
-      deviation="50" // replaced with `children`. Use the `NumericSideIndicator` component.
-      description="Additional Description"
-      counter="Hello Counter" // renamed to `status`
-      counterState={ValueState.Error} // removed without replacement
-      currency="CURRENCY" // renamed to `unitOfMeasurement`
-      onClick={(e) => {}}
-    />
+    <AnalyticalCard header={<AnalyticalCardHeader />}>
+      <span>My Content</span>
+    </AnalyticalCard>
   );
 }
 
-// will become
+// v2
+import { AnalyticalCardHeader, Card } from '@ui5/webcomponents-react';
 
-function NewAPI() {
+function MyComponent() {
   return (
-    <AnalyticalCardHeader
-      titleText="Title"
-      subtitleText="Subtitle"
-      trend={DeviationIndicator.Up}
-      value="100"
-      scale="k"
-      state={ValueColor.Good}
-      description="Additional Description"
-      status="Hello Counter"
-      unitOfMeasurement="CURRENCY"
-      onClick={(e) => {}}
-    >
-      <NumericSideIndicator titleText="Target" number="100" />
-      <NumericSideIndicator titleText="Deviation" number="50" />
-    </AnalyticalCardHeader>
+    <Card header={<AnalyticalCardHeader />}>
+      <span>My Content</span>
+    </Card>
   );
 }
 ```
 
-## From 0.23.x to 0.24.0
-
-- The deprecated `tooltip` prop has been removed, please use the native `title` attribute instead. (This does not remove the `tooltip` prop of the `Button`, `ToggleButton` or `SegmentedButtonItem`.)
-- The deprecated `useConsolidatedRef` hook has been removed, please use `useSyncRef` instead.
-- The deprecated `StyleClassHelper` class has been removed, please use `clsx` instead or implement your own `className` constructor.
-
-## From 0.21.x to 0.22.0
-
-**useI18nBundle:** The `useI18nBundle` hook must now be used in the context of the `ThemeProvider`.
-
-You will not need to change anything in your app's code base, since all components should already be wrapped by the `ThemeProvider`, but now you have to make sure that even your test components are wrapped inside of it.
-Otherwise, translatable components will likely not render.
-
-## Older releases
-
-If you are looking for migration guides for older releases, please take a look into our [Migration Guide Archive](https://github.com/SAP/ui5-webcomponents-react/blob/main/docs/MigrationGuide.archive.md).
-
 <Footer />
diff --git a/docs/knowledge-base/TestingWithJest.mdx b/docs/knowledge-base/TestingWithJest.mdx
index f7bee903fae..cca60fe87f7 100644
--- a/docs/knowledge-base/TestingWithJest.mdx
+++ b/docs/knowledge-base/TestingWithJest.mdx
@@ -88,8 +88,8 @@ jest.mock('react', () => {
       <ui5-link href={'https://kentcdodds.com/blog/effective-snapshot-testing'}>
         controversial and complex topic
       </ui5-link>
-      , but especially with web components it gets really tricky as the JSDOM doesn't support rendering the shadow-root out
-      of the box. That's why we recommend to go without extensively using snapshots.
+      , but especially with web components it gets really tricky as the JSDOM doesn't support rendering the shadow-root
+      out of the box. That's why we recommend to go without extensively using snapshots.
     </>
   }
 />
diff --git a/packages/main/src/components/AnalyticalCard/AnalyticalCard.mdx b/packages/main/src/components/AnalyticalCard/AnalyticalCard.mdx
deleted file mode 100644
index d4c39d25dc3..00000000000
--- a/packages/main/src/components/AnalyticalCard/AnalyticalCard.mdx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
-import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
-import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
-import MessageStripDesign from '@ui5/webcomponents/dist/types/MessageStripDesign.js';
-import '@ui5/webcomponents-icons/dist/person-placeholder.js';
-import '@ui5/webcomponents/dist/Link.js';
-import { AnalyticalCardHeader } from '../AnalyticalCardHeader';
-import { NumericSideIndicator } from '../NumericSideIndicator';
-import { MessageStrip } from '../../webComponents/MessageStrip/index';
-import * as ComponentStories from './AnalyticalCard.stories';
-
-<Meta of={ComponentStories} subcomponents={{ AnalyticalCardHeader, NumericSideIndicator }} />
-
-<DocsHeader />
-
-<MessageStrip
-  design={MessageStripDesign.Critical}
-  children={
-    <>
-      This component is deprecated and will be removed with our next major release (v2.0.0)! Please use
-      <ui5-link href={'https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-card'}>
-        Card
-      </ui5-link> instead.
-    </>
-  }
-/>
-
-## Example
-
-<Canvas of={ComponentStories.Default} />
-
-## Properties
-
-<ControlsWithNote of={ComponentStories.Default} />
-
-<br />
-<br />
-
-<Markdown>{SubcomponentsSection}</Markdown>
-
-## AnalyticalCardHeader
-
-<Description of={AnalyticalCardHeader} />
-
-<ArgTypesWithNote of={AnalyticalCardHeader} />
-
-## NumericSideIndicator
-
-<Description of={NumericSideIndicator} />
-
-<ArgTypesWithNote of={NumericSideIndicator} />
-
-<Footer />
diff --git a/packages/main/src/components/AnalyticalCard/AnalyticalCard.module.css b/packages/main/src/components/AnalyticalCard/AnalyticalCard.module.css
deleted file mode 100644
index 003c102f282..00000000000
--- a/packages/main/src/components/AnalyticalCard/AnalyticalCard.module.css
+++ /dev/null
@@ -1,6 +0,0 @@
-.content {
-  display: flex;
-  flex: 1 1 auto;
-  overflow: hidden;
-  position: relative;
-}
diff --git a/packages/main/src/components/AnalyticalCard/AnalyticalCard.stories.tsx b/packages/main/src/components/AnalyticalCard/AnalyticalCard.stories.tsx
deleted file mode 100644
index 494e6b98980..00000000000
--- a/packages/main/src/components/AnalyticalCard/AnalyticalCard.stories.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { LineChart } from '@ui5/webcomponents-react-charts';
-import { DeviationIndicator, ValueColor } from '../../enums/index.js';
-import { AnalyticalCardHeader } from '../AnalyticalCardHeader/index.js';
-import { NumericSideIndicator } from '../NumericSideIndicator/index.js';
-import { AnalyticalCard } from './index.js';
-
-const simpleDataSet = [
-  {
-    name: 'January',
-    users: 76
-  },
-  {
-    name: 'February',
-    users: 230
-  },
-  {
-    name: 'March',
-    users: 240
-  },
-  {
-    name: 'April',
-    users: 280
-  },
-  {
-    name: 'May',
-    users: 100
-  }
-];
-
-const meta = {
-  title: 'Data Display / AnalyticalCard',
-  component: AnalyticalCard,
-  argTypes: {
-    header: {
-      control: { disable: true }
-    },
-    children: {
-      control: { disable: true }
-    }
-  },
-  args: {
-    children: (
-      <LineChart
-        className="chromatic-ignore"
-        noLegend
-        dimensions={[{ accessor: 'name' }]}
-        measures={[{ accessor: 'users', formatter: (val) => `${val}k` }]}
-        dataset={simpleDataSet}
-      />
-    ),
-    header: (
-      <AnalyticalCardHeader
-        titleText="Project Cloud Transformation"
-        subtitleText="Revenue"
-        unitOfMeasurement="EUR"
-        trend={DeviationIndicator.Down}
-        value="65.34"
-        state={ValueColor.Error}
-        scale="K"
-        description="Q1, 2018"
-      >
-        <NumericSideIndicator titleText="Target" number="100" unit="k" />
-        <NumericSideIndicator titleText="Deviation" number="34.7" unit="%" state={ValueColor.Critical} />
-      </AnalyticalCardHeader>
-    )
-  }
-} satisfies Meta<typeof AnalyticalCard>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
diff --git a/packages/main/src/components/AnalyticalCard/index.tsx b/packages/main/src/components/AnalyticalCard/index.tsx
deleted file mode 100644
index 576e6b177e8..00000000000
--- a/packages/main/src/components/AnalyticalCard/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client';
-
-import { deprecationNotice, useStylesheet } from '@ui5/webcomponents-react-base';
-import type { ReactNode } from 'react';
-import { forwardRef, useEffect } from 'react';
-import type { CommonProps } from '../../types/index.js';
-import type { CardDomRef } from '../../webComponents/index.js';
-import { Card } from '../../webComponents/index.js';
-import { classNames, styleData } from './AnalyticalCard.module.css.js';
-
-export interface AnalyticalCardPropTypes extends CommonProps {
-  /**
-   * The Card header Component. Using the `AnalyticalCardHeader` is recommended.
-   */
-  header?: ReactNode;
-  /**
-   * The content of the `AnalyticalCard`.
-   */
-  children: ReactNode | ReactNode[];
-}
-
-/**
- * The `AnalyticalCard` is mainly used for data visualization. It consists of two areas – a header area and a chart area with a visual representation of the data.<br />
- *
- * @deprecated This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the [Card](https://sap.github.io/ui5-webcomponents-react/?path=/docs/data-display-card) instead.
- */
-const AnalyticalCard = forwardRef<CardDomRef, AnalyticalCardPropTypes>((props, ref) => {
-  const { children, header, ...rest } = props;
-
-  useStylesheet(styleData, AnalyticalCard.displayName);
-
-  useEffect(() => {
-    deprecationNotice(
-      'AnalyticalCard',
-      'This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the Card component instead.'
-    );
-  }, []);
-
-  return (
-    <Card ref={ref} {...rest}>
-      {header}
-      <div className={classNames.content} role="group">
-        {children}
-      </div>
-    </Card>
-  );
-});
-
-AnalyticalCard.displayName = 'AnalyticalCard';
-
-export { AnalyticalCard };
diff --git a/packages/main/src/components/AnalyticalCard/AnalyticalCard.cy.tsx b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx
similarity index 84%
rename from packages/main/src/components/AnalyticalCard/AnalyticalCard.cy.tsx
rename to packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx
index 64f853e3a72..5e8fbefb02a 100644
--- a/packages/main/src/components/AnalyticalCard/AnalyticalCard.cy.tsx
+++ b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.cy.tsx
@@ -1,23 +1,23 @@
 import { getRGBColor } from '@ui5/webcomponents-base/dist/util/ColorConversion';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
-import { DeviationIndicator, ValueColor } from '../../enums/index.js';
-import type { AnalyticalCardHeaderPropTypes } from '../AnalyticalCardHeader';
-import { AnalyticalCardHeader } from '../AnalyticalCardHeader';
+import { DeviationIndicator, ValueColor } from '../../enums';
+import type { CardPropTypes } from '../../webComponents/Card/index.js';
+import { Card } from '../../webComponents/Card/index.js';
 import { NumericSideIndicator } from '../NumericSideIndicator';
 import { Text } from '../Text';
-import type { AnalyticalCardPropTypes } from './index.js';
-import { AnalyticalCard } from './index.js';
+import type { AnalyticalCardHeaderPropTypes } from './index';
+import { AnalyticalCardHeader } from './index';
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 
-const TestComp = (props: Omit<AnalyticalCardPropTypes, 'children'>) => {
+const TestComp = (props: Omit<CardPropTypes, 'children'>) => {
   return (
-    <AnalyticalCard {...props}>
+    <Card {...props}>
       <Text>Content</Text>
-    </AnalyticalCard>
+    </Card>
   );
 };
 
-describe('AnalyticalCard', () => {
+describe('AnalyticalCardHeader', () => {
   it('Render with default AnalyticalCardHeader', () => {
     cy.mount(<TestComp header={<AnalyticalCardHeader titleText="Header Title" />} />);
     cy.findByText('Content').should('be.visible');
@@ -79,6 +79,5 @@ describe('AnalyticalCard', () => {
     cy.get('[ui5-icon]').should('have.attr', 'name', 'up');
   });
 
-  cypressPassThroughTestsFactory(AnalyticalCard);
   cypressPassThroughTestsFactory(AnalyticalCardHeader);
 });
diff --git a/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.mdx b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.mdx
new file mode 100644
index 00000000000..85674312c5c
--- /dev/null
+++ b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.mdx
@@ -0,0 +1,32 @@
+import { ArgTypesWithNote, ControlsWithNote, DocsHeader, Footer } from '@sb/components';
+import SubcomponentsSection from '@sb/docs/SubcomponentsSection.md?raw';
+import { Canvas, Description, Markdown, Meta } from '@storybook/blocks';
+import '@ui5/webcomponents-icons/dist/person-placeholder.js';
+import '@ui5/webcomponents/dist/Link.js';
+import { NumericSideIndicator } from '../NumericSideIndicator';
+import * as ComponentStories from './AnalyticalCardHeader.stories';
+
+<Meta of={ComponentStories} />
+
+<DocsHeader subComponents={['NumericSideIndicator']} />
+
+## Example
+
+<Canvas of={ComponentStories.Default} />
+
+## Properties
+
+<ControlsWithNote of={ComponentStories.Default} />
+
+<br />
+<br />
+
+<Markdown>{SubcomponentsSection}</Markdown>
+
+## NumericSideIndicator
+
+<Description of={NumericSideIndicator} />
+
+<ArgTypesWithNote of={NumericSideIndicator} />
+
+<Footer />
diff --git a/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.stories.tsx b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.stories.tsx
new file mode 100644
index 00000000000..b2bfbd55ef2
--- /dev/null
+++ b/packages/main/src/components/AnalyticalCardHeader/AnalyticalCardHeader.stories.tsx
@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { LineChart } from '@ui5/webcomponents-react-charts';
+import { DeviationIndicator, ValueColor } from '../../enums';
+import { Card } from '../../webComponents/Card/index';
+import { NumericSideIndicator } from '../NumericSideIndicator';
+import { AnalyticalCardHeader } from './index';
+
+const simpleDataSet = [
+  {
+    name: 'January',
+    users: 76
+  },
+  {
+    name: 'February',
+    users: 230
+  },
+  {
+    name: 'March',
+    users: 240
+  },
+  {
+    name: 'April',
+    users: 280
+  },
+  {
+    name: 'May',
+    users: 100
+  }
+];
+
+const meta = {
+  title: 'Data Display / AnalyticalCardHeader',
+  component: AnalyticalCardHeader,
+  argTypes: {
+    children: {
+      control: { disable: true }
+    }
+  },
+  args: {
+    children: (
+      <>
+        <NumericSideIndicator titleText="Target" number="100" unit="k" />
+        <NumericSideIndicator titleText="Deviation" number="34.7" unit="%" state={ValueColor.Critical} />
+      </>
+    ),
+    titleText: 'Project Cloud Transformation',
+    subtitleText: 'Revenue',
+    unitOfMeasurement: 'EUR',
+    trend: DeviationIndicator.Down,
+    value: '65.34',
+    state: ValueColor.Error,
+    scale: 'K',
+    description: 'Q1, 2018'
+  }
+} satisfies Meta<typeof AnalyticalCardHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render(props) {
+    return (
+      <Card header={<AnalyticalCardHeader {...props} />}>
+        <LineChart
+          className="chromatic-ignore"
+          noLegend
+          dimensions={[{ accessor: 'name' }]}
+          measures={[{ accessor: 'users', formatter: (val) => `${val}k` }]}
+          dataset={simpleDataSet}
+        />
+      </Card>
+    );
+  }
+};
diff --git a/packages/main/src/index.ts b/packages/main/src/index.ts
index 0cd7f9376ff..5ca783a4fa7 100644
--- a/packages/main/src/index.ts
+++ b/packages/main/src/index.ts
@@ -1,7 +1,6 @@
 import * as AnalyticalTableHooks from './components/AnalyticalTable/pluginHooks/AnalyticalTableHooks.js';
 
 export * from './components/ActionSheet/index.js';
-export * from './components/AnalyticalCard/index.js';
 export * from './components/AnalyticalCardHeader/index.js';
 export * from './components/AnalyticalTable/index.js';
 export * from './components/AnalyticalTable/defaults/LoadingComponent/TablePlaceholder.js';