From 8f4fcb5632b9e1543e0236f82457f90e73f8acfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Kurczewski?= <michalkurczewski94@gmail.com>
Date: Tue, 8 Oct 2024 10:29:05 +0200
Subject: [PATCH] [CP-2995] Contacts list (#2079)

Co-authored-by: Daniel Karski <daniel.karski5q@gmail.com>
---
 apps/mudita-center-e2e/wdio.conf.js           | 346 -------------
 apps/mudita-center/src/app.tsx                |   1 +
 apps/mudita-center/src/wdyr.ts                |  13 +
 .../components/core/text/text.component.tsx   |   2 +-
 .../header/__snapshots__/header.test.tsx.snap |   1 +
 .../rest/header/header.component.tsx          |   1 +
 .../__deprecated__/renderer/store/reducers.ts |   2 +
 .../contact-support-modal-error.component.tsx |  10 +-
 ...ontact-support-modal-success.component.tsx |  10 +-
 .../contact-edit/contact-edit.component.tsx   |  36 +-
 .../api-device-initialization-modal-flow.tsx  |   3 +-
 .../template-form/template-form.component.tsx |   5 +-
 .../entities-config.validator.test.ts         |  14 +
 .../lib/entities/entities-config.validator.ts |  89 +++-
 .../lib/feature/data-provider-config.test.ts  | 140 +++++-
 .../src/lib/feature/data-provider-config.ts   |  78 ++-
 .../models/src/lib/feature/extra-config.ts    |  35 ++
 .../src/lib/feature/feature-config.test.ts    |  29 +-
 .../models/src/lib/feature/feature-config.ts  |   2 +
 libs/device/models/src/lib/feature/index.ts   |   3 +-
 .../feature/src/lib/generic-toasts.tsx        |  57 +++
 .../feature/src/lib/generic-view.tsx          |  16 +-
 .../src/lib/seed-data/contacts-seed-data.ts   | 464 ++++++++++++++++++
 .../feature/src/lib/setup-component.tsx       | 317 ++++++++----
 .../feature/src/lib/use-dev-console.ts        |  15 +
 .../src/lib/use-dev-views/use-dev-views.tsx   |   3 +-
 .../lib/use-dev-views/views/contacts-view.ts  | 231 +--------
 libs/generic-view/models/src/index.ts         |  26 +-
 .../generic-view/models/src/lib/app-portal.ts |  20 +
 .../models/src/lib/button-primary.ts          |   6 +-
 .../models/src/lib/button-text.ts             |   8 +-
 .../models/src/lib/common-validators.ts       |  63 ++-
 .../models/src/lib/conditional-renderer.ts    |  19 +
 libs/generic-view/models/src/lib/device.ts    |  29 +-
 .../models/src/lib/entities-loader.ts         |   1 +
 .../models/src/lib/form-checkbox-input.ts     |   2 +
 libs/generic-view/models/src/lib/form.ts      |   2 +
 .../models/src/lib/format-message.ts          |  27 +
 .../models/src/lib/modal-close-button.ts      |   4 +-
 .../generic-view/models/src/lib/paragraphs.ts |  26 +-
 .../models/src/lib/selection-manager.ts       |  18 +
 .../generic-view/models/src/lib/table-cell.ts |   2 +-
 libs/generic-view/models/src/lib/table.ts     |  10 +-
 libs/generic-view/models/src/lib/toast.ts     |  22 +
 libs/generic-view/store/src/index.ts          |   8 +
 .../store/src/lib/action-names.ts             |   8 +-
 .../lib/entities/create-entity-data.action.ts |   5 +-
 .../entities/delete-entities-data.action.ts   |  39 +-
 .../lib/entities/get-entities-data.action.ts  |  17 +-
 .../entities/helpers/compute-field.test.ts    | 451 +++++++++++++++++
 .../src/lib/entities/helpers/compute-field.ts | 106 ++++
 .../lib/entities/helpers/enhance-entity.ts    |  22 +
 .../store/src/lib/entities/reducer.ts         |   1 +
 .../lib/entities/update-entity-data.action.ts |   5 +-
 .../store/src/lib/selectors/component.ts      |   5 +
 .../store/src/lib/selectors/entities.ts       |  28 +-
 .../store/src/lib/selectors/index.ts          |   1 +
 .../store/src/lib/selectors/view.ts           |  10 +
 .../store/src/lib/toasts/actions.ts           |  13 +
 .../store/src/lib/toasts/open-toast.action.ts |  21 +
 .../store/src/lib/toasts/reducer.ts           |  30 ++
 .../store/src/lib/use-form-field.ts           |  55 +++
 .../store/src/lib/use-form-register.ts        |  43 ++
 .../store/src/lib/views/actions.ts            |  25 +-
 .../store/src/lib/views/reducer.ts            |  51 +-
 libs/generic-view/theme/src/lib/font-size.ts  |   1 +
 .../generic-view/theme/src/lib/line-height.ts |   1 +
 libs/generic-view/ui/src/index.ts             |   5 +-
 .../lib/buttons/button-base/button-base.tsx   |   8 +-
 .../button-base/use-button-action.test.ts     |  77 ++-
 .../buttons/button-base/use-button-action.ts  | 176 ++++---
 .../ui/src/lib/buttons/button-primary.tsx     |  22 +-
 .../ui/src/lib/buttons/button-secondary.tsx   |  10 +-
 .../ui/src/lib/buttons/button-text.tsx        |  40 +-
 .../ui/src/lib/data-rows/app-portal.tsx       |  14 +
 .../ui/src/lib/data-rows/badge.tsx            |  15 +-
 .../ui/src/lib/data-rows/data-rows.ts         |   3 +
 .../ui/src/lib/data-rows/text-formatted.tsx   |   2 +-
 .../ui/src/lib/entities/entities-loader.tsx   |  49 +-
 .../generated/mc-import-contacts-button.ts    |  12 +-
 .../ui/src/lib/icon/get-icon.helper.tsx       |   2 +
 .../ui/src/lib/icon/svg/delete.svg            |   5 +
 .../lib/interactive/conditional-renderer.tsx  |  17 +
 .../ui/src/lib/interactive/form/form.tsx      |  12 +-
 .../interactive/form/input/checkbox-input.tsx | 178 ++++++-
 .../ui/src/lib/interactive/format-message.tsx |  34 ++
 .../ui/src/lib/interactive/interactive.ts     |   9 +
 .../modal/helpers/modal-close-button.tsx      |   4 +-
 .../modal/helpers/modal-title-icon.tsx        |  13 +-
 .../ui/src/lib/interactive/modal/modal.tsx    |   2 +-
 .../src/lib/interactive/modal/text-modal.tsx  |   6 +-
 .../ui/src/lib/interactive/toast/toast.tsx    | 123 +++++
 .../interactive/tooltip/tooltip-helpers.tsx   |  48 ++
 .../src/lib/interactive/tooltip/tooltip.tsx   | 192 +++++++-
 .../backup-restore/backup-restore-error.tsx   |   5 +-
 .../backup-restore-password.tsx               |   5 +-
 .../backup-restore/backup-restore-select.tsx  |   7 +-
 .../backup-restore/backup-restore-success.tsx |  10 +-
 .../backup-restore/backup-restore.tsx         |   8 +-
 .../lib/predefined/backup/backup-create.tsx   |   8 +-
 .../lib/predefined/backup/backup-error.tsx    |   5 +-
 .../lib/predefined/backup/backup-features.tsx |   8 +-
 .../lib/predefined/backup/backup-password.tsx |   7 +-
 .../lib/predefined/backup/backup-success.tsx  |   7 +-
 .../components/cancel-confirm-modal.tsx       |   7 +-
 .../data-migration/components/device-card.tsx |   2 +-
 .../data-migration/components/error-modal.tsx |   5 +-
 .../components/features-selector.tsx          |   4 +
 .../components/progress-modal.tsx             |   6 +-
 .../components/success-modal.tsx              |   5 +-
 .../components/transfer-cancelled-modal.tsx   |   5 +-
 .../data-migration/transfer-setup.tsx         |  10 +-
 .../import-contacts/import-contacts-error.tsx |   5 +-
 .../import-contacts/import-contacts-list.tsx  |  46 +-
 .../import-contacts-progress.tsx              |  25 +-
 .../import-contacts-provider.tsx              |  50 +-
 .../import-contacts-success.tsx               |   5 +-
 .../import-contacts/import-contacts.tsx       |   6 +-
 .../ui/src/lib/predefined/predefined.ts       |   3 +
 .../recovery-mode/recovery-mode.tsx           |  10 +-
 .../src/lib/predefined/selection-manager.tsx  |  23 +
 .../ui/src/lib/shared/spinner-loader.tsx      |  14 +-
 .../ui/src/lib/table/table-cell.tsx           |  15 +-
 libs/generic-view/ui/src/lib/table/table.tsx  |  51 +-
 libs/generic-view/ui/src/lib/texts/index.ts   |  12 +-
 .../ui/src/lib/texts/paragraphs.tsx           |  84 +++-
 libs/generic-view/utils/src/index.ts          |   4 +-
 .../data-provider-filter.test.ts              |  32 +-
 .../data-provider-filter.ts                   |  10 +-
 .../data-provider-sort.test.ts                |  59 ++-
 .../data-provider-sort.ts                     |  18 +-
 .../src/lib/forms-provider/forms-provider.tsx |  80 +++
 .../utils/src/lib/models/api-views.types.ts   |   3 +-
 .../utils/src/lib/models/button.types.ts      |  54 --
 .../utils/src/lib/models/icons.types.ts       |   1 +
 .../utils/src/lib/use-current-view-key.ts     |  14 +
 .../mc-about/list-modal/list-modal.test.ts    |  10 +-
 .../src/lib/mc-about/list-modal/list-modal.ts |  12 +-
 .../section-backup/section-backup.ts          |  24 +-
 .../src/lib/mc-overview/summary/summary.ts    |  10 +-
 .../ui/src/lib/components/article-content.tsx |  10 +-
 .../ui/src/lib/components/article-footer.tsx  |  10 +-
 .../ui/src/lib/components/article-header.tsx  |  10 +-
 .../ui/src/lib/components/help-footer.tsx     |  10 +-
 package-lock.json                             |  25 +-
 package.json                                  |   3 +-
 146 files changed, 3740 insertions(+), 1354 deletions(-)
 delete mode 100644 apps/mudita-center-e2e/wdio.conf.js
 create mode 100644 apps/mudita-center/src/wdyr.ts
 create mode 100644 libs/device/models/src/lib/feature/extra-config.ts
 create mode 100644 libs/generic-view/feature/src/lib/generic-toasts.tsx
 create mode 100644 libs/generic-view/feature/src/lib/seed-data/contacts-seed-data.ts
 create mode 100644 libs/generic-view/models/src/lib/app-portal.ts
 create mode 100644 libs/generic-view/models/src/lib/conditional-renderer.ts
 create mode 100644 libs/generic-view/models/src/lib/format-message.ts
 create mode 100644 libs/generic-view/models/src/lib/selection-manager.ts
 create mode 100644 libs/generic-view/models/src/lib/toast.ts
 create mode 100644 libs/generic-view/store/src/lib/entities/helpers/compute-field.test.ts
 create mode 100644 libs/generic-view/store/src/lib/entities/helpers/compute-field.ts
 create mode 100644 libs/generic-view/store/src/lib/entities/helpers/enhance-entity.ts
 create mode 100644 libs/generic-view/store/src/lib/toasts/actions.ts
 create mode 100644 libs/generic-view/store/src/lib/toasts/open-toast.action.ts
 create mode 100644 libs/generic-view/store/src/lib/toasts/reducer.ts
 create mode 100644 libs/generic-view/store/src/lib/use-form-field.ts
 create mode 100644 libs/generic-view/store/src/lib/use-form-register.ts
 create mode 100644 libs/generic-view/ui/src/lib/data-rows/app-portal.tsx
 create mode 100644 libs/generic-view/ui/src/lib/icon/svg/delete.svg
 create mode 100644 libs/generic-view/ui/src/lib/interactive/conditional-renderer.tsx
 create mode 100644 libs/generic-view/ui/src/lib/interactive/format-message.tsx
 create mode 100644 libs/generic-view/ui/src/lib/interactive/toast/toast.tsx
 create mode 100644 libs/generic-view/ui/src/lib/interactive/tooltip/tooltip-helpers.tsx
 create mode 100644 libs/generic-view/ui/src/lib/predefined/selection-manager.tsx
 create mode 100644 libs/generic-view/utils/src/lib/forms-provider/forms-provider.tsx
 delete mode 100644 libs/generic-view/utils/src/lib/models/button.types.ts
 create mode 100644 libs/generic-view/utils/src/lib/use-current-view-key.ts

diff --git a/apps/mudita-center-e2e/wdio.conf.js b/apps/mudita-center-e2e/wdio.conf.js
deleted file mode 100644
index 6f1e461bb9..0000000000
--- a/apps/mudita-center-e2e/wdio.conf.js
+++ /dev/null
@@ -1,346 +0,0 @@
-"use strict";
-/**
- * Copyright (c) Mudita sp. z o.o. All rights reserved.
- * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.config = void 0;
-var dotenv = require("dotenv");
-var test_filenames_1 = require("./src/test-filenames");
-dotenv.config();
-exports.config = {
-    //
-    // ====================
-    // Runner Configuration
-    // ====================
-    //
-    //
-    // =====================
-    // ts-node Configurations
-    // =====================
-    //
-    // You can write tests using TypeScript to get autocompletion and type safety.
-    // You will need typescript and ts-node installed as devDependencies.
-    // WebdriverIO will automatically detect if these dependencies are installed
-    // and will compile your config and tests for you.
-    // If you need to configure how ts-node runs please use the
-    // environment variables for ts-node or use wdio config's autoCompileOpts section.
-    //
-    autoCompileOpts: {
-        autoCompile: true,
-        // see https://github.com/TypeStrong/ts-node#cli-and-programmatic-options
-        // for all available options
-        tsNodeOpts: {
-            transpileOnly: true,
-            project: "tsconfig.json",
-        },
-    },
-    //
-    // ==================
-    // Specify Test Files
-    // ==================
-    // Define which test specs should run. The pattern is relative to the directory
-    // from which `wdio` was called.
-    //
-    // The specs are defined as an array of spec files (optionally using wildcards
-    // that will be expanded). The test for each spec file will be run in a separate
-    // worker process. In order to have a group of spec files run in the same worker
-    // process simply enclose them in an array within the specs array.
-    //
-    // If you are calling `wdio` from an NPM script (see https://docs.npmjs.com/cli/run-script),
-    // then the current working directory is where your `package.json` resides, so `wdio`
-    // will be called from there.
-    //
-    specs: [
-        (0, test_filenames_1.toRelativePath)(test_filenames_1.TestFilesPaths.messagesInAppNavigationTest),
-        (0, test_filenames_1.toRelativePath)(test_filenames_1.TestFilesPaths.helpWindowCheckTest),
-        (0, test_filenames_1.toRelativePath)(test_filenames_1.TestFilesPaths.mcCheckForUpdatesTest),
-        (0, test_filenames_1.toRelativePath)(test_filenames_1.TestFilesPaths.homePageTestDeviceNotConnectedTest)
-    ],
-    suites: {
-        standalone: [
-            (0, test_filenames_1.toRelativePath)(test_filenames_1.TestFilesPaths.helpWindowCheckTest),
-            (0, test_filenames_1.toRelativePath)(test_filenames_1.TestFilesPaths.mcCheckForUpdatesTest),
-            (0, test_filenames_1.toRelativePath)(test_filenames_1.TestFilesPaths.homePageTestDeviceNotConnectedTest)
-        ],
-        multidevicePureHarmony: [],
-        multideviceSingleHarmony: [],
-        multideviceSinglePure: [],
-        multideviceSingleKompakt: [],
-        multidevicePureKompakt: [],
-        multideviceHarmonyKompakt: [],
-        multideviceGeneral: [],
-        harmony: [],
-        pure: [
-            (0, test_filenames_1.toRelativePath)(test_filenames_1.TestFilesPaths.messagesInAppNavigationTest),
-        ],
-        kompakt: [],
-        deviceUpdate: [],
-        cicd: [
-            (0, test_filenames_1.toRelativePath)(test_filenames_1.TestFilesPaths.helpWindowCheckTest),
-            (0, test_filenames_1.toRelativePath)(test_filenames_1.TestFilesPaths.mcCheckForUpdatesTest),
-            (0, test_filenames_1.toRelativePath)(test_filenames_1.TestFilesPaths.homePageTestDeviceNotConnectedTest)
-        ],
-    },
-    // Patterns to exclude.
-    exclude: [
-    // 'path/to/excluded/files'
-    ],
-    filesToWatch: ["./src/specs/**/*.e2e.ts"],
-    //
-    // ============
-    // Capabilities
-    // ============
-    // Define your capabilities here. WebdriverIO can run multiple capabilities at the same
-    // time. Depending on the number of capabilities, WebdriverIO launches several test
-    // sessions. Within your capabilities you can overwrite the spec and exclude options in
-    // order to group specific specs to a specific capability.
-    //
-    // First, you can define how many instances should be started at the same time. Let's
-    // say you have 3 different capabilities (Chrome, Firefox, and Safari) and you have
-    // set maxInstances to 1; wdio will spawn 3 processes. Therefore, if you have 10 spec
-    // files and you set maxInstances to 10, all spec files will get tested at the same time
-    // and 30 processes will get spawned. The property handles how many capabilities
-    // from the same test should run tests.
-    //
-    maxInstances: 1,
-    //
-    // If you have trouble getting all important capabilities together, check out the
-    // Sauce Labs platform configurator - a great tool to configure your capabilities:
-    // https://saucelabs.com/platform/platform-configurator
-    //
-    capabilities: [
-        {
-            // maxInstances can get overwritten per capability. So if you have an in-house Selenium
-            // grid with only 5 firefox instances available you can make sure that not more than
-            // 5 instances get started at a time.
-            // maxInstances: 5,
-            //
-            browserName: "chrome",
-            "goog:chromeOptions": {
-                binary: process.env.TEST_BINARY_PATH,
-                args: [],
-            },
-            // If outputDir is provided WebdriverIO can capture driver session logs
-            // it is possible to configure which logTypes to include/exclude.
-            // excludeDriverLogs: ['*'], // pass '*' to exclude all driver session logs
-            // excludeDriverLogs: ['bugreport', 'server'],
-        },
-    ],
-    //
-    // ===================
-    // Test Configurations
-    // ===================
-    // Define all options that are relevant for the WebdriverIO instance here
-    //
-    // Level of logging verbosity: trace | debug | info | warn | error | silent
-    logLevel: process.env.TEST_LOG_LEVEL || "info",
-    //
-    // Set specific log levels per logger
-    // loggers:
-    // - webdriver, webdriverio
-    // - @wdio/browserstack-service, @wdio/devtools-service, @wdio/sauce-service
-    // - @wdio/mocha-framework, @wdio/jasmine-framework
-    // - @wdio/local-runner
-    // - @wdio/sumologic-reporter
-    // - @wdio/cli, @wdio/config, @wdio/utils
-    // Level of logging verbosity: trace | debug | info | warn | error | silent
-    // logLevels: {
-    //     webdriver: 'info',
-    //     '@wdio/appium-service': 'info'
-    // },
-    //
-    // If you only want to run your tests until a specific amount of tests have failed use
-    // bail (default is 0 - don't bail, run all tests).
-    bail: 0,
-    //
-    // Set a base URL in order to shorten url command calls. If your `url` parameter starts
-    // with `/`, the base url gets prepended, not including the path portion of your baseUrl.
-    // If your `url` parameter starts without a scheme or `/` (like `some/path`), the base url
-    // gets prepended directly.
-    baseUrl: "http://localhost",
-    //
-    // Default timeout for all waitFor* commands.
-    waitforTimeout: 6000,
-    //
-    // Default timeout in milliseconds for request
-    // if browser driver or grid doesn't send response
-    connectionRetryTimeout: 120000,
-    //
-    // Default request retries count
-    connectionRetryCount: 3,
-    //
-    // Test runner services
-    // Services take over a specific job you don't want to take care of. They enhance
-    // your test setup with almost no effort. Unlike plugins, they don't add new
-    // commands. Instead, they hook themselves up into the test process.
-    services: ["chromedriver"],
-    // Framework you want to run your specs with.
-    // The following are supported: Mocha, Jasmine, and Cucumber
-    // see also: https://webdriver.io/docs/frameworks
-    //
-    // Make sure you have the wdio adapter package for the specific framework installed
-    // before running any tests.
-    framework: "mocha",
-    //
-    // The number of times to retry the entire specfile when it fails as a whole
-    // specFileRetries: 1,
-    //
-    // Delay in seconds between the spec file retry attempts
-    // specFileRetriesDelay: 0,
-    //
-    // Whether or not retried specfiles should be retried immediately or deferred to the end of the queue
-    // specFileRetriesDeferred: false,
-    //
-    // Test reporter for stdout.
-    // The only one supported by default is 'dot'
-    // see also: https://webdriver.io/docs/dot-reporter
-    reporters: [
-        "spec",
-        [
-            "json",
-            {
-                outputDir: "./results",
-            },
-        ],
-    ],
-    //
-    // Options to be passed to Mocha.
-    // See the full list at http://mochajs.org/
-    mochaOpts: {
-        ui: "bdd",
-        timeout: 60000000,
-    },
-    //
-    // =====
-    // Hooks
-    // =====
-    // WebdriverIO provides several hooks you can use to interfere with the test process in order to enhance
-    // it and to build services around it. You can either apply a single function or an array of
-    // methods to it. If one of them returns with a promise, WebdriverIO will wait until that promise got
-    // resolved to continue.
-    /**
-     * Gets executed once before all workers get launched.
-     * @param {Object} config wdio configuration object
-     * @param {Array.<Object>} capabilities list of capabilities details
-     */
-    // onPrepare: async function (_config, _capabilities) {},
-    /**
-     * Gets executed before a worker process is spawned and can be used to initialise specific service
-     * for that worker as well as modify runtime environments in an async fashion.
-     * @param  {String} cid      capability id (e.g 0-0)
-     * @param  {[type]} caps     object containing capabilities for session that will be spawn in the worker
-     * @param  {[type]} specs    specs to be run in the worker process
-     * @param  {[type]} args     object that will be merged with the main configuration once worker is initialised
-     * @param  {[type]} execArgv list of string arguments passed to the worker process
-     */
-    // onWorkerStart: function (cid, caps, specs, args, execArgv) {},
-    /**
-     * Gets executed just before initialising the webdriver session and test framework. It allows you
-     * to manipulate configurations depending on the capability or spec.
-     * @param {Object} config wdio configuration object
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {Array.<String>} specs List of spec file paths that are to be run
-     * @param {String} cid worker id (e.g. 0-0)
-     */
-    // beforeSession: async function (_config, _capabilities, specs, _cid) {},
-    /**
-     * Gets executed before test execution begins. At this point you can access to all global
-     * variables like `browser`. It is the perfect place to define custom commands.
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {Array.<String>} specs        List of spec file paths that are to be run
-     * @param {Object}         browser      instance of created browser/device session
-     */
-    // before: function (capabilities, specs) {
-    // },
-    /**
-     * Runs before a WebdriverIO command gets executed.
-     * @param {String} commandName hook command name
-     * @param {Array} args arguments that command would receive
-     */
-    // beforeCommand: function (commandName, args) {
-    // },
-    /**
-     * Hook that gets executed before the suite starts
-     * @param {Object} suite suite details
-     */
-    // beforeSuite: function (suite) {
-    // },
-    /**
-     * Function to be executed before a test (in Mocha/Jasmine) starts.
-     */
-    // beforeTest: function (test, context) {
-    // },
-    /**
-     * Hook that gets executed _before_ a hook within the suite starts (e.g. runs before calling
-     * beforeEach in Mocha)
-     */
-    // beforeHook: function (test, context) {
-    // },
-    /**
-     * Hook that gets executed _after_ a hook within the suite starts (e.g. runs after calling
-     * afterEach in Mocha)
-     */
-    // afterHook: function (test, context, { error, result, duration, passed, retries }) {
-    // },
-    /**
-     * Function to be executed after a test (in Mocha/Jasmine only)
-     * @param {Object}  test             test object
-     * @param {Object}  context          scope object the test was executed with
-     * @param {Error}   result.error     error object in case the test fails, otherwise `undefined`
-     * @param {Any}     result.result    return object of test function
-     * @param {Number}  result.duration  duration of test
-     * @param {Boolean} result.passed    true if test has passed, otherwise false
-     * @param {Object}  result.retries   informations to spec related retries, e.g. `{ attempts: 0, limit: 0 }`
-     */
-    // afterTest: function(test, context, { error, result, duration, passed, retries }) {
-    // },
-    /**
-     * Hook that gets executed after the suite has ended
-     * @param {Object} suite suite details
-     */
-    // afterSuite: function (suite) {
-    // },
-    /**
-     * Runs after a WebdriverIO command gets executed
-     * @param {String} commandName hook command name
-     * @param {Array} args arguments that command would receive
-     * @param {Number} result 0 - command success, 1 - command error
-     * @param {Object} error error object if any
-     */
-    // afterCommand: function (commandName, args, result, error) {
-    // },
-    /**
-     * Gets executed after all tests are done. You still have access to all global variables from
-     * the test.
-     * @param {Number} result 0 - test pass, 1 - test fail
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {Array.<String>} specs List of spec file paths that ran
-     */
-    // after: function (result, capabilities, specs) {
-    // },
-    /**
-     * Gets executed right after terminating the webdriver session.
-     * @param {Object} config wdio configuration object
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {Array.<String>} specs List of spec file paths that ran
-     */
-    // afterSession: async function (_config, _capabilities, _specs) {},
-    /**
-     * Gets executed after all workers got shut down and the process is about to exit. An error
-     * thrown in the onComplete hook will result in the test run failing.
-     * @param {Object} exitCode 0 - success, 1 - fail
-     * @param {Object} config wdio configuration object
-     * @param {Array.<Object>} capabilities list of capabilities details
-     * @param {<Object>} results object containing test results
-     */
-    // onComplete: function(exitCode, config, capabilities, results) {
-    // },
-    /**
-     * Gets executed when a refresh happens.
-     * @param {String} oldSessionId session ID of the old session
-     * @param {String} newSessionId session ID of the new session
-     */
-    //onReload: function(oldSessionId, newSessionId) {
-    //}
-};
diff --git a/apps/mudita-center/src/app.tsx b/apps/mudita-center/src/app.tsx
index e3c5a2b39f..cab83f0456 100644
--- a/apps/mudita-center/src/app.tsx
+++ b/apps/mudita-center/src/app.tsx
@@ -3,6 +3,7 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
+import "./wdyr"
 import "reflect-metadata"
 import translationConfig from "App/translations.config.json"
 import App from "App/app.component"
diff --git a/apps/mudita-center/src/wdyr.ts b/apps/mudita-center/src/wdyr.ts
new file mode 100644
index 0000000000..bcd74bcdf4
--- /dev/null
+++ b/apps/mudita-center/src/wdyr.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+
+if (process.env.NODE_ENV === "development") {
+  const whyDidYouRender = require("@welldone-software/why-did-you-render")
+  whyDidYouRender(React, {
+    trackAllPureComponents: false,
+  })
+}
diff --git a/libs/core/__deprecated__/renderer/components/core/text/text.component.tsx b/libs/core/__deprecated__/renderer/components/core/text/text.component.tsx
index 942a55012f..b72c909919 100644
--- a/libs/core/__deprecated__/renderer/components/core/text/text.component.tsx
+++ b/libs/core/__deprecated__/renderer/components/core/text/text.component.tsx
@@ -121,6 +121,7 @@ export interface TextProps {
   readonly onClick?: () => void
   readonly testId?: string
   readonly textRef?: React.Ref<HTMLElement>
+  readonly id?: string
 }
 
 export enum TextDisplayStyle {
@@ -185,7 +186,6 @@ const Text: FunctionComponent<TextProps> = ({
     {message && typeof message !== "string" && (
       <FormattedMessage {...message} />
     )}
-
     {!message && children}
   </TextWrapper>
 )
diff --git a/libs/core/__deprecated__/renderer/components/rest/header/__snapshots__/header.test.tsx.snap b/libs/core/__deprecated__/renderer/components/rest/header/__snapshots__/header.test.tsx.snap
index 31e38428d9..cf836f30fe 100644
--- a/libs/core/__deprecated__/renderer/components/rest/header/__snapshots__/header.test.tsx.snap
+++ b/libs/core/__deprecated__/renderer/components/rest/header/__snapshots__/header.test.tsx.snap
@@ -43,6 +43,7 @@ exports[`matches snapshot without tabs 1`] = `
     class="c1 c2"
     color="primary"
     data-testid="location"
+    id="app-header"
   >
     [value] module.overview
   </h4>
diff --git a/libs/core/__deprecated__/renderer/components/rest/header/header.component.tsx b/libs/core/__deprecated__/renderer/components/rest/header/header.component.tsx
index 3d319f3adf..b765349bc1 100644
--- a/libs/core/__deprecated__/renderer/components/rest/header/header.component.tsx
+++ b/libs/core/__deprecated__/renderer/components/rest/header/header.component.tsx
@@ -122,6 +122,7 @@ const Header: FunctionComponent<HeaderProps> = ({
         </BackButton>
       ) : (
         <HeaderText
+          id={"app-header"}
           displayStyle={TextDisplayStyle.Headline4}
           message={currentLocation}
           data-testid={"location"}
diff --git a/libs/core/__deprecated__/renderer/store/reducers.ts b/libs/core/__deprecated__/renderer/store/reducers.ts
index 7420ce271f..ab36d034c1 100644
--- a/libs/core/__deprecated__/renderer/store/reducers.ts
+++ b/libs/core/__deprecated__/renderer/store/reducers.ts
@@ -33,6 +33,7 @@ import {
   importsReducer,
   externalProvidersReducer,
   genericEntitiesReducer,
+  genericToastsReducer,
 } from "generic-view/store"
 import { appStateReducer } from "shared/app-state"
 import { activeDeviceRegistryReducer } from "active-device-registry/feature"
@@ -70,6 +71,7 @@ export const reducers = {
   genericDataTransfer: genericDataTransferReducer,
   helpV2: helpReducer,
   genericEntities: genericEntitiesReducer,
+  genericToasts: genericToastsReducer,
 }
 
 export const combinedReducers = combineReducers(reducers)
diff --git a/libs/core/contact-support/components/contact-support-modal-error.component.tsx b/libs/core/contact-support/components/contact-support-modal-error.component.tsx
index a5a5327055..f731d802c5 100644
--- a/libs/core/contact-support/components/contact-support-modal-error.component.tsx
+++ b/libs/core/contact-support/components/contact-support-modal-error.component.tsx
@@ -32,10 +32,12 @@ export const ContactSupportModalError: FunctionComponent<Props> = ({
       <ButtonSecondary
         config={{
           text: intl.formatMessage(messages.closeButtonLabel),
-          action: {
-            type: "custom",
-            callback: closeContactSupportFlow,
-          },
+          actions: [
+            {
+              type: "custom",
+              callback: closeContactSupportFlow,
+            },
+          ],
         }}
       />
     </Modal.Buttons>
diff --git a/libs/core/contact-support/components/contact-support-modal-success.component.tsx b/libs/core/contact-support/components/contact-support-modal-success.component.tsx
index 911630a3e1..674407149d 100644
--- a/libs/core/contact-support/components/contact-support-modal-success.component.tsx
+++ b/libs/core/contact-support/components/contact-support-modal-success.component.tsx
@@ -38,10 +38,12 @@ export const ContactSupportModalSuccess: FunctionComponent<Props> = ({
         data-testid={ContactSupportModalTestIds.CloseButton}
         config={{
           text: intl.formatMessage(messages.closeButtonLabel),
-          action: {
-            type: "custom",
-            callback: closeContactSupportFlow,
-          },
+          actions: [
+            {
+              type: "custom",
+              callback: closeContactSupportFlow,
+            },
+          ],
         }}
       />
     </Modal.Buttons>
diff --git a/libs/core/contacts/components/contact-edit/contact-edit.component.tsx b/libs/core/contacts/components/contact-edit/contact-edit.component.tsx
index 29976af023..c0a2710d3b 100644
--- a/libs/core/contacts/components/contact-edit/contact-edit.component.tsx
+++ b/libs/core/contacts/components/contact-edit/contact-edit.component.tsx
@@ -211,7 +211,10 @@ const ContactEdit: FunctionComponent<ContactEditProps> = ({
             <Input
               type="text"
               label={intl.formatMessage(messages.firstName)}
-              {...register("firstName", nameValidator)}
+              {...register("firstName", {
+                ...nameValidator,
+                deps: [],
+              })}
               errorMessage={errors.firstName?.message}
               onBlur={handleUsernameBlur}
               data-testid={ContactEditTestIdsEnum.FirstName}
@@ -219,7 +222,10 @@ const ContactEdit: FunctionComponent<ContactEditProps> = ({
             <Input
               type="text"
               label={intl.formatMessage(messages.secondName)}
-              {...register("lastName", nameValidator)}
+              {...register("lastName", {
+                ...nameValidator,
+                deps: [],
+              })}
               errorMessage={errors.lastName?.message}
               onBlur={handleUsernameBlur}
               data-testid={ContactEditTestIdsEnum.SecondName}
@@ -227,20 +233,20 @@ const ContactEdit: FunctionComponent<ContactEditProps> = ({
             <Input
               type="tel"
               label={intl.formatMessage(messages.primaryNumber)}
-              {...register(
-                "primaryPhoneNumber",
-                primaryPhoneNumberValidator(fields)
-              )}
+              {...register("primaryPhoneNumber", {
+                ...primaryPhoneNumberValidator(fields),
+                deps: [],
+              })}
               errorMessage={errors.primaryPhoneNumber?.message}
               data-testid={ContactEditTestIdsEnum.PrimaryNumber}
             />
             <Input
               type="tel"
               label={intl.formatMessage(messages.secondaryNumber)}
-              {...register(
-                "secondaryPhoneNumber",
-                secondaryPhoneNumberValidator(fields)
-              )}
+              {...register("secondaryPhoneNumber", {
+                ...secondaryPhoneNumberValidator(fields),
+                deps: [],
+              })}
               errorMessage={errors.secondaryPhoneNumber?.message}
               data-testid={ContactEditTestIdsEnum.SecondaryNumber}
             />
@@ -260,7 +266,10 @@ const ContactEdit: FunctionComponent<ContactEditProps> = ({
             <Input
               type="text"
               label={intl.formatMessage(messages.firstAddressLine)}
-              {...register("firstAddressLine", addressValidator)}
+              {...register("firstAddressLine", {
+                ...addressValidator,
+                deps: [],
+              })}
               errorMessage={errors.firstAddressLine?.message}
               onBlur={trimInputValue}
               data-testid={ContactEditTestIdsEnum.FirstAddressLine}
@@ -268,7 +277,10 @@ const ContactEdit: FunctionComponent<ContactEditProps> = ({
             <Input
               type="text"
               label={intl.formatMessage(messages.secondAddressLine)}
-              {...register("secondAddressLine", addressValidator)}
+              {...register("secondAddressLine", {
+                ...addressValidator,
+                deps: [],
+              })}
               errorMessage={errors.secondAddressLine?.message}
               onBlur={trimInputValue}
               data-testid={ContactEditTestIdsEnum.SecondAddressLine}
diff --git a/libs/core/device-initialization/components/devices-initialization-modal-flows/api-device-initialization-modal-flow.tsx b/libs/core/device-initialization/components/devices-initialization-modal-flows/api-device-initialization-modal-flow.tsx
index b684c93e80..5ac4a4f2da 100644
--- a/libs/core/device-initialization/components/devices-initialization-modal-flows/api-device-initialization-modal-flow.tsx
+++ b/libs/core/device-initialization/components/devices-initialization-modal-flows/api-device-initialization-modal-flow.tsx
@@ -24,7 +24,7 @@ import {
 import { activeDeviceIdSelector } from "active-device-registry/feature"
 import { Modal } from "generic-view/ui"
 import { GenericThemeProvider } from "generic-view/theme"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { FunctionComponent } from "Core/core/types/function-component.interface"
 import { Dispatch, ReduxRootState } from "Core/__deprecated__/renderer/store"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
@@ -37,6 +37,7 @@ import {
 import { setDeviceInitializationStatus } from "Core/device-initialization/actions/base.action"
 import { DeviceInitializationStatus } from "Core/device-initialization/reducers/device-initialization.interface"
 import { useDeactivateDeviceAndRedirect } from "Core/overview/components/overview-screens/pure-overview/use-deactivate-device-and-redirect.hook"
+import { ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   lockedModalHeadline: {
diff --git a/libs/core/templates/components/template-form/template-form.component.tsx b/libs/core/templates/components/template-form/template-form.component.tsx
index 5d9b274657..64d47e174f 100644
--- a/libs/core/templates/components/template-form/template-form.component.tsx
+++ b/libs/core/templates/components/template-form/template-form.component.tsx
@@ -96,7 +96,10 @@ export const TemplateForm: FunctionComponent<TemplateFormProps> = ({
       <Form onSubmit={handleSave}>
         <Content>
           <TextArea
-            {...register("text", templateValidator())}
+            {...register("text", {
+              ...templateValidator(),
+              deps: [],
+            })}
             data-testid={TemplateFormTestIds.TextFiled}
             type="textarea"
             defaultHeight="100%"
diff --git a/libs/device/models/src/lib/entities/entities-config.validator.test.ts b/libs/device/models/src/lib/entities/entities-config.validator.test.ts
index cd51947390..52d5f960c6 100644
--- a/libs/device/models/src/lib/entities/entities-config.validator.test.ts
+++ b/libs/device/models/src/lib/entities/entities-config.validator.test.ts
@@ -28,6 +28,20 @@ describe("entitiesConfigValidator", () => {
         field4: { type: "object", fields: { field4a: { type: "string" } } },
         5: { type: "array", items: { type: "string" } },
       },
+      computedFields: {
+        computedField1: {
+          type: "join",
+          separator: " ",
+          fields: [
+            "field1",
+            {
+              type: "join",
+              separator: ",",
+              fields: ["field2", "field3"],
+            },
+          ],
+        },
+      },
     }
     expect(() => entitiesConfigValidator.parse(validConfig)).not.toThrow()
   })
diff --git a/libs/device/models/src/lib/entities/entities-config.validator.ts b/libs/device/models/src/lib/entities/entities-config.validator.ts
index c9de56fd53..75841b28a9 100644
--- a/libs/device/models/src/lib/entities/entities-config.validator.ts
+++ b/libs/device/models/src/lib/entities/entities-config.validator.ts
@@ -43,9 +43,11 @@ const fieldValidatorsSchema = z
 
 const defaultValueSchema = z.any().optional()
 
-const idFieldSchema = z.object({
-  type: z.literal("id"),
-}).strict()
+const idFieldSchema = z
+  .object({
+    type: z.literal("id"),
+  })
+  .strict()
 
 const primitiveFieldSchema = z.object({
   type: z.enum(["string", "number", "boolean"]),
@@ -117,10 +119,91 @@ const globalValidatorSchema = z
   })
   .optional()
 
+// COMPUTED FIELDS SCHEMA
+const computedFieldFilterSchema = z
+  .object({
+    type: z.literal("filter"),
+  })
+  .merge(patternValidatorSchema.pick({ pattern: true, negatePattern: true }))
+type ComputedFieldFilter = z.infer<typeof computedFieldFilterSchema>
+
+const computedFieldClearSchema = z.object({
+  type: z.literal("clear"),
+  allowEmptyString: z.boolean().optional(),
+  allowZero: z.boolean().optional(),
+  allowFalse: z.boolean().optional(),
+})
+type ComputedFieldClear = z.infer<typeof computedFieldClearSchema>
+
+const computedFieldSliceSchema = z.object({
+  type: z.literal("slice"),
+  start: z.number().optional(),
+  end: z.number().optional(),
+})
+type ComputedFieldSlice = z.infer<typeof computedFieldSliceSchema>
+
+const computedFieldJoinSchema = z.object({
+  type: z.literal("join"),
+  separator: z.string().optional(),
+})
+type ComputedFieldJoin = z.infer<typeof computedFieldJoinSchema>
+
+const computedFieldConcatSchema = z.object({
+  type: z.literal("concat"),
+})
+type ComputedFieldConcat = z.infer<typeof computedFieldConcatSchema>
+
+const computedFieldMergeSchema = z.object({
+  type: z.literal("merge"),
+})
+type ComputedFieldMerge = z.infer<typeof computedFieldMergeSchema>
+
+const computedFieldWrapSchema = z.object({
+  type: z.literal("wrap"),
+  prefix: z.unknown().optional(),
+  suffix: z.unknown().optional(),
+})
+type ComputedFieldWrap = z.infer<typeof computedFieldWrapSchema>
+
+const computedFieldObjectifySchema = z.object({
+  type: z.literal("objectify"),
+  keys: z.array(z.string()),
+})
+type ComputedFieldObjectify = z.infer<typeof computedFieldObjectifySchema>
+
+type ComputedFieldMethod =
+  | ComputedFieldFilter
+  | ComputedFieldClear
+  | ComputedFieldSlice
+  | ComputedFieldConcat
+  | ComputedFieldMerge
+  | ComputedFieldJoin
+  | ComputedFieldWrap
+  | ComputedFieldObjectify
+
+const computedFieldFieldsSchema = z.object({
+  fields: z.array(z.union([z.string(), z.lazy(() => computedFieldSchema)])),
+})
+
+export type EntityComputedFieldConfig = ComputedFieldMethod & {
+  fields: (string | EntityComputedFieldConfig)[]
+}
+const computedFieldSchema: z.ZodType<EntityComputedFieldConfig> = z.union([
+  computedFieldFilterSchema.extend(computedFieldFieldsSchema.shape),
+  computedFieldClearSchema.extend(computedFieldFieldsSchema.shape),
+  computedFieldSliceSchema.extend(computedFieldFieldsSchema.shape),
+  computedFieldJoinSchema.extend(computedFieldFieldsSchema.shape),
+  computedFieldConcatSchema.extend(computedFieldFieldsSchema.shape),
+  computedFieldMergeSchema.extend(computedFieldFieldsSchema.shape),
+  computedFieldWrapSchema.extend(computedFieldFieldsSchema.shape),
+  computedFieldObjectifySchema.extend(computedFieldFieldsSchema.shape),
+])
+
 export const entitiesConfigValidator = z
   .object({
     fields: z.record(z.union([z.string(), z.number()]), fieldSchema),
     globalValidators: globalValidatorSchema,
+    computedFields: z.record(z.string(), computedFieldSchema).optional(),
   })
   .refine(
     (data) => {
diff --git a/libs/device/models/src/lib/feature/data-provider-config.test.ts b/libs/device/models/src/lib/feature/data-provider-config.test.ts
index 825f5bde9f..59925e6826 100644
--- a/libs/device/models/src/lib/feature/data-provider-config.test.ts
+++ b/libs/device/models/src/lib/feature/data-provider-config.test.ts
@@ -3,23 +3,27 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
-import { dataProviderSchema } from "./data-provider-config"
+import { DataProviderConfig, dataProviderSchema } from "./data-provider-config"
 
 describe("dataProviderSchema", () => {
   it("validates entities-array with sort and filters", () => {
-    const validData = {
+    const validData: DataProviderConfig = {
       source: "entities-array",
       entitiesType: "someType",
-      sort: {
-        someField: {
-          priority: 1,
+      sort: [
+        {
+          providerField: "someField",
           direction: "asc",
+          priority: 1,
           orderingPatterns: ["/pattern/"],
         },
-      },
-      filters: {
-        someField: ["/pattern/"],
-      },
+      ],
+      filters: [
+        {
+          providerField: "someField",
+          patterns: ["/pattern/"],
+        },
+      ],
     }
     expect(dataProviderSchema.safeParse(validData).success).toBe(true)
   })
@@ -48,23 +52,125 @@ describe("dataProviderSchema", () => {
   })
 
   it("validates entities-field", () => {
-    const validData = {
+    const validData: DataProviderConfig = {
       source: "entities-field",
       entitiesType: "someType",
-      fields: {
-        dataItemId: "value1",
-        "data.someField": "value2",
-      },
+      fields: [
+        {
+          providerField: "value1",
+          componentField: "dataItemId",
+        },
+        {
+          providerField: "value2",
+          componentField: "data.someField",
+        },
+      ],
     }
     expect(dataProviderSchema.safeParse(validData).success).toBe(true)
   })
 
   it("fails validation for form-fields with invalid field key", () => {
+    const invalidData: DataProviderConfig = {
+      source: "form-fields",
+      fields: [
+        {
+          providerField: "invalidField",
+          componentField: "invalidField",
+          value: "value",
+        },
+      ],
+    }
+    expect(dataProviderSchema.safeParse(invalidData).success).toBe(false)
+  })
+
+  it("validates form-fields", () => {
+    const validData: DataProviderConfig = {
+      source: "form-fields",
+      fields: [
+        {
+          providerField: "value1",
+          componentField: "dataItemId",
+        },
+        {
+          providerField: "value2",
+          componentField: "config.someField",
+        },
+        {
+          providerField: "value3",
+          componentField: "config.otherField",
+        },
+      ],
+    }
+    expect(dataProviderSchema.safeParse(validData).success).toBe(true)
+  })
+
+  it("validates form-fields with extended config", () => {
+    const validData: DataProviderConfig = {
+      source: "form-fields",
+      fields: [
+        {
+          providerField: "value1",
+          componentField: "dataItemId",
+        },
+        {
+          providerField: "value2",
+          componentField: "config.someField",
+        },
+        {
+          providerField: "value3",
+          componentField: "config.otherField",
+          modifier: "boolean",
+          condition: "eq",
+          value: true,
+        },
+      ],
+    }
+    expect(dataProviderSchema.safeParse(validData).success).toBe(true)
+  })
+
+  it("fails validation for form-fields with invalid modifier", () => {
     const invalidData = {
       source: "form-fields",
-      fields: {
-        invalidField: "value",
-      },
+      fields: [
+        {
+          providerField: "value",
+          componentField: "config.someField",
+          modifier: "invalid",
+          condition: "eq",
+          value: "value",
+        },
+      ],
+    }
+    expect(dataProviderSchema.safeParse(invalidData).success).toBe(false)
+  })
+
+  it("fails validation for form-fields with invalid condition", () => {
+    const invalidData = {
+      source: "form-fields",
+      fields: [
+        {
+          field: "value",
+          componentField: "config.someField",
+          modifier: "length",
+          condition: "invalid",
+          value: "value",
+        },
+      ],
+    }
+    expect(dataProviderSchema.safeParse(invalidData).success).toBe(false)
+  })
+
+  it("fails validation for form-fields with missing value", () => {
+    const invalidData: DataProviderConfig = {
+      source: "form-fields",
+      fields: [
+        {
+          providerField: "value",
+          componentField: "config.someField",
+          modifier: "length",
+          condition: "eq",
+        },
+      ],
     }
     expect(dataProviderSchema.safeParse(invalidData).success).toBe(false)
   })
diff --git a/libs/device/models/src/lib/feature/data-provider-config.ts b/libs/device/models/src/lib/feature/data-provider-config.ts
index a3be0d3b43..afe0d6e82f 100644
--- a/libs/device/models/src/lib/feature/data-provider-config.ts
+++ b/libs/device/models/src/lib/feature/data-provider-config.ts
@@ -14,19 +14,60 @@ const regexSchema = z
     "Regex must be in format /regex/ or /regex/flags"
   )
 
-const fieldsSchema = z.record(
-  z.union([
-    z.literal("dataItemId"),
-    z.string().startsWith("data."),
-    z.string().startsWith("config."),
-  ]),
-  z.string()
+const componentFieldSchema = z.union([
+  z.literal("dataItemId"),
+  z.string().startsWith("data."),
+  z.string().startsWith("extra-data."),
+  z.string().startsWith("config."),
+])
+
+const baseFieldSchema = z
+  .object({
+    providerField: z.string(),
+    componentField: componentFieldSchema,
+  })
+  .strict()
+const enhancedFieldSchema = z
+  .object({
+    modifier: z.union([z.literal("length"), z.literal("boolean")]).optional(),
+    slice: z
+      .union([z.tuple([z.number()]), z.tuple([z.number(), z.number()])])
+      .optional(),
+    flat: z.string().optional(),
+  })
+  .merge(baseFieldSchema)
+  .strict()
+const superEnhancedFieldSchema = enhancedFieldSchema
+  .extend({
+    condition: z.union([
+      z.literal("eq"),
+      z.literal("ne"),
+      z.literal("gt"),
+      z.literal("lt"),
+    ]),
+    value: z.union([
+      z.string(),
+      z.number(),
+      z.boolean(),
+      z.array(z.unknown()),
+      z.record(z.union([z.string(), z.number()]), z.unknown()),
+    ]),
+  })
+  .strict()
+
+const fieldsSchema = z.array(
+  z.union([baseFieldSchema, enhancedFieldSchema, superEnhancedFieldSchema])
 )
 
+export type DataProviderField =
+  | z.infer<typeof baseFieldSchema>
+  | z.infer<typeof enhancedFieldSchema>
+  | z.infer<typeof superEnhancedFieldSchema>
+
 const sortSchema = z
-  .record(
-    z.string(),
+  .array(
     z.object({
+      providerField: z.string(),
       priority: z.number().nonnegative(),
       direction: z.union([z.literal("asc"), z.literal("desc")]),
       orderingPatterns: z.array(regexSchema).optional(),
@@ -36,9 +77,16 @@ const sortSchema = z
 
 export type DataProviderSortConfig = z.infer<typeof sortSchema>
 
-const filtersSchema = z.record(z.string(), z.array(regexSchema)).optional()
+const filtersSchema = z
+  .array(
+    z.object({
+      providerField: z.string(),
+      patterns: z.array(regexSchema),
+    })
+  )
+  .optional()
 
-export type DataProviderFilterConfig = z.infer<typeof filtersSchema>
+export type DataProviderFiltersConfig = z.infer<typeof filtersSchema>
 
 const entitiesArraySchema = z.object({
   source: z.literal("entities-array"),
@@ -55,6 +103,13 @@ const entitiesFieldSchema = z.object({
 
 const formFieldsSchema = z.object({
   source: z.literal("form-fields"),
+  formKey: z.string().optional(),
+  fields: fieldsSchema,
+})
+
+const formFieldsSchemaV2 = z.object({
+  source: z.literal("form-fields-v2"),
+  formName: z.string(),
   fields: fieldsSchema,
 })
 
@@ -62,6 +117,7 @@ export const dataProviderSchema = z.union([
   entitiesArraySchema,
   entitiesFieldSchema,
   formFieldsSchema,
+  formFieldsSchemaV2,
 ])
 
 export type DataProviderConfig = z.infer<typeof dataProviderSchema>
diff --git a/libs/device/models/src/lib/feature/extra-config.ts b/libs/device/models/src/lib/feature/extra-config.ts
new file mode 100644
index 0000000000..b825c6b25b
--- /dev/null
+++ b/libs/device/models/src/lib/feature/extra-config.ts
@@ -0,0 +1,35 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { z } from "zod"
+
+const TooltipPlacementEnum = z.enum([
+  "bottom-right",
+  "bottom-left",
+  "top-right",
+  "top-left",
+])
+
+export type TooltipPlacement = z.infer<typeof TooltipPlacementEnum>
+
+const TooltipOffset = z.object({
+  x: z.number(),
+  y: z.number(),
+})
+
+export type TooltipOffsetType = z.infer<typeof TooltipOffset>
+
+const tooltipSchema = z.object({
+  contentText: z.string().optional(),
+  contentList: z.array(z.string()).optional(),
+  placement: TooltipPlacementEnum.optional(),
+  offset: TooltipOffset.optional(),
+})
+
+export const extraConfigSchema = z.object({
+  tooltip: tooltipSchema.optional(),
+})
+
+export type ExtraConfig = z.infer<typeof extraConfigSchema>
diff --git a/libs/device/models/src/lib/feature/feature-config.test.ts b/libs/device/models/src/lib/feature/feature-config.test.ts
index 99049fc8a6..2f2e9aa9c6 100644
--- a/libs/device/models/src/lib/feature/feature-config.test.ts
+++ b/libs/device/models/src/lib/feature/feature-config.test.ts
@@ -10,27 +10,34 @@ const featureConfig: FeatureConfig = {
     component: "button-text",
     config: {
       text: "dummy",
-      action: {
-        type: "custom",
-        callback: jest.fn,
-      },
+      actions: [
+        {
+          type: "custom",
+          callback: jest.fn,
+        },
+      ],
     },
   },
   "dummy-2": {
     component: "button-primary",
     config: {
       text: "dummy",
-      action: {
-        type: "custom",
-        callback: jest.fn,
-      },
+      actions: [
+        {
+          type: "custom",
+          callback: jest.fn,
+        },
+      ],
     },
     dataProvider: {
       source: "entities-field",
       entitiesType: "dummy",
-      fields: {
-        dataItemId: "dummy",
-      },
+      fields: [
+        {
+          providerField: "dummy",
+          componentField: "dataItemId",
+        },
+      ],
     },
   },
 }
diff --git a/libs/device/models/src/lib/feature/feature-config.ts b/libs/device/models/src/lib/feature/feature-config.ts
index 93588589d8..454a13a18b 100644
--- a/libs/device/models/src/lib/feature/feature-config.ts
+++ b/libs/device/models/src/lib/feature/feature-config.ts
@@ -8,6 +8,7 @@ import componentValidators from "generic-view/models"
 import { ComponentPropsByName } from "generic-view/utils"
 import { layoutSchema } from "./layout-config"
 import { dataProviderSchema } from "./data-provider-config"
+import { extraConfigSchema } from "./extra-config"
 
 const validators = Object.values(componentValidators).map(
   ({ key, configValidator }) => {
@@ -17,6 +18,7 @@ const validators = Object.values(componentValidators).map(
         config: configValidator,
         layout: layoutSchema.optional(),
         dataProvider: dataProviderSchema.optional(),
+        extra: extraConfigSchema.optional(),
         childrenKeys: z.array(z.string()).optional(),
       })
       .passthrough()
diff --git a/libs/device/models/src/lib/feature/index.ts b/libs/device/models/src/lib/feature/index.ts
index d0f19b70cd..c753f7c0cc 100644
--- a/libs/device/models/src/lib/feature/index.ts
+++ b/libs/device/models/src/lib/feature/index.ts
@@ -3,6 +3,7 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
+export * from "./data-provider-config"
+export * from "./extra-config"
 export * from "./feature-config"
 export * from "./layout-config"
-export * from "./data-provider-config"
diff --git a/libs/generic-view/feature/src/lib/generic-toasts.tsx b/libs/generic-view/feature/src/lib/generic-toasts.tsx
new file mode 100644
index 0000000000..b585ae8a6e
--- /dev/null
+++ b/libs/generic-view/feature/src/lib/generic-toasts.tsx
@@ -0,0 +1,57 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React, { FunctionComponent, useMemo } from "react"
+import { useSelector } from "react-redux"
+import { ReduxRootState } from "Core/__deprecated__/renderer/store"
+import RecursiveLayout from "./recursive-layout"
+import { selectViewConfig } from "generic-view/store"
+import { createSelector } from "reselect"
+import { isEmpty } from "lodash"
+import styled from "styled-components"
+
+const selectToastsToRender = createSelector(selectViewConfig, (config) => {
+  return Object.entries(config || {})
+    .filter(([, { component }]) => component === "toast")
+    .map(([key]) => key)
+})
+
+interface Props {
+  viewKey: string
+}
+
+export const GenericToasts: FunctionComponent<Props> = ({ viewKey }) => {
+  const toastsToRender = useSelector((state: ReduxRootState) =>
+    selectToastsToRender(state, { viewKey })
+  )
+  const toastsToRenderDependency = JSON.stringify(toastsToRender)
+
+  return useMemo(() => {
+    if (isEmpty(toastsToRender)) {
+      return null
+    }
+    return (
+      <ToastsWrapper>
+        {toastsToRender.map((toastKey) => {
+          return (
+            <RecursiveLayout
+              key={toastKey}
+              viewKey={viewKey}
+              componentKey={toastKey}
+            />
+          )
+        })}
+      </ToastsWrapper>
+    )
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [toastsToRenderDependency, viewKey])
+}
+
+const ToastsWrapper = styled.div`
+  position: fixed;
+  right: 3.2rem;
+  bottom: 3.2rem;
+  z-index: 3;
+`
diff --git a/libs/generic-view/feature/src/lib/generic-view.tsx b/libs/generic-view/feature/src/lib/generic-view.tsx
index ee0c1f1878..6f893a9603 100644
--- a/libs/generic-view/feature/src/lib/generic-view.tsx
+++ b/libs/generic-view/feature/src/lib/generic-view.tsx
@@ -4,26 +4,26 @@
  */
 
 import React, { FunctionComponent } from "react"
-import { useParams } from "react-router"
 import { GenericThemeProvider } from "generic-view/theme"
 import RecursiveLayout from "./recursive-layout"
 import GenericModals from "./generic-modals"
 import { useDevConsole } from "./use-dev-console"
 import { useDevViews } from "./use-dev-views/use-dev-views"
+import { GenericToasts } from "./generic-toasts"
+import { FormsProvider, useCurrentViewKey } from "generic-view/utils"
 
 export const GenericView: FunctionComponent = () => {
   useDevConsole()
-  const { viewKey, subviewKey } = useParams<{
-    viewKey: string
-    subviewKey?: string
-  }>()
-  const currentViewKey = subviewKey || viewKey
+  const currentViewKey = useCurrentViewKey()
   useDevViews(currentViewKey)
 
   return (
     <GenericThemeProvider>
-      <RecursiveLayout viewKey={currentViewKey} componentKey={"main"} />
-      <GenericModals viewKey={currentViewKey} />
+      <FormsProvider>
+        <RecursiveLayout viewKey={currentViewKey} componentKey={"main"} />
+        <GenericModals viewKey={currentViewKey} />
+        <GenericToasts viewKey={currentViewKey} />
+      </FormsProvider>
     </GenericThemeProvider>
   )
 }
diff --git a/libs/generic-view/feature/src/lib/seed-data/contacts-seed-data.ts b/libs/generic-view/feature/src/lib/seed-data/contacts-seed-data.ts
new file mode 100644
index 0000000000..0db4556b3c
--- /dev/null
+++ b/libs/generic-view/feature/src/lib/seed-data/contacts-seed-data.ts
@@ -0,0 +1,464 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { EntityData } from "device/models"
+
+const contactFullData1 = {
+  firstName: "Anna",
+  lastName: "Nowak",
+  namePrefix: "Dr.",
+  nameSuffix: "Jr.",
+  middleName: "Maria",
+  phoneNumbers: [{ phoneNumber: "+48123456789", phoneType: "MOBILE" }],
+  emailAddresses: [
+    { emailAddress: "anna.nowak@example.com", emailType: "WORK" },
+  ],
+  company: "ABC Corp.",
+  department: "HR",
+  workTitle: "Manager",
+  address: {
+    streetAddress: "Main Street 12",
+    city: "Warsaw",
+    country: "Poland",
+    type: "WORK",
+  },
+  website: "https://example.com",
+  notes: "VIP client",
+  entityType: "contacts",
+}
+
+const contactFullData2 = {
+  firstName: "John",
+  lastName: "Doe",
+  namePrefix: "Mr.",
+  nameSuffix: "Sr.",
+  middleName: "Paul",
+  phoneNumbers: [
+    { phoneNumber: "+441234567890", phoneType: "MOBILE" },
+    { phoneNumber: "+441987654321", phoneType: "HOME" },
+  ],
+  emailAddresses: [
+    { emailAddress: "john.doe@workplace.com", emailType: "WORK" },
+    { emailAddress: "johnny.doe@gmail.com", emailType: "PERSONAL" },
+  ],
+  company: "Tech Solutions Inc.",
+  department: "Engineering",
+  workTitle: "Senior Developer",
+  address: {
+    streetAddress: "123 Elm Street",
+    city: "London",
+    country: "UK",
+    type: "HOME",
+  },
+  website: "https://johndoe.com",
+  notes: "Key project stakeholder.",
+  entityType: "contacts",
+}
+
+const contactFullData3 = {
+  firstName: "Emily",
+  lastName: "Clark",
+  namePrefix: "Ms.",
+  nameSuffix: "",
+  middleName: "Rose",
+  phoneNumbers: [{ phoneNumber: "+12123456789", phoneType: "WORK" }],
+  emailAddresses: [
+    { emailAddress: "emily.clark@startup.com", emailType: "WORK" },
+  ],
+  company: "Innovatech",
+  department: "Marketing",
+  workTitle: "Marketing Director",
+  address: {
+    streetAddress: "456 Innovation Ave",
+    city: "San Francisco",
+    country: "USA",
+    type: "WORK",
+  },
+  website: "https://emilyclark.me",
+  notes: "Lead of the marketing strategy team.",
+  entityType: "contacts",
+}
+
+const contactFullData4 = {
+  firstName: "Michael",
+  lastName: "Johnson",
+  namePrefix: "Dr.",
+  nameSuffix: "PhD",
+  middleName: "David",
+  phoneNumbers: [
+    { phoneNumber: "+49876543210", phoneType: "MOBILE" },
+    { phoneNumber: "+49871234567", phoneType: "HOME" },
+  ],
+  emailAddresses: [
+    { emailAddress: "michael.j@researchlab.com", emailType: "WORK" },
+  ],
+  company: "Research Labs",
+  department: "R&D",
+  workTitle: "Chief Scientist",
+  address: {
+    streetAddress: "789 Science Blvd",
+    city: "Berlin",
+    country: "Germany",
+    type: "WORK",
+  },
+  website: "https://michaeljohnsonphd.com",
+  notes: "Collaborating on AI research projects.",
+  entityType: "contacts",
+}
+
+const contactFullData5 = {
+  firstName: "Sophia",
+  lastName: "Martinez",
+  namePrefix: "Mrs.",
+  nameSuffix: "",
+  middleName: "Isabel",
+  phoneNumbers: [{ phoneNumber: "+33678901234", phoneType: "MOBILE" }],
+  emailAddresses: [
+    {
+      emailAddress: "sophia.martinez@fashionhouse.com",
+      emailType: "WORK",
+    },
+    {
+      emailAddress: "sophia.isabel@yahoo.com",
+      emailType: "PERSONAL",
+    },
+  ],
+  company: "Fashion House",
+  department: "Design",
+  workTitle: "Creative Director",
+  address: {
+    streetAddress: "101 Avenue des Champs-Élysées",
+    city: "Paris",
+    country: "France",
+    type: "WORK",
+  },
+  website: "https://sophiamartinezdesigns.com",
+  notes: "Influential in modern fashion trends.",
+  entityType: "contacts",
+}
+
+const contactWithNumbersInName = {
+  firstName: "Numer (last name is numeric)",
+  lastName: "12345",
+  phoneNumbers: [{ phoneNumber: "+48901234567", phoneType: "MOBILE" }],
+  entityType: "contacts",
+}
+
+const contactWithPrefixSuffix = {
+  namePrefix: "Prof.",
+  nameSuffix: "PhD. (prefix & suffix only)",
+  phoneNumbers: [{ phoneNumber: "+48345678901", phoneType: "MOBILE" }],
+  entityType: "contacts",
+}
+
+const contactWithMiddleNameOnly = {
+  middleName: "Jan (only middle name)",
+  entityType: "contacts",
+}
+
+const contactWithGermanyPhoneNumberOnly = {
+  phoneNumbers: [{ phoneNumber: "490123456789", phoneType: "MOBILE" }],
+  entityType: "contacts",
+}
+
+const contactWithIndiaPhoneNumberOnly = {
+  phoneNumbers: [{ phoneNumber: "911234567890", phoneType: "MOBILE" }],
+  entityType: "contacts",
+}
+
+const contactWithChinaPhoneNumberOnly = {
+  phoneNumbers: [{ phoneNumber: "8612345678901", phoneType: "MOBILE" }],
+  entityType: "contacts",
+}
+
+
+const contactWithMobilePhoneNumberOnly = {
+  phoneNumbers: [{ phoneNumber: "+48345678902", phoneType: "MOBILE" }],
+  entityType: "contacts",
+}
+
+const contactWithMobileAndHomePhoneNumbers = {
+  phoneNumbers: [
+    { phoneNumber: "+48345678902", phoneType: "MOBILE" },
+    { phoneNumber: "+48445678903", phoneType: "HOME" },
+  ],
+  entityType: "contacts",
+}
+
+const contactWithMobileHomeAndWorkPhoneNumbers = {
+  phoneNumbers: [
+    { phoneNumber: "+48345678902", phoneType: "MOBILE" },
+    { phoneNumber: "+48445678903", phoneType: "HOME" },
+    { phoneNumber: "+48555678904", phoneType: "WORK" },
+  ],
+  entityType: "contacts",
+}
+
+const contactWithAllPhoneTypesPhoneNumbers = {
+  phoneNumbers: [
+    { phoneNumber: "+48345678902", phoneType: "MOBILE" },
+    { phoneNumber: "+48445678903", phoneType: "HOME" },
+    { phoneNumber: "+48555678904", phoneType: "WORK" },
+    { phoneNumber: "+48665678905", phoneType: "OTHER" },
+  ],
+  entityType: "contacts",
+}
+
+const contactWithWorkAndOtherPhoneNumbers = {
+  phoneNumbers: [
+    { phoneNumber: "+48555678904", phoneType: "WORK" },
+    { phoneNumber: "+48665678905", phoneType: "OTHER" },
+  ],
+  entityType: "contacts",
+}
+
+const contactWithGermanyPhoneNumberAndFirstName = {
+  firstName: "Anna (Germany-style)",
+  phoneNumbers: [{ phoneNumber: "48123456789", phoneType: "MOBILE" }],
+  entityType: "contacts",
+}
+
+const contactWithBrazilPhoneNumberAndFirstName = {
+  firstName: "Carlos (Brazil-style)",
+  phoneNumbers: [{ phoneNumber: "551112345678", phoneType: "MOBILE" }],
+  entityType: "contacts",
+}
+
+const contactWithJapanPhoneNumberAndFirstName = {
+  firstName: "Yuki (Japan-style)",
+  phoneNumbers: [{ phoneNumber: "81312345678", phoneType: "MOBILE" }],
+  entityType: "contacts",
+}
+
+const contactWithContrastingPhoneNumbers1 = {
+  firstName: "Liam (Ireland & Australia)",
+  phoneNumbers: [
+    { phoneNumber: "1512345678", phoneType: "MOBILE" },
+    { phoneNumber: "611234567890123", phoneType: "WORK" },
+  ],
+  entityType: "contacts",
+}
+
+const contactWithContrastingPhoneNumbers2 = {
+  firstName: "Amina (Morocco & USA)",
+  phoneNumbers: [
+    { phoneNumber: "201234567", phoneType: "HOME" },
+    { phoneNumber: "14155552671", phoneType: "MOBILE" },
+  ],
+  entityType: "contacts",
+}
+
+const contactWithHomeEmailOnly = {
+  emailAddresses: [{ emailAddress: "home@email.com", emailType: "HOME" }],
+  entityType: "contacts",
+}
+
+const contactWithHomeAndWorkEmails = {
+  emailAddresses: [
+    { emailAddress: "home@email.com", emailType: "HOME" },
+    { emailAddress: "work@email.com", emailType: "WORK" },
+  ],
+  entityType: "contacts",
+}
+
+const contactWithHomeWorkAndOtherEmails = {
+  emailAddresses: [
+    { emailAddress: "home@email.com", emailType: "HOME" },
+    { emailAddress: "work@email.com", emailType: "WORK" },
+    { emailAddress: "other@email.com", emailType: "OTHER" },
+  ],
+  entityType: "contacts",
+}
+
+const contactWithAllEmailTypes = {
+  emailAddresses: [
+    { emailAddress: "home@email.com", emailType: "HOME" },
+    { emailAddress: "work@email.com", emailType: "WORK" },
+    { emailAddress: "other@email.com", emailType: "OTHER" },
+    { emailAddress: "unknown@email.com", emailType: "UNKNOWN" },
+  ],
+  entityType: "contacts",
+}
+
+const contactWithWorkAndOtherEmails = {
+  emailAddresses: [
+    { emailAddress: "work@email.com", emailType: "WORK" },
+    { emailAddress: "other@email.com", emailType: "OTHER" },
+  ],
+  entityType: "contacts",
+}
+
+const contactWithNicknameOnly = {
+  nickName: "Bobby (nickname only)",
+  entityType: "contacts",
+}
+
+const contactWithCompanyOnly = {
+  company: "Innovative Technologies (company)",
+  entityType: "contacts",
+}
+
+const contactWithDepartmentOnly = {
+  department: "Human Resources (department)",
+  entityType: "contacts",
+}
+
+const contactWithWorkTitleOnly = {
+  workTitle: "Chief Marketing Officer (job title)",
+  entityType: "contacts",
+}
+
+const contactWithCompanyAndDepartment = {
+  company: "Innovative Technologies (company & department)",
+  department: "Human Resources",
+  entityType: "contacts",
+}
+
+const contactWithCompanyAndWorkTitle = {
+  company: "Innovative Technologies (company & job title)",
+  workTitle: "Chief Marketing Officer",
+  entityType: "contacts",
+}
+
+const contactWithDepartmentAndWorkTitle = {
+  department: "Human Resources (department & job title)",
+  workTitle: "Chief Marketing Officer",
+  entityType: "contacts",
+}
+
+const contactWithCompanyDepartmentAndWorkTitle = {
+  company: "Innovative Technologies (company, department & job title)",
+  department: "Human Resources",
+  workTitle: "Chief Marketing Officer",
+  entityType: "contacts",
+}
+
+const contactWithFullAddressOnly = {
+  address: {
+    streetAddress: "Street 7 (full address)",
+    city: "Berlin",
+    zipCode: "10115",
+    type: "HOME",
+  },
+  entityType: "contacts",
+}
+
+const contactWithStreetAddressOnly = {
+  contactId: "2",
+  firstName: "Jane",
+  lastName: "Smith",
+  address: {
+    streetAddress: "Street 5 (only street address)",
+    type: "HOME",
+  },
+  entityType: "contacts",
+}
+
+const contactWithCityOnly = {
+  contactId: "3",
+  firstName: "Adam",
+  lastName: "Johnson",
+  address: {
+    city: "Krakow",
+    type: "HOME",
+  },
+  entityType: "contacts",
+}
+
+const contactWithZipCodeOnly = {
+  contactId: "4",
+  firstName: "Emily",
+  lastName: "Davis",
+  address: {
+    zipCode: "00-002",
+    type: "HOME",
+  },
+  entityType: "contacts",
+}
+
+const contactWithStreetAndZipCode = {
+  contactId: "5",
+  firstName: "Michael",
+  lastName: "Brown",
+  address: {
+    streetAddress: "Street 9",
+    zipCode: "00-003",
+    type: "HOME",
+  },
+  entityType: "contacts",
+}
+
+const contactWithStateAndCountry = {
+  contactId: "5",
+  firstName: "Michael",
+  lastName: "Brown",
+  address: {
+    state: "California",
+    country: "USA",
+    type: "HOME",
+  },
+  entityType: "contacts",
+}
+
+const contactWithSipOnly = {
+  sip: "sip:jan.nowak@siponly.com",
+  entityType: "contacts",
+}
+
+const contactWithWebsiteOnly = {
+  website: "https://websiteonly.com",
+  entityType: "contacts",
+}
+
+const contactWithNotesOnly = {
+  notes: "This is a test note. (only notes)",
+  entityType: "contacts",
+}
+
+export const contactsSeedData: EntityData[] = [
+  contactFullData1,
+  contactFullData2,
+  contactFullData3,
+  contactFullData4,
+  contactFullData5,
+  contactWithNumbersInName,
+  contactWithPrefixSuffix,
+  contactWithMiddleNameOnly,
+  contactWithGermanyPhoneNumberOnly,
+  contactWithIndiaPhoneNumberOnly,
+  contactWithChinaPhoneNumberOnly,
+  contactWithMobilePhoneNumberOnly,
+  contactWithMobileAndHomePhoneNumbers,
+  contactWithMobileHomeAndWorkPhoneNumbers,
+  contactWithAllPhoneTypesPhoneNumbers,
+  contactWithWorkAndOtherPhoneNumbers,
+  contactWithGermanyPhoneNumberAndFirstName,
+  contactWithBrazilPhoneNumberAndFirstName,
+  contactWithJapanPhoneNumberAndFirstName,
+  contactWithContrastingPhoneNumbers1,
+  contactWithContrastingPhoneNumbers2,
+  contactWithHomeEmailOnly,
+  contactWithHomeAndWorkEmails,
+  contactWithHomeWorkAndOtherEmails,
+  contactWithAllEmailTypes,
+  contactWithWorkAndOtherEmails,
+  contactWithNicknameOnly,
+  contactWithCompanyOnly,
+  contactWithDepartmentOnly,
+  contactWithWorkTitleOnly,
+  contactWithCompanyAndDepartment,
+  contactWithCompanyAndWorkTitle,
+  contactWithDepartmentAndWorkTitle,
+  contactWithCompanyDepartmentAndWorkTitle,
+  contactWithFullAddressOnly,
+  contactWithStreetAddressOnly,
+  contactWithCityOnly,
+  contactWithZipCodeOnly,
+  contactWithStreetAndZipCode,
+  contactWithStateAndCountry,
+  contactWithSipOnly,
+  contactWithWebsiteOnly,
+  contactWithNotesOnly,
+]
diff --git a/libs/generic-view/feature/src/lib/setup-component.tsx b/libs/generic-view/feature/src/lib/setup-component.tsx
index 8da69b2a42..5ed9e43377 100644
--- a/libs/generic-view/feature/src/lib/setup-component.tsx
+++ b/libs/generic-view/feature/src/lib/setup-component.tsx
@@ -3,29 +3,51 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
-import React, { ComponentType, ReactElement, useMemo } from "react"
+import React, {
+  ComponentType,
+  CSSProperties,
+  ReactElement,
+  useMemo,
+} from "react"
 import { ReduxRootState } from "Core/__deprecated__/renderer/store"
-import styled, { css } from "styled-components"
 import { useSelector } from "react-redux"
 import {
   selectActiveApiDeviceId,
   selectComponentConfig,
   selectComponentData,
   selectComponentDataProvider,
+  selectComponentExtra,
   selectComponentLayout,
   selectEntitiesData,
   selectEntitiesIdFieldKey,
   selectEntityData,
+  useFormField,
 } from "generic-view/store"
 import {
   dataProviderFilter,
   dataProviderSort,
   mapLayoutSizes,
   RecursiveComponent,
+  useViewFormContext,
 } from "generic-view/utils"
-import { EntityData, Layout } from "device/models"
-import { set } from "lodash"
-import { useFormContext } from "react-hook-form"
+import {
+  DataProviderField,
+  EntityData,
+  ExtraConfig,
+  Layout,
+} from "device/models"
+import {
+  cloneDeep,
+  flatten,
+  get,
+  isArray,
+  isNumber,
+  isObject,
+  isString,
+  map,
+  set,
+} from "lodash"
+import { Tooltip, Paragraph5 } from "generic-view/ui"
 
 export const setupComponent = <P extends object>(
   Component: ComponentType<P>
@@ -40,7 +62,8 @@ export const setupComponent = <P extends object>(
       ...dataProps
     } = props
     const deviceId = useSelector(selectActiveApiDeviceId)!
-    const formContext = useFormContext()
+    const getFormContext = useViewFormContext()
+
     let dataItemId = props.dataItemId
     const layout = useSelector((state: ReduxRootState) => {
       return selectComponentLayout(state, { viewKey, componentKey })
@@ -51,10 +74,19 @@ export const setupComponent = <P extends object>(
     const dataProvider = useSelector((state: ReduxRootState) => {
       return selectComponentDataProvider(state, { viewKey, componentKey })
     })
+    const extra = useSelector((state: ReduxRootState) => {
+      return selectComponentExtra(state, { viewKey, componentKey })
+    })
     const componentData = useSelector((state: ReduxRootState) => {
       if (dataProvider) return
       return selectComponentData(state, { viewKey, componentKey })
     })
+    const formDataV2 = useFormField({
+      formName:
+        dataProvider?.source === "form-fields-v2"
+          ? dataProvider.formName
+          : undefined,
+    })
     const entitiesData =
       useSelector((state: ReduxRootState) => {
         if (dataProvider?.source !== "entities-array") return
@@ -79,17 +111,15 @@ export const setupComponent = <P extends object>(
       }) as EntityData
     })
 
-    const editableProps = {
+    const extraData: ExtraConfig = {}
+
+    const editableProps = cloneDeep({
       ...dataProps,
-      config: {
-        ...config,
-      },
-      data: undefined as unknown,
-    }
+      config,
+      data: componentData,
+    })
 
-    if (!dataProvider) {
-      editableProps.data = componentData
-    } else if (dataProvider?.source === "entities-array") {
+    if (dataProvider?.source === "entities-array") {
       const filteredData = dataProviderFilter(
         [...entitiesData],
         dataProvider.filters
@@ -98,34 +128,73 @@ export const setupComponent = <P extends object>(
       editableProps.data = sortedData?.map((item) => item[idFieldKey!])
     } else if (dataProvider?.source === "entities-field") {
       if (entityData) {
-        for (const [key, field] of Object.entries(dataProvider.fields)) {
-          const value = entityData[field]
-          if (value === undefined) continue
-          set(editableProps || {}, key, value)
+        for (const fieldConfig of dataProvider.fields) {
+          const { componentField, providerField, ...config } = fieldConfig
+          const value = processFormFields(
+            config,
+            get(entityData, providerField)
+          )
+          if (isString(value) && componentField === "dataItemId") {
+            dataItemId = value
+            continue
+          }
+          if (componentField.startsWith("extra-data.")) {
+            const extraPropsKey = componentField.replace(/^extra-data\./, "")
+            set(extraData, extraPropsKey, value)
+            continue
+          }
+          set(editableProps || {}, componentField, value)
         }
       }
     } else if (dataProvider?.source === "form-fields") {
-      for (const [key, field] of Object.entries(dataProvider.fields)) {
-        const value = formContext.getValues(field)
-        if (value === undefined) continue
-        if (key === "dataItemId") {
+      const formContext = getFormContext(dataProvider.formKey)
+      const isFormElement = componentName!.startsWith("form.")
+
+      for (const fieldConfig of dataProvider.fields) {
+        const { componentField, providerField, ...config } = fieldConfig
+        const fieldValue = isFormElement
+          ? formContext.getValues(providerField)
+          : formContext.watch(providerField)
+        const value = processFormFields(config, fieldValue)
+
+        if (isString(value) && componentField === "dataItemId") {
           dataItemId = value
           continue
         }
-        set(editableProps, key, value)
+        set(editableProps || {}, componentField, value)
+      }
+    } else if (dataProvider?.source === "form-fields-v2") {
+      for (const fieldConfig of dataProvider.fields) {
+        const { componentField, providerField, ...config } = fieldConfig
+        const value = processFormFields(
+          config,
+          formDataV2.getValue(providerField)
+        )
+        if (isString(value) && componentField === "dataItemId") {
+          dataItemId = value
+          continue
+        }
+        set(editableProps || {}, componentField, value)
       }
     }
     const editablePropsDependency = JSON.stringify(editableProps)
     const layoutDependency = JSON.stringify(layout)
+    const styleDependency = JSON.stringify(style)
     const dataProviderDependency = JSON.stringify(dataProvider)
+    const formDataV2Dependency = JSON.stringify(formDataV2)
+
+    const styles = useMemo(() => {
+      return setupStyles(style, layout)
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [layoutDependency, styleDependency])
 
     return useMemo(() => {
-      const ComponentWithProps = () => (
+      const componentElement = (
         <Component
           {...(editableProps as P)}
           viewKey={viewKey}
           componentKey={componentKey}
-          style={style}
+          style={styles}
           className={className}
           dataItemId={dataItemId}
           componentName={componentName}
@@ -139,87 +208,149 @@ export const setupComponent = <P extends object>(
         </Component>
       )
 
-      if (layout) {
-        return (
-          <Wrapper $layout={layout}>
-            <ComponentWithProps />
-          </Wrapper>
+      let innerContentComponent
+
+      if (extra?.tooltip?.contentText) {
+        innerContentComponent = (
+          <Paragraph5>{extra?.tooltip.contentText}</Paragraph5>
+        )
+      }
+
+      if (extraData.tooltip?.contentList) {
+        innerContentComponent = (
+          <>
+            {extraData.tooltip?.contentList?.map((content) => (
+              <Paragraph5 key={content}>{content}</Paragraph5>
+            ))}
+          </>
         )
       }
-      return <ComponentWithProps />
+
+      return extra?.tooltip ? (
+        <Tooltip
+          placement={extra.tooltip.placement}
+          offset={extra.tooltip.offset}
+        >
+          <Tooltip.Anchor>{componentElement}</Tooltip.Anchor>
+          <Tooltip.Content $defaultStyles>
+            {innerContentComponent}
+          </Tooltip.Content>
+        </Tooltip>
+      ) : (
+        componentElement
+      )
       // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
       children,
-      style,
       className,
       componentKey,
       viewKey,
       componentName,
       dataItemId,
-      layoutDependency,
       editablePropsDependency,
       dataProviderDependency,
+      styles,
+      formDataV2Dependency,
     ])
   }
 }
 
-const wrapperStyles = css<{
-  $layout: Pick<
-    Layout,
-    "flexPlacement" | "gridPlacement" | "margin" | "padding"
-  >
-}>(({ $layout }) => ({
-  ...($layout.gridPlacement && {
-    gridRow: $layout.gridPlacement.row,
-    gridColumn: $layout.gridPlacement.column,
-    gridRowEnd: $layout.gridPlacement.row + $layout.gridPlacement.height,
-    gridColumnEnd: $layout.gridPlacement.column + $layout.gridPlacement.width,
-  }),
-  ...($layout.flexPlacement && {
-    flexGrow: $layout.flexPlacement.grow,
-    flexBasis: $layout.flexPlacement.basis,
-    flexShrink: $layout.flexPlacement.shrink,
-    alignSelf: $layout.flexPlacement.alignSelf,
-    order: $layout.flexPlacement.order,
-  }),
-  ...($layout.margin && {
-    margin: $layout.margin,
-  }),
-  ...($layout.padding && {
-    padding: $layout.padding,
-  }),
-}))
-
-const childStyles = css<{
-  $layout: Pick<Layout, "flexLayout" | "gridLayout">
-}>(({ $layout }) => ({
-  ...($layout.gridLayout && {
-    display: "grid",
-    gridTemplateRows: mapLayoutSizes($layout.gridLayout.rows),
-    gridTemplateColumns: mapLayoutSizes($layout.gridLayout.columns),
-    rowGap: $layout.gridLayout.rowGap || 0,
-    columnGap: $layout.gridLayout.columnGap || 0,
-    justifyContent: $layout.gridLayout.justifyContent,
-    alignItems: $layout.gridLayout.alignItems,
-    justifyItems: $layout.gridLayout.justifyItems,
-  }),
-  ...($layout.flexLayout && {
-    display: "flex",
-    flexDirection: $layout.flexLayout.direction,
-    justifyContent: $layout.flexLayout.justifyContent,
-    alignItems: $layout.flexLayout.alignItems,
-    flexWrap: $layout.flexLayout.wrap,
-    rowGap: $layout.flexLayout.rowGap || 0,
-    columnGap: $layout.flexLayout.columnGap || 0,
-  }),
-}))
-
-const Wrapper = styled.div<{ $layout: Layout }>`
-  ${wrapperStyles};
-
-  > * {
-    width: 100%;
-    height: 100%;
-    ${childStyles};
+function flattenListByKey<T>(list: T[], key: string): unknown {
+  return flatten(map(list, (item) => get(item, key, [])))
+}
+
+const processFormFields = (
+  field: Partial<DataProviderField>,
+  value: unknown
+) => {
+  let newValue = value
+  if ("slice" in field && field.slice !== undefined && value instanceof Array) {
+    newValue =
+      field.slice.length > 1
+        ? value.slice(...field.slice)
+        : value.slice(field.slice[0])
+  }
+  if ("flat" in field && field.flat !== undefined && value instanceof Array) {
+    newValue = flattenListByKey(newValue as unknown[], field.flat)
+  }
+
+  if ("modifier" in field) {
+    switch (field.modifier) {
+      case "length":
+        if (isString(newValue) || isArray(newValue)) {
+          newValue = newValue.length
+        } else if (isObject(value)) {
+          newValue = Object.keys(value).length
+        }
+        break
+      case "boolean":
+        newValue = Boolean(value)
+        break
+    }
+  }
+  if ("condition" in field) {
+    switch (field.condition) {
+      case "eq":
+        newValue = newValue === field.value
+        break
+      case "ne":
+        newValue = newValue !== field.value
+        break
+      case "gt":
+        if (isNumber(newValue) && isNumber(field.value)) {
+          newValue = newValue > field.value
+        }
+        break
+      case "lt":
+        if (isNumber(newValue) && isNumber(field.value)) {
+          newValue = newValue < field.value
+        }
+        break
+    }
+  }
+  return newValue
+}
+
+const setupStyles = (style?: CSSProperties, layout?: Layout) => {
+  return {
+    ...style,
+    ...(layout?.gridPlacement && {
+      gridRow: layout.gridPlacement.row,
+      gridColumn: layout.gridPlacement.column,
+      gridRowEnd: layout.gridPlacement.row + layout.gridPlacement.height,
+      gridColumnEnd: layout.gridPlacement.column + layout.gridPlacement.width,
+    }),
+    ...(layout?.flexPlacement && {
+      flexGrow: layout.flexPlacement.grow,
+      flexBasis: layout.flexPlacement.basis,
+      flexShrink: layout.flexPlacement.shrink,
+      alignSelf: layout.flexPlacement.alignSelf,
+      order: layout.flexPlacement.order,
+    }),
+    ...(layout?.margin && {
+      margin: layout.margin,
+    }),
+    ...(layout?.padding && {
+      padding: layout.padding,
+    }),
+    ...(layout?.flexLayout && {
+      display: "flex",
+      flexDirection: layout.flexLayout.direction,
+      justifyContent: layout.flexLayout.justifyContent,
+      alignItems: layout.flexLayout.alignItems,
+      flexWrap: layout.flexLayout.wrap,
+      rowGap: layout.flexLayout.rowGap || 0,
+      columnGap: layout.flexLayout.columnGap || 0,
+    }),
+    ...(layout?.gridLayout && {
+      display: "grid",
+      gridTemplateRows: mapLayoutSizes(layout.gridLayout.rows),
+      gridTemplateColumns: mapLayoutSizes(layout.gridLayout.columns),
+      rowGap: layout.gridLayout.rowGap || 0,
+      columnGap: layout.gridLayout.columnGap || 0,
+      justifyContent: layout.gridLayout.justifyContent,
+      alignItems: layout.gridLayout.alignItems,
+      justifyItems: layout.gridLayout.justifyItems,
+    }),
   }
-`
+}
diff --git a/libs/generic-view/feature/src/lib/use-dev-console.ts b/libs/generic-view/feature/src/lib/use-dev-console.ts
index d6b47c6286..30f9824346 100644
--- a/libs/generic-view/feature/src/lib/use-dev-console.ts
+++ b/libs/generic-view/feature/src/lib/use-dev-console.ts
@@ -16,6 +16,7 @@ import {
 import { useDispatch, useSelector } from "react-redux"
 import { Dispatch } from "Core/__deprecated__/renderer/store"
 import { EntityData, EntityId } from "device/models"
+import { contactsSeedData } from "./seed-data/contacts-seed-data"
 
 export const useDevConsole = () => {
   const dispatch = useDispatch<Dispatch>()
@@ -26,6 +27,9 @@ export const useDevConsole = () => {
     if (process.env.NODE_ENV === "development" && activeDeviceId) {
       if (typeof global !== "undefined") {
         Object.assign(global, {
+          _seedDataMap: {
+            contacts: contactsSeedData,
+          },
           _getEntitiesData: (
             entitiesType: string,
             responseType: "json" | "file" = "json",
@@ -90,6 +94,17 @@ export const useDevConsole = () => {
               updateEntityDataAction({ entitiesType, entityId, data, deviceId })
             )
           },
+          _createMultipleEntities: async (
+            entitiesType: string,
+            entities: EntityData[],
+            deviceId = activeDeviceId
+          ) => {
+            for (const data of entities) {
+              await dispatch(
+                createEntityDataAction({ entitiesType, data, deviceId })
+              )
+            }
+          },
         })
       }
     }
diff --git a/libs/generic-view/feature/src/lib/use-dev-views/use-dev-views.tsx b/libs/generic-view/feature/src/lib/use-dev-views/use-dev-views.tsx
index a4f8ad892d..c20a849bec 100644
--- a/libs/generic-view/feature/src/lib/use-dev-views/use-dev-views.tsx
+++ b/libs/generic-view/feature/src/lib/use-dev-views/use-dev-views.tsx
@@ -8,6 +8,7 @@ import { selectActiveApiDeviceId, setGenericConfig } from "generic-view/store"
 import customViews from "./views"
 import { useDispatch, useSelector } from "react-redux"
 import { Dispatch } from "Core/__deprecated__/renderer/store"
+import { isEmpty } from "lodash"
 
 export const useDevViews = (viewKey: string) => {
   const dispatch = useDispatch<Dispatch>()
@@ -21,7 +22,7 @@ export const useDevViews = (viewKey: string) => {
       : undefined
 
   useEffect(() => {
-    if (newConfig && process.env.DEV_API_CONFIG === "1") {
+    if (!isEmpty(newConfig) && process.env.DEV_API_CONFIG === "1") {
       dispatch(
         setGenericConfig({
           feature: viewKey,
diff --git a/libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts b/libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts
index 77409b3796..0e78e70e6b 100644
--- a/libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts
+++ b/libs/generic-view/feature/src/lib/use-dev-views/views/contacts-view.ts
@@ -5,234 +5,7 @@
 
 import { View } from "generic-view/utils"
 
-const view: View = {
-  main: {
-    // @ts-ignore
-    screenTitle: "Contacts",
-    component: "block-plain",
-    layout: {
-      gridLayout: {
-        rows: ["auto", "1fr"],
-        columns: ["1fr"],
-      },
-    },
-    childrenKeys: ["importContactsButton", "contactsLoader"],
-  },
-  contactsLoader: {
-    component: "entities-loader",
-    config: {
-      entitiesTypes: ["contacts"],
-    },
-    childrenKeys: ["contactsForm"],
-  },
-  contactsForm: {
-    component: "form",
-    config: {
-      formOptions: {
-        defaultValues: {
-          activeContactId: undefined,
-          selectedContacts: [],
-          totalContacts: 0,
-        },
-      },
-    },
-    childrenKeys: ["contactsFormWrapper"],
-  },
-  contactsFormWrapper: {
-    component: "block-box",
-    layout: {
-      flexLayout: {
-        direction: "row",
-      },
-    },
-    childrenKeys: ["contactsListTable", "detailsWrapper"],
-  },
-  contactsListTable: {
-    component: "table",
-    dataProvider: {
-      source: "entities-array",
-      entitiesType: "contacts",
-      sort: {
-        firstName: {
-          priority: 2,
-          direction: "asc",
-        },
-        lastName: {
-          priority: 1,
-          direction: "asc",
-          orderingPatterns: ["/^\\p{L}/miu", "/^\\d/m", "/^\\#/m"],
-        },
-      },
-      filters: {
-        firstName: ["/.+/"],
-      },
-    },
-    config: {
-      formOptions: {
-        activeIdFieldName: "activeContactId",
-        selectedIdsFieldName: "selectedContacts",
-        totalItemsFieldName: "totalContacts",
-      },
-    },
-    childrenKeys: ["columnCheckbox", "columnName", "columnOptional"],
-  },
-  columnCheckbox: {
-    component: "table.cell",
-    config: {
-      width: 40,
-    },
-    childrenKeys: ["contactCheckbox"],
-  },
-  contactCheckbox: {
-    component: "form.checkboxInput",
-    config: {
-      name: "selectedContacts",
-    },
-    dataProvider: {
-      source: "entities-field",
-      entitiesType: "contacts",
-      fields: {
-        "config.value": "contactId",
-      },
-    },
-  },
-  columnName: {
-    component: "table.cell",
-    config: {
-      width: 300,
-    },
-    childrenKeys: ["contactJoinedNames"],
-  },
-  contactJoinedNames: {
-    component: "block-plain",
-    layout: {
-      flexLayout: {
-        direction: "row",
-        columnGap: "0.5rem",
-      },
-    },
-    childrenKeys: ["contactFirstName", "contactLastName"],
-  },
-  contactFirstName: {
-    component: "block-plain",
-    layout: {
-      flexLayout: {
-        direction: "row",
-        columnGap: "0.5rem",
-      },
-    },
-    childrenKeys: ["contactFirstNamePrefix", "contactFirstNameValue"],
-  },
-  contactFirstNamePrefix: {
-    component: "text-plain",
-    dataProvider: {
-      source: "entities-field",
-      entitiesType: "contacts",
-      fields: {
-        "data.text": "namePrefix",
-      },
-    },
-  },
-  contactFirstNameValue: {
-    component: "text-plain",
-    dataProvider: {
-      source: "entities-field",
-      entitiesType: "contacts",
-      fields: {
-        "data.text": "firstName",
-      },
-    },
-  },
-  contactLastName: {
-    component: "text-plain",
-    dataProvider: {
-      source: "entities-field",
-      entitiesType: "contacts",
-      fields: {
-        "data.text": "lastName",
-      },
-    },
-  },
-  columnOptional: {
-    component: "form.conditionalRenderer",
-    config: {
-      formFieldName: "activeContactId",
-      renderIfFalse: true,
-    },
-    childrenKeys: ["columnCompany"],
-  },
-  columnCompany: {
-    component: "table.cell",
-    config: {
-      width: 200,
-    },
-    childrenKeys: ["contactCompany"],
-  },
-  contactCompany: {
-    component: "text-plain",
-    dataProvider: {
-      source: "entities-field",
-      entitiesType: "contacts",
-      fields: {
-        "data.text": "company",
-      },
-    },
-  },
-  detailsWrapper: {
-    component: "form.conditionalRenderer",
-    config: {
-      formFieldName: "activeContactId",
-    },
-    childrenKeys: ["details"],
-  },
-  details: {
-    component: "block-box",
-    config: {
-      title: "Contact",
-    },
-    dataProvider: {
-      source: "form-fields",
-      fields: {
-        dataItemId: "activeContactId",
-      },
-    },
-    childrenKeys: ["contactDetails", "disableButton"],
-  },
-  contactDetails: {
-    component: "block-plain",
-    childrenKeys: ["contactDetailsEmail", "contactDetailsName"],
-  },
-  contactDetailsEmail: {
-    component: "text-plain",
-    dataProvider: {
-      source: "entities-field",
-      entitiesType: "contacts",
-      fields: {
-        "data.text": "email",
-      },
-    },
-  },
-  contactDetailsName: {
-    component: "text-plain",
-    dataProvider: {
-      source: "entities-field",
-      entitiesType: "contacts",
-      fields: {
-        "data.text": "firstName",
-      },
-    },
-  },
-  disableButton: {
-    component: "button-primary",
-    config: {
-      text: "Hide details",
-      action: {
-        type: "form-set-field",
-        key: "activeContactId",
-        value: undefined,
-      },
-    },
-  },
-}
+// @ts-ignore
+const view: View = {}
 
 export default view
diff --git a/libs/generic-view/models/src/index.ts b/libs/generic-view/models/src/index.ts
index a220caac7b..272681437b 100644
--- a/libs/generic-view/models/src/index.ts
+++ b/libs/generic-view/models/src/index.ts
@@ -38,7 +38,13 @@ import { overviewOsVersion } from "./lib/overview-os-version"
 import { tooltipContent } from "./lib/tooltip-content"
 import { aboutDataBox } from "./lib/about-data-box"
 import { h3Component, h4Component, h5Component } from "./lib/headers"
-import { p1Component, p2Component, p3Component } from "./lib/paragraphs"
+import {
+  p1Component,
+  p2Component,
+  p3Component,
+  p4Component,
+  p5Component,
+} from "./lib/paragraphs"
 import { lastBackupDate } from "./lib/last-backup-date"
 import { backupCreate } from "./lib/backup-create"
 import { importContacts } from "./lib/import-contacts"
@@ -51,6 +57,11 @@ import { table } from "./lib/table"
 import { formConditionalRenderer } from "./lib/form-conditional-renderer"
 import { tableCell } from "./lib/table-cell"
 import { entitiesLoader } from "./lib/entities-loader"
+import { conditionalRenderer } from "./lib/conditional-renderer"
+import { toast } from "./lib/toast"
+import { selectionManager } from "./lib/selection-manager"
+import { formatMessage } from "./lib/format-message"
+import { appPortal } from "./lib/app-portal"
 
 export * from "./lib/block-box"
 export * from "./lib/block-plain"
@@ -101,6 +112,12 @@ export * from "./lib/table"
 export * from "./lib/table-cell"
 export * from "./lib/form-conditional-renderer"
 export * from "./lib/entities-loader"
+export * from "./lib/common-validators"
+export * from "./lib/conditional-renderer"
+export * from "./lib/format-message"
+export * from "./lib/toast"
+export * from "./lib/selection-manager"
+export * from "./lib/app-portal"
 
 export default {
   [blockBox.key]: blockBox,
@@ -142,6 +159,8 @@ export default {
   [p1Component.key]: p1Component,
   [p2Component.key]: p2Component,
   [p3Component.key]: p3Component,
+  [p4Component.key]: p4Component,
+  [p5Component.key]: p5Component,
   [overviewOsVersion.key]: overviewOsVersion,
   [aboutDataBox.key]: aboutDataBox,
   [lastBackupDate.key]: lastBackupDate,
@@ -155,4 +174,9 @@ export default {
   [table.key]: table,
   [tableCell.key]: tableCell,
   [entitiesLoader.key]: entitiesLoader,
+  [conditionalRenderer.key]: conditionalRenderer,
+  [formatMessage.key]: formatMessage,
+  [toast.key]: toast,
+  [selectionManager.key]: selectionManager,
+  [appPortal.key]: appPortal,
 } as const
diff --git a/libs/generic-view/models/src/lib/app-portal.ts b/libs/generic-view/models/src/lib/app-portal.ts
new file mode 100644
index 0000000000..e1d2527d1d
--- /dev/null
+++ b/libs/generic-view/models/src/lib/app-portal.ts
@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { z } from "zod"
+
+const dataValidator = z.undefined()
+
+const configValidator = z.object({
+  portal: z.literal("app-header"),
+})
+
+export type AppPortalConfig = z.infer<typeof configValidator>
+
+export const appPortal = {
+  key: "app-portal",
+  dataValidator,
+  configValidator,
+} as const
diff --git a/libs/generic-view/models/src/lib/button-primary.ts b/libs/generic-view/models/src/lib/button-primary.ts
index 3428389296..84a11994b0 100644
--- a/libs/generic-view/models/src/lib/button-primary.ts
+++ b/libs/generic-view/models/src/lib/button-primary.ts
@@ -5,14 +5,14 @@
 
 import { z } from "zod"
 import { IconType } from "generic-view/utils"
-import { buttonActionValidator } from "./common-validators"
+import { buttonActionsValidator } from "./common-validators"
 
 const dataValidator = z.undefined()
 
 const configValidator = z.object({
-  text: z.string(),
+  text: z.string().optional(),
   icon: z.nativeEnum(IconType).optional(),
-  action: buttonActionValidator,
+  actions: buttonActionsValidator,
   disabled: z.boolean().optional(),
 })
 
diff --git a/libs/generic-view/models/src/lib/button-text.ts b/libs/generic-view/models/src/lib/button-text.ts
index b3e79b9eaf..159d9edffc 100644
--- a/libs/generic-view/models/src/lib/button-text.ts
+++ b/libs/generic-view/models/src/lib/button-text.ts
@@ -5,16 +5,16 @@
 
 import { z } from "zod"
 import { IconType } from "generic-view/utils"
-import { buttonActionValidator } from "./common-validators"
+import { buttonActionsValidator } from "./common-validators"
 
 const dataValidator = z.undefined()
 
 const configValidator = z.object({
-  text: z.string(),
+  text: z.string().optional(),
   icon: z.nativeEnum(IconType).optional(),
-  action: buttonActionValidator,
+  actions: buttonActionsValidator,
   modifiers: z
-    .array(z.enum(["link", "uppercase", "hover-underline"]))
+    .array(z.enum(["link", "uppercase", "hover-underline", "hover-background"]))
     .optional(),
 })
 
diff --git a/libs/generic-view/models/src/lib/common-validators.ts b/libs/generic-view/models/src/lib/common-validators.ts
index cb495ff6a2..2e30a02d22 100644
--- a/libs/generic-view/models/src/lib/common-validators.ts
+++ b/libs/generic-view/models/src/lib/common-validators.ts
@@ -54,22 +54,69 @@ export const formActionValidator = z.union([
   z.object({
     type: z.literal("form-set-field"),
     key: z.string(),
-    value: z.union([z.string(), z.number(), z.boolean()]).optional(),
+    formKey: z.string().optional(),
+    value: z
+      .union([
+        z.string(),
+        z.number(),
+        z.boolean(),
+        z.array(z.unknown()),
+        z.record(z.union([z.string(), z.number()]), z.unknown()),
+      ])
+      .optional(),
   }),
   z.object({
     type: z.literal("form-toggle-field"),
     key: z.string(),
+    formKey: z.string().optional(),
   }),
   z.object({
     type: z.literal("form-reset"),
+    formKey: z.string().optional(),
   }),
 ])
 
-export const buttonActionValidator = z.union([
-  modalActionValidator,
-  navigateActionValidator,
-  customActionValidator,
-  formActionValidator,
-])
+export const toastActionValidator = z.object({
+  type: z.literal("open-toast"),
+  toastKey: z.string(),
+})
+
+const entityPostActionsValidator = z
+  .array(
+    z.union([
+      modalActionValidator,
+      navigateActionValidator,
+      customActionValidator,
+      formActionValidator,
+      toastActionValidator,
+    ])
+  )
+  .optional()
+
+export const entityActionValidator = z.object({
+  type: z.literal("entities-delete"),
+  entitiesType: z.string(),
+  ids: z.array(z.string()),
+  postActions: z
+    .object({
+      success: entityPostActionsValidator,
+      failure: entityPostActionsValidator,
+    })
+    .optional(),
+})
+
+export type EntityAction = z.infer<typeof entityActionValidator>
+
+export const buttonActionsValidator = z.array(
+  z.union([
+    modalActionValidator,
+    navigateActionValidator,
+    customActionValidator,
+    formActionValidator,
+    entityActionValidator,
+    toastActionValidator,
+  ])
+)
 
-export type ButtonAction = z.infer<typeof buttonActionValidator>
+export type ButtonActions = z.infer<typeof buttonActionsValidator>
+export type ButtonAction = ButtonActions[number]
diff --git a/libs/generic-view/models/src/lib/conditional-renderer.ts b/libs/generic-view/models/src/lib/conditional-renderer.ts
new file mode 100644
index 0000000000..4fb8d1d596
--- /dev/null
+++ b/libs/generic-view/models/src/lib/conditional-renderer.ts
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { z } from "zod"
+
+const dataValidator = z.object({
+  render: z.boolean(),
+})
+export type ConditionalRendererData = z.infer<typeof dataValidator>
+
+const configValidator = z.undefined()
+
+export const conditionalRenderer = {
+  key: "conditional-renderer",
+  dataValidator,
+  configValidator,
+} as const
diff --git a/libs/generic-view/models/src/lib/device.ts b/libs/generic-view/models/src/lib/device.ts
index f53139f291..96055219ae 100644
--- a/libs/generic-view/models/src/lib/device.ts
+++ b/libs/generic-view/models/src/lib/device.ts
@@ -9,20 +9,21 @@ import { DeviceProperties } from "device-manager/models"
 import { ApiConfig, MenuConfig, OverviewData } from "device/models"
 import { DeviceId } from "Core/device/constants/device-id"
 
+export interface GenericForm {
+  fields: Record<string, unknown>
+}
+
+interface Feature<Data = Record<string, unknown>> {
+  config?: View
+  data?: Data
+  forms?: Record<string, GenericForm>
+}
+
 export type Features = {
-  "mc-overview"?: {
-    config?: View
-    data?: OverviewData
-  }
-  "mc-about"?: {
-    config?: View
-    data?: OverviewData
-  }
+  "mc-overview"?: Feature<OverviewData>
+  "mc-about"?: Feature<OverviewData>
 } & {
-  [key: string]: {
-    config?: View
-    data?: Record<string, unknown>
-  }
+  [key: string]: Feature
 }
 
 export interface DeviceConfiguration {
@@ -31,9 +32,7 @@ export interface DeviceConfiguration {
   features?: Features
 }
 
-export interface Device
-  extends DeviceProperties,
-    Partial<DeviceConfiguration> {
+export interface Device extends DeviceProperties, Partial<DeviceConfiguration> {
   id: DeviceId
   serialNumber: string | undefined
   deviceType: DeviceType
diff --git a/libs/generic-view/models/src/lib/entities-loader.ts b/libs/generic-view/models/src/lib/entities-loader.ts
index d5f630c6d8..52c649a21b 100644
--- a/libs/generic-view/models/src/lib/entities-loader.ts
+++ b/libs/generic-view/models/src/lib/entities-loader.ts
@@ -9,6 +9,7 @@ const dataValidator = z.undefined()
 
 const configValidator = z.object({
   entitiesTypes: z.array(z.string()),
+  text: z.string().optional(),
 })
 
 export type EntitiesLoaderConfig = z.infer<typeof configValidator>
diff --git a/libs/generic-view/models/src/lib/form-checkbox-input.ts b/libs/generic-view/models/src/lib/form-checkbox-input.ts
index dadb98bfc7..c4007db408 100644
--- a/libs/generic-view/models/src/lib/form-checkbox-input.ts
+++ b/libs/generic-view/models/src/lib/form-checkbox-input.ts
@@ -15,10 +15,12 @@ const inputValidation: z.ZodType<Pick<RegisterOptions, "required">> = z.object({
 const configValidator = z.object({
   name: z.string(),
   value: z.string().optional(),
+  multipleValues: z.array(z.union([z.string(), z.number()])).optional(),
   checked: z.boolean().optional(),
   label: z.string().optional(),
   validation: inputValidation.optional(),
   disabled: z.boolean().optional(),
+  size: z.enum(["small", "large"]).optional(),
 })
 
 export type FormCheckboxInputConfig = z.infer<typeof configValidator>
diff --git a/libs/generic-view/models/src/lib/form.ts b/libs/generic-view/models/src/lib/form.ts
index cb764f2674..1c4901b526 100644
--- a/libs/generic-view/models/src/lib/form.ts
+++ b/libs/generic-view/models/src/lib/form.ts
@@ -10,6 +10,7 @@ const dataValidator = z.undefined()
 
 interface Config {
   formOptions?: Pick<UseFormProps, "mode" | "reValidateMode" | "defaultValues">
+  defaultValues?: Record<string, unknown>
 }
 
 const configValidator: z.ZodType<Config | undefined> = z
@@ -21,6 +22,7 @@ const configValidator: z.ZodType<Config | undefined> = z
       reValidateMode: z.enum(["onChange", "onBlur", "onSubmit"]).optional(),
       defaultValues: z.record(z.string(), z.any()).optional(),
     }),
+    defaultValues: z.record(z.string(), z.any()).optional(),
   })
   .optional()
 
diff --git a/libs/generic-view/models/src/lib/format-message.ts b/libs/generic-view/models/src/lib/format-message.ts
new file mode 100644
index 0000000000..e86ac67c54
--- /dev/null
+++ b/libs/generic-view/models/src/lib/format-message.ts
@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { z } from "zod"
+
+const fieldsSchema = z.record(z.string(), z.union([z.string(), z.number()]))
+
+const dataValidator = z.object({
+  fields: fieldsSchema,
+})
+
+export type FormatMessageData = z.infer<typeof dataValidator>
+
+const configValidator = z.object({
+  messageTemplate: z.string(),
+  fields: fieldsSchema.optional(),
+})
+
+export type FormatMessageConfig = z.infer<typeof configValidator>
+
+export const formatMessage = {
+  key: "format-message",
+  dataValidator,
+  configValidator,
+} as const
diff --git a/libs/generic-view/models/src/lib/modal-close-button.ts b/libs/generic-view/models/src/lib/modal-close-button.ts
index dc96be4ef0..95da618a2a 100644
--- a/libs/generic-view/models/src/lib/modal-close-button.ts
+++ b/libs/generic-view/models/src/lib/modal-close-button.ts
@@ -4,13 +4,13 @@
  */
 
 import { z } from "zod"
-import { buttonActionValidator } from "./common-validators"
+import { buttonActionsValidator } from "./common-validators"
 
 const dataValidator = z.undefined()
 
 const configValidator = z
   .object({
-    action: buttonActionValidator.optional(),
+    actions: buttonActionsValidator.optional(),
   })
   .optional()
 
diff --git a/libs/generic-view/models/src/lib/paragraphs.ts b/libs/generic-view/models/src/lib/paragraphs.ts
index 36ec641203..2949c294b1 100644
--- a/libs/generic-view/models/src/lib/paragraphs.ts
+++ b/libs/generic-view/models/src/lib/paragraphs.ts
@@ -4,12 +4,20 @@
  */
 
 import { z } from "zod"
+import { color } from "../../../theme/src/lib/color"
 
 const dataValidator = z.undefined()
 
-const configValidator = z.object({
-  text: z.string(),
-})
+const configValidator = z
+  .object({
+    text: z.string().optional(),
+    color: z
+      .enum(
+        Object.keys(color) as [keyof typeof color, ...(keyof typeof color)[]]
+      )
+      .optional(),
+  })
+  .optional()
 
 export type ParagraphConfig = z.infer<typeof configValidator>
 
@@ -30,3 +38,15 @@ export const p3Component = {
   dataValidator,
   configValidator,
 } as const
+
+export const p4Component = {
+  key: "p4-component",
+  dataValidator,
+  configValidator,
+} as const
+
+export const p5Component = {
+  key: "p5-component",
+  dataValidator,
+  configValidator,
+} as const
diff --git a/libs/generic-view/models/src/lib/selection-manager.ts b/libs/generic-view/models/src/lib/selection-manager.ts
new file mode 100644
index 0000000000..238fa50eed
--- /dev/null
+++ b/libs/generic-view/models/src/lib/selection-manager.ts
@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { z } from "zod"
+
+const dataValidator = z.undefined()
+
+const configValidator = z.undefined().optional()
+
+export type SelectionManagerConfig = z.infer<typeof configValidator>
+
+export const selectionManager = {
+  key: "selection-manager",
+  dataValidator,
+  configValidator,
+} as const
diff --git a/libs/generic-view/models/src/lib/table-cell.ts b/libs/generic-view/models/src/lib/table-cell.ts
index b72f39ead0..5accd9abbc 100644
--- a/libs/generic-view/models/src/lib/table-cell.ts
+++ b/libs/generic-view/models/src/lib/table-cell.ts
@@ -8,7 +8,7 @@ import { z } from "zod"
 const dataValidator = z.undefined()
 
 const configValidator = z.object({
-  width: z.number(),
+  width: z.number().or(z.string()).optional(),
   colSpan: z.number().optional(),
   rowSpan: z.number().optional(),
 })
diff --git a/libs/generic-view/models/src/lib/table.ts b/libs/generic-view/models/src/lib/table.ts
index 3090092699..947045cfbe 100644
--- a/libs/generic-view/models/src/lib/table.ts
+++ b/libs/generic-view/models/src/lib/table.ts
@@ -13,7 +13,15 @@ const configValidator = z.object({
   formOptions: z.object({
     activeIdFieldName: z.string().optional(),
     selectedIdsFieldName: z.string().optional(),
-    totalItemsFieldName: z.string().optional(),
+    allIdsFieldName: z.string().optional(),
+  }),
+  form: z.object({
+    formName: z.string(),
+    assignFields: z.object({
+      activeIdFieldName: z.string().optional(),
+      selectedIdsFieldName: z.string().optional(),
+      allIdsFieldName: z.string().optional(),
+    }),
   }),
   columnsNames: z.array(z.string()).optional(),
 })
diff --git a/libs/generic-view/models/src/lib/toast.ts b/libs/generic-view/models/src/lib/toast.ts
new file mode 100644
index 0000000000..371fae78b1
--- /dev/null
+++ b/libs/generic-view/models/src/lib/toast.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { z } from "zod"
+
+const dataValidator = z.undefined()
+
+const configValidator = z
+  .object({
+    visibilityDuration: z.number().nonnegative().optional(),
+  })
+  .optional()
+
+export type ToastConfig = z.infer<typeof configValidator>
+
+export const toast = {
+  key: "toast",
+  dataValidator,
+  configValidator,
+} as const
diff --git a/libs/generic-view/store/src/index.ts b/libs/generic-view/store/src/index.ts
index 30cbb153da..1aec393a46 100644
--- a/libs/generic-view/store/src/index.ts
+++ b/libs/generic-view/store/src/index.ts
@@ -61,4 +61,12 @@ export * from "./lib/data-transfer/reducer"
 export * from "./lib/data-transfer/actions"
 export * from "./lib/data-transfer/abort-data-transfer.action"
 export * from "./lib/data-migration/data-migration-percentage-progress.interface"
+
+export * from "./lib/toasts/reducer"
+export * from "./lib/toasts/actions"
+export * from "./lib/toasts/open-toast.action"
+
 export * from "./lib/action-names"
+
+export * from "./lib/use-form-field"
+export * from "./lib/use-form-register"
diff --git a/libs/generic-view/store/src/lib/action-names.ts b/libs/generic-view/store/src/lib/action-names.ts
index 538ebaa1af..dbac0d8c57 100644
--- a/libs/generic-view/store/src/lib/action-names.ts
+++ b/libs/generic-view/store/src/lib/action-names.ts
@@ -10,13 +10,13 @@ export enum ActionName {
   GetOutboxData = "api-actions/get-outbox-data",
 
   SetMenu = "generic-views/set-menu",
-  SetViewLayout = "generic-views/set-view-layout",
-  SetViewData = "generic-views/set-view-data",
   SetLastRefresh = "generic-views/set-last-refresh",
   AddDevice = "generic-views/add-device",
   RemoveDevice = "generic-views/remove-device",
   SetDeviceState = "generic-views/set-device-state",
   SetGenericConfig = "generic-views/set-generic-config",
+  RegisterForm = "generic-views/register-form",
+  SetFormField = "generic-views/set-form-field",
 
   OpenModal = "generic-modals/open-modal",
   CloseModal = "generic-modals/close-modal",
@@ -25,6 +25,10 @@ export enum ActionName {
   CloseDomainModals = "generic-modals/close-domain-modals",
   SetDeviceErrorModalOpened = "generic-modals/set-device-error-modal-opened",
 
+  AddToast = "generic-toasts/add-toast",
+  OpenToast = "generic-toasts/open-toast",
+  RemoveToast = "generic-toasts/remove-toast",
+
   SetBackupProcess = "generic-backups/set-backup-process",
   CleanBackupProcess = "generic-backups/clean-backup-process",
   BackupProcessStatus = "generic-backups/backup-process-status",
diff --git a/libs/generic-view/store/src/lib/entities/create-entity-data.action.ts b/libs/generic-view/store/src/lib/entities/create-entity-data.action.ts
index 22cb49a7da..d3f743f62c 100644
--- a/libs/generic-view/store/src/lib/entities/create-entity-data.action.ts
+++ b/libs/generic-view/store/src/lib/entities/create-entity-data.action.ts
@@ -10,6 +10,7 @@ import { DeviceId } from "Core/device/constants/device-id"
 import { ReduxRootState } from "Core/__deprecated__/renderer/store"
 import { ActionName } from "../action-names"
 import logger from "Core/__deprecated__/main/utils/logger"
+import { enhanceEntity } from "./helpers/enhance-entity"
 
 export const createEntityDataAction = createAsyncThunk<
   EntityData,
@@ -53,6 +54,8 @@ export const createEntityDataAction = createAsyncThunk<
       return rejectWithValue(undefined)
     }
 
-    return response.data.data
+    const computedFields =
+      genericEntities[deviceId][entitiesType]?.config.computedFields || {}
+    return enhanceEntity(response.data.data, { computedFields })
   }
 )
diff --git a/libs/generic-view/store/src/lib/entities/delete-entities-data.action.ts b/libs/generic-view/store/src/lib/entities/delete-entities-data.action.ts
index c18afe2d3c..f6da0077da 100644
--- a/libs/generic-view/store/src/lib/entities/delete-entities-data.action.ts
+++ b/libs/generic-view/store/src/lib/entities/delete-entities-data.action.ts
@@ -10,31 +10,44 @@ import { ReduxRootState } from "Core/__deprecated__/renderer/store"
 import { ActionName } from "../action-names"
 import { EntityId } from "device/models"
 import { difference } from "lodash"
+import delayResponse from "@appnroll/delay-response"
+
+interface DeleteEntitiesDataActionPayload {
+  entitiesType: string
+  ids: EntityId[]
+  deviceId: DeviceId
+  onSuccess?: () => Promise<void> | void
+  onError?: () => Promise<void> | void
+}
 
 export const deleteEntitiesDataAction = createAsyncThunk<
   EntityId[],
-  {
-    entitiesType: string
-    ids: EntityId[]
-    deviceId: DeviceId
-  },
+  DeleteEntitiesDataActionPayload,
   { state: ReduxRootState }
 >(
   ActionName.DeleteEntityData,
-  async ({ entitiesType, ids, deviceId }, { rejectWithValue }) => {
-    const response = await deleteEntitiesDataRequest({
-      entitiesType,
-      ids,
-      deviceId,
-    })
-
+  async (
+    { entitiesType, ids, deviceId, onSuccess, onError },
+    { rejectWithValue }
+  ) => {
+    const response = await delayResponse(
+      deleteEntitiesDataRequest({
+        entitiesType,
+        ids,
+        deviceId,
+      }),
+      1000
+    )
     if (!response.ok) {
+      await onError?.()
       return rejectWithValue(response.error)
     }
+    // TODO: consider handling partial success
     if (response.data?.failedIds) {
-      // TODO: Handle partial deletion of entities
+      await onSuccess?.()
       return difference(ids, response.data.failedIds)
     }
+    await onSuccess?.()
     return ids
   }
 )
diff --git a/libs/generic-view/store/src/lib/entities/get-entities-data.action.ts b/libs/generic-view/store/src/lib/entities/get-entities-data.action.ts
index 387a3601e1..e0509c323e 100644
--- a/libs/generic-view/store/src/lib/entities/get-entities-data.action.ts
+++ b/libs/generic-view/store/src/lib/entities/get-entities-data.action.ts
@@ -15,6 +15,7 @@ import { EntitiesFileData, EntitiesJsonData, EntityData } from "device/models"
 import { getFile } from "../file-transfer/get-file.action"
 import { ReduxRootState } from "Core/__deprecated__/renderer/store"
 import { AppError } from "Core/core/errors"
+import { enhanceEntity } from "./helpers/enhance-entity"
 
 export const getEntitiesDataAction = createAsyncThunk<
   EntityData[],
@@ -28,8 +29,11 @@ export const getEntitiesDataAction = createAsyncThunk<
   ActionName.GetEntitiesData,
   async (
     { responseType = "file", entitiesType, deviceId },
-    { rejectWithValue, dispatch }
+    { rejectWithValue, dispatch, getState }
   ) => {
+    let data = []
+    const { genericEntities } = getState()
+
     const response = await getEntitiesDataRequest({
       entitiesType,
       deviceId,
@@ -60,10 +64,15 @@ export const getEntitiesDataAction = createAsyncThunk<
       if (!readFileResponse.ok) {
         return rejectWithValue(readFileResponse.error)
       }
-      return readFileResponse.data.data
+      data = readFileResponse.data.data
     } else {
-      const { data } = response.data as EntitiesJsonData
-      return data
+      ;({ data } = response.data as EntitiesJsonData)
     }
+
+    const computedFields =
+      genericEntities[deviceId][entitiesType]?.config.computedFields || {}
+    return data.map((entity) => {
+      return enhanceEntity(entity, { computedFields })
+    })
   }
 )
diff --git a/libs/generic-view/store/src/lib/entities/helpers/compute-field.test.ts b/libs/generic-view/store/src/lib/entities/helpers/compute-field.test.ts
new file mode 100644
index 0000000000..ffc065fff3
--- /dev/null
+++ b/libs/generic-view/store/src/lib/entities/helpers/compute-field.test.ts
@@ -0,0 +1,451 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { EntityComputedFieldConfig, EntityData } from "device/models"
+import { computeField } from "./compute-field"
+
+describe("computeField", () => {
+  describe("filters fields", () => {
+    const entity: EntityData = {
+      name: "John",
+      surname: "Doe",
+      age: 25,
+      hobbies: ["reading", "swimming", "running"],
+      moreHobbies: ["cycling", "dancing"],
+    }
+    it("based on a regex pattern", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "filter",
+        pattern: "/Doe/",
+        fields: ["name", "surname"],
+      }
+      expect(computeField(entity, config)).toEqual(["Doe"])
+    })
+    it("based on a regex pattern with flags", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "filter",
+        pattern: "/^D/m",
+        fields: ["name", "surname"],
+      }
+      expect(computeField(entity, config)).toEqual(["Doe"])
+    })
+    it("based on a negated regex pattern", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "filter",
+        pattern: "/Doe/",
+        negatePattern: true,
+        fields: ["name", "surname"],
+      }
+      expect(computeField(entity, config)).toEqual(["John"])
+    })
+    it("based on a regex pattern with an array field", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "filter",
+        pattern: "/^r/m",
+        fields: ["hobbies[]"],
+      }
+      expect(computeField(entity, config)).toEqual(["reading", "running"])
+    })
+  })
+
+  describe("clears fields", () => {
+    const entity: EntityData = {
+      name: "John",
+      surname: "",
+      middleName: undefined,
+      age: 0,
+      isStudent: false,
+      address: {},
+      hobbies: [],
+    }
+    const baseConfig: EntityComputedFieldConfig = {
+      type: "clear",
+      fields: [
+        "name",
+        "surname",
+        "age",
+        "isStudent",
+        "address",
+        "hobbies",
+        "job",
+      ],
+    }
+    it("with default conditions", () => {
+      const config: EntityComputedFieldConfig = baseConfig
+      expect(computeField(entity, config)).toEqual(["John"])
+    })
+    it("with default conditions and an array field", () => {
+      const entityWithArray: EntityData = {
+        ...entity,
+        test: [1, "", 3],
+      }
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        fields: ["test[]"],
+      }
+      expect(computeField(entityWithArray, config)).toEqual([1, 3])
+    })
+    it("with empty strings allowed", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        allowEmptyString: true,
+      }
+      expect(computeField(entity, config)).toEqual(["John", ""])
+    })
+    it("with zeros allowed", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        allowZero: true,
+      }
+      expect(computeField(entity, config)).toEqual(["John", 0])
+    })
+    it("with false values allowed", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        allowFalse: true,
+      }
+      expect(computeField(entity, config)).toEqual(["John", false])
+    })
+  })
+
+  describe("slices fields", () => {
+    const entity: EntityData = {
+      name: "John",
+      surname: "Doe",
+      age: 25,
+      hobbies: ["reading", "swimming", "running"],
+    }
+    const baseConfig: EntityComputedFieldConfig = {
+      type: "slice",
+      fields: ["name", "surname", "age"],
+    }
+    it("with default conditions", () => {
+      const config: EntityComputedFieldConfig = baseConfig
+      expect(computeField(entity, config)).toEqual(["John", "Doe", 25])
+    })
+    it("with start index", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        start: 1,
+      }
+      expect(computeField(entity, config)).toEqual(["Doe", 25])
+    })
+    it("with end index", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        end: 2,
+      }
+      expect(computeField(entity, config)).toEqual(["John", "Doe"])
+    })
+    it("with start and end index", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        start: 1,
+        end: 2,
+      }
+      expect(computeField(entity, config)).toEqual(["Doe"])
+    })
+    it("with negative start index", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        start: -1,
+      }
+      expect(computeField(entity, config)).toEqual([25])
+    })
+    it("with negative end index", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        end: -1,
+      }
+      expect(computeField(entity, config)).toEqual(["John", "Doe"])
+    })
+    it("with negative start and end index", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        start: -2,
+        end: -1,
+      }
+      expect(computeField(entity, config)).toEqual(["Doe"])
+    })
+    it("with an array field", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "slice",
+        fields: ["hobbies[]"],
+        start: 1,
+        end: 2,
+      }
+      expect(computeField(entity, config)).toEqual(["swimming"])
+    })
+  })
+
+  describe("joins fields", () => {
+    const entity: EntityData = {
+      name: "John",
+      surname: "Doe",
+      age: 25,
+      hobbies: ["reading", "swimming", "running"],
+      moreHobbies: ["cycling", "dancing"],
+    }
+    const baseConfig: EntityComputedFieldConfig = {
+      type: "join",
+      fields: ["name", "surname"],
+    }
+    it("with default conditions", () => {
+      const config: EntityComputedFieldConfig = baseConfig
+      expect(computeField(entity, config)).toEqual("JohnDoe")
+    })
+    it("with a separator", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        separator: " ",
+      }
+      expect(computeField(entity, config)).toEqual("John Doe")
+    })
+    it("with field as an array of strings", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "join",
+        fields: ["hobbies"],
+        separator: ",",
+      }
+      expect(computeField(entity, config)).toEqual("reading,swimming,running")
+    })
+    it("with field as an array of arrays", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "join",
+        fields: ["hobbies", "moreHobbies"],
+        separator: ",",
+      }
+      expect(computeField(entity, config)).toEqual(
+        "reading,swimming,running,cycling,dancing"
+      )
+    })
+    it("throws an error if a field is not a string, number or array", () => {
+      const customEntity: EntityData = {
+        ...entity,
+        name: { first: "John", last: "Doe" },
+      }
+      const config: EntityComputedFieldConfig = {
+        type: "join",
+        fields: ["middleName", "name"],
+      }
+      expect(() => computeField(customEntity, config)).toThrow(
+        "Join method can be used only with arrays, strings and numbers."
+      )
+    })
+  })
+
+  describe("concatenates fields", () => {
+    const entity: EntityData = {
+      name: "John",
+      surname: "Doe",
+      age: 25,
+      hobbies: ["reading", "swimming", "running"],
+      moreHobbies: ["cycling", "dancing"],
+    }
+    const baseConfig: EntityComputedFieldConfig = {
+      type: "concat",
+      fields: ["hobbies", "moreHobbies"],
+    }
+    it("with default conditions", () => {
+      const config: EntityComputedFieldConfig = baseConfig
+      expect(computeField(entity, config)).toEqual([
+        "reading",
+        "swimming",
+        "running",
+        "cycling",
+        "dancing",
+      ])
+    })
+    it("with field as a string", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "concat",
+        fields: ["name", "surname"],
+      }
+      expect(computeField(entity, config)).toEqual(["John", "Doe"])
+    })
+  })
+
+  describe("merges fields", () => {
+    const entity: EntityData = {
+      name: {
+        first: "John",
+        last: "Doe",
+      },
+      health: {
+        height: 180,
+        weight: 75,
+        age: 25,
+      },
+      hobbies: ["reading", "swimming", "running"],
+      moreHobbies: ["cycling", "dancing"],
+    }
+    const baseConfig: EntityComputedFieldConfig = {
+      type: "merge",
+      fields: ["name", "health"],
+    }
+    it("with default conditions", () => {
+      const config: EntityComputedFieldConfig = baseConfig
+      expect(computeField(entity, config)).toEqual({
+        first: "John",
+        last: "Doe",
+        height: 180,
+        weight: 75,
+        age: 25,
+      })
+    })
+  })
+
+  describe("wraps fields", () => {
+    const entity: EntityData = {
+      name: "John",
+      surname: "Doe",
+      age: 25,
+      hobbies: ["reading", "swimming", "running"],
+    }
+    const baseConfig: EntityComputedFieldConfig = {
+      type: "wrap",
+      fields: ["name", "surname"],
+    }
+    it("with prefix", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        prefix: "Mr. ",
+      }
+      expect(computeField(entity, config)).toEqual(["Mr. ", "John", "Doe"])
+    })
+    it("with suffix", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        suffix: " Sr.",
+      }
+      expect(computeField(entity, config)).toEqual(["John", "Doe", " Sr."])
+    })
+    it("with prefix and suffix", () => {
+      const config: EntityComputedFieldConfig = {
+        ...baseConfig,
+        prefix: "Mr. ",
+        suffix: " Sr.",
+      }
+      expect(computeField(entity, config)).toEqual([
+        "Mr. ",
+        "John",
+        "Doe",
+        " Sr.",
+      ])
+    })
+    it("with an array field", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "wrap",
+        fields: ["hobbies"],
+        prefix: "prefix",
+        suffix: "suffix",
+      }
+      expect(computeField(entity, config)).toEqual([
+        "prefix",
+        ["reading", "swimming", "running"],
+        "suffix",
+      ])
+    })
+    it("with an array of arrays field", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "wrap",
+        fields: ["hobbies[]"],
+        prefix: "prefix",
+        suffix: "suffix",
+      }
+      expect(computeField(entity, config)).toEqual([
+        "prefix",
+        "reading",
+        "swimming",
+        "running",
+        "suffix",
+      ])
+    })
+    it("with object prefix and suffix", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "wrap",
+        fields: ["hobbies[]"],
+        prefix: { prefix: "prefix" },
+        suffix: { suffix: "suffix" },
+      }
+      expect(computeField(entity, config)).toEqual([
+        { prefix: "prefix" },
+        "reading",
+        "swimming",
+        "running",
+        { suffix: "suffix" },
+      ])
+    })
+  })
+
+  describe("objectifies fields", () => {
+    const entity: EntityData = {
+      name: "John",
+      surname: "Doe",
+      age: 25,
+      hobbies: ["reading", "swimming", "running"],
+    }
+    const baseConfig: EntityComputedFieldConfig = {
+      type: "objectify",
+      keys: ["n", "s"],
+      fields: ["name", "surname"],
+    }
+    it("with simple fields", () => {
+      const config: EntityComputedFieldConfig = baseConfig
+      expect(computeField(entity, config)).toEqual({
+        n: "John",
+        s: "Doe",
+      })
+    })
+    it("with an array field", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "objectify",
+        keys: ["hobbies"],
+        fields: ["hobbies"],
+      }
+      expect(computeField(entity, config)).toEqual({
+        hobbies: ["reading", "swimming", "running"],
+      })
+    })
+    it("with an array of arrays field", () => {
+      const config: EntityComputedFieldConfig = {
+        type: "objectify",
+        keys: ["first", "second"],
+        fields: ["hobbies[]"],
+      }
+      expect(computeField(entity, config)).toEqual({
+        first: "reading",
+        second: "swimming",
+      })
+    })
+  })
+
+  it("supports nested fields configuration", () => {
+    const entity: EntityData = {
+      name: "John",
+      surname: "Doe",
+      age: 25,
+      hobbies: ["reading", "swimming", "running"],
+      moreHobbies: ["cycling", "dancing"],
+    }
+    const config: EntityComputedFieldConfig = {
+      type: "join",
+      separator: ",",
+      fields: [
+        {
+          type: "filter",
+          pattern: "/^r/m",
+          fields: ["hobbies[]"],
+        },
+        {
+          type: "filter",
+          pattern: "/^d/m",
+          fields: ["moreHobbies[]"],
+        },
+      ],
+    }
+    expect(computeField(entity, config)).toEqual("reading,running,dancing")
+  })
+})
diff --git a/libs/generic-view/store/src/lib/entities/helpers/compute-field.ts b/libs/generic-view/store/src/lib/entities/helpers/compute-field.ts
new file mode 100644
index 0000000000..c650e87530
--- /dev/null
+++ b/libs/generic-view/store/src/lib/entities/helpers/compute-field.ts
@@ -0,0 +1,106 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { EntityComputedFieldConfig, EntityData } from "device/models"
+import {
+  concat,
+  get,
+  isArray,
+  isNumber,
+  isObject,
+  isString,
+  join,
+  merge,
+  slice,
+} from "lodash"
+import { stringToRegex } from "generic-view/utils"
+
+export const computeField = (
+  entity: EntityData,
+  config: EntityComputedFieldConfig
+): unknown => {
+  const { type, fields } = config
+
+  const values = fields.reduce((acc: unknown[], field) => {
+    if (typeof field === "string") {
+      if (field.endsWith("[]")) {
+        return [...acc, ...(get(entity, field.slice(0, -2)) as unknown[])]
+      }
+      acc.push(get(entity, field))
+      return acc
+    }
+    acc.push(computeField(entity, field))
+    return acc
+  }, [])
+
+  switch (type) {
+    case "filter": {
+      const regex = stringToRegex(config.pattern)
+      return values.filter((value) => {
+        const matches = regex.test(
+          isString(value) ? value : JSON.stringify(value)
+        )
+        return config.negatePattern ? !matches : matches
+      })
+    }
+    case "clear": {
+      return values.filter((value) => {
+        const emptyStringCondition = config.allowEmptyString || value !== ""
+        const zeroCondition = config.allowZero || value !== 0
+        const falseCondition = config.allowFalse || value !== false
+        const undefinedCondition = value !== undefined
+        const emptyArrayCondition = isArray(value) ? value.length !== 0 : true
+        const emptyObjectCondition = isObject(value)
+          ? Object.keys(value).length !== 0
+          : true
+        return (
+          undefinedCondition &&
+          emptyStringCondition &&
+          emptyArrayCondition &&
+          emptyObjectCondition &&
+          zeroCondition &&
+          falseCondition
+        )
+      })
+    }
+    case "slice":
+      return slice(values, config.start, config.end)
+    case "join": {
+      if (
+        values.every(
+          (value) => isNumber(value) || isString(value) || isArray(value)
+        )
+      ) {
+        return join(values, config.separator ?? "")
+      }
+      throw new Error(
+        "Join method can be used only with arrays, strings and numbers."
+      )
+    }
+    case "concat": {
+      return concat(...values)
+    }
+    case "merge": {
+      return merge({}, ...values)
+    }
+    case "wrap": {
+      return [
+        ...(config.prefix ? [config.prefix] : []),
+        ...values,
+        ...(config.suffix ? [config.suffix] : []),
+      ]
+    }
+    case "objectify": {
+      return values.reduce((acc: Record<string, unknown>, value, index) => {
+        const key = config.keys[index]
+        if (!key) {
+          return acc
+        }
+        acc[key] = value
+        return acc
+      }, {})
+    }
+  }
+}
diff --git a/libs/generic-view/store/src/lib/entities/helpers/enhance-entity.ts b/libs/generic-view/store/src/lib/entities/helpers/enhance-entity.ts
new file mode 100644
index 0000000000..ab1b16dce2
--- /dev/null
+++ b/libs/generic-view/store/src/lib/entities/helpers/enhance-entity.ts
@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { EntitiesConfig, EntityData } from "device/models"
+import { computeField } from "./compute-field"
+
+export const enhanceEntity = (
+  entity: EntityData,
+  config: Partial<EntitiesConfig>
+) => {
+  const enhancedEntity = { ...entity }
+  if (config.computedFields) {
+    for (const [fieldKey, fieldConfig] of Object.entries(
+      config.computedFields
+    )) {
+      enhancedEntity[fieldKey] = computeField(enhancedEntity, fieldConfig)
+    }
+  }
+  return enhancedEntity
+}
diff --git a/libs/generic-view/store/src/lib/entities/reducer.ts b/libs/generic-view/store/src/lib/entities/reducer.ts
index 3a6beed822..1e3f45cc30 100644
--- a/libs/generic-view/store/src/lib/entities/reducer.ts
+++ b/libs/generic-view/store/src/lib/entities/reducer.ts
@@ -25,6 +25,7 @@ interface Entities {
   data?: EntityData[]
   metadata?: EntitiesMetadata
   loading?: boolean
+  progress?: number
   error?: boolean
 }
 
diff --git a/libs/generic-view/store/src/lib/entities/update-entity-data.action.ts b/libs/generic-view/store/src/lib/entities/update-entity-data.action.ts
index 5cce2f738b..7dcfce37fa 100644
--- a/libs/generic-view/store/src/lib/entities/update-entity-data.action.ts
+++ b/libs/generic-view/store/src/lib/entities/update-entity-data.action.ts
@@ -10,6 +10,7 @@ import { DeviceId } from "Core/device/constants/device-id"
 import { ReduxRootState } from "Core/__deprecated__/renderer/store"
 import { ActionName } from "../action-names"
 import logger from "Core/__deprecated__/main/utils/logger"
+import { enhanceEntity } from "./helpers/enhance-entity"
 
 export const updateEntityDataAction = createAsyncThunk<
   EntityData,
@@ -59,6 +60,8 @@ export const updateEntityDataAction = createAsyncThunk<
       return rejectWithValue(undefined)
     }
 
-    return response.data.data
+    const computedFields =
+      genericEntities[deviceId][entitiesType]?.config.computedFields || {}
+    return enhanceEntity(response.data.data, { computedFields })
   }
 )
diff --git a/libs/generic-view/store/src/lib/selectors/component.ts b/libs/generic-view/store/src/lib/selectors/component.ts
index 926b74f6bd..48af964199 100644
--- a/libs/generic-view/store/src/lib/selectors/component.ts
+++ b/libs/generic-view/store/src/lib/selectors/component.ts
@@ -31,6 +31,11 @@ export const selectComponentDataProvider = createSelector(
   (config) => config?.dataProvider
 )
 
+export const selectComponentExtra = createSelector(
+  selectComponent,
+  (config) => config?.extra
+)
+
 export const selectComponentLayout = createSelector(
   selectComponent,
   (config) => config?.layout
diff --git a/libs/generic-view/store/src/lib/selectors/entities.ts b/libs/generic-view/store/src/lib/selectors/entities.ts
index afb6c943f7..7c1f445094 100644
--- a/libs/generic-view/store/src/lib/selectors/entities.ts
+++ b/libs/generic-view/store/src/lib/selectors/entities.ts
@@ -57,17 +57,35 @@ export const selectEntitiesLoadingState = createSelector(
   (entities) => {
     return Object.entries(entities).reduce(
       (
-        acc: Record<string, "loading" | "loaded" | "idle" | "error">,
+        acc: Record<
+          string,
+          | { state: "error" }
+          | {
+              state: "loading" | "loaded" | "idle"
+              progress: number
+            }
+        >,
         [entitiesType, entity]
       ) => {
         if (entity?.error) {
-          acc[entitiesType] = "error"
+          acc[entitiesType] = {
+            state: "error",
+          }
         } else if (entity?.metadata?.totalEntities === 0 || entity?.data) {
-          acc[entitiesType] = "loaded"
+          acc[entitiesType] = {
+            state: "loaded",
+            progress: 100,
+          }
         } else if (entity?.loading) {
-          acc[entitiesType] = "loading"
+          acc[entitiesType] = {
+            state: "loading",
+            progress: entity.progress || 0,
+          }
         } else {
-          acc[entitiesType] = "idle"
+          acc[entitiesType] = {
+            state: "idle",
+            progress: 0,
+          }
         }
         return acc
       },
diff --git a/libs/generic-view/store/src/lib/selectors/index.ts b/libs/generic-view/store/src/lib/selectors/index.ts
index 94836956dc..44bb81c2a2 100644
--- a/libs/generic-view/store/src/lib/selectors/index.ts
+++ b/libs/generic-view/store/src/lib/selectors/index.ts
@@ -32,3 +32,4 @@ export * from "./data-migration-pure-db-indexing"
 export * from "./device-error-modal-opened"
 export * from "./data-transfer-error-type"
 export * from "./entities"
+export * from "./active-device-configuration"
diff --git a/libs/generic-view/store/src/lib/selectors/view.ts b/libs/generic-view/store/src/lib/selectors/view.ts
index 333f3b27b8..e740adc5aa 100644
--- a/libs/generic-view/store/src/lib/selectors/view.ts
+++ b/libs/generic-view/store/src/lib/selectors/view.ts
@@ -26,3 +26,13 @@ export const selectViewData = createSelector(
   selectView,
   (config) => config?.data
 )
+
+const selectViewForms = createSelector(selectView, (config) => config?.forms)
+
+export const selectViewForm = createSelector(
+  selectViewForms,
+  (state: ReduxRootState, { formName }: { formName: string }) => formName,
+  (forms, formName) => {
+    return forms?.[formName]
+  }
+)
diff --git a/libs/generic-view/store/src/lib/toasts/actions.ts b/libs/generic-view/store/src/lib/toasts/actions.ts
new file mode 100644
index 0000000000..c953f66d0b
--- /dev/null
+++ b/libs/generic-view/store/src/lib/toasts/actions.ts
@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { createAction } from "@reduxjs/toolkit"
+import { Toast } from "./reducer"
+import { ActionName } from "../action-names"
+
+export const addToast = createAction<Toast["key"]>(
+  ActionName.AddToast
+)
+export const removeToast = createAction(ActionName.RemoveToast)
diff --git a/libs/generic-view/store/src/lib/toasts/open-toast.action.ts b/libs/generic-view/store/src/lib/toasts/open-toast.action.ts
new file mode 100644
index 0000000000..983c48adb3
--- /dev/null
+++ b/libs/generic-view/store/src/lib/toasts/open-toast.action.ts
@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { createAsyncThunk } from "@reduxjs/toolkit"
+import { Toast } from "./reducer"
+import { ActionName } from "../action-names"
+import { ReduxRootState } from "Core/__deprecated__/renderer/store"
+import { addToast } from "./actions"
+
+export const openToastAction = createAsyncThunk<
+  void,
+  Toast["key"],
+  { state: ReduxRootState }
+>(ActionName.OpenToast, async (toastKey, { dispatch }) => {
+  dispatch(addToast(toastKey))
+  // Delay action to add toast before the state will update
+  await new Promise((resolve) => setTimeout(resolve, 100))
+  return
+})
diff --git a/libs/generic-view/store/src/lib/toasts/reducer.ts b/libs/generic-view/store/src/lib/toasts/reducer.ts
new file mode 100644
index 0000000000..be6415dfd3
--- /dev/null
+++ b/libs/generic-view/store/src/lib/toasts/reducer.ts
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { createReducer } from "@reduxjs/toolkit"
+import { addToast, removeToast } from "./actions"
+
+export interface Toast {
+  key: string
+}
+
+interface GenericState {
+  queue: Toast[]
+}
+
+const initialState: GenericState = {
+  queue: [],
+}
+
+export const genericToastsReducer = createReducer(initialState, (builder) => {
+  builder.addCase(addToast, (state, action) => {
+    state.queue.push({
+      key: action.payload,
+    })
+  })
+  builder.addCase(removeToast, (state) => {
+    state.queue.shift()
+  })
+})
diff --git a/libs/generic-view/store/src/lib/use-form-field.ts b/libs/generic-view/store/src/lib/use-form-field.ts
new file mode 100644
index 0000000000..807819cb12
--- /dev/null
+++ b/libs/generic-view/store/src/lib/use-form-field.ts
@@ -0,0 +1,55 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { useDispatch, useSelector } from "react-redux"
+import { Dispatch, ReduxRootState } from "Core/__deprecated__/renderer/store"
+import { selectActiveApiDeviceId } from "./selectors/select-active-api-device-id"
+import { selectViewForm } from "./selectors"
+import { setFormField } from "./views/actions"
+import { get } from "lodash"
+import { useCallback } from "react"
+import { useCurrentViewKey } from "generic-view/utils"
+
+interface UseViewForm {
+  formName?: string
+}
+
+export const useFormField = ({ formName }: UseViewForm) => {
+  const viewKey = useCurrentViewKey()
+  const dispatch = useDispatch<Dispatch>()
+  const activeDeviceId = useSelector(selectActiveApiDeviceId)
+  const form = useSelector((state: ReduxRootState) => {
+    if (!formName) return undefined
+    return selectViewForm(state, { formName, viewKey })
+  })
+
+  const getValue = useCallback(
+    (field: string) => {
+      return field && form?.fields ? get(form.fields, field) : undefined
+    },
+    [form?.fields]
+  )
+
+  const setValue = useCallback(
+    (field: string, value: unknown) => {
+      if (!activeDeviceId || !field || !formName) return
+      dispatch(
+        setFormField({
+          field,
+          value,
+          deviceId: activeDeviceId,
+          feature: viewKey,
+          formName,
+        })
+      )
+    },
+    [activeDeviceId, dispatch, formName, viewKey]
+  )
+
+  return {
+    getValue,
+    setValue,
+  }
+}
diff --git a/libs/generic-view/store/src/lib/use-form-register.ts b/libs/generic-view/store/src/lib/use-form-register.ts
new file mode 100644
index 0000000000..ba628968e2
--- /dev/null
+++ b/libs/generic-view/store/src/lib/use-form-register.ts
@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { useDispatch, useSelector } from "react-redux"
+import { Dispatch, ReduxRootState } from "Core/__deprecated__/renderer/store"
+import { selectActiveApiDeviceId } from "./selectors/select-active-api-device-id"
+import { registerForm } from "./views/actions"
+import { useEffect } from "react"
+import { selectViewForm } from "./selectors"
+import { useCurrentViewKey } from "generic-view/utils"
+
+interface UseViewForm {
+  formName: string
+  options?: {
+    defaultValues?: Record<string, unknown>
+  }
+}
+
+export const useFormRegister = ({ formName, options }: UseViewForm) => {
+  const viewKey = useCurrentViewKey()
+  const dispatch = useDispatch<Dispatch>()
+  const activeDeviceId = useSelector(selectActiveApiDeviceId)
+  const form = useSelector((state: ReduxRootState) => {
+    return selectViewForm(state, { formName, viewKey })
+  })
+
+  useEffect(() => {
+    if (!activeDeviceId || form) return
+    const { defaultValues = {} } = options || {}
+    dispatch(
+      registerForm({
+        deviceId: activeDeviceId,
+        feature: viewKey,
+        formName,
+        form: {
+          fields: defaultValues,
+        },
+      })
+    )
+  }, [activeDeviceId, dispatch, form, formName, options, viewKey])
+}
diff --git a/libs/generic-view/store/src/lib/views/actions.ts b/libs/generic-view/store/src/lib/views/actions.ts
index fa0221358b..29683f1cf1 100644
--- a/libs/generic-view/store/src/lib/views/actions.ts
+++ b/libs/generic-view/store/src/lib/views/actions.ts
@@ -9,6 +9,7 @@ import { DeviceState } from "device-manager/models"
 import { DeviceBaseProperties } from "device-protocol/models"
 import { MenuElement } from "Core/__deprecated__/renderer/constants/menu-elements"
 import { ActionName } from "../action-names"
+import { GenericForm } from "generic-view/models"
 
 export const addDevice = createAction<
   DeviceBaseProperties & Partial<{ state: DeviceState.Failed }>
@@ -19,15 +20,6 @@ export const removeDevice = createAction<DeviceBaseProperties>(
 )
 
 export const setMenu = createAction<MenuElement[]>(ActionName.SetMenu)
-export const setViewLayout = createAction<{
-  feature: string
-  layout: View
-}>(ActionName.SetViewLayout)
-
-export const setViewData = createAction<{
-  feature: string
-  data: Record<string, unknown>
-}>(ActionName.SetViewData)
 
 export const setLastRefresh = createAction<number>(ActionName.SetLastRefresh)
 
@@ -35,6 +27,21 @@ export const setDeviceState = createAction<{ id: string; state: DeviceState }>(
   ActionName.SetDeviceState
 )
 
+export const registerForm = createAction<{
+  formName: string
+  form: GenericForm
+  feature: string
+  deviceId: string
+}>(ActionName.RegisterForm)
+
+export const setFormField = createAction<{
+  formName: string
+  field: string
+  value: unknown
+  feature: string
+  deviceId: string
+}>(ActionName.SetFormField)
+
 export const setGenericConfig = createAction<{
   config: View
   feature: string
diff --git a/libs/generic-view/store/src/lib/views/reducer.ts b/libs/generic-view/store/src/lib/views/reducer.ts
index 9f33dc3b0a..0c96215d04 100644
--- a/libs/generic-view/store/src/lib/views/reducer.ts
+++ b/libs/generic-view/store/src/lib/views/reducer.ts
@@ -5,7 +5,6 @@
 
 import { createReducer } from "@reduxjs/toolkit"
 import { MenuElement } from "Core/__deprecated__/renderer/constants/menu-elements"
-import { View } from "generic-view/utils"
 import { DeviceState } from "device-manager/models"
 import { Device, Features } from "generic-view/models"
 import { ApiError } from "device/models"
@@ -19,25 +18,18 @@ import { getOutboxData } from "../outbox/get-outbox-data.action"
 import { getGenericConfig } from "../features/get-generic-config.actions"
 import {
   addDevice,
+  registerForm,
   removeDevice,
   setDeviceState,
+  setFormField,
   setGenericConfig,
   setLastRefresh,
   setMenu,
-  setViewData,
-  setViewLayout,
 } from "./actions"
 import { transformGenericComponents } from "../features/transform-generic-components"
 
 export interface GenericState {
   menu: MenuElement[] | undefined
-  views: Record<
-    string,
-    {
-      layout: View
-      data: Record<string, unknown>
-    }
-  >
   lastResponse: unknown
   lastRefresh?: number
   devices: Record<string, Device>
@@ -46,7 +38,6 @@ export interface GenericState {
 
 const initialState: GenericState = {
   menu: undefined,
-  views: {},
   lastResponse: {},
   devices: {},
   apiErrors: {},
@@ -56,18 +47,6 @@ export const genericViewsReducer = createReducer(initialState, (builder) => {
   builder.addCase(setMenu, (state, action) => {
     state.menu = action.payload
   })
-  builder.addCase(setViewLayout, (state, action) => {
-    state.views[action.payload.feature] = {
-      ...state.views[action.payload.feature],
-      layout: action.payload.layout,
-    }
-  })
-  builder.addCase(setViewData, (state, action) => {
-    state.views[action.payload.feature] = {
-      ...state.views[action.payload.feature],
-      data: action.payload.data,
-    }
-  })
   builder.addCase(addDevice, (state, action) => {
     state.devices[action.payload.id] = {
       ...action.payload,
@@ -197,6 +176,31 @@ export const genericViewsReducer = createReducer(initialState, (builder) => {
       }
     }
   })
+  builder.addCase(registerForm, (state, action) => {
+    const { deviceId, feature, form, formName } = action.payload
+    state.devices[deviceId].features = {
+      ...state.devices[deviceId].features,
+      [feature]: {
+        ...state.devices[deviceId].features?.[feature],
+        forms: {
+          ...state.devices[deviceId].features?.[feature]?.forms,
+          [formName]: form,
+        },
+      },
+    }
+  })
+  builder.addCase(setFormField, (state, action) => {
+    const { deviceId, feature, formName, field, value } = action.payload
+    const viewFeature = state.devices[deviceId].features?.[feature]
+    if (
+      !viewFeature ||
+      !viewFeature.forms ||
+      !viewFeature.forms[formName] ||
+      !field
+    )
+      return
+    viewFeature.forms[formName].fields[field] = value
+  })
   // Helper action for setting custom generic config without a need of reloading the app
   builder.addCase(setGenericConfig, (state, action) => {
     const { deviceId, feature, config } = action.payload
@@ -204,6 +208,7 @@ export const genericViewsReducer = createReducer(initialState, (builder) => {
       state.devices[deviceId].features = {
         ...state.devices[deviceId].features,
         [feature]: {
+          ...state.devices[deviceId].features?.[feature],
           config: transformGenericComponents({
             ...state.devices[deviceId].features?.[feature].config,
             ...config,
diff --git a/libs/generic-view/theme/src/lib/font-size.ts b/libs/generic-view/theme/src/lib/font-size.ts
index 9dd0314645..fa81aea023 100644
--- a/libs/generic-view/theme/src/lib/font-size.ts
+++ b/libs/generic-view/theme/src/lib/font-size.ts
@@ -14,6 +14,7 @@ export const fontSize = {
   paragraph2: "1.6rem",
   paragraph3: "1.4rem",
   paragraph4: "1.4rem",
+  paragraph5: "1.2rem",
   tag: "1.2rem",
   buttonLink: "1.4rem",
   buttonText: "1.2rem",
diff --git a/libs/generic-view/theme/src/lib/line-height.ts b/libs/generic-view/theme/src/lib/line-height.ts
index 45c869ba88..b8b295f0fc 100644
--- a/libs/generic-view/theme/src/lib/line-height.ts
+++ b/libs/generic-view/theme/src/lib/line-height.ts
@@ -14,6 +14,7 @@ export const lineHeight = {
   paragraph2: "2.4rem",
   paragraph3: "2.2rem",
   paragraph4: "2.2rem",
+  paragraph5: "2rem",
   tag: "2rem",
   buttonLink: "2.2rem",
   buttonText: "2rem",
diff --git a/libs/generic-view/ui/src/index.ts b/libs/generic-view/ui/src/index.ts
index f7e3459752..932b0da6ef 100644
--- a/libs/generic-view/ui/src/index.ts
+++ b/libs/generic-view/ui/src/index.ts
@@ -16,10 +16,11 @@ import { entities } from "./lib/entities"
 
 export * from "./lib/icon/icon"
 export * from "./lib/api-connection-demo"
+export * from "./lib/interactive/form/form"
+export * from "./lib/interactive/form/input/search-input"
 export * from "./lib/interactive/modal"
 export * from "./lib/interactive/modal/modal-base"
-export * from "./lib/interactive/form/input/search-input"
-export * from "./lib/interactive/form/form"
+export * from "./lib/interactive/tooltip/tooltip"
 export * from "./lib/shared/shared"
 export * from "./lib/predefined/backup/backup-error"
 export * from "./lib/predefined/backup-restore/backup-restore-error"
diff --git a/libs/generic-view/ui/src/lib/buttons/button-base/button-base.tsx b/libs/generic-view/ui/src/lib/buttons/button-base/button-base.tsx
index 24b12061a8..b8a3d25057 100644
--- a/libs/generic-view/ui/src/lib/buttons/button-base/button-base.tsx
+++ b/libs/generic-view/ui/src/lib/buttons/button-base/button-base.tsx
@@ -4,19 +4,19 @@
  */
 
 import React, { FunctionComponent, HTMLAttributes } from "react"
-import { ButtonAction } from "generic-view/utils"
 import { useButtonAction } from "./use-button-action"
 import { DefaultButton } from "../../shared/button"
+import { ButtonActions } from "generic-view/models"
 
 interface Props extends HTMLAttributes<HTMLButtonElement> {
-  action: ButtonAction
+  actions: ButtonActions
   viewKey?: string
   disabled?: boolean
 }
 
-export const ButtonBase: FunctionComponent<Props> = ({ action, ...props }) => {
+export const ButtonBase: FunctionComponent<Props> = ({ actions, ...props }) => {
   const callButtonAction = useButtonAction(props.viewKey as string)
-  const callAction = () => callButtonAction(action)
+  const callAction = () => callButtonAction(actions)
 
   return <DefaultButton {...props} onClick={callAction} type={"button"} />
 }
diff --git a/libs/generic-view/ui/src/lib/buttons/button-base/use-button-action.test.ts b/libs/generic-view/ui/src/lib/buttons/button-base/use-button-action.test.ts
index cbd63c1194..497a9ba196 100644
--- a/libs/generic-view/ui/src/lib/buttons/button-base/use-button-action.test.ts
+++ b/libs/generic-view/ui/src/lib/buttons/button-base/use-button-action.test.ts
@@ -30,27 +30,58 @@ describe("useButtonAction", () => {
   it("calls the correct action for 'open-modal'", () => {
     const openModal = jest.requireMock("generic-view/store").openModal
     const { result } = renderHook(() => useButtonAction("testKey"))
-    result.current({
-      type: "open-modal",
-      modalKey: "testModalKey",
+    result.current([
+      {
+        type: "open-modal",
+        modalKey: "testModalKey",
+        domain: "testDomain",
+        permanent: false,
+      },
+    ])
+
+    expect(openModal).toHaveBeenCalledWith({
+      key: "testModalKey",
       domain: "testDomain",
       permanent: false,
     })
+  })
+
+  it("calls multiple actions", () => {
+    const openModal = jest.requireMock("generic-view/store").openModal
+    const closeModal = jest.requireMock("generic-view/store").closeModal
+    const { result } = renderHook(() => useButtonAction("testKey"))
+    result.current([
+      {
+        type: "open-modal",
+        modalKey: "testModalKey",
+        domain: "testDomain",
+        permanent: false,
+      },
+      {
+        type: "close-modal",
+        modalKey: "testModalKey",
+      },
+    ])
 
     expect(openModal).toHaveBeenCalledWith({
       key: "testModalKey",
       domain: "testDomain",
       permanent: false,
     })
+    expect(closeModal).toHaveBeenCalledWith({
+      key: "testModalKey",
+    })
   })
 
   it("calls the correct action for 'close-modal'", () => {
     const closeModal = jest.requireMock("generic-view/store").closeModal
     const { result } = renderHook(() => useButtonAction("testKey"))
-    result.current({
-      type: "close-modal",
-      modalKey: "testModalKey",
-    })
+    result.current([
+      {
+        type: "close-modal",
+        modalKey: "testModalKey",
+      },
+    ])
 
     expect(closeModal).toHaveBeenCalledWith({
       key: "testModalKey",
@@ -60,12 +91,14 @@ describe("useButtonAction", () => {
   it("calls the correct action for 'replace-modal'", () => {
     const replaceModal = jest.requireMock("generic-view/store").replaceModal
     const { result } = renderHook(() => useButtonAction("testKey"))
-    result.current({
-      type: "replace-modal",
-      modalKey: "testModalKey",
-      domain: "testDomain",
-      permanent: false,
-    })
+    result.current([
+      {
+        type: "replace-modal",
+        modalKey: "testModalKey",
+        domain: "testDomain",
+        permanent: false,
+      },
+    ])
 
     expect(replaceModal).toHaveBeenCalledWith({
       key: "testModalKey",
@@ -77,9 +110,11 @@ describe("useButtonAction", () => {
   it("calls the correct action for 'close-all-modals'", () => {
     const closeAllModals = jest.requireMock("generic-view/store").closeAllModals
     const { result } = renderHook(() => useButtonAction("testKey"))
-    result.current({
-      type: "close-all-modals",
-    })
+    result.current([
+      {
+        type: "close-all-modals",
+      },
+    ])
 
     expect(closeAllModals).toHaveBeenCalled()
   })
@@ -90,10 +125,12 @@ describe("useButtonAction", () => {
       .requireMock("react-router")
       .useHistory.mockImplementation(() => ({ push }))
     const { result } = renderHook(() => useButtonAction("testKey"))
-    result.current({
-      type: "navigate",
-      viewKey: "testViewKey",
-    })
+    result.current([
+      {
+        type: "navigate",
+        viewKey: "testViewKey",
+      },
+    ])
 
     expect(push).toHaveBeenCalledWith({
       pathname: "/generic/testViewKey",
diff --git a/libs/generic-view/ui/src/lib/buttons/button-base/use-button-action.ts b/libs/generic-view/ui/src/lib/buttons/button-base/use-button-action.ts
index 690356d801..b84c06d989 100644
--- a/libs/generic-view/ui/src/lib/buttons/button-base/use-button-action.ts
+++ b/libs/generic-view/ui/src/lib/buttons/button-base/use-button-action.ts
@@ -7,81 +7,135 @@ import {
   closeAllModals,
   closeDomainModals,
   closeModal,
+  deleteEntitiesDataAction,
   openModal,
+  openToastAction,
   replaceModal,
+  selectActiveApiDeviceId,
   useScreenTitle,
 } from "generic-view/store"
-import { ButtonAction } from "generic-view/utils"
-import { useDispatch } from "react-redux"
+import { useDispatch, useSelector } from "react-redux"
 import { useHistory } from "react-router"
 import { Dispatch } from "Core/__deprecated__/renderer/store"
-import { useFormContext } from "react-hook-form"
 import logger from "Core/__deprecated__/main/utils/logger"
+import { ButtonActions } from "generic-view/models"
+import { useViewFormContext } from "generic-view/utils"
 
 export const useButtonAction = (viewKey: string) => {
   const dispatch = useDispatch<Dispatch>()
   const navigate = useHistory()
-  const currentViewName = useScreenTitle(viewKey)
-  const formContext = useFormContext()
+  const currentViewName = useScreenTitle(viewKey)!
+  const getFormContext = useViewFormContext()
+  const activeDeviceId = useSelector(selectActiveApiDeviceId)!
 
-  return (action?: ButtonAction) => {
-    if (!action) return
-    switch (action.type) {
-      case "open-modal":
-        dispatch(
-          openModal({
-            key: action.modalKey,
-            domain: action.domain,
-            permanent: action.permanent,
-          })
-        )
-        break
-      case "close-modal":
-        dispatch(closeModal({ key: action.modalKey }))
-        break
-      case "replace-modal":
-        dispatch(
-          replaceModal({
-            key: action.modalKey,
-            domain: action.domain,
-            permanent: action.permanent,
+  return (actions: ButtonActions) =>
+    runActions(actions)({
+      dispatch,
+      navigate,
+      currentViewName,
+      getFormContext,
+      activeDeviceId,
+    })
+}
+
+interface RunActionsProviders {
+  dispatch: Dispatch
+  navigate: ReturnType<typeof useHistory>
+  currentViewName: string
+  getFormContext: ReturnType<typeof useViewFormContext>
+  activeDeviceId: string
+}
+
+const runActions = (actions?: ButtonActions) => {
+  return async (providers: RunActionsProviders) => {
+    if (!actions) return
+
+    const {
+      dispatch,
+      navigate,
+      currentViewName,
+      getFormContext,
+      activeDeviceId,
+    } = providers
+
+    for (const action of actions) {
+      switch (action.type) {
+        case "open-modal":
+          dispatch(
+            openModal({
+              key: action.modalKey,
+              domain: action.domain,
+              permanent: action.permanent,
+            })
+          )
+          break
+        case "close-modal":
+          dispatch(closeModal({ key: action.modalKey }))
+          break
+        case "replace-modal":
+          dispatch(
+            replaceModal({
+              key: action.modalKey,
+              domain: action.domain,
+              permanent: action.permanent,
+            })
+          )
+          break
+        case "close-domain-modals":
+          dispatch(closeDomainModals({ domain: action.domain }))
+          break
+        case "close-all-modals":
+          dispatch(closeAllModals())
+          break
+        case "navigate":
+          navigate.push({
+            pathname: `/generic/${action.viewKey}`,
+            state: {
+              previousViewName: currentViewName,
+            },
           })
-        )
-        break
-      case "close-domain-modals":
-        dispatch(closeDomainModals({ domain: action.domain }))
-        break
-      case "close-all-modals":
-        dispatch(closeAllModals())
-        break
-      case "navigate":
-        navigate.push({
-          pathname: `/generic/${action.viewKey}`,
-          state: {
-            previousViewName: currentViewName,
-          },
-        })
-        break
-      case "form-set-field":
-        formContext.setValue(action.key, action.value)
-        break
-      case "form-toggle-field":
-        if (typeof formContext.getValues(action.key) === "boolean") {
-          formContext.setValue(action.key, !formContext.getValues(action.key))
-        } else if (typeof formContext.getValues(action.key) === "undefined") {
-          logger.error(`Tried to toggle not existing field: ${action.key}`)
-        } else {
-          logger.error(`Tried to toggle non-boolean field: ${action.key}`)
+          break
+        case "form-set-field":
+          getFormContext(action.formKey).setValue(action.key, action.value)
+          break
+        case "form-toggle-field": {
+          const formContext = getFormContext(action.formKey)
+          if (typeof formContext.getValues(action.key) === "boolean") {
+            formContext.setValue(action.key, !formContext.getValues(action.key))
+          } else if (typeof formContext.getValues(action.key) === "undefined") {
+            logger.error(`Tried to toggle not existing field: ${action.key}`)
+          } else {
+            logger.error(`Tried to toggle non-boolean field: ${action.key}`)
+          }
+          break
         }
-        break
-      case "form-reset":
-        formContext.reset()
-        break
-      case "custom":
-        action.callback()
-        break
-      default:
-        break
+        case "form-reset":
+          getFormContext(action.formKey)?.reset()
+          break
+        case "entities-delete":
+          await dispatch(
+            deleteEntitiesDataAction({
+              entitiesType: action.entitiesType,
+              ids: action.ids,
+              deviceId: activeDeviceId,
+              onSuccess: () => {
+                return runActions(action.postActions?.success)(providers)
+              },
+              onError: () => {
+                return runActions(action.postActions?.failure)(providers)
+              },
+            })
+          )
+          break
+        case "open-toast":
+          await dispatch(openToastAction(action.toastKey))
+          break
+        case "custom":
+          action.callback()
+          break
+        default:
+          break
+      }
     }
   }
 }
diff --git a/libs/generic-view/ui/src/lib/buttons/button-primary.tsx b/libs/generic-view/ui/src/lib/buttons/button-primary.tsx
index a92fd6d91b..d2ef65938d 100644
--- a/libs/generic-view/ui/src/lib/buttons/button-primary.tsx
+++ b/libs/generic-view/ui/src/lib/buttons/button-primary.tsx
@@ -22,11 +22,11 @@ export const ButtonPrimary: APIFC<undefined, ButtonPrimaryConfig> = ({
       data-testid={`${ButtonTestIds.PrimaryButton}-${props.componentKey}`}
       {...props}
       disabled={config.disabled}
-      action={config.action}
+      actions={config.actions}
     >
       {children}
       {config.icon && <Icon data={{ type: config.icon }} />}
-      <span>{config.text}</span>
+      {config.text}
     </Button>
   )
 }
@@ -37,16 +37,15 @@ const Button = styled(ButtonBase)`
   padding: 0 1rem;
   transition: background-color 0.15s ease-in-out;
   border-radius: ${({ theme }) => theme.radius.sm};
+  font-size: ${({ theme }) => theme.fontSize.buttonText};
+  line-height: ${({ theme }) => theme.lineHeight.buttonText};
+  color: ${({ theme }) => theme.color.white};
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+
   && {
     height: 4rem;
   }
-  span {
-    font-size: ${({ theme }) => theme.fontSize.buttonText};
-    line-height: ${({ theme }) => theme.lineHeight.buttonText};
-    color: ${({ theme }) => theme.color.white};
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-  }
 
   &:hover {
     background-color: ${({ theme }) => theme.color.black};
@@ -58,9 +57,6 @@ const Button = styled(ButtonBase)`
 
   &:disabled {
     background-color: ${({ theme }) => theme.color.grey4};
-
-    span {
-      color: ${({ theme }) => theme.color.grey2};
-    }
+    color: ${({ theme }) => theme.color.grey2};
   }
 `
diff --git a/libs/generic-view/ui/src/lib/buttons/button-secondary.tsx b/libs/generic-view/ui/src/lib/buttons/button-secondary.tsx
index ef0a7a04b0..3f3ece468a 100644
--- a/libs/generic-view/ui/src/lib/buttons/button-secondary.tsx
+++ b/libs/generic-view/ui/src/lib/buttons/button-secondary.tsx
@@ -18,10 +18,7 @@ export const ButtonSecondary: APIFC<undefined, ButtonSecondaryConfig> = (
 const Button = styled(ButtonPrimary)`
   background-color: ${({ theme }) => theme.color.white};
   border: 0.1rem solid ${({ theme }) => theme.color.black};
-
-  span {
-    color: ${({ theme }) => theme.color.black};
-  }
+  color: ${({ theme }) => theme.color.black};
 
   &:hover {
     background-color: ${({ theme }) => theme.color.grey5};
@@ -34,9 +31,6 @@ const Button = styled(ButtonPrimary)`
   &:disabled {
     background-color: ${({ theme }) => theme.color.white};
     border-color: ${({ theme }) => theme.color.grey4};
-
-    span {
-      color: ${({ theme }) => theme.color.grey3};
-    }
+    color: ${({ theme }) => theme.color.grey3};
   }
 `
diff --git a/libs/generic-view/ui/src/lib/buttons/button-text.tsx b/libs/generic-view/ui/src/lib/buttons/button-text.tsx
index 07e9d6f215..461d2e9571 100644
--- a/libs/generic-view/ui/src/lib/buttons/button-text.tsx
+++ b/libs/generic-view/ui/src/lib/buttons/button-text.tsx
@@ -20,12 +20,12 @@ export const ButtonText: APIFC<undefined, ButtonTextConfig> = ({
     <Button
       data-testid={`button-text_${props.componentKey}`}
       {...props}
-      action={config.action}
+      actions={config.actions}
       $modifiers={config.modifiers}
     >
       {children}
       {config.icon && <Icon className={"icon"} data={{ type: config.icon }} />}
-      <span>{config.text}</span>
+      {config.text}
     </Button>
   )
 }
@@ -34,24 +34,23 @@ const Button = styled(ButtonBase)<{
   $modifiers?: ButtonTextConfig["modifiers"]
 }>`
   color: ${({ theme }) => theme.color.grey1};
+  font-size: ${({ theme }) => theme.fontSize.buttonLink};
+  line-height: ${({ theme }) => theme.lineHeight.buttonLink};
+  letter-spacing: 0.05em;
+  text-transform: unset;
+  transition: color 0.15s ease-in-out;
 
   &:hover {
     color: ${({ theme }) => theme.color.black};
   }
 
-  span {
-    font-size: ${({ theme }) => theme.fontSize.buttonLink};
-    line-height: ${({ theme }) => theme.lineHeight.buttonLink};
-    letter-spacing: 0.05em;
-    text-transform: unset;
-    transition: color 0.15s ease-in-out;
-  }
-
   ${({ $modifiers }) => $modifiers?.includes("link") && buttonLinkModifier};
   ${({ $modifiers }) =>
     $modifiers?.includes("uppercase") && buttonUpperCaseModifier};
   ${({ $modifiers }) =>
     $modifiers?.includes("hover-underline") && buttonHoverUnderlineModifier};
+  ${({ $modifiers }) =>
+    $modifiers?.includes("hover-background") && buttonHoverBackgroundModifier};
 
   .icon {
     width: 2.2rem;
@@ -71,18 +70,23 @@ const buttonLinkModifier = css`
 `
 
 const buttonUpperCaseModifier = css`
-  span {
-    text-transform: uppercase;
-    font-size: ${({ theme }) => theme.fontSize.buttonText};
-    line-height: ${({ theme }) => theme.lineHeight.buttonText};
-    letter-spacing: 0.1em;
-    margin-top: 0.1rem;
-  }
+  text-transform: uppercase;
+  font-size: ${({ theme }) => theme.fontSize.buttonText};
+  line-height: ${({ theme }) => theme.lineHeight.buttonText};
+  letter-spacing: 0.1em;
+  transform: translateY(0.1rem);
 `
 
 const buttonHoverUnderlineModifier = css`
-  &:hover span {
+  &:hover {
     text-decoration: underline;
     text-decoration-color: currentColor;
   }
 `
+
+const buttonHoverBackgroundModifier = css`
+  &:hover {
+    background-color: ${({ theme }) => theme.color.grey5};
+    border-radius: ${({ theme }) => theme.radius.xs};
+  }
+`
diff --git a/libs/generic-view/ui/src/lib/data-rows/app-portal.tsx b/libs/generic-view/ui/src/lib/data-rows/app-portal.tsx
new file mode 100644
index 0000000000..ff8d5aa2b9
--- /dev/null
+++ b/libs/generic-view/ui/src/lib/data-rows/app-portal.tsx
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { APIFC } from "generic-view/utils"
+import { AppPortalConfig } from "generic-view/models"
+import { createPortal } from "react-dom"
+
+export const AppPortal: APIFC<undefined, AppPortalConfig> = ({ children, config }) => {
+  const appHeaderElement = document.querySelector(`#${config.portal}`)
+  if (!appHeaderElement || !children) return null
+  return createPortal(children, appHeaderElement)
+}
diff --git a/libs/generic-view/ui/src/lib/data-rows/badge.tsx b/libs/generic-view/ui/src/lib/data-rows/badge.tsx
index 4c781a87df..4c729980ba 100644
--- a/libs/generic-view/ui/src/lib/data-rows/badge.tsx
+++ b/libs/generic-view/ui/src/lib/data-rows/badge.tsx
@@ -9,11 +9,17 @@ import { APIFC } from "generic-view/utils"
 import { Tag } from "../shared/tag"
 import { BadgeData } from "generic-view/models"
 
-export const Badge: APIFC<BadgeData> = ({ data, config, ...props }) => {
-  if (!data) return null
+export const Badge: APIFC<BadgeData> = ({
+  data,
+  config,
+  children,
+  ...props
+}) => {
+  if (!data && !children) return null
+
   return (
-    <BadgeWrapper {...props} variant={data.variant || "light"}>
-      {data.text}
+    <BadgeWrapper {...props} variant={data?.variant || "light"}>
+      {data?.text || children}
     </BadgeWrapper>
   )
 }
@@ -21,6 +27,7 @@ export const Badge: APIFC<BadgeData> = ({ data, config, ...props }) => {
 const BadgeWrapper = styled(Tag)<{ variant: BadgeData["variant"] }>`
   height: 2.2rem;
   line-height: 2.2rem;
+  letter-spacing: 0.04em;
 
   ${({ variant, theme }) =>
     variant === "dark" &&
diff --git a/libs/generic-view/ui/src/lib/data-rows/data-rows.ts b/libs/generic-view/ui/src/lib/data-rows/data-rows.ts
index ca4efd3590..c201001814 100644
--- a/libs/generic-view/ui/src/lib/data-rows/data-rows.ts
+++ b/libs/generic-view/ui/src/lib/data-rows/data-rows.ts
@@ -9,7 +9,9 @@ import { LabeledText } from "./labeled-text"
 import { TextPlain } from "./text-plain"
 import { TextFormatted } from "./text-formatted"
 import { Badge } from "./badge"
+import { AppPortal } from "./app-portal"
 import {
+  appPortal,
   badge,
   iconText,
   image,
@@ -25,4 +27,5 @@ export const rows = {
   [textPlain.key]: TextPlain,
   [textFormatted.key]: TextFormatted,
   [badge.key]: Badge,
+  [appPortal.key]: AppPortal,
 }
diff --git a/libs/generic-view/ui/src/lib/data-rows/text-formatted.tsx b/libs/generic-view/ui/src/lib/data-rows/text-formatted.tsx
index 13a8a61119..b0105b264e 100644
--- a/libs/generic-view/ui/src/lib/data-rows/text-formatted.tsx
+++ b/libs/generic-view/ui/src/lib/data-rows/text-formatted.tsx
@@ -13,7 +13,7 @@ export const TextFormatted: APIFC<TextFormattedData> = ({ data }) => {
   return <Content>{data?.text}</Content>
 }
 
-const Content = styled(Markdown)`
+export const Content = styled(Markdown)`
   color: ${({ theme }) => theme.color.black};
 
   h1 {
diff --git a/libs/generic-view/ui/src/lib/entities/entities-loader.tsx b/libs/generic-view/ui/src/lib/entities/entities-loader.tsx
index 872d345c41..34794d8bd9 100644
--- a/libs/generic-view/ui/src/lib/entities/entities-loader.tsx
+++ b/libs/generic-view/ui/src/lib/entities/entities-loader.tsx
@@ -3,7 +3,7 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
-import React, { useEffect } from "react"
+import React, { useEffect, useState } from "react"
 import { APIFC } from "generic-view/utils"
 import { EntitiesLoaderConfig } from "generic-view/models"
 import {
@@ -13,12 +13,16 @@ import {
 } from "generic-view/store"
 import { useDispatch, useSelector } from "react-redux"
 import { Dispatch, ReduxRootState } from "Core/__deprecated__/renderer/store"
-import { SpinnerLoader } from "../shared/spinner-loader"
 import styled from "styled-components"
+import { H3 } from "../texts/headers"
+import { ProgressBar } from "../interactive/progress-bar/progress-bar"
+import { sum } from "lodash"
 
 export const EntitiesLoader: APIFC<undefined, EntitiesLoaderConfig> = ({
   config,
+  data,
   children,
+  ...props
 }) => {
   const dispatch = useDispatch<Dispatch>()
   const deviceId = useSelector(selectActiveApiDeviceId)!
@@ -26,30 +30,49 @@ export const EntitiesLoader: APIFC<undefined, EntitiesLoaderConfig> = ({
     selectEntitiesLoadingState(state, { deviceId })
   )
   const allLoaded = config.entitiesTypes.every(
-    (entitiesType) => entitiesLoadingStates[entitiesType] === "loaded"
+    (entitiesType) => entitiesLoadingStates[entitiesType].state === "loaded"
   )
+  const [showProgress, setShowProgress] = useState(!allLoaded)
+  const [totalProgress, setTotalProgress] = useState(0)
 
   useEffect(() => {
+    const progress: Record<string, number> = {}
+
     for (const entitiesType of config.entitiesTypes) {
-      if (entitiesLoadingStates[entitiesType] === "idle") {
+      const entity = entitiesLoadingStates[entitiesType]
+      if (entity.state === "idle") {
+        progress[entitiesType] = 0
         dispatch(getEntitiesDataAction({ entitiesType, deviceId }))
+      } else if (entity.state === "loading" || entity.state === "loaded") {
+        progress[entitiesType] = entity.progress
       }
     }
+    setTotalProgress(
+      sum(Object.values(progress)) / Object.keys(progress).length
+    )
   }, [config.entitiesTypes, deviceId, dispatch, entitiesLoadingStates])
 
-  if (allLoaded) {
+  useEffect(() => {
+    let timeout: NodeJS.Timeout
+    if (allLoaded) {
+      timeout = setTimeout(() => setShowProgress(false), 300)
+    }
+    return () => {
+      clearTimeout(timeout)
+    }
+  }, [allLoaded])
+
+  if (!showProgress) {
     return children
   }
   return (
-    <Wrapper>
-      <SpinnerLoader dark />
-    </Wrapper>
+    <div {...props}>
+      {config.text && <H3>{config.text}</H3>}
+      <Progress config={{ maxValue: 100 }} data={{ value: totalProgress }} />
+    </div>
   )
 }
 
-const Wrapper = styled.div`
-  & > * {
-    width: 5rem;
-    height: 5rem;
-  }
+const Progress = styled(ProgressBar)`
+  max-width: 22.3rem;
 `
diff --git a/libs/generic-view/ui/src/lib/generated/mc-import-contacts-button.ts b/libs/generic-view/ui/src/lib/generated/mc-import-contacts-button.ts
index 59fd42a7fc..13957245d7 100644
--- a/libs/generic-view/ui/src/lib/generated/mc-import-contacts-button.ts
+++ b/libs/generic-view/ui/src/lib/generated/mc-import-contacts-button.ts
@@ -14,11 +14,13 @@ export const generateMcImportContactsButton: ComponentGenerator<
       component: "button-primary",
       config: {
         text: config.text,
-        action: {
-          type: "open-modal",
-          modalKey: `${key}-modal`,
-          domain: "import-contacts",
-        },
+        actions: [
+          {
+            type: "open-modal",
+            modalKey: `${key}-modal`,
+            domain: "import-contacts",
+          },
+        ],
       },
       layout,
     },
diff --git a/libs/generic-view/ui/src/lib/icon/get-icon.helper.tsx b/libs/generic-view/ui/src/lib/icon/get-icon.helper.tsx
index 200f88110c..49c93fcd26 100644
--- a/libs/generic-view/ui/src/lib/icon/get-icon.helper.tsx
+++ b/libs/generic-view/ui/src/lib/icon/get-icon.helper.tsx
@@ -52,6 +52,7 @@ import ArrowBack from "./svg/arrow-back.svg"
 import Support from "./svg/support.svg"
 import Exclamation from "./svg/exclamation.svg"
 import Namaste from "./svg/namaste.svg"
+import Delete from "./svg/delete.svg"
 
 import { IconType } from "generic-view/utils"
 
@@ -102,6 +103,7 @@ const typeToIcon: Record<IconType, typeof BatteryHigh> = {
   [IconType.Support]: Support,
   [IconType.Exclamation]: Exclamation,
   [IconType.Namaste]: Namaste,
+  [IconType.Delete]: Delete,
 }
 
 export const getIcon = (
diff --git a/libs/generic-view/ui/src/lib/icon/svg/delete.svg b/libs/generic-view/ui/src/lib/icon/svg/delete.svg
new file mode 100644
index 0000000000..abcb1d3b68
--- /dev/null
+++ b/libs/generic-view/ui/src/lib/icon/svg/delete.svg
@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M13.5421 5.5C14.313 5.5 14.9437 6.13585 14.9437 6.913V7.42522H17.9744C18.2723 7.42522 18.5 7.65483 18.5 7.95509V7.99042C18.4825 8.27302 18.2547 8.50263 17.9744 8.48497H17.0459L16.4853 17.1749C16.4503 17.9168 15.8371 18.5173 15.0838 18.4996H8.91714C8.16383 18.5173 7.55066 17.9168 7.51563 17.1749L6.95502 8.48497H5.99148C5.71117 8.4673 5.48343 8.23769 5.50095 7.95509C5.50095 7.65483 5.72869 7.42522 6.02652 7.42522H9.05729V6.913C9.05729 6.13585 9.68797 5.5 10.4588 5.5H13.5421ZM15.9773 8.48497H8.02367L8.56676 17.1043V17.1219C8.58428 17.3162 8.74195 17.4575 8.91714 17.4399H15.1013C15.294 17.4399 15.4342 17.2809 15.4342 17.1043L15.9773 8.48497ZM10.5639 10.0393C10.8442 10.0569 11.072 10.2865 11.0895 10.5691V15.3557C11.072 15.6383 10.8442 15.8679 10.5639 15.8856C10.2661 15.8856 10.0384 15.656 10.0384 15.3557V10.5691C10.0384 10.2689 10.2661 10.0393 10.5639 10.0393ZM13.437 10.0393C13.7348 10.0393 13.9626 10.2689 13.9626 10.5691V15.3557C13.9626 15.656 13.7348 15.8856 13.437 15.8856C13.1567 15.8679 12.929 15.6383 12.9115 15.3557V10.5691C12.929 10.2865 13.1567 10.0569 13.437 10.0393ZM13.5421 6.55975H10.4588C10.2661 6.55975 10.1084 6.71871 10.1084 6.913V7.42522H13.8925V6.913C13.8925 6.71871 13.7348 6.55975 13.5421 6.55975Z"
+          fill="currentColor"/>
+</svg>
diff --git a/libs/generic-view/ui/src/lib/interactive/conditional-renderer.tsx b/libs/generic-view/ui/src/lib/interactive/conditional-renderer.tsx
new file mode 100644
index 0000000000..b379943f1d
--- /dev/null
+++ b/libs/generic-view/ui/src/lib/interactive/conditional-renderer.tsx
@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { APIFC } from "generic-view/utils"
+import { ConditionalRendererData } from "generic-view/models"
+
+export const ConditionalRenderer: APIFC<ConditionalRendererData> = ({
+  children,
+  data,
+}) => {
+  if (data?.render) {
+    return children
+  }
+  return null
+}
diff --git a/libs/generic-view/ui/src/lib/interactive/form/form.tsx b/libs/generic-view/ui/src/lib/interactive/form/form.tsx
index 20b96a3a4c..264dcd39cf 100644
--- a/libs/generic-view/ui/src/lib/interactive/form/form.tsx
+++ b/libs/generic-view/ui/src/lib/interactive/form/form.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from "react"
-import { APIFC } from "generic-view/utils"
+import { APIFC, useViewFormRegister } from "generic-view/utils"
 import { FormProvider, useForm } from "react-hook-form"
 import { TextInput } from "./input/text-input"
 import { RadioInput } from "./input/radio-input"
@@ -12,6 +12,7 @@ import { CheckboxInput } from "./input/checkbox-input"
 import { SearchInput } from "./input/search-input"
 import { FormConfig } from "generic-view/models"
 import { FormConditionalRenderer } from "./helpers/form-conditional-renderer"
+import { useFormRegister } from "generic-view/store"
 
 export const Form: APIFC<undefined, FormConfig> & {
   TextInput: typeof TextInput
@@ -19,11 +20,18 @@ export const Form: APIFC<undefined, FormConfig> & {
   CheckboxInput: typeof CheckboxInput
   SearchInput: typeof SearchInput
   ConditionalRenderer: typeof FormConditionalRenderer
-} = ({ config, children }) => {
+} = ({ config, children, componentKey }) => {
   const methods = useForm({
     mode: "onTouched",
     ...config?.formOptions,
   })
+  useViewFormRegister(componentKey!, methods)
+  useFormRegister({
+    formName: componentKey!,
+    options: {
+      defaultValues: config?.defaultValues,
+    },
+  })
   return <FormProvider {...methods}>{children}</FormProvider>
 }
 Form.TextInput = TextInput
diff --git a/libs/generic-view/ui/src/lib/interactive/form/input/checkbox-input.tsx b/libs/generic-view/ui/src/lib/interactive/form/input/checkbox-input.tsx
index 98ddf01c49..96a124bc52 100644
--- a/libs/generic-view/ui/src/lib/interactive/form/input/checkbox-input.tsx
+++ b/libs/generic-view/ui/src/lib/interactive/form/input/checkbox-input.tsx
@@ -3,10 +3,9 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
-import React, { useId } from "react"
-import { APIFC, IconType } from "generic-view/utils"
+import React, { useCallback, useEffect, useId, useMemo, useRef } from "react"
+import { APIFC, IconType, useViewFormContext } from "generic-view/utils"
 import styled from "styled-components"
-import { useFormContext } from "react-hook-form"
 import { Icon } from "../../../icon/icon"
 import { FormCheckboxInputConfig } from "generic-view/models"
 
@@ -21,14 +20,82 @@ export const CheckboxInput: APIFC<undefined, Config> = ({
   ...props
 }) => {
   const id = useId()
-  const { register } = useFormContext()
-  const { onChange, ...rest } = register(config.name, {
+  const getFormContext = useViewFormContext()
+  const { register, setValue, getValues, watch } = getFormContext()
+  const inputRef = useRef<HTMLInputElement | null>(null)
+
+  const inputName = config.multipleValues
+    ? `${config.name}-multiple`
+    : config.name
+
+  const fieldRegistrar = register(inputName, {
     ...config.validation,
   })
 
+  const multiSelectValues = config.multipleValues
+    ? watch(config.name)
+    : undefined
+
+  const multiSelect = useMemo(() => {
+    return config.multipleValues
+      ? {
+          allValues: config.multipleValues,
+          selectedValues: multiSelectValues,
+        }
+      : undefined
+  }, [config.multipleValues, multiSelectValues])
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const checked = e.target.checked
+      config.onToggle?.(checked)
+
+      if (multiSelect) {
+        if (
+          checked ||
+          (!checked &&
+            multiSelect.selectedValues.length < multiSelect.allValues.length)
+        ) {
+          setValue(config.name, multiSelect.allValues)
+        } else {
+          setValue(config.name, [])
+        }
+      } else {
+        const checkedValues = getValues(inputName)
+        if (checkedValues instanceof Array) {
+          setValue(
+            inputName,
+            checked
+              ? [config.value, ...checkedValues]
+              : checkedValues.filter((v: unknown) => v !== config.value)
+          )
+        } else {
+          void fieldRegistrar.onChange(e)
+        }
+      }
+    },
+    [config, fieldRegistrar, getValues, inputName, multiSelect, setValue]
+  )
+
+  useEffect(() => {
+    if (multiSelect) {
+      if (multiSelect.selectedValues.length === multiSelect.allValues.length) {
+        setValue(inputName, true)
+      } else {
+        setValue(inputName, false)
+      }
+      if (inputRef.current) {
+        inputRef.current.indeterminate =
+          multiSelect.selectedValues.length > 0 &&
+          multiSelect.selectedValues.length < multiSelect.allValues.length
+      }
+    }
+  }, [fieldRegistrar.ref, inputName, multiSelect, setValue])
+
   return (
     <Wrapper
       {...props}
+      $size={config.size}
       onClick={(e) => {
         e.stopPropagation()
       }}
@@ -38,16 +105,19 @@ export const CheckboxInput: APIFC<undefined, Config> = ({
         type={"checkbox"}
         value={config.value}
         checked={config.checked}
-        onChange={(e) => {
-          config.onToggle?.(e.target.checked)
-          void onChange(e)
-        }}
         disabled={config.disabled}
-        {...rest}
+        {...fieldRegistrar}
+        onChange={handleChange}
+        ref={(e) => {
+          inputRef.current = e
+          fieldRegistrar.ref(e)
+        }}
       />
       <Label htmlFor={"checkbox-" + id}>
         <InputBox>
+          <HitArea htmlFor={"checkbox-" + id} />
           <CheckIcon />
+          <IndeterminateIcon />
         </InputBox>
         {children || (config.label ? <span>{config.label}</span> : null)}
       </Label>
@@ -55,59 +125,99 @@ export const CheckboxInput: APIFC<undefined, Config> = ({
   )
 }
 
-const Wrapper = styled.div`
+const Wrapper = styled.div<{ $size: Config["size"] }>`
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: 100%;
-  min-height: 3.2rem;
+  width: min-content;
+  height: min-content;
+  ${({ $size }) => {
+    switch ($size) {
+      case "small":
+        return `
+        ${InputBox} {
+          min-width: 1.6rem;
+          min-height: 1.6rem;
+          width: 1.6rem;
+          height: 1.6rem;
+        }
+        ${CheckIcon} {
+          width: 1.2rem;
+          height: 1.2rem;
+        }
+      `
+      default:
+        return `
+        ${InputBox} {
+          min-width: 2.2rem;
+          min-height: 2.2rem;
+          width: 2.2rem;
+          height: 2.2rem;`
+    }
+  }};
 `
 
 const Label = styled.label`
-  display: flex;
-  flex: 1;
-  align-items: center;
-  flex-direction: row;
   color: ${({ theme }) => theme.color.grey1};
   letter-spacing: 0.02em;
   font-size: ${({ theme }) => theme.fontSize.paragraph1};
-  line-height: ${({ theme }) => theme.lineHeight.paragraph1};
+  line-height: 2.2rem;
   cursor: pointer;
   user-select: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: max-content;
 `
 
 const CheckIcon = styled(Icon).attrs({ data: { type: IconType.Check } })`
   width: 1.8rem;
   height: 1.8rem;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 `
 
+const IndeterminateIcon = styled(CheckIcon).attrs({
+  data: { type: IconType.Minus },
+})``
+
 const InputBox = styled.div`
   min-width: 2.2rem;
   min-height: 2.2rem;
   width: 2.2rem;
   height: 2.2rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  align-self: baseline;
   border-radius: ${({ theme }) => theme.radius.xs};
   border: 0.1rem solid ${({ theme }) => theme.color.grey4};
   margin: 0;
   transition: background-color 0.2s ease-in-out;
-  overflow: hidden;
   box-sizing: border-box;
+  position: relative;
 
   & + * {
     margin-left: 1.4rem;
   }
 
   ${CheckIcon} {
+    display: flex;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
   }
 `
 
+const HitArea = styled.label`
+  width: 3.2rem;
+  height: 3.2rem;
+  position: absolute;
+  opacity: 0.1;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  cursor: pointer;
+`
+
 const Input = styled.input<{ $withError?: boolean }>`
   display: none;
 
@@ -120,6 +230,28 @@ const Input = styled.input<{ $withError?: boolean }>`
         opacity: 1;
         visibility: visible;
       }
+
+      ${IndeterminateIcon} {
+        opacity: 0;
+        visibility: hidden;
+      }
+    }
+  }
+
+  &:indeterminate + ${Label} {
+    ${InputBox} {
+      border-color: ${({ theme }) => theme.color.grey1};
+      background-color: ${({ theme }) => theme.color.grey1};
+
+      ${CheckIcon} {
+        opacity: 0;
+        visibility: hidden;
+      }
+
+      ${IndeterminateIcon} {
+        opacity: 1;
+        visibility: visible;
+      }
     }
   }
 
diff --git a/libs/generic-view/ui/src/lib/interactive/format-message.tsx b/libs/generic-view/ui/src/lib/interactive/format-message.tsx
new file mode 100644
index 0000000000..f64c27e3df
--- /dev/null
+++ b/libs/generic-view/ui/src/lib/interactive/format-message.tsx
@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React, { useId } from "react"
+import { APIFC } from "generic-view/utils"
+import { FormatMessageConfig, FormatMessageData } from "generic-view/models"
+import { createIntl, createIntlCache, RawIntlProvider } from "react-intl"
+import { useSelector } from "react-redux"
+import { selectActiveDeviceConfiguration } from "generic-view/store"
+
+export const FormatMessage: APIFC<FormatMessageData, FormatMessageConfig> = ({
+  data,
+  config,
+}) => {
+  const id = useId()
+  const deviceConfig = useSelector(selectActiveDeviceConfiguration)
+
+  if (!data || !deviceConfig) {
+    return null
+  }
+  const locale = deviceConfig.apiConfig.lang || "en-US"
+  const cache = createIntlCache()
+  const intl = createIntl(
+    { locale, messages: { [id]: config.messageTemplate } },
+    cache
+  )
+  return (
+    <RawIntlProvider value={intl}>
+      {intl.formatMessage({ id }, data.fields)}
+    </RawIntlProvider>
+  )
+}
diff --git a/libs/generic-view/ui/src/lib/interactive/interactive.ts b/libs/generic-view/ui/src/lib/interactive/interactive.ts
index 0cb6c30873..f8a160460e 100644
--- a/libs/generic-view/ui/src/lib/interactive/interactive.ts
+++ b/libs/generic-view/ui/src/lib/interactive/interactive.ts
@@ -8,8 +8,12 @@ import { TextModal } from "./modal/text-modal"
 import { ProgressBar } from "./progress-bar/progress-bar"
 import Form from "./form/form"
 import Tooltip from "./tooltip/tooltip"
+import { Toast } from "./toast/toast"
+import { ConditionalRenderer } from "./conditional-renderer"
 import {
+  conditionalRenderer,
   form,
+  formatMessage,
   formCheckboxInput,
   formConditionalRenderer,
   formRadioInput,
@@ -25,10 +29,12 @@ import {
   modalVisibilityController,
   progressBar,
   textModal,
+  toast,
   tooltip,
   tooltipAnchor,
   tooltipContent,
 } from "generic-view/models"
+import { FormatMessage } from "./format-message"
 
 export const interactive = {
   [modal.key]: Modal,
@@ -50,4 +56,7 @@ export const interactive = {
   [tooltip.key]: Tooltip,
   [tooltipAnchor.key]: Tooltip.Anchor,
   [tooltipContent.key]: Tooltip.Content,
+  [formatMessage.key]: FormatMessage,
+  [toast.key]: Toast,
+  [conditionalRenderer.key]: ConditionalRenderer,
 }
diff --git a/libs/generic-view/ui/src/lib/interactive/modal/helpers/modal-close-button.tsx b/libs/generic-view/ui/src/lib/interactive/modal/helpers/modal-close-button.tsx
index 590d9493df..fed49d0432 100644
--- a/libs/generic-view/ui/src/lib/interactive/modal/helpers/modal-close-button.tsx
+++ b/libs/generic-view/ui/src/lib/interactive/modal/helpers/modal-close-button.tsx
@@ -18,10 +18,10 @@ export const ModalCloseButton: APIFC<undefined, ModalCloseButtonConfig> = ({
   className = "",
   ...rest
 }) => {
-  if (!config?.action) return null
+  if (!config?.actions) return null
   return (
     <ModalClose
-      action={config.action}
+      actions={config.actions}
       data-testid={ModalCloseButtonTestIds.IconButton}
       className={"modal-close-icon-button " + className}
       {...rest}
diff --git a/libs/generic-view/ui/src/lib/interactive/modal/helpers/modal-title-icon.tsx b/libs/generic-view/ui/src/lib/interactive/modal/helpers/modal-title-icon.tsx
index 41715a94aa..df994c48ce 100644
--- a/libs/generic-view/ui/src/lib/interactive/modal/helpers/modal-title-icon.tsx
+++ b/libs/generic-view/ui/src/lib/interactive/modal/helpers/modal-title-icon.tsx
@@ -6,22 +6,29 @@
 import React from "react"
 import styled from "styled-components"
 import { Icon } from "../../../icon/icon"
-import { APIFC } from "generic-view/utils"
+import { APIFC, IconType } from "generic-view/utils"
 import { ModalTitleIconConfig } from "generic-view/models"
+import { spinAnimation } from "../../../shared/spinner-loader"
 
 export const ModalTitleIcon: APIFC<undefined, ModalTitleIconConfig> = ({
+  data,
   config,
   children,
   ...rest
 }) => {
-  return <TitleIcon config={config} {...rest} />
+  if (!config?.type) return null
+  const spin =
+    config.type === IconType.Spinner || config.type === IconType.SpinnerDark
+  return <TitleIcon config={config} $spin={spin} {...rest} />
 }
 
-export const TitleIcon = styled(Icon)`
+export const TitleIcon = styled(Icon)<{ $spin?: boolean }>`
   width: 6.8rem;
   height: 6.8rem;
   padding: ${({ theme }) => theme.space.md};
   border-radius: 50%;
   background-color: ${({ theme }) => theme.color.grey5};
   align-self: center;
+
+  ${({ $spin }) => $spin && spinAnimation}
 `
diff --git a/libs/generic-view/ui/src/lib/interactive/modal/modal.tsx b/libs/generic-view/ui/src/lib/interactive/modal/modal.tsx
index 28dbef35cc..f9f627c4c0 100644
--- a/libs/generic-view/ui/src/lib/interactive/modal/modal.tsx
+++ b/libs/generic-view/ui/src/lib/interactive/modal/modal.tsx
@@ -47,7 +47,7 @@ export const Modal: BaseGenericComponent<
       modalLayer={config.modalLayer}
     >
       {config.closeButtonAction && (
-        <ModalCloseButton config={{ action: config.closeButtonAction }} />
+        <ModalCloseButton config={{ actions: [config.closeButtonAction] }} />
       )}
       <ModalContent
         className={"modal-content"}
diff --git a/libs/generic-view/ui/src/lib/interactive/modal/text-modal.tsx b/libs/generic-view/ui/src/lib/interactive/modal/text-modal.tsx
index 409c733d40..1d533f5fb7 100644
--- a/libs/generic-view/ui/src/lib/interactive/modal/text-modal.tsx
+++ b/libs/generic-view/ui/src/lib/interactive/modal/text-modal.tsx
@@ -4,10 +4,10 @@
  */
 
 import React, { UIEventHandler, useState } from "react"
-import { BaseGenericComponent, ModalAction } from "generic-view/utils"
+import { BaseGenericComponent } from "generic-view/utils"
 import styled, { css } from "styled-components"
 import { Modal } from "./modal"
-import { TextModalConfig } from "generic-view/models"
+import { ModalAction, TextModalConfig } from "generic-view/models"
 
 export const TextModal: BaseGenericComponent<
   undefined,
@@ -35,7 +35,7 @@ export const TextModal: BaseGenericComponent<
       }}
     >
       <Header $active={contentScrolled}>
-        <Modal.CloseButton config={{ action: closeAction }} />
+        <Modal.CloseButton config={{ actions: [closeAction] }} />
       </Header>
       <ScrollContainer onScroll={handleScroll}>{children}</ScrollContainer>
     </Modal>
diff --git a/libs/generic-view/ui/src/lib/interactive/toast/toast.tsx b/libs/generic-view/ui/src/lib/interactive/toast/toast.tsx
new file mode 100644
index 0000000000..52d4370005
--- /dev/null
+++ b/libs/generic-view/ui/src/lib/interactive/toast/toast.tsx
@@ -0,0 +1,123 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React, { useEffect, useRef, useState } from "react"
+import { APIFC } from "generic-view/utils"
+import styled, { css, keyframes } from "styled-components"
+import { ToastConfig } from "generic-view/models"
+import { Dispatch, ReduxRootState } from "Core/__deprecated__/renderer/store"
+import { useDispatch, useSelector } from "react-redux"
+import { removeToast } from "generic-view/store"
+
+const toastAnimationDuration = 300
+
+export const Toast: APIFC<undefined, ToastConfig> = ({
+  config,
+  children,
+  ...props
+}) => {
+  const toastVisibilityDuration = config?.visibilityDuration ?? 2000
+
+  const dispatch = useDispatch<Dispatch>()
+  const toastsQueue = useSelector(
+    (state: ReduxRootState) => state.genericToasts.queue
+  )
+  const [opened, setOpened] = useState(false)
+  const [visible, setVisible] = useState(false)
+
+  const animationTimeoutRef = useRef<NodeJS.Timeout>()
+  const visibilityTimeoutRef = useRef<NodeJS.Timeout>()
+
+  useEffect(() => {
+    const toastOpened =
+      toastsQueue.length > 0 && toastsQueue[0].key === props.componentKey
+    setOpened(toastOpened)
+    if (toastOpened) {
+      setVisible(true)
+    }
+  }, [props.componentKey, toastsQueue])
+
+  useEffect(() => {
+    if (visible) {
+      visibilityTimeoutRef.current = setTimeout(() => {
+        setVisible(false)
+      }, toastVisibilityDuration + toastAnimationDuration)
+    } else {
+      animationTimeoutRef.current = setTimeout(() => {
+        setOpened(false)
+      }, toastAnimationDuration)
+    }
+    return () => {
+      clearTimeout(visibilityTimeoutRef.current)
+      clearTimeout(animationTimeoutRef.current)
+    }
+  }, [toastVisibilityDuration, visible])
+
+  useEffect(() => {
+    if (!opened) {
+      dispatch(removeToast())
+    }
+  }, [dispatch, opened])
+
+  if (!opened) return null
+  return (
+    <ToastWrapper
+      {...props}
+      $opened={visible}
+      $animationDuration={toastAnimationDuration}
+    >
+      {children}
+    </ToastWrapper>
+  )
+}
+
+const transitionIn = keyframes`
+  from {
+    transform: translateX(calc(100% + 7rem));
+  }
+  to {
+    transform: translateX(0);
+  }
+`
+
+const transitionOut = keyframes`
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(100% + 7rem));
+  }
+`
+
+const ToastWrapper = styled.div<{
+  $opened?: boolean
+  $animationDuration: number
+}>`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  padding: 2rem;
+  width: max-content;
+  background-color: ${({ theme }) => theme.color.white};
+  box-shadow: 0 0.2rem 3rem rgba(0, 0, 0, 0.0793816);
+  border-radius: ${({ theme }) => theme.radius.sm};
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.4rem;
+
+  p {
+    color: ${({ theme }) => theme.color.black};
+  }
+
+  ${({ $opened, $animationDuration }) =>
+    $opened
+      ? css`
+          animation: ${transitionIn} ${$animationDuration}ms ease-in-out;
+        `
+      : css`
+          animation: ${transitionOut} ${$animationDuration}ms ease-in-out;
+        `}
+`
diff --git a/libs/generic-view/ui/src/lib/interactive/tooltip/tooltip-helpers.tsx b/libs/generic-view/ui/src/lib/interactive/tooltip/tooltip-helpers.tsx
new file mode 100644
index 0000000000..4468346bb3
--- /dev/null
+++ b/libs/generic-view/ui/src/lib/interactive/tooltip/tooltip-helpers.tsx
@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { TooltipPlacement } from "device/models"
+
+type PlacementMap = { [key in TooltipPlacement]: TooltipPlacement }
+
+const VERTICAL_FLIP_MAP: PlacementMap = {
+  "bottom-right": "top-right",
+  "bottom-left": "top-left",
+  "top-right": "bottom-right",
+  "top-left": "bottom-left",
+}
+
+const HORIZONTAL_FLIP_MAP: PlacementMap = {
+  "bottom-right": "bottom-left",
+  "bottom-left": "bottom-right",
+  "top-right": "top-left",
+  "top-left": "top-right",
+}
+
+export const flipVertical = (placement: TooltipPlacement): TooltipPlacement => {
+  return VERTICAL_FLIP_MAP[placement]
+}
+
+export const flipHorizontal = (
+  placement: TooltipPlacement
+): TooltipPlacement => {
+  return HORIZONTAL_FLIP_MAP[placement]
+}
+
+export const flipTooltipPlacement = (
+  placement: TooltipPlacement
+): TooltipPlacement => {
+  return flipHorizontal(flipVertical(placement))
+}
+
+export const getFlipStatus = (
+  original: TooltipPlacement,
+  current: TooltipPlacement
+): { isFlippedVertically: boolean; isFlippedHorizontally: boolean } => {
+  const isFlippedVertically = VERTICAL_FLIP_MAP[original] === current
+  const isFlippedHorizontally = HORIZONTAL_FLIP_MAP[original] === current
+
+  return { isFlippedVertically, isFlippedHorizontally }
+}
diff --git a/libs/generic-view/ui/src/lib/interactive/tooltip/tooltip.tsx b/libs/generic-view/ui/src/lib/interactive/tooltip/tooltip.tsx
index 73f4becc73..21887e65df 100644
--- a/libs/generic-view/ui/src/lib/interactive/tooltip/tooltip.tsx
+++ b/libs/generic-view/ui/src/lib/interactive/tooltip/tooltip.tsx
@@ -4,28 +4,128 @@
  */
 
 import React, {
+  forwardRef,
+  useRef,
   MouseEvent,
   ReactElement,
   useCallback,
   useMemo,
   useState,
 } from "react"
-import { APIFC, BaseGenericComponent } from "generic-view/utils"
-import styled from "styled-components"
+import styled, { css } from "styled-components"
+import { BaseGenericComponent } from "generic-view/utils"
+import { TooltipOffsetType, TooltipPlacement } from "device/models"
+import {
+  flipHorizontal,
+  flipTooltipPlacement,
+  flipVertical,
+  getFlipStatus,
+} from "./tooltip-helpers"
 
-export const Tooltip: APIFC & {
+interface Position {
+  left: number
+  top: number
+}
+
+export const Tooltip: BaseGenericComponent<
+  undefined,
+  undefined,
+  { placement?: TooltipPlacement; offset?: TooltipOffsetType }
+> & {
   Anchor: typeof TooltipAnchor
   Content: typeof TooltipContent
-} = ({ children }) => {
-  const [anchorPosition, setAnchorPosition] = useState<{
-    top?: number
-    left?: number
-  }>({})
+} = ({ children, placement = "bottom-right", offset = { x: 0, y: 0 } }) => {
+  const [contentPosition, setContentPosition] = useState<Partial<Position>>({})
+  const originalPlacement = useRef<TooltipPlacement>(placement)
+
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  const handleAnchorHover = useCallback(
+    (event: MouseEvent) => {
+      const anchorRect = event.currentTarget.getBoundingClientRect()
+      const contentRect = contentRef.current?.getBoundingClientRect()
+
+      if (!contentRect) return
+
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+
+      const placements: TooltipPlacement[] = [
+        placement,
+        flipVertical(placement),
+        flipHorizontal(placement),
+        flipTooltipPlacement(placement),
+      ]
+
+      const calculatePosition = (placement: TooltipPlacement): Position => {
+        let top = 0
+        let left = 0
+
+        const adjustedOffset: TooltipOffsetType = { ...offset }
+        const { isFlippedVertically, isFlippedHorizontally } = getFlipStatus(
+          originalPlacement.current,
+          placement
+        )
+
+        if (isFlippedVertically) {
+          adjustedOffset.y = -offset.y
+        }
+        if (isFlippedHorizontally) {
+          adjustedOffset.x = -offset.x
+        }
+
+        switch (placement) {
+          case "bottom-right":
+            top = anchorRect.top + anchorRect.height + adjustedOffset.y
+            left = anchorRect.left + adjustedOffset.x
+            break
+          case "bottom-left":
+            top = anchorRect.top + anchorRect.height + adjustedOffset.y
+            left =
+              anchorRect.left -
+              contentRect.width +
+              anchorRect.width +
+              adjustedOffset.x
+            break
+          case "top-right":
+            top = anchorRect.top + adjustedOffset.y - contentRect.height
+            left = anchorRect.left + adjustedOffset.x
+            break
+          case "top-left":
+            top = anchorRect.top + adjustedOffset.y - contentRect.height
+            left =
+              anchorRect.left -
+              contentRect.width +
+              anchorRect.width +
+              adjustedOffset.x
+            break
+        }
+
+        return { top, left }
+      }
+
+      const isWithinViewport = (position: Position): boolean => {
+        return (
+          position.left >= 0 &&
+          position.top >= 0 &&
+          position.left + contentRect.width <= viewportWidth &&
+          position.top + contentRect.height <= viewportHeight
+        )
+      }
+
+      for (const placement of placements) {
+        const position = calculatePosition(placement)
+        if (isWithinViewport(position)) {
+          setContentPosition(position)
+          return
+        }
+      }
 
-  const handleAnchorHover = useCallback((event: MouseEvent) => {
-    const rect = event.currentTarget.getBoundingClientRect()
-    setAnchorPosition({ top: rect.top + rect.height, left: rect.left })
-  }, [])
+      const position = calculatePosition(placement)
+      setContentPosition(position)
+    },
+    [placement, offset]
+  )
 
   const anchor = useMemo(() => {
     return React.Children.map(children, (child) => {
@@ -53,17 +153,20 @@ export const Tooltip: APIFC & {
         return null
       }
       return React.cloneElement(child as ReactElement, {
-        $top: anchorPosition.top,
-        $left: anchorPosition.left,
+        ...child.props,
+        $top: contentPosition.top,
+        $left: contentPosition.left,
+        ref: contentRef,
+        $placement: placement,
       })
     })
-  }, [children, anchorPosition.left, anchorPosition.top])
+  }, [children, contentPosition.top, contentPosition.left, placement])
 
   return (
-    <>
+    <Container>
       {anchor}
       {content}
-    </>
+    </Container>
   )
 }
 
@@ -82,20 +185,38 @@ Tooltip.Anchor.defaultProps = {
   "data-tooltip-anchor": true,
 }
 
-const TooltipContent: BaseGenericComponent<
-  undefined,
-  undefined,
-  { viewKey?: string; "data-tooltip-content"?: boolean }
-> = ({ data, config, children, ...rest }) => {
-  return <Content {...rest}>{children}</Content>
-}
+const TooltipContent = forwardRef<
+  HTMLDivElement,
+  {
+    viewKey?: string
+    "data-tooltip-content"?: boolean
+    $defaultStyles?: boolean
+    $placement?: TooltipPlacement
+    children: React.ReactNode
+  }
+>(({ children, ...rest }, ref) => {
+  return (
+    <Content ref={ref} {...rest}>
+      {children}
+    </Content>
+  )
+})
 
 Tooltip.Content = TooltipContent
 Tooltip.Content.defaultProps = {
   "data-tooltip-content": true,
 }
 
-const Content = styled.div<{ $top?: number; $left?: number }>`
+const Container = styled.div`
+  display: inline-block;
+`
+
+const Content = styled.div<{
+  $top?: number
+  $left?: number
+  $placement?: TooltipPlacement
+  $defaultStyles?: boolean
+}>`
   position: fixed;
   z-index: 2;
   pointer-events: none;
@@ -105,6 +226,27 @@ const Content = styled.div<{ $top?: number; $left?: number }>`
 
   ${({ $top }) => ($top ? `top: ${$top}px;` : "")}
   ${({ $left }) => ($left ? `left: ${$left}px;` : "")}
+
+  ${({ $defaultStyles, theme, $placement }) =>
+    $defaultStyles &&
+    css`
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      padding: ${theme.space.xs} ${theme.space.sm};
+      background-color: ${theme.color.grey4};
+      border-radius: ${theme.radius.sm};
+      box-shadow: 0 1rem 5rem 0 rgba(0, 0, 0, 0.08);
+
+      && > p {
+        width: 100%;
+        color: ${theme.color.grey1};
+        white-space: pre-wrap;
+        text-align: ${$placement === "bottom-left" || $placement === "top-left"
+          ? "right"
+          : "left"};
+      }
+    `}
 `
 
 const Anchor = styled.div`
diff --git a/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-error.tsx b/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-error.tsx
index 652c26d147..5f2d3b1eb5 100644
--- a/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-error.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-error.tsx
@@ -4,11 +4,12 @@
  */
 
 import React, { FunctionComponent } from "react"
-import { ButtonAction, CustomModalError, IconType } from "generic-view/utils"
+import { CustomModalError, IconType } from "generic-view/utils"
 import { Modal } from "../../interactive/modal"
 import { ButtonSecondary } from "../../buttons/button-secondary"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
+import { ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   title: {
@@ -49,7 +50,7 @@ export const BackupRestoreError: FunctionComponent<Props> = ({
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.closeButtonLabel),
-            action: closeAction,
+            actions: [closeAction],
           }}
         />
       </Modal.Buttons>
diff --git a/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-password.tsx b/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-password.tsx
index 83d46690a3..fab696f361 100644
--- a/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-password.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-password.tsx
@@ -5,7 +5,7 @@
 
 import React, { FunctionComponent } from "react"
 import styled from "styled-components"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { ButtonPrimary } from "../../buttons/button-primary"
 import { useFormContext } from "react-hook-form"
 import { Modal } from "../../interactive/modal"
@@ -15,6 +15,7 @@ import { useSelector } from "react-redux"
 import { secureBackupPasswordRequest } from "device/feature"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { Form } from "../../interactive/form/form"
+import { ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   title: {
@@ -75,7 +76,7 @@ export const BackupRestorePassword: FunctionComponent<Props> = ({
         <ButtonPrimary
           config={{
             text: intl.formatMessage(messages.confirmButtonLabel),
-            action: nextAction,
+            actions: [nextAction],
             disabled: !password,
           }}
         />
diff --git a/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-select.tsx b/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-select.tsx
index 7920a5af7d..e67554b2b6 100644
--- a/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-select.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-select.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { FunctionComponent, useEffect } from "react"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { Modal } from "../../interactive/modal"
 import { useSelector } from "react-redux"
 import { selectDeviceBackups } from "generic-view/store"
@@ -15,6 +15,7 @@ import { useFormContext } from "react-hook-form"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { Form } from "../../interactive/form/form"
+import { ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   title: {
@@ -90,13 +91,13 @@ export const BackupRestoreSelect: FunctionComponent<Props> = ({
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.cancelButtonLabel),
-            action: closeAction,
+            actions: [closeAction],
           }}
         />
         <ButtonPrimary
           config={{
             text: intl.formatMessage(messages.restoreButtonLabel),
-            action: nextAction,
+            actions: [nextAction],
             disabled: !formState.isValid,
           }}
         />
diff --git a/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-success.tsx b/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-success.tsx
index 63d24edb99..0eb4b4defc 100644
--- a/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-success.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore-success.tsx
@@ -45,10 +45,12 @@ export const BackupRestoreSuccess: FunctionComponent<Props> = ({ onClose }) => {
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.okButtonLabel),
-            action: {
-              type: "custom",
-              callback: onClose,
-            },
+            actions: [
+              {
+                type: "custom",
+                callback: onClose,
+              },
+            ],
           }}
         />
       </Modal.Buttons>
diff --git a/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore.tsx b/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore.tsx
index 6130be0e5f..c302da9f0f 100644
--- a/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/backup-restore/backup-restore.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { FunctionComponent, useEffect, useRef, useState } from "react"
-import { APIFC, ButtonAction, CustomModalError } from "generic-view/utils"
+import { APIFC, CustomModalError } from "generic-view/utils"
 import { Form } from "../../interactive/form/form"
 import { Modal } from "../../interactive/modal"
 import {
@@ -24,7 +24,7 @@ import { BackupRestoreSuccess } from "./backup-restore-success"
 import { BackupRestoreError } from "./backup-restore-error"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
-import { BackupRestoreConfig } from "generic-view/models"
+import { BackupRestoreConfig, ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   cancellationErrorTitle: {
@@ -140,10 +140,10 @@ export const BackupRestoreForm: FunctionComponent<BackupRestoreConfig> = ({
   return (
     <>
       {closeButtonVisible && (
-        <Modal.CloseButton config={{ action: restoreCloseButtonAction }} />
+        <Modal.CloseButton config={{ actions: [restoreCloseButtonAction] }} />
       )}
       {abortButtonVisible && (
-        <Modal.CloseButton config={{ action: abortButtonAction }} />
+        <Modal.CloseButton config={{ actions: [abortButtonAction] }} />
       )}
       {step === Step.Select && (
         <BackupRestoreSelect
diff --git a/libs/generic-view/ui/src/lib/predefined/backup/backup-create.tsx b/libs/generic-view/ui/src/lib/predefined/backup/backup-create.tsx
index 378a9ca2cd..7b5464976e 100644
--- a/libs/generic-view/ui/src/lib/predefined/backup/backup-create.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/backup/backup-create.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { FunctionComponent, useEffect, useRef, useState } from "react"
-import { APIFC, ButtonAction, CustomModalError } from "generic-view/utils"
+import { APIFC, CustomModalError } from "generic-view/utils"
 import { BackupFeatures } from "./backup-features"
 import { BackupPassword } from "./backup-password"
 import { useFormContext } from "react-hook-form"
@@ -23,7 +23,7 @@ import {
 } from "generic-view/store"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
-import { BackupCreateConfig } from "generic-view/models"
+import { BackupCreateConfig, ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   cancellationErrorTitle: {
@@ -147,10 +147,10 @@ const BackupCreateForm: FunctionComponent<BackupCreateConfig> = ({
   return (
     <>
       {closeButtonVisible && (
-        <Modal.CloseButton config={{ action: backupCloseButtonAction }} />
+        <Modal.CloseButton config={{ actions: [backupCloseButtonAction] }} />
       )}
       {abortButtonVisible && (
-        <Modal.CloseButton config={{ action: backupAbortButtonAction }} />
+        <Modal.CloseButton config={{ actions: [backupAbortButtonAction] }} />
       )}
       {step === Step.Features && (
         <>
diff --git a/libs/generic-view/ui/src/lib/predefined/backup/backup-error.tsx b/libs/generic-view/ui/src/lib/predefined/backup/backup-error.tsx
index 797f568efd..734697e98c 100644
--- a/libs/generic-view/ui/src/lib/predefined/backup/backup-error.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/backup/backup-error.tsx
@@ -4,11 +4,12 @@
  */
 
 import React, { FunctionComponent } from "react"
-import { ButtonAction, CustomModalError, IconType } from "generic-view/utils"
+import { CustomModalError, IconType } from "generic-view/utils"
 import { Modal } from "../../interactive/modal"
 import { ButtonSecondary } from "../../buttons/button-secondary"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
+import { ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   title: {
@@ -49,7 +50,7 @@ export const BackupError: FunctionComponent<Props> = ({
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.closeButtonLabel),
-            action: closeAction,
+            actions: [closeAction],
           }}
         />
       </Modal.Buttons>
diff --git a/libs/generic-view/ui/src/lib/predefined/backup/backup-features.tsx b/libs/generic-view/ui/src/lib/predefined/backup/backup-features.tsx
index 446a7b4ac9..46652dd037 100644
--- a/libs/generic-view/ui/src/lib/predefined/backup/backup-features.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/backup/backup-features.tsx
@@ -5,13 +5,13 @@
 
 import React, { FunctionComponent } from "react"
 import styled from "styled-components"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { ButtonSecondary } from "../../buttons/button-secondary"
 import { ButtonPrimary } from "../../buttons/button-primary"
 import { Modal } from "../../interactive/modal"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
-import { BackupFeature } from "generic-view/models"
+import { BackupFeature, ButtonAction } from "generic-view/models"
 import { BackupModalTestIds } from "e2e-test-ids"
 
 const messages = defineMessages({
@@ -92,14 +92,14 @@ export const BackupFeatures: FunctionComponent<Props> = ({
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.cancelButtonLabel),
-            action: closeAction,
+            actions: [closeAction],
           }}
           data-testid={BackupModalTestIds.CancelBackupAction}
         />
         <ButtonPrimary
           config={{
             text: intl.formatMessage(messages.createButtonLabel),
-            action: nextAction,
+            actions: [nextAction],
           }}
           data-testid={BackupModalTestIds.CreateBackupAction}
         />
diff --git a/libs/generic-view/ui/src/lib/predefined/backup/backup-password.tsx b/libs/generic-view/ui/src/lib/predefined/backup/backup-password.tsx
index c6f189db6d..2bcc4b85ef 100644
--- a/libs/generic-view/ui/src/lib/predefined/backup/backup-password.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/backup/backup-password.tsx
@@ -5,7 +5,7 @@
 
 import React, { FunctionComponent } from "react"
 import styled from "styled-components"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { ButtonPrimary } from "../../buttons/button-primary"
 import { ButtonText } from "../../buttons/button-text"
 import { useFormContext } from "react-hook-form"
@@ -14,6 +14,7 @@ import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { Form } from "../../interactive/form/form"
 import { PredefinedBackupPasswordTestIds } from "e2e-test-ids"
+import { ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   title: {
@@ -106,7 +107,7 @@ export const BackupPassword: FunctionComponent<Props> = ({
           data-testid={PredefinedBackupPasswordTestIds.ConfirmButton}
           config={{
             text: intl.formatMessage(messages.confirmButtonLabel),
-            action: nextAction,
+            actions: [nextAction],
             disabled: !password || !passwordsMatching,
           }}
         />
@@ -114,7 +115,7 @@ export const BackupPassword: FunctionComponent<Props> = ({
           data-testid={PredefinedBackupPasswordTestIds.SkipButton}
           config={{
             text: intl.formatMessage(messages.skipButtonLabel),
-            action: skipAction,
+            actions: [skipAction],
             modifiers: ["link", "uppercase"],
           }}
         />
diff --git a/libs/generic-view/ui/src/lib/predefined/backup/backup-success.tsx b/libs/generic-view/ui/src/lib/predefined/backup/backup-success.tsx
index 6f599cbfb3..bb44657191 100644
--- a/libs/generic-view/ui/src/lib/predefined/backup/backup-success.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/backup/backup-success.tsx
@@ -57,7 +57,7 @@ export const BackupSuccess: FunctionComponent<Props> = ({ onClose }) => {
         <ButtonText
           config={{
             text: intl.formatMessage(messages.openBackupButtonLabel),
-            action: { type: "custom", callback: openBackupCallback },
+            actions: [{ type: "custom", callback: openBackupCallback }],
             modifiers: ["uppercase", "link"],
             icon: IconType.Folder,
           }}
@@ -67,10 +67,7 @@ export const BackupSuccess: FunctionComponent<Props> = ({ onClose }) => {
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.closeButtonLabel),
-            action: {
-              type: "custom",
-              callback: onClose,
-            },
+            actions: [{ type: "custom", callback: onClose }],
           }}
         />
       </Modal.Buttons>
diff --git a/libs/generic-view/ui/src/lib/predefined/data-migration/components/cancel-confirm-modal.tsx b/libs/generic-view/ui/src/lib/predefined/data-migration/components/cancel-confirm-modal.tsx
index dca6229967..82350c9ce1 100644
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/components/cancel-confirm-modal.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/components/cancel-confirm-modal.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { FunctionComponent, useEffect, useState } from "react"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { defineMessages } from "react-intl"
 import { modalTransitionDuration } from "generic-view/theme"
@@ -12,6 +12,7 @@ import { ButtonSecondary } from "../../../buttons/button-secondary"
 import { ButtonPrimary } from "../../../buttons/button-primary"
 import { Modal } from "../../../interactive/modal"
 import styled, { keyframes } from "styled-components"
+import { ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   title: {
@@ -84,13 +85,13 @@ export const CancelConfirmModal: FunctionComponent<Props> = ({
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.backButtonLabel),
-            action: backButtonAction,
+            actions: [backButtonAction],
           }}
         />
         <ButtonPrimary
           config={{
             text: intl.formatMessage(messages.cancelButtonLabel),
-            action: cancelButtonAction,
+            actions: [cancelButtonAction],
           }}
         />
       </Modal.Buttons>
diff --git a/libs/generic-view/ui/src/lib/predefined/data-migration/components/device-card.tsx b/libs/generic-view/ui/src/lib/predefined/data-migration/components/device-card.tsx
index f3e980b805..d4c694f890 100644
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/components/device-card.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/components/device-card.tsx
@@ -46,7 +46,7 @@ export const DeviceCard: FunctionComponent<
       <SelectButton
         config={{
           text: intl.formatMessage(messages.selectButton),
-          action: { type: "custom", callback: onSelect },
+          actions: [{ type: "custom", callback: onSelect }],
         }}
       />
     </Wrapper>
diff --git a/libs/generic-view/ui/src/lib/predefined/data-migration/components/error-modal.tsx b/libs/generic-view/ui/src/lib/predefined/data-migration/components/error-modal.tsx
index 7590ca0e96..3a23e83fd5 100644
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/components/error-modal.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/components/error-modal.tsx
@@ -5,9 +5,10 @@
 
 import React, { FunctionComponent, ReactElement } from "react"
 import { Modal } from "../../../interactive/modal/modal"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { ButtonSecondary } from "../../../buttons/button-secondary"
 import { modalTransitionDuration } from "generic-view/theme"
+import { ButtonAction } from "generic-view/models"
 
 interface Props {
   modalIcon: IconType
@@ -42,7 +43,7 @@ export const ErrorModal: FunctionComponent<Props> = ({
         <ButtonSecondary
           config={{
             text: buttonLabel,
-            action: buttonAction,
+            actions: [buttonAction],
           }}
         />
       </Modal.Buttons>
diff --git a/libs/generic-view/ui/src/lib/predefined/data-migration/components/features-selector.tsx b/libs/generic-view/ui/src/lib/predefined/data-migration/components/features-selector.tsx
index 151d724323..30035f0131 100644
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/components/features-selector.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/components/features-selector.tsx
@@ -117,4 +117,8 @@ const List = styled.div`
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
+
+  & > * {
+    min-height: 3.2rem;
+  }
 `
diff --git a/libs/generic-view/ui/src/lib/predefined/data-migration/components/progress-modal.tsx b/libs/generic-view/ui/src/lib/predefined/data-migration/components/progress-modal.tsx
index e393315524..ffd1803ab6 100644
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/components/progress-modal.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/components/progress-modal.tsx
@@ -6,14 +6,14 @@
 import React, { FunctionComponent, useMemo, useState } from "react"
 import { useSelector } from "react-redux"
 import { Modal } from "../../../interactive/modal/modal"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { ButtonSecondary } from "../../../buttons/button-secondary"
 import { selectDataMigrationProgress } from "generic-view/store"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { ProgressBar } from "../../../interactive/progress-bar/progress-bar"
 import styled from "styled-components"
-import { DataMigrationFeature } from "generic-view/models"
+import { ButtonAction, DataMigrationFeature } from "generic-view/models"
 import { CancelConfirmModal } from "./cancel-confirm-modal"
 
 const messages = defineMessages({
@@ -85,7 +85,7 @@ export const ProgressModal: FunctionComponent<Props> = ({ onCancel }) => {
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.cancelButtonLabel),
-            action: cancelAction,
+            actions: [cancelAction],
           }}
         />
       </Modal.Buttons>
diff --git a/libs/generic-view/ui/src/lib/predefined/data-migration/components/success-modal.tsx b/libs/generic-view/ui/src/lib/predefined/data-migration/components/success-modal.tsx
index c4951dc87d..7eb08eb67d 100644
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/components/success-modal.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/components/success-modal.tsx
@@ -5,10 +5,11 @@
 
 import React, { FunctionComponent } from "react"
 import { Modal } from "../../../interactive/modal/modal"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { ButtonSecondary } from "../../../buttons/button-secondary"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
+import { ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   title: {
@@ -43,7 +44,7 @@ export const SuccessModal: FunctionComponent<Props> = ({ onButtonClick }) => {
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.buttonLabel),
-            action: buttonAction,
+            actions: [buttonAction],
           }}
         />
       </Modal.Buttons>
diff --git a/libs/generic-view/ui/src/lib/predefined/data-migration/components/transfer-cancelled-modal.tsx b/libs/generic-view/ui/src/lib/predefined/data-migration/components/transfer-cancelled-modal.tsx
index e25331bbb0..4a5c3f6c1e 100644
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/components/transfer-cancelled-modal.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/components/transfer-cancelled-modal.tsx
@@ -5,11 +5,12 @@
 
 import React, { FunctionComponent } from "react"
 import { Modal } from "../../../interactive/modal/modal"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { ButtonSecondary } from "../../../buttons/button-secondary"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { TransferFailMessage } from "./transfer-fail-message"
+import { ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   title: {
@@ -45,7 +46,7 @@ export const CancelledModal: FunctionComponent<Props> = ({ onClose }) => {
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.closeButtonLabel),
-            action: closeAction,
+            actions: [closeAction],
           }}
         />
       </Modal.Buttons>
diff --git a/libs/generic-view/ui/src/lib/predefined/data-migration/transfer-setup.tsx b/libs/generic-view/ui/src/lib/predefined/data-migration/transfer-setup.tsx
index 3844991c7b..218011ea31 100644
--- a/libs/generic-view/ui/src/lib/predefined/data-migration/transfer-setup.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/data-migration/transfer-setup.tsx
@@ -64,10 +64,12 @@ export const TransferSetup: FunctionComponent<Props> = ({
         <ButtonPrimary
           config={{
             text: intl.formatMessage(messages.transferButton),
-            action: {
-              type: "custom",
-              callback: onStartMigration,
-            },
+            actions: [
+              {
+                type: "custom",
+                callback: onStartMigration,
+              },
+            ],
             disabled: pureDbIndexing || selectedFeatures.length === 0,
           }}
         />
diff --git a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-error.tsx b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-error.tsx
index b2ed2488fe..c6e3ee27df 100644
--- a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-error.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-error.tsx
@@ -4,11 +4,12 @@
  */
 
 import React, { FunctionComponent } from "react"
-import { ButtonAction, CustomModalError, IconType } from "generic-view/utils"
+import { CustomModalError, IconType } from "generic-view/utils"
 import { Modal } from "../../interactive/modal"
 import { ButtonSecondary } from "../../buttons/button-secondary"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
+import { ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   title: {
@@ -49,7 +50,7 @@ export const ImportContactsError: FunctionComponent<Props> = ({
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.closeButtonLabel),
-            action: closeAction,
+            actions: [closeAction],
           }}
         />
       </Modal.Buttons>
diff --git a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-list.tsx b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-list.tsx
index 4e503dc108..93bb2b0f46 100644
--- a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-list.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-list.tsx
@@ -11,7 +11,7 @@ import React, {
 } from "react"
 import { defineMessages } from "react-intl"
 import { Modal } from "../../interactive/modal"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import styled from "styled-components"
 import { ButtonPrimary } from "../../buttons/button-primary"
@@ -22,6 +22,8 @@ import { getDisplayName, importContactsSelector } from "generic-view/store"
 import { useSelector } from "react-redux"
 import { Divider } from "../../helpers/divider"
 import { Form } from "../../interactive/form/form"
+import { ButtonAction } from "generic-view/models"
+import { Paragraph5 } from "../../texts/paragraphs"
 
 export const SELECTED_CONTACTS_FIELD = "selected-contacts"
 export const ALL_CONTACTS_FIELD = "all-contacts"
@@ -130,7 +132,7 @@ export const ImportContactsList: FunctionComponent<Props> = ({
             text: intl.formatMessage(messages.importButtonText, {
               count: selectedContacts?.length || 0,
             }),
-            action: nextAction,
+            actions: [nextAction],
             disabled: !selectedContacts || selectedContacts.length === 0,
           }}
         />
@@ -158,18 +160,21 @@ const ContactItem: React.FC<UnifiedContact> = ({
           <StyledPhoneInfoWrapper>
             {phoneNumbers.length > 0 && <p>{phoneNumbers[0].value}</p>}
             {phoneNumbers.length > 1 && (
-              <Tooltip>
+              <Tooltip
+                offset={{
+                  x: 0,
+                  y: 11,
+                }}
+              >
                 <Tooltip.Anchor>
                   <MoreNumbersButton>
                     {`+${phoneNumbers.length - 1}`}
                   </MoreNumbersButton>
                 </Tooltip.Anchor>
-                <Tooltip.Content>
-                  <MoreNumbersList>
-                    {phoneNumbers.slice(1).map((number) => (
-                      <p key={number.value}>{number.value}</p>
-                    ))}
-                  </MoreNumbersList>
+                <Tooltip.Content $defaultStyles $placement={"bottom-right"}>
+                  {phoneNumbers.slice(1).map((number) => (
+                    <Paragraph5 key={number.value}>{number.value}</Paragraph5>
+                  ))}
                 </Tooltip.Content>
               </Tooltip>
             )}
@@ -182,7 +187,12 @@ const ContactItem: React.FC<UnifiedContact> = ({
 
 const ContactItemWrapper = styled.div`
   width: 100%;
-  padding: 0 1.4rem;
+  padding: 0.4rem 1.4rem;
+
+  > *,
+  label {
+    width: 100%;
+  }
 `
 
 const ContactLabelWrapper = styled.div`
@@ -252,22 +262,6 @@ const MoreNumbersButton = styled.p`
   }
 `
 
-const MoreNumbersList = styled.div`
-  margin-top: 1rem;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  padding: ${({ theme }) => theme.space.sm};
-  background-color: ${({ theme }) => theme.color.grey4};
-  border-radius: ${({ theme }) => theme.radius.sm};
-  box-shadow: 0 1rem 5rem 0 rgba(0, 0, 0, 0.08);
-
-  && > p {
-    color: ${({ theme }) => theme.color.grey1};
-    text-align: left;
-  }
-`
-
 const CustomDivider = styled(Divider)`
   border-color: ${({ theme }) => theme.color.grey3};
   margin: 1.4rem calc(var(--modal-padding) * -1) 0;
diff --git a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-progress.tsx b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-progress.tsx
index 9e27849b2a..c2e7cae45b 100644
--- a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-progress.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-progress.tsx
@@ -6,7 +6,7 @@
 import React, { useState } from "react"
 import { FunctionComponent } from "Core/core/types/function-component.interface"
 import styled from "styled-components"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { ProgressBar } from "../../interactive/progress-bar/progress-bar"
 import { Modal } from "../../interactive/modal"
 import { defineMessages } from "react-intl"
@@ -15,6 +15,7 @@ import { useSelector } from "react-redux"
 import { importContactsProgress } from "generic-view/store"
 import { ButtonSecondary } from "../../buttons/button-secondary"
 import { ButtonPrimary } from "../../buttons/button-primary"
+import { ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   title: {
@@ -67,16 +68,18 @@ export const ImportContactsProgress: FunctionComponent<Props> = ({
         <Modal.Buttons>
           <ButtonSecondary
             config={{
-              action: {
-                type: "custom",
-                callback: () => setCancelRequested(false),
-              },
+              actions: [
+                {
+                  type: "custom",
+                  callback: () => setCancelRequested(false),
+                },
+              ],
               text: intl.formatMessage(messages.cancelBackButtonLabel),
             }}
           />
           <ButtonPrimary
             config={{
-              action: cancelAction,
+              actions: [cancelAction],
               text: intl.formatMessage(messages.cancelAbortButtonLabel),
             }}
           />
@@ -102,10 +105,12 @@ export const ImportContactsProgress: FunctionComponent<Props> = ({
       <Modal.Buttons config={{ vertical: true }}>
         <ButtonSecondary
           config={{
-            action: {
-              type: "custom",
-              callback: requestCancel,
-            },
+            actions: [
+              {
+                type: "custom",
+                callback: requestCancel,
+              },
+            ],
             text: intl.formatMessage(messages.cancelButtonLabel),
           }}
         />
diff --git a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-provider.tsx b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-provider.tsx
index da585c16ab..09a918ac24 100644
--- a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-provider.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-provider.tsx
@@ -54,12 +54,14 @@ export const ImportContactsProvider = () => {
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.googleButtonLabel),
-            action: {
-              type: "custom",
-              callback: () => {
-                dispatch(startImportAuthorization("GOOGLE"))
+            actions: [
+              {
+                type: "custom",
+                callback: () => {
+                  dispatch(startImportAuthorization("GOOGLE"))
+                },
               },
-            },
+            ],
           }}
         >
           <GoogleLogoWrapperStyled>
@@ -91,12 +93,14 @@ export const ImportContactsProvider = () => {
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.outlookButtonLabel),
-            action: {
-              type: "custom",
-              callback: () => {
-                dispatch(startImportAuthorization("OUTLOOK"))
+            actions: [
+              {
+                type: "custom",
+                callback: () => {
+                  dispatch(startImportAuthorization("OUTLOOK"))
+                },
               },
-            },
+            ],
           }}
         >
           <OutlookLogoWrapperStyled>
@@ -134,24 +138,28 @@ export const ImportContactsProvider = () => {
           config={{
             text: intl.formatMessage(messages.fileUploadButtonLabel),
             icon: IconType.Import,
-            action: {
-              type: "custom",
-              callback: () => {
-                dispatch(importContactsFromFile())
-                dispatch(setImportProcessStatus({ status: "FILE-SELECT" }))
+            actions: [
+              {
+                type: "custom",
+                callback: () => {
+                  dispatch(importContactsFromFile())
+                  dispatch(setImportProcessStatus({ status: "FILE-SELECT" }))
+                },
               },
-            },
+            ],
           }}
         />
         <HelpLink
           config={{
             text: intl.formatMessage(messages.needHelpButtonLabel),
-            action: {
-              type: "custom",
-              callback: () => {
-                openHelpShortcut("kompakt-contacts-import")
+            actions: [
+              {
+                type: "custom",
+                callback: () => {
+                  openHelpShortcut("kompakt-contacts-import")
+                },
               },
-            },
+            ],
             modifiers: ["link", "hover-underline"],
           }}
         />
diff --git a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-success.tsx b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-success.tsx
index b7349bc3b2..1c809c57e8 100644
--- a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-success.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts-success.tsx
@@ -4,13 +4,14 @@
  */
 
 import React, { FunctionComponent } from "react"
-import { ButtonAction, IconType } from "generic-view/utils"
+import { IconType } from "generic-view/utils"
 import { Modal } from "../../interactive/modal"
 import { defineMessages } from "react-intl"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { ButtonSecondary } from "../../buttons/button-secondary"
 import { useFormContext } from "react-hook-form"
 import { SELECTED_CONTACTS_FIELD } from "./import-contacts-list"
+import { ButtonAction } from "generic-view/models"
 
 const messages = defineMessages({
   title: {
@@ -45,7 +46,7 @@ export const ImportContactsSuccess: FunctionComponent<Props> = ({
         <ButtonSecondary
           config={{
             text: intl.formatMessage(messages.closeButtonLabel),
-            action: closeAction,
+            actions: [closeAction],
           }}
         />
       </Modal.Buttons>
diff --git a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts.tsx b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts.tsx
index 9bb909e1fd..d3fe8729b4 100644
--- a/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/import-contacts/import-contacts.tsx
@@ -3,7 +3,7 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
-import { APIFC, ButtonAction, CustomModalError } from "generic-view/utils"
+import { APIFC, CustomModalError } from "generic-view/utils"
 import React, { FunctionComponent, useEffect, useRef, useState } from "react"
 import { Form } from "../../interactive/form/form"
 import { Modal } from "../../interactive/modal"
@@ -30,7 +30,7 @@ import { ImportContactsError } from "./import-contacts-error"
 import { intl } from "Core/__deprecated__/renderer/utils/intl"
 import { defineMessages } from "react-intl"
 import { useFormContext } from "react-hook-form"
-import { ImportContactsConfig } from "generic-view/models"
+import { ButtonAction, ImportContactsConfig } from "generic-view/models"
 import { ApiFileTransferError } from "device/models"
 
 const messages = defineMessages({
@@ -135,7 +135,7 @@ const ImportContactsForm: FunctionComponent<ImportContactsConfig> = ({
   return (
     <>
       {closeButtonVisible && (
-        <Modal.CloseButton config={{ action: importCloseButtonAction }} />
+        <Modal.CloseButton config={{ actions: [importCloseButtonAction] }} />
       )}
       {(currentStatus === undefined || currentStatus === "INIT") && (
         <ImportContactsProvider />
diff --git a/libs/generic-view/ui/src/lib/predefined/predefined.ts b/libs/generic-view/ui/src/lib/predefined/predefined.ts
index c033c21aea..ecd2b3bdbb 100644
--- a/libs/generic-view/ui/src/lib/predefined/predefined.ts
+++ b/libs/generic-view/ui/src/lib/predefined/predefined.ts
@@ -12,6 +12,7 @@ import { BackupRestore } from "./backup-restore/backup-restore"
 import { ImportContacts } from "./import-contacts/import-contacts"
 import { DataMigration } from "./data-migration/data-migration"
 import { IncomingFeatureInfo } from "./incoming-feature-info"
+import { SelectionManager } from "./selection-manager"
 import {
   aboutDataBox,
   backupCreate,
@@ -22,6 +23,7 @@ import {
   lastBackupDate,
   mcDataMigration,
   overviewOsVersion,
+  selectionManager,
 } from "generic-view/models"
 
 export const predefinedComponents = {
@@ -34,4 +36,5 @@ export const predefinedComponents = {
   [importContacts.key]: ImportContacts,
   [mcDataMigration.key]: DataMigration,
   [incomingFeatureInfo.key]: IncomingFeatureInfo,
+  [selectionManager.key]: SelectionManager,
 }
diff --git a/libs/generic-view/ui/src/lib/predefined/recovery-mode/recovery-mode.tsx b/libs/generic-view/ui/src/lib/predefined/recovery-mode/recovery-mode.tsx
index 14949f6221..68f3fe229d 100644
--- a/libs/generic-view/ui/src/lib/predefined/recovery-mode/recovery-mode.tsx
+++ b/libs/generic-view/ui/src/lib/predefined/recovery-mode/recovery-mode.tsx
@@ -97,10 +97,12 @@ const RecoveryModeUI: FunctionComponent = () => {
             <ButtonPrimary
               config={{
                 text: intl.formatMessage(messages.button),
-                action: {
-                  type: "custom",
-                  callback: onStartRecovery,
-                },
+                actions: [
+                  {
+                    type: "custom",
+                    callback: onStartRecovery,
+                  },
+                ],
                 disabled: !isConfirmed,
               }}
             />
diff --git a/libs/generic-view/ui/src/lib/predefined/selection-manager.tsx b/libs/generic-view/ui/src/lib/predefined/selection-manager.tsx
new file mode 100644
index 0000000000..d2b2cafce5
--- /dev/null
+++ b/libs/generic-view/ui/src/lib/predefined/selection-manager.tsx
@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React from "react"
+import { APIFC } from "generic-view/utils"
+import styled from "styled-components"
+import { SelectionManagerConfig } from "generic-view/models"
+
+export const SelectionManager: APIFC<undefined, SelectionManagerConfig> = ({
+  data,
+  config,
+  ...props
+}) => {
+  return <SelectionManagerWrapper {...props} />
+}
+
+const SelectionManagerWrapper = styled.div`
+  background: ${({ theme }) => theme.color.grey5};
+  border: solid 0.1rem ${({ theme }) => theme.color.grey4};
+  border-radius: ${({ theme }) => theme.radius.sm};
+`
diff --git a/libs/generic-view/ui/src/lib/shared/spinner-loader.tsx b/libs/generic-view/ui/src/lib/shared/spinner-loader.tsx
index f7c60c682e..4880b90016 100644
--- a/libs/generic-view/ui/src/lib/shared/spinner-loader.tsx
+++ b/libs/generic-view/ui/src/lib/shared/spinner-loader.tsx
@@ -4,7 +4,7 @@
  */
 
 import React, { FunctionComponent } from "react"
-import styled, { keyframes } from "styled-components"
+import styled, { css, keyframes } from "styled-components"
 import { Icon } from "../icon/icon"
 import { IconType } from "generic-view/utils"
 
@@ -15,12 +15,14 @@ interface Props {
 export const SpinnerLoader: FunctionComponent<Props> = ({ dark, ...props }) => {
   return (
     <Wrapper {...props}>
-      <SpinnerIcon data={{ type: dark ? IconType.SpinnerDark : IconType.Spinner }} />
+      <SpinnerIcon
+        data={{ type: dark ? IconType.SpinnerDark : IconType.Spinner }}
+      />
     </Wrapper>
   )
 }
 
-const spinAnimation = keyframes({
+const spin = keyframes({
   "0%": {
     transform: "rotate(0deg)",
   },
@@ -29,11 +31,15 @@ const spinAnimation = keyframes({
   },
 })
 
+export const spinAnimation = css`
+  animation: ${spin} 1s steps(12) infinite;
+`
+
 const Wrapper = styled.div`
   display: block;
   width: 3.2rem;
   height: 3.2rem;
-  animation: ${spinAnimation} 1s steps(12) infinite;
+  ${spinAnimation};
 `
 
 const SpinnerIcon = styled(Icon)`
diff --git a/libs/generic-view/ui/src/lib/table/table-cell.tsx b/libs/generic-view/ui/src/lib/table/table-cell.tsx
index d21d31f05f..86af1b6ee0 100644
--- a/libs/generic-view/ui/src/lib/table/table-cell.tsx
+++ b/libs/generic-view/ui/src/lib/table/table-cell.tsx
@@ -35,9 +35,18 @@ export const TableCell: APIFC<undefined, TableCellConfig> = ({
 }
 
 export const Cell = styled.td<{
-  $width: number
+  $width?: number | string
 }>`
-  min-width: ${({ $width }) => $width}px;
-  max-width: ${({ $width }) => $width}px;
+  --cell-width: ${({ $width }) => {
+    return $width !== undefined
+      ? isNaN(Number($width))
+        ? $width
+        : `${$width}px`
+      : "auto"
+  }};
+
+  width: var(--cell-width);
+  max-width: var(--cell-width);
+  min-width: var(--cell-width);
   overflow: hidden;
 `
diff --git a/libs/generic-view/ui/src/lib/table/table.tsx b/libs/generic-view/ui/src/lib/table/table.tsx
index 1ec7dd1cdb..d86a17e8d6 100644
--- a/libs/generic-view/ui/src/lib/table/table.tsx
+++ b/libs/generic-view/ui/src/lib/table/table.tsx
@@ -13,23 +13,28 @@ import React, {
   useState,
 } from "react"
 import styled, { css } from "styled-components"
-import { APIFC } from "generic-view/utils"
+import { APIFC, useViewFormContext } from "generic-view/utils"
 import { TableConfig, TableData } from "generic-view/models"
 import { TableCell } from "./table-cell"
-import { useFormContext } from "react-hook-form"
 import { P1 } from "../texts/paragraphs"
+import { difference, intersection } from "lodash"
+import { useFormField } from "generic-view/store"
 
 const rowHeight = 64
 
 export const Table: APIFC<TableData, TableConfig> & {
   Cell: typeof TableCell
 } = ({ data = [], config, children, ...props }) => {
-  const formContext = useFormContext()
+  const getFormContext = useViewFormContext()
+  const formContext = getFormContext()
   const scrollWrapperRef = useRef<HTMLDivElement>(null)
   const [visibleRowsBounds, setVisibleRowsBounds] = useState<[number, number]>([
     -1, -1,
   ])
 
+  const { setValue: setAllIds } = useFormField({
+    formName: config.form.formName,
+  })
   const { formOptions, columnsNames } = config
   const { activeIdFieldName } = formOptions
 
@@ -48,6 +53,10 @@ export const Table: APIFC<TableData, TableConfig> & {
   const handleScroll = useCallback(() => {
     if (!scrollWrapperRef.current) return
     const { scrollTop, clientHeight } = scrollWrapperRef.current
+    if (clientHeight === 0) {
+      setTimeout(handleScroll, 10)
+      return
+    }
     const rowsPerPage = Math.ceil(clientHeight / rowHeight) || 0
     const currentRowIndex = Math.floor(scrollTop / rowHeight)
     const firstVisibleRowIndex = currentRowIndex - rowsPerPage
@@ -56,10 +65,26 @@ export const Table: APIFC<TableData, TableConfig> & {
   }, [])
 
   useEffect(() => {
-    if (formOptions.totalItemsFieldName) {
-      formContext.setValue(formOptions.totalItemsFieldName, data?.length)
+    if (formOptions.allIdsFieldName) {
+      formContext.setValue(formOptions.allIdsFieldName, data)
+      setAllIds(formOptions.allIdsFieldName, data)
+    }
+  }, [data, formContext, formOptions.allIdsFieldName, setAllIds])
+
+  useEffect(() => {
+    if (formOptions.selectedIdsFieldName) {
+      const selectedIds = formContext.getValues(
+        formOptions.selectedIdsFieldName
+      )
+      const unavailableIds = difference(selectedIds, data)
+      if (unavailableIds.length > 0) {
+        formContext.setValue(
+          formOptions.selectedIdsFieldName,
+          intersection(data, unavailableIds)
+        )
+      }
     }
-  }, [formOptions.totalItemsFieldName, data?.length, formContext])
+  }, [data, formContext, formOptions.selectedIdsFieldName])
 
   useEffect(() => {
     const scrollWrapper = scrollWrapperRef.current
@@ -149,7 +174,7 @@ const TableWrapper = styled.table`
   position: absolute;
   top: 0;
   left: 0;
-  width: min-content;
+  width: 100%;
   max-height: 100%;
   border-collapse: collapse;
   border-spacing: 0;
@@ -179,21 +204,17 @@ const TableBody = styled.tbody`
 
 // TODO: Add proper styles for the table row
 const Row = styled.tr<{ $active?: boolean }>`
+  height: ${rowHeight / 10}rem;
+  border-bottom: solid 0.1rem ${({ theme }) => theme.color.grey5};
+  border-left: 0.2rem solid transparent;
   ${({ $active }) =>
     $active &&
     css`
       border-left: 0.2rem solid #000;
     `}
-  height: ${rowHeight / 10}rem;
 `
 
 const RowPlaceholder = styled.tr`
   height: ${rowHeight / 10}rem;
-
-  div {
-    display: block;
-    height: 2.4rem;
-    border-radius: ${({ theme }) => theme.radius.md};
-    background: ${({ theme }) => theme.color.grey6};
-  }
+  border-bottom: solid 0.1rem ${({ theme }) => theme.color.grey5};
 `
diff --git a/libs/generic-view/ui/src/lib/texts/index.ts b/libs/generic-view/ui/src/lib/texts/index.ts
index 20f618dfb3..77e66fc497 100644
--- a/libs/generic-view/ui/src/lib/texts/index.ts
+++ b/libs/generic-view/ui/src/lib/texts/index.ts
@@ -4,7 +4,13 @@
  */
 
 import { Header3, Header4, Header5 } from "./headers"
-import { Paragraph1, Paragraph2, Paragraph3 } from "./paragraphs"
+import {
+  Paragraph1,
+  Paragraph2,
+  Paragraph3,
+  Paragraph4,
+  Paragraph5,
+} from "./paragraphs"
 import {
   h3Component,
   h4Component,
@@ -12,6 +18,8 @@ import {
   p1Component,
   p2Component,
   p3Component,
+  p4Component,
+  p5Component,
 } from "generic-view/models"
 
 export const texts = {
@@ -21,4 +29,6 @@ export const texts = {
   [p1Component.key]: Paragraph1,
   [p2Component.key]: Paragraph2,
   [p3Component.key]: Paragraph3,
+  [p4Component.key]: Paragraph4,
+  [p5Component.key]: Paragraph5,
 }
diff --git a/libs/generic-view/ui/src/lib/texts/paragraphs.tsx b/libs/generic-view/ui/src/lib/texts/paragraphs.tsx
index fd72d414c9..7f831c2e55 100644
--- a/libs/generic-view/ui/src/lib/texts/paragraphs.tsx
+++ b/libs/generic-view/ui/src/lib/texts/paragraphs.tsx
@@ -8,11 +8,15 @@ import { APIFC } from "generic-view/utils"
 import styled, { css } from "styled-components"
 import { ParagraphConfig } from "generic-view/models"
 import { isEmpty } from "lodash"
+import { Content } from "../data-rows/text-formatted"
 
-const commonStyles = css`
+type Color = NonNullable<ParagraphConfig>["color"]
+
+const commonStyles = css<{ $color?: Color }>`
   white-space: pre-wrap;
   margin: 0;
-  color: ${({ theme }) => theme.color.grey2};
+  color: ${({ theme, $color = "grey2" }) => theme.color[$color]};
+  font-weight: ${({ theme }) => theme.fontWeight.regular};
 `
 
 export const Paragraph1: APIFC<undefined, ParagraphConfig> = ({
@@ -20,14 +24,21 @@ export const Paragraph1: APIFC<undefined, ParagraphConfig> = ({
   children,
   ...props
 }) => {
-  return <P1 {...props}>{isEmpty(children) ? config.text : children}</P1>
+  return (
+    <P1 {...props} $color={config?.color}>
+      {isEmpty(children) ? config?.text : children}
+    </P1>
+  )
 }
 
-export const P1 = styled.p`
-  font-size: ${({ theme }) => theme.fontSize.paragraph1};
-  line-height: ${({ theme }) => theme.lineHeight.paragraph1};
-  letter-spacing: 0.02em;
-  ${commonStyles};
+export const P1 = styled.p<{ $color?: Color }>`
+  &,
+  ${Content} p {
+    font-size: ${({ theme }) => theme.fontSize.paragraph1};
+    line-height: ${({ theme }) => theme.lineHeight.paragraph1};
+    letter-spacing: 0.02em;
+    ${commonStyles};
+  }
 `
 
 export const Paragraph2: APIFC<undefined, ParagraphConfig> = ({
@@ -35,14 +46,18 @@ export const Paragraph2: APIFC<undefined, ParagraphConfig> = ({
   children,
   ...props
 }) => {
-  return <P2 {...props}>{isEmpty(children) ? config.text : children}</P2>
+  return (
+    <P2 {...props} $color={config?.color}>
+      {isEmpty(children) ? config?.text : children}
+    </P2>
+  )
 }
 
-export const P2 = styled.p`
+export const P2 = styled.p<{ $color?: Color }>`
   font-size: ${({ theme }) => theme.fontSize.paragraph2};
   line-height: ${({ theme }) => theme.lineHeight.paragraph2};
   letter-spacing: 0.02em;
-  font-weight: 300;
+  font-weight: ${({ theme }) => theme.fontWeight.light};
   ${commonStyles};
 `
 
@@ -51,12 +66,55 @@ export const Paragraph3: APIFC<undefined, ParagraphConfig> = ({
   children,
   ...props
 }) => {
-  return <P3 {...props}>{isEmpty(children) ? config.text : children}</P3>
+  return (
+    <P3 {...props} $color={config?.color}>
+      {isEmpty(children) ? config?.text : children}
+    </P3>
+  )
 }
 
-export const P3 = styled.p`
+export const P3 = styled.p<{ $color?: Color }>`
   font-size: ${({ theme }) => theme.fontSize.paragraph3};
   line-height: ${({ theme }) => theme.lineHeight.paragraph3};
   letter-spacing: 0.02em;
   ${commonStyles};
 `
+
+export const Paragraph4: APIFC<undefined, ParagraphConfig> = ({
+  config,
+  children,
+  ...props
+}) => {
+  return (
+    <P4 {...props} $color={config?.color}>
+      {isEmpty(children) ? config?.text : children}
+    </P4>
+  )
+}
+
+export const P4 = styled.p<{ $color?: Color }>`
+  font-size: ${({ theme }) => theme.fontSize.paragraph4};
+  line-height: ${({ theme }) => theme.lineHeight.paragraph4};
+  font-weight: ${({ theme }) => theme.fontWeight.light};
+  letter-spacing: 0.02em;
+  ${commonStyles};
+`
+
+export const Paragraph5: APIFC<undefined, ParagraphConfig> = ({
+  config,
+  children,
+  ...props
+}) => {
+  return (
+    <P5 {...props} $color={config?.color}>
+      {isEmpty(children) ? config?.text : children}
+    </P5>
+  )
+}
+
+export const P5 = styled.p<{ $color?: Color }>`
+  ${commonStyles};
+  font-size: ${({ theme }) => theme.fontSize.paragraph5};
+  line-height: ${({ theme }) => theme.lineHeight.paragraph5};
+  letter-spacing: 0.04em;
+`
diff --git a/libs/generic-view/utils/src/index.ts b/libs/generic-view/utils/src/index.ts
index c9d9f25a0f..70050a1567 100644
--- a/libs/generic-view/utils/src/index.ts
+++ b/libs/generic-view/utils/src/index.ts
@@ -7,8 +7,10 @@ export * from "./lib/generate-menu/generate-menu"
 export * from "./lib/models/api-fc.types"
 export * from "./lib/models/api-views.types"
 export * from "./lib/models/icons.types"
-export * from "./lib/models/button.types"
 export * from "./lib/view-generators/generate-view-config"
 export * from "./lib/map-layout-sizes/map-layout-sizes"
 export * from "./lib/models/modal.types"
 export * from "./lib/data-provider-helpers"
+export * from "./lib/forms-provider/forms-provider"
+export * from "./lib/data-provider-helpers/string-to-regex"
+export * from "./lib/use-current-view-key"
diff --git a/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-filter.test.ts b/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-filter.test.ts
index bfc8e351c1..8bed873e86 100644
--- a/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-filter.test.ts
+++ b/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-filter.test.ts
@@ -4,6 +4,7 @@
  */
 
 import { dataProviderFilter } from "./data-provider-filter"
+import { DataProviderFiltersConfig } from "device/models"
 
 describe("dataProviderFilter", () => {
   it("returns all data when no filters are provided", () => {
@@ -14,21 +15,27 @@ describe("dataProviderFilter", () => {
 
   it("filters data based on single field with single pattern", () => {
     const data = [{ name: "Alice" }, { name: "Bob" }]
-    const filters = { name: ["/Alice/"] }
+    const filters: DataProviderFiltersConfig = [
+      { providerField: "name", patterns: ["/Alice/"] },
+    ]
     const result = dataProviderFilter(data, filters)
     expect(result).toEqual([{ name: "Alice" }])
   })
 
   it("filters data based on nested field with single pattern", () => {
     const data = [{ user: { name: "Alice" } }, { user: { name: "Bob" } }]
-    const filters = { "user.name": ["/Alice/"] }
+    const filters: DataProviderFiltersConfig = [
+      { providerField: "user.name", patterns: ["/Alice/"] },
+    ]
     const result = dataProviderFilter(data, filters)
     expect(result).toEqual([{ user: { name: "Alice" } }])
   })
 
   it("filters data based on single field with multiple patterns", () => {
     const data = [{ name: "Alice" }, { name: "Anastasia" }, { name: "Charlie" }]
-    const filters = { name: ["/^A/m", "/.+e$/m"] }
+    const filters: DataProviderFiltersConfig = [
+      { providerField: "name", patterns: ["/^A/m", "/.+e$/m"] },
+    ]
     const result = dataProviderFilter(data, filters)
     expect(result).toEqual([{ name: "Alice" }])
   })
@@ -39,7 +46,10 @@ describe("dataProviderFilter", () => {
       { name: "Anastasia", age: "29" },
       { name: "Agnes", age: "30" },
     ]
-    const filters = { name: ["/^A/m"], age: ["/2[\\d]/"] }
+    const filters: DataProviderFiltersConfig = [
+      { providerField: "name", patterns: ["/^A/m"] },
+      { providerField: "age", patterns: ["/2[\\d]/"] },
+    ]
     const result = dataProviderFilter(data, filters)
     expect(result).toEqual([
       { name: "Alice", age: "25" },
@@ -49,20 +59,26 @@ describe("dataProviderFilter", () => {
 
   it("returns empty array when no data matches the filters", () => {
     const data = [{ name: "Alice" }, { name: "Bob" }]
-    const filters = { name: ["/Charlie/"] }
+    const filters: DataProviderFiltersConfig = [
+      { providerField: "name", patterns: ["/Charlie/"] },
+    ]
     const result = dataProviderFilter(data, filters)
     expect(result).toEqual([])
   })
 
   it("handles empty data array", () => {
     const data: Record<string, unknown>[] = []
-    const filters = { name: ["/Alice/"] }
+    const filters: DataProviderFiltersConfig = [
+      { providerField: "name", patterns: ["/Alice/"] },
+    ]
     const result = dataProviderFilter(data, filters)
     expect(result).toEqual([])
   })
 
   it("handles undefined data", () => {
-    const filters = { name: ["/Alice/"] }
+    const filters: DataProviderFiltersConfig = [
+      { providerField: "name", patterns: ["/Alice/"] },
+    ]
     const result = dataProviderFilter(undefined, filters)
     expect(result).toEqual([])
   })
@@ -75,7 +91,7 @@ describe("dataProviderFilter", () => {
 
   it("handles empty filters", () => {
     const data = [{ name: "Alice" }, { name: "Bob" }]
-    const filters = {}
+    const filters = [] as DataProviderFiltersConfig
     const result = dataProviderFilter(data, filters)
     expect(result).toEqual(data)
   })
diff --git a/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-filter.ts b/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-filter.ts
index 33022cb6c8..6d47a7e8cc 100644
--- a/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-filter.ts
+++ b/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-filter.ts
@@ -3,19 +3,19 @@
  * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
  */
 
-import { DataProviderFilterConfig } from "device/models"
+import { DataProviderFiltersConfig } from "device/models"
 import { stringToRegex } from "./string-to-regex"
-import { get } from "lodash"
+import { cloneDeep, get } from "lodash"
 
 export const dataProviderFilter = (
   data: Record<string, unknown>[] = [],
-  filters?: DataProviderFilterConfig
+  filters?: DataProviderFiltersConfig
 ) => {
   if (!filters || !data) return data
 
   return data.filter((item) => {
-    return Object.entries(filters).every(([key, patterns]) => {
-      const field = get(item, key) as string
+    return cloneDeep(filters).every(({ providerField, patterns }) => {
+      const field = get(item, providerField) as string
       return patterns.every((pattern) => {
         const regex = stringToRegex(pattern)
         return regex.test(field || "")
diff --git a/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-sort.test.ts b/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-sort.test.ts
index 26663baf19..c3d8e5e2d2 100644
--- a/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-sort.test.ts
+++ b/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-sort.test.ts
@@ -15,9 +15,9 @@ describe("dataProviderSort", () => {
 
   it("sorts data based on single field in ascending order", () => {
     const data = [{ name: "Charlie" }, { name: "Alice" }, { name: "Bob" }]
-    const sort = {
-      name: { direction: "asc", priority: 1 },
-    } as DataProviderSortConfig
+    const sort = [
+      { providerField: "name", direction: "asc", priority: 1 },
+    ] as DataProviderSortConfig
     const result = dataProviderSort(data, sort)
     expect(result).toEqual([
       { name: "Alice" },
@@ -32,9 +32,9 @@ describe("dataProviderSort", () => {
       { user: { name: "Alice" } },
       { user: { name: "Bob" } },
     ]
-    const sort = {
-      "user.name": { direction: "asc", priority: 1 },
-    } as DataProviderSortConfig
+    const sort: DataProviderSortConfig = [
+      { providerField: "user.name", direction: "asc", priority: 1 },
+    ]
     const result = dataProviderSort(data, sort)
     expect(result).toEqual([
       { user: { name: "Alice" } },
@@ -45,9 +45,9 @@ describe("dataProviderSort", () => {
 
   it("sorts data based on single field in descending order", () => {
     const data = [{ name: "Charlie" }, { name: "Alice" }, { name: "Bob" }]
-    const sort = {
-      name: { direction: "desc", priority: 1 },
-    } as DataProviderSortConfig
+    const sort: DataProviderSortConfig = [
+      { providerField: "name", direction: "desc", priority: 1 },
+    ]
     const result = dataProviderSort(data, sort)
     expect(result).toEqual([
       { name: "Charlie" },
@@ -62,10 +62,10 @@ describe("dataProviderSort", () => {
       { name: "Alice", age: "25" },
       { name: "Bob", age: "20" },
     ]
-    const sort = {
-      name: { direction: "asc", priority: 1 },
-      age: { direction: "asc", priority: 2 },
-    } as DataProviderSortConfig
+    const sort: DataProviderSortConfig = [
+      { providerField: "name", direction: "asc", priority: 1 },
+      { providerField: "age", direction: "asc", priority: 2 },
+    ]
     const result = dataProviderSort(data, sort)
     expect(result).toEqual([
       { name: "Alice", age: "25" },
@@ -80,10 +80,10 @@ describe("dataProviderSort", () => {
       { name: "Alice" },
       { name: "Alice", surname: "Smith" },
     ]
-    const sort = {
-      name: { direction: "asc", priority: 2 },
-      surname: { direction: "asc", priority: 1 },
-    } as DataProviderSortConfig
+    const sort: DataProviderSortConfig = [
+      { providerField: "name", direction: "asc", priority: 2 },
+      { providerField: "surname", direction: "asc", priority: 1 },
+    ]
     const result = dataProviderSort(data, sort)
     expect(result).toEqual([
       {
@@ -107,9 +107,14 @@ describe("dataProviderSort", () => {
       { name: "Alice" },
       { name: "Beatrice" },
     ]
-    const sort = {
-      name: { direction: "asc", priority: 1, orderingPatterns: ["/^B/m"] },
-    } as DataProviderSortConfig
+    const sort: DataProviderSortConfig = [
+      {
+        providerField: "name",
+        direction: "asc",
+        priority: 1,
+        orderingPatterns: ["/^B/m"],
+      },
+    ]
     const result = dataProviderSort(data, sort)
     expect(result).toEqual([
       { name: "Beatrice" },
@@ -121,17 +126,17 @@ describe("dataProviderSort", () => {
 
   it("returns empty array when data is empty", () => {
     const data: Record<string, unknown>[] = []
-    const sort = {
-      name: { direction: "asc", priority: 1 },
-    } as DataProviderSortConfig
+    const sort: DataProviderSortConfig = [
+      { providerField: "name", direction: "asc", priority: 1 },
+    ]
     const result = dataProviderSort(data, sort)
     expect(result).toEqual([])
   })
 
   it("handles undefined data", () => {
-    const sort = {
-      name: { direction: "asc", priority: 1 },
-    } as DataProviderSortConfig
+    const sort: DataProviderSortConfig = [
+      { providerField: "name", direction: "asc", priority: 1 },
+    ]
     const result = dataProviderSort(undefined, sort)
     expect(result).toEqual([])
   })
@@ -144,7 +149,7 @@ describe("dataProviderSort", () => {
 
   it("handles empty sort configuration", () => {
     const data = [{ name: "Alice" }, { name: "Bob" }]
-    const sort = {}
+    const sort = [] as DataProviderSortConfig
     const result = dataProviderSort(data, sort)
     expect(result).toEqual(data)
   })
diff --git a/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-sort.ts b/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-sort.ts
index 156e57e29c..e31c54feb2 100644
--- a/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-sort.ts
+++ b/libs/generic-view/utils/src/lib/data-provider-helpers/data-provider-sort.ts
@@ -5,30 +5,26 @@
 
 import { DataProviderSortConfig } from "device/models"
 import { stringToRegex } from "./string-to-regex"
-import { get } from "lodash"
+import { cloneDeep, get } from "lodash"
 
 export const dataProviderSort = (
   data: Record<string, unknown>[] = [],
   sort?: DataProviderSortConfig
 ) => {
   if (!sort || !data) return data
-  const fieldsSortedByPriority = Object.entries(sort)
-    .sort((a, b) => a[1].priority - b[1].priority)
-    .map(([key, { direction, orderingPatterns }]) => ({
-      key,
-      direction,
-      orderingPatterns,
-    }))
+  const fieldsSortedByPriority = cloneDeep(sort).sort(
+    (a, b) => a.priority - b.priority
+  )
 
   return data.sort((a, b) => {
     let score = 0
     for (const {
-      key,
+      providerField,
       direction,
       orderingPatterns = [],
     } of fieldsSortedByPriority) {
-      const fieldA = get(a, key) as string
-      const fieldB = get(b, key) as string
+      const fieldA = get(a, providerField) as string
+      const fieldB = get(b, providerField) as string
       if (!fieldA || !fieldB) {
         continue
       }
diff --git a/libs/generic-view/utils/src/lib/forms-provider/forms-provider.tsx b/libs/generic-view/utils/src/lib/forms-provider/forms-provider.tsx
new file mode 100644
index 0000000000..7d803fa1fe
--- /dev/null
+++ b/libs/generic-view/utils/src/lib/forms-provider/forms-provider.tsx
@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+} from "react"
+import { FunctionComponent } from "Core/core/types/function-component.interface"
+import { UseFormReturn } from "react-hook-form/dist/types"
+import { useFormContext } from "react-hook-form"
+
+interface FormsContextValue {
+  registerForm: (formKey: string, form: UseFormReturn) => void
+  getFormContext: (formKey?: string) => UseFormReturn | undefined
+}
+
+const FormsContext = createContext<FormsContextValue>({
+  registerForm: () => {},
+  getFormContext: () => undefined,
+})
+
+export const FormsProvider: FunctionComponent = ({ children }) => {
+  const formContext = useFormContext()
+  const forms = useMemo(() => {
+    return new Map<string, UseFormReturn>()
+  }, [])
+
+  const registerForm = useCallback(
+    (formKey: string, form: UseFormReturn) => {
+      forms.set(formKey, form)
+    },
+    [forms]
+  )
+
+  const getFormContext = useCallback(
+    (formKey?: string) => {
+      if (formKey) {
+        const form = forms.get(formKey)
+        if (!form) {
+          throw new Error(`Form with key ${formKey} not found`)
+        }
+        return form
+      }
+      return formContext
+    },
+    [formContext, forms]
+  )
+
+  useEffect(() => {
+    return () => {
+      forms.clear()
+    }
+  }, [forms])
+
+  return (
+    <FormsContext.Provider value={{ registerForm, getFormContext }}>
+      {children}
+    </FormsContext.Provider>
+  )
+}
+
+export const useViewFormRegister = (formKey: string, form: UseFormReturn) => {
+  const { registerForm } = useContext(FormsContext)
+  registerForm(formKey, form)
+}
+
+export const useViewFormContext = () => {
+  const defaultFormContext = useFormContext()
+  const formsContext = useContext(FormsContext)
+
+  return (formKey?: string) => {
+    const formContext = formsContext.getFormContext(formKey)
+    return formContext ?? defaultFormContext
+  }
+}
diff --git a/libs/generic-view/utils/src/lib/models/api-views.types.ts b/libs/generic-view/utils/src/lib/models/api-views.types.ts
index 61912ea586..f34822a742 100644
--- a/libs/generic-view/utils/src/lib/models/api-views.types.ts
+++ b/libs/generic-view/utils/src/lib/models/api-views.types.ts
@@ -5,7 +5,7 @@
 
 import { z } from "zod"
 import componentsValidators from "generic-view/models"
-import { DataProviderConfig, Layout } from "device/models"
+import { DataProviderConfig, ExtraConfig, Layout } from "device/models"
 
 type ComponentConfigProp<T> = T extends undefined
   ? { config?: T }
@@ -21,6 +21,7 @@ type ComponentProps<T> = T extends {
       layout?: Layout
       childrenKeys?: string[]
       dataProvider?: DataProviderConfig
+      extra?: ExtraConfig
     } & ComponentConfigProp<z.infer<T["configValidator"]>>
   : never
 
diff --git a/libs/generic-view/utils/src/lib/models/button.types.ts b/libs/generic-view/utils/src/lib/models/button.types.ts
deleted file mode 100644
index 5b1a15355f..0000000000
--- a/libs/generic-view/utils/src/lib/models/button.types.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright (c) Mudita sp. z o.o. All rights reserved.
- * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
- */
-
-export type ModalAction =
-  | {
-      type: "open-modal" | "replace-modal"
-      domain?: string
-      modalKey: string
-      permanent?: boolean
-    }
-  | {
-      type: "close-modal"
-      domain?: string
-      modalKey: string
-    }
-  | {
-      type: "close-domain-modals"
-      domain: string
-    }
-  | {
-      type: "close-all-modals"
-    }
-
-export interface NavigateAction {
-  type: "navigate"
-  viewKey: string
-}
-
-export type FormAction =
-  | {
-      type: "form-set-field"
-      key: string
-      value?: string | number | boolean
-    }
-  | {
-      type: "form-toggle-field"
-      key: string
-    }
-  | {
-      type: "form-reset"
-    }
-
-export interface CustomAction {
-  type: "custom"
-  callback: VoidFunction
-}
-
-export type ButtonAction =
-  | ModalAction
-  | NavigateAction
-  | FormAction
-  | CustomAction
diff --git a/libs/generic-view/utils/src/lib/models/icons.types.ts b/libs/generic-view/utils/src/lib/models/icons.types.ts
index 09629a95a5..5a9244b15c 100644
--- a/libs/generic-view/utils/src/lib/models/icons.types.ts
+++ b/libs/generic-view/utils/src/lib/models/icons.types.ts
@@ -50,4 +50,5 @@ export enum IconType {
   Support = "support",
   Exclamation = "exclamation",
   Namaste = "namaste",
+  Delete = "delete",
 }
diff --git a/libs/generic-view/utils/src/lib/use-current-view-key.ts b/libs/generic-view/utils/src/lib/use-current-view-key.ts
new file mode 100644
index 0000000000..c8fc794045
--- /dev/null
+++ b/libs/generic-view/utils/src/lib/use-current-view-key.ts
@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) Mudita sp. z o.o. All rights reserved.
+ * For licensing, see https://github.com/mudita/mudita-center/blob/master/LICENSE.md
+ */
+
+import { useParams } from "react-router"
+
+export const useCurrentViewKey = () => {
+  const { viewKey, subviewKey } = useParams<{
+    viewKey: string
+    subviewKey?: string
+  }>()
+  return subviewKey || viewKey
+}
diff --git a/libs/generic-view/views/src/lib/mc-about/list-modal/list-modal.test.ts b/libs/generic-view/views/src/lib/mc-about/list-modal/list-modal.test.ts
index d038572b23..d47ac25c78 100644
--- a/libs/generic-view/views/src/lib/mc-about/list-modal/list-modal.test.ts
+++ b/libs/generic-view/views/src/lib/mc-about/list-modal/list-modal.test.ts
@@ -26,10 +26,12 @@ describe("generateMcAboutListModalLayout", () => {
       "keymodal-button": {
         config: {
           text: "press me",
-          action: {
-            type: "open-modal",
-            modalKey: "keymodal",
-          },
+          actions: [
+            {
+              type: "open-modal",
+              modalKey: "keymodal",
+            },
+          ],
         },
       },
       keymodal: {
diff --git a/libs/generic-view/views/src/lib/mc-about/list-modal/list-modal.ts b/libs/generic-view/views/src/lib/mc-about/list-modal/list-modal.ts
index 7a1fa993f7..b5751f599e 100644
--- a/libs/generic-view/views/src/lib/mc-about/list-modal/list-modal.ts
+++ b/libs/generic-view/views/src/lib/mc-about/list-modal/list-modal.ts
@@ -28,11 +28,13 @@ export const generateMcAboutListModalLayout: ViewGenerator<
       component: "button-text",
       config: {
         text: config.buttonText,
-        action: {
-          type: "open-modal",
-          modalKey: config.dataKey + ListModalKeys.Modal,
-        },
-        modifiers: ["hover-underline"]
+        actions: [
+          {
+            type: "open-modal",
+            modalKey: config.dataKey + ListModalKeys.Modal,
+          },
+        ],
+        modifiers: ["hover-underline"],
       },
     },
     [config.dataKey + ListModalKeys.Modal]: {
diff --git a/libs/generic-view/views/src/lib/mc-overview/section-backup/section-backup.ts b/libs/generic-view/views/src/lib/mc-overview/section-backup/section-backup.ts
index 473b74a692..142dcda682 100644
--- a/libs/generic-view/views/src/lib/mc-overview/section-backup/section-backup.ts
+++ b/libs/generic-view/views/src/lib/mc-overview/section-backup/section-backup.ts
@@ -97,11 +97,13 @@ export const generateMcOverviewBackupLayout: ViewGenerator<
               text: intl.formatMessage({
                 id: "module.genericBackup.restoreButtonLabel",
               }),
-              action: {
-                type: "open-modal",
-                modalKey: config.dataKey + BackupRestoreModalsKeys.Restore,
-                domain: BackupRestoreModalsKeys.Domain,
-              },
+              actions: [
+                {
+                  type: "open-modal",
+                  modalKey: config.dataKey + BackupRestoreModalsKeys.Restore,
+                  domain: BackupRestoreModalsKeys.Domain,
+                },
+              ],
             },
           },
           ...generateBackupRestoreModalLayout({
@@ -118,11 +120,13 @@ export const generateMcOverviewBackupLayout: ViewGenerator<
               text: intl.formatMessage({
                 id: "module.genericBackup.createButtonLabel",
               }),
-              action: {
-                type: "open-modal",
-                modalKey: config.dataKey + BackupModalsKeys.Create,
-                domain: BackupModalsKeys.Domain,
-              },
+              actions: [
+                {
+                  type: "open-modal",
+                  modalKey: config.dataKey + BackupModalsKeys.Create,
+                  domain: BackupModalsKeys.Domain,
+                },
+              ],
             },
           },
           ...generateBackupCreateModalLayout({
diff --git a/libs/generic-view/views/src/lib/mc-overview/summary/summary.ts b/libs/generic-view/views/src/lib/mc-overview/summary/summary.ts
index 57941fbac2..de756cce14 100644
--- a/libs/generic-view/views/src/lib/mc-overview/summary/summary.ts
+++ b/libs/generic-view/views/src/lib/mc-overview/summary/summary.ts
@@ -83,10 +83,12 @@ export const generateMcOverviewSummaryLayout: ViewGenerator<
             config: {
               text: config.aboutTitle!,
               icon: config.aboutIcon,
-              action: {
-                type: "navigate",
-                viewKey: "mc-overview/mc-about",
-              },
+              actions: [
+                {
+                  type: "navigate",
+                  viewKey: "mc-overview/mc-about",
+                },
+              ],
               modifiers: ["uppercase"],
             },
           },
diff --git a/libs/help/ui/src/lib/components/article-content.tsx b/libs/help/ui/src/lib/components/article-content.tsx
index 1141323307..00e0894849 100644
--- a/libs/help/ui/src/lib/components/article-content.tsx
+++ b/libs/help/ui/src/lib/components/article-content.tsx
@@ -74,10 +74,12 @@ export const ArticleContent: FunctionComponent = () => {
           <ButtonText
             config={
               {
-                action: {
-                  type: "custom",
-                  callback: openContactSupportFlow,
-                },
+                actions: [
+                  {
+                    type: "custom",
+                    callback: openContactSupportFlow,
+                  },
+                ],
                 modifiers: ["link", "hover-underline"],
               } as ButtonTextConfig
             }
diff --git a/libs/help/ui/src/lib/components/article-footer.tsx b/libs/help/ui/src/lib/components/article-footer.tsx
index a90b97dc14..d7c3063a41 100644
--- a/libs/help/ui/src/lib/components/article-footer.tsx
+++ b/libs/help/ui/src/lib/components/article-footer.tsx
@@ -32,10 +32,12 @@ export const ArticleFooter: FunctionComponent = () => {
       <ButtonPrimary
         config={{
           text: intl.formatMessage(messages.buttonLabel),
-          action: {
-            type: "custom",
-            callback: openSupportWebsite,
-          },
+          actions: [
+            {
+              type: "custom",
+              callback: openSupportWebsite,
+            },
+          ],
         }}
         data-testid={HelpTestId.ArticleFooterButton}
       />
diff --git a/libs/help/ui/src/lib/components/article-header.tsx b/libs/help/ui/src/lib/components/article-header.tsx
index 6162e42532..fbdbe8c697 100644
--- a/libs/help/ui/src/lib/components/article-header.tsx
+++ b/libs/help/ui/src/lib/components/article-header.tsx
@@ -24,10 +24,12 @@ export const ArticleHeader: FunctionComponent<Props> = ({ title }) => {
         data-testid={HelpTestId.ArticleBackButton}
         config={{
           text: "Back",
-          action: {
-            type: "custom",
-            callback: goBack,
-          },
+          actions: [
+            {
+              type: "custom",
+              callback: goBack,
+            },
+          ],
           icon: IconType.ArrowBack,
           modifiers: ["uppercase"],
         }}
diff --git a/libs/help/ui/src/lib/components/help-footer.tsx b/libs/help/ui/src/lib/components/help-footer.tsx
index 415e588065..fc26ae166a 100644
--- a/libs/help/ui/src/lib/components/help-footer.tsx
+++ b/libs/help/ui/src/lib/components/help-footer.tsx
@@ -45,10 +45,12 @@ export const HelpFooter: FunctionComponent = () => {
         }}
         config={{
           text: intl.formatMessage(messages.buttonLabel),
-          action: {
-            type: "custom",
-            callback: openContactSupportFlow,
-          },
+          actions: [
+            {
+              type: "custom",
+              callback: openContactSupportFlow,
+            },
+          ],
           icon: IconType.Support,
           modifiers: ["link", "uppercase"],
         }}
diff --git a/package-lock.json b/package-lock.json
index ffb3f4c057..9ba8512801 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -117,6 +117,7 @@
         "@wdio/reporter": "^8.40.3",
         "@wdio/spec-reporter": "^8.40.3",
         "@wdio/types": "^8.40.3",
+        "@welldone-software/why-did-you-render": "^8.0.3",
         "archiver": "^5.3.1",
         "async-mutex": "^0.4.0",
         "axios": "^0.27.2",
@@ -186,7 +187,7 @@
         "react-beautiful-dnd": "^13.1.1",
         "react-dom": "^18.2.0",
         "react-google-button": "^0.7.2",
-        "react-hook-form": "~7.50.1",
+        "react-hook-form": "~7.53.0",
         "react-intersection-observer": "^9.4.0",
         "react-intl": "6.4.7",
         "react-modal": "^3.15.1",
@@ -14678,6 +14679,18 @@
         }
       }
     },
+    "node_modules/@welldone-software/why-did-you-render": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/@welldone-software/why-did-you-render/-/why-did-you-render-8.0.3.tgz",
+      "integrity": "sha512-bb5bKPMStYnocyTBVBu4UTegZdBqzV1mPhxc0UIV/S43KFUSRflux9gvzJfu2aM4EWLJ3egTvdjOi+viK+LKGA==",
+      "dev": true,
+      "dependencies": {
+        "lodash": "^4"
+      },
+      "peerDependencies": {
+        "react": "^18"
+      }
+    },
     "node_modules/@xmldom/xmldom": {
       "version": "0.8.10",
       "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
@@ -38987,19 +39000,19 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.50.1",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.50.1.tgz",
-      "integrity": "sha512-3PCY82oE0WgeOgUtIr3nYNNtNvqtJ7BZjsbxh6TnYNbXButaD5WpjOmTjdxZfheuHKR68qfeFnEDVYoSSFPMTQ==",
+      "version": "7.53.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.53.0.tgz",
+      "integrity": "sha512-M1n3HhqCww6S2hxLxciEXy2oISPnAzxY7gvwVPrtlczTM/1dDadXgUxDpHMrMTblDOcm/AXtXxHwZ3jpg1mqKQ==",
       "dev": true,
       "engines": {
-        "node": ">=12.22.0"
+        "node": ">=18.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/react-hook-form"
       },
       "peerDependencies": {
-        "react": "^16.8.0 || ^17 || ^18"
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
     "node_modules/react-intersection-observer": {
diff --git a/package.json b/package.json
index 3714160a77..7b92936e12 100644
--- a/package.json
+++ b/package.json
@@ -145,6 +145,7 @@
     "@wdio/reporter": "^8.40.3",
     "@wdio/spec-reporter": "^8.40.3",
     "@wdio/types": "^8.40.3",
+    "@welldone-software/why-did-you-render": "^8.0.3",
     "archiver": "^5.3.1",
     "async-mutex": "^0.4.0",
     "axios": "^0.27.2",
@@ -214,7 +215,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0",
     "react-google-button": "^0.7.2",
-    "react-hook-form": "~7.50.1",
+    "react-hook-form": "~7.53.0",
     "react-intersection-observer": "^9.4.0",
     "react-intl": "6.4.7",
     "react-modal": "^3.15.1",