diff --git a/docs/guides/migrations.md b/docs/guides/migrations.md
index f5fce07a0d..d37a6c17ef 100644
--- a/docs/guides/migrations.md
+++ b/docs/guides/migrations.md
@@ -9,6 +9,12 @@ kb_sync_latest_only
 
 ## 3.3 to 4.0
 
+The account navigation was reworked to support navigation grouping (used in `b2b` theme, see [`account-navigation.items.ts`](https://github.com/intershop/intershop-pwa/blob/4.0.0/src/app/pages/account/account-navigation/account-navigation.items.ts)).
+For better maintainability and brand specific overriding the account navigation items were externalized in an extra file `account-navigation.items.ts` used by the `account-navigation.component.ts`.
+Also with this rework the navigation items data structure was changed from a key value object to a simpler `NavigationItem` Array.
+With this data structure accessing the data was changed for the key access from `item.key` to `item.routerLink` or for the value example from `item.value.localizationKey` to `item.localizationKey`.
+To migrate to this new account navigation item handling any account navigation customization needs to be adapted accordingly.
+
 The deprecated SSR environment variable `ICM_IDENTITY_PROVIDER` was completely removed.
 Use the variable `IDENTITY_PROVIDER` instead to select the identity provider to be used if it is not the default `ICM`.
 Removed default `identityProvider` configuration from `environment.model.ts` so only hardcoded fallback from `configuration.effects.ts` works as fallback.
diff --git a/e2e/cypress/e2e/pages/account/my-account.page.ts b/e2e/cypress/e2e/pages/account/my-account.page.ts
index cb94accd99..307e1635b5 100644
--- a/e2e/cypress/e2e/pages/account/my-account.page.ts
+++ b/e2e/cypress/e2e/pages/account/my-account.page.ts
@@ -10,7 +10,7 @@ export class MyAccountPage {
   }
 
   navigateToQuoting() {
-    cy.get('a[data-testing-id="quote-list-link"]').click();
+    cy.get('a[data-testing-id="quotes-nav-link"]').click();
   }
 
   get respondedQuotesCount() {
@@ -22,18 +22,18 @@ export class MyAccountPage {
   }
 
   navigateToAddresses() {
-    cy.get('a[data-testing-id="addresses-link"]').click();
+    cy.get('a[data-testing-id="addresses-nav-link"]').click();
   }
 
   navigateToWishlists() {
-    cy.get('a[data-testing-id="wishlists-link"]').click();
+    cy.get('a[data-testing-id="wishlists-nav-link"]').click();
   }
 
   navigateToOrderTemplates() {
-    cy.get('a[data-testing-id="order-templates-link"]').click();
+    cy.get('a[data-testing-id="order-templates-nav-link"]').click();
   }
 
   navigateToPayments() {
-    cy.get('a[data-testing-id="payments-link"]').click();
+    cy.get('a[data-testing-id="payment-nav-link"]').click();
   }
 }
diff --git a/e2e/cypress/e2e/pages/account/order-templates-details.page.ts b/e2e/cypress/e2e/pages/account/order-templates-details.page.ts
index f99f88f6ad..8840a84bd3 100644
--- a/e2e/cypress/e2e/pages/account/order-templates-details.page.ts
+++ b/e2e/cypress/e2e/pages/account/order-templates-details.page.ts
@@ -9,7 +9,7 @@ export class OrderTemplatesDetailsPage {
   readonly breadcrumb = new BreadcrumbModule();
 
   static navigateToOverviewPage() {
-    cy.get('a[data-testing-id="order-templates-link"]').click();
+    cy.get('a[data-testing-id="order-templates-nav-link"]').click();
   }
 
   get listItem() {
diff --git a/src/app/core/icon.module.ts b/src/app/core/icon.module.ts
index 519792fbab..e92fa28d51 100644
--- a/src/app/core/icon.module.ts
+++ b/src/app/core/icon.module.ts
@@ -12,6 +12,7 @@ import {
   faBalanceScale,
   faBan,
   faBars,
+  faBriefcase,
   faCalendarDay,
   faCheck,
   faCheckCircle,
@@ -20,6 +21,7 @@ import {
   faEnvelope,
   faFastForward,
   faFax,
+  faGear,
   faGlobeAmericas,
   faHeart,
   faHome,
@@ -36,6 +38,7 @@ import {
   faPlus,
   faPrint,
   faQuestionCircle,
+  faRightFromBracket,
   faSearch,
   faShoppingCart,
   faSpinner,
@@ -63,22 +66,29 @@ export class IconModule {
       faAngleLeft,
       faAngleRight,
       faAngleUp,
-      faArrowsAlt,
       faArrowAltCircleRight,
+      faArrowsAlt,
       faBalanceScale,
       faBan,
       faBars,
+      faBriefcase,
       faCalendarDay,
       faCheck,
       faCheckCircle,
       faCog,
       faCogs,
+      faEnvelope,
+      faFastForward,
+      faFax,
+      faGear,
       faGlobeAmericas,
+      faHeart,
       faHome,
       faInbox,
       faInfoCircle,
       faList,
       faListAlt,
+      faMapMarkerAlt,
       faMinus,
       faPaperPlane,
       faPencilAlt,
@@ -87,23 +97,19 @@ export class IconModule {
       faPlus,
       faPrint,
       faQuestionCircle,
+      faRightFromBracket,
       faSearch,
       faShoppingCart,
       faSpinner,
+      faStar,
+      faStarHalf,
       faTh,
       faTimes,
       faTimesCircle,
       faTrashAlt,
       faUndo,
       faUser,
-      faUserCheck,
-      faStar,
-      faStarHalf,
-      faHeart,
-      faFastForward,
-      faMapMarkerAlt,
-      faEnvelope,
-      faFax
+      faUserCheck
     );
   }
 }
diff --git a/src/app/pages/account/account-navigation/account-navigation.component.html b/src/app/pages/account/account-navigation/account-navigation.component.html
index 4c71487c97..8c46181aa9 100644
--- a/src/app/pages/account/account-navigation/account-navigation.component.html
+++ b/src/app/pages/account/account-navigation/account-navigation.component.html
@@ -1,56 +1,108 @@
-<ng-container *ngIf="!isMobileView; else mobileNavigation">
-  <ul class="account-navigation list-unstyled" data-testing-id="myaccount-navigation">
+<!-- account navigation with hierarchy -->
+<ng-container *ngIf="!(deviceType === 'mobile' || deviceType === 'tablet'); else mobileNavigation">
+  <ul class="account-navigation list-unstyled">
     <ish-account-user-info></ish-account-user-info>
-    <ng-container *ngFor="let item of navigationItems | keyvalue: unsorted; let first = first">
-      <ng-container *ishIsAuthorizedTo="item.value.permission || 'always'">
-        <ng-container *ishHasNotRole="item.value.notRole">
-          <li
-            *ngIf="
-              (item.value.feature || 'always' | ishFeature) && (item.value.serverSetting || 'always' | ishServerSetting)
-            "
-            routerLinkActive="active"
-            [routerLinkActiveOptions]="{ exact: first }"
+    <ng-container *ngFor="let item of navItems">
+      <ng-container *ishIsAuthorizedTo="item.permission || 'always'">
+        <ng-container *ishHasNotRole="item.notRole">
+          <ng-container
+            *ngIf="(item.feature || 'always' | ishFeature) && (item.serverSetting || 'always' | ishServerSetting)"
           >
-            <a [routerLink]="item.key" [attr.data-testing-id]="item.value.dataTestingId">{{
-              item.value.localizationKey | translate
-            }}</a>
-          </li>
-        </ng-container>
-      </ng-container>
-      <ul *ngIf="item.value.children" class="account-navigation list-unstyled">
-        <ng-container *ngFor="let subItem of item.value.children | keyvalue: unsorted">
-          <ng-container *ishIsAuthorizedTo="item.value.permission || 'always'">
-            <li
-              *ngIf="
-                (subItem.value.feature || 'always' | ishFeature) &&
-                (subItem.value.serverSetting || 'always' | ishServerSetting)
-              "
-            >
-              <a [routerLink]="item.key + subItem.key" [attr.data-testing-id]="subItem.value.dataTestingId">{{
-                subItem.value.localizationKey | translate
-              }}</a>
-            </li>
+            <ng-container *ngIf="item.children; else noChildren">
+              <li
+                (click)="toggleCollapse(item)"
+                (keydown.enter)="toggleCollapse(item)"
+                tabindex="0"
+                class="account-nav-header"
+                [attr.aria-expanded]="!item.isCollapsed"
+                [attr.data-testing-id]="item.id + '-nav-link'"
+              >
+                <span>
+                  <fa-icon *ngIf="item.faIcon" [icon]="item.faIcon"></fa-icon>
+                  {{ item.localizationKey | translate }}
+                </span>
+              </li>
+              <li [ngbCollapse]="item.isCollapsed">
+                <ul class="account-navigation list-unstyled">
+                  <ng-container *ngFor="let subItem of item.children">
+                    <ng-container *ishIsAuthorizedTo="subItem.permission || 'always'">
+                      <ng-container *ishHasNotRole="subItem.notRole">
+                        <ng-container
+                          *ngIf="
+                            (subItem.feature || 'always' | ishFeature) &&
+                            (subItem.serverSetting || 'always' | ishServerSetting)
+                          "
+                        >
+                          <li
+                            [routerLinkActive]="activeClass"
+                            [routerLinkActiveOptions]="{ exact: false }"
+                            (isActiveChange)="activeChanged($event, subItem)"
+                          >
+                            <a [routerLink]="subItem.routerLink" [attr.data-testing-id]="subItem.id + '-nav-link'">
+                              {{ subItem.localizationKey | translate }}
+                            </a>
+                          </li>
+                        </ng-container>
+                      </ng-container>
+                    </ng-container>
+                  </ng-container>
+                </ul>
+              </li>
+            </ng-container>
+
+            <ng-template #noChildren>
+              <li
+                [routerLinkActive]="activeClass"
+                [routerLinkActiveOptions]="{ exact: item.routerLink === '/account' ? true : false }"
+              >
+                <a [routerLink]="item.routerLink" [attr.data-testing-id]="item.id + '-nav-link'">
+                  <fa-icon *ngIf="item.faIcon" [icon]="item.faIcon"></fa-icon>
+                  {{ item.localizationKey | translate }}
+                </a>
+              </li>
+            </ng-template>
           </ng-container>
         </ng-container>
-      </ul>
+      </ng-container>
     </ng-container>
   </ul>
 </ng-container>
 
+<!-- mobile account navigation select box -->
 <ng-template #mobileNavigation>
   <select (change)="navigateTo($event.target)" class="form-control">
-    <ng-container *ngFor="let item of navigationItems | keyvalue: unsorted">
-      <ng-container *ishIsAuthorizedTo="item.value.permission || 'always'">
-        <ng-container *ishHasNotRole="item.value.notRole">
-          <option
-            *ngIf="
-              (item.value.feature || 'always' | ishFeature) && (item.value.serverSetting || 'always' | ishServerSetting)
-            "
-            [value]="item.key"
-            [attr.selected]="isSelected(item.key)"
+    <ng-container *ngFor="let item of navItems">
+      <ng-container *ishIsAuthorizedTo="item.permission || 'always'">
+        <ng-container *ishHasNotRole="item.notRole">
+          <ng-container
+            *ngIf="(item.feature || 'always' | ishFeature) && (item.serverSetting || 'always' | ishServerSetting)"
           >
-            {{ item.value.localizationKey | translate }}
-          </option>
+            <ng-container *ngIf="item.children; else noOptgroup">
+              <optgroup [label]="item.localizationKey | translate"></optgroup>
+              <ng-container *ngFor="let subItem of item.children">
+                <ng-container *ishIsAuthorizedTo="subItem.permission || 'always'">
+                  <ng-container *ishHasNotRole="subItem.notRole">
+                    <ng-container
+                      *ngIf="
+                        (subItem.feature || 'always' | ishFeature) &&
+                        (subItem.serverSetting || 'always' | ishServerSetting)
+                      "
+                    >
+                      <option [value]="subItem.routerLink" [attr.selected]="isSelected(subItem)">
+                        {{ subItem.localizationKey | translate }}
+                      </option>
+                    </ng-container>
+                  </ng-container>
+                </ng-container>
+              </ng-container>
+            </ng-container>
+
+            <ng-template #noOptgroup>
+              <option [value]="item.routerLink" [attr.selected]="isSelected(item)">
+                {{ item.localizationKey | translate }}
+              </option>
+            </ng-template>
+          </ng-container>
         </ng-container>
       </ng-container>
     </ng-container>
diff --git a/src/app/pages/account/account-navigation/account-navigation.component.spec.ts b/src/app/pages/account/account-navigation/account-navigation.component.spec.ts
index e279f1f262..712b1ac68d 100644
--- a/src/app/pages/account/account-navigation/account-navigation.component.spec.ts
+++ b/src/app/pages/account/account-navigation/account-navigation.component.spec.ts
@@ -1,7 +1,9 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
+import { FaIconComponent } from '@fortawesome/angular-fontawesome';
+import { NgbCollapse } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
-import { MockComponent, MockPipe } from 'ng-mocks';
+import { MockComponent, MockDirective, MockPipe } from 'ng-mocks';
 
 import { AuthorizationToggleModule } from 'ish-core/authorization-toggle.module';
 import { FeatureTogglePipe } from 'ish-core/pipes/feature-toggle.pipe';
@@ -22,6 +24,8 @@ describe('Account Navigation Component', () => {
       declarations: [
         AccountNavigationComponent,
         MockComponent(AccountUserInfoComponent),
+        MockComponent(FaIconComponent),
+        MockDirective(NgbCollapse),
         MockPipe(FeatureTogglePipe, () => true),
         MockPipe(ServerSettingPipe, () => true),
       ],
diff --git a/src/app/pages/account/account-navigation/account-navigation.component.ts b/src/app/pages/account/account-navigation/account-navigation.component.ts
index 100f1c50d2..672d260a23 100644
--- a/src/app/pages/account/account-navigation/account-navigation.component.ts
+++ b/src/app/pages/account/account-navigation/account-navigation.component.ts
@@ -1,107 +1,59 @@
-import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 import { Router } from '@angular/router';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 import { DeviceType } from 'ish-core/models/viewtype/viewtype.types';
 
-interface NavigationItems {
-  [link: string]: {
-    localizationKey: string;
-    dataTestingId?: string;
-    feature?: string;
-    serverSetting?: string;
-    permission?: string | string[];
-    notRole?: string | string[];
-    children?: NavigationItems;
-  };
+import { navigationItems } from './account-navigation.items';
+
+export interface NavigationItem {
+  id: string;
+  localizationKey: string;
+  routerLink?: string;
+  faIcon?: IconProp;
+  isCollapsed?: boolean;
+  feature?: string;
+  serverSetting?: string;
+  permission?: string | string[];
+  notRole?: string | string[];
+  children?: NavigationItem[];
 }
 
+/**
+ * The account navigation component displays the items of the account navigation menu. The navigation items are defined in the account-navigation.items.<theme>.ts or account-navigation.items.ts, respectively.
+ */
 @Component({
   selector: 'ish-account-navigation',
   templateUrl: './account-navigation.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AccountNavigationComponent implements OnInit, OnChanges {
+export class AccountNavigationComponent {
   @Input() deviceType: DeviceType;
 
-  isMobileView = false;
-
   /**
    * Manages the Account Navigation items.
    */
-  navigationItems: NavigationItems = {
-    '/account': { localizationKey: 'account.my_account.link' },
-    '/account/requisitions/buyer': {
-      localizationKey: 'account.requisitions.requisitions',
-      serverSetting: 'services.OrderApprovalServiceDefinition.runnable',
-      permission: 'APP_B2B_PURCHASE',
-      notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
-    },
-    '/account/requisitions/approver': {
-      localizationKey: 'account.requisitions.approvals',
-      serverSetting: 'services.OrderApprovalServiceDefinition.runnable',
-      permission: ['APP_B2B_ORDER_APPROVAL', 'APP_B2B_MANAGE_COSTCENTER'],
-    },
-    '/account/quotes': {
-      localizationKey: 'account.navigation.quotes.link',
-      feature: 'quoting',
-      notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
-    },
-    '/account/order-templates': {
-      localizationKey: 'account.ordertemplates.link',
-      feature: 'orderTemplates',
-      dataTestingId: 'order-templates-link',
-    },
-    '/account/orders': {
-      localizationKey: 'account.order_history.link',
-      notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
-    },
-    '/account/wishlists': {
-      localizationKey: 'account.wishlists.link',
-      feature: 'wishlists',
-      dataTestingId: 'wishlists-link',
-      notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
-    },
-    '/account/addresses': {
-      localizationKey: 'account.saved_addresses.link',
-      dataTestingId: 'addresses-link',
-      notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
-    },
-    '/account/payment': {
-      localizationKey: 'account.payment.link',
-      dataTestingId: 'payments-link',
-      notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
-    },
-    '/account/profile': { localizationKey: 'account.profile.link', notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'] },
-    '/account/organization/users': {
-      localizationKey: 'account.organization.user_management',
-      permission: 'APP_B2B_MANAGE_USERS',
-    },
-    '/account/organization/cost-centers': {
-      localizationKey: 'account.organization.cost_center_management',
-      feature: 'costCenters',
-      dataTestingId: 'cost-centers-link',
-      permission: 'APP_B2B_MANAGE_COSTCENTER',
-    },
-    '/account/punchout': {
-      localizationKey: 'account.punchout.link',
-      dataTestingId: 'punchout-link',
-      feature: 'punchout',
-      permission: 'APP_B2B_MANAGE_PUNCHOUT',
-    },
-    '/logout': {
-      localizationKey: 'account.navigation.logout.link',
-      notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
-    },
-  };
+  navItems: NavigationItem[] = navigationItems;
+
+  activeClass = 'active';
 
   constructor(private router: Router) {}
 
-  ngOnInit() {
-    this.isMobileView = this.deviceType === 'tablet' || this.deviceType === 'mobile';
+  activeChanged(active: boolean, activeItem: NavigationItem) {
+    if (active && activeItem) {
+      const parentItem = this.navItems.find(item => item.children?.find(subitem => subitem.id === activeItem?.id));
+      if (parentItem) {
+        parentItem.isCollapsed = false;
+      }
+    }
+  }
+
+  toggleCollapse(item: NavigationItem) {
+    item.isCollapsed = !item.isCollapsed;
   }
 
-  ngOnChanges() {
-    this.isMobileView = this.deviceType === 'tablet' || this.deviceType === 'mobile';
+  isSelected(item: NavigationItem): string {
+    return item.routerLink === location.pathname ? 'selected' : undefined;
   }
 
   navigateTo(target: EventTarget) {
@@ -109,12 +61,4 @@ export class AccountNavigationComponent implements OnInit, OnChanges {
       this.router.navigateByUrl((target as HTMLDataElement).value);
     }
   }
-
-  get unsorted() {
-    return () => 0;
-  }
-
-  isSelected(itemValueLink: string): string {
-    return itemValueLink === location.pathname ? 'selected' : undefined;
-  }
 }
diff --git a/src/app/pages/account/account-navigation/account-navigation.items.b2c.ts b/src/app/pages/account/account-navigation/account-navigation.items.b2c.ts
new file mode 100644
index 0000000000..cbbbaac4c4
--- /dev/null
+++ b/src/app/pages/account/account-navigation/account-navigation.items.b2c.ts
@@ -0,0 +1,50 @@
+import { NavigationItem } from './account-navigation.component';
+
+// not-dead-code
+export const navigationItems: NavigationItem[] = [
+  { id: 'my-account', localizationKey: 'account.my_account.link', routerLink: '/account' },
+  {
+    id: 'orders',
+    localizationKey: 'account.order_history.link',
+    routerLink: '/account/orders',
+    notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+  },
+  {
+    id: 'wishlists',
+    localizationKey: 'account.wishlists.link',
+    routerLink: '/account/wishlists',
+    feature: 'wishlists',
+    notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+  },
+  {
+    id: 'addresses',
+    localizationKey: 'account.saved_addresses.link',
+    routerLink: '/account/addresses',
+    notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+  },
+  {
+    id: 'payment',
+    localizationKey: 'account.payment.link',
+    routerLink: '/account/payment',
+    notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+  },
+  {
+    id: 'profile',
+    localizationKey: 'account.profile.link',
+    routerLink: '/account/profile',
+    notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+  },
+  {
+    id: 'punchout',
+    localizationKey: 'account.punchout.link',
+    routerLink: '/account/punchout',
+    feature: 'punchout',
+    permission: 'APP_B2B_MANAGE_PUNCHOUT',
+  },
+  {
+    id: 'logout',
+    localizationKey: 'account.navigation.logout.link',
+    routerLink: '/logout',
+    notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+  },
+];
diff --git a/src/app/pages/account/account-navigation/account-navigation.items.ts b/src/app/pages/account/account-navigation/account-navigation.items.ts
new file mode 100644
index 0000000000..87a66fe2b0
--- /dev/null
+++ b/src/app/pages/account/account-navigation/account-navigation.items.ts
@@ -0,0 +1,126 @@
+import { NavigationItem } from './account-navigation.component';
+
+export const navigationItems: NavigationItem[] = [
+  { id: 'my-account', localizationKey: 'account.my_account.overview.link', routerLink: '/account' },
+  {
+    id: 'my-purchases',
+    localizationKey: 'account.requisitions.purchases',
+    faIcon: 'cart-shopping',
+    isCollapsed: true,
+    children: [
+      {
+        id: 'orders',
+        localizationKey: 'account.order_history.link',
+        routerLink: '/account/orders',
+        notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+      },
+      {
+        id: 'requisitions',
+        localizationKey: 'account.requisitions.requisitions',
+        routerLink: '/account/requisitions/buyer',
+        serverSetting: 'services.OrderApprovalServiceDefinition.runnable',
+        permission: 'APP_B2B_PURCHASE',
+        notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+      },
+      {
+        id: 'quotes',
+        localizationKey: 'account.navigation.quotes.link',
+        routerLink: '/account/quotes',
+        feature: 'quoting',
+        notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+      },
+      {
+        id: 'order-templates',
+        localizationKey: 'account.ordertemplates.link',
+        routerLink: '/account/order-templates',
+        feature: 'orderTemplates',
+      },
+      {
+        id: 'wishlists',
+        localizationKey: 'account.wishlists.link',
+        routerLink: '/account/wishlists',
+        feature: 'wishlists',
+        notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+      },
+    ],
+  },
+  {
+    id: 'my-approvals',
+    localizationKey: 'account.requisitions.myapprovals',
+    faIcon: 'check',
+    isCollapsed: true,
+    serverSetting: 'services.OrderApprovalServiceDefinition.runnable',
+    permission: ['APP_B2B_ORDER_APPROVAL', 'APP_B2B_MANAGE_COSTCENTER'],
+    children: [
+      {
+        id: 'approvals',
+        localizationKey: 'account.requisitions.approvals',
+        routerLink: '/account/requisitions/approver',
+        serverSetting: 'services.OrderApprovalServiceDefinition.runnable',
+        permission: ['APP_B2B_ORDER_APPROVAL', 'APP_B2B_MANAGE_COSTCENTER'],
+      },
+    ],
+  },
+  {
+    id: 'my-organization',
+    localizationKey: 'account.requisitions.organization',
+    faIcon: 'briefcase',
+    isCollapsed: true,
+    children: [
+      {
+        id: 'addresses',
+        localizationKey: 'account.saved_addresses.link',
+        routerLink: '/account/addresses',
+        notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+      },
+      {
+        id: 'users',
+        localizationKey: 'account.organization.user_management',
+        routerLink: '/account/organization/users',
+        permission: 'APP_B2B_MANAGE_USERS',
+      },
+      {
+        id: 'cost-centers',
+        localizationKey: 'account.organization.cost_center_management',
+        routerLink: '/account/organization/cost-centers',
+        feature: 'costCenters',
+        permission: 'APP_B2B_MANAGE_COSTCENTER',
+      },
+      {
+        id: 'punchout',
+        localizationKey: 'account.punchout.link',
+        routerLink: '/account/punchout',
+        feature: 'punchout',
+        permission: 'APP_B2B_MANAGE_PUNCHOUT',
+      },
+    ],
+  },
+  {
+    id: 'my-profile',
+    localizationKey: 'account.profile.myprofile',
+    faIcon: 'gear',
+    isCollapsed: true,
+    notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+    children: [
+      {
+        id: 'profile',
+        localizationKey: 'account.profile.link',
+        routerLink: '/account/profile',
+        notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+      },
+      {
+        id: 'payment',
+        localizationKey: 'account.payment.link',
+        routerLink: '/account/payment',
+        notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+      },
+    ],
+  },
+  {
+    id: 'logout',
+    localizationKey: 'account.navigation.logout.link',
+    faIcon: 'right-from-bracket',
+    routerLink: '/logout',
+    notRole: ['APP_B2B_CXML_USER', 'APP_B2B_OCI_USER'],
+  },
+];
diff --git a/src/app/pages/account/account-user-info/account-user-info.component.html b/src/app/pages/account/account-user-info/account-user-info.component.html
index 2195ab1cea..e9f125e736 100644
--- a/src/app/pages/account/account-user-info/account-user-info.component.html
+++ b/src/app/pages/account/account-user-info/account-user-info.component.html
@@ -7,10 +7,10 @@ <h4>{{ user.lastName }}, {{ user.firstName }}</h4>
       <h4 class="ellipsis">{{ user.login }}</h4>
     </ng-template>
   </ng-container>
-  <p *ngIf="customer$ | async as customer">
-    <small>{{ customer.companyName }}</small>
-  </p>
-  <p *ngIf="roles$ | async as roles">
-    <small>{{ roles }}</small>
-  </p>
+  <div *ngIf="customer$ | async as customer">
+    {{ customer.companyName }}
+  </div>
+  <div *ngIf="roles$ | async as roles">
+    {{ roles }}
+  </div>
 </li>
diff --git a/src/app/pages/account/account-user-info/account-user-info.component.spec.ts b/src/app/pages/account/account-user-info/account-user-info.component.spec.ts
index 0a8d2f8507..ce1aad945b 100644
--- a/src/app/pages/account/account-user-info/account-user-info.component.spec.ts
+++ b/src/app/pages/account/account-user-info/account-user-info.component.spec.ts
@@ -60,8 +60,8 @@ describe('Account User Info Component', () => {
     expect(element).toMatchInlineSnapshot(`
       <li class="account-welcome">
         <h4>Mustermann, Max</h4>
-        <p><small>Foods Inc.</small></p>
-        <p><small>Approver, Buyer</small></p>
+        <div>Foods Inc.</div>
+        <div>Approver, Buyer</div>
       </li>
     `);
   });
@@ -76,7 +76,7 @@ describe('Account User Info Component', () => {
     expect(element).toMatchInlineSnapshot(`
       <li class="account-welcome">
         <h4 class="ellipsis">max.mustermann@test.intershop.de</h4>
-        <p><small>Foods Inc.</small></p>
+        <div>Foods Inc.</div>
       </li>
     `);
   });
diff --git a/src/assets/i18n/de_DE.json b/src/assets/i18n/de_DE.json
index af34bdc58d..90d04aa136 100644
--- a/src/assets/i18n/de_DE.json
+++ b/src/assets/i18n/de_DE.json
@@ -188,6 +188,7 @@
   "account.logout.link": "Abmelden",
   "account.my_account.heading": "Mein Konto",
   "account.my_account.link": "Mein Konto",
+  "account.my_account.overview.link": "Kontoübersicht",
   "account.name.error.forbidden.chars": "Nur alphanumerische Zeichen sind erlaubt.",
   "account.navigation.logout.link": "Abmelden",
   "account.navigation.quotes.link": "Preisangebote",
@@ -300,6 +301,7 @@
   "account.profile.email.label": "E-Mail",
   "account.profile.heading": "Profileinstellungen",
   "account.profile.link": "Profileinstellungen",
+  "account.profile.myprofile": "Mein Profil",
   "account.profile.name.label": "Name",
   "account.profile.password.heading": "Kennwort",
   "account.profile.password.label": "Kennwort",
@@ -369,6 +371,9 @@
   "account.requisitions.approvals.navtab.waiting": "Zu genehmigende Bestellanforderungen",
   "account.requisitions.approvals.text": "Diese Liste zeigt alle Bestellanforderungen, die von Ihnen genehmigt werden müssen. Zudem können Sie alle Anforderungen anzeigen lassen, die bereits genehmigt oder abgelehnt wurden.",
   "account.requisitions.management": "Bestellanforderungsverwaltung",
+  "account.requisitions.myapprovals": "Meine Genehmigungen",
+  "account.requisitions.organization": "Meine Organisation",
+  "account.requisitions.purchases": "Einkäufe",
   "account.requisitions.requisitions": "Bestellanforderungen",
   "account.requisitions.requisitions.navtab.approved": "Genehmigt",
   "account.requisitions.requisitions.navtab.pending": "Offen",
diff --git a/src/assets/i18n/en_US.json b/src/assets/i18n/en_US.json
index fe2886ab6b..1f40194322 100644
--- a/src/assets/i18n/en_US.json
+++ b/src/assets/i18n/en_US.json
@@ -188,6 +188,7 @@
   "account.logout.link": "Logout",
   "account.my_account.heading": "My Account",
   "account.my_account.link": "My Account",
+  "account.my_account.overview.link": "Account Overview",
   "account.name.error.forbidden.chars": "Only alphanumeric characters are allowed.",
   "account.navigation.logout.link": "Logout",
   "account.navigation.quotes.link": "Quoting",
@@ -300,6 +301,7 @@
   "account.profile.email.label": "E-mail",
   "account.profile.heading": "Profile Settings",
   "account.profile.link": "Profile Settings",
+  "account.profile.myprofile": "My Profile",
   "account.profile.name.label": "Name",
   "account.profile.password.heading": "Password",
   "account.profile.password.label": "Password",
@@ -369,6 +371,9 @@
   "account.requisitions.approvals.navtab.waiting": "Waiting for your Approval",
   "account.requisitions.approvals.text": "This list shows all order requests that need to be approved by you. You can also view all requests that have already been approved or rejected.",
   "account.requisitions.management": "Requisition Management",
+  "account.requisitions.myapprovals": "My Approvals",
+  "account.requisitions.organization": "My Organization",
+  "account.requisitions.purchases": "Purchases",
   "account.requisitions.requisitions": "Requisitions",
   "account.requisitions.requisitions.navtab.approved": "Approved",
   "account.requisitions.requisitions.navtab.pending": "Pending",
diff --git a/src/assets/i18n/fr_FR.json b/src/assets/i18n/fr_FR.json
index 73559d0ee8..dacf840426 100644
--- a/src/assets/i18n/fr_FR.json
+++ b/src/assets/i18n/fr_FR.json
@@ -188,6 +188,7 @@
   "account.logout.link": "Déconnexion",
   "account.my_account.heading": "Mon compte",
   "account.my_account.link": "Mon compte",
+  "account.my_account.overview.link": "Aperçu du compte",
   "account.name.error.forbidden.chars": "Seuls les caractères alphanumériques sont autorisés.",
   "account.navigation.logout.link": "Déconnexion",
   "account.navigation.quotes.link": "Devis",
@@ -300,6 +301,7 @@
   "account.profile.email.label": "Courriel",
   "account.profile.heading": "Paramètres de profil",
   "account.profile.link": "Paramètres de profil",
+  "account.profile.myprofile": "Mon profil",
   "account.profile.name.label": "Nom",
   "account.profile.password.heading": "Mot de passe",
   "account.profile.password.label": "Mot de passe",
@@ -369,6 +371,9 @@
   "account.requisitions.approvals.navtab.waiting": "En attente de votre approbation",
   "account.requisitions.approvals.text": "Cette liste répertorie toutes vos demandes d’achats que vous devez approuver. Vous pouvez également afficher toutes les demandes d’achats qui ont déjà été approuvées ou rejetées.",
   "account.requisitions.management": "Gestion des demandes d’achats",
+  "account.requisitions.myapprovals": "Mes approbations",
+  "account.requisitions.organization": "Mon organisation",
+  "account.requisitions.purchases": "Achats",
   "account.requisitions.requisitions": "Demandes d’achats",
   "account.requisitions.requisitions.navtab.approved": "Approuvées",
   "account.requisitions.requisitions.navtab.pending": "En suspens",
diff --git a/src/styles/global/forms.scss b/src/styles/global/forms.scss
index 2d160f4276..e0b717e925 100644
--- a/src/styles/global/forms.scss
+++ b/src/styles/global/forms.scss
@@ -135,6 +135,10 @@ select {
   font-family: $font-family-regular;
 }
 
+optgroup {
+  font-style: normal;
+}
+
 // ERROR and SUCCESS
 .has-feedback {
   .form-control[type='number'] {
diff --git a/src/styles/global/tables.scss b/src/styles/global/tables.scss
index 28d92ab9c4..ed20476e1c 100644
--- a/src/styles/global/tables.scss
+++ b/src/styles/global/tables.scss
@@ -114,10 +114,8 @@
   margin-bottom: $space-default * 2;
 
   .list-item-row {
-    @media (max-width: $screen-xs-max) {
-      margin-bottom: ($space-default);
-      border-bottom: 1px solid $border-color-lighter;
-    }
+    margin-bottom: ($space-default);
+    border-bottom: 1px solid $border-color-lighter;
 
     &.list-item-row-big {
       padding-bottom: ($space-default * 0.5);
@@ -131,10 +129,6 @@
       }
     }
 
-    &:last-child {
-      border-bottom: 1px solid $border-color-lighter;
-    }
-
     .list-item {
       padding: $table-cell-padding * 0.9 $table-cell-padding * 0.7 $table-cell-padding * 0.9 0;
 
diff --git a/src/styles/pages/account/account-navigation.scss b/src/styles/pages/account/account-navigation.scss
index fe6c5c0e6d..f445f96956 100644
--- a/src/styles/pages/account/account-navigation.scss
+++ b/src/styles/pages/account/account-navigation.scss
@@ -3,57 +3,34 @@
 
 .account-navigation {
   li {
-    padding: divide($space-default * 2, 3) divide($space-default * 2, 3) ($space-default * 0.5);
     background: $color-tertiary;
-    border: $border-width-default solid $border-color-lighter;
-    border-width: 0 1px 1px;
-
-    &.collapse,
-    &.collapsing {
-      padding: 0;
-      border: none;
-    }
 
     &:hover {
       background: darken($color-tertiary, 10%) none repeat scroll 0 0;
     }
 
     &.account-nav-header {
+      padding: divide($space-default * 2, 3) divide($space-default * 2, 3) ($space-default * 0.5);
+      font-size: 16px;
+      color: $text-color-inverse;
       cursor: pointer;
-      background: $color-secondary;
-      border: $border-width-default solid $border-color-default;
+      background: $CORPORATE-PRIMARY;
     }
 
     .ng-fa-icon {
       margin-right: ($space-default * 0.5);
-      font-size: 14px;
-      color: $text-color-quaternary;
-    }
-
-    p {
-      margin: 0;
-      font-size: 16px;
-      color: $text-color-primary;
-    }
-
-    &:first-child {
-      border-width: $border-width-default;
-      border-radius: 0;
-    }
-
-    &:last-child {
-      border-radius: 0;
     }
 
     a {
       display: block;
+      padding: divide($space-default * 2, 3) divide($space-default * 2, 3) ($space-default * 0.5);
       font-size: 14px;
       color: $link-color;
     }
 
     &.active {
       background: $color-inverse;
-      border-right: none;
+      border-left: $border-width-default solid $color-tertiary;
 
       a {
         color: $text-color-primary;
@@ -61,6 +38,8 @@
     }
 
     &.account-welcome {
+      padding: divide($space-default * 2, 3) divide($space-default * 2, 3) ($space-default * 0.5);
+
       &:hover {
         background: $color-tertiary;
       }
@@ -69,21 +48,11 @@
 }
 
 .account-nav-box {
-  @media (max-width: $screen-xs-max) {
+  @media (max-width: $screen-sm-max) {
     padding-top: $space-default;
     padding-bottom: $space-default;
     margin-top: -15px;
     margin-bottom: ($space-default * 1.5);
     background: $color-tertiary;
-    border-top: $border-width-default solid lighten($border-color-default, 100%);
-  }
-
-  @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
-    padding-top: $space-default;
-    padding-bottom: $space-default;
-    margin-top: -25px;
-    margin-bottom: ($space-default * 1.5);
-    background: $color-tertiary;
-    border-top: $border-width-default solid lighten($border-color-default, 100%);
   }
 }