From 5c9f4c5b21c7a31d38e83fade35311a1e80bfeec Mon Sep 17 00:00:00 2001
From: Lorenz Hilpert <l.hilpert@paragon-data.de>
Date: Tue, 13 Jun 2023 11:45:47 +0000
Subject: [PATCH] Merged PR 1564: Customer RD

---
 .../checkout/src/lib/checkout.service.ts      |   1 -
 .../crm/src/lib/crm-customer.service.ts       |  22 +-
 apps/isa-app/src/app/app.module.ts            |   9 +-
 apps/isa-app/src/assets/icons.json            | 335 ++++++++++++++
 apps/isa-app/src/config/config.feature.json   | 292 +-----------
 .../src/config/config.integration.json        |   3 +-
 apps/isa-app/src/config/config.json           | 321 +-------------
 .../isa-app/src/config/config.production.json |   3 +-
 apps/isa-app/src/config/config.staging.json   |   3 +-
 apps/isa-app/src/config/config.test.json      | 321 +-------------
 .../src/environments/environment.prod.ts      |   1 +
 apps/isa-app/src/environments/environment.ts  |   1 +
 apps/isa-app/src/main.ts                      |  32 +-
 .../price-update/price-update.component.html  |   4 +-
 .../lib/price-update/price-update.module.ts   |   4 +-
 .../search-filter.component.html              |   2 +-
 .../search-filter/search-filter.module.ts     |   6 +-
 .../search-main/search-main.component.html    |   2 +-
 .../search-main/search-main.module.ts         |   7 +-
 .../search-results.component.html             |   2 +-
 .../search-results/search-results.module.ts   |   6 +-
 .../customer-order-search.component.html      |   2 +-
 .../customer-order-search.module.ts           |   2 +
 ...stomer-order-search-results.component.html |   2 +-
 apps/page/customer-rd/ng-package.json         |   7 +
 ...stomer-result-list-item-full.component.css |   3 +
 ...tomer-result-list-item-full.component.html |  24 +
 ...ustomer-result-list-item-full.component.ts |  19 +
 .../customer-result-list-item.component.css   |   3 +
 .../customer-result-list-item.component.html  |  24 +
 .../customer-result-list-item.component.ts    |  19 +
 .../customer-result-list.component.css        |  17 +
 .../customer-result-list.component.html       |  19 +
 .../customer-result-list.component.ts         |  44 ++
 .../customer-result-list.module.ts            |  22 +
 .../customer-type-selector.component.html     |  19 +
 .../customer-type-selector.component.scss     |  11 +
 .../customer-type-selector.component.ts       | 240 ++++++++++
 .../customer-type-selector.module.ts          |  13 +
 .../customer-type-selector/index.ts           |   2 +
 .../accept-agb-form-block.component.html      |   4 +
 .../accept-agb-form-block.component.scss      |  11 +
 .../accept-agb-form-block.component.ts        |  36 ++
 .../accept-agb-form-block.module.ts           |  14 +
 .../form-blocks/accept-agb/index.ts           |   2 +
 .../address/address-form-block-data.ts        |   8 +
 .../address/address-form-block.component.html |  25 ++
 .../address/address-form-block.component.scss |   3 +
 .../address/address-form-block.component.ts   |  78 ++++
 .../address/address-form-block.module.ts      |  16 +
 .../components/form-blocks/address/index.ts   |   3 +
 .../birth-date-form-block.component.html      |   3 +
 .../birth-date-form-block.component.scss      |   3 +
 .../birth-date-form-block.component.ts        |  29 ++
 .../birth-date-form-block.module.ts           |  15 +
 .../form-blocks/birth-date/index.ts           |   4 +
 .../deviating-address-form-block-data.ts      |  12 +
 ...eviating-address-form-block.component.html |  61 +++
 ...eviating-address-form-block.component.scss |   7 +
 .../deviating-address-form-block.component.ts | 174 ++++++++
 .../deviating-address-form-block.module.ts    |  29 ++
 .../form-blocks/deviating-address/index.ts    |   3 +
 .../email/email-form-block.component.html     |   3 +
 .../email/email-form-block.component.scss     |   0
 .../email/email-form-block.component.ts       |  34 ++
 .../email/email-form-block.module.ts          |  15 +
 .../lib/components/form-blocks/email/index.ts |   2 +
 .../lib/components/form-blocks/form-block.ts  | 179 ++++++++
 .../src/lib/components/form-blocks/index.ts   |  12 +
 .../components/form-blocks/interests/index.ts |   4 +
 .../interests/interests-form-block-data.ts    |   1 +
 .../interests-form-block.component.html       |  12 +
 .../interests-form-block.component.scss       |  11 +
 .../interests-form-block.component.ts         |  88 ++++
 .../interests/interests-form-block.module.ts  |  14 +
 .../lib/components/form-blocks/name/index.ts  |   4 +
 .../form-blocks/name/name-form-block-data.ts  |   8 +
 .../name/name-form-block.component.html       |  47 ++
 .../name/name-form-block.component.scss       |   3 +
 .../name/name-form-block.component.ts         |  56 +++
 .../name/name-form-block.module.ts            |  16 +
 .../form-blocks/newsletter/index.ts           |   2 +
 .../newsletter-form-block.component.html      |   3 +
 .../newsletter-form-block.component.scss      |  11 +
 .../newsletter-form-block.component.ts        |  27 ++
 .../newsletter-form-block.module.ts           |  14 +
 .../form-blocks/organisation/index.ts         |   4 +
 .../organisation-form-block-data.ts           |   5 +
 .../organisation-form-block.component.html    |  13 +
 .../organisation-form-block.component.scss    |   3 +
 .../organisation-form-block.component.ts      |  47 ++
 .../organisation-form-block.module.ts         |  15 +
 .../form-blocks/p4m-number/index.ts           |   4 +
 .../p4m-number-form-block.component.html      |   6 +
 .../p4m-number-form-block.component.scss      |  11 +
 .../p4m-number-form-block.component.ts        |  45 ++
 .../p4m-number-form-block.module.ts           |  16 +
 .../form-blocks/phone-numbers/index.ts        |   3 +
 .../phone-numbers-form-block-data.ts          |   4 +
 .../phone-numbers-form-block.component.html   |   8 +
 .../phone-numbers-form-block.component.scss   |   3 +
 .../phone-numbers-form-block.component.ts     |  37 ++
 .../phone-numbers-form-block.module.ts        |  15 +
 .../src/lib/components/split-screen/index.ts  |   3 +
 .../split-screen/side-template.directive.ts   |   9 +
 .../split-screen/split-screen.component.css   |   3 +
 .../split-screen/split-screen.component.html  |   6 +
 .../split-screen/split-screen.component.ts    |  83 ++++
 .../split-screen/split-screen.module.ts       |  10 +
 .../abstract-create-customer.ts               | 418 ++++++++++++++++++
 .../create-b2b-customer.component.html        |  91 ++++
 .../create-b2b-customer.component.scss        |   0
 .../create-b2b-customer.component.ts          |  54 +++
 .../create-b2b-customer.module.ts             |  28 ++
 .../create-b2b-customer/index.ts              |   2 +
 .../create-customer.component.css             |   0
 .../create-customer.component.html            |   4 +
 .../create-customer.component.ts              |  20 +
 .../create-customer/create-customer.module.ts |  30 ++
 .../lib/create-customer/create-customer.scss  |  42 ++
 .../create-guest-customer.component.html      | 104 +++++
 .../create-guest-customer.component.scss      |   0
 .../create-guest-customer.component.ts        |  64 +++
 .../create-guest-customer.module.ts           |  29 ++
 .../create-guest-customer/index.ts            |   2 +
 .../create-p4m-customer.component.html        | 148 +++++++
 .../create-p4m-customer.component.scss        |   0
 .../create-p4m-customer.component.ts          | 277 ++++++++++++
 .../create-p4m-customer.module.ts             |  45 ++
 .../create-p4m-customer/index.ts              |   2 +
 .../create-store-customer.component.html      |  92 ++++
 .../create-store-customer.component.scss      |   0
 .../create-store-customer.component.ts        |  51 +++
 .../create-store-customer.module.ts           |  29 ++
 .../create-store-customer/index.ts            |   2 +
 .../create-webshop-customer.component.html    | 104 +++++
 .../create-webshop-customer.component.scss    |   0
 .../create-webshop-customer.component.ts      |  77 ++++
 .../create-webshop-customer.module.ts         |  29 ++
 .../create-webshop-customer/index.ts          |   2 +
 .../customer-create-form-data.ts              | 116 +++++
 .../customer-create-side-view.component.css   |   7 +
 .../customer-create-side-view.component.html  |  12 +
 .../customer-create-side-view.component.ts    |  23 +
 .../customer-create-side-view.module.ts       |   8 +
 .../customer-create-side-view/index.ts        |   2 +
 .../defs/customer-query-params.ts             |  22 +
 .../src/lib/create-customer/defs/index.ts     |   1 +
 .../src/lib/create-customer/index.ts          |   9 +
 .../update-p4m-webshop-customer/index.ts      |   2 +
 ...update-p4m-webshop-customer.component.html | 118 +++++
 ...update-p4m-webshop-customer.component.scss |   0
 .../update-p4m-webshop-customer.component.ts  | 151 +++++++
 .../update-p4m-webshop-customer.module.ts     |  48 ++
 .../src/lib/customer-page.component.css       |   0
 .../src/lib/customer-page.component.html      |   3 +
 .../src/lib/customer-page.component.ts        |  15 +
 .../src/lib/customer-page.module.ts           |  17 +
 .../customer-search.component.css             |   0
 .../customer-search.component.html            |   5 +
 .../customer-search.component.ts              | 234 ++++++++++
 .../customer-search/customer-search.module.ts |  29 ++
 .../details-main-view.component.css           |  19 +
 .../details-main-view.component.html          |  98 ++++
 .../details-main-view.component.ts            |  68 +++
 .../details-main-view.module.ts               |  13 +
 .../edit-main-view.component.css              |   0
 .../edit-main-view.component.html             |   0
 .../edit-main-view.component.ts               |   0
 .../edit-main-view/edit-main-view.module.ts   |   0
 .../filter-main-view.component.css            |   3 +
 .../filter-main-view.component.html           |  19 +
 .../filter-main-view.component.ts             |  36 ++
 .../filter-main-view.module.ts                |  14 +
 .../history-main-view.component.css           |   7 +
 .../history-main-view.component.html          |  29 ++
 .../history-main-view.component.ts            |  74 ++++
 .../history-main-view.module.ts               |  14 +
 .../main-side-view.component.css              |   7 +
 .../main-side-view.component.html             |  12 +
 .../main-side-view.component.ts               |  24 +
 .../main-side-view/main-side-view.module.ts   |   9 +
 .../orders-main-view.component.css            |   0
 .../orders-main-view.component.html           |   0
 .../orders-main-view.component.ts             |   0
 .../orders-main-view.module.ts                |   0
 .../results-main-view.component.css           |   0
 .../results-main-view.component.html          |  18 +
 .../results-main-view.component.ts            |  55 +++
 .../results-main-view.module.ts               |  14 +
 .../results-side-view.component.css           |   0
 .../results-side-view.component.html          |  18 +
 .../results-side-view.component.ts            |  55 +++
 .../results-side-view.module.ts               |  14 +
 .../store/customer-search.state.ts            |  13 +
 .../store/customer-search.store.ts            | 133 ++++++
 .../src/lib/customer-search/store/index.ts    |   3 +
 .../lib/customer-search/store/selectors.ts    |  26 ++
 .../src/lib/guards/customer-create.guard.ts   | 111 +++++
 .../address-selection-modal.component.html    |  15 +
 .../address-selection-modal.component.scss    |  36 ++
 .../address-selection-modal.component.ts      |  13 +
 .../address-selection-modal.module.ts         |  12 +
 .../address-selection-modal.service.ts        |  39 ++
 .../modals/address-selection-modal/index.ts   |   3 +
 .../cant-add-customer-to-cart.component.html  |  18 +
 .../cant-add-customer-to-cart.component.scss  |  32 ++
 .../cant-add-customer-to-cart.component.ts    |  64 +++
 .../cant-add-customer-to-cart.data.ts         |   9 +
 .../cant-add-customer-to-cart.module.ts       |  13 +
 .../cant-add-customer-to-cart-modal/index.ts  |   3 +
 .../cant-select-guest-modal.component.html    |  23 +
 .../cant-select-guest-modal.component.scss    |  40 ++
 .../cant-select-guest-modal.component.ts      |  21 +
 .../cant-select-guest-modal.module.ts         |  13 +
 .../src/lib/modals/cant-select-guest/index.ts |   2 +
 .../src/lib/modals/customer-modal.module.ts   |  21 +
 apps/page/customer-rd/src/lib/modals/index.ts |   5 +
 .../webshop-customer-already-exists/index.ts  |   3 +
 ...stomer-already-exists-modal.component.html |  32 ++
 ...stomer-already-exists-modal.component.scss |   0
 ...customer-already-exists-modal.component.ts |  49 ++
 ...shop-customer-already-exists-modal.data.ts |   6 +
 ...op-customer-already-exists-modal.module.ts |  11 +
 .../navigations/customer-create.navigation.ts |  30 ++
 .../navigations/customer-search.navigation.ts |  79 ++++
 .../customer-rd/src/lib/navigations/index.ts  |   1 +
 apps/page/customer-rd/src/lib/routes.ts       |  54 +++
 .../src/lib/validators/email-validator.ts     |   6 +
 .../lib/validators/gender-b2b-validator.ts    |  19 +
 .../organisation-delivery-b2b-validator.ts    |  82 ++++
 apps/page/customer-rd/src/public-api.ts       |   2 +
 .../customer-details.component.html           |   2 +-
 .../customer-details.module.ts                |   2 +
 .../customer-search/customer-search.module.ts |   2 +
 .../customer-result-card.component.html       |   2 +-
 .../p4m-number-form-block.component.html      |   2 +-
 .../p4m-number-form-block.component.scss      |   2 +-
 .../p4m-number-form-block.module.ts           |   4 +-
 .../package-result.component.html             |   4 +-
 .../package-result/package-result.module.ts   |   4 +-
 .../src/lib/branch-selector.component.html    |   4 +-
 .../src/lib/branch-selector.component.spec.ts |   6 +-
 .../src/lib/branch-selector.component.ts      |   4 +-
 .../src/lib/breadcrumb.component.html         |   4 +-
 .../src/lib/breadcrumb.component.spec.ts      |  13 +-
 .../breadcrumb/src/lib/breadcrumb.module.ts   |   4 +-
 .../components/checkbox/ng-package.json       |   6 +
 .../src/lib/checkbox-group.component.html     |   1 +
 .../src/lib/checkbox-group.component.scss     |   3 +
 .../src/lib/checkbox-group.component.ts       | 110 +++++
 .../checkbox/src/lib/checkbox.component.html  |   5 +
 .../checkbox/src/lib/checkbox.component.scss  |  28 ++
 .../checkbox/src/lib/checkbox.component.ts    | 110 +++++
 .../checkbox/src/lib/checkbox.module.ts       |   9 +
 .../components/checkbox/src/public-api.ts     |   3 +
 .../components/control-field/ng-package.json  |   6 +
 .../src/lib/control-field.component.css       |   0
 .../src/lib/control-field.component.html      |   1 +
 .../src/lib/control-field.component.ts        |  14 +
 .../src/lib/control-field.module.ts           |   8 +
 .../control-field/src/public-api.ts           |   0
 .../filter-filter-group-filter.component.html |   4 +-
 .../filter-filter-group-filter.module.ts      |   4 +-
 .../filter/src/lib/filter.module.ts           |   2 +-
 .../filter-input-options.component.ts         |   3 +-
 .../components/filter/src/public-api.ts       |   1 +
 apps/shared/components/icon/ng-package.json   |   6 +
 .../components/icon/src/lib/icon-registry.ts  | 110 +++++
 .../icon/src/lib/icon.component.css           |   0
 .../icon/src/lib/icon.component.html          |   0
 .../components/icon/src/lib/icon.component.ts |  54 +++
 .../components/icon/src/lib/icon.module.ts    |  31 ++
 .../components/icon/src/lib/interfaces.ts     |  17 +
 .../icon/src/lib/loader/empty.loader.ts       |  17 +
 .../icon/src/lib/loader/icon-loader.ts        |   8 +
 .../components/icon/src/lib/loader/index.ts   |   3 +
 .../icon/src/lib/loader/json.loader.ts        |  16 +
 apps/shared/components/icon/src/public-api.ts |   5 +
 .../src/lib/searchbox.component.html          |   4 +-
 .../searchbox/src/lib/searchbox.module.ts     |   3 +-
 apps/shared/components/select/ng-package.json |   6 +
 .../src/lib/select-option.component.css       |   4 +
 .../src/lib/select-option.component.html      |   1 +
 .../select/src/lib/select-option.component.ts |  46 ++
 .../select/src/lib/select.component.css       |  57 +++
 .../select/src/lib/select.component.html      |   9 +
 .../select/src/lib/select.component.ts        | 158 +++++++
 .../select/src/lib/select.module.ts           |   9 +
 .../components/select/src/public-api.ts       |   3 +
 .../purchase-options-list-item.component.html |  18 +-
 .../purchase-options-list-item.component.ts   |   4 +-
 ...ivery-purchase-options-tile.component.html |   2 +-
 ...elivery-purchase-options-tile.component.ts |   4 +-
 ...nload-purchase-options-tile.component.html |   2 +-
 ...ownload-purchase-options-tile.component.ts |   4 +-
 ...store-purchase-options-tile.component.html |   4 +-
 ...n-store-purchase-options-tile.component.ts |   4 +-
 ...ickup-purchase-options-tile.component.html |   4 +-
 .../pickup-purchase-options-tile.component.ts |   4 +-
 apps/shared/pipes/country/ng-package.json     |   6 +
 .../pipes/country/src/lib/country.pipe.ts     |  40 ++
 apps/shared/pipes/country/src/public-api.ts   |   1 +
 .../pipes/customer/src/lib/address.pipe.ts    |  51 +++
 .../customer/src/lib/client-channel.pipe.ts   |  26 ++
 .../pipes/customer/src/lib/country.pipe.ts    |  63 +++
 .../pipes/customer/src/lib/gender.pipe.ts     |  16 +
 .../customer/src/lib/order-status.pipe.ts     |  42 ++
 .../customer/src/lib/order-target.pipe.ts     |  17 +
 .../pipes/customer/src/lib/order-type.pipe.ts |  20 +
 .../customer/src/lib/payment-type.pipe.ts     |  29 ++
 .../pipes/customer/src/lib/pipes.module.ts    |  36 ++
 .../src/lib/processing-status.pipe.ts         |  18 +
 apps/shared/pipes/customer/src/public-api.ts  |  12 +
 .../process-bar-item.component.html           |   4 +-
 .../process-bar/process-bar.component.html    |   4 +-
 .../src/lib/process-bar/process-bar.module.ts |   3 +-
 .../lib/side-menu/side-menu.component.html    |  22 +-
 .../lib/side-menu/side-menu.component.spec.ts |   5 +-
 .../src/lib/side-menu/side-menu.component.ts  |   4 +-
 .../src/lib/top-bar/top-bar.component.html    |   8 +-
 .../shell/src/lib/top-bar/top-bar.module.ts   |   4 +-
 .../checkbox/src/lib/checkbox.component.html  |   4 +-
 apps/ui/checkbox/src/lib/checkbox.module.ts   |   3 +-
 .../src/lib/next/searchbox.component.html     |   2 +-
 .../src/lib/next/searchbox.component.scss     |   2 +-
 .../src/lib/next/searchbox.module.ts          |   5 +-
 package-lock.json                             |  34 +-
 package.json                                  |   4 +-
 paragon-preset.js                             |  81 ++++
 tailwind-plugins/button.plugin.js             |   5 +
 tailwind.config.js                            |   6 +-
 332 files changed, 8054 insertions(+), 1075 deletions(-)
 create mode 100644 apps/isa-app/src/assets/icons.json
 create mode 100644 apps/page/customer-rd/ng-package.json
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.css
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.css
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.css
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/customer-type-selector/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block-data.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/address/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/birth-date/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block-data.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/email/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/form-block.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/interests/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block-data.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/name/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block-data.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/newsletter/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/organisation/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block-data.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block-data.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/split-screen/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/split-screen/side-template.directive.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.css
 create mode 100644 apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.html
 create mode 100644 apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/components/split-screen/split-screen.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/abstract-create-customer.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.component.html
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-customer.component.css
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-customer.component.html
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-customer.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-customer.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-customer.scss
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.component.html
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-guest-customer/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.html
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.component.html
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-store-customer/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.component.html
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/customer-create-form-data.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.css
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.html
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/defs/customer-query-params.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/defs/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.html
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-page.component.css
 create mode 100644 apps/page/customer-rd/src/lib/customer-page.component.html
 create mode 100644 apps/page/customer-rd/src/lib/customer-page.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-page.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/customer-search.component.css
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/customer-search.component.html
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/customer-search.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/customer-search.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.css
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.html
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/edit-main-view/edit-main-view.component.css
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/edit-main-view/edit-main-view.component.html
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/edit-main-view/edit-main-view.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/edit-main-view/edit-main-view.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.css
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.html
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.css
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.html
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.css
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.html
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.css
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.html
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.component.css
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.component.html
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.component.css
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.component.html
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/store/customer-search.state.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/store/customer-search.store.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/store/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/customer-search/store/selectors.ts
 create mode 100644 apps/page/customer-rd/src/lib/guards/customer-create.guard.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.html
 create mode 100644 apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.service.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/address-selection-modal/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.html
 create mode 100644 apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.data.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.html
 create mode 100644 apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/cant-select-guest/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/customer-modal.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html
 create mode 100644 apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.scss
 create mode 100644 apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.data.ts
 create mode 100644 apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.module.ts
 create mode 100644 apps/page/customer-rd/src/lib/navigations/customer-create.navigation.ts
 create mode 100644 apps/page/customer-rd/src/lib/navigations/customer-search.navigation.ts
 create mode 100644 apps/page/customer-rd/src/lib/navigations/index.ts
 create mode 100644 apps/page/customer-rd/src/lib/routes.ts
 create mode 100644 apps/page/customer-rd/src/lib/validators/email-validator.ts
 create mode 100644 apps/page/customer-rd/src/lib/validators/gender-b2b-validator.ts
 create mode 100644 apps/page/customer-rd/src/lib/validators/organisation-delivery-b2b-validator.ts
 create mode 100644 apps/page/customer-rd/src/public-api.ts
 create mode 100644 apps/shared/components/checkbox/ng-package.json
 create mode 100644 apps/shared/components/checkbox/src/lib/checkbox-group.component.html
 create mode 100644 apps/shared/components/checkbox/src/lib/checkbox-group.component.scss
 create mode 100644 apps/shared/components/checkbox/src/lib/checkbox-group.component.ts
 create mode 100644 apps/shared/components/checkbox/src/lib/checkbox.component.html
 create mode 100644 apps/shared/components/checkbox/src/lib/checkbox.component.scss
 create mode 100644 apps/shared/components/checkbox/src/lib/checkbox.component.ts
 create mode 100644 apps/shared/components/checkbox/src/lib/checkbox.module.ts
 create mode 100644 apps/shared/components/checkbox/src/public-api.ts
 create mode 100644 apps/shared/components/control-field/ng-package.json
 create mode 100644 apps/shared/components/control-field/src/lib/control-field.component.css
 create mode 100644 apps/shared/components/control-field/src/lib/control-field.component.html
 create mode 100644 apps/shared/components/control-field/src/lib/control-field.component.ts
 create mode 100644 apps/shared/components/control-field/src/lib/control-field.module.ts
 create mode 100644 apps/shared/components/control-field/src/public-api.ts
 create mode 100644 apps/shared/components/icon/ng-package.json
 create mode 100644 apps/shared/components/icon/src/lib/icon-registry.ts
 create mode 100644 apps/shared/components/icon/src/lib/icon.component.css
 create mode 100644 apps/shared/components/icon/src/lib/icon.component.html
 create mode 100644 apps/shared/components/icon/src/lib/icon.component.ts
 create mode 100644 apps/shared/components/icon/src/lib/icon.module.ts
 create mode 100644 apps/shared/components/icon/src/lib/interfaces.ts
 create mode 100644 apps/shared/components/icon/src/lib/loader/empty.loader.ts
 create mode 100644 apps/shared/components/icon/src/lib/loader/icon-loader.ts
 create mode 100644 apps/shared/components/icon/src/lib/loader/index.ts
 create mode 100644 apps/shared/components/icon/src/lib/loader/json.loader.ts
 create mode 100644 apps/shared/components/icon/src/public-api.ts
 create mode 100644 apps/shared/components/select/ng-package.json
 create mode 100644 apps/shared/components/select/src/lib/select-option.component.css
 create mode 100644 apps/shared/components/select/src/lib/select-option.component.html
 create mode 100644 apps/shared/components/select/src/lib/select-option.component.ts
 create mode 100644 apps/shared/components/select/src/lib/select.component.css
 create mode 100644 apps/shared/components/select/src/lib/select.component.html
 create mode 100644 apps/shared/components/select/src/lib/select.component.ts
 create mode 100644 apps/shared/components/select/src/lib/select.module.ts
 create mode 100644 apps/shared/components/select/src/public-api.ts
 create mode 100644 apps/shared/pipes/country/ng-package.json
 create mode 100644 apps/shared/pipes/country/src/lib/country.pipe.ts
 create mode 100644 apps/shared/pipes/country/src/public-api.ts
 create mode 100644 apps/shared/pipes/customer/src/lib/address.pipe.ts
 create mode 100644 apps/shared/pipes/customer/src/lib/client-channel.pipe.ts
 create mode 100644 apps/shared/pipes/customer/src/lib/country.pipe.ts
 create mode 100644 apps/shared/pipes/customer/src/lib/gender.pipe.ts
 create mode 100644 apps/shared/pipes/customer/src/lib/order-status.pipe.ts
 create mode 100644 apps/shared/pipes/customer/src/lib/order-target.pipe.ts
 create mode 100644 apps/shared/pipes/customer/src/lib/order-type.pipe.ts
 create mode 100644 apps/shared/pipes/customer/src/lib/payment-type.pipe.ts
 create mode 100644 apps/shared/pipes/customer/src/lib/pipes.module.ts
 create mode 100644 apps/shared/pipes/customer/src/lib/processing-status.pipe.ts
 create mode 100644 apps/shared/pipes/customer/src/public-api.ts
 create mode 100644 paragon-preset.js

diff --git a/apps/domain/checkout/src/lib/checkout.service.ts b/apps/domain/checkout/src/lib/checkout.service.ts
index 7aa05236f..5c1d087bd 100644
--- a/apps/domain/checkout/src/lib/checkout.service.ts
+++ b/apps/domain/checkout/src/lib/checkout.service.ts
@@ -930,6 +930,5 @@ export class DomainCheckoutService {
   private updateProcessCount(processId: number, count: number) {
     this.applicationService.patchProcessData(processId, { count });
   }
-
   //#endregion
 }
diff --git a/apps/domain/crm/src/lib/crm-customer.service.ts b/apps/domain/crm/src/lib/crm-customer.service.ts
index beaf27e2a..c48784794 100644
--- a/apps/domain/crm/src/lib/crm-customer.service.ts
+++ b/apps/domain/crm/src/lib/crm-customer.service.ts
@@ -18,14 +18,15 @@ import {
   NotificationChannel,
   PayerDTO,
   PayerService,
+  QueryTokenDTO,
   ResponseArgsOfIEnumerableOfBonusCardInfoDTO,
   ShippingAddressDTO,
   ShippingAddressService,
 } from '@swagger/crm';
-import { isArray } from '@utils/common';
+import { isArray, memorize } from '@utils/common';
 import { PagedResult, Result } from 'apps/domain/defs/src/public-api';
 import { Observable, of, ReplaySubject } from 'rxjs';
-import { catchError, map, mergeMap, retry } from 'rxjs/operators';
+import { catchError, map, mergeMap, retry, shareReplay } from 'rxjs/operators';
 
 @Injectable({ providedIn: 'root' })
 export class CrmCustomerService {
@@ -38,6 +39,14 @@ export class CrmCustomerService {
     private loyaltyCardService: LoyaltyCardService
   ) {}
 
+  @memorize()
+  filterSettings() {
+    return this.customerService.CustomerCustomerQuerySettings().pipe(
+      map((res) => res.result),
+      shareReplay(1)
+    );
+  }
+
   complete(queryString: string, filter?: { [key: string]: string }): Observable<Result<AutocompleteDTO[]>> {
     return this.customerService.CustomerCustomerAutocomplete({
       input: queryString,
@@ -66,6 +75,15 @@ export class CrmCustomerService {
     });
   }
 
+  getCustomersWithQueryToken(queryToken: QueryTokenDTO) {
+    if (queryToken.skip === undefined) queryToken.skip = 0;
+    if (queryToken.take === undefined) queryToken.take = 20;
+    if (queryToken.input === undefined) queryToken.input = { qs: '' };
+    if (queryToken.filter === undefined) queryToken.filter = {};
+
+    return this.customerService.CustomerListCustomers(queryToken);
+  }
+
   getCustomersByCustomerCardNumber(queryString: string): Observable<PagedResult<CustomerInfoDTO>> {
     return this.customerService.CustomerGetCustomerByBonuscard(!!queryString ? queryString : undefined);
   }
diff --git a/apps/isa-app/src/app/app.module.ts b/apps/isa-app/src/app/app.module.ts
index 3c7a09c20..45a673474 100644
--- a/apps/isa-app/src/app/app.module.ts
+++ b/apps/isa-app/src/app/app.module.ts
@@ -32,11 +32,11 @@ import { IsaErrorHandler } from './providers/isa.error-handler';
 import { ScanAdapterModule, ScanAdapterService, ScanditScanAdapterModule } from '@adapter/scan';
 import { RootStateService } from './store/root-state.service';
 import * as Commands from './commands';
-import { UiIconModule, UI_ICON_CFG } from '@ui/icon';
 import { PreviewComponent } from './preview';
 import { NativeContainerService } from 'native-container';
 import { ShellModule } from '@shared/shell';
 import { MainComponent } from './main.component';
+import { IconModule } from '@shared/components/icon';
 
 registerLocaleData(localeDe, localeDeExtra);
 registerLocaleData(localeDe, 'de', localeDeExtra);
@@ -106,7 +106,7 @@ export function _notificationsHubOptionsFactory(config: Config, auth: AuthServic
     ScanAdapterModule.forRoot(),
     ScanditScanAdapterModule.forRoot(),
     PlatformModule,
-    UiIconModule.forRoot(),
+    IconModule.forRoot(),
   ],
   providers: [
     {
@@ -135,11 +135,6 @@ export function _notificationsHubOptionsFactory(config: Config, auth: AuthServic
       useClass: IsaErrorHandler,
     },
     { provide: LOCALE_ID, useValue: 'de-DE' },
-    {
-      provide: UI_ICON_CFG,
-      useFactory: (config: Config) => config.get('@ui/icon'),
-      deps: [Config],
-    },
   ],
   bootstrap: [AppComponent],
 })
diff --git a/apps/isa-app/src/assets/icons.json b/apps/isa-app/src/assets/icons.json
new file mode 100644
index 000000000..d88ce70cb
--- /dev/null
+++ b/apps/isa-app/src/assets/icons.json
@@ -0,0 +1,335 @@
+{
+    "fallback": "",
+    "viewBox": "0 0 24 24",
+    "icons": [
+        {
+            "name": "account",
+            "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
+        },
+        {
+            "name": "package-variant-closed",
+            "data": "M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L10.11,5.22L16,8.61L17.96,7.5L12,4.15M6.04,7.5L12,10.85L13.96,9.75L8.08,6.35L6.04,7.5M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z"
+        },
+        {
+            "name": "magnify",
+            "data": "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
+        },
+        {
+            "name": "barcode-scan",
+            "data": "M4,6H6V18H4V6M7,6H8V18H7V6M9,6H12V18H9V6M13,6H14V18H13V6M16,6H18V18H16V6M19,6H20V18H19V6M2,4V8H0V4A2,2 0 0,1 2,2H6V4H2M22,2A2,2 0 0,1 24,4V8H22V4H18V2H22M2,16V20H6V22H2A2,2 0 0,1 0,20V16H2M22,20V16H24V20A2,2 0 0,1 22,22H18V20H22Z"
+        },
+        {
+            "name": "arrow-left",
+            "data": "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
+        },
+        {
+            "name": "chevron-right",
+            "data": "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
+        },
+        {
+            "name": "filter-variant",
+            "data": "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
+        },
+        {
+            "name": "close",
+            "data": "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
+        },
+        {
+            "name": "menu-down",
+            "data": "M7,10L12,15L17,10H7Z"
+        },
+        {
+            "name": "menu-up",
+            "data": "M7,15L12,10L17,15H7Z"
+        },
+        {
+            "name": "isa-audio",
+            "data": "M3.629,12.777C2.165,12.924 1,14.153 1,15.664L1,19.358C1,20.969 2.326,22.275 3.926,22.275L6.418,22.275C7.061,22.275 7.602,21.756 7.602,21.114L7.602,13.908C7.602,13.264 7.063,12.762 6.418,12.762L5.959,12.762C5.959,12.762 5.959,10.214 5.959,10.214C5.959,6.818 8.675,4.056 12.023,4.056C15.371,4.056 18.088,6.822 18.088,10.214C18.088,10.214 18.088,12.762 18.088,12.762C18.088,12.762 17.629,12.762 17.629,12.762C16.984,12.762 16.445,13.264 16.445,13.908C16.445,13.908 16.445,21.114 16.445,21.114C16.445,21.756 16.986,22.275 17.629,22.275L20.121,22.275C21.724,22.275 23,20.972 23,19.358C23,19.358 23,15.664 23,15.664C23,14.151 21.879,12.924 20.418,12.777L20.418,10.214C20.418,5.531 16.651,1.725 12.023,1.725C7.396,1.725 3.629,5.531 3.629,10.214L3.629,12.777ZM5.272,19.944L3.926,19.944C3.607,19.944 3.33,19.685 3.33,19.358C3.33,19.358 3.33,15.664 3.33,15.664C3.33,15.339 3.608,15.092 3.926,15.092C3.926,15.092 5.272,15.092 5.272,15.092L5.272,19.944ZM20.67,19.359C20.669,19.68 20.435,19.944 20.121,19.944C20.121,19.944 18.775,19.944 18.775,19.944C18.775,19.944 18.775,15.092 18.775,15.092C18.775,15.092 20.121,15.092 20.121,15.092C20.433,15.092 20.67,15.347 20.67,15.664L20.67,19.359Z"
+        },
+        {
+            "name": "isa-calendar",
+            "data": "M1,8.937C1,8.955 1,8.974 1.001,8.993C1,8.983 1,19.761 1,19.761C1,21.539 2.464,23 4.241,23C4.241,23 19.767,23 19.767,23C21.544,23 23,21.54 23,19.761L23,8.907C23,8.911 23,6.101 23,6.101C23,4.322 21.543,2.862 19.767,2.862C19.767,2.862 17.768,2.862 17.768,2.862C17.768,2.862 17.768,2.075 17.768,2.075C17.772,1.795 17.66,1.517 17.455,1.312L17.455,1.312C17.251,1.108 16.972,0.995 16.684,1C16.4,1.004 16.131,1.121 15.934,1.324C15.737,1.528 15.628,1.801 15.633,2.084C15.633,2.075 15.633,2.862 15.633,2.862C15.633,2.862 8.294,2.862 8.294,2.862C8.294,2.862 8.294,2.075 8.294,2.075C8.298,1.795 8.185,1.517 7.981,1.312L7.981,1.312C7.781,1.113 7.511,1 7.228,1L7.11,1.003C6.559,1.064 6.147,1.534 6.159,2.088C6.159,2.075 6.159,2.862 6.159,2.862C6.159,2.862 4.241,2.862 4.241,2.862C2.465,2.862 1,4.322 1,6.101L1,8.879L1.595,9.473L1,8.88L1,8.937ZM3.135,10.042L20.865,10.042C20.865,10.042 20.865,19.761 20.865,19.761C20.865,20.369 20.373,20.865 19.767,20.865L4.241,20.865C3.634,20.865 3.135,20.37 3.135,19.761L3.135,10.042ZM4.241,4.996L6.159,4.996C6.159,4.996 6.159,5.783 6.159,5.783C6.158,6.164 6.361,6.517 6.692,6.708C7.022,6.9 7.43,6.9 7.761,6.708C8.091,6.517 8.295,6.164 8.294,5.782C8.294,5.783 8.294,4.996 8.294,4.996C8.294,4.996 15.633,4.996 15.633,4.996C15.633,4.996 15.633,5.783 15.633,5.783C15.632,6.164 15.835,6.517 16.166,6.708C16.496,6.9 16.904,6.9 17.235,6.708C17.565,6.517 17.769,6.164 17.768,5.782C17.768,5.783 17.768,4.996 17.768,4.996C17.768,4.996 19.767,4.996 19.767,4.996C20.373,4.996 20.865,5.492 20.865,6.101C20.865,6.101 20.865,7.907 20.865,7.907C20.865,7.907 3.135,7.907 3.135,7.907C3.135,7.907 3.135,6.101 3.135,6.101C3.135,5.492 3.634,4.996 4.241,4.996Z"
+        },
+        {
+            "name": "isa-ebook",
+            "data": "M18.637,1L5.363,1C4.058,1 2.991,2.067 2.991,3.372L2.991,20.628C2.991,21.933 4.058,23 5.363,23C5.363,23 18.637,23 18.637,23C19.942,23 21.009,21.933 21.009,20.628L21.009,3.372C21.009,2.028 19.942,1 18.637,1ZM18.92,20.628C18.92,20.784 18.793,20.911 18.637,20.911C18.637,20.911 5.363,20.911 5.363,20.911C5.207,20.911 5.08,20.784 5.08,20.628L5.08,3.372C5.08,3.216 5.207,3.089 5.363,3.089C5.363,3.089 18.637,3.089 18.637,3.089C18.793,3.089 18.92,3.216 18.92,3.372C18.92,3.372 18.92,20.628 18.92,20.628ZM12,16.324C11.061,16.324 10.292,17.093 10.292,18.032C10.292,18.971 11.061,19.74 12,19.74C12.939,19.74 13.708,18.971 13.708,18.032C13.708,17.05 12.939,16.324 12,16.324ZM13.181,4.26L10.643,4.26C10.09,4.26 9.628,4.725 9.628,5.304C9.628,5.883 10.09,6.349 10.643,6.349L13.181,6.349C13.735,6.349 14.196,5.883 14.196,5.304C14.196,4.673 13.735,4.26 13.181,4.26Z"
+        },
+        {
+            "name": "isa-hard-cover",
+            "data": "M4.109,3.168L4.105,3.169C3.708,3.207 3.407,3.545 3.408,3.951C3.408,3.95 3.408,5.027 3.408,5.027L1.696,5.028C1.3,5.066 0.998,5.404 1,5.81C1,5.809 1,18.512 1,18.512C1,18.945 1.344,19.294 1.765,19.294L9.319,19.294C10.324,19.294 10.957,19.658 11.317,20.403L11.318,20.404C11.449,20.668 11.713,20.833 12,20.833C12.287,20.833 12.551,20.668 12.682,20.404L12.682,20.404C13.043,19.658 13.676,19.294 14.681,19.294L22.235,19.294C22.656,19.294 23,18.945 23,18.512L23,5.809C23,5.376 22.656,5.027 22.235,5.027L20.592,5.027C20.592,5.027 20.592,3.95 20.592,3.95C20.592,3.517 20.248,3.168 19.827,3.168L14.681,3.168C13.615,3.168 12.642,3.708 12,4.512C11.357,3.708 10.385,3.168 9.319,3.168L4.109,3.168ZM2.529,6.592L3.408,6.592C3.408,6.592 3.408,16.343 3.408,16.343C3.408,16.777 3.752,17.125 4.173,17.125L8.34,17.125C9.144,17.125 9.811,17.347 10.302,17.782C10.332,17.808 10.36,17.834 10.388,17.862C10.048,17.774 9.69,17.73 9.319,17.73C9.319,17.73 2.529,17.73 2.529,17.73L2.529,6.592ZM20.592,6.592L21.471,6.592C21.471,6.592 21.471,17.73 21.471,17.73C21.471,17.73 14.681,17.73 14.681,17.73C14.31,17.73 13.951,17.774 13.614,17.861C13.64,17.834 13.668,17.808 13.698,17.782C14.189,17.347 14.856,17.125 15.66,17.125L19.827,17.125C20.248,17.125 20.592,16.777 20.592,16.343L20.592,6.592ZM11.235,16.536C10.449,15.875 9.427,15.561 8.34,15.561L4.938,15.561L4.938,4.733L9.319,4.733C9.891,4.733 10.467,5.071 10.838,5.517C11.078,5.805 11.234,6.14 11.235,6.462L11.235,16.536ZM12.765,16.536L12.765,6.466C12.765,6.144 12.921,5.807 13.162,5.517C13.533,5.071 14.109,4.733 14.681,4.733L19.062,4.733C19.062,4.733 19.062,15.561 19.062,15.561C19.062,15.561 15.66,15.561 15.66,15.561C14.573,15.561 13.551,15.875 12.765,16.536ZM6.419,12.826L6.419,12.826C6.419,13.215 6.734,13.531 7.123,13.531C7.123,13.531 9.291,13.531 9.291,13.531C9.68,13.531 9.995,13.215 9.995,12.826L9.995,12.795C9.995,12.406 9.68,12.09 9.291,12.09L7.123,12.09C6.734,12.09 6.419,12.406 6.419,12.795L6.581,12.957C6.581,12.957 6.419,12.796 6.419,12.796L6.419,12.826ZM14.005,12.826L14.005,12.826C14.005,13.215 14.32,13.531 14.709,13.531C14.709,13.531 16.877,13.531 16.877,13.531C17.266,13.531 17.581,13.215 17.581,12.826L17.581,12.795C17.581,12.406 17.266,12.09 16.877,12.09L14.709,12.09C14.32,12.09 14.005,12.406 14.005,12.795L14.167,12.957C14.167,12.957 14.005,12.796 14.005,12.796L14.005,12.826ZM9.82,12.944L9.82,12.944L9.833,12.957L9.82,12.944ZM17.406,12.944L17.406,12.944L17.419,12.957L17.406,12.944ZM14.005,10.596L14.005,10.596C14.005,10.985 14.32,11.3 14.709,11.3L16.877,11.3C17.266,11.3 17.581,10.985 17.581,10.596L17.581,10.564C17.581,10.175 17.266,9.86 16.877,9.86L14.709,9.86C14.32,9.86 14.005,10.175 14.005,10.564L14.167,10.727C14.167,10.727 14.005,10.565 14.005,10.565L14.005,10.596ZM6.419,10.596L6.419,10.596C6.419,10.985 6.734,11.3 7.123,11.3L9.291,11.3C9.68,11.3 9.995,10.985 9.995,10.596L9.995,10.564C9.995,10.175 9.68,9.86 9.291,9.86L7.123,9.86C6.734,9.86 6.419,10.175 6.419,10.564L6.581,10.727C6.581,10.727 6.419,10.565 6.419,10.565L6.419,10.596ZM9.82,10.714L9.82,10.714L9.833,10.727L9.82,10.714ZM17.406,10.714L17.406,10.714L17.419,10.727L17.406,10.714ZM6.419,8.365L6.419,8.365C6.419,8.754 6.734,9.069 7.123,9.069L9.291,9.069C9.68,9.069 9.995,8.754 9.995,8.365L9.995,8.333C9.995,7.944 9.68,7.629 9.291,7.629L7.123,7.629C6.734,7.629 6.419,7.944 6.419,8.333L6.581,8.496C6.581,8.496 6.419,8.334 6.419,8.334L6.419,8.365ZM14.005,8.365L14.005,8.365C14.005,8.754 14.32,9.069 14.709,9.069L16.877,9.069C17.266,9.069 17.581,8.754 17.581,8.365L17.581,8.333C17.581,7.944 17.266,7.629 16.877,7.629L14.709,7.629C14.32,7.629 14.005,7.944 14.005,8.333L14.167,8.496C14.167,8.496 14.005,8.334 14.005,8.334L14.005,8.365ZM17.406,8.483L17.406,8.483L17.419,8.496L17.406,8.483ZM9.82,8.483L9.82,8.483L9.833,8.496L9.82,8.483Z"
+        },
+        {
+            "name": "isa-news-paper",
+            "data": "M12.022,5.892L12.009,5.896L3.216,1.669L3.19,1.66C3.008,1.599 2.769,1.609 2.582,1.722L2.585,1.72C2.386,1.831 2.238,2.09 2.238,2.301L2.238,2.534C2.092,2.518 1.946,2.55 1.8,2.648L1.764,2.672L1.734,2.702C1.614,2.822 1.506,3.053 1.506,3.232L1.506,3.626C1.415,3.652 1.332,3.698 1.262,3.759C1.074,3.897 1,4.096 1,4.3L1,19.336C1,19.675 1.207,19.943 1.543,20.014C1.543,20.014 11.9,22.378 11.9,22.378L12.099,22.378L22.457,20.039C22.793,19.968 23,19.701 23,19.361L23,4.326C23,4.138 22.896,3.941 22.772,3.816C22.695,3.739 22.599,3.682 22.494,3.651L22.494,3.187C22.494,2.973 22.413,2.765 22.2,2.622L22.2,2.622C22.062,2.53 21.924,2.497 21.787,2.507L21.787,2.301C21.787,2.094 21.673,1.874 21.467,1.736C21.277,1.61 21.025,1.597 20.835,1.66L20.809,1.669L12.022,5.892ZM21.624,18.812L12.688,20.842C12.688,20.842 12.688,7.204 12.688,7.204C12.688,7.204 21.624,5.174 21.624,5.174L21.624,18.812ZM2.376,5.174L11.312,7.204C11.312,7.204 11.312,20.842 11.312,20.842C11.312,20.842 2.376,18.812 2.376,18.812L2.376,5.174ZM17.542,11.044L16.99,11.541C16.99,11.541 16.484,11.339 16.484,11.339C16.139,11.2 15.734,11.358 15.592,11.7C15.595,11.694 15.262,12.42 15.262,12.42C15.262,12.42 14.545,12.556 14.545,12.556C14.202,12.625 13.991,12.894 13.991,13.236L14.03,13.94C14.03,13.94 13.356,14.451 13.356,14.451L13.335,14.472C13.202,14.605 13.107,14.758 13.107,14.957C13.107,15.091 13.139,15.276 13.261,15.416C13.26,15.415 13.553,15.787 13.553,15.787C13.553,15.787 13.192,16.454 13.192,16.454L13.18,16.49C13.124,16.658 13.124,16.825 13.18,16.993L13.198,17.048L13.23,17.097C13.342,17.264 13.464,17.364 13.632,17.42L14.083,17.541C14.083,17.541 14.067,18.064 14.067,18.064C14.067,18.284 14.149,18.492 14.362,18.635C14.558,18.766 14.76,18.802 14.956,18.74C14.956,18.74 15.494,18.582 15.494,18.582C15.494,18.582 15.707,18.928 15.707,18.928C15.802,19.143 16.036,19.29 16.271,19.29L16.336,19.29C16.527,19.283 16.668,19.222 16.801,19.044C16.8,19.045 17.322,18.575 17.322,18.575C17.322,18.575 17.828,18.778 17.828,18.778C18.169,18.915 18.569,18.763 18.715,18.428C18.715,18.428 19.044,17.748 19.044,17.748C19.044,17.748 19.767,17.612 19.767,17.612C20.111,17.543 20.321,17.273 20.321,16.931L20.282,16.227C20.282,16.227 20.956,15.716 20.956,15.716L20.977,15.695C21.11,15.562 21.205,15.41 21.205,15.21C21.205,15.077 21.173,14.891 21.052,14.751L20.759,14.381L21.121,13.713L21.133,13.677C21.188,13.509 21.188,13.342 21.133,13.174L21.114,13.119L21.082,13.071C20.97,12.903 20.848,12.803 20.681,12.747L20.23,12.626C20.23,12.626 20.245,12.103 20.245,12.103C20.245,11.883 20.164,11.675 19.95,11.532L19.95,11.532C19.754,11.402 19.552,11.366 19.356,11.427C19.356,11.427 18.818,11.585 18.818,11.585C18.818,11.585 18.606,11.239 18.606,11.239C18.521,11.048 18.324,10.909 18.116,10.882C17.9,10.833 17.689,10.904 17.542,11.044ZM9.936,8.583L3.9,7.206L3.851,7.206C3.673,7.206 3.507,7.244 3.379,7.349L3.394,7.339C3.191,7.481 3.113,7.685 3.113,7.894L3.113,17.133C3.113,17.472 3.32,17.739 3.656,17.811C3.656,17.811 9.691,19.188 9.691,19.188L9.791,19.188C9.905,19.188 10.024,19.148 10.137,19.091L10.162,19.079L10.184,19.064C10.397,18.922 10.479,18.713 10.479,18.5C10.479,18.5 10.479,9.261 10.479,9.261C10.479,8.922 10.272,8.654 9.936,8.583L9.936,8.583ZM9.078,17.652L4.463,16.608C4.463,16.608 4.463,8.767 4.463,8.767C4.463,8.767 9.078,9.811 9.078,9.811L9.078,17.652ZM17.942,16.814L17.736,17.269C17.736,17.269 17.427,17.154 17.427,17.154C17.21,17.081 16.932,17.097 16.722,17.307L16.734,17.296L16.479,17.522L16.406,17.399C16.276,17.203 16.012,17.079 15.817,17.079C15.723,17.079 15.634,17.09 15.543,17.144C15.547,17.142 15.468,17.164 15.468,17.164C15.468,17.164 15.468,17.064 15.468,17.064C15.511,16.724 15.253,16.436 14.972,16.36C14.972,16.36 14.87,16.332 14.87,16.332C14.87,16.332 15.014,16.071 15.014,16.071C15.147,15.803 15.095,15.543 14.965,15.349L14.786,15.114C14.786,15.114 15.164,14.827 15.164,14.827C15.353,14.693 15.443,14.445 15.443,14.248L15.415,13.786C15.415,13.786 15.848,13.694 15.848,13.694C16.123,13.674 16.283,13.478 16.357,13.329L16.576,12.848C16.576,12.848 16.885,12.963 16.885,12.963C17.08,13.028 17.336,12.989 17.524,12.864L17.545,12.849L17.853,12.587L17.931,12.717C18.068,12.922 18.405,13.068 18.677,13L18.849,12.952C18.849,12.952 18.845,13.043 18.845,13.043C18.798,13.388 19.057,13.68 19.34,13.756C19.34,13.756 19.434,13.783 19.434,13.783L19.294,14.029C19.165,14.288 19.217,14.548 19.347,14.742L19.526,14.977C19.526,14.977 19.148,15.264 19.148,15.264L19.151,15.262C18.959,15.399 18.869,15.647 18.869,15.843L18.897,16.305C18.897,16.305 18.407,16.41 18.407,16.41L18.383,16.418C18.191,16.482 18.017,16.627 17.942,16.814ZM14.098,11.073L14.191,11.073L20.49,9.606C20.806,9.537 21.004,9.283 21.004,8.958C21.004,8.958 21.004,7.344 21.004,7.344C21.004,7.167 20.909,6.979 20.792,6.861C20.642,6.707 20.416,6.634 20.19,6.701C20.193,6.7 13.957,8.153 13.957,8.153C13.641,8.221 13.443,8.475 13.443,8.801L13.443,10.414C13.443,10.592 13.539,10.779 13.655,10.898L13.705,10.949L13.768,10.981C13.876,11.036 13.99,11.073 14.098,11.073ZM17.542,11.044L17.531,11.055L17.542,11.044ZM14.752,9.325L19.696,8.162C19.696,8.162 19.696,8.412 19.696,8.412C19.696,8.412 14.752,9.574 14.752,9.574L14.752,9.325ZM21.473,3.574L21.553,3.973L21.554,3.973L21.554,3.541L21.473,3.574Z"
+        },
+        {
+            "name": "isa-non-book",
+            "data": "M11.215,5.282L9.049,1L6.884,5.282L6.884,7.704C6.081,8.012 5.499,8.385 5.14,8.786C4.803,9.164 4.641,9.575 4.641,10.002L4.641,19.873C4.641,20.614 5.183,21.34 6.218,21.883C7.504,22.558 9.591,23 12,23C14.408,23 16.495,22.558 17.781,21.888C18.818,21.349 19.359,20.627 19.359,19.896L19.359,10.025C19.359,9.262 18.765,8.483 17.588,7.918C17.588,7.918 17.588,1.437 17.588,1.437L13.257,1.437L13.257,6.947C12.577,6.901 11.896,6.891 11.215,6.917C11.215,6.917 11.215,5.282 11.215,5.282ZM12,21.506C9.805,21.506 8.048,21.14 6.994,20.626C6.691,20.478 6.453,20.322 6.293,20.156C6.207,20.067 6.14,19.987 6.14,19.896L6.14,11.96C7.444,12.655 9.564,13.129 12,13.129C14.436,13.129 16.556,12.655 17.859,11.96C17.86,11.96 17.86,19.873 17.86,19.873C17.86,19.968 17.793,20.054 17.705,20.147C17.545,20.315 17.307,20.473 17.004,20.622C15.951,21.141 14.194,21.506 12,21.506ZM13.257,8.446L13.257,11.606C12.864,11.635 12.448,11.658 12.008,11.659C12.008,11.659 11.215,11.63 11.215,11.63C11.215,11.63 11.215,8.43 11.215,8.43C11.895,8.396 12.577,8.401 13.257,8.446L13.257,8.446ZM9.047,4.321L9.716,5.644C9.716,5.644 9.716,11.502 9.716,11.502C9.267,11.44 8.822,11.353 8.383,11.242C8.383,11.242 8.383,5.622 8.383,5.622L9.047,4.321ZM16.089,11.122C15.652,11.256 15.206,11.362 14.756,11.439C14.756,11.439 14.756,5.731 14.756,5.731C14.756,5.731 16.089,5.731 16.089,5.731L16.089,11.122ZM6.884,9.354L6.884,10.721C6.7,10.626 6.543,10.524 6.416,10.418C6.257,10.286 6.14,10.166 6.14,10.025C6.14,9.887 6.261,9.775 6.418,9.649C6.546,9.546 6.702,9.447 6.884,9.354L6.884,9.354ZM17.86,10.025C17.86,10.127 17.779,10.214 17.678,10.312C17.65,10.339 17.62,10.365 17.588,10.392C17.588,10.391 17.588,9.659 17.588,9.659C17.62,9.685 17.65,9.712 17.678,9.739C17.779,9.837 17.86,9.923 17.86,10.025ZM16.089,2.931L16.089,4.238C16.089,4.238 14.756,4.238 14.756,4.238C14.756,4.238 14.756,2.931 14.756,2.931L16.089,2.931Z"
+        },
+        {
+            "name": "isa-scroll",
+            "data": "M20.88,16.904L20.88,4.048C20.88,2.365 19.515,1 17.831,1L4.048,1C2.365,1 1,2.365 1,4.048L1,7.096L5.241,7.096C5.241,7.096 5.241,19.952 5.241,19.952C5.241,21.635 6.606,23 8.289,23C8.289,23 19.952,23 19.952,23C21.635,23 23,21.635 23,19.952C23,19.952 23,16.904 23,16.904L20.88,16.904ZM9.482,19.952C9.482,20.61 8.947,21.145 8.289,21.145C7.631,21.145 7.096,20.61 7.096,19.952L7.096,4.048C7.096,3.623 7.007,3.221 6.848,2.856C6.847,2.855 17.831,2.855 17.831,2.855C18.489,2.855 19.024,3.39 19.024,4.048C19.024,4.048 19.024,16.904 19.024,16.904C19.024,16.904 9.482,16.904 9.482,16.904L9.482,19.952ZM21.145,19.952C21.145,20.61 20.61,21.145 19.952,21.145L11.088,21.145C11.248,20.779 11.337,20.377 11.337,19.952L11.337,18.759C11.337,18.759 21.145,18.759 21.145,18.759C21.145,18.759 21.145,19.952 21.145,19.952ZM5.241,5.241L2.855,5.241C2.855,5.241 2.855,4.048 2.855,4.048C2.855,3.39 3.39,2.855 4.048,2.855C4.706,2.855 5.241,3.39 5.241,4.048L5.241,5.241Z"
+        },
+        {
+            "name": "isa-soft-cover",
+            "data": "M18.963,17.967C19.451,17.954 19.842,17.555 19.842,17.064C19.842,17.064 19.842,1.904 19.842,1.904C19.842,1.405 19.437,1 18.938,1L6.154,1C5.047,1.005 4.154,1.905 4.158,3.011C4.158,3.009 4.158,18.545 4.158,18.545C4.16,19.862 5.226,20.928 6.542,20.93L7.479,20.93C7.479,20.93 7.479,22.095 7.479,22.095C7.477,22.443 7.68,22.764 7.997,22.914C8.315,23.064 8.691,23.016 8.961,22.791C8.96,22.792 9.643,22.226 9.643,22.226C9.643,22.226 10.324,22.788 10.324,22.788C10.592,23.011 10.968,23.059 11.286,22.909C11.604,22.759 11.806,22.438 11.804,22.087C11.804,22.09 11.804,20.925 11.804,20.925C11.804,20.925 18.938,20.925 18.938,20.925C19.437,20.925 19.842,20.521 19.842,20.021C19.842,19.531 19.451,19.132 18.964,19.118C18.665,19.094 18.434,18.844 18.434,18.543C18.434,18.247 18.657,18.001 18.948,17.969L18.963,17.967ZM9.287,20.217C9.513,20.12 9.77,20.12 9.997,20.217L9.997,19.449C9.997,19.449 9.287,19.449 9.287,19.449L9.287,20.217ZM7.684,17.973C7.556,18.128 7.479,18.328 7.479,18.545L7.479,19.125C7.479,19.125 6.53,19.125 6.53,19.125C6.305,19.135 6.105,19.027 5.996,18.845C5.886,18.663 5.886,18.435 5.996,18.252C6.105,18.07 6.305,17.962 6.518,17.972L7.684,17.973ZM16.626,19.12L11.804,19.12C11.804,19.12 11.804,18.545 11.804,18.545C11.804,18.328 11.727,18.128 11.6,17.973L16.628,17.973C16.533,18.349 16.533,18.744 16.626,19.12ZM6.543,16.16C6.35,16.161 6.16,16.185 5.975,16.232C5.975,16.232 5.975,3.007 5.975,3.007C5.974,2.902 6.054,2.816 6.156,2.808C6.165,2.807 18.035,2.807 18.035,2.807C18.035,2.807 18.035,16.16 18.035,16.16L6.543,16.16Z"
+        },
+        {
+            "name": "isa-video",
+            "data": "M12,23C18.075,23 23,18.075 23,12C23,5.925 18.075,1 12,1C5.925,1 1,5.925 1,12C1,18.075 5.925,23 12,23ZM12,2.784C17.09,2.784 21.216,6.91 21.216,12C21.216,17.09 17.09,21.216 12,21.216C6.91,21.216 2.784,17.09 2.784,12C2.784,6.91 6.91,2.784 12,2.784ZM15.786,10.998L9.84,7.431C9.566,7.262 9.226,7.26 8.941,7.42C8.655,7.581 8.492,7.875 8.492,8.197C8.492,8.197 8.492,15.332 8.492,15.332C8.492,15.652 8.66,15.946 8.943,16.107C9.079,16.187 9.231,16.224 9.384,16.224C9.545,16.224 9.706,16.179 9.84,16.098C9.84,16.098 15.786,12.531 15.786,12.531C16.059,12.372 16.222,12.077 16.222,11.764C16.222,11.451 16.059,11.157 15.782,10.996L15.786,10.998ZM10.276,13.755L10.276,9.769C10.276,9.769 13.598,11.764 13.598,11.764L10.276,13.755Z"
+        },
+        {
+            "name": "isa-software",
+            "data": "M12,23C18.075,23 23,18.075 23,12C23,5.925 18.075,1 12,1C5.925,1 1,5.925 1,12C1,18.075 5.925,23 12,23ZM12,21.248C6.892,21.248 2.752,17.108 2.752,12C2.752,6.892 6.892,2.752 12,2.752C17.108,2.752 21.248,6.892 21.248,12C21.248,17.108 17.108,21.248 12,21.248ZM11.991,16.481C14.526,16.481 16.589,14.418 16.589,11.884C16.589,9.349 14.526,7.286 11.991,7.286C9.456,7.286 7.393,9.349 7.393,11.884C7.393,14.418 9.456,16.481 11.991,16.481ZM11.991,9.065C13.528,9.065 14.758,10.294 14.758,11.831C14.758,13.368 13.528,14.598 11.991,14.598C10.454,14.598 9.224,13.368 9.224,11.831C9.224,10.294 10.454,9.065 11.991,9.065ZM11.991,14.153C13.229,14.153 14.261,13.122 14.261,11.884C14.261,10.646 13.229,9.614 11.991,9.614C10.753,9.614 9.721,10.646 9.721,11.884C9.721,13.122 10.753,14.153 11.991,14.153ZM11.991,11.257C12.337,11.257 12.618,11.538 12.618,11.884C12.618,12.23 12.337,12.511 11.991,12.511C11.645,12.511 11.364,12.23 11.364,11.884C11.364,11.538 11.645,11.257 11.991,11.257ZM15.795,4.606L15.927,4.081C17.745,5.06 19.191,6.645 20.03,8.509L20.249,8.995L18.673,9.671L18.46,9.207C17.76,7.682 16.609,6.361 15.126,5.578L15.342,5.692C15.342,5.692 14.909,4.866 14.909,4.866L15.217,4.294L15.53,4.818L15.611,4.668L15.615,4.651L15.619,4.653L15.679,4.542C15.717,4.563 15.756,4.585 15.795,4.606Z"
+        },
+        {
+            "name": "isa-shopping-bag",
+            "data": "M6.951,6.624L6.951,6.118C6.951,3.279 9.232,1 12.022,1C14.811,1 17.092,3.279 17.092,6.118L17.092,6.624L19.88,6.624C20.242,6.628 20.593,6.863 20.677,7.225C20.696,7.301 20.699,7.378 20.693,7.456L20.692,7.467L20.692,21.036C20.692,22.107 19.824,23 18.728,23L5.268,23C4.197,23 3.304,22.133 3.304,21.036L3.304,7.482C3.304,6.996 3.676,6.624 4.163,6.624L6.951,6.624ZM6.951,8.317L5.021,8.317L5.021,21.012C5.021,21.162 5.141,21.283 5.292,21.283L18.751,21.283C18.902,21.283 19.022,21.162 19.022,21.012L19.022,8.317L17.092,8.317L17.092,10.635C17.092,11.122 16.72,11.493 16.234,11.493C15.747,11.493 15.375,11.122 15.375,10.635L15.375,8.317L8.668,8.317L8.668,10.635C8.668,11.122 8.296,11.493 7.809,11.493C7.323,11.493 6.951,11.122 6.951,10.635L6.951,8.317ZM15.375,6.6L15.375,6.094C15.375,4.225 13.868,2.693 12.022,2.693C10.175,2.693 8.668,4.225 8.668,6.094L8.668,6.6L15.375,6.6Z"
+        },
+        {
+            "name": "isa-truck",
+            "data": "M2.594,5.338L2.595,5.331L14.918,5.331C15.872,5.331 16.655,6.101 16.655,7.034L16.655,8.275L19.667,8.276C19.88,8.277 20.08,8.378 20.205,8.548L22.827,12.107C22.879,12.165 22.921,12.231 22.95,12.304L22.957,12.316L22.962,12.337C22.964,12.345 22.967,12.353 22.969,12.359C22.996,12.446 23.006,12.537 22.996,12.626L22.996,15.665C22.996,16.447 22.34,17.096 21.538,17.096L21.467,17.096C21.145,18.008 20.259,18.669 19.222,18.669C18.185,18.669 17.298,18.008 16.977,17.096L8.627,17.096C8.306,18.008 7.419,18.669 6.381,18.669C5.344,18.669 4.458,18.008 4.136,17.096L2.737,17.096C1.783,17.096 1,16.325 1,15.393L1,7.035C1,6.149 1.706,5.41 2.594,5.338ZM6.435,15.323L6.381,15.323C5.802,15.323 5.338,15.773 5.338,16.344C5.338,16.344 5.338,16.347 5.338,16.346C5.34,16.912 5.802,17.36 6.381,17.36C6.955,17.36 7.413,16.921 7.425,16.368L7.425,16.342C7.425,15.789 6.989,15.349 6.435,15.323ZM19.222,15.322C19.802,15.322 20.265,15.772 20.265,16.342C20.265,16.909 19.801,17.36 19.222,17.36C18.642,17.36 18.178,16.909 18.178,16.342C18.178,15.772 18.642,15.322 19.222,15.322ZM15.324,15.787L15.324,7.035C15.324,6.814 15.143,6.641 14.918,6.641L2.737,6.641C2.511,6.641 2.33,6.814 2.33,7.035L2.33,15.393C2.33,15.613 2.511,15.787 2.737,15.787L4.077,15.787C4.332,14.773 5.271,14.013 6.381,14.013C7.492,14.013 8.431,14.773 8.687,15.787L15.324,15.787ZM19.447,9.751L19.327,9.587L16.655,9.585L16.655,15.787L16.917,15.787C17.173,14.773 18.111,14.012 19.222,14.012C20.332,14.012 21.272,14.773 21.527,15.787L21.538,15.787C21.609,15.787 21.665,15.733 21.665,15.665L21.665,12.762L21.32,12.294C21.425,12.482 21.429,12.713 21.326,12.907C21.212,13.123 20.984,13.26 20.736,13.26L17.353,13.26C16.985,13.26 16.687,12.967 16.687,12.605L16.687,10.262C16.687,9.9 16.985,9.607 17.353,9.607L19.032,9.607C19.185,9.607 19.331,9.659 19.447,9.751ZM6.967,10.866C6.727,10.863 6.505,10.987 6.384,11.189C6.263,11.394 6.263,11.647 6.384,11.852C6.505,12.055 6.727,12.178 6.967,12.175C6.964,12.175 13.997,12.175 13.997,12.175C14.235,12.178 14.456,12.055 14.577,11.852C14.699,11.647 14.699,11.394 14.577,11.189C14.456,10.987 14.235,10.863 13.995,10.866C13.997,10.866 6.964,10.866 6.964,10.866L6.967,10.866ZM18.018,10.916L18.018,11.951L19.442,11.951L18.69,10.916L18.018,10.916ZM9.174,8.705C8.935,8.703 8.712,8.826 8.592,9.029C8.47,9.234 8.47,9.486 8.592,9.691C8.712,9.894 8.935,10.017 9.174,10.015C9.172,10.015 13.997,10.015 13.997,10.015C14.235,10.017 14.456,9.894 14.577,9.691C14.699,9.486 14.699,9.234 14.577,9.029C14.456,8.826 14.235,8.703 13.995,8.705C13.997,8.705 9.172,8.705 9.172,8.705L9.174,8.705Z"
+        },
+        {
+            "name": "isa-b2b-truck",
+            "data": "M16.813,7.717C17.496,7.717 18.051,8.266 18.051,8.943L18.051,9.426C18.183,9.378 18.322,9.353 18.463,9.352L20.496,9.352C20.909,9.353 21.294,9.556 21.524,9.896L22.794,11.805C22.925,12.001 22.996,12.23 23,12.464L23,13.85C23,14.527 22.446,15.077 21.763,15.077L21.705,15.077C21.51,15.789 20.857,16.283 20.113,16.283C19.368,16.283 18.716,15.789 18.521,15.077L16.755,15.077C16.56,15.789 15.908,16.283 15.163,16.283C14.419,16.283 13.767,15.789 13.571,15.077L13.513,15.077C12.83,15.077 12.276,14.527 12.276,13.85L12.276,13.582C12.276,13.356 12.461,13.173 12.689,13.173C12.916,13.173 13.101,13.356 13.101,13.582L13.101,13.85C13.101,14.076 13.286,14.259 13.513,14.259L13.567,14.259C13.762,13.546 14.415,13.052 15.159,13.052C15.904,13.052 16.556,13.546 16.751,14.259L17.226,14.259L17.226,8.943C17.226,8.718 17.041,8.534 16.813,8.534L8.564,8.534C8.336,8.534 8.152,8.351 8.152,8.126C8.152,7.9 8.336,7.717 8.564,7.717L16.813,7.717ZM15.163,13.85C14.708,13.85 14.338,14.216 14.338,14.668L14.34,14.718C14.366,15.146 14.724,15.485 15.163,15.485C15.619,15.485 15.988,15.119 15.988,14.668C15.988,14.216 15.619,13.85 15.163,13.85ZM20.113,13.85C19.657,13.85 19.288,14.216 19.288,14.668L19.289,14.718C19.315,15.146 19.674,15.485 20.113,15.485C20.569,15.485 20.938,15.119 20.938,14.668C20.938,14.216 20.569,13.85 20.113,13.85ZM20.496,10.17L18.463,10.17C18.235,10.17 18.051,10.353 18.051,10.579L18.051,14.259L18.517,14.259C18.712,13.546 19.364,13.052 20.109,13.052C20.853,13.052 21.506,13.546 21.701,14.259L21.763,14.259C21.99,14.259 22.175,14.076 22.175,13.85L22.179,12.46C22.178,12.381 22.154,12.304 22.109,12.239L20.839,10.35C20.762,10.237 20.634,10.17 20.496,10.17ZM2.173,10.01L2.271,10.01C2.755,10.019 3.111,10.095 3.337,10.238C3.578,10.39 3.699,10.632 3.699,10.963C3.699,11.189 3.646,11.373 3.541,11.518C3.435,11.662 3.294,11.749 3.119,11.778L3.119,11.804L3.189,11.821C3.392,11.877 3.541,11.971 3.636,12.103C3.741,12.249 3.795,12.443 3.795,12.685C3.795,13.029 3.67,13.297 3.422,13.49C3.174,13.682 2.836,13.778 2.41,13.778L1,13.778L1,10.01L2.173,10.01ZM5.62,9.955C5.855,9.955 6.063,9.998 6.243,10.084C6.424,10.17 6.564,10.29 6.664,10.445C6.763,10.6 6.813,10.777 6.813,10.976C6.813,11.15 6.783,11.313 6.722,11.465C6.661,11.617 6.566,11.773 6.438,11.933C6.31,12.093 6.084,12.32 5.761,12.616L5.277,13.072L5.277,13.108L6.919,13.108L6.919,13.778L4.284,13.778L4.284,13.224L5.23,12.268L5.289,12.208C5.536,11.953 5.7,11.774 5.779,11.671C5.865,11.56 5.927,11.458 5.965,11.363C6.003,11.268 6.022,11.17 6.022,11.069C6.022,10.918 5.98,10.805 5.897,10.731C5.813,10.657 5.702,10.62 5.563,10.62C5.417,10.62 5.275,10.654 5.138,10.721C5,10.788 4.857,10.884 4.707,11.007L4.274,10.494L4.342,10.437C4.498,10.309 4.629,10.216 4.735,10.159C4.858,10.094 4.991,10.044 5.135,10.008C5.279,9.973 5.441,9.955 5.62,9.955ZM8.733,10.01L8.832,10.01C9.316,10.019 9.671,10.095 9.898,10.238C10.139,10.39 10.26,10.632 10.26,10.963C10.26,11.189 10.207,11.373 10.101,11.518C9.996,11.662 9.855,11.749 9.68,11.778L9.68,11.804L9.749,11.821C9.952,11.877 10.101,11.971 10.196,12.103C10.302,12.249 10.355,12.443 10.355,12.685C10.355,13.029 10.231,13.297 9.983,13.49C9.734,13.682 9.397,13.778 8.971,13.778L7.561,13.778L7.561,10.01L8.733,10.01ZM2.294,12.136L1.799,12.136L1.799,13.119L2.32,13.119C2.54,13.119 2.702,13.076 2.807,12.992C2.912,12.908 2.964,12.779 2.964,12.606C2.964,12.293 2.741,12.136 2.294,12.136ZM8.855,12.136L8.36,12.136L8.36,13.119L8.88,13.119C9.1,13.119 9.263,13.076 9.368,12.992C9.473,12.908 9.525,12.779 9.525,12.606C9.525,12.293 9.302,12.136 8.855,12.136ZM20.041,10.491C20.142,10.491 20.237,10.54 20.295,10.622L21.377,12.143C21.445,12.238 21.453,12.364 21.4,12.467C21.346,12.571 21.239,12.637 21.122,12.637L18.974,12.637C18.802,12.637 18.662,12.497 18.662,12.324L18.662,10.803C18.662,10.631 18.802,10.491 18.974,10.491L20.041,10.491ZM19.88,11.116L19.287,11.116L19.287,12.012L20.517,12.012L19.88,11.116ZM2.219,10.664L1.799,10.664L1.799,11.502L2.263,11.502C2.48,11.502 2.637,11.469 2.734,11.402C2.831,11.335 2.879,11.224 2.879,11.069C2.879,10.925 2.826,10.821 2.721,10.758C2.615,10.696 2.448,10.664 2.219,10.664ZM8.78,10.664L8.36,10.664L8.36,11.502L8.824,11.502C9.04,11.502 9.197,11.469 9.294,11.402C9.391,11.335 9.44,11.224 9.44,11.069C9.44,10.925 9.387,10.821 9.281,10.758C9.176,10.696 9.009,10.664 8.78,10.664ZM16.294,10.758C16.406,10.757 16.511,10.816 16.568,10.913C16.624,11.01 16.624,11.131 16.568,11.228C16.511,11.325 16.406,11.384 16.294,11.383L11.828,11.383C11.716,11.384 11.611,11.325 11.555,11.228C11.498,11.131 11.498,11.01 11.555,10.913C11.611,10.816 11.716,10.757 11.828,10.758L16.294,10.758ZM16.294,9.356C16.406,9.355 16.511,9.414 16.568,9.511C16.624,9.609 16.624,9.729 16.568,9.826C16.511,9.923 16.406,9.982 16.294,9.981L13.23,9.981C13.118,9.982 13.013,9.923 12.956,9.826C12.9,9.729 12.9,9.609 12.956,9.511C13.013,9.414 13.118,9.355 13.23,9.356L16.294,9.356Z"
+        },
+        {
+            "name": "isa-box-out",
+            "data": "M21.493,7.072L18.338,1.618C18.118,1.237 17.707,1 17.267,1L6.734,1C6.293,1 5.882,1.237 5.661,1.62L2.551,7.016C2.523,7.065 2.502,7.115 2.489,7.167C2.445,7.286 2.421,7.413 2.421,7.546L2.421,21.484C2.421,22.32 3.101,23 3.937,23L20.063,23C20.899,23 21.579,22.32 21.579,21.484L21.579,7.496C21.579,7.476 21.579,7.458 21.577,7.44C21.587,7.315 21.56,7.188 21.493,7.072ZM20.289,21.484C20.289,21.609 20.189,21.71 20.063,21.71L3.937,21.71C3.811,21.71 3.711,21.609 3.711,21.484L3.711,7.741L20.289,7.741L20.289,21.484ZM12.782,9.731C12.739,9.668 12.688,9.608 12.628,9.553C12.548,9.482 12.46,9.427 12.367,9.388C12.249,9.338 12.125,9.314 12,9.315C11.776,9.313 11.552,9.392 11.372,9.553C11.313,9.608 11.261,9.668 11.218,9.731L7.59,13.762C7.246,14.143 7.277,14.73 7.658,15.073C8.039,15.416 8.627,15.385 8.97,15.005L11.065,12.677L11.065,19.579C11.065,20.091 11.48,20.508 11.994,20.508C12.506,20.508 12.921,20.091 12.921,19.579L12.921,12.662L15.031,15.005C15.373,15.385 15.961,15.416 16.342,15.073C16.723,14.73 16.754,14.143 16.411,13.762L12.782,9.731ZM12.666,2.29L17.237,2.29L19.644,6.452L12.666,6.452L12.666,2.29ZM6.764,2.29L11.378,2.29L11.378,6.452L4.364,6.452L6.764,2.29Z"
+        },
+        {
+            "name": "isa-download",
+            "data": "M12,23C18.071,23 23,18.071 23,12C23,5.929 18.071,1 12,1C5.929,1 1,5.929 1,12C1,18.071 5.929,23 12,23ZM12,20.412C7.358,20.412 3.588,16.642 3.588,12C3.588,7.358 7.358,3.588 12,3.588C16.642,3.588 20.412,7.358 20.412,12C20.412,16.642 16.642,20.412 12,20.412ZM10.958,13.034L10.958,8.541C10.958,7.956 11.429,7.487 12,7.487C12.571,7.487 13.043,7.956 13.043,8.541L13.043,13.034L14.341,11.701C14.547,11.491 14.815,11.388 15.085,11.388C15.353,11.388 15.622,11.491 15.828,11.701C16.225,12.11 16.225,12.77 15.828,13.179L12.743,16.344C12.333,16.765 11.667,16.765 11.257,16.344C11.257,16.344 8.173,13.179 8.172,13.179C7.775,12.77 7.776,12.11 8.173,11.701C8.378,11.491 8.647,11.387 8.916,11.387L8.967,11.388C9.219,11.401 9.467,11.504 9.659,11.701L10.958,13.034Z"
+        },
+        {
+            "name": "mat-info",
+            "data": "M11 17h2v-6h-2Zm1-8q.425 0 .713-.288Q13 8.425 13 8t-.287-.713Q12.425 7 12 7t-.712.287Q11 7.575 11 8t.288.712Q11.575 9 12 9Zm0 13q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z"
+        },
+        {
+            "name": "UNKNOWN",
+            "data": ""
+        },
+        {
+            "name": "clipboard-check-outline",
+            "data": "M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M7.5,13.5L9,12L11,14L15.5,9.5L17,11L11,17L7.5,13.5Z"
+        },
+        {
+            "name": "shape-outline",
+            "data": "M11,13.5V21.5H3V13.5H11M9,15.5H5V19.5H9V15.5M12,2L17.5,11H6.5L12,2M12,5.86L10.08,9H13.92L12,5.86M17.5,13C20,13 22,15 22,17.5C22,20 20,22 17.5,22C15,22 13,20 13,17.5C13,15 15,13 17.5,13M17.5,15A2.5,2.5 0 0,0 15,17.5A2.5,2.5 0 0,0 17.5,20A2.5,2.5 0 0,0 20,17.5A2.5,2.5 0 0,0 17.5,15Z"
+        },
+        {
+            "name": "bug-outline",
+            "data": "M20,8H17.19C16.74,7.2 16.12,6.5 15.37,6L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.05,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6C7.87,6.5 7.26,7.21 6.81,8H4V10H6.09C6.03,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.03,15.67 6.09,16H4V18H6.81C8.47,20.87 12.14,21.84 15,20.18C15.91,19.66 16.67,18.9 17.19,18H20V16H17.91C17.97,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.97,10.33 17.91,10H20V8M16,15A4,4 0 0,1 12,19A4,4 0 0,1 8,15V11A4,4 0 0,1 12,7A4,4 0 0,1 16,11V15M14,10V12H10V10H14M10,14H14V16H10V14Z"
+        },
+        {
+            "name": "mat-remove",
+            "data": "M6 13.575q-.65 0-1.112-.463-.463-.462-.463-1.112 0-.65.463-1.113.462-.462 1.112-.462h12q.65 0 1.113.462.462.463.462 1.113 0 .65-.462 1.112-.463.463-1.113.463Z"
+        },
+        {
+            "name": "menu",
+            "data": "M120 816v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z",
+            "viewBox": "0 96 960 960"
+        },
+        {
+            "name": "notifications",
+            "data": "M160 856v-80h80V496q0-83 50-147.5T420 264v-28q0-25 17.5-42.5T480 176q25 0 42.5 17.5T540 236v28q80 20 130 84.5T720 496v280h80v80H160Zm320 120q-33 0-56.5-23.5T400 896h160q0 33-23.5 56.5T480 976Z",
+            "viewBox": "0 96 960 960"
+        },
+        {
+            "name": "swap-horiz",
+            "data": "M280 896 80 696l200-200 56 57-103 103h287v80H233l103 103-56 57Zm400-240-56-57 103-103H440v-80h287L624 313l56-57 200 200-200 200Z",
+            "viewBox": "0 96 960 960"
+        },
+        {
+            "name": "import-contacts",
+            "data": "M260 736q47 0 91.5 10.5T440 778V384q-41-24-87-36t-93-12q-36 0-71.5 7T120 364v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700 736q36 0 70.5 6t69.5 18V364q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100 858q-21 11-40.5-1T40 822V340q0-11 5.5-21T62 304q46-24 96-36t102-12q58 0 113.5 15T480 316q51-30 106.5-45T700 256q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700 816q-60 0-116 21t-104 59ZM280 562Z",
+            "viewBox": "0 96 960 960"
+        },
+        {
+            "name": "add",
+            "data": "M440 856V616H200v-80h240V296h80v240h240v80H520v240h-80Z",
+            "viewBox": "0 96 960 960"
+        },
+        {
+            "name": "logout",
+            "data": "M189 956q-43.725 0-74.863-31.138Q83 893.725 83 850V302q0-43.725 31.137-74.862Q145.275 196 189 196h286v106H189v548h286v106H189Zm448-140-76-78 110-110H351V522h320L561 412l76-76 240 240-240 240Z",
+            "viewBox": "0 96 960 960"
+        },
+        {
+            "name": "receipt-long",
+            "data": "M235 1014q-60 0-103-43T89 868V714h122V146l66 66 66-66 66 66 66-66 66 66 66-66 66 66 66-66 66 66 66-66v722q0 60-43 103t-103 43H235Zm490-106q17 0 28.5-11.5T765 868V296H317v418h368v154q0 17 11.5 28.5T725 908ZM349 472V366h252v106H349Zm0 138V504h252v106H349Zm329-138q-22 0-37.5-15.5T625 419q0-22 15.5-37.5T678 366q22 0 37.5 15.5T731 419q0 22-15.5 37.5T678 472Zm0 138q-22 0-37.5-15.5T625 557q0-22 15.5-37.5T678 504q22 0 37.5 15.5T731 557q0 22-15.5 37.5T678 610ZM235 908h344v-88H195v48q0 17 11.5 28.5T235 908Zm-40 0v-88 88Z",
+            "viewBox": "0 96 960 960"
+        },
+        {
+            "name": "person",
+            "data": "M480 576q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160 896V784q0-34 17.5-62.5T224 678q62-31 126-46.5T480 616q66 0 130 15.5T736 678q29 15 46.5 43.5T800 784v112H160Zm80-80h480v-32q0-11-5.5-20T700 750q-54-27-109-40.5T480 696q-56 0-111 13.5T260 750q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560 416q0-33-23.5-56.5T480 336q-33 0-56.5 23.5T400 416q0 33 23.5 56.5T480 496Zm0-80Zm0 400Z",
+            "viewBox": "0 96 960 960"
+        },
+        {
+            "name": "deployed-code",
+            "data": "m200 734 240 139V599L200 460v274Zm320 139 240-139V460L520 599v274ZM243 393l237 137 237-137-237-137-237 137ZM120 781V417q0-22 10.5-40t29.5-29l280-161q19-11 40-11t40 11l280 161q19 11 29.5 29t10.5 40v318q0 22-10.5 40T800 804L520 965q-19 11-40 11t-40-11L120 781Zm360-205Z",
+            "viewBox": "0 96 960 960"
+        },
+        {
+            "name": "unarchive",
+            "data": "M200 936q-33 0-56.5-23.5T120 856V356q0-15 5-27t13-23l56-68q8-11 20-16.5t26-5.5h480q14 0 26 5.5t20 16.5l56 68q8 11 13 23t5 27v500q0 33-23.5 56.5T760 936H200Zm16-600h528l-34-40H250l-34 40Zm-16 80v440h560V416H200Zm240 400h80V648l64 64 56-56-160-160-160 160 56 56 64-64v168Zm-240 40h560-560Z",
+            "viewBox": "0 96 960 960"
+        },
+        {
+            "name": "arrow-back",
+            "data": "M480 896 160 576l320-320 57 56-224 224h487v80H313l224 224-57 56Z",
+            "viewBox": "0 96 960 960"
+        },
+        {
+            "name": "arrow-forward",
+            "data": "m480 896-57-56 224-224H160v-80h487L423 312l57-56 320 320-320 320Z",
+            "viewBox": "0 96 960 960"
+        },
+        {
+            "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"
+        }, {
+            "name": "isa-abholfach",
+            "data": "M12.25,9.15l4.688,10.054l2.266,-1.057l-5.072,-10.876l-1.882,0.878l-0,-3.149l-2.5,-0l-0,14l2.5,0l-0,-9.85Zm-6.5,-2.15l-0,12l2.5,0l-0,-12l-2.5,0Z"
+        },
+        {
+            "name": "keyboard-arrow-down",
+            "data": "M480-344 240-584l43-43 197 197 197-197 43 43-240 240Z",
+            "viewBox": "0 -960 960 960"
+        },
+        {
+            "name": "assignment-return",
+            "data": "m479-333 43-43-74-74h182v-60H448l74-74-43-43-147 147 147 147ZM180-120q-24.75 0-42.375-17.625T120-180v-600q0-24.75 17.625-42.375T180-840h205q5-35 32-57.5t63-22.5q36 0 63 22.5t32 57.5h205q24.75 0 42.375 17.625T840-780v600q0 24.75-17.625 42.375T780-120H180Zm0-60h600v-600H180v600Zm300-617q14 0 24.5-10.5T515-832q0-14-10.5-24.5T480-867q-14 0-24.5 10.5T445-832q0 14 10.5 24.5T480-797ZM180-180v-600 600Z",
+            "viewBox": "0 -960 960 960"
+        },
+        {
+            "name": "dashboard",
+            "data": "M510-570v-270h330v270H510ZM120-450v-390h330v390H120Zm390 330v-390h330v390H510Zm-390 0v-270h330v270H120Zm60-390h210v-270H180v270Zm390 330h210v-270H570v270Zm0-450h210v-150H570v150ZM180-180h210v-150H180v150Zm210-330Zm180-120Zm0 180ZM390-330Z",
+            "viewBox": "0 -960 960 960"
+        },
+        {
+            "name": "shopping-cart",
+            "data": "M286.788-81Q257-81 236-102.212q-21-21.213-21-51Q215-183 236.212-204q21.213-21 51-21Q317-225 338-203.788q21 21.213 21 51Q359-123 337.788-102q-21.213 21-51 21Zm400 0Q657-81 636-102.212q-21-21.213-21-51Q615-183 636.212-204q21.213-21 51-21Q717-225 738-203.788q21 21.213 21 51Q759-123 737.788-102q-21.213 21-51 21ZM235-741l110 228h288l125-228H235Zm-30-60h589.074q22.964 0 34.945 21Q841-759 829-738L694-495q-11 19-28.559 30.5Q647.881-453 627-453H324l-56 104h491v60H277q-42 0-60.5-28t.5-63l64-118-152-322H51v-60h117l37 79Zm140 288h288-288Z",
+            "viewBox": "0 -960 960 960"
+        },
+        {
+            "name": "shopping-cart-bold",
+            "data": "M286.788-70Q257-70 236-91.212q-21-21.213-21-51Q215-172 236.212-193q21.213-21 51-21Q317-214 338-192.788q21 21.213 21 51Q359-112 337.788-91q-21.213 21-51 21Zm400 0Q657-70 636-91.212q-21-21.213-21-51Q615-172 636.212-193q21.213-21 51-21Q717-214 738-192.788q21 21.213 21 51Q759-112 737.788-91q-21.213 21-51 21ZM254-730l93 194h285l105-194H254Zm-42-82h560.074q36.176 0 55.051 32t.875 65L710-501q-13 21-32.508 34.5-19.509 13.5-44.63 13.5H337l-49 93h482v82H277q-50 0-71.5-34t1.5-74l61-112-146-311H40v-82h135l37 79Zm135 276h285-285Z",
+            "viewBox": "0 -960 960 960"
+        },
+        {
+            "name": "done",
+            "data": "M378-241q-9 0-17.5-3.5T345-255L164-436q-14-14-14-34t14-34q14-14 33.5-14t34.5 14l146 146 350-349q14-14 33.5-14.5T795-707q14 14 14 34t-14 34L411-255q-7 7-15.5 10.5T378-241Z",
+            "viewBox": "0 -960 960 960"
+        },
+        {
+            "name": "arrow-drop-down",
+            "data": "M480-360 280-559h400L480-360Z",
+            "viewBox": "0 -960 960 960"
+        },
+        {
+            "name": "arrow-drop-up",
+            "data": "m280-400 200-201 200 201H280Z",
+            "viewBox": "0 -960 960 960"
+        }
+        
+    ],
+    "aliases": [
+        {
+            "alias": "d-account",
+            "name": "account"
+        },
+        {
+            "alias": "d-no-account",
+            "name": "package-variant-closed"
+        },
+        {
+            "name": "isa-audio",
+            "alias": "AU"
+        },
+        {
+            "name": "isa-audio",
+            "alias": "CAS"
+        },
+        {
+            "name": "isa-audio",
+            "alias": "DL"
+        },
+        {
+            "name": "isa-audio",
+            "alias": "KAS"
+        },
+        {
+            "name": "isa-hard-cover",
+            "alias": "BUCH"
+        },
+        {
+            "name": "isa-hard-cover",
+            "alias": "GEB"
+        },
+        {
+            "name": "isa-hard-cover",
+            "alias": "HC"
+        },
+        {
+            "name": "isa-hard-cover",
+            "alias": "KT"
+        },
+        {
+            "name": "isa-ebook",
+            "alias": "EB"
+        },
+        {
+            "name": "isa-non-book",
+            "alias": "GLO"
+        },
+        {
+            "name": "isa-non-book",
+            "alias": "HDL"
+        },
+        {
+            "name": "isa-non-book",
+            "alias": "NB"
+        },
+        {
+            "name": "isa-non-book",
+            "alias": "SPL"
+        },
+        {
+            "name": "isa-calendar",
+            "alias": "KA"
+        },
+        {
+            "name": "isa-scroll",
+            "alias": "MA"
+        },
+        {
+            "name": "isa-software",
+            "alias": "SW"
+        },
+        {
+            "name": "isa-soft-cover",
+            "alias": "TB"
+        },
+        {
+            "name": "isa-video",
+            "alias": "VI"
+        },
+        {
+            "name": "isa-news-paper",
+            "alias": "ZS"
+        }
+    ]
+}
\ No newline at end of file
diff --git a/apps/isa-app/src/config/config.feature.json b/apps/isa-app/src/config/config.feature.json
index c57541ac6..0f43a6354 100644
--- a/apps/isa-app/src/config/config.feature.json
+++ b/apps/isa-app/src/config/config.feature.json
@@ -71,295 +71,5 @@
     "licence": {
         "scandit": "AQZyKCc+BEkNL00Y3h3FjawGLF+INUj7cVb0My91hl8ffiW873T8FTV1k4TIZJx5RwcJlYxhgsxHVcnM4AJgSwJhbAfxJmP/3XGijLlLp3XUIRjQwFtf7UlZAFZ7Vrt1/WSf7kxxrFQ2SE2AQwLqPg9DL+hHEfd4xT/15n8p2q7qUlCKLsV6jF12Pd7koFNSWNL3ZIkRtd1ma99/321dnwAJHFGXqWg5nprJ7sYtqUqNQ8Er9SlvKbhnw3AipHzKpz0O3oNfUsr6NlZivRBhMhCZLo5WpXo1m9uIU8zLEWMNDJ+wGUctcGxE3eCptP2zLXUgxxjB+0EXOUtT/GWUc/Ip61CMiyUf7Paz026E2eYil2yWgfkTP5CUgDMNGZFuAA1T5PhB9FRW51CjAIvwOKVMCvfixJiVoUsXHnWH2ZnXqtbDR/uEZBE7OKoBlaPL4G3Lvgdqym5EjROAztUXb6wOmVDiGzzqgizyZnIcxFBSKJAownGj9Vh4/Y/Ag1xzGzNtjz3ngSRfMfIIq/q2Q51uiLiv7mBVliPvPWMUTfTjnqnK/OSBlR2ID+COJqnUKpQMedPyOT3IMznmM6gQCmyYO5KE0MkfhFh6+pdNi6oJM2iZsxK1Z1V+GRSOIwrJEoajjDJkh439XjXk8NExFvplrLjK/oL/dsHIZiG6U5GVWW92kGkuXkJCeUz1CET3paxbGqwrd53r5d6gFABbC12CtcP2JeH4YYCpHYyPQacf0prj9Hdq3wDztShC9tH+4UQS/GbaDHKcS1ANIyPuTxHmBFtPuCJ9Uagy5QBEc8eAz2nfsbfaUxYzco6u/zhNsFbqp6zgQIxs5OcqDQ=="
     },
-    "@ui/icon": {
-        "fallback": "",
-        "viewBox": "0 0 24 24",
-        "icons": [
-            {
-                "name": "account",
-                "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
-            },
-            {
-                "name": "package-variant-closed",
-                "data": "M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L10.11,5.22L16,8.61L17.96,7.5L12,4.15M6.04,7.5L12,10.85L13.96,9.75L8.08,6.35L6.04,7.5M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z"
-            },
-            {
-                "name": "magnify",
-                "data": "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
-            },
-            {
-                "name": "barcode-scan",
-                "data": "M4,6H6V18H4V6M7,6H8V18H7V6M9,6H12V18H9V6M13,6H14V18H13V6M16,6H18V18H16V6M19,6H20V18H19V6M2,4V8H0V4A2,2 0 0,1 2,2H6V4H2M22,2A2,2 0 0,1 24,4V8H22V4H18V2H22M2,16V20H6V22H2A2,2 0 0,1 0,20V16H2M22,20V16H24V20A2,2 0 0,1 22,22H18V20H22Z"
-            },
-            {
-                "name": "arrow-left",
-                "data": "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
-            },
-            {
-                "name": "chevron-right",
-                "data": "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-            },
-            {
-                "name": "filter-variant",
-                "data": "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
-            },
-            {
-                "name": "close",
-                "data": "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            },
-            {
-                "name": "menu-down",
-                "data": "M7,10L12,15L17,10H7Z"
-            },
-            {
-                "name": "menu-up",
-                "data": "M7,15L12,10L17,15H7Z"
-            },
-            {
-                "name": "isa-audio",
-                "data": "M3.629,12.777C2.165,12.924 1,14.153 1,15.664L1,19.358C1,20.969 2.326,22.275 3.926,22.275L6.418,22.275C7.061,22.275 7.602,21.756 7.602,21.114L7.602,13.908C7.602,13.264 7.063,12.762 6.418,12.762L5.959,12.762C5.959,12.762 5.959,10.214 5.959,10.214C5.959,6.818 8.675,4.056 12.023,4.056C15.371,4.056 18.088,6.822 18.088,10.214C18.088,10.214 18.088,12.762 18.088,12.762C18.088,12.762 17.629,12.762 17.629,12.762C16.984,12.762 16.445,13.264 16.445,13.908C16.445,13.908 16.445,21.114 16.445,21.114C16.445,21.756 16.986,22.275 17.629,22.275L20.121,22.275C21.724,22.275 23,20.972 23,19.358C23,19.358 23,15.664 23,15.664C23,14.151 21.879,12.924 20.418,12.777L20.418,10.214C20.418,5.531 16.651,1.725 12.023,1.725C7.396,1.725 3.629,5.531 3.629,10.214L3.629,12.777ZM5.272,19.944L3.926,19.944C3.607,19.944 3.33,19.685 3.33,19.358C3.33,19.358 3.33,15.664 3.33,15.664C3.33,15.339 3.608,15.092 3.926,15.092C3.926,15.092 5.272,15.092 5.272,15.092L5.272,19.944ZM20.67,19.359C20.669,19.68 20.435,19.944 20.121,19.944C20.121,19.944 18.775,19.944 18.775,19.944C18.775,19.944 18.775,15.092 18.775,15.092C18.775,15.092 20.121,15.092 20.121,15.092C20.433,15.092 20.67,15.347 20.67,15.664L20.67,19.359Z"
-            },
-            {
-                "name": "isa-calendar",
-                "data": "M1,8.937C1,8.955 1,8.974 1.001,8.993C1,8.983 1,19.761 1,19.761C1,21.539 2.464,23 4.241,23C4.241,23 19.767,23 19.767,23C21.544,23 23,21.54 23,19.761L23,8.907C23,8.911 23,6.101 23,6.101C23,4.322 21.543,2.862 19.767,2.862C19.767,2.862 17.768,2.862 17.768,2.862C17.768,2.862 17.768,2.075 17.768,2.075C17.772,1.795 17.66,1.517 17.455,1.312L17.455,1.312C17.251,1.108 16.972,0.995 16.684,1C16.4,1.004 16.131,1.121 15.934,1.324C15.737,1.528 15.628,1.801 15.633,2.084C15.633,2.075 15.633,2.862 15.633,2.862C15.633,2.862 8.294,2.862 8.294,2.862C8.294,2.862 8.294,2.075 8.294,2.075C8.298,1.795 8.185,1.517 7.981,1.312L7.981,1.312C7.781,1.113 7.511,1 7.228,1L7.11,1.003C6.559,1.064 6.147,1.534 6.159,2.088C6.159,2.075 6.159,2.862 6.159,2.862C6.159,2.862 4.241,2.862 4.241,2.862C2.465,2.862 1,4.322 1,6.101L1,8.879L1.595,9.473L1,8.88L1,8.937ZM3.135,10.042L20.865,10.042C20.865,10.042 20.865,19.761 20.865,19.761C20.865,20.369 20.373,20.865 19.767,20.865L4.241,20.865C3.634,20.865 3.135,20.37 3.135,19.761L3.135,10.042ZM4.241,4.996L6.159,4.996C6.159,4.996 6.159,5.783 6.159,5.783C6.158,6.164 6.361,6.517 6.692,6.708C7.022,6.9 7.43,6.9 7.761,6.708C8.091,6.517 8.295,6.164 8.294,5.782C8.294,5.783 8.294,4.996 8.294,4.996C8.294,4.996 15.633,4.996 15.633,4.996C15.633,4.996 15.633,5.783 15.633,5.783C15.632,6.164 15.835,6.517 16.166,6.708C16.496,6.9 16.904,6.9 17.235,6.708C17.565,6.517 17.769,6.164 17.768,5.782C17.768,5.783 17.768,4.996 17.768,4.996C17.768,4.996 19.767,4.996 19.767,4.996C20.373,4.996 20.865,5.492 20.865,6.101C20.865,6.101 20.865,7.907 20.865,7.907C20.865,7.907 3.135,7.907 3.135,7.907C3.135,7.907 3.135,6.101 3.135,6.101C3.135,5.492 3.634,4.996 4.241,4.996Z"
-            },
-            {
-                "name": "isa-ebook",
-                "data": "M18.637,1L5.363,1C4.058,1 2.991,2.067 2.991,3.372L2.991,20.628C2.991,21.933 4.058,23 5.363,23C5.363,23 18.637,23 18.637,23C19.942,23 21.009,21.933 21.009,20.628L21.009,3.372C21.009,2.028 19.942,1 18.637,1ZM18.92,20.628C18.92,20.784 18.793,20.911 18.637,20.911C18.637,20.911 5.363,20.911 5.363,20.911C5.207,20.911 5.08,20.784 5.08,20.628L5.08,3.372C5.08,3.216 5.207,3.089 5.363,3.089C5.363,3.089 18.637,3.089 18.637,3.089C18.793,3.089 18.92,3.216 18.92,3.372C18.92,3.372 18.92,20.628 18.92,20.628ZM12,16.324C11.061,16.324 10.292,17.093 10.292,18.032C10.292,18.971 11.061,19.74 12,19.74C12.939,19.74 13.708,18.971 13.708,18.032C13.708,17.05 12.939,16.324 12,16.324ZM13.181,4.26L10.643,4.26C10.09,4.26 9.628,4.725 9.628,5.304C9.628,5.883 10.09,6.349 10.643,6.349L13.181,6.349C13.735,6.349 14.196,5.883 14.196,5.304C14.196,4.673 13.735,4.26 13.181,4.26Z"
-            },
-            {
-                "name": "isa-hard-cover",
-                "data": "M4.109,3.168L4.105,3.169C3.708,3.207 3.407,3.545 3.408,3.951C3.408,3.95 3.408,5.027 3.408,5.027L1.696,5.028C1.3,5.066 0.998,5.404 1,5.81C1,5.809 1,18.512 1,18.512C1,18.945 1.344,19.294 1.765,19.294L9.319,19.294C10.324,19.294 10.957,19.658 11.317,20.403L11.318,20.404C11.449,20.668 11.713,20.833 12,20.833C12.287,20.833 12.551,20.668 12.682,20.404L12.682,20.404C13.043,19.658 13.676,19.294 14.681,19.294L22.235,19.294C22.656,19.294 23,18.945 23,18.512L23,5.809C23,5.376 22.656,5.027 22.235,5.027L20.592,5.027C20.592,5.027 20.592,3.95 20.592,3.95C20.592,3.517 20.248,3.168 19.827,3.168L14.681,3.168C13.615,3.168 12.642,3.708 12,4.512C11.357,3.708 10.385,3.168 9.319,3.168L4.109,3.168ZM2.529,6.592L3.408,6.592C3.408,6.592 3.408,16.343 3.408,16.343C3.408,16.777 3.752,17.125 4.173,17.125L8.34,17.125C9.144,17.125 9.811,17.347 10.302,17.782C10.332,17.808 10.36,17.834 10.388,17.862C10.048,17.774 9.69,17.73 9.319,17.73C9.319,17.73 2.529,17.73 2.529,17.73L2.529,6.592ZM20.592,6.592L21.471,6.592C21.471,6.592 21.471,17.73 21.471,17.73C21.471,17.73 14.681,17.73 14.681,17.73C14.31,17.73 13.951,17.774 13.614,17.861C13.64,17.834 13.668,17.808 13.698,17.782C14.189,17.347 14.856,17.125 15.66,17.125L19.827,17.125C20.248,17.125 20.592,16.777 20.592,16.343L20.592,6.592ZM11.235,16.536C10.449,15.875 9.427,15.561 8.34,15.561L4.938,15.561L4.938,4.733L9.319,4.733C9.891,4.733 10.467,5.071 10.838,5.517C11.078,5.805 11.234,6.14 11.235,6.462L11.235,16.536ZM12.765,16.536L12.765,6.466C12.765,6.144 12.921,5.807 13.162,5.517C13.533,5.071 14.109,4.733 14.681,4.733L19.062,4.733C19.062,4.733 19.062,15.561 19.062,15.561C19.062,15.561 15.66,15.561 15.66,15.561C14.573,15.561 13.551,15.875 12.765,16.536ZM6.419,12.826L6.419,12.826C6.419,13.215 6.734,13.531 7.123,13.531C7.123,13.531 9.291,13.531 9.291,13.531C9.68,13.531 9.995,13.215 9.995,12.826L9.995,12.795C9.995,12.406 9.68,12.09 9.291,12.09L7.123,12.09C6.734,12.09 6.419,12.406 6.419,12.795L6.581,12.957C6.581,12.957 6.419,12.796 6.419,12.796L6.419,12.826ZM14.005,12.826L14.005,12.826C14.005,13.215 14.32,13.531 14.709,13.531C14.709,13.531 16.877,13.531 16.877,13.531C17.266,13.531 17.581,13.215 17.581,12.826L17.581,12.795C17.581,12.406 17.266,12.09 16.877,12.09L14.709,12.09C14.32,12.09 14.005,12.406 14.005,12.795L14.167,12.957C14.167,12.957 14.005,12.796 14.005,12.796L14.005,12.826ZM9.82,12.944L9.82,12.944L9.833,12.957L9.82,12.944ZM17.406,12.944L17.406,12.944L17.419,12.957L17.406,12.944ZM14.005,10.596L14.005,10.596C14.005,10.985 14.32,11.3 14.709,11.3L16.877,11.3C17.266,11.3 17.581,10.985 17.581,10.596L17.581,10.564C17.581,10.175 17.266,9.86 16.877,9.86L14.709,9.86C14.32,9.86 14.005,10.175 14.005,10.564L14.167,10.727C14.167,10.727 14.005,10.565 14.005,10.565L14.005,10.596ZM6.419,10.596L6.419,10.596C6.419,10.985 6.734,11.3 7.123,11.3L9.291,11.3C9.68,11.3 9.995,10.985 9.995,10.596L9.995,10.564C9.995,10.175 9.68,9.86 9.291,9.86L7.123,9.86C6.734,9.86 6.419,10.175 6.419,10.564L6.581,10.727C6.581,10.727 6.419,10.565 6.419,10.565L6.419,10.596ZM9.82,10.714L9.82,10.714L9.833,10.727L9.82,10.714ZM17.406,10.714L17.406,10.714L17.419,10.727L17.406,10.714ZM6.419,8.365L6.419,8.365C6.419,8.754 6.734,9.069 7.123,9.069L9.291,9.069C9.68,9.069 9.995,8.754 9.995,8.365L9.995,8.333C9.995,7.944 9.68,7.629 9.291,7.629L7.123,7.629C6.734,7.629 6.419,7.944 6.419,8.333L6.581,8.496C6.581,8.496 6.419,8.334 6.419,8.334L6.419,8.365ZM14.005,8.365L14.005,8.365C14.005,8.754 14.32,9.069 14.709,9.069L16.877,9.069C17.266,9.069 17.581,8.754 17.581,8.365L17.581,8.333C17.581,7.944 17.266,7.629 16.877,7.629L14.709,7.629C14.32,7.629 14.005,7.944 14.005,8.333L14.167,8.496C14.167,8.496 14.005,8.334 14.005,8.334L14.005,8.365ZM17.406,8.483L17.406,8.483L17.419,8.496L17.406,8.483ZM9.82,8.483L9.82,8.483L9.833,8.496L9.82,8.483Z"
-            },
-            {
-                "name": "isa-news-paper",
-                "data": "M12.022,5.892L12.009,5.896L3.216,1.669L3.19,1.66C3.008,1.599 2.769,1.609 2.582,1.722L2.585,1.72C2.386,1.831 2.238,2.09 2.238,2.301L2.238,2.534C2.092,2.518 1.946,2.55 1.8,2.648L1.764,2.672L1.734,2.702C1.614,2.822 1.506,3.053 1.506,3.232L1.506,3.626C1.415,3.652 1.332,3.698 1.262,3.759C1.074,3.897 1,4.096 1,4.3L1,19.336C1,19.675 1.207,19.943 1.543,20.014C1.543,20.014 11.9,22.378 11.9,22.378L12.099,22.378L22.457,20.039C22.793,19.968 23,19.701 23,19.361L23,4.326C23,4.138 22.896,3.941 22.772,3.816C22.695,3.739 22.599,3.682 22.494,3.651L22.494,3.187C22.494,2.973 22.413,2.765 22.2,2.622L22.2,2.622C22.062,2.53 21.924,2.497 21.787,2.507L21.787,2.301C21.787,2.094 21.673,1.874 21.467,1.736C21.277,1.61 21.025,1.597 20.835,1.66L20.809,1.669L12.022,5.892ZM21.624,18.812L12.688,20.842C12.688,20.842 12.688,7.204 12.688,7.204C12.688,7.204 21.624,5.174 21.624,5.174L21.624,18.812ZM2.376,5.174L11.312,7.204C11.312,7.204 11.312,20.842 11.312,20.842C11.312,20.842 2.376,18.812 2.376,18.812L2.376,5.174ZM17.542,11.044L16.99,11.541C16.99,11.541 16.484,11.339 16.484,11.339C16.139,11.2 15.734,11.358 15.592,11.7C15.595,11.694 15.262,12.42 15.262,12.42C15.262,12.42 14.545,12.556 14.545,12.556C14.202,12.625 13.991,12.894 13.991,13.236L14.03,13.94C14.03,13.94 13.356,14.451 13.356,14.451L13.335,14.472C13.202,14.605 13.107,14.758 13.107,14.957C13.107,15.091 13.139,15.276 13.261,15.416C13.26,15.415 13.553,15.787 13.553,15.787C13.553,15.787 13.192,16.454 13.192,16.454L13.18,16.49C13.124,16.658 13.124,16.825 13.18,16.993L13.198,17.048L13.23,17.097C13.342,17.264 13.464,17.364 13.632,17.42L14.083,17.541C14.083,17.541 14.067,18.064 14.067,18.064C14.067,18.284 14.149,18.492 14.362,18.635C14.558,18.766 14.76,18.802 14.956,18.74C14.956,18.74 15.494,18.582 15.494,18.582C15.494,18.582 15.707,18.928 15.707,18.928C15.802,19.143 16.036,19.29 16.271,19.29L16.336,19.29C16.527,19.283 16.668,19.222 16.801,19.044C16.8,19.045 17.322,18.575 17.322,18.575C17.322,18.575 17.828,18.778 17.828,18.778C18.169,18.915 18.569,18.763 18.715,18.428C18.715,18.428 19.044,17.748 19.044,17.748C19.044,17.748 19.767,17.612 19.767,17.612C20.111,17.543 20.321,17.273 20.321,16.931L20.282,16.227C20.282,16.227 20.956,15.716 20.956,15.716L20.977,15.695C21.11,15.562 21.205,15.41 21.205,15.21C21.205,15.077 21.173,14.891 21.052,14.751L20.759,14.381L21.121,13.713L21.133,13.677C21.188,13.509 21.188,13.342 21.133,13.174L21.114,13.119L21.082,13.071C20.97,12.903 20.848,12.803 20.681,12.747L20.23,12.626C20.23,12.626 20.245,12.103 20.245,12.103C20.245,11.883 20.164,11.675 19.95,11.532L19.95,11.532C19.754,11.402 19.552,11.366 19.356,11.427C19.356,11.427 18.818,11.585 18.818,11.585C18.818,11.585 18.606,11.239 18.606,11.239C18.521,11.048 18.324,10.909 18.116,10.882C17.9,10.833 17.689,10.904 17.542,11.044ZM9.936,8.583L3.9,7.206L3.851,7.206C3.673,7.206 3.507,7.244 3.379,7.349L3.394,7.339C3.191,7.481 3.113,7.685 3.113,7.894L3.113,17.133C3.113,17.472 3.32,17.739 3.656,17.811C3.656,17.811 9.691,19.188 9.691,19.188L9.791,19.188C9.905,19.188 10.024,19.148 10.137,19.091L10.162,19.079L10.184,19.064C10.397,18.922 10.479,18.713 10.479,18.5C10.479,18.5 10.479,9.261 10.479,9.261C10.479,8.922 10.272,8.654 9.936,8.583L9.936,8.583ZM9.078,17.652L4.463,16.608C4.463,16.608 4.463,8.767 4.463,8.767C4.463,8.767 9.078,9.811 9.078,9.811L9.078,17.652ZM17.942,16.814L17.736,17.269C17.736,17.269 17.427,17.154 17.427,17.154C17.21,17.081 16.932,17.097 16.722,17.307L16.734,17.296L16.479,17.522L16.406,17.399C16.276,17.203 16.012,17.079 15.817,17.079C15.723,17.079 15.634,17.09 15.543,17.144C15.547,17.142 15.468,17.164 15.468,17.164C15.468,17.164 15.468,17.064 15.468,17.064C15.511,16.724 15.253,16.436 14.972,16.36C14.972,16.36 14.87,16.332 14.87,16.332C14.87,16.332 15.014,16.071 15.014,16.071C15.147,15.803 15.095,15.543 14.965,15.349L14.786,15.114C14.786,15.114 15.164,14.827 15.164,14.827C15.353,14.693 15.443,14.445 15.443,14.248L15.415,13.786C15.415,13.786 15.848,13.694 15.848,13.694C16.123,13.674 16.283,13.478 16.357,13.329L16.576,12.848C16.576,12.848 16.885,12.963 16.885,12.963C17.08,13.028 17.336,12.989 17.524,12.864L17.545,12.849L17.853,12.587L17.931,12.717C18.068,12.922 18.405,13.068 18.677,13L18.849,12.952C18.849,12.952 18.845,13.043 18.845,13.043C18.798,13.388 19.057,13.68 19.34,13.756C19.34,13.756 19.434,13.783 19.434,13.783L19.294,14.029C19.165,14.288 19.217,14.548 19.347,14.742L19.526,14.977C19.526,14.977 19.148,15.264 19.148,15.264L19.151,15.262C18.959,15.399 18.869,15.647 18.869,15.843L18.897,16.305C18.897,16.305 18.407,16.41 18.407,16.41L18.383,16.418C18.191,16.482 18.017,16.627 17.942,16.814ZM14.098,11.073L14.191,11.073L20.49,9.606C20.806,9.537 21.004,9.283 21.004,8.958C21.004,8.958 21.004,7.344 21.004,7.344C21.004,7.167 20.909,6.979 20.792,6.861C20.642,6.707 20.416,6.634 20.19,6.701C20.193,6.7 13.957,8.153 13.957,8.153C13.641,8.221 13.443,8.475 13.443,8.801L13.443,10.414C13.443,10.592 13.539,10.779 13.655,10.898L13.705,10.949L13.768,10.981C13.876,11.036 13.99,11.073 14.098,11.073ZM17.542,11.044L17.531,11.055L17.542,11.044ZM14.752,9.325L19.696,8.162C19.696,8.162 19.696,8.412 19.696,8.412C19.696,8.412 14.752,9.574 14.752,9.574L14.752,9.325ZM21.473,3.574L21.553,3.973L21.554,3.973L21.554,3.541L21.473,3.574Z"
-            },
-            {
-                "name": "isa-non-book",
-                "data": "M11.215,5.282L9.049,1L6.884,5.282L6.884,7.704C6.081,8.012 5.499,8.385 5.14,8.786C4.803,9.164 4.641,9.575 4.641,10.002L4.641,19.873C4.641,20.614 5.183,21.34 6.218,21.883C7.504,22.558 9.591,23 12,23C14.408,23 16.495,22.558 17.781,21.888C18.818,21.349 19.359,20.627 19.359,19.896L19.359,10.025C19.359,9.262 18.765,8.483 17.588,7.918C17.588,7.918 17.588,1.437 17.588,1.437L13.257,1.437L13.257,6.947C12.577,6.901 11.896,6.891 11.215,6.917C11.215,6.917 11.215,5.282 11.215,5.282ZM12,21.506C9.805,21.506 8.048,21.14 6.994,20.626C6.691,20.478 6.453,20.322 6.293,20.156C6.207,20.067 6.14,19.987 6.14,19.896L6.14,11.96C7.444,12.655 9.564,13.129 12,13.129C14.436,13.129 16.556,12.655 17.859,11.96C17.86,11.96 17.86,19.873 17.86,19.873C17.86,19.968 17.793,20.054 17.705,20.147C17.545,20.315 17.307,20.473 17.004,20.622C15.951,21.141 14.194,21.506 12,21.506ZM13.257,8.446L13.257,11.606C12.864,11.635 12.448,11.658 12.008,11.659C12.008,11.659 11.215,11.63 11.215,11.63C11.215,11.63 11.215,8.43 11.215,8.43C11.895,8.396 12.577,8.401 13.257,8.446L13.257,8.446ZM9.047,4.321L9.716,5.644C9.716,5.644 9.716,11.502 9.716,11.502C9.267,11.44 8.822,11.353 8.383,11.242C8.383,11.242 8.383,5.622 8.383,5.622L9.047,4.321ZM16.089,11.122C15.652,11.256 15.206,11.362 14.756,11.439C14.756,11.439 14.756,5.731 14.756,5.731C14.756,5.731 16.089,5.731 16.089,5.731L16.089,11.122ZM6.884,9.354L6.884,10.721C6.7,10.626 6.543,10.524 6.416,10.418C6.257,10.286 6.14,10.166 6.14,10.025C6.14,9.887 6.261,9.775 6.418,9.649C6.546,9.546 6.702,9.447 6.884,9.354L6.884,9.354ZM17.86,10.025C17.86,10.127 17.779,10.214 17.678,10.312C17.65,10.339 17.62,10.365 17.588,10.392C17.588,10.391 17.588,9.659 17.588,9.659C17.62,9.685 17.65,9.712 17.678,9.739C17.779,9.837 17.86,9.923 17.86,10.025ZM16.089,2.931L16.089,4.238C16.089,4.238 14.756,4.238 14.756,4.238C14.756,4.238 14.756,2.931 14.756,2.931L16.089,2.931Z"
-            },
-            {
-                "name": "isa-scroll",
-                "data": "M20.88,16.904L20.88,4.048C20.88,2.365 19.515,1 17.831,1L4.048,1C2.365,1 1,2.365 1,4.048L1,7.096L5.241,7.096C5.241,7.096 5.241,19.952 5.241,19.952C5.241,21.635 6.606,23 8.289,23C8.289,23 19.952,23 19.952,23C21.635,23 23,21.635 23,19.952C23,19.952 23,16.904 23,16.904L20.88,16.904ZM9.482,19.952C9.482,20.61 8.947,21.145 8.289,21.145C7.631,21.145 7.096,20.61 7.096,19.952L7.096,4.048C7.096,3.623 7.007,3.221 6.848,2.856C6.847,2.855 17.831,2.855 17.831,2.855C18.489,2.855 19.024,3.39 19.024,4.048C19.024,4.048 19.024,16.904 19.024,16.904C19.024,16.904 9.482,16.904 9.482,16.904L9.482,19.952ZM21.145,19.952C21.145,20.61 20.61,21.145 19.952,21.145L11.088,21.145C11.248,20.779 11.337,20.377 11.337,19.952L11.337,18.759C11.337,18.759 21.145,18.759 21.145,18.759C21.145,18.759 21.145,19.952 21.145,19.952ZM5.241,5.241L2.855,5.241C2.855,5.241 2.855,4.048 2.855,4.048C2.855,3.39 3.39,2.855 4.048,2.855C4.706,2.855 5.241,3.39 5.241,4.048L5.241,5.241Z"
-            },
-            {
-                "name": "isa-soft-cover",
-                "data": "M18.963,17.967C19.451,17.954 19.842,17.555 19.842,17.064C19.842,17.064 19.842,1.904 19.842,1.904C19.842,1.405 19.437,1 18.938,1L6.154,1C5.047,1.005 4.154,1.905 4.158,3.011C4.158,3.009 4.158,18.545 4.158,18.545C4.16,19.862 5.226,20.928 6.542,20.93L7.479,20.93C7.479,20.93 7.479,22.095 7.479,22.095C7.477,22.443 7.68,22.764 7.997,22.914C8.315,23.064 8.691,23.016 8.961,22.791C8.96,22.792 9.643,22.226 9.643,22.226C9.643,22.226 10.324,22.788 10.324,22.788C10.592,23.011 10.968,23.059 11.286,22.909C11.604,22.759 11.806,22.438 11.804,22.087C11.804,22.09 11.804,20.925 11.804,20.925C11.804,20.925 18.938,20.925 18.938,20.925C19.437,20.925 19.842,20.521 19.842,20.021C19.842,19.531 19.451,19.132 18.964,19.118C18.665,19.094 18.434,18.844 18.434,18.543C18.434,18.247 18.657,18.001 18.948,17.969L18.963,17.967ZM9.287,20.217C9.513,20.12 9.77,20.12 9.997,20.217L9.997,19.449C9.997,19.449 9.287,19.449 9.287,19.449L9.287,20.217ZM7.684,17.973C7.556,18.128 7.479,18.328 7.479,18.545L7.479,19.125C7.479,19.125 6.53,19.125 6.53,19.125C6.305,19.135 6.105,19.027 5.996,18.845C5.886,18.663 5.886,18.435 5.996,18.252C6.105,18.07 6.305,17.962 6.518,17.972L7.684,17.973ZM16.626,19.12L11.804,19.12C11.804,19.12 11.804,18.545 11.804,18.545C11.804,18.328 11.727,18.128 11.6,17.973L16.628,17.973C16.533,18.349 16.533,18.744 16.626,19.12ZM6.543,16.16C6.35,16.161 6.16,16.185 5.975,16.232C5.975,16.232 5.975,3.007 5.975,3.007C5.974,2.902 6.054,2.816 6.156,2.808C6.165,2.807 18.035,2.807 18.035,2.807C18.035,2.807 18.035,16.16 18.035,16.16L6.543,16.16Z"
-            },
-            {
-                "name": "isa-video",
-                "data": "M12,23C18.075,23 23,18.075 23,12C23,5.925 18.075,1 12,1C5.925,1 1,5.925 1,12C1,18.075 5.925,23 12,23ZM12,2.784C17.09,2.784 21.216,6.91 21.216,12C21.216,17.09 17.09,21.216 12,21.216C6.91,21.216 2.784,17.09 2.784,12C2.784,6.91 6.91,2.784 12,2.784ZM15.786,10.998L9.84,7.431C9.566,7.262 9.226,7.26 8.941,7.42C8.655,7.581 8.492,7.875 8.492,8.197C8.492,8.197 8.492,15.332 8.492,15.332C8.492,15.652 8.66,15.946 8.943,16.107C9.079,16.187 9.231,16.224 9.384,16.224C9.545,16.224 9.706,16.179 9.84,16.098C9.84,16.098 15.786,12.531 15.786,12.531C16.059,12.372 16.222,12.077 16.222,11.764C16.222,11.451 16.059,11.157 15.782,10.996L15.786,10.998ZM10.276,13.755L10.276,9.769C10.276,9.769 13.598,11.764 13.598,11.764L10.276,13.755Z"
-            },
-            {
-                "name": "isa-software",
-                "data": "M12,23C18.075,23 23,18.075 23,12C23,5.925 18.075,1 12,1C5.925,1 1,5.925 1,12C1,18.075 5.925,23 12,23ZM12,21.248C6.892,21.248 2.752,17.108 2.752,12C2.752,6.892 6.892,2.752 12,2.752C17.108,2.752 21.248,6.892 21.248,12C21.248,17.108 17.108,21.248 12,21.248ZM11.991,16.481C14.526,16.481 16.589,14.418 16.589,11.884C16.589,9.349 14.526,7.286 11.991,7.286C9.456,7.286 7.393,9.349 7.393,11.884C7.393,14.418 9.456,16.481 11.991,16.481ZM11.991,9.065C13.528,9.065 14.758,10.294 14.758,11.831C14.758,13.368 13.528,14.598 11.991,14.598C10.454,14.598 9.224,13.368 9.224,11.831C9.224,10.294 10.454,9.065 11.991,9.065ZM11.991,14.153C13.229,14.153 14.261,13.122 14.261,11.884C14.261,10.646 13.229,9.614 11.991,9.614C10.753,9.614 9.721,10.646 9.721,11.884C9.721,13.122 10.753,14.153 11.991,14.153ZM11.991,11.257C12.337,11.257 12.618,11.538 12.618,11.884C12.618,12.23 12.337,12.511 11.991,12.511C11.645,12.511 11.364,12.23 11.364,11.884C11.364,11.538 11.645,11.257 11.991,11.257ZM15.795,4.606L15.927,4.081C17.745,5.06 19.191,6.645 20.03,8.509L20.249,8.995L18.673,9.671L18.46,9.207C17.76,7.682 16.609,6.361 15.126,5.578L15.342,5.692C15.342,5.692 14.909,4.866 14.909,4.866L15.217,4.294L15.53,4.818L15.611,4.668L15.615,4.651L15.619,4.653L15.679,4.542C15.717,4.563 15.756,4.585 15.795,4.606Z"
-            },
-            {
-                "name": "isa-shopping-bag",
-                "data": "M6.951,6.624L6.951,6.118C6.951,3.279 9.232,1 12.022,1C14.811,1 17.092,3.279 17.092,6.118L17.092,6.624L19.88,6.624C20.242,6.628 20.593,6.863 20.677,7.225C20.696,7.301 20.699,7.378 20.693,7.456L20.692,7.467L20.692,21.036C20.692,22.107 19.824,23 18.728,23L5.268,23C4.197,23 3.304,22.133 3.304,21.036L3.304,7.482C3.304,6.996 3.676,6.624 4.163,6.624L6.951,6.624ZM6.951,8.317L5.021,8.317L5.021,21.012C5.021,21.162 5.141,21.283 5.292,21.283L18.751,21.283C18.902,21.283 19.022,21.162 19.022,21.012L19.022,8.317L17.092,8.317L17.092,10.635C17.092,11.122 16.72,11.493 16.234,11.493C15.747,11.493 15.375,11.122 15.375,10.635L15.375,8.317L8.668,8.317L8.668,10.635C8.668,11.122 8.296,11.493 7.809,11.493C7.323,11.493 6.951,11.122 6.951,10.635L6.951,8.317ZM15.375,6.6L15.375,6.094C15.375,4.225 13.868,2.693 12.022,2.693C10.175,2.693 8.668,4.225 8.668,6.094L8.668,6.6L15.375,6.6Z"
-            },
-            {
-                "name": "isa-truck",
-                "data": "M2.594,5.338L2.595,5.331L14.918,5.331C15.872,5.331 16.655,6.101 16.655,7.034L16.655,8.275L19.667,8.276C19.88,8.277 20.08,8.378 20.205,8.548L22.827,12.107C22.879,12.165 22.921,12.231 22.95,12.304L22.957,12.316L22.962,12.337C22.964,12.345 22.967,12.353 22.969,12.359C22.996,12.446 23.006,12.537 22.996,12.626L22.996,15.665C22.996,16.447 22.34,17.096 21.538,17.096L21.467,17.096C21.145,18.008 20.259,18.669 19.222,18.669C18.185,18.669 17.298,18.008 16.977,17.096L8.627,17.096C8.306,18.008 7.419,18.669 6.381,18.669C5.344,18.669 4.458,18.008 4.136,17.096L2.737,17.096C1.783,17.096 1,16.325 1,15.393L1,7.035C1,6.149 1.706,5.41 2.594,5.338ZM6.435,15.323L6.381,15.323C5.802,15.323 5.338,15.773 5.338,16.344C5.338,16.344 5.338,16.347 5.338,16.346C5.34,16.912 5.802,17.36 6.381,17.36C6.955,17.36 7.413,16.921 7.425,16.368L7.425,16.342C7.425,15.789 6.989,15.349 6.435,15.323ZM19.222,15.322C19.802,15.322 20.265,15.772 20.265,16.342C20.265,16.909 19.801,17.36 19.222,17.36C18.642,17.36 18.178,16.909 18.178,16.342C18.178,15.772 18.642,15.322 19.222,15.322ZM15.324,15.787L15.324,7.035C15.324,6.814 15.143,6.641 14.918,6.641L2.737,6.641C2.511,6.641 2.33,6.814 2.33,7.035L2.33,15.393C2.33,15.613 2.511,15.787 2.737,15.787L4.077,15.787C4.332,14.773 5.271,14.013 6.381,14.013C7.492,14.013 8.431,14.773 8.687,15.787L15.324,15.787ZM19.447,9.751L19.327,9.587L16.655,9.585L16.655,15.787L16.917,15.787C17.173,14.773 18.111,14.012 19.222,14.012C20.332,14.012 21.272,14.773 21.527,15.787L21.538,15.787C21.609,15.787 21.665,15.733 21.665,15.665L21.665,12.762L21.32,12.294C21.425,12.482 21.429,12.713 21.326,12.907C21.212,13.123 20.984,13.26 20.736,13.26L17.353,13.26C16.985,13.26 16.687,12.967 16.687,12.605L16.687,10.262C16.687,9.9 16.985,9.607 17.353,9.607L19.032,9.607C19.185,9.607 19.331,9.659 19.447,9.751ZM6.967,10.866C6.727,10.863 6.505,10.987 6.384,11.189C6.263,11.394 6.263,11.647 6.384,11.852C6.505,12.055 6.727,12.178 6.967,12.175C6.964,12.175 13.997,12.175 13.997,12.175C14.235,12.178 14.456,12.055 14.577,11.852C14.699,11.647 14.699,11.394 14.577,11.189C14.456,10.987 14.235,10.863 13.995,10.866C13.997,10.866 6.964,10.866 6.964,10.866L6.967,10.866ZM18.018,10.916L18.018,11.951L19.442,11.951L18.69,10.916L18.018,10.916ZM9.174,8.705C8.935,8.703 8.712,8.826 8.592,9.029C8.47,9.234 8.47,9.486 8.592,9.691C8.712,9.894 8.935,10.017 9.174,10.015C9.172,10.015 13.997,10.015 13.997,10.015C14.235,10.017 14.456,9.894 14.577,9.691C14.699,9.486 14.699,9.234 14.577,9.029C14.456,8.826 14.235,8.703 13.995,8.705C13.997,8.705 9.172,8.705 9.172,8.705L9.174,8.705Z"
-            },
-            {
-                "name": "isa-b2b-truck",
-                "data": "M16.813,7.717C17.496,7.717 18.051,8.266 18.051,8.943L18.051,9.426C18.183,9.378 18.322,9.353 18.463,9.352L20.496,9.352C20.909,9.353 21.294,9.556 21.524,9.896L22.794,11.805C22.925,12.001 22.996,12.23 23,12.464L23,13.85C23,14.527 22.446,15.077 21.763,15.077L21.705,15.077C21.51,15.789 20.857,16.283 20.113,16.283C19.368,16.283 18.716,15.789 18.521,15.077L16.755,15.077C16.56,15.789 15.908,16.283 15.163,16.283C14.419,16.283 13.767,15.789 13.571,15.077L13.513,15.077C12.83,15.077 12.276,14.527 12.276,13.85L12.276,13.582C12.276,13.356 12.461,13.173 12.689,13.173C12.916,13.173 13.101,13.356 13.101,13.582L13.101,13.85C13.101,14.076 13.286,14.259 13.513,14.259L13.567,14.259C13.762,13.546 14.415,13.052 15.159,13.052C15.904,13.052 16.556,13.546 16.751,14.259L17.226,14.259L17.226,8.943C17.226,8.718 17.041,8.534 16.813,8.534L8.564,8.534C8.336,8.534 8.152,8.351 8.152,8.126C8.152,7.9 8.336,7.717 8.564,7.717L16.813,7.717ZM15.163,13.85C14.708,13.85 14.338,14.216 14.338,14.668L14.34,14.718C14.366,15.146 14.724,15.485 15.163,15.485C15.619,15.485 15.988,15.119 15.988,14.668C15.988,14.216 15.619,13.85 15.163,13.85ZM20.113,13.85C19.657,13.85 19.288,14.216 19.288,14.668L19.289,14.718C19.315,15.146 19.674,15.485 20.113,15.485C20.569,15.485 20.938,15.119 20.938,14.668C20.938,14.216 20.569,13.85 20.113,13.85ZM20.496,10.17L18.463,10.17C18.235,10.17 18.051,10.353 18.051,10.579L18.051,14.259L18.517,14.259C18.712,13.546 19.364,13.052 20.109,13.052C20.853,13.052 21.506,13.546 21.701,14.259L21.763,14.259C21.99,14.259 22.175,14.076 22.175,13.85L22.179,12.46C22.178,12.381 22.154,12.304 22.109,12.239L20.839,10.35C20.762,10.237 20.634,10.17 20.496,10.17ZM2.173,10.01L2.271,10.01C2.755,10.019 3.111,10.095 3.337,10.238C3.578,10.39 3.699,10.632 3.699,10.963C3.699,11.189 3.646,11.373 3.541,11.518C3.435,11.662 3.294,11.749 3.119,11.778L3.119,11.804L3.189,11.821C3.392,11.877 3.541,11.971 3.636,12.103C3.741,12.249 3.795,12.443 3.795,12.685C3.795,13.029 3.67,13.297 3.422,13.49C3.174,13.682 2.836,13.778 2.41,13.778L1,13.778L1,10.01L2.173,10.01ZM5.62,9.955C5.855,9.955 6.063,9.998 6.243,10.084C6.424,10.17 6.564,10.29 6.664,10.445C6.763,10.6 6.813,10.777 6.813,10.976C6.813,11.15 6.783,11.313 6.722,11.465C6.661,11.617 6.566,11.773 6.438,11.933C6.31,12.093 6.084,12.32 5.761,12.616L5.277,13.072L5.277,13.108L6.919,13.108L6.919,13.778L4.284,13.778L4.284,13.224L5.23,12.268L5.289,12.208C5.536,11.953 5.7,11.774 5.779,11.671C5.865,11.56 5.927,11.458 5.965,11.363C6.003,11.268 6.022,11.17 6.022,11.069C6.022,10.918 5.98,10.805 5.897,10.731C5.813,10.657 5.702,10.62 5.563,10.62C5.417,10.62 5.275,10.654 5.138,10.721C5,10.788 4.857,10.884 4.707,11.007L4.274,10.494L4.342,10.437C4.498,10.309 4.629,10.216 4.735,10.159C4.858,10.094 4.991,10.044 5.135,10.008C5.279,9.973 5.441,9.955 5.62,9.955ZM8.733,10.01L8.832,10.01C9.316,10.019 9.671,10.095 9.898,10.238C10.139,10.39 10.26,10.632 10.26,10.963C10.26,11.189 10.207,11.373 10.101,11.518C9.996,11.662 9.855,11.749 9.68,11.778L9.68,11.804L9.749,11.821C9.952,11.877 10.101,11.971 10.196,12.103C10.302,12.249 10.355,12.443 10.355,12.685C10.355,13.029 10.231,13.297 9.983,13.49C9.734,13.682 9.397,13.778 8.971,13.778L7.561,13.778L7.561,10.01L8.733,10.01ZM2.294,12.136L1.799,12.136L1.799,13.119L2.32,13.119C2.54,13.119 2.702,13.076 2.807,12.992C2.912,12.908 2.964,12.779 2.964,12.606C2.964,12.293 2.741,12.136 2.294,12.136ZM8.855,12.136L8.36,12.136L8.36,13.119L8.88,13.119C9.1,13.119 9.263,13.076 9.368,12.992C9.473,12.908 9.525,12.779 9.525,12.606C9.525,12.293 9.302,12.136 8.855,12.136ZM20.041,10.491C20.142,10.491 20.237,10.54 20.295,10.622L21.377,12.143C21.445,12.238 21.453,12.364 21.4,12.467C21.346,12.571 21.239,12.637 21.122,12.637L18.974,12.637C18.802,12.637 18.662,12.497 18.662,12.324L18.662,10.803C18.662,10.631 18.802,10.491 18.974,10.491L20.041,10.491ZM19.88,11.116L19.287,11.116L19.287,12.012L20.517,12.012L19.88,11.116ZM2.219,10.664L1.799,10.664L1.799,11.502L2.263,11.502C2.48,11.502 2.637,11.469 2.734,11.402C2.831,11.335 2.879,11.224 2.879,11.069C2.879,10.925 2.826,10.821 2.721,10.758C2.615,10.696 2.448,10.664 2.219,10.664ZM8.78,10.664L8.36,10.664L8.36,11.502L8.824,11.502C9.04,11.502 9.197,11.469 9.294,11.402C9.391,11.335 9.44,11.224 9.44,11.069C9.44,10.925 9.387,10.821 9.281,10.758C9.176,10.696 9.009,10.664 8.78,10.664ZM16.294,10.758C16.406,10.757 16.511,10.816 16.568,10.913C16.624,11.01 16.624,11.131 16.568,11.228C16.511,11.325 16.406,11.384 16.294,11.383L11.828,11.383C11.716,11.384 11.611,11.325 11.555,11.228C11.498,11.131 11.498,11.01 11.555,10.913C11.611,10.816 11.716,10.757 11.828,10.758L16.294,10.758ZM16.294,9.356C16.406,9.355 16.511,9.414 16.568,9.511C16.624,9.609 16.624,9.729 16.568,9.826C16.511,9.923 16.406,9.982 16.294,9.981L13.23,9.981C13.118,9.982 13.013,9.923 12.956,9.826C12.9,9.729 12.9,9.609 12.956,9.511C13.013,9.414 13.118,9.355 13.23,9.356L16.294,9.356Z"
-            },
-            {
-                "name": "isa-box-out",
-                "data": "M21.493,7.072L18.338,1.618C18.118,1.237 17.707,1 17.267,1L6.734,1C6.293,1 5.882,1.237 5.661,1.62L2.551,7.016C2.523,7.065 2.502,7.115 2.489,7.167C2.445,7.286 2.421,7.413 2.421,7.546L2.421,21.484C2.421,22.32 3.101,23 3.937,23L20.063,23C20.899,23 21.579,22.32 21.579,21.484L21.579,7.496C21.579,7.476 21.579,7.458 21.577,7.44C21.587,7.315 21.56,7.188 21.493,7.072ZM20.289,21.484C20.289,21.609 20.189,21.71 20.063,21.71L3.937,21.71C3.811,21.71 3.711,21.609 3.711,21.484L3.711,7.741L20.289,7.741L20.289,21.484ZM12.782,9.731C12.739,9.668 12.688,9.608 12.628,9.553C12.548,9.482 12.46,9.427 12.367,9.388C12.249,9.338 12.125,9.314 12,9.315C11.776,9.313 11.552,9.392 11.372,9.553C11.313,9.608 11.261,9.668 11.218,9.731L7.59,13.762C7.246,14.143 7.277,14.73 7.658,15.073C8.039,15.416 8.627,15.385 8.97,15.005L11.065,12.677L11.065,19.579C11.065,20.091 11.48,20.508 11.994,20.508C12.506,20.508 12.921,20.091 12.921,19.579L12.921,12.662L15.031,15.005C15.373,15.385 15.961,15.416 16.342,15.073C16.723,14.73 16.754,14.143 16.411,13.762L12.782,9.731ZM12.666,2.29L17.237,2.29L19.644,6.452L12.666,6.452L12.666,2.29ZM6.764,2.29L11.378,2.29L11.378,6.452L4.364,6.452L6.764,2.29Z"
-            },
-            {
-                "name": "isa-download",
-                "data": "M12,23C18.071,23 23,18.071 23,12C23,5.929 18.071,1 12,1C5.929,1 1,5.929 1,12C1,18.071 5.929,23 12,23ZM12,20.412C7.358,20.412 3.588,16.642 3.588,12C3.588,7.358 7.358,3.588 12,3.588C16.642,3.588 20.412,7.358 20.412,12C20.412,16.642 16.642,20.412 12,20.412ZM10.958,13.034L10.958,8.541C10.958,7.956 11.429,7.487 12,7.487C12.571,7.487 13.043,7.956 13.043,8.541L13.043,13.034L14.341,11.701C14.547,11.491 14.815,11.388 15.085,11.388C15.353,11.388 15.622,11.491 15.828,11.701C16.225,12.11 16.225,12.77 15.828,13.179L12.743,16.344C12.333,16.765 11.667,16.765 11.257,16.344C11.257,16.344 8.173,13.179 8.172,13.179C7.775,12.77 7.776,12.11 8.173,11.701C8.378,11.491 8.647,11.387 8.916,11.387L8.967,11.388C9.219,11.401 9.467,11.504 9.659,11.701L10.958,13.034Z"
-            },
-            {
-                "name": "mat-info",
-                "data": "M11 17h2v-6h-2Zm1-8q.425 0 .713-.288Q13 8.425 13 8t-.287-.713Q12.425 7 12 7t-.712.287Q11 7.575 11 8t.288.712Q11.575 9 12 9Zm0 13q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z"
-            },
-            {
-                "name": "UNKNOWN",
-                "data": ""
-            },
-            {
-                "name": "clipboard-check-outline",
-                "data": "M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M7.5,13.5L9,12L11,14L15.5,9.5L17,11L11,17L7.5,13.5Z"
-            },
-            {
-                "name": "shape-outline",
-                "data": "M11,13.5V21.5H3V13.5H11M9,15.5H5V19.5H9V15.5M12,2L17.5,11H6.5L12,2M12,5.86L10.08,9H13.92L12,5.86M17.5,13C20,13 22,15 22,17.5C22,20 20,22 17.5,22C15,22 13,20 13,17.5C13,15 15,13 17.5,13M17.5,15A2.5,2.5 0 0,0 15,17.5A2.5,2.5 0 0,0 17.5,20A2.5,2.5 0 0,0 20,17.5A2.5,2.5 0 0,0 17.5,15Z"
-            },
-            {
-                "name": "bug-outline",
-                "data": "M20,8H17.19C16.74,7.2 16.12,6.5 15.37,6L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.05,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6C7.87,6.5 7.26,7.21 6.81,8H4V10H6.09C6.03,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.03,15.67 6.09,16H4V18H6.81C8.47,20.87 12.14,21.84 15,20.18C15.91,19.66 16.67,18.9 17.19,18H20V16H17.91C17.97,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.97,10.33 17.91,10H20V8M16,15A4,4 0 0,1 12,19A4,4 0 0,1 8,15V11A4,4 0 0,1 12,7A4,4 0 0,1 16,11V15M14,10V12H10V10H14M10,14H14V16H10V14Z"
-            },
-            {
-                "name": "mat-remove",
-                "data": "M6 13.575q-.65 0-1.112-.463-.463-.462-.463-1.112 0-.65.463-1.113.462-.462 1.112-.462h12q.65 0 1.113.462.462.463.462 1.113 0 .65-.462 1.112-.463.463-1.113.463Z"
-            },
-            {
-                "name": "menu",
-                "data": "M120 816v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "notifications",
-                "data": "M160 856v-80h80V496q0-83 50-147.5T420 264v-28q0-25 17.5-42.5T480 176q25 0 42.5 17.5T540 236v28q80 20 130 84.5T720 496v280h80v80H160Zm320 120q-33 0-56.5-23.5T400 896h160q0 33-23.5 56.5T480 976Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "swap-horiz",
-                "data": "M280 896 80 696l200-200 56 57-103 103h287v80H233l103 103-56 57Zm400-240-56-57 103-103H440v-80h287L624 313l56-57 200 200-200 200Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "import-contacts",
-                "data": "M260 736q47 0 91.5 10.5T440 778V384q-41-24-87-36t-93-12q-36 0-71.5 7T120 364v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700 736q36 0 70.5 6t69.5 18V364q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100 858q-21 11-40.5-1T40 822V340q0-11 5.5-21T62 304q46-24 96-36t102-12q58 0 113.5 15T480 316q51-30 106.5-45T700 256q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700 816q-60 0-116 21t-104 59ZM280 562Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "add",
-                "data": "M440 856V616H200v-80h240V296h80v240h240v80H520v240h-80Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "logout",
-                "data": "M189 956q-43.725 0-74.863-31.138Q83 893.725 83 850V302q0-43.725 31.137-74.862Q145.275 196 189 196h286v106H189v548h286v106H189Zm448-140-76-78 110-110H351V522h320L561 412l76-76 240 240-240 240Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "receipt-long",
-                "data": "M235 1014q-60 0-103-43T89 868V714h122V146l66 66 66-66 66 66 66-66 66 66 66-66 66 66 66-66 66 66 66-66v722q0 60-43 103t-103 43H235Zm490-106q17 0 28.5-11.5T765 868V296H317v418h368v154q0 17 11.5 28.5T725 908ZM349 472V366h252v106H349Zm0 138V504h252v106H349Zm329-138q-22 0-37.5-15.5T625 419q0-22 15.5-37.5T678 366q22 0 37.5 15.5T731 419q0 22-15.5 37.5T678 472Zm0 138q-22 0-37.5-15.5T625 557q0-22 15.5-37.5T678 504q22 0 37.5 15.5T731 557q0 22-15.5 37.5T678 610ZM235 908h344v-88H195v48q0 17 11.5 28.5T235 908Zm-40 0v-88 88Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "person",
-                "data": "M480 576q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160 896V784q0-34 17.5-62.5T224 678q62-31 126-46.5T480 616q66 0 130 15.5T736 678q29 15 46.5 43.5T800 784v112H160Zm80-80h480v-32q0-11-5.5-20T700 750q-54-27-109-40.5T480 696q-56 0-111 13.5T260 750q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560 416q0-33-23.5-56.5T480 336q-33 0-56.5 23.5T400 416q0 33 23.5 56.5T480 496Zm0-80Zm0 400Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "deployed-code",
-                "data": "m200 734 240 139V599L200 460v274Zm320 139 240-139V460L520 599v274ZM243 393l237 137 237-137-237-137-237 137ZM120 781V417q0-22 10.5-40t29.5-29l280-161q19-11 40-11t40 11l280 161q19 11 29.5 29t10.5 40v318q0 22-10.5 40T800 804L520 965q-19 11-40 11t-40-11L120 781Zm360-205Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "unarchive",
-                "data": "M200 936q-33 0-56.5-23.5T120 856V356q0-15 5-27t13-23l56-68q8-11 20-16.5t26-5.5h480q14 0 26 5.5t20 16.5l56 68q8 11 13 23t5 27v500q0 33-23.5 56.5T760 936H200Zm16-600h528l-34-40H250l-34 40Zm-16 80v440h560V416H200Zm240 400h80V648l64 64 56-56-160-160-160 160 56 56 64-64v168Zm-240 40h560-560Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "arrow-back",
-                "data": "M480 896 160 576l320-320 57 56-224 224h487v80H313l224 224-57 56Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "arrow-forward",
-                "data": "m480 896-57-56 224-224H160v-80h487L423 312l57-56 320 320-320 320Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "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": [
-            {
-                "alias": "d-account",
-                "name": "account"
-            },
-            {
-                "alias": "d-no-account",
-                "name": "package-variant-closed"
-            },
-            {
-                "name": "isa-audio",
-                "alias": "AU"
-            },
-            {
-                "name": "isa-audio",
-                "alias": "CAS"
-            },
-            {
-                "name": "isa-audio",
-                "alias": "DL"
-            },
-            {
-                "name": "isa-audio",
-                "alias": "KAS"
-            },
-            {
-                "name": "isa-hard-cover",
-                "alias": "BUCH"
-            },
-            {
-                "name": "isa-hard-cover",
-                "alias": "GEB"
-            },
-            {
-                "name": "isa-hard-cover",
-                "alias": "HC"
-            },
-            {
-                "name": "isa-hard-cover",
-                "alias": "KT"
-            },
-            {
-                "name": "isa-ebook",
-                "alias": "EB"
-            },
-            {
-                "name": "isa-non-book",
-                "alias": "GLO"
-            },
-            {
-                "name": "isa-non-book",
-                "alias": "HDL"
-            },
-            {
-                "name": "isa-non-book",
-                "alias": "NB"
-            },
-            {
-                "name": "isa-non-book",
-                "alias": "SPL"
-            },
-            {
-                "name": "isa-calendar",
-                "alias": "KA"
-            },
-            {
-                "name": "isa-scroll",
-                "alias": "MA"
-            },
-            {
-                "name": "isa-software",
-                "alias": "SW"
-            },
-            {
-                "name": "isa-soft-cover",
-                "alias": "TB"
-            },
-            {
-                "name": "isa-video",
-                "alias": "VI"
-            },
-            {
-                "name": "isa-news-paper",
-                "alias": "ZS"
-            }
-        ]
-    }
+    "@shared/icon": "/assets/icons.json"
 }
\ No newline at end of file
diff --git a/apps/isa-app/src/config/config.integration.json b/apps/isa-app/src/config/config.integration.json
index 59f02311a..6f742bb52 100644
--- a/apps/isa-app/src/config/config.integration.json
+++ b/apps/isa-app/src/config/config.integration.json
@@ -69,5 +69,6 @@
   "checkForUpdates": 3600000,
   "licence": {
     "scandit": "AQZyKCc+BEkNL00Y3h3FjawGLF+INUj7cVb0My91hl8ffiW873T8FTV1k4TIZJx5RwcJlYxhgsxHVcnM4AJgSwJhbAfxJmP/3XGijLlLp3XUIRjQwFtf7UlZAFZ7Vrt1/WSf7kxxrFQ2SE2AQwLqPg9DL+hHEfd4xT/15n8p2q7qUlCKLsV6jF12Pd7koFNSWNL3ZIkRtd1ma99/321dnwAJHFGXqWg5nprJ7sYtqUqNQ8Er9SlvKbhnw3AipHzKpz0O3oNfUsr6NlZivRBhMhCZLo5WpXo1m9uIU8zLEWMNDJ+wGUctcGxE3eCptP2zLXUgxxjB+0EXOUtT/GWUc/Ip61CMiyUf7Paz026E2eYil2yWgfkTP5CUgDMNGZFuAA1T5PhB9FRW51CjAIvwOKVMCvfixJiVoUsXHnWH2ZnXqtbDR/uEZBE7OKoBlaPL4G3Lvgdqym5EjROAztUXb6wOmVDiGzzqgizyZnIcxFBSKJAownGj9Vh4/Y/Ag1xzGzNtjz3ngSRfMfIIq/q2Q51uiLiv7mBVliPvPWMUTfTjnqnK/OSBlR2ID+COJqnUKpQMedPyOT3IMznmM6gQCmyYO5KE0MkfhFh6+pdNi6oJM2iZsxK1Z1V+GRSOIwrJEoajjDJkh439XjXk8NExFvplrLjK/oL/dsHIZiG6U5GVWW92kGkuXkJCeUz1CET3paxbGqwrd53r5d6gFABbC12CtcP2JeH4YYCpHYyPQacf0prj9Hdq3wDztShC9tH+4UQS/GbaDHKcS1ANIyPuTxHmBFtPuCJ9Uagy5QBEc8eAz2nfsbfaUxYzco6u/zhNsFbqp6zgQIxs5OcqDQ=="
-  }
+  },
+  "@shared/icon": "/assets/icons.json"
 }
\ No newline at end of file
diff --git a/apps/isa-app/src/config/config.json b/apps/isa-app/src/config/config.json
index 545343161..ffbf145b0 100644
--- a/apps/isa-app/src/config/config.json
+++ b/apps/isa-app/src/config/config.json
@@ -72,324 +72,5 @@
     "licence": {
         "scandit": "AQZyKCc+BEkNL00Y3h3FjawGLF+INUj7cVb0My91hl8ffiW873T8FTV1k4TIZJx5RwcJlYxhgsxHVcnM4AJgSwJhbAfxJmP/3XGijLlLp3XUIRjQwFtf7UlZAFZ7Vrt1/WSf7kxxrFQ2SE2AQwLqPg9DL+hHEfd4xT/15n8p2q7qUlCKLsV6jF12Pd7koFNSWNL3ZIkRtd1ma99/321dnwAJHFGXqWg5nprJ7sYtqUqNQ8Er9SlvKbhnw3AipHzKpz0O3oNfUsr6NlZivRBhMhCZLo5WpXo1m9uIU8zLEWMNDJ+wGUctcGxE3eCptP2zLXUgxxjB+0EXOUtT/GWUc/Ip61CMiyUf7Paz026E2eYil2yWgfkTP5CUgDMNGZFuAA1T5PhB9FRW51CjAIvwOKVMCvfixJiVoUsXHnWH2ZnXqtbDR/uEZBE7OKoBlaPL4G3Lvgdqym5EjROAztUXb6wOmVDiGzzqgizyZnIcxFBSKJAownGj9Vh4/Y/Ag1xzGzNtjz3ngSRfMfIIq/q2Q51uiLiv7mBVliPvPWMUTfTjnqnK/OSBlR2ID+COJqnUKpQMedPyOT3IMznmM6gQCmyYO5KE0MkfhFh6+pdNi6oJM2iZsxK1Z1V+GRSOIwrJEoajjDJkh439XjXk8NExFvplrLjK/oL/dsHIZiG6U5GVWW92kGkuXkJCeUz1CET3paxbGqwrd53r5d6gFABbC12CtcP2JeH4YYCpHYyPQacf0prj9Hdq3wDztShC9tH+4UQS/GbaDHKcS1ANIyPuTxHmBFtPuCJ9Uagy5QBEc8eAz2nfsbfaUxYzco6u/zhNsFbqp6zgQIxs5OcqDQ=="
     },
-    "@ui/icon": {
-        "fallback": "",
-        "viewBox": "0 0 24 24",
-        "icons": [
-            {
-                "name": "account",
-                "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
-            },
-            {
-                "name": "package-variant-closed",
-                "data": "M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L10.11,5.22L16,8.61L17.96,7.5L12,4.15M6.04,7.5L12,10.85L13.96,9.75L8.08,6.35L6.04,7.5M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z"
-            },
-            {
-                "name": "magnify",
-                "data": "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
-            },
-            {
-                "name": "barcode-scan",
-                "data": "M4,6H6V18H4V6M7,6H8V18H7V6M9,6H12V18H9V6M13,6H14V18H13V6M16,6H18V18H16V6M19,6H20V18H19V6M2,4V8H0V4A2,2 0 0,1 2,2H6V4H2M22,2A2,2 0 0,1 24,4V8H22V4H18V2H22M2,16V20H6V22H2A2,2 0 0,1 0,20V16H2M22,20V16H24V20A2,2 0 0,1 22,22H18V20H22Z"
-            },
-            {
-                "name": "arrow-left",
-                "data": "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
-            },
-            {
-                "name": "chevron-right",
-                "data": "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-            },
-            {
-                "name": "filter-variant",
-                "data": "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
-            },
-            {
-                "name": "close",
-                "data": "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            },
-            {
-                "name": "menu-down",
-                "data": "M7,10L12,15L17,10H7Z"
-            },
-            {
-                "name": "menu-up",
-                "data": "M7,15L12,10L17,15H7Z"
-            },
-            {
-                "name": "isa-audio",
-                "data": "M3.629,12.777C2.165,12.924 1,14.153 1,15.664L1,19.358C1,20.969 2.326,22.275 3.926,22.275L6.418,22.275C7.061,22.275 7.602,21.756 7.602,21.114L7.602,13.908C7.602,13.264 7.063,12.762 6.418,12.762L5.959,12.762C5.959,12.762 5.959,10.214 5.959,10.214C5.959,6.818 8.675,4.056 12.023,4.056C15.371,4.056 18.088,6.822 18.088,10.214C18.088,10.214 18.088,12.762 18.088,12.762C18.088,12.762 17.629,12.762 17.629,12.762C16.984,12.762 16.445,13.264 16.445,13.908C16.445,13.908 16.445,21.114 16.445,21.114C16.445,21.756 16.986,22.275 17.629,22.275L20.121,22.275C21.724,22.275 23,20.972 23,19.358C23,19.358 23,15.664 23,15.664C23,14.151 21.879,12.924 20.418,12.777L20.418,10.214C20.418,5.531 16.651,1.725 12.023,1.725C7.396,1.725 3.629,5.531 3.629,10.214L3.629,12.777ZM5.272,19.944L3.926,19.944C3.607,19.944 3.33,19.685 3.33,19.358C3.33,19.358 3.33,15.664 3.33,15.664C3.33,15.339 3.608,15.092 3.926,15.092C3.926,15.092 5.272,15.092 5.272,15.092L5.272,19.944ZM20.67,19.359C20.669,19.68 20.435,19.944 20.121,19.944C20.121,19.944 18.775,19.944 18.775,19.944C18.775,19.944 18.775,15.092 18.775,15.092C18.775,15.092 20.121,15.092 20.121,15.092C20.433,15.092 20.67,15.347 20.67,15.664L20.67,19.359Z"
-            },
-            {
-                "name": "isa-calendar",
-                "data": "M1,8.937C1,8.955 1,8.974 1.001,8.993C1,8.983 1,19.761 1,19.761C1,21.539 2.464,23 4.241,23C4.241,23 19.767,23 19.767,23C21.544,23 23,21.54 23,19.761L23,8.907C23,8.911 23,6.101 23,6.101C23,4.322 21.543,2.862 19.767,2.862C19.767,2.862 17.768,2.862 17.768,2.862C17.768,2.862 17.768,2.075 17.768,2.075C17.772,1.795 17.66,1.517 17.455,1.312L17.455,1.312C17.251,1.108 16.972,0.995 16.684,1C16.4,1.004 16.131,1.121 15.934,1.324C15.737,1.528 15.628,1.801 15.633,2.084C15.633,2.075 15.633,2.862 15.633,2.862C15.633,2.862 8.294,2.862 8.294,2.862C8.294,2.862 8.294,2.075 8.294,2.075C8.298,1.795 8.185,1.517 7.981,1.312L7.981,1.312C7.781,1.113 7.511,1 7.228,1L7.11,1.003C6.559,1.064 6.147,1.534 6.159,2.088C6.159,2.075 6.159,2.862 6.159,2.862C6.159,2.862 4.241,2.862 4.241,2.862C2.465,2.862 1,4.322 1,6.101L1,8.879L1.595,9.473L1,8.88L1,8.937ZM3.135,10.042L20.865,10.042C20.865,10.042 20.865,19.761 20.865,19.761C20.865,20.369 20.373,20.865 19.767,20.865L4.241,20.865C3.634,20.865 3.135,20.37 3.135,19.761L3.135,10.042ZM4.241,4.996L6.159,4.996C6.159,4.996 6.159,5.783 6.159,5.783C6.158,6.164 6.361,6.517 6.692,6.708C7.022,6.9 7.43,6.9 7.761,6.708C8.091,6.517 8.295,6.164 8.294,5.782C8.294,5.783 8.294,4.996 8.294,4.996C8.294,4.996 15.633,4.996 15.633,4.996C15.633,4.996 15.633,5.783 15.633,5.783C15.632,6.164 15.835,6.517 16.166,6.708C16.496,6.9 16.904,6.9 17.235,6.708C17.565,6.517 17.769,6.164 17.768,5.782C17.768,5.783 17.768,4.996 17.768,4.996C17.768,4.996 19.767,4.996 19.767,4.996C20.373,4.996 20.865,5.492 20.865,6.101C20.865,6.101 20.865,7.907 20.865,7.907C20.865,7.907 3.135,7.907 3.135,7.907C3.135,7.907 3.135,6.101 3.135,6.101C3.135,5.492 3.634,4.996 4.241,4.996Z"
-            },
-            {
-                "name": "isa-ebook",
-                "data": "M18.637,1L5.363,1C4.058,1 2.991,2.067 2.991,3.372L2.991,20.628C2.991,21.933 4.058,23 5.363,23C5.363,23 18.637,23 18.637,23C19.942,23 21.009,21.933 21.009,20.628L21.009,3.372C21.009,2.028 19.942,1 18.637,1ZM18.92,20.628C18.92,20.784 18.793,20.911 18.637,20.911C18.637,20.911 5.363,20.911 5.363,20.911C5.207,20.911 5.08,20.784 5.08,20.628L5.08,3.372C5.08,3.216 5.207,3.089 5.363,3.089C5.363,3.089 18.637,3.089 18.637,3.089C18.793,3.089 18.92,3.216 18.92,3.372C18.92,3.372 18.92,20.628 18.92,20.628ZM12,16.324C11.061,16.324 10.292,17.093 10.292,18.032C10.292,18.971 11.061,19.74 12,19.74C12.939,19.74 13.708,18.971 13.708,18.032C13.708,17.05 12.939,16.324 12,16.324ZM13.181,4.26L10.643,4.26C10.09,4.26 9.628,4.725 9.628,5.304C9.628,5.883 10.09,6.349 10.643,6.349L13.181,6.349C13.735,6.349 14.196,5.883 14.196,5.304C14.196,4.673 13.735,4.26 13.181,4.26Z"
-            },
-            {
-                "name": "isa-hard-cover",
-                "data": "M4.109,3.168L4.105,3.169C3.708,3.207 3.407,3.545 3.408,3.951C3.408,3.95 3.408,5.027 3.408,5.027L1.696,5.028C1.3,5.066 0.998,5.404 1,5.81C1,5.809 1,18.512 1,18.512C1,18.945 1.344,19.294 1.765,19.294L9.319,19.294C10.324,19.294 10.957,19.658 11.317,20.403L11.318,20.404C11.449,20.668 11.713,20.833 12,20.833C12.287,20.833 12.551,20.668 12.682,20.404L12.682,20.404C13.043,19.658 13.676,19.294 14.681,19.294L22.235,19.294C22.656,19.294 23,18.945 23,18.512L23,5.809C23,5.376 22.656,5.027 22.235,5.027L20.592,5.027C20.592,5.027 20.592,3.95 20.592,3.95C20.592,3.517 20.248,3.168 19.827,3.168L14.681,3.168C13.615,3.168 12.642,3.708 12,4.512C11.357,3.708 10.385,3.168 9.319,3.168L4.109,3.168ZM2.529,6.592L3.408,6.592C3.408,6.592 3.408,16.343 3.408,16.343C3.408,16.777 3.752,17.125 4.173,17.125L8.34,17.125C9.144,17.125 9.811,17.347 10.302,17.782C10.332,17.808 10.36,17.834 10.388,17.862C10.048,17.774 9.69,17.73 9.319,17.73C9.319,17.73 2.529,17.73 2.529,17.73L2.529,6.592ZM20.592,6.592L21.471,6.592C21.471,6.592 21.471,17.73 21.471,17.73C21.471,17.73 14.681,17.73 14.681,17.73C14.31,17.73 13.951,17.774 13.614,17.861C13.64,17.834 13.668,17.808 13.698,17.782C14.189,17.347 14.856,17.125 15.66,17.125L19.827,17.125C20.248,17.125 20.592,16.777 20.592,16.343L20.592,6.592ZM11.235,16.536C10.449,15.875 9.427,15.561 8.34,15.561L4.938,15.561L4.938,4.733L9.319,4.733C9.891,4.733 10.467,5.071 10.838,5.517C11.078,5.805 11.234,6.14 11.235,6.462L11.235,16.536ZM12.765,16.536L12.765,6.466C12.765,6.144 12.921,5.807 13.162,5.517C13.533,5.071 14.109,4.733 14.681,4.733L19.062,4.733C19.062,4.733 19.062,15.561 19.062,15.561C19.062,15.561 15.66,15.561 15.66,15.561C14.573,15.561 13.551,15.875 12.765,16.536ZM6.419,12.826L6.419,12.826C6.419,13.215 6.734,13.531 7.123,13.531C7.123,13.531 9.291,13.531 9.291,13.531C9.68,13.531 9.995,13.215 9.995,12.826L9.995,12.795C9.995,12.406 9.68,12.09 9.291,12.09L7.123,12.09C6.734,12.09 6.419,12.406 6.419,12.795L6.581,12.957C6.581,12.957 6.419,12.796 6.419,12.796L6.419,12.826ZM14.005,12.826L14.005,12.826C14.005,13.215 14.32,13.531 14.709,13.531C14.709,13.531 16.877,13.531 16.877,13.531C17.266,13.531 17.581,13.215 17.581,12.826L17.581,12.795C17.581,12.406 17.266,12.09 16.877,12.09L14.709,12.09C14.32,12.09 14.005,12.406 14.005,12.795L14.167,12.957C14.167,12.957 14.005,12.796 14.005,12.796L14.005,12.826ZM9.82,12.944L9.82,12.944L9.833,12.957L9.82,12.944ZM17.406,12.944L17.406,12.944L17.419,12.957L17.406,12.944ZM14.005,10.596L14.005,10.596C14.005,10.985 14.32,11.3 14.709,11.3L16.877,11.3C17.266,11.3 17.581,10.985 17.581,10.596L17.581,10.564C17.581,10.175 17.266,9.86 16.877,9.86L14.709,9.86C14.32,9.86 14.005,10.175 14.005,10.564L14.167,10.727C14.167,10.727 14.005,10.565 14.005,10.565L14.005,10.596ZM6.419,10.596L6.419,10.596C6.419,10.985 6.734,11.3 7.123,11.3L9.291,11.3C9.68,11.3 9.995,10.985 9.995,10.596L9.995,10.564C9.995,10.175 9.68,9.86 9.291,9.86L7.123,9.86C6.734,9.86 6.419,10.175 6.419,10.564L6.581,10.727C6.581,10.727 6.419,10.565 6.419,10.565L6.419,10.596ZM9.82,10.714L9.82,10.714L9.833,10.727L9.82,10.714ZM17.406,10.714L17.406,10.714L17.419,10.727L17.406,10.714ZM6.419,8.365L6.419,8.365C6.419,8.754 6.734,9.069 7.123,9.069L9.291,9.069C9.68,9.069 9.995,8.754 9.995,8.365L9.995,8.333C9.995,7.944 9.68,7.629 9.291,7.629L7.123,7.629C6.734,7.629 6.419,7.944 6.419,8.333L6.581,8.496C6.581,8.496 6.419,8.334 6.419,8.334L6.419,8.365ZM14.005,8.365L14.005,8.365C14.005,8.754 14.32,9.069 14.709,9.069L16.877,9.069C17.266,9.069 17.581,8.754 17.581,8.365L17.581,8.333C17.581,7.944 17.266,7.629 16.877,7.629L14.709,7.629C14.32,7.629 14.005,7.944 14.005,8.333L14.167,8.496C14.167,8.496 14.005,8.334 14.005,8.334L14.005,8.365ZM17.406,8.483L17.406,8.483L17.419,8.496L17.406,8.483ZM9.82,8.483L9.82,8.483L9.833,8.496L9.82,8.483Z"
-            },
-            {
-                "name": "isa-news-paper",
-                "data": "M12.022,5.892L12.009,5.896L3.216,1.669L3.19,1.66C3.008,1.599 2.769,1.609 2.582,1.722L2.585,1.72C2.386,1.831 2.238,2.09 2.238,2.301L2.238,2.534C2.092,2.518 1.946,2.55 1.8,2.648L1.764,2.672L1.734,2.702C1.614,2.822 1.506,3.053 1.506,3.232L1.506,3.626C1.415,3.652 1.332,3.698 1.262,3.759C1.074,3.897 1,4.096 1,4.3L1,19.336C1,19.675 1.207,19.943 1.543,20.014C1.543,20.014 11.9,22.378 11.9,22.378L12.099,22.378L22.457,20.039C22.793,19.968 23,19.701 23,19.361L23,4.326C23,4.138 22.896,3.941 22.772,3.816C22.695,3.739 22.599,3.682 22.494,3.651L22.494,3.187C22.494,2.973 22.413,2.765 22.2,2.622L22.2,2.622C22.062,2.53 21.924,2.497 21.787,2.507L21.787,2.301C21.787,2.094 21.673,1.874 21.467,1.736C21.277,1.61 21.025,1.597 20.835,1.66L20.809,1.669L12.022,5.892ZM21.624,18.812L12.688,20.842C12.688,20.842 12.688,7.204 12.688,7.204C12.688,7.204 21.624,5.174 21.624,5.174L21.624,18.812ZM2.376,5.174L11.312,7.204C11.312,7.204 11.312,20.842 11.312,20.842C11.312,20.842 2.376,18.812 2.376,18.812L2.376,5.174ZM17.542,11.044L16.99,11.541C16.99,11.541 16.484,11.339 16.484,11.339C16.139,11.2 15.734,11.358 15.592,11.7C15.595,11.694 15.262,12.42 15.262,12.42C15.262,12.42 14.545,12.556 14.545,12.556C14.202,12.625 13.991,12.894 13.991,13.236L14.03,13.94C14.03,13.94 13.356,14.451 13.356,14.451L13.335,14.472C13.202,14.605 13.107,14.758 13.107,14.957C13.107,15.091 13.139,15.276 13.261,15.416C13.26,15.415 13.553,15.787 13.553,15.787C13.553,15.787 13.192,16.454 13.192,16.454L13.18,16.49C13.124,16.658 13.124,16.825 13.18,16.993L13.198,17.048L13.23,17.097C13.342,17.264 13.464,17.364 13.632,17.42L14.083,17.541C14.083,17.541 14.067,18.064 14.067,18.064C14.067,18.284 14.149,18.492 14.362,18.635C14.558,18.766 14.76,18.802 14.956,18.74C14.956,18.74 15.494,18.582 15.494,18.582C15.494,18.582 15.707,18.928 15.707,18.928C15.802,19.143 16.036,19.29 16.271,19.29L16.336,19.29C16.527,19.283 16.668,19.222 16.801,19.044C16.8,19.045 17.322,18.575 17.322,18.575C17.322,18.575 17.828,18.778 17.828,18.778C18.169,18.915 18.569,18.763 18.715,18.428C18.715,18.428 19.044,17.748 19.044,17.748C19.044,17.748 19.767,17.612 19.767,17.612C20.111,17.543 20.321,17.273 20.321,16.931L20.282,16.227C20.282,16.227 20.956,15.716 20.956,15.716L20.977,15.695C21.11,15.562 21.205,15.41 21.205,15.21C21.205,15.077 21.173,14.891 21.052,14.751L20.759,14.381L21.121,13.713L21.133,13.677C21.188,13.509 21.188,13.342 21.133,13.174L21.114,13.119L21.082,13.071C20.97,12.903 20.848,12.803 20.681,12.747L20.23,12.626C20.23,12.626 20.245,12.103 20.245,12.103C20.245,11.883 20.164,11.675 19.95,11.532L19.95,11.532C19.754,11.402 19.552,11.366 19.356,11.427C19.356,11.427 18.818,11.585 18.818,11.585C18.818,11.585 18.606,11.239 18.606,11.239C18.521,11.048 18.324,10.909 18.116,10.882C17.9,10.833 17.689,10.904 17.542,11.044ZM9.936,8.583L3.9,7.206L3.851,7.206C3.673,7.206 3.507,7.244 3.379,7.349L3.394,7.339C3.191,7.481 3.113,7.685 3.113,7.894L3.113,17.133C3.113,17.472 3.32,17.739 3.656,17.811C3.656,17.811 9.691,19.188 9.691,19.188L9.791,19.188C9.905,19.188 10.024,19.148 10.137,19.091L10.162,19.079L10.184,19.064C10.397,18.922 10.479,18.713 10.479,18.5C10.479,18.5 10.479,9.261 10.479,9.261C10.479,8.922 10.272,8.654 9.936,8.583L9.936,8.583ZM9.078,17.652L4.463,16.608C4.463,16.608 4.463,8.767 4.463,8.767C4.463,8.767 9.078,9.811 9.078,9.811L9.078,17.652ZM17.942,16.814L17.736,17.269C17.736,17.269 17.427,17.154 17.427,17.154C17.21,17.081 16.932,17.097 16.722,17.307L16.734,17.296L16.479,17.522L16.406,17.399C16.276,17.203 16.012,17.079 15.817,17.079C15.723,17.079 15.634,17.09 15.543,17.144C15.547,17.142 15.468,17.164 15.468,17.164C15.468,17.164 15.468,17.064 15.468,17.064C15.511,16.724 15.253,16.436 14.972,16.36C14.972,16.36 14.87,16.332 14.87,16.332C14.87,16.332 15.014,16.071 15.014,16.071C15.147,15.803 15.095,15.543 14.965,15.349L14.786,15.114C14.786,15.114 15.164,14.827 15.164,14.827C15.353,14.693 15.443,14.445 15.443,14.248L15.415,13.786C15.415,13.786 15.848,13.694 15.848,13.694C16.123,13.674 16.283,13.478 16.357,13.329L16.576,12.848C16.576,12.848 16.885,12.963 16.885,12.963C17.08,13.028 17.336,12.989 17.524,12.864L17.545,12.849L17.853,12.587L17.931,12.717C18.068,12.922 18.405,13.068 18.677,13L18.849,12.952C18.849,12.952 18.845,13.043 18.845,13.043C18.798,13.388 19.057,13.68 19.34,13.756C19.34,13.756 19.434,13.783 19.434,13.783L19.294,14.029C19.165,14.288 19.217,14.548 19.347,14.742L19.526,14.977C19.526,14.977 19.148,15.264 19.148,15.264L19.151,15.262C18.959,15.399 18.869,15.647 18.869,15.843L18.897,16.305C18.897,16.305 18.407,16.41 18.407,16.41L18.383,16.418C18.191,16.482 18.017,16.627 17.942,16.814ZM14.098,11.073L14.191,11.073L20.49,9.606C20.806,9.537 21.004,9.283 21.004,8.958C21.004,8.958 21.004,7.344 21.004,7.344C21.004,7.167 20.909,6.979 20.792,6.861C20.642,6.707 20.416,6.634 20.19,6.701C20.193,6.7 13.957,8.153 13.957,8.153C13.641,8.221 13.443,8.475 13.443,8.801L13.443,10.414C13.443,10.592 13.539,10.779 13.655,10.898L13.705,10.949L13.768,10.981C13.876,11.036 13.99,11.073 14.098,11.073ZM17.542,11.044L17.531,11.055L17.542,11.044ZM14.752,9.325L19.696,8.162C19.696,8.162 19.696,8.412 19.696,8.412C19.696,8.412 14.752,9.574 14.752,9.574L14.752,9.325ZM21.473,3.574L21.553,3.973L21.554,3.973L21.554,3.541L21.473,3.574Z"
-            },
-            {
-                "name": "isa-non-book",
-                "data": "M11.215,5.282L9.049,1L6.884,5.282L6.884,7.704C6.081,8.012 5.499,8.385 5.14,8.786C4.803,9.164 4.641,9.575 4.641,10.002L4.641,19.873C4.641,20.614 5.183,21.34 6.218,21.883C7.504,22.558 9.591,23 12,23C14.408,23 16.495,22.558 17.781,21.888C18.818,21.349 19.359,20.627 19.359,19.896L19.359,10.025C19.359,9.262 18.765,8.483 17.588,7.918C17.588,7.918 17.588,1.437 17.588,1.437L13.257,1.437L13.257,6.947C12.577,6.901 11.896,6.891 11.215,6.917C11.215,6.917 11.215,5.282 11.215,5.282ZM12,21.506C9.805,21.506 8.048,21.14 6.994,20.626C6.691,20.478 6.453,20.322 6.293,20.156C6.207,20.067 6.14,19.987 6.14,19.896L6.14,11.96C7.444,12.655 9.564,13.129 12,13.129C14.436,13.129 16.556,12.655 17.859,11.96C17.86,11.96 17.86,19.873 17.86,19.873C17.86,19.968 17.793,20.054 17.705,20.147C17.545,20.315 17.307,20.473 17.004,20.622C15.951,21.141 14.194,21.506 12,21.506ZM13.257,8.446L13.257,11.606C12.864,11.635 12.448,11.658 12.008,11.659C12.008,11.659 11.215,11.63 11.215,11.63C11.215,11.63 11.215,8.43 11.215,8.43C11.895,8.396 12.577,8.401 13.257,8.446L13.257,8.446ZM9.047,4.321L9.716,5.644C9.716,5.644 9.716,11.502 9.716,11.502C9.267,11.44 8.822,11.353 8.383,11.242C8.383,11.242 8.383,5.622 8.383,5.622L9.047,4.321ZM16.089,11.122C15.652,11.256 15.206,11.362 14.756,11.439C14.756,11.439 14.756,5.731 14.756,5.731C14.756,5.731 16.089,5.731 16.089,5.731L16.089,11.122ZM6.884,9.354L6.884,10.721C6.7,10.626 6.543,10.524 6.416,10.418C6.257,10.286 6.14,10.166 6.14,10.025C6.14,9.887 6.261,9.775 6.418,9.649C6.546,9.546 6.702,9.447 6.884,9.354L6.884,9.354ZM17.86,10.025C17.86,10.127 17.779,10.214 17.678,10.312C17.65,10.339 17.62,10.365 17.588,10.392C17.588,10.391 17.588,9.659 17.588,9.659C17.62,9.685 17.65,9.712 17.678,9.739C17.779,9.837 17.86,9.923 17.86,10.025ZM16.089,2.931L16.089,4.238C16.089,4.238 14.756,4.238 14.756,4.238C14.756,4.238 14.756,2.931 14.756,2.931L16.089,2.931Z"
-            },
-            {
-                "name": "isa-scroll",
-                "data": "M20.88,16.904L20.88,4.048C20.88,2.365 19.515,1 17.831,1L4.048,1C2.365,1 1,2.365 1,4.048L1,7.096L5.241,7.096C5.241,7.096 5.241,19.952 5.241,19.952C5.241,21.635 6.606,23 8.289,23C8.289,23 19.952,23 19.952,23C21.635,23 23,21.635 23,19.952C23,19.952 23,16.904 23,16.904L20.88,16.904ZM9.482,19.952C9.482,20.61 8.947,21.145 8.289,21.145C7.631,21.145 7.096,20.61 7.096,19.952L7.096,4.048C7.096,3.623 7.007,3.221 6.848,2.856C6.847,2.855 17.831,2.855 17.831,2.855C18.489,2.855 19.024,3.39 19.024,4.048C19.024,4.048 19.024,16.904 19.024,16.904C19.024,16.904 9.482,16.904 9.482,16.904L9.482,19.952ZM21.145,19.952C21.145,20.61 20.61,21.145 19.952,21.145L11.088,21.145C11.248,20.779 11.337,20.377 11.337,19.952L11.337,18.759C11.337,18.759 21.145,18.759 21.145,18.759C21.145,18.759 21.145,19.952 21.145,19.952ZM5.241,5.241L2.855,5.241C2.855,5.241 2.855,4.048 2.855,4.048C2.855,3.39 3.39,2.855 4.048,2.855C4.706,2.855 5.241,3.39 5.241,4.048L5.241,5.241Z"
-            },
-            {
-                "name": "isa-soft-cover",
-                "data": "M18.963,17.967C19.451,17.954 19.842,17.555 19.842,17.064C19.842,17.064 19.842,1.904 19.842,1.904C19.842,1.405 19.437,1 18.938,1L6.154,1C5.047,1.005 4.154,1.905 4.158,3.011C4.158,3.009 4.158,18.545 4.158,18.545C4.16,19.862 5.226,20.928 6.542,20.93L7.479,20.93C7.479,20.93 7.479,22.095 7.479,22.095C7.477,22.443 7.68,22.764 7.997,22.914C8.315,23.064 8.691,23.016 8.961,22.791C8.96,22.792 9.643,22.226 9.643,22.226C9.643,22.226 10.324,22.788 10.324,22.788C10.592,23.011 10.968,23.059 11.286,22.909C11.604,22.759 11.806,22.438 11.804,22.087C11.804,22.09 11.804,20.925 11.804,20.925C11.804,20.925 18.938,20.925 18.938,20.925C19.437,20.925 19.842,20.521 19.842,20.021C19.842,19.531 19.451,19.132 18.964,19.118C18.665,19.094 18.434,18.844 18.434,18.543C18.434,18.247 18.657,18.001 18.948,17.969L18.963,17.967ZM9.287,20.217C9.513,20.12 9.77,20.12 9.997,20.217L9.997,19.449C9.997,19.449 9.287,19.449 9.287,19.449L9.287,20.217ZM7.684,17.973C7.556,18.128 7.479,18.328 7.479,18.545L7.479,19.125C7.479,19.125 6.53,19.125 6.53,19.125C6.305,19.135 6.105,19.027 5.996,18.845C5.886,18.663 5.886,18.435 5.996,18.252C6.105,18.07 6.305,17.962 6.518,17.972L7.684,17.973ZM16.626,19.12L11.804,19.12C11.804,19.12 11.804,18.545 11.804,18.545C11.804,18.328 11.727,18.128 11.6,17.973L16.628,17.973C16.533,18.349 16.533,18.744 16.626,19.12ZM6.543,16.16C6.35,16.161 6.16,16.185 5.975,16.232C5.975,16.232 5.975,3.007 5.975,3.007C5.974,2.902 6.054,2.816 6.156,2.808C6.165,2.807 18.035,2.807 18.035,2.807C18.035,2.807 18.035,16.16 18.035,16.16L6.543,16.16Z"
-            },
-            {
-                "name": "isa-video",
-                "data": "M12,23C18.075,23 23,18.075 23,12C23,5.925 18.075,1 12,1C5.925,1 1,5.925 1,12C1,18.075 5.925,23 12,23ZM12,2.784C17.09,2.784 21.216,6.91 21.216,12C21.216,17.09 17.09,21.216 12,21.216C6.91,21.216 2.784,17.09 2.784,12C2.784,6.91 6.91,2.784 12,2.784ZM15.786,10.998L9.84,7.431C9.566,7.262 9.226,7.26 8.941,7.42C8.655,7.581 8.492,7.875 8.492,8.197C8.492,8.197 8.492,15.332 8.492,15.332C8.492,15.652 8.66,15.946 8.943,16.107C9.079,16.187 9.231,16.224 9.384,16.224C9.545,16.224 9.706,16.179 9.84,16.098C9.84,16.098 15.786,12.531 15.786,12.531C16.059,12.372 16.222,12.077 16.222,11.764C16.222,11.451 16.059,11.157 15.782,10.996L15.786,10.998ZM10.276,13.755L10.276,9.769C10.276,9.769 13.598,11.764 13.598,11.764L10.276,13.755Z"
-            },
-            {
-                "name": "isa-software",
-                "data": "M12,23C18.075,23 23,18.075 23,12C23,5.925 18.075,1 12,1C5.925,1 1,5.925 1,12C1,18.075 5.925,23 12,23ZM12,21.248C6.892,21.248 2.752,17.108 2.752,12C2.752,6.892 6.892,2.752 12,2.752C17.108,2.752 21.248,6.892 21.248,12C21.248,17.108 17.108,21.248 12,21.248ZM11.991,16.481C14.526,16.481 16.589,14.418 16.589,11.884C16.589,9.349 14.526,7.286 11.991,7.286C9.456,7.286 7.393,9.349 7.393,11.884C7.393,14.418 9.456,16.481 11.991,16.481ZM11.991,9.065C13.528,9.065 14.758,10.294 14.758,11.831C14.758,13.368 13.528,14.598 11.991,14.598C10.454,14.598 9.224,13.368 9.224,11.831C9.224,10.294 10.454,9.065 11.991,9.065ZM11.991,14.153C13.229,14.153 14.261,13.122 14.261,11.884C14.261,10.646 13.229,9.614 11.991,9.614C10.753,9.614 9.721,10.646 9.721,11.884C9.721,13.122 10.753,14.153 11.991,14.153ZM11.991,11.257C12.337,11.257 12.618,11.538 12.618,11.884C12.618,12.23 12.337,12.511 11.991,12.511C11.645,12.511 11.364,12.23 11.364,11.884C11.364,11.538 11.645,11.257 11.991,11.257ZM15.795,4.606L15.927,4.081C17.745,5.06 19.191,6.645 20.03,8.509L20.249,8.995L18.673,9.671L18.46,9.207C17.76,7.682 16.609,6.361 15.126,5.578L15.342,5.692C15.342,5.692 14.909,4.866 14.909,4.866L15.217,4.294L15.53,4.818L15.611,4.668L15.615,4.651L15.619,4.653L15.679,4.542C15.717,4.563 15.756,4.585 15.795,4.606Z"
-            },
-            {
-                "name": "isa-shopping-bag",
-                "data": "M6.951,6.624L6.951,6.118C6.951,3.279 9.232,1 12.022,1C14.811,1 17.092,3.279 17.092,6.118L17.092,6.624L19.88,6.624C20.242,6.628 20.593,6.863 20.677,7.225C20.696,7.301 20.699,7.378 20.693,7.456L20.692,7.467L20.692,21.036C20.692,22.107 19.824,23 18.728,23L5.268,23C4.197,23 3.304,22.133 3.304,21.036L3.304,7.482C3.304,6.996 3.676,6.624 4.163,6.624L6.951,6.624ZM6.951,8.317L5.021,8.317L5.021,21.012C5.021,21.162 5.141,21.283 5.292,21.283L18.751,21.283C18.902,21.283 19.022,21.162 19.022,21.012L19.022,8.317L17.092,8.317L17.092,10.635C17.092,11.122 16.72,11.493 16.234,11.493C15.747,11.493 15.375,11.122 15.375,10.635L15.375,8.317L8.668,8.317L8.668,10.635C8.668,11.122 8.296,11.493 7.809,11.493C7.323,11.493 6.951,11.122 6.951,10.635L6.951,8.317ZM15.375,6.6L15.375,6.094C15.375,4.225 13.868,2.693 12.022,2.693C10.175,2.693 8.668,4.225 8.668,6.094L8.668,6.6L15.375,6.6Z"
-            },
-            {
-                "name": "isa-truck",
-                "data": "M2.594,5.338L2.595,5.331L14.918,5.331C15.872,5.331 16.655,6.101 16.655,7.034L16.655,8.275L19.667,8.276C19.88,8.277 20.08,8.378 20.205,8.548L22.827,12.107C22.879,12.165 22.921,12.231 22.95,12.304L22.957,12.316L22.962,12.337C22.964,12.345 22.967,12.353 22.969,12.359C22.996,12.446 23.006,12.537 22.996,12.626L22.996,15.665C22.996,16.447 22.34,17.096 21.538,17.096L21.467,17.096C21.145,18.008 20.259,18.669 19.222,18.669C18.185,18.669 17.298,18.008 16.977,17.096L8.627,17.096C8.306,18.008 7.419,18.669 6.381,18.669C5.344,18.669 4.458,18.008 4.136,17.096L2.737,17.096C1.783,17.096 1,16.325 1,15.393L1,7.035C1,6.149 1.706,5.41 2.594,5.338ZM6.435,15.323L6.381,15.323C5.802,15.323 5.338,15.773 5.338,16.344C5.338,16.344 5.338,16.347 5.338,16.346C5.34,16.912 5.802,17.36 6.381,17.36C6.955,17.36 7.413,16.921 7.425,16.368L7.425,16.342C7.425,15.789 6.989,15.349 6.435,15.323ZM19.222,15.322C19.802,15.322 20.265,15.772 20.265,16.342C20.265,16.909 19.801,17.36 19.222,17.36C18.642,17.36 18.178,16.909 18.178,16.342C18.178,15.772 18.642,15.322 19.222,15.322ZM15.324,15.787L15.324,7.035C15.324,6.814 15.143,6.641 14.918,6.641L2.737,6.641C2.511,6.641 2.33,6.814 2.33,7.035L2.33,15.393C2.33,15.613 2.511,15.787 2.737,15.787L4.077,15.787C4.332,14.773 5.271,14.013 6.381,14.013C7.492,14.013 8.431,14.773 8.687,15.787L15.324,15.787ZM19.447,9.751L19.327,9.587L16.655,9.585L16.655,15.787L16.917,15.787C17.173,14.773 18.111,14.012 19.222,14.012C20.332,14.012 21.272,14.773 21.527,15.787L21.538,15.787C21.609,15.787 21.665,15.733 21.665,15.665L21.665,12.762L21.32,12.294C21.425,12.482 21.429,12.713 21.326,12.907C21.212,13.123 20.984,13.26 20.736,13.26L17.353,13.26C16.985,13.26 16.687,12.967 16.687,12.605L16.687,10.262C16.687,9.9 16.985,9.607 17.353,9.607L19.032,9.607C19.185,9.607 19.331,9.659 19.447,9.751ZM6.967,10.866C6.727,10.863 6.505,10.987 6.384,11.189C6.263,11.394 6.263,11.647 6.384,11.852C6.505,12.055 6.727,12.178 6.967,12.175C6.964,12.175 13.997,12.175 13.997,12.175C14.235,12.178 14.456,12.055 14.577,11.852C14.699,11.647 14.699,11.394 14.577,11.189C14.456,10.987 14.235,10.863 13.995,10.866C13.997,10.866 6.964,10.866 6.964,10.866L6.967,10.866ZM18.018,10.916L18.018,11.951L19.442,11.951L18.69,10.916L18.018,10.916ZM9.174,8.705C8.935,8.703 8.712,8.826 8.592,9.029C8.47,9.234 8.47,9.486 8.592,9.691C8.712,9.894 8.935,10.017 9.174,10.015C9.172,10.015 13.997,10.015 13.997,10.015C14.235,10.017 14.456,9.894 14.577,9.691C14.699,9.486 14.699,9.234 14.577,9.029C14.456,8.826 14.235,8.703 13.995,8.705C13.997,8.705 9.172,8.705 9.172,8.705L9.174,8.705Z"
-            },
-            {
-                "name": "isa-b2b-truck",
-                "data": "M16.813,7.717C17.496,7.717 18.051,8.266 18.051,8.943L18.051,9.426C18.183,9.378 18.322,9.353 18.463,9.352L20.496,9.352C20.909,9.353 21.294,9.556 21.524,9.896L22.794,11.805C22.925,12.001 22.996,12.23 23,12.464L23,13.85C23,14.527 22.446,15.077 21.763,15.077L21.705,15.077C21.51,15.789 20.857,16.283 20.113,16.283C19.368,16.283 18.716,15.789 18.521,15.077L16.755,15.077C16.56,15.789 15.908,16.283 15.163,16.283C14.419,16.283 13.767,15.789 13.571,15.077L13.513,15.077C12.83,15.077 12.276,14.527 12.276,13.85L12.276,13.582C12.276,13.356 12.461,13.173 12.689,13.173C12.916,13.173 13.101,13.356 13.101,13.582L13.101,13.85C13.101,14.076 13.286,14.259 13.513,14.259L13.567,14.259C13.762,13.546 14.415,13.052 15.159,13.052C15.904,13.052 16.556,13.546 16.751,14.259L17.226,14.259L17.226,8.943C17.226,8.718 17.041,8.534 16.813,8.534L8.564,8.534C8.336,8.534 8.152,8.351 8.152,8.126C8.152,7.9 8.336,7.717 8.564,7.717L16.813,7.717ZM15.163,13.85C14.708,13.85 14.338,14.216 14.338,14.668L14.34,14.718C14.366,15.146 14.724,15.485 15.163,15.485C15.619,15.485 15.988,15.119 15.988,14.668C15.988,14.216 15.619,13.85 15.163,13.85ZM20.113,13.85C19.657,13.85 19.288,14.216 19.288,14.668L19.289,14.718C19.315,15.146 19.674,15.485 20.113,15.485C20.569,15.485 20.938,15.119 20.938,14.668C20.938,14.216 20.569,13.85 20.113,13.85ZM20.496,10.17L18.463,10.17C18.235,10.17 18.051,10.353 18.051,10.579L18.051,14.259L18.517,14.259C18.712,13.546 19.364,13.052 20.109,13.052C20.853,13.052 21.506,13.546 21.701,14.259L21.763,14.259C21.99,14.259 22.175,14.076 22.175,13.85L22.179,12.46C22.178,12.381 22.154,12.304 22.109,12.239L20.839,10.35C20.762,10.237 20.634,10.17 20.496,10.17ZM2.173,10.01L2.271,10.01C2.755,10.019 3.111,10.095 3.337,10.238C3.578,10.39 3.699,10.632 3.699,10.963C3.699,11.189 3.646,11.373 3.541,11.518C3.435,11.662 3.294,11.749 3.119,11.778L3.119,11.804L3.189,11.821C3.392,11.877 3.541,11.971 3.636,12.103C3.741,12.249 3.795,12.443 3.795,12.685C3.795,13.029 3.67,13.297 3.422,13.49C3.174,13.682 2.836,13.778 2.41,13.778L1,13.778L1,10.01L2.173,10.01ZM5.62,9.955C5.855,9.955 6.063,9.998 6.243,10.084C6.424,10.17 6.564,10.29 6.664,10.445C6.763,10.6 6.813,10.777 6.813,10.976C6.813,11.15 6.783,11.313 6.722,11.465C6.661,11.617 6.566,11.773 6.438,11.933C6.31,12.093 6.084,12.32 5.761,12.616L5.277,13.072L5.277,13.108L6.919,13.108L6.919,13.778L4.284,13.778L4.284,13.224L5.23,12.268L5.289,12.208C5.536,11.953 5.7,11.774 5.779,11.671C5.865,11.56 5.927,11.458 5.965,11.363C6.003,11.268 6.022,11.17 6.022,11.069C6.022,10.918 5.98,10.805 5.897,10.731C5.813,10.657 5.702,10.62 5.563,10.62C5.417,10.62 5.275,10.654 5.138,10.721C5,10.788 4.857,10.884 4.707,11.007L4.274,10.494L4.342,10.437C4.498,10.309 4.629,10.216 4.735,10.159C4.858,10.094 4.991,10.044 5.135,10.008C5.279,9.973 5.441,9.955 5.62,9.955ZM8.733,10.01L8.832,10.01C9.316,10.019 9.671,10.095 9.898,10.238C10.139,10.39 10.26,10.632 10.26,10.963C10.26,11.189 10.207,11.373 10.101,11.518C9.996,11.662 9.855,11.749 9.68,11.778L9.68,11.804L9.749,11.821C9.952,11.877 10.101,11.971 10.196,12.103C10.302,12.249 10.355,12.443 10.355,12.685C10.355,13.029 10.231,13.297 9.983,13.49C9.734,13.682 9.397,13.778 8.971,13.778L7.561,13.778L7.561,10.01L8.733,10.01ZM2.294,12.136L1.799,12.136L1.799,13.119L2.32,13.119C2.54,13.119 2.702,13.076 2.807,12.992C2.912,12.908 2.964,12.779 2.964,12.606C2.964,12.293 2.741,12.136 2.294,12.136ZM8.855,12.136L8.36,12.136L8.36,13.119L8.88,13.119C9.1,13.119 9.263,13.076 9.368,12.992C9.473,12.908 9.525,12.779 9.525,12.606C9.525,12.293 9.302,12.136 8.855,12.136ZM20.041,10.491C20.142,10.491 20.237,10.54 20.295,10.622L21.377,12.143C21.445,12.238 21.453,12.364 21.4,12.467C21.346,12.571 21.239,12.637 21.122,12.637L18.974,12.637C18.802,12.637 18.662,12.497 18.662,12.324L18.662,10.803C18.662,10.631 18.802,10.491 18.974,10.491L20.041,10.491ZM19.88,11.116L19.287,11.116L19.287,12.012L20.517,12.012L19.88,11.116ZM2.219,10.664L1.799,10.664L1.799,11.502L2.263,11.502C2.48,11.502 2.637,11.469 2.734,11.402C2.831,11.335 2.879,11.224 2.879,11.069C2.879,10.925 2.826,10.821 2.721,10.758C2.615,10.696 2.448,10.664 2.219,10.664ZM8.78,10.664L8.36,10.664L8.36,11.502L8.824,11.502C9.04,11.502 9.197,11.469 9.294,11.402C9.391,11.335 9.44,11.224 9.44,11.069C9.44,10.925 9.387,10.821 9.281,10.758C9.176,10.696 9.009,10.664 8.78,10.664ZM16.294,10.758C16.406,10.757 16.511,10.816 16.568,10.913C16.624,11.01 16.624,11.131 16.568,11.228C16.511,11.325 16.406,11.384 16.294,11.383L11.828,11.383C11.716,11.384 11.611,11.325 11.555,11.228C11.498,11.131 11.498,11.01 11.555,10.913C11.611,10.816 11.716,10.757 11.828,10.758L16.294,10.758ZM16.294,9.356C16.406,9.355 16.511,9.414 16.568,9.511C16.624,9.609 16.624,9.729 16.568,9.826C16.511,9.923 16.406,9.982 16.294,9.981L13.23,9.981C13.118,9.982 13.013,9.923 12.956,9.826C12.9,9.729 12.9,9.609 12.956,9.511C13.013,9.414 13.118,9.355 13.23,9.356L16.294,9.356Z"
-            },
-            {
-                "name": "isa-box-out",
-                "data": "M21.493,7.072L18.338,1.618C18.118,1.237 17.707,1 17.267,1L6.734,1C6.293,1 5.882,1.237 5.661,1.62L2.551,7.016C2.523,7.065 2.502,7.115 2.489,7.167C2.445,7.286 2.421,7.413 2.421,7.546L2.421,21.484C2.421,22.32 3.101,23 3.937,23L20.063,23C20.899,23 21.579,22.32 21.579,21.484L21.579,7.496C21.579,7.476 21.579,7.458 21.577,7.44C21.587,7.315 21.56,7.188 21.493,7.072ZM20.289,21.484C20.289,21.609 20.189,21.71 20.063,21.71L3.937,21.71C3.811,21.71 3.711,21.609 3.711,21.484L3.711,7.741L20.289,7.741L20.289,21.484ZM12.782,9.731C12.739,9.668 12.688,9.608 12.628,9.553C12.548,9.482 12.46,9.427 12.367,9.388C12.249,9.338 12.125,9.314 12,9.315C11.776,9.313 11.552,9.392 11.372,9.553C11.313,9.608 11.261,9.668 11.218,9.731L7.59,13.762C7.246,14.143 7.277,14.73 7.658,15.073C8.039,15.416 8.627,15.385 8.97,15.005L11.065,12.677L11.065,19.579C11.065,20.091 11.48,20.508 11.994,20.508C12.506,20.508 12.921,20.091 12.921,19.579L12.921,12.662L15.031,15.005C15.373,15.385 15.961,15.416 16.342,15.073C16.723,14.73 16.754,14.143 16.411,13.762L12.782,9.731ZM12.666,2.29L17.237,2.29L19.644,6.452L12.666,6.452L12.666,2.29ZM6.764,2.29L11.378,2.29L11.378,6.452L4.364,6.452L6.764,2.29Z"
-            },
-            {
-                "name": "isa-download",
-                "data": "M12,23C18.071,23 23,18.071 23,12C23,5.929 18.071,1 12,1C5.929,1 1,5.929 1,12C1,18.071 5.929,23 12,23ZM12,20.412C7.358,20.412 3.588,16.642 3.588,12C3.588,7.358 7.358,3.588 12,3.588C16.642,3.588 20.412,7.358 20.412,12C20.412,16.642 16.642,20.412 12,20.412ZM10.958,13.034L10.958,8.541C10.958,7.956 11.429,7.487 12,7.487C12.571,7.487 13.043,7.956 13.043,8.541L13.043,13.034L14.341,11.701C14.547,11.491 14.815,11.388 15.085,11.388C15.353,11.388 15.622,11.491 15.828,11.701C16.225,12.11 16.225,12.77 15.828,13.179L12.743,16.344C12.333,16.765 11.667,16.765 11.257,16.344C11.257,16.344 8.173,13.179 8.172,13.179C7.775,12.77 7.776,12.11 8.173,11.701C8.378,11.491 8.647,11.387 8.916,11.387L8.967,11.388C9.219,11.401 9.467,11.504 9.659,11.701L10.958,13.034Z"
-            },
-            {
-                "name": "mat-info",
-                "data": "M11 17h2v-6h-2Zm1-8q.425 0 .713-.288Q13 8.425 13 8t-.287-.713Q12.425 7 12 7t-.712.287Q11 7.575 11 8t.288.712Q11.575 9 12 9Zm0 13q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z"
-            },
-            {
-                "name": "UNKNOWN",
-                "data": ""
-            },
-            {
-                "name": "clipboard-check-outline",
-                "data": "M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M7.5,13.5L9,12L11,14L15.5,9.5L17,11L11,17L7.5,13.5Z"
-            },
-            {
-                "name": "shape-outline",
-                "data": "M11,13.5V21.5H3V13.5H11M9,15.5H5V19.5H9V15.5M12,2L17.5,11H6.5L12,2M12,5.86L10.08,9H13.92L12,5.86M17.5,13C20,13 22,15 22,17.5C22,20 20,22 17.5,22C15,22 13,20 13,17.5C13,15 15,13 17.5,13M17.5,15A2.5,2.5 0 0,0 15,17.5A2.5,2.5 0 0,0 17.5,20A2.5,2.5 0 0,0 20,17.5A2.5,2.5 0 0,0 17.5,15Z"
-            },
-            {
-                "name": "bug-outline",
-                "data": "M20,8H17.19C16.74,7.2 16.12,6.5 15.37,6L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.05,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6C7.87,6.5 7.26,7.21 6.81,8H4V10H6.09C6.03,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.03,15.67 6.09,16H4V18H6.81C8.47,20.87 12.14,21.84 15,20.18C15.91,19.66 16.67,18.9 17.19,18H20V16H17.91C17.97,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.97,10.33 17.91,10H20V8M16,15A4,4 0 0,1 12,19A4,4 0 0,1 8,15V11A4,4 0 0,1 12,7A4,4 0 0,1 16,11V15M14,10V12H10V10H14M10,14H14V16H10V14Z"
-            },
-            {
-                "name": "mat-remove",
-                "data": "M6 13.575q-.65 0-1.112-.463-.463-.462-.463-1.112 0-.65.463-1.113.462-.462 1.112-.462h12q.65 0 1.113.462.462.463.462 1.113 0 .65-.462 1.112-.463.463-1.113.463Z"
-            },
-            {
-                "name": "menu",
-                "data": "M120 816v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "notifications",
-                "data": "M160 856v-80h80V496q0-83 50-147.5T420 264v-28q0-25 17.5-42.5T480 176q25 0 42.5 17.5T540 236v28q80 20 130 84.5T720 496v280h80v80H160Zm320 120q-33 0-56.5-23.5T400 896h160q0 33-23.5 56.5T480 976Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "swap-horiz",
-                "data": "M280 896 80 696l200-200 56 57-103 103h287v80H233l103 103-56 57Zm400-240-56-57 103-103H440v-80h287L624 313l56-57 200 200-200 200Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "import-contacts",
-                "data": "M260 736q47 0 91.5 10.5T440 778V384q-41-24-87-36t-93-12q-36 0-71.5 7T120 364v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700 736q36 0 70.5 6t69.5 18V364q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100 858q-21 11-40.5-1T40 822V340q0-11 5.5-21T62 304q46-24 96-36t102-12q58 0 113.5 15T480 316q51-30 106.5-45T700 256q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700 816q-60 0-116 21t-104 59ZM280 562Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "add",
-                "data": "M440 856V616H200v-80h240V296h80v240h240v80H520v240h-80Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "logout",
-                "data": "M189 956q-43.725 0-74.863-31.138Q83 893.725 83 850V302q0-43.725 31.137-74.862Q145.275 196 189 196h286v106H189v548h286v106H189Zm448-140-76-78 110-110H351V522h320L561 412l76-76 240 240-240 240Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "receipt-long",
-                "data": "M235 1014q-60 0-103-43T89 868V714h122V146l66 66 66-66 66 66 66-66 66 66 66-66 66 66 66-66 66 66 66-66v722q0 60-43 103t-103 43H235Zm490-106q17 0 28.5-11.5T765 868V296H317v418h368v154q0 17 11.5 28.5T725 908ZM349 472V366h252v106H349Zm0 138V504h252v106H349Zm329-138q-22 0-37.5-15.5T625 419q0-22 15.5-37.5T678 366q22 0 37.5 15.5T731 419q0 22-15.5 37.5T678 472Zm0 138q-22 0-37.5-15.5T625 557q0-22 15.5-37.5T678 504q22 0 37.5 15.5T731 557q0 22-15.5 37.5T678 610ZM235 908h344v-88H195v48q0 17 11.5 28.5T235 908Zm-40 0v-88 88Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "person",
-                "data": "M480 576q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160 896V784q0-34 17.5-62.5T224 678q62-31 126-46.5T480 616q66 0 130 15.5T736 678q29 15 46.5 43.5T800 784v112H160Zm80-80h480v-32q0-11-5.5-20T700 750q-54-27-109-40.5T480 696q-56 0-111 13.5T260 750q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560 416q0-33-23.5-56.5T480 336q-33 0-56.5 23.5T400 416q0 33 23.5 56.5T480 496Zm0-80Zm0 400Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "deployed-code",
-                "data": "m200 734 240 139V599L200 460v274Zm320 139 240-139V460L520 599v274ZM243 393l237 137 237-137-237-137-237 137ZM120 781V417q0-22 10.5-40t29.5-29l280-161q19-11 40-11t40 11l280 161q19 11 29.5 29t10.5 40v318q0 22-10.5 40T800 804L520 965q-19 11-40 11t-40-11L120 781Zm360-205Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "unarchive",
-                "data": "M200 936q-33 0-56.5-23.5T120 856V356q0-15 5-27t13-23l56-68q8-11 20-16.5t26-5.5h480q14 0 26 5.5t20 16.5l56 68q8 11 13 23t5 27v500q0 33-23.5 56.5T760 936H200Zm16-600h528l-34-40H250l-34 40Zm-16 80v440h560V416H200Zm240 400h80V648l64 64 56-56-160-160-160 160 56 56 64-64v168Zm-240 40h560-560Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "arrow-back",
-                "data": "M480 896 160 576l320-320 57 56-224 224h487v80H313l224 224-57 56Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "arrow-forward",
-                "data": "m480 896-57-56 224-224H160v-80h487L423 312l57-56 320 320-320 320Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "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"
-            }, {
-                "name": "isa-abholfach",
-                "data": "M12.25,9.15l4.688,10.054l2.266,-1.057l-5.072,-10.876l-1.882,0.878l-0,-3.149l-2.5,-0l-0,14l2.5,0l-0,-9.85Zm-6.5,-2.15l-0,12l2.5,0l-0,-12l-2.5,0Z"
-            },
-            {
-                "name": "keyboard-arrow-down",
-                "data": "M480-344 240-584l43-43 197 197 197-197 43 43-240 240Z",
-                "viewBox": "0 -960 960 960"
-            },
-            {
-                "name": "assignment-return",
-                "data": "m479-333 43-43-74-74h182v-60H448l74-74-43-43-147 147 147 147ZM180-120q-24.75 0-42.375-17.625T120-180v-600q0-24.75 17.625-42.375T180-840h205q5-35 32-57.5t63-22.5q36 0 63 22.5t32 57.5h205q24.75 0 42.375 17.625T840-780v600q0 24.75-17.625 42.375T780-120H180Zm0-60h600v-600H180v600Zm300-617q14 0 24.5-10.5T515-832q0-14-10.5-24.5T480-867q-14 0-24.5 10.5T445-832q0 14 10.5 24.5T480-797ZM180-180v-600 600Z",
-                "viewBox": "0 -960 960 960"
-            },
-            {
-                "name": "dashboard",
-                "data": "M510-570v-270h330v270H510ZM120-450v-390h330v390H120Zm390 330v-390h330v390H510Zm-390 0v-270h330v270H120Zm60-390h210v-270H180v270Zm390 330h210v-270H570v270Zm0-450h210v-150H570v150ZM180-180h210v-150H180v150Zm210-330Zm180-120Zm0 180ZM390-330Z",
-                "viewBox": "0 -960 960 960"
-            },
-            {
-                "name": "shopping-cart",
-                "data": "M286.788-81Q257-81 236-102.212q-21-21.213-21-51Q215-183 236.212-204q21.213-21 51-21Q317-225 338-203.788q21 21.213 21 51Q359-123 337.788-102q-21.213 21-51 21Zm400 0Q657-81 636-102.212q-21-21.213-21-51Q615-183 636.212-204q21.213-21 51-21Q717-225 738-203.788q21 21.213 21 51Q759-123 737.788-102q-21.213 21-51 21ZM235-741l110 228h288l125-228H235Zm-30-60h589.074q22.964 0 34.945 21Q841-759 829-738L694-495q-11 19-28.559 30.5Q647.881-453 627-453H324l-56 104h491v60H277q-42 0-60.5-28t.5-63l64-118-152-322H51v-60h117l37 79Zm140 288h288-288Z",
-                "viewBox": "0 -960 960 960"
-            },
-            {
-                "name": "shopping-cart-bold",
-                "data": "M286.788-70Q257-70 236-91.212q-21-21.213-21-51Q215-172 236.212-193q21.213-21 51-21Q317-214 338-192.788q21 21.213 21 51Q359-112 337.788-91q-21.213 21-51 21Zm400 0Q657-70 636-91.212q-21-21.213-21-51Q615-172 636.212-193q21.213-21 51-21Q717-214 738-192.788q21 21.213 21 51Q759-112 737.788-91q-21.213 21-51 21ZM254-730l93 194h285l105-194H254Zm-42-82h560.074q36.176 0 55.051 32t.875 65L710-501q-13 21-32.508 34.5-19.509 13.5-44.63 13.5H337l-49 93h482v82H277q-50 0-71.5-34t1.5-74l61-112-146-311H40v-82h135l37 79Zm135 276h285-285Z",
-                "viewBox": "0 -960 960 960"
-            }
-            
-        ],
-        "aliases": [
-            {
-                "alias": "d-account",
-                "name": "account"
-            },
-            {
-                "alias": "d-no-account",
-                "name": "package-variant-closed"
-            },
-            {
-                "name": "isa-audio",
-                "alias": "AU"
-            },
-            {
-                "name": "isa-audio",
-                "alias": "CAS"
-            },
-            {
-                "name": "isa-audio",
-                "alias": "DL"
-            },
-            {
-                "name": "isa-audio",
-                "alias": "KAS"
-            },
-            {
-                "name": "isa-hard-cover",
-                "alias": "BUCH"
-            },
-            {
-                "name": "isa-hard-cover",
-                "alias": "GEB"
-            },
-            {
-                "name": "isa-hard-cover",
-                "alias": "HC"
-            },
-            {
-                "name": "isa-hard-cover",
-                "alias": "KT"
-            },
-            {
-                "name": "isa-ebook",
-                "alias": "EB"
-            },
-            {
-                "name": "isa-non-book",
-                "alias": "GLO"
-            },
-            {
-                "name": "isa-non-book",
-                "alias": "HDL"
-            },
-            {
-                "name": "isa-non-book",
-                "alias": "NB"
-            },
-            {
-                "name": "isa-non-book",
-                "alias": "SPL"
-            },
-            {
-                "name": "isa-calendar",
-                "alias": "KA"
-            },
-            {
-                "name": "isa-scroll",
-                "alias": "MA"
-            },
-            {
-                "name": "isa-software",
-                "alias": "SW"
-            },
-            {
-                "name": "isa-soft-cover",
-                "alias": "TB"
-            },
-            {
-                "name": "isa-video",
-                "alias": "VI"
-            },
-            {
-                "name": "isa-news-paper",
-                "alias": "ZS"
-            }
-        ]
-    }
+    "@shared/icon": "/assets/icons.json"
 }
\ No newline at end of file
diff --git a/apps/isa-app/src/config/config.production.json b/apps/isa-app/src/config/config.production.json
index 09beac46c..2a5b7e4eb 100644
--- a/apps/isa-app/src/config/config.production.json
+++ b/apps/isa-app/src/config/config.production.json
@@ -70,5 +70,6 @@
   "checkForUpdates": 3600000,
   "licence": {
     "scandit": "AfHi/mY+RbwJD5nC7SuWn3I14pFUOfSbQ2QG//4aV3zWQjwix30kHqsqraA8ZiipDBql8YlwIyV6VPBMUiAX4s9YHDxHHsWwq2BUB3ImzDEcU1jmMH/5yakGUYpCQ68D0iZ8SG9sS0QBb3iFdCHc1r9DFr1cMTxM7zOvb/AUoIVmieHZXnx9ioUgCvczsLiuX3hwvTW3lhbvJ4uUyqTWK4sWFVwoY4AIWSFrPwwrkV2DksMKT5fMJT3GWgPypvTIGwWvpRfLWwKlc1Z3ckyb84khsnaWD2wr+hdgu/K8YIMmgGszm5KIZ/G05YfDNZtQ4jby+5RZvQwWR8rxM35rJgf73OkMSpuL9jw3T0TTAlvpkGRLzVVuCw9VjlBLqfPNEZ6VsEwFuAla9IYUvFHCsjypg2J6UpxHXrTYmbsSu5Jm8frVfS5znPPTO9D/4rF6ZVv2PxY9PgUgJUvwMa/VMc/nse3RRRf8RGT4rUItfJDFO8pujD76vVEWq/KixQRoMdLgDLyxhsFVftkxqhZhyEfFZzsEy49LSojJ28vpHpBWLeCQBmnZ7JZ4C5yOQiqSQV/assBq2zJN2q+vCDp8qy5j1rED1SX5Ec7JpgpgnU4chLIf5Zn7bP/hNGT3pEYBuXeDXXN8ke1pcc3fc3m0FysDG0o56XVCUqImZ8Ezi8eujZciKDrWbtljhKTj7cnfuJx0sVHF6Bh5i4YfgA/Z+NL+MtH2EVIF67e6hEz6PWYTcoh3ybBaJfxb2FNvGJutNKg04GwMhYq6K2IddBt0fDiBt0SGM0oSBlUP3DKCUmXcf2a6ASbrcqv6Wz1jHt0pY4U8bEpg7qSbW3VDyvdPgyQ="
-  }
+  },
+  "@shared/icon": "/assets/icons.json"
 }
\ No newline at end of file
diff --git a/apps/isa-app/src/config/config.staging.json b/apps/isa-app/src/config/config.staging.json
index 987c83d3a..03fbfcec8 100644
--- a/apps/isa-app/src/config/config.staging.json
+++ b/apps/isa-app/src/config/config.staging.json
@@ -70,5 +70,6 @@
   "checkForUpdates": 3600000,
   "licence": {
     "scandit": "AfHi/mY+RbwJD5nC7SuWn3I14pFUOfSbQ2QG//4aV3zWQjwix30kHqsqraA8ZiipDBql8YlwIyV6VPBMUiAX4s9YHDxHHsWwq2BUB3ImzDEcU1jmMH/5yakGUYpCQ68D0iZ8SG9sS0QBb3iFdCHc1r9DFr1cMTxM7zOvb/AUoIVmieHZXnx9ioUgCvczsLiuX3hwvTW3lhbvJ4uUyqTWK4sWFVwoY4AIWSFrPwwrkV2DksMKT5fMJT3GWgPypvTIGwWvpRfLWwKlc1Z3ckyb84khsnaWD2wr+hdgu/K8YIMmgGszm5KIZ/G05YfDNZtQ4jby+5RZvQwWR8rxM35rJgf73OkMSpuL9jw3T0TTAlvpkGRLzVVuCw9VjlBLqfPNEZ6VsEwFuAla9IYUvFHCsjypg2J6UpxHXrTYmbsSu5Jm8frVfS5znPPTO9D/4rF6ZVv2PxY9PgUgJUvwMa/VMc/nse3RRRf8RGT4rUItfJDFO8pujD76vVEWq/KixQRoMdLgDLyxhsFVftkxqhZhyEfFZzsEy49LSojJ28vpHpBWLeCQBmnZ7JZ4C5yOQiqSQV/assBq2zJN2q+vCDp8qy5j1rED1SX5Ec7JpgpgnU4chLIf5Zn7bP/hNGT3pEYBuXeDXXN8ke1pcc3fc3m0FysDG0o56XVCUqImZ8Ezi8eujZciKDrWbtljhKTj7cnfuJx0sVHF6Bh5i4YfgA/Z+NL+MtH2EVIF67e6hEz6PWYTcoh3ybBaJfxb2FNvGJutNKg04GwMhYq6K2IddBt0fDiBt0SGM0oSBlUP3DKCUmXcf2a6ASbrcqv6Wz1jHt0pY4U8bEpg7qSbW3VDyvdPgyQ="
-  }
+  },
+  "@shared/icon": "/assets/icons.json"
 }
\ No newline at end of file
diff --git a/apps/isa-app/src/config/config.test.json b/apps/isa-app/src/config/config.test.json
index 1108ca360..561f81f40 100644
--- a/apps/isa-app/src/config/config.test.json
+++ b/apps/isa-app/src/config/config.test.json
@@ -72,324 +72,5 @@
     "licence": {
         "scandit": "AQZyKCc+BEkNL00Y3h3FjawGLF+INUj7cVb0My91hl8ffiW873T8FTV1k4TIZJx5RwcJlYxhgsxHVcnM4AJgSwJhbAfxJmP/3XGijLlLp3XUIRjQwFtf7UlZAFZ7Vrt1/WSf7kxxrFQ2SE2AQwLqPg9DL+hHEfd4xT/15n8p2q7qUlCKLsV6jF12Pd7koFNSWNL3ZIkRtd1ma99/321dnwAJHFGXqWg5nprJ7sYtqUqNQ8Er9SlvKbhnw3AipHzKpz0O3oNfUsr6NlZivRBhMhCZLo5WpXo1m9uIU8zLEWMNDJ+wGUctcGxE3eCptP2zLXUgxxjB+0EXOUtT/GWUc/Ip61CMiyUf7Paz026E2eYil2yWgfkTP5CUgDMNGZFuAA1T5PhB9FRW51CjAIvwOKVMCvfixJiVoUsXHnWH2ZnXqtbDR/uEZBE7OKoBlaPL4G3Lvgdqym5EjROAztUXb6wOmVDiGzzqgizyZnIcxFBSKJAownGj9Vh4/Y/Ag1xzGzNtjz3ngSRfMfIIq/q2Q51uiLiv7mBVliPvPWMUTfTjnqnK/OSBlR2ID+COJqnUKpQMedPyOT3IMznmM6gQCmyYO5KE0MkfhFh6+pdNi6oJM2iZsxK1Z1V+GRSOIwrJEoajjDJkh439XjXk8NExFvplrLjK/oL/dsHIZiG6U5GVWW92kGkuXkJCeUz1CET3paxbGqwrd53r5d6gFABbC12CtcP2JeH4YYCpHYyPQacf0prj9Hdq3wDztShC9tH+4UQS/GbaDHKcS1ANIyPuTxHmBFtPuCJ9Uagy5QBEc8eAz2nfsbfaUxYzco6u/zhNsFbqp6zgQIxs5OcqDQ=="
     },
-    "@ui/icon": {
-        "fallback": "",
-        "viewBox": "0 0 24 24",
-        "icons": [
-            {
-                "name": "account",
-                "data": "M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"
-            },
-            {
-                "name": "package-variant-closed",
-                "data": "M21,16.5C21,16.88 20.79,17.21 20.47,17.38L12.57,21.82C12.41,21.94 12.21,22 12,22C11.79,22 11.59,21.94 11.43,21.82L3.53,17.38C3.21,17.21 3,16.88 3,16.5V7.5C3,7.12 3.21,6.79 3.53,6.62L11.43,2.18C11.59,2.06 11.79,2 12,2C12.21,2 12.41,2.06 12.57,2.18L20.47,6.62C20.79,6.79 21,7.12 21,7.5V16.5M12,4.15L10.11,5.22L16,8.61L17.96,7.5L12,4.15M6.04,7.5L12,10.85L13.96,9.75L8.08,6.35L6.04,7.5M5,15.91L11,19.29V12.58L5,9.21V15.91M19,15.91V9.21L13,12.58V19.29L19,15.91Z"
-            },
-            {
-                "name": "magnify",
-                "data": "M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"
-            },
-            {
-                "name": "barcode-scan",
-                "data": "M4,6H6V18H4V6M7,6H8V18H7V6M9,6H12V18H9V6M13,6H14V18H13V6M16,6H18V18H16V6M19,6H20V18H19V6M2,4V8H0V4A2,2 0 0,1 2,2H6V4H2M22,2A2,2 0 0,1 24,4V8H22V4H18V2H22M2,16V20H6V22H2A2,2 0 0,1 0,20V16H2M22,20V16H24V20A2,2 0 0,1 22,22H18V20H22Z"
-            },
-            {
-                "name": "arrow-left",
-                "data": "M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
-            },
-            {
-                "name": "chevron-right",
-                "data": "M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"
-            },
-            {
-                "name": "filter-variant",
-                "data": "M6,13H18V11H6M3,6V8H21V6M10,18H14V16H10V18Z"
-            },
-            {
-                "name": "close",
-                "data": "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
-            },
-            {
-                "name": "menu-down",
-                "data": "M7,10L12,15L17,10H7Z"
-            },
-            {
-                "name": "menu-up",
-                "data": "M7,15L12,10L17,15H7Z"
-            },
-            {
-                "name": "isa-audio",
-                "data": "M3.629,12.777C2.165,12.924 1,14.153 1,15.664L1,19.358C1,20.969 2.326,22.275 3.926,22.275L6.418,22.275C7.061,22.275 7.602,21.756 7.602,21.114L7.602,13.908C7.602,13.264 7.063,12.762 6.418,12.762L5.959,12.762C5.959,12.762 5.959,10.214 5.959,10.214C5.959,6.818 8.675,4.056 12.023,4.056C15.371,4.056 18.088,6.822 18.088,10.214C18.088,10.214 18.088,12.762 18.088,12.762C18.088,12.762 17.629,12.762 17.629,12.762C16.984,12.762 16.445,13.264 16.445,13.908C16.445,13.908 16.445,21.114 16.445,21.114C16.445,21.756 16.986,22.275 17.629,22.275L20.121,22.275C21.724,22.275 23,20.972 23,19.358C23,19.358 23,15.664 23,15.664C23,14.151 21.879,12.924 20.418,12.777L20.418,10.214C20.418,5.531 16.651,1.725 12.023,1.725C7.396,1.725 3.629,5.531 3.629,10.214L3.629,12.777ZM5.272,19.944L3.926,19.944C3.607,19.944 3.33,19.685 3.33,19.358C3.33,19.358 3.33,15.664 3.33,15.664C3.33,15.339 3.608,15.092 3.926,15.092C3.926,15.092 5.272,15.092 5.272,15.092L5.272,19.944ZM20.67,19.359C20.669,19.68 20.435,19.944 20.121,19.944C20.121,19.944 18.775,19.944 18.775,19.944C18.775,19.944 18.775,15.092 18.775,15.092C18.775,15.092 20.121,15.092 20.121,15.092C20.433,15.092 20.67,15.347 20.67,15.664L20.67,19.359Z"
-            },
-            {
-                "name": "isa-calendar",
-                "data": "M1,8.937C1,8.955 1,8.974 1.001,8.993C1,8.983 1,19.761 1,19.761C1,21.539 2.464,23 4.241,23C4.241,23 19.767,23 19.767,23C21.544,23 23,21.54 23,19.761L23,8.907C23,8.911 23,6.101 23,6.101C23,4.322 21.543,2.862 19.767,2.862C19.767,2.862 17.768,2.862 17.768,2.862C17.768,2.862 17.768,2.075 17.768,2.075C17.772,1.795 17.66,1.517 17.455,1.312L17.455,1.312C17.251,1.108 16.972,0.995 16.684,1C16.4,1.004 16.131,1.121 15.934,1.324C15.737,1.528 15.628,1.801 15.633,2.084C15.633,2.075 15.633,2.862 15.633,2.862C15.633,2.862 8.294,2.862 8.294,2.862C8.294,2.862 8.294,2.075 8.294,2.075C8.298,1.795 8.185,1.517 7.981,1.312L7.981,1.312C7.781,1.113 7.511,1 7.228,1L7.11,1.003C6.559,1.064 6.147,1.534 6.159,2.088C6.159,2.075 6.159,2.862 6.159,2.862C6.159,2.862 4.241,2.862 4.241,2.862C2.465,2.862 1,4.322 1,6.101L1,8.879L1.595,9.473L1,8.88L1,8.937ZM3.135,10.042L20.865,10.042C20.865,10.042 20.865,19.761 20.865,19.761C20.865,20.369 20.373,20.865 19.767,20.865L4.241,20.865C3.634,20.865 3.135,20.37 3.135,19.761L3.135,10.042ZM4.241,4.996L6.159,4.996C6.159,4.996 6.159,5.783 6.159,5.783C6.158,6.164 6.361,6.517 6.692,6.708C7.022,6.9 7.43,6.9 7.761,6.708C8.091,6.517 8.295,6.164 8.294,5.782C8.294,5.783 8.294,4.996 8.294,4.996C8.294,4.996 15.633,4.996 15.633,4.996C15.633,4.996 15.633,5.783 15.633,5.783C15.632,6.164 15.835,6.517 16.166,6.708C16.496,6.9 16.904,6.9 17.235,6.708C17.565,6.517 17.769,6.164 17.768,5.782C17.768,5.783 17.768,4.996 17.768,4.996C17.768,4.996 19.767,4.996 19.767,4.996C20.373,4.996 20.865,5.492 20.865,6.101C20.865,6.101 20.865,7.907 20.865,7.907C20.865,7.907 3.135,7.907 3.135,7.907C3.135,7.907 3.135,6.101 3.135,6.101C3.135,5.492 3.634,4.996 4.241,4.996Z"
-            },
-            {
-                "name": "isa-ebook",
-                "data": "M18.637,1L5.363,1C4.058,1 2.991,2.067 2.991,3.372L2.991,20.628C2.991,21.933 4.058,23 5.363,23C5.363,23 18.637,23 18.637,23C19.942,23 21.009,21.933 21.009,20.628L21.009,3.372C21.009,2.028 19.942,1 18.637,1ZM18.92,20.628C18.92,20.784 18.793,20.911 18.637,20.911C18.637,20.911 5.363,20.911 5.363,20.911C5.207,20.911 5.08,20.784 5.08,20.628L5.08,3.372C5.08,3.216 5.207,3.089 5.363,3.089C5.363,3.089 18.637,3.089 18.637,3.089C18.793,3.089 18.92,3.216 18.92,3.372C18.92,3.372 18.92,20.628 18.92,20.628ZM12,16.324C11.061,16.324 10.292,17.093 10.292,18.032C10.292,18.971 11.061,19.74 12,19.74C12.939,19.74 13.708,18.971 13.708,18.032C13.708,17.05 12.939,16.324 12,16.324ZM13.181,4.26L10.643,4.26C10.09,4.26 9.628,4.725 9.628,5.304C9.628,5.883 10.09,6.349 10.643,6.349L13.181,6.349C13.735,6.349 14.196,5.883 14.196,5.304C14.196,4.673 13.735,4.26 13.181,4.26Z"
-            },
-            {
-                "name": "isa-hard-cover",
-                "data": "M4.109,3.168L4.105,3.169C3.708,3.207 3.407,3.545 3.408,3.951C3.408,3.95 3.408,5.027 3.408,5.027L1.696,5.028C1.3,5.066 0.998,5.404 1,5.81C1,5.809 1,18.512 1,18.512C1,18.945 1.344,19.294 1.765,19.294L9.319,19.294C10.324,19.294 10.957,19.658 11.317,20.403L11.318,20.404C11.449,20.668 11.713,20.833 12,20.833C12.287,20.833 12.551,20.668 12.682,20.404L12.682,20.404C13.043,19.658 13.676,19.294 14.681,19.294L22.235,19.294C22.656,19.294 23,18.945 23,18.512L23,5.809C23,5.376 22.656,5.027 22.235,5.027L20.592,5.027C20.592,5.027 20.592,3.95 20.592,3.95C20.592,3.517 20.248,3.168 19.827,3.168L14.681,3.168C13.615,3.168 12.642,3.708 12,4.512C11.357,3.708 10.385,3.168 9.319,3.168L4.109,3.168ZM2.529,6.592L3.408,6.592C3.408,6.592 3.408,16.343 3.408,16.343C3.408,16.777 3.752,17.125 4.173,17.125L8.34,17.125C9.144,17.125 9.811,17.347 10.302,17.782C10.332,17.808 10.36,17.834 10.388,17.862C10.048,17.774 9.69,17.73 9.319,17.73C9.319,17.73 2.529,17.73 2.529,17.73L2.529,6.592ZM20.592,6.592L21.471,6.592C21.471,6.592 21.471,17.73 21.471,17.73C21.471,17.73 14.681,17.73 14.681,17.73C14.31,17.73 13.951,17.774 13.614,17.861C13.64,17.834 13.668,17.808 13.698,17.782C14.189,17.347 14.856,17.125 15.66,17.125L19.827,17.125C20.248,17.125 20.592,16.777 20.592,16.343L20.592,6.592ZM11.235,16.536C10.449,15.875 9.427,15.561 8.34,15.561L4.938,15.561L4.938,4.733L9.319,4.733C9.891,4.733 10.467,5.071 10.838,5.517C11.078,5.805 11.234,6.14 11.235,6.462L11.235,16.536ZM12.765,16.536L12.765,6.466C12.765,6.144 12.921,5.807 13.162,5.517C13.533,5.071 14.109,4.733 14.681,4.733L19.062,4.733C19.062,4.733 19.062,15.561 19.062,15.561C19.062,15.561 15.66,15.561 15.66,15.561C14.573,15.561 13.551,15.875 12.765,16.536ZM6.419,12.826L6.419,12.826C6.419,13.215 6.734,13.531 7.123,13.531C7.123,13.531 9.291,13.531 9.291,13.531C9.68,13.531 9.995,13.215 9.995,12.826L9.995,12.795C9.995,12.406 9.68,12.09 9.291,12.09L7.123,12.09C6.734,12.09 6.419,12.406 6.419,12.795L6.581,12.957C6.581,12.957 6.419,12.796 6.419,12.796L6.419,12.826ZM14.005,12.826L14.005,12.826C14.005,13.215 14.32,13.531 14.709,13.531C14.709,13.531 16.877,13.531 16.877,13.531C17.266,13.531 17.581,13.215 17.581,12.826L17.581,12.795C17.581,12.406 17.266,12.09 16.877,12.09L14.709,12.09C14.32,12.09 14.005,12.406 14.005,12.795L14.167,12.957C14.167,12.957 14.005,12.796 14.005,12.796L14.005,12.826ZM9.82,12.944L9.82,12.944L9.833,12.957L9.82,12.944ZM17.406,12.944L17.406,12.944L17.419,12.957L17.406,12.944ZM14.005,10.596L14.005,10.596C14.005,10.985 14.32,11.3 14.709,11.3L16.877,11.3C17.266,11.3 17.581,10.985 17.581,10.596L17.581,10.564C17.581,10.175 17.266,9.86 16.877,9.86L14.709,9.86C14.32,9.86 14.005,10.175 14.005,10.564L14.167,10.727C14.167,10.727 14.005,10.565 14.005,10.565L14.005,10.596ZM6.419,10.596L6.419,10.596C6.419,10.985 6.734,11.3 7.123,11.3L9.291,11.3C9.68,11.3 9.995,10.985 9.995,10.596L9.995,10.564C9.995,10.175 9.68,9.86 9.291,9.86L7.123,9.86C6.734,9.86 6.419,10.175 6.419,10.564L6.581,10.727C6.581,10.727 6.419,10.565 6.419,10.565L6.419,10.596ZM9.82,10.714L9.82,10.714L9.833,10.727L9.82,10.714ZM17.406,10.714L17.406,10.714L17.419,10.727L17.406,10.714ZM6.419,8.365L6.419,8.365C6.419,8.754 6.734,9.069 7.123,9.069L9.291,9.069C9.68,9.069 9.995,8.754 9.995,8.365L9.995,8.333C9.995,7.944 9.68,7.629 9.291,7.629L7.123,7.629C6.734,7.629 6.419,7.944 6.419,8.333L6.581,8.496C6.581,8.496 6.419,8.334 6.419,8.334L6.419,8.365ZM14.005,8.365L14.005,8.365C14.005,8.754 14.32,9.069 14.709,9.069L16.877,9.069C17.266,9.069 17.581,8.754 17.581,8.365L17.581,8.333C17.581,7.944 17.266,7.629 16.877,7.629L14.709,7.629C14.32,7.629 14.005,7.944 14.005,8.333L14.167,8.496C14.167,8.496 14.005,8.334 14.005,8.334L14.005,8.365ZM17.406,8.483L17.406,8.483L17.419,8.496L17.406,8.483ZM9.82,8.483L9.82,8.483L9.833,8.496L9.82,8.483Z"
-            },
-            {
-                "name": "isa-news-paper",
-                "data": "M12.022,5.892L12.009,5.896L3.216,1.669L3.19,1.66C3.008,1.599 2.769,1.609 2.582,1.722L2.585,1.72C2.386,1.831 2.238,2.09 2.238,2.301L2.238,2.534C2.092,2.518 1.946,2.55 1.8,2.648L1.764,2.672L1.734,2.702C1.614,2.822 1.506,3.053 1.506,3.232L1.506,3.626C1.415,3.652 1.332,3.698 1.262,3.759C1.074,3.897 1,4.096 1,4.3L1,19.336C1,19.675 1.207,19.943 1.543,20.014C1.543,20.014 11.9,22.378 11.9,22.378L12.099,22.378L22.457,20.039C22.793,19.968 23,19.701 23,19.361L23,4.326C23,4.138 22.896,3.941 22.772,3.816C22.695,3.739 22.599,3.682 22.494,3.651L22.494,3.187C22.494,2.973 22.413,2.765 22.2,2.622L22.2,2.622C22.062,2.53 21.924,2.497 21.787,2.507L21.787,2.301C21.787,2.094 21.673,1.874 21.467,1.736C21.277,1.61 21.025,1.597 20.835,1.66L20.809,1.669L12.022,5.892ZM21.624,18.812L12.688,20.842C12.688,20.842 12.688,7.204 12.688,7.204C12.688,7.204 21.624,5.174 21.624,5.174L21.624,18.812ZM2.376,5.174L11.312,7.204C11.312,7.204 11.312,20.842 11.312,20.842C11.312,20.842 2.376,18.812 2.376,18.812L2.376,5.174ZM17.542,11.044L16.99,11.541C16.99,11.541 16.484,11.339 16.484,11.339C16.139,11.2 15.734,11.358 15.592,11.7C15.595,11.694 15.262,12.42 15.262,12.42C15.262,12.42 14.545,12.556 14.545,12.556C14.202,12.625 13.991,12.894 13.991,13.236L14.03,13.94C14.03,13.94 13.356,14.451 13.356,14.451L13.335,14.472C13.202,14.605 13.107,14.758 13.107,14.957C13.107,15.091 13.139,15.276 13.261,15.416C13.26,15.415 13.553,15.787 13.553,15.787C13.553,15.787 13.192,16.454 13.192,16.454L13.18,16.49C13.124,16.658 13.124,16.825 13.18,16.993L13.198,17.048L13.23,17.097C13.342,17.264 13.464,17.364 13.632,17.42L14.083,17.541C14.083,17.541 14.067,18.064 14.067,18.064C14.067,18.284 14.149,18.492 14.362,18.635C14.558,18.766 14.76,18.802 14.956,18.74C14.956,18.74 15.494,18.582 15.494,18.582C15.494,18.582 15.707,18.928 15.707,18.928C15.802,19.143 16.036,19.29 16.271,19.29L16.336,19.29C16.527,19.283 16.668,19.222 16.801,19.044C16.8,19.045 17.322,18.575 17.322,18.575C17.322,18.575 17.828,18.778 17.828,18.778C18.169,18.915 18.569,18.763 18.715,18.428C18.715,18.428 19.044,17.748 19.044,17.748C19.044,17.748 19.767,17.612 19.767,17.612C20.111,17.543 20.321,17.273 20.321,16.931L20.282,16.227C20.282,16.227 20.956,15.716 20.956,15.716L20.977,15.695C21.11,15.562 21.205,15.41 21.205,15.21C21.205,15.077 21.173,14.891 21.052,14.751L20.759,14.381L21.121,13.713L21.133,13.677C21.188,13.509 21.188,13.342 21.133,13.174L21.114,13.119L21.082,13.071C20.97,12.903 20.848,12.803 20.681,12.747L20.23,12.626C20.23,12.626 20.245,12.103 20.245,12.103C20.245,11.883 20.164,11.675 19.95,11.532L19.95,11.532C19.754,11.402 19.552,11.366 19.356,11.427C19.356,11.427 18.818,11.585 18.818,11.585C18.818,11.585 18.606,11.239 18.606,11.239C18.521,11.048 18.324,10.909 18.116,10.882C17.9,10.833 17.689,10.904 17.542,11.044ZM9.936,8.583L3.9,7.206L3.851,7.206C3.673,7.206 3.507,7.244 3.379,7.349L3.394,7.339C3.191,7.481 3.113,7.685 3.113,7.894L3.113,17.133C3.113,17.472 3.32,17.739 3.656,17.811C3.656,17.811 9.691,19.188 9.691,19.188L9.791,19.188C9.905,19.188 10.024,19.148 10.137,19.091L10.162,19.079L10.184,19.064C10.397,18.922 10.479,18.713 10.479,18.5C10.479,18.5 10.479,9.261 10.479,9.261C10.479,8.922 10.272,8.654 9.936,8.583L9.936,8.583ZM9.078,17.652L4.463,16.608C4.463,16.608 4.463,8.767 4.463,8.767C4.463,8.767 9.078,9.811 9.078,9.811L9.078,17.652ZM17.942,16.814L17.736,17.269C17.736,17.269 17.427,17.154 17.427,17.154C17.21,17.081 16.932,17.097 16.722,17.307L16.734,17.296L16.479,17.522L16.406,17.399C16.276,17.203 16.012,17.079 15.817,17.079C15.723,17.079 15.634,17.09 15.543,17.144C15.547,17.142 15.468,17.164 15.468,17.164C15.468,17.164 15.468,17.064 15.468,17.064C15.511,16.724 15.253,16.436 14.972,16.36C14.972,16.36 14.87,16.332 14.87,16.332C14.87,16.332 15.014,16.071 15.014,16.071C15.147,15.803 15.095,15.543 14.965,15.349L14.786,15.114C14.786,15.114 15.164,14.827 15.164,14.827C15.353,14.693 15.443,14.445 15.443,14.248L15.415,13.786C15.415,13.786 15.848,13.694 15.848,13.694C16.123,13.674 16.283,13.478 16.357,13.329L16.576,12.848C16.576,12.848 16.885,12.963 16.885,12.963C17.08,13.028 17.336,12.989 17.524,12.864L17.545,12.849L17.853,12.587L17.931,12.717C18.068,12.922 18.405,13.068 18.677,13L18.849,12.952C18.849,12.952 18.845,13.043 18.845,13.043C18.798,13.388 19.057,13.68 19.34,13.756C19.34,13.756 19.434,13.783 19.434,13.783L19.294,14.029C19.165,14.288 19.217,14.548 19.347,14.742L19.526,14.977C19.526,14.977 19.148,15.264 19.148,15.264L19.151,15.262C18.959,15.399 18.869,15.647 18.869,15.843L18.897,16.305C18.897,16.305 18.407,16.41 18.407,16.41L18.383,16.418C18.191,16.482 18.017,16.627 17.942,16.814ZM14.098,11.073L14.191,11.073L20.49,9.606C20.806,9.537 21.004,9.283 21.004,8.958C21.004,8.958 21.004,7.344 21.004,7.344C21.004,7.167 20.909,6.979 20.792,6.861C20.642,6.707 20.416,6.634 20.19,6.701C20.193,6.7 13.957,8.153 13.957,8.153C13.641,8.221 13.443,8.475 13.443,8.801L13.443,10.414C13.443,10.592 13.539,10.779 13.655,10.898L13.705,10.949L13.768,10.981C13.876,11.036 13.99,11.073 14.098,11.073ZM17.542,11.044L17.531,11.055L17.542,11.044ZM14.752,9.325L19.696,8.162C19.696,8.162 19.696,8.412 19.696,8.412C19.696,8.412 14.752,9.574 14.752,9.574L14.752,9.325ZM21.473,3.574L21.553,3.973L21.554,3.973L21.554,3.541L21.473,3.574Z"
-            },
-            {
-                "name": "isa-non-book",
-                "data": "M11.215,5.282L9.049,1L6.884,5.282L6.884,7.704C6.081,8.012 5.499,8.385 5.14,8.786C4.803,9.164 4.641,9.575 4.641,10.002L4.641,19.873C4.641,20.614 5.183,21.34 6.218,21.883C7.504,22.558 9.591,23 12,23C14.408,23 16.495,22.558 17.781,21.888C18.818,21.349 19.359,20.627 19.359,19.896L19.359,10.025C19.359,9.262 18.765,8.483 17.588,7.918C17.588,7.918 17.588,1.437 17.588,1.437L13.257,1.437L13.257,6.947C12.577,6.901 11.896,6.891 11.215,6.917C11.215,6.917 11.215,5.282 11.215,5.282ZM12,21.506C9.805,21.506 8.048,21.14 6.994,20.626C6.691,20.478 6.453,20.322 6.293,20.156C6.207,20.067 6.14,19.987 6.14,19.896L6.14,11.96C7.444,12.655 9.564,13.129 12,13.129C14.436,13.129 16.556,12.655 17.859,11.96C17.86,11.96 17.86,19.873 17.86,19.873C17.86,19.968 17.793,20.054 17.705,20.147C17.545,20.315 17.307,20.473 17.004,20.622C15.951,21.141 14.194,21.506 12,21.506ZM13.257,8.446L13.257,11.606C12.864,11.635 12.448,11.658 12.008,11.659C12.008,11.659 11.215,11.63 11.215,11.63C11.215,11.63 11.215,8.43 11.215,8.43C11.895,8.396 12.577,8.401 13.257,8.446L13.257,8.446ZM9.047,4.321L9.716,5.644C9.716,5.644 9.716,11.502 9.716,11.502C9.267,11.44 8.822,11.353 8.383,11.242C8.383,11.242 8.383,5.622 8.383,5.622L9.047,4.321ZM16.089,11.122C15.652,11.256 15.206,11.362 14.756,11.439C14.756,11.439 14.756,5.731 14.756,5.731C14.756,5.731 16.089,5.731 16.089,5.731L16.089,11.122ZM6.884,9.354L6.884,10.721C6.7,10.626 6.543,10.524 6.416,10.418C6.257,10.286 6.14,10.166 6.14,10.025C6.14,9.887 6.261,9.775 6.418,9.649C6.546,9.546 6.702,9.447 6.884,9.354L6.884,9.354ZM17.86,10.025C17.86,10.127 17.779,10.214 17.678,10.312C17.65,10.339 17.62,10.365 17.588,10.392C17.588,10.391 17.588,9.659 17.588,9.659C17.62,9.685 17.65,9.712 17.678,9.739C17.779,9.837 17.86,9.923 17.86,10.025ZM16.089,2.931L16.089,4.238C16.089,4.238 14.756,4.238 14.756,4.238C14.756,4.238 14.756,2.931 14.756,2.931L16.089,2.931Z"
-            },
-            {
-                "name": "isa-scroll",
-                "data": "M20.88,16.904L20.88,4.048C20.88,2.365 19.515,1 17.831,1L4.048,1C2.365,1 1,2.365 1,4.048L1,7.096L5.241,7.096C5.241,7.096 5.241,19.952 5.241,19.952C5.241,21.635 6.606,23 8.289,23C8.289,23 19.952,23 19.952,23C21.635,23 23,21.635 23,19.952C23,19.952 23,16.904 23,16.904L20.88,16.904ZM9.482,19.952C9.482,20.61 8.947,21.145 8.289,21.145C7.631,21.145 7.096,20.61 7.096,19.952L7.096,4.048C7.096,3.623 7.007,3.221 6.848,2.856C6.847,2.855 17.831,2.855 17.831,2.855C18.489,2.855 19.024,3.39 19.024,4.048C19.024,4.048 19.024,16.904 19.024,16.904C19.024,16.904 9.482,16.904 9.482,16.904L9.482,19.952ZM21.145,19.952C21.145,20.61 20.61,21.145 19.952,21.145L11.088,21.145C11.248,20.779 11.337,20.377 11.337,19.952L11.337,18.759C11.337,18.759 21.145,18.759 21.145,18.759C21.145,18.759 21.145,19.952 21.145,19.952ZM5.241,5.241L2.855,5.241C2.855,5.241 2.855,4.048 2.855,4.048C2.855,3.39 3.39,2.855 4.048,2.855C4.706,2.855 5.241,3.39 5.241,4.048L5.241,5.241Z"
-            },
-            {
-                "name": "isa-soft-cover",
-                "data": "M18.963,17.967C19.451,17.954 19.842,17.555 19.842,17.064C19.842,17.064 19.842,1.904 19.842,1.904C19.842,1.405 19.437,1 18.938,1L6.154,1C5.047,1.005 4.154,1.905 4.158,3.011C4.158,3.009 4.158,18.545 4.158,18.545C4.16,19.862 5.226,20.928 6.542,20.93L7.479,20.93C7.479,20.93 7.479,22.095 7.479,22.095C7.477,22.443 7.68,22.764 7.997,22.914C8.315,23.064 8.691,23.016 8.961,22.791C8.96,22.792 9.643,22.226 9.643,22.226C9.643,22.226 10.324,22.788 10.324,22.788C10.592,23.011 10.968,23.059 11.286,22.909C11.604,22.759 11.806,22.438 11.804,22.087C11.804,22.09 11.804,20.925 11.804,20.925C11.804,20.925 18.938,20.925 18.938,20.925C19.437,20.925 19.842,20.521 19.842,20.021C19.842,19.531 19.451,19.132 18.964,19.118C18.665,19.094 18.434,18.844 18.434,18.543C18.434,18.247 18.657,18.001 18.948,17.969L18.963,17.967ZM9.287,20.217C9.513,20.12 9.77,20.12 9.997,20.217L9.997,19.449C9.997,19.449 9.287,19.449 9.287,19.449L9.287,20.217ZM7.684,17.973C7.556,18.128 7.479,18.328 7.479,18.545L7.479,19.125C7.479,19.125 6.53,19.125 6.53,19.125C6.305,19.135 6.105,19.027 5.996,18.845C5.886,18.663 5.886,18.435 5.996,18.252C6.105,18.07 6.305,17.962 6.518,17.972L7.684,17.973ZM16.626,19.12L11.804,19.12C11.804,19.12 11.804,18.545 11.804,18.545C11.804,18.328 11.727,18.128 11.6,17.973L16.628,17.973C16.533,18.349 16.533,18.744 16.626,19.12ZM6.543,16.16C6.35,16.161 6.16,16.185 5.975,16.232C5.975,16.232 5.975,3.007 5.975,3.007C5.974,2.902 6.054,2.816 6.156,2.808C6.165,2.807 18.035,2.807 18.035,2.807C18.035,2.807 18.035,16.16 18.035,16.16L6.543,16.16Z"
-            },
-            {
-                "name": "isa-video",
-                "data": "M12,23C18.075,23 23,18.075 23,12C23,5.925 18.075,1 12,1C5.925,1 1,5.925 1,12C1,18.075 5.925,23 12,23ZM12,2.784C17.09,2.784 21.216,6.91 21.216,12C21.216,17.09 17.09,21.216 12,21.216C6.91,21.216 2.784,17.09 2.784,12C2.784,6.91 6.91,2.784 12,2.784ZM15.786,10.998L9.84,7.431C9.566,7.262 9.226,7.26 8.941,7.42C8.655,7.581 8.492,7.875 8.492,8.197C8.492,8.197 8.492,15.332 8.492,15.332C8.492,15.652 8.66,15.946 8.943,16.107C9.079,16.187 9.231,16.224 9.384,16.224C9.545,16.224 9.706,16.179 9.84,16.098C9.84,16.098 15.786,12.531 15.786,12.531C16.059,12.372 16.222,12.077 16.222,11.764C16.222,11.451 16.059,11.157 15.782,10.996L15.786,10.998ZM10.276,13.755L10.276,9.769C10.276,9.769 13.598,11.764 13.598,11.764L10.276,13.755Z"
-            },
-            {
-                "name": "isa-software",
-                "data": "M12,23C18.075,23 23,18.075 23,12C23,5.925 18.075,1 12,1C5.925,1 1,5.925 1,12C1,18.075 5.925,23 12,23ZM12,21.248C6.892,21.248 2.752,17.108 2.752,12C2.752,6.892 6.892,2.752 12,2.752C17.108,2.752 21.248,6.892 21.248,12C21.248,17.108 17.108,21.248 12,21.248ZM11.991,16.481C14.526,16.481 16.589,14.418 16.589,11.884C16.589,9.349 14.526,7.286 11.991,7.286C9.456,7.286 7.393,9.349 7.393,11.884C7.393,14.418 9.456,16.481 11.991,16.481ZM11.991,9.065C13.528,9.065 14.758,10.294 14.758,11.831C14.758,13.368 13.528,14.598 11.991,14.598C10.454,14.598 9.224,13.368 9.224,11.831C9.224,10.294 10.454,9.065 11.991,9.065ZM11.991,14.153C13.229,14.153 14.261,13.122 14.261,11.884C14.261,10.646 13.229,9.614 11.991,9.614C10.753,9.614 9.721,10.646 9.721,11.884C9.721,13.122 10.753,14.153 11.991,14.153ZM11.991,11.257C12.337,11.257 12.618,11.538 12.618,11.884C12.618,12.23 12.337,12.511 11.991,12.511C11.645,12.511 11.364,12.23 11.364,11.884C11.364,11.538 11.645,11.257 11.991,11.257ZM15.795,4.606L15.927,4.081C17.745,5.06 19.191,6.645 20.03,8.509L20.249,8.995L18.673,9.671L18.46,9.207C17.76,7.682 16.609,6.361 15.126,5.578L15.342,5.692C15.342,5.692 14.909,4.866 14.909,4.866L15.217,4.294L15.53,4.818L15.611,4.668L15.615,4.651L15.619,4.653L15.679,4.542C15.717,4.563 15.756,4.585 15.795,4.606Z"
-            },
-            {
-                "name": "isa-shopping-bag",
-                "data": "M6.951,6.624L6.951,6.118C6.951,3.279 9.232,1 12.022,1C14.811,1 17.092,3.279 17.092,6.118L17.092,6.624L19.88,6.624C20.242,6.628 20.593,6.863 20.677,7.225C20.696,7.301 20.699,7.378 20.693,7.456L20.692,7.467L20.692,21.036C20.692,22.107 19.824,23 18.728,23L5.268,23C4.197,23 3.304,22.133 3.304,21.036L3.304,7.482C3.304,6.996 3.676,6.624 4.163,6.624L6.951,6.624ZM6.951,8.317L5.021,8.317L5.021,21.012C5.021,21.162 5.141,21.283 5.292,21.283L18.751,21.283C18.902,21.283 19.022,21.162 19.022,21.012L19.022,8.317L17.092,8.317L17.092,10.635C17.092,11.122 16.72,11.493 16.234,11.493C15.747,11.493 15.375,11.122 15.375,10.635L15.375,8.317L8.668,8.317L8.668,10.635C8.668,11.122 8.296,11.493 7.809,11.493C7.323,11.493 6.951,11.122 6.951,10.635L6.951,8.317ZM15.375,6.6L15.375,6.094C15.375,4.225 13.868,2.693 12.022,2.693C10.175,2.693 8.668,4.225 8.668,6.094L8.668,6.6L15.375,6.6Z"
-            },
-            {
-                "name": "isa-truck",
-                "data": "M2.594,5.338L2.595,5.331L14.918,5.331C15.872,5.331 16.655,6.101 16.655,7.034L16.655,8.275L19.667,8.276C19.88,8.277 20.08,8.378 20.205,8.548L22.827,12.107C22.879,12.165 22.921,12.231 22.95,12.304L22.957,12.316L22.962,12.337C22.964,12.345 22.967,12.353 22.969,12.359C22.996,12.446 23.006,12.537 22.996,12.626L22.996,15.665C22.996,16.447 22.34,17.096 21.538,17.096L21.467,17.096C21.145,18.008 20.259,18.669 19.222,18.669C18.185,18.669 17.298,18.008 16.977,17.096L8.627,17.096C8.306,18.008 7.419,18.669 6.381,18.669C5.344,18.669 4.458,18.008 4.136,17.096L2.737,17.096C1.783,17.096 1,16.325 1,15.393L1,7.035C1,6.149 1.706,5.41 2.594,5.338ZM6.435,15.323L6.381,15.323C5.802,15.323 5.338,15.773 5.338,16.344C5.338,16.344 5.338,16.347 5.338,16.346C5.34,16.912 5.802,17.36 6.381,17.36C6.955,17.36 7.413,16.921 7.425,16.368L7.425,16.342C7.425,15.789 6.989,15.349 6.435,15.323ZM19.222,15.322C19.802,15.322 20.265,15.772 20.265,16.342C20.265,16.909 19.801,17.36 19.222,17.36C18.642,17.36 18.178,16.909 18.178,16.342C18.178,15.772 18.642,15.322 19.222,15.322ZM15.324,15.787L15.324,7.035C15.324,6.814 15.143,6.641 14.918,6.641L2.737,6.641C2.511,6.641 2.33,6.814 2.33,7.035L2.33,15.393C2.33,15.613 2.511,15.787 2.737,15.787L4.077,15.787C4.332,14.773 5.271,14.013 6.381,14.013C7.492,14.013 8.431,14.773 8.687,15.787L15.324,15.787ZM19.447,9.751L19.327,9.587L16.655,9.585L16.655,15.787L16.917,15.787C17.173,14.773 18.111,14.012 19.222,14.012C20.332,14.012 21.272,14.773 21.527,15.787L21.538,15.787C21.609,15.787 21.665,15.733 21.665,15.665L21.665,12.762L21.32,12.294C21.425,12.482 21.429,12.713 21.326,12.907C21.212,13.123 20.984,13.26 20.736,13.26L17.353,13.26C16.985,13.26 16.687,12.967 16.687,12.605L16.687,10.262C16.687,9.9 16.985,9.607 17.353,9.607L19.032,9.607C19.185,9.607 19.331,9.659 19.447,9.751ZM6.967,10.866C6.727,10.863 6.505,10.987 6.384,11.189C6.263,11.394 6.263,11.647 6.384,11.852C6.505,12.055 6.727,12.178 6.967,12.175C6.964,12.175 13.997,12.175 13.997,12.175C14.235,12.178 14.456,12.055 14.577,11.852C14.699,11.647 14.699,11.394 14.577,11.189C14.456,10.987 14.235,10.863 13.995,10.866C13.997,10.866 6.964,10.866 6.964,10.866L6.967,10.866ZM18.018,10.916L18.018,11.951L19.442,11.951L18.69,10.916L18.018,10.916ZM9.174,8.705C8.935,8.703 8.712,8.826 8.592,9.029C8.47,9.234 8.47,9.486 8.592,9.691C8.712,9.894 8.935,10.017 9.174,10.015C9.172,10.015 13.997,10.015 13.997,10.015C14.235,10.017 14.456,9.894 14.577,9.691C14.699,9.486 14.699,9.234 14.577,9.029C14.456,8.826 14.235,8.703 13.995,8.705C13.997,8.705 9.172,8.705 9.172,8.705L9.174,8.705Z"
-            },
-            {
-                "name": "isa-b2b-truck",
-                "data": "M16.813,7.717C17.496,7.717 18.051,8.266 18.051,8.943L18.051,9.426C18.183,9.378 18.322,9.353 18.463,9.352L20.496,9.352C20.909,9.353 21.294,9.556 21.524,9.896L22.794,11.805C22.925,12.001 22.996,12.23 23,12.464L23,13.85C23,14.527 22.446,15.077 21.763,15.077L21.705,15.077C21.51,15.789 20.857,16.283 20.113,16.283C19.368,16.283 18.716,15.789 18.521,15.077L16.755,15.077C16.56,15.789 15.908,16.283 15.163,16.283C14.419,16.283 13.767,15.789 13.571,15.077L13.513,15.077C12.83,15.077 12.276,14.527 12.276,13.85L12.276,13.582C12.276,13.356 12.461,13.173 12.689,13.173C12.916,13.173 13.101,13.356 13.101,13.582L13.101,13.85C13.101,14.076 13.286,14.259 13.513,14.259L13.567,14.259C13.762,13.546 14.415,13.052 15.159,13.052C15.904,13.052 16.556,13.546 16.751,14.259L17.226,14.259L17.226,8.943C17.226,8.718 17.041,8.534 16.813,8.534L8.564,8.534C8.336,8.534 8.152,8.351 8.152,8.126C8.152,7.9 8.336,7.717 8.564,7.717L16.813,7.717ZM15.163,13.85C14.708,13.85 14.338,14.216 14.338,14.668L14.34,14.718C14.366,15.146 14.724,15.485 15.163,15.485C15.619,15.485 15.988,15.119 15.988,14.668C15.988,14.216 15.619,13.85 15.163,13.85ZM20.113,13.85C19.657,13.85 19.288,14.216 19.288,14.668L19.289,14.718C19.315,15.146 19.674,15.485 20.113,15.485C20.569,15.485 20.938,15.119 20.938,14.668C20.938,14.216 20.569,13.85 20.113,13.85ZM20.496,10.17L18.463,10.17C18.235,10.17 18.051,10.353 18.051,10.579L18.051,14.259L18.517,14.259C18.712,13.546 19.364,13.052 20.109,13.052C20.853,13.052 21.506,13.546 21.701,14.259L21.763,14.259C21.99,14.259 22.175,14.076 22.175,13.85L22.179,12.46C22.178,12.381 22.154,12.304 22.109,12.239L20.839,10.35C20.762,10.237 20.634,10.17 20.496,10.17ZM2.173,10.01L2.271,10.01C2.755,10.019 3.111,10.095 3.337,10.238C3.578,10.39 3.699,10.632 3.699,10.963C3.699,11.189 3.646,11.373 3.541,11.518C3.435,11.662 3.294,11.749 3.119,11.778L3.119,11.804L3.189,11.821C3.392,11.877 3.541,11.971 3.636,12.103C3.741,12.249 3.795,12.443 3.795,12.685C3.795,13.029 3.67,13.297 3.422,13.49C3.174,13.682 2.836,13.778 2.41,13.778L1,13.778L1,10.01L2.173,10.01ZM5.62,9.955C5.855,9.955 6.063,9.998 6.243,10.084C6.424,10.17 6.564,10.29 6.664,10.445C6.763,10.6 6.813,10.777 6.813,10.976C6.813,11.15 6.783,11.313 6.722,11.465C6.661,11.617 6.566,11.773 6.438,11.933C6.31,12.093 6.084,12.32 5.761,12.616L5.277,13.072L5.277,13.108L6.919,13.108L6.919,13.778L4.284,13.778L4.284,13.224L5.23,12.268L5.289,12.208C5.536,11.953 5.7,11.774 5.779,11.671C5.865,11.56 5.927,11.458 5.965,11.363C6.003,11.268 6.022,11.17 6.022,11.069C6.022,10.918 5.98,10.805 5.897,10.731C5.813,10.657 5.702,10.62 5.563,10.62C5.417,10.62 5.275,10.654 5.138,10.721C5,10.788 4.857,10.884 4.707,11.007L4.274,10.494L4.342,10.437C4.498,10.309 4.629,10.216 4.735,10.159C4.858,10.094 4.991,10.044 5.135,10.008C5.279,9.973 5.441,9.955 5.62,9.955ZM8.733,10.01L8.832,10.01C9.316,10.019 9.671,10.095 9.898,10.238C10.139,10.39 10.26,10.632 10.26,10.963C10.26,11.189 10.207,11.373 10.101,11.518C9.996,11.662 9.855,11.749 9.68,11.778L9.68,11.804L9.749,11.821C9.952,11.877 10.101,11.971 10.196,12.103C10.302,12.249 10.355,12.443 10.355,12.685C10.355,13.029 10.231,13.297 9.983,13.49C9.734,13.682 9.397,13.778 8.971,13.778L7.561,13.778L7.561,10.01L8.733,10.01ZM2.294,12.136L1.799,12.136L1.799,13.119L2.32,13.119C2.54,13.119 2.702,13.076 2.807,12.992C2.912,12.908 2.964,12.779 2.964,12.606C2.964,12.293 2.741,12.136 2.294,12.136ZM8.855,12.136L8.36,12.136L8.36,13.119L8.88,13.119C9.1,13.119 9.263,13.076 9.368,12.992C9.473,12.908 9.525,12.779 9.525,12.606C9.525,12.293 9.302,12.136 8.855,12.136ZM20.041,10.491C20.142,10.491 20.237,10.54 20.295,10.622L21.377,12.143C21.445,12.238 21.453,12.364 21.4,12.467C21.346,12.571 21.239,12.637 21.122,12.637L18.974,12.637C18.802,12.637 18.662,12.497 18.662,12.324L18.662,10.803C18.662,10.631 18.802,10.491 18.974,10.491L20.041,10.491ZM19.88,11.116L19.287,11.116L19.287,12.012L20.517,12.012L19.88,11.116ZM2.219,10.664L1.799,10.664L1.799,11.502L2.263,11.502C2.48,11.502 2.637,11.469 2.734,11.402C2.831,11.335 2.879,11.224 2.879,11.069C2.879,10.925 2.826,10.821 2.721,10.758C2.615,10.696 2.448,10.664 2.219,10.664ZM8.78,10.664L8.36,10.664L8.36,11.502L8.824,11.502C9.04,11.502 9.197,11.469 9.294,11.402C9.391,11.335 9.44,11.224 9.44,11.069C9.44,10.925 9.387,10.821 9.281,10.758C9.176,10.696 9.009,10.664 8.78,10.664ZM16.294,10.758C16.406,10.757 16.511,10.816 16.568,10.913C16.624,11.01 16.624,11.131 16.568,11.228C16.511,11.325 16.406,11.384 16.294,11.383L11.828,11.383C11.716,11.384 11.611,11.325 11.555,11.228C11.498,11.131 11.498,11.01 11.555,10.913C11.611,10.816 11.716,10.757 11.828,10.758L16.294,10.758ZM16.294,9.356C16.406,9.355 16.511,9.414 16.568,9.511C16.624,9.609 16.624,9.729 16.568,9.826C16.511,9.923 16.406,9.982 16.294,9.981L13.23,9.981C13.118,9.982 13.013,9.923 12.956,9.826C12.9,9.729 12.9,9.609 12.956,9.511C13.013,9.414 13.118,9.355 13.23,9.356L16.294,9.356Z"
-            },
-            {
-                "name": "isa-box-out",
-                "data": "M21.493,7.072L18.338,1.618C18.118,1.237 17.707,1 17.267,1L6.734,1C6.293,1 5.882,1.237 5.661,1.62L2.551,7.016C2.523,7.065 2.502,7.115 2.489,7.167C2.445,7.286 2.421,7.413 2.421,7.546L2.421,21.484C2.421,22.32 3.101,23 3.937,23L20.063,23C20.899,23 21.579,22.32 21.579,21.484L21.579,7.496C21.579,7.476 21.579,7.458 21.577,7.44C21.587,7.315 21.56,7.188 21.493,7.072ZM20.289,21.484C20.289,21.609 20.189,21.71 20.063,21.71L3.937,21.71C3.811,21.71 3.711,21.609 3.711,21.484L3.711,7.741L20.289,7.741L20.289,21.484ZM12.782,9.731C12.739,9.668 12.688,9.608 12.628,9.553C12.548,9.482 12.46,9.427 12.367,9.388C12.249,9.338 12.125,9.314 12,9.315C11.776,9.313 11.552,9.392 11.372,9.553C11.313,9.608 11.261,9.668 11.218,9.731L7.59,13.762C7.246,14.143 7.277,14.73 7.658,15.073C8.039,15.416 8.627,15.385 8.97,15.005L11.065,12.677L11.065,19.579C11.065,20.091 11.48,20.508 11.994,20.508C12.506,20.508 12.921,20.091 12.921,19.579L12.921,12.662L15.031,15.005C15.373,15.385 15.961,15.416 16.342,15.073C16.723,14.73 16.754,14.143 16.411,13.762L12.782,9.731ZM12.666,2.29L17.237,2.29L19.644,6.452L12.666,6.452L12.666,2.29ZM6.764,2.29L11.378,2.29L11.378,6.452L4.364,6.452L6.764,2.29Z"
-            },
-            {
-                "name": "isa-download",
-                "data": "M12,23C18.071,23 23,18.071 23,12C23,5.929 18.071,1 12,1C5.929,1 1,5.929 1,12C1,18.071 5.929,23 12,23ZM12,20.412C7.358,20.412 3.588,16.642 3.588,12C3.588,7.358 7.358,3.588 12,3.588C16.642,3.588 20.412,7.358 20.412,12C20.412,16.642 16.642,20.412 12,20.412ZM10.958,13.034L10.958,8.541C10.958,7.956 11.429,7.487 12,7.487C12.571,7.487 13.043,7.956 13.043,8.541L13.043,13.034L14.341,11.701C14.547,11.491 14.815,11.388 15.085,11.388C15.353,11.388 15.622,11.491 15.828,11.701C16.225,12.11 16.225,12.77 15.828,13.179L12.743,16.344C12.333,16.765 11.667,16.765 11.257,16.344C11.257,16.344 8.173,13.179 8.172,13.179C7.775,12.77 7.776,12.11 8.173,11.701C8.378,11.491 8.647,11.387 8.916,11.387L8.967,11.388C9.219,11.401 9.467,11.504 9.659,11.701L10.958,13.034Z"
-            },
-            {
-                "name": "mat-info",
-                "data": "M11 17h2v-6h-2Zm1-8q.425 0 .713-.288Q13 8.425 13 8t-.287-.713Q12.425 7 12 7t-.712.287Q11 7.575 11 8t.288.712Q11.575 9 12 9Zm0 13q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z"
-            },
-            {
-                "name": "UNKNOWN",
-                "data": ""
-            },
-            {
-                "name": "clipboard-check-outline",
-                "data": "M19,3H14.82C14.4,1.84 13.3,1 12,1C10.7,1 9.6,1.84 9.18,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5A2,2 0 0,0 19,3M12,3A1,1 0 0,1 13,4A1,1 0 0,1 12,5A1,1 0 0,1 11,4A1,1 0 0,1 12,3M7,7H17V5H19V19H5V5H7V7M7.5,13.5L9,12L11,14L15.5,9.5L17,11L11,17L7.5,13.5Z"
-            },
-            {
-                "name": "shape-outline",
-                "data": "M11,13.5V21.5H3V13.5H11M9,15.5H5V19.5H9V15.5M12,2L17.5,11H6.5L12,2M12,5.86L10.08,9H13.92L12,5.86M17.5,13C20,13 22,15 22,17.5C22,20 20,22 17.5,22C15,22 13,20 13,17.5C13,15 15,13 17.5,13M17.5,15A2.5,2.5 0 0,0 15,17.5A2.5,2.5 0 0,0 17.5,20A2.5,2.5 0 0,0 20,17.5A2.5,2.5 0 0,0 17.5,15Z"
-            },
-            {
-                "name": "bug-outline",
-                "data": "M20,8H17.19C16.74,7.2 16.12,6.5 15.37,6L17,4.41L15.59,3L13.42,5.17C12.96,5.06 12.5,5 12,5C11.5,5 11.05,5.06 10.59,5.17L8.41,3L7,4.41L8.62,6C7.87,6.5 7.26,7.21 6.81,8H4V10H6.09C6.03,10.33 6,10.66 6,11V12H4V14H6V15C6,15.34 6.03,15.67 6.09,16H4V18H6.81C8.47,20.87 12.14,21.84 15,20.18C15.91,19.66 16.67,18.9 17.19,18H20V16H17.91C17.97,15.67 18,15.34 18,15V14H20V12H18V11C18,10.66 17.97,10.33 17.91,10H20V8M16,15A4,4 0 0,1 12,19A4,4 0 0,1 8,15V11A4,4 0 0,1 12,7A4,4 0 0,1 16,11V15M14,10V12H10V10H14M10,14H14V16H10V14Z"
-            },
-            {
-                "name": "mat-remove",
-                "data": "M6 13.575q-.65 0-1.112-.463-.463-.462-.463-1.112 0-.65.463-1.113.462-.462 1.112-.462h12q.65 0 1.113.462.462.463.462 1.113 0 .65-.462 1.112-.463.463-1.113.463Z"
-            },
-            {
-                "name": "menu",
-                "data": "M120 816v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "notifications",
-                "data": "M160 856v-80h80V496q0-83 50-147.5T420 264v-28q0-25 17.5-42.5T480 176q25 0 42.5 17.5T540 236v28q80 20 130 84.5T720 496v280h80v80H160Zm320 120q-33 0-56.5-23.5T400 896h160q0 33-23.5 56.5T480 976Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "swap-horiz",
-                "data": "M280 896 80 696l200-200 56 57-103 103h287v80H233l103 103-56 57Zm400-240-56-57 103-103H440v-80h287L624 313l56-57 200 200-200 200Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "import-contacts",
-                "data": "M260 736q47 0 91.5 10.5T440 778V384q-41-24-87-36t-93-12q-36 0-71.5 7T120 364v396q35-12 69.5-18t70.5-6Zm260 42q44-21 88.5-31.5T700 736q36 0 70.5 6t69.5 18V364q-33-14-68.5-21t-71.5-7q-47 0-93 12t-87 36v394Zm-40 118q-48-38-104-59t-116-21q-42 0-82.5 11T100 858q-21 11-40.5-1T40 822V340q0-11 5.5-21T62 304q46-24 96-36t102-12q58 0 113.5 15T480 316q51-30 106.5-45T700 256q52 0 102 12t96 36q11 5 16.5 15t5.5 21v482q0 23-19.5 35t-40.5 1q-37-20-77.5-31T700 816q-60 0-116 21t-104 59ZM280 562Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "add",
-                "data": "M440 856V616H200v-80h240V296h80v240h240v80H520v240h-80Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "logout",
-                "data": "M189 956q-43.725 0-74.863-31.138Q83 893.725 83 850V302q0-43.725 31.137-74.862Q145.275 196 189 196h286v106H189v548h286v106H189Zm448-140-76-78 110-110H351V522h320L561 412l76-76 240 240-240 240Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "receipt-long",
-                "data": "M235 1014q-60 0-103-43T89 868V714h122V146l66 66 66-66 66 66 66-66 66 66 66-66 66 66 66-66 66 66 66-66v722q0 60-43 103t-103 43H235Zm490-106q17 0 28.5-11.5T765 868V296H317v418h368v154q0 17 11.5 28.5T725 908ZM349 472V366h252v106H349Zm0 138V504h252v106H349Zm329-138q-22 0-37.5-15.5T625 419q0-22 15.5-37.5T678 366q22 0 37.5 15.5T731 419q0 22-15.5 37.5T678 472Zm0 138q-22 0-37.5-15.5T625 557q0-22 15.5-37.5T678 504q22 0 37.5 15.5T731 557q0 22-15.5 37.5T678 610ZM235 908h344v-88H195v48q0 17 11.5 28.5T235 908Zm-40 0v-88 88Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "person",
-                "data": "M480 576q-66 0-113-47t-47-113q0-66 47-113t113-47q66 0 113 47t47 113q0 66-47 113t-113 47ZM160 896V784q0-34 17.5-62.5T224 678q62-31 126-46.5T480 616q66 0 130 15.5T736 678q29 15 46.5 43.5T800 784v112H160Zm80-80h480v-32q0-11-5.5-20T700 750q-54-27-109-40.5T480 696q-56 0-111 13.5T260 750q-9 5-14.5 14t-5.5 20v32Zm240-320q33 0 56.5-23.5T560 416q0-33-23.5-56.5T480 336q-33 0-56.5 23.5T400 416q0 33 23.5 56.5T480 496Zm0-80Zm0 400Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "deployed-code",
-                "data": "m200 734 240 139V599L200 460v274Zm320 139 240-139V460L520 599v274ZM243 393l237 137 237-137-237-137-237 137ZM120 781V417q0-22 10.5-40t29.5-29l280-161q19-11 40-11t40 11l280 161q19 11 29.5 29t10.5 40v318q0 22-10.5 40T800 804L520 965q-19 11-40 11t-40-11L120 781Zm360-205Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "unarchive",
-                "data": "M200 936q-33 0-56.5-23.5T120 856V356q0-15 5-27t13-23l56-68q8-11 20-16.5t26-5.5h480q14 0 26 5.5t20 16.5l56 68q8 11 13 23t5 27v500q0 33-23.5 56.5T760 936H200Zm16-600h528l-34-40H250l-34 40Zm-16 80v440h560V416H200Zm240 400h80V648l64 64 56-56-160-160-160 160 56 56 64-64v168Zm-240 40h560-560Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "arrow-back",
-                "data": "M480 896 160 576l320-320 57 56-224 224h487v80H313l224 224-57 56Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "name": "arrow-forward",
-                "data": "m480 896-57-56 224-224H160v-80h487L423 312l57-56 320 320-320 320Z",
-                "viewBox": "0 96 960 960"
-            },
-            {
-                "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"
-            },
-            {
-                "name": "isa-abholfach",
-                "data": "M12.25,9.15l4.688,10.054l2.266,-1.057l-5.072,-10.876l-1.882,0.878l-0,-3.149l-2.5,-0l-0,14l2.5,0l-0,-9.85Zm-6.5,-2.15l-0,12l2.5,0l-0,-12l-2.5,0Z"
-            },
-            {
-                "name": "keyboard-arrow-down",
-                "data": "M480-344 240-584l43-43 197 197 197-197 43 43-240 240Z",
-                "viewBox": "0 -960 960 960"
-            },
-            {
-                "name": "assignment-return",
-                "data": "m479-333 43-43-74-74h182v-60H448l74-74-43-43-147 147 147 147ZM180-120q-24.75 0-42.375-17.625T120-180v-600q0-24.75 17.625-42.375T180-840h205q5-35 32-57.5t63-22.5q36 0 63 22.5t32 57.5h205q24.75 0 42.375 17.625T840-780v600q0 24.75-17.625 42.375T780-120H180Zm0-60h600v-600H180v600Zm300-617q14 0 24.5-10.5T515-832q0-14-10.5-24.5T480-867q-14 0-24.5 10.5T445-832q0 14 10.5 24.5T480-797ZM180-180v-600 600Z",
-                "viewBox": "0 -960 960 960"
-            },
-            {
-                "name": "dashboard",
-                "data": "M510-570v-270h330v270H510ZM120-450v-390h330v390H120Zm390 330v-390h330v390H510Zm-390 0v-270h330v270H120Zm60-390h210v-270H180v270Zm390 330h210v-270H570v270Zm0-450h210v-150H570v150ZM180-180h210v-150H180v150Zm210-330Zm180-120Zm0 180ZM390-330Z",
-                "viewBox": "0 -960 960 960"
-            },
-            {
-                "name": "shopping-cart",
-                "data": "M286.788-81Q257-81 236-102.212q-21-21.213-21-51Q215-183 236.212-204q21.213-21 51-21Q317-225 338-203.788q21 21.213 21 51Q359-123 337.788-102q-21.213 21-51 21Zm400 0Q657-81 636-102.212q-21-21.213-21-51Q615-183 636.212-204q21.213-21 51-21Q717-225 738-203.788q21 21.213 21 51Q759-123 737.788-102q-21.213 21-51 21ZM235-741l110 228h288l125-228H235Zm-30-60h589.074q22.964 0 34.945 21Q841-759 829-738L694-495q-11 19-28.559 30.5Q647.881-453 627-453H324l-56 104h491v60H277q-42 0-60.5-28t.5-63l64-118-152-322H51v-60h117l37 79Zm140 288h288-288Z",
-                "viewBox": "0 -960 960 960"
-            },
-            {
-                "name": "shopping-cart-bold",
-                "data": "M286.788-70Q257-70 236-91.212q-21-21.213-21-51Q215-172 236.212-193q21.213-21 51-21Q317-214 338-192.788q21 21.213 21 51Q359-112 337.788-91q-21.213 21-51 21Zm400 0Q657-70 636-91.212q-21-21.213-21-51Q615-172 636.212-193q21.213-21 51-21Q717-214 738-192.788q21 21.213 21 51Q759-112 737.788-91q-21.213 21-51 21ZM254-730l93 194h285l105-194H254Zm-42-82h560.074q36.176 0 55.051 32t.875 65L710-501q-13 21-32.508 34.5-19.509 13.5-44.63 13.5H337l-49 93h482v82H277q-50 0-71.5-34t1.5-74l61-112-146-311H40v-82h135l37 79Zm135 276h285-285Z",
-                "viewBox": "0 -960 960 960"
-            }
-        ],
-        "aliases": [
-            {
-                "alias": "d-account",
-                "name": "account"
-            },
-            {
-                "alias": "d-no-account",
-                "name": "package-variant-closed"
-            },
-            {
-                "name": "isa-audio",
-                "alias": "AU"
-            },
-            {
-                "name": "isa-audio",
-                "alias": "CAS"
-            },
-            {
-                "name": "isa-audio",
-                "alias": "DL"
-            },
-            {
-                "name": "isa-audio",
-                "alias": "KAS"
-            },
-            {
-                "name": "isa-hard-cover",
-                "alias": "BUCH"
-            },
-            {
-                "name": "isa-hard-cover",
-                "alias": "GEB"
-            },
-            {
-                "name": "isa-hard-cover",
-                "alias": "HC"
-            },
-            {
-                "name": "isa-hard-cover",
-                "alias": "KT"
-            },
-            {
-                "name": "isa-ebook",
-                "alias": "EB"
-            },
-            {
-                "name": "isa-non-book",
-                "alias": "GLO"
-            },
-            {
-                "name": "isa-non-book",
-                "alias": "HDL"
-            },
-            {
-                "name": "isa-non-book",
-                "alias": "NB"
-            },
-            {
-                "name": "isa-non-book",
-                "alias": "SPL"
-            },
-            {
-                "name": "isa-calendar",
-                "alias": "KA"
-            },
-            {
-                "name": "isa-scroll",
-                "alias": "MA"
-            },
-            {
-                "name": "isa-software",
-                "alias": "SW"
-            },
-            {
-                "name": "isa-soft-cover",
-                "alias": "TB"
-            },
-            {
-                "name": "isa-video",
-                "alias": "VI"
-            },
-            {
-                "name": "isa-news-paper",
-                "alias": "ZS"
-            }
-        ]
-    }
+    "@shared/icon": "/assets/icons.json"
 }
\ No newline at end of file
diff --git a/apps/isa-app/src/environments/environment.prod.ts b/apps/isa-app/src/environments/environment.prod.ts
index c9669790b..b0a41d616 100644
--- a/apps/isa-app/src/environments/environment.prod.ts
+++ b/apps/isa-app/src/environments/environment.prod.ts
@@ -1,3 +1,4 @@
 export const environment = {
   production: true,
+  debug: false,
 };
diff --git a/apps/isa-app/src/environments/environment.ts b/apps/isa-app/src/environments/environment.ts
index 66998ae9a..6c9336a03 100644
--- a/apps/isa-app/src/environments/environment.ts
+++ b/apps/isa-app/src/environments/environment.ts
@@ -4,6 +4,7 @@
 
 export const environment = {
   production: false,
+  debug: false,
 };
 
 /*
diff --git a/apps/isa-app/src/main.ts b/apps/isa-app/src/main.ts
index 23e538082..8538ec5e0 100644
--- a/apps/isa-app/src/main.ts
+++ b/apps/isa-app/src/main.ts
@@ -14,26 +14,28 @@ if (environment.production) {
 
 const debugService = new DebugService();
 
-const consoleLog = console.log;
+if (environment.debug) {
+  const consoleLog = console.log;
 
-console.log = (...args) => {
-  debugService.add({ type: 'log', args });
-  consoleLog(...args);
-};
+  console.log = (...args) => {
+    debugService.add({ type: 'log', args });
+    consoleLog(...args);
+  };
 
-const consoleWarn = console.warn;
+  const consoleWarn = console.warn;
 
-console.warn = (...args) => {
-  debugService.add({ type: 'warn', args });
-  consoleWarn(...args);
-};
+  console.warn = (...args) => {
+    debugService.add({ type: 'warn', args });
+    consoleWarn(...args);
+  };
 
-const consoleError = console.error;
+  const consoleError = console.error;
 
-console.error = (...args) => {
-  debugService.add({ type: 'error', args });
-  consoleError(...args);
-};
+  console.error = (...args) => {
+    debugService.add({ type: 'error', args });
+    consoleError(...args);
+  };
+}
 
 platformBrowserDynamic([{ provide: DebugService, useValue: debugService }])
   .bootstrapModule(AppModule)
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 9e48ad064..656e166a2 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
@@ -5,7 +5,7 @@
     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"
     type="button"
   >
-    <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+    <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
     Filter
   </button>
 </div>
@@ -16,7 +16,7 @@
 <shell-filter-overlay #filterOverlay class="relative">
   <div class="relative">
     <button type="button" class="absolute top-4 right-4 text-cadet" (click)="closeFilterOverlay()">
-      <ui-svg-icon [icon]="'close'" [size]="28"></ui-svg-icon>
+      <shared-icon [icon]="'close'" [size]="28"></shared-icon>
     </button>
   </div>
 
diff --git a/apps/page/assortment/src/lib/price-update/price-update.module.ts b/apps/page/assortment/src/lib/price-update/price-update.module.ts
index a5833ba8c..9fad1beec 100644
--- a/apps/page/assortment/src/lib/price-update/price-update.module.ts
+++ b/apps/page/assortment/src/lib/price-update/price-update.module.ts
@@ -2,13 +2,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { SharedFilterOverlayModule } from '@shared/components/filter-overlay';
 import { UiFilterNextModule } from '@ui/filter';
-import { UiIconModule } from '@ui/icon';
 import { UiSpinnerModule } from '@ui/spinner';
 import { PriceUpdateListModule } from './price-update-list';
 import { PriceUpdateComponent } from './price-update.component';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, PriceUpdateListModule, UiIconModule, UiFilterNextModule, SharedFilterOverlayModule, UiSpinnerModule],
+  imports: [CommonModule, PriceUpdateListModule, UiFilterNextModule, SharedFilterOverlayModule, UiSpinnerModule, IconComponent],
   exports: [PriceUpdateComponent],
   declarations: [PriceUpdateComponent],
   providers: [],
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 0aa5b49db..cf079c513 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
@@ -8,7 +8,7 @@
         [routerLink]="closeFilterRoute"
         queryParamsHandling="preserve"
       >
-        <ui-svg-icon icon="close" [size]="25"></ui-svg-icon>
+        <shared-icon icon="close" [size]="25"></shared-icon>
       </a>
     </div>
 
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 a08408c56..1f943a329 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 { 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';
+import { FilterModule } from '@shared/components/filter';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, RouterModule, FilterNextModule, UiIconModule, UiSpinnerModule],
+  imports: [CommonModule, RouterModule, FilterModule, UiSpinnerModule, IconComponent],
   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 465480e04..e3b8e364a 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
@@ -26,7 +26,7 @@
         [routerLink]="openFilterRoute"
         queryParamsHandling="preserve"
       >
-        <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+        <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
         Filter
       </a>
     </div>
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 a5a6d3a59..f7fcb4710 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,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { UiIconModule } from '@ui/icon';
 import { ArticleSearchMainComponent } from './search-main.component';
-import { FilterNextModule } from 'apps/shared/components/filter/src/lib';
+import { FilterModule } from '@shared/components/filter';
 import { RouterModule } from '@angular/router';
+import { IconComponent } from '@shared/components/icon';
+import { UiIconModule } from '@ui/icon';
 
 @NgModule({
-  imports: [CommonModule, RouterModule, UiIconModule, FilterNextModule],
+  imports: [CommonModule, RouterModule, IconComponent, FilterModule, UiIconModule],
   exports: [ArticleSearchMainComponent],
   declarations: [ArticleSearchMainComponent],
   providers: [],
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 84019af85..fbb91b926 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
@@ -22,7 +22,7 @@
       [routerLink]="filterRoute"
       queryParamsHandling="preserve"
     >
-      <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+      <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
       Filter
     </a>
   </div>
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 48770dbf7..bb5d8a0b5 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
@@ -15,9 +15,10 @@ 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 { FilterAutocompleteProvider, FilterModule, OrderByFilterModule } from '@shared/components/filter';
 import { FocusSearchboxEvent } from '../focus-searchbox.event';
 import { ArticleSearchMainAutocompleteProvider } from '../providers';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
   imports: [
@@ -32,7 +33,8 @@ import { ArticleSearchMainAutocompleteProvider } from '../providers';
     OrderByFilterModule,
     ScrollingModule,
     UiTooltipModule,
-    FilterNextModule,
+    FilterModule,
+    IconComponent,
   ],
   exports: [ArticleSearchResultsComponent, SearchResultItemComponent],
   declarations: [
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 c47a3f8fe..117644d15 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
@@ -5,7 +5,7 @@
     [routerLink]="filterRoute"
     queryParamsHandling="preserve"
   >
-    <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+    <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
     Filter
   </a>
 </div>
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 0d7a67751..0e75fa692 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
@@ -9,6 +9,7 @@ import { UiFilterNextModule } from '@ui/filter';
 import { SharedFilterOverlayModule } from '@shared/components/filter-overlay';
 import { UiSpinnerModule } from '@ui/spinner';
 import { CustomerOrderSearchStore } from './customer-order-search.store';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
   imports: [
@@ -19,6 +20,7 @@ import { CustomerOrderSearchStore } from './customer-order-search.store';
     SharedFilterOverlayModule,
     UiSpinnerModule,
     OrderBranchIdInputComponent,
+    IconComponent,
   ],
   exports: [CustomerOrderSearchComponent],
   providers: [CustomerOrderSearchStore],
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 6d0edf16a..3cb549564 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
@@ -5,7 +5,7 @@
     [routerLink]="filterRoute"
     queryParamsHandling="preserve"
   >
-    <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+    <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
     Filter
   </a> -->
 
diff --git a/apps/page/customer-rd/ng-package.json b/apps/page/customer-rd/ng-package.json
new file mode 100644
index 000000000..847998831
--- /dev/null
+++ b/apps/page/customer-rd/ng-package.json
@@ -0,0 +1,7 @@
+{
+  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../../dist/page/customer",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}
\ No newline at end of file
diff --git a/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.css b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.css
new file mode 100644
index 000000000..06cf25fe8
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.css
@@ -0,0 +1,3 @@
+:host {
+  @apply grid grid-flow-row gap-[5px] h-[6.125rem] bg-surface text-surface-content overflow-hidden mb-px-2 px-4 py-3;
+}
diff --git a/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.html b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.html
new file mode 100644
index 000000000..ff3bedc04
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.html
@@ -0,0 +1,24 @@
+<div class="flex items-start justify-between">
+  <div class="isa-label">
+    {{ label?.description }}
+  </div>
+  <div class="mr-20">
+    {{ customer?.created | date: 'dd.MM.yy' }}
+  </div>
+</div>
+
+<div class="grid grid-cols-2 gap-4">
+  <span class="text-[22px] font-bold"> {{ customer?.lastName }} {{ customer?.firstName }} </span>
+  <div>
+    <div class="flex flex-col">
+      <div class="flex flex-row items-center">
+        <span class="w-32">PLZ und Ort</span>
+        <span class="font-bold grow-1">{{ customer?.address?.zipCode }} {{ customer?.address?.city }}</span>
+      </div>
+      <div class="flex flex-row items-center">
+        <span class="w-32">E-Mail</span>
+        <span class="font-bold grow-1">{{ customer?.communicationDetails?.email }}</span>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.ts b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.ts
new file mode 100644
index 000000000..f9df6adb0
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item-full/customer-result-list-item-full.component.ts
@@ -0,0 +1,19 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { CustomerInfoDTO } from '@swagger/crm';
+
+@Component({
+  selector: 'page-customer-result-list-item-full',
+  templateUrl: 'customer-result-list-item-full.component.html',
+  styleUrls: ['customer-result-list-item-full.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerResultListItemFullComponent {
+  get label() {
+    return this.customer?.features?.find((f) => f.enabled);
+  }
+
+  @Input()
+  customer: CustomerInfoDTO;
+
+  constructor() {}
+}
diff --git a/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.css b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.css
new file mode 100644
index 000000000..779a058f8
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.css
@@ -0,0 +1,3 @@
+:host {
+  @apply flex flex-col bg-surface text-surface-content h-[11.313rem] mb-[0.625rem] p-4;
+}
diff --git a/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.html b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.html
new file mode 100644
index 000000000..69f0104ff
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.html
@@ -0,0 +1,24 @@
+<div class="flex items-start justify-between">
+  <div class="isa-label">
+    {{ label?.description }}
+  </div>
+  <div>
+    {{ customer?.created | date: 'dd.MM.yy' }}
+  </div>
+</div>
+
+<div class="flex flex-col justify-between grow">
+  <span class="text-[22px] font-bold"> {{ customer?.lastName }} {{ customer?.firstName }} </span>
+  <div>
+    <div class="flex flex-col">
+      <div class="flex flex-row items-center">
+        <span class="w-32">PLZ und Ort</span>
+        <span class="font-bold grow-1">{{ customer?.address?.zipCode }} {{ customer?.address?.city }}</span>
+      </div>
+      <div class="flex flex-row items-center">
+        <span class="w-32">E-Mail</span>
+        <span class="font-bold grow-1">{{ customer?.communicationDetails?.email }}</span>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.ts b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.ts
new file mode 100644
index 000000000..c6177e7f2
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list-item/customer-result-list-item.component.ts
@@ -0,0 +1,19 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { CustomerInfoDTO } from '@swagger/crm';
+
+@Component({
+  selector: 'page-customer-result-list-item',
+  templateUrl: 'customer-result-list-item.component.html',
+  styleUrls: ['customer-result-list-item.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerResultListItemComponent {
+  get label() {
+    return this.customer?.features?.find((f) => f.enabled);
+  }
+
+  @Input()
+  customer: CustomerInfoDTO;
+
+  constructor() {}
+}
diff --git a/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.css b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.css
new file mode 100644
index 000000000..820553929
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.css
@@ -0,0 +1,17 @@
+:host {
+  --shadow: 0px 0px 10px rgba(220, 226, 233, 0.5);
+  --border-radius: 0.313rem;
+  @apply grid grid-flow-row;
+  border-radius: var(--border-radius);
+}
+
+.customer-result-list-header {
+  box-shadow: var(--shadow);
+  border-radius: var(--border-radius) var(--border-radius) 0 0;
+}
+
+page-customer-result-list-item-full,
+page-customer-result-list-item {
+  cursor: pointer;
+  border-radius: var(--border-radius);
+}
diff --git a/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.html b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.html
new file mode 100644
index 000000000..9e6505044
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.html
@@ -0,0 +1,19 @@
+<cdk-virtual-scroll-viewport itemSize="98" class="h-[calc(100vh-18.875rem)]" *ngIf="!compact">
+  <a
+    *cdkVirtualFor="let customer of customers$ | async; trackBy: trackByFn"
+    [routerLink]="customerSearchNavigation.detailsRoute({ processId: processId, customerId: customer.id })?.path"
+    [queryParams]="customerSearchNavigation.detailsRoute({ processId: processId, customerId: customer.id })?.queryParams"
+  >
+    <page-customer-result-list-item-full [customer]="customer"></page-customer-result-list-item-full>
+  </a>
+</cdk-virtual-scroll-viewport>
+
+<cdk-virtual-scroll-viewport itemSize="98" class="h-[calc(100vh-20.75rem)]" *ngIf="compact">
+  <a
+    *cdkVirtualFor="let customer of customers$ | async; trackBy: trackByFn"
+    [routerLink]="customerSearchNavigation.detailsRoute({ processId: processId, customerId: customer.id })?.path"
+    [queryParams]="customerSearchNavigation.detailsRoute({ processId: processId, customerId: customer.id })?.queryParams"
+  >
+    <page-customer-result-list-item [customer]="customer"></page-customer-result-list-item>
+  </a>
+</cdk-virtual-scroll-viewport>
diff --git a/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.ts b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.ts
new file mode 100644
index 000000000..b92161e13
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.component.ts
@@ -0,0 +1,44 @@
+import { Component, ChangeDetectionStrategy, Input, EventEmitter, Output } from '@angular/core';
+import { CustomerInfoDTO } from '@swagger/crm';
+import { CrmCustomerService } from '@domain/crm';
+import { map } from 'rxjs/operators';
+import { BooleanInput, NumberInput, coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
+import { CustomerSearchNavigation } from '../../navigations';
+
+@Component({
+  selector: 'page-customer-result-list',
+  templateUrl: 'customer-result-list.component.html',
+  styleUrls: ['customer-result-list.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerResultListComponent {
+  private _compact: boolean;
+  @Input()
+  get compact() {
+    return this._compact;
+  }
+  set compact(value: BooleanInput) {
+    this._compact = coerceBooleanProperty(value);
+  }
+
+  customers$ = this._customerService.getCustomers('Lorenz Hilpert').pipe(map((res) => res.result));
+
+  @Input()
+  selected: CustomerInfoDTO;
+
+  @Output()
+  selectedChange = new EventEmitter<CustomerInfoDTO>();
+
+  private _processId: NumberInput;
+  @Input()
+  get processId() {
+    return this._processId;
+  }
+  set processId(value: NumberInput) {
+    this._processId = coerceNumberProperty(value);
+  }
+
+  trackByFn = (_: number, item: CustomerInfoDTO) => item?.id;
+
+  constructor(private _customerService: CrmCustomerService, public customerSearchNavigation: CustomerSearchNavigation) {}
+}
diff --git a/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.module.ts b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.module.ts
new file mode 100644
index 000000000..6215422ed
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-result-list/customer-result-list.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ScrollingModule } from '@angular/cdk/scrolling';
+
+import { SearchboxModule } from '@shared/components/searchbox';
+
+import { CustomerResultListComponent } from './customer-result-list.component';
+import { CustomerResultListItemFullComponent } from './customer-result-list-item-full/customer-result-list-item-full.component';
+import { CustomerResultListItemComponent } from './customer-result-list-item/customer-result-list-item.component';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [CommonModule, SearchboxModule, ScrollingModule, RouterModule],
+  exports: [CustomerResultListComponent, CustomerResultListComponent, CustomerResultListItemFullComponent, CustomerResultListItemComponent],
+  declarations: [
+    CustomerResultListComponent,
+    CustomerResultListComponent,
+    CustomerResultListItemFullComponent,
+    CustomerResultListItemComponent,
+  ],
+})
+export class CustomerResultListModule {}
diff --git a/apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.html b/apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.html
new file mode 100644
index 000000000..e8728d02a
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.html
@@ -0,0 +1,19 @@
+<shared-checkbox
+  *ngIf="customerType !== 'b2b'"
+  [ngModel]="p4mUser"
+  (ngModelChange)="setValue({ p4mUser: !p4mUser })"
+  [disabled]="p4mReadonly || readonly"
+>
+  Kundenkarte
+</shared-checkbox>
+<ng-container *ngFor="let option of filteredOptions$ | async">
+  <shared-checkbox
+    *ngIf="option?.enabled !== false"
+    [ngModel]="option.value === customerType"
+    (ngModelChange)="setValue({ customerType: $event ? option.value : undefined })"
+    [disabled]="readonly"
+    [name]="option.value"
+  >
+    {{ option.label }}
+  </shared-checkbox>
+</ng-container>
diff --git a/apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.scss b/apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.scss
new file mode 100644
index 000000000..994200d78
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.scss
@@ -0,0 +1,11 @@
+:host {
+  @apply flex flex-row flex-wrap justify-start items-center;
+}
+
+shared-checkbox {
+  @apply mr-10 mb-5;
+}
+
+shared-checkbox.disabled.checked {
+  @apply text-black;
+}
diff --git a/apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.ts b/apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.ts
new file mode 100644
index 000000000..3b2402a02
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.ts
@@ -0,0 +1,240 @@
+import {
+  Component,
+  ChangeDetectionStrategy,
+  forwardRef,
+  OnInit,
+  Input,
+  ChangeDetectorRef,
+  OnDestroy,
+  Output,
+  EventEmitter,
+  ViewChildren,
+  QueryList,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CacheService } from '@core/cache';
+import { DomainCheckoutService } from '@domain/checkout';
+import { ComponentStore, tapResponse } from '@ngrx/component-store';
+import { OptionDTO } from '@swagger/checkout';
+import { UiCheckboxComponent } from '@ui/checkbox';
+import { first, isBoolean, isString } from 'lodash';
+import { combineLatest, Observable, Subject } from 'rxjs';
+import { distinctUntilChanged, filter, map, shareReplay, switchMap } from 'rxjs/operators';
+
+export interface CustomerTypeSelectorState {
+  processId: number;
+  customerType: string;
+  p4mUser: boolean;
+  options: OptionDTO[];
+}
+
+@Component({
+  selector: 'app-customer-type-selector',
+  templateUrl: 'customer-type-selector.component.html',
+  styleUrls: ['customer-type-selector.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CustomerTypeSelectorComponent),
+      multi: true,
+    },
+  ],
+})
+export class CustomerTypeSelectorComponent extends ComponentStore<CustomerTypeSelectorState>
+  implements OnInit, OnDestroy, ControlValueAccessor {
+  @ViewChildren(UiCheckboxComponent)
+  checkboxes: QueryList<UiCheckboxComponent>;
+
+  private _onDestroy$ = new Subject<void>();
+
+  @Input()
+  readonly: boolean;
+
+  @Input()
+  get value() {
+    if (this.p4mUser) {
+      return `${this.customerType}-p4m`;
+    }
+    return this.customerType;
+  }
+  set value(value: string) {
+    if (value.includes('-p4m')) {
+      this.p4mUser = true;
+      this.customerType = value.replace('-p4m', '');
+    } else {
+      this.customerType = value;
+    }
+  }
+
+  @Output()
+  valueChanges = new EventEmitter<string>();
+
+  @Input()
+  disabled: boolean;
+
+  @Input()
+  set processId(val: number) {
+    if (this.processId !== val) {
+      this.patchState({ processId: val });
+      this.getOptions(val);
+    }
+  }
+  get processId() {
+    return this.get((s) => s.processId);
+  }
+
+  @Input()
+  get p4mUser() {
+    return this.get((s) => s.p4mUser);
+  }
+  set p4mUser(val: boolean) {
+    this.patchState({ p4mUser: val ?? false });
+  }
+
+  @Input()
+  get customerType() {
+    return this.get((s) => s.customerType);
+  }
+  set customerType(val: string) {
+    this.patchState({ customerType: val });
+  }
+
+  @Input()
+  p4mReadonly = false;
+
+  get filteredOptions$() {
+    const options$ = this.select((s) => s.options).pipe(distinctUntilChanged());
+    const p4mUser$ = this.select((s) => s.p4mUser).pipe(distinctUntilChanged());
+    const customerType$ = this.select((s) => s.customerType).pipe(distinctUntilChanged());
+    return combineLatest([options$, p4mUser$, customerType$]).pipe(
+      filter(([options]) => options?.length > 0),
+      map(([options, p4mUser, customerType]) => {
+        const initial = { p4mUser: this.p4mUser, customerType: this.customerType };
+        let result: OptionDTO[] = options;
+        if (p4mUser) {
+          result = result.filter((o) => o.value === 'store' || (o.value === 'webshop' && o.enabled !== false));
+
+          result = result.map((o) => {
+            if (o.value === 'store') {
+              return { ...o, enabled: false };
+            }
+            return o;
+          });
+        }
+
+        if (customerType === 'b2b' && this.p4mUser) {
+          this.p4mUser = false;
+        }
+
+        if (initial.p4mUser !== this.p4mUser || initial.customerType !== this.customerType) {
+          this.setValue({ customerType: this.customerType, p4mUser: this.p4mUser });
+        }
+
+        return result;
+      }),
+      shareReplay(1)
+    );
+  }
+
+  get enabledOptions() {
+    return this.get((s) => s.options.filter((o) => o.enabled !== false));
+  }
+
+  onChange = (value: string) => {};
+  onTouched = () => {};
+
+  constructor(private _checkoutService: DomainCheckoutService, private _cache: CacheService, private _cdr: ChangeDetectorRef) {
+    super({
+      processId: undefined,
+      customerType: undefined,
+      p4mUser: false,
+      options: _cache.get('customerTypeOptions') ?? [],
+    });
+  }
+
+  ngOnInit(): void {}
+
+  getOptions = this.effect((processId$: Observable<number>) => {
+    return processId$.pipe(
+      switchMap((pid) =>
+        this._checkoutService.canSetCustomer({ processId: pid }).pipe(
+          tapResponse(
+            (res) => {
+              const options = res.create.options.values;
+              this.patchState({ options });
+              this._cache.set('customerTypeOptions', options);
+            },
+            (err) => {}
+          )
+        )
+      )
+    );
+  });
+
+  ngOnDestroy(): void {
+    this._onDestroy$.next();
+    this._onDestroy$.complete();
+  }
+
+  writeValue(obj: any): void {
+    this.value = obj;
+    this._cdr.markForCheck();
+  }
+
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+  }
+
+  setValue(value: { p4mUser?: boolean; customerType?: string } | string) {
+    const initial = { p4mUser: this.p4mUser, customerType: this.customerType };
+
+    if (isString(value)) {
+      this.value = value;
+    } else {
+      if (isBoolean(value.p4mUser)) {
+        this.p4mUser = value.p4mUser;
+      }
+      if (isString(value.customerType)) {
+        this.customerType = value.customerType;
+      } else if (this.p4mUser) {
+        // Implementierung wie im PBI #3467 beschrieben
+        // wenn customerType nicht gesetzt wird und p4mUser true ist,
+        // dann customerType auf store setzen.
+        // wenn dies nicht möglich ist da der Warenkob keinen store Kunden zulässt,
+        // dann customerType auf webshop setzen.
+        // wenn dies nicht möglich ist da der Warenkob keinen webshop Kunden zulässt,
+        // dann customerType auf den ersten verfügbaren setzen und p4mUser auf false setzen.
+        if (this.enabledOptions.some((o) => o.value === 'store')) {
+          this.customerType = 'store';
+        } else if (this.enabledOptions.some((o) => o.value === 'webshop')) {
+          this.customerType = 'webshop';
+        } else {
+          this.p4mUser = false;
+          const includesGuest = this.enabledOptions.some((o) => o.value === 'guest');
+          this.customerType = includesGuest ? 'guest' : first(this.enabledOptions)?.value;
+        }
+      } else {
+        // wenn customerType nicht gesetzt wird und p4mUser false ist,
+        // dann customerType auf den ersten verfügbaren setzen der nicht mit dem aktuellen customerType übereinstimmt.
+        this.customerType = first(this.enabledOptions.filter((o) => o.value === this.customerType))?.value ?? this.customerType;
+      }
+    }
+
+    if (this.customerType !== initial.customerType || this.p4mUser !== initial.p4mUser) {
+      this.onChange(this.value);
+      this.onTouched();
+      this.valueChanges.emit(this.value);
+    }
+
+    this.checkboxes?.find((c) => c.name === this.customerType)?.writeValue(true);
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.module.ts b/apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.module.ts
new file mode 100644
index 000000000..bb7c34aa9
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CustomerTypeSelectorComponent } from './customer-type-selector.component';
+import { FormsModule } from '@angular/forms';
+import { CheckboxComponent } from '@shared/components/checkbox';
+
+@NgModule({
+  imports: [CommonModule, FormsModule, CheckboxComponent],
+  exports: [CustomerTypeSelectorComponent],
+  declarations: [CustomerTypeSelectorComponent],
+})
+export class CustomerTypeSelectorModule {}
diff --git a/apps/page/customer-rd/src/lib/components/customer-type-selector/index.ts b/apps/page/customer-rd/src/lib/components/customer-type-selector/index.ts
new file mode 100644
index 000000000..44218f65d
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/customer-type-selector/index.ts
@@ -0,0 +1,2 @@
+export * from './customer-type-selector.component';
+export * from './customer-type-selector.module';
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.component.html b/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.component.html
new file mode 100644
index 000000000..7968f9297
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.component.html
@@ -0,0 +1,4 @@
+<ui-checkbox [formControl]="control" [tabindex]="tabIndexStart" [autofocus]="focusAfterInit" [readonly]="readonly">
+  Bitte unterschreiben Sie die Teilnahmebedingungen im Kundenkartenformular, um die Prämiennutzung zu ermöglichen.
+  {{ requiredMark ? '*' : '' }}
+</ui-checkbox>
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.component.scss b/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.component.scss
new file mode 100644
index 000000000..8f2e2aafb
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.component.scss
@@ -0,0 +1,11 @@
+:host {
+  @apply block;
+}
+
+ui-checkbox {
+  @apply font-semibold;
+}
+
+::ng-deep app-accept-agb-form-block ui-checkbox {
+  align-items: flex-start !important;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.component.ts b/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.component.ts
new file mode 100644
index 000000000..593ef3332
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.component.ts
@@ -0,0 +1,36 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { FormBlockControl } from '../form-block';
+
+@Component({
+  selector: 'app-accept-agb-form-block',
+  templateUrl: 'accept-agb-form-block.component.html',
+  styleUrls: ['accept-agb-form-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  exportAs: 'appAcceptAGBFormBlock',
+})
+export class AcceptAGBFormBlockComponent extends FormBlockControl<boolean> {
+  get tabIndexEnd(): number {
+    return this.tabIndexStart;
+  }
+
+  constructor() {
+    super();
+  }
+
+  initializeControl(data?: boolean): void {
+    this.control = new UntypedFormControl(data ?? false, this.getValidatorFn(), this.getAsyncValidatorFn());
+  }
+
+  _patchValue(update: { previous: boolean; current: boolean }): void {
+    this.control.patchValue(update.current);
+  }
+
+  updateValidators(): void {
+    this.control.setValidators(this.getValidatorFn());
+  }
+
+  setValue(value: boolean): void {
+    this.control.setValue(value);
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.module.ts b/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.module.ts
new file mode 100644
index 000000000..bddbef593
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/accept-agb-form-block.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AcceptAGBFormBlockComponent } from './accept-agb-form-block.component';
+import { UiCheckboxModule } from '@ui/checkbox';
+import { ReactiveFormsModule } from '@angular/forms';
+import { UiCommonModule } from '@ui/common';
+
+@NgModule({
+  imports: [CommonModule, UiCommonModule, UiCheckboxModule, ReactiveFormsModule],
+  exports: [AcceptAGBFormBlockComponent],
+  declarations: [AcceptAGBFormBlockComponent],
+})
+export class AcceptAGBFormBlockModule {}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/index.ts b/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/index.ts
new file mode 100644
index 000000000..22b35d7c7
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/accept-agb/index.ts
@@ -0,0 +1,2 @@
+export * from './accept-agb-form-block.component';
+export * from './accept-agb-form-block.module';
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block-data.ts b/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block-data.ts
new file mode 100644
index 000000000..a3908ff51
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block-data.ts
@@ -0,0 +1,8 @@
+export interface AddressFormBlockData {
+  street?: string;
+  streetNumber?: string;
+  zipCode?: string;
+  city?: string;
+  info?: string;
+  country?: string;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.component.html b/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.component.html
new file mode 100644
index 000000000..562b8ed3f
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.component.html
@@ -0,0 +1,25 @@
+<ng-container [formGroup]="control">
+  <ui-form-control label="Straße" [requiredMark]="requiredMarks.includes('street') ? '*' : ''">
+    <input uiInput type="text" formControlName="street" [tabindex]="tabIndexStart" [autofocus]="focusAfterInit" [readonly]="readonly" />
+  </ui-form-control>
+  <ui-form-control label="Hausnummer" [requiredMark]="requiredMarks.includes('streetNumber') ? '*' : ''">
+    <input uiInput type="text" formControlName="streetNumber" [tabindex]="tabIndexStart + 1" [readonly]="readonly" />
+  </ui-form-control>
+  <ui-form-control label="PLZ" [requiredMark]="requiredMarks.includes('zipCode') ? '*' : ''">
+    <input uiInput type="text" formControlName="zipCode" [tabindex]="tabIndexStart + 2" [readonly]="readonly" />
+  </ui-form-control>
+  <ui-form-control label="Ort" [requiredMark]="requiredMarks.includes('city') ? '*' : ''">
+    <input uiInput type="text" formControlName="city" [tabindex]="tabIndexStart + 3" [readonly]="readonly" />
+  </ui-form-control>
+
+  <ui-form-control class="col-span-2" label="Adresszusatz" [clearable]="false" [requiredMark]="requiredMarks.includes('info') ? '*' : ''">
+    <input uiInput type="text" formControlName="info" [tabindex]="tabIndexStart + 4" [readonly]="readonly" />
+  </ui-form-control>
+
+  <ui-form-control class="col-span-2" label="Land" [clearable]="true" [requiredMark]="requiredMarks.includes('country') ? '*' : ''">
+    <ui-select formControlName="country" [tabindex]="tabIndexStart + 5" [readonly]="readonly">
+      <ui-select-option *ngFor="let country of countries || (countries$ | async)" [label]="country.name" [value]="country.isO3166_A_3">
+      </ui-select-option>
+    </ui-select>
+  </ui-form-control>
+</ng-container>
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.component.scss b/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.component.scss
new file mode 100644
index 000000000..c4f5f1d81
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.component.scss
@@ -0,0 +1,3 @@
+:host {
+  @apply grid grid-cols-2 gap-x-8;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.component.ts b/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.component.ts
new file mode 100644
index 000000000..5089bbc12
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.component.ts
@@ -0,0 +1,78 @@
+import { Component, ChangeDetectionStrategy, Input, OnInit, ChangeDetectorRef } from '@angular/core';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { CrmCustomerService } from '@domain/crm';
+import { CountryDTO } from '@swagger/crm';
+import { camelCase } from 'lodash';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { FormBlockGroup } from '../form-block';
+import { AddressFormBlockData } from './address-form-block-data';
+
+@Component({
+  selector: 'app-address-form-block',
+  templateUrl: 'address-form-block.component.html',
+  styleUrls: ['address-form-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddressFormBlockComponent extends FormBlockGroup<AddressFormBlockData> implements OnInit {
+  @Input() countries: CountryDTO[];
+
+  @Input() defaults: Partial<AddressFormBlockData>;
+
+  get tabIndexEnd(): number {
+    return this.tabIndexStart + 5;
+  }
+
+  countries$: Observable<CountryDTO[]>;
+
+  constructor(private readonly _customerService: CrmCustomerService, private _cdr: ChangeDetectorRef) {
+    super();
+  }
+
+  ngOnInit(): void {
+    super.ngOnInit();
+
+    this.countries$ = this._customerService.getCountries().pipe(map((r) => r.result));
+  }
+
+  initializeControl(data?: AddressFormBlockData): void {
+    this.control = new UntypedFormGroup({
+      country: new UntypedFormControl(data?.country ?? this.defaults?.country ?? '', this.getValidatorFn('country')),
+      city: new UntypedFormControl(data?.city ?? this.defaults?.city ?? '', this.getValidatorFn('city')),
+      street: new UntypedFormControl(data?.street ?? this.defaults?.street ?? '', this.getValidatorFn('street')),
+      streetNumber: new UntypedFormControl(data?.streetNumber ?? this.defaults?.streetNumber ?? '', this.getValidatorFn('streetNumber')),
+      zipCode: new UntypedFormControl(data?.zipCode ?? this.defaults?.zipCode ?? '', this.getValidatorFn('zipCode')),
+      info: new UntypedFormControl(data?.info ?? this.defaults?.info ?? '', this.getValidatorFn('info')),
+    });
+  }
+
+  _patchValue(update: { previous: AddressFormBlockData; current: AddressFormBlockData }): void {
+    this.control.patchValue({
+      country: update.current.country ?? '',
+      city: update.current.city ?? '',
+      street: update.current.street ?? '',
+      streetNumber: update.current.streetNumber ?? '',
+      zipCode: update.current.zipCode ?? '',
+      info: update.current.info ?? '',
+    });
+  }
+
+  setAddressValidationError(invalidProperties: Record<keyof AddressFormBlockData, string>) {
+    const keys = Object.keys(invalidProperties);
+    for (const key of keys) {
+      this.control.get(camelCase(key))?.setErrors({ validateAddress: invalidProperties[key] });
+    }
+    this.control.markAllAsTouched();
+    this._cdr.markForCheck();
+  }
+
+  updateValidators(): void {
+    this.control.get('country')?.setValidators(this.getValidatorFn('country'));
+    this.control.get('city')?.setValidators(this.getValidatorFn('city'));
+    this.control.get('street')?.setValidators(this.getValidatorFn('street'));
+    this.control.get('streetNumber')?.setValidators(this.getValidatorFn('streetNumber'));
+    this.control.get('zipCode')?.setValidators(this.getValidatorFn('zipCode'));
+    this.control.get('info')?.setValidators(this.getValidatorFn('info'));
+    this.control.updateValueAndValidity();
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.module.ts b/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.module.ts
new file mode 100644
index 000000000..9a9c661ab
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/address/address-form-block.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AddressFormBlockComponent } from './address-form-block.component';
+import { UiFormControlModule } from '@ui/form-control';
+import { UiInputModule } from '@ui/input';
+import { UiSelectModule } from '@ui/select';
+import { ReactiveFormsModule } from '@angular/forms';
+import { UiCommonModule } from '@ui/common';
+
+@NgModule({
+  imports: [CommonModule, UiCommonModule, UiFormControlModule, UiInputModule, UiSelectModule, ReactiveFormsModule],
+  exports: [AddressFormBlockComponent],
+  declarations: [AddressFormBlockComponent],
+})
+export class AddressFormBlockModule {}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/address/index.ts b/apps/page/customer-rd/src/lib/components/form-blocks/address/index.ts
new file mode 100644
index 000000000..4003ae9e1
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/address/index.ts
@@ -0,0 +1,3 @@
+export * from './address-form-block-data';
+export * from './address-form-block.component';
+export * from './address-form-block.module';
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.component.html b/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.component.html
new file mode 100644
index 000000000..754395d09
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.component.html
@@ -0,0 +1,3 @@
+<ui-form-control label="Geburtsdatum (TT.MM.JJJJ)" [requiredMark]="requiredMark ? '*' : ''">
+  <input uiDateInput type="text" [formControl]="control" [tabindex]="tabIndexStart" [autofocus]="focusAfterInit" [readonly]="readonly" />
+</ui-form-control>
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.component.scss b/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.component.scss
new file mode 100644
index 000000000..249c71ad1
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.component.scss
@@ -0,0 +1,3 @@
+:host {
+  @apply block;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.component.ts b/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.component.ts
new file mode 100644
index 000000000..804af50ba
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.component.ts
@@ -0,0 +1,29 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { UntypedFormControl, Validators } from '@angular/forms';
+import { UiValidators } from '@ui/validators';
+import { FormBlockControl } from '../form-block';
+
+@Component({
+  selector: 'app-birth-date-form-block',
+  templateUrl: 'birth-date-form-block.component.html',
+  styleUrls: ['birth-date-form-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class BirthDateFormBlockComponent extends FormBlockControl<Date | string> {
+  get tabIndexEnd() {
+    return this.tabIndexStart;
+  }
+
+  initializeControl(data?: Date): void {
+    this.control = new UntypedFormControl(data, [...this.getValidatorFn(), UiValidators.date]);
+  }
+
+  _patchValue(update: { previous: Date; current: Date }): void {
+    this.control.patchValue(update.current);
+  }
+
+  updateValidators(): void {
+    this.control.setValidators([...this.getValidatorFn(), UiValidators.date]);
+    this.control.updateValueAndValidity();
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.module.ts b/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.module.ts
new file mode 100644
index 000000000..0a9a14309
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/birth-date-form-block.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { BirthDateFormBlockComponent } from './birth-date-form-block.component';
+import { UiFormControlModule } from '@ui/form-control';
+import { UiInputModule } from '@ui/input';
+import { ReactiveFormsModule } from '@angular/forms';
+import { UiCommonModule } from '@ui/common';
+
+@NgModule({
+  imports: [CommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule, UiCommonModule],
+  exports: [BirthDateFormBlockComponent],
+  declarations: [BirthDateFormBlockComponent],
+})
+export class BirthDateFormBlockModule {}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/index.ts b/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/index.ts
new file mode 100644
index 000000000..33f815fd5
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/birth-date/index.ts
@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './birth-date-form-block.component';
+export * from './birth-date-form-block.module';
+// end:ng42.barrel
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block-data.ts b/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block-data.ts
new file mode 100644
index 000000000..f93e061bf
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block-data.ts
@@ -0,0 +1,12 @@
+import { AddressFormBlockData } from '../address';
+import { NameFormBlockData } from '../name/name-form-block-data';
+import { OrganisationFormBlockData } from '../organisation/organisation-form-block-data';
+
+export interface DeviatingAddressFormBlockData {
+  deviatingAddress?: boolean;
+  organisation?: OrganisationFormBlockData;
+  name?: NameFormBlockData;
+  address?: AddressFormBlockData;
+  email?: string;
+  phoneNumbers?: { mobile?: string; phone?: string };
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.html b/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.html
new file mode 100644
index 000000000..b85aacc65
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.html
@@ -0,0 +1,61 @@
+<ui-checkbox [formControl]="deviatingAddress" [tabindex]="tabIndexStart" [autofocus]="focusAfterInit" [readonly]="readonly">
+  <ng-content></ng-content>
+</ui-checkbox>
+<div class="address-block" *ngIf="control.value.deviatingAddress">
+  <div class="wrapper">
+    <app-organisation-form-block
+      *ngIf="organisation"
+      [tabIndexStart]="tabIndexStart + 1"
+      #orgaBlock
+      (onInit)="addOrganisationGroup($event)"
+      (onDestroy)="removeOrganisationGroup()"
+      [data]="data?.organisation"
+      #nameFormBlock
+      [tabIndexStart]="tabIndexStart + 1"
+      [requiredMarks]="organisationRequiredMarks"
+      [validatorFns]="organisationValidatorFns"
+      [readonly]="readonly"
+    >
+    </app-organisation-form-block>
+    <app-name-form-block
+      (onInit)="addNameGroup($event)"
+      (onDestroy)="removeNameGroup()"
+      [data]="data?.name"
+      #nameFormBlock
+      [requiredMarks]="nameRequiredMarks"
+      [validatorFns]="nameValidatorFns"
+      [readonly]="readonly"
+    >
+    </app-name-form-block>
+    <app-address-form-block
+      #addressFormBlock
+      (onInit)="addAddressGroup($event)"
+      (onDestroy)="removeAddressGroup()"
+      [data]="data?.address"
+      [tabIndexStart]="nameFormBlock?.tabIndexEnd + 1"
+      [requiredMarks]="addressRequiredMarks"
+      [validatorFns]="addressValidatorFns"
+      [readonly]="readonly"
+    >
+    </app-address-form-block>
+    <app-email-form-block
+      *ngIf="email"
+      #emailFormBlock
+      (onInit)="addEmailGroup($event)"
+      (onDestroy)="removeEmailGroup()"
+      [data]="data?.email"
+      [requiredMark]="emailRequiredMark"
+      [validatorFns]="emailValidationFns"
+      [readonly]="readonly"
+    >
+    </app-email-form-block>
+    <app-phone-numbers-form-block
+      *ngIf="phoneNumbers"
+      (onInit)="addPhoneNumbersGroup($event)"
+      (onDestroy)="removePhoneNumbersGroup()"
+      [readonly]="readonly"
+    >
+      [tabIndexStart]="emailFormBlock?.tabIndexEnd+1" [requiredMarks]="phoneNumbersRequiredMarks" [validatorFns]="phoneNumbersValidatorFns">
+    </app-phone-numbers-form-block>
+  </div>
+</div>
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.scss b/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.scss
new file mode 100644
index 000000000..3c1d13e69
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.scss
@@ -0,0 +1,7 @@
+:host {
+  @apply block;
+}
+
+ui-checkbox {
+  @apply font-semibold;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.ts b/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.ts
new file mode 100644
index 000000000..c0474a6b4
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.component.ts
@@ -0,0 +1,174 @@
+import { Component, ChangeDetectionStrategy, ViewChild, ElementRef, Self, AfterViewInit, ChangeDetectorRef, Input } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, ValidatorFn } from '@angular/forms';
+import { FormBlock, FormBlockGroup } from '../form-block';
+import { DeviatingAddressFormBlockData } from './deviating-address-form-block-data';
+import { NameFormBlockComponent } from '../name';
+import { AddressFormBlockComponent, AddressFormBlockData } from '../address';
+import { NameFormBlockData } from '../name/name-form-block-data';
+import { OrganisationFormBlockComponent } from '../organisation';
+import { OrganisationFormBlockData } from '../organisation/organisation-form-block-data';
+import { EmailFormBlockComponent } from '../email';
+import { PhoneNumbersFormBlockComponent, PhoneNumbersFormBlockData } from '../phone-numbers';
+
+@Component({
+  selector: 'app-deviating-address-form-block',
+  templateUrl: 'deviating-address-form-block.component.html',
+  styleUrls: ['deviating-address-form-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  exportAs: 'appDeviatingAddressFormBlock',
+})
+export class DeviatingAddressFormBlockComponent extends FormBlockGroup<DeviatingAddressFormBlockData> implements AfterViewInit {
+  @Input()
+  organisation = false;
+
+  @Input()
+  email = false;
+
+  @Input()
+  phoneNumbers = false;
+
+  @ViewChild(AddressFormBlockComponent, { static: false })
+  private readonly _addressFormBlock: AddressFormBlockComponent;
+
+  @ViewChild(EmailFormBlockComponent, { static: false })
+  private readonly _emailFormBlock: AddressFormBlockComponent;
+
+  @ViewChild(PhoneNumbersFormBlockComponent, { static: false })
+  private readonly _phoneNumbersFormBlock: AddressFormBlockComponent;
+
+  get tabIndexEnd() {
+    return this.tabIndexStart + 10;
+  }
+
+  @Input() defaults: Partial<DeviatingAddressFormBlockData>;
+
+  @Input()
+  nameRequiredMarks: Array<keyof NameFormBlockData>;
+
+  @Input()
+  nameValidatorFns: Record<keyof NameFormBlockData, ValidatorFn[]>;
+
+  @Input()
+  addressRequiredMarks: Array<keyof AddressFormBlockData>;
+
+  @Input()
+  addressValidatorFns: Record<keyof AddressFormBlockData, ValidatorFn[]>;
+
+  @Input()
+  organisationRequiredMarks: Array<keyof OrganisationFormBlockData>;
+
+  @Input()
+  organisationValidatorFns: Record<keyof OrganisationFormBlockData, ValidatorFn[]>;
+
+  @Input()
+  emailRequiredMark = false;
+
+  @Input()
+  emailValidationFns: ValidatorFn[] = [];
+
+  @Input()
+  phoneNumbersRequiredMarks: Array<keyof PhoneNumbersFormBlockData>;
+
+  @Input()
+  phoneNumbersValidatorFns: Record<keyof PhoneNumbersFormBlockData, ValidatorFn[]>;
+
+  get deviatingAddress() {
+    return this.control.get('deviatingAddress') as UntypedFormControl;
+  }
+
+  constructor(private readonly _fb: UntypedFormBuilder, @Self() private _elementRef: ElementRef, private _cdr: ChangeDetectorRef) {
+    super();
+  }
+
+  ngAfterViewInit(): void {}
+
+  initializeControl(data?: DeviatingAddressFormBlockData): void {
+    this.control = this._fb.group({
+      deviatingAddress: this._fb.control(data?.deviatingAddress ?? false, this.getValidatorFn('deviatingAddress')),
+    });
+  }
+
+  _patchValue(update: { previous: DeviatingAddressFormBlockData; current: DeviatingAddressFormBlockData }): void {
+    this.control.patchValue({
+      deviatingAddress: update.current?.deviatingAddress ?? false,
+    });
+  }
+
+  addOrganisationGroup(cmp: FormBlock<OrganisationFormBlockData, UntypedFormGroup>) {
+    if (!this.control.contains('organisation')) {
+      this.control.addControl('organisation', cmp.control);
+    }
+    setTimeout(() => this._cdr.markForCheck(), 0);
+  }
+
+  removeOrganisationGroup() {
+    if (this.control.contains('organisation')) {
+      this.control.removeControl('organisation');
+    }
+    setTimeout(() => this._cdr.markForCheck(), 0);
+  }
+
+  addNameGroup(cmp: FormBlock<NameFormBlockData, UntypedFormGroup>) {
+    if (!this.control.contains('name')) {
+      this.control.addControl('name', cmp.control);
+    }
+    setTimeout(() => this._cdr.markForCheck(), 0);
+  }
+
+  removeNameGroup() {
+    if (this.control.contains('name')) {
+      this.control.removeControl('name');
+    }
+    setTimeout(() => this._cdr.markForCheck(), 0);
+  }
+
+  addAddressGroup(cmp: FormBlock<AddressFormBlockData, UntypedFormGroup>) {
+    if (!this.control.contains('address')) {
+      this.control.addControl('address', cmp.control);
+    }
+    setTimeout(() => this._cdr.markForCheck(), 0);
+  }
+
+  removeAddressGroup() {
+    if (this.control.contains('address')) {
+      this.control.removeControl('address');
+    }
+    setTimeout(() => this._cdr.markForCheck(), 0);
+  }
+
+  addEmailGroup(cmp: FormBlock<string, UntypedFormControl>) {
+    if (!this.control.contains('email')) {
+      this.control.addControl('email', cmp.control);
+    }
+    setTimeout(() => this._cdr.markForCheck(), 0);
+  }
+
+  removeEmailGroup() {
+    if (this.control.contains('email')) {
+      this.control.removeControl('email');
+    }
+    setTimeout(() => this._cdr.markForCheck(), 0);
+  }
+
+  addPhoneNumbersGroup(cmp: FormBlock<PhoneNumbersFormBlockData, UntypedFormGroup>) {
+    if (!this.control.contains('phoneNumbers')) {
+      this.control.addControl('phoneNumbers', cmp.control);
+    }
+    setTimeout(() => this._cdr.markForCheck(), 0);
+  }
+
+  removePhoneNumbersGroup() {
+    if (this.control.contains('phoneNumbers')) {
+      this.control.removeControl('phoneNumbers');
+    }
+    setTimeout(() => this._cdr.markForCheck(), 0);
+  }
+
+  setAddressValidationError(invalidProperties: Record<keyof AddressFormBlockData, string>) {
+    this._addressFormBlock?.setAddressValidationError(invalidProperties);
+  }
+
+  updateValidators(): void {
+    throw new Error('Method not implemented.');
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.module.ts b/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.module.ts
new file mode 100644
index 000000000..06e08c502
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/deviating-address-form-block.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DeviatingAddressFormBlockComponent } from './deviating-address-form-block.component';
+import { UiCheckboxModule } from '@ui/checkbox';
+import { AddressFormBlockModule } from '../address';
+import { NameFormBlockModule } from '../name';
+import { ReactiveFormsModule } from '@angular/forms';
+import { OrganisationFormBlockModule } from '../organisation';
+import { EmailFormBlockModule } from '../email';
+import { PhoneNumbersFormBlockModule } from '../phone-numbers';
+import { UiCommonModule } from '@ui/common';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    UiCheckboxModule,
+    NameFormBlockModule,
+    AddressFormBlockModule,
+    OrganisationFormBlockModule,
+    EmailFormBlockModule,
+    PhoneNumbersFormBlockModule,
+    UiCommonModule,
+  ],
+  exports: [DeviatingAddressFormBlockComponent],
+  declarations: [DeviatingAddressFormBlockComponent],
+})
+export class DeviatingAddressFormBlockComponentModule {}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/index.ts b/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/index.ts
new file mode 100644
index 000000000..107cc3f64
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/deviating-address/index.ts
@@ -0,0 +1,3 @@
+export * from './deviating-address-form-block-data';
+export * from './deviating-address-form-block.component';
+export * from './deviating-address-form-block.module';
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.component.html b/apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.component.html
new file mode 100644
index 000000000..3f69eb1d9
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.component.html
@@ -0,0 +1,3 @@
+<ui-form-control label="E-Mail" [requiredMark]="requiredMark ? '*' : ''">
+  <input uiInput type="mail" [formControl]="control" [tabindex]="tabIndexStart" [autofocus]="focusAfterInit" [readonly]="readonly" />
+</ui-form-control>
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.component.scss b/apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.component.ts b/apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.component.ts
new file mode 100644
index 000000000..ac5cc7635
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.component.ts
@@ -0,0 +1,34 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { FormBlockControl } from '../form-block';
+import { validateEmail } from '../../../validators/email-validator';
+
+@Component({
+  selector: 'app-email-form-block',
+  templateUrl: 'email-form-block.component.html',
+  styleUrls: ['email-form-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class EmailFormBlockComponent extends FormBlockControl<string> {
+  get tabIndexEnd() {
+    return this.tabIndexStart;
+  }
+
+  constructor() {
+    super();
+  }
+
+  updateValidators(): void {
+    this.control.setValidators([...this.getValidatorFn(), validateEmail]);
+    this.control.setAsyncValidators(this.getAsyncValidatorFn());
+    this.control.updateValueAndValidity();
+  }
+
+  initializeControl(data?: string): void {
+    this.control = new UntypedFormControl(data, [...this.getValidatorFn(), validateEmail], this.getAsyncValidatorFn());
+  }
+
+  _patchValue(update: { previous: string; current: string }): void {
+    this.control.patchValue(update.current);
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.module.ts b/apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.module.ts
new file mode 100644
index 000000000..80f638647
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/email/email-form-block.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { EmailFormBlockComponent } from './email-form-block.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { UiFormControlModule } from '@ui/form-control';
+import { UiInputModule } from '@ui/input';
+import { UiCommonModule } from '@ui/common';
+
+@NgModule({
+  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule],
+  exports: [EmailFormBlockComponent],
+  declarations: [EmailFormBlockComponent],
+})
+export class EmailFormBlockModule {}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/email/index.ts b/apps/page/customer-rd/src/lib/components/form-blocks/email/index.ts
new file mode 100644
index 000000000..3cc8dda46
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/email/index.ts
@@ -0,0 +1,2 @@
+export * from './email-form-block.component';
+export * from './email-form-block.module';
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/form-block.ts b/apps/page/customer-rd/src/lib/components/form-blocks/form-block.ts
new file mode 100644
index 000000000..8e11044da
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/form-block.ts
@@ -0,0 +1,179 @@
+import { BooleanInput, coerceBooleanProperty, NumberInput, coerceNumberProperty } from '@angular/cdk/coercion';
+import { Directive, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
+import { AbstractControl, AsyncValidatorFn, UntypedFormControl, UntypedFormGroup, ValidatorFn } from '@angular/forms';
+import { isEqual } from 'lodash';
+import { Subject } from 'rxjs';
+import { distinctUntilChanged, takeUntil } from 'rxjs/operators';
+
+@Directive()
+export abstract class FormBlock<TD, TC extends AbstractControl> implements OnInit, OnDestroy {
+  private _readonly = false;
+
+  @Input()
+  get readonly(): boolean {
+    return this._readonly;
+  }
+  set readonly(value: BooleanInput) {
+    this._readonly = coerceBooleanProperty(value);
+  }
+
+  private _focusAfterInit = false;
+  @Input()
+  get focusAfterInit(): boolean {
+    return this._focusAfterInit;
+  }
+  set focusAfterInit(value: BooleanInput) {
+    this._focusAfterInit = coerceBooleanProperty(value);
+  }
+
+  readonly onDestroy$ = new Subject<void>();
+
+  private _tabIndexStart: number;
+
+  @Input()
+  get tabIndexStart(): number {
+    return this._tabIndexStart;
+  }
+  set tabIndexStart(value: NumberInput) {
+    this._tabIndexStart = coerceNumberProperty(value);
+  }
+
+  abstract tabIndexEnd: NumberInput;
+
+  private _data: TD;
+
+  @Input()
+  get data(): TD | undefined {
+    return this._data;
+  }
+  set data(value: TD) {
+    const previous = this._data;
+    this._data = value;
+
+    if (this.control && !isEqual(previous, value)) {
+      this._patchValue({
+        previous,
+        current: value,
+      });
+    }
+  }
+
+  @Output()
+  dataChanges = new EventEmitter<TD>();
+
+  @Output()
+  onInit = new EventEmitter<FormBlock<TD, TC>>();
+
+  @Output()
+  onDestroy = new EventEmitter<void>();
+
+  control: TC;
+
+  get value(): TD {
+    return this.control.value;
+  }
+
+  get valid(): boolean {
+    return this.control.valid;
+  }
+
+  ngOnInit(): void {
+    this.initializeControl(this.data);
+    this.control.valueChanges
+      .pipe(takeUntil(this.onDestroy$), distinctUntilChanged(isEqual))
+      .subscribe((value) => this.dataChanges.emit(value));
+    this.onInit.emit(this);
+  }
+
+  ngOnDestroy(): void {
+    this.onDestroy$.next();
+    this.onDestroy$.complete();
+    this.onDestroy.emit();
+  }
+
+  abstract initializeControl(data?: TD): void;
+
+  abstract _patchValue(update: { previous: TD; current: TD }): void;
+}
+
+@Directive()
+export abstract class FormBlockControl<TD> extends FormBlock<TD, UntypedFormControl> {
+  @Input()
+  requiredMark: boolean;
+
+  private _validatorFns: ValidatorFn[];
+
+  @Input()
+  get validatorFns() {
+    return this._validatorFns;
+  }
+  set validatorFns(value: ValidatorFn[]) {
+    this._validatorFns = value;
+    if (this.control) {
+      this.updateValidators();
+    }
+  }
+
+  private _asyncValidatorFns: AsyncValidatorFn[];
+
+  @Input()
+  get asyncValidatorFns() {
+    return this._asyncValidatorFns;
+  }
+  set asyncValidatorFns(value: AsyncValidatorFn[]) {
+    this._asyncValidatorFns = value;
+    if (this.control) {
+      this.updateValidators();
+    }
+  }
+
+  constructor() {
+    super();
+  }
+
+  abstract updateValidators(): void;
+
+  getValidatorFn(): ValidatorFn[] {
+    return this.validatorFns ?? [];
+  }
+
+  getAsyncValidatorFn(): AsyncValidatorFn[] {
+    return this.asyncValidatorFns ?? [];
+  }
+}
+
+@Directive()
+export abstract class FormBlockGroup<TD> extends FormBlock<TD, UntypedFormGroup> {
+  private _requiredMarks: Array<keyof TD>;
+
+  @Input()
+  get requiredMarks() {
+    return this._requiredMarks ?? [];
+  }
+  set requiredMarks(value: Array<keyof TD>) {
+    this._requiredMarks = value;
+  }
+
+  private _validatorFns: Record<keyof TD, ValidatorFn[]>;
+
+  @Input()
+  get validatorFns() {
+    return this._validatorFns ?? ({} as Record<keyof TD, ValidatorFn[]>);
+  }
+  set validatorFns(value: Record<keyof TD, ValidatorFn[]>) {
+    this._validatorFns = value;
+    if (this.control) {
+      this.updateValidators();
+    }
+  }
+
+  constructor() {
+    super();
+  }
+
+  abstract updateValidators(): void;
+
+  getValidatorFn(key: keyof TD): ValidatorFn[] {
+    return this.validatorFns[key] ?? [];
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/index.ts b/apps/page/customer-rd/src/lib/components/form-blocks/index.ts
new file mode 100644
index 000000000..6c5a285b8
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/index.ts
@@ -0,0 +1,12 @@
+export * from './accept-agb';
+export * from './address';
+export * from './birth-date';
+export * from './deviating-address';
+export * from './email';
+export * from './interests';
+export * from './name';
+export * from './newsletter';
+export * from './organisation';
+export * from './p4m-number';
+export * from './phone-numbers';
+export * from './form-block';
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/interests/index.ts b/apps/page/customer-rd/src/lib/components/form-blocks/interests/index.ts
new file mode 100644
index 000000000..eaa7186f4
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/interests/index.ts
@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './interests-form-block.component';
+export * from './interests-form-block.module';
+// end:ng42.barrel
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block-data.ts b/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block-data.ts
new file mode 100644
index 000000000..16ae79864
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block-data.ts
@@ -0,0 +1 @@
+export type InterestsFormBlockData = Record<string, boolean>;
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.component.html b/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.component.html
new file mode 100644
index 000000000..efa44478b
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.component.html
@@ -0,0 +1,12 @@
+<div class="interests-description">Geben Sie Interessen an, um Ihre persönlichen Kontoangaben zu verfeinern.</div>
+<div class="interests-wrapper" [formGroup]="control">
+  <ui-checkbox
+    *ngFor="let pair of interests | keyvalue; let idx = index"
+    [formControlName]="pair.key"
+    [tabindex]="tabIndexStart + idx"
+    [autofocus]="focusAfterInit"
+    [readonly]="readonly"
+  >
+    {{ pair.value }}
+  </ui-checkbox>
+</div>
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.component.scss b/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.component.scss
new file mode 100644
index 000000000..58cbbac85
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.component.scss
@@ -0,0 +1,11 @@
+:host {
+  @apply grid grid-flow-row gap-6;
+}
+
+.interests-description {
+  @apply font-bold;
+}
+
+.interests-wrapper {
+  @apply grid grid-cols-2 gap-4 font-semibold;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.component.ts b/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.component.ts
new file mode 100644
index 000000000..19faa565b
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.component.ts
@@ -0,0 +1,88 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormBlock } from '../form-block';
+import { InterestsFormBlockData } from './interests-form-block-data';
+import { LoyaltyCardService } from '@swagger/crm';
+import { shareReplay } from 'rxjs/operators';
+import { isEqual } from 'lodash';
+import { memorize } from '@utils/common';
+
+@Component({
+  selector: 'app-interests-form-block',
+  templateUrl: 'interests-form-block.component.html',
+  styleUrls: ['interests-form-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class InterestsFormBlockComponent extends FormBlock<InterestsFormBlockData, UntypedFormGroup> {
+  private _interests: Map<string, string>;
+
+  get interests(): Map<string, string> {
+    return this._interests;
+  }
+  set interests(value: Map<string, string>) {
+    if (!isEqual(this._interests, value)) {
+      this._interests = value;
+      if (this.control) {
+        this.updateInterestControls();
+      }
+    }
+  }
+
+  get tabIndexEnd() {
+    return this.tabIndexStart + this.interests?.keys.length;
+  }
+
+  constructor(private _fb: UntypedFormBuilder, private _LoyaltyCardService: LoyaltyCardService) {
+    super();
+
+    this.getInterests().subscribe({
+      next: (response) => {
+        const interests = new Map<string, string>();
+        response.result.forEach((preference) => {
+          interests.set(preference.key, preference.value);
+        });
+        this.interests = interests;
+      },
+      error: (error) => {
+        console.error(error);
+      },
+    });
+  }
+
+  @memorize({ ttl: 28800000 })
+  getInterests() {
+    return this._LoyaltyCardService.LoyaltyCardListInteressen().pipe(shareReplay(1));
+  }
+
+  updateInterestControls() {
+    const fData = this.data ?? {};
+    this.interests?.forEach((value, key) => {
+      if (!this.control.contains(key)) {
+        this.control.addControl(key, new UntypedFormControl(fData[key] ?? false));
+      }
+    });
+
+    Object.keys(this.control.controls).forEach((key) => {
+      if (!this.interests.has(key)) {
+        this.control.removeControl(key);
+      }
+    });
+  }
+
+  initializeControl(data?: InterestsFormBlockData): void {
+    const fData = data ?? {};
+    this.control = this._fb.group({});
+
+    this.interests?.forEach((value, key) => {
+      this.control.addControl(key, new UntypedFormControl(fData[key] ?? false));
+    });
+  }
+
+  _patchValue(update: { previous: InterestsFormBlockData; current: InterestsFormBlockData }): void {
+    const fData = update.current ?? {};
+
+    this.interests?.forEach((value, key) => {
+      this.control.get(key).patchValue(fData[key] ?? false);
+    });
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.module.ts b/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.module.ts
new file mode 100644
index 000000000..2fb4453c1
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/interests/interests-form-block.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { InterestsFormBlockComponent } from './interests-form-block.component';
+import { UiCheckboxModule } from '@ui/checkbox';
+import { ReactiveFormsModule } from '@angular/forms';
+import { UiCommonModule } from '@ui/common';
+
+@NgModule({
+  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiCheckboxModule],
+  exports: [InterestsFormBlockComponent],
+  declarations: [InterestsFormBlockComponent],
+})
+export class InterestsFormBlockModule {}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/name/index.ts b/apps/page/customer-rd/src/lib/components/form-blocks/name/index.ts
new file mode 100644
index 000000000..01813bb9e
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/name/index.ts
@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './name-form-block.component';
+export * from './name-form-block.module';
+// end:ng42.barrel
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block-data.ts b/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block-data.ts
new file mode 100644
index 000000000..cb9d91fb5
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block-data.ts
@@ -0,0 +1,8 @@
+import { Gender } from '@swagger/crm';
+
+export interface NameFormBlockData {
+  gender?: Gender;
+  title?: string;
+  firstName?: string;
+  lastName?: string;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.component.html b/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.component.html
new file mode 100644
index 000000000..09e408c20
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.component.html
@@ -0,0 +1,47 @@
+<ng-container [formGroup]="control">
+  <label class="grid grid-flow-row gap-1">
+    <span>Anrede</span>
+
+    <shared-select formControlName="gender" placeholder="Anrede" [readonly]="readonly" [tabindex]="tabIndexStart">
+      <shared-select-option [value]="2">Herr</shared-select-option>
+      <shared-select-option [value]="4">Frau</shared-select-option>
+    </shared-select>
+  </label>
+
+  <label class="grid grid-flow-row gap-1">
+    <span>Titel</span>
+
+    <shared-select formControlName="title" placeholder="Titel" [readonly]="readonly" [tabindex]="tabIndexStart + 1">
+      <shared-select-option value="Dipl.-Ing.">Dipl.-Ing.</shared-select-option>
+      <shared-select-option value="Dr.">Dr.</shared-select-option>
+      <shared-select-option value="Dr. med.">Dr. med.</shared-select-option>
+      <shared-select-option value="Prof.">Prof.</shared-select-option>
+      <shared-select-option value="Prof. Dr.">Prof. Dr.</shared-select-option>
+      <shared-select-option value="RA">RA</shared-select-option>
+    </shared-select>
+  </label>
+
+  <!-- <ui-form-control [clearable]="!readonly" label="Anrede" [requiredMark]="requiredMarks.includes('gender') ? '*' : ''">
+    <ui-select formControlName="gender" [tabindex]="tabIndexStart" [autofocus]="focusAfterInit" [readonly]="readonly">
+      <ui-select-option [value]="2" label="Herr"></ui-select-option>
+      <ui-select-option [value]="4" label="Frau"></ui-select-option>
+    </ui-select>
+  </ui-form-control> -->
+  <!-- <ui-form-control [clearable]="!readonly" label="Titel" [requiredMark]="requiredMarks.includes('title') ? '*' : ''">
+    <ui-select formControlName="title" [tabindex]="tabIndexStart + 1" [readonly]="readonly">
+      <ui-select-option value="Dipl.-Ing." label="Dipl.-Ing."></ui-select-option>
+      <ui-select-option value="Dr." label="Dr."></ui-select-option>
+      <ui-select-option value="Dr. med." label="Dr. med."></ui-select-option>
+      <ui-select-option value="Prof." label="Prof."></ui-select-option>
+      <ui-select-option value="Prof. Dr." label="Prof. Dr."></ui-select-option>
+      <ui-select-option value="RA" label="RA"></ui-select-option>
+    </ui-select>
+  </ui-form-control> -->
+
+  <ui-form-control label="Nachname" [requiredMark]="requiredMarks.includes('firstName') ? '*' : ''">
+    <input uiInput type="text" formControlName="lastName" [tabindex]="tabIndexStart + 2" [readonly]="readonly" />
+  </ui-form-control>
+  <ui-form-control label="Vorname" [requiredMark]="requiredMarks.includes('lastName') ? '*' : ''">
+    <input uiInput type="text" formControlName="firstName" [tabindex]="tabIndexStart + 3" [readonly]="readonly" />
+  </ui-form-control>
+</ng-container>
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.component.scss b/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.component.scss
new file mode 100644
index 000000000..c4f5f1d81
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.component.scss
@@ -0,0 +1,3 @@
+:host {
+  @apply grid grid-cols-2 gap-x-8;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.component.ts b/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.component.ts
new file mode 100644
index 000000000..c6f30fcbc
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.component.ts
@@ -0,0 +1,56 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormBlockGroup } from '../form-block';
+import { NameFormBlockData } from './name-form-block-data';
+import { Gender } from '@swagger/crm';
+
+@Component({
+  selector: 'app-name-form-block',
+  templateUrl: 'name-form-block.component.html',
+  styleUrls: ['name-form-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NameFormBlockComponent extends FormBlockGroup<NameFormBlockData> {
+  get tabIndexEnd() {
+    return this.tabIndexStart + 3;
+  }
+
+  displayGenderNameFn = (gender: Gender) => {
+    if (gender == 2) {
+      return 'Herr';
+    }
+    if (gender == 4) {
+      return 'Frau';
+    }
+
+    return undefined;
+  };
+
+  constructor() {
+    super();
+  }
+
+  initializeControl(data?: NameFormBlockData): void {
+    this.control = new UntypedFormGroup({
+      gender: new UntypedFormControl(data?.gender, this.getValidatorFn('gender')),
+      title: new UntypedFormControl(data?.title, this.getValidatorFn('title')),
+      firstName: new UntypedFormControl(data?.firstName ?? '', this.getValidatorFn('firstName')),
+      lastName: new UntypedFormControl(data?.lastName ?? '', this.getValidatorFn('lastName')),
+    });
+  }
+  _patchValue(update: { previous: NameFormBlockData; current: NameFormBlockData }): void {
+    this.control.patchValue({
+      gender: update.current?.gender ?? 0,
+      title: update.current?.title ?? '',
+      firstName: update.current?.firstName ?? '',
+      lastName: update.current?.lastName ?? '',
+    });
+  }
+
+  updateValidators(): void {
+    this.control.get('gender').setValidators(this.getValidatorFn('gender'));
+    this.control.get('title').setValidators(this.getValidatorFn('title'));
+    this.control.get('firstName').setValidators(this.getValidatorFn('firstName'));
+    this.control.get('lastName').setValidators(this.getValidatorFn('lastName'));
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.module.ts b/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.module.ts
new file mode 100644
index 000000000..d318361d4
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/name/name-form-block.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { NameFormBlockComponent } from './name-form-block.component';
+import { UiFormControlModule } from '@ui/form-control';
+import { UiInputModule } from '@ui/input';
+import { ReactiveFormsModule } from '@angular/forms';
+import { UiCommonModule } from '@ui/common';
+import { SelectModule } from '@shared/components/select';
+
+@NgModule({
+  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule, SelectModule],
+  exports: [NameFormBlockComponent],
+  declarations: [NameFormBlockComponent],
+})
+export class NameFormBlockModule {}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/index.ts b/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/index.ts
new file mode 100644
index 000000000..cb88e4ed2
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/index.ts
@@ -0,0 +1,2 @@
+export * from './newsletter-form-block.component';
+export * from './newsletter-form-block.module';
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.component.html b/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.component.html
new file mode 100644
index 000000000..2295286e6
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.component.html
@@ -0,0 +1,3 @@
+<ui-checkbox [formControl]="control" [tabindex]="tabIndexStart" [autofocus]="focusAfterInit" [readonly]="readonly">
+  Erhalten Sie 250 Lesepunkte mit der Anmeldung zum Newsletter und eine Geburtstagsüberraschung
+</ui-checkbox>
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.component.scss b/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.component.scss
new file mode 100644
index 000000000..52b729033
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.component.scss
@@ -0,0 +1,11 @@
+:host {
+  @apply block;
+}
+
+ui-checkbox {
+  @apply font-semibold;
+}
+
+::ng-deep app-newsletter-form-block ui-checkbox {
+  align-items: flex-start !important;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.component.ts b/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.component.ts
new file mode 100644
index 000000000..e3c85d84d
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.component.ts
@@ -0,0 +1,27 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { UntypedFormControl } from '@angular/forms';
+import { FormBlock } from '../form-block';
+
+@Component({
+  selector: 'app-newsletter-form-block',
+  templateUrl: 'newsletter-form-block.component.html',
+  styleUrls: ['newsletter-form-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NewsletterFormBlockComponent extends FormBlock<boolean, UntypedFormControl> {
+  get tabIndexEnd() {
+    return this.tabIndexStart;
+  }
+
+  constructor() {
+    super();
+  }
+
+  initializeControl(data?: boolean): void {
+    this.control = new UntypedFormControl(data ?? false);
+  }
+
+  _patchValue(update: { previous: boolean; current: boolean }): void {
+    this.control.patchValue(update.current);
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.module.ts b/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.module.ts
new file mode 100644
index 000000000..e7de62f46
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/newsletter/newsletter-form-block.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { NewsletterFormBlockComponent } from './newsletter-form-block.component';
+import { UiCheckboxModule } from '@ui/checkbox';
+import { ReactiveFormsModule } from '@angular/forms';
+import { UiCommonModule } from '@ui/common';
+
+@NgModule({
+  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiCheckboxModule],
+  exports: [NewsletterFormBlockComponent],
+  declarations: [NewsletterFormBlockComponent],
+})
+export class NewsletterFormBlockModule {}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/organisation/index.ts b/apps/page/customer-rd/src/lib/components/form-blocks/organisation/index.ts
new file mode 100644
index 000000000..7c34f6ddf
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/organisation/index.ts
@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './organisation-form-block.component';
+export * from './organisation-form-block.module';
+// end:ng42.barrel
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block-data.ts b/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block-data.ts
new file mode 100644
index 000000000..c9eac6778
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block-data.ts
@@ -0,0 +1,5 @@
+export interface OrganisationFormBlockData {
+  name?: string;
+  department?: string;
+  vatId?: string;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.component.html b/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.component.html
new file mode 100644
index 000000000..bdbf3bc58
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.component.html
@@ -0,0 +1,13 @@
+<ng-container [formGroup]="control">
+  <ui-form-control class="col-span-2" label="Firmenname" [requiredMark]="requiredMarks.includes('name') ? '*' : ''">
+    <input uiInput type="text" formControlName="name" [tabindex]="tabIndexStart" [autofocus]="focusAfterInit" [readonly]="readonly" />
+  </ui-form-control>
+  <ng-container *ngIf="appearence === 'default'">
+    <ui-form-control label="Abteilung" [requiredMark]="requiredMarks.includes('department') ? '*' : ''">
+      <input uiInput type="text" formControlName="department" [tabindex]="tabIndexStart + 1" [readonly]="readonly" />
+    </ui-form-control>
+    <ui-form-control label="USt-ID" [requiredMark]="requiredMarks.includes('vatId') ? '*' : ''">
+      <input uiInput type="text" formControlName="vatId" [tabindex]="tabIndexStart + 2" [readonly]="readonly" />
+    </ui-form-control>
+  </ng-container>
+</ng-container>
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.component.scss b/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.component.scss
new file mode 100644
index 000000000..c4f5f1d81
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.component.scss
@@ -0,0 +1,3 @@
+:host {
+  @apply grid grid-cols-2 gap-x-8;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.component.ts b/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.component.ts
new file mode 100644
index 000000000..72c3bcd34
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.component.ts
@@ -0,0 +1,47 @@
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormBlockGroup } from '../form-block';
+import { OrganisationFormBlockData } from './organisation-form-block-data';
+
+@Component({
+  selector: 'app-organisation-form-block',
+  templateUrl: 'organisation-form-block.component.html',
+  styleUrls: ['organisation-form-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class OrganisationFormBlockComponent extends FormBlockGroup<OrganisationFormBlockData> {
+  @Input()
+  appearence: 'default' | 'compact' = 'default';
+
+  get tabIndexEnd() {
+    return this.tabIndexStart + 2;
+  }
+
+  constructor() {
+    super();
+  }
+
+  initializeControl(data?: OrganisationFormBlockData): void {
+    this.control = new UntypedFormGroup({
+      name: new UntypedFormControl(data?.name ?? '', this.getValidatorFn('name')),
+      department: new UntypedFormControl(data?.department ?? '', this.getValidatorFn('department')),
+      vatId: new UntypedFormControl(data?.vatId ?? '', this.getValidatorFn('vatId')),
+    });
+  }
+  _patchValue(update: { previous: OrganisationFormBlockData; current: OrganisationFormBlockData }): void {
+    this.control.patchValue({
+      name: update.current?.name ?? '',
+      department: update.current?.department ?? '',
+      vatId: update.current?.vatId ?? '',
+    });
+  }
+
+  updateValidators(): void {
+    this.control.setValidators(this.getValidatorFn('name'));
+    this.control.get('name').updateValueAndValidity();
+    this.control.setValidators(this.getValidatorFn('department'));
+    this.control.get('department').updateValueAndValidity();
+    this.control.setValidators(this.getValidatorFn('vatId'));
+    this.control.get('vatId').updateValueAndValidity();
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.module.ts b/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.module.ts
new file mode 100644
index 000000000..83fa58f1f
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/organisation/organisation-form-block.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { OrganisationFormBlockComponent } from './organisation-form-block.component';
+import { UiFormControlModule } from '@ui/form-control';
+import { UiInputModule } from '@ui/input';
+import { ReactiveFormsModule } from '@angular/forms';
+import { UiCommonModule } from '@ui/common';
+
+@NgModule({
+  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule],
+  exports: [OrganisationFormBlockComponent],
+  declarations: [OrganisationFormBlockComponent],
+})
+export class OrganisationFormBlockModule {}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/index.ts b/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/index.ts
new file mode 100644
index 000000000..8ead67a47
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/index.ts
@@ -0,0 +1,4 @@
+// start:ng42.barrel
+export * from './p4m-number-form-block.component';
+export * from './p4m-number-form-block.module';
+// end:ng42.barrel
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.html b/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.html
new file mode 100644
index 000000000..5106988e9
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.html
@@ -0,0 +1,6 @@
+<ui-form-control label="Kundenkartencode" requiredMark="*" class="flex-grow">
+  <input uiInput type="text" [formControl]="control" [tabindex]="tabIndexStart" [readonly]="readonly" [autofocus]="focusAfterInit" />
+</ui-form-control>
+<button type="button" *ngIf="!readonly && canScan()" (click)="scan()">
+  <shared-icon icon="barcode-scan" [size]="32"></shared-icon>
+</button>
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.scss b/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.scss
new file mode 100644
index 000000000..d612e8aee
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.scss
@@ -0,0 +1,11 @@
+:host {
+  @apply block relative;
+}
+
+button {
+  @apply absolute -right-2 top-0 h-14 w-14 border-none outline-none bg-transparent items-center justify-center rounded-full bg-brand;
+
+  shared-icon {
+    @apply flex justify-center items-center text-white;
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.ts b/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.ts
new file mode 100644
index 000000000..d02b3a88e
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.ts
@@ -0,0 +1,45 @@
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
+import { UntypedFormControl, Validators } from '@angular/forms';
+import { FormBlockControl } from '../form-block';
+import { ScanAdapterService } from '@adapter/scan';
+
+@Component({
+  selector: 'app-p4m-number-form-block',
+  templateUrl: 'p4m-number-form-block.component.html',
+  styleUrls: ['p4m-number-form-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class P4mNumberFormBlockComponent extends FormBlockControl<string> {
+  get tabIndexEnd() {
+    return this.tabIndexStart;
+  }
+
+  constructor(private scanAdapter: ScanAdapterService, private changeDetectorRef: ChangeDetectorRef) {
+    super();
+  }
+
+  updateValidators(): void {
+    this.control.setValidators([...this.getValidatorFn()]);
+    this.control.setAsyncValidators(this.getAsyncValidatorFn());
+    this.control.updateValueAndValidity();
+  }
+
+  initializeControl(data?: string): void {
+    this.control = new UntypedFormControl(data ?? '', [Validators.required], this.getAsyncValidatorFn());
+  }
+
+  _patchValue(update: { previous: string; current: string }): void {
+    this.control.patchValue(update.current);
+  }
+
+  scan() {
+    this.scanAdapter.scan().subscribe((result) => {
+      this.control.patchValue(result);
+      this.changeDetectorRef.markForCheck();
+    });
+  }
+
+  canScan() {
+    return this.scanAdapter.isReady();
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.module.ts b/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.module.ts
new file mode 100644
index 000000000..f3b93fa90
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.module.ts
@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { P4mNumberFormBlockComponent } from './p4m-number-form-block.component';
+import { ReactiveFormsModule } from '@angular/forms';
+import { UiFormControlModule } from '@ui/form-control';
+import { UiInputModule } from '@ui/input';
+import { UiCommonModule } from '@ui/common';
+import { IconComponent } from '@shared/components/icon';
+
+@NgModule({
+  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule, IconComponent],
+  exports: [P4mNumberFormBlockComponent],
+  declarations: [P4mNumberFormBlockComponent],
+})
+export class P4mNumberFormBlockModule {}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/index.ts b/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/index.ts
new file mode 100644
index 000000000..74870d84c
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/index.ts
@@ -0,0 +1,3 @@
+export * from './phone-numbers-form-block-data';
+export * from './phone-numbers-form-block.component';
+export * from './phone-numbers-form-block.module';
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block-data.ts b/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block-data.ts
new file mode 100644
index 000000000..f98f30ab4
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block-data.ts
@@ -0,0 +1,4 @@
+export interface PhoneNumbersFormBlockData {
+  phone: string;
+  mobile: string;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.component.html b/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.component.html
new file mode 100644
index 000000000..2b75b9e47
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.component.html
@@ -0,0 +1,8 @@
+<ng-container [formGroup]="control">
+  <ui-form-control label="Festnetznummer" [requiredMark]="requiredMarks.includes('phone') ? '*' : ''">
+    <input uiInput type="tel" formControlName="phone" [tabindex]="tabIndexStart" [autofocus]="focusAfterInit" [readonly]="readonly" />
+  </ui-form-control>
+  <ui-form-control label="Mobilnummer" [clearable]="false" [requiredMark]="requiredMarks.includes('mobile') ? '*' : ''">
+    <input uiInput type="tel" formControlName="mobile" [tabindex]="tabIndexStart + 1" [readonly]="readonly" />
+  </ui-form-control>
+</ng-container>
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.component.scss b/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.component.scss
new file mode 100644
index 000000000..c4f5f1d81
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.component.scss
@@ -0,0 +1,3 @@
+:host {
+  @apply grid grid-cols-2 gap-x-8;
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.component.ts b/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.component.ts
new file mode 100644
index 000000000..ff5bbea6f
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.component.ts
@@ -0,0 +1,37 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { FormBlockGroup } from '../form-block';
+import { PhoneNumbersFormBlockData } from './phone-numbers-form-block-data';
+
+@Component({
+  selector: 'app-phone-numbers-form-block',
+  templateUrl: 'phone-numbers-form-block.component.html',
+  styleUrls: ['phone-numbers-form-block.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class PhoneNumbersFormBlockComponent extends FormBlockGroup<PhoneNumbersFormBlockData> {
+  get tabIndexEnd() {
+    return this.tabIndexStart + 1;
+  }
+
+  initializeControl(data?: PhoneNumbersFormBlockData): void {
+    this.control = new UntypedFormGroup({
+      phone: new UntypedFormControl(data?.phone ?? '', this.getValidatorFn('phone')),
+      mobile: new UntypedFormControl(data?.mobile ?? '', this.getValidatorFn('mobile')),
+    });
+  }
+
+  _patchValue(update: { previous: PhoneNumbersFormBlockData; current: PhoneNumbersFormBlockData }): void {
+    this.control.patchValue({
+      phone: update.current.phone ?? '',
+      mobile: update.current.mobile ?? '',
+    });
+  }
+
+  updateValidators(): void {
+    this.control.setValidators(this.getValidatorFn('phone'));
+    this.control.get('phone').updateValueAndValidity();
+    this.control.setValidators(this.getValidatorFn('mobile'));
+    this.control.get('mobile').updateValueAndValidity();
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.module.ts b/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.module.ts
new file mode 100644
index 000000000..831b386f7
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/form-blocks/phone-numbers/phone-numbers-form-block.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { UiFormControlModule } from '@ui/form-control';
+import { UiInputModule } from '@ui/input';
+import { ReactiveFormsModule } from '@angular/forms';
+import { PhoneNumbersFormBlockComponent } from './phone-numbers-form-block.component';
+import { UiCommonModule } from '@ui/common';
+
+@NgModule({
+  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule],
+  exports: [PhoneNumbersFormBlockComponent],
+  declarations: [PhoneNumbersFormBlockComponent],
+})
+export class PhoneNumbersFormBlockModule {}
diff --git a/apps/page/customer-rd/src/lib/components/split-screen/index.ts b/apps/page/customer-rd/src/lib/components/split-screen/index.ts
new file mode 100644
index 000000000..30149ff99
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/split-screen/index.ts
@@ -0,0 +1,3 @@
+export * from './side-template.directive';
+export * from './split-screen.component';
+export * from './split-screen.module';
diff --git a/apps/page/customer-rd/src/lib/components/split-screen/side-template.directive.ts b/apps/page/customer-rd/src/lib/components/split-screen/side-template.directive.ts
new file mode 100644
index 000000000..d73b76787
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/split-screen/side-template.directive.ts
@@ -0,0 +1,9 @@
+import { Directive, Input, TemplateRef } from '@angular/core';
+
+@Directive({ selector: '[sideTemplate]', standalone: true })
+export class SideTemplateDirective {
+  @Input()
+  sideTemplate: string = 'default';
+
+  constructor(public readonly templateRef: TemplateRef<any>) {}
+}
diff --git a/apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.css b/apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.css
new file mode 100644
index 000000000..edd1be05e
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.css
@@ -0,0 +1,3 @@
+:host {
+  @apply grid grid-cols-[27.5rem_auto] gap-6;
+}
diff --git a/apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.html b/apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.html
new file mode 100644
index 000000000..37e547a15
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.html
@@ -0,0 +1,6 @@
+<div *ngIf="hasSide">
+  <ng-container *ngTemplateOutlet="sideTemplate?.templateRef"></ng-container>
+</div>
+<div [class.col-span-2]="!hasSide" class="overflow-y-scroll">
+  <ng-content></ng-content>
+</div>
diff --git a/apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.ts b/apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.ts
new file mode 100644
index 000000000..5ec1bbb5c
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.ts
@@ -0,0 +1,83 @@
+import { CommonModule } from '@angular/common';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  ContentChildren,
+  QueryList,
+  AfterContentInit,
+  ChangeDetectorRef,
+  OnDestroy,
+  HostListener,
+} from '@angular/core';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+import { SideTemplateDirective } from './side-template.directive';
+import { EnvironmentService } from '@core/environment';
+
+@Component({
+  selector: 'page-split-screen',
+  templateUrl: 'split-screen.component.html',
+  styleUrls: ['split-screen.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule],
+})
+export class SplitScreenComponent implements AfterContentInit, OnDestroy {
+  side$ = new BehaviorSubject<string>('default');
+
+  @Input()
+  get side() {
+    return this.side$.value;
+  }
+  set side(value: string) {
+    this.side$.next(value ?? 'default');
+  }
+
+  get hasSide() {
+    return !!this.sideTemplate;
+  }
+
+  @ContentChildren(SideTemplateDirective)
+  sideTemplates: QueryList<SideTemplateDirective>;
+
+  sideTemplate: SideTemplateDirective | undefined;
+
+  private _onDestroy$ = new Subject<void>();
+
+  constructor(private _env: EnvironmentService, private _cdr: ChangeDetectorRef) {}
+
+  ngAfterContentInit(): void {
+    this.sideTemplates.changes.pipe(takeUntil(this._onDestroy$)).subscribe(() => {
+      this.checkAndUpdateSide();
+    });
+
+    this.side$.pipe(takeUntil(this._onDestroy$)).subscribe(() => {
+      this.checkAndUpdateSide();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._onDestroy$.next();
+    this._onDestroy$.complete();
+  }
+
+  @HostListener('window:resize')
+  private checkAndUpdateSide() {
+    if (this._env.matchDesktopSmall() || this._env.matchTablet()) {
+      this.sideTemplate = undefined;
+      this._cdr.markForCheck();
+      return;
+    }
+
+    const sideTemplate = this.sideTemplates.find((sideTemplate) => sideTemplate.sideTemplate === this.side);
+
+    if (sideTemplate !== this.sideTemplate) {
+      this.sideTemplate = sideTemplate;
+      this._cdr.markForCheck();
+    } else if (!sideTemplate) {
+      this.sideTemplate = undefined;
+      this._cdr.markForCheck();
+    }
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/components/split-screen/split-screen.module.ts b/apps/page/customer-rd/src/lib/components/split-screen/split-screen.module.ts
new file mode 100644
index 000000000..969e1457b
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/components/split-screen/split-screen.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+
+import { SplitScreenComponent } from './split-screen.component';
+import { SideTemplateDirective } from './side-template.directive';
+
+@NgModule({
+  imports: [SplitScreenComponent, SideTemplateDirective],
+  exports: [SplitScreenComponent, SideTemplateDirective],
+})
+export class SplitScreenModule {}
diff --git a/apps/page/customer-rd/src/lib/create-customer/abstract-create-customer.ts b/apps/page/customer-rd/src/lib/create-customer/abstract-create-customer.ts
new file mode 100644
index 000000000..be9a4a8e1
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/abstract-create-customer.ts
@@ -0,0 +1,418 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { ChangeDetectorRef, Directive, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { AbstractControl, AsyncValidatorFn, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+import { BreadcrumbService } from '@core/breadcrumb';
+import { CrmCustomerService } from '@domain/crm';
+import { AddressDTO, CustomerDTO, PayerDTO, ShippingAddressDTO } from '@swagger/crm';
+import { UiErrorModalComponent, UiModalService } from '@ui/modal';
+import { UiValidators } from '@ui/validators';
+import { isNull } from 'lodash';
+import { BehaviorSubject, Observable, of, Subject } from 'rxjs';
+import {
+  first,
+  map,
+  distinctUntilChanged,
+  shareReplay,
+  delay,
+  mergeMap,
+  catchError,
+  tap,
+  bufferCount,
+  startWith,
+  takeUntil,
+} from 'rxjs/operators';
+import { AddressFormBlockComponent, DeviatingAddressFormBlockComponent, DeviatingAddressFormBlockData } from '../components/form-blocks';
+import { FormBlock } from '../components/form-blocks/form-block';
+import { CustomerCreateFormData, decodeFormData, encodeFormData } from './customer-create-form-data';
+import { AddressSelectionModalService } from '../modals';
+
+@Directive()
+export abstract class AbstractCreateCustomer implements OnInit, OnDestroy {
+  protected onDestroy$ = new Subject<void>();
+
+  abstract validateAddress?: boolean;
+  abstract validateShippingAddress?: boolean;
+
+  private _formData = new BehaviorSubject<CustomerCreateFormData>({});
+
+  formData$ = this._formData.asObservable();
+
+  get formData() {
+    return this._formData.getValue();
+  }
+
+  form = new UntypedFormGroup({});
+
+  latestProcessId: number;
+
+  processId$: Observable<number>;
+
+  busy$ = new BehaviorSubject(false);
+
+  customerExists$ = new Subject<boolean>();
+
+  @ViewChild(DeviatingAddressFormBlockComponent)
+  deviatingDeliveryAddressFormBlock: DeviatingAddressFormBlockComponent;
+
+  @ViewChild(AddressFormBlockComponent)
+  addressFormBlock: AddressFormBlockComponent;
+
+  abstract customerType: string;
+
+  constructor(
+    protected activatedRoute: ActivatedRoute,
+    protected router: Router,
+    protected customerService: CrmCustomerService,
+    protected addressVlidationModal: AddressSelectionModalService,
+    protected modal: UiModalService,
+    protected breadcrumb: BreadcrumbService,
+    protected cdr: ChangeDetectorRef
+  ) {
+    this._initProcessId$();
+  }
+
+  ngOnInit() {}
+
+  private _initProcessId$(): void {
+    this.processId$ = this.activatedRoute.parent.parent.data.pipe(
+      map((data) => +data.processId),
+      tap((processId) => (this.latestProcessId = processId)),
+      distinctUntilChanged(),
+      shareReplay(1)
+    );
+
+    this.processId$
+      .pipe(startWith(undefined), bufferCount(2, 1), takeUntil(this.onDestroy$), delay(100))
+      .subscribe(async ([previous, current]) => {
+        if (previous === undefined) {
+          await this._initFormData();
+          await this.updateBreadcrumb(current, this.formData);
+        } else if (previous !== current) {
+          await this.updateBreadcrumb(previous, this.formData);
+          await this._initFormData();
+          await this.updateBreadcrumb(current, this.formData);
+        }
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.updateBreadcrumb(this.latestProcessId, this.formData);
+    this.onDestroy$.next();
+    this.onDestroy$.complete();
+    this.busy$.complete();
+    this._formData.complete();
+  }
+
+  private async _initFormData() {
+    const formData = await this.activatedRoute.queryParams
+      .pipe(
+        map((params) => params['formData']),
+        first()
+      )
+      .toPromise();
+
+    if (formData) {
+      const parsedFormData = decodeFormData(formData);
+      this._formData.next(parsedFormData);
+    }
+  }
+
+  async updateBreadcrumb(processId: number, formData: CustomerCreateFormData) {
+    await this.cleanupBreadcrumb(processId);
+    await this.addOrUpdateBreadcrumb(processId, formData);
+  }
+
+  async cleanupBreadcrumb(processId: number) {
+    const crumbs = await this.breadcrumb.getBreadcrumbsByKeyAndTags$(processId, ['customer', 'main']).pipe(first()).toPromise();
+    for (const crumb of crumbs) {
+      await this.breadcrumb.removeBreadcrumbsAfter(crumb.id);
+    }
+  }
+
+  async addOrUpdateBreadcrumb(processId: number, formData: CustomerCreateFormData) {
+    await this.breadcrumb.addOrUpdateBreadcrumbIfNotExists({
+      key: processId,
+      name: 'Kundendaten erfassen',
+      path: this.getPath(processId),
+      params: this.getQueryParams(formData),
+      tags: ['customer', 'create'],
+      section: 'customer',
+    });
+  }
+
+  getPath(processId: number) {
+    return ['/kunde', processId, 'customer', 'create', this.customerType].join('/');
+  }
+
+  getQueryParams(formData: CustomerCreateFormData): Record<string, string> {
+    const param = formData ? encodeFormData(formData) : undefined;
+    return { ...this.activatedRoute.snapshot.queryParams, formData: param };
+  }
+
+  async customerTypeChanged(customerType: string) {
+    const processId = await this.processId$.pipe(first()).toPromise();
+    this.router.navigate(['/kunde', processId, 'customer', 'create', customerType], {
+      queryParams: this.getQueryParams(this.formData),
+    });
+  }
+
+  addFormBlock(key: keyof CustomerCreateFormData, block: FormBlock<any, AbstractControl>) {
+    this.form.addControl(key, block.control);
+    this.cdr.markForCheck();
+  }
+
+  patchFormData(key: keyof CustomerCreateFormData, value: any) {
+    this._formData.next({ ...this.formData, [key]: value });
+    this.cdr.markForCheck();
+  }
+
+  emailExistsValidator: AsyncValidatorFn = (control) => {
+    return of(control.value).pipe(
+      tap((_) => this.customerExists$.next(false)),
+      delay(500),
+      mergeMap((value) => {
+        return this.customerService.emailExists(value).pipe(
+          map((response) => {
+            if (response?.result) {
+              return { exists: response?.message };
+            }
+            return null;
+          }),
+          catchError((error) => {
+            if (error instanceof HttpErrorResponse) {
+              if (error?.error?.invalidProperties?.email) {
+                return of({ invalid: error.error.invalidProperties.email });
+              } else {
+                return of({ invalid: 'E-Mail ist ungültig' });
+              }
+            }
+          })
+        );
+      }),
+      tap((error) => {
+        if (error) {
+          this.customerExists$.next(true);
+        }
+        control.markAsTouched();
+        this.cdr.markForCheck();
+      })
+    );
+  };
+
+  checkLoyalityCardValidator: AsyncValidatorFn = (control) => {
+    return of(control.value).pipe(
+      delay(500),
+      mergeMap((value) => {
+        const customerId = this.formData?._meta?.customerDto?.id ?? this.formData?._meta?.customerInfoDto?.id;
+        return this.customerService.checkLoyaltyCard({ loyaltyCardNumber: value, customerId }).pipe(
+          map((response) => {
+            return !response?.error && (response as any)?.result === 1 ? null : { invalid: 'Kundenkartencode ist ungültig' };
+          }),
+          catchError((error) => {
+            if (error instanceof HttpErrorResponse) {
+              if (error?.error?.invalidProperties?.loyaltyCardNumber) {
+                return of({ invalid: error.error.invalidProperties.loyaltyCardNumber });
+              } else {
+                return of({ invalid: 'Kundenkartencode ist ungültig' });
+              }
+            }
+          })
+        );
+      }),
+      tap(() => {
+        control.markAsTouched();
+        this.cdr.markForCheck();
+      })
+    );
+  };
+
+  async navigateToCustomerDetails(customer: CustomerDTO) {
+    const processId = await this.processId$.pipe(first()).toPromise();
+    return this.router.navigate(['/kunde', processId, 'customer', customer.id]);
+  }
+
+  async validateAddressData(address: AddressDTO): Promise<AddressDTO> {
+    const addressValidationResult = await this.addressVlidationModal.validateAddress(address);
+
+    if (addressValidationResult !== undefined && (addressValidationResult as any) !== 'continue') {
+      address = addressValidationResult;
+    }
+
+    return address;
+  }
+
+  async getCustomerFromFormData(): Promise<CustomerDTO> {
+    const data: CustomerCreateFormData = this.form.value;
+
+    const customer: CustomerDTO = {
+      communicationDetails: {},
+      attributes: [],
+      features: [],
+    };
+
+    if (data.name) {
+      customer.gender = data.name.gender;
+      customer.title = data.name.title;
+      customer.firstName = data.name.firstName;
+      customer.lastName = data.name.lastName;
+    }
+
+    if (data.organisation) {
+      customer.organisation = data.organisation;
+    }
+
+    if (data.email) {
+      customer.communicationDetails.email = data.email;
+    }
+
+    if (data.phoneNumbers) {
+      customer.communicationDetails.mobile = data.phoneNumbers.mobile;
+      customer.communicationDetails.phone = data.phoneNumbers.phone;
+    }
+
+    if (data.address) {
+      customer.address = data.address;
+
+      if (this.validateAddress) {
+        try {
+          const address = await this.validateAddressData(customer.address);
+          this.addressFormBlock.data = address;
+          customer.address = address;
+        } catch (error) {
+          this.form.enable();
+          setTimeout(() => {
+            this.addressFormBlock.setAddressValidationError(error.error.invalidProperties);
+          }, 10);
+
+          return;
+        }
+      }
+    }
+
+    if (data.birthDate && isNull(UiValidators.date(new UntypedFormControl(data.birthDate)))) {
+      customer.dateOfBirth = data.birthDate;
+    }
+
+    if (data.billingAddress?.deviatingAddress) {
+      const billingAddress = this.mapToBillingAddress(data.billingAddress);
+
+      if (this.validateShippingAddress) {
+        try {
+          billingAddress.address = await this.validateAddressData(billingAddress.address);
+        } catch (error) {
+          this.form.enable();
+          setTimeout(() => {
+            this.addressFormBlock.setAddressValidationError(error.error.invalidProperties);
+          }, 10);
+
+          return;
+        }
+      }
+
+      customer.payers = [
+        {
+          payer: { data: billingAddress },
+          isDefault: new Date().toISOString(),
+        },
+      ];
+    }
+
+    if (data.deviatingDeliveryAddress?.deviatingAddress) {
+      const shippingAddress = this.mapToShippingAddress(data.deviatingDeliveryAddress);
+
+      if (this.validateShippingAddress) {
+        try {
+          shippingAddress.address = await this.validateAddressData(shippingAddress.address);
+        } catch (error) {
+          this.form.enable();
+          setTimeout(() => {
+            this.addressFormBlock.setAddressValidationError(error.error.invalidProperties);
+          }, 10);
+
+          return;
+        }
+      }
+
+      customer.shippingAddresses = [
+        {
+          data: { ...shippingAddress, isDefault: new Date().toISOString() },
+        },
+      ];
+    }
+
+    return customer;
+  }
+
+  mapToShippingAddress({ name, address, email, organisation, phoneNumbers }: DeviatingAddressFormBlockData): ShippingAddressDTO {
+    return {
+      gender: name?.gender,
+      title: name?.title,
+      firstName: name?.firstName,
+      lastName: name?.lastName,
+      address,
+      communicationDetails: {
+        email: email ? email : null,
+        mobile: phoneNumbers?.mobile ? phoneNumbers.mobile : null,
+        phone: phoneNumbers?.phone ? phoneNumbers.phone : null,
+      },
+      organisation,
+      isDefault: new Date().toJSON(),
+    };
+  }
+
+  mapToBillingAddress({ name, address, email, organisation, phoneNumbers }: DeviatingAddressFormBlockData): PayerDTO {
+    return {
+      gender: name?.gender,
+      title: name?.title,
+      firstName: name?.firstName,
+      lastName: name?.lastName,
+      address,
+      communicationDetails: {
+        email: email ? email : null,
+        mobile: phoneNumbers?.mobile ? phoneNumbers.mobile : null,
+        phone: phoneNumbers?.phone ? phoneNumbers.phone : null,
+      },
+      organisation,
+    };
+  }
+
+  async save() {
+    if (this.busy$.value) {
+      return;
+    }
+
+    if (this.form.invalid) {
+      this.form.markAllAsTouched();
+      return;
+    }
+
+    try {
+      this.busy$.next(true);
+
+      this.form.disable();
+      const customer: CustomerDTO = await this.getCustomerFromFormData();
+
+      if (!customer) {
+        this.form.enable();
+        return;
+      }
+
+      const response = await this.saveCustomer(customer);
+
+      if (!!response) {
+        this.navigateToCustomerDetails(response);
+      }
+    } catch (error) {
+      this.form.enable();
+      this.modal.open({
+        content: UiErrorModalComponent,
+        data: error,
+      });
+    } finally {
+      this.busy$.next(false);
+    }
+  }
+
+  abstract saveCustomer(customer: CustomerDTO): Promise<CustomerDTO>;
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.component.html b/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.component.html
new file mode 100644
index 000000000..50260b15f
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.component.html
@@ -0,0 +1,91 @@
+<form *ngIf="formData$ | async; let data" (keydown.enter)="$event.preventDefault()">
+  <h1 class="title">Kundendaten erfassen</h1>
+  <p class="description">
+    Um Ihnen den ausgewählten Service zu <br />
+    ermöglichen, legen wir Ihnen gerne <br />
+    ein Kundenkonto an.
+  </p>
+
+  <app-customer-type-selector
+    [processId]="processId$ | async"
+    [p4mUser]="false"
+    customerType="b2b"
+    (valueChanges)="customerTypeChanged($event)"
+  >
+  </app-customer-type-selector>
+
+  <app-organisation-form-block
+    #orga
+    [tabIndexStart]="1"
+    [data]="data.organisation"
+    (dataChanges)="patchFormData('organisation', $event)"
+    (onInit)="addFormBlock('organisation', $event)"
+    [requiredMarks]="organisationFormBlockRequiredMarks"
+    [validatorFns]="organisationFormBlockValidators"
+  >
+  </app-organisation-form-block>
+
+  <app-name-form-block
+    #name
+    [tabIndexStart]="orga.tabIndexEnd + 1"
+    [data]="data.name"
+    (dataChanges)="patchFormData('name', $event)"
+    (onInit)="addFormBlock('name', $event)"
+  >
+  </app-name-form-block>
+
+  <app-address-form-block
+    #address
+    [tabIndexStart]="name.tabIndexEnd + 1"
+    [data]="data.address"
+    (dataChanges)="patchFormData('address', $event)"
+    (onInit)="addFormBlock('address', $event)"
+    [requiredMarks]="addressRequiredMarks"
+    [validatorFns]="addressValidators"
+    [defaults]="{ country: 'DEU' }"
+  >
+  </app-address-form-block>
+
+  <app-email-form-block
+    #email
+    [tabIndexStart]="address.tabIndexEnd + 1"
+    [data]="data.email"
+    (dataChanges)="patchFormData('email', $event)"
+    [validatorFns]="emailFormBlockValidators"
+    (onInit)="addFormBlock('email', $event)"
+  >
+  </app-email-form-block>
+
+  <app-phone-numbers-form-block
+    #phoneNumbers
+    [tabIndexStart]="email.tabIndexEnd + 1"
+    [data]="data.phoneNumbers"
+    (dataChanges)="patchFormData('phoneNumbers', $event)"
+    (onInit)="addFormBlock('phoneNumbers', $event)"
+  >
+  </app-phone-numbers-form-block>
+
+  <app-deviating-address-form-block
+    [tabIndexStart]="phoneNumbers.tabIndexEnd + 1"
+    [data]="data.deviatingDeliveryAddress"
+    (dataChanges)="patchFormData('deviatingDeliveryAddress', $event)"
+    (onInit)="addFormBlock('deviatingDeliveryAddress', $event)"
+    [nameRequiredMarks]="deviatingNameRequiredMarks"
+    [nameValidatorFns]="deviatingNameValidationFns"
+    [addressRequiredMarks]="addressRequiredMarks"
+    [addressValidatorFns]="addressValidators"
+    [organisationRequiredMarks]="organisationFormBlockRequiredMarks"
+    [organisationValidatorFns]="organisationFormBlockValidators"
+    [defaults]="{ address: { country: 'DEU' } }"
+    [organisation]="true"
+    [email]="true"
+    [phoneNumbers]="true"
+  >
+    Die Lieferadresse weicht von der Rechnungsadresse ab
+  </app-deviating-address-form-block>
+
+  <div class="spacer"></div>
+  <button class="cta-submit" type="button" (click)="save()" [disabled]="form.invalid || form.pending">
+    <ui-spinner [show]="busy$ | async">Speichern</ui-spinner>
+  </button>
+</form>
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.component.scss b/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.component.ts b/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.component.ts
new file mode 100644
index 000000000..ea2f9b142
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.component.ts
@@ -0,0 +1,54 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ValidatorFn, Validators } from '@angular/forms';
+import { CustomerDTO } from '@swagger/crm';
+import { AddressFormBlockData } from '../../components/form-blocks';
+import { NameFormBlockData } from '../../components/form-blocks/name/name-form-block-data';
+import { OrganisationFormBlockData } from '../../components/form-blocks/organisation/organisation-form-block-data';
+import { validateEmail } from '../../validators/email-validator';
+import { AbstractCreateCustomer } from '../abstract-create-customer';
+
+@Component({
+  selector: 'app-create-b2b-customer',
+  templateUrl: 'create-b2b-customer.component.html',
+  styleUrls: ['../create-customer.scss', 'create-b2b-customer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CreateB2BCustomerComponent extends AbstractCreateCustomer {
+  customerType = 'b2b';
+
+  validateAddress = true;
+
+  validateShippingAddress = true;
+
+  organisationFormBlockRequiredMarks: (keyof OrganisationFormBlockData)[] = ['name'];
+
+  organisationFormBlockValidators: Record<string, ValidatorFn[]> = {
+    name: [Validators.required],
+  };
+
+  addressRequiredMarks: (keyof AddressFormBlockData)[] = ['street', 'streetNumber', 'zipCode', 'city', 'country'];
+
+  addressValidators: Record<string, ValidatorFn[]> = {
+    street: [Validators.required],
+    streetNumber: [Validators.required],
+    zipCode: [Validators.required],
+    city: [Validators.required],
+    country: [Validators.required],
+  };
+
+  emailFormBlockValidators = [Validators.email, validateEmail];
+
+  deviatingNameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
+
+  deviatingNameValidationFns: Record<string, ValidatorFn[]> = {
+    gender: [Validators.required, Validators.min(1)],
+    firstName: [Validators.required],
+    lastName: [Validators.required],
+  };
+
+  async saveCustomer(customer: CustomerDTO): Promise<CustomerDTO> {
+    const res = await this.customerService.createB2BCustomer(customer);
+
+    return res.result;
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.module.ts b/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.module.ts
new file mode 100644
index 000000000..c31e4ee5a
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/create-b2b-customer.module.ts
@@ -0,0 +1,28 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CreateB2BCustomerComponent } from './create-b2b-customer.component';
+import { OrganisationFormBlockModule } from '../../components/form-blocks/organisation';
+import { NameFormBlockModule } from '../../components/form-blocks/name';
+import { AddressFormBlockModule } from '../../components/form-blocks/address';
+import { CustomerTypeSelectorModule } from '../../components/customer-type-selector';
+import { DeviatingAddressFormBlockComponentModule, EmailFormBlockModule } from '../../components/form-blocks';
+import { PhoneNumbersFormBlockModule } from '../../components/form-blocks/phone-numbers/phone-numbers-form-block.module';
+import { UiSpinnerModule } from '@ui/spinner';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    OrganisationFormBlockModule,
+    NameFormBlockModule,
+    AddressFormBlockModule,
+    DeviatingAddressFormBlockComponentModule,
+    CustomerTypeSelectorModule,
+    EmailFormBlockModule,
+    PhoneNumbersFormBlockModule,
+    UiSpinnerModule,
+  ],
+  exports: [CreateB2BCustomerComponent],
+  declarations: [CreateB2BCustomerComponent],
+})
+export class CreateB2BCustomerModule {}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/index.ts b/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/index.ts
new file mode 100644
index 000000000..3443f4247
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-b2b-customer/index.ts
@@ -0,0 +1,2 @@
+export * from './create-b2b-customer.component';
+export * from './create-b2b-customer.module';
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-customer.component.css b/apps/page/customer-rd/src/lib/create-customer/create-customer.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-customer.component.html b/apps/page/customer-rd/src/lib/create-customer/create-customer.component.html
new file mode 100644
index 000000000..f45965372
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-customer.component.html
@@ -0,0 +1,4 @@
+<page-split-screen class="max-h-[calc(100vh-13.875rem)] h-[calc(100vh-13.875rem)]">
+  <page-customer-create-side-view [processId]="processId$ | async" *sideTemplate></page-customer-create-side-view>
+  <router-outlet></router-outlet>
+</page-split-screen>
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-customer.component.ts b/apps/page/customer-rd/src/lib/create-customer/create-customer.component.ts
new file mode 100644
index 000000000..f7f3c97d5
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-customer.component.ts
@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { SplitScreenModule } from '../components/split-screen';
+import { CustomerCreateSideViewModule } from './customer-create-side-view';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'page-create-customer',
+  templateUrl: 'create-customer.component.html',
+  styleUrls: ['create-customer.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, RouterModule, SplitScreenModule, CustomerCreateSideViewModule],
+})
+export class CreateCustomerComponent {
+  processId$ = this._activatedRoute.parent.data.pipe(map((data) => data.processId));
+
+  constructor(private _activatedRoute: ActivatedRoute) {}
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-customer.module.ts b/apps/page/customer-rd/src/lib/create-customer/create-customer.module.ts
new file mode 100644
index 000000000..30bddc44b
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-customer.module.ts
@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { CreateB2BCustomerModule } from './create-b2b-customer/create-b2b-customer.module';
+import { CreateGuestCustomerModule } from './create-guest-customer';
+import { CreateP4MCustomerModule } from './create-p4m-customer';
+import { CreateStoreCustomerModule } from './create-store-customer/create-store-customer.module';
+import { CreateWebshopCustomerModule } from './create-webshop-customer/create-webshop-customer.module';
+import { UpdateP4MWebshopCustomerModule } from './update-p4m-webshop-customer';
+import { CreateCustomerComponent } from './create-customer.component';
+
+@NgModule({
+  imports: [
+    CreateB2BCustomerModule,
+    CreateGuestCustomerModule,
+    CreateStoreCustomerModule,
+    CreateWebshopCustomerModule,
+    CreateP4MCustomerModule,
+    UpdateP4MWebshopCustomerModule,
+    CreateCustomerComponent,
+  ],
+  exports: [
+    CreateB2BCustomerModule,
+    CreateGuestCustomerModule,
+    CreateStoreCustomerModule,
+    CreateWebshopCustomerModule,
+    CreateP4MCustomerModule,
+    UpdateP4MWebshopCustomerModule,
+    CreateCustomerComponent,
+  ],
+})
+export class CreateCustomerModule {}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-customer.scss b/apps/page/customer-rd/src/lib/create-customer/create-customer.scss
new file mode 100644
index 000000000..c2bae9c37
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-customer.scss
@@ -0,0 +1,42 @@
+:host {
+  @apply block bg-white rounded px-5 py-10;
+}
+
+h1.title {
+  @apply text-2xl font-bold text-center mb-6;
+}
+
+p.description {
+  @apply text-xl text-center;
+}
+
+p.info {
+  @apply mt-8 font-semibold;
+}
+
+form {
+  @apply relative pb-4;
+}
+
+button.cta-submit {
+  @apply sticky left-1/2 bottom-8 text-center bg-brand text-lg 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;
+  }
+}
+
+app-newsletter-form-block,
+app-accept-agb-form-block,
+app-interests-form-block,
+app-deviating-address-form-block {
+  @apply mt-8;
+}
+
+.spacer {
+  @apply w-full h-12;
+}
+
+app-customer-type-selector {
+  @apply mt-8;
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.component.html b/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.component.html
new file mode 100644
index 000000000..e21d5cf4d
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.component.html
@@ -0,0 +1,104 @@
+<form *ngIf="formData$ | async; let data" (keydown.enter)="$event.preventDefault()">
+  <h1 class="title">Kundendaten erfassen</h1>
+  <p class="description">
+    Um Ihnen den ausgewählten Service <br />
+    zu ermöglichen, legen wir Ihnen <br />
+    gerne ein Kundenkonto an. <br />
+  </p>
+
+  <app-customer-type-selector
+    [processId]="processId$ | async"
+    [p4mUser]="false"
+    customerType="guest"
+    (valueChanges)="customerTypeChanged($event)"
+  >
+  </app-customer-type-selector>
+
+  <app-name-form-block
+    #name
+    [tabIndexStart]="1"
+    [data]="data.name"
+    (dataChanges)="patchFormData('name', $event)"
+    (onInit)="addFormBlock('name', $event)"
+    [requiredMarks]="nameRequiredMarks"
+    [validatorFns]="nameValidationFns"
+  >
+  </app-name-form-block>
+
+  <p class="info">
+    Wir werden Ihnen Werbung zu ähnlichen Produkten oder Dienstleistungen aus unserem Sortiment per E-Mail zusenden. Sie können der
+    Verwendung Ihrer Daten jederzeit z.B. mittels der in den E-Mails enthaltenen Abmeldelinks widersprechen, ohne dass hierfür andere als
+    die Übermittlungskosten nach den Basistarifen entstehen.
+  </p>
+
+  <app-email-form-block
+    #email
+    [tabIndexStart]="name.tabIndexEnd + 1"
+    [data]="data.email"
+    [requiredMark]="true"
+    (dataChanges)="patchFormData('email', $event)"
+    [validatorFns]="emailFormBlockValidators"
+    (onInit)="addFormBlock('email', $event)"
+  >
+  </app-email-form-block>
+
+  <app-organisation-form-block
+    #orga
+    [tabIndexStart]="email.tabIndexStart + 1"
+    [data]="data.organisation"
+    (dataChanges)="patchFormData('organisation', $event)"
+    (onInit)="addFormBlock('organisation', $event)"
+    appearence="compact"
+  >
+  </app-organisation-form-block>
+
+  <app-address-form-block
+    #address
+    [tabIndexStart]="orga.tabIndexEnd + 1"
+    [data]="data.address"
+    (dataChanges)="patchFormData('address', $event)"
+    (onInit)="addFormBlock('address', $event)"
+    [requiredMarks]="addressRequiredMarks"
+    [validatorFns]="addressValidators"
+    [defaults]="{ country: 'DEU' }"
+  >
+  </app-address-form-block>
+
+  <app-phone-numbers-form-block
+    #phoneNumbers
+    [tabIndexStart]="address.tabIndexEnd + 1"
+    [data]="data.phoneNumbers"
+    (dataChanges)="patchFormData('phoneNumbers', $event)"
+    (onInit)="addFormBlock('phoneNumbers', $event)"
+  >
+  </app-phone-numbers-form-block>
+
+  <app-birth-date-form-block
+    #birthDate
+    [tabIndexStart]="phoneNumbers.tabIndexEnd + 1"
+    (onInit)="addFormBlock('birthDate', $event)"
+    [data]="data.birthDate"
+    (dataChanges)="patchFormData('birthDate', $event)"
+  >
+  </app-birth-date-form-block>
+
+  <app-deviating-address-form-block
+    [tabIndexStart]="birthDate.tabIndexEnd + 1"
+    [data]="data.deviatingDeliveryAddress"
+    (dataChanges)="patchFormData('deviatingDeliveryAddress', $event)"
+    (onInit)="addFormBlock('deviatingDeliveryAddress', $event)"
+    [nameRequiredMarks]="deviatingNameRequiredMarks"
+    [nameValidatorFns]="deviatingNameValidationFns"
+    [addressRequiredMarks]="addressRequiredMarks"
+    [addressValidatorFns]="addressValidators"
+    [defaults]="{ address: { country: 'DEU' } }"
+    [organisation]="true"
+  >
+    Die Lieferadresse weicht von der Rechnungsadresse ab
+  </app-deviating-address-form-block>
+
+  <div class="spacer"></div>
+  <button class="cta-submit" type="button" (click)="save()" [disabled]="form.invalid || form.pending">
+    <ui-spinner [show]="busy$ | async">Speichern</ui-spinner>
+  </button>
+</form>
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.component.scss b/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.component.ts b/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.component.ts
new file mode 100644
index 000000000..10e49b338
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.component.ts
@@ -0,0 +1,64 @@
+import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { ValidatorFn, Validators } from '@angular/forms';
+import { CustomerDTO } from '@swagger/crm';
+import { map } from 'rxjs/operators';
+import { DeviatingAddressFormBlockComponent } from '../../components/form-blocks';
+import { AddressFormBlockComponent, AddressFormBlockData } from '../../components/form-blocks/address';
+import { NameFormBlockData } from '../../components/form-blocks/name/name-form-block-data';
+import { validateEmail } from '../../validators/email-validator';
+import { AbstractCreateCustomer } from '../abstract-create-customer';
+
+@Component({
+  selector: 'app-create-guest-customer',
+  templateUrl: 'create-guest-customer.component.html',
+  styleUrls: ['../create-customer.scss', 'create-guest-customer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CreateGuestCustomerComponent extends AbstractCreateCustomer {
+  customerType = 'guest';
+
+  validateAddress = true;
+
+  validateShippingAddress = true;
+
+  nameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
+
+  nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
+    firstName: [Validators.required],
+    lastName: [Validators.required],
+    gender: [Validators.required, Validators.min(1)],
+    title: [],
+  };
+
+  addressRequiredMarks: (keyof AddressFormBlockData)[] = ['street', 'streetNumber', 'zipCode', 'city', 'country'];
+
+  addressValidators: Record<string, ValidatorFn[]> = {
+    street: [Validators.required],
+    streetNumber: [Validators.required],
+    zipCode: [Validators.required],
+    city: [Validators.required],
+    country: [Validators.required],
+  };
+
+  emailFormBlockValidators = [Validators.email, validateEmail, Validators.required];
+
+  deviatingNameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
+
+  deviatingNameValidationFns: Record<string, ValidatorFn[]> = {
+    gender: [Validators.required, Validators.min(1)],
+    firstName: [Validators.required],
+    lastName: [Validators.required],
+  };
+
+  @ViewChild(AddressFormBlockComponent, { static: false })
+  addressFormBlock: AddressFormBlockComponent;
+
+  @ViewChild(DeviatingAddressFormBlockComponent, { static: false })
+  deviatingDeliveryAddressFormBlock: DeviatingAddressFormBlockComponent;
+
+  async saveCustomer(customer: CustomerDTO): Promise<CustomerDTO> {
+    const res = await this.customerService.createGuestCustomer(customer);
+
+    return res.result;
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.module.ts b/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.module.ts
new file mode 100644
index 000000000..c8a923551
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/create-guest-customer.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CreateGuestCustomerComponent } from './create-guest-customer.component';
+import { OrganisationFormBlockModule } from '../../components/form-blocks/organisation';
+import { NameFormBlockModule } from '../../components/form-blocks/name';
+import { AddressFormBlockModule } from '../../components/form-blocks/address';
+import { CustomerTypeSelectorModule } from '../../components/customer-type-selector';
+import { BirthDateFormBlockModule, DeviatingAddressFormBlockComponentModule, EmailFormBlockModule } from '../../components/form-blocks';
+import { PhoneNumbersFormBlockModule } from '../../components/form-blocks/phone-numbers/phone-numbers-form-block.module';
+import { UiSpinnerModule } from '@ui/spinner';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    OrganisationFormBlockModule,
+    NameFormBlockModule,
+    AddressFormBlockModule,
+    DeviatingAddressFormBlockComponentModule,
+    CustomerTypeSelectorModule,
+    EmailFormBlockModule,
+    PhoneNumbersFormBlockModule,
+    BirthDateFormBlockModule,
+    UiSpinnerModule,
+  ],
+  exports: [CreateGuestCustomerComponent],
+  declarations: [CreateGuestCustomerComponent],
+})
+export class CreateGuestCustomerModule {}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/index.ts b/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/index.ts
new file mode 100644
index 000000000..17f4233c1
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-guest-customer/index.ts
@@ -0,0 +1,2 @@
+export * from './create-guest-customer.component';
+export * from './create-guest-customer.module';
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.html b/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.html
new file mode 100644
index 000000000..e27a3f17c
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.html
@@ -0,0 +1,148 @@
+<form *ngIf="formData$ | async; let data" (keydown.enter)="$event.preventDefault()">
+  <h1 class="title flex flex-row items-center justify-center">
+    Kundendaten erfassen
+    <!-- <span
+      class="rounded-full ml-4 h-8 w-8 text-xl text-center border-2 border-solid border-brand text-brand">i</span> -->
+  </h1>
+
+  <p class="description">
+    Um Sie als Kunde beim nächsten <br />
+    Einkauf wieder zu erkennen, legen <br />
+    wir Ihnen gerne eine Kundenkarte an.
+  </p>
+
+  <app-customer-type-selector
+    [processId]="processId$ | async"
+    [p4mUser]="true"
+    [customerType]="_customerType"
+    (valueChanges)="customerTypeChanged($event)"
+    [p4mReadonly]="data?._meta?.p4mRequired"
+  >
+  </app-customer-type-selector>
+
+  <app-p4m-number-form-block
+    #p4mBlock
+    [tabIndexStart]="1"
+    (onInit)="addFormBlock('p4m', $event)"
+    [data]="data.p4m"
+    (dataChanges)="patchFormData('p4m', $event)"
+    [readonly]="data?._meta?.p4mRequired"
+    [focusAfterInit]="!data?._meta?.p4mRequired"
+    [asyncValidatorFns]="asyncLoyaltyCardValidatorFn"
+  >
+  </app-p4m-number-form-block>
+
+  <app-accept-agb-form-block
+    [tabIndexStart]="inBlock.tabIndexEnd + 1"
+    (onInit)="addFormBlock('agb', $event)"
+    [data]="data.agb"
+    (dataChanges)="patchFormData('agb', $event)"
+    [requiredMark]="true"
+    [validatorFns]="agbValidatorFns"
+  >
+  </app-accept-agb-form-block>
+
+  <app-newsletter-form-block
+    #newsletterBlock
+    [tabIndexStart]="p4mBlock.tabIndexEnd + 1"
+    (onInit)="addFormBlock('newsletter', $event)"
+    [data]="data.newsletter"
+    (dataChanges)="patchFormData('newsletter', $event)"
+    [focusAfterInit]="data?._meta?.p4mRequired"
+  >
+  </app-newsletter-form-block>
+
+  <app-name-form-block
+    #nameBlock
+    [tabIndexStart]="newsletterBlock.tabIndexEnd + 1"
+    (onInit)="addFormBlock('name', $event)"
+    [data]="data.name"
+    [requiredMarks]="nameRequiredMarks"
+    [validatorFns]="nameValidationFns"
+    (dataChanges)="patchFormData('name', $event)"
+  >
+  </app-name-form-block>
+
+  <app-email-form-block
+    class="flex-grow"
+    #email
+    [tabIndexStart]="nameBlock.tabIndexEnd + 1"
+    [requiredMark]="emailRequiredMark"
+    (onInit)="addFormBlock('email', $event)"
+    [data]="data.email"
+    (dataChanges)="patchFormData('email', $event)"
+    [validatorFns]="emailValidatorFn"
+    [asyncValidatorFns]="asyncEmailVlaidtorFn"
+  >
+  </app-email-form-block>
+
+  <app-organisation-form-block
+    #orgBlock
+    [tabIndexStart]="email.tabIndexEnd + 1"
+    appearence="compact"
+    (onInit)="addFormBlock('organisation', $event)"
+    [data]="data.organisation"
+    (dataChanges)="patchFormData('organisation', $event)"
+  >
+  </app-organisation-form-block>
+
+  <app-address-form-block
+    [defaults]="{ country: 'DEU' }"
+    #addressBlock
+    [tabIndexStart]="orgBlock.tabIndexEnd + 1"
+    (onInit)="addFormBlock('address', $event)"
+    [data]="data.address"
+    (dataChanges)="patchFormData('address', $event)"
+    [requiredMarks]="addressRequiredMarks"
+    [validatorFns]="addressValidatorFns"
+  >
+  </app-address-form-block>
+
+  <app-deviating-address-form-block
+    #ddaBlock
+    [defaults]="{ address: { country: 'DEU' } }"
+    [tabIndexStart]="addressBlock.tabIndexEnd + 1"
+    (onInit)="addFormBlock('deviatingDeliveryAddress', $event)"
+    [data]="data.deviatingDeliveryAddress"
+    (dataChanges)="patchFormData('deviatingDeliveryAddress', $event)"
+    [nameRequiredMarks]="nameRequiredMarks"
+    [nameValidatorFns]="nameValidationFns"
+    [addressRequiredMarks]="shippingAddressRequiredMarks"
+    [addressValidatorFns]="shippingAddressValidators"
+  >
+    Die Lieferadresse weicht von der Rechnungsadresse ab
+  </app-deviating-address-form-block>
+
+  <app-phone-numbers-form-block
+    #phoneNumbers
+    [tabIndexStart]="ddaBlock.tabIndexEnd + 1"
+    (onInit)="addFormBlock('phoneNumbers', $event)"
+    [data]="data.phoneNumbers"
+    (dataChanges)="patchFormData('phoneNumbers', $event)"
+  ></app-phone-numbers-form-block>
+
+  <app-birth-date-form-block
+    #bdBlock
+    [tabIndexStart]="phoneNumbers.tabIndexEnd + 1"
+    (onInit)="addFormBlock('birthDate', $event)"
+    [data]="data.birthDate"
+    (dataChanges)="patchFormData('birthDate', $event)"
+    [requiredMark]="true"
+    [validatorFns]="birthDateValidatorFns"
+  >
+  </app-birth-date-form-block>
+
+  <app-interests-form-block
+    #inBlock
+    [tabIndexStart]="bdBlock.tabIndexEnd + 1"
+    (onInit)="addFormBlock('interests', $event)"
+    [data]="data.interests"
+    (dataChanges)="patchFormData('interests', $event)"
+  ></app-interests-form-block>
+
+  <div class="spacer"></div>
+
+  <button class="cta-submit" type="button" [disabled]="form.invalid || form.pending" (click)="save()">
+    <ui-spinner [show]="busy$ | async">Speichern</ui-spinner>
+  </button>
+</form>
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.scss b/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.ts b/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.ts
new file mode 100644
index 000000000..8d5127ec0
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.component.ts
@@ -0,0 +1,277 @@
+import { Component, ChangeDetectionStrategy, ViewChild, OnInit } from '@angular/core';
+import { AsyncValidatorFn, ValidatorFn, Validators } from '@angular/forms';
+import { Result } from '@domain/defs';
+import { CustomerDTO, CustomerInfoDTO, KeyValueDTOOfStringAndString } from '@swagger/crm';
+import { UiErrorModalComponent, UiModalResult } from '@ui/modal';
+import { NEVER, Observable, of } from 'rxjs';
+import { catchError, distinctUntilChanged, first, map, switchMap, takeUntil, withLatestFrom } from 'rxjs/operators';
+import { AddressFormBlockComponent, AddressFormBlockData, DeviatingAddressFormBlockComponent } from '../../components/form-blocks';
+import { NameFormBlockData } from '../../components/form-blocks/name/name-form-block-data';
+import { WebshopCustomnerAlreadyExistsModalComponent, WebshopCustomnerAlreadyExistsModalData } from '../../modals';
+import { validateEmail } from '../../validators/email-validator';
+import { AbstractCreateCustomer } from '../abstract-create-customer';
+import { encodeFormData, mapCustomerDtoToCustomerCreateFormData } from '../customer-create-form-data';
+
+@Component({
+  selector: 'app-create-p4m-customer',
+  templateUrl: 'create-p4m-customer.component.html',
+  styleUrls: ['../create-customer.scss', 'create-p4m-customer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CreateP4MCustomerComponent extends AbstractCreateCustomer implements OnInit {
+  validateAddress = true;
+
+  validateShippingAddress = true;
+
+  get _customerType() {
+    return this.activatedRoute.snapshot.data.customerType;
+  }
+
+  get customerType() {
+    return `${this._customerType}-p4m`;
+  }
+
+  nameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
+
+  nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
+    firstName: [Validators.required],
+    lastName: [Validators.required],
+    gender: [Validators.required, Validators.min(1)],
+    title: [],
+  };
+
+  emailRequiredMark: boolean;
+
+  emailValidatorFn: ValidatorFn[];
+
+  asyncEmailVlaidtorFn: AsyncValidatorFn[];
+
+  asyncLoyaltyCardValidatorFn: AsyncValidatorFn[];
+
+  shippingAddressRequiredMarks: (keyof AddressFormBlockData)[] = ['street', 'streetNumber', 'zipCode', 'city', 'country'];
+
+  shippingAddressValidators: Record<string, ValidatorFn[]> = {
+    street: [Validators.required],
+    streetNumber: [Validators.required],
+    zipCode: [Validators.required],
+    city: [Validators.required],
+    country: [Validators.required],
+  };
+
+  addressRequiredMarks: (keyof AddressFormBlockData)[];
+
+  addressValidatorFns: Record<string, ValidatorFn[]>;
+
+  @ViewChild(AddressFormBlockComponent, { static: false })
+  addressFormBlock: AddressFormBlockComponent;
+
+  @ViewChild(DeviatingAddressFormBlockComponent, { static: false })
+  deviatingDeliveryAddressFormBlock: DeviatingAddressFormBlockComponent;
+
+  agbValidatorFns = [Validators.requiredTrue];
+
+  birthDateValidatorFns = [Validators.required];
+
+  existingCustomer$: Observable<CustomerInfoDTO | null>;
+
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.initMarksAndValidators();
+    this.existingCustomer$ = this.customerExists$.pipe(
+      distinctUntilChanged(),
+      switchMap((exists) => {
+        if (exists) {
+          return this.fetchCustomerInfo();
+        }
+        return of(null);
+      })
+    );
+
+    this.existingCustomer$
+      .pipe(
+        takeUntil(this.onDestroy$),
+        switchMap((info) => {
+          if (info) {
+            return this.customerService.getCustomer(info.id, 2).pipe(
+              map((res) => res.result),
+              catchError((err) => NEVER)
+            );
+          }
+          return NEVER;
+        }),
+        withLatestFrom(this.processId$)
+      )
+      .subscribe(([customer, processId]) => {
+        if (customer) {
+          this.modal
+            .open({
+              content: WebshopCustomnerAlreadyExistsModalComponent,
+              data: {
+                customer,
+                processId,
+              } as WebshopCustomnerAlreadyExistsModalData,
+              title: 'Es existiert bereits ein Onlinekonto mit dieser E-Mail-Adresse',
+            })
+            .afterClosed$.subscribe(async (result: UiModalResult<boolean>) => {
+              if (result.data) {
+                this.navigateToUpdatePage(customer);
+              } else {
+                this.formData.email = '';
+                this.cdr.markForCheck();
+              }
+            });
+        }
+      });
+  }
+
+  async navigateToUpdatePage(customer: CustomerDTO) {
+    const processId = await this.processId$.pipe(first()).toPromise();
+    this.router.navigate(['/kunde', processId, 'customer', 'create', 'webshop-p4m', 'update'], {
+      queryParams: {
+        formData: encodeFormData({
+          ...mapCustomerDtoToCustomerCreateFormData(customer),
+          p4m: this.formData.p4m,
+        }),
+      },
+    });
+  }
+
+  initMarksAndValidators() {
+    this.asyncLoyaltyCardValidatorFn = [this.checkLoyalityCardValidator];
+    if (this._customerType === 'webshop') {
+      this.emailRequiredMark = true;
+      this.emailValidatorFn = [Validators.required, Validators.email, validateEmail];
+      this.asyncEmailVlaidtorFn = [this.emailExistsValidator];
+      this.addressRequiredMarks = this.shippingAddressRequiredMarks;
+      this.addressValidatorFns = this.shippingAddressValidators;
+    } else {
+      this.emailRequiredMark = false;
+      this.emailValidatorFn = [Validators.email, validateEmail];
+    }
+  }
+
+  fetchCustomerInfo(): Observable<CustomerDTO | null> {
+    const email = this.formData.email;
+    return this.customerService.getOnlineCustomerByEmail(email).pipe(
+      map((result) => {
+        if (result) {
+          return result;
+        }
+        return null;
+      }),
+      catchError((err) => {
+        this.modal.open({
+          content: UiErrorModalComponent,
+          data: err,
+        });
+        return [null];
+      })
+    );
+  }
+
+  getInterests(): KeyValueDTOOfStringAndString[] {
+    const interests: KeyValueDTOOfStringAndString[] = [];
+
+    for (const key in this.formData.interests) {
+      if (this.formData.interests[key]) {
+        interests.push({ key, group: 'KUBI_INTERESSEN' });
+      }
+    }
+
+    return interests;
+  }
+
+  getNewsletter(): KeyValueDTOOfStringAndString | undefined {
+    if (this.formData.newsletter) {
+      return { key: 'kubi_newsletter', group: 'KUBI_NEWSLETTER' };
+    }
+  }
+
+  static MapCustomerInfoDtoToCustomerDto(customerInfoDto: CustomerInfoDTO): CustomerDTO {
+    return {
+      address: customerInfoDto.address,
+      agentComment: customerInfoDto.agentComment,
+      bonusCard: customerInfoDto.bonusCard,
+      campaignCode: customerInfoDto.campaignCode,
+      communicationDetails: customerInfoDto.communicationDetails,
+      createdInBranch: customerInfoDto.createdInBranch,
+      customerGroup: customerInfoDto.customerGroup,
+      customerNumber: customerInfoDto.customerNumber,
+      customerStatus: customerInfoDto.customerStatus,
+      customerType: customerInfoDto.customerType,
+      dateOfBirth: customerInfoDto.dateOfBirth,
+      features: customerInfoDto.features,
+      firstName: customerInfoDto.firstName,
+      lastName: customerInfoDto.lastName,
+      gender: customerInfoDto.gender,
+      hasOnlineAccount: customerInfoDto.hasOnlineAccount,
+      isGuestAccount: customerInfoDto.isGuestAccount,
+      label: customerInfoDto.label,
+      notificationChannels: customerInfoDto.notificationChannels,
+      organisation: customerInfoDto.organisation,
+      title: customerInfoDto.title,
+      id: customerInfoDto.id,
+      pId: customerInfoDto.pId,
+    };
+  }
+
+  async saveCustomer(customer: CustomerDTO): Promise<CustomerDTO> {
+    const isWebshop = this._customerType === 'webshop';
+    let res: Result<CustomerDTO>;
+
+    const { customerDto, customerInfoDto } = this.formData?._meta ?? {};
+
+    if (customerDto) {
+      customer = { ...customerDto, ...customer };
+    } else if (customerInfoDto) {
+      customer = { ...CreateP4MCustomerComponent.MapCustomerInfoDtoToCustomerDto(customerInfoDto), ...customer };
+    }
+
+    const p4mFeature = customer.features?.find((attr) => attr.key === 'p4mUser');
+    if (p4mFeature) {
+      p4mFeature.value = this.formData.p4m;
+    } else {
+      customer.features.push({
+        key: 'p4mUser',
+        value: this.formData.p4m,
+      });
+    }
+
+    const interests = this.getInterests();
+
+    if (interests.length > 0) {
+      customer.features?.push(...interests);
+      // TODO: Klärung wie Interessen zukünftig gespeichert werden
+      // await this._loyaltyCardService
+      //   .LoyaltyCardSaveInteressen({
+      //     customerId: res.result.id,
+      //     interessen: this.getInterests(),
+      //   })
+      //   .toPromise();
+    }
+
+    const newsletter = this.getNewsletter();
+
+    if (newsletter) {
+      customer.features.push(newsletter);
+    } else {
+      customer.features = customer.features.filter((feature) => feature.key !== 'kubi_newsletter' && feature.group !== 'KUBI_NEWSLETTER');
+    }
+
+    if (isWebshop) {
+      if (customer.id > 0) {
+        if (this.formData?._meta?.hasLocalityCard) {
+          res = await this.customerService.updateStoreP4MToWebshopP4M(customer);
+        } else {
+          res = await this.customerService.updateToP4MOnlineCustomer(customer);
+        }
+      } else {
+        res = await this.customerService.createOnlineCustomer(customer).toPromise();
+      }
+    } else {
+      res = await this.customerService.createStoreCustomer(customer).toPromise();
+    }
+
+    return res.result;
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.module.ts b/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.module.ts
new file mode 100644
index 000000000..a7d3897ce
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/create-p4m-customer.module.ts
@@ -0,0 +1,45 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CreateP4MCustomerComponent } from './create-p4m-customer.component';
+import {
+  AddressFormBlockModule,
+  BirthDateFormBlockModule,
+  InterestsFormBlockModule,
+  NameFormBlockModule,
+  OrganisationFormBlockModule,
+  P4mNumberFormBlockModule,
+  NewsletterFormBlockModule,
+  DeviatingAddressFormBlockComponentModule,
+  AcceptAGBFormBlockModule,
+  EmailFormBlockModule,
+  PhoneNumbersFormBlockModule,
+} from '../../components/form-blocks';
+import { CustomerTypeSelectorModule } from '../../components/customer-type-selector';
+import { UiSpinnerModule } from '@ui/spinner';
+import { UiIconModule } from '@ui/icon';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CustomerTypeSelectorModule,
+    AddressFormBlockModule,
+    BirthDateFormBlockModule,
+    InterestsFormBlockModule,
+    NameFormBlockModule,
+    OrganisationFormBlockModule,
+    P4mNumberFormBlockModule,
+    NewsletterFormBlockModule,
+    DeviatingAddressFormBlockComponentModule,
+    AcceptAGBFormBlockModule,
+    EmailFormBlockModule,
+    PhoneNumbersFormBlockModule,
+    UiSpinnerModule,
+    UiIconModule,
+    RouterModule,
+  ],
+  exports: [CreateP4MCustomerComponent],
+  declarations: [CreateP4MCustomerComponent],
+})
+export class CreateP4MCustomerModule {}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/index.ts b/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/index.ts
new file mode 100644
index 000000000..b45a98dd4
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-p4m-customer/index.ts
@@ -0,0 +1,2 @@
+export * from './create-p4m-customer.component';
+export * from './create-p4m-customer.module';
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.component.html b/apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.component.html
new file mode 100644
index 000000000..c7d01eaed
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.component.html
@@ -0,0 +1,92 @@
+<form *ngIf="formData$ | async; let data" (keydown.enter)="$event.preventDefault()">
+  <h1 class="title">Kundendaten erfassen</h1>
+  <p class="description">
+    Wir legen Ihnen gerne ein Kundenkonto an
+  </p>
+
+  <app-customer-type-selector
+    [processId]="processId$ | async"
+    [p4mUser]="false"
+    customerType="store"
+    (valueChanges)="customerTypeChanged($event)"
+  >
+  </app-customer-type-selector>
+
+  <app-name-form-block
+    #name
+    [tabIndexStart]="1"
+    (onInit)="addFormBlock('name', $event)"
+    [requiredMarks]="nameRequiredMarks"
+    [validatorFns]="nameValidationFns"
+    [data]="data.name"
+    (dataChanges)="patchFormData('name', $event)"
+  >
+  </app-name-form-block>
+
+  <app-email-form-block
+    #email
+    [tabIndexStart]="name.tabIndexEnd + 1"
+    [validatorFns]="emailFormBlockValidators"
+    (onInit)="addFormBlock('email', $event)"
+    [data]="data.email"
+    (dataChanges)="patchFormData('email', $event)"
+  >
+  </app-email-form-block>
+
+  <app-organisation-form-block
+    #orga
+    [tabIndexStart]="email.tabIndexEnd + 1"
+    appearence="compact"
+    (onInit)="addFormBlock('organisation', $event)"
+    [data]="data.organisation"
+    (dataChanges)="patchFormData('organisation', $event)"
+  >
+  </app-organisation-form-block>
+
+  <app-address-form-block
+    #address
+    [tabIndexStart]="orga.tabIndexEnd + 1"
+    (onInit)="addFormBlock('address', $event)"
+    [data]="data.address"
+    (dataChanges)="patchFormData('address', $event)"
+  >
+  </app-address-form-block>
+
+  <app-phone-numbers-form-block
+    #phoneNumbers
+    [tabIndexStart]="address.tabIndexEnd + 1"
+    (onInit)="addFormBlock('phoneNumbers', $event)"
+    [data]="data.phoneNumbers"
+    (dataChanges)="patchFormData('phoneNumbers', $event)"
+  ></app-phone-numbers-form-block>
+
+  <app-birth-date-form-block
+    #birthDate
+    [tabIndexStart]="phoneNumbers.tabIndexEnd + 1"
+    (onInit)="addFormBlock('birthDate', $event)"
+    [data]="data.birthDate"
+    (dataChanges)="patchFormData('birthDate', $event)"
+  ></app-birth-date-form-block>
+
+  <app-deviating-address-form-block
+    [tabIndexStart]="birthDate.tabIndexEnd + 1"
+    (onInit)="addFormBlock('deviatingDeliveryAddress', $event)"
+    [organisation]="true"
+    [nameRequiredMarks]="nameRequiredMarks"
+    [nameValidatorFns]="nameValidationFns"
+    [addressRequiredMarks]="addressRequiredMarks"
+    [addressValidatorFns]="addressValidators"
+    [defaults]="{ address: { country: 'DEU' } }"
+    [data]="data.deviatingDeliveryAddress"
+    (dataChanges)="patchFormData('deviatingDeliveryAddress', $event)"
+  >
+    Die Lieferadresse weicht von der Rechnungsadresse ab
+  </app-deviating-address-form-block>
+
+  <div class="spacer"></div>
+  <button class="cta-submit" type="button" [disabled]="form.invalid || form.pending" (click)="save()">
+    <ui-spinner [show]="busy$ | async">
+      Speichern
+    </ui-spinner>
+  </button>
+</form>
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.component.scss b/apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.component.ts b/apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.component.ts
new file mode 100644
index 000000000..4bfb7c56f
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.component.ts
@@ -0,0 +1,51 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ValidatorFn, Validators } from '@angular/forms';
+import { CustomerDTO } from '@swagger/crm';
+import { map } from 'rxjs/operators';
+import { AddressFormBlockData } from '../../components/form-blocks';
+import { NameFormBlockData } from '../../components/form-blocks/name/name-form-block-data';
+import { validateEmail } from '../../validators/email-validator';
+import { AbstractCreateCustomer } from '../abstract-create-customer';
+
+@Component({
+  selector: 'app-create-store-customer',
+  templateUrl: 'create-store-customer.component.html',
+  styleUrls: ['../create-customer.scss', 'create-store-customer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CreateStoreCustomerComponent extends AbstractCreateCustomer {
+  customerType = 'store';
+
+  validateAddress = true;
+
+  validateShippingAddress = true;
+
+  addressRequiredMarks: (keyof AddressFormBlockData)[] = ['street', 'streetNumber', 'zipCode', 'city', 'country'];
+
+  addressValidators: Record<string, ValidatorFn[]> = {
+    street: [Validators.required],
+    streetNumber: [Validators.required],
+    zipCode: [Validators.required],
+    city: [Validators.required],
+    country: [Validators.required],
+  };
+
+  emailFormBlockValidators = [Validators.email, validateEmail];
+
+  nameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
+
+  nameValidationFns: Record<string, ValidatorFn[]> = {
+    gender: [Validators.required, Validators.min(1)],
+    firstName: [Validators.required],
+    lastName: [Validators.required],
+  };
+
+  saveCustomer(customer: CustomerDTO): Promise<CustomerDTO> {
+    customer.isGuestAccount = false;
+
+    return this.customerService
+      .createStoreCustomer(customer)
+      .pipe(map((res) => res.result))
+      .toPromise();
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.module.ts b/apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.module.ts
new file mode 100644
index 000000000..5590783f2
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-store-customer/create-store-customer.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CreateStoreCustomerComponent } from './create-store-customer.component';
+import { AddressFormBlockModule } from '../../components/form-blocks/address';
+import { NameFormBlockModule } from '../../components/form-blocks/name';
+import { OrganisationFormBlockModule } from '../../components/form-blocks/organisation';
+import { BirthDateFormBlockModule } from '../../components/form-blocks/birth-date';
+import { CustomerTypeSelectorModule } from '../../components/customer-type-selector';
+import { DeviatingAddressFormBlockComponentModule, EmailFormBlockModule, PhoneNumbersFormBlockModule } from '../../components/form-blocks';
+import { UiSpinnerModule } from '@ui/spinner';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    OrganisationFormBlockModule,
+    NameFormBlockModule,
+    AddressFormBlockModule,
+    DeviatingAddressFormBlockComponentModule,
+    BirthDateFormBlockModule,
+    CustomerTypeSelectorModule,
+    EmailFormBlockModule,
+    PhoneNumbersFormBlockModule,
+    UiSpinnerModule,
+  ],
+  exports: [CreateStoreCustomerComponent],
+  declarations: [CreateStoreCustomerComponent],
+})
+export class CreateStoreCustomerModule {}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-store-customer/index.ts b/apps/page/customer-rd/src/lib/create-customer/create-store-customer/index.ts
new file mode 100644
index 000000000..3dff0124c
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-store-customer/index.ts
@@ -0,0 +1,2 @@
+export * from './create-store-customer.component';
+export * from './create-store-customer.module';
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.component.html b/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.component.html
new file mode 100644
index 000000000..b05d446f8
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.component.html
@@ -0,0 +1,104 @@
+<form *ngIf="formData$ | async; let data" (keydown.enter)="$event.preventDefault()">
+  <h1 class="title">Kundendaten erfassen</h1>
+  <p class="description">
+    Wenn Sie möchten legen wir Ihnen <br />
+    gerne ein Onlinekonto an. Dort können <br />
+    Sie Ihre Bestellungen einsehen.
+  </p>
+
+  <app-customer-type-selector
+    [processId]="processId$ | async"
+    [p4mUser]="false"
+    customerType="webshop"
+    (valueChanges)="customerTypeChanged($event)"
+  >
+  </app-customer-type-selector>
+
+  <app-name-form-block
+    #name
+    [tabIndexStart]="1"
+    (onInit)="addFormBlock('name', $event)"
+    [requiredMarks]="nameRequiredMarks"
+    [validatorFns]="nameValidationFns"
+    [data]="data.name"
+    (dataChanges)="patchFormData('name', $event)"
+  >
+  </app-name-form-block>
+
+  <p class="info">
+    Wir werden Ihnen Werbung zu ähnlichen Produkten oder Dienstleistungen aus unserem Sortiment per E-Mail zusenden. Sie können der
+    Verwendung Ihrer Daten jederzeit z.B. mittels der in den E-Mails enthaltenen Abmeldelinks widersprechen, ohne dass hierfür andere als
+    die Übermittlungskosten nach den Basistarifen entstehen.
+  </p>
+
+  <app-email-form-block
+    #email
+    [tabIndexStart]="name.tabIndexEnd + 1"
+    (onInit)="addFormBlock('email', $event)"
+    [requiredMark]="true"
+    [asyncValidatorFns]="asyncEmailValidatorFns"
+    [validatorFns]="emailValidatorFns"
+    [data]="data.email"
+    (dataChanges)="patchFormData('email', $event)"
+  ></app-email-form-block>
+
+  <app-organisation-form-block
+    #org
+    [tabIndexStart]="email.tabIndexEnd + 1"
+    appearence="compact"
+    (onInit)="addFormBlock('organisation', $event)"
+    [data]="data.organisation"
+    (dataChanges)="patchFormData('organisation', $event)"
+  >
+  </app-organisation-form-block>
+
+  <app-address-form-block
+    #address
+    [tabIndexStart]="org.tabIndexEnd + 1"
+    [requiredMarks]="addressRequiredMarks"
+    [validatorFns]="addressValidators"
+    (onInit)="addFormBlock('address', $event)"
+    [defaults]="{ country: 'DEU' }"
+    [data]="data.address"
+    (dataChanges)="patchFormData('address', $event)"
+  >
+  </app-address-form-block>
+
+  <p class="info">Das Anlegen geht für Sie noch schneller, wenn wir Ihnen das initiale Passwort per SMS auf Ihr Mobilgerät schicken.</p>
+
+  <app-phone-numbers-form-block
+    #phoneNumbers
+    [tabIndexStart]="address.tabIndexEnd + 1"
+    (onInit)="addFormBlock('phoneNumbers', $event)"
+    [data]="data.phoneNumbers"
+    (dataChanges)="patchFormData('phoneNumbers', $event)"
+  ></app-phone-numbers-form-block>
+
+  <app-birth-date-form-block
+    #birthDate
+    [tabIndexStart]="phoneNumbers.tabIndexEnd + 1"
+    (onInit)="addFormBlock('birthDate', $event)"
+    [data]="data.birthDate"
+    (dataChanges)="patchFormData('birthDate', $event)"
+  ></app-birth-date-form-block>
+
+  <app-deviating-address-form-block
+    [tabIndexStart]="birthDate.tabIndexEnd + 1"
+    (onInit)="addFormBlock('deviatingDeliveryAddress', $event)"
+    appearence="b2b"
+    [nameRequiredMarks]="nameRequiredMarks"
+    [nameValidatorFns]="nameValidationFns"
+    [addressRequiredMarks]="addressRequiredMarks"
+    [addressValidatorFns]="addressValidators"
+    [defaults]="{ address: { country: 'DEU' } }"
+    [data]="data.deviatingDeliveryAddress"
+    (dataChanges)="patchFormData('deviatingDeliveryAddress', $event)"
+  >
+    Die Lieferadresse weicht von der Rechnungsadresse ab
+  </app-deviating-address-form-block>
+
+  <div class="spacer"></div>
+  <button class="cta-submit" type="button" [disabled]="form.invalid || form.pending" (click)="save()">
+    <ui-spinner [show]="busy$ | async">Speichern</ui-spinner>
+  </button>
+</form>
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.component.scss b/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.component.ts b/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.component.ts
new file mode 100644
index 000000000..ec848d8cf
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.component.ts
@@ -0,0 +1,77 @@
+import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { ValidatorFn, Validators } from '@angular/forms';
+import { CustomerDTO } from '@swagger/crm';
+import { map } from 'rxjs/operators';
+import { AddressFormBlockComponent, AddressFormBlockData, DeviatingAddressFormBlockComponent } from '../../components/form-blocks';
+import { NameFormBlockData } from '../../components/form-blocks/name/name-form-block-data';
+import { validateEmail } from '../../validators/email-validator';
+import { AbstractCreateCustomer } from '../abstract-create-customer';
+import { CreateP4MCustomerComponent } from '../create-p4m-customer';
+
+@Component({
+  selector: 'app-create-webshop-customer',
+  templateUrl: 'create-webshop-customer.component.html',
+  styleUrls: ['../create-customer.scss', 'create-webshop-customer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CreateWebshopCustomerComponent extends AbstractCreateCustomer {
+  customerType = 'webshop';
+
+  validateAddress = true;
+  validateShippingAddress = true;
+
+  nameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
+
+  nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
+    firstName: [Validators.required],
+    lastName: [Validators.required],
+    gender: [Validators.required, Validators.min(1)],
+    title: [],
+  };
+
+  addressRequiredMarks: (keyof AddressFormBlockData)[] = ['street', 'streetNumber', 'zipCode', 'city', 'country'];
+
+  addressValidators: Record<string, ValidatorFn[]> = {
+    street: [Validators.required],
+    streetNumber: [Validators.required],
+    zipCode: [Validators.required],
+    city: [Validators.required],
+    country: [Validators.required],
+  };
+
+  communicationDetailsValidators: Record<string, ValidatorFn[]> = {
+    email: [Validators.required, Validators.email, validateEmail],
+  };
+
+  emailValidatorFns = [Validators.required, Validators.email, validateEmail];
+
+  asyncEmailValidatorFns = [this.emailExistsValidator];
+
+  @ViewChild(AddressFormBlockComponent, { static: false })
+  addressFormBlock: AddressFormBlockComponent;
+
+  @ViewChild(DeviatingAddressFormBlockComponent, { static: false })
+  deviatingDeliveryAddressFormBlock: DeviatingAddressFormBlockComponent;
+
+  async saveCustomer(customer: CustomerDTO): Promise<CustomerDTO> {
+    const { customerDto, customerInfoDto } = this.formData?._meta ?? {};
+
+    const isUpgrade = !!(customerDto || customerInfoDto);
+
+    if (isUpgrade) {
+      if (customerDto) {
+        customer = { ...customerDto, ...customer };
+      } else if (customerInfoDto) {
+        customer = { ...CreateP4MCustomerComponent.MapCustomerInfoDtoToCustomerDto(customerInfoDto), ...customer };
+      }
+
+      const res = await this.customerService.updateToOnlineCustomer(customer);
+      return res.result;
+    } else {
+      return this.customerService
+        .createOnlineCustomer(customer)
+        .pipe(map((res) => res.result))
+        .toPromise();
+    }
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.module.ts b/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.module.ts
new file mode 100644
index 000000000..c230250a5
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/create-webshop-customer.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CreateWebshopCustomerComponent } from './create-webshop-customer.component';
+import { AddressFormBlockModule } from '../../components/form-blocks/address';
+import { BirthDateFormBlockModule } from '../../components/form-blocks/birth-date';
+import { NameFormBlockModule } from '../../components/form-blocks/name';
+import { OrganisationFormBlockModule } from '../../components/form-blocks/organisation';
+import { CustomerTypeSelectorModule } from '../../components/customer-type-selector';
+import { DeviatingAddressFormBlockComponentModule, EmailFormBlockModule, PhoneNumbersFormBlockModule } from '../../components/form-blocks';
+import { UiSpinnerModule } from '@ui/spinner';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    OrganisationFormBlockModule,
+    NameFormBlockModule,
+    AddressFormBlockModule,
+    DeviatingAddressFormBlockComponentModule,
+    BirthDateFormBlockModule,
+    CustomerTypeSelectorModule,
+    EmailFormBlockModule,
+    PhoneNumbersFormBlockModule,
+    UiSpinnerModule,
+  ],
+  exports: [CreateWebshopCustomerComponent],
+  declarations: [CreateWebshopCustomerComponent],
+})
+export class CreateWebshopCustomerModule {}
diff --git a/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/index.ts b/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/index.ts
new file mode 100644
index 000000000..82c7f364f
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/create-webshop-customer/index.ts
@@ -0,0 +1,2 @@
+export * from './create-webshop-customer.component';
+export * from './create-webshop-customer.module';
diff --git a/apps/page/customer-rd/src/lib/create-customer/customer-create-form-data.ts b/apps/page/customer-rd/src/lib/create-customer/customer-create-form-data.ts
new file mode 100644
index 000000000..bfac46d88
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/customer-create-form-data.ts
@@ -0,0 +1,116 @@
+import { CustomerDTO, CustomerInfoDTO } from '@swagger/crm';
+import { AddressFormBlockData, DeviatingAddressFormBlockData, PhoneNumbersFormBlockData } from '../components/form-blocks';
+import { InterestsFormBlockData } from '../components/form-blocks/interests/interests-form-block-data';
+import { NameFormBlockData } from '../components/form-blocks/name/name-form-block-data';
+import { OrganisationFormBlockData } from '../components/form-blocks/organisation/organisation-form-block-data';
+
+export interface CustomerCreateFormData {
+  _meta?: {
+    customerDto?: CustomerDTO;
+    customerInfoDto?: CustomerInfoDTO;
+    p4mRequired?: boolean;
+    hasLocalityCard: boolean;
+    customerType: string;
+  };
+  agb?: boolean;
+  address?: AddressFormBlockData;
+  birthDate?: string;
+  billingAddress?: DeviatingAddressFormBlockData;
+  deviatingDeliveryAddress?: DeviatingAddressFormBlockData;
+  email?: string;
+  interests?: InterestsFormBlockData;
+  name?: NameFormBlockData;
+  newsletter?: boolean;
+  organisation?: OrganisationFormBlockData;
+  p4m?: string;
+  phoneNumbers?: PhoneNumbersFormBlockData;
+}
+
+export function mapCustomerDtoToCustomerCreateFormData(customerDto: CustomerDTO): CustomerCreateFormData {
+  let p4m = customerDto.attributes?.find((attr) => attr.data.key === 'p4mUser')?.data.value;
+
+  if (!p4m) {
+    p4m = customerDto.features?.find((f) => f.key === 'p4mUser')?.value;
+  }
+
+  const customerType = customerDto.features?.find((f) => f.key === 'customerType')?.value;
+
+  const hasLocalityCard = !!p4m;
+
+  return {
+    _meta: {
+      customerDto,
+      p4mRequired: !!p4m,
+      hasLocalityCard,
+      customerType,
+    },
+    p4m,
+    address: customerDto.address,
+    birthDate: customerDto.dateOfBirth,
+    email: customerDto?.communicationDetails?.email,
+    name: {
+      gender: customerDto?.gender,
+      title: customerDto?.title,
+      firstName: customerDto?.firstName,
+      lastName: customerDto?.lastName,
+    },
+    organisation: customerDto.organisation,
+    phoneNumbers: {
+      mobile: customerDto?.communicationDetails?.mobile,
+      phone: customerDto?.communicationDetails?.phone,
+    },
+    agb: !!p4m,
+  };
+}
+
+export function mapCustomerInfoDtoToCustomerCreateFormData(customerInfoDto: CustomerInfoDTO): CustomerCreateFormData {
+  const p4m = customerInfoDto.features?.find((f) => f.key === 'p4mUser')?.value;
+
+  const interests = customerInfoDto.features
+    ?.filter((f) => f.group === 'KUBI_INTERESSEN')
+    .reduce<Record<string, boolean>>((dic, f) => {
+      dic[f.key] = true;
+      return dic;
+    }, {});
+
+  const newsletter = !!customerInfoDto.features?.find((f) => f.key === 'kubi_newsletter' && f.group === 'KUBI_NEWSLETTER');
+
+  const hasLocalityCard = !!p4m;
+
+  const customerType = customerInfoDto.features?.find((f) => f.key === 'customerType')?.value;
+
+  return {
+    _meta: {
+      customerInfoDto,
+      p4mRequired: !!p4m,
+      hasLocalityCard,
+      customerType,
+    },
+    p4m,
+    address: customerInfoDto.address,
+    birthDate: customerInfoDto.dateOfBirth,
+    email: customerInfoDto?.communicationDetails?.email,
+    name: {
+      gender: customerInfoDto?.gender,
+      title: customerInfoDto?.title,
+      firstName: customerInfoDto?.firstName,
+      lastName: customerInfoDto?.lastName,
+    },
+    organisation: customerInfoDto.organisation,
+    phoneNumbers: {
+      mobile: customerInfoDto?.communicationDetails?.mobile,
+      phone: customerInfoDto?.communicationDetails?.phone,
+    },
+    agb: !!p4m,
+    interests,
+    newsletter,
+  };
+}
+
+export function encodeFormData(data: CustomerCreateFormData): string {
+  return encodeURIComponent(JSON.stringify(data));
+}
+
+export function decodeFormData(data: string): CustomerCreateFormData {
+  return JSON.parse(decodeURIComponent(data));
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.css b/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.css
new file mode 100644
index 000000000..3bc0b5236
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.css
@@ -0,0 +1,7 @@
+:host {
+  @apply bg-surface text-surface-content rounded flex flex-col h-full;
+}
+
+.side-view-shadow {
+  box-shadow: 0px -2px 24px rgba(220, 226, 233, 0.8);
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.html b/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.html
new file mode 100644
index 000000000..82029909b
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.html
@@ -0,0 +1,12 @@
+<a
+  [routerLink]="customerSearchNavigation.path"
+  [queryParams]="customerSearchNavigation.queryParams"
+  class="text-[1.375rem] font-bold text-[#596470] text-center py-4"
+  >Kundensuche</a
+>
+<div class="text-center pt-10 px-8 rounded-card side-view-shadow grow">
+  <h1 class="text-[1.625rem] font-bold">Kundendaten erfassen</h1>
+  <p class="text-lg mt-2">
+    Wir legen Ihnen gerne ein Onlinekonto an, dort können Sie Ihre Bestellungen einsehen.
+  </p>
+</div>
diff --git a/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.ts b/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.ts
new file mode 100644
index 000000000..93a8b2a35
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.ts
@@ -0,0 +1,23 @@
+import { CommonModule } from '@angular/common';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CustomerSearchNavigation } from '../../navigations';
+
+@Component({
+  selector: 'page-customer-create-side-view',
+  templateUrl: 'customer-create-side-view.component.html',
+  styleUrls: ['customer-create-side-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+})
+export class CustomerCreateSideViewComponent {
+  @Input()
+  processId: string | undefined;
+
+  get customerSearchNavigation() {
+    return this.searchNavigation.defaultRoute({ processId: this.processId });
+  }
+
+  constructor(public readonly searchNavigation: CustomerSearchNavigation) {}
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.module.ts b/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.module.ts
new file mode 100644
index 000000000..89c7a63c9
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { CustomerCreateSideViewComponent } from './customer-create-side-view.component';
+
+@NgModule({
+  imports: [CustomerCreateSideViewComponent],
+  exports: [CustomerCreateSideViewComponent],
+})
+export class CustomerCreateSideViewModule {}
diff --git a/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/index.ts b/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/index.ts
new file mode 100644
index 000000000..2bd10d9c3
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/index.ts
@@ -0,0 +1,2 @@
+export * from './customer-create-side-view.component';
+export * from './customer-create-side-view.module';
diff --git a/apps/page/customer-rd/src/lib/create-customer/defs/customer-query-params.ts b/apps/page/customer-rd/src/lib/create-customer/defs/customer-query-params.ts
new file mode 100644
index 000000000..102f722c9
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/defs/customer-query-params.ts
@@ -0,0 +1,22 @@
+import { CustomerDTO, Gender } from '@swagger/crm';
+
+export interface CreateCustomerQueryParams {
+  p4mNumber?: string;
+  customerId?: number;
+  gender?: Gender;
+  title?: string;
+  firstName?: string;
+  lastName?: string;
+  email?: string;
+  phone?: string;
+  mobile?: string;
+  street?: string;
+  streetNumber?: string;
+  zipCode?: string;
+  city?: string;
+  country?: string;
+  info?: string;
+  organisationName?: string;
+  organisationDepartment?: string;
+  organisationVatId?: string;
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/defs/index.ts b/apps/page/customer-rd/src/lib/create-customer/defs/index.ts
new file mode 100644
index 000000000..e0c340757
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/defs/index.ts
@@ -0,0 +1 @@
+export * from './customer-query-params';
diff --git a/apps/page/customer-rd/src/lib/create-customer/index.ts b/apps/page/customer-rd/src/lib/create-customer/index.ts
new file mode 100644
index 000000000..dbfd05ae4
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/index.ts
@@ -0,0 +1,9 @@
+export * from './create-b2b-customer';
+export * from './create-guest-customer';
+export * from './create-p4m-customer';
+export * from './create-store-customer';
+export * from './create-webshop-customer';
+export * from './defs';
+export * from './abstract-create-customer';
+export * from './create-customer.module';
+export * from './customer-create-form-data';
diff --git a/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/index.ts b/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/index.ts
new file mode 100644
index 000000000..20a55f821
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/index.ts
@@ -0,0 +1,2 @@
+export * from './update-p4m-webshop-customer.component';
+export * from './update-p4m-webshop-customer.module';
diff --git a/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.html b/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.html
new file mode 100644
index 000000000..2fa9afd00
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.html
@@ -0,0 +1,118 @@
+<form *ngIf="formData$ | async; let data" (keydown.enter)="$event.preventDefault()">
+  <h1 class="title flex flex-row items-center justify-center">Kundenkartendaten erfasen</h1>
+  <p class="description">Bitte erfassen Sie die Kundenkarte</p>
+
+  <app-customer-type-selector [processId]="processId$ | async" [p4mUser]="true" customerType="webshop" [readonly]="true">
+  </app-customer-type-selector>
+
+  <app-p4m-number-form-block
+    #p4mBlock
+    [tabIndexStart]="1"
+    (onInit)="addFormBlock('p4m', $event)"
+    [data]="data.p4m"
+    (dataChanges)="patchFormData('p4m', $event)"
+    [focusAfterInit]="!data?._meta?.p4mRequired"
+    [asyncValidatorFns]="asyncLoyaltyCardValidatorFn"
+  >
+  </app-p4m-number-form-block>
+
+  <app-accept-agb-form-block
+    [tabIndexStart]="inBlock.tabIndexEnd + 1"
+    (onInit)="addFormBlock('agb', $event)"
+    [data]="data.agb"
+    (dataChanges)="patchFormData('agb', $event)"
+    [requiredMark]="true"
+    [validatorFns]="agbValidatorFns"
+  >
+  </app-accept-agb-form-block>
+
+  <app-newsletter-form-block
+    #newsletterBlock
+    [tabIndexStart]="p4mBlock.tabIndexEnd + 1"
+    (onInit)="addFormBlock('newsletter', $event)"
+    [data]="data.newsletter"
+    (dataChanges)="patchFormData('newsletter', $event)"
+    [focusAfterInit]="data?._meta?.p4mRequired"
+  >
+  </app-newsletter-form-block>
+
+  <app-name-form-block (onInit)="addFormBlock('name', $event)" [data]="data.name" readonly> </app-name-form-block>
+
+  <app-email-form-block (onInit)="addFormBlock('email', $event)" [data]="data.email" readonly> </app-email-form-block>
+
+  <app-organisation-form-block
+    (onInit)="addFormBlock('organisation', $event)"
+    appearence="compact"
+    [data]="data.organisation"
+    readonly
+  ></app-organisation-form-block>
+
+  <app-address-form-block [data]="data.address" readonly> </app-address-form-block>
+
+  <div class="mt-8">
+    <h4 class="-mb-6">Rechnungsadresse</h4>
+    <ui-form-control class="-mb-5" [showHint]="false">
+      <input type="text" [value]="(billingAddress | address:true) ?? 'Keine Adresse vorhanden'" [readonly]="true" />
+    </ui-form-control>
+    <app-deviating-address-form-block
+      #dbaBlock
+      [defaults]="{ address: { country: 'DEU' } }"
+      [tabIndexStart]="newsletterBlock.tabIndexEnd + 1"
+      (onInit)="addFormBlock('billingAddress', $event)"
+      [data]="data.billingAddress"
+      (dataChanges)="patchFormData('billingAddress', $event)"
+      [nameRequiredMarks]="nameRequiredMarks"
+      [nameValidatorFns]="nameValidationFns"
+      [addressRequiredMarks]="addressRequiredMarks"
+      [addressValidatorFns]="addressValidatorFns"
+    >
+      Abweichende Rechnungsadresse anlegen
+    </app-deviating-address-form-block>
+  </div>
+
+  <div class="mt-8">
+    <h4 class="-mb-6">Lieferadresse</h4>
+    <ui-form-control class="-mb-5" [showHint]="false">
+      <input type="text" [value]="(shippingAddress | address:true) ?? 'Keine Adresse vorhanden'" [readonly]="true" />
+    </ui-form-control>
+    <app-deviating-address-form-block
+      #ddaBlock
+      [defaults]="{ address: { country: 'DEU' } }"
+      [tabIndexStart]="dbaBlock.tabIndexEnd + 1"
+      (onInit)="addFormBlock('deviatingDeliveryAddress', $event)"
+      [data]="data.deviatingDeliveryAddress"
+      (dataChanges)="patchFormData('deviatingDeliveryAddress', $event)"
+      [nameRequiredMarks]="nameRequiredMarks"
+      [nameValidatorFns]="nameValidationFns"
+      [addressRequiredMarks]="addressRequiredMarks"
+      [addressValidatorFns]="addressValidatorFns"
+    >
+      Abweichende Lieferadresse anlegen
+    </app-deviating-address-form-block>
+  </div>
+
+  <app-birth-date-form-block
+    #bdBlock
+    [tabIndexStart]="ddaBlock.tabIndexEnd + 1"
+    (onInit)="addFormBlock('birthDate', $event)"
+    [data]="data.birthDate"
+    (dataChanges)="patchFormData('birthDate', $event)"
+    [requiredMark]="true"
+    [validatorFns]="birthDateValidatorFns"
+  >
+  </app-birth-date-form-block>
+
+  <app-interests-form-block
+    #inBlock
+    [tabIndexStart]="bdBlock.tabIndexEnd + 1"
+    (onInit)="addFormBlock('interests', $event)"
+    [data]="data.interests"
+    (dataChanges)="patchFormData('interests', $event)"
+  ></app-interests-form-block>
+
+  <div class="spacer"></div>
+
+  <button class="cta-submit" type="button" [disabled]="form.invalid || form.pending" (click)="save()">
+    <ui-spinner [show]="busy$ | async">Speichern</ui-spinner>
+  </button>
+</form>
diff --git a/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.scss b/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.ts b/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.ts
new file mode 100644
index 000000000..8cb6465a6
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.component.ts
@@ -0,0 +1,151 @@
+import { Component, ChangeDetectionStrategy, OnInit } from '@angular/core';
+import { AsyncValidatorFn, ValidatorFn, Validators } from '@angular/forms';
+import { Result } from '@domain/defs';
+import { CustomerDTO, KeyValueDTOOfStringAndString, PayerDTO } from '@swagger/crm';
+import { AddressFormBlockData } from '../../components/form-blocks';
+import { NameFormBlockData } from '../../components/form-blocks/name/name-form-block-data';
+import { AbstractCreateCustomer } from '../abstract-create-customer';
+import { CreateP4MCustomerComponent } from '../create-p4m-customer';
+
+@Component({
+  selector: 'page-update-p4m-webshop-customer',
+  templateUrl: 'update-p4m-webshop-customer.component.html',
+  styleUrls: ['../create-customer.scss', 'update-p4m-webshop-customer.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class UpdateP4MWebshopCustomerComponent extends AbstractCreateCustomer implements OnInit {
+  customerType = 'webshop-p4m/update';
+
+  validateAddress = true;
+
+  validateShippingAddress = true;
+
+  agbValidatorFns = [Validators.requiredTrue];
+
+  birthDateValidatorFns = [Validators.required];
+
+  nameRequiredMarks: (keyof NameFormBlockData)[] = ['gender', 'firstName', 'lastName'];
+
+  nameValidationFns: Record<keyof NameFormBlockData, ValidatorFn[]> = {
+    firstName: [Validators.required],
+    lastName: [Validators.required],
+    gender: [Validators.required, Validators.min(1)],
+    title: [],
+  };
+
+  addressRequiredMarks: (keyof AddressFormBlockData)[] = ['street', 'streetNumber', 'zipCode', 'city', 'country'];
+
+  addressValidatorFns: Record<string, ValidatorFn[]> = {
+    street: [Validators.required],
+    streetNumber: [Validators.required],
+    zipCode: [Validators.required],
+    city: [Validators.required],
+    country: [Validators.required],
+  };
+
+  asyncLoyaltyCardValidatorFn: AsyncValidatorFn[] = [this.checkLoyalityCardValidator];
+
+  get billingAddress(): PayerDTO | undefined {
+    const payers = this.formData?._meta?.customerDto?.payers;
+
+    if (!payers || payers.length === 0) {
+      return undefined;
+    }
+
+    // the default payer is the payer with the latest isDefault(Date) value
+    const defaultPayer = payers.reduce((prev, curr) => (new Date(prev.isDefault) > new Date(curr.isDefault) ? prev : curr));
+
+    return defaultPayer.payer.data;
+  }
+
+  get shippingAddress() {
+    const shippingAddresses = this.formData?._meta?.customerDto?.shippingAddresses;
+
+    if (!shippingAddresses || shippingAddresses.length === 0) {
+      return undefined;
+    }
+
+    // the default shipping address is the shipping address with the latest isDefault(Date) value
+    const defaultShippingAddress = shippingAddresses.reduce((prev, curr) =>
+      new Date(prev.data.isDefault) > new Date(curr.data.isDefault) ? prev : curr
+    );
+
+    return defaultShippingAddress.data;
+  }
+
+  ngOnInit() {
+    super.ngOnInit();
+  }
+
+  getInterests(): KeyValueDTOOfStringAndString[] {
+    const interests: KeyValueDTOOfStringAndString[] = [];
+
+    for (const key in this.formData.interests) {
+      if (this.formData.interests[key]) {
+        interests.push({ key, group: 'KUBI_INTERESSEN' });
+      }
+    }
+
+    return interests;
+  }
+
+  getNewsletter(): KeyValueDTOOfStringAndString | undefined {
+    if (this.formData.newsletter) {
+      return { key: 'kubi_newsletter', group: 'KUBI_NEWSLETTER' };
+    }
+  }
+
+  async saveCustomer(customer: CustomerDTO): Promise<CustomerDTO> {
+    let res: Result<CustomerDTO>;
+
+    const { customerDto, customerInfoDto } = this.formData?._meta ?? {};
+
+    if (customerDto) {
+      customer = { ...customerDto, shippingAddresses: [], payers: [], ...customer };
+
+      if (customerDto.shippingAddresses?.length) {
+        customer.shippingAddresses.unshift(...customerDto.shippingAddresses);
+      }
+      if (customerDto.payers?.length) {
+        customer.payers.unshift(...customerDto.payers);
+      }
+    } else if (customerInfoDto) {
+      customer = { ...CreateP4MCustomerComponent.MapCustomerInfoDtoToCustomerDto(customerInfoDto), ...customer };
+    }
+
+    const p4mFeature = customer.features?.find((attr) => attr.key === 'p4mUser');
+    if (p4mFeature) {
+      p4mFeature.value = this.formData.p4m;
+    } else {
+      customer.features.push({
+        key: 'p4mUser',
+        value: this.formData.p4m,
+      });
+    }
+
+    const interests = this.getInterests();
+
+    if (interests.length > 0) {
+      customer.features?.push(...interests);
+      // TODO: Klärung wie Interessen zukünftig gespeichert werden
+      // await this._loyaltyCardService
+      //   .LoyaltyCardSaveInteressen({
+      //     customerId: res.result.id,
+      //     interessen: this.getInterests(),
+      //   })
+      //   .toPromise();
+    }
+
+    const newsletter = this.getNewsletter();
+
+    if (newsletter) {
+      customer.features.push(newsletter);
+    } else {
+      customer.features = customer.features.filter((feature) => feature.key !== 'kubi_newsletter' && feature.group !== 'KUBI_NEWSLETTER');
+    }
+
+    res = await this.customerService.updateToP4MOnlineCustomer(customer);
+
+    return res.result;
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.module.ts b/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.module.ts
new file mode 100644
index 000000000..004d66f2c
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/create-customer/update-p4m-webshop-customer/update-p4m-webshop-customer.module.ts
@@ -0,0 +1,48 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { UpdateP4MWebshopCustomerComponent } from './update-p4m-webshop-customer.component';
+
+import {
+  AddressFormBlockModule,
+  BirthDateFormBlockModule,
+  InterestsFormBlockModule,
+  NameFormBlockModule,
+  OrganisationFormBlockModule,
+  P4mNumberFormBlockModule,
+  NewsletterFormBlockModule,
+  DeviatingAddressFormBlockComponentModule,
+  AcceptAGBFormBlockModule,
+  EmailFormBlockModule,
+  PhoneNumbersFormBlockModule,
+} from '../../components/form-blocks';
+import { UiFormControlModule } from '@ui/form-control';
+import { UiInputModule } from '@ui/input';
+import { CustomerPipesModule } from '@shared/pipes/customer';
+import { CustomerTypeSelectorModule } from '../../components/customer-type-selector';
+import { UiSpinnerModule } from '@ui/spinner';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    CustomerTypeSelectorModule,
+    AddressFormBlockModule,
+    BirthDateFormBlockModule,
+    InterestsFormBlockModule,
+    NameFormBlockModule,
+    OrganisationFormBlockModule,
+    P4mNumberFormBlockModule,
+    NewsletterFormBlockModule,
+    DeviatingAddressFormBlockComponentModule,
+    AcceptAGBFormBlockModule,
+    EmailFormBlockModule,
+    PhoneNumbersFormBlockModule,
+    UiFormControlModule,
+    UiInputModule,
+    CustomerPipesModule,
+    UiSpinnerModule,
+  ],
+  exports: [UpdateP4MWebshopCustomerComponent],
+  declarations: [UpdateP4MWebshopCustomerComponent],
+})
+export class UpdateP4MWebshopCustomerModule {}
diff --git a/apps/page/customer-rd/src/lib/customer-page.component.css b/apps/page/customer-rd/src/lib/customer-page.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/customer-page.component.html b/apps/page/customer-rd/src/lib/customer-page.component.html
new file mode 100644
index 000000000..bcd6c94f7
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-page.component.html
@@ -0,0 +1,3 @@
+<shared-breadcrumb [key]="processId$ | async" [tags]="['customer']" class="mb-9"></shared-breadcrumb>
+
+<router-outlet></router-outlet>
diff --git a/apps/page/customer-rd/src/lib/customer-page.component.ts b/apps/page/customer-rd/src/lib/customer-page.component.ts
new file mode 100644
index 000000000..c6896e578
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-page.component.ts
@@ -0,0 +1,15 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'page-customer',
+  templateUrl: 'customer-page.component.html',
+  styleUrls: ['customer-page.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerComponent {
+  processId$ = this._activatedRoute.data.pipe(map((data) => data.processId));
+
+  constructor(private _activatedRoute: ActivatedRoute) {}
+}
diff --git a/apps/page/customer-rd/src/lib/customer-page.module.ts b/apps/page/customer-rd/src/lib/customer-page.module.ts
new file mode 100644
index 000000000..8706b1f68
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-page.module.ts
@@ -0,0 +1,17 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CustomerComponent } from './customer-page.component';
+import { RouterModule } from '@angular/router';
+import { routes } from './routes';
+
+import { BreadcrumbModule } from '@shared/components/breadcrumb';
+import { CustomerSearchModule } from './customer-search/customer-search.module';
+import { CreateCustomerModule } from './create-customer';
+
+@NgModule({
+  imports: [CommonModule, RouterModule.forChild(routes), BreadcrumbModule, CustomerSearchModule, CreateCustomerModule],
+  exports: [CustomerComponent],
+  declarations: [CustomerComponent],
+})
+export class CustomerModule {}
diff --git a/apps/page/customer-rd/src/lib/customer-search/customer-search.component.css b/apps/page/customer-rd/src/lib/customer-search/customer-search.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/customer-search/customer-search.component.html b/apps/page/customer-rd/src/lib/customer-search/customer-search.component.html
new file mode 100644
index 000000000..8922fb63f
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/customer-search.component.html
@@ -0,0 +1,5 @@
+<page-split-screen class="max-h-[calc(100vh-13.875rem)] h-[calc(100vh-13.875rem)]" [side]="side$ | async">
+  <page-customer-results-side-view *sideTemplate="'results'"></page-customer-results-side-view>
+  <page-customer-main-side-view [processId]="processId$ | async" *sideTemplate="'main'"></page-customer-main-side-view>
+  <router-outlet></router-outlet>
+</page-split-screen>
diff --git a/apps/page/customer-rd/src/lib/customer-search/customer-search.component.ts b/apps/page/customer-rd/src/lib/customer-search/customer-search.component.ts
new file mode 100644
index 000000000..b83ea0cae
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/customer-search.component.ts
@@ -0,0 +1,234 @@
+import { Component, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
+import { BehaviorSubject, Subscription } from 'rxjs';
+import { CustomerSearchStore } from './store/customer-search.store';
+import { provideComponentStore } from '@ngrx/component-store';
+import { Breadcrumb, BreadcrumbService } from '@core/breadcrumb';
+import { filter, first, switchMap } from 'rxjs/operators';
+import { CustomerSearchNavigation } from '../navigations';
+
+@Component({
+  selector: 'page-customer-search',
+  templateUrl: 'customer-search.component.html',
+  styleUrls: ['customer-search.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [provideComponentStore(CustomerSearchStore)],
+})
+export class CustomerSearchComponent implements OnInit, OnDestroy {
+  private _breadcrumb: string | undefined;
+  private _breadcrumbs$ = this._store.processId$.pipe(
+    filter((id) => !!id),
+    switchMap((id) => this._breadcrumbService.getBreadcrumbsByKeyAndTag$(id, 'customer'))
+  );
+
+  side$ = new BehaviorSubject<string | undefined>(undefined);
+
+  get side() {
+    return this.side$.value;
+  }
+
+  get snapshot() {
+    return this._activatedRoute.snapshot;
+  }
+
+  get parentSnapshot() {
+    return this._activatedRoute.parent?.snapshot;
+  }
+
+  get firstChildSnapshot() {
+    return this._activatedRoute.firstChild?.snapshot;
+  }
+
+  readonly processId$ = this._store.processId$;
+
+  private _eventsSubscription: Subscription;
+
+  private _customerChangedSubscription: Subscription;
+
+  constructor(
+    private _store: CustomerSearchStore,
+    private _activatedRoute: ActivatedRoute,
+    private _router: Router,
+    private _breadcrumbService: BreadcrumbService,
+    private _navigation: CustomerSearchNavigation
+  ) {}
+
+  ngOnInit(): void {
+    this.checkAndUpdateProcessId();
+    this.checkAndUpdateSide();
+    this.checkAndUpdateCustomerId();
+    this.checkBreadcrumbs();
+
+    this._customerChangedSubscription = this._store.customer$.subscribe((c) => {
+      this.checkDetailsBreadcrumb();
+    });
+
+    this._eventsSubscription = this._router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.checkAndUpdateProcessId();
+        this.checkAndUpdateSide();
+        this.checkAndUpdateCustomerId();
+        this.checkBreadcrumbs();
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._eventsSubscription.unsubscribe();
+    this._customerChangedSubscription.unsubscribe();
+    this.side$.complete();
+  }
+
+  checkAndUpdateProcessId() {
+    let processId: number;
+
+    processId = this.snapshot.data?.processId;
+
+    if (!processId) {
+      processId = this.parentSnapshot?.data?.processId;
+    }
+
+    if (processId !== this._store.processId) {
+      this._store.setProcessId(processId);
+    }
+  }
+
+  checkAndUpdateSide() {
+    let side: string;
+
+    side = this.snapshot.data?.side;
+
+    if (!side) {
+      side = this.firstChildSnapshot.data?.side;
+    }
+
+    if (side !== this.side) {
+      this.side$.next(side);
+    }
+  }
+
+  checkAndUpdateCustomerId() {
+    let customerId: number;
+
+    customerId = this.snapshot.params.customerId;
+
+    if (!customerId) {
+      customerId = this.firstChildSnapshot?.params.customerId;
+    }
+
+    if (customerId !== this._store.customer?.id) {
+      this._store.selectCustomer(customerId);
+    }
+  }
+
+  async checkBreadcrumbs() {
+    let breadcumb: string;
+
+    breadcumb = this.snapshot.data?.breadcumb;
+
+    if (!breadcumb) {
+      breadcumb = this.firstChildSnapshot.data?.breadcumb;
+    }
+
+    if (breadcumb !== this._breadcrumb) {
+      this._breadcrumb = breadcumb;
+      await this.checkMainBreadcrumb();
+      await this.checkDetailsBreadcrumb();
+      await this.checkHistoryBreadcrumb();
+    }
+  }
+
+  getBreadcrumbs(): Promise<Breadcrumb[]> {
+    return this._breadcrumbs$.pipe(first()).toPromise();
+  }
+
+  async getMainBreadcrumb(): Promise<Breadcrumb | undefined> {
+    const breadcrumbs = await this.getBreadcrumbs();
+    return breadcrumbs.find((b) => b.tags.includes('main'));
+  }
+
+  async checkMainBreadcrumb() {
+    const mainBreadcrumb = await this.getMainBreadcrumb();
+
+    if (!mainBreadcrumb) {
+      const navigation = this._navigation.defaultRoute({ processId: this._store.processId });
+      const breadcrumb: Breadcrumb = {
+        key: this._store.processId,
+        tags: ['customer', 'main'],
+        name: 'Kundensuche',
+        path: navigation.urlTree.toString(),
+        params: navigation.queryParams,
+        section: 'customer',
+      };
+
+      this._breadcrumbService.addBreadcrumb(breadcrumb);
+    }
+  }
+
+  async getDetailsBreadcrumb(): Promise<Breadcrumb | undefined> {
+    const breadcrumbs = await this.getBreadcrumbs();
+    return breadcrumbs.find((b) => b.tags.includes('details'));
+  }
+
+  async checkDetailsBreadcrumb() {
+    const detailsBreadcrumb = await this.getDetailsBreadcrumb();
+
+    if (['details', 'history'].includes(this._breadcrumb)) {
+      const customer = this._store.customer;
+      const fullName = `${customer?.firstName ?? ''} ${customer?.lastName ?? ''}`.trim();
+
+      if (!detailsBreadcrumb) {
+        const navigation = this._navigation.detailsRoute({ processId: this._store.processId, customerId: this._store.customerId });
+
+        const breadcrumb: Breadcrumb = {
+          key: this._store.processId,
+          tags: ['customer', 'details'],
+          name: fullName || 'Kunde',
+          path: navigation.urlTree.toString(),
+          params: navigation.queryParams,
+          section: 'customer',
+        };
+
+        this._breadcrumbService.addBreadcrumb(breadcrumb);
+      } else if (!!fullName) {
+        const navigation = this._navigation.detailsRoute({ processId: this._store.processId, customerId: this._store.customerId });
+
+        this._breadcrumbService.patchBreadcrumb(detailsBreadcrumb.id, {
+          name: fullName,
+          path: navigation.urlTree.toString(),
+          params: navigation.queryParams,
+        });
+      }
+    } else if (detailsBreadcrumb) {
+      this._breadcrumbService.removeBreadcrumb(detailsBreadcrumb.id);
+    }
+  }
+
+  async getHistoryBreadcrumb(): Promise<Breadcrumb | undefined> {
+    const breadcrumbs = await this.getBreadcrumbs();
+    return breadcrumbs.find((b) => b.tags.includes('history'));
+  }
+
+  async checkHistoryBreadcrumb() {
+    const historyBreadcrumb = await this.getHistoryBreadcrumb();
+
+    if (this._breadcrumb === 'history') {
+      if (!historyBreadcrumb) {
+        const navigation = this._navigation.historyRoute({ processId: this._store.processId, customerId: this._store.customerId });
+
+        const breadcrumb: Breadcrumb = {
+          key: this._store.processId,
+          tags: ['customer', 'history'],
+          name: 'Historie',
+          path: navigation.urlTree.toString(),
+          params: navigation.queryParams,
+          section: 'customer',
+        };
+
+        this._breadcrumbService.addBreadcrumb(breadcrumb);
+      }
+    } else if (historyBreadcrumb) {
+      this._breadcrumbService.removeBreadcrumb(historyBreadcrumb.id);
+    }
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/customer-search.module.ts b/apps/page/customer-rd/src/lib/customer-search/customer-search.module.ts
new file mode 100644
index 000000000..72d6387dc
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/customer-search.module.ts
@@ -0,0 +1,29 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CustomerSearchComponent } from './customer-search.component';
+import { CustomerResultsSideViewModule } from './results-side-view/results-side-view.module';
+import { RouterModule } from '@angular/router';
+import { CustomerResultsMainViewModule } from './results-main-view/results-main-view.module';
+import { CustomerDetailsMainViewModule } from './details-main-view/details-main-view.module';
+import { CustomerHistoryMainViewModule } from './history-main-view/history-main-view.module';
+import { CustomerFilterMainViewModule } from './filter-main-view/filter-main-view.module';
+import { SplitScreenModule } from '../components/split-screen/split-screen.module';
+import { MainSideViewModule } from './main-side-view/main-side-view.module';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule,
+    SplitScreenModule,
+    CustomerResultsSideViewModule,
+    CustomerResultsMainViewModule,
+    CustomerDetailsMainViewModule,
+    CustomerHistoryMainViewModule,
+    CustomerFilterMainViewModule,
+    MainSideViewModule,
+  ],
+  exports: [CustomerSearchComponent],
+  declarations: [CustomerSearchComponent],
+})
+export class CustomerSearchModule {}
diff --git a/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.css b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.css
new file mode 100644
index 000000000..50099add9
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.css
@@ -0,0 +1,19 @@
+:host {
+  @apply block bg-surface text-surface-content rounded-[0.313rem] mb-3;
+}
+
+.data-label {
+  @apply w-[10.75rem];
+}
+
+.data-value {
+  @apply grow font-bold;
+}
+
+.customer-details-customer-main-row {
+  @apply px-5 py-3 bg-surface text-surface-content border-t-2 border-solid border-surface-2 flex flex-row items-center;
+}
+
+.customer-details-customer-main-row .data-label {
+  @apply w-[6.875rem];
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.html b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.html
new file mode 100644
index 000000000..a84f7dc19
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.html
@@ -0,0 +1,98 @@
+<ng-container *ngIf="fetching$ | async; else customerTemplate"></ng-container>
+
+<ng-template #customerTemplate>
+  <div class="customer-details-header grid grid-flow-row pt-1 px-1 pb-6">
+    <div class="customer-details-header-actions flex flex-row justify-end pt-1 px-1">
+      <a
+        *ngIf="historyRoute$ | async; let historyRoute"
+        class="btn btn-label font-bold text-brand"
+        [routerLink]="historyRoute.path"
+        [queryParams]="historyRoute.queryParams"
+        >Historie</a
+      >
+    </div>
+    <div class="customer-details-header-body text-center -mt-3">
+      <h1 class="text-[1.625rem] font-bold">Kundendetails</h1>
+      <p>Sind Ihre Kundendaten korrekt?</p>
+    </div>
+  </div>
+  <div class="customer-details-customer-type flex flex-row justify-between items-center bg-surface-2 text-surface-2-content">
+    <div class="pl-4 font-bold">{{ customerType$ | async }}</div>
+    <button class="btn btn-label font-bold text-brand" type="button">Bearbeiten</button>
+  </div>
+
+  <div class="customer-details-customer-main-data px-5 py-3 grid grid-flow-row gap-3">
+    <div class="flex flex-row">
+      <div class="data-label">Erstellungsdatum</div>
+      <div class="data-value">{{ created$ | async | date: 'dd.MM.yyyy' }} | {{ created$ | async | date: 'hh:mm' }} Uhr</div>
+    </div>
+    <div class="flex flex-row">
+      <div class="data-label">Kundennummer</div>
+      <div class="data-value">{{ customerNumber$ | async }}</div>
+    </div>
+    <div class="flex flex-row" *ngIf="customerNumberDig$ | async; let customerNumberDig">
+      <div class="data-label">Kundennummer-DIG</div>
+      <div class="data-value">{{ customerNumberDig }}</div>
+    </div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">Anrede</div>
+    <div class="data-value">{{ gender$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">Titel</div>
+    <div class="data-value">{{ title$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">Nachname</div>
+    <div class="data-value">{{ lastName$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">Vorname</div>
+    <div class="data-value">{{ firstName$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">E-Mail</div>
+    <div class="data-value">{{ email$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">Straße</div>
+    <div class="data-value">{{ street$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">Hausnr.</div>
+    <div class="data-value">{{ streetNumber$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">PLZ</div>
+    <div class="data-value">{{ zipCode$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">Ort</div>
+    <div class="data-value">{{ city$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">Adresszusatz</div>
+    <div class="data-value">{{ info$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">Land</div>
+    <div class="data-value">{{ country$ | async | country }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">Festnetznr.</div>
+    <div class="data-value">{{ landline$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">Mobilnr.</div>
+    <div class="data-value">{{ mobile$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">Abteilung</div>
+    <div class="data-value">{{ department$ | async }}</div>
+  </div>
+  <div class="customer-details-customer-main-row">
+    <div class="data-label">USt-ID</div>
+    <div class="data-value">{{ vatId$ | async }}</div>
+  </div>
+</ng-template>
diff --git a/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.ts b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.ts
new file mode 100644
index 000000000..b0dc83ad8
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.component.ts
@@ -0,0 +1,68 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { CustomerSearchNavigation } from '../../navigations';
+import { CustomerSearchStore } from '../store';
+
+const GENDER_MAP = {
+  2: 'Herr',
+  4: 'Frau',
+};
+
+@Component({
+  selector: 'page-customer-details-main-view',
+  templateUrl: 'details-main-view.component.html',
+  styleUrls: ['details-main-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerDetailsViewMainComponent {
+  fetching$ = this._store.fetchingCustomer$;
+
+  processId$ = this._store.processId$;
+
+  customerId$ = this._store.customerId$;
+
+  historyRoute$ = combineLatest([this.processId$, this.customerId$]).pipe(
+    map(([processId, customerId]) => this._navigation.historyRoute({ processId, customerId }))
+  );
+
+  customerType$ = this._store.select((s) => s.customer?.features?.find((f) => f.enabled)?.description);
+
+  created$ = this._store.select((s) => s.customer?.created);
+
+  customerNumber$ = this._store.select((s) => s.customer?.customerNumber);
+
+  customerNumberDig$ = this._store.select((s) => s.customer?.linkedRecords?.find((r) => r.repository === 'dig')?.number);
+
+  gender$ = this._store.select((s) => GENDER_MAP[s.customer?.gender]);
+
+  title$ = this._store.select((s) => s.customer?.title);
+
+  lastName$ = this._store.select((s) => s.customer?.lastName);
+
+  firstName$ = this._store.select((s) => s.customer?.firstName);
+
+  email$ = this._store.select((s) => s.customer?.communicationDetails?.email);
+
+  street$ = this._store.select((s) => s.customer?.address?.street);
+
+  streetNumber$ = this._store.select((s) => s.customer?.address?.streetNumber);
+
+  zipCode$ = this._store.select((s) => s.customer?.address?.zipCode);
+
+  city$ = this._store.select((s) => s.customer?.address?.city);
+
+  country$ = this._store.select((s) => s.customer?.address?.country);
+
+  info$ = this._store.select((s) => s.customer?.address?.info);
+
+  landline$ = this._store.select((s) => s.customer?.communicationDetails?.phone);
+
+  mobile$ = this._store.select((s) => s.customer?.communicationDetails?.mobile);
+
+  department$ = this._store.select((s) => s.customer?.organisation?.department);
+
+  vatId$ = this._store.select((s) => s.customer?.organisation?.vatId);
+
+  constructor(private _store: CustomerSearchStore, private _navigation: CustomerSearchNavigation) {}
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.module.ts b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.module.ts
new file mode 100644
index 000000000..03a09bf2b
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/details-main-view/details-main-view.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CustomerDetailsViewMainComponent } from './details-main-view.component';
+import { CountryPipe } from '@shared/pipes/country';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [CommonModule, CountryPipe, RouterModule],
+  exports: [CustomerDetailsViewMainComponent],
+  declarations: [CustomerDetailsViewMainComponent],
+})
+export class CustomerDetailsMainViewModule {}
diff --git a/apps/page/customer-rd/src/lib/customer-search/edit-main-view/edit-main-view.component.css b/apps/page/customer-rd/src/lib/customer-search/edit-main-view/edit-main-view.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/customer-search/edit-main-view/edit-main-view.component.html b/apps/page/customer-rd/src/lib/customer-search/edit-main-view/edit-main-view.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/customer-search/edit-main-view/edit-main-view.component.ts b/apps/page/customer-rd/src/lib/customer-search/edit-main-view/edit-main-view.component.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/customer-search/edit-main-view/edit-main-view.module.ts b/apps/page/customer-rd/src/lib/customer-search/edit-main-view/edit-main-view.module.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.css b/apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.css
new file mode 100644
index 000000000..e9e141453
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.css
@@ -0,0 +1,3 @@
+:host {
+  @apply block bg-surface text-surface-content rounded-[0.313rem] mb-3;
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.html b/apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.html
new file mode 100644
index 000000000..909fa7b56
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.html
@@ -0,0 +1,19 @@
+<ng-container *ngIf="fetching$ | async; else filterTemplate"></ng-container>
+
+<ng-template #filterTemplate>
+  <div>
+    <div class="customer-filter-header">
+      <div class="customer-filter-header-actions flex flex-row justify-end pt-1 px-1">
+        <a *ngIf="closeRoute$ | async; let route" [routerLink]="route.path" [queryParams]="route.queryParams" class="btn btn-label">
+          <ui-icon [icon]="'close'"></ui-icon>
+        </a>
+      </div>
+      <div class="customer-filter-header-body text-center -mt-3">
+        <h1 class="text-[1.625rem] font-bold">Filter</h1>
+      </div>
+    </div>
+    <div class="px-3 bg-surface-2 text-surface-2-content">
+      <shared-filter [filter]="filter$ | async"></shared-filter>
+    </div>
+  </div>
+</ng-template>
diff --git a/apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.ts b/apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.ts
new file mode 100644
index 000000000..ec394c102
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.component.ts
@@ -0,0 +1,36 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { CustomerSearchStore } from '../store';
+import { ActivatedRoute } from '@angular/router';
+import { map } from 'rxjs/operators';
+import { CustomerSearchNavigation, NavigationRoute } from '../../navigations';
+import { combineLatest } from 'rxjs';
+
+@Component({
+  selector: 'page-customer-filter-main-view',
+  templateUrl: 'filter-main-view.component.html',
+  styleUrls: ['filter-main-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerFilterMainViewComponent {
+  fetching$ = this._store.fetchingFilter$;
+
+  filter$ = this._store.filter$;
+
+  comingFrom$ = this._activatedRoute.queryParams.pipe(map((params) => params.comingFrom));
+
+  closeRoute$ = combineLatest([this.comingFrom$, this._store.processId$]).pipe(
+    map(([comingFrom, processId]) => {
+      if (comingFrom) {
+        return { path: comingFrom } as NavigationRoute;
+      } else {
+        return this._navigation.defaultRoute({ processId });
+      }
+    })
+  );
+
+  constructor(
+    private _store: CustomerSearchStore,
+    private _activatedRoute: ActivatedRoute,
+    private _navigation: CustomerSearchNavigation
+  ) {}
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.module.ts b/apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.module.ts
new file mode 100644
index 000000000..460f3b869
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/filter-main-view/filter-main-view.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FilterModule } from '@shared/components/filter';
+
+import { CustomerFilterMainViewComponent } from './filter-main-view.component';
+import { RouterModule } from '@angular/router';
+import { UiIconModule } from '@ui/icon';
+
+@NgModule({
+  imports: [CommonModule, FilterModule, RouterModule, UiIconModule],
+  exports: [CustomerFilterMainViewComponent],
+  declarations: [CustomerFilterMainViewComponent],
+})
+export class CustomerFilterMainViewModule {}
diff --git a/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.css b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.css
new file mode 100644
index 000000000..40fca449b
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.css
@@ -0,0 +1,7 @@
+:host {
+  @apply block bg-surface text-surface-content rounded-[0.313rem] mb-3;
+}
+
+::ng-deep page-customer-history-main-view shared-history-list .scroll-container {
+  @apply h-[calc(100vh-24rem)];
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.html b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.html
new file mode 100644
index 000000000..4472108ce
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.html
@@ -0,0 +1,29 @@
+<ng-container *ngIf="fetching$ | async; else historyTemplate"></ng-container>
+
+<ng-template #historyTemplate>
+  <div>
+    <div class="customer-history-header">
+      <div class="customer-history-header-actions flex flex-row justify-end pt-1 px-1">
+        <a *ngIf="detailsRoute$ | async; let route" [routerLink]="route.path" [queryParams]="route.queryParams" class="btn btn-label">
+          <ui-icon [icon]="'close'"></ui-icon>
+        </a>
+      </div>
+      <div class="customer-history-header-body text-center -mt-3">
+        <h1 class="text-[1.625rem] font-bold">Historie</h1>
+      </div>
+      <div class="customer-history-header-info flex flex-row justify-evenly items-center my-5">
+        <div class="flex flex-row">
+          <div class="w-36">Kundenname</div>
+          <div class="grow font-bold">{{ customerName$ | async }}</div>
+        </div>
+        <div class="flex flex-row">
+          <div class="w-36">Kundennummer</div>
+          <div class="grow font-bold">{{ customerNumber$ | async }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="px-3 bg-surface-2 text-surface-2-content">
+      <shared-history-list [history]="history$ | async"> </shared-history-list>
+    </div>
+  </div>
+</ng-template>
diff --git a/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.ts b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.ts
new file mode 100644
index 000000000..8bfa03170
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.component.ts
@@ -0,0 +1,74 @@
+import { Component, ChangeDetectionStrategy, AfterViewInit } from '@angular/core';
+import { CrmCustomerService } from '@domain/crm';
+import { ComponentStore, tapResponse } from '@ngrx/component-store';
+import { HistoryDTO } from '@swagger/crm';
+import { Observable, combineLatest } from 'rxjs';
+import { map, switchMap, tap } from 'rxjs/operators';
+import { CustomerSearchStore } from '../store';
+import { CustomerSearchNavigation } from '../../navigations';
+
+export interface CustomerHistoryViewMainState {
+  history?: HistoryDTO[];
+  fetching?: boolean;
+}
+
+@Component({
+  selector: 'page-customer-history-main-view',
+  templateUrl: 'history-main-view.component.html',
+  styleUrls: ['history-main-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerHistoryMainViewComponent extends ComponentStore<CustomerHistoryViewMainState> implements AfterViewInit {
+  fetching$ = this.select((s) => s.fetching);
+
+  history$ = this.select((s) => s.history);
+
+  processId$ = this._store.processId$;
+
+  customerId$ = this._store.customerId$;
+
+  customer$ = this._store.customer$;
+
+  detailsRoute$ = combineLatest([this.processId$, this.customerId$]).pipe(
+    map(([processId, customerId]) => this._navigation.detailsRoute({ processId, customerId }))
+  );
+
+  customerName$ = this.customer$.pipe(map((customer) => `${customer?.lastName}, ${customer?.firstName}`));
+
+  customerNumber$ = this.customer$.pipe(map((customer) => customer?.customerNumber));
+
+  constructor(
+    private _store: CustomerSearchStore,
+    private _customerService: CrmCustomerService,
+    private _navigation: CustomerSearchNavigation
+  ) {
+    super({});
+  }
+
+  ngAfterViewInit(): void {
+    this.fetchHistory(this.customerId$);
+  }
+
+  fetchHistory = this.effect((customerId$: Observable<number>) =>
+    customerId$.pipe(
+      tap(() => this.patchState({ fetching: true })),
+      switchMap((customerId) =>
+        this._customerService
+          .getCustomerHistory(customerId)
+          .pipe(tapResponse(this.handleFetchHistoryResponse, this.handleFetchHistoryError, this.handleFetchHistoryComplete))
+      )
+    )
+  );
+
+  handleFetchHistoryResponse = (history: HistoryDTO[]) => {
+    this.patchState({ history });
+  };
+
+  handleFetchHistoryError = (err: any) => {
+    console.error(err);
+  };
+
+  handleFetchHistoryComplete = () => {
+    this.patchState({ fetching: false });
+  };
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.module.ts b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.module.ts
new file mode 100644
index 000000000..3b742c0c8
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/history-main-view/history-main-view.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { SharedHistoryListModule } from '@shared/components/history';
+
+import { CustomerHistoryMainViewComponent } from './history-main-view.component';
+import { UiIconModule } from '@ui/icon';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [CommonModule, RouterModule, SharedHistoryListModule, UiIconModule],
+  exports: [CustomerHistoryMainViewComponent],
+  declarations: [CustomerHistoryMainViewComponent],
+})
+export class CustomerHistoryMainViewModule {}
diff --git a/apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.css b/apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.css
new file mode 100644
index 000000000..3bc0b5236
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.css
@@ -0,0 +1,7 @@
+:host {
+  @apply bg-surface text-surface-content rounded flex flex-col h-full;
+}
+
+.side-view-shadow {
+  box-shadow: 0px -2px 24px rgba(220, 226, 233, 0.8);
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.html b/apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.html
new file mode 100644
index 000000000..bc75e50cd
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.html
@@ -0,0 +1,12 @@
+<a
+  [routerLink]="customerCreateNavigation.path"
+  [queryParams]="customerCreateNavigation.queryParams"
+  class="text-[1.375rem] font-bold text-[#596470] text-center py-4"
+  >Kundendaten erfassen</a
+>
+<div class="text-center pt-10 px-8 rounded-card side-view-shadow grow">
+  <h1 class="text-[1.625rem] font-bold">Kundensuche</h1>
+  <p class="text-lg mt-2">
+    Wir legen Ihnen gerne ein Onlinekonto an, dort können Sie Ihre Bestellungen einsehen.
+  </p>
+</div>
diff --git a/apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.ts b/apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.ts
new file mode 100644
index 000000000..6734176aa
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.ts
@@ -0,0 +1,24 @@
+import { CommonModule } from '@angular/common';
+import { Component, ChangeDetectionStrategy, Input } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { CustomerCreateNavigation } from '../../navigations/customer-create.navigation';
+import { NumberInput } from '@angular/cdk/coercion';
+
+@Component({
+  selector: 'page-customer-main-side-view',
+  templateUrl: 'main-side-view.component.html',
+  styleUrls: ['main-side-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+})
+export class MainSideViewComponent {
+  @Input()
+  processId: NumberInput;
+
+  get customerCreateNavigation() {
+    return this._navigation.defaultRoute({ processId: this.processId });
+  }
+
+  constructor(private _navigation: CustomerCreateNavigation) {}
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.module.ts b/apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.module.ts
new file mode 100644
index 000000000..f841d167a
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.module.ts
@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+
+import { MainSideViewComponent } from './main-side-view.component';
+
+@NgModule({
+  imports: [MainSideViewComponent],
+  exports: [MainSideViewComponent],
+})
+export class MainSideViewModule {}
diff --git a/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.css b/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.html b/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.ts b/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.component.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.module.ts b/apps/page/customer-rd/src/lib/customer-search/orders-main-view/orders-main-view.module.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.component.css b/apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.component.html b/apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.component.html
new file mode 100644
index 000000000..bc908d262
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.component.html
@@ -0,0 +1,18 @@
+<div class="customer-result-list-header bg-surface-2 text-surface-2-content flex flex-row justify-between pb-4">
+  <div class="grid grid-flow-col gap-3 items-center justify-start grow-0">
+    <shared-searchbox class="w-[20.892rem]"> </shared-searchbox>
+    <a
+      class="btn btn-light w-[5.813rem] h-14"
+      *ngIf="filterRoute$ | async; let route"
+      [routerLink]="route.path"
+      [queryParams]="route.queryParams"
+    >
+      Filter
+    </a>
+  </div>
+
+  <span class="mr-5 self-end text-sm">
+    xxx Treffer
+  </span>
+</div>
+<page-customer-result-list [processId]="processId$ | async"> </page-customer-result-list>
diff --git a/apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.component.ts b/apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.component.ts
new file mode 100644
index 000000000..2d48b9e14
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.component.ts
@@ -0,0 +1,55 @@
+import { Component, ChangeDetectionStrategy, OnInit, OnDestroy } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
+import { CustomerSearchStore } from '../store/customer-search.store';
+import { BehaviorSubject, Subscription, combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { CustomerSearchNavigation, NavigationRoute } from '../../navigations';
+
+@Component({
+  selector: 'page-customer-results-main-view',
+  templateUrl: 'results-main-view.component.html',
+  styleUrls: ['results-main-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerResultsMainViewComponent implements OnInit, OnDestroy {
+  processId$ = this._store.processId$;
+
+  currentUrl$ = new BehaviorSubject<string>(this._router.url);
+
+  filterRoute$ = combineLatest([this.processId$, this.currentUrl$]).pipe(
+    map(([processId, url]) => {
+      const route = this._navigation.filterRoute({ processId, comingFrom: url });
+      const routeTree = this._router.createUrlTree(route.path, { queryParams: route.queryParams });
+      const currentlyActive = this._router.isActive(routeTree, {
+        fragment: 'ignored',
+        matrixParams: 'ignored',
+        paths: 'exact',
+        queryParams: 'ignored',
+      });
+
+      if (currentlyActive) {
+        const urlTree = this._router.parseUrl(url);
+        const comingFrom = urlTree.queryParamMap.get('comingFrom');
+        return { path: [comingFrom] } as NavigationRoute;
+      }
+
+      return route;
+    })
+  );
+
+  routerEventsSubscription: Subscription;
+
+  constructor(private _store: CustomerSearchStore, private _router: Router, private _navigation: CustomerSearchNavigation) {}
+
+  ngOnInit(): void {
+    this._router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.currentUrl$.next(event.url);
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.routerEventsSubscription?.unsubscribe();
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.module.ts b/apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.module.ts
new file mode 100644
index 000000000..2168c605f
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/results-main-view/results-main-view.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CustomerResultsMainViewComponent } from './results-main-view.component';
+import { CustomerResultListModule } from '../../components/customer-result-list/customer-result-list.module';
+import { SearchboxModule } from '@shared/components/searchbox';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [CommonModule, CustomerResultListModule, SearchboxModule, RouterModule],
+  exports: [CustomerResultsMainViewComponent],
+  declarations: [CustomerResultsMainViewComponent],
+})
+export class CustomerResultsMainViewModule {}
diff --git a/apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.component.css b/apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.component.html b/apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.component.html
new file mode 100644
index 000000000..3f40e1705
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.component.html
@@ -0,0 +1,18 @@
+<div class="customer-result-list-header bg-surface-2 text-surface-2-content flex flex-col justify-between pb-4">
+  <div class="grid grid-flow-col gap-3 items-center justify-start grow-0">
+    <shared-searchbox class="w-[20.892rem]"> </shared-searchbox>
+    <a
+      class="btn btn-light w-[5.813rem] h-14"
+      *ngIf="filterRoute$ | async; let route"
+      [routerLink]="route.path"
+      [queryParams]="route.queryParams"
+    >
+      Filter
+    </a>
+  </div>
+
+  <span class="mr-5 self-end text-sm mt-4">
+    xxx Treffer
+  </span>
+</div>
+<page-customer-result-list [processId]="processId$ | async" compact="true"> </page-customer-result-list>
diff --git a/apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.component.ts b/apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.component.ts
new file mode 100644
index 000000000..93ba1b6ba
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.component.ts
@@ -0,0 +1,55 @@
+import { Component, ChangeDetectionStrategy, OnDestroy, OnInit } from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { CustomerSearchStore } from '../store/customer-search.store';
+import { Subscription, BehaviorSubject, combineLatest } from 'rxjs';
+import { CustomerSearchNavigation, NavigationRoute } from '../../navigations';
+import { map } from 'rxjs/operators';
+
+@Component({
+  selector: 'page-customer-results-side-view',
+  templateUrl: 'results-side-view.component.html',
+  styleUrls: ['results-side-view.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CustomerResultsSideViewComponent implements OnInit, OnDestroy {
+  processId$ = this._store.processId$;
+
+  currentUrl$ = new BehaviorSubject<string>(this._router.url);
+
+  filterRoute$ = combineLatest([this.processId$, this.currentUrl$]).pipe(
+    map(([processId, url]) => {
+      const route = this._navigation.filterRoute({ processId, comingFrom: url });
+      const routeTree = this._router.createUrlTree(route.path, { queryParams: route.queryParams });
+      const currentlyActive = this._router.isActive(routeTree, {
+        fragment: 'ignored',
+        matrixParams: 'ignored',
+        paths: 'exact',
+        queryParams: 'ignored',
+      });
+
+      if (currentlyActive) {
+        const urlTree = this._router.parseUrl(url);
+        const comingFrom = urlTree.queryParamMap.get('comingFrom');
+        return { path: [comingFrom] } as NavigationRoute;
+      }
+
+      return route;
+    })
+  );
+
+  routerEventsSubscription: Subscription;
+
+  constructor(private _store: CustomerSearchStore, private _router: Router, private _navigation: CustomerSearchNavigation) {}
+
+  ngOnInit(): void {
+    this._router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.currentUrl$.next(event.url);
+      }
+    });
+  }
+
+  ngOnDestroy(): void {
+    this.routerEventsSubscription?.unsubscribe();
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.module.ts b/apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.module.ts
new file mode 100644
index 000000000..09a89a808
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/results-side-view/results-side-view.module.ts
@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CustomerResultsSideViewComponent } from './results-side-view.component';
+import { CustomerResultListModule } from '../../components/customer-result-list/customer-result-list.module';
+import { SearchboxModule } from '@shared/components/searchbox';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [CommonModule, CustomerResultListModule, SearchboxModule, RouterModule],
+  exports: [CustomerResultsSideViewComponent],
+  declarations: [CustomerResultsSideViewComponent],
+})
+export class CustomerResultsSideViewModule {}
diff --git a/apps/page/customer-rd/src/lib/customer-search/store/customer-search.state.ts b/apps/page/customer-rd/src/lib/customer-search/store/customer-search.state.ts
new file mode 100644
index 000000000..7881d6aa0
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/store/customer-search.state.ts
@@ -0,0 +1,13 @@
+import { Filter } from '@shared/components/filter';
+import { CustomerDTO, CustomerInfoDTO } from '@swagger/crm';
+
+export interface CustomerSearchState {
+  processId?: number;
+  customer?: CustomerDTO;
+  fetchingCustomer?: boolean;
+  filter?: Filter;
+  fetchingFilter?: boolean;
+  customerList?: CustomerInfoDTO[];
+  customerListCount?: number;
+  fetchingCustomerList?: boolean;
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/store/customer-search.store.ts b/apps/page/customer-rd/src/lib/customer-search/store/customer-search.store.ts
new file mode 100644
index 000000000..8d7c8956f
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/store/customer-search.store.ts
@@ -0,0 +1,133 @@
+import { ComponentStore, tapResponse, OnStoreInit } from '@ngrx/component-store';
+import { CustomerSearchState } from './customer-search.state';
+import * as S from './selectors';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { distinctUntilChanged, filter, switchMap, tap, withLatestFrom } from 'rxjs/operators';
+import { CrmCustomerService } from '@domain/crm';
+import { DomainCheckoutService } from '@domain/checkout';
+import { Result } from '@domain/defs';
+import { CustomerDTO, CustomerInfoDTO, ListResponseArgsOfCustomerInfoDTO, QuerySettingsDTO } from '@swagger/crm';
+import { Filter } from '@shared/components/filter';
+
+@Injectable()
+export class CustomerSearchStore extends ComponentStore<CustomerSearchState> implements OnStoreInit {
+  get processId() {
+    return this.get(S.selectProcessId);
+  }
+
+  processId$ = this.select(S.selectProcessId);
+
+  get fetchingCustomer() {
+    return this.get(S.selectFetchingCustomer);
+  }
+
+  fetchingCustomer$ = this.select(S.selectFetchingCustomer);
+
+  get customerId() {
+    return this.get(S.selectCustomerId);
+  }
+
+  customerId$ = this.select(S.selectCustomerId);
+
+  get customer() {
+    return this.get(S.selectCustomer);
+  }
+
+  customer$ = this.select(S.selectCustomer);
+
+  get filter() {
+    return this.get(S.selectFilter);
+  }
+
+  filter$ = this.select(S.selectFilter);
+
+  get fetchingFilter() {
+    return this.get(S.selectFetchingFilter);
+  }
+
+  fetchingFilter$ = this.select(S.selectFetchingFilter);
+
+  constructor(private _customerService: CrmCustomerService) {
+    super({});
+  }
+
+  ngrxOnStoreInit = () => {
+    this.fetchFilter();
+  };
+
+  setProcessId = this.updater((state, processId: number) => ({ ...state, processId }));
+
+  selectCustomer = this.effect((customerId$: Observable<number>) =>
+    customerId$.pipe(
+      distinctUntilChanged(),
+      filter((customerId) => !!customerId),
+      tap((custoemrId) => this.patchState({ fetchingCustomer: true, customer: { id: custoemrId } })),
+      switchMap((customerId) =>
+        this._customerService
+          .getCustomer(customerId)
+          .pipe(tapResponse(this.handleSelectCustomerResponse, this.handleSelectCustomerError, this.handleSelectCustomerComplete))
+      )
+    )
+  );
+
+  handleSelectCustomerResponse = ({ result }: Result<CustomerDTO>) => {
+    this.patchState({ customer: result });
+  };
+
+  handleSelectCustomerError = (err: any) => {
+    console.error(err);
+  };
+
+  handleSelectCustomerComplete = () => {
+    this.patchState({ fetchingCustomer: false });
+  };
+
+  fetchFilter = this.effect(($: Observable<void>) =>
+    $.pipe(
+      tap(() => this.patchState({ fetchingFilter: true })),
+      switchMap(() =>
+        this._customerService
+          .filterSettings()
+          .pipe(tapResponse(this.handleFetchFilterResponse, this.handleFetchFilterError, this.handleFetchFilterComplete))
+      )
+    )
+  );
+
+  handleFetchFilterResponse = (result: QuerySettingsDTO) => {
+    const filter = Filter.create(result);
+    this.patchState({ filter });
+  };
+
+  handleFetchFilterError = (err: any) => {
+    console.error(err);
+  };
+
+  handleFetchFilterComplete = () => {
+    this.patchState({ fetchingFilter: false });
+  };
+
+  search = this.effect(($: Observable<void>) =>
+    $.pipe(
+      withLatestFrom(this.filter$),
+      tap(() => this.patchState({ fetchingCustomerList: true })),
+      switchMap(([_, filter]) =>
+        this._customerService
+          .getCustomersWithQueryToken(filter.getQueryToken())
+          .pipe(tapResponse(this.handleSearchResponse, this.handleSearchError, this.handleSearchComplete))
+      )
+    )
+  );
+
+  handleSearchResponse = (result: ListResponseArgsOfCustomerInfoDTO) => {
+    this.patchState({ customerList: result.result, customerListCount: result.hits });
+  };
+
+  handleSearchError = (err: any) => {
+    console.error(err);
+  };
+
+  handleSearchComplete = () => {
+    this.patchState({ fetchingCustomerList: false });
+  };
+}
diff --git a/apps/page/customer-rd/src/lib/customer-search/store/index.ts b/apps/page/customer-rd/src/lib/customer-search/store/index.ts
new file mode 100644
index 000000000..322a84ecf
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/store/index.ts
@@ -0,0 +1,3 @@
+export * from './customer-search.state';
+export * from './customer-search.store';
+export * from './selectors';
diff --git a/apps/page/customer-rd/src/lib/customer-search/store/selectors.ts b/apps/page/customer-rd/src/lib/customer-search/store/selectors.ts
new file mode 100644
index 000000000..ab4674045
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/customer-search/store/selectors.ts
@@ -0,0 +1,26 @@
+import { coerceNumberProperty } from '@angular/cdk/coercion';
+import { CustomerSearchState } from './customer-search.state';
+
+export function selectProcessId(s: CustomerSearchState): number {
+  return coerceNumberProperty(s.processId);
+}
+
+export function selectFetchingCustomer(s: CustomerSearchState) {
+  return s.fetchingCustomer;
+}
+
+export function selectCustomer(s: CustomerSearchState) {
+  return s.customer;
+}
+
+export function selectCustomerId(s: CustomerSearchState) {
+  return selectCustomer(s)?.id;
+}
+
+export function selectFilter(s: CustomerSearchState) {
+  return s.filter;
+}
+
+export function selectFetchingFilter(s: CustomerSearchState) {
+  return s.fetchingFilter;
+}
diff --git a/apps/page/customer-rd/src/lib/guards/customer-create.guard.ts b/apps/page/customer-rd/src/lib/guards/customer-create.guard.ts
new file mode 100644
index 000000000..a5866d19e
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/guards/customer-create.guard.ts
@@ -0,0 +1,111 @@
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanActivate, CanActivateChild, Params, Router, RouterStateSnapshot } from '@angular/router';
+import { DomainCheckoutService } from '@domain/checkout';
+import { CustomerCreateFormData, decodeFormData } from '../create-customer';
+
+@Injectable({ providedIn: 'root' })
+export class CustomerCreateGuard implements CanActivateChild, CanActivate {
+  constructor(private router: Router, private checkoutService: DomainCheckoutService) {}
+
+  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
+    // exit with true if canActivateChild will be called
+    if (route.firstChild) {
+      return true;
+    }
+
+    let customerType = 'store';
+
+    const processId = this.getProcessId(route);
+    const formData = this.getFormData(route);
+    const canActivateCustomerType = await this.setableCustomerTypes(processId, formData);
+
+    if (canActivateCustomerType[customerType] !== true) {
+      customerType = Object.keys(canActivateCustomerType).find((key) => canActivateCustomerType[key]);
+    }
+
+    await this.navigate(processId, customerType, route.queryParams);
+
+    return true;
+  }
+
+  async canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
+    const processId = this.getProcessId(route);
+    const customerType = route.routeConfig.path?.replace('/update', '');
+    const formData = this.getFormData(route);
+
+    const canActivateCustomerType = await this.setableCustomerTypes(processId, formData);
+
+    if (canActivateCustomerType[customerType]) {
+      return true;
+    }
+
+    const activatableCustomerType = Object.keys(canActivateCustomerType).find((key) => canActivateCustomerType[key]);
+
+    await this.navigate(processId, activatableCustomerType, route.queryParams);
+
+    return false;
+  }
+
+  async setableCustomerTypes(processId: number, formData: CustomerCreateFormData): Promise<Record<string, boolean>> {
+    const res = await this.checkoutService.getSetableCustomerTypes(processId).toPromise();
+
+    if (res.store) {
+      res['store-p4m'] = true;
+    }
+
+    if (res.webshop) {
+      res['webshop-p4m'] = true;
+    }
+
+    if (formData?._meta) {
+      const customerType = formData._meta.customerType;
+      const hasLocalityCard = formData._meta.hasLocalityCard;
+
+      if (customerType === 'store' && hasLocalityCard) {
+        res.store = false;
+        res['store-p4m'] = false;
+        res.guest = false;
+        res.b2b = false;
+      }
+
+      if (customerType === 'webshop' && hasLocalityCard) {
+        res.webshop = false;
+        res['webshop-p4m'] = false;
+        res.store = false;
+        res['store-p4m'] = false;
+        res.guest = false;
+        res.b2b = false;
+      }
+    }
+
+    return res;
+  }
+
+  getProcessId(snapshot: ActivatedRouteSnapshot): number | undefined {
+    if (snapshot.params['processId']) {
+      return +snapshot.params['processId'];
+    } else if (snapshot.parent) {
+      return this.getProcessId(snapshot.parent);
+    }
+    return undefined;
+  }
+
+  getFormData(snapshot: ActivatedRouteSnapshot): CustomerCreateFormData {
+    const formData = snapshot.queryParams['formData'];
+
+    if (formData) {
+      return decodeFormData(formData);
+    }
+
+    return {};
+  }
+
+  navigate(processId: number, customerType: string, queryParams: Params): Promise<boolean> {
+    const url = `/kunde/${processId}/customer/create/${customerType}`;
+
+    return this.router.navigate([url], {
+      queryParams,
+      queryParamsHandling: 'merge',
+    });
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.html b/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.html
new file mode 100644
index 000000000..768ac275b
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.html
@@ -0,0 +1,15 @@
+<div class="wrapper">
+  <h2>Bitte überprüfen Sie die eingegebenen Adressdaten</h2>
+  <p>Vorschläge:</p>
+
+  <ul class="content">
+    <li *ngFor="let item of ref?.data">
+      <span>{{ item.street }} {{ item.streetNumber }}, {{ item.zipCode }} {{ item.city }}</span>
+      <button (click)="ref.close(item)">Übernehmen</button>
+    </li>
+  </ul>
+
+  <div class="center">
+    <button class="select-btn" (click)="ref.close('continue')">Eingegebene Adresse übernehmen</button>
+  </div>
+</div>
diff --git a/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.scss b/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.scss
new file mode 100644
index 000000000..717f5c2a1
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.scss
@@ -0,0 +1,36 @@
+:host {
+  @apply bg-white;
+}
+
+h2,
+p {
+  @apply text-center text-base;
+}
+
+h2 {
+  @apply font-bold text-2xl;
+}
+
+ul {
+  @apply list-none text-base -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;
+
+    &:last-child {
+      @apply border-b-4;
+    }
+
+    button {
+      @apply border-none outline-none bg-transparent text-brand text-lg text-right font-bold;
+    }
+  }
+}
+
+.center {
+  @apply text-center;
+}
+
+.select-btn {
+  @apply border-none outline-none bg-brand text-white font-bold text-lg px-px-25 py-px-15 rounded-full my-8;
+}
diff --git a/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.ts b/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.ts
new file mode 100644
index 000000000..79e11a241
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.ts
@@ -0,0 +1,13 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { AddressDTO } from '@swagger/crm';
+import { UiModalRef } from '@ui/modal';
+
+@Component({
+  selector: 'page-address-selection-modal',
+  templateUrl: 'address-selection-modal.component.html',
+  styleUrls: ['address-selection-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AddressSelectionModalComponent {
+  constructor(public ref: UiModalRef<AddressDTO[] | string>) {}
+}
diff --git a/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.module.ts b/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.module.ts
new file mode 100644
index 000000000..dd00b5710
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.module.ts
@@ -0,0 +1,12 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { AddressSelectionModalComponent } from './address-selection-modal.component';
+import { UiIconModule } from '@ui/icon';
+
+@NgModule({
+  imports: [CommonModule, UiIconModule],
+  exports: [AddressSelectionModalComponent],
+  declarations: [AddressSelectionModalComponent],
+})
+export class AddressSelectionModalModule {}
diff --git a/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.service.ts b/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.service.ts
new file mode 100644
index 000000000..d6a78218f
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.service.ts
@@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { CrmCustomerService } from '@domain/crm';
+import { AddressDTO } from '@swagger/crm';
+import { UiModalService } from '@ui/modal';
+import { map } from 'rxjs/operators';
+import { AddressSelectionModalComponent } from './address-selection-modal.component';
+
+@Injectable({ providedIn: 'root' })
+export class AddressSelectionModalService {
+  constructor(private customerService: CrmCustomerService, private modal: UiModalService) {}
+
+  async validateAddress(address: AddressDTO): Promise<AddressDTO> {
+    if (address.street && address.streetNumber && address.zipCode && address.city && address.country) {
+      try {
+        let addresses = await this.customerService
+          .validateAddress(address)
+          .pipe(
+            map((response) =>
+              response.result?.map((ad) => ({
+                ...address,
+                ...ad,
+              }))
+            )
+          )
+          .toPromise();
+
+        if (addresses?.length > 0) {
+          const modalResult = await this.modal.open({ content: AddressSelectionModalComponent, data: addresses }).afterClosed$.toPromise();
+          if (modalResult?.data) {
+            return modalResult.data;
+          }
+        }
+      } catch (error) {
+        throw error;
+      }
+    }
+    return undefined;
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/modals/address-selection-modal/index.ts b/apps/page/customer-rd/src/lib/modals/address-selection-modal/index.ts
new file mode 100644
index 000000000..7fe7c0687
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/address-selection-modal/index.ts
@@ -0,0 +1,3 @@
+export * from './address-selection-modal.component';
+export * from './address-selection-modal.module';
+export * from './address-selection-modal.service';
diff --git a/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.html b/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.html
new file mode 100644
index 000000000..37f302087
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.html
@@ -0,0 +1,18 @@
+<div class="wrapper">
+  <h2>Warenkorb kann dem Kunden nicht zugewiesen werden</h2>
+  <p>
+    <!-- Der Kundentyp ist mit der gewählten Kaufoption nicht kombinierbar. -->
+    {{ ref.data.message }}
+  </p>
+
+  <div class="cta-wrapper">
+    <a
+      class="search-btn"
+      [routerLink]="['/kunde', applicationService.activatedProcessId, 'customer', 'search']"
+      [queryParams]="queryParams"
+      (click)="ref.close()"
+      >Zur Kundensuche</a
+    >
+    <button class="create-btn" (click)="upgradeCustomer()">Kundendaten erfassen</button>
+  </div>
+</div>
diff --git a/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss b/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss
new file mode 100644
index 000000000..91f102df5
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss
@@ -0,0 +1,32 @@
+:host {
+  @apply bg-white;
+}
+
+h2 {
+  @apply mt-0;
+}
+
+h2,
+p {
+  @apply text-center text-2xl font-bold;
+}
+
+h2 {
+  @apply font-bold text-2xl;
+}
+
+p {
+  @apply text-dark-goldenrod;
+}
+
+.cta-wrapper {
+  @apply flex flex-row gap-8 my-8 justify-center;
+}
+
+.search-btn {
+  @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-lg px-px-25 py-px-15 rounded-full no-underline;
+}
+
+.create-btn {
+  @apply border-none outline-none bg-brand text-white font-bold text-lg px-px-25 py-px-15 rounded-full no-underline;
+}
diff --git a/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.ts b/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.ts
new file mode 100644
index 000000000..771a7fca4
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.ts
@@ -0,0 +1,64 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Router } from '@angular/router';
+import { ApplicationService } from '@core/application';
+import { UiModalRef } from '@ui/modal';
+import { isBoolean } from '@utils/common';
+import { encodeFormData, mapCustomerDtoToCustomerCreateFormData } from '../../create-customer/customer-create-form-data';
+import { CantAddCustomerToCartData } from './cant-add-customer-to-cart.data';
+
+@Component({
+  selector: 'pages-cant-add-customer-to-cart-modal',
+  templateUrl: 'cant-add-customer-to-cart.component.html',
+  styleUrls: ['cant-add-customer-to-cart.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CantAddCustomerToCartModalComponent {
+  get upgradable(): boolean {
+    return typeof this.option?.value === 'string';
+  }
+
+  get option() {
+    return (
+      this.ref.data.upgradeableTo?.options.values.find((upgradeOption) =>
+        this.ref.data.required.options.values.some((requiredOption) => upgradeOption.key === requiredOption.key)
+      ) || { value: this.queryParams }
+    );
+  }
+
+  get queryParams() {
+    let option = this.ref.data.required?.options.values.find((f) => f.selected);
+    if (!option) {
+      option = this.ref.data.required?.options.values.find((f) => (isBoolean(f.enabled) ? f.enabled : true));
+    }
+    return option ? { customertype: option.value } : {};
+  }
+
+  constructor(
+    public ref: UiModalRef<any, CantAddCustomerToCartData>,
+    public readonly applicationService: ApplicationService,
+    private router: Router
+  ) {}
+
+  upgradeCustomer() {
+    const option = this.option.value;
+    const { attributes, customer } = this.ref.data;
+
+    const queryParams: Record<string, string> = {};
+
+    if (customer) {
+      queryParams['formData'] = encodeFormData(mapCustomerDtoToCustomerCreateFormData(customer));
+    }
+
+    if (option === 'webshop' && attributes.some((a) => a.key === 'p4mUser')) {
+      this.router.navigate(['/kunde', this.applicationService.activatedProcessId, 'customer', 'create', 'webshop-p4m'], {
+        queryParams,
+      });
+    } else {
+      this.router.navigate(['/kunde', this.applicationService.activatedProcessId, 'customer', 'create', option], {
+        queryParams,
+      });
+    }
+
+    this.ref.close();
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.data.ts b/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.data.ts
new file mode 100644
index 000000000..a9dfa52d2
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.data.ts
@@ -0,0 +1,9 @@
+import { AttributeDTO, CustomerDTO, InputDTO } from '@swagger/crm';
+
+export interface CantAddCustomerToCartData {
+  message: string;
+  required: InputDTO;
+  upgradeableTo: InputDTO;
+  customer: CustomerDTO;
+  attributes: AttributeDTO[];
+}
diff --git a/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.module.ts b/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.module.ts
new file mode 100644
index 000000000..ac7f08823
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CantAddCustomerToCartModalComponent } from './cant-add-customer-to-cart.component';
+import { UiIconModule } from '@ui/icon';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [CommonModule, UiIconModule, RouterModule],
+  exports: [CantAddCustomerToCartModalComponent],
+  declarations: [CantAddCustomerToCartModalComponent],
+})
+export class CantAddCustomerToCartModalModule {}
diff --git a/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/index.ts b/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/index.ts
new file mode 100644
index 000000000..e6bc84993
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/index.ts
@@ -0,0 +1,3 @@
+export * from './cant-add-customer-to-cart.component';
+export * from './cant-add-customer-to-cart.data';
+export * from './cant-add-customer-to-cart.module';
diff --git a/apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.html b/apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.html
new file mode 100644
index 000000000..f36772938
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.html
@@ -0,0 +1,23 @@
+<div class="wrapper">
+  <div class="actions">
+    <button class="close-btn" (click)="ref.close()">
+      <ui-icon icon="close" size="21px"></ui-icon>
+    </button>
+  </div>
+
+  <h2>Diese Bestellung kann nicht noch einmal verwendet werden.</h2>
+  <p>Verwenden Sie bitte ein bestehendes Konto oder legen Sie den Kunden neu an.</p>
+
+  <div class="cta-wrapper">
+    <a class="search-btn" [routerLink]="['/kunde', applicationService.activatedProcessId, 'customer', 'search']" (click)="ref.close()"
+      >Zur Kundensuche</a
+    >
+    <a
+      class="create-btn"
+      [routerLink]="['/kunde', applicationService.activatedProcessId, 'customer', 'create', 'guest']"
+      (click)="ref.close()"
+      [queryParams]="createCustomerDataQuery(ref?.data)"
+      >Kundendaten erfassen</a
+    >
+  </div>
+</div>
diff --git a/apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss b/apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss
new file mode 100644
index 000000000..00b5d1711
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss
@@ -0,0 +1,40 @@
+:host {
+  @apply bg-white;
+}
+
+.actions {
+  @apply flex flex-row justify-end;
+}
+
+.close-btn {
+  @apply bg-transparent border-none text-ucla-blue;
+}
+
+h2 {
+  @apply mt-0;
+}
+
+h2,
+p {
+  @apply text-center text-xl font-bold;
+}
+
+h2 {
+  @apply font-bold text-xl;
+}
+
+p {
+  @apply text-dark-goldenrod;
+}
+
+.cta-wrapper {
+  @apply flex flex-row gap-8 my-8 justify-center;
+}
+
+.search-btn {
+  @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-lg px-px-25 py-px-15 rounded-full no-underline;
+}
+
+.create-btn {
+  @apply border-none outline-none bg-brand text-white font-bold text-lg px-px-25 py-px-15 rounded-full no-underline;
+}
diff --git a/apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.ts b/apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.ts
new file mode 100644
index 000000000..de64d9be1
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.ts
@@ -0,0 +1,21 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { ApplicationService } from '@core/application';
+import { CustomerDTO } from '@swagger/crm';
+import { UiModalRef } from '@ui/modal';
+import { encodeFormData, mapCustomerDtoToCustomerCreateFormData } from '../../create-customer';
+
+@Component({
+  selector: 'page-cant-select-guest-modal',
+  templateUrl: 'cant-select-guest-modal.component.html',
+  styleUrls: ['cant-select-guest-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CantSelectGuestModalComponent {
+  constructor(public ref: UiModalRef<any, CustomerDTO>, public readonly applicationService: ApplicationService) {}
+
+  createCustomerDataQuery(customer: CustomerDTO): { [key: string]: string } {
+    const formData = encodeFormData(mapCustomerDtoToCustomerCreateFormData(customer));
+
+    return { formData };
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.module.ts b/apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.module.ts
new file mode 100644
index 000000000..9e0879c6e
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.module.ts
@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { CantSelectGuestModalComponent } from './cant-select-guest-modal.component';
+import { UiIconModule } from '@ui/icon';
+import { RouterModule } from '@angular/router';
+
+@NgModule({
+  imports: [CommonModule, UiIconModule, RouterModule],
+  exports: [CantSelectGuestModalComponent],
+  declarations: [CantSelectGuestModalComponent],
+})
+export class CantSelectGuestModalModule {}
diff --git a/apps/page/customer-rd/src/lib/modals/cant-select-guest/index.ts b/apps/page/customer-rd/src/lib/modals/cant-select-guest/index.ts
new file mode 100644
index 000000000..845fd5959
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/cant-select-guest/index.ts
@@ -0,0 +1,2 @@
+export * from './cant-select-guest-modal.component';
+export * from './cant-select-guest-modal.module';
diff --git a/apps/page/customer-rd/src/lib/modals/customer-modal.module.ts b/apps/page/customer-rd/src/lib/modals/customer-modal.module.ts
new file mode 100644
index 000000000..28bfceb2b
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/customer-modal.module.ts
@@ -0,0 +1,21 @@
+import { NgModule } from '@angular/core';
+import { AddressSelectionModalModule } from './address-selection-modal';
+import { CantAddCustomerToCartModalModule } from './cant-add-customer-to-cart-modal';
+import { CantSelectGuestModalModule } from './cant-select-guest';
+import { WebshopCustomnerAlreadyExistsModalModule } from './webshop-customer-already-exists';
+
+@NgModule({
+  imports: [
+    AddressSelectionModalModule,
+    CantAddCustomerToCartModalModule,
+    CantSelectGuestModalModule,
+    WebshopCustomnerAlreadyExistsModalModule,
+  ],
+  exports: [
+    AddressSelectionModalModule,
+    CantAddCustomerToCartModalModule,
+    CantSelectGuestModalModule,
+    WebshopCustomnerAlreadyExistsModalModule,
+  ],
+})
+export class CustomerModalModuleModule {}
diff --git a/apps/page/customer-rd/src/lib/modals/index.ts b/apps/page/customer-rd/src/lib/modals/index.ts
new file mode 100644
index 000000000..473cf990a
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/index.ts
@@ -0,0 +1,5 @@
+export * from './address-selection-modal';
+export * from './cant-add-customer-to-cart-modal';
+export * from './cant-select-guest';
+export * from './webshop-customer-already-exists';
+export * from './customer-modal.module';
diff --git a/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/index.ts b/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/index.ts
new file mode 100644
index 000000000..11604cf38
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/index.ts
@@ -0,0 +1,3 @@
+export * from './webshop-customer-already-exists-modal.component';
+export * from './webshop-customer-already-exists-modal.data';
+export * from './webshop-customer-already-exists-modal.module';
diff --git a/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html b/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html
new file mode 100644
index 000000000..b98ec463f
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.html
@@ -0,0 +1,32 @@
+<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">
+  <span *ngIf="customer?.organisation?.name">{{ customer?.organisation?.name }}</span>
+  <span>{{ customer?.lastName }} {{ customer?.firstName }}</span>
+  <ng-container *ngIf="customer?.address; let address">
+    <span>{{ address?.street }} {{ address?.streetNumber }}</span>
+    <span *ngIf="address?.info">{{ address?.info }}</span>
+    <span>{{ address?.zipCode }} {{ address?.city }}</span>
+  </ng-container>
+</div>
+
+<div class="grid grid-flow-col gap-4 justify-around mt-12">
+  <button class="border-2 border-solid border-brand rounded-full font-bold text-brand px-6 py-3 text-lg" (click)="close(false)">
+    neues Onlinekonto anlegen
+  </button>
+  <button
+    *ngIf="!isWebshopWithP4M"
+    class="border-2 border-solid border-brand rounded-full font-bold text-white px-6 py-3 text-lg bg-brand"
+    (click)="close(true)"
+  >
+    Daten übernehmen
+  </button>
+  <button
+    *ngIf="isWebshopWithP4M"
+    class="border-2 border-solid border-brand rounded-full font-bold text-white px-6 py-3 text-lg bg-brand"
+    (click)="selectCustomer()"
+  >
+    Datensatz auswählen
+  </button>
+</div>
diff --git a/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.scss b/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.ts b/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.ts
new file mode 100644
index 000000000..84870cc2f
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.component.ts
@@ -0,0 +1,49 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Router } from '@angular/router';
+import { CustomerDTO } from '@swagger/crm';
+import { UiModalRef } from '@ui/modal';
+import { WebshopCustomnerAlreadyExistsModalData } from './webshop-customer-already-exists-modal.data';
+
+@Component({
+  selector: 'page-webshop-customer-already-exists-modal',
+  templateUrl: 'webshop-customer-already-exists-modal.component.html',
+  styleUrls: ['webshop-customer-already-exists-modal.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class WebshopCustomnerAlreadyExistsModalComponent {
+  get customer(): CustomerDTO {
+    return this._dialogRef.data?.customer;
+  }
+
+  get processId(): number {
+    return this._dialogRef.data?.processId;
+  }
+
+  get isWebshopCustomer() {
+    return this.customer?.features?.some((feature) => feature.key === 'webshop') ?? false;
+  }
+
+  get hasP4MCard() {
+    return this.customer?.features?.some((feature) => feature.key === 'p4mUser') ?? false;
+  }
+
+  get isWebshopWithP4M(): boolean {
+    return this.isWebshopCustomer && this.hasP4MCard;
+  }
+
+  constructor(private _dialogRef: UiModalRef<boolean, WebshopCustomnerAlreadyExistsModalData>, private _router: Router) {
+    if (this.isWebshopWithP4M) {
+      this._dialogRef.title = 'Es ist bereits eine Kundenkarte bei diesem Onlinekonto hinterlegt:';
+      this._dialogRef.markChanged();
+    }
+  }
+
+  close(val: boolean) {
+    this._dialogRef.close(val);
+  }
+
+  async selectCustomer() {
+    await this._router.navigate(['/kunde', this.processId, 'customer', this.customer.id]);
+    this.close(false);
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.data.ts b/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.data.ts
new file mode 100644
index 000000000..1a7a6e115
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.data.ts
@@ -0,0 +1,6 @@
+import { CustomerDTO } from '@swagger/crm';
+
+export type WebshopCustomnerAlreadyExistsModalData = {
+  customer: CustomerDTO;
+  processId: number;
+};
diff --git a/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.module.ts b/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.module.ts
new file mode 100644
index 000000000..ac9696223
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/modals/webshop-customer-already-exists/webshop-customer-already-exists-modal.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { WebshopCustomnerAlreadyExistsModalComponent } from './webshop-customer-already-exists-modal.component';
+
+@NgModule({
+  imports: [CommonModule],
+  exports: [WebshopCustomnerAlreadyExistsModalComponent],
+  declarations: [WebshopCustomnerAlreadyExistsModalComponent],
+})
+export class WebshopCustomnerAlreadyExistsModalModule {}
diff --git a/apps/page/customer-rd/src/lib/navigations/customer-create.navigation.ts b/apps/page/customer-rd/src/lib/navigations/customer-create.navigation.ts
new file mode 100644
index 000000000..ac93e5424
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/navigations/customer-create.navigation.ts
@@ -0,0 +1,30 @@
+import { NumberInput, coerceNumberProperty } from '@angular/cdk/coercion';
+import { Injectable } from '@angular/core';
+import { Params, Router, UrlTree } from '@angular/router';
+
+export interface NavigationRoute {
+  path: any[];
+  queryParams?: Params;
+  urlTree: UrlTree;
+}
+
+@Injectable({ providedIn: 'root' })
+export class CustomerCreateNavigation {
+  constructor(private _router: Router) {}
+
+  defaultRoute(params: { processId: NumberInput }): NavigationRoute {
+    const path = ['/kunde', coerceNumberProperty(params.processId), 'customer', 'create'];
+
+    const urlTree = this._router.createUrlTree(path, { queryParams: {} });
+
+    return {
+      path,
+      urlTree,
+    };
+  }
+
+  navigateToDefault(params: { processId: NumberInput }): Promise<boolean> {
+    const route = this.defaultRoute(params);
+    return this._router.navigate(route.path, { queryParams: route.queryParams });
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/navigations/customer-search.navigation.ts b/apps/page/customer-rd/src/lib/navigations/customer-search.navigation.ts
new file mode 100644
index 000000000..9e323aecb
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/navigations/customer-search.navigation.ts
@@ -0,0 +1,79 @@
+import { NumberInput, coerceNumberProperty } from '@angular/cdk/coercion';
+import { Injectable } from '@angular/core';
+import { NavigationExtras, Params, Router, UrlTree } from '@angular/router';
+
+export interface NavigationRoute {
+  path: any[];
+  queryParams?: Params;
+  urlTree: UrlTree;
+}
+
+@Injectable({ providedIn: 'root' })
+export class CustomerSearchNavigation {
+  constructor(private _router: Router) {}
+
+  defaultRoute(params: { processId: NumberInput }): NavigationRoute {
+    const path = ['/kunde', coerceNumberProperty(params.processId), 'customer'];
+
+    const urlTree = this._router.createUrlTree(path, { queryParams: {} });
+
+    return {
+      path,
+      urlTree,
+    };
+  }
+
+  navigateToDefault(params: { processId: NumberInput }): Promise<boolean> {
+    const route = this.defaultRoute(params);
+    return this._router.navigate(route.path, { queryParams: route.queryParams });
+  }
+
+  detailsRoute(params: { processId: NumberInput; customerId: NumberInput }): NavigationRoute {
+    const path = ['/kunde', coerceNumberProperty(params.processId), 'customer', coerceNumberProperty(params.customerId)];
+
+    const urlTree = this._router.createUrlTree(path, { queryParams: {} });
+
+    return {
+      path,
+      urlTree,
+    };
+  }
+
+  navigateToDetails(params: { processId: NumberInput; customerId: NumberInput }): Promise<boolean> {
+    const route = this.detailsRoute(params);
+    return this._router.navigate(route.path, { queryParams: route.queryParams });
+  }
+
+  historyRoute(params: { processId: NumberInput; customerId: NumberInput }): NavigationRoute {
+    const path = ['/kunde', coerceNumberProperty(params.processId), 'customer', coerceNumberProperty(params.customerId), 'history'];
+
+    const urlTree = this._router.createUrlTree(path, { queryParams: {} });
+
+    return {
+      path,
+      urlTree,
+    };
+  }
+
+  navigateToHistory(params: { processId: NumberInput; customerId: NumberInput }): Promise<boolean> {
+    const route = this.historyRoute(params);
+    return this._router.navigate(route.path, { queryParams: route.queryParams });
+  }
+
+  filterRoute(params: { processId: NumberInput; comingFrom?: string }): NavigationRoute {
+    const path = ['/kunde', coerceNumberProperty(params.processId), 'customer', 'filter'];
+
+    const urlTree = this._router.createUrlTree(path, { queryParams: { comingFrom: params.comingFrom } });
+
+    return {
+      path,
+      queryParams: urlTree.queryParams,
+      urlTree,
+    };
+  }
+
+  navigateToFilter(params: { processId: NumberInput; comingFrom: string }): Promise<boolean> {
+    const route = this.filterRoute(params);
+    return this._router.navigate(route.path, { queryParams: route.queryParams });
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/navigations/index.ts b/apps/page/customer-rd/src/lib/navigations/index.ts
new file mode 100644
index 000000000..e882f74a0
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/navigations/index.ts
@@ -0,0 +1 @@
+export * from './customer-search.navigation';
diff --git a/apps/page/customer-rd/src/lib/routes.ts b/apps/page/customer-rd/src/lib/routes.ts
new file mode 100644
index 000000000..985c1dc1b
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/routes.ts
@@ -0,0 +1,54 @@
+import { Routes } from '@angular/router';
+import { CustomerComponent } from './customer-page.component';
+import { CustomerSearchComponent } from './customer-search/customer-search.component';
+import { CustomerResultsMainViewComponent } from './customer-search/results-main-view/results-main-view.component';
+import { CustomerDetailsViewMainComponent } from './customer-search/details-main-view/details-main-view.component';
+import { CustomerHistoryMainViewComponent } from './customer-search/history-main-view/history-main-view.component';
+import { CustomerFilterMainViewComponent } from './customer-search/filter-main-view/filter-main-view.component';
+import { CustomerCreateGuard } from './guards/customer-create.guard';
+import {
+  CreateB2BCustomerComponent,
+  CreateGuestCustomerComponent,
+  CreateP4MCustomerComponent,
+  CreateStoreCustomerComponent,
+  CreateWebshopCustomerComponent,
+} from './create-customer';
+import { UpdateP4MWebshopCustomerComponent } from './create-customer/update-p4m-webshop-customer';
+import { CreateCustomerComponent } from './create-customer/create-customer.component';
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: CustomerComponent,
+    children: [
+      {
+        path: 'create',
+        component: CreateCustomerComponent,
+        canActivate: [CustomerCreateGuard],
+        canActivateChild: [CustomerCreateGuard],
+        children: [
+          { path: 'store', component: CreateStoreCustomerComponent },
+          { path: 'webshop', component: CreateWebshopCustomerComponent },
+          { path: 'b2b', component: CreateB2BCustomerComponent },
+          { path: 'guest', component: CreateGuestCustomerComponent },
+          { path: 'webshop-p4m', component: CreateP4MCustomerComponent, data: { customerType: 'webshop' } },
+          { path: 'store-p4m', component: CreateP4MCustomerComponent, data: { customerType: 'store' } },
+          { path: 'webshop-p4m/update', component: UpdateP4MWebshopCustomerComponent, data: { customerType: 'webshop' } },
+        ],
+      },
+      {
+        path: '',
+        component: CustomerSearchComponent,
+        children: [
+          { path: '', component: CustomerFilterMainViewComponent, data: { side: 'main', breadcumb: 'main' } },
+          { path: 'list', component: CustomerResultsMainViewComponent, data: { breadcumb: 'main' } },
+          { path: 'filter', component: CustomerFilterMainViewComponent, data: { side: 'results', breadcumb: 'main' } },
+          { path: ':customerId', component: CustomerDetailsViewMainComponent, data: { side: 'results', breadcumb: 'details' } },
+          { path: ':customerId/history', component: CustomerHistoryMainViewComponent, data: { side: 'results', breadcumb: 'history' } },
+          // { path: ':customerId/edit', component: CustomerSearchComponent, data: { side: 'results' } },
+          // { path: ':customerId/orders', component: CustomerSearchComponent, data: { side: 'orderItems' } },
+        ],
+      },
+    ],
+  },
+];
diff --git a/apps/page/customer-rd/src/lib/validators/email-validator.ts b/apps/page/customer-rd/src/lib/validators/email-validator.ts
new file mode 100644
index 000000000..4377c2ed1
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/validators/email-validator.ts
@@ -0,0 +1,6 @@
+import { AbstractControl, ValidationErrors } from '@angular/forms';
+
+const EMAIL_REGEXP = /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+$/;
+export function validateEmail(c: AbstractControl): ValidationErrors | null {
+  return c.value == null || c.value === '' || EMAIL_REGEXP.test(c.value) ? null : { invalid: 'E-Mail ist ungültig' };
+}
diff --git a/apps/page/customer-rd/src/lib/validators/gender-b2b-validator.ts b/apps/page/customer-rd/src/lib/validators/gender-b2b-validator.ts
new file mode 100644
index 000000000..5e9c161f2
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/validators/gender-b2b-validator.ts
@@ -0,0 +1,19 @@
+import { UntypedFormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+
+export function genderLastNameValidator(isB2b: boolean): ValidatorFn | null {
+  if (isB2b) {
+    return (control: UntypedFormGroup): ValidationErrors | null => {
+      const gender = control.get('gender').value;
+      const lastName = control.get('lastName').value;
+      if (!!lastName && gender === 0) {
+        control.get('gender').setValidators([Validators.required, Validators.min(1)]);
+        return { genderNotSet: true };
+      } else {
+        control.get('gender').setValidators(null);
+        return null;
+      }
+    };
+  } else {
+    return null;
+  }
+}
diff --git a/apps/page/customer-rd/src/lib/validators/organisation-delivery-b2b-validator.ts b/apps/page/customer-rd/src/lib/validators/organisation-delivery-b2b-validator.ts
new file mode 100644
index 000000000..98b8f15f1
--- /dev/null
+++ b/apps/page/customer-rd/src/lib/validators/organisation-delivery-b2b-validator.ts
@@ -0,0 +1,82 @@
+import { AbstractControl, UntypedFormGroup, ValidationErrors, ValidatorFn, Validators } from '@angular/forms';
+
+export function organisationB2bDeliveryValidator(): ValidatorFn | null {
+  return (control: UntypedFormGroup): ValidationErrors | null => {
+    let gender: AbstractControl;
+    let firstName: AbstractControl;
+    let lastName: AbstractControl;
+    let organisation: AbstractControl;
+    let isOrganisationSet: boolean;
+    let isNameSet: boolean;
+
+    // For Customer Create Form with Different Shipping Address
+    if (control.get('differentShippingAddress') !== null) {
+      gender = control.get('shippingAddress').get('gender');
+      firstName = control.get('shippingAddress').get('firstName');
+      lastName = control.get('shippingAddress').get('lastName');
+      organisation = control.get('shippingAddress').get('organisation').get('name');
+      isOrganisationSet = !!organisation.value;
+      isNameSet = gender.value !== 0 && !!firstName.value && !!lastName.value;
+
+      if (control.get('differentShippingAddress').value === true) {
+        return validate(gender, firstName, lastName, organisation, isOrganisationSet, isNameSet);
+      }
+    } else {
+      // Customer Shipping Create or Shipping Edit Forms
+      gender = control.get('gender');
+      firstName = control.get('firstName');
+      lastName = control.get('lastName');
+      organisation = control.get('organisation').get('name');
+      isOrganisationSet = !!organisation.value;
+      isNameSet = gender.value !== 0 && !!firstName.value && !!lastName.value;
+      return validate(gender, firstName, lastName, organisation, isOrganisationSet, isNameSet);
+    }
+  };
+}
+
+function setNameValidation(gender: AbstractControl, firstName: AbstractControl, lastName: AbstractControl) {
+  gender.setValidators([Validators.required, Validators.min(1)]);
+  firstName.setValidators([Validators.required]);
+  lastName.setValidators([Validators.required]);
+}
+
+function resetNameValidation(gender: AbstractControl, firstName: AbstractControl, lastName: AbstractControl) {
+  gender.setValidators(null);
+  firstName.setValidators(null);
+  lastName.setValidators(null);
+  gender.setErrors(null);
+  firstName.setErrors(null);
+  lastName.setErrors(null);
+}
+
+function setOrganisationValidation(organisation: AbstractControl) {
+  organisation.setValidators([Validators.required]);
+}
+
+function resetOrganisationValidation(organisation: AbstractControl) {
+  organisation.setValidators(null);
+  organisation.setErrors(null);
+}
+
+function validate(
+  gender: AbstractControl,
+  firstName: AbstractControl,
+  lastName: AbstractControl,
+  organisation: AbstractControl,
+  isOrganisationSet: boolean,
+  isNameSet: boolean
+): ValidationErrors | null {
+  if (!isOrganisationSet && !isNameSet) {
+    setNameValidation(gender, firstName, lastName);
+    setOrganisationValidation(organisation);
+    return { namesNotSet: true };
+  } else if (!isOrganisationSet && isNameSet) {
+    resetOrganisationValidation(organisation);
+    return null;
+  } else if (isOrganisationSet && !isNameSet) {
+    resetNameValidation(gender, firstName, lastName);
+    return null;
+  } else if (isOrganisationSet && isNameSet) {
+    return null;
+  }
+}
diff --git a/apps/page/customer-rd/src/public-api.ts b/apps/page/customer-rd/src/public-api.ts
new file mode 100644
index 000000000..713192e63
--- /dev/null
+++ b/apps/page/customer-rd/src/public-api.ts
@@ -0,0 +1,2 @@
+export * from './lib/customer-page.module';
+export * from './lib/customer-page.component';
diff --git a/apps/page/customer/src/lib/customer-details/customer-details.component.html b/apps/page/customer/src/lib/customer-details/customer-details.component.html
index 66d88eb49..89f0a2882 100644
--- a/apps/page/customer/src/lib/customer-details/customer-details.component.html
+++ b/apps/page/customer/src/lib/customer-details/customer-details.component.html
@@ -21,7 +21,7 @@
     <p class="info">Sind Ihre {{ (customerType$ | async) === 'b2b' ? 'Firmendaten' : 'Kundendaten' }} korrekt?</p>
     <div class="tags">
       <div class="tag" *ngFor="let feature of displayCustomerType$ | async">
-        <ui-svg-icon [icon]="feature.key"></ui-svg-icon>
+        <shared-icon [icon]="feature.key"></shared-icon>
         {{ feature.description }}
       </div>
     </div>
diff --git a/apps/page/customer/src/lib/customer-details/customer-details.module.ts b/apps/page/customer/src/lib/customer-details/customer-details.module.ts
index 22517f8bd..c98c32806 100644
--- a/apps/page/customer/src/lib/customer-details/customer-details.module.ts
+++ b/apps/page/customer/src/lib/customer-details/customer-details.module.ts
@@ -33,6 +33,7 @@ import { CantSelectGuestModalModule } from '../modals/cant-select-guest/cant-sel
 import { UiScrollContainerModule } from '@ui/scroll-container';
 import { UiTooltipModule } from '@ui/tooltip';
 import { UiSpinnerModule } from '@ui/spinner';
+import { IconComponent } from '@shared/components/icon';
 @NgModule({
   imports: [
     CommonModule,
@@ -51,6 +52,7 @@ import { UiSpinnerModule } from '@ui/spinner';
     UiSpinnerModule,
     HistoryModule,
     CantSelectGuestModalModule,
+    IconComponent,
   ],
   exports: [CustomerDetailsComponent],
   declarations: [
diff --git a/apps/page/customer/src/lib/customer-search/customer-search.module.ts b/apps/page/customer/src/lib/customer-search/customer-search.module.ts
index 05553c68d..c6418c718 100644
--- a/apps/page/customer/src/lib/customer-search/customer-search.module.ts
+++ b/apps/page/customer/src/lib/customer-search/customer-search.module.ts
@@ -14,6 +14,7 @@ import { UiFilterNextModule } from '@ui/filter';
 import { SharedFilterOverlayModule } from '@shared/components/filter-overlay';
 import { UiScrollContainerModule } from '@ui/scroll-container';
 import { UiSpinnerModule } from '@ui/spinner';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
   imports: [
@@ -27,6 +28,7 @@ import { UiSpinnerModule } from '@ui/spinner';
     UiFilterNextModule,
     UiScrollContainerModule,
     UiSpinnerModule,
+    IconComponent,
   ],
   exports: [CustomerSearchComponent, CustomerSearchMainComponent, CustomerSearchResultComponent],
   declarations: [
diff --git a/apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.html b/apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.html
index d9b4149bc..6148ec84f 100644
--- a/apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.html
+++ b/apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.html
@@ -32,7 +32,7 @@
   <ng-container>
     <ng-container *ngFor="let feature of customer?.features">
       <div class="feature" *ngIf="feature.group === 'd-customertype'">
-        <ui-svg-icon [icon]="feature.key"></ui-svg-icon>
+        <shared-icon [icon]="feature.key"></shared-icon>
         <span>{{ feature.description }}</span>
       </div>
     </ng-container>
diff --git a/apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.html b/apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.html
index 282dac21a..5106988e9 100644
--- a/apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.html
+++ b/apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.html
@@ -2,5 +2,5 @@
   <input uiInput type="text" [formControl]="control" [tabindex]="tabIndexStart" [readonly]="readonly" [autofocus]="focusAfterInit" />
 </ui-form-control>
 <button type="button" *ngIf="!readonly && canScan()" (click)="scan()">
-  <ui-svg-icon icon="barcode-scan" [size]="32"></ui-svg-icon>
+  <shared-icon icon="barcode-scan" [size]="32"></shared-icon>
 </button>
diff --git a/apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.scss b/apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.scss
index 7a4d9e731..d612e8aee 100644
--- a/apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.scss
+++ b/apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.scss
@@ -5,7 +5,7 @@
 button {
   @apply absolute -right-2 top-0 h-14 w-14 border-none outline-none bg-transparent items-center justify-center rounded-full bg-brand;
 
-  ui-svg-icon {
+  shared-icon {
     @apply flex justify-center items-center text-white;
   }
 }
diff --git a/apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.module.ts b/apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.module.ts
index c45c3ce1f..f3b93fa90 100644
--- a/apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.module.ts
+++ b/apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.module.ts
@@ -6,10 +6,10 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { UiFormControlModule } from '@ui/form-control';
 import { UiInputModule } from '@ui/input';
 import { UiCommonModule } from '@ui/common';
-import { UiIconModule } from '@ui/icon';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule, UiIconModule],
+  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule, IconComponent],
   exports: [P4mNumberFormBlockComponent],
   declarations: [P4mNumberFormBlockComponent],
 })
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 6feef5999..6b70d11d2 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
@@ -5,7 +5,7 @@
     type="button"
     (click)="openFilter()"
   >
-    <ui-svg-icon icon="filter-variant"></ui-svg-icon>
+    <shared-icon icon="filter-variant"></shared-icon>
     Filter
   </button>
 </div>
@@ -22,7 +22,7 @@
 <shell-filter-overlay #filterOverlay class="relative">
   <div class="relative">
     <button type="button" class="absolute top-4 right-4 text-cadet" (click)="closeFilterOverlay()">
-      <ui-svg-icon [icon]="'close'" [size]="28"></ui-svg-icon>
+      <shared-icon [icon]="'close'" [size]="28"></shared-icon>
     </button>
   </div>
 
diff --git a/apps/page/package-inspection/src/lib/package-result/package-result.module.ts b/apps/page/package-inspection/src/lib/package-result/package-result.module.ts
index da7cdf2e4..4c61dbf2a 100644
--- a/apps/page/package-inspection/src/lib/package-result/package-result.module.ts
+++ b/apps/page/package-inspection/src/lib/package-result/package-result.module.ts
@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { PackageResultComponent } from './package-result.component';
-import { UiIconModule } from '@ui/icon';
 import { SharedFilterOverlayModule } from '@shared/components/filter-overlay';
 import { UiFilterNextModule } from '@ui/filter';
 import { UiSpinnerModule } from '@ui/spinner';
 import { PackageListModule } from '@shared/components/package-inspection/package-list';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, PackageListModule, UiIconModule, UiFilterNextModule, SharedFilterOverlayModule, UiSpinnerModule],
+  imports: [CommonModule, PackageListModule, IconComponent, UiFilterNextModule, SharedFilterOverlayModule, UiSpinnerModule],
   exports: [PackageResultComponent],
   declarations: [PackageResultComponent],
 })
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 951cd73b8..536073e31 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
@@ -1,6 +1,6 @@
 <div class="shared-branch-selector-input-container" (click)="branchInput.focus(); openComplete()">
   <button (click)="onClose($event)" type="button" class="shared-branch-selector-input-icon p-2">
-    <ui-svg-icon class="text-[#AEB7C1]" icon="magnify" [size]="32"></ui-svg-icon>
+    <shared-icon class="text-[#AEB7C1]" icon="magnify" [size]="32"></shared-icon>
   </button>
   <input
     #branchInput
@@ -14,7 +14,7 @@
     (keyup)="onKeyup($event)"
   />
   <button class="shared-branch-selector-clear-input-icon" *ngIf="(query$ | async)?.length > 0" type="button" (click)="clear()">
-    <ui-svg-icon class="text-[#1F466C]" icon="close" [size]="32"></ui-svg-icon>
+    <shared-icon class="text-[#1F466C]" icon="close" [size]="32"></shared-icon>
   </button>
 </div>
 <ui-autocomplete class="shared-branch-selector-autocomplete z-modal w-full">
diff --git a/apps/shared/components/branch-selector/src/lib/branch-selector.component.spec.ts b/apps/shared/components/branch-selector/src/lib/branch-selector.component.spec.ts
index b25b29ecd..04056c6d6 100644
--- a/apps/shared/components/branch-selector/src/lib/branch-selector.component.spec.ts
+++ b/apps/shared/components/branch-selector/src/lib/branch-selector.component.spec.ts
@@ -6,10 +6,11 @@ import { DomainAvailabilityService } from '@domain/availability';
 import { createComponentFactory, Spectator } from '@ngneat/spectator';
 import { UiAutocompleteModule } from '@ui/autocomplete';
 import { UiCommonModule } from '@ui/common';
-import { IconRegistry, UiIconModule } from '@ui/icon';
+import { UiIconModule } from '@ui/icon';
 import { UiModalService } from '@ui/modal';
 import { BranchSelectorComponent } from './branch-selector.component';
 import { BranchSelectorStore } from './branch-selector.store';
+import { EmptyIconLoader, IconLoader, provideIcon } from '@shared/components/icon';
 
 describe('BranchSelectorComponent', () => {
   let spectator: Spectator<BranchSelectorComponent>;
@@ -18,7 +19,8 @@ describe('BranchSelectorComponent', () => {
   const createComponent = createComponentFactory({
     component: BranchSelectorComponent,
     imports: [UiCommonModule, CommonModule, FormsModule, UiIconModule, UiAutocompleteModule],
-    mocks: [IconRegistry, DomainAvailabilityService, UiModalService, HttpClient, AuthService],
+    mocks: [DomainAvailabilityService, UiModalService, HttpClient, AuthService],
+    providers: [provideIcon({ provide: IconLoader, useClass: EmptyIconLoader })],
   });
 
   beforeEach(() => {
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 17c52be16..5cd396fe5 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
@@ -18,12 +18,12 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
 import { BranchDTO, BranchType } from '@swagger/checkout';
 import { UiAutocompleteComponent, UiAutocompleteModule } from '@ui/autocomplete';
 import { UiCommonModule } from '@ui/common';
-import { UiIconModule } from '@ui/icon';
 import { isNaN } from 'lodash';
 import { asapScheduler, Subject } from 'rxjs';
 import { takeUntil, withLatestFrom } from 'rxjs/operators';
 import { BranchSelectorStore } from './branch-selector.store';
 import { AuthService } from '@core/auth';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'shared-branch-selector',
@@ -39,7 +39,7 @@ import { AuthService } from '@core/auth';
       multi: true,
     },
   ],
-  imports: [CommonModule, FormsModule, UiIconModule, UiAutocompleteModule, UiCommonModule],
+  imports: [CommonModule, FormsModule, IconComponent, UiAutocompleteModule, UiCommonModule],
   standalone: true,
   exportAs: 'sharedBranchSelector',
 })
diff --git a/apps/shared/components/breadcrumb/src/lib/breadcrumb.component.html b/apps/shared/components/breadcrumb/src/lib/breadcrumb.component.html
index 03bc8d0fd..d275e761a 100644
--- a/apps/shared/components/breadcrumb/src/lib/breadcrumb.component.html
+++ b/apps/shared/components/breadcrumb/src/lib/breadcrumb.component.html
@@ -6,7 +6,7 @@
     [routerLink]="crumb.path"
     [queryParams]="crumb.params"
   >
-    <ui-svg-icon icon="arrow-left" [size]="18"></ui-svg-icon> Zurück
+    <shared-icon icon="arrow-left" [size]="18"></shared-icon> Zurück
   </button>
 </div>
 <div class="shared-breadcrumb__crumbs">
@@ -17,7 +17,7 @@
       </span>
     </a>
     <div class="shared-breadcrumb__chevron" *ngIf="!last">
-      <ui-svg-icon icon="chevron-right"></ui-svg-icon>
+      <shared-icon icon="chevron-right"></shared-icon>
     </div>
   </ng-container>
 </div>
diff --git a/apps/shared/components/breadcrumb/src/lib/breadcrumb.component.spec.ts b/apps/shared/components/breadcrumb/src/lib/breadcrumb.component.spec.ts
index ab8eae7d3..0111b3551 100644
--- a/apps/shared/components/breadcrumb/src/lib/breadcrumb.component.spec.ts
+++ b/apps/shared/components/breadcrumb/src/lib/breadcrumb.component.spec.ts
@@ -8,14 +8,17 @@ import { first } from 'rxjs/operators';
 
 import { BreadcrumbComponent } from './breadcrumb.component';
 import { DEFAULT_BREADCRUMB_COMPONENT_STATE } from './breadcrumb.component-state';
+import { EmptyIconLoader, IconComponent, IconLoader, provideIcon } from '@shared/components/icon';
 
 describe('BreadcrumbComponent', () => {
   let spectator: Spectator<BreadcrumbComponent>;
   const createComponent = createComponentFactory({
-    imports: [RouterTestingModule],
+    imports: [RouterTestingModule, IconComponent],
     component: BreadcrumbComponent,
-    providers: [MockProvider(BreadcrumbService, { getBreadcrumbsByKeyAndTags$: () => of([]) })],
-    declarations: [MockComponent(UISvgIconComponent)],
+    providers: [
+      MockProvider(BreadcrumbService, { getBreadcrumbsByKeyAndTags$: () => of([]) }),
+      provideIcon({ provide: IconLoader, useClass: EmptyIconLoader }),
+    ],
   });
 
   beforeEach(async () => {
@@ -205,7 +208,7 @@ describe('BreadcrumbComponent', () => {
 
         spectator.detectChanges();
 
-        const icon = spectator.query(UISvgIconComponent);
+        const icon = spectator.query(IconComponent);
         expect(icon.icon).toBe('arrow-left');
         expect(icon.size).toBe(18);
       });
@@ -266,7 +269,7 @@ describe('BreadcrumbComponent', () => {
         const chevrons = spectator.queryAll('.shared-breadcrumb__chevron');
         expect(chevrons.length).toEqual(2);
 
-        const icons = spectator.queryAll(UISvgIconComponent);
+        const icons = spectator.queryAll(IconComponent);
         expect(icons.length).toEqual(3);
         expect(icons[0].icon).not.toBe('chevron-right');
         expect(icons[1].icon).toBe('chevron-right');
diff --git a/apps/shared/components/breadcrumb/src/lib/breadcrumb.module.ts b/apps/shared/components/breadcrumb/src/lib/breadcrumb.module.ts
index 42bacc740..c4c86c722 100644
--- a/apps/shared/components/breadcrumb/src/lib/breadcrumb.module.ts
+++ b/apps/shared/components/breadcrumb/src/lib/breadcrumb.module.ts
@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { UiIconModule } from '@ui/icon';
 import { BreadcrumbComponent } from './breadcrumb.component';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
   declarations: [BreadcrumbComponent],
-  imports: [CommonModule, RouterModule, UiIconModule],
+  imports: [CommonModule, RouterModule, IconComponent],
   exports: [BreadcrumbComponent],
 })
 export class BreadcrumbModule {}
diff --git a/apps/shared/components/checkbox/ng-package.json b/apps/shared/components/checkbox/ng-package.json
new file mode 100644
index 000000000..5b6ba62cc
--- /dev/null
+++ b/apps/shared/components/checkbox/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/components/checkbox/src/lib/checkbox-group.component.html b/apps/shared/components/checkbox/src/lib/checkbox-group.component.html
new file mode 100644
index 000000000..6dbc74306
--- /dev/null
+++ b/apps/shared/components/checkbox/src/lib/checkbox-group.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/apps/shared/components/checkbox/src/lib/checkbox-group.component.scss b/apps/shared/components/checkbox/src/lib/checkbox-group.component.scss
new file mode 100644
index 000000000..e00e19d3b
--- /dev/null
+++ b/apps/shared/components/checkbox/src/lib/checkbox-group.component.scss
@@ -0,0 +1,3 @@
+:host {
+  @apply flex flex-row justify-center gap-6;
+}
diff --git a/apps/shared/components/checkbox/src/lib/checkbox-group.component.ts b/apps/shared/components/checkbox/src/lib/checkbox-group.component.ts
new file mode 100644
index 000000000..121b6c933
--- /dev/null
+++ b/apps/shared/components/checkbox/src/lib/checkbox-group.component.ts
@@ -0,0 +1,110 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  forwardRef,
+  Input,
+  QueryList,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CheckboxComponent } from './checkbox.component';
+
+@Component({
+  selector: 'shared-checkbox-group',
+  templateUrl: 'checkbox-group.component.html',
+  styleUrls: ['checkbox-group.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxGroupComponent),
+      multi: true,
+    },
+  ],
+  standalone: true,
+})
+export class CheckboxGroupComponent implements AfterContentInit, ControlValueAccessor {
+  @Input() max: number = undefined; // undefined = infinite active checkboxes possible
+
+  values: any[] = [];
+  disabled: boolean;
+
+  @ContentChildren(CheckboxComponent, { read: CheckboxComponent, descendants: true })
+  checkboxes: QueryList<CheckboxComponent>;
+
+  private onChange = (v: any) => {};
+  private onTouched = () => {};
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  writeValue(obj: any): void {
+    this.values = Array.isArray(obj) ? [...obj] : [];
+    this.updateValuesOfChildren();
+    this.cdr.markForCheck();
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    this.setDisabledStateOfChildren(isDisabled);
+  }
+
+  ngAfterContentInit(): void {
+    this.registerOnCheckboxChange();
+    this.updateValuesOfChildren();
+    this.setDisabledStateOfChildren(this.disabled);
+    this.checkboxes.changes.subscribe(() => {
+      this.registerOnCheckboxChange();
+      this.updateValuesOfChildren();
+      this.setDisabledStateOfChildren(this.disabled);
+    });
+  }
+
+  setDisabledStateOfChildren(isDisabled: boolean) {
+    this.checkboxes?.forEach((checkbox) => {
+      checkbox.setDisabledState(isDisabled);
+    });
+  }
+
+  updateValuesOfChildren() {
+    this.checkboxes?.forEach((checkbox) => {
+      checkbox.selectValue(
+        this.values?.find((value) => value === checkbox.value),
+        false
+      );
+    });
+  }
+
+  registerOnCheckboxChange() {
+    this.checkboxes.forEach((cb) => cb.registerOnChangeForParent((c, v) => this.checkboxChanged(c, v)));
+  }
+
+  checkboxChanged(checked: boolean, value: any) {
+    if (checked) {
+      this.values.push(value);
+    } else {
+      this.values = this.values.filter((v) => v !== value);
+    }
+
+    this.validateCheckboxes();
+    this.updateValuesOfChildren();
+
+    this.onChange(this.values);
+    this.onTouched();
+  }
+
+  validateCheckboxes(): void {
+    if (this.max === undefined) {
+      return;
+    }
+    while (this.values.length > this.max) {
+      this.values = this.values.filter((v, i) => i !== 0);
+    }
+  }
+}
diff --git a/apps/shared/components/checkbox/src/lib/checkbox.component.html b/apps/shared/components/checkbox/src/lib/checkbox.component.html
new file mode 100644
index 000000000..beadf4357
--- /dev/null
+++ b/apps/shared/components/checkbox/src/lib/checkbox.component.html
@@ -0,0 +1,5 @@
+<div class="shared-checkbox-checkbox" [class.checked]="checked">
+  <shared-icon class="shared-checkbox-checkmark" icon="done" *ngIf="checked"></shared-icon>
+</div>
+
+<ng-content></ng-content>
diff --git a/apps/shared/components/checkbox/src/lib/checkbox.component.scss b/apps/shared/components/checkbox/src/lib/checkbox.component.scss
new file mode 100644
index 000000000..fe2286205
--- /dev/null
+++ b/apps/shared/components/checkbox/src/lib/checkbox.component.scss
@@ -0,0 +1,28 @@
+.shared-checkbox {
+  @apply inline-grid box-border items-center gap-[0.6875rem] cursor-pointer whitespace-nowrap;
+  grid-template-columns: auto 1fr;
+
+  &.checked ::ng-deep {
+    @apply font-bold;
+  }
+
+  &.disabled {
+    @apply cursor-not-allowed;
+  }
+
+  &.readonly {
+    @apply cursor-not-allowed;
+  }
+}
+
+.shared-checkbox-checkbox {
+  @apply border-2 border-solid border-[#AEB7C1] w-[1.375rem] h-[1.375rem] rounded-sm flex items-center justify-center;
+}
+
+.shared-checkbox-checkbox.checked {
+  @apply border-[#596470] bg-[#596470];
+}
+
+.shared-checkbox-checkmark {
+  @apply text-white;
+}
diff --git a/apps/shared/components/checkbox/src/lib/checkbox.component.ts b/apps/shared/components/checkbox/src/lib/checkbox.component.ts
new file mode 100644
index 000000000..a3df0acf4
--- /dev/null
+++ b/apps/shared/components/checkbox/src/lib/checkbox.component.ts
@@ -0,0 +1,110 @@
+import { NgIf } from '@angular/common';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  forwardRef,
+  HostBinding,
+  HostListener,
+  Input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { IconComponent } from '@shared/components/icon';
+
+@Component({
+  selector: 'shared-checkbox',
+  templateUrl: 'checkbox.component.html',
+  styleUrls: ['checkbox.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxComponent),
+      multi: true,
+    },
+  ],
+  standalone: true,
+  imports: [NgIf, IconComponent],
+  encapsulation: ViewEncapsulation.None,
+  host: {
+    class: 'shared-checkbox',
+  },
+})
+export class CheckboxComponent implements ControlValueAccessor {
+  private selected: any;
+  @Input() value: any = true;
+  @Input() showCheckbox = true;
+
+  @HostBinding('class.disabled') @Input() disabled: boolean;
+
+  @HostBinding('class.checked') get checked(): boolean {
+    return this.selected == this.value;
+  }
+
+  @Input()
+  @HostBinding('class.readonly')
+  readonly = false;
+
+  @Input()
+  name: string;
+
+  private onChange = (v: any) => {};
+  private onChangeForParent = (checked: boolean, value: any) => {};
+  private onTouched = () => {};
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  writeValue(obj: any): void {
+    this.selectValue(obj, false);
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
+
+  registerOnChangeForParent(fn: (checked: boolean, value: any) => void) {
+    this.onChangeForParent = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    this.cdr.markForCheck();
+  }
+
+  selectValue(value: any, emitEvent = true) {
+    this.selected = value;
+
+    if (emitEvent) {
+      this.onChange(this.value);
+      this.onChangeForParent(this.checked, this.value);
+      this.onTouched();
+    }
+
+    this.cdr.markForCheck();
+  }
+
+  @HostListener('click')
+  @HostListener('keydown.enter')
+  @HostListener('keydown.space')
+  select() {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    if (this.checked) {
+      this.selected = undefined;
+    } else {
+      this.selected = this.value;
+    }
+
+    this.onChange(this.checked ? this.value : undefined);
+    this.onChangeForParent(this.checked, this.value);
+
+    this.onTouched();
+    this.cdr.markForCheck();
+  }
+}
diff --git a/apps/shared/components/checkbox/src/lib/checkbox.module.ts b/apps/shared/components/checkbox/src/lib/checkbox.module.ts
new file mode 100644
index 000000000..6fef1db93
--- /dev/null
+++ b/apps/shared/components/checkbox/src/lib/checkbox.module.ts
@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { CheckboxComponent } from './checkbox.component';
+import { CheckboxGroupComponent } from './checkbox-group.component';
+
+@NgModule({
+  imports: [CheckboxComponent, CheckboxGroupComponent],
+  exports: [CheckboxComponent, CheckboxGroupComponent],
+})
+export class CheckboxModule {}
diff --git a/apps/shared/components/checkbox/src/public-api.ts b/apps/shared/components/checkbox/src/public-api.ts
new file mode 100644
index 000000000..05a1a2c68
--- /dev/null
+++ b/apps/shared/components/checkbox/src/public-api.ts
@@ -0,0 +1,3 @@
+export * from './lib/checkbox.component';
+export * from './lib/checkbox-group.component';
+export * from './lib/checkbox.module';
diff --git a/apps/shared/components/control-field/ng-package.json b/apps/shared/components/control-field/ng-package.json
new file mode 100644
index 000000000..5b6ba62cc
--- /dev/null
+++ b/apps/shared/components/control-field/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/components/control-field/src/lib/control-field.component.css b/apps/shared/components/control-field/src/lib/control-field.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/shared/components/control-field/src/lib/control-field.component.html b/apps/shared/components/control-field/src/lib/control-field.component.html
new file mode 100644
index 000000000..6dbc74306
--- /dev/null
+++ b/apps/shared/components/control-field/src/lib/control-field.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/apps/shared/components/control-field/src/lib/control-field.component.ts b/apps/shared/components/control-field/src/lib/control-field.component.ts
new file mode 100644
index 000000000..632120a84
--- /dev/null
+++ b/apps/shared/components/control-field/src/lib/control-field.component.ts
@@ -0,0 +1,14 @@
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+  selector: 'shared-control-field',
+  templateUrl: 'control-field.component.html',
+  styleUrls: ['control-field.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: { class: 'shared-control-field' },
+  standalone: true,
+  imports: [],
+})
+export class ControlFieldComponent {
+  constructor() {}
+}
diff --git a/apps/shared/components/control-field/src/lib/control-field.module.ts b/apps/shared/components/control-field/src/lib/control-field.module.ts
new file mode 100644
index 000000000..1afcd5aa4
--- /dev/null
+++ b/apps/shared/components/control-field/src/lib/control-field.module.ts
@@ -0,0 +1,8 @@
+import { NgModule } from '@angular/core';
+import { ControlFieldComponent } from './control-field.component';
+
+@NgModule({
+  imports: [ControlFieldComponent],
+  exports: [ControlFieldComponent],
+})
+export class ControlFieldModule {}
diff --git a/apps/shared/components/control-field/src/public-api.ts b/apps/shared/components/control-field/src/public-api.ts
new file mode 100644
index 000000000..e69de29bb
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 9a71b32c7..ad8a5fce2 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
@@ -12,10 +12,10 @@
         {{ input?.label }}
       </div>
       <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
+        ><shared-icon icon="add"></shared-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
+        ><shared-icon class="mr-[1px]" icon="remove"></shared-icon
       ></span>
     </button>
   </div>
diff --git a/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.module.ts b/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.module.ts
index 7a3182882..cfe5e935c 100644
--- a/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.module.ts
+++ b/apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.module.ts
@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 
 import { FilterFilterGroupFilterComponent } from './filter-filter-group-filter.component';
 import { FilterInputOptionsModule } from '../../shared/filter-input-options';
-import { UiIconModule } from '@ui/icon';
 import { FilterInputModule } from '../../shared/filter-input';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, FilterInputOptionsModule, FilterInputModule],
+  imports: [CommonModule, IconComponent, FilterInputOptionsModule, FilterInputModule],
   exports: [FilterFilterGroupFilterComponent],
   declarations: [FilterFilterGroupFilterComponent],
 })
diff --git a/apps/shared/components/filter/src/lib/filter.module.ts b/apps/shared/components/filter/src/lib/filter.module.ts
index a2ad3d4dd..334cf3f1b 100644
--- a/apps/shared/components/filter/src/lib/filter.module.ts
+++ b/apps/shared/components/filter/src/lib/filter.module.ts
@@ -20,4 +20,4 @@ import { FilterInputModule } from './shared/filter-input';
   ],
   declarations: [FilterComponent, InputGroupSelectorPipe],
 })
-export class FilterNextModule {}
+export class FilterModule {}
diff --git a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.ts b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.ts
index 7ddbbbc05..c97845d46 100644
--- a/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.ts
+++ b/apps/shared/components/filter/src/lib/shared/filter-input-options/filter-input-options.component.ts
@@ -1,6 +1,5 @@
 import { Component, ChangeDetectionStrategy, Input, ViewChild, ElementRef, ChangeDetectorRef } from '@angular/core';
-import { Subscription } from 'rxjs';
-import { IInputOptions, InputOptions, InputType, Option } from '../../tree';
+import { IInputOptions, InputOptions, Option } from '../../tree';
 
 @Component({
   selector: 'shared-filter-input-options',
diff --git a/apps/shared/components/filter/src/public-api.ts b/apps/shared/components/filter/src/public-api.ts
index e69de29bb..f41a696fd 100644
--- a/apps/shared/components/filter/src/public-api.ts
+++ b/apps/shared/components/filter/src/public-api.ts
@@ -0,0 +1 @@
+export * from './lib';
diff --git a/apps/shared/components/icon/ng-package.json b/apps/shared/components/icon/ng-package.json
new file mode 100644
index 000000000..5b6ba62cc
--- /dev/null
+++ b/apps/shared/components/icon/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/components/icon/src/lib/icon-registry.ts b/apps/shared/components/icon/src/lib/icon-registry.ts
new file mode 100644
index 000000000..71abe4552
--- /dev/null
+++ b/apps/shared/components/icon/src/lib/icon-registry.ts
@@ -0,0 +1,110 @@
+import { Injectable } from '@angular/core';
+import { Icon, IconAlias, IconConfig } from './interfaces';
+import { IconLoader } from './loader';
+import { Observable, Subject, isObservable } from 'rxjs';
+
+@Injectable()
+export class IconRegistry {
+  private _icons = new Map<string, Icon>();
+  private _aliases = new Map<string, string>();
+  private _fallback: string;
+  private _viewBox: string;
+
+  updated = new Subject<void>();
+
+  private _initComplete = false;
+
+  constructor(private _iconLoader: IconLoader) {
+    this._loadIcons();
+  }
+
+  private async _loadIcons(): Promise<void> {
+    const load = this._iconLoader.getIcons();
+
+    if (load instanceof Promise) {
+      const config = await load;
+      this._init(config);
+    } else if (isObservable(load)) {
+      load.subscribe((config) => {
+        this._init(config);
+      });
+    } else {
+      this._init(load);
+    }
+  }
+
+  private _init(config: IconConfig): void {
+    this.register(...config.icons);
+    this.alias(...config.aliases);
+    this.setViewBox(config.viewBox);
+    this.setFallback(config.fallback);
+
+    this._initComplete = true;
+
+    this.updated.next();
+  }
+
+  register(...icons: Icon[]): IconRegistry {
+    icons?.forEach((icon) => {
+      this._icons.set(icon.name, icon);
+    });
+
+    return this;
+  }
+
+  setViewBox(viewBox: string): void {
+    this._viewBox = viewBox;
+  }
+
+  alias(...aliases: IconAlias[]): IconRegistry {
+    aliases?.forEach((alias) => {
+      this._aliases.set(alias.alias, alias.name);
+    });
+
+    return this;
+  }
+
+  setFallback(name: string): void {
+    this._fallback = name;
+  }
+
+  get(name: string): Icon | undefined {
+    const alias = this._aliases.get(name);
+    let iconName = name;
+    if (alias) {
+      iconName = alias;
+    }
+
+    let icon = this._icons.get(iconName);
+
+    if (!icon && this._initComplete) {
+      if (alias) {
+        console.warn(`Not found: Icon with name ${name} (${iconName})`);
+      } else {
+        console.warn(`Unable to find icon: '${name}'`);
+      }
+    }
+
+    if (!icon && this._fallback) {
+      icon = this._icons.get(this._fallback);
+    }
+
+    return { ...icon, viewBox: icon?.viewBox || this._viewBox };
+  }
+
+  get$(name: string): Observable<Icon | undefined> {
+    return new Observable<Icon | undefined>((subscriber) => {
+      let icon = this.get(name);
+      subscriber.next(icon);
+      subscriber.complete();
+
+      const sub = this.updated.subscribe(() => {
+        icon = this.get(name);
+        subscriber.next(icon);
+        subscriber.complete();
+      });
+
+      return () => sub.unsubscribe();
+    });
+  }
+}
diff --git a/apps/shared/components/icon/src/lib/icon.component.css b/apps/shared/components/icon/src/lib/icon.component.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/shared/components/icon/src/lib/icon.component.html b/apps/shared/components/icon/src/lib/icon.component.html
new file mode 100644
index 000000000..e69de29bb
diff --git a/apps/shared/components/icon/src/lib/icon.component.ts b/apps/shared/components/icon/src/lib/icon.component.ts
new file mode 100644
index 000000000..f31cf7295
--- /dev/null
+++ b/apps/shared/components/icon/src/lib/icon.component.ts
@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { IconRegistry } from './icon-registry';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'shared-icon',
+  template: `
+    <svg [style.width.rem]="size / 16" [style.height.rem]="size / 16" [attr.viewBox]="viewBox">
+      <path fill="currentColor" [attr.d]="data" />
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+})
+export class IconComponent implements OnInit, OnDestroy, OnChanges {
+  @Input()
+  icon: string;
+
+  data: string;
+
+  viewBox: string;
+
+  @Input()
+  size: number = 24;
+
+  private _onDestroy$ = new Subject<void>();
+
+  constructor(private readonly _iconRegistry: IconRegistry, private readonly _cdr: ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    this._iconRegistry.updated.pipe(takeUntil(this._onDestroy$)).subscribe(() => {
+      this.updateIcon();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._onDestroy$.next();
+    this._onDestroy$.complete();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.icon) {
+      this.updateIcon();
+    }
+  }
+
+  updateIcon(): void {
+    const icon = this._iconRegistry.get(this.icon);
+    this.data = icon?.data;
+    this.viewBox = icon?.viewBox;
+    this._cdr.markForCheck();
+  }
+}
diff --git a/apps/shared/components/icon/src/lib/icon.module.ts b/apps/shared/components/icon/src/lib/icon.module.ts
new file mode 100644
index 000000000..aaa249c4c
--- /dev/null
+++ b/apps/shared/components/icon/src/lib/icon.module.ts
@@ -0,0 +1,31 @@
+import { NgModule, Provider } from '@angular/core';
+import { IconComponent } from './icon.component';
+import { IconLoader, JsonIconLoader } from './loader';
+import { IconRegistry } from './icon-registry';
+
+export function provideIcon(loaderProvider?: Provider) {
+  const providers: Provider[] = [IconRegistry];
+  if (!loaderProvider) {
+    providers.push({
+      provide: IconLoader,
+      useClass: JsonIconLoader,
+    });
+  } else {
+    providers.push(loaderProvider);
+  }
+
+  return providers;
+}
+
+@NgModule({
+  imports: [IconComponent],
+  exports: [IconComponent],
+})
+export class IconModule {
+  static forRoot(loaderProvider?: Provider) {
+    return {
+      ngModule: IconModule,
+      providers: provideIcon(loaderProvider),
+    };
+  }
+}
diff --git a/apps/shared/components/icon/src/lib/interfaces.ts b/apps/shared/components/icon/src/lib/interfaces.ts
new file mode 100644
index 000000000..5976b2443
--- /dev/null
+++ b/apps/shared/components/icon/src/lib/interfaces.ts
@@ -0,0 +1,17 @@
+export interface IconConfig {
+  fallback?: string;
+  icons?: Icon[];
+  aliases?: IconAlias[];
+  viewBox: string;
+}
+
+export interface Icon {
+  name: string;
+  data: string;
+  viewBox?: string;
+}
+
+export interface IconAlias {
+  alias: string;
+  name: string;
+}
diff --git a/apps/shared/components/icon/src/lib/loader/empty.loader.ts b/apps/shared/components/icon/src/lib/loader/empty.loader.ts
new file mode 100644
index 000000000..9ead435f8
--- /dev/null
+++ b/apps/shared/components/icon/src/lib/loader/empty.loader.ts
@@ -0,0 +1,17 @@
+import { Injectable } from '@angular/core';
+import { IconLoader } from './icon-loader';
+import { IconConfig } from '../interfaces';
+
+@Injectable()
+export class EmptyIconLoader extends IconLoader {
+  constructor() {
+    super();
+  }
+
+  getIcons(): IconConfig {
+    return {
+      icons: [],
+      viewBox: '',
+    };
+  }
+}
diff --git a/apps/shared/components/icon/src/lib/loader/icon-loader.ts b/apps/shared/components/icon/src/lib/loader/icon-loader.ts
new file mode 100644
index 000000000..82f6ed27d
--- /dev/null
+++ b/apps/shared/components/icon/src/lib/loader/icon-loader.ts
@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+import { IconConfig } from '../interfaces';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export abstract class IconLoader {
+  abstract getIcons(): Promise<IconConfig> | IconConfig | Observable<IconConfig>;
+}
diff --git a/apps/shared/components/icon/src/lib/loader/index.ts b/apps/shared/components/icon/src/lib/loader/index.ts
new file mode 100644
index 000000000..9d1a6d90a
--- /dev/null
+++ b/apps/shared/components/icon/src/lib/loader/index.ts
@@ -0,0 +1,3 @@
+export * from './empty.loader';
+export * from './icon-loader';
+export * from './json.loader';
diff --git a/apps/shared/components/icon/src/lib/loader/json.loader.ts b/apps/shared/components/icon/src/lib/loader/json.loader.ts
new file mode 100644
index 000000000..cfed38e9b
--- /dev/null
+++ b/apps/shared/components/icon/src/lib/loader/json.loader.ts
@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { IconLoader } from './icon-loader';
+import { Config } from '@core/config';
+import { HttpClient } from '@angular/common/http';
+import { IconConfig } from '../interfaces';
+
+@Injectable()
+export class JsonIconLoader extends IconLoader {
+  constructor(private readonly config: Config, private readonly http: HttpClient) {
+    super();
+  }
+
+  getIcons(): Promise<IconConfig> {
+    return this.http.get<IconConfig>(this.config.get('@shared/icon')).toPromise();
+  }
+}
diff --git a/apps/shared/components/icon/src/public-api.ts b/apps/shared/components/icon/src/public-api.ts
new file mode 100644
index 000000000..e0e19a65d
--- /dev/null
+++ b/apps/shared/components/icon/src/public-api.ts
@@ -0,0 +1,5 @@
+export * from './lib/icon-registry';
+export * from './lib/icon.component';
+export * from './lib/icon.module';
+export * from './lib/interfaces';
+export * from './lib/loader';
diff --git a/apps/shared/components/searchbox/src/lib/searchbox.component.html b/apps/shared/components/searchbox/src/lib/searchbox.component.html
index 17cb24a2b..f5ba65a78 100644
--- a/apps/shared/components/searchbox/src/lib/searchbox.component.html
+++ b/apps/shared/components/searchbox/src/lib/searchbox.component.html
@@ -13,7 +13,7 @@
     (keyup)="onKeyup($event)"
   />
   <button (click)="clear(); focus()" tabindex="-1" *ngIf="input.value" class="searchbox-clear-btn" type="button">
-    <ui-svg-icon icon="close" [size]="32"></ui-svg-icon>
+    <shared-icon icon="close" [size]="32"></shared-icon>
   </button>
   <ng-container *ngIf="!loading">
     <button
@@ -27,7 +27,7 @@
       <ui-icon icon="search" size="1.5rem"></ui-icon>
     </button>
     <button tabindex="0" class="searchbox-scan-btn" type="button" *ngIf="canScan" (click)="startScan()">
-      <ui-svg-icon icon="barcode-scan" [size]="32"></ui-svg-icon>
+      <shared-icon icon="barcode-scan" [size]="32"></shared-icon>
     </button>
   </ng-container>
   <div *ngIf="loading" class="searchbox-load-indicator">
diff --git a/apps/shared/components/searchbox/src/lib/searchbox.module.ts b/apps/shared/components/searchbox/src/lib/searchbox.module.ts
index 1ca6fafce..65d72547f 100644
--- a/apps/shared/components/searchbox/src/lib/searchbox.module.ts
+++ b/apps/shared/components/searchbox/src/lib/searchbox.module.ts
@@ -4,9 +4,10 @@ import { CommonModule } from '@angular/common';
 import { SearchboxComponent } from './searchbox.component';
 import { UiIconModule } from '@ui/icon';
 import { FormsModule } from '@angular/forms';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, FormsModule],
+  imports: [CommonModule, UiIconModule, IconComponent, FormsModule],
   exports: [SearchboxComponent],
   declarations: [SearchboxComponent],
 })
diff --git a/apps/shared/components/select/ng-package.json b/apps/shared/components/select/ng-package.json
new file mode 100644
index 000000000..baed78b32
--- /dev/null
+++ b/apps/shared/components/select/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/components/select/src/lib/select-option.component.css b/apps/shared/components/select/src/lib/select-option.component.css
new file mode 100644
index 000000000..ee6a258ef
--- /dev/null
+++ b/apps/shared/components/select/src/lib/select-option.component.css
@@ -0,0 +1,4 @@
+.shared-select-option {
+  @apply px-4 py-[1.125rem] cursor-pointer w-full;
+  @apply hover:bg-[#EDEFF0];
+}
diff --git a/apps/shared/components/select/src/lib/select-option.component.html b/apps/shared/components/select/src/lib/select-option.component.html
new file mode 100644
index 000000000..6dbc74306
--- /dev/null
+++ b/apps/shared/components/select/src/lib/select-option.component.html
@@ -0,0 +1 @@
+<ng-content></ng-content>
diff --git a/apps/shared/components/select/src/lib/select-option.component.ts b/apps/shared/components/select/src/lib/select-option.component.ts
new file mode 100644
index 000000000..6dbb410b8
--- /dev/null
+++ b/apps/shared/components/select/src/lib/select-option.component.ts
@@ -0,0 +1,46 @@
+import { FocusOrigin, FocusableOption } from '@angular/cdk/a11y';
+import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import { CommonModule } from '@angular/common';
+import { Component, ChangeDetectionStrategy, Input, ElementRef, ViewEncapsulation, HostListener } from '@angular/core';
+import { SelectComponent } from './select.component';
+
+@Component({
+  selector: 'shared-select-option',
+  templateUrl: 'select-option.component.html',
+  styleUrls: ['select-option.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'shared-select-option' },
+  standalone: true,
+  imports: [CommonModule],
+})
+export class SelectOptionComponent<T = any> implements FocusableOption {
+  @Input()
+  value: T;
+
+  @Input('disabled')
+  get disabledInput(): BooleanInput {
+    return this.disabled;
+  }
+  set disabledInput(value: BooleanInput) {
+    this.disabled = coerceBooleanProperty(value);
+  }
+
+  disabled = false;
+
+  constructor(private _elementRef: ElementRef<HTMLElement>, private _host: SelectComponent) {}
+  focus(origin?: FocusOrigin): void {
+    throw new Error('Method not implemented.');
+  }
+
+  getLabel(): string {
+    return this._elementRef.nativeElement?.textContent?.trim();
+  }
+
+  @HostListener('click', ['$event'])
+  select(event: Event): void {
+    event.preventDefault();
+    event.stopPropagation();
+    this._host.setValue(this.value);
+  }
+}
diff --git a/apps/shared/components/select/src/lib/select.component.css b/apps/shared/components/select/src/lib/select.component.css
new file mode 100644
index 000000000..28f8933a3
--- /dev/null
+++ b/apps/shared/components/select/src/lib/select.component.css
@@ -0,0 +1,57 @@
+.shared-select {
+  @apply inline-block;
+}
+
+.shared-select:focus {
+  @apply outline-none;
+}
+
+.shared-select-toggle {
+  @apply w-full grid grid-flow-col items-center justify-between;
+  @apply bg-[#EDEFF0] px-4 py-[1.125rem] rounded;
+  @apply border border-[#AEB7C1] border-solid;
+}
+
+.shared-select:focus .shared-select-toggle,
+.shared-select:focus-within .shared-select-toggle {
+  @apply bg-white;
+}
+
+.shared-select-toggle.has-value {
+  @apply bg-white;
+}
+
+.shared-select-toggle.has-value .shared-select-display-value {
+  @apply text-black;
+}
+
+.shared-select-toggle.is-open,
+.shared-select:focus .shared-select-toggle {
+  @apply border-b-0 rounded-b-none;
+}
+
+.shared-select-display-value {
+  @apply truncate text-[#89949E];
+}
+
+.shared-select-options-outlet {
+  @apply relative;
+}
+
+.shared-select-options {
+  @apply absolute top-0 left-0 w-full;
+  @apply z-dropdown;
+  @apply overflow-y-auto;
+  @apply max-h-[15rem] h-0;
+  @apply flex flex-col;
+}
+
+.shared-select-options.is-open,
+.shared-select:focus .shared-select-options {
+  @apply h-auto;
+  @apply bg-white rounded-b border border-[#AEB7C1] border-solid border-t-0;
+}
+
+.shared-select-options.force-close {
+  height: 0 !important;
+}
diff --git a/apps/shared/components/select/src/lib/select.component.html b/apps/shared/components/select/src/lib/select.component.html
new file mode 100644
index 000000000..808110edc
--- /dev/null
+++ b/apps/shared/components/select/src/lib/select.component.html
@@ -0,0 +1,9 @@
+<div class="shared-select-toggle" [class.has-value]="hasValue" [class.is-open]="isOpen" (click)="toggle()">
+  <span class="shared-select-display-value truncate">{{ displayValue }}</span>
+  <shared-icon class="shared-select-arrow" [icon]="!isOpen ? 'arrow-drop-down' : 'arrow-drop-up'"></shared-icon>
+</div>
+<div class="shared-select-options-outlet">
+  <div class="shared-select-options" [class.is-open]="isOpen" [class.force-close]="forceClose">
+    <ng-content></ng-content>
+  </div>
+</div>
diff --git a/apps/shared/components/select/src/lib/select.component.ts b/apps/shared/components/select/src/lib/select.component.ts
new file mode 100644
index 000000000..1b6e1720c
--- /dev/null
+++ b/apps/shared/components/select/src/lib/select.component.ts
@@ -0,0 +1,158 @@
+import { BooleanInput, NumberInput, coerceBooleanProperty } from '@angular/cdk/coercion';
+import {
+  Component,
+  ChangeDetectionStrategy,
+  Input,
+  ChangeDetectorRef,
+  ContentChildren,
+  QueryList,
+  Output,
+  EventEmitter,
+  ViewEncapsulation,
+  HostListener,
+  ElementRef,
+  HostBinding,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { SelectOptionComponent } from './select-option.component';
+import { IconComponent } from '@shared/components/icon';
+
+@Component({
+  selector: 'shared-select',
+  templateUrl: 'select.component.html',
+  styleUrls: ['select.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+  host: { class: 'shared-select' },
+  standalone: true,
+  imports: [IconComponent],
+  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: SelectComponent, multi: true }],
+})
+export class SelectComponent<T = any> implements ControlValueAccessor {
+  private _readonly: boolean = false;
+  @Input()
+  get readonly(): BooleanInput {
+    return this._readonly;
+  }
+  set readonly(value: BooleanInput) {
+    this._readonly = coerceBooleanProperty(value);
+  }
+
+  private _disabled: boolean = false;
+  @Input()
+  get disabled(): BooleanInput {
+    return this._disabled;
+  }
+  set disabled(value: BooleanInput) {
+    this._disabled = coerceBooleanProperty(value);
+  }
+
+  @ContentChildren(SelectOptionComponent)
+  options: QueryList<SelectOptionComponent>;
+
+  private _value: T;
+  @Input()
+  get value(): T {
+    return this._value;
+  }
+  set value(value: T) {
+    this._value = value;
+  }
+  @Output()
+  valueChange = new EventEmitter<T>();
+
+  @Input()
+  placeholder: string;
+
+  @Input()
+  @HostBinding('tabindex')
+  tabindex: NumberInput = 0;
+
+  get hasValue(): boolean {
+    return this.value !== undefined && this.value !== null;
+  }
+
+  private _onChange: (value: T) => void;
+
+  private _onTouched: () => void;
+
+  get displayValue(): string {
+    const option = this.options.find((option) => option.value === this.value);
+    return option?.getLabel() ?? this.placeholder ?? '';
+  }
+
+  private _open: boolean = false;
+  get isOpen(): boolean {
+    return this._open;
+  }
+
+  private _forceClose: boolean = false;
+  get forceClose(): boolean {
+    return this._forceClose;
+  }
+
+  constructor(private _cdr: ChangeDetectorRef, private _elementRef: ElementRef<HTMLElement>) {}
+
+  writeValue(obj: any): void {
+    this.value = obj;
+  }
+
+  registerOnChange(fn: any): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    this._cdr.markForCheck();
+  }
+
+  setValue(value: T): void {
+    this.value = value;
+    this._onChange(value);
+    this._onTouched();
+    this.valueChange.emit(value);
+    this.close();
+    this._cdr.markForCheck();
+  }
+
+  toggle(): void {
+    if (this.isOpen) {
+      this.close();
+    } else {
+      this.open();
+    }
+  }
+
+  open() {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    this._open = true;
+    this._forceClose = false;
+    this._cdr.markForCheck();
+  }
+
+  close() {
+    this._open = false;
+    this._forceClose = true;
+    this._cdr.markForCheck();
+  }
+
+  @HostListener('document:click', ['$event'])
+  onDocumentClick(event: MouseEvent): void {
+    if (this.isOpen && !this.contains(event.target)) {
+      this.close();
+    }
+  }
+
+  @HostListener('keydown', ['$event'])
+  onKeydown(event: KeyboardEvent): void {}
+
+  private contains(target: EventTarget): boolean {
+    return this._elementRef.nativeElement.contains(target as Element);
+  }
+}
diff --git a/apps/shared/components/select/src/lib/select.module.ts b/apps/shared/components/select/src/lib/select.module.ts
new file mode 100644
index 000000000..b0899ec9b
--- /dev/null
+++ b/apps/shared/components/select/src/lib/select.module.ts
@@ -0,0 +1,9 @@
+import { NgModule } from '@angular/core';
+import { SelectComponent } from './select.component';
+import { SelectOptionComponent } from './select-option.component';
+
+@NgModule({
+  imports: [SelectComponent, SelectOptionComponent],
+  exports: [SelectComponent, SelectOptionComponent],
+})
+export class SelectModule {}
diff --git a/apps/shared/components/select/src/public-api.ts b/apps/shared/components/select/src/public-api.ts
new file mode 100644
index 000000000..8c1f59a18
--- /dev/null
+++ b/apps/shared/components/select/src/public-api.ts
@@ -0,0 +1,3 @@
+export * from './lib/select-option.component';
+export * from './lib/select.component';
+export * from './lib/select.module';
diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-list-item/purchase-options-list-item.component.html b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-list-item/purchase-options-list-item.component.html
index c21f20807..80ae0255e 100644
--- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-list-item/purchase-options-list-item.component.html
+++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-list-item/purchase-options-list-item.component.html
@@ -10,7 +10,7 @@
       {{ product?.name }}
     </div>
     <div class="shared-purchase-options-list-item__format flex flex-row items-center">
-      <ui-svg-icon [icon]="product?.format"></ui-svg-icon>
+      <shared-icon [icon]="product?.format"></shared-icon>
       <span class="ml-2 font-bold">{{ product?.formatDetail }}</span>
     </div>
     <div class="shared-purchase-options-list-item__manufacturer-and-ean">
@@ -32,31 +32,31 @@
           [attr.data-option]="availability.purchaseOption"
         >
           <ng-container *ngSwitchCase="'delivery'">
-            <ui-svg-icon icon="isa-truck" [size]="22"></ui-svg-icon>
+            <shared-icon icon="isa-truck" [size]="22"></shared-icon>
             {{ availability.data.estimatedDelivery?.start | date: 'EE dd.MM.' }}
             -
             {{ availability.data.estimatedDelivery?.stop | date: 'EE dd.MM.' }}
           </ng-container>
           <ng-container *ngSwitchCase="'dig-delivery'">
-            <ui-svg-icon icon="isa-truck" [size]="22"></ui-svg-icon>
+            <shared-icon icon="isa-truck" [size]="22"></shared-icon>
             {{ availability.data.estimatedDelivery?.start | date: 'EE dd.MM.' }}
             -
             {{ availability.data.estimatedDelivery?.stop | date: 'EE dd.MM.' }}
           </ng-container>
           <ng-container *ngSwitchCase="'b2b-delivery'">
-            <ui-svg-icon icon="isa-b2b-truck" [size]="24"></ui-svg-icon>
+            <shared-icon icon="isa-b2b-truck" [size]="24"></shared-icon>
             {{ availability.data.estimatedShippingDate | date: 'dd. MMMM yyyy' }}
           </ng-container>
           <ng-container *ngSwitchCase="'pickup'">
-            <ui-svg-icon icon="isa-box-out" [size]="18"></ui-svg-icon>
+            <shared-icon icon="isa-box-out" [size]="18"></shared-icon>
             {{ availability.data.estimatedShippingDate | date: 'dd. MMMM yyyy' }}
           </ng-container>
           <ng-container *ngSwitchCase="'in-store'">
-            <ui-svg-icon icon="isa-shopping-bag" [size]="18"></ui-svg-icon>
+            <shared-icon icon="isa-shopping-bag" [size]="18"></shared-icon>
             {{ availability.data.inStock }}x ab sofort
           </ng-container>
           <ng-container *ngSwitchCase="'download'">
-            <ui-svg-icon icon="isa-download" [size]="22"></ui-svg-icon>
+            <shared-icon icon="isa-download" [size]="22"></shared-icon>
             Download
           </ng-container>
         </div>
@@ -84,7 +84,7 @@
 
           <shared-input-control [class.ml-8]="manualPriceFormControl?.invalid && manualPriceFormControl?.dirty">
             <shared-input-control-indicator>
-              <ui-svg-icon *ngIf="manualPriceFormControl?.invalid && manualPriceFormControl?.dirty" icon="mat-info"></ui-svg-icon>
+              <shared-icon *ngIf="manualPriceFormControl?.invalid && manualPriceFormControl?.dirty" icon="mat-info"></shared-icon>
             </shared-input-control-indicator>
             <input
               triggerOn="init"
@@ -109,7 +109,7 @@
       <div class="relative flex flex-col">
         <shared-input-control>
           <shared-input-control-indicator>
-            <ui-svg-icon *ngIf="priceFormControl?.invalid && priceFormControl?.dirty" icon="mat-info"></ui-svg-icon>
+            <shared-icon *ngIf="priceFormControl?.invalid && priceFormControl?.dirty" icon="mat-info"></shared-icon>
           </shared-input-control-indicator>
           <input
             [uiOverlayTrigger]="tooltip"
diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-list-item/purchase-options-list-item.component.ts b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-list-item/purchase-options-list-item.component.ts
index c248cbf5e..1c7a29271 100644
--- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-list-item/purchase-options-list-item.component.ts
+++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-list-item/purchase-options-list-item.component.ts
@@ -16,7 +16,6 @@ import { ProductImageModule } from '@cdn/product-image';
 import { InputControlModule } from '@shared/components/input-control';
 import { ElementLifecycleModule } from '@shared/directives/element-lifecycle';
 import { UiCommonModule } from '@ui/common';
-import { UiIconModule } from '@ui/icon';
 import { UiQuantityDropdownModule } from '@ui/quantity-dropdown';
 import { UiSpinnerModule } from '@ui/spinner';
 import { UiTooltipModule } from '@ui/tooltip';
@@ -26,6 +25,7 @@ import { GIFT_CARD_MAX_PRICE, PRICE_PATTERN } from '../constants';
 import { Item, PurchaseOptionsStore } from '../store';
 import { UiSelectModule } from '@ui/select';
 import { KeyValueDTOOfStringAndString } from '@swagger/cat';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'scale-content, [scaleContent]',
@@ -82,7 +82,7 @@ export class ScaleContentComponent implements AfterContentInit {
     UiQuantityDropdownModule,
     UiSelectModule,
     ProductImageModule,
-    UiIconModule,
+    IconComponent,
     UiSpinnerModule,
     ReactiveFormsModule,
     InputControlModule,
diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/delivery-purchase-options-tile.component.html b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/delivery-purchase-options-tile.component.html
index cbc5a1d80..ccf6eac01 100644
--- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/delivery-purchase-options-tile.component.html
+++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/delivery-purchase-options-tile.component.html
@@ -1,6 +1,6 @@
 <div class="purchase-options-tile__heading">
   <div class="icon-wrapper">
-    <ui-svg-icon icon="isa-truck"></ui-svg-icon>
+    <shared-icon icon="isa-truck"></shared-icon>
   </div>
   <span class="purchase-option-name">Versand</span>
 </div>
diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/delivery-purchase-options-tile.component.ts b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/delivery-purchase-options-tile.component.ts
index d75a0cbec..dfc95dac6 100644
--- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/delivery-purchase-options-tile.component.ts
+++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/delivery-purchase-options-tile.component.ts
@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { UiIconModule } from '@ui/icon';
 import { PurchaseOptionsStore } from '../store';
 import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'app-delivery-purchase-options-tile',
@@ -10,7 +10,7 @@ import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
   styleUrls: ['purchase-options-tile.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, UiIconModule],
+  imports: [CommonModule, IconComponent],
 })
 export class DeliveryPurchaseOptionTileComponent extends BasePurchaseOptionDirective {
   constructor(protected store: PurchaseOptionsStore, protected cdr: ChangeDetectorRef) {
diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/download-purchase-options-tile.component.html b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/download-purchase-options-tile.component.html
index 3a867f880..4c92d5e3a 100644
--- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/download-purchase-options-tile.component.html
+++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/download-purchase-options-tile.component.html
@@ -1,6 +1,6 @@
 <div class="purchase-options-tile__heading">
   <div class="icon-wrapper">
-    <ui-svg-icon icon="isa-download"></ui-svg-icon>
+    <shared-icon icon="isa-download"></shared-icon>
   </div>
   <span class="purchase-option-name">Download</span>
 </div>
diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/download-purchase-options-tile.component.ts b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/download-purchase-options-tile.component.ts
index 3bf9ffd3d..5edf54811 100644
--- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/download-purchase-options-tile.component.ts
+++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/download-purchase-options-tile.component.ts
@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { UiIconModule } from '@ui/icon';
 import { PurchaseOptionsStore } from '../store';
 import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'app-download-purchase-options-tile',
@@ -10,7 +10,7 @@ import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
   styleUrls: ['purchase-options-tile.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, UiIconModule],
+  imports: [CommonModule, IconComponent],
 })
 export class DownloadPurchaseOptionTileComponent extends BasePurchaseOptionDirective {
   constructor(protected store: PurchaseOptionsStore, protected cdr: ChangeDetectorRef) {
diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/in-store-purchase-options-tile.component.html b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/in-store-purchase-options-tile.component.html
index 5baa91641..75d9be93d 100644
--- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/in-store-purchase-options-tile.component.html
+++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/in-store-purchase-options-tile.component.html
@@ -1,6 +1,6 @@
 <div class="purchase-options-tile__heading">
   <div class="icon-wrapper">
-    <ui-svg-icon icon="isa-shopping-bag"></ui-svg-icon>
+    <shared-icon icon="isa-shopping-bag"></shared-icon>
   </div>
   <span class="purchase-option-name">Rücklage</span>
 </div>
@@ -11,7 +11,7 @@
   <button type="button" class="w-[176px] flex flex-row items-center justify-between" (click)="sharedBranchSelector.focus()">
     <span class="grow text-left truncate">{{ inStoreBranch$ | async | branchName }}</span>
     <span class="transition-all group-focus-within:rotate-180">
-      <ui-svg-icon icon="menu-down"></ui-svg-icon>
+      <shared-icon icon="menu-down"></shared-icon>
     </span>
   </button>
   <shared-branch-selector
diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/in-store-purchase-options-tile.component.ts b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/in-store-purchase-options-tile.component.ts
index 3e87d5e9a..5e6c929eb 100644
--- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/in-store-purchase-options-tile.component.ts
+++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/in-store-purchase-options-tile.component.ts
@@ -4,10 +4,10 @@ import { FormsModule } from '@angular/forms';
 import { BranchSelectorComponent } from '@shared/components/branch-selector';
 import { BranchNamePipe } from '@shared/pipes/branch';
 import { BranchDTO } from '@swagger/checkout';
-import { UiIconModule } from '@ui/icon';
 import { PurchaseOptionsStore } from '../store';
 import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
 import { AuthService } from '@core/auth';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'app-in-store-purchase-options-tile',
@@ -15,7 +15,7 @@ import { AuthService } from '@core/auth';
   styleUrls: ['purchase-options-tile.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, UiIconModule, BranchSelectorComponent, FormsModule, BranchNamePipe],
+  imports: [CommonModule, IconComponent, BranchSelectorComponent, FormsModule, BranchNamePipe],
   host: { tabindex: '-1' },
 })
 export class InStorePurchaseOptionTileComponent extends BasePurchaseOptionDirective {
diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/pickup-purchase-options-tile.component.html b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/pickup-purchase-options-tile.component.html
index 0c3a2fe22..9b2017328 100644
--- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/pickup-purchase-options-tile.component.html
+++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/pickup-purchase-options-tile.component.html
@@ -1,6 +1,6 @@
 <div class="purchase-options-tile__heading">
   <div class="icon-wrapper">
-    <ui-svg-icon icon="isa-box-out"></ui-svg-icon>
+    <shared-icon icon="isa-box-out"></shared-icon>
   </div>
   <span class="purchase-option-name">Abholung</span>
 </div>
@@ -11,7 +11,7 @@
   <button type="button" class="w-[176px] flex flex-row items-center justify-between" (click)="sharedBranchSelector.focus()">
     <span class="grow text-left truncate">{{ pickupBranch$ | async | branchName }}</span>
     <span class="transition-all group-focus-within:rotate-180">
-      <ui-svg-icon icon="menu-down"></ui-svg-icon>
+      <shared-icon icon="menu-down"></shared-icon>
     </span>
   </button>
   <shared-branch-selector
diff --git a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/pickup-purchase-options-tile.component.ts b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/pickup-purchase-options-tile.component.ts
index 39c5715ec..ae323d3d0 100644
--- a/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/pickup-purchase-options-tile.component.ts
+++ b/apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/pickup-purchase-options-tile.component.ts
@@ -4,10 +4,10 @@ import { FormsModule } from '@angular/forms';
 import { BranchSelectorComponent } from '@shared/components/branch-selector';
 import { BranchNamePipe } from '@shared/pipes/branch';
 import { BranchDTO } from '@swagger/checkout';
-import { UiIconModule } from '@ui/icon';
 import { PurchaseOptionsStore } from '../store';
 import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
 import { AuthService } from '@core/auth';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'app-pickup-purchase-options-tile',
@@ -15,7 +15,7 @@ import { AuthService } from '@core/auth';
   styleUrls: ['purchase-options-tile.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, UiIconModule, BranchSelectorComponent, FormsModule, BranchNamePipe],
+  imports: [CommonModule, IconComponent, BranchSelectorComponent, FormsModule, BranchNamePipe],
   host: { tabindex: '-1' },
 })
 export class PickupPurchaseOptionTileComponent extends BasePurchaseOptionDirective {
diff --git a/apps/shared/pipes/country/ng-package.json b/apps/shared/pipes/country/ng-package.json
new file mode 100644
index 000000000..5b6ba62cc
--- /dev/null
+++ b/apps/shared/pipes/country/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/pipes/country/src/lib/country.pipe.ts b/apps/shared/pipes/country/src/lib/country.pipe.ts
new file mode 100644
index 000000000..e92f27850
--- /dev/null
+++ b/apps/shared/pipes/country/src/lib/country.pipe.ts
@@ -0,0 +1,40 @@
+import { ChangeDetectorRef, OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import { CrmCustomerService } from '@domain/crm';
+import { BehaviorSubject, combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
+
+@Pipe({
+  name: 'country',
+  standalone: true,
+  pure: false,
+})
+export class CountryPipe implements PipeTransform, OnDestroy {
+  private result: string;
+  private value$ = new BehaviorSubject<string>(undefined);
+
+  countries$ = this.customerService.getCountries().pipe(map((res) => res.result));
+
+  subscriptions = combineLatest([this.value$, this.countries$]).subscribe(([value, countries]) => {
+    if (!!value && countries?.length > 0) {
+      const country = countries.find((c) => c.isO3166_A_3 === value);
+
+      if (country && this.result !== country.name) {
+        this.result = String(country.name);
+        this.cdr.markForCheck();
+      }
+    }
+  });
+
+  constructor(private customerService: CrmCustomerService, private cdr: ChangeDetectorRef) {}
+
+  ngOnDestroy() {
+    this.subscriptions.unsubscribe();
+  }
+
+  transform(value: string): any {
+    if (this.value$.value !== value) {
+      this.value$.next(value);
+    }
+    return this.result;
+  }
+}
diff --git a/apps/shared/pipes/country/src/public-api.ts b/apps/shared/pipes/country/src/public-api.ts
new file mode 100644
index 000000000..d9a830d37
--- /dev/null
+++ b/apps/shared/pipes/country/src/public-api.ts
@@ -0,0 +1 @@
+export * from './lib/country.pipe';
diff --git a/apps/shared/pipes/customer/src/lib/address.pipe.ts b/apps/shared/pipes/customer/src/lib/address.pipe.ts
new file mode 100644
index 000000000..f0d4f7273
--- /dev/null
+++ b/apps/shared/pipes/customer/src/lib/address.pipe.ts
@@ -0,0 +1,51 @@
+import { ChangeDetectorRef, Pipe, PipeTransform } from '@angular/core';
+import { AddressDTO, CommunicationDetailsDTO, OrganisationDTO } from '@swagger/crm';
+
+export interface AddressData {
+  gender?: number;
+  title?: string;
+  firstName?: string;
+  lastName?: string;
+  address?: AddressDTO;
+  organisation?: OrganisationDTO;
+  communicationDetails?: CommunicationDetailsDTO;
+}
+
+@Pipe({
+  name: 'address',
+  pure: false,
+})
+export class AddressPipe implements PipeTransform {
+  private result: string;
+  private data: AddressData;
+  private useComma = false;
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  transform(data: AddressData, useComma?: boolean): string {
+    this.data = data;
+    this.useComma = useComma ?? this.useComma;
+    this.getResult();
+
+    return this.result;
+  }
+
+  async getResult() {
+    let result = undefined;
+    let parts = [
+      this.data?.organisation?.name || '',
+      this.data?.organisation?.department || '',
+      [this.data?.lastName, this.data?.firstName].filter((f) => !!f).join(this.useComma ? ' ' : ', '),
+      `${this.data?.address?.street || ''} ${this.data?.address?.streetNumber || ''}`,
+      `${this.data?.address?.zipCode || ''} ${this.data?.address?.city || ''}`,
+    ]
+      .filter((value) => value != '')
+      .filter((value) => value.trim());
+    result = parts.join(this.useComma ? ', ' : ' | ');
+
+    if (result !== this.result) {
+      this.result = result;
+      this.cdr.markForCheck();
+    }
+  }
+}
diff --git a/apps/shared/pipes/customer/src/lib/client-channel.pipe.ts b/apps/shared/pipes/customer/src/lib/client-channel.pipe.ts
new file mode 100644
index 000000000..08272e4d4
--- /dev/null
+++ b/apps/shared/pipes/customer/src/lib/client-channel.pipe.ts
@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { OrderType } from '@swagger/oms';
+
+@Pipe({
+  name: 'clientChannel',
+})
+export class ClientChannelPipe implements PipeTransform {
+  clientChannelText = {
+    0: '',
+    1: '',
+    2: 'Filiale',
+    4: 'HSC',
+    8: 'Online',
+    16: 'App',
+    24: 'Mobile Shop',
+    32: '',
+  };
+
+  transform(value: OrderType): string {
+    const v: number = value;
+    if (v === 8 || v === 16 || v === 24) {
+      return 'hugendubel.de';
+    }
+    return this.clientChannelText[v] || '';
+  }
+}
diff --git a/apps/shared/pipes/customer/src/lib/country.pipe.ts b/apps/shared/pipes/customer/src/lib/country.pipe.ts
new file mode 100644
index 000000000..3af79e5cf
--- /dev/null
+++ b/apps/shared/pipes/customer/src/lib/country.pipe.ts
@@ -0,0 +1,63 @@
+import { ChangeDetectorRef, Injectable, OnDestroy, Pipe, PipeTransform } from '@angular/core';
+import { CountryDTO } from '@swagger/crm';
+import { CrmCustomerService } from '@domain/crm';
+import { BehaviorSubject, combineLatest } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
+
+@Pipe({
+  name: 'country',
+  pure: false,
+})
+export class CountryPipe implements PipeTransform, OnDestroy {
+  private result: string;
+
+  private inputValue = new BehaviorSubject<any>(undefined);
+  private inputKey = new BehaviorSubject<keyof CountryDTO>(undefined);
+  private displayKey = new BehaviorSubject<keyof CountryDTO>(undefined);
+
+  private countrySubscription = combineLatest([this.inputValue, this.inputKey, this.displayKey, this.customerService.getCountries()])
+    .pipe(debounceTime(1))
+    .subscribe(([value, inputKey, displayKey, countries]) => {
+      let nextResult = this.result;
+
+      if (!!value && countries?.result?.length > 0) {
+        const country = countries.result.find((c) => c[inputKey] === value);
+
+        if (country && nextResult !== country[displayKey]) {
+          nextResult = String(country[displayKey]);
+        }
+      } else {
+        nextResult = undefined;
+      }
+
+      if (nextResult !== this.result) {
+        this.result = nextResult;
+        this.cdr.markForCheck();
+      }
+    });
+
+  constructor(private customerService: CrmCustomerService, private cdr: ChangeDetectorRef) {}
+
+  transform(value: any, inputKey: keyof CountryDTO = 'isO3166_A_3', displayKey: keyof CountryDTO = 'name'): string {
+    if (this.inputValue.value !== value) {
+      this.inputValue.next(value);
+    }
+
+    if (this.inputKey.value !== inputKey) {
+      this.inputKey.next(inputKey);
+    }
+
+    if (this.displayKey.value !== displayKey) {
+      this.displayKey.next(displayKey);
+    }
+
+    return this.result;
+  }
+
+  ngOnDestroy() {
+    this.countrySubscription.unsubscribe();
+    this.inputValue.complete();
+    this.inputKey.complete();
+    this.displayKey.complete();
+  }
+}
diff --git a/apps/shared/pipes/customer/src/lib/gender.pipe.ts b/apps/shared/pipes/customer/src/lib/gender.pipe.ts
new file mode 100644
index 000000000..a1d2b7f23
--- /dev/null
+++ b/apps/shared/pipes/customer/src/lib/gender.pipe.ts
@@ -0,0 +1,16 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Gender } from '@swagger/crm';
+
+@Pipe({
+  name: 'gender',
+})
+export class GenderPipe implements PipeTransform {
+  readonly genderMap = {
+    2: 'Herr',
+    4: 'Frau',
+  };
+
+  transform(value: Gender): string {
+    return this.genderMap[value] || '';
+  }
+}
diff --git a/apps/shared/pipes/customer/src/lib/order-status.pipe.ts b/apps/shared/pipes/customer/src/lib/order-status.pipe.ts
new file mode 100644
index 000000000..fb4443d0f
--- /dev/null
+++ b/apps/shared/pipes/customer/src/lib/order-status.pipe.ts
@@ -0,0 +1,42 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'orderStatus',
+})
+export class OrderStatusPipe implements PipeTransform {
+  orderStatusText = {
+    1: 'neu',
+    2: '',
+    4: '',
+    8: 'geparkt',
+    16: 'bestellt',
+    32: 'Vorbereitung Versand',
+    64: 'versendet',
+    128: 'eingetroffen',
+    256: 'abgeholt',
+    512: 'storniert (Kunde)',
+    1024: 'storniert',
+    2048: 'storniert (Lieferant)',
+    4096: 'nicht lieferbar',
+    8192: 'nachbestellt',
+    16384: 'zurückgegeben',
+    32768: 'steht zum Download zur Verfügung',
+    65536: 'downloaded',
+    131072: 'nicht abgeholt',
+    262144: 'ans Lager (nicht abgeholt)',
+    524288: 'angefragt',
+    1048576: 'weitergeleitet intern',
+    2097152: 'überfällig',
+    4194304: 'zugestellt',
+    8388608: 'Lieferant ermittelt',
+    16777216: 'derzeit nicht lieferbar',
+    33554432: 'reserviert',
+    67108864: 'zusammengestellt',
+    134217728: 'verpackt',
+    268435456: 'Lieferschein erzeugt',
+  };
+
+  transform(value: any): any {
+    return this.orderStatusText[value] || '';
+  }
+}
diff --git a/apps/shared/pipes/customer/src/lib/order-target.pipe.ts b/apps/shared/pipes/customer/src/lib/order-target.pipe.ts
new file mode 100644
index 000000000..31898a247
--- /dev/null
+++ b/apps/shared/pipes/customer/src/lib/order-target.pipe.ts
@@ -0,0 +1,17 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { OrderListItemDTO } from '@swagger/oms';
+
+@Pipe({ name: 'orderTarget' })
+export class OrderTargetPipe implements PipeTransform {
+  transform(orderListItem: OrderListItemDTO): any {
+    if (orderListItem.orderType === 2) {
+      return 'Versand';
+    }
+
+    if (orderListItem.targetBranchName) {
+      return orderListItem.targetBranchName;
+    }
+
+    return '';
+  }
+}
diff --git a/apps/shared/pipes/customer/src/lib/order-type.pipe.ts b/apps/shared/pipes/customer/src/lib/order-type.pipe.ts
new file mode 100644
index 000000000..495759a1a
--- /dev/null
+++ b/apps/shared/pipes/customer/src/lib/order-type.pipe.ts
@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { OrderType } from '@swagger/oms';
+
+@Pipe({
+  name: 'orderType',
+})
+export class OrderTypePipe implements PipeTransform {
+  orderTypeText = {
+    0: '',
+    1: 'Filiale',
+    2: 'Online',
+    3: 'Download',
+    4: 'Filiale und Download',
+    5: 'Online und Download',
+  };
+
+  transform(value: OrderType): string {
+    return this.orderTypeText[value] || '';
+  }
+}
diff --git a/apps/shared/pipes/customer/src/lib/payment-type.pipe.ts b/apps/shared/pipes/customer/src/lib/payment-type.pipe.ts
new file mode 100644
index 000000000..fdcb01811
--- /dev/null
+++ b/apps/shared/pipes/customer/src/lib/payment-type.pipe.ts
@@ -0,0 +1,29 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'paymentType',
+})
+export class PaymentTypePipe implements PipeTransform {
+  paymentTypeText = {
+    0: '',
+    1: 'bei Abholung',
+    2: 'Kostenfrei',
+    4: 'Bar',
+    8: 'Bankeinzug',
+    16: 'Einzugsermächtigung',
+    32: 'EC-Karte',
+    64: 'Kreditkarte',
+    128: 'Gegen Rechnung',
+    256: 'Vorauskasse',
+    512: 'Gutschein',
+    1024: 'Sammelrechnung',
+    2048: 'PayPal',
+    4069: 'InstantTransfer',
+    8192: 'PayOnDelivery',
+    16384: 'BonusCard',
+  };
+
+  transform(value: any): any {
+    return this.paymentTypeText[value] || '';
+  }
+}
diff --git a/apps/shared/pipes/customer/src/lib/pipes.module.ts b/apps/shared/pipes/customer/src/lib/pipes.module.ts
new file mode 100644
index 000000000..1977bc529
--- /dev/null
+++ b/apps/shared/pipes/customer/src/lib/pipes.module.ts
@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { OrderStatusPipe } from './order-status.pipe';
+import { AddressPipe } from './address.pipe';
+import { CountryPipe } from './country.pipe';
+import { GenderPipe } from './gender.pipe';
+import { OrderTypePipe } from './order-type.pipe';
+import { ProcessingStatusPipe } from './processing-status.pipe';
+import { PaymentTypePipe } from './payment-type.pipe';
+import { ClientChannelPipe } from './client-channel.pipe';
+import { OrderTargetPipe } from './order-target.pipe';
+
+@NgModule({
+  exports: [
+    CountryPipe,
+    GenderPipe,
+    AddressPipe,
+    OrderTypePipe,
+    ProcessingStatusPipe,
+    OrderStatusPipe,
+    PaymentTypePipe,
+    ClientChannelPipe,
+    OrderTargetPipe,
+  ],
+  declarations: [
+    CountryPipe,
+    GenderPipe,
+    AddressPipe,
+    OrderTypePipe,
+    ProcessingStatusPipe,
+    OrderStatusPipe,
+    PaymentTypePipe,
+    ClientChannelPipe,
+    OrderTargetPipe,
+  ],
+})
+export class CustomerPipesModule {}
diff --git a/apps/shared/pipes/customer/src/lib/processing-status.pipe.ts b/apps/shared/pipes/customer/src/lib/processing-status.pipe.ts
new file mode 100644
index 000000000..f7407541e
--- /dev/null
+++ b/apps/shared/pipes/customer/src/lib/processing-status.pipe.ts
@@ -0,0 +1,18 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { OrderProcessingStatus } from '@swagger/oms';
+
+@Pipe({
+  name: 'processingStatus',
+})
+export class ProcessingStatusPipe implements PipeTransform {
+  processingStatusText = {
+    0: '',
+    1: 'offen',
+    2: 'in Bearbeitung',
+    3: 'abgeschlossen',
+  };
+
+  transform(value: OrderProcessingStatus): string {
+    return this.processingStatusText[value] || '';
+  }
+}
diff --git a/apps/shared/pipes/customer/src/public-api.ts b/apps/shared/pipes/customer/src/public-api.ts
new file mode 100644
index 000000000..fbfcb7ce8
--- /dev/null
+++ b/apps/shared/pipes/customer/src/public-api.ts
@@ -0,0 +1,12 @@
+// start:ng42.barrel
+export * from './lib/country.pipe';
+export * from './lib/gender.pipe';
+export * from './lib/address.pipe';
+export * from './lib/order-type.pipe';
+export * from './lib/client-channel.pipe';
+export * from './lib/order-status.pipe';
+export * from './lib/order-target.pipe';
+export * from './lib/payment-type.pipe';
+export * from './lib/processing-status.pipe';
+export * from './lib/pipes.module';
+// end:ng42.barrel
diff --git a/apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.html b/apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.html
index 12c9c5008..76a559e1f 100644
--- a/apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.html
+++ b/apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.html
@@ -18,11 +18,11 @@
       [routerLink]="['/kunde', (process$ | async)?.id, 'cart', 'review']"
       (click)="$event?.preventDefault(); $event?.stopPropagation()"
     >
-      <ui-svg-icon icon="shopping-cart-bold" [size]="22"></ui-svg-icon>
+      <shared-icon icon="shopping-cart-bold" [size]="22"></shared-icon>
       <span class="shopping-cart-count-label ml-2">{{ cartItemCount$ | async }}</span>
     </button>
   </a>
   <button type="button" class="tab-close-btn -ml-4 h-12 w-12 grid justify-center items-center" (click)="close()">
-    <ui-svg-icon icon="close" [size]="28"></ui-svg-icon>
+    <shared-icon icon="close" [size]="28"></shared-icon>
   </button>
 </div>
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 c68a852ef..cbc1e7938 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
@@ -57,14 +57,14 @@
       [class.border-[#AEB7C1]]="!(processes$ | async)?.length"
     >
       <span class="mr-1">{{ (processes$ | async)?.length }}</span>
-      <ui-svg-icon icon="close"></ui-svg-icon>
+      <shared-icon icon="close"></shared-icon>
     </div>
   </button>
 </div>
 
 <ng-template #createProcessButtonContent>
   <div class="bg-brand text-white w-[2.375rem] h-[2.375rem] rounded-full grid items-center justify-center mx-auto mb-1">
-    <ui-svg-icon icon="add"></ui-svg-icon>
+    <shared-icon icon="add"></shared-icon>
   </div>
   <span class="text-brand create-process-btn-text" *ngIf="showStartProcessText$ | async">Vorgang starten</span>
 </ng-template>
diff --git a/apps/shared/shell/src/lib/process-bar/process-bar.module.ts b/apps/shared/shell/src/lib/process-bar/process-bar.module.ts
index 958590ff7..7471991a7 100644
--- a/apps/shared/shell/src/lib/process-bar/process-bar.module.ts
+++ b/apps/shared/shell/src/lib/process-bar/process-bar.module.ts
@@ -7,9 +7,10 @@ import { ShellProcessBarItemComponent } from './process-bar-item/process-bar-ite
 import { RouterModule } from '@angular/router';
 import { CdkMenuModule } from '@angular/cdk/menu';
 import { AuthModule } from '@core/auth';
+import { IconModule } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, RouterModule, CdkMenuModule, AuthModule],
+  imports: [CommonModule, UiIconModule, IconModule, RouterModule, CdkMenuModule, AuthModule],
   exports: [ShellProcessBarComponent],
   declarations: [ShellProcessBarComponent, ShellProcessBarItemComponent],
 })
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 d82f85418..d24d157e0 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
@@ -10,7 +10,7 @@
       routerLinkActive="active"
     >
       <div class="side-menu-group-item-icon">
-        <ui-svg-icon icon="import-contacts"></ui-svg-icon>
+        <shared-icon icon="import-contacts"></shared-icon>
       </div>
       <span class="side-menu-group-item-label">Artikelsuche</span>
     </a>
@@ -23,7 +23,7 @@
         routerLinkActive="active"
       >
         <span class="side-menu-group-item-icon">
-          <ui-svg-icon icon="person"></ui-svg-icon>
+          <shared-icon icon="person"></shared-icon>
         </span>
         <span class="side-menu-group-item-label">
           Kunden
@@ -33,7 +33,7 @@
           [class.side-menu-item-rotate]="customerExpanded"
           (click)="$event.stopPropagation(); $event.preventDefault(); customerExpanded = !customerExpanded"
         >
-          <ui-svg-icon icon="keyboard-arrow-down"></ui-svg-icon>
+          <shared-icon icon="keyboard-arrow-down"></shared-icon>
         </button>
       </a>
 
@@ -71,7 +71,7 @@
       routerLinkActive="active"
     >
       <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="unarchive"></ui-svg-icon>
+        <shared-icon icon="unarchive"></shared-icon>
       </span>
       <span class="side-menu-group-item-label">
         Warenausgabe
@@ -86,7 +86,7 @@
       routerLinkActive="active"
     >
       <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="deployed-code"></ui-svg-icon>
+        <shared-icon icon="deployed-code"></shared-icon>
       </span>
       <span class="side-menu-group-item-label">
         Bestellungen
@@ -109,7 +109,7 @@
       routerLinkActive="active"
     >
       <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="event-available"></ui-svg-icon>
+        <shared-icon icon="event-available"></shared-icon>
       </span>
       <span class="side-menu-group-item-label">
         Kalender
@@ -124,7 +124,7 @@
       routerLinkActive="active"
     >
       <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="shape-outline"></ui-svg-icon>
+        <shared-icon icon="shape-outline"></shared-icon>
       </span>
       <span class="side-menu-group-item-label">
         Sortiment
@@ -141,7 +141,7 @@
         routerLinkActive="active"
       >
         <span class="side-menu-group-item-icon">
-          <ui-svg-icon icon="isa-abholfach"></ui-svg-icon>
+          <shared-icon icon="isa-abholfach"></shared-icon>
         </span>
         <span class="side-menu-group-item-label">
           Abholfach
@@ -151,7 +151,7 @@
           [class.side-menu-item-rotate]="goodsInExpanded"
           (click)="$event.stopPropagation(); $event.preventDefault(); goodsInExpanded = !goodsInExpanded"
         >
-          <ui-svg-icon icon="keyboard-arrow-down"></ui-svg-icon>
+          <shared-icon icon="keyboard-arrow-down"></shared-icon>
         </button>
       </a>
 
@@ -223,7 +223,7 @@
       routerLinkActive="active"
     >
       <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="assignment-return"></ui-svg-icon>
+        <shared-icon icon="assignment-return"></shared-icon>
       </span>
       <span class="side-menu-group-item-label">
         Remission
@@ -239,7 +239,7 @@
       routerLinkActive="active"
     >
       <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="clipboard-check-outline"></ui-svg-icon>
+        <shared-icon icon="clipboard-check-outline"></shared-icon>
       </span>
       <span class="side-menu-group-item-label">
         Wareneingang
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 78342e46f..590b8e14c 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
@@ -7,11 +7,11 @@ import { ApplicationProcess, ApplicationService } from '@core/application';
 import { WrongDestinationModalService } from '@shared/modals/wrong-destination-modal';
 import { of } from 'rxjs';
 import { RouterTestingModule } from '@angular/router/testing';
-import { IconRegistry } from '@ui/icon';
 import { Router } from '@angular/router';
 import { ProductCatalogNavigationService } from '@shared/services';
 import { Config } from '@core/config';
 import { BreadcrumbService } from '@core/breadcrumb';
+import { EmptyIconLoader, IconLoader, provideIcon } from '@shared/components/icon';
 
 describe('ShellSideMenuComponent', () => {
   let spectator: Spectator<ShellSideMenuComponent>;
@@ -19,8 +19,9 @@ describe('ShellSideMenuComponent', () => {
   const createComponent = createComponentFactory({
     component: ShellSideMenuComponent,
     imports: [RouterTestingModule],
-    mocks: [ShellService, AuthService, WrongDestinationModalService, IconRegistry, Config, BreadcrumbService],
+    mocks: [ShellService, AuthService, WrongDestinationModalService, Config, BreadcrumbService],
     providers: [
+      provideIcon({ provide: IconLoader, useClass: EmptyIconLoader }),
       {
         provide: ApplicationService,
         useValue: jasmine.createSpyObj<ApplicationService>(
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 4291c9108..f2c2ee5cf 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
@@ -9,9 +9,9 @@ import { WrongDestinationModalService } from '@shared/modals/wrong-destination-m
 import { EnvironmentService } from '@core/environment';
 import { ProductCatalogNavigationService } from '@shared/services';
 import { CommonModule, DOCUMENT } from '@angular/common';
-import { UiIconModule } from '@ui/icon';
 import { Config } from '@core/config';
 import { BreadcrumbService } from '@core/breadcrumb';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'shell-side-menu',
@@ -19,7 +19,7 @@ import { BreadcrumbService } from '@core/breadcrumb';
   styleUrls: ['side-menu.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, UiIconModule, RouterModule, AuthModule],
+  imports: [CommonModule, IconComponent, RouterModule, AuthModule],
 })
 export class ShellSideMenuComponent {
   branchKey$ = this._stockService.StockCurrentBranch().pipe(
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 536bd16e8..d3af35d4f 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,23 +1,23 @@
 <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-small:hidden">
-    <ui-svg-icon [icon]="menuIcon$ | async"></ui-svg-icon>
+    <shared-icon [icon]="menuIcon$ | async"></shared-icon>
   </button>
   <span class="text-[1.625rem] leading-[2.25rem] font-bold" *ngIf="title$ | async; let title">
     {{ title }}
   </span>
   <div class="grow"></div>
 
-  <a class="btn btn-white" [routerLink]="['/kunde/dashboard']"> <ui-svg-icon icon="dashboard"></ui-svg-icon> Dashboard </a>
+  <a class="btn btn-white" [routerLink]="['/kunde/dashboard']"> <shared-icon icon="dashboard"></shared-icon> Dashboard </a>
 
   <button type="button" class="btn btn-white" (click)="logout()">
-    <ui-svg-icon icon="logout"></ui-svg-icon>
+    <shared-icon icon="logout"></shared-icon>
     <strong>{{ branchKey$ | async }}</strong>
   </button>
 
   <div class="w-4"></div>
 
   <button class="btn btn-icon btn-light relative" [disabled]="(notificationCount$ | async) === 0" (click)="openNotifications()">
-    <ui-svg-icon icon="notifications"></ui-svg-icon>
+    <shared-icon icon="notifications"></shared-icon>
     <div class="grid absolute -top-2 -right-2 bg-brand text-white rounded-full w-6 h-6" *ngIf="notificationCount$ | async; let count">
       <span class="place-self-center text-xs font-bold">{{ count }}</span>
     </div>
diff --git a/apps/shared/shell/src/lib/top-bar/top-bar.module.ts b/apps/shared/shell/src/lib/top-bar/top-bar.module.ts
index 0031d2960..44a6b5467 100644
--- a/apps/shared/shell/src/lib/top-bar/top-bar.module.ts
+++ b/apps/shared/shell/src/lib/top-bar/top-bar.module.ts
@@ -2,12 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { ShellTopBarComponent } from './top-bar.component';
-import { UiIconModule } from '@ui/icon';
 import { AuthModule } from '@core/auth';
 import { RouterModule } from '@angular/router';
+import { IconModule } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, AuthModule, RouterModule],
+  imports: [CommonModule, IconModule, AuthModule, RouterModule],
   exports: [ShellTopBarComponent],
   declarations: [ShellTopBarComponent],
 })
diff --git a/apps/ui/checkbox/src/lib/checkbox.component.html b/apps/ui/checkbox/src/lib/checkbox.component.html
index d12e3ae74..21acef997 100644
--- a/apps/ui/checkbox/src/lib/checkbox.component.html
+++ b/apps/ui/checkbox/src/lib/checkbox.component.html
@@ -1,8 +1,8 @@
 <ui-icon *ngIf="showCheckbox && !indeterminate" size="20px" [icon]="icon"></ui-icon>
-<ui-svg-icon
+<shared-icon
   *ngIf="indeterminate"
   [size]="16"
   icon="mat-remove"
   class="border-2 border-solid border-active-customer rounded text-active-customer"
-></ui-svg-icon>
+></shared-icon>
 <ng-content></ng-content>
diff --git a/apps/ui/checkbox/src/lib/checkbox.module.ts b/apps/ui/checkbox/src/lib/checkbox.module.ts
index d3ddd1ae3..557422c92 100644
--- a/apps/ui/checkbox/src/lib/checkbox.module.ts
+++ b/apps/ui/checkbox/src/lib/checkbox.module.ts
@@ -3,10 +3,11 @@ import { NgModule } from '@angular/core';
 import { UiIconModule } from '@ui/icon';
 import { UiCheckboxComponent } from './checkbox.component';
 import { UiCheckboxGroupComponent } from './checkbox-group.component';
+import { IconModule } from '@shared/components/icon';
 
 @NgModule({
   declarations: [UiCheckboxComponent, UiCheckboxGroupComponent],
-  imports: [CommonModule, UiIconModule],
+  imports: [CommonModule, UiIconModule, IconModule],
   exports: [UiCheckboxComponent, UiCheckboxGroupComponent],
 })
 export class UiCheckboxModule {}
diff --git a/apps/ui/searchbox/src/lib/next/searchbox.component.html b/apps/ui/searchbox/src/lib/next/searchbox.component.html
index 52b20d875..506ac90c9 100644
--- a/apps/ui/searchbox/src/lib/next/searchbox.component.html
+++ b/apps/ui/searchbox/src/lib/next/searchbox.component.html
@@ -23,7 +23,7 @@
       <ui-icon icon="search" size="28px"></ui-icon>
     </button>
     <button tabindex="0" class="search-button scan" *ngIf="canScan" (click)="startScan()">
-      <ui-svg-icon icon="barcode-scan" [size]="32"></ui-svg-icon>
+      <shared-icon icon="barcode-scan" [size]="32"></shared-icon>
     </button>
   </ng-container>
 
diff --git a/apps/ui/searchbox/src/lib/next/searchbox.component.scss b/apps/ui/searchbox/src/lib/next/searchbox.component.scss
index d807a01fa..c5d9e949c 100644
--- a/apps/ui/searchbox/src/lib/next/searchbox.component.scss
+++ b/apps/ui/searchbox/src/lib/next/searchbox.component.scss
@@ -28,7 +28,7 @@
     &.scan {
       @apply bg-brand;
 
-      ui-svg-icon {
+      shared-icon {
         @apply text-white;
       }
     }
diff --git a/apps/ui/searchbox/src/lib/next/searchbox.module.ts b/apps/ui/searchbox/src/lib/next/searchbox.module.ts
index 1b9c37d5b..137f53ac1 100644
--- a/apps/ui/searchbox/src/lib/next/searchbox.module.ts
+++ b/apps/ui/searchbox/src/lib/next/searchbox.module.ts
@@ -2,11 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { UiSearchboxNextComponent } from './searchbox.component';
-import { UiIconModule } from '@ui/icon';
 import { FormsModule } from '@angular/forms';
+import { IconModule } from '@shared/components/icon';
+import { UiIconModule } from '@ui/icon';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, FormsModule],
+  imports: [CommonModule, UiIconModule, IconModule, FormsModule],
   exports: [UiSearchboxNextComponent],
   declarations: [UiSearchboxNextComponent],
 })
diff --git a/package-lock.json b/package-lock.json
index c9887dca1..ca9a4fb92 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -26,7 +26,7 @@
         "@ngrx/entity": "^15.0.0",
         "@ngrx/store": "^15.0.0",
         "@ngrx/store-devtools": "^15.0.0",
-        "@paragondata/ngx-ui": "^12.0.0-beta.23",
+        "@paragondata/ngx-ui": "^12.0.0-beta.91",
         "angular-oauth2-oidc": "^15.0.1",
         "angular-oauth2-oidc-jwks": "^15.0.1",
         "core-js": "^2.6.5",
@@ -93,6 +93,19 @@
         "npm": "8.x"
       }
     },
+    "../../@paragondata/ngx-ui/dist/paragondata/ngx-ui": {
+      "name": "@paragondata/ngx-ui",
+      "version": "0.0.0-watch+1683643023778",
+      "extraneous": true,
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": ">= 13.0.0 < 16.0.0",
+        "@angular/common": ">= 13.0.0 < 16.0.0",
+        "@angular/core": ">= 13.0.0 < 16.0.0"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.2.0",
       "license": "Apache-2.0",
@@ -2710,7 +2723,17 @@
       }
     },
     "node_modules/@paragondata/ngx-ui": {
-      "version": "12.0.0-beta.25"
+      "version": "12.0.0-beta.91",
+      "resolved": "https://npm.pkg.github.com/download/@paragondata/ngx-ui/12.0.0-beta.91/18864a278241d4874fc1ab1e41b8d43330721ffb",
+      "integrity": "sha512-Ran2ZOw7tNhSJwaBJPDUwGwxfC/bpaVrUum+Hn7Q/RfIuC3PUmFSJkBaZdAL4eyOASIWD6ZrmNxb2qcVCo7ctA==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular/cdk": ">= 13.0.0 < 16.0.0",
+        "@angular/common": ">= 13.0.0 < 16.0.0",
+        "@angular/core": ">= 13.0.0 < 16.0.0"
+      }
     },
     "node_modules/@rollup/plugin-json": {
       "version": "5.0.2",
@@ -18023,7 +18046,12 @@
       }
     },
     "@paragondata/ngx-ui": {
-      "version": "12.0.0-beta.25"
+      "version": "12.0.0-beta.91",
+      "resolved": "https://npm.pkg.github.com/download/@paragondata/ngx-ui/12.0.0-beta.91/18864a278241d4874fc1ab1e41b8d43330721ffb",
+      "integrity": "sha512-Ran2ZOw7tNhSJwaBJPDUwGwxfC/bpaVrUum+Hn7Q/RfIuC3PUmFSJkBaZdAL4eyOASIWD6ZrmNxb2qcVCo7ctA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
     },
     "@rollup/plugin-json": {
       "version": "5.0.2",
diff --git a/package.json b/package.json
index b1cb97785..5ddeadeb4 100644
--- a/package.json
+++ b/package.json
@@ -80,7 +80,7 @@
     "@ngrx/entity": "^15.0.0",
     "@ngrx/store": "^15.0.0",
     "@ngrx/store-devtools": "^15.0.0",
-    "@paragondata/ngx-ui": "^12.0.0-beta.23",
+    "@paragondata/ngx-ui": "^12.0.0-beta.91",
     "angular-oauth2-oidc": "^15.0.1",
     "angular-oauth2-oidc-jwks": "^15.0.1",
     "core-js": "^2.6.5",
@@ -146,4 +146,4 @@
     "node": "18.x",
     "npm": "8.x"
   }
-}
\ No newline at end of file
+}
diff --git a/paragon-preset.js b/paragon-preset.js
new file mode 100644
index 000000000..5cbe3ab1d
--- /dev/null
+++ b/paragon-preset.js
@@ -0,0 +1,81 @@
+//the preset extends the default tailwind config
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+module.exports = {
+  theme: {
+    extend: {
+      colors: {
+        base: {
+          content: 'var(--par-base-content)',
+          DEFAULT: 'var(--par-base)',
+        },
+        primary: {
+          300: 'var(--par-primary-300)',
+          200: 'var(--par-primary-200)',
+          100: 'var(--par-primary-100)',
+        },
+        subtle: {
+          300: 'var(--par-subtle-300)',
+          200: 'var(--par-subtle-200)',
+          100: 'var(--par-subtle-100)',
+          50: 'var(--par-subtle-50)',
+        },
+        disabled: {
+          content: 'var(--par-disabled-content)',
+          DEFAULT: 'var(--par-disabled)',
+        },
+        error: {
+          content: 'var(--par-error-content)',
+          DEFAULT: 'var(--par-error)',
+        },
+        success: {
+          content: 'var(--par-success-content)',
+          DEFAULT: 'var(--par-success)',
+        },
+        warning: {
+          content: 'var(--par-warning-content)',
+          DEFAULT: 'var(--par-warning)',
+        },
+        secondary: {
+          300: 'var(--par-secondary-300)',
+          200: 'var(--par-secondary-200)',
+          100: 'var(--par-secondary-100)',
+        },
+        tertiary: {
+          300: 'var(--par-tertiary-300)',
+          200: 'var(--par-tertiary-200)',
+          100: 'var(--par-tertiary-100)',
+        },
+        random: {
+          1: 'var(--par-random-1)',
+          2: 'var(--par-random-2)',
+        },
+      },
+      boxShadow: {
+        input: 'var( --par-shadow-input)',
+        button: 'var( --par-shadow-button)',
+      },
+      spacing: {
+        'radio-check': '19px',
+        'radio-ring': '4px',
+        input: '3.25rem',
+        inputButton: '3rem',
+        inputPaddingButton: '64px',
+      },
+      borderWidth: {
+        medium: '1.5px',
+      },
+      borderRadius: {
+        checkbox: 'var(--par-border-radius-checkbox)',
+        input: 'var(--par-border-radius-input)',
+        button: 'var(--par-border-radius-button)',
+      },
+      scale: {
+        '98': '98%',
+      },
+      fontFamily: {
+        sans: ['var(--par-font-family)', ...defaultTheme.fontFamily.sans],
+      },
+    },
+  },
+};
diff --git a/tailwind-plugins/button.plugin.js b/tailwind-plugins/button.plugin.js
index ad3f44001..fe9906715 100644
--- a/tailwind-plugins/button.plugin.js
+++ b/tailwind-plugins/button.plugin.js
@@ -31,6 +31,11 @@ module.exports = plugin(function ({ addComponents, theme, addBase, addUtilities
       '--btn-active-background-color': theme('colors.white'),
       '--btn-active-color': theme('colors.black'),
     },
+    '.btn-label': {
+      '--btn-background-color': 'transparent',
+      '--btn-hover-background-color': 'transparent',
+      '--btn-hover-color': 'inherit',
+    },
   });
 
   for (const key in theme('colors.accent')) {
diff --git a/tailwind.config.js b/tailwind.config.js
index 98315efa6..e70f33e2a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -92,12 +92,16 @@ module.exports = {
         'accent-darkblue': '#557596',
 
         background: {
-          DEFAULT: '#F5F5F5',
+          DEFAULT: '#EDEFF0',
           content: '#000000',
         },
         surface: {
           DEFAULT: '#ffffff',
           content: '#000000',
+          2: {
+            DEFAULT: '#F5F7FA',
+            content: '#000000',
+          },
         },
         components: {
           menu: {