From 266358f0cc366d54046020245234113487ce9a5d Mon Sep 17 00:00:00 2001
From: Nino Righi <n.righi@paragon-data.de>
Date: Wed, 24 May 2023 16:33:56 +0000
Subject: [PATCH] Merged PR 1528: Responsive Design Article Search

Responsive Design Article Search
---
 angular.json                                  |   3 +
 .../src/lib/defs/breadcrumb.model.ts          |   2 +-
 .../src/lib/environment.service.ts            |   4 +-
 apps/core/toast/src/lib/toast.component.html  |   4 +-
 .../app/guards/can-activate-product.guard.ts  |   8 +-
 apps/isa-app/src/config/config.feature.json   |  10 +
 apps/isa-app/src/config/config.json           |  10 +
 apps/isa-app/src/config/config.test.json      |  10 +
 apps/isa-app/src/styles.scss                  |  22 +-
 .../src/lib/availabilities.component.scss     |   4 +-
 .../src/lib/notifications.component.scss      |   8 +-
 .../src/lib/modal-printer.component.scss      |   4 +-
 .../reorder/src/lib/reorder.component.scss    |  10 +-
 .../reviews/src/lib/reviews.component.scss    |   4 +-
 .../price-update-item.component.html          |  12 +-
 .../price-update-list.component.html          |   6 +-
 .../price-update/price-update.component.html  |   4 +-
 .../article-details.component.html            | 526 +++++++++++-------
 .../article-details.component.scss            | 348 +++---------
 .../article-details.component.ts              |  70 ++-
 .../article-recommendations.component.scss    |   9 +-
 .../article-search.component.html             |  12 -
 .../article-search.component.scss             |  16 +-
 .../article-search.component.ts               |  60 +-
 .../article-search/article-search.module.ts   |   3 +-
 .../article-search/article-search.store.ts    |  23 +-
 ...ticle-search-main-autocomplete.provider.ts |   6 +-
 .../search-filter.component.html              |  41 +-
 .../search-filter.component.scss              |  16 +-
 .../search-filter/search-filter.component.ts  | 118 +++-
 .../search-filter/search-filter.module.ts     |   6 +-
 .../search-main/search-main.component.html    |  62 ++-
 .../search-main/search-main.component.scss    |  68 +--
 .../search-main/search-main.component.ts      |  59 +-
 .../search-main/search-main.module.ts         |   5 +-
 .../search-result-item-loading.component.html |  54 +-
 .../search-result-item-loading.component.scss |  60 +-
 .../search-result-item-loading.component.ts   |  15 +-
 .../search-result-item.component.html         | 179 +++---
 .../search-result-item.component.scss         | 193 +++----
 .../search-result-item.component.ts           |  54 +-
 .../search-results.component.html             |  77 ++-
 .../search-results.component.scss             |  57 +-
 .../search-results.component.ts               | 137 ++++-
 .../search-results/search-results.module.ts   |  16 +-
 .../src/lib/page-catalog-routing.module.ts    |  68 ++-
 .../src/lib/page-catalog.component.html       |  23 +-
 .../src/lib/page-catalog.component.scss       |   2 +-
 .../catalog/src/lib/page-catalog.component.ts |  56 +-
 .../checkout-dummy.component.scss             |   6 +-
 .../checkout-review.component.scss            |  12 +-
 .../shopping-cart-item.component.scss         |  10 +-
 .../special-comment.component.scss            |   4 +-
 .../checkout-summary.component.scss           |  10 +-
 .../customer-order-details.component.ts       |  84 ++-
 .../customer-order-edit.component.ts          |  46 +-
 .../src/lib/customer-order-routing.module.ts  |  66 ++-
 ...ustomer-order-search-filter.component.html |  56 +-
 ...ustomer-order-search-filter.component.scss |   4 +-
 .../customer-order-search-filter.component.ts | 111 +++-
 .../order-branch-id-input.component.css       |   2 +-
 .../order-branch-id-input.component.ts        |  21 +-
 .../customer-order-search.component.html      |  15 +-
 .../customer-order-search.component.scss      |   2 +-
 .../customer-order-search.component.ts        |  24 +-
 .../customer-order-search.module.ts           |   2 +
 .../customer-order-search-main.component.scss |   8 +-
 .../customer-order-search-main.component.ts   |  57 +-
 .../customer-order-item.component.html        |  45 ++
 .../customer-order-item.component.scss        |   3 +
 .../customer-order-item.component.ts          | 124 +++++
 ...stomer-order-search-results.component.html |  52 +-
 ...stomer-order-search-results.component.scss |  18 +-
 ...customer-order-search-results.component.ts |  87 ++-
 .../customer-order-search-results.module.ts   |  14 +-
 .../search-results/index.ts                   |   1 +
 .../src/lib/customer-order.component.html     |  15 +
 .../src/lib/customer-order.component.ts       |   6 +
 .../lib/create-customer/create-customer.scss  |   6 +-
 .../address/address.component.scss            |   8 +-
 .../customer-card.component.scss              |   6 +-
 .../customer-data-edit.component.scss         |   6 +-
 .../customer-data.component.scss              |   2 +-
 .../customer-details.component.scss           |  24 +-
 .../customer-order-details.component.scss     |   4 +-
 .../customer-order-item-card.component.scss   |   4 +-
 .../customer-orders.component.scss            |  14 +-
 .../card-template.component.scss              |   4 +-
 .../customer-search.component.scss            |   2 +-
 .../search-filter.component.scss              |   2 +-
 .../search-main/search-main.component.scss    |   4 +-
 .../customer-result-card.component.scss       |   4 +-
 .../search-results.component.scss             |   4 +-
 .../address-selection-modal.component.scss    |  10 +-
 .../cant-add-customer-to-cart.component.scss  |   8 +-
 .../cant-select-guest-modal.component.scss    |   8 +-
 ...stomer-already-exists-modal.component.html |   2 +-
 .../customer-type-selector.component.scss     |   2 +-
 .../lib/info-card/info-card.component.html    |   4 +-
 .../src/lib/kpi-card/kpi-card.component.scss  |   2 +-
 .../products-card/product-card.component.html |   2 +-
 .../goods-in-cleanup-list.component.scss      |   8 +-
 .../goods-in-list-item.component.scss         |   8 +-
 .../goods-in-list.component.scss              |   6 +-
 .../goods-in-remission-preview.component.scss |   8 +-
 .../goods-in-reservation.component.scss       |   8 +-
 .../goods-in-search.component.scss            |   2 +-
 .../goods-in-search-main.component.scss       |   8 +-
 .../goods-in-search-results.component.scss    |   8 +-
 .../goods-out-search.component.scss           |   2 +-
 .../goods-out-search-main.component.scss      |   8 +-
 .../goods-out-search-results.component.scss   |   4 +-
 .../package-details-list-item.component.scss  |   2 +-
 .../package-details.component.html            |   2 +-
 .../package-result.component.html             |   4 +-
 .../add-product/add-product.component.html    |   4 +-
 .../create-remission.component.html           |   4 +-
 .../finish-remission.component.html           |   2 +-
 .../finish-shipping-document.component.html   |   2 +-
 .../remission-filter.component.scss           |   2 +-
 ...remission-list-item-loading.component.scss |   4 +-
 .../remission-list-item.component.html        |  14 +-
 .../remission-list-item.component.scss        |   6 +-
 .../remission-list.component.html             |   6 +-
 .../remission-list.component.scss             |   4 +-
 ...pping-document-details-item.component.html |   4 +-
 .../shipping-document-details.component.html  |   6 +-
 ...shipping-document-list-item.component.html |   2 +-
 ...shipping-document-list-item.component.scss |   2 +-
 .../shipping-document-list.component.html     |   2 +-
 .../task-info/task-info.component.scss        |   4 +-
 .../task-list/task-list-group.component.scss  |   4 +-
 .../task-searchbar.component.html             |  10 +-
 .../task-calendar-filter.component.scss       |   2 +-
 .../article-list-details.component.scss       |   2 +-
 .../article-list-modal.component.scss         |   2 +-
 .../lib/modals/info/info-modal.component.scss |   2 +-
 .../pdf-viewer-modal.component.scss           |   4 +-
 .../preinfo/preinfo-modal.component.scss      |   2 +-
 .../task-search/task-search.component.scss    |   2 +-
 .../src/lib/branch-selector.component.html    |   2 +-
 .../src/lib/branch-selector.component.scss    |  18 +-
 .../src/lib/branch-selector.component.ts      |  12 +-
 .../src/lib/filter-overlay.component.scss     |  17 +-
 .../filter-filter-group-filter.component.html |  11 +-
 .../filter-filter-group-filter.component.scss |  32 +-
 .../filter-input-group-main.component.html    |   5 +-
 .../filter-input-group-main.component.scss    |   3 +-
 .../filter-input-group-main.module.ts         |   4 +-
 .../filter/src/lib/filter.component.html      |   8 +-
 .../filter/src/lib/filter.component.scss      |   4 +-
 .../filter/src/lib/filter.component.ts        |  43 +-
 .../shared/components/filter/src/lib/index.ts |   4 +-
 .../order-by-filter.component.html            |  40 +-
 .../order-by-filter.component.scss            |  35 +-
 .../order-by-filter.component.ts              |  41 +-
 .../filter-input-chip.component.scss          |  14 +-
 .../filter-input-option-bool.component.html   |   2 +-
 .../filter-input-option-bool.component.scss   |   2 +-
 ...ter-input-option-date-range.component.scss |   6 +-
 ...r-input-option-number-range.component.scss |   5 +-
 ...lter-input-option-tri-state.component.html |   2 +-
 ...lter-input-option-tri-state.component.scss |   6 +-
 .../filter-input-options.component.html       |  19 +-
 .../filter-input-options.component.scss       |  22 +-
 .../input-text/input-text.component.html      |   2 +-
 .../input-text/input-text.component.ts        |   7 +
 .../components/filter/src/lib/tree/filter.ts  |  15 +
 ...in-out-order-details-covers.component.scss |   4 +-
 ...in-out-order-details-header.component.scss |   8 +-
 ...s-in-out-order-details-item.component.html |   2 +-
 ...s-in-out-order-details-item.component.scss |  18 +-
 ...s-in-out-order-details-tags.component.scss |   4 +-
 .../goods-in-out-order-details.component.scss |   5 +-
 .../goods-in-out-order-edit.component.scss    |  10 +-
 ...ods-in-out-order-group-item.component.scss |   2 +-
 .../goods-in-out-order-group.component.scss   |   6 +-
 .../history-log-entry.component.scss          |   4 +-
 .../src/lib/input-control.component.css       |   2 +-
 ...otification-channel-control.component.scss |   6 +-
 .../src/lib/searchbox.component.html          |   1 +
 .../src/lib/searchbox.component.scss          |   6 +-
 .../lib/purchase-options-modal.component.html |   2 +-
 .../purchase-options-tile.component.css       |   4 +-
 apps/shared/services/ng-package.json          |   6 +
 .../src/lib/base-navigation.service.ts        |  15 +
 apps/shared/services/src/lib/defs/index.ts    |   5 +
 .../src/lib/defs/navigation-details.model.ts  |   5 +
 .../src/lib/defs/outlet-locations.model.ts    |   5 +
 .../src/lib/defs/outlet-params.model.ts       |   7 +
 .../src/lib/navigation.service.spec.ts        |  16 +
 .../services/src/lib/navigation.service.ts    |  50 ++
 ...product-catalog-navigation.service.spec.ts |  15 +
 .../lib/product-catalog-navigation.service.ts | 102 ++++
 apps/shared/services/src/public-api.ts        |   8 +
 .../process-bar-item.component.ts             |  12 +-
 .../process-bar/process-bar.component.html    |   2 +-
 .../process-bar/process-bar.component.spec.ts |  24 +-
 .../lib/process-bar/process-bar.component.ts  |  18 +-
 apps/shared/shell/src/lib/shell.component.css |  10 +-
 .../shared/shell/src/lib/shell.component.html |  14 +-
 .../src/lib/side-menu/side-menu.component.css |  40 +-
 .../lib/side-menu/side-menu.component.html    |  28 +-
 .../lib/side-menu/side-menu.component.spec.ts |  33 +-
 .../src/lib/side-menu/side-menu.component.ts  |  49 +-
 .../src/lib/top-bar/top-bar.component.html    |   2 +-
 .../ui/autocomplete/src/lib/autocomplete.scss |   2 +-
 .../src/lib/branch-dropdown.component.scss    |   2 +-
 .../calendar-header.component.scss            |   2 +-
 .../src/lib/datepicker.component.html         |   2 +-
 apps/ui/dropdown/src/lib/dropdown.scss        |   8 +-
 .../range-filter/range-filter.component.scss  |   4 +-
 .../filter-filter-group-filter.component.scss |   2 +-
 .../filter-input-group-main.component.scss    |   2 +-
 .../order-by-filter.component.scss            |   2 +-
 .../filter-input-chip.component.scss          |   2 +-
 ...ter-input-option-date-range.component.scss |   2 +-
 ...r-input-option-number-range.component.scss |   2 +-
 .../filter-input-options.component.scss       |   6 +-
 .../input-text/input-text.component.html      |   2 +-
 .../input-text/input-text.component.ts        |   7 +
 .../selected-filter-options.component.scss    |   6 +-
 .../src/lib/ui-form-control.component.scss    |  18 +-
 .../src/lib/form-field.component.scss         |   2 +-
 .../error-modal/error-modal.component.scss    |   4 +-
 .../src/lib/message-modal.component.scss      |   4 +-
 apps/ui/modal/src/lib/modal.component.scss    |   4 +-
 .../prompt-modal/prompt-modal.component.scss  |   6 +-
 apps/ui/notes/src/lib/ui-notes.component.scss |   8 +-
 .../quantity-dropdown-content.component.scss  |   8 +-
 .../src/lib/quantity-dropdown.component.scss  |  16 +-
 .../content-loader.component.scss             |   2 +-
 .../skeleton-loader.component.scss            |   2 +-
 .../src/lib/next/searchbox.component.html     |   1 +
 .../ui-searchbox-autocomplete.component.scss  |   2 +-
 .../select/src/lib/ui-select.component.scss   |   8 +-
 .../switch/src/lib/ui-switch.component.scss   |   2 +-
 .../ui/tooltip/src/lib/tooltip.component.scss |   2 +-
 tailwind-plugins/typography.plugin.js         |  13 +
 tailwind.config.js                            |  22 +-
 240 files changed, 3169 insertions(+), 1716 deletions(-)
 create mode 100644 apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.html
 create mode 100644 apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.scss
 create mode 100644 apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.ts
 create mode 100644 apps/shared/services/ng-package.json
 create mode 100644 apps/shared/services/src/lib/base-navigation.service.ts
 create mode 100644 apps/shared/services/src/lib/defs/index.ts
 create mode 100644 apps/shared/services/src/lib/defs/navigation-details.model.ts
 create mode 100644 apps/shared/services/src/lib/defs/outlet-locations.model.ts
 create mode 100644 apps/shared/services/src/lib/defs/outlet-params.model.ts
 create mode 100644 apps/shared/services/src/lib/navigation.service.spec.ts
 create mode 100644 apps/shared/services/src/lib/navigation.service.ts
 create mode 100644 apps/shared/services/src/lib/product-catalog-navigation.service.spec.ts
 create mode 100644 apps/shared/services/src/lib/product-catalog-navigation.service.ts
 create mode 100644 apps/shared/services/src/public-api.ts
 create mode 100644 tailwind-plugins/typography.plugin.js

diff --git a/angular.json b/angular.json
index d7b13ee15..566c1eff8 100644
--- a/angular.json
+++ b/angular.json
@@ -1504,5 +1504,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }
\ No newline at end of file
diff --git a/apps/core/breadcrumb/src/lib/defs/breadcrumb.model.ts b/apps/core/breadcrumb/src/lib/defs/breadcrumb.model.ts
index dcafc90f0..2685bf713 100644
--- a/apps/core/breadcrumb/src/lib/defs/breadcrumb.model.ts
+++ b/apps/core/breadcrumb/src/lib/defs/breadcrumb.model.ts
@@ -22,7 +22,7 @@ export interface Breadcrumb {
   /**
    * Url
    */
-  path: string;
+  path: string | any[];
 
   /**
    * Query Parameter
diff --git a/apps/core/environment/src/lib/environment.service.ts b/apps/core/environment/src/lib/environment.service.ts
index 66c5b33f7..a8090f6be 100644
--- a/apps/core/environment/src/lib/environment.service.ts
+++ b/apps/core/environment/src/lib/environment.service.ts
@@ -3,9 +3,9 @@ import { Platform } from '@angular/cdk/platform';
 import { NativeContainerService } from 'native-container';
 import { BreakpointObserver } from '@angular/cdk/layout';
 
-const MATCH_TABLET = '(max-width: 1023px)';
+const MATCH_TABLET = '(max-width: 1024px)';
 
-const MATCH_DESKTOP_SMALL = '(min-width: 1024px and max-width: 1439px)';
+const MATCH_DESKTOP_SMALL = '(min-width: 1025px) and (max-width: 1439px)';
 
 const MATCH_DESKTOP = '(min-width: 1440px)';
 
diff --git a/apps/core/toast/src/lib/toast.component.html b/apps/core/toast/src/lib/toast.component.html
index 2a14d6ef3..d6f34927d 100644
--- a/apps/core/toast/src/lib/toast.component.html
+++ b/apps/core/toast/src/lib/toast.component.html
@@ -3,9 +3,9 @@
     <ui-icon icon="close" size="20px"></ui-icon>
   </button>
   <div class="toast-content flex flex-col justify-center items-center">
-    <h1 class="text-card-sub font-bold text-center py-3 whitespace-pre-wrap">{{ data.title }}</h1>
+    <h1 class="text-xl font-bold text-center py-3 whitespace-pre-wrap">{{ data.title }}</h1>
     <ng-container *ngIf="data.text; else templateRef">
-      <p class="block text-base overflow-y-hidden pb-3 text-center overflow-x-hidden">{{ data.text }}</p>
+      <p class="block text-p2 overflow-y-hidden pb-3 text-center overflow-x-hidden">{{ data.text }}</p>
     </ng-container>
   </div>
 </div>
diff --git a/apps/isa-app/src/app/guards/can-activate-product.guard.ts b/apps/isa-app/src/app/guards/can-activate-product.guard.ts
index f8efc83cb..07a938f1d 100644
--- a/apps/isa-app/src/app/guards/can-activate-product.guard.ts
+++ b/apps/isa-app/src/app/guards/can-activate-product.guard.ts
@@ -2,6 +2,7 @@ import { Injectable } from '@angular/core';
 import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
 import { ApplicationProcess, ApplicationService } from '@core/application';
 import { DomainCheckoutService } from '@domain/checkout';
+import { ProductCatalogNavigationService } from '@shared/services';
 import { first } from 'rxjs/operators';
 
 @Injectable({ providedIn: 'root' })
@@ -9,6 +10,7 @@ export class CanActivateProductGuard implements CanActivate {
   constructor(
     private readonly _applicationService: ApplicationService,
     private readonly _checkoutService: DomainCheckoutService,
+    private readonly _navigationService: ProductCatalogNavigationService,
     private readonly _router: Router
   ) {}
 
@@ -38,7 +40,7 @@ export class CanActivateProductGuard implements CanActivate {
     }
 
     if (!lastActivatedProcessId) {
-      await this.fromCartProcess(processes, route);
+      await this.fromCartProcess(processes);
       return false;
     } else {
       await this._router.navigate(this.getUrlFromSnapshot(route, ['/kunde', String(lastActivatedProcessId)]));
@@ -48,7 +50,7 @@ export class CanActivateProductGuard implements CanActivate {
   }
 
   // Bei offener Artikelsuche/Kundensuche und Klick auf Footer Artikelsuche
-  async fromCartProcess(processes: ApplicationProcess[], route: ActivatedRouteSnapshot) {
+  async fromCartProcess(processes: ApplicationProcess[]) {
     const newProcessId = Date.now();
     await this._applicationService.createProcess({
       id: newProcessId,
@@ -57,7 +59,7 @@ export class CanActivateProductGuard implements CanActivate {
       name: `Vorgang ${this.processNumber(processes.filter((process) => process.type === 'cart'))}`,
     });
 
-    await this._router.navigate(this.getUrlFromSnapshot(route, ['/kunde', String(newProcessId)]));
+    await this._navigationService.navigateToProductSearch({ processId: newProcessId });
   }
 
   // Bei offener Warenausgabe und Klick auf Footer Artikelsuche
diff --git a/apps/isa-app/src/config/config.feature.json b/apps/isa-app/src/config/config.feature.json
index 1368c80c3..c57541ac6 100644
--- a/apps/isa-app/src/config/config.feature.json
+++ b/apps/isa-app/src/config/config.feature.json
@@ -263,6 +263,16 @@
                 "name": "event-available",
                 "data": "M438 830 296 688l58-58 84 84 168-168 58 58-226 226ZM200 976q-33 0-56.5-23.5T120 896V336q0-33 23.5-56.5T200 256h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840 336v560q0 33-23.5 56.5T760 976H200Zm0-80h560V496H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z",
                 "viewBox": "0 96 960 960"
+            },
+            {
+                "name": "remove",
+                "data": "M200 606v-60h560v60H200Z",
+                "viewBox": "0 96 960 960"
+            },
+            {
+                "name": "add",
+                "data": "M450 856V606H200v-60h250V296h60v250h250v60H510v250h-60Z",
+                "viewBox": "0 96 960 960"
             }
         ],
         "aliases": [
diff --git a/apps/isa-app/src/config/config.json b/apps/isa-app/src/config/config.json
index f8ad5bdba..d12ee4447 100644
--- a/apps/isa-app/src/config/config.json
+++ b/apps/isa-app/src/config/config.json
@@ -264,6 +264,16 @@
                 "name": "event-available",
                 "data": "M438 830 296 688l58-58 84 84 168-168 58 58-226 226ZM200 976q-33 0-56.5-23.5T120 896V336q0-33 23.5-56.5T200 256h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840 336v560q0 33-23.5 56.5T760 976H200Zm0-80h560V496H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z",
                 "viewBox": "0 96 960 960"
+            },
+            {
+                "name": "remove",
+                "data": "M200 606v-60h560v60H200Z",
+                "viewBox": "0 96 960 960"
+            },
+            {
+                "name": "add",
+                "data": "M450 856V606H200v-60h250V296h60v250h250v60H510v250h-60Z",
+                "viewBox": "0 96 960 960"
             }
         ],
         "aliases": [
diff --git a/apps/isa-app/src/config/config.test.json b/apps/isa-app/src/config/config.test.json
index a1cb54a75..34d4f59fd 100644
--- a/apps/isa-app/src/config/config.test.json
+++ b/apps/isa-app/src/config/config.test.json
@@ -264,6 +264,16 @@
                 "name": "event-available",
                 "data": "M438 830 296 688l58-58 84 84 168-168 58 58-226 226ZM200 976q-33 0-56.5-23.5T120 896V336q0-33 23.5-56.5T200 256h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840 336v560q0 33-23.5 56.5T760 976H200Zm0-80h560V496H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Z",
                 "viewBox": "0 96 960 960"
+            },
+            {
+                "name": "remove",
+                "data": "M200 606v-60h560v60H200Z",
+                "viewBox": "0 96 960 960"
+            },
+            {
+                "name": "add",
+                "data": "M450 856V606H200v-60h250V296h60v250h250v60H510v250h-60Z",
+                "viewBox": "0 96 960 960"
             }
         ],
         "aliases": [
diff --git a/apps/isa-app/src/styles.scss b/apps/isa-app/src/styles.scss
index 62def6709..ce062a8f1 100644
--- a/apps/isa-app/src/styles.scss
+++ b/apps/isa-app/src/styles.scss
@@ -11,15 +11,21 @@
 @import './scss/customer';
 @import './scss/branch';
 
-* {
-  @apply font-sans;
-}
-
-body {
-  @apply bg-background;
-}
-
 @layer base {
+  :root {
+    font-size: 16px;
+  }
+
+  @media screen and (min-width: 1680px) {
+    :root {
+      font-size: 19px;
+    }
+  }
+
+  body {
+    @apply bg-background;
+  }
+
   ::-webkit-scrollbar {
     width: 0; // remove scrollbar space
     height: 0;
diff --git a/apps/modal/availabilities/src/lib/availabilities.component.scss b/apps/modal/availabilities/src/lib/availabilities.component.scss
index 4db655a21..6f9f0c656 100644
--- a/apps/modal/availabilities/src/lib/availabilities.component.scss
+++ b/apps/modal/availabilities/src/lib/availabilities.component.scss
@@ -3,7 +3,7 @@
 }
 
 .subtitle {
-  @apply text-center text-regular my-6;
+  @apply text-center text-p2 my-6;
 }
 
 .bold {
@@ -62,7 +62,7 @@ hr {
       @apply flex flex-row items-center;
 
       .cta-reserve {
-        @apply absolute bg-transparent text-brand text-base font-bold border-none px-1 -mr-1;
+        @apply absolute bg-transparent text-brand text-p2 font-bold border-none px-1 -mr-1;
         right: 85px;
       }
     }
diff --git a/apps/modal/notifications/src/lib/notifications.component.scss b/apps/modal/notifications/src/lib/notifications.component.scss
index 7ca5b79d1..f9915b88e 100644
--- a/apps/modal/notifications/src/lib/notifications.component.scss
+++ b/apps/modal/notifications/src/lib/notifications.component.scss
@@ -6,7 +6,7 @@ modal-notifications {
   }
 
   .notification-card {
-    @apply text-center text-xl text-inactive-branch block bg-white rounded-t-card font-bold no-underline py-4 border-none outline-none shadow-card -ml-4;
+    @apply text-center text-xl text-inactive-branch block bg-white rounded-t font-bold no-underline py-4 border-none outline-none shadow-card -ml-4;
     width: calc(100% + 2rem);
   }
 
@@ -33,7 +33,7 @@ modal-notifications {
       }
 
       h2 {
-        @apply font-bold text-2xl ml-4;
+        @apply font-bold text-h3 ml-4;
       }
     }
 
@@ -66,11 +66,11 @@ modal-notifications {
       @apply flex flex-row justify-between items-start;
 
       h1 {
-        @apply text-regular font-bold mb-2;
+        @apply text-p2 font-bold mb-2;
       }
 
       .notification-edit-cta {
-        @apply bg-transparent text-brand text-base font-bold border-none px-1 -mr-1;
+        @apply bg-transparent text-brand text-p2 font-bold border-none px-1 -mr-1;
       }
     }
   }
diff --git a/apps/modal/printer/src/lib/modal-printer.component.scss b/apps/modal/printer/src/lib/modal-printer.component.scss
index 1f54e997c..eac2b7b58 100644
--- a/apps/modal/printer/src/lib/modal-printer.component.scss
+++ b/apps/modal/printer/src/lib/modal-printer.component.scss
@@ -6,7 +6,7 @@
   }
 
   .error-message {
-    @apply text-center text-regular font-semibold text-brand;
+    @apply text-center text-p2 font-semibold text-brand;
   }
 }
 
@@ -30,7 +30,7 @@ ui-select {
   @apply mt-px-35 text-center;
 
   .print-btn {
-    @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full my-8;
+    @apply border-none outline-none bg-brand text-white font-bold text-p1 px-px-25 py-px-15 rounded-full my-8;
 
     &:disabled {
       @apply bg-inactive-branch;
diff --git a/apps/modal/reorder/src/lib/reorder.component.scss b/apps/modal/reorder/src/lib/reorder.component.scss
index 2031768c1..5f2686b0e 100644
--- a/apps/modal/reorder/src/lib/reorder.component.scss
+++ b/apps/modal/reorder/src/lib/reorder.component.scss
@@ -3,7 +3,7 @@
 }
 
 h3 {
-  @apply text-regular font-semibold text-center;
+  @apply text-p2 font-semibold text-center;
 }
 
 hr {
@@ -23,11 +23,11 @@ hr {
     @apply flex flex-col ml-5;
 
     .product-name {
-      @apply text-regular font-bold;
+      @apply text-p2 font-bold;
     }
 
     .product-format {
-      @apply mt-5 text-regular font-bold flex items-center;
+      @apply mt-5 text-p2 font-bold flex items-center;
 
       .format-icon {
         @apply mr-2;
@@ -35,11 +35,11 @@ hr {
     }
 
     .product-ean {
-      @apply text-regular font-bold;
+      @apply text-p2 font-bold;
     }
 
     .quantity {
-      @apply text-regular font-bold;
+      @apply text-p2 font-bold;
     }
   }
 }
diff --git a/apps/modal/reviews/src/lib/reviews.component.scss b/apps/modal/reviews/src/lib/reviews.component.scss
index db0831194..39e589aaa 100644
--- a/apps/modal/reviews/src/lib/reviews.component.scss
+++ b/apps/modal/reviews/src/lib/reviews.component.scss
@@ -31,12 +31,12 @@
     }
 
     .title {
-      @apply ml-5 text-regular font-bold;
+      @apply ml-5 text-p2 font-bold;
     }
 
     .btn-expand,
     .btn-collapse {
-      @apply border-none bg-transparent outline-none text-regular text-ucla-blue font-bold -mt-2;
+      @apply border-none bg-transparent outline-none text-p2 text-ucla-blue font-bold -mt-2;
 
       ui-icon {
         @apply inline mx-1 align-middle;
diff --git a/apps/page/assortment/src/lib/price-update/price-update-list/price-update-item.component.html b/apps/page/assortment/src/lib/price-update/price-update-list/price-update-item.component.html
index 07d4910f3..215be2e7a 100644
--- a/apps/page/assortment/src/lib/price-update/price-update-list/price-update-item.component.html
+++ b/apps/page/assortment/src/lib/price-update/price-update-list/price-update-item.component.html
@@ -1,8 +1,8 @@
 <div
-  class="page-price-update-item__item-header flex flex-row w-full items-center justify-between bg-[rgba(0,128,121,0.15)] mb-px-2 px-5 h-[53px] rounded-t-card"
+  class="page-price-update-item__item-header flex flex-row w-full items-center justify-between bg-[rgba(0,128,121,0.15)] mb-px-2 px-5 h-[53px] rounded-t"
 >
   <p class="page-price-update-item__item-instruction font-bold text-lg">{{ item?.task?.instruction }}</p>
-  <p class="page-price-update-item__item-due-date text-base">
+  <p class="page-price-update-item__item-due-date text-p2">
     gültig ab <span class="font-bold ml-2">{{ item?.task?.dueDate | date }}</span>
   </p>
 </div>
@@ -20,15 +20,15 @@
 
   <div class="page-price-update-item__item-details">
     <div class="page-price-update-item__item-contributors flex flex-row">
-      {{ environment.isTablet() ? (item?.product?.contributors | substr: 42) : item?.product?.contributors }}
+      {{ environment.isTablet() ? (item?.product?.contributors | substr: 38) : item?.product?.contributors }}
     </div>
 
     <div
-      class="page-price-update-item__item-title font-bold text-2xl"
+      class="page-price-update-item__item-title font-bold text-h3"
       [class.text-xl]="item?.product?.name?.length >= 35"
       [class.text-lg]="item?.product?.name?.length >= 40"
       [class.text-md]="item?.product?.name?.length >= 50"
-      [class.text-sm]="item?.product?.name?.length >= 60"
+      [class.text-p3]="item?.product?.name?.length >= 60"
       [class.text-xs]="item?.product?.name?.length >= 100"
     >
       {{ item?.product?.name }}
@@ -43,7 +43,7 @@
           src="assets/images/Icon_{{ item?.product?.format }}.svg"
           [alt]="item?.product?.formatDetail"
         />
-        {{ item?.product?.formatDetail }}
+        {{ environment.isTablet() ? (item?.product?.formatDetail | substr: 25) : item?.product?.formatDetail }}
       </div>
     </div>
 
diff --git a/apps/page/assortment/src/lib/price-update/price-update-list/price-update-list.component.html b/apps/page/assortment/src/lib/price-update/price-update-list/price-update-list.component.html
index 5df13469a..f87b88cc1 100644
--- a/apps/page/assortment/src/lib/price-update/price-update-list/price-update-list.component.html
+++ b/apps/page/assortment/src/lib/price-update/price-update-list/price-update-list.component.html
@@ -8,7 +8,7 @@
     Drucken
   </button>
   <div class="flex flex-row items-center justify-end">
-    <div *ngIf="getSelectableItems().length > 0" class="text-[#0556B4] font-bold text-sm mr-5">
+    <div *ngIf="getSelectableItems().length > 0" class="text-[#0556B4] font-bold text-p3 mr-5">
       <ng-container *ngIf="selectedItemUids$ | async; let selectedItems">
         <button class="page-price-update-list__cta-unselect-all" *ngIf="selectedItems?.length > 0" type="button" (click)="unselectAll()">
           Alle entfernen ({{ selectedItems?.length }})
@@ -18,7 +18,7 @@
         </button>
       </ng-container>
     </div>
-    <div class="page-price-update-list__items-count inline-flex flex-row items-center pr-5 text-sm">
+    <div class="page-price-update-list__items-count inline-flex flex-row items-center pr-5 text-p3">
       {{ items?.length ??
       0 }}
       Titel
@@ -26,7 +26,7 @@
   </div>
 </div>
 
-<div class="page-price-update-list__order-by h-[53px] flex flex-row items-center justify-center bg-white rounded-t-card mb-px-2">
+<div class="page-price-update-list__order-by h-[53px] flex flex-row items-center justify-center bg-white rounded-t mb-px-2">
   <ui-order-by-filter [orderBy]="orderBy$ | async" (selectedOrderByChange)="search()"> </ui-order-by-filter>
 </div>
 
diff --git a/apps/page/assortment/src/lib/price-update/price-update.component.html b/apps/page/assortment/src/lib/price-update/price-update.component.html
index 58364f1e5..9e48ad064 100644
--- a/apps/page/assortment/src/lib/price-update/price-update.component.html
+++ b/apps/page/assortment/src/lib/price-update/price-update.component.html
@@ -1,5 +1,5 @@
 <div class="flex flex-row items-center h-14 bg-white relative rounded-t font-bold shadow-lg">
-  <h3 class="text-center grow font-bold text-2xl">Preisänderung</h3>
+  <h3 class="text-center grow font-bold text-h3">Preisänderung</h3>
   <button
     (click)="filterOverlay.open()"
     class="absolute right-0 top-0 h-14 rounded px-5 text-lg bg-cadet-blue flex flex-row flex-nowrap items-center justify-center"
@@ -54,5 +54,5 @@
 </shell-filter-overlay>
 
 <ng-template #noResults>
-  <div class="bg-white text-2xl text-center pt-10 font-bold rounded-b h-[calc(100vh_-_370px)]">Keine Preisänderungen vorhanden.</div>
+  <div class="bg-white text-h3 text-center pt-10 font-bold rounded-b h-[calc(100vh_-_370px)]">Keine Preisänderungen vorhanden.</div>
 </ng-template>
diff --git a/apps/page/catalog/src/lib/article-details/article-details.component.html b/apps/page/catalog/src/lib/article-details/article-details.component.html
index c9f84344e..68691a945 100644
--- a/apps/page/catalog/src/lib/article-details/article-details.component.html
+++ b/apps/page/catalog/src/lib/article-details/article-details.component.html
@@ -1,124 +1,240 @@
 <ng-container *ngIf="!showRecommendations">
-  <div #detailsContainer class="product-card">
+  <div class="page-article-details__container px-5 relative">
     <ng-container *ngIf="store.item$ | async; let item">
-      <div class="product-details">
-        <div class="product-image">
-          <button class="image-button" (click)="showImages()">
-            <img (load)="loadImage()" [src]="item.imageId | productImage: 195:315:true" alt="product image" />
-            <ui-icon *ngIf="imageLoaded$ | async" icon="search_add" size="22px"></ui-icon>
-          </button>
+      <div class="page-article-details__product-details mb-3">
+        <div class="page-article-details__product-bookmark justify-self-end">
+          <div *ngIf="showArchivBadge$ | async" class="archiv-badge">
+            <button [uiOverlayTrigger]="archivTooltip" class="p-0 m-0 outline-none border-none bg-transparent relative -top-px-5">
+              <img src="/assets/images/bookmark_benachrichtigung_archiv.svg" alt="Archiv Badge" />
+              <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #archivTooltip [closeable]="true">
+                <ng-container *ngIf="isAvailable$ | async; else notAvailable">
+                  Archivtitel. Wird nicht mehr gedruckt. Artikel ist bestellbar, weil lieferbar.
+                </ng-container>
+                <ng-template #notAvailable>
+                  Archivtitel. Wird nicht mehr gedruckt. Nicht bestellbar.
+                </ng-template>
+              </ui-tooltip>
+            </button>
+          </div>
+          <div *ngIf="showSubscriptionBadge$ | async">
+            <button [uiOverlayTrigger]="subscribtionTooltip" class="p-0 m-0 outline-none border-none bg-transparent relative -top-px-5">
+              <img src="/assets/images/bookmark_subscription.svg" alt="Fortsetzungsartikel Badge" />
+            </button>
+            <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #subscribtionTooltip [closeable]="true"
+              >Artikel ist ein Fortsetzungsartikel,<br />
+              Artikel muss über eine Aboabteilung<br />
+              bestellt werden.
+            </ui-tooltip>
+          </div>
+          <div *ngIf="showPromotionBadge$ | async" class="promotion-badge">
+            <button [uiOverlayTrigger]="promotionTooltip" class="p-0 m-0 outline-none border-none bg-transparent relative -top-px-5">
+              <ui-icon-badge icon="gift" alt="Prämienkatalog Badge"></ui-icon-badge>
+              <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #promotionTooltip [closeable]="true">
+                Dieser Artikel befindet sich im Prämienkatalog.
+              </ui-tooltip>
+            </button>
+          </div>
+        </div>
 
-          <button (click)="showReviews()" class="recessions" *ngIf="item.reviews?.length > 0">
+        <div class="page-article-details__product-image-recessions flex flex-col items-center">
+          <div class="page-article-details__product-image">
+            <button class="border-none outline-none bg-transparent relative" (click)="showImages()">
+              <img
+                class="max-h-[19.6875rem] max-w-[12.1875rem] rounded"
+                (load)="loadImage()"
+                [src]="item.imageId | productImage: 195:315:true"
+                alt="product image"
+              />
+              <ui-icon
+                class="absolute text-[#A7B9CB] inline-block bottom-[14px] right-[18px]"
+                *ngIf="imageLoaded$ | async"
+                icon="search_add"
+                size="25px"
+              ></ui-icon>
+            </button>
+          </div>
+
+          <button
+            (click)="showReviews()"
+            class="page-article-details__product-recessions flex flex-col mt-2 items-center bg-transparent border-none outline-none"
+            *ngIf="item.reviews?.length > 0"
+          >
             <ui-stars [rating]="store.reviewRating$ | async"></ui-stars>
 
-            <div class="cta-recessions">{{ item.reviews.length }} Rezensionen</div>
+            <div class="text-p2 text-[#0556B4] font-bold">{{ item.reviews.length }} Rezensionen</div>
           </button>
         </div>
 
-        <div class="product-info">
-          <div class="row" [class.bookmark-badge-gap]="isBadgeVisible$ | async">
-            <div>
-              <a
-                *ngFor="let contributor of contributors$ | async; let last = last"
-                class="autor"
-                [routerLink]="['/kunde', applicationService.activatedProcessId, 'product', 'search', 'results']"
-                [queryParams]="{ main_qs: contributor, main_author: 'author' }"
-              >
-                {{ contributor }}{{ last ? '' : ';' }}
-              </a>
+        <div class="page-article-details__product-contributors">
+          <a
+            *ngFor="let contributor of contributors$ | async; let last = last"
+            class="text-[#0556B4] font-semibold no-underline text-p2"
+            [routerLink]="resultsPath"
+            [queryParams]="{ main_qs: contributor, main_author: 'author' }"
+          >
+            {{ contributor }}{{ last ? '' : ';' }}
+          </a>
+        </div>
+
+        <div class="page-article-details__product-print justify-self-end" [class.mt-4]="isBadgeVisible$ | async">
+          <button class="bg-transparent text-brand font-bold text-lg outline-none border-none p-0" (click)="print()">Drucken</button>
+        </div>
+
+        <div class="page-article-details__product-title text-h3 font-bold mb-6">
+          {{ item.product?.name }}
+        </div>
+
+        <div class="page-article-details__product-misc flex flex-col mb-4">
+          <div
+            class="page-article-details__product-format flex items-center font-bold text-p3"
+            *ngIf="item?.product?.format && item?.product?.formatDetail"
+          >
+            <img
+              *ngIf="item?.product?.format !== '--'"
+              class="flex mr-2 h-[1.125rem]"
+              [src]="'/assets/images/Icon_' + item.product?.format + '.svg'"
+              [alt]="item.product?.formatDetail"
+            />
+            {{ item.product?.formatDetail }}
+          </div>
+
+          <div class="page-article-details__product-volume" *ngIf="item?.product?.volume">Band/Reihe {{ item?.product?.volume }}</div>
+
+          <div class="page-article-details__product-publication">{{ publicationDate$ | async }}</div>
+        </div>
+
+        <div class="page-article-details__product-price-info flex flex-col mb-4">
+          <div
+            class="page-article-details__product-price font-bold text-xl self-end"
+            *ngIf="item.catalogAvailability?.price?.value?.value; else retailPrice"
+          >
+            {{ item.catalogAvailability?.price?.value?.value | currency: item.catalogAvailability?.price?.value?.currency:'code' }}
+          </div>
+          <ng-template #retailPrice>
+            <div
+              class="page-article-details__product-price font-bold text-xl self-end"
+              *ngIf="store.takeAwayAvailability$ | async; let takeAwayAvailability"
+            >
+              {{ takeAwayAvailability?.retailPrice?.value?.value | currency: takeAwayAvailability?.retailPrice?.value?.currency:'code' }}
             </div>
+          </ng-template>
 
-            <button class="cta-print right" (click)="print()">Drucken</button>
-          </div>
-          <div class="title">
-            {{ item.product?.name }}
+          <div class="page-article-details__product-points self-end" *ngIf="store.promotionPoints$ | async; let promotionPoints">
+            {{ promotionPoints }} Lesepunkte
           </div>
 
-          <div class="row">
-            <div>
-              <div class="format" *ngIf="item?.product?.format && item?.product?.formatDetail">
-                <img
-                  *ngIf="item?.product?.format !== '--'"
-                  class="format-icon"
-                  [src]="'/assets/images/Icon_' + item.product?.format + '.svg'"
-                  [alt]="item.product?.formatDetail"
-                />
-                {{ item.product?.formatDetail }}
+          <!-- TODO: Ticket PREISGEBUNDEN  -->
+          <div class="page-article-details__product-price-bound self-end"></div>
+        </div>
+
+        <div class="page-article-details__product-origin-infos flex flex-col mb-4">
+          <div class="page-article-details__product-manufacturer" data-name="product-manufacturer">{{ item.product?.manufacturer }}</div>
+
+          <div class="page-article-details__product-language" *ngIf="item?.product?.locale" data-name="product-language">
+            {{ item?.product?.locale }}
+          </div>
+        </div>
+
+        <div class="page-article-details__product-stock flex justify-end items-center">
+          <div class="h-5 w-16 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]" *ngIf="store.fetchingTakeAwayAvailability$ | async"></div>
+          <div
+            class="flex flex-row py-4 pl-4"
+            [uiOverlayTrigger]="tooltip"
+            [overlayTriggerDisabled]="!(stockTooltipText$ | async)"
+            *ngIf="!(store.fetchingTakeAwayAvailability$ | async)"
+          >
+            <ng-container *ngIf="store.takeAwayAvailability$ | async; let takeAwayAvailability">
+              <ui-icon class="mr-2 mb-1" icon="home" size="15px"></ui-icon>
+              <span class="font-bold text-p3">{{ takeAwayAvailability.inStock || 0 }}x</span>
+            </ng-container>
+          </div>
+        </div>
+        <ui-tooltip #tooltip yPosition="above" xPosition="after" [yOffset]="-8" [closeable]="true">
+          {{ stockTooltipText$ | async }}
+        </ui-tooltip>
+
+        <div class="page-article-details__product-ean-specs flex flex-col">
+          <div class="page-article-details__product-ean" data-name="product-ean">{{ item.product?.ean }}</div>
+
+          <div class="page-article-details__product-specs">
+            <ng-container *ngIf="item?.specs?.length > 0">
+              {{ (item?.specs)[0]?.value }}
+            </ng-container>
+          </div>
+        </div>
+
+        <div class="page-article-details__product-availabilities flex flex-row items-center justify-end mt-4">
+          <div
+            class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
+            *ngIf="store.fetchingTakeAwayAvailability$ | async; else showAvailabilityTakeAwayIcon"
+          ></div>
+          <ng-template #showAvailabilityTakeAwayIcon>
+            <div
+              *ngIf="store.isTakeAwayAvailabilityAvailable$ | async"
+              class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center"
+            >
+              <ui-icon class="mx-1" icon="shopping_bag" size="18px"> </ui-icon>
+            </div>
+          </ng-template>
+
+          <div
+            class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
+            *ngIf="store.fetchingPickUpAvailability$ | async; else showAvailabilityPickUpIcon"
+          ></div>
+          <ng-template #showAvailabilityPickUpIcon>
+            <div
+              *ngIf="store.isPickUpAvailabilityAvailable$ | async"
+              class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3"
+            >
+              <ui-icon class="mx-1" icon="box_out" size="18px"></ui-icon>
+            </div>
+          </ng-template>
+
+          <div
+            class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
+            *ngIf="store.fetchingDeliveryAvailability$ | async; else showAvailabilityDeliveryIcon"
+          ></div>
+          <ng-template #showAvailabilityDeliveryIcon>
+            <div
+              *ngIf="showDeliveryTruck$ | async"
+              class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3"
+            >
+              <ui-icon class="-mb-px-5 -mt-px-5 mx-1" icon="truck" size="30px"></ui-icon>
+            </div>
+          </ng-template>
+
+          <div
+            class="h-5 w-6 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]"
+            *ngIf="store.fetchingDeliveryB2BAvailability$ | async; else showAvailabilityDeliveryB2BIcon"
+          ></div>
+          <ng-template #showAvailabilityDeliveryB2BIcon>
+            <div
+              *ngIf="showDeliveryB2BTruck$ | async"
+              class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3"
+            >
+              <ui-icon class="-mb-px-10 -mt-px-10 mx-1" icon="truck_b2b" size="30px"> </ui-icon>
+            </div>
+          </ng-template>
+
+          <span *ngIf="store.isDownload$ | async" class="flex flex-row items-center">
+            <div class="w-[2.25rem] h-[2.25rem] bg-[#D8DFE5] rounded-[5px_5px_0px_5px] flex items-center justify-center ml-3">
+              <ui-icon class="mx-1" icon="download" size="18px"></ui-icon>
+              <span class="font-bold">Download</span>
+            </div>
+          </span>
+        </div>
+
+        <div class="page-article-details__shelf-ssc">
+          <div class="page-article-details__ssc flex justify-end my-2 font-bold text-lg">
+            <div class="w-52 h-px-20 bg-[#e6eff9] animate-[load_0.75s_linear_infinite]" *ngIf="fetchingAvailabilities$ | async"></div>
+            <ng-container *ngIf="!(fetchingAvailabilities$ | async)">
+              <div *ngIf="store.sscText$ | async; let sscText">
+                {{ sscText }}
               </div>
-              <div *ngIf="item?.product?.volume">Band/Reihe {{ item?.product?.volume }}</div>
-
-              <div>{{ publicationDate$ | async }}</div>
-            </div>
-
-            <div class="right">
-              <div class="price" *ngIf="item.catalogAvailability?.price?.value?.value; else retailPrice">
-                {{ item.catalogAvailability?.price?.value?.value | currency: item.catalogAvailability?.price?.value?.currency:'code' }}
-              </div>
-              <ng-template #retailPrice>
-                <div class="price" *ngIf="store.takeAwayAvailability$ | async; let takeAwayAvailability">
-                  {{
-                    takeAwayAvailability?.retailPrice?.value?.value | currency: takeAwayAvailability?.retailPrice?.value?.currency:'code'
-                  }}
-                </div>
-              </ng-template>
-              <div *ngIf="store.promotionPoints$ | async; let promotionPoints">{{ promotionPoints }} Lesepunkte</div>
-            </div>
+            </ng-container>
           </div>
 
-          <div class="row stock">
-            <div data-name="product-manufacturer">{{ item.product?.manufacturer }}</div>
-
-            <div class="right quantity" [uiOverlayTrigger]="tooltip" [overlayTriggerDisabled]="!(stockTooltipText$ | async)">
-              <div class="fetching small" *ngIf="store.fetchingTakeAwayAvailability$ | async"></div>
-              <ng-container *ngIf="!(store.fetchingTakeAwayAvailability$ | async)">
-                <ng-container *ngIf="store.takeAwayAvailability$ | async; let takeAwayAvailability">
-                  <ui-icon icon="home" size="22px"></ui-icon>
-                  {{ takeAwayAvailability.inStock || 0 }}x
-                </ng-container>
-              </ng-container>
-            </div>
-            <ui-tooltip #tooltip yPosition="above" xPosition="after" [yOffset]="-8" [closeable]="true">
-              {{ stockTooltipText$ | async }}
-            </ui-tooltip>
-          </div>
-          <div *ngIf="item?.product?.locale" data-name="product-language">{{ item?.product?.locale }}</div>
-
-          <div class="row">
-            <div data-name="product-ean">{{ item.product?.ean }}</div>
-            <div class="right">
-              <div class="availability-icons">
-                <div class="fetching xsmall" *ngIf="store.fetchingTakeAwayAvailability$ | async; else showAvailabilityTakeAwayIcon"></div>
-                <ng-template #showAvailabilityTakeAwayIcon>
-                  <ui-icon *ngIf="store.isTakeAwayAvailabilityAvailable$ | async" icon="shopping_bag" size="18px"> </ui-icon>
-                </ng-template>
-
-                <div class="fetching xsmall" *ngIf="store.fetchingPickUpAvailability$ | async; else showAvailabilityPickUpIcon"></div>
-                <ng-template #showAvailabilityPickUpIcon>
-                  <ui-icon *ngIf="store.isPickUpAvailabilityAvailable$ | async" icon="box_out" size="18px"></ui-icon>
-                </ng-template>
-
-                <div class="fetching xsmall" *ngIf="store.fetchingDeliveryAvailability$ | async; else showAvailabilityDeliveryIcon"></div>
-                <ng-template #showAvailabilityDeliveryIcon>
-                  <ui-icon *ngIf="showDeliveryTruck$ | async" class="truck" icon="truck" size="30px"></ui-icon>
-                </ng-template>
-
-                <div
-                  class="fetching xsmall"
-                  *ngIf="store.fetchingDeliveryB2BAvailability$ | async; else showAvailabilityDeliveryB2BIcon"
-                ></div>
-                <ng-template #showAvailabilityDeliveryB2BIcon>
-                  <ui-icon *ngIf="showDeliveryB2BTruck$ | async" class="truck_b2b" icon="truck_b2b" size="40px"> </ui-icon>
-                </ng-template>
-
-                <span *ngIf="store.isDownload$ | async" class="download-icon">
-                  <ui-icon icon="download" size="18px"></ui-icon>
-                  <span class="label">Download</span>
-                </span>
-              </div>
-            </div>
-          </div>
-
-          <div class="shelfinfo right" *ngIf="store.isDownload$ | async">
+          <div class="page-article-details__shelfinfo" *ngIf="store.isDownload$ | async">
             <ng-container
               *ngIf="
                 item?.stockInfos && item?.shelfInfos && (item?.stockInfos)[0]?.compartment && (item?.shelfInfos)[0]?.label;
@@ -145,24 +261,7 @@
               </ng-container>
             </ng-template>
           </div>
-
-          <div class="row">
-            <div class="specs">
-              <ng-container *ngIf="item?.specs?.length > 0">
-                {{ (item?.specs)[0]?.value }}
-              </ng-container>
-            </div>
-            <div class="right ssc">
-              <div class="fetching" *ngIf="fetchingAvailabilities$ | async"></div>
-              <ng-container *ngIf="!(fetchingAvailabilities$ | async)">
-                <div *ngIf="store.sscText$ | async; let sscText">
-                  {{ sscText }}
-                </div>
-              </ng-container>
-            </div>
-          </div>
-
-          <div class="shelfinfo right" *ngIf="!(store.isDownload$ | async)">
+          <div class="page-article-details__shelfinfo text-right" *ngIf="!(store.isDownload$ | async)">
             <ng-container
               *ngIf="
                 item?.stockInfos && item?.shelfInfos && (item?.stockInfos)[0]?.compartment && (item?.shelfInfos)[0]?.label;
@@ -186,109 +285,118 @@
             </ng-template>
           </div>
         </div>
+      </div>
 
-        <div class="bookmark">
-          <div *ngIf="showArchivBadge$ | async" class="archiv-badge">
-            <button [uiOverlayTrigger]="archivTooltip" class="bookmark-badge">
-              <img src="/assets/images/bookmark_benachrichtigung_archiv.svg" alt="Archiv Badge" />
-              <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #archivTooltip [closeable]="true">
-                <ng-container *ngIf="isAvailable$ | async; else notAvailable">
-                  Archivtitel. Wird nicht mehr gedruckt. Artikel ist bestellbar, weil lieferbar.
-                </ng-container>
-                <ng-template #notAvailable>
-                  Archivtitel. Wird nicht mehr gedruckt. Nicht bestellbar.
-                </ng-template>
-              </ui-tooltip>
-            </button>
-          </div>
-          <div *ngIf="showSubscriptionBadge$ | async">
-            <button [uiOverlayTrigger]="subscribtionTooltip" class="bookmark-badge">
-              <img src="/assets/images/bookmark_subscription.svg" alt="Fortsetzungsartikel Badge" />
-            </button>
-            <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #subscribtionTooltip [closeable]="true"
-              >Artikel ist ein Fortsetzungsartikel,<br />
-              Artikel muss über eine Aboabteilung<br />
-              bestellt werden.
-            </ui-tooltip>
-          </div>
-          <div *ngIf="showPromotionBadge$ | async" class="promotion-badge">
-            <button [uiOverlayTrigger]="promotionTooltip" class="bookmark-badge">
-              <ui-icon-badge icon="gift" alt="Prämienkatalog Badge"></ui-icon-badge>
-              <ui-tooltip yPosition="above" xPosition="after" [yOffset]="-11" [xOffset]="-8" #promotionTooltip [closeable]="true">
-                Dieser Artikel befindet sich im Prämienkatalog.
-              </ui-tooltip>
-            </button>
+      <div class="page-article-details__product-formats-container mt-3" *ngIf="item.family?.length > 0">
+        <hr class="bg-[#E6EFF9] border-t-2" />
+        <div class="pt-3">
+          <div class="page-article-details__product-formats">
+            <span class="mr-2">Auch verfügbar als</span>
+
+            <ui-slider [scrollDistance]="250">
+              <a
+                class="mr-4 text-[#0556B4] font-bold no-underline px-2"
+                *ngFor="let format of item.family"
+                [routerLink]="getDetailsPath(format.product.ean)"
+                [queryParamsHandling]="!(isTablet$ | async) ? 'preserve' : ''"
+              >
+                <span class="flex items-center">
+                  <img
+                    class="mr-2"
+                    *ngIf="!!format.product?.format"
+                    [src]="'/assets/images/OF_Icon_' + format.product?.format + '.svg'"
+                    alt="format icon"
+                  />
+                  {{ format.product?.formatDetail }}
+                  <span class="ml-1">{{ format.catalogAvailability?.price?.value?.value | currency: '€' }}</span>
+                </span>
+              </a>
+            </ui-slider>
           </div>
         </div>
       </div>
 
-      <div class="product-actions">
-        <button *ngIf="!(store.isDownload$ | async)" class="cta-availabilities" (click)="showAvailabilities()">
-          Vorrätig in anderer Filiale?
-        </button>
-        <button
-          class="cta-continue"
-          (click)="showPurchasingModal()"
-          [disabled]="
-            !(isAvailable$ | async) || (fetchingAvailabilities$ | async) || (item?.features && (item?.features)[0]?.key === 'PFO')
-          "
-        >
-          In den Warenkorb
-        </button>
-      </div>
+      <hr class="bg-[#E6EFF9] border-t-2 my-3" />
 
-      <hr />
-      <ng-container *ngIf="item.family?.length > 0">
-        <div class="product-formats">
-          <span class="label">Auch verfügbar als</span>
-
-          <ui-slider [scrollDistance]="250">
-            <a
-              class="product-family"
-              *ngFor="let format of item.family"
-              [routerLink]="['/kunde', applicationService.activatedProcessId, 'product', 'details', 'ean', format.product.ean]"
-            >
-              <span class="format-detail">
-                <img
-                  *ngIf="!!format.product?.format"
-                  [src]="'/assets/images/OF_Icon_' + format.product?.format + '.svg'"
-                  alt="format icon"
-                />
-                {{ format.product?.formatDetail }}
-                <span class="price">{{ format.catalogAvailability?.price?.value?.value | currency: '€' }}</span>
-              </span>
-            </a>
-          </ui-slider>
-        </div>
-
-        <hr />
-      </ng-container>
-
-      <div class="product-description" *ngIf="item.texts?.length > 0">
-        <div class="info">
+      <div
+        #description
+        class="page-article-details__product-description flex flex-col flex-grow overflow-hidden overflow-y-scroll"
+        *ngIf="item.texts?.length > 0"
+      >
+        <div class="whitespace-pre-line">
           {{ item.texts[0].value }}
         </div>
 
-        <div class="product-text">
+        <button
+          class="font-bold flex flex-row text-[#0556B4] items-center mt-2"
+          *ngIf="!showMore && item?.texts?.length > 1"
+          (click)="showMore = !showMore"
+        >
+          Mehr <ui-icon class="ml-2" size="15px" icon="arrow"></ui-icon>
+        </button>
+
+        <div *ngIf="showMore" class="page-article-details__product-description-text flex flex-col whitespace-pre-line break-words">
           <span *ngFor="let text of item.texts | slice: 1">
-            <h3 class="header">{{ text.label }}</h3>
+            <h3 class="my-4 text-p2 font-bold">{{ text.label }}</h3>
             {{ text.value }}
           </span>
-          <button class="scroll-top-cta" (click)="scrollTop()">
-            <ui-icon class="arrow" icon="arrow" size="20px"></ui-icon>
+
+          <button class="font-bold flex flex-row text-[#0556B4] items-center mt-2" (click)="showMore = !showMore">
+            <ui-icon class="transform ml-0 mr-2 rotate-180" size="15px" icon="arrow"></ui-icon> Weniger
+          </button>
+
+          <button class="page-article-details__scroll-top-cta" (click)="scrollTop(description)">
+            <ui-icon class="text-[#0556B4]" icon="arrow" size="20px"></ui-icon>
           </button>
         </div>
+
+        <div class="min-h-[6.25rem]"></div>
+      </div>
+
+      <ng-container *ngIf="!showRecommendations">
+        <div
+          *ngIf="store.item$ | async; let item"
+          class="page-article-details__actions w-full absolute text-center left-0 bottom-10 z-fixed"
+        >
+          <button
+            *ngIf="!(store.isDownload$ | async)"
+            class="text-brand border-2 border-brand bg-white font-bold text-lg px-[1.375rem] py-4 rounded-full mr-px-30"
+            (click)="showAvailabilities()"
+          >
+            Bestände in anderen Filialen
+          </button>
+          <button
+            class="text-white bg-brand border-brand font-bold text-lg px-[1.375rem] py-4 rounded-full border-none no-underline"
+            (click)="showPurchasingModal()"
+            [disabled]="
+              !(isAvailable$ | async) || (fetchingAvailabilities$ | async) || (item?.features && (item?.features)[0]?.key === 'PFO')
+            "
+          >
+            In den Warenkorb
+          </button>
+        </div>
+      </ng-container>
+
+      <div class="page-article-details__product-recommendations -mx-5">
+        <button
+          *ngIf="store.item$ | async; let item"
+          class="shadow-[#dce2e9_0px_-2px_18px_0px] sticky bottom-4 border-none outline-none left-0 right-0 flex items-center px-5 h-14 min-h-[3.5rem] bg-white w-full"
+          (click)="showRecommendations = true"
+        >
+          <span class="uppercase text-[#0556B4] font-bold text-p3">Empfehlungen</span>
+          <img class="absolute right-5 bottom-3 h-12" src="assets/images/recommendation_tag.png" alt="recommendation icon" />
+        </button>
       </div>
     </ng-container>
   </div>
-
-  <button *ngIf="store.item$ | async; let item" class="product-recommendations" (click)="showRecommendations = true">
-    <span class="label">Empfehlungen</span>
-    <img src="assets/images/recommendation_tag.png" alt="recommendation icon" />
-  </button>
 </ng-container>
 
-<div class="recommendations-overlay" @slideYAnimation *ngIf="showRecommendations">
-  <button class="product-button" (click)="showRecommendations = false">{{ (store.item$ | async)?.product?.name }}</button>
+<div class="page-article-details__recommendations-overlay absolute top-16 rounded-t" @slideYAnimation *ngIf="showRecommendations">
+  <button
+    class="h-[3.75rem] shadow-[0_-2px_24px_0_#dce2e9] flex flex-row justify-center items-center w-full text-xl bg-white text-ucla-blue font-bold border-none outline-none rounded-t"
+    (click)="showRecommendations = false"
+  >
+    {{ (store.item$ | async)?.product?.name }}
+  </button>
   <page-article-recommendations (close)="showRecommendations = false"></page-article-recommendations>
 </div>
diff --git a/apps/page/catalog/src/lib/article-details/article-details.component.scss b/apps/page/catalog/src/lib/article-details/article-details.component.scss
index f1767e77f..1101da76a 100644
--- a/apps/page/catalog/src/lib/article-details/article-details.component.scss
+++ b/apps/page/catalog/src/lib/article-details/article-details.component.scss
@@ -1,269 +1,99 @@
 :host {
-  @apply flex flex-col;
+  @apply box-border block h-[calc(100vh-16.5rem)] desktop-small:h-[calc(100vh-15.1rem)];
 }
 
-.product-card {
-  @apply flex flex-col bg-white w-full rounded-card shadow-card;
-
-  .product-details {
-    @apply flex flex-row p-5;
-
-    .bookmark {
-      @apply absolute flex;
-      top: 52px;
-      right: 25px;
-      z-index: 100;
-    }
-
-    .bookmark-badge {
-      @apply p-0 m-0 outline-none border-none bg-transparent relative;
-    }
-
-    .promotion-badge {
-      margin-top: -1px;
-    }
-
-    .bookmark-badge-gap {
-      @apply mt-px-35;
-    }
-
-    .product-image {
-      @apply flex flex-col items-center justify-start mr-5;
-
-      .recessions {
-        @apply flex flex-col items-center mt-4 bg-transparent border-none outline-none;
-
-        .cta-recessions {
-          @apply text-regular text-dark-cerulean font-bold mt-2;
-        }
-      }
-
-      .image-button {
-        @apply border-none outline-none bg-transparent relative;
-
-        ui-icon {
-          @apply absolute text-dark-cerulean inline-block;
-          bottom: 1rem;
-          right: 1rem;
-        }
-      }
-
-      img {
-        @apply rounded-xl shadow-card;
-        box-shadow: 0 0 18px 0 #b8b3b7;
-        max-height: 315px;
-        max-width: 195px;
-      }
-    }
-
-    .product-info {
-      @apply w-full;
-
-      .title {
-        @apply text-3xl font-bold mb-6;
-      }
-
-      .format,
-      .ssc,
-      .quantity {
-        @apply font-bold text-lg;
-      }
-
-      .stock {
-        min-height: 44px;
-      }
-
-      .quantity {
-        @apply flex justify-end mt-4;
-
-        ui-icon {
-          @apply mr-1 text-ucla-blue;
-        }
-      }
-
-      .format {
-        @apply flex items-center;
-
-        .format-icon {
-          @apply flex mr-2;
-          height: 18px;
-        }
-      }
-
-      .ssc {
-        @apply flex justify-end my-2;
-      }
-
-      .price {
-        @apply font-bold text-xl;
-      }
-
-      .shelfinfo {
-        @apply text-ucla-blue;
-      }
-
-      .fetching {
-        @apply w-52 h-px-20;
-        background-color: #e6eff9;
-        animation: load 0.75s linear infinite;
-      }
-
-      .xsmall {
-        @apply w-6;
-      }
-
-      .small {
-        @apply w-16;
-      }
-
-      .medium {
-        @apply w-40;
-      }
-
-      .availability-icons {
-        @apply flex flex-row items-center justify-end text-dark-cerulean mt-4;
-
-        ui-icon {
-          @apply mx-1;
-        }
-
-        .truck {
-          @apply -mb-px-5 -mt-px-5;
-        }
-
-        .truck_b2b {
-          @apply -mb-px-10 -mt-px-10;
-        }
-
-        .label {
-          @apply font-bold;
-        }
-
-        .download-icon {
-          @apply flex flex-row items-center;
-        }
-      }
-
-      .cta-print {
-        @apply bg-transparent text-brand font-bold text-xl outline-none border-none p-0;
-      }
-    }
-
-    .row {
-      @apply grid items-end;
-      grid-template-columns: auto auto;
-    }
-  }
-
-  .right {
-    @apply text-right self-start;
-  }
-
-  hr {
-    @apply bg-glitter h-1;
-  }
-
-  .product-description {
-    @apply flex flex-col flex-grow px-5 py-5;
-    min-height: calc(100vh - 769px);
-
-    .info {
-      @apply whitespace-pre-line;
-    }
-
-    .product-text {
-      @apply flex flex-col whitespace-pre-line mb-px-100 break-words;
-
-      h3 {
-        @apply my-4;
-      }
-
-      .header {
-        @apply text-regular font-bold;
-      }
-
-      .scroll-top-cta {
-        @apply flex items-center justify-center self-end border-none outline-none bg-white relative rounded p-0 mt-8 mr-4;
-        box-shadow: 0px 0px 20px 0px rgba(89, 100, 112, 0.5);
-        transform: rotate(-90deg);
-        border-radius: 100%;
-        width: 58px;
-        height: 58px;
-
-        .arrow {
-          color: #1f466c;
-        }
-      }
-    }
-  }
-
-  .product-actions {
-    @apply text-right px-5 py-4;
-
-    .cta-availabilities {
-      @apply text-brand border-none border-brand bg-white font-bold text-lg px-4 py-2 rounded-full;
-    }
-    .cta-continue {
-      @apply text-white bg-brand font-bold text-lg px-4 py-2 rounded-full border-none ml-4 no-underline;
-
-      &:disabled {
-        @apply bg-inactive-branch;
-      }
-    }
-  }
-
-  .product-formats {
-    @apply grid whitespace-nowrap items-center px-5 py-4;
-    grid-template-rows: auto;
-    grid-template-columns: auto 1fr;
-    max-width: 100%;
-
-    .label {
-      @apply mr-2;
-    }
-
-    .product-family {
-      @apply mr-4 text-active-customer font-bold no-underline px-2;
-
-      .format-detail {
-        @apply flex items-center;
-
-        img {
-          @apply mr-2;
-        }
-      }
-
-      .price {
-        @apply ml-1;
-      }
-    }
-  }
+.page-article-details__container {
+  @apply h-full w-full bg-white rounded shadow-card flex flex-col;
 }
 
-.product-recommendations {
-  @apply sticky bottom-0 border-none outline-none left-0 right-0 flex items-center px-5 h-16 bg-white w-full;
-  box-shadow: #dce2e9 0px -2px 18px 0px;
-
-  .label {
-    @apply uppercase text-active-customer font-bold text-small;
-  }
-
-  img {
-    @apply absolute right-5 bottom-5 h-12;
-  }
+.page-article-details__product-details {
+  @apply grid gap-x-5;
+  grid-template-columns: max-content auto;
+  grid-template-rows: 2.1875rem repeat(11, minmax(auto, max-content));
+  grid-template-areas:
+    '. . . bookmark'
+    'image contributors contributors contributors'
+    'image title title print'
+    'image title title .'
+    'image misc misc price'
+    'image misc misc price'
+    'image origin origin stock'
+    'image origin origin stock'
+    'image specs availabilities availabilities'
+    'image specs ssc ssc'
+    'image . ssc ssc'
+    'image . ssc ssc';
 }
 
-.recommendations-overlay {
-  @apply absolute w-full top-0 rounded-t-card;
-  top: 56px;
+.page-article-details__product-bookmark {
+  grid-area: bookmark;
+}
 
-  .product-button {
-    @apply flex flex-row justify-center items-center w-full text-xl bg-white text-ucla-blue font-bold border-none outline-none rounded-t-card;
-    box-shadow: 0 -2px 24px 0 #dce2e9;
-    height: 60px;
+.page-article-details__product-image-recessions {
+  grid-area: image;
+}
+
+.page-article-details__product-contributors {
+  grid-area: contributors;
+}
+
+.page-article-details__product-print {
+  grid-area: print;
+}
+
+.page-article-details__product-title {
+  grid-area: title;
+}
+
+.page-article-details__product-misc {
+  grid-area: misc;
+}
+
+.page-article-details__product-price-info {
+  grid-area: price;
+}
+
+.page-article-details__product-origin-infos {
+  grid-area: origin;
+}
+
+.page-article-details__product-stock {
+  grid-area: stock;
+}
+
+.page-article-details__product-ean-specs {
+  grid-area: specs;
+}
+
+.page-article-details__product-availabilities {
+  grid-area: availabilities;
+}
+
+.page-article-details__shelf-ssc {
+  grid-area: ssc;
+}
+
+.page-article-details__product-description-text {
+  word-break: break-word;
+}
+
+.page-article-details__product-formats {
+  @apply grid whitespace-nowrap items-center max-w-full;
+  grid-template-rows: auto;
+  grid-template-columns: auto 1fr;
+}
+
+.page-article-details__scroll-top-cta {
+  @apply flex items-center justify-center self-end border-none outline-none bg-white relative rounded p-0 mt-8 mr-4;
+  box-shadow: 0px 0px 20px 0px rgba(89, 100, 112, 0.5);
+  transform: rotate(-90deg);
+  border-radius: 100%;
+  width: 58px;
+  height: 58px;
+}
+
+.page-article-details__actions {
+  &:disabled {
+    @apply bg-inactive-branch;
   }
 }
-
-.autor {
-  @apply text-active-customer font-bold no-underline;
-}
diff --git a/apps/page/catalog/src/lib/article-details/article-details.component.ts b/apps/page/catalog/src/lib/article-details/article-details.component.ts
index 0498d07bf..94c58b5ef 100644
--- a/apps/page/catalog/src/lib/article-details/article-details.component.ts
+++ b/apps/page/catalog/src/lib/article-details/article-details.component.ts
@@ -8,7 +8,7 @@ import { BranchDTO } from '@swagger/checkout';
 import { UiModalService } from '@ui/modal';
 import { ModalReviewsComponent } from '@modal/reviews';
 import { BehaviorSubject, combineLatest, Subscription } from 'rxjs';
-import { debounceTime, filter, first, map, shareReplay, switchMap } from 'rxjs/operators';
+import { debounceTime, filter, first, map, shareReplay, switchMap, withLatestFrom } from 'rxjs/operators';
 import { ArticleDetailsStore } from './article-details.store';
 import { ModalImagesComponent } from 'apps/modal/images/src/public-api';
 import { ProductImageService } from 'apps/cdn/product-image/src/public-api';
@@ -20,6 +20,8 @@ import { DateAdapter } from '@ui/common';
 import { DatePipe } from '@angular/common';
 import { PurchaseOptionsModalService } from '@shared/modals/purchase-options-modal';
 import { DomainAvailabilityService } from '@domain/availability';
+import { EnvironmentService } from '@core/environment';
+import { ProductCatalogNavigationService } from '@shared/services';
 
 @Component({
   selector: 'page-article-details',
@@ -113,6 +115,19 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
     shareReplay(1)
   );
 
+  get isTablet$() {
+    return this._environment.matchTablet$.pipe(
+      map((state) => state?.matches),
+      shareReplay()
+    );
+  }
+
+  get resultsPath() {
+    return this._navigationService.getArticleSearchResultsPath(this.applicationService.activatedProcessId);
+  }
+
+  showMore: boolean = false;
+
   constructor(
     public readonly applicationService: ApplicationService,
     private activatedRoute: ActivatedRoute,
@@ -126,6 +141,8 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
     public elementRef: ElementRef,
     private _purchaseOptionsModalService: PurchaseOptionsModalService,
     private _availability: DomainAvailabilityService,
+    private _navigationService: ProductCatalogNavigationService,
+    private _environment: EnvironmentService,
     private _router: Router
   ) {}
 
@@ -161,16 +178,30 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
       filter((f) => !!f)
     );
 
+    const more$ = this.activatedRoute.params.subscribe(() => (this.showMore = false));
+
     this.subscriptions.add(processIdSubscription);
+    this.subscriptions.add(more$);
     this.subscriptions.add(this.store.loadItemById(id$));
     this.subscriptions.add(this.store.loadItemByEan(ean$));
-    this.subscriptions.add(this.store.item$.pipe(filter((item) => !!item)).subscribe((item) => this.updateBreadcrumb(item)));
+    this.subscriptions.add(
+      this.store.item$
+        .pipe(
+          withLatestFrom(this.isTablet$),
+          filter(([item, isTablet]) => !!item)
+        )
+        .subscribe(([item, isTablet]) => (isTablet ? this.updateBreadcrumb(item) : this.updateBreadcrumbDesktop(item)))
+    );
   }
 
   ngOnDestroy() {
     this.subscriptions.unsubscribe();
   }
 
+  getDetailsPath(ean?: string) {
+    return this._navigationService.getArticleDetailsPath({ processId: this.applicationService.activatedProcessId, ean });
+  }
+
   async updateBreadcrumb(item: ItemDTO) {
     const crumbs = await this.breadcrumb
       .getBreadcrumbsByKeyAndTags$(this.applicationService.activatedProcessId, ['catalog', 'details', `${item.id}`])
@@ -184,13 +215,41 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
     this.breadcrumb.addBreadcrumbIfNotExists({
       key: this.applicationService.activatedProcessId,
       name: item.product?.name,
-      path: `/kunde/${this.applicationService.activatedProcessId}/product/details/${item.id}`,
+      path: this._navigationService.getArticleDetailsPath({ processId: this.applicationService.activatedProcessId, itemId: item.id }),
       params: this.activatedRoute.snapshot.queryParams,
       tags: ['catalog', 'details', `${item.id}`],
       section: 'customer',
     });
   }
 
+  async updateBreadcrumbDesktop(item: ItemDTO) {
+    const crumbs = await this.breadcrumb
+      .getBreadcrumbsByKeyAndTags$(this.applicationService.activatedProcessId, ['catalog', 'details'])
+      .pipe(first())
+      .toPromise();
+
+    if (crumbs.length === 0) {
+      this.breadcrumb.addBreadcrumbIfNotExists({
+        key: this.applicationService.activatedProcessId,
+        name: item.product?.name,
+        path: this._navigationService.getArticleDetailsPath({ processId: this.applicationService.activatedProcessId, itemId: item.id }),
+        params: this.activatedRoute.snapshot.queryParams,
+        tags: ['catalog', 'details', `${item.id}`],
+        section: 'customer',
+      });
+    } else {
+      const crumb = crumbs.find((_) => true);
+      this.breadcrumb.patchBreadcrumb(crumb.id, {
+        key: this.applicationService.activatedProcessId,
+        name: item.product?.name,
+        path: this._navigationService.getArticleDetailsPath({ processId: this.applicationService.activatedProcessId, itemId: item.id }),
+        params: this.activatedRoute.snapshot.queryParams,
+        tags: ['catalog', 'details', `${item.id}`],
+        section: 'customer',
+      });
+    }
+  }
+
   async print() {
     const item = await this.store.item$.pipe(first()).toPromise();
     this.uiModal.open({
@@ -302,9 +361,8 @@ export class ArticleDetailsComponent implements OnInit, OnDestroy {
     }
   }
 
-  scrollTop() {
-    const element = this.elementRef.nativeElement.closest('.main-wrapper');
-    element?.scrollTo({ top: 0, behavior: 'smooth' });
+  scrollTop(div: HTMLDivElement) {
+    div?.scrollTo({ top: 0, behavior: 'smooth' });
   }
 
   loadImage() {
diff --git a/apps/page/catalog/src/lib/article-details/recommendations/article-recommendations.component.scss b/apps/page/catalog/src/lib/article-details/recommendations/article-recommendations.component.scss
index 84066c8c8..d75030829 100644
--- a/apps/page/catalog/src/lib/article-details/recommendations/article-recommendations.component.scss
+++ b/apps/page/catalog/src/lib/article-details/recommendations/article-recommendations.component.scss
@@ -1,7 +1,6 @@
 :host {
-  @apply flex flex-col bg-white;
+  @apply flex flex-col bg-white h-[calc(100vh-16.5rem-3.75rem)] desktop-small:h-[calc(100vh-15.1rem-3.75rem)];
   box-shadow: 0px -2px 24px 0px #dce2e9;
-  height: calc(100vh - 342px);
 }
 
 h1 {
@@ -18,7 +17,7 @@ p {
   @apply mt-10;
 
   .label {
-    @apply flex flex-row items-center uppercase text-dark-cerulean font-bold text-sm ml-6;
+    @apply flex flex-row items-center uppercase text-dark-cerulean font-bold text-p3 ml-6;
 
     ui-icon {
       @apply mr-2;
@@ -26,7 +25,7 @@ p {
   }
 
   .empty-message {
-    @apply flex justify-center text-cta-l mt-12;
+    @apply flex justify-center text-p1 mt-12;
   }
 
   .article {
@@ -40,7 +39,7 @@ p {
     }
 
     .format {
-      @apply text-regular mt-2;
+      @apply text-p2 mt-2;
     }
 
     .price {
diff --git a/apps/page/catalog/src/lib/article-search/article-search.component.html b/apps/page/catalog/src/lib/article-search/article-search.component.html
index f1542cfc1..0680b43f9 100644
--- a/apps/page/catalog/src/lib/article-search/article-search.component.html
+++ b/apps/page/catalog/src/lib/article-search/article-search.component.html
@@ -1,13 +1 @@
-<button class="filter" [class.active]="hasFilter$ | async" (click)="filterActive$.next(true); shellFilterOverlay.open()">
-  <ui-icon size="20px" icon="filter_alit"></ui-icon>
-  <span class="label">Filter</span>
-</button>
-
 <router-outlet></router-outlet>
-
-<shell-filter-overlay #shellFilterOverlay>
-  <page-article-search-filter
-    *ngIf="filterActive$ | async"
-    (close)="filterActive$.next(false); shellFilterOverlay.close()"
-  ></page-article-search-filter>
-</shell-filter-overlay>
diff --git a/apps/page/catalog/src/lib/article-search/article-search.component.scss b/apps/page/catalog/src/lib/article-search/article-search.component.scss
index 980e55b37..94c80264c 100644
--- a/apps/page/catalog/src/lib/article-search/article-search.component.scss
+++ b/apps/page/catalog/src/lib/article-search/article-search.component.scss
@@ -1,17 +1,3 @@
 :host {
-  @apply flex flex-col w-full box-content relative;
-}
-
-.filter {
-  @apply font-sans flex self-end items-center mb-4 font-bold bg-wild-blue-yonder border-0 text-regular py-px-8 px-px-15 rounded-filter justify-center z-sticky;
-  width: 106px;
-  min-width: 106px;
-
-  .label {
-    @apply ml-px-5;
-  }
-
-  &.active {
-    @apply bg-active-customer text-white ml-px-5;
-  }
+  @apply flex flex-col w-full h-[calc(100vh-16.5rem)] desktop-small:h-[calc(100vh-15.1rem)] box-content relative;
 }
diff --git a/apps/page/catalog/src/lib/article-search/article-search.component.ts b/apps/page/catalog/src/lib/article-search/article-search.component.ts
index 596b74f4f..8518e227a 100644
--- a/apps/page/catalog/src/lib/article-search/article-search.component.ts
+++ b/apps/page/catalog/src/lib/article-search/article-search.component.ts
@@ -1,13 +1,15 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
-import { UiFilterAutocompleteProvider } from '@ui/filter';
-import { isEqual } from 'lodash';
-import { BehaviorSubject, Observable, Subject } from 'rxjs';
-import { filter, first, map, takeUntil, withLatestFrom } from 'rxjs/operators';
+import { Observable, Subject } from 'rxjs';
+import { map, takeUntil, withLatestFrom } from 'rxjs/operators';
 import { ArticleSearchService } from './article-search.store';
 import { FocusSearchboxEvent } from './focus-searchbox.event';
 import { ArticleSearchMainAutocompleteProvider } from './providers';
+import { ProductCatalogNavigationService } from '@shared/services';
+import { FilterAutocompleteProvider } from 'apps/shared/components/filter/src/lib';
+import { isEqual } from 'lodash';
+import { EnvironmentService } from '@core/environment';
 
 @Component({
   selector: 'page-article-search',
@@ -15,9 +17,8 @@ import { ArticleSearchMainAutocompleteProvider } from './providers';
   styleUrls: ['article-search.component.scss'],
   providers: [
     FocusSearchboxEvent,
-    ArticleSearchService,
     {
-      provide: UiFilterAutocompleteProvider,
+      provide: FilterAutocompleteProvider,
       useClass: ArticleSearchMainAutocompleteProvider,
       multi: true,
     },
@@ -28,22 +29,16 @@ export class ArticleSearchComponent implements OnInit, OnDestroy {
   private _onDestroy$ = new Subject();
   private _processId$: Observable<number>;
 
-  initialFilter$ = this._articleSearch.filter$.pipe(
-    filter((filter) => !!filter),
-    first()
-  );
+  get isTablet() {
+    return this._environmentService.matchTablet();
+  }
 
-  hasFilter$ = this._articleSearch.filter$.pipe(
-    withLatestFrom(this.initialFilter$),
-    map(([filter, initialFilter]) => !isEqual(filter?.getQueryParams(), initialFilter?.getQueryParams()))
-  );
-
-  filterActive$ = new BehaviorSubject<boolean>(false);
   constructor(
     private _breadcrumb: BreadcrumbService,
-    private _router: Router,
     private _articleSearch: ArticleSearchService,
-    private _activatedRoute: ActivatedRoute
+    private _activatedRoute: ActivatedRoute,
+    private _navigationService: ProductCatalogNavigationService,
+    private _environmentService: EnvironmentService
   ) {}
 
   ngOnInit() {
@@ -60,12 +55,17 @@ export class ArticleSearchComponent implements OnInit, OnDestroy {
       .pipe(takeUntil(this._onDestroy$), withLatestFrom(this._processId$))
       .subscribe(([state, processId]) => {
         if (state.searchState === '') {
+          const params = state.filter.getQueryParams();
           if (state.hits === 1) {
             const item = state.items.find((f) => f);
-            this._router.navigate(['/kunde', processId, 'product', 'details', item.id]);
+            this._navigationService.navigateToDetails({
+              processId,
+              itemId: item.id,
+              queryParams: this.isTablet ? undefined : params,
+            });
           } else {
-            const params = state.filter.getQueryParams();
-            this._router.navigate(['/kunde', processId, 'product', 'search', 'results'], {
+            this._navigationService.navigateToResults({
+              processId,
               queryParams: params,
             });
           }
@@ -73,6 +73,20 @@ export class ArticleSearchComponent implements OnInit, OnDestroy {
       });
   }
 
+  cleanupQueryParams(params: Record<string, string> = {}) {
+    const clean = { ...params };
+
+    for (const key in clean) {
+      if (Object.prototype.hasOwnProperty.call(clean, key)) {
+        if (clean[key] == undefined) {
+          delete clean[key];
+        }
+      }
+    }
+
+    return clean;
+  }
+
   initProcessId() {
     this._processId$ = this._activatedRoute.parent.data.pipe(map((data) => Number(data.processId)));
   }
@@ -96,7 +110,7 @@ export class ArticleSearchComponent implements OnInit, OnDestroy {
     await this._breadcrumb.addBreadcrumbIfNotExists({
       key: processId,
       name: 'Artikelsuche',
-      path: `/kunde/${processId}/product`,
+      path: this._navigationService.getArticleSearchBasePath(processId),
       params: queryParams,
       tags: ['catalog', 'main'],
       section: 'customer',
diff --git a/apps/page/catalog/src/lib/article-search/article-search.module.ts b/apps/page/catalog/src/lib/article-search/article-search.module.ts
index 1176f1ea1..e6a3a3ec6 100644
--- a/apps/page/catalog/src/lib/article-search/article-search.module.ts
+++ b/apps/page/catalog/src/lib/article-search/article-search.module.ts
@@ -6,12 +6,13 @@ import { ArticleSearchComponent } from './article-search.component';
 import { SearchResultsModule } from './search-results/search-results.module';
 import { SearchMainModule } from './search-main/search-main.module';
 import { SearchFilterModule } from './search-filter/search-filter.module';
+import { ArticleSearchService } from './article-search.store';
 import { SharedFilterOverlayModule } from '@shared/components/filter-overlay';
 
 @NgModule({
   imports: [CommonModule, RouterModule, UiIconModule, SearchResultsModule, SearchMainModule, SearchFilterModule, SharedFilterOverlayModule],
   exports: [ArticleSearchComponent],
   declarations: [ArticleSearchComponent],
-  providers: [],
+  providers: [ArticleSearchService],
 })
 export class ArticleSearchModule {}
diff --git a/apps/page/catalog/src/lib/article-search/article-search.store.ts b/apps/page/catalog/src/lib/article-search/article-search.store.ts
index b25c6d95c..52840eff8 100644
--- a/apps/page/catalog/src/lib/article-search/article-search.store.ts
+++ b/apps/page/catalog/src/lib/article-search/article-search.store.ts
@@ -3,24 +3,31 @@ import { DomainCatalogService } from '@domain/catalog';
 import { Observable, Subject } from 'rxjs';
 import { debounceTime, map, switchMap, tap, withLatestFrom } from 'rxjs/operators';
 
-import { UiFilter } from '@ui/filter';
 import { ComponentStore, tapResponse } from '@ngrx/component-store';
-import { ItemDTO, QueryTokenDTO } from '@swagger/cat';
+import { ItemDTO, QueryTokenDTO, UISettingsDTO } from '@swagger/cat';
 import { ApplicationService } from '@core/application';
 import { BranchDTO } from '@swagger/checkout';
+import { Filter } from 'apps/shared/components/filter/src/lib';
 
 export interface ArticleSearchState {
   processId: number;
-  filter: UiFilter;
+  filter: Filter;
   searchState: '' | 'fetching' | 'empty' | 'error';
   items: ItemDTO[];
   hits: number;
   selectedBranch: BranchDTO;
   selectedItemIds: number[];
+  defaultSettings?: UISettingsDTO;
 }
 
 @Injectable()
 export class ArticleSearchService extends ComponentStore<ArticleSearchState> {
+  get defaultSettings() {
+    return this.get((s) => s.defaultSettings);
+  }
+
+  readonly defaultSettings$ = this.select((s) => s.defaultSettings);
+
   get processId() {
     return this.get((s) => s.processId);
   }
@@ -100,19 +107,19 @@ export class ArticleSearchService extends ComponentStore<ArticleSearchState> {
   }
 
   async setDefaultFilter(defaultQueryParams?: Record<string, string>) {
-    const filter = await this.catalog
-      .getSettings()
-      .pipe(map((settings) => UiFilter.create(settings)))
-      .toPromise();
+    const defaultSettings = await this.catalog.getSettings().toPromise();
+
+    const filter = Filter.create(defaultSettings);
 
     if (!!defaultQueryParams) {
       filter?.fromQueryParams(defaultQueryParams);
     }
 
     this.setFilter(filter);
+    this.patchState({ defaultSettings });
   }
 
-  setFilter(filter: UiFilter) {
+  setFilter(filter: Filter) {
     this.patchState({ filter });
   }
 
diff --git a/apps/page/catalog/src/lib/article-search/providers/article-search-main-autocomplete.provider.ts b/apps/page/catalog/src/lib/article-search/providers/article-search-main-autocomplete.provider.ts
index eea7a73d6..4b115d2d2 100644
--- a/apps/page/catalog/src/lib/article-search/providers/article-search-main-autocomplete.provider.ts
+++ b/apps/page/catalog/src/lib/article-search/providers/article-search-main-autocomplete.provider.ts
@@ -1,18 +1,18 @@
 import { Injectable } from '@angular/core';
 import { DomainCatalogService } from '@domain/catalog';
-import { UiFilterAutocomplete, UiFilterAutocompleteProvider, UiInput } from '@ui/filter';
+import { FilterAutocomplete, FilterAutocompleteProvider, FilterInput } from 'apps/shared/components/filter/src/lib';
 import { Observable, of } from 'rxjs';
 import { catchError, map } from 'rxjs/operators';
 
 @Injectable()
-export class ArticleSearchMainAutocompleteProvider extends UiFilterAutocompleteProvider {
+export class ArticleSearchMainAutocompleteProvider extends FilterAutocompleteProvider {
   for = 'catalog';
 
   constructor(private domainCatalogSearch: DomainCatalogService) {
     super();
   }
 
-  complete(input: UiInput): Observable<UiFilterAutocomplete[]> {
+  complete(input: FilterInput): Observable<FilterAutocomplete[]> {
     const token = input?.parent?.parent?.getQueryToken();
     const filter = token?.filter;
     const type = Object.keys(token?.input).join(';');
diff --git a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.html b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.html
index e75b5db3a..ec6b26809 100644
--- a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.html
+++ b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.html
@@ -1,30 +1,33 @@
 <ng-container *ngIf="filter$ | async; let filter">
   <div class="catalog-search-filter-content">
-    <button class="btn-close" type="button" (click)="close.emit()">
-      <ui-icon icon="close" size="20px"></ui-icon>
-    </button>
+    <div class="w-full flex flex-row justify-end items-center">
+      <button (click)="clearFilter(filter)" class="text-[#0556B4] mr-[0.8125rem]">Alle Filter entfernen</button>
+      <button class="text-black p-4 outline-none border-none bg-transparent" type="button" (click)="closeFilter()">
+        <ui-icon icon="close" size="15px"></ui-icon>
+      </button>
+    </div>
 
-    <div class="catalog-search-filter-content-main">
-      <h1 class="text-3xl font-bold text-center py-4">Filter</h1>
-      <ui-filter
+    <div class="catalog-search-filter-content-main -mt-12">
+      <h1 class="text-h3 text-[1.625rem] font-bold text-center pt-6 pb-10">Filter</h1>
+      <shared-filter
         [filter]="filter"
         [loading]="fetching$ | async"
         (search)="applyFilter(filter)"
         [hint]="searchboxHint$ | async"
-        resizeInputOptionsToElement="page-article-search-filter .cta-wrapper"
         [scanner]="true"
-      ></ui-filter>
+      ></shared-filter>
+    </div>
+
+    <div class="cta-wrapper">
+      <button class="cta-reset-filter" (click)="resetFilter(filter)" [disabled]="fetching$ | async">
+        Filter zurücksetzen
+      </button>
+
+      <button class="cta-apply-filter" (click)="applyFilter(filter)" [disabled]="fetching$ | async">
+        <ui-spinner [show]="fetching$ | async">
+          Filter anwenden
+        </ui-spinner>
+      </button>
     </div>
   </div>
-  <div class="cta-wrapper">
-    <button class="cta-reset-filter" (click)="resetFilter(filter)" [disabled]="fetching$ | async">
-      Filter zurücksetzen
-    </button>
-
-    <button class="cta-apply-filter" (click)="applyFilter(filter)" [disabled]="fetching$ | async">
-      <ui-spinner [show]="fetching$ | async">
-        Filter anwenden
-      </ui-spinner>
-    </button>
-  </div>
 </ng-container>
diff --git a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.scss b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.scss
index 68abb540e..8c1de6264 100644
--- a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.scss
+++ b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.scss
@@ -1,15 +1,11 @@
 :host {
-  @apply block bg-glitter;
+  @apply block bg-white h-[calc(100vh-16.5rem)] desktop-small:h-[calc(100vh-15.1rem)];
 }
 
 .catalog-search-filter-content {
   @apply relative mx-auto p-4;
 }
 
-.btn-close {
-  @apply absolute text-cool-grey top-3 p-4 right-4 outline-none border-none bg-transparent;
-}
-
 .catalog-search-filter-content-main {
   h1.title {
     @apply text-center;
@@ -17,14 +13,12 @@
 }
 
 .cta-wrapper {
-  @apply fixed bottom-8 whitespace-nowrap;
-  left: 50%;
-  transform: translateX(-50%);
+  @apply text-center whitespace-nowrap absolute bottom-8 left-0 w-full;
 }
 
 .cta-reset-filter,
 .cta-apply-filter {
-  @apply text-lg font-bold px-6 py-3 rounded-full border-solid border-2 border-brand outline-none mx-2;
+  @apply text-lg font-bold px-6 py-[0.85rem] rounded-full border-solid border-2 border-brand outline-none mx-2;
 
   &:disabled {
     @apply bg-inactive-branch cursor-not-allowed border-none  text-white;
@@ -38,3 +32,7 @@
 .cta-apply-filter {
   @apply text-white bg-brand;
 }
+
+::ng-deep page-article-search-filter shared-filter shared-filter-input-group-main {
+  @apply desktop:hidden px-16;
+}
diff --git a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts
index aac38df2b..637508576 100644
--- a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts
+++ b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts
@@ -1,8 +1,13 @@
-import { ChangeDetectionStrategy, Component, EventEmitter, OnInit, Output, ViewChild } from '@angular/core';
-import { UiFilter, UiFilterComponent } from '@ui/filter';
-import { Observable } from 'rxjs';
-import { map, take } from 'rxjs/operators';
+import { ChangeDetectionStrategy, Component, EventEmitter, OnDestroy, OnInit, Output, ViewChild } from '@angular/core';
+import { ApplicationService } from '@core/application';
+import { EnvironmentService } from '@core/environment';
+import { Observable, Subject } from 'rxjs';
+import { first, map, takeUntil, withLatestFrom } from 'rxjs/operators';
 import { ArticleSearchService } from '../article-search.store';
+import { ActivatedRoute } from '@angular/router';
+import { ProductCatalogNavigationService } from '@shared/services';
+import { Filter, FilterComponent } from 'apps/shared/components/filter/src/lib';
+import { BreadcrumbService } from '@core/breadcrumb';
 
 @Component({
   selector: 'page-article-search-filter',
@@ -10,51 +15,104 @@ import { ArticleSearchService } from '../article-search.store';
   styleUrls: ['search-filter.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ArticleSearchFilterComponent implements OnInit {
+export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
   @Output()
   close = new EventEmitter();
 
+  _processId$ = this._activatedRoute.parent.data.pipe(map((data) => Number(data.processId)));
+
   fetching$: Observable<boolean>;
 
-  filter$: Observable<UiFilter>;
+  filter$: Observable<Filter>;
 
   searchboxHint$ = this.articleSearch.searchboxHint$;
 
-  @ViewChild(UiFilterComponent, { static: false })
-  uiFilterComponent: UiFilterComponent;
+  @ViewChild(FilterComponent, { static: false })
+  uiFilterComponent: FilterComponent;
 
-  constructor(private articleSearch: ArticleSearchService) {}
+  get isTablet() {
+    return this._environment.matchTablet();
+  }
+
+  private _onDestroy$ = new Subject();
+
+  constructor(
+    private articleSearch: ArticleSearchService,
+    private _environment: EnvironmentService,
+    private _activatedRoute: ActivatedRoute,
+    public application: ApplicationService,
+    private _navigationService: ProductCatalogNavigationService,
+    private _breadcrumb: BreadcrumbService
+  ) {}
 
   ngOnInit() {
     this.fetching$ = this.articleSearch.fetching$;
-    this.filter$ = this.articleSearch.filter$.pipe(
-      map((filter) => UiFilter.create(filter))
-      // tap((filter) =>
-      //   filter.fromQueryParams({
-      //     main_qs: 'harry potter',
-      //     filter_format: 'eb;!hc',
-      //     filter_dbhwgr: '110;121',
-      //     main_author: 'author',
-      //     filter_region: '9780*|9781*;97884*',
-      //     'filter_reading-age': '1-10',
-      //     main_stock: '1-',
-      //   })
-      // )
-    );
+    this.filter$ = this.articleSearch.filter$.pipe(map((filter) => Filter.create(filter)));
   }
 
-  applyFilter(value: UiFilter) {
+  ngOnDestroy(): void {
+    this._onDestroy$.next();
+    this._onDestroy$.complete();
+  }
+
+  async closeFilter(): Promise<void> {
+    const processId = await this._processId$.pipe(first()).toPromise();
+    const itemId = this._navigationService.getOutletParams(this._activatedRoute)?.right?.id;
+
+    if (this.isTablet) {
+      return this.closeFilterTablet(processId);
+    }
+
+    if (!itemId) {
+      if (this._navigationService.getOutletLocations(this._activatedRoute)?.left === 'search') {
+        return await this._navigationService.navigateToProductSearch({ processId, queryParamsHandling: 'preserve' });
+      }
+      return await this._navigationService.navigateToResults({ processId, queryParamsHandling: 'preserve' });
+    } else {
+      return await this._navigationService.navigateToDetails({ processId, itemId, queryParamsHandling: 'preserve' });
+    }
+  }
+
+  async closeFilterTablet(processId: number): Promise<void> {
+    const latestBreadcrumb = await this._breadcrumb.getLastActivatedBreadcrumbByKey$(processId).pipe(first()).toPromise();
+    if (latestBreadcrumb?.tags?.find((tag) => tag === 'results')) {
+      return await this._navigationService.navigateToResults({ processId, queryParamsHandling: 'preserve' });
+    } else {
+      return await this._navigationService.navigateToProductSearch({ processId, queryParamsHandling: 'preserve' });
+    }
+  }
+
+  applyFilter(value: Filter) {
     this.uiFilterComponent?.cancelAutocomplete();
     this.articleSearch.setFilter(value);
     this.articleSearch.search({ clear: true });
-    this.articleSearch.searchCompleted.pipe(take(1)).subscribe((s) => {
-      if (s.searchState === '') {
-        this.close.emit();
-      }
-    });
+    this.articleSearch.searchCompleted
+      .pipe(takeUntil(this._onDestroy$), withLatestFrom(this._processId$))
+      .subscribe(([state, processId]) => {
+        if (state.searchState === '') {
+          const params = state.filter.getQueryParams();
+          if (state.hits === 1 && this.isTablet) {
+            const item = state.items.find((f) => f);
+            this._navigationService.navigateToDetails({
+              processId,
+              itemId: item.id,
+              queryParams: this.isTablet ? undefined : params,
+            });
+          } else if (this.isTablet) {
+            this._navigationService.navigateToResults({
+              processId,
+              queryParams: params,
+            });
+          }
+        }
+      });
   }
 
-  resetFilter(value: UiFilter) {
+  clearFilter(value: Filter) {
+    value.unselectAll();
+  }
+
+  resetFilter(value: Filter) {
     const queryParams = { main_qs: value?.getQueryParams()?.main_qs || '' };
     this.articleSearch.setDefaultFilter(queryParams);
   }
diff --git a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.module.ts b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.module.ts
index 3a4ee2555..a08408c56 100644
--- a/apps/page/catalog/src/lib/article-search/search-filter/search-filter.module.ts
+++ b/apps/page/catalog/src/lib/article-search/search-filter/search-filter.module.ts
@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { UiFilterNextModule } from '@ui/filter';
+import { RouterModule } from '@angular/router';
 import { UiIconModule } from '@ui/icon';
 import { UiSpinnerModule } from '@ui/spinner';
-
 import { ArticleSearchFilterComponent } from './search-filter.component';
+import { FilterNextModule } from 'apps/shared/components/filter/src/lib';
 
 @NgModule({
-  imports: [CommonModule, UiFilterNextModule, UiIconModule, UiSpinnerModule],
+  imports: [CommonModule, RouterModule, FilterNextModule, UiIconModule, UiSpinnerModule],
   exports: [ArticleSearchFilterComponent],
   declarations: [ArticleSearchFilterComponent],
   providers: [],
diff --git a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.html b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.html
index ca7255e02..5a5d4ccab 100644
--- a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.html
+++ b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.html
@@ -1,26 +1,50 @@
-<div class="card-search-article">
-  <h1 class="title">Artikelsuche</h1>
-  <p class="info">
+<div class="bg-white rounded py-10 px-4 text-center shadow-[0_-2px_24px_0_#dce2e9] h-full">
+  <h1 class="text-h3 text-[1.625rem] font-bold mb-[0.375rem]">Artikelsuche</h1>
+  <p class="text-lg mb-10">
     Welchen Artikel suchen Sie?
   </p>
   <ng-container *ngIf="filter$ | async; let filter">
-    <ui-filter-filter-group-main [inputGroup]="filter?.filter | group: 'main'"></ui-filter-filter-group-main>
-    <ui-filter-input-group-main
-      [hint]="searchboxHint$ | async"
-      [loading]="fetching$ | async"
-      [inputGroup]="filter?.input | group: 'main'"
-      (search)="search(filter)"
-      [showDescription]="false"
-      [scanner]="true"
-    ></ui-filter-input-group-main>
+    <shared-filter-filter-group-main
+      class="mb-8 w-full"
+      *ngIf="!(isDesktop$ | async)"
+      [inputGroup]="filter?.filter | group: 'main'"
+    ></shared-filter-filter-group-main>
+    <div class="flex flex-row px-12 justify-center desktop:px-0">
+      <shared-filter-input-group-main
+        class="block w-full mr-3 desktop:mx-auto"
+        [hint]="searchboxHint$ | async"
+        [loading]="fetching$ | async"
+        [inputGroup]="filter?.input | group: 'main'"
+        (search)="search(filter)"
+        [showDescription]="false"
+        [scanner]="true"
+      ></shared-filter-input-group-main>
+      <a
+        *ngIf="!(isDesktop$ | async)"
+        class="page-search-main__filter w-[6.75rem] h-14 rounded font-bold px-5 mb-4 text-lg bg-[#AEB7C1] flex flex-row flex-nowrap items-center justify-center"
+        [class.active]="hasFilter$ | async"
+        [routerLink]="filterRoute"
+        queryParamsHandling="preserve"
+      >
+        <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+        Filter
+      </a>
+    </div>
 
-    <div class="recent-searches-wrapper">
-      <h3 class="recent-searches-header">Deine letzten Suchanfragen</h3>
-      <ul>
-        <li class="recent-searches-items" *ngFor="let recentQuery of history$ | async">
-          <button (click)="setQueryHistory(filter, recentQuery.friendlyName)">
-            <ui-icon icon="search" size="15px"></ui-icon>
-            <p>{{ recentQuery.friendlyName }}</p>
+    <div class="flex flex-col items-start ml-12 desktop:ml-8 py-6 bg-white">
+      <h3 class="text-p3 font-bold mb-3">Deine letzten Suchanfragen</h3>
+      <ul class="flex flex-col justify-start overflow-hidden items-start m-0 p-0 bg-white w-full">
+        <li class="list-none pb-3" *ngFor="let recentQuery of history$ | async">
+          <button
+            class="flex flex-row items-center outline-none border-none bg-white text-black text-p2 m-0 p-0"
+            (click)="setQueryHistory(filter, recentQuery.friendlyName)"
+          >
+            <ui-icon
+              class="flex w-8 h-8 justify-center items-center mr-3 rounded-full text-black bg-[#edeff0]"
+              icon="search"
+              size="0.875rem"
+            ></ui-icon>
+            <p class="m-0 p-0 whitespace-nowrap overflow-hidden overflow-ellipsis max-w-[25rem]">{{ recentQuery.friendlyName }}</p>
           </button>
         </li>
       </ul>
diff --git a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.scss b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.scss
index 0f4b0e794..6e647e668 100644
--- a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.scss
+++ b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.scss
@@ -1,71 +1,13 @@
 :host {
-  @apply flex flex-col box-border;
+  @apply flex flex-col box-border h-full;
 }
 
-.title {
-  @apply text-page-heading font-bold;
-}
-
-.info {
-  @apply text-2xl mt-1 mb-px-30;
-}
-
-.filter-chips {
-  @apply flex flex-row justify-center;
-}
-
-.card-search-article {
-  @apply bg-white rounded p-4 text-center;
-
-  box-shadow: 0 -2px 24px 0 #dce2e9;
-}
-
-.card-search-article {
-  min-height: calc(100vh - 380px);
-}
-
-ui-filter-filter-group-main {
-  @apply mb-8 w-full;
+.page-search-main__filter {
+  &.active {
+    @apply bg-[#596470] text-white ml-px-5;
+  }
 }
 
 ::ng-deep page-article-search-main ui-filter-filter-group-main .ui-filter-chip:not(.selected) {
   @apply bg-glitter;
 }
-
-ui-filter-input-group-main {
-  @apply block mx-auto;
-  max-width: 600px;
-}
-
-.recent-searches-wrapper {
-  @apply flex flex-col mx-auto items-start py-6 bg-white;
-  width: 50%;
-  z-index: 0;
-
-  .recent-searches-header {
-    @apply text-sm font-bold mb-4;
-  }
-
-  ul {
-    @apply flex flex-col justify-start overflow-hidden items-start m-0 p-0 bg-white w-full;
-    z-index: 0;
-
-    .recent-searches-items {
-      @apply list-none pb-px-15;
-
-      button {
-        @apply flex flex-row items-center outline-none border-none bg-white text-black text-base m-0 p-0;
-
-        ui-icon {
-          @apply flex w-px-35 h-px-35 justify-center items-center mr-3 rounded-full text-black;
-          background-color: #e6eff9;
-        }
-
-        p {
-          @apply m-0 p-0 whitespace-nowrap overflow-hidden overflow-ellipsis;
-          max-width: 400px;
-        }
-      }
-    }
-  }
-}
diff --git a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts
index 0f42ef09f..18ff8cd50 100644
--- a/apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts
+++ b/apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts
@@ -3,11 +3,13 @@ import { ActivatedRoute } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { ApplicationService } from '@core/application';
 import { DomainCatalogService } from '@domain/catalog';
-import { UiFilter, UiFilterInputGroupMainComponent } from '@ui/filter';
 import { combineLatest, NEVER, Subscription } from 'rxjs';
-import { catchError, debounceTime, first, switchMap } from 'rxjs/operators';
+import { catchError, debounceTime, first, switchMap, map, shareReplay } from 'rxjs/operators';
 import { ArticleSearchService } from '../article-search.store';
 import { isEqual } from 'lodash';
+import { EnvironmentService } from '@core/environment';
+import { Filter, FilterInputGroupMainComponent } from 'apps/shared/components/filter/src/lib';
+import { ProductCatalogNavigationService } from '@shared/services';
 
 @Component({
   selector: 'page-article-search-main',
@@ -26,15 +28,39 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
 
   subscriptions = new Subscription();
 
-  @ViewChild(UiFilterInputGroupMainComponent, { static: false })
-  uiInputGroupMain: UiFilterInputGroupMainComponent;
+  hasFilter$ = combineLatest([this.searchService.filter$, this.searchService.defaultSettings$]).pipe(
+    map(([filter, defaultFilter]) => {
+      const filterQueryParams = filter?.getQueryParams();
+      return !isEqual(this.resetQueryParamsQueryAndOrderBy(filterQueryParams), Filter.create(defaultFilter).getQueryParams());
+    })
+  );
+
+  @ViewChild(FilterInputGroupMainComponent, { static: false })
+  sharedFilterInputGroupMain: FilterInputGroupMainComponent;
+
+  get isDesktop$() {
+    return this._environment.matchDesktop$.pipe(
+      map((state) => state?.matches),
+      shareReplay()
+    );
+  }
+
+  get filterRoute() {
+    const itemId = this._navigationService?.getOutletParams(this.route)?.right?.id;
+    return this._navigationService.getArticleSearchResultsAndFilterPath({
+      processId: this.application.activatedProcessId,
+      itemId,
+    });
+  }
 
   constructor(
     private searchService: ArticleSearchService,
     private catalog: DomainCatalogService,
     private route: ActivatedRoute,
     private application: ApplicationService,
-    private breadcrumb: BreadcrumbService
+    private breadcrumb: BreadcrumbService,
+    private _environment: EnvironmentService,
+    private _navigationService: ProductCatalogNavigationService
   ) {}
 
   ngOnInit() {
@@ -44,7 +70,7 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
         .subscribe(async ([processId, queryParams]) => {
           const processChanged = processId !== this.searchService.processId;
 
-          if (!(this.searchService.filter instanceof UiFilter)) {
+          if (!(this.searchService.filter instanceof Filter)) {
             await this.searchService.setDefaultFilter();
           }
 
@@ -57,6 +83,7 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
           const cleanQueryParams = this.cleanupQueryParams(queryParams);
 
           if (!isEqual(cleanQueryParams, this.cleanupQueryParams(this.searchService.filter.getQueryParams()))) {
+            // Reset Filter on Product Search Shell Navigation click
             await this.searchService.setDefaultFilter(queryParams);
           }
 
@@ -85,16 +112,30 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
     this.updateBreadcrumb(this.searchService.processId, this.searchService.filter.getQueryParams());
   }
 
-  search(filter: UiFilter) {
-    this.uiInputGroupMain.cancelAutocomplete();
+  search(filter: Filter) {
+    this.sharedFilterInputGroupMain.cancelAutocomplete();
     this.searchService.setFilter(filter);
     this.searchService.search({ clear: true });
   }
 
-  setQueryHistory(filter: UiFilter, query: string) {
+  setQueryHistory(filter: Filter, query: string) {
     filter.fromQueryParams({ main_qs: query });
   }
 
+  resetQueryParamsQueryAndOrderBy(params: Record<string, string> = {}) {
+    const clean = { ...params };
+
+    for (const key in clean) {
+      if (key === 'main_qs' || key?.includes('order_by')) {
+        clean[key] = undefined;
+      } else if (key?.includes('order_by')) {
+        delete clean[key];
+      }
+    }
+
+    return clean;
+  }
+
   cleanupQueryParams(params: Record<string, string> = {}) {
     const clean = { ...params };
 
diff --git a/apps/page/catalog/src/lib/article-search/search-main/search-main.module.ts b/apps/page/catalog/src/lib/article-search/search-main/search-main.module.ts
index b3309153e..a5a6d3a59 100644
--- a/apps/page/catalog/src/lib/article-search/search-main/search-main.module.ts
+++ b/apps/page/catalog/src/lib/article-search/search-main/search-main.module.ts
@@ -1,11 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { UiFilterNextModule } from '@ui/filter';
 import { UiIconModule } from '@ui/icon';
 import { ArticleSearchMainComponent } from './search-main.component';
+import { FilterNextModule } from 'apps/shared/components/filter/src/lib';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, UiFilterNextModule],
+  imports: [CommonModule, RouterModule, UiIconModule, FilterNextModule],
   exports: [ArticleSearchMainComponent],
   declarations: [ArticleSearchMainComponent],
   providers: [],
diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.html b/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.html
index 3b3031c06..190ccf673 100644
--- a/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.html
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.html
@@ -1,17 +1,43 @@
-<div class="thumbnail animation"></div>
-<div class="col">
-  <div class="author animation"></div>
-  <div class="row">
-    <div class="title animation"></div>
-    <div class="price animation"></div>
+<ng-container *ngIf="!(mainOutletActive$ | async); else mainOutlet">
+  <div class="bg-ucla-blue rounded w-[4.375rem] h-[5.625rem] animate-[load_1s_linear_infinite]"></div>
+  <div class="flex flex-col flex-grow">
+    <div class="h-4 bg-ucla-blue ml-4 mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+    <div class="flex flex-row justify-between flex-grow">
+      <div class="h-6 bg-ucla-blue ml-4 w-[12.5rem] animate-[load_1s_linear_infinite]"></div>
+      <div class="h-6 bg-ucla-blue ml-4 w-[4.6875rem] animate-[load_1s_linear_infinite]"></div>
+    </div>
+    <div class="flex-grow"></div>
+    <div class="flex flex-row justify-between flex-grow">
+      <div class="h-4 bg-ucla-blue ml-4 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+      <div class="h-4 bg-ucla-blue ml-4 w-[3.125rem] animate-[load_1s_linear_infinite]"></div>
+    </div>
+    <div class="flex flex-row justify-between flex-grow">
+      <div class="h-4 bg-ucla-blue ml-4 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+      <div class="h-4 bg-ucla-blue ml-4 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+    </div>
   </div>
-  <div class="space"></div>
-  <div class="row">
-    <div class="category animation"></div>
-    <div class="stock animation"></div>
+</ng-container>
+
+<ng-template #mainOutlet>
+  <div class="bg-ucla-blue rounded w-[3rem] h-[4.125rem] animate-[load_1s_linear_infinite]"></div>
+  <div class="flex flex-col ml-4 w-[30%]">
+    <div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+    <div class="h-6 bg-ucla-blue mb-2 w-[12.5rem] animate-[load_1s_linear_infinite]"></div>
+    <div class="h-6 bg-ucla-blue w-[12.5rem] animate-[load_1s_linear_infinite]"></div>
   </div>
-  <div class="row">
-    <div class="manufacturer animation"></div>
-    <div class="ava animation"></div>
+  <div class="flex flex-col ml-14 w-[30%]">
+    <div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+    <div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+    <div class="h-4 bg-ucla-blue w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
   </div>
-</div>
+  <div class="flex flex-col ml-10 w-[20%]">
+    <div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+    <div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+    <div class="h-4 bg-ucla-blue w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+  </div>
+  <div class="flex flex-col ml-2 w-[20%] items-end">
+    <div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+    <div class="h-4 bg-ucla-blue mb-2 w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+    <div class="h-4 bg-ucla-blue w-[7.8125rem] animate-[load_1s_linear_infinite]"></div>
+  </div>
+</ng-template>
diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.scss b/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.scss
index ae87be8c4..68c26a24d 100644
--- a/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.scss
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.scss
@@ -1,61 +1,3 @@
 :host {
-  @apply flex flex-row rounded-card bg-white mb-2 p-4;
-  height: 187px;
-}
-
-.thumbnail {
-  width: 70px;
-  height: 90px;
-  @apply bg-ucla-blue rounded-card;
-}
-
-.space {
-  @apply flex-grow;
-}
-
-.col {
-  @apply flex flex-col flex-grow;
-}
-
-.row {
-  @apply flex flex-row justify-between flex-grow;
-}
-
-.author {
-  width: 150px;
-  @apply h-4 bg-ucla-blue ml-4 mb-2;
-}
-
-.title {
-  width: 300px;
-  @apply h-6 bg-ucla-blue ml-4;
-}
-
-.price {
-  width: 100px;
-  @apply h-6 bg-ucla-blue ml-4;
-}
-
-.category {
-  width: 200px;
-  @apply h-4 bg-ucla-blue ml-4;
-}
-
-.manufacturer {
-  width: 200px;
-  @apply h-4 bg-ucla-blue ml-4;
-}
-
-.stock {
-  width: 75px;
-  @apply h-4 bg-ucla-blue ml-4;
-}
-
-.ava {
-  width: 150px;
-  @apply h-4 bg-ucla-blue ml-4;
-}
-
-.animation {
-  animation: load 1s linear infinite;
+  @apply flex flex-row rounded bg-white mb-2 p-4 w-full h-[212px] desktop-small:h-[181px];
 }
diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.ts b/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.ts
index a6684f60f..284bbb9b5 100644
--- a/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.ts
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-result-item-loading.component.ts
@@ -1,4 +1,7 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, HostBinding } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { ProductCatalogNavigationService } from '@shared/services';
+import { shareReplay } from 'rxjs/operators';
 
 @Component({
   selector: 'page-search-result-item-loading',
@@ -7,5 +10,13 @@ import { Component, ChangeDetectionStrategy } from '@angular/core';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class SearchResultItemLoadingComponent {
-  constructor() {}
+  get mainOutletActive$() {
+    return this._navigationService?.mainOutletActive$(this._activatedRoute).pipe(shareReplay());
+  }
+
+  constructor(private _navigationService: ProductCatalogNavigationService, private _activatedRoute: ActivatedRoute) {}
+
+  @HostBinding('style') get class() {
+    return this._navigationService.mainOutletActive(this._activatedRoute) ? { height: '6.125rem' } : '';
+  }
 }
diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html b/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html
index f6ac5bc17..b61b9cc47 100644
--- a/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.html
@@ -1,81 +1,122 @@
-<a class="product-list-result-content" [routerLink]="['/kunde', applicationService.activatedProcessId, 'product', 'details', item?.id]">
-  <div class="item-thumbnail">
-    <img loading="lazy" *ngIf="item?.imageId | thumbnailUrl; let thumbnailUrl" [src]="thumbnailUrl" [alt]="item?.product?.name" />
-  </div>
-
-  <div class="item-contributors">
-    <a
-      *ngFor="let contributor of contributors; let last = last"
-      [routerLink]="['/kunde', applicationService.activatedProcessId, 'product', 'search', 'results']"
-      [queryParams]="{ main_qs: contributor, main_author: 'author' }"
-      (click)="$event?.stopPropagation()"
-    >
-      {{ contributor }}{{ last ? '' : ';' }}
-    </a>
+<a
+  class="page-search-result-item__item-card hover p-5 desktop-small:px-4 desktop-small:py-[0.625rem] h-[13.25rem] desktop-small:h-[11.3125rem] bg-white border border-solid border-transparent rounded"
+  [class.page-search-result-item__item-card-main]="mainOutletActive$ | async"
+  [routerLink]="detailsPath"
+  [routerLinkActive]="!isTablet && !(mainOutletActive$ | async) ? 'active' : ''"
+  [queryParamsHandling]="!isTablet ? 'preserve' : ''"
+>
+  <div class="page-search-result-item__item-thumbnail text-center mr-4 w-[50px] h-[79px]">
+    <img
+      class="page-search-result-item__item-image w-[50px] h-[79px]"
+      loading="lazy"
+      *ngIf="item?.imageId | thumbnailUrl; let thumbnailUrl"
+      [src]="thumbnailUrl"
+      [alt]="item?.product?.name"
+    />
   </div>
 
   <div
-    class="item-title"
-    [class.xl]="item?.product?.name?.length >= 35"
-    [class.lg]="item?.product?.name?.length >= 40"
-    [class.md]="item?.product?.name?.length >= 50"
-    [class.sm]="item?.product?.name?.length >= 60"
-    [class.xs]="item?.product?.name?.length >= 100"
+    class="page-search-result-item__item-grid-container"
+    [class.page-search-result-item__item-grid-container-main]="mainOutletActive$ | async"
   >
-    {{ item?.product?.name }}
-  </div>
+    <div
+      class="page-search-result-item__item-contributors desktop-small:text-p3 font-bold text-[#0556B4] text-ellipsis overflow-hidden max-w-[24rem] whitespace-nowrap"
+    >
+      <a
+        *ngFor="let contributor of contributors; let last = last"
+        [routerLink]="resultsPath"
+        [queryParams]="{ main_qs: contributor, main_author: 'author' }"
+        (click)="$event?.stopPropagation()"
+      >
+        {{ contributor }}{{ last ? '' : ';' }}
+      </a>
+    </div>
 
-  <div class="item-price">
-    {{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR':'code' }}
-  </div>
+    <div
+      class="page-search-result-item__item-title font-bold text-h3"
+      [class.text-xl]="item?.product?.name?.length >= 35 && isTablet"
+      [class.text-lg]="item?.product?.name?.length >= 40 && isTablet"
+      [class.text-md]="item?.product?.name?.length >= 50 && isTablet"
+      [class.text-p3]="item?.product?.name?.length >= 60 || !isTablet"
+      [class.text-xs]="item?.product?.name?.length >= 100 || (!isTablet && item?.product?.name?.length >= 70)"
+    >
+      {{ item?.product?.name }}
+    </div>
 
-  <div *ngIf="selectable" class="item-data-selector">
-    <ui-select-bullet [ngModel]="selected" (ngModelChange)="setSelected($event)"></ui-select-bullet>
-  </div>
-
-  <div class="item-stock z-dropdown" [uiOverlayTrigger]="tooltip" [overlayTriggerDisabled]="!(stockTooltipText$ | async)">
-    <ng-container *ngIf="isOrderBranch$ | async">
-      <div class="flex flex-row items-center justify-between">
-        <ui-icon icon="home" size="1em"></ui-icon>
-        <span
-          *ngIf="inStock$ | async; let stock"
-          [class.skeleton]="stock.inStock === undefined"
-          class="min-w-[1rem] text-right inline-block"
-          >{{ stock?.inStock }}</span
-        >
-        <span>x</span>
+    <div class="page-search-result-item__item-format desktop-small:text-p3">
+      <div *ngIf="item?.product?.format && item?.product?.formatDetail" class="font-bold flex flex-row">
+        <img
+          class="mr-3"
+          *ngIf="item?.product?.format !== '--'"
+          loading="lazy"
+          src="assets/images/Icon_{{ item?.product?.format }}.svg"
+          [alt]="item?.product?.formatDetail"
+        />
+        {{ item?.product?.formatDetail | substr: 25 }}
       </div>
-    </ng-container>
-    <ng-container *ngIf="!(isOrderBranch$ | async)">
-      <div class="flex flex-row items-center justify-between z-dropdown">
-        <ui-icon class="block" icon="home" size="1em"></ui-icon>
-        <span class="min-w-[1rem] text-center inline-block">-</span>
-        <span>x</span>
-      </div>
-    </ng-container>
-  </div>
-  <ui-tooltip #tooltip yPosition="above" xPosition="after" [yOffset]="-8" [closeable]="true">
-    {{ stockTooltipText$ | async }}
-  </ui-tooltip>
-  <!-- <div class="item-stock"><ui-icon icon="home" size="1em"></ui-icon> {{ item?.stockInfos | stockInfos }} x</div> -->
+    </div>
 
-  <div class="item-ssc" [class.xs]="item?.catalogAvailability?.sscText?.length >= 60">
-    {{ item?.catalogAvailability?.ssc }} - {{ item?.catalogAvailability?.sscText }}
-  </div>
+    <div class="page-search-result-item__item-manufacturer desktop-small:text-p3">
+      {{ item?.product?.manufacturer | substr: 18 }} | {{ item?.product?.ean }}
+    </div>
 
-  <div class="item-format" *ngIf="item?.product?.format && item?.product?.formatDetail">
-    <img
-      *ngIf="item?.product?.format !== '--'"
-      loading="lazy"
-      src="assets/images/Icon_{{ item?.product?.format }}.svg"
-      [alt]="item?.product?.formatDetail"
-    />
-    {{ item?.product?.formatDetail }}
-  </div>
+    <div class="page-search-result-item__item-misc desktop-small:text-p3">
+      {{ item?.product?.volume }} <span *ngIf="item?.product?.volume && item?.product?.publicationDate">|</span>
+      {{ publicationDate }}
+    </div>
 
-  <div class="item-misc">
-    {{ item?.product?.manufacturer | substr: 18 }} | {{ item?.product?.ean }} <br />
-    {{ item?.product?.volume }} <span *ngIf="item?.product?.volume && item?.product?.publicationDate">|</span>
-    {{ publicationDate }}
+    <div class="page-search-result-item__item-price desktop-small:text-p3 font-bold justify-self-end">
+      {{ item?.catalogAvailability?.price?.value?.value | currency: 'EUR':'code' }}
+    </div>
+
+    <div class="page-search-result-item__item-select-bullet justify-self-end">
+      <input
+        *ngIf="selectable"
+        (click)="$event.stopPropagation()"
+        [ngModel]="selected$ | async"
+        (ngModelChange)="setSelected()"
+        class="isa-select-bullet"
+        type="checkbox"
+      />
+    </div>
+
+    <div
+      class="page-search-result-item__item-stock desktop-small:text-p3 font-bold z-dropdown justify-self-start"
+      [class.justify-self-end]="!(mainOutletActive$ | async)"
+      [uiOverlayTrigger]="tooltip"
+      [overlayTriggerDisabled]="!(stockTooltipText$ | async)"
+    >
+      <ng-container *ngIf="isOrderBranch$ | async">
+        <div class="flex flex-row items-center justify-between">
+          <ui-icon icon="home" size="1em"></ui-icon>
+          <span
+            *ngIf="inStock$ | async; let stock"
+            [class.skeleton]="stock.inStock === undefined"
+            class="min-w-[1rem] text-right inline-block"
+            >{{ stock?.inStock }}</span
+          >
+          <span>x</span>
+        </div>
+      </ng-container>
+      <ng-container *ngIf="!(isOrderBranch$ | async)">
+        <div class="flex flex-row items-center justify-between z-dropdown">
+          <ui-icon class="block" icon="home" size="1em"></ui-icon>
+          <span class="min-w-[1rem] text-center inline-block">-</span>
+          <span>x</span>
+        </div>
+      </ng-container>
+    </div>
+    <ui-tooltip #tooltip yPosition="above" xPosition="after" [yOffset]="-8" [closeable]="true">
+      {{ stockTooltipText$ | async }}
+    </ui-tooltip>
+
+    <div
+      class="page-search-result-item__item-ssc desktop-small:text-p3 justify-self-start"
+      [class.justify-self-end]="!(mainOutletActive$ | async)"
+      [class.xs]="item?.catalogAvailability?.sscText?.length >= 60"
+    >
+      <strong>{{ item?.catalogAvailability?.ssc }}</strong> -
+      {{ !isTablet ? item?.catalogAvailability?.sscText : (item?.catalogAvailability?.sscText | substr: 18) }}
+    </div>
   </div>
 </a>
diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss b/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss
index dbfbcedd3..4142b0a40 100644
--- a/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.scss
@@ -1,113 +1,90 @@
-.product-list-result-content {
-  @apply text-black no-underline grid;
-  grid-template-columns: 102px 50% auto;
-  grid-template-rows: auto;
+:host {
+  @apply flex flex-col w-full h-[13.25rem] desktop-small:h-[11.3125rem];
+}
+
+.page-search-result-item__item-card {
+  @apply grid grid-flow-col;
+  grid-template-columns: 3.9375rem auto;
+  box-shadow: 0px 0px 10px rgba(220, 226, 233, 0.5);
+}
+
+.page-search-result-item__item-grid-container {
+  @apply grid grid-flow-row gap-[0.375rem];
   grid-template-areas:
-    'item-thumbnail item-contributors item-contributors'
-    'item-thumbnail item-title item-price'
-    'item-thumbnail item-title item-data-selector'
-    'item-thumbnail item-format item-stock'
-    'item-thumbnail item-misc item-ssc';
+    'contributors contributors contributors'
+    'title title price'
+    'title title price'
+    'title title select'
+    'format format select'
+    'manufacturer manufacturer stock'
+    'misc ssc ssc';
 }
 
-.item-thumbnail {
-  grid-area: item-thumbnail;
-  width: 70px;
-  @apply mr-8;
-  img {
-    max-width: 100%;
-    max-height: 150px;
-    @apply rounded-card shadow-cta;
-  }
-}
-
-.item-contributors {
-  grid-area: item-contributors;
-  height: 22px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  max-width: 600px;
-  white-space: nowrap;
-
-  a {
-    @apply text-active-customer font-bold no-underline;
-  }
-}
-
-.item-title {
-  grid-area: item-title;
-  @apply font-bold text-2xl;
-  height: 64px;
-  max-height: 64px;
-}
-
-.item-title.xl {
-  @apply font-bold text-xl;
-}
-
-.item-title.lg {
-  @apply font-bold text-lg;
-}
-
-.item-title.md {
-  @apply font-bold text-base;
-}
-
-.item-title.sm {
-  @apply font-bold text-sm;
-}
-
-.item-title.xs {
-  @apply font-bold text-xs;
-}
-
-.item-price {
-  grid-area: item-price;
-  @apply font-bold text-xl text-right;
-}
-
-.item-format {
-  grid-area: item-format;
-  @apply flex flex-row items-center font-bold text-lg whitespace-nowrap;
-
-  img {
-    @apply mr-2;
-  }
-}
-
-.item-stock {
-  grid-area: item-stock;
-  @apply flex flex-row justify-end items-baseline font-bold text-lg;
-
-  ui-icon {
-    @apply text-active-customer mr-2;
-  }
-}
-
-.item-misc {
-  grid-area: item-misc;
-}
-
-.item-ssc {
-  grid-area: item-ssc;
-  @apply font-bold text-right;
-}
-
-.item-ssc.xs {
-  @apply font-bold text-xs;
-}
-
-.item-data-selector {
-  @apply w-full flex justify-end;
-  grid-area: item-data-selector;
-}
-
-ui-select-bullet {
-  @apply p-4 -m-4 z-dropdown;
-}
-
-@media (min-width: 1025px) {
-  .item-contributors {
-    max-width: 780px;
+.page-search-result-item__item-grid-container-main {
+  @apply gap-x-4;
+  grid-template-rows: 1.3125rem 1.3125rem auto;
+  grid-template-columns: 30% 30% 20% 8.8% auto;
+  grid-template-areas:
+    'contributors format stock price .'
+    'title manufacturer ssc . select'
+    'title misc . . .';
+}
+
+.page-search-result-item__item-contributors {
+  grid-area: contributors;
+}
+
+.page-search-result-item__item-price {
+  grid-area: price;
+}
+
+.page-search-result-item__item-title {
+  grid-area: title;
+}
+
+.page-search-result-item__item-format {
+  grid-area: format;
+}
+
+.page-search-result-item__item-manufacturer {
+  grid-area: manufacturer;
+}
+
+.page-search-result-item__item-misc {
+  grid-area: misc;
+}
+
+.page-search-result-item__item-select-bullet {
+  grid-area: select;
+}
+
+.page-search-result-item__item-stock {
+  grid-area: stock;
+}
+
+.page-search-result-item__item-ssc {
+  grid-area: ssc;
+}
+
+.page-search-result-item__item-image {
+  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.197935);
+}
+
+.active,
+.hover:hover {
+  @apply bg-[#D8DFE5] border border-solid border-[#0556B4];
+
+  .page-search-result-item__item-select-bullet {
+    .isa-select-bullet::before {
+      @apply bg-[#fff];
+    }
+
+    .isa-select-bullet:checked:before {
+      @apply bg-[#596470];
+    }
+
+    .isa-select-bullet:hover::before {
+      @apply bg-[#778490];
+    }
   }
 }
diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.ts b/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.ts
index 2dcd017d7..ed3ccb1d6 100644
--- a/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.ts
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-result-item.component.ts
@@ -1,14 +1,17 @@
 import { DatePipe } from '@angular/common';
-import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output, HostListener, HostBinding } from '@angular/core';
 import { ApplicationService } from '@core/application';
+import { EnvironmentService } from '@core/environment';
 import { DomainAvailabilityService, DomainInStockService } from '@domain/availability';
 import { ComponentStore } from '@ngrx/component-store';
 import { ItemDTO } from '@swagger/cat';
 import { DateAdapter } from '@ui/common';
 import { isEqual } from 'lodash';
 import { combineLatest } from 'rxjs';
-import { debounceTime, switchMap, map, shareReplay, filter } from 'rxjs/operators';
+import { debounceTime, switchMap, map, shareReplay, filter, first } from 'rxjs/operators';
 import { ArticleSearchService } from '../article-search.store';
+import { ProductCatalogNavigationService } from '@shared/services';
+import { ActivatedRoute } from '@angular/router';
 
 export interface SearchResultItemComponentState {
   item?: ItemDTO;
@@ -36,16 +39,7 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
 
   readonly item$ = this.select((s) => s.item);
 
-  @Input()
-  get selected() {
-    return this.get((s) => s.selected);
-  }
-  set selected(selected: boolean) {
-    if (this.selected !== selected) {
-      this.patchState({ selected });
-    }
-  }
-  readonly selected$ = this.select((s) => s.selected);
+  selected$ = this._articleSearchService.selectedItemIds$.pipe(map((selectedItemIds) => selectedItemIds.includes(this.item?.id)));
 
   @Input()
   get selectable() {
@@ -58,7 +52,7 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
   }
 
   @Output()
-  selectedChange = new EventEmitter<boolean>();
+  selectedChange = new EventEmitter<ItemDTO>();
 
   get contributors() {
     return this.item?.product?.contributors?.split(';').map((val) => val.trim());
@@ -77,6 +71,22 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
     return '';
   }
 
+  get isTablet() {
+    return this._environment.matchTablet();
+  }
+
+  get detailsPath() {
+    return this._navigationService.getArticleDetailsPath({ processId: this.applicationService.activatedProcessId, itemId: this.item?.id });
+  }
+
+  get resultsPath() {
+    return this._navigationService.getArticleSearchResultsPath(this.applicationService.activatedProcessId);
+  }
+
+  get mainOutletActive$() {
+    return this._navigationService?.mainOutletActive$(this._activatedRoute).pipe(shareReplay());
+  }
+
   defaultBranch$ = this._availability.getDefaultBranch();
 
   selectedBranchId$ = this.applicationService.activatedProcessId$.pipe(
@@ -123,7 +133,10 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
     private _articleSearchService: ArticleSearchService,
     public applicationService: ApplicationService,
     private _stockService: DomainInStockService,
-    private _availability: DomainAvailabilityService
+    private _availability: DomainAvailabilityService,
+    private _environment: EnvironmentService,
+    private _navigationService: ProductCatalogNavigationService,
+    private _activatedRoute: ActivatedRoute
   ) {
     super({
       selected: false,
@@ -131,7 +144,16 @@ export class SearchResultItemComponent extends ComponentStore<SearchResultItemCo
     });
   }
 
-  setSelected(selected: boolean) {
-    this._articleSearchService.setSelected({ selected, itemId: this.item?.id });
+  setSelected() {
+    const isSelected = this._articleSearchService.selectedItemIds.includes(this.item?.id);
+    this._articleSearchService.setSelected({ selected: !isSelected, itemId: this.item?.id });
+
+    if (!this.isTablet) {
+      this.selectedChange.emit(this.item);
+    }
+  }
+
+  @HostBinding('style') get class() {
+    return this._navigationService.mainOutletActive(this._activatedRoute) ? { height: '6.125rem' } : '';
   }
 }
diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-results.component.html b/apps/page/catalog/src/lib/article-search/search-results/search-results.component.html
index ec9aff70d..6ea6b03b1 100644
--- a/apps/page/catalog/src/lib/article-search/search-results/search-results.component.html
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-results.component.html
@@ -1,32 +1,77 @@
-<div class="filter-wrapper">
-  <div class="hits" *ngIf="hits$ | async; let hits">{{ hits }} Titel</div>
-  <ui-order-by-filter [orderBy]="(filter$ | async)?.orderBy" (selectedOrderByChange)="search(); updateBreadcrumbs()"> </ui-order-by-filter>
+<div
+  class="page-search-results__header bg-background-liste flex items-end justify-between"
+  [class.pb-4]="!(mainOutletActive$ | async)"
+  [class.flex-col]="!(mainOutletActive$ | async)"
+>
+  <div class="flex flex-row w-full desktop-small:w-min" [class.desktop:w-full]="!(mainOutletActive$ | async)">
+    <shared-filter-input-group-main
+      *ngIf="filter$ | async; let filter"
+      class="block mr-3 w-full desktop-small:w-[23.5rem]"
+      [class.desktop:w-full]="!(mainOutletActive$ | async)"
+      [hint]="searchboxHint$ | async"
+      [loading]="fetching$ | async"
+      [inputGroup]="filter?.input | group: 'main'"
+      (search)="search(filter)"
+      [showDescription]="false"
+      [scanner]="true"
+    ></shared-filter-input-group-main>
+
+    <a
+      class="page-search-results__filter w-[6.75rem] h-14 rounded font-bold px-5 mb-4 text-lg bg-[#AEB7C1] flex flex-row flex-nowrap items-center justify-center"
+      [class.active]="hasFilter$ | async"
+      [routerLink]="filterRoute"
+      queryParamsHandling="preserve"
+    >
+      <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+      Filter
+    </a>
+  </div>
+
+  <div
+    *ngIf="hits$ | async; let hits"
+    class="page-search-results__items-count inline-flex flex-row items-center pr-5 text-p3"
+    [class.mb-4]="mainOutletActive$ | async"
+  >
+    {{ hits ??
+      0 }}
+    Titel
+  </div>
+</div>
+
+<div class="page-search-results__order-by" [class.page-search-results__order-by-main]="mainOutletActive$ | async">
+  <shared-order-by-filter
+    [groupBy]="(mainOutletActive$ | async) ? [2, 2, 1, 1] : []"
+    [orderBy]="(filter$ | async)?.orderBy"
+    (selectedOrderByChange)="search(); updateBreadcrumbs()"
+  >
+  </shared-order-by-filter>
 </div>
 
 <cdk-virtual-scroll-viewport
   #scrollContainer
-  class="product-list scroll-bar scroll-bar-margin"
-  [itemSize]="187"
-  minBufferPx="1200"
-  maxBufferPx="1200"
+  class="product-list"
+  [itemSize]="(mainOutletActive$ | async) ? 187 : 98"
+  minBufferPx="2800"
+  maxBufferPx="2800"
   (scrolledIndexChange)="scrolledIndexChange($event)"
 >
-  <div class="product-list-result" *cdkVirtualFor="let item of results$ | async; trackBy: trackByItemId">
-    <search-result-item
-      [selected]="item | searchResultSelected: searchService.selectedItemIds"
-      [selectable]="isSelectable(item)"
-      [item]="item"
-    ></search-result-item>
-  </div>
+  <search-result-item
+    class="page-search-results__result-item"
+    [class.page-search-results__result-item-main]="mainOutletActive$ | async"
+    *cdkVirtualFor="let item of results$ | async; trackBy: trackByItemId"
+    (selectedChange)="addToCart($event)"
+    [selectable]="isSelectable(item)"
+    [item]="item"
+  ></search-result-item>
   <page-search-result-item-loading *ngIf="fetching$ | async"></page-search-result-item-loading>
 </cdk-virtual-scroll-viewport>
 
-<div class="actions">
+<div *ngIf="isTablet" class="actions z-fixed">
   <button
     [disabled]="loading$ | async"
     *ngIf="(selectedItemIds$ | async)?.length > 0"
     class="cta-cart cta-action-primary"
-    (click)="addSelectedItemsToCart()"
+    (click)="addToCart()"
   >
     <ui-spinner [show]="loading$ | async">In den Warenkorb legen</ui-spinner>
   </button>
diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss b/apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss
index c366b4122..3dbf5e1fe 100644
--- a/apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-results.component.scss
@@ -1,34 +1,36 @@
 :host {
-  @apply box-border grid;
-  max-height: calc(100vh - 364px);
-  height: 100vh;
-  grid-template-rows: auto 1fr;
+  @apply box-border grid h-[calc(100vh-16.5rem)] desktop-small:h-[calc(100vh-15.1rem)];
+  grid-template-rows: auto auto 1fr;
 }
 
 .product-list {
-  @apply m-0 p-0 mt-2;
+  @apply m-0 p-0 mt-px-2;
 }
 
-.product-list-result {
-  @apply list-none bg-white rounded-card p-4 mb-2;
-  height: 187px;
-  max-height: 187px;
+.page-search-results__result-item {
+  @apply mb-px-10;
 }
 
-.filter-wrapper {
-  @apply block relative;
+.page-search-results__result-item-main {
+  @apply mb-[5px];
+}
 
-  .hits {
-    @apply text-inactive-branch font-semibold absolute top-2 right-0;
-  }
+.page-search-results__order-by {
+  @apply bg-white rounded px-6 desktop-small:px-8;
+}
 
-  ui-order-by-filter {
-    @apply mx-auto;
+.page-search-results__order-by-main {
+  @apply pl-[4.9375rem] px-4;
+}
+
+.page-search-results__filter {
+  &.active {
+    @apply bg-[#596470] text-white ml-px-5;
   }
 }
 
 .actions {
-  @apply fixed bottom-28 inline-grid grid-flow-col gap-7;
+  @apply fixed bottom-16 inline-grid grid-flow-col gap-7;
   left: 50%;
   transform: translateX(-50%);
 
@@ -44,3 +46,24 @@
     @apply bg-brand text-white;
   }
 }
+
+::ng-deep page-search-results .page-search-results__order-by-main shared-order-by-filter {
+  @apply grid grid-flow-col justify-items-start gap-x-4 justify-start;
+  grid-template-columns: 30% 30% 20% 8.8% auto;
+
+  .group {
+    @apply desktop-small:justify-start;
+  }
+
+  .group:last-child {
+    @apply justify-self-end;
+
+    .order-by-filter-button {
+      @apply ml-12 mr-0;
+    }
+  }
+
+  .order-by-filter-button {
+    @apply ml-0 mr-12;
+  }
+}
diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts b/apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts
index 0729f59bc..bc2356e3d 100644
--- a/apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-results.component.ts
@@ -3,18 +3,20 @@ import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ViewChild, ViewC
 import { ActivatedRoute } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { BreadcrumbService } from '@core/breadcrumb';
+import { EnvironmentService } from '@core/environment';
 import { DomainCheckoutService } from '@domain/checkout';
 import { ItemDTO } from '@swagger/cat';
 import { AddToShoppingCartDTO } from '@swagger/checkout';
-import { UiFilter } from '@ui/filter';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
 import { CacheService } from 'apps/core/cache/src/public-api';
 import { isEqual } from 'lodash';
 import { BehaviorSubject, combineLatest, Subscription } from 'rxjs';
-import { debounceTime, first, map, switchMap } from 'rxjs/operators';
+import { debounceTime, first, map, shareReplay, switchMap, withLatestFrom } from 'rxjs/operators';
 import { ArticleSearchService } from '../article-search.store';
 import { AddedToCartModalComponent } from './added-to-cart-modal/added-to-cart-modal.component';
 import { SearchResultItemComponent } from './search-result-item.component';
+import { ProductCatalogNavigationService } from '@shared/services';
+import { Filter, FilterInputGroupMainComponent } from 'apps/shared/components/filter/src/lib';
 
 @Component({
   selector: 'page-search-results',
@@ -27,6 +29,9 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
   @ViewChild('scrollContainer', { static: true })
   scrollContainer: CdkVirtualScrollViewport;
 
+  @ViewChild(FilterInputGroupMainComponent, { static: false })
+  sharedFilterInputGroupMain: FilterInputGroupMainComponent;
+
   results$ = this.searchService.items$;
   fetching$ = this.searchService.fetching$;
   hits$ = this.searchService.hits$;
@@ -35,6 +40,8 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
 
   selectedItemIds$ = this.searchService.selectedItemIds$;
 
+  searchboxHint$ = this.searchService.searchboxHint$;
+
   selectedItems$ = combineLatest([this.results$, this.selectedItemIds$]).pipe(
     map(([items, selectedItemIds]) => {
       return items?.filter((item) => selectedItemIds?.find((selectedItemId) => item.id === selectedItemId));
@@ -47,14 +54,39 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
 
   trackByItemId: TrackByFunction<ItemDTO> = (index, item) => item.id;
 
+  get isTablet() {
+    return this._environment.matchTablet();
+  }
+
+  hasFilter$ = combineLatest([this.searchService.filter$, this.searchService.defaultSettings$]).pipe(
+    map(([filter, defaultFilter]) => {
+      const filterQueryParams = filter?.getQueryParams();
+      return !isEqual(this.resetQueryParamsQueryAndOrderBy(filterQueryParams), Filter.create(defaultFilter).getQueryParams());
+    })
+  );
+
+  get filterRoute() {
+    const itemId = this._navigationService?.getOutletParams(this.route)?.right?.id;
+    return this._navigationService.getArticleSearchResultsAndFilterPath({
+      processId: this.application.activatedProcessId,
+      itemId,
+    });
+  }
+
+  get mainOutletActive$() {
+    return this._navigationService?.mainOutletActive$(this.route).pipe(shareReplay());
+  }
+
   constructor(
     public searchService: ArticleSearchService,
     private route: ActivatedRoute,
-    private application: ApplicationService,
+    public application: ApplicationService,
     private breadcrumb: BreadcrumbService,
     private cache: CacheService,
     private _uiModal: UiModalService,
-    private _checkoutService: DomainCheckoutService
+    private _checkoutService: DomainCheckoutService,
+    private _environment: EnvironmentService,
+    private _navigationService: ProductCatalogNavigationService
   ) {}
 
   ngOnInit() {
@@ -72,7 +104,7 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
           const branchChanged = selectedBranch?.id !== this.searchService?.selectedBranch?.id;
 
           if (processChanged) {
-            if (!!this.searchService.processId && this.searchService.filter instanceof UiFilter) {
+            if (!!this.searchService.processId && this.searchService.filter instanceof Filter) {
               this.cacheCurrentData(
                 this.searchService.processId,
                 this.searchService.filter.getQueryParams(),
@@ -87,7 +119,7 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
             this.searchService.setBranch(selectedBranch);
           }
 
-          if (!(this.searchService.filter instanceof UiFilter)) {
+          if (!(this.searchService.filter instanceof Filter)) {
             await this.searchService.setDefaultFilter();
           }
 
@@ -117,6 +149,27 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
           await this.removeDetailsBreadcrumb(processId);
         })
     );
+
+    this.subscriptions.add(
+      this.searchService.searchCompleted.pipe(withLatestFrom(this.application.activatedProcessId$)).subscribe(([state, processId]) => {
+        if (state.searchState === '') {
+          const params = state.filter.getQueryParams();
+          if ((state.hits === 1 && this.isTablet) || (!this.isTablet && !this._navigationService.mainOutletActive(this.route))) {
+            const item = state.items.find((f) => f);
+            this._navigationService.navigateToDetails({
+              processId,
+              itemId: item.id,
+              queryParams: this.isTablet ? undefined : params,
+            });
+          } else if (this.isTablet || this._navigationService.mainOutletActive(this.route)) {
+            this._navigationService.navigateToResults({
+              processId,
+              queryParams: params,
+            });
+          }
+        }
+      })
+    );
   }
 
   ngOnDestroy() {
@@ -127,7 +180,26 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
     this.unselectAll();
   }
 
-  search() {
+  resetQueryParamsQueryAndOrderBy(params: Record<string, string> = {}) {
+    const clean = { ...params };
+
+    for (const key in clean) {
+      if (key === 'main_qs') {
+        clean[key] = undefined;
+      } else if (key?.includes('order_by')) {
+        delete clean[key];
+      }
+    }
+
+    return clean;
+  }
+
+  search(filter?: Filter) {
+    if (!!filter) {
+      this.sharedFilterInputGroupMain.cancelAutocomplete();
+      this.searchService.setFilter(filter);
+    }
+
     this.searchService.search({ clear: true });
   }
 
@@ -187,7 +259,7 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
       await this.breadcrumb.addBreadcrumbIfNotExists({
         key: processId,
         name,
-        path: `/kunde/${this.application.activatedProcessId}/product/search/results`,
+        path: this._navigationService.getArticleSearchResultsPath(this.application.activatedProcessId),
         params: queryParams,
         section: 'customer',
         tags: ['catalog', 'filter', 'results'],
@@ -250,29 +322,44 @@ export class ArticleSearchResultsComponent implements OnInit, OnDestroy {
     this.searchService.patchState({ selectedItemIds: [] });
   }
 
-  async addSelectedItemsToCart() {
+  async addToCart(item?: ItemDTO) {
     this.loading$.next(true);
-    const selectedItems = await this.selectedItems$.pipe(first()).toPromise();
+
+    if (!!item) {
+      await this.addItemsToCart(item);
+    } else {
+      await this.addItemsToCart();
+    }
+
+    this.loading$.next(false);
+  }
+
+  private _createShoppingCartItem(item: ItemDTO): AddToShoppingCartDTO {
+    return {
+      quantity: 1,
+      availability: {
+        availabilityType: item?.catalogAvailability?.status,
+        price: item?.catalogAvailability?.price,
+        supplierProductNumber: item?.ids?.dig ? String(item?.ids?.dig) : item?.product?.supplierProductNumber,
+      },
+      product: {
+        catalogProductNumber: String(item?.id),
+        ...item?.product,
+      },
+      itemType: item?.type,
+      promotion: { points: item?.promoPoints },
+    };
+  }
+
+  async addItemsToCart(item?: ItemDTO) {
+    const selectedItems = !item ? await this.selectedItems$.pipe(first()).toPromise() : [item];
     const items: AddToShoppingCartDTO[] = [];
+
     const canAddItemsPayload = [];
 
     for (const item of selectedItems) {
+      const shoppingCartItem = this._createShoppingCartItem(item);
       const isDownload = item?.product?.format === 'EB' || item?.product?.format === 'DL';
-      const shoppingCartItem: AddToShoppingCartDTO = {
-        quantity: 1,
-        availability: {
-          availabilityType: item?.catalogAvailability?.status,
-          price: item?.catalogAvailability?.price,
-          supplierProductNumber: item?.ids?.dig ? String(item.ids?.dig) : item?.product?.supplierProductNumber,
-        },
-        product: {
-          catalogProductNumber: String(item?.id),
-          ...item?.product,
-        },
-        itemType: item.type,
-        promotion: { points: item?.promoPoints },
-      };
-
       if (isDownload) {
         shoppingCartItem.destination = { data: { target: 16 } };
         canAddItemsPayload.push({
diff --git a/apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts b/apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts
index 3f88269e0..48770dbf7 100644
--- a/apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts
+++ b/apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts
@@ -8,7 +8,6 @@ import { UiCommonModule } from '@ui/common';
 import { UiIconModule } from '@ui/icon';
 import { UiSelectBulletModule } from '@ui/select-bullet';
 import { UiTooltipModule } from '@ui/tooltip';
-import { UiOrderByFilterModule } from 'apps/ui/filter/src/lib/next/order-by-filter/order-by-filter.module';
 import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module';
 import { AddedToCartModalComponent } from './added-to-cart-modal/added-to-cart-modal.component';
 import { StockInfosPipe } from './order-by-filter/stick-infos.pipe';
@@ -16,6 +15,9 @@ import { SearchResultItemLoadingComponent } from './search-result-item-loading.c
 import { SearchResultItemComponent } from './search-result-item.component';
 import { ArticleSearchResultsComponent } from './search-results.component';
 import { SearchResultSelectedPipe } from './selected/search-result-selected.pipe';
+import { FilterAutocompleteProvider, FilterNextModule, OrderByFilterModule } from 'apps/shared/components/filter/src/lib';
+import { FocusSearchboxEvent } from '../focus-searchbox.event';
+import { ArticleSearchMainAutocompleteProvider } from '../providers';
 
 @NgModule({
   imports: [
@@ -27,9 +29,10 @@ import { SearchResultSelectedPipe } from './selected/search-result-selected.pipe
     UiIconModule,
     UiSelectBulletModule,
     UiSpinnerModule,
-    UiOrderByFilterModule,
+    OrderByFilterModule,
     ScrollingModule,
     UiTooltipModule,
+    FilterNextModule,
   ],
   exports: [ArticleSearchResultsComponent, SearchResultItemComponent],
   declarations: [
@@ -40,6 +43,13 @@ import { SearchResultSelectedPipe } from './selected/search-result-selected.pipe
     SearchResultSelectedPipe,
     AddedToCartModalComponent,
   ],
-  providers: [],
+  providers: [
+    FocusSearchboxEvent,
+    {
+      provide: FilterAutocompleteProvider,
+      useClass: ArticleSearchMainAutocompleteProvider,
+      multi: true,
+    },
+  ],
 })
 export class SearchResultsModule {}
diff --git a/apps/page/catalog/src/lib/page-catalog-routing.module.ts b/apps/page/catalog/src/lib/page-catalog-routing.module.ts
index 7823b4a74..dd83fcb4f 100644
--- a/apps/page/catalog/src/lib/page-catalog-routing.module.ts
+++ b/apps/page/catalog/src/lib/page-catalog-routing.module.ts
@@ -2,10 +2,65 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { ArticleDetailsComponent } from './article-details/article-details.component';
 import { ArticleSearchComponent } from './article-search/article-search.component';
+import { ArticleSearchFilterComponent } from './article-search/search-filter/search-filter.component';
 import { ArticleSearchMainComponent } from './article-search/search-main/search-main.component';
 import { ArticleSearchResultsComponent } from './article-search/search-results/search-results.component';
 import { PageCatalogComponent } from './page-catalog.component';
 
+const auxiliaryRoutes = [
+  {
+    path: 'search',
+    component: ArticleSearchComponent,
+    outlet: 'left',
+    children: [
+      {
+        path: '',
+        component: ArticleSearchMainComponent,
+      },
+    ],
+  },
+  {
+    path: 'filter',
+    component: ArticleSearchFilterComponent,
+    outlet: 'right',
+  },
+  {
+    path: 'filter/:id',
+    component: ArticleSearchFilterComponent,
+    outlet: 'right',
+  },
+  {
+    path: 'results',
+    component: ArticleSearchResultsComponent,
+    outlet: 'left',
+  },
+  {
+    path: 'results',
+    component: ArticleSearchResultsComponent,
+    outlet: 'main',
+  },
+  {
+    path: 'results/:id',
+    component: ArticleSearchResultsComponent,
+    outlet: 'left',
+  },
+  {
+    path: 'results/ean/:ean',
+    component: ArticleSearchResultsComponent,
+    outlet: 'left',
+  },
+  {
+    path: 'details/ean/:ean',
+    component: ArticleDetailsComponent,
+    outlet: 'right',
+  },
+  {
+    path: 'details/:id',
+    component: ArticleDetailsComponent,
+    outlet: 'right',
+  },
+];
+
 const routes: Routes = [
   {
     path: '',
@@ -19,12 +74,16 @@ const routes: Routes = [
             path: '',
             component: ArticleSearchMainComponent,
           },
-          {
-            path: 'results',
-            component: ArticleSearchResultsComponent,
-          },
         ],
       },
+      {
+        path: 'results',
+        component: ArticleSearchResultsComponent,
+      },
+      {
+        path: 'filter',
+        component: ArticleSearchFilterComponent,
+      },
       {
         path: 'details/ean/:ean',
         component: ArticleDetailsComponent,
@@ -33,6 +92,7 @@ const routes: Routes = [
         path: 'details/:id',
         component: ArticleDetailsComponent,
       },
+      ...auxiliaryRoutes,
       {
         path: '',
         pathMatch: 'full',
diff --git a/apps/page/catalog/src/lib/page-catalog.component.html b/apps/page/catalog/src/lib/page-catalog.component.html
index cd97797d6..24a822cf9 100644
--- a/apps/page/catalog/src/lib/page-catalog.component.html
+++ b/apps/page/catalog/src/lib/page-catalog.component.html
@@ -8,4 +8,25 @@
   >
   </shared-branch-selector>
 </shared-breadcrumb>
-<router-outlet></router-outlet>
+
+<ng-container *ngIf="routerEvents$ | async">
+  <ng-container *ngIf="!(isDesktop$ | async); else desktop">
+    <router-outlet></router-outlet>
+  </ng-container>
+
+  <ng-template #desktop>
+    <ng-container *ngIf="showMainOutlet$ | async">
+      <router-outlet name="main"></router-outlet>
+    </ng-container>
+
+    <div class="grid grid-cols-[minmax(31rem,.5fr)_1fr] gap-6">
+      <div *ngIf="showLeftOutlet$ | async" class="block">
+        <router-outlet name="left"></router-outlet>
+      </div>
+
+      <div *ngIf="showRightOutlet$ | async">
+        <router-outlet name="right"></router-outlet>
+      </div>
+    </div>
+  </ng-template>
+</ng-container>
diff --git a/apps/page/catalog/src/lib/page-catalog.component.scss b/apps/page/catalog/src/lib/page-catalog.component.scss
index 47f1d1c07..40f77a196 100644
--- a/apps/page/catalog/src/lib/page-catalog.component.scss
+++ b/apps/page/catalog/src/lib/page-catalog.component.scss
@@ -1,5 +1,5 @@
 :host {
-  @apply block relative;
+  @apply block relative h-[calc(100vh-16.5rem)] desktop-small:h-[calc(100vh-15.1rem)];
 }
 
 shell-breadcrumb {
diff --git a/apps/page/catalog/src/lib/page-catalog.component.ts b/apps/page/catalog/src/lib/page-catalog.component.ts
index 0aa24f786..55ec3507f 100644
--- a/apps/page/catalog/src/lib/page-catalog.component.ts
+++ b/apps/page/catalog/src/lib/page-catalog.component.ts
@@ -1,4 +1,5 @@
 import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, OnDestroy, OnInit, Renderer2, ViewChild } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { AuthService } from '@core/auth';
 import { EnvironmentService } from '@core/environment';
@@ -6,8 +7,8 @@ import { BranchSelectorComponent } from '@shared/components/branch-selector';
 import { BreadcrumbComponent } from '@shared/components/breadcrumb';
 import { BranchDTO } from '@swagger/checkout';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
-import { BehaviorSubject, from, fromEvent, Observable, Subject } from 'rxjs';
-import { first, map, switchMap, takeUntil } from 'rxjs/operators';
+import { fromEvent, Observable, Subject } from 'rxjs';
+import { first, map, shareReplay, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
 
 @Component({
   selector: 'page-catalog',
@@ -28,16 +29,41 @@ export class PageCatalogComponent implements OnInit, AfterViewInit, OnDestroy {
 
   _onDestroy$ = new Subject<boolean>();
 
+  get isTablet$() {
+    return this._environmentService.matchTablet$.pipe(
+      map((state) => state.matches),
+      shareReplay()
+    );
+  }
+
+  get isDesktop$() {
+    return this._environmentService.matchDesktop$.pipe(
+      map((state) => {
+        return state.matches;
+      }),
+      shareReplay()
+    );
+  }
+
+  routerEvents$ = this._router.events.pipe(shareReplay());
+
+  showMainOutlet$ = this.routerEvents$.pipe(map((_) => !!this._activatedRoute?.children?.find((child) => child?.outlet === 'main')));
+
+  showLeftOutlet$ = this.routerEvents$.pipe(map((_) => !!this._activatedRoute?.children?.find((child) => child?.outlet === 'left')));
+
+  showRightOutlet$ = this.routerEvents$.pipe(map((_) => !!this._activatedRoute?.children?.find((child) => child?.outlet === 'right')));
+
   constructor(
     public application: ApplicationService,
     private _uiModal: UiModalService,
     public auth: AuthService,
     private _environmentService: EnvironmentService,
-    private _renderer: Renderer2
+    private _renderer: Renderer2,
+    private _activatedRoute: ActivatedRoute,
+    private _router: Router
   ) {}
 
   ngOnInit() {
-    // this.auth.getClaims();
     this.activatedProcessId$ = this.application.activatedProcessId$.pipe(map((processId) => String(processId)));
 
     this.selectedBranch$ = this.activatedProcessId$.pipe(switchMap((processId) => this.application.getSelectedBranch$(Number(processId))));
@@ -46,19 +72,19 @@ export class PageCatalogComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngAfterViewInit(): void {
-    if (this._environmentService.isTablet()) {
-      fromEvent(this.branchSelectorRef.nativeElement, 'focusin')
-        .pipe(takeUntil(this._onDestroy$))
-        .subscribe((_) => {
+    fromEvent(this.branchSelectorRef.nativeElement, 'focusin')
+      .pipe(takeUntil(this._onDestroy$), withLatestFrom(this.isTablet$))
+      .subscribe(([_, isTablet]) => {
+        if (isTablet) {
           this._renderer.setStyle(this.branchSelectorRef?.nativeElement, 'width', this.branchSelectorWidth);
-        });
+        }
+      });
 
-      fromEvent(this.branchSelectorRef.nativeElement, 'focusout')
-        .pipe(takeUntil(this._onDestroy$))
-        .subscribe((_) => {
-          this._renderer.removeStyle(this.branchSelectorRef?.nativeElement, 'width');
-        });
-    }
+    fromEvent(this.branchSelectorRef.nativeElement, 'focusout')
+      .pipe(takeUntil(this._onDestroy$))
+      .subscribe((_) => {
+        this._renderer.removeStyle(this.branchSelectorRef?.nativeElement, 'width');
+      });
   }
 
   ngOnDestroy(): void {
diff --git a/apps/page/checkout/src/lib/checkout-dummy/checkout-dummy.component.scss b/apps/page/checkout/src/lib/checkout-dummy/checkout-dummy.component.scss
index b5bda2876..cef2dcd4a 100644
--- a/apps/page/checkout/src/lib/checkout-dummy/checkout-dummy.component.scss
+++ b/apps/page/checkout/src/lib/checkout-dummy/checkout-dummy.component.scss
@@ -3,7 +3,7 @@
 }
 
 .wrapper {
-  @apply block bg-white shadow-card rounded-card pt-6;
+  @apply block bg-white shadow-card rounded pt-6;
 
   .header {
     @apply text-right;
@@ -12,11 +12,11 @@
       @apply text-center;
 
       .title {
-        @apply text-2xl text-page-heading font-bold;
+        @apply text-h3 text-h2 font-bold;
       }
 
       .paragraph {
-        @apply text-2xl mt-1 mb-0;
+        @apply text-h3 mt-1 mb-0;
       }
     }
   }
diff --git a/apps/page/checkout/src/lib/checkout-review/checkout-review.component.scss b/apps/page/checkout/src/lib/checkout-review/checkout-review.component.scss
index b72708421..a694d058f 100644
--- a/apps/page/checkout/src/lib/checkout-review/checkout-review.component.scss
+++ b/apps/page/checkout/src/lib/checkout-review/checkout-review.component.scss
@@ -14,7 +14,7 @@ button {
 }
 
 .card {
-  @apply bg-white rounded-card shadow-card;
+  @apply bg-white rounded shadow-card;
 }
 
 .card-empty {
@@ -26,7 +26,7 @@ button {
   width: fit-content;
 
   h1 {
-    @apply text-2xl font-bold my-1;
+    @apply text-h3 font-bold my-1;
     font-size: 26px;
   }
 
@@ -87,7 +87,7 @@ button {
 }
 
 .sub-header {
-  @apply text-center text-2xl font-normal my-0 mb-8;
+  @apply text-center text-h3 font-normal my-0 mb-8;
 }
 
 hr {
@@ -134,7 +134,7 @@ h1 {
 }
 
 .branch-name {
-  @apply text-regular overflow-hidden overflow-ellipsis ml-4;
+  @apply text-p2 overflow-hidden overflow-ellipsis ml-4;
 }
 
 .book-icon {
@@ -156,7 +156,7 @@ h1 {
 }
 
 .shipping-cost-info {
-  @apply text-sm mr-4 self-end;
+  @apply text-p3 mr-4 self-end;
 }
 
 .total-value {
@@ -164,5 +164,5 @@ h1 {
 }
 
 .total-item-reading-points {
-  @apply text-base font-bold text-ucla-blue;
+  @apply text-p2 font-bold text-ucla-blue;
 }
diff --git a/apps/page/checkout/src/lib/checkout-review/shopping-cart-item/shopping-cart-item.component.scss b/apps/page/checkout/src/lib/checkout-review/shopping-cart-item/shopping-cart-item.component.scss
index 34861fc62..760fe1404 100644
--- a/apps/page/checkout/src/lib/checkout-review/shopping-cart-item/shopping-cart-item.component.scss
+++ b/apps/page/checkout/src/lib/checkout-review/shopping-cart-item/shopping-cart-item.component.scss
@@ -23,7 +23,7 @@ button {
   img {
     max-width: 100%;
     max-height: 150px;
-    @apply rounded-card shadow-cta;
+    @apply rounded shadow-cta;
   }
 }
 
@@ -59,11 +59,11 @@ button {
 }
 
 .item-title.md {
-  @apply font-bold text-base;
+  @apply font-bold text-p2;
 }
 
 .item-title.sm {
-  @apply font-bold text-sm;
+  @apply font-bold text-p3;
 }
 
 .item-title.xs {
@@ -88,7 +88,7 @@ button {
   }
 
   .quantity-error {
-    @apply text-dark-goldenrod font-bold text-sm whitespace-nowrap;
+    @apply text-dark-goldenrod font-bold text-p3 whitespace-nowrap;
   }
 
   ui-quantity-dropdown {
@@ -113,7 +113,7 @@ button {
   }
 
   .item-availability-message {
-    @apply text-dark-goldenrod font-bold text-sm whitespace-nowrap;
+    @apply text-dark-goldenrod font-bold text-p3 whitespace-nowrap;
   }
 }
 
diff --git a/apps/page/checkout/src/lib/checkout-review/special-comment/special-comment.component.scss b/apps/page/checkout/src/lib/checkout-review/special-comment/special-comment.component.scss
index 2b4b06d0f..852aa1734 100644
--- a/apps/page/checkout/src/lib/checkout-review/special-comment/special-comment.component.scss
+++ b/apps/page/checkout/src/lib/checkout-review/special-comment/special-comment.component.scss
@@ -13,11 +13,11 @@ label {
 }
 
 textarea {
-  @apply flex-grow text-base border-none outline-none p-0 resize-none;
+  @apply flex-grow text-p2 border-none outline-none p-0 resize-none;
 }
 
 button {
-  @apply text-brand font-bold text-cta-l outline-none border-none bg-transparent ml-1;
+  @apply text-brand font-bold text-p1 outline-none border-none bg-transparent ml-1;
 
   ui-icon {
     @apply text-ucla-blue;
diff --git a/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss b/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss
index 65669ddd5..8f8d86da2 100644
--- a/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss
+++ b/apps/page/checkout/src/lib/checkout-summary/checkout-summary.component.scss
@@ -8,7 +8,7 @@
 }
 
 .card {
-  @apply bg-white rounded-card shadow-card overflow-scroll;
+  @apply bg-white rounded shadow-card overflow-scroll;
   height: calc(100vh - 410px);
 }
 
@@ -61,7 +61,7 @@
   }
 
   .order-customer {
-    @apply font-bold text-2xl;
+    @apply font-bold text-h3;
   }
 
   .grow {
@@ -178,15 +178,15 @@
   }
 
   .promotion-points {
-    @apply text-ucla-blue text-regular font-bold flex-grow;
+    @apply text-ucla-blue text-p2 font-bold flex-grow;
   }
 
   .total-price {
-    @apply font-bold text-cta-l;
+    @apply font-bold text-p1;
   }
 
   .price-info {
-    @apply text-right text-sm;
+    @apply text-right text-p3;
   }
 
   .actions {
diff --git a/apps/page/customer-order/src/lib/customer-order-details/customer-order-details.component.ts b/apps/page/customer-order/src/lib/customer-order-details/customer-order-details.component.ts
index f5a42032e..4965fc723 100644
--- a/apps/page/customer-order/src/lib/customer-order-details/customer-order-details.component.ts
+++ b/apps/page/customer-order/src/lib/customer-order-details/customer-order-details.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
+import { EnvironmentService } from '@core/environment';
 import { DomainCustomerOrderService, DomainGoodsService, DomainOmsService, OrderItemsContext } from '@domain/oms';
 import { ComponentStore, tapResponse } from '@ngrx/component-store';
 import { ListResponseArgsOfOrderItemListItemDTO, OrderItemListItemDTO, OrderItemProcessingStatusValue } from '@swagger/oms';
@@ -63,13 +64,18 @@ export class CustomerOrderDetailsComponent extends ComponentStore<CustomerOrderD
 
   private _onDestroy$ = new Subject();
 
+  get isTablet() {
+    return this._environment.matchTablet();
+  }
+
   constructor(
     private _activatedRoute: ActivatedRoute,
     private _domainGoodsInService: DomainCustomerOrderService,
     private _omsService: DomainOmsService,
     private _breadcrumb: BreadcrumbService,
     private _router: Router,
-    private _uiModal: UiModalService
+    private _uiModal: UiModalService,
+    private _environment: EnvironmentService
   ) {
     super({
       fetching: false,
@@ -187,19 +193,37 @@ export class CustomerOrderDetailsComponent extends ComponentStore<CustomerOrderD
   }
 
   navigateToEditPage(orderItem: OrderItemListItemDTO) {
+    // if (this.isTablet) {
     this._router.navigate([this.getEditPath(orderItem)], {
-      queryParams: { orderNumber: orderItem.orderNumber, buyerNumber: orderItem.buyerNumber, archive: this.archive },
+      queryParams: { buyerNumber: orderItem.buyerNumber, archive: this.archive },
     });
+    // } else {
+    //   this._router.navigate(this.getEditPathDesktop(orderItem), {
+    //     queryParamsHandling: 'preserve',
+    //     queryParams: { buyerNumber: orderItem.buyerNumber, archive: this.archive },
+    //   });
+    // }
   }
 
   navigateToDetailsPage(item: OrderItemListItemDTO) {
+    // if (this.isTablet) {
     this._router.navigate([this.getDetailsPath(item)], {
       queryParams: { buyerNumber: item.buyerNumber, archive: this.archive },
     });
+    // } else {
+    //   this._router.navigate(this.getDetailsPathDesktop(item), {
+    //     queryParamsHandling: 'preserve',
+    //     queryParams: { buyerNumber: item.buyerNumber, archive: this.archive },
+    //   });
+    // }
   }
 
   navigateToLandingPage() {
+    // if (this.isTablet) {
     this._router.navigate([`/kunde/${this.processId}/order`]);
+    // } else {
+    //   this._router.navigate(['/kunde', this.processId, 'order', { outlets: { main: null, left: 'search', right: 'filter' } }]);
+    // }
   }
 
   async actionHandled(handler: { orderItemsContext: OrderItemsContext; command: string; navigation: 'details' | 'main' | 'reservation' }) {
@@ -218,9 +242,65 @@ export class CustomerOrderDetailsComponent extends ComponentStore<CustomerOrderD
       : `/kunde/${this.processId}/order/details/order/${encodeURIComponent(item?.orderNumber)}/${item?.processingStatus}`;
   }
 
+  // getDetailsPathDesktop(item: OrderItemListItemDTO) {
+  //   return item?.compartmentCode
+  //     ? [
+  //         '/kunde',
+  //         this.processId,
+  //         'order',
+  //         {
+  //           outlets: {
+  //             main: null,
+  //             left: 'results',
+  //             right: ['details', 'compartment', encodeURIComponent(item?.compartmentCode), item?.processingStatus],
+  //           },
+  //         },
+  //       ]
+  //     : [
+  //         '/kunde',
+  //         this.processId,
+  //         'order',
+  //         {
+  //           outlets: {
+  //             main: null,
+  //             left: 'results',
+  //             right: ['details', 'order', encodeURIComponent(item?.orderNumber), item?.processingStatus],
+  //           },
+  //         },
+  //       ];
+  // }
+
   getEditPath(item: OrderItemListItemDTO) {
     return item?.compartmentCode
       ? `/kunde/${this.processId}/order/details/compartment/${encodeURIComponent(item?.compartmentCode)}/${item?.processingStatus}/edit`
       : `/kunde/${this.processId}/order/details/order/${encodeURIComponent(item?.orderNumber)}/${item?.processingStatus}/edit`;
   }
+
+  // getEditPathDesktop(item: OrderItemListItemDTO) {
+  //   return item?.compartmentCode
+  //     ? [
+  //         '/kunde',
+  //         this.processId,
+  //         'order',
+  //         {
+  //           outlets: {
+  //             main: null,
+  //             left: 'results',
+  //             right: ['details', 'compartment', encodeURIComponent(item?.compartmentCode), item?.processingStatus, 'edit'],
+  //           },
+  //         },
+  //       ]
+  //     : [
+  //         '/kunde',
+  //         this.processId,
+  //         'order',
+  //         {
+  //           outlets: {
+  //             main: null,
+  //             left: 'results',
+  //             right: ['details', 'order', encodeURIComponent(item?.orderNumber), item?.processingStatus, 'edit'],
+  //           },
+  //         },
+  //       ];
+  // }
 }
diff --git a/apps/page/customer-order/src/lib/customer-order-edit/customer-order-edit.component.ts b/apps/page/customer-order/src/lib/customer-order-edit/customer-order-edit.component.ts
index dc0e3457a..2b4069c31 100644
--- a/apps/page/customer-order/src/lib/customer-order-edit/customer-order-edit.component.ts
+++ b/apps/page/customer-order/src/lib/customer-order-edit/customer-order-edit.component.ts
@@ -1,6 +1,7 @@
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
+import { EnvironmentService } from '@core/environment';
 import { DomainCustomerOrderService, DomainGoodsService, DomainOmsService } from '@domain/oms';
 import { OrderItemListItemDTO } from '@swagger/oms';
 import { UiMessageModalComponent, UiModalService } from '@ui/modal';
@@ -48,12 +49,17 @@ export class CustomerOrderEditComponent implements OnInit {
     shareReplay()
   );
 
+  get isTablet() {
+    return this._environment.matchTablet();
+  }
+
   constructor(
     private _activatedRoute: ActivatedRoute,
     private _breadcrumb: BreadcrumbService,
     private _domainGoodsInService: DomainCustomerOrderService,
     private _router: Router,
-    private _uiModal: UiModalService
+    private _uiModal: UiModalService,
+    private _environment: EnvironmentService
   ) {}
 
   ngOnInit() {
@@ -84,6 +90,8 @@ export class CustomerOrderEditComponent implements OnInit {
     const processingStatus = options?.processingStatus ? options.processingStatus : this._activatedRoute.snapshot.params.processingStatus;
     const buyerNumber = this._activatedRoute.snapshot.queryParams.buyerNumber;
     const archive = this._activatedRoute.snapshot.queryParams.archive;
+
+    // if (this.isTablet) {
     compartmentCode
       ? this._router.navigate(
           [`/kunde/${this.processId}/order/details/compartment/${encodeURIComponent(compartmentCode)}/${processingStatus}`],
@@ -92,6 +100,42 @@ export class CustomerOrderEditComponent implements OnInit {
       : this._router.navigate([`/kunde/${this.processId}/order/details/order/${encodeURIComponent(orderNumber)}/${processingStatus}`], {
           queryParams: { buyerNumber, archive },
         });
+    // } else {
+    //   compartmentCode
+    //     ? this._router.navigate(
+    //         [
+    //           '/kunde',
+    //           this.processId,
+    //           'order',
+    //           {
+    //             outlets: {
+    //               main: null,
+    //               left: 'results',
+    //               right: ['details', 'compartment', encodeURIComponent(compartmentCode), processingStatus],
+    //             },
+    //           },
+    //         ],
+    //         { queryParamsHandling: 'preserve', queryParams: { buyerNumber, archive } }
+    //       )
+    //     : this._router.navigate(
+    //         [
+    //           '/kunde',
+    //           this.processId,
+    //           'order',
+    //           {
+    //             outlets: {
+    //               main: null,
+    //               left: 'results',
+    //               right: ['details', 'order', encodeURIComponent(orderNumber), processingStatus],
+    //             },
+    //           },
+    //         ],
+    //         {
+    //           queryParamsHandling: 'preserve',
+    //           queryParams: { buyerNumber, archive },
+    //         }
+    //       );
+    // }
   }
 
   openModalIfItemsHaveDifferentCustomers(items: OrderItemListItemDTO[]) {
diff --git a/apps/page/customer-order/src/lib/customer-order-routing.module.ts b/apps/page/customer-order/src/lib/customer-order-routing.module.ts
index c31156706..1005a74b1 100644
--- a/apps/page/customer-order/src/lib/customer-order-routing.module.ts
+++ b/apps/page/customer-order/src/lib/customer-order-routing.module.ts
@@ -2,11 +2,70 @@ import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 import { CustomerOrderDetailsComponent, CustomerOrderDetailsModule } from './customer-order-details';
 import { CustomerOrderEditComponent } from './customer-order-edit';
-import { CustomerOrderSearchComponent, CustomerOrderSearchModule } from './customer-order-search';
+import { CustomerOrderSearchComponent, CustomerOrderSearchFilterComponent, CustomerOrderSearchModule } from './customer-order-search';
 import { CustomerOrderSearchMainComponent, CustomerOrderSearchMainModule } from './customer-order-search/search-main';
 import { CustomerOrderSearchResultsComponent, CustomerOrderSearchResultsModule } from './customer-order-search/search-results';
 import { CustomerOrderComponent } from './customer-order.component';
 
+// const auxiliaryRoutes = [
+//   {
+//     path: 'search',
+//     component: CustomerOrderSearchComponent,
+//     outlet: 'left',
+//     children: [
+//       {
+//         path: '',
+//         component: CustomerOrderSearchMainComponent,
+//       },
+//     ],
+//   },
+//   {
+//     path: 'filter',
+//     component: CustomerOrderSearchFilterComponent,
+//     outlet: 'right',
+//   },
+//   {
+//     path: 'filter/:compartmentCode/:processingStatus',
+//     component: CustomerOrderSearchFilterComponent,
+//     outlet: 'right',
+//   },
+//   {
+//     path: 'filter/:orderNumber/:processingStatus',
+//     component: CustomerOrderSearchFilterComponent,
+//     outlet: 'right',
+//   },
+//   {
+//     path: 'results',
+//     component: CustomerOrderSearchResultsComponent,
+//     outlet: 'left',
+//   },
+//   {
+//     path: 'results',
+//     component: CustomerOrderSearchResultsComponent,
+//     outlet: 'main',
+//   },
+//   {
+//     path: 'details/compartment/:compartmentCode/:processingStatus',
+//     component: CustomerOrderDetailsComponent,
+//     outlet: 'right',
+//   },
+//   {
+//     path: 'details/order/:orderNumber/:processingStatus',
+//     component: CustomerOrderDetailsComponent,
+//     outlet: 'right',
+//   },
+//   {
+//     path: 'details/compartment/:compartmentCode/:processingStatus/edit',
+//     component: CustomerOrderEditComponent,
+//     outlet: 'right',
+//   },
+//   {
+//     path: 'details/order/:orderNumber/:processingStatus/edit',
+//     component: CustomerOrderEditComponent,
+//     outlet: 'right',
+//   },
+// ];
+
 const routes: Routes = [
   {
     path: '',
@@ -20,6 +79,10 @@ const routes: Routes = [
           { path: 'results', component: CustomerOrderSearchResultsComponent },
         ],
       },
+      {
+        path: 'filter',
+        component: CustomerOrderSearchFilterComponent,
+      },
       {
         path: 'details/compartment/:compartmentCode/:processingStatus',
         component: CustomerOrderDetailsComponent,
@@ -36,6 +99,7 @@ const routes: Routes = [
         path: 'details/order/:orderNumber/:processingStatus/edit',
         component: CustomerOrderEditComponent,
       },
+      // ...auxiliaryRoutes,
     ],
   },
 ];
diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.html b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.html
index 20220351d..a963bc357 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.html
+++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.html
@@ -1,31 +1,33 @@
-<div class="goods-out-search-filter-content">
-  <button class="btn-close" type="button" (click)="close.emit()">
-    <ui-icon icon="close" size="20px"></ui-icon>
-  </button>
+<ng-container *ngIf="filter$ | async; let filter">
+  <div class="goods-out-search-filter-content">
+    <a class="btn-close" type="button" [routerLink]="closeFilterRouterPath" queryParamsHandling="preserve">
+      <ui-icon icon="close" size="20px"></ui-icon>
+    </a>
 
-  <div class="goods-out-search-filter-content-main">
-    <h1 class="title">Filter</h1>
-    <ui-filter
-      [filter]="filter"
-      [loading]="loading$ | async"
-      (search)="applyFilter()"
-      [hint]="message"
-      resizeInputOptionsToElement="page-goods-out-search-filter .cta-wrapper"
-      [scanner]="true"
-    >
-      <page-order-branch-id-input *uiFilterCustomInput="'order_branch_id'; let input" [input]="input"> </page-order-branch-id-input>
-    </ui-filter>
+    <div class="goods-out-search-filter-content-main">
+      <h1 class="title">Filter</h1>
+      <ui-filter
+        [filter]="filter"
+        [loading]="loading$ | async"
+        (search)="applyFilter(filter)"
+        [hint]="message"
+        resizeInputOptionsToElement="page-goods-out-search-filter .cta-wrapper"
+        [scanner]="true"
+      >
+        <page-order-branch-id-input *uiFilterCustomInput="'order_branch_id'; let input" [input]="input"> </page-order-branch-id-input>
+      </ui-filter>
+    </div>
   </div>
-</div>
 
-<div class="cta-wrapper">
-  <button class="cta-reset-filter" (click)="resetFilter()" [disabled]="loading$ | async">
-    Filter zurücksetzen
-  </button>
+  <div class="cta-wrapper">
+    <button class="cta-reset-filter" (click)="resetFilter(filter)" [disabled]="loading$ | async">
+      Filter zurücksetzen
+    </button>
 
-  <button class="cta-apply-filter" (click)="applyFilter()" [disabled]="loading$ | async">
-    <ui-spinner [show]="loading$ | async">
-      Filter anwenden
-    </ui-spinner>
-  </button>
-</div>
+    <button class="cta-apply-filter" (click)="applyFilter(filter)" [disabled]="loading$ | async">
+      <ui-spinner [show]="loading$ | async">
+        Filter anwenden
+      </ui-spinner>
+    </button>
+  </div>
+</ng-container>
diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.scss b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.scss
index d8893d743..ab26dadaa 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.scss
+++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.scss
@@ -22,9 +22,7 @@
 }
 
 .cta-wrapper {
-  @apply fixed bottom-8 whitespace-nowrap;
-  left: 50%;
-  transform: translateX(-50%);
+  @apply text-center whitespace-nowrap;
 }
 
 .cta-reset-filter,
diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.ts b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.ts
index 7720d3a37..64101ebb2 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.ts
+++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/customer-order-search-filter.component.ts
@@ -9,13 +9,15 @@ import {
   Input,
   ViewChild,
 } from '@angular/core';
-import { Router } from '@angular/router';
+import { ActivatedRoute, Params, Router } from '@angular/router';
 import { BreadcrumbService } from '@core/breadcrumb';
 import { OrderItemListItemDTO } from '@swagger/oms';
 import { UiFilter, UiFilterComponent } from '@ui/filter';
 import { Observable, Subject } from 'rxjs';
-import { take, takeUntil } from 'rxjs/operators';
+import { map, take, takeUntil } from 'rxjs/operators';
 import { CustomerOrderSearchStore } from '../customer-order-search.store';
+import { EnvironmentService } from '@core/environment';
+import { ApplicationService } from '@core/application';
 
 @Component({
   selector: 'page-customer-order-search-filter',
@@ -27,12 +29,14 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
   @Output()
   close = new EventEmitter();
 
-  filter: UiFilter;
-
   loading$: Observable<boolean>;
 
   message: string;
 
+  get isTablet() {
+    return this._environment.matchTablet();
+  }
+
   @Input()
   processId: number;
 
@@ -41,11 +45,57 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
   @ViewChild(UiFilterComponent, { static: false })
   uiFilter: UiFilterComponent;
 
+  filter$: Observable<UiFilter>;
+
+  get leftOutletLocation(): string {
+    return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'left')?.snapshot?.routeConfig?.path ?? '';
+  }
+
+  get rightOutletParams(): Params {
+    return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'right')?.snapshot?.params;
+  }
+
+  get closeFilterRouterPath() {
+    // if (!this.isTablet) {
+    //   if (this.leftOutletLocation.includes('results')) {
+    //     const params = this.rightOutletParams;
+    //     const orderNumber = params?.orderNumber;
+    //     const compartmentCode = params?.compartmentCode;
+    //     const processingStatus = params?.processingStatus;
+    //     return orderNumber
+    //       ? [
+    //           '/kunde',
+    //           this.application.activatedProcessId,
+    //           'order',
+    //           { outlets: { main: null, left: 'results', right: ['details', 'order', orderNumber, processingStatus] } },
+    //         ]
+    //       : [
+    //           '/kunde',
+    //           this.application.activatedProcessId,
+    //           'order',
+    //           {
+    //             outlets: {
+    //               main: null,
+    //               left: 'results',
+    //               right: ['details', 'compartment', compartmentCode, processingStatus],
+    //             },
+    //           },
+    //         ];
+    //   }
+    //   return ['/kunde', this.application.activatedProcessId, 'order', { outlets: { main: null, left: 'search', right: 'filter' } }];
+    // } else {
+    return ['/kunde', this.application.activatedProcessId, 'order', 'results'];
+    // }
+  }
+
   constructor(
     private _goodsOutSearchStore: CustomerOrderSearchStore,
     private _breadcrumb: BreadcrumbService,
     private _cdr: ChangeDetectorRef,
-    private _router: Router
+    private _router: Router,
+    private _environment: EnvironmentService,
+    private _activatedRoute: ActivatedRoute,
+    public application: ApplicationService
   ) {}
 
   ngOnInit() {
@@ -59,23 +109,23 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
   }
 
   private _initSettings() {
-    this.filter = UiFilter.create(this._goodsOutSearchStore.filter);
+    this.filter$ = this._goodsOutSearchStore.filter$.pipe(map((filter) => UiFilter.create(filter)));
   }
 
   private _initLoading$() {
     this.loading$ = this._goodsOutSearchStore.fetching$;
   }
 
-  async resetFilter() {
-    const queryParams = { main_qs: this.filter?.getQueryParams()?.main_qs || '' };
+  async resetFilter(filter: UiFilter) {
+    const queryParams = { main_qs: filter?.getQueryParams()?.main_qs || '' };
     this._goodsOutSearchStore.resetFilter(queryParams);
     this._initSettings();
     this._cdr.markForCheck();
   }
 
-  async applyFilter() {
+  async applyFilter(filter: UiFilter) {
     this.uiFilter?.cancelAutocomplete();
-    this._goodsOutSearchStore.setFilter(this.filter);
+    this._goodsOutSearchStore.setFilter(filter);
     this.message = undefined;
 
     await this.updateQueryParams();
@@ -84,6 +134,7 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
       if (result.results.error) {
       } else {
         if (result.results.hits > 0) {
+          // if (this.isTablet) {
           if (result.results.hits === 1) {
             const orderItem = result.results.result[0];
             this._router.navigate([this.getDetailsPath(orderItem)]);
@@ -92,6 +143,18 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
               queryParams: this._goodsOutSearchStore.filter.getQueryParams(),
             });
           }
+          // } else {
+          //   const orderItem = result.results.result[0];
+          //   if (result.results.hits === 1) {
+          //     this._router.navigate(this.getDetailsPathDesktop(orderItem, this.processId), {
+          //       queryParams: this._goodsOutSearchStore.filter.getQueryParams(),
+          //     });
+          //   } else {
+          //     this._router.navigate(this.getDetailsPathDesktop(orderItem, this.processId), {
+          //       queryParams: this._goodsOutSearchStore.filter.getQueryParams(),
+          //     });
+          // }
+          // }
 
           this.close.emit();
         } else {
@@ -126,4 +189,32 @@ export class CustomerOrderSearchFilterComponent implements OnInit, OnDestroy {
       ? `/kunde/${this.processId}/order/details/compartment/${encodeURIComponent(item?.compartmentCode)}/${item?.processingStatus}`
       : `/kunde/${this.processId}/order/details/order/${encodeURIComponent(item?.orderNumber)}/${item?.processingStatus}`;
   }
+
+  // getDetailsPathDesktop(item: OrderItemListItemDTO, processId: number) {
+  //   return item?.compartmentCode
+  //     ? [
+  //         '/kunde',
+  //         processId,
+  //         'order',
+  //         {
+  //           outlets: {
+  //             main: null,
+  //             left: 'results',
+  //             right: ['details', 'compartment', encodeURIComponent(item?.compartmentCode), item?.processingStatus],
+  //           },
+  //         },
+  //       ]
+  //     : [
+  //         '/kunde',
+  //         processId,
+  //         'order',
+  //         {
+  //           outlets: {
+  //             main: null,
+  //             left: 'results',
+  //             right: ['details', 'order', encodeURIComponent(item?.orderNumber), item?.processingStatus],
+  //           },
+  //         },
+  //       ];
+  // }
 }
diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.css b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.css
index cdacf84b9..375530a42 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.css
+++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.css
@@ -1,5 +1,5 @@
 ::ng-deep page-order-branch-id-input shared-branch-selector .shared-branch-selector-input-container {
-  @apply border border-solid border-[#AEB7C1] rounded-card;
+  @apply border border-solid border-[#AEB7C1] rounded;
 }
 
 ::ng-deep page-order-branch-id-input shared-branch-selector.shared-branch-selector-opend .shared-branch-selector-input-container {
diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.ts b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.ts
index 1fc720896..409caf0a6 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.ts
+++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search-filter/order-branch-id-input/order-branch-id-input.component.ts
@@ -25,18 +25,31 @@ export class OrderBranchIdInputComponent extends AbstractUiFilterInputDirective
   ngOnInit() {
     this.control.setValue({ id: Number(this.value) });
 
+    const uiInputChangesSub = this.uiInput?.changes?.subscribe((changes) => {
+      const controlValue = this.control?.value?.id;
+      const changesValue = Number(changes?.target?.value);
+      if (controlValue !== changesValue) {
+        this.control.setValue(changesValue && !isNaN(changesValue) ? { id: changesValue } : undefined);
+      }
+    });
+
     const onInputChangeSub = this.onUiInputChange$.subscribe((input) => {
-      if (this.control.value !== input.value) {
-        this.control.setValue(input.value ? { id: Number(input.value) } : undefined);
+      const controlValue = this.control?.value?.id;
+      const inputValue = Number(input?.value);
+      if (controlValue !== inputValue) {
+        this.control.setValue(inputValue && !isNaN(inputValue) ? { id: inputValue } : undefined);
       }
     });
 
     const onControlValueChangeSub = this.control.valueChanges.subscribe((value) => {
-      if (this.value !== value) {
-        this.setValue(value ? String(value?.id) : undefined);
+      if (!value) {
+        this.setValue(undefined);
+      } else if (this.value !== String(value?.id)) {
+        this.setValue(String(value?.id));
       }
     });
 
+    this._subscriptions.add(uiInputChangesSub);
     this._subscriptions.add(onInputChangeSub);
     this._subscriptions.add(onControlValueChangeSub);
   }
diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.html b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.html
index 729c7220a..c47a3f8fe 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.html
+++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.html
@@ -1,8 +1,13 @@
-<div class="flex flex-row justify-end mb-4">
-  <button class="filter" [class.active]="hasFilter$ | async" (click)="shellFilterOverlay.open()">
-    <ui-icon size="20px" icon="filter_alit"></ui-icon>
-    <span class="label">Filter</span>
-  </button>
+<div class="page-customer-order-search__header bg-background-liste flex flex-col items-end pb-4">
+  <a
+    [class.active]="hasFilter$ | async"
+    class="page-customer-order-search__filter h-14 rounded font-bold px-5 mb-4 text-lg bg-cadet-blue flex flex-row flex-nowrap items-center justify-center"
+    [routerLink]="filterRoute"
+    queryParamsHandling="preserve"
+  >
+    <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+    Filter
+  </a>
 </div>
 
 <router-outlet></router-outlet>
diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.scss b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.scss
index 8b6cf1f0f..47cede783 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.scss
+++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.scss
@@ -3,7 +3,7 @@
 }
 
 .filter {
-  @apply font-sans flex items-center font-bold bg-wild-blue-yonder border-0 text-regular py-px-8 px-px-15 rounded-filter justify-center;
+  @apply font-sans flex items-center font-bold bg-wild-blue-yonder border-0 text-p2 py-px-8 px-px-15 rounded-filter justify-center;
   min-width: 106px;
 
   .label {
diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.ts b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.ts
index 10316e422..50f0b8d3a 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.ts
+++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.ts
@@ -8,6 +8,7 @@ import { combineLatest, Subject } from 'rxjs';
 import { map, takeUntil, withLatestFrom } from 'rxjs/operators';
 import { CustomerOrderSearchStore } from './customer-order-search.store';
 import { CustomerOrderSearchMainAutocompleteProvider } from './providers/customer-order-search-main-autocomplete.provider';
+import { EnvironmentService } from '@core/environment';
 
 @Component({
   selector: 'page-customer-order-search',
@@ -15,7 +16,6 @@ import { CustomerOrderSearchMainAutocompleteProvider } from './providers/custome
   styleUrls: ['customer-order-search.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [
-    CustomerOrderSearchStore,
     {
       provide: UiFilterAutocompleteProvider,
       useClass: CustomerOrderSearchMainAutocompleteProvider,
@@ -32,28 +32,30 @@ import { CustomerOrderSearchMainAutocompleteProvider } from './providers/custome
 export class CustomerOrderSearchComponent implements OnInit, OnDestroy {
   private _onDestroy$ = new Subject();
 
+  get isTablet() {
+    return this._environment.matchTablet();
+  }
+
   hasFilter$ = combineLatest([this._goodsOutSearchStore.filter$, this._goodsOutSearchStore.defaultSettings$]).pipe(
     map(([filter, defaultFilter]) => !isEqual(filter?.getQueryParams(), UiFilter.create(defaultFilter).getQueryParams()))
   );
 
-  processId$ = this._activatedRoute.data.pipe(map((data) => +data.processId));
+  processId$ = this._activatedRoute.parent.data.pipe(map((data) => +data.processId));
+
+  get filterRoute() {
+    const processId = this._activatedRoute?.parent?.snapshot?.data?.processId;
+    return ['/kunde', processId, 'order', 'filter'];
+  }
 
   constructor(
     private _goodsOutSearchStore: CustomerOrderSearchStore,
     private _breadcrumb: BreadcrumbService,
-    private _activatedRoute: ActivatedRoute
+    private _activatedRoute: ActivatedRoute,
+    private _environment: EnvironmentService
   ) {}
 
   ngOnInit() {
     this.processId$.pipe(takeUntil(this._onDestroy$), withLatestFrom(this._activatedRoute.queryParams)).subscribe(([processId]) => {
-      // if (params && Object.keys(params).length === 0) {
-      //   console.log('params is empty');
-      //   this._goodsOutSearchStore.setQueryParams(params);
-      //   this._goodsOutSearchStore.loadSettings();
-      // } else {
-      //   // this._goodsOutSearchStore.resetFilter(params);
-      // }
-
       this._breadcrumb.addOrUpdateBreadcrumbIfNotExists({
         key: processId,
         name: 'Kundenbestellung',
diff --git a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.module.ts b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.module.ts
index 442dcf00a..0d7a67751 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.module.ts
+++ b/apps/page/customer-order/src/lib/customer-order-search/customer-order-search.module.ts
@@ -8,6 +8,7 @@ import { RouterModule } from '@angular/router';
 import { UiFilterNextModule } from '@ui/filter';
 import { SharedFilterOverlayModule } from '@shared/components/filter-overlay';
 import { UiSpinnerModule } from '@ui/spinner';
+import { CustomerOrderSearchStore } from './customer-order-search.store';
 
 @NgModule({
   imports: [
@@ -20,6 +21,7 @@ import { UiSpinnerModule } from '@ui/spinner';
     OrderBranchIdInputComponent,
   ],
   exports: [CustomerOrderSearchComponent],
+  providers: [CustomerOrderSearchStore],
   declarations: [CustomerOrderSearchComponent, CustomerOrderSearchFilterComponent],
 })
 export class CustomerOrderSearchModule {}
diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.scss b/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.scss
index df66b06ab..ca173a1bb 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.scss
+++ b/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.scss
@@ -3,19 +3,19 @@
 }
 
 .goods-out-list-navigation {
-  @apply text-center text-2xl text-active-branch block bg-white rounded-t-card font-bold no-underline py-5;
+  @apply text-center text-h3 text-active-branch block bg-white rounded-t font-bold no-underline py-5;
 }
 
 .search-main {
-  @apply bg-white text-center rounded-t-card py-5 shadow-card;
+  @apply bg-white text-center rounded-t p-5 shadow-card;
   height: calc(100vh - 380px);
 
   .search-main-title {
-    @apply text-2xl font-bold;
+    @apply text-h3 font-bold;
   }
 
   .search-main-paragraph {
-    @apply text-2xl mb-12 mt-6;
+    @apply text-h3 mb-12 mt-6;
   }
 
   ui-filter-input-group-main {
diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.ts b/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.ts
index 2dbdbced9..77d616dc8 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.ts
+++ b/apps/page/customer-order/src/lib/customer-order-search/search-main/customer-order-search-main.component.ts
@@ -7,6 +7,7 @@ import { debounce, isEqual } from 'lodash';
 import { BehaviorSubject, combineLatest, Subscription } from 'rxjs';
 import { debounceTime, first, map, withLatestFrom } from 'rxjs/operators';
 import { CustomerOrderSearchStore } from '../customer-order-search.store';
+import { EnvironmentService } from '@core/environment';
 
 @Component({
   selector: 'page-customer-order-search-main',
@@ -28,10 +29,14 @@ export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy {
   private _subscriptions = new Subscription();
 
   get processId() {
-    return +this._activatedRoute.snapshot.data.processId;
+    return +this._activatedRoute.parent.parent.snapshot.data.processId;
   }
 
-  processId$ = this._activatedRoute.data.pipe(map((data) => +data.processId));
+  processId$ = this._activatedRoute.parent.parent.data.pipe(map((data) => +data.processId));
+
+  get isTablet() {
+    return this._environment.matchTablet();
+  }
 
   @ViewChild(UiFilterInputGroupMainComponent, { static: false })
   filterInputGroup: UiFilterInputGroupMainComponent;
@@ -41,7 +46,8 @@ export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy {
     private _cdr: ChangeDetectorRef,
     private _router: Router,
     private _activatedRoute: ActivatedRoute,
-    private _breadcrumb: BreadcrumbService
+    private _breadcrumb: BreadcrumbService,
+    private _environment: EnvironmentService
   ) {}
 
   ngOnInit() {
@@ -106,14 +112,29 @@ export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy {
       if (result.results.error) {
       } else {
         if (result.results.hits > 0) {
+          // if (this.isTablet) {
           if (result.results.hits === 1) {
             const orderItem = result.results.result[0];
-            this._router.navigate([this.getDetailsPath(orderItem, this.processId)]);
+            this._router.navigate([this.getDetailsPath(orderItem, this.processId)], {
+              queryParams: this._goodsOutSearchStore.filter.getQueryParams(),
+            });
           } else {
             this._router.navigate(['/kunde', this.processId, 'order', 'results'], {
               queryParams: this._goodsOutSearchStore.filter.getQueryParams(),
             });
           }
+          // } else {
+          //   const orderItem = result.results.result[0];
+          //   if (result.results.hits === 1) {
+          //     this._router.navigate(this.getDetailsPathDesktop(orderItem, this.processId), {
+          //       queryParams: this._goodsOutSearchStore.filter.getQueryParams(),
+          //     });
+          //   } else {
+          //     this._router.navigate(this.getDetailsPathDesktop(orderItem, this.processId), {
+          //       queryParams: this._goodsOutSearchStore.filter.getQueryParams(),
+          //     });
+          //   }
+          // }
         } else {
           this.message = 'keine Suchergebnisse';
         }
@@ -149,6 +170,34 @@ export class CustomerOrderSearchMainComponent implements OnInit, OnDestroy {
       : `/kunde/${processId}/order/details/order/${encodeURIComponent(item?.orderNumber)}/${item?.processingStatus}`;
   }
 
+  // getDetailsPathDesktop(item: OrderItemListItemDTO, processId: number) {
+  //   return item?.compartmentCode
+  //     ? [
+  //         '/kunde',
+  //         processId,
+  //         'order',
+  //         {
+  //           outlets: {
+  //             main: null,
+  //             left: 'results',
+  //             right: ['details', 'compartment', encodeURIComponent(item?.compartmentCode), item?.processingStatus],
+  //           },
+  //         },
+  //       ]
+  //     : [
+  //         '/kunde',
+  //         processId,
+  //         'order',
+  //         {
+  //           outlets: {
+  //             main: null,
+  //             left: 'results',
+  //             right: ['details', 'order', encodeURIComponent(item?.orderNumber), item?.processingStatus],
+  //           },
+  //         },
+  //       ];
+  // }
+
   queryChangeDebounce = debounce(async () => {
     this.queryChanged$.next(true);
     await this.updateQueryParams(this.processId);
diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.html b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.html
new file mode 100644
index 000000000..5cdf4f843
--- /dev/null
+++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.html
@@ -0,0 +1,45 @@
+<a
+  class="page-customer-order-item__item-card p-5 desktop:p-px-10 h-[212px] desktop:h-[181px] bg-white rounded"
+  [routerLink]="detailsLink"
+  [queryParams]="queryParams"
+  [queryParamsHandling]="!isTablet ? 'preserve' : ''"
+>
+  {{ item?.product?.name }}
+  <!-- <div class="page-search-result-item__item-thumbnail text-center mr-4 w-[50px] h-[79px]">
+    <img
+      class="page-search-result-item__item-image w-[50px] h-[79px]"
+      loading="lazy"
+      *ngIf="item?.imageId | thumbnailUrl; let thumbnailUrl"
+      [src]="thumbnailUrl"
+      [alt]="item?.product?.name"
+    />
+  </div>
+
+  <div class="grid-container-test">
+    <div
+      class="page-search-result-item__item-title font-bold text-h3"
+      [class.text-xl]="item?.product?.name?.length >= 35"
+      [class.text-lg]="item?.product?.name?.length >= 40"
+      [class.text-md]="item?.product?.name?.length >= 50"
+      [class.text-p3]="item?.product?.name?.length >= 60 || !isTablet"
+      [class.text-xs]="item?.product?.name?.length >= 100 || (!isTablet && item?.product?.name?.length >= 70)"
+    >
+      {{ item?.product?.name }}
+    </div>
+
+    <div class="page-search-result-item__item-special-comment font-bold text-p3">
+      {{ item?.specialComment }}
+    </div>
+
+    <div class="page-search-result-item__item-select-bullet justify-self-end">
+      <input
+        *ngIf="selectable"
+        (click)="$event.stopPropagation()"
+        [ngModel]="selected$ | async"
+        (ngModelChange)="setSelected()"
+        class="isa-select-bullet"
+        type="checkbox"
+      />
+    </div>
+  </div> -->
+</a>
diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.scss b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.scss
new file mode 100644
index 000000000..85bd97b1a
--- /dev/null
+++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.scss
@@ -0,0 +1,3 @@
+:host {
+  @apply flex flex-col w-full h-[212px] desktop:h-[181px] bg-white;
+}
diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.ts b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.ts
new file mode 100644
index 000000000..f7829baae
--- /dev/null
+++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-item.component.ts
@@ -0,0 +1,124 @@
+import { ChangeDetectionStrategy, Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
+import { Router } from '@angular/router';
+import { ApplicationService } from '@core/application';
+import { EnvironmentService } from '@core/environment';
+import { ComponentStore } from '@ngrx/component-store';
+import { OrderItemListItemDTO } from '@swagger/oms';
+import { isEqual } from 'lodash';
+import { map } from 'rxjs/operators';
+import { CustomerOrderSearchStore } from '../customer-order-search.store';
+
+export interface CustomerOrderItemComponentState {
+  item?: OrderItemListItemDTO;
+  selected: boolean;
+  selectable: boolean;
+}
+
+@Component({
+  selector: 'page-customer-order-item',
+  templateUrl: 'customer-order-item.component.html',
+  styleUrls: ['customer-order-item.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerOrderItemComponent extends ComponentStore<CustomerOrderItemComponentState> implements OnInit {
+  @Input()
+  get item() {
+    return this.get((s) => s.item);
+  }
+  set item(item: OrderItemListItemDTO) {
+    if (!isEqual(this.item, item)) {
+      this.patchState({ item });
+    }
+  }
+
+  readonly item$ = this.select((s) => s.item);
+
+  // selected$ = this._articleSearchService.selectedItemIds$.pipe(map((selectedItemIds) => selectedItemIds.includes(this.item?.id)));
+
+  @Input()
+  selected: boolean;
+
+  @Input()
+  get selectable() {
+    return this.get((s) => s.selectable);
+  }
+  set selectable(selectable: boolean) {
+    if (this.selectable !== selectable) {
+      this.patchState({ selectable });
+    }
+  }
+
+  @Output()
+  selectedChange = new EventEmitter<boolean>();
+
+  get isTablet() {
+    return this._environment.matchTablet();
+  }
+
+  get queryParams() {
+    const compartmentCode = this.item?.compartmentCode;
+    const archive = !!this._customerOrderStore.filter?.getQueryParams()?.main_archive || false;
+
+    if (compartmentCode) {
+      return {
+        buyerNumber: this.item?.buyerNumber,
+        archive,
+      };
+    } else {
+      return {
+        archive,
+      };
+    }
+  }
+
+  get detailsLink() {
+    const orderNumber = this.item?.orderNumber;
+    const processingStatus = this.item?.processingStatus;
+    const compartmentCode = this.item?.compartmentCode;
+    // if (this.isTablet) {
+    if (compartmentCode) {
+      return [
+        `/kunde/${this._applicationService.activatedProcessId}/order/details/compartment/${encodeURIComponent(
+          compartmentCode
+        )}/${processingStatus}`,
+      ];
+    } else {
+      return [
+        `/kunde/${this._applicationService.activatedProcessId}/order/details/order/${encodeURIComponent(orderNumber)}/${processingStatus}`,
+      ];
+    }
+    // } else {
+    //   if (compartmentCode) {
+    //     return [
+    //       '/kunde',
+    //       this._applicationService.activatedProcessId,
+    //       'order',
+    //       {
+    //         outlets: {
+    //           main: null,
+    //           left: 'results',
+    //           right: ['details', 'compartment', encodeURIComponent(compartmentCode), processingStatus],
+    //         },
+    //       },
+    //     ];
+    //   } else {
+    //     return [
+    //       '/kunde',
+    //       this._applicationService.activatedProcessId,
+    //       'order',
+    //       { outlets: { main: null, left: 'results', right: ['details', 'order', encodeURIComponent(orderNumber), processingStatus] } },
+    //     ];
+    //   }
+    // }
+  }
+
+  constructor(
+    private _environment: EnvironmentService,
+    private _customerOrderStore: CustomerOrderSearchStore,
+    private _applicationService: ApplicationService
+  ) {
+    super({ selected: false, selectable: false });
+  }
+
+  ngOnInit() {}
+}
diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.html b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.html
index ce9d5863d..6d0edf16a 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.html
+++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.html
@@ -1,7 +1,28 @@
-<div class="hits">{{ hits$ | async }} Titel</div>
+<div class="page-customer-order-search-results__header bg-background-liste flex flex-col items-end pb-4">
+  <!-- <a
+    [class.active]="hasFilter$ | async"
+    class="page-customer-order-search-results__filter h-14 rounded font-bold px-5 mb-4 text-lg bg-cadet-blue flex flex-row flex-nowrap items-center justify-center"
+    [routerLink]="filterRoute"
+    queryParamsHandling="preserve"
+  >
+    <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+    Filter
+  </a> -->
+
+  <div
+    *ngIf="hits$ | async; let hits"
+    class="page-customer-order-search-results__items-count inline-flex flex-row items-center pr-5 text-p3"
+  >
+    {{ hits ??
+      0 }}
+    Titel
+  </div>
+</div>
+
 <ui-scroll-container
   *ngIf="!(listEmpty$ | async); else emptyMessage"
-  [loading]="loading$ | async"
+  [showScrollbar]="false"
+  [showScrollArrow]="false"
   (reachEnd)="loadMore()"
   [deltaEnd]="150"
   [itemLength]="itemLength$ | async"
@@ -10,6 +31,22 @@
 >
   <ng-container *ngIf="processId$ | async; let processId">
     <shared-goods-in-out-order-group *ngFor="let bueryNumberGroup of items$ | async | groupBy: byBuyerNumberFn">
+      <!-- <div class="page-customer-order-search__items-list" *ngFor="let bueryNumberGroup of items$ | async | groupBy: byBuyerNumberFn">
+      <ng-container *ngIf="bueryNumberGroup.items[0]; let firstItem">
+        <div class="page-customer-order-search__item-header-group bg-white text-xl rounded-t p-4 font-bold mb-px-2">
+          <h3 class="mt-0 mb-4">
+            {{ firstItem?.organisation }}
+            <ng-container *ngIf="!!firstItem?.organisation && (!!firstItem?.firstName || !!firstItem?.lastName)"> - </ng-container>
+            {{ firstItem?.lastName }}
+            {{ firstItem?.firstName }}
+          </h3>
+          <h4 class="mt-0 mb-0">
+            {{ firstItem?.buyerNumber }}
+            ans lager (nicht abgeholt) bezahlt
+          </h4>
+        </div>
+      </ng-container> -->
+
       <ng-container *ngFor="let orderNumberGroup of bueryNumberGroup.items | groupBy: byOrderNumberFn; let lastOrderNumber = last">
         <ng-container
           *ngFor="let processingStatusGroup of orderNumberGroup.items | groupBy: byProcessingStatusFn; let lastProcessingStatus = last"
@@ -26,6 +63,17 @@
               [selected]="item | goodsOutItemSelected: selectedOrderItemSubsetIds"
               (selectedChange)="setSelectedItem(item, $event)"
             ></shared-goods-in-out-order-group-item>
+
+            <!-- <page-customer-order-item
+              *ngFor="let item of compartmentCodeGroup.items; let firstItem = first; trackBy: trackByFn"
+              class="mb-px-10"
+              [selectable]="item | goodsOutItemSelectable: selectionRules:selectedItems"
+              [selected]="item | goodsOutItemSelected: selectedOrderItemSubsetIds"
+              [item]="item"
+              (click)="navigateToDetails(processId, item)"
+              (selectedChange)="setSelectedItem(item, $event)"
+            ></page-customer-order-item> -->
+
             <div class="divider" *ngIf="!lastCompartmentCode"></div>
           </ng-container>
           <div class="divider" *ngIf="!lastProcessingStatus"></div>
diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.scss b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.scss
index 1e45ce1f5..d851c4141 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.scss
+++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.scss
@@ -1,13 +1,13 @@
+// :host {
+//   @apply box-border block h-[100vh] max-h-[calc(100vh-364px)] desktop:max-h-[calc(100vh-300px)];
+// }
+
 :host {
   @apply block relative;
 }
 
-.hits {
-  @apply text-active-customer text-right mb-3 font-semibold text-base;
-}
-
 .empty-message {
-  @apply bg-white text-center font-semibold text-inactive-customer py-10 rounded-card;
+  @apply bg-white text-center font-semibold text-inactive-customer py-10 rounded;
 }
 
 .divider {
@@ -18,6 +18,10 @@ shared-goods-in-out-order-group-item {
   @apply cursor-pointer;
 }
 
+// page-customer-order-item {
+//   @apply cursor-pointer;
+// }
+
 .actions {
   @apply fixed bottom-28 inline-grid grid-flow-col gap-7;
   left: 50%;
@@ -40,6 +44,10 @@ shared-goods-in-out-order-group-item {
   }
 }
 
+// ::ng-deep page-customer-order-search-results ui-scroll-container .scroll-container {
+//   max-height: calc(100vh - 25.5rem) !important;
+// }
+
 ::ng-deep .desktop page-goods-out-search-results ui-scroll-container {
   .scrollbar-gap::-webkit-scrollbar-track {
     margin-bottom: 7.25rem;
diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts
index 843ffb545..dd429edae 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts
+++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.ts
@@ -1,7 +1,7 @@
 import { Component, ChangeDetectionStrategy, OnInit, OnDestroy, ViewChild, TrackByFunction } from '@angular/core';
-import { debounceTime, first, map, shareReplay, takeUntil, withLatestFrom } from 'rxjs/operators';
+import { debounceTime, filter, first, map, shareReplay, takeUntil, withLatestFrom } from 'rxjs/operators';
 import { KeyValueDTOOfStringAndString, OrderItemListItemDTO } from '@swagger/oms';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, ChildrenOutletContexts, Params, Router } from '@angular/router';
 import { CustomerOrderSearchStore } from '../customer-order-search.store';
 import { BehaviorSubject, combineLatest, Observable, Subject, Subscription } from 'rxjs';
 import { BreadcrumbService } from '@core/breadcrumb';
@@ -11,6 +11,8 @@ import { OrderItemsContext } from '@domain/oms';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
 import { UiScrollContainerComponent } from '@ui/scroll-container';
 import { UiFilter } from '@ui/filter';
+import { EnvironmentService } from '@core/environment';
+import { isEqual } from 'lodash';
 
 export interface CustomerOrderSearchResultsState {
   selectedOrderItemSubsetIds: number[];
@@ -80,13 +82,51 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
 
   scrollTo: number;
 
+  filter$ = this._goodsOutSearchStore.filter$;
+
+  initialFilter$ = this.filter$.pipe(
+    filter((filter) => !!filter),
+    first()
+  );
+
+  hasFilter$ = this.filter$.pipe(
+    withLatestFrom(this.initialFilter$),
+    map(([filter, initialFilter]) => !isEqual(filter?.getQueryParams(), initialFilter?.getQueryParams()))
+  );
+
+  get isTablet() {
+    return this._environment.matchTablet();
+  }
+
+  get rightOutletParams(): Params {
+    return this._activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'right')?.snapshot?.params;
+  }
+
+  get filterRoute() {
+    const processId = this._activatedRoute?.parent?.snapshot?.data?.processId;
+    // if (!this.isTablet) {
+    //   const orderNumber = this.rightOutletParams?.orderNumber;
+    //   const compartmentCode = this.rightOutletParams?.compartmentCode;
+    //   const processingStatus = this.rightOutletParams?.processingStatus;
+    //   return [
+    //     '/kunde',
+    //     processId,
+    //     'order',
+    //     { outlets: { main: null, left: 'results', right: ['filter', orderNumber ?? compartmentCode, processingStatus] } },
+    //   ];
+    // } else {
+    return ['/kunde', processId, 'order', 'filter'];
+    // }
+  }
+
   constructor(
     private _goodsOutSearchStore: CustomerOrderSearchStore,
     private _router: Router,
     private _activatedRoute: ActivatedRoute,
     private _breadcrumb: BreadcrumbService,
     private _commandService: CommandService,
-    private _modal: UiModalService
+    private _modal: UiModalService,
+    private _environment: EnvironmentService
   ) {
     super({
       selectedOrderItemSubsetIds: [],
@@ -263,6 +303,7 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
     const compartmentCode = orderItem.compartmentCode;
     const archive = !!this._goodsOutSearchStore.filter?.getQueryParams()?.main_archive || false;
 
+    // if (this.isTablet) {
     if (compartmentCode) {
       this._router.navigate([`/kunde/${processId}/order/details/compartment/${encodeURIComponent(compartmentCode)}/${processingStatus}`], {
         queryParams: {
@@ -277,6 +318,46 @@ export class CustomerOrderSearchResultsComponent extends ComponentStore<Customer
         },
       });
     }
+    // } else {
+    //   if (compartmentCode) {
+    //     this._router.navigate(
+    //       [
+    //         '/kunde',
+    //         processId,
+    //         'order',
+    //         {
+    //           outlets: {
+    //             main: null,
+    //             left: 'results',
+    //             right: ['details', 'compartment', encodeURIComponent(compartmentCode), processingStatus],
+    //           },
+    //         },
+    //       ],
+    //       {
+    //         queryParamsHandling: 'preserve',
+    //         queryParams: {
+    //           buyerNumber: orderItem.buyerNumber,
+    //           archive,
+    //         },
+    //       }
+    //     );
+    //   } else {
+    //     this._router.navigate(
+    //       [
+    //         '/kunde',
+    //         processId,
+    //         'order',
+    //         { outlets: { main: null, left: 'results', right: ['details', 'order', encodeURIComponent(orderNumber), processingStatus] } },
+    //       ],
+    //       {
+    //         queryParamsHandling: 'preserve',
+    //         queryParams: {
+    //           archive,
+    //         },
+    //       }
+    //     );
+    //   }
+    // }
   }
 
   setSelectedItem(item: OrderItemListItemDTO, selected: boolean) {
diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.module.ts b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.module.ts
index a6310344e..3c768ffb6 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.module.ts
+++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.module.ts
@@ -8,10 +8,18 @@ import { CustomerOrderItemSelectablePipe } from './customer-order-item-selectabl
 import { CustomerOrderItemSelectedPipe } from './customer-order-item-selectede.pipe';
 import { UiSpinnerModule } from 'apps/ui/spinner/src/lib/ui-spinner.module';
 import { UiScrollContainerModule } from '@ui/scroll-container';
+import { UiIconModule } from '@ui/icon';
+import { RouterModule } from '@angular/router';
+import { CustomerOrderItemComponent } from './customer-order-item.component';
 
 @NgModule({
-  imports: [CommonModule, GoodsInOutOrderGroupModule, UiCommonModule, UiSpinnerModule, UiScrollContainerModule],
-  exports: [CustomerOrderSearchResultsComponent],
-  declarations: [CustomerOrderSearchResultsComponent, CustomerOrderItemSelectablePipe, CustomerOrderItemSelectedPipe],
+  imports: [CommonModule, RouterModule, GoodsInOutOrderGroupModule, UiCommonModule, UiIconModule, UiSpinnerModule, UiScrollContainerModule],
+  exports: [CustomerOrderSearchResultsComponent, CustomerOrderItemComponent],
+  declarations: [
+    CustomerOrderSearchResultsComponent,
+    CustomerOrderItemSelectablePipe,
+    CustomerOrderItemSelectedPipe,
+    CustomerOrderItemComponent,
+  ],
 })
 export class CustomerOrderSearchResultsModule {}
diff --git a/apps/page/customer-order/src/lib/customer-order-search/search-results/index.ts b/apps/page/customer-order/src/lib/customer-order-search/search-results/index.ts
index f41ea9e87..3a8c785b2 100644
--- a/apps/page/customer-order/src/lib/customer-order-search/search-results/index.ts
+++ b/apps/page/customer-order/src/lib/customer-order-search/search-results/index.ts
@@ -2,3 +2,4 @@ export * from './customer-order-item-selectable.pipe';
 export * from './customer-order-item-selectede.pipe';
 export * from './customer-order-search-results.component';
 export * from './customer-order-search-results.module';
+export * from './customer-order-item.component';
diff --git a/apps/page/customer-order/src/lib/customer-order.component.html b/apps/page/customer-order/src/lib/customer-order.component.html
index 8dd3d79a0..ae0f604e0 100644
--- a/apps/page/customer-order/src/lib/customer-order.component.html
+++ b/apps/page/customer-order/src/lib/customer-order.component.html
@@ -8,4 +8,19 @@
   </shared-branch-selector>
 </shared-breadcrumb>
 
+<!-- <ng-container *ngIf="isTablet; else desktop"> -->
 <router-outlet></router-outlet>
+<!-- </ng-container>
+
+<ng-template #desktop>
+  <router-outlet name="main"></router-outlet>
+  <div class="grid desktop:grid-cols-[31rem_auto]">
+    <div class="mr-6 hidden desktop:block">
+      <router-outlet name="left"></router-outlet>
+    </div>
+
+    <div>
+      <router-outlet name="right"></router-outlet>
+    </div>
+  </div>
+</ng-template> -->
diff --git a/apps/page/customer-order/src/lib/customer-order.component.ts b/apps/page/customer-order/src/lib/customer-order.component.ts
index 87c419725..025136783 100644
--- a/apps/page/customer-order/src/lib/customer-order.component.ts
+++ b/apps/page/customer-order/src/lib/customer-order.component.ts
@@ -3,6 +3,7 @@ import { ActivatedRoute } from '@angular/router';
 import { ApplicationService } from '@core/application';
 import { AuthService } from '@core/auth';
 import { BreadcrumbService } from '@core/breadcrumb';
+import { EnvironmentService } from '@core/environment';
 import { BranchDTO } from '@swagger/checkout';
 import { UiErrorModalComponent, UiModalService } from '@ui/modal';
 import { Observable } from 'rxjs';
@@ -19,6 +20,10 @@ export class CustomerOrderComponent implements OnInit {
 
   selectedBranch$: Observable<BranchDTO>;
 
+  get isTablet() {
+    return this._environmentService.matchTablet();
+  }
+
   onCustomerOrderDetailsPage$: Observable<boolean>;
 
   constructor(
@@ -26,6 +31,7 @@ export class CustomerOrderComponent implements OnInit {
     private _activatedRoute: ActivatedRoute,
     private _uiModal: UiModalService,
     private _breadcrumb: BreadcrumbService,
+    private _environmentService: EnvironmentService,
     public auth: AuthService
   ) {}
 
diff --git a/apps/page/customer/src/lib/create-customer/create-customer.scss b/apps/page/customer/src/lib/create-customer/create-customer.scss
index c5cf5ecea..50bd2a042 100644
--- a/apps/page/customer/src/lib/create-customer/create-customer.scss
+++ b/apps/page/customer/src/lib/create-customer/create-customer.scss
@@ -1,9 +1,9 @@
 :host {
-  @apply block bg-white rounded-card px-20 py-10;
+  @apply block bg-white rounded px-20 py-10;
 }
 
 h1.title {
-  @apply text-2xl font-bold text-center mb-6;
+  @apply text-h3 font-bold text-center mb-6;
 }
 
 p.description {
@@ -19,7 +19,7 @@ form {
 }
 
 button.cta-submit {
-  @apply fixed left-1/2 bottom-28 text-center bg-brand text-cta-l text-white font-bold px-7 py-3 rounded-full transform -translate-x-1/2 transition-all duration-200 ease-in-out;
+  @apply fixed left-1/2 bottom-28 text-center bg-brand text-p1 text-white font-bold px-7 py-3 rounded-full transform -translate-x-1/2 transition-all duration-200 ease-in-out;
 
   &:disabled {
     @apply bg-active-branch cursor-not-allowed;
diff --git a/apps/page/customer/src/lib/customer-details/address/address.component.scss b/apps/page/customer/src/lib/customer-details/address/address.component.scss
index 7a181f318..3077971e0 100644
--- a/apps/page/customer/src/lib/customer-details/address/address.component.scss
+++ b/apps/page/customer/src/lib/customer-details/address/address.component.scss
@@ -3,7 +3,7 @@
 }
 
 .card {
-  @apply bg-white rounded-card p-card;
+  @apply bg-white rounded p-card;
 }
 
 form {
@@ -32,15 +32,15 @@ h1 {
 }
 
 .default-address {
-  @apply flex-col justify-around text-cta-l mt-8;
+  @apply flex-col justify-around text-p1 mt-8;
 
   input {
-    @apply text-cta-l;
+    @apply text-p1;
   }
 }
 
 .create-customer-submit {
-  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full mt-8 my-4;
+  @apply border-none outline-none bg-brand text-white font-bold text-p1 px-px-25 py-px-15 rounded-full mt-8 my-4;
 
   &:disabled {
     @apply bg-inactive-branch;
diff --git a/apps/page/customer/src/lib/customer-details/customer-card/customer-card.component.scss b/apps/page/customer/src/lib/customer-details/customer-card/customer-card.component.scss
index d723a4717..31832f078 100644
--- a/apps/page/customer/src/lib/customer-details/customer-card/customer-card.component.scss
+++ b/apps/page/customer/src/lib/customer-details/customer-card/customer-card.component.scss
@@ -4,7 +4,7 @@
 }
 
 .title {
-  @apply text-page-heading font-bold;
+  @apply text-h2 font-bold;
 }
 
 .card-customer-orders,
@@ -35,7 +35,7 @@ a {
 }
 
 .info {
-  @apply text-2xl mb-px-35;
+  @apply text-h3 mb-px-35;
   padding-top: 70px;
 }
 
@@ -53,7 +53,7 @@ a {
 }
 
 .cancel-message {
-  @apply text-card-sub bg-transparent text-brand border-none font-bold pr-0 no-underline;
+  @apply text-xl bg-transparent text-brand border-none font-bold pr-0 no-underline;
 }
 
 .customer-card,
diff --git a/apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit.component.scss b/apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit.component.scss
index b948301fd..efbb2c4d9 100644
--- a/apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit.component.scss
+++ b/apps/page/customer/src/lib/customer-details/customer-data-edit/customer-data-edit.component.scss
@@ -1,12 +1,12 @@
 :host {
-  @apply flex flex-col box-border shadow-card rounded-card;
+  @apply flex flex-col box-border shadow-card rounded;
 }
 
 .header {
   @apply bg-white;
 
   h1 {
-    @apply text-center text-card-heading my-16 font-bold;
+    @apply text-center text-h3 my-16 font-bold;
   }
 }
 
@@ -29,7 +29,7 @@ form {
     @apply text-center my-8;
 
     button {
-      @apply rounded-full outline-none p-4 text-cta-l border-brand border-solid border-2 px-px-25 py-px-15 mx-4 font-bold;
+      @apply rounded-full outline-none p-4 text-p1 border-brand border-solid border-2 px-px-25 py-px-15 mx-4 font-bold;
 
       &.btn-cancel {
         @apply text-brand  bg-white;
diff --git a/apps/page/customer/src/lib/customer-details/customer-data/customer-data.component.scss b/apps/page/customer/src/lib/customer-details/customer-data/customer-data.component.scss
index 3c96ca818..ba1b9d6b0 100644
--- a/apps/page/customer/src/lib/customer-details/customer-data/customer-data.component.scss
+++ b/apps/page/customer/src/lib/customer-details/customer-data/customer-data.component.scss
@@ -3,7 +3,7 @@
 }
 
 .field {
-  @apply grid justify-items-start grid-flow-col flex-row gap-8 text-regular p-4 bg-white;
+  @apply grid justify-items-start grid-flow-col flex-row gap-8 text-p2 p-4 bg-white;
   grid-template-columns: max-content;
   .name {
   }
diff --git a/apps/page/customer/src/lib/customer-details/customer-details.component.scss b/apps/page/customer/src/lib/customer-details/customer-details.component.scss
index c35be1b80..2ddcbb9b1 100644
--- a/apps/page/customer/src/lib/customer-details/customer-details.component.scss
+++ b/apps/page/customer/src/lib/customer-details/customer-details.component.scss
@@ -4,17 +4,17 @@
 }
 
 .title {
-  @apply text-page-heading font-bold;
+  @apply text-h2 font-bold;
 }
 
 .info {
-  @apply text-2xl mt-1 mb-px-40;
+  @apply text-h3 mt-1 mb-px-40;
 }
 
 .card-customer-orders,
 .card-customer-card,
 .card-customer-details {
-  @apply bg-white rounded-t-card p-4 text-center;
+  @apply bg-white rounded-t p-4 text-center;
 
   box-shadow: 0 -2px 24px 0 #dce2e9;
 }
@@ -45,7 +45,7 @@ ui-radio-button {
 }
 
 .tags {
-  @apply grid grid-flow-col flex-row gap-4 justify-center items-center text-ucla-blue font-bold text-regular mb-px-40;
+  @apply grid grid-flow-col flex-row gap-4 justify-center items-center text-ucla-blue font-bold text-p2 mb-px-40;
 }
 
 .tag {
@@ -53,7 +53,7 @@ ui-radio-button {
 }
 
 .details {
-  @apply grid flex-col text-regular gap-4;
+  @apply grid flex-col text-p2 gap-4;
 
   .detail {
     @apply grid grid-flow-col justify-items-start flex-row gap-8;
@@ -71,7 +71,7 @@ ui-radio-button {
     }
 
     .edit-details {
-      @apply justify-self-end text-card-sub bg-transparent text-brand border-none font-bold rounded-full pr-0 no-underline;
+      @apply justify-self-end text-xl bg-transparent text-brand border-none font-bold rounded-full pr-0 no-underline;
     }
   }
 }
@@ -84,20 +84,20 @@ ui-inline-input {
   @apply bg-white flex flex-row justify-between p-4 items-center pt-px-40 pb-px-20;
 
   h3 {
-    @apply m-0 text-card-sub font-bold;
+    @apply m-0 text-xl font-bold;
   }
 }
 
 .button-add-address,
 .button-edit-address {
-  @apply p-0 text-card-sub bg-transparent text-brand border-none font-bold no-underline;
+  @apply p-0 text-xl bg-transparent text-brand border-none font-bold no-underline;
 }
 
 .card-customer-footer {
-  @apply p-4 py-px-25 sticky bottom-0 text-center rounded-b-card mt-px-2;
+  @apply p-4 py-px-25 sticky bottom-0 text-center rounded-b mt-px-2;
 
   button.cta-to-cart {
-    @apply px-px-20 py-px-15 text-card-sub bg-brand text-white border-none font-bold rounded-full;
+    @apply px-px-20 py-px-15 text-xl bg-brand text-white border-none font-bold rounded-full;
 
     &:disabled {
       @apply bg-inactive-branch;
@@ -110,9 +110,9 @@ ui-inline-input {
 }
 
 .button-customer-history {
-  @apply text-card-sub bg-transparent text-brand border-none font-bold rounded-full absolute right-0 top-0 py-px-5;
+  @apply text-xl bg-transparent text-brand border-none font-bold rounded-full absolute right-0 top-0 py-px-5;
 }
 
 input[type='radio'] {
-  @apply text-cta-l;
+  @apply text-p1;
 }
diff --git a/apps/page/customer/src/lib/customer-details/customer-order-details/customer-order-details.component.scss b/apps/page/customer/src/lib/customer-details/customer-order-details/customer-order-details.component.scss
index dc434f017..7e4a066f6 100644
--- a/apps/page/customer/src/lib/customer-details/customer-order-details/customer-order-details.component.scss
+++ b/apps/page/customer/src/lib/customer-details/customer-order-details/customer-order-details.component.scss
@@ -43,7 +43,7 @@
 }
 
 .title {
-  @apply text-page-heading font-bold justify-between mb-2;
+  @apply text-h2 font-bold justify-between mb-2;
 }
 
 .label {
@@ -62,7 +62,7 @@
   @apply mx-10;
 
   h2 {
-    @apply text-card-sub;
+    @apply text-xl;
   }
 }
 
diff --git a/apps/page/customer/src/lib/customer-details/customer-order-details/order-item-card/customer-order-item-card.component.scss b/apps/page/customer/src/lib/customer-details/customer-order-details/order-item-card/customer-order-item-card.component.scss
index 707cf9d66..5fdd45a48 100644
--- a/apps/page/customer/src/lib/customer-details/customer-order-details/order-item-card/customer-order-item-card.component.scss
+++ b/apps/page/customer/src/lib/customer-details/customer-order-details/order-item-card/customer-order-item-card.component.scss
@@ -42,7 +42,7 @@
 }
 
 .arrow-button {
-  @apply border-none bg-transparent outline-none text-regular text-ucla-blue font-bold;
+  @apply border-none bg-transparent outline-none text-p2 text-ucla-blue font-bold;
 
   ui-icon {
     @apply inline mx-1 align-middle;
@@ -65,7 +65,7 @@
 }
 
 .cta-history {
-  @apply text-base font-bold text-brand outline-none border-none bg-transparent mr-1;
+  @apply text-p2 font-bold text-brand outline-none border-none bg-transparent mr-1;
 }
 
 .item-format {
diff --git a/apps/page/customer/src/lib/customer-details/customer-orders/customer-orders.component.scss b/apps/page/customer/src/lib/customer-details/customer-orders/customer-orders.component.scss
index 81ed524a7..742e13c20 100644
--- a/apps/page/customer/src/lib/customer-details/customer-orders/customer-orders.component.scss
+++ b/apps/page/customer/src/lib/customer-details/customer-orders/customer-orders.component.scss
@@ -3,7 +3,7 @@
 }
 
 .title {
-  @apply text-page-heading font-bold;
+  @apply text-h2 font-bold;
 }
 
 .card-customer-card,
@@ -22,7 +22,7 @@
 }
 
 .header {
-  @apply bg-white rounded-card p-card;
+  @apply bg-white rounded p-card;
   box-shadow: 0px 19px 25px -10px white;
   height: 180px;
 }
@@ -32,15 +32,15 @@ a {
 }
 
 h1 {
-  @apply text-center text-page-heading;
+  @apply text-center text-h2;
 }
 
 .desc {
-  @apply text-center text-card-heading;
+  @apply text-center text-h3;
 }
 
 .desc-empty {
-  @apply text-center text-regular;
+  @apply text-center text-p2;
 }
 
 .orders {
@@ -77,7 +77,7 @@ h1 {
 }
 
 .details {
-  @apply text-brand text-cta-l font-bold no-underline;
+  @apply text-brand text-p1 font-bold no-underline;
   width: 8%;
   text-align: end;
 }
@@ -103,7 +103,7 @@ h1 {
 }
 
 .spin-text {
-  @apply fixed text-regular;
+  @apply fixed text-p2;
   top: 66%;
   left: 42%;
 }
diff --git a/apps/page/customer/src/lib/customer-details/shared/card-template/card-template.component.scss b/apps/page/customer/src/lib/customer-details/shared/card-template/card-template.component.scss
index 452c5c863..e69a14428 100644
--- a/apps/page/customer/src/lib/customer-details/shared/card-template/card-template.component.scss
+++ b/apps/page/customer/src/lib/customer-details/shared/card-template/card-template.component.scss
@@ -18,7 +18,7 @@ ui-icon {
 }
 
 .headline {
-  @apply text-wild-blue-yonder mt-px-15 text-sm font-bold;
+  @apply text-wild-blue-yonder mt-px-15 text-p3 font-bold;
 }
 
 .card-number,
@@ -32,7 +32,7 @@ ui-icon {
 }
 
 .button {
-  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full mt-px-15;
+  @apply border-none outline-none bg-brand text-white font-bold text-p1 px-px-25 py-px-15 rounded-full mt-px-15;
 }
 
 .barcode-field {
diff --git a/apps/page/customer/src/lib/customer-search/customer-search.component.scss b/apps/page/customer/src/lib/customer-search/customer-search.component.scss
index fea19223d..e1442d2d5 100644
--- a/apps/page/customer/src/lib/customer-search/customer-search.component.scss
+++ b/apps/page/customer/src/lib/customer-search/customer-search.component.scss
@@ -3,7 +3,7 @@
 }
 
 .filter {
-  @apply absolute font-sans flex items-center font-bold bg-wild-blue-yonder border-0 text-regular -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky;
+  @apply absolute font-sans flex items-center font-bold bg-wild-blue-yonder border-0 text-p2 -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky;
 
   min-width: 106px;
 
diff --git a/apps/page/customer/src/lib/customer-search/search-filter/search-filter.component.scss b/apps/page/customer/src/lib/customer-search/search-filter/search-filter.component.scss
index a80fa5c90..691541eb3 100644
--- a/apps/page/customer/src/lib/customer-search/search-filter/search-filter.component.scss
+++ b/apps/page/customer/src/lib/customer-search/search-filter/search-filter.component.scss
@@ -17,7 +17,7 @@
 
 button.apply-filter,
 .cta-reset-filter {
-  @apply border-none bg-brand text-white rounded-full py-4 px-cta-x-l text-cta-l font-bold;
+  @apply border-none bg-brand text-white rounded-full py-4 px-cta-x-l text-p1 font-bold;
   min-width: 201px;
 }
 
diff --git a/apps/page/customer/src/lib/customer-search/search-main/search-main.component.scss b/apps/page/customer/src/lib/customer-search/search-main/search-main.component.scss
index fd7365ffb..b22452a4b 100644
--- a/apps/page/customer/src/lib/customer-search/search-main/search-main.component.scss
+++ b/apps/page/customer/src/lib/customer-search/search-main/search-main.component.scss
@@ -3,11 +3,11 @@
 }
 
 .title {
-  @apply text-page-heading font-bold;
+  @apply text-h2 font-bold;
 }
 
 .info {
-  @apply text-2xl mt-5 mb-px-50;
+  @apply text-h3 mt-5 mb-px-50;
 }
 
 .card-create-customer,
diff --git a/apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.scss b/apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.scss
index 4e03a4f57..4926638a4 100644
--- a/apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.scss
+++ b/apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.scss
@@ -1,12 +1,12 @@
 :host {
-  @apply box-border flex flex-col p-card bg-white text-black rounded-card shadow-card text-regular;
+  @apply box-border flex flex-col p-card bg-white text-black rounded shadow-card text-p2;
 }
 
 .header {
   @apply flex justify-between items-center;
 
   .heading {
-    @apply text-card-heading font-bold p-0 m-0;
+    @apply text-h3 font-bold p-0 m-0;
   }
 
   .date {
diff --git a/apps/page/customer/src/lib/customer-search/search-results/search-results.component.scss b/apps/page/customer/src/lib/customer-search/search-results/search-results.component.scss
index a64abd761..3cb6d4e66 100644
--- a/apps/page/customer/src/lib/customer-search/search-results/search-results.component.scss
+++ b/apps/page/customer/src/lib/customer-search/search-results/search-results.component.scss
@@ -3,7 +3,7 @@
 }
 
 .hits {
-  @apply text-right bg-transparent text-regular font-semibold text-inactive-customer my-3;
+  @apply text-right bg-transparent text-p2 font-semibold text-inactive-customer my-3;
 }
 
 a {
@@ -11,7 +11,7 @@ a {
 }
 
 .scroll-container-footer {
-  @apply text-sm mx-auto mt-8 w-1/3 text-center text-ucla-blue font-semibold;
+  @apply text-p3 mx-auto mt-8 w-1/3 text-center text-ucla-blue font-semibold;
   min-height: 200px;
 
   a {
diff --git a/apps/page/customer/src/lib/modals/address-selection-modal/address-selection-modal.component.scss b/apps/page/customer/src/lib/modals/address-selection-modal/address-selection-modal.component.scss
index 5014f971b..0083d836a 100644
--- a/apps/page/customer/src/lib/modals/address-selection-modal/address-selection-modal.component.scss
+++ b/apps/page/customer/src/lib/modals/address-selection-modal/address-selection-modal.component.scss
@@ -4,15 +4,15 @@
 
 h2,
 p {
-  @apply text-center text-regular;
+  @apply text-center text-p2;
 }
 
 h2 {
-  @apply font-bold text-card-sub;
+  @apply font-bold text-xl;
 }
 
 ul {
-  @apply list-none text-regular -mx-4 p-0 mt-px-35;
+  @apply list-none text-p2 -mx-4 p-0 mt-px-35;
 
   li {
     @apply flex flex-row items-center justify-between border-glitter border-t-4 border-b-0 border-solid border-r-0 border-l-0 py-px-15 px-px-25;
@@ -22,7 +22,7 @@ ul {
     }
 
     button {
-      @apply border-none outline-none bg-transparent text-brand text-cta-l text-right font-bold;
+      @apply border-none outline-none bg-transparent text-brand text-p1 text-right font-bold;
     }
   }
 }
@@ -32,5 +32,5 @@ ul {
 }
 
 .select-btn {
-  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full my-8;
+  @apply border-none outline-none bg-brand text-white font-bold text-p1 px-px-25 py-px-15 rounded-full my-8;
 }
diff --git a/apps/page/customer/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss b/apps/page/customer/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss
index ff804ea31..51f49abb7 100644
--- a/apps/page/customer/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss
+++ b/apps/page/customer/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss
@@ -8,11 +8,11 @@ h2 {
 
 h2,
 p {
-  @apply text-center text-card-sub font-bold;
+  @apply text-center text-xl font-bold;
 }
 
 h2 {
-  @apply font-bold text-card-sub;
+  @apply font-bold text-xl;
 }
 
 p {
@@ -24,9 +24,9 @@ p {
 }
 
 .search-btn {
-  @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-cta-l px-px-25 py-px-15 rounded-full no-underline;
+  @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-p1 px-px-25 py-px-15 rounded-full no-underline;
 }
 
 .create-btn {
-  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full no-underline;
+  @apply border-none outline-none bg-brand text-white font-bold text-p1 px-px-25 py-px-15 rounded-full no-underline;
 }
diff --git a/apps/page/customer/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss b/apps/page/customer/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss
index a0c53a4c3..a83542c7e 100644
--- a/apps/page/customer/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss
+++ b/apps/page/customer/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss
@@ -16,11 +16,11 @@ h2 {
 
 h2,
 p {
-  @apply text-center text-card-sub font-bold;
+  @apply text-center text-xl font-bold;
 }
 
 h2 {
-  @apply font-bold text-card-sub;
+  @apply font-bold text-xl;
 }
 
 p {
@@ -32,9 +32,9 @@ p {
 }
 
 .search-btn {
-  @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-cta-l px-px-25 py-px-15 rounded-full no-underline;
+  @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-p1 px-px-25 py-px-15 rounded-full no-underline;
 }
 
 .create-btn {
-  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full no-underline;
+  @apply border-none outline-none bg-brand text-white font-bold text-p1 px-px-25 py-px-15 rounded-full no-underline;
 }
diff --git a/apps/page/customer/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html b/apps/page/customer/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html
index b98ec463f..580163b10 100644
--- a/apps/page/customer/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html
+++ b/apps/page/customer/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html
@@ -1,7 +1,7 @@
 <div class="font-bold text-center border-t border-b border-solid border-disabled-customer -mx-4 py-4">
   {{ customer?.communicationDetails?.email }}
 </div>
-<div class="grid grid-flow-row gap-1 text-sm font-bold border-b border-solid border-disabled-customer -mx-4 py-4 px-14">
+<div class="grid grid-flow-row gap-1 text-p3 font-bold border-b border-solid border-disabled-customer -mx-4 py-4 px-14">
   <span *ngIf="customer?.organisation?.name">{{ customer?.organisation?.name }}</span>
   <span>{{ customer?.lastName }} {{ customer?.firstName }}</span>
   <ng-container *ngIf="customer?.address; let address">
diff --git a/apps/page/customer/src/lib/shared/customer-type-selector/customer-type-selector.component.scss b/apps/page/customer/src/lib/shared/customer-type-selector/customer-type-selector.component.scss
index 7d9b1ba8c..782cc7918 100644
--- a/apps/page/customer/src/lib/shared/customer-type-selector/customer-type-selector.component.scss
+++ b/apps/page/customer/src/lib/shared/customer-type-selector/customer-type-selector.component.scss
@@ -1,5 +1,5 @@
 :host {
-  @apply flex flex-row flex-wrap text-card-sub justify-center;
+  @apply flex flex-row flex-wrap text-xl justify-center;
 }
 
 ui-checkbox {
diff --git a/apps/page/dashboard/src/lib/info-card/info-card.component.html b/apps/page/dashboard/src/lib/info-card/info-card.component.html
index c5c364fc6..b015c4a21 100644
--- a/apps/page/dashboard/src/lib/info-card/info-card.component.html
+++ b/apps/page/dashboard/src/lib/info-card/info-card.component.html
@@ -1,11 +1,11 @@
 <div class="info">
   <div class="title">{{ feed?.label }}</div>
-  <div class="text-2xl font-bold mt-2">{{ feed?.headline }}</div>
+  <div class="text-h3 font-bold mt-2">{{ feed?.headline }}</div>
   <div class="desc" [innerHtml]="feed?.desc"></div>
 </div>
 
 <div class="info-item" *ngFor="let item of feed?.items">
-  <div class="text-2xl font-bold">{{ item?.heading }}</div>
+  <div class="text-h3 font-bold">{{ item?.heading }}</div>
   <div class="desc" [innerHtml]="item?.text"></div>
 </div>
 
diff --git a/apps/page/dashboard/src/lib/kpi-card/kpi-card.component.scss b/apps/page/dashboard/src/lib/kpi-card/kpi-card.component.scss
index 056171df2..bd8a56622 100644
--- a/apps/page/dashboard/src/lib/kpi-card/kpi-card.component.scss
+++ b/apps/page/dashboard/src/lib/kpi-card/kpi-card.component.scss
@@ -20,7 +20,7 @@
 }
 
 .target-numbers {
-  @apply text-sm;
+  @apply text-p3;
   color: var(--page-dashboard-card-title-color);
 }
 
diff --git a/apps/page/dashboard/src/lib/products-card/product-card.component.html b/apps/page/dashboard/src/lib/products-card/product-card.component.html
index 8a8637fd2..d216582e5 100644
--- a/apps/page/dashboard/src/lib/products-card/product-card.component.html
+++ b/apps/page/dashboard/src/lib/products-card/product-card.component.html
@@ -1,6 +1,6 @@
 <div class="info">
   <div class="title">{{ feed?.label }}</div>
-  <div class="text-2xl font-bold mt-2">{{ feed?.headline }}</div>
+  <div class="text-h3 font-bold mt-2">{{ feed?.headline }}</div>
   <div class="desc" [innerHtml]="feed?.desc"></div>
 </div>
 
diff --git a/apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.component.scss b/apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.component.scss
index 9386bf45e..0985781c9 100644
--- a/apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.component.scss
+++ b/apps/page/goods-in/src/lib/goods-in-cleanup-list/goods-in-cleanup-list.component.scss
@@ -10,21 +10,21 @@
     margin-bottom: -16px;
 
     .cleanup-title {
-      @apply text-2xl font-bold m-0;
+      @apply text-h3 font-bold m-0;
     }
 
     .cleanup-paragraph {
-      @apply text-2xl m-0 mt-1;
+      @apply text-h3 m-0 mt-1;
     }
   }
 
   .hits {
-    @apply text-active-branch mb-3 font-semibold text-base;
+    @apply text-active-branch mb-3 font-semibold text-p2;
   }
 }
 
 .empty-message {
-  @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded-card;
+  @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded;
 }
 
 .divider {
diff --git a/apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.scss b/apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.scss
index 62635acb7..e417943fb 100644
--- a/apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.scss
+++ b/apps/page/goods-in/src/lib/goods-in-list/goods-in-list-item/goods-in-list-item.component.scss
@@ -7,7 +7,7 @@
   min-height: 60px;
 
   .instruction {
-    @apply text-base text-warning text-right;
+    @apply text-p2 text-warning text-right;
   }
 
   .info {
@@ -22,7 +22,7 @@
       }
 
       .buyer-number {
-        @apply text-base;
+        @apply text-p2;
       }
     }
 
@@ -157,11 +157,11 @@
   @apply absolute flex flex-col w-28 right-5;
 
   label {
-    @apply font-semibold text-small mb-1;
+    @apply font-semibold text-p3 mb-1;
   }
 
   .ssc-input {
-    @apply border-r-0 border-l-0 border-t-0 border-disabled-branch outline-none font-semibold text-cta-l;
+    @apply border-r-0 border-l-0 border-t-0 border-disabled-branch outline-none font-semibold text-p1;
     border-bottom-width: 2px;
   }
 
diff --git a/apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.scss b/apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.scss
index 059846f5a..376bc9ee9 100644
--- a/apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.scss
+++ b/apps/page/goods-in/src/lib/goods-in-list/goods-in-list.component.scss
@@ -7,11 +7,11 @@
   margin-bottom: -16px;
 
   .goods-in-list-title {
-    @apply text-2xl font-bold m-0;
+    @apply text-h3 font-bold m-0;
   }
 
   .goods-in-list-paragraph {
-    @apply text-2xl m-0 mb-6 mt-1;
+    @apply text-h3 m-0 mb-6 mt-1;
   }
 }
 
@@ -46,7 +46,7 @@ ui-order-by-filter {
 }
 
 .empty-message {
-  @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded-card;
+  @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded;
 }
 
 hr {
diff --git a/apps/page/goods-in/src/lib/goods-in-remission-preview/goods-in-remission-preview.component.scss b/apps/page/goods-in/src/lib/goods-in-remission-preview/goods-in-remission-preview.component.scss
index b96f1f335..fb4988725 100644
--- a/apps/page/goods-in/src/lib/goods-in-remission-preview/goods-in-remission-preview.component.scss
+++ b/apps/page/goods-in/src/lib/goods-in-remission-preview/goods-in-remission-preview.component.scss
@@ -10,21 +10,21 @@
     margin-bottom: -16px;
 
     .preview-title {
-      @apply text-2xl font-bold m-0;
+      @apply text-h3 font-bold m-0;
     }
 
     .preview-paragraph {
-      @apply text-2xl m-0 mt-1;
+      @apply text-h3 m-0 mt-1;
     }
   }
 
   .hits {
-    @apply text-active-branch mb-3 font-semibold text-base;
+    @apply text-active-branch mb-3 font-semibold text-p2;
   }
 }
 
 .empty-message {
-  @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded-card;
+  @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded;
 }
 
 .divider {
diff --git a/apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.scss b/apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.scss
index 88b8e82e3..3774343db 100644
--- a/apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.scss
+++ b/apps/page/goods-in/src/lib/goods-in-reservation/goods-in-reservation.component.scss
@@ -10,21 +10,21 @@
     margin-bottom: -16px;
 
     .reservations-title {
-      @apply text-2xl font-bold m-0;
+      @apply text-h3 font-bold m-0;
     }
 
     .reservations-paragraph {
-      @apply text-2xl m-0 mt-1;
+      @apply text-h3 m-0 mt-1;
     }
   }
 
   .hits {
-    @apply text-active-branch mb-3 font-semibold text-base;
+    @apply text-active-branch mb-3 font-semibold text-p2;
   }
 }
 
 .empty-message {
-  @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded-card;
+  @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded;
 }
 
 .divider {
diff --git a/apps/page/goods-in/src/lib/goods-in-search/goods-in-search.component.scss b/apps/page/goods-in/src/lib/goods-in-search/goods-in-search.component.scss
index cb8c3496e..7e4e651ca 100644
--- a/apps/page/goods-in/src/lib/goods-in-search/goods-in-search.component.scss
+++ b/apps/page/goods-in/src/lib/goods-in-search/goods-in-search.component.scss
@@ -3,7 +3,7 @@
 }
 
 .filter {
-  @apply absolute font-sans flex items-center font-bold bg-gray-400 border-0 text-regular -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky;
+  @apply absolute font-sans flex items-center font-bold bg-gray-400 border-0 text-p2 -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky;
   min-width: 106px;
 
   .label {
diff --git a/apps/page/goods-in/src/lib/goods-in-search/search-main/goods-in-search-main.component.scss b/apps/page/goods-in/src/lib/goods-in-search/search-main/goods-in-search-main.component.scss
index a1b92a410..f13533670 100644
--- a/apps/page/goods-in/src/lib/goods-in-search/search-main/goods-in-search-main.component.scss
+++ b/apps/page/goods-in/src/lib/goods-in-search/search-main/goods-in-search-main.component.scss
@@ -6,7 +6,7 @@
 .goods-in-list-reservation,
 .goods-in-list-cleanup,
 .goods-in-list-remission-preview {
-  @apply text-center text-xl text-inactive-branch block bg-white rounded-t-card font-bold no-underline py-4;
+  @apply text-center text-xl text-inactive-branch block bg-white rounded-t font-bold no-underline py-4;
 }
 
 .goods-in-list-reservation,
@@ -16,15 +16,15 @@
 }
 
 .search-main {
-  @apply bg-white text-center rounded-t-card py-5 shadow-card;
+  @apply bg-white text-center rounded-t py-5 shadow-card;
   height: calc(100vh - 510px);
 
   .search-main-title {
-    @apply text-2xl font-bold;
+    @apply text-h3 font-bold;
   }
 
   .search-main-paragraph {
-    @apply text-2xl mb-12 mt-6;
+    @apply text-h3 mb-12 mt-6;
   }
 
   ui-filter-input-group-main {
diff --git a/apps/page/goods-in/src/lib/goods-in-search/search-results/goods-in-search-results.component.scss b/apps/page/goods-in/src/lib/goods-in-search/search-results/goods-in-search-results.component.scss
index a3f04ae20..15f2d25a2 100644
--- a/apps/page/goods-in/src/lib/goods-in-search/search-results/goods-in-search-results.component.scss
+++ b/apps/page/goods-in/src/lib/goods-in-search/search-results/goods-in-search-results.component.scss
@@ -7,20 +7,20 @@
   margin-bottom: -16px;
 
   .goods-in-search-results-title {
-    @apply text-2xl font-bold m-0;
+    @apply text-h3 font-bold m-0;
   }
 
   .goods-in-search-results-paragraph {
-    @apply text-2xl m-0 mt-1;
+    @apply text-h3 m-0 mt-1;
   }
 }
 
 .hits {
-  @apply text-active-branch text-right mb-3 font-semibold text-base;
+  @apply text-active-branch text-right mb-3 font-semibold text-p2;
 }
 
 .empty-message {
-  @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded-card;
+  @apply bg-white text-center font-semibold text-inactive-branch py-10 rounded;
 }
 
 .divider {
diff --git a/apps/page/goods-out/src/lib/goods-out-search/goods-out-search.component.scss b/apps/page/goods-out/src/lib/goods-out-search/goods-out-search.component.scss
index 6a1428634..6bf059121 100644
--- a/apps/page/goods-out/src/lib/goods-out-search/goods-out-search.component.scss
+++ b/apps/page/goods-out/src/lib/goods-out-search/goods-out-search.component.scss
@@ -3,7 +3,7 @@
 }
 
 .filter {
-  @apply absolute font-sans flex items-center font-bold bg-wild-blue-yonder border-0 text-regular -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky;
+  @apply absolute font-sans flex items-center font-bold bg-wild-blue-yonder border-0 text-p2 -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky;
   min-width: 106px;
 
   .label {
diff --git a/apps/page/goods-out/src/lib/goods-out-search/search-main/goods-out-search-main.component.scss b/apps/page/goods-out/src/lib/goods-out-search/search-main/goods-out-search-main.component.scss
index df66b06ab..35ad3c406 100644
--- a/apps/page/goods-out/src/lib/goods-out-search/search-main/goods-out-search-main.component.scss
+++ b/apps/page/goods-out/src/lib/goods-out-search/search-main/goods-out-search-main.component.scss
@@ -3,19 +3,19 @@
 }
 
 .goods-out-list-navigation {
-  @apply text-center text-2xl text-active-branch block bg-white rounded-t-card font-bold no-underline py-5;
+  @apply text-center text-h3 text-active-branch block bg-white rounded-t font-bold no-underline py-5;
 }
 
 .search-main {
-  @apply bg-white text-center rounded-t-card py-5 shadow-card;
+  @apply bg-white text-center rounded-t py-5 shadow-card;
   height: calc(100vh - 380px);
 
   .search-main-title {
-    @apply text-2xl font-bold;
+    @apply text-h3 font-bold;
   }
 
   .search-main-paragraph {
-    @apply text-2xl mb-12 mt-6;
+    @apply text-h3 mb-12 mt-6;
   }
 
   ui-filter-input-group-main {
diff --git a/apps/page/goods-out/src/lib/goods-out-search/search-results/goods-out-search-results.component.scss b/apps/page/goods-out/src/lib/goods-out-search/search-results/goods-out-search-results.component.scss
index 1e45ce1f5..7cfd2c29e 100644
--- a/apps/page/goods-out/src/lib/goods-out-search/search-results/goods-out-search-results.component.scss
+++ b/apps/page/goods-out/src/lib/goods-out-search/search-results/goods-out-search-results.component.scss
@@ -3,11 +3,11 @@
 }
 
 .hits {
-  @apply text-active-customer text-right mb-3 font-semibold text-base;
+  @apply text-active-customer text-right mb-3 font-semibold text-p2;
 }
 
 .empty-message {
-  @apply bg-white text-center font-semibold text-inactive-customer py-10 rounded-card;
+  @apply bg-white text-center font-semibold text-inactive-customer py-10 rounded;
 }
 
 .divider {
diff --git a/apps/page/package-inspection/src/lib/components/package-details-list/package-details-list-item.component.scss b/apps/page/package-inspection/src/lib/components/package-details-list/package-details-list-item.component.scss
index 196c3496f..ad5cf29c0 100644
--- a/apps/page/package-inspection/src/lib/components/package-details-list/package-details-list-item.component.scss
+++ b/apps/page/package-inspection/src/lib/components/package-details-list/package-details-list-item.component.scss
@@ -65,7 +65,7 @@
 }
 
 .package-details-list-item__shelf-info {
-  @apply text-sm leading-7 text-ucla-blue;
+  @apply text-p3 leading-7 text-ucla-blue;
 }
 
 .package-details-list-item__inventory-quantity {
diff --git a/apps/page/package-inspection/src/lib/package-details/package-details.component.html b/apps/page/package-inspection/src/lib/package-details/package-details.component.html
index b25eacf4e..c16d10c94 100644
--- a/apps/page/package-inspection/src/lib/package-details/package-details.component.html
+++ b/apps/page/package-inspection/src/lib/package-details/package-details.component.html
@@ -1,5 +1,5 @@
 <div class="flex flex-row items-center h-14 bg-white relative rounded-t font-bold shadow-lg">
-  <h3 class="text-center grow font-bold text-2xl">Packstück-Prüfung</h3>
+  <h3 class="text-center grow font-bold text-h3">Packstück-Prüfung</h3>
 </div>
 <ng-container *ngIf="packageDetails$ | async; else loader; let packageDetails" (sharedOnInit)="calculateListHeight()">
   <div class="bg-background-liste">
diff --git a/apps/page/package-inspection/src/lib/package-result/package-result.component.html b/apps/page/package-inspection/src/lib/package-result/package-result.component.html
index 8fcc1edc8..6feef5999 100644
--- a/apps/page/package-inspection/src/lib/package-result/package-result.component.html
+++ b/apps/page/package-inspection/src/lib/package-result/package-result.component.html
@@ -1,5 +1,5 @@
 <div class="flex flex-row items-center h-14 bg-white relative rounded-t font-bold shadow-lg">
-  <h3 class="text-center grow font-bold text-2xl">Packstück-Prüfung</h3>
+  <h3 class="text-center grow font-bold text-h3">Packstück-Prüfung</h3>
   <button
     class="absolute right-0 top-0 h-14 rounded px-5 text-lg bg-cadet-blue grid grid-flow-col gap-2 items-center"
     type="button"
@@ -60,5 +60,5 @@
 </shell-filter-overlay>
 
 <ng-template #noResults>
-  <div class="bg-white text-2xl text-center pt-10 font-bold rounded-b h-[calc(100vh_-_370px)]">Keine Packstücke zur Kontrolle.</div>
+  <div class="bg-white text-h3 text-center pt-10 font-bold rounded-b h-[calc(100vh_-_370px)]">Keine Packstücke zur Kontrolle.</div>
 </ng-template>
diff --git a/apps/page/remission/src/lib/add-product/add-product.component.html b/apps/page/remission/src/lib/add-product/add-product.component.html
index bf3d0551a..ae3ee0149 100644
--- a/apps/page/remission/src/lib/add-product/add-product.component.html
+++ b/apps/page/remission/src/lib/add-product/add-product.component.html
@@ -1,5 +1,5 @@
-<div class="bg-white rounded-card py-12 px-8">
-  <h1 class="text-2xl font-bold text-center">Artikel hinzufügen</h1>
+<div class="bg-white rounded py-12 px-8">
+  <h1 class="text-h3 font-bold text-center">Artikel hinzufügen</h1>
   <p class="text-xl mt-4 text-center">
     Geben Sie die ISBN/EAN ein oder <br />
     öffnen Sie einen externen Scanner <br />
diff --git a/apps/page/remission/src/lib/create-remission/create-remission.component.html b/apps/page/remission/src/lib/create-remission/create-remission.component.html
index 221ccf486..ed40f3939 100644
--- a/apps/page/remission/src/lib/create-remission/create-remission.component.html
+++ b/apps/page/remission/src/lib/create-remission/create-remission.component.html
@@ -1,5 +1,5 @@
-<div class="block rounded-card p-4 bg-white">
-  <h1 class="text-2xl font-bold text-center">Warenbegleitschein eröffnen</h1>
+<div class="block rounded p-4 bg-white">
+  <h1 class="text-h3 font-bold text-center">Warenbegleitschein eröffnen</h1>
   <div class="text-center">
     <p class="text-xl mt-4">
       Um einen Warenbegleitschein zu <br />
diff --git a/apps/page/remission/src/lib/finish-remission/finish-remission.component.html b/apps/page/remission/src/lib/finish-remission/finish-remission.component.html
index d92bb016f..cd9a0b76b 100644
--- a/apps/page/remission/src/lib/finish-remission/finish-remission.component.html
+++ b/apps/page/remission/src/lib/finish-remission/finish-remission.component.html
@@ -5,7 +5,7 @@
     </div>
   </div>
 
-  <h1 class="font-bold text-2xl">Wanne abgeschlossen</h1>
+  <h1 class="font-bold text-h3">Wanne abgeschlossen</h1>
   <p class="text-xl mt-2">
     Legen Sie abschließend den "Blank<br />Beizettel" in die abgeschlossene<br />Wanne. Der Warenbegleitschein<br />wird nach Abschluss
     der<br />Remission versendet. Zum Öffnen<br />eines neuen Warenbegleitscheins<br />setzen Sie die Remission fort.
diff --git a/apps/page/remission/src/lib/finish-shipping-document/finish-shipping-document.component.html b/apps/page/remission/src/lib/finish-shipping-document/finish-shipping-document.component.html
index 77535432a..faa56a6be 100644
--- a/apps/page/remission/src/lib/finish-shipping-document/finish-shipping-document.component.html
+++ b/apps/page/remission/src/lib/finish-shipping-document/finish-shipping-document.component.html
@@ -1,5 +1,5 @@
 <div class="grid grid-flow-row text-center py-8 bg-white">
-  <h1 class="font-bold text-2xl">Wannennummer scannen</h1>
+  <h1 class="font-bold text-h3">Wannennummer scannen</h1>
   <p class="text-xl mt-2">Scannen Sie die Wannennummer<br />um den Warenbegleitschein<br />der Wanne zuordnen zu können.</p>
 
   <ui-searchbox
diff --git a/apps/page/remission/src/lib/remission-list/remission-filter/remission-filter.component.scss b/apps/page/remission/src/lib/remission-list/remission-filter/remission-filter.component.scss
index a15071c59..2b3abc40f 100644
--- a/apps/page/remission/src/lib/remission-list/remission-filter/remission-filter.component.scss
+++ b/apps/page/remission/src/lib/remission-list/remission-filter/remission-filter.component.scss
@@ -17,7 +17,7 @@
 
 button.apply-filter,
 .cta-reset-filter {
-  @apply border-none bg-brand text-white rounded-full py-4 px-cta-x-l text-cta-l font-bold;
+  @apply border-none bg-brand text-white rounded-full py-4 px-cta-x-l text-p1 font-bold;
   min-width: 201px;
 }
 
diff --git a/apps/page/remission/src/lib/remission-list/remission-list-item-loading/remission-list-item-loading.component.scss b/apps/page/remission/src/lib/remission-list/remission-list-item-loading/remission-list-item-loading.component.scss
index 046df5515..fe8354291 100644
--- a/apps/page/remission/src/lib/remission-list/remission-list-item-loading/remission-list-item-loading.component.scss
+++ b/apps/page/remission/src/lib/remission-list/remission-list-item-loading/remission-list-item-loading.component.scss
@@ -1,5 +1,5 @@
 :host {
-  @apply grid grid-flow-row gap-2 p-4 bg-white rounded-card w-full;
+  @apply grid grid-flow-row gap-2 p-4 bg-white rounded w-full;
   height: 368px;
   max-height: 368px;
 }
@@ -11,7 +11,7 @@
 
 .thumbnail {
   width: 70px;
-  @apply rounded-card h-px-100;
+  @apply rounded h-px-100;
 }
 
 .space {
diff --git a/apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.html b/apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.html
index 338c12bd7..b8a64d1b7 100644
--- a/apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.html
+++ b/apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.html
@@ -1,9 +1,9 @@
 <div class="item-header-details grid grid-flow-col w-full">
-  <div class="contributors text-black font-bold overflow-hidden text-base overflow-ellipsis whitespace-nowrap">
+  <div class="contributors text-black font-bold overflow-hidden text-p2 overflow-ellipsis whitespace-nowrap">
     <a [class.mr-2]="!last" *ngFor="let contributor of contributors; let last = last">{{ last ? contributor : contributor + ';' }}</a>
   </div>
   <h3
-    class="title font-bold text-2xl"
+    class="title font-bold text-h3"
     [class.xl]="item?.dto?.product?.name?.length >= 35"
     [class.lg]="item?.dto?.product?.name?.length >= 40"
     [class.md]="item?.dto?.product?.name?.length >= 50"
@@ -19,7 +19,7 @@
     {{ item.department }}
   </div>
 </div>
-<div *ngIf="showImpediment" class="grid grid-flow-col items-start text-base font-bold text-dark-goldenrod">
+<div *ngIf="showImpediment" class="grid grid-flow-col items-start text-p2 font-bold text-dark-goldenrod">
   <span
     >{{ item?.dto?.impediment?.comment ? item?.dto?.impediment?.comment : 'Restmenge' }}
     <ng-container *ngIf="item?.dto?.impediment?.attempts"> ({{ item?.dto?.impediment?.attempts }}) </ng-container>
@@ -27,7 +27,7 @@
 </div>
 <div class="product-data-grid grid gap-6 items-start">
   <div>
-    <img class="max-w-full max-h-full shadow rounded-card" src="{{ item.ean | productImage }}" alt="item.dto.product.name" />
+    <img class="max-w-full max-h-full shadow rounded" src="{{ item.ean | productImage }}" alt="item.dto.product.name" />
   </div>
 
   <div class="grid grid-flow-row gap-1 w-48">
@@ -84,7 +84,7 @@
     <button
       [disabled]="loading$ | async"
       *ngIf="enableChangeRemissionQuantity"
-      class="text-brand text-base font-bold px-6 py-3 cta-change-remission-quantity"
+      class="text-brand text-p2 font-bold px-6 py-3 cta-change-remission-quantity"
       (click)="addProductToShippingDocument()"
     >
       <ui-spinner [show]="loading$ | async">Remi-Menge / Platzierung ändern</ui-spinner>
@@ -92,7 +92,7 @@
     <button
       *ngIf="enableToRemit"
       [disabled]="loading$ | async"
-      class="bg-white border-brand border-solid border-2 text-brand font-bold text-base px-6 py-3 rounded-full h-12 cta-remit-item"
+      class="bg-white border-brand border-solid border-2 text-brand font-bold text-p2 px-6 py-3 rounded-full h-12 cta-remit-item"
       (click)="remit()"
     >
       <ui-spinner [show]="loading$ | async">Remittieren</ui-spinner>
@@ -102,7 +102,7 @@
 
 <ng-template #removeItem>
   <div *ngIf="item?.dto?.source === 'manually-added'" class="grid grid-flow-col justify-self-end gap-2">
-    <button [disabled]="loading$ | async" class="text-brand text-base font-bold px-6 py-3 cta-remove-item" (click)="removeReturnItem()">
+    <button [disabled]="loading$ | async" class="text-brand text-p2 font-bold px-6 py-3 cta-remove-item" (click)="removeReturnItem()">
       <ui-spinner [show]="loading$ | async">Entfernen</ui-spinner>
     </button>
   </div>
diff --git a/apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.scss b/apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.scss
index 43b43fac1..9c3208bcb 100644
--- a/apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.scss
+++ b/apps/page/remission/src/lib/remission-list/remission-list-item/remission-list-item.component.scss
@@ -1,5 +1,5 @@
 :host {
-  @apply grid grid-flow-row gap-2 p-4 bg-white rounded-card w-full;
+  @apply grid grid-flow-row gap-2 p-4 bg-white rounded w-full;
   height: 368px;
   max-height: 368px;
 }
@@ -31,11 +31,11 @@
 }
 
 .title.md {
-  @apply font-bold text-base;
+  @apply font-bold text-p2;
 }
 
 .title.sm {
-  @apply font-bold text-sm;
+  @apply font-bold text-p3;
 }
 
 .title.xs {
diff --git a/apps/page/remission/src/lib/remission-list/remission-list.component.html b/apps/page/remission/src/lib/remission-list/remission-list.component.html
index 566299dbd..15b41a6a2 100644
--- a/apps/page/remission/src/lib/remission-list/remission-list.component.html
+++ b/apps/page/remission/src/lib/remission-list/remission-list.component.html
@@ -16,7 +16,7 @@
   (scrolledIndexChange)="scrolledIndexChange($event)"
 >
   <div>
-    <h1 class="text-2xl font-bold text-center">Remission</h1>
+    <h1 class="text-h3 font-bold text-center">Remission</h1>
     <div class="text-center">
       <p class="text-xl mt-4">
         Wählen Sie den Bereich aus dem <br />
@@ -64,7 +64,7 @@
       </button>
     </p>
 
-    <h2 *ngIf="return$ | async" class="text-center font-bold text-2xl my-4">Wanne befüllen</h2>
+    <h2 *ngIf="return$ | async" class="text-center font-bold text-h3 my-4">Wanne befüllen</h2>
 
     <div class="mt-4 grid grid-flow-row gap-2" *ngIf="(selectedSource$ | async) === 'Abteilungsremission'">
       <page-required-capacities [requiredCapacities]="requiredCapacities$ | async"></page-required-capacities>
@@ -78,7 +78,7 @@
       <page-remission-list-item-loading *ngIf="fetching$ | async"></page-remission-list-item-loading>
       <div
         *ngIf="listEmpty$ | async"
-        class="bg-white text-center font-semibold text-inactive-branch py-10 rounded-card"
+        class="bg-white text-center font-semibold text-inactive-branch py-10 rounded"
         [ngSwitch]="showSelectDepartmenttext$ | async"
       >
         <span *ngSwitchCase="true">
diff --git a/apps/page/remission/src/lib/remission-list/remission-list.component.scss b/apps/page/remission/src/lib/remission-list/remission-list.component.scss
index 33b669306..0009900b1 100644
--- a/apps/page/remission/src/lib/remission-list/remission-list.component.scss
+++ b/apps/page/remission/src/lib/remission-list/remission-list.component.scss
@@ -9,13 +9,13 @@
 }
 
 .remission-list-result {
-  @apply list-none bg-white rounded-card mb-2;
+  @apply list-none bg-white rounded mb-2;
   height: 368px;
   max-height: 368px;
 }
 
 .filter {
-  @apply absolute font-sans flex items-center font-bold bg-inactive-branch border-0 text-regular -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky;
+  @apply absolute font-sans flex items-center font-bold bg-inactive-branch border-0 text-p2 -top-12 right-0 py-px-8 px-px-15 rounded-filter justify-center z-sticky;
 
   min-width: 106px;
 
diff --git a/apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details-item/shipping-document-details-item.component.html b/apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details-item/shipping-document-details-item.component.html
index d5112b3bb..312e8ccc9 100644
--- a/apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details-item/shipping-document-details-item.component.html
+++ b/apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details-item/shipping-document-details-item.component.html
@@ -1,7 +1,7 @@
 <div class="grid product-data-grid gap-8">
   <div>
     <img
-      class="max-w-full max-h-full shadow rounded-card"
+      class="max-w-full max-h-full shadow rounded"
       loading="lazy"
       *ngIf="item?.product?.ean | productImage; let url"
       [src]="url"
@@ -21,7 +21,7 @@
       <div class="font-bold col-span-3">{{ item.quantity }}x</div>
     </div>
     <div *ngIf="canRemoveItem" class="flex justify-end">
-      <button [disabled]="loading" class="text-card-sub bg-transparent text-brand border-none font-bold" (click)="removeItem.emit(item)">
+      <button [disabled]="loading" class="text-xl bg-transparent text-brand border-none font-bold" (click)="removeItem.emit(item)">
         <ui-spinner [show]="loading">
           Entfernen
         </ui-spinner>
diff --git a/apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details.component.html b/apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details.component.html
index ed4845406..5286eca78 100644
--- a/apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details.component.html
+++ b/apps/page/remission/src/lib/shared/shipping-document-details/shipping-document-details.component.html
@@ -1,14 +1,14 @@
-<div class="block rounded-card p-4 bg-white">
+<div class="block rounded p-4 bg-white">
   <div class="grid grid-flow-row gap-4">
     <button
       *ngIf="!completed"
-      class="justify-self-end text-card-sub bg-transparent text-brand border-none font-bold pr-0"
+      class="justify-self-end text-xl bg-transparent text-brand border-none font-bold pr-0"
       (click)="deleteReturn()"
     >
       Löschen
     </button>
 
-    <h3 class="font-bold text-2xl grid grid-flow-col">
+    <h3 class="font-bold text-h3 grid grid-flow-col">
       <span>Warenbegleitschein</span>
       <span class="text-right">#{{ firstReceipt.receiptNumber | shortReceiptNumber }}</span>
     </h3>
diff --git a/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.html b/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.html
index 48f3dac30..d303b3f40 100644
--- a/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.html
+++ b/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.html
@@ -1,5 +1,5 @@
 <div class="grid grid-flow-row gap-4">
-  <h3 class="font-bold text-2xl grid grid-flow-col items-center justify-start gap-2">
+  <h3 class="font-bold text-h3 grid grid-flow-col items-center justify-start gap-2">
     <div *ngIf="!completed" class="bg-brand rounded-full w-3 h-3"></div>
     #{{ firstReceipt.receiptNumber | shortReceiptNumber }}
   </h3>
diff --git a/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.scss b/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.scss
index f4402e8e3..92d7a5ea7 100644
--- a/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.scss
+++ b/apps/page/remission/src/lib/shipping-document-list/shipping-document-list-item/shipping-document-list-item.component.scss
@@ -1,3 +1,3 @@
 :host {
-  @apply block bg-white rounded-card p-4;
+  @apply block bg-white rounded p-4;
 }
diff --git a/apps/page/remission/src/lib/shipping-document-list/shipping-document-list.component.html b/apps/page/remission/src/lib/shipping-document-list/shipping-document-list.component.html
index 492345d12..6bedca10f 100644
--- a/apps/page/remission/src/lib/shipping-document-list/shipping-document-list.component.html
+++ b/apps/page/remission/src/lib/shipping-document-list/shipping-document-list.component.html
@@ -1,4 +1,4 @@
-<h1 class="text-center font-bold text-2xl mt-8">Warenbegleitscheine</h1>
+<h1 class="text-center font-bold text-h3 mt-8">Warenbegleitscheine</h1>
 
 <div class="grid grid-flow-row gap-2 mt-4">
   <a *ngFor="let return of returns$ | async" [routerLink]="['./', return.id]">
diff --git a/apps/page/task-calendar/src/lib/components/task-info/task-info.component.scss b/apps/page/task-calendar/src/lib/components/task-info/task-info.component.scss
index 78e5acec4..de47721b8 100644
--- a/apps/page/task-calendar/src/lib/components/task-info/task-info.component.scss
+++ b/apps/page/task-calendar/src/lib/components/task-info/task-info.component.scss
@@ -17,7 +17,7 @@
     @apply ml-4;
 
     .muted {
-      @apply text-cool-grey text-base font-semibold;
+      @apply text-cool-grey text-p2 font-semibold;
     }
   }
 }
@@ -95,7 +95,7 @@ hr {
     .copy-article-cta,
     .open-article-cta,
     .link-cta {
-      @apply bg-transparent justify-self-end border-none outline-none text-brand text-cta-l font-bold p-0;
+      @apply bg-transparent justify-self-end border-none outline-none text-brand text-p1 font-bold p-0;
     }
 
     .copy-article-cta {
diff --git a/apps/page/task-calendar/src/lib/components/task-list/task-list-group.component.scss b/apps/page/task-calendar/src/lib/components/task-list/task-list-group.component.scss
index 31f9055ff..887effdb7 100644
--- a/apps/page/task-calendar/src/lib/components/task-list/task-list-group.component.scss
+++ b/apps/page/task-calendar/src/lib/components/task-list/task-list-group.component.scss
@@ -17,7 +17,7 @@
     @apply flex flex-col text-right justify-center items-end;
 
     .cta-print {
-      @apply border-none outline-none bg-transparent text-brand text-cta-l font-bold pr-0;
+      @apply border-none outline-none bg-transparent text-brand text-p1 font-bold pr-0;
     }
   }
 
@@ -26,6 +26,6 @@
   }
 
   .muted {
-    @apply text-active-branch font-semibold text-sm;
+    @apply text-active-branch font-semibold text-p3;
   }
 }
diff --git a/apps/page/task-calendar/src/lib/components/task-searchbar/task-searchbar.component.html b/apps/page/task-calendar/src/lib/components/task-searchbar/task-searchbar.component.html
index edacf39c3..d74550d49 100644
--- a/apps/page/task-calendar/src/lib/components/task-searchbar/task-searchbar.component.html
+++ b/apps/page/task-calendar/src/lib/components/task-searchbar/task-searchbar.component.html
@@ -10,7 +10,15 @@
   </button>
 </div> -->
 
-<input #autofocus="uiAutofocus" autofocus type="text" [formControl]="control" (keydown.enter)="searchTasks()" placeholder="Suchen" />
+<input
+  id="searchbox"
+  #autofocus="uiAutofocus"
+  autofocus
+  type="text"
+  [formControl]="control"
+  (keydown.enter)="searchTasks()"
+  placeholder="Suchen"
+/>
 
 <div class="actions">
   <button class="clear" (click)="clearSearch(); autofocus.focus()" *ngIf="control.value.length">
diff --git a/apps/page/task-calendar/src/lib/containers/task-calendar-filter/task-calendar-filter.component.scss b/apps/page/task-calendar/src/lib/containers/task-calendar-filter/task-calendar-filter.component.scss
index d10b9a808..5a16ec532 100644
--- a/apps/page/task-calendar/src/lib/containers/task-calendar-filter/task-calendar-filter.component.scss
+++ b/apps/page/task-calendar/src/lib/containers/task-calendar-filter/task-calendar-filter.component.scss
@@ -21,7 +21,7 @@
 
 button.apply-filter,
 .cta-reset-filter {
-  @apply border-none bg-brand text-white rounded-full py-4 px-cta-x-l text-cta-l font-bold;
+  @apply border-none bg-brand text-white rounded-full py-4 px-cta-x-l text-p1 font-bold;
   min-width: 201px;
 }
 
diff --git a/apps/page/task-calendar/src/lib/modals/article-list/article-list-details/article-list-details.component.scss b/apps/page/task-calendar/src/lib/modals/article-list/article-list-details/article-list-details.component.scss
index 3f2f06b2e..e4055f59c 100644
--- a/apps/page/task-calendar/src/lib/modals/article-list/article-list-details/article-list-details.component.scss
+++ b/apps/page/task-calendar/src/lib/modals/article-list/article-list-details/article-list-details.component.scss
@@ -23,7 +23,7 @@ h1 {
     }
 
     .btn-cta-less {
-      @apply border-none bg-transparent outline-none text-regular text-ucla-blue font-bold px-5 self-start;
+      @apply border-none bg-transparent outline-none text-p2 text-ucla-blue font-bold px-5 self-start;
 
       ui-icon {
         @apply inline mx-1 align-middle;
diff --git a/apps/page/task-calendar/src/lib/modals/article-list/article-list-modal.component.scss b/apps/page/task-calendar/src/lib/modals/article-list/article-list-modal.component.scss
index 3f3753fab..f88196a41 100644
--- a/apps/page/task-calendar/src/lib/modals/article-list/article-list-modal.component.scss
+++ b/apps/page/task-calendar/src/lib/modals/article-list/article-list-modal.component.scss
@@ -25,7 +25,7 @@ h1 {
   }
 
   .btn-cta-more {
-    @apply border-none bg-transparent outline-none text-regular text-ucla-blue font-bold p-0;
+    @apply border-none bg-transparent outline-none text-p2 text-ucla-blue font-bold p-0;
 
     ui-icon {
       @apply inline mx-1 align-middle;
diff --git a/apps/page/task-calendar/src/lib/modals/info/info-modal.component.scss b/apps/page/task-calendar/src/lib/modals/info/info-modal.component.scss
index 25a9d5886..2ab573e06 100644
--- a/apps/page/task-calendar/src/lib/modals/info/info-modal.component.scss
+++ b/apps/page/task-calendar/src/lib/modals/info/info-modal.component.scss
@@ -21,7 +21,7 @@
 }
 
 h3 {
-  @apply absolute m-0 -top-4 p-4 pl-0 text-regular text-active-branch uppercase;
+  @apply absolute m-0 -top-4 p-4 pl-0 text-p2 text-active-branch uppercase;
 }
 
 .actions {
diff --git a/apps/page/task-calendar/src/lib/modals/pdf-viewer/pdf-viewer-modal.component.scss b/apps/page/task-calendar/src/lib/modals/pdf-viewer/pdf-viewer-modal.component.scss
index 00c91328b..2b8d83815 100644
--- a/apps/page/task-calendar/src/lib/modals/pdf-viewer/pdf-viewer-modal.component.scss
+++ b/apps/page/task-calendar/src/lib/modals/pdf-viewer/pdf-viewer-modal.component.scss
@@ -13,12 +13,12 @@ pdf-viewer {
   max-height: 99%;
 
   ::ng-deep .canvasWrapper {
-    @apply border-2 border-gray-200 border-solid rounded-card;
+    @apply border-2 border-gray-200 border-solid rounded;
     max-width: 99%;
     max-height: 99%;
   }
 }
 
 button.cta-print {
-  @apply fixed left-1/2 bottom-16 text-center bg-brand text-cta-l text-white font-bold px-7 py-3 rounded-full transform -translate-x-1/2 transition-all duration-200 ease-in-out;
+  @apply fixed left-1/2 bottom-16 text-center bg-brand text-p1 text-white font-bold px-7 py-3 rounded-full transform -translate-x-1/2 transition-all duration-200 ease-in-out;
 }
diff --git a/apps/page/task-calendar/src/lib/modals/preinfo/preinfo-modal.component.scss b/apps/page/task-calendar/src/lib/modals/preinfo/preinfo-modal.component.scss
index 25a9d5886..2ab573e06 100644
--- a/apps/page/task-calendar/src/lib/modals/preinfo/preinfo-modal.component.scss
+++ b/apps/page/task-calendar/src/lib/modals/preinfo/preinfo-modal.component.scss
@@ -21,7 +21,7 @@
 }
 
 h3 {
-  @apply absolute m-0 -top-4 p-4 pl-0 text-regular text-active-branch uppercase;
+  @apply absolute m-0 -top-4 p-4 pl-0 text-p2 text-active-branch uppercase;
 }
 
 .actions {
diff --git a/apps/page/task-calendar/src/lib/pages/task-search/task-search.component.scss b/apps/page/task-calendar/src/lib/pages/task-search/task-search.component.scss
index 60378a799..b3dce0bcb 100644
--- a/apps/page/task-calendar/src/lib/pages/task-search/task-search.component.scss
+++ b/apps/page/task-calendar/src/lib/pages/task-search/task-search.component.scss
@@ -7,7 +7,7 @@
 }
 
 .empty-message {
-  @apply bg-white text-center font-semibold text-inactive-customer py-10 rounded-card mt-4;
+  @apply bg-white text-center font-semibold text-inactive-customer py-10 rounded mt-4;
 }
 
 :host ::ng-deep ui-scroll-container .scroll-container {
diff --git a/apps/shared/components/branch-selector/src/lib/branch-selector.component.html b/apps/shared/components/branch-selector/src/lib/branch-selector.component.html
index 9be11fbab..951cd73b8 100644
--- a/apps/shared/components/branch-selector/src/lib/branch-selector.component.html
+++ b/apps/shared/components/branch-selector/src/lib/branch-selector.component.html
@@ -19,7 +19,7 @@
 </div>
 <ui-autocomplete class="shared-branch-selector-autocomplete z-modal w-full">
   <hr class="ml-3 text-[#9CB1C6]" *ngIf="autocompleteComponent?.opend" uiAutocompleteSeparator />
-  <p *ngIf="(filteredBranches$ | async)?.length > 0" class="text-base p-4 font-normal" uiAutocompleteLabel>
+  <p *ngIf="(filteredBranches$ | async)?.length > 0" class="text-p2 p-4 font-normal" uiAutocompleteLabel>
     Filialvorschläge
   </p>
   <button
diff --git a/apps/shared/components/branch-selector/src/lib/branch-selector.component.scss b/apps/shared/components/branch-selector/src/lib/branch-selector.component.scss
index 292e2c424..ac033414f 100644
--- a/apps/shared/components/branch-selector/src/lib/branch-selector.component.scss
+++ b/apps/shared/components/branch-selector/src/lib/branch-selector.component.scss
@@ -19,7 +19,7 @@
 }
 
 ::ng-deep shared-branch-selector ui-autocomplete .ui-autocomplete-output-wrapper {
-  @apply overflow-hidden overflow-y-auto max-w-content rounded-b-md;
+  @apply overflow-hidden overflow-y-auto rounded-b-md;
   max-height: 350px;
   width: 100%;
   left: unset;
@@ -28,6 +28,22 @@
   button {
     @apply py-2;
   }
+
+  @screen desktop-small {
+    @apply max-w-screen-desktop-small;
+  }
+
+  @screen desktop {
+    @apply max-w-screen-desktop;
+  }
+
+  @screen desktop-x-large {
+    @apply max-w-screen-desktop-x-large;
+  }
+
+  @screen desktop-xx-large {
+    @apply max-w-screen-desktop-xx-large;
+  }
 }
 
 .shared-branch-selector-autocomplete-option.shared-branch-selector-selected {
diff --git a/apps/shared/components/branch-selector/src/lib/branch-selector.component.ts b/apps/shared/components/branch-selector/src/lib/branch-selector.component.ts
index 854ca7abd..17c52be16 100644
--- a/apps/shared/components/branch-selector/src/lib/branch-selector.component.ts
+++ b/apps/shared/components/branch-selector/src/lib/branch-selector.component.ts
@@ -207,14 +207,18 @@ export class BranchSelectorComponent implements OnInit, OnDestroy, AfterViewInit
 
   clear() {
     this.setBranch();
-    this.emitValues();
     this.complete.next('');
+    this.onChange(undefined);
+    this.onTouched();
+    this.valueChange.emit(undefined);
   }
 
   emitValues(branch?: BranchDTO) {
-    this.onChange(branch);
-    this.onTouched();
-    this.valueChange.emit(branch);
+    if (!!branch) {
+      this.onChange(branch);
+      this.onTouched();
+      this.valueChange.emit(branch);
+    }
   }
 
   closeAndClearAutocomplete() {
diff --git a/apps/shared/components/filter-overlay/src/lib/filter-overlay.component.scss b/apps/shared/components/filter-overlay/src/lib/filter-overlay.component.scss
index 73e377d14..b4b094bf0 100644
--- a/apps/shared/components/filter-overlay/src/lib/filter-overlay.component.scss
+++ b/apps/shared/components/filter-overlay/src/lib/filter-overlay.component.scss
@@ -1,6 +1,21 @@
 div {
   @apply z-fixed mx-auto;
   height: calc(100vh - 8.375rem);
-  @apply w-content;
   background-color: var(--bg-color);
+
+  @screen desktop-small {
+    @apply max-w-screen-desktop-small;
+  }
+
+  @screen desktop {
+    @apply max-w-screen-desktop;
+  }
+
+  @screen desktop-x-large {
+    @apply max-w-screen-desktop-x-large;
+  }
+
+  @screen desktop-xx-large {
+    @apply max-w-screen-desktop-xx-large;
+  }
 }
diff --git a/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.html b/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.html
index 18e60be91..9a71b32c7 100644
--- a/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.html
+++ b/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.html
@@ -1,7 +1,7 @@
 <div>
-  <div class="inputs overflow-y-auto">
+  <div class="inputs">
     <button
-      class="ui-input"
+      class="ui-input border border-solid border-[#EDEFF0]"
       type="button"
       *ngFor="let input of uiInputGroup?.input"
       [class.active]="activeInput === input"
@@ -11,7 +11,12 @@
       <div class="grow">
         {{ input?.label }}
       </div>
-      <ui-icon icon="arrow_head" size="1rem"></ui-icon>
+      <span class="w-[14px] h-[14px] flex items-center justify-center text-h3 text-[#596470]" *ngIf="activeInput !== input"
+        ><ui-svg-icon icon="add"></ui-svg-icon
+      ></span>
+      <span class="w-[14px] h-[14px] flex items-center justify-center text-h3 text-black" *ngIf="activeInput === input"
+        ><ui-svg-icon class="mr-[1px]" icon="remove"></ui-svg-icon
+      ></span>
     </button>
   </div>
 </div>
diff --git a/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss b/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss
index f8a78eba7..96b97fbe9 100644
--- a/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss
+++ b/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss
@@ -1,34 +1,19 @@
 :host {
-  @apply grid grid-flow-col gap-2;
+  @apply grid grid-flow-col;
   grid-template-columns: 240px 1fr;
 }
 
-ui-icon {
-  @apply transition transform text-cool-grey;
-}
-
 .inputs {
   @apply grid grid-flow-row gap-2;
-  max-height: calc(100vh - 377px);
 
   .ui-input {
-    @apply flex flex-row items-center border-none outline-none p-4 font-bold text-base bg-white text-black text-left rounded-card transition transform;
-  }
-
-  .has-options {
-    @apply text-white bg-active-customer;
-
-    ui-icon {
-      @apply text-white;
-    }
+    @apply flex flex-row items-center outline-none p-4  text-lg bg-white text-black text-left rounded transition transform mr-2;
+    box-shadow: 0px 0px 10px rgba(220, 226, 233, 0.5);
   }
 
   .ui-input.active {
-    @apply text-black bg-white pr-6 -mr-2 rounded-r-none;
-
-    ui-icon {
-      @apply rotate-180 text-cool-grey;
-    }
+    @apply text-black bg-white font-bold pr-6 mr-0 rounded-r-none border-none;
+    box-shadow: 0px 6px 24px rgba(206, 212, 219, 0.8);
   }
 
   .space-right {
@@ -40,6 +25,13 @@ ui-icon {
   }
 }
 
+.has-options {
+  @apply text-black bg-white font-bold;
+  span {
+    @apply text-black;
+  }
+}
+
 ::ng-deep ui-filter-filter-group-filter .input-options-wrapper {
   min-height: 150px;
 }
diff --git a/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.html b/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.html
index 4b76be97b..b97033389 100644
--- a/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.html
+++ b/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.html
@@ -1,4 +1,5 @@
-<ui-searchbox
+<shared-searchbox
+  class="w-full"
   [placeholder]="uiInput?.placeholder"
   [query]="uiInput?.value"
   (queryChange)="onQueryChange($event)"
@@ -14,7 +15,7 @@
       {{ item.display }}
     </button>
   </ui-autocomplete>
-</ui-searchbox>
+</shared-searchbox>
 <ng-container *ngIf="showDescription && uiInput?.description">
   <button [uiOverlayTrigger]="tooltipContent" #tooltip="uiOverlayTrigger" class="info-tooltip-button" type="button">
     i
diff --git a/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.scss b/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.scss
index 2241b39f6..28ae3a8ae 100644
--- a/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.scss
+++ b/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.component.scss
@@ -3,10 +3,9 @@
 }
 
 .info-tooltip-button {
-  @apply border-font-customer border-2 border-solid bg-white rounded-md text-base font-bold absolute;
+  @apply border-font-customer ml-4 border-2 border-solid bg-white rounded-md text-p2 font-bold absolute;
   border-style: outset;
   width: 31px;
   height: 31px;
   top: 14px;
-  right: -45px;
 }
diff --git a/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.module.ts b/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.module.ts
index 014c8de30..222ea3da4 100644
--- a/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.module.ts
+++ b/apps/shared/components/filter/src/lib/filter-group/filter-input-group-main/filter-input-group-main.module.ts
@@ -3,12 +3,12 @@ import { CommonModule } from '@angular/common';
 
 import { FilterInputGroupMainComponent } from './filter-input-group-main.component';
 import { UiAutocompleteModule } from '@ui/autocomplete';
-import { UiSearchboxNextModule } from '@ui/searchbox';
 import { UiTooltipModule } from 'apps/ui/tooltip/src/public-api';
 import { UiCommonModule } from '@ui/common';
+import { SearchboxModule } from '@shared/components/searchbox';
 
 @NgModule({
-  imports: [CommonModule, UiCommonModule, UiSearchboxNextModule, UiAutocompleteModule, UiTooltipModule],
+  imports: [CommonModule, UiCommonModule, SearchboxModule, UiAutocompleteModule, UiTooltipModule],
   exports: [FilterInputGroupMainComponent],
   declarations: [FilterInputGroupMainComponent],
 })
diff --git a/apps/shared/components/filter/src/lib/filter.component.html b/apps/shared/components/filter/src/lib/filter.component.html
index 65244fa00..cebf3d3f8 100644
--- a/apps/shared/components/filter/src/lib/filter.component.html
+++ b/apps/shared/components/filter/src/lib/filter.component.html
@@ -1,10 +1,10 @@
-<ui-filter-filter-group-main [inputGroup]="uiFilter?.filter | group: 'main'"></ui-filter-filter-group-main>
-<ui-filter-input-group-main
+<shared-filter-filter-group-main [inputGroup]="uiFilter?.filter | group: 'main'"></shared-filter-filter-group-main>
+<shared-filter-input-group-main
   *ngIf="uiFilter?.input | group: 'main'; let inputGroupMain"
   [inputGroup]="inputGroupMain"
   (search)="emitSearch($event)"
   [loading]="loading"
   [hint]="hint"
   [scanner]="scanner"
-></ui-filter-input-group-main>
-<ui-filter-filter-group-filter [inputGroup]="uiFilter?.filter | group: 'filter'"></ui-filter-filter-group-filter>
+></shared-filter-input-group-main>
+<shared-filter-filter-group-filter [inputGroup]="uiFilter?.filter | group: 'filter'"></shared-filter-filter-group-filter>
diff --git a/apps/shared/components/filter/src/lib/filter.component.scss b/apps/shared/components/filter/src/lib/filter.component.scss
index 8e49b12c7..498212285 100644
--- a/apps/shared/components/filter/src/lib/filter.component.scss
+++ b/apps/shared/components/filter/src/lib/filter.component.scss
@@ -1,8 +1,8 @@
 :host {
-  @apply grid grid-flow-row gap-8;
+  @apply grid grid-flow-row gap-[1.875rem];
 }
 
-ui-filter-input-group-main {
+shared-filter-input-group-main {
   @apply mx-auto w-full;
   max-width: 600px;
 }
diff --git a/apps/shared/components/filter/src/lib/filter.component.ts b/apps/shared/components/filter/src/lib/filter.component.ts
index eb9b31605..b694a780f 100644
--- a/apps/shared/components/filter/src/lib/filter.component.ts
+++ b/apps/shared/components/filter/src/lib/filter.component.ts
@@ -1,4 +1,3 @@
-import { DOCUMENT } from '@angular/common';
 import {
   Component,
   ChangeDetectionStrategy,
@@ -7,11 +6,6 @@ import {
   SimpleChanges,
   Output,
   EventEmitter,
-  ElementRef,
-  Renderer2,
-  Inject,
-  AfterViewInit,
-  HostListener,
   ViewChild,
   ContentChildren,
   QueryList,
@@ -26,7 +20,7 @@ import { IFilter, Filter } from './tree/filter';
   styleUrls: ['filter.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class FilterComponent implements OnChanges, AfterViewInit {
+export class FilterComponent implements OnChanges {
   @Input()
   loading: boolean;
 
@@ -39,9 +33,6 @@ export class FilterComponent implements OnChanges, AfterViewInit {
   @Input()
   filter: IFilter;
 
-  @Input()
-  resizeInputOptionsToElement: string | HTMLElement;
-
   @Input()
   scanner = false;
 
@@ -55,7 +46,7 @@ export class FilterComponent implements OnChanges, AfterViewInit {
     return this.filter instanceof Filter && this.filter;
   }
 
-  constructor(private elementRef: ElementRef, private renderer: Renderer2, @Inject(DOCUMENT) private document: Document) {}
+  constructor() {}
 
   ngOnChanges({ filter }: SimpleChanges): void {
     if (filter) {
@@ -65,36 +56,6 @@ export class FilterComponent implements OnChanges, AfterViewInit {
     }
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => this.resizeInputOptions(), 500);
-  }
-
-  getHtmlElement(element: string | HTMLElement): HTMLElement {
-    return typeof element === 'string' ? this.document.querySelector(element) : element;
-  }
-
-  @HostListener('window:resize', ['$event'])
-  @HostListener('window:click', ['$event'])
-  resizeInputOptions() {
-    if (this.resizeInputOptionsToElement) {
-      const inputOptions = this.elementRef.nativeElement.querySelector('.input-options');
-      const targetElement = this.getHtmlElement(this.resizeInputOptionsToElement);
-
-      // set the max-height of the input-options to the height of the actions, depending on the distance between the two
-      if (inputOptions && targetElement) {
-        const distanceBetweenElements = this.getDistanceBetweenElements(inputOptions, targetElement) - 15;
-        this.renderer.setStyle(inputOptions, 'max-height', `${distanceBetweenElements}px`);
-      }
-    }
-  }
-
-  getDistanceBetweenElements(element1: HTMLElement, element2: HTMLElement) {
-    const rect1 = element1.getBoundingClientRect();
-    const rect2 = element2.getBoundingClientRect();
-
-    return Math.abs(rect1.top - rect2.top);
-  }
-
   emitSearch(query: string) {
     setTimeout(() => {
       this.search.emit(query);
diff --git a/apps/shared/components/filter/src/lib/index.ts b/apps/shared/components/filter/src/lib/index.ts
index 84f72a0c5..6da230fa4 100644
--- a/apps/shared/components/filter/src/lib/index.ts
+++ b/apps/shared/components/filter/src/lib/index.ts
@@ -5,5 +5,5 @@ export * from './providers';
 export * from './shared';
 export * from './testing';
 export * from './tree';
-export * from './ui-filter.component';
-export * from './ui-filter.module';
+export * from './filter.component';
+export * from './filter.module';
diff --git a/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.html b/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.html
index f50c6b6c1..24f1bdc4c 100644
--- a/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.html
+++ b/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.html
@@ -1,19 +1,21 @@
-<div class="order-by-filter-button-wrapper">
-  <button
-    [attr.data-label]="label"
-    class="order-by-filter-button"
-    type="button"
-    *ngFor="let label of orderByKeys"
-    (click)="setActive(label)"
-  >
-    <span>
-      {{ label }}
-    </span>
-    <ui-icon
-      [class.asc]="label === activeOrderBy?.label && !activeOrderBy.desc"
-      [class.desc]="label === activeOrderBy?.label && activeOrderBy.desc"
-      icon="arrow"
-      size="14px"
-    ></ui-icon>
-  </button>
-</div>
+<ng-container *ngIf="orderByKeys">
+  <div class="group w-full flex flex-row justify-between" *ngFor="let group of groupedOrderByKeys">
+    <button
+      *ngFor="let label of group.keys"
+      [attr.data-label]="label"
+      class="order-by-filter-button"
+      type="button"
+      (click)="setActive(label)"
+    >
+      <span>
+        {{ label }}
+      </span>
+      <ui-icon
+        [class.asc]="label === activeOrderBy?.label && !activeOrderBy.desc"
+        [class.desc]="label === activeOrderBy?.label && activeOrderBy.desc"
+        icon="arrow"
+        size="10px"
+      ></ui-icon>
+    </button>
+  </div>
+</ng-container>
diff --git a/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.scss b/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.scss
index 7edc535a1..4510c3d2c 100644
--- a/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.scss
+++ b/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.scss
@@ -1,28 +1,23 @@
 :host {
-  @apply box-border flex justify-center items-center;
-  min-height: 30px;
-}
-
-.order-by-filter-button-wrapper {
-  @apply flex flex-row items-center justify-center;
+  @apply box-border flex flex-row items-center justify-center h-[3.3125rem] w-full;
 }
 
 .order-by-filter-button {
-  @apply bg-transparent outline-none border-none text-regular font-bold flex flex-row justify-center items-center m-0 py-2 px-2;
+  @apply bg-transparent outline-none border-none text-p2 font-bold flex flex-row justify-center items-center;
 }
 
-::ng-deep .tablet ui-order-by-filter .order-by-filter-button {
+::ng-deep .tablet shared-order-by-filter .order-by-filter-button {
   @apply mx-0;
 }
 
 ui-icon {
-  @apply hidden transform ml-2 rounded-full p-1;
+  @apply hidden transform ml-1 rounded-full p-1 bg-[#AEB7C1] h-[20px] w-[20px] items-center justify-center;
   transition: 250ms all ease-in-out;
 }
 
 ui-icon.asc,
 ui-icon.desc {
-  @apply flex rounded-full visible text-white;
+  @apply flex rounded-full visible text-black;
 }
 
 ui-icon.asc {
@@ -32,23 +27,3 @@ ui-icon.asc {
 ui-icon.desc {
   @apply rotate-90;
 }
-
-::ng-deep .customer ui-order-by-filter {
-  ui-icon {
-    @apply bg-active-customer;
-  }
-
-  .order-by-filter-button {
-    @apply text-active-customer;
-  }
-}
-
-::ng-deep .branch ui-order-by-filter {
-  ui-icon {
-    @apply bg-active-branch;
-  }
-
-  .order-by-filter-button {
-    @apply text-active-branch;
-  }
-}
diff --git a/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.ts b/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.ts
index f17b8497b..ccdd5687a 100644
--- a/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.ts
+++ b/apps/shared/components/filter/src/lib/order-by-filter/order-by-filter.component.ts
@@ -1,5 +1,5 @@
 import { Component, ChangeDetectionStrategy, Input, ChangeDetectorRef, Output, EventEmitter, OnInit } from '@angular/core';
-import { UiOrderBy } from '@ui/filter';
+import { OrderBy } from '../tree';
 
 @Component({
   selector: 'shared-order-by-filter',
@@ -9,15 +9,48 @@ import { UiOrderBy } from '@ui/filter';
 })
 export class OrderByFilterComponent implements OnInit {
   @Input()
-  orderBy: UiOrderBy[];
+  orderBy: OrderBy[];
+
+  @Input()
+  groupBy?: number[] = []; // example input: [2, 1, 2] should result in: [[item, item], [item], [item, item]]
 
   @Output()
-  selectedOrderByChange = new EventEmitter<UiOrderBy>();
+  selectedOrderByChange = new EventEmitter<OrderBy>();
 
   get orderByKeys() {
     return this.orderBy?.map((ob) => ob.label).filter((key, idx, self) => self.indexOf(key) === idx);
   }
 
+  get groupedOrderByKeys(): Array<{ group: number; keys: string[] }> {
+    let orderByKeys = this.orderByKeys; // copy
+    const grouped: Array<{ group: number; keys: string[] }> = [];
+
+    if (this.groupBy?.length > 1) {
+      // group keys based on given input groupBy array structure
+      for (let [outerIndex, group] of this.groupBy?.entries()) {
+        let item = {
+          group: outerIndex,
+          keys: [],
+        };
+
+        for (let [innerIndex, key] of orderByKeys.entries()) {
+          if (innerIndex < group) {
+            item.keys.push(key);
+          } else {
+            break;
+          }
+        }
+
+        // Filter already grouped keys from initial array
+        orderByKeys = orderByKeys.filter((key) => !item.keys.find((itemKey) => itemKey === key));
+        grouped.push(item);
+      }
+    } else {
+      grouped.push({ group: 1, keys: this.orderByKeys });
+    }
+    return grouped;
+  }
+
   get activeOrderBy() {
     return this.orderBy?.find((f) => f.selected);
   }
@@ -31,7 +64,7 @@ export class OrderByFilterComponent implements OnInit {
   setActive(orderBy: string) {
     const active = this.activeOrderBy;
     const orderBys = this.orderBy?.filter((f) => f.label === orderBy);
-    let next: UiOrderBy;
+    let next: OrderBy;
 
     if (orderBys?.length) {
       if (active?.label !== orderBy) {
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-chip/filter-input-chip.component.scss b/apps/shared/components/filter/src/lib/shared/filter-input-chip/filter-input-chip.component.scss
index 701a0689b..79cc360ca 100644
--- a/apps/shared/components/filter/src/lib/shared/filter-input-chip/filter-input-chip.component.scss
+++ b/apps/shared/components/filter/src/lib/shared/filter-input-chip/filter-input-chip.component.scss
@@ -3,19 +3,9 @@
 }
 
 button.ui-filter-chip {
-  @apply grid grid-flow-col gap-2 items-center rounded-full text-base px-4 py-3 bg-white text-inactive-customer border-none font-bold;
-}
-
-/** styling branch bereich **/
-::ng-deep .branch ui-filter-input-chip button.ui-filter-chip {
-  @apply text-inactive-branch;
+  @apply grid grid-flow-col gap-2 items-center rounded-full text-p2 px-4 py-3 bg-[#EDEFF0]  border-none font-semibold;
 }
 
 button.ui-filter-chip.selected {
-  @apply bg-active-customer text-white;
-}
-
-/** styling branch bereich **/
-::ng-deep .branch ui-filter-input-chip button.ui-filter-chip.selected {
-  @apply bg-active-branch;
+  @apply bg-[#596470] text-white;
 }
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.html b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.html
index 4331a84c5..351ae16b8 100644
--- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.html
+++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.html
@@ -20,5 +20,5 @@
   </button>
 </div>
 <ng-container *ngIf="uiOption?.expanded">
-  <ui-input-option-bool class="ml-10" *ngFor="let subOption of uiOption?.values" [option]="subOption"></ui-input-option-bool>
+  <shared-input-option-bool class="ml-10" *ngFor="let subOption of uiOption?.values" [option]="subOption"></shared-input-option-bool>
 </ng-container>
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.scss b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.scss
index 7ec047c57..45f13ec4a 100644
--- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.scss
+++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-bool/filter-input-option-bool.component.scss
@@ -18,6 +18,6 @@
   }
 }
 
-::ng-deep ui-input-option-bool ui-checkbox ui-icon {
+::ng-deep shared-input-option-bool ui-checkbox ui-icon {
   @apply text-cool-grey;
 }
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss
index 323bc9003..28dadb1ab 100644
--- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss
+++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss
@@ -10,7 +10,7 @@
   @apply font-bold;
 
   button.cta-picker {
-    @apply bg-transparent text-base outline-none border-none font-bold inline-flex flex-row items-center justify-between;
+    @apply bg-transparent text-p2 outline-none border-none font-bold inline-flex flex-row items-center justify-between;
     width: 100px;
   }
 
@@ -28,13 +28,13 @@
   min-height: 24px;
 }
 
-::ng-deep ui-input-option-date-range ui-datepicker.dp-left {
+::ng-deep shared-input-option-date-range ui-datepicker.dp-left {
   .dp {
     left: 102px;
   }
 }
 
-::ng-deep ui-input-option-date-range ui-datepicker.dp-right {
+::ng-deep shared-input-option-date-range ui-datepicker.dp-right {
   .dp {
     right: -6px;
   }
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss
index 22f58c615..53bb6660d 100644
--- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss
+++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss
@@ -12,10 +12,9 @@
 }
 
 .ui-filter-date-range-validation {
-  @apply text-brand text-base font-bold;
+  @apply text-brand text-p2 font-bold;
 }
 
 ui-form-control input {
-  max-width: 200px;
-  @apply px-0 rounded-none;
+  @apply px-0 rounded-none max-w-[12rem];
 }
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.html b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.html
index e9255cd38..d7e40f099 100644
--- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.html
+++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.html
@@ -20,5 +20,5 @@
   </button>
 </div>
 <ng-container *ngIf="uiOption?.expanded">
-  <ui-input-option-tri-state *ngFor="let subOption of uiOption?.values" [option]="subOption"></ui-input-option-tri-state>
+  <shared-input-option-tri-state *ngFor="let subOption of uiOption?.values" [option]="subOption"></shared-input-option-tri-state>
 </ng-container>
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.scss b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.scss
index 36d2a6cb6..711d04eee 100644
--- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.scss
+++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-option-tri-state/filter-input-option-tri-state.component.scss
@@ -10,7 +10,7 @@ ui-switch {
   @apply px-4 py-2 flex flex-row justify-between items-center;
 
   .btn-expand {
-    @apply border-none outline-none bg-transparent text-cool-grey;
+    @apply border-none outline-none bg-transparent text-[#0556B4];
 
     ui-icon {
       @apply transition-all transform rotate-90;
@@ -22,6 +22,6 @@ ui-switch {
   }
 }
 
-::ng-deep ui-input-option-bool ui-checkbox ui-icon {
-  @apply text-cool-grey;
+::ng-deep shared-input-option-bool ui-checkbox ui-icon {
+  @apply text-[#0556B4];
 }
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.html b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.html
index 626625b35..437a83c43 100644
--- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.html
+++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.html
@@ -1,4 +1,4 @@
-<div class="input-options-wrapper">
+<div class="input-options-wrapper h-[calc(100vh-34.5rem)] desktop:h-[calc(100vh-28rem)]">
   <div class="hidden-overflow">
     <div class="input-options-header" [class.header-shadow]="scrollPersantage > 0">
       <button type="button" (click)="setSelected(undefined)">
@@ -13,30 +13,31 @@
       </button>
     </div>
   </div>
-  <div class="input-options-wrapper">
+  <div class="input-options-wrapper h-[calc(100vh-38.5rem)] desktop:h-[calc(100vh-32rem)]">
     <p class="input-desription">
       {{ uiInputOptions?.parent?.description }}
     </p>
     <ng-container *ngIf="uiInputOptions?.parent?.type === 2 || uiInputOptions?.parent?.type === 4">
       <div class="input-options" #inputOptionsConainter (scroll)="markForCheck()">
         <ng-container *ngIf="uiInputOptions?.parent?.type === 2">
-          <ui-input-option-bool
+          <shared-input-option-bool
             *ngFor="let option of uiInputOptions?.values"
             [option]="option"
             (optionChange)="optionChange($event)"
-          ></ui-input-option-bool>
+          ></shared-input-option-bool>
         </ng-container>
         <ng-container *ngIf="uiInputOptions?.parent?.type === 4">
-          <ui-input-option-tri-state *ngFor="let option of uiInputOptions?.values" [option]="option"> </ui-input-option-tri-state>
+          <shared-input-option-tri-state *ngFor="let option of uiInputOptions?.values" [option]="option"> </shared-input-option-tri-state>
         </ng-container>
       </div>
+      <div class="w-full h-[6rem]"></div>
       <button class="cta-scroll" [class.up]="scrollPersantage > 20" *ngIf="scrollable" (click)="scroll(20)">
         <ui-icon icon="arrow" size="20px"></ui-icon>
       </button>
     </ng-container>
-    <ui-input-option-date-range *ngIf="uiInputOptions?.parent?.type === 128" [options]="uiInputOptions?.values">
-    </ui-input-option-date-range>
-    <ui-input-option-number-range *ngIf="uiInputOptions?.parent?.type === 4096" [options]="uiInputOptions?.values">
-    </ui-input-option-number-range>
+    <shared-input-option-date-range *ngIf="uiInputOptions?.parent?.type === 128" [options]="uiInputOptions?.values">
+    </shared-input-option-date-range>
+    <shared-input-option-number-range *ngIf="uiInputOptions?.parent?.type === 4096" [options]="uiInputOptions?.values">
+    </shared-input-option-number-range>
   </div>
 </div>
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.scss b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.scss
index 7cb01dedb..57ea18b22 100644
--- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.scss
+++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.scss
@@ -1,14 +1,15 @@
 :host {
   @apply block;
+  box-shadow: 0px 6px 24px rgba(206, 212, 219, 0.8);
 }
 
 .input-desription {
-  @apply my-0 px-4 font-bold text-base;
+  @apply my-0 px-4 font-bold text-p2;
 }
 
 .input-options-wrapper {
   grid-template-rows: auto 1fr;
-  @apply grid bg-white rounded-card;
+  @apply grid bg-white rounded;
 }
 
 .hidden-overflow {
@@ -19,7 +20,7 @@
   @apply grid grid-flow-col justify-end items-center mb-2;
 
   button {
-    @apply bg-transparent p-4 text-base outline-none border-none font-semibold text-inactive-customer;
+    @apply bg-transparent p-4 text-p2 outline-none border-none text-[#0556B4];
   }
 
   &.header-shadow {
@@ -36,7 +37,8 @@
 }
 
 .cta-scroll {
-  @apply absolute bottom-4 right-4 shadow-cta border-none outline-none bg-white w-10 h-10 rounded-full flex flex-row flex-nowrap items-center justify-center text-active-customer;
+  @apply absolute bottom-4 right-4 border-none outline-none bg-white w-[3.625rem] h-[3.625rem] rounded-full flex flex-row flex-nowrap items-center justify-center text-[#596470];
+  box-shadow: 0px 0px 20px rgba(89, 100, 112, 0.5);
 
   ui-icon {
     @apply transition-transform transform rotate-90;
@@ -46,15 +48,3 @@
     @apply -rotate-90;
   }
 }
-
-::ng-deep .branch ui-filter-input-options {
-  .cta-scroll {
-    @apply text-cool-grey;
-  }
-
-  .input-options-header {
-    button {
-      @apply text-cool-grey;
-    }
-  }
-}
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.html b/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.html
index c2666a50c..b8ffa374b 100644
--- a/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.html
+++ b/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.html
@@ -1,4 +1,4 @@
 <ui-form-control [label]="input?.label" class="w-[200px]">
   <input type="text" [formControl]="control" />
 </ui-form-control>
-<p class="text-brand text-base font-bold" *ngIf="control.errors?.pattern">Ungültige {{ input?.label }}</p>
+<p class="text-brand text-p2 font-bold" *ngIf="control.errors?.pattern">Ungültige {{ input?.label }}</p>
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.ts b/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.ts
index 5c853b903..dc2a1efde 100644
--- a/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.ts
+++ b/apps/shared/components/filter/src/lib/shared/filter-input/input-text/input-text.component.ts
@@ -22,6 +22,12 @@ export class FilterInputTextComponent extends AbstractUiFilterInputDirective imp
     this.control.setValue(this.value);
     this.updateValidator();
 
+    const uiInputChangesSub = this.uiInput?.changes?.subscribe((changes) => {
+      if (this.control.value !== changes?.target?.value) this.control.setValue(changes?.target?.value);
+
+      this.updateValidator();
+    });
+
     const onInputChangeSub = this.onUiInputChange$.subscribe((input) => {
       if (this.control.value !== input.value) this.control.setValue(input.value);
 
@@ -32,6 +38,7 @@ export class FilterInputTextComponent extends AbstractUiFilterInputDirective imp
       if (this.value !== value) this.setValue(value);
     });
 
+    this._subscriptions.add(uiInputChangesSub);
     this._subscriptions.add(onInputChangeSub);
     this._subscriptions.add(onControlValueChangeSub);
   }
diff --git a/apps/shared/components/filter/src/lib/tree/filter.ts b/apps/shared/components/filter/src/lib/tree/filter.ts
index 44364e433..b44891315 100644
--- a/apps/shared/components/filter/src/lib/tree/filter.ts
+++ b/apps/shared/components/filter/src/lib/tree/filter.ts
@@ -201,6 +201,21 @@ export class Filter implements IFilter {
     return target;
   }
 
+  unselectAll() {
+    this.filter?.forEach((uiInputGroup) =>
+      uiInputGroup?.input?.forEach((uiInput) => {
+        uiInput?.setSelected(undefined);
+        uiInput?.setValue(undefined);
+      })
+    );
+    this.input?.forEach((uiInputGroup) =>
+      uiInputGroup?.input?.forEach((uiInput) => {
+        uiInput?.setSelected(undefined);
+        uiInput?.setValue(undefined);
+      })
+    );
+  }
+
   static getQueryParamsFromQueryTokenDTO(queryToken: QueryTokenDTO): Record<string, string> {
     const queryParams: Record<string, string> = {};
 
diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-covers/goods-in-out-order-details-covers.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-covers/goods-in-out-order-details-covers.component.scss
index 70f6fda3d..fd5400eeb 100644
--- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-covers/goods-in-out-order-details-covers.component.scss
+++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-covers/goods-in-out-order-details-covers.component.scss
@@ -17,11 +17,11 @@ ui-slider {
   }
 
   .quantity {
-    @apply flex justify-center text-small font-bold;
+    @apply flex justify-center text-p3 font-bold;
   }
 
   .compartment-code {
-    @apply absolute bottom-0 left-0 inline-block bg-black text-white opacity-80 rounded-md break-all text-center text-x-small;
+    @apply absolute bottom-0 left-0 inline-block bg-black text-white opacity-80 rounded-md break-all text-center text-p4;
     width: 53px;
   }
 
diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-header/goods-in-out-order-details-header.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-header/goods-in-out-order-details-header.component.scss
index 9deaa5127..a4e351b85 100644
--- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-header/goods-in-out-order-details-header.component.scss
+++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-header/goods-in-out-order-details-header.component.scss
@@ -1,5 +1,5 @@
 :host {
-  @apply block bg-white rounded-t-card p-4;
+  @apply block bg-white rounded-t p-4;
 }
 
 .goods-in-out-header-wrapper {
@@ -19,7 +19,7 @@
 }
 
 .goods-in-out-header-edit-cta {
-  @apply bg-transparent text-brand text-base font-bold border-none px-1 -mr-1;
+  @apply bg-transparent text-brand text-p2 font-bold border-none px-1 -mr-1;
 
   &:disabled {
     @apply text-inactive-customer;
@@ -78,7 +78,7 @@
 .cta-datepicker,
 .cta-pickup-deadline,
 .cta-pickup-preferred {
-  @apply flex flex-row border-none outline-none text-base font-bold bg-transparent items-center px-0 mx-0;
+  @apply flex flex-row border-none outline-none text-p2 font-bold bg-transparent items-center px-0 mx-0;
 
   ui-icon {
     @apply text-inactive-customer ml-2;
@@ -155,7 +155,7 @@
 }
 
 .cta-select-all {
-  @apply text-brand bg-transparent text-base font-bold outline-none border-none px-4 py-4 -mr-4;
+  @apply text-brand bg-transparent text-p2 font-bold outline-none border-none px-4 py-4 -mr-4;
 }
 
 .fetch-wrapper {
diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.html b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.html
index 692ca4f51..91edac314 100644
--- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.html
+++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.html
@@ -107,7 +107,7 @@
 
           <ng-container *ngIf="orderItem?.estimatedDelivery || orderItem?.estimatedShippingDate">
             <ng-container *ifRole="'CallCenter'">
-              <div class="value bg-[#D8DFE5] rounded-card w-max px-2">
+              <div class="value bg-[#D8DFE5] rounded w-max px-2">
                 <ng-container *ngIf="orderItem?.estimatedDelivery; else estimatedShippingDate">
                   {{ orderItem?.estimatedDelivery?.start | date: 'dd.MM.yy' }} und
                   {{ orderItem?.estimatedDelivery?.stop | date: 'dd.MM.yy' }}
diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.scss
index 8c70d7768..eb3f6566a 100644
--- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.scss
+++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-item/goods-in-out-order-details-item.component.scss
@@ -23,7 +23,7 @@ button {
 
 .goods-in-out-order-details-item-thumbnail {
   img {
-    @apply rounded-card shadow-cta;
+    @apply rounded shadow-cta;
     width: 53px;
     height: 85px;
   }
@@ -59,35 +59,35 @@ button {
 }
 
 .goods-in-out-order-details-item-comment {
-  @apply flex flex-row items-start p-4 bg-white text-base font-bold;
+  @apply flex flex-row items-start p-4 bg-white text-p2 font-bold;
 
   textarea {
-    @apply flex-grow bg-transparent border-none outline-none text-base mx-4;
+    @apply flex-grow bg-transparent border-none outline-none text-p2 mx-4;
     resize: none;
   }
 
   textarea.inactive {
     @apply text-warning font-bold;
-    @apply flex-grow bg-transparent border-none outline-none text-base mx-4 text-warning font-bold;
+    @apply flex-grow bg-transparent border-none outline-none text-p2 mx-4 text-warning font-bold;
     // ipad color fix
     -webkit-text-fill-color: rgb(190, 129, 0);
     opacity: 1;
   }
 
   input {
-    @apply flex-grow bg-transparent border-none outline-none text-base mx-4;
+    @apply flex-grow bg-transparent border-none outline-none text-p2 mx-4;
   }
 
   input.inactive {
     @apply text-warning font-bold;
-    @apply flex-grow bg-transparent border-none outline-none text-base mx-4 text-warning font-bold;
+    @apply flex-grow bg-transparent border-none outline-none text-p2 mx-4 text-warning font-bold;
     // ipad color fix
     -webkit-text-fill-color: rgb(190, 129, 0);
     opacity: 1;
   }
 
   button {
-    @apply bg-transparent text-brand font-bold text-base outline-none border-none;
+    @apply bg-transparent text-brand font-bold text-p2 outline-none border-none;
   }
 
   button.clear {
@@ -100,7 +100,7 @@ button {
 }
 
 .cta-more {
-  @apply flex flex-row items-center font-bold text-base bg-transparent outline-none border-none text-inactive-customer;
+  @apply flex flex-row items-center font-bold text-p2 bg-transparent outline-none border-none text-inactive-customer;
 
   ui-icon {
     @apply ml-2;
@@ -116,7 +116,7 @@ button {
 }
 
 .cta-history {
-  @apply text-base font-bold text-brand outline-none border-none bg-transparent -mr-1;
+  @apply text-p2 font-bold text-brand outline-none border-none bg-transparent -mr-1;
 }
 
 .cta-edit,
diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-tags/goods-in-out-order-details-tags.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-tags/goods-in-out-order-details-tags.component.scss
index 0e248786a..c4482b361 100644
--- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-tags/goods-in-out-order-details-tags.component.scss
+++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details-tags/goods-in-out-order-details-tags.component.scss
@@ -7,7 +7,7 @@
 }
 
 .goods-in-out-order-details-tag {
-  @apply w-auto text-base border border-solid bg-white border-inactive-customer py-px-10 px-5 font-bold text-inactive-customer rounded-full;
+  @apply w-auto text-p2 border border-solid bg-white border-inactive-customer py-px-10 px-5 font-bold text-inactive-customer rounded-full;
 
   &:focus:not(.selected) {
     @apply bg-white border-inactive-customer text-inactive-customer;
@@ -19,7 +19,7 @@
   }
 
   input {
-    @apply border-none outline-none text-base font-bold w-auto text-center text-inactive-customer bg-transparent p-0 m-0;
+    @apply border-none outline-none text-p2 font-bold w-auto text-center text-inactive-customer bg-transparent p-0 m-0;
   }
 
   input::placeholder {
diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details.component.scss
index 0ad57db2b..7187c538c 100644
--- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details.component.scss
+++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-details/goods-in-out-order-details.component.scss
@@ -11,10 +11,7 @@
 }
 
 .goods-in-out-order-details-action-wrapper {
-  @apply fixed bottom-28 inline-flex flex-row-reverse flex-wrap justify-center items-center;
-  width: 80%;
-  left: 50%;
-  transform: translateX(-50%);
+  @apply fixed bottom-28 left-[50%] inline-flex desktop:flex translate-x-[-50%] desktop:translate-x-[15%] w-[80%] desktop:w-fit flex-row-reverse flex-wrap justify-center items-center;
 
   .cta-action {
     @apply border-2 border-solid border-brand rounded-full py-3 px-6 font-bold text-lg outline-none self-end whitespace-nowrap m-2;
diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-edit/goods-in-out-order-edit.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-edit/goods-in-out-order-edit.component.scss
index 552c01db7..e4655d011 100644
--- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-edit/goods-in-out-order-edit.component.scss
+++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-edit/goods-in-out-order-edit.component.scss
@@ -1,5 +1,5 @@
 :host {
-  @apply rounded-t-card p-4 h-full;
+  @apply rounded-t p-4 h-full;
 }
 
 form {
@@ -7,7 +7,7 @@ form {
 }
 
 .header {
-  @apply py-6 px-5 my-1 bg-white text-card-heading font-bold;
+  @apply py-6 px-5 my-1 bg-white text-h3 font-bold;
 }
 
 ui-form-control {
@@ -64,15 +64,15 @@ input {
 }
 
 .actions {
-  @apply flex justify-center items-center fixed left-0 right-0;
+  @apply flex justify-center items-center desktop:translate-x-[60%] desktop:w-fit fixed left-0 right-0 desktop:left-[unset] desktop:right-[unset];
   bottom: 110px;
 
   .cta-close {
-    @apply border-2 border-solid border-brand bg-white text-brand font-bold text-cta-l py-3 px-6 rounded-full mr-8;
+    @apply border-2 border-solid border-brand bg-white text-brand font-bold text-p1 py-3 px-6 rounded-full mr-8;
   }
 
   .cta-save {
-    @apply border-2 border-solid border-brand bg-brand text-white font-bold text-cta-l py-3 px-6 rounded-full;
+    @apply border-2 border-solid border-brand bg-brand text-white font-bold text-p1 py-3 px-6 rounded-full;
 
     &:disabled {
       @apply bg-inactive-branch border-inactive-branch;
diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group-item.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group-item.component.scss
index cce81eae1..12bfe9920 100644
--- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group-item.component.scss
+++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group-item.component.scss
@@ -22,7 +22,7 @@
   @apply text-center mr-6;
   width: 78px;
   img {
-    @apply rounded-card w-auto h-auto;
+    @apply rounded w-auto h-auto;
     width: 60px;
     box-shadow: 0 0 18px 0 #b8b3b7;
   }
diff --git a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group.component.scss b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group.component.scss
index 3a6fb1a04..62ad02007 100644
--- a/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group.component.scss
+++ b/apps/shared/components/goods-in-out/src/lib/goods-in-out-order-group/goods-in-out-order-group.component.scss
@@ -1,9 +1,9 @@
 :host {
-  @apply grid grid-flow-row rounded-card;
+  @apply grid grid-flow-row rounded;
 }
 
 .goods-in-out-order-group-header {
-  @apply bg-white rounded-t-card p-4 pb-0 font-bold;
+  @apply bg-white rounded-t p-4 pb-0 font-bold;
 
   h3 {
     @apply mt-0 mb-4;
@@ -14,5 +14,5 @@
 }
 
 ::ng-deep shared-goods-in-out-order-group shared-goods-in-out-order-group-item:last-child {
-  @apply rounded-b-card;
+  @apply rounded-b;
 }
diff --git a/apps/shared/components/history/src/lib/history-log-entry/history-log-entry.component.scss b/apps/shared/components/history/src/lib/history-log-entry/history-log-entry.component.scss
index 3e7e242a1..85e4273cb 100644
--- a/apps/shared/components/history/src/lib/history-log-entry/history-log-entry.component.scss
+++ b/apps/shared/components/history/src/lib/history-log-entry/history-log-entry.component.scss
@@ -13,12 +13,12 @@
     grid-template-columns: 1fr 1fr 1fr;
 
     .old-value {
-      @apply rounded-card text-white py-1 px-4;
+      @apply rounded text-white py-1 px-4;
       background-color: #89949e;
     }
 
     .new-value {
-      @apply rounded-card text-white py-1 px-4;
+      @apply rounded text-white py-1 px-4;
       background-color: #134563;
     }
   }
diff --git a/apps/shared/components/input-control/src/lib/input-control.component.css b/apps/shared/components/input-control/src/lib/input-control.component.css
index 6be554cd5..a5921bb09 100644
--- a/apps/shared/components/input-control/src/lib/input-control.component.css
+++ b/apps/shared/components/input-control/src/lib/input-control.component.css
@@ -1,5 +1,5 @@
 .shared-input-control {
-  @apply relative leading-[21px] text-base font-bold;
+  @apply relative leading-[21px] text-p2 font-bold;
 }
 
 .shared-input-control:has(input.ng-invalid.ng-dirty) {
diff --git a/apps/shared/components/notification-channel-control/src/lib/notification-channel-control.component.scss b/apps/shared/components/notification-channel-control/src/lib/notification-channel-control.component.scss
index a7a2efdff..1e23ece8c 100644
--- a/apps/shared/components/notification-channel-control/src/lib/notification-channel-control.component.scss
+++ b/apps/shared/components/notification-channel-control/src/lib/notification-channel-control.component.scss
@@ -50,7 +50,7 @@
     @apply flex flex-col flex-grow pb-1;
 
     input {
-      @apply flex-grow outline-none text-base font-bold border-0 border-b-2 border-solid pb-px-2;
+      @apply flex-grow outline-none text-p2 font-bold border-0 border-b-2 border-solid pb-px-2;
     }
 
     input:disabled {
@@ -62,14 +62,14 @@
     }
 
     .error {
-      @apply text-right text-sm font-bold text-brand;
+      @apply text-right text-p3 font-bold text-brand;
     }
   }
 }
 
 .nc-generate {
   button {
-    @apply text-base font-bold text-brand outline-none border-none bg-transparent mr-4 absolute right-0;
+    @apply text-p2 font-bold text-brand outline-none border-none bg-transparent mr-4 absolute right-0;
   }
 }
 
diff --git a/apps/shared/components/searchbox/src/lib/searchbox.component.html b/apps/shared/components/searchbox/src/lib/searchbox.component.html
index ab268fdd6..e81c206e6 100644
--- a/apps/shared/components/searchbox/src/lib/searchbox.component.html
+++ b/apps/shared/components/searchbox/src/lib/searchbox.component.html
@@ -1,5 +1,6 @@
 <div class="searchbox-input-wrapper">
   <input
+    id="searchbox"
     class="searchbox-input"
     #input
     type="text"
diff --git a/apps/shared/components/searchbox/src/lib/searchbox.component.scss b/apps/shared/components/searchbox/src/lib/searchbox.component.scss
index 3c36dd516..d2edbfec0 100644
--- a/apps/shared/components/searchbox/src/lib/searchbox.component.scss
+++ b/apps/shared/components/searchbox/src/lib/searchbox.component.scss
@@ -1,5 +1,5 @@
 :host {
-  @apply inline-block bg-surface text-surface-content rounded-button;
+  @apply inline-block bg-surface text-surface-content rounded;
   box-shadow: 0px 6px 24px rgba(206, 212, 219, 0.8);
 }
 
@@ -13,11 +13,11 @@
 
 .searchbox-search-btn,
 .searchbox-scan-btn {
-  @apply w-14 h-14 bg-brand text-white rounded-button grid items-center justify-center flex-shrink-0 flex-grow-0;
+  @apply w-14 h-14 bg-brand text-white rounded grid items-center justify-center flex-shrink-0 flex-grow-0;
 }
 
 .searchbox-clear-btn {
-  @apply w-14 h-14 bg-transparent text-black rounded-button grid items-center justify-center flex-shrink-0 flex-grow-0;
+  @apply w-14 h-14 bg-transparent text-black rounded grid items-center justify-center flex-shrink-0 flex-grow-0;
 }
 
 .searchbox-load-indicator {
diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-modal.component.html b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-modal.component.html
index 99e6929f8..4c815b703 100644
--- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-modal.component.html
+++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-modal.component.html
@@ -1,4 +1,4 @@
-<h3 class="text-center font-bold text-2xl">Lieferung auswählen</h3>
+<h3 class="text-center font-bold text-h3">Lieferung auswählen</h3>
 <p class="text-center font-2xl mt-4">
   Wie möchten Sie die Artikel erhalten?
 </p>
diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/purchase-options-tile.component.css b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/purchase-options-tile.component.css
index add64ae27..58b12b925 100644
--- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/purchase-options-tile.component.css
+++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/purchase-options-tile.component.css
@@ -23,7 +23,7 @@
 }
 
 .purchase-options-tile__body {
-  @apply text-center text-sm;
+  @apply text-center text-p3;
 }
 
 .purchase-options-tile__actions {
@@ -37,7 +37,7 @@
 
 ::ng-deep app-pickup-purchase-options-tile shared-branch-selector .shared-branch-selector-input-container,
 ::ng-deep app-in-store-purchase-options-tile shared-branch-selector .shared-branch-selector-input-container {
-  @apply rounded-card;
+  @apply rounded;
 }
 
 ::ng-deep app-pickup-purchase-options-tile shared-branch-selector.shared-branch-selector-opend .shared-branch-selector-input-container,
diff --git a/apps/shared/services/ng-package.json b/apps/shared/services/ng-package.json
new file mode 100644
index 000000000..1a499e922
--- /dev/null
+++ b/apps/shared/services/ng-package.json
@@ -0,0 +1,6 @@
+{
+    "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+      "entryFile": "src/public-api.ts"
+    }
+  }
\ No newline at end of file
diff --git a/apps/shared/services/src/lib/base-navigation.service.ts b/apps/shared/services/src/lib/base-navigation.service.ts
new file mode 100644
index 000000000..01d2679ec
--- /dev/null
+++ b/apps/shared/services/src/lib/base-navigation.service.ts
@@ -0,0 +1,15 @@
+import { Injectable } from '@angular/core';
+import { NavigationDetails, OutletLocations, OutletParams } from './defs';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+
+@Injectable({ providedIn: 'root' })
+export abstract class BaseNavigationService {
+  constructor() {}
+
+  abstract getOutletLocations(activatedRoute: ActivatedRoute): OutletLocations;
+  abstract getOutletParams(activatedRoute: ActivatedRoute): OutletParams;
+  abstract mainOutletActive$(activatedRoute: ActivatedRoute): Observable<boolean>;
+  abstract mainOutletActive(activatedRoute: ActivatedRoute): boolean;
+  protected abstract _navigateTo(navigation: NavigationDetails): Promise<boolean>;
+}
diff --git a/apps/shared/services/src/lib/defs/index.ts b/apps/shared/services/src/lib/defs/index.ts
new file mode 100644
index 000000000..d36674c82
--- /dev/null
+++ b/apps/shared/services/src/lib/defs/index.ts
@@ -0,0 +1,5 @@
+// start:ng42.barrel
+export * from './navigation-details.model';
+export * from './outlet-locations.model';
+export * from './outlet-params.model';
+// end:ng42.barrel
diff --git a/apps/shared/services/src/lib/defs/navigation-details.model.ts b/apps/shared/services/src/lib/defs/navigation-details.model.ts
new file mode 100644
index 000000000..b93905e34
--- /dev/null
+++ b/apps/shared/services/src/lib/defs/navigation-details.model.ts
@@ -0,0 +1,5 @@
+export interface NavigationDetails {
+  routerLink: any[];
+  queryParams?: Record<string, string>;
+  queryParamsHandling?: 'merge' | 'preserve' | '';
+}
diff --git a/apps/shared/services/src/lib/defs/outlet-locations.model.ts b/apps/shared/services/src/lib/defs/outlet-locations.model.ts
new file mode 100644
index 000000000..6cc38c1b6
--- /dev/null
+++ b/apps/shared/services/src/lib/defs/outlet-locations.model.ts
@@ -0,0 +1,5 @@
+export interface OutletLocations {
+  main: string;
+  left: string;
+  right: string;
+}
diff --git a/apps/shared/services/src/lib/defs/outlet-params.model.ts b/apps/shared/services/src/lib/defs/outlet-params.model.ts
new file mode 100644
index 000000000..34d6891f0
--- /dev/null
+++ b/apps/shared/services/src/lib/defs/outlet-params.model.ts
@@ -0,0 +1,7 @@
+import { Params } from '@angular/router';
+
+export interface OutletParams {
+  main: Params;
+  left: Params;
+  right: Params;
+}
diff --git a/apps/shared/services/src/lib/navigation.service.spec.ts b/apps/shared/services/src/lib/navigation.service.spec.ts
new file mode 100644
index 000000000..3faeea3de
--- /dev/null
+++ b/apps/shared/services/src/lib/navigation.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NavigationService } from './navigation.service';
+
+describe('NavigationService', () => {
+  let service: NavigationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NavigationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/apps/shared/services/src/lib/navigation.service.ts b/apps/shared/services/src/lib/navigation.service.ts
new file mode 100644
index 000000000..634db9580
--- /dev/null
+++ b/apps/shared/services/src/lib/navigation.service.ts
@@ -0,0 +1,50 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { EnvironmentService } from '@core/environment';
+import { NavigationDetails, OutletLocations, OutletParams } from './defs';
+import { BaseNavigationService } from './base-navigation.service';
+import { Observable, combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Injectable({ providedIn: 'root' })
+export class NavigationService extends BaseNavigationService {
+  constructor(private _router: Router, private _environment: EnvironmentService) {
+    super();
+  }
+
+  getOutletLocations(activatedRoute: ActivatedRoute): OutletLocations {
+    return {
+      main: activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'main')?.snapshot?.routeConfig?.path,
+      left: activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'left')?.snapshot?.routeConfig?.path,
+      right: activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'right')?.snapshot?.routeConfig?.path,
+    };
+  }
+
+  getOutletParams(activatedRoute: ActivatedRoute): OutletParams {
+    return {
+      main: activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'main')?.snapshot?.params,
+      left: activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'left')?.snapshot?.params,
+      right: activatedRoute?.parent?.children?.find((childRoute) => childRoute?.outlet === 'right')?.snapshot?.params,
+    };
+  }
+
+  mainOutletActive$(activatedRoute: ActivatedRoute): Observable<boolean> {
+    return combineLatest([this._environment.matchDesktopSmall$, this._environment.matchDesktop$]).pipe(
+      map(
+        ([desktopSmallState, desktopState]) =>
+          !!this.getOutletLocations(activatedRoute)?.main && (desktopSmallState.matches || desktopState.matches)
+      )
+    );
+  }
+
+  mainOutletActive(activatedRoute: ActivatedRoute): boolean {
+    return !!this.getOutletLocations(activatedRoute)?.main && (this._environment.matchDesktopSmall() || this._environment.matchDesktop());
+  }
+
+  protected async _navigateTo(navigation: NavigationDetails): Promise<boolean> {
+    return await this._router.navigate(navigation.routerLink, {
+      queryParams: navigation?.queryParams ?? {},
+      queryParamsHandling: navigation?.queryParamsHandling ?? '',
+    });
+  }
+}
diff --git a/apps/shared/services/src/lib/product-catalog-navigation.service.spec.ts b/apps/shared/services/src/lib/product-catalog-navigation.service.spec.ts
new file mode 100644
index 000000000..c466ff1b7
--- /dev/null
+++ b/apps/shared/services/src/lib/product-catalog-navigation.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed } from '@angular/core/testing';
+import { ProductCatalogNavigationService } from './product-catalog-navigation.service';
+
+describe('ProductCatalogNavigationService', () => {
+  let service: ProductCatalogNavigationService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ProductCatalogNavigationService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/apps/shared/services/src/lib/product-catalog-navigation.service.ts b/apps/shared/services/src/lib/product-catalog-navigation.service.ts
new file mode 100644
index 000000000..e0f210df4
--- /dev/null
+++ b/apps/shared/services/src/lib/product-catalog-navigation.service.ts
@@ -0,0 +1,102 @@
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { EnvironmentService } from '@core/environment';
+import { NavigationService } from './navigation.service';
+
+@Injectable({ providedIn: 'root' })
+export class ProductCatalogNavigationService extends NavigationService {
+  constructor(_router: Router, _environment: EnvironmentService) {
+    super(_router, _environment);
+  }
+
+  getArticleSearchBasePath(processId?: number): any[] {
+    if (!!processId) {
+      return ['/kunde', processId, 'product', { outlets: { primary: 'search', main: null, left: 'search', right: 'filter' } }];
+    } else {
+      return ['/kunde', 'product', { outlets: { primary: 'search', main: null, left: 'search', right: 'filter' } }];
+    }
+  }
+
+  getArticleSearchResultsPath(processId: number): any[] {
+    return ['/kunde', processId, 'product', { outlets: { primary: 'results', main: 'results', left: null, right: null } }];
+  }
+
+  getArticleSearchResultsAndFilterPath({ processId, itemId }: { processId: number; itemId?: number }): any[] {
+    return [
+      '/kunde',
+      processId,
+      'product',
+      { outlets: { primary: 'filter', main: null, left: 'results', right: itemId ? ['filter', itemId] : 'filter' } },
+    ];
+  }
+
+  getArticleDetailsPath({ processId, itemId, ean }: { processId: number; itemId?: number; ean?: string }): any[] {
+    if (!!ean) {
+      return [
+        '/kunde',
+        processId,
+        'product',
+        { outlets: { primary: ['details', 'ean', ean], main: null, left: ['results', 'ean', ean], right: ['details', 'ean', ean] } },
+      ];
+    } else {
+      return [
+        '/kunde',
+        processId,
+        'product',
+        { outlets: { primary: ['details', itemId], main: null, left: ['results', itemId], right: ['details', itemId] } },
+      ];
+    }
+  }
+
+  async navigateToProductSearch({
+    processId,
+    queryParams,
+    queryParamsHandling,
+  }: {
+    processId: number;
+    queryParams?: Record<string, string>;
+    queryParamsHandling?: 'merge' | 'preserve' | '';
+  }) {
+    await this._navigateTo({
+      routerLink: this.getArticleSearchBasePath(processId),
+      queryParams,
+      queryParamsHandling,
+    });
+  }
+
+  async navigateToResults({
+    processId,
+    queryParams,
+    queryParamsHandling,
+  }: {
+    processId: number;
+    queryParams?: Record<string, string>;
+    queryParamsHandling?: 'merge' | 'preserve' | '';
+  }) {
+    await this._navigateTo({
+      routerLink: this.getArticleSearchResultsPath(processId),
+      queryParams,
+      queryParamsHandling,
+    });
+  }
+
+  async navigateToDetails({
+    processId,
+    itemId,
+    ean,
+    queryParams,
+    queryParamsHandling,
+  }: {
+    processId: number;
+    itemId?: number;
+    ean?: string;
+    queryParams?: Record<string, string>;
+    queryParamsHandling?: 'merge' | 'preserve' | '';
+  }) {
+    await this._navigateTo({
+      routerLink: this.getArticleDetailsPath({ processId, itemId, ean }),
+      queryParams,
+      queryParamsHandling,
+    });
+  }
+}
diff --git a/apps/shared/services/src/public-api.ts b/apps/shared/services/src/public-api.ts
new file mode 100644
index 000000000..208b7dad2
--- /dev/null
+++ b/apps/shared/services/src/public-api.ts
@@ -0,0 +1,8 @@
+/*
+ * Public API Surface of services
+ */
+
+export * from './lib/base-navigation.service';
+export * from './lib/product-catalog-navigation.service';
+export * from './lib/navigation.service';
+export * from './lib/defs';
diff --git a/apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.ts b/apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.ts
index db34950e3..c61ec9028 100644
--- a/apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.ts
+++ b/apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.ts
@@ -23,7 +23,7 @@ export class ShellProcessBarItemComponent implements OnInit, OnDestroy, OnChange
 
   latestBreadcrumb$: Observable<Breadcrumb> = NEVER;
 
-  routerLink$: Observable<string[]> = NEVER;
+  routerLink$: Observable<string[] | any[]> = NEVER;
 
   queryParams$: Observable<Object> = NEVER;
 
@@ -52,7 +52,9 @@ export class ShellProcessBarItemComponent implements OnInit, OnDestroy, OnChange
   }
 
   initRouterLink$() {
-    this.routerLink$ = this.latestBreadcrumb$.pipe(map((breadcrumb) => [breadcrumb?.path]));
+    this.routerLink$ = this.latestBreadcrumb$.pipe(
+      map((breadcrumb) => (breadcrumb?.path instanceof Array ? breadcrumb.path : [breadcrumb?.path]))
+    );
   }
 
   initQueryParams$() {
@@ -94,7 +96,11 @@ export class ShellProcessBarItemComponent implements OnInit, OnDestroy, OnChange
 
   async navigate(breadcrumb?: Breadcrumb) {
     if (breadcrumb) {
-      await this._router.navigate([breadcrumb.path], { queryParams: breadcrumb.params });
+      if (breadcrumb.path instanceof Array) {
+        await this._router.navigate(breadcrumb.path, { queryParams: breadcrumb.params });
+      } else {
+        await this._router.navigate([breadcrumb.path], { queryParams: breadcrumb.params });
+      }
     } else {
       await this._router.navigate(['/kunde/dashboard']);
     }
diff --git a/apps/shared/shell/src/lib/process-bar/process-bar.component.html b/apps/shared/shell/src/lib/process-bar/process-bar.component.html
index 7fbc58aa2..7c6e7a9ba 100644
--- a/apps/shared/shell/src/lib/process-bar/process-bar.component.html
+++ b/apps/shared/shell/src/lib/process-bar/process-bar.component.html
@@ -1,7 +1,7 @@
 <div class="grid grid-flow-col justify-start items-center h-full">
   <button
     type="button"
-    class="create-process-btn grid start-process-btn desktop:hidden grid-flow-col items-center justify-center ml-6 gap-[0.625rem]"
+    class="create-process-btn grid start-process-btn grid-flow-col items-center justify-center ml-6 gap-[0.625rem]"
     [cdkMenuTriggerFor]="menuTpl"
     type="menu"
   >
diff --git a/apps/shared/shell/src/lib/process-bar/process-bar.component.spec.ts b/apps/shared/shell/src/lib/process-bar/process-bar.component.spec.ts
index 51c1d8ee9..c36c6a152 100644
--- a/apps/shared/shell/src/lib/process-bar/process-bar.component.spec.ts
+++ b/apps/shared/shell/src/lib/process-bar/process-bar.component.spec.ts
@@ -1,15 +1,15 @@
-import { Spectator, byText, byTextContent, createComponentFactory } from '@ngneat/spectator';
+import { Spectator, byText, createComponentFactory } from '@ngneat/spectator';
 import { ShellProcessBarComponent } from './process-bar.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { ApplicationProcess, ApplicationService } from '@core/application';
 import { NEVER, of } from 'rxjs';
 import { MockComponent } from 'ng-mocks';
-import { CdkMenu, CdkMenuItem, CdkMenuModule, CdkMenuTrigger } from '@angular/cdk/menu';
+import { CdkMenu, CdkMenuModule, CdkMenuTrigger } from '@angular/cdk/menu';
 import { UISvgIconComponent } from '@ui/icon';
 import { TestScheduler } from 'rxjs/testing';
-import { Router } from '@angular/router';
 import { TemplateRef } from '@angular/core';
 import { ShellProcessBarItemComponent } from './process-bar-item/process-bar-item.component';
+import { ProductCatalogNavigationService } from '@shared/services';
 
 describe('ShellProcessBarComponent', () => {
   let spectator: Spectator<ShellProcessBarComponent>;
@@ -19,12 +19,13 @@ describe('ShellProcessBarComponent', () => {
     declarations: [MockComponent(UISvgIconComponent), MockComponent(ShellProcessBarItemComponent)],
   });
   let applicationService: jasmine.SpyObj<ApplicationService>;
-  let router: Router;
+  let catalogNavigationService: jasmine.SpyObj<ProductCatalogNavigationService>;
 
   let testScheduler: TestScheduler;
 
   beforeEach(() => {
     applicationService = jasmine.createSpyObj<ApplicationService>(['getSection$', 'getProcesses$', 'createProcess']);
+    catalogNavigationService = jasmine.createSpyObj<ProductCatalogNavigationService>(['navigateToProductSearch']);
 
     applicationService.getSection$.and.returnValue(NEVER);
     applicationService.getProcesses$.and.returnValue(NEVER);
@@ -35,11 +36,13 @@ describe('ShellProcessBarComponent', () => {
           provide: ApplicationService,
           useValue: applicationService,
         },
+        {
+          provide: ProductCatalogNavigationService,
+          useValue: catalogNavigationService,
+        },
       ],
     });
 
-    router = spectator.inject(Router);
-
     testScheduler = new TestScheduler((actual, expected) => {
       expect(actual).toEqual(expected);
     });
@@ -127,7 +130,7 @@ describe('ShellProcessBarComponent', () => {
       spectator.component.createProcess('product');
       const process: ApplicationProcess = { id: 0, name: '', section: 'customer' };
       spyOn(spectator.component, 'createCartProcess').and.returnValue(Promise.resolve(process));
-      spyOn(spectator.component, 'navigateTo').and.callFake(() => {});
+      spyOn(spectator.component, 'navigateTo').and.callFake((target: string, process: ApplicationProcess) => null);
 
       await spectator.component.createProcess('product');
 
@@ -137,13 +140,10 @@ describe('ShellProcessBarComponent', () => {
   });
 
   describe('navigateTo(target: string, process: ApplicationProcess)', () => {
-    it('should call router.navigate with the correct url', () => {
+    it('should call catalogNavigationService.navigateToProductSearch with the correct processId', () => {
       const process: ApplicationProcess = { id: 0, name: '', section: 'customer' };
-      const spy = spyOn(router, 'navigate');
-
       spectator.component.navigateTo('product', process);
-
-      expect(spy).toHaveBeenCalledWith(['/kunde', process.id, 'product']);
+      expect(catalogNavigationService.navigateToProductSearch).toHaveBeenCalledWith({ processId: process.id });
     });
   });
 
diff --git a/apps/shared/shell/src/lib/process-bar/process-bar.component.ts b/apps/shared/shell/src/lib/process-bar/process-bar.component.ts
index 6e2df7c42..49e54c155 100644
--- a/apps/shared/shell/src/lib/process-bar/process-bar.component.ts
+++ b/apps/shared/shell/src/lib/process-bar/process-bar.component.ts
@@ -1,6 +1,7 @@
 import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { ApplicationProcess, ApplicationService } from '@core/application';
+import { ProductCatalogNavigationService } from '@shared/services';
 import { NEVER, Observable } from 'rxjs';
 import { first, map, switchMap } from 'rxjs/operators';
 
@@ -19,7 +20,11 @@ export class ShellProcessBarComponent implements OnInit {
 
   trackByFn = (_: number, process: ApplicationProcess) => process.id;
 
-  constructor(private _app: ApplicationService, private _router: Router) {}
+  constructor(
+    private _app: ApplicationService,
+    private _router: Router,
+    private _catalogNavigationService: ProductCatalogNavigationService
+  ) {}
 
   ngOnInit() {
     this.initSection$();
@@ -62,7 +67,14 @@ export class ShellProcessBarComponent implements OnInit {
     return process;
   }
 
-  navigateTo(target: string, process: ApplicationProcess) {
-    this._router.navigate(['/kunde', process.id, target]);
+  async navigateTo(target: string, process: ApplicationProcess) {
+    switch (target) {
+      case 'product':
+        await this._catalogNavigationService.navigateToProductSearch({ processId: process.id });
+        break;
+      default:
+        this._router.navigate(['/kunde', process.id, target]);
+        break;
+    }
   }
 }
diff --git a/apps/shared/shell/src/lib/shell.component.css b/apps/shared/shell/src/lib/shell.component.css
index 30d264e13..e10c05ffd 100644
--- a/apps/shared/shell/src/lib/shell.component.css
+++ b/apps/shared/shell/src/lib/shell.component.css
@@ -1,8 +1,14 @@
 :host {
-  @apply block pt-[8.125rem] bg-background text-background-content min-h-screen max-w-content mx-auto;
+  @apply block pt-[8.125rem] bg-background text-background-content min-h-screen mx-auto max-w-[1920px];
 }
 
-@media (min-width: 1456px) {
+@screen desktop-xx-large {
+  :host {
+    @apply max-w-[2448px];
+  }
+}
+
+@media (min-width: 1956px) {
   .remove-padding {
     @apply pr-0;
   }
diff --git a/apps/shared/shell/src/lib/shell.component.html b/apps/shared/shell/src/lib/shell.component.html
index 81ca44055..e8b418fab 100644
--- a/apps/shared/shell/src/lib/shell.component.html
+++ b/apps/shared/shell/src/lib/shell.component.html
@@ -1,21 +1,23 @@
 <div class="fixed inset-x-0 top-0 z-fixed">
-  <shell-top-bar class="max-w-content mx-auto"></shell-top-bar>
+  <shell-top-bar class="max-w-[1920px] desktop-xx-large:max-w-[2448px] mx-auto"></shell-top-bar>
 </div>
 
 <shell-side-menu
-  class="fixed top-[4.625rem] bottom-0 z-[148] -translate-x-full transition-transform duration-200 ease-in-out desktop-small:translate-x-0 desktop-small:transition-none"
+  class="fixed top-[4.625rem] desktop-small:top-[8.125rem] bottom-0 z-[148] -translate-x-full transition-transform duration-200 ease-in-out desktop-small:translate-x-0 desktop-small:transition-none"
   [class.translate-x-0]="sideMenuOpen$ | async"
 ></shell-side-menu>
 
 <div class="fixed z-[149] desktop-small:z-[0] top-[4.625rem] inset-x-0">
-  <div class="max-w-content mx-auto flex flex-row">
-    <div class="w-0 desktop-small:w-[10.5rem] h-px shrink-0"></div>
+  <div class="max-w-[1920px] desktop-xx-large:max-w-[2448px] mx-auto flex flex-row">
     <shell-process-bar class="grow"></shell-process-bar>
   </div>
 </div>
 
-<main class="ml-0 desktop-small:ml-[10.5rem] p-4 remove-padding" (click)="closeSideMenu()">
-  <div class="mx-auto max-w-content w-full">
+<main
+  class="ml-0 desktop-small:ml-[12.5rem] desktop:ml-[10.5rem] desktop-x-large:ml-[16.5rem] desktop-xx-large:ml-[19.5rem] p-4 desktop-small:px-6 desktop:px-10 remove-padding"
+  (click)="closeSideMenu()"
+>
+  <div class="mx-auto w-full">
     <ng-content></ng-content>
   </div>
 </main>
diff --git a/apps/shared/shell/src/lib/side-menu/side-menu.component.css b/apps/shared/shell/src/lib/side-menu/side-menu.component.css
index 089bbb5f9..24db8f2e9 100644
--- a/apps/shared/shell/src/lib/side-menu/side-menu.component.css
+++ b/apps/shared/shell/src/lib/side-menu/side-menu.component.css
@@ -1,14 +1,48 @@
 :host {
-  @apply text-surface-content w-[10.5rem] grid gap-[0.625rem];
+  @apply text-surface-content grid gap-[0.625rem];
   grid-template-rows: 1fr auto;
 }
 
+:host {
+  @apply w-[10.5rem];
+}
+
+@screen desktop-small {
+  :host {
+    @apply w-[10.5rem];
+  }
+}
+
+@screen desktop {
+  :host {
+    @apply w-[10.5rem];
+  }
+}
+
+@screen desktop-x-large {
+  :host {
+    @apply w-[16.5rem];
+  }
+}
+
 .side-menu-nav-item {
-  @apply block text-center py-1;
+  @apply text-center py-1 flex flex-col items-center;
+}
+
+@screen desktop-x-large {
+  .side-menu-nav-item {
+    @apply flex-row grow text-left;
+  }
 }
 
 .side-menu-nav-item-icon {
-  @apply bg-[#AEB7C1] w-12 h-12 rounded-button grid items-center justify-center mx-auto mb-1;
+  @apply bg-[#AEB7C1] w-12 h-12 rounded grid items-center justify-center mx-auto mb-1 shrink;
+}
+
+@screen desktop-x-large {
+  .side-menu-nav-item-icon {
+    @apply mx-6;
+  }
 }
 
 .side-bottom-menu-item {
diff --git a/apps/shared/shell/src/lib/side-menu/side-menu.component.html b/apps/shared/shell/src/lib/side-menu/side-menu.component.html
index ac12171ec..1c1cb875c 100644
--- a/apps/shared/shell/src/lib/side-menu/side-menu.component.html
+++ b/apps/shared/shell/src/lib/side-menu/side-menu.component.html
@@ -1,5 +1,5 @@
 <div class="bg-surface flex flex-col panel rounded-br-[5px]">
-  <div class="min-h-[3.5rem]">
+  <!-- <div class="min-h-[3.5rem]">
     <button
       type="button"
       (click)="createProcess()"
@@ -10,31 +10,41 @@
       </div>
       <span class="text-brand">Vorgang starten</span>
     </button>
-  </div>
+  </div> -->
   <ng-container [ngSwitch]="section$ | async">
     <nav
-      class="customer-section grid grid-flow-row gap-6 side-menu-nav desktop:mt-6 max-h-[calc(100vh-30.625rem)]"
+      class="customer-section grid grid-flow-row gap-6 side-menu-nav desktop-small:mt-6 max-h-[calc(100vh-30.625rem)]"
       *ngSwitchCase="'customer'"
     >
-      <a class="side-menu-nav-item" (click)="closeSideMenu()" [routerLink]="[customerBasePath$ | async, 'product']">
+      <a class="side-menu-nav-item" (click)="closeSideMenu(); resetBranch(); focusSearchBox()" [routerLink]="productRoutePath$ | async">
         <div class="side-menu-nav-item-icon">
           <ui-svg-icon icon="import-contacts"></ui-svg-icon>
         </div>
         <span class="side-menu-nav-item-name">Artikelsuche</span>
       </a>
-      <a class="side-menu-nav-item" (click)="closeSideMenu()" [routerLink]="[customerBasePath$ | async, 'customer']">
+      <a class="side-menu-nav-item" (click)="closeSideMenu(); focusSearchBox()" [routerLink]="[customerBasePath$ | async, 'customer']">
         <div class="side-menu-nav-item-icon">
           <ui-svg-icon icon="person"></ui-svg-icon>
         </div>
         <span class="side-menu-nav-item-name">Kundensuche</span>
       </a>
-      <a class="side-menu-nav-item" *ifRole="'Store'" (click)="closeSideMenu()" [routerLink]="[customerBasePath$ | async, 'goods', 'out']">
+      <a
+        class="side-menu-nav-item"
+        *ifRole="'Store'"
+        (click)="closeSideMenu(); focusSearchBox()"
+        [routerLink]="[customerBasePath$ | async, 'goods', 'out']"
+      >
         <div class="side-menu-nav-item-icon">
           <ui-svg-icon icon="unarchive"></ui-svg-icon>
         </div>
         <span class="side-menu-nav-item-name">Warenausgabe</span>
       </a>
-      <a class="side-menu-nav-item" *ifRole="'CallCenter'" (click)="closeSideMenu()" [routerLink]="[customerBasePath$ | async, 'order']">
+      <a
+        class="side-menu-nav-item"
+        *ifRole="'CallCenter'"
+        (click)="closeSideMenu(); resetBranch(); focusSearchBox()"
+        [routerLink]="[customerBasePath$ | async, 'order']"
+      >
         <div class="side-menu-nav-item-icon">
           <ui-svg-icon icon="deployed-code"></ui-svg-icon>
         </div>
@@ -51,13 +61,13 @@
         </div>
         <span class="side-menu-nav-item-name">Sortiment</span>
       </a>
-      <a class="side-menu-nav-item" (click)="closeSideMenu()" [routerLink]="['/filiale', 'task-calendar']">
+      <a class="side-menu-nav-item" (click)="closeSideMenu(); focusSearchBox()" [routerLink]="['/filiale', 'task-calendar']">
         <div class="side-menu-nav-item-icon">
           <ui-svg-icon icon="event-available"></ui-svg-icon>
         </div>
         <span class="side-menu-nav-item-name">Tätigkeitskalender</span>
       </a>
-      <a class="side-menu-nav-item" (click)="closeSideMenu()" [routerLink]="['/filiale', 'goods', 'in']">
+      <a class="side-menu-nav-item" (click)="closeSideMenu(); focusSearchBox()" [routerLink]="['/filiale', 'goods', 'in']">
         <div class="side-menu-nav-item-icon">
           <ui-icon icon="box_return" size="24px"></ui-icon>
         </div>
diff --git a/apps/shared/shell/src/lib/side-menu/side-menu.component.spec.ts b/apps/shared/shell/src/lib/side-menu/side-menu.component.spec.ts
index 3e181bbb2..2a37084c0 100644
--- a/apps/shared/shell/src/lib/side-menu/side-menu.component.spec.ts
+++ b/apps/shared/shell/src/lib/side-menu/side-menu.component.spec.ts
@@ -11,9 +11,11 @@ import { MockComponents, MockDirectives } from 'ng-mocks';
 import { RouterTestingModule } from '@angular/router/testing';
 import { UISvgIconComponent, UiIconComponent } from '@ui/icon';
 import { Router } from '@angular/router';
+import { ProductCatalogNavigationService } from '@shared/services';
 
 describe('ShellSideMenuComponent', () => {
   let spectator: Spectator<ShellSideMenuComponent>;
+  let catalogNavigationService: jasmine.SpyObj<ProductCatalogNavigationService>;
   const createComponent = createComponentFactory({
     component: ShellSideMenuComponent,
     imports: [RouterTestingModule],
@@ -44,7 +46,16 @@ describe('ShellSideMenuComponent', () => {
   });
 
   beforeEach(() => {
-    spectator = createComponent();
+    catalogNavigationService = jasmine.createSpyObj<ProductCatalogNavigationService>(['navigateToProductSearch']);
+
+    spectator = createComponent({
+      providers: [
+        {
+          provide: ProductCatalogNavigationService,
+          useValue: catalogNavigationService,
+        },
+      ],
+    });
   });
 
   it('should create', () => {
@@ -124,11 +135,11 @@ describe('ShellSideMenuComponent', () => {
 
   describe('navigateToCatalog(process: ApplicationProcess)', () => {
     it('should call Router.navigate with  ["/kunde", <process.id>, "product", "search"]', () => {
-      const router = spectator.inject(Router);
       const process: ApplicationProcess = { id: 1, name: '', section: 'customer' };
-      const spy = spyOn(router, 'navigate');
+
       spectator.component.navigateToCatalog(process);
-      expect(spy).toHaveBeenCalledWith(['/kunde', 1, 'product', 'search']);
+
+      expect(catalogNavigationService.navigateToProductSearch).toHaveBeenCalledWith({ processId: process.id });
     });
   });
 
@@ -172,13 +183,13 @@ describe('ShellSideMenuComponent', () => {
   });
 
   describe('template', () => {
-    describe('.create-process-btn should call createProcess()', () => {
-      it('should call createProcess()', () => {
-        const spy = spyOn(spectator.component, 'createProcess');
-        spectator.click('.create-process-btn');
-        expect(spy).toHaveBeenCalled();
-      });
-    });
+    // describe('.create-process-btn should call createProcess()', () => {
+    //   it('should call createProcess()', () => {
+    //     const spy = spyOn(spectator.component, 'createProcess');
+    //     spectator.click('.create-process-btn');
+    //     expect(spy).toHaveBeenCalled();
+    //   });
+    // });
 
     describe('nav.customer-section', () => {
       it('should render a nav.customer-section when section$ returns "customer"', () => {
diff --git a/apps/shared/shell/src/lib/side-menu/side-menu.component.ts b/apps/shared/shell/src/lib/side-menu/side-menu.component.ts
index a2995fa5c..6d2eff89d 100644
--- a/apps/shared/shell/src/lib/side-menu/side-menu.component.ts
+++ b/apps/shared/shell/src/lib/side-menu/side-menu.component.ts
@@ -1,4 +1,4 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Inject } from '@angular/core';
 import { AuthService } from '@core/auth';
 import { StockService } from '@swagger/wws';
 import { first, map, retry, switchMap, take } from 'rxjs/operators';
@@ -6,6 +6,9 @@ import { ShellService } from '../shell.service';
 import { ApplicationProcess, ApplicationService } from '@core/application';
 import { Router } from '@angular/router';
 import { WrongDestinationModalService } from '@shared/modals/wrong-destination-modal';
+import { EnvironmentService } from '@core/environment';
+import { ProductCatalogNavigationService } from '@shared/services';
+import { DOCUMENT } from '@angular/common';
 
 @Component({
   selector: 'shell-side-menu',
@@ -27,6 +30,10 @@ export class ShellSideMenuComponent {
 
   activeProcess$ = this._app.activatedProcessId$.pipe(switchMap((processId) => this._app.getProcessById$(processId)));
 
+  get isTablet() {
+    return this._environment.matchTablet();
+  }
+
   customerBasePath$ = this.activeProcess$.pipe(
     map((process) => {
       if (!!process && process.section === 'customer' && process.type !== 'cart-checkout') {
@@ -39,13 +46,38 @@ export class ShellSideMenuComponent {
     })
   );
 
+  productRoutePath$ = this.activeProcess$.pipe(
+    map((process) => {
+      if (!!process && process.section === 'customer' && process.type !== 'cart-checkout') {
+        // Übernehme aktiven Prozess
+        return this._catalogNavigationService.getArticleSearchBasePath(process.id);
+      } else {
+        // Über Guards wird ein neuer Prozess erstellt
+        return this._catalogNavigationService.getArticleSearchBasePath();
+      }
+    })
+  );
+
+  // customerOrdersPath$ = this.customerBasePath$.pipe(
+  //   map((basePath) => {
+  //     if (this.isTablet) {
+  //       return [basePath, 'order'];
+  //     } else {
+  //       return [basePath, 'order', { outlets: { main: null, left: 'search', right: 'filter' } }];
+  //     }
+  //   })
+  // );
+
   constructor(
     private _shellService: ShellService,
     private _authService: AuthService,
     private _stockService: StockService,
     private _app: ApplicationService,
     private _router: Router,
-    private readonly _wrongDestinationModalService: WrongDestinationModalService
+    private readonly _wrongDestinationModalService: WrongDestinationModalService,
+    private _environment: EnvironmentService,
+    private _catalogNavigationService: ProductCatalogNavigationService,
+    @Inject(DOCUMENT) private readonly _document: Document
   ) {}
 
   closeSideMenu() {
@@ -56,6 +88,17 @@ export class ShellSideMenuComponent {
     this._authService.logout();
   }
 
+  async resetBranch() {
+    const process = await this.activeProcess$.pipe(first()).toPromise();
+    if (!!process?.id) {
+      this._app.patchProcessData(process.id, { selectedBranch: undefined });
+    }
+  }
+
+  focusSearchBox() {
+    this._document.getElementById('searchbox')?.focus();
+  }
+
   async createProcess() {
     const process = await this.createCartProcess();
     this.navigateToCatalog(process);
@@ -95,7 +138,7 @@ export class ShellSideMenuComponent {
   }
 
   navigateToCatalog(process: ApplicationProcess) {
-    this._router.navigate(['/kunde', process.id, 'product', 'search']);
+    this._catalogNavigationService.navigateToProductSearch({ processId: process.id });
   }
 
   navigateToDashboard() {
diff --git a/apps/shared/shell/src/lib/top-bar/top-bar.component.html b/apps/shared/shell/src/lib/top-bar/top-bar.component.html
index b2dc2b5cb..7779ea5cd 100644
--- a/apps/shared/shell/src/lib/top-bar/top-bar.component.html
+++ b/apps/shared/shell/src/lib/top-bar/top-bar.component.html
@@ -1,5 +1,5 @@
 <header class="bg-surface text-surface-content h-[4.625rem] flex flex-row items-center justify-start px-[0.938rem]">
-  <button (click)="toggleSideMenu()" class="btn btn-icon mr-4 desktop:hidden">
+  <button (click)="toggleSideMenu()" class="btn btn-icon mr-4 desktop-small:hidden">
     <ui-svg-icon [icon]="menuIcon$ | async"></ui-svg-icon>
   </button>
   <span class="text-[1.625rem] leading-[2.25rem] font-bold" *ngIf="title$ | async; let title">
diff --git a/apps/ui/autocomplete/src/lib/autocomplete.scss b/apps/ui/autocomplete/src/lib/autocomplete.scss
index 8430ca94b..295a70a45 100644
--- a/apps/ui/autocomplete/src/lib/autocomplete.scss
+++ b/apps/ui/autocomplete/src/lib/autocomplete.scss
@@ -15,7 +15,7 @@ ui-searchbox ui-autocomplete {
 }
 
 .ui-autocomplete-item {
-  @apply border-none outline-none text-base font-sans px-4 py-5 text-left bg-white;
+  @apply border-none outline-none text-p2 font-sans px-4 py-5 text-left bg-white;
 
   &.active,
   &:hover {
diff --git a/apps/ui/branch-dropdown/src/lib/branch-dropdown.component.scss b/apps/ui/branch-dropdown/src/lib/branch-dropdown.component.scss
index 21d6ae977..124f55427 100644
--- a/apps/ui/branch-dropdown/src/lib/branch-dropdown.component.scss
+++ b/apps/ui/branch-dropdown/src/lib/branch-dropdown.component.scss
@@ -42,7 +42,7 @@
   }
 
   .searchbox {
-    @apply outline-none border-none w-full text-base;
+    @apply outline-none border-none w-full text-p2;
   }
 
   .searchbox::placeholder {
diff --git a/apps/ui/calendar/src/lib/calendar-header/calendar-header.component.scss b/apps/ui/calendar/src/lib/calendar-header/calendar-header.component.scss
index fe0f55b35..4de14c736 100644
--- a/apps/ui/calendar/src/lib/calendar-header/calendar-header.component.scss
+++ b/apps/ui/calendar/src/lib/calendar-header/calendar-header.component.scss
@@ -35,7 +35,7 @@ button {
 }
 
 .display-year-month {
-  @apply flex flex-row items-center justify-center text-center font-bold whitespace-nowrap text-2xl;
+  @apply flex flex-row items-center justify-center text-center font-bold whitespace-nowrap text-h3;
   width: 200px;
 }
 
diff --git a/apps/ui/datepicker/src/lib/datepicker.component.html b/apps/ui/datepicker/src/lib/datepicker.component.html
index aecbfb128..7848eede2 100644
--- a/apps/ui/datepicker/src/lib/datepicker.component.html
+++ b/apps/ui/datepicker/src/lib/datepicker.component.html
@@ -3,7 +3,7 @@
     <svg viewBox="0 25 50 25" class="triangle">
       <polygon points="0,50 50,50 25,25"></polygon>
     </svg>
-    <div class="rounded-card bg-white py-4 px-5">
+    <div class="rounded bg-white py-4 px-5">
       <ui-datepicker-header></ui-datepicker-header>
       <div class="hr"></div>
       <ui-datepicker-body></ui-datepicker-body>
diff --git a/apps/ui/dropdown/src/lib/dropdown.scss b/apps/ui/dropdown/src/lib/dropdown.scss
index 95a0c3e2d..6fb56b2c7 100644
--- a/apps/ui/dropdown/src/lib/dropdown.scss
+++ b/apps/ui/dropdown/src/lib/dropdown.scss
@@ -4,19 +4,19 @@
   @apply relative;
 
   .ui-dropdown-wrapper {
-    @apply flex flex-col bg-white rounded-card;
+    @apply flex flex-col bg-white rounded;
   }
 
   [uiDropdownItem] {
-    @apply bg-white text-base outline-none border-none px-4 py-3 text-left;
+    @apply bg-white text-p2 outline-none border-none px-4 py-3 text-left;
   }
 
   [uiDropdownItem]:first-child {
-    @apply rounded-t-card;
+    @apply rounded-t;
   }
 
   [uiDropdownItem]:last-child {
-    @apply rounded-b-card;
+    @apply rounded-b;
   }
 
   [uiDropdownItem]:hover,
diff --git a/apps/ui/filter/src/lib/filter-group/components/range-filter/range-filter.component.scss b/apps/ui/filter/src/lib/filter-group/components/range-filter/range-filter.component.scss
index cda67ef26..14164ddf6 100644
--- a/apps/ui/filter/src/lib/filter-group/components/range-filter/range-filter.component.scss
+++ b/apps/ui/filter/src/lib/filter-group/components/range-filter/range-filter.component.scss
@@ -1,5 +1,5 @@
 .range-filter-headline {
-  @apply font-semibold text-base;
+  @apply font-semibold text-p2;
 }
 
 .range-input-wrapper {
@@ -18,6 +18,6 @@
 }
 
 .range-filter-error {
-  @apply font-semibold text-base;
+  @apply font-semibold text-p2;
   color: #f70400;
 }
diff --git a/apps/ui/filter/src/lib/next/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss b/apps/ui/filter/src/lib/next/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss
index f8a78eba7..5250c8f5f 100644
--- a/apps/ui/filter/src/lib/next/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss
+++ b/apps/ui/filter/src/lib/next/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.scss
@@ -12,7 +12,7 @@ ui-icon {
   max-height: calc(100vh - 377px);
 
   .ui-input {
-    @apply flex flex-row items-center border-none outline-none p-4 font-bold text-base bg-white text-black text-left rounded-card transition transform;
+    @apply flex flex-row items-center border-none outline-none p-4 font-bold text-p2 bg-white text-black text-left rounded transition transform;
   }
 
   .has-options {
diff --git a/apps/ui/filter/src/lib/next/filter-group/filter-input-group-main/filter-input-group-main.component.scss b/apps/ui/filter/src/lib/next/filter-group/filter-input-group-main/filter-input-group-main.component.scss
index 2241b39f6..8de057de2 100644
--- a/apps/ui/filter/src/lib/next/filter-group/filter-input-group-main/filter-input-group-main.component.scss
+++ b/apps/ui/filter/src/lib/next/filter-group/filter-input-group-main/filter-input-group-main.component.scss
@@ -3,7 +3,7 @@
 }
 
 .info-tooltip-button {
-  @apply border-font-customer border-2 border-solid bg-white rounded-md text-base font-bold absolute;
+  @apply border-font-customer border-2 border-solid bg-white rounded-md text-p2 font-bold absolute;
   border-style: outset;
   width: 31px;
   height: 31px;
diff --git a/apps/ui/filter/src/lib/next/order-by-filter/order-by-filter.component.scss b/apps/ui/filter/src/lib/next/order-by-filter/order-by-filter.component.scss
index 7edc535a1..882815eca 100644
--- a/apps/ui/filter/src/lib/next/order-by-filter/order-by-filter.component.scss
+++ b/apps/ui/filter/src/lib/next/order-by-filter/order-by-filter.component.scss
@@ -8,7 +8,7 @@
 }
 
 .order-by-filter-button {
-  @apply bg-transparent outline-none border-none text-regular font-bold flex flex-row justify-center items-center m-0 py-2 px-2;
+  @apply bg-transparent outline-none border-none text-p2 font-bold flex flex-row justify-center items-center m-0 py-2 px-2;
 }
 
 ::ng-deep .tablet ui-order-by-filter .order-by-filter-button {
diff --git a/apps/ui/filter/src/lib/next/shared/filter-input-chip/filter-input-chip.component.scss b/apps/ui/filter/src/lib/next/shared/filter-input-chip/filter-input-chip.component.scss
index 701a0689b..346df6c15 100644
--- a/apps/ui/filter/src/lib/next/shared/filter-input-chip/filter-input-chip.component.scss
+++ b/apps/ui/filter/src/lib/next/shared/filter-input-chip/filter-input-chip.component.scss
@@ -3,7 +3,7 @@
 }
 
 button.ui-filter-chip {
-  @apply grid grid-flow-col gap-2 items-center rounded-full text-base px-4 py-3 bg-white text-inactive-customer border-none font-bold;
+  @apply grid grid-flow-col gap-2 items-center rounded-full text-p2 px-4 py-3 bg-white text-inactive-customer border-none font-bold;
 }
 
 /** styling branch bereich **/
diff --git a/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss b/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss
index 323bc9003..40e06514d 100644
--- a/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss
+++ b/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-date-range/filter-input-option-date-range.component.scss
@@ -10,7 +10,7 @@
   @apply font-bold;
 
   button.cta-picker {
-    @apply bg-transparent text-base outline-none border-none font-bold inline-flex flex-row items-center justify-between;
+    @apply bg-transparent text-p2 outline-none border-none font-bold inline-flex flex-row items-center justify-between;
     width: 100px;
   }
 
diff --git a/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss b/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss
index 22f58c615..270d48d63 100644
--- a/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss
+++ b/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-option-number-range/filter-input-option-number-range.component.scss
@@ -12,7 +12,7 @@
 }
 
 .ui-filter-date-range-validation {
-  @apply text-brand text-base font-bold;
+  @apply text-brand text-p2 font-bold;
 }
 
 ui-form-control input {
diff --git a/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-options.component.scss b/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-options.component.scss
index 7cb01dedb..afc96c4f0 100644
--- a/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-options.component.scss
+++ b/apps/ui/filter/src/lib/next/shared/filter-input-options/filter-input-options.component.scss
@@ -3,12 +3,12 @@
 }
 
 .input-desription {
-  @apply my-0 px-4 font-bold text-base;
+  @apply my-0 px-4 font-bold text-p2;
 }
 
 .input-options-wrapper {
   grid-template-rows: auto 1fr;
-  @apply grid bg-white rounded-card;
+  @apply grid bg-white rounded;
 }
 
 .hidden-overflow {
@@ -19,7 +19,7 @@
   @apply grid grid-flow-col justify-end items-center mb-2;
 
   button {
-    @apply bg-transparent p-4 text-base outline-none border-none font-semibold text-inactive-customer;
+    @apply bg-transparent p-4 text-p2 outline-none border-none font-semibold text-inactive-customer;
   }
 
   &.header-shadow {
diff --git a/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.html b/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.html
index c2666a50c..b8ffa374b 100644
--- a/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.html
+++ b/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.html
@@ -1,4 +1,4 @@
 <ui-form-control [label]="input?.label" class="w-[200px]">
   <input type="text" [formControl]="control" />
 </ui-form-control>
-<p class="text-brand text-base font-bold" *ngIf="control.errors?.pattern">Ungültige {{ input?.label }}</p>
+<p class="text-brand text-p2 font-bold" *ngIf="control.errors?.pattern">Ungültige {{ input?.label }}</p>
diff --git a/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.ts b/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.ts
index fd494f52b..a7c92ff13 100644
--- a/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.ts
+++ b/apps/ui/filter/src/lib/next/shared/filter-input/input-text/input-text.component.ts
@@ -22,6 +22,12 @@ export class UiFilterInputTextComponent extends AbstractUiFilterInputDirective i
     this.control.setValue(this.value);
     this.updateValidator();
 
+    const uiInputChangesSub = this.uiInput?.changes?.subscribe((changes) => {
+      if (this.control.value !== changes?.target?.value) this.control.setValue(changes?.target?.value);
+
+      this.updateValidator();
+    });
+
     const onInputChangeSub = this.onUiInputChange$.subscribe((input) => {
       if (this.control.value !== input.value) this.control.setValue(input.value);
 
@@ -32,6 +38,7 @@ export class UiFilterInputTextComponent extends AbstractUiFilterInputDirective i
       if (this.value !== value) this.setValue(value);
     });
 
+    this._subscriptions.add(uiInputChangesSub);
     this._subscriptions.add(onInputChangeSub);
     this._subscriptions.add(onControlValueChangeSub);
   }
diff --git a/apps/ui/filter/src/lib/selected-filter-options/components/selected-filter-options.component.scss b/apps/ui/filter/src/lib/selected-filter-options/components/selected-filter-options.component.scss
index 3585a7f26..df9a9ed35 100644
--- a/apps/ui/filter/src/lib/selected-filter-options/components/selected-filter-options.component.scss
+++ b/apps/ui/filter/src/lib/selected-filter-options/components/selected-filter-options.component.scss
@@ -6,11 +6,11 @@
 }
 
 .filters-clear {
-  @apply bg-transparent text-brand border-none outline-none text-cta-l font-bold;
+  @apply bg-transparent text-brand border-none outline-none text-p1 font-bold;
 }
 
 .filter-option {
-  @apply flex flex-row items-baseline text-cta-l font-bold gap-2;
+  @apply flex flex-row items-baseline text-p1 font-bold gap-2;
 }
 
 .filter-option.collapsed {
@@ -27,5 +27,5 @@
 
 .display-more,
 .display-less {
-  @apply flex items-baseline gap-2 bg-transparent text-ucla-blue border-none outline-none text-cta-l font-bold;
+  @apply flex items-baseline gap-2 bg-transparent text-ucla-blue border-none outline-none text-p1 font-bold;
 }
diff --git a/apps/ui/form-control/src/lib/ui-form-control.component.scss b/apps/ui/form-control/src/lib/ui-form-control.component.scss
index 24890b5df..889c40002 100644
--- a/apps/ui/form-control/src/lib/ui-form-control.component.scss
+++ b/apps/ui/form-control/src/lib/ui-form-control.component.scss
@@ -3,11 +3,11 @@
 }
 
 button.clear {
-  @apply bg-transparent text-ucla-blue border-none outline-none font-bold text-regular;
+  @apply bg-transparent text-ucla-blue border-none outline-none font-bold text-p2;
 }
 
 .hint {
-  @apply text-brand text-x-small font-bold;
+  @apply text-brand text-p4 font-bold;
 
   &.readonly-hint {
     @apply text-inactive-branch font-normal;
@@ -26,7 +26,7 @@ button.clear {
   }
 
   input:not([type='radio']):not([type='checkbox']) {
-    @apply outline-none border-none font-bold text-cta-l;
+    @apply outline-none border-none font-bold text-p1;
 
     &:disabled,
     &:read-only {
@@ -115,7 +115,7 @@ button.clear {
   @apply relative mt-px-20;
 
   label {
-    @apply absolute left-0  font-bold text-cta-l pointer-events-none text-ucla-blue;
+    @apply absolute left-0  font-bold text-p1 pointer-events-none text-ucla-blue;
     top: 20px;
     transition: 250ms all ease-in-out;
   }
@@ -125,18 +125,10 @@ button.clear {
     bottom: -21px;
   }
 
-  // ::ng-deep input:focus ~ label,
-  // ::ng-deep input:not(.empty) ~ label,
-  // ::ng-deep ui-select.toggled ~ label,
-  // ::ng-deep ui-select:not(.empty) ~ label {
-  //   @apply top-0 text-small font-semibold;
-  //   // font-size: 10px;
-  // }
-
   .input-wrapper.focused,
   .input-wrapper:not(.empty) {
     label {
-      @apply top-0 text-small font-semibold;
+      @apply top-0 text-p3 font-semibold;
     }
   }
 }
diff --git a/apps/ui/form-field/src/lib/form-field.component.scss b/apps/ui/form-field/src/lib/form-field.component.scss
index 8a9ad84e3..d253a1b34 100644
--- a/apps/ui/form-field/src/lib/form-field.component.scss
+++ b/apps/ui/form-field/src/lib/form-field.component.scss
@@ -17,7 +17,7 @@
 
   .ui-input:focus + ui-label,
   .ui-input:not(:placeholder-shown) + ui-label {
-    @apply top-0 left-0  text-sm;
+    @apply top-0 left-0  text-p3;
   }
 
   .ui-input::placeholder {
diff --git a/apps/ui/modal/src/lib/error-modal/error-modal.component.scss b/apps/ui/modal/src/lib/error-modal/error-modal.component.scss
index 589f23992..25db73b51 100644
--- a/apps/ui/modal/src/lib/error-modal/error-modal.component.scss
+++ b/apps/ui/modal/src/lib/error-modal/error-modal.component.scss
@@ -7,12 +7,12 @@
 }
 
 .message {
-  @apply text-base text-center whitespace-pre-line break-words;
+  @apply text-p2 text-center whitespace-pre-line break-words;
 }
 
 .actions {
   @apply text-center;
   button {
-    @apply px-5 py-3 mt-4 bg-brand text-white text-cta-l rounded-full border-none outline-none;
+    @apply px-5 py-3 mt-4 bg-brand text-white text-p1 rounded-full border-none outline-none;
   }
 }
diff --git a/apps/ui/modal/src/lib/message-modal.component.scss b/apps/ui/modal/src/lib/message-modal.component.scss
index 1af1d0c32..9734ac72b 100644
--- a/apps/ui/modal/src/lib/message-modal.component.scss
+++ b/apps/ui/modal/src/lib/message-modal.component.scss
@@ -3,12 +3,12 @@
 }
 
 .message {
-  @apply text-base text-center whitespace-pre my-8;
+  @apply text-p2 text-center whitespace-pre my-8;
 }
 
 .actions {
   @apply text-center;
   button {
-    @apply px-5 py-3 bg-brand text-white text-cta-l rounded-full border-none outline-none;
+    @apply px-5 py-3 bg-brand text-white text-p1 rounded-full border-none outline-none;
   }
 }
diff --git a/apps/ui/modal/src/lib/modal.component.scss b/apps/ui/modal/src/lib/modal.component.scss
index 0e2d0303a..637e00f3d 100644
--- a/apps/ui/modal/src/lib/modal.component.scss
+++ b/apps/ui/modal/src/lib/modal.component.scss
@@ -1,5 +1,5 @@
 :host {
-  @apply block relative mx-auto box-border w-full bg-white py-4 rounded-card;
+  @apply block relative mx-auto box-border w-full bg-white py-4 rounded;
   max-width: calc(100vw - 2rem);
 }
 
@@ -26,7 +26,7 @@
 }
 
 .modal-title {
-  @apply text-card-sub font-bold text-center py-5 whitespace-pre-wrap;
+  @apply text-xl font-bold text-center py-5 whitespace-pre-wrap;
 }
 
 ::ng-deep .branch ui-modal .modal-close-btn {
diff --git a/apps/ui/modal/src/lib/prompt-modal/prompt-modal.component.scss b/apps/ui/modal/src/lib/prompt-modal/prompt-modal.component.scss
index 4a8cc584d..590910f56 100644
--- a/apps/ui/modal/src/lib/prompt-modal/prompt-modal.component.scss
+++ b/apps/ui/modal/src/lib/prompt-modal/prompt-modal.component.scss
@@ -3,7 +3,7 @@
 }
 
 .message {
-  @apply text-base text-center whitespace-pre-line break-words my-4;
+  @apply text-p2 text-center whitespace-pre-line break-words my-4;
 }
 
 input {
@@ -18,10 +18,10 @@ input {
   }
 
   button.cancel {
-    @apply px-5 py-3 bg-white text-brand text-cta-l rounded-full border-none outline-none;
+    @apply px-5 py-3 bg-white text-brand text-p1 rounded-full border-none outline-none;
   }
 
   button.confirm {
-    @apply px-5 py-3 bg-brand text-white text-cta-l rounded-full border-none outline-none;
+    @apply px-5 py-3 bg-brand text-white text-p1 rounded-full border-none outline-none;
   }
 }
diff --git a/apps/ui/notes/src/lib/ui-notes.component.scss b/apps/ui/notes/src/lib/ui-notes.component.scss
index 76ba70f60..ebe3bd42b 100644
--- a/apps/ui/notes/src/lib/ui-notes.component.scss
+++ b/apps/ui/notes/src/lib/ui-notes.component.scss
@@ -6,15 +6,15 @@
   @apply flex flex-row items-center;
 
   textarea {
-    @apply flex-grow text-regular h-12 outline-none w-full px-3 border-disabled-branch border-solid border-2 rounded-card pt-3;
+    @apply flex-grow text-p2 h-12 outline-none w-full px-3 border-disabled-branch border-solid border-2 rounded pt-3;
   }
 
   textarea::placeholder {
-    @apply font-bold text-regular text-inactive-branch mt-2;
+    @apply font-bold text-p2 text-inactive-branch mt-2;
   }
 
   .cta-save {
-    @apply text-cta-l border-none outline-none font-bold text-brand bg-transparent ml-4;
+    @apply text-p1 border-none outline-none font-bold text-brand bg-transparent ml-4;
   }
 }
 
@@ -30,7 +30,7 @@
     }
 
     .note-date {
-      @apply text-sm font-semibold text-inactive-branch mt-1;
+      @apply text-p3 font-semibold text-inactive-branch mt-1;
     }
   }
 }
diff --git a/apps/ui/quantity-dropdown/src/lib/quantity-dropdown-content/quantity-dropdown-content.component.scss b/apps/ui/quantity-dropdown/src/lib/quantity-dropdown-content/quantity-dropdown-content.component.scss
index 20b3e23fe..764971617 100644
--- a/apps/ui/quantity-dropdown/src/lib/quantity-dropdown-content/quantity-dropdown-content.component.scss
+++ b/apps/ui/quantity-dropdown/src/lib/quantity-dropdown-content/quantity-dropdown-content.component.scss
@@ -1,15 +1,15 @@
 .quantity-list {
-  @apply flex flex-col bg-white rounded-card shadow-card z-dropdown;
+  @apply flex flex-col bg-white rounded shadow-card z-dropdown;
 
   button.quantity-list-item {
-    @apply flex flex-row justify-between items-center outline-none border-none bg-white px-4 py-2 text-base text-left;
+    @apply flex flex-row justify-between items-center outline-none border-none bg-white px-4 py-2 text-p2 text-left;
 
     &:first-child {
-      @apply rounded-t-card;
+      @apply rounded-t;
     }
 
     &:last-child {
-      @apply rounded-b-card;
+      @apply rounded-b;
     }
 
     &.selected {
diff --git a/apps/ui/quantity-dropdown/src/lib/quantity-dropdown.component.scss b/apps/ui/quantity-dropdown/src/lib/quantity-dropdown.component.scss
index f4c4d234c..ed16a0329 100644
--- a/apps/ui/quantity-dropdown/src/lib/quantity-dropdown.component.scss
+++ b/apps/ui/quantity-dropdown/src/lib/quantity-dropdown.component.scss
@@ -1,5 +1,5 @@
 :host {
-  @apply inline-flex flex-row box-border items-center text-base;
+  @apply inline-flex flex-row box-border items-center text-p2;
 }
 
 .backdrop {
@@ -11,7 +11,7 @@
 }
 
 button.action {
-  @apply bg-white text-brand font-bold text-base outline-none border-none pr-0;
+  @apply bg-white text-brand font-bold text-p2 outline-none border-none pr-0;
 
   &:disabled {
     @apply text-inactive-customer;
@@ -19,7 +19,7 @@ button.action {
 }
 
 button.current-quantity {
-  @apply flex flex-row justify-between items-center bg-white text-base outline-none border-none text-left font-bold w-full px-0 mx-0;
+  @apply flex flex-row justify-between items-center bg-white text-p2 outline-none border-none text-left font-bold w-full px-0 mx-0;
 
   ui-icon {
     @apply ml-2;
@@ -27,21 +27,21 @@ button.current-quantity {
 }
 
 input.current-quantity {
-  @apply bg-white text-base outline-none border-none text-left font-bold w-full;
+  @apply bg-white text-p2 outline-none border-none text-left font-bold w-full;
 }
 
 .quantity-list {
-  @apply flex flex-col bg-white rounded-card absolute -top-12 left-0 right-0 shadow-card z-dropdown;
+  @apply flex flex-col bg-white rounded absolute -top-12 left-0 right-0 shadow-card z-dropdown;
 
   button.quantity-list-item {
-    @apply flex flex-row justify-between items-center outline-none border-none bg-white px-4 py-2 text-base text-left;
+    @apply flex flex-row justify-between items-center outline-none border-none bg-white px-4 py-2 text-p2 text-left;
 
     &:first-child {
-      @apply rounded-t-card;
+      @apply rounded-t;
     }
 
     &:last-child {
-      @apply rounded-b-card;
+      @apply rounded-b;
     }
 
     &.selected {
diff --git a/apps/ui/scroll-container/src/lib/content-loader/content-loader.component.scss b/apps/ui/scroll-container/src/lib/content-loader/content-loader.component.scss
index 1bd09eec7..4ebb74e1d 100644
--- a/apps/ui/scroll-container/src/lib/content-loader/content-loader.component.scss
+++ b/apps/ui/scroll-container/src/lib/content-loader/content-loader.component.scss
@@ -1,5 +1,5 @@
 .loading-text {
-  @apply mt-2 text-center font-semibold text-base text-inactive-branch;
+  @apply mt-2 text-center font-semibold text-p2 text-inactive-branch;
 }
 
 ::ng-deep .customer ui-content-loader .loading-text {
diff --git a/apps/ui/scroll-container/src/lib/skeleton-loader/skeleton-loader.component.scss b/apps/ui/scroll-container/src/lib/skeleton-loader/skeleton-loader.component.scss
index 733adf344..eb6c038cd 100644
--- a/apps/ui/scroll-container/src/lib/skeleton-loader/skeleton-loader.component.scss
+++ b/apps/ui/scroll-container/src/lib/skeleton-loader/skeleton-loader.component.scss
@@ -62,7 +62,7 @@
 }
 
 .thumbnail {
-  @apply bg-ucla-blue rounded-card mr-3;
+  @apply bg-ucla-blue rounded mr-3;
   width: 63px;
   height: 90px;
 }
diff --git a/apps/ui/searchbox/src/lib/next/searchbox.component.html b/apps/ui/searchbox/src/lib/next/searchbox.component.html
index 550c5373a..52b20d875 100644
--- a/apps/ui/searchbox/src/lib/next/searchbox.component.html
+++ b/apps/ui/searchbox/src/lib/next/searchbox.component.html
@@ -1,6 +1,7 @@
 <div class="ui-searchbox-input-wrapper">
   <div class="hint-wrapper">
     <input
+      id="searchbox"
       class="ui-searchbox-input"
       #input
       type="text"
diff --git a/apps/ui/searchbox/src/lib/ui-searchbox-autocomplete.component.scss b/apps/ui/searchbox/src/lib/ui-searchbox-autocomplete.component.scss
index 801db46b4..d40efe4d1 100644
--- a/apps/ui/searchbox/src/lib/ui-searchbox-autocomplete.component.scss
+++ b/apps/ui/searchbox/src/lib/ui-searchbox-autocomplete.component.scss
@@ -3,7 +3,7 @@
 }
 
 ::ng-deep [uiSearchboxAutocompleteOption] {
-  @apply px-4 py-5 border-0 bg-transparent text-left text-regular;
+  @apply px-4 py-5 border-0 bg-transparent text-left text-p2;
 }
 
 ::ng-deep [uiSearchboxAutocompleteOption]:first-child {
diff --git a/apps/ui/select/src/lib/ui-select.component.scss b/apps/ui/select/src/lib/ui-select.component.scss
index 097945a05..1baf88b42 100644
--- a/apps/ui/select/src/lib/ui-select.component.scss
+++ b/apps/ui/select/src/lib/ui-select.component.scss
@@ -1,5 +1,5 @@
 :host {
-  @apply flex flex-col box-border text-regular;
+  @apply flex flex-col box-border text-p2;
 }
 
 :host:focus {
@@ -24,7 +24,7 @@
 }
 
 .ui-select-value {
-  @apply flex-grow text-cta-l;
+  @apply flex-grow text-p1;
   height: 21px;
   line-height: 21px;
 }
@@ -58,7 +58,7 @@
 }
 
 .ui-select-dropdown-wrapper .ui-select-options {
-  @apply flex flex-col absolute bg-white shadow-card rounded-card;
+  @apply flex flex-col absolute bg-white shadow-card rounded;
 }
 
 .hide {
@@ -66,7 +66,7 @@
 }
 
 :host ::ng-deep ui-select-option button {
-  @apply py-px-10 px-px-10 cursor-pointer w-full text-left text-regular bg-white border-0 outline-none font-bold;
+  @apply py-px-10 px-px-10 cursor-pointer w-full text-left text-p2 bg-white border-0 outline-none font-bold;
 
   &:hover,
   &:focus {
diff --git a/apps/ui/switch/src/lib/ui-switch.component.scss b/apps/ui/switch/src/lib/ui-switch.component.scss
index ba660fba3..288577663 100644
--- a/apps/ui/switch/src/lib/ui-switch.component.scss
+++ b/apps/ui/switch/src/lib/ui-switch.component.scss
@@ -7,7 +7,7 @@
 }
 
 .ui-switch-btn {
-  @apply text-ucla-blue bg-transparent text-base rounded-full border-none outline-none px-3 py-1;
+  @apply text-ucla-blue bg-transparent text-p2 rounded-full border-none outline-none px-3 py-1;
 }
 
 .ui-switch-btn-unset {
diff --git a/apps/ui/tooltip/src/lib/tooltip.component.scss b/apps/ui/tooltip/src/lib/tooltip.component.scss
index bd84da236..f1850b4ed 100644
--- a/apps/ui/tooltip/src/lib/tooltip.component.scss
+++ b/apps/ui/tooltip/src/lib/tooltip.component.scss
@@ -1,5 +1,5 @@
 .tooltip-box {
-  @apply bg-dark-cerulean rounded-card p-4 flex flex-row items-start;
+  @apply bg-dark-cerulean rounded p-4 flex flex-row items-start;
   max-width: 375px;
   box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 
diff --git a/tailwind-plugins/typography.plugin.js b/tailwind-plugins/typography.plugin.js
new file mode 100644
index 000000000..ec1c3d934
--- /dev/null
+++ b/tailwind-plugins/typography.plugin.js
@@ -0,0 +1,13 @@
+const plugin = require('tailwindcss/plugin');
+
+module.exports = plugin(function ({ addBase }) {
+  addBase({
+    '.text-h1': { fontSize: '3.375rem', lineHeight: '4.5rem' },
+    '.text-h2': { fontSize: '1.625rem', lineHeight: '2.25rem' },
+    '.text-h3': { fontSize: '1.375rem', lineHeight: '1.75rem' },
+    '.text-p1': { fontSize: '1.125rem', lineHeight: '1.5rem' },
+    '.text-p2': { fontSize: '1rem', lineHeight: '1.313rem' },
+    '.text-p3': { fontSize: '0.875rem', lineHeight: '1.188rem' },
+    '.text-p4': { fontSize: '0.75rem', lineHeight: '1rem' },
+  });
+});
diff --git a/tailwind.config.js b/tailwind.config.js
index 0eb17d0c8..93e6f491d 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,11 +1,13 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./apps/**/*.{html,ts}'],
-  darkMode: 'media', // or 'media' or 'class'
+  darkMode: 'media', // or 'media' or 'class',
   theme: {
     screens: {
       'desktop-small': '1024px',
       desktop: '1440px',
+      'desktop-x-large': '1920px',
+      'desktop-xx-large': '2736px',
     },
     zIndex: {
       dropdown: 50,
@@ -20,20 +22,11 @@ module.exports = {
       sans: ['Open Sans'],
     },
     extend: {
-      fontSize: {
-        'x-small': '12px',
-        small: '14px',
-        regular: '16px',
-        'cta-l': '18px',
-        'card-heading': '22px',
-        'card-sub': '20px',
-        'page-heading': '26px',
-      },
       width: {
-        content: '90rem',
+        content: '120rem',
       },
       maxWidth: {
-        content: '90rem',
+        content: '120rem',
       },
       spacing: {
         'cta-x-l': '25px',
@@ -170,12 +163,10 @@ module.exports = {
         action: '0 0 20px 0 #596470',
       },
       borderRadius: {
-        button: '5px',
-        card: '5px',
+        DEFAULT: '0.3125rem',
         customerCard: '10px',
         filter: '20px',
         autocomplete: '30px',
-        menu: '5px',
       },
     },
   },
@@ -189,5 +180,6 @@ module.exports = {
     require('./tailwind-plugins/menu.plugin.js'),
     require('./tailwind-plugins/select-bullet.plugin.js'),
     require('./tailwind-plugins/section.plugin.js'),
+    require('./tailwind-plugins/typography.plugin.js'),
   ],
 };