diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx
index 1ce007a17e..b67444ee97 100644
--- a/packages/components/src/components/badge/badge.tsx
+++ b/packages/components/src/components/badge/badge.tsx
@@ -49,6 +49,7 @@ export class Badge {
           aria-label={this.count ? this.getAriaLabel() : this.label}
         >
           <slot />
+          <slot name="dot" />
           <span
             aria-hidden="true"
             part={cx(`circle`, this.count ? `has-count` : 'no-count')}
diff --git a/packages/components/src/components/badge/readme.md b/packages/components/src/components/badge/readme.md
index 8ff92d8af2..3545c0924a 100644
--- a/packages/components/src/components/badge/readme.md
+++ b/packages/components/src/components/badge/readme.md
@@ -28,11 +28,13 @@
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
+ - [telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-telekom-header-data-back-compat --> scale-badge
+  telekom-profile-menu --> scale-badge
   style scale-badge fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/button/readme.md b/packages/components/src/components/button/readme.md
index cf55878d1d..9faf8fc903 100644
--- a/packages/components/src/components/button/readme.md
+++ b/packages/components/src/components/button/readme.md
@@ -45,6 +45,7 @@ Type: `Promise<void>`
  - [app-navigation-user-menu](../telekom/app-navigation-user-menu)
  - [scale-data-grid](../data-grid)
  - [scale-notification](../notification)
+ - [telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
@@ -52,6 +53,7 @@ graph TD;
   app-navigation-user-menu --> scale-button
   scale-data-grid --> scale-button
   scale-notification --> scale-button
+  telekom-profile-menu --> scale-button
   style scale-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/link/readme.md b/packages/components/src/components/link/readme.md
index d02f8c3eca..e531b1d31d 100644
--- a/packages/components/src/components/link/readme.md
+++ b/packages/components/src/components/link/readme.md
@@ -108,6 +108,7 @@ Type: `Promise<void>`
  - [scale-data-grid](../data-grid)
  - [scale-notification-banner](../notification-banner)
  - [scale-notification-toast](../notification-toast)
+ - [telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
@@ -115,6 +116,7 @@ graph TD;
   scale-data-grid --> scale-link
   scale-notification-banner --> scale-link
   scale-notification-toast --> scale-link
+  telekom-profile-menu --> scale-link
   style scale-link fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx b/packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx
index e38cb7af66..80c85a2ec3 100644
--- a/packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx
+++ b/packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx
@@ -59,6 +59,11 @@ export class MenuFlyoutList {
   @Prop() brandHeaderDropdown: boolean = false;
   /** (optional) Injected styles */
   @Prop() styles?: string;
+  /** (optional) set to true to prevent flipping orientation when off the screen vertically  */
+  @Prop() preventFlipVertical: boolean = false;
+
+  /** (optional) override to set a custom role */
+  @Prop() role? = "menu";
 
   /** Event triggered when menu list opened */
   @Event({ eventName: 'scale-open' }) scaleOpen: EventEmitter<{
@@ -282,7 +287,7 @@ export class MenuFlyoutList {
 
   updateTriggerAttributes() {
     const trigger = this.trigger();
-    if (trigger && trigger.getAttribute('aria-haspopup') === 'true') {
+    if (trigger && trigger.getAttribute('aria-haspopup') === 'true' || trigger.getAttribute('class') === 'scale-menu-trigger') {
       trigger.setAttribute('aria-expanded', String(this.opened));
     }
   }
@@ -341,14 +346,14 @@ export class MenuFlyoutList {
     if (rect.top < PAD) {
       // console.log('off top edge');
       isOutOfBounds = true;
-      if (this.direction.includes('top')) {
+      if (this.direction.includes('top') && !this.preventFlipVertical) {
         this.flipVertical = true;
       }
     }
     if (rect.bottom > this.windowHeight - PAD) {
       // console.log('off bottom edge');
       isOutOfBounds = true;
-      if (this.direction.includes('bottom')) {
+      if (this.direction.includes('bottom') && !this.preventFlipVertical) {
         this.flipVertical = true;
       }
     }
@@ -467,7 +472,7 @@ export class MenuFlyoutList {
 
   render() {
     return (
-      <Host role="menu">
+      <Host role={this.role} class="scale-menu">
         {this.styles && <style>{this.styles}</style>}
         <div
           class={this.getCssClassMap()}
diff --git a/packages/components/src/components/menu-flyout-list/readme.md b/packages/components/src/components/menu-flyout-list/readme.md
index d8eefbf052..ee9ef82421 100644
--- a/packages/components/src/components/menu-flyout-list/readme.md
+++ b/packages/components/src/components/menu-flyout-list/readme.md
@@ -7,15 +7,16 @@
 
 ## Properties
 
-| Property              | Attribute               | Description                                                                        | Type                                                                                | Default          |
-| --------------------- | ----------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- |
-| `active`              | `active`                |                                                                                    | `boolean`                                                                           | `false`          |
-| `brandHeaderDropdown` | `brand-header-dropdown` | (optional) set to true when using in telekom-brand-header                          | `boolean`                                                                           | `false`          |
-| `closeOnSelect`       | `close-on-select`       | (optional) Determines whether the flyout should close when a menu item is selected | `boolean`                                                                           | `true`           |
-| `direction`           | `direction`             | (optional) Set preference for where the menu appears, space permitting             | `"bottom-left" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-right"` | `'bottom-right'` |
-| `opened`              | `opened`                |                                                                                    | `boolean`                                                                           | `false`          |
-| `styles`              | `styles`                | (optional) Injected styles                                                         | `string`                                                                            | `undefined`      |
-| `trigger`             | --                      |                                                                                    | `() => HTMLElement`                                                                 | `undefined`      |
+| Property              | Attribute               | Description                                                                           | Type                                                                                | Default          |
+| --------------------- | ----------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- |
+| `active`              | `active`                |                                                                                       | `boolean`                                                                           | `false`          |
+| `brandHeaderDropdown` | `brand-header-dropdown` | (optional) set to true when using in telekom-brand-header                             | `boolean`                                                                           | `false`          |
+| `closeOnSelect`       | `close-on-select`       | (optional) Determines whether the flyout should close when a menu item is selected    | `boolean`                                                                           | `true`           |
+| `direction`           | `direction`             | (optional) Set preference for where the menu appears, space permitting                | `"bottom-left" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-right"` | `'bottom-right'` |
+| `opened`              | `opened`                |                                                                                       | `boolean`                                                                           | `false`          |
+| `preventFlipVertical` | `prevent-flip-vertical` | (optional) set to true to prevent flipping orientation when off the screen vertically | `boolean`                                                                           | `false`          |
+| `styles`              | `styles`                | (optional) Injected styles                                                            | `string`                                                                            | `undefined`      |
+| `trigger`             | --                      |                                                                                       | `() => HTMLElement`                                                                 | `undefined`      |
 
 
 ## Events
@@ -75,6 +76,7 @@ Type: `Promise<void>`
  - [scale-app-header](../telekom/app-header)
  - [scale-data-grid](../data-grid)
  - [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
+ - [telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
@@ -82,6 +84,7 @@ graph TD;
   scale-app-header --> scale-menu-flyout-list
   scale-data-grid --> scale-menu-flyout-list
   scale-telekom-header-data-back-compat --> scale-menu-flyout-list
+  telekom-profile-menu --> scale-menu-flyout-list
   style scale-menu-flyout-list fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/menu-flyout/menu-flyout.tsx b/packages/components/src/components/menu-flyout/menu-flyout.tsx
index 88b7e332a3..b9f38a5349 100644
--- a/packages/components/src/components/menu-flyout/menu-flyout.tsx
+++ b/packages/components/src/components/menu-flyout/menu-flyout.tsx
@@ -12,7 +12,7 @@
 import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';
 import { isClickOutside } from '../../utils/utils';
 
-const MENU_SELECTOR = '[role="menu"]';
+const MENU_SELECTOR = '.scale-menu';
 
 const isButtonOrLink = (el: HTMLElement) => {
   if (
@@ -34,6 +34,8 @@ export class MenuFlyout {
 
   /** (optional) Determines whether the flyout should close when a menu item is selected */
   @Prop() closeOnSelect = true;
+  /** (optional) Determines whether the flyout trigger should get the aria-haspopup attribute */
+  @Prop() hasPopup = true;
   /** (optional) Set preference for where the menu appears, space permitting */
   @Prop() direction:
     | 'bottom-right'
@@ -152,7 +154,14 @@ export class MenuFlyout {
       .concat([isButtonOrLink(this.trigger)])
       .filter((x) => x != null);
     triggers.forEach((el) => {
-      el.setAttribute('aria-haspopup', 'true');
+
+      if(this.hasPopup) {
+        el.setAttribute('aria-haspopup', 'true');
+      }
+
+      el.setAttribute('class', 'scale-menu-trigger');
+
+
       el.setAttribute('aria-expanded', 'false');
     });
   }
diff --git a/packages/components/src/components/menu-flyout/readme.md b/packages/components/src/components/menu-flyout/readme.md
index 568ac48ef4..4c5e824b52 100644
--- a/packages/components/src/components/menu-flyout/readme.md
+++ b/packages/components/src/components/menu-flyout/readme.md
@@ -28,6 +28,7 @@
  - [scale-app-header](../telekom/app-header)
  - [scale-data-grid](../data-grid)
  - [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
+ - [telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
@@ -35,6 +36,7 @@ graph TD;
   scale-app-header --> scale-menu-flyout
   scale-data-grid --> scale-menu-flyout
   scale-telekom-header-data-back-compat --> scale-menu-flyout
+  telekom-profile-menu --> scale-menu-flyout
   style scale-menu-flyout fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx b/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx
index dd4b7c0f99..d46c24ff23 100644
--- a/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx
+++ b/packages/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx
@@ -29,6 +29,7 @@ export class AppNavigationUserMenu {
   @Element() hostElement: HTMLElement;
   @Prop() hide: () => void;
   @Prop() navigation: any;
+  @Prop() styles: string;
   @Event({
     eventName: 'closeMenu',
     composed: true,
@@ -40,7 +41,10 @@ export class AppNavigationUserMenu {
   render() {
     return (
       <Host>
+        {this.styles && <style>{this.styles}</style>}
         <div class="app-navigation-user-menu">
+          <slot />
+
           {this.navigation.map((item) => {
             if (item.type === 'divider') {
               return (
@@ -53,7 +57,10 @@ export class AppNavigationUserMenu {
 
             if (item.type === 'userInfo') {
               return (
-                <div class="app-navigation-user-menu__user-info">
+                <div
+                  class="app-navigation-user-menu__user-info"
+                  part="userInfo"
+                >
                   <div class="app-navigation-user-menu__user-info--name scl-font-variant-heading-4">
                     {item.name}
                   </div>
@@ -71,6 +78,7 @@ export class AppNavigationUserMenu {
                   target={item.target || '_self'}
                   tabindex={0}
                   class="app-navigation-user-menu__item"
+                  part="item"
                   onClick={(e) => {
                     e.stopImmediatePropagation();
                     if (item.onClick) {
@@ -117,6 +125,7 @@ export class AppNavigationUserMenu {
               return (
                 <scale-button
                   class="app-navigation-user-menu__button"
+                  part="button"
                   onClick={(e) => {
                     if (item.onClick) {
                       item.onClick(e);
diff --git a/packages/components/src/components/telekom/app-navigation-user-menu/readme.md b/packages/components/src/components/telekom/app-navigation-user-menu/readme.md
index 634670b43e..0baab3d878 100644
--- a/packages/components/src/components/telekom/app-navigation-user-menu/readme.md
+++ b/packages/components/src/components/telekom/app-navigation-user-menu/readme.md
@@ -11,6 +11,7 @@
 | ------------ | ------------ | ----------- | ------------ | ----------- |
 | `hide`       | --           |             | `() => void` | `undefined` |
 | `navigation` | `navigation` |             | `any`        | `undefined` |
+| `styles`     | `styles`     |             | `string`     | `undefined` |
 
 
 ## Events
@@ -24,7 +25,10 @@
 
 | Part                | Description |
 | ------------------- | ----------- |
+| `"button"`          |             |
+| `"item"`            |             |
 | `"rule-horizontal"` |             |
+| `"userinfo"`        |             |
 
 
 ## Dependencies
@@ -33,6 +37,7 @@
 
  - [scale-app-header](../app-header)
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [telekom-profile-menu](../telekom-profile-menu)
 
 ### Depends on
 
@@ -46,6 +51,7 @@ graph TD;
   app-navigation-user-menu --> scale-icon
   scale-app-header --> app-navigation-user-menu
   scale-telekom-header-data-back-compat --> app-navigation-user-menu
+  telekom-profile-menu --> app-navigation-user-menu
   style app-navigation-user-menu fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/telekom/logo/readme.md b/packages/components/src/components/telekom/logo/readme.md
index 6d79f9bcb1..4d349c5b26 100644
--- a/packages/components/src/components/telekom/logo/readme.md
+++ b/packages/components/src/components/telekom/logo/readme.md
@@ -1,7 +1,7 @@
-# scale-logo
-
-
-
+# scale-logo
+
+
+
 <!-- Auto Generated Below -->
 
 
diff --git a/packages/components/src/components/telekom/telekom-footer-extended-navigation/readme.md b/packages/components/src/components/telekom/telekom-footer-extended-navigation/readme.md
index 138035adb5..a9110427ac 100644
--- a/packages/components/src/components/telekom/telekom-footer-extended-navigation/readme.md
+++ b/packages/components/src/components/telekom/telekom-footer-extended-navigation/readme.md
@@ -1,7 +1,7 @@
-# scale-telekom-footer-extended-navigation-column
-
-
-
+# scale-telekom-footer-extended-navigation-column
+
+
+
 <!-- Auto Generated Below -->
 
 
diff --git a/packages/components/src/components/telekom/telekom-footer/readme.md b/packages/components/src/components/telekom/telekom-footer/readme.md
index 963758f80b..e886894655 100644
--- a/packages/components/src/components/telekom/telekom-footer/readme.md
+++ b/packages/components/src/components/telekom/telekom-footer/readme.md
@@ -1,7 +1,7 @@
-# scale-telekom-footer
-
-
-
+# scale-telekom-footer
+
+
+
 <!-- Auto Generated Below -->
 
 
diff --git a/packages/components/src/components/telekom/telekom-mega-menu/readme.md b/packages/components/src/components/telekom/telekom-mega-menu/readme.md
index ba452d08a3..1cdf036089 100644
--- a/packages/components/src/components/telekom/telekom-mega-menu/readme.md
+++ b/packages/components/src/components/telekom/telekom-mega-menu/readme.md
@@ -1,7 +1,7 @@
-# scale-telekom-mega-menu-column
-
-
-
+# scale-telekom-mega-menu-column
+
+
+
 <!-- Auto Generated Below -->
 
 
diff --git a/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md b/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md
index 43e2f57edb..cb5c5a8f30 100644
--- a/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md
+++ b/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md
@@ -40,6 +40,7 @@
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [telekom-profile-menu](../telekom-profile-menu)
 
 ### Depends on
 
@@ -50,6 +51,7 @@
 graph TD;
   scale-telekom-mobile-flyout-canvas --> scale-icon-action-close
   scale-telekom-header-data-back-compat --> scale-telekom-mobile-flyout-canvas
+  telekom-profile-menu --> scale-telekom-mobile-flyout-canvas
   style scale-telekom-mobile-flyout-canvas fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/telekom/telekom-nav-flyout/readme.md b/packages/components/src/components/telekom/telekom-nav-flyout/readme.md
index 22b5782a81..5eb66df129 100644
--- a/packages/components/src/components/telekom/telekom-nav-flyout/readme.md
+++ b/packages/components/src/components/telekom/telekom-nav-flyout/readme.md
@@ -50,11 +50,13 @@ Type: `Promise<void>`
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [telekom-profile-menu](../telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-telekom-header-data-back-compat --> scale-telekom-nav-flyout
+  telekom-profile-menu --> scale-telekom-nav-flyout
   style scale-telekom-nav-flyout fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/telekom/telekom-nav-item/readme.md b/packages/components/src/components/telekom/telekom-nav-item/readme.md
index b988756be2..0ba9250981 100644
--- a/packages/components/src/components/telekom/telekom-nav-item/readme.md
+++ b/packages/components/src/components/telekom/telekom-nav-item/readme.md
@@ -21,11 +21,13 @@
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [telekom-profile-menu](../telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-telekom-header-data-back-compat --> scale-telekom-nav-item
+  telekom-profile-menu --> scale-telekom-nav-item
   style scale-telekom-nav-item fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
index 9f401a3bc4..892b9ccb8c 100644
--- a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
+++ b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
@@ -356,6 +356,11 @@
   width: 20px;
 }
 
+.scale-telekom-nav-list[variant='functions'] [slot='dot'] .scale-icon {
+  height: 12px;
+  width: 12px;
+}
+
 @media screen and (--2xl) {
   .scale-telekom-nav-list[variant='functions'] .scale-icon {
     height: 24px;
diff --git a/packages/components/src/components/telekom/telekom-profile-menu/readme.md b/packages/components/src/components/telekom/telekom-profile-menu/readme.md
new file mode 100644
index 0000000000..c8bdf6af0f
--- /dev/null
+++ b/packages/components/src/components/telekom/telekom-profile-menu/readme.md
@@ -0,0 +1,73 @@
+# profile-menu
+
+
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property                      | Attribute                        | Description | Type      | Default     |
+| ----------------------------- | -------------------------------- | ----------- | --------- | ----------- |
+| `accessibilityLabel`          | `accessibility-label`            |             | `string`  | `undefined` |
+| `appName`                     | `app-name`                       |             | `string`  | `undefined` |
+| `closeMenuAccessibilityLabel` | `close-menu-accessibility-label` |             | `string`  | `undefined` |
+| `hideLoginSettings`           | `hide-login-settings`            |             | `boolean` | `undefined` |
+| `label`                       | `label`                          |             | `string`  | `undefined` |
+| `loggedIn`                    | `logged-in`                      |             | `boolean` | `undefined` |
+| `loginHelpLabel`              | `login-help-label`               |             | `string`  | `undefined` |
+| `loginHelpUrl`                | `login-help-url`                 |             | `string`  | `undefined` |
+| `loginLabel`                  | `login-label`                    |             | `string`  | `undefined` |
+| `loginSettingsLabel`          | `login-settings-label`           |             | `string`  | `undefined` |
+| `loginSettingsUrl`            | `login-settings-url`             |             | `string`  | `undefined` |
+| `loginUrl`                    | `login-url`                      |             | `string`  | `undefined` |
+| `logoutLabel`                 | `logout-label`                   |             | `string`  | `undefined` |
+| `logoutUrl`                   | `logout-url`                     |             | `string`  | `undefined` |
+| `registerHeadline`            | `register-headline`              |             | `string`  | `undefined` |
+| `registerLabel`               | `register-label`                 |             | `string`  | `undefined` |
+| `registerUrl`                 | `register-url`                   |             | `string`  | `undefined` |
+| `serviceDescription`          | `service-description`            |             | `string`  | `undefined` |
+| `serviceLinks`                | `service-links`                  |             | `any`     | `undefined` |
+| `serviceName`                 | `service-name`                   |             | `string`  | `undefined` |
+| `userInfo`                    | `user-info`                      |             | `any`     | `undefined` |
+
+
+## Dependencies
+
+### Depends on
+
+- [scale-button](../../button)
+- [scale-link](../../link)
+- [scale-icon-user-file-user](../../icons/user-file-user)
+- [scale-badge](../../badge)
+- [scale-icon-action-checkmark](../../icons/action-checkmark)
+- [scale-telekom-nav-item](../telekom-nav-item)
+- [scale-menu-flyout](../../menu-flyout)
+- [scale-menu-flyout-list](../../menu-flyout-list)
+- [app-navigation-user-menu](../app-navigation-user-menu)
+- [scale-telekom-nav-flyout](../telekom-nav-flyout)
+- [scale-telekom-mobile-flyout-canvas](../telekom-mobile-flyout-canvas)
+
+### Graph
+```mermaid
+graph TD;
+  telekom-profile-menu --> scale-button
+  telekom-profile-menu --> scale-link
+  telekom-profile-menu --> scale-icon-user-file-user
+  telekom-profile-menu --> scale-badge
+  telekom-profile-menu --> scale-icon-action-checkmark
+  telekom-profile-menu --> scale-telekom-nav-item
+  telekom-profile-menu --> scale-menu-flyout
+  telekom-profile-menu --> scale-menu-flyout-list
+  telekom-profile-menu --> app-navigation-user-menu
+  telekom-profile-menu --> scale-telekom-nav-flyout
+  telekom-profile-menu --> scale-telekom-mobile-flyout-canvas
+  app-navigation-user-menu --> scale-button
+  app-navigation-user-menu --> scale-icon
+  scale-telekom-mobile-flyout-canvas --> scale-icon-action-close
+  style telekom-profile-menu fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css
new file mode 100644
index 0000000000..ebd75945cc
--- /dev/null
+++ b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css
@@ -0,0 +1,268 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+
+ */
+scale-menu-flyout {
+  display: flex;
+  height: 100%;
+
+  > a {
+    box-sizing: border-box;
+    display: flex;
+    align-items: flex-end;
+    height: 100%;
+    position: relative;
+    font: inherit;
+    color: inherit;
+    background: none;
+    appearance: none;
+    padding: 0 0 var(--_spacing-bottom-slotted-bottom) 0;
+    border: none;
+    text-decoration: none;
+    cursor: pointer;
+    transition: padding-bottom var(--telekom-motion-duration-immediate)
+      var(--telekom-motion-easing-standard);
+
+    line-height: var(--telekom-typography-line-spacing-loose);
+    font-weight: var(--telekom-typography-font-weight-extra-bold);
+
+    > .flyout-label {
+      font-size: var(--scl-font-size-12);
+      font-weight: var(--telekom-typography-font-weight-regular);
+      margin-left: var(--scl-spacing-8);
+    }
+  }
+
+  > a:hover,
+  > a:hover svg {
+    color: var(--telekom-color-text-and-icon-primary-hovered);
+  }
+
+  > a[aria-expanded='true'],
+  > a[aria-expanded='true'] svg {
+    color: var(--telekom-color-text-and-icon-primary-standard);
+  }
+
+  > a[aria-expanded='true'] .flyout-label {
+    color: var(--telekom-color-text-and-icon-standard);
+  }
+}
+
+@import url('../../../global/custom-media.css');
+
+.user-menu-mobile {
+  display: flex;
+  height: 100%;
+}
+.user-menu-mobile .flyout-label [aria-hidden='true'] {
+  display: none;
+}
+.user-menu-mobile .mydot .scale-icon {
+  width: 12px;
+  height: 12px;
+}
+
+.scale-telekom-nav-item > button {
+  padding-bottom: var(--_spacing-bottom-slotted-bottom);
+}
+
+.user-menu-desktop {
+  display: none;
+}
+
+.user-menu-desktop scale-menu-flyout {
+  display: flex;
+}
+
+.user-menu-trigger {
+  position: relative;
+  left: 24px;
+}
+
+@media screen and (--md) {
+  .user-menu-trigger {
+    top: calc(var(--_spacing-bottom-slotted-bottom) + 8px);
+  }
+}
+
+@media screen and (--lg) {
+  .user-menu-mobile {
+    display: none;
+  }
+
+  .user-menu-desktop {
+    display: flex;
+    height: 100%;
+  }
+
+  scale-menu-flyout-list::part(base) {
+    top: calc(100% + var(--telekom-spacing-composition-space-03) - 16px);
+  }
+}
+
+@media screen and (--xl) {
+  scale-telekom-header-data-back-compat .user-menu-trigger {
+    top: calc(var(--_spacing-bottom-slotted-bottom) + 12px);
+  }
+}
+
+.profile-menu-login {
+  min-width: 15em;
+  padding-right: var(--telekom-spacing-composition-space-06);
+
+  > scale-button {
+    display: block;
+    --width: 100%;
+    margin: 1.5em 0;
+  }
+}
+
+.profile-menu-login > strong {
+  display: flex;
+  font: var(--telekom-text-style-heading-5);
+  padding: var(--telekom-spacing-composition-space-04) 0;
+}
+@media screen and (--md) {
+  .profile-menu-login > strong {
+    padding-top: var(--telekom-spacing-composition-space-10);
+  }
+  .profile-menu-login .footer {
+    padding-top: var(--telekom-spacing-composition-space-04);
+  }
+}
+@media screen and (--lg) {
+  .profile-menu-login {
+    padding: 12px 24px 4px 24px;
+  }
+  .profile-menu-login > strong {
+    padding-top: 0;
+  }
+  .profile-menu-login > scale-button {
+    margin: 16px 0;
+  }
+  .profile-menu-login .footer {
+    padding-top: 0;
+  }
+}
+
+.profile-menu-login p {
+  line-height: 1.4em;
+  color: var(--telekom-color-text-and-icon-additional);
+  margin: 0;
+}
+.profile-menu-login #signUp {
+  margin-top: var(--telekom-spacing-composition-space-04);
+}
+.profile-menu-login #signUp p {
+  margin: 0;
+}
+
+.scale-telekom-nav-list[variant='functions']::part(circle) .scale-icon {
+  height: 12px;
+  width: 12px;
+}
+
+.mydot {
+  background: var(--telekom-color-functional-success-standard);
+  border: 2px solid #fff;
+  border-radius: 50%;
+  color: #fff;
+  display: flex;
+  height: 12px;
+  width: 12px;
+  position: absolute;
+  top: -4px;
+  right: -6px;
+}
+scale-menu-flyout a .mydot .scale-icon {
+  color: #fff !important;
+  height: 12px;
+  width: 12px;
+}
+
+app-navigation-user-menu {
+  --color-divider: transparent;
+}
+
+app-navigation-user-menu::part(userInfo) {
+  margin: 0;
+}
+app-navigation-user-menu::part(userInfo)
+  .app-navigation-user-menu__user-info--name {
+  margin-bottom: 0;
+}
+
+app-navigation-user-menu::part(rule-horizontal) {
+  visibility: hidden;
+  margin: var(--telekom-spacing-composition-space-05) 0;
+}
+
+@media screen and (--md) {
+  app-navigation-user-menu::part(userInfo) {
+    padding-top: var(--telekom-spacing-composition-space-08);
+  }
+  app-navigation-user-menu::part(rule-horizontal) {
+    margin: var(--telekom-spacing-composition-space-08) 0
+      var(--telekom-spacing-composition-space-06) 0;
+  }
+}
+
+app-navigation-user-menu::part(item) {
+  margin-top: var(--telekom-spacing-composition-space-05);
+  margin-bottom: var(--telekom-spacing-composition-space-05);
+  padding: 0;
+  border-top: 1px solid transparent;
+  border-bottom: 1px solid transparent;
+}
+
+app-navigation-user-menu::part(button) {
+  padding-top: 0;
+  padding-left: 0;
+}
+@media screen and (--md) {
+  app-navigation-user-menu::part(button) {
+    margin-top: -10px;
+  }
+}
+
+@media screen and (--lg) {
+  app-navigation-user-menu::part(item) {
+    line-height: 200%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+    padding-top: 0;
+    padding-bottom: 0;
+    border: 0;
+  }
+
+  app-navigation-user-menu::part(userInfo) {
+    padding-top: 0;
+  }
+  app-navigation-user-menu::part(rule-horizontal) {
+    padding-top: 16px;
+    padding-bottom: 6px;
+    margin: 0;
+  }
+  app-navigation-user-menu::part(button) {
+    margin-top: 7px;
+    padding-bottom: 0;
+  }
+}
+
+.visually-hidden {
+  /* see https://www.a11yproject.com/posts/how-to-hide-content/ */
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
diff --git a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx
new file mode 100644
index 0000000000..66ca740429
--- /dev/null
+++ b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx
@@ -0,0 +1,330 @@
+/**
+ * @license
+ * Scale https://github.com/telekom/scale
+ *
+ * Copyright (c) 2021 Egor Kirpichev and contributors, Deutsche Telekom AG
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ */
+
+import {Component, Prop, h, Host, Element, State, Listen} from '@stencil/core';
+
+const LOGIN_DEFAULT = 'https://www.telekom.de';
+const LOGIN_HELP_DEFAULT = 'https://www.telekom.de';
+const REGISTER_DEFAULT = 'https://www.telekom.de';
+
+const LOGIN_SETTINGS_DEFAULT =
+  'https://account.idm.telekom.com/account-manager/';
+const LOGOUT_DEFAULT =
+  'https://accounts.login.idm.telekom.com/sessionmessage/logout';
+
+const readData = (data) => {
+  let parsedData;
+
+  try {
+    parsedData = JSON.parse(data);
+  } catch (error) {
+    // console.error("Error parsing data! error: " + error);
+    // console.error("data: " + data);
+    parsedData = data;
+  }
+
+  return parsedData;
+};
+
+@Component({
+  tag: 'telekom-profile-menu',
+  styleUrl: 'telekom-profile-menu.css',
+  shadow: true
+})
+export class TelekomProfileMenu {
+  @Element() hostElement: HTMLElement;
+
+  userMenuDesktopTrigger?: HTMLSpanElement;
+
+  @Prop() label: string;
+  @Prop() accessibilityLabel?: string;
+
+  @Prop() closeMenuAccessibilityLabel: string;
+
+  @Prop() appName: string;
+  @Prop() serviceName: string;
+  @Prop() serviceDescription: string;
+  @Prop() loggedIn: boolean;
+
+  @Prop() loginUrl?: string;
+  @Prop() loginLabel: string;
+
+  @Prop() loginHelpUrl?: string;
+  @Prop() loginHelpLabel: string;
+
+  @Prop() registerHeadline: string;
+  @Prop() registerUrl?: string;
+  @Prop() registerLabel: string;
+
+  @Prop() userInfo: any;
+  @Prop() serviceLinks: any;
+
+  @Prop() loginSettingsLabel?: string;
+  @Prop() loginSettingsUrl?: string;
+  @Prop() hideLoginSettings: boolean;
+
+  @Prop() logoutLabel: string;
+  @Prop() logoutUrl?: string;
+
+  @State()
+  menuOpen = false;
+
+  @Listen('keydown')
+  onKeydown(event: KeyboardEvent) {
+    if(this.menuOpen && 'Escape' === event.key) {
+      this.userMenuDesktopTrigger.click();
+    }
+  }
+
+  openMenu(event: any) {
+    if (event.target.id === 'user-menu-desktop') {
+      this.menuOpen = true;
+    }
+  }
+
+  closeMenu(event: any) {
+    if (event.target.id === 'user-menu-desktop') {
+      this.menuOpen = false;
+    }
+  }
+
+  printSignInMenu() {
+    return (
+      <div class="profile-menu-login">
+        <strong>{this.serviceName}</strong>
+        <p>{this.serviceDescription}</p>
+
+        <scale-button href={this.loginUrl || LOGIN_DEFAULT}>
+          {this.loginLabel}
+        </scale-button>
+        <div class="footer">
+          <p>
+            <scale-link
+              omit-underline="true"
+              href={this.loginHelpUrl || LOGIN_HELP_DEFAULT}
+            >
+              {this.loginHelpLabel}
+            </scale-link>
+          </p>
+          <div id="signUp">
+            <p>{this.registerHeadline}</p>
+            <p>
+              <scale-link
+                omit-underline="true"
+                href={this.registerUrl || REGISTER_DEFAULT}
+              >
+                {this.registerLabel}
+              </scale-link>
+            </p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  printProfileTrigger() {
+    if (!this.loggedIn) {
+      return (
+        <scale-icon-user-file-user
+          selected={this.menuOpen}
+        ></scale-icon-user-file-user>
+      );
+    }
+
+    // logged in
+    return (
+      <scale-badge no-dot="true">
+        <scale-icon-user-file-user
+          selected={this.menuOpen}
+        ></scale-icon-user-file-user>
+        <div slot="dot" class="mydot">
+          <scale-icon-action-checkmark></scale-icon-action-checkmark>
+        </div>
+      </scale-badge>
+    );
+  }
+
+  buildUserNavigation() {
+    const divider = [{ type: 'divider' }];
+
+    const userInfo = readData(this.userInfo);
+    if (!userInfo) {
+      // console.error("userInfo missing");
+    }
+    userInfo.type = 'userInfo';
+
+    let serviceLinks = readData(this.serviceLinks);
+    if (!serviceLinks) {
+      // console.error("serviceLinks missing");
+      serviceLinks = [];
+    }
+
+    for (const el of serviceLinks) {
+      el.type = 'item';
+    }
+
+    const loginSettings = {
+      type: 'item',
+      name: this.loginSettingsLabel || 'Login-Settings',
+      href: this.loginSettingsUrl || LOGIN_SETTINGS_DEFAULT,
+      icon: 'service-settings',
+    };
+
+    const logout = {
+      type: 'button',
+      name: this.logoutLabel,
+      href: this.logoutUrl || LOGOUT_DEFAULT,
+      variant: 'secondary',
+    };
+
+    let menu = [];
+
+    menu = menu.concat(userInfo);
+
+    if (!this.serviceLinksEmpty()) {
+      menu = menu.concat(divider);
+    }
+
+    menu = menu.concat(serviceLinks);
+
+    if (!this.hideLoginSettings) {
+      menu = menu.concat(loginSettings);
+    }
+    if (!this.serviceLinksEmpty()) {
+      menu = menu.concat(divider);
+    }
+
+    menu = menu.concat(logout);
+
+    return menu;
+  }
+
+  serviceLinksEmpty() {
+    return (this.hideLoginSettings && this.serviceLinks.length < 1) === true;
+  }
+
+  buildDesktopMenuStyles() {
+    let style =
+      '.app-navigation-user-menu { padding: 12px 24px 4px 24px; box-sizing: border-box; }';
+    style +=
+      '.scale-icon { width: 20px; height: 20px; display: flex; align-self: center; }';
+
+    if (this.serviceLinksEmpty()) {
+      style += 'scale-button { margin-top: 32px !important; }';
+    }
+
+    return style;
+  }
+
+  buildMobileMenuStyles() {
+    let style =
+      '.app-navigation-user-menu__user-info--name { margin-bottom: 0 !important; }';
+    style += '.scale-icon { width: 20px; height: 20px; }';
+
+    if (this.serviceLinksEmpty()) {
+      style += 'scale-button { margin-top: 32px !important; }';
+    }
+
+    return style;
+  }
+
+  printLabel() {
+    if (!this.accessibilityLabel) {
+      return <span class="flyout-label">{this.label}</span>;
+    }
+
+    return (
+      <div class="flyout-label">
+        <span aria-hidden="true">{this.label}</span>
+        <span class="visually-hidden">{this.accessibilityLabel}</span>
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <Host>
+        <scale-telekom-nav-item class="user-menu-desktop">
+          <scale-menu-flyout
+            direction="bottom-left"
+            onScale-open={(event: any) => this.openMenu(event)}
+            onScale-close={(event: any) => this.closeMenu(event)}
+            hasPopup={false}
+          >
+            <a href="javascript:void(0);" slot="trigger" role="button" aria-controls="user-menu-desktop">
+              {this.printProfileTrigger()}
+              {this.printLabel()}
+            </a>
+
+            <scale-menu-flyout-list
+              id="user-menu-desktop"
+              preventFlipVertical={true}
+              role="none"
+            >
+              {this.loggedIn && [
+                <app-navigation-user-menu
+                  hide={() => {
+                    this.userMenuDesktopTrigger.click();
+                  }}
+                  navigation={this.buildUserNavigation()}
+                  styles={this.buildDesktopMenuStyles()}
+                ></app-navigation-user-menu>,
+              ]}
+
+              {!this.loggedIn && [
+                <app-navigation-user-menu navigation={[]}>
+                  {this.printSignInMenu()}
+                </app-navigation-user-menu>,
+              ]}
+            </scale-menu-flyout-list>
+            <div
+              slot="trigger"
+              class="user-menu-trigger"
+              ref={(el) => (this.userMenuDesktopTrigger = el)}
+            ></div>
+          </scale-menu-flyout>
+        </scale-telekom-nav-item>
+
+        <scale-telekom-nav-item class="user-menu-mobile">
+          <button>
+            {this.printProfileTrigger()}
+            {this.printLabel()}
+          </button>
+
+          <scale-telekom-nav-flyout variant="mobile">
+            <scale-telekom-mobile-flyout-canvas
+              appName={this.appName}
+              closeButtonLabel={this.closeMenuAccessibilityLabel}
+            >
+              {this.loggedIn && [
+                <app-navigation-user-menu
+                  slot="mobile-main-nav"
+                  navigation={this.buildUserNavigation()}
+                  styles={this.buildMobileMenuStyles()}
+                ></app-navigation-user-menu>,
+              ]}
+
+              {!this.loggedIn && [
+                <app-navigation-user-menu
+                  slot="mobile-main-nav"
+                  navigation={[]}
+                >
+                  {this.printSignInMenu()}
+                </app-navigation-user-menu>,
+              ]}
+            </scale-telekom-mobile-flyout-canvas>
+          </scale-telekom-nav-flyout>
+        </scale-telekom-nav-item>
+      </Host>
+    );
+  }
+}
diff --git a/packages/components/src/html/telekom-header-profile.html b/packages/components/src/html/telekom-header-profile.html
new file mode 100644
index 0000000000..b0c84049f9
--- /dev/null
+++ b/packages/components/src/html/telekom-header-profile.html
@@ -0,0 +1,290 @@
+<!DOCTYPE html>
+<html dir="ltr" lang="de">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Telekom Header</title>
+
+    <script type="module" src="/build/scale-components.esm.js"></script>
+    <link rel="stylesheet" href="/build/scale-components.css" />
+    <style media="screen, print">
+      html,
+      body {
+        margin: 0;
+        padding: 0;
+        height: 200vh;
+        background: var(--telekom-color-background-surface-subtle);
+      }
+
+      main {
+        background: #fff;
+        border: 1px solid #ddd;
+        border-radius: 2px;
+        margin: 2em;
+        padding: 1em 2em;
+      }
+
+      .buttons {
+        display: flex;
+        gap: 2em;
+        align-items: center;
+        background: #eee;
+        padding: 2em;
+        margin: 2em 0;
+        font-weight: bold;
+      }
+    </style>
+  </head>
+
+  <body>
+    <scale-telekom-header
+      app-name="Login-Einstellungen"
+      app-name-link="https://example.com"
+    >
+      <!-- nav.main -->
+      <scale-telekom-nav-list variant="main-nav" slot="main-nav">
+        <scale-telekom-nav-item active
+          ><a href="#">Übersicht</a></scale-telekom-nav-item
+        >
+        <scale-telekom-nav-item
+          ><a href="#">Login-Daten</a></scale-telekom-nav-item
+        >
+        <scale-telekom-nav-item
+          ><a href="#">Sicherheit</a></scale-telekom-nav-item
+        >
+        <scale-telekom-nav-item
+          ><a href="#">Verträge</a></scale-telekom-nav-item
+        >
+        <scale-telekom-nav-item
+          ><a href="#">Optionen</a></scale-telekom-nav-item
+        >
+      </scale-telekom-nav-list>
+
+      <!-- meta -->
+      <scale-telekom-nav-list
+        variant="meta-nav"
+        slot="meta-nav"
+        alignment="right"
+      >
+        <scale-telekom-nav-item><a href="#">Contact</a></scale-telekom-nav-item>
+      </scale-telekom-nav-list>
+
+      <!-- lang -->
+      <!--
+  <scale-telekom-nav-list variant="lang-switcher" slot="lang-switcher" alignment="right">
+    <scale-telekom-nav-item active><a href="#">DE</a></scale-telekom-nav-item>
+    <scale-telekom-nav-item><a href="#">HU</a></scale-telekom-nav-item>
+  </scale-telekom-nav-list>
+  -->
+
+      <!-- functions -->
+      <scale-telekom-nav-list
+        variant="functions"
+        slot="functions"
+        alignment="right"
+        role="none"
+      >
+        <!--
+    <scale-telekom-nav-item><a href="#"><scale-icon-action-search> </scale-icon-action-search></a></scale-telekom-nav-item>
+    <scale-telekom-nav-item><a href="#"><scale-icon-content-credit-card> </scale-icon-content-credit-card></a></scale-telekom-nav-item>
+    <scale-telekom-nav-item><a href="#"><scale-icon-action-shopping-cart> </scale-icon-action-shopping-cart></a></scale-telekom-nav-item>
+    -->
+
+        <scale-telekom-nav-item
+          style="--_font-size-main-nav: var(--scl-font-size-12)"
+        >
+          <a href="#">
+            <scale-icon-alert-help></scale-icon-alert-help>
+            <span
+              style="
+                margin-left: var(--scl-spacing-8);
+                font-weight: var(--telekom-typography-font-weight-regular);
+              "
+              >Help</span
+            >
+          </a>
+        </scale-telekom-nav-item>
+
+        <telekom-profile-menu
+          app-name="Application Name"
+          service-name="Dienstname"
+          service-description="Service Description: Hier können Sie Ihre Verträge verwalten oder auf Rechnungen, Verbrauchsanzeigen, Einstellungen und weitere Informationen zugreifen."
+          login-label="Zum Login"
+          login-help-label="Hilfe zum Login"
+          register-headline="Noch kein Telekom Login?"
+          register-label="Jetzt registrieren"
+          login-settings-label="Login-Einstellungen"
+          logout-label="Logout"
+          close-menu-accessibility-label="Menü schließen"
+        ></telekom-profile-menu>
+
+        <!-- mainMenu mobile -->
+
+        <scale-telekom-nav-item class="burger-item" hide-on-desktop>
+          <button><scale-icon-action-menu></scale-icon-action-menu></button>
+          <scale-telekom-nav-flyout variant="mobile" class="mobile-nav-flyout">
+            <!-- the mobile navigation structure goes here -->
+            <scale-telekom-mobile-flyout-canvas>
+              <!-- main-nav (mobile) -->
+              <scale-telekom-mobile-menu slot="mobile-main-nav">
+                <scale-telekom-mobile-menu-item active
+                  ><a href="#">Übersicht</a></scale-telekom-mobile-menu-item
+                >
+                <scale-telekom-mobile-menu-item
+                  ><a href="#">Login-Daten</a></scale-telekom-mobile-menu-item
+                >
+                <scale-telekom-mobile-menu-item
+                  ><a href="#">Sicherheit</a></scale-telekom-mobile-menu-item
+                >
+                <scale-telekom-mobile-menu-item
+                  ><a href="#">Verträge</a></scale-telekom-mobile-menu-item
+                >
+                <scale-telekom-mobile-menu-item
+                  ><a href="#">Optionen</a></scale-telekom-mobile-menu-item
+                >
+              </scale-telekom-mobile-menu>
+
+              <!-- meta-nav (mobile) -->
+              <scale-telekom-nav-list
+                variant="meta-nav-external"
+                slot="mobile-meta-nav-external"
+                alignment="left"
+                style="--flex-direction: column"
+              >
+                <scale-telekom-nav-item
+                  ><a href="#"
+                    >Contact
+                    <scale-icon-navigation-external-link
+                      size="11"
+                    ></scale-icon-navigation-external-link></a
+                ></scale-telekom-nav-item>
+              </scale-telekom-nav-list>
+            </scale-telekom-mobile-flyout-canvas>
+          </scale-telekom-nav-flyout>
+        </scale-telekom-nav-item>
+
+        <!-- /mainMenu mobile -->
+      </scale-telekom-nav-list>
+    </scale-telekom-header>
+
+    <main>
+      <h1>Telekom Scale Header - Profile Trigger Demo</h1>
+
+      <div id="playground">
+        <div class="buttons">
+          <span>services:</span>
+          <scale-button id="clear-items">hide</scale-button>
+          <scale-button id="reset-items">show</scale-button>
+        </div>
+        <div class="buttons">
+          <span>login settings:</span>
+          <scale-button id="hide-login-settings">hide</scale-button>
+          <scale-button id="show-login-settings">show</scale-button>
+        </div>
+
+        <div class="buttons">
+          <span>logged in?</span>
+          <scale-button id="loggedin-true">true</scale-button>
+          <scale-button id="loggedin-false">false</scale-button>
+        </div>
+
+        <script>
+          let serviceLinks = [
+            {
+              name: 'My Account',
+              href: 'https://www.telekom.de/mein-kundencenter',
+              icon: 't-product-measure-internet-speed',
+            },
+            {
+              name: 'E-Mail Center',
+              href: 'https://www.telekom.de/e-mail/e-mail-center',
+              icon: 'communication-mail-opened',
+            },
+            {
+              name: 'MagentaTV',
+              href: 'https://web.magentatv.de/EPG/',
+              icon: 't-product-magenta-tv',
+            },
+            {
+              name: 'MagentaSport',
+              href: 'https://www.magentasport.de',
+              icon: 't-product-telekom-1t1',
+            },
+            {
+              name: 'MagentaCloud',
+              href: 'https://magentacloud.de',
+              icon: 'action-upload-to-cloud',
+            },
+            {
+              name: 'MagentaHome Web',
+              href: 'https://cockpit.telekom.net',
+              icon: 'home-smarthome',
+            },
+          ];
+
+          function setLoggedIn(val) {
+            let profileMenu = document.querySelector('telekom-profile-menu');
+
+            profileMenu.loggedIn = val;
+
+            profileMenu.label = val ? 'Alexander' : 'Login';
+            profileMenu.accessibilityLabel = val
+              ? 'Benutzerprofil: Alexander'
+              : 'Login';
+
+            console.log('set loggedIn');
+          }
+
+          window.onload = () => {
+            let profileMenu = document.querySelector('telekom-profile-menu');
+
+            profileMenu.userInfo = JSON.stringify({
+              name: 'Alexander Dreyer',
+              email: 'alexander.dreyer@t-online.de',
+            });
+            profileMenu.serviceLinks = JSON.stringify(serviceLinks);
+
+            document.getElementById('clear-items').onclick = () => {
+              profileMenu.serviceLinks = JSON.stringify([]);
+            };
+            document.getElementById('reset-items').onclick = () => {
+              profileMenu.serviceLinks = JSON.stringify(serviceLinks);
+            };
+
+            document.getElementById('hide-login-settings').onclick = () => {
+              profileMenu.hideLoginSettings = true;
+            };
+            document.getElementById('show-login-settings').onclick = () => {
+              profileMenu.hideLoginSettings = false;
+            };
+
+            document.getElementById('loggedin-false').onclick = () => {
+              this.setLoggedIn(false);
+            };
+            document.getElementById('loggedin-true').onclick = () => {
+              this.setLoggedIn(true);
+            };
+
+            setLoggedIn(false);
+          };
+        </script>
+      </div>
+
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+      <p>&nbsp;</p>
+    </main>
+  </body>
+</html>
diff --git a/packages/storybook-vue/.storybook/usage-addon/usage.js b/packages/storybook-vue/.storybook/usage-addon/usage.js
index fdde1ac5f6..fa9f1deeba 100644
--- a/packages/storybook-vue/.storybook/usage-addon/usage.js
+++ b/packages/storybook-vue/.storybook/usage-addon/usage.js
@@ -95,6 +95,8 @@ import footer_en from 'raw-loader!../../stories/deprecated/footer/footer.md';
 import footer_de from 'raw-loader!../../stories/deprecated/footer/footer_de.md';
 import telekomFooter_en from 'raw-loader!../../stories/components/telekom-footer/telekom-footer.md';
 import telekomFooter_de from 'raw-loader!../../stories/components/telekom-footer/telekom-footer_de.md';
+import telekomProfileMenu_en from 'raw-loader!../../stories/components/telekom-profile-menu/telekom-profile-menu.md';
+import telekomProfileMenu_de from 'raw-loader!../../stories/components/telekom-profile-menu/telekom-profile-menu_de.md';
 import callout_en from 'raw-loader!../../stories/components/callout/callout.md';
 import callout_de from 'raw-loader!../../stories/components/callout/callout_de.md';
 import toggleGroup_de from 'raw-loader!../../stories/deprecated/toggle-group/toggle-group_de.md';
@@ -209,6 +211,8 @@ const Usage = (props) => {
     footer_de,
     'telekom-footer_en': telekomFooter_en,
     'telekom-footer_de': telekomFooter_de,
+    'telekom-profile-menu_en': telekomProfileMenu_en,
+    'telekom-profile-menu_de': telekomProfileMenu_de,
     'toggle-group_en': toggleGroup_en,
     'toggle-group_de': toggleGroup_de,
     tooltip_en,
diff --git a/packages/storybook-vue/public/assets/3_components/telekom-profile-menu/telekom-profile-menu-logged-in.png b/packages/storybook-vue/public/assets/3_components/telekom-profile-menu/telekom-profile-menu-logged-in.png
new file mode 100644
index 0000000000..a3c0ccce2c
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/telekom-profile-menu/telekom-profile-menu-logged-in.png differ
diff --git a/packages/storybook-vue/public/assets/3_components/telekom-profile-menu/telekom-profile-menu-logged-out.png b/packages/storybook-vue/public/assets/3_components/telekom-profile-menu/telekom-profile-menu-logged-out.png
new file mode 100644
index 0000000000..fb8af85b2c
Binary files /dev/null and b/packages/storybook-vue/public/assets/3_components/telekom-profile-menu/telekom-profile-menu-logged-out.png differ
diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx
index 5611b86cf9..9626c69d65 100644
--- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx
+++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomBrandHeader.stories.mdx
@@ -8,6 +8,8 @@ import {
   addonNavigation,
   sectorNavigation,
   userNavigation,
+  userInfo,
+  serviceLinks,
 } from './fixtures';
 
 <Meta
@@ -54,12 +56,13 @@ export const Template = (args, { argTypes }) => ({
   components: { TelekomHeaderTemplate },
   props: {
     ...TelekomHeaderTemplate.props,
-    storyName: String,
     // TODO remove these from here since they're included already in TelekomHeaderTemplate
     mainNavAriaLabel: 'Main Navigation',
     metaNavAriaLabel: 'Meta Navigation',
     metaNavExternalAriaLabel: 'External Meta Navigation',
     langSwitcherAriaLabel: 'Language Switcher',
+    userInfo: String,
+    serviceLinks: String,
   },
   template: `
     <TelekomHeaderTemplate
@@ -69,10 +72,12 @@ export const Template = (args, { argTypes }) => ({
       :logo-href="logoHref"
       :logo-title="logoTitle"
       :logo-hide-title="logoHideTitle"
-      :meta-nav-aria-label="metaNavAriaLabel" 
+      :meta-nav-aria-label="metaNavAriaLabel"
       :meta-nav-external-aria-label="metaNavExternalAriaLabel"
       :lang-switcher-aria-label="langSwitcherAriaLabel"
       :main-nav-aria-label="mainNavAriaLabel"
+      :user-info="userInfo"
+      :service-links="serviceLinks"
     />
   `,
 });
diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue
index a0032257ff..2a0d1721f0 100644
--- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue
+++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/TelekomHeaderTemplate.vue
@@ -9,6 +9,8 @@
         :logo-href="logoHref"
         :logo-title="logoTitle"
         :logo-hide-title="logoHideTitle"
+        :user-info="userInfo"
+        :service-links="serviceLinks"
       ></component>
       <!-- content goes here -->
     </scale-telekom-app-shell>
@@ -38,6 +40,8 @@ export default {
     logoTitle: String,
     logoHideTitle: String,
     storyName: String,
+    userInfo: String,
+    serviceLinks: String
   },
 };
 </script>
diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/fixtures.js b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/fixtures.js
index 1dd478cc2c..a6080e47bc 100644
--- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/fixtures.js
+++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/fixtures.js
@@ -355,7 +355,7 @@ export const mainNavigationFlyout = [
 ];
 export const iconNavigation = [
   { name: 'Search', id: 'Search35', href: '#search', icon: 'action-search' },
-  { 
+  {
     name: 'Cart',
     id: 'Cart36',
     href: '#cart',
@@ -372,3 +372,41 @@ export const iconNavigation = [
 export const sectorNavigation = [
   { name: 'Business', id: 'Business39', href: '#business' },
 ];
+
+export const userInfo = {
+  name: 'Alexander Dreyer',
+  email: 'alexander.dreyer@t-online.de',
+};
+
+export const serviceLinks = [
+  {
+    name: 'My Account',
+    href: 'https://www.telekom.de/mein-kundencenter',
+    icon: 't-product-measure-internet-speed',
+  },
+  {
+    name: 'E-Mail Center',
+    href: 'https://www.telekom.de/e-mail/e-mail-center',
+    icon: 'communication-mail-opened',
+  },
+  {
+    name: 'MagentaTV',
+    href: 'https://web.magentatv.de/EPG/',
+    icon: 't-product-magenta-tv',
+  },
+  {
+    name: 'MagentaSport',
+    href: 'https://www.magentasport.de',
+    icon: 't-product-telekom-1t1',
+  },
+  {
+    name: 'MagentaCloud',
+    href: 'https://magentacloud.de',
+    icon: 'action-upload-to-cloud',
+  },
+  {
+    name: 'MagentaHome Web',
+    href: 'https://cockpit.telekom.net',
+    icon: 'home-smarthome',
+  }
+];
diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header.md b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header.md
index 4fdeffc82f..85fbb937ec 100644
--- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header.md
+++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header.md
@@ -31,6 +31,10 @@ The subtle brand header has no main navigation or features and is pinned to the
 
 ![Image Name](assets/3_components/beta-brand-header/3_brandheader_brandbar_subtle.png)
 
+### Profile Menu
+
+TODO DaSu
+
 ## Elements
 
 ![Image Name](assets/3_components/beta-brand-header/4_brandheader_brandbar_elements.png)
@@ -102,7 +106,8 @@ This component is still in the beta phase. When testing it, keep in mind that it
 
 ## Related components
 
-[Breadcrumb, ](?path=/usage/components-breadcrumb--standard)
-[Sidebar Navigation, ](?path=/usage/components-sidebar-navigation--standard)
-[Tab Navigation, ](?path=/usage/components-tab-navigation--text-icon)
-[Accordion](?path=/usage/components-accordion--standard)
+* [Breadcrumb](?path=/usage/components-breadcrumb--standard)
+* [Sidebar Navigation](?path=/usage/components-sidebar-navigation--standard)
+* [Tab Navigation](?path=/usage/components-tab-navigation--text-icon)
+* [Accordion](?path=/usage/components-accordion--standard)
+* [Profile Menu](?path=/docs/components-telekom-profile-menu--logged-out)
diff --git a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header_de.md b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header_de.md
index 660f240f29..f80e80573c 100644
--- a/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header_de.md
+++ b/packages/storybook-vue/stories/components/telekom-brand-header-navigation/telekom-brand-header_de.md
@@ -103,7 +103,8 @@ Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenk
 
 ## Verwandte Komponenten
 
-[Breadcrumb, ](?path=/usage/components-breadcrumb--standard)
-[Sidebar-Navigation, ](?path=/usage/components-sidebar-navigation--standard)
-[Tab-Navigation, ](?path=/usage/components-tab-navigation--text-icon)
-[Accordion](?path=/usage/components-accordion--standard)
+* [Breadcrumb](?path=/usage/components-breadcrumb--standard)
+* [Sidebar Navigation](?path=/usage/components-sidebar-navigation--standard)
+* [Tab Navigation](?path=/usage/components-tab-navigation--text-icon)
+* [Accordion](?path=/usage/components-accordion--standard)
+* [Profile Menu](?path=/docs/components-telekom-profile-menu--logged-out)
diff --git a/packages/storybook-vue/stories/components/telekom-profile-menu/TelekomProfileMenu.vue b/packages/storybook-vue/stories/components/telekom-profile-menu/TelekomProfileMenu.vue
new file mode 100644
index 0000000000..03da99957e
--- /dev/null
+++ b/packages/storybook-vue/stories/components/telekom-profile-menu/TelekomProfileMenu.vue
@@ -0,0 +1,61 @@
+<template>
+  <telekom-profile-menu
+    :app-name="appName"
+    :label="label"
+    :accessibility-label="accessibilityLabel"
+    :close-menu-accessibility-label="closeMenuAccessibilityLabel"
+    :service-name="serviceName"
+    :service-description="serviceDescription"
+    :login-label="loginLabel"
+    :login-help-label="loginHelpLabel"
+    :register-headline="registerHeadline"
+    :register-label="registerLabel"
+    :login-settings-label="loginSettingsLabel"
+    :logout-label="logoutLabel"
+    :logged-in="loggedIn"
+    :user-info="userInfo"
+    :service-links="serviceLinks"
+    :login-url="loginUrl"
+    :login-help-url="loginHelpUrl"
+    :register-url="registerUrl"
+    :login-settings-url="loginSettingsUrl"
+    :hide-login-settings="hideLoginSettings"
+    :logout-url="logoutUrl"
+  ></telekom-profile-menu>
+</template>
+
+<script>
+export default {
+  props: {
+    label: String,
+    accessibilityLabel: String,
+    closeMenuAccessibilityLabel: String,
+
+    appName: String,
+    serviceName: String,
+    serviceDescription: String,
+
+    loggedIn: Boolean,
+
+    loginUrl: String,
+    loginLabel: String,
+
+    loginHelpUrl: String,
+    loginHelpLabel: String,
+
+    registerHeadline: String,
+    registerUrl: String,
+    registerLabel: String,
+
+    loginSettingsLabel: String,
+    loginSettingsUrl: String,
+    hideLoginSettings: Boolean,
+
+    logoutLabel: String,
+    logoutUrl: String,
+
+    userInfo: String,
+    serviceLinks: String,
+  },
+};
+</script>
diff --git a/packages/storybook-vue/stories/components/telekom-profile-menu/telekom-profile-menu.md b/packages/storybook-vue/stories/components/telekom-profile-menu/telekom-profile-menu.md
new file mode 100644
index 0000000000..f1b8766e03
--- /dev/null
+++ b/packages/storybook-vue/stories/components/telekom-profile-menu/telekom-profile-menu.md
@@ -0,0 +1,38 @@
+<div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;">
+    <h1>Telekom Profile Menu</h1>
+    <img src="assets/aa.png" alt="Accessible AA" />
+</div>
+
+The profile menu ensures a consistent behaviour for the login / user profile menu in all our products and services.
+
+It is a subcomponent of `scale-telekom-header` and must be placed inside its `functions` slot:
+
+```
+<scale-telekom-header>
+  <scale-telekom-nav-list variant="functions" slot="functions">
+    <telekom-profile-menu ... >
+```
+
+Set the profile menu's `logged-in` parameter to `true` / `false` to change between the two states, set the remaining parameters to match the menu's appearance according to your products' needs.
+
+You'll find default values in the code examples in the [Docs section](?path=/docs/components-telekom-profile-menu--logged-out).
+
+## Logged out
+
+```
+<telekom-profile-menu logged-in="false" ... >
+```
+
+In this state the menu offers the user the possibility sign up / log in to his account.
+
+![Image Name](assets/3_components/telekom-profile-menu/telekom-profile-menu-logged-out.png)
+
+## Logged in
+
+```
+<telekom-profile-menu logged-in="true" ... >
+```
+
+In this state the menu offers the user links to a set of important Telekom services and the possibility to log out from his account.
+
+![Image Name](assets/3_components/telekom-profile-menu/telekom-profile-menu-logged-in.png)
diff --git a/packages/storybook-vue/stories/components/telekom-profile-menu/telekom-profile-menu.stories.mdx b/packages/storybook-vue/stories/components/telekom-profile-menu/telekom-profile-menu.stories.mdx
new file mode 100644
index 0000000000..3d83913bd8
--- /dev/null
+++ b/packages/storybook-vue/stories/components/telekom-profile-menu/telekom-profile-menu.stories.mdx
@@ -0,0 +1,354 @@
+import {
+  Meta,
+  Story,
+  ArgsTable,
+  Canvas,
+} from '@storybook/addon-docs';
+import TelekomProfileMenu from "./TelekomProfileMenu.vue";
+
+<Meta title="Components/Telekom Profile Menu" component={TelekomProfileMenu} />
+
+export const Template = (args, { argTypes }) => ({
+  components: { TelekomProfileMenu },
+  props: TelekomProfileMenu.props,
+  template: `
+    <div class="wrapper">
+      <scale-telekom-app-shell>
+        <scale-telekom-header slot="header" :app-name="appName">
+              <scale-telekom-nav-list variant="functions" slot="functions" alignment="right" aria-label="Functions Menu" role="none">
+                <telekom-profile-menu
+                  :app-name="appName"
+                  :label="label"
+                  :accessibility-label="accessibilityLabel"
+                  :close-menu-accessibility-label="closeMenuAccessibilityLabel"
+                  :service-name="serviceName"
+                  :service-description="serviceDescription"
+                  :login-label="loginLabel"
+                  :login-help-label="loginHelpLabel"
+                  :register-headline="registerHeadline"
+                  :register-label="registerLabel"
+                  :login-settings-label="loginSettingsLabel"
+                  :logout-label="logoutLabel"
+                  :logged-in="loggedIn"
+                  :user-info="userInfo"
+                  :service-links="serviceLinks"
+                  :login-url="loginUrl"
+                  :login-help-url="loginHelpUrl"
+                  :register-url="registerUrl"
+                  :login-settings-url="loginSettingsUrl"
+                  :hide-login-settings="hideLoginSettings"
+                  :logout-url="logoutUrl"
+                ></telekom-profile-menu>
+              </scale-telekom-nav-list>
+            </scale-telekom-header>
+      </scale-telekom-app-shell>
+    </div>
+  `,
+});
+
+<div
+  style={{
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '100%',
+  }}
+>
+  <h1>Telekom Profile Menu</h1>
+  <img src="assets/aa.png" alt="Accessible AA" />
+</div>
+
+## Logged out
+
+<Canvas withSource="none">
+  <Story
+    name="Logged out"
+    args={{
+      loginUrl: "https://www.telekom.de/todo/login",
+      loginHelpUrl: "https://www.telekom.de/hilfe/telekom-login",
+      registerUrl: "https://meinkonto.telekom-dienste.de/telekom/account/registration/assistant/userstatus.xhtml",
+      loggedIn: false,
+      appName: "Application",
+      label: "Login",
+      accessibilityLabel: "Login",
+      closeMenuAccessibilityLabel: "Menü schließen",
+      serviceName: "Kundencenter",
+      serviceDescription: "Hier können Sie Ihre Verträge verwalten oder auf Rechnungen, Verbrauchsanzeigen, Einstellungen und weitere Informationen zugreifen.",
+      loginLabel: "Zum Login",
+      loginHelpLabel: "Hilfe zum Login",
+      registerHeadline: "Noch kein Telekom Login?",
+      registerLabel: "Jetzt registrieren",
+      logoutLabel: "Logout",
+      userInfo: JSON.stringify({
+        name: 'Firstname Lastname',
+        email: 'example@example.com',
+      }),
+      serviceLinks: JSON.stringify([
+        {
+          name: 'Service 1',
+          href: 'https://www.telekom.de/service-1',
+          icon: 't-product-measure-internet-speed',
+        },
+        {
+          name: 'Service 2',
+          href: 'https://www.telekom.de/service-2',
+          icon: 'communication-mail-opened',
+        }
+      ])
+    }}
+    inline={false}
+    height={500}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### deutsche Version
+
+```html
+<scale-telekom-header>
+  <!-- ... -->
+  <scale-telekom-nav-list variant="functions" slot="functions" alignment="right" aria-label="Functions Menu" role="none">
+    <!-- login-url: dynamic link - OpenID connect discovery -->
+    <telekom-profile-menu
+      login-url="https://www.telekom.de/todo/login"
+      login-help-url="https://www.telekom.de/hilfe/telekom-login"
+      register-url="https://meinkonto.telekom-dienste.de/telekom/account/registration/assistant/userstatus.xhtml"
+      logged-in="false"
+      app-name="Application"
+      label="Login"
+      accessibility-label="Login"
+      close-menu-accessibility-label="Menü schließen"
+      service-name="Kundencenter"
+      service-description="Hier können Sie Ihre Verträge verwalten oder auf Rechnungen, Verbrauchsanzeigen, Einstellungen und weitere Informationen zugreifen."
+      login-label="Zum Login"
+      login-help-label="Hilfe zum Login"
+      register-headline="Noch kein Telekom Login?"
+      register-label="Jetzt registrieren"
+    ></telekom-profile-menu>
+  </scale-telekom-nav-list>
+</scale-telekom-header>
+```
+
+### English version
+
+```html
+<scale-telekom-header>
+  <!-- ... -->
+  <scale-telekom-nav-list variant="functions" slot="functions" alignment="right" aria-label="Functions Menu" role="none">
+    <!-- login-url: dynamic link - OpenID connect discovery -->
+    <telekom-profile-menu
+      login-url="https://www.telekom.de/todo/login"
+      login-help-url="https://www.telekom.de/hilfe/telekom-login"
+      register-url="https://meinkonto.telekom-dienste.de/telekom/account/registration/assistant/userstatus.xhtml"
+      logged-in="false"
+      app-name="Application"
+      label="Login"
+      accessibility-label="Login"
+      close-menu-accessibility-label="Close menu"
+      service-name="Customer Center"
+      service-description="Here you can manage your contracts or access bills, consumption displays, settings and other information."
+      login-label="Log in"
+      login-help-label="Help with logging in"
+      register-headline="Don't have an account?"
+      register-label="Register now"
+    ></telekom-profile-menu>
+  </scale-telekom-nav-list>
+</scale-telekom-header>
+```
+
+## Logged in
+
+<Canvas withSource="none">
+  <Story
+    name="Logged in"
+    args={{
+      loginSettingsUrl: "https://www.telekom.de/todo/loginSettings",
+      hideLoginSettings: false,
+      logoutUrl: "https://www.telekom.de/todo/logout",
+      loggedIn: true,
+      appName: "Application",
+      label: "Alexander",
+      accessibilityLabel: "Benutzermenü öffnen: Alexander",
+      closeMenuAccessibilityLabel: "Menü schließen",
+      loginSettingsLabel: "Login-Einstellungen",
+      logoutLabel: "Logout",
+      userInfo: JSON.stringify({
+        name: 'Alexander Dreyer',
+        email: 'alexander.dreyer@t-online.de',
+      }),
+      serviceLinks: JSON.stringify([
+        {
+          name: 'Kundencenter',
+          href: 'https://www.telekom.de/mein-kundencenter',
+          icon: 't-product-measure-internet-speed',
+        },
+        {
+          name: 'E-Mail Center',
+          href: 'https://www.telekom.de/e-mail/e-mail-center',
+          icon: 'communication-mail-opened',
+        },
+        {
+          name: 'MagentaTV',
+          href: 'https://web.magentatv.de/EPG/',
+          icon: 't-product-magenta-tv',
+        },
+        {
+          name: 'MagentaSport',
+          href: 'https://www.magentasport.de',
+          icon: 't-product-telekom-1t1',
+        },
+        {
+          name: 'MagentaCloud',
+          href: 'https://magentacloud.de',
+          icon: 'action-upload-to-cloud',
+        },
+        {
+          name: 'MagentaZuhause Web',
+          href: 'https://cockpit.telekom.net',
+          icon: 'home-smarthome',
+        }
+      ])
+    }}
+    inline={false}
+    height={650}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+### deutsche Version
+
+```html
+<scale-telekom-header>
+  <!-- ... -->
+  <scale-telekom-nav-list variant="functions" slot="functions" alignment="right" aria-label="Functions Menu" role="none">
+    <telekom-profile-menu
+      login-settings-url="https://idm.account.telekom.com/account-manager"
+      hide-login-settings="false"
+      logout-url="https://accounts.login.idm.telekom.com/sessionmessage/logout?post_logout_redirect_uri=$Target-URL"
+      logged-in="true"
+      app-name="Application"
+      label="Alexander"
+      accessibilityLabel="Benutzermenü öffnen: Alexander"
+      close-menu-accessibility-label="Menü schließen"
+      login-settings-label="Login-Einstellungen"
+      logout-label="Logout"
+      <!-- set user-info & service-links via script, see below -->
+    ></telekom-profile-menu>
+  </scale-telekom-nav-list>
+</scale-telekom-header>
+
+<script>
+let serviceLinks = [
+  {
+    name: 'Kundencenter',
+    href: 'https://www.telekom.de/mein-kundencenter',
+    icon: 't-product-measure-internet-speed',
+  },
+  {
+    name: 'E-Mail Center',
+    href: 'https://www.telekom.de/e-mail/e-mail-center',
+    icon: 'communication-mail-opened',
+  },
+  {
+    name: 'MagentaTV',
+    href: 'https://web.magentatv.de/EPG/',
+    icon: 't-product-magenta-tv',
+  },
+  {
+    name: 'MagentaSport',
+    href: 'https://www.magentasport.de',
+    icon: 't-product-telekom-1t1',
+  },
+  {
+    name: 'MagentaCloud',
+    href: 'https://magentacloud.de',
+    icon: 'action-upload-to-cloud',
+  },
+  {
+    name: 'MagentaZuhause Web',
+    href: 'https://cockpit.telekom.net',
+    icon: 'home-smarthome',
+  }
+];
+
+window.onload = () => {
+  let profileMenu = document.querySelector('telekom-profile-menu');
+
+  profileMenu.userInfo = JSON.stringify({
+    name: 'Alexander Dreyer',
+    email: 'alexander.dreyer@t-online.de',
+  });
+  profileMenu.serviceLinks = JSON.stringify(serviceLinks);
+};
+</script>
+```
+
+### English version
+
+```html
+<scale-telekom-header>
+  <!-- ... -->
+  <scale-telekom-nav-list variant="functions" slot="functions" alignment="right" aria-label="Functions Menu" role="none">
+    <telekom-profile-menu
+      login-settings-url="https://idm.account.telekom.com/account-manager"
+      hide-login-settings="false"
+      logout-url="https://accounts.login.idm.telekom.com/sessionmessage/logout?post_logout_redirect_uri=$Target-URL"
+      logged-in="true"
+      app-name="Application"
+      label="Alexander"
+      accessibilityLabel="open user menu: Alexander"
+      close-menu-accessibility-label="close menu"
+      login-settings-label="Login Settings"
+      logout-label="Logout"
+      <!-- set user-info & service-links via script, see below -->
+    ></telekom-profile-menu>
+  </scale-telekom-nav-list>
+</scale-telekom-header>
+
+<script>
+let serviceLinks = [
+  {
+    name: 'My Account',
+    href: 'https://www.telekom.de/mein-kundencenter',
+    icon: 't-product-measure-internet-speed',
+  },
+  {
+    name: 'E-Mail Center',
+    href: 'https://www.telekom.de/e-mail/e-mail-center',
+    icon: 'communication-mail-opened',
+  },
+  {
+    name: 'MagentaTV',
+    href: 'https://web.magentatv.de/EPG/',
+    icon: 't-product-magenta-tv',
+  },
+  {
+    name: 'MagentaSport',
+    href: 'https://www.magentasport.de',
+    icon: 't-product-telekom-1t1',
+  },
+  {
+    name: 'MagentaCloud',
+    href: 'https://magentacloud.de',
+    icon: 'action-upload-to-cloud',
+  },
+  {
+    name: 'MagentaHome Web',
+    href: 'https://cockpit.telekom.net',
+    icon: 'home-smarthome',
+  }
+];
+
+window.onload = () => {
+  let profileMenu = document.querySelector('telekom-profile-menu');
+
+  profileMenu.userInfo = JSON.stringify({
+    name: 'Alexander Dreyer',
+    email: 'alexander.dreyer@t-online.de',
+  });
+  profileMenu.serviceLinks = JSON.stringify(serviceLinks);
+};
+</script>
+```
diff --git a/packages/storybook-vue/stories/components/telekom-profile-menu/telekom-profile-menu_de.md b/packages/storybook-vue/stories/components/telekom-profile-menu/telekom-profile-menu_de.md
new file mode 100644
index 0000000000..b8cd13cb16
--- /dev/null
+++ b/packages/storybook-vue/stories/components/telekom-profile-menu/telekom-profile-menu_de.md
@@ -0,0 +1,38 @@
+<div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;">
+    <h1>Telekom Profile Menu</h1>
+    <img src="assets/aa.png" alt="Accessible AA" />
+</div>
+
+Das Profilmenü bietet ein einheitliches Verhalten des Login-/Benutzerprofilmenüs für alle unsere Produkte und Services.
+
+Es ist eine Subkomponente von `scale-telekom-header` und muss in dessen `functions` Slot platziert werden:
+
+```
+<scale-telekom-header>
+  <scale-telekom-nav-list variant="functions" slot="functions">
+    <telekom-profile-menu ... >
+```
+
+Setze den Parameter `logged-in` des Profilmenüs auf `true` / `false`, um zwischen den beiden Status des Menüs umzuschalten, sowie die restlichen Parameter, um das Erscheinungsbild den Anforderungen des Produktes/Services anzupassen.
+
+In den Codebeispielen im [Docs-Abschnitt](?path=/docs/components-telekom-profile-menu--logged-out) sind default-Werte für die einzelnen Parameter aufgeführt.
+
+## Nutzer ausgeloggt
+
+```
+<telekom-profile-menu logged-in="false" ... >
+```
+
+In diesem Status bietet das Menü dem Nutzer die Möglichkeit zur Registrierung / Anmeldung an seinem Account.
+
+![Image Name](assets/3_components/telekom-profile-menu/telekom-profile-menu-logged-out.png)
+
+## Nutzer eingeloggt
+
+```
+<telekom-profile-menu logged-in="true" ... >
+```
+
+In diesem Status bietet das Menü dem Nutzer eine Liste von Verweisen zu wichtigen Telekom Services und die Möglichkeit zum Logout aus seinem Account.
+
+![Image Name](assets/3_components/telekom-profile-menu/telekom-profile-menu-logged-in.png)