From 238597b51b6dcb9ba435d668ec512adb65be317c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20F=C3=BCrhoff?=
 <12294151+imagoiq@users.noreply.github.com>
Date: Mon, 11 Mar 2024 11:32:48 +0100
Subject: [PATCH] chore(documentation): Rework getting started section and add
 Angular CUSTOM_ELEMENTS_SCHEMA info (#2722)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add a getting started page in the getting started section with a table
to better understand the different packages
* Move docs page about packages into a packages folder. This include the
page that you can find in specific components like `icon`,
`internet-header`, `intranet-header`
* Remove list of components inside `preview.ts` as with the previous
changes folders are not required, and we can let (for the moment at
least) Storybook manage order
* Move list of icons into foundations
* Add new page about Angular
* Add `Components-Angular` into compatibility page
* Move migration-guide for the internet-header package into the package
page.
* Fixes
  * Change some typos like "swiss" to "Swiss"
* Fixes some links that were not using the right prefix "href="?path" to
"href="/?path"
  * Fix "Notification overlay" story which is missing an id


### Todo/discuss
* We should perhaps merge the stories of the internet-header to match
other components structure.

---------

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .changeset/old-pumas-sit.md                   |   5 +
 .../complex-card-demo.component.html          |   2 +-
 packages/documentation/.storybook/preview.ts  |  39 +---
 .../.storybook/styles/preview.scss            |   6 +-
 packages/documentation/package.json           |   1 +
 packages/documentation/src/noop.txt           |   1 -
 .../documentation/src/shared/packages.data.ts | 152 ++++++++++++++
 .../src/shared/tile/tile.component.scss       | 100 ++++++++++
 .../src/shared/tile/tile.component.ts         |  31 +++
 .../components/accordion/accordion.stories.ts |   6 +-
 .../alert/standard-html/alert.stories.ts      |   8 +-
 .../alert/web-component/post-alert.stories.ts |   8 +-
 .../stories/components/badge/badge.stories.ts |   6 +-
 .../blockquote/blockquote.stories.ts          |   6 +-
 .../button-group/button-group.stories.ts      |   6 +-
 .../components/button/button.stories.ts       |   8 +-
 .../cards/card-button/card-button.stories.ts  |   9 +-
 .../components/cards/card/card.stories.ts     |   6 +-
 .../product-card/product-card.stories.ts      |   6 +-
 .../components/carousel/carousel.stories.ts   |   6 +-
 .../collapsible/collapsible.stories.ts        |   6 +-
 .../datepicker/datepicker.stories.ts          |   6 +-
 .../components/dropdown/dropdown.stories.ts   |   5 +-
 .../forms/checkbox/checkbox.stories.ts        |   6 +-
 .../choice-card/checkbox-card.stories.ts      |   6 +-
 .../forms/choice-card/choice-card.ts          |   5 +-
 .../choice-card/radiobutton-card.stories.ts   |   8 +-
 .../custom-select/custom-select.stories.ts    |   6 +-
 .../components/forms/input/input.stories.ts   |   6 +-
 .../components/forms/radio/radio.stories.ts   |   8 +-
 .../components/forms/range/range.stories.ts   |   6 +-
 .../components/forms/select/select.stories.ts |   6 +-
 .../components/forms/switch/switch.stories.ts |   6 +-
 .../forms/textarea/textarea.stories.ts        |   6 +-
 .../components/heading/heading.stories.ts     |   6 +-
 .../icons/getting-started.stories.ts          |  15 --
 .../icons/{components => }/icon.docs.mdx      |   0
 .../icons/{components => }/icon.stories.ts    |  12 +-
 .../search-icons/search-icons.stories.ts      |  12 --
 .../breadcrumbs/breadcrumbs.docs.mdx          |   0
 .../breadcrumbs/breadcrumbs.stories.ts        |   8 +-
 .../overrides/breadcrumbs-config.docs.mdx     |   0
 .../overrides/breadcrumbs-config.stories.ts   |   0
 .../breadcrumbs/overrides/custom-items.ts     |   0
 .../custom-config/custom-footer-config.ts     |   0
 .../custom-config/footer-config.docs.mdx      |   0
 .../custom-config/footer-config.stories.ts    |   0
 .../{components => }/footer/footer.docs.mdx   |   0
 .../{components => }/footer/footer.stories.ts |   6 +-
 .../internet-header/getting-started.docs.mdx  | 100 ----------
 .../getting-started.stories.ts                |  15 --
 .../header/config/custom-config.ts            |   0
 .../config/language-switch-overrides.ts       |   0
 .../header/config/os-flyout-overrides.ts      |   0
 .../{components => }/header/header.docs.mdx   |   0
 .../{components => }/header/header.scss       |   0
 .../{components => }/header/header.stories.ts |   8 +-
 .../header-custom-config.docs.mdx             |   0
 .../header-custom-config.stories.ts           |   0
 .../header-custom-content.docs.mdx            |   0
 .../header-custom-content.stories.ts          |   0
 .../header-language-switch-overrides.docs.mdx |   0
 ...eader-language-switch-overrides.stories.ts |   0
 .../header-os-flyout-overrides.docs.mdx       |   0
 .../header-os-flyout-overrides.stories.ts     |   0
 .../internet-header/migration-guide.docs.mdx  |  91 ---------
 .../migration-guide.stories.ts                |  15 --
 .../intranet-header/intranet-header.docs.mdx  |   6 +-
 .../intranet-header.stories.ts                |   5 +-
 .../stories/components/modal/modal.stories.ts |   6 +-
 .../notification-overlay.stories.ts           |   9 +-
 .../pagination/pagination.stories.ts          |   6 +-
 .../components/popover/popover.stories.ts     |   6 +-
 .../progressbar/progressbar.stories.ts        |   6 +-
 .../components/rating/post-rating.stories.ts  |   6 +-
 .../spinner/spinner.snapshot.stories.ts       |   4 +-
 .../components/spinner/spinner.stories.ts     |   7 +-
 .../components/stepper/stepper.stories.ts     |   6 +-
 .../subnavigation/subnavigation.stories.ts    |   7 +-
 .../stories/components/table/table.stories.ts |   6 +-
 .../stories/components/tabs/tabs.stories.ts   |   6 +-
 .../timepicker/timepicker.stories.ts          |   6 +-
 .../stories/components/toast/toast.stories.ts |   8 +-
 .../components/tooltip/tooltip.stories.ts     |   6 +-
 .../topic-teaser/topic-teaser.stories.ts      |   6 +-
 .../components/typeahead/typeahead.stories.ts |   6 +-
 .../accessibility/accessibility.stories.ts    |   5 +-
 .../stories/foundation/color/color.stories.ts |   5 +-
 .../foundation/elevation/elevation.stories.ts |   5 +-
 .../icons}/search-icons.blocks.tsx            |   0
 .../icons}/search-icons.docs.mdx              |   2 +-
 .../foundation/icons/search-icons.stories.ts  |  13 ++
 .../icons}/search-icons.styles.scss           |   0
 .../layout/breakpoints/breakpoints.stories.ts |   5 +-
 .../layout/columns/columns.stories.ts         |   5 +-
 .../layout/containers/containers.stories.ts   |   5 +-
 .../foundation/layout/grid/grid.stories.ts    |   5 +-
 .../typography/typography.stories.ts          |   5 +-
 .../getting-started/angular/angular.docs.mdx  |  89 +++++++++
 .../angular/angular.stories.ts                |  16 ++
 .../angular/angular.styles.scss               |  13 ++
 .../angular/sample-icons-config.sample.json}  |   0
 ...b-components-angular-manually.component.ts |   6 +
 .../compatibility/compatibility.docs.mdx      |  49 ++++-
 .../compatibility/compatibility.stories.ts    |   5 +-
 .../components-angular/angular.stories.ts     |  15 --
 .../components/components.stories.ts          |  15 --
 .../getting-started/introduction.docs.mdx     | 121 ++++++++++++
 .../getting-started/introduction.stories.ts   |  16 ++
 .../stories/getting-started/list-component.ts |  98 +++++++++
 .../angular-app-component.sample.html         |   0
 .../angular-app-module.sample.ts              |   0
 .../components-angular.docs.mdx}              |   2 +-
 .../components-angular.stories.ts             |  16 ++
 ...ponents-cdn-bare-component-all.sample.html |   0
 ...components-cdn-lazy-loaded-all.sample.html |   0
 ...nents-cdn-lazy-loaded-specific.sample.html |   0
 .../components/components-js-all.sample.js    |   0
 .../components-js-specific.sample.js          |   0
 .../components/components.docs.mdx            |   0
 .../packages/components/components.stories.ts |  16 ++
 .../package-icons-icon-meta.sample.html}      |   0
 .../package-icons-node-16.7.0.sample.json}    |   0
 .../icons/package-icons-node-old.sample.js}   |   0
 .../icons/package-icons-node-old.sample.json} |   0
 .../packages/icons/package-icons.mdx}         |  24 +--
 .../packages/icons/package-icons.stories.ts   |  16 ++
 .../internet-header-bare-component.sample.js  |   0
 ...rnet-header-cdn-bare-component.sample.html |   0
 ...nternet-header-cdn-lazy-loaded.sample.html |   0
 ...internet-header-fix-app-styles.sample.html |   0
 .../internet-header-frameworks.sample.html    |   0
 .../internet-header-install.sample.html       |   0
 .../internet-header-lazy-loaded.sample.js     |   0
 .../internet-header-old.sample.html           |   0
 .../internet-header-reference.sample.ts       |   0
 .../internet-header/internet-header.docs.mdx  | 187 ++++++++++++++++++
 .../internet-header.stories.ts                |  16 ++
 .../intranet-header/intranet-header.docs.mdx  |  32 +++
 .../intranet-header.stories.ts                |  16 ++
 .../styles/styles-variable.sample.scss        |   2 +-
 .../{ => packages}/styles/styles.docs.mdx     |   4 +-
 .../packages/styles/styles.stories.ts         |  16 ++
 .../getting-started/styles/styles.stories.ts  |  15 --
 .../documentation/src/stories/home.blocks.tsx |  19 --
 .../documentation/src/stories/home.data.ts    |  69 +------
 .../documentation/src/stories/home.docs.mdx   |  26 +--
 .../documentation/src/stories/home.stories.ts |   5 +-
 .../src/stories/home.styles.scss              |  96 +--------
 .../misc/changelog/changelog.stories.ts       |   5 +-
 .../migration-guide.stories.ts                |   5 +-
 .../stories/misc/versions/versions.stories.ts |   5 +-
 .../stories/patterns/forms/forms.stories.ts   |   5 +-
 .../patterns/metadata/metadata.stories.ts     |   5 +-
 .../background/background.stories.ts          |   5 +-
 .../stories/utilities/list/list.stories.ts    |   5 +-
 .../utilities/sizing/sizing.stories.ts        |   5 +-
 .../utilities/spacing/spacing.stories.ts      |   5 +-
 .../stories/utilities/text/text.stories.ts    |   5 +-
 packages/documentation/types/index.ts         |   2 +
 packages/documentation/types/package.ts       |   9 +
 packages/documentation/types/storybook.ts     |  13 ++
 pnpm-lock.yaml                                |  11 +-
 163 files changed, 1368 insertions(+), 696 deletions(-)
 create mode 100644 .changeset/old-pumas-sit.md
 delete mode 100644 packages/documentation/src/noop.txt
 create mode 100644 packages/documentation/src/shared/packages.data.ts
 create mode 100644 packages/documentation/src/shared/tile/tile.component.scss
 create mode 100644 packages/documentation/src/shared/tile/tile.component.ts
 delete mode 100644 packages/documentation/src/stories/components/icons/getting-started.stories.ts
 rename packages/documentation/src/stories/components/icons/{components => }/icon.docs.mdx (100%)
 rename packages/documentation/src/stories/components/icons/{components => }/icon.stories.ts (94%)
 delete mode 100644 packages/documentation/src/stories/components/icons/search-icons/search-icons.stories.ts
 rename packages/documentation/src/stories/components/internet-header/{components => }/breadcrumbs/breadcrumbs.docs.mdx (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/breadcrumbs/breadcrumbs.stories.ts (84%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/breadcrumbs/overrides/breadcrumbs-config.docs.mdx (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/breadcrumbs/overrides/breadcrumbs-config.stories.ts (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/breadcrumbs/overrides/custom-items.ts (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/footer/custom-config/custom-footer-config.ts (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/footer/custom-config/footer-config.docs.mdx (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/footer/custom-config/footer-config.stories.ts (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/footer/footer.docs.mdx (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/footer/footer.stories.ts (87%)
 delete mode 100644 packages/documentation/src/stories/components/internet-header/getting-started.docs.mdx
 delete mode 100644 packages/documentation/src/stories/components/internet-header/getting-started.stories.ts
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/config/custom-config.ts (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/config/language-switch-overrides.ts (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/config/os-flyout-overrides.ts (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/header.docs.mdx (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/header.scss (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/header.stories.ts (95%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-custom-config.docs.mdx (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-custom-config.stories.ts (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-custom-content.docs.mdx (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-custom-content.stories.ts (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-language-switch-overrides.docs.mdx (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-language-switch-overrides.stories.ts (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-os-flyout-overrides.docs.mdx (100%)
 rename packages/documentation/src/stories/components/internet-header/{components => }/header/overrides-stories/header-os-flyout-overrides.stories.ts (100%)
 delete mode 100644 packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx
 delete mode 100644 packages/documentation/src/stories/components/internet-header/migration-guide.stories.ts
 rename packages/documentation/src/stories/{components/icons/search-icons => foundation/icons}/search-icons.blocks.tsx (100%)
 rename packages/documentation/src/stories/{components/icons/search-icons => foundation/icons}/search-icons.docs.mdx (96%)
 create mode 100644 packages/documentation/src/stories/foundation/icons/search-icons.stories.ts
 rename packages/documentation/src/stories/{components/icons/search-icons => foundation/icons}/search-icons.styles.scss (100%)
 create mode 100644 packages/documentation/src/stories/getting-started/angular/angular.docs.mdx
 create mode 100644 packages/documentation/src/stories/getting-started/angular/angular.stories.ts
 create mode 100644 packages/documentation/src/stories/getting-started/angular/angular.styles.scss
 rename packages/documentation/src/stories/{components/icons/getting-started-angular-config.sample.json => getting-started/angular/sample-icons-config.sample.json} (100%)
 create mode 100644 packages/documentation/src/stories/getting-started/angular/sample-web-components-angular-manually.component.ts
 delete mode 100644 packages/documentation/src/stories/getting-started/components-angular/angular.stories.ts
 delete mode 100644 packages/documentation/src/stories/getting-started/components/components.stories.ts
 create mode 100644 packages/documentation/src/stories/getting-started/introduction.docs.mdx
 create mode 100644 packages/documentation/src/stories/getting-started/introduction.stories.ts
 create mode 100644 packages/documentation/src/stories/getting-started/list-component.ts
 rename packages/documentation/src/stories/getting-started/{ => packages}/components-angular/angular-app-component.sample.html (100%)
 rename packages/documentation/src/stories/getting-started/{ => packages}/components-angular/angular-app-module.sample.ts (100%)
 rename packages/documentation/src/stories/getting-started/{components-angular/angular.docs.mdx => packages/components-angular/components-angular.docs.mdx} (92%)
 create mode 100644 packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.stories.ts
 rename packages/documentation/src/stories/getting-started/{ => packages}/components/components-cdn-bare-component-all.sample.html (100%)
 rename packages/documentation/src/stories/getting-started/{ => packages}/components/components-cdn-lazy-loaded-all.sample.html (100%)
 rename packages/documentation/src/stories/getting-started/{ => packages}/components/components-cdn-lazy-loaded-specific.sample.html (100%)
 rename packages/documentation/src/stories/getting-started/{ => packages}/components/components-js-all.sample.js (100%)
 rename packages/documentation/src/stories/getting-started/{ => packages}/components/components-js-specific.sample.js (100%)
 rename packages/documentation/src/stories/getting-started/{ => packages}/components/components.docs.mdx (100%)
 create mode 100644 packages/documentation/src/stories/getting-started/packages/components/components.stories.ts
 rename packages/documentation/src/stories/{components/icons/getting-started-icon-meta.sample.html => getting-started/packages/icons/package-icons-icon-meta.sample.html} (100%)
 rename packages/documentation/src/stories/{components/icons/getting-started-node-16.7.0.sample.json => getting-started/packages/icons/package-icons-node-16.7.0.sample.json} (100%)
 rename packages/documentation/src/stories/{components/icons/getting-started-node-old.sample.js => getting-started/packages/icons/package-icons-node-old.sample.js} (100%)
 rename packages/documentation/src/stories/{components/icons/getting-started-node-old.sample.json => getting-started/packages/icons/package-icons-node-old.sample.json} (100%)
 rename packages/documentation/src/stories/{components/icons/getting-started.docs.mdx => getting-started/packages/icons/package-icons.mdx} (78%)
 create mode 100644 packages/documentation/src/stories/getting-started/packages/icons/package-icons.stories.ts
 rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-bare-component.sample.js (100%)
 rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-cdn-bare-component.sample.html (100%)
 rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-cdn-lazy-loaded.sample.html (100%)
 rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-fix-app-styles.sample.html (100%)
 rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-frameworks.sample.html (100%)
 rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-install.sample.html (100%)
 rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-lazy-loaded.sample.js (100%)
 rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-old.sample.html (100%)
 rename packages/documentation/src/stories/{components => getting-started/packages}/internet-header/internet-header-reference.sample.ts (100%)
 create mode 100644 packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx
 create mode 100644 packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.stories.ts
 create mode 100644 packages/documentation/src/stories/getting-started/packages/intranet-header/intranet-header.docs.mdx
 create mode 100644 packages/documentation/src/stories/getting-started/packages/intranet-header/intranet-header.stories.ts
 rename packages/documentation/src/stories/getting-started/{ => packages}/styles/styles-variable.sample.scss (52%)
 rename packages/documentation/src/stories/getting-started/{ => packages}/styles/styles.docs.mdx (97%)
 create mode 100644 packages/documentation/src/stories/getting-started/packages/styles/styles.stories.ts
 delete mode 100644 packages/documentation/src/stories/getting-started/styles/styles.stories.ts
 create mode 100644 packages/documentation/types/index.ts
 create mode 100644 packages/documentation/types/package.ts
 create mode 100644 packages/documentation/types/storybook.ts

diff --git a/.changeset/old-pumas-sit.md b/.changeset/old-pumas-sit.md
new file mode 100644
index 0000000000..70474d5cc4
--- /dev/null
+++ b/.changeset/old-pumas-sit.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Reworked the getting-started section to better understand the different packages and add more info about Angular.
diff --git a/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html b/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html
index 2c48d5536a..4f296d919d 100644
--- a/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html
+++ b/packages/demo/src/app/bootstrap/components/card/complex-card-demo/complex-card-demo.component.html
@@ -140,7 +140,7 @@ <h5 class="card-title">Card title</h5>
 </div>
 
 <h3>Card columns</h3>
-<p>Card columns can be checked out in the swiss post example below.</p>
+<p>Card columns can be checked out in the Swiss Post example below.</p>
 
 <p>
   Default
diff --git a/packages/documentation/.storybook/preview.ts b/packages/documentation/.storybook/preview.ts
index 7b9ca96654..065d375f71 100644
--- a/packages/documentation/.storybook/preview.ts
+++ b/packages/documentation/.storybook/preview.ts
@@ -25,13 +25,14 @@ const preview: Preview = {
 
           // Category - Getting Started
           'Getting Started',
-          ['Styles', 'Components', 'Components-Angular', 'Compatibility'],
+          ['Introduction', 'Angular', 'Compatibility', 'Packages'],
 
           // Category - Foundations
           'Foundations',
           [
             'Typography',
             'Color',
+            'Search for Icons',
             'Layout',
             ['Breakpoints', 'Containers', 'Grid', 'Columns', 'TODOS'],
             'Elevation',
@@ -40,42 +41,6 @@ const preview: Preview = {
 
           // Category - Components
           'Components',
-          [
-            'Accordion',
-            'Alert',
-            'Badge',
-            'Blockquote',
-            'Button',
-            'Button Group',
-            'Cards',
-            'Carousel',
-            'Collapsible',
-            'Datepicker',
-            'Dropdown',
-            'Forms',
-            'Heading',
-            'Icons',
-            ['Getting Started'],
-            'Internet Header',
-            ['Getting Started', 'Header'],
-            'Intranet Header',
-            'Modal',
-            'Notification overlay',
-            'Pagination',
-            'Popover',
-            'Progressbar',
-            'Rating',
-            'Spinner',
-            'Stepper',
-            'Subnavigation',
-            'Table',
-            'Tabs',
-            'Timepicker',
-            'Toast',
-            'Tooltip',
-            'Topic Teaser',
-            'Typeahead',
-          ],
 
           // Category - Patterns
           'Patterns',
diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
index 46df37ba38..0ff2ed3fe7 100644
--- a/packages/documentation/.storybook/styles/preview.scss
+++ b/packages/documentation/.storybook/styles/preview.scss
@@ -5,8 +5,6 @@
 
 #storybook-root,
 #storybook-docs {
-  overflow: hidden;
-
   .sbdocs-content .container >,
   .sbdocs-content .container > post-tabs > post-tab-panel >,
   .sbdocs-content .container > migration-global-state {
@@ -38,6 +36,10 @@
     h6 {
       margin-block: 1rem;
     }
+    .table,
+    .table-responsive {
+      margin-block: 1.5rem 1rem;
+    }
   }
 
   .sbdocs-content .container {
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index 731ad4ba9e..b98d319a1a 100644
--- a/packages/documentation/package.json
+++ b/packages/documentation/package.json
@@ -35,6 +35,7 @@
   },
   "devDependencies": {
     "@geometricpanda/storybook-addon-badges": "2.0.1",
+    "@lit/task": "1.0.0",
     "@open-wc/lit-helpers": "0.6.0",
     "@percy/cli": "1.27.7",
     "@percy/cypress": "3.1.2",
diff --git a/packages/documentation/src/noop.txt b/packages/documentation/src/noop.txt
deleted file mode 100644
index 07c5fa89e0..0000000000
--- a/packages/documentation/src/noop.txt
+++ /dev/null
@@ -1 +0,0 @@
-triggering a doc build, nothing to see here
\ No newline at end of file
diff --git a/packages/documentation/src/shared/packages.data.ts b/packages/documentation/src/shared/packages.data.ts
new file mode 100644
index 0000000000..a22560e36e
--- /dev/null
+++ b/packages/documentation/src/shared/packages.data.ts
@@ -0,0 +1,152 @@
+import { DEPENDENCIES, getVersion } from '../utils/version';
+import metaStyles from '../stories/getting-started/packages/styles/styles.stories';
+import metaComponents from '../stories/getting-started/packages/components/components.stories';
+import metaComponentsAngular from '../stories/getting-started/packages/components-angular/components-angular.stories';
+import metaInternetHeader from '../stories/getting-started/packages/internet-header/internet-header.stories';
+import metaIntranetHeader from '../stories/getting-started/packages/intranet-header/intranet-header.stories';
+import metaIcons from '../stories/getting-started/packages/icons/package-icons.stories';
+import { PackageType } from '../../types';
+
+interface IPackage {
+  name: string;
+  docsStoryId: string;
+  type: PackageType;
+  link: {
+    [key: string]: {
+      href: string;
+      ariaLabel: string;
+    };
+  };
+  img: {
+    src: string;
+    alt: string;
+  };
+  version: string;
+}
+
+export const packages: IPackage[] = [
+  {
+    name: 'Styles',
+    docsStoryId: metaStyles.id,
+    type: PackageType.Html,
+    link: {
+      github: {
+        href: 'https://github.com/swisspost/design-system/tree/main/packages/styles',
+        ariaLabel: 'Source of Styles package',
+      },
+      docs: {
+        href: generateDocsRelativeLink(metaStyles.id),
+        ariaLabel: 'Getting started with Styles package',
+      },
+    },
+    img: {
+      src: '/assets/images/packages/styles.svg',
+      alt: '',
+    },
+    version: `v${getVersion(DEPENDENCIES['@swisspost/design-system-styles'])}`,
+  },
+  {
+    name: 'Components',
+    docsStoryId: metaComponents.id,
+    type: PackageType.Wc,
+    link: {
+      github: {
+        href: 'https://github.com/swisspost/design-system/tree/main/packages/components',
+        ariaLabel: 'Source of Components package',
+      },
+      docs: {
+        href: generateDocsRelativeLink(metaComponents.id),
+        ariaLabel: 'Getting started with Components package',
+      },
+    },
+    img: {
+      src: '/assets/images/packages/components.svg',
+      alt: '',
+    },
+    version: `v${getVersion(DEPENDENCIES['@swisspost/design-system-components'])}`,
+  },
+  {
+    name: 'Components for Angular',
+    docsStoryId: metaComponentsAngular.id,
+    type: PackageType.Angular,
+    link: {
+      github: {
+        href: 'https://github.com/swisspost/design-system/tree/main/packages/components-angular',
+        ariaLabel: 'Source of Components for Angular package',
+      },
+      docs: {
+        href: generateDocsRelativeLink(metaComponentsAngular.id),
+        ariaLabel: 'Getting started with Components for Angular package',
+      },
+    },
+    img: {
+      src: '/assets/images/packages/components-angular.svg',
+      alt: '',
+    },
+    version: `v${getVersion(DEPENDENCIES['@swisspost/design-system-components-angular'])}`,
+  },
+  {
+    name: 'Internet-Header',
+    docsStoryId: metaInternetHeader.id,
+    type: PackageType.Wc,
+    link: {
+      github: {
+        href: 'https://github.com/swisspost/design-system/tree/main/packages/internet-header',
+        ariaLabel: 'Source of Internet-Header package',
+      },
+      docs: {
+        href: generateDocsRelativeLink(metaInternetHeader.id),
+        ariaLabel: 'Getting started with Internet-Header package',
+      },
+    },
+    img: {
+      src: '/assets/images/packages/internet-header.svg',
+      alt: '',
+    },
+    version: `v${getVersion(DEPENDENCIES['@swisspost/internet-header'])}`,
+  },
+  {
+    name: 'Intranet-Header',
+    docsStoryId: metaIntranetHeader.id,
+    type: PackageType.Angular,
+    link: {
+      github: {
+        href: 'https://github.com/swisspost/design-system/tree/main/packages/intranet-header-workspace/projects/intranet-header',
+        ariaLabel: 'Source of Intranet-Header package',
+      },
+      docs: {
+        href: generateDocsRelativeLink(metaIntranetHeader.id),
+        ariaLabel: 'Getting started with Intranet-Header package',
+      },
+    },
+    img: {
+      src: '/assets/images/packages/intranet-header.svg',
+      alt: '',
+    },
+    version: `v${getVersion(DEPENDENCIES['@swisspost/design-system-intranet-header'])}`,
+  },
+  {
+    name: 'Icons',
+    docsStoryId: metaIcons.id,
+    type: PackageType.Assets,
+    link: {
+      github: {
+        href: 'https://github.com/swisspost/design-system/tree/main/packages/icons',
+        ariaLabel: 'Source of Icons package',
+      },
+      docs: {
+        href: generateDocsRelativeLink(metaIcons.id),
+        ariaLabel: 'Getting started with Icons package',
+      },
+    },
+    img: {
+      src: '/assets/images/packages/icons.svg',
+      alt: '',
+    },
+    version: `v${getVersion(DEPENDENCIES['@swisspost/design-system-icons'])}`,
+  },
+];
+
+function generateDocsRelativeLink(storyId: string) {
+  return `/?path=/docs/${storyId}--docs`;
+}
diff --git a/packages/documentation/src/shared/tile/tile.component.scss b/packages/documentation/src/shared/tile/tile.component.scss
new file mode 100644
index 0000000000..4a3a1406f5
--- /dev/null
+++ b/packages/documentation/src/shared/tile/tile.component.scss
@@ -0,0 +1,100 @@
+@use 'sass:map';
+@use '@swisspost/design-system-styles/core.scss' as post;
+@use '@swisspost/design-system-styles/mixins/utilities';
+
+$tile-size: var(--post-docs-tile-size, 120px);
+$tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
+
+:host{
+  .tile {
+    display: flex;
+    flex-direction: column;
+    width: $tile-size;
+    height: $tile-size;
+    background-color: post.$white;
+    border-radius: post.$size-regular;
+    box-shadow: 0 2px 5px 0 rgba(post.$aubergine-dark, 0.3);
+    text-decoration: none;
+    text-align: center;
+
+    @include utilities.high-contrast-mode() {
+      border: 2px solid transparent;
+    }
+
+    .tile--title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      flex: 0 0 auto;
+      padding: 0 post.$size-micro;
+      height: calc(#{post.$size-mini * 2} + 2.2em);
+      background-color: post.$yellow;
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+      font-size: max(12px, calc($tile-size * 0.1));
+      font-weight: post.$font-weight-bold;
+      color: post.$black;
+      z-index: 1;
+      line-height: 1.1;
+      box-shadow: 0 2px 0 1px rgba(post.$yellow, 0.5);
+
+      ~ .tile--icon {
+        img {
+          max-height: 50px;
+        }
+      }
+    }
+
+    .tile--icon {
+      flex: 0 1 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      gap: post.$size-micro;
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+
+      ::slotted(img) {
+        height: 0;
+        min-height: min(100%, calc($tile-size * 0.4));
+      }
+
+      ::slotted(span) {
+        font-size: 0.6875em;
+        color: post.$gray-600;
+      }
+    }
+
+    &[href] {
+      transition: transform 150ms ease-out;
+
+      &:hover {
+        transform: scale(1.1);
+      }
+    }
+
+    @include post.media-breakpoint-down(rg) {
+      width: $tile-rg-size;
+      height: $tile-rg-size;
+
+      .tile--title {
+        height: calc(#{post.$size-mini * 1.5} + 2.2em);
+
+        ~ .tile--icon {
+          ::slotted(img) {
+            min-height: calc($tile-size * 0.3);
+          }
+        }
+      }
+
+      .tile--icon {
+        ::slotted(img) {
+          min-height: calc($tile-size * 0.4);
+        }
+      }
+    }
+  }
+}
+
+
diff --git a/packages/documentation/src/shared/tile/tile.component.ts b/packages/documentation/src/shared/tile/tile.component.ts
new file mode 100644
index 0000000000..fa089a52cc
--- /dev/null
+++ b/packages/documentation/src/shared/tile/tile.component.ts
@@ -0,0 +1,31 @@
+import { css, LitElement, nothing, unsafeCSS } from 'lit';
+import { html, unsafeStatic } from 'lit/static-html.js';
+import { customElement, property } from 'lit/decorators.js';
+import { spread } from '@open-wc/lit-helpers';
+import Styles from './tile.component.scss?inline';
+
+@customElement('ti-le')
+export class TileComponent extends LitElement {
+  @property({ type: String }) title: string = '';
+  @property({ type: String }) ariaLabel: string | null = null;
+  @property({ type: String }) href: string | null = null;
+
+  static get styles() {
+    return css`
+      ${unsafeCSS(Styles)}
+    `;
+  }
+
+  render() {
+    const isLink = this.href !== null;
+    const tag = isLink ? 'a' : 'div';
+    const attributes = isLink ? { href: this.href, target: '_blank' } : {};
+
+    return html` <${unsafeStatic(tag)} class="tile" ${spread(attributes)} aria-label="${
+      this.ariaLabel ?? nothing
+    }">
+      ${this.title ? html`<span class="tile--title">${this.title}</span>` : nothing}
+      <span class="tile--icon"><slot></slot></span>
+    </${unsafeStatic(tag)}>`;
+  }
+}
diff --git a/packages/documentation/src/stories/components/accordion/accordion.stories.ts b/packages/documentation/src/stories/components/accordion/accordion.stories.ts
index f5aa458f25..04a73e63e3 100644
--- a/packages/documentation/src/stories/components/accordion/accordion.stories.ts
+++ b/packages/documentation/src/stories/components/accordion/accordion.stories.ts
@@ -1,10 +1,12 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta<HTMLPostAccordionElement & HTMLPostCollapsibleElementEventMap> = {
+const meta: MetaComponent<HTMLPostAccordionElement & HTMLPostCollapsibleElementEventMap> = {
   id: '4d1b4185-e04d-494a-ab38-2b56c1778b0b',
   title: 'Components/Accordion',
+  tags: ['package:WebComponents'],
   component: 'post-accordion',
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
index 52ebbeb0b3..d06ec8ae3e 100644
--- a/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/standard-html/alert.stories.ts
@@ -1,13 +1,15 @@
 // @ts-ignore
 import { useArgs } from '@storybook/preview-api';
-import { Args, Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { getAlertClasses } from './getAlertClasses';
+import { MetaComponent } from '../../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '105e67d8-31e9-4d0b-87ff-685aba31fd4c',
   title: 'Components/Alert',
+  tags: ['package:HTML'],
   render: renderAlert,
   decorators: [externalControl],
   parameters: {
@@ -63,7 +65,7 @@ const meta: Meta = {
         'The icon to display in the alert. By default, the icon depends on the alert type.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
-        '<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
+        '<a href="/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
       if: {
         arg: 'noIcon',
diff --git a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
index 702baaed1e..9968d8f551 100644
--- a/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
+++ b/packages/documentation/src/stories/components/alert/web-component/post-alert.stories.ts
@@ -1,10 +1,12 @@
-import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import { StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { spreadArgs } from '../../../../utils';
+import { MetaComponent } from '../../../../../types';
 
-const meta: Meta<HTMLPostAlertElement> = {
+const meta: MetaComponent<HTMLPostAlertElement> = {
   id: '8fd36823-966e-46a8-8432-a4439f6e208f',
-  title: 'Components/Post Alert',
+  title: 'Components/Alert',
+  tags: ['package:WebComponents', 'redirect:105e67d8-31e9-4d0b-87ff-685aba31fd4c'],
   component: 'post-alert',
   render: renderAlert,
   decorators: [externalControl],
diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
index 2fefed13d3..2be92512ef 100644
--- a/packages/documentation/src/stories/components/badge/badge.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -1,11 +1,13 @@
 import { useArgs } from '@storybook/preview-api';
-import type { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { mapClasses } from '../../../utils';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'bec68e8b-445e-4760-8bd7-1b9970206d8d',
   title: 'Components/Badge',
+  tags: ['package:HTML'],
   render: renderBadge,
   decorators: [externalControl],
   parameters: {
diff --git a/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts b/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts
index 2fc841ef28..9d9aa5f973 100644
--- a/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts
+++ b/packages/documentation/src/stories/components/blockquote/blockquote.stories.ts
@@ -1,9 +1,11 @@
-import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj } from '@storybook/web-components';
 import { html, unsafeStatic } from 'lit/static-html.js';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'a4c7d5fa-9f8d-4a95-820b-ae4ce9ab4f03',
   title: 'Components/Blockquote',
+  tags: ['package:HTML'],
   render: renderBlockquote,
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/button-group/button-group.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
index a3ff2813b0..b77cb83280 100644
--- a/packages/documentation/src/stories/components/button-group/button-group.stories.ts
+++ b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
@@ -1,10 +1,12 @@
-import type { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { useArgs } from '@storybook/preview-api';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '021d61aa-e039-4858-b4b9-b86a3e772811',
   title: 'Components/Button Group',
+  tags: ['package:HTML'],
   render: renderButtonGroup,
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index f21c2f8a08..2b593de613 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -1,11 +1,13 @@
-import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj } from '@storybook/web-components';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { spread } from '@open-wc/lit-helpers';
 import { repeat } from 'lit/directives/repeat.js';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'eb78afcb-ce92-4990-94b6-6536d5ec6af4',
   title: 'Components/Button',
+  tags: ['package:HTML'],
   parameters: {
     badges: [],
     design: {
@@ -137,7 +139,7 @@ const meta: Meta = {
         'Defines a custom icon.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
-        '<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
+        '<a href="/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
       if: {
         arg: 'tag',
diff --git a/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts b/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
index 88ea7e32cf..9b9757a4e9 100644
--- a/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
+++ b/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
@@ -1,10 +1,13 @@
-import { Meta, StoryObj, Args } from '@storybook/web-components';
+import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { useArgs } from '@storybook/preview-api';
 import scss from './card-button.module.scss';
+import { MetaComponent } from '../../../../../types';
 
-const meta: Meta = {
-  title: 'Components/Cards/Card-Button',
+const meta: MetaComponent = {
+  id: '6f8f76ec-a2b5-4eb0-87f7-4021e1a5b8d0',
+  title: 'Components/Cards/Card Button',
+  tags: ['package:HTML'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/cards/card/card.stories.ts b/packages/documentation/src/stories/components/cards/card/card.stories.ts
index 1e4abc3b7f..5a96d67f62 100644
--- a/packages/documentation/src/stories/components/cards/card/card.stories.ts
+++ b/packages/documentation/src/stories/components/cards/card/card.stories.ts
@@ -1,11 +1,13 @@
-import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { choose } from 'lit/directives/choose.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { MetaComponent } from '../../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '605c788d-3f75-4e6c-8498-be3d546843c2',
   title: 'Components/Cards/Card',
+  tags: ['package:HTML'],
   decorators: [clickBlocker, paddedContainer],
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts b/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
index ddffbb7434..99f51dd051 100644
--- a/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
+++ b/packages/documentation/src/stories/components/cards/product-card/product-card.stories.ts
@@ -1,10 +1,12 @@
-import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj } from '@storybook/web-components';
 import { html, unsafeStatic } from 'lit/static-html.js';
 import { nothing } from 'lit';
+import { MetaComponent } from '../../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'b4800d9e-4837-4476-a327-bb4586eb7e97',
   title: 'Components/Cards/Product Card',
+  tags: ['package:HTML'],
   decorators: [paddedContainer, clickBlocker],
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/carousel/carousel.stories.ts b/packages/documentation/src/stories/components/carousel/carousel.stories.ts
index 23d1ae1d5a..367d7ec546 100644
--- a/packages/documentation/src/stories/components/carousel/carousel.stories.ts
+++ b/packages/documentation/src/stories/components/carousel/carousel.stories.ts
@@ -1,8 +1,10 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'cb3ba4a2-1265-4a20-b184-b85443146efa',
   title: 'Components/Carousel',
+  tags: ['package:Angular'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
index 9572c3507b..65f225d4d9 100644
--- a/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
+++ b/packages/documentation/src/stories/components/collapsible/collapsible.stories.ts
@@ -1,10 +1,12 @@
-import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import { StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { spreadArgs } from '../../../utils';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta<HTMLPostCollapsibleElement> = {
+const meta: MetaComponent<HTMLPostCollapsibleElement> = {
   id: '6a91848c-16ec-4a23-bc45-51c797b5b2c3',
   title: 'Components/Collapsible',
+  tags: ['package:WebComponents'],
   component: 'post-collapsible',
   render: renderCollapsible,
   decorators: [externalControls],
diff --git a/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts b/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts
index 2b2e0edf64..e8dac20710 100644
--- a/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts
+++ b/packages/documentation/src/stories/components/datepicker/datepicker.stories.ts
@@ -1,9 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '6561b345-9d64-4f95-8ea6-2389586410bd',
   title: 'Components/Datepicker',
+  tags: ['package:Angular'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/dropdown/dropdown.stories.ts b/packages/documentation/src/stories/components/dropdown/dropdown.stories.ts
index de74d63592..d8ed29741d 100644
--- a/packages/documentation/src/stories/components/dropdown/dropdown.stories.ts
+++ b/packages/documentation/src/stories/components/dropdown/dropdown.stories.ts
@@ -1,8 +1,9 @@
-import { Meta } from '@storybook/web-components';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '63113d0a-6ceb-472c-ac6a-729404e862ca',
   title: 'Components/Dropdown',
+  tags: ['package:Angular'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
index 576be69f21..cc0373ac27 100644
--- a/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
+++ b/packages/documentation/src/stories/components/forms/checkbox/checkbox.stories.ts
@@ -1,12 +1,14 @@
 import { useArgs } from '@storybook/preview-api';
-import type { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { mapClasses } from '../../../../utils';
+import { MetaComponent } from '../../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'e6ecc86f-d148-413b-b796-614a89da54be',
   title: 'Components/Forms/Checkbox',
+  tags: ['package:HTML'],
   render: renderCheckbox,
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/forms/choice-card/checkbox-card.stories.ts b/packages/documentation/src/stories/components/forms/choice-card/checkbox-card.stories.ts
index 7bf6c9b04c..056e213873 100644
--- a/packages/documentation/src/stories/components/forms/choice-card/checkbox-card.stories.ts
+++ b/packages/documentation/src/stories/components/forms/choice-card/checkbox-card.stories.ts
@@ -1,14 +1,18 @@
 import { choiceCardDefault, choiceCardGroup, choiceCardMeta } from './choice-card';
+import { MetaComponent } from '../../../../../types';
 
-export default {
+const meta: MetaComponent = {
   ...choiceCardMeta,
   id: '9637bbae-0533-4522-89d4-c2732431c69b',
   title: 'Components/Forms/Checkbox Card',
+  tags: ['package:HTML'],
   parameters: {
     badges: [],
   },
 };
 
+export default meta;
+
 export const Default = {
   render: choiceCardDefault,
   args: { ...choiceCardMeta.args, type: 'checkbox' },
diff --git a/packages/documentation/src/stories/components/forms/choice-card/choice-card.ts b/packages/documentation/src/stories/components/forms/choice-card/choice-card.ts
index f5bc3b6392..29942999c9 100644
--- a/packages/documentation/src/stories/components/forms/choice-card/choice-card.ts
+++ b/packages/documentation/src/stories/components/forms/choice-card/choice-card.ts
@@ -1,11 +1,12 @@
-import type { Args, Meta } from '@storybook/web-components';
+import type { Args } from '@storybook/web-components';
 import { html } from 'lit/static-html.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { BADGE } from '../../../../../.storybook/constants';
 import { nothing } from 'lit';
 import { useArgs } from '@storybook/preview-api';
+import { MetaExtended } from '../../../../../types';
 
-export const choiceCardMeta: Meta = {
+export const choiceCardMeta: MetaExtended = {
   parameters: {
     badges: [BADGE.NEEDS_REVISION],
     controls: {
diff --git a/packages/documentation/src/stories/components/forms/choice-card/radiobutton-card.stories.ts b/packages/documentation/src/stories/components/forms/choice-card/radiobutton-card.stories.ts
index fcdcd2d876..277eec8845 100644
--- a/packages/documentation/src/stories/components/forms/choice-card/radiobutton-card.stories.ts
+++ b/packages/documentation/src/stories/components/forms/choice-card/radiobutton-card.stories.ts
@@ -1,13 +1,17 @@
-import { choiceCardMeta, choiceCardDefault, choiceCardGroup } from './choice-card';
+import { choiceCardDefault, choiceCardGroup, choiceCardMeta } from './choice-card';
+import { MetaComponent } from '../../../../../types';
 
-export default {
+const meta: MetaComponent = {
   ...choiceCardMeta,
   title: 'Components/Forms/Radio Button Card',
+  tags: ['package:HTML'],
   parameters: {
     badges: [],
   },
 };
 
+export default meta;
+
 export const Default = {
   render: choiceCardDefault,
   args: { ...choiceCardMeta.args, type: 'radio' },
diff --git a/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts b/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
index d8cdab660f..2a172da500 100644
--- a/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/custom-select/custom-select.stories.ts
@@ -1,8 +1,10 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaComponent } from '../../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'e5a39d4f-4448-4398-9380-7c9fcae4a514',
   title: 'Components/Forms/Custom Select',
+  tags: ['package:Angular'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/forms/input/input.stories.ts b/packages/documentation/src/stories/components/forms/input/input.stories.ts
index 316c1692ef..afd429caed 100644
--- a/packages/documentation/src/stories/components/forms/input/input.stories.ts
+++ b/packages/documentation/src/stories/components/forms/input/input.stories.ts
@@ -1,5 +1,6 @@
-import { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html, nothing, TemplateResult } from 'lit';
+import { MetaComponent } from '../../../../../types';
 
 const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'null': undefined,
@@ -7,9 +8,10 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'is-invalid': true,
 };
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '2df77c32-5e33-402e-bd2e-54d54271ce19',
   title: 'Components/Forms/Input',
+  tags: ['package:HTML'],
   render: render,
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
index 680667ca08..d3e594e2bc 100644
--- a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
+++ b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
@@ -1,6 +1,7 @@
-import { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { useArgs } from '@storybook/preview-api';
 import { html, nothing, TemplateResult } from 'lit';
+import { MetaComponent } from '../../../../../types';
 
 const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'null': undefined,
@@ -8,9 +9,10 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'is-invalid': true,
 };
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '151242aa-a074-4a55-a81c-db597c83cdad',
-  title: 'Components/Forms/Radio button',
+  title: 'Components/Forms/Radio Button',
+  tags: ['package:HTML'],
   parameters: {
     controls: {
       exclude: ['Hidden Legend'],
diff --git a/packages/documentation/src/stories/components/forms/range/range.stories.ts b/packages/documentation/src/stories/components/forms/range/range.stories.ts
index 72b73139d0..63a2215d5e 100644
--- a/packages/documentation/src/stories/components/forms/range/range.stories.ts
+++ b/packages/documentation/src/stories/components/forms/range/range.stories.ts
@@ -1,6 +1,7 @@
-import { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { useArgs } from '@storybook/preview-api';
 import { html, nothing, TemplateResult } from 'lit';
+import { MetaComponent } from '../../../../../types';
 
 const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'null': undefined,
@@ -10,9 +11,10 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
 
 const ARROW_KEYS = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '4c5a4537-d663-4d2b-9c49-17af95443696',
   title: 'Components/Forms/Range',
+  tags: ['package:HTML'],
   render: render,
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/forms/select/select.stories.ts b/packages/documentation/src/stories/components/forms/select/select.stories.ts
index 5b159c06bd..cf7b20c9d8 100644
--- a/packages/documentation/src/stories/components/forms/select/select.stories.ts
+++ b/packages/documentation/src/stories/components/forms/select/select.stories.ts
@@ -1,7 +1,8 @@
-import type { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { useArgs } from '@storybook/preview-api';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { MetaComponent } from '../../../../../types';
 
 const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'null': undefined,
@@ -9,9 +10,10 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'is-invalid': true,
 };
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'bc251cd0-5173-463b-8729-586bb1bf1e1a',
   title: 'Components/Forms/Select',
+  tags: ['package:HTML'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
index da2828c214..f7b6ba1006 100644
--- a/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
+++ b/packages/documentation/src/stories/components/forms/switch/switch.stories.ts
@@ -1,12 +1,14 @@
 import { useArgs } from '@storybook/preview-api';
-import type { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { mapClasses } from '../../../../utils';
+import { MetaComponent } from '../../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '7fb639f8-86f6-4937-999c-4ee15f81643b',
   title: 'Components/Forms/Switch',
+  tags: ['package:HTML'],
   render: renderSwitch,
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
index 43069b017c..d3d1d02f35 100644
--- a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
+++ b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -1,6 +1,7 @@
-import type { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
 import { mapClasses } from '../../../../utils';
+import { MetaComponent } from '../../../../../types';
 
 const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'null': undefined,
@@ -8,9 +9,10 @@ const VALIDATION_STATE_MAP: Record<string, undefined | boolean> = {
   'is-invalid': true,
 };
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '152b7268-cce0-43d7-b931-41a57370f9a0',
   title: 'Components/Forms/Textarea',
+  tags: ['package:HTML'],
   render: renderTextarea,
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/heading/heading.stories.ts b/packages/documentation/src/stories/components/heading/heading.stories.ts
index fdcd005a1d..52b086a186 100644
--- a/packages/documentation/src/stories/components/heading/heading.stories.ts
+++ b/packages/documentation/src/stories/components/heading/heading.stories.ts
@@ -1,9 +1,11 @@
-import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj } from '@storybook/web-components';
 import { html, unsafeStatic } from 'lit/static-html.js';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '7ecd87f1-de96-4e39-a057-ba1798eb6959',
   title: 'Components/Heading',
+  tags: ['package:HTML'],
   parameters: {
     badges: [],
     design: {
diff --git a/packages/documentation/src/stories/components/icons/getting-started.stories.ts b/packages/documentation/src/stories/components/icons/getting-started.stories.ts
deleted file mode 100644
index 88022e4f56..0000000000
--- a/packages/documentation/src/stories/components/icons/getting-started.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-
-const meta: Meta = {
-  id: '40ed323b-9c1a-42ab-91ed-15f97f214608',
-  title: 'Components/Icons/Getting Started',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/packages/documentation/src/stories/components/icons/components/icon.docs.mdx b/packages/documentation/src/stories/components/icons/icon.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/icons/components/icon.docs.mdx
rename to packages/documentation/src/stories/components/icons/icon.docs.mdx
diff --git a/packages/documentation/src/stories/components/icons/components/icon.stories.ts b/packages/documentation/src/stories/components/icons/icon.stories.ts
similarity index 94%
rename from packages/documentation/src/stories/components/icons/components/icon.stories.ts
rename to packages/documentation/src/stories/components/icons/icon.stories.ts
index 00b704a093..49e5721662 100644
--- a/packages/documentation/src/stories/components/icons/components/icon.stories.ts
+++ b/packages/documentation/src/stories/components/icons/icon.stories.ts
@@ -1,13 +1,15 @@
 import { spread } from '@open-wc/lit-helpers';
-import { Args, Meta, StoryObj } from '@storybook/web-components';
-import { Components } from '@swisspost/design-system-components';
+import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
-import { spreadArgs } from '../../../../utils';
+import { spreadArgs } from '../../../utils';
+import { Components } from '@swisspost/design-system-components/src';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '0dcfe3c0-bfc0-4107-b43b-7e9d825b805f',
-  title: 'Components/Icons/Icon Component',
+  title: 'Components/Icon',
+  tags: ['package:WebComponents'],
   component: 'post-icon',
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/icons/search-icons/search-icons.stories.ts b/packages/documentation/src/stories/components/icons/search-icons/search-icons.stories.ts
deleted file mode 100644
index be179e6e5c..0000000000
--- a/packages/documentation/src/stories/components/icons/search-icons/search-icons.stories.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-
-const meta: Meta = {
-  id: '5704bdc4-c5b5-45e6-b123-c54d01fce2f1',
-  title: 'Components/Icons/Search for Icons',
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.docs.mdx b/packages/documentation/src/stories/components/internet-header/breadcrumbs/breadcrumbs.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.docs.mdx
rename to packages/documentation/src/stories/components/internet-header/breadcrumbs/breadcrumbs.docs.mdx
diff --git a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.stories.ts b/packages/documentation/src/stories/components/internet-header/breadcrumbs/breadcrumbs.stories.ts
similarity index 84%
rename from packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.stories.ts
rename to packages/documentation/src/stories/components/internet-header/breadcrumbs/breadcrumbs.stories.ts
index 13147787bd..ae7cc4f055 100644
--- a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/breadcrumbs.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/breadcrumbs/breadcrumbs.stories.ts
@@ -1,13 +1,15 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { spread } from '@open-wc/lit-helpers';
-import { getAttributes } from '../../../../../utils';
+import { getAttributes } from '../../../../utils';
 import customItems from './overrides/custom-items';
+import { MetaComponent } from '../../../../../types';
 
-const meta: Meta<HTMLSwisspostInternetBreadcrumbsElement> = {
+const meta: MetaComponent<HTMLSwisspostInternetBreadcrumbsElement> = {
   id: '4347e5bf-8bf2-4f44-9075-9faaa53591ed',
   title: 'Components/Internet Header/Breadcrumbs',
   component: 'swisspost-internet-breadcrumbs',
+  tags: ['package:InternetHeader'],
   render: renderInternetBreadcrumbs,
   decorators: [hiddenHeader],
   parameters: {
diff --git a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.docs.mdx b/packages/documentation/src/stories/components/internet-header/breadcrumbs/overrides/breadcrumbs-config.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.docs.mdx
rename to packages/documentation/src/stories/components/internet-header/breadcrumbs/overrides/breadcrumbs-config.docs.mdx
diff --git a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.stories.ts b/packages/documentation/src/stories/components/internet-header/breadcrumbs/overrides/breadcrumbs-config.stories.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/breadcrumbs-config.stories.ts
rename to packages/documentation/src/stories/components/internet-header/breadcrumbs/overrides/breadcrumbs-config.stories.ts
diff --git a/packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/custom-items.ts b/packages/documentation/src/stories/components/internet-header/breadcrumbs/overrides/custom-items.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/breadcrumbs/overrides/custom-items.ts
rename to packages/documentation/src/stories/components/internet-header/breadcrumbs/overrides/custom-items.ts
diff --git a/packages/documentation/src/stories/components/internet-header/components/footer/custom-config/custom-footer-config.ts b/packages/documentation/src/stories/components/internet-header/footer/custom-config/custom-footer-config.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/footer/custom-config/custom-footer-config.ts
rename to packages/documentation/src/stories/components/internet-header/footer/custom-config/custom-footer-config.ts
diff --git a/packages/documentation/src/stories/components/internet-header/components/footer/custom-config/footer-config.docs.mdx b/packages/documentation/src/stories/components/internet-header/footer/custom-config/footer-config.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/footer/custom-config/footer-config.docs.mdx
rename to packages/documentation/src/stories/components/internet-header/footer/custom-config/footer-config.docs.mdx
diff --git a/packages/documentation/src/stories/components/internet-header/components/footer/custom-config/footer-config.stories.ts b/packages/documentation/src/stories/components/internet-header/footer/custom-config/footer-config.stories.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/footer/custom-config/footer-config.stories.ts
rename to packages/documentation/src/stories/components/internet-header/footer/custom-config/footer-config.stories.ts
diff --git a/packages/documentation/src/stories/components/internet-header/components/footer/footer.docs.mdx b/packages/documentation/src/stories/components/internet-header/footer/footer.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/footer/footer.docs.mdx
rename to packages/documentation/src/stories/components/internet-header/footer/footer.docs.mdx
diff --git a/packages/documentation/src/stories/components/internet-header/components/footer/footer.stories.ts b/packages/documentation/src/stories/components/internet-header/footer/footer.stories.ts
similarity index 87%
rename from packages/documentation/src/stories/components/internet-header/components/footer/footer.stories.ts
rename to packages/documentation/src/stories/components/internet-header/footer/footer.stories.ts
index 4000c4dcd3..7e14f224bd 100644
--- a/packages/documentation/src/stories/components/internet-header/components/footer/footer.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/footer/footer.stories.ts
@@ -1,12 +1,14 @@
-import { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import customFooterConfig from './custom-config/custom-footer-config';
 import { spread } from '@open-wc/lit-helpers';
+import { MetaComponent } from '../../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '27fc009d-3eec-43a9-b3a2-55531e721817',
   title: 'Components/Internet Header/Footer',
   component: 'swisspost-internet-footer',
+  tags: ['package:InternetHeader'],
   render: renderInternetFooter,
   decorators: [hiddenHeader],
   parameters: {
diff --git a/packages/documentation/src/stories/components/internet-header/getting-started.docs.mdx b/packages/documentation/src/stories/components/internet-header/getting-started.docs.mdx
deleted file mode 100644
index df41f3f0b8..0000000000
--- a/packages/documentation/src/stories/components/internet-header/getting-started.docs.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { Meta, Source } from '@storybook/blocks';
-import { PostTabs, PostTabHeader, PostTabPanel } from '@swisspost/design-system-components-react';
-import SampleFrameworks from './internet-header-frameworks.sample.html?raw';
-import SampleLazyLoaded from './internet-header-lazy-loaded.sample.js?raw';
-import SampleBareComponent from './internet-header-bare-component.sample.js?raw';
-import SampleCDNLazyLoaded from './internet-header-cdn-lazy-loaded.sample.html?raw';
-import SampleCDNBareComponent from './internet-header-cdn-bare-component.sample.html?raw';
-import { SourceDarkMode } from '../../../../.storybook/preview';
-import * as GettingStartedStories from './getting-started.stories';
-
-<Meta of={GettingStartedStories} />
-
-# @swisspost/internet-header
-
-[![npm version](https://badge.fury.io/js/@swisspost%2Finternet-header.svg)](https://badge.fury.io/js/@swisspost%2Finternet-header)
-
-The header for client-facing applications.
-
-    <ul>
-    <li><a href="#installation" target="_self">Installation</a></li>
-    <li><a href="#configuration" target="_self">Configuration</a></li>
-    <li><a href="#help" target="_self">Help</a></li>
-    </ul>
-
-## Installation
-
-### Choosing between lazy-loaded or bare component version
-
-Internet-header package provide two versions:
-
-- Lazy-loaded (default): it allows better performance by dynamically load the component when used, so it reduces bundle size, startup time and first paint.
-- Bare component: if you already manage the lazy-loading or don't need it for any reason, you can use the component without any overhead.
-
-### Angular, Vue.js, React (or any other bundler setup)
-
-All the popular frameworks come with some form of bundler.
-This makes it easy to use npm packages like the Internet Header as you can import,
-bundle and deliver the header with your own code.
-
-When working with Angular or any other framework, the easiest installation method is via npm.
-
-<Source code={`npm install @swisspost/internet-header`} dark={SourceDarkMode} language="bash" />
-
-<Source code={SampleFrameworks} dark={SourceDarkMode} language="html" />
-
-<PostTabs>
-  <PostTabHeader slot="tabs" panel="lazy-loaded">Lazy-Loaded</PostTabHeader>
-  <PostTabPanel name="lazy-loaded">
-    <Source code={SampleLazyLoaded} dark={SourceDarkMode} language="javascript" />
-  </PostTabPanel>
-
-  <PostTabHeader slot="tabs" panel="bareComponent">Bare Component</PostTabHeader>
-  <PostTabPanel name="bareComponent">
-    <Source code={SampleBareComponent} dark={SourceDarkMode} language="javascript" />
-  </PostTabPanel>
-</PostTabs>
-
-### Include from a CDN
-
-If you are not using any bundler or don't want to install from npm, you can load the `internet-header` from your favourite [CDN](https://en.wikipedia.org/wiki/Content_delivery_network).<br/>
-Make sure to replace `{version}` with the version you want to use or remove `@{version}` to use the latest version.
-
-Available CDNs:
-
-- [jsDelivr](https://www.jsdelivr.com/): replace `{cdnURL}` with [https://cdn.jsdelivr.net/npm/@swisspost/internet-header](https://cdn.jsdelivr.net/npm/@swisspost/internet-header).
-- [unpkg](https://unpkg.com/): replace `{cdnURL}` with [https://unpkg.com/@swisspost/internet-header](https://unpkg.com/@swisspost/internet-header).
-
-<PostTabs>
-  <PostTabHeader slot="tabs" panel="lazy-loaded">Lazy-Loaded</PostTabHeader>
-  <PostTabPanel name="lazy-loaded">
-    <Source code={SampleCDNLazyLoaded} dark={SourceDarkMode} language="html" />
-  </PostTabPanel>
-
-  <PostTabHeader slot="tabs" panel="bareComponent">Bare Component</PostTabHeader>
-  <PostTabPanel name="bareComponent">
-    <Source code={SampleCDNBareComponent} dark={SourceDarkMode} language="html" />
-  </PostTabPanel>
-</PostTabs>
-## Configuration
-
-The Internet Header is built to support the already existing Portal Configuration used for the old Internet Header.
-
-If you're working on a new project, you probably need a new configuration. Please click the button below.
-
-<a
-  className="mb-small-r btn-primary btn"
-  href="mailto:digitalconsulting@post.ch"
-  target="_blank"
-  rel="noopener"
->Contact Post Portal Team <post-icon name="1001" className="fs-large" /></a>
-
-Not every Online Service has configurations for all environments.
-For example, "TOPOS" only has `int02` configured and cannot use `int01` as value for environment.
-If you are not sure what's configured for your project, please reach out to the post-portal team as well.
-
-For settings on the header itself, see the examples provided in the left menu bar.
-
-## Help
-
-If you noticed a bug or need assistance with migrating to the new Internet Header, please post your enquiry at the [Design System GitHub Discussions](https://github.com/swisspost/design-system/discussions/categories/q-a).
diff --git a/packages/documentation/src/stories/components/internet-header/getting-started.stories.ts b/packages/documentation/src/stories/components/internet-header/getting-started.stories.ts
deleted file mode 100644
index 8cbd69efc5..0000000000
--- a/packages/documentation/src/stories/components/internet-header/getting-started.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-
-const meta: Meta = {
-  id: '9b02bcb2-3b6a-4271-b550-675a62ff3890',
-  title: 'Components/Internet Header/Getting Started',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/config/custom-config.ts b/packages/documentation/src/stories/components/internet-header/header/config/custom-config.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/config/custom-config.ts
rename to packages/documentation/src/stories/components/internet-header/header/config/custom-config.ts
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/config/language-switch-overrides.ts b/packages/documentation/src/stories/components/internet-header/header/config/language-switch-overrides.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/config/language-switch-overrides.ts
rename to packages/documentation/src/stories/components/internet-header/header/config/language-switch-overrides.ts
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/config/os-flyout-overrides.ts b/packages/documentation/src/stories/components/internet-header/header/config/os-flyout-overrides.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/config/os-flyout-overrides.ts
rename to packages/documentation/src/stories/components/internet-header/header/config/os-flyout-overrides.ts
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/header.docs.mdx b/packages/documentation/src/stories/components/internet-header/header/header.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/header.docs.mdx
rename to packages/documentation/src/stories/components/internet-header/header/header.docs.mdx
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/header.scss b/packages/documentation/src/stories/components/internet-header/header/header.scss
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/header.scss
rename to packages/documentation/src/stories/components/internet-header/header/header.scss
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/header.stories.ts b/packages/documentation/src/stories/components/internet-header/header/header.stories.ts
similarity index 95%
rename from packages/documentation/src/stories/components/internet-header/components/header/header.stories.ts
rename to packages/documentation/src/stories/components/internet-header/header/header.stories.ts
index 04ddacd5cf..08d177bf5d 100644
--- a/packages/documentation/src/stories/components/internet-header/components/header/header.stories.ts
+++ b/packages/documentation/src/stories/components/internet-header/header/header.stories.ts
@@ -1,13 +1,15 @@
-import { Args, Meta, StoryObj } from '@storybook/web-components';
+import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
-import { spreadArgs } from '../../../../../utils';
+import { spreadArgs } from '../../../../utils';
 import customConfig from './config/custom-config';
 import osFlyoutOverrides from './config/os-flyout-overrides';
 import languageSwitchOverrides from './config/language-switch-overrides';
+import { MetaComponent } from '../../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'ebb11274-091b-4cb7-9a3f-3e0451c9a865',
   title: 'Components/Internet Header/Header',
+  tags: ['package:InternetHeader'],
   component: 'swisspost-internet-header',
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-config.docs.mdx b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-config.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-config.docs.mdx
rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-config.docs.mdx
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-config.stories.ts b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-config.stories.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-config.stories.ts
rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-config.stories.ts
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.docs.mdx b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-content.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.docs.mdx
rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-content.docs.mdx
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.stories.ts b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-content.stories.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-custom-content.stories.ts
rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-custom-content.stories.ts
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-language-switch-overrides.docs.mdx b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-language-switch-overrides.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-language-switch-overrides.docs.mdx
rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-language-switch-overrides.docs.mdx
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-language-switch-overrides.stories.ts b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-language-switch-overrides.stories.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-language-switch-overrides.stories.ts
rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-language-switch-overrides.stories.ts
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-os-flyout-overrides.docs.mdx b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-os-flyout-overrides.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-os-flyout-overrides.docs.mdx
rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-os-flyout-overrides.docs.mdx
diff --git a/packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-os-flyout-overrides.stories.ts b/packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-os-flyout-overrides.stories.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/components/header/overrides-stories/header-os-flyout-overrides.stories.ts
rename to packages/documentation/src/stories/components/internet-header/header/overrides-stories/header-os-flyout-overrides.stories.ts
diff --git a/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx b/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx
deleted file mode 100644
index a1f9857575..0000000000
--- a/packages/documentation/src/stories/components/internet-header/migration-guide.docs.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Meta, Source } from '@storybook/blocks';
-import SampleReference from './internet-header-reference.sample.ts?raw';
-import SampleInstall from './internet-header-install.sample.html?raw';
-import SampleFixAppStyles from './internet-header-fix-app-styles.sample.html?raw';
-import SampleOld from './internet-header-old.sample.html?raw';
-import { SourceDarkMode } from '../../../../.storybook/preview';
-import * as MigrationGuideStories from './migration-guide.stories';
-
-<Meta of={MigrationGuideStories} />
-
-# Migration from the old header
-
-This guide aims to give a broad overview of how a migration can be performed.
-Different projects have different levels of integration with the header,
-and therefore require more steps to migrate.
-
-## Architecture
-
-The "new"
-Internet Header Web Component aims
-to encapsulate as much as possible whereas the old header had a big influence on the page —
-limiting design decisions and flexibility of the markup structure.
-The Web Component Header consists of one script and three standard Web Components that can be freely placed on the page.
-It's even possible to render those elements with Angular
-(or any other framework) to easier pass settings into the component.
-
-The new header is built
-to work with the existing Sitecore configuration
-already existing for your project to make the migration as smooth as possible.
-
-## Support
-
-If you need support during your migration,
-don't hesitate
-to contact the [Design System Team](https://github.com/swisspost/design-system/discussions/categories/general) on GitHub.
-
-## 1. Remove the old header
-
-In your index.html, you should find three scripts associated with the old header.
-One to load static assets, one to configure it and one to load it.
-
-- You can remove the configuration and the loader scripts, but remember your `serviceid`.
-- Try to remove the `staticassets` script to check if you still need it
-
-<Source code={SampleOld} dark={true} language="html" />
-
-## 2. Fix your app styles
-
-The old header was responsible for wrapping your main code (here `#os_content`) with custom `<div>`s.
-The new header does not provide those wrappers.
-Instead, every page has control over the main markup structure.
-A possible replacement of the above code could be:
-
-<Source code={SampleFixAppStyles} dark={true} language="html" />
-
-- Likely you'll need the class `container` around your main content to align it properly in the center.
-- For bonus points on semantic markup, use the [`<main>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) around the main page content
-- Check if you need the `staticasset` stylesheets linked in the header
-
-If you need to do any other changes,
-please make a post to the [Design System Teams Channel](https://teams.microsoft.com/l/channel/19%3ae7fa68fb13eb40b4bf4604edea5f4b3e%40thread.tacv2/%25F0%259F%259A%2591%2520Support?groupId=123c7c9e-052a-40e6-98d3-6cc6d46bad0a&tenantId=3ae7c479-0cf1-47f4-8f84-929f364eff67)
-in order to inform the devs to update this guide and provide useful information for other developers.
-
-## 3. jQuery
-
-The new Header does not ship jQuery anymore.
-While jQuery v3.6 is an internal dependency for the Login Widget,
-every project is now responsible for loading and updating jQuery individually.
-If you are depending on an older (&lt;3.5) version of jQuery, please update.
-There is a long list of [known jQuery vulnerabilities](https://security.snyk.io/package/npm/jquery).
-
-## 4. Install the new header
-
-Please refer to the [Internet Header installation instructions](/?path=/docs/9b02bcb2-3b6a-4271-b550-675a62ff3890--docs) for an installation guide.
-
-After installation, you're ready to add the new tags to your markup:
-
-<Source code={SampleInstall} dark={SourceDarkMode} language="html" />
-
-Place the new elements as described (and needed) as shown above.
-The breadcrumbs need a `container` wrapper to align themselves with the content of your page,
-the header and the footer already provide a container.
-If you don't have breadcrumbs, you can just delete the `<aside>` and the `<swisspost-internet-breadcrumbs>`.
-
-## 5. Working with the new header
-
-If you need to change settings during runtime, you can get a reference to the header by querying:
-
-<Source code={SampleReference} dark={SourceDarkMode} language="typescript" />
-
-At the [Internet Header configuration page](/?path=/docs/ebb11274-091b-4cb7-9a3f-3e0451c9a865--docs) you can find a list of possible options.
diff --git a/packages/documentation/src/stories/components/internet-header/migration-guide.stories.ts b/packages/documentation/src/stories/components/internet-header/migration-guide.stories.ts
deleted file mode 100644
index 2e29b83c7d..0000000000
--- a/packages/documentation/src/stories/components/internet-header/migration-guide.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-
-const meta: Meta = {
-  id: 'a6e4dfe1-0272-425b-9980-0ad40822c2c1',
-  title: 'Components/Internet Header/Migration Guide',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header.docs.mdx b/packages/documentation/src/stories/components/intranet-header/intranet-header.docs.mdx
index 0a62b98632..9891803904 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header.docs.mdx
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header.docs.mdx
@@ -9,9 +9,7 @@ import SamplePostweb from './intranet-header-postweb.sample.html?raw';
 
 <Meta of={IntranetHeaderStories} />
 
-# @swisspost/design-system-intranet-header
-
-[![npm version](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header.svg)](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header)
+# Intranet-header
 
 <div className="alert alert-info alert-md">
   <h2 className="alert-heading">Angular only component</h2>
@@ -35,7 +33,7 @@ The Header Angular component for internal usage.
 
 ## Installation
 
-<Source code={`npm install @swisspost/design-system-intranet-header`} language="bash" />
+See <a href="/?path=/docs/7068be42-1a20-4a34-9e79-7fb7f9f2940f--docs">Intranet-header package page</a>
 
 ## Usage
 
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts b/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts
index f5c8388cfb..5a3294d804 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header.stories.ts
@@ -1,8 +1,9 @@
-import { Meta } from '@storybook/web-components';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'd59a459b-6f14-47c6-9f98-a36a3f79a6e3',
   title: 'Components/Intranet Header',
+  tags: ['package:IntranetHeader'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/modal/modal.stories.ts b/packages/documentation/src/stories/components/modal/modal.stories.ts
index 12c91794ee..6f5f0c470b 100644
--- a/packages/documentation/src/stories/components/modal/modal.stories.ts
+++ b/packages/documentation/src/stories/components/modal/modal.stories.ts
@@ -1,9 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '9a512414-84c5-473c-a7c8-a434eda9578d',
   title: 'Components/Modal',
+  tags: ['package:Angular'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.stories.ts b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.stories.ts
index d76febba45..c3ae11ff76 100644
--- a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.stories.ts
+++ b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.stories.ts
@@ -1,7 +1,10 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { StoryObj } from '@storybook/web-components';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
-  title: 'Components/Notification overlay',
+const meta: MetaComponent = {
+  id: 'aab3f0df-08ca-4e33-90eb-77ffda6528db',
+  title: 'Components/Notification Overlay',
+  tags: ['package:Angular'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/pagination/pagination.stories.ts b/packages/documentation/src/stories/components/pagination/pagination.stories.ts
index d24b55f6ae..c3feb49718 100644
--- a/packages/documentation/src/stories/components/pagination/pagination.stories.ts
+++ b/packages/documentation/src/stories/components/pagination/pagination.stories.ts
@@ -1,8 +1,10 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'caa89695-5c39-4cb5-8e62-579d918cbd2f',
   title: 'Components/Pagination',
+  tags: ['package:Angular'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/popover/popover.stories.ts b/packages/documentation/src/stories/components/popover/popover.stories.ts
index 4448852455..8ac5ee9a97 100644
--- a/packages/documentation/src/stories/components/popover/popover.stories.ts
+++ b/packages/documentation/src/stories/components/popover/popover.stories.ts
@@ -1,10 +1,12 @@
-import { Args, Meta, StoryObj } from '@storybook/web-components';
+import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '9a636763-de2d-4f72-bc81-98daf10871f7',
   title: 'Components/Popover',
+  tags: ['package:WebComponents'],
   component: 'post-popover',
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/progressbar/progressbar.stories.ts b/packages/documentation/src/stories/components/progressbar/progressbar.stories.ts
index 0f9c1c3c7d..136318253c 100644
--- a/packages/documentation/src/stories/components/progressbar/progressbar.stories.ts
+++ b/packages/documentation/src/stories/components/progressbar/progressbar.stories.ts
@@ -1,8 +1,10 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '446648d9-0360-4dec-a6f4-87f2f28b5f33',
   title: 'Components/Progressbar',
+  tags: ['package:Angular'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/rating/post-rating.stories.ts b/packages/documentation/src/stories/components/rating/post-rating.stories.ts
index afd7ddfda5..339bb97af6 100644
--- a/packages/documentation/src/stories/components/rating/post-rating.stories.ts
+++ b/packages/documentation/src/stories/components/rating/post-rating.stories.ts
@@ -1,9 +1,11 @@
-import { Args, Meta, StoryObj } from '@storybook/web-components';
+import { Args, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '956e063b-b40c-4fe4-bc27-53b8c4ab1e81',
   title: 'Components/Rating',
+  tags: ['package:WebComponents'],
   component: 'post-rating',
   render: render,
   parameters: {
diff --git a/packages/documentation/src/stories/components/spinner/spinner.snapshot.stories.ts b/packages/documentation/src/stories/components/spinner/spinner.snapshot.stories.ts
index 760b0c5485..b2faf06d57 100644
--- a/packages/documentation/src/stories/components/spinner/spinner.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/spinner/spinner.snapshot.stories.ts
@@ -3,8 +3,10 @@ import meta from './spinner.stories';
 import { html } from 'lit';
 import { bombArgs } from '../../../utils';
 
+const { id, ...metaWithoutId } = meta;
+
 export default {
-  ...meta,
+  ...metaWithoutId,
   title: 'Snapshots',
 };
 
diff --git a/packages/documentation/src/stories/components/spinner/spinner.stories.ts b/packages/documentation/src/stories/components/spinner/spinner.stories.ts
index 42baac698d..1e897c8693 100644
--- a/packages/documentation/src/stories/components/spinner/spinner.stories.ts
+++ b/packages/documentation/src/stories/components/spinner/spinner.stories.ts
@@ -1,8 +1,11 @@
-import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit/static-html.js';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
+  id: 'd0e645d0-3bf2-4b00-967a-5a1343107f60',
   title: 'Components/Spinner',
+  tags: ['package:HTML'],
   render,
   decorators: [story => generateDecorators(story)],
   parameters: {
diff --git a/packages/documentation/src/stories/components/stepper/stepper.stories.ts b/packages/documentation/src/stories/components/stepper/stepper.stories.ts
index 1190717d9a..e02789de49 100644
--- a/packages/documentation/src/stories/components/stepper/stepper.stories.ts
+++ b/packages/documentation/src/stories/components/stepper/stepper.stories.ts
@@ -1,9 +1,11 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '7dc546d9-e248-4d06-befe-3ad62fcd310f',
   title: 'Components/Stepper',
+  tags: ['package:Angular'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts b/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
index 3bf641513e..071fde0196 100644
--- a/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
+++ b/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
@@ -1,11 +1,14 @@
-import { Meta, StoryObj, Args, StoryContext } from '@storybook/web-components';
+import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import scss from './background.module.scss';
+import { MetaComponent } from '../../../../types';
 
 const backgroundColors = scss.bgClasses.split('"').filter((_, index) => index % 2 === 1);
 
-const meta: Meta = {
+const meta: MetaComponent = {
+  id: '87ceabbb-f552-46eb-8a47-4d84e7f8cef0',
   title: 'Components/Subnavigation',
+  tags: ['package:HTML'],
   decorators: [clickBlocker],
   render: renderTest,
   parameters: {
diff --git a/packages/documentation/src/stories/components/table/table.stories.ts b/packages/documentation/src/stories/components/table/table.stories.ts
index 8574b1a17d..1ff56053f0 100644
--- a/packages/documentation/src/stories/components/table/table.stories.ts
+++ b/packages/documentation/src/stories/components/table/table.stories.ts
@@ -1,10 +1,12 @@
-import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { mapClasses } from '../../../utils';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '81799516-470c-446b-a049-54946b6ccfca',
   title: 'Components/Table',
+  tags: ['package:HTML'],
   render: renderTable,
   parameters: {},
   args: {
diff --git a/packages/documentation/src/stories/components/tabs/tabs.stories.ts b/packages/documentation/src/stories/components/tabs/tabs.stories.ts
index cca94467db..80ffd6e013 100644
--- a/packages/documentation/src/stories/components/tabs/tabs.stories.ts
+++ b/packages/documentation/src/stories/components/tabs/tabs.stories.ts
@@ -1,10 +1,12 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta<HTMLPostTabsElement> = {
+const meta: MetaComponent<HTMLPostTabsElement> = {
   id: 'bb1291ca-4dbb-450c-a15f-596836d9f39e',
   title: 'Components/Tabs',
+  tags: ['package:WebComponents'],
   component: 'post-tabs',
   render: renderTabs,
   parameters: {
diff --git a/packages/documentation/src/stories/components/timepicker/timepicker.stories.ts b/packages/documentation/src/stories/components/timepicker/timepicker.stories.ts
index 9d4cda5241..06643422de 100644
--- a/packages/documentation/src/stories/components/timepicker/timepicker.stories.ts
+++ b/packages/documentation/src/stories/components/timepicker/timepicker.stories.ts
@@ -1,8 +1,10 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'a4d9f996-6e77-4fad-bb19-40fad1bb7a1d',
   title: 'Components/Timepicker',
+  tags: ['package:Angular'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/components/toast/toast.stories.ts b/packages/documentation/src/stories/components/toast/toast.stories.ts
index 5efddaa360..c881980d62 100644
--- a/packages/documentation/src/stories/components/toast/toast.stories.ts
+++ b/packages/documentation/src/stories/components/toast/toast.stories.ts
@@ -1,10 +1,12 @@
 import { useArgs } from '@storybook/preview-api';
-import { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
+import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '825b65c9-7eaf-4e0a-9e20-5f5ed406726d',
   title: 'Components/Toast',
+  tags: ['package:HTML'],
   parameters: {
     badges: [],
   },
@@ -85,7 +87,7 @@ const meta: Meta = {
         'Defines a custom icon.' +
         '<span className="mt-mini alert alert-info alert-sm">' +
         'To use a custom icon, you must first ' +
-        '<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
+        '<a href="/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
         '.</span>',
       if: {
         arg: 'noIcon',
diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
index 9cd35c3ed0..7e6da547cc 100644
--- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
+++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
@@ -1,12 +1,14 @@
-import { Args, Meta, StoryObj } from '@storybook/web-components';
+import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { useArgs } from '@storybook/preview-api';
 import { ifDefined } from 'lit/directives/if-defined.js';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: 'cd684d90-e7a7-41a9-8923-b1b72ad9b384',
   title: 'Components/Tooltip',
+  tags: ['package:WebComponents'],
   component: 'post-tooltip',
   parameters: {
     badges: [],
diff --git a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
index 4232c6f62c..4f3ee9696a 100644
--- a/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
+++ b/packages/documentation/src/stories/components/topic-teaser/topic-teaser.stories.ts
@@ -1,10 +1,12 @@
-import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj } from '@storybook/web-components';
 import { html, TemplateResult } from 'lit';
 import { mapClasses } from '../../../utils';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '2ffc7a53-c1aa-4ff5-b1e4-fa638591399c',
   title: 'Components/Topic Teaser',
+  tags: ['package:HTML'],
   parameters: {
     badges: [],
     layout: 'fullscreen',
diff --git a/packages/documentation/src/stories/components/typeahead/typeahead.stories.ts b/packages/documentation/src/stories/components/typeahead/typeahead.stories.ts
index ebf1181ad1..ee2c1b36f1 100644
--- a/packages/documentation/src/stories/components/typeahead/typeahead.stories.ts
+++ b/packages/documentation/src/stories/components/typeahead/typeahead.stories.ts
@@ -1,8 +1,10 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaComponent } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaComponent = {
   id: '0456901c-3713-4f1f-b592-1f4dbd65a500',
   title: 'Components/Typeahead',
+  tags: ['package:Angular'],
   parameters: {
     badges: [],
   },
diff --git a/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts b/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
index 36b5dbc7fd..db48e56637 100644
--- a/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
+++ b/packages/documentation/src/stories/foundation/accessibility/accessibility.stories.ts
@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: '46da78e8-e83b-4ca1-aaf6-bbc662efef14',
   title: 'Foundations/Accessibility',
   parameters: {
diff --git a/packages/documentation/src/stories/foundation/color/color.stories.ts b/packages/documentation/src/stories/foundation/color/color.stories.ts
index d53e03fcdf..507e42ae26 100644
--- a/packages/documentation/src/stories/foundation/color/color.stories.ts
+++ b/packages/documentation/src/stories/foundation/color/color.stories.ts
@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: 'e869afc1-3c50-4c20-a495-3d846f7a759e',
   title: 'Foundations/Color',
   parameters: {
diff --git a/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts b/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
index e9f9896132..19faa83953 100644
--- a/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
+++ b/packages/documentation/src/stories/foundation/elevation/elevation.stories.ts
@@ -1,7 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: 'cfdf83ff-efa7-4b3c-ac91-6898c4f88701',
   title: 'Foundations/Elevation',
   parameters: {
diff --git a/packages/documentation/src/stories/components/icons/search-icons/search-icons.blocks.tsx b/packages/documentation/src/stories/foundation/icons/search-icons.blocks.tsx
similarity index 100%
rename from packages/documentation/src/stories/components/icons/search-icons/search-icons.blocks.tsx
rename to packages/documentation/src/stories/foundation/icons/search-icons.blocks.tsx
diff --git a/packages/documentation/src/stories/components/icons/search-icons/search-icons.docs.mdx b/packages/documentation/src/stories/foundation/icons/search-icons.docs.mdx
similarity index 96%
rename from packages/documentation/src/stories/components/icons/search-icons/search-icons.docs.mdx
rename to packages/documentation/src/stories/foundation/icons/search-icons.docs.mdx
index 1caa334a3b..4ea3a731c8 100644
--- a/packages/documentation/src/stories/components/icons/search-icons/search-icons.docs.mdx
+++ b/packages/documentation/src/stories/foundation/icons/search-icons.docs.mdx
@@ -4,7 +4,7 @@ import * as SearchIcons from './search-icons.stories';
 
 <Meta of={SearchIcons} />
 
-# Search for icons
+# Search for Icons
 
 <div className="lead">
   The official Swiss Post Icon Library for the web with over 800 high-quality scalable vector
diff --git a/packages/documentation/src/stories/foundation/icons/search-icons.stories.ts b/packages/documentation/src/stories/foundation/icons/search-icons.stories.ts
new file mode 100644
index 0000000000..d837eca4ca
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/icons/search-icons.stories.ts
@@ -0,0 +1,13 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../types';
+
+const meta: MetaExtended = {
+  id: '5704bdc4-c5b5-45e6-b123-c54d01fce2f1',
+  title: 'Foundations/Search for Icons',
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation/src/stories/components/icons/search-icons/search-icons.styles.scss b/packages/documentation/src/stories/foundation/icons/search-icons.styles.scss
similarity index 100%
rename from packages/documentation/src/stories/components/icons/search-icons/search-icons.styles.scss
rename to packages/documentation/src/stories/foundation/icons/search-icons.styles.scss
diff --git a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
index 7402ff24b0..c62dcf96d6 100644
--- a/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/breakpoints/breakpoints.stories.ts
@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: '20af6e2b-32b1-42ef-a187-b026aea7fe13',
   title: 'Foundations/Layout/Breakpoints',
   parameters: {
diff --git a/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts b/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts
index 860f83b3b5..87c55bea26 100644
--- a/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/columns/columns.stories.ts
@@ -1,7 +1,8 @@
-import type { Args, Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import type { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
+import { MetaExtended } from '../../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: 'cd70f48f-6308-4ec8-a8c6-982bd72c855c',
   title: 'Foundations/Layout/Columns',
   parameters: {
diff --git a/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts b/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts
index eb75d9a235..fe6e491c99 100644
--- a/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/containers/containers.stories.ts
@@ -1,6 +1,7 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: 'a4ca9660-bb4a-4cc7-adfd-84767382ac03',
   title: 'Foundations/Layout/Containers',
   parameters: {
diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
index 4f6d43fcc6..d9545c0d85 100644
--- a/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
+++ b/packages/documentation/src/stories/foundation/layout/grid/grid.stories.ts
@@ -1,7 +1,8 @@
-import { Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import { StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import { MetaExtended } from '../../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: '7240f2ef-216a-490e-9bd8-c0cef19f7b31',
   title: 'Foundations/Layout/Grid',
   parameters: {
diff --git a/packages/documentation/src/stories/foundation/typography/typography.stories.ts b/packages/documentation/src/stories/foundation/typography/typography.stories.ts
index c397858351..9680d3b61b 100644
--- a/packages/documentation/src/stories/foundation/typography/typography.stories.ts
+++ b/packages/documentation/src/stories/foundation/typography/typography.stories.ts
@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: '677cfabf-dbf0-4de2-ad07-6d5bfb9e2375',
   title: 'Foundations/Typography',
   parameters: {
diff --git a/packages/documentation/src/stories/getting-started/angular/angular.docs.mdx b/packages/documentation/src/stories/getting-started/angular/angular.docs.mdx
new file mode 100644
index 0000000000..1db2cd500e
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/angular/angular.docs.mdx
@@ -0,0 +1,89 @@
+import { Meta, Source } from '@storybook/blocks';
+import * as AngularStories from './angular.stories';
+import SampleIconsConfig from './sample-icons-config.sample.json?raw';
+import SampleWcAngularManually from './sample-web-components-angular-manually.component.ts?raw';
+import { packages } from '../../../shared/packages.data';
+import '../../../shared/tile/tile.component';
+import './angular.styles.scss';
+import { PackageType } from '../../../../types';
+
+<Meta of={AngularStories} />
+
+# Angular
+
+The Swiss Post Design System is compatible with Angular. Here are some tips, best practices and information to include components the easiest way.
+
+## Usage of Web Components
+
+In the design-system team, we believe that the [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components) technologies should be the source for almost all, if not all, future components.
+
+Currently, we are providing some of our packages with those technologies:
+<ul className="tile-wrapper" role="list">
+  {packages.filter(pkg => pkg.type === PackageType.Wc).map((p => (
+    <li key={p.name}>
+      <ti-le title={p.name} href={p.link.docs.href} ariaLabel={p.link.docs.ariaLabel}>
+        <img src={p.img.src} alt={p.img.alt}/>
+        <span>{p.version}</span>
+      </ti-le>
+    </li>
+  )))}
+</ul>
+
+Even though, Angular support Web components technologies natively, they are less convenient to use than regular Angular components.
+To mitigate the problem, we are providing packages that add Angular wrapper around Custom Elements.
+
+<table className="table caption-top">
+  <caption>Why you should use or not use Angular wrapper package</caption>
+  <colgroup>
+    <col style={{width: '25%'}} />
+    <col style={{width: '25%'}} />
+  </colgroup>
+  <thead>
+    <tr>
+      <th>Advantages</th>
+      <th>Disadvantages</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>
+        <ul>
+          <li>Type-checking</li>
+          <li>Angular component wrappers will be detached from change detection, preventing unnecessary repaints of your web component</li>
+          <li>Web component events will be converted to RxJS observables to align with Angular's `@Output()` and will not emit across component boundaries.</li>
+          <li>Optionally, form control web components can be used as control value accessors with Angular's reactive forms or `[ngModel]`.</li>
+          <li>It is not necessary to include the Angular `CUSTOM_ELEMENTS_SCHEMA` in all modules consuming your Stencil components.</li>
+        </ul>
+      </td>
+      <td>
+        <ul>
+          <li>Package is linked to a (minimal) angular version</li>
+          <li>As the packages are generated automatically, the design-system team has less control</li>
+        </ul>
+      </td>
+    </tr>
+  </tbody>
+</table>
+Source: [Stencil Documentation](https://stenciljs.com/docs/angular)
+
+### Angular wrapper package
+
+For the components package, we provide the equivalent package called [components-angular](/?path=/docs/833ef689-a573-40f5-a6a6-30a999b94733--docs) which contains a wrapper for Angular generated (almost) automatically.
+
+Note: at the moment, we do not provide any equivalent for internet-header package, so you'll need to add them manually.
+
+### Declare manually Web components
+
+In addition to define all or a specific components in `main.ts` (see Usage section of the package), you need to declare to Angular that you'll add Custom Elements to your application with the `schema` property in every module where you need to use the components.
+
+<Source code={SampleWcAngularManually} language="typescript" />
+
+## Serve the icons within your application
+
+Icons from the design-system are stored in the icons package. To used them, you need to serve the image files from your application.
+Angular allows you to copy assets into the build by changing the `angular.json` configuration like this:
+
+<Source code={SampleIconsConfig} language="json" />
+
+
+
diff --git a/packages/documentation/src/stories/getting-started/angular/angular.stories.ts b/packages/documentation/src/stories/getting-started/angular/angular.stories.ts
new file mode 100644
index 0000000000..6aab59da1d
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/angular/angular.stories.ts
@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../types';
+
+const meta: MetaExtended = {
+  id: '8426deb2-3d6d-4fcc-90e6-1ca9737b2ed0',
+  title: 'Getting Started/Angular',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation/src/stories/getting-started/angular/angular.styles.scss b/packages/documentation/src/stories/getting-started/angular/angular.styles.scss
new file mode 100644
index 0000000000..1066c0faa3
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/angular/angular.styles.scss
@@ -0,0 +1,13 @@
+@use '@swisspost/design-system-styles/core.scss' as post;
+
+.tile-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 0;
+  list-style-type: none;
+  gap: post.$size-big;
+
+  @include post.media-breakpoint-down(rg) {
+    gap: post.$size-regular;
+  }
+}
diff --git a/packages/documentation/src/stories/components/icons/getting-started-angular-config.sample.json b/packages/documentation/src/stories/getting-started/angular/sample-icons-config.sample.json
similarity index 100%
rename from packages/documentation/src/stories/components/icons/getting-started-angular-config.sample.json
rename to packages/documentation/src/stories/getting-started/angular/sample-icons-config.sample.json
diff --git a/packages/documentation/src/stories/getting-started/angular/sample-web-components-angular-manually.component.ts b/packages/documentation/src/stories/getting-started/angular/sample-web-components-angular-manually.component.ts
new file mode 100644
index 0000000000..67d8b1ad7e
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/angular/sample-web-components-angular-manually.component.ts
@@ -0,0 +1,6 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+
+@NgModule({
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class Module {}
diff --git a/packages/documentation/src/stories/getting-started/compatibility/compatibility.docs.mdx b/packages/documentation/src/stories/getting-started/compatibility/compatibility.docs.mdx
index c5b668ac6d..cc727e2dcc 100644
--- a/packages/documentation/src/stories/getting-started/compatibility/compatibility.docs.mdx
+++ b/packages/documentation/src/stories/getting-started/compatibility/compatibility.docs.mdx
@@ -7,11 +7,44 @@ import * as GettingStartedStories from './compatibility.stories';
 
 <p id="compatibility-desc">List of compatible version numbers with external dependencies.</p>
 
+## Components-Angular
+
+<div className="table-responsive">
+  <table aria-describedby="compatibility-desc" className="table caption-top">
+    <caption>Package <a href="/?path=/docs/833ef689-a573-40f5-a6a6-30a999b94733--docs">@swisspost/design-system-components-angular</a></caption>
+    <colgroup>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '25%'}} />
+    </colgroup>
+    <thead>
+      <tr>
+        <th scope="col">Version</th>
+        <th scope="col">Angular</th>
+      </tr>
+    </thead>
+
+    <tbody>
+      <tr>
+        <th scope="col">1.x</th>
+        <td>16.x</td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
 ## Intranet-header
 
 <div className="table-responsive">
   <table aria-describedby="compatibility-desc" className="table caption-top">
-    <caption>Package @swisspost/design-system-intranet-header</caption>
+    <caption>Package <a href="/?path=/docs/cfa21cbc-5f8d-4a42-8165-7f6ed20bf133--docs">@swisspost/design-system-intranet-header</a></caption>
+    <colgroup>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '25%'}} />
+    </colgroup>
     <thead>
       <tr>
         <th>Version</th>
@@ -48,7 +81,13 @@ import * as GettingStartedStories from './compatibility.stories';
 
 <div className="table-responsive">
   <table aria-describedby="compatibility-desc" className="table caption-top">
-    <caption>Package @swisspost/design-system-styles</caption>
+    <caption>Package <a href="/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs">@swisspost/design-system-styles</a></caption>
+    <colgroup>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '25%'}} />
+    </colgroup>
     <thead>
       <tr>
         <th scope="col">Version</th>
@@ -86,6 +125,12 @@ import * as GettingStartedStories from './compatibility.stories';
 <div className="table-responsive">
   <table aria-describedby="compatibility-desc" className="table caption-top">
     <caption>Package @.../common-web-frontend</caption>
+    <colgroup>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '25%'}} />
+    </colgroup>
     <thead>
       <tr>
         <th scope="col">Version</th>
diff --git a/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts b/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts
index 1ef5f2e963..ab28d84146 100644
--- a/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts
+++ b/packages/documentation/src/stories/getting-started/compatibility/compatibility.stories.ts
@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: '829f6c45-5734-4d55-b290-2c8a86a07b67',
   title: 'Getting Started/Compatibility',
   parameters: {
diff --git a/packages/documentation/src/stories/getting-started/components-angular/angular.stories.ts b/packages/documentation/src/stories/getting-started/components-angular/angular.stories.ts
deleted file mode 100644
index c26127ef79..0000000000
--- a/packages/documentation/src/stories/getting-started/components-angular/angular.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-
-const meta: Meta = {
-  id: '833ef689-a573-40f5-a6a6-30a999b94733',
-  title: 'Getting Started/Components-Angular',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/packages/documentation/src/stories/getting-started/components/components.stories.ts b/packages/documentation/src/stories/getting-started/components/components.stories.ts
deleted file mode 100644
index 5148887189..0000000000
--- a/packages/documentation/src/stories/getting-started/components/components.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-
-const meta: Meta = {
-  id: 'edfb619b-fda1-4570-bf25-20830303d483',
-  title: 'Getting Started/Components',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/packages/documentation/src/stories/getting-started/introduction.docs.mdx b/packages/documentation/src/stories/getting-started/introduction.docs.mdx
new file mode 100644
index 0000000000..83c25cc289
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/introduction.docs.mdx
@@ -0,0 +1,121 @@
+import { Meta } from '@storybook/blocks';
+import * as IntroductionStories from './introduction.stories';
+import { packages } from '../../shared/packages.data';
+import '../../shared/tile/tile.component';
+import { PackageType } from '../../../types';
+import './list-component';
+
+<Meta of={IntroductionStories} />
+
+# Introduction
+
+Welcome to the Swiss post design system world!
+
+## Which package do I need?
+
+The design-system is formed with several packages and different compatibilities with your favorite framework.
+
+<div className="table-responsive" style={{'--post-docs-tile-size': '100px', '--post-docs-tile-rg-size': '100px'}}>
+  <table className="table table-bordered">
+    <caption className="visually-hidden">Compatibilities between components and frameworks and which package is needed</caption>
+    <colgroup>
+      <col style={{width: '25%'}}/>
+      <col style={{width: '15%'}}/>
+      <col style={{width: '20%'}}/>
+      <col style={{width: '20%'}}/>
+      <col style={{width: '20%'}} />
+    </colgroup>
+    <thead>
+      <tr>
+        <th scope="col">Component</th>
+        <th scope="col">Base + …</th>
+        <th scope="col">JavaScript (Vanilla)</th>
+        <th scope="col">Angular</th>
+        <th scope="col">React</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td scope="row">
+          Internet-header:
+          <list-component packageType={PackageType.InternetHeader}></list-component>
+        </td>
+        <td rowSpan="0">
+          {[packages.find(pkg => pkg.name === 'Styles')].map((p => (
+            <ti-le title={p.name} href={p.link.docs.href} ariaLabel={p.link.docs.ariaLabel} key={p.name}>
+              <img src={p.img.src} alt={p.img.alt}/>
+              <span>{p.version}</span>
+            </ti-le>
+          )))}
+        </td>
+        <td colSpan="2">
+          <div style={{ display:'flex', justifyContent: 'center' }}>
+          {[packages.find(pkg => pkg.name === 'Internet-Header')].map((p => (
+            <ti-le title={p.name} href={p.link.docs.href} ariaLabel={p.link.docs.ariaLabel} key={p.name}>
+              <img src={p.img.src} alt={p.img.alt}/>
+              <span>{p.version}</span>
+            </ti-le>
+          )))}
+          </div>
+        </td>
+        <td>TBD</td>
+      </tr>
+      <tr>
+        <td scope="row">Intranet-header</td>
+        <td>N/A</td>
+        <td>
+          {[packages.find(pkg => pkg.name === 'Intranet-Header')].map((p => (
+            <ti-le title={p.name} href={p.link.docs.href} ariaLabel={p.link.docs.ariaLabel} key={p.name}>
+              <img src={p.img.src} alt={p.img.alt}/>
+              <span>{p.version}</span>
+            </ti-le>
+            )))}
+        </td>
+        <td >N/A</td>
+      </tr>
+      <tr>
+        <td scope="row">
+          Web Components:
+          <list-component packageType={PackageType.Wc}></list-component>
+        </td>
+        <td>
+          {[packages.find(pkg => pkg.name === 'Components')].map((p => (
+            <ti-le title={p.name} href={p.link.docs.href} ariaLabel={p.link.docs.ariaLabel} key={p.name}>
+              <img src={p.img.src} alt={p.img.alt}/>
+              <span>{p.version}</span>
+            </ti-le>
+          )))}
+        </td>
+        <td>
+          {[packages.find(pkg => pkg.name === 'Components for Angular')].map((p => (
+            <ti-le title={p.name} href={p.link.docs.href} ariaLabel={p.link.docs.ariaLabel} key={p.name}>
+              <img src={p.img.src} alt={p.img.alt}/>
+              <span>{p.version}</span>
+            </ti-le>
+          )))}
+        </td>
+        <td>TBD</td>
+      </tr>
+      <tr>
+        <td scope="row">
+          Angular components:
+          <list-component packageType={PackageType.Angular}></list-component>
+        </td>
+        <td>N/A</td>
+        <td>
+          <a href="https://ng-bootstrap.github.io">Ng-Bootstrap</a> module specific to the component
+        </td>
+        <td >N/A</td>
+      </tr>
+      <tr>
+        <td scope="row">
+          HTML components:
+          <list-component packageType={PackageType.Html}></list-component>
+        </td>
+        <td colSpan="3" >
+          No additional package is required
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
diff --git a/packages/documentation/src/stories/getting-started/introduction.stories.ts b/packages/documentation/src/stories/getting-started/introduction.stories.ts
new file mode 100644
index 0000000000..2bbac42442
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/introduction.stories.ts
@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../types';
+
+const meta: MetaExtended = {
+  id: 'dfc70c3b-4726-406b-8a41-af5738c89d05',
+  title: 'Getting Started/Introduction',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation/src/stories/getting-started/list-component.ts b/packages/documentation/src/stories/getting-started/list-component.ts
new file mode 100644
index 0000000000..8184856d5a
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/list-component.ts
@@ -0,0 +1,98 @@
+import { html, LitElement } from 'lit';
+import { Task } from '@lit/task';
+import { customElement, property } from 'lit/decorators.js';
+import { PackageType } from '../../../types';
+
+const INDEX_PATH = '/index.json';
+const TAG_REDIRECT_PREFIX = 'redirect:';
+const TAG_PACKAGE_PREFIX = 'package:';
+
+interface Entry {
+  id: string;
+  name: string;
+  title: string;
+  href: string;
+  tags: string[];
+}
+
+interface IndexInput {
+  entries: {
+    [key: string]: Entry;
+  };
+}
+
+@customElement('list-component')
+export class ListComponent extends LitElement {
+  @property({ type: String }) packageType: PackageType | null = null;
+
+  createRenderRoot() {
+    /**
+     * Render template without shadow DOM.
+     */
+    return this;
+  }
+
+  private _indexTask = new Task(this, {
+    task: async ([packageType]) => {
+      const response = (await fetch(INDEX_PATH)) as any;
+      const rawData: IndexInput = await response.json();
+      return (
+        Object.values(rawData.entries)
+          .filter(
+            entry =>
+              entry.id.endsWith('--default') &&
+              entry.tags.includes(`${TAG_PACKAGE_PREFIX}${packageType}`),
+          )
+          .map(entry => {
+            const redirectId = entry.tags
+              .find(tag => tag.startsWith(TAG_REDIRECT_PREFIX))
+              ?.replace(TAG_REDIRECT_PREFIX, '');
+
+            return {
+              ...entry,
+              title: getTitleFromPath(entry.title),
+              href: getDocsPath(redirectId ?? entry.id),
+            } as Entry;
+          })
+          // Sort to re-order with stories inside folder
+          .sort((a, b) => {
+            if (a.title > b.title) {
+              return 1;
+            }
+            if (a.title < b.title) {
+              return -1;
+            }
+            return 0;
+          })
+      );
+    },
+    args: () => [this.packageType],
+  });
+
+  render() {
+    return this._indexTask.render({
+      pending: () => html`<p>Loading…</p>`,
+      complete: entries => html`
+        <ul>
+          ${entries.map(
+            entry => html`
+              <li>
+                <a href="${entry.href}">${entry.title}</a>
+              </li>
+            `,
+          )}
+        </ul>
+      `,
+      error: e => html`<p>Error: ${e}</p>`,
+    });
+  }
+}
+
+function getTitleFromPath(path: string) {
+  return path.split('/').at(-1);
+}
+
+function getDocsPath(id: string) {
+  const idWithoutSuffix = id.split('--')[0];
+  return `/?path=/docs/${idWithoutSuffix}--docs`;
+}
diff --git a/packages/documentation/src/stories/getting-started/components-angular/angular-app-component.sample.html b/packages/documentation/src/stories/getting-started/packages/components-angular/angular-app-component.sample.html
similarity index 100%
rename from packages/documentation/src/stories/getting-started/components-angular/angular-app-component.sample.html
rename to packages/documentation/src/stories/getting-started/packages/components-angular/angular-app-component.sample.html
diff --git a/packages/documentation/src/stories/getting-started/components-angular/angular-app-module.sample.ts b/packages/documentation/src/stories/getting-started/packages/components-angular/angular-app-module.sample.ts
similarity index 100%
rename from packages/documentation/src/stories/getting-started/components-angular/angular-app-module.sample.ts
rename to packages/documentation/src/stories/getting-started/packages/components-angular/angular-app-module.sample.ts
diff --git a/packages/documentation/src/stories/getting-started/components-angular/angular.docs.mdx b/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.docs.mdx
similarity index 92%
rename from packages/documentation/src/stories/getting-started/components-angular/angular.docs.mdx
rename to packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.docs.mdx
index 56a5e3848f..5c7d6ef64f 100644
--- a/packages/documentation/src/stories/getting-started/components-angular/angular.docs.mdx
+++ b/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.docs.mdx
@@ -1,5 +1,5 @@
 import { Meta, Source } from '@storybook/blocks';
-import * as GettingStartedStories from './angular.stories';
+import * as GettingStartedStories from './components-angular.stories';
 import AngularAppModuleSample from './angular-app-module.sample.ts?raw';
 import AngularAppComponentSample from './angular-app-component.sample.html?raw';
 
diff --git a/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.stories.ts b/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.stories.ts
new file mode 100644
index 0000000000..784d0b74a4
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/packages/components-angular/components-angular.stories.ts
@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../../types';
+
+const meta: MetaExtended = {
+  id: '833ef689-a573-40f5-a6a6-30a999b94733',
+  title: 'Getting Started/Packages/Components for Angular',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation/src/stories/getting-started/components/components-cdn-bare-component-all.sample.html b/packages/documentation/src/stories/getting-started/packages/components/components-cdn-bare-component-all.sample.html
similarity index 100%
rename from packages/documentation/src/stories/getting-started/components/components-cdn-bare-component-all.sample.html
rename to packages/documentation/src/stories/getting-started/packages/components/components-cdn-bare-component-all.sample.html
diff --git a/packages/documentation/src/stories/getting-started/components/components-cdn-lazy-loaded-all.sample.html b/packages/documentation/src/stories/getting-started/packages/components/components-cdn-lazy-loaded-all.sample.html
similarity index 100%
rename from packages/documentation/src/stories/getting-started/components/components-cdn-lazy-loaded-all.sample.html
rename to packages/documentation/src/stories/getting-started/packages/components/components-cdn-lazy-loaded-all.sample.html
diff --git a/packages/documentation/src/stories/getting-started/components/components-cdn-lazy-loaded-specific.sample.html b/packages/documentation/src/stories/getting-started/packages/components/components-cdn-lazy-loaded-specific.sample.html
similarity index 100%
rename from packages/documentation/src/stories/getting-started/components/components-cdn-lazy-loaded-specific.sample.html
rename to packages/documentation/src/stories/getting-started/packages/components/components-cdn-lazy-loaded-specific.sample.html
diff --git a/packages/documentation/src/stories/getting-started/components/components-js-all.sample.js b/packages/documentation/src/stories/getting-started/packages/components/components-js-all.sample.js
similarity index 100%
rename from packages/documentation/src/stories/getting-started/components/components-js-all.sample.js
rename to packages/documentation/src/stories/getting-started/packages/components/components-js-all.sample.js
diff --git a/packages/documentation/src/stories/getting-started/components/components-js-specific.sample.js b/packages/documentation/src/stories/getting-started/packages/components/components-js-specific.sample.js
similarity index 100%
rename from packages/documentation/src/stories/getting-started/components/components-js-specific.sample.js
rename to packages/documentation/src/stories/getting-started/packages/components/components-js-specific.sample.js
diff --git a/packages/documentation/src/stories/getting-started/components/components.docs.mdx b/packages/documentation/src/stories/getting-started/packages/components/components.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/getting-started/components/components.docs.mdx
rename to packages/documentation/src/stories/getting-started/packages/components/components.docs.mdx
diff --git a/packages/documentation/src/stories/getting-started/packages/components/components.stories.ts b/packages/documentation/src/stories/getting-started/packages/components/components.stories.ts
new file mode 100644
index 0000000000..48077c7c9c
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/packages/components/components.stories.ts
@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../../types';
+
+const meta: MetaExtended = {
+  id: 'edfb619b-fda1-4570-bf25-20830303d483',
+  title: 'Getting Started/Packages/Components',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation/src/stories/components/icons/getting-started-icon-meta.sample.html b/packages/documentation/src/stories/getting-started/packages/icons/package-icons-icon-meta.sample.html
similarity index 100%
rename from packages/documentation/src/stories/components/icons/getting-started-icon-meta.sample.html
rename to packages/documentation/src/stories/getting-started/packages/icons/package-icons-icon-meta.sample.html
diff --git a/packages/documentation/src/stories/components/icons/getting-started-node-16.7.0.sample.json b/packages/documentation/src/stories/getting-started/packages/icons/package-icons-node-16.7.0.sample.json
similarity index 100%
rename from packages/documentation/src/stories/components/icons/getting-started-node-16.7.0.sample.json
rename to packages/documentation/src/stories/getting-started/packages/icons/package-icons-node-16.7.0.sample.json
diff --git a/packages/documentation/src/stories/components/icons/getting-started-node-old.sample.js b/packages/documentation/src/stories/getting-started/packages/icons/package-icons-node-old.sample.js
similarity index 100%
rename from packages/documentation/src/stories/components/icons/getting-started-node-old.sample.js
rename to packages/documentation/src/stories/getting-started/packages/icons/package-icons-node-old.sample.js
diff --git a/packages/documentation/src/stories/components/icons/getting-started-node-old.sample.json b/packages/documentation/src/stories/getting-started/packages/icons/package-icons-node-old.sample.json
similarity index 100%
rename from packages/documentation/src/stories/components/icons/getting-started-node-old.sample.json
rename to packages/documentation/src/stories/getting-started/packages/icons/package-icons-node-old.sample.json
diff --git a/packages/documentation/src/stories/components/icons/getting-started.docs.mdx b/packages/documentation/src/stories/getting-started/packages/icons/package-icons.mdx
similarity index 78%
rename from packages/documentation/src/stories/components/icons/getting-started.docs.mdx
rename to packages/documentation/src/stories/getting-started/packages/icons/package-icons.mdx
index c5c49f0788..1091ed0622 100644
--- a/packages/documentation/src/stories/components/icons/getting-started.docs.mdx
+++ b/packages/documentation/src/stories/getting-started/packages/icons/package-icons.mdx
@@ -1,13 +1,12 @@
 import { Meta, Source } from '@storybook/blocks';
 import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react';
-import * as GettingStartedStories from './getting-started.stories';
-import SampleAngularConfig from './getting-started-angular-config.sample.json?raw';
-import SampleNode16 from './getting-started-node-16.7.0.sample.json?raw';
-import SampleNodeOlder from './getting-started-node-old.sample.json?raw';
-import SampleNodeOlderJs from './getting-started-node-old.sample.js?raw';
-import SampleIconMeta from './getting-started-icon-meta.sample.html?raw';
+import * as PackageIconsStories from './package-icons.stories';
+import SampleNode16 from './package-icons-node-16.7.0.sample.json?raw';
+import SampleNodeOlder from './package-icons-node-old.sample.json?raw';
+import SampleNodeOlderJs from './package-icons-node-old.sample.js?raw';
+import SampleIconMeta from './package-icons-icon-meta.sample.html?raw';
 
-<Meta of={GettingStartedStories} />
+<Meta of={PackageIconsStories} />
 
 # @swisspost/design-system-icons
 
@@ -32,11 +31,7 @@ The comprehensive collection of Swiss Post icons.
 <Source code={`npm install @swisspost/design-system-icons`} language="bash" />
 
 <div className="alert alert-info alert-md">
-  If you want to use our [icon component](/?path=/docs/0dcfe3c0-bfc0-4107-b43b-7e9d825b805f--docs) to
-  render the icons (which we strongly recommend), you must also install the
-  <strong>components</strong> package.
-  <br />
-  To learn how to set up this package please read our [Components - Getting Started](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs) page.
+  To render an icon with a component, you need to install the [Components package](/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs) as well.
 </div>
 
 ## Usage
@@ -48,10 +43,7 @@ Read on to find out what the possible solutions look like...
 
 ### Serve the icons within an Angular application
 
-It is very easy to serve the icons from the `node_modules` folder directly into your angular application.
-Just open your `angular.json` file and add the following to the `build.options.assets`:
-
-<Source code={SampleAngularConfig} language="json" />
+See [Getting started with Angular](/?path=/docs/8426deb2-3d6d-4fcc-90e6-1ca9737b2ed0--docs)
 
 ### Copy & paste the icons with a postinstall script
 
diff --git a/packages/documentation/src/stories/getting-started/packages/icons/package-icons.stories.ts b/packages/documentation/src/stories/getting-started/packages/icons/package-icons.stories.ts
new file mode 100644
index 0000000000..c413dc4767
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/packages/icons/package-icons.stories.ts
@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../../types';
+
+const meta: MetaExtended = {
+  id: '40ed323b-9c1a-42ab-91ed-15f97f214608',
+  title: 'Getting Started/Packages/Icons',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation/src/stories/components/internet-header/internet-header-bare-component.sample.js b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-bare-component.sample.js
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/internet-header-bare-component.sample.js
rename to packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-bare-component.sample.js
diff --git a/packages/documentation/src/stories/components/internet-header/internet-header-cdn-bare-component.sample.html b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-cdn-bare-component.sample.html
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/internet-header-cdn-bare-component.sample.html
rename to packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-cdn-bare-component.sample.html
diff --git a/packages/documentation/src/stories/components/internet-header/internet-header-cdn-lazy-loaded.sample.html b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-cdn-lazy-loaded.sample.html
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/internet-header-cdn-lazy-loaded.sample.html
rename to packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-cdn-lazy-loaded.sample.html
diff --git a/packages/documentation/src/stories/components/internet-header/internet-header-fix-app-styles.sample.html b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-fix-app-styles.sample.html
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/internet-header-fix-app-styles.sample.html
rename to packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-fix-app-styles.sample.html
diff --git a/packages/documentation/src/stories/components/internet-header/internet-header-frameworks.sample.html b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-frameworks.sample.html
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/internet-header-frameworks.sample.html
rename to packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-frameworks.sample.html
diff --git a/packages/documentation/src/stories/components/internet-header/internet-header-install.sample.html b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-install.sample.html
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/internet-header-install.sample.html
rename to packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-install.sample.html
diff --git a/packages/documentation/src/stories/components/internet-header/internet-header-lazy-loaded.sample.js b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-lazy-loaded.sample.js
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/internet-header-lazy-loaded.sample.js
rename to packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-lazy-loaded.sample.js
diff --git a/packages/documentation/src/stories/components/internet-header/internet-header-old.sample.html b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-old.sample.html
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/internet-header-old.sample.html
rename to packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-old.sample.html
diff --git a/packages/documentation/src/stories/components/internet-header/internet-header-reference.sample.ts b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-reference.sample.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/internet-header-reference.sample.ts
rename to packages/documentation/src/stories/getting-started/packages/internet-header/internet-header-reference.sample.ts
diff --git a/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx
new file mode 100644
index 0000000000..ea8b532024
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.docs.mdx
@@ -0,0 +1,187 @@
+import { Meta, Source } from '@storybook/blocks';
+import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react';
+import SampleFrameworks from './internet-header-frameworks.sample.html?raw';
+import SampleLazyLoaded from './internet-header-lazy-loaded.sample.js?raw';
+import SampleBareComponent from './internet-header-bare-component.sample.js?raw';
+import SampleCDNLazyLoaded from './internet-header-cdn-lazy-loaded.sample.html?raw';
+import SampleCDNBareComponent from './internet-header-cdn-bare-component.sample.html?raw';
+import SampleReference from './internet-header-reference.sample.ts?raw';
+import SampleInstall from './internet-header-install.sample.html?raw';
+import SampleFixAppStyles from './internet-header-fix-app-styles.sample.html?raw';
+import SampleOld from './internet-header-old.sample.html?raw';
+import * as GettingStartedStories from './internet-header.stories';
+import { SourceDarkMode } from '../../../../../.storybook/preview';
+
+<Meta of={GettingStartedStories} />
+
+# @swisspost/internet-header
+
+[![npm version](https://badge.fury.io/js/@swisspost%2Finternet-header.svg)](https://badge.fury.io/js/@swisspost%2Finternet-header)
+
+The header for client-facing applications.
+
+<ul>
+  <li><a href="#configuration" target="_self">Configuration</a></li>
+  <li><a href="#installation" target="_self">Installation</a></li>
+  <li><a href="#migration-from-the-old-header" target="_self">Migration Guide</a></li>
+</ul>
+
+## Preparation
+
+### Request a configuration
+
+The Internet Header is built to support the already existing Portal Configuration used for the old Internet Header.
+
+If you're working on a new project, you probably need a new configuration. Please click the button below.
+
+<a
+  className="mb-small-r btn-primary btn"
+  href="mailto:digitalconsulting@post.ch"
+  target="_blank"
+  rel="noopener"
+>Contact Post Portal Team <post-icon name="1001" className="fs-large" /></a>
+
+Not every Online Service has configurations for all environments.
+For example, "TOPOS" only has `int02` configured and cannot use `int01` as value for environment.
+If you are not sure what's configured for your project, please reach out to the post-portal team as well.
+
+### Choose between lazy-loaded or bare component version
+
+Internet-header package provide two versions:
+
+- Lazy-loaded (default): it allows better performance by dynamically load the component when used, so it reduces bundle size, startup time and first paint.
+- Bare component: if you already manage the lazy-loading or don't need it for any reason, you can use the component without any overhead.
+
+## Installation
+
+### Install with a bundler
+
+All the popular frameworks come with some form of bundler.
+This makes it easy to use npm packages like the Internet Header as you can import,
+bundle and deliver the header with your own code.
+
+When working with Angular or any other framework, the easiest installation method is via npm.
+
+<Source code={`npm install @swisspost/internet-header`} dark={SourceDarkMode} language="bash" />
+
+<Source code={SampleFrameworks} dark={SourceDarkMode} language="html" />
+
+<PostTabs>
+  <PostTabHeader slot="tabs" panel="lazy-loaded">Lazy-Loaded</PostTabHeader>
+  <PostTabPanel name="lazy-loaded">
+    <Source code={SampleLazyLoaded} dark={SourceDarkMode} language="javascript" />
+  </PostTabPanel>
+
+  <PostTabHeader slot="tabs" panel="bareComponent">Bare Component</PostTabHeader>
+  <PostTabPanel name="bareComponent">
+    <Source code={SampleBareComponent} dark={SourceDarkMode} language="javascript" />
+  </PostTabPanel>
+</PostTabs>
+
+### Include from a CDN
+
+If you are not using any bundler or don't want to install from npm, you can load the `internet-header` from your favourite [CDN](https://en.wikipedia.org/wiki/Content_delivery_network).<br/>
+Make sure to replace `{version}` with the version you want to use or remove `@{version}` to use the latest version.
+
+Available CDNs:
+
+- [jsDelivr](https://www.jsdelivr.com/): replace `{cdnURL}` with [https://cdn.jsdelivr.net/npm/@swisspost/internet-header](https://cdn.jsdelivr.net/npm/@swisspost/internet-header).
+- [unpkg](https://unpkg.com/): replace `{cdnURL}` with [https://unpkg.com/@swisspost/internet-header](https://unpkg.com/@swisspost/internet-header).
+
+<PostTabs>
+  <PostTabHeader slot="tabs" panel="lazy-loaded">Lazy-Loaded</PostTabHeader>
+  <PostTabPanel name="lazy-loaded">
+    <Source code={SampleCDNLazyLoaded} dark={SourceDarkMode} language="html" />
+  </PostTabPanel>
+
+  <PostTabHeader slot="tabs" panel="bareComponent">Bare Component</PostTabHeader>
+  <PostTabPanel name="bareComponent">
+    <Source code={SampleCDNBareComponent} dark={SourceDarkMode} language="html" />
+  </PostTabPanel>
+</PostTabs>
+
+## Usage with Angular
+
+For Angular user, please have a look at [How to integrate Web Components inside Angular](/?path=/docs/8426deb2-3d6d-4fcc-90e6-1ca9737b2ed0--docs#usage-of-web-components)
+
+## Migration from the old header
+
+This guide aims to give a broad overview of how a migration can be performed.
+Different projects have different levels of integration with the header,
+and therefore require more steps to migrate.
+
+### Architecture
+
+The "new"
+Internet Header Web Component aims
+to encapsulate as much as possible whereas the old header had a big influence on the page —
+limiting design decisions and flexibility of the markup structure.
+The Web Component Header consists of one script and three standard Web Components that can be freely placed on the page.
+It's even possible to render those elements with Angular
+(or any other framework) to easier pass settings into the component.
+
+The new header is built
+to work with the existing Sitecore configuration
+already existing for your project to make the migration as smooth as possible.
+
+### Support
+
+If you need support during your migration,
+don't hesitate
+to contact the [Design System Team](https://github.com/swisspost/design-system/discussions/categories/general) on GitHub.
+
+### 1. Remove the old header
+
+In your index.html, you should find three scripts associated with the old header.
+One to load static assets, one to configure it and one to load it.
+
+- You can remove the configuration and the loader scripts, but remember your `serviceid`.
+- Try to remove the `staticassets` script to check if you still need it
+
+<Source code={SampleOld} dark={true} language="html" />
+
+### 2. Fix your app styles
+
+The old header was responsible for wrapping your main code (here `#os_content`) with custom `<div>`s.
+The new header does not provide those wrappers.
+Instead, every page has control over the main markup structure.
+A possible replacement of the above code could be:
+
+<Source code={SampleFixAppStyles} dark={true} language="html" />
+
+- Likely you'll need the class `container` around your main content to align it properly in the center.
+- For bonus points on semantic markup, use the [`<main>` tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main) around the main page content
+- Check if you need the `staticasset` stylesheets linked in the header
+
+If you need to do any other changes,
+please make a post to the [Design System Teams Channel](https://teams.microsoft.com/l/channel/19%3ae7fa68fb13eb40b4bf4604edea5f4b3e%40thread.tacv2/%25F0%259F%259A%2591%2520Support?groupId=123c7c9e-052a-40e6-98d3-6cc6d46bad0a&tenantId=3ae7c479-0cf1-47f4-8f84-929f364eff67)
+in order to inform the devs to update this guide and provide useful information for other developers.
+
+### 3. jQuery
+
+The new Header does not ship jQuery anymore.
+While jQuery v3.6 is an internal dependency for the Login Widget,
+every project is now responsible for loading and updating jQuery individually.
+If you are depending on an older (&lt;3.5) version of jQuery, please update.
+There is a long list of [known jQuery vulnerabilities](https://security.snyk.io/package/npm/jquery).
+
+### 4. Install the new header
+
+Please refer to the [Internet Header installation instructions](/?path=/docs/9b02bcb2-3b6a-4271-b550-675a62ff3890--docs) for an installation guide.
+
+After installation, you're ready to add the new tags to your markup:
+
+<Source code={SampleInstall} dark={SourceDarkMode} language="html" />
+
+Place the new elements as described (and needed) as shown above.
+The breadcrumbs need a `container` wrapper to align themselves with the content of your page,
+the header and the footer already provide a container.
+If you don't have breadcrumbs, you can just delete the `<aside>` and the `<swisspost-internet-breadcrumbs>`.
+
+### 5. Working with the new header
+
+If you need to change settings during runtime, you can get a reference to the header by querying:
+
+<Source code={SampleReference} dark={SourceDarkMode} language="typescript" />
+
+At the [Internet Header configuration page](/?path=/docs/ebb11274-091b-4cb7-9a3f-3e0451c9a865--docs) you can find a list of possible options.
diff --git a/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.stories.ts b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.stories.ts
new file mode 100644
index 0000000000..01b075b195
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/packages/internet-header/internet-header.stories.ts
@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../../types';
+
+const meta: MetaExtended = {
+  id: 'cfa21cbc-5f8d-4a42-8165-7f6ed20bf133',
+  title: 'Getting Started/Packages/Internet-header',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation/src/stories/getting-started/packages/intranet-header/intranet-header.docs.mdx b/packages/documentation/src/stories/getting-started/packages/intranet-header/intranet-header.docs.mdx
new file mode 100644
index 0000000000..b562d1638c
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/packages/intranet-header/intranet-header.docs.mdx
@@ -0,0 +1,32 @@
+import { Meta, Source } from '@storybook/blocks';
+import * as IntranetHeaderStories from './intranet-header.stories';
+
+<Meta of={IntranetHeaderStories} />
+
+# @swisspost/design-system-intranet-header
+
+[![npm version](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header.svg)](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header)
+
+<div className="alert alert-info alert-md">
+  <h2 className="alert-heading">Angular only component</h2>
+  <p>The intranet header is an <a href="//Angular.io" target="_blank">Angular</a> component, as such it only works
+    within Angular projects.</p>
+</div>
+
+The Header Angular component for internal usage.
+
+<ul>
+  <li>
+    <a href="#installation" target="_self">Installation</a>
+  </li>
+  <li>
+    <a href="#usage" target="_self">Usage</a>
+  </li>
+  <li>
+    <a href="#examples" target="_self">Examples</a>
+  </li>
+</ul>
+
+## Installation
+
+<Source code={`npm install @swisspost/design-system-intranet-header`} language="bash" />
diff --git a/packages/documentation/src/stories/getting-started/packages/intranet-header/intranet-header.stories.ts b/packages/documentation/src/stories/getting-started/packages/intranet-header/intranet-header.stories.ts
new file mode 100644
index 0000000000..4a0b551d84
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/packages/intranet-header/intranet-header.stories.ts
@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../../types';
+
+const meta: MetaExtended = {
+  id: '7068be42-1a20-4a34-9e79-7fb7f9f2940f',
+  title: 'Getting Started/Packages/Intranet-header',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation/src/stories/getting-started/styles/styles-variable.sample.scss b/packages/documentation/src/stories/getting-started/packages/styles/styles-variable.sample.scss
similarity index 52%
rename from packages/documentation/src/stories/getting-started/styles/styles-variable.sample.scss
rename to packages/documentation/src/stories/getting-started/packages/styles/styles-variable.sample.scss
index ae827a9197..1883edb044 100644
--- a/packages/documentation/src/stories/getting-started/styles/styles-variable.sample.scss
+++ b/packages/documentation/src/stories/getting-started/packages/styles/styles-variable.sample.scss
@@ -1,4 +1,4 @@
-@use '@swisspost/design-system-styles/core.scss' as post;
+@use '@swisspost/design-system-styles/core' as post;
 
 .my-component {
   background-color: post.$yellow; // #FFCC00
diff --git a/packages/documentation/src/stories/getting-started/styles/styles.docs.mdx b/packages/documentation/src/stories/getting-started/packages/styles/styles.docs.mdx
similarity index 97%
rename from packages/documentation/src/stories/getting-started/styles/styles.docs.mdx
rename to packages/documentation/src/stories/getting-started/packages/styles/styles.docs.mdx
index ad0e3a1708..ff190f2f59 100644
--- a/packages/documentation/src/stories/getting-started/styles/styles.docs.mdx
+++ b/packages/documentation/src/stories/getting-started/packages/styles/styles.docs.mdx
@@ -67,9 +67,9 @@ Import one of our stylesheets into your project (for example into your `/src/sty
 
 Use the SCSS core for your custom styles and make sure you're always using the most up to date definitions:
 
-<p className="alert alert-info alert-md">
+<div className="alert alert-info alert-md">
   NOTE: The core file itself, does not produce any CSS output. It only contains variables, functions
   and mixins.
-</p>
+</div>
 
 <Source code={SampleVariable} language="scss" />
diff --git a/packages/documentation/src/stories/getting-started/packages/styles/styles.stories.ts b/packages/documentation/src/stories/getting-started/packages/styles/styles.stories.ts
new file mode 100644
index 0000000000..1a475e2afb
--- /dev/null
+++ b/packages/documentation/src/stories/getting-started/packages/styles/styles.stories.ts
@@ -0,0 +1,16 @@
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../../types';
+
+const meta: MetaExtended = {
+  id: 'e53e2de8-0bbf-4f70-babc-074c5466f700',
+  title: 'Getting Started/Packages/Styles',
+  parameters: {
+    badges: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/packages/documentation/src/stories/getting-started/styles/styles.stories.ts b/packages/documentation/src/stories/getting-started/styles/styles.stories.ts
deleted file mode 100644
index 0a39ea4374..0000000000
--- a/packages/documentation/src/stories/getting-started/styles/styles.stories.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from '@storybook/web-components';
-
-const meta: Meta = {
-  id: 'e53e2de8-0bbf-4f70-babc-074c5466f700',
-  title: 'Getting Started/Styles',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const Default: Story = {};
diff --git a/packages/documentation/src/stories/home.blocks.tsx b/packages/documentation/src/stories/home.blocks.tsx
index d491dfebe4..ef85ed4b0b 100644
--- a/packages/documentation/src/stories/home.blocks.tsx
+++ b/packages/documentation/src/stories/home.blocks.tsx
@@ -1,30 +1,11 @@
 import React from 'react';
 
-interface ITileProps {
-  title?: string;
-  href?: string;
-  children: React.ReactNode;
-}
-
 interface IFeatureProps {
   icon: string;
   title: string;
   children: React.ReactNode;
 }
 
-export function Tile(props: ITileProps) {
-  const isLink = props.href !== undefined;
-  const Tag = isLink ? 'a' : 'div';
-  const attributes = isLink ? { href: props.href, target: '_blank', rel: 'noopener' } : null;
-
-  return (
-    <Tag className="tile" {...attributes}>
-      {props.title ? <span className="tile--title">{props.title}</span> : null}
-      <span className="tile--icon">{props.children}</span>
-    </Tag>
-  );
-}
-
 export function Feature(props: IFeatureProps) {
   return (
     <div className="feature">
diff --git a/packages/documentation/src/stories/home.data.ts b/packages/documentation/src/stories/home.data.ts
index 0f2415e5bd..ac6bccce27 100644
--- a/packages/documentation/src/stories/home.data.ts
+++ b/packages/documentation/src/stories/home.data.ts
@@ -1,14 +1,4 @@
-import { DEPENDENCIES, getVersion } from '../utils/version';
-
-interface IPackage {
-  name: string;
-  href: string;
-  img: {
-    src: string;
-    alt: string;
-  };
-  version: string;
-}
+import { getVersion } from '../utils/version';
 
 interface ITechnology {
   name: string;
@@ -19,63 +9,6 @@ interface ITechnology {
   };
 }
 
-export const packages: IPackage[] = [
-  {
-    name: 'Styles',
-    href: 'https://github.com/swisspost/design-system/tree/main/packages/styles',
-    img: {
-      src: '/assets/images/packages/styles.svg',
-      alt: 'design-system-styles package logo',
-    },
-    version: `v${getVersion(DEPENDENCIES['@swisspost/design-system-styles'])}`,
-  },
-  {
-    name: 'Components',
-    href: 'https://github.com/swisspost/design-system/tree/main/packages/components',
-    img: {
-      src: '/assets/images/packages/components.svg',
-      alt: 'design-system-components package Logo',
-    },
-    version: `v${getVersion(DEPENDENCIES['@swisspost/design-system-components'])}`,
-  },
-  {
-    name: 'Components Angular',
-    href: 'https://github.com/swisspost/design-system/tree/main/packages/components-angular',
-    img: {
-      src: '/assets/images/packages/components-angular.svg',
-      alt: 'design-system-components-angular package Logo',
-    },
-    version: `v${getVersion(DEPENDENCIES['@swisspost/design-system-components-angular'])}`,
-  },
-  {
-    name: 'Internet-Header',
-    href: 'https://github.com/swisspost/design-system/tree/main/packages/internet-header',
-    img: {
-      src: '/assets/images/packages/internet-header.svg',
-      alt: 'internet-header package Logo',
-    },
-    version: `v${getVersion(DEPENDENCIES['@swisspost/internet-header'])}`,
-  },
-  {
-    name: 'Intranet-Header',
-    href: 'https://github.com/swisspost/design-system/tree/main/packages/intranet-header-workspace/projects/intranet-header',
-    img: {
-      src: '/assets/images/packages/intranet-header.svg',
-      alt: 'design-system-intranet-header package Logo',
-    },
-    version: `v${getVersion(DEPENDENCIES['@swisspost/design-system-intranet-header'])}`,
-  },
-  {
-    name: 'Icons',
-    href: 'https://github.com/swisspost/design-system/tree/main/packages/icons',
-    img: {
-      src: '/assets/images/packages/icons.svg',
-      alt: 'design-system-icons package Logo',
-    },
-    version: `v${getVersion(DEPENDENCIES['@swisspost/design-system-icons'])}`,
-  },
-];
-
 export const technologies: ITechnology[] = [
   {
     name: 'Figma',
diff --git a/packages/documentation/src/stories/home.docs.mdx b/packages/documentation/src/stories/home.docs.mdx
index bd262a0484..cad0d43198 100644
--- a/packages/documentation/src/stories/home.docs.mdx
+++ b/packages/documentation/src/stories/home.docs.mdx
@@ -1,24 +1,28 @@
 import { Meta } from '@storybook/blocks';
 import * as HomeStories from './home.stories';
-import { Feature, Tile } from './home.blocks';
-import { packages, technologies } from './home.data';
+import { Feature } from './home.blocks';
+import { packages } from '../shared/packages.data';
 import './home.styles.scss';
+import '../shared/tile/tile.component';
+import { technologies } from './home.data';
 
 <Meta of={HomeStories} />
 
 <div className="mt-huge text-center">
   <h2 className="h3">Packages &amp; Resources</h2>
-  <div className="mt-big tile-wrapper">
+  <ul className="mt-big tile-wrapper" role="list">
     {packages.map(p => (
-      <Tile title={p.name} href={p.href}>
-        <img src={p.img.src} alt={p.img.alt}/>
-        <span>{p.version}</span>
-      </Tile>
+      <li key={p.name}>
+        <ti-le title={p.name} href={p.link.github.href} ariaLabel={p.link.github.ariaLabel}>
+          <img src={p.img.src} alt={p.img.alt}/>
+          <span>{p.version}</span>
+        </ti-le>
+      </li>
     ))}
-  </div>
+  </ul>
   <div className="mt-regular mb-regular d-flex gap-mini flex-wrap justify-content-center">
     <div className="mt-big mb-regular w-100">
-      <a className="btn btn-primary btn-lg" href="/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs">Get started</a>
+      <a className="btn btn-primary btn-lg" href="/?path=/docs/dfc70c3b-4726-406b-8a41-af5738c89d05--docs">Get started</a>
     </div>
     <a
       href="https://www.experience-hub.ch/document/2803"
@@ -99,10 +103,10 @@ import './home.styles.scss';
 
   <div className="tile-wrapper">
     {technologies.map(t => (
-      <Tile href={t.href}>
+      <ti-le href={t.href} key={t.name}>
         <img src={t.img.src} alt={t.img.alt}/>
         <span>{t.name}</span>
-      </Tile>
+      </ti-le>
     ))}
   </div>
 </div>
diff --git a/packages/documentation/src/stories/home.stories.ts b/packages/documentation/src/stories/home.stories.ts
index 708e2b63f8..e3387c82b2 100644
--- a/packages/documentation/src/stories/home.stories.ts
+++ b/packages/documentation/src/stories/home.stories.ts
@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: 'Home',
   title: 'Home',
   parameters: {
diff --git a/packages/documentation/src/stories/home.styles.scss b/packages/documentation/src/stories/home.styles.scss
index c253526a9e..2d238cf481 100644
--- a/packages/documentation/src/stories/home.styles.scss
+++ b/packages/documentation/src/stories/home.styles.scss
@@ -2,6 +2,10 @@
 @use '@swisspost/design-system-styles/core.scss' as post;
 @use '@swisspost/design-system-styles/mixins/utilities';
 
+#storybook-docs{
+  overflow-x:hidden;
+}
+
 .bg-fullwidth {
   position: relative;
 
@@ -25,12 +29,11 @@
   }
 }
 
-$tile-size: 120px;
-$tile-rg-size: 100px;
-
 .tile-wrapper {
   display: flex;
   flex-wrap: wrap;
+  padding:0;
+  list-style-type: none;
   justify-content: center;
   gap: post.$size-big;
 
@@ -39,93 +42,6 @@ $tile-rg-size: 100px;
   }
 }
 
-.tile {
-  display: flex;
-  flex-direction: column;
-  width: $tile-size;
-  height: $tile-size;
-  background-color: post.$white;
-  border-radius: post.$size-regular;
-  box-shadow: 0 2px 5px 0 rgba(post.$aubergine-dark, 0.3);
-  text-decoration: none;
-
-  @include utilities.high-contrast-mode() {
-    border: 2px solid transparent;
-  }
-
-  .tile--title {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex: 0 0 auto;
-    padding: 0 post.$size-micro;
-    height: calc(#{post.$size-mini * 2} + 2.2em);
-    background-color: post.$yellow;
-    border-top-left-radius: inherit;
-    border-top-right-radius: inherit;
-    font-size: $tile-size * 0.1;
-    font-weight: post.$font-weight-bold;
-    line-height: 1.1;
-    box-shadow: 0 2px 0 1px rgba(post.$yellow, 0.5);
-
-    ~ .tile--icon {
-      img {
-        max-height: 50px;
-      }
-    }
-  }
-
-  .tile--icon {
-    flex: 0 1 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    gap: post.$size-micro;
-    border-bottom-left-radius: inherit;
-    border-bottom-right-radius: inherit;
-
-    img {
-      max-height: 50px;
-    }
-
-    span {
-      font-size: 0.6875em;
-      color: post.$gray-600;
-    }
-  }
-
-  &[href] {
-    transition: transform 150ms ease-out;
-
-    &:hover {
-      transform: scale(1.1);
-    }
-  }
-
-  @include post.media-breakpoint-down(rg) {
-    width: $tile-rg-size;
-    height: $tile-rg-size;
-
-    .tile--title {
-      height: calc(#{post.$size-mini * 1.5} + 2.2em);
-      font-size: $tile-rg-size * 0.1;
-
-      ~ .tile--icon {
-        img {
-          max-height: $tile-rg-size * 0.4;
-        }
-      }
-    }
-
-    .tile--icon {
-      img {
-        max-height: $tile-rg-size * 0.5;
-      }
-    }
-  }
-}
-
 .feature {
   padding: post.$size-regular;
 
diff --git a/packages/documentation/src/stories/misc/changelog/changelog.stories.ts b/packages/documentation/src/stories/misc/changelog/changelog.stories.ts
index b714365247..ea0dea670f 100644
--- a/packages/documentation/src/stories/misc/changelog/changelog.stories.ts
+++ b/packages/documentation/src/stories/misc/changelog/changelog.stories.ts
@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: 'a060be2f-7af4-46ba-b3a1-a14be624b3ee',
   title: 'Misc/Changelog',
 };
diff --git a/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts b/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts
index 14857d9ed1..3db96cf337 100644
--- a/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts
+++ b/packages/documentation/src/stories/misc/migration-guide/migration-guide.stories.ts
@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: 'c23b1d0b-76b3-4e38-aa76-b10c29bb873f',
   title: 'Misc/Migration Guide',
   parameters: {
diff --git a/packages/documentation/src/stories/misc/versions/versions.stories.ts b/packages/documentation/src/stories/misc/versions/versions.stories.ts
index 7fa6328850..9330914d74 100644
--- a/packages/documentation/src/stories/misc/versions/versions.stories.ts
+++ b/packages/documentation/src/stories/misc/versions/versions.stories.ts
@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: '873b1271-a700-4b28-aefe-28bcc14fd85a',
   title: 'Misc/Versions',
   parameters: {
diff --git a/packages/documentation/src/stories/patterns/forms/forms.stories.ts b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
index 721a35f4a3..cdf72b9179 100644
--- a/packages/documentation/src/stories/patterns/forms/forms.stories.ts
+++ b/packages/documentation/src/stories/patterns/forms/forms.stories.ts
@@ -1,7 +1,8 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: 'd83829b2-7de2-48d2-be64-07a80c9caef3',
   title: 'Patterns/Forms',
   parameters: {
diff --git a/packages/documentation/src/stories/patterns/metadata/metadata.stories.ts b/packages/documentation/src/stories/patterns/metadata/metadata.stories.ts
index 4764602e7c..314532611e 100644
--- a/packages/documentation/src/stories/patterns/metadata/metadata.stories.ts
+++ b/packages/documentation/src/stories/patterns/metadata/metadata.stories.ts
@@ -1,6 +1,7 @@
-import { Meta, StoryObj } from '@storybook/web-components';
+import { StoryObj } from '@storybook/web-components';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: 'a9543ea3-044d-4e86-bbb9-985c3f74f270',
   title: 'Patterns/Metadata',
 };
diff --git a/packages/documentation/src/stories/utilities/background/background.stories.ts b/packages/documentation/src/stories/utilities/background/background.stories.ts
index 4851b8a013..d909169943 100644
--- a/packages/documentation/src/stories/utilities/background/background.stories.ts
+++ b/packages/documentation/src/stories/utilities/background/background.stories.ts
@@ -1,7 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: '60852fac-a861-4415-8276-bd38d68653bb',
   title: 'Utilities/Background',
   parameters: {
diff --git a/packages/documentation/src/stories/utilities/list/list.stories.ts b/packages/documentation/src/stories/utilities/list/list.stories.ts
index a7b71289f9..bb908272ef 100644
--- a/packages/documentation/src/stories/utilities/list/list.stories.ts
+++ b/packages/documentation/src/stories/utilities/list/list.stories.ts
@@ -1,7 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: 'e76192bb-b2eb-487a-b9c1-ef938bccdfc4',
   title: 'Utilities/List',
   parameters: {
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
index a53fa20ccc..ea02d7e434 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
@@ -1,7 +1,8 @@
-import type { Args, Meta, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import './sizing.styles.scss';
 import scss from './sizing.module.scss';
+import { MetaExtended } from '../../../../types';
 
 export const SCSS_VARIABLES = scss;
 
@@ -9,7 +10,7 @@ const sizingOptions = ['auto', ...Object.keys(SCSS_VARIABLES)];
 
 const sizeOptionsPercent = ['auto', '25', '50', '75', '100'];
 
-const meta: Meta = {
+const meta: MetaExtended = {
   render: renderSizing,
   id: 'e728de1f-0d71-4317-8bb8-cbef0bf8d5db',
   title: 'Utilities/Sizing',
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
index cd9834c1d2..3985e6e7cf 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
@@ -1,8 +1,9 @@
-import type { Args, Meta, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import type { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit/static-html.js';
 import './spacing.styles.scss';
 import { parse } from '../../../utils/sass-export';
 import scss from './spacing.module.scss';
+import { MetaExtended } from '../../../../types';
 
 export const SCSS_VARIABLES = parse(scss);
 
@@ -18,7 +19,7 @@ const positionOptions = {
   s: 'To the left',
 };
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: 'facaacfd-18f1-49b4-80f1-a96680730fa0',
   title: 'Utilities/Spacing',
   parameters: {
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
index cc51930940..3019e69771 100644
--- a/packages/documentation/src/stories/utilities/text/text.stories.ts
+++ b/packages/documentation/src/stories/utilities/text/text.stories.ts
@@ -1,7 +1,8 @@
-import type { Meta, StoryObj } from '@storybook/web-components';
+import type { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
+import { MetaExtended } from '../../../../types';
 
-const meta: Meta = {
+const meta: MetaExtended = {
   id: 'c55681df-4d21-469d-a5b3-c67686e7c104',
   title: 'Utilities/Text',
   parameters: {
diff --git a/packages/documentation/types/index.ts b/packages/documentation/types/index.ts
new file mode 100644
index 0000000000..da12ab5f30
--- /dev/null
+++ b/packages/documentation/types/index.ts
@@ -0,0 +1,2 @@
+export * from './package';
+export * from './storybook';
diff --git a/packages/documentation/types/package.ts b/packages/documentation/types/package.ts
new file mode 100644
index 0000000000..a6c2a69237
--- /dev/null
+++ b/packages/documentation/types/package.ts
@@ -0,0 +1,9 @@
+export enum PackageType {
+  Html = 'HTML',
+  Wc = 'WebComponents',
+  Angular = 'Angular',
+  React = 'React',
+  InternetHeader = 'InternetHeader',
+  IntranetHeader = 'IntranetHeader',
+  Assets = 'Assets',
+}
diff --git a/packages/documentation/types/storybook.ts b/packages/documentation/types/storybook.ts
new file mode 100644
index 0000000000..7aecb8235a
--- /dev/null
+++ b/packages/documentation/types/storybook.ts
@@ -0,0 +1,13 @@
+import { Args, Meta } from '@storybook/web-components';
+import { PackageType } from './package';
+
+export interface MetaExtended<T = Args> extends Meta<T> {
+  id: string; // Make id required
+  title: string; // Make title required
+}
+
+export type TagPackagePrefix<K> = K extends string ? `package:${K}` : K;
+
+export interface MetaComponent<T = Args> extends MetaExtended<T> {
+  tags: [TagPackagePrefix<PackageType>, ...string[]];
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7837d9080e..092d747d00 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -510,6 +510,9 @@ importers:
       '@geometricpanda/storybook-addon-badges':
         specifier: 2.0.1
         version: 2.0.1(@storybook/blocks@7.6.12)(@storybook/components@7.6.12)(@storybook/core-events@7.6.12)(@storybook/manager-api@7.6.12)(@storybook/preview-api@7.6.12)(@storybook/theming@7.6.12)(@storybook/types@7.6.12)(react-dom@18.2.0)(react@18.2.0)
+      '@lit/task':
+        specifier: 1.0.0
+        version: 1.0.0
       '@open-wc/lit-helpers':
         specifier: 0.6.0
         version: 0.6.0(lit@3.1.2)
@@ -1711,7 +1714,7 @@ packages:
       '@angular/core': 16.2.12
       rxjs: ^6.5.3 || ^7.4.0
     dependencies:
-      '@angular/core': 16.2.12(rxjs@7.8.1)(zone.js@0.14.3)
+      '@angular/core': 16.2.12(rxjs@7.8.1)(zone.js@0.13.0)
       rxjs: 7.8.1
       tslib: 2.6.2
     dev: false
@@ -5459,6 +5462,12 @@ packages:
       '@lit-labs/ssr-dom-shim': 1.2.0
     dev: true
 
+  /@lit/task@1.0.0:
+    resolution: {integrity: sha512-7jocGBh3yGlo3kKxQggZph2txK4X5GYNWp2FAsmV9u2spzUypwrzRzXe8I72icAb02B00+k2nlvxVcrQB6vyrw==}
+    dependencies:
+      '@lit/reactive-element': 2.0.4
+    dev: true
+
   /@manypkg/find-root@1.1.0:
     resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==}
     dependencies: